/* ============================================================
   STUDIO — feuille de style (portail-builder)
   « papier chaud + cartes plates », famille dashboard maison.
   Self-contained : aucune police/CDN externe, aucun emoji,
   icônes en data-URI SVG. Cible les classes DÉJÀ rendues par
   StudioRouter. Aucune dépendance à un refactor HTML.
   ============================================================ */

/* ---------- 1. Tokens (chrome de l'outil = famille dashboard) ---------- */
:root{
  /* DA KNET PRO — neutres bleu-blanc (bleu #2b549c + blanc, sobre pro) */
  --ink:#12234c; --ink-2:#3a4a6a; --muted:#5b6b8c; /* texte navy KNET, contrastes AA */
  --bg-1:#cad6e8; --bg-2:#adbdd7;         /* dégradé bleu-gris clair du fond */
  --panel:#fff; --panel-2:#f2f6fb;         /* cartes / sous-fond (fond très clair KNET) */
  --line:#d3dbe8; --line-soft:#e6ecf5;
  --paper:#fbfdff;                         /* canvas d'aperçu tenant */
  /* Accent FAMILLE = bleu KNET PRO (chrome uniquement — jamais le bleu tenant).
     Nom historique --orange conservé pour ne pas casser les nombreuses références. */
  --orange:#2b549c; --orange-600:#22497f; --orange-tint:#eef3fb;
  /* Sémantiques */
  --red:#e4555f; --red-tint:#fdf1f2;
  --green:#46b34a; --green-tint:#e7f6e8;
  --blue:#4aa6e8;                          /* réservé au CANVAS d'aperçu */
  --amber:#d9891f; --amber-tint:#fbf3e4;
  /* Rayons / ombres / focus */
  --r-sm:8px; --r-md:12px; --r-lg:16px;
  --shadow:0 1px 2px rgba(14,35,80,.06),0 1px 3px rgba(14,35,80,.05);
  --shadow-pop:0 8px 26px rgba(14,35,80,.14);
  --focus:0 0 0 3px rgba(43,84,156,.30);
  /* Typo — fallback SYSTÈME (Space Grotesk impossible sans font externe) */
  --font:"Space Grotesk",system-ui,-apple-system,"Segoe UI",Roboto,
         Helvetica,Arial,sans-serif;
  --step: .25rem;                          /* base d'espacement 4px */
}

/* ---------- 2. Reset léger + squelette de page ---------- */
*,*::before,*::after{box-sizing:border-box}
html{background:radial-gradient(130% 130% at 50% 0%,var(--bg-1),var(--bg-2));
  height:100%;-webkit-text-size-adjust:100%}
body{
  margin:0;height:100vh;overflow:hidden;
  font-family:var(--font);font-size:16px;line-height:1.55;color:var(--ink);
  font-feature-settings:"ss01","cv01";-webkit-font-smoothing:antialiased;
}
:where(h1,h2,h3,p,ul,ol,form,figure,table){margin:0}
img{max-width:100%;height:auto;display:block}
a{color:var(--orange);text-decoration:none}
a:hover{text-decoration:underline}

/* Anneau de focus unique (ne jamais retirer sans remplacer) */
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:2px solid var(--orange);outline-offset:2px;
  box-shadow:var(--focus);border-radius:var(--r-sm);
}

/* Texte pour lecteurs d'écran uniquement (nom accessible sans impact visuel). */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- 3. En-tête de page (h1 + déconnexion) ---------- */
body>h1{
  font-size:1.5rem;font-weight:700;letter-spacing:-.01em;line-height:1.2;
  padding-bottom:16px;margin-bottom:4px;
}
/* Le <p> de déconnexion : seul <p> enfant direct de body */
body>p{
  position:absolute;top:24px;right:24px;margin:0;
}
body>p a{
  display:inline-flex;align-items:center;gap:8px;min-height:40px;
  padding:0 14px;background:var(--panel);border:1px solid var(--line);
  border-radius:9px;color:var(--orange);font-weight:600;font-size:.9rem;
}
body>p a:hover{background:var(--orange-tint);border-color:var(--orange);
  text-decoration:none}

/* Sélecteur de langue d'édition */
.edit-langues{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  font-size:.8rem;color:var(--muted);font-weight:600;
  margin-bottom:20px;
}
.edit-langues a{
  display:inline-grid;place-items:center;min-width:40px;min-height:32px;
  padding:0 10px;border:1px solid var(--line);border-radius:7px;
  background:var(--panel);color:var(--ink-2);letter-spacing:.04em;
}
.edit-langues a:hover{border-color:var(--orange);color:var(--orange);
  text-decoration:none}
