/* ==========================================================================
   GESTION LABO - Feuille de style principale
   --------------------------------------------------------------------------
   1. Polices et variables       6. Inventaire (domaines, onglets, tableau)
   2. Base                       7. Fenêtre flottante et formulaires
   3. Boutons, champs, messages  8. Pages publiques (accueil, erreur)
   4. En-tête et navigation      9. Mon compte, aide, administration
   5. Structure des pages       10. Petits écrans, impression, mouvement
   ========================================================================== */

/* 1. POLICES ET VARIABLES ------------------------------------------------- */
@font-face { font-family: 'Atkinson Hyperlegible'; font-style: normal; font-weight: 400; font-display: swap; src: url(../polices/atkinson-hyperlegible-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: 'Atkinson Hyperlegible'; font-style: italic; font-weight: 400; font-display: swap; src: url(../polices/atkinson-hyperlegible-latin-400-italic.woff2) format('woff2'); }
@font-face { font-family: 'Atkinson Hyperlegible'; font-style: normal; font-weight: 700; font-display: swap; src: url(../polices/atkinson-hyperlegible-latin-700-normal.woff2) format('woff2'); }
@font-face { font-family: 'Atkinson Hyperlegible'; font-style: italic; font-weight: 700; font-display: swap; src: url(../polices/atkinson-hyperlegible-latin-700-italic.woff2) format('woff2'); }

:root {
  --encre: #1c2230;
  --encre-douce: #5e6678;
  --papier: #f3f4f8;
  --surface: #ffffff;
  --trait: #dde1ea;
  --trait-fort: #c7ccd9;

  --violet-950: #1a1047;
  --violet-900: #23175e;
  --violet-700: #3e2a9e;
  --violet-600: #5b3fd1;
  --violet-200: #d9d1fb;
  --violet-100: #eeebfc;
  --violet-50: #f7f5fe;

  --menthe: #5ee0c4;
  --vert: #0f7f70;
  --vert-100: #e2f5f1;
  --rouge: #c8372d;
  --rouge-100: #fdecea;
  --ambre: #9a6408;
  --ambre-100: #fff3dc;

  --police: 'Atkinson Hyperlegible', 'Segoe UI', system-ui, -apple-system, Roboto, Arial, sans-serif;
  --rayon: 10px;
  --rayon-petit: 7px;
  --ombre: 0 1px 2px rgba(28, 34, 48, .06), 0 4px 14px rgba(28, 34, 48, .06);
  --ombre-fenetre: 0 24px 60px rgba(26, 16, 71, .28), 0 4px 14px rgba(26, 16, 71, .18);
  /* Fonds de l'en-tête : choisir le fond actif dans --fond-bandeau (une seule ligne à changer) */
  --fond-molecules: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='98' viewBox='0 0 56 98'%3E%3Cg fill='none' stroke='%237b4fd6' stroke-opacity='.16' stroke-width='1.3'%3E%3Cpath d='M28 65 0 49V16L28 0l28 16v33L28 65v33'/%3E%3C/g%3E%3Cg fill='%237b4fd6' fill-opacity='.22'%3E%3Ccircle cx='28' cy='0' r='2.2'/%3E%3Ccircle cx='0' cy='49' r='2.2'/%3E%3Ccircle cx='56' cy='16' r='2.2'/%3E%3Ccircle cx='28' cy='65' r='2.2'/%3E%3C/g%3E%3C/svg%3E"), linear-gradient(100deg, #ffffff 0%, #f6f3fe 45%, #ece5fc 100%);
  --fond-cellules: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='120' viewBox='0 0 220 120'%3E%3Cg fill='%237b4fd6' stroke='%237b4fd6' stroke-width='1.2'%3E%3Cellipse cx='40' cy='34' rx='30' ry='24' fill-opacity='.05' stroke-opacity='.18'/%3E%3Ccircle cx='46' cy='30' r='7' fill-opacity='.14' stroke='none'/%3E%3Cellipse cx='150' cy='82' rx='36' ry='27' fill-opacity='.05' stroke-opacity='.16' transform='rotate(-18 150 82)'/%3E%3Ccircle cx='142' cy='86' r='8' fill-opacity='.13' stroke='none'/%3E%3Cellipse cx='198' cy='14' rx='18' ry='14' fill-opacity='.04' stroke-opacity='.14'/%3E%3Ccircle cx='96' cy='104' r='12' fill-opacity='.04' stroke-opacity='.14'/%3E%3C/g%3E%3C/svg%3E"), linear-gradient(100deg, #ffffff 0%, #f6f3fe 45%, #ece5fc 100%);
  --fond-degrade: radial-gradient(ellipse 60% 140% at 85% 0%, rgba(123, 79, 214, .20), transparent 70%), linear-gradient(100deg, #ffffff 0%, #f6f3fe 50%, #efe9fd 100%);
  --fond-bandeau: var(--fond-molecules);
  --fond-dessin: linear-gradient(135deg, #e4d9fc 0%, #c9b6f5 100%); /* fond des dessins de matériel (SVG transparents) */
  --nav-violet: linear-gradient(90deg, #4a22a3 0%, #5b3fd1 55%, #6a43c9 100%);
  --largeur-menu: 236px;
}

/* 2. BASE ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--police);
  font-size: 15px;
  line-height: 1.5;
  color: var(--encre);
  background: var(--papier);
}
img { max-width: 100%; }
a { color: var(--violet-700); text-underline-offset: 2px; }
a:hover { color: var(--violet-600); }
h1, h2, h3 { line-height: 1.25; margin: 0 0 .6em; }
p { margin: 0 0 .8em; }
small { font-size: .85em; }
:focus-visible { outline: 3px solid var(--violet-600); outline-offset: 2px; border-radius: 4px; }
button { font-family: inherit; }
.ico { width: 1.15em; height: 1.15em; flex: none; vertical-align: -.2em; }
.ico-vide { display: inline-block; width: 1.15em; }
.visuellement-cache { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.lien-evitement { position: absolute; left: 8px; top: -60px; z-index: 2000; background: var(--surface); padding: .5rem 1rem; border-radius: var(--rayon-petit); }
.lien-evitement:focus { top: 8px; }
.centre { text-align: center; }
.petit { font-size: .88em; }
.discret { color: var(--encre-douce); font-size: .92em; }
.texte-alerte { color: var(--rouge); }
.texte-ok { color: var(--vert); }
.lien-invisible { color: inherit; text-decoration: none; cursor: text; }

/* 3. BOUTONS, CHAMPS, MESSAGES ------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  padding: .55em 1em;
  border: 1px solid transparent; border-radius: var(--rayon);
  font: inherit; font-weight: 700; font-size: .95rem; line-height: 1.2;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color .15s, border-color .15s, color .15s;
}
.btn-primaire { background: var(--violet-600); color: #fff; }
.btn-primaire:hover { background: var(--violet-700); color: #fff; }
.btn-secondaire { background: var(--surface); color: var(--violet-700); border-color: var(--trait-fort); }
.btn-secondaire:hover { border-color: var(--violet-600); background: var(--violet-50); color: var(--violet-700); }
.btn-fantome { background: transparent; color: var(--violet-700); }
.btn-fantome:hover { background: var(--violet-100); color: var(--violet-700); }
.btn-ajout { background: var(--vert); color: #fff; }
.btn-ajout:hover { background: #0b685c; color: #fff; }
.btn-danger { background: var(--rouge); color: #fff; }
.btn-danger:hover { background: #a92b22; color: #fff; }
.btn-petit { padding: .4em .75em; font-size: .87rem; }
.btn-large { padding: .75em 1.3em; font-size: 1rem; }
.btn-don { background: var(--surface); color: var(--encre); border-color: var(--trait); }
.btn-don .ico { color: #d0457a; }
.btn-don:hover { border-color: #d0457a; color: var(--encre); }
.lien-discret { background: none; border: 0; padding: 0; color: var(--encre-douce); font: inherit; font-size: .9rem; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.lien-discret:hover { color: var(--violet-700); }

input[type="text"], input[type="search"], input[type="password"], input[type="email"], select, textarea {
  font: inherit; font-size: .95rem; color: var(--encre);
  width: 100%; max-width: 100%;
  padding: .5em .65em;
  background: var(--surface);
  border: 1px solid var(--trait-fort); border-radius: var(--rayon-petit);
}
select { padding-right: 1.8em; }
textarea { resize: vertical; line-height: 1.45; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--violet-600); box-shadow: 0 0 0 3px rgba(91, 63, 209, .2); }
input[type="checkbox"], input[type="radio"] { width: 1.05em; height: 1.05em; accent-color: var(--violet-600); vertical-align: -.15em; }
input.centre { text-align: center; }

.champ { display: flex; flex-direction: column; gap: .3rem; min-width: 0; }
.champ > label, .champ > .etiquette { font-weight: 700; font-size: .85rem; color: var(--encre-douce); display: inline-flex; align-items: center; gap: .4em; }
.champ-large { grid-column: span 2; }
.champs-groupe { display: flex; gap: .5rem; }
.champs-groupe input:first-child { max-width: 8em; }
.champ-erreur > label { color: var(--rouge) !important; }
.champ-erreur input, .champ-erreur select { border-color: var(--rouge); }
.champ-alerte { border-color: var(--rouge) !important; background: var(--rouge-100) !important; color: var(--rouge) !important; font-weight: 700; }
.grille-champs { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: .9rem 1rem; margin-bottom: 1rem; }
.valeur-fixe { padding: .5em .65em; background: var(--papier); border-radius: var(--rayon-petit); border: 1px solid var(--trait); min-height: 2.35em; }
.aide-saisie { color: var(--encre-douce); font-size: .88rem; margin: .2rem 0 .8rem; }
.actions-formulaire { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; justify-content: center; padding: 1rem 0 .2rem; }
.actions-collantes { position: sticky; bottom: -20px; background: linear-gradient(transparent, var(--surface) 30%); padding-bottom: .9rem; margin-top: .5rem; z-index: 2; }
.formulaire-carte { background: var(--surface); border: 1px solid var(--trait); border-radius: var(--rayon); padding: 1.2rem; }
.formulaire-carte fieldset { border: 0; padding: 0; margin: 0 0 1rem; }
.formulaire-carte legend { font-weight: 700; font-size: 1rem; margin-bottom: .8rem; padding: 0; }
.formulaire-etroit { max-width: 560px; display: flex; flex-direction: column; gap: .9rem; }
.formulaire-etroit .grille-champs { margin: 0; }
.form-ligne label { display: block; font-weight: 700; font-size: .85rem; color: var(--encre-douce); margin-bottom: .3rem; }
.recherche-ligne { display: flex; gap: .5rem; align-items: center; }
.recherche-ligne input { flex: 1; }

.message { display: block; position: relative; padding: .8rem 1rem .8rem 2.85rem; border-radius: var(--rayon); margin: 0 0 1rem; border: 1px solid transparent; }
.message > .ico { position: absolute; left: 1rem; top: .95rem; width: 1.3em; height: 1.3em; }
.message > p + p, .message > div > p + p { margin-top: .35rem; }
.nowrap { white-space: nowrap; }
.message p { margin: 0; }
.message-info { background: var(--violet-50); border-color: var(--violet-200); }
.message-info > .ico { color: var(--violet-600); }
.message-attention { background: var(--ambre-100); border-color: #f2d9a8; color: #5c3d06; }
.message-attention > .ico { color: var(--ambre); }
.message-erreur { background: var(--rouge-100); border-color: #f5c6c1; color: #7d1f18; }
.message-erreur > .ico { color: var(--rouge); }
.message-succes { background: var(--vert-100); border-color: #b9e5dc; color: #0b4f46; }
.message-succes > .ico { color: var(--vert); }
.message-neutre { background: var(--papier); border-color: var(--trait); color: var(--encre-douce); }
.message-court { padding: .5rem .8rem .5rem 2.5rem; margin-top: .8rem; font-size: .92rem; }
.message-court > .ico { top: .6rem; left: .8rem; }
.message-grand { font-size: 1.05rem; margin-top: 2rem; }

.chargement { display: flex; align-items: center; justify-content: center; gap: .7rem; padding: 2.5rem 1rem; color: var(--encre-douce); }
.chargement-roue { width: 22px; height: 22px; border-radius: 50%; border: 3px solid var(--violet-200); border-top-color: var(--violet-600); animation: tourne .8s linear infinite; }
@keyframes tourne { to { transform: rotate(360deg); } }
[aria-busy="true"] { opacity: .55; transition: opacity .2s .15s; }

.etat-vide { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .6rem; padding: 2.5rem 1rem; color: var(--encre-douce); }
.etat-vide p { max-width: 52ch; margin: 0; }
.etat-icone { width: 2.2rem; height: 2.2rem; color: var(--violet-600); }
.etat-ok .etat-icone { color: var(--vert); }
.etat-image { width: 250px; max-width: 80%; border-radius: var(--rayon); box-shadow: var(--ombre); }
.consigne { display: flex; align-items: center; gap: .5rem; color: var(--encre-douce); margin: .2rem 0 .6rem; font-size: .95rem; }

/* 4. EN-TÊTE ET NAVIGATION ------------------------------------------------- */
.bandeau {
  background: var(--fond-bandeau);
  color: var(--encre);
  border-bottom: 1px solid var(--trait);
  position: relative;
  z-index: 20;
}
.bandeau-haut { display: flex; align-items: center; gap: 1.2rem; padding: .25rem 1.25rem; min-height: 56px; }
.logo { display: inline-flex; align-items: center; text-decoration: none; flex: none; }
.logo img { height: 50px; width: auto; display: block; }
.identite { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; padding-left: 1.4rem; border-left: 2px solid var(--violet-200); }
.identite-nom { font-weight: 700; color: var(--violet-900); }
.identite-etab { font-style: italic; color: var(--encre-douce); font-size: .92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bandeau-droite { margin-left: auto; display: flex; align-items: center; gap: 1rem; }
.date-jour { color: var(--encre-douce); font-size: .92rem; }
.date-jour::first-letter { text-transform: uppercase; }
.btn-session { display: inline-flex; align-items: center; gap: .45rem; color: var(--violet-700); background: rgba(255,255,255,.8); text-decoration: none; font-weight: 700; font-size: .92rem; padding: .45rem .85rem; border-radius: 999px; border: 1px solid var(--violet-200); }
.btn-session:hover { background: #fff; border-color: var(--violet-600); color: var(--violet-700); }
.btn-session-connexion { background: var(--violet-600); border-color: var(--violet-600); color: #fff; }
.btn-session-connexion:hover { background: var(--violet-700); color: #fff; }
.bandeau-titre { margin: 0; font-size: 1.2rem; font-weight: 700; color: var(--violet-900); padding-left: 1.4rem; border-left: 2px solid var(--violet-200); }

.nav-principale { display: flex; justify-content: space-between; gap: .5rem; padding: .25rem .9rem; background: var(--nav-violet); color: #fff; overflow-x: auto; scrollbar-width: none; }
.nav-principale::-webkit-scrollbar { display: none; }
.nav-groupe { display: flex; gap: .25rem; align-items: center; }
.nav-droite { display: flex; align-items: center; gap: .6rem; }
.nav-droite > .nav-groupe + .nav-groupe { border-left: 1px solid rgba(255,255,255,.28); padding-left: .6rem; }
.nav-item { display: contents; }
.nav-btn {
  position: relative; display: inline-flex; align-items: center; gap: .5rem;
  padding: .4rem .85rem; border-radius: 9px;
  color: rgba(255,255,255,.86); text-decoration: none; font-weight: 700; font-size: .93rem; white-space: nowrap;
}
.nav-btn:hover { background: rgba(255,255,255,.12); color: #fff; }
.nav-btn.actif { background: var(--surface); color: var(--violet-900); }
.nav-btn.actif .ico { color: var(--violet-600); }
.nav-btn-inactif { cursor: help; opacity: .65; }
.nav-btn-inactif:hover { background: transparent; }
.nav-btn-alerte .ico { color: #ffb4ac; }
.nav-btn-alerte .pastille { position: absolute; top: .35rem; left: 1.75rem; width: 9px; height: 9px; border-radius: 50%; background: #ff5b4f; box-shadow: 0 0 0 2px #5b3fd1; }
.nav-btn-don .ico { color: #ff9cc2; }

/* 5. STRUCTURE DES PAGES ---------------------------------------------------- */
body.app { height: 100vh; height: 100dvh; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; overflow: hidden; }
.app-corps { display: grid; grid-template-columns: var(--largeur-menu) minmax(0, 1fr); min-height: 0; }
.app-corps-simple { grid-template-columns: minmax(0, 1fr); }
.app-principal { display: flex; flex-direction: column; min-height: 0; min-width: 0; background: var(--surface); }
.page-contenu { overflow-y: auto; padding: 1.4rem clamp(1rem, 3vw, 2.2rem) 2rem; }
.titre-page { display: flex; align-items: center; gap: .6rem; font-size: 1.5rem; }
.titre-page .ico { color: var(--violet-600); }
.sous-titre { font-size: 1.12rem; margin: 1rem 0 .8rem; }

.pied { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .4rem 1.4rem; padding: .7rem 1rem; font-size: .85rem; color: var(--encre-douce); background: var(--papier); border-top: 1px solid var(--trait); }
.pied a { color: var(--encre-douce); text-decoration: none; display: inline-flex; align-items: center; gap: .35rem; }
.pied a:hover { color: var(--violet-700); }

/* 6. INVENTAIRE ------------------------------------------------------------- */
/* Menu des domaines */
.menu-domaines, .menu-admin { background: var(--papier); border-right: 1px solid var(--trait); overflow-y: auto; padding: .9rem .7rem; }
.menu-bascule { display: none; }
.liste-domaines { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .2rem; }
.domaine { display: flex; align-items: center; gap: .7rem; padding: .45rem .55rem; border-radius: var(--rayon); color: var(--encre); text-decoration: none; font-weight: 700; font-size: .92rem; line-height: 1.25; position: relative; }
.domaine:hover { background: var(--surface); color: var(--violet-700); }
.domaine.actif { background: var(--surface); color: var(--violet-700); box-shadow: var(--ombre); }
.domaine.actif::before { content: ""; position: absolute; left: -.7rem; top: .45rem; bottom: .45rem; width: 4px; border-radius: 0 4px 4px 0; background: var(--violet-600); }
.domaine-vignette { width: 38px; height: 38px; border-radius: 9px; object-fit: cover; flex: none; background: var(--trait); }
.domaine .ico { color: var(--violet-600); }
.domaine .compteur { margin-left: auto; background: var(--violet-100); color: var(--violet-700); border-radius: 999px; padding: 0 .55em; font-size: .8rem; }

/* Onglets */
.zone-onglets { padding: .9rem clamp(1rem, 2vw, 1.6rem) 0; background: var(--surface); flex: none; }
.onglets { list-style: none; margin: 0; padding: 0 0 .7rem; display: flex; flex-wrap: wrap; gap: .4rem; border-bottom: 1px solid var(--trait); }
.onglet { display: inline-flex; align-items: center; gap: .45rem; padding: .42rem .9rem; color: var(--violet-700); background: var(--violet-50); border: 1px solid var(--violet-200); text-decoration: none; font-weight: 700; font-size: .9rem; white-space: nowrap; border-radius: 999px; }
.onglet:hover { color: var(--violet-700); background: var(--violet-100); border-color: var(--violet-600); }
.onglet.actif { color: #fff; background: var(--violet-600); border-color: var(--violet-600); }
.onglet.actif .ico { color: #fff !important; }
.onglet .ic-chef { color: var(--ambre); }

/* Tableau de l'inventaire (légende + lignes alignées) */
.legende-inventaire { overflow: hidden; scrollbar-gutter: stable; margin-top: .6rem; }
.zone-inventaire { flex: 1; overflow-y: auto; scrollbar-gutter: stable; padding: 0 clamp(1rem, 2vw, 1.6rem) 1.5rem; min-height: 0; }
.zone-inventaire:focus { outline: none; }
.app-inventaire .zone-onglets { padding-bottom: 0; }
.grille-inventaire { width: 100%; table-layout: fixed; border-collapse: collapse; }
.grille-inventaire .col-mat { width: 25%; }
.grille-inventaire .col-pre { width: 18%; }
.grille-inventaire .col-com { width: 18%; }
.grille-inventaire .col-ref { width: 13%; text-align: center; }
.grille-inventaire .col-qte { width: 12%; text-align: center; }
.grille-inventaire .col-div { width: 14%; text-align: center; }
.grille-entete th { background: var(--violet-600); padding: 0; text-align: left; font-size: .86rem; color: #fff; border-right: 1px solid rgba(255,255,255,.18); }
.grille-entete th:last-child { border-right: 0; }
.grille-entete th.col-qte, .grille-entete th.col-div { padding: .55rem .7rem; text-align: center; }
.grille-entete th:first-child { border-radius: 8px 0 0 0; }
.grille-entete th:last-child { border-radius: 0 8px 0 0; }
.tri { display: inline-flex; align-items: center; gap: .35rem; width: 100%; background: none; border: 0; padding: .55rem .7rem; font: inherit; font-weight: 700; color: inherit; cursor: pointer; text-align: left; }
.tri:hover { color: var(--violet-700); }
.tri .ico { width: .95em; height: .95em; opacity: .75; }
.grille-entete .tri:hover { color: #fff; background: rgba(255,255,255,.12); }
.grille-corps td { padding: .55rem .7rem; border-bottom: 1px solid #e3dcf7; border-right: 1px solid #ece7fa; vertical-align: middle; overflow-wrap: anywhere; }
.grille-corps td:last-child { border-right: 0; }
.grille-corps { border-left: 1px solid #e3dcf7; border-right: 1px solid #e3dcf7; }

/* Lignes cliquables et états */
.ligne-cliquable { cursor: pointer; }
.tabinventaire1 { background: var(--surface); }
.tabinventaire2 { background: #f3effd; }
.ligne-cliquable:hover, .tableau .ligne-cliquable:hover { background: #e6dffb; }
.tabinventaire3, .tabinventaire3:hover { background: var(--violet-200); box-shadow: inset 4px 0 0 var(--violet-600); }
.ligne-ajout:hover { background: var(--vert-100); }
.ligne-retrait:hover { background: var(--rouge-100); }
.ligne-cochee-ajout { background: var(--vert-100) !important; }
.ligne-cochee-retrait { background: var(--rouge-100) !important; }
.cliquable { cursor: pointer; }
.qte-alerte { color: var(--rouge); font-weight: 700; }
.sous-texte { display: block; font-style: italic; font-size: .84em; color: var(--encre-douce); text-align: right; }
.texte-fixe { color: var(--encre-douce); }
.date-perime { display: block; font-size: .75rem; color: var(--rouge); text-align: center; }

/* Icônes de la colonne "Divers" */
.divers { display: inline-flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .2rem .3rem; max-width: 100%; vertical-align: middle; }
.divers .ico, .divers .ico-vide { width: 1.1em; height: 1.1em; }
.tableau .col-divers { width: 8.2rem; text-align: center; }
.ic-alerte { color: var(--rouge); }
.ic-commentaire { color: var(--encre-douce); }
.ic-perime { color: var(--rouge); }
.ic-peremption { color: #2f6fd0; }
.ic-securite { color: var(--ambre); }
.ic-danger { color: #d4271b; }

/* Remplissage du pot ouvert (produits chimiques) */
.pot { display: inline-block; width: 17px; height: 21px; vertical-align: -5px; margin-left: .15rem; }
.pot svg { width: 100%; height: 100%; overflow: visible; }
.pot-fond { fill: #fff; }
.pot-verre { fill: none; stroke: #3b3f56; stroke-width: 1.6; stroke-linejoin: round; }
.pot-bouchon { fill: #3b3f56; }
.pot text { font-size: 10px; font-weight: 700; fill: #3b3f56; font-family: var(--police); }
.pot-croix { stroke: var(--rouge); stroke-width: 1.8; stroke-linecap: round; }
.pot-vide .pot-verre { stroke: var(--rouge); }
.pot-vide .pot-bouchon { fill: var(--rouge); }
.pot-bas .pot-liquide { fill: #e5534b; }
.pot-moyen .pot-liquide { fill: #f29d1f; }
.pot-haut .pot-liquide { fill: #2fae64; }
.pot-plein .pot-liquide { fill: #138a4c; }
.champ > label .pot { width: 22px; height: 27px; vertical-align: -8px; margin: -6px .1rem -4px 0; }
.fiche-badge .pot { width: 15px; height: 18px; vertical-align: -4px; }

/* Mosaïque des domaines */
.mosaique { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 1rem; padding-top: 1rem; }
.mosaique-carte { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--trait); border-radius: 14px; overflow: hidden; text-decoration: none; color: var(--encre); font-weight: 700; transition: border-color .15s, box-shadow .15s, transform .15s; }
.mosaique-carte img { width: 100%; aspect-ratio: 250 / 120; object-fit: cover; display: block; background: var(--papier); }
.mosaique-carte span { padding: .7rem .9rem; }
.mosaique-carte:hover { border-color: var(--violet-600); box-shadow: var(--ombre); color: var(--violet-700); transform: translateY(-2px); }
.etat-domaine { padding-top: 2rem; }

/* Barre d'outils du bas */
.barre-outils { display: flex; align-items: center; justify-content: space-between; gap: .8rem 1.5rem; flex-wrap: wrap; padding: .7rem clamp(1rem, 2vw, 1.6rem); background: var(--surface); border-top: 1px solid var(--trait); box-shadow: 0 -4px 16px rgba(28, 34, 48, .05); position: relative; z-index: 5; }
.recherche { display: flex; align-items: center; gap: .5rem; flex: 1 1 420px; max-width: 640px; }
.recherche-champ { position: relative; flex: 1; display: flex; align-items: center; }
.recherche-champ > .ico { position: absolute; left: .7rem; color: var(--encre-douce); pointer-events: none; }
.recherche-champ input { padding-left: 2.3rem; }
.barre-actions { display: flex; gap: .5rem; flex-wrap: wrap; }
.barre-actions .btn .ico + .ico { margin-left: -.35em; }

/* 7. FENÊTRE FLOTTANTE ET FORMULAIRES ------------------------------------- */
.fenetre {
  position: fixed; left: 50%; top: 10vh; z-index: 1000;
  width: min(980px, calc(100vw - 16px)); height: min(720px, calc(100vh - 24px));
  display: none; flex-direction: column;
  background: var(--surface); border-radius: 14px; overflow: hidden;
  box-shadow: var(--ombre-fenetre);
}
.fenetre.ouverte { display: flex; animation: apparait .16s ease-out; }
@keyframes apparait { from { opacity: 0; transform: translateY(8px) scale(.99); } }
.fenetre.reduite { height: auto; }
.fenetre.reduite .fenetre-contenu { display: none; }
.fenetre-barre { display: flex; align-items: center; gap: 1rem; padding: .35rem .5rem .35rem 1.1rem; background: var(--nav-violet); color: #fff; cursor: move; user-select: none; touch-action: none; flex: none; }
.fenetre.deplacement { opacity: .96; }
.fenetre-titre { margin: 0; font-size: 1rem; font-weight: 700; flex: 1; }
.fenetre-actions { display: flex; gap: .25rem; }
.fenetre-btn { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 8px; border: 0; background: transparent; color: #fff; cursor: pointer; }
.fenetre-btn:hover { background: rgba(255,255,255,.16); }
.fenetre-contenu { flex: 1; overflow-y: auto; padding: 1.1rem 1.3rem 1.3rem; }
.fenetre-centre { display: flex; justify-content: center; padding: 1.5rem 0; }
.fenetre-entete { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .8rem; }
.fenetre-soustitre { display: flex; align-items: center; gap: .5rem; font-weight: 700; margin: 0 0 .8rem; }
.fenetre-entete .fenetre-soustitre { margin: 0; }

/* Gérer la liste : bascule Ajouter / Supprimer */
.bascule-gestion { display: grid; grid-template-columns: 1fr 1fr; background: var(--papier); border-radius: 12px; padding: 4px; gap: 4px; margin-bottom: 1rem; }
.bascule-btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .65rem .8rem; border: 0; border-radius: 9px; background: transparent; color: var(--encre-douce); font-weight: 700; font-size: .95rem; cursor: pointer; }
.bascule-btn:hover { color: var(--encre); background: rgba(255,255,255,.6); }
.bascule-ajout.actif { background: var(--surface); color: var(--vert); box-shadow: var(--ombre); }
.bascule-retrait.actif { background: var(--surface); color: var(--rouge); box-shadow: var(--ombre); }
.choix-mode { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin-bottom: 1rem; }
.mode { display: flex; align-items: center; gap: .55rem; text-align: left; padding: .75rem .9rem; border-radius: var(--rayon); border: 1px solid var(--trait); background: var(--surface); color: var(--encre); font: inherit; font-size: .93rem; cursor: pointer; }
.choix-ajout .mode .ico { color: var(--vert); }
.choix-retrait .mode .ico { color: var(--rouge); }
.choix-ajout .mode:hover { border-color: var(--vert); background: var(--vert-100); }
.choix-retrait .mode:hover { border-color: var(--rouge); background: var(--rouge-100); }
.zone-recherche { margin-bottom: 1rem; }
.zone-recherche > label { display: block; font-weight: 700; font-size: .85rem; color: var(--encre-douce); margin-bottom: .3rem; }
.liste-entete { display: flex; align-items: center; justify-content: space-between; gap: .8rem 1rem; flex-wrap: wrap; margin-bottom: .8rem; }
.liste-titre { display: flex; align-items: center; gap: .45rem; margin: 0; flex-wrap: wrap; }
.compteur { color: var(--encre-douce); font-size: .88rem; font-weight: 400; margin-left: .4rem; }
.resultat-compte { color: var(--encre-douce); font-size: .9rem; margin: .2rem 0 .6rem; }
.encart-perso { margin-top: 1rem; padding: .9rem 1rem; border: 1px dashed var(--trait-fort); border-radius: var(--rayon); color: var(--encre-douce); font-size: .92rem; display: flex; align-items: center; justify-content: space-between; gap: .8rem; flex-wrap: wrap; }
.encart-perso p { margin: 0; }
.alphabet { display: flex; flex-wrap: wrap; gap: .15rem; margin-bottom: .8rem; }
.alphabet a { display: inline-flex; align-items: center; justify-content: center; min-width: 1.9rem; height: 1.9rem; border-radius: 6px; text-decoration: none; font-weight: 700; font-size: .88rem; color: var(--violet-700); background: var(--violet-50); }
.alphabet a:hover { background: var(--violet-600); color: #fff; }
.choix-alerte { border: 0; padding: 0; margin: 0 0 1rem; display: flex; flex-direction: column; gap: .35rem; }
.choix-alerte label { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; cursor: pointer; }
.choix-alerte small { color: var(--encre-douce); }

/* Tableaux génériques (fenêtres, comptes, administration) */
.tableau { width: 100%; border-collapse: collapse; font-size: .93rem; }
.tableau th { background: var(--violet-600); color: #fff; font-size: .84rem; text-align: left; padding: .55rem .6rem; white-space: nowrap; }
.tableau tbody tr:nth-child(even):not(:hover) { background: #f6f3fe; }
.tableau th.th-alerte { color: #ffd9d4 !important; }
.tableau td { border-bottom-color: #e3dcf7 !important; }
.tableau td { padding: .5rem .6rem; border-bottom: 1px solid var(--trait); vertical-align: middle; }
.tableau thead th { position: sticky; top: -1.15rem; z-index: 1; }
.tableau .col-case { width: 2.6rem; text-align: center; }
.tableau-saisie input, .tableau-saisie select { padding: .35em .5em; font-size: .9rem; }
.ligne-lettre th { background: var(--surface); color: var(--violet-700); font-size: 1.15rem; padding: 1rem .6rem .35rem; border-bottom: 2px solid var(--violet-200); position: static; scroll-margin-top: 2.5rem; }
.tableau-defilant { overflow-x: auto; }
.th-alerte, .label-alerte { color: var(--rouge) !important; }

/* Fiche de saisie d'un matériel */
.fiche { display: flex; flex-direction: column; gap: .55rem; }
.fiche-hero { display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: .9rem; align-items: center; padding: .2rem .8rem .2rem .2rem; border-radius: 18px; background: var(--fond-molecules); border: 1px solid var(--violet-200); }
.fiche-photo { margin: 0; width: 128px; height: 128px; background: #fff; border-radius: 14px; border: 1px solid var(--violet-200); display: flex; align-items: center; justify-content: center; padding: .25rem; box-shadow: var(--ombre); }
.fiche-photo img { width: 100%; height: 100%; object-fit: contain; border-radius: 10px; }
.fiche-titre { min-width: 0; display: flex; flex-direction: column; gap: .25rem; }
.fiche-domcat { display: flex; align-items: center; gap: .3rem .6rem; flex-wrap: wrap; }
.fiche-domcat > .btn-petit { padding-top: .25em; padding-bottom: .25em; }
.fiche-domcat .grille-champs, .fiche-domcat .message, .fiche-domcat .aide-saisie { width: 100%; margin-bottom: 0; }
.fiche-domcat .grille-champs { background: rgba(255,255,255,.9); padding: .8rem; border-radius: 12px; border: 1px solid var(--violet-200); }
.fiche-chemin { display: inline-flex; align-items: center; gap: .3rem; font-weight: 700; font-size: .82rem; color: var(--violet-700); background: rgba(255,255,255,.85); border: 1px solid var(--violet-200); padding: .12rem .65rem; border-radius: 999px; }
.fiche-chemin .sep { color: var(--encre-douce); margin: 0 .15rem; }
.fiche-nom { margin: 0; font-size: 1.25rem; line-height: 1.2; color: var(--violet-950); overflow-wrap: anywhere; }
.fiche-nom-modif input { text-align: left; font-size: 1.25rem; font-weight: 700; color: var(--violet-950); padding: .4em .6em; }
.fiche-perso { margin: 0; font-size: .82rem; color: var(--encre-douce); display: flex; align-items: center; gap: .3rem; }
.fiche-precision { margin: 0; font-size: 1.02rem; color: #2c3344; }
.fiche-badges { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .05rem; }
.fiche-badge { display: inline-flex; align-items: center; gap: .35rem; padding: .2rem .65rem; border-radius: 999px; background: #fff; border: 1px solid var(--trait); font-size: .86rem; font-weight: 700; color: var(--encre); }
.fiche-badge .ico { color: var(--violet-600); }
.fiche-badge-alerte { background: var(--rouge-100); border-color: #f5c6c1; color: var(--rouge); }
.fiche-badge-alerte .ico { color: var(--rouge); }
.fiche-sections { display: grid; grid-template-columns: minmax(240px, 1fr) minmax(0, 2fr); gap: .55rem; }
.fiche-section { border: 1px solid var(--trait); border-radius: 12px; padding: .55rem .8rem .7rem; background: var(--surface); }
.fiche-section h4 { display: flex; align-items: center; gap: .4rem; margin: 0 0 .4rem; font-size: .95rem; color: var(--violet-900); }
.fiche-section h4 .ico { width: 1.35rem; height: 1.35rem; padding: .22rem; border-radius: 8px; background: var(--violet-100); color: var(--violet-600); }
.fiche-section .grille-champs { margin-bottom: 0; gap: .45rem .6rem; }
.fiche-section .champ { gap: .12rem; }
.fiche-section .champ > label, .fiche-section .champ > .etiquette { font-size: .8rem; }
.fiche-section input[type="text"], .fiche-section select { padding-top: .32em; padding-bottom: .32em; }
.grille-stock { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grille-dates { display: flex; flex-direction: column; gap: .45rem; }
.grille-notes { display: flex; flex-direction: column; gap: .45rem; }
.grille-notes textarea { min-height: 3.4rem; padding-top: .35em; padding-bottom: .35em; }
.grille-ident { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
.grille-ident .champ:has(#f_precision) { grid-column: 1 / -1; }
.grille-ident .champ-large { grid-column: auto; }
.fiche-section .message-court { margin: .5rem 0 0; }
.selecteurs-date { display: grid; grid-template-columns: 1fr 1fr 1.3fr; gap: .35rem; }
.selecteurs-date select { padding-left: .5em; padding-right: .3em; }
.champ-perime .selecteurs-date select { border-color: var(--rouge); background: var(--rouge-100); }
.champ-perime > .etiquette { color: var(--rouge); }
.etat-peremption { margin: .25rem 0 0; font-size: .86rem; display: flex; align-items: center; gap: .4rem; color: var(--vert); font-weight: 700; }
.champ-perime .etat-peremption { color: var(--rouge); }
.fiche-pied { position: sticky; bottom: -1.3rem; z-index: 3; display: flex; align-items: center; justify-content: space-between; gap: .6rem 1rem; flex-wrap: wrap; margin: .2rem -1.3rem -1.3rem; padding: .65rem 1.3rem; background: rgba(247, 245, 254, .96); backdrop-filter: blur(4px); border-top: 1px solid var(--violet-200); border-radius: 0 0 14px 14px; }
.fiche-pied-info { margin: 0; display: flex; align-items: center; gap: .4rem; font-size: .84rem; color: var(--encre-douce); }
.fiche-pied-info .ico { color: var(--violet-600); }
.fiche-pied-actions { display: flex; gap: .5rem; margin-left: auto; }
.fiche-pied .btn-primaire { padding: .6em 1.3em; border-radius: 10px; box-shadow: 0 6px 16px rgba(91, 63, 209, .28); }
.fiche-pied .message { margin: 0; flex: 1; }
.grille-dates .etat-peremption { margin-top: .1rem; align-self: flex-start; padding: .2rem .6rem; border-radius: 999px; background: var(--vert-100); font-size: .8rem; }
.grille-dates .champ-perime .etat-peremption { background: var(--rouge-100); }
.grille-notes textarea { min-height: 3rem; }

/* Connexion */
.carte-connexion { display: flex; flex-direction: column; gap: .9rem; width: 100%; max-width: 380px; }
.carte-intro { margin: 0; color: var(--encre-douce); }

/* 8. PAGES PUBLIQUES -------------------------------------------------------- */
.bandeau-public .bandeau-haut { padding: .3rem 1.5rem; }
.public-corps { display: grid; grid-template-columns: 220px minmax(0, 1fr); max-width: 1240px; margin: 0 auto; min-height: calc(100vh - 140px); }
.public-corps-simple { grid-template-columns: minmax(0, 1fr); }
.public-gauche { padding: 1.6rem 1.2rem; display: flex; flex-direction: column; gap: 1.2rem; }
.public-principal { background: var(--surface); padding: 2rem clamp(1.2rem, 4vw, 3rem) 3rem; border-left: 1px solid var(--trait); border-right: 1px solid var(--trait); min-width: 0; }
.public-corps-simple .public-principal { border: 0; }
.date-encart { display: flex; flex-direction: column; padding: .8rem 1rem; background: var(--surface); border-radius: var(--rayon); border: 1px solid var(--trait); }
.date-encart-libelle { font-size: .82rem; color: var(--encre-douce); }
.date-encart-valeur { font-weight: 700; font-size: 1.05rem; }
.liens-annexes { display: flex; flex-direction: column; gap: .2rem; }
.liens-annexes a { display: flex; align-items: center; gap: .55rem; padding: .45rem .55rem; border-radius: var(--rayon-petit); color: var(--encre); text-decoration: none; font-size: .93rem; }
.liens-annexes a .ico { color: var(--violet-600); }
.liens-annexes a:hover { background: var(--surface); color: var(--violet-700); }

.accueil-hero { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(300px, 1fr); gap: clamp(1.5rem, 4vw, 3rem); align-items: center; margin-bottom: 2.4rem; padding: clamp(1.4rem, 3vw, 2.4rem); border-radius: 22px; background: var(--fond-molecules); border: 1px solid var(--violet-200); }
.accueil-texte h1 { font-size: clamp(1.8rem, 3.3vw, 2.6rem); line-height: 1.12; margin-bottom: 1rem; color: var(--violet-950); letter-spacing: -.01em; }
.accueil-texte h1 a { color: var(--violet-600); text-decoration: none; }
.accueil-texte h1 sup { font-size: .45em; }
.accueil-texte .version { display: inline-block; font-size: .4em; font-weight: 700; vertical-align: .6em; padding: .3em .7em; border-radius: 999px; background: var(--violet-600); color: #fff; letter-spacing: 0; }
.accueil-intro { font-size: 1.1rem; max-width: 52ch; color: #2c3344; margin-bottom: 1.3rem; }
.accueil-chiffre { display: inline-flex; align-items: center; text-wrap: pretty; gap: .65rem; padding: .75rem 1.1rem; background: rgba(255,255,255,.85); color: var(--encre); border-radius: 14px; border: 1px solid var(--violet-200); box-shadow: var(--ombre); margin: 0; }
.accueil-chiffre .ico { width: 1.5rem; height: 1.5rem; color: var(--violet-600); }
.accueil-chiffre strong { font-size: 1.3rem; color: var(--violet-700); }
.accueil-connexion { background: var(--surface); border: 1px solid var(--violet-200); border-radius: 18px; padding: 1.5rem; display: flex; flex-direction: column; gap: .8rem; box-shadow: 0 14px 40px rgba(62, 42, 158, .14); }
.accueil-connexion h2 { font-size: 1.25rem; margin: 0; display: flex; align-items: center; gap: .5rem; color: var(--violet-900); }
.accueil-connexion .carte-connexion { max-width: none; }
.accueil-actions { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; padding-top: .9rem; border-top: 1px solid var(--trait); }
.accueil-actions .btn { white-space: normal; }
#div_mdp:empty { display: none; }
.annonce { margin-bottom: 2rem; }
.atouts h2 { font-size: 1.25rem; display: flex; align-items: center; gap: .55rem; color: var(--violet-900); margin-bottom: 1rem; }
.atouts h2::before { content: ""; width: 4px; height: 1.1em; border-radius: 2px; background: var(--violet-600); }
.atouts-liste { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1rem; }
.atouts-liste li { display: flex; flex-direction: column; gap: .75rem; align-items: flex-start; padding: 1.2rem 1.25rem; border: 1px solid var(--trait); border-radius: 16px; background: var(--surface); transition: border-color .15s, box-shadow .15s, transform .15s; }
.atouts-liste li:hover { border-color: var(--violet-200); box-shadow: var(--ombre); transform: translateY(-2px); }
.atouts-liste li > .ico { width: 2.7rem; height: 2.7rem; padding: .62rem; border-radius: 12px; background: linear-gradient(135deg, var(--violet-600), #7b4fd6); color: #fff; }
.atouts-liste p { margin: 0; color: #2c3344; }
.atouts-liste strong { color: var(--violet-900); }

/* Inscription */
.page-inscription { max-width: 1120px; }
.inscription-hero { display: flex; gap: 1.2rem; align-items: flex-start; padding: clamp(1.2rem, 3vw, 2rem); margin-bottom: 1.5rem; border-radius: 22px; background: var(--fond-molecules); border: 1px solid var(--violet-200); }
.inscription-hero h1 { font-size: clamp(1.45rem, 2.6vw, 2rem); line-height: 1.2; margin: 0 0 .35rem; color: var(--violet-950); }
.inscription-hero h1 sup { font-size: .5em; }
.inscription-atouts { list-style: none; padding: 0; margin: .9rem 0 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.inscription-atouts li { display: inline-flex; align-items: center; gap: .4rem; padding: .35rem .8rem; border-radius: 999px; background: rgba(255,255,255,.9); border: 1px solid var(--violet-200); font-weight: 700; font-size: .88rem; color: var(--violet-700); }
.inscription-grille { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 1.5rem; align-items: start; }
#infoFormulaire { color: var(--encre-douce); margin: 0 0 1rem; max-width: 70ch; }
.formulaire-inscription { background: var(--surface); border: 1px solid var(--trait); border-radius: 20px; box-shadow: 0 14px 40px rgba(62, 42, 158, .10); overflow: hidden; }
.bloc-inscription { border: 0; margin: 0; padding: 1.4rem 1.6rem 1.3rem; }
.bloc-inscription + .bloc-inscription { border-top: 1px solid var(--trait); }
.bloc-inscription legend { float: left; width: 100%; display: flex; align-items: center; gap: .6rem; font-weight: 700; font-size: 1.08rem; color: var(--violet-900); padding: 0; margin: 0 0 .9rem; }
.bloc-inscription legend small { font-weight: 400; font-size: .85rem; color: var(--encre-douce); }
.bloc-inscription legend + * { clear: both; }
.bloc-num { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: 10px; background: linear-gradient(135deg, var(--violet-600), #7b4fd6); color: #fff; font-size: .95rem; box-shadow: 0 4px 10px rgba(91, 63, 209, .3); }
.bloc-inscription .grille-champs { margin: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem 1rem; }
.bloc-inscription input[type="text"], .bloc-inscription select { padding: .62em .75em; border-radius: 10px; background: #fbfaff; }
.bloc-inscription input:focus, .bloc-inscription select:focus { background: #fff; }
.aide-champ { margin: .3rem 0 0; font-size: .86rem; color: var(--rouge); }
.aide-champ:empty { display: none; }
.champ-valide input { border-color: var(--vert); }
.actions-inscription { display: flex; flex-direction: column; align-items: stretch; gap: .6rem; padding: 1.2rem 1.6rem 1.5rem; background: var(--violet-50); border-top: 1px solid var(--violet-200); }
.actions-inscription .btn { width: 100%; padding: .9em; font-size: 1.05rem; border-radius: 12px; box-shadow: 0 10px 24px rgba(91, 63, 209, .28); }
.actions-inscription p { margin: 0; display: flex; align-items: center; justify-content: center; gap: .4rem; font-size: .88rem; color: var(--encre-douce); }
.inscription-aside { position: sticky; top: 1rem; display: flex; flex-direction: column; gap: 1rem; }
.inscription-aside .carte-page { margin: 0; }
.carte-etapes { padding: 1.3rem 1.3rem 1.4rem; border-radius: 20px; color: #fff; background: radial-gradient(ellipse 80% 60% at 100% 0%, rgba(255,255,255,.16), transparent 70%), linear-gradient(160deg, #5b3fd1 0%, #3e2a9e 100%); box-shadow: 0 14px 34px rgba(62, 42, 158, .28); }
.carte-etapes h2 { margin: 0 0 1rem; font-size: 1.1rem; color: #fff; }
.etapes { list-style: none; counter-reset: etape; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 1rem; position: relative; }
.etapes li { counter-increment: etape; display: grid; grid-template-columns: 2rem 1fr; column-gap: .75rem; position: relative; }
.etapes li::before { content: counter(etape); grid-row: span 2; width: 2rem; height: 2rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: #fff; color: var(--violet-700); font-weight: 700; position: relative; z-index: 1; }
.etapes li:not(:last-child)::after { content: ""; position: absolute; left: calc(1rem - 1px); top: 2rem; bottom: -1rem; width: 2px; background: rgba(255,255,255,.35); }
.etapes strong { color: #fff; }
.etapes span { color: rgba(255,255,255,.82); font-size: .9rem; }
.liens-aside { display: flex; flex-direction: column; gap: .35rem; margin: 0; }
.liens-aside a { display: inline-flex; align-items: center; gap: .45rem; font-weight: 700; text-decoration: none; }

/* Test du logiciel */
.page-test { max-width: 1040px; }
.test-tuiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.test-tuile { padding: 1.3rem; border-radius: 18px; background: var(--surface); border: 1px solid var(--trait); box-shadow: var(--ombre); }
.test-tuile h2 { font-size: 1.05rem; margin: .8rem 0 .4rem; color: var(--violet-900); }
.test-tuile p { margin: 0; font-size: .95rem; color: #2c3344; }
.test-tuile-icone { display: inline-flex; width: 2.8rem; height: 2.8rem; align-items: center; justify-content: center; border-radius: 12px; background: var(--violet-100); color: var(--violet-600); }
.test-tuile-icone .ico { width: 1.4rem; height: 1.4rem; }
.test-action { display: flex; flex-direction: column; align-items: center; gap: .6rem; margin: 1.8rem 0; padding: 1.8rem 1rem; border-radius: 22px; background: var(--fond-molecules); border: 1px solid var(--violet-200); }
.btn-test { font-size: 1.1rem; padding: .9em 2em; border-radius: 999px; box-shadow: 0 10px 24px rgba(91, 63, 209, .3); }
.test-remarque p { margin: 0 0 .6rem; }


.page-texte { max-width: 860px; }
.page-large { max-width: none; }
.page-texte > p, .page-texte section > p { max-width: none; }
.page-texte h1 { font-size: clamp(1.45rem, 2.4vw, 1.9rem); line-height: 1.2; margin: 0 0 .35rem; color: var(--violet-950); }
.page-texte h1 sup { font-size: .5em; }
.page-texte h2 { font-size: 1.08rem; margin-top: 1.5rem; }
.page-entete { display: flex; gap: 1.1rem; align-items: flex-start; padding-bottom: 1.3rem; margin-bottom: 1.6rem; border-bottom: 1px solid var(--trait); }
.page-entete-icone { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 3.2rem; height: 3.2rem; border-radius: 14px; background: linear-gradient(135deg, var(--violet-600), #7b4fd6); color: #fff; box-shadow: 0 6px 16px rgba(91, 63, 209, .28); }
.page-entete-icone .ico { width: 1.6rem; height: 1.6rem; }
.intro { font-size: 1.08rem; color: var(--encre-douce); margin: 0; max-width: 62ch; }
.titre-section { display: flex; align-items: center; gap: .55rem; font-size: 1.15rem !important; margin: 2rem 0 .9rem !important; color: var(--violet-900); }
.titre-section::before { content: ""; width: 4px; height: 1.1em; border-radius: 2px; background: var(--violet-600); }
.titre-section .ico { color: var(--violet-600); }
.carte-page { background: var(--surface); border: 1px solid var(--trait); border-radius: 16px; padding: 1.2rem 1.4rem; margin: 1.2rem 0; box-shadow: var(--ombre); }
.carte-page .titre-section { margin-top: 0 !important; }
.carte-douce { background: var(--violet-50); border-color: var(--violet-200); box-shadow: none; }
.carte-auteur { display: flex; align-items: center; gap: 1.1rem; flex-wrap: wrap; }
.carte-auteur > div:nth-child(2) { flex: 1; min-width: 200px; }
.carte-auteur h2 { margin: 0 0 .2rem; font-size: .85rem; color: var(--encre-douce); font-weight: 700; }
.carte-auteur p { margin: 0; }
.auteur-initiales { width: 3.4rem; height: 3.4rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.15rem; color: var(--violet-700); background: var(--violet-100); border: 2px solid var(--violet-200); }
.frise { list-style: none; padding: 0; margin: 1.2rem 0 0; position: relative; }
.frise::before { content: ""; position: absolute; left: 8.6rem; top: .4rem; bottom: .4rem; width: 2px; background: var(--violet-200); }
.frise li { display: grid; grid-template-columns: 7.8rem 1fr; gap: 1.8rem; padding-bottom: 1.1rem; position: relative; }
.frise li::before { content: ""; position: absolute; left: calc(8.6rem - 5px); top: .4rem; width: 12px; height: 12px; border-radius: 50%; background: var(--surface); border: 3px solid var(--violet-600); }
.frise-date { font-weight: 700; color: var(--violet-700); text-align: right; font-size: .92rem; padding-top: .1rem; }
.frise p { margin: 0; }
.chiffres-cles { display: flex; gap: 1rem; flex-wrap: wrap; margin: 0 0 1.2rem; }
.chiffres-cles div { display: flex; align-items: baseline; gap: .5rem; padding: .7rem 1.2rem; border-radius: 14px; background: var(--violet-50); border: 1px solid var(--violet-200); }
.chiffres-cles strong { font-size: 1.8rem; color: var(--violet-700); line-height: 1; }
.chiffres-cles span { color: var(--encre-douce); }
.version-num { display: inline-block; font-size: .95rem; padding: .2rem .7rem; border-radius: 999px; background: var(--violet-100); color: var(--violet-700); }
.version-actuelle .version-num { background: var(--violet-600); color: #fff; }
.badge-nouveau { display: inline-block; font-size: .72rem; font-weight: 700; padding: .15rem .55rem; border-radius: 999px; background: var(--vert-100); color: var(--vert); vertical-align: .15em; margin-left: .3rem; }
.version-actuelle { background: var(--violet-50); border: 1px solid var(--violet-200); border-radius: 14px; padding: .9rem 1rem 1rem 1.4rem !important; margin: 0 0 1.2rem -.3rem; }
.version-actuelle::before { top: 1.15rem !important; }
#div_loginInscr:empty { display: none; }
.champ-plein { grid-column: 1 / -1; }
.champ-plein .message { margin: 0; }
.champ-plein .message p + p { margin-top: .35rem; }
.page-centree { margin: 0 auto; text-align: center; }
.page-centree h1 { justify-content: center; }
.page-centree .message { text-align: left; }
.retour-accueil { margin-top: 2rem; }
.lien-icone { display: inline-flex; align-items: center; gap: .35rem; margin-left: .6rem; }
.versions { list-style: none; padding: 0; margin: 0; border-left: 2px solid var(--violet-200); }
.versions li { position: relative; padding: 0 0 1.4rem 1.4rem; }
.versions li::before { content: ""; position: absolute; left: -7px; top: .35rem; width: 12px; height: 12px; border-radius: 50%; background: var(--surface); border: 2px solid var(--violet-600); }
.versions h2 { margin: 0 0 .4rem; font-size: 1.02rem; }
.versions p { margin: 0 0 .2rem; }
.galerie-logos { display: flex; gap: 1rem; flex-wrap: wrap; }
.carte-telechargement { display: inline-flex; flex-direction: column; align-items: center; gap: .6rem; padding: 1rem; border: 1px solid var(--trait); border-radius: 12px; text-decoration: none; color: var(--violet-700); font-weight: 700; background: var(--surface); }
.carte-telechargement:hover { border-color: var(--violet-600); box-shadow: var(--ombre); }
.carte-telechargement span { display: inline-flex; align-items: center; gap: .4rem; }
.utilisateurs-bloc { border: 1px solid var(--trait); border-radius: 16px; padding: 1.2rem 1.4rem; margin-bottom: 1.2rem; background: var(--surface); box-shadow: var(--ombre); }
.utilisateurs-bloc h2 { font-size: 1.02rem !important; margin-top: 0 !important; }
.logos-academies img { background: #fff; border-radius: 8px; padding: 4px; }
.liste-pays li { padding: .45rem .6rem; border-radius: 10px; background: var(--papier); }
.utilisateurs-bloc h2 { display: flex; align-items: center; gap: .6rem; margin-top: 0; }
.drapeau { width: 34px; border-radius: 3px; box-shadow: 0 0 0 1px var(--trait); }
.logos-academies { display: flex; flex-wrap: wrap; gap: 1rem 1.4rem; align-items: center; }
.liste-pays { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: .5rem 1rem; }
.liste-pays li { display: flex; align-items: center; gap: .6rem; }
.liste-pays img { width: 34px; border-radius: 3px; box-shadow: 0 0 0 1px var(--trait); }

.page-erreur { max-width: 560px; margin: 2rem auto; text-align: center; }
.page-erreur-icone { display: inline-flex; padding: 1rem; border-radius: 50%; background: var(--rouge-100); color: var(--rouge); margin-bottom: 1rem; }
.page-erreur-icone .ico { width: 2.2rem; height: 2.2rem; }
.page-erreur h1 { font-size: 1.4rem; }

/* 9. MON COMPTE, AIDE, ADMINISTRATION -------------------------------------- */
.app-page .zone-onglets { padding: 0 0 .2rem; }
.carte-section { background: var(--surface); border: 1px solid var(--trait); border-radius: 14px; padding: 1.3rem 1.4rem; margin: 1.2rem 0; }
.carte-section h2 { display: flex; align-items: center; gap: .55rem; font-size: 1.15rem; }
.carte-section h2 .ico { color: var(--violet-600); }
.notes { background: var(--papier); font-size: .92rem; }
.notes ul { padding-left: 1.2rem; }
.tableau-comptes input[type="text"], .tableau-comptes input[type="password"], .tableau-comptes select { min-width: 8.5rem; padding: .35em .5em; }
.tableau-comptes .login { color: var(--encre-douce); font-weight: 700; }
.grille-nouveau-compte { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.login-genere { font-weight: 700; color: var(--violet-700); }
.etat-nouveau-compte .message { margin: 0; }
.etat-nouveau-compte > .btn { width: 100%; }
.option-connexion { border: 1px solid var(--trait); border-radius: 12px; padding: 1rem 1.1rem; margin-bottom: 1rem; }
.option-entete { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .6rem; }
.option-entete label { font-weight: 700; }
.option-entete select { width: auto; min-width: 6rem; }
.lien-copie { background: var(--papier); border-radius: var(--rayon-petit); padding: .5rem .7rem; overflow-wrap: anywhere; font-size: .92rem; }
.cartes-aide { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; }
.carte-aide { display: grid; grid-template-columns: auto 1fr; gap: .2rem .8rem; padding: 1.1rem; border: 1px solid var(--trait); border-radius: 14px; text-decoration: none; color: var(--encre); }
.carte-aide > .ico { grid-row: span 2; width: 2.4rem; height: 2.4rem; padding: .55rem; border-radius: 11px; background: var(--violet-100); color: var(--violet-600); }
.carte-aide-titre { font-weight: 700; }
.carte-aide-texte { color: var(--encre-douce); font-size: .9rem; }
.carte-aide:hover { border-color: var(--violet-600); box-shadow: var(--ombre); color: var(--encre); }
.bloc-remarque { max-width: 820px; }
.bloc-remarque h2 { font-size: 1.15rem; }
.historique { white-space: pre-wrap; font-size: .9rem; background: var(--papier); padding: 1rem; border-radius: var(--rayon); }

/* 10. PETITS ÉCRANS --------------------------------------------------------- */
@media (max-width: 1100px) {
  .identite-etab { max-width: 34ch; }
  .date-jour { display: none; }
}
@media (max-width: 860px) {
  body.app { height: auto; min-height: 100vh; display: flex; flex-direction: column; overflow: visible; }
  .app-corps { display: flex; flex-direction: column; flex: 1; }
  .app-principal { flex: 1; }
  .menu-domaines, .menu-admin { border-right: 0; border-bottom: 1px solid var(--trait); padding: .6rem 1rem; }
  .menu-bascule { display: inline-flex; align-items: center; gap: .5rem; background: var(--surface); border: 1px solid var(--trait-fort); border-radius: var(--rayon); padding: .5rem .9rem; font-weight: 700; color: var(--encre); cursor: pointer; }
  .menu-domaines .liste-domaines { display: none; margin-top: .6rem; }
  .menu-domaines .liste-domaines.menu-ouvert { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
  .menu-admin .liste-domaines { flex-direction: row; flex-wrap: wrap; }
  .domaine.actif::before { display: none; }
  .zone-inventaire { overflow: visible; }
  .legende-inventaire { display: none; }
  .grille-corps, .grille-corps tbody { display: block; }
  .grille-corps tr { display: grid; grid-template-columns: 1fr auto; gap: .15rem .8rem; padding: .7rem .2rem; border-bottom: 1px solid var(--trait); }
  .grille-corps td { border: 0; padding: 0; width: auto !important; text-align: left !important; }
  .grille-corps .col-mat { font-weight: 700; grid-column: 1; }
  .grille-corps .col-qte { grid-column: 2; grid-row: 1; text-align: right !important; }
  .grille-corps .col-pre, .grille-corps .col-com, .grille-corps .col-ref { grid-column: 1 / -1; font-size: .9rem; color: var(--encre-douce); }
  .grille-corps .col-pre:empty, .grille-corps .col-com:empty, .grille-corps .col-ref:empty { display: none; }
  .grille-corps .col-ref::before { content: "Réf. "; }
  .grille-corps .col-div { grid-column: 1 / -1; }
  .grille-corps .ico-vide { display: none; }
  .grille-corps .col-div:not(:has(svg)) { display: none; }
  .barre-outils { position: sticky; bottom: 0; }
  .bandeau-haut { flex-wrap: wrap; gap: .6rem 1rem; }
  .identite { padding-left: .8rem; }
  .bandeau-titre { font-size: 1rem; }
  .public-corps { grid-template-columns: 1fr; }
  .public-gauche { flex-direction: row; flex-wrap: wrap; align-items: center; padding: 1rem; }
  .liens-annexes { flex-direction: row; flex-wrap: wrap; }
  .public-principal { border: 0; }
  .accueil-hero { grid-template-columns: 1fr; }
  .inscription-grille, .test-tuiles { grid-template-columns: 1fr; }
  .inscription-aside { position: static; }
  .bloc-inscription .grille-champs { grid-template-columns: 1fr; }
  .inscription-hero { flex-direction: column; }
  .bloc-inscription, .actions-inscription { padding-left: 1.1rem; padding-right: 1.1rem; }
  .frise::before { left: .4rem; }
  .frise li { grid-template-columns: 1fr; gap: .1rem; padding-left: 1.6rem; }
  .frise li::before { left: -1px; }
  .frise-date { text-align: left; }
  .page-entete-icone { width: 2.6rem; height: 2.6rem; }
  .fiche-sections { grid-template-columns: 1fr; }
  .fiche-hero { grid-template-columns: 1fr; align-items: start; }
  .fiche-photo { width: 84px; height: 84px; }
  .fiche-nom { font-size: 1.2rem; }
  .choix-mode, .bascule-gestion { grid-template-columns: 1fr; }
  .fenetre { left: 8px !important; top: 8px !important; width: calc(100vw - 16px); height: calc(100vh - 16px); }
  .tableau-materiel, .tableau-saisie { display: block; overflow-x: auto; }
}
@media (max-width: 560px) {
  body { font-size: 14.5px; }
  .identite { border-left: 0; padding-left: 0; order: 3; flex-basis: 100%; }
  .logo img { height: 42px; }
  .nav-btn span, .btn-fantome span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .nav-btn { padding: .55rem .7rem; }
  .bandeau-titre { display: none; }
  .champ-large { grid-column: auto; }
  .grille-fiche, .grille-fiche-bas { grid-template-columns: 1fr; }
  .accueil-actions { grid-template-columns: 1fr; }
  .accueil-hero { padding: 1.1rem; }
  .recherche { flex-wrap: wrap; }
  .barre-actions { width: 100%; flex-wrap: nowrap; }
  .barre-actions .btn { flex: 1; min-width: 0; padding-left: .5em; padding-right: .5em; }
  .barre-outils { padding-top: .55rem; padding-bottom: .55rem; gap: .5rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
@media print {
  .bandeau, .barre-outils, .menu-domaines, .pied, .fenetre { display: none !important; }
  body.app { height: auto; overflow: visible; display: block; }
}

/* Confirmation d'inscription */
.confirmation { max-width: 640px; padding: 2rem 0; }
.confirmation .intro { margin: 0 auto 1rem; }
.confirmation-icone { display: inline-flex; width: 4.2rem; height: 4.2rem; align-items: center; justify-content: center; border-radius: 50%; background: var(--vert-100); color: var(--vert); margin-bottom: 1rem; box-shadow: 0 0 0 8px rgba(15, 127, 112, .08); }
.confirmation-icone .ico { width: 2.1rem; height: 2.1rem; }
.confirmation h1 { justify-content: center; }
/* Changement de domaine/catégorie ouvert dans la fiche : panneau sous le nom */
.fiche-hero:has(.fiche-domcat .grille-champs) { align-items: start; }
.fiche-domcat:has(.grille-champs) { order: 5; margin-top: .4rem; padding: .8rem; border-radius: 14px; background: rgba(255,255,255,.75); border: 1px solid var(--violet-200); }
.fiche-domcat:has(.grille-champs) .grille-champs { padding: 0; border: 0; background: none; }
.fiche-domcat .message { margin: 0; }
.fiche-domcat .aide-saisie { margin: .2rem 0; }

/* Mon compte */
.app-page .page-contenu { max-width: 1240px; width: 100%; margin: 0 auto; }
.compte-profil { display: flex; align-items: center; gap: 1rem 1.2rem; flex-wrap: wrap; padding: 1.2rem 1.4rem; margin-bottom: 1rem; border-radius: 20px; background: var(--fond-molecules); border: 1px solid var(--violet-200); }
.compte-avatar { width: 3.6rem; height: 3.6rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.25rem; color: #fff; background: linear-gradient(135deg, var(--violet-600), #7b4fd6); box-shadow: 0 6px 16px rgba(91, 63, 209, .3); flex: none; }
.compte-identite { min-width: 0; flex: 1; }
.compte-identite h1 { margin: 0; font-size: 1.35rem; color: var(--violet-950); }
.compte-identite p { margin: .15rem 0 0; display: flex; align-items: center; gap: .4rem; color: var(--encre-douce); }
.compte-puces { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.compte-puces li { display: inline-flex; align-items: center; gap: .35rem; padding: .35rem .8rem; border-radius: 999px; background: rgba(255,255,255,.9); border: 1px solid var(--violet-200); font-size: .88rem; color: var(--encre); }
.compte-puces li .ico { color: var(--violet-600); }
.compte-puces .puce-chef { background: var(--ambre-100); border-color: #f2d9a8; color: #6b4507; }
.compte-puces .puce-chef .ico { color: var(--ambre); }
.app-page .zone-onglets .onglets { border-bottom: 0; padding-bottom: .4rem; }
.cartes-compte { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; margin-top: .6rem; }
.carte-compte { display: flex; flex-direction: column; gap: .35rem; padding: 1.2rem 1.25rem; border-radius: 16px; border: 1px solid var(--trait); background: var(--surface); text-decoration: none; color: var(--encre); transition: border-color .15s, box-shadow .15s, transform .15s; }
.carte-compte > .ico { width: 2.6rem; height: 2.6rem; padding: .6rem; border-radius: 12px; background: var(--violet-100); color: var(--violet-600); margin-bottom: .4rem; }
.carte-compte-titre { font-weight: 700; font-size: 1.05rem; color: var(--violet-900); }
.carte-compte-texte { color: var(--encre-douce); font-size: .92rem; }
.carte-compte:hover { border-color: var(--violet-600); box-shadow: var(--ombre); transform: translateY(-2px); color: var(--encre); }
.carte-section { border-radius: 18px; box-shadow: var(--ombre); padding: 1.3rem 1.5rem; }
.carte-section h2 { margin-top: 0; }
.carte-section h2 .ico { width: 1.9rem; height: 1.9rem; padding: .38rem; border-radius: 9px; background: var(--violet-100); }
.compte-colonnes { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 1.2rem; align-items: start; margin-top: 1.2rem; }
.compte-colonnes > .carte-section, .compte-aide .carte-section { margin: 0; }
.compte-aide { display: flex; flex-direction: column; gap: 1rem; }
.compte-aide p { font-size: .93rem; margin: 0 0 .5rem; }
.carte-conseil { background: var(--ambre-100); border-color: #f2d9a8; box-shadow: none; }
.carte-conseil h2 { color: #6b4507; font-size: 1rem; }
.carte-conseil h2 .ico { background: #fde7b8; color: var(--ambre) !important; }
.carte-conseil-douce { background: var(--violet-50); border-color: var(--violet-200); box-shadow: none; }
.carte-conseil-douce h2 { font-size: 1rem; }
.formulaire-compte { display: flex; flex-direction: column; gap: .9rem; }
.formulaire-compte .grille-champs { margin: 0; }
.formulaire-compte .actions-formulaire { justify-content: flex-start; padding-top: .3rem; }
.grille-etab { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.carte-etroite { max-width: 820px; }
.groupes-liste { list-style: none; padding: 0; margin: .6rem 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: .8rem; }
.groupes-liste li { padding: .9rem 1rem; border-radius: 12px; background: var(--surface); border: 1px solid var(--trait); font-size: .9rem; }
.groupes-liste li strong { display: block; color: var(--violet-900); margin-bottom: .3rem; font-size: .98rem; }
.option-connexion { border-radius: 16px; padding: 1.1rem 1.25rem; background: var(--surface); }
.option-entete label { color: var(--violet-900); font-size: 1.02rem; }
@media (max-width: 860px) {
  .compte-colonnes { grid-template-columns: 1fr; }
  .grille-etab { grid-template-columns: 1fr; }
}
.liens-annexes a.actif { background: var(--surface); color: var(--violet-700); font-weight: 700; box-shadow: var(--ombre); }
/* Photo générique (catégorie / domaine) quand l'objet n'a pas de photo */
.fiche-photo { position: relative; overflow: hidden; }
.fiche-photo-generique { padding: 0; }
.fiche-photo-generique img { width: 100%; height: 100%; max-height: none; object-fit: cover; border-radius: 0; }
.fiche-photo figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: .25rem .4rem; font-size: .7rem; font-weight: 700; text-align: center; color: #fff; background: rgba(35, 23, 94, .72); }
input::placeholder, textarea::placeholder { color: #9aa1b2; opacity: 1; }

/* Page Aide */
.aide-page { max-width: 1100px; }
.aide-hero { display: flex; gap: 1rem; align-items: center; padding: .8rem 1.1rem; border-radius: 20px; background: var(--fond-molecules); border: 1px solid var(--violet-200); margin-bottom: .5rem; }
.aide-hero h1 { margin: 0 0 .1rem; font-size: 1.4rem; color: var(--violet-950); }
.guides { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1rem; }
.guide { display: flex; align-items: center; gap: .85rem; padding: .75rem 1rem; border-radius: 18px; border: 1px solid var(--trait); background: var(--surface); text-decoration: none; color: var(--encre); box-shadow: var(--ombre); transition: border-color .15s, box-shadow .15s, transform .15s; }
.guide:hover { border-color: var(--violet-600); transform: translateY(-2px); box-shadow: 0 10px 26px rgba(62, 42, 158, .14); color: var(--encre); }
.guide-icone { flex: none; display: inline-flex; width: 2.6rem; height: 2.6rem; align-items: center; justify-content: center; border-radius: 14px; background: linear-gradient(135deg, var(--violet-600), #7b4fd6); color: #fff; box-shadow: 0 6px 16px rgba(91, 63, 209, .28); }
.guide-icone .ico { width: 1.5rem; height: 1.5rem; }
.guide-corps { display: flex; flex-direction: column; gap: .15rem; min-width: 0; flex: 1; }
.guide-badge { align-self: flex-start; font-size: .7rem; font-weight: 700; padding: .1rem .5rem; border-radius: 999px; background: var(--rouge-100); color: var(--rouge); }
.guide-titre { font-weight: 700; color: var(--violet-900); }
.guide-texte { font-size: .88rem; color: var(--encre-douce); }
.guide-action { flex: none; display: inline-flex; align-items: center; gap: .35rem; font-weight: 700; font-size: .88rem; color: var(--violet-700); padding: .4rem .75rem; border-radius: 10px; background: var(--violet-50); border: 1px solid var(--violet-200); }
.guide:hover .guide-action { background: var(--violet-600); border-color: var(--violet-600); color: #fff; }
.aide-colonnes { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 1rem; align-items: start; }
.aide-colonnes > .carte-section { margin: 0; }
.bloc-remarque { max-width: none; }
.bloc-remarque label { display: block; font-weight: 700; color: var(--encre-douce); font-size: .92rem; margin-bottom: .5rem; }
.bloc-remarque textarea { min-height: 7rem; border-radius: 12px; background: #fbfaff; }
.bloc-remarque .actions-formulaire { justify-content: flex-start; }
.aide-contact h2 { font-size: 1rem; }
.aide-contact p { font-size: .93rem; }
@media (max-width: 860px) { .aide-colonnes { grid-template-columns: 1fr; } .aide-hero { align-items: flex-start; } }

.aide-page .titre-section { margin: 1.2rem 0 .6rem !important; }
.aide-colonnes .carte-section { padding: 1rem 1.2rem; }
.aide-page .page-entete-icone { width: 2.7rem; height: 2.7rem; }
/* la fiche occupe toute la hauteur de la fenêtre, le pied reste collé en bas
   (sans :has, pour fonctionner aussi sur les navigateurs plus anciens) */
.fenetre-contenu > .fiche { min-height: 100%; }
.fiche > .fiche-pied { margin-top: auto; }
.accueil-texte a.version { text-decoration: none; } .accueil-texte a.version:hover { background: var(--violet-700); color: #fff; }
/* la place libre de la fenêtre va aux informations complémentaires */
.fenetre-contenu > .fiche .fiche-sections { flex: 1 0 auto; grid-template-rows: auto 1fr; }
.fiche-notes { display: flex; flex-direction: column; }
.fiche-section .grille-notes { flex: 1; }
.grille-notes .champ { flex: 1; }
.grille-notes .champ textarea { flex: 1; }
@media (max-width: 860px) { .fenetre-contenu > .fiche .fiche-sections { grid-template-rows: none; } }
@media (max-width: 600px) {
  .fiche-pied-info { display: none; }
  .fiche-pied-actions { width: 100%; margin-left: 0; }
  .fiche-pied-actions .btn { flex: 1; white-space: normal; }
  .fiche-pied-actions .btn-fantome { flex: 0 0 auto; }
}
/* informations complémentaires plus grandes, dates centrées dans leur encadré */
.grille-notes .champ textarea { min-height: 4.6rem; }
.fiche-dates { display: flex; flex-direction: column; }
.fiche-dates .grille-dates { flex: 1; justify-content: center; gap: .8rem; }
/* pictogrammes des domaines */
.domaine-picto { width: 38px; height: 38px; flex: none; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: var(--violet-100); color: var(--violet-600); transition: background-color .15s, color .15s; }
.domaine-picto .ico { width: 23px; height: 23px; stroke-width: 1.8; }
.domaine:hover .domaine-picto { background: var(--violet-200); }
.domaine.actif .domaine-picto { background: var(--violet-600); color: #fff; }
.domaine.actif .domaine-picto .ico { color: #fff; }
#versions { scroll-margin-top: 1rem; } #versions .versions { margin-top: .8rem; }
.auteur-photo { width: 4.4rem; height: 4.4rem; border-radius: 50%; object-fit: cover; flex: none; border: 2px solid var(--violet-200); background: var(--violet-100); }
/* sections de la fiche : titre posé sur un bandeau dégradé (comme l'en-tête, sans motif) */
.fiche-section { border-color: var(--violet-200); padding-top: 0; overflow: hidden; }
.fiche-section h4 { margin: 0 -.8rem .45rem; padding: .32rem .8rem; background: linear-gradient(100deg, #ffffff 0%, #f6f3fe 45%, #ece5fc 100%); border-bottom: 1px solid var(--violet-200); }
.fiche-section h4 .ico { background: #fff; }
/* dessins du catalogue (SVG à fond transparent) : le fond se règle avec --fond-dessin */
.fiche-photo-dessin { padding: 0; background: var(--fond-dessin); }
.fiche-photo-dessin img { width: 100%; height: 100%; object-fit: contain; border-radius: 0; }
/* photo personnelle (chef de laboratoire) : crayon et fenêtre d'envoi */
.fiche-photo-perso { padding: 0; }
.fiche-photo-perso img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
.fiche-photo-modif { position: absolute; right: 6px; bottom: 6px; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--violet-200); background: #fff; color: var(--violet-700); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 2px 6px rgba(42, 27, 107, .25); transition: background-color .15s, color .15s, transform .15s; z-index: 1; }
.fiche-photo-modif .ico { width: 15px; height: 15px; }
.fiche-photo-modif:hover, .fiche-photo-modif:focus-visible { background: var(--violet-600); color: #fff; transform: scale(1.06); }
.fiche-photo figcaption ~ .fiche-photo-modif { bottom: 26px; }
.photo-dialogue { width: min(560px, calc(100vw - 24px)); padding: 0; border: 1px solid var(--violet-200); border-radius: 16px; box-shadow: 0 20px 50px rgba(42, 27, 107, .3); color: var(--encre); background: var(--surface); }
.photo-dialogue::backdrop { background: rgba(28, 20, 70, .45); }
.photo-dialogue-entete { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .55rem .9rem; background: linear-gradient(100deg, #ffffff 0%, #f6f3fe 45%, #ece5fc 100%); border-bottom: 1px solid var(--violet-200); }
.photo-dialogue-entete h3 { display: flex; align-items: center; gap: .45rem; margin: 0; font-size: 1rem; color: var(--violet-900); }
.btn-icone { width: 32px; height: 32px; border: 0; border-radius: 8px; background: transparent; color: var(--encre-douce); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.btn-icone:hover { background: var(--violet-100); color: var(--violet-700); }
.photo-dialogue-corps { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 1rem; padding: 1rem .9rem; align-items: start; }
.photo-apercu { width: 160px; height: 160px; border-radius: 14px; overflow: hidden; border: 1px solid var(--violet-200); background: var(--fond-dessin); }
.photo-apercu img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-choix { display: flex; flex-direction: column; gap: .5rem; align-items: flex-start; }
.photo-nom { margin: 0; font-weight: 700; color: var(--violet-900); }
.photo-fichier { cursor: pointer; }
.photo-aide { margin: 0; font-size: .8rem; color: var(--encre-douce); }
.photo-message { margin: 0; min-height: 1.2em; font-size: .85rem; color: var(--violet-700); font-weight: 600; }
.photo-message-erreur { color: #b42318; }
.photo-dialogue-pied { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .5rem; padding: .6rem .9rem; border-top: 1px solid var(--trait); background: var(--violet-50); }
.photo-dialogue-pied .photo-retirer { margin-right: auto; }
.photo-dialogue[aria-busy="true"] { cursor: progress; }
@media (max-width: 520px) { .photo-dialogue-corps { grid-template-columns: 1fr; } .photo-apercu { margin: 0 auto; } }
.photo-dialogue [hidden] { display: none !important; }
/* Mon compte > Sauvegarde base */
.sauvegarde-apercu { display: flex; gap: 1.1rem; align-items: center; margin: 1rem 0 1.2rem; padding: 1rem 1.1rem; border-radius: 14px; background: linear-gradient(100deg, #ffffff 0%, #f6f3fe 45%, #ece5fc 100%); border: 1px solid var(--violet-200); }
.sauvegarde-fichier { flex: none; width: 3.6rem; height: 4.4rem; border-radius: 6px 16px 6px 6px; background: #1f7a4a; display: flex; align-items: flex-end; justify-content: center; padding-bottom: .55rem; box-shadow: 0 6px 14px rgba(31, 122, 74, .25); }
.sauvegarde-fichier span { color: #fff; font-weight: 700; font-size: .78rem; letter-spacing: .04em; }
.sauvegarde-infos { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; font-size: .92rem; }
.sauvegarde-infos li { display: flex; gap: .45rem; align-items: flex-start; }
.sauvegarde-infos .ico { flex: none; margin-top: .15rem; color: var(--violet-600); }
.sauvegarde-conseil { margin-top: 1rem; display: flex; gap: .4rem; align-items: flex-start; }
/* captcha d'inscription */
.captcha { display: flex; flex-direction: column; gap: .4rem; }
.captcha > label { font-weight: 700; }
.captcha .aide-champ { margin: 0; }
.captcha-ligne { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.captcha-ligne img { display: block; width: 220px; height: 70px; border-radius: 10px; border: 1px solid var(--violet-200); background: #f6f3fe; }
.captcha #i_captcha { max-width: 220px; font-size: 1.15rem; letter-spacing: .3em; text-transform: uppercase; text-align: center; font-weight: 700; }
.captcha.champ-erreur #i_captcha { border-color: #c8372d; }
.captcha-message:empty { display: none; }
.captcha.champ-erreur .captcha-message { color: #b42318; font-weight: 600; }
.captcha-piege { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
/* accueil : identifiant / mot de passe oublié */
.connexion-entete { display: flex; align-items: center; justify-content: space-between; gap: .6rem; flex-wrap: wrap; }
.connexion-entete h2 { margin: 0; }
.connexion-retour { display: none; }
.accueil-connexion.mode-oubli .connexion-formulaire, .accueil-connexion.mode-oubli .connexion-oubli { display: none; }
.accueil-connexion.mode-oubli .connexion-retour { display: inline-flex; }
.accueil-connexion.mode-oubli .connexion-entete h2 { font-size: 1rem; color: var(--encre-douce); }
.bloc-oubli { display: flex; flex-direction: column; gap: .7rem; }
.bloc-oubli[hidden] { display: none; }
.bloc-oubli > h2 { margin: .2rem 0 0; font-size: 1.15rem; }
.oubli-grille { display: grid; gap: .8rem; }
.page-oubli .oubli-grille { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); margin: 1rem 0; }
.oubli-carte { display: flex; flex-direction: column; gap: .55rem; padding: .9rem 1rem 1rem; border-radius: 14px; background: #fff; border: 1px solid var(--violet-200); }
.oubli-carte h3 { display: flex; align-items: center; gap: .45rem; margin: 0; font-size: 1rem; color: var(--violet-900); }
.oubli-carte h3 .ico { width: 1.5rem; height: 1.5rem; padding: .25rem; border-radius: 8px; background: var(--violet-100); color: var(--violet-600); }
.oubli-carte .aide-champ { margin: 0; }
.oubli-carte .champ.champ-erreur input { border-color: #c8372d; }
.oubli-carte .champ.champ-erreur .aide-champ { color: #b42318; font-weight: 600; }
.oubli-carte .btn { align-self: flex-start; }
.oubli-note { display: flex; gap: .4rem; align-items: flex-start; margin: 0; font-size: .82rem; color: var(--encre-douce); }
.accueil-connexion.mode-oubli .accueil-actions { display: none; }
.oubli-carte > .aide-champ { color: var(--encre-douce); font-weight: 400; font-size: .85rem; }
.utilisateurs-total { font-size: 1.05rem; padding: .9rem 1.1rem; border-radius: 14px; background: linear-gradient(100deg, #ffffff 0%, #f6f3fe 45%, #ece5fc 100%); border: 1px solid var(--violet-200); }
.utilisateurs-total strong { color: var(--violet-700); font-size: 1.15em; }
/* accueil : encart d'actualité */
.accueil-actu { display: inline-flex; align-items: center; gap: .55rem; margin: 0 0 1rem; padding: .5rem .85rem .5rem .6rem; border-radius: 999px; background: #fff; border: 1px solid var(--violet-200); color: var(--encre); text-decoration: none; font-size: .95rem; box-shadow: 0 2px 8px rgba(62, 42, 158, .08); max-width: 100%; }
.accueil-actu > .ico:first-child { color: var(--violet-600); flex: none; }
.actu-etiquette { flex: none; padding: .12rem .55rem; border-radius: 999px; background: var(--violet-600); color: #fff; font-size: .75rem; font-weight: 700; }
.actu-texte { font-weight: 600; }
a.accueil-actu:hover { border-color: var(--violet-400, #9b80e0); background: var(--violet-50); }
a.accueil-actu:hover .actu-fleche { transform: translateX(3px); }
.actu-fleche { width: 1rem; height: 1rem; color: var(--violet-600); transition: transform .15s; flex: none; }
.actu-clignote { animation: actu-clignote 1.6s ease-in-out infinite; }
@keyframes actu-clignote { 0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(91, 63, 209, .45); } 50% { opacity: .55; box-shadow: 0 0 0 5px rgba(91, 63, 209, 0); } }
@media (prefers-reduced-motion: reduce) { .actu-clignote { animation: none; } }

/* Gestion des comptes : confirmation, mail verrouillé, mail du nouveau compte */
.actions-formulaire .message-ok { display: inline-flex; align-items: center; gap: .4rem; color: #1f6b5c; font-weight: 700; }
.actions-formulaire .message-ok .ico { width: 1.1em; height: 1.1em; }
.tableau-comptes input.champ-verrouille { background: #eef0f4; color: #6b7285; border-color: #dde1ea; cursor: not-allowed; min-width: 14rem; }
.tableau-comptes input[name^="email"] { min-width: 14rem; }
.grille-nouveau-compte .champ-pleine-largeur { grid-column: 1 / -1; }
.grille-nouveau-compte .champ-pleine-largeur input { max-width: 32rem; }
.mail-nouveau-etat:empty { display: none; }
.mail-etat { display: flex; align-items: center; gap: .4rem; margin: .35rem 0 0; font-size: .9rem; color: var(--encre-douce); }
.mail-etat .ico { width: 1em; height: 1em; flex: none; }
.mail-etat-erreur { color: #c8372d; }
.mail-etat-ok { color: #1f6b5c; }

/* Utilisateurs : pays des établissements, par continent, cartes de taille identique */
.pays-bloc h2 .ico { color: var(--violet-600); width: 1.25em; height: 1.25em; }
.pays-continent + .pays-continent { margin-top: 1.1rem; }
.pays-continent h3 { display: flex; align-items: baseline; gap: .6rem; margin: 0 0 .55rem; font-size: .95rem; color: var(--violet-700); }
.pays-nombre { font-size: .78rem; font-weight: 600; color: var(--encre-douce); background: var(--violet-50); border: 1px solid var(--violet-200); border-radius: 999px; padding: .05rem .55rem; }
.pays-grille { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); grid-auto-rows: 1fr; gap: .55rem; }
.pays-carte { display: flex; align-items: center; gap: .75rem; min-height: 3.6rem; padding: .5rem .75rem; border: 1px solid var(--trait); border-radius: 12px; background: var(--surface); }
.pays-drapeau { flex: none; width: 48px; height: 32px; object-fit: cover; border-radius: 5px; box-shadow: 0 0 0 1px rgba(28, 34, 48, .12), 0 1px 3px rgba(28, 34, 48, .12); }
.pays-nom { line-height: 1.25; font-weight: 600; color: #2c3344; }
.pays-nom small { display: block; font-weight: 400; font-size: .8rem; color: var(--encre-douce); }
.pays-carte-france { border-color: var(--violet-200); background: var(--violet-50); }
.pays-credit { margin: 1rem 0 0; font-size: .78rem; }
@media (max-width: 560px) {
  .pays-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .45rem; }
  .pays-carte { gap: .5rem; min-height: 4.2rem; padding: .45rem .55rem; }
  .pays-drapeau { width: 33px; height: 22px; border-radius: 4px; }
  .pays-nom { font-size: .84rem; }
}

/* Actualité, mode 1 « très visible » : étiquette rouge/orange qui grossit, encart qui pulse */
.actu-flash { background: #e0301e; box-shadow: 0 0 0 0 rgba(224, 48, 30, .6); animation: actu-flash .9s ease-in-out infinite; text-transform: none; }
@keyframes actu-flash {
  0%, 100% { background: #e0301e; transform: scale(1); box-shadow: 0 0 0 0 rgba(224, 48, 30, .6); }
  50% { background: #ff8a00; transform: scale(1.14); box-shadow: 0 0 0 7px rgba(255, 138, 0, 0); }
}
.accueil-actu-flash { gap: .8rem; border-color: #ff8a00; animation: actu-encart 1.8s ease-out infinite; }
@keyframes actu-encart {
  0% { box-shadow: 0 0 0 0 rgba(255, 138, 0, .55); }
  70% { box-shadow: 0 0 0 12px rgba(255, 138, 0, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 138, 0, 0); }
}
.accueil-actu-flash > .ico:first-child, .accueil-actu-flash .actu-fleche { color: #e0301e; }
@media (prefers-reduced-motion: reduce) {
  .actu-flash, .accueil-actu-flash { animation: none; }
  .actu-flash { background: #e0301e; }
}

/* Mot de passe : critères de complexité */
.mdp-criteres { list-style: none; margin: .4rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .3rem .45rem; font-size: .8rem; }
.mdp-criteres li { display: inline-flex; align-items: center; gap: .3rem; padding: .12rem .5rem; border-radius: 999px; background: #f1f2f6; color: var(--encre-douce); border: 1px solid transparent; }
.mdp-criteres li::before { content: "○"; font-weight: 700; }
.mdp-criteres.mdp-saisie li:not(.ok) { background: #fdecea; color: #a8281a; border-color: #f5c6c0; }
.mdp-criteres.mdp-saisie li:not(.ok)::before { content: "✕"; }
.mdp-criteres li.ok { background: #e6f4ef; color: #1f6b5c; border-color: #bfe3d6; }
.mdp-criteres li.ok::before { content: "✓"; }

/* Créer un nouveau compte : mot de passe et critères sur la même ligne */
.mdp-ligne { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .9rem; }
.mdp-ligne input { flex: 0 1 16rem; min-width: 12rem; }
.mdp-ligne .mdp-criteres { margin: 0; flex: 1 1 18rem; }
.renvoi { font-size: .68em; font-weight: 700; margin-left: .12em; color: var(--violet-600); }
.tableau-comptes th .renvoi { color: inherit; }

/* Fenêtre d'information à la connexion (data/pages/inventaire/popupinfo.php) */
.popup-info { width: min(640px, calc(100vw - 2rem)); max-height: calc(100vh - 2rem); padding: 0; border: 0; border-radius: 18px; box-shadow: 0 24px 70px rgba(28, 34, 48, .35); color: var(--encre); overflow: hidden; }
.popup-info[open] { display: flex; flex-direction: column; }
.popup-info::backdrop { background: rgba(28, 22, 60, .55); backdrop-filter: blur(2px); }
.popup-info-entete { display: flex; align-items: center; gap: .7rem; padding: 1rem 1.2rem; background: linear-gradient(100deg, #5b3fd1, #3e2a9e); color: #fff; }
.popup-info-entete h2 { margin: 0; flex: 1; font-size: 1.12rem; line-height: 1.3; color: #fff; }
.popup-info-icone { display: inline-flex; width: 2.2rem; height: 2.2rem; align-items: center; justify-content: center; border-radius: 50%; background: rgba(255, 255, 255, .18); flex: none; }
.popup-info-fermer { background: transparent; border: 0; color: #fff; cursor: pointer; padding: .3rem; border-radius: 8px; display: inline-flex; }
.popup-info-fermer:hover { background: rgba(255, 255, 255, .18); }
.popup-info-corps { padding: 1.1rem 1.3rem .4rem; overflow-y: auto; line-height: 1.5; }
.popup-info-corps p { margin: 0 0 .8rem; max-width: none; }
.popup-info-corps ul { margin: 0 0 .9rem; padding-left: 1.2rem; }
.popup-info-corps li { margin-bottom: .3rem; }
.popup-info-corps .btn { margin: .2rem 0 .4rem; white-space: normal; max-width: 100%; text-align: center; height: auto; }
.popup-info-compte { display: flex; gap: .7rem; align-items: flex-start; margin: .6rem 0 .9rem; padding: .8rem 1rem; border-radius: 12px; }
.popup-info-compte .ico { flex: none; width: 1.3rem; height: 1.3rem; margin-top: .1rem; }
.popup-info-compte ul { margin: .3rem 0 .4rem; }
.popup-info-alerte { background: #fdecea; border: 1px solid #f5c6c0; color: #8a2216; }
.popup-info-alerte a { color: #8a2216; font-weight: 700; }
.popup-info-ok { background: #e6f4ef; border: 1px solid #bfe3d6; color: #1f6b5c; }
.popup-info-pied { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .6rem 1rem; padding: .8rem 1.3rem 1rem; border-top: 1px solid var(--trait); background: var(--papier); }
.popup-info-masquer { display: inline-flex; align-items: center; gap: .45rem; font-size: .9rem; color: var(--encre-douce); font-weight: 400; cursor: pointer; }
.popup-info-masquer input { width: auto; margin: 0; }

/* Page « A propos » : volets dépliables (Petite histoire, Versions, Utilisateurs) */
.volet { margin: 1rem 0; border: 1px solid var(--trait); border-radius: 16px; background: var(--surface); box-shadow: var(--ombre); overflow: hidden; }
.volet > summary, .volet-entete { display: flex; align-items: center; gap: .7rem; padding: .9rem 1.2rem; font-weight: 700; font-size: 1.05rem; color: var(--violet-700); }
.volet > summary { cursor: pointer; list-style: none; }
.volet > summary::-webkit-details-marker { display: none; }
.volet > summary:hover { background: var(--violet-50); }
.volet > summary:focus-visible { outline: 3px solid var(--violet-200); outline-offset: -3px; }
.volet-icone { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: 10px; background: var(--violet-50); color: var(--violet-600); flex: none; }
.volet-titre { flex: 1; }
.volet-chevron { width: .7rem; height: .7rem; border-right: 2px solid var(--violet-600); border-bottom: 2px solid var(--violet-600); transform: rotate(45deg); margin: 0 .3rem .25rem 0; transition: transform .2s; flex: none; }
.volet[open] > summary .volet-chevron { transform: rotate(-135deg); margin-bottom: -.2rem; }
.volet[open] > summary { border-bottom: 1px solid var(--trait); }
.volet-entete { border-bottom: 1px solid var(--trait); }
.volet-corps { padding: 1rem 1.2rem 1.1rem; }
.volet-corps > p:first-child { margin-top: 0; }
.volet-corps .versions { margin-bottom: 0; }
.volet-corps .version-actuelle { margin-bottom: .6rem; }
.volet-suite { margin-top: .4rem; }
.volet-suite > summary { cursor: pointer; display: inline-flex; align-items: center; gap: .4rem; padding: .4rem .8rem; border-radius: 999px; border: 1px solid var(--violet-200); background: var(--violet-50); color: var(--violet-700); font-weight: 700; font-size: .9rem; list-style: none; }
.volet-suite > summary::-webkit-details-marker { display: none; }
.volet-suite > summary::after { content: "▾"; }
.volet-suite[open] > summary::after { content: "▴"; }
.volet-suite > .versions { margin-top: 1rem; }
.volet-corps .pays-bloc { margin-top: 1rem; }
.pays-titre { display: flex; align-items: center; gap: .55rem; font-size: 1rem; margin: 0 0 .8rem; }
.pays-titre .ico { color: var(--violet-600); }
@media (prefers-reduced-motion: reduce) { .volet-chevron { transition: none; } }

/* Fiche sécurité des produits chimiques (pictogrammes de danger, mentions H) */
.fiche-secu { border: 1px solid var(--trait); border-radius: var(--rayon); padding: .7rem .85rem .6rem; background: var(--surface); }
.fiche-secu-entete { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; }
.fiche-secu-pictos { display: flex; flex-wrap: wrap; gap: .45rem; margin: 0; padding: 0; list-style: none; }
.fiche-secu-pictos li { display: flex; flex-direction: column; align-items: center; width: 4.6rem; text-align: center; font-size: .68rem; line-height: 1.15; color: var(--encre-douce); }
.fiche-secu-pictos img { width: 3.4rem; height: 3.4rem; }
.fiche-secu-mention { margin: 0; padding: .2rem .7rem; border-radius: 6px; font-weight: 800; letter-spacing: .04em; background: #fff3d6; color: #7a4f06; border: 1px solid #f0d58f; }
.fiche-secu-mention.fiche-secu-danger { background: #fdecea; color: #a1261b; border-color: #f5c6c0; }
.fiche-secu-mentions { margin: .6rem 0 .3rem; padding-left: 1.1rem; font-size: .88rem; line-height: 1.4; }
.fiche-secu-mentions li { margin-bottom: .15rem; }
.fiche-secu-mentions strong { color: var(--encre); }
.fiche-secu-remarque { display: flex; gap: .35rem; align-items: flex-start; margin: .3rem 0; font-size: .82rem; color: var(--encre-douce); }
.fiche-secu-remarque .ico { flex: none; width: 1rem; height: 1rem; margin-top: .1rem; }
.fiche-secu-source { margin: .45rem 0 .15rem; font-size: .76rem; color: var(--encre-douce); }
.fiche-secu-avertissement { margin: 0; font-size: .76rem; font-style: italic; color: var(--encre-douce); }
@media print { .fiche-secu-pictos img { width: 2.6rem; height: 2.6rem; } }

/* Bouton « Produit dangereux » (bandeau de la fiche) et encart sécurité qui remplace le bas de la fiche */
button.fiche-badge-danger { cursor: pointer; font: inherit; font-size: .86rem; font-weight: 700; background: #fdecea; border-color: #f0b4ac; color: #a1261b; gap: .3rem; padding-left: .45rem; }
button.fiche-badge-danger img { width: 20px; height: 20px; flex: none; }
button.fiche-badge-danger .ico { color: #a1261b; }
button.fiche-badge-danger:hover { background: #fbdcd8; }
button.fiche-badge-danger:focus-visible { outline: 3px solid rgba(161, 38, 27, .35); outline-offset: 2px; }
button.fiche-badge-danger[aria-pressed="true"] { background: #a1261b; border-color: #a1261b; color: #fff; }
button.fiche-badge-danger[aria-pressed="true"] img { background: #fff; border-radius: 4px; }
.fiche-secu-panneau { border: 1px solid #f0b4ac; border-radius: 12px; padding: .55rem .8rem .7rem; background: var(--surface); }
.fiche-secu-panneau[hidden], [data-fiche-sections][hidden] { display: none !important; }
.fiche-secu-panneau h4 { display: flex; align-items: center; gap: .4rem; margin: 0 0 .5rem; font-size: .95rem; color: #a1261b; }
.fiche-secu-panneau h4 .ico { width: 1.35rem; height: 1.35rem; padding: .22rem; border-radius: 8px; background: #fdecea; color: #a1261b; }
.fiche-secu-panneau .fiche-secu { border: 0; padding: 0; }

/* Fenêtre « Alerte quantité et péremption » : sur petit écran, une carte par produit */
@media (max-width: 700px) {
  .tableau-alertes thead { display: none; }
  .tableau-alertes, .tableau-alertes tbody { display: block; width: 100%; }
  .tableau-alertes tr { display: grid; grid-template-columns: 1fr auto; gap: .15rem .8rem; padding: .6rem .5rem; border-bottom: 1px solid var(--trait); }
  .tableau-alertes td { display: block; border: 0; padding: 0; text-align: left !important; width: auto !important; }
  .tableau-alertes .al-mat { font-weight: 700; grid-column: 1; }
  .tableau-alertes .al-qte { grid-column: 2; grid-row: 1; text-align: right !important; white-space: nowrap; }
  .tableau-alertes .al-pre, .tableau-alertes .al-com, .tableau-alertes .al-ref { grid-column: 1 / -1; font-size: .88rem; color: var(--encre-douce); }
  .tableau-alertes .al-pre:empty, .tableau-alertes .al-com:empty, .tableau-alertes .al-ref:empty { display: none; }
  .tableau-alertes .al-ref::before { content: "Réf. "; }
  .tableau-alertes .col-divers { grid-column: 1 / -1; display: flex; align-items: center; gap: .6rem; }
  .tableau-alertes .col-divers .ico-vide { display: none; }
  .tableau-alertes .date-perime { display: inline; }
}