/* Page de test « annuaire » (#76, 05-10-2026) : styles propres, par-dessus style.css et style-d.css
   (mêmes tokens et polices). Aucune largeur fixe qui déborde à 390 px. Une couleur d'émission
   arrive par --c et --c-texte, posées en JS (annuaire.js, poserCouleur), jamais en attribut HTML. */

/* Tokens propres à la page (retours de vadmaths, 06-10) : bleu pâle de la sélection (noir dessus 14,9:1, bleu dessus 4,6:1),
   ombre « sticker » des cartes, gris des lettres de la colonne (5,2:1 sur le mur). */
:root { --bleu-pale:#dbe5ff; --ombre-sticker:rgba(17,18,20,.55); --gris-lettre:#33383d; --gris-lettre-vide:#484d53; --coeur:#c8102e; } /* --coeur (#73) : 5,9:1 sur blanc, 4,6:1 sur bleu pâle */

/* ---------- En-tête ---------- */
/* Un seul bloc gris collé : rangée 1 (logo, onglets, profil, dans <header>) + rangée 2 (#barre-haute : recherche, filtres). Décision d'Alice du 06-10.
   Téléphone ou petite hauteur : seule la rangée 2 reste collée (voir plus bas). */
.haut-colle { position:sticky; top:0; z-index:30; background:var(--mur); box-shadow:0 3px 0 var(--noir); }
.haut-colle .entete { background-color:var(--mur); }
.entete .entete-annuaire {
  display:grid; grid-template-columns:auto auto minmax(0,1fr) auto auto; grid-template-areas:"logo nav . plus profil";
  column-gap:24px; align-items:center; max-width:var(--largeur); margin:0 auto; padding:12px 24px 10px;
}
.entete-annuaire .logo { grid-area:logo; align-self:center; flex-direction:row; align-items:center; gap:14px; }
.entete-annuaire .logo-piece { width:170px; margin-left:-4px; }
.entete-annuaire .logo-bas { display:flex; flex-direction:column; align-items:flex-start; gap:6px; margin:0; padding:0; }
.entete-annuaire .logo-sous { font-size:var(--t-m); padding-bottom:7px; background-size:100% 8px; }
.recherche-annuaire { position:relative; flex:1 1 260px; min-width:120px; max-width:420px; }
/* Suggestions (lot 4A) : styles de style-d.css (.suggestions, .sug), assez larges même quand le champ est étroit (1024 px). */
.recherche-annuaire .suggestions { min-width:min(400px, calc(100vw - 32px)); }
.recherche-annuaire input[type=search] {
  width:100%; box-sizing:border-box; height:44px; padding:0 14px 0 44px;
  border:3px solid var(--noir); border-radius:4px; box-shadow:4px 4px 0 var(--noir);
  background:var(--blanc) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111214' stroke-width='2.6' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.5 15.5L21 21'/%3E%3C/svg%3E") 14px 50% / 20px 20px no-repeat;
  color:var(--noir); font:600 var(--t-l)/1 var(--f-texte);
}
.recherche-annuaire input[type=search]:focus { width:100%; } /* annule le width:300px au focus de style.css */
.recherche-annuaire input[type=search]::placeholder { color:var(--gris-num); opacity:1; }
.nav-annuaire { grid-area:nav; display:flex; gap:8px; padding:4px 6px 6px 2px; }
.nav-annuaire a {
  display:inline-flex; align-items:center; height:42px; padding:0 14px; border:3px solid var(--noir); border-radius:0;
  background:var(--noir); color:var(--blanc); font:400 var(--t-s)/1 var(--f-piece); text-decoration:none; white-space:nowrap;
}
.nav-annuaire a:hover { background:var(--bleu-fonce); color:var(--blanc-pur); }
.nav-annuaire a[aria-current=page] { background:var(--bleu); color:var(--blanc-pur); box-shadow:4px 4px 0 var(--noir); transform:rotate(-1.5deg); }
.entete-annuaire .profil { grid-area:profil; }
/* Bouton « + » (08-10) : même habit que le profil ; invisible en Lecture mais sa place reste (visibility), l'en-tête ne bouge pas. */
.entete-annuaire .plus { grid-area:plus; position:relative; }
.btn-plus { display:grid; place-items:center; width:42px; height:42px; padding:0; border:2px solid var(--noir); border-radius:3px; background:var(--jaune); color:var(--noir); box-shadow:3px 3px 0 var(--ombre-douce); cursor:pointer; }
.btn-plus:hover, .btn-plus[aria-expanded=true] { background:var(--blanc); }
.btn-plus:focus-visible { outline:3px solid var(--bleu); outline-offset:2px; }
.btn-plus svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:3; stroke-linecap:round; }
.plus.inactif { visibility:hidden; }
.menu-plus { right:0; min-width:230px; }
.menu-plus [role=menuitem][aria-disabled=true] { color:var(--gris-texte); cursor:default; }
.menu-profil a { display:block; padding:10px; border-radius:2px; color:var(--noir); font:600 var(--t-m)/1.2 var(--f-texte); text-decoration:none; }
.menu-profil a:hover, .menu-profil a:focus-visible { background:var(--jaune); }

/* Rangée 2 : recherche puis filtres, sur toute la largeur du contenu. Le filet noir la sépare de la rangée 1. */
.barre-haute { padding:0 24px 12px; }
.barre-haute-in { max-width:calc(var(--largeur) - 48px); margin:0 auto; display:flex; align-items:center; gap:10px 16px; padding-top:10px; border-top:2px solid var(--noir); }
/* Tablette tenue droite (701-900 px, 09-10-2026) : depuis le 3e onglet (Coups de cœur), la rangée unique demande ~870 px et
   poussait « + » et le profil hors de l'écran (défilement horizontal). En-tête sur deux rangées, comme sur téléphone. */
@media (min-width:701px) and (max-width:900px) {
  .entete .entete-annuaire { grid-template-columns:minmax(0,1fr) auto auto; grid-template-areas:"logo plus profil" "nav nav nav"; row-gap:10px; }
}
/* Très petit téléphone (≤ 370 px, 09-10-2026) : les trois onglets faisaient 350 px à 320 de large (page dézoomée). */
@media (max-width:370px) {
  .nav-annuaire { gap:6px; padding-right:0; }
  .nav-annuaire a { padding:0 8px; font-size:var(--t-xs); } /* Bungee en capitales : un cran plus bas, permis par la charte */
}
@media (max-width:700px) {
  .entete .entete-annuaire { grid-template-columns:minmax(0,1fr) auto auto; grid-template-areas:"logo plus profil" "nav nav nav"; padding:14px 16px 10px; column-gap:12px; row-gap:10px; }
  .entete-annuaire .logo { flex-direction:column; align-items:flex-start; gap:2px; }
  .entete-annuaire .logo-piece { width:160px; }
  .entete-annuaire .logo-bas { flex-direction:row; align-items:flex-end; gap:10px; }
  .nav-annuaire a { flex:1 1 0; justify-content:center; height:44px; padding:0 8px; }
  .btn-profil, .btn-plus { width:46px; height:46px; }
  .barre-haute { padding:0 16px 8px; }
  .barre-haute-in { flex-direction:column; align-items:stretch; gap:6px; padding-top:8px; }
  .recherche-annuaire { flex:none; max-width:none; }
  .recherche-annuaire input[type=search] { height:40px; }
}
/* Téléphone ou petite hauteur : logo et onglets défilent ; seule la rangée recherche + filtres reste collée.
   `.haut-colle` disparaît de la mise en page (display:contents) : sa rangée 2 devient un enfant direct de <body>, assez haut pour qu'elle y reste collée. */
@media (max-width:700px), (max-height:760px) { /* 760 px depuis le 06-10 (portables : 1366 x 700, 1280 x 720) ; c'était 600 px */
  .haut-colle { display:contents; position:static; }
  .barre-haute { position:sticky; top:0; z-index:30; background:var(--mur); box-shadow:0 3px 0 var(--noir); }
  body.sur-video .barre-haute { position:static; box-shadow:none; } /* page vidéo : seul le lecteur reste collé */
  .barre-haute-in { border-top:0; } /* seule la rangée 2 est collée : son filet du haut ferait une ligne noire en haut de l'écran */
  .entete { z-index:31; } /* au-dessus de la rangée collée : sinon elle recouvre le haut du menu du profil (retour de vadmaths, 08-10) ; la rangée ne colle qu'une fois l'en-tête sorti de l'écran, ils ne se chevauchent pas */
}

/* Fond de l'annuaire : les rectangles gris fixes de style-d.css (body::before) ressemblent à des erreurs ; atténués ici seulement. */
html.annuaire body::before { opacity:.28; }
/* Le toast se pose au-dessus d'un éventuel bandeau collé en pied d'écran (--h-bandeau-bas, mesurée en JS ; 0 sans bandeau depuis le lot 4B). */
#toast { bottom:calc(var(--h-bandeau-bas, 0px) + 14px); }

/* ---------- Corps ---------- */
.page-annuaire { max-width:var(--largeur); margin:0 auto; padding:16px 24px 24px; box-sizing:border-box; }
@media (max-width:700px) { .page-annuaire { padding:12px 16px 24px; } }

