/* ==========================================================================
   SELL IA · feuille de style unique
   Source de verite du site. Aucune valeur de couleur, de taille ou d espace
   ne doit exister ailleurs. Voir docs/superpowers/specs/2026-07-21-*.md
   ========================================================================== */

:root{
  /* Couleurs · charte des pages, confirmee le 21/07/2026 */
  --bg:#F2EDE2;
  --card:#FFFFFF;
  --ink:#0E2B22;
  --muted:rgba(14,43,34,.72);   /* corrige de .62 : 4,2:1 passait sous AA */
  --line:rgba(14,43,34,.12);
  --gold:#C9A227;
  --gold2:#E2C25C;
  --gold-soft:rgba(201,162,39,.12);
  --green:#2c5f3e;

  /* Etiquettes probleme/reponse/gain/mesure des cas d usage (18 pages) */
  --alerte:#B0563A;
  --alerte-soft:rgba(176,86,58,.14);
  --dore-encre:#9a7b1e;
  --vert-soft:rgba(44,95,62,.12);
  --sourdine-soft:rgba(14,43,34,.07);
  --sourdine-encre:#2b4a3d;
  --gold-glacis:rgba(201,162,39,.22); /* remplissage du radar scan-maturite */

  /* Fond du hero · ivoire chaud, sans teinte ajoutee */
  --hero-degrade:linear-gradient(160deg,#F7F4EC,#F2EDE2 55%,#EDE7D9);
  --hero-nappe:rgba(255,252,244,.9);

  /* Echelle typographique */
  --t-xs:11px; --t-sm:12.5px; --t-md:14px; --t-lg:16.5px;
  --t-xl:22px; --t-2xl:34px; --t-3xl:clamp(32px,5.4vw,52px);

  /* Echelle d espacement */
  --e-1:4px; --e-2:8px; --e-3:12px; --e-4:18px;
  --e-5:26px; --e-6:38px; --e-7:56px; --e-8:80px;

  /* Rayons et durees */
  --r-sm:3px; --r-md:14px; --r-pill:30px;
  --d-court:.16s; --d-moyen:.24s; --d-long:.34s;
  --courbe:cubic-bezier(.2,.7,.3,1);

  /* Familles */
  --serif:'Fraunces',Georgia,serif;
  --sans:'Public Sans',system-ui,sans-serif;
  --mono:'IBM Plex Mono',monospace;
}

html[data-theme="dark"]{
  --bg:#0E2B22;
  --card:#123329;
  --ink:#F2EDE2;
  --muted:rgba(242,237,226,.72);  /* corrige de .62, meme motif qu en clair */
  --line:rgba(242,237,226,.14);
  --gold:#E2C25C;
  --gold2:#EBD07A;
  --gold-soft:rgba(226,194,92,.14);
  --green:#7FB59B;
  --alerte:#D98266;
  --alerte-soft:rgba(217,130,102,.18);
  --dore-encre:#E8CE86;
  --vert-soft:rgba(127,181,155,.18);
  --sourdine-soft:rgba(242,237,226,.09);
  --sourdine-encre:#BFE0D2;
  --gold-glacis:rgba(226,194,92,.28);
  --hero-degrade:linear-gradient(160deg,#123329,#0E2B22 55%,#0A211A);
  --hero-nappe:rgba(242,237,226,.05);
}

*{box-sizing:border-box}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-size:var(--t-md);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}

/* ===================== Mise en page ===================== */
.wrap{max-width:1200px;margin:0 auto;padding:0 var(--e-4) var(--e-7)}
.sec{padding:var(--e-6) 0;border-top:1px solid var(--line)}
.kicker{
  font-family:var(--mono);font-size:var(--t-xs);letter-spacing:.16em;
  text-transform:uppercase;color:var(--gold);margin-bottom:var(--e-2);
}
h1{font-family:var(--serif);font-weight:600;font-size:var(--t-3xl);line-height:1.07;letter-spacing:-.022em;margin:0 0 var(--e-3)}
h1 em{font-style:italic;color:var(--gold)}
h2{font-family:var(--serif);font-weight:600;font-size:var(--t-2xl);line-height:1.15;margin:0 0 var(--e-3)}
h3{font-family:var(--serif);font-weight:600;font-size:var(--t-xl);margin:0 0 var(--e-2)}
.lead{font-size:var(--t-lg);line-height:1.65;color:var(--muted);max-width:46em;margin:0}

/* ===================== Navigation ===================== */
.nav{position:sticky;top:0;z-index:50;background:var(--bg);border-bottom:1px solid var(--line)}
.nav-in{max-width:1200px;margin:0 auto;padding:var(--e-3) var(--e-4);display:flex;align-items:center;gap:var(--e-4);flex-wrap:wrap}
.logo{font-family:var(--serif);font-weight:700;font-size:19px}
.logo em{font-style:normal;color:var(--gold)}
.nav-links{display:flex;gap:var(--e-4);flex-wrap:wrap;margin-left:auto;align-items:center}
.nav-links a{font-size:var(--t-sm);color:var(--muted);position:relative;padding-bottom:var(--e-1);transition:color var(--d-moyen)}
.nav-links a:hover{color:var(--ink)}

/* Soulignement laiton · se deroule depuis la gauche, se retracte a droite.
   Ne s applique jamais au bouton .cta, qui a deja un fond plein. */
.nav-links a:not(.cta)::after{
  content:"";position:absolute;left:0;bottom:0;width:100%;height:2px;
  background:var(--gold);transform:scaleX(0);transform-origin:right;
  transition:transform var(--d-long) cubic-bezier(.65,0,.35,1);
}
.nav-links a:not(.cta):hover::after{transform:scaleX(1);transform-origin:left}
.nav-links a.cta{
  background:var(--gold);color:#0A211A;font-weight:700;
  padding:var(--e-2) var(--e-4);border-radius:var(--r-pill);
}

/* ===================== Boutons ===================== */
.btn{
  display:inline-flex;align-items:center;gap:var(--e-2);border:none;
  font-family:inherit;font-size:var(--t-sm);font-weight:700;cursor:pointer;
  padding:var(--e-3) var(--e-5);border-radius:var(--r-pill);
}
/* Principal · s eleve et projette une ombre laiton */
.btn-or{
  background:linear-gradient(135deg,var(--gold),var(--gold2));color:#0A211A;
  box-shadow:0 2px 6px rgba(201,162,39,.3);
  transition:transform var(--d-court) var(--courbe),box-shadow var(--d-court);
}
.btn-or:hover{transform:translateY(-3px);box-shadow:0 12px 26px -8px rgba(201,162,39,.75)}
/* Secondaire · le fond se remplit depuis la gauche, le texte s inverse */
.btn-contour{
  background:transparent;color:var(--ink);border:1.5px solid var(--ink);
  position:relative;overflow:hidden;isolation:isolate;
  transition:color var(--d-long);
}
.btn-contour > span{position:relative;z-index:2}
.btn-contour::before{
  content:"";position:absolute;inset:0;background:var(--ink);
  transform:scaleX(0);transform-origin:left;
  transition:transform var(--d-long) cubic-bezier(.65,0,.35,1);
}
.btn-contour:hover{color:var(--bg)}
.btn-contour:hover::before{transform:scaleX(1)}

/* ===================== Hero ===================== */
.hero{padding:var(--e-7) 0 var(--e-6)}

/* ===================== Cartes ===================== */
/* .grid3 : alias non renomme (les 18 pages l utilisent, non liste dans la
   tache 8 mais duplique .grille-3 a l identique ; alias plutot que
   renommage pour rester strictement dans les 3 renommages mandates). */
.grille-3,.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--e-3)}
.grille-2{display:grid;grid-template-columns:1fr 1fr;gap:var(--e-3)}
.grille-4{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--e-3)}
@media(max-width:900px){.grille-4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.grille-4{grid-template-columns:1fr}}
.carte{
  background:var(--card);border:1px solid var(--line);
  border-radius:var(--r-md);padding:var(--e-5) var(--e-4);
  transition:transform var(--d-moyen) var(--courbe),box-shadow var(--d-moyen),border-color var(--d-moyen);
}
.carte:hover{
  transform:translateY(-6px);
  box-shadow:0 18px 40px -16px rgba(14,43,34,.3);
  border-color:var(--gold);
}
.carte p{font-size:var(--t-sm);color:var(--muted);margin:0}

