/* Direction graphique D « Hall of fame » : page d'essai essai-d.html (29-09-2026, #45).
   Surcouche de style.css, chargée APRÈS lui : elle ne touche que l'apparence, jamais
   la structure produite par app.js et lecteur.js. Aucun attribut style dans la page
   (CSP) : tout passe par des sélecteurs sur le DOM existant et des pseudo-éléments.
   Règles tenues :
   - la matière du mur (rouleau, grain, buff, overspray) reste dans le fond et les
     marges, jamais sous un nom ou un timecode (toujours sur blanc d'étiquette) ;
   - Lecture et Édition gardent les mêmes colonnes et les mêmes hauteurs de ligne ;
   - ne jamais poser display sur un élément que le script masque par [hidden]
     (boutons, .chips, .mode, #filtres) : la règle l'emporterait sur l'attribut. */

:root {
  --mur:#a7abaf;
  --buff-1:#9da2a7; --buff-2:#b2b6b9; --buff-3:#999ea3; --buff-4:#aeb2b5;
  --noir:#111214;
  --blanc:#f5f7f8;
  --blanc-pur:#ffffff;
  --gris-texte:#3b4046;
  --gris-num:#5a6067;
  --filet:#b9bfc4;
  --filet-clair:#dde1e4;
  --entete-tableau:#e3e6e8;
  --chrome:#c7ccd1;
  --bleu:#1f4fff;
  --bleu-fonce:#1638c9;
  --bleu-tag:#10249a;
  --jaune:#ffd23f;
  --jaune-pale:#fff6cf;
  /* Couleur de l'émission affichée (socle multi-émissions, 01-10) : posée par app.js
     (habillerEmission), jaune de la charte par défaut. --emission-texte : noir ou blanc, selon le contraste. */
  --emission:var(--jaune);
  --emission-texte:var(--noir);
  /* Couleur de l'émission sur fond sombre (carte, survol des pastilles) : blanc si elle est sombre. */
  --emission-nuit:var(--jaune);
  --ombre-douce:rgba(17,18,20,.3);
  --f-piece:'Bungee', 'Arial Black', Impact, sans-serif;
  --f-nom:'Permanent Marker', 'Comic Sans MS', cursive;
  /* Sedgwick retirée le 06-10-2026 (Alice : pas assez lisible) : --f-main garde son nom pour les anciens usages mais pointe sur Permanent Marker. */
  --f-main:var(--f-nom);
  /* Échelle de tailles de la charte (docs/charte-design.md) : aucune autre taille. */
  --t-xs:12px; --t-s:14px; --t-m:16px; --t-l:20px; --t-xl:26px; --t-xxl:36px;
  --f-texte:'Barlow Semi Condensed', 'Arial Narrow', system-ui, sans-serif;
  --f-mono:'JetBrains Mono', ui-monospace, Consolas, monospace;
  --largeur:1280px;
  /* Variables de style.css réorientées : tout ce qui n'est pas repris plus bas
     tombe ainsi dans la nouvelle palette (texte noir, fonds blancs, accent bleu). */
  --bg:#ffffff; --card:#f5f7f8; --line:#b9bfc4; --txt:#111214; --mut:#3b4046; --red:#1f4fff; --ok:#1f4fff;
}

/* ---------- Mur ---------- */
body {
  color:var(--noir);
  font:500 var(--t-m)/1.45 var(--f-texte);
  background-color:var(--mur);
  background-image:
    repeating-linear-gradient(90deg, rgba(255,255,255,.06) 0 4px, rgba(255,255,255,0) 4px 176px, rgba(0,0,0,.04) 176px 182px, rgba(0,0,0,0) 182px 352px),
    repeating-linear-gradient(0deg, rgba(0,0,0,.025) 0 1px, rgba(0,0,0,0) 1px 4px),
    radial-gradient(rgba(0,0,0,.07) 1px, rgba(0,0,0,0) 1.6px);
  background-size:auto, auto, 9px 9px;
}
/* Buff (aplats repeints) et overspray : dans les coins et les marges, derrière tout. */
body::before {
  content:"";
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(closest-side, rgba(31,79,255,.26), rgba(31,79,255,0)) left -150px top -120px / 420px 360px no-repeat,
    radial-gradient(closest-side, rgba(255,210,63,.42), rgba(255,210,63,0)) right -130px top -110px / 300px 260px no-repeat,
    radial-gradient(closest-side, rgba(31,79,255,.2), rgba(31,79,255,0)) right -110px bottom -100px / 280px 240px no-repeat,
    linear-gradient(var(--buff-2), var(--buff-2)) left 0 bottom 0 / 22vw 26vh no-repeat,
    linear-gradient(var(--buff-3), var(--buff-3)) right 0 bottom 0 / 26vw 20vh no-repeat,
    linear-gradient(var(--buff-4), var(--buff-4)) right 0 top 38vh / 9vw 14vh no-repeat;
}
a { color:var(--bleu); }
a:hover { color:var(--bleu-tag); }
:focus-visible { outline:3px solid var(--bleu); outline-offset:2px; }

/* Bandeau de la page d'essai, sous l'en-tête. */
.bandeau-essai { margin:0; padding:7px 16px; background:var(--noir); color:var(--blanc); font:600 var(--t-s)/1.35 var(--f-texte); text-align:center; }
.bandeau-essai a { color:var(--jaune); text-underline-offset:3px; }
.bandeau-essai a:hover { color:var(--blanc-pur); }

/* ---------- En-tête ---------- */
/* Plus collé en haut : la pièce INDEX est trop haute pour rester à l'écran. */
.entete { position:relative; z-index:3; background:transparent; -webkit-backdrop-filter:none; backdrop-filter:none; border-bottom:0; }
.entete-in {
  max-width:var(--largeur); padding:22px 24px 14px;
  display:grid; grid-template-columns:440px auto minmax(0,1fr);
  grid-template-areas:"logo officiel outils" "logo menu menu" "logo filtres filtres";
  column-gap:24px; row-gap:10px; align-items:center;
}
.logo { grid-area:logo; align-self:start; justify-self:start; display:flex; flex-direction:column; flex-wrap:nowrap; align-items:flex-start; gap:0; color:var(--noir); line-height:1; }
.logo:hover { color:var(--noir); }
.logo-piece { display:block; width:360px; height:auto; aspect-ratio:460 / 150; margin-left:-8px; overflow:visible; }
.logo-trait { stroke:var(--emission); } /* couleur de l'émission affichée (jaune sur l'accueil), maquette B du 05-10 */
/* Logo (étape 3) : la pièce est un lien vers l'accueil ; le sous-titre est un bouton qui ouvre le menu des émissions. */
.logo { position:relative; }
.logo-lien { display:block; color:inherit; line-height:1; }
.logo-lien:focus-visible { outline:3px solid var(--bleu); outline-offset:3px; }
button.logo-sous { appearance:none; margin:0; padding-top:0; padding-left:0; padding-right:0; border:0; border-radius:0; text-align:left; cursor:pointer; }
button.logo-sous:not(:disabled)::after { content:"▾"; margin-left:6px; font:700 var(--t-s)/1 var(--f-texte); }
button.logo-sous:disabled { color:var(--noir); cursor:default; opacity:1; }
/* Petit téléphone : sans la flèche, « non officiel » tient sur la même ligne, comme avant. */
@media (max-width:400px) { button.logo-sous:not(:disabled)::after { content:none; } }
button.logo-sous:focus-visible { outline:3px solid var(--bleu); outline-offset:3px; }
/* Les onglets appartiennent à une émission : absents de l'accueil et des pages communes ouvertes depuis l'accueil. */
.logo-bas { display:flex; flex-wrap:wrap; align-items:flex-end; gap:4px 14px; margin-top:-4px; padding-left:8px; }
.logo-sous {
  font:400 var(--t-xl)/1.1 var(--f-main); color:var(--noir); white-space:nowrap; padding-bottom:9px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 12' preserveAspectRatio='none'%3E%3Cpath d='M3 8C80 3 170 2 326 6' fill='none' stroke='%231f4fff' stroke-width='3' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") left bottom / 100% 10px no-repeat;
}

