/* ============================================================
   MOOD — la feuille de style du site public        11/09/2026
   ------------------------------------------------------------
   REPÈRE DE VERSION : 2026-09-18-d
   Ce numéro doit être celui de MOOD_CONFIG.VERSION. Les pages le comparent au
   chargement : si cette feuille reste en arrière lors d'un envoi vers GitHub,
   le décalage est dit à l'écran au lieu de produire silencieusement une page
   au mauvais design.

   ------------------------------------------------------------
   POURQUOI CETTE FEUILLE EXISTE

   Les six pages publiques portaient chacune sa propre feuille dans la page —
   près de 1 300 lignes au total, six copies du même bouton, six définitions de
   la même carte, qui avaient déjà commencé à diverger (deux tailles pour le
   même titre de carte, deux ombres pour la même boîte). Une retouche de design
   se faisait six fois, ou pas du tout.

   ------------------------------------------------------------
   LE LANGAGE, arrêté le 11/09 après le test utilisateur

   Fond blanc, bandes gris-bleu FROID. Le crème et le papier restent — mais
   pour ce qu'ils désignent vraiment : l'écran du visiteur, les stickers, les
   captures du produit. Ils ne sont plus le fond du site.

   Titres en Outfit 800, très serrés, avec UN mot en magenta. Fraunces, le
   serif, ne survit que là où l'on montre le produit lui-même : c'est la marque
   là où le client la touche, pas la chrome autour.

   UN SEUL accent — le magenta. Le teal dit « validé », le soleil « étoile ».
   Boutons en pilule. Cartes teintées SANS bordure : une bordure beige sur un
   fond crème, c'était le cadre de trop. Sur-titres en capitales espacées.

   ------------------------------------------------------------
   COMPATIBILITÉ

   Les anciens noms de variables (--ink-soft, --line) sont conservés comme
   synonymes des nouveaux : les pages qui les emploient encore continuent de
   fonctionner, et l'on migre sans tout casser d'un coup.
   ============================================================ */

:root{
  /* Le repère de version, lisible depuis le JS :
     getComputedStyle(document.documentElement).getPropertyValue('--mood-css')
     C'est ce qui permet de dire « la feuille de style n'est pas arrivée »
     au lieu d'afficher silencieusement une page au mauvais design. */
  --mood-css:"2026-09-18-d";

  /* l'encre est froide, pas navy : le navy reste une couleur de marque,
     pas la couleur du texte courant */
  --ink:#0E1626;
  --gris:#5B6577;
  --gris-clair:#8A93A3;

  --bande:#F2F4F9;          /* le gris-bleu des sections */
  --bande2:#EAEEF6;
  --trait:#E2E7F0;

  --magenta:#E0356E;
  --magenta-pale:#FDF0F5;
  --magenta-fonce:#C42A5C;

  --navy:#16233F;           /* les bandes sombres, et la marque */
  --teal:#0E6E6B;
  --teal-soft:#E9F3F2;
  --vert:#0E8A6B;
  --soleil:#F5C542;

  /* Réservés au produit : l'écran du visiteur, les stickers, les captures.
     Ce ne sont plus des fonds de page. */
  --cream:#F4EEE2;
  --paper:#ECE4D4;

  /* synonymes, pour les pages pas encore migrées */
  --ink-soft:var(--gris);
  --line:var(--trait);
}

*{box-sizing:border-box;margin:0;padding:0}
html{overflow-x:hidden;scroll-behavior:smooth}
body{max-width:100%;background:#fff;color:var(--ink);
     font-family:'Outfit',system-ui,-apple-system,sans-serif;-webkit-font-smoothing:antialiased;
     font-size:16px;line-height:1.6}
a{color:inherit}
img,svg{max-width:100%;height:auto}