/* ===================== Bascule clair / sombre ===================== */
/* Reprise a l identique du bouton des 18 pages : l accueil a ete aligne
   sur elles a la tache 2, elle en depend donc des maintenant. */
.theme-toggle{
  margin-left:var(--e-2);width:34px;height:34px;border-radius:9px;
  border:1px solid var(--line);background:transparent;color:var(--ink);
  cursor:pointer;font-size:15px;line-height:1;flex-shrink:0;
  display:inline-flex;align-items:center;justify-content:center;
}
.theme-toggle:hover{background:var(--gold-soft)}

/* ===================== Pied de page ===================== */
.pied{border-top:1px solid var(--line);padding:var(--e-6) var(--e-4) var(--e-4)}
.footcols{
  display:grid;grid-template-columns:repeat(4,1fr);gap:var(--e-4);
  max-width:820px;margin:0 auto var(--e-5);text-align:left;
}
.footcol{display:flex;flex-direction:column;gap:7px}
.foothd{
  font-family:var(--mono);font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--gold);margin-bottom:3px;
}
.footcol a{font-size:var(--t-sm);color:var(--muted);transition:color var(--d-court)}
.footcol a:hover{color:var(--gold)}
.footbase{text-align:center;font-size:var(--t-sm);color:var(--muted)}
.footbase span{font-family:var(--mono);font-size:var(--t-xs)}

