/* ---------------------------------------------------
   Alice Myriam Lahana — Avocat & Docteur en droit
   --------------------------------------------------- */

@font-face {
  font-family: "Special Gothic Expanded";
  src: url("../assets/fonts/SpecialGothicExpanded-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Special Gothic Expanded";
  src: url("../assets/fonts/SpecialGothicExpanded-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {
  --cream: #dbd5c5;
  --plum: #543943;
  --plum-soft: rgba(84, 57, 67, 0.82);
  --cream-soft: rgba(219, 213, 197, 0.82);
  --hairline-on-cream: rgba(84, 57, 67, 0.3);
  --hairline-on-plum: rgba(219, 213, 197, 0.28);

  --font-display: "Special Gothic Expanded", sans-serif;
  --font-body: "Special Gothic Expanded", sans-serif;

  --wrap: 1240px;
  --gutter: clamp(24px, 6vw, 96px);
  --section-y: clamp(56px, 9vw, 140px);
  --case-icon-w: clamp(56px, 5vw, 76px);

  /* Header / hero: values taken straight from the XD artboard's own
     pixel coordinates (1920px reference canvas), turned into vw so
     the whole block scales together, proportionally, at any viewport
     width. Only a floor is set, to keep things usable on small phones. */
  --header-h: clamp(153px, 17.943vw, 9999px);
  --scroll-offset: clamp(153px, 17.943vw, 9999px);

  --logo-size: clamp(150px, 19.0262vw, 9999px);
  --logo-x: clamp(14px, 5.3646vw, 9999px);

  --hero-fs: clamp(30px, 3.802vw, 9999px);
  --hero-lh: clamp(58px, 6.0417vw, 9999px);
  --hero-x: clamp(20px, 5.3125vw, 9999px);
  --hero-y-local: clamp(24px, 4.9844vw, 9999px);
  /* Full first screen, beige, before the dark bio band starts -- matches
     the XD hero rectangle, which is exactly the artboard's own 1920x1080
     viewport height, not a vw-scaled fraction of it. Minus the sticky
     header's own height: the header sits in normal flow right above the
     hero (not overlapping it), so a full 100vh hero on top of that made
     the pair taller than one real screen, pushing the citation below true
     center instead of centering it within the screen the header shares. */
  --hero-min-h: max(380px, calc(100vh - var(--header-h)));

  --credit-fs: clamp(16px, 1.0417vw, 9999px);
  --credit-y-local: clamp(118px, 18.0052vw, 9999px);

  --nav-fs: clamp(14px, 1.3021vw, 9999px);
  --sub-fs: clamp(11px, 1.0417vw, 9999px);
  --sub-lh: clamp(22px, 2.0833vw, 9999px);
  --side-pad: clamp(24px, 3.75vw, 9999px);
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* Safety net against page-wide horizontal scroll -- a single overlong
     tracked word (this project uses very wide uppercase letter-spacing
     throughout) can occasionally paint past its own box on a narrow
     phone instead of wrapping, and without this that bleeds out into a
     sideways-scrollable page (shifting the fixed header along with it in
     some mobile browsers) instead of just being clipped in place.
     Carousels keep their own horizontal scroll via overflow-x: auto on
     their own inner element, unaffected by this. Deliberately NOT also
     set on body: any non-visible overflow on body breaks position:
     sticky for its children (the desktop header is sticky, a direct
     child of body) by turning body itself into their nearest scrolling
     ancestor instead of the viewport -- html alone already stops the
     sideways scroll without that side effect. */
  overflow-x: hidden;
}

section[id] {
  scroll-margin-top: var(--scroll-offset);
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--plum);
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0.14em;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a, button { -webkit-tap-highlight-color: transparent; }
a { color: inherit; }

.wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.35em;
  line-height: 1.18;
  margin: 0 0 0.6em;
}

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--plum);
  color: var(--cream);
  padding: 12px 20px;
  z-index: 1000;
}
.skip-link:focus { left: 0; }

/* ---------------- Header (sticky menu) ---------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--header-h);
  background: var(--cream);
}

.site-header-inner {
  position: relative;
  height: 100%;
}

.logo {
  display: block;
  position: absolute;
  left: var(--logo-x);
  top: 50%;
  transform: translateY(-50%);
  width: var(--logo-size);
  height: var(--logo-size);
  /* Harmless where width/height match (object-fit: cover is a no-op on a
     1:1 box against the medallion's own 1:1 artwork) -- lets the 480px
     override below give this box a shorter height than its width without
     squashing the medallion, cropping the source file's own excess
     transparent margin (top/bottom only) instead of scaling the artwork
     itself. */
  overflow: hidden;
}
/* Medallion flip: the logo spins 90° on its vertical axis (like a coin
   turning to face the viewer) -- turning in from the left, continuing the
   same spin the intro's medallion left on as it flipped away to the right.
   Same delay/duration/easing as the hero h1's own slide-in (.hero h1
   below), so the two arrive together instead of the logo popping in on
   its own separate beat. Held at rest (not autoplayed on page load): while
   the intro overlay is up it fully covers the header, so an animation
   started at page load would run its course hidden behind it and already
   be finished by the time the overlay lifts. script.js adds body.reveal-ui
   at the exact moment the page becomes visible to the visitor (either
   immediately, or in sync with the intro's own flip-away), which is what
   actually starts this animation. */
@keyframes logo-in {
  from { opacity: 0; transform: perspective(600px) rotateY(90deg); }
  to { opacity: 1; transform: perspective(600px) rotateY(0deg); }
}

.logo { perspective: 600px; }

.logo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform-origin: 50% 50%;
  opacity: 0;
  transform: perspective(600px) rotateY(90deg);
}

body.reveal-ui .logo img {
  animation: logo-in 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.15s forwards;
}

.main-nav {
  position: absolute;
  top: 50%;
  right: var(--side-pad);
  transform: translateY(-50%);
  display: flex;
  align-items: flex-start;
  gap: clamp(20px, 3.125vw, 60px);
  list-style: none;
  margin: 0;
  padding: 0;
}

.main-nav li { position: relative; }

.main-nav a {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--nav-fs);
  letter-spacing: 0.35em;
  color: var(--plum);
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  padding: 6px 2px;
}

.submenu {
  position: absolute;
  top: 100%;
  left: 50%;
  padding-top: 0.6em;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--sub-fs);
  letter-spacing: 0.315em;
  text-transform: uppercase;
  color: #a09a89;
  line-height: var(--sub-lh);
  white-space: nowrap;
  opacity: 0;
  transform: translate(-50%, -4px);
  transition: opacity 0.25s ease, transform 0.25s ease;
  pointer-events: none;
}

.main-nav li:hover .submenu,
.main-nav li:focus-within .submenu {
  opacity: 1;
  transform: translate(-50%, 0);
}

.main-nav li.just-clicked .submenu {
  opacity: 0 !important;
  transform: translate(-50%, -4px) !important;
  pointer-events: none !important;
}

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

.nav-toggle img {
  width: 52px;
  height: auto;
  /* Mirrored so its large fleur head points right at rest, per client
     feedback -- kept as the base transform (not swapping the asset) so
     the open state below just layers its rotation on top of it. */
  transform: scaleX(-1);
  transition: transform 0.3s ease-out;
}

