/* ==========================================================================
   ANOE — design system v1
   Ivory paper, architectural grid, editorial serif, motion kept at 2.5/5.
   ========================================================================== */

/* ---------- tokens ---------- */
/* Palette derivee du logo ANOE (echantillonnee sur les fichiers de marque) :
   creme #FAF5EF, bleu clair #ADD9F1 / #D1E9F6, rouge de marque #AA0000.
   Le rouge pur reste reserve au logo lui-meme ; l'interface utilise le
   bordeaux qui en descend. Sous-tons demandes : bleu clair, bleu marine,
   bordeaux, rose pale, et toute la plage creme vers beige. Rien de criard. */
:root {
  --paper: #faf5ef;
  --paper-warm: #f3ebe0;
  --paper-deep: #e9dece;
  --ink: #1c2430;
  --ink-2: #4d5866;
  --ink-3: #8b94a1;
  --line: rgba(28, 36, 48, 0.16);
  --line-soft: rgba(28, 36, 48, 0.08);
  --navy: #1c2f42;
  --bordeaux: #7c1f27;
  --sky: #add9f1;
  --sky-soft: #d1e9f6;
  --rose: #ead3cd;
  --logo-red: #aa0000;
  /* alias historiques, conserves pour ne rien casser dans les composants */
  --olive: var(--navy);
  --brick: var(--bordeaux);
  --blue: var(--sky);

  --gutter: clamp(20px, 4.2vw, 76px);
  --gap: clamp(14px, 1.7vw, 30px);
  --maxw: 1560px;
  --rule: 1px solid var(--line);
  --hair: 1px solid var(--line-soft);
  --r: 4px;
  --panel: #1c2f42;

  /* Titres : Playfair Display, choisie par la cliente (retour du 14/10/2026),
     a la place de Season (licence commerciale) et de Bodoni Moda qui la
     remplacait en attendant. */
  --display: "Playfair Display", "Times New Roman", serif;
  --serif: var(--display);
  /* Police de base demandee : Lora, sur le corps de texte comme sur les
     micro-labels, a la place de l'ancien Inter. */
  --sans: "Lora", Georgia, "Times New Roman", serif;
  --read: "Lora", Georgia, serif;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --slow: 1100ms;
}

/* ---------- base ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.62;
  letter-spacing: 0.005em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 { margin: 0; font-weight: 400; }
/* resserrage demande (20 a 30%) applique a tout titre en display */
h1, h2, h3, h4, .display, .h2, .h3, .lead { font-feature-settings: "kern" 1; }
.fcard h3, .hcell h3, .flow__step h3, .numbered__c h3, .article h2, .pullquote { letter-spacing: -0.016em; }

p { margin: 0 0 1.1em; }

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

::selection { background: var(--paper-deep); color: var(--ink); }

:focus-visible {
  outline: 1px solid var(--ink);
  outline-offset: 4px;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink);
  color: var(--paper);
  padding: 12px 18px;
  z-index: 999;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.skip:focus { left: 12px; top: 12px; }

/* ---------- type scale ---------- */
.display {
  font-family: var(--serif);
  font-size: clamp(2.6rem, 6.4vw, 6.1rem);
  line-height: 1.0;
  letter-spacing: -0.024em;
}

.h2 {
  font-family: var(--serif);
  font-size: clamp(2rem, 3.9vw, 3.55rem);
  line-height: 1.06;
  letter-spacing: -0.021em;
}

.h3 {
  font-family: var(--serif);
  font-size: clamp(1.5rem, 2.3vw, 2.1rem);
  line-height: 1.14;
  letter-spacing: -0.017em;
}

.lead {
  font-family: var(--serif);
  font-size: clamp(1.28rem, 2.05vw, 1.95rem);
  line-height: 1.32;
  letter-spacing: -0.014em;
  color: var(--ink);
}

.body-lg { font-size: clamp(1rem, 1.15vw, 1.12rem); line-height: 1.72; color: var(--ink-2); }

.eyebrow {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--ink-3);
  font-weight: 500;
}

.italic { font-style: italic; }

.serif-em { font-family: var(--serif); font-style: italic; }

/* ---------- layout ---------- */
.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--gap);
}

.section { padding: clamp(64px, 8.6vh, 126px) 0; }
.section--tight { padding: clamp(48px, 6vh, 86px) 0; }

.rule { border: 0; border-top: var(--rule); margin: 0; }

/* ---------- links ---------- */
.link {
  display: inline-block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--line);
  transition: border-color 420ms var(--ease), color 420ms var(--ease);
}
.link:hover { border-color: var(--ink); color: var(--ink); }

.link--brick { color: var(--brick); border-color: rgba(151, 67, 47, 0.3); }
.link--brick:hover { border-color: var(--brick); }

.btn {
  display: inline-block;
  padding: 17px 34px;
  background: var(--ink);
  color: var(--paper);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  border: 1px solid var(--ink);
  transition: background 420ms var(--ease), color 420ms var(--ease);
  cursor: pointer;
}
.btn:hover { background: transparent; color: var(--ink); }

.btn--ghost { background: transparent; color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--paper); }

/* ---------- header ---------- */
.header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  padding: clamp(18px, 2.4vw, 30px) 0;
  transition: background 600ms var(--ease), padding 600ms var(--ease), color 600ms var(--ease);
}
.header::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(247, 244, 238, 0.88);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  backdrop-filter: blur(14px) saturate(1.1);
  opacity: 0;
  transition: opacity 600ms var(--ease);
  z-index: -1;
}
.header.is-solid::after { opacity: 1; }
.header.is-solid { padding: 14px 0; border-bottom: var(--rule); }
.header.is-hidden { transform: translateY(-104%); transition: transform 500ms var(--ease); }

.header__in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

/* Wordmark : le vrai logo de marque, plus un ANOE compose en typo.
   Deux tirages detoures depuis les fichiers fournis, le clair pour les fonds
   creme, le creme pour les fonds marine (header invert, pied de page). */
.wordmark {
  display: inline-flex;
  align-items: center;
  line-height: 1;
}
.wordmark__img {
  display: block;
  width: auto;
  height: clamp(20px, 2.1vw, 27px);
}
.wordmark__img--dark { display: none; }
.header--invert .wordmark__img--light,
.footer .wordmark__img--light { display: none; }
.header--invert .wordmark__img--dark,
.footer .wordmark__img--dark { display: block; }
.wordmark--lockup img {
  display: block;
  width: auto;
  height: clamp(52px, 5vw, 68px);
}

.nav {
  display: flex;
  gap: clamp(18px, 2.3vw, 40px);
  align-items: center;
}
.nav a {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: inherit;
  position: relative;
  padding: 4px 0;
}
.nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 480ms var(--ease);
}
.nav a:hover::after,
.nav a[aria-current="page"]::after { transform: scaleX(1); }

.nav__cta { border: 1px solid currentColor; padding: 10px 20px !important; }
.nav__cta::after { display: none; }
.nav__cta:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }

.burger {
  display: none;
  width: 34px;
  height: 20px;
  border: 0;
  background: transparent;
  padding: 0;
  position: relative;
  cursor: pointer;
  color: inherit;
}
.burger span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transition: transform 450ms var(--ease), opacity 300ms var(--ease);
}
.burger span:nth-child(1) { top: 4px; }
.burger span:nth-child(2) { top: 13px; }
body.menu-open .burger span:nth-child(1) { transform: translateY(9px) rotate(9deg); }
body.menu-open .burger span:nth-child(2) { transform: translateY(0) rotate(-9deg); }

/* header over a dark hero */
.header--invert { color: var(--paper); }
.header--invert.is-solid { color: var(--ink); }

/* ---------- mobile menu ---------- */
.menu {
  position: fixed;
  inset: 0;
  background: var(--paper);
  z-index: 99;
  padding: 108px var(--gutter) 40px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  opacity: 0;
  visibility: hidden;
  transition: opacity 520ms var(--ease), visibility 520ms;
}
body.menu-open .menu { opacity: 1; visibility: visible; }
body.menu-open { overflow: hidden; }

