/* =========================================================================
   A2RU — feuille de style commune du site a2ru.fr
   Extraite de maquette-v3.html le 2026-08-09, sans modification.
   Charte de référence : _systeme/charte-a2ru.md v2.0 — les neuf couleurs
   autorisées et le couple Lora / Jura ne se modifient pas ici.
   ⚠️ maquette-v3.html conserve son CSS en ligne : c'est le fichier validé.
      Il pourra basculer sur cette feuille en une ligne quand Rudy le dira.
   ========================================================================= */

@font-face{font-family:'Lora';src:url('../fonts/Lora-Regular.woff2') format('woff2'),url('../fonts/Lora-Regular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Lora';src:url('../fonts/Lora-Italic.woff2') format('woff2'),url('../fonts/Lora-Italic.ttf') format('truetype');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'Lora';src:url('../fonts/Lora-Medium.woff2') format('woff2'),url('../fonts/Lora-Medium.ttf') format('truetype');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Lora';src:url('../fonts/Lora-SemiBold.woff2') format('woff2'),url('../fonts/Lora-SemiBold.ttf') format('truetype');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Jura';src:url('../fonts/Jura-Medium.woff2') format('woff2'),url('../fonts/Jura-Medium.ttf') format('truetype');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Jura';src:url('../fonts/Jura-Medium.woff2') format('woff2'),url('../fonts/Jura-Medium.ttf') format('truetype');font-weight:600;font-style:normal;font-display:swap}
/* Corps de texte — arbitrage du 12/08/2026, option B. Lora reste aux titres, aux
   accroches et aux numéraux ; le corps passe en sans. Motif : Lora en 400 à 17 px
   sur des pages de 12 500 px alourdit la lecture. OFL, auto-hébergée, aucun CDN. */
@font-face{font-family:'IBM Plex Sans';src:url('../fonts/IBMPlexSans-Regular.woff2') format('woff2'),url('../fonts/IBMPlexSans-Regular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'IBM Plex Sans';src:url('../fonts/IBMPlexSans-Italic.woff2') format('woff2'),url('../fonts/IBMPlexSans-Italic.ttf') format('truetype');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'IBM Plex Sans';src:url('../fonts/IBMPlexSans-Medium.woff2') format('woff2'),url('../fonts/IBMPlexSans-Medium.ttf') format('truetype');font-weight:500;font-style:normal;font-display:swap}

:root{
  /* Charte système v2.0 — aucune teinte hors de ces neuf valeurs */
  --nuit:#0A0F28; --nuit-profonde:#06091A; --or:#C4A44E; --or-clair:#D4B96A;
  --or-profond:#876B28; --ardoise:#3A4060; --acier:#6B7085; --brume:#F4F5F8; --blanc:#FFFFFF;
  /* Tons dérivés — transparences uniquement */
  --sur-nuit:rgba(255,255,255,.78); --sur-nuit-attenue:rgba(255,255,255,.62);
  --bord:rgba(58,64,96,.13); --bord-fort:rgba(58,64,96,.22); --bord-or:rgba(196,164,78,.42);
  --bord-or-faible:rgba(196,164,78,.30);   /* filets d'engagement sur fond nuit */
  --voile-or:rgba(196,164,78,.05);         /* voile atmosphérique du hero */
  --voile-blanc:rgba(255,255,255,.045);    /* contre-voile du hero */
  --filet-nuit:rgba(255,255,255,.12);      /* séparateurs sur fond nuit */
  --sous-blanc:rgba(255,255,255,.22);      /* soulignement des liens du pied */
  --voile-nav:rgba(255,255,255,.96);       /* fond translucide de la barre collante */
  --trait-or:.5;                           /* opacité du filet or du bandeau */
  --trait-blanc:.1;                        /* opacité du filet blanc du bandeau */

  --f-titre:'Lora',Georgia,serif; --f-sur:'Jura',system-ui,sans-serif;
  --f-corps:'IBM Plex Sans','Helvetica Neue',Helvetica,Arial,sans-serif;
  --t-xs:.775rem; --t-sm:.9rem; --t-base:1.0625rem; --t-md:1.1875rem;
  --t-lg:1.4rem; --t-xl:1.9rem;
  --lh-display:1.12; --lh-titre:1.28; --lh-corps:1.62; --lh-serre:1.52;
  --max:1160px; --mesure:72ch; --mesure-large:80ch;
  --pas:clamp(88px,9vw,132px);
  --t:.34s cubic-bezier(.22,.61,.36,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--f-corps);font-weight:400;font-size:16.5px;line-height:var(--lh-corps);color:var(--ardoise);background:var(--blanc);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
.wrap{max-width:var(--max);margin:0 auto;padding:0 clamp(24px,5vw,48px)}

h1,h2,h3{font-family:var(--f-titre);color:var(--nuit)}
h1{font-size:clamp(2.15rem,4.2vw,3.15rem);font-weight:600;line-height:var(--lh-display);letter-spacing:-.014em;text-wrap:balance}
h2{font-size:clamp(1.6rem,2.8vw,2.25rem);font-weight:600;line-height:var(--lh-display);letter-spacing:-.01em;text-wrap:pretty}
h3{font-size:var(--t-lg);font-weight:500;line-height:var(--lh-titre);text-wrap:pretty}
/* Emphase par l'italique, jamais par la couleur — d'après Kéa & Partners */
h1 em,h2 em{font-style:italic;font-weight:400;letter-spacing:-.006em}
/* Italique en ligne, PAS en display:block — le titre reste sur une ligne quand il
   y tient. Consigne de Rudy du 07/08 : « ça devrait être sur une seule ligne ». */
h2 .it{font-style:italic;font-weight:400;letter-spacing:-.004em}
h2 .it::before{content:" "}
p{max-width:var(--mesure)}

.sur{font-family:var(--f-sur);font-weight:600;font-size:var(--t-xs);letter-spacing:.2em;line-height:1.4;text-transform:uppercase;color:var(--or-profond);display:block}
.sur.clair{color:var(--or)}
.sur::before{content:"";display:block;width:40px;height:1px;background:currentColor;margin-bottom:18px;opacity:.75}
a{color:inherit}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--or);outline-offset:3px}
.hero a:focus-visible,.nuit a:focus-visible,footer a:focus-visible{outline-color:var(--or-clair)}

.btn{display:inline-block;font-family:var(--f-sur);font-weight:600;font-size:var(--t-xs);letter-spacing:.14em;line-height:1;text-transform:uppercase;padding:18px 32px;text-decoration:none;border:1px solid var(--or);color:var(--or);transition:background var(--t),color var(--t),border-color var(--t)}
.btn:hover{background:var(--or);color:var(--nuit)}
.btn.plein{background:var(--or);color:var(--nuit)}
.btn.plein:hover{background:var(--or-clair);border-color:var(--or-clair)}
.btn.sombre{border-color:var(--bord-fort);color:var(--nuit)}
.btn.sombre:hover{background:var(--nuit);color:var(--blanc);border-color:var(--nuit)}
.evite{position:absolute;left:-9999px;top:0;background:var(--nuit);color:var(--blanc);padding:14px 22px;z-index:100}
.evite:focus{left:0}

/* ---------- Navigation ---------- */
/* ⚠️ Portée restreinte au <nav> principal. Le sélecteur nu `nav{}` frappait aussi
   le fil d'Ariane et le <nav class="legal"> du pied : bandeau blanc collant parasite. */
body>nav{position:sticky;top:0;z-index:50;background:var(--voile-nav);border-bottom:1px solid var(--bord);backdrop-filter:blur(10px)}
body>nav .wrap{display:flex;align-items:center;justify-content:space-between;height:84px;gap:24px}
.logo{display:flex;align-items:center;text-decoration:none;flex-shrink:0}
.logo svg{display:block}
.liens{display:flex;gap:30px;align-items:center;font-family:var(--f-sur);font-weight:500;font-size:var(--t-xs);letter-spacing:.11em;text-transform:uppercase}
.liens a{text-decoration:none;color:var(--ardoise);padding-bottom:5px;border-bottom:1px solid transparent;white-space:nowrap;transition:color var(--t),border-color var(--t)}
.liens a:hover{color:var(--nuit);border-color:var(--or)}
.liens a.retrait{color:var(--acier)}
.burger{display:none;background:none;border:1px solid var(--bord-fort);padding:11px 16px;font-family:var(--f-sur);font-weight:600;font-size:var(--t-xs);letter-spacing:.12em;text-transform:uppercase;color:var(--nuit);cursor:pointer}

/* ---------- Hero ---------- */
.hero{position:relative;background:var(--nuit);padding:clamp(96px,11vw,152px) 0;overflow:hidden}
/* Substitution d'imagerie : voile abstrait, pas d'aplat d'or — d'après Slaughter and May */
.hero::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(58% 78% at 82% 12%, var(--voile-or), transparent 62%),
    radial-gradient(52% 70% at 8% 96%, var(--voile-blanc), transparent 60%),
    linear-gradient(168deg, transparent 52%, var(--nuit-profonde) 100%)}
.hero .wrap{position:relative}
.hero h1{color:var(--blanc);max-width:31ch;margin-top:26px}
.hero .accroche{font-family:var(--f-titre);font-size:clamp(1.3rem,2.1vw,1.7rem);line-height:1.34;color:var(--or);margin:30px 0 20px;font-style:italic;max-width:none;text-wrap:pretty}
.hero .soustitre{font-size:var(--t-md);line-height:1.6;color:var(--sur-nuit);max-width:52ch}
.hero .cta{margin-top:48px;display:flex;gap:16px;flex-wrap:wrap}
.hero .filet-bas{margin-top:56px;padding-top:26px;border-top:1px solid var(--filet-nuit);display:flex;gap:38px;flex-wrap:wrap;
  font-family:var(--f-sur);font-weight:500;font-size:var(--t-xs);letter-spacing:.15em;text-transform:uppercase;
  /* ⚠️ ÉCLAIRCI LE 18/08/2026 — signalé par Rudy : « peu lisible à cause de la
     couleur ». Mesuré AVANT de changer : la couleur servie était
     `rgba(255,255,255,.62)`, soit rgb(162,164,173) une fois composée sur le
     nuit — **7,60:1**, donc conforme AA (4,5) ET AAA (7,0). Ce n'était pas une
     non-conformité.
     ⛔ Mais la gêne est réelle, et elle ne vient pas QUE du contraste : 12,4 px,
        `text-transform:uppercase` et `letter-spacing:.15em` se cumulent. Les
        capitales espacées se lisent plus lentement que le bas-de-casse, à
        contraste égal.
     ✅ On monte à .82 → 11,9:1. Assez pour que la ligne se détache, pas assez
        pour qu'elle concurrence le H1 : ces trois mentions sont une réassurance,
        pas un titre.
     ⛔ Aucune couleur ajoutée — c'est du blanc de charte, seule l'opacité
        change. `CLAUDE.md` §8 règle 3 : neuf valeurs, aucune autre. */
  color:rgba(255,255,255,.82)}

/* ---------- Chapô ---------- */
.chapeau{background:var(--brume);padding:clamp(48px,6vw,64px) 0;border-bottom:1px solid var(--bord)}
.chapeau p{font-size:var(--t-md);line-height:1.62;color:var(--ardoise);max-width:78ch}

/* ---------- Sections ---------- */
.sect{padding:var(--pas) 0}
.sect.brume{background:var(--brume)}
.sect.nuit{background:var(--nuit)}
.entete{margin-bottom:clamp(44px,5vw,60px)}
.entete h2{max-width:none;margin-top:20px}
.entete p{color:var(--ardoise);margin-top:20px;font-size:var(--t-base);max-width:var(--mesure-large)}
.sect.nuit .entete h2{color:var(--blanc)}
.sect.nuit .entete p{color:var(--sur-nuit)}

/* ---------- Bandeau abstrait — substitution d'imagerie ---------- */
.bandeau{display:block;width:100%;height:clamp(120px,14vw,180px);background:var(--nuit)}
.bandeau svg{display:block;width:100%;height:100%}
.bandeau .fond{fill:var(--nuit)}
.bandeau .creux{fill:var(--nuit-profonde)}
.bandeau .trait-or{fill:none;stroke:var(--or);stroke-width:1;opacity:var(--trait-or)}
.bandeau .trait-clair{fill:none;stroke:var(--blanc);stroke-width:1;opacity:var(--trait-blanc)}

/* Ancres : compenser la hauteur de la barre collante (84 px) */
[id]{scroll-margin-top:104px}

/* ---------- Catégories d'intervention ---------- */
/* ⚠️ Ce ne sont pas des offres standardisées : ce sont des catégories de problèmes.
   Chaque mission est cadrée puis chiffrée sur devis. Aucun forfait, aucun prix,
   aucun `Offer` ni `priceRange` dans le JSON-LD. */
.cadrage{margin-top:56px;padding-top:28px;border-top:1px solid var(--bord);font-size:var(--t-base);line-height:var(--lh-corps);color:var(--ardoise);max-width:var(--mesure)}
.cadrage strong{font-weight:500;color:var(--nuit)}
.cadrage .souligne{color:var(--nuit);border-bottom:1px solid var(--bord-or);padding-bottom:2px}
.groupe+.groupe{margin-top:56px}
/* Offre d'entrée — porte d'entrée du catalogue, traitement de tête d'affiche */
.groupe.phare .pole{color:var(--or-profond);border-bottom-color:var(--bord-or)}
.groupe.phare .carte{padding:44px clamp(30px,3.5vw,44px)}
.groupe.phare .carte::after{transform:scaleX(1)}   /* filet or permanent, pas au survol */
.groupe.phare .carte h3{font-size:var(--t-lg);min-height:0;margin:20px 0 14px;max-width:30ch}
.groupe.phare .carte p{font-size:var(--t-base);line-height:var(--lh-corps);max-width:var(--mesure)}
.pole{font-family:var(--f-sur);font-weight:600;font-size:var(--t-xs);letter-spacing:.17em;line-height:1.4;text-transform:uppercase;color:var(--ardoise);display:block;margin-bottom:24px;padding-bottom:12px;border-bottom:1px solid var(--bord)}
.grille{display:grid;grid-template-columns:repeat(auto-fit,minmax(304px,1fr));gap:1px;background:var(--bord);border:1px solid var(--bord)}
.carte{background:var(--blanc);padding:38px 34px 34px;display:flex;flex-direction:column;position:relative;transition:background var(--t)}
.carte::after{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--or);transform:scaleX(0);transform-origin:left;transition:transform var(--t)}
.carte:hover{background:var(--brume)}
.carte:hover::after{transform:scaleX(1)}
.carte .num{font-family:var(--f-titre);font-size:var(--t-base);color:var(--or-profond);font-variant-numeric:lining-nums;letter-spacing:.08em}
.carte h3{font-size:var(--t-md);margin:18px 0 12px;min-height:2.6em}
.carte p{font-size:var(--t-sm);line-height:var(--lh-serre);color:var(--ardoise);max-width:none;flex:1}
.carte .lien{align-self:start;margin-top:24px;font-family:var(--f-sur);font-weight:600;font-size:var(--t-xs);letter-spacing:.13em;line-height:1;text-transform:uppercase;color:var(--or-profond);text-decoration:none;border-bottom:1px solid var(--bord-or);padding-bottom:4px;transition:border-color var(--t)}
.carte .lien:hover{border-color:var(--or-profond)}

/* ---------- Parcours ---------- */
.parcours .bloc{display:grid;grid-template-columns:1fr minmax(224px,280px);gap:clamp(40px,6vw,72px);align-items:start}
.parcours p{margin-bottom:22px;max-width:var(--mesure-large)}
.parcours .amorce,.amorce{font-family:var(--f-titre);font-size:var(--t-lg);line-height:1.46;color:var(--nuit);max-width:none;font-weight:500;font-style:italic}
.filet{width:52px;height:1px;background:var(--or);margin:28px 0}
.portrait figure{margin:0}
.portrait img{display:block;width:100%;height:auto}
.portrait .cadre{position:relative}
.portrait .cadre::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 1px var(--bord-fort);pointer-events:none}
.portrait figcaption{margin-top:18px;padding-top:15px;border-top:1px solid var(--or)}
.portrait .nom{display:block;font-family:var(--f-titre);font-size:var(--t-md);line-height:1.3;color:var(--nuit)}
.portrait .role{display:block;margin-top:7px;font-family:var(--f-sur);font-weight:600;font-size:var(--t-xs);letter-spacing:.14em;line-height:1.4;text-transform:uppercase;color:var(--ardoise)}