/* ===================== Adaptatif ===================== */
@media(max-width:760px){
  .footcols{grid-template-columns:1fr 1fr}
}
@media(max-width:860px){
  .grille-3,.grille-2,.grid3{grid-template-columns:1fr}
}

.cta-groupe{display:flex;gap:var(--e-3);margin-top:var(--e-5);flex-wrap:wrap}

/* ==========================================================================
   PAGES SECONDAIRES (les 18 pages src/pages/*/index.html)
   Disposition centree, distincte de l accueil (qui est en hero-grille a
   gauche). Le marqueur .page-standard sur .wrap isole ces regles pour
   qu elles ne debordent jamais sur l accueil, qui reutilise les memes
   selecteurs (.kicker, h2, .hero, .lead) avec une disposition a gauche.
   ========================================================================== */
.page-standard .hero{text-align:center}
.page-standard .hero .lead{max-width:640px;margin:0 auto var(--e-5)}
.page-standard .kicker{text-align:center}
.page-standard .sec h2{text-align:center}

/* Bouton dore et bouton contour dans leur variante historique des 18 pages
   (classes .gold/.ghost, distinctes de .btn-or/.btn-contour de l accueil :
   memes intentions, marquage different, non renomme cf. tache 8). */
.btn.gold{background:linear-gradient(135deg,var(--gold),var(--gold2));color:#0A211A}
.btn.ghost{background:none;border:1px solid var(--line);color:var(--ink);margin-left:var(--e-3)}

.sub{
  font-size:var(--t-md);color:var(--muted);line-height:1.6;
  text-align:center;max-width:620px;margin:0 auto var(--e-5);
}

/* Cas d usage · probleme, systeme, resultat (cf. tache 8, exemple travaille) */
.cas{background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);padding:var(--e-5)}
.cas h3{font-family:var(--serif);font-size:var(--t-xl);font-weight:600;margin:0 0 var(--e-4)}
.casline{display:grid;grid-template-columns:92px 1fr;gap:var(--e-3);margin-bottom:var(--e-2);font-size:var(--t-sm);line-height:1.55}
.caslbl{
  font-family:var(--mono);font-size:9px;letter-spacing:.06em;text-transform:uppercase;
  font-weight:700;height:fit-content;padding:var(--e-1) 7px;border-radius:6px;text-align:center;
}
.caslbl.pb{background:var(--alerte-soft);color:var(--alerte)}
.caslbl.sy{background:var(--gold-soft);color:var(--dore-encre)}
.caslbl.re{background:var(--vert-soft);color:var(--green)}
.caslbl.st{background:var(--sourdine-soft);color:var(--sourdine-encre)}

.carte ul{margin:var(--e-3) 0 0;padding-left:18px}
.carte li{font-size:var(--t-sm);color:var(--muted);line-height:1.55;margin-bottom:var(--e-1)}
.pill{
  font-family:var(--mono);font-size:var(--t-xs);letter-spacing:.08em;
  text-transform:uppercase;color:var(--gold);margin-bottom:var(--e-2);
}

.band{
  background:var(--card);border:1px solid var(--gold);border-radius:var(--r-md);
  padding:var(--e-5);text-align:center;margin-top:var(--e-6);
}
.band h2{margin-bottom:var(--e-2)}
.band .sub{margin-bottom:var(--e-4)}

.checks{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--e-2);margin-top:var(--e-4)}
.check{
  display:inline-flex;gap:var(--e-2);background:var(--card);border:1px solid var(--line);
  border-radius:var(--r-md);padding:var(--e-2) var(--e-3);font-size:var(--t-sm);
}
.check:before{content:'\2713';color:var(--green);font-weight:700}