.officiel { color:var(--noir); font:700 var(--t-s)/1 var(--f-texte); text-decoration:underline; text-underline-offset:3px; }
.officiel:hover { color:var(--bleu-tag); }
.officiel svg { width:14px; height:14px; stroke-width:2.4; }

.outils { grid-area:outils; margin-left:0; gap:10px; min-width:0; }
.entete input[type=search], .entete input[type=search]:focus {
  flex:1 1 160px; width:auto; min-width:0; height:48px; 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); transition:none;
}
.entete input[type=search]::placeholder { color:var(--gris-num); opacity:1; }
.entete input[type=search]:focus { outline:3px solid var(--bleu); outline-offset:2px; border-color:var(--noir); }

/* Sélecteur Lecture / Édition : le mode actif se lit au plein (noir en Lecture, jaune en Édition) et au mot. */
.entete .mode { border:2px solid var(--noir); border-radius:3px; background:var(--blanc); flex:none; }
.entete .mode button { height:40px; padding:0 12px; gap:6px; background:var(--blanc); color:var(--noir); font:700 var(--t-s)/1 var(--f-texte); letter-spacing:.02em; text-transform:none; }
.entete .mode button + button { border-left:2px solid var(--noir); }
.entete .mode button[aria-pressed=true] { background:var(--noir); color:var(--blanc); }
.entete .mode button[data-mode=edition][aria-pressed=true] { background:var(--jaune); color:var(--noir); }
.entete .mode button:not([aria-pressed=true]):hover { background:var(--jaune-pale); }
.entete .mode button:focus-visible { outline:3px solid var(--bleu); outline-offset:-5px; }
.entete .mode svg { width:16px; height:16px; }


.btn-profil { width:42px; height:42px; border:2px solid var(--noir); border-radius:3px; background:var(--blanc); color:var(--noir); box-shadow:3px 3px 0 var(--ombre-douce); }
.btn-profil:hover, .btn-profil[aria-expanded=true] { border-color:var(--noir); background:var(--jaune); color:var(--noir); }
.btn-profil:focus-visible { outline:3px solid var(--bleu); outline-offset:2px; }
.btn-profil svg { width:20px; height:20px; }
.menu-profil { top:calc(100% + 8px); min-width:240px; padding:6px; background:var(--blanc); border:3px solid var(--noir); border-radius:4px; box-shadow:5px 5px 0 var(--noir); }
.menu-profil-tete { padding:6px 10px 10px; margin-bottom:4px; border-bottom:1px dashed var(--filet); }
.menu-profil-tete strong { font:400 var(--t-xl)/1.1 var(--f-nom); color:var(--noir); overflow-wrap:anywhere; }
.menu-profil-tete span { color:var(--gris-texte); font:800 var(--t-xs)/1 var(--f-texte); letter-spacing:.1em; text-transform:uppercase; }
.menu-profil button { padding:10px; border-radius:2px; color:var(--noir); font:600 var(--t-m)/1.2 var(--f-texte); }
.menu-profil button:hover, .menu-profil button:focus-visible { background:var(--jaune); outline:none; }

/* Onglets de vue : plaques noires, l'actif est un sticker jaune penché. */
.menu { justify-self:stretch; gap:10px; padding:4px 10px 8px 2px; }
.menu .tab {
  height:46px; min-height:0; padding:0 18px; border:3px solid var(--noir); border-radius:0;
  background:var(--noir); color:var(--blanc); font:400 var(--t-s)/1 var(--f-piece); letter-spacing:0; text-transform:none;
}
.menu .tab:hover { background:var(--bleu-fonce); color:var(--blanc-pur); }
.menu .tab[aria-pressed=true] { background:var(--emission); color:var(--emission-texte); border-color:var(--noir); box-shadow:4px 4px 0 var(--noir); transform:rotate(-1.5deg); }
.menu .tab:focus-visible { outline:3px solid var(--bleu); outline-offset:2px; }
.actions .btn { padding:0 14px; font-size:var(--t-m); }

/* Filtres : étiquettes et menus cernés de noir sur blanc. */
.filtres select, .filtres-ligne select { height:38px; padding:0 6px; border:2px solid var(--noir); border-radius:3px; background:var(--blanc); color:var(--noir); font:600 var(--t-m) var(--f-texte); }
.filtres select:focus { outline:3px solid var(--bleu); outline-offset:1px; border-color:var(--noir); }
.filtres label { color:var(--noir); font:800 var(--t-s)/1 var(--f-texte); }

/* ---------- Corps de page ---------- */
.wrap { max-width:var(--largeur); padding:20px 24px 64px; }
.empty { color:var(--noir); font:600 var(--t-m)/1.4 var(--f-texte); }
footer {
  margin-top:44px; padding:12px 16px; background:var(--blanc); border:2px solid var(--noir); border-radius:6px;
  box-shadow:3px 3px 0 var(--ombre-douce); color:var(--gris-texte); font:500 var(--t-s)/1.45 var(--f-texte); transform:rotate(-.4deg);
}
footer a { color:var(--noir); }
.qui { color:var(--gris-texte); font:500 var(--t-s)/1.4 var(--f-texte); }
.qui a, .qui button { color:var(--noir); }
.qui a:hover, .qui button:hover { color:var(--bleu-tag); }
.retour { color:var(--noir); font:700 var(--t-m)/1 var(--f-texte); text-decoration:underline; text-underline-offset:3px; }
.retour:hover { color:var(--bleu-tag); }

/* ---------- Boutons ---------- */
.btn { min-height:40px; padding:0 14px; border:2px solid var(--noir); border-radius:3px; background:var(--noir); color:var(--blanc); font:700 var(--t-m)/1.1 var(--f-texte); letter-spacing:.02em; box-shadow:3px 3px 0 var(--ombre-douce); cursor:pointer; }
.btn:hover { background:var(--bleu); color:var(--blanc-pur); }
.btn:disabled { opacity:.45; cursor:default; background:var(--noir); }
.tab { min-height:40px; padding:0 14px; border:2px solid var(--noir); border-radius:3px; background:var(--blanc); color:var(--noir); font:700 var(--t-m)/1.1 var(--f-texte); cursor:pointer; }
.tab:hover { background:var(--jaune-pale); }
.tab:disabled:hover { background:var(--blanc); }

/* ---------- Statuts ---------- */
/* « Vérifié » : étiquette noire pleine + couronne + mot. « IA » : cadre en pointillés + mot.
   Forme, pictogramme et texte diffèrent : jamais la couleur seule. */

