/* Polices libres (SIL OFL 1.1, fichiers dans fonts/) : le navigateur ne télécharge que celle qui est choisie. */
@font-face{font-family:'Inter';src:url(../fonts/inter.woff2) format('woff2');font-weight:100 900;font-display:swap}
@font-face{font-family:'Work Sans';src:url(../fonts/work-sans.woff2) format('woff2');font-weight:100 900;font-display:swap}
@font-face{font-family:'DM Sans';src:url(../fonts/dm-sans.woff2) format('woff2');font-weight:100 900;font-display:swap}
@font-face{font-family:'Manrope';src:url(../fonts/manrope.woff2) format('woff2');font-weight:100 900;font-display:swap}
@font-face{font-family:'Figtree';src:url(../fonts/figtree.woff2) format('woff2');font-weight:100 900;font-display:swap}
@font-face{font-family:'Nunito';src:url(../fonts/nunito.woff2) format('woff2');font-weight:100 900;font-display:swap}
@font-face{font-family:'Outfit';src:url(../fonts/outfit.woff2) format('woff2');font-weight:100 900;font-display:swap}
@font-face{font-family:'Space Grotesk';src:url(../fonts/space-grotesk.woff2) format('woff2');font-weight:100 900;font-display:swap}
@font-face{font-family:'Lexend';src:url(../fonts/lexend.woff2) format('woff2');font-weight:100 900;font-display:swap}
@font-face{font-family:'Montserrat';src:url(../fonts/montserrat.woff2) format('woff2');font-weight:100 900;font-display:swap}
@font-face{font-family:'Raleway';src:url(../fonts/raleway.woff2) format('woff2');font-weight:100 900;font-display:swap}
@font-face{font-family:'Lora';src:url(../fonts/lora.woff2) format('woff2');font-weight:100 900;font-display:swap}
@font-face{font-family:'Merriweather';src:url(../fonts/merriweather.woff2) format('woff2');font-weight:100 900;font-display:swap}
@font-face{font-family:'Playfair Display';src:url(../fonts/playfair-display.woff2) format('woff2');font-weight:100 900;font-display:swap}
@font-face{font-family:'Fraunces';src:url(../fonts/fraunces.woff2) format('woff2');font-weight:100 900;font-display:swap}
@font-face{font-family:'Source Serif';src:url(../fonts/source-serif-4.woff2) format('woff2');font-weight:100 900;font-display:swap}
@font-face{font-family:'Bitter';src:url(../fonts/bitter.woff2) format('woff2');font-weight:100 900;font-display:swap}
@font-face{font-family:'EB Garamond';src:url(../fonts/eb-garamond.woff2) format('woff2');font-weight:100 900;font-display:swap}
@font-face{font-family:'JetBrains Mono';src:url(../fonts/jetbrains-mono.woff2) format('woff2');font-weight:100 900;font-display:swap}
@font-face{font-family:'Oswald';src:url(../fonts/oswald.woff2) format('woff2');font-weight:100 900;font-display:swap}
@font-face{font-family:'Caveat';src:url(../fonts/caveat.woff2) format('woff2');font-weight:100 900;font-display:swap}
@font-face{font-family:'DM Serif Display';src:url(../fonts/dm-serif-display.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Bebas Neue';src:url(../fonts/bebas-neue.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url(../fonts/ibm-plex-mono-400.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url(../fonts/ibm-plex-mono-700.woff2) format('woff2');font-weight:700;font-display:swap}
/* CRM Libre — style. Toutes les couleurs, polices et tailles sont des variables posées par
   appliquerApparence() (js/app.js) à partir des Réglages → Apparence. Valeurs de repli = thème Pétrole. */
:root{
  --fond:#0f1b18;--barre-fond:#0a1412;--surface:#172925;--surface-2:#1e332d;--champ:#0b1513;--bordure:#284038;
  --texte:#dfe4de;--texte-2:#9fb2aa;--titre:#f2f0e8;--accent:#6fb6c4;--accent-2:#a9ddcf;--succes:#7fc39a;--alerte:#e3b85a;--danger:#e4917f;
  --police:system-ui,-apple-system,"Segoe UI",Roboto,Ubuntu,sans-serif;--police-titres:Georgia,serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,"DejaVu Sans Mono",monospace;
  --taille:16px;--rayon:8px;--espace:1;--largeur-barre:260px;
  --ombre:0 1px 2px rgb(0 0 0/.3),0 6px 16px -6px rgb(0 0 0/.4);
  color-scheme:dark;
}
html[data-theme=clair]{--ombre:0 1px 2px rgb(0 0 0/.06),0 6px 16px -8px rgb(0 0 0/.15)}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{font-size:var(--taille)}
body{margin:0;background:var(--fond);color:var(--texte);font:1rem/1.5 var(--police);-webkit-font-smoothing:antialiased;min-height:100vh}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{font-family:var(--police-titres);font-weight:500;margin:0;color:var(--titre);letter-spacing:-.01em}
h1{font-size:1.9rem;line-height:1.1}
h2{font-size:1.15rem;line-height:1.25}
h3{font-size:.8rem;font-family:var(--mono);font-weight:500}
p{margin:0}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.mono,.mesure-lib,.tableau th,.surtitre,time,.type,.badge{font-family:var(--mono)}
.muet{color:var(--texte-2)}
.petit{font-size:.82rem}
.bloc{display:block}
.fort{font-weight:600}
.txt-alerte{color:var(--alerte)}
.vide{color:var(--texte-2);padding:calc(10px*var(--espace)) 0}
.ico{width:1.25rem;height:1.25rem;flex-shrink:0}
.lien-saut{position:absolute;left:-999px;top:8px;background:var(--accent-2);color:var(--barre-fond);padding:8px 12px;border-radius:4px;z-index:100}
.lien-saut:focus{left:8px}
.chargement{padding:40px;color:var(--texte-2)}

/* ── Colonne de gauche ──────────────────────────────────────────────── */
.barre{position:fixed;inset:0 auto 0 0;width:var(--largeur-barre);background:var(--barre-fond);border-right:1px solid var(--bordure);display:flex;flex-direction:column;padding:22px 12px 16px;overflow-y:auto;z-index:20}
.menu-mobile{display:none}
.marque{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;padding:0 6px 20px;color:var(--titre)}
.marque:hover{text-decoration:none}
.marque img{max-width:85%;max-height:7rem;object-fit:contain}
.langues{display:flex;justify-content:center;gap:0;margin:0 auto 14px;border:1px solid var(--bordure);border-radius:calc(var(--rayon) + 2px);overflow:hidden;width:max-content}
.langues button{background:transparent;border:0;color:var(--texte-2);font:inherit;font-weight:600;font-size:.85rem;letter-spacing:.04em;padding:7px 16px;min-width:3.2rem;cursor:pointer}
.langues button:hover{color:var(--titre)}
.langues button.actif{background:var(--accent-2);color:var(--barre-fond)}
.langues button:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.monogramme{display:grid;place-items:center;width:4.4rem;height:4.4rem;border-radius:calc(var(--rayon)*1.6);background:linear-gradient(135deg,var(--accent),var(--accent-2));color:var(--barre-fond);font:700 1.6rem/1 var(--police-titres);letter-spacing:.02em}
.marque-nom{font:600 1.15rem/1.2 var(--police-titres)}
.marque-sous{font:.8rem var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--accent-2)}
.navigation{display:flex;flex-direction:column;gap:3px}
.nav{display:flex;align-items:center;gap:10px;padding:calc(9px*var(--espace)) 10px;border-radius:calc(var(--rayon)*.7);color:var(--texte-2);font-weight:500}
.nav:hover{background:var(--surface);color:var(--titre);text-decoration:none}
.nav.actif{background:var(--surface);color:var(--titre);box-shadow:inset 3px 0 0 var(--accent-2)}
.nav b{margin-left:auto;font:500 .8rem var(--mono);border:1px solid var(--bordure);border-radius:999px;padding:0 8px;min-width:26px;text-align:center}
.nav b.alerte{color:var(--alerte);border-color:color-mix(in srgb,var(--alerte) 45%,transparent)}
.barre-bas{margin-top:auto;display:flex;flex-direction:column;gap:10px;padding-top:20px}
.recherche{display:flex;align-items:center;gap:10px;background:transparent;border:1px solid var(--bordure);color:var(--texte-2);padding:9px 12px;border-radius:calc(var(--rayon)*.7);cursor:pointer;text-align:left}
.recherche:hover{color:var(--titre);border-color:var(--texte-2)}
.recherche kbd{margin-left:auto;font:.8rem var(--mono);border:1px solid var(--bordure);border-radius:4px;padding:1px 6px}
.rappel-sauvegarde{display:flex;gap:8px;align-items:center;background:color-mix(in srgb,var(--alerte) 12%,transparent);border:1px solid color-mix(in srgb,var(--alerte) 40%,transparent);color:var(--alerte);border-radius:calc(var(--rayon)*.7);padding:8px 10px;cursor:pointer;text-align:left;font-size:.85rem}

/* ── Contenu ────────────────────────────────────────────────────────── */
.contenu{margin-left:var(--largeur-barre);padding:calc(24px*var(--espace)) 32px 64px;max-width:calc(1400px + var(--largeur-barre))}
.contenu:focus{outline:none}
.entete{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:calc(18px*var(--espace))}
.entete-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.surtitre{font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:4px}
.retour{display:inline-block;margin-bottom:10px;color:var(--texte-2)}
.intro{max-width:60ch;margin-bottom:18px;color:var(--texte-2)}
.aide{margin:-6px 0 14px;font-size:.9rem}
.carte{background:linear-gradient(180deg,var(--surface-2),var(--surface));border:1px solid var(--bordure);border-radius:var(--rayon);box-shadow:var(--ombre);padding:calc(14px*var(--espace)) 18px;margin-bottom:calc(14px*var(--espace))}
.carte.accent-alerte{border-left:3px solid var(--alerte)}
.carte.accent-danger{border-left:3px solid var(--danger)}
.carte-tete{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:calc(10px*var(--espace));flex-wrap:wrap}
.carte-tete .muet{font-size:.85rem}
.sous-titre{display:flex;gap:8px;align-items:center;margin:14px 0 4px;color:var(--texte-2);letter-spacing:.12em;text-transform:uppercase}
.sous-titre.alerte{color:var(--alerte)}
.sous-titre span{font-weight:400}
.deux-colonnes{display:grid;grid-template-columns:1.2fr 1fr;gap:14px;align-items:start}

/* Bandeau des chiffres */
.bandeau{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));border:1px solid var(--bordure);border-radius:var(--rayon);background:var(--surface);overflow:hidden;margin-bottom:calc(14px*var(--espace));box-shadow:var(--ombre)}
.mesure{display:flex;flex-direction:column;gap:2px;padding:calc(12px*var(--espace)) 16px;border-right:1px solid var(--bordure);color:inherit}
.mesure:last-child{border-right:0}
.mesure:hover{background:var(--surface-2);text-decoration:none}
.mesure-lib{font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:var(--texte-2)}
.mesure b{font:600 1.6rem/1.2 var(--police-titres);color:var(--titre)}
.mesure small{color:var(--texte-2);font-size:.82rem}

