/* =========================================================================
   OCSIA2 — espace de gestion. Calme, lisible, rapide. Couleur d'accent = couleur principale du site.
   Identité OCSIA2 : « atelier » chaleureux (papier clair, encre, formes douces et plates, titres arrondis),
   pensée d'abord pour le téléphone (app installable, barre d'onglets), jamais chargée.
   Fonctionne aussi sans theme.css (écran d'installation) grâce aux valeurs de secours.
   ========================================================================= */
:root {
  --a-accent: var(--c-primaire, #1f4d3a);
  --a-accent-txt: var(--c-primaire-txt, #fff);
  --a-fond: #f7f4ee; --a-surface: #fffefb; --a-surface-2: #f1ece2; --a-texte: #1d1b16; --a-doux: #625d52; --a-ligne: #e6dfd2;
  --a-ok: #1e7a46; --a-attention: #a35a00; --a-erreur: #b42318; --a-info: #1d5fa8;
  --a-rayon: 16px; --a-ombre: 0 1px 0 rgb(60 45 20 / .06), 0 6px 18px rgb(60 45 20 / .06);
  --a-police: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --a-titres: ui-rounded, "SF Pro Rounded", "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
  --a-nav: 248px;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="clair"]) { --a-fond: #121211; --a-surface: #1c1c1a; --a-surface-2: #252523; --a-texte: #ecebe6; --a-doux: #a9a8a1; --a-ligne: #34332f; --a-ombre: 0 1px 2px rgb(0 0 0 / .4), 0 8px 24px rgb(0 0 0 / .35); --a-accent: color-mix(in srgb, var(--c-primaire, #3b8a68) 70%, white); --a-accent-txt: #0d0d0c; }
}
:root[data-theme="sombre"] { --a-fond: #121211; --a-surface: #1c1c1a; --a-surface-2: #252523; --a-texte: #ecebe6; --a-doux: #a9a8a1; --a-ligne: #34332f; --a-accent: color-mix(in srgb, var(--c-primaire, #3b8a68) 70%, white); --a-accent-txt: #0d0d0c; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body.admin { margin: 0; background: var(--a-fond); color: var(--a-texte); font: 15px/1.55 var(--a-police); -webkit-font-smoothing: antialiased; }
img, svg, video, iframe { max-width: 100%; }
a { color: var(--a-accent); }
h1, h2, h3 { line-height: 1.2; margin: 0 0 .6em; font-weight: 700; letter-spacing: -.01em; font-family: var(--a-titres); }
h2 { font-size: 1.12rem; } h3 { font-size: 1rem; }
p { margin: 0 0 .8em; }
code { font: .88em ui-monospace, monospace; background: var(--a-surface-2); padding: .1em .35em; border-radius: 5px; }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--a-accent) 60%, transparent); outline-offset: 2px; border-radius: 6px; }
.visuellement-cache { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.lien-evitement { position: absolute; left: 1rem; top: -4rem; z-index: 200; background: var(--a-texte); color: var(--a-fond); padding: .5rem 1rem; border-radius: 8px; }
.lien-evitement:focus { top: .5rem; }
.icone { width: 1.2em; height: 1.2em; flex: none; }
.icone--texte { display: inline-grid; place-items: center; font-style: normal; line-height: 1; }

/* ---------- Structure ---------- */
.a-entete { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: .75rem; height: 56px; padding: 0 1rem; background: color-mix(in srgb, var(--a-surface) 90%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--a-ligne); }
.a-marque { font-weight: 700; color: var(--a-texte); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: inline-flex; align-items: center; gap: .55rem; min-width: 0; }
.a-marque > span { overflow: hidden; text-overflow: ellipsis; }
.a-marque__logo, .a-marque__logo img { height: 2rem; width: auto; max-width: 3rem; object-fit: contain; display: block; flex: none; }
.a-menu-bouton .icone, .a-cloche .icone { width: 1.25rem; height: 1.25rem; }
.telegram-relier__titre { display: flex; align-items: center; gap: .5rem; margin: 0 0 .4rem; }
.telegram-relier__qr { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-top: .5rem; }
.telegram-relier__qr svg { width: 168px; height: 168px; background: #fff; padding: 6px; border-radius: 10px; }
.apercu-icones { display: flex; align-items: center; gap: .9rem; margin: .4rem 0 1rem; }
.apercu-icones img { background: repeating-conic-gradient(#eee 0 25%, #fff 0 50%) 0 0 / 12px 12px; border: 1px solid var(--a-ligne, #ddd); }
.a-voir { margin-left: .5rem; font-size: .9rem; color: var(--a-doux); text-decoration: none; white-space: nowrap; }
.a-voir:hover { color: var(--a-accent); }
.a-outils { margin-left: auto; display: flex; align-items: center; gap: .35rem; }
.a-bouton-rond, .a-moi { position: relative; display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--a-ligne); background: var(--a-surface); color: var(--a-texte); font: inherit; font-weight: 700; cursor: pointer; text-decoration: none; }
.a-moi { background: var(--a-accent); color: var(--a-accent-txt); border: 0; }
.a-pastille { position: absolute; top: -2px; right: -2px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: var(--a-erreur); color: #fff; font-size: 11px; display: grid; place-items: center; }
.a-menu-bouton { display: none; width: 40px; height: 40px; border: 0; background: none; font-size: 1.4rem; color: var(--a-texte); cursor: pointer; }
.a-nav { position: fixed; top: 56px; bottom: 0; left: 0; width: var(--a-nav); overflow-y: auto; padding: 1rem .75rem 2rem; border-right: 1px solid var(--a-ligne); background: var(--a-surface); }
.a-nav__groupe { margin: 1rem .6rem .3rem; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--a-doux); }
.a-nav ul { list-style: none; margin: 0; padding: 0; }
.a-nav a { display: flex; align-items: center; gap: .6rem; padding: .5rem .6rem; min-height: 40px; border-radius: 9px; color: var(--a-texte); text-decoration: none; }
.a-nav a:hover { background: var(--a-surface-2); }
.a-nav a[aria-current="page"] { background: color-mix(in srgb, var(--a-accent) 12%, transparent); color: var(--a-accent); font-weight: 600; }
.a-nav__sortie { margin: 1.5rem .6rem 0; }
.a-nav__version { margin: .5rem .6rem; font-size: .75rem; color: var(--a-doux); }
.a-principal { margin-left: var(--a-nav); padding: 1.5rem clamp(1rem, 3vw, 2.5rem) 6rem; max-width: 1280px; outline: none; }
.a-titre { font-size: 1.6rem; margin-bottom: 1.25rem; }
@media (max-width: 900px) {
  .a-menu-bouton { display: inline-grid; place-items: center; }
  .a-voir { display: none; }
  .a-nav { transform: translateX(-102%); transition: transform .2s ease; z-index: 39; width: min(86vw, 320px); box-shadow: var(--a-ombre); }
  .a-nav.ouvert { transform: none; }
  .a-principal { margin-left: 0; padding-inline: 1rem; }
}

/* ---------- Cartes, grilles ---------- */
.carte { background: var(--a-surface); border: 1px solid var(--a-ligne); border-radius: var(--a-rayon); padding: clamp(1rem, 2vw, 1.4rem); margin-bottom: 1rem; box-shadow: var(--a-ombre); }
.carte--accent { border-color: color-mix(in srgb, var(--a-accent) 40%, var(--a-ligne)); background: color-mix(in srgb, var(--a-accent) 5%, var(--a-surface)); }
fieldset.carte { min-width: 0; }
fieldset.carte > legend { font-weight: 650; padding: 0 .3rem; }
.grille-2 { display: grid; gap: 1rem; } @media (min-width: 1000px) { .grille-2 { grid-template-columns: 1fr 1fr; align-items: start; } .grille-2--large { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); } }
.grille-chiffres { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); margin-bottom: 1rem; }
.chiffre-carte { background: var(--a-surface); border: 1px solid var(--a-ligne); border-radius: var(--a-rayon); padding: 1rem; text-decoration: none; color: inherit; display: block; }
.chiffre-carte__n { display: block; font-size: 1.7rem; font-weight: 700; letter-spacing: -.02em; }
.chiffre-carte--sante .chiffre-carte__n { color: var(--a-ok); }
.choix-modeles { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.carte-choix { display: block; padding: .9rem 1rem; border: 1.5px solid var(--a-ligne); border-radius: var(--a-rayon); background: var(--a-surface); cursor: pointer; text-align: left; font: inherit; color: inherit; }
.carte-choix:hover, .carte-choix:has(input:checked) { border-color: var(--a-accent); background: color-mix(in srgb, var(--a-accent) 6%, var(--a-surface)); }
.vide { padding: 1.5rem; text-align: center; color: var(--a-doux); border: 1.5px dashed var(--a-ligne); border-radius: var(--a-rayon); list-style: none; }

/* ---------- Boutons ---------- */
.bouton { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; min-height: 40px; padding: .5rem 1rem; border-radius: 10px; border: 1px solid transparent; font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; white-space: nowrap; transition: background .15s, box-shadow .15s, transform .1s; }
.bouton:active { transform: translateY(1px); }
.bouton:disabled { opacity: .55; cursor: not-allowed; }
.bouton--principal { background: var(--a-accent); color: var(--a-accent-txt); }
.bouton--principal:hover { box-shadow: 0 4px 14px color-mix(in srgb, var(--a-accent) 35%, transparent); }
.bouton--secondaire { background: var(--a-surface); color: var(--a-texte); border-color: var(--a-ligne); }
.bouton--secondaire:hover { border-color: var(--a-accent); color: var(--a-accent); }
.bouton--danger { background: var(--a-erreur); color: #fff; }
.bouton--lien { background: none; border: 0; padding: .25rem .4rem; min-height: 32px; color: var(--a-accent); font-weight: 500; }
.bouton--petit { min-height: 32px; padding: .3rem .7rem; font-size: .88rem; }
.bouton--large { white-space: normal; text-align: center;  width: 100%; min-height: 48px; }
.lien { background: none; border: 0; padding: 0; color: var(--a-accent); font: inherit; text-decoration: underline; cursor: pointer; }
.barre-actions { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin-top: 1rem; }
.barre-actions--collante { position: sticky; bottom: 0; z-index: 20; margin: 1rem calc(-1 * clamp(1rem, 2vw, 1.4rem)) 0; padding: .8rem clamp(1rem, 2vw, 1.4rem); background: color-mix(in srgb, var(--a-surface) 92%, transparent); backdrop-filter: blur(10px); border-top: 1px solid var(--a-ligne); border-radius: 0 0 var(--a-rayon) var(--a-rayon); }
form > .barre-actions--collante { border-radius: var(--a-rayon); margin-inline: 0; box-shadow: var(--a-ombre); border: 1px solid var(--a-ligne); }
.en-ligne { display: inline-flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin: 0; }
.en-ligne input:not([type=checkbox]):not([type=hidden]), .en-ligne select { width: auto; min-width: 8rem; }

/* ---------- Formulaires ---------- */
.formulaire-admin { display: block; }
.champ { display: grid; gap: .3rem; margin-bottom: .9rem; }
.champ label, .c-champ > span { font-weight: 600; font-size: .92rem; }
.aide { color: var(--a-doux); font-size: .87rem; margin: 0 0 .4rem; }
.requis { color: var(--a-erreur); }
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]), select, textarea {
  width: 100%; min-height: 42px; padding: .5rem .7rem; border: 1px solid var(--a-ligne); border-radius: 9px; background: var(--a-surface); color: var(--a-texte); font: inherit; font-size: max(16px, 1rem);
}
@media (min-width: 900px) { input:not([type=checkbox]):not([type=radio]), select, textarea { font-size: .95rem !important; } }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--a-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--a-accent) 18%, transparent); }
textarea { resize: vertical; }
input[type=color] { width: 44px; height: 40px; padding: 2px; border: 1px solid var(--a-ligne); border-radius: 8px; background: var(--a-surface); }
.couleur-champ { display: flex; gap: .4rem; align-items: center; } .couleur-champ input[type=text] { max-width: 8rem; font-family: ui-monospace, monospace; }
.ligne-champs { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.formulaire-admin--ligne { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); align-items: end; }
.formulaire-admin--ligne .champ { margin: 0; }
.case { display: inline-flex; gap: .5rem; align-items: flex-start; cursor: pointer; min-height: 32px; } .case input { width: 18px; height: 18px; accent-color: var(--a-accent); margin-top: .15rem; }
.case--petite { font-size: .9rem; align-items: center; } .case--petite input { margin-top: 0; }
.champ--case { margin-bottom: .7rem; }
.interrupteur { display: inline-flex; align-items: center; gap: .6rem; cursor: pointer; }
.interrupteur input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.interrupteur__piste { position: relative; width: 42px; height: 24px; border-radius: 12px; background: var(--a-ligne); transition: background .15s; flex: none; }
.interrupteur__piste::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgb(0 0 0 / .25); transition: transform .15s; }
.interrupteur input:checked + .interrupteur__piste { background: var(--a-accent); }
.interrupteur input:checked + .interrupteur__piste::after { transform: translateX(18px); }
.interrupteur input:focus-visible + .interrupteur__piste { outline: 3px solid color-mix(in srgb, var(--a-accent) 50%, transparent); outline-offset: 2px; }
.ligne-repetable { position: relative; display: grid; gap: .5rem; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); padding: .6rem 2.4rem .6rem .6rem; margin-bottom: .5rem; background: var(--a-surface-2); border-radius: 10px; }
.ligne-repetable--bloc { grid-template-columns: 1fr; }
.ligne-repetable__retirer { position: absolute; top: .45rem; right: .45rem; width: 30px; height: 30px; border: 0; border-radius: 50%; background: none; color: var(--a-doux); font-size: 1.2rem; cursor: pointer; }
.ligne-repetable__retirer:hover { background: var(--a-surface); color: var(--a-erreur); }
.filtres { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; } .filtres input, .filtres select { width: auto; flex: 1 1 12rem; }
.onglets { display: flex; gap: .25rem; overflow-x: auto; border-bottom: 1px solid var(--a-ligne); margin-bottom: 1rem; }
.onglets a { padding: .55rem .9rem; white-space: nowrap; text-decoration: none; color: var(--a-doux); border-bottom: 2px solid transparent; }
.onglets a[aria-current="page"], .onglets a.actif { color: var(--a-accent); border-color: var(--a-accent); font-weight: 600; }

