/* 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-main:'Sedgwick Ave Display', 'Comic Sans MS', cursive;
  /* Noms d'artistes : marqueur lisible (29-09, Sedgwick jugée trop marquée par Alice pour une liste) ; Sedgwick reste pour les tags décoratifs. */
  --f-nom:'Permanent Marker', 'Comic Sans MS', cursive;
  --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 16px/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 14px/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); }
/* 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 14px/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; }
.menu-emissions { position:absolute; left:0; top:calc(100% + 8px); z-index:40; min-width:270px; max-width:min(92vw, 380px); padding:6px; background:var(--blanc); border:3px solid var(--noir); border-radius:4px; box-shadow:5px 5px 0 var(--noir); }
.menu-emissions a { display:flex; align-items:center; gap:10px; padding:10px; border-radius:2px; color:var(--noir); font:600 16px/1.2 var(--f-texte); text-decoration:none; overflow-wrap:anywhere; }
.menu-emissions a:hover, .menu-emissions a:focus-visible { background:var(--jaune); color:var(--noir); outline:none; }
.menu-emissions a.ici { background:var(--jaune-pale); }
.menu-emissions a.menu-accueil { margin-top:4px; padding-top:12px; border-top:1px dashed var(--filet); border-radius:0; color:var(--gris-texte); }
.pastille-couleur { display:inline-block; flex:none; width:16px; height:16px; border:2px solid var(--noir); background:var(--jaune); vertical-align:-3px; }
/* Les onglets appartiennent à une émission : absents de l'accueil et des pages communes ouvertes depuis l'accueil. */
body.sans-emission .menu { display:none; }
.logo-bas { display:flex; flex-wrap:wrap; align-items:flex-end; gap:4px 14px; margin-top:-4px; padding-left:8px; }
.logo-sous {
  font:400 24px/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;
}
.logo-badge { display:inline-block; margin-bottom:10px; padding:0; border-radius:0; background:none; color:var(--bleu-tag); font:400 21px/1 var(--f-main); letter-spacing:0; text-transform:none; white-space:nowrap; transform:rotate(-6deg); }

.officiel { color:var(--noir); font:700 14px/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; }
.officiel-haut { grid-area:officiel; }

.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 18px/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 14px/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-connexion { height:40px; padding:0 14px; border:2px solid var(--noir); border-radius:3px; background:var(--noir); color:var(--blanc); font:700 14px/1 var(--f-texte); letter-spacing:.06em; box-shadow:3px 3px 0 var(--ombre-douce); flex:none; }
.btn-connexion:hover { background:var(--bleu); }

.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 26px/1.1 var(--f-nom); color:var(--noir); overflow-wrap:anywhere; }
.menu-profil-tete span { color:var(--gris-texte); font:800 12px/1 var(--f-texte); letter-spacing:.1em; text-transform:uppercase; }
.menu-profil button { padding:10px; border-radius:2px; color:var(--noir); font:600 16px/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-ligne { grid-area:menu; grid-template-columns:minmax(0,1fr) auto; margin-top:0; gap:12px; }
.menu-ligne > span { display:none; }
.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 15px/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:15px; }

/* Filtres : étiquettes et menus cernés de noir sur blanc. */
.filtres-ligne { grid-area:filtres; border-top:0; padding:2px 0 4px; gap:10px 12px; }
.filtres-ligne label.chk { height:38px; padding:0 10px; gap:8px; background:var(--blanc); border:2px solid var(--noir); border-radius:3px; color:var(--noir); font:700 15px/1 var(--f-texte); }
.filtres-ligne label.chk input { width:18px; height:18px; margin:0; accent-color:var(--noir); }
.filtres-menus { gap:10px 12px; }
.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 15px 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 13px/1 var(--f-texte); }

/* ---------- Corps de page ---------- */
.wrap { max-width:var(--largeur); padding:20px 24px 64px; }
.intro { margin-bottom:14px; align-items:center; }
.intro .leg { display:flex; gap:8px 16px; margin:0; padding:7px 12px; background:var(--blanc); border:2px solid var(--noir); border-radius:4px; box-shadow:3px 3px 0 var(--ombre-douce); color:var(--noir); font:600 14px/1.3 var(--f-texte); }
.intro .leg .badge { margin-right:6px; }
.leg .badge.ia::after { content:none; }
.empty { color:var(--noir); font:600 17px/1.4 var(--f-texte); }
.titre-page { margin:0 0 16px; color:var(--noir); font:400 28px/1.1 var(--f-piece); }
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 14px/1.45 var(--f-texte); transform:rotate(-.4deg);
}
footer a { color:var(--noir); }
.qui { color:var(--gris-texte); font:500 14px/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 15px/1 var(--f-texte); text-decoration:underline; text-underline-offset:3px; }
.retour:hover { color:var(--bleu-tag); }
.mut { color:var(--gris-texte); }

/* ---------- Boutons ---------- */
.btn { min-height:40px; padding:0 14px; border:2px solid var(--noir); border-radius:3px; background:var(--noir); color:var(--blanc); font:700 15px/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 15px/1.1 var(--f-texte); cursor:pointer; }
.tab:hover { background:var(--jaune-pale); }
.tab:disabled:hover { background:var(--blanc); }
.act { color:var(--noir); border-radius:3px; font-family:var(--f-texte); }
.act:hover { color:var(--noir); background:var(--jaune); }
.act:disabled:hover { background:none; }

/* ---------- Statuts ---------- */
/* « Vérifié » : étiquette noire pleine + couronne + mot. « IA » : cadre en pointillés + mot.
   Forme, pictogramme et texte diffèrent : jamais la couleur seule. */
.badge {
  display:inline-flex; align-items:center; gap:4px; height:20px; padding:0 6px; border-radius:2px;
  font:700 11px/1 var(--f-texte); letter-spacing:.06em; text-transform:uppercase; font-style:normal; white-space:nowrap; vertical-align:middle;
}
.badge.verifie { padding-left:5px; background:var(--noir); color:var(--jaune); border:1.5px solid var(--noir); }
.badge.verifie::before {
  content:""; flex:none; width:12px; height:10px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Cpath d='M1 9V2.5l3 2.8L6 1l2 4.3 3-2.8V9z' fill='%23ffd23f'/%3E%3C/svg%3E") center / contain no-repeat;
}
.badge.ia { background:transparent; color:var(--noir); border:1.5px dashed var(--noir); }
.badge.ia::after { content:"· à vérifier"; }

