/* ============================================================
   DAVID JOLY — HOME · Direction « Profondeur Navy + Schéma Vivant »
   Feuille d'implémentation. Tout passe par var(--token) (voir tokens.css).
   Charger tokens.css AVANT cette feuille :
     <link rel="stylesheet" href="tokens.css">
     <link rel="stylesheet" href="styles.css">
   Breakpoints : mobile < 768px · tablette 768–1023px · desktop >= 1024px
   Motion : respecte prefers-reduced-motion (bloc en bas de fichier).
   ============================================================ */

@import "tokens.css";

*{ box-sizing:border-box; }
html,body{ margin:0; background:var(--navy-950); }
body{ font-family:var(--font-sans); color:var(--ink-body); -webkit-font-smoothing:antialiased; }
::selection{ background:color-mix(in srgb, var(--accent) 28%, transparent); }
a{ color:inherit; text-decoration:none; }
:focus-visible{ outline:var(--focus-ring); outline-offset:3px; }

/* derived (token-based) tints — accent/soft at alpha via color-mix, no off-system values */
:root{
  --accent-12:color-mix(in srgb, var(--accent) 12%, transparent);
  --accent-16:color-mix(in srgb, var(--accent) 16%, transparent);
  --accent-30:color-mix(in srgb, var(--accent) 30%, transparent);
  --accent-40:color-mix(in srgb, var(--accent) 40%, transparent);
  --accent-50:color-mix(in srgb, var(--accent) 50%, transparent);
  --soft-16:color-mix(in srgb, var(--on-navy-soft) 16%, transparent);
  --soft-22:color-mix(in srgb, var(--on-navy-soft) 22%, transparent);
  --soft-70:color-mix(in srgb, var(--on-navy-soft) 70%, transparent);
  --eyebrow-16:color-mix(in srgb, var(--eyebrow-dark) 16%, transparent);
  --hair-light:color-mix(in srgb, #fff 5%, transparent);     /* grilles fines sur navy */
  --hair-light-2:color-mix(in srgb, #fff 6%, transparent);
}

/* lien d'évitement (a11y) */
.skip{ position:absolute; left:-9999px; top:0; z-index:100; background:var(--on-navy); color:var(--ink); padding:10px 16px; border-radius:var(--radius-sm); }
.skip:focus{ left:var(--sp-4); top:var(--sp-4); }

.wrap{ max-width:var(--content-max); margin:0 auto; padding-inline:var(--section-pad-x); }

/* ---------- BARRE STICKY (site-header) ---------- */
/* hauteur approximative de la barre — sert au recalage des ancres */
:root{ --nav-h:84px; }
.site-header{
  position:sticky; top:0; z-index:100;
  background:var(--navy-950);              /* couture invisible avec le hero navy en haut */
  transition:box-shadow .2s ease;
}
.site-header.is-scrolled{ box-shadow:var(--shadow-raise); }  /* détache la barre des sections claires */

/* recalage des cibles d'ancre sous la barre collée */
[id]{ scroll-margin-top:calc(var(--nav-h) + 10px); }

/* ---------- NAV (sur hero navy) ---------- */
.nav{ position:relative; display:flex; align-items:center; justify-content:space-between; padding-block:var(--sp-6); border-bottom:1px solid var(--line-dark); }
.nav__brand{ display:flex; align-items:baseline; gap:var(--sp-3); }
.nav__name{ font-family:var(--font-serif); font-size:var(--fs-h3); font-weight:var(--fw-medium); color:var(--on-navy); letter-spacing:.01em; white-space:nowrap; }
.nav__tag{ font-family:var(--font-mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--eyebrow-dark); }
.nav__links{ display:flex; align-items:center; gap:30px; }
.nav__link{ font-size:14.5px; color:var(--on-navy-strong); }
.nav__cta{ font-size:14px; color:var(--ink); background:var(--on-navy); padding:10px 18px; border-radius:var(--radius-sm); font-weight:var(--fw-medium); white-space:nowrap; }

/* burger (mobile uniquement) */
.nav__burger{ display:none; align-items:center; justify-content:center; width:var(--tap-min); height:var(--tap-min); margin:-10px -10px -10px 0; padding:0; background:transparent; border:0; color:var(--on-navy); cursor:pointer; }
.nav__burger-bars{ position:relative; display:block; width:22px; height:2px; background:currentColor; transition:background .15s ease; }
.nav__burger-bars::before,
.nav__burger-bars::after{ content:""; position:absolute; left:0; width:22px; height:2px; background:currentColor; transition:transform .2s ease; }
.nav__burger-bars::before{ top:-7px; }
.nav__burger-bars::after{ top:7px; }
.nav[data-open="true"] .nav__burger-bars{ background:transparent; }
.nav[data-open="true"] .nav__burger-bars::before{ transform:translateY(7px) rotate(45deg); }
.nav[data-open="true"] .nav__burger-bars::after{ transform:translateY(-7px) rotate(-45deg); }

/* ---------- HERO ---------- */
.hero{ position:relative; background:var(--navy-950); overflow:hidden; }
.hero__field{ position:absolute; inset:0; pointer-events:none; }
.hero__halo-a{ position:absolute; inset:-15%; background:radial-gradient(720px 540px at 26% 22%, var(--accent-30), transparent 62%); filter:blur(8px); animation:dj-drift 13s ease-in-out infinite; }
.hero__halo-b{ position:absolute; inset:-15%; background:radial-gradient(620px 480px at 80% 70%, var(--eyebrow-16), transparent 60%); animation:dj-drift2 17s ease-in-out infinite; }
.hero__grid{ position:absolute; inset:0; background-image:linear-gradient(var(--hair-light) 1px, transparent 1px); background-size:100% 54px; -webkit-mask-image:linear-gradient(to bottom, transparent, #000 35%, #000); mask-image:linear-gradient(to bottom, transparent, #000 35%, #000); }
.hero__grain{ position:absolute; inset:0; background-image:radial-gradient(var(--hair-light) 1px, transparent 1px); background-size:5px 5px; opacity:.5; }
.hero__inner{ position:relative; }
.hero__head{ padding-block:104px var(--sp-8); max-width:880px; }
.hero__title{ font-family:var(--font-serif); font-size:var(--fs-display); line-height:var(--lh-display); font-weight:var(--fw-medium); color:var(--on-navy); letter-spacing:var(--ls-display); margin:0; animation:dj-float 9s ease-in-out infinite; }
.hero__title .soft{ color:var(--on-navy-soft); }
.hero__lead{ font-size:var(--fs-body-l); line-height:var(--lh-lede); color:var(--on-navy-strong); max-width:560px; margin:var(--sp-8) 0 var(--sp-12); }
.hero__cta{ display:flex; gap:var(--sp-4); flex-wrap:wrap; }

/* boutons */
.btn{ display:inline-block; font-size:15.5px; padding:15px 26px; border-radius:var(--radius-sm); font-weight:var(--fw-medium); border:0; background:none; font-family:inherit; line-height:inherit; cursor:pointer; -webkit-appearance:none; appearance:none; }
.btn--accent{ color:var(--on-accent); background:var(--accent); }
.btn--accent:hover{ background:var(--accent-hover-d); }
.btn--ghost-d{ color:var(--on-navy); border:1px solid color-mix(in srgb, #fff 30%, transparent); font-weight:var(--fw-regular); }
.btn--ghost-d:hover{ border-color:var(--on-navy); }
.btn--dark{ color:var(--on-navy); background:var(--navy-900); }
.btn--ghost-l{ color:var(--ink-body); border:1px solid color-mix(in srgb, var(--ink) 28%, transparent); }

/* ---------- RAIL (schéma vivant) ---------- */
.rail{ position:relative; padding-block:var(--sp-8) var(--sp-16); }
.rail__eyebrow{ font-family:var(--font-mono); font-size:11px; letter-spacing:var(--ls-label); text-transform:uppercase; color:var(--on-navy-muted, color-mix(in srgb,#fff 50%,transparent)); margin-bottom:var(--sp-6); }
.rail__track{ position:relative; display:flex; align-items:center; }
.rail__node{ position:relative; z-index:2; width:15px; height:15px; border-radius:var(--radius-pill); background:var(--navy-950); border:2px solid var(--accent); animation:dj-glow 2.4s ease-in-out infinite; }
.rail__node--2{ animation-delay:.4s; }
.rail__node--3{ animation-delay:.8s; }
.rail__link{ position:relative; flex:1; height:1px; }
.rail__link::before{ content:""; position:absolute; inset:0; background:var(--line-dark); }
.rail__link::after{ content:""; position:absolute; inset:0; background:var(--accent); transform-origin:left center; animation:dj-draw 1s cubic-bezier(.2,.7,.2,1) both; }
.rail__link--1::after{ animation-delay:.1s; }
.rail__link--2::after{ animation-delay:.55s; }
.rail__pulse{ position:absolute; top:50%; margin-top:-4px; width:8px; height:8px; border-radius:var(--radius-pill); background:var(--on-navy-soft); box-shadow:0 0 12px 3px var(--soft-70); animation:dj-travel 3.2s cubic-bezier(.5,0,.5,1) 1s infinite; }
.rail__labels{ display:flex; justify-content:space-between; margin-top:var(--sp-4); }
.rail__label{ width:32%; }
.rail__label--mid{ text-align:center; }
.rail__label--end{ text-align:right; }
.rail__num{ font-family:var(--font-mono); font-size:12px; letter-spacing:.16em; color:var(--on-navy-soft); }
.rail__cap{ font-family:var(--font-mono); font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--on-navy-strong); margin-top:5px; }

/* ---------- SECTIONS claires ---------- */
.section--paper{ background:var(--paper); color:var(--ink-body); }
.section--sand{ background:var(--sand); color:var(--ink-body); }
.section--navy{ position:relative; background:var(--navy-950); overflow:hidden; }
.eyebrow{ font-family:var(--font-mono); font-size:var(--fs-label); letter-spacing:var(--ls-label); text-transform:uppercase; color:var(--muted); }
.eyebrow--accent{ color:var(--accent); }
.section-title{ font-family:var(--font-serif); font-weight:var(--fw-medium); letter-spacing:var(--ls-title); color:var(--ink-body); }

/* crédibilité */
.cred{ padding-block:var(--sp-16); }
.cred__lead{ font-family:var(--font-serif); font-size:var(--fs-h3); font-weight:var(--fw-medium); color:var(--ink-body); margin-bottom:var(--sp-8); letter-spacing:var(--ls-title); }
.cred__grid{ display:grid; grid-template-columns:repeat(4,1fr); }
.cred__item{ padding-inline:28px; border-right:1px solid var(--line); }
.cred__item:first-child{ padding-left:0; }
.cred__item:last-child{ padding-right:0; border-right:0; }
.cred__fig{ font-family:var(--font-serif); font-size:34px; font-weight:var(--fw-medium); color:var(--ink); }
.cred__cap{ font-size:var(--fs-small); color:var(--muted); line-height:var(--lh-snug); margin-top:var(--sp-2); }
/* liste d'expertises sous la bande — puces carrées navy (::before custom) */
.cred__expertise{ list-style:none; margin:0 0 var(--sp-8); padding:0; max-width:640px;
  display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-3) var(--sp-8); }
.cred__expertise li{ position:relative; padding-left:var(--sp-6); font-size:var(--fs-body); line-height:var(--lh-body); color:var(--body); }
.cred__expertise li::before{ content:""; position:absolute; left:0; top:.62em; width:8px; height:8px; background:var(--navy-900); border-radius:1px; }

/* accompagnement */
.acc{ padding-block:var(--sp-16) var(--sp-24); }
.acc__head{ margin-bottom:var(--sp-2); }
.acc__title{ font-family:var(--font-serif); font-size:var(--fs-h2); line-height:1.22; font-weight:var(--fw-medium); color:var(--ink-body); max-width:700px; margin:var(--sp-3) 0 var(--sp-12); letter-spacing:var(--ls-title); }

/* cartes */
.cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-6); }
.card{ display:block; background:var(--white); border:1px solid var(--line); border-top:3px solid var(--accent); border-radius:var(--radius-sm); padding:34px 30px; transition:background .2s ease, box-shadow .2s ease, transform .2s ease; }
.card:hover{ background:var(--sand); box-shadow:var(--shadow-raise); transform:translateY(-3px); }
/* placeholder de tuile — à remplacer par le visuel sourcé (une seule balise à substituer).
   Les 2 seules valeurs littérales du fichier, isolées ici : #ECE6DA / #F3EEE4. */
.card__media{ aspect-ratio:16/9; border-radius:var(--radius-sm); margin:-4px 0 22px; background:repeating-linear-gradient(135deg, #ECE6DA 0 12px, #F3EEE4 12px 24px); display:flex; align-items:flex-end; padding:12px; }
.card__media-cap{ font-family:var(--font-mono); font-size:11px; color:var(--muted-2); letter-spacing:.04em; }
/* cartes offres — bandeau visuel 16:9 (plein, bord à bord, coins supérieurs arrondis) */
.cards .card__media{
  position:relative;
  display:block;
  margin:-34px -30px 22px;          /* annule le padding de la carte (haut + côtés) → bandeau bord à bord */
  padding:0;
  background:none;                  /* retire le motif rayé placeholder */
  border-radius:var(--radius-sm) var(--radius-sm) 0 0;  /* n'arrondit que le haut */
  overflow:hidden;
}
.cards .card__img{ display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; }
.card__kicker{ font-family:var(--font-mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted-2); margin-bottom:14px; }
.card__title{ font-family:var(--font-serif); font-size:var(--fs-h3); line-height:1.22; font-weight:var(--fw-medium); color:var(--ink-body); margin:0 0 var(--sp-3); }
.card__text{ font-size:15px; line-height:var(--lh-body); color:var(--muted); margin:0; }
/* hub /offres : accroche + lien "Voir l'offre" dans les cartes qui routent */
.card__accroche{ font-family:var(--font-serif); font-size:var(--fs-body); line-height:var(--lh-snug); color:var(--accent); margin:0 0 var(--sp-3); }
.card__more{ display:inline-block; margin-top:var(--sp-6); font-family:var(--font-mono); font-size:12px; letter-spacing:.08em; color:var(--accent); }
.card:hover .card__more{ text-decoration:underline; text-underline-offset:3px; }

/* méthode */
.method{ padding-block:var(--sp-24); }
.method__intro{ display:grid; grid-template-columns:1fr 1.2fr; gap:var(--sp-16); align-items:start; margin-bottom:var(--sp-16); }
.method__title{ font-family:var(--font-serif); font-size:var(--fs-h1); line-height:1.18; font-weight:var(--fw-medium); color:var(--ink-body); margin:0; letter-spacing:var(--ls-title); }
.method__lead{ font-size:var(--fs-body-l); line-height:var(--lh-lede); color:var(--body); margin:0; align-self:center; }
.schema{ position:relative; background:var(--navy-900); border-radius:var(--radius-sm); padding:64px var(--section-pad-x); overflow:hidden; }
.schema__halo{ position:absolute; inset:-20%; background:radial-gradient(700px 460px at 50% 24%, var(--accent-30), transparent 62%); animation:dj-drift 15s ease-in-out infinite; pointer-events:none; }
.schema__inner{ position:relative; }
.schema__track{ position:relative; display:flex; align-items:center; margin-bottom:34px; }
.schema__node{ position:relative; z-index:2; width:18px; height:18px; border-radius:var(--radius-pill); background:var(--navy-900); border:2px solid var(--accent); animation:dj-glow 2.4s ease-in-out infinite; }
.schema__node--2{ animation-delay:.4s; }
.schema__node--3{ animation-delay:.8s; }
.schema__link{ position:relative; flex:1; height:1px; }
.schema__link::before{ content:""; position:absolute; inset:0; background:var(--line-dark); }
.schema__link::after{ content:""; position:absolute; inset:0; background:var(--accent); transform-origin:left center; animation:dj-draw 1.1s cubic-bezier(.2,.7,.2,1) both; }
.schema__link--1::after{ animation-delay:.1s; }
.schema__link--2::after{ animation-delay:.6s; }
.schema__pulse{ position:absolute; top:50%; margin-top:-5px; width:10px; height:10px; border-radius:var(--radius-pill); background:var(--on-navy-soft); box-shadow:0 0 14px 4px var(--soft-70); animation:dj-travel 3.4s cubic-bezier(.5,0,.5,1) 1.1s infinite; }
.schema__cols{ display:grid; grid-template-columns:repeat(3,1fr); }
.schema__col{ padding-inline:44px; border-right:1px solid var(--line-dark); }
.schema__col:first-child{ padding-left:0; }
.schema__col:last-child{ padding-right:0; border-right:0; }
.schema__num{ font-family:var(--font-mono); font-size:var(--fs-label); color:var(--on-navy-soft); margin-bottom:var(--sp-4); }
.schema__text{ font-size:15.5px; line-height:var(--lh-lede); color:var(--on-navy-strong); margin:0; }

/* parcours */
.about{ padding-block:var(--sp-24); }
.about__grid{ display:grid; grid-template-columns:300px 1fr; gap:var(--sp-16); align-items:center; }
/* portrait — REMPLACER le placeholder par la vraie photo traitée (assets/david-joly.jpg),
   N&B / duotone navy, ratio 4:5. Conserver le balayage si souhaité. */
.portrait{ position:relative; aspect-ratio:4/5; border-radius:var(--radius-sm); overflow:hidden; background:var(--navy-900); }
.portrait__photo{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
/* traitement duotone navy + léger balayage, par-dessus la vraie photo N&B */
.portrait__shade{ position:absolute; inset:0; background:linear-gradient(180deg, color-mix(in srgb, var(--navy-900) 5%, transparent), color-mix(in srgb, var(--navy-900) 50%, transparent)); }
.portrait__sweep{ position:absolute; left:0; right:0; height:36%; background:linear-gradient(180deg, var(--soft-22), transparent); animation:dj-scan 8s ease-in-out infinite; }
.about__title{ font-family:var(--font-serif); font-size:var(--fs-h1); line-height:var(--lh-tight); font-weight:var(--fw-medium); color:var(--ink-body); margin:0; letter-spacing:var(--ls-display); }
.about__p1{ font-size:var(--fs-body-l); line-height:1.62; color:var(--body); margin:var(--sp-6) 0 var(--sp-4); max-width:600px; }
.about__p2{ font-size:var(--fs-body); line-height:var(--lh-lede); color:var(--muted); max-width:600px; margin:0 0 var(--sp-6); }
.about__more{ font-family:var(--font-mono); font-size:var(--fs-label); letter-spacing:.08em; color:var(--accent); }

/* CTA */
.cta{ padding-block:var(--sp-24); text-align:center; }
.cta__halo{ position:absolute; inset:-15%; background:radial-gradient(680px 460px at 30% 40%, var(--accent-30), transparent 62%); animation:dj-drift 14s ease-in-out infinite; pointer-events:none; }
.cta__grain{ position:absolute; inset:0; background-image:radial-gradient(var(--hair-light) 1px, transparent 1px); background-size:5px 5px; opacity:.5; pointer-events:none; }
.cta__inner{ position:relative; }
.cta__title{ font-family:var(--font-serif); font-size:var(--fs-h1); line-height:1.18; font-weight:var(--fw-medium); color:var(--on-navy); margin:0 auto var(--sp-4); max-width:720px; letter-spacing:var(--ls-title); }
.cta__lead{ font-size:var(--fs-body); line-height:var(--lh-body); color:var(--on-navy-strong); max-width:540px; margin:0 auto var(--sp-12); }
.cta__row{ display:flex; gap:var(--sp-4); justify-content:center; flex-wrap:wrap; }

/* footer */
.footer{ background:var(--navy-950); border-top:1px solid var(--line-dark); }
.footer__inner{ display:flex; align-items:center; justify-content:space-between; padding-block:var(--sp-12); }
.footer__name{ font-family:var(--font-serif); font-size:var(--fs-body-l); color:var(--on-navy); font-weight:var(--fw-medium); }
.footer__meta{ font-family:var(--font-mono); font-size:12px; letter-spacing:.12em; color:color-mix(in srgb,#fff 50%,transparent); }

/* Reveal au scroll — progressive enhancement.
   Contenu VISIBLE par défaut. La classe .is-revealed (ajoutée par le script à
   l'entrée en vue) déclenche une ANIMATION d'entrée, jamais un état masqué
   persistant : si JS/observer ne tournent pas, rien n'est jamais caché. */
[data-rise].is-revealed{ animation:dj-rise .7s cubic-bezier(.2,.7,.2,1) both; }

/* ============================ KEYFRAMES ============================ */
@keyframes dj-draw   { from{ transform:scaleX(0); } to{ transform:scaleX(1); } }
@keyframes dj-travel { 0%{ left:-1%; opacity:0; } 9%{ opacity:1; } 88%{ opacity:1; } 100%{ left:101%; opacity:0; } }
@keyframes dj-glow   { 0%,100%{ opacity:.32; box-shadow:0 0 0 0 transparent; } 50%{ opacity:1; box-shadow:0 0 18px 2px var(--accent-50); } }
@keyframes dj-drift  { 0%{ transform:translate(-4%,-3%) scale(1.05); } 50%{ transform:translate(5%,3%) scale(1.16); } 100%{ transform:translate(-4%,-3%) scale(1.05); } }
@keyframes dj-drift2 { 0%{ transform:translate(3%,4%) scale(1.1); } 50%{ transform:translate(-4%,-2%) scale(1.2); } 100%{ transform:translate(3%,4%) scale(1.1); } }
@keyframes dj-float  { 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-6px); } }
@keyframes dj-ken    { 0%{ transform:scale(1.0); } 100%{ transform:scale(1.06); } }
@keyframes dj-scan   { 0%{ transform:translateY(-120%); } 100%{ transform:translateY(360%); } }
@keyframes dj-rise   { from{ transform:translateY(22px); } to{ transform:none; } }
/* note : entrée par translation seule (pas de fondu d'opacité). Ainsi aucun
   contenu n'est jamais masqué, même si l'environnement gèle l'animation au
   premier frame (anti-régression « page blanche »). */

/* ============================ RESPONSIVE ============================ */
/* tablette */
@media (max-width:1023px){
  .wrap{ padding-inline:40px; }
  .schema{ padding-inline:40px; }
  .hero__head{ padding-block:80px var(--sp-8); }
  .hero__title{ font-size:48px; }
  .method__intro{ grid-template-columns:1fr; gap:var(--sp-8); }
  .nav__links{ gap:20px; }
}
/* mobile */
@media (max-width:767px){
  .wrap{ padding-inline:22px; }
  .schema{ padding:40px 24px; }
  :root{ --nav-h:60px; }
  .nav{ padding-block:var(--sp-4); flex-wrap:wrap; }
  .nav__tag{ display:none; }
  .nav__burger{ display:inline-flex; }
  /* le menu devient un panneau déroulant, piloté par data-open (burger) */
  .nav__links{
    position:absolute; top:100%; left:0; right:0; z-index:50;
    flex-direction:column; align-items:stretch; gap:0;
    margin-top:var(--sp-3); padding:var(--sp-2);
    background:var(--navy-900); border:1px solid var(--line-dark); border-radius:var(--radius-sm);
    box-shadow:var(--shadow-raise);
    opacity:0; visibility:hidden; transform:translateY(-6px);
    transition:opacity .2s ease, transform .2s ease, visibility .2s ease;
  }
  .nav[data-open="true"] .nav__links{ opacity:1; visibility:visible; transform:none; }
  .nav__link{ display:block; padding:14px 12px; font-size:16px; border-bottom:1px solid var(--line-dark); }
  .nav__cta{ display:block; text-align:center; margin:var(--sp-2) var(--sp-1) var(--sp-1); }
  .hero__head{ padding-block:56px var(--sp-6); }
  .hero__title{ font-size:34px; }
  .hero__lead{ font-size:var(--fs-body); }
  .hero__cta .btn{ flex:1 1 100%; text-align:center; }
  .rail{ padding-block:var(--sp-6) var(--sp-12); }
  .rail__node{ width:12px; height:12px; }
  .cred__grid{ grid-template-columns:1fr 1fr; gap:var(--sp-8) 0; }
  .cred__item{ padding-inline:18px; }
  .cred__item:nth-child(2){ border-right:0; padding-right:0; }
  .cred__item:nth-child(3){ padding-left:0; }
  .cred__expertise{ grid-template-columns:1fr; }
  .cards{ grid-template-columns:1fr; }
  .schema__track{ margin-bottom:24px; }
  .schema__cols{ grid-template-columns:1fr; gap:28px; }
  .schema__col{ padding:0 0 24px; border-right:0; border-bottom:1px solid var(--line-dark); }
  .schema__col:last-child{ border-bottom:0; padding-bottom:0; }
  .about__grid{ grid-template-columns:1fr; gap:var(--sp-8); }
  .portrait{ max-width:240px; }
  .about__title{ font-size:30px; }
  .cta__row .btn{ flex:1 1 100%; }
}

/* ============================ REDUCED MOTION ============================ */
@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
  /* sans animation, [data-rise] reste à son état naturel : visible. */
}

/* ============================================================
   PAGE CONTACT
   Réutilise le cadre Home : .wrap, .nav, .btn(*), .section--*, .footer.
   Hero réduit (navy, sans champ animé) + deux voies + formulaire.
   ============================================================ */

/* hero court — la nav repose sur navy, comme sur la Home */
.contact-hero{ position:relative; padding-block:clamp(56px, 8vw, 96px) clamp(40px, 6vw, 72px); max-width:720px; }
.contact-hero .eyebrow{ color:var(--eyebrow-dark); }   /* eyebrow lisible sur navy */
.contact-hero__title{ font-family:var(--font-serif); font-size:var(--fs-h1); line-height:var(--lh-tight); font-weight:var(--fw-medium); color:var(--on-navy); letter-spacing:var(--ls-display); margin:var(--sp-4) 0 0; }
.contact-hero__lead{ font-size:var(--fs-body-l); line-height:var(--lh-lede); color:var(--on-navy-strong); margin:var(--sp-6) 0 0; max-width:560px; }

/* corps : deux colonnes (voies / formulaire) */
.contact{ padding-block:var(--sp-24); }
.contact__grid{ display:grid; grid-template-columns:1fr 1.2fr; gap:var(--sp-16); align-items:start; }

/* colonne « voies de contact » */
.contact__intent{ display:flex; flex-direction:column; gap:var(--sp-6); }
.contact__intro-title{ font-family:var(--font-serif); font-size:var(--fs-h3); font-weight:var(--fw-medium); color:var(--ink-body); letter-spacing:var(--ls-title); margin:0 0 var(--sp-2); }
.voie{ display:flex; flex-direction:column; align-items:flex-start; gap:var(--sp-3); background:var(--white); border:1px solid var(--line); border-left:3px solid var(--accent); border-radius:0; padding:var(--sp-8); }
.voie__kicker{ font-family:var(--font-mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--accent); }
.voie__title{ font-family:var(--font-serif); font-size:var(--fs-h3); line-height:var(--lh-snug); font-weight:var(--fw-medium); color:var(--ink-body); margin:0; }
.voie__text{ font-size:15px; line-height:var(--lh-body); color:var(--muted); margin:0; }
.voie .btn{ margin-top:var(--sp-2); }

/* formulaire */
.contact__form{ background:var(--white); border:1px solid var(--line); border-top:3px solid var(--accent); border-radius:0; padding:clamp(var(--sp-8), 4vw, var(--sp-12)); }
.field{ display:block; margin-bottom:var(--sp-6); }
.field__label{ display:block; font-family:var(--font-mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted-2); margin-bottom:var(--sp-2); }
.field__label .req{ color:var(--accent); }
.field__opt{ font-size:10px; letter-spacing:.08em; color:var(--muted); text-transform:none; }
.field__input,
.field__textarea{ width:100%; font-family:var(--font-sans); font-size:16px; color:var(--ink-body); background:var(--white); border:1px solid var(--line); border-radius:var(--radius-sm); padding:13px 14px; min-height:var(--tap-min); transition:border-color .12s ease; }
.field__textarea{ min-height:128px; line-height:var(--lh-body); resize:vertical; }
.field__input:focus,
.field__textarea:focus{ border-color:var(--accent); outline:2px solid var(--accent); outline-offset:2px; }
.field__input::placeholder,
.field__textarea::placeholder{ color:color-mix(in srgb, var(--ink) 30%, transparent); }
.contact__error{ color:var(--red); font-size:var(--fs-small); line-height:var(--lh-snug); margin:0 0 var(--sp-4); min-height:1.1em; }
.contact__submit{ width:100%; }
.contact__note{ font-size:var(--fs-small); line-height:var(--lh-body); color:var(--muted); margin:var(--sp-4) 0 0; }

/* confirmation à l'écran (remplace le formulaire) */
.contact__success{ background:var(--green-tint); border:1px solid color-mix(in srgb, var(--green) 40%, transparent); border-radius:var(--radius-sm); padding:clamp(var(--sp-8), 4vw, var(--sp-12)); }
.contact__success-title{ font-family:var(--font-serif); font-size:var(--fs-h3); font-weight:var(--fw-medium); color:var(--ink-body); margin:0 0 var(--sp-3); }
.contact__success-text{ font-size:var(--fs-body); line-height:var(--lh-body); color:var(--body); margin:0; }

/* responsive contact */
@media (max-width:1023px){
  .contact__grid{ grid-template-columns:1fr; gap:var(--sp-12); }
}
@media (max-width:767px){
  .contact{ padding-block:var(--sp-16); }
  .voie .btn,
  .contact__submit{ width:100%; text-align:center; }
}

/* ============================================================
   PAGE DIAGNOSTIC
   Landing avec outil embarqué. Réutilise .hero court, .contact-hero__*,
   .section--*, .btn, .eyebrow, .cta(*), .card__media (placeholder visuel).
   ============================================================ */

/* hero : titre + visuel placeholder (2 colonnes desktop, empilé sinon) */
/* continuité navy : padding-bottom annulé pour fondre avec la section outil (même navy) */
.diag-hero{ display:grid; grid-template-columns:1.1fr .9fr; gap:var(--sp-16); align-items:center; padding-block:clamp(56px, 8vw, 96px) 0; }
.diag-hero .eyebrow{ color:var(--eyebrow-dark); }   /* eyebrow lisible sur navy */

/* ── Aperçu résultat dans le hero ────────────────────────────────
   Masques locaux documentés : palette de statut alignée sur l'outil
   (le niveau page n'a pas de tokens vert/ambre/rouge ni de filets sur navy). */
.diag-preview{
  --dp-green:#3E9C77; --dp-amber:#D6A23E; --dp-red:#C75B45;
  --dp-track:rgba(255,255,255,.12);
  --dp-text:#FFFFFF; --dp-muted:rgba(255,255,255,.55);
  --dp-tag-green-bg:rgba(62,156,119,.18);
  --dp-tag-amber-bg:rgba(214,162,62,.18);
  --dp-tag-red-bg:rgba(199,91,69,.20);

  background:var(--navy-800);
  border:1px solid var(--line-soft-dark);
  border-radius:var(--radius-sm);
  padding:clamp(20px, 3vw, 28px);
  box-shadow:0 1px 3px rgba(0,0,0,.18);
}
.dp-cap{ font-family:var(--font-mono); font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--dp-muted); margin:0 0 20px; }
.dp-row{ margin:0 0 18px; }
.dp-row:last-child{ margin:0; }
.dp-head{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; margin-bottom:9px; }
.dp-name{ font-family:var(--font-sans); font-weight:500; font-size:15px; color:var(--dp-text); }
.dp-tag{ font-family:var(--font-mono); font-size:10.5px; font-weight:500; letter-spacing:.08em;
  text-transform:uppercase; padding:4px 10px; border-radius:99px; white-space:nowrap; }
.dp-tag.is-green{ background:var(--dp-tag-green-bg); color:var(--dp-green); }
.dp-tag.is-amber{ background:var(--dp-tag-amber-bg); color:var(--dp-amber); }
.dp-tag.is-red{ background:var(--dp-tag-red-bg); color:var(--dp-red); }
.dp-bar{ height:8px; background:var(--dp-track); border-radius:99px; overflow:hidden; }
.dp-bar > span{ display:block; height:100%; border-radius:99px; }
.dp-bar > span.is-green{ background:var(--dp-green); }
.dp-bar > span.is-amber{ background:var(--dp-amber); }
.dp-bar > span.is-red{ background:var(--dp-red); }

/* outil diagnostic embarqué : aucun cadre, fond transparent (la section navy porte la couleur) */
/* la hauteur réelle est posée par l'outil (postMessage) ; min-height = simple filet de sécurité */
.diag-frame{ display:block; width:100%; min-height:320px; border:0; background:transparent; }
/* continuité navy : padding-top annulé (hero → outil = un seul bloc bleu), padding-bottom normal avant la section suivante */
.diag--embed{ padding-top:0; }

.diag{ padding-block:var(--sp-24); }
.diag__title{ font-family:var(--font-serif); font-size:var(--fs-h2); line-height:1.22; font-weight:var(--fw-medium); color:var(--ink-body); letter-spacing:var(--ls-title); margin:var(--sp-3) 0 var(--sp-12); max-width:680px; }

/* « Ce que vous en retirez » — liste sobre, marqueur accent */
.diag-list{ list-style:none; margin:0; padding:0; display:grid; gap:var(--sp-6); max-width:760px; }
.diag-list__item{ position:relative; padding-left:var(--sp-8); font-size:var(--fs-body-l); line-height:var(--lh-lede); color:var(--body); }
.diag-list__item::before{ content:""; position:absolute; left:0; top:.62em; width:18px; height:2px; background:var(--accent); }

/* ligne rassurante sous le bouton (sur navy) */
.diag__reassure{ font-size:var(--fs-small); line-height:var(--lh-body); color:var(--on-navy-muted); margin:var(--sp-6) 0 0; }

/* bloc « Ce que le diagnostic mesure » (zone navy, avant l'outil) — 3 plans à filet accent */
.diag-measure{ padding-block:clamp(var(--sp-12), 6vw, var(--sp-16)); }
.diag-measure .eyebrow{ color:var(--eyebrow-dark); }
.diag-measure__title{ font-family:var(--font-serif); font-size:var(--fs-h2); line-height:1.22; font-weight:var(--fw-medium); color:var(--on-navy); letter-spacing:var(--ls-title); margin:var(--sp-3) 0 0; max-width:720px; }
.diag-measure__lead{ font-size:var(--fs-body-l); line-height:var(--lh-lede); color:var(--on-navy-strong); margin:var(--sp-4) 0 0; max-width:620px; }
.diag-plans{ list-style:none; margin:var(--sp-8) 0 0; padding:0; display:grid; gap:var(--sp-3); max-width:800px; }
.diag-plan{ border:1px solid var(--line-dark); border-left:3px solid var(--accent); border-radius:0; background:color-mix(in srgb, var(--on-navy) 5%, transparent); padding:var(--sp-4) var(--sp-6); font-size:var(--fs-body); line-height:var(--lh-body); color:var(--on-navy-strong); }
.diag-plan strong{ color:var(--on-navy); font-weight:var(--fw-medium); }

/* eyebrow centré de la section CTA navy finale (bloc #3) */
.cta__eyebrow{ display:block; font-family:var(--font-mono); font-size:var(--fs-label); letter-spacing:var(--ls-label); text-transform:uppercase; color:var(--eyebrow-dark); margin-bottom:var(--sp-4); }

@media (max-width:1023px){
  .diag-hero{ grid-template-columns:1fr; gap:var(--sp-8); }
}
@media (max-width:767px){
  .diag{ padding-block:var(--sp-16); }
}

/* ============================================================
   PAGE OFFRE — réécriture v4 : 7 sections, 2 fusions
   Lecture « page d'offre » (scannable, CTA visibles). N'utilise PAS
   .cards/.card (pas d'effet cliquable trompeur). Réutilise .hero/
   .contact-hero(__*), .hero__cta, .btn(*), .section--*, .schema/.rail, .cta(*).
   ============================================================ */
.offre{ padding-block:var(--sp-24); }
.offre--sep{ border-top:1px solid var(--line); }      /* respiration entre deux sections de même fond */
.offre__title{ font-family:var(--font-serif); font-size:var(--fs-h2); line-height:1.22; font-weight:var(--fw-medium); color:var(--ink-body); letter-spacing:var(--ls-title); margin:var(--sp-3) 0 var(--sp-6); max-width:740px; }
.offre__lead{ font-size:var(--fs-body-l); line-height:var(--lh-lede); color:var(--body); max-width:680px; margin:0; }
.offre__p{ font-size:var(--fs-body); line-height:var(--lh-body); color:var(--body); max-width:680px; margin:0; }

/* hero offre — 2 colonnes + fiche infos (colonne droite « invisible ») */
.offre-hero{ max-width:none; display:grid; grid-template-columns:minmax(0,1.6fr) minmax(0,1fr); gap:clamp(var(--sp-12), 5vw, var(--sp-16)); align-items:start; }
/* fiche : micro-preuves empilées, filets fins, sans fond ni cadre */
.offre-facts{ margin:0; padding:0; list-style:none; }
.offre-facts__row{ padding:var(--sp-4) 0; border-top:1px solid var(--line-soft-dark); }
.offre-facts__row:last-child{ border-bottom:1px solid var(--line-soft-dark); }
.offre-facts__value{ font-size:var(--fs-body); color:var(--on-navy-strong); }
/* lien retour vers le hub /offres (haut du hero des pages détaillées) */
.offre-back{ display:block; font-family:var(--font-mono); font-size:var(--fs-small); letter-spacing:.04em; color:var(--on-navy-soft); margin-bottom:var(--sp-4); }
.offre-back:hover{ color:var(--on-navy); }
@media (max-width:1023px){
  .offre-hero{ grid-template-columns:1fr; gap:var(--sp-8); }
  .offre-hero__aside{ max-width:420px; }
}

/* emphase multi-lignes sur fond clair (filet accent) */
.offre-emph{ list-style:none; margin:var(--sp-8) 0 0; padding:0 0 0 var(--sp-6); border-left:3px solid var(--accent); display:grid; gap:var(--sp-3); max-width:800px; }
.offre-emph li{ font-family:var(--font-serif); font-size:var(--fs-h3); line-height:var(--lh-snug); color:var(--ink-body); }

/* « Ce que j'analyse » — liste de définition 2 colonnes (sobre, sans carte) */
.deflist{ margin:var(--sp-8) 0 0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-8) var(--sp-12); max-width:920px; }
.deflist__item{ margin:0; }
.deflist__term{ font-family:var(--font-serif); font-size:var(--fs-h3); font-weight:var(--fw-medium); color:var(--ink-body); letter-spacing:var(--ls-title); margin:0 0 var(--sp-2); }
.deflist__desc{ font-size:15px; line-height:var(--lh-body); color:var(--muted); margin:0; }

/* hub /offres : tableau d'orientation — desktop vrai <table>, mobile empilé */
.orient{ width:100%; max-width:920px; border-collapse:collapse; margin-top:var(--sp-8); font-size:var(--fs-body); }
.orient th, .orient td{ text-align:left; padding:var(--sp-4) var(--sp-6); border-bottom:1px solid var(--line); vertical-align:top; line-height:var(--lh-snug); }
.orient th:first-child, .orient td:first-child{ padding-left:0; }
.orient thead th{ font-family:var(--font-mono); font-size:var(--fs-label); letter-spacing:var(--ls-label); text-transform:uppercase; color:var(--muted-2); font-weight:var(--fw-medium); }
.orient tbody td:first-child{ color:var(--body); }
.orient tbody td:last-child{ font-family:var(--font-serif); color:var(--ink-body); }
.orient tbody tr:last-child td{ border-bottom:0; }
@media (max-width:767px){
  .orient thead{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
  .orient, .orient tbody, .orient tr, .orient td{ display:block; width:100%; }
  .orient tr{ border:1px solid var(--line); border-radius:var(--radius-sm); padding:var(--sp-4) var(--sp-6); margin-bottom:var(--sp-4); }
  .orient td{ border:0; padding:var(--sp-1) 0; }
  .orient tbody td:first-child{ font-weight:var(--fw-medium); color:var(--ink-body); }
  .orient tbody td:last-child{ color:var(--accent); }
  .orient tbody td:last-child::before{ content:"→ "; }
}

/* « Ce que ce n'est pas » — lignes atténuées */
.offre-not{ list-style:none; margin:var(--sp-8) 0 var(--sp-8); padding:0; display:grid; gap:var(--sp-3); max-width:800px; }
.offre-not li{ position:relative; padding-left:var(--sp-6); font-size:var(--fs-body-l); line-height:var(--lh-snug); color:var(--muted); }
.offre-not li::before{ content:"—"; position:absolute; left:0; color:var(--muted-2); }

/* « Méthode » — bandeau process : 3 étapes (ni carte, ni lien, ni survol) */
.offre__fil-note{ font-size:var(--fs-body); line-height:var(--lh-body); color:var(--muted); margin:var(--sp-6) 0 0; max-width:640px; }
.process{ display:grid; grid-template-columns:repeat(3,1fr); margin-top:var(--sp-12); border-top:1px solid var(--line); }
.process__step{ padding:var(--sp-8) var(--sp-8) 0; border-right:1px solid var(--line); }
.process__step:first-child{ padding-left:0; }
.process__step:last-child{ padding-right:0; border-right:0; }
.process__num{ font-family:var(--font-mono); font-size:12px; letter-spacing:.16em; color:var(--accent); }
.process__name{ font-family:var(--font-serif); font-size:var(--fs-h3); font-weight:var(--fw-medium); color:var(--ink-body); letter-spacing:var(--ls-title); margin:var(--sp-3) 0 var(--sp-1); }
.process__dur{ font-family:var(--font-mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted-2); margin-bottom:var(--sp-3); }
.process__text{ font-size:15px; line-height:var(--lh-body); color:var(--muted); margin:0; }

/* « Ce que vous obtenez » — panneau livrables à filet accent (motif .prio) */
.offre-panel{ background:var(--white); border:1px solid var(--line); border-left:3px solid var(--accent); border-radius:0; padding:clamp(var(--sp-6), 3vw, var(--sp-8)); margin-top:var(--sp-8); max-width:820px; }
.offre-panel__list{ list-style:none; margin:0; padding:0; display:grid; gap:var(--sp-4); }
.offre-panel__item{ position:relative; padding-left:var(--sp-6); font-size:var(--fs-body-l); line-height:var(--lh-snug); color:var(--ink-body); }
.offre-panel__item::before{ content:""; position:absolute; left:0; top:.6em; width:8px; height:8px; background:var(--accent); }

/* encadré résultat (serif, distinct du panneau) */
.offre-callout{ background:var(--white); border:1px solid var(--line); border-left:3px solid var(--accent); border-radius:0; padding:clamp(var(--sp-6), 3vw, var(--sp-8)); margin:var(--sp-6) 0 0; max-width:820px; font-family:var(--font-serif); font-size:var(--fs-h3); line-height:var(--lh-snug); color:var(--ink-body); }

/* mention fine (ex. « Format : … ») */
.offre-fine{ font-family:var(--font-mono); font-size:var(--fs-small); letter-spacing:.04em; color:var(--muted-2); margin:var(--sp-6) 0 0; }

/* surtitre fiche hero (« En bref ») */
.offre-aside__head{ margin-bottom:var(--sp-4); }

/* intertitre de section (ex. « Ce que ce diagnostic n'est pas ») */
.offre-subhead{ font-family:var(--font-serif); font-size:var(--fs-h3); font-weight:var(--fw-medium); color:var(--ink-body); letter-spacing:var(--ls-title); margin:var(--sp-12) 0 0; }

/* exemple représentatif (panneau filet accent, plusieurs paragraphes) */
.offre-example{ background:var(--white); border:1px solid var(--line); border-left:3px solid var(--accent); border-radius:0; padding:clamp(var(--sp-8), 4vw, var(--sp-12)); margin-top:var(--sp-8); max-width:860px; }
.offre-example p{ font-size:var(--fs-body); line-height:var(--lh-lede); color:var(--body); margin:0 0 var(--sp-4); }
.offre-example p:last-of-type{ margin-bottom:0; }
.offre-example__note{ font-family:var(--font-mono); font-size:var(--fs-small); letter-spacing:.04em; color:var(--muted-2); margin:var(--sp-6) 0 0; }

/* FAQ — <details>/<summary> natifs, accessibles */
.faq{ margin-top:var(--sp-8); max-width:840px; }
.faq__item{ border-top:1px solid var(--line); }
.faq__item:last-child{ border-bottom:1px solid var(--line); }
.faq__q{ display:flex; justify-content:space-between; align-items:center; gap:var(--sp-6); cursor:pointer; list-style:none; padding:var(--sp-6) 0; font-family:var(--font-serif); font-size:var(--fs-h3); line-height:var(--lh-snug); font-weight:var(--fw-medium); color:var(--ink-body); }
.faq__q::-webkit-details-marker{ display:none; }
.faq__q::after{ content:""; flex:none; width:9px; height:9px; border-right:2px solid var(--accent); border-bottom:2px solid var(--accent); transform:rotate(45deg); transition:transform var(--transition); }
.faq__item[open] .faq__q::after{ transform:rotate(-135deg); }
.faq__a{ font-size:var(--fs-body); line-height:var(--lh-body); color:var(--body); margin:0 0 var(--sp-6); max-width:760px; }

@media (max-width:1023px){
  .process{ grid-template-columns:1fr 1fr; }
  .process__step:nth-child(2){ border-right:0; }
  .process__step:nth-child(3){ padding-left:0; border-top:1px solid var(--line); padding-top:var(--sp-8); }
}
@media (max-width:767px){
  .offre{ padding-block:var(--sp-16); }
  .process{ grid-template-columns:1fr; border-top:0; }
  .process__step{ padding:var(--sp-6) 0; border-right:0; border-top:1px solid var(--line); }
  .process__step:first-child{ border-top:0; padding-top:0; }
  .deflist{ grid-template-columns:1fr; }
}

/* ============================================================
   PAGE OFFRE CROISSANCE
   Réutilise le template Offre. Réintègre .checklist (utilisée ici en
   Périmètre ; elle avait été retirée de l'Offre Diagnostic en v4).
   ============================================================ */
.checklist{ list-style:none; margin:var(--sp-8) 0 0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-4) var(--sp-12); max-width:820px; }
.checklist__item{ position:relative; padding-left:var(--sp-6); font-size:var(--fs-body); line-height:var(--lh-body); color:var(--body); }
.checklist__item::before{ content:""; position:absolute; left:0; top:.55em; width:8px; height:8px; background:var(--accent); }
@media (max-width:767px){
  .checklist{ grid-template-columns:1fr; }
}