/* =====================================================================
   Orotech Diffusion Cloud — système visuel
   Couleurs tirées du logo Orotech : bleu nuit, lagon, turquoise, écume, marine.
   L'élément fort : les écrans dessinés comme des écrans (tuiles 16:9).
   ===================================================================== */
@font-face{font-family:"Manrope";font-style:normal;font-display:swap;font-weight:200 800;
  src:url("../polices/manrope-latin-wght-normal.woff2") format("woff2-variations");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Manrope";font-style:normal;font-display:swap;font-weight:200 800;
  src:url("../polices/manrope-latin-ext-wght-normal.woff2") format("woff2-variations");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  --nuit:#0f1128; --nuit-2:#0b0d20; --abysse:#151938; --abysse-2:#1b2046; --abysse-3:#232a58;
  --trait:rgba(150,180,225,.13); --trait-2:rgba(150,180,225,.22);
  --texte:#e8f0f6; --texte-2:#aab6cf; --texte-3:#7c88a6;
  --lagon:#12a8c9; --lagon-2:#0f90ad; --turquoise:#3fb8c0; --ecume:#55b894; --marine:#134069;
  --ambre:#f0a23b; --corail:#e5566b;
  --ok:#3fc189; --ok-fond:rgba(63,193,137,.13);
  --att:#f0a23b; --att-fond:rgba(240,162,59,.13);
  --err:#ec6a7d; --err-fond:rgba(229,86,107,.14);
  --neutre-fond:rgba(150,170,210,.12);
  --r-ctrl:10px; --r-panneau:16px;
  --ombre:0 24px 60px rgba(2,4,18,.5);
  --largeur-nav:252px;
}
*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;color-scheme:dark}
body{font-family:"Manrope",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;font-size:14.5px;line-height:1.5;
  color:var(--texte);background:var(--nuit);min-height:100vh;font-feature-settings:"ss01","cv11"}
