/* ============================================================================
   Back-office Dauphins de Rangiroa — thème relevé sur admin.studiobelleza.fr
   (lui-même repris de resa-demo). MÊME langage visuel, MARQUE différente :
   l'accent rose du salon devient l'OR du logo de l'association.

   Reproduit en CSS écrit à la main dans la stack FastAPI+Jinja existante, comme
   Studio Belleza l'avait reproduit dans la sienne : migrer vers Next casserait
   la cohérence avec la factory Python que ce back-office rejoue, sans rien
   apporter à la présidente (arbitrage validé par Codex le 2026-08-14).
   ========================================================================== */
@font-face{
  font-family:Figtree;
  src:url('figtree.woff2') format('woff2-variations');
  font-weight:400 700;
  font-display:swap;   /* le texte s'affiche tout de suite : connexion d'atoll */
}

:root{
  --bg:#fff; --fg:#0d1520; --card:#fff; --muted:#f5f6f7; --muted-fg:#646e7c;
  --border:#e5e7e9; --ring:#0d5c7a;

  /* ── L'OR DU LOGO, EN DEUX RÔLES ─────────────────────────────────────────
     L'or vif ne sert JAMAIS de couleur de texte sur fond clair : #ffb81c sur
     blanc, c'est 1,9:1 — illisible. Il ne sert que d'APLAT, avec du texte
     sombre dessus. Pour un libellé ou une icône sur fond clair, c'est l'or
     SOMBRE qui parle (4,6:1). Découpage exigé par le gate Codex. */
  --or:#ffb81c;            /* aplats : bouton primaire, barre de progression */
  --or-fg:#2a1c00;         /* texte POSÉ sur l'or */
  --or-texte:#8a5e00;      /* texte/icône couleur marque sur fond clair */
  --or-doux:rgba(255,184,28,.13);
  --abysse:#04121f;        /* le bleu de leurs photos : marque de la coque */

  --vert:#0f7b56; --ambre:#a9640a; --rouge:#b3261e; --lagon:#0d5c7a;
  --sidebar:#fafbfb; --sidebar-border:#e5e7e9;
  --survol:#eef0f1; --titre-fond:#fdfbf5;
  --bandeau-or-fg:#6b4a00; --bandeau-vert-fg:#0b5e41;
  --bandeau-rouge-fg:#8e1e18; --bandeau-info-fg:#0a4a63;
  --pilule-vert-fg:var(--vert); --pilule-or-fg:var(--ambre); --pilule-info-fg:var(--lagon);
  --r:0.625rem;
  --ombre:0 1px 2px rgba(13,21,32,.05);
  --sans:Figtree,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
}
*{box-sizing:border-box}
/* Une règle `display:flex` sur .bandeau annulait l'attribut `hidden` : un bandeau vide
   apparaissait en haut de l'écran Photos (recette du 2026-08-14). */
[hidden]{display:none!important}
html,body{margin:0}
body{background:var(--bg);color:var(--fg);font:14px/1.5 var(--sans);
  -webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%}
h1,h2,h3{margin:0;line-height:1.2;letter-spacing:-.015em;font-weight:600}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--ring);outline-offset:2px;border-radius:5px}
/* tout ce qui est chiffre s'aligne en colonne */
.tnum,.kpi-val,table td{font-variant-numeric:tabular-nums;font-feature-settings:'tnum'}

/* ── COQUE ───────────────────────────────────────────────────────────────────
   Desktop : hauteur d'écran, seul le contenu défile (coque d'application).
   Mobile : surtout PAS de hauteur verrouillée — le clavier virtuel masquerait
   le champ en cours de saisie et le défilement se retrouverait piégé
   (piège signalé par Codex). Le document défile normalement. */
.coque{display:flex;min-height:100dvh}
@media (min-width:900px){.coque{height:100dvh;overflow:hidden}}

/* ── BARRE LATÉRALE ──────────────────────────────────────────────────────── */
.barre{width:248px;flex-shrink:0;background:var(--sidebar);
  border-right:1px solid var(--sidebar-border);display:flex;flex-direction:column}
.coque.replie .barre{width:66px}
.barre-marque{display:flex;align-items:center;gap:10px;height:56px;padding:0 14px;
  border-bottom:1px solid var(--sidebar-border);flex-shrink:0}
