/* =======================================================================
   Famille Moulin — feuille de style unique.

   Trois principes :
     1. les PHOTOS sont les seules taches de couleur de la page ;
     2. l'ombre remplace le trait — ça aère sans ajouter de bruit ;
     3. une seule couleur d'action (le bleu) ; le violet et le vert ne
        servent qu'à distinguer Vidéos et Nouveautés.

   Le fond clair est un blanc légèrement CHAUD : sur du blanc pur, les
   photos anciennes, jaunies, paraissent sales.

   Le site suit le réglage du téléphone : clair le jour, sombre la nuit.
   TOUTES les couleurs passent par les variables ci-dessous — c'est ce qui
   permet de basculer d'un thème à l'autre sans toucher au reste.
   ======================================================================= */

:root{
  --bg:#F6F5F3;
  --panel:#FFFFFF;
  --panel2:#F1EFEC;
  --panel3:#FBFAF9;
  --line:#E6E2DC;
  --txt:#191715;
  --muted:#6E6862;
  --faible:#A9A29B;

  --accent:#2F6BFF;            /* la couleur d'action, une seule */
  --accent-fonce:#2559DB;
  --accent-doux:#EAF0FF;
  --sur-accent:#FFFFFF;        /* texte posé SUR la couleur d'action */
  --accent2:#7C3AED;

  --seg-photo:#2F6BFF;
  --seg-video:#7C3AED;
  --seg-neuf:#0E9F6E;
  --neuf-doux:#ECFAF4;
  --neuf-txt:#0A7C55;
  --ok:#0E9F6E;
  --ok-doux:#E8F7F1;
  --danger:#D64545;
  --danger-doux:#FDECEC;
  --danger-txt:#8E2020;

  --entete:rgba(246,245,243,.86);
  --radius:14px;
  --ombre:0 1px 2px rgba(25,23,21,.05), 0 8px 24px -12px rgba(25,23,21,.18);
  --ombre-forte:0 2px 6px rgba(25,23,21,.07), 0 18px 36px -18px rgba(25,23,21,.28);
  color-scheme:light;
}

/* --------------------------------------------------------- mode nuit ---
   Le téléphone décide. On ne redéfinit QUE les variables : aucune règle
   n'est dupliquée, donc rien ne peut diverger entre les deux thèmes. */
@media (prefers-color-scheme: dark){
  :root{
    --bg:#141317;
    --panel:#1C1B20;
    --panel2:#26252B;
    --panel3:#222127;
    --line:#33323A;
    --txt:#EDEBE8;
    --muted:#A29EA8;
    --faible:#736F79;

    --accent:#6E9BFF;
    --accent-fonce:#8AAEFF;
    --accent-doux:#232A3D;
    --sur-accent:#101018;
    --accent2:#A78BFA;

    --seg-photo:#6E9BFF;
    --seg-video:#A78BFA;
    --seg-neuf:#3FC994;
    --neuf-doux:#182A24;
    --neuf-txt:#5FD8AA;
    --ok:#3FC994;
    --ok-doux:#182A24;
    --danger:#F07070;
    --danger-doux:#2E1D1D;
    --danger-txt:#FFB4B4;

    --entete:rgba(20,19,23,.86);
    --ombre:0 1px 2px rgba(0,0,0,.35), 0 8px 24px -12px rgba(0,0,0,.6);
    --ombre-forte:0 2px 6px rgba(0,0,0,.45), 0 18px 36px -18px rgba(0,0,0,.75);
    color-scheme:dark;
  }
}

*{box-sizing:border-box}
[hidden]{display:none !important}   /* sinon .row{display:flex} annule l'attribut hidden */
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--txt);
  font:16px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased}
body.lb-ouverte{overflow:hidden}
a{color:inherit;text-decoration:none}
a:hover{color:var(--accent)}
h1{font-size:1.55rem;letter-spacing:-.02em;margin:0 0 .4rem}
h2{font-size:1.08rem;letter-spacing:-.01em;margin:1.6rem 0 .7rem}
p{margin:.5rem 0}
code{background:var(--panel2);padding:.05rem .3rem;border-radius:5px;font-size:.88em}
.muted{color:var(--muted);font-size:.92rem}
.aide{display:block;color:var(--muted);font-size:.83rem;margin-top:.25rem;line-height:1.45}
.etq{display:block;color:var(--muted);font-size:.85rem;margin-bottom:.3rem}
.mono{font-family:ui-monospace,Menlo,Consolas,monospace;letter-spacing:.01em}
.err{background:var(--danger-doux);border-left:3px solid var(--danger);color:var(--danger-txt);
  padding:.75rem 1rem;border-radius:10px}
.err-inline{color:var(--danger)}
.ok-msg{background:var(--ok-doux);border-left:3px solid var(--ok);color:var(--neuf-txt);
  padding:.75rem 1rem;border-radius:10px}
.ok-inline{color:var(--ok)}
.flash{margin:0 0 1.2rem}

/* --------------------------------------------------------------- en-tête */
.top{position:sticky;top:0;z-index:20;background:var(--entete);
  backdrop-filter:saturate(180%) blur(12px);-webkit-backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--line);display:flex;align-items:center;gap:1.2rem;
  padding:.7rem 1.4rem;flex-wrap:wrap}
.brand{font-weight:800;letter-spacing:-.02em;font-size:1.05rem}
.top nav{display:flex;gap:.15rem;flex:1;flex-wrap:wrap;align-items:center}
.top nav a{color:var(--muted);padding:.35rem .6rem;border-radius:9px;font-size:.93rem;
  font-weight:500;white-space:nowrap}