/* ---------- 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 12px/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 15px/1 var(--f-piece); text-decoration:none; }
nav.az a:hover, nav.az a:focus-visible { background:var(--jaune); color:var(--noir); }
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(--jaune); color:var(--noir); box-shadow:inset 0 -3px 0 var(--noir); }

.letter {
  position:relative; justify-self:start; display:flex; align-items:center; justify-content:center;
  min-width:36px; height:36px; margin:12px 0 0; padding:0 8px; scroll-margin-top:12px;
  background:var(--jaune); border:2px solid var(--noir); box-shadow:3px 3px 0 var(--noir);
  color:var(--noir); font:400 18px/1 var(--f-piece);
}
.letter::after {
  content:""; position:absolute; left:calc(100% + 12px); top:50%; width:200px; height:10px; margin-top:-5px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 10'%3E%3Cpath d='M2 6C60 2 130 8 198 4' fill='none' stroke='%23111214' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") left center / 200px 10px no-repeat;
}

/* 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 10px/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 22px/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 14px/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); }
.deplier { padding:4px 0; margin:-4px 0; color:var(--bleu); font:700 14px/18px var(--f-texte); text-decoration:underline; text-underline-offset:2px; }
.deplier:hover { color:var(--bleu-tag); }
.deplier:focus-visible { outline-offset:0; }
.card > h2 > .act { top:22px; right:6px; min-width:30px; height:30px; padding:0; border:2px solid var(--noir); background:var(--blanc-pur); color:var(--noir); }
.card > h2 > .act:not(:last-child) { right:42px; }

/* Passages de la carte (et de la fiche) : une ligne propre par passage, statut à droite. */
.card .chips { flex-direction:column; flex-wrap:nowrap; gap:0; margin:2px 0 0; }
.card .chip, .card .chip.src-ia, .card .chip.src-humain {
  display:block; min-width:0; height:26px; padding:0 9px 0 10px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;
  background:transparent; border:0; border-top:1px dashed var(--filet); border-radius:0;
  color:var(--bleu); font:700 14px/26px var(--f-texte); font-style:normal; font-variant-numeric:tabular-nums;
  text-decoration:underline; text-decoration-thickness:1.5px; text-underline-offset:3px;
}
.card .chip:hover { background:var(--jaune-pale); color:var(--bleu-tag); }
.card .chip:focus-visible { outline-offset:-3px; }
/* Statut en flottant à droite : un flottant ne reçoit pas le soulignement du lien (un élément flex, si). */
.card .chip .badge { float:right; margin:3px 0 0 8px; }

/* Fiche d'un artiste : un grand slap. */
.fiche-nom {
  position:relative; display:inline-block; max-width:100%; margin:10px 0 12px; padding:30px 20px 16px; overflow:hidden;
  background:var(--blanc); border:3px solid var(--noir); border-radius:12px; box-shadow:5px 5px 0 var(--ombre-douce);
  color:var(--noir); font:400 clamp(34px, 7vw, 56px)/1.1 var(--f-nom); overflow-wrap:anywhere; transform:rotate(-1deg);
}
.fiche-nom::before {
  content:"hello · my name is"; position:absolute; left:0; right:0; top:0; height:20px; padding:0 12px;
  background:var(--bleu); color:var(--blanc-pur); font:700 12px/20px var(--f-texte); letter-spacing:.16em; text-transform:uppercase;
}
.fiche-nom::after { content:""; position:absolute; left:0; right:0; bottom:0; height:6px; background:var(--bleu); }
.fiche-nom .act { vertical-align:middle; margin-left:8px; font-size:20px; border:2px solid var(--noir); background:var(--blanc-pur); }
.fiche-infos { margin:0 0 20px; color:var(--noir); font:600 17px/1.4 var(--f-texte); }
.fiche-infos a.inherit { color:var(--noir); }