.chiffres{display:grid;grid-template-columns:repeat(auto-fit,minmax(206px,1fr));gap:44px 36px;margin-top:clamp(56px,6vw,76px);padding-top:48px;border-top:1px solid var(--bord)}
.chiffre .v{font-family:var(--f-titre);font-size:clamp(2.3rem,3.6vw,3.05rem);line-height:1;color:var(--or-profond);font-variant-numeric:lining-nums;letter-spacing:-.02em}
.chiffre .l{font-family:var(--f-sur);font-weight:600;font-size:var(--t-xs);letter-spacing:.14em;line-height:1.4;text-transform:uppercase;color:var(--nuit);margin:16px 0 9px}
.chiffre .d{font-size:var(--t-sm);line-height:var(--lh-serre);color:var(--ardoise);max-width:none}

/* ---------- Engagements ---------- */
.eng{display:grid;grid-template-columns:repeat(auto-fit,minmax(272px,1fr));gap:clamp(36px,4vw,52px);margin-top:8px}
.eng>div{padding-top:26px;border-top:1px solid var(--bord-or-faible)}
.eng h3{font-size:var(--t-md);color:var(--or);margin-bottom:16px}
.eng p{color:var(--sur-nuit);font-size:var(--t-sm);line-height:var(--lh-serre);max-width:none}