/* Rotates down to point toward the dropdown it just opened, same 0.3s
   ease-out as the client's own tap interaction in the XD prototype. */
.nav-toggle[aria-expanded="true"] img { transform: scaleX(-1) rotate(90deg); }

/* ---------------- Bands / generic sections ---------------- */

.band--dark,
.bio,
.mais-aussi,
.methode,
.defendre,
.strategy {
  background: var(--plum);
  color: var(--cream);
}

.band--dark h1, .band--dark h2, .band--dark h3,
.bio h1, .bio h2, .bio h3 { color: var(--cream); }

.band--light,
.hero,
.comprendre,
.construire,
.cases,
.contact {
  background: var(--cream);
  color: var(--plum);
}

section > .wrap {
  padding-top: var(--section-y);
  padding-bottom: var(--section-y);
}

/* Extra clearance so the 01/02/03 hover overlays (which float below the
   numbered list) never spill past this section's own background into the
   band below it. Flat (not vw-scaled): the overlay's own text sits at a
   fixed rem size inside a 900px-capped grid, so its height stays constant
   at any desktop width -- a vw-scaled value would shrink faster than the
   overlay does and stop being enough room on narrower desktop windows. */
#comprendre > .wrap {
  padding-bottom: 400px;
}

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

.lead {
  font-size: clamp(1.05rem, 1.6vw, 1.35rem);
  max-width: 46ch;
}

/* ---------------- Hero ---------------- */

/* flex + justify-content:center (not each child's own absolute top,
   matching its fixed y-coordinate on the original 1920x1080 XD canvas):
   that canvas had no separate sticky header competing for space, but here
   the header sits in normal flow right above .hero, so the same fixed
   offsets no longer centered the citation within the shorter space left
   for it once --hero-min-h accounts for the header's own height. Centering
   the actual content instead adapts automatically to any header height. */
.hero {
  position: relative;
  min-height: var(--hero-min-h);
  background: var(--cream);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-left: var(--hero-x);
}

@keyframes hero-in {
  from { opacity: 0; transform: translateX(-28px); }
  to { opacity: 1; transform: translateX(0); }
}

/* Held at rest until body.reveal-ui is added -- see the comment above
   .logo img: same reasoning, so the title's slide-in isn't spent hidden
   behind the intro overlay before the visitor ever sees it. */
.hero h1 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--hero-fs);
  line-height: var(--hero-lh);
  letter-spacing: 0.35em;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0;
  transform: translateX(-28px);
}

body.reveal-ui .hero h1 {
  animation: hero-in 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.15s forwards;
}

.hero .credit {
  display: block;
  margin-top: clamp(10px, 0.94vw, 9999px);
  opacity: 0;
  transform: translateX(-28px);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--credit-fs);
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--plum);
}

body.reveal-ui .hero .credit {
  animation: hero-in 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.4s forwards;
}

/* ---------------- Bio ---------------- */

/* Capped at 50px, not the requested 55px: "Alice Myriam Lahana" (this
   heading's own longer second line) needs more than .bio .wrap's widest
   possible content width (reached once --wrap and --gutter both hit their
   own caps, an unavoidable ceiling regardless of viewport) can give it at
   55px, and would wrap a third time past that. */
.bio h2 { font-size: clamp(1.7rem, 3.6vw, 50px); max-width: 27ch; }

/* Only forces its break on the narrow-phone breakpoint below, where
   "Alice Myriam Lahana" needs a 3rd line of its own; display:none fully
   suppresses a <br>'s break, not just its own box, so this reads as
   "Maître / Alice Myriam Lahana" (2 lines) everywhere else. */
.mobile-break { display: none; }

/* "Responsabilités et sanctions des dirigeants" needs a different word
   grouping per breakpoint (desktop: "...et" / "sanctions..."; mobile:
   "Responsabilités" / "et sanctions" / "des dirigeants"), not just an
   extra break in the same place, hence two full copies swapped by
   display rather than one conditional <br>. */
.matter-text-mobile { display: none; }
.bio .lead { max-width: 60ch; font-size: clamp(1.15rem, 2vw, 1.6rem); font-weight: 400; margin-bottom: 1.4em; }
.bio p:not(.lead) { max-width: 68ch; color: var(--cream-soft); }
.bio strong { color: var(--cream); font-weight: 600; }

/* ---------------- Numbered lists (01 02 03) ---------------- */

/* max-content columns + space-between (not the old fixed 1fr/900px cap):
   each item stays sized to its own short num+label instead of stretching,
   with the extra room spread out as gaps between them -- so the row runs
   the same full width as the rest of the section (the heading above it,
   the arrows in Construire's matter-grid) instead of stopping at 900px,
   flush left against that heading and reaching just as far right. */
.numbered-list {
  list-style: none;
  margin: 2.4em 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, max-content);
  justify-content: space-between;
  align-items: start;
  gap: 32px 24px;
}

.numbered-list .num {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 65px;
  letter-spacing: 0.34em;
  margin-bottom: 0.15em;
}

/* Same size/tracking/leading as .case-head h3 ("Le 09 octobre 2019" etc.),
   for one consistent look across every num+legend pair on the site. */
.numbered-list .label {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 18px;
  letter-spacing: 0.34em;
  line-height: 1.28;
  text-transform: uppercase;
}

/* "Appuyer" tap hint: only ever added to the first item (01), as a
   one-time nudge that this row is tappable, and only shown on the mobile
   Comprendre stack it was designed for (see the #comprendre override
   below) -- hidden by default everywhere else. */