.form{max-width:460px;margin:var(--e-5) auto 0;display:flex;flex-direction:column;gap:var(--e-3);text-align:left}
.in{
  border:1px solid var(--line);border-radius:var(--r-md);padding:var(--e-3) var(--e-4);
  font-size:var(--t-md);background:var(--card);color:var(--ink);font-family:inherit;width:100%;
}
.in:focus{outline:none;border-color:var(--gold)}
.note{font-family:var(--mono);font-size:var(--t-xs);color:var(--muted)}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--e-3)}
.stepn{font-family:var(--mono);font-size:var(--t-xs);color:var(--gold);letter-spacing:.1em;margin-bottom:var(--e-2)}
.proofline{font-family:var(--mono);font-size:var(--t-xs);color:var(--muted);margin-top:var(--e-4)}
.badge-reseau{
  display:inline-flex;align-items:center;gap:7px;
  background:var(--card);border:1px solid var(--line);border-radius:99px;
  padding:7px 14px;font-size:var(--t-xs);color:var(--muted);text-decoration:none;
  transition:border-color var(--d-moyen),color var(--d-moyen);
}
.badge-reseau:hover{border-color:var(--gold);color:var(--ink)}
.badge-reseau b{font-family:var(--mono);font-weight:700;letter-spacing:.02em;color:var(--ink)}
.badge-reseau b em{font-style:normal;color:var(--gold)}
.badge-reseau-ligne{margin-top:var(--e-3)}
.footbase .badge-reseau{margin-top:var(--e-3)}
.offre-lien{display:inline-block;margin-top:var(--e-3);font-size:var(--t-sm);font-weight:600;color:var(--gold)}
.offre-lien:hover{text-decoration:underline}
.faq details{background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);padding:var(--e-3) var(--e-4);margin-bottom:var(--e-2)}
.faq summary{font-family:var(--serif);font-size:var(--t-lg);font-weight:600;cursor:pointer}
.faq p{color:var(--muted);font-size:var(--t-sm);line-height:1.55;margin:var(--e-2) 0 0}

/* ===================== Formulaire de capture (leadform) ===================== */
.leadwrap{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);
  padding:var(--e-5) var(--e-5);max-width:620px;margin:0 auto;
  box-shadow:0 10px 40px rgba(14,43,34,.06);
}
.leadwrap h2{font-family:var(--serif);font-weight:600;font-size:var(--t-xl);line-height:1.15;margin:0 0 var(--e-2)}
.leadwrap .leadsub{color:var(--muted);font-size:var(--t-md);line-height:1.55;margin:0 0 var(--e-2)}
.leadval{
  display:flex;gap:var(--e-3);align-items:flex-start;background:rgba(201,162,39,.08);
  border:1px solid rgba(201,162,39,.3);border-radius:var(--r-md);padding:var(--e-3);
  margin:var(--e-4) 0 var(--e-4);font-size:var(--t-md);line-height:1.5;color:var(--ink);
}
.leadval b{color:var(--green)}
.leadgrid{display:grid;grid-template-columns:1fr 1fr;gap:var(--e-3)}
.leadgrid .full{grid-column:1 / -1}
.leadin{
  width:100%;box-sizing:border-box;padding:var(--e-3) var(--e-4);border:1px solid var(--line);
  border-radius:var(--r-md);background:var(--card);color:var(--ink);font-size:var(--t-md);
  font-family:inherit;outline:none;transition:border-color var(--d-court);
}
.leadin:focus{border-color:var(--gold)}
.leadbtn{
  width:100%;margin-top:var(--e-3);padding:var(--e-4) 0;border:none;border-radius:var(--r-md);
  background:var(--gold);color:#0A211A;font-weight:700;font-size:var(--t-lg);cursor:pointer;
  font-family:inherit;transition:transform .1s,filter var(--d-court);
}
.leadbtn:hover{filter:brightness(1.05);transform:translateY(-1px)}
.leadtrust{display:flex;flex-wrap:wrap;gap:var(--e-4);justify-content:center;margin-top:var(--e-4);font-size:var(--t-sm);color:var(--muted)}
.leadtrust span{display:inline-flex;align-items:center;gap:5px}
.leadnote{text-align:center;font-size:var(--t-sm);margin-top:var(--e-3);min-height:var(--e-4)}
@media(max-width:520px){
  .leadgrid{grid-template-columns:1fr}
  .leadwrap{padding:var(--e-5) var(--e-4)}
}

