/* Polices hébergées sur le site, aucune requête vers Google : Archivo pour le texte (licence SIL OFL, fonts/archivo-OFL.txt).
   Titres (--display) : Book Antiqua ou Palatino Linotype (Windows), Palatino (Mac, iPhone), URW Palladio L, TeX Gyre Pagella
   ou P052 (Linux), sinon « Pagella Web » : TeX Gyre Pagella réduite (licence GUST, fonts/pagella-web-LICENCE.txt, générée par
   polices/pagella-web.js, hauteurs alignées sur Book Antiqua), téléchargée seulement là où aucune de ces polices n'existe
   (Android surtout), et sa partie latin-ext seulement si un tel caractère apparaît.
   Palatino passe par « Palatino Mac » (local(), aucun téléchargement) et non par son nom : sur Android, « Palatino » est un
   alias de la police serif du système (fonts.xml), qui l'emporterait sur Pagella Web. */
@font-face { font-family: 'Archivo'; font-style: normal; font-display: swap; font-weight: 100 900; font-stretch: 62% 125%; src: url('../fonts/archivo-latin-ext.woff2') format('woff2-variations'), url('../fonts/archivo-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Archivo'; font-style: normal; font-display: swap; font-weight: 100 900; font-stretch: 62% 125%; src: url('../fonts/archivo-latin.woff2') format('woff2-variations'), url('../fonts/archivo-latin.woff2') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Palatino Mac'; font-style: normal; font-weight: 400; src: local('Palatino-Roman'), local('Palatino'); }
@font-face { font-family: 'Palatino Mac'; font-style: italic; font-weight: 400; src: local('Palatino-Italic'), local('Palatino Italic'); }
@font-face { font-family: 'Pagella Web'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/pagella-web-latin-ext.woff2') format('woff2'); ascent-override: 96.04%; descent-override: 28.22%; line-gap-override: 0%; unicode-range: U+0100-0137,U+0139-0148,U+014A-0165,U+0168-017F,U+018E,U+0192,U+01A0-01A1,U+01AF-01B0,U+01CD-01D4,U+01D7-01DD,U+01E6-01E7,U+01EA-01EB,U+01F0,U+01F4-01F5,U+01FA-0201,U+0204-0205,U+0208-0209,U+020C-020D,U+0210-0211,U+0214-0215,U+0218-021B,U+0237,U+0258-0259,U+02BE-02BF,U+02C7,U+02DD,U+0304,U+0308,U+1E0C-1E0F,U+1E24-1E27,U+1E2A-1E2B,U+1E2E-1E2F,U+1E36-1E39,U+1E42-1E47,U+1E58-1E5D,U+1E62-1E63,U+1E6C-1E6F,U+1E80-1E85,U+1E92-1E93,U+1E97,U+1EF2-1EF9,U+2020,U+20A1,U+20A4,U+20A6,U+20A9,U+20AB,U+20B1-20B2,U+20BD,U+20BF,U+2113; }
@font-face { font-family: 'Pagella Web'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/pagella-web-latin.woff2') format('woff2'); ascent-override: 96.04%; descent-override: 28.22%; line-gap-override: 0%; unicode-range: U+0020-007E,U+00A0-00FF,U+0131,U+0152-0153,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+2000-200D,U+2010-201A,U+201C-201E,U+2020-2022,U+2026,U+202F-2037,U+2039-203B,U+203D,U+203F-2040,U+2044-2046,U+2052,U+2054,U+2057,U+205F-2064,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF; }
@font-face { font-family: 'Pagella Web'; font-style: italic; font-weight: 400; font-display: swap; src: url('../fonts/pagella-web-italic-latin-ext.woff2') format('woff2'); ascent-override: 92.24%; descent-override: 27.98%; line-gap-override: 0%; unicode-range: U+0100-0137,U+0139-0148,U+014A-0165,U+0168-017F,U+018E,U+0192,U+01A0-01A1,U+01AF-01B0,U+01CD-01D4,U+01D7-01DD,U+01E6-01E7,U+01EA-01EB,U+01F0,U+01F4-01F5,U+01FA-0201,U+0204-0205,U+0208-0209,U+020C-020D,U+0210-0211,U+0214-0215,U+0218-021B,U+0237,U+0258-0259,U+02BE-02BF,U+02C7,U+02DD,U+0304,U+0308,U+1E0C-1E0F,U+1E24-1E27,U+1E2A-1E2B,U+1E2E-1E2F,U+1E36-1E39,U+1E42-1E47,U+1E58-1E5D,U+1E62-1E63,U+1E6C-1E6F,U+1E80-1E85,U+1E92-1E93,U+1E97,U+1EF2-1EF9,U+2020,U+20A1,U+20A4,U+20A6,U+20A9,U+20AB,U+20B1-20B2,U+20BD,U+20BF,U+2113; }
@font-face { font-family: 'Pagella Web'; font-style: italic; font-weight: 400; font-display: swap; src: url('../fonts/pagella-web-italic-latin.woff2') format('woff2'); ascent-override: 92.24%; descent-override: 27.98%; line-gap-override: 0%; unicode-range: U+0020-007E,U+00A0-00FF,U+0131,U+0152-0153,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+2000-200D,U+2010-201A,U+201C-201E,U+2020-2022,U+2026,U+202F-2037,U+2039-203B,U+203D,U+203F-2040,U+2044-2046,U+2052,U+2054,U+2057,U+205F-2064,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF; }
/* ==========================================================================
   Cabinet Druart Thomas — bleu nuit en couches, lumière dorée, verre translucide.
   Le fichier se lit dans l'ordre : chaque passe datée affine les précédentes
   (tokens, base, en-tête, héros, composants, pages, pied de page, mouvement).
   ========================================================================== */

@view-transition { navigation: auto; }

:root {
  /* Mer et encre */
  --abyss: #0a1629;
  --sea: #0f1f3a;
  --sea-2: #132649;
  --sea-3: #1f3660;
  /* Papier et texte */
  --bone: #ece6d8;
  --text: #cfd6e1;
  --muted: #9eb0c8;
  --faint: #8ea3c2;
  /* Lumière */
  --gold: #d4af61;
  --gold-soft: #e8cf95;
  /* Filets */
  --rule: rgba(236, 230, 216, 0.12);
  --rule-strong: rgba(236, 230, 216, 0.24);
  --rule-gold: rgba(212, 175, 97, 0.45);

  --display: "Book Antiqua", "Palatino Linotype", "Palatino Mac", "URW Palladio L", "TeX Gyre Pagella", "P052", "Pagella Web", Georgia, serif;
  --sans: "Archivo", "Helvetica Neue", Arial, sans-serif;

  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-base: 1.0625rem;
  --fs-lg: 1.25rem;
  --fs-h3: clamp(1.45rem, 1.2rem + 0.9vw, 1.9rem);
  --fs-h2: clamp(2.2rem, 1.5rem + 2.6vw, 3.9rem);
  --fs-h1: clamp(2.8rem, 1.6rem + 4.6vw, 6rem);

  --gutter: clamp(1.25rem, 4vw, 3.5rem);
  --container: 1280px;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: cubic-bezier(0.22, 1, 0.36, 1);

  color-scheme: dark;
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scrollbar-color: var(--sea-3) var(--abyss); }
body {
  margin: 0;
  font-family: var(--sans);
  font-size: var(--fs-base);
  line-height: 1.65;
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
  overflow-x: clip;
}
::selection { background: var(--gold); color: var(--abyss); }
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--abyss); }
::-webkit-scrollbar-thumb { background: var(--sea-3); border: 2px solid var(--abyss); }
::-webkit-scrollbar-thumb:hover { background: var(--faint); }
input, textarea, select { caret-color: var(--gold); }

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 400;
  font-optical-sizing: auto;
  line-height: 1.04;
  margin: 0 0 0.5em;
  color: var(--bone);
  letter-spacing: -0.02em;
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); line-height: 1.12; }
p { margin: 0 0 1.1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }
a { color: var(--gold-soft); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 0.25em; text-decoration-thickness: 1px; }
img { max-width: 100%; display: block; }
strong { font-weight: 600; }
:focus-visible { outline: 1px solid var(--gold); outline-offset: 4px; }

.container { width: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto; }
.section { padding-block: var(--section); position: relative; }

.lead { font-size: var(--fs-lg); line-height: 1.55; color: var(--muted); max-width: 40rem; }
.statement {
  font-family: var(--display);
  font-size: clamp(1.6rem, 1.1rem + 1.8vw, 2.7rem);
  line-height: 1.22;
  letter-spacing: -0.015em;
  color: var(--bone);
  max-width: 30ch;
  margin: 0;
}
.statement em { font-style: italic; color: var(--gold-soft); }

/* Légende de carte : petites capitales espacées (libellés de champs, repères) */
.legend {
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 500;
  font-stretch: 112%;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--faint);
}

/* --------------------------------------------------------------------------
   Boutons et liens
   -------------------------------------------------------------------------- */
.btn {
  --btn-fg: var(--abyss);
  position: relative;
  display: inline-flex; align-items: center; gap: 0.7rem;
  color: var(--btn-fg);
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  isolation: isolate;
  text-decoration: none !important;
}
.btn::before {
  content: ""; position: absolute; z-index: -1;
}
.btn svg { width: 1.05em; height: 1.05em; flex: none; transition: transform 0.45s var(--ease); }
.btn:hover svg { transform: translateX(4px); }

/* --------------------------------------------------------------------------
   En-tête
   -------------------------------------------------------------------------- */
.header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  view-transition-name: site-header;
}
.header .container { display: flex; align-items: center; justify-content: space-between; gap: 2rem; }
main { padding-top: 0; }

.brand { display: inline-flex; align-items: center; color: var(--bone); text-decoration: none !important; }

.nav { display: flex; align-items: center; gap: 2.4rem; }
.nav a {
  position: relative;
  font: 500 0.8rem var(--sans);
  font-stretch: 110%;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text);
  padding-block: 0.4rem;
  white-space: nowrap;
  text-decoration: none !important;
  transition: color 0.3s;
}
.nav a:hover { color: var(--bone); }
.nav a[aria-current="page"] { color: var(--gold-soft); }
.nav__cta { display: none; }

.header__actions { display: flex; align-items: center; gap: 1rem; }

.nav-toggle {
  display: none; background: none; border: 1px solid var(--rule-strong);
  width: 2.8rem; height: 2.8rem; cursor: pointer; color: var(--bone);
}
.nav-toggle span { display: block; width: 18px; height: 1px; background: currentColor; margin: 4px auto; transition: transform 0.4s var(--ease), opacity 0.3s; }

@media (max-width: 1080px) { .nav { gap: 1.5rem; } }
@media (max-width: 920px) {
  .nav {
    flex-direction: column; align-items: stretch; gap: 0;
    visibility: hidden;
  }
  .nav.is-open { visibility: visible; }
  .nav a { font: 400 1.6rem var(--display); letter-spacing: -0.01em; text-transform: none; padding: 0.85rem 0; border-bottom: 1px solid var(--rule); color: var(--bone); }
  .nav-toggle { display: block; }
  .header__actions .btn { display: none; }
  .nav__cta { display: flex; padding-top: 1.25rem; }
  .nav .nav__cta .btn { display: inline-flex; flex: 1; justify-content: center; }
  body.nav-open .nav-toggle span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
  body.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
  body.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }
}

/* --------------------------------------------------------------------------
   Héros d'accueil
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex; flex-direction: column; justify-content: flex-end;
  background:
    linear-gradient(180deg, #0c1a33 0%, var(--sea) 100%);
  overflow: hidden;
  isolation: isolate;
}

.hero__inner { position: relative; padding-block: 9rem clamp(4rem, 9vh, 7rem); }
.hero h1 { max-width: 22ch; margin-bottom: 2.25rem; font-size: clamp(3rem, 1.4rem + 5.4vw, 6rem); line-height: 0.98; letter-spacing: -0.03em; }
.hero h1 .line { display: block; overflow: clip; padding-bottom: 0.2em; margin-bottom: -0.2em; }   /* jambages (p, g) entiers */
.hero h1 .line > span { display: inline-block; animation: rise 1.4s var(--ease) both; }
.hero h1 .line:nth-child(2) > span { animation-delay: 0.12s; }
.hero h1 .line:nth-child(3) > span { animation-delay: 0.24s; }
.hero h1 em { font-style: italic; color: var(--gold-soft); }
@keyframes rise { from { transform: translateY(125%); } to { transform: none; } }   /* départ sous la zone de rognage agrandie */