.tap-hint {
  display: none;
  color: #AFA99B;
  font-size: 14px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.expand-item.is-open .tap-hint { display: none; }

.also {
  font-size: clamp(24px, 2.2396vw, 9999px);
  letter-spacing: 0.15em;
  opacity: 0.85;
  margin-bottom: 0;
}

/* ---------------- Expandable items (numbered lists) ---------------- */

.expand-item { position: relative; }

.expand-trigger {
  display: block;
  width: 100%;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  font: inherit;
  color: inherit;
  text-align: left;
  -webkit-tap-highlight-color: transparent;
  /* Same reasoning as the tap-highlight above: the browser's own default
     focus ring (a heavy gold outline in Safari) has no place in this
     design and was showing up after a tap, boxing in the icon/num/label
     with no such state ever having been designed for it. */
  outline: none;
}

.expand-panel {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.4s ease, opacity 0.3s ease, margin-top 0.4s ease;
}

.expand-item.is-open .expand-panel {
  max-height: 480px;
  opacity: 1;
  margin-top: 14px;
}

/* Desktop: reveal on hover/focus as a floating overlay, so the row's own
   height never grows and the sections below don't get pushed down. Gated
   on min-width too, not just the pointer: a desktop browser simply
   resized narrow (the usual way to preview the mobile layout) still
   reports hover:hover/pointer:fine, and would otherwise get this
   floating "card" instead of the in-flow push-down the mobile design
   relies on. */
@media (hover: hover) and (pointer: fine) and (min-width: 901px) {
  .expand-panel {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    max-height: none;
    overflow: visible;
    margin-top: 0;
    padding-top: 14px;
    transform: translateY(-4px);
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s ease;
    z-index: 5;
  }

  .expand-item:hover .expand-panel,
  .expand-item:focus-within .expand-panel,
  .expand-item.is-open .expand-panel {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }

  /* Since the numbered-list grid switched to max-content columns (each
     sized to its own short num+label, not an equal 1fr share), the panel
     -- 100% of that same narrow column -- got much narrower too, forcing
     the longer entries (e.g. "Les bailleurs") into a lot of very short,
     ragged lines. A wider floor here, independent of the column's own
     width, keeps the panel text readable regardless of how compact its
     trigger is. */
  .numbered-list .expand-panel {
    width: max(100%, 320px);
  }
}

.expand-panel p {
  margin: 0;
  font-size: 0.92rem;
  /* Tighter than the inherited 0.14em (which computes off the body's
     16px, not this panel's own 14.72px, reading looser than intended here):
     at this column width the longer entries (commerçants, familles) were
     wrapping into a lot of very short, ragged lines. */
  letter-spacing: 0.12em;
}

.expand-panel p + p { margin-top: 1em; }

.band--dark .expand-panel { background: var(--plum); }
.band--light .expand-panel { background: var(--cream); }
.band--dark .expand-panel p { color: var(--cream-soft); }
.band--light .expand-panel p { color: var(--plum-soft); }

.mais-aussi {
  min-height: clamp(600px, 56.25vw, 9999px);
}

/* A bit more than #comprendre's wrap (400px): "Les commerçants" and "Les
   familles" run longer than 01/02/03's copy, so their hover panels reach
   further down and, at 400px, clipped into the divider below -- hiding its
   snowflake under the open panel instead of just sitting above it. */
.mais-aussi .wrap {
  padding-bottom: 530px;
}

/* ---------------- Dividers (snowflake / emblem ornaments) ---------------- */

.divider {
  display: flex;
  justify-content: space-between;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--gutter) clamp(28px, 5vw, 64px);
}

.divider img { width: clamp(22px, 2.4vw, 32px); height: auto; opacity: 0.9; }

/* ---------------- Comprendre / Construire headings ---------------- */

/* Lower floor and ceiling (were 2rem/3.4rem) and wider cap (was 14ch, same
   fix as .bio h2 elsewhere): "avant de convaincre" (the longer of the two
   second lines) didn't fit its own line at either end of the old clamp --
   on narrow phones because the floor was too big for the line at any
   width, and on desktop because at the old 3.4rem ceiling the line needed
   more room than .wrap itself provides, even once the 14ch cap was no
   longer the binding constraint -- wrapping a third time instead of
   holding at the two lines each heading's own <br> calls for. */
/* Same font-size formula shared with .defendre h2 and .contact h2 below
   (each keeps its own max-width, which controls line-wrapping per its
   own heading text, not size) -- these four section headings read as one
   family and should match exactly, not just be close, at any desktop
   width. */
.comprendre h2, .construire h2, .defendre h2, .contact h2 {
  font-size: clamp(0.9rem, 3.7vw, 55px);
}

.comprendre h2, .construire h2 {
  max-width: 24ch;
}

/* ---------------- Construire matter grid ---------------- */

/* Wider than the generic wrap: at 25px + 0.35em tracking, the longest
   titles ("Contentieux procédural", "Responsabilités et") need the same
   ~827px-per-column width as the XD artboard to fit their intended line
   break without wrapping early. */
.construire .wrap {
  max-width: clamp(900px, 90vw, 9999px);
}

.matter-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-flow: column;
  grid-template-rows: repeat(4, auto);
  align-items: start;
  gap: 0 clamp(20px, 2.578vw, 9999px);
  margin: 2.6em 0 3em;
}

.matter-item {
  border-bottom: 3px solid var(--plum);
}

.matter-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(10px, 0.8333vw, 9999px);
  min-height: clamp(70px, 7.5521vw, 9999px);
  padding: 0;
  width: 100%;
  background: none;
  border: none;
  margin: 0;
  cursor: pointer;
  font: inherit;
  color: inherit;
  text-align: left;
  -webkit-tap-highlight-color: transparent;
}

.matter-row:hover span { opacity: 0.72; }

.matter-row span {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(13px, 1.3021vw, 9999px);
  letter-spacing: 0.35em;
  text-transform: uppercase;
  line-height: 1.35;
  transition: opacity 0.25s ease;
}

.matter-row .arrow { width: clamp(40px, 3.2292vw, 9999px); height: auto; flex-shrink: 0; transition: transform 0.35s ease; }

.matter-item.is-open .arrow { transform: rotate(90deg); }

.matter-panel {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.4s ease, opacity 0.3s ease, padding-bottom 0.4s ease;
}

.matter-item.is-open .matter-panel {
  max-height: 640px;
  opacity: 1;
  padding-bottom: 22px;
}

.matter-panel p {
  margin: 0;
  font-size: 0.92rem;
  color: var(--plum-soft);
  max-width: 56ch;
}

.construire > .wrap > p { max-width: 62ch; color: var(--plum-soft); }

.construire .two-col-text {
  margin: 1.6em 0 0;
}

.construire .two-col-text p {
  max-width: 42ch;
  color: var(--plum-soft);
  text-align: left;
}

.construire > .wrap > p.statement {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.1rem, 2vw, 1.4rem);
  letter-spacing: 0.35em;
  text-transform: uppercase;
  margin-top: 1.4em;
  color: var(--plum);
}

.tag-carousel {
  margin-top: 1.8em;
  overflow-x: auto;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}

.tag-carousel ul {
  display: flex;
  gap: 12px;
  list-style: none;
  margin: 0;
  padding: 4px 4px 14px;
}

.tag-carousel li {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  /* A straight vw-based width grew independently of .construire .wrap's own
     (also uncapped) width, so the two drifted apart at wide viewports and
     the 3rd card no longer fit. Sizing off the row's own width (ul, its
     flex container) instead keeps exactly 3 of the 6 cards in view at any
     viewport, matching the client's reference. */
  width: clamp(250px, calc((100% - 24px) / 3), 9999px);
  background: var(--plum);
  border-radius: clamp(12px, 1.3vw, 24px);
  padding: clamp(16px, 2vw, 28px);
  gap: clamp(12px, 1.6vw, 22px);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(12px, 1.1vw, 9999px);
  letter-spacing: 0.35em;
  text-transform: uppercase;
  white-space: normal;
  line-height: 1.4;
  color: var(--cream);
}

/* No line-clamp here: card height is auto (content-driven), and the
   ul's default align-items:stretch already equalizes a row's card
   heights, so clamping to 2 lines only risked truncating real text
   ("...plus" lost) once a label needed a 3rd line at a given width. */

.tag-icon { width: clamp(36px, 4.6875vw, 90px); height: auto; flex-shrink: 0; }

.transition-arrow {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: clamp(12px, 1.6vw, 20px);
  margin-top: clamp(32px, 6vw, 64px);
}

