/* ============================================================
   CLANDESTUDIO — page d'accueil
   ============================================================ */

/* ---------- Scroll World ---------- */
.world { position: relative; height: var(--world-h, 1100vh); background: var(--cream); }
.world__sticky { position: sticky; top: 0; height: 100vh; height: 100dvh; overflow: hidden;
  isolation: isolate;
  /* Crème, la teinte de la page — et non le sable. Le sable ne servait que de
     repli pendant le chargement de l'image, mais il restait visible à la fin du
     défilement collant : on voyait alors un grand aplat beige sous la scène. */
  background: var(--cream); }
.world__poster, .world__canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.world__poster { object-fit: cover; z-index: 0; }
.world__canvas { z-index: 1; opacity: 0; transition: opacity .5s var(--ease); }
.world.is-live .world__canvas { opacity: 1; }

.world__hud {
  position: absolute; z-index: 5; top: 20px; left: 20px;
  display: flex; align-items: center; gap: 14px; padding: 8px 16px; border-radius: 999px;
  font-size: 13px; font-weight: 500; color: var(--ink); white-space: nowrap;
}
.world__count { font-family: var(--display); letter-spacing: .08em; font-size: 12px; }
.world__count b { color: var(--neon-ink); }
.world__label { min-width: 9ch; }
.world__bar { width: 70px; height: 3px; border-radius: 3px; background: var(--line-strong); overflow: hidden; }
.world__bar i { display: block; height: 100%; background: var(--neon-ink); transform-origin: left; transform: scaleX(0); }

.world__chapters { list-style: none; margin: 0; padding: 0; }

/* Un chapitre = un calque plein écran ; ses cartes y sont posées */
.chapter { position: absolute; inset: 0; z-index: 4; pointer-events: none; visibility: hidden; }
.chapter.is-active { visibility: visible; }

/* Style commun des cartes en verre */
.chapter__head, .beat {
  border-radius: 22px;
  background: rgba(255, 250, 242, .76); border: 1px solid rgba(255, 255, 255, .72);
  -webkit-backdrop-filter: blur(20px) saturate(160%); backdrop-filter: blur(20px) saturate(160%);
  box-shadow: var(--shadow-lg);
}

/* Carte d'en-tête : visible seulement pour l'ouverture et la fin.
   Dans les autres chapitres, le titre et l'intro du pôle restent dans la page
   (lus par Google) et sont repris dans les fiches. */
.chapter__head {
  position: absolute; top: 50%; left: clamp(20px, 5vw, 80px); width: min(440px, 34vw);
  padding: 26px 28px; pointer-events: none;
  opacity: 0; transform: translate3d(0, calc(-50% + 24px), 0);
  transition: opacity .5s var(--ease), transform .7s var(--ease);
}
.chapter[data-side="right"] > .chapter__head { left: auto; right: clamp(20px, 5vw, 80px); }
.chapter.is-active.head-on > .chapter__head { opacity: 1; transform: translate3d(0, -50%, 0); pointer-events: auto; }
.chapter:has(.beat):not(:first-child) > .chapter__head {
  position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.chapter__title { margin: 12px 0 0; font-family: var(--display); font-weight: 700; font-size: clamp(28px, 3vw, 44px); line-height: 1.02; letter-spacing: -.03em; text-wrap: balance; }
h1.chapter__title { font-size: clamp(32px, 3.4vw, 50px); }
.chapter__body { margin: 12px 0 0; color: var(--ink-soft); font-size: 16px; }
.chapter__foot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 20px; }
.chapter__count { display: none; }
.btn--sm { min-height: 38px; padding: 8px 14px; font-size: 13px; }

