/* Pixellence — calibrage — charte reprise de pixellence-composition.com */
:root {
  --violet: #7e66e1;
  --violet-fonce: #5f48c4;
  --violet-pale: #efebfd;
  --noir: #141414;
  --texte: #212529;
  --gris: #6b6f76;
  --gris-clair: #eeeeee;
  --filet: #e2e2e6;
  --blanc: #ffffff;
  --fond: #f7f6fb;
  --vert: #4bab24;
  --rouge: #c0392b;
  --rayon: 14px;
  --ombre: 0 10px 30px rgba(20, 20, 20, .07), 0 2px 6px rgba(20, 20, 20, .05);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--fond); color: var(--texte);
  font-family: 'Montserrat', system-ui, sans-serif; font-size: 15px; line-height: 1.55;
}
h1, h2, h3, .kanit { font-family: 'Kanit', 'Montserrat', sans-serif; font-weight: 500; letter-spacing: .01em; }
a { color: var(--violet); }
button, input, select { font: inherit; }

/* ---------- en-tête ---------- */
.entete { background: var(--noir); color: var(--blanc); position: relative; overflow: hidden; }
.entete::after {
  content: ''; position: absolute; inset: auto -10% -60% auto; width: 520px; height: 520px; border-radius: 50%;
  background: radial-gradient(circle, rgba(126, 102, 225, .45), rgba(126, 102, 225, 0) 70%); pointer-events: none;
}
.entete .barre { max-width: 1120px; margin: 0 auto; padding: 18px 20px; display: flex; align-items: center; justify-content: space-between; gap: 16px; position: relative; z-index: 1; }
.entete .logo img { height: 58px; display: block; }
.entete nav a { color: #d0d0d0; text-decoration: none; font-size: 14px; margin-left: 22px; }
.entete nav a:hover { color: var(--blanc); }
.hero { max-width: 1120px; margin: 0 auto; padding: 26px 20px 64px; position: relative; z-index: 1; }
.hero h1 { font-size: clamp(30px, 5vw, 46px); line-height: 1.1; margin: 0 0 12px; font-weight: 400; }
.hero h1 b { color: var(--violet); font-weight: 600; }
.hero p { max-width: 640px; color: #cfcfd6; margin: 0; font-size: 16px; }
.hero .puces { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.hero .puces span { border: 1px solid rgba(255, 255, 255, .18); color: #e8e8ee; border-radius: 99px; padding: 5px 13px; font-size: 13px; }

/* ---------- mise en page ---------- */
main { max-width: 1120px; margin: -36px auto 0; padding: 0 20px 60px; position: relative; z-index: 2; }
.grille { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 24px; align-items: start; }
.carte { background: var(--blanc); border-radius: var(--rayon); box-shadow: var(--ombre); padding: 26px; }
.carte h2 { margin: 0 0 4px; font-size: 22px; }
.carte .sous { color: var(--gris); margin: 0 0 20px; font-size: 14px; }
.etape { display: inline-flex; width: 26px; height: 26px; border-radius: 50%; background: var(--violet); color: #fff; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; margin-right: 8px; vertical-align: 2px; font-family: 'Kanit', sans-serif; }

/* ---------- formulaires ---------- */
.champ { margin-bottom: 16px; }
.champ label { display: block; font-weight: 600; font-size: 13px; margin-bottom: 6px; color: var(--noir); }
.champ .aide { font-size: 12px; color: var(--gris); margin-top: 5px; }
.ligne { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.ligne.deux { grid-template-columns: repeat(2, minmax(0, 1fr)); }
input[type=number], input[type=text], input[type=password], select {
  width: 100%; border: 1.5px solid var(--filet); border-radius: 10px; padding: 11px 12px; background: #fff; color: var(--texte);
  transition: border-color .15s, box-shadow .15s;
}
input:focus, select:focus { outline: none; border-color: var(--violet); box-shadow: 0 0 0 4px rgba(126, 102, 225, .15); }
.unite { position: relative; }
.unite input { padding-right: 38px; }
.unite::after { content: attr(data-u); position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: var(--gris); font-size: 13px; pointer-events: none; }
input.gros { font-size: 22px; font-family: 'Kanit', sans-serif; padding: 12px 14px; }

/* modèles */
.modeles { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; margin-bottom: 8px; }
.modele { border: 1.5px solid var(--filet); border-radius: 12px; padding: 12px 14px; cursor: pointer; display: flex; gap: 12px; align-items: center; background: #fff; text-align: left; transition: border-color .15s, background .15s; }
.modele:hover { border-color: #c9bff4; }
.modele[aria-pressed=true] { border-color: var(--violet); background: var(--violet-pale); }
.modele .vignette { flex: none; background: #fff; border: 1.5px solid var(--noir); border-radius: 2px; position: relative; }
.modele .vignette i { position: absolute; left: 18%; right: 18%; top: 16%; bottom: 14%; background: repeating-linear-gradient(#bbb 0 1px, transparent 1px 4px); }
.modele b { display: block; font-size: 14px; font-family: 'Kanit', sans-serif; font-weight: 500; }
.modele small { color: var(--gris); font-size: 12px; }

/* dépôt de fichier */
.depot { display: block; border: 2px dashed #cfc6f5; border-radius: 12px; padding: 18px; text-align: center; color: var(--gris); cursor: pointer; transition: background .15s, border-color .15s; background: #fcfbff; font-size: 14px; }
.depot:hover, .depot.survol { border-color: var(--violet); background: var(--violet-pale); color: var(--texte); }
.depot svg { width: 30px; height: 30px; color: var(--violet); display: block; margin: 0 auto 6px; }
.depot b { color: var(--violet); }
.depot .formats { font-size: 12px; margin-top: 4px; }
.etat-fichier { font-size: 13px; margin-top: 10px; padding: 10px 12px; border-radius: 10px; background: var(--fond); display: none; }
.etat-fichier.ok { display: block; border-left: 4px solid var(--vert); }
.etat-fichier.err { display: block; border-left: 4px solid var(--rouge); }
.etat-fichier.encours { display: block; border-left: 4px solid var(--violet); }
.ou { display: flex; align-items: center; gap: 10px; color: var(--gris); font-size: 12px; margin: 14px 0; text-transform: uppercase; letter-spacing: .08em; }
.ou::before, .ou::after { content: ''; flex: 1; height: 1px; background: var(--filet); }

/* ---------- résultat ---------- */
.resultat { position: sticky; top: 20px; }
.resultat .vide { color: var(--gris); text-align: center; padding: 30px 10px; }
.chiffre { text-align: center; padding: 6px 0 4px; }
.chiffre .n { font-family: 'Kanit', sans-serif; font-size: 76px; line-height: 1; color: var(--violet); font-weight: 500; }
.chiffre .l { font-size: 15px; color: var(--noir); font-weight: 600; margin-top: 6px; }
.chiffre .f { font-size: 13px; color: var(--gris); margin-top: 2px; }
.apercu { display: flex; justify-content: center; gap: 4px; margin: 20px 0; }
.apercu svg { filter: drop-shadow(0 6px 14px rgba(20, 20, 20, .12)); }
.stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 8px; }
.stat { background: var(--fond); border-radius: 10px; padding: 10px 12px; }
.stat .v { font-family: 'Kanit', sans-serif; font-size: 20px; color: var(--noir); }
.stat .k { font-size: 12px; color: var(--gris); }
.cahier { margin-top: 16px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: var(--noir); color: #fff; border-radius: 12px; padding: 14px 16px; }
.cahier .v { font-family: 'Kanit', sans-serif; font-size: 26px; color: #fff; }
.cahier .v small { font-size: 13px; color: #bdb3f0; font-family: 'Montserrat', sans-serif; }
.cahier select { width: auto; padding: 6px 10px; border-radius: 8px; border-color: #333; background: #222; color: #fff; margin-left: auto; }
.note { font-size: 12px; color: var(--gris); margin-top: 16px; line-height: 1.5; }
.alerte { font-size: 13px; background: #fff6e5; border-left: 4px solid #e7a531; padding: 8px 12px; border-radius: 8px; margin-top: 12px; }
.bouton { display: inline-flex; align-items: center; gap: 8px; border: 0; background: var(--violet); color: #fff; padding: 12px 20px; border-radius: 10px; cursor: pointer; font-weight: 600; text-decoration: none; transition: background .15s; }
.bouton:hover { background: var(--violet-fonce); }
.bouton.second { background: #fff; color: var(--violet); border: 1.5px solid var(--violet); }
.bouton.second:hover { background: var(--violet-pale); }
.bouton.danger { background: #fff; color: var(--rouge); border: 1.5px solid #e8b4ae; }
.bouton.petit { padding: 7px 12px; font-size: 13px; }
.cta { margin-top: 18px; text-align: center; }

/* ---------- comment ça marche ---------- */
.methode { margin-top: 28px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.methode .carte h3 { margin: 0 0 6px; font-size: 18px; }
.methode .carte p { margin: 0; color: var(--gris); font-size: 14px; }
.methode .ico { width: 42px; height: 42px; border-radius: 12px; background: var(--violet-pale); color: var(--violet); display: flex; align-items: center; justify-content: center; margin-bottom: 12px; }
.methode .ico svg { width: 22px; height: 22px; }

/* ---------- pied ---------- */
footer { background: var(--noir); color: #a9a9b2; font-size: 13px; }
footer .barre { max-width: 1120px; margin: 0 auto; padding: 26px 20px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; align-items: center; }
footer img { height: 34px; display: block; }
footer a { color: #d0d0d0; }

/* ---------- admin ---------- */
.admin-outils { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.admin-outils .espace { flex: 1; }
table.refs { width: 100%; border-collapse: collapse; font-size: 13px; margin-top: 8px; }
table.refs th { text-align: left; font-weight: 600; color: var(--gris); font-size: 12px; padding: 6px 6px; border-bottom: 1.5px solid var(--filet); white-space: nowrap; }
table.refs td { padding: 5px 4px; border-bottom: 1px solid var(--gris-clair); vertical-align: middle; }
table.refs input { padding: 7px 8px; border-radius: 8px; font-size: 13px; }
table.refs td.calc { font-family: 'Kanit', sans-serif; white-space: nowrap; padding: 0 8px; }
.ecart-ok { color: var(--vert); } .ecart-ko { color: var(--rouge); }
.tableau-defile { overflow-x: auto; }
.liste-modeles { display: flex; flex-direction: column; gap: 6px; }
.liste-modeles button { text-align: left; border: 1.5px solid var(--filet); background: #fff; border-radius: 10px; padding: 10px 12px; cursor: pointer; }
.liste-modeles button[aria-pressed=true] { border-color: var(--violet); background: var(--violet-pale); }
.liste-modeles small { color: var(--gris); display: block; }
.liste-polices { display: flex; flex-direction: column; gap: 8px; }
.police-ligne { display: grid; grid-template-columns: 1fr auto; gap: 2px 6px; align-items: center; }
.police-ligne input { padding: 8px 10px; font-size: 14px; }
.police-ligne small { grid-column: 1; color: var(--gris); font-size: 11px; }
.police-ligne button { grid-row: 1; grid-column: 2; }
.grille-admin { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 24px; align-items: start; }
.message { padding: 10px 14px; border-radius: 10px; margin-top: 12px; font-size: 14px; display: none; }
.message.ok { display: block; background: #eaf6e4; color: #2d6a14; }
.message.err { display: block; background: #fbeae8; color: var(--rouge); }
.coef-box { background: var(--noir); color: #fff; border-radius: 12px; padding: 14px 16px; display: flex; gap: 24px; flex-wrap: wrap; margin: 14px 0; }
.coef-box div { font-size: 12px; color: #bdb3f0; }
.coef-box b { display: block; font-family: 'Kanit', sans-serif; font-size: 22px; color: #fff; font-weight: 500; }

@media (max-width: 900px) {
  .grille, .liste-polices { display: flex; flex-direction: column; gap: 8px; }
.police-ligne { display: grid; grid-template-columns: 1fr auto; gap: 2px 6px; align-items: center; }
.police-ligne input { padding: 8px 10px; font-size: 14px; }
.police-ligne small { grid-column: 1; color: var(--gris); font-size: 11px; }
.police-ligne button { grid-row: 1; grid-column: 2; }
.grille-admin { grid-template-columns: 1fr; }
  .methode { grid-template-columns: 1fr; }
  .resultat { position: static; }
}
@media (max-width: 560px) {
  .ligne { grid-template-columns: 1fr 1fr; }
  .ligne .champ:last-child:nth-child(3) { grid-column: span 2; }
  .entete nav { display: none; }
  .carte { padding: 20px 16px; }
  main, .hero, .entete .barre, footer .barre { padding-left: 16px; padding-right: 16px; }
  .chiffre .n { font-size: 60px; }
}

/* ---------- commande ---------- */
.commande { margin-top: 24px; }
.commande h3 { font-size: 18px; margin: 0 0 10px; }
.bloc-cmd { border-top: 1px solid var(--filet); padding-top: 20px; margin-top: 20px; }
.bloc-cmd:first-of-type { border-top: 0; padding-top: 0; }
.facultatif { font-weight: 400; color: var(--gris); }
textarea { width: 100%; border: 1.5px solid var(--filet); border-radius: 10px; padding: 10px 12px; font: inherit; font-size: 14px; resize: vertical; background: #fff; color: var(--texte); }
textarea:focus { outline: none; border-color: var(--violet); box-shadow: 0 0 0 4px rgba(126, 102, 225, .15); }
input[type=email], input[type=tel], input[type=date] { width: 100%; border: 1.5px solid var(--filet); border-radius: 10px; padding: 11px 12px; background: #fff; color: var(--texte); }
input[type=email]:focus, input[type=tel]:focus, input[type=date]:focus { outline: none; border-color: var(--violet); box-shadow: 0 0 0 4px rgba(126, 102, 225, .15); }
.invalide { border-color: var(--rouge) !important; box-shadow: 0 0 0 4px rgba(192, 57, 43, .12) !important; }
.choix-charte { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
.option { display: flex; gap: 10px; align-items: flex-start; border: 1.5px solid var(--filet); border-radius: 12px; padding: 12px 14px; cursor: pointer; }
.option:has(input:checked) { border-color: var(--violet); background: var(--violet-pale); }
.option input { margin-top: 4px; accent-color: var(--violet); }
.option b { display: block; font-size: 14px; }
.option small { color: var(--gris); font-size: 12px; }
#niveaux { margin-top: 16px; }
#niveaux h4 { font-family: 'Kanit', sans-serif; font-weight: 500; font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--violet); margin: 18px 0 8px; }
.niveau { border: 1px solid var(--filet); border-radius: 10px; padding: 10px 12px; margin-bottom: 8px; background: #fff; }
.niveau.perso { border-color: #c9bff4; background: #fbfaff; }
.niveau-tete { display: flex; gap: 12px; align-items: center; justify-content: space-between; }
.niveau-nom { min-width: 0; font-size: 14px; }
.niveau-nom code { font-size: 11px; color: var(--gris); background: var(--fond); padding: 1px 5px; border-radius: 4px; }
.niveau-nom .nb { font-size: 12px; color: var(--gris); }
.niveau .exemple { font-size: 12px; color: var(--gris); font-style: italic; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.niveau textarea { display: none; margin-top: 8px; }
.niveau.perso textarea { display: block; }
.bascule { display: inline-flex; flex: none; border: 1.5px solid var(--filet); border-radius: 99px; padding: 2px; background: var(--fond); }
.bascule input { position: absolute; opacity: 0; pointer-events: none; }
.bascule span { display: block; padding: 5px 12px; border-radius: 99px; font-size: 12px; cursor: pointer; color: var(--gris); white-space: nowrap; }
.bascule input:checked + span { background: var(--violet); color: #fff; }
.bascule input:focus-visible + span { outline: 2px solid var(--violet); outline-offset: 1px; }
.case { display: flex; gap: 8px; align-items: center; font-size: 14px; margin-top: 4px; cursor: pointer; }
.case input { accent-color: var(--violet); width: 16px; height: 16px; }
.pot { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.recap-envoi { margin-top: 22px; background: var(--fond); border-radius: 12px; padding: 14px 16px; font-size: 14px; }
.recap-envoi:empty { display: none; }
.recap-ligne { margin-bottom: 8px; }
.confidentialite { font-size: 13px; color: var(--gris); margin: 16px 0 0; padding-left: 14px; border-left: 3px solid var(--violet); }
.confidentialite b { color: var(--noir); }
.gros-bouton { font-size: 16px; padding: 14px 28px; }
.bouton:disabled { opacity: .55; cursor: wait; }
.message.encours { display: block; background: var(--violet-pale); color: var(--violet-fonce); }
.merci { text-align: center; padding: 20px 10px; }
.merci-ico { width: 64px; height: 64px; border-radius: 50%; background: var(--violet); color: #fff; display: flex; align-items: center; justify-content: center; margin: 0 auto 14px; }
.merci-ico svg { width: 34px; height: 34px; }
.merci p { max-width: 560px; margin: 8px auto; }
@media (max-width: 640px) {
  .choix-charte { grid-template-columns: 1fr; }
  .niveau-tete { flex-direction: column; align-items: flex-start; }
}
.niveau-charte { border: 1px solid var(--filet); border-radius: 10px; padding: 8px 10px; margin-bottom: 8px; }
.nc-tete { display: flex; gap: 6px; align-items: center; margin-bottom: 6px; }
.nc-tete input { flex: 1; padding: 8px 10px; font-weight: 600; }
.bouton:disabled { opacity: .4; cursor: default; }
.bloc-charte-coll { margin-top: 14px; background: var(--fond); border-radius: 12px; padding: 12px 14px; }
.bloc-charte-coll details { margin-top: 8px; font-size: 14px; }
.bloc-charte-coll summary { cursor: pointer; color: var(--violet); font-weight: 600; font-size: 13px; }
.charte-dl { display: grid; grid-template-columns: minmax(120px, 30%) 1fr; gap: 6px 14px; margin: 10px 0 0; }
.charte-dl dt { font-weight: 600; }
.charte-dl dd { margin: 0; color: var(--texte); }
@media (max-width: 560px) { .charte-dl { grid-template-columns: 1fr; } .charte-dl dd { margin-bottom: 6px; } }

/* ---------- suivi des commandes ---------- */
.compteurs { margin-top: 14px; font-size: 13px; }
.compteurs:empty { display: none; }
.badge { display: inline-block; padding: 2px 9px; border-radius: 99px; font-size: 12px; font-weight: 600; color: var(--b); background: color-mix(in srgb, var(--b) 13%, white); border: 1px solid color-mix(in srgb, var(--b) 35%, white); white-space: nowrap; }
.commandes-table td { padding: 8px 6px; }
.commandes-table select { padding: 6px 8px; font-size: 13px; border-radius: 8px; min-width: 130px; }
.commandes-table tr.ouverte td { background: var(--violet-pale); }
.commandes-table code { font-size: 11px; }
.retard { color: var(--rouge); font-weight: 600; }
.urgence { color: #b7791f; font-weight: 600; }
.grille-detail { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
#detail h3 { font-size: 16px; margin: 20px 0 6px; }
#detail table.refs th { width: 38%; }
.perso-txt { color: var(--violet-fonce); }
.historique { margin: 0; padding-left: 18px; font-size: 13px; }
.historique li { margin: 4px 0; }
@media (max-width: 800px) { .grille-detail { grid-template-columns: 1fr; } }
.rappel { margin-top: 10px; font-size: 14px; } .rappel summary { cursor: pointer; color: var(--violet); font-weight: 600; font-size: 13px; }

/* ---------- gabarit ---------- */
.gabarit { margin-top: 18px; border: 1.5px solid var(--filet); border-radius: 12px; padding: 0 16px; background: #fcfbff; }
.gabarit[open] { padding-bottom: 6px; }
.gabarit summary { cursor: pointer; padding: 14px 0; font-family: 'Kanit', sans-serif; font-weight: 500; font-size: 16px; list-style: none; display: flex; align-items: center; }
.gabarit summary::-webkit-details-marker { display: none; }
.gabarit summary::after { content: '▾'; margin-left: auto; color: var(--violet); }
.gabarit:not([open]) summary::after { content: '▸'; }
.etape.petite { width: 22px; height: 22px; font-size: 12px; }
.gab-ligne { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 6px; }
.gab-val { background: #fff; border: 1px solid var(--filet); border-radius: 10px; padding: 8px 12px; }
.gab-val span { display: block; font-size: 12px; color: var(--gris); }
.gab-val b { font-family: 'Kanit', sans-serif; font-weight: 500; font-size: 18px; }
.gab-titre { font-weight: 600; font-size: 13px; color: var(--violet); text-transform: uppercase; letter-spacing: .05em; margin: 14px 0 8px; display: flex; align-items: center; gap: 12px; }
.ligne.gab4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ligne.gab4 label small { font-weight: 400; color: var(--gris); }
input.modifie { border-color: #e7a531; background: #fffaf0; }
button.lien { background: none; border: 0; color: var(--violet); text-decoration: underline; cursor: pointer; font-size: 12px; text-transform: none; letter-spacing: 0; padding: 0; }
.alerte-txt { color: #b7791f; }
.apercu { flex-direction: column; align-items: center; }
.apercu-pages { display: flex; gap: 4px; }
.apercu-legende { font-size: 11px; color: var(--gris); margin-top: 8px; text-align: center; }
@media (max-width: 560px) { .ligne.gab4 { grid-template-columns: 1fr 1fr; } }

/* ---------- espace éditeur ---------- */
.acces-client { background: var(--noir); color: #fff; border-radius: 12px; padding: 12px 14px; margin: 4px 0 16px; }
.ac-form { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; }
.ac-texte { font-size: 13px; color: #d6d2ea; flex: 1 1 220px; }
.ac-texte b { color: #fff; }
.ac-champs { display: flex; gap: 6px; flex: 2 1 320px; }
.ac-champs input { padding: 8px 10px; font-size: 13px; border-radius: 8px; border: 1px solid #333; background: #1f1f22; color: #fff; min-width: 0; flex: 1; }
.ac-champs input::placeholder { color: #8b8b96; }
.ac-msg { flex-basis: 100%; font-size: 12px; color: #ffb4a8; }
.ac-msg:empty { display: none; }
.ac-ok { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 14px; }
.ac-ok b { color: #bdb3f0; }
.ac-ok .lien { color: #bdb3f0; }
.sous-titre-cartes { grid-column: 1 / -1; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--violet); font-weight: 600; margin-top: 4px; }
.modele.client { border-color: #d8d0fa; }
#bloc-format { margin-top: 12px; }
.code-box { background: var(--fond); border-radius: 12px; padding: 12px 14px; margin-top: 6px; font-size: 14px; }
.code-ligne { display: flex; gap: 8px; margin: 8px 0 4px; }
.code-ligne input { font-family: ui-monospace, Consolas, monospace; letter-spacing: .05em; }
.fiche-format { border: 1px solid var(--filet); border-radius: 12px; padding: 12px 14px; margin-bottom: 10px; background: #fff; }
.fiche-format summary { cursor: pointer; }
@media (max-width: 560px) { .ac-champs { flex-wrap: wrap; } }

/* ---------- fiche de composition ---------- */
.fiche-grille { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px 8px; margin: 8px 0 6px; }
.fiche-champ { display: flex; flex-direction: column; gap: 2px; font-size: 11px; color: var(--gris); font-weight: 600; }
.fiche-champ input, .fiche-champ select { padding: 6px 8px; font-size: 13px; border-radius: 8px; font-weight: 400; }
.perso-zone { display: none; }
.niveau.perso .perso-zone { display: block; }
.niveau.perso textarea { display: block; }
.grp-ligne { background: var(--violet-pale); color: var(--violet-fonce); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; }
@media (max-width: 640px) { .fiche-grille { grid-template-columns: 1fr 1fr; } }

/* ---------- modèles de collection ---------- */
.sauver-modele { margin-top: 18px; padding: 16px 18px; border: 1px dashed var(--violet); border-radius: 12px; background: #f7f5fe; }
.sauver-modele .sm-tete { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
.sauver-modele .sm-tete b { font-family: Kanit, sans-serif; font-weight: 500; font-size: 16px; }
.sm-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 6px; }
.sm-msg { font-size: 13px; }
.sm-msg.ok { color: #1e8449; }
.sm-msg.err { color: #c0392b; }
.charte-appliquer { margin-top: 10px; font-size: 13px; padding: 10px 12px; background: #f7f5fe; border-radius: 8px; }
.charte-appliquer button.lien { font-size: 13px; }
.versions { margin-top: 10px; font-size: 13px; }
.versions summary { cursor: pointer; color: var(--violet); }
.versions ul { list-style: none; padding: 0; margin: 8px 0 0; }
.versions li { display: flex; gap: 10px; align-items: center; padding: 4px 0; border-bottom: 1px solid #eee; }
.versions li span { flex: 1; }
.origine { display: inline-block; font-size: 11px; padding: 2px 8px; border-radius: 10px; background: #ece8fb; color: #4b3aa8; margin-left: 6px; }
.onglets-admin { display: flex; gap: 6px; margin-bottom: 12px; }
.onglets-admin button { flex: 1; padding: 8px; border: 1px solid #d9d6e6; background: #fff; border-radius: 8px; cursor: pointer; font: inherit; font-size: 13px; }
.onglets-admin button[aria-pressed="true"] { background: var(--violet); color: #fff; border-color: var(--violet); }
.attribuer { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 10px; }
.attribuer select { width: auto; padding: 6px 10px; font-size: 13px; }