.hero__copy { display: grid; grid-template-columns: minmax(0, 30rem) minmax(0, 26rem); gap: 1.5rem 4rem; align-items: start; }
.hero__copy .lead { color: var(--text); margin: 0; }
.hero__approach { font-family: var(--display); font-style: italic; font-size: clamp(1.15rem, 1rem + 0.5vw, 1.45rem); line-height: 1.4; color: var(--gold-soft); margin: 0; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 2.75rem; }
@keyframes fade { from { opacity: 0; transform: translateY(0.75rem); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }

.hero__coords {
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  border-top: 1px solid var(--rule);
  padding-block: 1.25rem;
  position: relative;
}
.hero__coords span:last-child { padding-right: clamp(4rem, 9vw, 8rem); }
@media (max-width: 860px) {
  .hero__copy { grid-template-columns: 1fr; }
  .hero__coords span:last-child { display: none; }
}

/* --------------------------------------------------------------------------
   Héros des pages intérieures
   -------------------------------------------------------------------------- */
.page-hero { position: relative; overflow: hidden; isolation: isolate; }
.page-hero__body { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: 3rem; align-items: end; }
.page-hero h1 { font-size: clamp(2.3rem, 1.1rem + 5vw, 5.6rem); hyphens: manual; overflow-wrap: break-word; }
.page-hero .lead { color: var(--text); }
.page-hero__side { font-size: var(--fs-sm); color: var(--muted); }
.page-hero__side strong { display: block; font: 400 1.3rem var(--display); color: var(--bone); margin-bottom: 0.35rem; }
@media (max-width: 800px) { .page-hero__body { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   Route des trois phases (Anticipation → Protection → Pilotage)
   -------------------------------------------------------------------------- */
.approach__head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 3rem; align-items: end; }
@media (max-width: 860px) { .approach__head { grid-template-columns: 1fr; } }

.route { position: relative; }
.route__line { position: absolute; left: 0; right: 0; top: 0; height: 4.5rem; pointer-events: none; color: var(--gold); }
.route__line svg { width: 100%; height: 100%; overflow: visible; }
.route__line path { fill: none; stroke: currentColor; stroke-width: 1.2; stroke-dasharray: 6 7; }
.phases { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 clamp(2rem, 4vw, 4rem); position: relative; }
.phase { position: relative; }
.phases { z-index: 1; }
.phase__mark {
  position: absolute; top: 0;
  width: 4.5rem; height: 4.5rem;
  display: grid; place-items: center;
  background: var(--sea);
  border: 1px solid var(--rule-gold);
  border-radius: 50%;
  color: var(--gold);
}
.phase__mark::after { content: ""; position: absolute; inset: 5px; border: 1px dashed rgba(212,175,97,0.35); border-radius: 50%; }
.phase h3 { font-size: clamp(1.25rem, 1.05rem + 0.6vw, 1.55rem); margin-bottom: 1rem; }
.phase__why { font-family: var(--display); font-style: italic; font-size: 1.15rem; line-height: 1.45; color: var(--gold-soft); padding-bottom: 1.2rem; margin-bottom: 1.2rem; border-bottom: 1px solid var(--rule); }
.phase p:last-child { color: var(--muted); }
@media (max-width: 860px) {
  .route__line { display: none; }
  .phases { grid-template-columns: 1fr; gap: 3.5rem; border-left: 1px dashed var(--rule-gold); padding-left: 2.25rem; margin-left: 2.25rem; }
  .phase__mark { position: relative; margin: 0 0 1.5rem -4.55rem; }
}

/* --------------------------------------------------------------------------
   À propos : signature
   -------------------------------------------------------------------------- */
.signature { font-family: var(--display); font-weight: 400; font-size: clamp(1.9rem, 1.4rem + 2vw, 3rem); line-height: 1.05; color: var(--bone); margin: 0; letter-spacing: -0.01em; }
.signature-line { font-family: var(--display); font-style: italic; font-size: clamp(1.25rem, 1.05rem + 0.8vw, 1.7rem); line-height: 1.35; color: var(--gold-soft); margin: 0; }

/* --------------------------------------------------------------------------
   Bloc de clôture
   -------------------------------------------------------------------------- */
/* overflow: clip et non hidden : .closing ne devient pas un conteneur de défilement, sinon le balayage
   de son titre (animation-timeline: view()) reste figé à mi-course */
.closing { position: relative; overflow: hidden; overflow: clip; isolation: isolate; }
.closing .container { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2.5rem; align-items: end; }
.closing h2 { margin: 0; }
@media (max-width: 760px) { .closing .container { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   Formulaires
   -------------------------------------------------------------------------- */
.form { display: grid; gap: 1.6rem; }
.form__row { display: grid; gap: 1.6rem; }
.field { display: grid; gap: 0.35rem; position: relative; }
.field label, .rating legend { font: 500 0.72rem var(--sans); font-stretch: 112%; text-transform: uppercase; color: var(--faint); transition: color 0.3s; }
.field:focus-within label { color: var(--gold); }
.field input, .field select, .field textarea {
  font: 400 var(--fs-base) var(--sans);
  color: var(--bone);
  width: 100%;
}
.field select { cursor: pointer; }
.field select option { background: var(--sea); color: var(--bone); }
.field textarea { resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; }
.form__consent { display: flex; gap: 0.85rem; align-items: start; font-size: var(--fs-sm); color: var(--muted); }
.form__consent input { margin-top: 0.3rem; accent-color: var(--gold); width: 1rem; height: 1rem; flex: none; }
.form__note { font-size: var(--fs-xs); color: var(--faint); }
.form-success { font: 400 1.5rem/1.35 var(--display); color: var(--bone); animation: fade 0.9s var(--ease) both; }
.panel { padding: clamp(1.75rem, 4vw, 3rem); }

.rating { border: 0; padding: 0; margin: 0; }
.rating legend { margin-bottom: 0.5rem; padding: 0; }
.rating__stars { display: inline-flex; flex-direction: row-reverse; gap: 0.15rem; margin-left: -0.35rem; }
.rating__stars input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.rating__stars label { padding: 0.35rem; cursor: pointer; color: #5f769c; transition: color 0.2s, transform 0.4s var(--ease); }
.rating__stars label svg { width: 1.9rem; height: 1.9rem; display: block; fill: currentColor; }
.rating__stars label:hover, .rating__stars label:hover ~ label, .rating__stars input:checked ~ label { color: var(--gold); }
.rating__stars label:hover { transform: translateY(-2px) scale(1.08); }
.rating__stars input:focus-visible + label { outline: 1px solid var(--gold); outline-offset: 0; border-radius: 4px; }
.rating:has(input:user-invalid) legend { color: #d98a7a; }

/* --------------------------------------------------------------------------
   Contact
   -------------------------------------------------------------------------- */
.contact-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; }

/* --------------------------------------------------------------------------
   Mentions légales
   -------------------------------------------------------------------------- */
.legal { max-width: 46rem; margin-inline: auto; }
.legal h2 { font-size: clamp(1.6rem, 1.3rem + 1vw, 2.2rem); margin-top: 3.5rem; padding-top: 1.5rem; border-top: 1px solid var(--rule); scroll-margin-top: 7rem; }
.legal h3 { font-size: 1.25rem; margin-top: 1.75rem; }
.legal p { color: var(--muted); }
.info-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); margin-block: 1rem; }
.info-table th, .info-table td { text-align: left; padding: 0.95rem 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
.info-table th { width: 38%; font-weight: 500; color: var(--bone); padding-right: 1.5rem; }
.info-table td { color: var(--muted); }

/* --------------------------------------------------------------------------
   Pied de page
   -------------------------------------------------------------------------- */
.footer { color: var(--muted); font-size: var(--fs-sm); }
.footer a { color: var(--text); }
.footer a:hover { color: var(--gold-soft); }
.footer__top { display: grid; grid-template-columns: auto 1fr; gap: 2rem 4rem; align-items: end; padding-block: 4.5rem 3rem; border-bottom: 1px solid var(--rule); }
.footer__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2.5rem; padding-block: 3rem; }
.footer h4 { font: 500 0.7rem var(--sans); font-stretch: 112%; letter-spacing: 0.2em; text-transform: uppercase; color: var(--faint); margin-bottom: 1.1rem; }
.footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.6rem; }
.footer__bottom { border-top: 1px solid var(--rule); padding-block: 1.5rem 2rem; display: flex; justify-content: space-between; gap: 0.75rem 2rem; flex-wrap: wrap; font-size: var(--fs-xs); color: var(--faint); letter-spacing: 0.02em; }
@media (max-width: 920px) {
  .footer__top { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
}

/* --------------------------------------------------------------------------
   Anti-spam, accessibilité
   -------------------------------------------------------------------------- */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* --------------------------------------------------------------------------
   Mouvement piloté par le défilement (contenu visible par défaut)
   -------------------------------------------------------------------------- */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    /* Titres : une lumière passe de gauche à droite */
    .sweep {
      -webkit-mask-image: linear-gradient(100deg, #000 40%, rgba(0,0,0,0.12) 60%);
              mask-image: linear-gradient(100deg, #000 40%, rgba(0,0,0,0.12) 60%);
      -webkit-mask-size: 300% 100%; mask-size: 300% 100%;
      animation: sweep-mask linear both;
      animation-timeline: view();
      animation-range: entry 10% entry 18rem;
    }
    @keyframes sweep-mask { from { -webkit-mask-position: 100% 0; mask-position: 100% 0; } to { -webkit-mask-position: 0 0; mask-position: 0 0; } }
    /* La ligne des trois phases n'est plus liée au défilement : une lumière la parcourt (voir « Les trois phases » plus bas) */
  }
}

/* Transitions de vue entre pages */
::view-transition-old(root) { animation: 0.45s var(--ease) both vt-out; }
::view-transition-new(root) { animation: 0.7s var(--ease) both vt-in; }
@keyframes vt-out { to { opacity: 0; filter: blur(8px); } }
@keyframes vt-in { from { opacity: 0; filter: blur(8px); transform: translateY(1rem); } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}

/* ==========================================================================
   Revue de finition — gravure, légende de carte, mobile
   ========================================================================== */

/* Capitales Didone gravées, comme les titres d'une carte */
.engraved { font-family: var(--display); font-weight: 400; text-transform: uppercase; letter-spacing: 0.16em; line-height: 1.2; }

/* Premier écran mobile */
@media (max-width: 600px) {
  .hero__inner { padding-block: 6.5rem 1.25rem; }
  .hero h1 { font-size: clamp(2.35rem, 1.5rem + 5.2vw, 3rem); margin-bottom: 1.25rem; }
  .hero__copy { gap: 0.9rem; }
  .hero__copy .lead { font-size: 1rem; }
  .hero__approach { font-size: 1.02rem; padding-right: 3.5rem; }
  .hero__actions { margin-top: 1.5rem; }
  .hero__actions .btn { padding: 0.85rem 1.1rem; }
  .hero__coords { padding-block: 0.9rem; }
}

/* Mobile : la route des phases se trace à la verticale */
@media (max-width: 860px) {
  .phases::before { content: ""; position: absolute; left: -1px; top: 0; bottom: 0; width: 1px; background: var(--gold); transform-origin: top; }
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) and (max-width: 860px) {
    .phases::before { animation: trace-y linear both; animation-timeline: view(); animation-range: entry 20% exit 60%; }
    @keyframes trace-y { from { transform: scaleY(0); } to { transform: scaleY(1); } }
  }
}

/* Coordonnées du héros : un peu plus petites et moins espacées en mobile, chaque ligne tient sur la largeur d'un téléphone */
.hero__coords span { white-space: nowrap; }
@media (max-width: 600px) { .hero__coords { font-size: 0.68rem; letter-spacing: 0.06em; } }

/* Numéros de séquence des phases */
.phase__num { font: italic 400 1.5rem/1 var(--display); color: var(--gold-soft); letter-spacing: 0.02em; }
section[id] { scroll-margin-top: 5.5rem; }

/* Ajustements de mise en page */
.panel > h2 { font-size: var(--fs-h3); margin: 0; }
.legal .info-table + p { margin-top: 1.25rem; }

/* Mentions légales : sommaire collant à gauche, qui suit la lecture */
.legal-layout { display: grid; grid-template-columns: minmax(12rem, 15rem) minmax(0, 46rem); gap: clamp(2.5rem, 6vw, 6rem); align-items: start; }
.legal-layout .legal { margin: 0; max-width: none; }
.legal-layout .legal > h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.legal-toc { position: sticky; top: 7.5rem; }
.legal-toc .toc { list-style: none; margin: 0; padding: 0 0 0 1.1rem; display: grid; gap: 0; border-left: 1px solid var(--rule); }
.legal-toc .toc a {
  position: relative; display: block; padding: 0.55rem 0;
  font: 500 0.75rem var(--sans); font-stretch: 110%; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--faint); border: 0; text-decoration: none !important; transition: color 0.3s;
}
.legal-toc .toc a::before {
  content: ""; position: absolute; left: calc(-1.1rem - 1px); top: 0.35rem; bottom: 0.35rem; width: 1px;
  background: var(--gold); transform: scaleY(0); transition: transform 0.45s var(--ease);
}
.legal-toc .toc a:hover { color: var(--bone); }
.legal-toc .toc a[aria-current="true"] { color: var(--gold-soft); }
.legal-toc .toc a[aria-current="true"]::before { transform: scaleY(1); }
@media (max-width: 860px) {
  .legal-layout { grid-template-columns: 1fr; gap: 2rem; }
  .legal-toc { z-index: 5; margin-inline: calc(-1 * var(--gutter)); padding: 0.4rem var(--gutter); border-bottom: 1px solid var(--rule); }
  .legal-toc .toc { display: flex; gap: 1.5rem; overflow-x: auto; border-left: 0; padding: 0; scrollbar-width: none; }
  .legal-toc .toc a { white-space: nowrap; }
  .legal-toc .toc a::before { left: 0; right: 0; top: auto; bottom: 0.2rem; width: auto; height: 1px; transform: scaleX(0); }
  .legal-toc .toc a[aria-current="true"]::before { transform: scaleX(1); }
}

/* Page 404 : grand numéro au contour doré */
.hero__code {
  font: 400 clamp(6rem, 3rem + 14vw, 15rem)/0.8 var(--display);
  letter-spacing: -0.04em;
  color: transparent;
  -webkit-text-stroke: 1px var(--rule-gold);
  margin: 0 0 1.5rem;
  user-select: none;
}
.legal-layout > * { min-width: 0; }

/* ==========================================================================
   Menu : îlot de verre centré, pastille de lumière qui glisse,
   voile dégradé au défilement (plus de barre pleine), en-tête qui s'efface
   ========================================================================== */
.header { transition: transform 0.6s var(--ease); }
.header.is-hidden { transform: translateY(-110%); }
.header::before {
  content: ""; position: absolute; inset: 0 0 -3rem; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(8, 18, 34, 0.94) 0%, rgba(8, 18, 34, 0.7) 50%, rgba(8, 18, 34, 0));
  opacity: 0; transition: opacity 0.6s var(--ease-soft);
}
.header.is-scrolled::before { opacity: 1; }