/* ---------- Références ---------- */
.ref{border-top:1px solid var(--bord);padding:48px 0;display:grid;grid-template-columns:minmax(158px,196px) 1fr;gap:clamp(28px,4vw,44px)}
.ref .cat{font-family:var(--f-sur);font-weight:600;font-size:var(--t-xs);letter-spacing:.14em;line-height:1.55;text-transform:uppercase;color:var(--or-profond)}
.ref h3{font-size:var(--t-lg);max-width:none}
.ref p{font-size:var(--t-base);line-height:var(--lh-corps);margin-top:16px;max-width:var(--mesure-large)}
.ref .preuve{color:var(--nuit);font-weight:500}
.ref .src{font-style:italic;color:var(--acier)}
.ref .tags{margin-top:24px;display:flex;gap:8px;flex-wrap:wrap}
.tag{font-family:var(--f-sur);font-weight:500;font-size:var(--t-xs);letter-spacing:.09em;line-height:1;text-transform:uppercase;color:var(--ardoise);border:1px solid var(--bord-fort);padding:8px 14px}
.secteurs{margin-top:48px;padding-top:28px;border-top:1px solid var(--bord);font-size:var(--t-sm);color:var(--ardoise);max-width:none}

/* ---------- Contact ---------- */
.contact{display:grid;grid-template-columns:minmax(230px,296px) 1fr;gap:clamp(40px,6vw,80px)}
.coord{font-size:var(--t-base)}
.coord dt{font-family:var(--f-sur);font-weight:600;font-size:var(--t-xs);letter-spacing:.14em;line-height:1.4;text-transform:uppercase;color:var(--ardoise);margin-top:26px}
.coord dt:first-of-type{margin-top:0}
.coord dd{color:var(--nuit);line-height:1.5;margin-top:6px}
.coord dd a{text-decoration:none;border-bottom:1px solid var(--bord-or);padding-bottom:2px;transition:border-color var(--t)}
.coord dd a:hover{border-color:var(--or-profond);color:var(--or-profond)}
.coord .note{font-size:var(--t-sm);line-height:var(--lh-serre);color:var(--ardoise);margin-top:16px;max-width:38ch}
form{display:grid;gap:22px}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:22px}
label{font-family:var(--f-sur);font-weight:600;font-size:var(--t-xs);letter-spacing:.14em;line-height:1.4;text-transform:uppercase;color:var(--ardoise);display:block;margin-bottom:9px}
label .opt{font-weight:500;letter-spacing:.08em;text-transform:none;color:var(--acier)}
input,select,textarea{width:100%;font-family:var(--f-corps);font-size:var(--t-base);line-height:1.5;padding:15px 17px;border:1px solid var(--bord-fort);background:var(--blanc);color:var(--nuit);transition:border-color var(--t)}
input:hover,select:hover,textarea:hover{border-color:var(--acier)}
.mention{font-size:var(--t-sm);line-height:var(--lh-serre);color:var(--ardoise);margin-top:12px;max-width:none}