.menu__nav { display: flex; flex-direction: column; gap: 2px; }
.menu__nav a {
  font-family: var(--serif);
  font-size: clamp(2rem, 9vw, 3rem);
  line-height: 1.24;
  border-bottom: 1px solid var(--line-soft);
  padding: 10px 0;
}
.menu__foot { display: flex; flex-direction: column; gap: 10px; font-size: 12px; color: var(--ink-2); }

/* ---------- figures ---------- */
figure { margin: 0; }

.fig { position: relative; overflow: hidden; background: var(--paper-warm); }
.fig img { width: 100%; height: 100%; object-fit: cover; }

.fig--r45 { aspect-ratio: 4 / 5; }
.fig--r34 { aspect-ratio: 3 / 4; }
.fig--r11 { aspect-ratio: 1 / 1; }
.fig--r43 { aspect-ratio: 4 / 3; }
.fig--r32 { aspect-ratio: 3 / 2; }
.fig--r169 { aspect-ratio: 16 / 9; }

.caption {
  margin-top: 12px;
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* ---------- hero (desktop) ---------- */
.hero { position: relative; padding-top: clamp(92px, 11.5vh, 128px); }

.hero__grid { position: relative; align-items: start; }

/* the hero is composed against the viewport: images never push the headline
   fully below the fold, whatever the screen height */
.hero__a { grid-column: 1 / span 5; }
.hero__a .fig { max-height: 56vh; }
.hero__b { grid-column: 8 / span 5; margin-top: clamp(30px, 7vh, 90px); }
.hero__b .fig { max-height: 34vh; }
.hero__c { grid-column: 6 / span 2; margin-top: clamp(24px, 4vh, 52px); }
.hero__c .fig { max-height: 26vh; }

.hero__title {
  grid-column: 1 / span 7;
  margin-top: clamp(26px, 4.4vh, 56px);
  position: relative;
  z-index: 2;
}
.hero__meta {
  grid-column: 9 / span 4;
  margin-top: clamp(30px, 4.6vh, 60px);
  display: flex;
  flex-direction: column;
  gap: 18px;
  align-items: flex-start;
}

.hero__mobile { display: none; }

/* image reveal
   The clip lives on the IMG, never on the observed .reveal-img box: a
   clip-path on the observed element zeroes its intersection rect, so the
   IntersectionObserver never fires and the image stays hidden forever. */
.reveal-img > img { clip-path: inset(0 0 100% 0); transform: scale(1.08); transition: clip-path 1400ms var(--ease), transform 1800ms var(--ease); }
.reveal-img.in > img { clip-path: inset(0 0 0 0); transform: scale(1); }

.reveal { opacity: 0; transform: translateY(16px); transition: opacity var(--slow) var(--ease), transform var(--slow) var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.d1 { transition-delay: 110ms; }
.d2 { transition-delay: 220ms; }
.d3 { transition-delay: 330ms; }
.d4 { transition-delay: 440ms; }

/* ---------- statement ---------- */
.statement { grid-column: 3 / span 8; text-align: center; }
.statement .lead { margin-bottom: 26px; }

/* ---------- two cards ---------- */
.cards { row-gap: clamp(38px, 5vw, 60px); }
.card { grid-column: span 6; }
.card__body { margin-top: 22px; display: flex; flex-direction: column; gap: 12px; align-items: flex-start; max-width: 44ch; }
.card:hover .fig img { transform: scale(1.035); }
.card .fig img { transition: transform 1600ms var(--ease); }

/* ---------- approach block ---------- */
.pillars { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, 1fr); column-gap: clamp(14px, 1.7vw, 30px); row-gap: 34px; margin-top: 46px; }
.pillar { border-top: var(--rule); padding-top: 16px; }
.pillar h3 { font-family: var(--sans); font-size: 12px; text-transform: uppercase; letter-spacing: 0.18em; margin-bottom: 10px; }
.pillar p { font-size: 14.5px; color: var(--ink-2); line-height: 1.66; }

.process {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  align-items: baseline;
  font-family: var(--serif);
  font-size: clamp(1.15rem, 1.9vw, 1.7rem);
  color: var(--ink);
}
.process span { display: inline-flex; align-items: baseline; gap: 22px; }
.process span::after { content: ""; width: clamp(18px, 3vw, 46px); height: 1px; background: var(--line); transform: translateY(-0.32em); }
.process span:last-child::after { display: none; }

/* ---------- triptych ---------- */
.tri { row-gap: 30px; align-items: end; }
.tri__1 { grid-column: 1 / span 5; }
.tri__2 { grid-column: 7 / span 3; margin-bottom: clamp(20px, 5vh, 70px); }
.tri__3 { grid-column: 11 / span 2; }

/* ---------- journal ---------- */
.entries { row-gap: clamp(36px, 4vw, 56px); }
.entry { grid-column: span 4; display: flex; flex-direction: column; gap: 16px; }
.entry .fig img { transition: transform 1600ms var(--ease); }
.entry:hover .fig img { transform: scale(1.035); }
.entry__meta { display: flex; gap: 14px; align-items: center; }
.entry h3 { max-width: 22ch; }
.entry p { font-size: 14.5px; color: var(--ink-2); max-width: 42ch; }

/* ---------- full bleed CTA ---------- */
.bleed { position: relative; min-height: min(86vh, 860px); display: flex; align-items: flex-end; overflow: hidden; }
.bleed__img { position: absolute; inset: 0; }
.bleed__img img { width: 100%; height: 100%; object-fit: cover; }
.bleed::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(20, 17, 14, 0.8), rgba(20, 17, 14, 0.34) 58%, rgba(20, 17, 14, 0.4));
}
.bleed__in { position: relative; z-index: 2; color: var(--paper); padding-bottom: clamp(46px, 8vh, 96px); width: 100%; }
.bleed__in .grid { align-items: end; row-gap: 22px; }
.bleed__in .eyebrow { color: rgba(247, 244, 238, 0.72); }
.bleed .btn { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.bleed .btn:hover { background: transparent; color: var(--paper); }

/* ---------- page head ---------- */
.pagehead { padding-top: clamp(130px, 19vh, 230px); padding-bottom: clamp(34px, 5vh, 66px); }
.pagehead .display { grid-column: 1 / span 8; }
.pagehead__side { grid-column: 9 / span 4; align-self: end; }
.pagehead .eyebrow { margin-bottom: 22px; display: block; }

/* ---------- editorial text blocks ---------- */
.cols { row-gap: 30px; }
.cols__l { grid-column: 1 / span 4; }
.cols__r { grid-column: 6 / span 6; }
.cols__r p + p { margin-top: 0; }

.numbered { counter-reset: n; display: grid; row-gap: 0; }
.numbered__item { border-top: var(--rule); padding: clamp(24px, 3vw, 40px) 0; display: grid; grid-template-columns: 90px 1fr; column-gap: clamp(14px, 2vw, 40px); }
.numbered__item:last-child { border-bottom: var(--rule); }
.numbered__n { font-family: var(--serif); font-size: 1.1rem; color: var(--ink-3); }
.numbered__c h3 { margin-bottom: 12px; }
.numbered__c p { color: var(--ink-2); max-width: 62ch; }

.scope { border-top: var(--rule); }
.scope__row { border-bottom: var(--rule); padding: clamp(20px, 2.4vw, 30px) 0; display: grid; grid-template-columns: minmax(180px, 3fr) 7fr; column-gap: clamp(16px, 3vw, 60px); }
.scope__row h3 { font-family: var(--sans); font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; }
.scope__row p { color: var(--ink-2); font-size: 15px; }

.pullquote {
  grid-column: 3 / span 8;
  text-align: center;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.5rem, 3vw, 2.6rem);
  line-height: 1.24;
}

.tags { display: flex; flex-wrap: wrap; gap: 10px; }
.tags li {
  list-style: none;
  border: var(--rule);
  border-radius: 100px;
  padding: 9px 18px;
  font-size: 11.5px;
  letter-spacing: 0.1em;
  color: var(--ink-2);
}
ul.tags { padding: 0; margin: 0; }

