/* ============================================================
   AUTRE.CSS — Page Autre / Services Supplémentaires
   ============================================================ */
/* ─── Variables ─────────────────────────────────────── */
:root {
  --pad:      clamp(1.5rem, 5vw, 5rem);
}

.autre-page {
    background: transparent;
    color:      var(--clr-text, #fff);
    overflow-x: clip;
    min-height: 100vh;
}

/* ── Loader Autre ── */
.autre-loader {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.6s ease, visibility 0.6s ease;
}

.autre-loader.is-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.autre-loader .spinner {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(255, 255, 255, 0.1);
    border-top-color: var(--clr-accent, #00e5ff);
    border-radius: 50%;
    animation: spin-loader 1s linear infinite;
}

@keyframes spin-loader {
    to { transform: rotate(360deg); }
}

/* ══════════════════════════════════════════════════════════════
   SECTION 1 — Hero
══════════════════════════════════════════════════════════════ */
.autre-hero {
    padding: clamp(2rem, 3.5vw, 4rem) var(--pad) 2.8rem;
}

.autre-hero__inner {
    max-width:       var(--max-w, 1280px);
    margin:          0 auto;
    display:         flex;
    align-items:     flex-end;
    justify-content: space-between;
    gap:             4rem;
}

.autre-hero__eyebrow {
    display:        block;
    font-size:      0.68rem;
    font-weight:    600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color:          rgba(255,255,255,.35);
    margin-bottom:  10px;
}

.autre-hero__title {
    font-family:    'Bebas Neue', sans-serif;
    font-weight:    400;
    font-size: clamp(54px, 9vw, 108px);
    line-height:    1.05;
    text-transform: uppercase;
    letter-spacing: -.01em;
    color:          #fff;
}

.autre-hero__right {
    padding-bottom: .5rem;
    flex-shrink:    0;
    text-align:     right;
}

.autre-hero__desc {
    font-size:   14px;
    line-height: 1.75;
    color:       rgba(255,255,255,.42);
    text-align:  right;
    max-width:   300px;
}


/* ══════════════════════════════════════════════════════════════
   Shared section header
══════════════════════════════════════════════════════════════ */
.autre-section__header {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    max-width:       var(--max-w, 1280px);
    margin:          0 auto 2.5rem;
    padding:         0 var(--pad);
}

.autre-section__title {
    font-family:    var(--font-display, 'Syne', sans-serif);
    font-weight:    800;
    font-size:      .85rem;
    text-transform: uppercase;
    letter-spacing: .1em;
    color:          #fff;
}

.autre-section__index {
    font-size:      .72rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color:          rgba(255,255,255,.3);
}


/* ══════════════════════════════════════════════════════════════
   SECTION 2 — Posters : carrousel bande + grille
══════════════════════════════════════════════════════════════ */
.autre-posters {
    /* padding:    4rem 0 5rem; */
    overflow:   hidden;
}

/* ── Carrousel bande horizontale ─────────────────────────── */
.posters-carousel {
    width:      100%;
    overflow:   visible; /* ← important pour voir l'effet 3D */
    mask-image: linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%);
    transition: opacity .45s ease, transform .45s ease;
    margin-bottom: 2.5rem;
    perspective: 1200px; /* ← distance oeil */
}

.posters-carousel.is-leaving {
    opacity:        0;
    transform:      translateY(-14px);
    pointer-events: none;
}

.posters-carousel__track {
    display:         flex;
    gap:             1rem;
    width:           max-content;
    will-change:     transform;
    transform-style: preserve-3d; /* ← déplacé ici */
}

.posters-carousel__item {
    flex-shrink:   0;
    width:         260px;
    height:        350px;
    border-radius: 10px;
    overflow:      hidden;
    background:    #1a1a1d;
}

.posters-carousel__item img {
    width:           100%;
    height:          100%;
    object-fit:      cover;
    object-position: center;
    display:         block;
    pointer-events:  none;
    user-select:     none;
}

.posters-carousel__wrapper {
    transition: opacity 0.5s ease, max-height 0.6s ease, margin 0.6s ease;
    max-height: 400px;
    overflow: hidden;
    opacity: 1;
}

.carousel--hidden {
    opacity: 0;
    max-height: 0;
    margin: 0 !important;
    pointer-events: none;
}

/* ── Grille ──────────────────────────────────────────────── */
.posters-grid {
    display:               none;
    grid-template-columns: repeat(4, 1fr);
    gap:                   .75rem;
    padding:               0 var(--pad);
    max-width:             var(--max-w, 1280px);
    margin:                0 auto;
    align-items:           start;
    opacity:               0;
    transform:             translateY(18px);
    transition:            opacity .45s ease, transform .45s ease;
}

.posters-grid.is-expanded { display: grid; }
.posters-grid.is-visible  { opacity: 1; transform: translateY(0); }

.poster-card {
    position:      relative;
    border-radius: 6px;
    overflow:      hidden;
    background:    #1a1a1d;
    cursor:        pointer;
    transition:    transform .3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow .3s ease;
}
.poster-card:hover {
    transform:  translateY(-4px);
    box-shadow: 0 10px 24px rgba(0,0,0,0.5);
}

.poster-card:nth-child(4n+2),
.poster-card:nth-child(4n+4) { margin-top: 2.5rem; }

.poster-card__img-wrap {
    width:        100%;
    aspect-ratio: 2/3;
    overflow:     hidden;
    position:     relative; /* ancrage de l'overlay */
}

.poster-card__img-wrap img {
    width:           100%;
    height:          100%;
    object-fit:      cover;
    object-position: center top; /* privilégie le haut (visages, titres) */
    display:         block;
    transition:      transform .5s cubic-bezier(.25,.46,.45,.94);
}

.poster-card:hover .poster-card__img-wrap img { transform: scale(1.04); }

.poster-card__overlay {
    position:        absolute;
    inset:           0;
    background:      linear-gradient(to top, rgba(0,0,0,.75) 0%, transparent 55%);
    display:         flex;
    flex-direction:  column;
    justify-content: flex-end;
    padding:         1.1rem;
    opacity:         0;
    transition:      opacity .3s ease;
}

.poster-card:hover .poster-card__overlay { opacity: 1; }

.poster-card__name {
    font-family:    var(--font-display, 'Syne', sans-serif);
    font-weight:    700;
    font-size:      .88rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color:          #fff;
}

.poster-card__sub {
    font-size:  .75rem;
    color:      rgba(255,255,255,.55);
    margin-top: .2rem;
}

.poster-card.is-extra            { display: none; }
.poster-card.is-extra.is-visible { display: block; }

.posters-more {
    display:         flex;
    justify-content: center;
    margin-top:      3.5rem;
    margin-bottom:   1rem;
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 900px) {
    .posters-carousel__item  { width: 160px; height: 215px; }
    .posters-grid { grid-template-columns: repeat(2, 1fr); }
    .poster-card:nth-child(4n+3),
    .poster-card:nth-child(4n+4) { margin-top: 0; }
    .poster-card:nth-child(4n+2) { margin-top: 2rem; }
}

@media (max-width: 640px) {
    .posters-carousel__item  { width: 130px; height: 175px; }
    .posters-grid { grid-template-columns: 1fr 1fr; gap: .5rem; }
    .poster-card:nth-child(4n+2),
    .poster-card:nth-child(4n+4) { margin-top: 1.5rem; }
}


/* ══════════════════════════════════════════════════════════════
   SECTION 3 — Photographie : grille catégories
══════════════════════════════════════════════════════════════ */
.autre-photos {
    padding: 4rem 0 5rem;
    background: transparent;
}

.autre-photos__top {
    max-width:  var(--max-w, 1280px);
    margin:     0 auto 2.5rem;
    padding:    0 var(--pad);
}

.autre-photos__titles .autre-section__title { margin-bottom: .6rem; }

.autre-photos__desc {
    font-size:   .87rem;
    line-height: 1.65;
    color:       rgba(255,255,255,.4);
}

/* Grille catégories */
.photos-categories {
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    gap:                   1rem;
    max-width:             var(--max-w, 1280px);
    margin:                0 auto;
    padding:               0 var(--pad);
}

.cat-card {
    position:      relative;
    border-radius: 8px;
    overflow:      hidden;
    cursor:        pointer;
    background:    #1a1a1d;
    aspect-ratio:  16/9;
    outline:       none;
    transition:    transform .3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow .3s ease;
}
.cat-card:hover, .cat-card:focus {
    transform:  translateY(-4px);
    box-shadow: 0 12px 28px rgba(0,0,0,0.6);
}

.cat-card__img-wrap {
    width:        100%;
    height:       100%;
    position:     relative;
    aspect-ratio: 16/9; /* ← forcer le ratio sur le wrapper aussi */
    overflow:     hidden;
}

.cat-card img {
    width:      100%;
    height:     100%;
    object-fit: cover;
    display:    block;
    transition: transform .55s cubic-bezier(.25,.46,.45,.94);
}

.cat-card:hover img,
.cat-card:focus img { transform: scale(1.05); }

.cat-card__overlay {
    position:        absolute;
    inset:           0;
    background:      linear-gradient(to top, rgba(0,0,0,.82) 0%, rgba(0,0,0,.15) 60%, transparent 100%);
    display:         flex;
    flex-direction:  column;
    justify-content: flex-end;
    padding:         1.4rem;
    transition:      background .35s ease;
}

.cat-card:hover .cat-card__overlay {
    background: linear-gradient(to top, rgba(0,0,0,.92) 0%, rgba(0,0,0,.3) 60%, transparent 100%);
}

.cat-card__title {
    font-family:    var(--font-display, 'Syne', sans-serif);
    font-weight:    800;
    font-size:      1.15rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color:          #fff;
    display:        block;
    margin-bottom:  .35rem;
}

.cat-card__desc {
    font-size:   .78rem;
    color:       rgba(255,255,255,.55);
    display:     block;
    margin-bottom: .5rem;
    line-height: 1.5;
}

.cat-card__count {
    font-size:      .68rem;
    font-weight:    600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color:          rgba(255,255,255,.35);
    display:        block;
}

/* ══════════════════════════════════════════════════════════════
   MODAL — Catégorie photos
══════════════════════════════════════════════════════════════ */
.photo-modal {
    position:   fixed;
    inset:      0;
    z-index:    1000;
    display:    flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    opacity:    0;
    transition: opacity .35s ease;
}

.photo-modal.is-open {
    pointer-events: all;
    opacity:        1;
}

.photo-modal__backdrop {
    position:   absolute;
    inset:      0;
    background: rgba(0,0,0,.85);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.photo-modal__panel {
    position:      relative;
    z-index:       1;
    background:    #0f0f0f;
    border:        0.5px solid rgba(255,255,255,.1);
    border-radius: 14px;
    width:         min(92vw, 1100px);
    max-height:    90vh;
    display:       flex;
    flex-direction: column;
    overflow:      hidden;
    transform:     translateY(24px) scale(.97);
    transition:    transform .38s cubic-bezier(.25,.46,.45,.94);
}

.photo-modal.is-open .photo-modal__panel {
    transform: translateY(0) scale(1);
}

.photo-modal__header {
    display:         flex;
    align-items:     flex-start;
    justify-content: space-between;
    padding:         1.5rem 1.75rem 1.2rem;
    border-bottom:   0.5px solid rgba(255,255,255,.08);
    flex-shrink:     0;
}

.photo-modal__subcats {
    display: none;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.2rem;
    padding: 1.5rem 1.75rem;
    border-bottom: 0.5px solid rgba(255,255,255,.05);
    background: rgba(255,255,255,.02);
}
.photo-modal__subcats:has(.cat-card--sub[style*="display: block"]),
.photo-modal__subcats:has(.cat-card--sub[style*="display: inline"]) {
    /* on utilisera JS pour le show/hide propre mais ceci est une sécu */
}
.cat-card--sub {
    border-radius: 8px;
    aspect-ratio: 16/9;
    background: #1a1a1d;
    overflow: hidden;
    cursor: pointer;
    position: relative;
    box-shadow: 0 4px 12px rgba(0,0,0,0.5);
    transition: transform .3s ease, box-shadow .3s ease;
}
.cat-card--sub:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.8);
}
.cat-card--sub .cat-card__img-wrap {
    width: 100%; height: 100%;
}
.cat-card--sub .cat-card__title {
    font-size: 0.95rem;
    margin-bottom: 0;
}
.cat-card--sub .cat-card__overlay {
    padding: 1rem;
}