/* Pied de page (lot 4A) : la phrase du site (non-affiliation) et ses liens, style du footer de style-d.css, au-dessus de la rubalise. */
.pied-annuaire { box-sizing:border-box; width:calc(100% - 48px); max-width:calc(var(--largeur) - 48px); margin:20px auto calc(var(--h-bandeau-bas, 0px) + 28px); }
.pied-annuaire a { text-underline-offset:3px; }
.pied-annuaire a:hover { color:var(--bleu); }
@media (max-width:700px) { .pied-annuaire { width:calc(100% - 32px); margin-top:12px; } }

/* ---------- Filtres : deux menus qui disent leur valeur (05-10), dans la rangée de la recherche (06-10) ---------- */
.barre-filtres { flex:0 1 auto; min-width:0; margin-left:0; }
.barre-haute-in:has(.filtres-fin) .barre-filtres { flex:1 1 auto; }
.barre-filtres[hidden] { display:none; }
.filtres-in { display:flex; align-items:center; gap:8px 16px; }
.filtres-in > .filtre { flex:0 1 auto; }
@media (min-width:1101px) { .filtres-in > .filtre { flex-shrink:0; } } /* grand écran : les menus gardent leur largeur, pastilles et recherche cèdent la place (07-10) */
.filtre { display:flex; flex-direction:row; align-items:center; gap:7px; min-width:0; }
.filtre-libelle { color:var(--noir); font:800 var(--t-xs)/1 var(--f-texte); letter-spacing:.1em; text-transform:uppercase; }
.menu-filtre {
  height:40px; max-width:230px; padding:0 10px; border:3px solid var(--noir); border-radius:4px;
  background:var(--blanc); color:var(--noir); font:700 var(--t-m)/1 var(--f-texte); cursor:pointer; box-shadow:3px 3px 0 var(--noir);
}
.menu-filtre { appearance:none; -webkit-appearance:none; }
select.menu-filtre, .menu-cases summary.menu-filtre {
  padding-right:30px; background-repeat:no-repeat; background-position:right 9px center; background-size:14px 14px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111214' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 9l7 7 7-7'/%3E%3C/svg%3E");
}
.filtre.actif select.menu-filtre, .filtre.actif .menu-cases summary.menu-filtre {
  background-color:var(--bleu); background-repeat:no-repeat; background-position:right 9px center; background-size:14px 14px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 9l7 7 7-7'/%3E%3C/svg%3E");
}
/* Filtre posé = bleu du site, texte blanc (06-10) ; la couleur d'une émission reste pour ses pastilles. */
.filtre.actif .menu-filtre { background:var(--bleu); color:var(--blanc-pur); }
.filtre.actif .menu-filtre option, .filtre.actif .menu-filtre optgroup { background:var(--blanc); color:var(--noir); }
/* Menu Émission à cases (plusieurs émissions possibles) */
.menu-cases { position:relative; min-width:0; } /* peut rétrécir quand des pastilles serrent la rangée (sinon il chevauche Passages) */
/* Largeur fixe (07-10) : la recherche ne rétrécit plus quand un nom d'émission long est choisi ; nom trop long coupé par « … ». */
.menu-cases summary.menu-filtre { display:block; width:160px; max-width:100%; line-height:34px; min-width:0; box-sizing:border-box; list-style:none; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.menu-cases summary.menu-filtre::-webkit-details-marker { display:none; }
.menu-cases-liste { position:absolute; z-index:20; top:calc(100% + 6px); left:0; min-width:260px; display:flex; flex-direction:column; gap:2px; padding:8px; background:var(--blanc); border:2px solid var(--noir); border-radius:6px; box-shadow:4px 4px 0 var(--noir); }
.case-emission { display:flex; align-items:center; gap:10px; padding:8px; border-radius:4px; color:var(--noir); font:700 var(--t-m)/1.2 var(--f-texte); cursor:pointer; }
.case-emission:hover { background:var(--jaune-pale); }
.case-emission input { flex:none; width:24px; height:24px; margin:0; accent-color:var(--noir); }
.case-emission.a-venir { color:var(--gris-texte); cursor:default; }
.case-pastille { flex:none; width:14px; height:14px; border:2px solid var(--noir); background:var(--c, var(--jaune)); }
.menu-cases-liste .lien-bouton { align-self:flex-start; margin:6px 8px 2px; }
/* Pastilles retirables (lieu, et depuis le lot 4A : vidéo, cypher, À identifier) : hauteur des menus, bleu des filtres posés */
.barre-filtres .pastille { height:40px; max-width:170px; background:var(--bleu); color:var(--blanc-pur); }
.filtres-pastilles { display:flex; align-items:center; gap:6px; min-width:0; }
.filtres-pastilles .pastille { flex:0 1 auto; min-width:72px; }
/* Pastilles posées : la recherche cède de la place (base 200 px au lieu de 260), deux pastilles tiennent sans être coupées à 1440 px. */
@media (min-width:701px) { .barre-haute-in:has(.filtres-pastilles) .recherche-annuaire { flex-basis:200px; } } /* téléphone : la rangée est en colonne, la base serait une hauteur */
.barre-filtres .pastille:hover { background:var(--noir); color:var(--blanc); }
.pastille-texte { min-width:0; overflow:hidden; text-overflow:ellipsis; line-height:1.3; } /* 1.3 : l'accent d'une capitale (« À identifier ») n'est pas rogné */
.filtres-fin { display:flex; flex:0 0 auto; align-items:center; gap:4px 14px; margin-left:auto; }
.filtres-in > .filtres-pastilles { flex:0 1 auto; }
.effacer-filtres { height:40px; padding:0 4px; border:0; background:none; color:var(--noir); font:700 var(--t-s)/1 var(--f-texte); text-decoration:underline; text-underline-offset:3px; white-space:nowrap; cursor:pointer; }
.effacer-filtres:hover { color:var(--bleu); }
.effacer-filtres.reserve { visibility:hidden; } /* garde la place : l'en-tête ne change pas de hauteur quand un filtre se pose */
.filtres-compte { color:var(--noir); font:800 var(--t-s)/1 var(--f-texte); letter-spacing:.06em; text-transform:uppercase; white-space:nowrap; font-variant-numeric:tabular-nums; }
/* Largeur réservée (07-10) : « Tout effacer » et le nombre ne font plus varier la largeur de la recherche. */
@media (min-width:701px) { .filtres-fin { min-width:200px; justify-content:flex-end; } }
@media (max-width:1100px) {
  /* Libellés au-dessus des menus : la rangée tient à 768 px */
  .filtre { flex-direction:column; align-items:stretch; gap:3px; }
  .barre-filtres .menu-filtre, .barre-filtres .menu-cases summary.menu-filtre { height:36px; padding:0 28px 0 8px; }
  .barre-filtres .pastille { height:36px; max-width:130px; }
  .filtres-in { gap:8px 12px; }
  .barre-filtres select.menu-filtre { min-width:112px; }
  .barre-filtres .menu-cases summary.menu-filtre { width:130px; line-height:30px; }
  .recherche-annuaire { flex-shrink:2; }
}
@media (max-width:700px) {
  /* Téléphone : Émission, Passages, puis Tout effacer au-dessus du nombre ; la rangée reste d'environ 110 px. */
  .filtres-in { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto; gap:6px 8px; align-items:end; }
  .barre-filtres .menu-filtre, .barre-filtres .menu-cases summary.menu-filtre { width:100%; min-width:0; max-width:none; }
  .filtres-fin { flex-direction:column; align-items:flex-end; justify-content:flex-end; gap:2px; margin:0; }
  .effacer-filtres { height:20px; }
  .filtres-compte { font-size:var(--t-xs); white-space:normal; text-align:right; max-width:8em; line-height:1.15; }
  .filtres-compte .compte-part:first-child { white-space:nowrap; } /* « 434 artistes » d'un bloc ; « 18 DJ et animateurs » peut passer à la ligne */
  .barre-filtres select.menu-filtre { min-width:0; } /* les 112 px des écrans moyens faisaient déborder Passages sur le nombre */
  /* 21-10 (retour de vadmaths) : « 434 artistes » puis « 18 DJ et animateurs » en dessous ; sans ça, la ligne entière
     (insécable) élargissait la colonne et passait sur le menu Passages. */
  .filtres-compte .compte-part { display:block; }
  .filtres-compte .compte-sep { display:none; }
  /* Lieu posé : la pastille prend la place du nombre, dans la même colonne (la rangée garde sa hauteur) */
  .avec-lieu .filtres-compte { display:none; }
  .avec-lieu .filtres-fin { max-width:132px; }
  .avec-lieu .filtres-pastilles .pastille { height:26px; max-width:132px; padding:0 6px 0 10px; font-size:var(--t-s); }
  /* Plusieurs pastilles (lot 4A) : une rangée à elles sous les menus, qui défile de côté si elle déborde */
  .avec-pastilles > .filtres-fin { grid-column:3; grid-row:1; }
  .avec-pastilles > .filtres-pastilles { grid-column:1 / -1; grid-row:2; overflow-x:auto; padding:1px 0 3px; }
  .avec-pastilles .filtres-pastilles .pastille { flex:none; height:30px; max-width:70vw; padding:0 6px 0 10px; font-size:var(--t-s); }
}

/* ---------- Accueil Artistes ---------- */
.col-annuaire { min-width:0; }

.vide-filtres { display:flex; flex-direction:column; align-items:flex-start; gap:12px; padding:8px 0 24px; }
.vide-filtres .empty { margin:0; }
.compte-artistes { margin:0 0 8px; color:var(--noir); font:800 var(--t-s)/1 var(--f-texte); letter-spacing:.06em; text-transform:uppercase; }
.col-annuaire nav.az { position:static; margin-bottom:12px; }
.col-annuaire nav.az::before { margin-right:6px; }
.col-annuaire nav.az .vide { display:inline-flex; align-items:center; justify-content:center; min-width:34px; height:30px; color:var(--gris-texte); font:400 var(--t-s)/1 var(--f-piece); } /* téléphone : lettres vides en gris foncé sur le gris du mur (≥ 4,5:1) ; colonne noire (≥ 701 px) : voir plus bas */
.groupe-lettre { margin:0 0 14px; } /* l'écart sous l'en-tête collé vient de scroll-padding-top (html), pas d'une marge : pas de double décalage */
.lettre { margin:0 0 8px; color:var(--noir); font:400 var(--t-xl)/1 var(--f-piece); }
.liste-artistes { display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 210px), 1fr)); gap:14px; }