/* ---------- article ---------- */
.article { grid-column: 3 / span 7; font-family: var(--read); font-size: 1.18rem; line-height: 1.78; color: #2b2620; }
.article p { margin-bottom: 1.35em; }
.article h2 { font-family: var(--serif); font-size: clamp(1.6rem, 2.4vw, 2.2rem); margin: 2.1em 0 0.7em; line-height: 1.14; }
.article blockquote { margin: 2em 0; padding-left: 28px; border-left: 1px solid var(--line); font-style: italic; color: var(--ink-2); }
.article a { border-bottom: 1px solid var(--line); }
.article__side { grid-column: 10 / span 3; }
.sources { border-top: var(--rule); margin-top: 60px; padding-top: 22px; font-size: 13.5px; color: var(--ink-2); font-family: var(--sans); }
.sources li { margin-bottom: 8px; }
.sources ul { padding-left: 18px; margin: 12px 0 0; }

/* ---------- forms ---------- */
.form { grid-column: 1 / span 7; }
.form__aside { grid-column: 9 / span 4; align-self: start; position: sticky; top: 130px; }
.fieldset { border: 0; padding: 0; margin: 0 0 clamp(34px, 4vw, 54px); }
.fieldset > legend {
  padding: 0 0 20px;
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-3);
  width: 100%;
  border-bottom: var(--rule);
  margin-bottom: 26px;
}
.field { margin-bottom: 26px; }
.field label { display: block; font-size: 12.5px; letter-spacing: 0.04em; color: var(--ink-2); margin-bottom: 9px; }
.field input,
.field select,
.field textarea {
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
  padding: 11px 0;
  font-family: var(--sans);
  font-size: 15.5px;
  color: var(--ink);
  border-radius: 0;
  transition: border-color 380ms var(--ease);
}
.field textarea { min-height: 108px; resize: vertical; line-height: 1.6; }
.field ::placeholder { color: var(--ink-3); opacity: 1; }
.field input:focus,
.field select:focus,
.field textarea:focus { outline: 0; border-color: var(--ink); }
.field--half { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.field--half > div { margin: 0; }
.hint { font-size: 12px; color: var(--ink-3); margin-top: 8px; }
.choice { display: flex; flex-wrap: wrap; gap: 10px; }
.choice input { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; margin: 0; }
.choice label {
  border: var(--rule);
  padding: 11px 20px;
  font-size: 12.5px;
  letter-spacing: 0.04em;
  cursor: pointer;
  margin: 0;
  transition: background 320ms var(--ease), color 320ms var(--ease), border-color 320ms var(--ease);
}
.choice input:checked + label { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.choice input:focus-visible + label { outline: 1px solid var(--ink); outline-offset: 3px; }
.consent { display: flex; gap: 12px; align-items: flex-start; font-size: 13px; color: var(--ink-2); }
.consent input { margin-top: 4px; }
.form__done { display: none; padding: 40px 0; }
.form.is-sent .form__body { display: none; }
.form.is-sent .form__done { display: block; }

/* choice screen (enquire) */
.paths { row-gap: 30px; }
.path { grid-column: span 6; position: relative; display: block; }
.path .fig { aspect-ratio: 3 / 2; }
.path .fig img { transition: transform 1600ms var(--ease); }
.path:hover .fig img { transform: scale(1.035); }
.path__body { margin-top: 20px; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }

/* ---------- footer ---------- */
.footer { border-top: var(--rule); padding: clamp(52px, 7vh, 96px) 0 34px; }
.footer__grid { row-gap: 40px; }
.footer__brand { grid-column: 1 / span 4; }
.footer__brand .wordmark { display: inline-block; margin-bottom: 18px; }
.footer__col { grid-column: span 2; display: flex; flex-direction: column; gap: 11px; }
.footer__col h4 { font-size: 10.5px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 6px; }
.footer__col a, .footer__col span { font-size: 13.5px; color: var(--ink-2); transition: color 340ms var(--ease); }
.footer__col a:hover { color: var(--ink); }
.footer__bottom {
  margin-top: clamp(46px, 6vh, 78px);
  padding-top: 22px;
  border-top: var(--rule);
  display: flex;
  flex-wrap: wrap;
  gap: 14px 30px;
  justify-content: space-between;
  font-size: 11.5px;
  color: var(--ink-3);
}
.footer__bottom a:hover { color: var(--ink); }
.lang { display: flex; gap: 10px; align-items: center; }
.lang span[aria-current] { color: var(--ink); }

/* ---------- responsive ---------- */
@media (max-width: 1080px) {
  .statement { grid-column: 2 / span 10; }
  .pillars { grid-template-columns: repeat(2, 1fr); }
  .article { grid-column: 2 / span 10; }
  .article__side { grid-column: 2 / span 10; }
  .form { grid-column: 1 / span 8; }
  .form__aside { grid-column: 10 / span 3; }
}

@media (max-width: 860px) {
  .nav { display: none; }
  .burger { display: block; }

  .grid { row-gap: 24px; }

  .hero { padding-top: clamp(84px, 12vh, 120px); }
  .hero__desktop { display: none; }
  .hero__mobile { display: block; }

  .card,
  .entry,
  .path { grid-column: 1 / -1; }
  .cols__l, .cols__r { grid-column: 1 / -1; }
  .statement { grid-column: 1 / -1; text-align: left; }
  .pullquote { grid-column: 1 / -1; text-align: left; }
  .tri__1 { grid-column: 1 / -1; }
  .tri__2 { grid-column: 1 / span 7; margin-bottom: 0; }
  .tri__3 { grid-column: 9 / span 4; }
  .pagehead .display { grid-column: 1 / -1; }
  .pagehead__side { grid-column: 1 / -1; margin-top: 26px; }
  .numbered__item { grid-template-columns: 1fr; row-gap: 10px; }
  .scope__row { grid-template-columns: 1fr; row-gap: 10px; }
  .article, .article__side { grid-column: 1 / -1; }
  .form, .form__aside { grid-column: 1 / -1; }
  .form__aside { position: static; margin-bottom: 40px; }
  .field--half { grid-template-columns: 1fr; }
  .footer__brand { grid-column: 1 / -1; }
  .footer__col { grid-column: span 6; }
  .pillars { margin-top: 34px; }
}

@media (max-width: 520px) {
  .display { font-size: clamp(2rem, 9vw, 2.5rem); }
  .h2 { font-size: clamp(1.7rem, 7.2vw, 2.2rem); }
  .pillars { grid-template-columns: 1fr; }
  .footer__col { grid-column: 1 / -1; }
  .process { font-size: 1.15rem; gap: 8px 16px; }
  .process span::after { width: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  .reveal-img > img { clip-path: none; transform: none; }
}

/* ==========================================================================
   ANOE, design system v2
   Above-the-fold heroes, designed text blocks, tinted sections, hairline grids.
   ========================================================================== */

/* ---------- section tinting ---------- */
.section--warm { background: var(--paper-warm); }
.section--deep { background: var(--paper-deep); }
.section--panel { background: var(--panel); color: var(--paper); }
.section--panel .body-lg,
.section--panel p { color: rgba(247, 244, 238, 0.74); }
.section--panel .eyebrow { color: rgba(247, 244, 238, 0.5); }
.section--panel .link,
.section--panel .alink { border-color: rgba(247, 244, 238, 0.3); }
.section--panel .link:hover { color: var(--paper); border-color: var(--paper); }
.edge-top { border-top: var(--hair); }

/* ---------- arrow link ---------- */
.alink {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: inherit;
  padding-bottom: 2px;
}
.alink::after {
  content: "";
  width: 24px;
  height: 1px;
  background: currentColor;
  opacity: 0.5;
  transition: width 420ms var(--ease), opacity 420ms var(--ease);
}
.alink:hover::after { width: 40px; opacity: 1; }

.btn { border-radius: 100px; }
.btn--line { background: transparent; color: var(--ink); }
.btn--line:hover { background: var(--ink); color: var(--paper); }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px 14px; align-items: center; }

/* ---------- hero (all pages) ---------- */
.hero2 {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  padding-top: clamp(88px, 11.5vh, 132px);
}
.hero2__in {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--gap);
  align-items: center;
  padding-bottom: clamp(18px, 2.6vh, 36px);
}
.hero2__copy { grid-column: 1 / span 6; }
.hero2__copy .eyebrow { display: block; margin-bottom: 20px; }
.hero2__copy .display { font-size: clamp(2.3rem, 4.5vw, 4.5rem); }
.hero2__lead {
  font-size: clamp(1.02rem, 1.2vw, 1.18rem);
  line-height: 1.68;
  color: var(--ink-2);
  max-width: 46ch;
  margin: clamp(20px, 2.4vh, 30px) 0 clamp(24px, 3vh, 36px);
}
.hero2__media { grid-column: 8 / span 5; position: relative; }
.hero2__media .fig { height: min(52svh, 600px); aspect-ratio: auto; }
.hero2__media--bleed { margin-right: calc(-1 * var(--gutter)); }
.hero2__inset {
  position: absolute;
  left: clamp(-90px, -16%, -40px);
  bottom: clamp(-26px, -6%, -18px);
  width: 42%;
  max-width: 240px;
  border: 8px solid var(--paper);
  background: var(--paper);
}
.hero2__inset .fig { height: auto; }

.hero2__bar {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  border-top: var(--rule);
}
.hero2__bar > * {
  padding: clamp(16px, 1.8vh, 24px) clamp(14px, 1.6vw, 26px) clamp(20px, 2.4vh, 30px);
  border-left: var(--hair);
  display: flex;
  flex-direction: column;
  gap: 9px;
  align-items: flex-start;
}
.hero2__bar > *:first-child { border-left: 0; padding-left: 0; }
.hero2__bar .eyebrow { font-size: 9.5px; }
.hero2__bar b { font-weight: 400; font-family: var(--serif); font-size: clamp(1rem, 1.25vw, 1.28rem); line-height: 1.2; }
.hero2__bar span.sub { font-size: 13px; color: var(--ink-2); line-height: 1.5; }
a.hero2__jump { transition: background 400ms var(--ease); }
a.hero2__jump:hover { background: rgba(31, 28, 24, 0.035); }
a.hero2__jump b { display: flex; align-items: baseline; gap: 10px; }
a.hero2__jump b::after { content: "\2193"; font-family: var(--sans); font-size: 12px; color: var(--ink-3); }
a.hero2__jump--go b::after { content: "\2192"; }

/* hero variants */
.hero2--short { min-height: auto; padding-bottom: 0; }
.hero2--short .hero2__media .fig { height: min(52svh, 560px); }

/* ---------- section head ---------- */
.sechead {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--gap);
  row-gap: 18px;
  border-top: var(--rule);
  padding-top: clamp(18px, 2vw, 26px);
  margin-bottom: clamp(30px, 4.4vh, 60px);
  align-items: end;
}
.sechead__l { grid-column: 1 / span 6; }
.sechead__r { grid-column: 8 / span 5; }
.sechead__ix {
  font-family: var(--serif);
  font-size: 13px;
  letter-spacing: 0.12em;
  color: var(--ink-3);
  display: block;
  margin-bottom: 14px;
}
.sechead .eyebrow { display: block; margin-bottom: 14px; }
.sechead h2 { max-width: 20ch; }
.sechead__r p { color: var(--ink-2); max-width: 52ch; }
.sechead__r .alink { margin-top: 20px; }