/* ---------- Pied ---------- */
footer{background:var(--nuit-profonde);color:var(--sur-nuit-attenue);padding:60px 0;font-size:var(--t-sm);line-height:1.65}
footer .wrap{display:flex;justify-content:space-between;align-items:flex-start;gap:32px;flex-wrap:wrap}
footer a{color:var(--blanc);text-decoration:none;border-bottom:1px solid var(--sous-blanc)}
footer a:hover{border-color:var(--or)}
/* ── Le logo du pied : fluide, cadré par un conteneur ───────────────────────
   Demandé par Rudy le 18/08/2026. Plutôt qu'une taille fixe en pixels, la
   largeur est un pourcentage plafonné : le logo occupe la place disponible sur
   mobile et se cadre sur grand écran.

   ⚠️ `height:auto` + `viewBox` : c'est le viewBox qui porte le rapport
      858.67 / 220 ≈ 3,9. On ne fixe QUE la largeur — fixer les deux
      déformerait le logo dès que le conteneur change.

   ⛔ Les attributs `width`/`height` du SVG ne sont PAS retirés : ils donnent une
      taille de repli si la CSS ne charge pas. Le 17/08, le site a été servi sans
      feuille de style pendant une heure — un logo sans dimensions y aurait pris
      toute la page. */