/* ---------- Vue Par artiste : barre de lettres, marqueurs, slaps ---------- */
#res:has(> .card[data-rappeur]) { display:grid; grid-template-columns:repeat(auto-fill, minmax(290px, 1fr)); gap:18px 20px; align-items:start; }
#res:has(> .card[data-rappeur]) > :not(.card) { grid-column:1 / -1; }

nav.az { display:flex; flex-wrap:wrap; align-items:center; gap:2px; min-height:42px; margin:0 0 4px; padding:6px 10px; background:var(--noir); border-radius:4px; }
nav.az::before { content:"Lettre"; margin-right:10px; color:var(--chrome); font:800 var(--t-xs)/1 var(--f-texte); letter-spacing:.12em; text-transform:uppercase; }
nav.az a { display:inline-flex; align-items:center; justify-content:center; min-width:34px; height:30px; padding:0 4px; border-radius:3px; color:var(--blanc); font:400 var(--t-s)/1 var(--f-piece); text-decoration:none; }
nav.az a:hover, nav.az a:focus-visible { background:var(--emission); color:var(--emission-texte); }
nav.az a:focus-visible { outline:2px solid var(--blanc); outline-offset:1px; }
/* Lettre de la section affichée : jaune, soulignée au marqueur (pas seulement la couleur). */
nav.az a.actif { background:var(--emission); color:var(--emission-texte); box-shadow:inset 0 -3px 0 var(--noir); }


/* Slap « HELLO my name is » : bandeau bleu (::before), blaze au marqueur, données sur blanc,
   liseré bleu en bas (::after). Inclinaison de ±1.2° au plus. */