.nav { position: relative; }
.nav a { display: inline-flex; }
.nav__label { position: relative; display: inline-block; }

/* Espace client : pilule fine, le cadenas s'ouvre au survol */
.header__client.btn {
  border-radius: 999px;
  padding: 0.8rem 1.25rem; gap: 0.6rem;
  font: 400 0.875rem / 1 var(--sans); font-stretch: 100%;
  letter-spacing: 0.01em; text-transform: none;
  border-color: rgba(232, 207, 149, 0.4);
  background: rgba(10, 22, 41, 0.35);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.header__client.btn::before { clip-path: none; opacity: 0; transition: opacity 0.5s var(--ease-soft); background: none; }
.header__client.btn:hover { color: var(--gold-soft); border-color: rgba(232, 207, 149, 0.75); }
.header__client.btn:hover::before { opacity: 1; }
.header__client.btn:hover svg { transform: none; }
.header__client svg { width: 0.9rem; height: 0.9rem; color: var(--gold-soft); }
.header__client svg path { transition: transform 0.45s var(--ease); transform-origin: 16px 10.5px; }
.header__client:hover svg path { transform: rotate(18deg) translateY(-1px); }

@media (min-width: 921px) {
  .header .container { display: grid; grid-template-columns: 1fr auto 1fr; height: 6rem; transition: height 0.5s var(--ease); }
  .header.is-scrolled .container { height: 4.9rem; }
  .header__actions { justify-self: end; }

  .nav {
    gap: 0.1rem; padding: 0.3rem;
    border: 1px solid rgba(236, 230, 216, 0.11);
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(31, 54, 96, 0.42), rgba(10, 22, 41, 0.42));
    -webkit-backdrop-filter: blur(18px) saturate(1.3); backdrop-filter: blur(18px) saturate(1.3);
    box-shadow: inset 0 1px 0 rgba(236, 230, 216, 0.06), 0 20px 40px -26px rgba(0, 0, 0, 0.9);
    transition: background 0.5s var(--ease-soft), border-color 0.5s var(--ease-soft);
  }
  .header.is-scrolled .nav { background: rgba(12, 26, 51, 0.8); border-color: rgba(236, 230, 216, 0.15); }
  .nav a {
    position: relative; z-index: 1;
    padding: 0.78rem 1.15rem;
    font: 400 0.875rem / 1 var(--sans); font-stretch: 100%;
    letter-spacing: 0.01em; text-transform: none;
    color: var(--muted);
    border-radius: 999px;
    transition: color 0.35s var(--ease-soft);
  }
  .nav a:hover, .nav a:focus-visible, .nav a[aria-current="page"] { color: var(--bone); }
  .nav a[aria-current="page"] .nav__label { color: inherit; }
  .nav a:focus-visible { outline-offset: -2px; }

  /* La pastille : verre clair, filet doré, un point de lumière dessous */
  .nav__beam {
    position: absolute; left: 0; top: 0.3rem; bottom: 0.3rem;
    width: var(--bwpx, 0px); height: auto;
    border-radius: 999px;
    background: rgba(236, 230, 216, 0.06);
    box-shadow: inset 0 0 0 1px rgba(232, 207, 149, 0.26);
    transform: translateX(var(--bx, 0));
    opacity: 0; pointer-events: none;
    transition: transform 0.6s var(--ease), width 0.6s var(--ease), opacity 0.4s var(--ease-soft);
  }
  .nav__beam::before {
    content: ""; position: absolute; left: 50%; bottom: 0.28rem;
    width: 4px; height: 4px; margin-left: -2px; border-radius: 50%;
    background: var(--gold-soft);
    transition: opacity 0.4s var(--ease-soft);
  }
  .nav.has-beam .nav__beam { opacity: 1; }
  .nav.is-roaming .nav__beam { box-shadow: inset 0 0 0 1px rgba(236, 230, 216, 0.14); }
  .nav.is-roaming .nav__beam::before { opacity: 0.35; }
}
@media (max-width: 1080px) and (min-width: 921px) {
  .nav a { padding-inline: 0.85rem; }
}

/* Mobile : menu plein écran, liens en cascade */
@media (max-width: 920px) {
  .nav__beam { display: none; }
  .header .container { height: 5rem; }
  .nav-toggle {
    width: 2.9rem; height: 2.9rem; border-radius: 50%;
    border: 1px solid rgba(232, 207, 149, 0.35);
    background: rgba(10, 22, 41, 0.4);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  }
  .nav-toggle span { width: 16px; margin: 4px auto; }
  .nav-toggle span:nth-child(2) { width: 10px; transform: translateX(3px); }
  .nav {
    position: fixed;
    inset: 0; height: 100dvh;
    justify-content: center;
    padding: 6.5rem var(--gutter) 2rem;
    border-bottom: 0;
    clip-path: circle(0% at calc(100% - 2.7rem) 2.5rem);
    transition: clip-path 0.8s var(--ease), visibility 0s linear 0.8s;
  }
  .nav.is-open { clip-path: circle(150% at calc(100% - 2.7rem) 2.5rem); transition: clip-path 0.8s var(--ease), visibility 0s; }
  .nav > a {
    align-items: baseline; gap: 1.1rem;
    font: 400 clamp(2rem, 1.4rem + 3vw, 2.7rem) / 1.15 var(--display);
    padding: 0.8rem 0;
    border-bottom: 1px solid transparent;
    border-image: linear-gradient(90deg, rgba(236, 230, 216, 0.14), rgba(236, 230, 216, 0)) 1;
    color: var(--bone);
    opacity: 0; transform: translateY(1.25rem);
    transition: opacity 0.5s var(--ease-soft), transform 0.7s var(--ease), color 0.3s;
  }
  .nav.is-open > a { opacity: 1; transform: none; transition-delay: calc(0.12s + var(--i, 0) * 0.06s); }
  .nav > a[aria-current="page"] { color: var(--gold-soft); font-style: italic; }
  .nav__cta { margin-top: auto; opacity: 0; transition: opacity 0.5s var(--ease-soft) 0.4s; }
  .nav.is-open .nav__cta { opacity: 1; }
  .nav .nav__cta .btn {
    border-radius: 999px; padding: 1rem 1.25rem;
    font: 400 0.95rem / 1 var(--sans); font-stretch: 100%; letter-spacing: 0.01em; text-transform: none;
    border: 1px solid rgba(232, 207, 149, 0.45);
  }
  body.nav-open { overflow: hidden; }
  body.nav-open .header { transform: none; transition: none; }
  body.nav-open .header::before { opacity: 0; }
  .header { z-index: 50; }
  .header .brand, .nav-toggle { position: relative; z-index: 2; }
}

@media (prefers-reduced-motion: reduce) {
  .nav__beam, .nav a, .header .container, .header::before { transition: none; }
}

/* Audit mobile : colonnes qui ne s'élargissent jamais au-delà de l'écran */
.contact-grid > * { min-width: 0; }
@media (max-width: 860px) { .contact-grid { grid-template-columns: minmax(0, 1fr); } }
.form { grid-template-columns: minmax(0, 1fr); }
.form__row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
@media (max-width: 600px) { .form__row { grid-template-columns: minmax(0, 1fr); } }
.field input, .field select, .field textarea { min-width: 0; }
@media (max-width: 380px) { .panel { padding: 1.25rem; } }

/* Audit mobile, vérification visuelle */
@media (max-width: 860px) {
  .legal h2 { scroll-margin-top: 9.5rem; }
}
@media (max-width: 600px) {
  .info-table th, .info-table td { display: block; width: auto; padding-right: 0; }
  .info-table th { padding-bottom: 0.1rem; border-bottom: 0; }
  .info-table td { padding-top: 0; }
}

/* ==========================================================================
   V3 — la route éclairée, bento, avis, parcours
   ========================================================================== */

/* Grain très léger sur tout le site : de la matière dans les aplats */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 100; pointer-events: none;
  opacity: 0.05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22180%22 height=%22180%22%3E%3Cfilter id=%22n%22%3E%3CfeTurbulence type=%22fractalNoise%22 baseFrequency=%220.85%22 numOctaves=%222%22 stitchTiles=%22stitch%22/%3E%3C/filter%3E%3Crect width=%22100%25%22 height=%22100%25%22 filter=%22url(%23n)%22/%3E%3C/svg%3E");
}

/* ---------- Héros : route de montagne la nuit ---------- */
.hero--road { background: #081327; }
.hero__shade {
  position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(8, 19, 39, 0.88) 0%, rgba(8, 19, 39, 0.6) 34%, rgba(8, 19, 39, 0) 62%),
    linear-gradient(0deg, rgba(15, 31, 58, 1) 0%, rgba(15, 31, 58, 0) 32%);
}
@media (max-width: 720px) {
  .hero__shade { background: linear-gradient(0deg, rgba(8, 19, 39, 0.95) 22%, rgba(8, 19, 39, 0.55) 62%, rgba(8, 19, 39, 0.1) 100%); }
}
.hero--road .hero__coords { align-items: center; }
@media (max-width: 860px) { .hero--road .hero__coords span:last-child { display: none; } }