/* 🔴 LE LOGO NE SE COMPRIME PAS — c'est le bloc de droite qui passe à la ligne.
      Trois tentatives ont été mesurées avant celle-ci, et les deux premières
      produisaient le même défaut à des largeurs différentes :

        flex:1 1 260px              →  262 px à 768, soit PLUS PETIT qu'à 375
        flex:1 1 320px, max 520px   →  499 px à 1024, creux de 21 px
        flex:1 1 320px, max 500px   →  381 px à 900, creux de 119 px

      ⛔ Un élément « responsive » qui RÉTRÉCIT quand l'écran GRANDIT est un
         défaut, pas une adaptation. Et il se déplaçait à chaque correction :
         tant que le logo participait au partage de l'espace, il existait
         toujours une largeur où il perdait.

      ✅ `flex:0 0 auto` le sort du partage. Sa largeur ne dépend plus que de la
         sienne : `min(100%, 500px)`. Quand les deux blocs ne tiennent plus côte
         à côte, `flex-wrap` fait descendre le bloc de droite — ce qui est
         exactement ce qu'on veut voir arriver.

      ⚠️ Mesuré sur ONZE largeurs, de 320 à 1920 px. Raisonner sur trois points
         de rupture ne suffisait pas : les trois creux étaient tous entre deux
         valeurs contrôlées. */
footer .pied-marque{flex:0 0 auto;width:min(100%,500px)}
footer .pied-logo{display:block;width:100%}
footer .pied-logo svg{display:block;width:100%;height:auto}

/* ⚠️ Le bloc de droite descend un peu — demandé par Rudy le 18/08/2026. Avec
   `align-items:flex-start`, il s'alignait sur le haut d'un logo qui fait
   désormais 76 px : la ligne d'identité paraissait collée au bord. */
footer .infos{margin-top:22px;max-width:46ch}
footer .legal{display:flex;gap:26px;flex-wrap:wrap;margin-top:18px;font-family:var(--f-sur);font-weight:600;font-size:var(--t-xs);letter-spacing:.12em;text-transform:uppercase}
footer .legal a{color:var(--or);border-bottom-color:transparent}
footer .legal a:hover{border-bottom-color:var(--or)}
/* WCAG 2.2 — SC 2.5.8 « Target Size (Minimum) », niveau AA : 24 × 24 px CSS.
   Les liens du pied et des coordonnées tombaient à 19-21 px de haut. */
footer a,.coord dd a,.mention a,.rep a,.secteurs a,main p a,.axe a,
.carte .lien,.maillage a,.fil a,form label a{display:inline-block;min-height:24px;padding-block:2px}
/* Case de consentement RGPD — WCAG 2.2 SC 2.5.8 : 24 × 24 px minimum */
input[type=checkbox]{width:24px;height:24px;min-height:24px;accent-color:var(--or-profond);cursor:pointer}

@media(max-width:900px){
  .liens{display:none}.burger{display:block}
  .liens.ouvert{display:flex;position:absolute;top:84px;left:0;right:0;flex-direction:column;align-items:flex-start;gap:0;background:var(--blanc);border-bottom:1px solid var(--bord);padding:8px clamp(24px,5vw,48px) 22px}
  .liens.ouvert a{padding:15px 0;width:100%;border-bottom:1px solid var(--bord)}
  .contact,.ref,.parcours .bloc{grid-template-columns:1fr}
  .duo{grid-template-columns:1fr}
  .carte h3{min-height:0}
  .portrait{max-width:224px}
  .hero .filet-bas{gap:18px;flex-direction:column}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}


/* =========================================================================
   GABARIT DES PAGES CATÉGORIE — ajouté le 2026-08-09 d'après AUD-CLI-034
   ========================================================================= */

/* Fil d'Ariane */
.fil{font-family:var(--f-sur);font-weight:500;font-size:var(--t-xs);letter-spacing:.12em;text-transform:uppercase;color:var(--sur-nuit-attenue);margin-bottom:26px}
.fil a{text-decoration:none;border-bottom:1px solid transparent;padding-bottom:2px;display:inline-block;min-height:24px}
.fil a:hover{border-color:var(--or)}
.fil span[aria-current]{color:var(--or)}