/* ---------- feature cards ---------- */
.fcards {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: clamp(24px, 3vw, 56px);
  row-gap: clamp(34px, 4vw, 52px);
}
.fcards--3 { grid-template-columns: repeat(3, 1fr); }
.fcards--2 { grid-template-columns: repeat(2, 1fr); }
/* Retour cliente : la presentation en carres parait rigide et ne porte pas
   l'elegance attendue. Les cartes deviennent des colonnes editoriales tenues
   par un simple filet haut, sans fond, sans bordure, sans coin arrondi. */
.fcard {
  background: none;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  padding: 20px 0 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: border-color 420ms var(--ease);
}
.fcard:hover { border-top-color: var(--bordeaux); }
.fcard__n {
  font-family: var(--serif);
  font-size: 12px;
  letter-spacing: 0.18em;
  color: var(--ink-3);
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 4px;
}
.fcard__n::after { content: ""; flex: 1; height: 1px; background: var(--line-soft); }
.fcard h3 { font-family: var(--serif); font-size: clamp(1.24rem, 1.6vw, 1.5rem); line-height: 1.16; }
.fcard p { font-size: 14.5px; line-height: 1.68; color: var(--ink-2); margin: 0; }
.section--panel .fcard { background: none; border-top-color: rgba(250, 245, 239, 0.24); }
.section--panel .fcard:hover { border-top-color: var(--sky); }

/* ---------- hairline grid (scope, occasions) ---------- */
/* Meme retour : plus de cadre, plus de fond de cellule. Les six territoires
   se lisent comme des entrees d'un sommaire, respirees et alignees. */
.hgrid {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: clamp(24px, 3.2vw, 60px);
  row-gap: clamp(32px, 4vw, 54px);
  background: none;
  border: 0;
  border-radius: 0;
}
.hgrid--2 { grid-template-columns: repeat(2, 1fr); }
.hcell {
  background: none;
  border-top: 1px solid var(--line);
  padding: 20px 0 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: border-color 420ms var(--ease);
}
.hcell:hover { border-top-color: var(--bordeaux); }
.section--warm .fcard { border-top-color: rgba(28, 36, 48, 0.2); }
.section--warm .hcell { background: none; }
.section--warm .hcell:hover { border-top-color: var(--bordeaux); }
.hcell__n { font-family: var(--serif); font-size: 0.95rem; letter-spacing: 0.16em; color: var(--ink-3); line-height: 1; }
.hcell h3 { font-family: var(--serif); font-size: clamp(1.2rem, 1.5vw, 1.45rem); line-height: 1.16; }
.hcell p { font-size: 14.5px; line-height: 1.66; color: var(--ink-2); margin: 0; }

/* ---------- facts strip ---------- */
.facts {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: var(--rule);
  border-bottom: var(--rule);
}
.fact { padding: clamp(24px, 2.6vw, 40px) clamp(16px, 1.8vw, 30px); border-left: var(--hair); }
.fact:first-child { border-left: 0; padding-left: 0; }
.fact b {
  display: block;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.3rem, 1.9vw, 1.9rem);
  line-height: 1.1;
  margin-bottom: 12px;
}
.fact span { font-size: 13.5px; line-height: 1.6; color: var(--ink-2); }

/* ---------- process flow ---------- */
/* Retour cliente : les cinq mouvements se lisent a la verticale, pas a
   l'horizontale. Chaque mouvement devient une ligne pleine largeur, numero a
   gauche, titre et texte alignes sur la meme colonne, filet entre chacun. */
.flow {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr;
  row-gap: 0;
  border-top: 1px solid var(--line);
}
.flow__step {
  border-top: 0;
  border-bottom: 1px solid var(--line);
  padding: clamp(24px, 2.8vw, 38px) 0;
  position: relative;
  display: grid;
  grid-template-columns: clamp(70px, 8vw, 130px) minmax(0, 22ch) minmax(0, 1fr);
  column-gap: clamp(18px, 3vw, 56px);
  align-items: baseline;
  transition: background 420ms var(--ease);
}
.flow__step:hover { background: rgba(28, 47, 66, 0.03); }
.flow__step::before { content: none; }
.flow__step .ix { font-family: var(--serif); font-size: clamp(1.05rem, 1.5vw, 1.5rem); letter-spacing: 0.06em; color: var(--ink-3); display: block; margin: 0; }
.flow__step h3 { font-family: var(--serif); font-size: clamp(1.35rem, 2vw, 2rem); margin: 0; line-height: 1.08; }
.flow__step p { font-size: 15px; line-height: 1.7; color: var(--ink-2); margin: 0; max-width: 56ch; }

