/* ==========================================================
   KPImpact CHR — feuille de style
   Charte Jeff Courtoy v1 : anthracite / ocre brûlée / crème
   Cormorant Garamond (titres) + Newsreader (texte) + Caveat (rare)
   V6, 18 septembre 2026 : voir le bloc en fin de fichier.

   Version 4, 16 septembre 2026 : passe de finition visuelle sur la base de
   contenu de la v3 validée par Fabrice. Rien n'a changé dans le texte, le
   positionnement, les tarifs ou la posture juridique — uniquement la façon
   dont c'est montré. Trois idées tiennent toute la passe : un grain de papier
   très léger pour donner du grain à l'écran, une échelle de gris/ocre plus
   riche pour que les aplats respirent, et des numéros fantômes en fond de
   section pour donner un rythme éditorial plutôt qu'un empilement de blocs.

   V5, 18 septembre 2026 : passe de désuniformisation, sur retour d'une amie
   de Jeff (« on sent un peu le côté Claude »). Rien ne change dans le texte
   ni dans la palette anthracite/ocre, déjà validés par Fabrice — uniquement
   la police de corps, les animations d'entrée, la mise en page de certains
   titres de section et les états de survol. Détail dans le plan de session.
   ========================================================== */

:root{
  --anthracite:#1C1C1A;
  --anthracite-soft:#2A2A26;
  --anthracite-mute:rgba(28,28,26,.55);
  --ocre:#B8632E;
  --ocre-soft:#D08146;
  --ocre-pale:#E7B58C;
  --creme:#F4EDE2;
  --creme-deep:#EBE2D1;
  --creme-paper:#FBF8F2;
  --sapin:#2D3D2D;
  --line:rgba(28,28,26,.18);
  --line-soft:rgba(28,28,26,.08);
  --line-clair:rgba(244,237,226,.16);
  --line-clair-soft:rgba(244,237,226,.09);
  --serif:'Cormorant Garamond', Georgia, serif;
  /* Le nom de variable garde « --sans » pour ne pas retoucher les dizaines
     d'endroits qui la référencent, mais elle tient désormais une police à
     empattements : Inter était le signal générique le plus net repéré dans
     l'audit du 18 septembre 2026 (la police de corps la plus vue sur les
     sites générés par IA). Newsreader est dessinée pour la lecture longue à
     l'écran plutôt que pour de l'interface — cohérent avec le ton « dossier »
     déjà porté par les numéros fantômes et la jauge de lecture. */
  --sans:'Newsreader', Georgia, serif;
  --hand:'Caveat', cursive;
  --maxw:1180px;

  /* Échelle d'espacement, base 4px. Les valeurs historiques en dur restent
     ailleurs dans le fichier ; cette échelle sert les composants ajoutés ou
     retouchés dans cette passe, pas une reprise systématique de l'existant. */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px;
  --sp-6:32px; --sp-7:48px; --sp-8:64px; --sp-9:96px; --sp-10:128px;

  /* Ombre chaude, teintée anthracite plutôt que noir pur : une ombre neutre
     jure sur un fond crème, elle donne un effet « pop-up » bon marché. */
  --ombre-sm:0 2px 8px rgba(28,28,26,.06);
  --ombre-md:0 10px 30px -8px rgba(28,28,26,.14);
  --ombre-lg:0 24px 60px -16px rgba(28,28,26,.22);
}
*{box-sizing:border-box;}
html{
  scroll-behavior:smooth;
  /* Les ancres de navigation atterrissaient sous l'en-tête collant. */
  scroll-padding-top:104px;
}
/* Sur « body » seulement, jamais sur « html » en plus : les deux ensemble
   créent deux conteneurs de défilement imbriqués (chacun computant
   overflow-y en auto dès que overflow-x est fixé), et l'en-tête collant
   plus bas perd sa vraie référence — il ne se fige plus au bord de l'écran,
   ou se fige avec un décalage de quelques pixels. Trouvé le 18 septembre
   2026 : le bandeau ne restait pas visible au défilement sur grand écran. */
body{overflow-x:hidden;}
img{max-width:100%;height:auto;}
body{
  margin:0;
  background:var(--creme);
  color:var(--anthracite);
  font-family:var(--sans);
  font-weight:400;
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  position:relative;
}

/* ---------- GRAIN DE PAPIER ----------
   Un bruit SVG très discret, fixe, au-dessus de tout mais insensible à la
   souris. Sans lui l'aplat crème est parfaitement lisse — juste assez plat
   pour paraître numérique plutôt qu'imprimé. Poids nul : c'est du CSS, pas
   une image. Retiré si le visiteur demande moins de mouvement n'a aucun sens
   ici (c'est statique), donc pas de media query dessus. */
body::before{
  content:'';position:fixed;inset:0;z-index:90;pointer-events:none;
  opacity:.035;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

::selection{background:var(--ocre);color:var(--creme);}
a{color:var(--ocre);text-decoration:none;border-bottom:1px solid transparent;transition:border-color .2s;}
a:hover{border-bottom-color:var(--ocre);}
h1,h2,h3,h4{font-family:var(--serif);font-weight:500;color:var(--anthracite);margin:0;letter-spacing:-0.01em;text-wrap:balance;}
h1{font-size:clamp(2.7rem,5.6vw,4.6rem);line-height:1.03;letter-spacing:-0.015em;}
h2{font-size:clamp(2.1rem,3.7vw,2.9rem);line-height:1.12;margin-bottom:1.2rem;}
h3{font-size:1.5rem;line-height:1.25;}
h4{font-size:1.15rem;line-height:1.3;font-weight:600;}
p{margin:0 0 1rem;}

/* Un contour de focus visible partout, pas seulement sur les cartes.
   Sans lui, la navigation au clavier se fait à l'aveugle. */
a:focus-visible,button:focus-visible,input:focus-visible,
select:focus-visible,textarea:focus-visible,summary:focus-visible{
  outline:2px solid var(--ocre);outline-offset:3px;
}
section.dark a:focus-visible,section.dark button:focus-visible{outline-color:var(--ocre-soft);}
/* Sur fond anthracite, l'ocre plein tombe à 3,97:1 de contraste, sous le seuil
   lisible. L'ocre clair passe à 5,6:1. Concerne les liens, pas les titres. */
section.dark a{color:var(--ocre-soft);}
section.dark a:hover{border-bottom-color:var(--ocre-soft);}

.container{max-width:var(--maxw);margin:0 auto;padding:0 28px;}
.container-narrow{max-width:900px;margin:0 auto;padding:0 28px;}
@media (max-width:540px){.container,.container-narrow{padding:0 20px;}}
.eyebrow{font-family:var(--sans);font-size:0.78rem;letter-spacing:0.22em;text-transform:uppercase;color:var(--ocre);font-weight:500;margin-bottom:1.2rem;display:inline-block;}
.lead{font-family:var(--serif);font-size:1.4rem;line-height:1.45;font-style:italic;color:var(--anthracite-soft);}
.small-mute{font-size:0.85rem;color:var(--anthracite-soft);}

/* ---------- JAUGE DE LECTURE, en haut de page ---------- */
.jauge-page{
  position:fixed;top:0;left:0;height:2px;width:0;
  background:linear-gradient(90deg, var(--ocre-soft), var(--ocre));
  z-index:80;transition:width .1s linear;
}
@media (prefers-reduced-motion:reduce){.jauge-page{transition:none;}}

/* ---------- HEADER ---------- */
header.site{
  position:sticky;top:0;z-index:50;
  background:rgba(244,237,226,0.92);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line-soft);
  transition:box-shadow .25s, border-color .25s;
}
header.site.pose{box-shadow:0 6px 24px rgba(28,28,26,.06);border-bottom-color:var(--line);}

/* ---------- BANDEAU DE MARQUE, pleine largeur ----------
   Demandé par Jeff le 17 septembre 2026 : « le logo en haut pourrait faire
   toute la largeur, un bandeau ». L'en-tête passe en anthracite plein bord à
   bord, avec le logo en version inversée (celle déjà utilisée dans le pied de
   page). Le bandeau est haut au chargement pour donner de la présence à la
   marque, puis se compacte au défilement — sinon il mange un tiers de l'écran
   d'un téléphone en permanence. La classe « pose » est déjà posée par le
   script au défilement, on s'en sert plutôt que d'en ajouter une autre. */
header.site.bandeau{
  background:rgba(28,28,26,.94);
  border-bottom-color:rgba(244,237,226,.12);
}
header.site.bandeau.pose{
  box-shadow:0 8px 28px rgba(28,28,26,.28);
  border-bottom-color:rgba(244,237,226,.18);
}
/* Le sélecteur est volontairement « header.site.bandeau .bar » et non
   « .bandeau .bar » : la règle de base « header.site .bar » est plus
   spécifique que cette dernière (un élément de plus), et écrasait donc le
   rembourrage du bandeau. Défaut trouvé à la mesure le 17 septembre 2026, le
   bandeau restait à 18px au lieu de 26px. Ne pas raccourcir ces sélecteurs. */