.hero.page{padding:clamp(72px,8vw,104px) 0}
.hero.page h1{max-width:26ch;font-size:clamp(1.95rem,3.6vw,2.75rem)}
.hero.page .accroche{font-size:clamp(1.2rem,1.9vw,1.5rem)}

/* Grille des axes */
.regard{display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:1px;background:var(--bord);border:1px solid var(--bord);margin-top:8px}
/* AUD-CLI-034 P1 — la dernière rangée incomplète laissait une case vide.
   Le dernier bloc occupe l'espace restant.
   ⚠️ AUD-CLI-037 — ces règles DOIVENT être bornées par une requête média :
   sans borne, `span 2` et `span 3` forcent 2 ou 3 colonnes en mobile alors que
   `auto-fit` n'en produit qu'une → débordement horizontal jusqu'à 624 px
   constaté sur 7 pages. Le correctif d'un défaut de bureau en avait créé un pire. */
@media(min-width:900px){
  .regard>.axe:last-child:nth-child(3n+1){grid-column:span 3}
  .regard>.axe:last-child:nth-child(3n+2){grid-column:span 2}
}
@media(min-width:600px) and (max-width:899px){
  .regard>.axe:last-child:nth-child(2n+1){grid-column:span 2}
}
.axe{background:var(--blanc);padding:32px 28px}
.axe .num{font-family:var(--f-titre);font-size:var(--t-base);color:var(--or-profond);font-variant-numeric:lining-nums;letter-spacing:.08em}
.axe h3{font-size:var(--t-md);margin:14px 0 12px}
.axe p{font-size:var(--t-sm);line-height:var(--lh-serre);color:var(--ardoise);max-width:none}
.axe .q{margin-top:16px;font-style:italic;color:var(--nuit);font-size:var(--t-sm);line-height:var(--lh-serre);max-width:none}

/* Ce que ce n'est pas */
.negatif{margin-top:8px;display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:clamp(32px,4vw,48px)}
.negatif>div{padding-top:24px;border-top:1px solid var(--bord-or-faible)}
.negatif h3{font-size:var(--t-md);color:var(--or);margin-bottom:14px}
.negatif p{color:var(--sur-nuit);font-size:var(--t-sm);line-height:var(--lh-serre);max-width:none}

/* AUD-CLI-034 P2 — relance à mi-page : 5 693 px séparaient deux appels à l'action */
.relance{margin-top:clamp(48px,5vw,64px);padding:30px 34px;background:var(--brume);border-left:2px solid var(--or);display:flex;justify-content:space-between;align-items:center;gap:28px;flex-wrap:wrap}
.relance p{margin:0;font-size:var(--t-md);color:var(--nuit);max-width:46ch}
.sect.brume .relance{background:var(--blanc)}

/* AUD-CLI-034 P3 — maillage vers les catégories sœurs, absent du gabarit */
.maillage{display:grid;grid-template-columns:repeat(auto-fit,minmax(232px,1fr));gap:1px;background:var(--bord);border:1px solid var(--bord);margin-top:8px}
.maillage a{background:var(--blanc);padding:26px 24px;text-decoration:none;display:flex;flex-direction:column;gap:10px;transition:background var(--t)}
.maillage a:hover{background:var(--brume)}
.maillage .cat-lien{font-family:var(--f-sur);font-weight:600;font-size:var(--t-xs);letter-spacing:.13em;text-transform:uppercase;color:var(--or-profond)}
.maillage .pb{font-family:var(--f-titre);font-size:var(--t-base);line-height:var(--lh-titre);color:var(--nuit)}

/* FAQ */
.faq{border-top:1px solid var(--bord)}
.faq details{border-bottom:1px solid var(--bord)}
.faq summary{list-style:none;cursor:pointer;padding:26px 0;font-family:var(--f-titre);font-size:var(--t-md);line-height:var(--lh-titre);color:var(--nuit);display:flex;justify-content:space-between;gap:24px;align-items:baseline;min-height:24px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--f-sur);color:var(--or-profond);font-size:var(--t-md);flex-shrink:0}
.faq details[open] summary::after{content:"\2013"}
.faq summary:hover{color:var(--or-profond)}
.faq .rep{padding:0 0 28px;max-width:var(--mesure);color:var(--ardoise)}
.faq .rep p+p{margin-top:14px}

.rappel{background:var(--brume);border-left:2px solid var(--or);padding:26px 30px;margin-top:44px;max-width:var(--mesure-large)}
.sect.brume .rappel{background:var(--blanc)}
.rappel p{margin:0;font-size:var(--t-base);color:var(--ardoise);max-width:none}
.rappel strong{font-weight:500;color:var(--nuit)}

.final h2{color:var(--blanc);max-width:22ch}
.final p{color:var(--sur-nuit);font-size:var(--t-md);margin-top:20px;max-width:56ch}
.final .cta{margin-top:40px;display:flex;gap:16px;flex-wrap:wrap}

@media(max-width:900px){.relance{flex-direction:column;align-items:flex-start}}