/* ---------- quote panel ---------- */
.quote {
  grid-column: 1 / -1;
  background: var(--panel);
  color: var(--paper);
  border-radius: var(--r);
  padding: clamp(44px, 7vw, 104px) clamp(24px, 6vw, 80px);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.quote p {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.6rem, 3.4vw, 3.1rem);
  line-height: 1.16;
  max-width: 20ch;
  margin: 0 auto;
}
.quote .cap {
  display: block;
  margin-top: clamp(22px, 3vw, 34px);
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(247, 244, 238, 0.46);
}
.quote--soft { background: var(--paper-warm); color: var(--ink); }
.quote--soft .cap { color: var(--ink-3); }

/* ---------- split band ---------- */
.split { align-items: center; row-gap: clamp(26px, 4vw, 46px); }
.split__media, .split__copy { grid-row: 1; }
.split__media { grid-column: 1 / span 6; }
.split__copy { grid-column: 8 / span 5; }
.split--rev .split__media { grid-column: 7 / span 6; }
.split--rev .split__copy { grid-column: 1 / span 5; }
.split__copy .eyebrow { display: block; margin-bottom: 16px; }
.split__copy h2 { margin-bottom: 20px; }
.split__copy .alink { margin-top: 24px; }
.split--bleed .split__media { margin-left: calc(-1 * var(--gutter)); }
.split--bleed.split--rev .split__media { margin-left: 0; margin-right: calc(-1 * var(--gutter)); }

/* ---------- callout band ---------- */
.callout {
  grid-column: 1 / -1;
  border: 1px solid var(--line-soft);
  border-radius: var(--r);
  background: var(--paper-warm);
  padding: clamp(28px, 3.4vw, 52px);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: clamp(20px, 3vw, 48px);
  align-items: center;
}
.callout h3 { font-family: var(--serif); font-size: clamp(1.4rem, 2.1vw, 2rem); line-height: 1.14; margin-bottom: 12px; }
.callout p { color: var(--ink-2); max-width: 62ch; margin: 0; font-size: 15px; }

/* ---------- prose block (designed paragraphs) ---------- */
.prose { grid-column: 6 / span 7; }
.prose .lead + p { margin-top: 22px; }
.prose__first {
  font-size: clamp(1.05rem, 1.25vw, 1.22rem);
  line-height: 1.66;
  color: var(--ink);
  border-left: 2px solid var(--olive);
  padding-left: clamp(18px, 2vw, 30px);
  margin-bottom: 26px;
}

/* ---------- editorial list ---------- */
.elist { display: grid; row-gap: 0; }
.elist__row {
  border-top: var(--hair);
  padding: clamp(18px, 2vw, 26px) 0;
  display: grid;
  grid-template-columns: 150px 1fr;
  column-gap: clamp(16px, 2vw, 40px);
  align-items: baseline;
  transition: padding-left 420ms var(--ease);
}
.elist__row:last-child { border-bottom: var(--hair); }
.elist__row:hover { padding-left: 8px; }
.elist__k { font-family: var(--serif); font-size: 1.15rem; color: var(--ink); }
.elist__v { font-size: 14.5px; line-height: 1.66; color: var(--ink-2); }

/* ---------- reading progress ---------- */
.progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  width: 0;
  background: var(--brick);
  z-index: 200;
  transition: width 120ms linear;
}

/* ---------- article upgrades ---------- */
.article__side { position: sticky; top: 130px; align-self: start; display: flex; flex-direction: column; align-items: flex-start; }
.article > p:first-of-type::first-letter {
  font-family: var(--serif);
  float: left;
  font-size: 3.5em;
  line-height: 0.8;
  padding: 8px 14px 0 0;
  color: var(--ink);
}

/* ---------- entries ---------- */
.entry .fig { border-radius: var(--r); }
.entry__meta { gap: 10px; }
.entry__meta::after { content: ""; flex: 1; height: 1px; background: var(--line-soft); }

/* ---------- forms ---------- */
.fieldset {
  border: 1px solid var(--line-soft);
  border-radius: var(--r);
  padding: clamp(24px, 2.6vw, 40px);
  background: var(--paper);
}
.fieldset > legend {
  border: 0;
  margin: 0;
  padding: 0 14px;
  margin-left: -6px;
  width: auto;
  font-family: var(--serif);
  font-size: 1.2rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
}
.fieldset::after { content: ""; display: table; clear: both; }
.fieldset > legend em { font-style: normal; color: var(--ink-3); font-size: 12px; letter-spacing: 0.2em; margin-right: 12px; font-family: var(--sans); }

/* ---------- scroll cue ---------- */
.cue { display: flex; align-items: center; gap: 12px; font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-3); }
.cue::before { content: ""; width: 30px; height: 1px; background: var(--line); }

/* ---------- responsive v2 ---------- */
@media (max-width: 1080px) {
  .fcards { grid-template-columns: repeat(2, 1fr); }
  .hgrid { grid-template-columns: repeat(2, 1fr); }
  .flow { grid-template-columns: 1fr; }
  .facts { grid-template-columns: repeat(2, 1fr); }
  .fact:nth-child(odd) { border-left: 0; padding-left: 0; }
  .fact:nth-child(n + 3) { border-top: var(--hair); }
  .prose { grid-column: 1 / -1; }
}

@media (max-width: 860px) {
  .hero2 { min-height: auto; padding-top: clamp(96px, 15vh, 130px); }
  .hero2__in { grid-template-columns: 1fr; row-gap: clamp(26px, 4vh, 40px); }
  .hero2__copy, .hero2__media { grid-column: 1 / -1; }
  .hero2__media--bleed { margin-right: 0; }
  .hero2__media .fig,
  .hero2--short .hero2__media .fig,
  .hero2--article .hero2__media .fig { height: auto; aspect-ratio: 4 / 3; }
  .hero2__inset { display: none; }
  .hero2__bar { grid-auto-flow: row; grid-template-columns: repeat(2, 1fr); }
  .hero2__bar > * { padding-left: clamp(14px, 4vw, 22px); }
  .hero2__bar > *:nth-child(odd) { border-left: 0; padding-left: 0; }
  .hero2__bar > *:nth-child(n + 3) { border-top: var(--hair); }
  .sechead__l, .sechead__r { grid-column: 1 / -1; }
  .sechead h2 { max-width: none; }
  .split__media, .split__copy,
  .split--rev .split__media, .split--rev .split__copy { grid-column: 1 / -1; grid-row: auto; }
  .split--bleed .split__media,
  .split--bleed.split--rev .split__media { margin-left: 0; margin-right: 0; }
  .split__media { order: -1; }
  .callout { grid-template-columns: 1fr; }
  .flow { grid-template-columns: 1fr; row-gap: 0; }
  .flow__step { grid-template-columns: 1fr; row-gap: 10px; padding: 22px 0; }


  .article__side { position: static; }
  .elist__row { grid-template-columns: 1fr; row-gap: 8px; }
}

@media (max-width: 520px) {
  .fcards, .fcards--3, .fcards--2 { grid-template-columns: 1fr; }
  .hgrid, .hgrid--2 { grid-template-columns: 1fr; }
  .facts { grid-template-columns: 1fr; }
  .fact { border-left: 0; padding-left: 0; }
  .fact + .fact { border-top: var(--hair); }
  .hero2__bar { grid-auto-flow: row; grid-template-columns: 1fr; }
  .hero2__bar > * { border-left: 0; padding-left: 0; }
  .hero2__bar > * + * { border-top: var(--hair); }
  .article > p:first-of-type::first-letter { font-size: 3em; }
}

/* grid children must be allowed to shrink below their min-content size,
   otherwise a long word or an intrinsic image width widens the whole column
   and the page scrolls sideways on small screens */
.grid > *,
.hero2__in > *,
.hero2__bar > *,
.fcards > *,
.hgrid > *,
.flow > *,
.facts > *,
.elist__row > *,
.callout > *,
.field--half > * { min-width: 0; }
.hero2__copy > *, .fcard > *, .hcell > * { max-width: 100%; }