.card[data-rappeur] {
  min-width:0; margin:0; padding:0 0 9px; overflow:hidden;
  background:var(--blanc); border:2px solid var(--noir); border-radius:9px; box-shadow:3px 3px 0 var(--ombre-douce);
}
.card[data-rappeur]::before {
  content:"my name is"; display:block; height:16px; padding:0 9px;
  background:var(--bleu); color:var(--blanc-pur); font:700 var(--t-xs)/16px var(--f-texte); letter-spacing:.16em; text-transform:uppercase;
}
.card[data-rappeur]::after { content:""; position:absolute; left:0; right:0; bottom:0; height:5px; background:var(--bleu); }
.card[data-rappeur]:nth-child(4n+1) { transform:rotate(-1.2deg); }
.card[data-rappeur]:nth-child(4n+2) { transform:rotate(.8deg); }
.card[data-rappeur]:nth-child(4n+3) { transform:rotate(-.5deg); }
.card[data-rappeur]:nth-child(4n) { transform:rotate(1.1deg); }
.card[data-rappeur] > h2 { margin:0; padding:3px 10px 5px; font:inherit; }
.card[data-rappeur] > h2 > .lien-fiche {
  display:block; padding-right:30px; /* place du crayon d'Édition, réservée dans les deux modes */
  border-bottom:0; color:var(--noir); font:400 var(--t-l)/32px var(--f-nom); text-decoration:none;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.card[data-rappeur] > h2 > .lien-fiche:hover { color:var(--bleu-tag); text-decoration:underline; text-decoration-thickness:2px; }
.card[data-rappeur] > h2 > .lien-fiche:focus-visible { outline-offset:-3px; }
.card[data-rappeur] > h2 small { display:block; color:var(--gris-texte); font:500 var(--t-s)/18px var(--f-texte); }
.card[data-rappeur] > h2 small a.inherit { color:var(--gris-texte); }
.card[data-rappeur] > h2 small a.inherit:hover { color:var(--bleu-tag); }

/* Passages de la carte (et de la fiche) : une ligne propre par passage, statut à droite. */
/* Statut en flottant à droite : un flottant ne reçoit pas le soulignement du lien (un élément flex, si). */

/* Fiche d'un artiste : un grand slap. */

/* ---------- Cartes génériques (historique, fiche) ---------- */
.card { background:var(--blanc); border:2px solid var(--noir); border-radius:5px; box-shadow:3px 3px 0 var(--ombre-douce); color:var(--noir); font:500 var(--t-m)/1.45 var(--f-texte); }
.card strong { font-weight:700; }
.fiche .card { padding:0 0 4px; margin-bottom:14px; overflow:hidden; }
.fiche .card h3 { margin:0; padding:0 12px; height:30px; background:var(--noir); color:var(--blanc); font:400 var(--t-s)/30px var(--f-piece); }

/* Étiquettes de l'historique : forme et texte, contraste ≥ 4.5:1 sur blanc. */
.etiquette { padding:3px 7px; border-radius:2px; font:800 var(--t-xs)/1 var(--f-texte); letter-spacing:.08em; }
.etiquette.ajout { background:var(--bleu); color:var(--blanc-pur); }
.etiquette.modification { background:var(--blanc-pur); color:var(--noir); box-shadow:inset 0 0 0 1.5px var(--noir); }
.etiquette.suppression { background:transparent; color:var(--noir); border:1.5px dashed var(--noir); padding:1.5px 5.5px; }
.etiquette.restauration { background:var(--jaune); color:var(--noir); }
.etiquette.annulation { background:var(--filet-clair); color:var(--gris-texte); }

/* ---------- Tableaux ---------- */
td, th { border-bottom:1px solid var(--filet-clair); }
th { background:var(--entete-tableau); color:var(--gris-texte); font:800 var(--t-xs)/1 var(--f-texte); letter-spacing:.12em; text-transform:uppercase; }
td { color:var(--noir); font:600 var(--t-m)/1.35 var(--f-texte); }
td a { color:var(--noir); }

/* Ordre de passage : le flyer de block party. Même titre dans les deux modes ; en Édition,
   une étiquette posée par-dessus (position absolue) et l'en-tête jaune : aucune hauteur ne bouge. */
/* Numéro d'ordre en Lecture (compteur CSS) ; en Édition la même colonne porte la poignée. */
/* Lignes IA : plus d'italique ni de gris, le statut est porté par l'étiquette en pointillés. */
tr.src-ia td { color:var(--noir); }
tr.src-ia td:nth-child(n+2):not(:last-child) { font-style:normal; }
tr.src-ia .lien-fiche, .table-passages tr.src-ia .lien-fiche { color:var(--noir); }
@media (min-width:901px) {
  /* Statut à droite de la cellule Artiste, comme une colonne. */
}
/* Édition : chaque info devient son contrôle à sa place, dans la même hauteur de 48 px. */
tr.cible td { background:var(--jaune-pale); box-shadow:inset 0 2px 0 var(--bleu), inset 0 -2px 0 var(--bleu); }

/* Têtes de cypher (attribut data-tetes-cypher) : bandeau noir façon flyer, 30 px dans les
   deux modes. Ce ne sont pas des passages : elles ne comptent pas dans le numéro d'ordre. */
/* « Fusionner… » d'une tête de cypher, en Édition (#66, 05-10). */
/* ▶ au début du cypher (#72, 05-10). */
@media (max-width:700px) {
  /* style.css met chaque ligne en grille sur téléphone : la tête reste une bande pleine largeur. */
}

/* Passage montré depuis la colonne de gauche (deux colonnes liées) : surligneur jaune,
   texte noir (≥ 4.5:1) ; les autres lignes de son cypher en jaune pâle. */

/* Deux colonnes liées (attribut data-deux-colonnes, 1200 px et plus, vue « Par artiste »). */
/* Le flyer du tableau est déjà porté par la colonne : pas de second titre ni de cadre. */
/* Colonne étroite : forme courte « P1 · S12 » (la même que sur téléphone). */
/* Colonne étroite (29-09, capture d'Alice : statut par-dessus le nom) : la colonne Vidéo
   répète la tête de cypher, on la retire ici ; le cypher garde une colonne courte (menu
   en Édition) ; dans la cellule Artiste, le statut passe au-dessus du nom au lieu de flotter. */

/* Contributeurs */

/* ---------- Vidéos : stickers de partie ---------- */
.carte-video { background:var(--blanc); border:3px solid var(--noir); border-radius:6px; box-shadow:4px 4px 0 rgba(17,18,20,.35); }
.carte-video:nth-child(3n+1) { transform:rotate(-.6deg); }
.carte-video:nth-child(3n+2) { transform:rotate(.5deg); }

/* ---------- Fenêtres (#dlg) ---------- */
dialog { padding:18px 20px; background:var(--blanc); color:var(--noir); border:3px solid var(--noir); border-radius:6px; box-shadow:6px 6px 0 var(--noir); font:500 var(--t-m)/1.4 var(--f-texte); }
dialog::backdrop { background:rgba(17,18,20,.62); }
.dlg-titre { margin:0 0 4px; color:var(--noir); font:400 var(--t-l)/1.15 var(--f-piece); }
dialog label { margin:14px 0 6px; color:var(--gris-texte); font:800 var(--t-xs)/1.3 var(--f-texte); letter-spacing:.1em; text-transform:uppercase; }
dialog input, dialog select { height:44px; padding:0 10px; background:var(--blanc-pur); color:var(--noir); border:2px solid var(--noir); border-radius:3px; font:600 var(--t-m) var(--f-texte); }
dialog input:focus, dialog select:focus { outline:3px solid var(--bleu); outline-offset:1px; }
dialog .pied { gap:10px; margin-top:18px; }
dialog .qui { color:var(--gris-texte); }

/* ---------- Lecteur : un grand slap posé sur la page assombrie ---------- */
dialog.lecteur { max-width:820px; border:3px solid var(--noir); border-radius:9px; box-shadow:6px 6px 0 var(--noir); background:var(--blanc); }
dialog.lecteur::backdrop { background:rgba(17,18,20,.74); }
.lecteur-erreur { background:var(--noir); color:var(--blanc); border-top:3px solid var(--jaune); font:600 var(--t-m)/1.4 var(--f-texte); }
.lecteur-erreur a { color:var(--jaune); }
/* Bloc Édition : aplat jaune. */

/* Message bref */
#toast { z-index:40; padding:10px 16px; background:var(--noir); color:var(--blanc); border:2px solid var(--noir); border-radius:3px; box-shadow:4px 4px 0 var(--ombre-douce); font:600 var(--t-m)/1.35 var(--f-texte); }
#toast.err { background:var(--jaune); color:var(--noir); border-color:var(--noir); }

/* ---------- Largeurs intermédiaires ---------- */
@media (max-width:1100px) {
  .entete-in { grid-template-columns:350px auto minmax(0,1fr); column-gap:20px; }
  .logo-piece { width:320px; }
  .logo-sous { font-size:var(--t-l); }
  .menu .tab { padding:0 12px; font-size:var(--t-s); }
}
/* 900 px et moins : en-tête sur une colonne (pièce, outils, onglets, filtres). */
@media (max-width:900px) {
  .entete-in { grid-template-columns:minmax(0,1fr); grid-template-areas:"logo" "outils" "menu" "filtres"; row-gap:12px; }
  .logo-piece { width:280px; }
}
@media (max-width:700px) {
  dialog.lecteur { max-width:none; border:0; border-radius:0; box-shadow:none; }
}
/* Téléphone (375 px) : pièce réduite, onglets en capitales condensées, filtres sur UNE rangée. */
@media (max-width:560px) {
  .entete-in { padding:14px 16px 10px; row-gap:10px; }
  .logo-piece { width:214px; margin-left:-4px; }
  .logo-bas { padding-left:4px; gap:2px 10px; margin-top:-2px; }
  .logo-sous { font-size:var(--t-l); padding-bottom:8px; white-space:normal; max-width:100%; }
  .outils { gap:8px; }
  .entete input[type=search], .entete input[type=search]:focus { height:48px; font-size:var(--t-m); padding-left:40px; background-position:12px 50%; box-shadow:3px 3px 0 var(--noir); }
  .entete .mode svg { display:none; }
  .entete .mode button { height:44px; padding:0 9px; }
  .btn-profil { width:46px; height:46px; }
  .menu { gap:8px; padding:4px 8px 8px 2px; }
  .menu .tab { flex:1 0 auto; height:46px; padding:0 9px; font:800 var(--t-s)/1 var(--f-texte); letter-spacing:.04em; text-transform:uppercase; }
  .menu .tab[aria-pressed=true] { box-shadow:3px 3px 0 var(--noir); }
  .wrap { padding:16px 16px 56px; }
  #res:has(> .card[data-rappeur]) { grid-template-columns:minmax(0,1fr); gap:14px; }
  nav.az a { min-width:30px; height:32px; }
}

/* ---------- Édition par panneau ✎ (attribut data-edition-panneau, 29-09-2026) ----------
   Lignes compactes identiques en Lecture et en Édition : rang ou poignée, Vidéo et Cypher
   en texte (pleine largeur seulement), Artiste (pictogramme de statut + nom sur une ligne),
   Début en texte, actions de largeur fixe (▶, puis ✔ et ✎ en Édition, alignées à gauche :
   ▶ ne bouge pas d'un mode à l'autre). Le reste se corrige dans le panneau sous la ligne. */
.visuellement-masque { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
 /* ▶ et ✎ (le ✔ est dans le panneau, 29-09) */
/* Statut : couronne sur pastille noire (Vérifié), rond en pointillés (IA) ; le mot reste
   lisible par les lecteurs d'écran (texte masqué) et au survol (title). */
/* Colonne de droite : Vidéo et Cypher masqués (la tête de cypher les dit déjà). */
/* Statut et nom sur UNE ligne dans la colonne aussi (la règle générale y met le nom en bloc). */

/* Passage en cours d'édition et passage tout juste enregistré. */

/* Panneau : fond blanc, bordure noire épaisse, sous le passage sur toute la largeur. */
.panneau { margin:8px 10px 14px; padding:14px 16px 16px; background:var(--blanc-pur); border:4px solid var(--noir); border-radius:4px; box-shadow:5px 5px 0 var(--noir); color:var(--noir); font:500 var(--t-m)/1.35 var(--f-texte); }
.panneau input[type=text], .panneau select {
  box-sizing:border-box; display:block; width:100%; height:40px; margin:0; padding:0 10px;
  border:2px solid var(--noir); border-radius:3px; background:var(--blanc-pur); color:var(--noir); font:600 var(--t-m)/1 var(--f-texte);
}
.panneau input.heure { font:700 var(--t-m)/1 var(--f-mono); font-variant-numeric:tabular-nums; }
.panneau input::placeholder { color:var(--gris-num); opacity:1; }
.panneau input[type=text]:focus, .panneau select:focus { outline:3px solid var(--bleu); outline-offset:1px; }

/* Colonne de droite (560 px) : deux champs par rangée. */
@media (max-width:700px) {
  /* style.css met chaque ligne en grille : le panneau reste un bloc pleine largeur. */
  .panneau { margin:6px 0 12px; padding:12px; }
}
/* Téléphone (375 px) : champs empilés. */

/* Pas d'animation dans cette direction ; on coupe aussi les transitions héritées. */
@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after { transition:none !important; animation:none !important; scroll-behavior:auto !important; }
}

/* Barre de lettres collée en haut pendant le défilement, sur ordinateur (29-09) : avec le
   survol qui mène à la lettre, elle doit rester sous la main. Les sections s'arrêtent sous
   la barre au lieu de passer dessous. */
@media (min-width: 900px) and (hover: hover) {
  nav.az { position:sticky; top:8px; z-index:4; }
}

/* Chiffres (29-09) : bandeau du flyer, compteur de la barre de lettres, heures en chasse fixe. */
 /* lien propre de l'émission ou de la vidéo (#64) */

/* En-tête fixé sur ordinateur (29-09, #49) : fond du mur opaque, compacté après défilement.
   Le corps garde la hauteur pleine en marge : pas de saut quand il se compacte. */

/* Retour en haut, téléphone et tablette (29-09, #49) : rond noir, flèche jaune, au-dessus
   des messages (#toast au centre en bas) mais sous le lecteur et les fenêtres. */

/* ---------- Vidéo record (#51) ---------- */

/* Deux colonnes à défilement indépendant (29-09) : la page ne défile plus, chaque colonne
   défile seule sous l'en-tête compact ; la barre de lettres est collée en haut de SA colonne.
   grid-auto-rows:max-content : sans lui, la grille de hauteur fixe écrasait les rangées et les fiches se chevauchaient. */

/* Survol d'un passage d'une autre partie (29-09) : indication sous la pastille, sans rien
   déplacer (positionnée par-dessus). */

/* ---------- En-tête allégé « M2 » (29-09, data-entete-m2) ----------
   Une rangée : pièce, recherche à pastilles, onglets, profil. Plus de menus de filtre ni de
   sélecteur de mode (dans le menu du profil). À partir de 1200 px, seuls « Vidéos » reste
   parmi les onglets (les deux colonnes remplacent Par artiste et Ordre de passage). Même
   hauteur en haut de page et après défilement : rien ne change de place. */
html[data-entete-m2] .entete-in {
  display:grid; grid-template-columns:auto auto minmax(0,1fr) auto auto; grid-template-areas:"logo emissions recherche menu profil";
  column-gap:24px; row-gap:10px; align-items:center; padding:12px 24px;
}
html[data-entete-m2] .logo { grid-area:logo; align-self:center; flex-direction:row; align-items:center; gap:14px; }
html[data-entete-m2] .logo-piece { width:170px; margin-left:-4px; }
html[data-entete-m2] .logo-bas { display:flex; flex-direction:column; align-items:flex-start; gap:6px; margin:0; padding:0; }
html[data-entete-m2] .logo-sous { font-size:var(--t-m); padding-bottom:7px; background-size:100% 8px; }
html[data-entete-m2] .recherche { grid-area:recherche; position:relative; min-width:0; max-width:640px; }
html[data-entete-m2] .menu { grid-area:menu; padding:4px 6px 6px 2px; gap:8px; }
html[data-entete-m2] .menu .tab { height:42px; padding:0 14px; font-size:var(--t-s); }
html[data-entete-m2] .profil { grid-area:profil; }
@media (min-width:1200px) {
  html[data-entete-m2] .menu .tab[data-vue=az], html[data-entete-m2] .menu .tab[data-vue=chrono] { display:none; }
}
/* Moins de 1200 px : onglets sur leur propre rangée. */
@media (max-width:1199px) {
  html[data-entete-m2] .entete-in { grid-template-columns:auto auto minmax(0,1fr) auto; grid-template-areas:"logo emissions recherche profil" "menu menu menu menu"; }
}
/* Téléphone : pièce et profil, puis recherche, puis onglets. */
@media (max-width:700px) {
  html[data-entete-m2] .entete-in { grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"logo profil" "emissions emissions" "recherche recherche" "menu menu"; padding:14px 16px 10px; column-gap:12px; }
  html[data-entete-m2] .logo { flex-direction:column; align-items:flex-start; gap:2px; }
  html[data-entete-m2] .logo-piece { width:160px; }
  html[data-entete-m2] .logo-bas { flex-direction:row; align-items:flex-end; gap:10px; }
  html[data-entete-m2] .recherche { max-width:none; }
  html[data-entete-m2] .menu .tab { flex:1 0 auto; height:44px; }
}

/* Champ à pastilles : le cadre porte la bordure et la loupe, le vrai champ est nu. */
.pastille { display:inline-flex; align-items:center; gap:6px; flex:none; height:32px; padding:0 8px 0 12px; border:2px solid var(--noir); border-radius:16px; background:var(--emission); color:var(--emission-texte); font:700 var(--t-m)/1 var(--f-texte); white-space:nowrap; cursor:pointer; }
.pastille .croix { font-size:var(--t-l); line-height:1; }
.pastille:hover { background:var(--noir); color:var(--emission-nuit); }
.pastille:focus-visible { outline:3px solid var(--bleu); outline-offset:2px; }

/* Suggestions : filtres d'abord, puis artistes ; l'option active est surlignée en jaune. */
.suggestions { position:absolute; left:0; right:0; top:calc(100% + 8px); z-index:40; max-height:min(60vh, 460px); overflow:auto; padding:6px 0 0; background:var(--blanc-pur); border:3px solid var(--noir); border-radius:4px; box-shadow:5px 5px 0 var(--noir); }
.suggestions[hidden] { display:none; }
.sug-titre { padding:8px 14px 4px; color:var(--gris-num); font:800 var(--t-xs)/1 var(--f-texte); letter-spacing:.12em; text-transform:uppercase; }
.sug { display:flex; align-items:center; gap:12px; min-height:42px; padding:0 14px; cursor:pointer; }
.sug-l { color:var(--noir); font:700 var(--t-m)/1.2 var(--f-texte); }
.sug-d { margin-left:auto; color:var(--gris-texte); font:500 var(--t-s)/1.2 var(--f-texte); text-align:right; }
.sug:hover, .sug[aria-selected=true] { background:var(--jaune); }
.sug-aide { margin-top:6px; padding:8px 14px; border-top:1px solid var(--filet-clair); color:var(--gris-num); font:500 var(--t-s)/1.3 var(--f-texte); }
@media (max-width:700px) { .sug { min-height:44px; } .pastille { height:36px; } }

/* Profil : jaune en Édition ; choix du mode en tête de menu. */
.btn-profil.en-edition { background:var(--jaune); }
.menu-profil-mode { display:grid; grid-template-columns:1fr 1fr; margin:2px 4px 8px; border:2px solid var(--noir); border-radius:3px; overflow:hidden; }
.menu-profil .menu-profil-mode button { padding:9px 6px; border-radius:0; text-align:center; font-weight:700; }
.menu-profil .menu-profil-mode button + button { border-left:2px solid var(--noir); }
.menu-profil .menu-profil-mode button[aria-checked=true] { background:var(--noir); color:var(--blanc); }
.menu-profil .menu-profil-mode button:last-child[aria-checked=true] { background:var(--jaune); color:var(--noir); }

/* Ligne d'intro : légende et bouton d'ajout ; hauteur fixe, rien ne bouge en Édition. */
/* Titre de colonne un peu plus petit (M2) : en Édition, la tête doit aussi loger « + Ajouter ». */
/* Téléphone (M2) : les trois onglets tiennent sur la largeur, sans défilement caché. */
@media (max-width:560px) {
  html[data-entete-m2] .menu { gap:6px; padding-right:2px; }
  html[data-entete-m2] .menu .tab { flex:1 1 auto; padding:0 6px; font-size:var(--t-xs); letter-spacing:0; }
}
/* Nombre de résultats dans le champ (M2) : à droite, en gris, seulement quand la liste est réduite. */
/* Téléphone : pastilles + compteur + saisie ne tiennent pas toujours sur une ligne ; le champ passe à la ligne. */
/* Légende Vérifié / IA retirée (29-09, demande d'Alice : l'étiquette au survol suffit). La ligne d'intro
   ne porte plus que « + Ajouter » ; en deux colonnes il est dans la tête de colonne, la ligne disparaît. */

/* ---------- Panneau ✎ allégé (29-09) ----------
   Pas de titre (la ligne au-dessus le dit), étiquettes masquées, heures « début → fin »,
   statut en interrupteur, ↑ ↓ en icônes, croix de fermeture en haut à droite. */
.panneau { position:relative; padding:12px 14px 14px; }
.panneau input.heure { text-align:center; padding-left:4px; padding-right:4px; }
/* Statut : deux segments collés, le choisi en plein (jaune = Vérifié, noir = IA). */
/* La légende masquée ne doit pas garder la largeur de 100 % de l'ancienne règle (débordement). */
/* Sommaire des cyphers (vue Vidéos) en direction D. */
/* Un sommaire déplié n'étire pas les autres cartes de la rangée (29-09). */

/* ---------- Deux colonnes : rail de lettres et en-tête collé (29-09, retours de Vad) ---------- */
@media (min-width:1200px) {
  /* Colonne des artistes : rail de lettres à gauche (collé en haut), grille des fiches à droite. */

  /* Colonne Ordre de passage : titre + menu, bandeau, ligne des intitulés restent en haut. */
}
/* Carte ciblée par un clic sur un nom d'artiste (29-09) : surlignée 2,5 s. */

/* ---------- Page À propos (29-09) : en-tête réduit à la pièce, texte sur une feuille blanche ---------- */

/* ---------- Audit mobile (29-09) ---------- */
@media (max-width:700px) {
  /* 1. Ordre de passage : une rangée par passage (n°, statut + nom, heure, actions) ; la case
     « P1 · C1 » est masquée, les têtes de groupe le disent déjà. */
  /* Noms longs (30-09) : le lien était un bloc indivisible, la coupure de la cellule le
     remplaçait en entier par « … ». Le nom va à la ligne (2 lignes au plus), coupé au-delà. */
  /* 3. « + Ajouter » (Édition) en bouton flottant : plus de ligne vide réservée sous les onglets. */
  html[data-entete-m2] #actions { position:fixed; right:76px; bottom:16px; z-index:26; }
  html[data-entete-m2] #actions .btn { min-height:48px; box-shadow:3px 3px 0 var(--noir); }
  /* 4. Barre de lettres : une seule rangée qui défile, sans boîte noire ; lettres de 40 px. */
  nav.az { flex-wrap:nowrap; overflow-x:auto; gap:2px; padding:4px 0; background:none; border-radius:0; border-bottom:3px solid var(--noir); scrollbar-width:none; }
  nav.az::-webkit-scrollbar { display:none; }
  nav.az::before, nav.az .compte-az { display:none; }
  nav.az a { flex:none; min-width:40px; height:40px; color:var(--noir); font-size:var(--t-m); }
  nav.az a:hover, nav.az a.actif { background:var(--noir); color:var(--emission-nuit); }
  /* 5. Zones touchables agrandies sans grossir le texte ni décaler la mise en page. */
  .card a.inherit { display:inline-block; padding:12px 0; margin:-12px 0; }
}
/* 2. Lecteur : le bouton « de la liste » sur sa propre ligne, les deux autres entiers. */

/* ---------- Artiste à identifier (30-09) ---------- */
/* Ordre de passage : « ? À identifier », l'indice dessous. */
/* Ajout (formulaire et lecteur) : bouton « Je ne sais pas qui c'est », indice dessous. */
#dlg label[hidden], #dlg input[hidden], #lecteur-inconnu[hidden], #lecteur-indice[hidden] { display:none; }
/* Panneau ✎ : l'indice prend toute la ligne. */
/* Téléphone : la cellule est à hauteur fixe ; nom, indice et lien y tiennent sur 3 lignes. */
/* Retour mobile du 30-09 : « ? À identifier » sur une ligne (il se coupait en « ? À » /
   « identifier ») ; tête de cypher sans le nombre d'artistes (coupé en « 1 arti… »,
   les lignes dessous le disent déjà). */

/* ---------- Carte des artistes : piste « Nuit » (30-09, choix d'Alice pour #55) ----------
   Carte sombre façon salle de concert : les départements s'allument en jaune selon le nombre
   d'artistes, les villes sont des points bleus. Panneau et légende dans la même ambiance. */
:root { --carte-mer:#111214; --carte-trame:#23262b; --carte-0:#2a2d33; --carte-1:#4a4020; --carte-2:#7a6420; --carte-3:#c9a227; --carte-4:#ffd23f; --carte-5:#fff3b0;
  --carte-trait:#5a6067; --carte-choix:#f5f7f8; --carte-point:#1f4fff; --carte-point-trait:#f5f7f8; --carte-texte:#f5f7f8; --carte-doux:#c7ccd1; --carte-accent:var(--emission-nuit); }
.vue-carte { display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:16px; align-items:start; }
.carte-leaflet { position:relative; z-index:0; height:min(72vh, 680px); border:2px solid var(--noir); box-shadow:5px 5px 0 var(--carte-accent); }
.carte-leaflet, .carte-leaflet.leaflet-container { background:var(--carte-mer) radial-gradient(var(--carte-trame) 1.2px, transparent 1.4px) 0 0 / 12px 12px; }
.carte-panneau { background:var(--carte-mer); color:var(--carte-texte); border:2px solid var(--noir); box-shadow:5px 5px 0 var(--carte-accent); padding:16px 18px; display:flex; flex-direction:column; gap:10px; max-height:min(72vh, 680px); overflow:auto; }
.carte-titre { font:400 var(--t-l)/1.2 var(--f-piece); margin:0; color:var(--carte-accent); }
.carte-resume { color:var(--carte-doux); margin:0; }
.carte-panneau .carte-retour { margin-bottom:2px; }
.carte-artistes, .carte-top { margin:0; padding-left:1.2em; display:flex; flex-direction:column; gap:4px; }
.carte-panneau a, .carte-panneau .lien-bouton { color:var(--carte-accent); }
.carte-panneau .tab { background:transparent; color:var(--carte-texte); border-color:var(--carte-trait); align-self:flex-start; }
.carte-panneau .tab:hover { border-color:var(--carte-accent); color:var(--carte-accent); }
.carte-legende { list-style:none; margin:0; padding:10px 0 0; border-top:1px solid #2c2f35; display:flex; flex-wrap:wrap; gap:6px 12px; font-size:var(--t-xs); color:var(--carte-doux); }
.carte-legende li { display:flex; align-items:center; gap:6px; }
.carte-pastille { width:16px; height:12px; border:1px solid var(--carte-trait); display:inline-block; }
.lien-bouton { background:none; border:0; padding:0; font:inherit; color:var(--bleu); text-decoration:underline; cursor:pointer; text-align:left; }
.carte-leaflet .leaflet-tooltip { font:600 var(--t-s)/1.3 var(--f-texte); background:var(--carte-mer); color:var(--carte-texte); border:1px solid var(--carte-accent); border-radius:2px; box-shadow:none; }
.carte-leaflet .leaflet-tooltip-top::before { border-top-color:var(--carte-accent); }
.carte-leaflet .leaflet-bar a { background:var(--carte-mer); color:var(--carte-accent); border-bottom-color:#2c2f35; }
.carte-leaflet .leaflet-bar a:hover { background:#1c1e22; }
.carte-leaflet .leaflet-bar { border:1px solid var(--carte-trait); }
.carte-leaflet.leaflet-container .leaflet-control-attribution { background:rgba(17,18,20,.85); color:var(--carte-doux); }
@media (max-width:900px) {
  .vue-carte { grid-template-columns:1fr; }
  .carte-leaflet { height:auto; aspect-ratio:1 / 1; max-height:70vh; }
  .carte-panneau { max-height:none; }
}
/* Fenêtres de fiche (artiste, vidéo), 30-09, demande d'Alice : Annuler et Enregistrer à droite, à la
   même hauteur ; actions secondaires (fusionner, supprimer) sur une ligne à part, sous un filet. */
dialog .pied { flex-wrap:wrap; align-items:center; }
dialog .pied > .tab, dialog .pied > .btn { min-height:44px; min-width:112px; }
dialog .pied .pied-gauche { order:2; flex:1 1 100%; margin:2px 0 0; padding-top:12px; border-top:1px solid var(--filet-clair); display:flex; flex-wrap:wrap; gap:8px; }
dialog .pied .pied-gauche .tab { min-height:34px; padding:0 12px; font-size:var(--t-xs); font-weight:600; border-width:1px; }
dialog .pied .tab-supprimer { display:inline-flex; align-items:center; gap:6px; }

/* ---------- Accueil du site (socle multi-émissions, étape 3) : disposition « Programme » (choix d'Alice, 01-10) ----------
   Les émissions en lignes à leur couleur, la carte de tous les artistes à côté (dessous sur téléphone). */
.accueil { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); gap:26px; align-items:start; }
/* Émission à venir : annoncée, sans lien ni survol ; la petite carte « + à venir ! » ferme la liste. */
/* Même réaction au survol que les émissions ouvertes (demande d'Alice, 02-10), même sans lien. */
/* Rubalise « En travaux » : ruban rayé jaune et noir en travers du coin droit, coupé par les bords de la ligne. */
.rubalise { position:absolute; right:-46px; top:50%; width:230px; height:30px; margin-top:-15px; display:grid; place-items:center; transform:rotate(-14deg);
  background:repeating-linear-gradient(-45deg, var(--jaune) 0 13px, var(--noir) 13px 26px); border-block:2px solid var(--noir); box-shadow:0 2px 0 rgba(17,18,20,.25); pointer-events:none; }
.rubalise span { padding:3px 10px 2px; background:var(--jaune); border:2px solid var(--noir); color:var(--noir); font:800 var(--t-s)/1 var(--f-texte); letter-spacing:.14em; text-transform:uppercase; white-space:nowrap; }
/* La carte dans sa colonne : carte puis panneau, l'un sous l'autre. */
.accueil .vue-carte { grid-template-columns:minmax(0,1fr); }
.accueil .carte-leaflet { height:min(62vh, 520px); aspect-ratio:auto; max-height:none; }
.accueil .carte-panneau { max-height:none; }
@media (max-width:900px) {
  .accueil { grid-template-columns:minmax(0,1fr); }
}
/* Page Documentation (comptes connectés) : FAQ, une famille de questions par accordéon (02-10). */
/* La place de la barre de défilement est réservée : ouvrir un accordéon allonge la page sans décaler le contenu. */
:root:has(.faq) { scrollbar-gutter:stable; }
.faq { display:flex; flex-direction:column; gap:12px; max-width:860px; }
.faq-famille { background:var(--blanc); border:3px solid var(--noir); box-shadow:4px 4px 0 rgba(17,18,20,.35); }
.faq-famille > summary { display:flex; align-items:center; gap:12px; padding:12px 14px; cursor:pointer; list-style:none; color:var(--noir); }
.faq-famille > summary::-webkit-details-marker { display:none; }
.faq-famille > summary::before { content:"+"; flex:none; width:28px; height:28px; display:grid; place-items:center; border:2px solid var(--noir); background:var(--jaune); font:700 var(--t-l)/1 var(--f-texte); }
.faq-famille[open] > summary::before { content:"−"; background:var(--noir); color:var(--jaune); }
.faq-famille > summary:hover { background:var(--jaune-pale); }
.faq-famille > summary:focus-visible { outline:3px solid var(--bleu); outline-offset:2px; }
.faq-famille[open] > summary { border-bottom:3px solid var(--noir); }
.faq-titre { flex:1; min-width:0; font:400 var(--t-m)/1.2 var(--f-piece); }
.faq-nombre { flex:none; color:var(--gris-texte); font:700 var(--t-s)/1 var(--f-texte); letter-spacing:.04em; }
.faq-famille dl { margin:0; padding:4px 16px 14px; }
.faq-famille dt { margin:12px 0 0; color:var(--noir); font:700 var(--t-m)/1.35 var(--f-texte); }
.faq-famille dd { margin:3px 0 0; padding:0 0 12px; border-bottom:1px solid var(--filet-clair); color:var(--noir); font:500 var(--t-m)/1.45 var(--f-texte); }
.faq-famille dd:last-child { border-bottom:0; padding-bottom:0; }
@media (max-width:560px) { .faq-nombre { display:none; } }
/* Page Émissions (admins) : même tableau que la page Contributeurs. */

/* ---------- Fiche d'artiste en fenêtre (01-10 ; disposition « Feuille de route » depuis le 02-10, choix d'Alice) ----------
   Fenêtre étroite, une seule colonne : étiquette « My name is », nom, une ligne d'informations, puis un
   bloc par émission à sa couleur, une ligne par vidéo et par cypher, les heures côte à côte. La même
   sur téléphone (plein écran) et sur ordinateur. */
dialog.fenetre-artiste { width:calc(100% - 32px); max-width:660px; max-height:calc(100dvh - 48px); padding:0; overflow:hidden; border-radius:0; box-shadow:8px 8px 0 var(--noir); }
dialog.fenetre-artiste[open] { display:flex; flex-direction:column; }
.fa { display:flex; flex-direction:column; min-height:0; flex:1; }
.fa-etiquette { flex:none; padding:7px 16px; background:var(--bleu); color:var(--blanc-pur); font:800 var(--t-xs)/1 var(--f-texte); letter-spacing:.18em; text-transform:uppercase; }
.fa-haut { flex:none; display:flex; align-items:flex-start; gap:14px; padding:14px 18px 8px; }
.fa-nom { flex:1; min-width:0; margin:0; color:var(--noir); font:400 var(--t-xxl)/1.05 var(--f-nom); overflow-wrap:anywhere; }
.fa-fermer { flex:none; width:42px; height:42px; padding:0; border:2px solid var(--noir); border-radius:0; background:var(--blanc-pur); color:var(--noir); font:700 var(--t-xl)/1 var(--f-texte); cursor:pointer; }
.fa-fermer:hover { background:var(--jaune); }
.fa-fermer:focus-visible { outline:3px solid var(--bleu); outline-offset:2px; }
.fa-corps { min-height:0; flex:1; overflow-y:auto; }
.fa-infos { display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 14px; padding:0 18px 14px; color:var(--gris-texte); font:600 var(--t-m)/1.4 var(--f-texte); overflow-wrap:anywhere; }
.fa-infos a { color:var(--bleu); }
.fa-infos .tab { align-self:center; }
.fa-compte { color:var(--noir); font:700 var(--t-s)/1.2 var(--f-texte); }
.fa-passages { display:flex; flex-direction:column; gap:16px; min-width:0; padding:0 18px 18px; }
.fa-groupe { display:flex; flex-direction:column; min-width:0; }
.fa-emission { display:flex; align-items:center; gap:10px; margin:0 0 4px; padding:8px 12px; background:var(--bande, var(--jaune)); color:var(--bande-texte, var(--noir)); border:2px solid var(--noir); font:400 var(--t-l)/1.15 var(--f-piece); overflow-wrap:anywhere; }
.fa-emission small { margin-left:auto; flex:none; font:700 var(--t-s)/1 var(--f-texte); letter-spacing:.04em; }
.fa-ligne { display:grid; grid-template-columns:minmax(0, 150px) minmax(0, 1fr); gap:6px 12px; align-items:start; padding:8px 0; border-bottom:1px solid var(--filet-clair); }
.fa-ligne:last-child { border-bottom:0; }
.fa-ou strong { display:block; color:var(--noir); font:700 var(--t-m)/1.3 var(--f-texte); }
.fa-ou small { display:block; color:var(--gris-texte); font:500 var(--t-s)/1.3 var(--f-texte); }
.fa-heures { display:flex; flex-wrap:wrap; gap:6px; }
.fa-heure { display:inline-flex; align-items:center; gap:6px; height:34px; padding:0 10px; border:2px solid var(--noir); background:var(--blanc-pur); color:var(--noir); font:600 var(--t-m)/1 var(--f-mono); font-variant-numeric:tabular-nums; text-decoration:none; white-space:nowrap; }
.fa-heure::before { content:"▶"; color:var(--bleu); font-size:var(--t-xs); }
.fa-heure.src-ia { border-style:dashed; color:var(--gris-texte); }
.fa-heure:hover, .fa-heure:focus-visible { background:var(--jaune); color:var(--noir); outline:none; }
.fa-heure:focus-visible { outline:3px solid var(--bleu); outline-offset:2px; }
.fa-legende { margin:0; color:var(--gris-texte); font:500 var(--t-s)/1.4 var(--f-texte); }
@media (max-width:640px) {
  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); }
}

/* Fenêtre de connexion : à qui s'adresser quand on n'a pas de compte (02-10). */
.dlg-note { margin:14px 0 0; padding:10px 12px; background:var(--jaune-pale); border:2px solid var(--noir); color:var(--noir); font:500 var(--t-m)/1.4 var(--f-texte); }
.dlg-note a { color:var(--bleu); font-weight:700; }

/* Tablette tactile (#69, 05-10, retour du frère de Vad : bande blanche à droite de la liste) : la
   colonne de la poignée de glisser-déposer était retirée (display:none, style.css) alors que la tête
   de chaque cypher couvre toujours toutes les colonnes : il restait une colonne vide, large, à droite.
   Au-dessus de 700 px (vrai tableau), la colonne reste en place, à largeur nulle. */

/* Compteur de la recherche (#70, 05-10) : il se règle sur la largeur du CHAMP, pas de l'écran. Sur
   tablette le champ est étroit et le compteur complet cachait le nom tapé. */
@container (max-width: 420px) {  }
@container (max-width: 300px) {  }

/* En-tête aux couleurs de l'émission (05-10, maquette « B · Moyen » choisie par Alice).
   Bouton au nom de l'émission, rempli de sa couleur, qui ouvre le menu des émissions ; bande de sa
   couleur sous l'en-tête. Sur l'accueil : ni bouton ni bande. Texte noir ou blanc selon la couleur. */


/* Colonne Vidéo de l'ordre de passage : un titre de vidéo (« Hajime : Cypher 1 ») passe sur deux
   lignes au lieu d'être coupé (#57, 05-10). Les « Partie 1 » des 100 Heures tiennent sur une ligne. */

/* Lecteur ouvert depuis une fiche sur un passage d'une autre émission (#75, 05-10) : lecture seule,
   ni étiquette « Mode Édition » ni bande jaune d'Édition. */

/* Page « Merci » (#34, 05-10). */
.merci { display:flex; flex-direction:column; gap:16px; max-width:860px; }
.merci-bloc { padding:16px 20px; background:var(--blanc); border:3px solid var(--noir); box-shadow:4px 4px 0 rgba(17,18,20,.35); }
.merci-bloc h3 { margin:0 0 10px; font:400 var(--t-l)/1.2 var(--f-piece); }
.merci-liste { margin:0; padding:0; list-style:none; display:flex; flex-direction:column; }
.merci-personne { display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 14px; padding:9px 0; border-bottom:1px solid var(--filet-clair); }
.merci-personne:last-child { border-bottom:0; }
.merci-pseudo { font:400 var(--t-l)/1.15 var(--f-nom); }
.merci-chiffres { font:700 var(--t-m)/1.3 var(--f-texte); }
.merci-depuis { margin-left:auto; color:var(--gris-texte); font:500 var(--t-s)/1.3 var(--f-texte); }
.merci-note { margin:12px 0 0; color:var(--gris-texte); font:500 var(--t-s)/1.4 var(--f-texte); }
.merci-aussi { margin:0; padding-left:20px; display:flex; flex-direction:column; gap:6px; font:500 var(--t-m)/1.45 var(--f-texte); }

.merci-aussi a { color:var(--bleu); font-weight:700; }

/* Leaflet : ses polices par défaut (Helvetica Neue, Lucida Console) sont remplacées par celles de la charte (06-10-2026). */
.leaflet-container, .leaflet-container .leaflet-control-attribution { font-family:var(--f-texte); font-size:var(--t-xs); }
.leaflet-bar a.leaflet-control-zoom-in, .leaflet-bar a.leaflet-control-zoom-out { font-family:var(--f-texte); font-size:var(--t-l); }