/* ---------- Phases : cartes reliées par la route ---------- */
.phase { isolation: isolate; padding: 6.5rem 1.75rem 2.25rem; }
.phase::after {
  content: ""; position: absolute; inset: 2.25rem 0 0; z-index: -2;
  transition: border-color 0.5s var(--ease);
}
.phase__mark { left: 1.75rem; }
@media (max-width: 860px) {
  .phase { padding: 2rem 1.5rem 2rem; }
  .phase::after { inset: 0; }
  .phase__mark { left: auto; }
}

/* ---------- Bento ---------- */
.bento { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1rem; }
.tile {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; gap: 1rem;
  min-height: 13rem; padding: clamp(1.5rem, 3vw, 2.25rem);
  color: inherit; text-decoration: none !important;
}
.tile h3 { margin: 0; font-size: clamp(1.6rem, 1.2rem + 1.3vw, 2.35rem); }
.tile__go {
  margin-top: auto; align-self: flex-end;
  width: 2.8rem; height: 2.8rem; display: grid; place-items: center; flex: none;
  border: 1px solid var(--rule-strong); border-radius: 50%; color: var(--gold-soft);
  transition: background-color 0.45s var(--ease), color 0.45s, border-color 0.45s, transform 0.6s var(--ease);
}
.tile__go svg { width: 1.05rem; height: 1.05rem; }
a.tile:hover .tile__go { color: var(--abyss); transform: rotate(-45deg); }
@media (max-width: 900px) {
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .bento { grid-template-columns: minmax(0, 1fr); }
  .bento > * { grid-column: auto !important; }
}

/* ---------- Avis : bandeau en défilement continu ---------- */
.marquee {
  overflow: hidden; padding-block: 0.5rem;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.marquee__track { display: flex; gap: 1.25rem; width: max-content; animation: marquee 70s linear infinite; }
@media (hover: hover) { .marquee:hover .marquee__track { animation-play-state: paused; } }
@keyframes marquee { to { transform: translateX(calc(-50% - 0.625rem)); } }
.review {
  width: min(25rem, 82vw); margin: 0; flex: none;
  display: flex; flex-direction: column; gap: 1.1rem;
  padding: 1.75rem;
}
.review__stars { display: flex; gap: 0.2rem; }
.review__stars svg { width: 0.95rem; height: 0.95rem; fill: var(--gold); }
.review blockquote { margin: 0; flex: 1; font: italic 400 1.12rem / 1.5 var(--display); color: var(--bone); }
.review figcaption { border-top: 1px solid var(--rule); padding-top: 0.9rem; font-size: var(--fs-sm); }
.review figcaption strong { display: block; color: var(--bone); font-weight: 500; }
.review figcaption span { color: var(--muted); }
.review-cta {
  display: flex; flex-wrap: wrap; align-items: center;
}
.review-write .form--wide { max-width: 48rem; margin-inline: auto; }

/* ---------- À propos : bento ---------- */
.bento--about .tile--sig { grid-column: span 4; grid-row: span 2; justify-content: flex-end; }
.bento--about .tile--sig .signature { font-size: clamp(2.4rem, 1.6rem + 3vw, 4.2rem); margin: 0; }
.bento--about .tile--fact { grid-column: span 2; }
.bento--about .tile--fact h3 { font-size: clamp(1.3rem, 1.1rem + 0.7vw, 1.7rem); }
.bento--about .tile--fact p { margin: 0; color: var(--muted); }
@media (max-width: 900px) {
  .bento--about .tile--sig { grid-column: span 2; grid-row: auto; }
  .bento--about .tile--fact { grid-column: span 1; }
}

/* ---------- Contact : tuiles ---------- */
.contact-tiles { display: grid; gap: 1rem; align-content: start; }
.ctile { min-height: 0; gap: 0.6rem; }
.ctile__value { font: 400 clamp(1.3rem, 1.05rem + 1vw, 1.9rem) / 1.2 var(--display); color: var(--bone); overflow-wrap: anywhere; padding-right: 3.5rem; }
.ctile .tile__go { position: absolute; top: 50%; right: clamp(1.25rem, 3vw, 2rem); margin: 0; transform: translateY(-50%); }
a.ctile:hover .tile__go { transform: translateY(-50%) rotate(-45deg); }

/* ---------- Apparitions pilotées par le défilement ---------- */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .bento > *, .phase, .review-cta {
      animation: rise-in linear both; animation-timeline: view(); animation-range: entry 0% entry 55%;
    }
    .bento > :nth-child(2), .phase:nth-child(2) { animation-range: entry 8% entry 63%; }
    .bento > :nth-child(3), .phase:nth-child(3) { animation-range: entry 16% entry 71%; }
    @keyframes rise-in { from { opacity: 0; transform: translateY(2.5rem) scale(0.98); } to { opacity: 1; transform: none; } }
  }
}
@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; }
  .marquee { overflow-x: auto; }
  /* sans boucle, les copies du bandeau feraient apparaître chaque avis deux fois */
  .marquee .review[aria-hidden="true"] { display: none; }
}
@media (min-width: 721px) { .hero__shade { background: linear-gradient(90deg, rgba(8, 19, 39, 0.72) 0%, rgba(8, 19, 39, 0.38) 42%, rgba(8, 19, 39, 0) 64%), linear-gradient(0deg, rgba(15, 31, 58, 1) 0%, rgba(15, 31, 58, 0) 26%); } }

/* ==========================================================================
   Verre liquide (v4) : surfaces translucides, reflets, coins arrondis,
   boutons en pilule. Couche finale : elle prime sur les styles précédents.
   ========================================================================== */
:root {
  --r-xl: 28px;
  --r-lg: 22px;
  --r-md: 14px;
  --pill: 999px;
  --glass-tint: rgba(22, 42, 80, 0.34);
  --glass-sheen: linear-gradient(140deg, rgba(255, 255, 255, 0.085) 0%, rgba(255, 255, 255, 0.022) 32%, rgba(255, 255, 255, 0.012) 62%, rgba(255, 255, 255, 0.05) 100%);
  --glass-border: rgba(255, 255, 255, 0.1);
  --glass-rim: inset 0 1px 0 rgba(255, 255, 255, 0.16), inset 0 -1px 0 rgba(255, 255, 255, 0.035), inset 1px 0 0 rgba(255, 255, 255, 0.04);
  --glass-drop: 0 30px 60px -32px rgba(0, 0, 0, 0.85);
  --glass-blur: blur(22px) saturate(1.55);
}

/* Lueurs d'ambiance derrière les sections, pour que le verre ait quelque chose à réfracter */
.section { isolation: isolate; }

/* ---------- Surfaces de verre ---------- */
.tile, .review, .cv__panel, .panel, .phase::after, .closing__glass {
  border: 1px solid var(--glass-border);
  background: var(--glass-sheen), var(--glass-tint);
  box-shadow: var(--glass-rim), var(--glass-drop);
}
.tile, .phase::after, .closing__glass { border-radius: var(--r-xl); }
.review, .cv__panel, .panel { border-radius: var(--r-lg); }
.tile { transition: transform 0.7s var(--ease), border-color 0.5s var(--ease), box-shadow 0.6s var(--ease); }
a.tile:hover { transform: translateY(-4px) scale(1.005); box-shadow: var(--glass-rim), 0 40px 70px -34px rgba(0, 0, 0, 0.95); }
.phase:hover::after { border-color: rgba(232, 207, 149, 0.4); }

/* Pastilles */
.cv__where {
  border-radius: var(--pill);
  border: 1px solid rgba(232, 207, 149, 0.32);
  background: rgba(255, 255, 255, 0.05);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.cv__where { padding: 0.35rem 0.85rem; letter-spacing: 0.08em; }

/* Flèche ronde des tuiles : bulle de verre */
.tile__go {
  border-color: rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
a.tile:hover .tile__go { background: linear-gradient(180deg, #edd8a6, var(--gold)); border-color: rgba(255, 255, 255, 0.4); }

/* ---------- Boutons ---------- */
.btn {
  border-radius: var(--pill);
  padding: 1rem 1.55rem;
  font: 500 0.95rem / 1 var(--sans); font-stretch: 100%;
  letter-spacing: 0.005em; text-transform: none;
  background: linear-gradient(180deg, #ecd6a2 0%, var(--gold) 55%, #c79f50 100%);
  border: 1px solid rgba(255, 244, 214, 0.55);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), inset 0 -2px 6px rgba(110, 72, 18, 0.25);
  transition: transform 0.45s var(--ease), box-shadow 0.45s var(--ease), border-color 0.4s, color 0.4s, background-color 0.4s;
}
.btn::before {
  clip-path: none; inset: 0 0 50% 0; border-radius: inherit;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0));
  opacity: 0.55; transition: opacity 0.45s var(--ease-soft);
}
.btn:hover::before { clip-path: none; opacity: 1; }
.btn:hover { transform: translateY(-2px); border-color: rgba(255, 244, 214, 0.8); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), inset 0 -2px 6px rgba(110, 72, 18, 0.25); }
.btn:active { transform: translateY(0) scale(0.98); }
.btn--line {
  color: var(--bone);
  background: var(--glass-sheen), rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.16);
  -webkit-backdrop-filter: blur(18px) saturate(1.5); backdrop-filter: blur(18px) saturate(1.5);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 14px 30px -18px rgba(0, 0, 0, 0.8);
}
.btn--line::before { inset: 0; opacity: 0; background: none; }
.btn--line:hover { color: var(--gold-soft); border-color: rgba(232, 207, 149, 0.5); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 18px 34px -18px rgba(0, 0, 0, 0.9); }
.btn--line:hover::before { opacity: 1; }
.btn--sm { padding: 0.75rem 1.15rem; font-size: 0.875rem; }
.header__client.btn { transform: none; }
.header__client.btn:hover { transform: none; }