/* Boutons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--surface-2);color:var(--accent);border:1px solid var(--bordure);padding:calc(7px*var(--espace) + 1px) 14px;border-radius:calc(var(--rayon)*.7);font-weight:500;cursor:pointer;white-space:nowrap}
.btn:hover{border-color:var(--accent);text-decoration:none}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.btn-plein{background:var(--accent-2);border-color:var(--accent-2);color:var(--barre-fond);font-weight:600}
.btn-plein:hover{filter:brightness(1.08);border-color:var(--accent-2)}
.btn-danger{background:transparent;color:var(--danger);border-color:color-mix(in srgb,var(--danger) 50%,transparent)}
.btn-danger:hover{background:color-mix(in srgb,var(--danger) 14%,transparent);border-color:var(--danger)}
.btn .ico{width:1.05rem;height:1.05rem}
.boutons{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:12px}
.lien-action{background:none;border:0;padding:0;color:var(--accent);cursor:pointer;font-size:.85rem}
.lien-action:hover{text-decoration:underline}
.lien-action.danger,button.danger{color:var(--danger)}
.actions{display:inline-flex;gap:10px;margin-left:auto}

/* Étiquettes */
.badge{display:inline-block;font-size:.8rem;font-weight:500;padding:1px 9px;border-radius:999px;border:1px solid var(--bordure);color:var(--texte-2);white-space:nowrap;vertical-align:middle}
.badge.teinte{border-color:color-mix(in srgb,var(--c) 60%,transparent);color:color-mix(in srgb,var(--c) 65%,var(--texte));background:color-mix(in srgb,var(--c) 14%,transparent)}
html[data-theme=clair] .badge.teinte{color:color-mix(in srgb,var(--c) 40%,var(--texte));border-color:color-mix(in srgb,var(--c) 70%,var(--texte));background:color-mix(in srgb,var(--c) 18%,var(--surface))}
.badge.mini{font-size:.8rem;padding:0 7px;margin-left:6px}
.select-badge{width:auto;font-weight:600;border-radius:999px;border-color:color-mix(in srgb,var(--c) 60%,transparent)!important;color:var(--c);background:color-mix(in srgb,var(--c) 12%,var(--champ))!important;padding:5px 12px}

/* Formulaires */
input:not([type=checkbox]):not([type=color]):not([type=range]):not([type=file]),select,textarea{width:100%;background:var(--champ);border:1px solid var(--bordure);border-radius:calc(var(--rayon)*.7);padding:calc(7px*var(--espace) + 1px) 10px;min-width:0}
input:focus,select:focus,textarea:focus{border-color:var(--accent);outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent)}
select option{background:var(--champ);color:var(--texte)}
textarea{resize:vertical}
textarea.code{font:.85rem/1.5 var(--mono)}
label{display:flex;flex-direction:column;gap:4px;font-size:.85rem;color:var(--texte-2);font-weight:500}
label.case{flex-direction:row;align-items:flex-start;gap:8px;color:var(--texte)}
label.case input{margin-top:.25em;accent-color:var(--accent)}
label.case.mini{font-size:.8rem;color:var(--texte-2);align-items:center}
label.case.mini input{margin-top:0}
label output{display:inline;font:.8rem var(--mono);color:var(--accent)}
input[type=range]{accent-color:var(--accent);width:100%}
.grille-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;align-items:end}
.grille-form .large{grid-column:1/-1}
.cases{display:grid;gap:12px}
.filtres{display:flex;flex-direction:column;gap:10px;margin-bottom:14px}
.filtres input{max-width:480px}
.puces{display:flex;gap:6px;flex-wrap:wrap}
.puce{background:transparent;border:1px solid var(--bordure);color:var(--texte-2);border-radius:999px;padding:4px 12px;cursor:pointer;font-size:.85rem}
.puce small{font-family:var(--mono);opacity:.75;margin-left:4px}
.puce:hover{color:var(--titre);border-color:var(--texte-2)}
.puce.actif{background:var(--accent-2);border-color:var(--accent-2);color:var(--barre-fond)}
.puces.petites{margin-bottom:10px}
.puces.petites .puce{font-size:.8rem;padding:2px 10px}
details>summary{cursor:pointer;color:var(--accent);font-size:.88rem}