.edit-langues a[aria-current="true"]{
  background:linear-gradient(180deg,#345ca0,var(--orange));
  color:#fff;border-color:transparent}

/* ---------- 4. Cartes de section (thème/médias/carte/mikrotik/connecteur/stats) ---------- */
.theme-charte,.medias,.carte-config,.connexion-config,.hotspot-config,.connecteur,.analytics{
  display:block;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--r-md);box-shadow:var(--shadow);
  padding:22px 24px;margin-top:20px;
}
/* Titres de section : porte-icône SVG + filet */
.theme-charte>h2,.medias>h2,.carte-config>h2,.connexion-config>h2,.hotspot-config>h2,.connecteur>h2,.analytics>h2{
  display:flex;align-items:center;gap:10px;
  font-size:1.2rem;font-weight:700;color:var(--ink);letter-spacing:-.01em;
  padding-bottom:14px;margin-bottom:18px;border-bottom:1px solid var(--line-soft);
}
:is(.theme-charte,.medias,.carte-config,.connexion-config,.hotspot-config,.connecteur,.analytics)>h2::before{
  content:"";flex:0 0 auto;width:28px;height:28px;border-radius:8px;
  background-color:var(--orange-tint);background-repeat:no-repeat;
  background-position:center;background-size:18px 18px;
}
/* Icônes Lucide (data-URI, stroke orange) par section */
.theme-charte>h2::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%232b549c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='13.5' cy='6.5' r='.5'/%3E%3Ccircle cx='17.5' cy='10.5' r='.5'/%3E%3Ccircle cx='8.5' cy='7.5' r='.5'/%3E%3Ccircle cx='6.5' cy='12.5' r='.5'/%3E%3Cpath d='M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10c.9 0 1.5-.7 1.5-1.5 0-.4-.2-.8-.5-1-.3-.3-.5-.6-.5-1 0-.8.7-1.5 1.5-1.5H16c3.3 0 6-2.7 6-6 0-4.4-4.5-8-10-8z'/%3E%3C/svg%3E")}
.medias>h2::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%232b549c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Ccircle cx='9' cy='9' r='2'/%3E%3Cpath d='m21 15-3.1-3.1a2 2 0 0 0-2.8 0L6 21'/%3E%3C/svg%3E")}
.hotspot-config>h2::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%232b549c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='14' width='20' height='8' rx='2'/%3E%3Cpath d='M6.01 18H6M10 18h-.01'/%3E%3Cpath d='M12 14v-2M8.5 8.5a5 5 0 0 1 7 0M5.7 5.7a9 9 0 0 1 12.6 0'/%3E%3C/svg%3E")}
.connecteur>h2::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%232b549c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22v-5M9 8V2M15 8V2M18 8v4a4 4 0 0 1-4 4h-4a4 4 0 0 1-4-4V8z'/%3E%3C/svg%3E")}
.analytics>h2::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%232b549c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 3v18h18'/%3E%3Crect x='7' y='11' width='3' height='6'/%3E%3Crect x='13' y='7' width='3' height='10'/%3E%3C/svg%3E")}

.carte-config>h2::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%232b549c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 19.5A2.5 2.5 0 0 1 6.5 17H20'/%3E%3Cpath d='M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z'/%3E%3C/svg%3E")}

.connexion-config>h2::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%232b549c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5a10 10 0 0 1 14 0'/%3E%3Cpath d='M8.5 15.8a5.5 5.5 0 0 1 7 0'/%3E%3Cpath d='M2 9.2a15 15 0 0 1 20 0'/%3E%3Ccircle cx='12' cy='19' r='1'/%3E%3C/svg%3E")}
/* La section Connexion réutilise les fiches de choix de la section Carte. */
.connexion-config .carte-modes .carte-mode input[type=radio]{flex:0 0 auto;width:18px;height:18px;
  min-height:0;margin:2px 0 0;padding:0;accent-color:var(--orange)}

/* Section Carte : destination du bouton (page web dédiée ou PDF) */
.carte-intro{margin:0 0 16px;color:var(--muted);font-size:.86rem;line-height:1.5}
.carte-modes{border:0;padding:0;margin:0 0 16px;display:grid;gap:10px}
.carte-modes legend{padding:0;margin-bottom:8px;font-size:.8rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
/* Le label global est en colonne et tout input fait 100 % : on rétablit une
   ligne « radio + texte » et une vraie taille de bouton radio. */
.carte-modes .carte-mode{display:flex;flex-direction:row;align-items:flex-start;gap:11px;
  padding:13px 15px;cursor:pointer;
  border:1px solid var(--line);border-radius:var(--r-md);background:var(--panel);
  max-width:none;transition:border-color .12s,background .12s}
.carte-mode:hover{border-color:var(--orange);background:var(--orange-tint)}
.carte-mode:has(input:checked){border-color:var(--orange);background:var(--orange-tint);
  box-shadow:var(--focus)}
/* Spécificité volontairement > à la règle globale `input:not(...)` (0,3,1),
   qui suit dans la feuille et gagnerait à égalité. */
.carte-config .carte-modes .carte-mode input[type=radio]{flex:0 0 auto;width:18px;height:18px;
  min-height:0;margin:2px 0 0;padding:0;accent-color:var(--orange)}
.carte-mode span{display:flex;flex-direction:column;gap:3px}
.carte-mode strong{font-size:.92rem;color:var(--ink)}
.carte-mode small{color:var(--muted);font-size:.8rem;line-height:1.45}
.carte-avert{margin:0 0 14px;padding:10px 12px;border-radius:var(--r-sm);
  background:var(--amber-tint);color:#7a4d0c;font-size:.82rem}
.carte-liens{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px}
.carte-liens a{color:var(--orange);font-weight:600;font-size:.85rem;text-decoration:none}
.carte-liens a:hover{text-decoration:underline}
.carte-note{margin:16px 0 0;color:var(--muted);font-size:.8rem;line-height:1.5}
/* --- Console du superadmin : choisir l'établissement à administrer --- */
/* Pages DOCUMENT (console, login) : elles doivent défiler. Le verrou
   height:100vh/overflow:hidden du body n'appartient qu'au shell de l'éditeur. */
body.console-page,body.studio-login{height:auto;min-height:100vh;overflow:auto}
.console-page{min-height:100vh}
.console-page .studio-top{position:sticky;top:0;z-index:10}
.console{max-width:980px;margin:0 auto;padding:34px 22px 60px}
.console h1{margin:0 0 6px;font-size:1.6rem;font-weight:800;color:var(--ink);letter-spacing:-.02em}
.console-intro{margin:0 0 26px;color:var(--muted);font-size:.9rem}
.console-liste{list-style:none;margin:0;padding:0;display:grid;gap:14px;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.console-carte{display:flex;flex-direction:column;gap:6px;padding:18px;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r-md);
  box-shadow:var(--shadow);transition:border-color .12s,box-shadow .12s,transform .12s}
.console-carte:hover{border-color:var(--orange);box-shadow:var(--shadow-pop);transform:translateY(-1px)}
.console-tete{display:flex;align-items:flex-start;gap:10px}
.console-nom{font-weight:700;color:var(--ink);font-size:1rem;min-width:0;overflow-wrap:anywhere}
/* Le badge reste une capsule d'UNE ligne : c'est le nom qui replie, pas l'état. */
.console-etat{margin-left:auto;padding:3px 9px;border-radius:var(--r-sm);white-space:nowrap;
  font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em}
/* État du service : pastille + libellé (jamais la couleur seule). */
.console-etat{display:inline-flex;align-items:center;gap:6px}
.console-etat i{width:7px;height:7px;border-radius:50%;background:currentColor}
.console-etat.est-online{background:var(--green-tint);color:#256b28}
.console-etat.est-offline{background:var(--red-tint);color:#a32c35}
.console-etat.est-inconnu{background:var(--panel-2);color:var(--muted)}
.console-detail{margin:0;color:var(--muted);font-size:.8rem;line-height:1.45}
/* IP publique : saisie en ligne, discrète tant qu'on n'y touche pas. */
.console-ip{display:flex;align-items:flex-end;gap:8px;margin-top:10px}
.console-ip label{flex:1;display:flex;flex-direction:column;gap:3px;max-width:none;margin:0}
.console-ip label>span{font-size:.7rem;font-weight:600;text-transform:uppercase;
  letter-spacing:.04em;color:var(--muted)}
.console-ip input{width:100%;max-width:none;min-height:44px;font-size:.85rem}
.console-ip button{min-height:44px;padding:0 14px;font-size:.8rem}
/* Pied de carte ancré en bas : les rangées de la grille gardent des actions alignées. */
.console-carte>form:last-of-type{margin-top:auto;padding-top:10px}
.console-carte .btn-primary{width:100%}
/* Suppression d'un établissement : repliée, et visuellement à l'écart du reste
   de la carte — on ne met pas un acte irréversible au même niveau qu'Administrer. */
.console-suppr{margin-top:10px;border-top:1px solid var(--line);padding-top:2px}
.console-suppr summary{display:flex;align-items:center;min-height:44px;cursor:pointer;
  font-size:.85rem;color:var(--muted);user-select:none}
.console-suppr summary:hover,.console-suppr summary:focus-visible{color:#a32c35}
/* Confirmation d'action (IP enregistrée, établissement supprimé). */
.console-flash{margin:0 0 16px;padding:11px 14px;border-radius:var(--r-sm);
  background:var(--green-tint,#e7f5e8);border:1px solid #7bbf7e;color:#256b28;font-weight:600;font-size:.9rem}
/* Bandeau de confirmation après publication (+ résultat du push routeur). */
.studio-flash{margin:0;padding:11px 16px;font-weight:600;font-size:.9rem;text-align:center}
.studio-flash-ok{background:#e7f5e8;border-bottom:1px solid #7bbf7e;color:#256b28}
.studio-flash-warn{background:#fbe9df;border-bottom:1px solid #e0a678;color:#8a4b12}
.studio-flash-erreur{background:#fdeaea;border-bottom:1px solid #d98b8b;color:#8a1212}
.champ-alerte{display:block;margin-top:4px;padding:7px 10px;border-left:3px solid #e0a678;background:#fdf4ee;color:#8a4b12;font-size:.82rem;line-height:1.45}
/* Santé du parc : puces agrégées + ancienneté du dernier passage superviseur. */
.sante-parc{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:0 0 18px;
  padding:12px 14px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r-md)}
.sante-puce{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:var(--r-sm);
  font-size:.82rem;font-weight:600}
.sante-puce strong{font-size:.95rem}
.sante-puce.est-online{background:var(--green-tint,#e7f5e8);color:#256b28}
.sante-puce.est-offline{background:var(--red-tint);color:#a32c35}
.sante-puce.est-inconnu{background:var(--panel-2);color:var(--muted)}
.sante-passage{margin-left:auto;color:var(--muted);font-size:.8rem}
/* Volet déplié : la zone assume visuellement le danger AVANT le bouton final. */
.console-suppr[open]{background:var(--red-tint);border:1px solid var(--red);
  border-radius:var(--r-sm);border-top:1px solid var(--red);padding:0 10px 10px;margin-top:12px}
.console-suppr[open] summary{color:#a32c35;font-weight:600}
.console-suppr .champ-aide{margin:2px 0 8px;font-size:.8rem;line-height:1.5;color:var(--ink-2)}
.console-suppr input{width:100%;max-width:none;min-height:44px;font-size:.85rem;margin-bottom:8px}
.btn-danger{display:inline-flex;align-items:center;justify-content:center;width:100%;
  min-height:44px;padding:0 12px;font-size:.8rem;font-weight:600;cursor:pointer;
  color:#a32c35;background:#fff;border:1px solid var(--red);border-radius:9px}
.btn-danger:hover{color:#fff;background:var(--red);border-color:var(--red)}
.console-vide{grid-column:1/-1;padding:26px;text-align:center;color:var(--muted);
  background:var(--panel-2);border:1px dashed var(--line);border-radius:var(--r-md)}
.console-ajout{margin-top:34px;padding:22px 24px;background:var(--panel);
  border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--shadow)}
.console-ajout h2{margin:0 0 16px;font-size:1.05rem;font-weight:700;color:var(--ink)}
/* Rythme vertical du formulaire de création : une rangée par champ, aérée. */
.console-ajout form{display:grid;gap:16px;justify-items:start}
.console-ajout form p{width:100%;max-width:560px}
.console-ajout .champ-aide{margin-top:6px}

/* --- Assistant de connexion au routeur (étapes vérifiées sur le routeur) --- */
.assistant{display:block}
/* QR code de la page de garde (paramètres) : aperçu inline + actions. */
.qr-config .qr-apercu{display:flex;flex-direction:column;align-items:center;gap:14px;
  margin:14px 0 6px;padding:18px;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-md)}
/* Aperçu fidèle de l'étiquette à coller. Les positions du QR sont injectées
   par QrPortail (mesurées sur le dessin) : ne pas les redéfinir ici, sinon
   l'aperçu et l'impression divergeraient. */
.qr-config .etiquette{width:min(100%,300px)}
.qr-config .qr-lien{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 16px}
.qr-config .qr-lien-label{flex-basis:100%;font-size:.72rem;font-weight:600;text-transform:uppercase;
  letter-spacing:.04em;color:var(--muted)}
.qr-config .qr-lien a{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.qr-config .qr-lien code{font-size:.82rem;color:var(--orange);word-break:break-all}
.qr-config .qr-copier{min-height:36px;padding:0 12px;font-size:.8rem;flex:none}
.qr-config .qr-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
/* Livrables terrain : guide imprimable + script de bootstrap sur site. */
.assistant-terrain{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 14px}
.assistant-terrain .champ-aide{flex-basis:100%;margin-top:0}
/* Codes WiFi (vouchers) : génération de lot + liste + révocation. */
.voucher-gen{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px;margin:0 0 12px}
.voucher-gen label{display:flex;flex-direction:column;gap:3px;font-size:.82rem;color:var(--ink-2);margin:0}
.voucher-gen input{min-height:40px}
.voucher-gen input[name=quantite]{width:88px}
.voucher-actions{margin:6px 0 10px}
.voucher-liste{width:100%;border-collapse:collapse;font-size:.86rem}
.voucher-liste th,.voucher-liste td{text-align:left;padding:6px 8px;border-bottom:1px solid var(--line-soft)}
.voucher-liste .voucher-code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:600;letter-spacing:.03em}
.btn-lien-danger{background:none;border:0;padding:0;color:#a32c35;font:inherit;font-size:.84rem;cursor:pointer;text-decoration:underline}
.btn-lien-danger:hover{color:#7f1d24}
.assistant>h2::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%232b549c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='14' width='20' height='8' rx='2'/%3E%3Cpath d='M6 18h.01M10 18h.01'/%3E%3Cpath d='M12 14v-2M8.5 8.5a5 5 0 0 1 7 0M5.7 5.7a9 9 0 0 1 12.6 0'/%3E%3C/svg%3E")}
.assistant code{padding:1px 5px;border-radius:5px;background:var(--panel-2);
  border:1px solid var(--line-soft);font-size:.9em}
.assistant-barre{display:flex;align-items:center;gap:14px;margin:18px 0 6px;
  padding-top:16px;border-top:1px solid var(--line-soft)}
.assistant-etat{font-size:.85rem;font-weight:600;color:var(--muted)}
.assistant-etat.est-erreur{color:var(--red)}
.assistant-etapes{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:10px}
.assistant-etapes .etape-vide{padding:16px;border:1px dashed var(--line);border-radius:var(--r-md);
  color:var(--muted);font-size:.86rem;background:var(--panel-2)}
.etape{padding:14px 16px;border:1px solid var(--line);border-left-width:4px;
  border-radius:var(--r-md);background:var(--panel)}
.etape-head{display:flex;align-items:center;gap:10px}
.etape-titre{font-weight:700;color:var(--ink);font-size:.95rem}
.etape-badge{margin-left:auto;padding:3px 9px;border-radius:var(--r-sm);
  font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.etape-detail{margin:8px 0 0;color:var(--ink-2);font-size:.86rem;line-height:1.55}
.etape-commandes{margin:10px 0 0;padding:10px 12px;border-radius:var(--r-sm);overflow-x:auto;
  background:var(--panel-2);border:1px solid var(--line-soft);
  font:500 .78rem/1.6 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--ink-2)}
.etape-fix{margin-top:12px}
/* Le statut se lit à la couleur du liseré ET au badge (jamais à la couleur seule). */
.etape.est-ok{border-left-color:var(--green)}
.etape.est-ok .etape-badge{background:var(--green-tint);color:#256b28}
.etape.est-corriger{border-left-color:var(--orange)}
.etape.est-corriger .etape-badge{background:var(--orange-tint);color:var(--orange)}
.etape.est-manuel{border-left-color:var(--amber)}
.etape.est-manuel .etape-badge{background:var(--amber-tint);color:#7a4d0c}
.etape.est-attente{border-left-color:var(--line)}
.etape.est-attente .etape-badge{background:var(--panel-2);color:var(--muted)}
.media-pdf a{color:var(--orange);font-weight:600;text-decoration:none}
.media-pdf a:hover{text-decoration:underline}
.bloc-note{margin:0;color:var(--muted);font-size:.84rem;line-height:1.5}

/* Sous-titres H3 */
:is(.carte-config,.connexion-config,.hotspot-config,.connecteur,.analytics) h3{
  font-size:.8rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.05em;color:var(--muted);
  margin:22px 0 12px;
}

/* ---------- 5. Formulaires & champs ---------- */
form{margin:0}
form p{margin:0}
/* Label = colonne : le pattern <label>Texte <input></label> place
   automatiquement le libellé au-dessus du champ. */
label{
  display:flex;flex-direction:column;gap:6px;
  font-size:.8125rem;font-weight:600;color:var(--ink-2);
}
input:not([type=hidden]):not([type=color]):not([type=file]),
select,textarea{
  width:100%;max-width:440px;min-height:44px;
  padding:10px 12px;font:inherit;font-size:.9375rem;color:var(--ink);
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r-sm);
  transition:border-color .12s,box-shadow .12s;
}
textarea{min-height:80px;max-width:640px;resize:vertical;line-height:1.5}
input:not([type=hidden]):hover,select:hover,textarea:hover{border-color:#b9c4d6}
input:not([type=hidden]):focus,select:focus,textarea:focus{
  outline:none;border-color:var(--orange);box-shadow:var(--focus)}
select{appearance:none;-webkit-appearance:none;padding-right:36px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238a877f' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center}
input[type=color]{width:48px;height:44px;padding:4px;border:1px solid var(--line);
  border-radius:var(--r-sm);background:var(--panel);cursor:pointer}
/* Champ fichier custom (masque le libellé natif « No file chosen » anglais) */
.file-field{display:inline-flex;align-items:center;gap:10px;flex-wrap:wrap}
.file-field input[type=file]{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.file-btn{display:inline-flex;align-items:center;min-height:38px;padding:0 15px;cursor:pointer;
  border:1px solid var(--line);border-radius:9px;background:var(--panel-2);
  font-weight:600;font-size:.85rem;color:var(--ink);transition:border-color .12s,background .12s}
.file-field:hover .file-btn{border-color:var(--orange);color:var(--orange);background:var(--orange-tint)}
.file-field input:focus-visible+.file-btn{outline:2px solid var(--orange);outline-offset:2px}
.file-name{font-size:.82rem;color:var(--muted);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
input[type=file]:not(.file-field input){font-size:.875rem;color:var(--ink-2)}
input[type=file]::file-selector-button{
  margin-right:12px;min-height:40px;padding:0 14px;font:inherit;font-weight:600;
  color:var(--ink);background:var(--panel);border:1px solid var(--line);
  border-radius:9px;cursor:pointer}
input[type=file]::file-selector-button:hover{background:var(--panel-2);
  border-color:var(--orange);color:var(--orange)}

/* Grilles de formulaire à 2 colonnes (sections denses) */
.theme-charte form,.hotspot-config form{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 20px}
.theme-charte form>p:has(textarea),.hotspot-config form>p:has(textarea),
.theme-charte form>button,.hotspot-config form>button{grid-column:1/-1}
.theme-charte form>button,.hotspot-config form>button{justify-self:start}

/* ---------- 6. Boutons (4 variantes ; primaire = orange famille) ---------- */
button,input[type=submit]{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:44px;padding:0 16px;font:inherit;font-size:.9rem;font-weight:600;
  color:var(--ink);background:var(--panel);border:1px solid var(--line);
  border-radius:9px;cursor:pointer;transition:.12s;white-space:nowrap}
button:hover,input[type=submit]:hover{background:var(--panel-2);
  border-color:#b9c4d6}
button:active{transform:translateY(1px)}

/* PRIMAIRE (orange plein) — action métier majeure : Publier */
body>form:has(input[value="publish"]) button{
  background:linear-gradient(180deg,#345ca0,var(--orange));color:#fff;
  border-color:transparent;box-shadow:var(--shadow);min-height:46px;padding:0 22px;
  font-size:.95rem}
body>form:has(input[value="publish"]) button:hover{
  background:linear-gradient(180deg,#2f5aa0,var(--orange-600));color:#fff}
/* DANGER (Supprimer) — couvre l'ancien DOM (.bloc-edit) ET le nouveau (.bloc-actions
   dans l'inspecteur), sinon « Supprimer » a le même rendu neutre que « Masquer ». */
.bloc-edit form:has(input[value="delete_block"]) button,
.bloc-actions form:has(input[value="delete_block"]) button{
  color:var(--red);border-color:#eec3c6;background:var(--panel)}
.bloc-edit form:has(input[value="delete_block"]) button:hover,
.bloc-actions form:has(input[value="delete_block"]) button:hover{
  background:var(--red-tint);border-color:var(--red)}
/* GHOST (Masquer/Afficher) */
.bloc-edit form:has(input[value="toggle_block"]) button,
.bloc-actions form:has(input[value="toggle_block"]) button{
  color:var(--ink-2);background:transparent;border-color:var(--line-soft)}
.bloc-edit form:has(input[value="toggle_block"]) button:hover,
.bloc-actions form:has(input[value="toggle_block"]) button:hover{
  background:var(--panel-2);color:var(--ink)}

/* ---------- 7. Ajout de bloc + barre Publier ---------- */
/* Formulaire d'ajout : enfant direct de body (add_block) */
body>form:has(input[value="add_block"]){
  display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r-md);
  box-shadow:var(--shadow);padding:16px 18px;margin-bottom:16px}
body>form:has(input[value="add_block"]) label{
  flex:1 1 280px;max-width:420px}
/* Barre Publier : sticky en bas, isolée du flux d'édition */
body>form:has(input[value="publish"]){
  position:sticky;bottom:16px;z-index:20;display:flex;justify-content:flex-end;
  gap:12px;margin:20px 0;padding:12px 14px;
  background:rgba(255,255,255,.86);backdrop-filter:blur(8px);
  border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--shadow-pop)}

/* ---------- 8. Liste des blocs (cartes) ---------- */
.blocs{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:14px}
.bloc-edit{
  position:relative;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--r-md);box-shadow:var(--shadow);padding:18px 20px;
  display:grid;grid-template-columns:minmax(0,320px) 1fr;
  grid-template-areas:"head head" "preview form";
  gap:14px 22px;align-items:start}
/* En-tête de carte : le <strong> (type de bloc) devient un titre-chip */
.bloc-edit>strong{
  grid-area:head;display:inline-flex;align-items:center;gap:8px;
  font-size:.95rem;font-weight:700;color:var(--ink);text-transform:capitalize;
  padding-bottom:12px;border-bottom:1px solid var(--line-soft);width:100%}
.bloc-edit>strong::before{content:"";width:22px;height:22px;border-radius:6px;
  background:var(--orange-tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%232b549c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='7' rx='1'/%3E%3Crect x='14' y='3' width='7' height='7' rx='1'/%3E%3Crect x='14' y='14' width='7' height='7' rx='1'/%3E%3Crect x='3' y='14' width='7' height='7' rx='1'/%3E%3C/svg%3E") center/14px no-repeat}
/* Canvas d'aperçu du bloc = cadre papier isolé (marque tenant) */
.bloc-edit>.bloc{
  grid-area:preview;min-height:96px;background:var(--paper);
  border:1px solid var(--line-soft);border-radius:var(--r-md);
  box-shadow:0 2px 8px rgba(14,35,80,.08);padding:14px;overflow:hidden}
/* Formulaire d'édition à droite */
.bloc-edit form:has(input[value="update_block"]){
  grid-area:form;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px 18px;align-content:start}
.bloc-edit form:has(input[value="update_block"]) p{grid-column:1/-1}
.bloc-edit form:has(input[value="update_block"]) button{grid-column:1/-1;
  justify-self:start;margin-top:4px}
/* Barre d'actions du bloc (toggle + delete).
   Chemin PROPRE : envelopper les 2 formulaires dans <div class="bloc-actions">
   (voir changements structurels) -> ils s'alignent à droite sous la carte. */
.bloc-actions{grid-column:1/-1;display:flex;justify-content:flex-end;gap:10px;
  border-top:1px solid var(--line-soft);padding-top:12px;margin-top:2px}
/* Repli PUR CSS (sans wrapper) : auto-placement en 3e rangée, paire jointe. */
.bloc-edit>form:has(input[value="toggle_block"]){justify-self:end;align-self:start}
.bloc-edit>form:has(input[value="delete_block"]){justify-self:start;align-self:start}

/* ---------- 9. Thème & charte : aperçu client (scopé, sans fuite CSS) ---------- */
.apercu-charte{
  margin-top:18px;padding:30px 16px 16px;background:var(--panel-2);
  border:1px solid var(--line-soft);border-radius:var(--r-md);position:relative}
.apercu-charte::before{
  content:"Aperçu client";position:absolute;top:10px;left:14px;
  font-size:.7rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted)}
.apercu-mini{display:flex;align-items:center;gap:12px;padding:14px;
  background:#fff;border-radius:var(--r-sm);box-shadow:var(--shadow)}
/* Le carré de couleur et le bouton montrent le DÉGRADÉ principale → secondaire :
   c'est exactement ce que fait le portail (héro, bouton de connexion). */
.apercu-swatch{flex:0 0 auto;width:34px;height:34px;border-radius:8px;
  background:linear-gradient(135deg,var(--c),var(--c2,var(--c)));
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
.apercu-lines{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.apercu-lines i{height:7px;border-radius:4px;background:var(--line)}
.apercu-lines i:first-child{width:68%;background:var(--c);opacity:.85}
.apercu-btn{flex:0 0 auto;border:0;border-radius:9px;padding:9px 13px;color:#fff;
  font:600 .78rem/1 var(--f,var(--font));cursor:default;white-space:nowrap;
  background:linear-gradient(135deg,var(--c),var(--c2,var(--c)))}
.champ-aide{display:block;margin-top:4px;color:var(--muted);font-size:.78rem;
  font-weight:400;line-height:1.45;text-transform:none;letter-spacing:0}
/* Les deux couleurs sur une même ligne, la case Dégradé juste dessous. */
.couleurs-charte{grid-column:1/-1;display:grid;grid-template-columns:auto auto 1fr;
  align-items:end;gap:10px 22px;margin:0}
.couleurs-charte>label{max-width:none;margin:0}
.couleurs-charte .case-degrade{grid-column:1/-1;display:flex;flex-direction:row;
  align-items:center;gap:9px;font-size:.86rem;font-weight:600;color:var(--ink-2);
  text-transform:none;letter-spacing:0;cursor:pointer}
.couleurs-charte .case-degrade input[type=checkbox]{flex:0 0 auto;width:18px;height:18px;
  min-height:0;margin:0;padding:0;accent-color:var(--orange)}
.couleurs-charte .champ-aide{grid-column:1/-1;margin:0}
/* Dégradé décoché : la secondaire ne sert plus — on le montre au lieu de laisser
   croire qu'elle agit encore (le champ reste actif, donc sa valeur est conservée). */
.couleurs-charte:has([data-degrade]:not(:checked)) [data-couleur2]{opacity:.35}
.couleurs-charte:has([data-degrade]:not(:checked)) label:nth-of-type(2){color:var(--muted)}

/* ---------- 10. Médias : dropzone + galerie ---------- */
.medias form{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:22px;border:2px dashed var(--line);border-radius:var(--r-md);
  background:var(--panel-2)}
.medias form:hover{border-color:var(--orange);background:var(--orange-tint)}
.media-list{list-style:none;padding:0;margin:16px 0 0;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:12px}
.media-list:empty{display:block}
.media-list:empty::before{
  content:"Aucun média pour l'instant. Téléversez une image (JPEG, PNG ou WebP, 2 Mo max).";
  display:block;padding:24px;text-align:center;color:var(--muted);
  font-size:.875rem;background:var(--panel-2);border-radius:var(--r-sm)}
.media-list li{position:relative;aspect-ratio:1;border:1px solid var(--line-soft);
  border-radius:var(--r-sm);overflow:hidden;background:var(--paper)}
.media-list li img{width:100%;height:100%;object-fit:cover}

/* ---------- 11. Livrables routeur (liens de téléchargement) ---------- */
.hotspot-config ul{list-style:none;padding:0;margin:0;display:flex;
  flex-direction:column;gap:8px}
.hotspot-config ul a{
  display:inline-flex;align-items:center;gap:10px;align-self:flex-start;
  min-height:40px;padding:0 14px;background:var(--panel);
  border:1px solid var(--line);border-radius:9px;color:var(--ink);
  font-weight:600;font-size:.875rem}
.hotspot-config ul a::before{content:"";width:16px;height:16px;flex:0 0 auto;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238a877f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpath d='M7 10l5 5 5-5'/%3E%3Cpath d='M12 15V3'/%3E%3C/svg%3E") center/16px no-repeat}
.hotspot-config ul a:hover{border-color:var(--orange);color:var(--orange);
  text-decoration:none}

/* ---------- 12. Tableaux (Connecteur : Routeurs / Vouchers) ---------- */
.connecteur table{width:100%;border-collapse:separate;border-spacing:0;
  border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;
  margin-bottom:8px;font-size:.9rem}
.connecteur thead th{background:var(--panel-2);text-align:left;
  font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  color:var(--muted);padding:11px 14px;border-bottom:1px solid var(--line)}
.connecteur td,.connecteur th{padding:11px 14px}
.connecteur tbody tr+tr td{border-top:1px solid var(--line-soft)}
.connecteur tbody tr:hover td{background:var(--panel-2)}
/* État vide : tbody sans ligne */
.connecteur table tbody:empty::after{
  content:"Aucune entrée pour l'instant.";display:block;padding:26px 14px;
  text-align:center;color:var(--muted);font-size:.875rem}

/* ---------- 13. Statistiques : tuiles KPI + états vides ---------- */
.stats-cles{list-style:none;padding:0;margin:0 0 4px;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px}
.stats-cles li{
  display:flex;flex-direction:column-reverse;gap:4px;
  background:var(--panel-2);border:1px solid var(--line-soft);
  border-radius:var(--r-md);padding:16px 18px;
  font-size:.78rem;font-weight:600;text-transform:uppercase;
  letter-spacing:.04em;color:var(--muted)}
.stats-cles li strong{font-size:1.9rem;font-weight:700;letter-spacing:-.02em;
  color:var(--ink);text-transform:none}
/* États vides "Aucune donnée." */
.analytics>p{
  display:flex;align-items:center;justify-content:center;gap:10px;
  padding:26px;text-align:center;color:var(--muted);font-size:.9rem;
  background:var(--panel-2);border-radius:var(--r-md);margin-bottom:4px}
.analytics>p::before{content:"";width:22px;height:22px;flex:0 0 auto;opacity:.7;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%238a877f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 3v18h18'/%3E%3Crect x='7' y='11' width='3' height='6'/%3E%3Crect x='13' y='7' width='3' height='10'/%3E%3C/svg%3E") center/22px no-repeat}

/* ---------- 14. Page de LOGIN (si la feuille y est incluse) ---------- */
/* Marquer le <body> de login avec class="studio-login" (voir notes). */
/* Un seul groupe centré (marque + titre + carte), pas des rangées écartelées. */
body.studio-login{max-width:none;display:grid;align-content:center;justify-items:center;
  gap:18px;min-height:100vh;padding:24px}
body.studio-login .studio-brand{margin-bottom:2px}
body.studio-login .form-error{width:100%;max-width:380px;margin:0;padding:10px 12px;
  color:#a32c35;background:var(--red-tint);border:1px solid var(--red);
  border-radius:var(--r-sm);font-size:.9rem}
body.studio-login h1{font-size:1.35rem;text-align:center;padding:0}
body.studio-login form{width:100%;max-width:380px;background:var(--panel);
  border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--shadow-pop);padding:32px}
body.studio-login form p{margin:0 0 16px}
body.studio-login input{max-width:none}
body.studio-login button{width:100%}

/* ---------- 15. Responsive ---------- */
@media (max-width:760px){
  body{padding:20px 16px 96px}
  body>p{position:static;margin:12px 0 0}
  .theme-charte form,.hotspot-config form,
  .bloc-edit form:has(input[value="update_block"]){grid-template-columns:1fr}
  .bloc-edit{grid-template-columns:1fr;
    grid-template-areas:"head" "preview" "form"}
  .bloc-edit>form:has(input[value="toggle_block"]),
  .bloc-edit>form:has(input[value="delete_block"]){justify-self:stretch}
  .bloc-edit>form:has(input[value="toggle_block"]) button,
  .bloc-edit>form:has(input[value="delete_block"]) button{width:100%}
  .bloc-actions{flex-wrap:wrap}
  .connecteur table{display:block;overflow-x:auto;white-space:nowrap}
  input:not([type=hidden]):not([type=color]):not([type=file]),
  select,textarea{max-width:none}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}
/* --- Polish post-vérif : le login n'a qu'une action -> bouton primaire --- */
body.studio-login button{background:var(--orange);border-color:var(--orange);color:#fff}
body.studio-login button:hover{background:var(--orange-600);border-color:var(--orange-600)}

/* ---------- 16. Réordonnancement des blocs (glisser-déposer + boutons) ---------- */
.bloc-head{grid-area:head;display:flex;align-items:center;gap:10px;
  padding-bottom:12px;border-bottom:1px solid var(--line-soft)}
.bloc-head>strong{display:inline-flex;align-items:center;gap:8px;
  font-size:.95rem;font-weight:700;color:var(--ink);text-transform:capitalize}
.bloc-head>strong::before{content:"";flex:0 0 auto;width:22px;height:22px;border-radius:6px;
  background:var(--orange-tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%232b549c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='7' rx='1'/%3E%3Crect x='14' y='3' width='7' height='7' rx='1'/%3E%3Crect x='14' y='14' width='7' height='7' rx='1'/%3E%3Crect x='3' y='14' width='7' height='7' rx='1'/%3E%3C/svg%3E") center/14px no-repeat}
.bloc-drag{display:inline-flex;align-items:center;justify-content:center;
  width:30px;height:30px;padding:0;border:0;background:transparent;border-radius:6px;
  color:var(--muted);cursor:grab;touch-action:none}
.bloc-drag:hover{background:var(--orange-tint);color:var(--orange)}
.bloc-drag:active{cursor:grabbing}
.bloc-drag svg{fill:currentColor}
.bloc-move{margin-left:auto;display:inline-flex;gap:4px}
.btn-move{display:inline-flex;align-items:center;justify-content:center;
  width:30px;height:30px;padding:0;border:1px solid var(--line);border-radius:6px;
  background:var(--panel);color:var(--ink-2);cursor:pointer}
.btn-move:hover{border-color:var(--orange);color:var(--orange);background:var(--orange-tint)}
.btn-move svg{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.bloc-edit.dragging{opacity:.6;box-shadow:0 12px 30px rgba(14,35,80,.22);
  border-color:var(--orange);cursor:grabbing}

/* ---------- 17. Aperçu live de la page de garde (iframe en cadre téléphone) ---------- */
.apercu-portail{background:var(--panel);border:1px solid var(--line);
  border-radius:var(--r-lg);box-shadow:var(--shadow);padding:22px 24px;margin:0 0 20px}
.apercu-portail>h2{display:flex;align-items:center;gap:10px;
  font-size:1.2rem;font-weight:700;color:var(--ink);letter-spacing:-.01em;
  padding-bottom:14px;margin:0 0 18px;border-bottom:1px solid var(--line-soft)}
.apercu-portail>h2::before{content:"";flex:0 0 auto;width:28px;height:28px;border-radius:8px;
  background:var(--orange-tint) no-repeat center;background-size:18px 18px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%232b549c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E")}
.apercu-portail-bar{display:flex;align-items:center;gap:14px;margin-bottom:16px;flex-wrap:wrap}
.apercu-portail-bar a{color:var(--orange);font-weight:600;font-size:.85rem;text-decoration:none}
.apercu-portail-bar a:hover{text-decoration:underline}
/* inline-flex + centrage : sans ça, un <a class=btn-ghost> (Ouvrir l'aperçu,
   Retour au Studio) colle son texte en haut du bouton, contrairement à <button>. */
.btn-ghost{display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--line);background:var(--panel);color:var(--ink);text-decoration:none;
  height:38px;padding:0 14px;border-radius:8px;font:inherit;font-size:.85rem;font-weight:600;cursor:pointer}
.btn-ghost:hover{border-color:var(--orange);color:var(--orange);background:var(--orange-tint)}
.btn-ico{display:inline-flex;align-items:center;gap:7px}
.apercu-portail-phone{margin:0 auto;width:100%;max-width:390px;
  border:10px solid #1f1d1a;border-radius:34px;overflow:hidden;
  box-shadow:0 18px 40px rgba(14,35,80,.22);background:#1f1d1a}
.apercu-portail-phone iframe{display:block;width:100%;height:680px;border:0;background:#fff}
@media (max-width:760px){.apercu-portail-phone iframe{height:560px}}

/* ---------- 18. Corrections revue a11y/UX ---------- */
.bloc-drag{width:40px;height:40px}
.btn-move{width:40px;height:40px}
.bloc-move{gap:8px}
.btn-move:disabled{opacity:.4;cursor:not-allowed;border-color:var(--line);color:var(--muted);background:var(--panel)}
.apercu-portail-phone.loading{opacity:.55}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ============================================================
   19. APP-SHELL — atelier 3 colonnes
   Topbar (haut) | Palette (gauche) | Structure (centre) | Visualizer (droite)
   Remplace la page qui défilait. Les anciens sélecteurs body>h1 / body>p /
   body>form(add_block|publish) / .apercu-portail ne matchent plus (DOM changé)
   et restent inertes.
   ============================================================ */
.studio-app{
  display:grid;height:100vh;
  grid-template-columns:248px minmax(0,1fr) clamp(360px,30vw,440px);
  grid-template-rows:60px minmax(0,1fr);
  grid-template-areas:"top top top" "palette canvas inspector";
}

/* --- Barre supérieure --- */
.studio-top{
  grid-area:top;display:flex;align-items:center;gap:16px;padding:0 18px;height:60px;
  background:rgba(255,255,255,.92);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);box-shadow:var(--shadow);z-index:30}
.studio-brand{display:flex;align-items:center;gap:11px}
/* Logo posé à même la barre : pas de tuile blanche ni d'ombre autour. */
.studio-brand-mark{width:36px;height:36px;flex:0 0 auto;
  background:url("/assets/brand/knet-symbole.png") center/contain no-repeat}
.studio-brand-txt{display:flex;flex-direction:column;line-height:1.08;
  font-size:1rem;font-weight:700;color:var(--ink);letter-spacing:-.01em}
.studio-brand-txt small{font-size:.68rem;font-weight:600;color:var(--muted);letter-spacing:0}
.studio-top .edit-langues{margin:0}
.studio-top-actions{margin-left:auto;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
/* Retour à la console (superadmin) : un fil d'Ariane, pas un bouton d'action —
   d'où le chevron et le nom de l'établissement où l'on se trouve. */
.btn-retour{display:inline-flex;align-items:center;gap:6px;height:38px;padding:0 12px;
  margin-right:4px;border:1px solid var(--line);border-radius:9px;background:var(--panel);
  color:var(--ink-2);font-weight:600;font-size:.86rem;text-decoration:none;white-space:nowrap;
  max-width:220px;overflow:hidden;text-overflow:ellipsis}
.btn-retour:hover{border-color:var(--orange);color:var(--orange);background:var(--orange-tint)}
.btn-retour svg{flex:0 0 auto;opacity:.75}
.form-publish{margin:0}

/* --- Pastille de l'établissement (haut-droite) + menu --- */
.studio-user{position:relative;display:flex;align-items:center;margin-left:4px}
.user-pastille{display:grid;place-items:center;width:40px;height:40px;padding:0;
  border:0;border-radius:50%;cursor:pointer;
  background:linear-gradient(180deg,#3a63ad,var(--orange));color:#fff;
  font:inherit;font-size:.82rem;font-weight:700;letter-spacing:.02em;
  box-shadow:var(--shadow);transition:transform .12s,box-shadow .12s}
.user-pastille:hover{transform:translateY(-1px);box-shadow:var(--shadow-pop)}
.user-menu{position:absolute;top:calc(100% + 8px);right:0;z-index:50;
  display:none;min-width:224px;padding:6px;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r-md);
  box-shadow:var(--shadow-pop)}
/* Survol du groupe, focus clavier, ou ouverture au clic (studio.js). */
.studio-user:hover .user-menu,
.studio-user:focus-within .user-menu,
.studio-user.is-ouvert .user-menu{display:block}
.user-menu-nom{padding:8px 10px 10px;margin:0;
  border-bottom:1px solid var(--line-soft);
  font-size:.82rem;font-weight:700;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* justify-content + min-height : les entrées <button> (Paramètres, Statistiques)
   héritaient sinon du bouton global (contenu centré, 44px de haut) et se
   retrouvaient décalées et plus hautes que l'entrée <a> « Se déconnecter ». */
.user-menu-item{display:flex;align-items:center;justify-content:flex-start;gap:10px;
  width:100%;min-height:0;margin-top:2px;padding:9px 10px;border:0;border-radius:var(--r-sm);
  background:transparent;color:var(--ink-2);text-align:left;text-decoration:none;
  font:inherit;font-size:.86rem;font-weight:600;cursor:pointer}
.user-menu-item:hover{background:var(--orange-tint);color:var(--orange);text-decoration:none}
.user-menu-item svg{flex:0 0 auto;opacity:.85}
.user-menu-sortie{color:var(--red)}
.user-menu-sortie:hover{background:var(--red-tint);color:var(--red)}
.btn-primary{background:linear-gradient(180deg,#3a63ad,var(--orange));color:#fff;
  border-color:transparent;box-shadow:var(--shadow);min-height:40px;padding:0 20px}
.btn-primary:hover{background:linear-gradient(180deg,#345ca0,var(--orange-600));color:#fff}

/* --- Palette (gauche) : blocs draggables --- */
.studio-palette{grid-area:palette;overflow-y:auto;min-height:0;
  background:var(--panel);border-right:1px solid var(--line);padding:18px 16px 28px}
.studio-palette h2{font-size:.72rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.06em;color:var(--muted);margin-bottom:6px}
.palette-hint{font-size:.75rem;color:var(--muted);line-height:1.45;margin-bottom:16px}
.palette-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.palette-item{margin:0}
.palette-item button{flex-direction:column;gap:8px;width:100%;height:86px;padding:10px 8px;
  background:var(--panel-2);border:1px solid var(--line-soft);border-radius:var(--r-md);
  color:var(--ink-2);cursor:grab;text-align:center;font-size:.72rem;font-weight:600;
  line-height:1.2;white-space:normal}
.palette-item button:hover{border-color:var(--orange);color:var(--orange);
  background:var(--orange-tint);box-shadow:var(--shadow)}
.palette-item button:active{cursor:grabbing;transform:none}
.palette-item .palette-ico{display:grid;place-items:center;width:36px;height:36px;
  border-radius:9px;background:var(--panel);border:1px solid var(--line-soft);color:var(--orange)}
.palette-item button:hover .palette-ico{border-color:var(--orange)}
.palette-item.dragging-src{opacity:.45}

/* --- Colonne centrale : la SCÈNE (aperçu live + zone de dépôt) --- */
.studio-canvas{grid-area:canvas;display:flex;flex-direction:column;gap:12px;
  min-height:0;padding:18px;
  background-color:#132241;
  background-image:radial-gradient(rgba(255,255,255,.055) 1px,transparent 1px),
    radial-gradient(130% 100% at 50% 0%,#1b2f56,#0e1c38);
  background-size:18px 18px,100% 100%}
.canvas-head{display:flex;align-items:center;gap:9px;color:#f3f0e7;
  font-weight:600;font-size:.82rem;letter-spacing:.01em}
.canvas-hint{margin-left:auto;color:#c9c5b8;font-weight:500;font-size:.76rem}
.preview-dot{width:9px;height:9px;border-radius:50%;background:var(--green);
  box-shadow:0 0 0 3px rgba(70,179,74,.28)}
.preview-stage{position:relative;flex:1;min-height:0;display:grid;place-items:center}
:is(.studio-canvas,.apercu-page) .apercu-portail-phone{
  width:100%;max-width:376px;height:100%;max-height:780px;
  margin:0;border:8px solid #0f0e13;border-radius:34px;overflow:hidden;position:relative;
  box-shadow:0 26px 60px rgba(0,0,0,.5),inset 0 0 0 1px rgba(255,255,255,.06);background:#0f0e13;
  transition:max-width .22s ease,max-height .22s ease,border-radius .22s ease,border-width .22s ease}
:is(.studio-canvas,.apercu-page) .apercu-portail-phone::before{content:"";position:absolute;top:7px;left:50%;
  transform:translateX(-50%);width:58px;height:5px;border-radius:999px;
  background:#000;z-index:4;pointer-events:none}
:is(.studio-canvas,.apercu-page) .apercu-portail-phone iframe{width:100%;height:100%;border:0;background:#fff}

/* --- Page « Ouvrir l'aperçu » : le portail dans un châssis d'appareil --- */
.apercu-page{display:flex;flex-direction:column;height:100vh;
  background-color:#132241;
  background-image:radial-gradient(rgba(255,255,255,.055) 1px,transparent 1px),
    radial-gradient(130% 100% at 50% 0%,#1b2f56,#0e1c38);
  background-size:18px 18px,100% 100%}
.apercu-bar{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:0 18px;min-height:60px;
  background:rgba(255,255,255,.92);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);box-shadow:var(--shadow)}
.apercu-bar-actions{display:flex;align-items:center;gap:10px}
.apercu-page .preview-stage{padding:22px 18px}

/* Sélecteur de format : chaque appareil redimensionne le châssis.
   L'encoche n'a de sens que sur mobile. */
.device-toggle{margin:0 auto;display:flex;gap:2px;padding:3px;border-radius:999px;
  background:var(--panel-2);border:1px solid var(--line)}
.dev-btn{display:inline-flex;align-items:center;gap:6px;padding:6px 13px;border:0;
  border-radius:999px;background:transparent;color:var(--muted);cursor:pointer;
  font:inherit;font-size:.78rem;font-weight:600;line-height:1}
.dev-btn:hover{color:var(--ink);background:var(--panel)}
.dev-btn:focus-visible{outline:0;box-shadow:var(--focus)}
.dev-btn.is-active{background:var(--orange);color:#fff;box-shadow:var(--shadow)}
.preview-stage[data-device="tablet"] .apercu-portail-phone{max-width:620px;max-height:840px;
  border-radius:22px}
.preview-stage[data-device="desktop"] .apercu-portail-phone{max-width:100%;max-height:100%;
  border-width:10px 8px 8px;border-radius:14px}
.preview-stage[data-device="tablet"] .apercu-portail-phone::before,
.preview-stage[data-device="desktop"] .apercu-portail-phone::before{display:none}
@media (prefers-reduced-motion:reduce){
  :is(.studio-canvas,.apercu-page) .apercu-portail-phone{transition:none}}
.apercu-portail-phone.loading{opacity:.55}
/* Overlay de dépôt : visible seulement pendant un glissé depuis la palette */
.preview-dropzone{position:absolute;inset:0;display:none;place-items:center;z-index:5;
  border:2px dashed rgba(255,255,255,.55);border-radius:28px;
  background:rgba(43,84,156,.16);backdrop-filter:blur(2px);color:#fff}
.preview-dropzone-in{display:flex;flex-direction:column;align-items:center;gap:8px;
  font-weight:700;font-size:.92rem}
body.dragging-palette .preview-dropzone{display:grid}
body.dragging-palette .studio-canvas .apercu-portail-phone iframe{pointer-events:none}
.preview-dropzone.over{background:rgba(43,84,156,.32);border-color:#fff}

/* --- Colonne droite : l'INSPECTEUR (bloc sélectionné + réglages globaux) --- */
.studio-inspector{grid-area:inspector;overflow-y:auto;min-height:0;
  background:var(--panel);border-left:1px solid var(--line);padding:18px 18px 48px}
/* Zone du bloc sélectionné */
.inspector-block{margin-bottom:6px}
.inspector-empty{display:flex;flex-direction:column;align-items:center;gap:12px;
  text-align:center;color:var(--muted);padding:34px 18px;
  background:var(--panel-2);border:1px dashed var(--line);border-radius:var(--r-md)}
.inspector-empty svg{color:var(--muted);opacity:.8}
.inspector-empty p{font-size:.86rem;font-weight:500;max-width:220px}
.studio-inspector.has-selection .inspector-empty{display:none}
/* Un panneau de bloc */
.inspector-panel{background:var(--panel);border:1px solid var(--line);
  border-radius:var(--r-md);box-shadow:var(--shadow);padding:16px 16px 14px}
.insp-head{display:flex;align-items:center;gap:8px;
  padding-bottom:12px;margin-bottom:14px;border-bottom:1px solid var(--line-soft)}
.insp-title{display:inline-flex;align-items:center;gap:8px;font-size:1rem;font-weight:700;
  color:var(--ink);text-transform:capitalize;letter-spacing:-.01em}
.insp-title::before{content:"";flex:0 0 auto;width:24px;height:24px;border-radius:6px;
  background:var(--orange-tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%232b549c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='7' rx='1'/%3E%3Crect x='14' y='3' width='7' height='7' rx='1'/%3E%3Crect x='14' y='14' width='7' height='7' rx='1'/%3E%3Crect x='3' y='14' width='7' height='7' rx='1'/%3E%3C/svg%3E") center/15px no-repeat}
.insp-head .bloc-move{margin-left:auto}
.insp-close{width:34px;height:34px;padding:0;color:var(--muted);
  border:1px solid var(--line);border-radius:8px;background:var(--panel)}
.insp-close:hover{border-color:var(--orange);color:var(--orange);background:var(--orange-tint)}
/* Formulaire d'édition (pleine largeur, une colonne) */
.insp-form{display:flex;flex-direction:column;gap:12px}
.insp-form label{max-width:none}
.insp-form input:not([type=hidden]):not([type=color]):not([type=file]),
.insp-form select,.insp-form textarea{max-width:none}
.insp-form .btn-primary{align-self:flex-start;margin-top:2px}
/* Actions bloc (Masquer / Supprimer) */
.inspector-panel .bloc-actions{grid-column:auto;margin-top:14px;padding-top:12px}

/* --- Destination du bouton Carte, éditée dans le panneau du bloc --- */
/* .carte-config porte le style « carte de section » (fond, bordure, ombre) pensé
   pour la modale : dans le panneau, ce serait une carte dans une carte. */
.inspector-panel .carte-config{background:transparent;border:0;box-shadow:none;
  padding:0;margin:0}
.inspector-panel .carte-modes{margin:0}
.inspector-panel .carte-liens{margin-top:14px;padding-top:12px;border-top:1px solid var(--line-soft)}

/* --- Répéteur : une ligne = un élément (boutons d'action) --- */
.repeater{display:flex;flex-direction:column;gap:10px}
.rep-intro{margin:0;color:var(--muted);font-size:.84rem;line-height:1.5}
.rep-intro code{padding:1px 5px;border-radius:5px;background:var(--panel-2);
  border:1px solid var(--line-soft);font-size:.92em}
.rep-rows{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.rep-row{display:flex;align-items:flex-start;gap:8px;padding:10px;
  background:var(--panel-2);border:1px solid var(--line);border-radius:var(--r-md)}
.rep-row.rep-dragging{opacity:.85;border-color:var(--orange);border-style:dashed;
  box-shadow:var(--shadow-pop)}
.rep-grip{flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  width:22px;height:34px;color:var(--muted);cursor:grab;touch-action:none}
.rep-grip:active{cursor:grabbing}
.rep-fields{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:8px}
.rep-fields label{display:flex;flex-direction:column;gap:3px;max-width:none;margin:0}
.rep-fields label>span{font-size:.72rem;font-weight:600;text-transform:uppercase;
  letter-spacing:.04em;color:var(--muted)}
.rep-fields input,.rep-fields select{max-width:none;width:100%}
/* Le libellé et l'icône sont secondaires : l'URL est le champ qu'on remplit vraiment. */
.rep-meta{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.rep-del{flex:0 0 auto;width:30px;height:30px;padding:0;margin-top:14px;color:var(--muted);
  border:1px solid var(--line);border-radius:8px;background:var(--panel)}
.rep-del:hover{border-color:var(--red);color:var(--red);background:var(--red-tint)}
.rep-add{align-self:flex-start;display:inline-flex;align-items:center;gap:7px;
  padding:0 12px;height:34px;color:var(--orange);background:var(--panel);
  border:1px dashed var(--line);border-radius:9px;font-weight:600;font-size:.86rem}
.rep-add:hover{border-color:var(--orange);border-style:solid;background:var(--orange-tint)}

/* --- Modales de réglages (Paramètres, Statistiques) ouvertes depuis la barre --- */
body.modal-open{overflow:hidden}
.studio-modal{position:fixed;inset:0;z-index:60;display:flex;align-items:center;
  justify-content:center;padding:28px 20px}
.studio-modal[hidden]{display:none}
.modal-backdrop{position:absolute;inset:0;background:rgba(9,22,50,.52);backdrop-filter:blur(3px)}
.modal-card{position:relative;display:flex;flex-direction:column;width:min(820px,100%);
  max-height:min(86vh,880px);background:var(--panel);border:1px solid var(--line);
  border-radius:var(--r-lg);box-shadow:var(--shadow-pop);overflow:hidden}
.modal-head{flex:0 0 auto;display:flex;align-items:center;gap:12px;padding:16px 20px;
  border-bottom:1px solid var(--line);background:var(--panel-2)}
.modal-head h2{margin:0;font-size:1.05rem;font-weight:700;color:var(--ink);letter-spacing:-.01em}
.modal-close{margin-left:auto;width:34px;height:34px;padding:0;color:var(--muted);
  border:1px solid var(--line);border-radius:8px;background:var(--panel)}
.modal-close:hover{border-color:var(--orange);color:var(--orange);background:var(--orange-tint)}
/* flex:0 0 auto sinon la barre est écrasée par le corps et se dote d'un ascenseur fantôme. */
.modal-tabs{flex:0 0 auto;display:flex;gap:4px;padding:10px 14px 0;
  border-bottom:1px solid var(--line);background:var(--panel-2);
  overflow-x:auto;overflow-y:hidden}
.modal-tab{border:0;border-radius:8px 8px 0 0;background:transparent;color:var(--muted);
  padding:9px 14px;font:inherit;font-size:.84rem;font-weight:600;white-space:nowrap;
  border-bottom:2px solid transparent;cursor:pointer}
.modal-tab:hover{color:var(--ink);background:var(--panel)}
.modal-tab.is-active{color:var(--orange);background:var(--panel);border-bottom-color:var(--orange)}
.modal-body{flex:1 1 auto;min-height:0;overflow-y:auto;padding:6px 22px 24px}
.modal-pane[hidden]{display:none}
/* Les cartes de section se posent à plat dans la modale (le cadre, c'est la modale). */
.modal-pane :is(.theme-charte,.medias,.hotspot-config,.connecteur,.analytics){
  border:0;box-shadow:none;border-radius:0;padding:0;margin-top:22px}
.modal-pane > :is(section,div):first-child{margin-top:16px}
.modal-pane section + section{margin-top:26px;padding-top:24px;border-top:1px solid var(--line-soft)}

/* --- Responsive : sous 1080px, on empile --- */
@media (max-width:1080px){
  html,body{height:auto;overflow:auto}
  /* L'APERÇU d'abord, le panneau d'édition juste dessous (un bloc tapé dans
     l'aperçu doit montrer son formulaire à portée de scroll), la palette après. */
  .studio-app{height:auto;grid-template-columns:1fr;
    grid-template-rows:auto;grid-template-areas:"top" "canvas" "inspector" "palette"}
  .studio-top{position:sticky;top:0;flex-wrap:wrap;height:auto;padding:10px 14px;gap:10px;z-index:40}
  /* « Publier » domine seul en pleine largeur ; les actions secondaires
     s'alignent en grille dessous au lieu de s'empiler en rangées disparates. */
  .studio-top-actions{width:100%;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .studio-top-actions .btn-ghost{width:100%}
  .studio-top-actions .form-publish{grid-column:1/-1}
  .studio-top-actions .form-publish .btn-primary{width:100%}
  .studio-palette{border-right:0;border-top:1px solid var(--line)}
  .palette-grid{grid-template-columns:repeat(auto-fill,minmax(104px,1fr))}
  .studio-canvas{min-height:78vh}
  .studio-inspector{border-left:0;border-top:1px solid var(--line)}
}
@media (max-width:760px){
  .bloc-edit{grid-template-columns:1fr;grid-template-areas:"head" "preview" "form"}
  /* Palette en bandeau horizontal défilant : elle reste disponible sans
     repousser le contenu principal hors écran. */
  .palette-grid{display:flex;flex-wrap:nowrap;overflow-x:auto;gap:8px;
    padding-bottom:6px;-webkit-overflow-scrolling:touch}
  .palette-grid .palette-item{flex:0 0 118px}
}

/* -- Bandeau d'onboarding : raccorder le routeur (portail sans routeur) -- */
/* Sa présence ajoute une rangée à la grille du Studio ; absent, rien ne bouge. */
.studio-app:has(>.onboarding-routeur){
  grid-template-rows:60px auto minmax(0,1fr);
  grid-template-areas:"top top top" "onb onb onb" "palette canvas inspector";
}
.onboarding-routeur{
  grid-area:onb;display:flex;align-items:center;gap:14px;
  padding:12px 20px;border-bottom:1px solid var(--line);
  background:linear-gradient(90deg,var(--orange-tint),var(--panel));
}
.onboarding-ico{flex:none;display:grid;place-items:center;width:40px;height:40px;
  border-radius:var(--r-md);background:#fff;color:var(--orange);
  border:1px solid var(--line-soft);box-shadow:var(--shadow)}
.onboarding-txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.onboarding-txt strong{color:var(--ink);font-size:.92rem}
.onboarding-txt span{color:var(--muted);font-size:.82rem;line-height:1.45}
.onboarding-cta{flex:none;margin-left:auto;white-space:nowrap}

/* -- Guide « pas à pas » dans l'assistant de connexion -- */
.assistant-guide{margin:14px 0 4px;border:1px solid var(--line-soft);
  border-radius:var(--r-md);background:var(--panel-2);overflow:hidden}
.assistant-guide>summary{cursor:pointer;padding:11px 14px;font-weight:600;
  font-size:.86rem;color:var(--ink);list-style:none}
.assistant-guide>summary::-webkit-details-marker{display:none}
.assistant-guide>summary::before{content:"›";display:inline-block;margin-right:8px;
  color:var(--orange);font-weight:700;transition:transform .15s}
.assistant-guide[open]>summary::before{transform:rotate(90deg)}
.assistant-guide-liste{margin:0;padding:2px 18px 14px 34px;
  color:var(--ink-2);font-size:.83rem;line-height:1.55}
.assistant-guide-liste li{margin:7px 0}
.assistant-guide-liste code{padding:1px 5px;border-radius:5px;
  background:#fff;border:1px solid var(--line-soft);font-size:.9em}

@media (max-width:1080px){
  .studio-app:has(>.onboarding-routeur){
    grid-template-rows:60px auto auto minmax(0,1fr);
    grid-template-areas:"top" "onb" "canvas" "inspector" "palette"}
}
@media (max-width:760px){
  .onboarding-routeur{flex-wrap:wrap}
  .onboarding-cta{margin-left:0;width:100%}
}

/* -- Script de mise en service « à coller une fois » -- */
.assistant-script{margin:18px 0 6px;padding:16px;border:1px solid var(--line-soft);
  border-radius:var(--r-md);background:var(--panel-2)}
.assistant-script>h3{margin:0 0 6px;font-size:.92rem;color:var(--ink);
  display:flex;align-items:center;gap:9px}
.script-reco{font:600 10px/1 system-ui,sans-serif;letter-spacing:.03em;
  text-transform:uppercase;color:var(--orange);background:var(--orange-tint);
  border:1px solid var(--line-soft);padding:3px 7px;border-radius:20px}
.script-opt{display:flex;align-items:flex-start;gap:8px;margin:10px 0 4px;
  font-size:.82rem;color:var(--ink-2);line-height:1.4;cursor:pointer}
.script-opt input{margin-top:2px;flex:none}
.script-sortie{margin-top:12px}
.script-ids{display:flex;flex-wrap:wrap;gap:8px 18px;margin:0 0 8px}
.script-ids span{font:600 .82rem/1.4 var(--mono,ui-monospace,SFMono-Regular,Menlo,monospace);
  color:var(--ink);background:#fff;border:1px solid var(--line-soft);
  padding:5px 9px;border-radius:var(--r-sm);word-break:break-all}
.script-box{position:relative}
.script-box pre[data-script-code]{margin:0;padding:14px 14px 14px;
  background:var(--ink);color:#e7eefb;border-radius:var(--r-sm);
  font:.78rem/1.55 ui-monospace,SFMono-Regular,Menlo,monospace;
  white-space:pre;overflow-x:auto;max-height:340px;overflow-y:auto}
.script-copier{position:absolute;top:8px;right:8px;z-index:2}

/* -- Journal d'exploitation -- */
.table-journal{width:100%;border-collapse:collapse;font-size:.82rem;margin-top:12px}
.table-journal th,.table-journal td{text-align:left;padding:7px 10px;border-bottom:1px solid var(--line-soft);vertical-align:top}
.table-journal thead th{font-weight:600;color:var(--muted);font-size:.76rem;text-transform:uppercase;letter-spacing:.03em}
.table-journal td:nth-child(4){color:var(--muted);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.78rem}

/* Placement d'un bloc dans le parcours (avant / après connexion) : réglage
   d'organisation, distinct du contenu — d'où la séparation visuelle. */
.insp-placement{margin:0;padding:12px 0 0;border-top:1px solid var(--line)}
.insp-placement p{margin:0}
.insp-placement label{display:block;font-weight:600;font-size:.82rem;color:var(--ink-2)}
.insp-placement select{width:100%;margin-top:5px}