/* Eurocom fiches : charte inspirée d'eurocom-woippy.fr (rouge #CF1717, noir #181519, Switzer, titres en capitales). */

:root {
  --rouge: #cf1717; --rouge-fonce: #a51010; --rouge-pale: #fcecec;
  --noir: #181519; --texte: #2a262c; --gris: #6a636e; --gris-clair: #9b949f;
  --trait: #e6e1e8; --trait-fort: #d4cdd7; --fond: #f4f1f5; --surface: #ffffff; --doux: #fdfaff;
  --ok: #1d7444; --ok-pale: #e5f3ea; --attente: #8a5a00; --attente-pale: #fff3d6; --ko: var(--rouge); --ko-pale: var(--rouge-pale);
  --rayon: 3px; --ombre: 0 1px 2px rgba(24, 21, 25, .05), 0 6px 24px -12px rgba(24, 21, 25, .18);
  --police: "Switzer", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 15px/1.55 var(--police); color: var(--texte); background: var(--fond); }
a { color: var(--noir); text-decoration-color: var(--rouge); text-underline-offset: 3px; }
a:hover { color: var(--rouge); }
img { max-width: 100%; }

/* En-tête */
.entete { background: var(--surface); border-top: 4px solid var(--rouge); border-bottom: 1px solid var(--trait); position: sticky; top: 0; z-index: 20; }
.entete .barre { max-width: 1180px; margin: 0 auto; padding: 0 24px; display: flex; align-items: center; gap: 28px; min-height: 68px; }
.marque { display: flex; align-items: center; gap: 14px; text-decoration: none; flex-shrink: 0; }
.marque img { width: 158px; height: auto; display: block; }
.marque span { border-left: 1px solid var(--trait-fort); padding-left: 14px; font-size: 11px; font-weight: 600; letter-spacing: 1.6px; text-transform: uppercase; color: var(--gris); line-height: 1.2; }
.navigation { display: flex; gap: 4px; flex: 1; flex-wrap: wrap; }
.navigation a { text-decoration: none; text-transform: uppercase; font-size: 13px; letter-spacing: 1px; font-weight: 500; color: var(--noir); padding: 23px 12px 21px; border-bottom: 3px solid transparent; }
.navigation a:hover { color: var(--rouge); }
.navigation a.actif { color: var(--rouge); border-bottom-color: var(--rouge); }
.navigation .separateur { width: 1px; background: var(--trait); margin: 20px 8px; }
.navigation a.outil { color: var(--gris); }
.navigation a.outil.actif, .navigation a.outil:hover { color: var(--rouge); }

.outils { position: relative; align-self: stretch; display: flex; }
.outils > summary { list-style: none; cursor: pointer; text-transform: uppercase; font-size: 13px; letter-spacing: 1px; font-weight: 500; color: var(--gris); padding: 23px 12px 21px; border-bottom: 3px solid transparent; }
.outils > summary::-webkit-details-marker { display: none; }
.outils > summary::after { content: " ▾"; font-size: 10px; }
.outils > summary:hover, .outils.actif > summary { color: var(--rouge); }
.outils.actif > summary { border-bottom-color: var(--rouge); }
.outils .menu { position: absolute; left: 0; top: 100%; z-index: 30; background: var(--surface); border: 1px solid var(--trait); border-radius: var(--rayon); box-shadow: var(--ombre); min-width: 200px; padding: 6px; }
.outils .menu a { display: block; padding: 9px 12px; border-radius: var(--rayon); text-decoration: none; color: var(--noir); font-size: 14px; text-transform: none; letter-spacing: 0; border: 0; }
.outils .menu a:hover, .outils .menu a.actif { background: var(--fond); color: var(--rouge); }
.grille-prix { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 18px; max-width: 760px; }
.utilisateur { position: relative; }
.utilisateur summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: var(--rayon); }
.utilisateur summary::-webkit-details-marker { display: none; }
.utilisateur summary:hover { background: var(--fond); }
.initiale { width: 34px; height: 34px; border-radius: 50%; background: var(--noir); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 14px; }
.utilisateur .qui { line-height: 1.2; font-size: 14px; }
.utilisateur .qui small { display: block; color: var(--gris); font-size: 11px; text-transform: uppercase; letter-spacing: .8px; }
.utilisateur .menu { position: absolute; right: 0; top: calc(100% + 6px); background: var(--surface); border: 1px solid var(--trait); border-radius: var(--rayon); box-shadow: var(--ombre); min-width: 200px; padding: 6px; }
.utilisateur .menu a, .utilisateur .menu button { display: block; width: 100%; text-align: left; padding: 9px 12px; font: inherit; font-size: 14px; color: var(--noir); text-decoration: none; background: none; border: 0; border-radius: var(--rayon); cursor: pointer; text-transform: none; letter-spacing: 0; font-weight: 400; }
.utilisateur .menu a:hover, .utilisateur .menu button:hover { background: var(--fond); color: var(--rouge); }

/* Mise en page */
main { max-width: 1180px; margin: 0 auto; padding: 32px 24px 80px; }
h1, h2, h3 { color: var(--noir); font-weight: 700; text-transform: uppercase; }
h1 { font-size: 26px; letter-spacing: .6px; margin: 0 0 6px; line-height: 1.2; }
h2 { font-size: 14px; letter-spacing: 1.4px; margin: 36px 0 14px; display: flex; align-items: center; gap: 10px; }
h2::before { content: ""; width: 22px; height: 3px; background: var(--rouge); flex-shrink: 0; }
h3 { font-size: 13px; letter-spacing: 1.2px; margin: 0 0 10px; }
.sous { color: var(--gris); margin: 0 0 22px; max-width: 760px; }
.note { color: var(--gris); font-size: 13px; }
.carte { background: var(--surface); border: 1px solid var(--trait); border-radius: var(--rayon); padding: 24px; box-shadow: var(--ombre); }
.carte + .carte { margin-top: 18px; }
.deux-colonnes { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 24px; align-items: start; }
.deux-colonnes > .carte + .carte { margin-top: 0; }
.grille-saisie { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 0 16px; align-items: start; }
.colle { position: sticky; top: 96px; }
.pile > * + * { margin-top: 18px; }
code { font-size: 13px; background: var(--doux); border: 1px solid var(--trait); padding: 1px 5px; border-radius: 2px; }

/* Tableaux */
table { border-collapse: collapse; width: 100%; background: var(--surface); }
td, th { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--trait); vertical-align: top; }
th { color: var(--gris); font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: 1px; background: var(--doux); }
tr:hover td { background: #fcfbfd; }
.tableau { border: 1px solid var(--trait); border-radius: var(--rayon); overflow: auto; box-shadow: var(--ombre); }
.tableau table { border: 0; }
.tableau tr:last-child td { border-bottom: 0; }
td a { text-decoration: none; font-weight: 500; }
td a:hover { text-decoration: underline; }

/* Formulaires */
label { display: block; font-size: 12px; font-weight: 600; color: var(--noir); margin-bottom: 6px; text-transform: uppercase; letter-spacing: .6px; }
label .facultatif { color: var(--gris-clair); font-weight: 500; text-transform: none; letter-spacing: 0; }
input[type=url], input[type=text], input[type=number], input[type=password], input[type=search], select, textarea {
  font: inherit; color: var(--texte); padding: 11px 13px; border: 1.5px solid var(--trait-fort); border-radius: var(--rayon); width: 100%; background: #fff; transition: border-color .15s, box-shadow .15s;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--noir); box-shadow: 0 0 0 3px rgba(207, 23, 23, .14); }
textarea { min-height: 120px; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 13px; }
select[multiple] { min-height: 150px; }
.grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px 18px; }
.champ { margin-bottom: 16px; }
.champ.large { grid-column: 1 / -1; }
.champ.double { grid-column: span 2; }
@media (max-width: 560px) { .champ.double { grid-column: 1 / -1; } }
.case { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--texte); margin: 0; }
.case input { width: 17px; height: 17px; accent-color: var(--rouge); }
form.ligne { display: flex; gap: 8px; margin: 16px 0; }