.photo-modal__title {
    font-family:    var(--font-display, 'Syne', sans-serif);
    font-weight:    800;
    font-size:      1.1rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color:          #fff;
    margin:         0 0 .3rem;
}

.photo-modal__subtitle {
    font-size:  .8rem;
    color:      rgba(255,255,255,.4);
    margin:     0;
}

.photo-modal__close {
    background:    transparent;
    border:        0.5px solid rgba(255,255,255,.18);
    border-radius: 50%;
    width:         36px;
    height:        36px;
    display:       flex;
    align-items:   center;
    justify-content: center;
    color:         rgba(255,255,255,.6);
    cursor:        pointer;
    flex-shrink:   0;
    transition:    color .2s, border-color .2s, background .2s;
}

.photo-modal__close:hover {
    color:        #fff;
    border-color: rgba(255,255,255,.4);
    background:   rgba(255,255,255,.06);
}

.photo-modal__grid {
    overflow-y:  auto;
    padding:     1.5rem 1.75rem;
    display:     block;
    column-count: 3;
    column-gap:  .75rem;
}

.photo-modal__grid::-webkit-scrollbar       { width: 4px; }
.photo-modal__grid::-webkit-scrollbar-track { background: transparent; }
.photo-modal__grid::-webkit-scrollbar-thumb { background: rgba(255,255,255,.15); border-radius: 2px; }