/* ---------- 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 15px/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 14px/30px var(--f-piece); }
.fiche .card .chips { margin:0; }
.fiche .card .chip:first-child { border-top:0; }

/* Étiquettes de l'historique : forme et texte, contraste ≥ 4.5:1 sur blanc. */
.etiquette { padding:3px 7px; border-radius:2px; font:800 11px/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 11px/1 var(--f-texte); letter-spacing:.12em; text-transform:uppercase; }
td { color:var(--noir); font:600 15px/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. */
.defil-x:has(> .table-passages) { position:relative; background:var(--jaune); border:3px solid var(--noir); box-shadow:5px 5px 0 rgba(17,18,20,.35); }
.defil-x:has(> .table-passages)::before {
  content:"Ordre de passage"; display:block; padding:16px 130px 14px 16px; border-bottom:3px solid var(--noir);
  color:var(--noir); font:400 clamp(24px, 3.4vw, 40px)/1 var(--f-piece); letter-spacing:-.5px;
}
body.mode-edition .defil-x:has(> .table-passages)::after {
  content:"Édition"; position:absolute; top:16px; right:14px; padding:5px 9px;
  background:var(--noir); color:var(--jaune); font:800 13px/1 var(--f-texte); letter-spacing:.1em; text-transform:uppercase;
}
.table-passages { background:var(--blanc-pur); font-size:15px; }
.table-passages th { height:32px; padding:0 8px; border-bottom:2px solid var(--noir); }
body.mode-edition .table-passages th { background:var(--jaune); color:var(--noir); }
.table-passages .c-poignee { width:44px; }
.table-passages .c-video { width:92px; }
.table-passages .c-cypher { width:84px; }
.table-passages .c-tc { width:108px; }
.table-passages .c-actions { width:190px; }
.table-passages td { height:48px; padding:0 8px; line-height:20px; border-bottom:1px solid var(--filet-clair); color:var(--noir); font:600 15px/20px var(--f-texte); }
.table-passages td.c-video-cellule, .table-passages td.c-cypher-cellule { color:var(--gris-texte); }
.table-passages td.c-cypher-cellule { font-weight:700; color:var(--noir); }
/* Numéro d'ordre en Lecture (compteur CSS) ; en Édition la même colonne porte la poignée. */
.table-passages tbody { counter-reset:rang; }
.table-passages tbody tr { counter-increment:rang; }
.table-passages td.poignee { padding:0 4px; color:var(--gris-num); text-align:center; font-size:18px; }
.table-passages td.poignee.vide::before { content:counter(rang); color:var(--gris-num); font:500 12px/1 var(--f-mono); }
.table-passages td.poignee:hover { color:var(--noir); }
.table-passages .lien-fiche { border-bottom:0; color:var(--noir); font:700 17px/20px var(--f-texte); text-decoration:none; }
.table-passages .lien-fiche:hover { color:var(--bleu-tag); text-decoration:underline; }
.table-passages tr > td:nth-child(4) { font:700 17px/20px var(--f-texte); }
.table-passages tr > td:nth-child(5), .table-passages tr > td:nth-child(5) a { font:700 15px/20px var(--f-mono); font-variant-numeric:tabular-nums; }
.table-passages tr > td:nth-child(5) > a[data-lien-passage] { color:var(--bleu); text-decoration:underline; text-decoration-thickness:1.5px; text-underline-offset:3px; }
.table-passages tr > td:nth-child(5) > a[data-lien-passage]:hover { color:var(--bleu-tag); }
/* 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); }
.table-passages tr.src-ia td.c-video-cellule { color:var(--gris-texte); }
.table-passages tr.src-ia > td:nth-child(5) > a[data-lien-passage] { color:var(--bleu); }
@media (min-width:901px) {
  /* Statut à droite de la cellule Artiste, comme une colonne. */
  .table-passages td .badge { float:right; margin:0 0 0 10px; }
}
/* Édition : chaque info devient son contrôle à sa place, dans la même hauteur de 48 px. */
.table-passages td.edit { cursor:text; }
.table-passages td.edit:hover { border-bottom-color:var(--filet-clair); background:var(--jaune-pale); }
.table-passages td.edit input {
  height:34px; padding:0 6px; border:2px solid var(--noir); border-radius:3px; background:var(--blanc-pur); color:var(--noir);
  font:inherit; box-shadow:none;
}
.table-passages td.edit input:focus { outline:3px solid var(--bleu); outline-offset:0; }
.table-passages tr:has(td.edit input) > td { background:var(--jaune-pale); }
.table-passages tr:has(td.edit input) > td:first-child { box-shadow:inset 5px 0 0 var(--jaune); }
.menu-cypher { height:34px; padding:0 2px; border:2px solid var(--noir); border-radius:3px; background:var(--blanc-pur); color:var(--noir); font:700 15px var(--f-texte); }
.menu-cypher:focus { outline:3px solid var(--bleu); outline-offset:0; }
.table-passages td.actions-ligne .act {
  height:32px; min-width:30px; margin-left:3px; padding:0 4px; line-height:28px; text-align:center; text-decoration:none;
  border:2px solid var(--noir); background:var(--blanc-pur); color:var(--noir); font:700 15px/28px var(--f-texte);
}
.table-passages td.actions-ligne .act:hover { background:var(--jaune); }
.table-passages td.actions-ligne .act:disabled { opacity:.3; background:var(--blanc-pur); }
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. */
.table-passages tbody tr.tete-cypher { counter-increment:none; }
.table-passages tr.tete-cypher > td {
  height:30px; padding:0 12px; border-bottom:0; background:var(--noir); color:var(--blanc);
  font:600 13px/30px var(--f-texte); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.table-passages tr.tete-cypher > td > * + * { margin-left:14px; }
.tete-cypher .tete-s { color:var(--jaune); font:400 15px/30px var(--f-piece); letter-spacing:0; }
.tete-cypher .tete-partie { color:var(--chrome); font:800 12px/30px var(--f-texte); letter-spacing:.1em; text-transform:uppercase; }
.tete-cypher .tete-heures { color:var(--chrome); font:500 12px/30px var(--f-mono); font-variant-numeric:tabular-nums; }
.tete-cypher .tete-nb { color:var(--blanc); font:600 13px/30px var(--f-texte); }
@media (max-width:700px) {
  /* style.css met chaque ligne en grille sur téléphone : la tête reste une bande pleine largeur. */
  .table-passages tr.tete-cypher { display:block; }
  .table-passages tr.tete-cypher > td { display:block; height:30px; }
}

/* 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. */
.table-passages tr.passage-cible > td { background:var(--jaune); box-shadow:inset 0 2px 0 var(--noir), inset 0 -2px 0 var(--noir); }
.table-passages tr.passage-cible > td:first-child { box-shadow:inset 5px 0 0 var(--noir), inset 0 2px 0 var(--noir), inset 0 -2px 0 var(--noir); }
.table-passages tr.cypher-cible > td { background:var(--jaune-pale); }
.table-passages tr.passage-cible > td, .table-passages tr.passage-cible .lien-fiche,
.table-passages tr.passage-cible td.c-video-cellule, .table-passages tr.passage-cible td.poignee.vide::before { color:var(--noir); }
.table-passages tr.passage-cible > td:nth-child(5) > a[data-lien-passage] { color:var(--bleu-tag); }

/* Deux colonnes liées (attribut data-deux-colonnes, 1200 px et plus, vue « Par artiste »). */
.deux-colonnes { display:grid; grid-template-columns:minmax(0,1fr) minmax(560px,44%); gap:24px; align-items:start; }
.colonne-artistes { min-width:0; }
.colonne-artistes:has(> .card[data-rappeur]) { display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:18px 20px; align-items:start; }
.colonne-artistes:has(> .card[data-rappeur]) > :not(.card) { grid-column:1 / -1; }
.colonne-passages {
  position:sticky; top:12px; height:calc(100vh - 24px); overflow:auto; overscroll-behavior:contain;
  background:var(--jaune); border:3px solid var(--noir); box-shadow:5px 5px 0 rgba(17,18,20,.35);
}
.colonne-tete { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 16px 12px; border-bottom:3px solid var(--noir); }
.colonne-tete h2 { margin:0; color:var(--noir); font:400 28px/1 var(--f-piece); letter-spacing:-.5px; white-space:nowrap; }
body.mode-edition .colonne-tete h2::after {
  content:"Édition"; margin-left:10px; padding:5px 9px; vertical-align:middle;
  background:var(--noir); color:var(--jaune); font:800 13px/1 var(--f-texte); letter-spacing:.1em; text-transform:uppercase;
}
.menu-partie { height:38px; padding:0 6px; border:2px solid var(--noir); border-radius:3px; background:var(--blanc); color:var(--noir); font:600 15px var(--f-texte); }
.menu-partie:focus { outline:3px solid var(--bleu); outline-offset:1px; }
.menu-partie:disabled { opacity:.6; }
/* Le flyer du tableau est déjà porté par la colonne : pas de second titre ni de cadre. */
.colonne-passages .defil-x:has(> .table-passages) { border:0; box-shadow:none; }
.colonne-passages .defil-x:has(> .table-passages)::before, body.mode-edition .colonne-passages .defil-x:has(> .table-passages)::after { content:none; display:none; }
/* Colonne étroite : forme courte « P1 · S12 » (la même que sur téléphone). */
.colonne-passages .table-passages .video-seule { display:none; }
.colonne-passages .table-passages .video-et-cypher { display:inline; }
.colonne-passages .table-passages .c-tc { width:90px; }
.colonne-passages > .empty { padding:16px; }
/* 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. */
.colonne-passages .table-passages .c-video, .colonne-passages .table-passages td.c-video-cellule { width:0; padding:0; border-left:0; border-right:0; overflow:hidden; font-size:0; }
.colonne-passages .table-passages td.c-video-cellule * { display:none; }
.colonne-passages .table-passages .c-cypher { width:56px; }
.colonne-passages .table-passages td .badge { float:none; display:table; margin:0 0 2px; padding-top:1px; padding-bottom:1px; font-size:10px; line-height:13px; }
.colonne-passages .table-passages td .lien-fiche { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; line-height:18px; }

/* Contributeurs */
.defil-x:has(> .table-contributeurs) { background:var(--blanc-pur); border:3px solid var(--noir); box-shadow:5px 5px 0 rgba(17,18,20,.35); }
.table-contributeurs td, .table-contributeurs th { padding:8px 10px; }
.table-contributeurs th { height:32px; padding-top:0; padding-bottom:0; border-bottom:2px solid var(--noir); }
.table-contributeurs td.edit:hover { background:var(--jaune-pale); }
.table-contributeurs td.edit input { width:100%; border:2px solid var(--noir); border-radius:3px; background:var(--blanc-pur); color:var(--noir); }
.table-contributeurs select { height:34px; border:2px solid var(--noir); border-radius:3px; background:var(--blanc-pur); color:var(--noir); font:600 15px var(--f-texte); }
.table-contributeurs .tab { min-height:34px; font-size:14px; }

/* ---------- 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); }
.carte-video-haut { background:var(--jaune); border-bottom:3px solid var(--noir); }
.carte-video-num {
  color:var(--blanc); font:400 56px/1 var(--f-piece); letter-spacing:0;
  -webkit-text-stroke:2px var(--noir); paint-order:stroke fill;
  text-shadow:2px 2px 0 var(--bleu), 4px 4px 0 var(--bleu), 6px 6px 0 var(--bleu-fonce), 8px 8px 0 var(--noir);
}
.carte-video-badge { background:var(--blanc); border:2px solid var(--noir); border-radius:2px; color:var(--noir); font:700 14px/1.2 var(--f-texte); }
.carte-video-badge.vide { background:var(--noir); border-color:var(--noir); color:var(--jaune); }
.carte-video-modif { border:2px solid var(--noir); background:var(--blanc-pur); }
.carte-video-corps h2 { color:var(--noir); font:400 20px/1.1 var(--f-piece); }
.carte-video-barre { height:10px; border:2px solid var(--noir); border-radius:0; background:var(--filet-clair); }
.carte-video-barre span { background:var(--bleu); }
.carte-video-yt { color:var(--noir); font:700 14px/1 var(--f-texte); }

/* ---------- 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 16px/1.4 var(--f-texte); }
dialog::backdrop { background:rgba(17,18,20,.62); }
.dlg-titre { margin:0 0 4px; color:var(--noir); font:400 22px/1.15 var(--f-piece); }
dialog label { margin:14px 0 6px; color:var(--gris-texte); font:800 12px/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 17px 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-haut { min-height:50px; padding:6px 8px 6px 14px; gap:10px; background:var(--bleu); color:var(--blanc-pur); border-bottom:3px solid var(--noir); font:600 15px/1.3 var(--f-texte); }
.lecteur-titre strong { font:800 18px/1.2 var(--f-texte); }
.lecteur-haut .qui { color:var(--blanc-pur); font:600 14px/1.3 var(--f-texte); }
.lecteur-haut .badge.ia { background:var(--blanc); }
.lecteur-haut .badge.verifie { border-color:var(--noir); }
body.mode-edition .lecteur-haut::before {
  content:"Mode Édition"; order:1; flex:none; padding:5px 8px; background:var(--jaune); color:var(--noir); border:2px solid var(--noir);
  font:800 12px/1 var(--f-texte); letter-spacing:.08em; text-transform:uppercase;
}
#lecteur-fermer { order:2; flex:none; width:40px; height:40px; padding:0; border:2px solid var(--blanc-pur); border-radius:3px; color:var(--blanc-pur); font:700 18px/1 var(--f-texte); }
#lecteur-fermer:hover { background:var(--noir); color:var(--blanc-pur); }
#lecteur-fermer:focus-visible { outline:3px solid var(--jaune); outline-offset:1px; }
.lecteur-cadre { background:var(--noir); }
.lecteur-erreur { background:var(--noir); color:var(--blanc); border-top:3px solid var(--jaune); font:600 15px/1.4 var(--f-texte); }
.lecteur-erreur a { color:var(--jaune); }
.lecteur-suivi { padding:12px 14px 0; gap:4px 14px; color:var(--noir); font:600 16px/1.3 var(--f-texte); }
.lecteur-encours strong { font:400 28px/1.1 var(--f-nom); color:var(--noir); }
#lecteur-pos { color:var(--gris-texte); font:500 13px/1.3 var(--f-mono); font-variant-numeric:tabular-nums; }
.lecteur-nav { padding:12px 14px; gap:10px; }
.lecteur-nav .tab { min-height:48px; border-width:3px; box-shadow:3px 3px 0 var(--noir); font:700 15px/1.1 var(--f-texte); }
.lecteur-reglage { padding:0 14px 12px; gap:6px; }
.lecteur-reglage .tab { min-height:46px; min-width:66px; background:var(--noir); color:var(--blanc); border:2px solid var(--noir); font:700 15px/1 var(--f-mono); }
.lecteur-reglage .tab:hover { background:var(--bleu); }
.lecteur-reglage .tab.fin { background:var(--blanc); color:var(--noir); }
.lecteur-reglage .tab.fin:hover { background:var(--jaune-pale); }
.lecteur-reglage .tab:disabled:hover { background:var(--noir); }
.lecteur-reglage .tab.fin:disabled:hover { background:var(--blanc); }
.lecteur-bas { padding:0 14px 12px; gap:8px; }
.lecteur-bas .btn { min-height:46px; box-shadow:none; }
.lecteur-bas .tab { min-height:46px; }
#lecteur-ajouter, #lecteur-solo, #lecteur-meme { background:var(--blanc-pur); color:var(--noir); border-width:3px; }
#lecteur-ajouter:hover, #lecteur-solo:hover, #lecteur-meme:hover { background:var(--jaune-pale); color:var(--noir); }
#lecteur-ajouter:disabled, #lecteur-solo:disabled { background:var(--blanc-pur); }
#lecteur-caler { border-width:3px; }
#lecteur-supprimer { width:46px; min-width:46px; padding:0; border-style:solid; background:var(--blanc-pur); }
#lecteur-supprimer:hover { background:var(--noir); color:var(--jaune); }
/* Bloc Édition : aplat jaune. */
body.mode-edition .lecteur-bas { background:var(--jaune); border-top:3px solid var(--noir); padding-top:12px; }
body.mode-edition .lecteur-ajout { background:var(--jaune); }
.lecteur-ajout label { color:var(--noir); }
.lecteur-ajout input { background:var(--blanc-pur); }
.lecteur-ajout .choix-cypher label { margin:0; }
.lecteur-ajout select { background:var(--blanc-pur); color:var(--noir); }
.lecteur-ajout .act { width:44px; height:44px; border:2px solid var(--noir); background:var(--blanc-pur); color:var(--noir); }

/* 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 15px/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:20px; }
  .logo-badge { font-size:18px; }
  .menu .tab { padding:0 12px; font-size:14px; }
}
/* 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; }
  .table-passages .badge.ia::after { content:none; }
}
@media (max-width:700px) {
  .table-passages td { height:44px; }
  .table-passages td.actions-ligne .act { height:36px; min-width:36px; padding:0 8px; font-size:16px; line-height:32px; }
  .table-passages td.actions-ligne .cypher-mobile .menu-cypher { height:36px; }
  .defil-x:has(> .table-passages)::before { padding-right:110px; }
  dialog.lecteur { max-width:none; border:0; border-radius:0; box-shadow:none; }
  .lecteur-encours strong { font-size:26px; }
}
/* 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:20px; padding-bottom:8px; white-space:normal; max-width:100%; }
  .logo-badge { font-size:17px; margin-bottom:8px; }
  .outils { gap:8px; }
  .entete input[type=search], .entete input[type=search]:focus { height:48px; font-size:17px; 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 14px/1 var(--f-texte); letter-spacing:.04em; text-transform:uppercase; }
  .menu .tab[aria-pressed=true] { box-shadow:3px 3px 0 var(--noir); }
  .filtres-ligne { gap:6px; padding:0 0 2px; }
  .filtres-menus { gap:6px; }
  .filtres-ligne label.chk { height:44px; padding:0 7px; gap:6px; font-size:14px; }
  .filtres-ligne select { height:44px; padding-left:3px; padding-right:3px; font-size:14px; }
  .wrap { padding:16px 16px 56px; }
  .intro .leg { font-size:13px; padding:6px 10px; }
  #res:has(> .card[data-rappeur]) { grid-template-columns:minmax(0,1fr); gap:14px; }
  nav.az a { min-width:30px; height:32px; }
  .letter::after { width:140px; background-size:140px 10px; }
  .card .chip, .card .chip.src-ia, .card .chip.src-humain { height:34px; line-height:34px; }
  .card .chip .badge { margin-top:7px; }
  .defil-x:has(> .table-passages)::before { padding:14px 104px 12px 12px; }
  body.mode-edition .defil-x:has(> .table-passages)::after { top:14px; right:10px; }
  .fiche-nom { padding:28px 14px 14px; }
}

/* ---------- É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; }
[data-edition-panneau] .table-passages td { height:54px; }
[data-edition-panneau] .table-passages .c-actions { width:96px; } /* ▶ et ✎ (le ✔ est dans le panneau, 29-09) */
[data-edition-panneau] .table-passages td.actions-ligne { text-align:left; padding-left:6px; }
[data-edition-panneau] .table-passages td.actions-ligne .act { height:36px; min-width:36px; margin:0 6px 0 0; padding:0 6px; font-size:16px; line-height:32px; }
[data-edition-panneau] .table-passages td.c-debut-cellule { color:var(--noir); }
/* 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). */
.statut-picto { position:relative; display:inline-block; box-sizing:border-box; width:22px; height:22px; margin:0 9px 0 0; border-radius:50%; vertical-align:-5px; }
.statut-picto.verifie {
  background:var(--noir) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Cpath d='M1 9V2.5l3 2.8L6 1l2 4.3 3-2.8V9z' fill='%23ffd23f'/%3E%3C/svg%3E") center / 13px 11px no-repeat;
}
.statut-picto.ia { background:var(--blanc-pur); border:2px dashed var(--noir); }
[data-edition-panneau] .table-passages td.c-artiste-cellule .lien-fiche { vertical-align:middle; }
/* Colonne de droite : Vidéo et Cypher masqués (la tête de cypher les dit déjà). */
[data-edition-panneau] .colonne-passages .table-passages .c-cypher,
[data-edition-panneau] .colonne-passages .table-passages td.c-cypher-cellule { width:0; padding:0; border-left:0; border-right:0; overflow:hidden; font-size:0; }
[data-edition-panneau] .colonne-passages .table-passages .c-tc { width:84px; }
/* Statut et nom sur UNE ligne dans la colonne aussi (la règle générale y met le nom en bloc). */
[data-edition-panneau] .colonne-passages .table-passages td.c-artiste-cellule .lien-fiche { display:inline; }

/* Passage en cours d'édition et passage tout juste enregistré. */
[data-edition-panneau] .table-passages tr.en-edition > td { background:var(--jaune-pale); }
[data-edition-panneau] .table-passages tr.en-edition > td:first-child { box-shadow:inset 6px 0 0 var(--bleu); }
[data-edition-panneau] .table-passages tr.vient-detre-modifie > td { background:var(--jaune); box-shadow:inset 0 2px 0 var(--noir), inset 0 -2px 0 var(--noir); }
[data-edition-panneau] .table-passages tr.vient-detre-modifie td.poignee.vide::before,
[data-edition-panneau] .table-passages tr.vient-detre-modifie td.c-video-cellule { color:var(--noir); }
.table-passages td.actions-ligne .btn-panneau[aria-expanded=true] { background:var(--noir); color:var(--jaune); }

/* Panneau : fond blanc, bordure noire épaisse, sous le passage sur toute la largeur. */
.table-passages tbody tr.panneau-edition { counter-increment:none; }
.table-passages tr.panneau-edition > td { height:auto; padding:0; overflow:visible; white-space:normal; background:var(--jaune-pale); border-bottom:2px solid var(--noir); }
.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 16px/1.35 var(--f-texte); }
.panneau-titre { display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 12px; margin:0 0 12px; color:var(--noir); font:400 18px/1.15 var(--f-piece); }
.panneau-titre span { color:var(--gris-texte); font:700 14px/1.2 var(--f-texte); letter-spacing:.04em; }
.panneau-champs { display:grid; grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1.6fr); gap:12px 14px; align-items:end; }
.panneau-champ { min-width:0; }
.panneau-champ label, .panneau-statut legend { display:block; margin:0 0 5px; padding:0; color:var(--noir); font:800 13px/1.2 var(--f-texte); letter-spacing:.08em; text-transform:uppercase; }
.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 16px/1 var(--f-texte);
}
.panneau input.heure { font:700 15px/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; }
.panneau-statut { grid-column:1 / -1; display:flex; flex-wrap:wrap; align-items:center; gap:8px 10px; min-width:0; margin:0; padding:0; border:0; }
.panneau-statut legend { float:left; width:100%; }
.panneau-radio { display:inline-flex; align-items:center; gap:8px; height:40px; box-sizing:border-box; padding:0 14px 0 10px; border:2px solid var(--noir); border-radius:3px; background:var(--blanc-pur); color:var(--noir); font:700 15px/1 var(--f-texte); cursor:pointer; }
.panneau-radio:has(input:checked) { background:var(--jaune); }
.panneau-radio input { width:18px; height:18px; margin:0; accent-color:var(--noir); }
.panneau-radio:has(input:focus-visible) { outline:3px solid var(--bleu); outline-offset:2px; }
.panneau-boutons { display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-top:16px; }
.panneau-boutons .btn, .panneau-boutons .tab { min-height:40px; }
.panneau-boutons .tab:disabled { opacity:.45; cursor:default; }
.panneau-boutons .panneau-supprimer { display:inline-flex; align-items:center; justify-content:center; width:40px; min-width:40px; padding:0; margin-left:auto; flex:0 0 auto; }
.panneau-supprimer .icone { width:20px; height:20px; }
.panneau-supprimer:hover { background:var(--noir); color:var(--jaune); }