.coque.replie .barre-marque{justify-content:center;padding:0}
.barre-marque img{width:32px;height:auto;object-fit:contain;flex-shrink:0}
.barre-marque div{min-width:0;line-height:1.2}
.barre-marque b{display:block;font-size:13.5px;font-weight:600;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.barre-marque span{display:block;font-size:11px;color:var(--muted-fg)}
.coque.replie .barre-marque div{display:none}

.barre-nav{flex:1;overflow-y:auto;padding:12px 8px;display:flex;flex-direction:column;gap:16px}
.nav-groupe>p{margin:0 0 4px;padding:0 8px;font-size:11px;font-weight:500;
  letter-spacing:.06em;text-transform:uppercase;color:var(--muted-fg)}
.coque.replie .nav-groupe>p{display:none}
.coque.replie .nav-groupe+.nav-groupe{border-top:1px solid var(--sidebar-border);padding-top:12px}
.barre-nav a,.barre-pied a,.barre-pied button{display:flex;align-items:center;gap:10px;
  padding:7px 8px;border-radius:calc(var(--r) - 2px);font-size:14px;color:var(--fg);
  width:100%;background:none;border:1px solid transparent;cursor:pointer;text-align:left;
  transition:background .12s}
.barre-nav a:hover,.barre-pied a:hover,.barre-pied button:hover{background:var(--survol)}
.barre-nav a.on{background:var(--card);border-color:var(--border);box-shadow:var(--ombre);
  font-weight:600}
.barre-nav a svg,.barre-pied a svg,.barre-pied button svg{width:18px;height:18px;flex-shrink:0;
  stroke:var(--muted-fg);stroke-width:1.7;fill:none;stroke-linecap:round;stroke-linejoin:round}
.barre-nav a.on svg{stroke:var(--or-texte)}
.barre-nav a span,.barre-pied a span,.barre-pied button span{flex:1;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Menu replié : le libellé disparaît de l'ÉCRAN, jamais du document.
   Avec display:none, les onze commandes de la barre latérale — dont « Se déconnecter » —
   perdaient tout nom : un lecteur d'écran annonçait « bouton », et un robot de recette a
   cliqué la déconnexion en croyant cliquer autre chose (2026-08-15). On masque donc
   visuellement, en gardant le texte lisible par les technologies d'assistance. */
.coque.replie .barre-nav a span,.coque.replie .barre-pied a span,
.coque.replie .barre-pied button span{position:absolute;width:1px;height:1px;padding:0;
  margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.coque.replie .barre-nav a,.coque.replie .barre-pied a,.coque.replie .barre-pied button{
  justify-content:center;padding:8px 0}
.barre-pied{border-top:1px solid var(--sidebar-border);padding:8px;display:flex;
  flex-direction:column;gap:2px;flex-shrink:0}

/* ── BARRE DU HAUT ───────────────────────────────────────────────────────── */
.principal{flex:1;min-width:0;display:flex;flex-direction:column}
.haut{display:flex;align-items:center;gap:12px;height:56px;padding:0 16px;flex-shrink:0;
  border-bottom:1px solid var(--border);background:var(--bg)}
/* À 360px, « Mettre en ligne » sortait de l'écran de 15px : le bouton le plus important de
   l'outil, à moitié hors du téléphone. Le titre cède la place (il est déjà tronqué par
   ellipse) et le bouton ne se comprime pas (beta test du 2026-08-20). */
@media (max-width:400px){
  .haut{gap:8px;padding:0 10px}
  .haut > .btn{flex:0 0 auto}
  .haut-titre{flex:1 1 auto;min-width:5.5em}
}
.haut-titre{min-width:0;flex:1}
.haut-titre b{display:block;font-size:14.5px;font-weight:600;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.haut-titre span{display:block;font-size:12px;color:var(--muted-fg);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.icone-btn{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;
  border-radius:calc(var(--r) - 2px);border:1px solid transparent;background:none;cursor:pointer;
  flex-shrink:0}
.icone-btn:hover{background:var(--muted)}
.icone-btn svg{width:18px;height:18px;stroke:var(--muted-fg);stroke-width:1.7;fill:none;
  stroke-linecap:round;stroke-linejoin:round}
.tiroir-btn{display:none}
@media (max-width:899px){.tiroir-btn{display:inline-flex}}

/* pilule d'état : elle dit une chose VRAIE (site à jour / en attente / en cours),
   jamais un décor repris de la référence */
.pilule{display:inline-flex;align-items:center;gap:5px;padding:5px 11px;border-radius:99px;
  font-size:12.5px;font-weight:500;white-space:nowrap;border:1px solid}
.pilule::before{content:"";width:6px;height:6px;border-radius:99px;background:currentColor;
  flex-shrink:0}
.pilule-vert{color:var(--pilule-vert-fg);background:rgba(15,123,86,.08);border-color:rgba(15,123,86,.25)}
.pilule-or{color:var(--pilule-or-fg);background:var(--or-doux);border-color:rgba(255,184,28,.45)}
.pilule-info{color:var(--pilule-info-fg);background:rgba(13,92,122,.08);border-color:rgba(13,92,122,.25)}
@media (max-width:700px){.pilule span{display:none}}

/* ── ZONE DE CONTENU ─────────────────────────────────────────────────────── */
.defile{flex:1;overflow-y:auto;background:var(--bg)}
.page{max-width:1080px;margin:0 auto;padding:22px 16px 64px}
.pagehead{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;
  flex-wrap:wrap;margin-bottom:18px}
/* Le bloc de titre doit pouvoir RÉTRÉCIR. Sans cette base flexible, un sous-titre long
   (Partenaires, Galeries) occupait toute la ligne et renvoyait « Enregistrer » en dessous,
   au milieu de la page : le bouton principal semblait posé au hasard. */
.pagehead>div:first-child{flex:1 1 min(100%,34ch);min-width:0}
.pagehead h1{font-size:1.45rem}
.sous{margin:4px 0 0;color:var(--muted-fg);font-size:13.5px;max-width:72ch}
.pagehead-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-left:auto}
.retour{display:inline-block;margin-bottom:6px;color:var(--muted-fg);font-size:13px}
.retour:hover{color:var(--fg)}
.pied-note{margin-top:22px;color:var(--muted-fg);font-size:12.5px;line-height:1.6}

/* ── BOUTONS ─────────────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:8px 14px;
  border-radius:calc(var(--r) - 2px);border:1px solid var(--border);background:var(--card);
  font-size:13.5px;font-weight:500;cursor:pointer;white-space:nowrap;box-shadow:var(--ombre);
  transition:background .12s,border-color .12s}
.btn:hover{background:var(--muted)}
.btn:disabled{opacity:.55;cursor:not-allowed}
.btn svg{width:16px;height:16px;stroke:currentColor;stroke-width:1.8;fill:none;
  stroke-linecap:round;stroke-linejoin:round}
.btn-or{background:var(--or);border-color:var(--or);color:var(--or-fg);font-weight:600}
.btn-or:hover{background:#ffc740;border-color:#ffc740}
.btn-mini{padding:5px 10px;font-size:12.5px}
.btn-rouge{background:var(--rouge);border-color:var(--rouge);color:#fff}
.btn-rouge:hover{background:#8e1e18;border-color:#8e1e18}

/* ── CARTES ET TUILES ────────────────────────────────────────────────────── */
.carte{background:var(--card);border:1px solid var(--border);border-radius:var(--r)}
.kpis{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  margin-bottom:14px}
.kpi{padding:16px;position:relative}
.kpi-lib{font-size:11px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted-fg)}
.kpi-val{display:block;margin:8px 0 2px;font-size:2rem;font-weight:600;line-height:1;
  letter-spacing:-.02em}
.kpi-note{font-size:12.5px;color:var(--muted-fg)}
.kpi svg{position:absolute;top:15px;right:15px;width:17px;height:17px;stroke:var(--muted-fg);
  stroke-width:1.6;fill:none;stroke-linecap:round;stroke-linejoin:round}
.grille2{display:grid;gap:12px;grid-template-columns:1fr}
@media (min-width:820px){.grille2{grid-template-columns:1.35fr 1fr}}
.carte-tete{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:13px 16px;border-bottom:1px solid var(--border)}
.carte-tete h2{font-size:14.5px}
.carte-corps{padding:16px}

/* ── BANDEAUX ────────────────────────────────────────────────────────────── */
.bandeau{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:12px 15px;
  border-radius:var(--r);margin-bottom:16px;font-size:13.5px;border:1px solid}
.bandeau-or{background:var(--or-doux);border-color:rgba(255,184,28,.45);color:var(--bandeau-or-fg)}
.bandeau-vert{background:rgba(15,123,86,.07);border-color:rgba(15,123,86,.25);color:var(--bandeau-vert-fg)}
.bandeau-rouge{background:rgba(179,38,30,.06);border-color:rgba(179,38,30,.28);color:var(--bandeau-rouge-fg)}
.bandeau-info{background:rgba(13,92,122,.07);border-color:rgba(13,92,122,.25);color:var(--bandeau-info-fg)}

/* ── LISTES ──────────────────────────────────────────────────────────────── */
.recherche{width:100%;padding:9px 13px;border:1px solid var(--border);
  border-radius:calc(var(--r) - 2px);background:var(--card);margin-bottom:12px;font-size:13.5px}
.recherche:focus{outline:0;border-color:var(--ring)}
.liste{background:var(--card);border:1px solid var(--border);border-radius:var(--r);
  overflow:hidden}
.ligne{display:flex;align-items:center;gap:14px;padding:11px 15px;
  border-bottom:1px solid var(--border);font-size:13.5px}
.ligne:last-child{border-bottom:0}
a.ligne:hover{background:var(--muted)}
.ligne-date{color:var(--muted-fg);font-size:12.5px;flex-shrink:0;width:104px}
.ligne-titre{flex:1;font-weight:500;min-width:0;overflow:hidden;text-overflow:ellipsis}
.ligne-meta{color:var(--muted-fg);font-size:12px;flex-shrink:0}
.ligne-langs{display:flex;gap:6px;flex-wrap:wrap}
.lang-pill{padding:4px 10px;border-radius:99px;background:var(--muted);
  border:1px solid var(--border);font-size:12.5px;font-weight:500}
.lang-pill:hover{border-color:var(--or);background:var(--or-doux);color:var(--or-texte)}
.vide{padding:34px 20px;text-align:center;color:var(--muted-fg);font-size:13.5px}
/* Intertitre de rubrique dans une liste de fiches (« On parle de nous » les groupe par
   presse écrite / audiovisuel / conférences / expositions). */
.liste-fiches .sous-titre{margin:26px 0 10px;font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted-fg);font-weight:700}
.liste-fiches .sous-titre:first-child{margin-top:0}

/* ── ÉDITEUR (les crochets du JavaScript sont FIGÉS : ids et data-* inchangés) ── */
.editeur{background:var(--card);border:1px solid var(--border);border-radius:var(--r);padding:18px}
.champ{display:block;margin-bottom:15px;font-size:12.5px;font-weight:500;color:var(--muted-fg)}
.champ-court{max-width:210px}
.champ-aide{font-weight:400}
.champ input,.champ textarea{display:block;width:100%;margin-top:5px;padding:9px 12px;
  border:1px solid var(--border);border-radius:calc(var(--r) - 2px);background:var(--bg);
  font-weight:400;font-size:14.5px;color:var(--fg)}
.champ input:focus,.champ textarea:focus{outline:0;border-color:var(--ring)}
#f-titre{font-size:17px;font-weight:600}
.blocs-tete{margin:22px 0 10px;padding-top:18px;border-top:1px solid var(--border)}
.blocs-tete h2{font-size:14.5px}
.bloc-item{display:flex;gap:10px;padding:10px;border:1px solid var(--border);
  border-radius:calc(var(--r) - 2px);margin-bottom:8px;background:var(--card)}
.bloc-item[data-t="h1"],.bloc-item[data-t="h2"],.bloc-item[data-t="h3"],
.bloc-item[data-t="h4"],.bloc-item[data-t="h5"],.bloc-item[data-t="h6"]{background:var(--titre-fond)}
.bloc-poignee{display:flex;align-items:flex-start;flex-shrink:0}
.bloc-type{font-size:10px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
  color:var(--or-texte);writing-mode:vertical-rl;transform:rotate(180deg);padding:2px 0}
.bloc-corps{flex:1;min-width:0}
.bloc-corps textarea{width:100%;border:0;padding:3px 2px;resize:vertical;background:none;
  font-size:14.5px;line-height:1.6}
/* Ce sélecteur posait outline:0 SANS rien mettre à la place, sur le champ le plus utilisé
   du back-office : au clavier, plus aucune indication du bloc en cours d'édition. La règle
   globale :focus-visible reprend la main ; seul le focus SOURIS reste discret. */
.bloc-corps textarea:focus:not(:focus-visible){outline:0}
.bloc-item[data-t="h1"] textarea,.bloc-item[data-t="h2"] textarea,
.bloc-item[data-t="h3"] textarea,.bloc-item[data-t="h4"] textarea,
.bloc-item[data-t="h5"] textarea,.bloc-item[data-t="h6"] textarea{font-size:16.5px;font-weight:600}
.bloc-item[data-t="blockquote"] textarea{font-style:italic;border-left:3px solid var(--or);
  padding-left:10px}
.bloc-item[data-t="li"] .bloc-corps{position:relative;padding-left:15px}
.bloc-item[data-t="li"] .bloc-corps::before{content:"•";position:absolute;left:2px;top:3px;
  color:var(--or-texte);font-weight:700}
.bloc-photo{display:flex;gap:11px;align-items:flex-start}
.bloc-photo img,.bloc-photo .sans-photo{width:124px;height:86px;object-fit:cover;
  border-radius:7px;flex-shrink:0;background:var(--muted)}
/* Cadre affiché quand il n'y a PAS de visuel : il le dit, au lieu de laisser un carré
   vide que l'on prend pour une image qui ne charge pas. */
.bloc-photo .sans-photo{display:flex;align-items:center;justify-content:center;
  border:1px dashed var(--border);color:var(--muted-fg);font-size:12px;text-align:center;
  padding:4px;box-sizing:border-box}
.bloc-photo .alt{flex:1;min-width:0}
.bloc-photo .alt label{display:block;font-size:11.5px;color:var(--muted-fg);margin-bottom:4px}
.bloc-photo .alt input{width:100%;padding:7px 10px;border:1px solid var(--border);
  border-radius:calc(var(--r) - 3px);font-size:13.5px}
/* 27x24 px avec 3px d'écart : sur tablette, le doigt qui vise « Descendre » touchait
   « Supprimer ». Une cible destructive ne se met pas à 3 px d'une cible ordinaire, et la
   croix est en plus DÉTACHÉE des deux flèches de déplacement. */
.bloc-actions{display:flex;flex-direction:column;gap:8px;flex-shrink:0}
.bloc-actions .sup{margin-top:6px}
.bloc-actions button{width:36px;height:36px;border:1px solid var(--border);background:var(--card);
  border-radius:8px;cursor:pointer;font-size:13px;line-height:1;color:var(--muted-fg);padding:0}
.bloc-actions button:hover{border-color:var(--muted-fg);color:var(--fg)}
.bloc-actions .sup:hover{border-color:var(--rouge);color:var(--rouge)}
.bloc-actions button:disabled{opacity:.35;cursor:not-allowed}
.ajout-blocs{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-top:13px;
  padding-top:13px;border-top:1px dashed var(--border)}
.ajout-blocs>span{font-size:12.5px;color:var(--muted-fg);font-weight:500}
.etat{font-size:12.5px;color:var(--muted-fg);min-width:118px;text-align:right}
.etat.ok{color:var(--vert)}
.etat.err{color:var(--rouge);font-weight:600}
.zone-danger{margin-top:22px;padding-top:16px;border-top:1px solid var(--border)}
.zone-danger summary{cursor:pointer;color:var(--muted-fg);font-size:13px}
.zone-danger p{font-size:13px;color:var(--muted-fg);max-width:60ch}

/* ── GALERIE PHOTOS ──────────────────────────────────────────────────────── */
.galerie-page{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:11px}
.photo-vignette{border:1px solid var(--border);border-radius:var(--r);overflow:hidden;
  background:var(--card)}
.photo-vignette img{display:block;width:100%;height:auto;aspect-ratio:4/3;
  object-fit:cover;background:var(--muted)}
.photo-vignette p{margin:0;padding:7px 9px;font-size:11.5px;color:var(--muted-fg);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-top:1px solid var(--border)}

/* ── LISTES ÉDITABLES : fiches dauphins, partenaires ─────────────────────────
   Mêmes briques que l'éditeur d'article (.bloc-item, .bloc-corps, .bloc-actions) :
   une bénévole qui a appris à déplacer un paragraphe sait déjà déplacer une fiche. */
.liste-fiches{display:flex;flex-direction:column;gap:8px}
.fiche-ligne .bloc-corps{display:flex;flex-direction:column;gap:2px}
.fiche-ligne .champ{margin-bottom:0}
.fiche-champs{display:flex;gap:12px;flex-wrap:wrap;margin-top:9px}
.fiche-champs .champ{flex:1;min-width:150px}
.fiche-champs select{display:block;width:100%;margin-top:5px;padding:9px 12px;
  border:1px solid var(--border);border-radius:calc(var(--r) - 2px);background:var(--bg);
  font-weight:400;font-size:14.5px;color:var(--fg);font-family:inherit}
.fiche-champs select:focus{outline:0;border-color:var(--ring)}
.fiche-photo-actions{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.champ-case{display:flex;align-items:center;gap:8px;margin-top:11px;font-size:13px;
  color:var(--muted-fg);cursor:pointer}
.champ-case input{width:16px;height:16px;accent-color:var(--or-texte);cursor:pointer}
/* retirée du site : visible mais en retrait, pour qu'on la retrouve sans la croire perdue */
.fiche-hors{opacity:.62;background:var(--muted)}
.fiche-hors .champ-case{color:var(--ambre);font-weight:500}

/* ── TEXTES DES PAGES ────────────────────────────────────────────────────── */
.champ-reglage{padding:14px 0;border-bottom:1px solid var(--border)}
.champ-reglage:last-child{border-bottom:0;padding-bottom:0}
.champ-tete{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:6px}
.champ-tete label{font-size:13px;font-weight:600;flex:1;min-width:140px}
.champ-etat{font-size:11.5px;color:var(--muted-fg);white-space:nowrap}
/* Note sous un réglage : la règle qui s'applique (« une date passée n'est plus
   affichée »), en or quand elle s'applique DÉJÀ. */
.champ-reglage .champ-aide{margin:6px 0 0;font-size:12.5px;color:var(--muted-fg);font-weight:400}
.champ-reglage .champ-alerte{color:var(--or-texte);font-weight:600}
/* Sous un champ de lien : ce que le site EN FERA. Un lien qu'elle peut essayer tout de
   suite vaut mieux qu'un « format attendu » qu'elle doit interpréter. */
/* `champ-destination` et pas `champ-lien` : ce dernier appartient DÉJÀ aux cartes de lien
   de l'éditeur d'articles (plus bas). Deux blocs sans rapport se partageaient le nom, et
   chacun héritait des règles de l'autre (beta test du 2026-08-20). */
.champ-destination{margin:6px 0 0;font-size:12.5px;color:var(--muted-fg);word-break:break-all}
.champ-destination a{color:var(--or-texte)}
.champ-destination .refus{color:var(--bandeau-rouge-fg);font-weight:600}
/* ── aperçu d'une page composée ─────────────────────────────────────────────
   Plein écran : elle doit voir la PAGE, pas une vignette dans un coin. Le cadre est en
   bac à sable (voir texte.html) — il ne peut rien faire à l'administration. */
/* `display:flex` s'appliquait AUSSI quand la fenêtre est fermée : elle écrasait le
   `display:none` que le navigateur donne à un <dialog> sans [open], restait en travers de
   la page et COUVRAIT le bouton « Mettre en ligne » (mesuré avec elementFromPoint : le
   clic tombait sur elle). Un dialogue ne se met en forme que lorsqu'il est ouvert. */
.dlg-plein:not([open]){display:none}
.dlg-plein[open]{width:min(1280px,96vw);max-width:96vw;height:92vh;max-height:92vh;padding:0;
  border:0;border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column}
.dlg-plein::backdrop{background:rgba(4,20,28,.55)}
.apercu-tete{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:12px 16px;border-bottom:1px solid var(--border);background:var(--surface);flex:0 0 auto}
.apercu-tete .sous{display:block;font-size:12.5px;color:var(--muted-fg);font-weight:400}
.apercu-actions{display:flex;align-items:center;gap:10px}
#apercu-cadre{flex:1 1 auto;width:100%;border:0;background:#fff}
/* Ce qui va être publié, nommé poste par poste. */
.pub-liste{margin:0 0 14px;padding-left:20px;font-size:13.5px;line-height:1.7}
.pub-liste li{margin:2px 0}
/* ── « Par où commencer » ───────────────────────────────────────────────────
   Trois gestes concrets plutôt que quatre compteurs, et la phrase qui manquait le plus :
   c'est réversible. */
.demarrer{margin-bottom:18px}
.demarrer-gestes{display:grid;grid-template-columns:repeat(auto-fit,minmax(232px,1fr));
  gap:10px;padding:16px 16px 0}
.geste{display:flex;align-items:flex-start;gap:11px;padding:13px 14px;border-radius:14px;
  border:1px solid var(--border);background:var(--bg);text-decoration:none;color:var(--fg);
  transition:border-color .15s,transform .15s}
.geste:hover{border-color:var(--ring);transform:translateY(-1px)}
.geste svg{flex:0 0 auto;width:20px;height:20px;stroke:var(--or-texte);stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;fill:none;margin-top:1px}
.geste span{display:flex;flex-direction:column;gap:2px;font-size:12.5px;color:var(--muted-fg);
  line-height:1.5}
.geste b{font-size:13.5px;color:var(--fg)}
.demarrer-filet{margin:12px 16px 16px;font-size:12.5px;color:var(--muted-fg);line-height:1.6}
.demarrer-filet a{color:var(--or-texte)}
/* un calendrier n'a pas besoin de toute la largeur, et un champ caché n'en prend aucune */
.champ-reglage input[type=date]{width:auto;min-width:200px}
.champ-reglage input[type=hidden]{display:none}
.champ-etat.modifie{color:var(--or-texte);font-weight:600}
/* Une affiche se CHOISIT : la rogner empêche de la reconnaître. Mesuré sur la préversion :
   une image 480×132 servie dans une boîte 124×86 en `cover` perdait 60 % de sa largeur.
   L'éditeur d'articles garde `cover` (photo d'illustration, cadrage voulu). */
.champ-reglage .bloc-photo img{object-fit:contain;background:var(--muted);
  border:1px solid var(--border)}
.champ-reglage input,.champ-reglage textarea{width:100%;padding:9px 12px;
  border:1px solid var(--border);border-radius:calc(var(--r) - 2px);background:var(--bg);
  font-family:inherit;font-size:14.5px;line-height:1.55;color:var(--fg);resize:vertical}
.champ-reglage input:focus,.champ-reglage textarea:focus{outline:0;border-color:var(--ring)}
.lang-pill-mod{background:var(--or-doux);border-color:rgba(255,184,28,.45);color:var(--or-texte)}

/* ── CHOIX DES VIDÉOS ET DES PHOTOS ──────────────────────────────────────── */
.choix-tete{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.choix-tete .sous{margin:0}
.choix-actions{display:flex;gap:6px;margin-left:auto}
.choix{display:grid;gap:10px}
.choix-videos{grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}
.choix-photos{grid-template-columns:repeat(auto-fill,minmax(120px,1fr))}
.choix-item{position:relative;display:block;border:2px solid var(--border);border-radius:var(--r);
  overflow:hidden;background:var(--card);cursor:pointer;transition:border-color .12s,opacity .12s}
.choix-item:hover{border-color:var(--or)}
.choix-item img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;
  background:var(--muted)}
.choix-photos .choix-item img{aspect-ratio:4/3}
.choix-item input{position:absolute;top:8px;left:8px;width:19px;height:19px;z-index:1;
  accent-color:var(--or-texte);cursor:pointer;
  box-shadow:0 0 0 3px rgba(255,255,255,.85);border-radius:4px}
.choix-t{display:block;padding:8px 10px;font-size:12.5px;line-height:1.4;
  border-top:1px solid var(--border)}
/* décoché : grisé, jamais supprimé — elle doit voir ce qu'elle a écarté */
.choix-item.hors{opacity:.4;border-color:var(--border)}
.choix-item.hors img{filter:grayscale(1)}

/* ── FENÊTRES ────────────────────────────────────────────────────────────── */
dialog{border:0;border-radius:var(--r);padding:20px;max-width:min(760px,92vw);width:100%;
  box-shadow:0 18px 50px rgba(13,21,32,.24);color:var(--fg);background:var(--card)}
dialog::backdrop{background:rgba(13,21,32,.45)}
dialog h2{margin-bottom:7px;font-size:16px}
.dlg-intro,.dlg-note{color:var(--muted-fg);font-size:13.5px;margin:0 0 13px;line-height:1.55}
.dlg-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:15px;flex-wrap:wrap}
.dlg-upload{display:flex;align-items:center;gap:11px;flex-wrap:wrap;margin-bottom:9px}
.dlg-upload label{cursor:pointer}
#upload-etat{font-size:13px;color:var(--muted-fg)}
#pub-log{background:var(--abysse);color:#dbe7ee;padding:12px;border-radius:calc(var(--r) - 2px);
  font:12px/1.65 ui-monospace,SFMono-Regular,Menlo,monospace;max-height:250px;overflow:auto;
  white-space:pre-wrap;margin:0}
.galerie{display:grid;grid-template-columns:repeat(auto-fill,minmax(108px,1fr));gap:8px;
  max-height:52vh;overflow:auto;padding:3px}
.galerie button{padding:0;border:2px solid transparent;border-radius:8px;background:none;
  cursor:pointer;aspect-ratio:4/3;overflow:hidden}
.galerie img{width:100%;height:100%;object-fit:cover;display:block;background:var(--muted)}
.galerie button:hover{border-color:var(--or)}

/* ── DIVERS ──────────────────────────────────────────────────────────────── */
#hors-ligne{background:var(--rouge);color:#fff;text-align:center;padding:8px 14px;
  font-size:13.5px;font-weight:500}
#toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);background:var(--abysse);
  color:#fff;padding:11px 18px;border-radius:99px;font-size:13.5px;z-index:100;max-width:90vw;
  box-shadow:0 10px 28px rgba(13,21,32,.3)}
#toast.err{background:var(--rouge)}
/* Bouton d'annulation d'un geste destructif : cible confortable, jamais sous 44px. */
.toast-action{margin-left:14px;min-height:36px;padding:6px 14px;border:1px solid var(--or);
  border-radius:999px;background:none;color:var(--or);font:inherit;font-weight:600;cursor:pointer}
.toast-action:hover{background:var(--or);color:var(--or-fg)}
.voile{display:none}
@media (max-width:899px){
  .barre{position:fixed;top:0;bottom:0;left:0;z-index:60;transform:translateX(-100%);
    transition:transform .22s ease;box-shadow:0 0 40px rgba(13,21,32,.2)}
  .coque.tiroir-ouvert .barre{transform:none}
  .coque.replie .barre{width:248px}     /* en tiroir, jamais la version repliée */
  .coque.tiroir-ouvert .voile{display:block;position:fixed;inset:0;z-index:55;
    background:rgba(13,21,32,.4)}
  .page{padding:16px 13px 56px}
  .pagehead h1{font-size:1.3rem}
  .ligne{flex-wrap:wrap;gap:4px 12px}
  .ligne-date{width:auto}
  .ligne-meta{width:100%}
  .bloc-photo{flex-wrap:wrap}
  .bloc-photo img{width:100%;height:150px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ── CONNEXION (écran validé par Jordy : identité de l'association) ─────────
   LES POLICES DU SITE, pas celles de l'administration. Mesuré dans un navigateur le
   30/08 : le titre s'affichait en « Iowan Old Style », le repli système de `--serif` —
   la première page que voit la présidente ne portait donc PAS la typographie de son
   site. Fraunces et Jost sont servies par le vhost du site sur la MÊME origine
   (/fonts/*.woff2, vérifié 200), et la politique de sécurité de l'administration dit
   `font-src 'self'` : elles passent.

   Aucun `local()` : une face locale du même nom écraserait la famille entière ou
   figerait sa graisse, sans le moindre signal (leçon payée sur un autre projet).
   `font-display:swap` : sur une connexion d'atoll, le texte s'affiche tout de suite
   dans le repli plutôt que de laisser un écran vide. */
@font-face{font-family:'Fraunces';font-style:normal;font-weight:100 900;font-display:swap;
  src:url('/fonts/fraunces-600-latin.woff2') format('woff2')}
@font-face{font-family:'Fraunces';font-style:italic;font-weight:400;font-display:swap;
  src:url('/fonts/fraunces-400-italic-latin.woff2') format('woff2')}
@font-face{font-family:'Jost';font-style:normal;font-weight:400;font-display:swap;
  src:url('/fonts/jost-400-latin.woff2') format('woff2')}
@font-face{font-family:'Jost';font-style:normal;font-weight:600;font-display:swap;
  src:url('/fonts/jost-600-latin.woff2') format('woff2')}

.login-body{
  /* Variables SURCHARGÉES ici seulement : elles cascadent aux descendants de ce body,
     donc les seize autres écrans gardent Figtree et leur pile système. */
  --serif:'Fraunces',"Iowan Old Style",Palatino,Georgia,serif;
  --sans:'Jost',Figtree,ui-sans-serif,system-ui,sans-serif;
  font-family:var(--sans);margin:0;min-height:100svh;display:grid;place-items:center;padding:26px 20px;
  position:relative;overflow:hidden;background:var(--abysse)}
/* LA PHOTO : les grands dauphins dans la passe de Tiputa, prise par la présidente.
   L'ancienne image pesait 25 Ko en 1600 px — assez compressée pour être floue, et c'était
   un paysage vide. Celle-ci montre le SUJET de l'association, et elle est nette.
   `object-position` un peu haut : les dauphins sont dans le tiers supérieur, le recadrage
   plein écran les coupait sur un écran large et bas. */
.login-fond{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:38% 58%;filter:saturate(1.06) contrast(1.02)}

/* LE VOILE, en deux couches plutôt qu'un aplat uniforme.
   Un voile plat à 62-92 % noyait la photo : on ne voyait plus les dauphins, seulement du
   bleu sombre. Ici la photo respire en haut (28 %), et l'ombre se referme sous le bloc de
   connexion, là où le texte doit être lisible. Le second calque est un vignettage doux :
   il concentre le regard au centre sans assombrir l'image. */
.login-body::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(120% 85% at 50% 42%, rgba(4,18,31,.10) 0%, rgba(4,18,31,.58) 62%,
                    rgba(4,18,31,.88) 100%),
    linear-gradient(180deg, rgba(4,18,31,.28) 0%, rgba(4,18,31,.42) 34%,
                    rgba(4,18,31,.80) 78%, rgba(4,18,31,.95) 100%)}
.login-scene{position:relative;z-index:1;width:100%;max-width:376px;text-align:center;color:#fff;
  /* une ombre portée douce sur tout le bloc : le texte tient sur n'importe quelle zone de
     la photo, y compris si elle est remplacée un jour par une image plus claire. */
  text-shadow:0 1px 18px rgba(2,12,22,.55)}
.login-logo{width:104px;height:auto;margin-bottom:14px;
  filter:drop-shadow(0 6px 22px rgba(0,0,0,.5))}
/* Le titre est coupé en deux lignes pour le dessin ; un lecteur d'écran doit
   l'entendre d'un seul tenant, pas « Dauphins » puis « de Rangiroa ». */
.sr-seul{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.login-scene h1 .h1-l1{display:block}
.login-scene h1{font-family:var(--serif);font-size:clamp(2.05rem,7.4vw,2.7rem);font-weight:600;
  line-height:1.03;color:#fff;letter-spacing:-.022em;text-wrap:balance}
/* « de Rangiroa » en italique doré : c'est l'accent que le site pose sur un mot de chaque
   titre. SÉLECTEUR PRÉCIS : `h1 span` frappait aussi la première ligne et le doublon pour
   lecteur d'écran — tout le titre virait à l'or (vu à la capture du 30/08). */
.login-scene h1 .h1-l1{display:block;color:#fff;font-style:normal;font-weight:600}
.login-scene h1 .h1-l2{display:block;color:var(--or);font-style:italic;font-weight:400;
  letter-spacing:-.01em;margin-top:.06em}
.login-form label,.login-devise,.login-aide{font-family:var(--sans)}
.login-devise{margin:22px 0 34px;font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;
  color:rgba(255,255,255,.7);text-wrap:balance;font-weight:400}
/* Les trois mots de la devise, séparés par de l'espace plutôt que par un signe : le point
   médian fait « composé », et il se lit mal à cette taille. */
.login-devise span{display:inline-block;padding:0 .62em}
@media (max-width:400px){.login-devise{letter-spacing:.12em;font-size:9.5px}}
/* TÉLÉPHONE EN PAYSAGE, et tout écran bas : le bloc mesurait 609 px de haut pour 390 px
   d'écran — le bouton « Entrer » était HORS ÉCRAN au chargement, il fallait deviner qu'on
   pouvait défiler pour se connecter. On compacte : logo réduit, titre sur une seule ligne,
   devise retirée (elle est décorative), marges resserrées. Mesuré le 30/08 en 844×390. */
@media (max-height:520px){
  .login-body{padding:14px 20px;align-items:center}
  .login-logo{width:56px;margin-bottom:6px}
  .login-scene h1{font-size:clamp(1.35rem,4.4vh,1.75rem);line-height:1.06}
  .login-scene h1 .h1-l1,.login-scene h1 .h1-l2{display:inline}
  .login-scene h1 .h1-l2{margin-left:.3em}
  .login-devise{display:none}
  .login-form{padding:14px 16px 16px;gap:8px;border-radius:14px}
  .login-form input{padding:12px 15px}
  .login-form .btn{padding:12px;margin-top:2px}
  .login-aide{margin-top:14px;font-size:11.5px;line-height:1.5}
}

/* EN PORTRAIT, l'image est recadrée en bande verticale étroite : avec le cadrage des
   grands écrans, le dauphin tombait derrière le bloc de connexion et il ne restait qu'un
   ciel gris au-dessus (vu à la capture du 30/08). On le remonte dans la zone qui reste
   visible, entre le titre et le formulaire. */
@media (orientation:portrait) and (max-width:760px){
  .login-fond{object-position:33% 43%}
  .login-body::after{background:
    linear-gradient(180deg, rgba(4,18,31,.52) 0%, rgba(4,18,31,.30) 26%,
                    rgba(4,18,31,.46) 46%, rgba(4,18,31,.86) 72%, rgba(4,18,31,.96) 100%)}
  .login-logo{width:92px;margin-bottom:12px}
}
/* AU-DESSUS DE 1000 px, le bloc se décale vers la droite : centré, il coupait le dauphin
   en deux. Le sujet de la photo garde sa moitié gauche, la connexion occupe la droite.
   En dessous, il n'y a pas la largeur pour deux zones : tout reste centré. */
@media (min-width:1000px){
  .login-body{place-items:center end;padding-right:clamp(48px,11vw,150px)}
  .login-body::after{background:
    radial-gradient(85% 105% at 76% 50%, rgba(4,18,31,.74) 0%, rgba(4,18,31,.34) 58%,
                    rgba(4,18,31,.30) 100%),
    linear-gradient(90deg, rgba(4,18,31,.10) 0%, rgba(4,18,31,.20) 38%,
                    rgba(4,18,31,.72) 74%, rgba(4,18,31,.88) 100%)}
}
.login-form{display:flex;flex-direction:column;gap:11px;text-align:left;
  padding:20px 20px 22px;border-radius:18px;
  background:linear-gradient(180deg, rgba(6,22,36,.52), rgba(4,16,27,.68));
  border:1px solid rgba(255,255,255,.13);
  -webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);
  box-shadow:0 22px 60px -28px rgba(0,0,0,.9);text-shadow:none}
.login-form label{font-size:12px;letter-spacing:.08em;text-transform:uppercase;
  color:rgba(255,255,255,.72);padding-left:2px}
.login-form input{width:100%;padding:15px 17px;border-radius:12px;font-size:16px;color:#fff;
  background:rgba(255,255,255,.09);border:1.5px solid rgba(255,255,255,.22);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:border-color .15s}
.login-form input:focus{outline:0;border-color:var(--or);background:rgba(255,255,255,.14)}
.login-form .btn{width:100%;padding:15px;margin-top:5px;font-size:15.5px;border-radius:12px;
  box-shadow:none}
.login-erreur{margin:2px 0 0;padding:11px 14px;border-radius:10px;font-size:13.5px;
  background:rgba(179,38,30,.24);border:1px solid rgba(255,150,140,.42);color:#ffdad6}
/* Ce paragraphe porte l'adresse à écrire quand le mot de passe est perdu : c'est
   exactement le moment où l'on a besoin de le LIRE. À 50 % d'opacité sur ce fond, il
   passait sous le seuil de contraste (mesuré le 30/08). */
.login-aide{margin:26px 0 0;font-size:12.5px;line-height:1.75;color:rgba(255,255,255,.78)}
.login-aide a{color:var(--or);text-underline-offset:.18em}

/* ── ASSISTANT CONVERSATIONNEL ───────────────────────────────────────────────
   Un mode d'emploi se lit en diagonale, debout, sur un atoll : des titres qui
   découpent, des étapes numérotées, et l'adresse secrète masquée par défaut —
   elle ne doit pas rester lisible par-dessus l'épaule ni sur une capture. */
.titre-section{margin:26px 0 10px;font-size:1.05rem;font-weight:600}
.titre-section:first-of-type{margin-top:18px}
/* padding SCOPÉ : le poser sur .carte l'aurait ajouté aux cartes à en-tête du tableau
   de bord, qui portent déjà le leur (.carte-tete) — double marge à l'écran. */
.carte-tuto{padding:16px}
.carte-note{margin:0 0 10px;color:var(--muted-fg);font-size:13.5px;line-height:1.6}
.carte-note:last-child{margin-bottom:0}
.lien-secret{display:flex;flex-wrap:wrap;gap:10px;align-items:center;
  background:var(--muted);border:1px solid var(--border);border-radius:calc(var(--r) - 2px);
  padding:11px 13px}
.lien-secret code{flex:1;min-width:220px;font-size:13px;word-break:break-all;
  color:var(--fg);font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.lien-actions{display:flex;gap:8px;flex-wrap:wrap}
.etapes{margin:0;padding-left:20px;font-size:14px;line-height:1.75}
.etapes li{margin-bottom:7px}
.etapes li:last-child{margin-bottom:0}
.exemples{margin:0 0 12px;padding-left:18px;line-height:1.7}
.exemples li{margin-bottom:8px}
.exemple{color:var(--or-texte);font-style:italic}

/* ── THÈME SOMBRE ────────────────────────────────────────────────────────────
   TROIS états, pas deux : sans choix explicite on suit l'appareil (le soir, son
   téléphone bascule tout seul) ; un clic sur la lune fige « sombre », un clic sur
   le soleil fige « clair ». `data-theme` sur <html> est posé AVANT le rendu par
   theme-init.js, sinon chaque page clignote en clair avant de basculer.

   🔴 L'OR CHANGE DE RÔLE ENTRE LES DEUX THÈMES. Sur fond clair, l'or vif est
   illisible en texte (1,9:1) et c'est l'or SOMBRE qui parle. Sur fond sombre,
   c'est l'inverse exact : #8a5e00 sur #0e1a25 tombe à 2:1, et c'est l'or VIF qui
   devient lisible (10,9:1). Reprendre la même variable dans les deux thèmes aurait
   rendu illisible la moitié des libellés de marque. Même bascule pour les couleurs
   d'état : un vert ou un ambre calibrés sur du blanc s'éteignent sur du sombre. */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="clair"]){
    --bg:#0b1520; --fg:#e7eef4; --card:#111e2b; --muted:#16232f; --muted-fg:#9dabb8;
    --border:#23323f; --ring:#7cc4e3;
    --or-texte:#ffb81c;
    --or-doux:rgba(255,184,28,.16);
    --sidebar:#0e1a25; --sidebar-border:#20303c;
    --survol:#1a2836; --titre-fond:#16212d;
    --bandeau-or-fg:#ffd27a; --bandeau-vert-fg:#5fd3a6;
    --bandeau-rouge-fg:#ff9b93; --bandeau-info-fg:#8fcfe8;
    --pilule-vert-fg:#5fd3a6; --pilule-or-fg:#ffc740; --pilule-info-fg:#8fcfe8;
    --ombre:0 1px 2px rgba(0,0,0,.35);
  }
}
:root[data-theme="sombre"]{
  --bg:#0b1520; --fg:#e7eef4; --card:#111e2b; --muted:#16232f; --muted-fg:#9dabb8;
  --border:#23323f; --ring:#7cc4e3;
  --or-texte:#ffb81c;
  --or-doux:rgba(255,184,28,.16);
  --sidebar:#0e1a25; --sidebar-border:#20303c;
  --survol:#1a2836; --titre-fond:#16212d;
  --bandeau-or-fg:#ffd27a; --bandeau-vert-fg:#5fd3a6;
  --bandeau-rouge-fg:#ff9b93; --bandeau-info-fg:#8fcfe8;
  --pilule-vert-fg:#5fd3a6; --pilule-or-fg:#ffc740; --pilule-info-fg:#8fcfe8;
  --ombre:0 1px 2px rgba(0,0,0,.35);
}
/* le navigateur doit connaître le thème : sans ça, les champs de saisie et les
   ascenseurs restent blancs au milieu d'un écran sombre */
:root[data-theme="sombre"]{color-scheme:dark}
:root[data-theme="clair"]{color-scheme:light}
@media (prefers-color-scheme:dark){:root:not([data-theme="clair"]){color-scheme:dark}}

/* une seule des deux icônes à la fois : la lune quand on est en clair (elle indique
   où l'on VA), le soleil quand on est en sombre */
#theme-btn svg:nth-of-type(2){display:none}
:root[data-theme="sombre"] #theme-btn svg:nth-of-type(1){display:none}
:root[data-theme="sombre"] #theme-btn svg:nth-of-type(2){display:block}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="clair"]) #theme-btn svg:nth-of-type(1){display:none}
  :root:not([data-theme="clair"]) #theme-btn svg:nth-of-type(2){display:block}
}

/* ── HISTORIQUE DES MISES EN LIGNE ───────────────────────────────────────── */
.tableau{width:100%;border-collapse:collapse;font-size:13.5px}
.tableau th{text-align:left;font-size:11px;font-weight:500;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted-fg);padding:12px 16px;
  border-bottom:1px solid var(--border)}
.tableau td{padding:13px 16px;border-bottom:1px solid var(--border);vertical-align:middle}
.tableau tr:last-child td{border-bottom:0}
.tableau .pilule{margin-left:9px}
.ligne-en-ligne{background:var(--or-doux)}
.ligne-action{text-align:right;white-space:nowrap}
@media (max-width:700px){
  .tableau th:nth-child(2),.tableau td:nth-child(2),
  .tableau th:nth-child(3),.tableau td:nth-child(3){display:none}
  .tableau td,.tableau th{padding:11px 12px}
}
.note-inerte{color:var(--muted-fg);font-size:12.5px;font-style:italic}

/* Carte de lien vers un article extérieur : cinq champs, pas un. */
.bloc-lien{display:grid;grid-template-columns:1fr 1fr;gap:8px 12px}
.bloc-lien .champ-lien:nth-child(5){grid-column:1 / -1}
.champ-lien{display:block}
.champ-lien span{display:block;font-size:11.5px;color:var(--muted-fg);margin-bottom:4px}
.champ-lien input{width:100%;padding:7px 10px;border:1px solid var(--border);
  border-radius:calc(var(--r) - 3px);font-size:13.5px;font-family:inherit}

/* Correction du 2026-08-20 (2ᵉ passe) : la règle ci-dessus faisait « céder le titre »,
   et mesuré, il ne restait plus RIEN — 1 px de large à 360 px, 31 px à 390 px. Un banc qui
   ne regarde que le débordement déclare vert un titre devenu invisible. Ce qui doit céder,
   c'est ce qui est REDIT ailleurs : la pastille d'état répète mot pour mot le bandeau situé
   juste en dessous, et l'heure locale n'a pas à voler la place du nom de l'écran. */
@media (max-width:560px){
  .haut > .pilule{display:none}
  .haut-titre span{display:none}
}
/* En dessous de 900 px le menu est un TIROIR : « replier ou déplier le menu » n'a plus
   d'objet, et deux boutons de menu se suivaient sur un téléphone. Il rendait au titre
   les 40 px qui lui manquaient pour s'écrire en entier. */
@media (max-width:899px){ #replier-btn{display:none} }

/* Onglets de langue de la carte « Versions traduites ». Le site est trilingue : la
   présidente choisit la langue qu'elle relit, et voit d'un coup d'œil laquelle est
   ouverte. Sans marque visible, elle corrigerait l'espagnol en croyant lire l'anglais. */
.onglets-lang { display: inline-flex; gap: 6px; margin-left: 12px }
.onglets-lang .btn-mini { opacity: .55 }
.onglets-lang .btn-mini.actif { opacity: 1; border-color: var(--or, #8a5e00); font-weight: 600 }

/* ── GUIDE DE PRISE EN MAIN ──────────────────────────────────────────────────
   Visite interactive (static/guide.js). Le voile assombrit tout, le « spot » découpe
   une fenêtre de lumière sur la cible (ombre géante), la bulle raconte l'étape.
   z-index 9000 : au-dessus de la coque et du tiroir (60), sous rien — le dialogue
   de mise en ligne est en top-layer natif et ne coexiste jamais avec le guide. */
.guide-voile{position:fixed;inset:0;z-index:9000}
.guide-fond{position:fixed;inset:0;background:rgba(4,18,31,.62)}
.guide-attente{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);
  margin:0;color:#fff;font-size:13.5px;opacity:.85}
.guide-spot{position:fixed;border-radius:12px;pointer-events:none;
  box-shadow:0 0 0 9999px rgba(4,18,31,.62);outline:2px solid var(--or);outline-offset:2px}
.guide-bulle{position:fixed;background:var(--card);border:1px solid var(--border);
  border-radius:14px;box-shadow:0 18px 50px rgba(4,18,31,.35);padding:16px 18px 14px}
.guide-bulle:focus{outline:none}
.guide-bulle h3{font-size:15px;margin:0 0 6px;padding-right:22px;line-height:1.3}
.guide-bulle>p{margin:0;font-size:13.5px;color:var(--muted-fg);line-height:1.55}
.guide-fermer{position:absolute;top:6px;right:6px;width:30px;height:30px;border:0;
  background:none;cursor:pointer;font-size:19px;line-height:1;color:var(--muted-fg);
  border-radius:8px}
.guide-fermer:hover{background:var(--muted);color:var(--fg)}
.guide-pied{display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin-top:14px}
.guide-compte{font-size:11.5px;color:var(--muted-fg);font-variant-numeric:tabular-nums;
  flex-shrink:0}
.guide-btns{display:flex;gap:4px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.guide-btn-sec{background:none;border:0;font-size:12.5px;color:var(--muted-fg);
  cursor:pointer;padding:6px 6px;border-radius:8px;white-space:nowrap}
.guide-btn-sec:hover{background:var(--muted);color:var(--fg)}
.guide-suivant{white-space:nowrap}
.guide-barre{margin-top:12px;height:4px;border-radius:99px;background:var(--muted);
  overflow:hidden}
.guide-barre i{display:block;height:100%;background:var(--or);border-radius:99px;
  transition:width .25s}

/* ── Photos des pages ────────────────────────────────────────────────────────
   Une carte par endroit du site où se pose une photo. La vignette EST le bouton :
   « cliquez sur la photo pour la changer » se comprend sans notice. */
.pp-item { display: flex; flex-direction: column; gap: .35rem; }
.pp-vignette { padding: 0; border: 1px solid var(--trait); border-radius: .5rem;
               overflow: hidden; background: var(--fond-2); cursor: pointer;
               aspect-ratio: 3 / 2; display: grid; place-items: center; }
.pp-vignette:hover, .pp-vignette:focus-visible { border-color: var(--or); }
.pp-vignette img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pp-vide { font-size: .78rem; color: var(--doux); padding: .5rem; text-align: center; }
.pp-origine { font-size: .72rem; color: var(--doux); }
.pp-origine[data-origine="choisie"] { color: var(--or); }

/* Documents : l'état d'un dépôt se lit d'un coup d'œil, sans ouvrir le fichier. */
.doc-item .doc-etat { display: block; margin-top: .15rem; }
.doc-item .alt { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; }
.doc-item label.btn { cursor: pointer; }