/*
  COMPOSANTS — header/nav, boutons, cartes, sections. Dépend de
  tokens.css et base.css (à charger avant).

  Formes, espacements, boutons, cartes, bordures, ombres et animations
  alignés sur le Brand Book (chapitre 14, reçu et intégré le
  19/07/2026). Voir tokens.css pour les valeurs de référence.
*/

/* HEADER / NAV */
header.site{
  padding:18px 0;border-bottom:1px solid transparent;background:rgba(255,255,255,.9);
  backdrop-filter:blur(8px);position:sticky;top:0;z-index:50;transition:box-shadow .3s ease, border-color .3s ease;
}
header.site.scrolled{box-shadow:var(--shadow-rare);border-bottom-color:var(--sage-pale);}
header .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;}
.logo{font-family:var(--font-display);font-size:19px;color:var(--forest);white-space:nowrap;text-decoration:none;}
nav.main{display:none;gap:30px;font-size:14px;}
nav.main a{position:relative;font-family:var(--font-body);font-weight:500;text-decoration:none;color:var(--forest);padding-bottom:3px;transition:color .2s;}
nav.main a::after{content:'';position:absolute;left:0;bottom:0;height:1px;width:0;background:var(--blush);transition:width .25s ease;}
nav.main a:hover::after{width:100%;}
.nav-pending{font-family:var(--font-body);font-weight:500;color:var(--forest);opacity:.5;cursor:default;user-select:none;}
.header-actions{display:flex;align-items:center;gap:14px;}
.nav-toggle{display:inline-flex;flex-direction:column;justify-content:center;align-items:center;gap:5px;width:40px;height:40px;padding:0;border:none;background:transparent;cursor:pointer;}
.nav-toggle span{display:block;width:22px;height:2px;background:var(--forest);border-radius:2px;transition:transform .25s ease, opacity .25s ease;}
header.site.nav-open .nav-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg);}
header.site.nav-open .nav-toggle span:nth-child(2){opacity:0;}
header.site.nav-open .nav-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
nav.main .nav-cta-mobile{display:none;}

/* Repli navigation mobile sans JavaScript (27/07/2026, sur validation de
   Lantosoa) : cf. commentaire dans _includes/header.html pour le
   contexte complet. display:flex par defaut (utile uniquement sur
   mobile sans JS, cf. media query plus bas qui le masque a partir de
   720px) ; a:not(.btn) reprend une apparence de lien de navigation
   simple sans dupliquer les styles de .btn ; le lien "Mes
   accompagnements" garde son apparence de bouton existante (.btn
   .btn-primary), seul un espacement au-dessus et align-self:flex-start
   sont ajoutes pour eviter qu'il ne s'etire sur toute la largeur en
   colonne flex. */
.noscript-nav{display:flex;flex-direction:column;gap:2px;padding:6px 24px 16px;border-top:1px solid var(--sage-pale);}
.noscript-nav a:not(.btn){padding:12px 0;font-family:var(--font-body);font-weight:500;font-size:15.5px;color:var(--forest);text-decoration:none;border-bottom:1px solid var(--sage-pale);}
.noscript-nav a.btn{margin-top:10px;align-self:flex-start;}

/* BOUTONS / LIENS — Brand Book chapitre 14 : deux familles seulement
   (Principal, Secondaire), rayon 10px, hauteur/zone tactile min 48px,
   survol = élévation max 2px (pas d'ombre lourde). */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:48px;padding:13px 26px;border-radius:var(--radius-control);
  border:1.5px solid transparent;cursor:pointer;
  font-family:var(--font-body);font-weight:600;font-size:14px;letter-spacing:.02em;
  text-decoration:none;transition:transform .25s ease;white-space:nowrap;
}
.btn-primary{background:var(--forest);color:var(--white);}
.btn-primary:hover{transform:translateY(-2px);}
.btn-ghost{background:transparent;color:var(--forest);border-color:var(--forest);}
.btn-ghost:hover{transform:translateY(-2px);}
.btn-sm{min-height:40px;padding:10px 20px;font-size:13px;}
.link-soft{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:500;color:var(--forest);text-decoration:underline;text-underline-offset:3px;transition:opacity .2s;}
.link-soft:hover{opacity:.75;}