/* Colonne de droite (560 px) : deux champs par rangée. */
.colonne-passages .panneau-champs { grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
.colonne-passages .panneau-artiste, .colonne-passages .panneau-cypher { grid-column:1 / -1; }
@media (max-width:900px) {
  .panneau-champs { grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
  .panneau-artiste, .panneau-cypher { grid-column:1 / -1; }
}
@media (max-width:700px) {
  /* style.css met chaque ligne en grille : le panneau reste un bloc pleine largeur. */
  [data-edition-panneau] .table-passages td { height:44px; }
  [data-edition-panneau] .table-passages td.actions-ligne { height:auto; padding:0 0 8px 6px; }
  .table-passages tr.panneau-edition, .table-passages tr.panneau-edition > td { display:block; height:auto; }
  .panneau { margin:6px 0 12px; padding:12px; }
}
/* Téléphone (375 px) : champs empilés. */
@media (max-width:560px) {
  .panneau-champs { grid-template-columns:minmax(0,1fr); }
  .panneau-boutons .btn, .panneau-boutons .tab { flex:1 1 auto; }
  .panneau-boutons .panneau-supprimer { flex:0 0 auto; min-height:44px; width:44px; min-width:44px; }
}

/* 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; }
  body.entete-fixe nav.az { top:calc(var(--haut-entete, 0px) + 8px); }
  body.entete-fixe .letter { scroll-margin-top:calc(var(--haut-entete, 0px) + 120px); }
  .letter { scroll-margin-top:120px; }
}

/* Chiffres (29-09) : bandeau du flyer, compteur de la barre de lettres, heures en chasse fixe. */
.bandeau-chiffres { margin:0; padding:8px 14px; background:var(--noir); color:var(--jaune); font:600 14px/1.3 var(--f-texte); letter-spacing:.02em; }
.bandeau-chiffres strong { font:400 15px/1 var(--f-piece); color:var(--jaune); }
nav.az .compte-az { margin-left:auto; padding-left:12px; color:var(--chrome); font:600 13px/1 var(--f-texte); white-space:nowrap; }
.chip .tc { font-family:'JetBrains Mono', ui-monospace, monospace; font-variant-numeric:tabular-nums; font-weight:500; letter-spacing:0; }
@media (max-width: 700px) { nav.az .compte-az { flex-basis:100%; margin:4px 0 0; padding-left:0; } }

/* 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. */
body.entete-fixe { padding-top:var(--haut-entete-plein, 0px); }
body.entete-fixe .entete { position:fixed; top:0; left:0; right:0; z-index:30; background-color:var(--mur); box-shadow:0 3px 0 var(--noir); }
body.entete-fixe .colonne-passages { top:calc(var(--haut-entete, 0px) + 12px); height:calc(100vh - var(--haut-entete, 0px) - 24px); }
body.entete-reduit .entete-in { padding-top:8px; padding-bottom:8px; row-gap:6px; }
body.entete-reduit .logo-piece { width:170px; }
body.entete-reduit .logo-bas, body.entete-reduit .officiel { display:none; }

/* 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. */
.retour-haut { position:fixed; right:16px; bottom:16px; z-index:25; display:inline-flex; align-items:center; justify-content:center; width:48px; height:48px; padding:0; border:2px solid var(--noir); border-radius:50%; background:var(--noir); color:var(--jaune); box-shadow:3px 3px 0 var(--ombre-douce); cursor:pointer; }
.retour-haut[hidden] { display:none; }
.retour-haut svg { width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; }
.retour-haut:focus-visible { outline:3px solid var(--bleu); outline-offset:2px; }

/* ---------- Vidéo record (#51) ---------- */
dialog label.case-a-cocher { color:var(--noir); }

/* 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. */
@media (min-width:1200px) {
  body.deux-colonnes-actives .deux-colonnes { height:var(--haut-colonnes, calc(100vh - 220px)); align-items:stretch; }
  body.deux-colonnes-actives .colonne-artistes { height:100%; overflow:auto; overscroll-behavior:contain; padding:0 8px 16px 2px; align-content:start; grid-auto-rows:max-content; }
  body.deux-colonnes-actives .colonne-artistes nav.az { top:0; }
  body.deux-colonnes-actives .colonne-passages { position:relative; top:auto; height:100%; }
  body.entete-fixe.deux-colonnes-actives { padding-top:var(--haut-entete, 0px); }
}

/* Survol d'un passage d'une autre partie (29-09) : indication sous la pastille, sans rien
   déplacer (positionnée par-dessus). */
.colonne-artistes a[data-lien-passage] { position:relative; }
.colonne-artistes a.survol-autre-partie::after {
  content:attr(data-indice); position:absolute; left:0; top:calc(100% + 4px); z-index:6; white-space:nowrap;
  padding:5px 8px; background:var(--noir); color:var(--jaune); border-radius:3px; box-shadow:3px 3px 0 var(--ombre-douce);
  font:600 13px/1.2 var(--f-texte); text-decoration:none; pointer-events:none;
}

/* ---------- 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 minmax(0,1fr) auto auto; grid-template-areas:"logo 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:17px; padding-bottom:7px; background-size:100% 8px; }
html[data-entete-m2] .logo-badge { font-size:15px; margin:0; transform:rotate(-4deg); }
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:14px; }
html[data-entete-m2] .profil { grid-area:profil; }
html[data-entete-m2] body.entete-reduit .entete-in { padding:12px 24px; row-gap:10px; }
@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 minmax(0,1fr) auto; grid-template-areas:"logo recherche profil" "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" "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. */
.recherche-champ {
  display:flex; align-items:center; gap:6px; min-height:48px; padding:0 8px 0 44px; box-sizing:border-box;
  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;
}
.recherche-champ:focus-within { outline:3px solid var(--bleu); outline-offset:2px; }
.recherche-pastilles { display:contents; }
html[data-entete-m2] .recherche-champ input[type=search], html[data-entete-m2] .recherche-champ input[type=search]:focus {
  flex:1 1 120px; min-width:80px; height:42px; padding:0 4px; border:0; border-radius:0; box-shadow:none; outline:none; background:transparent;
}
.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 15px/1 var(--f-texte); white-space:nowrap; cursor:pointer; }
.pastille .croix { font-size:18px; 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 11px/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 16px/1.2 var(--f-texte); }
.sug-d { margin-left:auto; color:var(--gris-texte); font:500 14px/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 13px/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. */
html[data-entete-m2] .intro { min-height:44px; }
.colonne-tete .btn-ajout-colonne { flex:none; width:38px; height:38px; min-height:0; padding:0; font:700 22px/1 var(--f-texte); }
/* Titre de colonne un peu plus petit (M2) : en Édition, la tête doit aussi loger « + Ajouter ». */
html[data-entete-m2] .colonne-tete { gap:10px; }
html[data-entete-m2] .colonne-tete h2 { font-size:24px; }
/* 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:13px; letter-spacing:0; }
}
/* Nombre de résultats dans le champ (M2) : à droite, en gris, seulement quand la liste est réduite. */
.recherche-compte { flex:none; padding:0 6px; color:var(--gris-num); font:600 14px/1 var(--f-texte); white-space:nowrap; }
.recherche-compte[hidden] { display:none; }
@media (max-width:560px) { .recherche-compte .compte-artistes { display:none; } .recherche-compte { font-size:13px; padding:0 2px; } }
/* Téléphone : pastilles + compteur + saisie ne tiennent pas toujours sur une ligne ; le champ passe à la ligne. */
@media (max-width:560px) {
  .recherche-champ { flex-wrap:wrap; row-gap:4px; padding:3px 8px 3px 40px; background-position:12px 22px; }
}
/* 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. */
html[data-entete-m2] .intro { justify-content:flex-end; }
html[data-entete-m2] body.deux-colonnes-actives .intro { display:none; }

/* ---------- 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-fermer { position:absolute; top:6px; right:6px; width:32px; height:32px; padding:0; border:0; border-radius:3px; background:none; color:var(--noir); font:700 18px/1 var(--f-texte); cursor:pointer; }
.panneau-fermer:hover { background:var(--jaune); }
.panneau-fermer:focus-visible { outline:3px solid var(--bleu); outline-offset:1px; }
.panneau-ligne { display:flex; flex-wrap:wrap; align-items:center; gap:10px 12px; margin-right:34px; }
.panneau-ligne + .panneau-ligne { margin-top:10px; }
.panneau-ligne .panneau-champ { min-width:0; }
.panneau-artiste, .panneau-cypher { flex:1 1 180px; }
.panneau-heures { display:flex; align-items:center; gap:6px; flex:none; }
.panneau-heures .panneau-champ { width:92px; }
.panneau-heures .fleche { color:var(--gris-num); font:600 16px/1 var(--f-mono); }
.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). */
.panneau-statut { grid-column:auto; display:inline-flex; flex:none; gap:0; flex-wrap:nowrap; }
.panneau-statut .panneau-radio { position:relative; height:40px; padding:0 14px; border-radius:0; gap:0; }
.panneau-statut .panneau-radio + .panneau-radio { border-left:0; }
.panneau-statut .panneau-radio:first-of-type { border-radius:3px 0 0 3px; }
.panneau-statut .panneau-radio:last-of-type { border-radius:0 3px 3px 0; }
.panneau-statut .panneau-radio input { position:absolute; opacity:0; width:1px; height:1px; margin:0; }
.panneau-statut .panneau-radio:has(input[value=estime]:checked) { background:var(--noir); color:var(--blanc); }
.panneau-boutons { margin-top:12px; gap:8px; }
.panneau-boutons .panneau-icone { width:40px; min-width:40px; padding:0; font:700 18px/1 var(--f-texte); }
@media (max-width:560px) {
  .panneau-heures { flex:1 1 100%; }
  .panneau-heures .panneau-champ { flex:1 1 0; width:auto; }
  .panneau-statut { flex:1 1 100%; }
  .panneau-statut .panneau-radio { flex:1 1 0; justify-content:center; height:44px; }
  .panneau-boutons .panneau-icone { min-height:44px; width:44px; min-width:44px; flex:0 0 auto; }
  .panneau-fermer { width:40px; height:40px; top:4px; right:4px; }
}
/* La légende masquée ne doit pas garder la largeur de 100 % de l'ancienne règle (débordement). */
.panneau-statut legend.visuellement-masque { float:none; width:1px; }
/* Sommaire des cyphers (vue Vidéos) en direction D. */
.sommaire-cyphers { margin-top:12px; border-top:2px dashed var(--filet); padding-top:10px; }
.sommaire-cyphers summary { color:var(--noir); font:700 15px/1.3 var(--f-texte); text-decoration:underline; text-underline-offset:3px; }
.sommaire-cyphers summary:hover { color:var(--bleu); }
.sommaire-cyphers li { padding:6px 0; border-bottom:1px solid var(--filet-clair); font:500 15px/1.35 var(--f-texte); }
.sommaire-cyphers li:last-child { border-bottom:0; }
.sommaire-cypher { color:var(--noir); font:400 14px/1.3 var(--f-piece); }
.sommaire-heure { color:var(--gris-texte); font:500 13px/1.3 var(--f-mono); }
.sommaire-noms a { color:var(--noir); text-decoration-color:var(--bleu); text-underline-offset:3px; }
.sommaire-noms a:hover { color:var(--bleu); }
.sommaire-cyphers li.sans-cypher .sommaire-cypher { font:700 13px/1.3 var(--f-texte); color:var(--gris-texte); }
/* Un sommaire déplié n'étire pas les autres cartes de la rangée (29-09). */
.grille-videos { align-items:start; }
.carte-video-haut { border-radius:3px 3px 0 0; }
.sommaire-cyphers[open] > ol { left:-19px; right:-19px; padding:6px 14px; background:var(--blanc-pur); border:3px solid var(--noir); border-radius:4px; box-shadow:5px 5px 0 var(--noir); }

/* ---------- 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. */
  body.deux-colonnes-actives .colonne-artistes { display:flex; align-items:flex-start; gap:12px; }
  .colonne-artistes > .rail-az { position:sticky; top:0; z-index:4; flex:none; width:30px; }
  .colonne-artistes > .liste-az { flex:1 1 auto; min-width:0; display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:18px 20px; align-items:start; align-content:start; }
  .colonne-artistes > .liste-az > :not(.card) { grid-column:1 / -1; }
  .rail-az nav.az { position:static; flex-direction:column; flex-wrap:nowrap; align-items:stretch; gap:1px; min-height:0; margin:0; padding:4px 0; background:none; border-radius:0; }
  .rail-az nav.az::before, .rail-az nav.az .compte-az { display:none; }
  .rail-az nav.az a { min-width:0; width:30px; height:min(24px, calc((var(--haut-colonnes, 700px) - 16px) / 28)); padding:0; border-radius:3px; color:var(--noir); font:400 13px/1 var(--f-piece); }
  .rail-az nav.az a:hover, .rail-az nav.az a:focus-visible { background:var(--noir); color:var(--jaune); }
  .rail-az nav.az a.actif { background:var(--jaune); color:var(--noir); box-shadow:inset 0 0 0 2px var(--noir); }

  /* Colonne Ordre de passage : titre + menu, bandeau, ligne des intitulés restent en haut. */
  body.deux-colonnes-actives .colonne-passages .defil-x { overflow:visible; }
  body.deux-colonnes-actives .colonne-passages .colonne-tete { position:sticky; top:0; z-index:7; background:var(--jaune); }
  body.deux-colonnes-actives .colonne-passages .bandeau-chiffres { position:sticky; top:var(--h-tete, 67px); z-index:6; }
  body.deux-colonnes-actives .colonne-passages .table-passages thead th { position:sticky; top:calc(var(--h-tete, 67px) + var(--h-bandeau, 34px)); z-index:6; }
}
/* Carte ciblée par un clic sur un nom d'artiste (29-09) : surlignée 2,5 s. */
.card.carte-ciblee { outline:4px solid var(--bleu); outline-offset:4px; }
.sommaire-aller:hover .sommaire-cypher, .sommaire-aller:focus-visible .sommaire-cypher { color:var(--bleu); }
.sommaire-aller:focus-visible { outline:3px solid var(--bleu); outline-offset:2px; }
.filtres-histo select { height:40px; padding:0 8px; border:2px solid var(--noir); border-radius:3px; background:var(--blanc); color:var(--noir); font:600 15px var(--f-texte); }
.filtres-histo select:focus { outline:3px solid var(--bleu); outline-offset:1px; }
.pseudo-histo:hover { color:var(--bleu); }
@media (max-width:560px) { .filtres-histo select { flex:1 1 100%; height:44px; } }

/* ---------- Page À propos (29-09) : en-tête réduit à la pièce, texte sur une feuille blanche ---------- */
.entete-page-texte .entete-in { display:block; max-width:820px; padding:18px 24px 6px; }
.entete-page-texte .logo { display:inline-flex; }
.page-texte { max-width:820px; margin:12px auto 64px; padding:28px 36px 32px; background:var(--blanc-pur); border:3px solid var(--noir); border-radius:6px; box-shadow:6px 6px 0 rgba(17,18,20,.35); color:var(--noir); font:500 17px/1.6 var(--f-texte); }
.page-texte h1 { margin:0 0 14px; font:400 34px/1.1 var(--f-piece); color:var(--noir); }
.page-texte h2 { display:inline-block; margin:28px 0 8px; padding:4px 10px 2px; background:var(--jaune); font:400 17px/1.2 var(--f-piece); color:var(--noir); }
.page-texte p { margin:0 0 12px; line-height:1.6; }
.page-texte a:not(.btn):not(.logo) { color:var(--bleu); text-underline-offset:3px; }
.page-texte a:not(.btn):not(.logo):hover { color:var(--bleu-tag); }
.page-texte .btn { display:inline-flex; align-items:center; margin-top:14px; text-decoration:none; }
@media (max-width:560px) {
  .entete-page-texte .entete-in { padding:14px 16px 4px; }
  .page-texte { margin:10px 12px 48px; padding:20px 18px 24px; font-size:16px; }
  .page-texte h1 { font-size:28px; }
}

/* ---------- 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à. */
  html[data-edition-panneau][data-tetes-cypher] .table-passages tr[data-passage] { grid-template-columns:minmax(0,1fr) auto auto; column-gap:6px; padding-left:8px; }
  html[data-edition-panneau][data-tetes-cypher] .table-passages td.c-video-cellule { display:none; }
  html[data-edition-panneau] .table-passages tr[data-passage] > td.c-debut-cellule { display:flex; align-items:center; height:44px; padding-top:0; padding-bottom:0; }
  html[data-edition-panneau] .table-passages td.actions-ligne { grid-column:auto; height:auto; padding:0 4px 0 0; text-align:right; white-space:nowrap; }
  html[data-edition-panneau] .table-passages td.actions-ligne .act { width:44px; min-width:44px; height:44px; line-height:40px; margin:0 0 0 4px; }
  /* 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à. */
  html[data-edition-panneau] .table-passages td.c-artiste-cellule { display:flex; align-items:center; gap:6px; min-width:0; white-space:normal; text-overflow:clip; }
  html[data-edition-panneau] .table-passages td.c-artiste-cellule .statut-picto { flex:none; }
  .table-passages td.c-artiste-cellule a.lien-fiche { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; line-clamp:2; overflow:hidden; min-width:0; line-height:1.2; padding:4px 0; overflow-wrap:anywhere; }
  /* 3. « + Ajouter » (Édition) en bouton flottant : plus de ligne vide réservée sous les onglets. */
  html[data-entete-m2] .intro { min-height:0; margin:0; }
  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:16px; }
  nav.az a:hover, nav.az a.actif { background:var(--noir); color:var(--jaune); }
  /* 5. Zones touchables agrandies sans grossir le texte ni décaler la mise en page. */
  .card .deplier { padding:7px 0; margin:-7px 0; }
  .card a.inherit { display:inline-block; padding:12px 0; margin:-12px 0; }
  .sommaire-noms { line-height:2.1; }
  .sommaire-noms a { padding:6px 0; }
  .sommaire-aller { min-height:40px; align-items:center; }
  .sommaire-cyphers summary { padding:8px 0; }
}
/* 2. Lecteur : le bouton « de la liste » sur sa propre ligne, les deux autres entiers. */
@media (max-width:700px) { .lecteur-nav .lecteur-liste { order:3; flex:1 1 100%; } }