.scroll-hint {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.35em;
  color: #AFA99B;
  opacity: 0;
  transform: translateX(6px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.transition-arrow:hover .scroll-hint,
.transition-arrow:focus-within .scroll-hint {
  opacity: 0.6;
  transform: translateX(0);
}

/* Was a plain <img> (a separate plum/cream-tinted PNG per band), swapped
   for a masked, empty element so it can be recolored to the exact
   .scroll-hint tone (#AFA99B) regardless of band -- a CSS mask only clips
   an <img>'s own already-baked-in pixel colors, it can't repaint them, so
   matching an arbitrary color meant painting a plain background through
   the PNG's alpha shape instead of showing the bitmap itself. Sized flat
   to 52px to match .nav-toggle img exactly, rather than each scaling
   independently by its own vw formula. */
.transition-arrow-icon {
  display: inline-block;
  width: 52px;
  height: auto;
  aspect-ratio: 322 / 100;
  flex-shrink: 0;
  background-color: #AFA99B;
  -webkit-mask: url("../assets/icons/icon-arrow.png") center / contain no-repeat;
  mask: url("../assets/icons/icon-arrow.png") center / contain no-repeat;
}

/* 52px matches .nav-toggle img, which only ever shows at mobile/tablet
   widths -- on desktop there's no such element to match, and 52px reads
   small next to the much larger cards there, smaller even than it was
   before this became a flat value (up to 90px on wide screens). Sized
   back up for desktop only. */
@media (min-width: 901px) {
  .transition-arrow-icon { width: 90px; }
}

/* ---------------- Méthode (questions) ---------------- */

/* Flush to the same page-margin guides as the heading/icons/paragraph
   use in XD (no extra gutter inset on top of the wide max-width, unlike
   the generic .wrap -- that inset is what stopped "faut-il" fitting on
   the heading's first line). */
.methode-inner {
  max-width: clamp(900px, 88.9583vw, 9999px);
  padding-left: 0;
  padding-right: 0;
}

.methode h2 {
  font-size: clamp(20px, 2.1875vw, 9999px);
  max-width: none;
  letter-spacing: 0.32em;
  margin-bottom: clamp(28px, 4.1146vw, 9999px);
}

.two-col {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(32px, 6vw, 80px);
  align-items: start;
}

/* Icon-over-label question cards, staggered (quinconce) as in the XD
   layout: items 1-2 share a row, item 3 sits centered in the gap below
   them. Positions are lifted straight from the XD artboard's own pixel
   coordinates (1920px reference), turned into vw. */
.question-list {
  position: relative;
  min-height: clamp(220px, 32.4vw, 9999px);
}

.question-item {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: clamp(140px, 17.9167vw, 9999px);
}

.question-item:nth-child(2) { left: clamp(112px, 23.902vw, 9999px); }
.question-item:nth-child(3) {
  left: clamp(56px, 10.26vw, 9999px);
  top: clamp(96px, 17.775vw, 9999px);
}

.question-item img {
  width: clamp(80px, 9.375vw, 9999px);
  height: auto;
  margin-bottom: 0.9em;
  transition: transform 0.3s ease;
}

.question-item:hover img { transform: scale(1.15); }

.question-item p {
  margin: 0;
  font-size: clamp(15px, 1.3021vw, 9999px);
  letter-spacing: 0.12em;
  line-height: 1.28;
  text-transform: uppercase;
  color: var(--cream-soft);
}

.question-item strong {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(15px, 1.3021vw, 9999px);
  letter-spacing: 0.12em;
  line-height: 1.28;
  text-transform: uppercase;
  color: var(--cream);
}

.methode-right p {
  color: var(--cream-soft);
  max-width: none;
  font-size: clamp(15px, 1.3021vw, 9999px);
  letter-spacing: 0.14em;
}
.methode-right { padding-top: clamp(8px, 2vw, 18px); }

/* ---------------- Cases ---------------- */

.cases .lead { max-width: 60ch; margin-bottom: 2em; }

.cases-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 72px);
}

/* The panel positions itself relative to this wrapper (not to .case,
   which also contains case-bottom) so "top: 100%" lands right under the
   trigger instead of at the bottom of the whole card. */
.case-top { position: relative; }

.case-trigger { cursor: default; }

.case-head {
  display: flex;
  align-items: center;
  gap: 18px;
}

/* Centering against the whole icon+num+date block (the shared rule above)
   lines the hand up with the block's own midpoint, between the "01/02"
   digit and the date below it, rather than with the digit itself. Here the
   wrapping div is unwrapped (display: contents) so img and case-num become
   direct flex siblings that center against each other alone, with the date
   forced onto its own full-width line below (flex-basis: 100%) and
   indented to keep lining up under the digit, not under the icon. */
.cases .case-head {
  align-items: center;
  flex-wrap: wrap;
}

.cases .case-head > div {
  display: contents;
}

.cases .case-head h3 {
  flex-basis: 100%;
  margin-top: 6px;
  margin-left: calc(var(--case-icon-w) + 18px);
  font-size: 22px;
}

.case-head img { width: var(--case-icon-w); height: auto; }

.case-num {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 65px;
  letter-spacing: 0.34em;
  color: var(--plum);
}

.case-head h3 {
  font-weight: 600;
  font-size: 18px;
  letter-spacing: 0.34em;
  line-height: 1.28;
  margin: 0;
}

/* Indented to line up under the "01/02/03" digit, the same as .case-head
   h3 above it -- not flush with the hand icon to its left, which is what
   plain left-aligned text (no margin) would otherwise match. */
.citation {
  font-size: clamp(15px, 1.3021vw, 9999px);
  letter-spacing: 0.14em;
  color: var(--plum-soft);
  margin: 0 0 1em;
  max-width: 46ch;
}

.case-detail {
  font-size: clamp(15px, 1.3021vw, 9999px);
  letter-spacing: 0.14em;
  color: var(--plum-soft);
  max-width: 46ch;
}

/* .expand-panel p (class+type) otherwise outranks the class-only rules
   above, so its margin:0 shorthand silently wins and zeroes this out. */
.expand-panel .citation,
.expand-panel .case-detail {
  margin-left: calc(var(--case-icon-w) + 18px);
}

/* Only reachable while the panel is showing (hover/focus/.is-open give it
   pointer-events via .expand-panel above) -- links out to the full ruling. */
.case-panel-link {
  display: block;
  text-decoration: none;
  color: inherit;
}

.case-panel-link:hover .case-detail,
.case-panel-link:hover .citation {
  color: var(--plum);
}

.case-bottom {
  color: var(--plum-soft);
  max-width: 46ch;
  margin-top: clamp(260px, 20vw, 9999px);
}

/* Desktop splits this one sentence in half, one piece under each case, to
   fill both columns of .cases-grid evenly. Stacked into a single column
   on mobile that reads top to bottom, that split instead lands the second
   half in the middle of case 02's own content -- so mobile gets this one
   unified copy after both cases instead (see the media query below). */
.case-bottom-mobile {
  display: none;
  color: var(--plum-soft);
  max-width: 46ch;
}

/* ---------------- Défendre ---------------- */

