/* Site refondu de Telvika (brief v0.3 de David, direction Cartographie choisie le 03/10/2026).
   Feuille commune à toutes les pages produites par outils/generer_site.py. Les pages experts-comptables gardent leur propre style.
   Le processus comme matière visuelle : base presque noire bleutée, sections claires chaudes, un seul accent lumineux (bleu
   signal) réservé aux nœuds IA, aux chiffres clés et aux appels à l'action. Grille de 12 colonnes sur 1 280 px.
   Chaque section choisit sa palette par une classe (.s-sombre, .s-clair, .s-papier) ; les composants lisent --t1, --t2, --tr
   et --acc, et marchent donc sur les deux fonds. Rien n'est caché par cette feuille en attendant un script, sauf le titre du
   hero pendant au plus 1,8 seconde (classe posée et retirée par la page elle-même). */

:root{
  --noir:#07080C; --noir-2:#0E1017; --noir-3:#141722; --trait-s:rgba(225,230,255,.10); --trait-s2:rgba(225,230,255,.18);
  --texte-s:#F1F2F6; --texte-s2:#9DA3B1; --gris-s:#646A7A;
  --clair:#F3F1EC; --clair-2:#E9E5DD; --papier:#F8F6F2; --encre:#0C0E14; --encre-2:#545964; --trait-c:rgba(12,14,20,.12);
  --accent:#5C7CFF; --accent-vif:#93A8FF; --accent-btn:#4766F5; --accent-btn-survol:#3D5BE8; --accent-encre:#3550D6; --halo:rgba(92,124,255,.38);
  --alerte:#E5484D;
  --titre:'Inter Tight','Inter Tight repli',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --serif:'Instrument Serif','Instrument Serif repli',Georgia,'Times New Roman',serif;
  --mono:'JetBrains Mono',ui-monospace,Menlo,Consolas,monospace;
  --large:1280px; --gout:clamp(16px,4vw,48px); --entete:72px;
  --s-pad:clamp(5rem,11vw,9rem);
  --ease:cubic-bezier(.2,.7,.2,1);
  color-scheme:dark;
}
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.28s}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--entete) + 16px)}
body{margin:0;background:var(--noir);color:var(--texte-s);font:400 1.125rem/1.6 var(--titre);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
[hidden]{display:none!important}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
svg{display:block}
img{max-width:100%;display:block}
button{font:inherit}
em.s{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.01em;padding-right:.04em}
.grille{max-width:var(--large);margin-inline:auto;padding-inline:var(--gout)}
.vis{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.evitement{position:absolute;left:var(--gout);top:-100px;z-index:100;background:var(--accent-btn);color:#FFFFFF;padding:.7rem 1rem;border-radius:8px;font-weight:600}
.evitement:focus{top:12px}
:focus-visible{outline:2px solid var(--accent-vif);outline-offset:3px;border-radius:6px}
.s-clair :focus-visible,.s-papier :focus-visible{outline-color:var(--accent-encre)}
.ph{font-family:var(--mono);font-size:.72rem;font-weight:400;letter-spacing:.02em;border:1px dashed currentColor;border-radius:4px;padding:.15rem .4rem;display:inline-block;line-height:1.4;font-style:normal}
.mono{font-family:var(--mono);letter-spacing:0}
.num{font-variant-numeric:tabular-nums}

/* Palettes de section */
.s-sombre{--fond:var(--noir);--t1:var(--texte-s);--t2:var(--texte-s2);--tr:var(--trait-s);--tr2:var(--trait-s2);--acc:var(--accent-vif);--carte:var(--noir-2);background:var(--fond);color:var(--t1)}
.s-clair{--fond:var(--clair);--t1:var(--encre);--t2:var(--encre-2);--tr:var(--trait-c);--tr2:rgba(12,14,20,.2);--acc:var(--accent-encre);--carte:var(--papier);background:var(--fond);color:var(--t1);color-scheme:light}
.s-papier{--fond:var(--papier);--t1:var(--encre);--t2:var(--encre-2);--tr:var(--trait-c);--tr2:rgba(12,14,20,.2);--acc:var(--accent-encre);--carte:#FFFFFF;background:var(--fond);color:var(--t1);color-scheme:light}
.s{position:relative;padding-block:var(--s-pad)}
.s-tete{display:grid;gap:1.25rem;align-items:end;margin-bottom:clamp(2.5rem,6vw,4.5rem)}
@media (min-width:1024px){.s-tete.cote{grid-template-columns:repeat(12,minmax(0,1fr))}.s-tete.cote>.t{grid-column:1/8}.s-tete.cote>.d{grid-column:9/13}}
/* Rubrique d'une section : son nom, suivi d'un filet pointillé qui court jusqu'au bord de la colonne, comme les couloirs
   de la cartographie du hero (David, 03/10 : sous-titres « trop typiques de l'IA », plus de point devant, mis en avant
   autrement) */
.surtitre{display:flex;align-items:center;gap:1rem;font:600 1rem/1.3 var(--titre);letter-spacing:-.005em;color:var(--acc)}
.surtitre::after{content:"";flex:1;min-width:2.5rem;height:1px;background-image:linear-gradient(90deg,var(--tr2) 2px,transparent 2px);background-size:8px 1px;background-repeat:repeat-x}
/* Largeurs des titres en em et non en ch (03/10) : le ch dépend de la police chargée (0,63 em en 600 et 0,60 em en 500
   pour Inter Tight, 0,51 em pour son repli), donc un titre changeait de nombre de lignes au chargement de la police.
   Conversion exacte des anciennes valeurs : la mise en page avec Inter Tight est inchangée. */
.t2{font:600 clamp(2.3rem,5.4vw,5rem)/1 var(--titre);letter-spacing:-.045em;text-wrap:balance;max-width:11.34em}
.t2 em.s,.t1 em.s{color:var(--acc)}
.surtitre+.t2{margin-top:1.4rem}
.chapeau{color:var(--t2);font-size:clamp(1.05rem,1.4vw,1.2rem);line-height:1.6;max-width:36rem}
.t3{font:600 clamp(1.45rem,2.4vw,2rem)/1.1 var(--titre);letter-spacing:-.03em}
.texte{color:var(--t2);max-width:34rem}
.texte p+p{margin-top:1rem}

/* Boutons et liens */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;font:600 1rem/1 var(--titre);padding:1rem 1.4rem;border-radius:999px;border:1px solid transparent;cursor:pointer;white-space:nowrap;transition:transform .3s var(--ease),background-color .25s,border-color .25s,box-shadow .3s}
.btn .fl{display:inline-block;transition:transform .3s var(--ease)}
.btn:hover{transform:translateY(-2px)}
.btn:hover .fl{transform:translateX(4px)}
.btn-p{background:var(--accent-btn);color:#FFFFFF}
.btn-p:hover{background:var(--accent-btn-survol);box-shadow:0 10px 30px -8px var(--halo)}
.btn-s{border-color:var(--tr2,var(--trait-s2));color:var(--t1,var(--texte-s))}
.btn-s:hover{border-color:var(--t2,var(--texte-s2))}
.actions{display:flex;flex-wrap:wrap;gap:.75rem}
.lien{display:inline-flex;align-items:center;gap:.5rem;font-weight:600;color:var(--acc);border-bottom:1px solid currentColor;padding-bottom:.15rem}
.lien .fl{transition:transform .3s var(--ease)}
.lien:hover .fl{transform:translateX(4px)}
.liens{display:flex;flex-wrap:wrap;gap:1rem 2rem}
.puce{display:inline-flex;align-items:center;gap:.4rem;font:500 .72rem/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;padding:.45rem .65rem;border-radius:999px;border:1px solid var(--tr2);color:var(--t2)}
.puce.acc{border-color:transparent;background:var(--accent-btn);color:#FFFFFF}

/* En-tête : transparent sur le hero, flouté au défilement */
.entete{position:fixed;left:0;right:0;top:env(safe-area-inset-top,0px);z-index:50;border-bottom:1px solid transparent;transition:background-color .35s,border-color .35s,-webkit-backdrop-filter .35s,backdrop-filter .35s;color:var(--texte-s)}
.entete.colle,.entete.ouvert{background:rgba(7,8,12,.76);-webkit-backdrop-filter:blur(16px) saturate(150%);backdrop-filter:blur(16px) saturate(150%);border-bottom-color:var(--trait-s)}
.entete-in{display:flex;align-items:center;gap:1.5rem;height:var(--entete)}
.logo{display:inline-flex;align-items:center;margin-right:auto;line-height:0;color:inherit}.logo svg{height:1rem;width:auto;display:block}
.nav{display:none}
.nav>ul{display:flex;gap:.15rem;align-items:center}
.nav-b{background:none;border:0;color:var(--texte-s);font:500 .95rem/1 var(--titre);padding:.7rem .85rem;border-radius:999px;cursor:pointer;display:inline-flex;align-items:center;gap:.45rem;transition:background-color .2s}
.nav-b:hover,.nav-b[aria-expanded="true"],.nav-b[aria-current="page"]{background:rgba(255,255,255,.07)}
.nav-b .ch{width:.42rem;height:.42rem;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .25s}
.nav-b[aria-expanded="true"] .ch{transform:translateY(1px) rotate(225deg)}
.entete .btn{padding:.75rem 1.1rem;font-size:.92rem}
.entete-cta{display:none}
.burger,.burger-sansjs{background:none;border:1px solid var(--trait-s2);color:var(--texte-s);border-radius:999px;padding:.6rem .95rem;font:600 .88rem/1 var(--titre);cursor:pointer}
@media (min-width:1100px){.nav{display:block}.entete-cta{display:inline-flex}.burger{display:none}.menu-m{display:none}}
/* Sans script : les menus déroulants s'ouvrent au survol et au focus, et le bouton Menu mène au plan du site du pied de page */
.burger-sansjs{display:none}
html:not(.js) .burger{display:none}
@media (max-width:1099.98px){html:not(.js) .burger-sansjs{display:inline-flex}}
html:not(.js) .nav li:is(:hover,:focus-within)>.mega[hidden]{display:block!important}
.mega{position:absolute;left:0;right:0;top:100%;background:#0A0B10;border-bottom:1px solid var(--trait-s);padding-block:2rem 2.4rem;box-shadow:0 30px 60px -20px rgba(0,0,0,.7)}
.mega-in{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:2.5rem}
.mega-liste{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.2rem 1.25rem;align-content:start}
.mega-e{display:grid;grid-template-columns:44px minmax(0,1fr);gap:.95rem;align-items:start;padding:.8rem;border-radius:14px;transition:background-color .2s}
.mega-e:hover{background:rgba(255,255,255,.05)}
.mega-e:hover .ic{color:var(--accent-vif);border-color:rgba(147,168,255,.4)}
.ic{width:44px;height:44px;border-radius:12px;border:1px solid var(--trait-s);display:grid;place-items:center;color:var(--texte-s2);transition:color .2s,border-color .2s;flex:none}
.ic svg{width:30px;height:30px}
.ic-a{fill:var(--accent);stroke:var(--accent-vif)}
.s-clair .ic,.s-papier .ic{border-color:var(--trait-c);color:var(--encre-2)}
.mega-e b{display:block;font-weight:600;font-size:1rem}
.mega-e .d{display:block;color:var(--texte-s2);font-size:.86rem;line-height:1.45;margin-top:.2rem}
.mega-avant{border-radius:18px;padding:1.3rem;border:1px solid var(--trait-s);background:radial-gradient(120% 90% at 100% 0%,rgba(92,124,255,.28),transparent 60%),var(--noir-3);display:flex;flex-direction:column;gap:.7rem;color:var(--texte-s)}
.mega-avant .k{font:500 .7rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--accent-vif)}
.mega-avant b{font-size:1.15rem;line-height:1.25;font-weight:600;letter-spacing:-.01em}
.mega-avant b .duree{font-size:1.75rem;letter-spacing:-.03em;line-height:1.1}
.mega-avant p{color:var(--texte-s2);font-size:.88rem;line-height:1.5}
.mega-avant .lien{margin-top:auto;font-size:.92rem;width:max-content;color:var(--accent-vif)}
.menu-m{position:fixed;inset:0;z-index:49;background:var(--noir);padding:calc(var(--entete) + 1rem) var(--gout) 7rem;overflow:auto}
.menu-m details{border-bottom:1px solid var(--trait-s)}
.menu-m summary{list-style:none;cursor:pointer;padding:1.1rem 0;font:600 1.4rem/1.2 var(--titre);letter-spacing:-.02em;display:flex;justify-content:space-between;align-items:center}
.menu-m summary::-webkit-details-marker{display:none}
.menu-m summary::after{content:"+";font-weight:400;color:var(--texte-s2)}
.menu-m details[open] summary::after{content:"\2212"}
.menu-m .mega-e{padding:.6rem 0}
.menu-m>a{display:block;padding:1.1rem 0;font:600 1.4rem/1.2 var(--titre);border-bottom:1px solid var(--trait-s)}
.menu-m>a.btn{display:flex;margin-top:1.75rem;padding:1rem 1.4rem;font:600 1rem/1 var(--titre);border-bottom:0}

/* Hero de l'accueil : texte à gauche, cartographie du processus à droite */
.hero{position:relative;min-height:100svh;padding-top:calc(var(--entete) + clamp(2rem,6vh,4.5rem));padding-bottom:clamp(2rem,5vh,3.5rem);overflow:hidden;background:radial-gradient(900px 600px at 78% 42%,rgba(92,124,255,.16),transparent 62%),var(--noir)}
.hero-in{position:relative;display:grid;gap:2rem}
.hero-txt{position:relative;z-index:3}
.t1{font:600 clamp(2.85rem,6.3vw,6.4rem)/.98 var(--titre);letter-spacing:-.048em;max-width:7.245em;text-wrap:balance}
.accroche{font:500 clamp(1.3rem,2.3vw,1.9rem)/1.25 var(--titre);letter-spacing:-.018em;margin-top:1.4rem;max-width:15.6em}
.sous{font-size:clamp(1.05rem,1.3vw,1.15rem);line-height:1.6;color:var(--t2);margin-top:1rem;max-width:34rem}
.hero .actions{margin-top:2rem}
/* Entrée du hero en CSS, dès le premier affichage : elle n'attend ni les scripts ni les polices, donc ne retarde pas le
   LCP (relecture du 03/10 : 3,35 s sur mobile limité quand GSAP la jouait). Les mots du h1 sont découpés à la génération. */
.t1 .w{display:inline-block}
.t1 .wg{white-space:nowrap}
@keyframes entree-mot{from{opacity:0;transform:translateY(.45em)}}
@keyframes entree{from{opacity:0;transform:translateY(18px)}}
.anime :is(.hero,.hero-page,.introuvable) .t1 .w{animation:entree-mot .8s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(var(--i) * 45ms + 60ms)}
.anime :where(.hero .accroche,.hero .sous,.hero .actions,.hero-page .fil,.hero-page .chapeau,.hero-page .actions,.hero-page .resultat-tete .cas-chiffre,.introuvable .actions){animation:entree .8s cubic-bezier(.22,1,.36,1) both;animation-delay:.3s}
.anime :is(.hero .sous,.hero-page .chapeau){animation-delay:.38s}
.anime :is(.hero-page .actions){animation-delay:.46s}
.anime .hero .actions{animation-delay:.54s}
.anime .hero .preuve{animation:entree .8s cubic-bezier(.22,1,.36,1) 1s both}
.carto{position:relative;z-index:1;margin-inline:calc(var(--gout) * -.5)}
.carto svg{width:100%;height:auto;overflow:visible}
.preuve{position:relative;z-index:4;width:min(340px,100%);padding:1.1rem 1.2rem 1.15rem;border-radius:18px;background:rgba(16,18,26,.8);border:1px solid var(--trait-s2);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 24px 70px -10px rgba(0,0,0,.6)}
.preuve .k{font:500 .68rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--texte-s2)}
.chiffres{display:flex;align-items:baseline;gap:.6rem;font:600 2.6rem/1 var(--titre);letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.preuve .chiffres{margin-top:.7rem}
.chiffres .a{color:var(--accent-vif);text-shadow:0 0 24px var(--halo)}
.preuve p{font-size:.86rem;color:var(--texte-s2);line-height:1.45;margin-top:.5rem}
.preuve .ph{margin-top:.75rem;color:var(--texte-s2)}
@media (min-width:1200px){
  .hero-in{grid-template-columns:repeat(12,minmax(0,1fr));align-items:center;min-height:calc(100svh - var(--entete) - 8rem)}
  .hero-txt{grid-column:1/7}
  .carto{position:absolute;top:46%;left:50%;width:calc(50% - var(--gout));transform:translateY(-50%);margin:0}
  .preuve{position:absolute;left:50%;bottom:0}
}
.couloir text{font:500 11px var(--mono);letter-spacing:.12em;fill:#868C9C}
.couloir line{stroke:var(--trait-s);stroke-dasharray:2 6}
.liaison{fill:none;stroke:var(--gris-s);stroke-width:1.4}
.etape rect{fill:var(--noir-2);stroke:var(--trait-s2);stroke-width:1.2;transition:stroke .5s,fill .5s}
.etape text{font:500 13px var(--titre);fill:var(--texte-s2);text-anchor:middle;dominant-baseline:central}
.etape .ia-l{fill:var(--accent-vif)}
.etape .t-acc{fill:var(--accent-vif);font:500 13px var(--titre);text-anchor:middle;dominant-baseline:central}
.etape:has(.ia-l) .l{opacity:0}
.anime .etape .ia-l{opacity:0}
.anime .etape:has(.ia-l) .l{opacity:1}
.etape.auto rect{stroke:rgba(147,168,255,.6);fill:#10142A}
.jeton{fill:var(--gris-s);transition:fill .6s}
.augmente .jeton{fill:var(--accent-vif)}
.augmente .liaison{stroke:rgba(147,168,255,.45)}
.anime .ia{opacity:0}
.ia .halo{fill:var(--accent);opacity:.28}
.ia .coeur{fill:var(--noir);stroke:var(--accent-vif);stroke-width:2}
.ia .point{fill:var(--accent-vif)}
.ia text{font:500 11px var(--mono);letter-spacing:.06em;fill:var(--accent-vif)}
.etat-carte{font:500 11px var(--mono);letter-spacing:.12em;fill:var(--texte-s2)}

/* Le constat : deux phrases en très grand, un seul écran */
.constat{min-height:92svh;display:flex;align-items:center}
.constat>.grille,.appel>.grille,.introuvable>.grille{width:100%}
.constat .grande{font:600 clamp(2.6rem,7.4vw,7.2rem)/.98 var(--titre);letter-spacing:-.05em;max-width:8.82em;text-wrap:balance}
.constat .grande+.grande{margin-top:.4em;color:var(--t2)}
.constat .grande em.s{color:var(--acc)}
.constat .suite{margin-top:clamp(2rem,5vw,3.5rem);display:grid;gap:1.1rem;font-size:clamp(1.05rem,1.5vw,1.25rem);color:var(--t1);max-width:46rem}

/* Notre posture : grand énoncé, schéma collant à gauche, trois temps à droite */
.manif{font:600 clamp(2.4rem,6.2vw,5.8rem)/1 var(--titre);letter-spacing:-.045em;max-width:9.45em;text-wrap:balance}
.manif em.s{color:var(--acc)}
.posture-corps{display:block;margin-top:clamp(3rem,8vw,6rem)}
.posture-visu{position:sticky;top:calc(var(--entete) + 10px);z-index:2;height:44svh;min-height:280px;background:var(--fond);padding-bottom:.75rem}
.cadre{position:relative;height:100%;border-radius:24px;border:1px solid var(--tr);background-color:var(--noir-2);background-image:radial-gradient(rgba(225,230,255,.09) 1px,transparent 1px);background-size:22px 22px;overflow:hidden}
.cadre svg{position:absolute;inset:2.5rem 1rem 1rem;width:calc(100% - 2rem);height:calc(100% - 3.5rem)}
.cadre-lab{position:absolute;left:1.2rem;top:1.1rem;font:500 .72rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--t2)}
.cadre-lab b{color:var(--acc);font-weight:500}
.temps li{min-height:58svh;display:flex;flex-direction:column;justify-content:center;gap:.9rem;padding-block:2rem;border-top:1px solid var(--tr)}
.temps li:last-child{border-bottom:1px solid var(--tr)}
.temps .n{font:500 .78rem/1 var(--mono);letter-spacing:.08em;color:var(--acc)}
.temps h3{font:600 clamp(1.7rem,3.1vw,2.7rem)/1.06 var(--titre);letter-spacing:-.035em;max-width:10.08em}
.temps p{color:var(--t2);max-width:31rem}
.anime .temps li h3{color:var(--t2);transition:color .4s}
.anime .temps li.actif h3{color:var(--t1)}
.anime .temps li .n{opacity:.8;transition:opacity .4s}
.anime .temps li.actif .n{opacity:1}
.s-fin{margin-top:clamp(2.5rem,6vw,4rem)}
@media (min-width:1024px){
  .posture-corps{display:grid;grid-template-columns:repeat(12,minmax(0,1fr))}
  .posture-visu{grid-column:1/7;align-self:start;top:calc(var(--entete) + 3rem);height:calc(100svh - var(--entete) - 6rem);max-height:640px}
  .temps{grid-column:8/13}
  .temps li{min-height:72svh}
}
.p-noeud{fill:var(--noir-2);stroke:var(--texte-s2);stroke-width:1.5}
.p-trait{fill:none;stroke:var(--texte-s2);stroke-width:1.3;opacity:.5}
.p-accent{fill:none;stroke:var(--accent-vif);stroke-width:2}
.p-plein{fill:var(--accent-vif)}
.p-txt{font:500 12px var(--mono);letter-spacing:.04em;fill:var(--texte-s2)}
.p-txt.fort{fill:var(--texte-s);font:600 22px var(--titre);letter-spacing:-.02em}
.p-coche{fill:none;stroke:var(--accent-vif);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.p-groupe{opacity:0}
.p-groupe.vu{opacity:1}

/* Par où commencer : trois grandes cartes selon la situation du visiteur */
.situations{display:grid;gap:14px}
@media (min-width:900px){.situations{grid-template-columns:repeat(3,minmax(0,1fr))}}
.situation{position:relative;display:flex;flex-direction:column;min-width:0;border-radius:24px;background:var(--carte);border:1px solid var(--tr);overflow:hidden;transition:border-color .35s,transform .35s var(--ease),box-shadow .35s}
.situation:hover{border-color:var(--accent-encre);transform:translateY(-4px);box-shadow:0 30px 60px -36px rgba(53,80,214,.45)}
.situation .vignette{height:170px;border-bottom:1px solid var(--tr);background-color:#EEEBE4;background-image:radial-gradient(rgba(12,14,20,.10) 1px,transparent 1px);background-size:18px 18px}
.situation .vignette svg{width:100%;height:100%}
.situation .corps{padding:1.5rem 1.5rem 1.6rem;display:flex;flex-direction:column;gap:.8rem;flex:1}
.situation .quand{font:600 clamp(1.35rem,2vw,1.65rem)/1.15 var(--titre);letter-spacing:-.025em}
.situation .offre{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-top:auto;padding-top:1rem;border-top:1px solid var(--tr);font-weight:600;color:var(--acc)}
.situation .offre .fl{transition:transform .3s var(--ease)}
.situation:hover .offre .fl{transform:translateX(5px)}
.situation p{color:var(--t2);font-size:1rem}
.formation-ligne{margin-top:2rem;display:flex;flex-wrap:wrap;gap:.75rem 1.5rem;align-items:center;color:var(--t2)}
.v-trait{fill:none;stroke:rgba(12,14,20,.45);stroke-width:1.4}
.v-noeud{fill:var(--papier);stroke:rgba(12,14,20,.55);stroke-width:1.4}
.v-acc{fill:none;stroke:var(--accent-encre);stroke-width:2}
.v-plein{fill:var(--accent-encre)}
.v-txt{font:500 9px var(--mono);letter-spacing:.06em;fill:var(--encre-2)}

/* Démonstration : agent de reporting sur données fictives */
.demo{border-radius:24px;border:1px solid var(--tr2);background:var(--noir-2);overflow:hidden;box-shadow:0 40px 90px -40px rgba(92,124,255,.35)}
.demo-barre{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center;justify-content:space-between;padding:.85rem 1.1rem;border-bottom:1px solid var(--trait-s);background:var(--noir-3)}
.demo-tag{display:flex;align-items:center;gap:.55rem;font:500 .74rem/1.3 var(--mono);color:var(--texte-s2)}
.demo-grille{display:grid}
@media (min-width:1100px){.demo-grille{grid-template-columns:minmax(0,1.1fr) minmax(0,.8fr) minmax(0,1.1fr)}.demo-col+.demo-col{border-left:1px solid var(--trait-s)}}
.demo-col{padding:1.25rem 1.15rem;min-width:0;display:grid;gap:1rem;align-content:start}
.demo-col+.demo-col{border-top:1px solid var(--trait-s)}
@media (min-width:1100px){.demo-col+.demo-col{border-top:0}}
.demo-h{font:500 .72rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--texte-s2);display:flex;justify-content:space-between;gap:.5rem;flex-wrap:wrap}
.tbl-wrap{overflow-x:auto;border:1px solid var(--trait-s);border-radius:12px;background:var(--noir)}
.tbl{border-collapse:collapse;width:100%;font:400 .76rem/1.35 var(--mono);color:var(--texte-s)}
.tbl th,.tbl td{padding:.5rem .55rem;text-align:left;border-bottom:1px solid var(--trait-s);white-space:nowrap}
.tbl th{font-weight:500;color:var(--texte-s2);font-size:.66rem;text-transform:uppercase;letter-spacing:.06em}
.tbl tr:last-child td{border-bottom:0}
.tbl .num{text-align:right}
.tbl td.lib{white-space:normal;min-width:8.5rem}
@media (max-width:520px){.tbl th,.tbl td{padding:.45rem .35rem}.tbl{font-size:.68rem}.tbl td.lib{min-width:6.5rem}}
.tbl .cpt{display:block;color:var(--texte-s2);font-size:.92em}
.tbl tr.vise td{background:rgba(92,124,255,.16)}
.tbl tr.vise td:first-child{box-shadow:inset 3px 0 0 var(--accent)}
.drapeau{display:inline-block;margin-left:.35rem;font:600 .68rem/1.2 var(--titre);color:#FFFFFF;background:#C62F35;padding:.12rem .35rem;border-radius:3px;vertical-align:middle}
.tbl tr:not(.signale) .drapeau{display:none}
.demo-plus{font:400 .72rem var(--mono);color:var(--texte-s2)}
.journal{display:grid;gap:.65rem;font-size:.9rem;color:var(--texte-s)}
.journal li{display:grid;grid-template-columns:1.1rem 1fr;gap:.6rem;align-items:start;transition:opacity .25s}
.journal li::before{content:"";width:.8rem;height:.8rem;margin-top:.32rem;border-radius:50%;border:2px solid var(--trait-s2)}
.journal li.fait::before{background:var(--accent);border-color:var(--accent);box-shadow:0 0 8px var(--accent)}
.journal li.attente{opacity:.55}
.journal li.cours::before{border-color:var(--accent-vif);border-top-color:transparent;animation:tourne .8s linear infinite}
@keyframes tourne{to{transform:rotate(360deg)}}
.statut{font:600 .68rem/1.2 var(--titre);color:#FFFFFF;background:var(--accent-btn);border-radius:999px;padding:.3rem .6rem;text-transform:none;letter-spacing:0}
.kpis{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--trait-s);border:1px solid var(--trait-s);border-radius:12px;overflow:hidden}
.kpi{background:var(--noir);padding:.85rem .9rem;display:grid;gap:.2rem;min-width:0}
.kpi .l{font-size:.74rem;color:var(--texte-s2)}
.kpi .v{font:500 1.35rem/1.1 var(--mono);font-variant-numeric:tabular-nums}
.kpi .d{font-size:.74rem;color:var(--texte-s2)}
.kpi .d.bas{color:#FF8A8D}
.analyse{font-size:.95rem;line-height:1.65;color:var(--texte-s)}
.src{font:inherit;font-weight:600;color:inherit;background:none;border:0;padding:0 .05em;border-bottom:2px solid var(--accent);cursor:pointer}
.src[aria-pressed="true"]{background:var(--accent-btn);color:#FFFFFF}
.prov{font-size:.84rem;color:var(--texte-s2);border-left:2px solid var(--accent);padding:.55rem .8rem;background:rgba(92,124,255,.07);border-radius:0 8px 8px 0;min-height:3.4rem}
.prov b{color:var(--texte-s)}
.demo-sortie .kpis,.demo-sortie .analyse,.demo-sortie .prov{transition:opacity .5s,filter .5s}
.demo-sortie.vide .kpis,.demo-sortie.vide .analyse,.demo-sortie.vide .prov{opacity:.12;filter:blur(1.5px);transition:none}
.demo-fin{margin-top:1.75rem;display:flex;flex-wrap:wrap;gap:1rem 2rem;align-items:center;color:var(--t2)}

/* Nos expertises : grille bento de cartes sombres */
.bento{display:grid;gap:14px}
@media (min-width:760px){.bento{grid-template-columns:repeat(6,minmax(0,1fr))}.b-a,.b-b,.b-e{grid-column:span 6}.b-c,.b-d{grid-column:span 3}}
@media (min-width:1100px){.bento{grid-template-columns:repeat(12,minmax(0,1fr))}.b-a{grid-column:span 7}.b-b{grid-column:span 5}.b-c,.b-d,.b-e{grid-column:span 4}}
.carte{position:relative;display:flex;flex-direction:column;min-width:0;border-radius:22px;background:var(--noir-2);border:1px solid var(--trait-s);overflow:hidden;color:var(--texte-s)}
.carte.pret{transition:border-color .35s,transform .35s var(--ease),box-shadow .35s}
.carte:hover{border-color:rgba(147,168,255,.42);transform:translateY(-4px);box-shadow:0 30px 60px -30px rgba(92,124,255,.35)}
.visu{position:relative;height:250px;border-bottom:1px solid var(--trait-s);background-image:linear-gradient(var(--trait-s) 1px,transparent 1px),linear-gradient(90deg,var(--trait-s) 1px,transparent 1px);background-size:28px 28px;background-position:-1px -1px;overflow:hidden}
.b-a .visu,.b-b .visu{height:300px}
.carte .txt{padding:1.35rem 1.5rem 1.5rem;display:grid;gap:.45rem}
.carte h3{font:600 1.55rem/1.1 var(--titre);letter-spacing:-.03em;display:flex;justify-content:space-between;align-items:center;gap:1rem}
.carte h3 .fl{color:var(--accent-vif);opacity:0;transform:translateX(-10px);transition:opacity .3s,transform .3s}
.carte:hover h3 .fl,.carte:focus-visible h3 .fl{opacity:1;transform:none}
.carte p{color:var(--texte-s2);font-size:1rem;line-height:1.5}
.ui{position:absolute;inset:26px 26px auto 26px;border-radius:14px;border:1px solid var(--trait-s2);background:rgba(7,8,12,.88);padding:.9rem 1rem;font-size:.85rem;color:var(--texte-s)}
.ui-barre{display:flex;align-items:center;gap:.5rem;font:500 .7rem/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--texte-s2);padding-bottom:.7rem;border-bottom:1px solid var(--trait-s);margin-bottom:.8rem}
.ui-barre i{width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 10px var(--accent)}
.bulle{margin-left:auto;width:max-content;max-width:85%;background:rgba(255,255,255,.06);border:1px solid var(--trait-s);border-radius:12px 12px 4px 12px;padding:.55rem .75rem;font-size:.84rem;line-height:1.4}
.pas{display:grid;gap:.4rem;margin-top:.8rem;font:400 .76rem/1.3 var(--mono);color:var(--texte-s2)}
.pas li{display:flex;gap:.55rem;align-items:center}
.pas b{color:var(--accent-vif);font-weight:500}
.resultat{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.6rem;margin-top:.85rem;padding:.6rem .7rem;border:1px solid rgba(147,168,255,.35);border-radius:10px;background:rgba(92,124,255,.08);font:400 .74rem/1.2 var(--mono)}
.pill{font:600 .68rem/1 var(--titre);padding:.35rem .55rem;border-radius:999px;background:var(--accent-btn);color:#FFFFFF;white-space:nowrap}
.pill.gris{background:rgba(255,255,255,.12);color:var(--texte-s2)}
.regl{display:grid;gap:.15rem}
.regl li{display:flex;justify-content:space-between;align-items:center;padding:.5rem 0;border-bottom:1px solid var(--trait-s);font-size:.84rem}
.regl li:last-child{border-bottom:0}
.tg{position:relative;width:30px;height:17px;border-radius:999px;background:rgba(255,255,255,.12);flex:none;transition:background-color .3s}
.tg::after{content:"";position:absolute;top:2px;left:2px;width:13px;height:13px;border-radius:50%;background:#C9CEDA;transition:transform .3s var(--ease),background-color .3s}
.tg.on{background:var(--accent-btn)}
.tg.on::after{transform:translateX(13px);background:#FFFFFF}
.visu svg.mini{position:absolute;inset:0;width:100%;height:100%}
.m-boite{fill:rgba(7,8,12,.9);stroke:var(--trait-s2);stroke-width:1}
.m-txt{font:500 11px var(--mono);fill:var(--texte-s2);text-anchor:middle;dominant-baseline:central}
.m-trait{fill:none;stroke:var(--trait-s2);stroke-width:1.3}
.m-ia .coeur{fill:var(--noir);stroke:var(--accent-vif);stroke-width:1.8}
.m-ia .halo{fill:var(--accent);opacity:.3}
.m-jeton{fill:var(--accent-vif)}
.m-barre{fill:rgba(147,168,255,.22);stroke:rgba(147,168,255,.6);stroke-width:1}
.m-barre.fort{fill:var(--accent);stroke:var(--accent-vif)}
.m-etiq{font:500 10px var(--mono);fill:var(--texte-s2);letter-spacing:.06em}
.form{display:grid;gap:.55rem}
.champ{display:grid;grid-template-columns:7.5rem 1fr;gap:.6rem;align-items:center;font:400 .72rem/1.2 var(--mono);color:var(--texte-s2)}
.champ .v{height:22px;border-radius:6px;border:1px solid var(--trait-s);background:rgba(255,255,255,.03);display:flex;align-items:center;padding-inline:.5rem;color:var(--texte-s);overflow:hidden;white-space:nowrap}
.statut-l{display:flex;justify-content:space-between;align-items:center;margin-top:.4rem;font:400 .72rem var(--mono);color:var(--texte-s2)}

/* Par fonction : cinq entrées, rail horizontal sur téléphone, cinq colonnes sur grand écran */
.rail{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding-top:6px;margin-top:-6px;padding-bottom:.5rem;scroll-padding-inline:var(--gout);margin-inline:calc(var(--gout) * -1);padding-inline:var(--gout);scrollbar-width:thin}
.rail>*{scroll-snap-align:start;flex:0 0 min(78vw,300px)}
@media (min-width:1100px){.rail{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));overflow:visible;margin-inline:0;padding-inline:0}.rail>*{flex:none}}
.fonction{display:flex;flex-direction:column;gap:1rem;min-height:300px;padding:1.4rem 1.3rem;border-radius:22px;border:1px solid var(--tr);background:var(--carte);transition:border-color .35s,transform .35s var(--ease),background-color .35s}
.fonction:hover{border-color:rgba(147,168,255,.45);transform:translateY(-4px);background:var(--noir-3)}
.fonction h3{font:600 1.3rem/1.15 var(--titre);letter-spacing:-.02em}
.fonction .douleur{color:var(--t2);font-size:.98rem;line-height:1.5}
.fonction .voir{margin-top:auto;display:flex;align-items:center;justify-content:space-between;font-weight:600;font-size:.92rem;color:var(--acc);padding-top:.9rem;border-top:1px solid var(--tr)}
.fonction .voir .fl{transition:transform .3s var(--ease)}
.fonction:hover .voir .fl{transform:translateX(5px)}
.fonction:hover .ic{color:var(--accent-vif);border-color:rgba(147,168,255,.4)}

/* Notre approche : le mouvement en A qui se dessine au défilement */
.approche-in{display:grid;gap:clamp(2.5rem,5vw,4rem);align-items:center}
@media (min-width:1024px){.approche-in{grid-template-columns:repeat(12,minmax(0,1fr))}.approche-in .a-visu{grid-column:1/8}.approche-in .a-txt{grid-column:8/13}}
.a-visu svg{width:100%;height:auto;overflow:visible}
.a-sol{stroke:var(--trait-c);stroke-width:2}
.a-jambe{fill:none;stroke:var(--encre);stroke-width:3;stroke-linejoin:round}
.a-barre{stroke:var(--accent-encre);stroke-width:3;stroke-dasharray:8 7}
.a-noeud{fill:var(--clair);stroke:var(--encre);stroke-width:2.5}
.a-noeud.acc{stroke:var(--accent-encre)}
.a-n{fill:var(--encre);font:600 17px var(--titre);text-anchor:middle;dominant-baseline:central}
.a-lab{fill:var(--encre);font:600 19px var(--titre);letter-spacing:-.01em}
.a-lab2{fill:var(--encre-2);font:400 15px var(--titre)}
.a-point{fill:var(--accent-encre)}
.a-etapes{display:grid;gap:1.1rem;counter-reset:a}
.a-etapes li{counter-increment:a;display:grid;grid-template-columns:2.4rem 1fr;gap:.15rem 1rem}
.a-etapes li::before{content:counter(a);grid-row:span 2;width:2.1rem;height:2.1rem;border:2px solid currentColor;border-radius:50%;display:grid;place-items:center;font-weight:600;font-size:.92rem}
.a-etapes b{font-weight:600;font-size:1.1rem;letter-spacing:-.01em}
.a-etapes span{color:var(--t2);font-size:1rem}
.signature-grande{margin-top:clamp(3rem,7vw,5.5rem);padding-top:clamp(2rem,5vw,3.5rem);border-top:1px solid var(--tr);display:grid;gap:1.5rem;align-items:end}
@media (min-width:1024px){.signature-grande{grid-template-columns:repeat(12,minmax(0,1fr))}.signature-grande .d{grid-column:9/13}}
.signature-grande .d{display:grid;gap:1.1rem;color:var(--t2)}
@media (min-width:1024px){.signature-grande.sans-citation .d{grid-column:1/9}}  /* plus de citation depuis le 14/10 (David) : le texte prend la place */

/* Cas clients : un chiffre plein écran, puis la carte du cas (accueil : côte à côte sur grand écran, un seul cas publié) */
.cas-chiffre{display:flex;flex-direction:column;align-items:flex-start;gap:1.2rem}
.cas-chiffre .chiffres{font-size:clamp(4.5rem,15vw,13rem);letter-spacing:-.06em;line-height:.9;gap:.18em}
.cas-chiffre .unite{font:500 clamp(1.15rem,2vw,1.6rem)/1.3 var(--titre);letter-spacing:-.015em;max-width:18em}
/* « 48 heures → 3 minutes » en grand (David, 15/10) : l'avant, la flèche, l'après ; chaque durée d'un seul tenant, retour à la
   ligne après la flèche sur un écran étroit */
.duree{display:flex;flex-wrap:wrap;align-items:baseline;gap:.06em .3em}
.duree>span{white-space:nowrap}
.duree .fleche{opacity:.5;font-weight:400;margin-right:.15em}   /* collée à « 3 minutes » : jamais seule sur sa ligne, et « → 3 minutes » en seconde ligne (relecture du 15/10) */
.cas-chiffre .chiffres.duree{font-size:clamp(2.6rem,6.4vw,6rem);letter-spacing:-.05em;line-height:1}
.preuve .chiffres.duree{font-size:1.8rem}
.cas-i .nb.duree{font-size:clamp(2.1rem,3.8vw,3rem)}
.cas-grille .cas-chiffre .chiffres.duree{font-size:clamp(2.6rem,5.2vw,4.8rem)}
.cas-i .nb.duree .avant,.resultats .grand-c.duree .avant{color:var(--t1)}
.resultats .grand-c.duree{white-space:normal}
/* une phrase à lire d'un trait : pas de largeur de colonne (David, 15/10) */
.chapeau.une-ligne{max-width:none}
/* entre « société 1 » et « société 60 » du schéma du cas énergie */
.paysage .suite,.portrait .suite{font:400 18px var(--titre);fill:var(--texte-s2);text-anchor:middle;dominant-baseline:central}
.cas-grille{display:grid;gap:clamp(2.5rem,6vw,3.5rem);margin-top:1.6rem}
@media (min-width:1024px){.cas-grille{grid-template-columns:minmax(0,1fr) minmax(0,1.45fr);gap:3rem;align-items:center}}
.cas-carte{border-radius:24px;border:1px solid var(--tr2);background:var(--carte);padding:clamp(1.4rem,3vw,2.2rem);display:grid;gap:1.4rem;min-width:0;transition:border-color .35s}
.cas-carte:hover{border-color:rgba(147,168,255,.42)}
.cas-carte dl{display:grid;gap:1.1rem}
@media (min-width:700px){.cas-carte dl{grid-template-columns:1fr 1fr}.cas-carte dl .large{grid-column:1/-1}}
.cas-carte dt{font:500 .7rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--t2);margin-bottom:.45rem}
.cas-carte dd{color:var(--t1)}

/* Questions fréquentes : accordéons animés */
.faq-in{display:grid;gap:2rem}
@media (min-width:1024px){.faq-in{grid-template-columns:repeat(12,minmax(0,1fr))}.faq-in .t{grid-column:1/6}.faq-in .faq{grid-column:7/13}}
.faq{border-top:1px solid var(--tr)}
.faq details{border-bottom:1px solid var(--tr)}
.faq summary{list-style:none;cursor:pointer;padding:1.35rem 3rem 1.35rem 0;position:relative;font:600 clamp(1.12rem,1.8vw,1.35rem)/1.3 var(--titre);letter-spacing:-.015em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:.4rem;top:50%;width:.7rem;height:.7rem;border-right:2px solid var(--acc);border-bottom:2px solid var(--acc);transform:translateY(-70%) rotate(45deg);transition:transform .3s var(--ease)}
.faq details[open] summary::after{transform:translateY(-30%) rotate(225deg)}
.faq .rep{overflow:hidden}
.faq .rep>div{padding:0 0 1.5rem;color:var(--t2);max-width:40rem;display:grid;gap:.7rem}

/* Appel final, plein écran sombre */
.appel{min-height:88svh;display:flex;align-items:center;background:radial-gradient(800px 500px at 80% 100%,rgba(92,124,255,.18),transparent 65%),var(--noir)}
.appel-in{display:grid;gap:clamp(2.5rem,5vw,4rem)}
@media (min-width:1024px){.appel-in{grid-template-columns:repeat(12,minmax(0,1fr));align-items:end}.appel-in .t{grid-column:1/8}.appel-in .d{grid-column:8/13}}
.appel .t2{font-size:clamp(2.8rem,7.4vw,7rem);max-width:7.56em}
.deroule{display:grid;gap:1rem;counter-reset:d}
.deroule li{counter-increment:d;display:grid;grid-template-columns:2.2rem 1fr;gap:1rem;align-items:baseline;padding-bottom:1rem;border-bottom:1px solid var(--trait-s)}
.deroule li::before{content:"0" counter(d);font:500 .78rem/1 var(--mono);color:var(--accent-vif)}
.appel .actions{margin-top:2rem}
.courriel{margin-top:1.25rem;color:var(--texte-s2);font-size:.95rem}

/* Pied de page large */
.pied{background:var(--noir);border-top:1px solid var(--trait-s);padding-block:clamp(3rem,7vw,5rem) calc(2rem + env(safe-area-inset-bottom,0px));color:var(--texte-s2);font-size:.92rem}
.pied-haut{display:grid;gap:2.5rem}
@media (min-width:1200px){.pied-haut{grid-template-columns:minmax(17rem,3fr) minmax(0,9fr)}}  /* la marque garde 17rem : le logo complet ne descend pas sous 270 px (charte) */
.pied .logo{display:inline-flex;color:var(--texte-s);margin-bottom:1rem}
.pied-marque p{max-width:22rem}
.pied-marque .descripteur{margin:0;color:var(--texte-s);font-weight:500;letter-spacing:.01em}  /* descripteur sous le logo (David, 14/10) */
.pied .logo-complet svg{height:auto;width:17rem;max-width:100%}  /* logo v3, signature accolée (David, 22/10) */
.logo-entete svg{height:1.35rem;width:auto}  /* mot TELVIKA seul en en-tête (David, 23/10) : la signature du logo complet n'y dépassait pas 4 px de haut */
@media (min-width:1100px){.logo-entete svg{height:1.6rem}}
.pied-plan{display:grid;gap:2rem 1.5rem;grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:760px){.pied-plan{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:1200px){.pied-plan{grid-template-columns:repeat(5,minmax(0,1fr))}}
.pied h2{font:500 .7rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--texte-s);margin-bottom:1rem}
.pied ul{display:grid;gap:.55rem}
.pied a:hover{color:var(--texte-s)}
.pied-bas{margin-top:clamp(2.5rem,6vw,4rem);padding-top:1.5rem;border-top:1px solid var(--trait-s);display:flex;flex-wrap:wrap;gap:.75rem 1.75rem;justify-content:space-between}
.pied-bas .liens{gap:.75rem 1.75rem}

/* Gabarits : hero de page intérieure */
.hero-page{position:relative;padding-top:calc(var(--entete) + clamp(2.5rem,8vh,5rem));padding-bottom:clamp(3.5rem,8vw,6rem);overflow:hidden;background:radial-gradient(900px 560px at 85% 30%,rgba(92,124,255,.12),transparent 62%),var(--noir)}
.fil{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;font:500 .72rem/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--texte-s2);margin-bottom:1.6rem}
.fil a:hover{color:var(--texte-s)}
.fil span[aria-hidden]{opacity:.5}
.hero-page-in{display:grid;gap:clamp(2.5rem,5vw,3.5rem);align-items:center}
/* enfants directs seulement : la valeur d'un indicateur (span.v) ne doit pas prendre la colonne du visuel */
@media (min-width:1100px){.hero-page-in{grid-template-columns:repeat(12,minmax(0,1fr))}.hero-page-in>.t{grid-column:1/7}.hero-page-in>.v{grid-column:7/13}}
.hero-page .t1{font-size:clamp(2.6rem,5.6vw,5.6rem);max-width:8.19em}
.hero-page .chapeau{margin-top:1.4rem;color:var(--texte-s2)}
.hero-page .actions{margin-top:2rem}
.hero-page-in>.v{min-width:0}
.ecran{border-radius:20px;border:1px solid var(--trait-s2);background:var(--noir-2);box-shadow:0 40px 90px -40px rgba(92,124,255,.4);overflow:hidden}
.ecran-barre{display:flex;align-items:center;gap:.5rem;padding:.75rem 1rem;border-bottom:1px solid var(--trait-s);background:var(--noir-3);font:500 .7rem/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--texte-s2)}
.ecran-barre i{width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 10px var(--accent)}
.ecran-barre .ph,.ecran-barre .droite{margin-left:auto}
.ecran-corps{padding:1.1rem;display:grid;grid-template-columns:minmax(0,1fr);gap:.8rem}
.ecran svg{width:100%;height:auto}

/* Gabarits : énoncé du problème */
.enonce{font:600 clamp(1.8rem,3.8vw,3.4rem)/1.12 var(--titre);letter-spacing:-.035em;max-width:15.12em;text-wrap:balance}
.enonce em.s{color:var(--acc)}
.enonce-in{display:grid;gap:2rem}
@media (min-width:1024px){.enonce-in{grid-template-columns:repeat(12,minmax(0,1fr))}.enonce-in .t{grid-column:1/9}.enonce-in .d{grid-column:9/13;align-self:end}}

/* Gabarits : grille de cartes (axes, livrables, cas d'usage, tests) */
.cartes{display:grid;gap:14px}
@media (min-width:700px){.cartes{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1100px){.cartes.c3{grid-template-columns:repeat(3,minmax(0,1fr))}.cartes.c4{grid-template-columns:repeat(4,minmax(0,1fr))}}
.cartes .grand{grid-column:1/-1}
@media (min-width:1100px){.cartes.c3 .grand{grid-column:span 2;grid-row:span 2}}
/* carte qui complète une rangée incomplète : etendre-2 en grille de deux colonnes, etendre-3 en grille de trois */
@media (min-width:700px) and (max-width:1099.98px){.cartes .etendre-2{grid-column:1/-1}}
@media (min-width:1100px){.cartes.c3 .etendre-3{grid-column:span 2}}
.c{position:relative;display:flex;flex-direction:column;gap:.75rem;min-width:0;padding:1.5rem;border-radius:22px;border:1px solid var(--tr);background:var(--carte);transition:border-color .35s,transform .35s var(--ease)}
a.c:hover,.c.survol:hover{border-color:var(--acc);transform:translateY(-3px)}
.c h3{font:600 1.3rem/1.15 var(--titre);letter-spacing:-.02em}
.c p,.c li{color:var(--t2);font-size:1rem;line-height:1.55}
.c ul{display:grid;gap:.4rem}
.c ul li{position:relative;padding-left:1rem}
.c ul li::before{content:"";position:absolute;left:0;top:.65em;width:5px;height:5px;border-radius:50%;background:var(--acc)}
.c h3+.sous-t{margin-top:-.35rem;font:500 .95rem/1.35 var(--titre);letter-spacing:0;color:var(--t2)}
.c h3+.sous-t+p{font-size:.9rem}
.c h3:has(+.sous-t){font-size:1.5rem}
.c .k{font:500 .7rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--acc)}
.c .mini-v{height:120px;margin:-.25rem -.25rem .25rem;border-radius:14px;border:1px solid var(--tr);background-color:var(--fond);background-image:radial-gradient(var(--tr) 1px,transparent 1px);background-size:16px 16px;overflow:hidden}
.c .mini-v svg{width:100%;height:100%}
.c .bas{margin-top:auto;padding-top:.9rem;border-top:1px solid var(--tr);display:flex;justify-content:space-between;align-items:center;gap:.75rem;font-size:.9rem}
.c .tag{font:500 .7rem/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--acc)}
.c.grand h3{font-size:clamp(1.6rem,2.6vw,2.2rem)}
.c.grand .coeur{display:inline-flex;align-self:flex-start;font:500 .7rem/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;padding:.45rem .65rem;border-radius:999px;background:var(--accent-btn);color:#FFFFFF}

/* Gabarits : deux catégories de cas d'usage */
.deux-cat{display:grid;gap:14px;margin-top:clamp(2rem,4vw,3rem)}
@media (min-width:800px){.deux-cat{grid-template-columns:1fr 1fr}}
.cat{padding:1.4rem 1.5rem;border-radius:20px;border:1px solid var(--tr2);display:grid;gap:.5rem}
.cat .puce{justify-self:start}
.cat b{font-size:1.15rem;letter-spacing:-.01em}
.cat p{color:var(--t2);font-size:1rem}

/* Gabarits : frise animée du déroulé ou de la méthode */
.frise{position:relative}
.frise>ol{display:grid;gap:0;counter-reset:f}
.frise::before{content:"";position:absolute;left:1.05rem;top:.5rem;bottom:.5rem;width:2px;background:var(--tr)}
.frise-p{position:absolute;left:1.05rem;top:.5rem;width:2px;height:calc(100% - 1rem);background:var(--acc);transform-origin:50% 0;transform:scaleY(1)}
.frise li{counter-increment:f;position:relative;display:grid;grid-template-columns:2.2rem 1fr;gap:1.1rem;padding-bottom:1.75rem}
.frise li:last-child{padding-bottom:0}
.frise li{align-content:start}
.frise li::before{content:counter(f);position:relative;z-index:1;width:2.2rem;height:2.2rem;border-radius:50%;display:grid;place-items:center;background:var(--fond);border:2px solid var(--acc);color:var(--acc);font:600 .9rem/1 var(--titre);transition:background-color .4s,color .4s}
.frise li.allume::before{background:var(--acc);color:var(--fond)}
.frise h3{font:600 1.25rem/1.2 var(--titre);letter-spacing:-.02em;padding-top:.25rem}
.frise p{color:var(--t2);font-size:1rem;margin-top:.35rem;max-width:34rem}
.frise .produit{display:inline-block;margin-top:.6rem;font:500 .74rem/1.4 var(--mono);color:var(--t1);border:1px solid var(--tr2);border-radius:8px;padding:.35rem .55rem}
.frise .produit b{color:var(--acc);font-weight:500}
@media (min-width:1100px){
  .frise.horiz>ol{grid-template-columns:repeat(var(--n,5),minmax(0,1fr));gap:1.25rem}
  .frise.horiz::before{left:1.1rem;right:1.1rem;top:1.05rem;bottom:auto;width:auto;height:2px}
  .frise.horiz .frise-p{left:1.1rem;top:1.05rem;width:calc(100% - 2.2rem);height:2px;transform-origin:0 50%}
  .frise.horiz li{grid-template-columns:1fr;gap:1rem;padding-bottom:0}
  .frise.horiz h3{padding-top:0}
  /* cases « Produit : » sur une même ligne, quelle que soit la longueur du texte au-dessus (David, 22/10) : la colonne de
     chaque étape est un bloc flex, le texte prend la hauteur restante et la case est poussée en bas */
  .frise.horiz li>div{display:flex;flex-direction:column;height:100%}
  .frise.horiz .produit{margin-top:auto;align-self:flex-start}
  .frise.horiz li p{padding-bottom:.6rem}
}
/* Avec les sous-grilles, les cases commencent aussi à la même hauteur et ont la même hauteur : cercle, titre, texte, produit */
@supports (grid-template-rows:subgrid){
  @media (min-width:1100px){
    .frise.horiz>ol:has(.produit){grid-template-rows:auto auto 1fr auto}
    .frise.horiz li:has(.produit){grid-row:span 4;grid-template-rows:subgrid;gap:0}
    .frise.horiz li:has(.produit)>div{display:contents}
    .frise.horiz li:has(.produit)::before{margin-bottom:1rem}
    .frise.horiz li:has(.produit) p{padding-bottom:0}
    .frise.horiz li:has(.produit) .produit{margin-top:.8rem;align-self:stretch;display:block}
  }
}
.boucle{margin-top:clamp(2rem,4vw,3rem);display:flex;flex-wrap:wrap;gap:.75rem 1.5rem;align-items:center;padding:1rem 1.25rem;border-radius:16px;border:1px dashed var(--acc);color:var(--t1);font-weight:500}
.boucle .ic{width:36px;height:36px;border-radius:10px}

/* Gabarits : bloc conduite du changement, une seule fois par page */
.changement{display:grid;gap:1.5rem;padding:clamp(1.6rem,4vw,2.6rem);border-radius:26px;border:1px solid var(--tr2);background:radial-gradient(90% 120% at 100% 0%,rgba(92,124,255,.20),transparent 60%),var(--carte)}
@media (min-width:1024px){.changement{grid-template-columns:repeat(12,minmax(0,1fr));align-items:center}.changement .t{grid-column:1/6}.changement .d{grid-column:7/13}}
.changement .t3{max-width:10.08em}
.changement .d{color:var(--t2)}

/* Gabarits : questions et réponses en blocs (travail avec les équipes) */
.qr{display:grid;gap:14px}
@media (min-width:900px){.qr{grid-template-columns:1fr 1fr}}
.qr>div{padding:1.5rem;border-radius:22px;border:1px solid var(--tr);display:grid;gap:.6rem;align-content:start}
.qr .q{font:500 .72rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--acc)}
.qr p{color:var(--t2)}
.qr b{color:var(--t1);font-weight:600;font-size:1.15rem;letter-spacing:-.01em;line-height:1.3}

/* Démonstration de l'audit : portefeuille de cas d'usage */
.matrice-in{display:grid;gap:1rem}
@media (min-width:1000px){.matrice-in{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)}}
.matrice svg{width:100%;height:auto;overflow:visible}
.mx-axe{stroke:var(--trait-s2);stroke-width:1.2}
.mx-grille{stroke:var(--trait-s);stroke-width:1;stroke-dasharray:3 6}
.mx-lab{font:500 11px var(--mono);letter-spacing:.08em;fill:var(--texte-s2)}
.mx-zone{fill:rgba(92,124,255,.08);stroke:rgba(147,168,255,.3);stroke-dasharray:4 5}
.mx-b{cursor:pointer}
.mx-b circle,.mx-b rect{transition:transform .25s var(--ease),fill .25s,stroke .25s}
.mx-b .marche{fill:var(--noir);stroke:var(--accent-vif);stroke-width:2}
.mx-b .specifique{fill:var(--accent);stroke:var(--accent-vif);stroke-width:2}
.mx-b text{font:500 11px var(--titre);fill:var(--texte-s)}
.mx-b:hover circle,.mx-b:hover rect,.mx-b.choisi circle,.mx-b.choisi rect,.mx-b:focus-visible circle,.mx-b:focus-visible rect{stroke:#FFFFFF;stroke-width:3}
.mx-b:focus-visible{outline:none}
.fiche{display:grid;gap:.9rem;align-content:start;padding:1.25rem;border-radius:16px;border:1px solid var(--trait-s);background:var(--noir)}
.fiche h3{font:600 1.25rem/1.2 var(--titre);letter-spacing:-.02em}
.fiche dl{display:grid;grid-template-columns:auto 1fr;gap:.55rem 1rem;font-size:.9rem}
.fiche dt{font:500 .68rem/1.6 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--texte-s2)}
.fiche dd{color:var(--texte-s)}
.legende{display:flex;flex-wrap:wrap;gap:.75rem 1.25rem;font:500 .72rem/1 var(--mono);color:var(--texte-s2)}
.legende span{display:inline-flex;align-items:center;gap:.45rem}
.legende i{width:11px;height:11px;border-radius:50%;border:2px solid var(--accent-vif)}
.legende i.plein{background:var(--accent)}
.niveau{display:inline-flex;gap:3px;vertical-align:middle}
.niveau i{width:14px;height:6px;border-radius:2px;background:var(--trait-s2)}
.niveau i.on{background:var(--accent-vif)}

/* Gabarits : cas d'usage par fonction */
.usage-tag{display:inline-flex;align-items:center;gap:.4rem;font:500 .7rem/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--acc)}
.conseil{display:grid;gap:1.5rem;align-items:center;padding:clamp(1.6rem,4vw,2.6rem);border-radius:26px;border:1px solid var(--trait-s2);background:radial-gradient(90% 120% at 100% 0%,rgba(92,124,255,.24),transparent 60%),var(--noir-2);transition:border-color .35s,transform .35s var(--ease)}
.conseil:hover{border-color:rgba(147,168,255,.5);transform:translateY(-3px)}
@media (min-width:1024px){.conseil{grid-template-columns:repeat(12,minmax(0,1fr))}.conseil .t{grid-column:1/8}.conseil .d{grid-column:8/13}}
/* carte sombre posée dans une section claire : elle reprend toute la palette sombre */
.conseil{--t1:var(--texte-s);--t2:var(--texte-s2);--tr:var(--trait-s);--tr2:var(--trait-s2);--acc:var(--accent-vif);--fond:var(--noir);--carte:var(--noir-2);color:var(--t1)}
.conseil .d{color:var(--texte-s2)}

/* Gabarits : cas client */
.resultat-tete{display:grid;gap:1rem}
.citation{display:grid;gap:1.25rem;max-width:58rem}
.citation blockquote{font:400 clamp(1.9rem,4.4vw,3.6rem)/1.12 var(--serif);font-style:italic;letter-spacing:-.015em}
.citation.longue{max-width:52rem}
.citation.longue blockquote{display:grid;gap:1.1rem;font:400 clamp(1.2rem,2vw,1.4rem)/1.55 var(--titre);font-style:normal;letter-spacing:0;text-wrap:pretty}
.citation figcaption b{color:var(--t1);font-weight:600}
.citation figcaption{font:500 .74rem/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--t2)}
.resultats{display:grid;gap:14px}
@media (min-width:900px){.resultats{grid-template-columns:1fr 1fr}}
.resultats>div{padding:clamp(1.4rem,3vw,2rem);border-radius:24px;border:1px solid var(--tr);display:grid;gap:.8rem;align-content:start}
.resultats .grand-c{white-space:nowrap;font:600 clamp(2rem,9vw,4rem)/1 var(--titre);letter-spacing:-.05em;color:var(--acc);font-variant-numeric:tabular-nums}
.resultats p{color:var(--t2)}
.bandeau-ph{display:flex;flex-wrap:wrap;gap:.6rem 1rem;align-items:center;padding:.75rem 1rem;border-radius:12px;border:1px dashed var(--trait-s2);color:var(--texte-s2);font-size:.9rem;margin-bottom:1.75rem;width:fit-content}

/* Page introuvable */
.introuvable{min-height:90svh;display:flex;align-items:center;padding-top:var(--entete)}
.introuvable .t1{max-width:7.56em}
.introuvable p{margin-top:1.25rem;color:var(--texte-s2);max-width:30rem}
.introuvable p.surtitre{margin-top:0;color:var(--acc);max-width:none}

/* Bouton collant sur mobile, message de maquette */
.cta-m{position:fixed;left:var(--gout);right:var(--gout);bottom:calc(14px + env(safe-area-inset-bottom,0px));z-index:45;justify-content:center;transform:translateY(160%);transition:transform .4s var(--ease)}
.cta-m.vu{transform:none}
@media (min-width:1100px){.cta-m{display:none}}
.toast{position:fixed;left:50%;bottom:calc(84px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:60;background:#1B1E29;color:var(--texte-s);border:1px solid var(--trait-s2);border-radius:12px;padding:.75rem 1rem;font-size:.88rem;max-width:calc(100vw - 32px);box-shadow:0 12px 40px rgba(0,0,0,.5)}

/* Bandeau de consentement (consentement.js), aux couleurs du site refondu */
#bandeau-cookies{position:fixed;left:12px;right:12px;bottom:12px;z-index:60;background:var(--noir-3);border:1px solid var(--trait-s2);border-radius:16px;padding:16px 18px;color:var(--texte-s);box-shadow:0 20px 50px rgba(0,0,0,.55);font-size:14.5px;line-height:1.55;max-width:780px;margin:0 auto}
#bandeau-cookies a{text-decoration:underline;text-underline-offset:3px}
#bandeau-cookies .bc-titre{font-weight:600;margin-bottom:5px}
#bandeau-cookies .bc-choix{display:flex;flex-direction:column;gap:6px;margin-top:10px}
#bandeau-cookies .bc-choix[hidden]{display:none}
#bandeau-cookies .bc-choix label{display:flex;align-items:center;gap:8px}
#bandeau-cookies .bc-boutons{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
#bandeau-cookies button{font:inherit;font-weight:600;padding:9px 15px;border-radius:999px;border:1px solid var(--trait-s2);background:transparent;color:var(--texte-s);cursor:pointer}
#bandeau-cookies button.bc-ok{background:var(--accent-btn);color:#FFFFFF;border-color:var(--accent-btn)}

@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important;scroll-behavior:auto!important}
  @view-transition{navigation:none}
}
[aria-disabled="true"]{opacity:.6;cursor:progress}
/* Schémas en deux versions : paysage sur grand écran, portrait sur téléphone (textes lisibles, relecture du 03/10) */
svg.portrait{display:none}
@media (max-width:699.98px){svg.paysage{display:none}svg.portrait{display:block;width:100%;max-width:420px;margin-inline:auto}}
/* Matrice de l'audit sur téléphone : étiquettes du schéma masquées, liste de boutons dessous */
.mx-cible{fill:transparent;stroke:none!important}
.mx-liste{display:none;list-style:none;margin:1rem 0 0;padding:0;gap:.4rem}
.mx-liste button{width:100%;display:grid;grid-template-columns:14px minmax(0,1fr) auto;gap:.7rem;align-items:center;text-align:left;min-height:44px;padding:.55rem .8rem;border-radius:12px;border:1px solid var(--trait-s);background:var(--noir);color:var(--texte-s);font:500 .92rem/1.3 var(--titre);cursor:pointer}
.mx-liste button span{font:500 .72rem/1 var(--mono);letter-spacing:.06em;color:var(--texte-s2);text-transform:uppercase}
.mx-liste button[aria-pressed="true"]{border-color:var(--accent-vif);background:var(--noir-3)}
.mx-liste i{width:12px;height:12px;border-radius:50%;border:2px solid var(--accent-vif)}
.mx-liste i.specifique{background:var(--accent)}
@media (max-width:699.98px){.mx-liste{display:grid}.mx-b text{display:none}}
.sansjs{padding:1rem 1.1rem;color:var(--texte-s2);font-size:.95rem;border-bottom:1px solid var(--trait-s)}
/* Carte seule (expertise du cas client) : une colonne, largeur bornée */
@media (min-width:700px){.cartes.c1{grid-template-columns:minmax(0,1fr);max-width:640px}}
/* Sans script, la démonstration de l'accueil n'a pas de déroulé : pas de bouton qui ne ferait rien */
html:not(.js) #demo-lancer{display:none}
/* Téléphone : textes des schémas de l'audit agrandis (axes de la matrice, carte des processus) */
@media (max-width:699.98px){.mx-lab{font-size:18px}#carte-notee .couloir text{font-size:15px}#carte-notee .etape text{font-size:14px!important}}
.courriel-l{color:var(--acc);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.pied .courriel-l{color:var(--accent-vif)}
/* ===== Étape 4 (03/10) : composants des pages restantes ===== */
/* Liste d'état dans une interface fictive (suivi de projet, missions, cadre d'usage) */
.suivi{display:grid;font:400 .84rem/1.3 var(--titre);color:var(--texte-s)}
.suivi li{display:grid;grid-template-columns:.8rem minmax(0,1fr) auto;gap:.7rem;align-items:center;padding:.6rem .1rem;border-bottom:1px solid var(--trait-s)}
.suivi li:last-child{border-bottom:0}
.suivi .pt{width:.7rem;height:.7rem;border-radius:50%;border:2px solid var(--trait-s2)}
.suivi .fait .pt{background:var(--accent-vif);border-color:var(--accent-vif)}
.suivi .cours .pt{border-color:var(--accent-vif);box-shadow:0 0 0 3px rgba(92,124,255,.18)}
.suivi .st{font:500 .66rem/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--texte-s2);white-space:nowrap}
.suivi .fait .st,.suivi .cours .st{color:var(--accent-vif)}
.suivi .det{display:block;font-size:.74rem;color:var(--texte-s2);margin-top:.15rem}
.kpis.trois{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:480px){.kpis.trois .kpi{padding:.7rem .6rem}.kpis.trois .kpi .v{font-size:1.1rem}.kpis.trois .kpi .l,.kpis.trois .kpi .d{font-size:.68rem}}
.graphe{border:1px solid var(--trait-s);border-radius:12px;background:var(--noir);padding:.7rem .8rem .5rem}
.graphe .gt{display:flex;justify-content:space-between;font:500 .66rem/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--texte-s2);margin-bottom:.4rem}
.graphe svg{width:100%;height:auto;display:block}
.graphe .bar{fill:rgba(147,168,255,.28)}
.graphe .bar.acc{fill:var(--accent)}
.graphe .axe{stroke:var(--trait-s2)}
.graphe text{font:500 12px var(--mono);fill:var(--texte-s2)}
@media (min-width:700px){.cartes .etendre-tout{grid-column:1/-1}}
/* Phrase manifeste : ses mots s'allument au défilement (site.js) ; sans animation, elle est lue d'un bloc */
.manifeste{font:500 clamp(1.9rem,4.4vw,3.8rem)/1.14 var(--titre);letter-spacing:-.03em;max-width:15.6em;color:var(--t1)}
.manifeste em{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.01em}
/* Principes de la posture : texte et visuel, en alternance sur grand écran */
.principes{display:grid;gap:14px}
.principe{display:grid;gap:1.5rem;align-items:center;padding:clamp(1.3rem,3vw,2rem);border-radius:24px;border:1px solid var(--tr);background:var(--carte)}
@media (min-width:1024px){.principe{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:2.5rem}.principe:nth-child(even) .pv{order:2}}
.principe .pv{height:210px;border-radius:16px;border:1px solid var(--tr);background-color:var(--fond);background-image:radial-gradient(var(--tr) 1px,transparent 1px);background-size:18px 18px;overflow:hidden}
.principe .pv svg{width:100%;height:100%}
.principe .n{font:500 .78rem/1 var(--mono);color:var(--acc)}
.principe h3{font:600 clamp(1.45rem,2.4vw,1.9rem)/1.12 var(--titre);letter-spacing:-.025em;margin-top:.6rem}
.principe p{color:var(--t2);margin-top:.7rem;max-width:36rem}
.pv .v-trait{stroke:var(--t2);fill:none;stroke-width:1.4}
.pv .v-noeud{fill:var(--carte);stroke:var(--t2);stroke-width:1.4}
.pv .v-plein{fill:var(--acc)}
.pv .v-acc{stroke:var(--acc);fill:none;stroke-width:2}
.pv .v-txt{font:500 11px var(--mono);letter-spacing:.08em;fill:var(--t2)}
/* Équipe */
.personnes{display:grid;gap:14px}
@media (min-width:900px){.personnes{grid-template-columns:repeat(2,minmax(0,1fr))}}
.personne{border-radius:24px;border:1px solid var(--tr);background:var(--carte);overflow:hidden;display:flex;flex-direction:column}
.personne .photo{display:grid;place-items:center;padding:2rem 1.5rem .4rem}
.personne .txt{padding:1.5rem;display:grid;gap:.7rem}
.personne h3{font:600 1.6rem/1.1 var(--titre);letter-spacing:-.03em}
.personne .role{font:500 .74rem/1.3 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--acc)}
.personne p{color:var(--t2)}
/* Contact : agenda et formulaire */
.contact-in{display:grid;gap:clamp(1.5rem,3vw,2rem)}
@media (min-width:1100px){.contact-in{grid-template-columns:minmax(0,1.45fr) auto minmax(0,1fr);align-items:start}}
.agenda,.alt{border-radius:24px;border:1px solid var(--tr2);background:var(--carte);padding:clamp(1.3rem,3vw,2rem);display:grid;gap:1rem;min-width:0}
.agenda h2,.alt h2{font:600 clamp(1.4rem,2.4vw,1.8rem)/1.15 var(--titre);letter-spacing:-.025em}
.agenda p,.alt p{color:var(--t2)}
.agenda-zone{height:720px;border-radius:16px;overflow:hidden}
@media (max-width:699.98px){.agenda-zone{height:860px}}
.agenda.echec .agenda-zone,html:not(.js) .agenda-zone{display:none}
.agenda-zone iframe{display:block}
/* « ou » entre l'agenda et le formulaire : sur une ligne qui les sépare, verticale sur grand écran */
.contact-ou{display:flex;align-items:center;gap:1rem;margin:0;font:500 .95rem/1 var(--titre);color:var(--t2)}
.contact-ou::before,.contact-ou::after{content:"";flex:1;height:1px;background:var(--tr2)}
.contact-ou span{padding:.55rem .95rem;border:1px solid var(--tr2);border-radius:999px;background:var(--fond)}
@media (min-width:1100px){.contact-ou{flex-direction:column;align-self:stretch}.contact-ou::before,.contact-ou::after{width:1px;height:auto}}
.formulaire{display:grid;gap:1rem}
.fchamp{display:grid;gap:.4rem}
.fduo{display:grid;gap:1rem}
@media (min-width:520px){.fduo{grid-template-columns:1fr 1fr}}
.fchamp label{font:500 .92rem/1.3 var(--titre);color:var(--t1)}
.fchamp input,.fchamp select,.fchamp textarea{font:400 1rem/1.3 var(--titre);padding:.8rem .95rem;border-radius:12px;border:1px solid #767B86;background:#FFFFFF;color:var(--t1);width:100%}
.fchamp textarea{resize:vertical;min-height:6.5rem}
.fchamp .fac{font-weight:400;color:var(--t2)}
.fchamp [aria-invalid="true"]{border-color:var(--alerte);box-shadow:0 0 0 1px var(--alerte)}
.fchamp input:focus,.fchamp select:focus,.fchamp textarea:focus{outline:2px solid var(--acc);outline-offset:1px;border-color:transparent}
.form-msg{min-height:1.4em;font-size:.95rem;color:var(--t1)}
.form-note{font-size:.86rem;color:var(--t2)}
.form-note a{color:var(--acc);text-decoration:underline;text-underline-offset:3px}
.pot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
/* Index des cas clients */
.cas-index{display:grid;gap:14px}
@media (min-width:900px){.cas-index{grid-template-columns:repeat(3,minmax(0,1fr))}}
/* Schéma en boucle du tronc commun (projets sur mesure) */
.boucle-v{border-radius:24px;border:1px solid var(--trait-s2);background-color:var(--noir-2);background-image:radial-gradient(rgba(225,230,255,.08) 1px,transparent 1px);background-size:22px 22px;padding:clamp(1rem,2.5vw,2rem)}
.boucle-v svg{width:100%;height:auto}
.boucle-v .bande rect{fill:none;stroke:rgba(147,168,255,.45);stroke-dasharray:4 6}
.boucle-v .bande text{font:500 12px var(--mono);letter-spacing:.1em;fill:var(--accent-vif);text-anchor:middle;dominant-baseline:central}
.boucle-v .anneau{fill:none;stroke:rgba(147,168,255,.5);stroke-width:1.4;stroke-dasharray:3 5}
.etapes-liste{display:grid;gap:14px;margin-top:clamp(2rem,4vw,3rem)}
@media (min-width:900px){.etapes-liste{grid-template-columns:repeat(5,minmax(0,1fr))}}
.etapes-liste li{display:flex;flex-direction:column;gap:.5rem;padding:1.2rem;border-radius:18px;border:1px solid var(--tr)}
.etapes-liste .n{font:500 .74rem/1 var(--mono);color:var(--acc)}
.etapes-liste b{font:600 1.08rem/1.2 var(--titre);letter-spacing:-.015em;color:var(--t1)}
.etapes-liste p{color:var(--t2);font-size:.95rem}
.etapes-liste .produit{font:500 .72rem/1.4 var(--mono);color:var(--t1)}
.etapes-liste .produit{margin-top:auto;padding-top:.3rem}
/* cases « Produit : » alignées d'une étape à l'autre (David, 22/10) : numéro, titre, texte, produit sur quatre lignes communes */
@supports (grid-template-rows:subgrid){
  @media (min-width:900px){
    .etapes-liste{gap:0 14px;grid-template-rows:auto auto 1fr auto}
    .etapes-liste li{display:grid;grid-row:span 4;grid-template-rows:subgrid;gap:.5rem}
    .etapes-liste .produit{margin-top:.3rem}
  }
}
.etapes-liste .produit i{font-style:normal;color:var(--acc)}
/* Mini-visuels sur fond sombre : traits clairs, nœuds évidés (ils étaient blancs et pleins, trop lourds) */
.s-sombre .mini-v .v-trait{stroke:rgba(225,230,255,.42)}
.s-sombre .mini-v .v-noeud{fill:var(--noir-2);stroke:rgba(225,230,255,.5)}
.s-sombre .mini-v .v-plein{fill:var(--accent)}
.s-sombre .mini-v .v-txt{fill:var(--texte-s2)}
/* Interfaces fictives des expertises : consigne d'un espace de travail, exception d'un journal de flux */
.consigne{border:1px solid var(--trait-s);border-radius:12px;background:var(--noir);padding:.75rem .85rem;display:grid;gap:.35rem}
.consigne .k2{font:500 .66rem/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--accent-vif)}
.consigne p{font-size:.84rem;line-height:1.45;color:var(--texte-s)}
.pas b.x{color:#FF8A8D}
.flux-mini{border:1px solid var(--trait-s);border-radius:12px;background:var(--noir);padding:.5rem .6rem}
/* ===== Page Démonstrations ===== */
/* Numéro de la démonstration dans la rubrique de section */
.surtitre .no{font:500 .8rem/1 var(--mono);color:var(--t2)}
/* Une démonstration garde ses couleurs sombres sur une section claire (fenêtre d'application posée sur la page) */
.demo{--t1:var(--texte-s);--t2:var(--texte-s2);--tr:var(--trait-s);--tr2:var(--trait-s2);--acc:var(--accent-vif);color:var(--texte-s);color-scheme:dark}
.s-clair .demo :focus-visible,.s-papier .demo :focus-visible{outline-color:var(--accent-vif)}
/* Index des démonstrations dans le haut de page */
.demo-index{display:grid;gap:10px;counter-reset:none}
.demo-index a{display:grid;grid-template-columns:auto auto minmax(0,1fr) auto;gap:1rem;align-items:center;padding:1.1rem 1.2rem;border-radius:18px;border:1px solid var(--trait-s2);background:var(--noir-2);transition:border-color .3s,transform .3s var(--ease)}
.demo-index a:hover{border-color:var(--accent-vif);transform:translateX(4px)}
.demo-index .n{font:500 .74rem/1 var(--mono);color:var(--texte-s2)}
.demo-index .ic{width:40px;height:40px;color:var(--texte-s)}
.demo-index .ic svg{width:100%;height:100%}
.demo-index .ic-a{fill:var(--accent);stroke:var(--accent)}
.demo-index b{display:block;font:600 1.1rem/1.2 var(--titre);letter-spacing:-.015em}
.demo-index .d{display:block;margin-top:.25rem;font-size:.9rem;color:var(--texte-s2)}
.demo-index .fl{color:var(--accent-vif)}
@media (max-width:520px){.demo-index a{grid-template-columns:auto minmax(0,1fr) auto;gap:.8rem}.demo-index .n{display:none}}
.demo-fin .lien+.lien{margin-left:0}
/* Tri des demandes ; liste, étiquettes et fiche reprises par la revue du pilotage IA (#pil-demo) */
.tri-liste{display:grid;gap:6px}
.tri-e{width:100%;display:grid;gap:.3rem;text-align:left;padding:.7rem .8rem;border-radius:12px;border:1px solid var(--trait-s);background:var(--noir);color:var(--texte-s);cursor:pointer;transition:border-color .2s,background-color .2s}
.tri-e:hover{border-color:var(--trait-s2)}
.tri-e[aria-current="true"]{border-color:var(--accent-vif);background:var(--noir-3);box-shadow:inset 3px 0 0 var(--accent)}
.tri-e .l1{display:flex;justify-content:space-between;gap:.6rem;font:500 .68rem/1.3 var(--mono);color:var(--texte-s2)}
.tri-e .h{white-space:nowrap}
.tri-e .obj{font:600 .9rem/1.3 var(--titre)}
.tri-e .tags{display:flex;flex-wrap:wrap;gap:.35rem;min-height:1.3rem}
.tag{display:inline-flex;align-items:center;font:600 .68rem/1 var(--titre);padding:.28rem .5rem;border-radius:999px;border:1px solid rgba(147,168,255,.45);color:var(--accent-vif)}
.tag.urg,.statut.urg{border-color:transparent;background:#C62F35;color:#FFFFFF}
.tag.doute,.statut.doute{border-color:transparent;background:#F2C14E;color:#0C0E14}
.tri-liste.en-tri .tri-e:not(.triee) .tag{display:none}
.tri-liste.en-tri .tri-e:not(.triee) .tags::after{content:"Non triée";font:500 .68rem/1.3 var(--mono);color:var(--texte-s2)}
#pil-liste.en-tri .tri-e:not(.triee) .tags::after{content:"Non relue"}
.tri-e.triee .tag{animation:apparait .35s var(--ease) both}
@keyframes apparait{from{opacity:0;transform:translateY(4px)}}
.tri-fiche{display:grid;gap:.9rem;transition:opacity .5s,filter .5s}
.demo-sortie.vide .tri-fiche{opacity:.12;filter:blur(1.5px);transition:none}
.tri-fiche .msg{border:1px solid var(--trait-s);border-radius:12px;background:var(--noir);padding:.8rem .9rem;display:grid;gap:.35rem}
.tri-fiche .meta{font:500 .68rem/1.3 var(--mono);color:var(--texte-s2)}
.tri-fiche .sujet{font:600 1rem/1.3 var(--titre)}
.tri-fiche .corps{font-size:.88rem;line-height:1.5;color:var(--texte-s2)}
.tri-fiche .champs{display:grid;gap:1px;background:var(--trait-s);border:1px solid var(--trait-s);border-radius:12px;overflow:hidden}
.tri-fiche .champs div{display:grid;grid-template-columns:7.5rem minmax(0,1fr);gap:.8rem;background:var(--noir);padding:.55rem .8rem;font-size:.84rem}
.tri-fiche dt{font:500 .68rem/1.6 var(--mono);letter-spacing:.04em;text-transform:uppercase;color:var(--texte-s2)}
.tri-fiche dd{margin:0;color:var(--texte-s)}
@media (max-width:420px){.tri-fiche .champs div{grid-template-columns:minmax(0,1fr);gap:.15rem}}
/* Tableau de bord consolidé */
/* sur grand écran : sources et journal à gauche, tableau de bord à droite ; sur téléphone : sources, tableau de bord,
   puis journal (les filtres restent juste au-dessus du graphique) */
@media (min-width:1100px){.demo-grille.conso-grille{grid-template-columns:minmax(0,.85fr) minmax(0,1.6fr);grid-template-rows:auto 1fr}
  .conso-grille .c-src{grid-column:1;grid-row:1}.conso-grille .c-jrn{grid-column:1;grid-row:2;border-left:0;border-top:1px solid var(--trait-s)}
  .conso-grille .demo-sortie{grid-column:2;grid-row:1/3}}
/* tri et revue du pilotage sur téléphone : la fiche juste sous la liste, le journal ensuite */
@media (max-width:1099.98px){#tri-demo .demo-grille>.demo-col:nth-child(2),#pil-demo .demo-grille>.demo-col:nth-child(2){order:3}}
.conso-sources{border:0;margin:0;padding:0;min-width:0;display:grid;gap:6px}
.conso-sources legend{padding:0;margin-bottom:.6rem;width:100%}
.flt{display:grid;grid-template-columns:auto auto minmax(0,1fr) auto;gap:.65rem;align-items:center;padding:.65rem .75rem;border-radius:12px;border:1px solid var(--trait-s);background:var(--noir);cursor:pointer;transition:border-color .2s,opacity .2s}
.flt:hover{border-color:var(--trait-s2)}
.flt:has(input:focus-visible){outline:2px solid var(--accent-vif);outline-offset:2px}
.flt input{width:1.05rem;height:1.05rem;margin:0;accent-color:var(--accent-btn)}
.flt i{width:12px;height:12px;border-radius:3px}
.flt:has(input:not(:checked)){border-style:dashed}
.flt:has(input:not(:checked)) .etat{color:var(--texte-s2)}
.flt:has(input:not(:checked)) i{background:transparent!important;outline:1.5px dashed var(--texte-s2);outline-offset:-1.5px}
.flt .x{display:grid;gap:.1rem;min-width:0}
.flt b{font:600 .9rem/1.2 var(--titre)}
.flt .x span{font:500 .68rem/1.3 var(--mono);color:var(--texte-s2)}
.flt .etat{font:500 .66rem/1 var(--mono);letter-spacing:.04em;text-transform:uppercase;color:var(--accent-vif);white-space:nowrap}
.flt.attente .etat{color:var(--texte-s2)}
.kpi-b{font:inherit;color:inherit;text-align:left;border:0;cursor:pointer;box-shadow:inset 0 0 0 1px transparent;transition:box-shadow .2s,background-color .2s}
.kpi-b:hover{background:var(--noir-3)}
.kpi-b[aria-pressed="true"]{background:var(--noir-3);box-shadow:inset 0 -2px 0 var(--accent-vif)}
.kpi-b:focus-visible{outline-offset:-3px}
.conso-graphe{min-width:0;position:relative;border:1px solid var(--trait-s);border-radius:12px;background:var(--noir);padding:.6rem 0 .2rem;min-height:290px}
.conso-graphe svg{display:block;overflow:visible}
.conso-graphe .axe{stroke:var(--trait-s2)}
.conso-graphe .grille-l{stroke:var(--trait-s);stroke-dasharray:2 4}
.conso-graphe text{font:500 12px var(--mono)}
.conso-graphe .ax{fill:var(--texte-s2)}
.conso-graphe .ax.choisi{fill:var(--texte-s);font-weight:700}
.conso-graphe .tot{fill:var(--texte-s);font-weight:600;transition:opacity .4s}
.conso-graphe .et{fill:var(--texte-s2)}
.conso-graphe .cible{fill:transparent;cursor:pointer;outline:none}
.conso-graphe .cible:hover,.conso-graphe .cible:focus-visible{fill:rgba(225,230,255,.05)}
.conso-graphe .cible:focus-visible{stroke:var(--accent-vif);stroke-width:1.5}
.conso-graphe .cible[aria-pressed="true"]{fill:rgba(92,124,255,.08)}
.conso-graphe .pile{transform-box:fill-box;transform-origin:50% 100%;transition:transform .7s var(--ease)}
.conso-graphe.vide .pile{transform:scaleY(0);transition:none}
.conso-graphe.vide .tot{opacity:0;transition:none}
.conso-bulle{position:absolute;top:10px;z-index:2;display:grid;gap:.3rem;min-width:11rem;padding:.6rem .7rem;border-radius:10px;border:1px solid var(--trait-s2);background:var(--noir-3);box-shadow:0 12px 30px -10px rgba(0,0,0,.6);font:500 .74rem/1.3 var(--mono);color:var(--texte-s);pointer-events:none}
.conso-bulle b{font:600 .82rem/1.2 var(--titre)}
.conso-bulle .r{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:.5rem;align-items:center;color:var(--texte-s2)}
.conso-bulle .r.t{grid-template-columns:minmax(0,1fr) auto;border-top:1px solid var(--trait-s2);padding-top:.3rem;color:var(--texte-s)}
.conso-bulle i{width:9px;height:9px;border-radius:2px}
.conso-bulle .v{color:var(--texte-s);text-align:right}
.conso-tab summary{cursor:pointer;font:500 .8rem/1.3 var(--titre);color:var(--accent-vif);padding:.2rem 0}
.conso-tab[open] summary{margin-bottom:.6rem}
.conso-tab .demo-plus{margin-top:.5rem}
.tbl tr.total td{font-weight:600;color:var(--texte-s);border-top:1px solid var(--trait-s2)}
.demo-sortie .conso-tab,.demo-sortie .conso-graphe{transition:opacity .5s,filter .5s}
.demo-sortie.vide .conso-tab{opacity:.12;filter:blur(1.5px);transition:none}
html:not(.js) #tri-lancer,html:not(.js) #conso-lancer,html:not(.js) .conso-graphe,html:not(.js) .conso-sources{display:none}
/* ===== Pages du cabinet, cas clients et contact ===== */
/* Haut de page sans visuel : le texte prend plus de largeur */
@media (min-width:1100px){.hero-page-in.seul>.t{grid-column:1/11}}
.hero-page-in.seul .t1{max-width:11.34em}
/* Index des cas clients : secteur, expertise, résultat principal */
.cas-i{display:grid;gap:1.1rem;align-content:start;padding:clamp(1.4rem,3vw,2rem);border-radius:24px;border:1px solid var(--tr2);background:var(--carte);min-height:320px;transition:border-color .35s,transform .35s var(--ease)}
a.cas-i:hover{border-color:var(--acc);transform:translateY(-3px)}
.cas-i .puces{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}
.cas-i .res{display:grid;gap:.3rem}
.cas-i .nb{font:600 clamp(3.2rem,6vw,4.6rem)/.95 var(--titre);letter-spacing:-.05em;color:var(--acc);font-variant-numeric:tabular-nums}
.cas-i .u{font-weight:600;color:var(--t1)}
.cas-i h3{font:600 1.15rem/1.3 var(--titre);letter-spacing:-.015em;color:var(--t1)}
.cas-i .lien{width:max-content;margin-top:auto}
/* un seul cas publié : la carte prend toute la ligne, résultat à gauche et description à droite sur grand écran */
.cas-index .seul{grid-column:1/-1;min-height:0}
.cas-i-g,.cas-i-d{display:grid;gap:1.1rem;align-content:start;min-width:0}
@media (min-width:900px){.cas-i.seul{grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:1.5rem clamp(2rem,5vw,4rem)}}
.cas-i dl{display:grid;gap:1.1rem}
@media (min-width:700px){.cas-i dl{grid-template-columns:1fr 1fr}}
.cas-i dt{font:500 .7rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--t2);margin-bottom:.45rem}
.cas-i dd{color:var(--t1)}
.cas-i.seul h3{font-size:clamp(1.3rem,2.4vw,1.85rem);line-height:1.2;max-width:30em}
.cas-i-d>.ph{justify-self:start}
/* Six compétences : bento, deux cartes larges aux coins */
.bento6{display:grid;gap:14px}
@media (min-width:700px){.bento6{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1100px){.bento6{grid-template-columns:repeat(4,minmax(0,1fr))}.bento6 .large{grid-column:span 2}}
/* sept compétences : sur deux colonnes, la dernière carte prend toute la largeur ; sur quatre, une grande carte puis six petites */
@media (min-width:700px) and (max-width:1099.98px){.bento6 .c:last-child{grid-column:1/-1}}
.bento6 .c{min-height:200px;justify-content:flex-end}
.bento6 .c h3{font-size:clamp(1.4rem,2.2vw,1.8rem)}
.bento6 .large{background:radial-gradient(120% 140% at 100% 0%,rgba(92,124,255,.16),transparent 60%),var(--carte)}
/* Méthode : bande de la conduite du changement sous la frise */
.bande-ch{margin-top:clamp(2rem,4vw,3rem);display:flex;flex-wrap:wrap;gap:.6rem 1rem;align-items:baseline;padding:1rem 1.2rem;border-radius:16px;border:1px dashed var(--acc);color:var(--t1)}
.bande-ch .k{font:500 .72rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--acc)}
.scenarios .quand{margin-top:auto;padding-top:.8rem;border-top:1px solid var(--tr);font-size:.95rem}
.scenarios .quand b{color:var(--t1);font-weight:600}
/* Équipe */
.personne .photo img{width:min(200px,56%);height:auto;aspect-ratio:1;border-radius:50%;object-fit:cover;box-shadow:0 0 0 1px var(--tr)}
.personne .lien{width:max-content}
@media (max-width:699.98px){.pv .v-txt{font-size:15px}}
.resultat span{min-width:0;overflow-wrap:anywhere}
/* ===== Retours de David du 03/10 au soir ===== */
/* Accueil : le haut de page est noir, comme celui des autres pages (David, 22/10). */
.constat .suite .pb{color:var(--t2)}
/* vérifications humaines : pastille cochée, au trait du texte (l'humain n'est pas un nœud d'IA) ; en clair sur le hero noir */
.anime .humain{opacity:0}
.humain .h-c{fill:#FFFFFF;stroke:var(--encre);stroke-width:1.6}
.humain .h-v{fill:none;stroke:var(--encre);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.humain .h-l{fill:none;stroke:var(--encre);stroke-width:1.2;stroke-dasharray:3 3}
.humain text{font:600 11px var(--mono);letter-spacing:.06em;fill:var(--encre)}
.s-sombre .humain .h-c{fill:var(--noir);stroke:var(--texte-s)}
.s-sombre .humain :is(.h-v,.h-l){stroke:var(--texte-s)}
.s-sombre .humain text{fill:var(--texte-s)}
/* Notre posture sur téléphone et tablette : la grande carte qui reste à l'écran prenait trop de place et ses textes
   devenaient illisibles ; seules les trois étapes restent, à pleine encre */
@media (max-width:1023.98px){.posture-visu{display:none}.temps li{min-height:0;padding-block:1.6rem}.anime .temps li h3{color:var(--t1)}}

/* Guides (04/10 : rubrique de contenus, la règle « pas de blog » du brief levée par David). Texte long : une colonne de
   lecture de 42 em au plus, sommaire collant à gauche sur grand écran, listes et liens rendus visibles (la feuille les
   remet à zéro ailleurs), encadré « À retenir » en tête, sources et auteur en fin d'article. */
.hero-page.guide .t1{font-size:clamp(2.2rem,4.6vw,4.4rem);max-width:13.5em}
.guide-meta{display:flex;flex-wrap:wrap;gap:.4rem 1.1rem;margin-top:1.6rem;font:500 .8rem/1.4 var(--mono);letter-spacing:.02em;color:var(--texte-s2)}
.guide-meta a{color:var(--texte-s);border-bottom:1px solid var(--trait-s2)}
.guide-corps{display:grid;gap:clamp(2rem,4vw,3rem)}
@media (min-width:1100px){.guide-corps{grid-template-columns:repeat(12,minmax(0,1fr))}.guide-corps>.sommaire{grid-column:1/4}.guide-corps>.prose{grid-column:4/12}}
.sommaire{align-self:start;font-size:.95rem}
@media (min-width:1100px){.sommaire{position:sticky;top:calc(var(--entete) + 24px)}}
.sommaire h2{font:600 .8rem/1.3 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--t2);margin-bottom:.9rem}
.sommaire ol{display:grid;gap:.55rem;counter-reset:som}
.sommaire li{counter-increment:som;display:grid;grid-template-columns:1.8rem 1fr;color:var(--t2)}
.sommaire li::before{content:counter(som,decimal-leading-zero);font:500 .78rem/1.6 var(--mono);color:var(--acc)}
.sommaire a{color:var(--t1);border-bottom:1px solid transparent}
.sommaire a:hover{border-bottom-color:currentColor}
.prose{max-width:42em;min-width:0;font-size:clamp(1.06rem,1.2vw,1.125rem);line-height:1.7;color:var(--t1)}
.prose>*+*{margin-top:1.15em}
.prose h2{font:600 clamp(1.5rem,2.4vw,2rem)/1.15 var(--titre);letter-spacing:-.025em;margin-top:2.2em;scroll-margin-top:calc(var(--entete) + 20px)}
.prose h3{font:600 clamp(1.15rem,1.6vw,1.3rem)/1.25 var(--titre);letter-spacing:-.015em;margin-top:1.8em}
.prose h2+*,.prose h3+*{margin-top:.7em}
.prose p,.prose li{color:var(--t1)}
.prose ul,.prose ol{padding-left:1.4em;display:grid;gap:.45em}
.prose ul{list-style:disc}
.prose ol{list-style:decimal}
.prose li::marker{color:var(--acc)}
.prose a{color:var(--acc);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.18em}
.prose strong{font-weight:600}
.prose .retenir{margin-top:0;border:1px solid var(--tr2);border-left:3px solid var(--acc);border-radius:10px;padding:1.2rem 1.4rem;background:var(--carte)}
.prose .retenir h2{font:600 .8rem/1.3 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--acc);margin:0 0 .7rem}
.prose .retenir ul{gap:.35em}
.prose .tableau{overflow-x:auto;-webkit-overflow-scrolling:touch}
.prose table{width:100%;border-collapse:collapse;font-size:.95rem;line-height:1.5;min-width:32rem}
.prose th,.prose td{text-align:left;vertical-align:top;padding:.7rem .8rem;border-bottom:1px solid var(--tr)}
.prose th{font-weight:600;color:var(--t2);font-size:.85rem}
.prose .sources{font-size:.9rem;color:var(--t2);border-top:1px solid var(--tr);padding-top:1.4rem;margin-top:2.6em}
.prose .sources h2{font:600 .8rem/1.3 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--t2);margin:0 0 .8rem}
.prose .sources li{color:var(--t2);overflow-wrap:anywhere}
.auteur{display:grid;grid-template-columns:64px 1fr;gap:1rem;align-items:center;margin-top:2.4em;padding:1.2rem;border:1px solid var(--tr);border-radius:12px;background:var(--carte)}
.auteur img{width:64px;height:64px;border-radius:50%;object-fit:cover}
.auteur p{margin:0;font-size:.95rem;line-height:1.5;color:var(--t2)}
.auteur b{color:var(--t1)}
.auteur b,.auteur .titre{display:block}
.auteur .ph{margin-top:.4rem}
.auteur .titre{font-size:.9rem}
.guides-liste{display:grid;gap:14px}
@media (min-width:760px){.guides-liste{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1100px){.guides-liste{grid-template-columns:repeat(3,minmax(0,1fr))}}
.guides-liste a{display:flex;flex-direction:column;gap:.8rem;height:100%;padding:1.5rem;border:1px solid var(--tr);border-radius:14px;background:var(--carte);transition:border-color .2s var(--ease),transform .2s var(--ease)}
.guides-liste a:hover{border-color:var(--acc);transform:translateY(-2px)}
.guides-liste .k{font:500 .75rem/1.3 var(--mono);letter-spacing:.04em;color:var(--acc)}
.guides-liste h3{font:600 1.25rem/1.25 var(--titre);letter-spacing:-.02em}
.guides-liste p{color:var(--t2);font-size:.98rem;line-height:1.55}
.guides-liste .voir{margin-top:auto;font-weight:600;color:var(--acc)}
@media (prefers-reduced-motion:reduce){.guides-liste a{transition:none}.guides-liste a:hover{transform:none}}