header.site.bandeau .bar{padding:24px 28px;transition:padding .3s cubic-bezier(.16,1,.3,1);}
/* Le logo d'en-tête vient d'une source différente depuis le 18 septembre 2026.
   Jeff cherchait « la feuille avec les logos que Fabrice a envoyés » : elle
   n'existait pas comme fichier à part, mais Fabrice l'a en réalité déjà
   fournie — en filigrane, dans l'en-tête de chaque document du pack juridique
   V5_4 (`juridique/V5_4/*.docx`). Cette image est nativement 2048×682, sans
   compression web, très supérieure au fichier `Logo_invers_Trans.webp` servi
   par courtoy.fr (dont les défauts du 17 septembre — barre parasite, baseline
   à 5,5px — venaient justement d'une source trop petite et trop compressée).
   Recadrée et rendue transparente ici (aucune des deux n'existait en
   transparent), en deux variantes : `logo-entete.webp` sans l'accroche
   « Contrôlez vos marges… », illisible à hauteur de bandeau quelle que soit
   la source ; `logo-complet.webp` avec l'accroche, réservée au pied de page
   où il y a la largeur pour la rendre lisible. Effet de bord utile : l'en-tête
   ne dépend plus d'un serveur extérieur. */
.bandeau .brand-logo{height:60px;width:auto;transition:height .3s cubic-bezier(.16,1,.3,1);}
/* « compact » : état fixe des pages secondaires (audit, merci, mentions), qui
   n'ont pas le script de défilement de l'accueil et où la hauteur d'écran est
   précieuse — l'audit est un formulaire. « pose » : même état, mais déclenché
   au défilement sur l'accueil. Les deux partagent la même mise en page. */
header.site.bandeau.pose .bar,
header.site.bandeau.compact .bar{padding:12px 28px;}
.bandeau.pose .brand-logo,.bandeau.compact .brand-logo{height:40px;}
@media (max-width:540px){
  header.site.bandeau .bar{padding:18px 20px;}
  /* 40px et non 50px : ce nouveau logo est plus large à proportion (ratio
     5,15 contre 3,57 pour l'ancien), donc à hauteur égale il grignotait
     l'espace avant le bouton menu — mesuré à 66 % de la largeur d'écran,
     61px avant le burger. Réglé le 18 septembre 2026. */
  .bandeau .brand-logo{height:40px;}
  header.site.bandeau.pose .bar,
  header.site.bandeau.compact .bar{padding:10px 20px;}
  .bandeau.pose .brand-logo,.bandeau.compact .brand-logo{height:30px;}
}
/* Tout ce qui était lisible sur crème doit repasser en clair sur l'anthracite. */
.bandeau .burger span{background:var(--creme);}
.bandeau nav.primary a:not(.nav-cta){color:var(--creme);}
.bandeau nav.primary a:not(.nav-cta):hover{color:var(--ocre-soft);}
.bandeau nav.primary a:not(.nav-cta)::after{background:var(--ocre-soft);}
/* Le bouton était anthracite sur crème : sur le bandeau il disparaîtrait. */
.bandeau .nav-cta{background:var(--ocre);color:var(--creme) !important;}
.bandeau .nav-cta:hover{background:var(--ocre-soft);}
.bandeau .back-link{color:var(--creme);}
.bandeau .back-link:hover{color:var(--ocre-soft);}
@media (max-width:980px){
  .bandeau nav.primary.open{
    background:var(--anthracite);
    border-bottom-color:rgba(244,237,226,.12);
  }
}
@media (prefers-reduced-motion:reduce){
  .bandeau .bar,.bandeau .brand-logo{transition:none;}
}
header.site .bar{
  position:relative;
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 28px;max-width:var(--maxw);margin:0 auto;
}
@media (max-width:540px){header.site .bar{padding:14px 20px;}}
.brand{display:flex;align-items:center;gap:14px;border:none !important;}
.brand-logo{height:46px;width:auto;display:block;}
@media (max-width:540px){.brand-logo{height:38px;}}
nav.primary{display:flex;gap:26px;align-items:center;}
nav.primary a:not(.nav-cta){
  position:relative;color:var(--anthracite);font-size:0.93rem;font-weight:500;border:none;
  padding-bottom:3px;
}
/* Trait qui se déploie sous le lien plutôt qu'un simple changement de teinte :
   plus proche de la typographie soignée qu'un site institutionnel affiche. */
nav.primary a:not(.nav-cta)::after{
  content:'';position:absolute;left:0;bottom:0;width:100%;height:1px;
  background:var(--ocre);transform:scaleX(0);transform-origin:right;
  transition:transform .3s cubic-bezier(.16,1,.3,1);
}
nav.primary a:not(.nav-cta):hover{color:var(--ocre);}
nav.primary a:not(.nav-cta):hover::after{transform:scaleX(1);transform-origin:left;}
.nav-cta{
  background:var(--anthracite);color:var(--creme) !important;
  padding:10px 18px;border-radius:2px;
  font-size:0.88rem;letter-spacing:0.04em;
  transition:background-color .2s, transform .2s;
}
.nav-cta:hover{background:var(--ocre);transform:translateY(-1px);}
.nav-cta:active{transform:translateY(0);}
.back-link{font-size:0.9rem;color:var(--anthracite);border:none;}
.back-link:hover{color:var(--ocre);}
.burger{display:none;background:none;border:none;cursor:pointer;width:32px;height:32px;}
.burger span{display:block;width:22px;height:1.5px;background:var(--anthracite);margin:5px auto;transition:transform .25s, opacity .2s;}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg);}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0;}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg);}
@media (max-width:980px){
  nav.primary{display:none;}
  nav.primary.open{
    display:flex;flex-direction:column;align-items:flex-start;
    position:absolute;top:100%;left:0;right:0;
    background:var(--creme);padding:24px;gap:18px;
    border-bottom:1px solid var(--line);
    box-shadow:var(--ombre-lg);
    animation:menu-deploie .3s cubic-bezier(.16,1,.3,1);
  }
  .burger{display:block;}
}
@keyframes menu-deploie{
  from{opacity:0;transform:translateY(-8px);}
  to{opacity:1;transform:translateY(0);}
}
@media (prefers-reduced-motion:reduce){nav.primary.open{animation:none;}}

/* ---------- BOUTONS ---------- */
.btn{
  display:inline-block;padding:15px 28px;
  font-size:0.95rem;letter-spacing:0.04em;font-weight:500;
  border:1px solid var(--anthracite);border-radius:2px;
  cursor:pointer;transition:background-color .2s, color .2s, border-color .2s, transform .2s, box-shadow .2s;
  text-align:center;
  border-bottom:1px solid var(--anthracite) !important;
}
.btn-primary{background:var(--anthracite);color:var(--creme);}
.btn-primary:hover{background:var(--ocre);border-color:var(--ocre);color:var(--creme);transform:translateY(-2px);box-shadow:var(--ombre-md);}
.btn-primary:active{transform:translateY(0);box-shadow:none;}
.btn-ghost{background:transparent;color:var(--anthracite);}
.btn-ghost:hover{background:var(--anthracite);color:var(--creme);transform:translateY(-2px);}
.btn-ghost:active{transform:translateY(0);}
@media (prefers-reduced-motion:reduce){.btn{transition:background-color .2s, color .2s, border-color .2s;}}

/* ---------- HERO ---------- */
.hero{padding:104px 0 86px;position:relative;overflow:hidden;}
@media (max-width:680px){.hero{padding:56px 0 60px;}}
.hero-inner{max-width:940px;}
/* 20ch et non 15ch. Mesuré le 17 septembre 2026 : à 15ch la colonne du titre
   est trop étroite pour tenir « Reprendre la maîtrise » sur une seule ligne,
   à n'importe quelle largeur d'écran — la contrainte étant exprimée en « ch »,
   elle grandit avec la police et garde donc toujours la même étroitesse
   relative. Résultat, les trois coupures éditoriales se recassaient chacune en
   deux et le titre sortait en six lignes très courtes, y compris sur grand
   écran. 20ch laisse passer les deux premières lignes entières ; la troisième,
   volontairement plus longue, se répartit en deux lignes équilibrées. */
.hero h1{max-width:20ch;}
.hero h1 em{font-style:italic;color:var(--ocre);font-weight:400;}
.hero .tagline{
  font-family:var(--serif);font-style:italic;
  font-size:1.55rem;line-height:1.42;margin:1.8rem 0 2.2rem;
  color:var(--anthracite-soft);max-width:660px;
}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;align-items:center;}
.hero-sous{margin-top:20px;max-width:520px;margin-bottom:0;}
/* La phrase qui dit ce qu'on rend, et donc ce qu'on ne rend pas. */
.hero-parole{
  margin:56px 0 0;padding-top:32px;border-top:1px solid var(--line);
  max-width:760px;
  font-family:var(--serif);font-style:italic;
  font-size:1.55rem;line-height:1.45;color:var(--anthracite);
}
.hero-parole em{font-style:italic;color:var(--ocre);}
@media (max-width:680px){
  .hero-parole{font-size:1.2rem;margin-top:40px;padding-top:26px;}
}

/* ---------- LE HÉROS SUR TÉLÉPHONE ----------
   Corrigé le 17 septembre 2026 sur capture d'écran de Jeff. Deux défauts,
   tous les deux hérités de réglages pensés pour le grand écran :

   1. « max-width:15ch » sur le titre. Sur un écran de 390px il ne laisse que
      ~210px de large sur les ~350px disponibles. Chaque ligne du titre se
      recassait donc en deux — six lignes au lieu de trois, un texte étroit
      collé à gauche et une grande zone vide à droite. Sur grand écran cette
      contrainte est utile (elle tient le titre en trois lignes), sur mobile
      elle est exactement contre-productive : on la lève.

   2. La phrase d'accroche n'avait aucune réduction pour mobile. Elle restait
      en italique serif à ~25px, soit sept lignes très aérées. La classe
      « .lead » a bien une règle mobile, mais « .tagline » n'en est pas une :
      elle était donc passée à travers.

   Ensemble, ça donnait cette impression de colonne étroite mal calée. */