/* ---------- Messages ---------- */
.alerte { padding: .75rem 1rem; border-radius: 10px; background: color-mix(in srgb, var(--a-info) 10%, var(--a-surface)); border: 1px solid color-mix(in srgb, var(--a-info) 25%, transparent); margin-bottom: 1rem; }
.alerte--succes, .alerte--ok { background: color-mix(in srgb, var(--a-ok) 10%, var(--a-surface)); border-color: color-mix(in srgb, var(--a-ok) 30%, transparent); }
.alerte--erreur { background: color-mix(in srgb, var(--a-erreur) 9%, var(--a-surface)); border-color: color-mix(in srgb, var(--a-erreur) 30%, transparent); }
.alerte--attention { background: color-mix(in srgb, var(--a-attention) 10%, var(--a-surface)); border-color: color-mix(in srgb, var(--a-attention) 30%, transparent); }
.alerte--flottante { position: sticky; top: 64px; z-index: 30; box-shadow: var(--a-ombre); }
.a-surligne { animation: surligne 2.4s ease; } @keyframes surligne { 0%, 40% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--a-accent) 35%, transparent); } }
.badge { display: inline-block; padding: .1rem .55rem; border-radius: 999px; font-size: .78rem; font-weight: 600; background: var(--a-surface-2); color: var(--a-doux); vertical-align: middle; }
.badge--ok { background: color-mix(in srgb, var(--a-ok) 14%, transparent); color: var(--a-ok); }
.badge--attention { background: color-mix(in srgb, var(--a-attention) 14%, transparent); color: var(--a-attention); }
.badge--erreur, .badge--ko { background: color-mix(in srgb, var(--a-erreur) 12%, transparent); color: var(--a-erreur); }
.badge--info { background: color-mix(in srgb, var(--a-info) 12%, transparent); color: var(--a-info); }
.a-toasts { position: fixed; z-index: 300; right: 1rem; bottom: 1rem; display: grid; gap: .5rem; max-width: min(26rem, calc(100vw - 2rem)); }
.a-toast { margin: 0; padding: .75rem 1rem; border-radius: 10px; background: var(--a-texte); color: var(--a-fond); box-shadow: 0 10px 30px rgb(0 0 0 / .25); animation: entree .25s ease; }
.a-toast--erreur { background: var(--a-erreur); color: #fff; }
.a-toast--sortie { opacity: 0; transform: translateY(8px); transition: all .35s; }
@keyframes entree { from { opacity: 0; transform: translateY(8px); } }

/* ---------- Tableaux ---------- */
.tableau { width: 100%; border-collapse: collapse; background: var(--a-surface); border: 1px solid var(--a-ligne); border-radius: var(--a-rayon); overflow: hidden; font-size: .93rem; }
.tableau th { text-align: left; font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--a-doux); background: var(--a-surface-2); font-weight: 650; }
.tableau th, .tableau td { padding: .6rem .75rem; border-bottom: 1px solid var(--a-ligne); vertical-align: middle; }
.tableau tr:last-child td { border-bottom: 0; }
.tableau tbody tr:hover { background: color-mix(in srgb, var(--a-accent) 3%, transparent); }
.tableau th.triable { cursor: pointer; } .tableau th[aria-sort="ascending"]::after { content: " ▲"; } .tableau th[aria-sort="descending"]::after { content: " ▼"; }
.tableau-defilant { overflow-x: auto; }
@media (max-width: 700px) { .tableau { display: block; overflow-x: auto; white-space: nowrap; } }
.liste-simple { padding-left: 1.2rem; } .liste-def dt { font-weight: 600; } .liste-def dd { margin: 0 0 .5rem; color: var(--a-doux); }
.liste-barres { list-style: none; padding: 0; display: grid; gap: .45rem; }
.liste-barres li { display: grid; grid-template-columns: minmax(8rem, 1fr) 3fr auto; gap: .6rem; align-items: center; font-size: .9rem; }
.histogramme { display: flex; align-items: flex-end; gap: 2px; height: 120px; padding: .5rem 0; }
.histogramme span { flex: 1; background: color-mix(in srgb, var(--a-accent) 70%, transparent); border-radius: 3px 3px 0 0; min-height: 2px; }
.pagination { display: flex; gap: 1rem; justify-content: space-between; margin-top: 1rem; }
.note-sante { font-size: 2.6rem; font-weight: 800; } .ok { color: var(--a-ok); } .ko { color: var(--a-erreur); } .moyen { color: var(--a-attention); }
.liste-controles { list-style: none; padding: 0; } .liste-controles li { padding: .5rem 0; border-bottom: 1px solid var(--a-ligne); }
.grille-droits { display: grid; gap: .3rem 1rem; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.code-gros { font: 600 1.3rem ui-monospace, monospace; letter-spacing: .1em; }
.liste-notifs li, .historique li { padding: .4rem 0; border-bottom: 1px solid var(--a-ligne); list-style: none; }
.historique { padding: 0; }

/* ---------- Panneaux (notifications, assistant), dialogues ---------- */
.a-panneau, .a-assistant { position: fixed; z-index: 60; top: 64px; right: 1rem; width: min(26rem, calc(100vw - 2rem)); max-height: calc(100dvh - 80px); display: flex; flex-direction: column; background: var(--a-surface); border: 1px solid var(--a-ligne); border-radius: 16px; box-shadow: 0 24px 60px rgb(0 0 0 / .22); overflow: hidden; }
.a-panneau__tete { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .8rem 1rem; border-bottom: 1px solid var(--a-ligne); }
.a-panneau__tete h2 { margin: 0; font-size: 1rem; }
.a-panneau__tete button { width: 36px; height: 36px; border: 0; background: none; font-size: 1.4rem; cursor: pointer; color: var(--a-doux); border-radius: 50%; }
.a-panneau ul { list-style: none; margin: 0; padding: .5rem 1rem; overflow-y: auto; }
.a-panneau li { padding: .55rem 0; border-bottom: 1px solid var(--a-ligne); font-size: .92rem; } .a-panneau li.non-lu { font-weight: 600; } .a-panneau li a { color: inherit; text-decoration: none; }
.a-assistant__fil { flex: 1; overflow-y: auto; padding: 1rem; display: grid; gap: .6rem; align-content: start; }
.a-bulle { max-width: 92%; padding: .6rem .8rem; border-radius: 14px; background: var(--a-surface-2); font-size: .93rem; }
.a-bulle--moi { justify-self: end; background: var(--a-accent); color: var(--a-accent-txt); }
.a-bulle ol { margin: .4rem 0; padding-left: 1.2rem; }
.a-puce { display: inline-block; margin: .2rem .2rem 0 0; padding: .3rem .7rem; border: 1px solid var(--a-ligne); border-radius: 999px; background: var(--a-surface); color: inherit; font: inherit; font-size: .85rem; cursor: pointer; }
.a-assistant__saisie { display: flex; gap: .4rem; padding: .7rem; border-top: 1px solid var(--a-ligne); }
.a-assistant__mode { margin: 0; padding: 0 1rem .7rem; font-size: .78rem; color: var(--a-doux); }
.a-dialogue { border: 0; border-radius: 16px; padding: 1.25rem; width: min(30rem, calc(100vw - 2rem)); background: var(--a-surface); color: var(--a-texte); box-shadow: 0 30px 80px rgb(0 0 0 / .3); }
.a-dialogue--large { width: min(60rem, calc(100vw - 2rem)); max-height: 86dvh; display: flex; flex-direction: column; padding: 0; }
.a-dialogue--large > :not(.a-panneau__tete) { padding-inline: 1.25rem; }
.a-dialogue--large .grille-medias { overflow-y: auto; flex: 1; }
.a-dialogue::backdrop, .a-palette::backdrop { background: rgb(0 0 0 / .35); backdrop-filter: blur(3px); }
.a-palette { border: 0; border-radius: 16px; padding: 0; width: min(36rem, calc(100vw - 2rem)); background: var(--a-surface); color: var(--a-texte); box-shadow: 0 30px 80px rgb(0 0 0 / .3); }
.a-palette input { border: 0 !important; border-bottom: 1px solid var(--a-ligne) !important; border-radius: 0 !important; padding: 1rem 1.2rem !important; font-size: 1.05rem !important; box-shadow: none !important; }
.a-palette ul { list-style: none; margin: 0; padding: .4rem; max-height: 50dvh; overflow-y: auto; }
.a-palette a { display: block; padding: .6rem .8rem; border-radius: 9px; color: var(--a-texte); text-decoration: none; } .a-palette a:hover, .a-palette a[aria-selected="true"] { background: color-mix(in srgb, var(--a-accent) 10%, transparent); }

/* ---------- Médias ---------- */
.zone-depot { text-align: center; border: 2px dashed var(--a-ligne); transition: border-color .15s, background .15s; }
.zone-depot.survol { border-color: var(--a-accent); background: color-mix(in srgb, var(--a-accent) 6%, var(--a-surface)); }
.zone-depot progress { width: 100%; accent-color: var(--a-accent); }
.grille-medias { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.media-carte, .media-choix { display: flex; flex-direction: column; gap: .35rem; width: 100%; padding: .4rem; border: 1.5px solid var(--a-ligne); border-radius: 10px; background: var(--a-surface); cursor: pointer; color: inherit; font: inherit; text-align: left; }
.media-carte img, .media-choix img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 7px; background: var(--a-surface-2); }
.media-choix[aria-pressed="true"] { border-color: var(--a-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--a-accent) 25%, transparent); }
.media-carte__type, .media-choix__type { display: grid; place-items: center; aspect-ratio: 1; border-radius: 7px; background: var(--a-surface-2); font-weight: 700; color: var(--a-doux); }
.media-choix__nom { font-size: .78rem; color: var(--a-doux); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.media-champ { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.media-apercus { display: flex; flex-wrap: wrap; gap: .4rem; }
.media-apercu { position: relative; display: inline-block; width: 64px; height: 64px; border-radius: 8px; overflow: hidden; background: var(--a-surface-2); }
.media-apercu img { width: 100%; height: 100%; object-fit: cover; }
.media-apercu__retirer { position: absolute; top: 2px; right: 2px; width: 22px; height: 22px; border-radius: 50%; border: 0; background: rgb(0 0 0 / .6); color: #fff; cursor: pointer; line-height: 1; }

/* ---------- Texte riche ---------- */
.riche-editeur { border: 1px solid var(--a-ligne); border-radius: 10px; overflow: hidden; background: var(--a-surface); }
.riche-barre { display: flex; flex-wrap: wrap; gap: 2px; padding: .3rem; background: var(--a-surface-2); border-bottom: 1px solid var(--a-ligne); }
.riche-barre button { min-width: 34px; height: 32px; border: 0; border-radius: 6px; background: none; color: var(--a-texte); font: inherit; font-weight: 700; cursor: pointer; }
.riche-barre button:hover { background: var(--a-surface); }
.riche-zone { min-height: 8rem; padding: .7rem .9rem; outline: none; }
.riche-zone:focus { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--a-accent) 25%, transparent); }

/* ---------- Menus ---------- */
.liste-triable { list-style: none; padding: 0; margin: 0 0 .8rem; display: grid; gap: .4rem; }
.menu-item { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; padding: .5rem; border: 1px solid var(--a-ligne); border-radius: 10px; background: var(--a-surface); }
.menu-item.glisse { opacity: .5; }
.menu-item > input { flex: 1 1 10rem; width: auto; }
.menu-item .menu-item__icone { flex: 0 0 3.2rem; text-align: center; }
.menu-item small { color: var(--a-doux); flex: 1 1 8rem; }
.poignee { cursor: grab; color: var(--a-doux); padding: 0 .3rem; user-select: none; }
.menu-enfants { flex-basis: 100%; list-style: none; margin: .3rem 0 0 1.6rem; padding: 0; display: grid; gap: .3rem; }
.menu-enfants li { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.ajout-menu { display: flex; gap: .4rem; } .ajout-menu select { flex: 1; }

/* ---------- Constructeurs ---------- */
.c-liste { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .5rem; counter-reset: c; }
.c-element { border: 1px solid var(--a-ligne); border-radius: 12px; background: var(--a-surface); }
.c-element.ouvert { border-color: color-mix(in srgb, var(--a-accent) 35%, var(--a-ligne)); }
.c-tete { display: flex; align-items: center; gap: .5rem; padding: .4rem .5rem .4rem .8rem; }
.c-resume { flex: 1; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; min-height: 40px; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.c-type { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--a-doux); }
.c-num { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--a-accent); color: var(--a-accent-txt); font-size: .8rem; font-weight: 700; }
.c-ordre { display: flex; gap: 0; margin-left: auto; } .c-retirer:hover { color: var(--a-erreur); }
.c-corps { padding: .3rem .9rem .9rem; display: grid; gap: .6rem; }
.c-ligne { display: flex; flex-wrap: wrap; gap: .5rem .8rem; align-items: flex-end; }
.c-ligne > .c-champ { flex: 1 1 10rem; }
.c-champ { display: grid; gap: .25rem; } .c-champ > span { font-size: .82rem; color: var(--a-doux); font-weight: 600; }
.c-sous-titre { font-weight: 650; margin: .3rem 0; }
.c-options { display: grid; gap: .4rem; padding: .6rem; background: var(--a-surface-2); border-radius: 10px; }
.c-avance { border-top: 1px dashed var(--a-ligne); padding-top: .5rem; } .c-avance summary { cursor: pointer; font-weight: 600; color: var(--a-accent); padding: .2rem 0; }
.c-avance[open] summary { margin-bottom: .5rem; }
.c-ajout { display: flex; gap: .5rem; padding: .7rem; border: 1.5px dashed var(--a-ligne); border-radius: 12px; } .c-ajout select { flex: 1; }
.c-dimension { border: 1px solid var(--a-ligne); border-radius: 10px; padding: .6rem; margin: 0 0 .5rem; display: grid; gap: .4rem; }
.c-variables { font-size: .88rem; color: var(--a-doux); display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; } .c-variables select { width: auto; flex: 1; }
.c-etape--attendre { border-left: 4px solid var(--a-info); } .c-etape--envoyer { border-left: 4px solid var(--a-accent); } .c-etape--condition { border-left: 4px solid var(--a-attention); } .c-etape--fin { border-left: 4px solid var(--a-doux); }
.c-alertes { padding-left: 2rem; }
.apercu-mail iframe { width: 100%; min-height: 70vh; border: 1px solid var(--a-ligne); border-radius: 10px; background: #fff; }

/* ---------- Infos clés, sections ---------- */
.liste-infos, .liste-suggestions { list-style: none; padding: 0; margin: 0 0 1rem; display: grid; gap: .7rem; }
.info-cle, .suggestion { padding: .9rem; border: 1px solid var(--a-ligne); border-radius: 12px; background: var(--a-surface-2); }
.info-cle__meta { margin: .4rem 0; font-size: .85rem; color: var(--a-doux); }
.ajout > summary { list-style: none; display: inline-flex; } .ajout > summary::-webkit-details-marker { display: none; }
.ajout[open] > summary { margin-bottom: .8rem; }

/* ---------- Connexion / installation ---------- */
.admin--connexion { min-height: 100dvh; display: grid; grid-template-columns: minmax(0, 1fr); place-items: center; padding: 1rem; background: radial-gradient(circle at 30% 10%, color-mix(in srgb, var(--a-accent) 12%, var(--a-fond)), var(--a-fond) 60%); }
.a-connexion { width: min(26rem, 100%); background: var(--a-surface); border: 1px solid var(--a-ligne); border-radius: 18px; padding: 2rem; box-shadow: var(--a-ombre); }
.a-connexion--large { width: min(40rem, 100%); }
@media (max-width: 480px) { .a-connexion { padding: 1.4rem 1.1rem; } }
.a-connexion h1 { font-size: 1.4rem; text-align: center; margin-bottom: 1.4rem; }
.separateur-ou { display: flex; align-items: center; gap: .8rem; color: var(--a-doux); font-size: .85rem; } .separateur-ou::before, .separateur-ou::after { content: ""; flex: 1; border-top: 1px solid var(--a-ligne); }
.a-details { margin-top: 1rem; } .a-details summary { cursor: pointer; color: var(--a-accent); }
.a-connexion__pied { text-align: center; margin: 1.4rem 0 0; font-size: .9rem; }

/* ---------- Gestion (projets, réunions, votes…) ---------- */
.g-vues { display: flex; flex-wrap: wrap; gap: .3rem; margin-bottom: 1rem; }
.g-vues a, .g-vues button { padding: .45rem .9rem; border-radius: 999px; border: 1px solid var(--a-ligne); background: var(--a-surface); color: var(--a-texte); text-decoration: none; font: inherit; font-size: .9rem; cursor: pointer; }
.g-vues [aria-current="page"], .g-vues [aria-pressed="true"] { background: var(--a-accent); color: var(--a-accent-txt); border-color: var(--a-accent); }
.g-kanban { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(250px, 1fr); gap: .8rem; overflow-x: auto; padding-bottom: 1rem; align-items: start; }
.g-colonne { background: var(--a-surface-2); border-radius: 14px; padding: .6rem; min-height: 8rem; }
.g-colonne__tete { display: flex; justify-content: space-between; align-items: center; padding: .2rem .3rem .6rem; font-weight: 650; }
.g-colonne.survol { outline: 2px dashed var(--a-accent); }
.g-carte { display: block; background: var(--a-surface); border: 1px solid var(--a-ligne); border-radius: 10px; padding: .6rem .7rem; margin-bottom: .5rem; cursor: grab; color: inherit; text-decoration: none; box-shadow: 0 1px 2px rgb(0 0 0 / .05); }
.g-carte:hover { border-color: var(--a-accent); }
.g-carte__meta { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .35rem; font-size: .78rem; color: var(--a-doux); }
.g-pastille { display: inline-flex; align-items: center; gap: .3rem; padding: .1rem .5rem; border-radius: 999px; font-size: .78rem; font-weight: 600; color: #fff; }
.g-avatar { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--a-accent); color: var(--a-accent-txt); font-size: .72rem; font-weight: 700; overflow: hidden; }
.g-avatar img { width: 100%; height: 100%; object-fit: cover; }
.g-table td[contenteditable] { outline: none; } .g-table td[contenteditable]:focus { box-shadow: inset 0 0 0 2px var(--a-accent); }
.g-gantt { position: relative; overflow-x: auto; border: 1px solid var(--a-ligne); border-radius: 12px; background: var(--a-surface); }
.g-gantt__ligne { display: grid; grid-template-columns: 14rem 1fr; min-height: 36px; border-bottom: 1px solid var(--a-ligne); align-items: center; }
.g-gantt__nom { padding: .3rem .6rem; font-size: .88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border-right: 1px solid var(--a-ligne); position: sticky; left: 0; background: var(--a-surface); }
.g-gantt__piste { position: relative; height: 100%; }
.g-gantt__barre { position: absolute; top: 8px; height: 20px; border-radius: 6px; background: var(--a-accent); }
.g-gantt__jalon { position: absolute; top: 9px; width: 16px; height: 16px; transform: rotate(45deg); background: var(--a-attention); }
.g-calendrier { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; background: var(--a-ligne); border: 1px solid var(--a-ligne); border-radius: 12px; overflow: hidden; }
.g-calendrier > div { background: var(--a-surface); min-height: 6.5rem; padding: .3rem; font-size: .82rem; }
.g-calendrier .hors-mois { background: var(--a-surface-2); color: var(--a-doux); }
.g-calendrier .aujourdhui .g-jour { background: var(--a-accent); color: var(--a-accent-txt); border-radius: 50%; }
.g-jour { display: inline-grid; place-items: center; width: 24px; height: 24px; font-weight: 600; }
.g-evt { display: block; margin-top: 2px; padding: 1px 5px; border-radius: 5px; background: color-mix(in srgb, var(--a-accent) 14%, transparent); color: var(--a-texte); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.g-compteur { display: grid; gap: .3rem; } .g-compteur progress { width: 100%; height: 12px; accent-color: var(--a-accent); }
.g-organigramme { display: flex; flex-direction: column; align-items: center; gap: 1.5rem; overflow-x: auto; padding: 1rem; }
.g-organigramme ul { display: flex; gap: 1rem; justify-content: center; padding: 1.2rem 0 0; margin: 0; list-style: none; position: relative; }
.g-organigramme li { display: flex; flex-direction: column; align-items: center; position: relative; }
.g-organigramme li::before { content: ""; position: absolute; top: -1.2rem; height: 1.2rem; border-left: 2px solid var(--a-ligne); }
.g-membre { display: grid; justify-items: center; gap: .3rem; padding: .8rem; min-width: 9rem; border: 1px solid var(--a-ligne); border-radius: 14px; background: var(--a-surface); text-align: center; box-shadow: var(--a-ombre); }
.g-membre img, .g-membre .g-avatar { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; font-size: 1.1rem; }
.g-membre small { color: var(--a-doux); }
.g-vote-barre { height: 10px; border-radius: 5px; background: var(--a-surface-2); overflow: hidden; } .g-vote-barre span { display: block; height: 100%; background: var(--a-accent); }
.g-carte-mentale { position: relative; min-height: 70vh; display: grid; place-items: center; }
.g-carte-mentale > svg, .g-carte__traits { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.g-noeud { position: absolute; transform: translate(-50%, -50%); display: grid; justify-items: center; gap: .3rem; padding: .8rem 1rem; min-width: 7.5rem; border-radius: 18px; background: var(--a-surface); border: 1px solid var(--a-ligne); box-shadow: var(--a-ombre); color: var(--a-texte); text-decoration: none; font-weight: 600; transition: transform .2s, box-shadow .2s; }
.g-noeud:hover { transform: translate(-50%, -50%) scale(1.05); box-shadow: 0 16px 40px rgb(0 0 0 / .15); }
.g-noeud--centre { background: var(--a-accent); color: var(--a-accent-txt); font-size: 1.1rem; padding: 1.1rem 1.4rem; }
.g-noeud__emoji { font-size: 1.6rem; line-height: 1; }
.g-noeud--enfant { font-weight: 500; font-size: .85rem; min-width: 0; padding: .4rem .7rem; border-radius: 12px; opacity: 0; animation: apparaitre .3s ease forwards; }
@keyframes apparaitre { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .g-noeud, .g-noeud--enfant { transition: none; animation: none; opacity: 1; } }
.g-essentiel { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.g-essentiel a { display: grid; gap: .5rem; padding: 1.6rem 1.2rem; border-radius: 18px; background: var(--a-surface); border: 1px solid var(--a-ligne); text-decoration: none; color: var(--a-texte); font-size: 1.1rem; font-weight: 650; box-shadow: var(--a-ombre); }
.g-essentiel a span { font-size: 2rem; }
.g-essentiel a .icone { width: 2rem; height: 2rem; color: var(--a-accent); }
.g-signature { border: 1.5px dashed var(--a-ligne); border-radius: 12px; background: #fff; touch-action: none; width: 100%; max-width: 480px; height: 180px; }
.g-doc { max-width: 52rem; margin: 0 auto; background: #fff; color: #111; padding: clamp(1.5rem, 4vw, 3.5rem); border-radius: 6px; box-shadow: var(--a-ombre); min-height: 60vh; }
.g-doc:focus-within { outline: 2px solid color-mix(in srgb, var(--a-accent) 30%, transparent); }
.g-doc table { border-collapse: collapse; width: 100%; } .g-doc td, .g-doc th { border: 1px solid #ccc; padding: .4rem; }
.g-signatures { display: flex; flex-wrap: wrap; gap: 1.5rem; margin-top: 2rem; } .g-signatures figure { margin: 0; } .g-signatures img { max-height: 70px; }
.g-coffre-ligne { display: grid; grid-template-columns: 1fr auto; gap: .5rem; align-items: center; padding: .6rem 0; border-bottom: 1px solid var(--a-ligne); }
.g-secret { font-family: ui-monospace, monospace; letter-spacing: .05em; }

@media print {
  .a-entete, .a-nav, .barre-actions, .a-toasts, .ed-barre { display: none !important; }
  .a-principal { margin: 0; padding: 0; }
  .carte { box-shadow: none; border: 0; }
  body.admin { background: #fff; }
}

/* ---------- Gestion : compléments (pastilles en ligne, retards, survols, menu compact) ---------- */
.g-noeud .a-pastille, .g-essentiel .a-pastille, .liste-simple .a-pastille, .a-nav .a-pastille { position: static; display: inline-grid; margin-left: .3rem; vertical-align: middle; }
.g-table tr.retard td:first-child { box-shadow: inset 3px 0 0 var(--a-erreur); }
.g-table input, .g-table select { min-width: 7rem; border-color: transparent; background: transparent; }
.g-table input:hover, .g-table select:hover, .g-table input:focus, .g-table select:focus { border-color: var(--a-ligne); background: var(--a-surface); }
.g-table td:nth-child(2) input { min-width: 14rem; font-weight: 600; }
.g-calendrier > div.survol { outline: 2px dashed var(--a-accent); outline-offset: -2px; }
.poignee { cursor: grab; color: var(--a-doux); user-select: none; padding: 0 .2rem; }
.g-noeud[aria-expanded="true"] { outline: 3px solid color-mix(in srgb, var(--a-accent) 45%, transparent); }
button.g-noeud { font: inherit; cursor: pointer; border: 1px solid var(--a-ligne); background: var(--a-surface); color: var(--a-texte); }
.g-carte-mentale .g-noeud { text-decoration: none; color: inherit; border-radius: 18px; box-shadow: var(--a-ombre); }
.g-carte-mentale .g-noeud small { font-weight: 400; opacity: .8; }
.icone--texte { display: inline-grid; place-items: center; width: 1.4em; font-size: 1.05rem; }
.liste-barres { list-style: none; padding: 0; display: grid; gap: .5rem; } .liste-barres li { display: grid; gap: .2rem; }
.admin--nav-compacte { --a-nav: 64px; }
.admin--nav-compacte .a-nav { padding-inline: .4rem; }
.admin--nav-compacte .a-nav a span:not(.icone), .admin--nav-compacte .a-nav__groupe, .admin--nav-compacte .a-nav__version, .admin--nav-compacte .a-nav__sortie { display: none; }
.admin--nav-compacte .a-nav a { justify-content: center; }
.admin--nav-compacte .a-nav ul { border-bottom: 1px solid var(--a-ligne); padding-bottom: .4rem; margin-bottom: .4rem; }
@media (max-width: 900px) { .admin--nav-compacte { --a-nav: 248px; } .admin--nav-compacte .a-nav a span:not(.icone), .admin--nav-compacte .a-nav__groupe { display: revert; } }
@media (max-width: 700px) { .g-carte-mentale { min-height: 120vh; } .g-noeud { min-width: 0; padding: .5rem .6rem; font-size: .85rem; } }
/* Un élément masqué reste masqué, même si sa classe lui donne un display (panneaux, coffre, carte mentale…). */
[hidden] { display: none !important; }
.carte-choix strong, .carte-choix small { display: block; } .carte-choix small { color: var(--a-doux); margin-top: .2rem; }
.choix-modeles { display: grid; gap: .7rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); margin-bottom: 1rem; }
.histogramme { min-width: 0; } .grille-chiffres { min-width: 0; }
.bouton--lien { white-space: normal; text-align: left; }
.g-carte-mentale .g-noeud--centre { color: var(--a-accent-txt); background: var(--a-accent); }
/* Parties de la gestion : déjà dans le menu de gauche sur grand écran ; en bandeau défilant sur téléphone. */
@media (min-width: 901px) { .g-parties { display: none; } }
.g-parties .icone { width: 1.1em; height: 1.1em; vertical-align: -.2em; }
@media (max-width: 900px) { .g-parties { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: -1rem; padding-inline: 1rem; } .g-parties a { white-space: nowrap; } }


/* ---------- App OCSIA2 : « Aujourd'hui », ajout rapide, barre d'onglets ---------- */
.o-jour { padding: .5rem 0 1.25rem; }
.o-jour__date { margin: 0; font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--a-doux); }
.o-jour__titre { font-size: clamp(1.7rem, 5vw, 2.4rem); margin: .2rem 0 .3rem; }
.o-jour__resume { font-size: 1.05rem; color: var(--a-doux); margin: 0; }
.o-rapide__types { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .6rem; }
.o-rapide__types label { cursor: pointer; }
.o-rapide__types input { position: absolute; opacity: 0; pointer-events: none; }
.o-rapide__types span { display: inline-flex; align-items: center; min-height: 40px; padding: .35rem .9rem; border-radius: 999px; border: 1.5px solid var(--a-ligne); background: var(--a-surface); font-weight: 600; transition: background .15s, border-color .15s; }
.o-rapide__types input:checked + span { border-color: var(--a-accent); background: color-mix(in srgb, var(--a-accent) 12%, var(--a-surface)); color: var(--a-texte); }
.o-rapide__types input:focus-visible + span { outline: 3px solid color-mix(in srgb, var(--a-accent) 55%, transparent); outline-offset: 2px; }
.o-rapide__saisie { display: flex; gap: .5rem; } .o-rapide__saisie input { flex: 1; min-height: 46px; font-size: 1rem; }
.o-liste { list-style: none; margin: 0; padding: 0; } .o-liste li { display: flex; justify-content: space-between; gap: .75rem; padding: .55rem 0; border-bottom: 1px solid var(--a-ligne); } .o-liste li:last-child { border-bottom: 0; }
.o-liste small { color: var(--a-doux); white-space: nowrap; } .o-liste li.retard small { color: var(--a-erreur); font-weight: 600; }
.o-onglets { display: none; }
@media (max-width: 900px) {
  .o-onglets { position: fixed; z-index: 45; left: 0; right: 0; bottom: 0; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding: .35rem .4rem calc(.35rem + env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--a-surface) 94%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-top: 1px solid var(--a-ligne); }
  .o-onglets a, .o-onglets button { display: grid; justify-items: center; gap: 2px; min-height: 52px; padding: .25rem 0; border: 0; background: none; font: 600 .7rem/1.1 var(--a-police); color: var(--a-doux); text-decoration: none; border-radius: 12px; cursor: pointer; }
  .o-onglets a span, .o-onglets button span { font-size: 1.3rem; line-height: 1.2; }
  .o-onglets .icone { width: 1.45rem; height: 1.45rem; }
  .o-onglets [aria-current="page"] { color: var(--a-accent); background: color-mix(in srgb, var(--a-accent) 10%, transparent); }
  body.admin { padding-bottom: calc(70px + env(safe-area-inset-bottom)); }
  .a-menu-bouton { display: none; }
}
@media (display-mode: standalone) { .a-voir { display: none; } }

/* ---------- Erreurs de l'espace (écran introuvable, accès refusé, page expirée, problème technique) ---------- */
.a-erreur { max-width: 38rem; padding: 0 0 2rem; }
.a-erreur__titre { display: flex; align-items: flex-start; gap: .6rem; font-size: clamp(1.45rem, 1.1rem + 1.4vw, 1.9rem); text-wrap: balance; margin-bottom: .7rem; }
.a-erreur__icone { width: 1.1em; height: 1.1em; margin-top: .08em; color: var(--a-accent); }
.a-erreur__texte { font-size: 1.05rem; color: var(--a-doux); text-wrap: pretty; }
.a-erreur__actions { margin-top: 1.5rem; }
.a-erreur__signaler { margin: 1.75rem 0 0; padding-top: 1rem; border-top: 1px solid var(--a-ligne); color: var(--a-doux); }
.a-erreur__debug { margin-top: 1.5rem; } .a-erreur__debug pre { white-space: pre-wrap; overflow-wrap: anywhere; font-size: .8rem; max-height: 22rem; overflow: auto; background: var(--a-surface-2); padding: .75rem; border-radius: 8px; }
.a-connexion--erreur { width: min(32rem, 100%); }
.a-connexion--erreur .a-erreur { padding: 0; }
.a-connexion--erreur h1 { text-align: start; font-size: 1.35rem; margin-bottom: .6rem; }
.a-connexion__site { margin: 0 0 1.25rem; font-weight: 700; color: var(--a-doux); }

/* ---------- Chargement : fine barre en haut (actions longues, changement d'écran) et bouton occupé ---------- */
.a-charge { position: fixed; z-index: 300; inset: 0 0 auto 0; height: 3px; pointer-events: none; opacity: 0; transition: opacity .2s ease-out; }
.a-charge::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 40%; background: var(--a-accent); border-radius: 0 3px 3px 0; transform: translateX(-100%); }
.a-charge.actif { opacity: 1; transition-duration: .12s; }
.a-charge.actif::before { animation: a-charge 1.3s cubic-bezier(.4, 0, .2, 1) infinite; }
@keyframes a-charge { from { transform: translateX(-100%); } to { transform: translateX(250%); } }
.bouton[aria-busy="true"], .bouton[aria-busy="true"]:disabled { cursor: progress; opacity: .85; }
.bouton[aria-busy="true"]::after { content: ""; width: .95em; height: .95em; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: a-tourne .7s linear infinite; }
@keyframes a-tourne { to { transform: rotate(1turn); } }
@media (prefers-reduced-motion: reduce) {
  .a-charge.actif::before { animation: none; width: 100%; transform: none; opacity: .6; }
  .bouton[aria-busy="true"]::after { animation: none; border-style: dotted; }
}

/* ---------- Mes options (chantier E) : une liste calme, un interrupteur par ligne, le détail sur demande ---------- */
.op-tete { display: grid; gap: .75rem; margin-bottom: 1.5rem; max-width: 62rem; }
.op-resume { margin: 0; color: var(--a-doux); max-width: 60ch; } .op-resume strong { color: var(--a-texte); }
.op-filtres { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.op-filtres input { flex: 1 1 14rem; min-height: 44px; padding: .5rem .8rem; border: 1px solid var(--a-ligne); border-radius: 10px; background: var(--a-surface); color: var(--a-texte); font: inherit; }
.op-filtres .g-vues { margin: 0; }
.op-groupe { max-width: 62rem; margin-bottom: 1.75rem; } .op-groupe h2 { margin-bottom: .5rem; }
.op-liste { list-style: none; margin: 0; padding: 0; background: var(--a-surface); border: 1px solid var(--a-ligne); border-radius: var(--a-rayon); }
.op-ligne { display: flex; gap: 1rem; align-items: flex-start; padding: 1rem 1.1rem; border-top: 1px solid var(--a-ligne); scroll-margin-top: 80px; }
.op-ligne:first-child { border-top: 0; }
.op-ligne:target { background: color-mix(in srgb, var(--a-accent) 6%, var(--a-surface)); }
.op-ligne--sous { padding-left: 1.6rem; }
.op-ligne__corps { flex: 1; min-width: 0; }
.op-nom { margin: 0 0 .2rem; font-size: 1rem; display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.op-apporte { margin: 0; color: var(--a-doux); max-width: 62ch; }
.op-details { margin-top: .35rem; } .op-details summary { cursor: pointer; color: var(--a-accent); font-size: .9rem; padding: .35rem 0; min-height: 32px; }
.op-details dl { display: grid; grid-template-columns: max-content 1fr; gap: .3rem 1rem; margin: .4rem 0 .6rem; font-size: .92rem; }
.op-details dt { font-weight: 600; } .op-details dd { margin: 0; color: var(--a-doux); }
.op-ligne__action { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: .3rem; min-width: 7.5rem; }
.op-inter { display: inline-flex; align-items: center; gap: .55rem; min-height: 44px; padding: 0 .2rem; border: 0; background: none; color: var(--a-texte); font: inherit; font-size: .9rem; cursor: pointer; }
.op-inter__piste { position: relative; width: 44px; height: 26px; border-radius: 13px; background: var(--a-ligne); transition: background .15s ease-out; flex: none; }
.op-inter__piste::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgb(0 0 0 / .25); transition: transform .15s ease-out; }
.op-inter[aria-checked="true"] .op-inter__piste { background: var(--a-accent); }
.op-inter[aria-checked="true"] .op-inter__piste::after { transform: translateX(18px); }
.op-inter:active .op-inter__piste::after { width: 23px; }
.op-inter__texte { min-width: 4.2rem; text-align: left; }
.op-etat { font-size: .9rem; color: var(--a-doux); min-height: 44px; display: inline-flex; align-items: center; } .op-etat--on { color: var(--a-ok); font-weight: 600; }
.op-regler { font-size: .9rem; }
.suivi-parcours__liste { list-style: none; margin: .75rem 0 0; padding: 0; display: grid; }
.suivi-parcours__liste li { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1rem; padding: .7rem 0; border-top: 1px solid var(--a-ligne); }
.suivi-parcours__qui { flex: 1 1 14rem; min-width: 0; overflow-wrap: anywhere; } .suivi-parcours__qui small { display: block; color: var(--a-doux); }
.suivi-parcours__ou { flex: 1 1 12rem; } .suivi-parcours__ou small { display: block; color: var(--a-doux); }
.suivi-parcours__barre { display: inline-block; vertical-align: middle; width: 5rem; height: .45rem; border-radius: 999px; background: var(--a-ligne); overflow: hidden; margin-right: .35rem; }
.suivi-parcours__barre span { display: block; height: 100%; background: var(--a-accent); border-radius: inherit; }
.op-choix { display: flex; flex-direction: column; align-items: stretch; gap: .35rem; max-width: 15rem; }
.op-choix select { min-height: 44px; font-size: .92rem; }
.op-socle { max-width: 62rem; margin: 0 0 1.75rem; padding: .9rem 1.1rem; border: 1px solid var(--a-ligne); border-radius: var(--a-rayon); background: var(--a-surface); }
.op-socle summary { cursor: pointer; font-weight: 600; min-height: 32px; }
.op-socle__liste { margin: .6rem 0 0; padding-left: 1.1rem; color: var(--a-doux); } .op-socle__liste li { margin-bottom: .4rem; } .op-socle__liste strong { color: var(--a-texte); }
.op-manque { max-width: 62rem; padding: 1.25rem 1.3rem; border-radius: var(--a-rayon); border: 1.5px dashed var(--a-ligne); }
.op-manque p:last-child { margin: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.op-retour { margin: -.5rem 0 1rem; } .op-retour a { text-decoration: none; }
.op-demande, #mes-demandes, #fait { max-width: 52rem; } #mes-demandes { margin-top: 2.5rem; } #fait { margin-bottom: 2rem; outline: none; }
.op-etapes { padding-left: 1.2rem; } .op-etapes li { margin-bottom: .35rem; }
#op-texte-claude { font: .9rem/1.5 ui-monospace, monospace; }
.op-demarches { border: 0; padding: 0; margin: 1rem 0; display: grid; gap: .75rem; } .op-demarches legend { font-weight: 700; margin-bottom: .5rem; }
.op-demarche { display: grid; gap: .45rem; }
.op-demarche__tete { display: flex; align-items: center; gap: .5rem; } .op-demarche__tete input { width: 1.1rem; height: 1.1rem; accent-color: var(--a-accent); }
.op-demarche__resume { color: var(--a-doux); }
.op-demarche__colonnes { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem 1.25rem; font-size: .92rem; }
.op-demarche__colonnes em { display: block; font-style: normal; font-weight: 600; margin-bottom: .15rem; }
.op-plus, .op-moins { display: block; padding-left: 1.1rem; position: relative; }
.op-plus::before { content: "+"; position: absolute; left: 0; color: var(--a-ok); font-weight: 700; }
.op-moins::before { content: "–"; position: absolute; left: 0; color: var(--a-attention); font-weight: 700; }
.op-demarche__cout { font-size: .9rem; color: var(--a-doux); }
.op-suivi { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.op-suivi__ligne { padding: 1rem 1.1rem; border: 1px solid var(--a-ligne); border-radius: var(--a-rayon); background: var(--a-surface); scroll-margin-top: 80px; }
.op-suivi__tete { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-bottom: .2rem; }
.a-resultats { list-style: none; margin: .5rem 0 0; padding: 0; display: grid; gap: .35rem; }
.a-resultats a { display: block; padding: .45rem .6rem; border-radius: 9px; text-decoration: none; color: var(--a-texte); background: var(--a-surface-2); }
.a-resultats a:hover { background: color-mix(in srgb, var(--a-accent) 10%, var(--a-surface-2)); }
.a-resultats small { display: block; color: var(--a-doux); }
.a-resultats .badge { margin-right: .35rem; }
@media (max-width: 640px) {
  .op-ligne { gap: .5rem; padding: .85rem .9rem; } .op-ligne--sous { padding-left: 1.1rem; }
  .op-ligne__action { min-width: 0; }
  .op-ligne:has(.op-choix) { flex-wrap: wrap; } .op-ligne:has(.op-choix) .op-ligne__action { width: 100%; align-items: stretch; } .op-choix { max-width: none; }
  .op-inter__texte { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .op-etat { font-size: .85rem; }
  .op-demarche__colonnes { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .op-inter__piste, .op-inter__piste::after { transition: none; } }

/* ---------- Compteur « à traiter » (Messages et demandes) dans le menu et la barre d'onglets ---------- */
.a-compteur { margin-left: auto; min-width: 1.5rem; height: 1.25rem; padding: 0 .4rem; border-radius: 999px; background: color-mix(in srgb, var(--a-accent) 14%, var(--a-surface)); color: var(--a-accent); font-size: .75rem; font-weight: 700; font-variant-numeric: tabular-nums; display: inline-grid; place-items: center; line-height: 1; }
.o-onglets a { position: relative; }
.o-onglets a .a-compteur--onglet { position: absolute; top: 2px; left: calc(50% + 6px); margin: 0; min-width: 1.15rem; height: 1.05rem; font-size: .66rem; background: var(--a-accent); color: var(--a-accent-txt); }

/* ---------- Reliure de l'app OCSIA2 (Mes préférences) : bouton pour cet appareil, code QR pour un autre ---------- */
.reliure { display: grid; gap: 1rem 1.5rem; align-items: center; margin: 0 0 1rem; }
.reliure__qr { margin: 0; display: grid; justify-items: center; gap: .5rem; order: 2; }
.reliure__qr .code-qr { width: min(200px, 60vw); height: auto; border-radius: 12px; border: 1px solid var(--a-ligne); }
.reliure__qr figcaption { font-size: .85rem; color: var(--a-doux); text-align: center; max-width: 26ch; }
.reliure__texte .aide { margin-bottom: 0; }
@media (min-width: 720px) {
  .reliure { grid-template-columns: auto 1fr; }
  .reliure__qr { order: 0; }
}

/* Préparation automatique du site (installation, nouveau paquet) */
.preparation-site { max-width: 40rem; margin: 2rem auto; }
.preparation-site__barre { height: .5rem; border-radius: 999px; background: var(--a-surface-2); overflow: hidden; margin: 1.2rem 0 .6rem; }
.preparation-site__barre span { display: block; height: 100%; width: 35%; border-radius: inherit; background: var(--c-primaire, #333); animation: preparation-va 1.6s ease-in-out infinite; }
@keyframes preparation-va { 0% { transform: translateX(-100%); } 100% { transform: translateX(290%); } }
@media (prefers-reduced-motion: reduce) { .preparation-site__barre span { animation: none; width: 100%; opacity: .5; } }
.preparation-site__detail pre { max-height: 18rem; overflow: auto; font-size: .8rem; white-space: pre-wrap; background: var(--a-surface-2); padding: .8rem; border-radius: 8px; }

/* Carte mentale : la bulle cliquée vient au centre (13/10/2026) */
.g-carte-mentale { overflow: hidden; }
.g-carte__scene { position: absolute; inset: 0; }
.g-carte__traits { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; transition: opacity .2s; }
.g-carte__traits line { stroke: currentColor; stroke-opacity: .22; stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.g-carte__traits--sort { opacity: 0; }
.g-carte-mentale .g-noeud { transition: left .32s cubic-bezier(.2, .8, .2, 1), top .32s cubic-bezier(.2, .8, .2, 1), opacity .2s, transform .2s, box-shadow .2s; max-width: 13rem; text-align: center; }
.g-carte-mentale .g-noeud--enfant { animation: none; opacity: 0; font-size: .9rem; }
.g-carte-mentale .g-noeud--pose { opacity: 1; }
.g-carte-mentale .g-noeud--branche { font-weight: 600; box-shadow: var(--a-ombre), 0 0 0 3px color-mix(in srgb, var(--a-accent) 18%, transparent); }
.g-carte-mentale .g-noeud--sort { opacity: 0; pointer-events: none; }
.g-carte-mentale .g-noeud--vers-centre { z-index: 2; transform: translate(-50%, -50%) scale(1.12); }
.g-carte-mentale .g-noeud--retour { font-size: .82rem; font-weight: 500; padding: .45rem .8rem; background: var(--a-surface-2); min-width: 0; }
.g-carte-mentale .g-noeud { display: grid; grid-auto-flow: row; justify-items: center; align-content: center; }
.g-noeud__icone { display: grid; place-items: center; justify-self: center; position: static; line-height: 0; }
.g-noeud__icone .icone { width: 1.35rem; height: 1.35rem; }
.g-noeud--centre .g-noeud__icone .icone { width: 1.7rem; height: 1.7rem; }
.g-carte__liste { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) { .g-carte-mentale .g-noeud, .g-carte__traits { transition: none; } }
@media (max-width: 640px) { .g-carte-mentale .g-noeud { max-width: 9.5rem; font-size: .8rem; } }
/* Organigramme sans « Rattaché à » : une rangée par niveau, reliée à la suivante (13/10/2026). */
.g-organigramme--niveaux { align-items: stretch; gap: 0; }
.g-niveau { display: grid; justify-items: center; gap: .6rem; padding: .9rem 0; position: relative; }
.g-niveau + .g-niveau { border-top: 1px dashed var(--a-ligne); }
.g-niveau__nom { margin: 0; font-size: .8rem; font-weight: 600; color: var(--a-doux); }
.g-niveau__fiches { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; }
.c-code { font: 12.5px/1.45 ui-monospace, SFMono-Regular, Menlo, monospace !important; min-height: 160px; }