/* Une carte par prestation, posée dans la zone calme de la scène (data-x / data-y) */
.beats { list-style: none; margin: 0; padding: 0; }
.beat {
  --p: .5;
  position: absolute; left: calc(var(--x, 60) * 1%); top: calc(var(--y, 30) * 1%);
  width: min(410px, 27vw); padding: 16px 20px 14px; cursor: pointer; pointer-events: none;
  opacity: 0; filter: blur(6px);
  transform: translate3d(0, 34px, 0) scale(.96);
  transition: opacity .45s var(--ease), filter .45s var(--ease), transform .6s var(--ease), box-shadow .3s;
}
.beat.is-current {
  opacity: 1; filter: none; pointer-events: auto;
  transform: translate3d(0, calc((.5 - var(--p)) * 46px), 0) scale(1);
  transition: opacity .45s var(--ease), filter .45s var(--ease), transform .25s linear, box-shadow .3s;
}
.beat.is-done { transform: translate3d(0, -40px, 0) scale(.96); }
.beat:hover, .beat:focus-visible { box-shadow: var(--shadow-lg), 0 0 0 3px rgba(63, 217, 192, .45); outline: 0; }
.beat__kicker { display: flex; justify-content: space-between; gap: 10px; margin: 0; white-space: nowrap; font-family: var(--display); font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--copper); }
.beat__kicker b { flex: none; white-space: nowrap; color: var(--neon-ink); letter-spacing: .06em; }
.beat h3 { margin: 8px 0 0; font-family: var(--display); font-weight: 700; font-size: clamp(19px, 1.5vw, 23px); line-height: 1.1; letter-spacing: -.02em; }
.beat > p { margin: 6px 0 0; color: var(--ink-soft); font-size: 14px; line-height: 1.5; }
.beat__more { display: none; }
.beats__bar { display: flex; gap: 3px; margin: 12px 0 0; }
.beats__bar i { flex: 1; height: 3px; border-radius: 3px; background: rgba(30, 24, 18, .12); }
.beats__bar i.is-on { background: var(--neon-ink); }
.beat__foot { display: flex; justify-content: flex-end; margin-top: 8px; }
.beat .link-arrow { font-size: 13px; }

.world__rail {
  position: absolute; z-index: 5; right: 18px; top: 50%; transform: translateY(-50%);
  display: grid; gap: 4px;
}
.world__rail button {
  position: relative; width: 28px; height: 28px; border: 0; background: none; padding: 0; display: grid; place-items: center;
}
.world__rail button i { width: 7px; height: 7px; border-radius: 50%; background: rgba(30, 24, 18, .3); transition: all .3s var(--ease); }
.world__rail button:hover i { background: var(--ink); }
.world__rail button.is-active i { height: 22px; border-radius: 4px; background: var(--neon-ink); box-shadow: 0 0 12px var(--neon-glow); }
.world__rail button span {
  position: absolute; right: 34px; padding: 5px 10px; border-radius: 999px; white-space: nowrap;
  background: var(--ink); color: var(--paper); font-size: 12px; opacity: 0; pointer-events: none; transform: translateX(6px);
  transition: all .2s var(--ease);
}
.world__rail button:hover span, .world__rail button:focus-visible span { opacity: 1; transform: none; }
.world.has-right .world__rail { right: auto; left: 18px; }
.world.has-right .world__rail button span { right: auto; left: 34px; }

.world__cue {
  position: absolute; z-index: 5; left: 50%; bottom: calc(var(--dock-h) + 44px); transform: translateX(-50%);
  display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; color: var(--ink);
  padding: 8px 14px; border-radius: 999px; background: rgba(255, 250, 242, .55);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  transition: opacity .4s;
}
.world__cue .icon { animation: cue 1.6s var(--ease) infinite; }
@keyframes cue { 50% { transform: translateY(4px); } }
/* La scène se dissout dans la page : un léger assombrissement puis la crème,
   au lieu d'un passage sable → crème qui laissait une bande beige. */
.world__fade { height: 160px; margin-top: -1px;
  background: linear-gradient(rgba(30, 24, 18, .06), rgba(30, 24, 18, 0) 55%), var(--cream); }