/* ===================== Page mentions legales (.doc) ===================== */
.doc{max-width:760px;margin:0 auto}
.doc section{padding:var(--e-5) 0;border-top:1px solid var(--line)}
.doc h2{font-family:var(--serif);font-weight:600;font-size:var(--t-xl);line-height:1.2;margin:0 0 var(--e-3)}
.doc h3{font-family:var(--serif);font-weight:600;font-size:var(--t-lg);margin:var(--e-4) 0 var(--e-2)}
.doc p{font-size:var(--t-md);line-height:1.7;color:var(--muted);margin:0 0 var(--e-3)}
.doc p b,.doc li b{color:var(--ink)}
.doc ul{margin:0 0 var(--e-3);padding-left:20px}
.doc li{font-size:var(--t-md);line-height:1.7;color:var(--muted);margin-bottom:var(--e-2)}
.idcard{background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);padding:var(--e-4) var(--e-5);margin-bottom:var(--e-3)}
.idrow{display:grid;grid-template-columns:210px 1fr;gap:var(--e-3);font-size:var(--t-md);line-height:1.6;padding:var(--e-2) 0;border-top:1px solid var(--line)}
.idrow:first-child{border-top:none}
.idlbl{font-family:var(--mono);font-size:var(--t-xs);letter-spacing:.06em;text-transform:uppercase;color:var(--gold);padding-top:var(--e-1)}
.upd{font-family:var(--mono);font-size:var(--t-xs);color:var(--muted);text-align:center;padding-top:var(--e-4)}
@media(max-width:760px){
  .idrow{grid-template-columns:1fr;gap:2px}
}

@media(max-width:860px){
  .steps{grid-template-columns:1fr}
  .btn.ghost{margin-left:0;margin-top:var(--e-3)}
}

/* ==========================================================================
   MOUVEMENT
   Degradation sure : l etat par defaut est VISIBLE. L animation accompagne
   le contenu, elle ne le masque jamais. Si le JS ne s execute pas, la page
   reste entierement lisible. C est l inverse du montage courant opacity:0
   revele par script, qui produit une page blanche en cas d echec.
   ========================================================================== */

.apparait{
  opacity:1;
  transform:none;
  transition:opacity .65s var(--courbe),transform .65s var(--courbe);
}
/* Le JS pose .js-actif sur <html> : seule cette classe autorise l etat masque,
   donc l etat masque n existe jamais sans JS pour le lever. */
html.js-actif .apparait:not(.vu){opacity:0;transform:translateY(24px)}
html.js-actif .apparait.vu{opacity:1;transform:none}

/* Cascade · les enfants directs entrent l un apres l autre */
html.js-actif [data-cascade] > .apparait:nth-child(1){transition-delay:.05s}
html.js-actif [data-cascade] > .apparait:nth-child(2){transition-delay:.18s}
html.js-actif [data-cascade] > .apparait:nth-child(3){transition-delay:.31s}
html.js-actif [data-cascade] > .apparait:nth-child(4){transition-delay:.44s}

/* Titre devoile · un rideau qui se leve. Reserve au h1 du hero. */
@keyframes devoile{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}
html.js-actif .titre-devoile{animation:devoile .95s .1s cubic-bezier(.65,0,.35,1) both}

/* Fond du hero · uniforme, identique au reste du site (nappe retiree le 260725) */