/* Boutons */
button, .bouton {
  font: inherit; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; line-height: 1.2;
  padding: 13px 22px; border-radius: var(--rayon); border: 1.5px solid var(--rouge); background: var(--rouge); color: #fff;
  cursor: pointer; white-space: nowrap; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px; transition: background .15s, color .15s, border-color .15s;
}
button:hover, .bouton:hover { background: var(--rouge-fonce); border-color: var(--rouge-fonce); color: #fff; }
button.secondaire, .bouton.secondaire { background: #fff; color: var(--noir); border-color: var(--noir); }
button.secondaire:hover, .bouton.secondaire:hover { background: var(--noir); color: #fff; }
button.noir, .bouton.noir { background: var(--noir); border-color: var(--noir); }
button.noir:hover, .bouton.noir:hover { background: #000; }
button.petit, .bouton.petit { padding: 7px 12px; font-size: 11px; }
button.lien { background: none; border: 0; color: var(--noir); padding: 0; text-transform: none; letter-spacing: 0; font-weight: 500; font-size: inherit; text-decoration: underline; text-decoration-color: var(--rouge); text-underline-offset: 3px; }
button.lien:hover { color: var(--rouge); background: none; }
button.danger { background: #fff; color: var(--rouge); border-color: var(--rouge); }
button.danger:hover { background: var(--rouge); color: #fff; }
button:disabled { opacity: .45; cursor: not-allowed; }

/* Messages */
.erreur, .avertissement, .succes, .info { padding: 12px 16px; border-radius: var(--rayon); margin: 0 0 16px; border-left: 4px solid; }
.erreur { background: var(--ko-pale); border-color: var(--rouge); color: #7d0c0c; }
.avertissement { background: var(--attente-pale); border-color: #e0a100; color: #5c3d00; }
.succes { background: var(--ok-pale); border-color: var(--ok); color: #124d2c; }
.info { background: var(--doux); border-color: var(--noir); }
.succes p, .erreur p, .avertissement p { margin: 4px 0; }

/* Échecs expliqués */
.carte.echec { border-left: 4px solid var(--rouge); }
.titre-echec { color: var(--rouge); font-size: 14px; margin-bottom: 8px; }
.carte.echec .cause { font-size: 17px; font-weight: 600; color: var(--noir); margin: 0 0 8px; }
.carte.echec .a-faire { margin: 0 0 14px; }
.boutons { display: flex; gap: 10px; flex-wrap: wrap; margin: 16px 0 12px; }
.detail-technique { margin-top: 10px; }
.detail-technique code { display: block; margin-top: 6px; white-space: pre-wrap; word-break: break-word; }

/* Statuts */
.pastille { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .8px; padding: 4px 9px; border-radius: 20px; background: var(--fond); color: var(--gris); white-space: nowrap; }
.pastille::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.pastille.ok { background: var(--ok-pale); color: var(--ok); }
.pastille.ko { background: var(--ko-pale); color: var(--rouge); }
.pastille.attente { background: var(--attente-pale); color: var(--attente); }
.pastille.attente::before { animation: pulse 1.2s ease-in-out infinite; }
.pastille.relire { background: var(--noir); color: #fff; }
.ok { color: var(--ok); font-weight: 600; } .ko { color: var(--rouge); font-weight: 600; } .attente { color: var(--attente); font-weight: 600; }
.pastille.ok, .pastille.ko, .pastille.attente { font-weight: 600; }
@keyframes pulse { 50% { opacity: .25; } }

/* Étapes d'une fiche */
.etapes { list-style: none; display: flex; padding: 0; margin: 0 0 28px; counter-reset: etape; background: var(--surface); border: 1px solid var(--trait); border-radius: var(--rayon); }
.etapes li { flex: 1; display: flex; align-items: center; gap: 10px; padding: 14px 16px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .8px; color: var(--gris-clair); counter-increment: etape; position: relative; }
.etapes li + li { border-left: 1px solid var(--trait); }
.etapes li::before { content: counter(etape); width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--trait-fort); display: grid; place-items: center; flex-shrink: 0; font-size: 12px; }
.etapes li.faite { color: var(--noir); }
.etapes li.faite::before { content: "✓"; background: var(--noir); border-color: var(--noir); color: #fff; }
.etapes li.active { color: var(--rouge); }
.etapes li.active::before { background: var(--rouge); border-color: var(--rouge); color: #fff; }
.etapes li.active.attente::before { animation: pulse 1.2s ease-in-out infinite; }
.etapes li.echec { color: var(--rouge); }
.etapes li.echec::before { content: "!"; border-color: var(--rouge); color: var(--rouge); }

/* Accueil : nouvelle fiche */
.nouvelle { padding: 30px; }
.reference { display: flex; gap: 0; margin-bottom: 8px; }
.reference input { font-size: 22px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; padding: 15px 18px; border-right: 0; border-radius: var(--rayon) 0 0 var(--rayon); }
.reference input::placeholder { text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--gris-clair); font-size: 17px; }
.reference button { border-radius: 0 var(--rayon) var(--rayon) 0; padding: 0 26px; }
.parcours { display: flex; gap: 22px; flex-wrap: wrap; margin: 0 0 24px; padding: 0; list-style: none; color: var(--gris); font-size: 13px; }
.parcours li { display: flex; align-items: center; gap: 8px; }
.parcours b { width: 22px; height: 22px; border-radius: 50%; background: var(--noir); color: #fff; display: grid; place-items: center; font-size: 11px; }
.repli { margin-top: 22px; border-top: 1px dashed var(--trait-fort); padding-top: 16px; }
.repli summary { cursor: pointer; font-weight: 600; font-size: 14px; color: var(--noir); }
.repli summary:hover { color: var(--rouge); }
.repli[open] summary { margin-bottom: 14px; }
.liste-courte { list-style: none; padding: 0; margin: 0; }
.liste-courte li { display: flex; justify-content: space-between; gap: 10px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--trait); font-size: 14px; }
.liste-courte li:last-child { border-bottom: 0; }
.liste-courte a { text-decoration: none; font-weight: 600; letter-spacing: .5px; }
.liste-courte small { color: var(--gris); display: block; font-weight: 400; letter-spacing: 0; }

/* Recherche par référence */
.resume { display: flex; gap: 12px; flex-wrap: wrap; margin: 0 0 24px; }
.resume .pastille { font-size: 12px; padding: 6px 12px; }
.source { margin-bottom: 26px; }
.source-entete { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; flex-wrap: wrap; }
.source-entete h3 { margin: 0; font-size: 15px; }
.source-entete .note { font-family: ui-monospace, Menlo, monospace; font-size: 12px; }
.resultat { background: var(--surface); border: 1px solid var(--trait); border-left: 4px solid var(--trait-fort); border-radius: var(--rayon); padding: 16px 18px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 20px; align-items: center; margin-bottom: 10px; }
.resultat.exacte { border-left-color: var(--ok); }
.resultat.variante { border-left-color: #e0a100; }
.resultat.voisine { border-left-color: var(--rouge); }
.resultat.conseillee { border-color: var(--ok); border-left-width: 4px; box-shadow: 0 0 0 3px var(--ok-pale), var(--ombre); }
.resultat .titre { font-size: 16px; font-weight: 600; color: var(--noir); text-decoration: none; display: block; margin-bottom: 2px; }
.resultat .titre:hover { color: var(--rouge); }
.resultat .adresse { font-size: 13px; color: var(--ok); word-break: break-all; }
.resultat .extrait { font-size: 14px; color: var(--gris); margin: 6px 0 0; }
.resultat .niveau { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 6px; }
.resultat.absente { opacity: .75; }
.drapeau { font-size: 10px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; background: var(--ok); color: #fff; padding: 3px 8px; border-radius: 2px; }
mark { padding: 0 2px; border-radius: 2px; font-weight: 700; color: inherit; }
mark.exacte { background: #c9ead6; box-shadow: inset 0 -2px 0 var(--ok); }
mark.variante { background: #ffe39b; box-shadow: inset 0 -2px 0 #e0a100; }
mark.voisine { background: #f9cfcf; box-shadow: inset 0 -2px 0 var(--rouge); text-decoration: line-through; text-decoration-color: rgba(207, 23, 23, .6); }
.vide { background: var(--surface); border: 1px dashed var(--trait-fort); border-radius: var(--rayon); padding: 14px 18px; color: var(--gris); font-size: 14px; }
.attente-grande { text-align: center; padding: 56px 24px; }
.roue { width: 42px; height: 42px; border-radius: 50%; border: 3px solid var(--trait); border-top-color: var(--rouge); margin: 0 auto 18px; animation: tourne .9s linear infinite; }
@keyframes tourne { to { transform: rotate(360deg); } }
.legende { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--gris); margin: 6px 0 22px; }
.legende mark { font-weight: 600; }

/* Fiche : relecture */
.galerie { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; }
.galerie figure { margin: 0; border: 1px solid var(--trait); border-radius: var(--rayon); padding: 6px; text-align: center; background: #fff; }
.galerie img { width: 100%; height: 120px; object-fit: contain; }
.galerie figcaption { font-size: 12px; color: var(--gris); }
.texte-source { max-height: 260px; overflow: auto; background: var(--surface); border: 1px solid var(--trait); border-radius: var(--rayon); padding: 14px; font-size: 14px; }
ul.cols { columns: 2; padding-left: 18px; font-size: 14px; }
.apercu { border: 1px dashed var(--trait-fort); border-radius: var(--rayon); padding: 4px 16px; margin-top: 8px; font-size: 14px; background: var(--doux); }
.photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.photo { border: 1px solid var(--trait); border-radius: var(--rayon); padding: 10px; background: #fff; }
.photo img { width: 100%; height: 170px; object-fit: contain; background: #fff; }
.photo textarea { min-height: 70px; font-family: inherit; font-size: 13px; }
.photo .ligne { display: flex; gap: 10px; align-items: center; margin: 8px 0; font-size: 14px; }
.photo .ligne input[type=number] { width: 70px; padding: 6px 8px; }
.actions { display: flex; gap: 10px; margin: 26px -24px -24px; position: sticky; bottom: 0; background: rgba(255, 255, 255, .96); backdrop-filter: blur(4px); padding: 16px 24px; border-top: 1px solid var(--trait); z-index: 5; }
details > summary.note { cursor: pointer; }

/* Connexion */
body.connexion { min-height: 100vh; display: grid; place-items: center; padding: 24px; background:
  linear-gradient(135deg, rgba(207, 23, 23, .06) 0 25%, transparent 25% 100%), var(--fond); }
.boite-connexion { width: 100%; max-width: 420px; background: var(--surface); border-top: 4px solid var(--rouge); border-radius: var(--rayon); box-shadow: 0 30px 60px -30px rgba(24, 21, 25, .35), 0 1px 3px rgba(24, 21, 25, .06); padding: 40px 38px 34px; }
.boite-connexion img { width: 210px; display: block; margin-bottom: 26px; }
.boite-connexion h1 { font-size: 20px; margin-bottom: 4px; }
.boite-connexion .sous { margin-bottom: 26px; }
.boite-connexion button { width: 100%; margin-top: 6px; padding: 15px; }
.pied-connexion { margin-top: 26px; font-size: 12px; color: var(--gris-clair); text-align: center; letter-spacing: .5px; }

/* Comptes */
.role { font-size: 11px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; padding: 3px 8px; border-radius: 2px; background: var(--fond); color: var(--noir); }
.role.superadmin { background: var(--noir); color: #fff; }
.actions-compte { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; padding: 16px 0 4px; }
.actions-compte form { background: var(--doux); border: 1px solid var(--trait); border-radius: var(--rayon); padding: 14px; }

/* Navigation : pastille du nombre de choses à traiter */
.badge { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; margin-left: 4px; border-radius: 10px; background: var(--rouge); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: 0; vertical-align: 1px; }

/* Accueil : onglets de saisie et mode auto */
.onglets-saisie { display: flex; gap: 4px; border-bottom: 1px solid var(--trait); margin: 0 0 22px; flex-wrap: wrap; }
.onglets-saisie button { background: none; border: 0; border-bottom: 3px solid transparent; color: var(--gris); padding: 12px 14px 10px; border-radius: 0; font-size: 12px; margin-bottom: -1px; }
.onglets-saisie button:hover { background: none; color: var(--noir); }
.onglets-saisie button[aria-selected="true"] { color: var(--rouge); border-bottom-color: var(--rouge); }
.adresse-source input { font-size: 15px; font-weight: 400; letter-spacing: 0; text-transform: none; padding: 13px 14px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cadre-lot { border: 1px solid var(--trait); border-radius: var(--rayon); overflow: hidden; }
table.lot { width: 100%; border-collapse: collapse; }
table.lot th { background: var(--doux); padding: 9px 8px; font-size: 11px; }
table.lot td { padding: 6px 6px; border-bottom: 1px solid var(--trait); vertical-align: middle; }
table.lot tr:last-child td { border-bottom: 0; }
table.lot tr:hover td { background: transparent; }
table.lot th.numero, table.lot td.numero { width: 36px; text-align: center; color: var(--gris-clair); font-size: 12px; padding-left: 10px; }
table.lot td.ref { width: 38%; }
table.lot td.retirer { width: 44px; text-align: center; }
table.lot input { padding: 9px 10px; font-size: 15px; border-width: 1px; }
table.lot td.ref input { font-weight: 600; letter-spacing: .5px; text-transform: uppercase; }
table.lot td.ref input::placeholder { text-transform: none; letter-spacing: 0; font-weight: 400; }
.barre-lot { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin: 10px 0 18px; }
.barre-lot .note { flex: 1; min-width: 220px; }
.zone-lot { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 14px; min-height: 170px; }
.mode-auto { display: flex; gap: 12px; align-items: flex-start; text-transform: none; letter-spacing: 0; font-weight: 400; font-size: 14px; color: var(--texte);
  border: 1.5px solid var(--trait-fort); border-radius: var(--rayon); padding: 14px 16px; margin: 4px 0 18px; cursor: pointer; background: var(--doux); transition: border-color .15s, background .15s; }
.mode-auto input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--rouge); flex-shrink: 0; }
.mode-auto strong { color: var(--noir); }
.mode-auto.active { border-color: var(--rouge); background: var(--rouge-pale); }
.suivi .chiffre { display: flex; align-items: baseline; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--trait); text-decoration: none; color: var(--texte); }
.suivi .chiffre b { font-size: 26px; color: var(--noir); min-width: 36px; }
.suivi .chiffre.alerte b { color: var(--rouge); }
.suivi .chiffre:hover { color: var(--rouge); }
.entete-section { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 36px 0 14px; }
.entete-section h2 { margin: 0; }
.entete-section a { font-weight: 600; font-size: 14px; text-decoration: none; }
.entete-page { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }

/* Liste des créations */
.onglets { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; border-bottom: 1px solid var(--trait); margin: 8px 0 18px; }
.onglets a { text-decoration: none; text-transform: uppercase; font-size: 12px; letter-spacing: 1px; font-weight: 600; color: var(--gris); padding: 12px 12px 10px; border-bottom: 3px solid transparent; margin-bottom: -1px; }
.onglets a:hover { color: var(--noir); }
.onglets a.actif { color: var(--rouge); border-bottom-color: var(--rouge); }
.onglets .compteur { display: inline-block; min-width: 20px; padding: 1px 6px; border-radius: 10px; background: var(--fond); color: var(--gris); font-size: 11px; text-align: center; }
.onglets a.alerte .compteur { background: var(--rouge); color: #fff; }
.onglets .filtre { margin-left: auto; padding: 6px 0; }
.onglets .filtre input { padding: 8px 12px; width: 220px; font-size: 14px; }
.liste-creations { list-style: none; margin: 0; padding: 0; background: var(--surface); border: 1px solid var(--trait); border-radius: var(--rayon); box-shadow: var(--ombre); }
.creation { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--trait); }
.creation:last-child { border-bottom: 0; }
.creation.etat-action, .creation.etat-ko { box-shadow: inset 4px 0 0 var(--rouge); }
.creation .vignette { width: 56px; height: 56px; border: 1px solid var(--trait); border-radius: var(--rayon); background: #fff; display: grid; place-items: center; overflow: hidden; text-decoration: none; }
.creation .vignette { position: relative; }
.creation .vignette img { width: 100%; height: 100%; object-fit: contain; position: absolute; inset: 0; background: #fff; }
.creation .vignette span { font-weight: 700; color: var(--gris-clair); font-size: 13px; }
.creation .titre { font-weight: 600; color: var(--noir); text-decoration: none; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.creation .titre:hover { color: var(--rouge); }
.creation .meta { font-size: 12px; color: var(--gris); display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.creation .raison { font-size: 13px; color: var(--texte); margin-top: 3px; }
.etiquette-auto { font-size: 10px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--rouge); border: 1px solid currentColor; border-radius: 2px; padding: 1px 5px; }
.actions-ligne { display: flex; gap: 6px; align-items: center; justify-content: flex-end; min-width: 150px; }
.actions-ligne form { margin: 0; }
button.icone { background: none; border: 0; color: var(--gris-clair); font-size: 22px; line-height: 1; padding: 6px 10px; text-transform: none; }
button.icone:hover { background: var(--fond); color: var(--rouge); }
.petit-lien { font-size: 12px; }
.pastille.action { background: var(--rouge-pale); color: var(--rouge); }
.arret-auto ul { margin: 0 0 10px; padding-left: 18px; }


/* Aides sous les champs */
.aide { font-size: 12px; color: var(--gris); margin: 6px 0 0; line-height: 1.4; }
.aide button.lien { font-size: 12px; }

/* Bandeaux */
.bandeau { padding: 14px 18px; }
.bandeau p { margin: 0; }
.pause-file { background: var(--attente-pale); border-bottom: 1px solid #f0d58a; }
.pause-file .barre { max-width: 1180px; margin: 0 auto; padding: 12px 24px; display: flex; gap: 16px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.pause-file p { margin: 0; color: #5c3d00; flex: 1; min-width: 260px; }
.pause-file form { margin: 0; }

/* Étapes : pause (décision attendue) et version mobile */
.etapes li.pause { color: var(--attente); }
.etapes li.pause::before { content: "⏸"; border-color: #e0a100; color: var(--attente); background: var(--attente-pale); }
.etape-mobile { display: none; font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--gris); margin: -8px 0 18px; }

/* Carte de décision (mode auto en pause) */
.carte.decision { border-left: 4px solid #e0a100; margin-bottom: 18px; }
.decision .surtitre { margin: 0 0 6px; font-size: 11px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--attente); }
.decision h2 { margin: 0 0 8px; font-size: 18px; letter-spacing: .3px; }
.decision h2::before { display: none; }
.bloc-decision { padding: 14px 0; border-top: 1px solid var(--trait); }
.bloc-decision:first-child { border-top: 0; padding-top: 6px; }
.bloc-decision h3 { margin-bottom: 8px; }
.decision .boutons { align-items: center; margin-bottom: 0; }
ul.doublons { margin: 0 0 10px; padding-left: 18px; }

/* Points à vérifier (relecture) */
.carte.points { border-left: 4px solid #e0a100; margin-bottom: 18px; padding: 16px 22px; }
.carte.points h3 { margin-bottom: 6px; }
.carte.points ul { margin: 0; padding-left: 18px; }
.carte.points li + li { margin-top: 6px; }

/* Relecture */
.relecture-complete > summary { cursor: pointer; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; font-size: 13px; padding: 14px 0; color: var(--noir); }
.relecture-complete > summary.cache { display: none; }
.sous-repli { margin: 10px 0 4px; }
.sous-repli > summary { cursor: pointer; font-size: 14px; font-weight: 600; color: var(--noir); padding: 4px 0; }
.sous-repli > summary:hover { color: var(--rouge); }
.sous-repli[open] > summary { margin-bottom: 8px; }
textarea.court { min-height: 64px; font-family: inherit; font-size: 13px; }
.champ.texte .libelle { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .6px; color: var(--noir); margin: 0 0 6px; }
.champ.texte .apercu { margin-top: 0; }
.badges { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.section-details { margin-top: 30px; border: 1px solid var(--trait); border-radius: var(--rayon); padding: 0 18px; background: var(--doux); }
.section-details > summary { cursor: pointer; padding: 14px 0; display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; list-style-position: inside; }
.section-details > summary .titre { font-weight: 700; text-transform: uppercase; letter-spacing: 1.2px; font-size: 13px; color: var(--noir); }
.section-details > summary .resume { font-size: 13px; color: var(--gris); }
.section-details[open] { padding-bottom: 8px; }
fieldset.types { border: 0; padding: 0; margin: 0 0 16px; min-width: 0; }
fieldset.types legend { font-size: 12px; font-weight: 600; color: var(--noir); margin-bottom: 8px; text-transform: uppercase; letter-spacing: .6px; padding: 0; }
fieldset.types > .case { margin: 0 0 6px; }
.liste-types { columns: 3 220px; column-gap: 18px; }
.liste-types .case { margin: 0 0 6px; break-inside: avoid; }
.photo .case { margin: 8px 0 0; }
.photo img { cursor: zoom-in; }
.actions { flex-wrap: wrap; align-items: center; }
.actions .note { flex-basis: 100%; margin: 0; }
.actions .case.doublon { flex-basis: 100%; font-weight: 600; color: #5c3d00; background: var(--attente-pale); padding: 8px 10px; border-radius: var(--rayon); }

/* Écran final */
.carte.fin .titre-fin { font-size: 18px; font-weight: 700; color: var(--ok); margin: 0 0 6px; }
.carte.fin .recap { margin: 0 0 14px; color: var(--texte); }
.carte.fin .suite { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin: 18px 0 0; padding-top: 16px; border-top: 1px solid var(--trait); }
.autres-options { display: inline-block; }
.autres-options > summary { cursor: pointer; font-size: 14px; color: var(--gris); padding: 10px 4px; }
.autres-options[open] > summary { margin-bottom: 6px; }

/* Recherche : utiliser quand même une page douteuse */
.forcer > summary { cursor: pointer; font-size: 13px; color: var(--gris); white-space: nowrap; }
.forcer[open] > summary { margin-bottom: 6px; }

/* Créations : groupes, action groupée, menu de ligne, mise en évidence */
.titre-groupe { margin: 22px 0 8px; font-size: 12px; color: var(--gris); }
.titre-groupe span { display: inline-block; min-width: 20px; padding: 1px 6px; border-radius: 10px; background: var(--surface); border: 1px solid var(--trait); text-align: center; font-size: 11px; }
#creations > .titre-groupe:first-child { margin-top: 0; }
.action-groupee { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; background: var(--surface); border: 1px solid var(--trait); border-left: 4px solid var(--rouge); border-radius: var(--rayon); padding: 10px 14px; margin: 0 0 16px; font-size: 14px; }
.creation .meta .pastille { padding: 2px 8px; font-size: 10px; }
.creation.groupe-terminees .titre { font-weight: 500; }
.creation.groupe-en_cours .corps { opacity: .85; }
.menu-ligne { position: relative; }
.menu-ligne > summary { list-style: none; cursor: pointer; width: 36px; height: 36px; display: grid; place-items: center; border-radius: var(--rayon); color: var(--gris); font-size: 20px; line-height: 1; }
.menu-ligne > summary::-webkit-details-marker { display: none; }
.menu-ligne > summary:hover { background: var(--fond); color: var(--noir); }
.menu-ligne .menu { position: absolute; right: 0; top: calc(100% + 4px); z-index: 10; background: var(--surface); border: 1px solid var(--trait); border-radius: var(--rayon); box-shadow: var(--ombre); min-width: 190px; padding: 6px; }
.menu-ligne .menu a, .menu-ligne .menu button { display: block; width: 100%; text-align: left; padding: 9px 12px; font: inherit; font-size: 14px; color: var(--noir); text-decoration: none; background: none; border: 0; border-radius: var(--rayon); cursor: pointer; text-transform: none; letter-spacing: 0; font-weight: 400; }
.menu-ligne .menu a:hover, .menu-ligne .menu button:hover { background: var(--fond); color: var(--rouge); }
.menu-ligne form { margin: 0; }
.bouton.discret { background: none; border-color: transparent; color: var(--noir); text-decoration: underline; text-decoration-color: var(--rouge); text-underline-offset: 3px; padding-left: 6px; padding-right: 6px; }
.bouton.discret:hover { background: none; color: var(--rouge); border-color: transparent; }
@keyframes surligne { from { background: var(--attente-pale); } to { background: transparent; } }
.creation.vient-de-changer { animation: surligne 3s ease-out; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

@media (max-width: 900px) {
  .deux-colonnes { grid-template-columns: minmax(0, 1fr); }
  .grille-saisie { grid-template-columns: 1fr 1fr; }
  .colle { position: static; }
}
@media (max-width: 760px) {
  .entete .barre { flex-wrap: wrap; gap: 6px 16px; padding: 10px 16px 0; }
  .marque img { width: 130px; }
  .marque span { display: none; }
  .navigation { order: 3; flex-basis: 100%; overflow-x: auto; flex-wrap: nowrap; }
  .navigation a { padding: 12px 10px; white-space: nowrap; }
  .utilisateur { margin-left: auto; }
  .utilisateur .qui { display: none; }
  main { padding: 22px 16px 60px; }
  h1 { font-size: 21px; }
  .reference { flex-direction: column; gap: 8px; }
  .reference input { border-right: 1.5px solid var(--trait-fort); border-radius: var(--rayon); font-size: 19px; }
  .reference button { border-radius: var(--rayon); padding: 14px; }
  .resultat { grid-template-columns: minmax(0, 1fr); }
  .resultat .pastille { white-space: normal; }
  table.lot thead { display: none; }
  table.lot, table.lot tbody { display: block; }
  table.lot tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) 40px; gap: 6px; padding: 10px; border-bottom: 1px solid var(--trait); }
  table.lot td { padding: 0; border: 0; width: auto !important; }
  table.lot td.numero { display: none; }
  table.lot td.ref { grid-column: 1 / 4; grid-row: 1; }
  table.lot td.retirer { grid-column: 4; grid-row: 1; }
  table.lot td.prix { grid-row: 2; }
  table.lot td.prix input { font-size: 14px; padding: 9px 8px; }
  .creation { grid-template-columns: 48px minmax(0, 1fr); gap: 8px 12px; }
  .creation .vignette { width: 48px; height: 48px; grid-row: span 2; }
  .creation .pastille { justify-self: start; }
  .actions-ligne { grid-column: 2; justify-content: flex-start; min-width: 0; }
  .onglets .filtre { margin-left: 0; width: 100%; }
  .onglets .filtre input { width: 100%; }
  .actions { margin: 26px -16px -24px; flex-wrap: wrap; padding: 10px 16px; gap: 6px 12px; }
  .actions button[value=publier] { flex: 1; }
  .actions .note { display: none; }
  button, .bouton { white-space: normal; }
  .formulaire-recherche aside { order: -1; }
  .formulaire-recherche .resultats { order: 1; }
  .badges { grid-template-columns: 1fr; }
  .grille-prix { grid-template-columns: 1fr 1fr; }
  .outils > summary { padding: 12px 10px; }
  .pause-file .barre { padding: 10px 16px; }
  .masquer-mobile { display: none; }
  .source-entete .note { display: none; }
}

/* ==========================================================================
   Eurocom fiches · mini design system v1
   À coller À LA FIN de app.css : reprend les classes existantes (aucun
   renommage obligatoire) et en ajoute quelques-unes (.discret, .file,
   .carte-pied, .aide, .evitement, .avancement).
   ========================================================================== */

/* 1. Jetons ---------------------------------------------------------------- */
:root {
  /* Marque. Le rouge sert à : action principale, échec/alerte, compteur
     « à traiter », repère « vous êtes ici ». Rien d'autre. */
  --rouge: #cf1717;            /* 5,5:1 sur blanc ; blanc dessus 5,5:1 */
  --rouge-fonce: #a51010;      /* survol, texte d'erreur (7,8:1) */
  --rouge-pale: #fcecec;       /* fond d'erreur UNIQUEMENT */
  --noir: #181519;             /* titres, secondaire, état « à faire » */

  /* Neutres */
  --texte: #2a262c;
  --gris: #6a636e;             /* texte secondaire, >= 5,1:1 partout */
  --gris-doux: #716a75;        /* aides, facultatif, placeholders (>= 4,6:1) */
  --gris-clair: #9b949f;       /* décor seulement : 2,9:1, jamais du texte */
  --bord-champ: #8f8893;       /* contour de champ, 3,4:1 (WCAG 1.4.11) */
  --trait: #e6e1e8;
  --trait-fort: #d4cdd7;
  --fond: #f4f1f5;             /* zones : survols, compteurs, encarts */
  --doux: #fdfaff;             /* fond charte : en-têtes de tableau, pieds */
  --surface: #ffffff;

  /* États */
  --ok: #1d7444;      --ok-pale: #e5f3ea;      --ok-texte: #124d2c;
  --attente: #8a5a00; --attente-pale: #fff3d6; --attente-texte: #5c3d00; --attente-trait: #b07d00;
  --ko-texte: #7d0c0c;

  /* Texte : 12 px minimum */
  --t-xs: 12px; --t-s: 13px; --t-m: 15px; --t-l: 17px; --t-xl: 21px; --t-2xl: 26px;
  --capitales: .08em;

  /* Espacements, base 4 */
  --e-1: 4px; --e-2: 8px; --e-3: 12px; --e-4: 16px; --e-5: 24px; --e-6: 32px; --e-7: 48px;

  /* Formes */
  --rayon: 3px; --rayon-carte: 4px; --rayon-rond: 999px;
  --ombre: 0 1px 2px rgba(24, 21, 25, .05), 0 6px 24px -12px rgba(24, 21, 25, .18);
  --ombre-haute: 0 12px 32px -12px rgba(24, 21, 25, .30), 0 1px 3px rgba(24, 21, 25, .08);
  --cible: 44px;
  --entete-h: 72px;            /* en-tête collant : 68 + liseré 4 */
}

/* 2. Socle : focus, évitement, masquage ------------------------------------ */
html { scroll-padding-top: calc(var(--entete-h) + var(--e-4)); scroll-padding-bottom: 96px; }
:focus-visible { outline: 2px solid var(--noir); outline-offset: 2px; }
input:focus, select:focus, textarea:focus { box-shadow: none; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--noir); outline-offset: 0; border-color: var(--noir); }
input[type=checkbox]:focus-visible { outline-offset: 2px; }
.sr, .sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.evitement { position: absolute; left: var(--e-4); top: -200px; z-index: 100; padding: var(--e-3) var(--e-4); background: var(--noir); color: #fff; font-weight: 600; border-radius: var(--rayon); }
.evitement:focus { top: var(--e-2); color: #fff; }
.colle { top: calc(var(--entete-h) + var(--e-5)); }

/* 3. Champs ----------------------------------------------------------------- */
label { font-size: 14px; letter-spacing: 0; text-transform: none; }
label .facultatif, .facultatif { color: var(--gris-doux); font-weight: 400; }
.aide { margin: var(--e-1) 0 0; font-size: var(--t-s); color: var(--gris); }
input[type=url], input[type=text], input[type=number], input[type=password], input[type=search], select, textarea {
  border-width: 1px; border-color: var(--bord-champ);
}
input[type=url], input[type=text], input[type=number], input[type=password], input[type=search], select:not([multiple]) { min-height: var(--cible); }
::placeholder, .reference input::placeholder { color: var(--gris-doux); opacity: 1; }
.reference input[type=text], .reference input[type=url] { border-right-width: 0; }
input[type=checkbox], input[type=radio] { accent-color: var(--noir); }
.case input { width: 18px; height: 18px; accent-color: var(--noir); }
.case:has(input:checked) { color: var(--noir); }

/* 4. Boutons : primaire (défaut), secondaire, discret, danger ---------------- */
button, .bouton { min-height: var(--cible); padding: 10px 20px; letter-spacing: var(--capitales); }
button.discret, .bouton.discret {
  background: transparent; border-color: transparent; color: var(--noir);
  text-transform: none; letter-spacing: 0; font-size: 14px; padding: 10px 12px;
  text-decoration: underline; text-decoration-color: var(--rouge); text-underline-offset: 3px;
}
button.discret:hover, .bouton.discret:hover { background: var(--fond); border-color: transparent; color: var(--rouge-fonce); }
button.danger, .bouton.danger { background: var(--surface); color: var(--rouge-fonce); border-color: var(--rouge); }
button.danger:hover, .bouton.danger:hover { background: var(--rouge); border-color: var(--rouge); color: #fff; }
button.petit, .bouton.petit { min-height: 36px; padding: 6px 12px; font-size: var(--t-xs); }
button.pleine, .bouton.pleine { width: 100%; }
button.lien { min-height: 0; }
button.icone { min-width: 36px; min-height: 36px; padding: 0; color: var(--gris); }
@media (pointer: coarse) {
  button.petit, .bouton.petit, button.icone { min-height: var(--cible); }
  button.icone { min-width: var(--cible); }
}
/* Chargement : <button aria-busy="true"> pendant l'envoi */
button[aria-busy="true"], .bouton[aria-busy="true"] { pointer-events: none; opacity: .85; }
button[aria-busy="true"]::after, .bouton[aria-busy="true"]::after {
  content: ""; width: 14px; height: 14px; border: 2px solid currentColor; border-right-color: transparent;
  border-radius: 50%; animation: tourne .8s linear infinite;
}

/* 5. Pastilles d'état : une famille = une couleur, le texte dit l'état --------
   .pastille           neutre      (brouillon, rien trouvé)
   .pastille.file      en file d'attente  (point creux)
   .pastille.attente   en cours           (point qui pulse)
   .pastille.action    à traiter, page à choisir, à relire (noir plein)
   .pastille.ok        brouillon créé
   .pastille.ko        échec                                                   */
.pastille { gap: 6px; padding: 3px 10px; font-size: var(--t-xs); font-weight: 600; line-height: 1.45; text-transform: none; letter-spacing: 0; background: var(--fond); color: var(--gris); }
.pastille::before { width: 8px; height: 8px; }
.pastille.file { background: var(--surface); color: var(--gris); box-shadow: inset 0 0 0 1px var(--trait-fort); }
.pastille.file::before { background: transparent; box-shadow: inset 0 0 0 1.5px currentColor; }
.pastille.action, .pastille.relire { background: var(--noir); color: #fff; }
.pastille.ko { background: var(--rouge-pale); color: var(--rouge-fonce); }

/* 6. Cartes ----------------------------------------------------------------- */
.carte { border-radius: var(--rayon-carte); }
.carte > :first-child { margin-top: 0; }
.carte > :last-child:not(.actions) { margin-bottom: 0; }
.carte > h2:first-child, .carte > h3:first-child:not(.titre-echec), .carte-titre {
  display: flex; align-items: center; gap: 10px; margin: 0 0 var(--e-4);
  font-size: 14px; letter-spacing: .1em; text-transform: uppercase; color: var(--noir);
}
.carte > h3:first-child:not(.titre-echec)::before, .carte-titre::before { content: ""; width: 22px; height: 3px; background: var(--rouge); flex-shrink: 0; }
.carte-pied {
  display: flex; flex-wrap: wrap; gap: var(--e-2); align-items: center;
  margin: var(--e-5) calc(-1 * var(--e-5)) calc(-1 * var(--e-5)); padding: var(--e-4) var(--e-5);
  border-top: 1px solid var(--trait); background: var(--doux); border-radius: 0 0 var(--rayon-carte) var(--rayon-carte);
}
.carte.encart { box-shadow: none; background: var(--doux); }

/* 7. Onglets : filtres « Créations » et onglets de saisie -------------------- */
.onglets, .onglets-saisie { display: flex; gap: 0; border-bottom: 1px solid var(--trait); }
.onglets a, .onglets-saisie button {
  display: inline-flex; align-items: center; gap: var(--e-2); min-height: var(--cible);
  padding: 0 var(--e-3); white-space: nowrap; background: none; border: 0; border-radius: 0;
  border-bottom: 3px solid transparent; margin-bottom: -1px;
  font-size: var(--t-xs); font-weight: 600; letter-spacing: var(--capitales); text-transform: uppercase;
  color: var(--gris); text-decoration: none;
}
.onglets a:hover, .onglets-saisie button:hover { background: none; color: var(--noir); }
.onglets a.actif, .onglets a[aria-current="page"], .onglets-saisie button[aria-selected="true"] { color: var(--noir); border-bottom-color: var(--rouge); }
.onglets .compteur { min-width: 22px; padding: 1px 7px; border-radius: var(--rayon-rond); background: var(--trait); color: var(--noir); font-size: var(--t-xs); letter-spacing: 0; text-align: center; }
.onglets a.actif .compteur, .onglets a[aria-current="page"] .compteur { background: var(--noir); color: #fff; }
.onglets a.alerte .compteur { background: var(--rouge); color: #fff; }

/* 8. Coche « Mode auto » en interrupteur (HTML actuel ; ajouter role="switch")  */
.mode-auto {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--e-3); align-items: start;
  padding: var(--e-3) var(--e-4); border: 1px solid var(--trait-fort); border-left: 4px solid var(--trait-fort);
  border-radius: var(--rayon); background: var(--surface); font-size: 14px; line-height: 1.5;
}
.mode-auto input[type=checkbox] {
  --pouce: var(--bord-champ);
  appearance: none; -webkit-appearance: none; flex-shrink: 0; width: 46px; height: 26px; margin: 0;
  border: 1.5px solid var(--bord-champ); border-radius: var(--rayon-rond); cursor: pointer;
  background: var(--surface) radial-gradient(circle, var(--pouce) 0 8px, transparent 8.5px) no-repeat left center / 23px 23px;
  transition: background-position .15s, background-color .15s, border-color .15s;
}
.mode-auto input[type=checkbox]:checked { --pouce: #fff; background-color: var(--noir); border-color: var(--noir); background-position: right center; }
.mode-auto strong { font-size: var(--t-m); }
.mode-auto.active, .mode-auto:has(input:checked) { border-color: var(--noir); border-left-color: var(--rouge); background: var(--surface); box-shadow: var(--ombre); }

/* 9. Ligne de liste avec vignette (.creation) -------------------------------- */
.creation { position: relative; gap: var(--e-2) var(--e-4); }
.creation:hover { background: #fcfbfd; }
.creation.etat-action { box-shadow: inset 4px 0 0 var(--noir); }
.creation.etat-ko { box-shadow: inset 4px 0 0 var(--rouge); }
.creation .vignette { background: var(--doux); }
.creation .vignette span { color: var(--gris); font-size: var(--t-xs); letter-spacing: var(--capitales); }
.creation .titre { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; white-space: normal; overflow: hidden; }
.creation .titre::after { content: ""; position: absolute; inset: 0; }   /* toute la ligne est cliquable */
.creation .pastille, .creation .actions-ligne { position: relative; z-index: 1; }
.creation .meta { font-size: var(--t-s); }
.etiquette-auto { font-size: var(--t-xs); color: var(--noir); background: var(--fond); border: 0; border-radius: 2px; padding: 1px 6px; letter-spacing: var(--capitales); }

/* 10. Bandeaux de notification (classes existantes) -------------------------- */
.info, .succes, .avertissement, .erreur {
  position: relative; padding: var(--e-3) var(--e-4) var(--e-3) 46px;
  border: 1px solid; border-left-width: 4px; border-radius: var(--rayon); font-size: var(--t-m);
}
.info::before, .succes::before, .avertissement::before, .erreur::before {
  position: absolute; left: 13px; top: 14px; width: 20px; height: 20px; border-radius: 50%;
  display: grid; place-items: center; font: 700 12px/1 var(--police); color: #fff;
}
.info { background: var(--doux); border-color: var(--trait-fort); border-left-color: var(--noir); color: var(--texte); }
.info::before { content: "i"; background: var(--noir); }
.succes { background: var(--ok-pale); border-color: #b9dcc7; border-left-color: var(--ok); color: var(--ok-texte); }
.succes::before { content: "✓"; background: var(--ok); }
.avertissement { background: var(--attente-pale); border-color: #f0d89a; border-left-color: var(--attente-trait); color: var(--attente-texte); }
.avertissement::before { content: "!"; background: var(--attente-trait); }
.erreur { background: var(--rouge-pale); border-color: #f2c4c4; border-left-color: var(--rouge); color: var(--ko-texte); }
.erreur::before { content: "!"; background: var(--rouge); }
.info a, .succes a, .avertissement a, .erreur a { color: inherit; font-weight: 600; }

/* 11. Étapes : « en cours » noir, « échec » rouge ---------------------------- */
.etapes li { color: var(--gris-doux); }
.etapes li.faite { color: var(--gris); }
.etapes li.faite::before { content: "✓"; background: var(--surface); border-color: var(--noir); color: var(--noir); }
.etapes li.active { color: var(--noir); box-shadow: inset 0 -3px 0 var(--rouge); }
.etapes li.pause { color: var(--attente-texte); background: var(--attente-pale); box-shadow: inset 0 -3px 0 var(--attente-trait); }
.etapes li.pause::before { content: "⏸"; background: var(--attente-trait); border-color: var(--attente-trait); color: #fff; }
.etapes li.active::before { background: var(--noir); border-color: var(--noir); color: #fff; }
.etapes li.echec { color: var(--rouge-fonce); background: var(--rouge-pale); }
.etapes li.echec::before { content: "!"; background: var(--rouge); border-color: var(--rouge); color: #fff; }

/* 12. Petits textes, tableaux, vides, avancement ----------------------------- */
th, table.lot th { font-size: var(--t-xs); }
.drapeau, .role { font-size: var(--t-xs); }
td { overflow-wrap: anywhere; }
.vide { padding: var(--e-5); text-align: center; font-size: var(--t-m); }
.vide a { font-weight: 600; }
progress.avancement { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border: 0; border-radius: var(--rayon-rond); background: var(--fond); overflow: hidden; }
progress.avancement::-webkit-progress-bar { background: var(--fond); }
progress.avancement::-webkit-progress-value { background: var(--noir); }
progress.avancement::-moz-progress-bar { background: var(--noir); }

/* 13. Mouvement réduit -------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

.barre-onglets { display: flex; align-items: flex-end; gap: 12px 24px; flex-wrap: wrap; border-bottom: 1px solid var(--trait); margin: 8px 0 18px; }
.barre-onglets .onglets { border-bottom: 0; margin: 0; }
.filtre-creations { margin-left: auto; padding-bottom: 8px; }
.filtre-creations input { width: 260px; }
@media (max-width: 760px) { .filtre-creations { margin-left: 0; width: 100%; } .filtre-creations input { width: 100%; } }
/* Charte : fond de page clair (#FDFAFF) */
body:not(.connexion) { background: var(--doux); }

/* Mobile (audit visuel, §2) */
@media (max-width: 900px) {
  .infos-fiche { order: -1; }                        /* recherche : prix avant les résultats */
  .etapes { flex-direction: row; }                   /* étapes compactes */
  .etapes li + li { border-top: 0; border-left: 1px solid var(--trait); }
  .etapes li { flex: 0 0 auto; padding: 10px 12px; font-size: 0; gap: 0; }
  .etapes li::before { font-size: 12px; }
  .etapes li.active, .etapes li.echec, .etapes li.pause { flex: 1 1 auto; font-size: 12px; gap: 10px; }
}
@media (max-width: 760px) {
  .entete { position: static; }                      /* 117 px rendus à l'écran */
  html { scroll-padding-top: var(--e-4); }
  .navigation { overflow: visible; }                 /* 3 entrées : plus besoin de défiler */
  .navigation a, .navigation .outils > summary { padding: 12px 10px; }
  .navigation .outils .menu { position: absolute; left: auto; right: 0; top: 100%; }
  /* Pas de zoom automatique d'iOS : 16 px minimum dans tous les champs */
  input[type=url], input[type=text], input[type=number], input[type=password], input[type=search], select, textarea,
  table.lot input, table.lot td.prix input, .adresse-source input, .onglets .filtre input,
  .photo textarea, .photo .ligne input[type=number] { font-size: 16px; }
  .reference input[type=text] { font-size: 19px; }
  .reference input[type=text], .reference input[type=url] { border-right-width: 1px; border-color: var(--bord-champ); }
  .carte, .nouvelle { padding: var(--e-4); }
  .actions {
    margin: var(--e-5) calc(-1 * var(--e-4)) calc(-1 * var(--e-4));
    padding: var(--e-3) var(--e-4) calc(var(--e-3) + env(safe-area-inset-bottom));
    display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--e-2); flex-wrap: nowrap;
  }
  .actions button { white-space: normal; padding: 8px 12px; line-height: 1.2; }
  .actions .case.doublon { grid-column: 1 / -1; font-size: 14px; }  /* la case de confirmation prend toute la ligne */
  .actions > .bulle-aide { display: none; }
  .photo-barre .icone-seule { min-width: 36px; min-height: 36px; }
  .grille-saisie > .champ:first-child { grid-column: 1 / -1; }
  .boutons > button, .boutons > .bouton { flex: 1 1 100%; }
  .resume { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-2); }
  .resume .pastille { white-space: normal; }
  .onglets, .onglets-saisie { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .creation .titre { font-size: var(--t-m); }
  .vide { text-align: left; }
  textarea[rows] { max-height: 55vh; }
  .photo .ligne input[type=number] { min-height: var(--cible); }
  summary { padding-block: 10px; }
  table.lot td.prix::before { content: attr(data-libelle); display: block; font-size: var(--t-xs); font-weight: 600; color: var(--gris); margin-bottom: 2px; }
}
@media (pointer: coarse) {
  .case { min-height: var(--cible); }
  .case input { width: 22px; height: 22px; }
}


/* Bulles d'aide « ? » */
.bulle-aide { position: relative; display: inline-flex; vertical-align: middle; margin-left: 4px; }
.infobulle { min-height: 0 !important; width: 20px; height: 20px; padding: 0; border-radius: 50%; border: 1px solid var(--bord-champ);
  background: var(--surface); color: var(--gris); font-size: 12px; font-weight: 700; line-height: 1; letter-spacing: 0; text-transform: none; cursor: help; }
.infobulle:hover { background: var(--noir); border-color: var(--noir); color: #fff; }
.bulle { position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); z-index: 50; width: max-content; max-width: 280px;
  background: var(--noir); color: #fff; font-size: 13px; font-weight: 400; line-height: 1.45; letter-spacing: 0; text-transform: none; text-align: left;
  padding: 9px 11px; border-radius: var(--rayon); box-shadow: var(--ombre-haute); opacity: 0; visibility: hidden; transition: opacity .12s; pointer-events: none; }
.bulle::after { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -5px; border: 5px solid transparent; border-top-color: var(--noir); }
.bulle-aide:hover .bulle, .infobulle:focus-visible + .bulle, .bulle-aide.ouverte .bulle { opacity: 1; visibility: visible; }
.bulle-aide.droite .bulle { left: auto; right: -8px; transform: none; }
.bulle-aide.droite .bulle::after { left: auto; right: 13px; }
.bulle-aide.gauche .bulle { left: -8px; transform: none; }
.bulle-aide.gauche .bulle::after { left: 13px; }
@media (max-width: 760px) { .bulle { max-width: 240px; } .infobulle { width: 24px; height: 24px; } }

/* Page d'aide */
.doc { max-width: 820px; }
.doc section { margin-bottom: 28px; }
.doc h2 { margin-top: 0; }
.doc p, .doc li { font-size: 15px; }
.doc ol, .doc ul { padding-left: 20px; }
.doc li + li { margin-top: 6px; }
.doc .tableau td:first-child { white-space: nowrap; }
.sommaire { display: flex; gap: 8px 18px; flex-wrap: wrap; margin: 0 0 26px; padding: 0; list-style: none; font-size: 14px; }
.danger-zone { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; background: var(--surface);
  border: 1px solid var(--trait); border-radius: var(--rayon); padding: 10px 14px; margin: 0 0 16px; font-size: 14px; }

/* Modèles de page (superadmin) */
pre.code { background: #f6f3f8; border: 1px solid var(--trait); border-radius: 8px; padding: 14px; overflow: auto; max-height: 70vh; font-size: 12.5px; line-height: 1.45; white-space: pre; }
tr.inactif td { color: var(--gris, #6b6570); }
tr.inactif td a { color: inherit; }
.apercu-lecture { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 18px; margin: 14px 0; }
.apercu-lecture dt { font-weight: 600; }
.apercu-lecture dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.vignettes { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.vignettes img { width: 72px; height: 72px; object-fit: contain; background: #fff; border: 1px solid var(--trait); border-radius: 6px; }
.ligne-formulaire { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

/* 10. Icônes Material Symbols et badges (11/2026) ------------------------------
   Icônes : planche static/icones.svg (Material Symbols Rounded 400, Apache 2.0).
   Badges : icône + libellé court ; la phrase d'explication s'ouvre en bulle.     */
.icone { width: 1.25em; height: 1.25em; fill: currentColor; flex: none; vertical-align: -0.28em; }
.avec-icone { display: inline-flex; align-items: center; gap: 6px; }
.avec-icone .icone { width: 18px; height: 18px; vertical-align: 0; }
.infobulle { display: inline-grid; place-items: center; font-size: 0; border: 0; background: none; color: var(--gris); }
.infobulle .icone { width: 18px; height: 18px; }
.infobulle:hover { background: none; color: var(--noir); }

.pastille .icone { width: 15px; height: 15px; margin-left: -2px; vertical-align: 0; }
.pastille:has(.icone)::before { display: none; }
.pastille.attente .icone { animation: tourne 1.1s linear infinite; }
@keyframes tourne { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .pastille.attente .icone { animation: none; } }
.pastille { padding: 3px 10px 3px 8px; border-radius: 999px; }
.pastille.action, .pastille.relire { background: var(--noir); color: #fff; }
.pastille.ok { background: var(--ok-pale); color: #17643a; }
.pastille.ko { background: var(--rouge-pale); color: var(--rouge-fonce); }
.pastille.attente { background: var(--attente-pale); color: #7a5200; }
.pastille.file { background: var(--surface); color: var(--gris); box-shadow: inset 0 0 0 1px var(--trait-fort); }
button.pastille { min-height: 0 !important; border: 0; font: inherit; font-size: var(--t-xs); font-weight: 600; line-height: 1.45; letter-spacing: 0; text-transform: none; cursor: help; }
button.pastille:hover { filter: brightness(1.12); }
.badge-aide { margin-left: 0; }

/* Ligne de Créations : une ligne de titre, une ligne d'état, rien d'autre ; tout aligné */
.creation { grid-template-columns: 48px minmax(0, 1fr) auto; align-items: center; min-height: 72px; padding: 10px 16px; }
.creation .vignette { width: 48px; height: 48px; color: var(--gris-clair); }
.creation .vignette .icone { width: 22px; height: 22px; }
.creation .vignette img + .icone { display: none; }
.creation .titre { -webkit-line-clamp: 1; font-size: 15px; line-height: 1.35; }
.creation .meta { margin-top: 4px; gap: 4px 10px; color: var(--gris); font-size: 13px; }
.marque-auto { display: inline-flex; color: var(--rouge); }
.marque-auto .icone { width: 16px; height: 16px; }
.creation .raison { display: none; }
.actions-ligne { min-width: 0; gap: 4px; }
.actions-ligne .bouton.petit, .actions-ligne button.petit { padding: 6px 10px 6px 12px; font-size: 12px; min-height: 36px; letter-spacing: 0; text-transform: none; }
.actions-ligne .bouton.secondaire, .actions-ligne button.secondaire { border-color: var(--trait-fort); }
.actions-ligne .bouton.secondaire:hover, .actions-ligne button.secondaire:hover { border-color: var(--noir); background: var(--noir); color: #fff; }
.menu-ligne > summary { font-size: 0; }
.menu-ligne > summary .icone { width: 22px; height: 22px; }
.menu-ligne .menu a, .menu-ligne .menu button { display: flex; align-items: center; gap: 10px; }
.menu-ligne .menu .icone { width: 18px; height: 18px; color: var(--gris); }
/* Menu « ⋯ » ouvert : au-dessus des lignes suivantes (sinon le clic part sur la ligne d'en dessous) */
.creation:has(.menu-ligne[open]) { z-index: 30; }
.creation .actions-ligne:has(.menu-ligne[open]) { z-index: 31; }
.creation:has(.badge-aide.ouverte), .creation:has(.badge-aide:hover) { z-index: 30; }
@media (max-width: 760px) {
  .creation { grid-template-columns: 40px minmax(0, 1fr) auto; gap: 4px 10px; padding: 10px 12px; }
  .creation .vignette { width: 40px; height: 40px; grid-row: auto; }
  .creation .actions-ligne { grid-column: auto; justify-content: flex-end; }
  .creation .titre { font-size: 15px; }
  .creation .meta { font-size: 12px; gap: 2px 8px; }
  .actions-ligne .bouton.petit, .actions-ligne button.petit { font-size: 0; padding: 0; width: 40px; justify-content: center; }
  .actions-ligne .bouton.petit .icone, .actions-ligne button.petit .icone { width: 20px; height: 20px; }
}
.etapes-guide { list-style: none; counter-reset: etape; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; padding: 0; margin: 0 0 22px; }
.etapes-guide li { counter-increment: etape; background: var(--surface); border: 1px solid var(--trait); border-radius: var(--rayon); padding: 12px 14px 12px 50px; position: relative; display: flex; flex-direction: column; gap: 2px; }
.etapes-guide li::before { content: counter(etape); position: absolute; left: 14px; top: 12px; width: 24px; height: 24px; border-radius: 50%; background: var(--noir); color: #fff; font-weight: 700; font-size: 13px; display: grid; place-items: center; }
.etapes-guide span { color: var(--gris); font-size: 13px; }
td.droite { text-align: right; white-space: nowrap; }

/* Bulle d'un badge : alignée sur le début du badge (jamais hors de l'écran à gauche) */
.badge-aide .bulle { left: 0; transform: none; }
.badge-aide .bulle::after { left: 16px; margin-left: 0; }
/* Séparateurs discrets entre les informations d'une ligne (pas après le badge) */
.creation .meta > span:not(.pastille):not(.bulle-aide):not(.marque-auto) + span:not(.marque-auto)::before { content: "·"; margin-right: 8px; color: var(--gris-clair); }
.tableau .bouton.petit { text-transform: none; letter-spacing: 0; font-size: 13px; }

/* Titres longs (adresse d'une fiche pas encore lue) : jamais de débordement horizontal sur mobile */
h1, h2, .titre-echec { overflow-wrap: anywhere; }

/* Fenêtre de confirmation (remplace confirm() du navigateur) */
dialog.confirmation { border: 0; border-radius: 12px; padding: 22px 22px 18px; width: min(420px, calc(100% - 32px)); box-shadow: var(--ombre-haute); color: var(--texte); }
dialog.confirmation::backdrop { background: rgba(24, 21, 25, .45); }
dialog.confirmation p { margin: 0 0 20px; font-size: 15px; line-height: 1.5; }
dialog.confirmation .boutons { justify-content: flex-end; margin: 0; }

/* Bulles placées en position fixe par le script (base.html) : rien ne les coupe (tableaux, listes) */
.bulle { position: fixed; top: 0; left: 0; bottom: auto; transform: none; z-index: 1000; }
.bulle::after { left: var(--fleche, 50%); margin-left: -5px; }
.bulle.dessous::after { top: auto; bottom: 100%; border-top-color: transparent; border-bottom-color: var(--noir); }
.bulle-aide.droite .bulle, .bulle-aide.gauche .bulle, .badge-aide .bulle { left: 0; right: auto; transform: none; }
.bulle-aide.droite .bulle::after, .bulle-aide.gauche .bulle::after, .badge-aide .bulle::after { left: var(--fleche, 16px); right: auto; margin-left: -5px; }
th .bulle { text-transform: none; letter-spacing: 0; font-weight: 400; }
.infobulle-badge:focus-visible + .bulle { opacity: 1; visibility: visible; }

/* Barème d'éco-participation (page modifiable par le magasin) */
.entete-page { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.entete-page h1 { margin: 0; }
.entete-page .releve { display: flex; align-items: center; gap: 10px; margin: 0; }
.bareme table { min-width: 760px; }
.bareme thead th { position: sticky; top: 0; z-index: 2; background: var(--fond); }
.bareme tbody.rayon { border-top: 1px solid var(--trait-fort); }
.bareme th[scope=rowgroup], .bareme tbody th[scope=row] { vertical-align: top; text-align: left; width: 22%; padding-top: 14px; }
.bareme .nom-rayon { display: block; font-weight: 600; color: var(--noir); }
.bareme .chemin { display: block; font-size: 12px; color: var(--gris); font-weight: 400; margin-top: 2px; }
.bareme td { vertical-align: middle; padding-top: 8px; padding-bottom: 8px; }
.bareme .condition { white-space: nowrap; }
.bareme .condition select { width: auto; min-width: 104px; padding: 7px 28px 7px 10px; font-size: 14px; }
.bareme .tranche, .bareme [data-pour=mot] { display: inline-flex; align-items: center; gap: 6px; margin-left: 6px; }
.bareme .tranche input { width: 78px; padding: 7px 8px; font-size: 14px; }
.bareme [data-pour=mot] input { width: 120px; padding: 7px 8px; font-size: 14px; }
.bareme [hidden] { display: none !important; }
.bareme .unite { color: var(--gris); font-size: 13px; }
.champ-euro { display: inline-flex; align-items: center; border: 1px solid var(--bord-champ); border-radius: var(--rayon); background: var(--surface); }
.champ-euro input { border: 0; width: 84px; padding: 7px 4px 7px 10px; text-align: right; font-size: 15px; font-variant-numeric: tabular-nums; background: none; }
.champ-euro input:focus { outline: none; }
.champ-euro:focus-within { border-color: var(--noir); box-shadow: 0 0 0 3px rgba(24, 21, 25, .12); }
.champ-euro span { padding: 0 10px 0 2px; color: var(--gris); }
.bareme .valide { text-align: center; }
.interrupteur input[type=checkbox] {
  --pouce: var(--bord-champ); appearance: none; -webkit-appearance: none; width: 42px; height: 24px; margin: 0; vertical-align: middle;
  border: 1.5px solid var(--bord-champ); border-radius: 999px; cursor: pointer;
  background: var(--surface) radial-gradient(circle, var(--pouce) 0 7px, transparent 7.5px) no-repeat left center / 21px 21px;
  transition: background-position .15s, background-color .15s, border-color .15s;
}
.interrupteur input[type=checkbox]:checked { --pouce: #fff; background-color: var(--ok, #1d7a46); border-color: var(--ok, #1d7a46); background-position: right center; }
.interrupteur input:focus-visible { outline: 2px solid var(--noir); outline-offset: 2px; }
.bareme tr.a-valider td.montant .champ-euro { border-color: #e0a100; background: var(--attente-pale); }
.bareme tr.a-supprimer td { opacity: .45; text-decoration: line-through; }
.bareme .site span { display: inline-block; margin: 0 8px 2px 0; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bareme .site small { color: var(--gris); }
.bareme .site .hors-bareme { color: #7a5200; background: var(--attente-pale); border-radius: 4px; padding: 0 4px; }
.bareme td.suppr { width: 44px; text-align: right; }
button.icone-seule { min-height: 0 !important; width: 36px; height: 36px; padding: 0; display: inline-grid; place-items: center; border: 0; background: none; color: var(--gris); }
button.icone-seule:hover { background: var(--fond); color: var(--rouge); }
button.icone-seule .icone { width: 20px; height: 20px; }
.bareme tr.ajout td { padding: 2px 16px 10px; border-bottom: 0; }
.bareme tr.ajout .lien { font-size: 13px; color: var(--gris); text-decoration: none; }
.bareme tr.ajout .lien:hover { color: var(--rouge); }
.barre-enregistrer { position: sticky; bottom: 0; z-index: 5; display: flex; justify-content: flex-end; padding: 12px 0; background: linear-gradient(transparent, var(--fond-page, #FDFAFF) 35%); }
.pastille.petite { padding: 1px 7px; font-size: 11px; }
.bareme td.site { vertical-align: top; padding-top: 14px; width: 15%; }
@media (max-width: 760px) {
  .bareme { border: 0; box-shadow: none; overflow: visible; background: none; }
  .bareme table { min-width: 0; background: none; }
  .bareme thead { display: none; }
  .bareme tbody.rayon { display: block; background: var(--surface); border: 1px solid var(--trait); border-radius: var(--rayon); margin-bottom: 12px; padding: 10px 12px; }
  .bareme tr { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--trait); }
  .bareme tr:last-child { border-bottom: 0; }
  .bareme th[scope=rowgroup], .bareme tbody th[scope=row] { display: block; width: 100%; padding: 0 0 4px; border: 0; }
  .bareme td { display: block; border: 0; padding: 0; }
  .bareme td.site { width: 100%; padding: 0 0 4px; }
  .bareme td.site:empty { display: none; }
  .bareme .condition { white-space: normal; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; width: 100%; }
  .bareme .tranche, .bareme [data-pour=mot] { margin-left: 0; }
  .bareme td.montant { margin-right: auto; }
  .bareme tr.ajout td { padding: 0; }
}

/* Journal d'utilisation (superadmin) */
.filtres-journal { display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: end; margin-bottom: 16px; }
.filtres-journal label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 600; color: var(--gris); text-transform: none; letter-spacing: 0; }
.filtres-journal select { min-width: 170px; padding: 8px 30px 8px 10px; font-size: 14px; }
.totaux-journal { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin-bottom: 18px; }
.totaux-journal > div { background: var(--surface); border: 1px solid var(--trait); border-radius: var(--rayon); padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; }
.totaux-journal span { font-size: 12px; color: var(--gris); }
.totaux-journal strong { font-size: 20px; font-variant-numeric: tabular-nums; color: var(--noir); }
.totaux-journal small { color: var(--gris); font-size: 12px; }
.journal table { font-size: 13.5px; min-width: 1040px; }
.journal .objet { max-width: 260px; overflow-wrap: anywhere; }
.journal .res { max-width: 300px; }
.journal td { vertical-align: top; padding-top: 9px; padding-bottom: 9px; }
.journal .nombre { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.journal .date { white-space: nowrap; color: var(--gris); }
.journal tr.en-echec td.res { color: var(--rouge-fonce); }
@media (max-width: 640px) { .filtres-journal label, .filtres-journal select { width: 100%; } .totaux-journal { grid-template-columns: 1fr 1fr; } .totaux-journal strong { font-size: 17px; } }


/* Recherche : deux niveaux (nos sources, puis les autres sites à essayer) */
.niveau-sources { font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--gris); margin: 22px 0 10px; display: flex; align-items: center; gap: 6px; }
.resultats > .niveau-sources:first-of-type { margin-top: 6px; }
.resultat.essai { border-left-color: var(--attente-trait); }
.resultat.fabricant { border-left-color: var(--noir); }
.drapeau.fabricant { background: var(--noir); }

/* Photos : ordre par glisser-déposer, ajout de photos */
.photo[draggable] { cursor: grab; position: relative; }
.photo.deplacee { opacity: .45; outline: 2px dashed var(--trait-fort); }
.photo-barre { display: flex; align-items: center; gap: 6px; margin: -2px 0 6px; min-height: 28px; }
.photo-barre .poignee { color: var(--gris); display: inline-flex; }
.photo-barre .pastille { font-size: 11px; padding: 2px 7px; }
.photo-barre .deplacer { margin-left: auto; display: inline-flex; gap: 4px; }
.photo-barre .icone-seule { min-width: 28px; min-height: 28px; padding: 0 6px; font-size: 18px; line-height: 1; background: #fff; color: var(--texte); border: 1px solid var(--trait); }
.photo-barre .icone-seule:hover { background: var(--doux); color: var(--noir); border-color: var(--trait-fort); }
.photo.ajout { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center; min-height: 250px;
  border: 2px dashed var(--trait-fort); background: var(--doux); cursor: pointer; color: var(--texte); transition: background .15s, border-color .15s; }
.photo.ajout .icone { width: 34px; height: 34px; color: var(--gris); }
.photo.ajout input[type=file] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.photo.ajout:hover, .photo.ajout.survol, .photo.ajout:focus-within { border-color: var(--noir); background: #fff; }
.photo.ajout.envoi { pointer-events: none; opacity: .7; }
.photo.ajout .note { max-width: 200px; }

/* Relecture : ce que la page a donné, fiche complétée à la main */
.lecture-page { border: 1px solid var(--trait); border-left: 4px solid var(--attente-trait); border-radius: var(--rayon); padding: 16px 18px; margin-bottom: 26px; background: var(--doux); }
.lecture-entete { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; margin-bottom: 10px; }
.lecture-entete h2 { font-size: 18px; }
.lecture-puces { list-style: none; padding: 0; margin: 0 0 14px; display: flex; flex-wrap: wrap; gap: 8px; }
.lecture-puces li { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 20px; background: #fff; border: 1px solid var(--trait); font-size: 13px; }
.lecture-puces li .icone { width: 16px; height: 16px; }
.lecture-puces li.ok .icone { color: var(--ok); }
.lecture-puces li.ko { border-color: #f0d89a; background: var(--attente-pale); color: var(--attente-texte); }
.lecture-puces li.ko .icone { color: var(--attente-trait); }
.lecture-puces li.neutre { color: var(--gris); }
.lecture-page textarea { min-height: 120px; }

.suggestion { display: flex; align-items: center; justify-content: space-between; gap: 10px 18px; flex-wrap: wrap; }
.suggestion p { flex: 1 1 320px; }
.lecture-page.complete { border-left-color: var(--ok); padding: 12px 16px; }
.lecture-page.complete .lecture-puces { margin-bottom: 0; }
.lecture-page textarea::placeholder { color: #a3a3ad; font-style: italic; }

/* ---------- Aide ---------- */
.aide-page { max-width: 1160px; }
.aide-entete { margin-bottom: 28px; max-width: 760px; }
.aide-entete .surtitre { margin: 0; font-size: 11px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--rouge); }
.aide-entete h1 { margin: 4px 0 8px; }
.aide-entete .chapeau { font-size: 17px; line-height: 1.5; color: var(--gris); margin: 0; }
.aide-grille { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 36px; align-items: start; }
.aide-sommaire { position: sticky; top: 96px; display: flex; flex-direction: column; gap: 2px; }
.aide-sommaire .titre { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--gris); margin: 0 0 8px 12px; }
.aide-sommaire a { display: flex; align-items: center; gap: 10px; padding: 7px 12px; border-left: 2px solid transparent; text-decoration: none; color: var(--texte); font-size: 14px; line-height: 1.3; border-radius: 0 var(--rayon) var(--rayon) 0; }
.aide-sommaire a .icone { width: 18px; height: 18px; color: var(--gris-clair); flex: none; }
.aide-sommaire a:hover { background: var(--surface); color: var(--noir); }
.aide-sommaire a.actif { border-left-color: var(--rouge); background: var(--surface); color: var(--noir); font-weight: 600; }
.aide-sommaire a.actif .icone { color: var(--rouge); }
.aide-contenu { display: flex; flex-direction: column; gap: 22px; min-width: 0; max-width: 880px; }
.aide-contenu > section { margin: 0; scroll-margin-top: 96px; }
.aide-section > h2 { margin-top: 0; }
.aide-section > p { margin-top: 0; }
.aide-pictogramme { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 8px; background: var(--fond); color: var(--noir); flex: none; }
.aide-pictogramme .icone { width: 20px; height: 20px; }

.aide-etapes { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; counter-reset: etape; }
.aide-etapes li { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 16px; margin: 0; border: 1px solid var(--trait); border-radius: var(--rayon); background: var(--doux); counter-increment: etape; }
.aide-etapes li::before { content: counter(etape); position: absolute; top: 12px; right: 14px; font-size: 22px; font-weight: 700; color: var(--trait-fort); line-height: 1; }
.aide-etapes li:not(:last-child)::after { content: "›"; position: absolute; right: -12px; top: 50%; transform: translateY(-50%); width: 10px; text-align: center; color: var(--gris-clair); font-size: 20px; }
.aide-etapes li .aide-pictogramme { margin-bottom: 8px; background: #fff; border: 1px solid var(--trait); }
.aide-etapes strong { color: var(--noir); font-size: 15px; line-height: 1.3; }
.aide-etapes li > span:last-child { font-size: 14px; color: var(--gris); line-height: 1.45; }

.aide-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.aide-options > div { border: 1px solid var(--trait); border-radius: var(--rayon); padding: 16px; }
.aide-options h3 { margin: 12px 0 4px; font-size: 15px; letter-spacing: 0; text-transform: none; }
.aide-options p { margin: 0; font-size: 14px; line-height: 1.5; }

.aide-encadre { display: flex; gap: 12px; padding: 14px 16px; margin: 0 0 18px; background: var(--doux); border: 1px solid var(--trait); border-left: 3px solid var(--noir); border-radius: var(--rayon); font-size: 14.5px; line-height: 1.55; }
.aide-encadre > .icone { width: 22px; height: 22px; flex: none; margin-top: 1px; color: var(--noir); }

.aide-liste { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 14px; }
.aide-liste li { display: flex; gap: 14px; align-items: flex-start; margin: 0; font-size: 15px; line-height: 1.55; }
.aide-liste li > div { padding-top: 2px; }
.aide-liste li > div > strong:first-child { display: block; margin-bottom: 1px; }
.aide-liste strong { color: var(--noir); }

.aide-motifs { list-style: none; padding: 0; margin: 0 0 16px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; }
.aide-motifs li { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 12px 0; margin: 0; border-top: 1px solid var(--trait); }
.aide-motifs li > span:last-child { font-size: 14px; color: var(--gris); line-height: 1.45; }

.aide-vues { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.aide-vues > div { border: 1px solid var(--trait); border-radius: var(--rayon); padding: 14px; }
.aide-vues p { margin: 10px 0 0; font-size: 14px; color: var(--gris); line-height: 1.45; }

.aide-etats td { vertical-align: top; font-size: 14px; }
.aide-etats td:first-child { white-space: nowrap; }

.aide-garanties { background: var(--noir); color: #e9e5eb; border-radius: var(--rayon); padding: 22px 26px; box-shadow: var(--ombre); }
.aide-garanties h2 { color: #fff; margin: 0 0 16px; }
.aide-garanties h2::before { display: none; }
.aide-garanties h2 .icone { width: 22px; height: 22px; color: #fff; }
.aide-garanties ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.aide-garanties li { display: flex; gap: 12px; align-items: flex-start; margin: 0; font-size: 15px; line-height: 1.5; }
.aide-garanties li .icone { width: 20px; height: 20px; flex: none; margin-top: 2px; color: #ff7b7b; }
.aide-garanties strong { color: #fff; }

.aide-outils { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.aide-outils a { display: grid; grid-template-columns: 36px minmax(0, 1fr); column-gap: 12px; row-gap: 2px; padding: 12px 14px; border: 1px solid var(--trait); border-radius: var(--rayon); text-decoration: none; color: var(--texte); transition: border-color .15s, background .15s; }
.aide-outils a .icone { grid-row: span 2; width: 22px; height: 22px; align-self: center; justify-self: center; color: var(--noir); }
.aide-outils a strong { color: var(--noir); font-size: 14.5px; }
.aide-outils a span { font-size: 13.5px; color: var(--gris); line-height: 1.4; }
.aide-outils a:hover { border-color: var(--trait-fort); background: var(--doux); }

@media (max-width: 980px) {
  .aide-grille { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .aide-sommaire { position: static; flex-direction: row; overflow-x: auto; gap: 6px; padding-bottom: 4px; scrollbar-width: none; }
  .aide-sommaire .titre { display: none; }
  .aide-sommaire a { flex: none; white-space: nowrap; border: 1px solid var(--trait); border-radius: 20px; background: var(--surface); padding: 6px 12px; }
  .aide-sommaire a.actif { border-color: var(--rouge); }
  .aide-etapes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .aide-etapes li::after { display: none; }
  .aide-vues { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .aide-entete .chapeau { font-size: 15px; }
  .aide-etapes, .aide-options, .aide-motifs, .aide-outils { grid-template-columns: minmax(0, 1fr); }
  .aide-etapes li { flex-direction: row; flex-wrap: wrap; align-items: center; column-gap: 12px; }
  .aide-etapes li .aide-pictogramme { margin: 0; }
  .aide-etapes li > span:last-child { flex-basis: 100%; }
  .aide-etats td:first-child { white-space: normal; }
  .aide-garanties { padding: 18px; }
}

/* ---------- Accueil ---------- */
.accueil-entete { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 4px 20px; margin-bottom: 20px; }
.accueil-entete h1 { margin: 0; }
.accueil-entete p { margin: 0; color: var(--gris); font-size: 15px; }

.bandeau-eco { position: relative; display: flex; align-items: center; gap: 14px 18px; flex-wrap: wrap; margin-bottom: 20px; padding: 14px 52px 14px 16px;
  background: var(--ok-pale); border: 1px solid #bfe0cb; border-left: 4px solid var(--ok); border-radius: var(--rayon); }
.bandeau-eco p { margin: 0; flex: 1 1 340px; font-size: 14.5px; }
.bandeau-eco-icone { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: #fff; color: var(--ok); flex: none; }
.bandeau-eco-icone .icone { width: 20px; height: 20px; }
.bandeau-eco .bouton { background: #fff; }
.bandeau-fermer { position: absolute; top: 8px; right: 8px; margin: 0; }
.bandeau-fermer .icone-seule { width: 32px; height: 32px; min-height: 0; padding: 0; display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 0; color: var(--gris); border-radius: 50%; }
.bandeau-fermer .icone-seule:hover { background: rgba(0, 0, 0, .06); color: var(--noir); }
.bandeau-fermer .icone { width: 18px; height: 18px; }

.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 24px; }
.kpi { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; background: var(--surface); border: 1px solid var(--trait); border-radius: var(--rayon);
  box-shadow: var(--ombre); text-decoration: none; color: var(--texte); transition: border-color .15s, transform .15s; min-width: 0; }
a.kpi:hover { border-color: var(--trait-fort); transform: translateY(-1px); }
.kpi-tete { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; letter-spacing: .4px; text-transform: uppercase; color: var(--gris); }
.kpi-tete .icone { width: 17px; height: 17px; color: var(--gris-clair); flex: none; }
.kpi-tete .bulle-aide { margin-left: auto; }
.kpi > b { font-size: 34px; line-height: 1.1; color: var(--noir); font-variant-numeric: tabular-nums; letter-spacing: -.5px; margin-top: 4px; }
.kpi-note { font-size: 13px; color: var(--gris); }
.kpi.alerte { border-color: #f1c4c4; box-shadow: inset 0 3px 0 var(--rouge), var(--ombre); }
.kpi.alerte > b, .kpi.alerte .kpi-tete .icone { color: var(--rouge); }

.accueil-grille { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 24px; align-items: start; margin-bottom: 40px; }
.accueil-grille > .carte { margin: 0; }
.activite h3 { margin-bottom: 18px; }
.barres { display: grid; grid-template-columns: repeat(14, minmax(0, 1fr)); gap: 5px; align-items: end; height: 110px; padding-bottom: 1px; border-bottom: 1px solid var(--trait); }
.barres .jour { height: max(var(--h), 3px); background: var(--noir); border-radius: 2px 2px 0 0; opacity: .85; transition: opacity .15s; }
.barres .jour.aujourdhui { background: var(--rouge); }
.barres .jour:hover { opacity: 1; }
.barres.vides .jour { background: var(--trait); }
.axe { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--gris-clair); margin-top: 6px; }
.activite-total { margin: 14px 0 0; font-size: 14px; color: var(--gris); }
.activite-total b { color: var(--noir); font-size: 18px; }
.activite-chiffres { margin: 16px 0 0; display: grid; gap: 0; }
.activite-chiffres > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--trait); }
.activite-chiffres dt { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--texte); }
.activite-chiffres dt .icone { width: 17px; height: 17px; color: var(--gris-clair); }
.activite-chiffres dd { margin: 0; font-weight: 700; color: var(--noir); font-variant-numeric: tabular-nums; }
.accueil-recentes { margin-top: 0; }

@media (max-width: 1060px) {
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .accueil-grille { grid-template-columns: minmax(0, 1fr); }
  .activite { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); column-gap: 28px; }
  .activite h3 { grid-column: 1 / -1; }
  .activite .barres, .activite .axe, .activite .activite-total { grid-column: 1; }
  .activite .activite-chiffres { grid-column: 2; grid-row: 2 / span 3; margin-top: 0; align-self: start; }
}
@media (max-width: 640px) {
  .accueil-entete { margin-bottom: 14px; }
  .bandeau-eco { padding: 12px 44px 12px 12px; gap: 10px 12px; }
  .bandeau-eco-icone { display: none; }
  .kpi { padding: 12px 14px; }
  .kpi > b { font-size: 26px; }
  .kpi-tete { font-size: 11px; letter-spacing: .2px; }
  .kpi-tete .icone { display: none; }
  .kpi-note { font-size: 12px; }
  .activite { display: block; }
  .activite .activite-chiffres { margin-top: 16px; }
  .accueil-grille { gap: 16px; margin-bottom: 28px; }
}