/* ── Alchimie · direction VELOURS (validée 22/09/2026) ────────────────────────
   Grenat profond, chair et corail ; rondeurs différenciées par hiérarchie ;
   un seul geste animé (le ruban de soie, assets/velours.js).
   Polices auto-hébergées — attribution dans CREDITS.md. Aucune valeur en dur
   hors de ce fichier : les pages n'utilisent que ces jetons. */

@font-face{font-family:"Cormorant";src:url(/assets/fonts/cormorant.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Cormorant";src:url(/assets/fonts/cormorant-italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Luciole";src:url(/assets/fonts/Luciole-Regular.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Luciole";src:url(/assets/fonts/Luciole-Bold.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Bricolage";src:url(/assets/fonts/BricolageGrotesque-Regular.woff2) format("woff2");font-weight:400;font-display:swap}

:root{
  --fond:#1E0B12; --carte:#2C1019; --carte-2:#371521;
  --encre:#F6E7E2; --encre-2:#C79B9B; --encre-3:#8E6A6E;
  --trait:#4A1C28;
  --accent:#E8836B;      /* corail — l'action, la sélection */
  --accent-2:#C2185B;    /* fuchsia sombre — second temps du ruban, alertes douces */
  --danger:#F2777A;

  --display:"Cormorant",Georgia,serif;
  --texte:"Luciole",system-ui,sans-serif;
  --etiquette:"Bricolage",system-ui,sans-serif;

  --t-titre:clamp(2.2rem,1.5rem + 3vw,4rem);
  --t-sous:clamp(1.3rem,1.1rem + .8vw,1.7rem);
  --t-texte:1rem;
  --t-legende:.86rem;
  --t-etiq:.72rem;

  --pas:8px;
  --gouttiere:clamp(20px,5vw,64px);
  --colonne:70rem;
  --r-bloc:30px;   /* surfaces posées */
  --r-ligne:20px;  /* éléments de liste */
  --r-champ:14px;  /* saisie */
  --r-jeton:999px; /* actions, pastilles */
  --touch-min:48px;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  min-height:100dvh;background:var(--fond);color:var(--encre);
  font-family:var(--texte);font-size:var(--t-texte);line-height:1.62;
  overflow-x:hidden;position:relative;
  padding:0 0 calc(48px + env(safe-area-inset-bottom));
}
/* Le ruban vit derrière tout, sans jamais intercepter le pointeur. */
.ruban{position:fixed;inset:auto 0 0 0;height:70vh;z-index:0;pointer-events:none;opacity:.45}
.wrap,main{position:relative;z-index:1;width:100%;max-width:var(--colonne);margin:0 auto;padding:calc(var(--pas)*5) var(--gouttiere)}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

h1{font-family:var(--display);font-weight:400;font-size:var(--t-titre);line-height:1.02;letter-spacing:-.01em;text-wrap:balance}
h2{font-family:var(--display);font-weight:400;font-size:var(--t-sous);line-height:1.15}
h3{font-family:var(--display);font-weight:400;font-size:1.35rem;line-height:1.2}
p{text-wrap:pretty}
em{font-style:italic;color:var(--accent)}
.etiq,.sous,.subtitle{color:var(--encre-2);font-size:var(--t-legende)}
.etiq{font-family:var(--etiquette);font-size:var(--t-etiq);letter-spacing:.18em;display:block;margin-bottom:10px}

/* ── Entête et retour ─────────────────────────────────────────────────────── */
.topnav{display:flex;align-items:center;gap:12px;margin-bottom:24px}
.back-btn,.retour{display:inline-flex;align-items:center;min-height:var(--touch-min);padding:0 16px;
  border-radius:var(--r-jeton);border:1px solid var(--trait);color:var(--encre-2);
  font-size:var(--t-legende);text-decoration:none}
.back-btn:hover,.retour:hover{color:var(--encre);border-color:var(--accent)}
.hero{margin-bottom:32px;display:flex;flex-direction:column;gap:12px}
.hero p{color:var(--encre-2);max-width:52ch}

/* ── Surfaces ─────────────────────────────────────────────────────────────── */
.bloc,.card,.fiche,.firsts-section{background:var(--carte);border:1px solid var(--trait);border-radius:var(--r-bloc);padding:calc(var(--pas)*3)}
.bloc+.bloc,.card+.card{margin-top:calc(var(--pas)*2)}

/* ── Sommaire : des lignes, pas une grille de cartes ──────────────────────── */
.actions{display:grid;gap:12px;margin:calc(var(--pas)*4) 0}
.action{display:flex;align-items:center;gap:18px;padding:20px 26px;background:var(--carte);
  border:1px solid transparent;border-radius:var(--r-ligne);text-decoration:none;position:relative;overflow:hidden}
.action::before{content:"";position:absolute;inset:0;border-radius:inherit;opacity:0;transition:opacity .35s;
  background:radial-gradient(120% 140% at 0% 50%,rgba(232,131,107,.20),transparent 60%)}
.action:hover::before,.action:focus-visible::before{opacity:1}
.action .ico{flex:0 0 auto;width:42px;height:42px;display:grid;place-items:center;border-radius:var(--r-jeton);
  border:1px solid var(--trait);color:var(--accent);position:relative}
.action .ico svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.action h3{position:relative}
.action p{flex:1;color:var(--encre-2);font-size:var(--t-legende);position:relative;margin:0}
.action .arrow{color:var(--accent);position:relative}
.action .arrow svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ── Chiffres ─────────────────────────────────────────────────────────────── */
.stats{display:flex;gap:12px;flex-wrap:wrap;margin:calc(var(--pas)*3) 0}
.stat{flex:1 1 8rem;background:var(--carte);border:1px solid var(--trait);border-radius:var(--r-bloc);padding:18px 22px}
.stat b,.stat .n{display:block;font-family:var(--display);font-size:2.4rem;line-height:1;color:var(--accent);font-variant-numeric:tabular-nums}
.stat span,.stat .l{font-size:var(--t-legende);color:var(--encre-2)}

/* ── Formulaires ──────────────────────────────────────────────────────────── */
label,.field label,.champ .l{display:block;font-size:var(--t-legende);color:var(--encre-2);margin-bottom:6px}
/* Les champs de SAISIE seulement : ni radio ni case à cocher, qui ont leur propre forme. */
input:not([type=radio]):not([type=checkbox]):not([type=file]),select,textarea{
  width:100%;min-height:var(--touch-min);background:var(--carte);color:var(--encre);
  border:1px solid var(--trait);border-radius:var(--r-champ);font:inherit;padding:10px 16px}
input[type=radio],input[type=checkbox]{
  appearance:none;flex:0 0 auto;width:20px;height:20px;margin:0;background:transparent;
  border:1.5px solid var(--trait);border-radius:var(--r-jeton);display:grid;place-items:center;cursor:pointer}
input[type=checkbox]{border-radius:6px}
input[type=radio]:checked,input[type=checkbox]:checked{border-color:var(--accent)}
input[type=radio]:checked::after{content:"";width:10px;height:10px;border-radius:var(--r-jeton);background:var(--accent)}
input[type=checkbox]:checked::after{content:"";width:11px;height:6px;border:2px solid var(--accent);border-top:0;border-right:0;transform:rotate(-45deg) translateY(-1px)}
textarea{min-height:5.5rem;resize:vertical;line-height:1.5}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent)}
input::placeholder,textarea::placeholder{color:var(--encre-3)}