/* ===================== Hero · apercu de conversation ===================== */
.hero-grille{display:grid;grid-template-columns:1.15fr .9fr;gap:var(--e-6);align-items:center}
.echange{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);
  padding:var(--e-4);box-shadow:0 12px 38px -20px rgba(14,43,34,.3);
}
.echange-tete{
  display:flex;align-items:center;gap:var(--e-2);
  font-family:var(--mono);font-size:var(--t-xs);letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);
  padding-bottom:var(--e-3);border-bottom:1px solid var(--line);margin-bottom:var(--e-3);
}
.pastille{width:6px;height:6px;border-radius:50%;background:var(--green);animation:pulse 2s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.35;transform:scale(1)}50%{opacity:1;transform:scale(1.4)}}
.msg{max-width:82%;padding:var(--e-3);border-radius:13px;font-size:var(--t-sm);line-height:1.5;margin-bottom:var(--e-2)}
.msg-client{background:var(--gold-soft);color:var(--ink);border-bottom-left-radius:var(--r-sm)}
.msg-ia{background:var(--green);color:#F2EDE2;margin-left:auto;border-bottom-right-radius:var(--r-sm)}
.msg-ia b{color:var(--gold2);font-weight:600}
.saisie{display:inline-flex;gap:3px;padding:var(--e-3)}
.saisie i{width:5px;height:5px;border-radius:50%;background:var(--muted);animation:frappe 1.3s infinite}
.saisie i:nth-child(2){animation-delay:.18s}
.saisie i:nth-child(3){animation-delay:.36s}
@keyframes frappe{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
.echange-pied{font-family:var(--mono);font-size:var(--t-xs);color:var(--muted);text-align:right;margin-top:var(--e-1)}

@media(max-width:860px){
  .hero-grille{grid-template-columns:1fr}
}
@media (prefers-reduced-motion: reduce){
  .pastille,.saisie i{animation:none}
}

/* ===================== Garde-fou d accessibilite =====================
   Un visiteur qui a desactive les animations dans son systeme voit un site
   sobre. Exigence, pas option. */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  html.js-actif .apparait:not(.vu){opacity:1;transform:none}
}

/* ===================== Disposition texte + visualisation ===================== */
/* Reprend l esprit du hero (texte a gauche, apercu anime a droite), reutilisable
   sur toutes les pages. .inverse place la visualisation a gauche. */
.duo{display:grid;grid-template-columns:1.02fr .98fr;gap:var(--e-6);align-items:center;margin-bottom:var(--e-5)}
.duo .lead{margin-top:var(--e-3)}
.duo.inverse .duo-viz{order:-1}
@media(max-width:860px){
  .duo{grid-template-columns:1fr;gap:var(--e-4)}
  .duo.inverse .duo-viz{order:0}
}

/* ===================== Visualisations animees ===================== */
/* Meme carte que le simulateur du hero (.echange). Toutes les animations sont
   neutralisees par le garde-fou prefers-reduced-motion plus haut. */
.viz{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);
  padding:var(--e-4);box-shadow:0 12px 38px -20px rgba(14,43,34,.3);
}
.viz-tete{
  display:flex;align-items:center;gap:var(--e-2);
  font-family:var(--mono);font-size:var(--t-xs);letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);
  padding-bottom:var(--e-3);border-bottom:1px solid var(--line);margin-bottom:var(--e-3);
}
.viz-pied{font-family:var(--mono);font-size:var(--t-xs);color:var(--muted);text-align:right;margin-top:var(--e-3)}

/* A · file de demandes traitees a la suite */
.file{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.file li{
  display:flex;align-items:center;gap:8px;
  padding:10px 12px;border:1px solid var(--line);border-radius:var(--r-sm);
  font-size:var(--t-sm);background:var(--bg);animation:fileTraite 6s ease-in-out infinite;
}
.file li:nth-child(2){animation-delay:2s}
.file li:nth-child(3){animation-delay:4s}
.file .canal{font-family:var(--mono);font-size:9px;letter-spacing:.05em;text-transform:uppercase;color:var(--gold);border:1px solid var(--gold);border-radius:5px;padding:2px 6px;flex-shrink:0}
.file .txt{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.file .coche{font-family:var(--mono);font-size:var(--t-xs);color:var(--green);font-weight:600;flex-shrink:0}
@keyframes fileTraite{
  0%,9%{background:var(--bg);border-color:var(--line)}
  20%,100%{background:var(--gold-soft);border-color:var(--gold)}
}

/* B · tableau de bord, indicateurs avant/apres */
.kpi{display:flex;flex-direction:column;gap:10px}
.kpi-l{display:flex;align-items:center;justify-content:space-between;gap:var(--e-3);padding:11px 12px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--bg);font-size:var(--t-sm)}
.kpi-l .lab{color:var(--muted)}
.kpi-l .val{font-family:var(--mono);display:inline-flex;align-items:center;gap:8px}
.kpi-l .av{color:var(--muted);text-decoration:line-through;opacity:.65}
.kpi-l .fl{color:var(--gold)}
.kpi-l .ap{color:var(--green);font-weight:600;animation:kpiPulse 3s ease-in-out infinite}
.kpi-l:nth-child(2) .ap{animation-delay:.6s}
.kpi-l:nth-child(3) .ap{animation-delay:1.2s}
@keyframes kpiPulse{0%,100%{opacity:.5}50%{opacity:1}}

/* C · une decision sensible en attente de validation */
.valid{border:1px solid var(--line);border-radius:var(--r-sm);padding:var(--e-4);background:var(--bg)}
.valid .vt{font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--gold);margin-bottom:6px}
.valid h4{margin:0 0 5px;font-family:var(--serif);font-weight:600;font-size:var(--t-lg)}
.valid .vd{font-size:var(--t-sm);color:var(--muted);margin:0 0 var(--e-3)}
.valid .vb{display:flex;gap:8px}
.valid .vb span{flex:1;text-align:center;padding:9px;border-radius:var(--r-sm);font-size:var(--t-sm);font-weight:600}
.valid .ok{background:linear-gradient(135deg,var(--gold),var(--gold2));color:#0A211A;animation:validPulse 2.4s ease-in-out infinite}
.valid .mod{border:1px solid var(--ink);color:var(--ink)}
@keyframes validPulse{0%,100%{box-shadow:0 0 0 0 rgba(201,162,39,.55)}50%{box-shadow:0 0 0 7px rgba(201,162,39,0)}}

/* D · montee en competence, barres qui se remplissent */
.skill{margin-bottom:14px}
.skill:last-child{margin-bottom:0}
.skill .lbl{display:block;font-family:var(--mono);font-size:var(--t-xs);letter-spacing:.06em;color:var(--muted);margin-bottom:5px}
.skill .track{height:9px;background:var(--bg);border:1px solid var(--line);border-radius:99px;overflow:hidden}
.skill .fill{display:block;height:100%;width:8%;border-radius:99px;background:linear-gradient(90deg,var(--gold),var(--gold2));animation:remplir 3.6s ease-in-out infinite}
.skill:nth-child(2) .fill{animation-delay:.4s}
.skill:nth-child(3) .fill{animation-delay:.8s}
@keyframes remplir{0%{width:8%}55%,100%{width:var(--w,85%)}}

/* ===================== Bloc Formation ===================== */
.bloc-formation{
  display:grid;grid-template-columns:1.1fr .9fr;gap:var(--e-6);align-items:center;
  margin-top:var(--e-5);padding:var(--e-5);
  border:1px solid var(--gold);border-radius:var(--r-md);
  background:var(--gold-soft);
}
.bloc-formation h3{margin-top:0}
.bloc-formation .lead{color:var(--ink)}
@media(max-width:860px){.bloc-formation{grid-template-columns:1fr}}

/* ===================== Section · pertes invisibles ===================== */
.pertes{display:grid;grid-template-columns:1fr 1fr;gap:var(--e-3);margin:var(--e-4) 0}
.perte{
  position:relative;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r-md);padding:var(--e-4) var(--e-4) var(--e-4) 44px;
  font-size:var(--t-sm);color:var(--muted);line-height:1.5;
  transition:transform var(--d-moyen) var(--courbe),box-shadow var(--d-moyen),border-color var(--d-moyen);
}
.perte::before{content:"\2198";position:absolute;left:var(--e-4);top:var(--e-4);color:var(--gold);font-weight:700}
.perte:hover{
  transform:translateY(-6px);
  box-shadow:0 18px 40px -16px rgba(14,43,34,.3);
  border-color:var(--gold);
}
.pertes-fin{margin-top:var(--e-2);color:var(--ink);font-weight:600}
@media(max-width:760px){.pertes{grid-template-columns:1fr}}