.carte-artiste {
  --angle:0deg; /* posé par annuaire.js (angleCarte) : toujours le même pour un artiste, entre -1,5 et 1,5 degré */
  display:flex; flex-direction:column; min-width:0; padding:0 0 10px; overflow:hidden;
  background:var(--blanc); color:var(--noir); border:2px solid var(--noir); border-radius:9px; box-shadow:4px 4px 0 var(--ombre-sticker); text-decoration:none;
  transform:rotate(var(--angle)); transition:transform .15s ease-out, box-shadow .15s ease-out;
}
.carte-artiste:hover, .carte-artiste:focus-visible { transform:rotate(0deg); background:var(--jaune-pale); box-shadow:6px 6px 0 var(--noir); }
@media (prefers-reduced-motion:reduce) { .carte-artiste { transition:none; } }
/* Bande « My name is » bord à bord, comme une vraie étiquette : style.css et style-d.css donnent à .etiquette une marge à droite et des coins arrondis. */
.carte-artiste .etiquette { display:block; box-sizing:border-box; width:100%; height:16px; margin:0; padding:0 9px; border-radius:0; background:var(--bleu); color:var(--blanc-pur); font:700 var(--t-xs)/16px var(--f-texte); letter-spacing:.16em; text-transform:uppercase; }
.carte-artiste .nom { display:block; padding:6px 10px 0; font:400 var(--t-xl)/1.15 var(--f-nom); overflow-wrap:anywhere; }
.carte-artiste .meta { margin-top:auto; } /* même hauteur dans une rangée : les informations restent calées en bas */
.carte-artiste .meta, .carte-artiste .lieu { display:block; padding:2px 10px 0; color:var(--gris-texte); font:600 var(--t-s)/1.3 var(--f-texte); }
.carte-artiste .lieu { color:var(--gris-num); font-weight:500; }

/* Téléphone (08-10, choix d'Alice) : les 27 lettres sur deux lignes de 14, collées sous la recherche quand on descend.
   Hauteur mesurée en JS (--h-az, majHautEntete) : le saut vers une lettre et la lettre en cours en tiennent compte. */
@media (max-width:700px) {
  .col-annuaire nav.az { position:sticky; top:var(--haut-entete, 0px); z-index:20; display:grid; grid-template-columns:repeat(14, minmax(0, 1fr)); gap:2px;
    min-height:0; margin:0 -16px 12px; padding:6px 16px; overflow:visible; background:var(--mur); border-radius:0; border-bottom:2px solid var(--noir); }
  .col-annuaire nav.az::before { display:none; }
  .col-annuaire nav.az a, .col-annuaire nav.az .vide { min-width:0; height:34px; padding:0; font-size:var(--t-m); }
}

/* ---------- Fiche d'artiste ---------- */
/* La fenêtre reprend les règles de style-d.css (dialog.fenetre-artiste) ; ici : plus large, 90 % de la hauteur, plein écran sous 700 px. */
dialog.fenetre-artiste { max-width:760px; max-height:90vh; max-height:90dvh; }
/* 25-10-2026 (retour de vadmaths, iPad) : la fenêtre n'a qu'une hauteur maximale (hauteur fixe seulement sous 700 px) ; avec
   « flex:1 » (base 0 %), Safari réduisait .fa et .fa-corps à 0 et la fenêtre devenait un trait noir. Base « auto » : la fenêtre
   prend la hauteur du contenu et, au-delà de sa hauteur maximale, .fa-corps rétrécit et défile (min-height:0), comme avant. */
.fenetre-artiste .fa, .fenetre-artiste .fa-corps { flex:1 1 auto; }
body:has(dialog.fenetre-artiste[open]) { overflow:hidden; } /* la page dessous ne défile pas */
.fa .fa-infos { align-items:center; }
@media (max-width:700px) {
  dialog.fenetre-artiste { width:100%; max-width:100%; height:100dvh; max-height:100dvh; margin:0; border-width:0; box-shadow:none; }
  .fa-ligne { grid-template-columns:minmax(0, 1fr); }
  .fa-nom { font-size:var(--t-xl); }
}
.fa-filtre { display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding:0 18px 12px; }
.fa-pastille {
  display:inline-flex; align-items:center; height:34px; padding:0 14px; border:2px solid var(--noir); border-radius:17px;
  background:var(--c, var(--blanc)); color:var(--c-texte, var(--noir)); font:700 var(--t-s)/1 var(--f-texte); white-space:nowrap; cursor:pointer;
}
.fa-pastille[aria-pressed=true] { background:var(--noir); color:var(--blanc); box-shadow:3px 3px 0 var(--jaune); }
.fa-pastille:hover { box-shadow:3px 3px 0 var(--noir); }
.fa-emission .fa-nom-emission { flex:1; min-width:0; }
.fa-meme { padding:0 18px 18px; }
.fa-meme h3 { margin:0 0 10px; color:var(--noir); font:400 var(--t-l)/1.1 var(--f-main); transform:rotate(-1.5deg); transform-origin:left; } /* idée et mots de vadmaths (05-10) */
.fa-meme ul { list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px; }
.fa-meme a { display:inline-flex; align-items:baseline; gap:6px; padding:6px 12px; border:2px solid var(--noir); border-radius:3px; background:var(--blanc); color:var(--noir); font:400 var(--t-m)/1.2 var(--f-nom); text-decoration:none; }
.fa-meme a small { color:var(--gris-texte); font:600 var(--t-xs)/1 var(--f-texte); }
.fa-meme a:hover { background:var(--jaune); }
dialog.dlg-fiche { max-height:calc(100dvh - 32px); overflow-y:auto; }
/* Survol d'une heure de la fiche : bleu pâle (comme la sélection), plus le jaune des 100 Heures (retour de vadmaths, 06-10). */
.fa-heure:hover, .fa-heure:focus-visible { background:var(--bleu-pale); color:var(--noir); }
.fa-coeur { align-self:center; margin-left:-2px; color:var(--coeur); font:700 var(--t-s)/1 var(--f-texte); white-space:nowrap; } /* #73 : après l'heure, lecture seule */
/* Fiche « Artiste à identifier » (lot 4A) : une heure par ligne, suivie de son indice. */
.fa-aide-speciale { margin:0; padding:0 18px 12px; color:var(--gris-texte); font:500 var(--t-s)/1.4 var(--f-texte); }
.fa-indices { flex-direction:column; align-items:flex-start; }
.fa-indice-ligne { display:flex; flex-wrap:wrap; align-items:center; gap:4px 10px; }
.fa-indice { color:var(--noir); font:600 var(--t-s)/1.3 var(--f-texte); overflow-wrap:anywhere; }
.fa-sans-indice { color:var(--gris-texte); font-style:italic; }