/* Tableaux */
.tableau-cadre{overflow-x:auto;border:1px solid var(--bordure);border-radius:var(--rayon);background:var(--surface)}
.carte .tableau-cadre{border:0;background:transparent}
.tableau{width:100%;border-collapse:collapse}
.tableau th{text-align:left;font-size:.8rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--texte-2);padding:10px 12px;border-bottom:1px solid var(--bordure);white-space:nowrap}
.tableau td{padding:calc(9px*var(--espace)) 12px;border-bottom:1px solid color-mix(in srgb,var(--bordure) 60%,transparent);vertical-align:middle}
.tableau tr:last-child td{border-bottom:0}
.tableau tbody tr:hover{background:color-mix(in srgb,var(--surface-2) 60%,transparent)}
.tableau .nombre{text-align:right;white-space:nowrap}
.tableau select{width:auto;min-width:9rem}
.tableau.mapping select{min-width:14rem}
.plus{margin-top:12px;display:flex;gap:12px;align-items:center}

/* Listes du tableau de bord */
.liste-suivis,.liste-simple,.fil,.objets,.journal,.liste-cfg{list-style:none;margin:0;padding:0}
.suivi{display:grid;grid-template-columns:auto 1fr auto auto;gap:10px;align-items:center;padding:calc(7px*var(--espace)) 0;border-bottom:1px solid color-mix(in srgb,var(--bordure) 60%,transparent)}
.suivi:last-child{border-bottom:0}
.suivi div span{color:var(--texte-2)}
.suivi time{font-size:.8rem;color:var(--texte-2);white-space:nowrap}
.suivi.retard time{color:var(--alerte)}
.coche{width:26px;height:26px;border-radius:50%;border:2px solid var(--texte-2);background:transparent;cursor:pointer;padding:0}
.coche:hover{border-color:var(--succes);background:color-mix(in srgb,var(--succes) 25%,transparent)}
.reporter{display:flex;gap:4px;align-items:center}
.reporter button:not(.lien-action){background:transparent;border:1px solid var(--bordure);color:var(--texte-2);border-radius:4px;font:.8rem var(--mono);padding:1px 6px;cursor:pointer}
.reporter button:not(.lien-action):hover{color:var(--titre);border-color:var(--texte-2)}
.liste-simple li{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap;padding:calc(6px*var(--espace)) 0;border-bottom:1px solid color-mix(in srgb,var(--bordure) 60%,transparent)}
.liste-simple li:last-child{border-bottom:0}
.liste-simple .muet{font-size:.85rem}
.liste-simple b{margin-left:auto;font-weight:500;font-size:.85rem}
.fil li{display:grid;grid-template-columns:5.5rem 6.5rem 1fr;gap:8px;padding:calc(5px*var(--espace)) 0;font-size:.92rem;align-items:baseline}
.fil time,.fil .type{font-size:.8rem;color:var(--texte-2)}

/* Accueil vide */
.depart{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.depart-choix{display:flex;flex-direction:column;gap:6px;text-align:left;cursor:pointer;color:var(--texte);font:inherit;margin:0}
.depart-choix b{font:600 1.1rem var(--police-titres);color:var(--titre)}
.depart-choix span{color:var(--texte-2);font-size:.9rem}
.depart-choix:hover{border-color:var(--accent);text-decoration:none}

/* Fiche */
.fiche-entete{align-items:flex-start}
.coordonnees{display:flex;gap:14px;flex-wrap:wrap;margin-top:8px;font-size:.92rem}
.fiche-etat{display:flex;flex-direction:column;align-items:flex-end;gap:6px;font-size:.88rem}
.resume-fiche{display:flex;gap:18px;flex-wrap:wrap;font-size:.8rem;color:var(--texte-2);padding:10px 0 14px;border-top:1px solid var(--bordure);margin-bottom:6px}
.fiche-grille{display:grid;grid-template-columns:1.35fr 1fr;gap:14px;align-items:start}
.noter{display:grid;grid-template-columns:auto auto 1fr auto;gap:8px}
.noter select{width:auto}
.noter-plus{grid-column:1/-1}
.noter-plus .grille-form{margin:10px 0}
.journal li{padding:calc(10px*var(--espace)) 0 calc(10px*var(--espace)) 14px;border-left:2px solid var(--bordure);margin-left:4px;position:relative}
.journal li::before{content:'';position:absolute;left:-6px;top:15px;width:10px;height:10px;border-radius:50%;background:var(--surface);border:2px solid var(--bordure)}
.journal li.sens-sortant::before{border-color:var(--accent)}
.journal li.sens-entrant::before{border-color:var(--succes)}
.journal-tete{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;font-size:.8rem}
.journal-tete time{color:var(--texte-2)}
.journal-tete .type{color:var(--accent);font-size:.8rem}
.journal p{margin-top:2px}
.journal pre{white-space:pre-wrap;font:.88rem/1.5 var(--police);background:var(--champ);border:1px solid var(--bordure);border-radius:calc(var(--rayon)*.6);padding:10px;margin:6px 0 0}
.objets li{padding:calc(9px*var(--espace)) 0;border-bottom:1px solid color-mix(in srgb,var(--bordure) 60%,transparent)}
.objets li:last-child{border-bottom:0}
.objets li.conclue{opacity:.6}
.objet-tete{display:flex;gap:8px;align-items:baseline}
.objet-meta{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:6px;font-size:.85rem}
.objet-meta select{width:auto;padding:3px 8px;font-size:.82rem}
.note{color:var(--texte-2);font-size:.88rem;margin-top:4px}
.notes-durables{white-space:pre-wrap;margin-bottom:10px}
.perso{display:grid;grid-template-columns:max-content 1fr;gap:4px 14px;margin:8px 0 0;font-size:.88rem}
.perso dt{color:var(--texte-2)}
.perso dd{margin:0}

/* Pipeline */
.kanban{display:grid;grid-template-columns:repeat(var(--colonnes),minmax(220px,1fr));gap:12px;overflow-x:auto;padding-bottom:12px;align-items:start}
.colonne{background:color-mix(in srgb,var(--surface) 55%,transparent);border:1px solid var(--bordure);border-radius:var(--rayon);padding:10px;min-height:200px;transition:border-color .12s,background .12s}
.colonne.survol{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 8%,var(--surface))}
.colonne header{display:flex;flex-direction:column;gap:2px;padding:2px 4px 10px}
.colonne header small{color:var(--texte-2);font-size:.8rem}
.carte-opp{background:linear-gradient(180deg,var(--surface-2),var(--surface));border:1px solid var(--bordure);border-radius:calc(var(--rayon)*.8);padding:10px 12px;margin-bottom:8px;cursor:grab;box-shadow:var(--ombre)}
.carte-opp.glisse{opacity:.5}
.carte-opp p{font-size:.9rem;margin:2px 0 6px}
.carte-opp-meta{display:flex;justify-content:space-between;gap:8px;font-size:.8rem;color:var(--texte-2)}
.carte-opp-actions{display:flex;gap:6px;margin-top:8px;align-items:center}
.carte-opp-actions select{padding:3px 6px;font-size:.8rem}
.btn-mini{border:1px solid var(--bordure);background:transparent;border-radius:6px;width:30px;height:28px;cursor:pointer;flex-shrink:0}
.btn-mini.gagne{color:var(--succes)}.btn-mini.gagne:hover{border-color:var(--succes)}
.btn-mini.perd{color:var(--danger)}.btn-mini.perd:hover{border-color:var(--danger)}