.defendre h2 { max-width: 16ch; }
.defendre .lead { color: var(--cream-soft); max-width: 62ch; }
.defendre .numbered-list .num,
.defendre .numbered-list .label { color: var(--cream); }

/* Same fix as #comprendre/.mais-aussi: 01/02's hover panels were reaching
   past the default section clearance and hiding the emblem divider below. */
.defendre > .wrap {
  padding-bottom: 300px;
}

/* ---------------- Distinctions ---------------- */

/* 42px (the client's spec) only fits "Cette exigence a été reconnue
   au-delà" on its own line -- the required first of its two lines -- up to
   about 1463px wide; past that this section's own content width is capped
   at 1240px by --wrap regardless of how much wider the viewport gets, so a
   flat 42px would wrap that line a second time on larger screens instead
   of holding at two lines total. Scaling down under that width instead. */
.distinctions-statement {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(20px, 1.9vw, 26px);
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--plum);
}

.distinctions-carousel {
  position: relative;
  margin-top: 2.6em;
  overflow-x: auto;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}

.distinctions-carousel ul {
  display: flex;
  align-items: flex-start;
  gap: clamp(48px, 6vw, 110px);
  list-style: none;
  margin: 0;
  padding: 4px 4px 14px;
}

.distinction {
  position: relative;
  flex: 0 0 auto;
}

.distinction-trigger {
  display: block;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  font: inherit;
  color: inherit;
  text-align: left;
  -webkit-tap-highlight-color: transparent;
}

.distinction-trigger .case-head { transition: opacity 0.25s ease; }

.distinction-trigger:hover .case-head { opacity: 0.72; }

/* Same problem as .cases .case-head: centering the whole icon+num+label
   flex row (the shared default) lines the hand up with the block's own
   midpoint, between the "01/02/03" digit and the label below it, rather
   than with the digit itself. A grid, rather than .cases's flex-wrap
   approach, keeps this simpler here: the icon sits in row 1 next to the
   digit and centers against just that row's height (align-items: center
   only ever measures a grid item against its own row/column, not the
   whole card), while the label is placed in row 2 under the digit with no
   extra markup or flex-basis line-break trick needed. (flex-basis: 100%
   was tried on the label itself to force it onto its own line, but a flex
   item's flex-basis overrides its width for sizing along the row axis, so
   it stretched the label's own box to the full line width too, inflating
   every card well past the label text's actual width.) */
.distinction .case-head {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 18px;
  row-gap: 6px;
  align-items: center;
}

.distinction .case-head > div {
  display: contents;
}

.distinction .case-head img {
  grid-column: 1;
  grid-row: 1;
}

.distinction .case-num {
  grid-column: 2;
  grid-row: 1;
}

.distinction .case-head h3 {
  grid-column: 2;
  grid-row: 2;
  margin: 0;
}

/* Capped like the label above: case-detail's usual size is vw-scaled with
   no ceiling, built for the wide, two-column Cour de cassation grid. Left
   uncapped here it would grow the hover text -- and therefore the reserved
   height below -- on very wide screens. */
.distinction .case-detail {
  font-size: clamp(14px, 1.1vw, 16px);
}

/* The carousel needs overflow-x for its horizontal scroll, which forces
   overflow-y to "auto" too (a CSS quirk), clipping the open panel's
   absolute overlay unless the carousel's own height already has room for
   it. Fixing the height, tall enough for the row plus the tallest open
   panel, both makes room for the overlay and -- since it no longer changes
   between closed and open -- keeps the scroll rail (the native horizontal
   scrollbar, which sits at this element's own bottom edge) from shifting
   position when a card is hovered; sized generously enough that the rail
   ends up below the panel text rather than cutting across it. Left out of
   the touch/mobile fallback, where the panel opens in normal flow instead
   and a fixed height would just clip it. */
@media (hover: hover) and (pointer: fine) {
  .distinctions-carousel {
    height: 480px;
  }
}

/* ---------------- Strategy ---------------- */

/* Same size/tracking/weight as .distinctions-statement ("Cette exigence a
   été reconnue..."), just cream instead of plum for this dark band and
   capped one pixel lower (26px there): this heading's own second line
   ("mais une stratégie...") is a touch longer than that one's, and didn't
   quite fit its line at 26px, wrapping a third time instead of holding at
   the two lines its own <br> calls for. */
.strategy-statement {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(18px, 1.9vw, 25px);
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--cream);
}

.strategy-carousel {
  margin-top: 1.8em;
  overflow-x: auto;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}

.strategy-carousel ul {
  /* Matches .tag-carousel ul's own fixed 12px exactly (was a wider,
     viewport-scaled gap) -- same row composition as the aubergine
     carousel, and needed for the 3rd card to actually clear the
     viewport at common widths instead of needing a scroll to see. */
  --strategy-gap: 12px;
  display: flex;
  gap: var(--strategy-gap);
  list-style: none;
  margin: 0;
  padding: 4px 4px 14px;
}

/* Sized off the row's own width, same as .tag-carousel li -- so exactly 3
   of the 4 cards show at any viewport, matching the aubergine carousel's
   card size in "Construire avant de convaincre". */
.strategy-card {
  flex: 0 0 auto;
  /* 24px = 2 gaps of var(--strategy-gap) above, now the same 12px
     .tag-carousel li's own formula assumes -- both the width math and
     the actual visual gap match it exactly. */
  width: clamp(250px, calc((100% - 24px) / 3), 9999px);
  background: var(--cream);
  border-radius: 18px;
  /* Same layout mechanics as .tag-carousel li now too (flex column +
     gap, same padding formula), not just the same width -- the previous
     padding (a taller, asymmetric clamp) and the icon's own margin
     instead of a shared gap were adding extra height on top of an
     already-matched width, so the two card styles still wouldn't come
     out the same height for an equivalent number of text lines. */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(12px, 1.6vw, 22px);
  padding: clamp(16px, 2vw, 28px);
  text-align: center;
}

.strategy-card img { width: clamp(36px, 4.6875vw, 90px); height: auto; }

/* Font-size, tracking and line-height matched to .tag-carousel li's own
   (clamp(12px, 1.1vw, 9999px) / 0.35em / 1.4) per the client, while
   keeping this card's own bold-then-regular weight split (.strategy-card
   strong below stays 700, this stays 400) rather than adopting
   .tag-carousel li's single uniform 600 weight. */
.strategy-card p {
  margin: 0;
  color: var(--plum);
  font-size: clamp(12px, 1.1vw, 9999px);
  letter-spacing: 0.35em;
  text-transform: uppercase;
  line-height: 1.4;
}

.strategy-card strong { display: block; font-weight: 700; }

/* Now that the carousel's own arrow sits between it and this text (rather
   than after the text, at the very end of the section, as before), this
   needs its own top clearance -- the arrow's margin-top only spaces it
   from what's above it. */
.strategy .two-col-text {
  margin-top: clamp(32px, 6vw, 64px);
}

.two-col-text {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 5vw, 64px);
}

.two-col-text p { color: var(--cream-soft); }

/* ---------------- Contact ---------------- */