/* ---------- la trame ---------- */
.wrap{max-width:1120px;margin:0 auto;padding:0 24px}
@media(min-width:900px){.wrap{padding:0 40px}}
.blanc{background:#fff;padding:72px 0}
.bande{background:var(--bande);padding:72px 0}
.sombre{background:var(--navy);color:#fff;padding:72px 0}
@media(max-width:820px){.blanc,.bande,.sombre{padding:52px 0}}

/* ---------- la typographie ---------- */
/* Le poids et le resserrement font tout le travail. Un titre de 54 px en 800
   avec -.035em d'approche se tient tout seul : il n'a besoin ni d'ombre, ni de
   dégradé, ni d'un serif pour avoir l'air d'un titre. */
h1{font-weight:800;font-size:clamp(34px,5.2vw,54px);line-height:1.04;letter-spacing:-.035em;
   color:var(--ink);text-wrap:balance}
h1 span,h1 em{font-style:normal;color:var(--magenta)}
h2{font-weight:800;font-size:clamp(26px,3.4vw,38px);line-height:1.1;letter-spacing:-.03em;
   color:var(--ink);text-wrap:balance}
h2 span,h2 em{font-style:normal;color:var(--magenta)}
h3{font-weight:700;font-size:18px;letter-spacing:-.02em;color:var(--ink);line-height:1.28}
.sombre h1,.sombre h2,.sombre h3{color:#fff}

/* le sur-titre : une ligne de capitales espacées, en magenta, qui annonce la
   section avant son titre. C'est ce qui donne son rythme à une page longue. */
.sur{font-size:11.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
     color:var(--magenta);margin:0 0 14px}
.sombre .sur{color:#FF9FC0}

.plomb,.sub,.lead,.deploy-lead{font-size:17px;line-height:1.55;color:var(--gris);max-width:62ch}
.plomb b,.sub b,.lead b{color:var(--ink);font-weight:600}
.sombre .plomb,.sombre .sub,.sombre .lead{color:#C9D2E4}
@media(max-width:820px){.plomb,.sub,.lead,.deploy-lead{font-size:15.5px}}
/* le point magenta du logotype */
.hdot{color:var(--magenta);font-style:normal;font-size:.6em;position:relative;top:-.05em;margin-left:.04em}

/* ---------- la barre de navigation ---------- */
nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.93);backdrop-filter:blur(10px);
    border-bottom:1px solid var(--trait)}
/* La barre court plus large que la colonne de texte : à 1120 px elle manquait
   de quarante pixels pour tenir sur une ligne, et se repliait sur tous les
   écrans, y compris les plus grands. Le texte, lui, reste à 1120. */
nav .wrap{max-width:1280px}
.navi{display:flex;align-items:center;justify-content:space-between;gap:10px 16px;
      flex-wrap:wrap;padding-top:13px;padding-bottom:13px}
.logo{font-weight:800;font-size:22px;letter-spacing:-.03em;color:var(--ink);text-decoration:none}
.logo b,.logo span{color:var(--magenta);font-weight:800}
.navlink,.navtarifs{font-weight:600;color:var(--gris);text-decoration:none;
         border-radius:99px;white-space:nowrap}
.navtarifs:hover,.navlink:hover{background:var(--bande);color:var(--ink)}
/* Cinq liens de section, un sélecteur de langue et deux portes : la barre est
   chargée. À 14 px avec 10 px de marge intérieure elle débordait de 90 px sur
   un écran de 1280 et se repliait sur trois lignes. On resserre — et en dessous
   de 1180 px elle se replie proprement, centrée. */
/* Deux pages emploient .nlinks au lieu de .nright pour le même groupe de liens :
   les deux sont traités ici plutôt que de renommer le HTML de six pages. */
.nlinks{display:flex;align-items:center;gap:7px;flex-wrap:wrap;justify-content:flex-end}
.nlinks a{text-decoration:none;color:var(--gris);font-weight:600;font-size:13.5px;
          padding:8px 7px;border-radius:99px;white-space:nowrap}
.nlinks a:hover{background:var(--bande);color:var(--ink)}
.nlinks a.navinscr,.nlinks a.gocta{background:var(--magenta);color:#fff;font-weight:700;padding:9px 16px}
.nlinks a.navinscr:hover,.nlinks a.gocta:hover{background:var(--magenta-fonce);color:#fff}
.nright{display:flex;align-items:center;justify-content:flex-end;gap:7px;flex-wrap:wrap}
.nright a{text-decoration:none;color:var(--gris);font-weight:600;white-space:nowrap;border-radius:99px}
.nright a:hover{color:var(--ink)}
.nright a,.navlink,.navtarifs{font-size:13.5px;padding:8px 7px}
.nright a:hover{color:var(--ink)}
/* S'inscrire est la porte principale : elle se voit. Se connecter reste un lien
   discret — on ne cherche pas longtemps une porte qu'on a déjà franchie. */
.nright a.navinscr{background:var(--magenta);color:#fff;font-weight:700;padding:9px 16px}
.nright a.navinscr:hover{background:var(--magenta-fonce);color:#fff}
#langBtn{flex:0 0 auto;width:auto;font-family:inherit;font-size:12.5px;font-weight:600;
         color:var(--gris);background:#fff;border:1.5px solid var(--trait);border-radius:99px;
         padding:6px 7px;cursor:pointer}
@media(max-width:560px){
  .navi{row-gap:9px;justify-content:center;flex-wrap:wrap}
  .nright,.nlinks{justify-content:center;gap:6px}
  .nlinks a{font-size:12.5px;padding:7px 9px}
  .nright a{font-size:12.5px;padding:7px 9px}
  .logo{font-size:19px}
  #langBtn{padding:5px 8px;font-size:12px}
}
@media(max-width:340px){
  .nright a{font-size:11.5px;padding:6px 8px}
  #langBtn{padding:4px 6px;font-size:11px}
}

/* ---------- les boutons ---------- */
/* Tous en pilule, tous en Outfit 700. L'ombre colorée sous le bouton principal
   a disparu : elle datait d'une page crème, où il fallait décoller le bouton du
   fond. Sur blanc, l'aplat suffit. */
.cta,.ghostcta,.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
     font-family:inherit;font-weight:700;text-decoration:none;border-radius:99px;cursor:pointer;
     letter-spacing:-.01em;border:none;transition:filter .12s,transform .12s}
.cta{font-size:16px;color:#fff;background:var(--magenta);padding:16px 30px}
.cta:hover{filter:brightness(1.07);transform:translateY(-1px)}
.ghostcta{font-size:15px;color:var(--ink);background:#fff;padding:14px 26px;
          box-shadow:inset 0 0 0 1.5px var(--trait)}
.ghostcta:hover{box-shadow:inset 0 0 0 1.5px var(--ink)}
.sombre .ghostcta{background:transparent;color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.34)}
.sombre .ghostcta:hover{box-shadow:inset 0 0 0 1.5px #fff}
.go{width:100%;border:none;cursor:pointer;font-family:inherit;font-size:16px;font-weight:700;
    color:#fff;background:var(--magenta);padding:16px;border-radius:99px;margin-top:20px;
    letter-spacing:-.01em}
.go:hover:not(:disabled){filter:brightness(1.07)}
.go:disabled{background:#C9D2E2;cursor:default}
.ghost{width:100%;background:#fff;cursor:pointer;font-family:inherit;font-size:14px;font-weight:700;
       color:var(--ink);padding:13px;border-radius:99px;margin-top:8px;border:none;
       box-shadow:inset 0 0 0 1.5px var(--trait)}
.ghost:hover{box-shadow:inset 0 0 0 1.5px var(--ink)}

/* ---------- la ligne de coches sous l'appel à l'action ---------- */
.coches{display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:22px;list-style:none}
.coches li{display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600;color:var(--gris)}
.coches .ok{width:19px;height:19px;flex:none;border-radius:50%;background:#DFF3EB;color:var(--vert);
            display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800}
.sombre .coches li{color:#C9D2E4}

/* ---------- les cartes ---------- */
/* Une carte est un aplat, pas un empilement de cadres. Sur fond blanc elle est
   gris-bleu ; sur fond gris-bleu elle est blanche. Jamais de bordure. */
.carte,.arg,.deploy-card{background:var(--bande);border-radius:18px;padding:22px 24px}
.bande .carte,.bande .arg,.bande .deploy-card{background:#fff}
.sombre .carte,.sombre .arg,.sombre .deploy-card{background:rgba(255,255,255,.07);color:#fff}
.arg,.deploy-card{display:flex;gap:16px;align-items:flex-start}
.arg svg,.deploy-card svg{width:32px;height:32px;flex:none;margin-top:2px}
.arg h3,.deploy-card h3{margin-bottom:5px}
.arg p,.deploy-card p{font-size:14px;color:var(--gris);line-height:1.6}
.sombre .arg p,.sombre .deploy-card p{color:#C9D2E4}
.args,.deploy-grid{display:grid;gap:16px;align-items:stretch}
.args{grid-template-columns:1fr 1fr}
.deploy-grid{grid-template-columns:repeat(3,1fr)}
@media(max-width:820px){.args,.deploy-grid{grid-template-columns:1fr}}
.deploy{margin:44px 0}

/* la pastille d'un secteur, d'un lieu, d'un usage */
.chip{display:flex;align-items:center;gap:10px;background:var(--bande);border-radius:14px;
      padding:12px 14px}
.bande .chip{background:#fff}
.chip svg{width:26px;height:26px;flex:none}
.chip span{font-size:13.5px;font-weight:600;color:var(--ink);line-height:1.2}

.badge{display:flex;align-items:center;gap:9px;background:var(--bande);border-radius:13px;
       padding:11px 15px}
.bande .badge{background:#fff}
.badge b{font-size:14px;color:var(--ink);display:block;font-weight:700}
.badge small{font-size:11.5px;color:var(--gris)}

.panel{background:#fff;color:var(--ink);border-radius:22px;padding:24px}
.panel h3{font-size:21px;font-weight:800;letter-spacing:-.02em;margin-bottom:4px}
.panel .h3sub{font-size:13.5px;color:var(--gris);margin-bottom:18px}

/* ---------- les formulaires ---------- */
label{display:block;font-size:12.5px;font-weight:700;color:var(--ink);margin:14px 0 6px}
input,select,textarea{width:100%;font-family:inherit;font-size:15px;color:var(--ink);
       border:1.5px solid var(--trait);border-radius:12px;padding:13px 14px;background:#fff}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--ink)}
.err{background:#FFF1F5;color:#9B2050;border-radius:12px;padding:13px 15px;font-size:13.5px;
     margin-top:12px;display:none;line-height:1.55}
.gar{display:flex;gap:10px;align-items:flex-start;background:var(--magenta-pale);border-radius:12px;
     padding:12px 14px;font-size:13px;line-height:1.5;color:var(--ink);margin-top:14px}
.gbtn{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;font-family:inherit;
      font-size:14px;font-weight:700;background:#fff;color:var(--ink);border:1.5px solid var(--trait);
      border-radius:99px;padding:12px 14px;cursor:pointer;margin-top:9px}
.gbtn:hover{border-color:var(--ink)}
.gsep{display:flex;align-items:center;gap:10px;color:var(--gris-clair);font-size:11.5px;
      font-weight:600;margin-top:14px}
.gsep::before,.gsep::after{content:'';flex:1;height:1px;background:var(--trait)}

/* ---------- le tableau de bord miniature ---------- */
/* Il montre le produit : il garde donc ses couleurs de produit. */
.mrow{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--trait);
      font-size:12.5px}
.mrow:last-child{border-bottom:none}
.mrow .mn{flex:none;width:118px;font-weight:600;color:var(--ink)}
.mrow .mv{flex:none;width:64px;text-align:right;font-weight:700;color:var(--ink);
          font-variant-numeric:tabular-nums}
.mrow .mv small{font-weight:500;color:var(--gris)}
.mbar{flex:1;height:8px;border-radius:99px;background:var(--bande2);overflow:hidden}
.mbar i{display:block;height:100%;border-radius:99px;background:var(--vert);width:var(--w);
        transition:width 1.1s cubic-bezier(.25,.7,.3,1)}
.mbar i.warn{background:#C98A2C}
.mbar i.bad{background:#C4573F}
.mverb{margin-top:18px;display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media(max-width:560px){.mverb{grid-template-columns:1fr}}
.mq{background:var(--bande);border-radius:12px;padding:11px 13px}
.mq p{font-size:12.5px;font-style:italic;color:var(--ink);line-height:1.45}
.mq .mm{font-size:11px;color:var(--gris);margin-top:4px;font-style:normal}
.mq .mm b{color:var(--teal);font-weight:700}

/* ---------- la foire aux questions ---------- */
.faq{padding:56px 0 24px}
.faq h2{text-align:center;margin-bottom:26px}
.faq details{background:var(--bande);border-radius:16px;margin-bottom:10px;overflow:hidden}
.faq summary{cursor:pointer;list-style:none;padding:17px 48px 17px 22px;font-weight:700;
             font-size:15.5px;color:var(--ink);position:relative;letter-spacing:-.01em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';position:absolute;right:20px;top:50%;transform:translateY(-50%);
                    font-size:22px;font-weight:400;color:var(--magenta)}
.faq details[open] summary::after{content:'–'}
.faq .fa{padding:0 22px 18px;font-size:14.5px;line-height:1.7;color:var(--gris)}
.faq .fa a{color:var(--teal);font-weight:600}
.faq .fguar{background:var(--teal-soft);border-radius:16px;padding:16px 20px;margin-top:16px;
            font-size:14.5px;line-height:1.6;text-align:center;color:#0B4F4D}
.faq .fguar::before{content:'★ ';color:var(--soleil)}
.faq .fguar b{color:var(--teal)}

/* ---------- le pied de page ---------- */
footer{background:var(--ink);color:#8A93A3;padding:44px 0 52px;text-align:center;font-size:13px}
footer a{color:#C9D2E2;text-decoration:none}
footer a:hover{color:#fff}
footer .logo{font-size:19px;color:#fff;display:inline-block;margin-bottom:10px}
.f-note{font-size:12.5px;color:#8A93A3;margin:10px 0 0;text-align:center}

/* ---------- utilitaires ---------- */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  *{scroll-behavior:auto}
}
/* Le fondu enchaîné. Les diapositives étaient permutées en display:none /
   display:block — or « display » ne s'anime pas : le carrousel sautait d'une
   photo à l'autre, sans transition, depuis toujours. Ce n'était pas une
   régression, c'était l'état d'origine.

   On les empile dans la MÊME cellule de grille plutôt que de les positionner en
   absolu : la boîte prend alors la hauteur de la plus haute, sans qu'on ait à
   lui imposer un rapport de forme — ce qui compte, puisque les trois carrousels
   du site n'ont pas les mêmes images.

   Le JS ne change pas : il continue de poser et retirer la classe « on ». */
.cslide{grid-area:1/1;display:none;opacity:0;pointer-events:none;transition:opacity .8s ease}
/* « pret » : la diapositive entre dans la pile, encore transparente. Tant
   qu'elle n'y est pas, elle n'est pas mise en page — et son image ne se
   télécharge donc pas. Le JS n'y met que la photo montrée et la suivante. */
.cslide.pret,.cslide.on{display:block}
.cslide.on{opacity:1;pointer-events:auto}
@media(prefers-reduced-motion:reduce){.cslide{transition:none}}
/* Un tableau, un bloc de code, un schéma : il défile dans SA boîte, jamais la
   page entière. */
.zone{overflow-x:auto}

/* Le bandeau de décalage de version, posé par mood-version.js. */
.vban{background:var(--magenta);color:#fff;font-size:13px;font-weight:600;text-align:center;
      padding:10px 16px;line-height:1.45}
.vban b{font-weight:800}

/* ============================================================
   LES COMPOSANTS PARTAGÉS PAR PLUSIEURS PAGES
   ------------------------------------------------------------
   Chacun de ceux-ci existait en trois ou quatre exemplaires, un par page, avec
   des écarts déjà installés : la maquette du tableau de bord avait deux tailles
   de titre selon la page, le bloc de création deux ombres, le carrousel deux
   tailles de flèche. Ils vivent ici, une fois.
   ============================================================ */

/* ---------- en-tête de page sectorielle ---------- */
.hero{display:grid;grid-template-columns:1.05fr .95fr;gap:44px;padding-top:48px;padding-bottom:20px;
      align-items:center}
.hero-left{display:flex;flex-direction:column;justify-content:center}
.hero-right{display:flex;flex-direction:column;justify-content:flex-end}
.hnote{font-size:13px;color:var(--gris-clair);margin-top:14px}
.kicker{display:inline-block;background:var(--magenta-pale);color:var(--magenta);font-size:11.5px;
        font-weight:700;letter-spacing:.12em;text-transform:uppercase;border-radius:99px;
        padding:6px 15px;margin:2px 0 16px}
.ctas{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
.hphoto{border-radius:24px;overflow:hidden;box-shadow:0 40px 90px -46px rgba(14,22,38,.5)}
.hphoto img{width:100%;height:auto;display:block}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin:26px 0 6px}
.lieux-h{font-size:14px;color:var(--gris);text-align:center;margin-bottom:14px}
.lieux-h b{color:var(--ink);font-weight:700}
.lieux-list{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;max-width:900px;margin:0 auto}
.lieux-list .chip{white-space:nowrap;border-radius:99px;padding:9px 16px 9px 12px;font-size:13px}
.lieux-list .chip svg{width:19px;height:19px}
@media(max-width:820px){.hero{grid-template-columns:1fr;gap:26px;padding-top:32px}}

/* ---------- bandeau sombre à trois pas ---------- */
.band{background:var(--navy);color:#fff;margin-top:44px;padding:56px 0 50px}
.band h2{color:#fff}
.bsub{color:#C9D2E4;font-size:17px;margin-top:12px;line-height:1.55;max-width:62ch}
.bsteps{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;margin-top:26px}
.bstep{background:rgba(255,255,255,.07);border-radius:16px;padding:18px;font-size:14px;line-height:1.5;
       color:#C9D2E4}
.bstep svg{width:26px;height:26px;display:block;margin-bottom:10px}
.bstep b{display:block;color:#fff;margin-bottom:5px;font-size:15px;font-weight:700}
@media(max-width:820px){.bsteps{grid-template-columns:1fr}.bsub{font-size:15.5px}}

/* ---------- le bloc tarif d'une page sectorielle ---------- */
.tarif{background:var(--bande);border-radius:20px;padding:26px 28px;margin-bottom:44px}
.tarif h2{font-size:24px;margin-bottom:12px}
.tarif p{font-size:15px;line-height:1.7;color:var(--gris)}
.tarif b{color:var(--teal)}
.tline{margin-top:18px;display:flex;gap:12px;flex-wrap:wrap}

/* ---------- les accroches par lieu ---------- */
.acc{margin-top:14px;background:var(--teal-soft);border-radius:20px;padding:22px 24px}
.acc-h{font-size:19px;font-weight:800;letter-spacing:-.02em;color:var(--teal);margin-bottom:5px}
.acc-s{font-size:13.5px;color:#4A7A78;margin-bottom:16px}
.acc-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px 26px}
.acc-grid div{font-size:14px;color:#0B4F4D;line-height:1.5;display:grid;
              grid-template-columns:136px 1fr;gap:8px}
.acc-grid b{color:var(--teal);font-weight:700}
.acc-grid i{font-style:italic;color:#4A7A78}
@media(max-width:900px){.acc-grid{grid-template-columns:1fr}.acc-grid div{grid-template-columns:1fr;gap:0}}

/* ---------- la maquette du tableau de bord ---------- */
/* Elle montre le produit : elle garde donc ses couleurs de produit, mais sur
   un châssis neutre. */
.mock{background:#fff;border-radius:18px;overflow:hidden;margin-top:24px;color:var(--ink);
      box-shadow:0 34px 74px -44px rgba(14,22,38,.6)}
.mockbar{background:var(--bande);display:flex;align-items:center;gap:6px;padding:10px 14px}
.mockbar i{width:9px;height:9px;border-radius:50%;background:#CBD3E0}
.mockbar em{font-style:normal;font-size:11.5px;color:var(--gris-clair);margin-left:8px}
.mockin{padding:20px 22px 22px}
.mhead{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.mhead h3{font-size:21px;font-weight:800;letter-spacing:-.02em}
.mhead .mdate{font-size:12.5px;color:var(--gris);margin-top:2px}
.mlive{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;font-weight:700;color:var(--teal);
       background:var(--teal-soft);border-radius:99px;padding:5px 12px;white-space:nowrap}
.mlive i{width:7px;height:7px;border-radius:50%;background:var(--magenta)}
@media(prefers-reduced-motion:no-preference){.mlive i{animation:mpulse 1.6s ease infinite}}
@keyframes mpulse{0%,100%{opacity:1}50%{opacity:.25}}
.malert{background:var(--magenta-pale);color:#9B2050;border-radius:12px;padding:10px 14px;
        font-size:12.5px;margin-top:13px}
.malert b{font-weight:700}
.mkpis{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:13px}
.mkpi{background:var(--bande);border-radius:12px;padding:12px 14px}
.mkpi.on{background:var(--teal-soft)}
.mkpi .l{font-size:11.5px;color:var(--gris)}
.mkpi .n{font-size:26px;font-weight:800;letter-spacing:-.03em;color:var(--ink);margin-top:3px;
         font-variant-numeric:tabular-nums}
.mkpi.on .n{color:var(--teal)}
.mkpi .s{font-size:11px;color:var(--gris);margin-top:3px}
.mkpi .up{color:var(--teal);font-weight:700}
.mcols{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:18px}
.mcol h4{font-size:13px;font-weight:700;color:var(--ink);padding-bottom:7px;
         border-bottom:1px solid var(--trait)}
.mock.mprep .mbar i{width:0}
.mock.mprep.mgo .mbar i{width:var(--w)}
@media(prefers-reduced-motion:reduce){.mock.mprep .mbar i{width:var(--w);transition:none}}
@media(max-width:700px){
  .mkpis{grid-template-columns:1fr}
  .mcols{grid-template-columns:1fr}
  .mrow .mn{width:96px}
}

/* ---------- le bloc de création d'un QR code de test ---------- */
.create{background:var(--navy);color:#fff;padding:64px 0;margin-top:44px}
.create h2{text-align:center;color:#fff}
.create .ch2{text-align:left;margin:0 0 20px}
.create .lead{text-align:center;color:#C9D2E4;margin:14px auto 38px;max-width:56ch}
.duo{display:grid;grid-template-columns:.8fr 1.2fr;gap:28px;align-items:center}
.create .panel{position:relative;overflow:visible}
/* le sticker : c'est le produit imprimé, il garde le crème et le serif */
.sticker{background:#fff;border-radius:20px;padding:26px 22px 20px;text-align:center;max-width:300px;
         margin:0 auto;transform:rotate(-2deg);box-shadow:0 30px 70px -28px rgba(0,0,0,.6)}
.sticker .t{font-family:'Fraunces',Georgia,serif;font-size:26px;font-weight:600;color:var(--navy);
            line-height:1.15;margin-bottom:14px}
.sticker .tag{font-size:12.5px;font-weight:600;color:var(--magenta);margin-top:13px}
.sticker .who{font-size:10px;color:var(--gris-clair);margin-top:7px}
.qrout{background:#fff;border-radius:16px;padding:18px 16px 12px;text-align:center;max-width:260px;
       margin:14px auto}
.qrout .s{font-size:18px;font-weight:800;letter-spacing:-.02em;color:var(--ink);margin-bottom:10px}
.steps{font-size:13.5px;line-height:1.65;color:var(--gris);margin-top:14px}
.done{display:none}
.ghost-panel{width:100%;background:#fff;cursor:pointer;font-family:inherit;font-size:14px;
             font-weight:700;color:var(--ink);padding:13px;border-radius:99px;margin-top:8px;border:none;
             box-shadow:inset 0 0 0 1.5px var(--trait)}
.ghost-panel:hover{box-shadow:inset 0 0 0 1.5px var(--ink)}
/* La bulle passe à GAUCHE du robot et l'ensemble se cale au-dessus du bord :
   dessous, elle retombait de 65 px dans le panneau et masquait la première ligne. */
.mascot{position:absolute;top:-40px;right:16px;display:flex;flex-direction:row-reverse;align-items:center;
        gap:8px;text-decoration:none;transform:rotate(6deg);transition:transform .15s;z-index:6}
.mascot:hover{transform:rotate(0deg) scale(1.06)}
.m-badge{width:62px;height:62px;background:#fff;border-radius:50%;display:flex;align-items:center;
         justify-content:center;box-shadow:0 12px 26px -10px rgba(0,0,0,.5)}
.m-bubble{background:var(--magenta);color:#fff;font-size:11px;font-weight:800;padding:5px 12px;
          border-radius:99px;white-space:nowrap}
@media(max-width:820px){
  .duo{grid-template-columns:1fr}
  .duo > *:first-child{order:2;margin-top:26px;justify-self:center}
  .mascot{top:-34px;right:10px;gap:6px}
  .m-badge{width:56px;height:56px}
}

/* ---------- le carrousel de scènes ---------- */
.caro{position:relative;display:grid;border-radius:24px;overflow:hidden;background:var(--bande2);
      box-shadow:0 40px 80px -46px rgba(14,22,38,.5)}
/* Les flèches étaient deux pastilles blanches à grosse ombre, posées au tiers
   de la hauteur, avec les caractères « ‹ » et « › » — dont le dessin change
   d'une police à l'autre. Elles se voyaient plus que la photo.

   Maintenant : un aplat sombre translucide, un chevron dessiné, centré pour de
   bon. Sur un appareil à souris elles s'effacent tant qu'on ne survole pas
   l'image ; au doigt, elles restent visibles — on ne survole rien. */
.cnav{position:absolute;top:50%;transform:translateY(-50%);width:36px;height:36px;border-radius:50%;
      border:none;background:rgba(14,22,38,.42);backdrop-filter:blur(6px);color:#fff;
      cursor:pointer;z-index:2;display:flex;align-items:center;justify-content:center;padding:0;
      transition:background .16s, opacity .22s}
.cnav svg{width:19px;height:19px;display:block}
.cnav:hover{background:rgba(14,22,38,.68)}
.cnav:focus-visible{outline:2px solid #fff;outline-offset:2px}
@media(hover:hover){
  .cnav{opacity:0}
  .caro:hover .cnav,.cnav:focus-visible{opacity:1}
}
.cprev{left:12px}
.cnext{right:12px}
.cdots{display:flex;justify-content:center;gap:8px;margin-top:12px}
.cdots i{width:8px;height:8px;border-radius:50%;background:#C9D2E2;cursor:pointer}
.cdots i.on{background:var(--magenta)}

/* apparition au défilement — le JS pose .rv ; sans JS tout reste visible */
.rv{opacity:0;transform:translateY(20px);transition:opacity .65s ease,transform .65s ease}
.rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}}

.navactive{color:var(--magenta) !important;font-weight:800}

/* ---------- l'affiche plein écran à l'arrivée ---------- */
/* Trois pages l'utilisent. Elle vivait dans deux d'entre elles et manquait à la
   troisième : c'est très exactement ce que cette feuille commune évite. */
#splash{position:fixed;inset:0;z-index:999;display:flex;align-items:center;justify-content:center;
        padding:22px;cursor:pointer;opacity:0;transition:opacity .5s ease;
        background:radial-gradient(120% 90% at 50% 38%, #1d2d51 0%, var(--navy) 62%, #101a30 100%)}
/* Sans cette règle, display:flex écrase l'attribut hidden et l'overlay continue
   de capter les clics une fois disparu. */
#splash[hidden]{display:none !important}
#splash.on{opacity:1}
#splash.out{opacity:0;pointer-events:none}
#splash img{max-width:min(92vw,600px);max-height:88vh;width:auto;height:auto;border-radius:8px;
            background:#fff;transform:scale(.985);
            transition:transform .6s cubic-bezier(.2,.7,.3,1);
            box-shadow:0 40px 90px -30px rgba(0,0,0,.8),0 0 0 1px rgba(255,255,255,.09)}
#splash.on img{transform:scale(1)}
#splash .skip{position:absolute;bottom:20px;left:0;right:0;color:rgba(255,255,255,.72);font-size:12.5px;
              font-weight:600;letter-spacing:.02em;display:flex;align-items:center;justify-content:center;
              flex-wrap:wrap;gap:6px 10px;padding:0 20px;text-align:center}
#splash .skip u{display:block;width:74px;height:3px;border-radius:99px;background:rgba(255,255,255,.24);
                overflow:hidden;text-decoration:none}
#splash .skip u i{display:block;height:100%;width:100%;background:var(--magenta);
                  transform-origin:left center;transform:scaleX(0)}
#splash.on .skip u i{transition:transform var(--dur,5s) linear;transform:scaleX(1)}
body.splashing{overflow:hidden}
@media(max-width:520px){#splash{padding:14px}#splash .skip{font-size:12px}#splash .skip span{width:100%}}
@media(prefers-reduced-motion:reduce){
  #splash img,#splash.on img{transform:none;transition:none}
  #splash.on .skip u i{transition:none;transform:scaleX(1)}
}
@media print{#splash{display:none !important}}

/* Le bandeau qui annonce un fichier resté en arrière — posé par mood-version.js. */
.vban{background:var(--magenta);color:#fff;font-size:13.5px;font-weight:600;text-align:center;
      padding:11px 18px;line-height:1.45;position:relative;z-index:60}
.vban b{font-weight:800}
.vban code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px;
           background:rgba(255,255,255,.2);padding:1px 6px;border-radius:5px}

/* ============================================================
   LES PAGES DE TEXTE — mentions légales, CGV, confidentialité
   ------------------------------------------------------------
   Les trois portaient exactement la même feuille, à deux règles près. Elles la
   partagent maintenant.
   ============================================================ */
.texte .wrap,.wrap.texte{max-width:840px}
.updated{font-size:13px;color:var(--gris-clair);margin-top:10px}
.card{background:var(--bande);border-radius:18px;padding:26px 28px;margin-top:22px}
.card h2{font-size:21px;font-weight:800;letter-spacing:-.02em;color:var(--ink);margin-bottom:12px}
.card p,.card li{font-size:15px;line-height:1.75;color:var(--gris)}
.card p{margin-bottom:11px}
.card p:last-child{margin-bottom:0}
.card ul{margin:6px 0 11px 20px}
.card b{color:var(--ink)}
.card a{color:var(--teal);font-weight:600}
/* le chapeau : ce qu'il faut retenir avant d'entrer dans le détail */
.lead-encadre,.texte .lead{font-size:15.5px;line-height:1.7;color:#0B4F4D;margin-top:18px;
                           background:var(--teal-soft);border-radius:16px;padding:18px 20px;max-width:none}
.lead-encadre b,.texte .lead b{color:var(--teal)}
/* un point à compléter, visible sans être une alerte */
.todo{background:#FFF8EC;border-left:3px solid #C98A2C;border-radius:0 12px 12px 0;padding:11px 15px;
      font-size:13.5px;color:#7A5A1E;margin:10px 0;line-height:1.55}