/* Mode statique (animations réduites ou échec) */
.world.is-static { height: auto; }
.world.is-static .world__sticky { position: relative; height: auto; overflow: visible; padding: 90px 0 40px; }
.world.is-static .world__poster, .world.is-static .world__canvas, .world.is-static .world__hud,
.world.is-static .world__rail, .world.is-static .world__cue { display: none; }
.world.is-static .world__chapters { display: grid; gap: 28px; width: min(var(--max), 100% - 2 * var(--pad)); margin: 0 auto; }
.world.is-static .chapter { position: relative; inset: auto; visibility: visible; pointer-events: auto; display: grid; gap: 14px; }
.world.is-static .chapter > img { width: 100%; border-radius: var(--r-md); }
.world.is-static .chapter__head, .world.is-static .chapter:has(.beat):not(:first-child) > .chapter__head {
  position: relative; inset: auto; width: auto; height: auto; clip: auto; white-space: normal; padding: 24px; opacity: 1; transform: none; }
.world.is-static .beats { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.world.is-static .beat { position: relative; inset: auto; width: auto; opacity: 1; filter: none; transform: none; pointer-events: auto; display: block !important; }

/* ---------- Confiance ---------- */
.trust { padding: 40px 0 90px; }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.stat { padding: 26px 28px; border-radius: var(--r-md); background: var(--paper); border: 1px solid var(--line); }
.stat b { display: block; font-family: var(--display); font-size: clamp(44px, 5vw, 68px); line-height: 1; letter-spacing: -.04em; }
.stat span { display: block; margin-top: 10px; color: var(--ink-soft); font-size: 15px; }
.trust__label { margin: 56px 0 26px; text-align: center; font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); }
.partners { align-items: center; }
.partners img { height: 44px; width: auto; filter: grayscale(1) contrast(1.1); mix-blend-mode: multiply; opacity: .72; transition: all .3s; }
.partners img:hover { filter: none; opacity: 1; }
.partners img[src$="mbc5.png"] { filter: grayscale(1) brightness(.45) contrast(1.3); height: 52px; }
.partner-word { font-family: var(--display); font-weight: 800; font-size: 34px; letter-spacing: -.02em; line-height: 44px; color: var(--ink); opacity: .72; white-space: nowrap; }

/* ---------- Logos clients & productions ---------- */
.logos { padding-top: 40px; }
.logos__group + .logos__group { margin-top: 34px; }
.logos__label { margin: 0 0 14px; font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); text-align: center; }
.logo-row { list-style: none; margin: 0; padding: 0; }
/* Un pôle sans film représentatif porte une ICÔNE : mieux vaut nommer le métier
   qu'afficher une vignette dont on ne comprend pas le sujet. */
.pole__icon { position: absolute; inset: 0; display: grid; place-items: center;
  background: linear-gradient(135deg, rgba(63,217,192,.10), rgba(212,165,116,.10)); }
.pole__icon .icon { width: 92px; height: 92px; color: var(--neon-ink); opacity: .9; }
.pole__media { position: relative; }
.logo-row--static { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
/* display:flex, pas grid : dans une grille centrée, `height: 100 %` d'une image
   résout contre une hauteur `auto` (donc ignoré) — un logo plus haut que large
   débordait de sa tuile. En flex, la hauteur du conteneur est définie, donc
   100 % borne réellement l'image. */
.logo-tile { display: flex; align-items: center; justify-content: center; flex: none; width: 190px; height: 110px; padding: 16px; border-radius: 20px; background: var(--paper); border: 1px solid var(--line); transition: border-color .3s, transform .4s var(--ease), box-shadow .3s; }
/* width/height a 100 % + object-fit: contain — un logo plus haut que large
   (Al Aoula, MBC 5 : 98x120) debordait de sa tuile en max-height seul. */
.logo-tile img { width: 100%; height: 100%; object-fit: contain; filter: grayscale(1); opacity: .8; transition: filter .3s, opacity .3s; }
.logo-tile:hover { transform: translateY(-4px); border-color: rgba(63, 217, 192, .55); box-shadow: var(--shadow); }
.logo-tile:hover img { filter: none; opacity: 1; }
@media (max-width: 560px) { .logo-tile { width: 150px; height: 86px; } }

/* ---------- Pôles ---------- */
.poles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.pole {
  position: relative; display: flex; flex-direction: column; overflow: hidden;
  border-radius: var(--r-lg); background: var(--paper); border: 1px solid var(--line);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .3s;
}
.pole:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: rgba(63, 217, 192, .55); }
/* La tuile n'a plus de fond propre : c'est la VIDÉO qui la remplit. Une image
   dessous laissait apparaître un cadre (le « fond carré ») dès que les formats
   différaient. */