/* ── Issue du formulaire — accusé et refus ────────────────────────────────
   🔴 AJOUTÉ le 14/08/2026 (CTR-AUD-WEB-002 §G). Le lot du formulaire avait
   produit ~400 lignes de PHP et ZÉRO ligne de CSS : `.issue ok` et `.issue ko`
   ne produisaient aucune différence visuelle. Le visiteur qui avait oublié le
   nom de son entreprise voyait un paragraphe de corps de texte, typographique-
   ment identique à celui d'un succès, au-dessus d'un formulaire encore rempli.

   ⛔ AUCUNE COULEUR NOUVELLE — CLAUDE.md §8 règle 3 et le contrôle automatique
   de la palette. Le succès prend l'or profond (seul accent admis sur fond
   clair), le refus prend l'ardoise en trait épais. La distinction ne repose
   donc PAS sur la couleur seule : elle passe aussi par le trait et le poids,
   ce qui la rend lisible en cas de daltonisme. */
.issue{
  font-family:var(--f-corps); font-size:var(--t-base); line-height:var(--lh-serre);
  color:var(--ardoise); background:var(--brume);
  margin:0 0 1.5rem; padding:1rem 1.15rem; max-width:none;
  border-left:3px solid var(--bord-fort);
}
.issue.ok{ border-left-color:var(--or-profond); font-weight:500; }
.issue.ko{ border-left-width:5px; border-left-color:var(--ardoise); }
.issue-detail{
  font-family:var(--f-corps); font-size:var(--t-sm); line-height:var(--lh-serre);
  color:var(--acier); margin:-1rem 0 1.5rem; padding:0 1.15rem; max-width:none;
}
/* Le focus posé par l'ancre #reponse doit se voir — sans lui, le déplacement
   du point de lecture est silencieux pour qui navigue au clavier. */
.issue:focus{ outline:2px solid var(--or-profond); outline-offset:3px; }


/* ── Encart LinkedIn ────────────────────────────────────────────────────────
   Ajouté le 18/08/2026. Emprunte l'idiome de LinkedIn — bandeau, photo ronde,
   bouton en pilule, angles arrondis — pour être RECONNU comme tel. Ce sont les
   premiers angles arrondis du site, et c'est délibéré : le bloc doit se lire
   comme un objet étranger, sinon il ne remplit pas sa fonction.
   ⚠️ #0A66C2 est la SEULE couleur hors charte du site. Confinée au bouton et au
      logo, c'est-à-dire à ce qui mène à LinkedIn. Voir front-page.php. */
.li-carte{max-width:420px;border:1px solid var(--bord);border-radius:10px;
  overflow:hidden;background:var(--blanc);box-shadow:0 1px 3px rgba(10,15,40,.07)}
/* ── AU REPOS LA CHARTE, AU SURVOL LINKEDIN — 26/08/2026, demande de Rudy ─────
   Le bandeau et le bouton parlent la langue du site tant qu'on ne les touche
   pas ; l'identité LinkedIn n'apparaît qu'à l'interaction.
   ⛔ PAS DE TON SOMBRE POUR LE BANDEAU AU REPOS. Le dégradé Bleu Nuit d'origine
      était exactement le fond du hero et la carte n'avait plus de coiffe —
      défaut mesuré le 18/08. On passe donc par des TRANSPARENCES D'ARDOISE, que
      la charte admet comme tons dérivés : pâles sur le blanc de la carte, mais
      franchement visibles contre le navy du hero.
   ⚠️ CE QUE ÇA CHANGE POUR L'ENTORSE : au repos, la carte n'utilise plus AUCUNE
      couleur hors charte. `#0A66C2` ne vit plus que dans l'état de survol. */
.li-couv{height:68px;transition:background var(--t);
  background:linear-gradient(135deg,rgba(58,64,96,.10) 0%,rgba(58,64,96,.24) 100%)}
/* Carte centrée — demande de Rudy, 18/08. La photo passe de `0 0 24px` à des
   marges automatiques, et `text-align:center` sur le corps emporte le nom et la
   ligne de fonction. Le bouton l'était déjà par ses propres marges auto : les
   deux mécanismes se superposent sans se contredire, on garde le sien pour que
   le bouton reste centré même si le corps repassait à gauche. */
.li-photo{display:block;width:84px;height:84px;border-radius:50%;object-fit:cover;
  border:3px solid var(--blanc);margin:-46px auto 0}
.li-corps{padding:10px 20px 20px;text-align:center}
.li-nom{font-family:var(--f-titre);font-size:1.14rem;line-height:1.25;margin:0 0 2px;color:var(--nuit)}
/* Rapetissée de .9 à .8rem le 18/08, demande de Rudy : à 360 px de carte, elle
   tenait sur deux lignes et pesait autant que le nom. Elle tient sur une. */
.li-titre{font-size:.8rem;line-height:1.45;color:var(--acier);margin:0 0 18px}
/* `flex` + `width:fit-content` + marges auto, et pas `text-align:center` sur le
   corps : le nom et la ligne de titre restent calés à gauche, sous la photo qui
   l'est aussi. Seul le bouton est centré — c'est ce qui a été demandé. */
/* ⚠️ LA BORDURE EXISTE DANS LES DEUX ÉTATS, seule sa couleur change. Ne la
   poser qu'au repos ferait sauter le bouton de 2 px au survol. */
.li-btn{display:flex;width:fit-content;margin-inline:auto;align-items:center;gap:9px;
  background:transparent;color:var(--nuit);text-decoration:none;
  border:1px solid var(--bord-fort);
  padding:8px 18px;border-radius:999px;font-weight:600;font-size:.9rem;
  transition:background var(--t),color var(--t),border-color var(--t)}