button,.btn,.btn-primary,.bouton{font:inherit;cursor:pointer}
.btn-primary,.bouton,button.primaire{display:inline-flex;align-items:center;justify-content:center;
  min-height:var(--touch-min);padding:0 28px;border:0;border-radius:var(--r-jeton);
  background:var(--accent);color:#2A0D12;font-weight:700}
.btn-secondary,.bouton.creux,button.creux{display:inline-flex;align-items:center;justify-content:center;
  min-height:var(--touch-min);padding:0 24px;border:1px solid var(--trait);border-radius:var(--r-jeton);
  background:transparent;color:var(--encre)}
.btn-secondary:hover,.bouton.creux:hover{border-color:var(--accent)}
button[disabled]{opacity:.5;cursor:default}
.lien{border:0;background:none;color:var(--encre-2);text-decoration:underline;text-underline-offset:4px;padding:6px 0}

/* ── Pastilles de choix (genres, filtres) ─────────────────────────────────── */
.pastilles{display:flex;gap:8px;flex-wrap:wrap}
.pastilles button{min-height:var(--touch-min);padding:0 18px;border-radius:var(--r-jeton);
  border:1px solid var(--trait);background:transparent;color:var(--encre-2);font-size:var(--t-legende)}
.pastilles button[aria-pressed="true"]{border-color:var(--accent);color:var(--encre);background:rgba(232,131,107,.12)}

/* ── Pied ─────────────────────────────────────────────────────────────────── */
.pied,.footer{position:relative;z-index:1;max-width:var(--colonne);margin:0 auto;
  padding:calc(var(--pas)*3) var(--gouttiere);display:flex;gap:24px;flex-wrap:wrap;
  font-size:var(--t-legende);color:var(--encre-3);border-top:1px solid var(--trait)}

/* Décor hérité de l'ancienne version : neutralisé partout (halo, aurora, grain bleuté). */
.aurora,.glow,.veil,.bg,.grain{display:none !important}

@media(max-width:640px){
  .action{padding:18px 20px;gap:14px}
  .action p{flex:0 0 100%;order:3}
}
@media(prefers-reduced-motion:no-preference){
  .action,.action .arrow{transition:transform .3s ease-out}
  .action:hover{transform:translateX(6px)}
  .action:hover .arrow{transform:translateX(4px)}
}

/* ── Pages héritées : composants propres à login et au tableau de bord ────────
   Elles gardent leur balisage (et leur JS) ; seule la peau change. */
.header{display:flex;align-items:center;gap:16px;margin-bottom:28px}
.avatar{width:56px;height:56px;border-radius:var(--r-jeton);overflow:hidden;background:var(--carte);
  border:1px solid var(--trait);display:grid;place-items:center;color:var(--accent);font-family:var(--display);font-size:1.4rem}
.avatar img{width:100%;height:100%;object-fit:cover}
.greet .hello{font-size:var(--t-legende);color:var(--encre-2)}
.greet h1,.greet .nom{font-family:var(--display);font-size:var(--t-sous);line-height:1.1}
.firsts{margin-top:calc(var(--pas)*3)}
.firsts-head{display:flex;align-items:center;gap:12px;width:100%;min-height:var(--touch-min);
  background:var(--carte);border:1px solid var(--trait);border-radius:var(--r-ligne);color:var(--encre);padding:0 20px;text-align:left}
.firsts-list{margin-top:10px;display:grid;gap:8px}
.first-item{display:flex;align-items:center;gap:12px;background:var(--carte);border:1px solid var(--trait);
  border-radius:var(--r-ligne);padding:14px 18px}
.badge-missing{margin-left:auto;font-size:var(--t-etiq);letter-spacing:.1em;font-family:var(--etiquette);color:var(--accent)}

/* Connexion : deux onglets, un champ, une clé d'accès. */
.auth-toggle{display:flex;gap:8px;margin:calc(var(--pas)*3) 0}
.auth-toggle button{flex:1;min-height:var(--touch-min);border-radius:var(--r-jeton);border:1px solid var(--trait);
  background:transparent;color:var(--encre-2)}
.auth-toggle button.active{border-color:var(--accent);color:var(--encre);background:rgba(232,131,107,.12)}
.field{margin-bottom:calc(var(--pas)*2)}
.password-row{position:relative;display:flex;align-items:center}
.password-row input{padding-right:56px}
.pw-toggle{position:absolute;right:8px;min-height:40px;width:40px;border:0;background:none;color:var(--encre-2);border-radius:var(--r-jeton)}
.passkey-cta{display:flex;align-items:center;gap:14px;width:100%;min-height:var(--touch-min);padding:14px 20px;
  background:var(--carte);border:1px solid var(--trait);border-radius:var(--r-ligne);color:var(--encre);text-align:left}
.passkey-cta:hover{border-color:var(--accent)}
.passkey-cta .icon{font-size:1.2rem;color:var(--accent)}
.passkey-cta .text{display:flex;flex-direction:column}
.passkey-cta .text small{color:var(--encre-2);font-size:var(--t-legende)}
.error{color:var(--danger);font-size:var(--t-legende);margin-top:10px}
.badge{display:inline-flex;align-items:center;min-height:28px;padding:0 12px;border-radius:var(--r-jeton);
  border:1px solid var(--trait);font-size:var(--t-etiq);letter-spacing:.08em;color:var(--encre-2)}

/* Connexion : une seule carte, centrée verticalement, jamais plus large qu'une colonne de lecture. */
.connexion{min-height:100dvh;display:flex;align-items:center;justify-content:center}
.connexion .card{width:min(100%,26rem);padding:calc(var(--pas)*4)}
.connexion h1{font-size:var(--t-sous);margin:6px 0 4px}
.connexion .footer{border:0;padding:calc(var(--pas)*2) 0 0;margin-top:calc(var(--pas)*2);justify-content:flex-start}
.connexion .footer a{color:var(--accent);text-decoration:underline;text-underline-offset:4px}
.pw-toggle svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.pw-toggle:hover{color:var(--encre)}


/* ── Tableau de bord : la fiche, ses choix, ses listes ───────────────────────
   (l'ancienne feuille de la page a été retirée : tout vit ici désormais) */
.logout{min-height:40px;padding:0 16px;margin-left:auto;border:1px solid var(--trait);border-radius:var(--r-jeton);
  background:transparent;color:var(--encre-2);font-size:var(--t-legende)}
.logout:hover{color:var(--encre);border-color:var(--accent)}
.greet .name{font-family:var(--display);font-size:1.5rem;line-height:1.1}

.fiche,.notif,.stats-section{background:var(--carte);border:1px solid var(--trait);border-radius:var(--r-bloc);
  padding:calc(var(--pas)*3);margin-top:calc(var(--pas)*3)}
.fiche h2,.fiche h3{display:flex;align-items:center;gap:10px}
.fiche-pid{font-family:var(--etiquette);font-size:var(--t-etiq);letter-spacing:.1em;color:var(--encre-3)}
.notif-field{margin-top:calc(var(--pas)*2.5)}
.notif-field > label{margin-bottom:10px}
/* Les choix : des pastilles alignées, pas une colonne de gros ronds. */
.fiche-radios{display:flex;gap:8px;flex-wrap:wrap}
.fiche-radios label,.notif-field .fiche-radios label{display:inline-flex;align-items:center;gap:9px;min-height:var(--touch-min);
  margin:0;padding:0 16px;border:1px solid var(--trait);border-radius:var(--r-jeton);
  color:var(--encre-2);font-size:var(--t-legende);cursor:pointer}
.fiche-radios label:hover{border-color:var(--accent);color:var(--encre)}
.fiche-radios label:has(input:checked){border-color:var(--accent);color:var(--encre);background:rgba(232,131,107,.12)}
.fiche-radios span{line-height:1}
.fiche-readonly{color:var(--encre-2);padding:10px 0}
.fiche-msg,.notif-msg{margin-top:12px;font-size:var(--t-legende);color:var(--encre-2)}

.firsts-head .chev svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.firsts-head[aria-expanded="true"] .chev{transform:rotate(180deg)}
.assign-btn,.reassign-btn{min-height:40px;padding:0 16px;border:1px solid var(--trait);border-radius:var(--r-jeton);
  background:transparent;color:var(--encre);font-size:var(--t-legende)}
.assign-btn:hover,.reassign-btn:hover{border-color:var(--accent)}
@media(prefers-reduced-motion:no-preference){.firsts-head .chev{transition:transform .2s}}

/* Cartes à en-tête (fiche, notifications) : l'icône, le titre, la référence. */
.notif-card{background:var(--carte);border:1px solid var(--trait);border-radius:var(--r-bloc);
  padding:calc(var(--pas)*3);margin-top:calc(var(--pas)*3)}
.notif-head{display:flex;align-items:center;gap:12px;margin-bottom:calc(var(--pas)*1)}
.notif-head .ico{width:36px;height:36px;display:grid;place-items:center;border-radius:var(--r-jeton);
  border:1px solid var(--trait);font-size:1rem;filter:grayscale(1) opacity(.8)}
.notif-head h2{font-size:1.35rem}
.notif-form{margin-top:calc(var(--pas)*1)}
.notif-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:calc(var(--pas)*3)}
.notif-form button[type=submit]{display:inline-flex;align-items:center;justify-content:center;min-height:var(--touch-min);
  padding:0 26px;border:0;border-radius:var(--r-jeton);background:var(--accent);color:#2A0D12;font-weight:700}

/* Les deux chiffres du haut : posés côte à côte, valeur en Cormorant. */
.stats{display:flex;gap:12px;flex-wrap:wrap;margin-top:calc(var(--pas)*3)}
.stat .v{font-family:var(--display);font-size:2.4rem;line-height:1;color:var(--accent);font-variant-numeric:tabular-nums}
.stat .l{font-size:var(--t-legende);color:var(--encre-2)}
.fiche-note{margin-top:10px;font-size:var(--t-legende);color:var(--encre-3)}
/* Les deux chiffres : centrés dans leur bloc (Mathieu 22/09). */
.stat{text-align:center}
.stat .v,.stat b{margin-bottom:4px}

/* ── Relations : des mini-cartes ─────────────────────────────────────────────
   La photo porte la carte, le prénom dessous. Tout le reste est sur la fiche. */
.rel-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(8.5rem,1fr));gap:14px;margin-top:calc(var(--pas)*3)}
.rel-item{display:flex;flex-direction:column;align-items:center;gap:12px;padding:16px 12px;
  background:var(--carte);border:1px solid var(--trait);border-radius:var(--r-bloc);
  text-decoration:none;color:inherit;text-align:center}
