/* Griffelio — coquille d'application (identité claire du brandkit) */
/* Tokens : fournis par la skin active (frontend/skins/<nom>/skin.css). */
*{box-sizing:border-box;margin:0;padding:0}
body{
  background:var(--blanc);color:var(--noir);
  font-family:var(--sans);font-size:15px;line-height:1.6;
  -webkit-font-smoothing:antialiased;min-height:100vh;
  display:flex;flex-direction:column;
}
a{color:var(--encre);text-decoration:none}
a:hover{text-decoration:underline}
button,input,select{font-family:inherit;font-size:inherit}
:focus-visible{outline:2px solid var(--encre);outline-offset:2px}
.contenu{width:100%;max-width:1060px;margin:0 auto;padding:0 clamp(16px,4vw,40px)}
.muet{color:var(--gris)}

/* Barre haute */
.barre{border-bottom:1px solid var(--filet);background:var(--barre-fond);backdrop-filter:blur(8px);position:sticky;top:0;z-index:20}
.barre .contenu{display:flex;align-items:center;gap:26px;height:58px}
.marque{font-family:var(--serif);font-size:20px;color:var(--noir);letter-spacing:.4px}
.marque em{font-style:italic}
.marque:hover{text-decoration:none}
.barre nav{display:flex;gap:20px}
.barre nav a{color:var(--gris);font-size:12.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.barre nav a.actif,.barre nav a:hover{color:var(--noir);text-decoration:none}
.session{margin-left:auto;display:flex;align-items:center;gap:12px;color:var(--gris);font-size:13.5px}

/* Boutons */
.btn{
  display:inline-flex;align-items:center;gap:7px;
  border:1px solid var(--filet);background:var(--blanc);color:var(--noir);
  padding:8px 14px;border-radius:10px;font-size:13.5px;font-weight:700;cursor:pointer;
  transition:border-color .15s,color .15s,background .15s;
}
.btn:hover{border-color:var(--noir);text-decoration:none}
.btn-primaire{background:var(--encre);border-color:var(--encre);color:#fff}
.btn-primaire:hover{background:var(--encre-fonce);border-color:var(--encre-fonce)}
.btn-danger{color:var(--danger)}
.btn-danger:hover{border-color:var(--danger)}
.btn-discret{border-color:transparent;color:var(--gris);padding:8px 8px}
.btn-discret:hover{color:var(--noir);border-color:var(--filet)}

/* Pages */
main.contenu{flex:1;padding-top:36px;padding-bottom:60px}
.entete-page{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:26px;flex-wrap:wrap}
h1{font-family:var(--serif);font-weight:500;font-size:clamp(26px,4vw,34px)}
.sous-titre{color:var(--gris);font-size:14px;margin-top:4px}
.info{background:var(--velin);border:1px solid var(--filet);border-left:3px solid var(--ok);border-radius:10px;padding:12px 16px;margin-bottom:20px;font-size:14px}
.alerte{background:#faf1ef;border:1px solid #eddcd7;border-left:3px solid var(--danger);border-radius:10px;padding:12px 16px;margin-bottom:20px;font-size:14px;color:#7c2b1c}
.vide{border:1px dashed var(--filet);border-radius:14px;padding:60px 20px;text-align:center;color:var(--gris)}

/* Cartes de signatures */
.grille-signatures{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:18px}
.carte-signature{
  border:1px solid var(--filet);border-radius:14px;background:var(--blanc);
  padding:18px 20px;display:flex;flex-direction:column;gap:8px;
  transition:box-shadow .2s,border-color .2s;
}
.carte-signature:hover{border-color:#d8d9de;box-shadow:0 18px 40px -26px rgba(20,21,25,.35)}

.cs-type{font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--encre)}
.cs-structure{font-family:var(--mono);font-size:11.5px;color:var(--gris)}
.carte-signature h2{font-family:var(--serif);font-weight:500;font-size:20px;line-height:1.25}
.cs-date{font-size:12.5px;color:var(--gris)}

.en-ligne{display:inline-flex;gap:8px;align-items:center}

/* Badges */
.badge{display:inline-block;border:1px solid var(--filet);border-radius:999px;padding:3px 10px;font-size:11.5px;font-weight:800;letter-spacing:.06em;color:var(--gris)}
.badge-ok{color:var(--ok);border-color:#cfe6dc}
.badge-plein{color:var(--danger);border-color:#eddcd7}

/* Tableaux admin */
.tableau{width:100%;border-collapse:collapse;font-size:14px;margin-top:6px}
.tableau th{
  text-align:left;font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:var(--gris);border-bottom:1px solid var(--noir);padding:10px 12px;
}
.tableau td{border-bottom:1px solid var(--filet);padding:12px;vertical-align:middle}
.form-quota input[type=number]{width:78px;border:1px solid var(--filet);border-radius:8px;padding:7px 9px}

.stat{border:1px solid var(--filet);border-radius:14px;padding:20px;display:grid;gap:2px;color:var(--gris);font-size:13px}
.stat .chiffre{font-family:var(--serif);font-size:38px;color:var(--noir);line-height:1.1}

.form-ligne{display:flex;gap:10px;margin:6px 0 26px;flex-wrap:wrap}
.form-ligne input[type=email]{flex:1;min-width:240px;border:1px solid var(--filet);border-radius:10px;padding:9px 12px}
.lien-invitation{display:block;margin-top:8px;font-family:var(--mono);font-size:12.5px;word-break:break-all;background:var(--blanc);border:1px solid var(--filet);border-radius:8px;padding:8px 10px}

/* Formulaires */
.form{display:grid;gap:16px;max-width:420px}
.form label{display:grid;gap:6px;font-size:12.5px;font-weight:700;letter-spacing:.06em;color:var(--gris);text-transform:uppercase}
.form input{border:1px solid var(--filet);border-radius:10px;padding:11px 13px;font-size:15px;font-weight:400;letter-spacing:normal;text-transform:none;color:var(--noir)}
.form input:focus{outline:none;border-color:var(--encre)}
.form-parametres{margin-top:6px}

/* Auth */
.page-auth{display:grid;place-items:center;background:
  radial-gradient(700px 340px at 78% -6%, var(--halo), transparent 60%), var(--blanc);
  padding:24px;}
.carte-auth{
  width:min(430px,100%);border:1px solid var(--filet);border-radius:18px;background:var(--blanc);
  padding:34px 34px 28px;box-shadow:0 34px 80px -40px rgba(20,21,25,.35);
}
.auth-marque{text-align:center;margin-bottom:22px}
.auth-marque h1{font-family:var(--serif);font-weight:500;font-size:38px}
.auth-marque h1 em{font-style:italic}
.auth-marque svg{margin:6px auto 4px}
.auth-marque p{color:var(--gris);font-size:13.5px}
.carte-auth .form{max-width:none}
.aide-auth{margin-top:16px;font-size:12.5px;color:var(--gris);text-align:center;line-height:1.7}

/* Pied */
.pied{display:flex;align-items:center;gap:14px;padding-top:18px;padding-bottom:26px;color:var(--gris);font-size:12.5px;border-top:1px solid var(--filet)}
.pied svg{flex:none}

@media (max-width:720px){
  .barre nav{display:none}
  .session span{display:none}
}

/* Sélecteur de skin (V de DMSV) */




/* ── 1.3 : vignettes des signatures ── */
.vignette{display:block;height:132px;overflow:hidden;background:#ffffff;border:1px solid var(--filet);border-radius:10px;position:relative;margin-bottom:10px}
.vignette:hover{border-color:#c9ccd4;text-decoration:none}
/* 1.80 — La vignette est un cadre isolé : la mise à l'échelle vit
   DANS le srcdoc, pas ici. Ne restent que ses dimensions. */
.vignette-int{display:block;width:100%;height:100%;border:0;pointer-events:none;background:#ffffff}
.vignette-vide{display:grid;place-items:center;height:100%;color:var(--gris);font-size:12px;text-align:center;padding:0 14px}

/* ── 1.3 : groupes de signatures ── */
.chips-groupes{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:14px}
.chip-groupe{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--filet);border-radius:999px;padding:6px 13px;font-size:13px;font-weight:700;color:var(--gris)}
.chip-groupe span{font-size:11px;font-weight:800;background:var(--velin);border-radius:999px;padding:1px 7px}
.chip-groupe:hover{border-color:var(--gris);text-decoration:none}
.chip-groupe.actif{background:var(--inverse-fond);border-color:var(--inverse-fond);color:var(--inverse-texte)}
.chip-groupe.actif span{background:transparent;color:var(--inverse-texte)}
.chip-form{display:inline-flex;gap:6px;align-items:center}
.chip-form input[type=text]{border:1px solid var(--filet);border-radius:999px;padding:6px 12px;font-size:13px;background:var(--blanc);color:var(--noir);width:160px}
.gestion-groupe{margin:-4px 0 16px}
.btn-mini{padding:6px 10px;font-size:12px}
.cs-groupe{margin-top:2px}
.cs-groupe select{width:100%;border:1px solid var(--filet);border-radius:8px;padding:6px 8px;font-size:12.5px;background:var(--blanc);color:var(--noir)}

/* ── 1.3 : page Mes informations ── */









.profil-form{padding:4px 16px 16px;display:grid;gap:11px}
.profil-form label{display:grid;gap:5px;font-size:11.5px;font-weight:700;color:var(--gris);letter-spacing:.05em}
.profil-form input,.profil-form textarea{border:1px solid var(--filet);border-radius:9px;padding:9px 11px;font-size:14px;font-weight:400;letter-spacing:normal;background:var(--blanc);color:var(--noir)}
.profil-form textarea{resize:vertical;min-height:52px}
.profil-form .duo{display:grid;grid-template-columns:1fr 1fr;gap:10px}






@media (max-width:720px){ .profil-form .duo{grid-template-columns:1fr} }

/* ── 1.4.1 : rangement UX du tableau de bord ── */
.carte-signature{padding:14px 16px;gap:5px}
.carte-signature h2{
  font-size:17px;line-height:1.25;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.cs-date{font-size:11.5px}
.vignette{height:102px;margin-bottom:6px}

.vignette::before{content:"";position:absolute;left:0;right:0;bottom:0;height:24px;background:linear-gradient(rgba(255,255,255,0),#ffffff);z-index:1;pointer-events:none}
.cs-groupe select{padding:5px 8px;font-size:12px;color:var(--gris)}



.chip-form{margin-left:auto}
.chip-form input[type=text]{width:132px;border-color:transparent;background:var(--velin)}
.chip-form input[type=text]:focus{border-color:var(--encre);background:var(--blanc);outline:none}
.chip-form .btn{border-color:transparent;color:var(--gris)}
.chip-form .btn:hover{border-color:var(--filet);color:var(--noir)}
@media (max-width:860px){ .chip-form{margin-left:0} }

/* ════════════════════════════════════════════════════════════
   1.5.1 — PARURE : le brandkit au premier plan
   ════════════════════════════════════════════════════════════ */

/* ── Selects dignes de ce nom, partout ── */
main select, .barre select{
  appearance:none;-webkit-appearance:none;-moz-appearance:none;
  background-color:var(--blanc);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%236f727b' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 11px center;
  border:1px solid var(--filet);border-radius:10px;
  padding:8px 32px 8px 12px;font:inherit;font-size:13px;font-weight:600;color:var(--noir);
  cursor:pointer;transition:border-color .15s, box-shadow .15s;
}
main select:hover{border-color:#c9ccd4}
main select:focus{outline:none;border-color:var(--encre);box-shadow:0 0 0 3px var(--selection)}

/* ── Barre : présence et finesse ── */
.barre{position:sticky;top:0;z-index:40;background:var(--barre-fond);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--filet)}
.barre .marque{font-size:24px}
.barre nav a{position:relative;padding:6px 2px;margin:0 10px;border-radius:0;font-weight:700;color:var(--gris)}
.barre nav a:hover{color:var(--noir);background:transparent;text-decoration:none}
.barre nav a.actif{color:var(--noir);background:transparent}
.barre nav a.actif::after{content:"";position:absolute;left:0;right:0;bottom:-14px;height:2px;background:var(--or)}
.barre .session span{color:var(--gris);font-size:13px}

/* ── Titres de pages : le filet d'or du brandkit ── */
.entete-page{align-items:flex-end;border-bottom:1px solid var(--filet);padding-bottom:16px;margin-bottom:18px}
.entete-page h1{position:relative;padding-bottom:12px}
.entete-page h1::after{content:"";position:absolute;left:2px;bottom:0;width:52px;height:3px;background:var(--or);border-radius:2px}
.entete-outils{display:flex;gap:10px;align-items:center}

/* ── Bascule grille / liste ── */
.bascule-vue{display:inline-flex;border:1px solid var(--filet);border-radius:10px;overflow:hidden;background:var(--blanc)}
.bascule-vue a{display:grid;place-items:center;width:36px;height:36px;color:var(--gris);transition:background .15s,color .15s}
.bascule-vue a:hover{color:var(--noir);background:var(--velin);text-decoration:none}
.bascule-vue a.actif{background:var(--inverse-fond);color:var(--inverse-texte)}

/* ── Cartes : papier, halo d'encre ── */
.carte-signature{border-radius:16px;overflow:visible;transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease}
.carte-signature:hover{transform:translateY(-2px);border-color:#dcdfe8;box-shadow:0 20px 44px -30px rgba(32,54,200,.35), 0 6px 18px -12px rgba(20,21,25,.18)}
.vignette{background:var(--papier);border-radius:12px;box-shadow:inset 0 0 0 1px var(--filet);border:none}
.cs-type{display:inline-block;font-size:10px;font-weight:800;letter-spacing:.08em;padding:3px 9px;border-radius:999px;background:rgba(32,54,200,.08);color:var(--encre)}

.cs-structure{color:var(--gris)}

/* ── Boutons : encre et retenue ── */
.btn{border-radius:10px;font-weight:700;transition:background .15s,border-color .15s,color .15s,box-shadow .15s}
.btn:hover{border-color:#c9ccd4;background:var(--velin)}
.btn-primaire{box-shadow:0 10px 24px -14px rgba(32,54,200,.55)}
.btn-primaire:hover{background:var(--encre-fonce);border-color:var(--encre-fonce)}
.btn-ouvrir{color:var(--encre);border-color:rgba(32,54,200,.3)}
.btn-ouvrir:hover{background:var(--encre);border-color:var(--encre);color:#ffffff}

/* ── Pied de carte : select + Ouvrir + menu ── */


.select-habille{display:block}
.select-habille select{width:100%;padding:7px 30px 7px 11px;font-size:12.5px;color:var(--gris)}


/* ── Menu d'actions (⋯) ── */
.menu-actions{position:relative}
.menu-actions summary{
  list-style:none;display:grid;place-items:center;width:32px;height:32px;
  border:1px solid var(--filet);border-radius:10px;background:var(--blanc);
  color:var(--gris);font-size:17px;line-height:1;cursor:pointer;user-select:none;
  transition:background .15s,border-color .15s,color .15s;
}
.menu-actions summary::-webkit-details-marker{display:none}
.menu-actions summary:hover{background:var(--velin);color:var(--noir)}
.menu-actions[open] summary{background:var(--inverse-fond);border-color:var(--inverse-fond);color:var(--inverse-texte)}
.menu-liste{
  position:absolute;right:0;top:calc(100% + 6px);z-index:30;min-width:170px;
  background:var(--blanc);border:1px solid var(--filet);border-radius:12px;
  box-shadow:0 24px 48px -28px rgba(20,21,25,.4);padding:6px;
}
.menu-liste form{margin:0}
.menu-liste button{
  display:block;width:100%;text-align:left;border:none;background:transparent;
  font:inherit;font-size:13px;font-weight:600;color:var(--noir);
  padding:8px 11px;border-radius:8px;cursor:pointer;
}
.menu-liste button:hover{background:var(--velin)}
.menu-liste button.danger{color:var(--danger)}
.menu-liste button.danger:hover{background:#fdf1ee}

/* ── Vue liste ── */
.grille-signatures.vue-liste{display:flex;flex-direction:column;gap:10px}
.vue-liste .carte-signature{
  display:grid;grid-template-columns:168px minmax(0,1fr) auto;
  grid-template-areas:"vig tete pied" "vig titre pied" "vig date pied";
  column-gap:16px;row-gap:2px;align-items:center;padding:12px 16px;
}
.vue-liste .carte-signature:hover{transform:none}
.vue-liste .vignette{grid-area:vig;height:74px;margin:0}

.vue-liste .vignette::before{height:16px}

.vue-liste .carte-signature h2{grid-area:titre;font-size:15.5px;-webkit-line-clamp:1;margin:0}
.vue-liste .cs-date{grid-area:date;margin:0 0 2px}

@media (max-width:860px){
  .vue-liste .carte-signature{grid-template-columns:1fr;grid-template-areas:"tete" "titre" "date" "vig" "pied"}

}

/* ── Chips : la pointe d'or ── */
.chip-groupe{background:var(--blanc);transition:border-color .15s,color .15s}
.chip-groupe:hover{border-color:var(--or);color:var(--noir)}

/* ── Bandeaux d'information ── */
.info{background:rgba(32,54,200,.06);border:1px solid rgba(32,54,200,.16);color:var(--encre-fonce);border-radius:10px;padding:10px 14px}
.alerte{border-radius:10px;padding:10px 14px}

/* ── Pied de site ── */
.pied{border-top:1px solid var(--filet);margin-top:34px;padding-top:18px}

/* ── 1.6 : divers auth ── */
.lien-retour{margin-top:14px;font-size:13.5px}


/* ════════════════════════════════════════════════════════════
   1.10 — LA FEUILLE À EN-TÊTE : habillage des pages publiques,
   champs « ligne de registre », encre personnalisable
   ════════════════════════════════════════════════════════════ */

/* ── Auth : le fond devient une feuille à en-tête ──
   Décor fixé au viewport (le contenu défile) ; la scène porte le
   contenu au-dessus du filigrane. Les paddings réservent la place
   du fleuron en tête et du pied éditeur/version. */
.page-auth{background:var(--velin);padding:96px 24px 84px}
.auth-cadre{
  position:fixed;inset:14px;z-index:0;pointer-events:none;
  border:1px solid color-mix(in srgb,var(--or) 35%,transparent);border-radius:4px;
}
.auth-filigrane{
  position:fixed;inset:0;z-index:0;display:grid;place-items:center;
  font-family:var(--serif);font-style:italic;
  font-size:clamp(340px,92vmin,820px);line-height:1;
  color:var(--filigrane);pointer-events:none;user-select:none;
}
.auth-fleuron{
  position:fixed;top:27px;left:0;right:0;z-index:0;
  display:flex;align-items:center;justify-content:center;gap:12px;
  color:var(--or);font-size:13px;line-height:1;pointer-events:none;
}
.auth-fleuron span{width:54px;height:1px;background:color-mix(in srgb,var(--or) 45%,transparent)}
.auth-scene{position:relative;z-index:1;width:100%;display:grid;place-items:center}
.auth-pied{
  position:fixed;left:34px;right:34px;bottom:22px;z-index:1;
  display:flex;justify-content:space-between;gap:14px;pointer-events:none;
  font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--gris);
}
.carte-auth > h1{font-family:var(--serif);font-weight:500;font-size:26px;margin-bottom:6px}
.carte-auth .sous-titre{margin-bottom:14px}
.carte-auth .info,.carte-auth .alerte{margin-bottom:14px}
.carte-auth .form-auth{display:grid;gap:16px;margin-top:6px}
.carte-auth .form-auth label{display:grid;gap:6px;font-size:12.5px;font-weight:700;letter-spacing:.06em;color:var(--gris);text-transform:uppercase}
@media (max-width:560px){
  .page-auth{padding:78px 14px 72px}
  .auth-cadre{inset:9px}
  .auth-pied{left:20px;right:20px;bottom:15px}
}

/* ── Champs « ligne de registre » : les formulaires-documents
   (auth, paramètres admin, profils) troquent la boîte contre le
   soulignement. Les contrôles en ligne (chips, quotas, invitations)
   gardent la leur. ── */
.form input,.form-auth input,.profil-form input{
  border:0;border-bottom:1px solid color-mix(in srgb,var(--noir) 28%,transparent);
  border-radius:0;background:transparent;padding:10px 2px 9px;
  font-size:15px;font-weight:400;letter-spacing:normal;text-transform:none;color:var(--noir);
}
.form input::placeholder,.form-auth input::placeholder,.profil-form input::placeholder{color:color-mix(in srgb,var(--gris) 72%,transparent)}
.form input:focus,.form-auth input:focus,.profil-form input:focus{
  outline:none;border-bottom-color:var(--encre);box-shadow:0 1px 0 0 var(--encre);
}

/* ── L'encre irrigue tout : plus un bleu en dur, la papeterie et les
   encres personnalisées héritent des mêmes halos ── */
.cs-type{background:color-mix(in srgb,var(--encre) 8%,transparent);color:var(--encre)}

.carte-signature:hover{box-shadow:0 20px 44px -30px color-mix(in srgb,var(--encre) 35%,transparent),0 6px 18px -12px rgba(20,21,25,.18)}
.btn-primaire{box-shadow:0 10px 24px -14px color-mix(in srgb,var(--encre) 55%,transparent)}
.btn-ouvrir{border-color:color-mix(in srgb,var(--encre) 30%,transparent)}
.info{background:color-mix(in srgb,var(--encre) 6%,transparent);border-color:color-mix(in srgb,var(--encre) 16%,transparent)}

/* ── Admin : Identité & encre ── */
.form-section{font-family:var(--serif);font-weight:500;font-size:22px;margin-top:14px;border-top:1px solid var(--filet);padding-top:22px}
.etiquette{font-size:12.5px;font-weight:700;letter-spacing:.06em;color:var(--gris);text-transform:uppercase}
.champ-encre{display:grid;gap:10px}
.nuancier{display:flex;gap:16px;flex-wrap:wrap}
.encre-puce{
  display:grid;justify-items:center;gap:7px;border:0;background:transparent;
  font:inherit;font-size:11.5px;font-weight:700;color:var(--gris);cursor:pointer;padding:2px;
}
.encre-puce i{
  width:26px;height:26px;border-radius:50%;background:var(--puce,transparent);
  box-shadow:inset 0 0 0 1px rgba(20,21,25,.12);transition:box-shadow .15s;
}
.encre-puce:hover,.encre-puce.actif{color:var(--noir)}
.encre-puce.actif i{box-shadow:0 0 0 3px var(--blanc),0 0 0 5px var(--or)}
.encre-puce.encre-skin i{background:transparent;border:1px dashed var(--gris);box-shadow:none}
.encre-puce.encre-skin.actif i{border:1px solid var(--or);box-shadow:0 0 0 3px var(--blanc),0 0 0 5px var(--or)}
.encre-libre{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.encre-libre input{font-family:var(--mono);font-size:14px;width:112px;flex:none}
.encre-libre .muet{font-size:12px}
.aide-champ{font-size:12.5px;color:var(--gris);margin-top:-6px}
.pied .pied-editeur{margin-left:auto}

/* ════════════════════════════════════════════════════════════
   1.11 — LE GRAND GESTE : les curseurs vers le wahou.
   Composition (le G quitte le centre, la griffe traverse la page
   et se signe au chargement), carte-bijou (passe-partout, traits
   de coupe, entrée en lever), encre qui court sous les champs.
   ════════════════════════════════════════════════════════════ */

/* ── Composition du fond ── */
.page-auth{background:
  radial-gradient(120% 90% at 50% 42%, transparent 55%, color-mix(in srgb,var(--noir) 5%,transparent)),
  var(--velin)}
.auth-decor{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.auth-filigrane{position:absolute;place-items:center start;padding-left:2vw;
  font-size:clamp(360px,88vmin,920px);animation:filigrane-lever 1.4s ease .1s both}
.auth-paraphe{position:absolute;left:-18vw;bottom:16vh;width:138vw;height:auto;transform:rotate(-7deg)}
.auth-paraphe path{
  stroke:color-mix(in srgb,var(--encre) 13%,transparent);stroke-width:2;
  stroke-linecap:round;fill:none;vector-effect:non-scaling-stroke;
  stroke-dasharray:1;stroke-dashoffset:1;
  animation:se-signer 1.7s cubic-bezier(.6,.05,.3,1) .25s forwards;
}

/* ── La carte-bijou ── */
.carte-auth{position:relative;animation:carte-lever .6s cubic-bezier(.2,.7,.25,1) both;
  box-shadow:0 44px 90px -46px rgba(20,21,25,.45),0 10px 30px -18px rgba(20,21,25,.18)}
.carte-auth::before{content:"";position:absolute;inset:10px;pointer-events:none;
  border:1px solid color-mix(in srgb,var(--or) 38%,transparent);border-radius:11px}
.carte-auth::after{content:"";position:absolute;inset:-11px;pointer-events:none;
  --tc:color-mix(in srgb,var(--or) 60%,transparent);
  background:
   linear-gradient(var(--tc) 0 0) left 0 top 0/14px 1px,
   linear-gradient(var(--tc) 0 0) left 0 top 0/1px 14px,
   linear-gradient(var(--tc) 0 0) right 0 top 0/14px 1px,
   linear-gradient(var(--tc) 0 0) right 0 top 0/1px 14px,
   linear-gradient(var(--tc) 0 0) left 0 bottom 0/14px 1px,
   linear-gradient(var(--tc) 0 0) left 0 bottom 0/1px 14px,
   linear-gradient(var(--tc) 0 0) right 0 bottom 0/14px 1px,
   linear-gradient(var(--tc) 0 0) right 0 bottom 0/1px 14px;
  background-repeat:no-repeat}
.auth-marque h1{font-size:clamp(40px,6vw,52px)}
.auth-marque svg path{stroke-dasharray:1;stroke-dashoffset:1;
  animation:se-signer .9s cubic-bezier(.6,.05,.3,1) .5s forwards}
.auth-fleuron span{width:76px;background:color-mix(in srgb,var(--or) 55%,transparent)}

/* ── L'encre court sous les champs ── */
.form input,.form-auth input,.profil-form input{
  background-image:linear-gradient(var(--encre),var(--encre));
  background-repeat:no-repeat;background-position:left bottom;background-size:0% 2px;
  transition:background-size .28s ease,border-color .15s;
}
.form input:focus,.form-auth input:focus,.profil-form input:focus{
  box-shadow:none;background-size:100% 2px;
}

/* ── Boutons : la presse ── */
.btn-primaire{transition:background .15s,border-color .15s,transform .14s,box-shadow .2s}
.btn-primaire:hover{transform:translateY(-1px);box-shadow:0 16px 30px -14px color-mix(in srgb,var(--encre) 65%,transparent)}
.btn-primaire:active{transform:translateY(0) scale(.99)}

@keyframes carte-lever{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes filigrane-lever{from{opacity:0}to{opacity:1}}
@keyframes se-signer{to{stroke-dashoffset:0}}

@media (max-width:560px){
  .carte-auth::after{display:none}
  .auth-filigrane{padding-left:0;place-items:center}
  .auth-paraphe{left:-42vw;width:200vw;bottom:9vh}
}
@media (prefers-reduced-motion:reduce){
  .carte-auth,.auth-filigrane,.auth-paraphe path,.auth-marque svg path{animation:none}
  .auth-paraphe path,.auth-marque svg path{stroke-dasharray:none;stroke-dashoffset:0}
  .form input,.form-auth input,.profil-form input{transition:none}
}

/* ════════════════════════════════════════════════════════════
   1.12 — GALERIE & CABINET : les signatures deviennent des
   épreuves (tirage + cartel, actions sous voile au survol) ;
   Mes informations se range en cabinet à quatre cartes.
   ════════════════════════════════════════════════════════════ */

/* ── Galerie d'épreuves ── */
.grille-signatures{grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:30px 34px}
.carte-signature{border:none;background:transparent;padding:0;gap:12px;border-radius:0}
.carte-signature:hover{transform:none;box-shadow:none;border:none}
.cs-tirage{position:relative;border-radius:12px}
.vignette{height:188px;margin:0;border-radius:12px;box-shadow:inset 0 0 0 1px var(--filet);
  transition:box-shadow .18s ease, transform .18s ease}

.carte-signature:hover .vignette,.carte-signature:focus-within .vignette{
  border:none;
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--or) 55%,transparent),
    0 26px 50px -30px color-mix(in srgb,var(--encre) 40%,transparent),
    0 8px 20px -12px rgba(20,21,25,.2);
  transform:translateY(-3px);
}
.cs-voile{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  display:flex;gap:8px;align-items:center;padding:10px 12px;
  border-radius:0 0 12px 12px;border-top:1px solid var(--filet);
  background:color-mix(in srgb,var(--blanc) 88%,transparent);
  backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);
  opacity:0;transform:translateY(8px);pointer-events:none;
  transition:opacity .18s ease, transform .18s ease;
}
.carte-signature:hover .cs-voile,.carte-signature:focus-within .cs-voile{
  opacity:1;transform:none;pointer-events:auto;
}
.cs-voile .cs-groupe{flex:1;min-width:0;margin:0}
.cs-voile .btn-ouvrir{padding:7px 13px;font-size:12.5px}
.cs-voile .menu-liste{top:auto;bottom:calc(100% + 6px)} /* le menu s'ouvre vers le haut */
.cs-cartel{display:grid;gap:5px;padding:0 2px}
.cs-cartel h2{font-size:19px;-webkit-line-clamp:1}
.cs-meta{display:flex;align-items:center;gap:10px;font-size:12px;color:var(--gris)}
.cs-meta .cs-date{margin:0;font-size:12px}
@media (hover:none){
  .cs-voile{position:static;opacity:1;transform:none;pointer-events:auto;
    background:transparent;backdrop-filter:none;border-top:none;
    border-radius:0;padding:10px 0 0}
}

/* ── Vue liste, adaptée au nouvel arbre (tirage en display:contents) ── */
.grille-signatures.vue-liste{gap:10px}
.vue-liste .carte-signature{
  display:grid;grid-template-columns:168px minmax(0,1fr) minmax(280px,340px);
  grid-template-areas:"vig cartel voile";align-items:center;column-gap:16px;row-gap:4px;
  background:var(--blanc);border:1px solid var(--filet);border-radius:14px;padding:12px 16px;
}
.vue-liste .cs-tirage{display:contents}
.vue-liste .vignette{grid-area:vig;height:74px}

.vue-liste .carte-signature:hover .vignette{transform:none;box-shadow:inset 0 0 0 1px var(--filet)}
.vue-liste .cs-cartel{grid-area:cartel;gap:3px}
.vue-liste .cs-cartel h2{font-size:15.5px}
.vue-liste .cs-voile{grid-area:voile;position:static;opacity:1;transform:none;pointer-events:auto;
  background:transparent;backdrop-filter:none;border:none;border-radius:0;padding:0}
.vue-liste .cs-voile .menu-liste{bottom:auto;top:calc(100% + 6px)}
@media (max-width:860px){
  .vue-liste .carte-signature{grid-template-columns:1fr;grid-template-areas:"vig" "cartel" "voile"}
}

/* ── Aperçu agrandi au survol d’une vignette ── */
.apercu-signature-survol{
  position:fixed;left:0;top:0;z-index:2000;overflow:hidden;isolation:isolate;
  border:1px solid color-mix(in srgb,var(--encre) 18%,var(--filet));border-radius:14px;
  background:#fff;box-shadow:0 28px 72px -28px rgba(13,15,21,.48),0 10px 28px -18px rgba(13,15,21,.28);
  opacity:0;visibility:hidden;pointer-events:none;transform:translateY(7px) scale(.985);
  transform-origin:center;transition:opacity .14s ease,transform .14s ease,visibility 0s linear .14s;
}
.apercu-signature-survol.est-ouvert{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.apercu-signature-survol.en-mesure{opacity:0!important;visibility:hidden!important;transition:none!important}
.apercu-signature-survol-tete{
  display:flex;align-items:baseline;justify-content:space-between;gap:18px;min-height:36px;padding:8px 12px;
  border-bottom:1px solid var(--filet);background:color-mix(in srgb,var(--velin) 72%,#fff);
  color:var(--gris);font-size:11.5px;line-height:1.3;white-space:nowrap;
}
.apercu-signature-survol-titre{font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--encre)}
.apercu-signature-survol-nom{max-width:360px;overflow:hidden;text-overflow:ellipsis}
.apercu-signature-survol-fenetre{position:relative;overflow:hidden;background:#fff}
.apercu-signature-survol-contenu{
  position:absolute;left:0;top:0;display:block;width:560px;min-width:320px;padding:18px;
  background:#fff;transform-origin:0 0;pointer-events:none;
}
@media (prefers-reduced-motion:reduce){
  .apercu-signature-survol{transition:none}
}

/* ── Le cabinet (Mes informations) ── */



.cab-tete{display:flex;align-items:baseline;justify-content:space-between;gap:14px}
.cab-tete h2{font-family:var(--serif);font-weight:500;font-size:22px}
.cab-compte{font-family:var(--mono);font-size:12px;color:var(--gris);white-space:nowrap}
.cab-note{color:var(--gris);font-size:13px;margin:4px 0 14px}
.cab-ajout{margin:0 0 16px}
.cab-ajout summary{list-style:none;cursor:pointer;user-select:none;display:inline-flex}
.cab-ajout summary::-webkit-details-marker{display:none}
.cab-ajout[open] summary{color:var(--encre);border-color:color-mix(in srgb,var(--encre) 30%,transparent)}
.cab-ajout .form-ligne{margin:12px 0 4px}
.cab-ajout input[type=text]{flex:1;min-width:170px;border:1px solid var(--filet);border-radius:10px;padding:9px 12px}
.cab-ajout input[type=file]{flex:1;min-width:200px;border:1px dashed var(--filet);border-radius:10px;padding:8px;background:var(--blanc);color:var(--gris);font-size:12.5px}









@media (hover:none){ .bib-item .btn-danger{opacity:1;position:static} }
/* ════════════════════════════════════════════════════════════
   1.38 — MES INFORMATIONS : un parcours en trois espaces
   (profils, images, sécurité) et un éditeur maître/détail.
   ════════════════════════════════════════════════════════════ */
.infos-entete{gap:24px}
.infos-resume{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap}
.infos-resume span{display:inline-flex;align-items:baseline;gap:5px;padding:6px 10px;border:1px solid var(--filet);border-radius:999px;background:var(--blanc);color:var(--gris);font-size:11.5px;white-space:nowrap}
.infos-resume strong{font-family:var(--mono);font-size:12px;color:var(--noir)}
.infos-page{display:grid;gap:22px;min-width:0}
.infos-onglets{position:sticky;top:58px;z-index:18;display:flex;gap:7px;overflow-x:auto;padding:8px;border:1px solid var(--filet);border-radius:15px;background:color-mix(in srgb,var(--blanc) 94%,transparent);box-shadow:0 16px 34px -30px rgba(13,15,21,.38);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);scrollbar-width:thin}
.infos-onglet{position:relative;display:grid;grid-template-columns:38px minmax(0,1fr) auto;align-items:center;gap:10px;flex:1 0 220px;min-width:0;padding:10px 12px;border:1px solid transparent;border-radius:11px;color:var(--gris);text-decoration:none;transition:background .15s,border-color .15s,color .15s,box-shadow .15s}
.infos-onglet:hover{background:var(--velin);color:var(--noir);text-decoration:none}
.infos-onglet.est-actif,.infos-onglet[aria-selected="true"]{border-color:color-mix(in srgb,var(--encre) 20%,var(--filet));background:var(--blanc);color:var(--noir);box-shadow:0 9px 24px -20px rgba(13,15,21,.45)}
.infos-onglet.est-actif::after,.infos-onglet[aria-selected="true"]::after{content:"";position:absolute;left:16px;right:16px;bottom:-9px;height:2px;border-radius:2px;background:var(--or)}
.infos-onglet-icone{display:grid;place-items:center;width:38px;height:38px;border-radius:10px;background:var(--velin);color:var(--gris)}
.infos-onglet.est-actif .infos-onglet-icone,.infos-onglet[aria-selected="true"] .infos-onglet-icone{background:color-mix(in srgb,var(--encre) 10%,var(--blanc));color:var(--encre)}
.infos-onglet-icone svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.infos-onglet>span:nth-child(2){display:grid;min-width:0;line-height:1.25}
.infos-onglet strong{font-size:13.5px;color:inherit}
.infos-onglet small{margin-top:2px;overflow:hidden;color:var(--gris);font-size:11.5px;font-weight:500;text-overflow:ellipsis;white-space:nowrap}
.infos-onglet-compte{display:grid;place-items:center;min-width:25px;height:25px;padding:0 7px;border-radius:999px;background:var(--velin);font-family:var(--mono);font-size:10.5px;color:var(--gris)}
.infos-onglet.est-actif .infos-onglet-compte,.infos-onglet[aria-selected="true"] .infos-onglet-compte{background:var(--inverse-fond);color:var(--inverse-texte)}
.infos-panneau[hidden],.infos-profil-editeur[hidden]{display:none!important}
.infos-panneau{min-width:0;outline:none}
.infos-section-tete{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px 24px;align-items:start;margin-bottom:20px;padding:6px 2px 18px;border-bottom:1px solid var(--filet)}
.infos-section-tete-simple{grid-template-columns:1fr}
.infos-section-tete h2{margin:3px 0 5px;font-family:var(--serif);font-size:27px;font-weight:500;line-height:1.2}
.infos-section-tete>div>p:last-child{max-width:720px;color:var(--gris);font-size:13.5px;line-height:1.55}
.infos-creation{min-width:0}
.infos-creation summary,.infos-ajout-media summary{list-style:none;cursor:pointer;user-select:none}
.infos-creation summary::-webkit-details-marker,.infos-ajout-media summary::-webkit-details-marker{display:none}
.infos-creation summary::before,.infos-ajout-media summary::before{content:"+";font-family:var(--mono);font-size:16px;font-weight:500;line-height:1}
.infos-creation[open]{grid-column:1/-1}
.infos-creation[open] summary{margin-left:auto;width:max-content;color:var(--encre);border-color:color-mix(in srgb,var(--encre) 30%,var(--filet));background:var(--blanc)}
.infos-creation[open] summary::before,.infos-ajout-media[open] summary::before{content:"−"}
.infos-creation-form{display:grid;grid-template-columns:minmax(220px,1fr) auto;gap:12px;align-items:end;margin-top:12px;padding:16px;border:1px solid color-mix(in srgb,var(--encre) 16%,var(--filet));border-radius:13px;background:color-mix(in srgb,var(--velin) 60%,var(--blanc))}
.infos-creation-form label{display:grid;gap:6px;color:var(--gris);font-size:11.5px;font-weight:750;letter-spacing:.04em}
.infos-creation-form input,.infos-champ input,.infos-champ textarea{width:100%;min-width:0;border:1px solid var(--filet);border-radius:10px;background:var(--blanc);color:var(--noir);font-size:14px;font-weight:450;letter-spacing:normal;line-height:1.35;transition:border-color .15s,box-shadow .15s,background .15s}
.infos-creation-form input{padding:10px 12px}
.infos-creation-form input:focus,.infos-champ input:focus,.infos-champ textarea:focus{outline:none;border-color:var(--encre);box-shadow:0 0 0 3px var(--selection)}
.infos-vide{display:flex;align-items:center;gap:18px;min-height:130px;padding:26px;border:1px dashed color-mix(in srgb,var(--encre) 20%,var(--filet));border-radius:15px;background:color-mix(in srgb,var(--velin) 38%,var(--blanc));color:var(--gris)}
.infos-vide h3{margin-bottom:3px;font-family:var(--serif);font-size:20px;font-weight:500;color:var(--noir)}
.infos-vide p{max-width:620px;font-size:13px;line-height:1.55}
.infos-vide-icone{display:grid;place-items:center;flex:none;width:52px;height:52px;border:1px solid color-mix(in srgb,var(--or) 55%,var(--filet));border-radius:50%;font-family:var(--mono);font-size:11px;color:var(--or)}

/* Profils : liste à gauche, formulaire lisible à droite. */
.infos-profils-espace{display:grid;grid-template-columns:250px minmax(0,1fr);gap:18px;align-items:start;min-width:0}
.infos-profils-liste{position:sticky;top:151px;min-width:0;border:1px solid var(--filet);border-radius:15px;background:var(--blanc);padding:10px;box-shadow:0 18px 42px -38px rgba(13,15,21,.38)}
.infos-profils-liste-tete{display:grid;gap:1px;padding:7px 8px 11px;border-bottom:1px solid var(--filet)}
.infos-profils-liste-tete strong{font-family:var(--serif);font-size:16px;font-weight:550;color:var(--noir)}
.infos-profils-liste-tete span{font-size:11.5px;color:var(--gris)}
.infos-profils-items{display:grid;gap:6px;padding-top:8px}
.infos-profil-selecteur{position:relative;display:grid;grid-template-columns:38px minmax(0,1fr) 7px;gap:10px;align-items:start;min-width:0;padding:10px;border:1px solid transparent;border-radius:11px;color:var(--gris);text-decoration:none;transition:background .15s,border-color .15s,transform .15s}
.infos-profil-selecteur:hover{background:var(--velin);color:var(--noir);text-decoration:none}
.infos-profil-selecteur.est-actif,.infos-profil-selecteur[aria-selected="true"]{border-color:color-mix(in srgb,var(--encre) 22%,var(--filet));background:color-mix(in srgb,var(--encre) 5%,var(--blanc));color:var(--noir)}
.infos-profil-initiale{display:grid;place-items:center;width:38px;height:38px;border-radius:11px;background:var(--velin);font-family:var(--serif);font-size:17px;color:var(--gris)}
.infos-profil-selecteur.est-actif .infos-profil-initiale,.infos-profil-selecteur[aria-selected="true"] .infos-profil-initiale{background:var(--inverse-fond);color:var(--inverse-texte)}
.infos-profil-selecteur-texte{display:grid;min-width:0;line-height:1.25}
.infos-profil-selecteur-texte strong{overflow:hidden;color:inherit;font-size:13px;text-overflow:ellipsis;white-space:nowrap}
.infos-profil-selecteur-texte small{margin-top:2px;overflow:hidden;color:var(--gris);font-size:11px;text-overflow:ellipsis;white-space:nowrap}
.infos-profil-progression{display:block;height:3px;margin-top:8px;overflow:hidden;border-radius:999px;background:color-mix(in srgb,var(--filet) 75%,transparent)}
.infos-profil-progression i{display:block;height:100%;border-radius:inherit;background:var(--or)}
.infos-profil-selecteur-texte em{margin-top:4px;color:var(--gris);font-family:var(--mono);font-size:9.5px;font-style:normal}
.infos-profil-modifie{align-self:center;width:7px;height:7px;border-radius:50%;background:transparent;box-shadow:none}
.infos-profil-selecteur.est-modifie .infos-profil-modifie{background:var(--or);box-shadow:0 0 0 3px color-mix(in srgb,var(--or) 18%,transparent)}
.infos-profils-editeurs{min-width:0}
.infos-profil-editeur{min-width:0;overflow:clip;border:1px solid var(--filet);border-radius:16px;background:var(--blanc);box-shadow:0 24px 58px -46px rgba(13,15,21,.45)}
.infos-profil-tete{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;padding:22px 24px 18px;border-bottom:1px solid var(--filet);background:linear-gradient(135deg,color-mix(in srgb,var(--velin) 72%,var(--blanc)),var(--blanc))}
.infos-profil-tete h3{margin:3px 0 1px;font-family:var(--serif);font-size:25px;font-weight:500;line-height:1.2;color:var(--noir)}
.infos-profil-tete>div>p:last-child{color:var(--gris);font-size:12.5px}
.infos-profil-statut{display:inline-flex;align-items:center;gap:7px;flex:none;margin-top:3px;padding:5px 9px;border:1px solid #cfe6dc;border-radius:999px;color:var(--ok);font-size:10.5px;font-weight:750;white-space:nowrap}
.infos-profil-statut::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.infos-profil-editeur.est-modifie .infos-profil-statut{border-color:color-mix(in srgb,var(--or) 55%,var(--filet));color:#78601f}
.infos-profil-groupes{display:grid;gap:0;padding:0 24px}
.infos-profil-groupe{min-width:0;border:0;border-bottom:1px solid var(--filet);padding:22px 0 24px}
.infos-profil-groupe:last-child{border-bottom:0}
.infos-profil-groupe legend{display:flex;align-items:center;gap:9px;width:100%;padding:0;font-family:var(--serif);font-size:18px;font-weight:550;color:var(--noir)}
.infos-profil-groupe legend span{display:grid;place-items:center;width:23px;height:23px;border:1px solid color-mix(in srgb,var(--or) 58%,var(--filet));border-radius:50%;font-family:var(--mono);font-size:9.5px;color:var(--or)}
.infos-groupe-aide{max-width:650px;margin:6px 0 15px;color:var(--gris);font-size:12px;line-height:1.5}
.infos-champs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px 14px;min-width:0}
.infos-champ{display:grid;align-content:start;gap:6px;min-width:0;color:var(--gris);font-size:11.5px;font-weight:750;letter-spacing:.035em}
.infos-champ>span{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.infos-champ b{color:var(--gris);font-family:var(--mono);font-size:8.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase}
.infos-champ input,.infos-champ textarea{padding:10px 11px}
.infos-champ textarea{min-height:76px;resize:vertical}
.infos-champ input::placeholder,.infos-champ textarea::placeholder,.infos-creation-form input::placeholder{color:color-mix(in srgb,var(--gris) 60%,transparent)}
.infos-champ input:not(:placeholder-shown),.infos-champ textarea:not(:placeholder-shown){border-color:color-mix(in srgb,var(--encre) 25%,var(--filet));background:color-mix(in srgb,var(--encre) 1.7%,var(--blanc))}
.infos-champ-large{grid-column:1/-1}
.infos-profil-actions{position:sticky;bottom:12px;z-index:6;display:flex;align-items:center;justify-content:space-between;gap:16px;margin:0 18px 18px;padding:12px 13px;border:1px solid var(--filet);border-radius:13px;background:color-mix(in srgb,var(--blanc) 94%,transparent);box-shadow:0 18px 42px -28px rgba(13,15,21,.32);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.infos-profil-actions>span{color:var(--gris);font-size:11.5px}
.infos-profil-actions>div{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.infos-profil-editeur.est-modifie .infos-profil-actions{border-color:color-mix(in srgb,var(--or) 65%,var(--filet));box-shadow:0 18px 42px -28px color-mix(in srgb,var(--or) 70%,transparent)}
.infos-profil-editeur.est-modifie .infos-profil-actions>span{color:#78601f;font-weight:650}

/* Bibliothèques : les deux usages restent séparés et explicites. */
.infos-bibliotheques{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;align-items:start}
.infos-bibliotheque{min-width:0;border:1px solid var(--filet);border-radius:16px;background:var(--blanc);padding:18px;box-shadow:0 22px 54px -48px rgba(13,15,21,.42)}
.infos-bibliotheque-tete{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:15px;padding-bottom:14px;border-bottom:1px solid var(--filet)}
.infos-bibliotheque-tete>div{display:flex;align-items:flex-start;gap:11px;min-width:0}
.infos-bibliotheque-numero{display:grid;place-items:center;flex:none;width:34px;height:34px;border:1px solid color-mix(in srgb,var(--or) 55%,var(--filet));border-radius:10px;font-family:var(--mono);font-size:9.5px;color:var(--or)}
.infos-bibliotheque-tete h3{font-family:var(--serif);font-size:19px;font-weight:550;line-height:1.25;color:var(--noir)}
.infos-bibliotheque-tete p{margin-top:2px;color:var(--gris);font-size:11.5px;line-height:1.4}
.infos-bibliotheque-compte{flex:none;padding:4px 8px;border-radius:999px;background:var(--velin);font-family:var(--mono);font-size:10px;color:var(--gris)}
.infos-ajout-media{margin-bottom:15px}
.infos-ajout-media[open] summary{color:var(--encre);border-color:color-mix(in srgb,var(--encre) 28%,var(--filet));background:var(--velin)}
.infos-upload-form{display:grid;gap:11px;margin-top:11px;padding:14px;border:1px solid color-mix(in srgb,var(--encre) 14%,var(--filet));border-radius:13px;background:color-mix(in srgb,var(--velin) 55%,var(--blanc))}
.infos-depot{position:relative;display:grid;grid-template-columns:66px minmax(0,1fr);align-items:center;gap:12px;min-height:76px;padding:9px;border:1px dashed color-mix(in srgb,var(--encre) 28%,var(--filet));border-radius:12px;background:var(--blanc);cursor:pointer;transition:border-color .15s,background .15s,box-shadow .15s}
.infos-depot:hover,.infos-depot.est-survole{border-color:var(--encre);background:color-mix(in srgb,var(--encre) 3%,var(--blanc));box-shadow:0 0 0 3px var(--selection)}
.infos-depot input[type="file"]{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.infos-depot-visuel{position:relative;display:grid;place-items:center;width:66px;height:56px;overflow:hidden;border-radius:9px;background:var(--velin);color:var(--gris)}
.infos-depot-visuel::before{content:"+";font-family:var(--mono);font-size:22px;font-weight:300}
.infos-depot-visuel img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#fff}
.infos-depot-manusign .infos-depot-visuel,.infos-media-item-manusign .infos-media-visuel{background:repeating-conic-gradient(#eff0f3 0 25%,#fafafb 0 50%) 0 0/14px 14px}
.infos-depot-texte{display:grid;min-width:0;line-height:1.3}
.infos-depot-texte strong{color:var(--noir);font-size:12.5px}
.infos-depot-texte small{margin-top:2px;color:var(--gris);font-size:10.5px}
.infos-depot-texte em{margin-top:6px;overflow:hidden;color:var(--encre);font-family:var(--mono);font-size:9.5px;font-style:normal;text-overflow:ellipsis;white-space:nowrap}
.infos-depot.a-un-fichier{border-style:solid;border-color:color-mix(in srgb,var(--ok) 48%,var(--filet))}
.infos-media-grille{display:grid;gap:9px}
.infos-media-item{display:grid;grid-template-columns:78px minmax(0,1fr) auto;grid-template-areas:"visuel meta action";align-items:center;gap:11px;min-width:0;padding:9px;border:1px solid var(--filet);border-radius:12px;background:var(--blanc);transition:border-color .15s,box-shadow .15s}
.infos-media-item:hover{border-color:color-mix(in srgb,var(--encre) 24%,var(--filet));box-shadow:0 12px 28px -25px rgba(13,15,21,.45)}
.infos-media-visuel{grid-area:visuel;display:grid;place-items:center;width:78px;height:62px;overflow:hidden;border-radius:9px;background:#fff;box-shadow:inset 0 0 0 1px var(--filet)}
.infos-media-visuel img{display:block;width:100%;height:100%;object-fit:contain}
.infos-media-meta{grid-area:meta;display:grid;min-width:0;line-height:1.3}
.infos-media-meta strong{overflow:hidden;color:var(--noir);font-size:12.5px;text-overflow:ellipsis;white-space:nowrap}
.infos-media-meta span{margin-top:3px;color:var(--gris);font-size:10.5px}
.infos-media-item form{grid-area:action}
.infos-media-item .btn-danger{padding:5px 8px;border-color:transparent;color:var(--gris);font-size:10.5px}
.infos-media-item .btn-danger:hover{border-color:color-mix(in srgb,var(--danger) 35%,var(--filet));background:#faf1ef;color:var(--danger)}
.infos-vide-media{min-height:92px;padding:18px}

/* Sécurité : explication et action sont rapprochées, sans accordéon. */
.infos-securite{display:grid;grid-template-columns:minmax(260px,.82fr) minmax(0,1.18fr);gap:18px;align-items:stretch}
.infos-securite-conseils{display:flex;align-items:flex-start;gap:16px;padding:22px;border:1px solid var(--filet);border-radius:16px;background:linear-gradient(145deg,color-mix(in srgb,var(--velin) 72%,var(--blanc)),var(--blanc))}
.infos-securite-sceau{display:grid;place-items:center;flex:none;width:54px;height:54px;border-radius:15px;background:var(--inverse-fond);color:var(--inverse-texte)}
.infos-securite-sceau svg{width:29px;height:29px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.infos-securite-conseils h3{font-family:var(--serif);font-size:20px;font-weight:550;line-height:1.25;color:var(--noir)}
.infos-securite-conseils p{margin-top:5px;color:var(--gris);font-size:12.5px;line-height:1.55}
.infos-securite-conseils ul{display:grid;gap:5px;margin:14px 0 0 18px;color:var(--gris);font-size:11.5px}
.infos-securite-form{display:grid;align-content:start;gap:14px;padding:22px;border:1px solid var(--filet);border-radius:16px;background:var(--blanc)}
.infos-mdp-retour{min-height:20px;color:var(--gris);font-size:11.5px}
.infos-mdp-retour.est-ok{color:var(--ok);font-weight:650}
.infos-mdp-retour.est-erreur{color:var(--danger);font-weight:650}
.infos-securite-actions{display:flex;align-items:center;justify-content:flex-end;gap:9px;margin-top:2px;flex-wrap:wrap}

@media (max-width:940px){
  .infos-profils-espace{grid-template-columns:1fr}
  .infos-profils-liste{position:static;padding:9px}
  .infos-profils-liste-tete{padding-bottom:9px}
  .infos-profils-items{display:flex;gap:7px;overflow-x:auto;padding-bottom:2px;scrollbar-width:thin;scroll-snap-type:x proximity}
  .infos-profil-selecteur{flex:0 0 245px;scroll-snap-align:start}
  .infos-bibliotheques{grid-template-columns:1fr}
}
@media (max-width:800px){
  .infos-securite{grid-template-columns:1fr}
  .infos-onglet{flex-basis:200px}
}
@media (max-width:680px){
  .infos-resume{justify-content:flex-start;width:100%}
  .infos-onglets{top:58px;margin-inline:-8px;border-radius:12px;padding:6px}
  .infos-onglet{grid-template-columns:34px minmax(0,1fr) auto;flex-basis:185px;padding:8px}
  .infos-onglet-icone{width:34px;height:34px}
  .infos-onglet small{display:none}
  .infos-section-tete{grid-template-columns:1fr}
  .infos-section-tete h2{font-size:24px}
  .infos-creation{justify-self:start}
  .infos-creation[open]{width:100%}
  .infos-creation[open] summary{margin-left:0}
  .infos-creation-form{grid-template-columns:1fr}
  .infos-profil-tete{padding:18px;flex-direction:column}
  .infos-profil-statut{margin-top:0}
  .infos-profil-groupes{padding:0 18px}
  .infos-champs{grid-template-columns:1fr}
  .infos-champ-large{grid-column:auto}
  .infos-profil-actions{position:static;align-items:stretch;flex-direction:column;margin:0 12px 12px}
  .infos-profil-actions>div{justify-content:stretch}
  .infos-profil-actions .btn{flex:1;justify-content:center}
  .infos-media-item{grid-template-columns:68px minmax(0,1fr);grid-template-areas:"visuel meta" "action action"}
  .infos-media-visuel{width:68px;height:58px}
  .infos-media-item form{justify-self:end}
  .infos-securite-conseils,.infos-securite-form{padding:18px}
  .infos-securite-actions{align-items:stretch;flex-direction:column-reverse}
  .infos-securite-actions .btn{justify-content:center;width:100%}
}
@media (max-width:460px){
  .infos-resume span{padding:5px 8px;font-size:10.5px}
  .infos-onglet{flex-basis:158px;grid-template-columns:30px minmax(0,1fr);gap:8px}
  .infos-onglet-icone{width:30px;height:30px;border-radius:8px}
  .infos-onglet-compte{display:none}
  .infos-vide{align-items:flex-start;flex-direction:column}
  .infos-profil-selecteur{flex-basis:225px}
  .infos-depot{grid-template-columns:54px minmax(0,1fr)}
  .infos-depot-visuel{width:54px;height:50px}
}
@media (prefers-reduced-motion:reduce){
  .infos-onglet,.infos-profil-selecteur,.infos-media-item,.infos-depot{transition:none}
}

/* ════════════════════════════════════════════════════════════
   1.13 — LA FONDERIE : la halle (inventaire des fontes) et
   l'atelier de fonte (composition + aperçu vivant).
   ════════════════════════════════════════════════════════════ */

/* ── La halle ── */
.tableau-fonderie td{vertical-align:middle}
.fonte-apercu-mini{display:inline-block;width:60px;vertical-align:middle;margin-right:12px}
.fonte-apercu-mini svg{display:block;width:60px;height:34px;border-radius:6px;box-shadow:inset 0 0 0 1px var(--filet)}
.fonte-ident{display:block;font-family:var(--mono);font-size:11.5px;margin-top:2px}
.fonte-filtres .badge{margin:2px 4px 2px 0}
.fonte-actions{white-space:nowrap;text-align:right}
.fonte-actions .menu-actions{display:inline-block;vertical-align:middle;margin-left:6px}
.menu-liste a.menu-lien{display:block;font-size:13px;font-weight:600;color:var(--noir);padding:8px 11px;border-radius:8px}
.menu-liste a.menu-lien:hover{background:var(--velin);text-decoration:none}

/* ── L'atelier ── */
.atelier-fonte{display:grid;grid-template-columns:minmax(0,1fr) minmax(340px,460px);gap:28px;align-items:start}
.atelier-form{max-width:none}
.atelier-sauvegarde{position:sticky;top:68px;z-index:35;display:flex;align-items:center;justify-content:space-between;gap:18px;margin:0 0 18px;padding:12px 14px;border:1px solid var(--filet);border-radius:13px;background:color-mix(in srgb,var(--blanc) 94%,transparent);box-shadow:0 12px 30px -22px rgba(13,15,21,.32);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.atelier-sauvegarde-texte{display:grid;gap:2px;min-width:0}.atelier-sauvegarde-texte strong{font-family:var(--serif);font-size:15px;font-weight:600;color:var(--noir)}.atelier-sauvegarde-texte span{font-size:11.5px;line-height:1.35;color:var(--gris)}
.atelier-sauvegarde-actions,.atelier-sauvegarde-fin{display:flex;align-items:center;justify-content:flex-end;gap:10px;flex-wrap:wrap}.atelier-sauvegarde-raccourci{font-family:var(--mono);font-size:9.5px;color:var(--gris)}
.atelier-sauvegarde.est-modifiee{border-color:color-mix(in srgb,var(--or) 72%,var(--filet));box-shadow:0 12px 30px -22px color-mix(in srgb,var(--or) 80%,transparent)}.atelier-sauvegarde.est-modifiee .atelier-sauvegarde-texte span{color:#6b5518}.atelier-sauvegarde.est-enregistrement{opacity:.82}
.atelier-sauvegarde-fin{margin-top:16px;padding-top:16px;border-top:1px solid var(--filet)}
@media (max-width:700px){.atelier-sauvegarde{top:62px;align-items:stretch;flex-direction:column}.atelier-sauvegarde-actions{justify-content:space-between}.atelier-sauvegarde-actions .btn,.atelier-sauvegarde-fin .btn{flex:1}.atelier-sauvegarde-raccourci{display:none}}
.form-section-premiere{margin-top:0;border-top:none;padding-top:0}
.atelier-meta,.atelier-compo{padding:0}
.atelier-coches{display:flex;flex-wrap:wrap;gap:8px 18px}
.coche{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:600;color:var(--noir);text-transform:none;letter-spacing:normal}
.coche input{width:auto;border:0;box-shadow:none;background:transparent;padding:0;accent-color:var(--encre)}
.code-champ,.form input.code-champ{font-family:var(--mono);font-size:13.5px;letter-spacing:.02em}
.rangees-outils{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.rangees-liste{list-style:none;display:flex;flex-direction:column;gap:6px;margin:2px 0 4px}
.rangees-liste li{display:flex;align-items:center;gap:8px;border:1px solid var(--filet);border-radius:10px;padding:6px 10px;background:var(--velin)}
.rangees-liste code{font-family:var(--mono);font-size:12.5px;flex:1;min-width:0}
.rangees-liste .btn-mini{padding:3px 8px}

/* ── L'aperçu vivant ── */
.atelier-apercu{position:sticky;top:82px;display:grid;gap:12px;background:var(--blanc);border:1px solid var(--filet);border-radius:16px;padding:20px 22px}
.fonte-feuille{background:var(--papier);border-radius:12px;box-shadow:inset 0 0 0 1px var(--filet);padding:22px;min-height:170px;overflow:auto}
.fonte-vignette{display:flex;align-items:center;gap:12px}
.fonte-vignette svg{width:90px;height:51px;border-radius:8px;box-shadow:inset 0 0 0 1px var(--filet);background:#f7f7f6}
.codes-maison summary{list-style:none;display:inline-flex;cursor:pointer}
.codes-maison summary::-webkit-details-marker{display:none}
.codes-corps{margin-top:12px;display:grid;gap:8px;font-size:12.5px;color:var(--gris)}
.codes-corps code{font-family:var(--mono);font-size:11.5px;color:var(--noir);background:var(--velin);border-radius:6px;padding:1px 6px}
.codes-corps p{margin:0}
@media (max-width:1020px){
  .atelier-fonte{grid-template-columns:1fr}
  .atelier-apercu{position:static}
}

/* ── 1.14 : la feuille se manipule (glissé/déposé des rangées) ── */
.fonte-feuille [data-rangee]{position:relative;border-radius:6px;cursor:grab;user-select:none;transition:box-shadow .12s ease, background .12s ease}
.fonte-feuille [data-rangee]:hover{box-shadow:0 0 0 1px color-mix(in srgb,var(--or) 55%,transparent);background:color-mix(in srgb,var(--or) 6%,transparent)}
.fonte-feuille .fonte-glisse{opacity:.4;cursor:grabbing}
.fonte-feuille .fonte-avant{box-shadow:0 -2px 0 0 var(--encre)}
.fonte-feuille .fonte-apres{box-shadow:0 2px 0 0 var(--encre)}
.fonte-oter{position:absolute;top:1px;right:1px;width:20px;height:20px;padding:0;border:1px solid var(--filet);border-radius:6px;background:var(--blanc);color:var(--danger);font-size:13px;line-height:1;cursor:pointer;opacity:0;transition:opacity .12s ease;z-index:2}
.fonte-feuille [data-rangee]:hover .fonte-oter{opacity:1}
.fonte-fantome{display:inline-block;border:1px dashed var(--filet);color:var(--gris);font-size:11.5px;padding:5px 10px;border-radius:8px;font-family:var(--sans)}
@media (hover:none){ .fonte-oter{opacity:1} }

/* ── 1.16 : l'atelier du Marbre, premier étage ── */
.atelier-marbre{grid-template-columns:1fr}
.atelier-marbre .atelier-apercu{order:-1;position:static}
.fonte-planche{width:max-content;transform-origin:top left}
.form textarea.code-champ{
  font-family:var(--mono);font-size:12.5px;line-height:1.6;letter-spacing:0;
  border:1px solid var(--filet);border-radius:10px;padding:14px;background:var(--velin);
  color:var(--noir);width:100%;resize:vertical;min-height:220px;
}
.form textarea.code-champ:focus{outline:none;border-color:var(--encre);box-shadow:0 0 0 3px var(--selection)}


/* ── 1.17 : l'éditeur du Marbre ── */

.marbre-palette{display:grid;gap:6px;align-content:start}
.marbre-palette-titre,.marbre-inspecteur-titre{font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--or);margin:0 0 4px}
.marbre-sorte{font-family:var(--mono);font-size:12px;text-align:left;border:1px solid var(--filet);border-radius:8px;background:var(--blanc);color:var(--noir);padding:6px 9px;cursor:pointer;transition:border-color .12s ease, background .12s ease}
.marbre-sorte:hover{border-color:var(--encre);background:color-mix(in srgb,var(--encre) 5%,var(--blanc))}
.marbre-sorte-zone{border-style:dashed;color:var(--gris)}

.marbre-feuille{position:relative;background:var(--velin);border-radius:8px;min-height:200px;touch-action:none}
.marbre-guide{position:absolute;top:0;bottom:0;width:0;border-left:1px solid color-mix(in srgb,var(--or) 22%,transparent);pointer-events:none}
.marbre-bloc{position:absolute;box-sizing:border-box;border-radius:6px;font-family:var(--sans);font-size:11.5px;display:flex;align-items:center;padding:0 8px;cursor:grab;user-select:none;overflow:hidden;white-space:nowrap}


.marbre-etiquette{font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--gris);background:color-mix(in srgb,var(--blanc) 78%,transparent);border-radius:4px;padding:1px 5px}
.marbre-choisi{outline:2px solid var(--or);outline-offset:1px;z-index:3}
.marbre-refus{outline:2px solid var(--danger);outline-offset:1px}
.marbre-bloc:active{cursor:grabbing;z-index:4}
.marbre-inspecteur{border:1px solid var(--filet);border-radius:12px;background:var(--blanc);padding:12px;display:grid;gap:9px;align-content:start;min-height:200px}
.marbre-champ{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:12.5px;color:var(--gris)}
.marbre-champ input[type="number"]{width:76px;border:1px solid var(--filet);border-radius:8px;padding:5px 8px;font-family:var(--mono);font-size:12.5px;background:var(--velin)}
.marbre-champ input[type="text"]{flex:1;border:1px solid var(--filet);border-radius:8px;padding:5px 8px;font-size:12.5px;background:var(--velin)}
.marbre-champ select{border:1px solid var(--filet);border-radius:8px;padding:5px 8px;font-size:12.5px;background:var(--blanc)}
.marbre-coins{display:grid;grid-template-columns:1fr 1fr;gap:6px 10px}
.marbre-coins .marbre-champ input{width:58px}
.marbre-code{margin-top:6px}
.marbre-code summary{font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--gris);cursor:pointer;padding:6px 0}
/* ── 1.18 : la réserve d'illustrations ── */
.reserve-grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;margin-top:14px}
.reserve-carte{position:relative;margin:0;border:1px solid var(--filet);border-radius:10px;overflow:hidden;background:var(--blanc)}
.reserve-carte img{display:block;width:100%;height:84px;object-fit:cover}
.reserve-carte figcaption{display:grid;gap:2px;padding:8px 10px}
.reserve-nom{font-size:12.5px;color:var(--noir)}
.reserve-carte code{font-family:var(--mono);font-size:11px;color:var(--gris)}
.reserve-oter{position:absolute;top:6px;right:6px;opacity:0;transition:opacity .12s ease}
.reserve-carte:hover .reserve-oter{opacity:1}
@media (hover:none){ .reserve-oter{opacity:1} }

/* ── 1.18 : le vrai geste (fantôme, poignées, glyphes) ── */
.marbre-fantome{position:fixed;z-index:60;pointer-events:none;font-family:var(--mono);font-size:12px;background:var(--blanc);border:1px solid var(--encre);border-radius:8px;padding:5px 9px;color:var(--noir);box-shadow:0 6px 18px color-mix(in srgb,var(--noir) 18%,transparent);opacity:.7}
.marbre-fantome-pret{opacity:1;border-color:var(--or)}
.marbre-poignee{position:absolute;width:10px;height:10px;background:var(--or);border:2px solid var(--blanc);border-radius:3px;z-index:5;box-shadow:0 0 0 1px color-mix(in srgb,var(--noir) 25%,transparent)}


.marbre-glyphe{display:inline-flex;align-items:center;gap:5px;overflow:hidden;white-space:nowrap;font-size:11.5px}
.marbre-glyphe b{font-family:var(--serif);font-size:14px}
.marbre-glyphe img{height:22px;width:auto;border-radius:3px;display:block}
.marbre-g-photo{width:16px;height:16px;border-radius:50%;background:var(--encre);display:inline-block;opacity:.75}
.marbre-g-fileth{width:100%;height:2px;background:var(--encre);display:inline-block;opacity:.7}
.marbre-g-filetv{width:2px;height:70%;background:var(--encre);display:inline-block;opacity:.7}
.marbre-g-espace{width:26px;height:8px;display:inline-block;background:repeating-linear-gradient(90deg,var(--filet) 0 3px,transparent 3px 6px)}
.marbre-g-pastille{width:11px;height:11px;border-radius:50%;background:var(--encre);display:inline-block;opacity:.7}

/* ── 1.22 : la casse (registre des mains) ── */
.casse-grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(430px,1fr));gap:14px}
.casse-carte{display:grid;gap:10px}
.casse-trait{min-height:48px;display:flex;align-items:center;padding:4px 2px}
.casse-nom{margin:0;font-size:13px;color:var(--gris)}
.casse-nom code{font-family:var(--mono);font-size:11.5px}
.casse-form{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.casse-form input[name="note"]{grid-column:1 / -1}
.casse-boutons{grid-column:1 / -1;display:flex;gap:8px;justify-content:flex-end}

/* ── 1.22 : la saisie au rang de la maison ── */
input,select,textarea,button{font-family:inherit}
.form input,.form-auth input,.form-ligne input,.profil-form input,.casse-form input{
  font-size:15px;letter-spacing:.012em;color:var(--noir);caret-color:var(--encre);
}
.form ::placeholder,.form-auth ::placeholder,.form-ligne ::placeholder,.casse-form ::placeholder{
  color:color-mix(in srgb,var(--gris) 72%,transparent);letter-spacing:.02em;
}
input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus{
  -webkit-text-fill-color:var(--noir);
  -webkit-box-shadow:0 0 0 44px var(--velin) inset;
  caret-color:var(--encre);
  transition:background-color 99999s ease-in-out 0s;
}

/* ── 1.22.2 : la saisie d'apparat — la maison nomme ses formulaires
   d'auth `form` (connexion, invitation) OU `form-auth` (oubli,
   réinitialisation) : les deux sont servis. ── */
.carte-auth .form input,
.carte-auth .form-auth input{
  font-family:var(--serif);font-size:19px;font-weight:500;letter-spacing:.015em;padding:11px 2px 9px;
}
.carte-auth .form input[type="password"]:not(:placeholder-shown),
.carte-auth .form-auth input[type="password"]:not(:placeholder-shown){letter-spacing:.14em}
/* la ligne de registre s'encre dès que la plume a écrit */
.carte-auth .form input:not(:placeholder-shown),
.form-auth input:not(:placeholder-shown),
.profil-form input:not(:placeholder-shown){
  border-bottom-color:var(--encre);
  box-shadow:0 1px 0 0 color-mix(in srgb,var(--encre) 55%,transparent);
}
.carte-auth .form label:has(input:not(:placeholder-shown)),
.form-auth label:has(input:not(:placeholder-shown)){color:color-mix(in srgb,var(--encre) 78%,var(--gris))}
.carte-auth .form label,
.carte-auth .form-auth label{letter-spacing:.13em;font-size:11.5px}

/* ── 1.26 : le cabinet d'ordre — shell d'apparat & domaines ── */
.barre{box-shadow:0 1px 0 color-mix(in srgb,var(--or) 45%,transparent)}
.marque{display:inline-flex;align-items:center;gap:9px}
.marque-paraphe{opacity:.85;margin-top:4px}
.sous-barre{background:color-mix(in srgb,var(--velin) 70%,var(--blanc));border-bottom:1px solid var(--filet)}
.sous-barre .contenu{display:flex;align-items:center;gap:4px;padding-top:0;padding-bottom:0}
.sous-barre a{font-size:13px;font-weight:600;letter-spacing:.02em;color:var(--gris);padding:11px 12px 9px;border-bottom:2px solid transparent;text-decoration:none}
.sous-barre a:hover{color:var(--noir)}
.sous-barre a.actif{color:var(--encre);border-bottom-color:var(--encre)}

.entete-page h1{font-family:var(--serif);font-weight:500;letter-spacing:.01em}
.bord-drapeaux{display:flex;gap:8px;flex-wrap:wrap}
.grille-domaines{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px}
.domaine{display:grid;gap:10px;align-content:start;border-top:2px solid color-mix(in srgb,var(--or) 55%,transparent)}
.domaine-sur{margin:0;font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--gris)}
.domaine h2{font-family:var(--serif);font-weight:500;font-size:22px;margin:0}
.domaine-stats{display:grid;gap:3px;font-size:13px;color:var(--gris)}
.domaine-stats strong{color:var(--noir);font-variant-numeric:tabular-nums}
.domaine-liens{display:flex;gap:8px;flex-wrap:wrap;margin-top:4px}
.activite-chiffre{font-size:13px;color:var(--gris)}
.cellule-acces{white-space:nowrap}
.cellule-acces .en-ligne{margin-top:6px}

/* ── 1.27 : le grand rangement ── */
.barre-filtres{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 16px;padding:12px 14px;background:var(--blanc);border:1px solid var(--filet);border-radius:12px}
.barre-filtres input[type="search"]{flex:1;min-width:220px;border:0;border-bottom:1px solid color-mix(in srgb,var(--noir) 24%,transparent);background:transparent;padding:8px 2px}
.barre-filtres input[type="search"]:focus{outline:none;border-bottom-color:var(--encre)}
.resultat-compte{margin-left:auto;font-variant-numeric:tabular-nums}
.pagination{display:flex;align-items:center;gap:14px;justify-content:center;margin:18px 0 4px}
.cellule-abonnement .en-ligne+.en-ligne,.cellule-activite .en-ligne{margin-top:6px}
.cellule-activite .activite-chiffre{display:block;margin-bottom:4px}
td.cellule-abonnement,td.cellule-activite,td.cellule-acces{vertical-align:top}
/* 1.73 — LA TUILE S'EMPILE AU LIEU DE DÉBORDER. En rangée, elle exigeait
   330 points — 150 d'aperçu, le nom, le bouton — dans une case de 230 :
   le bouton passait sous la tuile voisine. Aperçu en haut, texte et bouton
   dessous : plus rien ne dépasse, quelle que soit la largeur. */
.maison-grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(216px,1fr));gap:12px;margin-top:14px}
.maison-tuile{display:grid;gap:8px;align-content:start;border:1px solid var(--filet);border-radius:12px;padding:10px;background:var(--blanc)}
.maison-tuile svg{width:52px;height:auto;flex:none;border-radius:5px}
.maison-nom{font-size:13px;display:grid;gap:1px;font-weight:600}
.maison-nom code{font-family:var(--mono);font-size:10.5px;color:var(--gris)}
.maison-tuile form{margin:0}
.maison-tuile .btn-mini{width:100%}
.est-masquee{opacity:.55;background:color-mix(in srgb,var(--velin) 60%,var(--blanc))}
.est-masquee .maison-nom{text-decoration:line-through;text-decoration-color:color-mix(in srgb,var(--noir) 35%,transparent)}
.grille-parametres,.grille-interrupteurs{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:16px;margin-bottom:18px}

.section-groupe{font-family:var(--serif);font-weight:500;font-size:20px;margin:26px 0 12px;display:flex;align-items:baseline;gap:10px}
.section-groupe:first-of-type{margin-top:6px}
.section-compte{font-family:var(--mono);font-size:12px;color:var(--gris)}
.btn-copier.copie-ok{border-color:var(--encre);color:var(--encre)}
.atelier-decor{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.decor-g{position:absolute;left:-70px;top:8%;font-family:var(--serif);font-size:56vh;line-height:1;color:color-mix(in srgb,var(--encre) 6%,transparent)}
.decor-paraphe{position:absolute;right:-40px;bottom:10%;width:420px;opacity:.10}

/* ── 1.27.1 : la marque soudée & les vraies miniatures ── */
.marque-mot{display:inline-block}
.maison-rendu{position:relative;width:100%;height:78px;overflow:hidden;border:1px solid var(--filet);border-radius:8px;background:var(--blanc)}
.maison-rendu .rendu-cadre{position:absolute;top:6px;left:6px;width:560px;transform:scale(.33);transform-origin:top left;pointer-events:none}
.fonte-rendu{width:132px;height:56px}
.fonte-rendu .rendu-cadre{transform:scale(.26)}
.est-masquee .maison-rendu{filter:grayscale(1);opacity:.7}

/* ── 1.28 : le couloir de sortie ── */
.decompte-purge{display:block;margin:6px 0 2px;font-family:var(--mono);font-size:11px;color:var(--gris)}
.decompte-urgent{color:#7a1f2b}
.acces-actions{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.btn-danger{border-color:#c9b0b4;color:#7a1f2b}
.btn-danger:hover{border-color:#7a1f2b}

/* ── 1.30 : l'aplomb ── */



/* ── 1.31 : les plans du Marbre ── */
.marbre-bloc.bloc-avant{z-index:30;border-color:var(--or);box-shadow:0 2px 10px color-mix(in srgb,var(--or) 25%,transparent)}
.marbre-bloc.bloc-avant::after{content:"◱ avant";position:absolute;top:-9px;right:6px;font-family:var(--mono);font-size:9px;letter-spacing:.08em;background:var(--blanc);border:1px solid var(--or);border-radius:6px;padding:1px 5px;color:var(--noir)}

/* ── 1.32 : le Marbre WYSIWYG ── */
.marbre-scene{position:absolute;top:0;left:0;transform-origin:top left;pointer-events:none;z-index:0}
#marbre-feuille.a-scene{background:var(--blanc)}
#marbre-feuille.a-scene .marbre-bloc{background:transparent;border:1px dashed transparent;box-shadow:none}
#marbre-feuille.a-scene .marbre-bloc:hover{border-color:color-mix(in srgb,var(--encre) 45%,transparent);background:color-mix(in srgb,var(--encre) 4%,transparent)}
#marbre-feuille.a-scene .marbre-bloc.marbre-choisi{border:1.5px solid var(--encre);background:color-mix(in srgb,var(--encre) 6%,transparent)}
#marbre-feuille.a-scene .marbre-bloc.bloc-avant{border-style:solid;border-color:color-mix(in srgb,var(--or) 70%,transparent)}
#marbre-feuille.a-scene .marbre-glyphe{opacity:0;position:absolute;top:-11px;left:6px;font-size:10px;background:var(--blanc);border:1px solid var(--filet);border-radius:6px;padding:1px 6px;transition:opacity .12s;white-space:nowrap}
#marbre-feuille.a-scene .marbre-bloc:hover .marbre-glyphe,#marbre-feuille.a-scene .marbre-choisi .marbre-glyphe{opacity:1}


/* ── 1.33 : le nom en main & la dépose directe ── */
#marbre-feuille.marbre-survol-depot{outline:2px dashed var(--encre);outline-offset:-2px;background:color-mix(in srgb,var(--encre) 4%,var(--blanc))}
.marbre-toast{position:absolute;right:14px;bottom:14px;z-index:60;background:var(--noir);color:var(--velin);font-size:12.5px;padding:8px 12px;border-radius:9px;box-shadow:0 6px 18px rgba(13,15,21,.25);animation:toast-marbre .18s ease-out}
.marbre-toast-erreur{background:#7a1f2b}
@keyframes toast-marbre{from{transform:translateY(6px);opacity:0}to{transform:none;opacity:1}}

/* ── 1.34 : une seule surface ── */
.apercu-source{position:fixed !important;left:-220vw;top:0;width:820px;visibility:hidden;pointer-events:none}
#marbre-feuille.a-scene{background:var(--blanc);border:1px solid var(--filet);border-radius:14px;box-shadow:0 10px 30px rgba(13,15,21,.05)}


.marbre-fin{margin-top:10px;border-top:1px dashed var(--filet);padding-top:8px}
.marbre-fin>summary{cursor:pointer;font-size:12px;color:var(--gris);font-family:var(--mono);letter-spacing:.04em;list-style:none}
.marbre-fin>summary::before{content:"▸ ";color:var(--or)}
.marbre-fin[open]>summary::before{content:"▾ "}

/* ── 1.35 : Calques & la jauge, sous la loi EFR ── */


.calque-rang{display:flex;align-items:center;gap:4px}
.calque-nom{flex:1;display:flex;align-items:center;gap:8px;text-align:left;border:1px solid transparent;background:transparent;border-radius:8px;padding:5px 8px;font-size:13px;cursor:pointer}
.calque-nom:hover{background:color-mix(in srgb,var(--encre) 5%,transparent)}
.calque-choisi .calque-nom{border-color:var(--encre);background:color-mix(in srgb,var(--encre) 7%,transparent)}
.calque-sur{font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--gris);border:1px solid var(--filet);border-radius:5px;padding:1px 5px}
.calque-btn{border:1px solid var(--filet);background:var(--blanc);border-radius:7px;width:24px;height:24px;cursor:pointer;font-size:12px;line-height:1}
.calque-btn:hover{border-color:var(--encre);color:var(--encre)}
.jauge-points{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:6px}
.jauge-point{font-size:12.5px;line-height:1.5;padding-left:16px;position:relative}
.jauge-point::before{content:"";position:absolute;left:2px;top:6px;width:7px;height:7px;border-radius:50%}
.jauge-point-bon::before{background:#2e7d5b}
.jauge-point-attention::before{background:var(--or)}
.jauge-point-efr::before{background:#7a1f2b}
.badge.jauge-bon{border-color:#2e7d5b;color:#2e7d5b}
.badge.jauge-attention{border-color:var(--or);color:#6b5518}
.badge.jauge-efr{border-color:#7a1f2b;color:#7a1f2b;font-weight:700}

/* ── 1.36 : le plan de travail (trois colonnes, barre, compositions, score) ── */



.compos-grille{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
.compo-carte{display:grid;gap:5px;border:1px solid var(--filet);border-radius:10px;background:var(--blanc);padding:7px 7px 6px;cursor:pointer;text-align:center}
.compo-carte:hover{border-color:var(--encre);box-shadow:0 3px 10px color-mix(in srgb,var(--encre) 12%,transparent)}
.compo-apercu svg{width:100%;height:auto;display:block;border-radius:5px;background:var(--velin)}
.compo-nom{font-size:10.5px;line-height:1.25;color:var(--noir);font-weight:600}


.outil{width:30px;height:30px;border:1px solid var(--filet);border-radius:8px;background:var(--blanc);cursor:pointer;font-size:13px;line-height:1;display:grid;place-items:center;color:var(--noir)}
.outil:hover{border-color:var(--encre);color:var(--encre);background:color-mix(in srgb,var(--encre) 5%,transparent)}
.outil-danger:hover{border-color:#7a1f2b;color:#7a1f2b;background:color-mix(in srgb,#7a1f2b 5%,transparent)}
.barre-sep{width:1px;height:20px;background:var(--filet);margin:0 3px}



#marbre-feuille.a-scene.en-geste{background-image:linear-gradient(color-mix(in srgb,var(--encre) 7%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--encre) 7%,transparent) 1px,transparent 1px);background-size:16px 16px}
.calque-type{font-family:var(--mono);font-size:9px;font-weight:700;letter-spacing:.02em;width:22px;flex:none;text-align:center;border-radius:4px;padding:2px 0;background:var(--velin);color:var(--gris);border:1px solid var(--filet)}



.calque-libelle{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.jauge-tete{display:flex;align-items:center;gap:11px;margin-top:8px}
.jauge-score{flex:none;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font-family:var(--mono);font-size:15px;font-weight:700;border:2px solid var(--filet);color:var(--gris)}
.jauge-score.jauge-bon{border-color:#2e7d5b;color:#2e7d5b;background:color-mix(in srgb,#2e7d5b 8%,transparent)}
.jauge-score.jauge-attention{border-color:var(--or);color:#6b5518;background:color-mix(in srgb,var(--or) 10%,transparent)}
.jauge-score.jauge-efr{border-color:#7a1f2b;color:#7a1f2b;background:color-mix(in srgb,#7a1f2b 8%,transparent)}
.jauge-tete .cab-note{margin:0}
/* ── 1.37 : la planche libre (v4) ── */

.planche-plan{position:relative;background:var(--blanc);border-radius:10px;box-shadow:0 10px 30px rgba(13,15,21,.07);touch-action:none;overflow:hidden}
.planche-scene{position:absolute;top:0;left:0;transform-origin:top left;pointer-events:none;z-index:0}
.planche-plan.survol-depot{outline:2px dashed var(--encre);outline-offset:-3px}
.planche-cadrelet{position:absolute;box-sizing:border-box;border:1px dashed transparent;border-radius:4px;cursor:grab}
.planche-cadrelet:hover{border-color:color-mix(in srgb,var(--encre) 45%,transparent);background:color-mix(in srgb,var(--encre) 4%,transparent)}
.planche-cadrelet.cadre-choisi{border:1.5px solid var(--encre);background:color-mix(in srgb,var(--encre) 5%,transparent);cursor:move}
.planche-cadrelet.cadre-decor.cadre-choisi{border-color:var(--or)}
.planche-cadrelet.cadre-image.cadre-choisi{border-color:#2e7d5b}
.planche-cadrelet.cadre-masque{opacity:.35;border-style:dotted}
.planche-cadrelet.cadre-verrou{cursor:not-allowed}
.cadrelet-nom{position:absolute;top:-10px;left:5px;font-family:var(--mono);font-size:9px;letter-spacing:.04em;background:var(--blanc);border:1px solid var(--filet);border-radius:5px;padding:0 5px;white-space:nowrap;opacity:0;transition:opacity .12s;pointer-events:none}
.planche-cadrelet:hover .cadrelet-nom,.planche-cadrelet.cadre-choisi .cadrelet-nom{opacity:1}
.cadrelet-poignee{position:absolute;width:9px;height:9px;background:var(--blanc);border:1.5px solid var(--encre);border-radius:2px;z-index:2}












.palette-groupe{margin:9px 0 2px;font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--gris)}
.marbre-sorte.sorte-texte{border-left:3px solid color-mix(in srgb,var(--encre) 55%,transparent)}
.marbre-sorte.sorte-image{border-left:3px solid #2e7d5b}
.marbre-sorte.sorte-decor{border-left:3px solid var(--or)}

.marbre-inspecteur .btn-danger{margin-top:8px}

/* ── 1.38 : Atelier de la Planche — modes Essentiel & Avancé ───────
   Deux interfaces, un seul modèle v4. Le plan reste au pixel ; le moteur
   serveur compile les contenus vivants en tables e-mail et le décor en PNG. */
.planche-editeur-v2{margin:14px 0 22px;border:1px solid var(--filet);border-radius:18px;background:color-mix(in srgb,var(--velin) 52%,var(--blanc));overflow:hidden;box-shadow:0 16px 42px rgba(13,15,21,.05)}
.atelier-planche{grid-template-columns:minmax(0,1fr)}
.atelier-planche .atelier-form{min-width:0}
.atelier-planche .planche-editeur-v2{--planche-editeur-largeur:min(1480px,calc(100vw - 32px));width:var(--planche-editeur-largeur);margin-left:calc((100% - var(--planche-editeur-largeur))/2)}
.planche-editeur-v2 label{text-transform:none;letter-spacing:normal}
.planche-editeur-v2 [hidden]{display:none!important}
.planche-modebar{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:12px 14px;border-bottom:1px solid var(--filet);background:var(--blanc)}
.planche-onglets{display:flex;gap:6px;background:var(--velin);border:1px solid var(--filet);border-radius:12px;padding:4px}
.planche-onglet{display:grid;gap:1px;min-width:190px;text-align:left;border:0;border-radius:8px;background:transparent;padding:8px 12px;color:var(--gris);cursor:pointer}
.planche-onglet span{font-size:13px;font-weight:750;letter-spacing:.01em;color:inherit}
.planche-onglet small{font-size:10.5px;line-height:1.25;color:inherit}
.planche-onglet:hover{background:color-mix(in srgb,var(--encre) 5%,var(--blanc));color:var(--noir)}
.planche-onglet.actif{background:var(--blanc);color:var(--encre);box-shadow:0 2px 9px rgba(13,15,21,.08)}
.planche-mode-aide{max-width:560px;margin:0;font-size:11.5px;line-height:1.5;color:var(--gris);text-align:right}
.planche-espace{display:grid;grid-template-columns:minmax(210px,238px) minmax(520px,1fr) minmax(250px,286px);align-items:start;min-width:0}
.planche-rail{display:grid;gap:12px;align-content:start;min-width:0;padding:14px;background:color-mix(in srgb,var(--velin) 58%,var(--blanc))}
.planche-rail-gauche{border-right:1px solid var(--filet)}
.planche-rail-droite{border-left:1px solid var(--filet)}
.planche-mode-panneau{display:grid;gap:12px}
.planche-panneau,.planche-inspecteur-carte{border:1px solid var(--filet);border-radius:12px;background:var(--blanc);padding:12px 13px;box-shadow:0 3px 11px rgba(13,15,21,.025)}
.planche-panneau h2,.planche-inspecteur-carte h2{margin:0;font-family:var(--serif);font-size:16px;font-weight:550;line-height:1.2;color:var(--noir)}
.planche-inspecteur{display:grid;gap:10px;min-width:0}
.planche-layouts{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:9px}
.planche-layout{display:grid;gap:5px;justify-items:center;border:1px solid var(--filet);border-radius:9px;background:var(--blanc);padding:7px 5px;font-size:10.5px;color:var(--gris);cursor:pointer}
.planche-layout:hover{border-color:var(--encre);color:var(--encre);background:color-mix(in srgb,var(--encre) 3%,var(--blanc))}
.planche-layout-dessin{position:relative;width:72px;height:38px;border:1px solid color-mix(in srgb,var(--noir) 18%,transparent);border-radius:4px;background:var(--velin)}
.planche-layout-dessin::before,.planche-layout-dessin::after{content:"";position:absolute;background:color-mix(in srgb,var(--encre) 72%,transparent);border-radius:2px}
.planche-layout-dessin::before{width:18px;height:18px;top:9px;left:7px;border-radius:50%}
.planche-layout-dessin::after{width:32px;height:4px;top:10px;right:7px;box-shadow:0 8px 0 color-mix(in srgb,var(--gris) 42%,transparent),0 16px 0 color-mix(in srgb,var(--gris) 32%,transparent)}
.planche-layout-dessin.disposition-droite::before{left:auto;right:7px}.planche-layout-dessin.disposition-droite::after{right:auto;left:7px}
.planche-layout-dessin.disposition-texte::before{display:none}.planche-layout-dessin.disposition-texte::after{width:56px;right:7px}
.planche-layout-dessin.disposition-verticale::before{left:27px;top:3px;width:16px;height:16px}.planche-layout-dessin.disposition-verticale::after{left:16px;right:auto;top:23px;width:40px;box-shadow:0 7px 0 color-mix(in srgb,var(--gris) 38%,transparent)}
.planche-capsules{display:grid;gap:6px;margin-top:9px}
.planche-capsule{display:flex;align-items:center;gap:9px;width:100%;text-align:left;border:1px solid var(--filet);border-radius:10px;background:var(--blanc);padding:8px 9px;cursor:grab}
.planche-capsule:hover{border-color:var(--encre);background:color-mix(in srgb,var(--encre) 4%,var(--blanc))}
.planche-capsule:active{cursor:grabbing}
.capsule-icone{display:grid;place-items:center;flex:none;width:28px;height:28px;border:1px solid color-mix(in srgb,var(--encre) 28%,transparent);border-radius:8px;background:color-mix(in srgb,var(--encre) 6%,var(--blanc));font-family:var(--mono);font-size:10px;font-weight:800;color:var(--encre)}
.capsule-lien .capsule-icone{color:#2e6b54;border-color:color-mix(in srgb,#2e6b54 34%,transparent);background:color-mix(in srgb,#2e6b54 7%,var(--blanc))}
.planche-capsule>span:last-child{display:grid;gap:1px;min-width:0}.planche-capsule strong{font-size:12px;color:var(--noir)}.planche-capsule small{font-size:10px;color:var(--gris)}
.planche-phrase-label{display:block;margin-top:10px;font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--gris)}
.planche-phrase-ligne{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px;margin-top:5px}
.planche-phrase-ligne input{min-width:0;border:1px solid var(--filet);border-radius:8px;background:var(--velin);padding:7px 8px;font-size:12px;color:var(--noir)}
.planche-actions-verticales{display:grid;gap:6px;margin-top:9px}.planche-actions-verticales .btn{justify-content:flex-start;text-align:left;font-size:11.5px}
.planche-invariant{margin:9px 0 0;padding:8px 9px;border-left:3px solid var(--or);border-radius:0 8px 8px 0;background:color-mix(in srgb,var(--or) 9%,var(--blanc));font-size:10.8px;line-height:1.45;color:var(--gris)}
.planche-palette{display:grid;gap:6px;margin-top:6px}.planche-palette-grille{display:grid;grid-template-columns:1fr 1fr;gap:5px}
.planche-sorte{display:flex;align-items:center;gap:6px;min-width:0;border:1px solid var(--filet);border-left-width:3px;border-radius:8px;background:var(--blanc);padding:6px 7px;text-align:left;font-size:10.3px;color:var(--noir);cursor:grab}
.planche-sorte:hover{border-color:var(--encre);background:color-mix(in srgb,var(--encre) 4%,var(--blanc))}.planche-sorte:active{cursor:grabbing}
.planche-sorte.sorte-texte{border-left-color:var(--encre)}.planche-sorte.sorte-image{border-left-color:#2e7d5b}.planche-sorte.sorte-decor{border-left-color:var(--or)}
.planche-sorte-code{display:grid;place-items:center;flex:none;width:23px;height:21px;border-radius:5px;background:var(--velin);font-family:var(--mono);font-size:8.5px;font-weight:800;color:var(--gris)}
.planche-importer{width:100%;margin-top:9px;font-size:11px}
.planche-centre{display:grid;align-content:start;min-width:0;padding:14px;background:var(--blanc)}
.planche-barre{display:flex;align-items:center;gap:8px;flex-wrap:wrap;border:1px solid var(--filet);border-radius:12px;background:var(--blanc);padding:7px 8px;box-shadow:0 3px 12px rgba(13,15,21,.035)}
.planche-outils{display:flex;align-items:center;gap:4px}.planche-outils .outil:disabled{opacity:.34;cursor:not-allowed}.planche-outils .outil.actif{border-color:var(--encre);color:var(--encre);background:color-mix(in srgb,var(--encre) 7%,var(--blanc))}
.outil-texte{width:auto;min-width:30px;padding:0 7px;font-family:var(--mono);font-size:9.5px;font-weight:700}
.planche-vues{margin-left:auto}.planche-zoom-label{display:flex;align-items:center;gap:5px;margin-left:3px;font-size:10px;color:var(--gris)}
.planche-zoom-label select{height:30px;border:1px solid var(--filet);border-radius:7px;background:var(--velin);padding:0 5px;font-size:10.5px;color:var(--noir)}
.planche-dimensions{display:flex;align-items:center;gap:6px;padding-left:7px;border-left:1px solid var(--filet);font-size:10px;color:var(--gris)}
.planche-dimensions label{display:flex;align-items:center;gap:3px;white-space:nowrap}.planche-dimensions input[type="number"]{width:57px;height:28px;border:1px solid var(--filet);border-radius:7px;background:var(--velin);padding:3px 5px;font-family:var(--mono);font-size:10.5px;color:var(--noir)}
.planche-fond-label input[type="color"]{width:28px;height:24px;padding:1px;border:1px solid var(--filet);border-radius:6px;background:var(--blanc)}
.planche-raccourcis{min-height:18px;margin:7px 2px 5px;font-size:10.5px;color:var(--gris)}.planche-raccourcis kbd{font-family:var(--mono);font-size:9px;border:1px solid var(--filet);border-bottom-width:2px;border-radius:4px;padding:0 4px;background:var(--velin)}
.planche-stage-scroll{position:relative;min-height:360px;max-height:680px;overflow:auto;border:1px solid var(--filet);border-radius:14px;background-color:var(--velin);background-image:linear-gradient(45deg,color-mix(in srgb,var(--noir) 4%,transparent) 25%,transparent 25%,transparent 75%,color-mix(in srgb,var(--noir) 4%,transparent) 75%),linear-gradient(45deg,color-mix(in srgb,var(--noir) 4%,transparent) 25%,transparent 25%,transparent 75%,color-mix(in srgb,var(--noir) 4%,transparent) 75%);background-size:18px 18px;background-position:0 0,9px 9px;padding:28px;overscroll-behavior:contain}
.planche-stage-host{position:relative;margin:auto;transition:width .12s ease,height .12s ease}
.planche-editeur-v2 .planche-plan{position:absolute;left:0;top:0;overflow:visible;background:var(--blanc);border:1px solid color-mix(in srgb,var(--noir) 13%,transparent);border-radius:0;box-shadow:0 14px 36px rgba(13,15,21,.14);transform-origin:top left;touch-action:none;user-select:none}
.planche-editeur-v2 .planche-plan:focus{outline:2px solid color-mix(in srgb,var(--encre) 55%,transparent);outline-offset:3px}
.planche-editeur-v2 .planche-scene{position:absolute;inset:0;z-index:1;overflow:hidden;pointer-events:none;transform:none!important;background:transparent}
.planche-editeur-v2 .planche-scene>.fonte-planche{transform:none!important;transform-origin:top left!important}
.planche-grille-overlay,.planche-zone-sure-overlay,.planche-guides,.planche-objets{position:absolute;inset:0;pointer-events:none}
.planche-grille-overlay{z-index:2;display:none;background-image:linear-gradient(color-mix(in srgb,var(--encre) 11%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--encre) 11%,transparent) 1px,transparent 1px);background-size:16px 16px}
.planche-plan.grille-active .planche-grille-overlay{display:block}
.planche-zone-sure-overlay{z-index:3;display:none;inset:12px;border:1px dashed color-mix(in srgb,var(--or) 74%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--blanc) 55%,transparent)}
.planche-zone-sure-overlay::after{content:"zone sûre";position:absolute;right:3px;top:2px;padding:1px 4px;border-radius:4px;background:color-mix(in srgb,var(--blanc) 86%,transparent);font-family:var(--mono);font-size:8px;letter-spacing:.06em;color:#6b5518}
.planche-plan.zone-sure-active .planche-zone-sure-overlay{display:block}
.planche-guides{z-index:45}.planche-guides i{position:absolute;display:block;background:#d08a20;box-shadow:0 0 0 1px color-mix(in srgb,#fff 62%,transparent)}.planche-guides .guide-x{top:0;bottom:0;width:1px}.planche-guides .guide-y{left:0;right:0;height:1px}
.planche-objets{z-index:20}.planche-marquee{position:absolute;z-index:70;border:1px solid var(--encre);background:color-mix(in srgb,var(--encre) 9%,transparent);pointer-events:none}
.planche-editeur-v2 .planche-cadrelet{position:absolute;box-sizing:border-box;border:1px dashed transparent;border-radius:3px;pointer-events:auto;cursor:grab;outline:none}
.planche-editeur-v2 .planche-cadrelet:hover{border-color:color-mix(in srgb,var(--encre) 45%,transparent);background:color-mix(in srgb,var(--encre) 3%,transparent)}
.planche-editeur-v2 .planche-cadrelet.cadre-choisi{border:1.5px solid var(--encre);background:color-mix(in srgb,var(--encre) 6%,transparent);cursor:move;box-shadow:0 0 0 1px color-mix(in srgb,var(--blanc) 70%,transparent)}
.planche-editeur-v2 .planche-cadrelet.cadre-decor.cadre-choisi{border-color:#9b741f;background:color-mix(in srgb,var(--or) 8%,transparent)}
.planche-editeur-v2 .planche-cadrelet.cadre-image.cadre-choisi{border-color:#2e7d5b;background:color-mix(in srgb,#2e7d5b 7%,transparent)}
.planche-editeur-v2 .planche-cadrelet.cadre-multiple{border-style:solid}.planche-editeur-v2 .planche-cadrelet.cadre-masque{opacity:.5;border-style:dotted;background:repeating-linear-gradient(135deg,color-mix(in srgb,var(--gris) 8%,transparent) 0 5px,transparent 5px 10px)}
.planche-editeur-v2 .planche-cadrelet.cadre-verrou{cursor:not-allowed}.planche-editeur-v2 .planche-cadrelet.cadre-verrou::after{content:"▣";position:absolute;right:3px;bottom:2px;font-size:9px;color:var(--gris)}
.planche-editeur-v2 .cadrelet-nom{position:absolute;left:4px;top:-13px;max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border:1px solid var(--filet);border-radius:5px;background:var(--blanc);padding:1px 5px;font-family:var(--mono);font-size:8.5px;line-height:1.2;letter-spacing:.02em;color:var(--gris);opacity:0;transition:opacity .1s;pointer-events:none}
.planche-editeur-v2 .planche-cadrelet:hover .cadrelet-nom,.planche-editeur-v2 .planche-cadrelet.cadre-choisi .cadrelet-nom{opacity:1}
.cadrelet-fantome{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:grid;place-items:center;min-width:28px;height:22px;border:1px solid currentColor;border-radius:6px;background:color-mix(in srgb,var(--blanc) 84%,transparent);font-family:var(--mono);font-size:9px;font-weight:800;color:var(--gris);pointer-events:none}
.planche-editeur-v2 .cadrelet-poignee{position:absolute;width:9px;height:9px;border:1.5px solid var(--encre);border-radius:2px;background:var(--blanc);box-shadow:0 1px 2px rgba(13,15,21,.18);z-index:4}
.planche-editeur-v2 .cadre-image .cadrelet-poignee{border-color:#2e7d5b}.planche-editeur-v2 .cadre-decor .cadrelet-poignee{border-color:#9b741f}
.planche-etat-ligne{display:flex;justify-content:space-between;gap:12px;margin:7px 2px 0;font-family:var(--mono);font-size:9.8px;color:var(--gris)}
.planche-rendu-etat{text-align:right}.planche-rendu-etat.rendu-ok{color:#2e7d5b}.planche-rendu-etat.rendu-attente{color:#6b5518}.planche-rendu-etat.rendu-erreur{color:#7a1f2b}
.planche-inspecteur-carte{display:grid;gap:8px}.planche-position-grille,.planche-inspecteur-grille{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.planche-champ{display:grid;gap:4px;min-width:0;font-size:9.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--gris)}
.planche-champ>small{font-size:9.5px;font-weight:400;letter-spacing:0;line-height:1.35;text-transform:none;color:var(--gris)}
.planche-champ input:not([type="checkbox"]):not([type="color"]),.planche-champ select{width:100%;min-width:0;height:31px;border:1px solid var(--filet);border-radius:7px;background:var(--velin);padding:4px 6px;font-family:var(--sans);font-size:11px;font-weight:500;letter-spacing:0;text-transform:none;color:var(--noir);box-sizing:border-box}
.planche-champ input[type="checkbox"]{justify-self:start;width:17px;height:17px;accent-color:var(--encre)}
.planche-couleur-controle{display:grid;grid-template-columns:minmax(0,1fr) 32px;gap:5px}.planche-couleur-controle input[type="color"]{width:32px;height:31px;padding:2px;border:1px solid var(--filet);border-radius:7px;background:var(--blanc)}
.planche-actions-inspecteur{display:flex;gap:7px;flex-wrap:wrap}.planche-resume{display:grid;grid-template-columns:1fr auto;gap:5px 10px;margin:2px 0 0;font-size:11px}.planche-resume dt{color:var(--gris)}.planche-resume dd{margin:0;font-family:var(--mono);color:var(--noir)}
.planche-mesure-selection{margin:0;padding:7px 8px;border-radius:7px;background:var(--velin);font-family:var(--mono);font-size:10px;color:var(--gris)}
.planche-calques-liste{display:grid;gap:4px;max-height:290px;overflow:auto;margin-top:8px}.planche-calque{display:flex;align-items:center;gap:3px}.planche-calque-nom{display:flex;align-items:center;gap:6px;flex:1;min-width:0;border:1px solid transparent;border-radius:7px;background:transparent;padding:5px 6px;text-align:left;cursor:pointer}.planche-calque-nom:hover{background:color-mix(in srgb,var(--encre) 5%,transparent)}.planche-calque.choisi .planche-calque-nom{border-color:var(--encre);background:color-mix(in srgb,var(--encre) 7%,transparent)}
.planche-calque .calque-btn{flex:none;width:22px;height:22px;font-size:9px}.planche-calque .calque-libelle{font-size:10.5px}
.planche-image-dialog{width:min(620px,calc(100vw - 32px));border:1px solid var(--filet);border-radius:16px;background:var(--blanc);padding:0;box-shadow:0 24px 80px rgba(13,15,21,.28)}.planche-image-dialog::backdrop{background:rgba(13,15,21,.48);backdrop-filter:blur(2px)}
.planche-image-dialog-corps{display:grid;gap:12px;padding:18px}.planche-role-images{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.planche-role-image{display:grid;gap:5px;align-content:start;min-height:120px;border:1px solid var(--filet);border-radius:11px;background:var(--blanc);padding:12px;text-align:left;cursor:pointer}.planche-role-image:hover{border-color:var(--encre);background:color-mix(in srgb,var(--encre) 4%,var(--blanc))}.planche-role-image strong{font-size:12px;color:var(--noir)}.planche-role-image span{font-size:10.5px;line-height:1.45;color:var(--gris)}.planche-dialog-actions{display:flex;justify-content:flex-end}
.planche-toast{position:fixed;right:22px;bottom:22px;z-index:2500;max-width:380px;border-radius:10px;background:var(--noir);color:var(--velin);padding:10px 13px;box-shadow:0 12px 34px rgba(13,15,21,.24);font-size:12px;line-height:1.45;animation:planche-toast-entree .18s ease-out}.planche-toast-erreur{background:#7a1f2b}@keyframes planche-toast-entree{from{transform:translateY(8px);opacity:0}to{transform:none;opacity:1}}
.planche-plan.survol-depot{outline:2px dashed var(--encre);outline-offset:5px}.planche-plan.survol-depot::after{content:"Déposer ici";position:absolute;inset:12px;z-index:90;display:grid;place-items:center;border:1px dashed var(--encre);background:color-mix(in srgb,var(--blanc) 82%,transparent);font-family:var(--serif);font-size:20px;color:var(--encre);pointer-events:none}
.planche-plan.en-geste .planche-grille-overlay{display:block}.planche-plan.planche-invalide{display:grid;place-items:center;padding:24px;box-sizing:border-box;color:#7a1f2b;font-size:13px;text-align:center}
.marbre-code{margin:12px 0}.marbre-code summary{cursor:pointer;font-family:var(--mono);font-size:10.5px;color:var(--gris)}.marbre-code textarea{width:100%;box-sizing:border-box;margin-top:8px}
@media (max-width:1180px){.planche-espace{grid-template-columns:220px minmax(500px,1fr)}.planche-rail-droite{grid-column:1/-1;border-left:0;border-top:1px solid var(--filet);grid-template-columns:minmax(280px,1fr) minmax(280px,1fr);align-items:start}.planche-rail-droite>.planche-inspecteur{grid-column:1}.planche-rail-droite>#planche-calques,.planche-rail-droite>#planche-jauge{grid-column:2}.planche-rail-droite>#planche-jauge{margin-top:0}}
@media (max-width:940px){.planche-modebar{align-items:stretch;flex-direction:column}.planche-mode-aide{text-align:left}.planche-espace{grid-template-columns:1fr}.planche-rail-gauche{border-right:0;border-bottom:1px solid var(--filet)}.planche-centre{order:2}.planche-rail-droite{order:3;grid-template-columns:1fr}.planche-rail-droite>.planche-inspecteur,.planche-rail-droite>#planche-calques,.planche-rail-droite>#planche-jauge{grid-column:1}.planche-stage-scroll{min-height:310px;padding:22px}.planche-role-images{grid-template-columns:1fr}.planche-role-image{min-height:0}.planche-vues{margin-left:0}.planche-dimensions{border-left:0;padding-left:0}}
@media (max-width:580px){.planche-onglets{display:grid;grid-template-columns:1fr}.planche-onglet{min-width:0}.planche-layouts,.planche-palette-grille,.planche-position-grille,.planche-inspecteur-grille{grid-template-columns:1fr}.planche-stage-scroll{padding:16px}.planche-dimensions{flex-wrap:wrap}.planche-etat-ligne{display:grid}.planche-rendu-etat{text-align:left}}

/* ── 1.38 : la forge des manusigns (bibliothèque) — voile emprunté à l'éditeur ── */
.infos-forge-ligne{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center;margin:10px 0 4px}
.infos-forge-ligne small{color:var(--gris);font-size:12px}
.voile{position:fixed;inset:0;background:rgba(20,21,25,.45);backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;z-index:60;padding:18px}
.voile[hidden]{display:none}
.recadreur{background:var(--blanc);border:1px solid var(--filet);border-radius:14px;padding:16px 18px 18px;max-width:660px;width:100%;box-shadow:0 40px 90px -30px rgba(20,21,25,.5)}
.recadreur.calli{max-width:760px;width:100%}
.recadreur .aide{margin-top:10px}
.rec-titre{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.rec-titre h3{font-family:var(--serif);font-weight:500;font-size:18px}
.rec-x{margin-left:auto;width:28px;height:28px;border-radius:50%;border:1px solid var(--filet);background:var(--blanc);color:var(--noir);font-size:15px;font-weight:700;line-height:1}
.rec-x:hover{border-color:var(--noir)}
.calli-reglages{display:grid;gap:10px;margin-bottom:12px}
.calli-champ{display:grid;gap:6px;font-size:11.5px;font-weight:700;color:var(--gris);letter-spacing:.05em}
.calli-facultatif{font-weight:400;letter-spacing:0;text-transform:none}
.calli-champ input{border:1px solid var(--filet);border-radius:10px;padding:10px 12px;font-size:15px;font-weight:400;background:var(--blanc);color:var(--noir)}
.calli-champ input:focus{outline:none;border-color:var(--encre);box-shadow:0 0 0 3px var(--selection)}
.calli-options{display:flex;flex-wrap:wrap;gap:14px;align-items:center;font-size:13px;color:var(--noir)}
.calli-etiquette{font-size:11.5px;font-weight:700;color:var(--gris);letter-spacing:.05em}
.calli-options label{display:inline-flex;gap:6px;align-items:center;cursor:pointer}
.calli-pente{margin-left:auto}
.calli-grille{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;max-height:46vh;overflow-y:auto;padding:2px}
.calli-choix{border:1px solid var(--filet);border-radius:12px;background:var(--blanc);padding:10px 14px 8px;display:grid;gap:2px;cursor:pointer;text-align:center;transition:border-color .15s}
.calli-choix:hover{border-color:var(--encre)}
.calli-choix.actif{border-color:var(--encre);box-shadow:inset 0 0 0 1px var(--encre)}
.calli-apercu{font-size:34px;line-height:1.25;color:var(--noir);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.calli-apercu-img{display:block;height:46px;width:auto;max-width:100%;margin:0 auto}
.calli-nom{font-size:10.5px;font-weight:700;color:var(--gris)}
.calli-pied{display:flex;gap:14px;align-items:center;justify-content:space-between;margin-top:12px}
.calli-pied .aide{margin:0}
@media (max-width:640px){.calli-grille{grid-template-columns:1fr}.calli-pied{flex-direction:column;align-items:stretch}}

/* ── 1.38 : le logo d'un profil, deux voies (bibliothèque ou adresse) ── */
.infos-logo{margin:0 0 14px}
.infos-logo-titre{display:block;font-size:11.5px;font-weight:700;color:var(--gris);letter-spacing:.05em;margin-bottom:8px}
.infos-logo-choix{display:flex;flex-wrap:wrap;gap:10px}
.infos-logo-vignette{position:relative;display:grid;gap:5px;justify-items:center;width:96px;padding:8px 6px;border:1px solid var(--filet);border-radius:12px;cursor:pointer;background:var(--blanc);transition:border-color .15s}
.infos-logo-vignette:hover{border-color:var(--encre)}
.infos-logo-vignette input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.infos-logo-vignette:has(input:checked){border-color:var(--encre);box-shadow:inset 0 0 0 1px var(--encre)}
.infos-logo-vignette:has(input:focus-visible){outline:2px solid var(--encre);outline-offset:2px}
.infos-logo-visuel{display:grid;place-items:center;width:100%;height:46px;border-radius:8px;background:repeating-conic-gradient(#f0f1f4 0 25%,#fafafb 0 50%) 0 0/12px 12px;color:var(--gris);font-size:16px}
.infos-logo-visuel img{max-width:100%;max-height:46px;object-fit:contain}
.infos-logo-aucune .infos-logo-visuel{background:none;border:1px dashed var(--filet)}
.infos-logo-vignette small{max-width:100%;font-size:10.5px;color:var(--gris);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.infos-logo-aide{margin:8px 0 0;font-size:12px;color:var(--gris)}

/* ── 1.43 : la confirmation de la maison (remplace window.confirm) ── */
.recadreur.confirmer{max-width:460px}
.confirmer-message{margin:0;font-size:13.5px;line-height:1.55;color:var(--gris)}
.confirmer-message[hidden]{display:none}
.confirmer-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:18px}
.confirmer-actions .btn{min-width:104px}
/* La teinte d'alerte a son jeton depuis les skins d'origine. */
.confirmer-danger{background:var(--danger);border-color:var(--danger);color:#fff}
.confirmer-danger:hover{filter:brightness(1.12)}
@media (max-width:480px){.confirmer-actions{flex-direction:column-reverse}.confirmer-actions .btn{width:100%}}

/* ── 1.45 : le brouillon se voit ── */
.badge-brouillon{
  position:absolute;top:10px;left:10px;z-index:2;
  padding:3px 9px;border-radius:999px;
  background:var(--or);color:var(--blanc);
  font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;
  box-shadow:0 2px 8px -2px rgba(20,21,25,.45);pointer-events:none;
}
.btn-plus{white-space:nowrap}


/* ── 1.47 : le guide — la figure d'abord, un client à la fois ── */
.gd{max-width:1120px;margin:0 auto;padding:20px 20px 56px;display:grid;gap:18px}

/* Le choix du client : une seule rangée, en haut, avant tout le reste. */
.gd-choix{display:grid;gap:8px}
.gd-choix-titre{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--gris)}
.gd-choix ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.gd-puce{display:grid;gap:1px;padding:8px 13px;border:1px solid var(--filet);border-radius:10px;background:var(--blanc);text-decoration:none}
.gd-puce strong{font-size:13.5px;color:var(--noir)}
.gd-puce span{font-size:11px;color:var(--gris)}
.gd-puce:hover{border-color:var(--encre)}
.gd-puce.suggere{border-color:var(--or)}
.gd-puce.actif{border-color:var(--encre);background:var(--encre)}
.gd-puce.actif strong,.gd-puce.actif span{color:var(--blanc)}

.gd-plan{display:grid;grid-template-columns:minmax(0,1fr) 236px;gap:24px;align-items:start}
.gd-tuto{display:grid;gap:16px;min-width:0}
.gd-tete h1{font-family:var(--serif);font-weight:500;font-size:27px;margin:0}
.gd-chemin{margin:5px 0 0;font-family:var(--mono);font-size:11.5px;color:var(--gris);display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.gd-chemin b{font-weight:400;color:var(--noir)}

/* LA FIGURE : c'est elle qu'on regarde en premier. */
.gd-figure{margin:0}
.gd-figure figcaption{margin-top:8px;font-size:11.5px;color:var(--gris)}
.gd-piege{margin:0;padding:11px 14px;border-left:3px solid var(--or);border-radius:0 8px 8px 0;background:color-mix(in srgb,var(--or) 10%,transparent);font-size:13px;line-height:1.55}
.gd-piege b{font-weight:700}

.gd-etapes{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.gd-etapes li{display:grid;grid-template-columns:26px minmax(0,1fr);gap:11px;align-items:start}
.gd-num{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;border:1px solid var(--filet);
  font-family:var(--mono);font-size:12px;color:var(--gris);background:var(--blanc)}
.gd-num.ancre{border-color:var(--encre);background:var(--encre);color:var(--blanc)}
.gd-etape{font-size:13.5px;line-height:1.55;color:var(--gris)}
.gd-etape b{display:block;font-size:14px;color:var(--noir)}

.gd-bas{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px}
.gd-note{border:1px solid var(--filet);border-radius:10px;padding:11px 13px}
.gd-note h2{margin:0 0 6px;font-size:12.5px;font-weight:700}
.gd-note ul{margin:0;padding-left:17px;font-size:12.5px;line-height:1.5;color:var(--gris);display:grid;gap:4px}
.gd-capacites{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.gd-capacites li{font-size:11px;padding:3px 9px;border-radius:999px;border:1px solid var(--filet)}
.gd-capacites li.oui{border-color:var(--encre);color:var(--encre)}
.gd-capacites li.non{opacity:.5;text-decoration:line-through}
.gd-source{margin:0;font-size:11.5px;color:var(--gris)}
.gd-source a{color:var(--encre)}
.gd-manque{margin:0;font-size:12.5px;color:var(--gris)}

/* Le rail : étroit, discret, et ses aperçus enfin entiers. */
.gd-rail{position:sticky;top:16px;display:grid;gap:10px}
.gd-rail h2{font-family:var(--serif);font-weight:500;font-size:16px;margin:0}
.gd-rail-aide,.gd-rail-vide{margin:0;font-size:11.5px;line-height:1.45;color:var(--gris)}
.gd-rail ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.gd-griffe{border:1px solid var(--filet);border-radius:10px;padding:8px;display:grid;gap:7px;background:var(--blanc)}
.gd-griffe-tete{display:flex;align-items:baseline;gap:6px}
.gd-griffe-nom{font-size:12px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gd-griffe-etat{margin-left:auto;font-family:var(--mono);font-size:9px;text-transform:uppercase;color:var(--or)}
.gd-tirage{width:100%;height:86px;border:1px solid var(--filet);border-radius:6px;background:var(--blanc)}
.gd-copier{justify-self:start}

@media (max-width:960px){
  .gd-plan{grid-template-columns:1fr}
  .gd-rail{position:static;order:-1}
  .gd-rail ul{grid-template-columns:repeat(auto-fill,minmax(190px,1fr))}
  .gd-tete h1{font-size:23px}
}

/* ── 1.47 : les maquettes — l'écran du client, dessiné, avec ses repères ── */
.mq{border:1px solid var(--filet);border-radius:12px;overflow:hidden;background:var(--blanc);
  font-size:11.5px;line-height:1.35;color:var(--noir);box-shadow:0 10px 30px -22px rgba(20,21,25,.5)}


.mq-chrome{display:flex;align-items:center;gap:6px;padding:8px 12px;border-bottom:1px solid var(--filet);background:color-mix(in srgb,var(--noir) 4%,transparent)}
.mq-feu{width:9px;height:9px;border-radius:50%;background:var(--filet)}
.mq-titre{margin-left:8px;font-weight:700;font-size:11.5px}
.mq-encoche{width:96px;height:16px;margin:6px auto 0;border-radius:0 0 12px 12px;background:color-mix(in srgb,var(--noir) 8%,transparent)}
.mq-barre-mobile{display:flex;justify-content:space-between;padding:6px 14px 2px;font-family:var(--mono);font-size:9.5px;color:var(--gris)}
.mq-barre-mobile span:nth-child(2){font-family:var(--sans);font-weight:700;color:var(--noir)}
.mq-corps{padding:12px;display:grid;gap:9px}

.mq-bloc{position:relative;border:1px solid var(--filet);border-radius:8px;padding:8px 10px;display:grid;gap:4px;background:var(--blanc)}
.mq-colonnes{display:grid;grid-template-columns:repeat(auto-fit,minmax(112px,1fr));gap:9px;align-items:start}

/* Le repère : c'est lui qui relie l'image au texte. */
.mq-repere{position:absolute;top:-9px;left:-9px;z-index:2;width:20px;height:20px;border-radius:50%;
  display:grid;place-items:center;background:var(--encre);color:var(--blanc);
  font-family:var(--mono);font-size:11px;font-weight:700;box-shadow:0 2px 6px -1px rgba(20,21,25,.4)}

.mq-onglets{display:flex;flex-wrap:wrap;gap:5px}
.mq-onglet{padding:3px 9px;border-radius:6px;color:var(--gris)}
.mq-onglet.actif{background:var(--encre);color:var(--blanc)}
.mq-menu{gap:2px}
.mq-item{padding:3px 6px;border-radius:5px;color:var(--gris)}
.mq-item.actif{background:color-mix(in srgb,var(--encre) 12%,transparent);color:var(--encre);font-weight:700}
.mq-liste-titre{font-family:var(--mono);font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:var(--gris)}
.mq-ligne{padding:3px 6px;border-radius:5px;color:var(--gris);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mq-ligne.actif{background:color-mix(in srgb,var(--encre) 12%,transparent);color:var(--encre)}
.mq-plus{justify-self:start;margin-top:2px;width:20px;height:18px;display:grid;place-items:center;
  border:1px solid var(--filet);border-radius:5px;font-size:12px;color:var(--gris)}
.mq-zone{background:color-mix(in srgb,var(--noir) 2%,transparent);min-height:56px}
.mq-zone span{display:block}
.mq-champ{grid-template-columns:auto 1fr;display:grid;align-items:center;gap:8px}
.mq-label{font-family:var(--mono);font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:var(--gris)}
.mq-valeur{border:1px solid var(--filet);border-radius:5px;padding:2px 7px}
.mq-case{grid-template-columns:auto 1fr;display:grid;align-items:center;gap:8px}
.mq-case.alerte{border-color:var(--or);background:color-mix(in srgb,var(--or) 8%,transparent)}
.mq-coche{width:13px;height:13px;border:1px solid var(--gris);border-radius:3px}
.mq-coche.cochee{background:var(--encre);border-color:var(--encre)}
.mq-boutons{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end;border:none;padding:0}
.mq-bouton{padding:4px 11px;border:1px solid var(--filet);border-radius:6px;color:var(--gris)}
.mq-bouton.primaire{background:var(--encre);border-color:var(--encre);color:var(--blanc)}
.mq-reglage{grid-template-columns:1fr auto;display:grid;align-items:center;gap:8px}
.mq-reglage-val{color:var(--gris)}

@media (max-width:520px){.mq-colonnes{grid-template-columns:1fr}.mq-repere{left:-6px;top:-7px}}

/* ── 1.48 : la barre à deux étages — identité au-dessus, sections dessous ── */
.barre .contenu{gap:16px}
.barre .marque{margin-right:auto}
/* Les anciens onglets en capitales espacées quittent l'étage du haut. */
.barre nav{display:none}

.usager{position:relative;flex:0 0 auto}
.usager-puce{display:inline-flex;align-items:center;gap:9px;border:1px solid var(--filet);background:var(--blanc);
  border-radius:999px;padding:5px 13px 5px 5px;cursor:pointer;font:inherit;font-size:13.5px;color:var(--noir)}
.usager-puce:hover{border-color:var(--encre)}
.usager-jeton{width:28px;height:28px;border-radius:50%;background:var(--encre);color:var(--blanc);
  display:grid;place-items:center;font-family:var(--mono);font-size:11px;font-weight:700}
.usager-chevron{color:var(--gris);font-size:11px}
.usager-tiroir{position:absolute;right:0;top:calc(100% + 8px);min-width:230px;background:var(--blanc);
  border:1px solid var(--filet);border-radius:12px;box-shadow:0 26px 60px -28px rgba(20,21,25,.5);padding:6px;z-index:60}
.usager-tiroir[hidden]{display:none}
.usager-tiroir a{display:block;padding:9px 11px;border-radius:8px;text-decoration:none;color:var(--noir);font-size:13.5px}
.usager-tiroir a:hover{background:var(--halo);text-decoration:none}
.usager-coiffe{display:block;padding:8px 11px 5px;font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--gris)}
.usager-sep{display:block;height:1px;background:var(--filet);margin:5px 4px}
.usager-sortie{color:var(--danger)}

/* L'étage des sections : il défile plutôt que de casser. */
.sous-barre .contenu{overflow-x:auto;scrollbar-width:none}
.sous-barre .contenu::-webkit-scrollbar{display:none}
.sous-barre a{white-space:nowrap}

@media (max-width:620px){
  .usager-nom{display:none}
  .usager-puce{padding:5px 9px 5px 5px}
}

/* ── 1.49 : l'accueil — où j'en suis, ce qui attend, par où je reprends ── */
.ac{max-width:1000px;margin:0 auto;padding:26px 20px 60px;display:grid;gap:26px}
.ac-sur{margin:0;font-family:var(--mono);font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--gris)}
.ac-tete h1{font-family:var(--serif);font-weight:500;font-size:32px;line-height:1.1;margin:5px 0 8px}
.ac-etat{margin:0;font-size:14.5px;color:var(--gris)}
.ac-etat b{color:var(--noir);font-variant-numeric:tabular-nums}

.ac-attentes{display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:14px}
.ac-carte{border:1px solid var(--filet);border-radius:14px;padding:16px 18px;background:var(--blanc);
  display:grid;gap:8px;align-content:start;border-top:2px solid var(--or)}
.ac-carte h2{font-family:var(--serif);font-weight:500;font-size:18px;margin:0}
.ac-carte p{margin:0;font-size:13px;line-height:1.55;color:var(--gris)}
.ac-carte .btn{justify-self:start;margin-top:4px}
.ac-enordre{margin:0;padding:15px 18px;border:1px solid var(--filet);border-radius:14px;background:var(--blanc);
  font-size:14px;color:var(--gris)}

.ac-bandeau{display:flex;align-items:baseline;gap:14px;margin-bottom:12px}
.ac-bandeau h2{font-family:var(--serif);font-weight:500;font-size:20px;margin:0}
.ac-bandeau a{margin-left:auto;font-size:12.5px;color:var(--encre)}
.ac-recentes ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}
.ac-griffe{display:grid;gap:8px;border:1px solid var(--filet);border-radius:12px;padding:11px;background:var(--blanc);text-decoration:none}
.ac-griffe:hover{border-color:var(--encre);text-decoration:none}
.ac-griffe-nom{font-size:13px;font-weight:700;color:var(--noir);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ac-tirage{width:100%;height:94px;border:1px solid var(--filet);border-radius:7px;background:var(--blanc);pointer-events:none}
.ac-sans{font-size:12px;color:var(--gris)}

.ac-poser{display:flex;flex-wrap:wrap;align-items:center;gap:16px;border:1px solid var(--filet);
  border-radius:14px;padding:16px 18px;background:color-mix(in srgb,var(--or) 6%,transparent)}
.ac-poser h2{font-family:var(--serif);font-weight:500;font-size:19px;margin:0 0 4px}
.ac-poser p{margin:0;font-size:13px;line-height:1.55;color:var(--gris);max-width:62ch}
.ac-poser .btn{margin-left:auto;white-space:nowrap}

@media (max-width:620px){
  .ac-tete h1{font-size:26px}
  .ac-poser .btn{margin-left:0;width:100%;text-align:center}
}

/* ── 1.50 : le clin d'œil — une question à voix basse, sous la salutation ── */
.ac-clin{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px;margin:9px 0 0;
  font-family:var(--serif);font-style:italic;font-size:16.5px;line-height:1.4;color:var(--gris)}
.ac-clin form{display:inline;margin:0}
/* Le bouton du changement de skin doit se lire comme un lien : c'est un
   POST parce qu'il change un état, pas parce qu'il est plus important. */
.ac-clin a,.ac-clin button{font:inherit;color:var(--encre);background:none;border:0;padding:0;cursor:pointer;
  text-decoration:none;border-bottom:1px solid color-mix(in srgb,var(--encre) 35%,transparent)}
.ac-clin a:hover,.ac-clin button:hover{border-bottom-color:var(--encre);text-decoration:none}
@media (max-width:620px){.ac-clin{font-size:15px}}

/* ── 1.72 : le cartouche du brief ── */
.cab-aide{margin:0 0 14px;font-size:13px;line-height:1.6;color:var(--gris);max-width:78ch}
.cab-aide strong{color:var(--noir)}
.brief-actions{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:12px}
.brief-voir summary{cursor:pointer;font-size:12.5px;color:var(--encre);padding:4px 0}
.brief-voir textarea{width:100%;margin-top:8px;border:1px solid var(--filet);border-radius:10px;
  padding:12px 14px;font-family:var(--mono);font-size:11.5px;line-height:1.6;
  background:var(--blanc);color:var(--noir);resize:vertical}

/* ── 1.73 : l'emploi d'une structure, lu dans les griffes existantes ── */
.maison-emploi{font-size:11.5px;color:var(--gris);font-family:var(--mono)}
.maison-emploi b{color:var(--encre);font-weight:700}
.maison-emploi i{font-style:normal;opacity:.75}
/* Une structure que personne n'a jamais choisie se signale d'elle-même :
   c'est l'information la plus utile de cette page. */
.maison-tuile.sans-preneur{border-style:dashed}
.maison-tuile.sans-preneur .maison-emploi i{color:var(--or)}

/* ── 1.81 : le cadre de l'aperçu agrandi ── */
.apercu-signature-survol-cadre{display:block;width:100%;height:100%;border:0;background:var(--blanc)}
.vignette-source{display:none}

/* ── 1.82 : LA CASSE GÉRANTE ──────────────────────────────────────────
   La page est tenue à deux, dont une personne qui n'a pas écrit
   l'atelier : le mode d'emploi occupe le haut et ne se replie pas, et
   chaque fiche porte l'épreuve de son écriture plutôt que son seul nom.
   Aucune couleur en dur — jetons uniquement. */
.protocole{margin-bottom:18px}
.protocole-colonnes{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:22px;margin-top:12px}
.protocole-bloc h3{font-family:var(--serif);font-size:15px;margin:0 0 8px;color:var(--noir)}
.protocole-bloc h3 + ol,.protocole-bloc h3 + ul{margin-top:0}
.protocole-bloc ol,.protocole-bloc ul{margin:0 0 16px;padding-left:20px;font-size:13px;line-height:1.65;color:var(--gris)}
.protocole-bloc li{margin-bottom:6px}
.protocole-bloc li strong{color:var(--noir)}
.protocole-bloc code{font-family:var(--mono);font-size:11.5px}
.protocole-filet{border-left:2px solid var(--or);padding-left:18px}

.reprise{margin-bottom:18px;border-left:3px solid var(--or)}
.reprise .cab-note{max-width:86ch}

.depot-form{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:14px 0 4px}
.depot-champ{display:grid;gap:4px;font-size:13px;color:var(--gris)}
.depot-champ > span{color:var(--noir);font-weight:600}
.depot-champ em{font-style:normal;font-size:11.5px;color:var(--or);font-weight:400}
.depot-champ small{font-size:11.5px;color:var(--gris)}
.depot-large{grid-column:1 / -1}
.depot-actions{grid-column:1 / -1;display:flex;justify-content:flex-end}

.casse-carte{align-content:start}
.casse-large{grid-column:1 / -1}
.casse-nom .badge{vertical-align:middle;margin-left:4px}
.casse-service{display:flex;flex-wrap:wrap;gap:8px}
.casse-service form{margin:0}
.casse-retrait > summary{cursor:pointer;font-size:12.5px;color:var(--gris);padding:4px 0;list-style:none}
.casse-retrait > summary::-webkit-details-marker{display:none}
.casse-retrait > summary::before{content:"▸ ";color:var(--danger)}
.casse-retrait[open] > summary::before{content:"▾ "}
.casse-retrait[open] > summary{color:var(--danger)}
.casse-retrait form{display:grid;gap:8px;margin:8px 0 0;padding:12px;border:1px solid var(--filet);border-radius:10px;background:var(--velin)}
.casse-retrait select{border:1px solid var(--filet);border-radius:10px;padding:9px 12px;background:var(--blanc);color:var(--noir);font-size:14px}
.casse-avert{margin:0;font-size:12.5px;line-height:1.55;color:var(--gris)}
/* Une écriture au repos garde son tracé lisible : c'est justement sur lui
   qu'on juge s'il faut la remettre en service ou la retirer. */
.est-masquee.casse-carte .casse-trait{opacity:1}
.est-masquee.casse-carte .casse-nom strong{text-decoration:line-through;
  text-decoration-color:color-mix(in srgb,var(--noir) 35%,transparent)}
@media (max-width:620px){
  .depot-form{grid-template-columns:1fr}
  .casse-form{grid-template-columns:1fr}
}

/* ── 1.85 : L'ATELIER DES MISSIVES ────────────────────────────────────
   Les mots à gauche, le rendu réel à droite. L'aperçu est un cadre en
   bac à sable : la feuille de style du site n'a rien à faire dans un
   courriel, elle le défigurerait — leçon de la 1.80. Jetons seulement. */
.langues-choix{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 10px}
.langue-compte{font-family:var(--mono);font-size:10.5px;opacity:.7;margin-left:6px}

.missive-carte{margin-bottom:18px}
.missive-carte .cab-compte code{font-family:var(--mono);font-size:11px}
.missive-colonnes{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px;margin-top:14px}
.missive-form{display:grid;gap:12px;align-content:start}
.missive-form textarea{width:100%;border:1px solid var(--filet);border-radius:10px;padding:10px 12px;
  font-family:var(--sans);font-size:14px;line-height:1.6;background:var(--blanc);color:var(--noir);resize:vertical}
.missive-vars{margin:0;font-size:12px;line-height:1.75;color:var(--gris)}
.missive-vars code{font-family:var(--mono);font-size:11.5px;color:var(--encre)}
.missive-alerte{display:block;margin-top:6px;color:var(--danger)}

.missive-apercu{display:grid;gap:10px;align-content:start}
.missive-cadre{width:100%;height:460px;border:1px solid var(--filet);border-radius:12px;background:var(--blanc)}
.missive-pied{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.missive-pied input{border:1px solid var(--filet);border-radius:10px;padding:9px 12px;
  font-size:13.5px;background:var(--blanc);color:var(--noir)}
.missive-pied .casse-boutons{grid-column:1 / -1}
@media (max-width:900px){
  .missive-colonnes{grid-template-columns:1fr}
  .missive-cadre{height:380px}
}
.infos-langue-form{display:grid;gap:10px;align-content:start;padding-bottom:18px;
  border-bottom:1px solid var(--filet);margin-bottom:18px}
.infos-langue-form select{border:1px solid var(--filet);border-radius:10px;padding:10px 12px;
  font-size:15px;background:var(--blanc);color:var(--noir)}
.infos-langue-form .btn{justify-self:start}

/* ── 1.86 : LE REGISTRE DES CODES ─────────────────────────────────── */
.codes-tableau{font-size:13px}
.codes-tableau td{vertical-align:top;line-height:1.6}
.codes-jeton{font-family:var(--mono);font-size:12px;color:var(--encre);white-space:nowrap}
.codes-lieu{font-family:var(--mono);font-size:10.5px;line-height:1.5}
.codes-restants{margin-top:12px;font-size:12.5px;line-height:1.9}
.codes-restants code{font-family:var(--mono);font-size:11.5px}


/* ══════════════════════════════════════════════════════════════════════
   2.16 — DES CARTES QUI SE COMPARENT
   ══════════════════════════════════════════════════════════════════════
   Chaque vignette portait son propre ascenseur — l'échelle du `srcdoc`
   est fixe, une griffe à longue mention dépassait le cadre. La grille
   était en dents de scie et l'on ne comparait rien.

   ON NE PEUT PAS AJUSTER L'ÉCHELLE : un `srcdoc` en bac à sable ne laisse
   pas mesurer la hauteur de son contenu, et lui donner ce droit défairait
   l'isolement posé en 1.80. On coupe donc net, avec un fondu qui DIT que
   la griffe continue. L'aperçu agrandi reste à un clic. */
.grille-signatures:not(.vue-liste) .carte-signature{height:100%}
.grille-signatures:not(.vue-liste){align-items:stretch}
.vignette{position:relative;height:176px}
/* Le blanc du fondu est FIXE, et c'est voulu : il doit se confondre avec
   le fond de l'iframe (`.vignette-int{background:#ffffff}`), qui est la
   feuille du DESTINATAIRE — pas la peau de l'atelier. C'est l'exception du
   simulacre, posée en 1.92 : ce qui appartient au courrielleur ne suit pas
   la peau. Un jeton de peau ici ferait apparaître un liseré au changement
   de robe. */
.vignette::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:34px;pointer-events:none;
  background:linear-gradient(to bottom,rgba(255,255,255,0),#fff);
}
.vignette-int{overflow:hidden}

/* Le titre tient sur deux lignes au plus : sans quoi une griffe au long
   nom décalait toute sa rangée. */
.grille-signatures:not(.vue-liste) .carte-signature h2{
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  min-height:2.5em;
}
/* Le pied se colle en bas : les actions s'alignent d'une carte à l'autre. */


/* Les actions ne paraissent qu'au survol — et au clavier, sans quoi elles
   deviendraient inatteignables pour qui ne pointe pas. */
/* ══════════════════════════════════════════════════════════════════════
   2.45 — LE SURVOL N'EXISTE PAS AU DOIGT
   ══════════════════════════════════════════════════════════════════════
   Plusieurs commandes ne paraissaient qu'au survol : le bouton de
   suppression d'une image de la bibliothèque, celui d'une fonte, les
   actions d'une carte de griffe. Sur un téléphone, elles étaient
   INATTEIGNABLES — et deux d'entre elles sont destructives, donc
   introuvables au moment où l'on en a besoin.

   `hover:none` désigne exactement les pointeurs qui ne survolent pas.
   Sous ce media, tout ce qui se révélait se montre d'emblée. On ne perd
   rien : ces commandes n'étaient cachées que pour alléger l'écran d'un
   pointeur qui, lui, peut les faire venir. */
@media (hover:none){
  .fonte-oter,

  /* Une commande destructive au doigt mérite une cible franche : 32
     points au lieu de 20, sans quoi on efface la mauvaise image. */
  .fonte-oter{width:32px;height:32px}

}


/* ══ 2.47 — CE QUE J'AI CRU CORRIGER DEUX FOIS N'EXISTAIT PAS ═════════
   En 2.16 j'ai écrit des règles pour révéler au survol les actions d'une
   carte de griffe, et en 2.45 pour les montrer au doigt. Toutes visaient
   `.cs-actions`. LA VRAIE CLASSE EST `.menu-actions`, et c'est un
   `<details>` : il s'ouvre au CLIC, donc il fonctionnait déjà au doigt.
   Le défaut n'a jamais existé dans le marquage ; seules mes règles
   existaient, et elles ne visaient rien.

   CE QUI MANQUAIT VRAIMENT, c'est la taille des cibles. Un menu et un
   bouton « Copier » de 30 points se ratent au pouce. */
@media (hover:none){
  .menu-actions summary,
  .carte-signature .btn-copier,
  .carte-signature .btn-ouvrir{ min-height:44px;padding-left:14px;padding-right:14px }
  .menu-liste a, .menu-liste button{ min-height:44px;display:flex;align-items:center }
}

/* ══ 2.51 — L'INVENTAIRE EST VIDE ═════════════════════════════════════
   Cinquante-quatre classes orphelines traitées en quatre versions, une
   famille à la fois, avec une règle qui ne laisse rien passer par
   inadvertance : le retrait n'est accepté que si l'inventaire perd
   exactement ce qu'il devait perdre, banc au vert.
   Les dernières résistaient parce qu'elles vivaient DANS un `@media`
   écrit sur une seule ligne : mon motif refusait de franchir l'accolade
   ouvrante. Un media query devenu vide est retiré avec elles. */


/* ══ 2.52 — LA FAMILLE `mq-*` EST RESTITUÉE ═══════════════════════════
   Mon nettoyage des classes orphelines l'a supprimée en 2.49. Or
   `fumee-guide` EXIGE que `.mq-telephone` soit stylée : ce sont les
   maquettes de messagerie du guide de pose.

   JE NE L'AI PAS VU PARCE QUE CE HARNAIS NE TOURNE PAS ICI — il réclame
   PHP — et parce que ma boucle de vérification ÉCARTAIT les harnais sans
   décompte au lieu de les compter rouges. J'ai donc déclaré « inventaire
   vide, vingt-et-un au vert » sur une mesure qui ne regardait pas.

   L'inventaire des classes orphelines n'est fiable que si TOUS les
   harnais tournent. Sur ce bac à sable, quatre ne tournent pas. */
.mq-fenetre{max-width:100%}
.mq-telephone{max-width:290px;margin:0 auto;border-radius:22px;border-width:2px}
.mq-chrome{display:flex;align-items:center;gap:6px;padding:8px 12px;border-bottom:1px solid var(--filet);background:color-mix(in srgb,var(--noir) 4%,transparent)}
.mq-feu{width:9px;height:9px;border-radius:50%;background:var(--filet)}
.mq-titre{margin-left:8px;font-weight:700;font-size:11.5px}
.mq-encoche{width:96px;height:16px;margin:6px auto 0;border-radius:0 0 12px 12px;background:color-mix(in srgb,var(--noir) 8%,transparent)}
.mq-barre-mobile{display:flex;justify-content:space-between;padding:6px 14px 2px;font-family:var(--mono);font-size:9.5px;color:var(--gris)}
.mq-barre-mobile span:nth-child(2){font-family:var(--sans);font-weight:700;color:var(--noir)}
.mq-corps{padding:12px;display:grid;gap:9px}
.mq-bloc{position:relative;border:1px solid var(--filet);border-radius:8px;padding:8px 10px;display:grid;gap:4px;background:var(--blanc)}
.mq-colonnes{display:grid;grid-template-columns:repeat(auto-fit,minmax(112px,1fr));gap:9px;align-items:start}
.mq-repere{position:absolute;top:-9px;left:-9px;z-index:2;width:20px;height:20px;border-radius:50%;
  display:grid;place-items:center;background:var(--encre);color:var(--blanc);
  font-family:var(--mono);font-size:11px;font-weight:700;box-shadow:0 2px 6px -1px rgba(20,21,25,.4)}
.mq-onglets{display:flex;flex-wrap:wrap;gap:5px}
.mq-onglet{padding:3px 9px;border-radius:6px;color:var(--gris)}
.mq-onglet.actif{background:var(--encre);color:var(--blanc)}
.mq-menu{gap:2px}
.mq-item{padding:3px 6px;border-radius:5px;color:var(--gris)}
.mq-item.actif{background:color-mix(in srgb,var(--encre) 12%,transparent);color:var(--encre);font-weight:700}
.mq-liste-titre{font-family:var(--mono);font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:var(--gris)}
.mq-ligne{padding:3px 6px;border-radius:5px;color:var(--gris);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mq-ligne.actif{background:color-mix(in srgb,var(--encre) 12%,transparent);color:var(--encre)}
.mq-plus{justify-self:start;margin-top:2px;width:20px;height:18px;display:grid;place-items:center;
  border:1px solid var(--filet);border-radius:5px;font-size:12px;color:var(--gris)}
.mq-zone{background:color-mix(in srgb,var(--noir) 2%,transparent);min-height:56px}
.mq-zone span{display:block}
.mq-champ{grid-template-columns:auto 1fr;display:grid;align-items:center;gap:8px}
.mq-label{font-family:var(--mono);font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:var(--gris)}
.mq-valeur{border:1px solid var(--filet);border-radius:5px;padding:2px 7px}
.mq-case{grid-template-columns:auto 1fr;display:grid;align-items:center;gap:8px}
.mq-case.alerte{border-color:var(--or);background:color-mix(in srgb,var(--or) 8%,transparent)}
.mq-coche{width:13px;height:13px;border:1px solid var(--gris);border-radius:3px}
.mq-coche.cochee{background:var(--encre);border-color:var(--encre)}
.mq-boutons{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end;border:none;padding:0}
.mq-bouton{padding:4px 11px;border:1px solid var(--filet);border-radius:6px;color:var(--gris)}
.mq-bouton.primaire{background:var(--encre);border-color:var(--encre);color:var(--blanc)}
.mq-reglage{grid-template-columns:1fr auto;display:grid;align-items:center;gap:8px}
.mq-reglage-val{color:var(--gris)}