/* ---------- Artiste à identifier (30-09) ---------- */
/* Ordre de passage : « ? À identifier », l'indice dessous. */
.a-identifier { display:inline-flex; flex-direction:column; vertical-align:middle; min-width:0; max-width:100%; line-height:1.2; padding:4px 0; white-space:normal; }
.a-identifier-nom { font-style:italic; color:var(--gris-texte); }
.a-identifier .indice, .chip .indice, #lecteur-titre .indice { color:var(--gris-texte); font-size:.85em; overflow-wrap:anywhere; }
/* Ajout (formulaire et lecteur) : bouton « Je ne sais pas qui c'est », indice dessous. */
.btn-inconnu { margin-top:6px; }
#dlg label[hidden], #dlg input[hidden], #lecteur-inconnu[hidden], #lecteur-indice[hidden] { display:none; }
.lecteur-ajout .ligne-inconnu { margin-top:8px; flex-wrap:wrap; }
.lecteur-ajout .ligne-inconnu input { flex:1 1 14em; }
/* Panneau ✎ : l'indice prend toute la ligne. */
.panneau-indice { flex:1 1 100%; }
.panneau-indice input { width:100%; }
/* Téléphone : la cellule est à hauteur fixe ; nom, indice et lien y tiennent sur 3 lignes. */
@media (max-width:700px) {
  html[data-edition-panneau] .table-passages td.c-artiste-cellule:has(.a-identifier) { height:auto; min-height:44px; }
}
/* 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à). */
@media (max-width:700px) {
  .a-identifier-nom { white-space:nowrap; }
  .tete-cypher .tete-nb { display:none; }
}