.rel-item:hover,.rel-item:focus-visible{border-color:var(--accent)}
.rel-item.is-first .rel-photo{box-shadow:0 0 0 2px var(--accent)}
.rel-photo{width:96px;height:96px;border-radius:var(--r-jeton);overflow:hidden;background:var(--carte-2);
  display:grid;place-items:center;color:var(--accent);font-family:var(--display);font-size:2rem;border:1px solid var(--trait)}
.rel-photo img{width:100%;height:100%;object-fit:cover;
  object-position:var(--photo-ox,50%) var(--photo-oy,50%);transform:scale(var(--photo-zoom,1))}
.rel-name{font-family:var(--display);font-size:1.25rem;line-height:1.15;
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.empty{grid-column:1/-1;color:var(--encre-2);padding:calc(var(--pas)*4) 0;max-width:46ch}
/* Ajouter : un bouton posé en bas à droite, au pouce. */
.fab{position:fixed;right:var(--gouttiere);bottom:calc(20px + env(safe-area-inset-bottom));z-index:5;
  min-height:56px;padding:0 26px;border:0;border-radius:var(--r-jeton);background:var(--accent);color:#2A0D12;
  font-weight:700;font-family:var(--texte)}
@media(max-width:480px){.rel-list{grid-template-columns:repeat(auto-fill,minmax(7rem,1fr));gap:10px}.rel-photo{width:76px;height:76px}}
.badge{display:inline-flex;align-items:center;min-height:28px;padding:0 12px;border-radius:var(--r-jeton);
  border:1px solid var(--trait);font-family:var(--etiquette);font-size:var(--t-etiq);letter-spacing:.12em;color:var(--encre-2)}

/* ── Fiche d'une relation ───────────────────────────────────────────────────── */
.topnav-photo{width:40px;height:40px;border-radius:var(--r-jeton);overflow:hidden;border:1px solid var(--trait)}
.topnav-photo img{width:100%;height:100%;object-fit:cover}
.topnav-name{font-family:var(--display);font-size:1.2rem}
.topnav-id{font-family:var(--etiquette);font-size:var(--t-etiq);letter-spacing:.1em;color:var(--encre-3)}
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin:calc(var(--pas)*3) 0}
.tab-btn{min-height:var(--touch-min);padding:0 18px;border-radius:var(--r-jeton);border:1px solid var(--trait);
  background:transparent;color:var(--encre-2);font-size:var(--t-legende)}
.tab-btn.on,.tab-btn[aria-selected="true"]{border-color:var(--accent);color:var(--encre);background:rgba(232,131,107,.12)}
.tab-count{margin-left:8px;color:var(--encre-3);font-size:var(--t-etiq)}
.tab-pane[hidden]{display:none}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 14px;border-radius:var(--r-jeton);
  border:1px solid var(--trait);color:var(--encre-2);font-size:var(--t-legende);cursor:pointer}