.contact .wrap,
.footer-bottom,
.footer-inner {
  max-width: clamp(900px, 88.9583vw, 9999px);
}

/* Split out from the shared rule above and matched to .construire .wrap's
   own formula instead (clamp(900px, 90vw, 9999px)) -- the two carousels'
   cards are meant to be the same size, but were computing their
   percentage-based widths against two different-width wraps, leaving a
   several-px gap between them at any given viewport no width formula on
   the cards themselves could close. */
.strategy .wrap {
  max-width: clamp(900px, 90vw, 9999px);
}

.contact p {
  color: var(--plum-soft);
  max-width: none;
  font-size: clamp(15px, 1.3021vw, 9999px);
  letter-spacing: 0.14em;
}

/* No bottom padding here: the footer's own symmetric padding-top/bottom
   around .footer-inner already spaces it from this text above and from
   the mentions/credits row below, so Cabinet... sits centered between
   the two. Adding this section's usual padding-bottom on top would
   double the gap above it only. */
.contact > .wrap { padding-bottom: 0; }

/* ---------------- Mentions légales page ---------------- */

.legal > .wrap {
  max-width: clamp(900px, 88.9583vw, 9999px);
  padding-top: clamp(16px, 2vw, 32px);
}

.legal h1 {
  font-size: clamp(30px, 3.802vw, 9999px);
  white-space: nowrap;
  overflow-wrap: break-word;
  margin-bottom: 0.9em;
}

.legal h2 {
  font-size: clamp(15px, 1.3021vw, 9999px);
  letter-spacing: 0.12em;
  margin: 1.8em 0 0.8em;
}

.legal p,
.legal li {
  max-width: 68ch;
  font-size: clamp(14px, 1.0417vw, 9999px);
  letter-spacing: 0.12em;
  color: var(--plum-soft);
}

.legal-list {
  margin: 0 0 1em;
  padding-left: 1.3em;
}
.legal-list li { margin-bottom: 0.4em; }

.legal-note {
  margin-top: 2.4em;
  font-size: clamp(12px, 0.9375vw, 9999px);
  opacity: 0.75;
}

/* ---------------- Footer ---------------- */

.site-footer {
  background: var(--cream);
  color: var(--plum);
}

.footer-inner {
  display: flex;
  align-items: center;
  gap: clamp(20px, 4vw, 40px);
  padding-top: clamp(40px, 6vw, 72px);
  padding-bottom: clamp(40px, 6vw, 72px);
}

.footer-inner .emblem { width: clamp(52px, 5vw, 70px); height: auto; flex-shrink: 0; }

.cabinet {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.1rem, 2vw, 1.4rem);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 0.8em;
}

address { font-style: normal; }
address p {
  margin: 0.3em 0;
  font-size: clamp(15px, 1.3021vw, 9999px);
  letter-spacing: 0.16em;
  color: var(--plum-soft);
}
address a { text-decoration: none; transition: color 0.25s ease; }
address a:hover { color: #afa99b; }

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: nowrap;
  padding-top: 0;
  padding-bottom: clamp(20px, 2.5vw, 32px);
}

.footer-bottom a,
.footer-bottom p {
  margin: 0;
  font-size: var(--sub-fs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--plum);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.25s ease;
}

.footer-bottom a:hover { color: #afa99b; }

/* ---------------- Responsive ---------------- */

@media (max-width: 900px) {
  .two-col,
  .cases-grid,
  .two-col-text {
    grid-template-columns: 1fr;
  }

  .methode-inner { padding-left: var(--gutter); padding-right: var(--gutter); }

  .matter-grid { grid-template-columns: 1fr; grid-auto-flow: row; grid-template-rows: none; gap: 0; }

  .numbered-list { grid-template-columns: repeat(3, 1fr); gap: 24px 16px; }

  .methode-right { margin-top: 8px; }

  .question-list {
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 28px;
  }
  .question-item {
    position: static;
    width: auto;
    flex-direction: row;
    text-align: left;
  }
  .question-item img { width: 64px; margin-bottom: 0; margin-right: 20px; }

  .mais-aussi { min-height: 0; }

  #comprendre > .wrap { padding-bottom: var(--section-y); }
  .mais-aussi .wrap { padding-bottom: var(--section-y); }
  .defendre > .wrap { padding-bottom: var(--section-y); }

  .footer-bottom { flex-wrap: wrap; }
  .footer-bottom a,
  .footer-bottom p { white-space: normal; }
}

@media (max-width: 900px) {
  :root { --mobile-header-h: 114px; }

  /* position:fixed instead of sticky: some mobile browsers' own address
     bar hiding/showing on scroll can make a merely-sticky header visibly
     let go for a frame in one scroll direction. Fixed removes it from
     flow entirely, so body needs the matching top padding it would
     otherwise have reserved by sitting in place. */
  .site-header {
    height: auto;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
  }

  body { padding-top: var(--mobile-header-h); }

  .site-header-inner {
    padding: 20px var(--gutter);
    min-height: var(--mobile-header-h);
  }

  /* Centered on the header instead of pinned to --logo-x, with the arrow
     toggle absolutely pinned to the opposite (right) edge like the
     hamburger it replaces -- so either can grow (the logo does, at the
     480px breakpoint below) without shifting the other off-center. */
  .logo {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 74px;
    height: 74px;
  }

  .nav-toggle {
    display: flex;
    position: absolute;
    top: 50%;
    right: var(--gutter);
    transform: translateY(-50%);
  }

  .main-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    transform: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--cream);
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
  }

  /* Full-screen takeover once open: fixed (viewport-relative, not the
     header's own box) so its cream fill reaches the actual bottom of the
     screen regardless of how little the 4 links need, starting right
     below the header -- itself unaffected and still sticky, since it's a
     separate element the fixed panel merely clears rather than covers. */
  .main-nav.is-open {
    position: fixed;
    top: var(--mobile-header-h);
    left: 0;
    right: 0;
    bottom: 0;
    max-height: none;
    overflow-y: auto;
    z-index: 99;
  }

  .main-nav li { padding: 0 var(--gutter); }

  .main-nav a {
    display: block;
    padding: 20px 0 0;
    font-size: 23px;
  }

  .submenu {
    display: block;
    position: static;
    padding: 0 0 20px;
    margin: 0;
    opacity: 1;
    transform: none;
    pointer-events: auto;
    font-size: 13px;
    white-space: normal;
  }

  /* The desktop hover-reveal tooltip's own transform/opacity (for sliding
     and fading itself in over the content below) otherwise still wins on
     tap here -- since it's the same selector at the same specificity, just
     later in the cascade -- and visibly nudges this now-static, always-
     shown copy sideways instead of leaving it alone. .just-clicked's own
     desktop rule goes further and uses !important (to beat :hover's own
     opacity/transform once a link is clicked), so matching it here needs
     !important too, not just cascade order. */
  .main-nav li:hover .submenu,
  .main-nav li:focus-within .submenu {
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }

  .main-nav li.just-clicked .submenu {
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto !important;
  }

  .hero { min-height: 0; padding: 32px var(--gutter) 48px; }
  .hero h1,
  .hero .credit {
    position: static;
    display: block;
    white-space: normal;
  }
  .hero .credit { margin-top: 16px; }

  .legal h1 { white-space: normal; }

  .numbered-list { grid-template-columns: repeat(2, 1fr); }

  .case-head { flex-wrap: wrap; }
  .case-bottom { display: none; }
  .case-bottom-mobile { display: block; margin-top: 1.5em; }

  /* Touch has no real hover, so the desktop reveal-on-hover .scroll-hint
     (opacity: 0 by default) never shows here -- and a stray :hover left
     "stuck" after a tap on some mobile browsers would only fade it to the
     desktop-tuned 0.6 anyway. !important wins over that rule regardless of
     its own higher (class+pseudo-class) specificity, so it stays fully and
     permanently visible on touch instead of depending on a hover state
     that doesn't meaningfully exist here. */
  .scroll-hint { opacity: 1 !important; transform: none !important; }

  /* Only one card in view at a time on touch, matching the client's
     reference -- the desktop "3 of 6" formula's 250px floor still let a
     sliver of the next card peek in at phone widths. ul's own 4px
     side padding is subtracted since this is a percentage of ul's
     content-box (the flex container), not the viewport. */
  .tag-carousel li { width: calc(100% - 8px); }

  /* Same fix, same reason, for the cream Strategy cards -- their own
     desktop "3 of 4" formula floored at 250px too, leaving them
     narrower than .tag-carousel's cards at this width. The padding/gap
     formulas are already shared with .tag-carousel li at the base rule
     now, so only the width needs its own mobile floor here; the label
     copy's line-height is still matched to .tag-carousel li's own
     16.8px explicitly since that one's a flat value, not a shared
     formula. */
  .strategy-card { width: calc(100% - 8px); }
  .strategy-card p { line-height: 16.8px; }
}