/* SECTIONS GÉNÉRIQUES — rythme vertical Brand Book chapitre 14 :
   96–128px sur ordinateur, 64–80px sur mobile. */
section{padding:64px 0;position:relative;overflow:hidden;}
.bg-blush{background:var(--blush-pale);}
.bg-sage{background:var(--sage-pale);}
.bg-forest{background:var(--forest);color:#fff;}
.eyebrow{font-family:var(--font-display);font-size:15px;color:var(--blush);margin-bottom:14px;}
/* Classe commune ajoutee le 26/07/2026 (phase d'harmonisation visuelle,
   corrections transverses validees par Lantosoa) : factorise le
   style="font-size:clamp(23px,3.2vw,32px);" repete en ligne sur 5
   titres de section (#methode, #parcours, #offres, #testimonials,
   #faq) et l'applique egalement a #recognition, dont le h2 n'avait
   aucun override et s'affichait a la taille par defaut du navigateur
   (24px), soit 25% plus petit que tous les autres titres de section
   -- ecart mesure et signale a l'audit visuel du 26/07/2026, corrige
   ici sans autre changement de contenu ni de couleur. */
.section-title{font-size:clamp(23px,3.2vw,32px);}
/* Correction ciblée — audit du 25/07/2026 de la section "Ce que tu
   portes en silence" (#recognition) : l'eyebrow par défaut utilise
   --blush (#BD9D92), or le Brand Book v3 (chapitre 10) interdit
   explicitement cette teinte pour du texte ("ne doit pas servir aux
   petits textes"). Contraste mesuré sur le fond de cette section
   (--blush-pale #E6D6D1) : 1,77:1 — bien en dessous du minimum WCAG
   AA (4,5:1). Corrigé ici avec --forest, déjà validé par le Brand
   Book pour ce même fond (5,85:1, chapitre 10). Cette règle .eyebrow
   par défaut reste utilisée telle quelle dans 7 autres sections de la
   page (même potentiel problème de contraste) — non touchées ici,
   scope de cette intervention limité à #recognition ; signalé à
   Lantosoa pour arbitrer un passage global. */
#recognition .eyebrow{color:var(--forest);}

/* HERO */
.hero{padding:48px 0 24px;}
.hero .wrap{display:grid;grid-template-columns:1fr;gap:40px;align-items:center;}
.hero-copy{text-align:center;}
.hero h1{font-size:clamp(28px,5vw,46px);max-width:16ch;margin:0 auto .55em;}
.hero .lede{max-width:52ch;margin:0 auto 22px;font-size:16.5px;}
.credentials{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 18px;font-size:12.5px;color:var(--forest);letter-spacing:.02em;margin-bottom:26px;}
.credentials span{display:inline-flex;align-items:center;gap:6px;}
.credentials span::before{content:'';width:4px;height:4px;border-radius:50%;background:var(--sage);}
.credentials span:first-child::before{display:none;}

/* Illustration du hero — logo officiel intégré le 22/07/2026 (voir
   commentaire dans index.html). Tailles mobile ci-dessous ; override
   desktop dans la media query plus bas. */
.hero-visual{display:flex;justify-content:center;margin-top:8px;}
.hero-logo{width:100%;max-width:280px;height:auto;}

/* RECOGNITION */
.rec-grid{display:grid;grid-template-columns:1fr;gap:14px;margin-top:36px;max-width:640px;margin-left:auto;margin-right:auto;}
.rec-item{background:var(--white);border:none;box-shadow:var(--shadow-rare);border-radius:var(--radius-card);padding:18px 22px;font-size:15px;color:var(--forest);}
/* Harmonisation visuelle, phase 2 -- 26/07/2026 : carte plus douce et
   statique, sur validation de Lantosoa. Bordure retiree, remplacee par
   --shadow-rare (token deja existant, deja utilise par .eco-card.featured
   et l'en-tete au defilement -- aucune nouvelle valeur). Aucun survol
   ajoute : ces cartes ne sont pas cliquables. */
.pull-quote{max-width:34ch;margin:44px auto 0;text-align:center;}
.pull-quote .ask{font-size:14.5px;color:var(--forest);font-style:normal;margin-bottom:10px;}
.pull-quote .answer{font-family:var(--font-display);font-size:clamp(19px,2.6vw,24px);color:var(--forest);}
.source-note{text-align:center;font-size:11px;color:var(--forest);opacity:.65;margin-top:28px;}

/* VALUE STRIP */
.value-strip{padding:54px 0;text-align:center;}
.value-strip p{font-family:var(--font-display);font-size:clamp(19px,2.6vw,25px);color:var(--forest);max-width:20ch;margin:0 auto;}
/* Correction ciblée — audit du 25/07/2026 du bloc transition "On
   construit avec ton énergie. Pas contre elle." : em,.accent-italic
   (base.css) utilise --blush (#BD9D92) sur ce fond blanc, soit 2,50:1
   — sous le minimum WCAG AA pour texte normal (4,5:1) ET pour texte
   large (3:1), donc pas de dérogation possible ici. Corrigé avec
   --forest (8,24:1 sur blanc), scopé à cette section uniquement — la
   règle globale em,.accent-italic dans base.css n'est pas modifiée. */
.value-strip em{color:var(--forest);}

/* METHOD */
/* Correction ciblée — audit du 25/07/2026 de la section "Corps · Cœur
   · Âme™" (#methode) : l'eyebrow par défaut (--blush, #BD9D92) donne
   1,78:1 sur le fond --sage-pale (#D7DBD5) de cette section — même
   type de non-conformité que celle corrigée le 25/07/2026 dans
   #recognition. Corrigé avec --forest (5,88:1 sur --sage-pale),
   scopé à #methode uniquement, conformément à la consigne de
   Lantosoa de traiter les eyebrows section par section plutôt que
   globalement. */
#methode .eyebrow{color:var(--forest);}
.method-intro{text-align:center;max-width:46ch;margin:0 auto;}
.method-grid{display:grid;grid-template-columns:1fr;gap:18px;margin-top:40px;}
.method-card{background:var(--white);border:1px solid var(--border-color);border-radius:var(--radius-card);padding:30px 24px;transition:transform .25s ease;}
.method-card:hover{transform:translateY(-2px);}
.method-num{width:36px;height:36px;border-radius:50%;background:var(--sage);color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-size:14px;margin-bottom:16px;}
/* Correction ciblée — audit du 25/07/2026 : le chiffre "2" (carte
   "Cœur") était blanc sur fond --blush, soit 2,50:1 — sous le minimum
   WCAG AA même pour un badge de cette taille. Testé --forest en texte
   sur fond --blush (option demandée par Lantosoa en priorité) : 3,30:1,
   toujours insuffisant. Repli appliqué comme convenu : fond --forest
   (chiffre blanc existant, 8,24:1, conforme) avec une bordure --blush
   de 2px pour conserver un accent visuel de cette teinte sur ce badge.
   Les badges des cartes "Corps" (--sage) et "Âme" (--forest, sans
   bordure) ne sont pas modifiés. */
.method-card:nth-child(2) .method-num{background:var(--forest);border:2px solid var(--blush);}
.method-card:nth-child(3) .method-num{background:var(--forest);}
.method-card h3{font-size:19px;margin-bottom:8px;}
.method-card p{font-size:14.5px;margin:0;max-width:none;}

/* STORY */
.story .wrap{display:grid;grid-template-columns:1fr;gap:36px;align-items:center;}
.story-photo{border-radius:var(--radius-image);overflow:hidden;aspect-ratio:3/4;}
.story-photo img{width:100%;height:100%;object-fit:cover;}
.story blockquote{font-family:var(--font-display);font-weight:400;font-size:clamp(19px,2.8vw,25px);line-height:1.45;margin:0 0 20px;color:#fff;}
/* Correction ciblée — audit du 25/07/2026 de "Mon histoire" (#histoire) :
   #DDE5D9 et #B9CDB6 étaient deux teintes personnalisées hors des 8
   couleurs officielles de la palette (accessibles mais non alignées,
   point signalé le 20/07/2026, tranché aujourd'hui par Lantosoa).
   Remplacées par les tokens officiels les plus proches par distance
   RGB, contraste WCAG AA revérifié sur --forest après coup :
   #DDE5D9 → --sage-pale (#D7DBD5, distance 12,3 — la plus proche des 8
   tokens ; 5,88:1, conforme). #B9CDB6 → --blush-light (#E2C1B6,
   distance 42,7 — la plus proche ; 4,92:1, conforme, juste au-dessus
   du seuil 4,5:1). Aucune nouvelle couleur inventée. */
.story p.body{color:var(--sage-pale);font-size:14.5px;max-width:none;}
.story .credentials-dark{color:var(--blush-light);font-size:12.5px;margin-top:18px;}
.story a.link{color:var(--blush-pale);text-decoration:underline;text-underline-offset:3px;font-size:14px;}

/* PARCOURS (carte parcours — Brand Book chapitre 14 : 3 familles de
   cartes seulement, celle-ci présente les 5 étapes de l'écosystème). */
/* Correction ciblée — audit du 25/07/2026 : même non-conformité que
   #methode/#recognition (fond --sage-pale, eyebrow --blush par défaut
   = 1,78:1). Corrigé avec --forest (5,88:1), scopé à #parcours. */
#parcours .eyebrow{color:var(--forest);}
.parcours-grid{display:grid;grid-template-columns:1fr;gap:28px;margin-top:40px;}
.parcours-card{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;}
.parcours-icon{width:72px;height:72px;margin-bottom:10px;}
/* Ajout ciblé — demande de Lantosoa du 25/07/2026 : fin contour
   circulaire --forest autour des 5 médaillons, pour améliorer la
   séparation visuelle de 3 d'entre eux sur le fond --sage-pale
   (mesurée le 25/07/2026 : Découvrir 1,22:1, Être soutenue 1,04:1,
   Se situer 1,01:1) sans toucher aux fichiers PNG ni à leur dessin.
   Implémenté en box-shadow (pas border) pour ne changer ni la taille
   ni le recadrage de l'image : box-shadow n'entre pas dans le modèle
   de boîte et ne modifie donc ni width/height ni les espacements
   environnants. Épaisseur 1px, un seul token (--forest), traitement
   strictement identique sur les 5 médaillons. */
.parcours-icon img{width:72px;height:72px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 1px var(--forest);}
/* Médaillon provisoire tant que les 5 SVG officiels ne sont pas reçus
   comme fichiers exploitables (cf. MEMORY.md, 19/07/2026) — un simple
   cercle de la palette, pas une recréation du pictogramme. */
.parcours-icon-placeholder{display:block;width:72px;height:72px;border-radius:50%;background:var(--sage-pale);border:1.5px dashed var(--sage);}
.parcours-card h3{font-size:17px;margin-bottom:2px;}
.parcours-element{font-size:12px;letter-spacing:.03em;text-transform:uppercase;color:var(--forest);opacity:.75;margin-bottom:6px;}
.parcours-card p:not(.parcours-element){font-size:14px;max-width:28ch;}

/* ECOSYSTEM / OFFRES */
/* Correction ciblée — audit du 25/07/2026 : même non-conformité que
   les sections précédentes, mais ici sur fond blanc (#offres n'a pas
   de classe bg-*) : --blush par défaut = 2,50:1 sur blanc, sous le
   minimum WCAG AA (4,5:1). Corrigé avec --forest (8,24:1), scopé à
   #offres, même traitement section par section que le reste du site. */
#offres .eyebrow{color:var(--forest);}
.eco-grid{display:grid;grid-template-columns:1fr;gap:18px;margin-top:40px;}
.eco-card{background:var(--white);border:1px solid var(--border-color);border-radius:var(--radius-card);padding:28px 24px;display:flex;flex-direction:column;gap:10px;transition:transform .25s ease, box-shadow .25s ease;box-shadow:var(--shadow-rare);}
/* Harmonisation visuelle, phase 2 -- 26/07/2026 : differenciation des
   cartes "offres" comme cartes commerciales, sur validation de Lantosoa.
   Ombre legere et permanente ajoutee (--shadow-rare, token deja existant,
   deja utilise par .eco-card.featured et l'en-tete au defilement --
   aucune nouvelle valeur). Bordure, couleurs, contenu et hierarchie
   inchanges. */
.eco-card:hover{transform:translateY(-2px);}
.eco-tag{font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--forest);}
.eco-card h3{font-size:19px;margin:2px 0 0;}
.eco-card p{font-size:14px;flex-grow:1;max-width:none;}
.eco-card .fine{font-size:12px;color:var(--forest);}
/* .eco-card.featured et .eco-card.featured::before supprimees le
   27/07/2026 (nettoyage de cloture de l'harmonisation, sur validation
   explicite de Lantosoa) : regle CSS morte, aucune offre n'ayant
   featured:true (les 3 sont a false dans _data/offers.yml, decision du
   19/07/2026). Le mecanisme Liquid ({% if offer.featured %}) et le
   champ featured dans offers.yml restent en place -- seule la regle
   CSS a ete retiree, sur instruction explicite de ne modifier aucune
   autre regle. */

/* TÉMOIGNAGES (carrousel) */
/* Correction ciblée — audit du 25/07/2026 : cette section réutilise le
   même fond --blush-pale que #recognition avant sa propre correction
   du 25/07/2026 — même non-conformité (eyebrow --blush par défaut =
   1,77:1). Un id="testimonials" a été ajouté à la section (index.html)
   pour permettre ce scoping, à l'identique de #recognition. Corrigé
   avec --forest (5,85:1). */
#testimonials .eyebrow{color:var(--forest);}
.testimonial-wrap{max-width:680px;margin:40px auto 0;text-align:center;}
.t-track{position:relative;min-height:190px;}
.t-slide{position:absolute;inset:0;opacity:0;transform:translateY(8px);transition:opacity .5s ease, transform .5s ease;pointer-events:none;}
.t-slide.active{opacity:1;transform:translateY(0);pointer-events:auto;}
.t-slide blockquote{font-family:var(--font-display);font-size:clamp(19px,2.6vw,24px);font-style:normal;max-width:32ch;margin:0 auto 14px;color:var(--forest);}
.t-slide cite{font-style:normal;font-size:12.5px;color:var(--forest);}
.t-slide cite b{font-weight:600;}
.t-dots{display:flex;justify-content:center;gap:8px;margin-top:24px;}
/* Correction ciblée — audit du 25/07/2026 : les points inactifs en
   --sage-pale plein donnaient 1,01:1 sur le fond --blush-pale de cette
   section (quasi invisibles). Traitement officiel accessible demandé
   par Lantosoa : cercle transparent à contour --forest pour l'état
   inactif (contour/fond 5,85:1, largement conforme), point actif
   toujours rempli --forest. Zone d'activation élargie via ::after
   (hit area ~24x24px) sans agrandir le point visible ni changer
   l'espacement entre points (le pseudo-élément est en position
   absolue, hors flux, le gap flex n'est donc pas affecté). Libellés
   accessibles déjà posés par main.js (aria-label="Témoignage N" par
   point) — vérifiés, inchangés. */
.t-dots button{position:relative;width:8px;height:8px;border-radius:50%;border:1.5px solid var(--forest);background:transparent;cursor:pointer;padding:0;transition:background .25s, transform .25s;}
.t-dots button::after{content:'';position:absolute;top:-8px;left:-8px;right:-8px;bottom:-8px;}
.t-dots button.active{background:var(--forest);transform:scale(1.3);}

/* Le correctif de contraste #testimonials .source-note{opacity:1;}
   (posé plus tôt le 25/07/2026) est devenu sans objet : la note a été
   masquée de l'affichage public le même jour à la demande de Lantosoa
   (conservée en commentaire dans index.html) -- règle retirée pour ne
   pas laisser de CSS mort ciblant un élément qui ne rend plus rien. */

/* FAQ */
/* Correction ciblée — audit du 25/07/2026 : même non-conformité que
   #offres (fond blanc par défaut, pas de classe bg-*) : --blush par
   défaut = 2,50:1 sur blanc. Un id="faq" a été ajouté à la section
   (elle n'en avait pas) pour permettre ce scoping. Corrigé avec
   --forest (8,24:1). */
#faq .eyebrow{color:var(--forest);}
.faq-list{max-width:720px;margin:40px auto 0;display:flex;flex-direction:column;gap:10px;}
details{background:var(--white);border:1px solid var(--border-color);border-radius:var(--radius-card);padding:6px 22px;transition:transform .25s ease;}
/* Survol discret ajoute le 26/07/2026 (harmonisation, consigne de
   Lantosoa) : les questions de FAQ sont reellement interactives
   (accordeon cliquable) mais n'avaient aucun retour au survol,
   contrairement aux cartes methode/offres qui ont deja ce meme
   translateY(-2px). Meme traitement applique ici pour la
   coherence -- aucune carte de reconnaissance n'est concernee
   (non cliquables, consigne explicite de ne pas leur ajouter cet
   effet). */
details:hover{transform:translateY(-2px);}
details summary{cursor:pointer;font-family:var(--font-body);font-weight:600;font-size:15.5px;color:var(--forest);padding:16px 0;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:14px;}
details summary::-webkit-details-marker{display:none;}
/* Correction ciblée — audit du 25/07/2026 : l'indicateur +/× utilisait
   --blush (2,50:1 sur le fond blanc des cartes details) -- sous le
   minimum WCAG 1.4.11 pour un composant d'interface non textuel
   (3:1), et bien sûr sous 4,5:1 si on le traite comme du texte.
   Corrigé avec --forest (8,24:1), cohérent avec le texte de la
   question juste à côté. */
details summary::after{content:'+';font-size:20px;color:var(--forest);transition:transform .25s ease;}
details[open] summary::after{transform:rotate(45deg);}
details p{padding-bottom:18px;margin:0;font-size:14.5px;max-width:none;}

/* NEWSLETTER / CTA FINAL */
.final-cta{text-align:center;}
.final-cta h2{font-size:clamp(22px,3.2vw,30px);max-width:18ch;margin:0 auto 12px;}
.final-cta p{max-width:40ch;margin:0 auto 26px;}
.cta-form{display:flex;flex-direction:column;gap:10px;max-width:380px;margin:0 auto;}
/* Label accessible du champ newsletter (26/07/2026) : masque
   visuellement, scope a ce formulaire uniquement -- n'affecte aucun
   autre element du site. Pattern sr-only standard (retire de la mise
   en page sans etre supprime du DOM). */
.cta-form label.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;}
/* Bordure forest 1px + focus renforce (26/07/2026, arbitrage de
   Lantosoa) : le blanc du champ sur le fond --sage-pale de cette
   section ne donnait que 1,4:1 et la bordure precedente (couleur
   identique au fond) etait invisible. Bordure forest sur sage-pale =
   5,88:1, sur le fond blanc du champ = 8,24:1 -- conforme des deux
   cotes. Le focus remplace l'anneau par defaut du navigateur par un
   contour force egalement en forest, plus epais, pour un etat
   "renforce" distinct de l'etat au repos. */