.chip.on,.chip[aria-pressed="true"]{border-color:var(--accent);color:var(--encre);background:rgba(232,131,107,.12)}
.gender-pick{display:flex;gap:8px;flex-wrap:wrap}
.gp-opt{display:inline-flex;align-items:center;gap:8px;min-height:var(--touch-min);padding:0 16px;
  border-radius:var(--r-jeton);border:1px solid var(--trait);color:var(--encre-2);cursor:pointer}
.gp-opt.on{border-color:var(--accent);color:var(--encre);background:rgba(232,131,107,.12)}
.rating{display:flex;align-items:center;gap:12px}
.rating-value{font-family:var(--display);font-size:1.6rem;color:var(--accent)}
.photo-wrap{border-radius:var(--r-bloc);overflow:hidden;border:1px solid var(--trait);background:var(--carte-2)}
.placeholder{display:grid;place-items:center;min-height:180px;color:var(--encre-3)}
.btn-danger{min-height:var(--touch-min);padding:0 22px;border-radius:var(--r-jeton);border:1px solid var(--danger);
  background:transparent;color:var(--danger)}
.hint,.lead,.pract-hint,.pos-help{color:var(--encre-2);font-size:var(--t-legende)}
.checkbox-line,.check,.toggle-2{display:flex;align-items:center;gap:10px;min-height:var(--touch-min)}
.real-id,.notes-list,.group,.pract-section{background:var(--carte);border:1px solid var(--trait);
  border-radius:var(--r-bloc);padding:calc(var(--pas)*2.5);margin-top:calc(var(--pas)*2)}

/* ── Chevauchements (etape-2) : bandeau, modale et frise ─────────────────────
   La modale est FERMÉE par défaut — sans cette règle, tout son contenu se déroulait
   dans la page (constaté 22/09). Elle ne s'ouvre qu'avec la classe « show ». */
.overlap-banner{display:flex;align-items:center;gap:10px;margin:calc(var(--pas)*2) 0;padding:12px 18px;
  background:var(--carte);border:1px solid var(--trait);border-radius:var(--r-ligne);cursor:pointer;font-size:var(--t-legende)}
.overlap-banner:hover{border-color:var(--accent)}
.overlap-banner .ico{filter:grayscale(1) opacity(.9)}
.overlap-banner .cta{margin-left:auto;color:var(--accent)}

.ovl-overlay{position:fixed;inset:0;z-index:20;display:none;align-items:center;justify-content:center;
  padding:var(--gouttiere);background:rgba(12,4,8,.72)}
.ovl-overlay.show{display:flex}
.ovl-modal{width:min(56rem,100%);max-height:88dvh;display:flex;flex-direction:column;
  background:var(--carte);border:1px solid var(--trait);border-radius:var(--r-bloc);overflow:hidden}
.ovl-head{display:flex;align-items:flex-start;gap:16px;padding:calc(var(--pas)*3);border-bottom:1px solid var(--trait)}
.ovl-head h2{font-size:1.5rem}
.ovl-head p{color:var(--encre-2);font-size:var(--t-legende);margin-top:4px}
.ovl-close{margin-left:auto;width:40px;height:40px;border-radius:var(--r-jeton);border:1px solid var(--trait);
  background:transparent;color:var(--encre-2);font-size:1rem;line-height:1}
.ovl-close:hover{color:var(--encre);border-color:var(--accent)}
.ovl-body{padding:calc(var(--pas)*3);overflow:auto}
.ovl-toolbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:calc(var(--pas)*2)}
.ovl-toolbar .label{font-family:var(--etiquette);font-size:var(--t-etiq);letter-spacing:.12em;color:var(--encre-2)}
.ovl-toolbar button{min-height:36px;padding:0 14px;border-radius:var(--r-jeton);border:1px solid var(--trait);
  background:transparent;color:var(--encre-2);font-size:var(--t-legende)}
.ovl-toolbar button.active{border-color:var(--accent);color:var(--encre);background:rgba(232,131,107,.12)}
.ovl-toolbar .save-status{margin-left:auto;color:var(--encre-3);font-size:var(--t-legende)}
.ovl-timeline{overflow-x:auto;border:1px solid var(--trait);border-radius:var(--r-ligne);background:var(--carte-2)}
.ovl-track-wrap{position:relative;min-width:100%}
.ovl-axis{position:absolute;inset:0;pointer-events:none}
.ovl-axis span{position:absolute;top:0;bottom:0;border-left:1px dashed var(--trait);font-size:var(--t-etiq);color:var(--encre-3);padding-left:4px}
.ovl-bar{position:absolute;height:34px;border-radius:var(--r-jeton);background:rgba(232,131,107,.22);
  border:1px solid var(--accent);display:flex;align-items:center;padding:0 10px;cursor:grab;user-select:none}
.ovl-bar .bar-label{font-size:var(--t-legende);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--encre)}
.ovl-bar .handle{position:absolute;top:0;bottom:0;width:12px;cursor:ew-resize}
.ovl-bar .handle.left{left:0;border-radius:var(--r-jeton) 0 0 var(--r-jeton)}
.ovl-bar .handle.right{right:0;border-radius:0 var(--r-jeton) var(--r-jeton) 0}
.ovl-pairs{margin-top:calc(var(--pas)*3)}
.ovl-pairs h3{font-size:1.2rem;margin-bottom:calc(var(--pas)*1.5)}
.ovl-pair{display:flex;align-items:baseline;gap:12px;padding:12px 0;border-bottom:1px solid var(--trait)}
.ovl-pair .names{font-family:var(--display);font-size:1.1rem}
.ovl-pair .dur{margin-left:auto;color:var(--encre-2);font-size:var(--t-legende)}
.ovl-pair .yr{color:var(--encre-3)}
.ovl-pairs-empty{color:var(--encre-2);font-size:var(--t-legende);padding:calc(var(--pas)*2) 0}
/* Barre qui chevauche une autre : la braise s'intensifie. Première fois : un liseré doré. */
.ovl-bar.has-overlap{background:rgba(194,24,91,.28);border-color:var(--accent-2)}
.ovl-bar.is-first{box-shadow:inset 0 0 0 1px var(--accent)}
.ovl-axis .tick{position:absolute;top:0;bottom:0;border-left:1px dashed var(--trait);
  font-family:var(--etiquette);font-size:var(--t-etiq);color:var(--encre-3);padding-left:4px}