@media (max-width: 480px) {
  .numbered-list { grid-template-columns: 1fr 1fr; }
  .matter-row span { font-size: 16px; }

  /* Matches the "glisser" arrows' flat 52px (same as .nav-toggle img) --
     the vw-scaled floor (40px) read noticeably smaller side by side with
     them. */
  .matter-row .arrow { width: 52px; }

  /* min-height alone only centers when the row is 1-2 lines short of it;
     once a longer entry ("Responsabilités et sanctions des dirigeants")
     grows past that floor, the row just hugs its content instead, losing
     the breathing room shorter rows get for free. Explicit padding gives
     every row -- 1, 2 or 3 lines -- the same top/bottom space instead. */
  .matter-row {
    min-height: 0;
    padding: 20px 0;
  }

  .matter-panel p { font-size: 16px; }

  .matter-text-desktop { display: none; }
  .matter-text-mobile { display: inline; }

  .divider img { width: 20px; }

  .numbered-list .num { font-size: 30px; letter-spacing: 0.25em; }

  /* Matches "01"/"LES DIRIGEANTS" from Comprendre's numbered-list at this
     breakpoint (30px num, 18px label) -- the Cour de cassation dates
     ("Le 09 octobre 2019") otherwise kept their much larger desktop
     sizing (65px/22px) here. */
  .cases .case-num { font-size: 30px; letter-spacing: 0.25em; margin-bottom: 0.15em; }
  /* margin-top:0 hands the num-to-label gap entirely to .case-num's own
     margin-bottom above, the same single-source spacing .numbered-list
     .num/.label use, instead of adding this on top of the desktop-only
     6px and no longer matching it. */
  .cases .case-head h3 { font-size: 18px; margin-top: -18px; }

  .cases .tap-hint {
    display: block;
    flex-basis: 100%;
    margin-top: 8px;
    margin-left: calc(var(--case-icon-w) + 18px);
  }

  .case.expand-item.is-open .tap-hint { display: none; }

  /* Same match, for the Distinctions carousel's "01"/"Le certificat..." --
     grid-based like .distinction's other rules, not flex-wrap like
     .cases. */
  .distinction .case-num { font-size: 30px; letter-spacing: 0.25em; }

  /* .distinction has no width of its own (flex: 0 0 auto), so its grid's
     1fr column had nothing to wrap the label against and just ran the
     whole "de récompense du BAFA" out past the edge of the screen instead
     of onto its own line -- capping the card itself gives that column an
     actual width to wrap within. Widened from an earlier 300px now that
     the label's own tracking below is tighter (so it needs less width to
     avoid wrapping one word per line), while staying well inside the
     carousel's ~375px viewport with the icon column and gap subtracted. */
  /* The cap above bounds the header's own content, but the card (li)
     wrapping it has no width of its own either (flex: 0 0 auto) -- left
     uncapped it was still shrink-wrapping to the widest thing inside it,
     which turned out to be the *closed* panel link's un-wrapped text
     (~640px), leaving a wide dead-space gap after the visible header
     before the next card's swipe-in. Matching the card's own max-width to
     the header's removes that gap. */
  .distinction { max-width: 340px; }
  .distinction .case-head { max-width: 340px; }

  /* The open panel's own text (.case-detail) sizes right up to its 266px
     column with barely a hair of slack -- close enough that the browser's
     line-break math (measured without the last character's own trailing
     letter-spacing) lets a word onto a line that then paints a pixel or
     two wider than the box once that trailing spacing is drawn in, and
     .expand-panel's overflow: hidden (needed for its open/close height
     animation) clips that sliver instead of letting it spill, silently
     shaving the last letter off an occasional line ("distinction" ->
     "distinctio"). A little breathing room on the right removes the
     close call entirely. */
  .distinction .expand-panel .case-detail { padding-right: 10px; }

  /* The base h1/h2/h3 tracking (0.35em) is tuned for short desktop
     headings -- on a long word like "RÉCOMPENSE" at phone width it alone
     ate the whole available line, cascading every word of the label onto
     its own line (visual "rivers" down the block) instead of the clean
     wrap the label's own text reads best at. Client asked for this back
     up to at least 0.2em (a title, not running body copy, so matching
     the 16px text's own tight tracking read as wrong here) -- checked
     against "RÉCOMPENSE", the longest word in any of the three labels,
     which still clears the ~266px text column with room to spare at
     0.2em, so it won't reopen the original cascade. */
  .distinction .case-head h3 { font-size: 18px; letter-spacing: 0.2em; line-height: 24px; }

  /* The panel text (the LinkedIn/press blurb under each of 01/02/03) was
     still gated behind .is-open, same as Comprendre/Cases/Défendre's
     click-to-reveal panels -- but per the client, Distinctions' running
     text should just be visible outright, with no click needed at all,
     unlike those other sections. Overrides the closed state unconditionally
     rather than only once .is-open is added by a click. */
  .distinction .expand-panel {
    max-height: none;
    opacity: 1;
    overflow: visible;
    margin-top: 14px;
  }

  /* Comprendre and Mais aussi, per the client's mobile reference: one item
     per row (not the 2-up grid the tablet range above keeps) with its own
     trailing snowflake, replacing each section's single shared 3-icon
     .divider row below the list. Panel text already flows in place here
     (the hover/overlay version of .expand-panel is scoped to
     hover-capable/pointer:fine devices), so opening "01" already pushes
     "02" down exactly like the client's reference. */
  #comprendre .numbered-list,
  .mais-aussi .numbered-list,
  .defendre .numbered-list {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  #comprendre .expand-item::after,
  .mais-aussi .expand-item::after,
  .defendre .expand-item::after {
    content: "";
    display: block;
    width: 26px;
    height: 26px;
    margin: 24px 0 0 auto;
    background: url("../assets/icons/icon-snowflake-plum.png") center / contain no-repeat;
  }

  /* Mais aussi and Défendre keep their own dark band (unlike Comprendre
     above), so their per-item mark needs the light/cream cutout, not the
     plum one -- Défendre also uses its own emblem motif (matching its
     existing 3-icon .divider row) rather than Comprendre/Mais aussi's
     snowflake. */
  .mais-aussi .expand-item::after {
    background-image: url("../assets/icons/icon-snowflake-cream.png");
  }

  .defendre .expand-item::after {
    background-image: url("../assets/icons/icon-emblem.png");
  }

  #comprendre .divider,
  .mais-aussi .divider,
  .defendre .divider {
    display: none;
  }

  #comprendre .tap-hint,
  .defendre .tap-hint {
    display: block;
    margin-top: 8px;
  }
  /* Needs #comprendre's own specificity to beat the rule right above --
     .expand-item.is-open alone (0-3-0) loses to #comprendre .tap-hint's
     ID (1-1-0) regardless of which comes later in the file. .defendre is
     a class, not an id, so .defendre .expand-item.is-open .tap-hint
     (0-4-0) already outranks .defendre .tap-hint (0-2-0) on its own. */
  #comprendre .expand-item.is-open .tap-hint,
  .defendre .expand-item.is-open .tap-hint {
    display: none;
  }

  #comprendre > .wrap { padding-bottom: 40px; }
  .mais-aussi > .wrap { padding-top: 32px; }

  /* Flat rather than vw-scaled here: "avant de convaincre" (the longer of
     the two headings' second lines) still didn't fit its own line at the
     vw-scaled size on an actual narrow phone, wrapping a third time
     instead of holding at the two lines each heading's own <br> calls
     for. */
  .construire h2 { font-size: 26px; }
  .comprendre h2 { font-size: 26px; }
  .contact h2 { font-size: 26px; }
  /* Matched to .comprendre h2's own mobile size -- tracking already comes
     from the shared h1/h2/h3 default (0.35em) both this and that heading
     inherit, so only the size needed setting here. */
  .legal h1 { font-size: 26px; }

  /* Bumped from the clamp's 14px mobile floor to a flat, more readable
     15px per the client -- letter-spacing stays the same 0.12em it
     already had, an em value that (being proportional to font-size on
     its own) scales itself up to the new size automatically rather than
     needing its own separate override. */
  .legal p,
  .legal li { font-size: 15px; }

  /* Matched to .distinctions-statement's own tracking/line-height (6.8px /
     32px) per the client, for visual consistency between the two similar
     section intros -- knowingly at the cost of the tighter 4-line version
     this held right before: this text is longer than
     .distinctions-statement's own, so the wider tracking no longer fits
     four lines and needs seven ("Ce n'est pas la" / "théorie qui est" /
     "saluée," / "mais une" / "stratégie." / "Celle-ci se" / "construit,"),
     still grouped to avoid a mid-word or mid-clause split. */
  .strategy-statement { letter-spacing: 6.8px; line-height: 32px; }

  /* Same fix, same reason: "Alice Myriam Lahana" and "avec exigence" (each
     heading's own longer line) didn't fit their line at the vw-scaled
     floor size on an actual narrow phone either, each wrapping one line
     further than their own <br> calls for. */
  .bio h2 { font-size: 26px; letter-spacing: 0.35em; }
  .mobile-break { display: inline; }
  .defendre h2 { font-size: 26px; }

  /* 145px matched the "iPhone 14 Pro" artboard in the client's XD file,
     bumped 30% larger per client feedback, then another 30% (189px ->
     246px), then eased back down slightly per later feedback that it had
     gotten too big -- 222px. WIDTH is what actually sets the medallion's
     rendered size (an earlier scale-up transform grew the artwork itself
     instead and was reverted, since only the box/bar should ever change).
     HEIGHT stays shorter than width on purpose: with object-fit: cover
     (above) the image still renders at its width-driven scale, and the
     shorter box crops away the source file's own baked-in transparent
     margin top/bottom via overflow: hidden, instead of leaving it as
     visible bare cream -- kept at the same ~1.125x-over-the-ring-height
     proportion the 246px size used (190/246), so shrinking the logo
     doesn't quietly bring back extra bar space. */
  .logo { width: 222px; height: 171px; }
  :root { --mobile-header-h: 171px; }
  .site-header-inner { min-height: var(--mobile-header-h); }

  .hero h1 {
    font-size: 26px;
    line-height: 45px;
  }
  .hero .credit { font-size: 12px; }

  /* The shared base rule's clamp floor (1.05rem = 16.8px) was ever so
     slightly off the flat 16px the client wants for every section's own
     intro sentence ("Depuis que j'ai prêté serment...", "J'interviens
     principalement...", "Cette approche m'a conduite...", "Les dossiers
     complexes..."). .bio .lead below is a separate, more specific rule,
     so it's unaffected by this and keeps its own size. */
  .lead { font-size: 16px; }

  /* Same exact tracking and line-height as the 16px body copy below --
     not a proportional/em-scaled value (0.1em, or a ratio of the 16px
     text's own 24px), which was tried both ways and still read as off;
     the client's own comparison is to the literal numbers the 16px
     running text uses, 1.6px and 24px, applied as flat values here too
     even though this text is 18px. */
  .bio .lead { font-size: 18px; line-height: 24px; letter-spacing: 1.6px; }
  .bio p:not(.lead) { font-size: 16px; line-height: 24px; letter-spacing: 0.1em; }
}

/* ---------------- Intro (logo draw-on) ---------------- */

/* No-JS fallback: without JS, lottie-web never runs and the container
   stays empty, so it must never render, or visitors would be stuck on a
   blank cream screen forever. */
html:not(.js) #intro { display: none; }

#intro {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #dbd5c5;
  perspective: 1200px;
}

body.intro-lock { overflow: hidden; }

/* The client's own After Effects composition is a 1920x1080 canvas with
   the medallion centered in it; lottie-web renders that composition
   as-is, so this container keeps the same aspect ratio. */
#intro-lottie {
  width: min(141vw, 141vh, 2250px);
  aspect-ratio: 16 / 9;
  transform-style: preserve-3d;
}

#intro-lottie svg { display: block; }

/* The medallion flips in place, fixed on screen, rather than drifting
   toward the header logo's position. */
#intro.is-flipping #intro-lottie {
  animation: intro-flip 0.85s cubic-bezier(0.6, 0, 0.85, 0.35) forwards;
}

@keyframes intro-flip {
  to {
    transform: rotateY(90deg);
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  #intro { display: none; }

  .hero h1,
  .hero .credit,
  .logo img {
    animation: none;
    opacity: 1;
    transform: none;
  }
}