/* ============================================================
   HEADER v3: presence, contrast, permanence
   ============================================================ */

/* the bar is always there, never auto-hides, and always sits on a readable
   ground: a soft scrim at rest, a near-opaque plate once scrolled */
.header {
  padding: clamp(14px, 1.6vw, 20px) 0;
}
.header::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 190%;
  background: linear-gradient(
    to bottom,
    rgba(247, 244, 238, 0.92) 0%,
    rgba(247, 244, 238, 0.66) 46%,
    rgba(247, 244, 238, 0) 100%
  );
  z-index: -2;
  pointer-events: none;
  transition: opacity 500ms var(--ease);
}
.header::after {
  background: rgba(247, 244, 238, 0.97);
  -webkit-backdrop-filter: blur(18px) saturate(1.15);
  backdrop-filter: blur(18px) saturate(1.15);
  box-shadow: 0 1px 0 rgba(31, 28, 24, 0.14), 0 10px 30px -22px rgba(31, 28, 24, 0.5);
}
.header.is-solid { padding: 11px 0; border-bottom: 0; }
.header.is-solid::before { opacity: 0; }
.header.is-hidden { transform: none; }

/* wordmark: bigger, held by a hairline so it reads as a mark, not as text */
.header .wordmark__img { height: clamp(22px, 2.4vw, 30px); }

/* nav: one size up, denser ink, permanent rule under the current page */
.nav { gap: clamp(16px, 1.9vw, 32px); }
.nav a {
  font-size: 12px;
  letter-spacing: 0.13em;
  font-weight: 500;
  color: var(--ink);
  opacity: 0.68;
  padding: 6px 0;
  transition: opacity 320ms var(--ease);
}
.nav a:hover { opacity: 1; }
.nav a[aria-current="page"] { opacity: 1; }
.nav a::after { height: 1.5px; bottom: -1px; }

/* the call to action is the anchor of the bar: filled, not outlined */
.nav a.nav__cta {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
  border-radius: 999px;
  opacity: 1 !important;
  padding: 11px 24px !important;
  margin-left: clamp(4px, 1vw, 16px);
}
.nav a.nav__cta:hover {
  background: transparent;
  color: var(--ink);
  border-color: var(--ink);
}