.top nav a:hover{background:var(--panel2);color:var(--txt)}
.top nav a.on{background:var(--accent-doux);color:var(--accent);font-weight:600}
.top nav a.ajouter{color:var(--accent);font-weight:700}
.top nav a.aider{color:var(--seg-neuf)}
.out{color:var(--muted);font-size:.88rem}
.out .qui{color:var(--txt);font-weight:700}
.pastille{background:var(--accent);color:var(--sur-accent);border-radius:20px;padding:0 .42rem;
  font-size:.72rem;font-weight:700;margin-left:.2rem;display:inline-block}
.top nav a.aider .pastille{background:var(--seg-neuf)}
.top nav a.commente .pastille{background:var(--seg-video)}

.wrap{max-width:1280px;margin:0 auto;padding:1.6rem 1.4rem 5rem}
.center{min-height:100dvh;display:grid;place-items:center;padding:1rem}

/* ----------------------------------------------------------------- blocs */
.card{background:var(--panel);border-radius:var(--radius);box-shadow:var(--ombre);
  padding:1.3rem;margin-bottom:1.3rem}
.card.empty{text-align:center;color:var(--muted);padding:3.5rem 1rem}
.texte{max-width:74ch;line-height:1.7}
.texte ul{padding-left:1.2rem}

.login{width:min(400px,100%);display:grid;gap:1rem;text-align:center;padding:2rem 1.6rem}
.login h1{font-size:1.55rem;margin:0}
.login .soustitre{color:var(--accent);font-size:.95rem;font-weight:600;margin:-.6rem 0 .4rem}
.login .champ{display:grid;gap:.35rem;text-align:left;font-size:.85rem;color:var(--muted)}
.login input,.login select{width:100%;font-size:1rem}
.login .muted{font-size:.84rem;margin:.2rem 0 0}

input,select,textarea{background:var(--panel);border:1px solid var(--line);color:var(--txt);
  padding:.6rem .75rem;border-radius:10px;font:inherit;max-width:100%}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-doux)}
input::placeholder,textarea::placeholder{color:var(--faible)}

button,.btn{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;
  background:var(--accent);color:var(--sur-accent);border:0;padding:.62rem 1.05rem;
  border-radius:10px;font:inherit;font-weight:600;cursor:pointer;text-align:center}