/* ===================== Section · on connait votre terrain ===================== */
.terrain input{position:absolute;opacity:0;width:0;height:0;pointer-events:none}
.terrain-tabs{display:flex;flex-wrap:wrap;gap:8px;margin:var(--e-3) 0 var(--e-4)}
.terrain-tabs label{
  cursor:pointer;padding:9px 16px;border:1px solid var(--line);border-radius:var(--r-pill);
  font-size:var(--t-sm);color:var(--muted);transition:background var(--d-court),border-color var(--d-court),color var(--d-court);
}
.terrain-tabs label:hover{border-color:var(--gold);color:var(--ink)}
.terrain-p{display:none}
#t-hotel:checked~.terrain-tabs label[for="t-hotel"],
#t-camping:checked~.terrain-tabs label[for="t-camping"],
#t-loc:checked~.terrain-tabs label[for="t-loc"]{background:var(--gold);border-color:var(--gold);color:#0A211A;font-weight:600}
#t-hotel:checked~.terrain-panneaux .terrain-p[data-p="hotel"],
#t-camping:checked~.terrain-panneaux .terrain-p[data-p="camping"],
#t-loc:checked~.terrain-panneaux .terrain-p[data-p="loc"]{display:block}
.terrain-carte .tl{padding:11px 0;border-top:1px solid var(--line)}
.terrain-carte .tl:first-child{border-top:none;padding-top:0}
.tl-lbl{display:block;font-family:var(--mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);margin-bottom:4px}
.terrain-carte .tl p{margin:0;font-size:var(--t-sm);color:var(--muted)}
.tl-cite{font-style:italic;color:var(--ink)!important}
.tl-ok{color:var(--green)!important;font-weight:600}