.ovl-axis .tick.year{border-left-color:var(--encre-3);color:var(--encre-2)}
/* Le bouton d'ajout : icône calibrée (sans taille, un SVG s'étale à 300×150 — constaté 22/09). */
.fab{display:inline-flex;align-items:center;gap:10px;text-decoration:none;font-size:var(--t-texte)}
.fab svg{width:20px;height:20px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
/* Retour : même règle que le bouton d'ajout — un SVG sans taille s'étale (22/09). */
.back-btn svg,.retour svg{width:18px;height:18px;flex:0 0 auto;fill:none;stroke:currentColor;
  stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.back-btn:has(svg:only-child),.retour:has(svg:only-child){width:var(--touch-min);padding:0;justify-content:center}

/* Filet de sécurité : tout SVG d'icône posé dans un bouton, un lien ou une puce reçoit une
   taille. Sans cela, un <svg> sans width/height occupe 300×150 px et casse la mise en page. */
button svg, a svg, .ico svg, label svg, summary svg, .chip svg, .tab-btn svg, .chev svg,
.notif-head svg, .rel-arrow svg, .action .arrow svg, .pw-toggle svg {
  width: 20px; height: 20px; flex: 0 0 auto;
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.action .ico svg { width: 20px; height: 20px; }
.rel-photo svg, .avatar svg, .topnav-photo svg { width: 24px; height: 24px; }
/* Cinq vignettes par ligne (Mathieu 22/09), moins sur écran étroit. */
.rel-list{grid-template-columns:repeat(5,minmax(0,1fr))}
@media(max-width:900px){.rel-list{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:700px){.rel-list{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:480px){.rel-list{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ── Fiche relation : la photo et ses outils ────────────────────────────────
   Outils, barre de recadrage et voile d'envoi restent CACHÉS tant que le script ne
   pose pas « show » — sans cette règle ils se déroulaient dans la page (22/09). */
.photo-wrap{--photo-d:clamp(96px,28vw,132px);position:relative;border-radius:var(--r-bloc);overflow:visible;border:0;background:transparent}
.photo-zone{position:relative;display:grid;place-items:center;flex:0 0 auto;
  width:var(--photo-d);height:var(--photo-d);min-height:0;aspect-ratio:1;margin:0 auto;
  border-radius:var(--r-jeton);overflow:hidden;background:var(--carte-2);border:1px solid var(--trait);cursor:pointer}
.photo-zone img{width:100%;height:100%;object-fit:cover;
  object-position:var(--photo-ox,50%) var(--photo-oy,50%);transform:scale(var(--photo-zoom,1)) rotate(var(--photo-rot,0deg))}
.photo-zone input[type=file]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;z-index:2}
/* Mode recadrage : le champ fichier libère la surface, sinon le glissé ouvre le sélecteur. */
.photo-zone.editing{cursor:grab;border-color:var(--accent);border-style:dashed}
.photo-zone.editing.grabbing{cursor:grabbing}
.photo-zone.editing img{transition:none}
.photo-zone.editing input[type=file]{display:none}
.photo-zone.editing .photo-overlay{display:none}
.photo-zone.dragover{border-color:var(--accent)}
.photo-zone .hint{display:grid;place-items:center;gap:4px;color:var(--encre-3);font-size:var(--t-legende);text-align:center}
.photo-zone .hint .icon{font-size:1.4rem;filter:grayscale(1) opacity(.8)}
.photo-overlay{position:absolute;inset:0;display:grid;place-items:center;opacity:0;
  background:rgba(30,11,18,.66);color:var(--encre);font-size:var(--t-legende)}
.photo-zone:hover .photo-overlay,.photo-zone:focus-within .photo-overlay{opacity:1}
.photo-progress{position:absolute;inset:0;display:none;place-items:center;gap:8px;
  background:rgba(30,11,18,.8);color:var(--encre);font-size:var(--t-legende)}
.photo-progress.show{display:grid}
.spinner{width:22px;height:22px;border:2px solid var(--trait);border-top-color:var(--accent);border-radius:var(--r-jeton)}
@media(prefers-reduced-motion:no-preference){.spinner{animation:tourne 1s linear infinite}@keyframes tourne{to{transform:rotate(360deg)}}}

.photo-tools{display:none;justify-content:center;gap:8px;margin-top:12px}
.photo-tools.show{display:flex}
.rot-btn{width:42px;height:42px;display:grid;place-items:center;border-radius:var(--r-jeton);
  border:1px solid var(--trait);background:transparent;color:var(--encre-2)}
.rot-btn:hover{color:var(--encre);border-color:var(--accent)}

.pos-toolbar{display:none;margin-top:14px;padding:16px;background:var(--carte);border:1px solid var(--trait);border-radius:var(--r-bloc)}
.pos-toolbar.show{display:block}
.pos-help{color:var(--encre-2);font-size:var(--t-legende);text-align:center}
.pos-zoom-row{display:flex;align-items:center;gap:12px;margin:12px 0;color:var(--encre-2)}
.pos-zoom-row input[type=range]{flex:1;appearance:none;height:3px;padding:0;min-height:0;border:0;
  border-radius:var(--r-jeton);background:var(--trait)}
.pos-zoom-row input[type=range]::-webkit-slider-thumb{appearance:none;width:20px;height:20px;border-radius:var(--r-jeton);
  background:var(--accent);border:0;cursor:pointer}
.pos-zoom-row input[type=range]::-moz-range-thumb{width:20px;height:20px;border-radius:var(--r-jeton);background:var(--accent);border:0}
.pos-actions{display:flex;gap:10px;justify-content:flex-end}
.pos-btn{min-height:42px;padding:0 20px;border-radius:var(--r-jeton);border:1px solid var(--trait);background:transparent;color:var(--encre)}
.pos-save{background:var(--accent);border-color:var(--accent);color:#2A0D12;font-weight:700}
.photo-info{margin-top:12px;text-align:center;color:var(--encre-3);font-size:var(--t-legende)}

/* En-tête de la fiche : le retour, la photo, le prénom sur une ligne. */
.topnav{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.topnav-name{margin-right:auto}
.card-head-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.row-2{display:grid;grid-template-columns:repeat(auto-fit,minmax(10rem,1fr));gap:14px}
.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:calc(var(--pas)*3)}

/* ── Fiche relation, repasse (22/09) ────────────────────────────────────────
   La fiche est longue : on la lit par blocs nommés, avec des respirations franches
   et des commandes au pouce. Rien de décoratif en plus. */
.card{max-width:46rem;margin:0 auto}
.topnav{max-width:46rem;margin:0 auto calc(var(--pas)*2);padding:calc(var(--pas)*3) var(--gouttiere) 0}
.topnav-id{display:flex;align-items:center;gap:12px;min-width:0}
.card-head-row{margin-bottom:6px}
.public-id{font-family:var(--etiquette);font-size:var(--t-etiq);letter-spacing:.1em;color:var(--encre-3)}
.card h1{margin-bottom:8px}
.card .subtitle{margin-bottom:calc(var(--pas)*3)}

/* Un bloc = un sujet. Titre en Cormorant, filet au-dessus, air autour. */
.group{margin-top:calc(var(--pas)*4);padding-top:calc(var(--pas)*3);border-top:1px solid var(--trait);
  background:transparent;border-left:0;border-right:0;border-bottom:0;border-radius:0;padding-left:0;padding-right:0}
.group > h2{font-size:1.5rem;margin-bottom:calc(var(--pas)*2)}
.field{margin-bottom:calc(var(--pas)*2.5)}
.field > label{font-size:var(--t-legende);color:var(--encre-2);margin-bottom:8px}

/* Choix de sexe : trois pastilles larges, l'emoji en retrait. */
.gender-pick{display:flex;gap:10px;flex-wrap:wrap}
/* Le texte restait collé en haut : « .field label{display:block} » l'emportait sur « .gp-opt »
   (spécificité), la pastille n'était donc pas un conteneur flex. D'où le sélecteur sur le
   parent, qui reprend la main (22/09). */
.gender-pick .gp-opt{display:inline-flex;align-items:center;justify-content:center;
  flex:1 1 8rem;gap:0;margin:0;padding:0 12px;min-height:var(--touch-min);line-height:1;
  border:1px solid var(--trait);border-radius:var(--r-jeton);color:var(--encre-2);cursor:pointer}
.gender-pick .gp-opt:hover{border-color:var(--accent);color:var(--encre)}
.gender-pick .gp-opt:has(input:checked){border-color:var(--accent);color:var(--encre);background:rgba(232,131,107,.12)}
.gender-pick .gp-opt input{position:absolute;opacity:0;width:0;height:0;margin:0}
.gender-pick .gp-opt > span{display:inline-flex;align-items:center;justify-content:center;width:100%;line-height:1}
/* Pas d'emoji : désaturé il fait une tache grise, en couleur il jure avec la palette.
   Le mot suffit — et la pastille prise porte déjà la couleur (22/09). */
.gp-emoji{display:none}
.gp-opt:has(input:checked){border-color:var(--accent);color:var(--encre);background:rgba(232,131,107,.12)}

/* Appréciations : le curseur et sa valeur sur la même ligne. */
.rating{margin-bottom:calc(var(--pas)*2.5)}
.rating-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:8px}
.rating-head label{margin:0}
.rating-value{font-family:var(--display);font-size:1.5rem;color:var(--accent);min-width:2ch;text-align:right}
.rating input[type=range]{width:100%;appearance:none;height:3px;min-height:0;padding:0;border:0;
  border-radius:var(--r-jeton);background:var(--trait)}
.rating input[type=range]::-webkit-slider-thumb{appearance:none;width:22px;height:22px;border-radius:var(--r-jeton);background:var(--accent);border:0;cursor:pointer}
.rating input[type=range]::-moz-range-thumb{width:22px;height:22px;border-radius:var(--r-jeton);background:var(--accent);border:0}

/* Oui / Non : deux moitiés d'une même pastille. */
.toggle-2{display:inline-flex;gap:0;border:1px solid var(--trait);border-radius:var(--r-jeton);overflow:hidden;min-height:var(--touch-min)}
.toggle-2 button{min-height:var(--touch-min);padding:0 22px;border:0;background:transparent;color:var(--encre-2);font-size:var(--t-legende)}
.toggle-2 button.on{background:var(--accent);color:#2A0D12;font-weight:700}

/* Notes libres : une liste sobre, un bouton discret pour en ajouter. */
.notes-list{display:grid;gap:8px;background:transparent;border:0;padding:0;margin:0}
.notes-list .note-row{display:flex;align-items:center;gap:10px;background:var(--carte-2);
  border:1px solid var(--trait);border-radius:var(--r-ligne);padding:10px 14px}
.notes-add{margin-top:10px;min-height:42px;padding:0 18px;border-radius:var(--r-jeton);
  border:1px dashed var(--trait);background:transparent;color:var(--encre-2);font-size:var(--t-legende)}
.notes-add:hover{border-color:var(--accent);color:var(--encre);border-style:solid}

/* Identité réelle : un bloc à part, refermé par un cadenas. */
.real-id{margin-top:calc(var(--pas)*4)}
.real-id-head{display:flex;align-items:center;gap:10px}
.ri-lock{color:var(--accent)}
.ri-text{color:var(--encre-2);font-size:var(--t-legende)}
.ri-clear{margin-top:calc(var(--pas)*2);min-height:42px;padding:0 20px;border-radius:var(--r-jeton);
  border:1px solid var(--danger);background:transparent;color:var(--danger);font-size:var(--t-legende)}
.ri-clear:hover{background:rgba(194,24,91,.10)}
.real-id-body{margin-top:calc(var(--pas)*2)}
.forgot-fallback{margin-top:calc(var(--pas)*2);padding:16px;border-radius:var(--r-ligne);
  background:var(--carte-2);border:1px solid var(--trait)}
.dur-input{display:grid;grid-template-columns:minmax(0,5rem) minmax(0,1fr);gap:8px}
.first-toggle,.ft-check{display:flex;align-items:center;gap:10px;min-height:var(--touch-min)}
.ft-star{color:var(--accent)}
.ft-text small,.first-transfer-note{display:block;color:var(--encre-3);font-size:var(--t-legende)}

/* Les actions restent accessibles en bas, sur une ligne. */
.actions{border-top:1px solid var(--trait);padding-top:calc(var(--pas)*3);margin-top:calc(var(--pas)*4);
  justify-content:space-between}
.actions .btn-primary{order:2}
.actions .btn-danger{order:1}
@media(max-width:560px){.actions{flex-direction:column-reverse}.actions button{width:100%}}
/* Pratiques : des sections nommées, des chips cochables (la coche n'apparaît qu'une fois prise). */
.pract-section{margin-top:calc(var(--pas)*3);padding:0;background:transparent;border:0}
.pract-section h3{font-size:1.25rem;margin-bottom:10px}
.chip .check{display:inline-grid;place-items:center;width:16px;height:16px;opacity:0;color:var(--accent)}
.chip .check svg{width:14px;height:14px}
.chip.on .check{opacity:1}
.note-row input{flex:1;background:transparent;border:0;border-bottom:1px solid var(--trait);border-radius:0;padding:8px 0}
.note-row input:focus{border-bottom-color:var(--accent)}
.note-del{width:36px;height:36px;flex:0 0 auto;border-radius:var(--r-jeton);border:1px solid var(--trait);
  background:transparent;color:var(--encre-2);line-height:1}
.note-del:hover{color:var(--danger);border-color:var(--danger)}
/* Ajouter une pratique : un bouton en pointillé dans la catégorie, puis un champ sur place. */
.chip-add{border-style:dashed;color:var(--encre-3);background:transparent}
.chip-add:hover{border-style:solid;border-color:var(--accent);color:var(--encre)}
.chip-saisie{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 6px 0 14px;
  border:1px solid var(--accent);border-radius:var(--r-jeton)}
.chip-saisie input{min-height:32px;padding:0;border:0;background:transparent;border-radius:0;width:11rem;font-size:var(--t-legende)}
.chip-saisie input:focus{outline:none}
.chip-saisie input[aria-invalid="true"]{color:var(--danger)}
.chip-ok{min-height:32px;padding:0 12px;border-radius:var(--r-jeton);border:0;background:var(--accent);color:#2A0D12;font-size:var(--t-etiq);font-weight:700}
.chip .star{margin-left:6px;color:var(--accent);opacity:0}
.chip.first .star{opacity:1}

/* ── Fiche relation : en-tête intégré et plus compact (Mathieu 22/09) ────────
   La navigation vit DANS la carte : retour, photo, prénom, état — une seule ligne. */
.card > .topnav{margin:0 0 calc(var(--pas)*2);padding:0 0 calc(var(--pas)*2);
  border-bottom:1px solid var(--trait);max-width:none}
.card > .topnav .badge{margin-left:auto}
.card > .topnav .public-id{margin-left:8px}
.card h1{font-size:clamp(1.6rem,1.2rem + 1.6vw,2.4rem);margin-bottom:4px}
.card .subtitle{margin-bottom:calc(var(--pas)*2)}
.card{padding:calc(var(--pas)*3) calc(var(--pas)*3.5)}
.tabs{margin:calc(var(--pas)*2) 0}
.field{margin-bottom:calc(var(--pas)*2)}
.group{margin-top:calc(var(--pas)*3);padding-top:calc(var(--pas)*2.5)}
.group > h2{font-size:1.35rem;margin-bottom:calc(var(--pas)*1.5)}
.rating{margin-bottom:calc(var(--pas)*2)}
.actions{margin-top:calc(var(--pas)*3);padding-top:calc(var(--pas)*2.5)}
/* Les trois photos ont la même mesure et se touchent presque (Mathieu 22/09). */
.photos-plus{--photo-d:clamp(96px,28vw,132px);display:flex;align-items:center;justify-content:center;gap:8px}
.photos-plus .photo-slot{visibility:hidden}        /* place tenue avant la création de la fiche */
.photos-plus.actif .photo-slot{visibility:visible}
.photo-slot{position:relative;flex:0 0 auto;width:var(--photo-d);height:var(--photo-d);min-height:0;aspect-ratio:1;border-radius:var(--r-jeton);overflow:hidden;
  border:1px dashed var(--trait);background:var(--carte-2);display:grid;place-items:center;cursor:pointer;margin:0}
.photo-slot:hover{border-color:var(--accent)}
.photo-slot img{width:100%;height:100%;object-fit:cover}
.photo-slot .plus{color:var(--encre-3);font-size:1.6rem;line-height:1}
.photo-del{position:absolute;top:2px;right:2px;width:24px;height:24px;border-radius:var(--r-jeton);
  border:0;background:rgba(30,11,18,.78);color:var(--encre);font-size:.9rem;line-height:1;padding:0}
.photo-del:hover{color:var(--danger)}

/* Cases à cocher sous un champ : « .field label{display:block} » (spécificité 0,1,1)
   l'emportait sur « .checkbox-line », d'où la case écrasée et le libellé désaligné. */
.field .checkbox-line{display:flex;align-items:center;gap:10px;margin:8px 0 0;
  font-size:var(--t-legende);color:var(--encre-2);cursor:pointer}
.field .checkbox-line input[type=checkbox]{flex:0 0 auto;margin:0}

/* ── Import de photo : trois entrées côte à côte dans la modale ──────────────── */
.img-modal{width:min(44rem,100%)}
.img-ways{display:grid;grid-template-columns:repeat(auto-fit,minmax(12rem,1fr));gap:14px}
.img-way{display:grid;gap:10px;align-content:start;padding:16px;
  background:var(--carte-2);border:1px solid var(--trait);border-radius:var(--r-ligne)}
.img-way strong{font-family:var(--etiquette);font-size:var(--t-etiq);letter-spacing:.12em;color:var(--encre-2)}
.img-way input[type=url]{width:100%}
.img-paste{place-content:center;text-align:center;border-style:dashed;min-height:120px;cursor:copy}
.img-paste:focus-visible,.img-paste.over{border-color:var(--accent);outline:none}
.img-paste-hint{color:var(--encre-3);font-size:var(--t-legende)}
.img-state{margin-top:14px;color:var(--encre-2);font-size:var(--t-legende)}
.img-state.erreur{color:var(--accent-2)}

/* ── Photo en grand : la zone conserve ses outils, elle change seulement d'échelle. */
.view-modal{width:min(38rem,100%)}
.view-modal .ovl-body{display:grid;justify-items:center}
.view-stage{display:grid;justify-items:center;justify-self:center;gap:14px;width:100%}
.view-stage img{max-width:100%;max-height:60dvh;border-radius:var(--r-ligne)}
.photo-zone.grande{width:min(60vmin,340px);height:min(60vmin,340px)}
.view-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:calc(var(--pas)*3)}
/* Les flèches encadrent la photo sans la décaler : elles n'occupent une colonne
   que lorsqu'elles sont visibles, et la scène reste centrée dans la modale. */
.view-nav{display:flex;align-items:center;justify-content:center;gap:8px}
.view-nav .view-stage{flex:1 1 auto}
.view-arrow{width:40px;height:40px;border-radius:var(--r-jeton);border:1px solid var(--trait);
  background:transparent;color:var(--encre-2);font-size:1.4rem;line-height:1}
.view-arrow:hover{color:var(--encre);border-color:var(--accent)}
.view-rang{margin-top:10px;text-align:center;color:var(--encre-3);font-size:var(--t-legende)}

/* ── Questionnaires (liste + parcours de réponse) ─────────────────────────────
   Portage des composants de l'ancienne page dans le socle Velours : mêmes noms de
   classes, donc aucun script à retoucher. */
.qn-list{display:flex;flex-direction:column;gap:12px}
.qn-card{display:block;padding:20px 22px;border-radius:var(--r-bloc);text-decoration:none;color:inherit;
  background:var(--carte);border:1px solid var(--trait)}
.qn-card:hover,.qn-card:focus-visible{border-color:var(--accent)}
.qn-card h3{font-family:var(--display);font-size:1.5rem;margin-bottom:4px}
.qn-card p{color:var(--encre-2);font-size:var(--t-legende);line-height:1.5}
.qn-meta{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.qn-meta span{padding:3px 10px;border-radius:var(--r-jeton);background:var(--carte-2);
  border:1px solid var(--trait);font-family:var(--etiquette);font-size:var(--t-etiq);
  letter-spacing:.1em;color:var(--encre-2)}

.qn-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;
  font-family:var(--etiquette);font-size:var(--t-etiq);letter-spacing:.12em;color:var(--encre-2)}
.qn-counter{font-variant-numeric:tabular-nums}
.qn-counter span{color:var(--encre)}
.qn-progress{height:3px;border-radius:var(--r-jeton);background:var(--trait);overflow:hidden;margin-bottom:24px}
.qn-progress-fill{height:100%;background:var(--accent);transition:width .25s}
.cat-pill{display:inline-block;margin-bottom:12px;padding:3px 12px;border-radius:var(--r-jeton);
  background:var(--carte-2);border:1px solid var(--trait);
  font-family:var(--etiquette);font-size:var(--t-etiq);letter-spacing:.12em;color:var(--accent)}

.qcard{background:var(--carte);border:1px solid var(--trait);border-radius:var(--r-bloc);
  padding:calc(var(--pas)*3);margin-bottom:14px}
.qcard-text{font-family:var(--display);font-size:1.6rem;font-style:italic;line-height:1.25;
  margin-bottom:calc(var(--pas)*2.5);text-wrap:balance}
.qcard-section{margin-bottom:calc(var(--pas)*2)}
.qcard-section:last-child{margin-bottom:0}
.qcard-label{margin-bottom:8px;font-family:var(--etiquette);font-size:var(--t-etiq);
  letter-spacing:.12em;color:var(--encre-3)}
.qcard-warn{display:flex;gap:8px;align-items:flex-start;margin-top:12px;padding:12px 14px;
  border-radius:var(--r-ligne);background:var(--carte-2);border:1px solid var(--accent);
  border-left-width:3px;font-size:var(--t-legende);line-height:1.5}
.qcard-warn a{color:var(--accent)}

.row2,.row3,.row4,.row5{display:grid;gap:8px}
.row2{grid-template-columns:repeat(2,minmax(0,1fr))}
.row3{grid-template-columns:repeat(3,minmax(0,1fr))}
.row4{grid-template-columns:repeat(4,minmax(0,1fr))}
.row5{grid-template-columns:repeat(5,minmax(0,1fr))}
.opt-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  min-height:var(--touch-min);padding:10px 8px;border-radius:var(--r-champ);
  background:transparent;border:1px solid var(--trait);color:var(--encre-2);font-size:var(--t-legende)}
.opt-btn:hover{color:var(--encre);border-color:var(--accent)}
.opt-btn.on{border-color:var(--accent);color:var(--encre);background:rgba(232,131,107,.12)}
.opt-btn .num{font-family:var(--display);font-size:1.2rem}
.opt-btn .lab{font-size:var(--t-etiq);color:inherit;opacity:.85;text-align:center;line-height:1.2}

.freq-row{display:flex;gap:8px;align-items:stretch}
.freq-qty{flex:0 0 5rem;text-align:center}
.freq-units{flex:1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
textarea.open{width:100%;min-height:7rem;resize:vertical}

.nav-row{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:calc(var(--pas)*3)}
.btn-ghost{display:inline-flex;align-items:center;justify-content:center;min-height:var(--touch-min);
  padding:0 20px;border-radius:var(--r-jeton);border:1px solid var(--trait);
  background:transparent;color:var(--encre-2);font-size:var(--t-legende)}
.btn-ghost:hover{color:var(--encre);border-color:var(--accent)}

.summary-card{background:var(--carte);border:1px solid var(--trait);border-radius:var(--r-bloc);padding:calc(var(--pas)*3)}
.summary-item{padding:14px 0;border-bottom:1px solid var(--trait)}
.summary-item:last-child{border-bottom:0}
.summary-text{font-family:var(--display);font-style:italic;font-size:1.15rem;margin-bottom:6px}
.summary-detail{display:flex;flex-wrap:wrap;gap:6px}
.pill{padding:3px 10px;border-radius:var(--r-jeton);background:var(--carte-2);border:1px solid var(--trait);
  font-size:var(--t-etiq);color:var(--encre-2)}
.q-suppr{float:right;margin:-4px 0 0 12px;min-height:32px;padding:0 12px;border-radius:var(--r-jeton);
  border:1px solid var(--danger);background:transparent;color:var(--danger);font-size:var(--t-etiq)}
.q-suppr:hover{background:rgba(194,24,91,.10)}

/* ── « Première fois » : la modale de choix de la relation (dashboard) ────────
   Elle n'avait AUCUN style : le bouton « Attribuer » posait bien la classe
   « show », mais rien ne l'affichait — le clic semblait sans effet (22/09).
   Même convention que .ovl-overlay : fermée par défaut, ouverte par « show ». */
.pick-overlay{position:fixed;inset:0;z-index:30;display:none;align-items:center;justify-content:center;
  padding:var(--gouttiere);background:rgba(12,4,8,.72)}
.pick-overlay.show{display:flex}
.pick-modal{width:min(26rem,100%);max-height:88dvh;overflow:auto;background:var(--carte);
  border:1px solid var(--trait);border-radius:var(--r-bloc);padding:calc(var(--pas)*3)}
.pick-modal h3{font-size:1.25rem}
.pick-sub{color:var(--encre-2);font-size:var(--t-legende);margin-top:6px}
.pick-list{display:grid;gap:8px;margin-top:calc(var(--pas)*2)}
.pick-item{display:flex;align-items:center;gap:10px;min-height:44px;padding:0 14px;cursor:pointer;
  background:transparent;border:1px solid var(--trait);border-radius:var(--r-ligne)}
.pick-item:hover{border-color:var(--accent)}
.pick-actions{display:flex;justify-content:flex-end;margin-top:calc(var(--pas)*2)}
.pick-cancel{min-height:40px;padding:0 16px;border:1px solid var(--trait);border-radius:var(--r-jeton);
  background:transparent;color:var(--encre-2);font-size:var(--t-legende)}
.pick-cancel:hover{color:var(--encre);border-color:var(--accent)}
.pick-never{min-height:40px;padding:0 16px;margin-right:auto;border:1px solid var(--trait);border-radius:var(--r-jeton);background:transparent;color:var(--encre);font:inherit;cursor:pointer}
.pick-never:hover{border-color:var(--accent);color:var(--accent)}
.pick-vide{color:var(--muted,var(--encre-2));font-size:.9rem;margin:0 0 8px}
.first-item.never .star{color:var(--trait)}

/* ── « Première fois ? » (tableau de bord) ────────────────────────────────────
   Sans ces règles la modale se déroulait dans la page : elle n'existait qu'en JS. */
.pick-overlay{position:fixed;inset:0;z-index:20;display:none;align-items:center;justify-content:center;
  padding:var(--gouttiere);background:rgba(12,4,8,.72)}
.pick-overlay.show{display:flex}
.pick-modal{width:min(26rem,100%);max-height:88dvh;overflow:auto;padding:calc(var(--pas)*3);
  background:var(--carte);border:1px solid var(--trait);border-radius:var(--r-bloc)}
.pick-modal h3{font-family:var(--display);font-size:1.5rem}
.pick-sub{margin-top:6px;color:var(--encre-2);font-size:var(--t-legende)}
.pick-list{display:grid;gap:8px;margin-top:calc(var(--pas)*2.5)}
.pick-item{display:flex;align-items:center;gap:10px;min-height:var(--touch-min);padding:0 16px;
  border-radius:var(--r-ligne);background:var(--carte-2);border:1px solid var(--trait);cursor:pointer}
.pick-item:hover{border-color:var(--accent)}
.pi-prenom{font-family:var(--display);font-size:1.1rem}
.pi-actuelle{margin-left:auto;color:var(--accent);font-size:var(--t-legende)}
.pick-actions{display:flex;justify-content:flex-end;margin-top:calc(var(--pas)*2.5)}
.pick-cancel{min-height:var(--touch-min);padding:0 20px;border-radius:var(--r-jeton);
  border:1px solid var(--trait);background:transparent;color:var(--encre-2)}
.pick-cancel:hover{color:var(--encre);border-color:var(--accent)}
.pick-item.on{border-color:var(--accent)}
.pick-item .pi-note{margin-left:auto;color:var(--encre-2);font-size:var(--t-mention,.75rem)}
.pick-item.pick-retirer{border-style:dashed;color:var(--encre-2)}
.pick-item.pick-retirer:hover{color:var(--encre)}
.pick-vide{color:var(--encre-2);font-size:var(--t-legende);margin-top:calc(var(--pas)*2)}