@media (max-width:680px){
  .hero{padding:44px 0 56px;}
  /* La largeur du titre et son écoulement sont traités plus bas, au seuil de
     980px et non 680px : voir le bloc dédié après la définition de l'animation. */
  .hero .tagline{
    font-size:1.18rem;line-height:1.45;
    margin:1.4rem 0 1.9rem;max-width:34ch;
  }
  .hero-sous{margin-top:16px;}
  /* L'interlettrage large fait déborder le sur-titre sur deux lignes et mange
     une hauteur d'écran entière avant même la promesse. */
  .hero .eyebrow{font-size:0.7rem;letter-spacing:0.14em;margin-bottom:0.9rem;}
  /* Boutons pleine largeur : sur téléphone, deux boutons côte à côte qui se
     replient donnent des largeurs inégales, ce qui se lit comme un défaut. */
  .hero-cta{flex-direction:column;align-items:stretch;gap:10px;}
  .hero-cta .btn{width:100%;}
}

/* ---------- BARRE D'ACTION COLLANTE, téléphone uniquement ----------
   Sur grand écran elle ne sert à rien : le bouton « Audit express » est déjà
   en permanence dans le bandeau. Elle n'existe donc qu'en dessous de 760px,
   où ce bouton du bandeau est remplacé par le menu burger et disparaît.
   « translateY » plutôt que « display » pour qu'elle glisse au lieu
   d'apparaître d'un coup. */
.cta-collant{display:none;}
@media (max-width:760px){
  .cta-collant{
    display:flex;align-items:center;gap:14px;
    position:fixed;left:0;right:0;bottom:0;z-index:70;
    padding:12px 20px calc(12px + env(safe-area-inset-bottom));
    background:rgba(28,28,26,.96);
    backdrop-filter:blur(8px);
    border-top:1px solid rgba(244,237,226,.14);
    transform:translateY(110%);
    transition:transform .35s cubic-bezier(.16,1,.3,1);
  }
  .cta-collant.visible{transform:translateY(0);}
  .cta-collant-texte{
    flex:1;min-width:0;
    font-size:.82rem;line-height:1.3;color:rgba(244,237,226,.72);
  }
  .cta-collant .btn{
    flex-shrink:0;padding:12px 20px;font-size:.9rem;
    background:var(--ocre);color:var(--creme);
    border-color:var(--ocre) !important;
  }
  .cta-collant .btn:hover{transform:none;box-shadow:none;}
  /* Sans ça, la barre recouvre les dernières lignes du pied de page. */
  body{padding-bottom:76px;}
}
@media (max-width:420px){
  .cta-collant-texte{display:none;}
  .cta-collant .btn{flex:1;}
}
@media (prefers-reduced-motion:reduce){
  .cta-collant{transition:none;}
}

/* ---------- MOTIF DE JAUGE, décor du héros ----------
   Un instrument au trait, à moitié hors cadre, dans le même esprit que la
   jauge de lecture qui court en haut de page au défilement. Uniquement du
   trait fin, aucun aplat : ça doit se lire comme un filigrane, pas comme une
   illustration. Masqué en dessous de 980px — sur petit écran il n'y a pas la
   place de le laisser respirer sans qu'il écrase le texte. */
.hero-jauge{
  position:absolute;top:50%;right:-14%;
  width:min(780px,68vw);height:min(780px,68vw);
  transform:translateY(-50%);
  fill:none;stroke:var(--anthracite);stroke-width:1;
  opacity:.06;pointer-events:none;z-index:0;
}
.hero-jauge-graduations line{stroke:var(--ocre);stroke-width:2;}
.hero-jauge-aiguille{stroke:var(--ocre);stroke-width:2.5;stroke-linecap:round;}
.hero-jauge-centre{fill:var(--ocre);stroke:none;}
@media (max-width:980px){.hero-jauge{display:none;}}
.hero .container{position:relative;z-index:1;}

/* Le titre se lève ligne par ligne. Chaque ligne est masquée par son
   propre conteneur : rien ne dépasse pendant le mouvement.
   Le mouvement est une animation qui se déclenche seule, jamais une classe
   posée par le script : si le script casse, le titre reste visible. */
.h1-ligne{display:block;overflow:hidden;}
.h1-ligne > span{display:block;}
.hero h1.anime .h1-ligne > span{
  /* « backwards » et non « both » : l'état masqué ne s'applique que pendant
     le retard, jamais après. Si l'animation ne joue pas du tout, la ligne
     garde son état normal, c'est-à-dire visible. */
  animation:leve-ligne .9s cubic-bezier(.16,1,.3,1) backwards;
}
.hero h1.anime .h1-ligne:nth-child(2) > span{animation-delay:.09s;}
.hero h1.anime .h1-ligne:nth-child(3) > span{animation-delay:.18s;}
@keyframes leve-ligne{
  from{transform:translateY(105%);opacity:0;}
  to{transform:translateY(0);opacity:1;}
}

/* ---------- LE TITRE EN DESSOUS DE 980px ----------
   Ce bloc doit rester APRÈS la définition de l'animation ci-dessus. À
   priorité égale, c'est la dernière règle écrite qui gagne : placé avant, il
   était ignoré et le titre restait à opacité 0, donc invisible. Défaut trouvé
   à la mesure le 17 septembre 2026, pas à l'œil — d'où l'insistance du
   commentaire.

   Sur le fond. « max-width:15ch » tient le titre en trois lignes sur grand
   écran, et c'est voulu : le motif de jauge occupe la droite, la colonne
   étroite lui laisse la place. Mais la jauge disparaît à 980px, et en dessous
   cette même contrainte n'a plus aucune justification — elle étrangle juste
   le texte. Mesuré à 700px avant correction : six lignes remplies entre 16 %
   et 42 %. Sur téléphone à 375px : six lignes en escalier.

   Le seuil est donc calé sur 980px, celui de la jauge, et pas sur le seuil
   mobile habituel de 680px. Les trois coupures éditoriales du titre sont
   relâchées en dessous : le titre coule d'un bloc et « text-wrap:balance »
   égalise les lignes de lui-même (375px : trois lignes à 82 %, 74 %, 92 %).

   Conséquence assumée : la levée ligne par ligne ne joue pas sous 980px. */
@media (max-width:980px){
  .hero h1{max-width:none;}
  .hero h1 .h1-ligne,
  .hero h1 .h1-ligne > span{display:inline;overflow:visible;}
  .hero h1.anime .h1-ligne > span{animation:none;opacity:1;transform:none;}
}

/* ---------- SECTIONS ---------- */
section{padding:104px 0;border-top:1px solid var(--line-soft);}
@media (max-width:680px){
  section{padding:64px 0;}
  .section-head{margin-bottom:40px;}
  h1{font-size:clamp(1.9rem,7vw,2.4rem) !important;}
  h2{font-size:clamp(1.6rem,5.5vw,2rem) !important;}
  .lead{font-size:1.05rem !important;}
}
section.dark{background:var(--anthracite);color:var(--creme);}
section.dark h1,section.dark h2,section.dark h3,section.dark h4{color:var(--creme);}
section.dark .eyebrow{color:var(--ocre-soft);}
section.dark .lead{color:rgba(244,237,226,0.85);}
section.dark .small-mute{color:rgba(244,237,226,0.6);}
section.cream-deep{background:var(--creme-deep);}
.section-head{max-width:820px;margin-bottom:60px;}
.section-head .lead{margin-top:1rem;}

/* ---------- TROIS SECTIONS SORTENT DU GABARIT eyebrow+h2+lead ----------
   V5, 18 septembre 2026 : les onze sections du site (les neuf du contenu et
   les deux pages secondaires) ouvraient toutes sur le même trio empilé —
   un des quatre motifs relevés comme génériques dans l'audit du même jour.
   Trois sections seulement changent de gabarit ici, pas toutes : refaire
   les onze de façon différente aurait juste créé une nouvelle uniformité,
   inversée. Les huit autres gardent le trio classique, qui reste le bon
   choix pour la majorité du contenu. */

/* « La règle de lecture » : lettrine sur le paragraphe d'accroche, en écho
   direct au thème de la section (on parle de lecture). */
.section-head.dropcap .lead::first-letter{
  font-family:var(--serif);font-style:normal;font-size:3.2em;line-height:0.72;
  float:left;padding:0.02em 0.1em 0 0;color:var(--ocre-soft);
}

/* « Le diagnostic » : l'accroche devient une citation posée, avec un grand
   guillemet en filigrane plutôt qu'un simple paragraphe sous le titre. */
.section-head.quote{position:relative;}
.section-head.quote .lead{
  font-size:1.7rem;line-height:1.5;padding-left:52px;position:relative;
}
.section-head.quote .lead::before{
  content:'\201C';position:absolute;left:-6px;top:-28px;
  font-family:var(--serif);font-size:5rem;color:var(--ocre-soft);opacity:.5;
  line-height:1;
}
.section-head.quote .lead em{font-style:italic;color:var(--ocre-soft);}