/* over a dark hero: invert the scrim too, otherwise the ivory veil fights it */
.header--invert::before {
  background: linear-gradient(
    to bottom,
    rgba(20, 18, 15, 0.62) 0%,
    rgba(20, 18, 15, 0.28) 50%,
    rgba(20, 18, 15, 0) 100%
  );
}
.header--invert .nav a { color: var(--paper); opacity: 0.82; }
.header--invert .nav a:hover,
.header--invert .nav a[aria-current="page"] { opacity: 1; }
.header--invert .nav a.nav__cta { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.header--invert .nav a.nav__cta:hover { background: transparent; color: var(--paper); border-color: var(--paper); }
.header--invert.is-solid::before { opacity: 0; }
.header--invert.is-solid .nav a { color: var(--ink); opacity: 0.68; }
.header--invert.is-solid .nav a:hover,
.header--invert.is-solid .nav a[aria-current="page"] { opacity: 1; }
.header--invert.is-solid .nav a.nav__cta { background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* burger: a real target, visible at a glance */
.burger { width: 30px; height: 22px; }
.burger span { height: 2px; }
.burger span:nth-child(1) { top: 5px; }
.burger span:nth-child(2) { top: 15px; }
body.menu-open .burger span:nth-child(1) { transform: translateY(10px) rotate(9deg); }

/* the page must start below a bar that is now always on screen */
@media (max-width: 860px) {
  .header { padding: 12px 0; }
  .header .wordmark__img { height: 21px; }
  .header__in { gap: 16px; }
}

/* anchors must not land under a bar that no longer hides */
html { scroll-padding-top: 104px; }

/* mobile: the enquiry pill stays in the bar, the rest folds into the menu */
@media (max-width: 860px) {
  html { scroll-padding-top: 78px; }
  .nav { display: flex; gap: 0; margin-left: auto; }
  .nav a:not(.nav__cta) { display: none; }
  .nav a.nav__cta { margin-left: 0; padding: 9px 18px !important; font-size: 11px; }
  .header__in { gap: 14px; }
}
@media (max-width: 380px) {
  .nav a.nav__cta { padding: 8px 14px !important; letter-spacing: 0.1em; }
}

/* open menu: the burger becomes a real cross, the pill steps aside
   (the menu already carries its own Enquire entry) */
body.menu-open .burger span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
body.menu-open .burger span:nth-child(2) { transform: translateY(-5px) rotate(-45deg); }
body.menu-open .nav a.nav__cta { opacity: 0 !important; pointer-events: none; transition: opacity 220ms var(--ease); }

/* ==========================================================================
   COLUMN UTILITIES
   Les spans desktop passent par des classes, jamais par un style inline:
   un style inline gagne contre toute media query et bloquait le repli mobile.
   ========================================================================== */
.col-full { grid-column: 1 / -1; }
.col-gap { margin-top: clamp(38px, 5vh, 64px); }
.col-1-5 { grid-column: 1 / span 5; }
.col-1-6 { grid-column: 1 / span 6; }
.col-1-7 { grid-column: 1 / span 7; }
.col-2-8 { grid-column: 2 / span 8; }
.col-7-6 { grid-column: 7 / span 6; }
.col-8-5 { grid-column: 8 / span 5; }
.col-9-4 { grid-column: 9 / span 4; align-self: end; }

@media (max-width: 1080px) {
  .col-2-8 { grid-column: 1 / -1; }
}

@media (max-width: 860px) {
  .col-1-5,
  .col-1-6,
  .col-1-7,
  .col-7-6,
  .col-8-5,
  .col-9-4 { grid-column: 1 / -1; }
  .col-9-4 { align-self: auto; margin-top: 8px; }
}

/* ==========================================================================
   MOBILE PASS
   Lisibilite, cibles tactiles, repli des blocs multi-colonnes, rythme.
   Rien ici ne touche le desktop.
   ========================================================================== */

/* le blockquote garde la marge par defaut du navigateur (40px de chaque cote)
   et le panneau citation s'en trouvait retreci partout */
.quote { margin: 0; }

@media (max-width: 860px) {
  /* ---- 1. cibles tactiles de la barre ---- */
  .burger {
    width: 44px;
    height: 44px;
    margin-right: -8px;
    display: block;
  }
  .burger span { left: 10px; width: 24px; }
  .burger span:nth-child(1) { top: 17px; }
  .burger span:nth-child(2) { top: 27px; }
  body.menu-open .burger span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
  body.menu-open .burger span:nth-child(2) { transform: translateY(-5px) rotate(-45deg); }

  .header .wordmark { padding: 10px 0; display: inline-block; }
  .nav a.nav__cta {
    padding: 13px 20px !important;
    font-size: 11.5px;
    letter-spacing: 0.13em;
  }
  html { scroll-padding-top: 92px; }

  /* ---- 2. echelle typographique ---- */
  .eyebrow { font-size: 11px; letter-spacing: 0.16em; }
  .hero2__bar .eyebrow { font-size: 10.5px; }
  .link,
  .alink,
  .btn { font-size: 12px; letter-spacing: 0.13em; }
  .cue { font-size: 11px; letter-spacing: 0.16em; }
  .caption { font-size: 11px; letter-spacing: 0.1em; }
  .quote .cap { font-size: 11px; letter-spacing: 0.18em; }
  .footer__col h4 { font-size: 11px; letter-spacing: 0.16em; }
  .footer__col a,
  .footer__col span { font-size: 14.5px; }
  .footer__bottom { font-size: 12.5px; }

  /* corps de texte secondaire: 14.5px etait sous le seuil de confort mobile */
  .fcard p,
  .hcell p,
  .entry p,
  .pillar p,
  .elist__v,
  .flow__step p { font-size: 15.5px; line-height: 1.66; }
  .fact span { font-size: 14.5px; }
  .callout p { font-size: 15.5px; }
  .tags li { font-size: 12.5px; padding: 10px 18px; }

  /* ---- 3. cibles tactiles du contenu ---- */
  .alink { padding: 12px 0; }
  .sechead__r .alink { margin-top: 8px; }
  .split__copy .alink { margin-top: 12px; }
  .card__body .alink,
  .path__body .alink,
  .entry .alink { margin-top: -4px; }
  .footer__col { gap: 2px; }
  .footer__col a,
  .footer__col span { display: inline-block; padding: 9px 0; }
  .footer__col h4 { margin-bottom: 2px; }
  .footer__bottom a,
  .lang span,
  .lang a { display: inline-block; padding: 6px 0; }

  /* ---- 4. blocs qui restaient en deux colonnes ---- */
  .tri__1,
  .tri__2 { grid-column: 1 / -1; }
  .tri__3 { grid-column: 5 / -1; }
  .tri { row-gap: 22px; }
  .pullquote { grid-column: 1 / -1; }
  .prose { grid-column: 1 / -1; }

  /* le filet du repere de defilement passe apres le mot, sinon le label
     se decale de 42px et ne s'aligne plus sur la colonne de texte */
  .cue::before { display: none; }
  .cue::after {
    content: "";
    width: 30px;
    height: 1px;
    background: var(--line);
  }

  /* la barre de saut du hero devient une vraie liste: fleche a droite,
     ligne entiere cliquable */
  a.hero2__jump b { width: 100%; justify-content: space-between; }
  .hero2__bar > * { padding-top: 18px; padding-bottom: 20px; }

  /* ---- 5. formulaires ---- */
  /* iOS Safari zoome des qu'un champ est sous 16px */
  .field input,
  .field select,
  .field textarea { font-size: 16px; padding: 13px 0; }
  .field label { font-size: 13px; margin-bottom: 7px; }
  .choice label { padding: 13px 20px; font-size: 13px; }
  .consent { font-size: 13.5px; align-items: flex-start; }
  .consent input { width: 20px; height: 20px; margin-top: 2px; flex: 0 0 20px; }
  .hint { font-size: 12.5px; }
  /* le cadre du fieldset volait 50px de largeur utile: on le remplace par
     un filet, les champs reprennent toute la largeur de l'ecran */
  .fieldset {
    border: 0;
    border-radius: 0;
    padding: 0;
    background: transparent;
    margin-bottom: 42px;
  }
  /* sans cadre, la legende n'a plus de cran ou se loger: on la repasse en
     bloc plein pour qu'elle titre normalement la section
     (surtout pas float: un enfant en display:grid derriere un flottant de
     100% de large se fait pousser hors de l'ecran) */
  .fieldset > legend {
    display: block;
    float: none;
    width: 100%;
    padding: 0 0 13px;
    margin: 0 0 24px;
    border-bottom: var(--rule);
    font-size: 1.15rem;
  }
  .fieldset > legend em { font-size: 11px; letter-spacing: 0.2em; margin-right: 10px; }
}

@media (max-width: 620px) {
  /* le bouton principal prend la largeur: cible franche, pas de pilule
     perdue au milieu d'un ecran vide */
  .btn {
    display: block;
    width: 100%;
    max-width: 380px;
    text-align: center;
    padding: 17px 24px;
  }
  .btn-row { display: grid; gap: 12px; }
  .btn-row .btn { max-width: none; }

  /* rythme vertical: les sections respiraient a 72px en haut ET en bas,
     ce qui fait 144px de vide entre deux blocs sur un ecran de 844px */
  .section { padding: 58px 0; }
  .section--tight { padding: 44px 0; }
  .pagehead { padding-top: clamp(112px, 16vh, 150px); padding-bottom: 30px; }

  .quote { padding: 40px 24px; }
  .quote p { max-width: none; font-size: clamp(1.45rem, 6.6vw, 1.9rem); }

  .numbered__item { padding: 22px 0; }
  .scope__row { padding: 20px 0; }
  .statement { text-align: left; }
  .pillars { margin-top: 28px; }

  /* la troisieme image du triptyque tombait a 107px de large */
  .tri__3 { grid-column: 4 / -1; }

  .article { font-size: 1.08rem; line-height: 1.72; }
  .article blockquote { padding-left: 18px; margin: 1.6em 0; }
}

@media (max-width: 400px) {
  .nav a.nav__cta { padding: 12px 16px !important; letter-spacing: 0.1em; }
  .header__in { gap: 10px; }
  .choice label { padding: 12px 16px; }
  .footer__bottom { gap: 6px 20px; }
}

/* ---- rattrapages cibles tactiles + densite du pied de page ---- */
@media (max-width: 860px) {
  .menu__foot { gap: 0; }
  .menu__foot a { display: inline-block; padding: 11px 0; }
  .footer__brand .wordmark { display: inline-block; padding: 8px 0; margin-bottom: 12px; }
  .footer__bottom a { padding: 12px 0; }
  .consent input { width: 24px; height: 24px; flex: 0 0 24px; margin-top: 0; }

  /* deux colonnes de liens: le pied de page tenait sur un ecran entier */
  .footer__col { grid-column: span 6; }
  .footer__col:nth-child(2) { grid-column: 1 / span 6; }
  .footer__grid { row-gap: 30px; }
}

@media (max-width: 340px) {
  .footer__col { grid-column: 1 / -1; }
}

@media (max-width: 860px) {
  .footer__brand .wordmark { padding: 11px 0; }
  /* lien en ligne dans un surtitre: le padding sur un inline agrandit la zone
     tactile sans decaler la ligne */
  .eyebrow a { padding: 9px 3px; margin: 0 -3px; }
}

/* pied de page: trois colonnes en tablette, deux en telephone, une en tres
   petite largeur */
@media (max-width: 860px) {
  .footer__col { grid-column: span 4; }
  .footer__col:nth-child(2) { grid-column: auto / span 4; }
}
@media (max-width: 620px) {
  .footer__col { grid-column: span 6; }
  .footer__col:nth-child(2) { grid-column: 1 / span 6; }
}
@media (max-width: 340px) {
  .footer__col { grid-column: 1 / -1; }
}

/* menu mobile: la page courante se signale, sinon on ne sait plus ou l'on est */
.menu__nav a[aria-current="page"] {
  color: var(--ink);
  position: relative;
  padding-left: 20px;
}
.menu__nav a[aria-current="page"]::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 8px;
  height: 1px;
  background: var(--ink);
}
.menu__nav a:not([aria-current="page"]) { color: var(--ink-2); }

/* ============================================================
   SELECTEUR DE LANGUE (bout de barre)
   ============================================================ */

/* deux capitales tenues par une hairline, dans la microtypo de la nav: la
   langue active porte son filet, l'autre s'allume au survol */
.langsw {
  display: flex;
  align-items: center;
  gap: 9px;
  flex: 0 0 auto;
  padding-left: clamp(14px, 1.5vw, 22px);
  border-left: 1px solid rgba(31, 28, 24, 0.16);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  line-height: 1;
  color: var(--ink);
  transition: color 600ms var(--ease), border-color 600ms var(--ease);
}
.langsw__on,
.langsw__to {
  position: relative;
  padding: 5px 0;
  color: inherit;
}
.langsw__on { opacity: 1; }
.langsw__on::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 100%;
  height: 1.5px;
  background: currentColor;
}
.langsw__to {
  opacity: 0.5;
  transition: opacity 320ms var(--ease);
}
.langsw__to:hover,
.langsw__to:focus-visible { opacity: 1; }
.langsw__to::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 100%;
  height: 1.5px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 480ms var(--ease);
}
.langsw__to:hover::after,
.langsw__to:focus-visible::after { transform: scaleX(1); }
.langsw__sep {
  width: 1px;
  height: 10px;
  background: currentColor;
  opacity: 0.26;
}