/* ---------- Formulaires : champs de verre ---------- */
.field label, .rating legend { letter-spacing: 0.14em; }
.field input, .field select, .field textarea {
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.04);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  padding: 0.85rem 1rem;
  transition: border-color 0.3s, box-shadow 0.3s, background-color 0.3s;
}
.field textarea { min-height: 9rem; }
.field select {
  appearance: none; -webkit-appearance: none; padding-right: 2.6rem;
  background: rgba(255, 255, 255, 0.04) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e8cf95' stroke-width='1.6'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 1rem center / 1rem;
}
.field input:hover, .field select:hover, .field textarea:hover { border-color: rgba(255, 255, 255, 0.2); }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: rgba(232, 207, 149, 0.6);
  background-color: rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 0 0 4px rgba(232, 207, 149, 0.12);
}
.field input:user-invalid, .field textarea:user-invalid { border-color: #d98a7a; }
.form__consent input { border-radius: 4px; }
.form-success { border-top: 0; border-radius: var(--r-lg); padding: 1.5rem 1.75rem; background: rgba(232, 207, 149, 0.08); border: 1px solid rgba(232, 207, 149, 0.3); }

/* Bloc de clôture : une grande carte de verre */
.closing .container { padding-block: 0; }
.closing__glass { padding: clamp(2rem, 5vw, 4rem); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2.5rem; align-items: end; }
@media (max-width: 760px) { .closing__glass { grid-template-columns: 1fr; } }

/* Mentions légales : sommaire de verre */
@media (min-width: 861px) {
  .legal-toc .toc {
    padding: 1rem 1.25rem; border: 1px solid var(--glass-border); border-radius: var(--r-lg);
    background: var(--glass-sheen), var(--glass-tint);
    -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
    box-shadow: var(--glass-rim);
  }
  .legal-toc .toc a::before { left: -1.25rem; border-radius: 2px; }
}
@media (max-width: 860px) {
  .legal-toc { top: 5rem; background: rgba(10, 22, 41, 0.6); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border-bottom-color: var(--glass-border); }
}

/* Menu mobile : voile de verre, assez opaque pour rester lisible là où le flou n'est pas pris en charge */
@media (max-width: 920px) {
  .nav {
    background: radial-gradient(ellipse 70% 50% at 0% 0%, rgba(64, 104, 182, 0.22), transparent 70%), rgba(9, 20, 38, 0.94);
    -webkit-backdrop-filter: blur(30px) saturate(1.6); backdrop-filter: blur(30px) saturate(1.6);
  }
}

@media (prefers-reduced-transparency: reduce) {
  .tile, .review, .cv__panel, .panel, .phase::after, .closing__glass, .btn--line { -webkit-backdrop-filter: none; backdrop-filter: none; background-color: var(--sea-2); }
}

/* Titres : largeurs adaptées à Book Antiqua */
.closing h2 { max-width: 20ch; font-size: clamp(2.1rem, 1.3rem + 2.8vw, 3.9rem); }
.page-hero h1 { max-width: 18ch; }

/* Vérification humaine (formulaire d'avis) */
.field--captcha label { text-transform: none; letter-spacing: 0.02em; font: 400 0.95rem var(--sans); color: var(--text); }
.captcha__q { font: italic 400 1.2rem var(--display); color: var(--gold-soft); white-space: nowrap; }
.captcha__row { display: flex; gap: 0.75rem; align-items: center; }
.captcha__row input { max-width: 8rem; text-align: center; font-variant-numeric: tabular-nums; }
.captcha__new {
  background: none; border: 0; padding: 0.4rem 0; min-height: 2.75rem; cursor: pointer;
  font: 400 0.85rem var(--sans); color: var(--muted); text-decoration: underline; text-underline-offset: 3px;
}
.captcha__new:hover { color: var(--gold-soft); }

/* ==========================================================================
   Hero en carte : uniquement le hero, posé sous le menu, à la taille de
   l'écran ; le reste du site reste en pleine largeur
   ========================================================================== */
.hero--road {
  --hc-inset: clamp(8px, 1.1vw, 16px);
  border-radius: clamp(18px, 2vw, 30px);
  border: 1px solid rgba(255, 255, 255, 0.09);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 30px 60px -30px rgba(0, 0, 0, 0.7);
}

/* Textes du hero : l'un sous l'autre, l'approche en citation avec un filet doré */
.hero--road .hero__copy { display: grid; grid-template-columns: minmax(0, 40rem); gap: 1.4rem; }
.hero--road .hero__approach {
  position: relative; padding-left: 1.4rem;
  font-size: clamp(1.2rem, 1.05rem + 0.55vw, 1.55rem);
}
.hero--road .hero__approach::before {
  content: ""; position: absolute; left: 0; top: 0.2em; bottom: 0.2em; width: 1px;
  background: linear-gradient(var(--gold-soft), rgba(232, 207, 149, 0.15));
}
/* La carte du hero part du haut : même marge en haut, en bas et sur les côtés ; le menu flotte dedans */
.hero--road { margin: var(--hc-inset) var(--hc-inset) 0; min-height: calc(100svh - 2 * var(--hc-inset)); }
.hero--road .hero__inner { padding-top: clamp(6.5rem, 13vh, 9rem); padding-bottom: clamp(2.5rem, 7vh, 4.5rem); }
.hero--road h1 { font-size: clamp(2.6rem, min(1.3rem + 4.3vw, 8.4vh), 4.9rem); margin-bottom: clamp(1.25rem, 3vh, 2.25rem); }
.hero--road .hero__actions { margin-top: clamp(1.5rem, 3.5vh, 2.25rem); }
@media (max-width: 920px) and (max-height: 760px) {
  .hero--road .hero__inner { padding-top: 5.75rem; }
  .hero--road .hero__copy { gap: 1rem; }
  .hero--road .hero__approach { font-size: 1.1rem; }
  .hero--road .hero__coords { padding-block: 0.9rem; }
}

/* ==========================================================================
   Fond continu : plus de bandes de couleur intermédiaires entre sections.
   Un seul bleu nuit pour toute la page, quelques lueurs très douces fixées
   à l'écran (elles ne s'arrêtent jamais au bord d'une section), pas de filets.
   ========================================================================== */
/* Pas de barre au-dessus de la carte du hero : la marge haute ne déborde plus
   du corps de page, le fond est le même partout, et la lueur bleue est
   descendue sous la carte pour ne plus éclairer la marge du haut */
html { background: var(--sea); }
main { display: flow-root; }
body {
  background:
    radial-gradient(60rem 42rem at 8% 70%, rgba(64, 104, 182, 0.12), transparent 70%),
    radial-gradient(52rem 38rem at 94% 92%, rgba(232, 207, 149, 0.05), transparent 70%),
    var(--sea);
  background-attachment: fixed;
}

/* Invitation à écrire un avis : du texte simple sous les avis, sans carte */
.review-cta {
  border: 0; border-radius: 0; background: none; box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  padding: 0; justify-content: flex-start; gap: 1rem 2rem;
  margin-top: clamp(2rem, 4vw, 3rem);
}

/* Marge intérieure des cartes (hero, en-têtes des pages, pied de page) : le contenu du hero
   s'aligne sur ce bord, comme le menu */
:root { --hc-pad: clamp(1.25rem, 3vw, 2.75rem); }
.hero--road > .container { width: auto; max-width: none; margin-inline: var(--hc-pad); }
.hero--road .hero__coords span:last-child { padding-right: 0; }

/* Pied de page en carte : même fond et même liseré que la carte du hero,
   en retrait sur les côtés, seuls les coins du haut sont arrondis */
.footer {
  margin: clamp(2rem, 5vw, 4rem) clamp(8px, 1.1vw, 16px) 0;
  border-radius: clamp(18px, 2vw, 30px) clamp(18px, 2vw, 30px) 0 0;
  background: #081327;
  border: 1px solid rgba(255, 255, 255, 0.09); border-bottom: 0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 -24px 50px -30px rgba(0, 0, 0, 0.6);
  overflow: hidden;
}

/* Toutes les pages : menu étiré sur les mêmes bords que les cartes (hero et pied de page),
   contenu du pied de page aligné sur la marge intérieure de sa carte */
.header .container {
  width: auto; max-width: none;
  margin-inline: calc(clamp(8px, 1.1vw, 16px) + var(--hc-pad));
}
.footer > .container { width: auto; max-width: none; margin-inline: var(--hc-pad); }

/* ==========================================================================
   Parcours : la section garde la largeur du contenu (le parcours vertical est en fin de fichier)
   ========================================================================== */
.parcours__viewport { width: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto; }

/* ==========================================================================
   En-têtes des pages intérieures : une carte assortie au hero de l'accueil
   (même fond, même liseré, même marge), avec la photo de la montagne en
   plus discret ; le menu flotte dedans, le titre se pose en bas à gauche
   ========================================================================== */
.page-hero {
  margin: clamp(8px, 1.1vw, 16px) clamp(8px, 1.1vw, 16px) 0;
  display: flex; flex-direction: column; justify-content: flex-end;
  border-radius: clamp(18px, 2vw, 30px);
  background: #081327;
  border: 1px solid rgba(255, 255, 255, 0.09);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 30px 60px -30px rgba(0, 0, 0, 0.7);
}
.page-hero__shade {
  position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(8, 19, 39, 0.82) 0%, rgba(8, 19, 39, 0.45) 45%, rgba(8, 19, 39, 0.1) 75%),
    linear-gradient(0deg, rgba(8, 19, 39, 0.85) 0%, rgba(8, 19, 39, 0) 45%);
}
.page-hero > .container { width: auto; max-width: none; margin-inline: var(--hc-pad); }
.page-hero__body { padding-bottom: clamp(2rem, 5vh, 3.25rem); }
.page-hero h1 { margin-bottom: 1rem; }
.page-hero .lead { margin: 0; }
.page-hero__side {
  align-self: end; padding: 1.1rem 1.25rem; border: 1px solid rgba(232, 207, 149, 0.28);
  border-radius: var(--r-lg); background: rgba(255, 255, 255, 0.04);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}

/* ==========================================================================
   Nos services : explorateur interactif (onglets + panneau de verre)
   Sans JS, les quatre panneaux s'affichent les uns sous les autres.
   ========================================================================== */
.svx { display: grid; grid-template-columns: minmax(16rem, 5fr) minmax(0, 7fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: start; }
.svx__tabs { position: relative; display: grid; gap: 0.35rem; }
.svx__tab {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 3rem 1fr; align-items: center; gap: 0.75rem;
  width: 100%; padding: 1.25rem 1.25rem 1.25rem 1rem; text-align: left;
  background: none; border: 0; border-radius: var(--r-lg); cursor: pointer;
  color: var(--muted); font: inherit;
  transition: color 0.4s var(--ease-soft);
}
.svx__tab:hover, .svx__tab[aria-selected="true"] { color: var(--bone); }
.svx__tab:focus-visible { outline: 1px solid var(--gold); outline-offset: 2px; }
.svx__no { font: italic 400 1.5rem / 1 var(--display); color: rgba(232, 207, 149, 0.45); transition: color 0.4s; }
.svx__tab[aria-selected="true"] .svx__no { color: var(--gold-soft); }
.svx__name { font: 400 clamp(1.35rem, 1.05rem + 1vw, 1.95rem) / 1.15 var(--display); }
/* la pastille de verre qui glisse derrière l'onglet actif */
.svx__glow {
  position: absolute; left: 0; right: 0; top: 0; height: var(--gh, 0px); z-index: 0;
  transform: translateY(var(--gy, 0px)); opacity: 0; pointer-events: none;
  border-radius: var(--r-lg);
  background: var(--glass-sheen), var(--glass-tint);
  border: 1px solid rgba(232, 207, 149, 0.3);
  box-shadow: var(--glass-rim), 0 20px 40px -26px rgba(0, 0, 0, 0.9);
  transition: transform 0.6s var(--ease), height 0.6s var(--ease), opacity 0.4s;
}
.svx.is-ready .svx__glow { opacity: 1; }

.svx__panels { display: grid; gap: 1.25rem; }
.svx__panel {
  position: relative; isolation: isolate; overflow: hidden;
  padding: clamp(1.75rem, 3.5vw, 3rem);
  border: 1px solid var(--glass-border); border-radius: var(--r-xl);
  background: var(--glass-sheen), var(--glass-tint);
  box-shadow: var(--glass-rim), var(--glass-drop);
}
.svx__panel h2 { margin: 0 0 clamp(1.5rem, 3vw, 2.25rem); font-size: clamp(2rem, 1.4rem + 2vw, 3.2rem); }
.svx__list { list-style: none; margin: 0; padding: 0; display: grid; }
.svx__list li {
  position: relative; display: block;
  padding: 1rem 0; border-top: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--text); font-size: var(--fs-lg);
  transition: color 0.3s, padding-left 0.45s var(--ease);
}
.svx__list li:last-child { border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.svx__list li::after {
  content: ""; position: absolute; left: 0; bottom: -1px; height: 1px; width: 100%;
  background: linear-gradient(90deg, var(--gold), rgba(232, 207, 149, 0));
  transform: scaleX(0); transform-origin: left; transition: transform 0.6s var(--ease);
}
@media (hover: hover) {
  .svx__list li:hover { color: var(--bone); padding-left: 0.5rem; }
  .svx__list li:hover::after { transform: scaleX(1); }
}

/* Le JS gère les onglets : un seul panneau visible, avec une entrée animée */
.svx.is-ready .svx__panels { display: block; }
.svx.is-ready .svx__panel[hidden] { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .svx.is-ready .svx__panel.is-entering { animation: svx-in 0.7s var(--ease) both; }
  .svx.is-ready .svx__panel.is-entering .svx__list li { animation: svx-item 0.7s var(--ease) both; animation-delay: calc(0.12s + var(--i) * 0.07s); }
  @keyframes svx-in { from { opacity: 0; transform: translateY(14px) scale(0.985); } to { opacity: 1; transform: none; } }
  @keyframes svx-item { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: none; } }
}

@media (max-width: 860px) {
  .svx { grid-template-columns: 1fr; }
  .svx__tabs { grid-auto-flow: column; grid-auto-columns: max-content; overflow-x: auto; scrollbar-width: none; margin-inline: calc(-1 * var(--gutter)); padding: 0.25rem var(--gutter); }
  .svx__tabs::-webkit-scrollbar { display: none; }
  .svx__tab { grid-template-columns: auto auto; padding: 0.75rem 1rem; gap: 0.5rem; border-radius: var(--pill); }
  .svx__name { font-size: 1.1rem; white-space: nowrap; }
  .svx__no { font-size: 1.1rem; }
  .svx__glow { display: none; }
  .svx__tab[aria-selected="true"] { background: var(--glass-sheen), var(--glass-tint); box-shadow: inset 0 0 0 1px rgba(232, 207, 149, 0.35); }
  .svx__list li { font-size: var(--fs-base); }
}