/* « La posture » : titre et accroche côte à côte plutôt qu'empilés, seule
   section-head en deux colonnes du site. */
.section-head.split{
  display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:end;
  max-width:none;
}
@media (max-width:760px){
  .section-head.split{grid-template-columns:1fr;gap:16px;align-items:start;}
}
.section-head.split .lead{margin-top:0;}

.ornament{
  text-align:center;color:var(--ocre);
  font-family:var(--serif);font-size:1.5rem;letter-spacing:0.6em;
  margin:60px 0 40px;padding-left:0.6em;
}

/* ---------- LA RÈGLE DE LECTURE (deux colonnes) ---------- */
.tri-grid{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--line);margin-top:10px;background:#fff;}
@media (max-width:860px){.tri-grid{grid-template-columns:1fr;}}
.tri-col{padding:40px 36px;}
@media (max-width:540px){.tri-col{padding:30px 24px;}}
.tri-col + .tri-col{border-left:1px solid var(--line);}
@media (max-width:860px){.tri-col + .tri-col{border-left:none;border-top:1px solid var(--line);}}
.tri-col h3{font-style:italic;font-size:1.6rem;margin-bottom:6px;}
.tri-col .tri-tag{
  font-size:0.72rem;letter-spacing:0.2em;text-transform:uppercase;
  color:var(--ocre);font-weight:500;display:block;margin-bottom:14px;
}
.tri-row{padding:16px 0;border-bottom:1px solid var(--line-soft);}
.tri-row:last-child{border-bottom:none;}
.tri-row b{
  display:block;font-family:var(--sans);font-weight:500;
  font-size:0.72rem;letter-spacing:0.14em;text-transform:uppercase;
  color:var(--anthracite-soft);margin-bottom:6px;
}
.tri-row span{font-size:0.98rem;color:var(--anthracite);}
/* Variante sur fond anthracite */
section.dark .tri-grid{background:rgba(244,237,226,.035);border-color:var(--line-clair);}
section.dark .tri-col + .tri-col{border-left-color:var(--line-clair);}
@media (max-width:860px){section.dark .tri-col + .tri-col{border-left:none;border-top-color:var(--line-clair);}}
section.dark .tri-col .tri-tag{color:var(--ocre-soft);}
section.dark .tri-row{border-bottom-color:var(--line-clair-soft);}
section.dark .tri-row b{color:var(--ocre-soft);}
section.dark .tri-row span{color:rgba(244,237,226,.86);}
.tri-chute{
  margin:36px auto 0;max-width:880px;
  font-family:var(--serif);font-style:italic;font-size:1.28rem;line-height:1.5;
  padding-left:22px;border-left:3px solid var(--ocre);
}
section.dark .tri-chute{color:rgba(244,237,226,.88);border-left-color:var(--ocre-soft);}

/* ---------- CE QU'ON TRAITE ---------- */
.livrable-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--line);margin-top:20px;}
@media (max-width:980px){.livrable-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:540px){.livrable-grid{grid-template-columns:1fr;}}
.livrable{
  position:relative;padding:36px 26px 32px;overflow:hidden;
  border-right:1px solid var(--line);border-bottom:1px solid var(--line);
  transition:background .25s;
}
/* V5 : signature de survol propre à cette famille — un filet ocre qui se
   déploie en haut de la carte plutôt que l'ombre interne générique
   utilisée avant sur plusieurs composants différents à la fois. */
.livrable::before{
  content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:var(--ocre);transform:scaleX(0);transform-origin:left;
  transition:transform .3s cubic-bezier(.16,1,.3,1);
}
.livrable:hover{background:var(--creme-paper);z-index:1;}
.livrable:hover::before{transform:scaleX(1);}
@media (max-width:540px){.livrable{border-right:none;}}
@media (min-width:541px) and (max-width:980px){.livrable:nth-child(2n){border-right:none;}}
@media (min-width:981px){.livrable:nth-child(4n){border-right:none;}}
/* Le numéro sert de filigrane en fond de carte : grand, très pâle, décalé
   hors cadre. Il donne un rythme de « folio » plutôt qu'une simple liste. */
.livrable .liv-num{
  position:absolute;top:-6px;right:10px;
  font-family:var(--serif);font-style:italic;font-size:4.6rem;
  color:var(--anthracite);opacity:.05;line-height:1;
  transition:opacity .25s, transform .25s;
}
.livrable:hover .liv-num{opacity:.1;transform:scale(1.06);}
.livrable h4{position:relative;font-family:var(--serif);font-size:1.25rem;font-weight:500;font-style:italic;margin:20px 0 10px;}
.livrable p{position:relative;font-size:0.94rem;color:var(--anthracite-soft);margin:0;}

/* ---------- LA MÉTHODE (cartes) ---------- */
.format-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-bottom:20px;}
.format-grid.trois{grid-template-columns:repeat(3,1fr);}
@media (max-width:980px){.format-grid.trois{grid-template-columns:1fr;}}
@media (max-width:860px){.format-grid{grid-template-columns:1fr;}}
.format-card{
  border:1px solid var(--line-clair);
  background:rgba(244,237,226,0.04);
  padding:34px 30px;
  transition:border-color .25s, transform .25s, box-shadow .25s;
}
.format-card:hover{transform:translateY(-4px);}
.format-card.clair{background:#fff;border-color:var(--line);}
.format-card.clair h3{color:var(--anthracite);}
.format-card.clair p{color:var(--anthracite-soft);}
.format-card.clair .format-tag{color:var(--ocre);}
.format-card.clair:hover{border-color:var(--ocre);box-shadow:var(--ombre-md);}
.format-card.retenu{border-color:var(--ocre-soft);}
.format-card .format-tag{
  font-size:0.72rem;letter-spacing:0.18em;text-transform:uppercase;
  color:var(--ocre-soft);font-weight:500;display:block;margin-bottom:10px;
}
.format-card h3{font-style:italic;font-size:1.55rem;margin-bottom:14px;}

/* ---------- LE DIAGNOSTIC (chronologie) ---------- */
.tunnel-track{position:relative;margin:60px 0 0;counter-reset:etape;}
.tunnel-line{
  position:absolute;left:30px;top:20px;bottom:20px;width:2px;
  background:linear-gradient(180deg, var(--ocre-soft) 0%, var(--ocre-soft) 70%, transparent 100%);
}
.tunnel-step{
  position:relative;padding:28px 0 28px 80px;display:grid;
  grid-template-columns:1fr auto;gap:30px;align-items:start;
  border-bottom:1px solid var(--line-clair-soft);
  counter-increment:etape;overflow:hidden;
}
.tunnel-step:last-child{border-bottom:none;}
.tunnel-step::before{
  content:'';position:absolute;left:22px;top:36px;
  width:18px;height:18px;border-radius:50%;
  background:var(--anthracite);border:3px solid var(--ocre);
  box-shadow:0 0 0 4px var(--anthracite);
  z-index:2;
}
/* Le folio en fond de section, très effacé : signature éditoriale du dossier
   plutôt qu'une numérotation fonctionnelle — le texte se lit très bien sans. */
.tunnel-step::after{
  content:'0' counter(etape);
  position:absolute;right:0;top:50%;transform:translateY(-58%);
  font-family:var(--serif);font-style:italic;font-size:7rem;line-height:1;
  color:rgba(244,237,226,.05);pointer-events:none;z-index:0;
}
@media (max-width:760px){.tunnel-step::after{font-size:4.4rem;}}
.tunnel-step > div{position:relative;z-index:1;}
.tunnel-step h3{font-size:1.6rem;font-style:italic;margin-bottom:8px;}
.tunnel-step .step-tag{
  font-size:0.74rem;letter-spacing:0.2em;text-transform:uppercase;
  color:var(--ocre-soft);font-weight:500;margin-bottom:10px;display:block;
}
.tunnel-step p{margin-bottom:10px;color:rgba(244,237,226,0.78);}
.step-meta{
  text-align:right;font-family:var(--serif);font-style:italic;
  font-size:1.1rem;color:var(--creme);min-width:170px;
}
.step-duration{font-size:0.82rem;letter-spacing:0.1em;text-transform:uppercase;font-style:normal;opacity:0.75;}
@media (max-width:760px){
  .tunnel-step{grid-template-columns:1fr;padding-left:66px;gap:12px;}
  .step-meta{text-align:left;min-width:auto;}
  .tunnel-line{left:24px;}
  .tunnel-step::before{left:16px;}
}

/* ---------- L'ACCOMPAGNEMENT, frise reliée ----------
   Un rail continu traverse les quatre étapes sur grand écran, avec un jalon
   rond posé dessus par étape — la lecture « ligne du temps » est plus proche
   de ce que le texte raconte (jour 1 à jour 90) qu'une simple grille de
   cartes indépendantes. Le rail disparaît sous 860px : sur mobile la
   numérotation ronde suffit à porter l'idée de progression. */
.method-grid{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:40px;margin-top:44px;}
@media (max-width:860px){.method-grid{grid-template-columns:1fr 1fr;gap:40px 34px;}}
@media (max-width:540px){.method-grid{grid-template-columns:1fr;}}
.method-grid::before{
  content:'';position:absolute;top:19px;left:12.5%;right:12.5%;height:1px;
  background:linear-gradient(90deg, var(--line) 0%, var(--ocre-soft) 15%, var(--ocre-soft) 85%, var(--line) 100%);
}
@media (max-width:860px){.method-grid::before{display:none;}}
.method-step{position:relative;padding-top:56px;}
.method-step .num{
  position:absolute;top:0;left:0;
  width:38px;height:38px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--serif);font-style:italic;color:var(--creme);
  background:var(--anthracite);border:1px solid var(--ocre-soft);
  font-size:1rem;line-height:1;z-index:1;
}
.method-step h3{font-size:1.5rem;margin-bottom:14px;font-style:italic;}
.method-step p{font-size:0.97rem;color:var(--anthracite-soft);}
.method-step .step-when{
  display:block;margin-top:14px;padding-top:12px;border-top:1px solid var(--line-soft);
  font-size:0.78rem;letter-spacing:0.12em;text-transform:uppercase;color:var(--anthracite-soft);
}