.cta-form input{min-height:48px;padding:14px 18px;border-radius:var(--radius-control);border:1px solid var(--forest);font-family:var(--font-body);font-size:14px;background:#fff;color:var(--forest);}
.cta-form input:focus{outline:2px solid var(--forest);outline-offset:2px;}
.cta-note{font-size:11.5px;color:var(--forest);margin-top:14px;}

/* FOOTER */
footer{padding:48px 0 36px;border-top:1px solid var(--border-color);}
footer .wrap{display:flex;flex-direction:column;gap:24px;}
.footer-top{display:flex;flex-direction:column;gap:20px;}
.footer-nav{display:flex;flex-wrap:wrap;gap:16px;font-size:13px;font-weight:500;color:var(--forest);}
.footer-nav a{text-decoration:none;}
.footer-bottom{font-size:11px;color:var(--forest);display:flex;flex-direction:column;gap:6px;}

@media(min-width:720px){
  section{padding:96px 0;}
  /* Harmonisation visuelle, phase 2 -- 26/07/2026 : variation de rythme
     vertical sur ordinateur uniquement, sur validation de Lantosoa.
     #offres passe de 96px a 128px -- tokens Brand Book --space-9/
     --space-10, aucune valeur inventee. Rythme mobile (64px, regle de
     base plus haut) strictement inchange. Le bloc newsletter final
     (.final-cta) reste explicitement a 96px sur ordinateur, sur
     consigne de Lantosoa. */
  #offres{padding:128px 0;}
  nav.main{display:flex;}
  /* Repli sans JS masque a partir de 720px (27/07/2026) : a cette
     largeur, nav.main est deja visible par cette regle CSS pure,
     independamment du JS -- verifie empiriquement le 27/07/2026 (nav.main
     est en display:flex sans JS a 1440px). Sans ce masquage, .noscript-nav
     s'afficherait en double avec nav.main sur desktop sans JS. */
  .noscript-nav{display:none;}
  .hero .wrap{grid-template-columns:1.1fr .9fr;text-align:left;}
  .hero-copy{text-align:left;}
  .hero .lede{margin-left:0;}
  .credentials{justify-content:flex-start;}
  /* Logo intégré le 22/07/2026 : la colonne de droite (0.9fr, règle de
     base .hero .wrap plus haut) accueille désormais le logo au lieu de
     rester vide. */
  .hero-visual{justify-content:flex-end;margin-top:0;}
  .hero-logo{max-width:440px;}
  .nav-toggle{display:none;}
  .rec-grid{grid-template-columns:1fr 1fr;}
  .method-grid{grid-template-columns:repeat(3,1fr);}
  .parcours-grid{grid-template-columns:repeat(3,1fr);}
  .eco-grid{grid-template-columns:repeat(3,1fr);}
  .story .wrap{grid-template-columns:.85fr 1.15fr;}
  .footer-top{flex-direction:row;justify-content:space-between;align-items:center;}
}

@media(min-width:960px){
  .parcours-grid{grid-template-columns:repeat(5,1fr);}
}

/* Parcours — espacements verticaux resserrés sur mobile uniquement
   (-15 à -20%, validé le 19/07/2026). Rendu ordinateur inchangé :
   ces règles sont scopées à #parcours et à max-width:719px, elles ne
   touchent ni le rythme vertical des autres sections ni le desktop. */
@media(max-width:719px){
  #parcours{padding:52px 0;}
  #parcours .parcours-grid{gap:23px;margin-top:32px;}
  #parcours .parcours-icon{margin-bottom:8px;}
  #parcours .parcours-card{gap:5px;}
  #parcours .parcours-element{margin-bottom:5px;}

  /* Photo "Mon histoire" — le ratio 3/4 (pensé pour la colonne étroite
     du desktop) donne un bloc disproportionné en une colonne mobile
     pleine largeur (~456px de haut pour un écran de 390px de large).
     Ratio raccourci uniquement sur mobile (20/07/2026), desktop
     inchangé. */
  .story-photo{aspect-ratio:4/3;}

  /* Bouton CTA du header masqué sur mobile — ajouté le 22/07/2026 en
     même temps que le hamburger : logo (~148px) + bouton "Mes
     accompagnements" (~194px) + toggle (40px) dépassent la largeur
     disponible sur un écran de 390px (overflow mesuré : ~73px), ce qui
     poussait le bouton hamburger hors de l'écran. Le CTA reste
     entièrement inchangé et visible sur ordinateur (règle scopée à
     max-width:719px) ; sur mobile il reste atteignable via le hero
     ("Découvrir mon histoire") et la section Offres plus bas sur la
     page. Signalé à Lantosoa comme correction technique, pas comme
     décision de contenu. */
  header .header-actions .btn{display:none;}

  /* Bouton hamburger masque par defaut sur mobile (27/07/2026, sur
     validation de Lantosoa) : sans JS, ce bouton n'ouvrait rien (voir
     .noscript-nav plus haut, qui prend deja le relais dans ce cas) --
     le laisser visible aurait affiche un controle inactif a cote d'une
     navigation de repli deja pleinement fonctionnelle. Reaffiche
     uniquement si JS tourne reellement (classe "has-js", posee sans
     condition dans _layouts/default.html, y compris si
     prefers-reduced-motion est actif -- volontairement distincte de
     ".js-reveal"). Scope a max-width:719px uniquement : le bouton est
     deja masque sur ordinateur par une regle separee plus haut
     (@media min-width:720px), non affectee ici. */
  .nav-toggle{display:none;}
  html.has-js .nav-toggle{display:inline-flex;}

  /* Menu mobile (hamburger) — ajouté le 22/07/2026. nav.main sert à la
     fois de nav desktop (rangée horizontale, via le media query
     min-width:720px plus haut) et de panneau déroulant mobile ici,
     activé par la classe "nav-open" sur header.site (voir main.js).
     Scopé à max-width:719px pour ne jamais interférer avec le
     rendu desktop, même si la classe reste posée après un
     redimensionnement (sécurité en plus du reset fait en JS). */
  header.site.nav-open nav.main{
    display:flex;flex-direction:column;position:absolute;top:100%;left:0;right:0;
    background:var(--white);padding:6px 24px 22px;gap:0;
    border-top:1px solid var(--sage-pale);box-shadow:var(--shadow-rare);
  }
  header.site.nav-open nav.main a,
  header.site.nav-open nav.main .nav-pending{
    padding:14px 0;font-size:15.5px;border-bottom:1px solid var(--sage-pale);
  }
  header.site.nav-open nav.main a:last-child,
  header.site.nav-open nav.main .nav-pending:last-child{border-bottom:none;}

  /* CTA "Mes accompagnements" ajouté en bas du panneau mobile le
     22/07/2026, après "À propos" (dernier lien de la boucle nav.yml),
     séparé visuellement des liens par une bordure + espacement au-dessus
     plutôt que par le style lien+soulignement des autres entrées. Le
     bouton du header desktop (.header-actions .btn) n'est pas concerné :
     il reste à sa place, inchangé. */
  header.site.nav-open nav.main .nav-cta-mobile{
    display:inline-flex;width:100%;justify-content:center;
    margin-top:8px;padding-top:18px;border-top:1px solid var(--sage-pale);
  }
  nav.main a.nav-cta-mobile{color:var(--white);padding:13px 26px;}
  nav.main a.nav-cta-mobile::after{content:none;}
}