.pole__media { margin: 0; aspect-ratio: 16 / 10; overflow: hidden; background: #14110f; }
.pole__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); }
.pole__media video, .pole__media__loop {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
}
.pole:hover .pole__media img { transform: scale(1.06); }
.pole__body { padding: 22px 24px 26px; }
.pole__num { display: flex; justify-content: space-between; gap: 10px; margin: 0 0 12px; font-family: var(--display); font-size: 12px; font-weight: 700; letter-spacing: .1em; color: var(--copper); }
.pole__num span { font-family: var(--text); font-weight: 500; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-soft); font-size: 11px; }
.pole__body p:last-child { margin: 10px 0 0; color: var(--ink-soft); font-size: 15px; }
.pole__go {
  position: absolute; top: 16px; right: 16px; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%;
  background: var(--glass-strong); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  transform: scale(.8); opacity: 0; transition: all .35s var(--ease);
}
.pole:hover .pole__go { transform: none; opacity: 1; background: var(--neon); }

/* ---------- Bande expertises ---------- */
.skills { padding: 10px 0 20px; }
.skills__track { list-style: none; margin: 0; padding: 0; }
.skills__track li {
  display: inline-flex; align-items: center; gap: 10px; padding: 12px 22px; border-radius: 999px; white-space: nowrap;
  border: 1px solid var(--line-strong); font-family: var(--display); font-weight: 600; font-size: 15px; letter-spacing: .02em;
}
.skills__track li::after { content: "+"; color: var(--neon-ink); font-weight: 700; }

/* ---------- Projets à la une (grille par savoir-faire) ---------- */
.works { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.work {
  position: relative; display: flex; flex-direction: column; overflow: hidden;
  border-radius: var(--r-lg); background: var(--paper); border: 1px solid var(--line);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .3s;
}
.work:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: rgba(63, 217, 192, .55); }
.work--wide { grid-column: span 2; }
/* Idem pour les cartes de projets : la vidéo remplit la carte, sans photo dessous. */
.work__media { position: relative; margin: 0; aspect-ratio: 16 / 9; overflow: hidden; background: #14110f; }
.work__media video, .work__media .apercu {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
}
.work--wide .work__media { aspect-ratio: 21 / 9; }
.work__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.work:hover .work__media img { transform: scale(1.05); }
.work__play {
  position: absolute; right: 16px; bottom: 16px; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%;
  background: rgba(255, 250, 242, .75); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  transition: transform .35s var(--ease), background .35s;
}
.work__play .icon { width: 20px; height: 20px; }
.work__play use[href$="#play"] { fill: var(--ink); }
.work:hover .work__play { transform: scale(1.1); background: var(--neon); }
.work__body { padding: 20px 22px 24px; }
.work__body h3 { margin: 10px 0 0; font-family: var(--display); font-size: 22px; line-height: 1.15; }
.work__body > p:not(.eyebrow) { margin: 8px 0 0; color: var(--ink-soft); font-size: 15px; }
.work__tags { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 0; padding: 0; }
.work__tags li { padding: 5px 10px; border-radius: 999px; background: var(--cream); font-size: 12px; font-weight: 500; }

/* La section « Notre méthode » vit dans assets/css/methode.css. */

/* ---------- Pourquoi ---------- */
.why { position: relative; }
.why__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.why__card { padding: 28px; border-radius: var(--r-lg); }
.why__card > .icon { width: 30px; height: 30px; color: var(--neon-ink); }
.why__card h3 { margin: 22px 0 8px; font-family: var(--display); font-size: 20px; }
.why__card p { margin: 0; color: var(--ink-soft); font-size: 15px; }

/* ---------- FAQ ---------- */
.faq__grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(40px, 7vw, 110px); }
.faq__list { display: grid; gap: 12px; }
.faq details { border-radius: var(--r-md); box-shadow: none; }
.faq summary { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 22px 24px; cursor: pointer; list-style: none; font-weight: 600; font-size: 17px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .icon { transition: transform .3s var(--ease); color: var(--neon-ink); }
.faq details[open] summary .icon { transform: rotate(45deg); }
.faq details p { margin: -6px 0 0; padding: 0 24px 22px; color: var(--ink-soft); }

/* ---------- CTA final ---------- */
/* ============================================================
   CTA — « Et si le prochain monde était le vôtre ? »
   ------------------------------------------------------------
   Avant : une image d'équipe en fond beige, sur laquelle le titre noir
   se perdait. Maintenant : le film institutionnel (le CMC, architecture et
   lumière) tourne en fond plein cadre, avec un voile asymétrique qui
   n'éclaircit QUE la zone du texte. Le contraste ne dépend plus du hasard
   des plans : il est garanti quelle que soit l'image qui défile.

   Le liseré lumineux « cta__edge » est la signature : une ligne cuivre →
   turquoise qui dessine le haut du cadre et fait écho au fil de la méthode.
   ============================================================ */
.cta { padding-top: 0; }

.cta__card {
  position: relative; isolation: isolate;
  overflow: hidden; border-radius: 36px;
  min-height: clamp(420px, 58vw, 560px);
  display: grid; align-items: end;
  background: #14100c;
}

/* le film : plein cadre, jamais étiré, léger relief au survol */
.cta__film {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.06);
  transition: transform 1.4s var(--ease);
}
.cta__card:hover .cta__film { transform: scale(1.12); }