/* ---------- LA SOCIÉTÉ ---------- */
.apropos{display:grid;grid-template-columns:1fr 1.4fr;gap:80px;align-items:start;}
@media (max-width:860px){.apropos{grid-template-columns:1fr;gap:56px;}}
.apropos-portrait{
  position:relative;aspect-ratio:3/4;
  background:linear-gradient(180deg, #2A2A26 0%, #1C1C1A 100%);
  display:flex;align-items:flex-end;overflow:hidden;
  /* Cadre décalé façon carte postale : le portrait n'est pas juste posé sur
     la page, il est présenté. Le décalage est de l'ordre d'un box-shadow,
     pas un vrai second calque — indépendant de l'overflow:hidden ci-dessus,
     qui ne rogne que le contenu, jamais l'ombre portée de la boîte elle-même. */
  box-shadow:18px 18px 0 0 var(--ocre-pale);
  margin:0 18px 18px 0;
}
@media (max-width:540px){.apropos-portrait{box-shadow:12px 12px 0 0 var(--ocre-pale);margin:0 12px 12px 0;}}
.apropos-portrait .portrait-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;}
.apropos-portrait::before{
  content:'';position:absolute;inset:0;z-index:2;
  background:linear-gradient(180deg, transparent 50%, rgba(28,28,26,0.85) 100%);
}
.apropos-portrait .seal-big{
  position:absolute;top:24px;right:24px;
  width:64px;height:64px;opacity:0.95;z-index:3;
  filter:drop-shadow(0 2px 8px rgba(0,0,0,0.35));
}
.apropos-portrait .signature{position:relative;padding:30px 32px;color:var(--creme);z-index:3;}
.apropos-portrait .signature .hand{font-family:var(--hand);font-size:2.4rem;color:var(--ocre-soft);line-height:1;margin-bottom:8px;}
.apropos-portrait .signature .role{font-size:0.78rem;letter-spacing:0.16em;text-transform:uppercase;color:rgba(244,237,226,0.7);}
.apropos h2 em{font-style:italic;color:var(--ocre);}
.apropos-text p{font-size:1.05rem;margin-bottom:1.3rem;}
.badge-row{display:flex;flex-wrap:wrap;gap:14px;margin:32px 0;}
.badge{
  background:transparent;border:1px solid var(--line);
  padding:12px 18px;font-size:0.85rem;letter-spacing:0.04em;
  display:flex;align-items:center;gap:10px;
}
.badge strong{font-weight:600;}
.badge .badge-dot{width:6px;height:6px;background:var(--ocre);border-radius:50%;flex-shrink:0;}
.badge.primary{border-color:var(--ocre);background:rgba(184,99,46,0.06);}
/* Deux lignes : le titre, puis le repère (dates ou intitulé complet d'un sigle)
   en dessous, plus petit et sans emphase. Demandé par Jeff le 18 septembre
   2026 pour « Maître Restaurateur » (la date seule) et « Ambassadeur AFMR »
   (le sigle déplié) — les deux avaient jusque-là un sous-texte accolé sur la
   même ligne avec un « · », moins lisible pour ce genre de précision. */
.badge-lines{display:flex;flex-direction:column;gap:3px;line-height:1.25;}
.badge-lines small{font-size:0.74rem;font-weight:400;font-style:normal;color:var(--anthracite-soft);letter-spacing:0.01em;}

/* ---------- LA POSTURE ---------- */
.posture-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:30px;border-top:1px solid var(--line);}
@media (max-width:860px){.posture-grid{grid-template-columns:1fr;}}
.posture-item{padding:34px 34px 34px 0;border-right:1px solid var(--line-soft);}
.posture-item:last-child{border-right:none;}
.posture-item + .posture-item{padding-left:34px;}
@media (max-width:860px){
  .posture-item{padding:28px 0;border-right:none;border-bottom:1px solid var(--line-soft);}
  .posture-item:last-child{border-bottom:none;}
  .posture-item + .posture-item{padding-left:0;}
}
.posture-num{
  font-family:var(--serif);font-style:italic;font-size:2.2rem;color:var(--ocre);
  display:block;line-height:1;margin-bottom:16px;
}
.posture-item h4{font-family:var(--serif);font-weight:500;font-size:1.4rem;font-style:italic;margin-bottom:12px;}
.posture-item p{font-size:0.97rem;color:var(--anthracite-soft);margin:0;}
section.dark .posture-grid{border-top-color:var(--line-clair);}
section.dark .posture-item{border-right-color:var(--line-clair-soft);border-bottom-color:var(--line-clair-soft);}
section.dark .posture-item p{color:rgba(244,237,226,0.78);}
section.dark .posture-num{color:var(--ocre-soft);}

/* ---------- FAQ ---------- */
.faq-list{margin-top:30px;}
.faq-item{border-bottom:1px solid var(--line);transition:background-color .25s;}
.faq-item.open{background:var(--creme-paper);}
.faq-q{
  padding:24px 22px 24px 4px;cursor:pointer;
  display:flex;justify-content:space-between;align-items:flex-start;
  gap:30px;font-family:var(--serif);font-size:1.3rem;
  color:var(--anthracite);font-weight:500;
  background:none;border:none;width:100%;text-align:left;
  transition:color .2s, padding-left .25s;
}
.faq-q:hover{color:var(--ocre);padding-left:10px;}
.faq-q .faq-toggle{
  font-family:var(--serif);font-size:1.8rem;color:var(--ocre);
  flex-shrink:0;line-height:1;transition:transform .35s cubic-bezier(.16,1,.3,1);
}
.faq-item.open .faq-toggle{transform:rotate(135deg);}
.faq-a{max-height:0;overflow:hidden;transition:max-height .35s ease, padding .35s ease;color:var(--anthracite-soft);}
.faq-a p{padding:0 22px 0 4px;}
.faq-item.open .faq-a{max-height:800px;padding-bottom:24px;}

/* ---------- CONTACT ---------- */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:start;}
@media (max-width:860px){.contact-grid{grid-template-columns:1fr;gap:50px;}}
.contact-info{margin-top:30px;}
.contact-info-item{
  padding:14px 0;border-bottom:1px solid rgba(244,237,226,0.12);
  display:grid;grid-template-columns:120px 1fr;gap:20px;font-size:0.97rem;
}
.contact-info-item:last-child{border-bottom:none;}
.contact-info-item b{
  font-weight:500;color:var(--ocre-soft);
  font-size:0.78rem;letter-spacing:0.14em;text-transform:uppercase;
}
@media (max-width:540px){
  .contact-info-item{grid-template-columns:1fr;gap:4px;padding:14px 0;}
  .contact-info-item b{font-size:0.7rem;}
}
.contact-form label{
  display:block;font-size:0.74rem;letter-spacing:0.12em;text-transform:uppercase;
  color:rgba(244,237,226,0.7);margin:18px 0 7px;font-weight:500;
}
.contact-form label:first-of-type{margin-top:0;}
.contact-form input,.contact-form select,.contact-form textarea{
  width:100%;padding:13px 15px;
  background:rgba(244,237,226,0.05);
  border:1px solid var(--line-clair);border-bottom:1px solid var(--line-clair);
  color:var(--creme);font-family:var(--sans);font-size:0.97rem;
  border-radius:0;transition:border-color .2s, background-color .2s, box-shadow .2s;
}
.contact-form input:focus,.contact-form select:focus,.contact-form textarea:focus{
  outline:none;border-color:var(--ocre-soft);
  background:rgba(244,237,226,0.09);
  box-shadow:0 1px 0 0 var(--ocre-soft);
}
.contact-form select option{background:var(--anthracite);color:var(--creme);}
.contact-form textarea{resize:vertical;min-height:110px;}
.contact-form .btn{margin-top:26px;width:100%;background:var(--ocre);border-color:var(--ocre) !important;color:var(--creme);}
.contact-form .btn:hover{background:var(--ocre-soft);border-color:var(--ocre-soft) !important;}
.q-hp{position:absolute;left:-9999px;}