.photo-modal__item {
    position:      relative;
    border-radius: 6px;
    overflow:      hidden;
    background:    #1a1a1d;
    break-inside:  avoid;
    margin-bottom: .75rem;
}

.photo-modal__item img {
    width:        100%;
    height:       auto;
    display:      block;
    transition:   transform .4s cubic-bezier(.25,.46,.45,.94);
}

.photo-modal__item:hover img { transform: scale(1.03); }

.photo-modal__meta {
    position:       absolute;
    bottom:         0;
    left:           0;
    right:          0;
    padding:        .5rem .75rem;
    background:     linear-gradient(to top, rgba(0,0,0,.65) 0%, transparent 100%);
    font-size:      .68rem;
    font-weight:    500;
    letter-spacing: .08em;
    text-transform: uppercase;
    color:          rgba(255,255,255,.6);
}

/* Responsive modal */
@media (max-width: 700px) {
    .photo-modal__grid { column-count: 2; }
    .photo-modal__panel { width: 96vw; max-height: 95vh; }
}

/* Responsive catégories */
@media (max-width: 900px) {
    .photos-categories { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
    .photos-categories { grid-template-columns: 1fr; }
}


/* ══════════════════════════════════════════════════════════════
   Bouton "Voir plus" — partagé
══════════════════════════════════════════════════════════════ */
.btn-voir-plus {
    display:        inline-flex;
    align-items:    center;
    gap:            .65rem;
    font-family:    var(--font-display, 'Syne', sans-serif);
    font-weight:    600;
    font-size:      .75rem;
    text-transform: uppercase;
    letter-spacing: .12em;
    color:          rgba(255,255,255,.6);
    background:     transparent;
    border:         0.5px solid rgba(255,255,255,.18);
    border-radius:  999px;
    padding:        .75rem 2.2rem;
    cursor:         pointer;
    transition:     color .25s, border-color .25s, transform .2s, background .25s;
}

.btn-voir-plus:hover {
    color:        #fff;
    border-color: rgba(255,255,255,.45);
    background:   rgba(255,255,255,.04);
    transform:    translateY(-2px);
}

.btn-voir-plus:active { transform: translateY(0); }

.btn-voir-plus__icon {
    display:    inline-flex;
    transition: transform .3s ease;
}

.btn-voir-plus:hover .btn-voir-plus__icon { transform: translateY(3px); }

.btn-voir-plus.is-hidden { display: none; }


/* ══════════════════════════════════════════════════════════════
   SECTION 4 — CTA
══════════════════════════════════════════════════════════════ */
.autre-cta {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    text-align:     center;
    padding:        7rem var(--pad-x, 2.5rem);
    gap:            1.5rem;
}

.autre-cta__title {
    font-family:    var(--font-display, 'Syne', sans-serif);
    font-weight:    800;
    font-size:      clamp(1.8rem, 4vw, 3rem);
    text-transform: uppercase;
    letter-spacing: -.01em;
    color:          #fff;
    line-height:    1;
}

.autre-cta__sub {
    font-size:   .95rem;
    line-height: 1.7;
    color:       rgba(255,255,255,.45);
}

.btn--cta-yellow {
    background:     #f5c518 !important;
    color:          #0a0a0c !important;
    padding: 17px 32px;
    width: 189.92px;
    height: 54px;
    border-radius: 12px;
}

.btn--cta-yellow:hover {
    background:  #ffd740 !important;
    box-shadow:  0 0 36px rgba(245,197,24,.35) !important;
    transform:   scale(1.04) !important;
}


/* ══════════════════════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
    .posters-grid { grid-template-columns: repeat(2, 1fr); }
    .poster-card:nth-child(3),
    .poster-card:nth-child(4) { margin-top: 0; }
    .poster-card:nth-child(2) { margin-top: 2rem; }
    .autre-hero__title { font-size: clamp(36px, 8vw, 72px); }
    .photos-categories { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
    .autre-hero__inner {
        flex-direction: column;
        gap:            1.5rem;
        align-items:    flex-start;
    }
    .autre-hero__right,
    .autre-hero__desc { text-align: left; }
    .autre-hero__title { font-size: clamp(32px, 10vw, 56px); }

    .posters-grid {
        grid-template-columns: 1fr 1fr;
        gap:                   .5rem;
    }
    .poster-card:nth-child(4n+2),
    .poster-card:nth-child(4n+4) { margin-top: 1.5rem; }

    .photos-categories { grid-template-columns: 1fr; }
    .photos-masonry       { grid-template-columns: 1fr; }
    .photo-card--wide     { grid-column: auto; }
    .autre-photos__top    { flex-direction: column; gap: 1.25rem; }

    .photo-modal__panel { width: 98vw; max-height: 95vh; border-radius: 10px; }
    .photo-modal__grid  { grid-template-columns: 1fr 1fr; }
    .photo-modal__header { padding: 1rem 1rem .8rem; }

    .autre-cta { padding: 4rem 1.25rem; }
    .autre-cta__sub { font-size: .85rem; }
}

@media (max-width: 400px) {
    .posters-grid { grid-template-columns: 1fr; }
    .poster-card:nth-child(n) { margin-top: 0; }
    .photo-modal__grid { grid-template-columns: 1fr; }
}

/* ── Spin wrapper ── */
.spin-btn {
  position: relative;
  display: inline-flex;
  overflow: hidden;
  border-radius: 7px;
  padding: 1.5px;
  background: transparent;
  border: none;
  cursor: pointer;
  text-decoration: none;
}

/* ── Conic gradient border ── */
.spin-btn::before {
  content: '';
  position: absolute;
  inset: -1000%;
  animation: spin 2.5s linear infinite;
}

.spin-btn.btn-cyan::before {
  background: conic-gradient(
    from 90deg at 50% 50%,
    #C3F5FF 0%,
    #00c8e0 30%,
    #005a66 60%,
    #00E5FF 100%
  );
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ── Inner face ── */
.spin-btn__inner {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 5.5px;
  padding: 14px 28px;
  font-family: 'DM Sans', sans-serif;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  white-space: nowrap;
  transition: transform 0.25s ease;
}

.spin-btn.btn-cyan .spin-btn__inner {
  background: linear-gradient(105.87deg, #C3F5FF 0%, #00E5FF 100%);
  color: #005a66;
}

.spin-btn:hover .spin-btn__inner {
  transform: translateY(-2px);
}