/* le voile : dense en bas à gauche (le texte), dégagé en haut à droite
   (l'architecture se voit). Deux dégradés superposés. */
.cta__veil {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(100deg, rgba(12, 9, 7, .93) 0%, rgba(12, 9, 7, .78) 38%, rgba(12, 9, 7, .34) 66%, rgba(12, 9, 7, .1) 100%),
    linear-gradient(0deg, rgba(12, 9, 7, .82) 0%, rgba(12, 9, 7, .2) 46%, rgba(12, 9, 7, 0) 72%);
}

/* le liseré : ligne d'accent qui souligne le cadre et fait écho au fil */
.cta__edge {
  position: absolute; left: 0; right: 0; top: 0; height: 2px; z-index: 2;
  background: linear-gradient(90deg, var(--copper) 0%, #ffd9a0 26%, var(--neon) 62%, rgba(63, 217, 192, 0) 100%);
  opacity: .9;
}

/* le texte : le contraste est porté par le voile, pas par un fond opaque */
.cta__body {
  position: relative; z-index: 2;
  padding: clamp(30px, 4.6vw, 68px);
  max-width: 880px;
  color: var(--paper);
}
.cta__body .eyebrow { color: var(--sand); }
.cta__body .h-xl {
  margin-top: 16px; color: var(--paper);
  font-size: clamp(38px, 6vw, 92px);
  text-shadow: 0 2px 24px rgba(0, 0, 0, .5);
}
.cta__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }

/* le bouton secondaire : sombre et translucide, pour tenir sur le film */
.cta__body .btn--ghost-dark {
  background: rgba(255, 250, 242, .1); color: var(--paper);
  border-color: rgba(255, 250, 242, .3);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.cta__body .btn--ghost-dark:hover { background: rgba(255, 250, 242, .2); border-color: var(--paper); }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .why__grid { grid-template-columns: repeat(2, 1fr); }
  .poles { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
  .chapter__head, .chapter[data-side="right"] > .chapter__head, .beat {
    top: auto; left: 12px; right: 12px; width: auto;
    bottom: calc(var(--dock-h) + 30px + env(safe-area-inset-bottom));
  }
  .chapter__head, .chapter[data-side="right"] > .chapter__head { padding: 20px 22px; transform: translate3d(0, 20px, 0); }
  .chapter.is-active.head-on > .chapter__head { transform: none; }
  .beat { padding: 16px 18px 14px; }
  .chapter__title, h1.chapter__title { font-size: clamp(24px, 6.6vw, 30px); margin-top: 10px; }
  .chapter__body { font-size: 14px; margin-top: 8px; }
  .beat h3 { font-size: 21px; }
  .beat > p { font-size: 14px; }
  .world__hud { top: 12px; left: 12px; padding: 7px 14px; }
  .world__bar { width: 44px; }
  .world__rail, .world.has-right .world__rail { right: 8px; left: auto; top: 88px; transform: none; gap: 0; }
  .world__rail button span { display: none; }
  .world__cue { display: none; }
  .stats { grid-template-columns: 1fr; gap: 12px; }
  .stat { display: flex; align-items: baseline; gap: 16px; padding: 20px 22px; }
  .stat span { margin: 0; }
  .works { grid-template-columns: repeat(2, 1fr); }
  .method__grid, .faq__grid { grid-template-columns: 1fr; }
  .method__intro { position: static; }
  .world.is-static .chapter { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .poles, .why__grid, .works { grid-template-columns: 1fr; }
  .work--wide { grid-column: auto; }
  .work--wide .work__media { aspect-ratio: 16 / 9; }
  .cta__card { min-height: 480px; border-radius: 28px; }
  .cta__actions .btn { flex: 1 1 100%; }
}

/* ---------- Pop-up de détails ---------- */
.details {
  width: min(760px, calc(100% - 24px)); max-height: calc(100dvh - 40px); padding: 0; border: 0; border-radius: 30px;
  background: var(--paper); color: var(--ink); box-shadow: 0 40px 100px -30px rgba(30, 20, 10, .55); overflow: hidden;
}
.details::backdrop { background: rgba(30, 24, 18, .42); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.details[open] { animation: pop .45s var(--ease); }
@keyframes pop { from { opacity: 0; transform: translateY(24px) scale(.97); } }
.details__inner { position: relative; display: block; max-height: calc(100dvh - 40px); overflow-y: auto; overscroll-behavior: contain; }
.details__media { margin: 0; background: var(--cream-2); aspect-ratio: 16 / 8; overflow: hidden; }
.details__media img { width: 100%; height: 100%; object-fit: cover; }
.details__body { padding: clamp(24px, 3.4vw, 40px); }
.details__body .h-md { margin-top: 12px; font-size: clamp(26px, 2.8vw, 36px); }
.details__intro { margin: 12px 0 0; color: var(--ink-soft); }
.details__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.details__close {
  position: absolute; z-index: 2; top: 14px; right: 14px; display: grid; place-items: center; width: 44px; height: 44px;
  border-radius: 50%; border: 0; background: var(--glass-strong); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  box-shadow: var(--shadow);
}
.details__close .icon { transform: rotate(45deg); }
@media (max-width: 760px) {
  .details { border-radius: 24px; }
  .details__media { aspect-ratio: 16 / 9; }
  .details__actions .btn { flex: 1 1 100%; }
}

.details__more { margin: 14px 0 0; color: var(--ink); }
.details__items { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 8px; }
.details__items li { display: flex; gap: 10px; align-items: flex-start; padding: 10px 14px; border-radius: 14px; background: var(--cream); font-size: 15px; }
.details__items li::before { content: ""; flex: none; width: 8px; height: 8px; margin-top: 7px; border-radius: 50%; background: var(--neon-ink); }
.details__ideal { margin: 16px 0 0; padding: 14px 16px; border-radius: 14px; border: 1px dashed var(--line-strong); color: var(--ink-soft); font-size: 15px; }
.details__ideal strong { color: var(--ink); }
.details__others { margin: 24px 0 0; }
.details__others p { margin: 0 0 10px; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }
.details__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.details__chips button { padding: 7px 12px; border-radius: 999px; border: 1px solid var(--line-strong); background: transparent; font-size: 13px; transition: all .2s; }
.details__chips button:hover { border-color: var(--neon-ink); color: var(--neon-ink); }
.details__chips button[aria-current="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }

/* ---------- Boutons d'en-tête de section, empilés ---------- */
/* Deux appels à l'action côte à côte dans la tête de section : on les empile
   à droite pour qu'ils restent lisibles sans écraser le titre. */
.section-head__actions { display: grid; gap: 10px; justify-items: stretch; }
.section-head__actions .btn { justify-content: space-between; }
@media (max-width: 860px) {
  .section-head__actions { grid-auto-flow: column; justify-items: start; }
}