/* ---------- MENTIONS LÉGALES ---------- */
.legal-block{background:#fff;border:1px solid var(--line);padding:48px 44px;margin-bottom:32px;}
@media (max-width:680px){.legal-block{padding:32px 24px;}}
.legal-block h2{font-size:1.55rem;font-style:italic;color:var(--ocre);margin:0 0 1rem;}
.legal-block h3{font-size:1.1rem;font-weight:600;font-family:var(--sans);margin:1.4rem 0 0.5rem;}
.legal-block .row{
  display:grid;grid-template-columns:170px 1fr;gap:16px;
  padding:10px 0;border-bottom:1px solid var(--line-soft);font-size:0.96rem;
}
@media (max-width:680px){.legal-block .row{grid-template-columns:1fr;gap:4px;}}
.legal-block .row:last-child{border-bottom:none;}
.legal-block .row b{
  font-weight:500;color:var(--anthracite-soft);
  font-size:0.78rem;letter-spacing:0.12em;text-transform:uppercase;padding-top:2px;
}

/* ---------- FOOTER ---------- */
footer.site{
  background:var(--anthracite);color:rgba(244,237,226,0.6);
  padding:50px 0 30px;border-top:1px solid var(--line-clair-soft);font-size:0.88rem;
}
footer.site .foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:50px;padding-bottom:40px;}
@media (max-width:860px){footer.site .foot-grid{grid-template-columns:1fr;gap:30px;}}
footer.site h5{
  font-family:var(--sans);font-size:0.74rem;letter-spacing:0.18em;
  text-transform:uppercase;color:var(--ocre-soft);margin:0 0 16px;font-weight:500;
}
footer.site a{color:rgba(244,237,226,0.75);border:none;}
footer.site a:hover{color:var(--ocre-soft);}
footer.site .legal{
  border-top:1px solid var(--line-clair-soft);
  padding-top:24px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:20px;font-size:0.8rem;
}
footer.site ul{list-style:none;padding:0;margin:0;}
footer.site li{margin-bottom:9px;}
.foot-brand p{max-width:400px;}
footer.site .foot-bar{
  max-width:var(--maxw);margin:0 auto;padding:0 28px;
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;
}

/* ---------- ANIMATION ----------
   Le masquage n'est appliqué que si le script tourne (classe .js posée
   dans le <head>). Sans JavaScript, tout le contenu reste visible.
   Le décalage --i est posé par le script sur chaque élément d'une même
   grille, pour que les colonnes se lèvent l'une après l'autre.

   V5, 18 septembre 2026 : une seule animation d'apparition, recyclée à
   l'identique sur neuf familles de blocs différentes, faisait partie des
   quatre motifs relevés comme « génériques » dans l'audit du même jour.
   La classe .fade-in reste la base (elle sert toujours à la majorité des
   grilles de cartes), mais cinq familles ont leur propre signature
   d'entrée plutôt que la même levée verticale : voir le détail sous chaque
   règle. Le mécanisme de détection au défilement (IntersectionObserver,
   dans le script) ne change pas — seule la façon dont chaque famille
   apparaît une fois détectée change. */
.js .fade-in{
  opacity:0;transform:translateY(22px);
  transition:opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1);
  transition-delay:calc(var(--i, 0) * 70ms);
}
.js .fade-in.visible{opacity:1;transform:translateY(0);}

/* Sous-titres de section : la levée de 22px, répétée juste avant le
   contenu qu'elle introduit, donnait une impression de bégaiement visuel.
   Un déplacement plus court et plus rapide, sans étagement (--i ne
   s'applique pas ici, il n'y a qu'un seul .section-head par section). */
.js .section-head.fade-in{
  transform:translateY(10px);
  transition-duration:.6s;
}

/* Frise du diagnostic : elle se lit de haut en bas le long d'un rail à
   gauche, pas comme une grille de cartes. Elle entre depuis la gauche
   plutôt que par le bas, pour suivre le sens de lecture du rail. */
.js .tunnel-step.fade-in{
  transform:translateX(-28px);
}
.js .tunnel-step.fade-in.visible{transform:translateX(0);}

/* Portrait façon carte postale : déjà traité avec une ombre dure décalée,
   comme posé sur la page plutôt qu'imprimé dedans. L'entrée reprend cette
   idée avec une légère rotation qui se redresse, au lieu d'une simple
   levée verticale identique aux cartes environnantes. */
.js .apropos-portrait.fade-in{
  transform:translateY(18px) rotate(-1.4deg);
  transition-duration:.9s;
}
.js .apropos-portrait.fade-in.visible{transform:translateY(0) rotate(0deg);}

/* Chute éditoriale (citation en exergue sous la règle de lecture) : un
   simple fondu, sans déplacement — le mouvement est déjà porté par la
   grille au-dessus, la citation doit se poser plutôt que « voler » vers
   sa place. */
.js .tri-chute.fade-in{
  transform:none;
  transition-duration:1.1s;
}

@media (prefers-reduced-motion:reduce){
  .js .fade-in{opacity:1;transform:none;transition:none;}
  .hero h1.anime .h1-ligne > span{animation:none;transform:none;opacity:1;}
  .format-card:hover,.livrable:hover{transform:none;}
  html{scroll-behavior:auto;}
}

/* ---------- AUDIT EN LIGNE, FORMULAIRE PAR ÉCRANS ---------- */
.audit-wrap{max-width:820px;margin:0 auto;padding:0 28px 100px;}
@media (max-width:540px){.audit-wrap{padding:0 20px 60px;}}
/* Le « top » colle sous le bandeau compact : 12px + 38px + 12px = 62px de
   haut sur grand écran, 10px + 32px + 10px = 52px sur téléphone. Réglé le
   17 septembre 2026 en même temps que le bandeau — l'ancienne valeur de 78px
   correspondait à l'en-tête crème d'avant et laissait un décalage. */