/* ==========================================================================
   Rythme vertical unifié : un seul intervalle entre deux blocs, qu'il
   s'agisse de sections, du bloc de clôture ou des cartes d'en-tête
   ========================================================================== */
:root { --section: clamp(4rem, 7.5vw, 7rem); }
.section + .section { padding-top: 0; }
.approach__head { margin-bottom: clamp(2.25rem, 4.5vw, 4rem); }
.closing .container { margin-block: 0; }
.section + .closing { margin-top: 0; }
.footer { margin-top: var(--section); }
main:not(:has(.closing)) ~ .footer { margin-top: 0; }

@media (max-width: 860px) {
  .svx__tabs { -webkit-mask-image: linear-gradient(90deg, transparent, #000 1.25rem, #000 calc(100% - 2.5rem), transparent); mask-image: linear-gradient(90deg, transparent, #000 1.25rem, #000 calc(100% - 2.5rem), transparent); }
}

/* À propos : portrait dans la carte « Votre interlocuteur », fondu dans le verre */
.bento--about .tile--sig { min-height: clamp(24rem, 34vw, 30rem); }
.tile__portrait {
  position: absolute; z-index: -1; top: 0; right: 0; bottom: 0;
  width: min(62%, 30rem); height: 100%;
  object-fit: cover; object-position: 50% 0%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 42%), linear-gradient(0deg, transparent 0%, #000 30%);
  -webkit-mask-composite: source-in;
          mask-image: linear-gradient(90deg, transparent 0%, #000 42%), linear-gradient(0deg, transparent 0%, #000 30%);
          mask-composite: intersect;
  opacity: 0.92;
  transition: transform 1.2s var(--ease), opacity 0.6s;
}
@media (hover: hover) { .tile--sig:hover .tile__portrait { transform: scale(1.025); opacity: 1; } }
.bento--about .tile--sig .legend, .bento--about .tile--sig .signature, .bento--about .tile--sig .signature-line { position: relative; max-width: 60%; }
@media (max-width: 600px) {
  .bento--about .tile--sig { min-height: 26rem; }
  .tile__portrait { width: 100%; -webkit-mask-image: linear-gradient(0deg, transparent 8%, #000 60%); mask-image: linear-gradient(0deg, transparent 8%, #000 60%); }
  .bento--about .tile--sig .legend, .bento--about .tile--sig .signature, .bento--about .tile--sig .signature-line { max-width: none; }
}

/* Nos services : un seul « Nous contacter », sous la liste des services */
.svx__side { display: grid; gap: 1.75rem; align-content: start; }
.svx__cta { justify-self: start; margin-left: 1rem; }

/* Page 404 : même carte que le hero de l'accueil, grand « 404 » au contour doré */
.hero--404 .hero__code {
  font-size: clamp(6rem, 3rem + 12vw, 13rem);
  -webkit-text-stroke: 1px rgba(232, 207, 149, 0.55);
  margin-bottom: clamp(1rem, 3vh, 2rem);
}

/* ==========================================================================
   Retours du client (16/10/2026, document « Site internet »)
   ========================================================================== */

/* L'approche : la phrase d'introduction au même niveau que les trois phases */
.statement--plain { max-width: none; }
.approach__head:has(.statement--plain) { grid-template-columns: minmax(0, 1fr); }

/* Votre interlocuteur en grand, « Voir nos services » en bandeau dans son coin */
.duo { position: relative; }
.duo__person {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  min-height: clamp(24rem, 38vw, 32rem);
  border: 1px solid var(--glass-border); border-radius: var(--r-xl);
  background: var(--glass-sheen), var(--glass-tint);
  box-shadow: var(--glass-rim), var(--glass-drop);
  color: var(--bone); text-decoration: none !important;
}
.duo__img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 15%; transition: transform 1.2s var(--ease); }
@media (hover: hover) { .duo__person:hover .duo__img { transform: scale(1.03); } }
.duo__txt { display: grid; align-content: start; gap: 0.75rem; padding: clamp(1.75rem, 4vw, 3.5rem) 5.5rem clamp(1.75rem, 4vw, 3.5rem) clamp(1.75rem, 4vw, 3.5rem); }
.duo__name { font: 400 clamp(2.4rem, 1.5rem + 3vw, 4.4rem) / 1.02 var(--display); letter-spacing: -0.02em; }
.duo__role { font-size: var(--fs-lg); color: var(--muted); }
.duo__person > .tile__go { position: absolute; top: clamp(1.25rem, 2.5vw, 2rem); right: clamp(1.25rem, 2.5vw, 2rem); margin: 0; }
.duo__services {
  position: absolute; right: 0; bottom: 0; z-index: 1;
  width: clamp(17rem, 34%, 25rem);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: clamp(1.1rem, 2vw, 1.6rem) clamp(1.25rem, 2.5vw, 2rem);
  border: 1px solid rgba(232, 207, 149, 0.3); border-radius: var(--r-lg) 0 var(--r-xl) 0;
  background: linear-gradient(165deg, rgba(31, 54, 96, 0.96), rgba(12, 26, 51, 0.98));
  color: var(--bone); text-decoration: none !important;
}
.duo__label { font: 400 clamp(1.3rem, 1.05rem + 0.8vw, 1.8rem) / 1.1 var(--display); }
.duo__services .tile__go { margin: 0; align-self: center; }
.duo__person:hover > .tile__go, .duo__services:hover .tile__go { background: linear-gradient(180deg, #edd8a6, var(--gold)); color: var(--abyss); border-color: rgba(255, 255, 255, 0.4); transform: rotate(-45deg); }
@media (max-width: 760px) {
  .duo__person { grid-template-columns: 1fr; min-height: 0; }
  .duo__img { height: 15rem; }
  .duo__txt { padding: 1.5rem 4.5rem 1.75rem 1.5rem; }
  .duo__services { position: static; width: auto; margin-top: 0.85rem; border-radius: var(--r-xl); }
}

/* Avis : deux flèches pour parcourir les commentaires plus vite */
.rv-nav { justify-self: end; display: flex; gap: 0.6rem; }
.rv-nav__btn {
  width: 3rem; height: 3rem; display: grid; place-items: center; padding: 0; cursor: pointer;
  border: 1px solid var(--rule-strong); border-radius: 50%;
  background: var(--glass-sheen), var(--glass-tint); color: var(--gold-soft);
  transition: background-color 0.45s var(--ease), color 0.45s, border-color 0.45s;
}
.rv-nav__btn svg { width: 1.1rem; height: 1.1rem; }
@media (hover: hover) { .rv-nav__btn:hover { background: linear-gradient(180deg, #edd8a6, var(--gold)); color: var(--abyss); border-color: rgba(255, 255, 255, 0.4); } }
.rv-nav__btn:focus-visible { outline: 1px solid var(--gold); outline-offset: 3px; }
@media (max-width: 860px) { .rv-nav { justify-self: start; } }

/* Titres au balayage : le masque couvre aussi les jambages (p, g) */
.sweep { padding-bottom: 0.2em; margin-bottom: -0.2em; }

/* En-têtes des pages intérieures : moins hauts, introduction sur toute la largeur */
.page-hero { min-height: clamp(20rem, 48svh, 30rem); }
.page-hero__body { padding-top: 6.5rem; }
.page-hero__body:not(:has(.page-hero__side)) { grid-template-columns: minmax(0, 1fr); }
.page-hero .lead { max-width: none; font-size: 1.125rem; }
@media (max-width: 920px) { .page-hero { min-height: clamp(18rem, 42svh, 26rem); } }

/* Contact : le titre tient sur une ligne */
.page-hero__body--stack { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
.page-hero h1.page-hero__oneline { max-width: none; margin-bottom: 0; font-size: clamp(2.2rem, 0.9rem + 3.1vw, 4.6rem); }
@media (min-width: 801px) { .page-hero__oneline { white-space: nowrap; } }

/* Nos services : plus de compteurs ni de numéros, un cinquième volet en texte */
.svx__text { display: grid; gap: 1rem; max-width: 40rem; }
.svx__text p { margin: 0; font-size: var(--fs-base); line-height: 1.6; color: var(--text); }
@media (max-width: 600px) { .hero--road .hero__approach { padding-right: 0; } }

/* Votre interlocuteur : la biographie de Thomas Druart sous son nom (texte du client, une phrase
   par ligne comme dans son document) ; la carte n'est plus un lien, seule la flèche mène à À propos */
.duo__txt { padding-bottom: clamp(7rem, 9vw, 8.5rem); }
.duo__bio { display: grid; gap: 0.6rem; max-width: 42rem; margin-top: clamp(1.5rem, 3.5vw, 2.5rem); padding-top: clamp(1.25rem, 3vw, 2rem); border-top: 1px solid rgba(232, 207, 149, 0.28); }
.duo__title { margin: 0 0 0.5rem; font: italic 400 clamp(1.3rem, 1.05rem + 0.8vw, 1.75rem) / 1.3 var(--display); letter-spacing: 0; color: var(--gold-soft); }
.duo__bio-text { display: grid; gap: 0.6rem; }
.duo__bio-text p { margin: 0; font-size: var(--fs-base); line-height: 1.6; color: var(--text); }
.duo__bio-text p:last-child { margin-top: 0.4rem; font: italic 400 1.25rem / 1.4 var(--display); color: var(--gold-soft); }
.duo__person > a.tile__go:focus-visible { outline: 1px solid var(--gold); outline-offset: 3px; }
/* Avec JavaScript, la carte garde sa taille : le début du texte en fondu, puis « Lire la suite » */
.duo__bio.is-clamped { gap: 0.5rem; margin-top: clamp(1.25rem, 2.5vw, 1.75rem); padding-top: clamp(1rem, 2vw, 1.4rem); }
.duo__bio.is-clamped .duo__title { margin-bottom: 0.25rem; font-size: clamp(1.15rem, 0.95rem + 0.55vw, 1.45rem); }
.duo__bio.is-clamped .duo__bio-text {
  max-height: 5.1rem; overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, #000 45%, transparent);
          mask-image: linear-gradient(180deg, #000 45%, transparent);
}
/* « Lire la suite » : un simple lien de texte doré, souligné, suivi d'une flèche (pas de bouton) */
.duo__more {
  justify-self: start; margin: -0.2rem 0 -0.4rem; padding: 0.65rem 0; border: 0; background: none; cursor: pointer;
  font: 500 var(--fs-sm) / 1.4 var(--sans); letter-spacing: 0.02em; color: var(--gold-soft);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.3em;
}
.duo__more::after { content: " →"; text-decoration: none; display: inline-block; margin-left: 0.3em; transition: transform 0.4s var(--ease); }
.duo__more:hover { color: var(--bone); }
.duo__more:hover::after { transform: translateX(0.25em); }
.duo__more:focus-visible { outline: 1px solid var(--gold); outline-offset: 4px; border-radius: 2px; }
@media (max-width: 760px) {
  /* la flèche est posée sur la photo : le texte reprend toute la largeur */
  .duo__txt { padding-bottom: 1.75rem; padding-right: 1.5rem; }
  .duo__bio-text p { font-size: 1rem; }
  .duo__bio.is-clamped .duo__bio-text { max-height: 6.5rem; }
}

/* Fenêtre « Lire la suite » : la biographie complète, sur une carte de verre bleu nuit */
html.has-modal { overflow: hidden; }
.bio-modal {
  width: min(46rem, calc(100vw - 2rem)); max-height: min(86svh, 52rem);
  padding: 0; margin: auto; overflow: hidden;
  border: 1px solid var(--glass-border); border-radius: var(--r-xl);
  background: linear-gradient(165deg, #13264a, #0b1830 70%);
  box-shadow: var(--glass-rim), 0 40px 80px -30px rgba(0, 0, 0, 0.8);
  color: var(--bone);
}
.bio-modal::backdrop { background: rgba(4, 10, 22, 0.78); }
.bio-modal__inner {
  position: relative; max-height: inherit; overflow-y: auto; overscroll-behavior: contain;
  padding: clamp(1.75rem, 5vw, 3rem) clamp(1.5rem, 5vw, 3.25rem) clamp(2rem, 5vw, 3rem);
}
.bio-modal .duo__title { margin: 0 3rem 1.5rem 0; font-size: clamp(1.45rem, 1.15rem + 1vw, 2rem); }
.bio-modal .duo__bio-text { gap: 0.75rem; }
.bio-modal__close {
  position: sticky; top: 0; float: right; z-index: 1; margin: -0.5rem -0.75rem 0 0;
  width: 2.75rem; height: 2.75rem; display: grid; place-items: center; cursor: pointer;
  border: 1px solid var(--glass-border); border-radius: 50%;
  background: rgba(11, 24, 48, 0.9); color: var(--bone);
}
.bio-modal__close svg { width: 1.1rem; height: 1.1rem; }
.bio-modal__close:hover { color: var(--abyss); background: linear-gradient(180deg, #edd8a6, var(--gold)); }
.bio-modal__close:focus-visible { outline: 1px solid var(--gold); outline-offset: 3px; }
@media (prefers-reduced-motion: no-preference) {
  .bio-modal[open] { animation: bio-in 0.45s var(--ease) both; }
  .bio-modal[open]::backdrop { animation: bio-fade 0.45s ease both; }
}
@keyframes bio-in { from { opacity: 0; transform: translateY(1rem); } to { opacity: 1; transform: none; } }
@keyframes bio-fade { from { opacity: 0; } to { opacity: 1; } }

/* Nos services : la phrase « Parce que… » du client au-dessus de la description, comme les trois phases de l'accueil */
.svx__why { max-width: 74%; margin: -0.75rem 0 0.9rem; font: italic 400 clamp(1.1rem, 1rem + 0.35vw, 1.3rem) / 1.45 var(--display); color: var(--gold-soft); }
.svx__why + .svx__desc { margin-top: 0; }
@media (max-width: 600px) { .svx__why { max-width: none; margin-top: 1.25rem; } }

/* Questions fréquentes : réponses en plusieurs paragraphes */
.faq__a p + p { margin-top: 0.85rem; }

/* Nos services : une photo teintée (même traitement que le portrait d'À propos), en fondu en bas à droite du panneau, à la place du chiffre romain */
.svx__img {
  position: absolute; z-index: -1; right: 0; bottom: 0;
  width: min(36%, 15rem); height: min(72%, 17rem);
  object-fit: cover; object-position: 50% 30%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 45%), linear-gradient(180deg, transparent 0%, #000 40%);
  -webkit-mask-composite: source-in;
          mask-image: linear-gradient(90deg, transparent 0%, #000 45%), linear-gradient(180deg, transparent 0%, #000 40%);
          mask-composite: intersect;
  opacity: 0.45; pointer-events: none;
}
.svx__panel > .svx__list, .svx__panel > .svx__text { max-width: 74%; }
@media (prefers-reduced-motion: no-preference) {
  .svx.is-ready .svx__panel.is-entering .svx__img { animation: svx-img 1s var(--ease) both; animation-delay: 0.1s; }
  @keyframes svx-img { from { opacity: 0; transform: translateX(1.5rem); } to { opacity: 0.45; transform: none; } }
}
@media (max-width: 600px) {
  .svx__panel { padding-bottom: 7rem; }
  .svx__img {
    width: 55%; height: 9.5rem;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 45%), linear-gradient(180deg, transparent 0%, #000 45%);
            mask-image: linear-gradient(90deg, transparent 0%, #000 45%), linear-gradient(180deg, transparent 0%, #000 45%);
  }
  .svx__panel > .svx__list, .svx__panel > .svx__text { max-width: none; }
}

/* ==========================================================================
   Passe mobile (18/10/2026) : pied de page compact, boutons du hero,
   tuiles d'À propos, menu plus lisible, doublons retirés
   ========================================================================== */
@media (max-width: 860px) {
  .approach__head { gap: 1.25rem; }
  /* Nos services : le bloc de clôture suit juste après, un seul « Nous contacter » suffit */
  .svx__cta { display: none; }
}
@media (max-width: 600px) {
  /* Hero : l'action principale sur toute la largeur, les deux autres côte à côte */
  .hero--road .hero__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
  .hero--road .hero__actions .btn { justify-content: center; padding-inline: 0.9rem; }
  .hero--road .hero__actions .btn:first-child { grid-column: 1 / -1; }
  /* la citation se coupe naturellement sur petit écran */
  .hero--road .hero__approach br { display: none; }
  /* À propos : les tuiles de faits prennent la hauteur de leur contenu */
  .bento--about .tile--fact { min-height: 0; }
  /* Pied de page : espacements resserrés */
  .footer h4 { margin-bottom: 0.5rem; }
  .footer li { overflow-wrap: anywhere; }
  .footer__bottom { flex-direction: column; gap: 0.35rem; line-height: 1.5; }
}
@media (max-width: 380px) {
  /* très petits écrans (320 px) : les cartes des phases tiennent dans la largeur */
  .phases { grid-template-columns: minmax(0, 1fr); }
  .phase { padding-inline: 1.1rem; }
  .phase h3 { font-size: 1.05rem; letter-spacing: 0.08em; }
}
@media (max-width: 420px) {
  /* « accompagnement ? » est insécable : le titre de clôture suit la largeur de l'écran */
  .closing h2 { font-size: 8.4vw; }
}

/* Avis réels peu nombreux (moins de 4) : cartes fixes, centrées, sans défilement */
.marquee.is-static { -webkit-mask-image: none; mask-image: none; width: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto; }
.marquee.is-static .marquee__track { animation: none; width: auto; flex-wrap: wrap; justify-content: center; }
/* Formulaires : message d'erreur d'envoi */
.form-error { margin: 0.75rem 0 0; padding: 0.85rem 1.1rem; border-radius: var(--r-lg); border: 1px solid rgba(227, 154, 143, 0.45); background: rgba(227, 154, 143, 0.08); color: #f0c2ba; font-size: var(--fs-sm); }
/* Un élément masqué par le script reste masqué, quel que soit son affichage habituel */
[hidden] { display: none !important; }

/* Ligne de référencement en bas du hero : titre professionnel à gauche, ville et zone à droite (toujours visible, y compris sur mobile) */
.hero__coords--seo span, .hero--road .hero__coords--seo span:last-child { display: inline; white-space: normal; padding-right: 0; }
@media (max-width: 600px) { .hero--road .hero__coords--seo { flex-direction: column; align-items: flex-start; gap: 0.35rem; } }

/* Nos services : courte description sous le titre de chaque catégorie */
.svx__desc { max-width: 74%; margin: -0.75rem 0 clamp(1.25rem, 2.5vw, 1.75rem); color: var(--text); font-size: var(--fs-base); line-height: 1.6; }
@media (max-width: 600px) { .svx__desc { max-width: none; margin-top: 1.25rem; } }

/* Questions fréquentes : accordéon accessible (details / summary), une carte de verre par question */
.faq { display: grid; gap: 0.75rem; max-width: 56rem; }
.faq__item {
  border: 1px solid var(--glass-border); border-radius: var(--r-lg);
  background: var(--glass-sheen), var(--glass-tint); box-shadow: var(--glass-rim);
  transition: border-color 0.4s var(--ease-soft);
}
.faq__item[open] { border-color: rgba(232, 207, 149, 0.32); }
.faq__item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.15rem clamp(1.1rem, 2.5vw, 1.6rem); cursor: pointer; list-style: none;
  font: 400 clamp(1.1rem, 1rem + 0.4vw, 1.3rem) / 1.3 var(--display); color: var(--bone);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary:focus-visible { outline: 1px solid var(--gold); outline-offset: 3px; border-radius: var(--r-lg); }
.faq__icon { position: relative; flex: none; width: 2rem; height: 2rem; border: 1px solid var(--rule-strong); border-radius: 50%; }
.faq__icon::before, .faq__icon::after { content: ""; position: absolute; left: 50%; top: 50%; width: 0.7rem; height: 1px; background: var(--gold-soft); transform: translate(-50%, -50%); transition: transform 0.4s var(--ease); }
.faq__icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq__item[open] .faq__icon::after { transform: translate(-50%, -50%) rotate(0deg); }
.faq__a { padding: 0 clamp(1.1rem, 2.5vw, 1.6rem) 1.25rem; }
.faq__a p { margin: 0; color: var(--text); line-height: 1.65; max-width: 46rem; }

/* Pied de page mobile allégé : les liens d'information tiennent sur une ligne, adresse et contact
   restent (la navigation, déjà dans le menu, disparaît dès que le menu burger s'affiche : fin de fichier) */
@media (max-width: 600px) {
  .footer__top { padding-block: 1.75rem 1.25rem; }
  .footer__grid { gap: 1.25rem 1.25rem; padding-block: 1.25rem; }
  .footer__col--info { grid-column: 1 / -1; border-top: 1px solid var(--rule); padding-top: 1rem; }
  .footer__col--info h4 { display: none; }
  .footer__col--info ul { display: flex; flex-wrap: wrap; gap: 0 1.1rem; }
  .footer__col--info li a { font-size: var(--fs-xs); color: var(--muted); padding-block: 0.6rem; }
  .footer__bottom { padding-block: 1rem 1.25rem; font-size: 0.75rem; }
}

/* Mobile allégé (18/10/2026) */
@media (max-width: 600px) {
  /* Les trois phases : cartes côte à côte que l'on fait glisser, la suivante dépasse pour inviter au geste */
  .route .phases {
    grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 84%; gap: 0.85rem;
    overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none;
    border-left: 0; margin: 0 calc(-1 * var(--gutter)); padding: 0.25rem var(--gutter) 0.75rem;
    scroll-padding-inline: var(--gutter);
  }
  .route .phases::-webkit-scrollbar { display: none; }
  .route .phases::before { display: none; }
  .route .phase { scroll-snap-align: start; padding: 1.5rem 1.25rem 1.6rem; animation: none !important; opacity: 1 !important; transform: none !important; }
  .route .phase__mark { margin: 0 0 1rem; animation: none !important; }
}

/* ==========================================================================
   Logo retenu le 21/10/2026, sans la signature : « Cabinet » en italique doré,
   centré au-dessus de « Druart Thomas », sans filet ; le nom est vectorisé en
   TeX Gyre Pagella (logo/sans-signature.js → logo/brand-logo.svg)
   ========================================================================== */
.brand__word { display: block; width: auto; overflow: visible; }
.header .brand__word--logo { height: 3rem; }
.footer__top .brand__word--logo { height: 3.4rem; }
@media (max-width: 920px) { .header .brand__word--logo { height: 2.55rem; } }
@media (max-width: 600px) { .footer__top .brand__word--logo { height: 2.8rem; } }
@media (max-width: 360px) { .header .brand__word--logo { height: 2.25rem; } }

/* ==========================================================================
   Hero « route illuminée » (21/10/2026, partout depuis le 22/10) : la photo de
   montagne à droite, fondue dans le bleu nuit côté texte. La lumière qui
   gravit la route est dessinée par js/hero-route.js, sur un canvas cadré
   exactement comme la photo (même object-fit, même object-position).
   ========================================================================== */
.hero__media {
  position: absolute; top: 0; right: 0; bottom: 0; z-index: -3;
  width: min(100%, max(64%, 150svh));
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 38%);
          mask-image: linear-gradient(90deg, transparent 0%, #000 38%);
  pointer-events: none;
}
.hero__media picture, .hero__media img, .hero__media canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hero__media img, .hero__media canvas { object-fit: cover; object-position: 100% 12%; }
.hero__media canvas { opacity: 0; }
.hero__media canvas.is-on { opacity: 1; }
/* Mobile et tablette en portrait : la photo occupe toute la carte, la montagne au centre ; l'ombre du bas porte le texte */
@media (max-width: 720px), (orientation: portrait) {
  .hero__media { width: 100%; -webkit-mask-image: none; mask-image: none; }
  .hero__media img, .hero__media canvas { object-position: 96% 0; }
  .hero__media ~ .hero__shade { background: linear-gradient(0deg, rgba(8, 19, 39, 0.94) 0%, rgba(8, 19, 39, 0.9) 38%, rgba(8, 19, 39, 0.62) 62%, rgba(8, 19, 39, 0.12) 82%, rgba(8, 19, 39, 0) 100%); }
}
/* Écran en hauteur : la photo portrait (balise picture), cadrée pour garder toute la route
   et le sommet, même sur les téléphones les plus étroits */
@media (orientation: portrait) {
  .hero__media img, .hero__media canvas { object-position: 60% 0; }
}

/* Héros des pages intérieures : la même photo, fixe et allumée, cadrée
   sur le sommet et les derniers lacets ; plus discrète que sur l'accueil. La boîte garde les
   proportions de la photo, calée en haut à droite : la carte coupe le bas de la montagne. */
.page-hero .hero__media {
  bottom: auto; width: max(68%, 58rem); aspect-ratio: 3 / 2; opacity: 0.9;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 40%);
          mask-image: linear-gradient(90deg, transparent 0%, #000 40%);
}
.page-hero .hero__media img { object-position: 50% 0; }
/* Téléphone tenu verticalement : la photo portrait couvre la carte, très assombrie derrière le texte
   (même condition que la balise picture du partial hero-montagne-fixe) */
@media (max-width: 720px) and (orientation: portrait) {
  .page-hero .hero__media { bottom: 0; width: 100%; aspect-ratio: auto; -webkit-mask-image: none; mask-image: none; }
  .page-hero .hero__media img { object-position: 60% 0; }
  .page-hero .hero__media ~ .page-hero__shade { background: linear-gradient(0deg, rgba(8, 19, 39, 0.92) 0%, rgba(8, 19, 39, 0.8) 45%, rgba(8, 19, 39, 0.55) 100%); }
}

/* ==========================================================================
   Les trois phases : comme dans le hero, une lumière dorée parcourt la ligne
   une fois, de I à III, et l'allume derrière elle ; chaque étape s'éclaire à
   son passage (main.js). Traits nets : une tête presque blanche, un corps doré
   et une traînée plus longue et plus pâle, aucun flou. Sans JavaScript ou avec
   « réduire les animations », la ligne est simplement allumée.
   ========================================================================== */
.route__line .route__trace, .route__line .route__glint { vector-effect: none; stroke-dasharray: none; }
.route__line .route__trace { stroke-width: 1.2; }
.route__line .route__glint { stroke-linecap: round; opacity: 0; transition: opacity 0.7s ease; }
.route__line .route__glint--tail { stroke: var(--gold); stroke-width: 1.3; }
.route__line .route__glint--mid { stroke: var(--gold-soft); stroke-width: 1.7; }
.route__line .route__glint--head { stroke: #fff6e2; stroke-width: 2.2; }
.route.is-armed .route__trace, .cv.is-armed .route__trace { stroke-dasharray: 1 1; stroke-dashoffset: 1; }
.route.is-running .route__glint, .cv.is-running .route__glint { opacity: 1; }
.route.is-running .route__glint--tail, .cv.is-running .route__glint--tail { opacity: 0.55; }
.route.is-armed .phase__mark { transition: border-color 0.6s var(--ease), color 0.6s var(--ease), background-color 0.6s var(--ease); }
.route.is-armed .phase__mark:not(.is-lit) { color: rgba(212, 175, 97, 0.55); border-color: rgba(212, 175, 97, 0.25); }
.phase__mark.is-lit { border-color: var(--gold-soft); color: var(--gold-soft); background-color: #10213f; }

/* ==========================================================================
   Parcours (À propos, 22/10/2026) : le client trouvait la frise trop longue et
   voulait le détail au survol, puis Vlad l'a voulu vertical (la liste pourra
   s'allonger). Les années les unes sous les autres sur une ligne dorée que la
   lumière parcourt ; ordinateur : le détail de l'année choisie dans une carte
   qui flotte à droite, à sa hauteur ; mobile : le détail s'ouvre sous l'année.
   Sans JavaScript, tous les détails sont affichés sous leur année (main.js).
   ========================================================================== */
.cv { --dot: 1.15rem; --gap: clamp(1rem, 2.5vw, 1.75rem); position: relative; }
.cv__line.route__line { display: block; left: calc(var(--dot) / 2 - 0.6rem); right: auto; width: 1.2rem; top: var(--line-top, 0); height: var(--line-h, 100%); }
.cv__list { list-style: none; margin: 0; padding: 0; }
.cv__stop {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: var(--dot) auto minmax(0, 1fr); align-items: center; column-gap: var(--gap);
  width: 100%; min-height: clamp(4.5rem, 6.5vw, 5.75rem); padding: 0; border: 0; background: none; color: inherit; cursor: pointer; text-align: left;
  scroll-margin-top: 6rem;   /* au clavier, l'année ne passe pas sous l'en-tête fixe */
}
.cv__dot {
  width: var(--dot); height: var(--dot); border-radius: 50%;
  border: 1px solid var(--gold); background: var(--sea); box-shadow: 0 0 0 6px var(--sea);
  transition: background-color 0.5s var(--ease), border-color 0.5s var(--ease), transform 0.5s var(--ease);
}
.cv__dot.is-lit { border-color: var(--gold-soft); }
.cv.is-armed .cv__dot:not(.is-lit) { border-color: rgba(212, 175, 97, 0.3); }
.cv__year { font: italic 400 clamp(1.9rem, 1.35rem + 1.6vw, 2.8rem) / 1 var(--display); color: var(--muted); transition: color 0.4s var(--ease); }
.cv__tag { font: 500 0.68rem / 1.3 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; color: var(--faint); overflow-wrap: anywhere; }
.cv__stop:hover .cv__year { color: var(--bone); }
.cv__stop[aria-expanded="true"] .cv__year { color: var(--gold-soft); }
.cv__stop[aria-expanded="true"] .cv__dot { background: var(--gold-soft); border-color: var(--gold-soft); transform: scale(1.15); }
.cv__stop:focus-visible { outline: none; }
.cv__stop:focus-visible .cv__year { outline: 1px solid var(--gold); outline-offset: 5px; border-radius: 2px; }

/* Le détail : sous l'année (mobile et sans JavaScript), décalé au niveau du texte */
.cv__panel { margin: 0 0 1rem calc(var(--dot) + var(--gap)); padding: 1.15rem 1.35rem; }
.cv__when { margin: 0; display: grid; gap: 0.5rem; }
.cv__panel-year { font: italic 400 clamp(2.4rem, 1.8rem + 2.2vw, 3.4rem) / 1 var(--display); color: var(--gold-soft); }
.cv__body h3 { margin: 0 0 0.75rem; font-size: clamp(1.15rem, 1.05rem + 0.6vw, 1.55rem); }
.cv__body h3:last-child { margin-bottom: 0; }
.cv__where { display: inline-block; margin: 0; font: 500 0.75rem var(--sans); color: var(--bone); }
.cv__panel .cv__when { display: none; }   /* l'année et l'étiquette sont déjà sur la ligne */

/* Avec JavaScript : un seul détail ouvert */
.cv.is-ready .cv__panel { display: none; }
.cv.is-ready .cv__panel.is-active { display: block; }
@media (prefers-reduced-motion: no-preference) {
  .cv.is-ready .cv__panel.is-entering { animation: cv-in 0.45s var(--ease) both; }
}
@keyframes cv-in { from { opacity: 0; transform: translateY(0.5rem); } to { opacity: 1; transform: none; } }

/* Ordinateur : la liste à gauche, la carte flotte à droite à hauteur de l'année choisie */
@media (min-width: 53.8125em) {   /* 861 px à 16 px, en em pour suivre une police agrandie (même valeur que main.js) */
  .cv.is-ready .cv__list { width: 38%; }
  .cv.is-ready .cv__panel {
    position: absolute; left: 44%; right: 0; top: var(--card-y, 0); margin: 0;
    display: grid; grid-template-columns: 12.5rem minmax(0, 1fr); align-items: center; gap: 0.5rem clamp(1.5rem, 3vw, 2.5rem);
    padding: clamp(1.5rem, 3vw, 2.1rem) clamp(1.5rem, 3vw, 2.4rem);
    visibility: hidden; opacity: 0;
  }
  .cv.is-ready .cv__panel.is-active { display: grid; visibility: visible; opacity: 1; }
  .cv.is-ready .cv__panel .cv__when { display: grid; padding-right: clamp(1.5rem, 3vw, 2.5rem); border-right: 1px solid var(--rule); }
  /* la pointe, sur le bord gauche de la carte, vers l'année */
  .cv.is-ready .cv__panel::before {
    content: ""; position: absolute; left: -0.42rem; top: var(--caret-y, 50%);
    width: 0.8rem; height: 0.8rem; margin-top: -0.4rem; transform: rotate(45deg);
    border-left: 1px solid var(--glass-border); border-bottom: 1px solid var(--glass-border); background: #15284b;
  }
}
@media (min-width: 53.8125em) and (prefers-reduced-motion: no-preference) {
  .cv.is-ready .cv__panel { transition: top 0.5s var(--ease); }
}
@media (max-width: 600px) {
  .cv { --dot: 0.95rem; }
  .cv__panel { padding: 1rem 1.1rem; }
}

/* ==========================================================================
   Passe mobile finale (22/10/2026, audit) : menu en paysage, avis au doigt,
   parcours, zones de toucher, en-têtes compacts sur écran bas
   ========================================================================== */
@media (max-width: 920px) {
  /* téléphone couché : le menu défile au lieu de passer sous le logo et de cacher « Espace client » */
  .nav { overflow-y: auto; overscroll-behavior: contain; justify-content: safe center; }
  /* le nom de transition de vue de l'en-tête empêche le flou du menu de voir la page : retiré menu ouvert */
  body.nav-open .header { view-transition-name: none; }
  /* pied de page : la navigation est déjà dans le menu ; liens d'au moins 40 px de haut */
  .footer__col--nav { display: none; }
  .footer ul { gap: 0; }
  .footer li a { display: inline-block; padding-block: 0.6rem; }
}
@media (max-width: 920px) and (max-height: 520px) {
  .nav { padding-top: 5.5rem; padding-bottom: 1rem; }
  .nav > a { font-size: 1.35rem; padding-block: 0.5rem; }
  .nav__cta { margin-top: 0.75rem; padding-top: 0; }
  /* en-têtes des pages : le premier contenu reste dans l'écran */
  .page-hero { min-height: 0; }
  .page-hero__body { padding-top: 5.5rem; padding-bottom: 1.5rem; }
  .page-hero h1 { font-size: 2.4rem; }
  .page-hero .lead { font-size: 1rem; }
  .hero--404 .hero__code { font-size: 4.5rem; margin-bottom: 0.5rem; }
}

/* Avis sur écran tactile : une rangée que l'on fait glisser au doigt, comme les phases ;
   les flèches avancent d'un avis (main.js fait défiler le bandeau quand il n'est pas animé) */
@media (hover: none) {
  .marquee:not(.is-static) {
    overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none;
    -webkit-mask-image: none; mask-image: none;
    padding: 0.5rem var(--gutter) 2rem; margin-bottom: -1.5rem; scroll-padding-inline: var(--gutter);
  }
  .marquee::-webkit-scrollbar { display: none; }
  .marquee:not(.is-static) .marquee__track { animation: none; }
  .marquee .review { scroll-snap-align: start; }
  .marquee .review[aria-hidden="true"] { display: none; }
}

/* Parcours sur mobile : un « + » rond, comme dans la FAQ, signale que les années s'ouvrent */
@media not all and (min-width: 53.8125em) {
  .cv.is-ready .cv__stop { grid-template-columns: var(--dot) auto minmax(0, 1fr) 2rem; }
  .cv.is-ready .cv__stop::after {
    content: ""; justify-self: end; width: 2rem; height: 2rem; border: 1px solid var(--rule-strong); border-radius: 50%;
    background: linear-gradient(var(--gold-soft), var(--gold-soft)) center / 0.7rem 1px no-repeat,
                linear-gradient(var(--gold-soft), var(--gold-soft)) center / 1px 0.7rem no-repeat;
    transition: opacity 0.3s;
  }
  .cv.is-ready .cv__stop[aria-expanded="true"]::after { opacity: 0; }
}

/* Mentions légales : quand l'en-tête s'efface, le sommaire remonte tout en haut (plus de texte qui défile au-dessus) */
@media (max-width: 860px) {
  .legal-toc { transition: top 0.6s var(--ease); }
  .header.is-hidden ~ main .legal-toc { top: 0; }
  .legal-toc .toc a { padding-block: 0.8rem; }
}

/* Page 404 sur téléphone : les deux boutons l'un sous l'autre, en pleine largeur */
@media (max-width: 600px) { .hero--404 .hero__actions .btn:last-child { grid-column: 1 / -1; } }