/* au-dessus d'un hero sombre, puis retour a l'encre une fois la barre pleine */
.header--invert .langsw {
  color: var(--paper);
  border-left-color: rgba(247, 244, 238, 0.3);
}
.header--invert .langsw__to { opacity: 0.6; }
.header--invert .langsw__to:hover,
.header--invert .langsw__to:focus-visible { opacity: 1; }
.header--invert.is-solid .langsw {
  color: var(--ink);
  border-left-color: rgba(31, 28, 24, 0.16);
}
.header--invert.is-solid .langsw__to { opacity: 0.5; }
.header--invert.is-solid .langsw__to:hover,
.header--invert.is-solid .langsw__to:focus-visible { opacity: 1; }

/* en telephone la barre ne porte plus que la marque, la pastille et le
   burger: la bascule vit dans le menu, ou elle a la place de se lire */
@media (max-width: 860px) {
  .header .langsw { display: none; }
}

/* menu mobile: la meme bascule, a la taille du pied de menu */
.menu__lang {
  border-left: 0;
  padding-left: 0;
  font-size: 12px;
  color: var(--ink-2);
}
.menu__lang { gap: 12px; }
.menu__lang .langsw__on,
.menu__lang .langsw__to { padding: 10px 0; }
.menu__lang .langsw__on { color: var(--ink); }
.menu__lang .langsw__to { opacity: 0.55; }
.menu__lang .langsw__to:hover { opacity: 1; }

/* juste avant le burger, la barre francaise est la plus large: on resserre
   les intervalles plutot que de laisser la bascule toucher le bord */
@media (max-width: 1080px) {
  .header__in { gap: 16px; }
  .langsw { padding-left: 12px; gap: 7px; }
}

/* la barre francaise est plus longue que l'anglaise: sur les ecrans moyens on
   resserre l'interlettrage et les intervalles plutot que de laisser les
   intitules passer a la ligne */
@media (min-width: 1030px) and (max-width: 1160px) {
  .nav { gap: 14px; }
  .nav a { white-space: nowrap; letter-spacing: 0.1em; }
  .nav a.nav__cta { padding: 10px 16px !important; margin-left: 4px; }
}

/* la barre anglaise, plus courte, tient encore sur une ligne dans la bande
   basse: on la resserre au lieu de la laisser se replier */
@media (min-width: 910px) and (max-width: 1029px) {
  html[lang="en"] .nav { gap: 13px; }
  html[lang="en"] .nav a { white-space: nowrap; letter-spacing: 0.09em; }
  html[lang="en"] .nav a.nav__cta { padding: 10px 15px !important; margin-left: 4px; }
}

/* bouton portant une adresse email: en tres petite largeur, l'adresse est plus
   longue que l'ecran et poussait toute la page (defilement horizontal sur les
   pages contact et experiences de marque) */
@media (max-width: 430px) {
  .btn[href^="mailto:"] {
    max-width: 100%;
    padding-left: 18px;
    padding-right: 18px;
    letter-spacing: 0.12em;
    line-height: 1.5;
    overflow-wrap: anywhere;
    text-align: center;
  }
}


/* ---------- listes de choix longues (questionnaire) ---------- */
/* Le questionnaire d'origine propose jusqu'a dix-huit mots d'esthetique.
   Ils reprennent la pastille de base, simplement resserree pour qu'un nuage
   de dix-huit entrees reste lisible. */
.choice--wrap label { padding: 8px 15px; font-size: 13.5px; }
.choice--wrap input:checked + label { background: var(--navy); border-color: var(--navy); color: var(--paper); }

/* Retour du 14/10/2026 : photo de la balustrade (portrait) dans l'emplacement
   16:9 de l'entree a la une du journal, cadree sur les urnes et la mer. */
.fig--balustrade img { object-position: 50% 58%; }

/* Playfair Display (retour du 14/10/2026) : chiffres alignes (ses chiffres
   par defaut sont en bas de casse, "01" se lisait "o1"), et espace entre les
   mots legerement elargi sur les titres pour compenser le resserrage des
   lettres demande au premier retour. */
body { font-variant-numeric: lining-nums; }
h1, h2, h3, h4, .display, .h2, .h3, .lead, .pullquote { word-spacing: 0.06em; }

/* ==========================================================================
   HERO MOBILE (14/10/2026, demande de JR)
   Sur telephone, le hero empilait un long paragraphe, deux appels a l'action
   et une liste de 4 liens avant la photo, qui tombait sous le pli.
   Desormais : la photo pleine largeur sous la barre, le surtitre et le titre
   poses en bas de la photo sur un degrade sombre, un seul bouton (clair).
   Masques sur mobile uniquement : le paragraphe d'intro, le lien secondaire
   et la barre de liens 01 a 04. Le desktop ne change pas.
   ========================================================================== */
@media (max-width: 860px) {
  .hero2,
  .hero2--short { padding-top: 69px; padding-bottom: 0; min-height: 0; }
  .hero2__in.wrap {
    display: grid;
    grid-template-columns: 1fr;
    row-gap: 0;
    padding: 0;
    position: relative;
  }
  .hero2__copy,
  .hero2__media { grid-column: 1; grid-row: 1; }
  .hero2__media { z-index: 0; margin: 0; }
  .hero2__media .fig,
  .hero2--short .hero2__media .fig,
  .hero2--article .hero2__media .fig {
    height: min(calc(100svh - 124px), 700px);
    min-height: 460px;
    aspect-ratio: auto;
  }
  .hero2__media::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(
      to top,
      rgba(16, 21, 28, 0.8) 0%,
      rgba(16, 21, 28, 0.6) 30%,
      rgba(16, 21, 28, 0.32) 52%,
      rgba(16, 21, 28, 0.08) 70%,
      rgba(16, 21, 28, 0) 82%
    );
  }
  .hero2__copy {
    z-index: 1;
    align-self: end;
    padding: 0 var(--gutter) 30px;
    color: #faf5ef;
  }
  .hero2__copy .eyebrow,
  .hero2__copy .eyebrow a {
    color: rgba(250, 245, 239, 0.9);
    margin-bottom: 14px;
    text-shadow: 0 1px 10px rgba(10, 14, 20, 0.45);
  }
  .hero2__copy .display {
    color: #faf5ef;
    font-size: clamp(2.05rem, 8.6vw, 2.75rem);
    line-height: 1.04;
    text-shadow: 0 1px 22px rgba(10, 14, 20, 0.28);
  }
  .hero2__copy .display .serif-em { color: #faf5ef; }
  .hero2__lead,
  .hero2__copy .alink,
  .hero2 .hero2__bar { display: none; }
  .hero2__copy .btn-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 22px;
  }
  .hero2__copy .btn-row:not(:has(.btn)) { display: none; }
  .hero2__copy .btn {
    width: auto;
    max-width: none;
    padding: 15px 22px;
    background: #faf5ef;
    border-color: #faf5ef;
    color: var(--ink);
  }
  .hero2__copy .btn--ghost {
    background: transparent;
    border-color: rgba(250, 245, 239, 0.85);
    color: #faf5ef;
  }
}

/* formulaires reels (lancement anoecelebrations.com) : message d'echec d'envoi */
.form__err { margin: 16px 0 0; font-size: 14px; color: #97432f; }
.form__err a { text-decoration: underline; }

/* ==========================================================================
   MENU MOBILE PLUS DISCRET (25/10/2026, demande de JR)
   Les liens du menu ouvert passaient en 35 px et remplissaient l'ecran (il
   debordait meme sur un petit iPhone). Taille ramenee a un titre courant,
   cible tactile gardee autour de 48 px ; le selecteur EN / FR s'aligne
   enfin sur le reste du pied de menu.
   ========================================================================== */
@media (max-width: 860px) {
  .menu { padding-top: 96px; padding-bottom: 30px; }
  .menu__nav a { font-size: 1.4rem; line-height: 1.3; padding: 11px 0; letter-spacing: -0.005em; }
  .menu__nav a[aria-current="page"] { padding-left: 18px; }
  .menu .menu__lang { padding-left: 0; }
}