/* ===================== Menu deroulant Offres ===================== */
.menu-offres{position:relative}
.menu-offres > a::after{content:" ▾";font-size:.8em;color:var(--muted)}
.menu-liste{
  position:absolute;top:calc(100% + 6px);left:0;min-width:238px;z-index:60;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:7px;box-shadow:0 14px 34px -14px rgba(14,43,34,.4);
  display:none;
}
.menu-offres:hover .menu-liste,.menu-offres:focus-within .menu-liste{display:block}
.menu-liste a{display:block;padding:9px 11px;border-radius:7px;font-size:var(--t-sm);color:var(--muted)}
.nav-links .menu-liste a::after{content:none;display:none}
.menu-liste a:hover{background:var(--gold-soft);color:var(--ink)}

/* ===================== Hero 2 colonnes (sous-pages) ===================== */
.hero-duo{display:grid;grid-template-columns:1.05fr .95fr;gap:var(--e-6);align-items:center}
.page-standard .hero.hero-duo,.page-standard .hero.hero-duo .kicker{text-align:left}
.hero-duo .lead{margin-left:0;margin-right:0;max-width:none}
.hero-duo .proofline{margin-top:var(--e-4)}
@media(max-width:860px){.hero-duo{grid-template-columns:1fr}}

/* Boutons an1imes aussi sur les sous-pages (.gold/.ghost) */
.btn.gold{box-shadow:0 2px 6px rgba(201,162,39,.3);transition:transform var(--d-court) var(--courbe),box-shadow var(--d-court)}
.btn.gold:hover{transform:translateY(-3px);box-shadow:0 12px 26px -8px rgba(201,162,39,.75)}
.btn.ghost{transition:border-color var(--d-court),color var(--d-court),background var(--d-court)}
.btn.ghost:hover{border-color:var(--gold);color:var(--ink);background:var(--gold-soft)}

/* ===================== Briques de visuels metier ===================== */
.qualif{display:flex;flex-wrap:wrap;gap:6px;margin:var(--e-2) 0}
.qualif span{font-family:var(--mono);font-size:9px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);border:1px solid var(--line);border-radius:5px;padding:2px 7px}
.ligne-avis{display:flex;align-items:center;gap:8px;margin-top:var(--e-3);padding-top:var(--e-3);border-top:1px solid var(--line);font-size:var(--t-sm)}
.ligne-avis .etoiles{color:var(--gold);letter-spacing:1px;flex-shrink:0}
.ligne-avis .txt{flex:1;color:var(--muted);min-width:0}
.ligne-avis .coche{font-family:var(--mono);font-size:var(--t-xs);color:var(--green);font-weight:600;flex-shrink:0}
.alerte{display:flex;align-items:center;gap:7px;margin-top:var(--e-3);padding:9px 11px;border:1px solid var(--gold);border-radius:var(--r-sm);background:var(--gold-soft);font-size:var(--t-sm);color:var(--ink);animation:alertePulse 2.8s ease-in-out infinite}
@keyframes alertePulse{0%,100%{box-shadow:0 0 0 0 rgba(201,162,39,.4)}50%{box-shadow:0 0 0 5px rgba(201,162,39,0)}}
.rooms{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.rooms li{display:flex;align-items:center;gap:10px;padding:9px 11px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--bg);font-size:var(--t-sm)}
.rooms .num{font-family:var(--mono);font-weight:600;color:var(--gold);flex-shrink:0}
.rooms .txt{flex:1;color:var(--muted)}
.rooms .prio{font-family:var(--mono);font-size:var(--t-xs);color:var(--muted);flex-shrink:0}
.rooms .prio-h{color:#0A211A;background:var(--gold);padding:2px 7px;border-radius:5px;font-weight:600}
.prog{list-style:none;margin:0 0 var(--e-3);padding:0;display:flex;flex-direction:column;gap:8px}
.prog li{display:flex;gap:10px;font-size:var(--t-sm);color:var(--muted);align-items:baseline}
.prog .h{font-family:var(--mono);color:var(--gold);flex-shrink:0;width:40px}
.planning{display:grid;grid-template-columns:auto repeat(5,1fr);gap:4px;font-family:var(--mono);font-size:9px;align-items:center}
.planning .ph{color:var(--muted);text-align:center}
.planning .pn{color:var(--muted);padding-right:6px;white-space:nowrap}
.planning .pc{height:17px;border-radius:3px;background:var(--line)}
.planning .pc.on{background:linear-gradient(135deg,var(--gold),var(--gold2))}
.planning .pc.alert{background:transparent;border:1.5px solid var(--gold);animation:alertePulse 2.8s ease-in-out infinite}
.alerte::before{content:"!";font-family:var(--mono);font-weight:700;color:#0A211A;background:var(--gold);width:17px;height:17px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;font-size:11px}
.hero-viz .viz{box-shadow:0 14px 40px -20px rgba(14,43,34,.32)}
.vspace{margin-top:12px}