/* ==========================================================
   KPImpact CHR — feuille de style
   Charte Jeff Courtoy v1 : anthracite / ocre brûlée / crème
   Cormorant Garamond (titres) + Inter (texte) + Caveat (rare)

   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.
   ========================================================== */

: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;
  --sans:'Inter', system-ui, -apple-system, sans-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;}
.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, box-shadow .25s;
}
.livrable:hover{background:var(--creme-paper);box-shadow:var(--ombre-sm) inset;z-index: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:.09;transform:translateY(-4px);}
.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. */
.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);}
@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-radius:0;
  padding:22px 24px;font-family:var(--sans);
  transition:border-color .15s, box-shadow .15s, transform .15s;
}
.carte-type:hover{border-color:var(--ocre);transform:translateY(-1px);box-shadow:0 4px 14px rgba(28,28,26,.06);}
.carte-type:focus-visible{outline:2px solid var(--ocre);outline-offset:3px;}
.carte-type.choisie{border-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;
  }
}