.li-btn svg{flex:none}
/* Le survol de la CARTE ENTIÈRE, pas seulement du bouton : c'est l'objet qui
   se révèle, pas une commande qui s'allume. `focus-within` fait la même chose
   au clavier — sans lui, un visiteur qui tabule n'aurait jamais l'indice. */
.li-carte:hover .li-couv,.li-carte:focus-within .li-couv{
  background:linear-gradient(135deg,#0A66C2 0%,#004182 100%)}
.li-carte:hover .li-btn,.li-carte:focus-within .li-btn{
  background:#0A66C2;border-color:#0A66C2;color:var(--blanc)}
.li-btn:hover,.li-btn:focus-visible{background:#004182;border-color:#004182;color:var(--blanc)}
@media(max-width:520px){
  .li-carte{max-width:100%}
  .li-photo{width:76px;height:76px;margin:-42px auto 0}
  .li-corps{padding:10px 18px 20px}
}

/* ── LE HERO EN DEUX COLONNES — 18/08/2026 ───────────────────────────────────
   🔴 Renverse le point F de `planche-references.md`, arbitré le 09/08 : « pas
      de photo dans le hero ». Rouvert et tranché par Rudy le 18/08. CHANGELOG.
   ⚠️ `hero-duo` et pas `duo` : `.duo` existe déjà ligne 290, autre grille.
   La colonne de texte fait 744 px à 1280 : le `max-width:31ch` du H1 (888 px)
   ne mord plus, c'est la colonne qui commande le retour à la ligne. Rien à
   surcharger — une règle en moins est une règle qui ne peut pas diverger. */
@media(min-width:901px){
  .hero-duo{display:grid;grid-template-columns:minmax(0,1fr) 320px;
    gap:clamp(32px,4vw,64px);align-items:center}
  .hero-txt{min-width:0}
  /* Le filet des mentions reste hors de la grille : il reprend toute la
     largeur, et c'est lui qui rattache la carte au reste du hero. */
}
@media(max-width:900px){
  /* Empilé : le texte porte le message, la carte le prolonge. Marge du haut
     égale à celle qui sépare déjà les appels du filet. */
  .hero-duo .li-carte{margin-top:48px}

}

/* La carte posée sur le Bleu Nuit — variante, pas duplication.
   ⚠️ RESSERRÉE DE 360 À 320 px LE 18/08, demande de Rudy : « réduis la largeur,
      équilibre l'ensemble ». La largeur seule ne suffisait pas — une carte plus
      étroite au contenu inchangé devient plus HAUTE en proportion, et pèse
      davantage. Le bandeau (76→68), la photo (96→84), les marges intérieures,
      le nom et le bouton ont suivi dans le même rapport : 320 × 237 au lieu de
      360 × 262. La colonne de texte gagne 40 px, le H1 respire d'autant. */
.li-hero{width:100%;max-width:320px;border:none;
  box-shadow:0 20px 48px rgba(6,9,26,.5)}
/* Le bandeau bleu LinkedIn — demandé par Rudy le 18/08, en remplacement de l'or.
   ⛔ IL N'Y A PLUS DE RÈGLE `.li-hero .li-couv`. L'or était une VARIANTE, née du
      seul problème que le bandeau Bleu Nuit d'origine disparaissait sur le hero.
      Le bleu LinkedIn ne pose pas ce problème : il tient sur fond clair comme
      sur fond nuit. La variante n'a donc plus d'objet, et une règle qui n'a plus
      d'objet ne se garde pas « au cas où » — elle diverge en silence. Le bandeau
      est défini UNE fois, plus haut, avec le reste de la carte.
   ⚠️ CE QUE ÇA ÉLARGIT, ET IL FAUT LE DIRE. L'entorse `#0A66C2` était bornée au
      bouton et au logo — « le seul endroit qui MÈNE à LinkedIn ». Le bandeau la
      porte maintenant sur ~100 × 360 px du hero. Les deux valeurs restent les
      deux bleus de LinkedIn, aucune troisième teinte n'entre. Arbitré par Rudy,
      qui se laisse par ailleurs la réflexion sur son inscription à la charte. */

/* ── LES PLAFONDS DE LA CARTE EMPILÉE — APRÈS `.li-hero`, ET C'EST LA RAISON ──
   🔴 CES DEUX RÈGLES ONT D'ABORD ÉTÉ ÉCRITES PLUS HAUT, DANS LES BLOCS `@media`
      qui les concernent. Elles n'ont RIEN FAIT. Mesuré : carte figée à 320 px
      dans un écran de 390, calée à gauche, un vide à droite.
   ⛔ UNE MEDIA QUERY N'AJOUTE AUCUNE SPÉCIFICITÉ. `.li-hero` dans un `@media`
      et `.li-hero` en clair pèsent pareil (0,1,0) : c'est le DERNIER ÉCRIT qui
      gagne, et `.li-hero{max-width:320px}` était écrit après. Le piège est
      qu'on lit une media query comme « plus précise » alors qu'elle ne l'est
      pas — elle est seulement conditionnelle.
   Elles sont donc ici, en fin de fichier, après la règle qu'elles corrigent. */
@media(max-width:900px){
  /* Empilée, la carte n'a plus de colonne à servir : elle reprend sa largeur. */
  .li-hero{max-width:360px}
}
@media(max-width:520px){
  .li-hero{max-width:100%}
}