/* ---------- 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 20px/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:13px; 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 14px/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:13px; font-weight:600; border-width:1px; }
dialog .pied .tab-supprimer { display:inline-flex; align-items:center; gap:6px; }
dialog .pied .tab-supprimer .icone { width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }

/* ---------- 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; }
.accueil-emissions, .accueil-carte { display:flex; flex-direction:column; gap:14px; min-width:0; }
.titre-zone { display:flex; align-items:center; gap:12px; margin:0; color:var(--noir); font:400 20px/1.2 var(--f-piece); }
.titre-zone::after { content:""; flex:1; height:3px; background:var(--noir); }
.bande-emission { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) auto; align-items:stretch; min-width:0; background:var(--blanc); border:3px solid var(--noir); box-shadow:4px 4px 0 rgba(17,18,20,.4); color:var(--noir); text-decoration:none; }
.bande-emission:hover, .bande-emission:focus-visible { color:var(--noir); transform:translate(-2px,-2px); box-shadow:6px 6px 0 var(--noir); }
.bande-emission:focus-visible { outline:3px solid var(--bleu); outline-offset:3px; }
.bande-nom { display:flex; align-items:center; padding:18px 14px; background:var(--bande, var(--jaune)); color:var(--bande-texte, var(--noir)); border-right:3px solid var(--noir); font:400 20px/1.1 var(--f-piece); overflow-wrap:anywhere; }
.bande-chiffres { display:flex; flex-direction:column; justify-content:center; gap:2px; min-width:0; padding:10px 14px; font:600 16px/1.3 var(--f-texte); }
.bande-chiffres small { color:var(--gris-texte); font:500 14px/1.3 var(--f-texte); }
/* Émission à venir : annoncée, sans lien ni survol ; la petite carte « + à venir ! » ferme la liste. */
.bande-emission.a-venir { position:relative; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); overflow:hidden; background:var(--blanc); cursor:default; }
/* Même réaction au survol que les émissions ouvertes (demande d'Alice, 02-10), même sans lien. */
.bande-emission.a-venir:hover { transform:translate(-2px,-2px); box-shadow:6px 6px 0 var(--noir); }
/* 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 13px/1 var(--f-texte); letter-spacing:.14em; text-transform:uppercase; white-space:nowrap; }
.bande-emission.a-venir .bande-nom { opacity:.82; }
.bande-bientot { align-self:flex-start; padding:3px 9px; border:2px dashed var(--noir); color:var(--noir); font:400 17px/1.1 var(--f-main); transform:rotate(-2deg); }
.carte-a-venir { align-self:flex-start; margin:4px 0 0 6px; padding:8px 14px 6px; background:var(--blanc-pur); border:3px solid var(--noir); box-shadow:4px 4px 0 var(--bleu); color:var(--bleu-tag); font:400 22px/1 var(--f-main); transform:rotate(-3deg); }
.bande-fleche { display:flex; align-items:center; padding:0 16px; background:var(--noir); color:var(--blanc); font:400 22px/1 var(--f-piece); }
/* 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); }
}
@media (max-width:560px) {
  .bande-emission { grid-template-columns:minmax(0,1fr) auto; }
  .bande-nom { grid-column:1 / -1; border-right:0; border-bottom:3px solid var(--noir); }
}
@media (prefers-reduced-motion:reduce) {
  .bande-emission:hover, .bande-emission:focus-visible, .bande-emission.a-venir:hover { transform:none; }
}
/* 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 20px/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 17px/1.2 var(--f-piece); }
.faq-nombre { flex:none; color:var(--gris-texte); font:700 13px/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 16px/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 16px/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. */
.aide-page { margin:-8px 0 14px; max-width:70ch; color:var(--gris-texte); }
.table-emissions .c-emission { white-space:nowrap; font-weight:700; }
.table-emissions .c-actions-emission { white-space:nowrap; }

/* ---------- 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 12px/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 38px/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 24px/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 15px/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:400 15px/1.2 var(--f-piece); }
.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 16px/1.15 var(--f-piece); overflow-wrap:anywhere; }
.fa-emission small { margin-left:auto; flex:none; font:700 13px/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 15px/1.3 var(--f-texte); }
.fa-ou small { display:block; color:var(--gris-texte); font:500 13px/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 15px/1 var(--f-mono); font-variant-numeric:tabular-nums; text-decoration:none; white-space:nowrap; }
.fa-heure::before { content:"▶"; color:var(--bleu); font-size:10px; }
.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 13px/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:30px; }
}

/* 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 15px/1.4 var(--f-texte); }
.dlg-note a { color:var(--bleu); font-weight:700; }