/* OnSortQuand.fr - feuille unique, aucune dépendance externe */
:root{
  --bg:#0b0b14; --bg2:#11101e; --carte:#14132296;
  --violet:#8b5cf6; --bleu:#38bdf8; --vert:#34d399;
  --texte:#eae8f4; --sourd:#9d99bd; --bord:#8b5cf62b;
  --grad:linear-gradient(100deg,var(--violet),var(--bleu) 55%,var(--vert));
  --fonte:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--bg);color:var(--texte);
  font-family:var(--fonte);line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--bleu);text-decoration:none}
a:hover{text-decoration:underline}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:2px solid var(--vert);outline-offset:2px;border-radius:4px;
}
main{max-width:66rem;margin:0 auto;padding:0 1rem 3rem}

/* en-tête */
.top{
  max-width:66rem;margin:0 auto;padding:1rem;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;
}
.brand{
  font-weight:800;font-size:1.15rem;letter-spacing:.02em;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.btn-search{cursor:pointer;font:inherit;font-size:.85rem;font-weight:700;padding:.4rem .95rem;border-radius:.7rem;border:0;
  color:#fff;text-shadow:0 1px 2px #0006;background:var(--grad)}
.btn-search:hover{filter:brightness(1.08);text-decoration:none}
.top nav{display:flex;gap:1.1rem;align-items:center;position:relative}
.top nav a{color:var(--sourd);font-size:.92rem}
.top nav a:hover{color:var(--texte);text-decoration:none}
.nav-links{display:flex;gap:1.1rem;align-items:center}
/* Burger (☰) dessiné en 3 barres CSS parfaitement centrées verticalement. */
.burger{display:none;position:relative;width:2rem;height:2rem;background:none;border:0;cursor:pointer;padding:0}
.burger span,.burger span::before,.burger span::after{position:absolute;height:2px;width:1.15rem;background:var(--sourd);border-radius:2px;transition:background .15s}
.burger span{top:50%;left:50%;transform:translate(-50%,-50%)}
.burger span::before,.burger span::after{content:"";left:0}
.burger span::before{top:-6px}
.burger span::after{top:6px}
.burger:hover span,.burger:hover span::before,.burger:hover span::after{background:var(--texte)}
/* Format réduit : les liens passent dans le menu ☰ (dropdown à droite, sous la barre, texte centré). */
@media (max-width:700px){
  .burger{display:inline-block}
  .nav-links{display:none;position:absolute;top:100%;right:0;flex-direction:column;align-items:center;gap:.1rem;
    margin-top:.4rem;padding:.5rem .9rem;background:var(--bg2);border:1px solid var(--bord);border-radius:.7rem;
    box-shadow:0 10px 28px #0009;z-index:60;min-width:8rem}
  .nav-links.open{display:flex}
  .nav-links a{padding:.35rem 0;font-size:1rem;width:100%;text-align:center}
}

/* --- Calendrier (page-outil, noindex) --- */
.cal-nav{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin:1rem 0 .6rem}
.cal-nav b{font-size:.95rem}                 /* mois courant : un cran plus petit */
.cal-nav .btn{font-size:.8rem}               /* mois précédent / suivant : un cran plus petit */
.cal{width:100%;min-width:39.5rem;border-collapse:collapse;table-layout:fixed}
.cal th{padding:.4rem;font-size:.8rem;color:var(--sourd);text-align:center;font-weight:600}
.cal td{border:1px solid var(--bord);vertical-align:top;height:4.6rem;width:14.28%;padding:.25rem}
.cal td.hors{background:var(--bg2);border-color:transparent}
.cal td.avec{background:#8b5cf60f}
.cal td.aujourdhui{outline:2px solid var(--bleu);outline-offset:-2px}
.cal .jour-num{display:block;font-size:.72rem;color:var(--sourd);margin-bottom:.15rem}
.cal td.aujourdhui .jour-num{color:var(--bleu);font-weight:700}
.cal-ev{display:block;font-size:.72rem;line-height:1.2;padding:.2rem .35rem;margin:.15rem 0;border-radius:.35rem;
  background:var(--grad);color:#fff;text-shadow:0 1px 1px #0005;overflow-wrap:anywhere}
.cal-ev:hover{filter:brightness(1.08);text-decoration:none}
.cal-s{display:block;font-size:.66rem;opacity:.85}
.cal-plus{display:block;width:100%;margin:.2rem 0 0;padding:.15rem;font-size:.66rem;text-align:center;
  color:var(--bleu);background:transparent;border:1px solid var(--bord);border-radius:.35rem;cursor:pointer}
.cal-plus:hover{background:#8b5cf622}
/* Mobile étroit : les 7 jours tiennent dans la largeur (fini l'ascenseur horizontal) ; cellules plus
   étroites donc plus HAUTES, textes réduits. `overflow-wrap:anywhere` (ci-dessus) évite tout débordement. */
@media (max-width:700px){
  .cal{min-width:0}
  .cal th{font-size:.6rem;padding:.25rem 0}
  .cal td{height:5rem;padding:.12rem}
  .cal .jour-num{font-size:.6rem;margin-bottom:.1rem}
  .cal-ev{line-height:1.15;padding:.12rem .25rem;margin:.1rem 0} /* taille de police d'artiste inchangée (.72rem) */
  .cal-s{display:none} /* nom de salle masqué en mode compact → affichage allégé */
  .cal-a{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden} /* nom : 2 lignes max + … */
  .cal-ouvert .cal-a{display:inline;-webkit-line-clamp:unset;overflow:visible} /* jour déplié : nom entier */
  .cal-nav b{font-size:.85rem}
}

/* recherche */
.rech-overlay{position:fixed;inset:0;z-index:50;background:#0009;display:flex;justify-content:center;align-items:flex-start;padding:4.5rem 1rem 1rem}
.rech-overlay[hidden]{display:none}
.rech-box{width:100%;max-width:40rem;background:var(--bg2);border:1px solid var(--bord);border-radius:1rem;padding:1rem;box-shadow:0 24px 70px #000b}
.rech-box input{width:100%;font-size:1rem;padding:.75rem .9rem;background:var(--bg);color:var(--texte);border:1px solid var(--bord);border-radius:.6rem}
.rech-box input::placeholder{color:var(--sourd)}
.rech-res{list-style:none;margin:.7rem 0 0;padding:0;max-height:60vh;overflow:auto}
.rech-res li a{display:flex;gap:.6rem;align-items:baseline;padding:.55rem .6rem;border-radius:.5rem;color:var(--texte)}
.rech-res li a:hover{background:#8b5cf622;text-decoration:none}
.res-type{flex:0 0 auto;font-size:.68rem;color:var(--sourd);border:1px solid var(--bord);border-radius:1rem;padding:.05rem .5rem}
.res-sub{color:var(--sourd);font-size:.8rem}
.rech-vide{color:var(--sourd);padding:.6rem;list-style:none}

/* titres */
h1{font-size:clamp(1.5rem,4.5vw,2.3rem);line-height:1.15;margin:.8rem 0 .4rem;font-weight:800}
h1 em{font-style:normal;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
h2{font-size:1.25rem;margin:2.2rem 0 .8rem;font-weight:700}
.sous{color:var(--sourd);margin:0 0 1.6rem;max-width:46rem}
.fil{font-size:.85rem;color:var(--sourd);margin:.8rem 0 0}
.fil a{color:var(--sourd)}

/* grilles de cartes (villes, salles, artistes) */
.grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(13.5rem,1fr));gap:.7rem;padding:0;margin:0;list-style:none}
/* Carrousel : le serveur envoie TOUS les items (SEO), le JS n'en montre que 8 par page. Sans cette
   règle, le navigateur peint d'abord la liste entière puis le JS la réduit — sur l'accueil, 204 cartes
   ramenées à 24, soit 4396 px de hauteur perdus APRÈS le premier affichage : c'est ce qui donnait un
   CLS de 0,29 à PageSpeed. Ici la bonne hauteur est peinte du premier coup.
   Le JS pose .carr-on dès qu'il prend la main et reprend le pilotage item par item ; sans JS, le
   <noscript> du <head> réaffiche tout. Les listes de 8 items ou moins ne sont jamais concernées. */
.grille:not(.carr-on)>li:nth-child(n+9),.evs:not(.carr-on)>li:nth-child(n+9){display:none}
.carte{
  display:flex;align-items:center;gap:.7rem;padding:.7rem .85rem;border:1px solid var(--bord);border-radius:.85rem;
  background:radial-gradient(80% 130% at 10% 0%, #8b5cf626, transparent 58%), var(--carte);color:var(--texte);
}
.carte:hover{text-decoration:none;border-color:#38bdf860;background:radial-gradient(80% 130% at 10% 0%, #38bdf82e, transparent 58%), #1a1830c9}
.carte-img{flex:0 0 auto;width:52px;height:52px;object-fit:cover;border-radius:.5rem;border:1px solid var(--bord)}
.carte-txt{min-width:0}
.carte b{display:block;font-weight:650;font-size:1rem;color:var(--texte);overflow-wrap:anywhere}
.carte span{font-size:.83rem;color:var(--sourd)}

/* listes d'événements : 2 colonnes en desktop, 1 seule sous 700px (voir ci-dessous). clear pour ne pas se coincer près d'une image flottante. */
.evs{list-style:none;padding:0;margin:0;clear:both;display:grid;grid-template-columns:1fr 1fr;gap:.55rem}
/* MÊME seuil que le menu burger (voir plus haut), et en px pour que les deux soient littéralement
   identiques et ne puissent pas diverger. Avant : 52rem/832px, ce qui empilait les événements alors
   que le menu était encore déplié — une zone de 130 px où la page changeait de mise en page par
   morceaux au lieu de basculer d'un coup. */
@media (max-width:700px){ .evs{grid-template-columns:1fr} }
/* navigation du carousel par section */
.carr-nav{display:flex;align-items:center;justify-content:center;gap:.8rem;margin:.7rem 0 .2rem}
.carr-nav button{cursor:pointer;font:inherit;font-size:.83rem;padding:.4rem .85rem;border-radius:.6rem;
  border:1px solid #8b5cf566;background:#8b5cf618;color:var(--texte)}
.carr-nav button:hover:not(:disabled){background:#8b5cf636}
.carr-nav button:disabled{opacity:.4;cursor:default}
.carr-lab{font-size:.8rem;color:var(--sourd);white-space:nowrap}
.ev{
  position:relative;cursor:pointer;
  display:flex;align-items:center;gap:.8rem;padding:.7rem .85rem;
  border:1px solid var(--bord);border-radius:.85rem;
  background:radial-gradient(80% 130% at 10% 0%, #8b5cf626, transparent 58%), var(--carte);
}
.ev:hover{border-color:#38bdf860;background:radial-gradient(80% 130% at 10% 0%, #38bdf82e, transparent 58%), #1a1830c9}
/* lien qui couvre tout le rectangle -> fiche événement ; les sous-liens (artiste/salle/ville) repassent au-dessus */
.ev-cover{position:absolute;inset:0;z-index:1;border-radius:inherit}
.ev-contenu{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:.5rem;justify-content:center}
/* Bouton billetterie à droite de la ligne, à la place de l'ancienne vignette d'artiste.
   z-index:2 OBLIGATOIRE : .ev-cover couvre toute la carte en z-index:1 et avalerait le clic.
   white-space:nowrap pour qu'il ne se coupe jamais en deux lignes dans une carte étroite. */
.ev-billet{position:relative;z-index:2;flex:0 0 auto;align-self:center;white-space:nowrap;
  font-size:.78rem;padding:.4rem .7rem;border-radius:.6rem;
  border:1px solid #8b5cf5aa;background:#8b5cf622;color:var(--texte)}
.ev-billet:hover{background:#38bdf82e;border-color:#38bdf8aa;text-decoration:none}
/* date en carré à gauche (même gabarit que la vignette à droite) : jour / mois / année empilés, centrés */
.ev-date{
  flex:0 0 auto;width:68px;height:68px;border-radius:.6rem;
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  border:1px solid transparent;
  background:linear-gradient(var(--bg2),var(--bg2)) padding-box, var(--grad) border-box;
}
.ev-date .dj{font-size:1.25rem;font-weight:800;line-height:1.05}
.ev-date .dm{font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--sourd);margin-top:.12rem}
.ev-date .dy{font-size:.78rem;color:var(--sourd)}
/* nom + salle/ville (texte simple : toute la carte est un seul lien -> fiche event) */
.ev-artiste{display:block;font-weight:650;color:var(--texte);overflow-wrap:anywhere}
.ev-meta{font-size:.83rem;color:var(--sourd);display:flex;gap:.4rem;flex-wrap:wrap}

/* adresse d'un lieu (pages salle / événement) */
.adresse{color:var(--sourd);font-size:.92rem;margin:.15rem 0 1rem}

footer{
  max-width:66rem;margin:0 auto;padding:1.5rem 1rem 2.5rem;
  color:var(--sourd);font-size:.82rem;border-top:1px solid var(--bord);
}
/* Liens légaux dans la teinte du pied de page : ce sont des mentions obligatoires, pas des appels à
   cliquer — le bleu des liens du site les mettrait plus en avant que le contenu. Soulignés au survol
   (règle globale sur a:hover), donc ils restent identifiables comme liens. */
footer a{color:var(--sourd)}
footer a:hover{color:var(--texte)}

/* ------------ admin ------------ */
.bloc{border:1px solid var(--bord);border-radius:.9rem;padding:1rem;margin:1rem 0;background:var(--carte)}
.bloc h2{margin-top:0}
input[type=text],input[type=password],input[type=date],input[type=time],input[type=url],input[type=search],select,textarea{
  background:var(--bg2);color:var(--texte);border:1px solid var(--bord);border-radius:.5rem;
  padding:.5rem .65rem;font:inherit;font-size:.9rem;max-width:100%;
}
input[type=search]::placeholder{color:var(--sourd)}
/* Hauteur de ligne IMPOSÉE, en pixels, aux champs, aux listes déroulantes et aux boutons. Sans elle
   chacun calcule la sienne — un `select` vaut « normal », un bouton suit sa police légèrement plus
   petite — et les trois s'alignaient à 40,3 / 40,0 / 39,8 px sur une même barre de filtres. Mesuré :
   l'écart est invisible isolément, mais se voit dès qu'ils sont côte à côte.
   22 px + 2×8 px de marge intérieure + 2×1 px de bordure = 40 px pour tout le monde. */
input[type=text],input[type=password],input[type=date],input[type=time],input[type=url],input[type=search],select,button,.btn{
  line-height:22px;
}
textarea{width:100%;min-height:9rem;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.8rem}
button,.btn{
  /* line-height APRÈS font:inherit, et pas avant : la forme courte `font` réinitialise la hauteur de
     ligne, ce qui annulait la règle commune posée plus haut et laissait les boutons 0,2 px plus courts
     que les champs voisins. */
  cursor:pointer;font:inherit;font-size:.88rem;line-height:22px;padding:.5rem .9rem;border-radius:.6rem;
  border:1px solid #8b5cf655;background:#8b5cf61f;color:var(--texte);
}
button:hover,.btn:hover{background:#8b5cf636}
button.ok{border-color:#34d39955;background:#34d3991a}
button.danger{border-color:#f8717155;background:#f871711a}
button.info{border-color:#38bdf855;background:#38bdf81a}
button.warn{border-color:#facc1555;background:#facc151a}
/* survol des boutons colorés : la classe battait button:hover, ils ne s'éclairaient pas (12/09/2026) */
button.ok:hover{background:#34d39936}button.danger:hover{background:#f8717136}button.warn:hover{background:#facc1536}button.info:hover{background:#38bdf836}
.tbl{width:100%;border-collapse:collapse;font-size:.86rem}
.tbl th,.tbl td{padding:.45rem .5rem;border-bottom:1px solid var(--bord);text-align:left;vertical-align:top}
/* Boutons d'action compacts dans les tableaux (Modif./Suppr., Fetcher…) → lignes moins hautes. */
.tbl td button{padding:.28rem .62rem;font-size:.8rem;border-radius:.5rem}
.tbl th{color:var(--sourd);font-weight:600}
/* ---------- ADMIN : largeur ----------
   Le site public tient dans 66rem : c'est une largeur de LECTURE, calée sur des paragraphes. L'admin,
   elle, n'affiche que des tableaux à 5 ou 7 colonnes (nom, proposition, motif, décision…), qui se
   serraient pour rien alors que l'écran est large. +100 px pour elle seule, écrit tel quel plutôt que
   converti en rem : c'est la demande, et on la relit sans calculer.
   L'en-tête et le pied suivent, sinon le contenu déborderait visuellement de son propre bandeau. */
.admin main, .admin .top, .admin footer{max-width:calc(66rem + 100px)}

/* Colonne « Motif » : son contenu est court (« proche », « Sep. - »), il ne doit jamais se couper en
   deux lignes — mais rien ne sert de lui réserver une largeur : la colonne prend ce que son texte
   demande, et rend le reste à la colonne Décision, la seule qui en manque. */
.admin #decider-table th:nth-child(3), .admin #decider-table td:nth-child(3){white-space:nowrap;width:1%}

/* ---------- ADMIN : hiérarchie des titres ----------
   L'admin empile jusqu'à quatre niveaux (section → sous-section → tableau), là où une page publique
   n'en a que deux. Avec les tailles du site, h2 et h3 se distinguaient à peine et on ne voyait plus où
   commençait une sous-section. Tout est sous `.admin` : le site public n'est pas touché.
   Le trait au-dessus des sous-sections fait le reste du travail — c'est lui, plus que la taille, qui
   dit « ici commence autre chose ». */
.admin h1{font-size:1.9rem}
.admin .bloc h2{font-size:1.42rem;margin-bottom:1rem}
.admin h3.sous-sec{font-size:1.12rem;font-weight:700;margin:2.2rem 0 .5rem;padding-top:1.2rem;border-top:1px solid var(--bord)}
/* La PREMIÈRE sous-section d'une section n'a pas de trait : elle suit son h2, la coupure est déjà là. */
.admin .bloc > h2 + h3.sous-sec,
.admin .bloc > h2 + p + h3.sous-sec{border-top:0;padding-top:0;margin-top:.6rem}
.admin h4{font-size:.97rem;font-weight:700;color:var(--sourd);margin:1.4rem 0 .4rem}
/* En-têtes de colonne triables : ils gardent l'aspect d'un en-tête, pas d'un lien — c'est le curseur
   et la flèche qui disent qu'on peut cliquer. Souligner en bleu au milieu d'une ligne d'en-têtes
   attirerait l'œil sur la mauvaise chose. */
.tbl th a.tri{color:inherit;text-decoration:none;cursor:pointer;white-space:nowrap}
.tbl th a.tri:hover{color:var(--bleu);text-decoration:underline}
/* « Ignor. » / « Désignor. » : jaune, pour ne pas être confondu avec le « Suppr. » rouge voisin — les
   deux suppriment, mais pas la même chose, et l'un est définitif quand l'autre ne l'est pas. */
/* Crayon de « Décisions prises » (salles) : un bouton nu, discret à côté du nom, qui ouvre le champ
   de renommage. Pas de bordure ni de fond : ce n'est pas une action, c'est une poignée. */
.crayon{background:none;border:0;padding:0 .2rem;font-size:.85em;line-height:1;cursor:pointer;opacity:.55;vertical-align:baseline}
.crayon:hover{opacity:1;background:none}
/* ⇄ d'inversion d'une décision, même facture que le crayon : une poignée, pas un bouton. */
.inverser{background:none;border:0;padding:0 .25rem;font-size:1em;line-height:1;cursor:pointer;opacity:.55;color:var(--texte)}
.inverser:hover{opacity:1;background:none}
/* Toute .ligne-form (display:flex) doit pouvoir se cacher : sans cette règle, `hidden` perdait contre le
   flex. Vu d'abord sur le champ de renommage (09/09/2026), puis sur la barre « Afficher plus / Tout
   afficher » qui restait visible pendant une recherche, et sur les zones de suggestions vides (15/09/2026). */
.ligne-form[hidden]{display:none}
.btn-ignor{border:1px solid #eab308aa;background:#eab3081f;color:var(--texte)}
.btn-ignor:hover{background:#eab30838;border-color:#facc15}

/* Doublons d'artistes : les deux noms d'une ligne sont deux choix exclusifs. Une fois l'un retenu,
   l'autre s'efface — mais reste cliquable (jamais `disabled`), sinon on ne pourrait plus changer
   d'avis sans relâcher d'abord le premier. */
label.choix{cursor:pointer}
label.choix.ecarte{opacity:.4}
/* Le refus n'est pas un choix de nom : il se lit en retrait des deux autres, pour que l'œil aille
   d'abord aux deux noms en présence. Il ne doit pas non plus être grisé comme un nom « écarté ». */
label.choix-refus{color:var(--sourd);font-size:.92em;white-space:nowrap}
label.choix-refus.ecarte{opacity:1}
.tag{font-size:.72rem;padding:.1rem .5rem;border-radius:1rem;border:1px solid var(--bord);color:var(--sourd)}
.tag.actif{color:var(--vert);border-color:#34d39955}
.tag.masque{color:#f8a5a5;border-color:#f8717155}

#log{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.78rem;white-space:pre-wrap;
  background:var(--bg2);border:1px solid var(--bord);border-radius:.6rem;padding:.7rem;max-height:18rem;overflow:auto}
.ligne-form{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center}
/* Clés de l'admin (08/09/2026) : le libellé AU-DESSUS du champ, parce que la valeur affichée en
   clair cache le placeholder qui disait à quoi sert le champ. */
.cle-champ{display:flex;flex-direction:column;gap:.3rem}.cle-champ small{font-size:.78rem;line-height:1;margin-left:.35rem}
.muted{color:var(--sourd);font-size:.85rem}
details.edit{margin-top:.3rem}
details.edit summary{cursor:pointer;color:var(--bleu);font-size:.8rem}
.filtre{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center;margin:.6rem 0 1rem}
.tblwrap{overflow-x:auto}
.stats-nums{display:flex;flex-wrap:wrap;gap:1.3rem;margin:.5rem 0 .9rem;font-size:.9rem;color:var(--sourd)}
.stats-nums b{color:var(--texte);font-size:1.2rem;margin-right:.15rem}
.stats-graph{width:100%;height:auto;display:block;overflow:visible}
/* « visites max » et « clics max » cachent ou réaffichent leur série au clic (15/09/2026). */
.stats-graph .st-bascule{cursor:pointer}
.stats-graph.sans-v .st-v,.stats-graph.sans-c .st-c{display:none}
.stats-graph.sans-v .st-bascule-v,.stats-graph.sans-c .st-bascule-c{opacity:.45;text-decoration:line-through}
/* Quatre donuts sous l'histogramme, sur une ligne (deux par ligne sur téléphone) — 18/09/2026 */
.donuts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem;margin-top:1.1rem}
@media (max-width:640px){.donuts{grid-template-columns:repeat(2,minmax(0,1fr))}}
.donut{text-align:center;min-width:0}
.donut h3{font-size:.82rem;font-weight:600;color:var(--sourd);margin:0 0 .35rem}
.donut svg{width:84px;height:84px;display:block;margin:0 auto}
.donut ul{list-style:none;margin:.45rem 0 0;padding:0;font-size:.74rem;text-align:left}
.donut li{display:flex;align-items:center;gap:.35rem;color:var(--sourd);line-height:1.5}
.donut li b{margin-left:auto;color:var(--texte);font-weight:600}
.donut .pastille{width:.55rem;height:.55rem;border-radius:50%;flex:none}
/* Seconde ligne de compteurs (les clics) : collée à celle des visiteurs. Aucune couleur particulière —
   le mot « clic » suffit à les distinguer, et deux teintes de chiffres alourdissaient l'ensemble. */
.stats-clics{margin-top:-.5rem}

/* fiche événement */
/* liens d'action (billetterie, YouTube) : pastilles encadrées, même style que "Voir toutes les informations" */
.btn-lien{display:inline-flex;align-items:center;gap:.45rem;font-size:.85rem;padding:.5rem .9rem;border-radius:.7rem;
  margin:.2rem .6rem .2rem 0;border:1px solid #8b5cf5aa;background:#8b5cf622;color:var(--texte)}
/* Le bouton « Partager » est un <button> et non un <a> (rien à indexer, voir evenement.php) : sans
   ces trois propriétés il hériterait de la police du navigateur et n'aurait pas la main au survol. */
button.btn-lien{font:inherit;font-size:.85rem;cursor:pointer}
/* Bouton PRINCIPAL de la fiche événement : celui qui mène à l'achat. Même forme, même taille, même
   place que ses voisins — seule la couleur change, du violet au doré. C'est le contraste chaud/froid
   qui attire l'œil, pas la taille : agrandir le bouton aurait cassé l'alignement de la rangée.
   Le halo est volontairement discret : il détache le bouton du fond sombre sans faire clignoter la page. */
.btn-lien.btn-or{border-color:#eab308cc;background:#eab3082e;box-shadow:0 2px 12px #eab30826}
.btn-lien.btn-or:hover{background:#eab30840;border-color:#facc15}
.btn-lien:hover{background:#8b5cf63a;text-decoration:none}

.intro{color:#cfccdf;border-left:2px solid transparent;
  border-image:var(--grad) 1;padding-left:1rem;margin:0 0 1.4rem}
/* Le texte n'est bridé QUE s'il y a une illustration à sa droite : la colonne s'arrête alors avant
   elle. Sans image, il occupe toute la largeur plutôt que de laisser un vide à droite.
   Sélecteur d'adjacence volontaire : le jour où le cron trouve enfin une image pour cet artiste, la
   figure apparaît juste avant le texte et la règle reprend d'elle-même. Rien à recalculer, rien à
   stocker — la mise en page suit la présence de l'image, pas une décision figée. */
.illus-wrap + .intro{max-width:46rem}
/* Pages sans ligne « .sous » sous le titre (mentions légales, confidentialité) : le texte collait au
   h1. Même respiration que celle qu'apporte .sous ailleurs, et uniquement dans ce cas — partout
   ailleurs un .sous s'intercale, donc la règle ne s'applique pas. */
h1 + .intro{margin-top:1.6rem}
.intro p{margin:.4rem 0}

/* Illustration/photo unique (ville, salle, artiste, événement) : à droite du texte,
   bandeau recadré en haut/bas et centré quand la fenêtre se réduit. */
.illus-wrap{float:right;width:200px;margin:0 0 1rem 1.2rem}
main h2{clear:both} /* tout titre de section démarre sous l'illustration flottante (pas de titre isolé au-dessus du vide) — ville, salle, artiste, événement… ; no-op là où il n'y a pas de float */
.illus{display:block;width:200px;height:200px;object-fit:cover;border-radius:1rem;border:1px solid var(--bord)}
/* Page événement : 150 px, soit 25 % de moins (le texte de l'artiste y est tronqué, l'image
   pesait trop face à trois paragraphes). Le fichier image est le même, seul l'affichage change. */
.illus-wrap.illus-petite{width:150px}
.illus-petite .illus{width:150px;height:150px}
.illus-src{font-size:.7rem;color:var(--sourd);text-align:center;margin:.3rem 0 0;word-break:break-word}
.illus-src a{color:var(--sourd)}
.illus-lic{white-space:nowrap}
/* Source sur sa PROPRE ligne tant que l'illustration est une colonne étroite flottant à droite. */
.illus-via{display:block}
/* MÊME seuil que le menu burger et la liste d'événements : la page bascule d'un seul coup en format
   réduit, au lieu de se réorganiser par morceaux sur 200 px de largeur. */
@media (max-width:700px){
  .illus-wrap,.illus-wrap.illus-petite{float:none;width:100%;margin:0 0 1rem}
  /* La réduction de la page événement ne vaut qu'en colonne flottante : ici l'illustration est un
     bandeau pleine largeur, comme partout ailleurs. Sélecteurs doublés parce que .illus-wrap seul
     perdrait contre .illus-wrap.illus-petite, plus spécifique. */
  .illus,.illus-petite .illus{width:100%;height:11rem;object-position:center}
  /* Ici l'illustration occupe toute la largeur : le crédit tient sur une seule ligne, séparateur
     explicite pour qu'on ne lise pas « Commons » comme la suite du nom de licence. */
  .illus-via{display:inline}
  .illus-via::before{content:" - "}
}

/* ---------- formulaire de contact ----------
   Colonne unique, champs pleine largeur : c'est le formulaire d'un site consulté en majorité sur
   téléphone, et deux colonnes n'y tiennent pas. Bridé à 40rem pour que les lignes de saisie ne
   traversent pas un écran large. */
.contact-form{display:flex;flex-direction:column;gap:.35rem;max-width:40rem;margin:1.2rem 0}
.contact-form label{font-size:.85rem;color:var(--sourd);margin-top:.6rem}
.contact-form input,.contact-form textarea{
  width:100%;font:inherit;font-size:.95rem;padding:.6rem .8rem;
  background:var(--bg2);color:var(--texte);border:1px solid var(--bord);border-radius:.6rem}
.contact-form textarea{resize:vertical;min-height:9rem}
.contact-form input:focus,.contact-form textarea:focus{outline:2px solid #8b5cf6aa;outline-offset:1px}
.contact-form button{align-self:flex-start;margin-top:1rem;cursor:pointer;font:inherit}
/* Champ piège : invisible pour l'œil ET pour les lecteurs d'écran, mais bien présent dans le formulaire
   — un robot le remplit, un humain ne le voit jamais. Surtout pas display:none, que certains robots
   savent justement détecter et éviter. */
.contact-piege{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.contact-err{max-width:40rem;margin:1rem 0;padding:.8rem 1rem .8rem 2.2rem;border-radius:.7rem;
  border:1px solid #f8717155;background:#f871711a;color:var(--texte);font-size:.92rem}
.contact-ok{max-width:40rem;margin:1.4rem 0;padding:1rem;border-radius:.7rem;
  border:1px solid #34d39955;background:#34d3991a;color:var(--texte)}

/* lieux à proximité (resto / hébergement) */
.proximite{clear:both;margin:1.8rem 0 0;border-top:1px solid var(--bord);padding-top:1rem}
.proximite h3{margin:1rem 0 .4rem;font-size:1.02rem}
ul.lieux{list-style:none;padding:0;margin:0;display:grid;gap:.5rem;
  grid-template-columns:repeat(auto-fill,minmax(15rem,1fr))}
ul.lieux li{background:var(--carte);border:1px solid var(--bord);border-radius:.6rem;padding:.55rem .7rem;font-size:.92rem}
ul.lieux .note{color:var(--vert);font-weight:600;white-space:nowrap}
ul.lieux .dist{color:var(--sourd);font-size:.82rem}
ul.lieux .muted{font-size:.82rem}

/* Corrections : un encadre par famille (villes, salles, artistes). Le trait et le retrait
   rendent le groupement visible ; sans lui les sous-titres des trois familles se lisaient
   comme une seule liste a plat. */
.admin .encadre{border:1px solid var(--bord);border-radius:.7rem;padding:.2rem 1rem 1rem;margin:1.2rem 0}
.admin .encadre > h3.sous-sec{border-top:0;padding-top:0;margin-top:1rem}
.admin .encadre h4{margin:1.6rem 0 .4rem;font-size:1rem}