.progress{position:sticky;top:62px;z-index:20;background:var(--creme);padding:18px 0 14px;border-bottom:1px solid var(--line-soft);}
@media (max-width:540px){.progress{top:52px;}}
.progress-bar{height:3px;background:var(--line);border-radius:2px;overflow:hidden;}
.progress-fill{height:100%;width:0;background:linear-gradient(90deg, var(--ocre-soft), var(--ocre));transition:width .4s cubic-bezier(.16,1,.3,1);}
.progress-label{
  display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  margin-top:10px;font-size:0.76rem;letter-spacing:0.14em;text-transform:uppercase;color:var(--anthracite-soft);
}
.progress-label b{font-weight:500;color:var(--ocre);}
.ecran{display:none;}
.ecran.actif{display:block;animation:apparait .35s ease;}
@keyframes apparait{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}
.ecran-titre{margin:38px 0 6px;font-size:clamp(1.7rem,3.4vw,2.2rem);font-style:italic;}
.ecran-intro{color:var(--anthracite-soft);margin-bottom:30px;font-size:0.98rem;}
.q{padding:22px 0;border-bottom:1px solid var(--line-soft);}
.q:last-of-type{border-bottom:none;}
.q > label,.q .q-legend{
  display:block;font-family:var(--serif);font-size:1.2rem;line-height:1.35;
  color:var(--anthracite);margin-bottom:6px;font-weight:500;
}
.q-num{color:var(--ocre);font-style:italic;margin-right:8px;}
.q-aide{display:block;font-size:0.87rem;color:var(--anthracite-soft);margin-bottom:12px;}
.audit-wrap input[type=text],.audit-wrap input[type=email],.audit-wrap input[type=tel],
.audit-wrap input[type=number],.audit-wrap select,.audit-wrap textarea{
  width:100%;padding:13px 15px;background:#fff;border:1px solid var(--line);
  color:var(--anthracite);font-family:var(--sans);font-size:0.97rem;border-radius:0;transition:border-color .2s;
}
.audit-wrap input:focus,.audit-wrap select:focus,.audit-wrap textarea:focus{outline:none;border-color:var(--ocre);}
.audit-wrap textarea{resize:vertical;min-height:92px;}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
@media (max-width:540px){.duo{grid-template-columns:1fr;}}
.duo label,.mini-label{
  display:block;font-size:0.74rem;letter-spacing:0.12em;text-transform:uppercase;
  color:var(--anthracite-soft);margin-bottom:7px;font-weight:500;font-family:var(--sans);
}
.cases{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
@media (max-width:600px){.cases{grid-template-columns:1fr;}}
.case{
  display:flex;align-items:flex-start;gap:11px;padding:12px 14px;
  border:1px solid var(--line);background:#fff;cursor:pointer;transition:border-color .15s,background .15s;
  font-size:0.94rem;line-height:1.35;
}
.case:hover{border-color:var(--ocre);}
.case input{width:auto;margin-top:3px;flex-shrink:0;accent-color:var(--ocre);}
.case:has(input:checked){border-color:var(--ocre);background:rgba(184,99,46,0.05);}
.note{
  margin-top:16px;padding:16px 20px;background:rgba(184,99,46,0.06);
  border-left:3px solid var(--ocre);font-size:0.89rem;color:var(--anthracite-soft);
}
.note b{color:var(--anthracite);font-weight:600;}
.nav-ecrans{display:flex;justify-content:space-between;gap:14px;margin-top:36px;padding-top:26px;border-top:1px solid var(--line);}
.btn-retour{background:none;border:none;color:var(--anthracite-soft);font-family:var(--sans);font-size:0.92rem;cursor:pointer;padding:0;}
.btn-retour:hover{color:var(--ocre);}
.btn-retour[hidden]{visibility:hidden;display:block !important;}
.erreur{color:#9B3520;font-size:0.88rem;margin-top:10px;display:none;}
.erreur.visible{display:block;}
.hp{position:absolute;left:-9999px;}

/* ---------- ÉCRAN DE CHOIX DU MÉTIER, cartes cliquables ---------- */
.cartes-type{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:8px;}
@media (max-width:640px){.cartes-type{grid-template-columns:1fr;}}
.carte-type{
  display:block;width:100%;text-align:left;cursor:pointer;
  background:#fff;border:1px solid var(--line);border-left:3px solid transparent;
  border-radius:0;padding:22px 24px;font-family:var(--sans);
  transition:border-color .15s;
}
/* V5 : ces cartes sont un choix (l'utilisateur sélectionne son métier), pas
   une simple vignette de contenu — la réponse au survol/sélection est un
   filet ocre à gauche qui s'affirme, plutôt que le lever+ombre générique
   utilisé ailleurs pour des cartes qui ne font que présenter du texte. */
.carte-type:hover{border-left-color:var(--ocre-pale);}
.carte-type:focus-visible{outline:2px solid var(--ocre);outline-offset:3px;}
.carte-type.choisie{border-color:var(--line);border-left-color:var(--ocre);background:rgba(184,99,46,.05);}
.carte-titre{
  display:block;font-family:var(--serif);font-size:1.3rem;line-height:1.25;
  color:var(--anthracite);font-weight:500;margin-bottom:5px;
}
.carte-desc{display:block;font-size:.88rem;line-height:1.45;color:var(--anthracite-soft);}
.carte-type .carte-fleche{
  display:block;margin-top:12px;font-size:.76rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ocre);opacity:0;transition:opacity .15s;
}
.carte-type:hover .carte-fleche,.carte-type:focus-visible .carte-fleche{opacity:1;}

/* ---------- REPRISE D'UN QUESTIONNAIRE INTERROMPU ---------- */
.reprise{
  display:none;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;
  background:#fff;border:1px solid var(--ocre);border-left-width:3px;
  padding:16px 20px;margin:26px 0 0;font-size:.93rem;color:var(--anthracite-soft);
}
.reprise.visible{display:flex;}
.reprise-actions{display:flex;gap:10px;flex-shrink:0;}
.lien-sobre{
  background:none;border:none;padding:0;cursor:pointer;font-family:var(--sans);
  font-size:.9rem;color:var(--ocre);text-decoration:underline;text-underline-offset:3px;
}
.lien-sobre.discret{color:var(--anthracite-soft);}

/* ---------- NAVIGATION COLLANTE EN BAS SUR MOBILE ---------- */
@media (max-width:760px){
  .nav-ecrans{
    position:sticky;bottom:0;z-index:15;
    background:linear-gradient(to bottom,rgba(244,237,226,0) 0%,var(--creme) 26%);
    padding:22px 0 16px;margin-top:28px;
  }
}

/* ==========================================================
   V6, 18 septembre 2026 — « plus punchy, plus dynamique »
   Ce bloc est volontairement en fin de fichier : il écrase les réglages
   d'échelle et de rythme posés plus haut sans les réécrire un par un. Si un
   jour on fusionne, c'est ce bloc qui fait foi. Trois idées :
   1. Le punch vient du contraste d'échelle (titres, chiffres), pas du
      mouvement. On n'ajoute aucune animation de carte.
   2. Deux couleurs de plus, pas trois : le vert sapin (déjà dans la charte,
      jamais utilisé) en fond de section, et un rouge cuivre réservé aux
      chiffres. Anthracite, ocre, crème restent la base validée par Fabrice.
   3. Les photos passent en filigrane derrière le texte (idée de Jeff). Les
      fichiers actuels sont PROVISOIRES, voir le commentaire en tête du HTML.
   Téléphone d'abord : chaque règle a sa version sous 680px.
   ========================================================== */
:root{
  --cuivre:#A33D22;        /* 5,5:1 sur crème, réservé aux chiffres */
  --cuivre-clair:#D9694A;  /* même rôle, sur fond sombre */
}

/* ----- Échelle typographique ----- */
h1{font-size:clamp(3rem,6.2vw,5.6rem);line-height:.97;letter-spacing:-0.028em;}
h2{font-size:clamp(2.3rem,4.5vw,3.8rem);line-height:1.02;letter-spacing:-0.022em;margin-bottom:1.4rem;}
body{font-size:16px;}
@media (max-width:680px){
  /* !important nécessaire : la règle mobile historique plus haut en a un. */
  h1{font-size:clamp(2.55rem,11.5vw,3.4rem) !important;line-height:1 !important;}
  h2{font-size:clamp(2rem,8.6vw,2.6rem) !important;line-height:1.05 !important;}
  .lead{font-size:1.1rem !important;}
}
/* Un petit trait avant le sur-titre : il ancre l'œil au bord gauche, là où
   le titre géant démarre juste dessous. */
.eyebrow::before{
  content:'';display:inline-block;width:26px;height:1px;
  background:currentColor;vertical-align:middle;margin-right:12px;opacity:.8;
}
@media (max-width:680px){.eyebrow::before{width:18px;margin-right:9px;}}

/* ----- Photos en filigrane ----- */
section{position:relative;}
section > .container,section > .container-narrow{position:relative;z-index:1;}
.photo-fond{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;}
.photo-fond img{
  width:100%;height:100%;object-fit:cover;display:block;
  /* Sépia : c'est ce que Jeff a retenu sur les essais du 18 septembre, et
     ça fond n'importe quelle photo dans la palette crème/ocre. L'opacité
     fait le reste : à 20 %, une image de 412px passe sans qu'on voie le
     manque de définition. */
  filter:sepia(.85) contrast(1.05) brightness(.92) saturate(.9);
  opacity:.2;
}
section.dark .photo-fond img{
  opacity:.16;
  filter:sepia(.6) contrast(1.15) brightness(.85) grayscale(.25);
  mix-blend-mode:luminosity;
}
.photo-fond::after{content:'';position:absolute;inset:0;}
section.dark.sapin .photo-fond::after{
  background:linear-gradient(180deg, var(--sapin) 0%, rgba(45,61,45,.35) 30%, rgba(45,61,45,.35) 70%, var(--sapin) 100%);
}

/* ----- Héros ----- */
.hero{padding:84px 0 72px;}
.hero-inner{max-width:920px;}
.hero h1{max-width:none;}
.hero .tagline{font-size:1.45rem;max-width:620px;margin:1.6rem 0 2rem;}
/* La photo occupe la droite et s'efface vers la gauche, sous le texte. */
.hero-photo{left:auto;width:66%;}
.hero-photo::after{
  background:
    linear-gradient(90deg, var(--creme) 0%, rgba(244,237,226,.7) 30%, rgba(244,237,226,0) 72%),
    linear-gradient(180deg, rgba(244,237,226,.15) 0%, rgba(244,237,226,0) 45%, var(--creme) 100%);
}
@media (max-width:980px){
  .hero-photo{width:100%;}
  .hero-photo::after{
    background:linear-gradient(180deg, rgba(244,237,226,.7) 0%, rgba(244,237,226,.3) 40%, var(--creme) 100%);
  }
}
/* Dérive lente de la photo au défilement : un défilement piloté par le CSS,
   sans script, ignoré par les navigateurs qui ne le connaissent pas (la
   photo reste alors simplement fixe). */
@supports (animation-timeline: scroll()){
  @media (prefers-reduced-motion:no-preference){
    .hero-photo img{
      animation:derive-photo linear both;
      animation-timeline:scroll(root);animation-range:0 100vh;
    }
    @keyframes derive-photo{
      from{transform:translateY(-4%) scale(1.12);}
      to{transform:translateY(6%) scale(1.12);}
    }
  }
}
@media (max-width:680px){
  .hero{padding:44px 0 52px;}
  .hero .tagline{font-size:1.12rem;}
}

/* Les deux chiffres. */
.hero-chiffres{
  display:grid;grid-template-columns:1fr 1fr;gap:40px;
  margin-top:64px;padding-top:40px;border-top:1px solid var(--line);
  max-width:920px;position:relative;z-index:1;
}
.chiffre-num{
  display:block;font-family:var(--serif);font-weight:500;color:var(--cuivre);
  font-size:clamp(3.6rem,7vw,6.4rem);line-height:.9;letter-spacing:-0.03em;
  font-variant-numeric:lining-nums tabular-nums;
}
.chiffre-unit{font-size:.34em;font-style:italic;font-weight:400;letter-spacing:0;color:var(--anthracite);}
.chiffre-txt{
  display:block;margin-top:14px;max-width:34ch;
  font-size:.95rem;line-height:1.5;color:var(--anthracite-soft);
}
.js .chiffre.fade-in{transform:translateY(16px);transition-duration:1s;}
@media (max-width:680px){
  .hero-chiffres{gap:24px 18px;margin-top:40px;padding-top:26px;}
  .chiffre-num{font-size:clamp(2.7rem,13vw,3.6rem);}
  .chiffre-txt{font-size:.84rem;margin-top:10px;line-height:1.45;}
}
@media (max-width:400px){.hero-chiffres{grid-template-columns:1fr;}}
.hero-parole{margin-top:56px;font-size:1.4rem;}
@media (max-width:680px){.hero-parole{font-size:1.15rem;margin-top:40px;}}

/* ----- La règle de lecture, en vert sapin ----- */
section.dark.sapin{background:var(--sapin);}
section.dark.sapin .tri-grid{background:rgba(244,237,226,.05);border-color:rgba(244,237,226,.2);}
section.dark.sapin .tri-col + .tri-col{border-left-color:rgba(244,237,226,.2);}
@media (max-width:860px){section.dark.sapin .tri-col + .tri-col{border-top-color:rgba(244,237,226,.2);}}
section.dark.sapin .tri-col h3{font-size:1.9rem;font-style:normal;letter-spacing:-0.015em;}
section.dark.sapin .tri-row b{color:var(--ocre-pale);}
section.dark.sapin .tri-chute{border-left-color:var(--ocre-pale);}
@media (max-width:680px){section.dark.sapin .tri-col h3{font-size:1.5rem;}}

/* ----- Ce qu'on traite, liste numérotée -----
   Une bande horizontale a été essayée puis rejetée par Jeff sur téléphone
   le 18 septembre 2026 : on lit de haut en bas. Le punch reste dans le
   numéro, gros et ocre, à gauche de chaque sujet. */
.sujets{
  display:grid;grid-template-columns:1fr 1fr;column-gap:64px;
  border-top:1px solid var(--line);
}
@media (max-width:860px){.sujets{grid-template-columns:1fr;}}
.sujet{
  display:grid;grid-template-columns:96px 1fr;gap:18px;align-items:start;
  padding:30px 0 28px;border-bottom:1px solid var(--line);
}
.sujet-num{
  font-family:var(--serif);font-style:italic;font-size:4.2rem;line-height:.8;
  color:var(--ocre);letter-spacing:-0.03em;transition:color .25s;
}
.sujet:hover .sujet-num{color:var(--cuivre);}
.sujet h4{font-family:var(--serif);font-size:1.5rem;font-weight:500;font-style:normal;margin:2px 0 8px;letter-spacing:-0.01em;}
.sujet p{font-size:.95rem;color:var(--anthracite-soft);margin:0;}
.js .sujet.fade-in{transform:translateX(-14px);}
.js .sujet.fade-in.visible{transform:translateX(0);}
@media (max-width:540px){
  .sujet{grid-template-columns:62px 1fr;gap:14px;padding:22px 0 20px;}
  .sujet-num{font-size:3rem;}
  .sujet h4{font-size:1.3rem;margin-top:0;}
  .sujet p{font-size:.92rem;}
}

/* ----- V6, deuxième passe (même jour) : un seul chiffre, photos partout
   où elles portent le sens, gros numéros dans les sections suivantes ----- */

/* Un seul chiffre dans le héros : nombre et texte côte à côte sur grand
   écran, empilés sur téléphone. */
.hero-chiffres{grid-template-columns:1fr;}
.chiffre{display:grid;grid-template-columns:auto 1fr;gap:6px 32px;align-items:baseline;}
.chiffre-txt{max-width:38ch;margin-top:0;font-size:1.05rem;}
@media (max-width:680px){
  .chiffre{grid-template-columns:1fr;gap:10px;}
  .chiffre-txt{font-size:.92rem;}
}

/* Photo derrière une section crème (accompagnement) : plus effacée que dans
   le héros, le texte est plus dense. */
section:not(.dark) .photo-fond img{opacity:.13;}
section:not(.dark) .photo-fond::after{
  background:linear-gradient(180deg, var(--creme) 0%, rgba(244,237,226,.5) 30%, rgba(244,237,226,.5) 70%, var(--creme) 100%);
}
/* Photo derrière une section anthracite (diagnostic). */
section.dark:not(.sapin) .photo-fond::after{
  background:linear-gradient(180deg, var(--anthracite) 0%, rgba(28,28,26,.45) 30%, rgba(28,28,26,.45) 70%, var(--anthracite) 100%);
}

/* L'accompagnement : 30 / 60 / 90 sont les vrais chiffres de la section, on
   les montre en grand plutôt que dans une pastille. Le rail qui reliait les
   pastilles n'a plus de sens, il disparaît. */
.method-grid::before{display:none;}
.method-grid{gap:40px 48px;margin-top:20px;}
.method-step{padding-top:0;border-top:1px solid var(--line);padding-top:22px;}
.method-step .num{
  position:static;width:auto;height:auto;border:none;background:none;border-radius:0;
  display:block;font-family:var(--serif);font-style:italic;font-weight:500;
  font-size:4.4rem;line-height:.85;color:var(--cuivre);letter-spacing:-0.03em;
  margin-bottom:18px;
}
.method-step h3{font-style:normal;font-size:1.6rem;letter-spacing:-0.01em;}
@media (max-width:680px){
  .method-step .num{font-size:3.4rem;}
  .method-step h3{font-size:1.35rem;}
}

/* Le diagnostic : les titres d'étape prennent de la taille, le folio
   fantôme en fond devient un peu plus présent. */
.tunnel-step h3{font-size:2rem;font-style:normal;letter-spacing:-0.015em;}
.tunnel-step::after{color:rgba(217,105,74,.14);}
@media (max-width:680px){.tunnel-step h3{font-size:1.5rem;}}

/* La posture : trois numéros en cuivre, plus grands. */
.posture-num{font-size:3.4rem;color:var(--cuivre);font-weight:500;letter-spacing:-0.03em;}
.posture-item h4{font-style:normal;font-size:1.6rem;letter-spacing:-0.01em;}

/* La méthode : les trois cartes perdent leur lever+ombre au survol (motif
   générique), gardent un simple filet ocre en haut. */
.format-card{position:relative;border-top:3px solid transparent;transition:border-color .25s;}
.format-card:hover{transform:none;}
.format-card.clair:hover{box-shadow:none;border-color:var(--line);border-top-color:var(--ocre);}
.format-card.retenu{border-color:var(--line);border-top-color:var(--ocre);}
.format-card h3{font-style:normal;font-size:1.7rem;letter-spacing:-0.01em;}

/* La société : le portrait prend plus de place, le texte se resserre. */
.apropos{grid-template-columns:1.1fr 1.3fr;gap:64px;}
@media (max-width:860px){.apropos{grid-template-columns:1fr;}}
.apropos-text p{font-size:1.02rem;}

/* ----- Photos plus présentes. Retour de Jeff le 18 septembre 2026 sur la
   première version : « là on ne voit pas du tout les photos ». Opacité
   doublée partout ; la lisibilité du texte est tenue par les dégradés,
   pas par l'effacement de l'image. ----- */
.photo-fond img{opacity:.5;filter:sepia(.7) contrast(1.05) brightness(.95) saturate(.85);}
.hero-photo::after{
  background:
    linear-gradient(90deg, var(--creme) 0%, rgba(244,237,226,.92) 26%, rgba(244,237,226,.45) 52%, rgba(244,237,226,0) 78%),
    linear-gradient(180deg, rgba(244,237,226,.1) 0%, rgba(244,237,226,0) 40%, var(--creme) 100%);
}
@media (max-width:980px){
  .hero-photo img{opacity:.42;}
  .hero-photo::after{
    background:linear-gradient(180deg, rgba(244,237,226,.72) 0%, rgba(244,237,226,.42) 45%, var(--creme) 100%);
  }
}
section.dark .photo-fond img{opacity:.38;filter:sepia(.5) contrast(1.1) brightness(.9) grayscale(.15);mix-blend-mode:normal;}
section.dark.sapin .photo-fond::after{
  background:linear-gradient(180deg, var(--sapin) 0%, rgba(45,61,45,.55) 25%, rgba(45,61,45,.55) 75%, var(--sapin) 100%);
}
section.dark:not(.sapin) .photo-fond::after{
  background:linear-gradient(180deg, var(--anthracite) 0%, rgba(28,28,26,.6) 25%, rgba(28,28,26,.6) 75%, var(--anthracite) 100%);
}
section:not(.dark) .photo-fond img{opacity:.32;}
section:not(.dark) .photo-fond::after{
  background:linear-gradient(180deg, var(--creme) 0%, rgba(244,237,226,.62) 25%, rgba(244,237,226,.62) 75%, var(--creme) 100%);
}
/* La salle du Grand Chêne sur le vert sapin : son plafond et ses fenêtres
   sont très clairs et écrasaient le texte sur téléphone. Deux réglages :
   on cadre sur le bas de l'image (les tables, les gens), et on la fond dans
   le vert par multiplication — les zones claires ne peuvent plus blanchir
   le fond, elles ne font que le teinter. */
section.dark.sapin .photo-fond img{
  object-position:50% 88%;
  mix-blend-mode:multiply;opacity:.75;
  filter:sepia(.4) contrast(1.15) brightness(1.05);
}
section.dark.sapin .photo-fond::after{
  background:linear-gradient(180deg, var(--sapin) 0%, rgba(45,61,45,.25) 22%, rgba(45,61,45,.25) 78%, var(--sapin) 100%);
}
/* Correctif : « mix-blend-mode » sur l'image ne fusionnait qu'avec le calque
   .photo-fond (position absolue + z-index = contexte d'empilement isolé),
   donc avec rien. Posé sur le calque lui-même, il fusionne avec le fond de
   la section, ce qui était le but. */
section.dark.sapin .photo-fond{mix-blend-mode:multiply;}
section.dark.sapin .photo-fond img{mix-blend-mode:normal;opacity:.9;filter:sepia(.35) contrast(1.1) brightness(1.1);}
section.dark.sapin .photo-fond::after{
  background:linear-gradient(180deg, var(--sapin) 0%, rgba(45,61,45,0) 25%, rgba(45,61,45,0) 75%, var(--sapin) 100%);
}