a{color:var(--lagon)} a:hover{color:#4cc9e0}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--lagon);outline-offset:2px}
svg.i{width:18px;height:18px;flex:none;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
svg.i.s{width:15px;height:15px}
.chiffres{font-variant-numeric:tabular-nums}
.muet{color:var(--texte-3)} .discret{color:var(--texte-2)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ------------------------------------------------------------ coque */
.coque{display:grid;grid-template-columns:var(--largeur-nav) minmax(0,1fr);min-height:100vh;
  background:linear-gradient(90deg,var(--nuit-2) calc(var(--largeur-nav) - 1px),var(--trait) 0 var(--largeur-nav),transparent 0)}
.nav{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;background:var(--nuit-2);
  border-right:1px solid var(--trait);padding:22px 14px 16px}
.nav .marque{display:block;padding:4px 10px 22px;text-decoration:none}
.nav .marque img{width:168px;height:auto;display:block}
.nav .marque span{display:block;margin-top:8px;font-size:12px;color:var(--turquoise);letter-spacing:.02em}
.nav ul{list-style:none}
.nav .groupe{margin-top:18px}
.nav .groupe>p{font-size:12px;color:var(--texte-3);padding:0 12px 6px}
.nav a.lien{display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:var(--r-ctrl);color:var(--texte-2);
  text-decoration:none;font-weight:600;font-size:14px}
.nav a.lien:hover{background:rgba(255,255,255,.04);color:var(--texte)}
.nav a.lien[aria-current="page"]{background:linear-gradient(90deg,rgba(18,168,201,.18),rgba(18,168,201,.04));color:#fff;
  box-shadow:inset 3px 0 0 var(--lagon)}
.nav a.lien .compte{margin-left:auto;background:var(--lagon);color:#05202a;font-size:11px;font-weight:800;border-radius:999px;padding:1px 7px}
.nav .bas{margin-top:auto;border-top:1px solid var(--trait);padding-top:14px}
.moi{display:flex;align-items:center;gap:10px;padding:6px 8px;border-radius:var(--r-ctrl);text-decoration:none;color:var(--texte)}
.moi:hover{background:rgba(255,255,255,.04);color:var(--texte)}
.avatar{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:13px;flex:none;
  background:linear-gradient(140deg,var(--turquoise),var(--marine));color:#fff}
.moi .n{display:block;font-weight:700;font-size:13.5px;line-height:1.2}
.moi .r{display:block;font-size:12px;color:var(--texte-3)}
.nav form{margin-top:6px}
.nav .quitter{width:100%;display:flex;align-items:center;gap:10px;background:none;border:0;color:var(--texte-3);padding:8px 12px;
  border-radius:var(--r-ctrl);cursor:pointer;font-weight:600;font-size:13.5px}
.nav .version{font-size:11.5px;color:var(--texte-3);padding:6px 12px 0;font-variant-numeric:tabular-nums}
.nav .quitter:hover{color:var(--texte);background:rgba(255,255,255,.04)}

.barre-mobile{display:none}
.principal{min-width:0;padding:30px 40px 60px}
.contenu{max-width:1320px;margin:0 auto}

/* ------------------------------------------------------------ en-tête de page */
.fil{font-size:13px;color:var(--texte-3);margin-bottom:10px;display:flex;flex-wrap:wrap;gap:6px}
.fil a{color:var(--texte-2);text-decoration:none} .fil a:hover{color:var(--lagon)}
.fil .sep{opacity:.5}
.entete{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:26px}
.entete h1{font-size:30px;font-weight:700;letter-spacing:-.02em;line-height:1.15}
.entete p{color:var(--texte-2);margin-top:6px;max-width:68ch}
.actions-entete{display:flex;gap:10px;flex-wrap:wrap}
h2.titre{font-size:18px;font-weight:700;letter-spacing:-.01em;margin-bottom:14px;display:flex;align-items:center;gap:10px}
h2.titre .muet{font-weight:600;font-size:13px}

/* ------------------------------------------------------------ boutons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid transparent;cursor:pointer;
  border-radius:var(--r-ctrl);padding:10px 16px;font-weight:700;font-size:14px;white-space:nowrap;text-decoration:none;
  transition:background .15s,border-color .15s,transform .06s;line-height:1.2}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn-principal{background:var(--lagon);color:#04222c} .btn-principal:hover{background:#2bbad8;color:#04222c}
.btn-second{background:var(--abysse-2);border-color:var(--trait-2);color:var(--texte)} .btn-second:hover{background:var(--abysse-3);color:var(--texte)}
.btn-clair{background:#eef6f9;color:#0f1a33} .btn-clair:hover{background:#fff;color:#0f1a33}
.btn-danger{background:var(--err-fond);border-color:rgba(229,86,107,.4);color:#ff9cab} .btn-danger:hover{background:rgba(229,86,107,.24);color:#ffc0ca}
.btn-lien{background:none;border:0;color:var(--lagon);padding:6px 4px;font-weight:700}
.btn-petit{padding:7px 12px;font-size:13px}
.ib{width:34px;height:34px;border-radius:9px;border:0;background:none;color:var(--texte-2);cursor:pointer;display:inline-grid;place-items:center;text-decoration:none}
.ib:hover{background:rgba(255,255,255,.07);color:#fff}
.ib.rouge:hover{color:var(--err)}

/* ------------------------------------------------------------ panneaux */
.panneau{background:var(--abysse);border:1px solid var(--trait);border-radius:var(--r-panneau);padding:22px 24px}
.panneau+.panneau{margin-top:18px}
.heros>.panneau,.grille-2>.panneau,.grille-3>.panneau{margin-top:0}
.panneau.plat{background:transparent}
.grille-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.grille-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.pile>*+*{margin-top:18px}

/* ------------------------------------------------------------ statuts */
.statut{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:700;padding:3px 10px 3px 8px;border-radius:999px;white-space:nowrap}
.statut::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.statut.ok{background:var(--ok-fond);color:var(--ok)}
.statut.att{background:var(--att-fond);color:var(--att)}
.statut.err{background:var(--err-fond);color:var(--err)}
.statut.neutre{background:var(--neutre-fond);color:var(--texte-2)}
.etiquette{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:700;padding:2px 8px;border-radius:6px;
  background:rgba(63,184,192,.14);color:#9fe6ea}

/* ------------------------------------------------------------ tableaux */
.table-defile{overflow-x:auto}
table.liste{width:100%;border-collapse:collapse}
table.liste th{text-align:left;font-size:12.5px;font-weight:700;color:var(--texte-3);padding:10px 12px;border-bottom:1px solid var(--trait-2);white-space:nowrap}
table.liste td{padding:13px 12px;border-bottom:1px solid var(--trait);vertical-align:middle}
table.liste tr:last-child td{border-bottom:0}
table.liste tbody tr:hover td{background:rgba(255,255,255,.018)}
table.liste td.num,table.liste th.num{text-align:right;font-variant-numeric:tabular-nums}
table.liste td.act{text-align:right;white-space:nowrap}
table.liste .principal-cell{font-weight:700;color:var(--texte);text-decoration:none}
table.liste a.principal-cell:hover{color:var(--lagon)}
.sous{display:block;font-size:12.5px;color:var(--texte-3);font-weight:500}
.vide{padding:34px 10px;text-align:center;color:var(--texte-2)}
.vide strong{display:block;color:var(--texte);font-size:15px;margin-bottom:4px}

/* ------------------------------------------------------------ formulaires */
.champ{margin-bottom:16px}
.champ>label,.lbl{display:block;font-size:13px;font-weight:700;color:#c9d3e6;margin-bottom:6px}
.champ .aide{font-size:12.5px;color:var(--texte-3);margin-top:5px}
.aide-texte{font-size:14px;line-height:1.55;color:var(--texte-2);margin:6px 0 12px}
.champ .erreur,.erreurs{font-size:12.5px;color:#ff9cab;margin-top:5px}
input[type=text],input[type=email],input[type=password],input[type=number],input[type=url],input[type=tel],
input[type=time],input[type=datetime-local],input[type=search],select,textarea{
  width:100%;background:var(--nuit-2);border:1px solid var(--trait-2);border-radius:var(--r-ctrl);padding:11px 13px;outline:none;color-scheme:dark}
textarea{min-height:96px;resize:vertical}
input:focus,select:focus,textarea:focus{border-color:var(--lagon);box-shadow:0 0 0 3px rgba(18,168,201,.2)}
input[aria-invalid=true]{border-color:var(--corail)}
.ligne-champs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.choix{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border:1px solid var(--trait-2);border-radius:12px;cursor:pointer;margin-bottom:8px}
.choix:hover{border-color:rgba(18,168,201,.45)}
.choix input{margin-top:3px;accent-color:var(--lagon)}
.choix:has(input:checked){border-color:var(--lagon);background:rgba(18,168,201,.08)}
.choix b{display:block;font-size:14px} .choix span{font-size:12.5px;color:var(--texte-2)}
.cases{display:flex;flex-wrap:wrap;gap:8px}
.case{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border:1px solid var(--trait-2);border-radius:9px;cursor:pointer;font-weight:600;font-size:13.5px}
.case input{accent-color:var(--lagon)}
.case:has(input:checked){border-color:var(--lagon);background:rgba(18,168,201,.1)}
.pied-form{display:flex;gap:10px;justify-content:flex-end;margin-top:8px;flex-wrap:wrap}
.inter{position:relative;display:inline-block;width:40px;height:22px;vertical-align:middle;flex:none}
.inter input{opacity:0;width:0;height:0;position:absolute}
.inter span{position:absolute;inset:0;border-radius:999px;background:#3c4369;cursor:pointer;transition:background .15s}
.inter span::after{content:"";position:absolute;width:14px;height:14px;border-radius:50%;background:#fff;top:4px;left:4px;transition:left .15s}
.inter input:checked+span{background:var(--lagon)}
.inter input:checked+span::after{left:22px}
.inter input:focus-visible+span{outline:2px solid var(--lagon);outline-offset:2px}

/* ------------------------------------------------------------ messages */
.messages{list-style:none;margin-bottom:20px}
.messages li{display:flex;gap:10px;align-items:flex-start;padding:12px 16px;border-radius:12px;margin-bottom:8px;font-weight:600;font-size:14px}
.messages .success{background:var(--ok-fond);color:#9ff0c9}
.messages .info{background:rgba(18,168,201,.12);color:#a6e6f3}
.messages .warning{background:var(--att-fond);color:#ffd59a}
.messages .error{background:var(--err-fond);color:#ffb3be}
.encart{border-radius:12px;padding:14px 16px;font-size:14px;display:flex;gap:10px;align-items:flex-start}
.encart.info{background:rgba(18,168,201,.1);border:1px solid rgba(18,168,201,.3);color:#bfeaf4}
.encart.att{background:var(--att-fond);border:1px solid rgba(240,162,59,.35);color:#ffdcaa}
.encart.err{background:var(--err-fond);border:1px solid rgba(229,86,107,.35);color:#ffc2cb}

/* ------------------------------------------------------------ fenêtres */
dialog{margin:auto;border:1px solid var(--trait-2);background:#171b3d;color:var(--texte);border-radius:18px;padding:0;
  width:min(620px,calc(100vw - 32px));max-height:calc(100vh - 40px);box-shadow:var(--ombre)}
dialog::backdrop{background:rgba(4,6,20,.72);backdrop-filter:blur(3px)}
dialog .d-tete{display:flex;align-items:center;justify-content:space-between;padding:18px 22px;border-bottom:1px solid var(--trait)}
dialog .d-tete h3{font-size:18px;font-weight:700}
dialog .d-corps{padding:20px 22px;overflow:auto;max-height:calc(100vh - 200px)}
dialog .d-pied{display:flex;justify-content:flex-end;gap:10px;padding:14px 22px;border-top:1px solid var(--trait)}

/* ------------------------------------------------------------ écrans (élément fort) */
.mur{display:grid;grid-template-columns:repeat(auto-fill,minmax(188px,1fr));gap:22px 18px}
.ecran{display:block;text-decoration:none;color:var(--texte)}
.ecran .dalle{position:relative;aspect-ratio:16/9;border-radius:9px;background:#05060f;border:3px solid #05060f;
  box-shadow:0 0 0 1px rgba(150,180,225,.16);overflow:hidden;transition:box-shadow .2s}
.ecran .dalle img{width:100%;height:100%;object-fit:cover;display:block}
.ecran .dalle .repos{position:absolute;inset:0;display:grid;place-items:center;
  background:radial-gradient(120% 120% at 30% 20%,rgba(18,168,201,.22),transparent 60%),#0a0c1d}
.ecran .dalle .repos img{width:30%;height:auto;opacity:.75}
.ecran .pied-dalle{display:flex;align-items:center;gap:8px;margin-top:10px}
.ecran .voyant{width:8px;height:8px;border-radius:50%;background:#4a5272;flex:none}
.ecran.allume .voyant{background:var(--ok);box-shadow:0 0 0 3px rgba(63,193,137,.18),0 0 10px var(--ok)}
.ecran.allume .dalle{box-shadow:0 0 0 1px rgba(18,168,201,.45),0 10px 30px rgba(18,168,201,.14)}
.ecran.eteint .dalle{filter:grayscale(1) brightness(.55)}
.ecran .nom{font-weight:700;font-size:14px;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ecran .lieu{font-size:12.5px;color:var(--texte-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ecran .contenu-ecran{position:absolute;left:0;right:0;bottom:0;padding:16px 9px 6px;font-size:11.5px;font-weight:700;
  background:linear-gradient(transparent,rgba(3,4,14,.88));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ecran:hover .nom{color:var(--lagon)}
.ecran:focus-visible{outline:none} .ecran:focus-visible .dalle{outline:2px solid var(--lagon);outline-offset:3px}

/* ------------------------------------------------------------ chiffres */
.chiffres-cles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--trait);border:1px solid var(--trait);
  border-radius:var(--r-panneau);overflow:hidden;margin-bottom:24px}
.chiffre{background:var(--abysse);padding:18px 20px}
.chiffre .v{font-size:30px;font-weight:700;letter-spacing:-.02em;line-height:1.1}
.chiffre .l{font-size:13px;color:var(--texte-2);margin-top:4px}
.chiffre .d{font-size:12.5px;margin-top:6px;color:var(--texte-3)}
.chiffre .d b{color:var(--ok)} .chiffre .d b.err{color:var(--err)}
.heros{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:24px;margin-bottom:28px}
.heros .resume{display:flex;flex-direction:column;justify-content:center}
.heros .grand{font-size:64px;font-weight:700;letter-spacing:-.04em;line-height:1}
.heros .grand small{font-size:26px;color:var(--texte-3);font-weight:600;letter-spacing:-.01em}
.heros .sur{color:var(--texte-2);margin-top:8px}
.jauge-parc{height:8px;border-radius:999px;background:rgba(150,170,210,.14);margin:16px 0 18px;overflow:hidden;display:flex;gap:2px}
.jauge-parc i{display:block;height:100%;background:var(--ok);border-radius:999px}
.liste-chiffres{list-style:none}
.liste-chiffres li{display:flex;justify-content:space-between;padding:9px 0;border-top:1px solid var(--trait);font-size:14px}
.liste-chiffres li b{font-variant-numeric:tabular-nums}

/* ------------------------------------------------------------ graphiques */
.graphique{position:relative}
.graphique svg{display:block;width:100%;height:auto;overflow:visible}
.graphique .axe text{fill:var(--texte-3);font-size:11px;font-family:inherit}
.graphique .grille line{stroke:rgba(150,180,225,.1);stroke-width:1}
.legende{display:flex;gap:16px;flex-wrap:wrap;font-size:12.5px;color:var(--texte-2);margin-bottom:10px}
.legende span{display:inline-flex;align-items:center;gap:6px}
.legende i{width:12px;height:12px;border-radius:3px;display:inline-block}
.bulle{position:absolute;pointer-events:none;background:#0a0c1f;border:1px solid var(--trait-2);border-radius:10px;padding:8px 11px;
  font-size:12.5px;box-shadow:var(--ombre);white-space:nowrap;z-index:5;transform:translate(-50%,-100%);margin-top:-10px}
.bulle b{font-size:14px;display:block}
.bulle .cle{display:flex;align-items:center;gap:7px;color:var(--texte-2)}
.bulle .cle i{width:12px;height:2px;border-radius:2px;display:inline-block}
details.donnees{margin-top:12px}
details.donnees summary{cursor:pointer;color:var(--texte-3);font-size:13px;font-weight:600}
details.donnees table{margin-top:8px;font-size:12.5px}

/* ------------------------------------------------------------ toasts / session */
.toasts{position:fixed;right:18px;bottom:18px;display:flex;flex-direction:column;gap:10px;z-index:60;max-width:min(380px,calc(100vw - 36px))}
.toast{display:flex;gap:10px;align-items:flex-start;background:#1d2250;border:1px solid var(--trait-2);border-radius:12px;padding:12px 14px;
  box-shadow:var(--ombre);font-size:13.5px;animation:monte .18s ease-out}
.toast.ok svg{color:var(--ok)} .toast.err svg{color:var(--err)} .toast.info svg{color:var(--lagon)}
.toast .m{color:var(--texte-2);font-size:12.5px;margin-top:2px;word-break:break-word}
@keyframes monte{from{transform:translateY(8px);opacity:0}}
.alerte-session{position:fixed;left:50%;top:18px;transform:translateX(-50%);z-index:70;background:#1d2250;border:1px solid rgba(240,162,59,.5);
  border-radius:14px;padding:12px 14px 12px 18px;display:flex;gap:14px;align-items:center;box-shadow:var(--ombre);font-weight:600}
.alerte-session b{color:var(--att);font-variant-numeric:tabular-nums}

/* ------------------------------------------------------------ authentification */
.auth{min-height:100vh;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(380px,.95fr)}
/* Panneau gauche : logo en particules (canvas) + diaporama. Sans JavaScript : le visuel fixe d'origine. */
.auth .visuel{position:relative;overflow:hidden;border-right:1px solid var(--trait);
  background:radial-gradient(ellipse 70% 60% at 50% 36%,#121a42 0%,#080b22 58%,#060819 100%)}
.auth .particules{position:absolute;inset:0;width:100%;height:100%;display:block}
.auth .marque-auth{position:absolute;top:34px;left:44px;width:148px;height:auto;opacity:.92}

.diaporama{position:absolute;left:44px;right:44px;bottom:38px;max-width:660px}
.diapos{position:relative;aspect-ratio:2.45/1;border-radius:18px;overflow:hidden;background:#0b1030;
  border:1px solid rgba(255,255,255,.08);box-shadow:0 28px 60px -18px rgba(0,0,0,.7)}
.diapo{position:absolute;inset:0;margin:0;opacity:0;transition:opacity .9s ease;pointer-events:none}
.diapo.active{opacity:1;pointer-events:auto}
.diapo img,.diapo canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.diapo img{object-fit:cover;transform:scale(1.09);transition:transform 9s linear}
.diapo.active img{transform:scale(1)}
.diapo::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(5,8,26,.94) 0%,rgba(5,8,26,.6) 42%,rgba(5,8,26,0) 78%),linear-gradient(to right,rgba(5,8,26,.45),rgba(5,8,26,0) 60%)}
.diapo-carte{background:radial-gradient(ellipse 60% 90% at 66% 50%,#0f1a45 0%,#080c26 70%)}
.diapo-carte::after{background:linear-gradient(to right,rgba(5,8,26,.92) 0%,rgba(5,8,26,.55) 34%,rgba(5,8,26,0) 56%)}
.diapo figcaption{position:absolute;left:26px;right:26px;bottom:22px;z-index:1;max-width:46ch;color:#c4cee2;font-size:14px;line-height:1.5;
  opacity:0;transform:translateY(12px);transition:opacity .6s ease .25s,transform .7s cubic-bezier(.2,.7,.2,1) .25s}
.diapo-carte figcaption{right:auto;max-width:min(44%,34ch)}
.diapo.active figcaption{opacity:1;transform:none}
.diapo figcaption strong{display:block;color:#fff;font-size:clamp(18px,1.55vw,24px);font-weight:750;line-height:1.2;letter-spacing:-.015em;margin-bottom:7px;text-wrap:balance}
.diaporama .commandes{display:flex;align-items:center;gap:14px;margin-top:12px}
.diaporama .reperes{display:flex;gap:8px;flex:1}
.diaporama .repere{flex:1;height:22px;background:none;border:0;padding:0;cursor:pointer;position:relative}
.diaporama .repere span{position:absolute;left:0;right:0;top:50%;height:3px;margin-top:-1.5px;border-radius:3px;background:rgba(255,255,255,.14);overflow:hidden}
.diaporama .repere span::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--lagon),var(--ecume));transform-origin:left;transform:scaleX(0)}
.diaporama .repere.active span::after{animation:progression var(--duree,7s) linear forwards}
.diaporama.en-pause .repere.active span::after{animation-play-state:paused}
.diaporama .repere:hover span{background:rgba(255,255,255,.24)}
.diaporama .pause{width:32px;height:32px;flex:none;display:grid;place-items:center;border-radius:50%;cursor:pointer;color:var(--texte-2);
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.14)}
.diaporama .pause:hover{color:#fff;border-color:rgba(255,255,255,.3)}
@keyframes progression{to{transform:scaleX(1)}}

/* Partie droite : formulaire */
.auth .formulaire{position:relative;overflow:hidden;isolation:isolate;display:flex;align-items:center;justify-content:center;padding:40px 28px}
.auth .formulaire::before,.auth .formulaire::after{content:"";position:absolute;z-index:-1;border-radius:50%;pointer-events:none;filter:blur(60px)}
.auth .formulaire::before{width:520px;height:520px;right:-160px;top:-140px;opacity:.22;
  background:radial-gradient(circle,var(--lagon) 0%,rgba(18,168,201,0) 65%);animation:aurore-a 19s ease-in-out infinite alternate}
.auth .formulaire::after{width:460px;height:460px;left:-120px;bottom:-170px;opacity:.16;
  background:radial-gradient(circle,var(--ecume) 0%,rgba(85,184,148,0) 65%);animation:aurore-b 24s ease-in-out infinite alternate}
@keyframes aurore-a{to{transform:translate(-180px,190px) scale(1.15)}}
@keyframes aurore-b{to{transform:translate(170px,-150px) scale(.9)}}
.auth .boite{width:100%;max-width:400px}
/* Captcha : place reservee (pas de saut de la page au chargement), reduit sur les tres petits ecrans */
.auth .captcha{min-height:78px}
@media (max-width:360px){.auth .captcha .g-recaptcha{transform:scale(.88);transform-origin:0 0}}
.auth .boite>:not(form),.auth .boite form>*{animation:entree .7s cubic-bezier(.2,.7,.2,1) both}
.auth .boite>:nth-child(2){animation-delay:.08s} .auth .boite>:nth-child(3){animation-delay:.16s}
.auth .boite>:nth-child(4){animation-delay:.24s} .auth .boite>:nth-child(n+5){animation-delay:.5s}
.auth .boite form>:nth-child(1){animation-delay:.28s} .auth .boite form>:nth-child(2){animation-delay:.34s}
.auth .boite form>:nth-child(3){animation-delay:.4s} .auth .boite form>:nth-child(4){animation-delay:.46s}
.auth .boite form>:nth-child(n+5){animation-delay:.52s}
@keyframes entree{from{opacity:0;transform:translateY(14px)}}
.auth .symbole{width:56px;height:auto;margin-bottom:22px}
.auth .boite>.symbole{animation:entree .7s cubic-bezier(.2,.7,.2,1) both,flotte 6s ease-in-out .8s infinite alternate}
@keyframes flotte{to{transform:translateY(-5px) rotate(-4deg)}}
.auth h1{font-size:28px;font-weight:700;letter-spacing:-.02em}
.auth .intro{color:var(--texte-2);margin:8px 0 26px}
.auth .champ label{transition:color .2s}
.auth .champ:focus-within label{color:#5fd0e6}
.auth input{transition:border-color .2s,box-shadow .25s,background-color .2s}
.auth input:focus{background-color:#121633}
.auth .btn{width:100%;padding:13px 16px;font-size:15px;position:relative;overflow:hidden;transition:background .2s,transform .1s}
.auth .btn-principal::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(110deg,rgba(255,255,255,0) 35%,rgba(255,255,255,.4) 50%,rgba(255,255,255,0) 65%);transform:translateX(-110%)}
.auth .btn-principal:hover::after{transform:translateX(110%);transition:transform .8s ease}
.auth .btn.chargement{pointer-events:none}
.auth .btn .rouage{width:16px;height:16px;border-radius:50%;border:2px solid rgba(4,34,44,.35);border-top-color:#04222c;animation:tourne .7s linear infinite}
@keyframes tourne{to{transform:rotate(360deg)}}
.auth .boite.secousse{animation:secousse .45s cubic-bezier(.36,.07,.19,.97)}
@keyframes secousse{20%,60%{transform:translateX(-7px)}40%,80%{transform:translateX(7px)}}
.auth .verr-maj{display:flex;align-items:center;gap:6px;margin-top:7px;font-size:12.5px;font-weight:600;color:var(--att);animation:monte .25s ease}
.auth .bas-boite{margin-top:22px;font-size:13.5px;color:var(--texte-3);display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}
.code-saisie{font-size:26px!important;letter-spacing:.5em;text-align:center;font-variant-numeric:tabular-nums;font-weight:700}
.mdp-visible{position:relative}
.mdp-visible input{padding-right:44px}
.mdp-visible button{position:absolute;right:6px;top:50%;transform:translateY(-50%)}
.qr{background:#fff;border-radius:14px;padding:10px;width:220px;max-width:100%}
.qr svg{display:block;width:100%;height:auto}
.codes{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:16px;font-weight:700;
  background:var(--nuit-2);border:1px dashed var(--trait-2);border-radius:12px;padding:16px;letter-spacing:.08em}

/* ------------------------------------------------------------ responsive */
@media (max-width:1100px){
  .chiffres-cles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .heros{grid-template-columns:1fr}
  .grille-3{grid-template-columns:1fr 1fr}
}
@media (max-width:860px){
  .coque{grid-template-columns:1fr;background:none}
  .auth .symbole{display:none}
  .nav{position:fixed;inset:0 auto 0 0;width:min(300px,86vw);z-index:80;transform:translateX(-102%);transition:transform .2s;box-shadow:var(--ombre)}
  .coque.nav-ouverte .nav{transform:none}
  .voile{position:fixed;inset:0;background:rgba(4,6,20,.6);z-index:79}
  .barre-mobile{display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:40;padding:10px 16px;
    background:rgba(11,13,32,.94);backdrop-filter:blur(8px);border-bottom:1px solid var(--trait);margin:-20px -16px 18px}
  .barre-mobile img{height:30px;width:auto}
  .principal{padding:20px 16px 50px}
  .entete h1{font-size:24px}
  .grille-2,.grille-3,.ligne-champs{grid-template-columns:1fr}
  .auth{grid-template-columns:1fr}
  .auth .visuel{min-height:200px;border-right:0;border-bottom:1px solid var(--trait)}
  .auth{grid-template-rows:auto 1fr}
  .auth .formulaire{align-items:flex-start;padding-top:34px}
  .auth .marque-auth{top:50%;left:18px;width:104px;margin-top:-14px}
  .diaporama{display:none}
  .mur{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:18px 14px}
  .heros .grand{font-size:52px}
}
@media (max-width:520px){
  .chiffres-cles{grid-template-columns:1fr 1fr}
  .chiffre{padding:14px}
  .chiffre .v{font-size:24px}
  .actions-entete{width:100%} .actions-entete .btn{flex:1}
  .panneau{padding:18px 16px}
  .col-sec{display:none}
  .mur{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 12px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}
  .diaporama .repere.active span::after{transform:none}
  .diaporama .pause{display:none}}