button:hover,.btn:hover{background:var(--accent-fonce);color:var(--sur-accent)}
button:disabled{opacity:.45;cursor:not-allowed}
.btn.ghost{background:var(--panel);color:var(--txt);box-shadow:inset 0 0 0 1px var(--line)}
.btn.ghost:hover{background:var(--panel2);color:var(--txt)}
.btn.danger,button.danger{background:var(--danger);color:#fff}
.btn.danger:hover,button.danger:hover{background:var(--danger);filter:brightness(.92);color:#fff}
.btn.gros,button.gros{padding:.8rem 1.35rem;font-size:1.02rem}
.btn.small,button.small{padding:.42rem .78rem;font-size:.88rem;border-radius:9px}
.lien-x{background:none;border:0;color:var(--faible);cursor:pointer;padding:0 .2rem;font-size:1rem}
.lien-x:hover{color:var(--danger);background:none}
.row{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center}
form{margin:0 0 .5rem}
form:last-child{margin-bottom:0}

.bar{display:flex;justify-content:space-between;align-items:flex-end;gap:1rem;
  flex-wrap:wrap;margin-bottom:1.2rem}
.bar h1{margin:0}
.bar h1 .muted{font-weight:400;margin-left:.4rem;font-size:.95rem}

/* ------------------------------------------- onglets en pilule discrète */
.segments{display:inline-flex;background:var(--panel2);padding:4px;border-radius:13px;
  gap:2px;margin-bottom:1.4rem;max-width:100%;overflow-x:auto;scrollbar-width:none}
.segments::-webkit-scrollbar{display:none}
.segments a{display:flex;align-items:center;gap:.45rem;padding:.55rem 1.05rem;border-radius:10px;
  font-size:.94rem;font-weight:600;color:var(--muted);white-space:nowrap;--c:var(--accent)}
.segments a:hover{color:var(--txt)}
.segments a.on{background:var(--panel);color:var(--c);box-shadow:var(--ombre)}
.segments a:nth-child(2){--c:var(--seg-video)}
.segments a:nth-child(3),.segments a.neuf{--c:var(--seg-neuf)}
.segments .ic{font-size:1.05rem;line-height:1}
.segments .n{background:var(--panel);border-radius:20px;padding:0 .45rem;font-size:.76rem;
  font-weight:700;color:var(--muted)}
.segments a.on .n{background:var(--panel2);color:var(--c)}
.bandeau-neuf{margin:-.8rem 0 1.2rem}

/* --------------------------------------------- frise des années (tri) */
.frise-an{display:flex;gap:.4rem;overflow-x:auto;padding-bottom:.4rem;margin-bottom:1.2rem;
  scrollbar-width:thin}
.frise-an a{flex:0 0 auto;padding:.4rem .85rem;border-radius:20px;background:var(--panel);
  box-shadow:inset 0 0 0 1px var(--line);color:var(--muted);font-size:.9rem;
  white-space:nowrap;font-weight:600}
.frise-an a:hover{color:var(--txt);box-shadow:inset 0 0 0 1px var(--faible)}
.frise-an a.on{background:var(--accent);color:var(--sur-accent);box-shadow:none}
.frise-an .n{opacity:.7;font-size:.8rem;font-weight:400}

/* --------------------------------------------------------------- filtres */
.filtres{display:flex;gap:.9rem;flex-wrap:wrap;align-items:flex-end;padding:1rem 1.1rem}
.filtres label{display:grid;gap:.3rem;font-size:.82rem;color:var(--muted);flex:0 1 auto}
.filtres label span{white-space:nowrap}
.filtres label.grand{flex:1 1 240px}
.filtres label.grand input{width:100%}
.filtres .actions{display:flex;gap:.5rem;margin-left:auto}

/* ------------------------------------- bandeaux : annonce, appel, album */
.annonce{display:flex;gap:1.2rem;align-items:center;justify-content:space-between;flex-wrap:wrap;
  background:var(--accent-doux);border-left:3px solid var(--accent)}
.annonce p{margin:.25rem 0 0}

.appel{display:flex;gap:1.4rem;align-items:center;justify-content:space-between;flex-wrap:wrap;
  background:var(--neuf-doux);border-left:3px solid var(--seg-neuf)}
.appel-txt{flex:1;min-width:250px}
.appel-txt strong{color:var(--neuf-txt);font-size:1.06rem}
.appel-txt p{margin:.3rem 0 0;max-width:62ch}
.appel-btn{background:var(--seg-neuf);color:var(--sur-accent);flex:0 0 auto}
.appel-btn:hover{background:var(--seg-neuf);filter:brightness(1.08);color:var(--sur-accent)}

.bandeau-album{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap;background:var(--panel);
  box-shadow:var(--ombre);border-left:3px solid var(--accent);border-radius:12px;
  padding:.8rem 1rem;margin:0 0 1.2rem}

/* --------------------------------------------------------------- grilles */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:1rem;
  align-items:start}
.tuile{margin:0;display:flex;flex-direction:column;background:var(--panel);
  border-radius:var(--radius);overflow:hidden;box-shadow:var(--ombre);
  transition:transform .16s ease, box-shadow .16s ease}
.tuile:hover{transform:translateY(-2px);box-shadow:var(--ombre-forte)}
.tile{position:relative;display:block;background:var(--panel2)}
.tile img{width:100%;aspect-ratio:1;object-fit:cover;display:block}
.tile.choisie{outline:2px solid var(--accent);outline-offset:-2px}
.badge{position:absolute;top:8px;right:8px;background:rgba(15,14,13,.62);border-radius:20px;
  padding:.1rem .5rem;font-size:.76rem;color:#fff;backdrop-filter:blur(4px)}
.badge.an{top:8px;left:8px;right:auto}
.badge.dur{top:auto;bottom:8px;right:8px}
.badge.com{top:auto;bottom:8px;left:8px;right:auto}
.tile .play{position:absolute;inset:0;display:grid;place-items:center;font-size:2rem;color:#fff;
  text-shadow:0 2px 12px rgba(0,0,0,.6);pointer-events:none}

.coeur-btn{position:absolute;bottom:8px;right:8px;width:32px;height:32px;border:0;border-radius:50%;
  background:rgba(255,255,255,.92);color:#8A837C;display:grid;place-items:center;
  cursor:pointer;padding:0;box-shadow:0 1px 4px rgba(0,0,0,.22)}
.coeur-btn:hover{background:#fff;color:var(--danger)}
.coeur-btn.ok{background:#fff;color:#D64545}
.coeur-btn svg{fill:none}
.coeur-btn.ok svg{fill:currentColor}
.coeur-fiche.ok{color:var(--danger);box-shadow:inset 0 0 0 1px var(--danger)}

.coche{position:absolute;top:8px;left:8px;width:24px;height:24px;cursor:pointer;z-index:2}
.coche input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.coche span{display:block;width:24px;height:24px;border-radius:7px;background:rgba(255,255,255,.9);
  box-shadow:0 1px 3px rgba(0,0,0,.25)}
.coche input:checked+span{background:var(--accent)}
.coche input:checked+span::after{content:"✓";display:grid;place-items:center;height:100%;
  color:#fff;font-weight:900;font-size:.85rem}
.tile .badge.an{left:40px}

/* --------------------------------------------- légende sous la vignette */
.tuile-info{padding:.6rem .7rem .7rem;font-size:.85rem}
.ti-tete{display:flex;align-items:center;justify-content:space-between;gap:.4rem}
.ti-an{color:var(--accent);font-weight:700;cursor:pointer;border-radius:6px;padding:0 .2rem}
.ti-an:hover{background:var(--accent-doux)}
.ti-an:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.ti-com{color:var(--faible);flex:0 0 auto;font-size:.78rem;border-radius:20px;padding:.05rem .45rem}
.ti-com:hover{color:var(--accent)}
/* une photo commentée se repère d'un coup d'œil dans la galerie */
.ti-com.a-des{background:var(--accent-doux);color:var(--accent);font-weight:700}
.ti-com.a-des:hover{background:var(--accent);color:var(--sur-accent)}
.ti-vide{color:var(--faible);font-style:italic;font-weight:400}
.ti-noms{list-style:none;margin:.35rem 0 0;padding:0;display:grid;gap:.1rem;
  max-height:8rem;overflow-y:auto}
.ti-noms li{line-height:1.4}
.ti-noms li a{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ti-ajout{margin-top:.2rem}
.ti-nom,.ti-mot{width:100%;font-size:.85rem;padding:.34rem .5rem;border-radius:8px;
  background:var(--panel2);border:1px solid transparent;color:var(--txt)}
.ti-nom:hover,.ti-mot:hover{border-color:var(--line)}
.ti-nom:focus,.ti-mot:focus{background:var(--panel);border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-doux)}
.ti-mot{margin-top:.3rem}
/* les derniers commentaires, sous la vignette : on voit ce qu'on écrit */
.ti-coms{list-style:none;margin:.4rem 0 0;padding:0;display:grid;gap:.25rem}
.ti-coms li{background:var(--panel2);border-radius:8px;padding:.28rem .5rem;font-size:.8rem;
  line-height:1.4;color:var(--muted)}
.ti-coms li strong{color:var(--txt);font-weight:700}
.ti-coms:empty{display:none}
.ti-mot.envoye{border-color:var(--ok);box-shadow:0 0 0 3px var(--ok-doux)}
.ti-nom:disabled,.ti-mot:disabled{opacity:.5}
.ti-saisie{flex:1;min-width:0;font-size:.85rem;padding:.24rem .4rem;border-radius:7px}

/* champ + bouton de validation : la touche Entrée n'existe pas sur le pavé
   numérique d'un iPhone, il faut toujours un ✓ à toucher */
.ti-duo{display:flex;gap:.25rem;align-items:center}
.ti-duo .ti-nom,.ti-duo .ti-mot{flex:1;min-width:0}
.ti-ok{flex:0 0 auto;width:28px;height:28px;padding:0;border-radius:8px;font-size:.8rem;
  line-height:1;background:var(--panel2);color:var(--muted);box-shadow:none}
.ti-ok:hover{background:var(--accent);color:var(--sur-accent)}

.pager{display:flex;gap:.35rem;flex-wrap:wrap;margin-top:1.6rem}
.pager a{padding:.45rem .8rem;border-radius:9px;background:var(--panel);
  box-shadow:inset 0 0 0 1px var(--line);color:var(--muted);font-weight:600;font-size:.9rem}
.pager a:hover{color:var(--txt)}
.pager a.on{background:var(--accent);color:var(--sur-accent);box-shadow:none}

/* --------------------------------------------- barre de sélection basse */
.selbar{position:fixed;left:0;right:0;bottom:0;z-index:30;display:flex;align-items:center;
  gap:1rem;flex-wrap:wrap;justify-content:space-between;margin:0;
  padding:.85rem 1.4rem calc(.85rem + env(safe-area-inset-bottom));
  background:var(--entete);backdrop-filter:blur(12px);
  border-top:1px solid var(--line);box-shadow:0 -8px 28px -16px rgba(0,0,0,.35)}
.selnb{font-size:1rem;font-weight:600}
.selactions{display:flex;gap:.6rem}
body.avec-selbar .wrap{padding-bottom:7rem}

/* ------------------------------------------------------ années / albums */
.frise{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:1rem}
.an-carte{background:var(--panel);border-radius:var(--radius);overflow:hidden;display:block;
  box-shadow:var(--ombre);transition:transform .16s, box-shadow .16s}
.an-carte:hover{transform:translateY(-2px);box-shadow:var(--ombre-forte)}
.an-carte.masque{opacity:.75}
.an-carte img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.an-vide{aspect-ratio:4/3;display:grid;place-items:center;color:var(--faible);background:var(--panel2)}
.an-info{padding:.75rem .9rem;display:grid;gap:.15rem}
.an-num{font-size:1.6rem;font-weight:800;color:var(--accent);line-height:1.1;letter-spacing:-.02em}
.an-nom{font-weight:700}
.an-carte .an-action{margin:0;padding:0 .9rem .9rem}
.an-carte .an-action button{width:100%}
.etiq-masque{display:inline-block;margin-top:.25rem;background:var(--panel2);color:var(--muted);
  border-radius:20px;padding:.05rem .55rem;font-size:.7rem;text-transform:uppercase;
  letter-spacing:.05em;font-weight:700;width:fit-content}

/* ------------------------------------------------------------ personnes */
.people{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:1rem}
.person{background:var(--panel);border-radius:var(--radius);box-shadow:var(--ombre);
  padding:.9rem;text-align:center;display:block;transition:transform .16s, box-shadow .16s}
.person:hover{transform:translateY(-2px);box-shadow:var(--ombre-forte)}
.person img,.person .noface{width:100%;aspect-ratio:1;object-fit:cover;border-radius:50%;
  background:var(--panel2);display:grid;place-items:center;color:var(--faible);font-size:2rem}
.person .nm{margin-top:.6rem;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cest-moi{color:var(--accent);font-size:.76rem;font-weight:800;text-transform:uppercase;
  letter-spacing:.05em}

.anommer{display:grid;gap:1rem}
.an-groupe{display:flex;gap:1.1rem;align-items:flex-start;margin:0}
.an-face{width:110px;height:110px;object-fit:cover;border-radius:14px;flex:0 0 auto}
.an-corps{flex:1;min-width:0;display:grid;gap:.6rem}
.an-exemples{display:flex;gap:.45rem;flex-wrap:wrap}
.an-exemples img{width:66px;height:66px;object-fit:cover;border-radius:9px}

/* ----------------------------------------------------------- fiche photo */
.viewer{display:grid;grid-template-columns:1fr 370px;gap:1.4rem;align-items:start}
.stage{position:relative;background:#12100F;border-radius:var(--radius);overflow:hidden;
  line-height:0;box-shadow:var(--ombre)}
.stage img{max-width:100%;height:auto;display:block;margin:0 auto}
.stage video{width:100%;max-height:75vh;display:block;background:#12100F}
.fbox{position:absolute;border:2px solid var(--accent);border-radius:5px;display:none;pointer-events:none}
.fbox span{position:absolute;bottom:100%;left:0;background:var(--accent);color:var(--sur-accent);
  font-size:.7rem;padding:0 .3rem;border-radius:4px;white-space:nowrap;line-height:1.5;font-weight:700}
.side{background:var(--panel);border-radius:var(--radius);box-shadow:var(--ombre);padding:1.2rem}
.side h1{font-size:1.1rem;word-break:break-word}
.side h2{font-size:.76rem;margin:1.4rem 0 .5rem;color:var(--muted);text-transform:uppercase;
  letter-spacing:.06em;font-weight:700}
dl{display:grid;grid-template-columns:auto 1fr;gap:.4rem .9rem;font-size:.92rem;margin:1rem 0}
dt{color:var(--muted)}
dd{margin:0}
.faces{display:grid;grid-template-columns:repeat(auto-fill,minmax(90px,1fr));gap:.6rem;margin-bottom:1rem}
.face img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:10px}
.face .muted{font-size:.78rem;text-align:center}

.etiquettes{list-style:none;padding:0;margin:.5rem 0;display:flex;flex-wrap:wrap;gap:.4rem}
.etiquettes li{display:flex;align-items:center;gap:.25rem;background:var(--accent-doux);
  color:var(--accent);border-radius:20px;padding:.22rem .7rem;font-size:.88rem;font-weight:600}
.etiquettes li a{color:inherit}
.etiquettes form{margin:0}
.etiquettes .muted{font-size:.7rem;font-weight:400}

.commentaires{list-style:none;padding:0;margin:.6rem 0;display:grid;gap:.7rem}
.commentaires li{background:var(--panel2);border-radius:12px;padding:.7rem .9rem}
.commentaires p{margin:.2rem 0 0}

/* --------------------------------------------------------- formulaires */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.form-grid label{display:grid;gap:.35rem;font-size:.85rem;color:var(--muted)}
.form-grid label input,.form-grid label select{color:var(--txt);font-size:1rem}
.form-grid .large{grid-column:1/-1}
.form-grid h2{grid-column:1/-1;margin:.4rem 0 0}
.form-grid .checkbox{display:flex;align-items:center;gap:.6rem;color:var(--txt);font-size:.95rem}
.form-grid .checkbox input{width:20px;height:20px;flex:0 0 auto}
input[type=checkbox]{accent-color:var(--accent)}

.annee-ligne{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center}
.annee-ligne input{width:9rem}
.annees-rapides{display:flex;gap:.35rem;flex-wrap:wrap}
.cocheurs{display:flex;flex-wrap:wrap;gap:.5rem;margin:.5rem 0 .8rem}
.cocheurs label{display:flex;align-items:center;gap:.45rem;background:var(--panel2);
  border-radius:20px;padding:.4rem .8rem;cursor:pointer;font-size:.92rem}
.cocheurs label input{width:17px;height:17px;margin:0}
.cocheurs label:has(input:checked){background:var(--accent);color:var(--sur-accent)}
#personnes_nouvelles{width:100%}
.apercu-sms{background:var(--panel2);border-left:3px solid var(--accent);border-radius:10px;
  padding:.85rem 1rem;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.9rem;
  line-height:1.55;word-break:break-word;margin:.6rem 0}

/* --------------------------------------------------------------- envoi */
.drop{border:2px dashed var(--line);border-radius:var(--radius);padding:2.8rem 1rem;
  text-align:center;background:var(--panel);transition:.15s}
.drop.over{border-color:var(--accent);background:var(--accent-doux)}
.progress{margin-top:1rem;background:var(--panel2);border-radius:20px;height:26px;
  position:relative;overflow:hidden}
#bar{background:var(--accent);height:100%;width:0;transition:width .2s}
#pct{position:absolute;inset:0;display:grid;place-items:center;font-size:.85rem;font-weight:600}
.log{list-style:none;padding:0;margin:1rem 0;max-height:50vh;overflow:auto}
.log li{display:flex;justify-content:space-between;gap:1rem;padding:.45rem .7rem;
  border-bottom:1px solid var(--line);font-size:.88rem}
.log li .n{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.log li.ok .s{color:var(--ok);font-weight:600}
.log li.doublon .s{color:#B07D12}
.log li.erreur .s{color:var(--danger)}
.log-out{background:var(--panel2);border-radius:10px;padding:.9rem;overflow:auto;
  font-size:.8rem;color:var(--muted);white-space:pre-wrap}

/* ------------------------------------------------------------- membres */
.membres-liste{background:var(--panel);border-radius:var(--radius);box-shadow:var(--ombre);
  overflow:hidden;margin-bottom:1rem}
.ml-entete,.ml-ligne{display:grid;align-items:center;gap:.5rem;
  grid-template-columns:1.2fr 1.1fr 1.6fr 3.4rem 3.4rem 4rem 3.4rem 5rem 2.8rem;
  padding:.55rem 1rem}
.ml-entete{color:var(--muted);font-size:.74rem;text-transform:uppercase;letter-spacing:.05em;
  font-weight:700;background:var(--panel2)}
.ml-ligne{margin:0;border-top:1px solid var(--line)}
.ml-ligne:hover{background:var(--panel3)}
.ml-ligne.off{opacity:.55}
.ml-champ{display:block;margin:0}
.ml-champ input{width:100%;font-size:.9rem;padding:.34rem .5rem;background:transparent;
  border:1px solid transparent;color:var(--txt);border-radius:8px}
.ml-champ input:hover{background:var(--panel2)}
.ml-champ input:focus{background:var(--panel);border-color:var(--accent)}
.ml-c{text-align:center;margin:0}
.ml-c input[type=checkbox]{width:19px;height:19px;margin:0;cursor:pointer}
.ml-vu{color:var(--muted);font-size:.83rem}
.ml-ligne button{padding:.3rem .55rem;font-size:.95rem;line-height:1}
.tag{background:var(--accent-doux);color:var(--accent);border-radius:20px;padding:.05rem .55rem;
  font-size:.7rem;font-weight:700;text-transform:uppercase}
.tag.off{background:var(--panel2);color:var(--muted)}

/* ----------------------------------------------------------- corbeille */
.corb{display:grid;gap:.8rem}
.corb-l{display:flex;gap:1.1rem;align-items:center;margin:0;padding:.9rem}
.corb-img{width:88px;height:88px;object-fit:cover;border-radius:10px;flex:0 0 auto;
  background:var(--panel2)}
.corb-vide{display:grid;place-items:center;color:var(--faible)}
.corb-i{flex:1;min-width:0}
.corb-a{display:grid;gap:.45rem}

/* ------------------------------------------------------------ doublons */
.dupgroup{background:var(--panel);border-radius:var(--radius);box-shadow:var(--ombre);
  padding:1.1rem;margin-bottom:1rem}
.tile.dup{background:transparent}
.tile.dup .meta{padding:.5rem 0;font-size:.83rem;display:grid;gap:.3rem}
.tile.dup .fn{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.keep{color:var(--ok);font-size:.83rem;font-weight:700}

.tbl{width:100%;border-collapse:collapse;font-size:.92rem}
.tbl th{text-align:left;color:var(--muted);font-weight:700;padding:.5rem .6rem;
  border-bottom:1px solid var(--line);font-size:.78rem;text-transform:uppercase;letter-spacing:.04em}
.tbl td{padding:.55rem .6rem;border-bottom:1px solid var(--line)}
.tbl tr:hover{background:var(--panel2)}
.ligne-off{opacity:.55}

/* ======================================================================
   À identifier
   ====================================================================== */
.ident-tete{background:var(--neuf-doux);border-radius:var(--radius);box-shadow:var(--ombre);
  border-left:3px solid var(--seg-neuf);padding:1.4rem;margin-bottom:1.3rem}
.ident-tete h1{color:var(--neuf-txt)}
.ident-tete p{max-width:64ch}
.jauge{margin-top:1.1rem}
.jauge-fond{height:10px;background:var(--panel2);border-radius:20px;overflow:hidden}
.jauge-part{height:100%;background:var(--seg-neuf);border-radius:20px;transition:width .4s}
.jauge-txt{display:block;margin-top:.45rem;color:var(--muted);font-size:.88rem}
.ident-onglets a{--c:var(--seg-neuf)}
.ident-onglets a:nth-child(2){--c:var(--accent)}
.ident-onglets a:nth-child(3){--c:var(--seg-video)}
.ident-aide{margin:-.6rem 0 1.2rem}
.grid.ident{grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:1.1rem}
.grid.ident .tuile-info{padding:.75rem .85rem .85rem;font-size:.9rem}
.grid.ident .ti-noms{max-height:none}

/* ------------------------------------------------------------ souvenir */
.souvenir-tete{background:var(--panel);border-radius:var(--radius);box-shadow:var(--ombre);
  border-left:3px solid var(--accent);padding:1.6rem;margin-bottom:1.3rem}
.sv-kicker{color:var(--accent);text-transform:uppercase;letter-spacing:.14em;font-size:.74rem;
  font-weight:800}
.souvenir-tete h1{font-size:3.2rem;line-height:1;margin:.25rem 0 .1rem;letter-spacing:-.03em}
.sv-ans{color:var(--muted);margin:0 0 1.2rem}

/* -------------------------------------------------- fils de commentaires */
.fils{display:grid;gap:1rem}
.fil{display:flex;gap:1.2rem;margin:0;align-items:flex-start}
.fil-img img{width:120px;height:120px;object-fit:cover;border-radius:12px;display:block}
.fil-corps{flex:1;min-width:0}
.fil-tete{display:flex;gap:.6rem;flex-wrap:wrap;align-items:baseline;margin-bottom:.6rem}
.fil-coms{list-style:none;padding:0;margin:0 0 .8rem;display:grid;gap:.5rem}
.fil-coms li{background:var(--panel2);border-radius:12px;padding:.6rem .85rem}
.fil-coms li p{margin:.15rem 0 0}

/* ------------------------------------------------------- fenêtre modale */
dialog.modale{border:0;border-radius:var(--radius);background:var(--panel);color:var(--txt);
  padding:0;width:min(620px,94vw);max-height:90vh;overflow:auto;box-shadow:var(--ombre-forte)}
dialog.modale::backdrop{background:rgba(10,9,8,.5);backdrop-filter:blur(3px)}
dialog.modale form{margin:0;padding:1.4rem}
.modale-tete{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1rem}
.modale-tete h2{margin:0}
.modale-tete .lien-x{font-size:1.3rem;line-height:1}
.modale-pied{display:flex;gap:.6rem;justify-content:flex-end;margin-top:1.2rem;
  padding-top:1.2rem;border-top:1px solid var(--line)}

/* --------------------------------------- installation sur le téléphone */
.bandeau-install{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap;justify-content:center;
  background:var(--accent-doux);color:var(--accent);border-bottom:1px solid var(--line);
  padding:.6rem 1rem;font-size:.9rem;font-weight:500}
.install .marches{padding-left:1.3rem;line-height:2}
.ic-demo{display:inline-block;background:var(--panel2);border-radius:6px;padding:0 .4rem;font-size:.9rem}
.install-note{background:var(--accent-doux);border-left:3px solid var(--accent);border-radius:10px;
  padding:.9rem 1.1rem;margin:1.4rem 0}
.install-auto{display:flex;gap:.8rem;align-items:center;flex-wrap:wrap;margin:1.2rem 0}

/* =======================================================================
   Visionneuse et diaporama : TOUJOURS sombres, même en thème clair.
   Une photo se regarde sur du noir, pas sur du blanc.
   ======================================================================= */
.lb{position:fixed;inset:0;z-index:100;background:#0B0A0A;display:flex;flex-direction:column}
.lb-stage{position:relative;flex:1;min-height:0}
/* position absolue : le seul moyen fiable pour qu'une image de 4000 px
   s'ajuste TOUJOURS à l'écran, quelle que soit sa taille réelle */
.lb-stage img,.lb-stage video{position:absolute;inset:0;width:100%;height:100%;
  object-fit:contain;display:block;padding:3.8rem .5rem 1rem}
.lb-bar{position:absolute;top:0;left:0;right:0;display:flex;align-items:center;gap:.6rem;
  flex-wrap:wrap;padding:.55rem .7rem;
  background:linear-gradient(to bottom,rgba(0,0,0,.75),transparent);z-index:2}
.lb-count{color:#D6D2CE;font-size:.88rem;margin:0 auto}
.lb-btn{width:44px;height:44px;display:grid;place-items:center;border:0;border-radius:50%;
  background:rgba(255,255,255,.14);color:#fff;cursor:pointer;flex:0 0 auto;padding:0;font-size:1.05rem}
.lb-btn:hover{background:rgba(255,255,255,.26);color:#fff}
.lb-dl{background:var(--accent);color:var(--sur-accent)}
.lb-dl:hover{background:var(--accent-fonce);color:var(--sur-accent)}
.lb-nav{position:absolute;top:50%;transform:translateY(-50%);width:52px;height:52px;border:0;
  border-radius:50%;background:rgba(255,255,255,.14);color:#fff;cursor:pointer;
  display:grid;place-items:center;padding:0;font-size:1.8rem;z-index:2}
.lb-nav:hover{background:rgba(255,255,255,.28);color:#fff}
.lb-prev{left:.6rem}
.lb-next{right:.6rem}

.lb-bas{background:#141312;border-top:1px solid rgba(255,255,255,.09);color:#EFECE8;
  padding:.7rem 1rem calc(.7rem + env(safe-area-inset-bottom));flex:0 0 auto;
  max-height:52vh;overflow-y:auto}
.lb-entete{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap}
.lb-annee{background:var(--accent);color:var(--sur-accent);border-radius:20px;padding:.12rem .75rem;
  font-weight:800;font-size:.95rem;flex:0 0 auto}
.lb-annee.vide{background:transparent;color:#8E8985;box-shadow:inset 0 0 0 1px #3A3734;font-weight:600}
.lb-qui{color:#EFECE8;font-size:.95rem;flex:1;min-width:0}
.lb-qui.vide{color:#8E8985;font-style:italic}
.lb-plier{background:rgba(255,255,255,.12);color:#fff;border:0;border-radius:20px;
  padding:.35rem .85rem;font-size:.9rem;cursor:pointer;flex:0 0 auto}
.lb-plier:hover{background:rgba(255,255,255,.24);color:#fff}
.lb-coms{margin-top:.8rem}
.lb-liste{list-style:none;padding:0;margin:0 0 .7rem;display:grid;gap:.5rem}
.lb-liste li{background:rgba(255,255,255,.07);border-radius:11px;padding:.55rem .8rem;font-size:.92rem}
.lb-liste li p{margin:.15rem 0 0}
.lb-liste .lb-date{color:#8E8985;font-size:.8rem;margin-left:.5rem}
.lb-liste .lb-rien{background:transparent;color:#8E8985;font-style:italic;padding:.2rem 0}
.lb-form{display:flex;gap:.5rem;margin:0}
.lb-form input{flex:1;min-width:0;background:rgba(255,255,255,.1);
  border-color:rgba(255,255,255,.16);color:#fff}
.lb-form input::placeholder{color:#8E8985}

.diapo{position:fixed;inset:0;background:#0B0A0A;display:flex;flex-direction:column}
.diapo-haut{flex:1;min-height:0;display:flex}
.diapo-scene{position:relative;flex:1;min-width:0;min-height:0}

/* le panneau de droite : l'année en grand, puis qui est sur la photo */
.diapo-fiche{flex:0 0 260px;background:#141312;border-left:1px solid rgba(255,255,255,.09);
  color:#EFECE8;padding:1.4rem 1.2rem;overflow-y:auto}
.df-annee{font-size:2.6rem;font-weight:800;letter-spacing:-.03em;line-height:1;
  color:var(--accent);margin-bottom:1.2rem}
.df-annee.vide{font-size:1rem;font-weight:600;color:#8E8985;font-style:italic}
.df-bloc{margin-bottom:1.2rem}
.df-bloc h3{margin:0 0 .4rem;font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;
  color:#8E8985;font-weight:700}
.df-bloc p{margin:0;font-size:.95rem}
.df-qui{list-style:none;padding:0;margin:0;display:grid;gap:.3rem}
.df-qui li{font-size:1.05rem;font-weight:600}
.df-pied{color:#8E8985;font-size:.82rem;margin:0}
.diapo-scene img,.diapo-scene video{position:absolute;inset:0;width:100%;height:100%;
  object-fit:contain;padding:1rem}
@media (max-width:900px){
  /* sur téléphone, la fiche passe sous la photo : l'image d'abord */
  .diapo-haut{flex-direction:column}
  .diapo-fiche{flex:0 0 auto;max-height:34vh;border-left:0;
    border-top:1px solid rgba(255,255,255,.09);padding:.9rem 1rem;
    display:flex;gap:1.2rem;align-items:flex-start;flex-wrap:wrap}
  .df-annee{font-size:1.6rem;margin:0}
  .df-bloc{margin:0}
  .df-qui li{font-size:.95rem}
  .df-pied{flex:1 0 100%}
}
.diapo-bas{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  padding:.85rem 1.3rem calc(.85rem + env(safe-area-inset-bottom));background:#141312;color:#EFECE8}
.diapo-txt #d-an{color:var(--accent);font-weight:800;font-size:1.2rem;margin-right:.5rem}
.diapo-cmd{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
.diapo-vitesse{display:flex;align-items:center;gap:.4rem;color:#8E8985;font-size:.82rem}
.diapo-vitesse select{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.16);
  color:#EFECE8;padding:.3rem .5rem;font-size:.85rem}
@media (max-width:760px){ .diapo-vitesse span{display:none} }
.diapo-cmd .muted{color:#8E8985}

/* =======================================================================
   Tablettes
   ======================================================================= */
@media (max-width: 1100px){ .viewer{grid-template-columns:1fr 320px} }
@media (max-width: 1000px){
  .ml-entete{display:none}
  .ml-ligne{grid-template-columns:1fr 1fr;gap:.7rem .9rem;padding:1rem}
  .ml-champ,.ml-c{position:relative;padding-top:1.15rem}
  .ml-champ::before,.ml-c::before{content:attr(data-l);position:absolute;top:0;left:0;
    color:var(--muted);font-size:.72rem;text-transform:uppercase;letter-spacing:.04em}
  .ml-champ:first-of-type{grid-column:1/-1}
  .ml-champ input{font-size:16px;border-color:var(--line)}
  .ml-c{text-align:left}
  .ml-ligne button{grid-column:1/-1;width:100%;min-height:44px;font-size:1rem}
  .ml-ligne button::after{content:" Enregistrer"}
}
@media (max-width: 900px){
  .viewer{grid-template-columns:1fr}
  .stage img{max-height:70vh;width:auto}
  .grid{grid-template-columns:repeat(auto-fill,minmax(165px,1fr))}
  .frise{grid-template-columns:repeat(auto-fill,minmax(170px,1fr))}
  .people{grid-template-columns:repeat(auto-fill,minmax(130px,1fr))}
  .filtres label.grand{flex:1 1 100%}
  .filtres .actions{margin-left:0}
  .wrap{padding:1.3rem 1rem 5rem}
}

/* =======================================================================
   Téléphones
   ======================================================================= */
@media (max-width: 760px){
  .top{padding:.6rem .9rem;gap:.5rem .9rem}
  .brand{order:1}
  .out{order:2;margin-left:auto}
  .top nav{order:3;flex:1 0 100%;gap:.15rem;overflow-x:auto;flex-wrap:nowrap;
    scrollbar-width:none;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity}
  .top nav::-webkit-scrollbar{display:none}
  .top nav a{scroll-snap-align:start}

  .wrap{padding:1rem .8rem 5rem}
  h1{font-size:1.3rem}

  /* 16 px minimum, sinon iOS zoome tout seul au clic */
  input,select,textarea{font-size:16px;padding:.65rem .75rem}
  button,.btn{padding:.72rem 1rem;min-height:46px}
  button.small,.btn.small{min-height:40px;padding:.45rem .78rem}

  .segments{display:flex;width:100%}
  .segments a{flex:1;justify-content:center;padding:.6rem .4rem;font-size:.86rem}

  .bar{flex-direction:column;align-items:stretch;gap:.7rem}
  .filtres{padding:.9rem}
  .filtres label{flex:1 1 46%}
  .filtres .actions{width:100%}
  .filtres .actions button,.filtres .actions .btn{flex:1}

  .annonce,.appel{flex-direction:column;align-items:stretch;text-align:left}
  .annonce button,.appel-btn{width:100%}

  .grid{grid-template-columns:1fr 1fr;gap:.7rem}
  .grid.ident{grid-template-columns:1fr 1fr;gap:.7rem}
  .tuile-info{padding:.5rem .55rem .6rem;font-size:.78rem}
  .ti-nom,.ti-mot,.ti-saisie{font-size:16px;padding:.4rem .5rem}
  .ti-ok{width:36px;height:36px;font-size:.95rem}   /* assez gros pour le doigt */
  .ti-noms{max-height:6rem}
  .ti-coms li{font-size:.74rem}
  .frise{grid-template-columns:1fr 1fr;gap:.7rem}
  .an-num{font-size:1.3rem}
  .people{grid-template-columns:repeat(auto-fill,minmax(105px,1fr));gap:.6rem}
  .person{padding:.6rem .4rem}
  .person .nm{white-space:normal;font-size:.85rem;line-height:1.25}

  .an-groupe{flex-direction:column}
  .an-face{width:100%;height:auto;aspect-ratio:1;max-width:160px}

  .side{padding:1rem}
  .faces{grid-template-columns:repeat(auto-fill,minmax(74px,1fr));gap:.5rem}
  .form-grid{grid-template-columns:1fr}
  .corb-l{flex-wrap:wrap}
  .corb-a{grid-auto-flow:column;gap:.5rem}
  .fil{flex-direction:column}
  .fil-img img{width:100%;height:auto;aspect-ratio:1;max-width:160px}

  .selbar{gap:.6rem;padding:.75rem .9rem calc(.75rem + env(safe-area-inset-bottom))}
  .selactions{flex:1}
  .selactions .btn{flex:1}

  .souvenir-tete h1{font-size:2.4rem}
  .lb-stage img,.lb-stage video{padding:4rem .25rem 1rem}
  .lb-nav{width:44px;height:44px}
  .lb-count{display:none}
  .dupgroup{padding:.8rem}
  .dupgroup .grid{grid-template-columns:repeat(auto-fill,minmax(135px,1fr))}
  .log li{flex-direction:column;gap:.1rem}
  .log li .n{white-space:normal;word-break:break-all}
  dl{font-size:.88rem}
  .bandeau-install{font-size:.82rem;padding:.5rem .7rem}

  dialog.modale{width:100vw;max-width:100vw;max-height:100dvh;height:100dvh;border-radius:0}
  .modale-pied{position:sticky;bottom:0;background:var(--panel);
    padding-bottom:calc(1.2rem + env(safe-area-inset-bottom))}
  .modale-pied .btn{flex:1}
}

@media (max-width: 380px){
  .grid,.grid.ident{grid-template-columns:1fr}
  .segments .n{display:none}
}

/* Le glisser-déposer n'existe pas sur un écran tactile : on ne le propose pas */
@media (hover: none), (max-width: 760px){
  .pointeur{display:none}
  .drop{padding:1.6rem .9rem}
  .drop .btn{width:100%}
  .drop p:first-child{display:none}
  .tuile:hover,.person:hover,.an-carte:hover{transform:none}
}

@media (prefers-reduced-motion: reduce){
  *{animation:none !important;transition:none !important}
}