/* Réglages */
.onglets{display:flex;gap:4px;flex-wrap:wrap;border-bottom:1px solid var(--bordure);margin-bottom:16px}
.onglets a{padding:8px 14px;color:var(--texte-2);border-bottom:2px solid transparent;margin-bottom:-1px}
.onglets a:hover{color:var(--titre);text-decoration:none}
.onglets a.actif{color:var(--titre);border-bottom-color:var(--accent-2)}
.liste-cfg li{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:6px 0;border-bottom:1px solid color-mix(in srgb,var(--bordure) 50%,transparent)}
.liste-cfg li>input:not([type=color]),.liste-cfg li>select{flex:1 1 180px;width:auto}
.liste-cfg .poignee{width:1.6rem;color:var(--texte-2);text-align:right;font-size:.8rem}
.liste-cfg input[type=color]{width:36px;height:32px;padding:2px;border:1px solid var(--bordure);border-radius:6px;background:var(--champ);cursor:pointer}
.espace-btn{width:.8rem}
.fleches{display:inline-flex;gap:4px;margin-left:auto}
.fleches button{background:transparent;border:1px solid var(--bordure);color:var(--texte-2);border-radius:6px;width:30px;height:30px;cursor:pointer}
.fleches button:hover:not([disabled]){color:var(--titre);border-color:var(--texte-2)}
.fleches button[disabled]{opacity:.3;cursor:default}
.ajout-ligne{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.ajout-ligne input{flex:1 1 220px;width:auto}
.ajout-ligne select{width:auto}
.logo-zone{display:flex;gap:18px;align-items:center;margin-top:16px;flex-wrap:wrap}
.logo-zone>div:last-child{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.logo-zone p{flex-basis:100%}
.logo-apercu{width:7rem;height:7rem;display:grid;place-items:center;border:1px dashed var(--bordure);border-radius:var(--rayon);background:var(--barre-fond);padding:8px}
.logo-apercu img{max-width:100%;max-height:100%;object-fit:contain}
.themes{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.themes+.themes{margin-top:8px}
.themes-titre{width:4.5rem;font-size:.8rem;color:var(--texte-2)}
.theme{display:flex;align-items:center;gap:8px;background:transparent;border:2px solid var(--bordure);border-radius:999px;padding:4px 12px 4px 4px;cursor:pointer;color:var(--texte);font-size:.88rem;text-align:left}
.theme.actif{border-color:var(--accent-2)}
.theme:hover{border-color:var(--accent)}
.nuancier{display:flex;gap:2px;padding:3px;border-radius:999px;width:3.4rem;height:1.5rem}
.nuancier i{flex:1;height:100%;border-radius:999px}
.couleurs{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:8px}
.couleur{flex-direction:row;align-items:center;gap:10px;color:var(--texte);font-weight:400}
.couleur input{width:42px;height:32px;padding:2px;border:1px solid var(--bordure);border-radius:6px;background:var(--champ);cursor:pointer;flex-shrink:0}
.couleur i{color:var(--accent);font-style:normal}
.apercu-theme{position:sticky;bottom:12px;display:flex;gap:12px;align-items:center;justify-content:flex-end;padding:10px 14px;background:var(--surface);border:1px solid var(--bordure);border-radius:var(--rayon);box-shadow:var(--ombre);width:max-content;margin-left:auto}

/* Recherche rapide */
.palette{position:fixed;inset:0;background:rgb(0 0 0/.55);z-index:50;display:flex;justify-content:center;align-items:flex-start;padding-top:12vh}
.palette-boite{width:min(620px,92vw);background:var(--surface);border:1px solid var(--bordure);border-radius:var(--rayon);box-shadow:0 20px 60px rgb(0 0 0/.5);overflow:hidden}
.palette-boite input{border:0!important;border-bottom:1px solid var(--bordure)!important;border-radius:0!important;padding:16px!important;font-size:1.1rem;box-shadow:none!important}
.palette ul{list-style:none;margin:0;padding:6px;max-height:50vh;overflow-y:auto}
.palette li{display:flex;gap:8px;align-items:baseline;padding:9px 12px;border-radius:calc(var(--rayon)*.6);cursor:pointer}
.palette li[aria-selected=true],.palette li[data-aller]:hover{background:var(--surface-2)}
.palette li .muet{margin-left:auto;font-size:.85rem}
.palette li.vide{cursor:default;display:block}

/* Dialogue */
.dialogue{border:1px solid var(--bordure);border-radius:var(--rayon);background:var(--surface);color:var(--texte);padding:0;width:min(720px,94vw);max-height:90vh;box-shadow:0 20px 60px rgb(0 0 0/.5)}
.dialogue::backdrop{background:rgb(0 0 0/.55)}
/* Une seule barre de défilement : celle du corps. La fenêtre elle-même ne défile jamais (sa bordure la faisait déborder de 2 px). */
.dialogue{overflow:hidden}
.dialogue-form{display:flex;flex-direction:column;max-height:calc(90vh - 2px)}
.dialogue-corps{min-height:0}
.dialogue header{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;border-bottom:1px solid var(--bordure)}
.dialogue .fermer{background:none;border:0;color:var(--texte-2);font-size:1.1rem;cursor:pointer}
.dialogue-corps{padding:16px 18px;overflow-y:auto;display:flex;flex-direction:column;gap:12px}
.dialogue footer{display:flex;justify-content:flex-end;gap:8px;padding:12px 18px;border-top:1px solid var(--bordure)}

/* Avis */
.toasts{position:fixed;right:18px;bottom:18px;display:flex;flex-direction:column;gap:8px;z-index:60;max-width:min(420px,90vw)}
.toast{background:var(--accent-2);color:var(--barre-fond);padding:10px 16px;border-radius:calc(var(--rayon)*.8);font-weight:500;box-shadow:var(--ombre);transition:opacity .5s,transform .5s}
.toast.erreur{background:var(--danger)}
.toast.sort{opacity:0;transform:translateY(8px)}

/* ── Écrans étroits ─────────────────────────────────────────────────── */
@media (max-width:1100px){.fiche-grille,.deux-colonnes{grid-template-columns:1fr}}
/* Bouton « + » toujours à portée du pouce sur cellulaire : la nouvelle fiche ne se cache plus dans le menu. */
.fab{display:none}
@media (max-width:860px){
  .fab{display:grid;place-items:center;position:fixed;right:16px;bottom:16px;z-index:30;width:3.5rem;height:3.5rem;padding:0;border-radius:50%;box-shadow:0 6px 18px rgba(0,0,0,.5)}
  .fab svg{width:1.6rem;height:1.6rem}
  .barre{position:sticky;top:0;inset:auto;width:auto;height:auto;flex-direction:row;align-items:center;flex-wrap:wrap;padding:8px 12px;gap:8px;border-right:0;border-bottom:1px solid var(--bordure);overflow:visible;z-index:30}
  .menu-mobile{display:grid;place-items:center;width:40px;height:40px;background:transparent;border:1px solid var(--bordure);border-radius:8px;color:var(--texte);cursor:pointer;order:2;margin-left:auto}
  .marque{flex-direction:row;padding:0;gap:10px;order:1}
  .marque img{max-height:2.4rem;max-width:8rem}
  .monogramme{width:2.4rem;height:2.4rem;font-size:1rem}
  .marque-sous{display:none}
  .navigation,.barre-bas{display:none;order:3;flex-basis:100%}
  body.menu-ouvert .navigation,body.menu-ouvert .barre-bas{display:flex}
  .barre-bas{padding-top:8px}
  .recherche kbd{display:none}
  .contenu{margin-left:0;padding:16px 16px 48px}
  h1{font-size:1.5rem}
  .bandeau{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mesure:nth-child(2n){border-right:0}
  .mesure:nth-child(-n+2){border-bottom:1px solid var(--bordure)}
  .masque-mobile{display:none}
  .noter{grid-template-columns:1fr 1fr}
  .noter input[name=resume]{grid-column:1/-1}
  .noter button{grid-column:1/-1}
  .fiche-etat{align-items:flex-start}
  .suivi{grid-template-columns:auto 1fr auto}
  .suivi .reporter{grid-column:2/-1}
  .fil li{grid-template-columns:5rem 1fr}
  .fil .type{display:none}
  .kanban{grid-template-columns:repeat(var(--colonnes),minmax(240px,82vw));scroll-snap-type:x mandatory}
  .colonne{scroll-snap-align:start}
  .apercu-theme{display:none}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* Mode réglage : les blocs se déplacent, se masquent, changent de largeur et de page */
.bandeau-reglage{position:sticky;top:0;z-index:6;display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:10px 14px;margin-bottom:calc(14px*var(--espace));background:var(--surface-2);border:1px solid var(--accent);border-radius:var(--rayon);box-shadow:var(--ombre)}
.bandeau-reglage b{color:var(--accent)}
.bandeau-reglage .btn.actif,.barre-bas .btn.actif{border-color:var(--accent);color:var(--accent)}
.bloc-reglage{position:relative;border:1px dashed var(--accent);border-radius:var(--rayon);padding:6px;margin-bottom:calc(14px*var(--espace));background:color-mix(in srgb,var(--accent) 6%,transparent)}
.bloc-reglage .carte,.bloc-reglage .bandeau{margin-bottom:0}
.bloc-reglage.cache{opacity:.55}
.bloc-outils{display:flex;flex-wrap:wrap;gap:6px;align-items:center;padding:4px 2px 8px;font-size:.82rem}
.poignee-bloc{cursor:grab;padding:2px 8px;font-size:1.25rem;line-height:1;color:var(--accent);user-select:none}
.bloc-contenu{pointer-events:none}
.bloc-vide{padding:6px;font-size:.85rem;color:var(--texte-2)}
.glisse-bloc{opacity:.4}
.survol-bloc{outline:2px solid var(--accent);outline-offset:2px}
body.reglage [data-colonne]{min-height:56px}
.bandeau .bloc-reglage{margin:0;border-radius:0;border-style:solid}
.bloc-fin{display:flex;flex-wrap:wrap;gap:12px;align-items:center;padding:14px;border:1px dashed var(--bordure);border-radius:var(--rayon);margin-top:8px}
.select-mini{font-size:.8rem;padding:2px 6px;max-width:11rem}
.btn-mini.danger{color:var(--danger)}
.catalogue{list-style:none;padding:0;margin:0 0 8px;display:flex;flex-direction:column;gap:6px}
.catalogue li{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:6px 0;border-bottom:1px solid var(--bordure)}
.catalogue li .btn-mini{margin-left:auto}
.texte-libre{line-height:1.5}
.bloc-outils .btn-mini,.catalogue .btn-mini,.liste-cfg .btn-mini{width:auto;min-width:30px;padding:0 10px}

/* Bandeau de l'essai public */
.bandeau-essai{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;justify-content:space-between;padding:10px 14px;margin-bottom:calc(14px*var(--espace));background:var(--surface-2);border:1px solid var(--bordure);border-left:3px solid var(--accent);border-radius:var(--rayon)}
.bandeau-essai p{margin:0}
.bandeau-essai .boutons{display:flex;flex-wrap:wrap;gap:8px}

/* ── Relief ─────────────────────────────────────────────────────────────
   Une couche de profondeur par-dessus tous les thèmes : liseré de lumière en haut, arête sombre en bas,
   ombres portées. Les boutons sont en saillie (ils s'enfoncent au clic), les champs sont en creux.
   Les couleurs viennent du thème ; seules la lumière et l'ombre changent entre sombre et clair. */
:root{
  --lum:rgb(255 255 255/.16);--lum-forte:rgb(255 255 255/.28);
  --arete:rgb(0 0 0/.6);--arete-douce:rgb(0 0 0/.38);
  --portee:0 2px 3px rgb(0 0 0/.35),0 10px 22px -8px rgb(0 0 0/.65);
  --portee-haute:0 4px 6px rgb(0 0 0/.35),0 18px 34px -10px rgb(0 0 0/.75);
  --creux:inset 0 2px 4px rgb(0 0 0/.55),inset 0 -1px 0 rgb(255 255 255/.06);
}
html[data-theme=clair]{
  --lum:rgb(255 255 255/.95);--lum-forte:rgb(255 255 255/1);
  --arete:rgb(70 50 20/.38);--arete-douce:rgb(70 50 20/.22);
  --portee:0 1px 2px rgb(60 40 10/.18),0 8px 18px -8px rgb(60 40 10/.35);
  --portee-haute:0 3px 5px rgb(60 40 10/.2),0 16px 30px -10px rgb(60 40 10/.42);
  --creux:inset 0 2px 3px rgb(60 40 10/.22),inset 0 -1px 0 rgb(255 255 255/.8);
}
body{background:radial-gradient(120% 70% at 50% -10%,color-mix(in srgb,var(--fond) 82%,#fff) 0,var(--fond) 55%) fixed,var(--fond)}
html[data-theme=clair] body{background:radial-gradient(120% 70% at 50% -10%,color-mix(in srgb,var(--fond) 70%,#fff) 0,var(--fond) 60%) fixed,var(--fond)}
.barre{box-shadow:6px 0 18px -6px rgb(0 0 0/.55),inset -1px 0 0 var(--lum);background:linear-gradient(90deg,color-mix(in srgb,var(--barre-fond) 88%,#000),var(--barre-fond))}
html[data-theme=clair] .barre{box-shadow:6px 0 18px -8px rgb(60 40 10/.35),inset -1px 0 0 var(--lum)}

/* Surfaces en saillie */
.carte,.carte-opp,.bandeau,.tableau-cadre,.apercu-theme,.bandeau-essai,.bandeau-reglage{
  box-shadow:var(--portee),inset 0 1px 0 var(--lum),inset 0 -2px 0 var(--arete-douce);
  border-color:color-mix(in srgb,var(--bordure) 70%,#000 0%);
}
.carte .tableau-cadre{box-shadow:none}
.carte-opp:hover{transform:translateY(-2px);box-shadow:var(--portee-haute),inset 0 1px 0 var(--lum),inset 0 -2px 0 var(--arete-douce)}
.carte-opp{transition:transform .12s ease,box-shadow .12s ease}
.depart-choix{transition:transform .12s ease,box-shadow .12s ease}
.depart-choix:hover{transform:translateY(-2px);box-shadow:var(--portee-haute),inset 0 1px 0 var(--lum)}
.dialogue,.palette-boite{box-shadow:var(--portee-haute),0 30px 80px rgb(0 0 0/.55),inset 0 1px 0 var(--lum)}
.dialogue::backdrop{background:rgb(0 0 0/.55)}
.mesure{box-shadow:inset 0 1px 0 var(--lum);background:linear-gradient(180deg,color-mix(in srgb,var(--surface-2) 70%,var(--surface)),var(--surface))}

/* Navigation : l'élément actif est une touche enfoncée dans la barre, les autres sont à plat */
.nav{border:1px solid transparent;transition:background .12s,box-shadow .12s}
.nav:hover{background:linear-gradient(180deg,var(--surface-2),var(--surface));border-color:var(--bordure);box-shadow:0 2px 0 var(--arete-douce),inset 0 1px 0 var(--lum)}
.nav.actif{background:linear-gradient(180deg,var(--surface-2),var(--surface));border-color:var(--bordure);box-shadow:inset 3px 0 0 var(--accent-2),0 2px 0 var(--arete-douce),0 6px 12px -4px rgb(0 0 0/.5),inset 0 1px 0 var(--lum)}

/* Boutons : saillie nette, nettement détachés du fond */
.btn,.btn-mini,.langues button{transition:transform .08s ease,box-shadow .08s ease,filter .12s}
.btn{
  background:linear-gradient(180deg,color-mix(in srgb,var(--surface-2) 70%,#fff),var(--surface-2) 48%,color-mix(in srgb,var(--surface-2) 82%,#000));
  border:1px solid color-mix(in srgb,var(--accent) 38%,var(--bordure));
  box-shadow:inset 0 1px 0 var(--lum-forte),inset 0 -1px 0 var(--arete-douce),0 3px 0 var(--arete),0 7px 12px -3px rgb(0 0 0/.55);
  text-shadow:0 1px 0 rgb(0 0 0/.35);margin-bottom:3px;
}
html[data-theme=clair] .btn{text-shadow:0 1px 0 rgb(255 255 255/.7);background:linear-gradient(180deg,#fff,var(--surface) 55%,color-mix(in srgb,var(--surface) 88%,var(--bordure)))}
html[data-theme=clair] .btn{box-shadow:inset 0 1px 0 #fff,inset 0 -1px 0 var(--arete-douce),0 3px 0 var(--arete),0 7px 12px -3px rgb(60 40 10/.4)}
.btn:hover{filter:brightness(1.08);transform:translateY(-1px);box-shadow:inset 0 1px 0 var(--lum-forte),inset 0 -1px 0 var(--arete-douce),0 4px 0 var(--arete),0 10px 16px -3px rgb(0 0 0/.55)}
html[data-theme=clair] .btn:hover{box-shadow:inset 0 1px 0 #fff,inset 0 -1px 0 var(--arete-douce),0 4px 0 var(--arete),0 10px 16px -3px rgb(60 40 10/.45)}
.btn:active{transform:translateY(3px);filter:brightness(.96);box-shadow:inset 0 2px 5px rgb(0 0 0/.45),0 0 0 var(--arete)}
.btn[disabled]{box-shadow:0 1px 0 var(--arete-douce);transform:none}
.btn-plein{
  --bord-plein:color-mix(in srgb,var(--accent-2) 55%,#000);
  background:linear-gradient(180deg,color-mix(in srgb,var(--accent-2) 78%,#fff),var(--accent-2) 55%,color-mix(in srgb,var(--accent-2) 86%,#000));
  border-color:var(--bord-plein);text-shadow:0 1px 0 rgb(255 255 255/.25);
  box-shadow:inset 0 1px 0 rgb(255 255 255/.55),inset 0 -1px 0 rgb(0 0 0/.18),0 3px 0 var(--bord-plein),0 8px 16px -3px color-mix(in srgb,var(--accent-2) 55%,transparent),0 8px 12px -4px rgb(0 0 0/.5);
}
html[data-theme=clair] .btn-plein{text-shadow:0 1px 0 rgb(0 0 0/.3)}
.btn-plein:hover{filter:brightness(1.1);box-shadow:inset 0 1px 0 rgb(255 255 255/.55),inset 0 -1px 0 rgb(0 0 0/.18),0 4px 0 var(--bord-plein),0 12px 20px -3px color-mix(in srgb,var(--accent-2) 60%,transparent),0 10px 14px -4px rgb(0 0 0/.5)}
.btn-plein:active{box-shadow:inset 0 2px 5px rgb(0 0 0/.4),0 0 0 var(--bord-plein)}
.btn-danger{background:linear-gradient(180deg,color-mix(in srgb,var(--danger) 16%,var(--surface-2)),color-mix(in srgb,var(--danger) 8%,var(--surface)));box-shadow:inset 0 1px 0 var(--lum),0 3px 0 color-mix(in srgb,var(--danger) 45%,#000),0 7px 12px -3px rgb(0 0 0/.4)}
.btn-danger:active{box-shadow:inset 0 2px 5px rgb(0 0 0/.45)}
.btn-mini{background:linear-gradient(180deg,color-mix(in srgb,var(--surface-2) 70%,#fff),var(--surface-2));box-shadow:inset 0 1px 0 var(--lum),0 2px 0 var(--arete),0 4px 8px -2px rgb(0 0 0/.45);margin-bottom:2px}
.btn-mini:active{transform:translateY(2px);box-shadow:inset 0 2px 4px rgb(0 0 0/.45)}
.boutons,.entete-actions{row-gap:10px}

/* Sélecteur de langue : deux touches */
.langues{box-shadow:var(--creux);background:var(--champ);padding:3px;gap:3px}
.langues button{border-radius:calc(var(--rayon)*.6)}
.langues button.actif{background:linear-gradient(180deg,color-mix(in srgb,var(--accent-2) 78%,#fff),var(--accent-2));box-shadow:inset 0 1px 0 rgb(255 255 255/.55),0 2px 0 color-mix(in srgb,var(--accent-2) 55%,#000),0 4px 8px -2px rgb(0 0 0/.5)}

/* Champs en creux */
input:not([type=checkbox]):not([type=color]):not([type=range]):not([type=file]),select,textarea{box-shadow:var(--creux);border-color:color-mix(in srgb,var(--bordure) 80%,#000)}
input:focus,select:focus,textarea:focus{box-shadow:var(--creux),0 0 0 3px color-mix(in srgb,var(--accent) 28%,transparent)}
.palette-boite input{box-shadow:none!important}

/* Pastilles et tuiles de thème */
.badge{box-shadow:inset 0 1px 0 var(--lum),0 1px 2px rgb(0 0 0/.3)}
.theme{background:linear-gradient(180deg,var(--surface-2),var(--surface));box-shadow:var(--portee),inset 0 1px 0 var(--lum);transition:transform .12s ease}
.theme:hover{transform:translateY(-2px)}
.theme.actif{box-shadow:var(--portee),0 0 0 2px color-mix(in srgb,var(--accent-2) 40%,transparent),inset 0 1px 0 var(--lum)}
.toast{box-shadow:var(--portee-haute),inset 0 1px 0 rgb(255 255 255/.5)}
@media (prefers-reduced-motion:reduce){.btn,.btn-mini,.carte-opp,.depart-choix,.theme,.nav,.langues button{transition:none}.btn:hover,.carte-opp:hover,.depart-choix:hover,.theme:hover{transform:none}}
.colonne{background:linear-gradient(180deg,color-mix(in srgb,var(--champ) 70%,var(--fond)),color-mix(in srgb,var(--champ) 40%,var(--fond)));box-shadow:var(--creux)}
.colonne.survol{box-shadow:var(--creux),0 0 0 2px color-mix(in srgb,var(--accent) 45%,transparent)}
.onglets a.actif{background:linear-gradient(180deg,var(--surface-2),var(--surface));border-radius:calc(var(--rayon)*.7) calc(var(--rayon)*.7) 0 0;box-shadow:inset 0 1px 0 var(--lum),0 -3px 8px -4px rgb(0 0 0/.4)}

/* Bandeau de l'essai : fond en creux pour que les boutons s'en détachent nettement */
.bandeau-essai{background:linear-gradient(180deg,color-mix(in srgb,var(--champ) 80%,var(--fond)),color-mix(in srgb,var(--champ) 55%,var(--fond)));box-shadow:var(--creux)}
.bandeau-essai .btn:not(.btn-plein){border-color:color-mix(in srgb,var(--accent) 60%,var(--bordure));color:var(--titre)}
.btn:not(.btn-plein):not(.btn-danger){border-color:color-mix(in srgb,var(--accent) 50%,var(--bordure))}

/* Bandeau de l'essai : boutons centrés sur la ligne du texte, et « Installer » sans halo */
.bandeau-essai{align-items:center}
.bandeau-essai .boutons{align-items:center;margin-top:0}
.bandeau-essai .btn{margin-bottom:0}
.bandeau-essai .btn-plein,.bandeau-essai .btn-plein:hover{text-shadow:none;box-shadow:inset 0 1px 0 rgb(255 255 255/.55),inset 0 -1px 0 rgb(0 0 0/.18),0 3px 0 var(--bord-plein),0 7px 12px -4px rgb(0 0 0/.5)}
.bandeau-essai .btn-plein:active{box-shadow:inset 0 2px 5px rgb(0 0 0/.4),0 0 0 var(--bord-plein)}

/* Grille de colonnes d'une page : 1 à 10 colonnes, réglées page par page en mode réglage */
.grille-colonnes,.grille-colonnes.fiche-grille{display:grid;grid-template-columns:var(--gabarit,1fr 1fr);gap:14px;align-items:start}
.grille-colonnes>div{min-width:0}
.grille-colonnes.serree{gap:10px}
.grille-colonnes.serree .carte{padding:calc(10px*var(--espace)) 12px}
@media (max-width:1100px){.grille-colonnes,.grille-colonnes.fiche-grille{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}}
@media (max-width:860px){.grille-colonnes,.grille-colonnes.fiche-grille{grid-template-columns:1fr}}

/* ── Position du menu : à gauche (défaut), à droite, en haut ou en bas ── */
@media (min-width:861px){
  html[data-menu=droite] .barre{inset:0 0 0 auto;border-right:0;border-left:1px solid var(--bordure);box-shadow:-6px 0 18px -6px rgb(0 0 0/.55),inset 1px 0 0 var(--lum)}
  html[data-menu=droite] .contenu{margin-left:0;margin-right:var(--largeur-barre)}
  html[data-menu=droite] .nav.actif{box-shadow:inset -3px 0 0 var(--accent-2),0 2px 0 var(--arete-douce),0 6px 12px -4px rgb(0 0 0/.5),inset 0 1px 0 var(--lum)}

  html[data-menu=haut] .barre,html[data-menu=bas] .barre{inset:0 0 auto 0;width:auto;height:auto;flex-direction:row;align-items:center;flex-wrap:wrap;gap:10px 18px;padding:10px 20px;overflow:visible;border-right:0}
  html[data-menu=haut] .barre{position:sticky;top:0;border-bottom:1px solid var(--bordure);box-shadow:0 6px 18px -6px rgb(0 0 0/.55),inset 0 -1px 0 var(--lum)}
  html[data-menu=bas] .barre{position:fixed;inset:auto 0 0 0;border-top:1px solid var(--bordure);box-shadow:0 -6px 18px -6px rgb(0 0 0/.55),inset 0 1px 0 var(--lum)}
  html[data-menu=haut] .barre .marque,html[data-menu=bas] .barre .marque{flex-direction:row;padding:0;gap:10px}
  html[data-menu=haut] .monogramme,html[data-menu=bas] .monogramme{width:2.6rem;height:2.6rem;font-size:1rem}
  html[data-menu=haut] .marque img,html[data-menu=bas] .marque img{max-height:2.6rem;max-width:9rem}
  html[data-menu=haut] .marque-sous,html[data-menu=bas] .marque-sous,html[data-menu=haut] .recherche kbd,html[data-menu=bas] .recherche kbd{display:none}
  html[data-menu=haut] .langues,html[data-menu=bas] .langues{margin:0}
  html[data-menu=haut] .navigation,html[data-menu=bas] .navigation{flex-direction:row;flex-wrap:wrap;gap:4px}
  html[data-menu=haut] .nav.actif,html[data-menu=bas] .nav.actif{box-shadow:inset 0 -3px 0 var(--accent-2),0 2px 0 var(--arete-douce),inset 0 1px 0 var(--lum)}
  html[data-menu=haut] .barre-bas,html[data-menu=bas] .barre-bas{margin:0 0 0 auto;padding:0;flex-direction:row;align-items:center;flex-wrap:wrap}
  html[data-menu=haut] .barre-bas .btn,html[data-menu=bas] .barre-bas .btn{margin-bottom:3px}
  html[data-menu=haut] .contenu,html[data-menu=bas] .contenu{margin-left:auto;margin-right:auto;max-width:1600px}
  html[data-menu=bas] .contenu{padding-bottom:140px}
}

/* Graphiques */
.graphe-svg{width:100%;height:160px;display:block}
.graphe-axe{display:flex;justify-content:space-around;gap:4px;margin-top:6px;font-size:.8rem;color:var(--texte-2);text-align:center}
.graphe-axe span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.graphe-axe b{display:block;color:var(--titre);font-size:.8rem;font-weight:500}
.graphe-barres{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.graphe-barres li{display:grid;grid-template-columns:minmax(5rem,30%) 1fr auto;gap:10px;align-items:center;font-size:.85rem}
.graphe-barres span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--texte-2)}
.graphe-barres .piste{height:12px;border-radius:999px;background:var(--champ);box-shadow:var(--creux);overflow:hidden}
.graphe-barres .piste i{display:block;height:100%;border-radius:999px;box-shadow:inset 0 1px 0 rgb(255 255 255/.35)}
.graphe-anneau{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.graphe-anneau svg{width:130px;height:130px;flex-shrink:0;filter:drop-shadow(0 4px 6px rgb(0 0 0/.35))}
.graphe-total{font:600 15px var(--police-titres);fill:var(--titre)}
.legende{list-style:none;margin:0;padding:0;display:grid;gap:4px;font-size:.82rem;flex:1;min-width:8rem}
.legende li{display:flex;align-items:center;gap:8px}.legende i{width:10px;height:10px;border-radius:3px;flex-shrink:0}.legende b{margin-left:auto;font-weight:500}

/* Calendrier du mois */
.calendrier{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;text-align:center;font-size:.82rem}
.calendrier b{font:500 .8rem var(--mono);color:var(--texte-2);text-transform:uppercase}
.calendrier span{position:relative;padding:6px 0;border-radius:6px;color:var(--texte)}
.calendrier span.marque{background:color-mix(in srgb,var(--accent) 14%,transparent);color:var(--titre)}
.calendrier span.marque i{position:absolute;left:50%;bottom:2px;width:5px;height:5px;margin-left:-2.5px;border-radius:50%;background:var(--accent-2)}
.calendrier span.auj{background:var(--accent-2);color:var(--barre-fond);font-weight:700;box-shadow:0 2px 0 color-mix(in srgb,var(--accent-2) 55%,#000)}

/* Étapes en chevrons (fiche) */
.carte-chevrons{display:grid;gap:8px}
.chevrons{list-style:none;margin:0;padding:0;display:flex;gap:3px}
.chevrons li{flex:1;min-width:0}
.chevrons button{width:100%;border:0;cursor:pointer;font:500 .82rem var(--police);padding:9px 18px 9px 22px;color:var(--texte-2);background:linear-gradient(180deg,var(--surface-2),var(--surface));clip-path:polygon(0 0,calc(100% - 12px) 0,100% 50%,calc(100% - 12px) 100%,0 100%,12px 50%);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chevrons li:first-child button{clip-path:polygon(0 0,calc(100% - 12px) 0,100% 50%,calc(100% - 12px) 100%,0 100%);border-radius:calc(var(--rayon)*.6) 0 0 calc(var(--rayon)*.6)}
.chevrons li.fait button{background:color-mix(in srgb,var(--succes) 30%,var(--surface));color:var(--titre)}
.chevrons li.actuel button{background:linear-gradient(180deg,color-mix(in srgb,var(--accent-2) 78%,#fff),var(--accent-2));color:var(--barre-fond);font-weight:700}
.chevrons button:hover{filter:brightness(1.12)}
.chevrons-tete{font-size:.8rem}

/* Divers */
.pastille{display:inline-block;font-size:.8rem;padding:1px 9px;border-radius:999px;background:color-mix(in srgb,var(--accent) 16%,transparent);color:var(--accent-2);white-space:nowrap}
.choix-colonnes{display:inline-flex;align-items:center;gap:6px;font-size:.85rem;color:var(--texte-2)}
.choix-colonnes select{width:auto;padding:4px 8px}

/* Chevrons : la découpe cache le contour extérieur, le focus se dessine donc à l'intérieur. */
.chevrons button:focus-visible{outline:none;box-shadow:inset 0 3px 0 var(--accent),inset 0 -3px 0 var(--accent);text-decoration:underline;text-underline-offset:3px}
/* Thèmes clairs : l'accent n'est pas éclairci sous un texte clair (contraste 4,5:1 au moins sur toute la hauteur). */
html[data-theme=clair] .langues button.actif,html[data-theme=clair] .chevrons li.actuel button,
html[data-theme=clair] .btn-plein,html[data-theme=clair] .btn-plein:hover{background:linear-gradient(180deg,var(--accent-2),color-mix(in srgb,var(--accent-2) 88%,#000))}
.carte-opp-infos,.carte-opp-perso{font-size:.8rem;margin:0 0 4px}
.ordre-menu{list-style:none;margin:0;padding:0;max-width:640px}
.ordre-menu .btn-mini{flex:none}
.ordre-menu li{display:flex;gap:6px;align-items:center;padding:calc(5px*var(--espace)) 0;border-bottom:1px solid color-mix(in srgb,var(--bordure) 60%,transparent)}
.ordre-menu li span{flex:1}
.ordre-menu li:last-child{border-bottom:0}
/* Colonnes d'une liste filtrée : seules celles du contenu choisi sont proposées. */
.grille-form:has([name=table] option[value=entreprises]:checked) [data-pour]:not([data-pour=entreprises]),
.grille-form:has([name=table] option[value=opportunites]:checked) [data-pour]:not([data-pour=opportunites]),
.grille-form:has([name=table] option[value=projets]:checked) [data-pour]:not([data-pour=projets]){display:none}
.aide-assistant ul,.aide-assistant ol{margin:0;padding-left:1.3rem;display:grid;gap:8px;max-width:72ch}
.aide-assistant li{line-height:1.5}
.perso-ligne{font-size:.8rem;margin-top:2px}
.ou-voir{margin:0 0 10px;max-width:90ch}
.apropos-tete{display:flex;gap:18px;align-items:center}
.apropos-tete h2{font-size:1.5rem}
.apropos-liste{margin:0;padding-left:1.2rem;display:grid;gap:10px;max-width:80ch}
.apropos-liste li{line-height:1.5}
.raccourcis{max-width:420px}
.raccourcis kbd{font-family:var(--mono);font-size:.8rem;border:1px solid var(--bordure);border-radius:4px;padding:1px 7px;background:var(--champ)}

/* Bandeau de l'essai : trois boutons, le reste dans « Plus » */
.plus-menu{position:relative}
.plus-menu>summary{list-style:none}
.plus-menu>summary::-webkit-details-marker{display:none}
.plus-menu>summary::after{content:'▾';margin-left:2px}
.plus-liste{position:absolute;right:0;top:calc(100% + 6px);z-index:30;display:flex;flex-direction:column;gap:6px;padding:8px;min-width:13rem;background:var(--surface);border:1px solid var(--bordure);border-radius:var(--rayon);box-shadow:0 12px 30px rgb(0 0 0/.45)}
.plus-liste .btn{justify-content:flex-start}
@media (max-width:860px){.plus-menu{flex-basis:100%}.plus-liste{position:static;margin-top:6px}}

/* Niveaux des réglages : Utiliser · Personnaliser · Avancé */
.niveaux{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:14px}
.niveau{display:flex;flex-direction:column;gap:4px;text-align:left;padding:10px 14px;background:var(--surface);border:1px solid var(--bordure);border-radius:var(--rayon);color:var(--texte);font:inherit;cursor:pointer}
.niveau b{font:600 1.05rem var(--police-titres);color:var(--titre)}
.niveau span{color:var(--texte-2);font-size:.9rem}
.niveau.actif{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
@media (max-width:860px){.niveaux{grid-template-columns:1fr}}

/* Textes secondaires plus lisibles, titres de carte plus nets */
.petit{font-size:.9rem}
.carte-tete .muet,.liste-simple .muet,.palette li .muet{font-size:.92rem}
.carte-tete h2{font-weight:600}
.mesure small{font-size:.9rem}
.mesure-lib{font-size:.8rem}
.surtitre{font-size:.8rem}
.colonne header small{font-size:.84rem}
.puces.petites .puce{font-size:.86rem}
h3{font-size:.86rem}

/* Vignettes des métiers et des modèles d'écran */
.depart-choix .vignette{display:block;width:100%;height:auto;aspect-ratio:16/10;border-radius:calc(var(--rayon)*.6);border:1px solid var(--bordure);margin-bottom:4px}
/* Pendant qu'une fenêtre est ouverte, la page derrière ne défile pas : une seule barre de défilement à l'écran. */
html:has(.dialogue[open]){overflow:hidden}
/* Menu en haut ou en bas : « Rechercher » et « Mode réglage » en icône seule, pour tenir sur une rangée. */
@media (min-width:861px){
  html[data-menu=haut] .barre-bas .recherche span,html[data-menu=bas] .barre-bas .recherche span{display:none}
}
.case small{font-size:.9rem}

/* « Décrire mon métier » : carte d'entrée et aperçu de la proposition */
.depart-choix.decrire{border-style:dashed;border-color:var(--accent);justify-content:center}
.apercu-metier{display:grid;grid-template-columns:minmax(0,240px) 1fr;gap:16px;align-items:start}
.apercu-metier .vignette{display:block;width:100%;height:auto;aspect-ratio:16/10;border-radius:calc(var(--rayon)*.6);border:1px solid var(--bordure)}
.titre-apercu{font:600 1.3rem var(--police-titres);color:var(--titre);margin-bottom:4px}
.etapes-apercu{display:flex;flex-wrap:wrap;gap:6px;list-style:none;padding:0;margin:0}
.etapes-apercu li{padding:4px 12px;border:1px solid var(--bordure);border-radius:999px;background:var(--surface-2)}
.etapes-apercu li.fin{border-color:var(--succes);color:var(--succes)}
.apercu-champs{margin:0;padding-left:1.2em;display:flex;flex-direction:column;gap:4px}
@media (max-width:860px){.apercu-metier{grid-template-columns:1fr}}

/* Cibles à toucher : assez grandes pour un doigt ou une souris peu précise (liens d'action, +1 j / +7 j, cases à cocher). */
.lien-action,.reporter button{min-height:30px;display:inline-flex;align-items:center}
.reporter button{padding:0 10px;font-size:.8rem}
@media (pointer:coarse){
  .lien-action,.reporter button,.btn-mini{min-height:44px;min-width:44px;padding-left:10px;padding-right:10px}
  .coche{width:30px;height:30px}
  .langues button{min-height:44px}
}

/* Texte plus grand : les rangées d'une fiche passent à la ligne au lieu de déborder de leur carte. */
.objet-tete{flex-wrap:wrap}
.objet-tete .actions{margin-left:auto}
.reporter{flex-wrap:wrap}
.fiche-grille .suivi{grid-template-columns:auto minmax(0,1fr)}
.fiche-grille .suivi time,.fiche-grille .suivi .reporter{grid-column:2}

/* Aperçu du métier décrit : tout se modifie avant d'appliquer. */
.etapes-form li{display:flex;align-items:center;gap:4px;padding:3px 4px 3px 12px}
.etapes-form li input{width:12ch;min-width:8ch;padding:4px 8px;border:0;background:transparent;color:inherit;font:inherit}
.etapes-form li.fin input::placeholder{color:var(--succes);opacity:.8}
.apercu-liste{list-style:none;padding:0;margin:4px 0 0;display:flex;flex-direction:column;gap:4px}
.apercu-liste li{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.apercu-liste li input[type=checkbox]{width:auto;flex:none;margin:0;accent-color:var(--accent)}
.apercu-liste li input:not([type=checkbox]){flex:1 1 12rem;width:auto;max-width:22rem;padding:4px 8px}
.paire{display:flex;gap:6px}.paire input{min-width:0}