/* Partager la fiche / la vidéo : icône de partage, nom accessible, « Lien copié ✓ » à côté pendant 2 s. */
.partage { display:inline-flex; align-items:center; gap:8px; }
.btn-partage { display:inline-grid; place-items:center; width:40px; height:40px; padding:0; border:2px solid var(--noir); border-radius:3px; background:var(--blanc-pur); color:var(--noir); box-shadow:3px 3px 0 var(--ombre-douce); cursor:pointer; }
.btn-partage:hover { background:var(--bleu-pale); box-shadow:3px 3px 0 var(--noir); }
.icone-partage { display:block; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.icone-partage circle { fill:currentColor; stroke:none; }
.partage-retour { color:var(--noir); font:700 var(--t-s)/1.2 var(--f-texte); white-space:nowrap; }
.partage-retour:empty { display:none; }

/* ---------- Vidéos ---------- */
.page-videos { max-width:none; }
.pv-section { margin:0 0 22px; }
.liste-videos { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:10px; }
.carte-video {
  display:flex; flex-direction:column; gap:3px; min-width:0; padding:12px 14px; background:var(--blanc); color:var(--noir);
  border:2px solid var(--noir); border-radius:9px; box-shadow:3px 3px 0 var(--ombre-douce); text-decoration:none;
}
.carte-video:hover { background:var(--jaune-pale); box-shadow:5px 5px 0 var(--noir); }
.cv-nom { font:700 var(--t-l)/1.15 var(--f-texte); overflow-wrap:anywhere; }
.cv-titre { color:var(--gris-texte); font:600 var(--t-s)/1.3 var(--f-texte); overflow-wrap:anywhere; }
.cv-meta { color:var(--gris-texte); font:600 var(--t-s)/1.3 var(--f-texte); }

/* ---------- Coups de cœur (#73) : lignes de passages, comme la page d'une vidéo ---------- */
.page-coeurs { max-width:none; }
.liste-coeurs { list-style:none; margin:0; padding:0; border:2px solid var(--noir); background:var(--blanc); box-shadow:3px 3px 0 var(--ombre-douce); }
.ligne-coeur { display:grid; grid-template-columns:64px minmax(0,1.2fr) minmax(0,1fr) minmax(0,1fr); align-items:center; gap:4px 14px; padding:8px 12px; border-top:1px solid var(--filet); }
.ligne-coeur:first-child { border-top:0; }
.ligne-coeur:hover { background:var(--jaune-pale); }
.pc-artiste { justify-self:start; border-bottom:0; color:var(--noir); font:400 var(--t-l)/1.2 var(--f-nom); overflow-wrap:anywhere; text-decoration:none; } /* le lien a la largeur du nom, sans le filet de .lien-fiche (style.css) */
a.pc-artiste:hover { text-decoration:underline; text-underline-offset:3px; }
.pc-video { color:var(--bleu); font:600 var(--t-m)/1.25 var(--f-texte); overflow-wrap:anywhere; text-decoration:underline; text-underline-offset:3px; }
.pc-emission { color:var(--gris-texte); font:600 var(--t-s)/1.3 var(--f-texte); overflow-wrap:anywhere; }
@media (max-width:700px) {
  .ligne-coeur { grid-template-columns:56px minmax(0,1fr); padding:8px; }
  .ligne-coeur .pc-coeur { grid-row:1 / span 3; align-self:start; }
}

/* ---------- Page d'une vidéo ---------- */
.page-video { display:grid; grid-template-columns:minmax(0,1fr); gap:14px; align-items:start; }
.pv-titre { display:flex; flex-wrap:wrap; align-items:center; gap:6px 12px; }
.pv-titre h1 { margin:0; font:400 var(--t-xl)/1.1 var(--f-piece); color:var(--noir); }
.pv-yt { display:inline-flex; align-items:center; justify-content:center; min-width:32px; min-height:32px; color:var(--noir); font:700 var(--t-l)/1 var(--f-texte); text-decoration:underline; text-underline-offset:3px; }
.pv-yt:hover { color:var(--bleu-tag); }
.pv-emission { display:inline-block; padding:5px 12px; border:2px solid var(--noir); border-radius:16px; background:var(--c, var(--jaune)); color:var(--c-texte, var(--noir)); font:700 var(--t-s)/1 var(--f-texte); }
/* #85 (10-10, version C choisie par Alice) : flèches des parties, Partager et ✎ à droite de la ligne du titre, carrés de 40 px comme Partager. */
.pv-outils { margin-left:auto; display:inline-flex; align-items:center; gap:6px; }
.pv-parties { display:inline-flex; align-items:center; gap:6px; }
.pv-partie, .pv-titre .pv-modifier { display:inline-grid; place-items:center; width:40px; height:40px; min-height:40px; padding:0; border:2px solid var(--noir); border-radius:3px; background:var(--blanc-pur); color:var(--noir); box-shadow:3px 3px 0 var(--ombre-douce); font:700 var(--t-l)/1 var(--f-texte); text-decoration:none; box-sizing:border-box; }
.pv-partie:hover, .pv-titre .pv-modifier:hover { background:var(--bleu-pale); box-shadow:3px 3px 0 var(--noir); }
.pv-sous { flex:0 0 100%; margin:0; color:var(--gris-texte); font:600 var(--t-s)/1.3 var(--f-texte); }
.pv-suivi { flex:0 0 100%; display:flex; flex-wrap:wrap; align-items:center; gap:8px 10px; padding:8px 10px; background:var(--blanc); border:2px solid var(--noir); border-radius:6px; box-shadow:3px 3px 0 var(--noir); }
.pv-suivi[hidden] { display:none; }
.pv-gauche .pv-suivi { margin-top:10px; }
@media (max-width:700px) { .pv-gauche .pv-suivi { gap:4px 8px; padding:6px 8px; } .pv-suivi .tab { min-height:36px; padding:0 10px; } }
.pvs-qui { color:var(--noir); font:700 var(--t-m)/1.2 var(--f-texte); }
.pvs-nom { font:400 var(--t-l)/1.1 var(--f-nom); color:var(--noir); }
.pvs-rang { color:var(--gris-texte); font:600 var(--t-s)/1 var(--f-mono); font-variant-numeric:tabular-nums; }
.pvs-fiche { margin-left:auto; color:var(--bleu); font:700 var(--t-s)/1 var(--f-texte); }
@media (max-width:700px) { .pvs-fiche { margin-left:0; } }
.pv-gauche { position:sticky; top:0; z-index:5; min-width:0; padding:6px 0 8px; }
.pv-gauche { top:var(--haut-entete, 0px); } /* sous l'en-tête collé, téléphone compris */
.lecteur-boite { position:relative; width:100%; aspect-ratio:16/9; background:var(--noir); border:3px solid var(--noir); box-sizing:border-box; box-shadow:4px 4px 0 var(--noir); }
.lecteur-boite iframe, .lecteur-boite #lecteur-annuaire { position:absolute; inset:0; width:100%; height:100%; border:0; }
.lecteur-erreur { position:absolute; inset:0; margin:0; padding:16px; display:grid; place-items:center; background:var(--blanc); }
.pv-controles { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:12px; }
.pv-pos { margin-left:auto; color:var(--noir); font:600 var(--t-s)/1 var(--f-mono); font-variant-numeric:tabular-nums; }
/* Sauts sous le lecteur (lot 1) : ±10 s et ±1 min pour tous, ±1 et ±5 s (calage fin) seulement en Édition. */
.pv-calage { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.pv-calage .tab { min-width:56px; min-height:36px; padding:0 10px; font:700 var(--t-s)/1 var(--f-mono); font-variant-numeric:tabular-nums; }
.pv-calage .pv-fin { display:inline-block; visibility:hidden; background:var(--blanc); } /* Lecture : place gardée (08-10), la rangée ne s'agrandit pas en passant en Édition */
body:not(.en-edition) .pv-calage .pv-fin { order:1; } /* Lecture : la place réservée va en fin de rangée, les boutons visibles restent groupés */
body.en-edition .pv-calage .pv-fin { visibility:visible; }
.pv-liste-zone { display:flex; flex-direction:column; min-width:0; }
.pv-liste-tete { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:0 0 8px; }
.pv-liste-tete .tab { min-height:32px; }
.pvl-compte { color:var(--noir); font:800 var(--t-s)/1 var(--f-texte); letter-spacing:.06em; text-transform:uppercase; }
.pv-liste { min-width:0; }
.groupe-c { margin:0 0 14px; }
.tete-c { display:flex; align-items:center; gap:10px; padding:4px 10px; background:var(--noir); color:var(--blanc); border:2px solid var(--noir); }
/* Le bouton qui plie ou déplie remplit le reste de la tête : un clic n'importe où dessus (nom, heures, nombre d'artistes). */
.tc-bascule { flex:1; display:flex; flex-wrap:wrap; align-items:center; gap:4px 12px; min-width:0; min-height:32px; padding:0; border:0; background:none; color:inherit; font:inherit; text-align:left; cursor:pointer; }
.tc-bascule:disabled { color:inherit; cursor:default; } /* Édition : tout reste déplié */
.tc-bascule:disabled .tc-fleche { visibility:hidden; }
.tc-fleche { flex:none; width:9px; height:9px; margin:0 3px 3px 2px; border-right:3px solid var(--jaune); border-bottom:3px solid var(--jaune); transform:rotate(45deg); transition:transform .15s ease-out; }
.groupe-c.replie .tc-fleche { transform:rotate(-45deg); margin:0 3px 0 0; }
@media (prefers-reduced-motion:reduce) { .tc-fleche { transition:none; } }
.groupe-c.replie .tete-c { border-bottom-width:2px; }
.tc-jouer { display:inline-grid; place-items:center; width:28px; height:26px; border:2px solid var(--jaune); border-radius:2px; background:transparent; color:var(--jaune); font-family:var(--f-texte); font-size:var(--t-xs); line-height:1; cursor:pointer; }
.tc-jouer:hover, .tc-jouer:focus-visible { background:var(--jaune); color:var(--noir); }
.tc-nom { font:400 var(--t-m)/1.2 var(--f-piece); color:var(--jaune); }
.tc-heures { font:500 var(--t-xs)/1 var(--f-mono); font-variant-numeric:tabular-nums; }
.tc-nb { margin-left:auto; font:600 var(--t-s)/1 var(--f-texte); }
.lignes-p[hidden] { display:none; }
.lignes-p { list-style:none; margin:0; padding:0; border:2px solid var(--noir); border-top:0; background:var(--blanc); }
.ligne-p { display:grid; grid-template-columns:86px minmax(0,1fr) 42px auto; align-items:center; gap:10px; padding:6px 10px; border-top:1px solid var(--filet); border-left:6px solid transparent; cursor:pointer; }
.ligne-p:first-child { border-top:0; }
.ligne-p:hover { background:var(--jaune-pale); }
.ligne-p.choisie:hover { background:var(--bleu-pale); }
.ligne-p.en-cours:hover { background:var(--bleu); }
/* Ligne en cours de lecture = fond bleu du site, texte blanc, plus gras, filet noir à gauche (06-10).
   Ligne choisie (clic, passage de départ) = fond bleu pâle plein et barre bleue à gauche, texte noir : les deux se distinguent (retours d'Alice et de vadmaths, 06-10). Les deux : l'en-cours l'emporte, avec la barre. */
.ligne-p.choisie { background:var(--bleu-pale); color:var(--noir); border-left-color:var(--bleu); }
.ligne-p.en-cours { background:var(--bleu); color:var(--blanc-pur); border-left-color:var(--noir); font-weight:700; }
.ligne-p.en-cours.choisie { background:var(--bleu); color:var(--blanc-pur); border-left-color:var(--noir); } /* les deux : le bleu franc l'emporte, avec la barre */
.ligne-p.en-cours .pl-nom, .ligne-p.en-cours .pl-heure, .ligne-p.en-cours .pl-indice { color:var(--blanc-pur); }
.pl-heure { justify-self:start; padding:4px 6px; border:0; background:transparent; color:var(--bleu); font:600 var(--t-m)/1 var(--f-mono); font-variant-numeric:tabular-nums; cursor:pointer; text-decoration:underline; text-underline-offset:3px; }
.ligne-p.src-ia .pl-heure { text-decoration-style:dashed; }
.pl-qui { display:flex; flex-direction:column; align-items:flex-start; min-width:0; padding-right:6px; } /* le lien du nom n'a que la largeur du nom : le reste de la ligne lance le passage (essais du 06-10) */
.pl-nom { color:var(--noir); font:400 var(--t-l)/1.2 var(--f-nom); overflow-wrap:break-word; text-decoration:none; } /* 09-10 : coupe entre les mots, au milieu d'un mot seulement s'il est plus large que la colonne (« Wapale / k ») */
a.pl-nom:hover { text-decoration:underline; text-underline-offset:3px; }
.pl-indice { color:var(--gris-texte); font:600 var(--t-s)/1.3 var(--f-texte); overflow-wrap:anywhere; }
.pl-etiq { box-sizing:border-box; display:inline-grid; place-items:center; width:32px; height:22px; padding:0; border:2px solid var(--noir); border-radius:3px; font:700 var(--t-xs)/1 var(--f-texte); vertical-align:middle; } /* 10-10 : coche et « IA » de même largeur, colonnes alignées */
.pl-etiq .icone-coche { display:block; }
.pl-etiq.verifie { background:var(--noir); color:var(--blanc); }
.pl-etiq.ia { background:var(--blanc); color:var(--gris-texte); border-style:dashed; }
/* Coups de cœur (#73) : une case de même taille pour tous (visiteur : nombre ou vide ; compte : bouton), rien ne bouge d'un mode à l'autre. */
.pl-coeur { box-sizing:border-box; display:inline-flex; align-items:center; justify-content:center; width:100%; min-width:0; height:30px; padding:0 4px;
  border:2px solid transparent; border-radius:15px; background:transparent; color:var(--coeur); font:700 var(--t-s)/1 var(--f-texte); font-variant-numeric:tabular-nums; white-space:nowrap; }
button.pl-coeur { border-color:var(--filet); background:var(--blanc-pur); cursor:pointer; }
button.pl-coeur:hover { border-color:var(--coeur); }
button.pl-coeur[aria-pressed=true] { border-color:var(--coeur); background:var(--coeur); color:var(--blanc-pur); }
button.pl-coeur:focus-visible { outline:3px solid var(--bleu); outline-offset:2px; }
button.pl-coeur[aria-busy=true] { opacity:.6; cursor:progress; }
.ligne-p.en-cours span.pl-coeur { color:var(--blanc-pur); }
.ligne-p.en-cours button.pl-coeur[aria-pressed=true] { border-color:var(--blanc-pur); }
.ligne-p.en-cours button.pl-coeur:focus-visible { outline-color:var(--blanc-pur); }
@media (max-width:700px) { .pl-coeur { height:36px; border-radius:18px; } }

@media (min-width:1024px) {
  /* Ordinateur : seule la liste des passages défile, dans sa colonne (décision d'Alice du 06-10). La page garde la hauteur de l'écran
     (en-tête collé et rubalise du bas retranchés) : titre, parties voisines, lecteur et boutons restent à l'écran. Dessous, rien ne change. */
  body.sur-video .page-annuaire { padding-bottom:calc(var(--h-bandeau-bas, 0px) + 12px); }
  .page-video { grid-template-columns:minmax(0,3fr) minmax(0,2fr); grid-template-rows:auto minmax(0,1fr); gap:14px 24px;
    height:calc(100vh - var(--haut-entete, 0px) - var(--h-bandeau-bas, 0px) - 28px); height:calc(100dvh - var(--haut-entete, 0px) - var(--h-bandeau-bas, 0px) - 28px); }
  /* Titre au-dessus de la liste, lecteur en haut de la colonne de gauche : sur un portable (1366 x 700), les boutons
     sous le lecteur restent visibles dès l'arrivée (essais du 06-10 avec les données réelles). */
  .pv-titre { grid-column:2; grid-row:1; }
  .pv-gauche { position:static; grid-column:1; grid-row:1 / span 2; max-height:100%; padding-right:6px; overflow-y:auto; box-sizing:border-box; } /* défile seulement si le relevé (Édition) dépasse */
  .pv-gauche .lecteur-boite { max-width:var(--lecteur-max, none); } /* posée par suivre() selon la hauteur libre */
  .pv-liste-zone { grid-column:2; grid-row:2; align-self:stretch; min-height:0; }
  .pv-liste { position:relative; flex:1; min-height:0; overflow-y:auto; scrollbar-gutter:stable; overscroll-behavior:contain; scroll-padding:12px 0; padding:10px 6px 6px 2px; } /* 10 px en haut : la pastille « complet » déborde du coin de la première tête */
  .pv-liste .ligne-p, .pv-liste .tete-c, .pv-liste :is(button, a, input, select) { scroll-margin:12px 0; } /* le focus clavier ne colle pas au bord de la colonne */
}
@media (min-width:701px) and (max-width:1023px) {
  /* Lecteur collé : fond du mur et ombre, sinon la liste passe derrière ses boutons. */
  .pv-gauche { margin:0 -24px; padding:6px 24px 10px; background:var(--mur); box-shadow:0 4px 0 var(--noir); }
}
@media (max-width:1023px) {
  /* + scroll-padding-top (en-tête + 16 px) = en-tête + lecteur collé + 8 px. Le focus est sur les boutons de la ligne, pas sur la ligne : même marge pour eux. */
  .ligne-p, .tete-c, .ligne-p :is(button, a, input, select), .tete-c button { scroll-margin-top:calc(var(--h-sticky, 330px) - 8px); }
  .pv-titre h1 { font-size:var(--t-l); }
  /* Saisie « + Passage ici » (09-10, #80, choix d'Alice) : le bloc collé passait de 435 à 615 px sur 800, et le clavier du téléphone
     cachait le champ. Pendant la saisie, seuls le lecteur et le formulaire restent (l'heure figée est dans le formulaire). */
  .pv-gauche:has(#rl-form) :is(.pv-controles, .pv-calage, .pv-suivi) { display:none; }
}
@media (max-width:700px) {
  .pv-gauche { margin:0 -16px; padding:0 16px 8px; background:var(--mur, var(--blanc)); box-shadow:0 4px 0 var(--noir); }
  .ligne-p { grid-template-columns:78px minmax(0,1fr) 44px auto; padding:8px 8px; }
  .pv-controles .tab { flex:1 1 auto; }
  .pv-calage { gap:4px; }
  .pv-calage .tab { flex:1 1 calc(25% - 4px); min-width:0; padding:0; }
}

/* ---------- Relevé (Édition) ---------- */
.pv-releve:empty { display:none; }
.pv-releve { margin-top:10px; }
.rl-barre { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.rl-aide { color:var(--gris-texte); font:600 var(--t-s)/1.3 var(--f-texte); }
.rl-form { margin:8px 0 0; padding:8px; background:var(--jaune-pale); border:2px solid var(--noir); }
.rl-titre { margin:0 0 6px; color:var(--noir); font:600 var(--t-s)/1.3 var(--f-texte); }
.rl-rangee { display:flex; flex-wrap:wrap; align-items:center; gap:6px; }
.rl-champ { min-width:0; height:36px; padding:0 8px; border:2px solid var(--noir); border-radius:3px; background:var(--blanc); color:var(--noir); font:600 var(--t-m)/1 var(--f-texte); }
input.rl-champ { flex:1 1 140px; }
select.rl-champ { flex:0 1 170px; }
.rl-heure { flex:0 0 92px; font-family:var(--f-mono); font-variant-numeric:tabular-nums; }
.pl-actions, .pl-form { grid-column:1 / -1; cursor:default; }
.pl-actions { display:flex; flex-wrap:nowrap; align-items:center; gap:6px; padding-top:2px; } /* 10-10 : une seule rangée (demande d'Alice) */
.pl-actions .tab { flex:none; white-space:nowrap; }
.pl-actions .pl-icone { display:inline-grid; place-items:center; min-width:40px; padding:0 8px; }
.pl-actions svg { display:block; }
@media (max-width:400px) { /* petit téléphone : la rangée tient encore (boutons d'au moins 34 px) */
  .pl-actions { gap:4px; }
  .pl-actions .tab { min-width:34px; padding:0 7px; }
  .pl-actions .pl-icone, .pl-actions .pl-suppr { min-width:34px; padding:0 5px; }
}
.pl-form.rl-form { margin:0; }
.pl-form .rl-rangee + .rl-rangee, .rl-form .rl-rangee + .rl-rangee { margin-top:6px; }
.pl-suppr { margin-left:auto; display:inline-grid; place-items:center; min-width:40px; padding:0 8px; }
.pl-suppr .icone-corbeille { display:block; }
/* Lot 2A : ordre (↑ ↓), indice, poignée de glisser-déposer, ajout manuel. */
.pl-fleche { min-width:40px; font-weight:700; }
input.rl-champ.rl-heure { flex:0 0 96px; }
.rl-heures { display:inline-flex; align-items:center; gap:4px; } /* « début → fin » restent ensemble, comme les têtes de cypher */
.rl-fleche { color:var(--noir); font:700 var(--t-m)/1 var(--f-texte); }
.rl-indice[hidden], .dlg-ajout [hidden] { display:none; }
input.rl-indice { flex:1 1 220px; }
.pl-poignee { display:none; }
@media (hover:hover) and (pointer:fine) {
  /* Souris seulement : au doigt, le glisser du navigateur ne marche pas (les flèches et « Échanger avec… » le remplacent). */
  .ligne-p { grid-template-columns:18px 86px minmax(0,1fr) 42px auto; } /* colonne de la poignée gardée en Lecture (08-10) */
  .pl-poignee { display:block; color:var(--gris-texte); font:700 var(--t-l)/1 var(--f-texte); text-align:center; cursor:grab; user-select:none; }
  .pl-poignee:hover { color:var(--noir); }
  .ligne-p.en-cours .pl-poignee { color:var(--blanc-pur); }
}
@media (hover:hover) and (pointer:fine) and (max-width:700px) { .ligne-p { grid-template-columns:18px 78px minmax(0,1fr) 44px auto; } }
.ligne-p.glisse { opacity:.55; }
.ligne-p.cible { outline:3px dashed var(--bleu); outline-offset:-3px; }
dialog.dlg-ajout { width:calc(100% - 32px); max-width:520px; }
dialog.dlg-ajout form { display:flex; flex-direction:column; }
dialog.dlg-ajout .ap-inconnu { align-self:flex-start; margin-top:8px; }

/* Légende de la carte : une classe par palier (mêmes tokens --carte-N que la carte, définis dans style-d.css). */
.carte-pastille.c0 { background:var(--carte-0); } .carte-pastille.c1 { background:var(--carte-1); } .carte-pastille.c2 { background:var(--carte-2); }
.carte-pastille.c3 { background:var(--carte-3); } .carte-pastille.c4 { background:var(--carte-4); } .carte-pastille.c5 { background:var(--carte-5); }

/* ---------- Lettres en colonne à gauche (tablette et ordinateur, demande d'Alice du 05-10) ---------- */
@media (min-width:701px) {
  .annuaire-corps { display:grid; grid-template-columns:40px minmax(0,1fr); gap:14px; align-items:start; }
  .annuaire-liste { min-width:0; }
  .col-annuaire .annuaire-corps nav.az {
    position:sticky; top:calc(var(--haut-entete, 0px) + 16px); z-index:4; flex-direction:column; flex-wrap:nowrap; align-items:stretch;
    gap:1px; min-height:0; margin:0; padding:4px; border-radius:4px;
    /* La rubalise du bas (--h-bandeau-bas) est retranchée ; si 27 cibles de 24 px n'y tiennent pas, la colonne défile. */
    max-height:calc(100vh - var(--haut-entete, 0px) - 16px - var(--h-bandeau-bas, 0px) - 8px); max-height:calc(100dvh - var(--haut-entete, 0px) - 16px - var(--h-bandeau-bas, 0px) - 8px);
    overflow-y:auto; overscroll-behavior:contain; scrollbar-width:none; box-sizing:border-box;
  }
  .col-annuaire .annuaire-corps nav.az::-webkit-scrollbar { display:none; }
  /* Colonne discrète (retour de vadmaths, 06-10) : lettres grises sur fond transparent, plus de colonne noire.
     Quand la colonne défile (portable 1366 x 700), un dégradé bleu au bord dit qu'il reste des lettres au-dessus ou en dessous.
     Les deux premiers dégradés (couleur du mur, « local » : ils suivent le contenu) le recouvrent quand on est arrivé au bout. Derrière les lettres : rien n'est caché, rien ne bloque le clic. */
  .col-annuaire .annuaire-corps nav.az {
    background:
      linear-gradient(var(--mur), var(--mur)) top / 100% 20px no-repeat local,
      linear-gradient(var(--mur), var(--mur)) bottom / 100% 20px no-repeat local,
      linear-gradient(to bottom, var(--bleu), transparent) top / 100% 20px no-repeat scroll,
      linear-gradient(to top, var(--bleu), transparent) bottom / 100% 20px no-repeat scroll;
  }
  .col-annuaire .annuaire-corps nav.az a { background:transparent; color:var(--gris-lettre); }
  .col-annuaire .annuaire-corps nav.az a:hover { background:transparent; color:var(--noir); }
  .col-annuaire .annuaire-corps nav.az a.actif { background:var(--bleu); color:var(--blanc-pur); box-shadow:none; } /* lettre de la section à l'écran : bleu, blanc dessus 5,8:1 */
  .col-annuaire .annuaire-corps nav.az .vide { color:var(--gris-lettre-vide); } /* lettre sans artiste : plus claire que les actives (5,1:1), 3,7:1 sur le mur (#84) */
  .col-annuaire .annuaire-corps nav.az::before { display:none; }
  .col-annuaire .annuaire-corps nav.az a, .col-annuaire .annuaire-corps nav.az .vide {
    min-width:0; width:32px; flex:none; height:max(24px, min(26px, calc((100dvh - var(--haut-entete, 0px) - var(--h-bandeau-bas, 0px) - 16px - 8px - 8px - 26px) / 27))); padding:0; font-size:var(--t-s);
  }
}

/* ---------- Accessibilité et lisibilité (audit WCAG 2.2 AA du 06-10) ---------- */
/* Défilement : un élément qu'on atteint (Tab, ancre, lettre, scrollIntoView) ne passe ni sous l'en-tête collé ni sous la rubalise du pied d'écran. */
html { scroll-padding-top:calc(var(--haut-entete, 0px) + var(--h-az, 0px) + 16px); scroll-padding-bottom:calc(var(--h-bandeau-bas, 0px) + 8px); }

/* Lien d'évitement : premier élément focalisable, visible seulement au focus. */
.lien-evitement { position:fixed; top:8px; left:8px; z-index:60; padding:12px 18px; border:3px solid var(--blanc-pur); background:var(--noir); color:var(--blanc-pur);
  font:700 var(--t-m)/1.2 var(--f-texte); text-decoration:underline; text-underline-offset:3px; transform:translateY(-250%); }
.lien-evitement:focus { transform:none; }
html.annuaire #page:focus-visible:focus-visible { outline:none; box-shadow:none; } /* cible du lien d'évitement : pas de cadre autour de toute la page */

/* Anneau de focus à deux couleurs (noir + liseré blanc : au moins 3:1 sur le gris, le blanc et le bleu) ; sur fond sombre, l'inverse. */
html.annuaire { --anneau:var(--noir); --halo:var(--blanc-pur); scrollbar-gutter:stable; } /* place de la barre de défilement toujours réservée : la page ne se décale plus entre une liste longue et une courte */
html.annuaire :focus-visible:focus-visible { outline:3px solid var(--anneau); outline-offset:2px; box-shadow:0 0 0 5px var(--halo); }
.lien-evitement, nav.az, .tete-c, .carte-panneau, .ligne-p.en-cours { --anneau:var(--blanc-pur); --halo:var(--noir); }
/* Colonne des lettres : elle défile et rogne tout ce qui dépasse, l'anneau passe donc à l'intérieur de la pastille (blanche, lettre noire). */
html.annuaire .col-annuaire nav.az a:focus-visible { outline:3px solid var(--noir); outline-offset:-3px; box-shadow:none; background:var(--blanc-pur); color:var(--noir); }

/* Retours et liens de la page vidéo : noirs et soulignés (le bleu sur le gris du mur ne passe pas), cibles d'au moins 24 px. */
.retour-annuaire { display:inline-flex; align-items:center; min-height:32px; color:var(--noir); font:700 var(--t-m)/1 var(--f-texte); text-decoration:underline; text-underline-offset:3px; }
.retour-annuaire:hover, .pv-yt:hover { color:var(--bleu-tag); }
.pvs-fiche { display:inline-flex; align-items:center; min-height:32px; }
.lien-bouton { display:inline-flex; align-items:center; min-height:28px; }
.lien-bouton:disabled { color:var(--gris-texte); text-decoration:none; cursor:default; }

/* États désactivés lisibles (plus d'opacité) : trait pointillé et texte gris foncé, sur le mur gris comme sur le blanc. */
html.annuaire .tab:disabled, html.annuaire .tab:disabled:hover { opacity:1; border-style:dashed; border-color:var(--gris-texte); background:transparent; color:var(--gris-texte); box-shadow:none; cursor:default; }
html.annuaire .btn:disabled { opacity:1; background:var(--gris-texte); color:var(--blanc-pur); cursor:default; }
.carte-leaflet .leaflet-bar a.leaflet-disabled { background:var(--carte-trame); color:var(--carte-doux); cursor:default; }

/* Messages : une erreur reste jusqu'à « Fermer ». */
#toast.err { pointer-events:auto; }
#toast-fermer { margin-left:14px; min-height:32px; padding:0 12px; vertical-align:middle; }
#toast-fermer[hidden] { display:none; }

/* Panneau de la carte : « Tous les départements » (équivalent clavier de la carte). */
.carte-deps summary { min-height:28px; display:flex; align-items:center; color:var(--carte-texte); font:700 var(--t-m)/1.2 var(--f-texte); cursor:pointer; }
.carte-liste-deps { list-style:none; margin:4px 0 0; padding:0; display:flex; flex-direction:column; gap:2px; }
.carte-liste-deps .lien-bouton[aria-pressed=true] { font-weight:800; text-decoration:none; }
.carte-liste-deps .lien-bouton[aria-pressed=true]::after { content:" ✓"; }
h1.visuellement-masque { font:700 var(--t-m)/1 var(--f-texte); } /* titre de page masqué : taille de l'échelle (sinon celle du navigateur) */

/* ---------- Lot 2B : fusions, vidéos (Édition) ---------- */
.tc-fusion, .tc-modifier { flex:none; min-height:26px; padding:0 8px; border:2px solid var(--jaune); border-radius:2px; background:transparent; color:var(--jaune); font:700 var(--t-xs)/1 var(--f-texte); white-space:nowrap; cursor:pointer; }
.tc-fusion:hover, .tc-fusion:focus-visible, .tc-modifier:hover, .tc-modifier:focus-visible { background:var(--jaune); color:var(--noir); }
/* Fiche de cypher (#67) : ligne d'infos sous la tête (toujours visible), note seulement déplié */
/* Bandeau des infos du cypher (09-10, retour de vadmaths, choix d'Alice) : collé sous la tête, mêmes bordures que la liste. */
.groupe-c .tc-bande { padding:6px 10px; background:var(--jaune-pale); border:2px solid var(--noir); border-top:0; }
.groupe-c .tc-bande:not(:has(> :not([hidden]))) { display:none; } /* cypher replié avec une note seule : pas de bande vide */
.groupe-c .tc-infos { margin:0; color:var(--noir); font:600 var(--t-s)/1.3 var(--f-texte); overflow-wrap:break-word; }
.groupe-c .tc-note { margin:2px 0 0; color:var(--gris-texte); font:italic 500 var(--t-s)/1.3 var(--f-texte); overflow-wrap:break-word; }
.groupe-c .tc-infos + .tc-note { margin-top:2px; }
.groupe-c .tc-note[hidden] { display:none; }
.fa-infos-cypher { display:block; color:var(--gris-texte); }
dialog.dlg-geste .dlg-aide { margin:8px 0 0; color:var(--noir); font:500 var(--t-s)/1.45 var(--f-texte); }
dialog .pied .pied-note { color:var(--gris-texte); font:600 var(--t-xs)/1.4 var(--f-texte); }

/* ---------- Lot 3A : comptes ---------- */
dialog.dlg-geste .dlg-note { margin-top:16px; }
.menu-profil-sep { margin:4px 6px; border-top:1px dashed var(--filet); }
.menu-profil .menu-profil-case { white-space:normal; }

/* ---------- Lot 3B : Historique (page #historique) et lien des messages ---------- */
.page-historique { max-width:900px; }
.histo-titre { margin:4px 0 6px; color:var(--noir); font:400 var(--t-xl)/1.1 var(--f-piece); }
.histo-aide { margin:0 0 12px; color:var(--noir); font:600 var(--t-s)/1.4 var(--f-texte); }
.histo-aide:empty { display:none; }
.histo-filtres { display:flex; flex-wrap:wrap; align-items:flex-end; gap:10px 16px; margin:0 0 16px; }
.histo-filtres .filtre { flex-direction:column; align-items:stretch; gap:3px; }
.histo-filtres select.menu-filtre { min-width:150px; max-width:260px; }
.histo-effacer { min-height:40px; font:700 var(--t-s)/1 var(--f-texte); color:var(--noir); text-underline-offset:3px; }
.histo-effacer[hidden] { display:none; }
.histo-liste { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.histo-geste { padding:12px 14px; background:var(--blanc-pur); border:2px solid var(--noir); border-radius:3px; box-shadow:3px 3px 0 var(--ombre-douce); }
.histo-geste:focus-visible { outline-offset:3px; }
.histo-phrase { margin:0; color:var(--noir); font:500 var(--t-m)/1.45 var(--f-texte); overflow-wrap:anywhere; }
.histo-etiquette { display:inline-block; margin-right:4px; padding:2px 7px; border-radius:2px; font:800 var(--t-xs)/1.3 var(--f-texte); letter-spacing:.06em; text-transform:uppercase; vertical-align:1px; }
.histo-etiquette.ajout { background:var(--bleu); color:var(--blanc-pur); }
.histo-etiquette.modification { background:var(--blanc-pur); color:var(--noir); box-shadow:inset 0 0 0 1.5px var(--noir); }
.histo-etiquette.suppression { background:transparent; color:var(--noir); border:1.5px dashed var(--noir); padding:0.5px 5.5px; }
.histo-etiquette.restauration { background:var(--jaune); color:var(--noir); }
.histo-etiquette.annulation { background:var(--filet-clair); color:var(--noir); }
.histo-pseudo { padding:0; border:0; background:none; color:var(--noir); font:800 var(--t-m)/1.45 var(--f-texte); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px; cursor:pointer; }
.histo-pseudo:hover { color:var(--bleu); }
.histo-pseudo.sans-auteur { text-decoration:none; cursor:default; color:var(--gris-texte); }
.histo-meta { display:flex; flex-wrap:wrap; align-items:center; gap:4px 6px; margin:6px 0 0; color:var(--gris-texte); font:600 var(--t-s)/1.4 var(--f-texte); }
.histo-meta a { display:inline-flex; align-items:center; min-height:28px; color:var(--noir); text-decoration:underline; text-underline-offset:3px; }
.histo-meta a:hover { color:var(--bleu); }
.histo-annuler { min-height:32px; margin-left:auto; padding:0 12px; }
.histo-bloque { margin-left:auto; color:var(--gris-texte); font:600 var(--t-xs)/1.3 var(--f-texte); }
.histo-pied { display:flex; flex-direction:column; align-items:center; gap:10px; margin:16px 0 0; }
.histo-pied .empty { text-align:center; }
.histo-plus { min-width:160px; }
@media (max-width:700px) {
  .histo-filtres { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
  .histo-filtres select.menu-filtre { width:100%; min-width:0; max-width:none; }
  .histo-filtres .filtre:first-child { grid-column:1 / -1; }
  .histo-effacer { justify-self:start; }
  .histo-geste { padding:10px 12px; }
  .histo-annuler, .histo-bloque { margin-left:0; flex-basis:100%; }
  .histo-annuler { flex-basis:auto; min-height:40px; }
}
/* Message « annulable depuis l'historique » : lien vers la page Historique de l'annuaire ; il se clique, donc il reçoit la souris. */
#toast.avec-lien { pointer-events:auto; }
.toast-lien { margin-left:12px; color:var(--jaune); font-weight:800; text-decoration:underline; text-underline-offset:3px; white-space:nowrap; }
.toast-lien:hover { color:var(--blanc-pur); }
#toast .toast-lien:focus-visible { outline-color:var(--blanc-pur); box-shadow:0 0 0 5px var(--noir); }

/* ---------- Lot 3C : Contributeurs, Émissions, FAQ, Merci (pages de l'annuaire) ---------- */
.page-compte { max-width:900px; }
.page-titre { width:fit-content; max-width:100%; margin:4px 0 10px; color:var(--noir); font:400 var(--t-xl)/1.1 var(--f-piece); }
.page-titre:focus-visible { outline-offset:4px; }
.page-aide { margin:0 0 14px; max-width:70ch; color:var(--noir); font:600 var(--t-s)/1.45 var(--f-texte); }
.page-aide a { color:var(--noir); font-weight:800; text-decoration:underline; text-underline-offset:3px; }
.page-aide a:hover { color:var(--bleu); }
.page-tete { display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:space-between; gap:8px 20px; margin:0 0 16px; }
.page-tete .page-aide { flex:1 1 360px; margin:0; }
.page-tete .btn { flex:none; min-height:40px; }
.page-refus { display:flex; flex-direction:column; align-items:flex-start; gap:12px; text-align:left; }
.page-refus p { margin:0; }
/* Cartes des comptes et des émissions (même habit que l'Historique). */
.k-liste, .em-liste { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 380px), 1fr)); gap:12px; }
.k-carte, .em-carte { display:flex; flex-direction:column; gap:8px; padding:12px 14px; background:var(--blanc-pur); border:2px solid var(--noir); border-radius:3px; box-shadow:3px 3px 0 var(--ombre-douce); min-width:0; }
.k-carte.k-ferme { border-style:dashed; }
.k-pseudo, .em-nom { display:flex; align-items:center; gap:8px; margin:0; color:var(--noir); font:800 var(--t-l)/1.2 var(--f-texte); overflow-wrap:anywhere; }
.k-toi { color:var(--gris-texte); font:600 var(--t-m)/1.2 var(--f-texte); }
.k-infos { display:flex; flex-direction:column; gap:4px; margin:0; }
.k-infos > div { display:flex; flex-wrap:wrap; align-items:center; gap:2px 10px; min-height:28px; }
.k-infos dt { flex:0 0 96px; color:var(--gris-texte); font:800 var(--t-xs)/1.2 var(--f-texte); letter-spacing:.08em; text-transform:uppercase; }
.k-infos dd { flex:1 1 160px; min-width:0; margin:0; color:var(--noir); font:600 var(--t-m)/1.35 var(--f-texte); overflow-wrap:anywhere; }
.k-infos .k-attention { font-weight:800; }
.k-role { height:36px; min-width:170px; }
.k-note { margin:0; color:var(--gris-texte); font:600 var(--t-s)/1.4 var(--f-texte); }
.k-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:auto; padding-top:4px; }
.k-actions .tab { min-height:36px; padding:0 12px; }
.k-actions a.tab { display:inline-flex; align-items:center; text-decoration:none; }
.k-couper { border-style:dashed; }
.em-pastille { flex:none; width:22px; height:22px; border:2px solid var(--noir); border-radius:3px; background:var(--c, var(--blanc)); }
.em-slug, .em-couleur { font-family:var(--f-mono); font-size:var(--t-s); }
.em-a-venir { color:var(--gris-texte); font-weight:800; }
.em-couleurs { display:flex; align-items:center; gap:10px; }
.em-couleurs .em-couleur-texte { flex:1; min-width:0; font-family:var(--f-mono); }
.em-couleurs input[type=color] { flex:none; width:52px; height:40px; padding:2px; border:2px solid var(--noir); border-radius:3px; background:var(--blanc); cursor:pointer; }
dialog.dlg-geste .pied p.pied-note { margin:0; max-width:240px; }
/* Lien d'activation : affiché une fois, sélectionnable et copiable. */
.lien-activation { box-sizing:border-box; width:100%; min-height:72px; padding:8px; border:2px solid var(--noir); border-radius:3px; background:var(--blanc); color:var(--noir); font:500 var(--t-s)/1.4 var(--f-mono); word-break:break-all; resize:vertical; }
dialog.dlg-lien .pied { flex-wrap:wrap; align-items:center; }
.lien-copie { color:var(--noir); font:700 var(--t-s)/1.2 var(--f-texte); }
.lien-copie:empty { display:none; }
/* FAQ et Merci : habit de style-d.css (.faq, .merci) ; titres de section en h2 sous le h1 de la page. */
.page-faq .faq-famille > summary { min-height:28px; }
.page-faq .faq-famille dd a { color:var(--noir); text-decoration:underline; text-underline-offset:3px; }
.page-merci .merci-bloc h2 { margin:0 0 10px; color:var(--noir); font:400 var(--t-l)/1.2 var(--f-piece); }
.page-merci .merci-note { margin:12px 0 0; color:var(--gris-texte); font:600 var(--t-s)/1.4 var(--f-texte); }
.page-merci .merci-aussi { margin:0; padding-left:20px; display:flex; flex-direction:column; gap:8px; color:var(--noir); font:500 var(--t-m)/1.45 var(--f-texte); }
.page-merci .merci-aussi a { color:var(--noir); text-decoration:underline; text-underline-offset:3px; }
.page-merci .merci-aussi a:hover { color:var(--bleu); }
@media (max-width:700px) {
  .page-titre { font-size:var(--t-l); }
  .page-tete .btn { width:100%; }
  .k-carte, .em-carte { padding:10px 12px; }
  .k-actions .tab { min-height:40px; flex:1 1 auto; justify-content:center; }
  .k-infos dt { flex-basis:84px; }
  .k-role { min-width:0; width:100%; height:40px; }
  .page-merci .merci-bloc { padding:12px 14px; }
  .page-merci .merci-depuis { margin-left:0; }
}
/* Page À propos (a-propos.html, statique, 08-10-2026) : blocs de la page Merci, texte courant lisible. */
.page-apropos .merci-bloc h2 { margin:0 0 10px; color:var(--noir); font:400 var(--t-l)/1.2 var(--f-piece); }
.page-apropos .merci-bloc p { margin:0 0 10px; color:var(--noir); font:500 var(--t-m)/1.55 var(--f-texte); }
.page-apropos .merci-bloc p:last-child { margin-bottom:0; }
.page-apropos .merci-bloc a { color:var(--noir); text-decoration:underline; text-underline-offset:3px; overflow-wrap:anywhere; }
.page-apropos .merci-bloc a:hover { color:var(--bleu); }

/* Fiche de cypher (#67) : ✎ compact (même largeur que le ▶) pour que la tête garde sa hauteur en Édition à 1440 px */
.tc-modifier { min-width:28px; padding:0; }
.tete-c:has(.tc-modifier) { gap:6px; padding-inline:8px; }
.tete-c:has(.tc-modifier) .tc-bascule { column-gap:6px; }
/* Outils du mode Édition (08-10, demande d'Alice) : en Lecture ils gardent leur place, invisibles (ni clic, ni clavier, ni lecteur d'écran) ;
   passer d'un mode à l'autre ne décale rien sur la page d'une vidéo. */
.place-reservee { visibility:hidden; }
.tc-reserve { display:contents; }

/* Cypher complet (#65) : pastille dans la tête noire (noir sur jaune, 13:1), ligne de la carte Vidéos, case de la fenêtre ✎. */
.tc-complet { position:absolute; top:-10px; left:-2px; z-index:2; display:grid; place-items:center; width:20px; height:20px; box-sizing:border-box; border:2px solid var(--noir); border-radius:50%; background:var(--jaune); color:var(--noir); font:700 var(--t-xs)/1 var(--f-texte); box-shadow:2px 2px 0 var(--ombre-sticker); }
.tete-c { position:relative; }
.cv-complets { color:var(--gris-texte); font:600 var(--t-s)/1.3 var(--f-texte); }
dialog .cf-pastilles { display:flex; flex-wrap:wrap; gap:6px; margin:4px 0 6px; padding:0; list-style:none; }
dialog .cf-pastille { display:inline-flex; align-items:center; gap:4px; padding:2px 4px 2px 10px; border:2px solid var(--noir); border-radius:3px; background:var(--jaune-pale); font:600 var(--t-s)/1.3 var(--f-texte); }
dialog .cf-pastille button { min-width:28px; min-height:28px; border:0; background:none; font:700 var(--t-m)/1 var(--f-texte); cursor:pointer; }
dialog .cf-complet { display:flex; align-items:center; gap:10px; margin-top:16px; }
dialog .cf-complet input { flex:none; width:22px; height:22px; margin:0; padding:0; accent-color:var(--bleu); }
dialog .cf-complet label { margin:0; color:var(--noir); font:600 var(--t-s)/1.3 var(--f-texte); letter-spacing:0; text-transform:none; }

/* Têtes de cypher sur une seule ligne dès 768 px (08-10) : les boutons réservés (invisibles en Lecture) ne doivent plus pousser « n artistes » à la ligne ;
   le nom ne rétrécit jamais ; seule la plage d'heures peut céder en dernier recours. Mobile : retour à la ligne conservé. */
@media (min-width:768px) {
  .tc-bascule { flex-wrap:nowrap; }
  .tc-nom { flex:none; white-space:nowrap; } /* le nom ne rétrécit jamais */
  .tc-nb { flex:none; white-space:nowrap; }
  .tc-heures { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } /* seule la plage d'heures cède, en dernier recours */
  .tete-c:has(.tc-modifier) .tc-fusion { padding:0 6px; } /* boutons de tête un peu plus serrés : « 2 artistes » tient sans rien rogner */
}
/* Sections « Aux platines » / « À l'animation » : même allure que « Partage le mic avec » (marges de la fiche, étiquettes sans puce). */
.fa-roles { padding:0 18px 18px; }
.fa-roles h3 { margin:0 0 10px; color:var(--noir); font:400 var(--t-l)/1.1 var(--f-main); transform:rotate(-1.5deg); transform-origin:left; }
.fa-roles ul { list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px; }
.fa-roles a { display:inline-flex; align-items:baseline; padding:6px 12px; border:2px solid var(--noir); border-radius:3px; background:var(--blanc); color:var(--noir); font:700 var(--t-s)/1.2 var(--f-texte); text-decoration:none; }
.fa-roles a:hover { background:var(--jaune); }
.tc-infos .lien-fiche, .fa-infos-cypher .lien-fiche { color:inherit; text-decoration:underline; text-underline-offset:2px; }