/*
Theme Name: Les Apalaches
Description: Thème du club de danse country Les Apalaches, à Graulhet. Reprend l’identité de l’affiche du club : couleurs dérivées de celle-ci puis éclaircies pour l’écran, aucune police ni bibliothèque distante, donc aucun cookie tiers.
Author: Club Les Apalaches
Version: 1.21
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GPLv2 or later
Text Domain: apalaches
*/

/* ==========================================================================
   Les Apalaches — Graulhet
   Palette relevée directement sur l'affiche du club.
   Aucune dépendance externe : ni police Google, ni bibliothèque. Le site
   fonctionne hors ligne et ne dépose aucun cookie tiers (RGPD).
   ========================================================================== */

:root {
  /* Palette éclaircie. Les grandes masses — bandeau, menu, accroche, pied de
     page — étaient en brun presque noir : c'est ce qui rendait l'ensemble
     sombre, pas le papier. Elles passent en cuir moyen. Tous les couples de
     couleurs ont été mesurés, le pire contraste est de 4,97:1, au-dessus du
     minimum de 4,5:1 exigé par le niveau AA. */
  --papier:        #fdf7ec;
  --papier-clair:  #fffdf9;
  --papier-fonce:  #eddcbe;
  --encre:         #40291a;
  --encre-douce:   #78563c;
  --bordeaux:      #a13c1a;
  --or:            #cf9226;
  --sombre:        #8d4a22;
  --creme:         #fff8ee;
  --ombre:         0 2px 6px rgba(26, 12, 3, .18);
  --rayon:         6px;
  --largeur:       1080px;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--papier);
  color: var(--encre);
  font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.65;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--bordeaux); }
a:hover, a:focus { color: var(--or); }

.contenu { max-width: var(--largeur); margin: 0 auto; padding: 0 20px; }

/* réservé aux lecteurs d'écran */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- en-tête ---------- */
.bandeau {
  background: var(--sombre);
  color: var(--creme);
  border-bottom: 4px solid var(--or);
}

.bandeau .contenu {
  display: flex;
  align-items: center;
  gap: 18px;
  padding-top: 14px;
  padding-bottom: 14px;
}

.bandeau img { width: 96px; flex: 0 0 auto; }

/* Le logo du club affiliataire, poussé à droite du bandeau. « margin-left:auto »
   consomme tout l'espace libre de la ligne flex, ce qui le colle au bord sans
   avoir à fixer de largeur au bloc du titre. */
.bandeau .logo-partenaire {
  margin-left: auto;
  flex: 0 0 auto;
  line-height: 0;

  /* Plaque blanche indispensable, et mesurée : le lettrage du logo a une
     luminance moyenne de 103/255, ce qui donne 1,18:1 sur le brun du bandeau
     — autant dire invisible. Sur blanc il remonte à 5,66:1. Le logo n'existe
     qu'en version couleur, il n'y a donc pas de variante claire à utiliser
     comme pour celui du club. */
  background: #fff;
  padding: 8px 12px;
  border-radius: var(--rayon);
}

.bandeau .logo-partenaire img { width: 150px; }

.bandeau .titre { line-height: 1.2; }

.bandeau .titre strong {
  display: block;
  font-size: 1.6rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.bandeau .titre span {
  display: block;
  font-size: .92rem;
  color: var(--papier-fonce);
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* ---------- navigation ---------- */
.nav { background: var(--bordeaux); }

.nav .contenu { padding: 0 20px; }

.nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
}

.nav a {
  display: block;
  padding: 12px 14px;
  color: var(--creme);
  text-decoration: none;
  font-size: .86rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  border-bottom: 3px solid transparent;
}

.nav a:hover, .nav a:focus { background: rgba(0,0,0,.22); color: #fff; }

.nav a[aria-current="page"] {
  border-bottom-color: var(--or);
  background: rgba(0,0,0,.28);
  color: #fff;
}

.burger {
  display: none;
  width: 100%;
  padding: 12px 14px;
  background: none;
  border: 0;
  color: var(--creme);
  font: inherit;
  font-size: .9rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-align: left;
  cursor: pointer;
}

/* ---------- sections ---------- */
main { padding: 34px 0 10px; }

section { margin-bottom: 38px; }

h1 {
  margin: 0 0 6px;
  font-size: 2rem;
  color: var(--bordeaux);
  letter-spacing: .02em;
  text-transform: uppercase;
}

h2 {
  font-size: 1.35rem;
  color: var(--bordeaux);
  text-transform: uppercase;
  letter-spacing: .05em;
  margin: 0 0 14px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--papier-fonce);
}

h3 { font-size: 1.05rem; color: var(--encre-douce); margin: 0 0 8px; }

.chapeau {
  font-size: 1.15rem;
  color: var(--encre-douce);
  margin: 0 0 26px;
}

.panneau {
  background: var(--papier-clair);
  border: 1px solid var(--papier-fonce);
  border-radius: var(--rayon);
  padding: 22px 24px;
  box-shadow: var(--ombre);
}

/* ---------- accroche ---------- */
.accroche {
  background: var(--sombre);
  color: var(--creme);
  border-radius: var(--rayon);
  padding: 30px 26px;
  text-align: center;
}

.accroche p { margin: 0; font-size: 1.3rem; line-height: 1.5; }

.accroche strong { color: #fff; }

/* ---------- grilles ---------- */
.grille {
  display: grid;
  gap: 22px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.deux-tiers {
  display: grid;
  gap: 26px;
  grid-template-columns: 2fr 1fr;
  align-items: start;
}

/* ---------- horaires ---------- */
table.horaires { width: 100%; border-collapse: collapse; }

table.horaires th, table.horaires td {
  text-align: left;
  padding: 11px 12px;
  border-bottom: 1px solid var(--papier-fonce);
}

table.horaires th {
  background: var(--papier-fonce);
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: .82rem;
}

/* Pas de « nowrap » ici : il avait été mis pour « 19 h », qui ne se coupe de
   toute façon pas (espace insécable). Mais la même classe sert aux tarifs, et
   « Assistant, enfant de moins de 15 ans, personne handicapée » ne pouvant plus
   passer à la ligne, le tableau poussait la colonne des prix hors de l'écran
   d'un téléphone. */
table.horaires td:first-child { font-weight: 700; }

/* Filet de sécurité : un mot très long dans une cellule étroite se coupe
   plutôt que d'élargir tout le tableau. */
table.horaires td, table.horaires th { overflow-wrap: anywhere; }

table.horaires tr:last-child td { border-bottom: 0; }

/* ---------- encadré pratique ---------- */
.pratique { list-style: none; margin: 0; padding: 0; }

.pratique li {
  padding: 9px 0;
  border-bottom: 1px dotted var(--papier-fonce);
}

.pratique li:last-child { border-bottom: 0; }

.pratique .etiquette {
  display: block;
  font-size: .74rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--encre-douce);
}

.tel {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--bordeaux);
  text-decoration: none;
  white-space: nowrap;
}

/* ---------- boutons ---------- */
.bouton {
  display: inline-block;
  margin: 6px 8px 0 0;
  padding: 11px 20px;
  background: var(--bordeaux);
  color: var(--creme);
  border-radius: var(--rayon);
  text-decoration: none;
  font-size: .88rem;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.bouton:hover, .bouton:focus { background: var(--or); color: var(--encre); }

.bouton.secondaire {
  background: transparent;
  color: var(--bordeaux);
  border: 2px solid var(--bordeaux);
}

.bouton.secondaire:hover, .bouton.secondaire:focus {
  background: var(--bordeaux);
  color: var(--creme);
}

/* ---------- partenaires ---------- */
.partenaires {
  display: flex;
  flex-wrap: wrap;
  gap: 26px;
  align-items: center;
  justify-content: center;
}

/* Le plafond de largeur est aussi nécessaire que celui de hauteur : un logo
   en bandeau, comme celui de la ville, ferait sinon trois fois la largeur d'un
   écusson carré et écraserait visuellement les autres partenaires. */
.partenaires img { max-height: 92px; max-width: 200px; width: auto; }

.partenaires figure { margin: 0; text-align: center; }

.partenaires figcaption {
  font-size: .8rem;
  color: var(--encre-douce);
  margin-top: 6px;
}

/* ---------- affiche ---------- */
.affiche { text-align: center; }

.affiche img {
  margin: 0 auto;
  border: 1px solid var(--papier-fonce);
  border-radius: var(--rayon);
  box-shadow: var(--ombre);
  /* min() : sans lui, 380 px remplaçait le max-width:100% général, et
     l'affiche débordait de 10 px sur un écran de 390 px. */
  max-width: min(380px, 100%);
}

/* ---------- à compléter ---------- */
/* Repère volontairement voyant : rien ne doit être publié avec un de ces
   blocs encore présent. Voir LISEZ-MOI.md pour la liste. */
.todo {
  background: #fff6d8;
  border: 2px dashed #b58b00;
  border-radius: var(--rayon);
  padding: 14px 16px;
  margin: 14px 0;
  color: #6b5200;
  font-size: .95rem;
}

.todo::before {
  content: "À COMPLÉTER — ";
  font-weight: 700;
  letter-spacing: .06em;
}

.todo ul { margin: 8px 0 0; padding-left: 20px; }

/* ---------- note de rédaction ---------- */
/* Visible uniquement par les personnes connectées qui peuvent modifier les
   pages. Le tri se fait dans functions.php, côté serveur : un visiteur ne
   reçoit jamais ce bloc. Le style le distingue nettement du contenu réel,
   pour qu'on ne le prenne pas pour du texte publié. */
.note-redaction {
  background: #eef4fb;
  border-left: 4px solid #3d6fa5;
  border-radius: var(--rayon);
  padding: 12px 16px;
  margin: 14px 0;
  color: #274766;
  font-size: .92rem;
}

.note-redaction::before {
  content: "NOTE POUR L’ÉQUIPE — visible seulement une fois connecté";
  display: block;
  font-weight: 700;
  font-size: .74rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.note-redaction p:last-child { margin-bottom: 0; }

/* ---------- chorégraphies ---------- */
/* Les tableaux générés comptent jusqu'à six colonnes. Sans ce conteneur, ils
   débordent de l'écran d'un téléphone et poussent toute la page de côté. Ici
   c'est le tableau seul qui défile. */
.tableau-defilant {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0 0 18px;
}

.tableau-defilant table { min-width: 420px; margin-bottom: 0; }

table.choregraphies td:first-child { font-weight: 700; }

/* Sur PC, l'en-tête dit « Vidéo » : « Voir » suffit. Le libellé long ne sert
   qu'aux cartes du téléphone, qui n'ont pas d'en-tête. */
.lien-media .texte-long { display: none; }

/* ---------- recherche dans le répertoire ---------- */
.recherche-danse { margin: 0 0 14px; }

.recherche-danse label {
  display: block;
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--encre-douce);
  margin-bottom: 5px;
}

.recherche-danse input {
  width: 100%;
  max-width: 380px;
  padding: 9px 12px;
  border: 1px solid var(--papier-fonce);
  border-radius: var(--rayon);
  background: var(--papier-clair);
  color: var(--encre);
  font: inherit;
  font-size: .95rem;
}

.recherche-danse input:focus {
  outline: 2px solid var(--bordeaux);
  outline-offset: 1px;
}

.compte-resultats {
  margin: 6px 0 0;
  font-size: .85rem;
  color: var(--encre-douce);
  min-height: 1.2em;
}

/* La colonne de suppression : discrète, mais reconnaissable comme une action
   destructive. Elle n'existe que pour les personnes connectées — un visiteur
   ne reçoit ni la colonne ni les formulaires. */
.action-choregraphie { width: 1%; white-space: nowrap; }

.action-choregraphie form { margin: 0; }

/* Modifier, à côté de Supprimer. Bleu : la couleur des actions d'éditeur,
   déjà celle de la note de rédaction et des formulaires. Supprimer garde son
   rouge, pour qu'on ne confonde jamais les deux. */
.action-choregraphie .lien-modifier,
.action-choregraphie form { display: inline-block; vertical-align: middle; }

.action-choregraphie form { margin-left: 6px; }

.lien-modifier {
  border: 1px solid #3d6fa5;
  border-radius: var(--rayon);
  padding: 4px 10px;
  color: #274766;
  font-size: .78rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  text-decoration: none;
}

.lien-modifier:hover, .lien-modifier:focus { background: #3d6fa5; color: #fff; }

/* Le formulaire en mode modification se distingue de l'ajout par un liseré or :
   on sait d'un coup d'œil qu'on corrige une fiche existante. */
.ajout-choregraphie.modification { border-left-color: var(--or); }

.ajout-choregraphie .annuler { margin-left: 12px; color: #274766; }

/* L'affiche d'un événement, sous son intitulé dans le tableau de l'agenda. Un
   clic l'agrandit (mêmes règles .photo-grande que la galerie). */
/* « block » et non « inline-block » : en ligne, la vignette se rangeait À CÔTÉ
   du titre dès que la colonne était assez large — chez le visiteur, qui n'a
   pas la colonne des boutons — et le titre s'alignait sur le bas de l'image.
   En bloc, elle passe toujours dessous, quel que soit l'écran. fit-content
   limite la zone cliquable à l'image elle-même. */
.affiche-evenement { display: block; width: fit-content; margin-top: 8px; line-height: 0; }

.affiche-evenement img {
  width: 120px;
  max-width: 100%;
  border: 1px solid var(--papier-fonce);
  border-radius: var(--rayon);
}

.affiche-evenement:hover img, .affiche-evenement:focus img { border-color: var(--bordeaux); }

.affiche-pdf { display: inline-block; margin-top: 6px; font-size: .88rem; }

/* L'heure d'un événement, sous sa date. */
table.agenda .heure { color: var(--encre-douce); font-size: .9rem; }

/* Case à cocher dans un formulaire : le libellé redevient une phrase, et la
   case garde sa taille — la règle générale mettrait tout champ en pleine
   largeur, case comprise. */
.ajout-choregraphie label.case {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  font-size: .9rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--encre);
}

.ajout-choregraphie label.case input { width: auto; }

.lien-supprimer {
  background: none;
  border: 1px solid #c08278;
  border-radius: var(--rayon);
  padding: 4px 10px;
  color: #7d2418;
  font: inherit;
  font-size: .78rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  cursor: pointer;
}

.lien-supprimer:hover,
.lien-supprimer:focus { background: #7d2418; color: #fff; border-color: #7d2418; }

.repertoire-vide { color: var(--encre-douce); font-style: italic; }

/* Le formulaire d'ajout, réservé aux personnes connectées. Même bleu que la
   note de rédaction : c'est le repère visuel de « ceci n'est pas public ». */
.ajout-choregraphie {
  background: #eef4fb;
  border: 1px solid #b9cee5;
  border-left: 4px solid #3d6fa5;
  border-radius: var(--rayon);
  padding: 18px 20px;
  margin: 24px 0;
}

.ajout-choregraphie h3 { color: #274766; margin-top: 0; }

.ajout-choregraphie p { margin: 0 0 14px; }

.ajout-choregraphie label {
  display: block;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: #274766;
  margin-bottom: 4px;
}

.ajout-choregraphie input,
.ajout-choregraphie select {
  width: 100%;
  max-width: 460px;
  padding: 9px 11px;
  border: 1px solid #a9c1da;
  border-radius: var(--rayon);
  background: #fff;
  color: var(--encre);
  font: inherit;
  font-size: .95rem;
}

.ajout-choregraphie input:focus,
.ajout-choregraphie select:focus {
  outline: 2px solid #3d6fa5;
  outline-offset: 1px;
}

.ajout-choregraphie .aide {
  display: block;
  margin-top: 4px;
  font-size: .8rem;
  color: #4e6b88;
}

.ajout-choregraphie .bouton { border: 0; cursor: pointer; }

.formulaire-message {
  border-radius: var(--rayon);
  padding: 10px 14px;
  font-size: .93rem;
}

.formulaire-message.succes { background: #e4f3e4; border: 1px solid #7fb07f; color: #1f5a1f; }
.formulaire-message.erreur { background: #fbe6e3; border: 1px solid #c08278; color: #7d2418; }

/* ---------- galerie photos ---------- */
/* Un album est un <details> : fermé, son contenu n'est pas rendu, donc pas
   téléchargé. Aucun script n'est nécessaire pour le dépliage. */
.album {
  background: var(--papier-clair);
  border: 1px solid var(--papier-fonce);
  border-radius: var(--rayon);
  margin-bottom: 16px;
}

.album > summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  cursor: pointer;
  list-style: none;
  font-weight: 700;
  color: var(--bordeaux);
}

/* Le triangle par défaut diffère d'un navigateur à l'autre : on le remplace. */
.album > summary::-webkit-details-marker { display: none; }

.album > summary .nom::before { content: "\25B8\00A0"; color: var(--or); }

.album[open] > summary .nom::before { content: "\25BE\00A0"; }

.album > summary:hover, .album > summary:focus { background: var(--papier-fonce); }

.album .compte {
  font-weight: 400;
  font-size: .8rem;
  color: var(--encre-douce);
  white-space: nowrap;
}

.grille-photos {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  padding: 4px 18px 18px;
}

.vignette { margin: 0; }

/* Le recadrage donne une grille régulière quelles que soient les proportions
   des photos, qui sont rarement homogènes dans un album de club. */
.vignette img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--rayon);
  background: var(--papier-fonce);
}

.vignette figcaption {
  font-size: .8rem;
  color: var(--encre-douce);
  margin-top: 5px;
  line-height: 1.35;
}

/* Photo agrandie, sans la moindre ligne de JavaScript : le bloc n'apparaît
   que lorsque l'adresse de la page pointe sur lui. Le bouton Retour du
   navigateur referme donc la photo, ce qui est le geste attendu sur mobile. */
.photo-grande { display: none; }

.photo-grande:target {
  display: flex;
  position: fixed;
  inset: 0;
  z-index: 100;
  align-items: center;
  justify-content: center;
  padding: 28px 18px;
}

.photo-grande .fond {
  position: absolute;
  inset: 0;
  background: rgba(26, 12, 3, .92);
}

.photo-grande figure {
  position: relative;
  margin: 0;
  max-width: 1100px;
  text-align: center;
}

.photo-grande img {
  max-height: 78vh;
  width: auto;
  max-width: 100%;
  margin: 0 auto;
  border-radius: var(--rayon);
}

.photo-grande figcaption {
  color: var(--creme);
  margin-top: 12px;
  font-size: .95rem;
}

.photo-grande .fermer {
  position: absolute;
  top: 14px;
  right: 18px;
  color: var(--creme);
  font-size: .82rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid rgba(255,255,255,.5);
  border-radius: var(--rayon);
  padding: 6px 12px;
}

.photo-grande .fermer:hover, .photo-grande .fermer:focus { background: rgba(255,255,255,.15); color: #fff; }

/* Les actions de l'éditeur, sous chaque vignette. Absentes pour un visiteur. */
.actions-photo { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; }

.actions-photo input[type="text"] {
  flex: 1 1 100%;
  padding: 5px 8px;
  border: 1px solid #a9c1da;
  border-radius: var(--rayon);
  font: inherit;
  font-size: .8rem;
}

.actions-photo button {
  font: inherit;
  font-size: .72rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: var(--rayon);
  cursor: pointer;
}

.actions-photo button[value="apalaches_legender_photo"] {
  background: #3d6fa5;
  border: 1px solid #3d6fa5;
  color: #fff;
}

.ajout-photos h3 { margin-bottom: 4px; }

/* ---------- pied de page ---------- */
footer {
  background: var(--sombre);
  color: var(--creme);
  margin-top: 40px;
  padding: 26px 0;
  font-size: .88rem;
  border-top: 4px solid var(--or);
}

footer .contenu { display: grid; gap: 12px; }

footer a { color: var(--creme); }

footer .legal { color: #f2e2cc; font-size: .82rem; }

/* Accès à l'administration : présent mais discret. Il s'adresse aux deux ou
   trois personnes qui tiennent le site, pas aux visiteurs. */
footer .acces { font-size: .8rem; color: #e6d2b8; }

footer .acces a { color: #e6d2b8; text-decoration: underline; }

footer .acces a:hover, footer .acces a:focus { color: #fff; }

/* ---------- petits écrans ---------- */
@media (max-width: 760px) {
  body { font-size: 16px; }

  .bandeau .contenu { gap: 12px; }
  .bandeau img { width: 68px; }
  .bandeau .titre strong { font-size: 1.2rem; }

  /* Trois éléments sur une ligne étroite : le logo du partenaire rétrécit
     plutôt que de renvoyer le titre à la ligne. */
  .bandeau .logo-partenaire { padding: 6px 8px; }
  .bandeau .logo-partenaire img { width: 92px; }

  .burger { display: block; }

  .nav ul { display: none; flex-direction: column; }
  .nav ul.ouvert { display: flex; }
  .nav a { border-bottom: 1px solid rgba(255,255,255,.12); }

  .deux-tiers { grid-template-columns: 1fr; }

  h1 { font-size: 1.55rem; }
  .accroche p { font-size: 1.1rem; }
}

/* ---------- impression ---------- */
@media print {
  .nav, .burger, footer { display: none; }
  body { background: #fff; color: #000; }
  .panneau { box-shadow: none; }

  /* Le logo du bandeau est blanc, pour ressortir sur fond foncé. À
     l'impression les navigateurs ne restituent pas les fonds par défaut : le
     bandeau sort donc blanc, et un logo blanc dessus serait invisible. On
     repasse l'en-tête en noir sur blanc et on inverse le logo, qui est
     monochrome — l'inversion le rend noir sans toucher au fichier. */
  .bandeau { background: #fff; color: #000; border-bottom-color: #000; }
  .bandeau img { filter: invert(1); }

  /* Le logo du partenaire est en COULEURS, pas monochrome : l'inversion
     prévue pour le logo du club le rendrait méconnaissable. Et sa plaque
     blanche n'a plus d'objet sur du papier blanc. */
  .bandeau .logo-partenaire { background: none; padding: 0; }
  .bandeau .logo-partenaire img { filter: none; }
  .bandeau .titre span { color: #333; }

  /* Même raison pour l'accroche : son texte est crème sur brun. Sans fond
     imprimé, il sortirait crème sur blanc, donc illisible. */
  .accroche { background: #fff; color: #000; border: 1px solid #000; }
  .accroche strong { color: #000; }
}


/* ==========================================================================
   Ajouts propres à WordPress
   L'éditeur insère ses propres classes ; sans ces règles, les galeries et
   les images alignées s'afficheraient de travers.
   ========================================================================== */

.alignleft   { float: left;  margin: 6px 22px 14px 0; }
.alignright  { float: right; margin: 6px 0 14px 22px; }
.aligncenter { display: block; margin: 14px auto; }
.alignwide, .alignfull { margin-left: 0; margin-right: 0; }

figure.wp-block-image { margin: 18px 0; }

.wp-block-image img,
.wp-block-gallery img {
  border-radius: var(--rayon);
  box-shadow: var(--ombre);
}

figcaption,
.wp-element-caption {
  font-size: .85rem;
  color: var(--encre-douce);
  text-align: center;
  margin-top: 6px;
}

/* galerie : grille fluide, quel que soit le nombre de colonnes choisi */
.wp-block-gallery {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  list-style: none;
  padding: 0;
}

.wp-block-gallery figure { margin: 0; }

/* tableaux insérés par l'éditeur : même allure que les horaires */
.wp-block-table table {
  width: 100%;
  border-collapse: collapse;
}

.wp-block-table th,
.wp-block-table td {
  text-align: left;
  padding: 11px 12px;
  border-bottom: 1px solid var(--papier-fonce);
}

.wp-block-table th {
  background: var(--papier-fonce);
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: .82rem;
}

/* Les deux finitions du tableau des horaires du site statique : première
   colonne en gras, pas de filet sous la dernière ligne. Sans elles, un
   tableau importé se distingue de l'original. */
.wp-block-table td:first-child { font-weight: 700; }

/* Dernier recours si un tableau reste trop large : c'est le tableau qui défile,
   jamais la page entière. */
.wp-block-table { overflow-x: auto; }

.wp-block-table tr:last-child td { border-bottom: 0; }

/* Gutenberg emboîte le contenu d'un bloc Groupe dans un conteneur interne :

     <div class="wp-block-group deux-tiers">
       <div class="wp-block-group__inner-container is-layout-flow"> … </div>
     </div>

   Une mise en grille posée sur l'élément extérieur n'a donc qu'un seul enfant,
   et tout s'empile : c'est ce qui faisait passer l'encadré « En pratique » sous
   le tableau des horaires au lieu de le laisser à droite.

   Les règles ci-dessous portent sur le conteneur interne. Celles de la feuille
   de base, qui visent l'élément extérieur, sont conservées : selon la version
   de WordPress le conteneur interne peut ne pas être émis, et il faut alors que
   la grille s'applique quand même. Les deux cas sont donc couverts. */

.wp-block-group.deux-tiers > .wp-block-group__inner-container {
  display: grid;
  gap: 26px;
  grid-template-columns: 2fr 1fr;
  align-items: start;
}

.wp-block-group.grille > .wp-block-group__inner-container {
  display: grid;
  gap: 22px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.wp-block-group.partenaires > .wp-block-group__inner-container {
  display: flex;
  flex-wrap: wrap;
  gap: 26px;
  align-items: center;
  justify-content: center;
}

/* Corollaire indispensable. Garder la grille sur l'element EXTERIEUR quand le
   conteneur interne existe ne « couvre pas les deux cas » : cela les empile.
   L'exterieur devient une grille 2fr/1fr dont l'unique enfant — le conteneur
   interne — est placé dans la PREMIERE piste ; la grille interne redivise donc
   les deux tiers de la largeur. Mesuré : pistes 676/338 px à l'extérieur, puis
   433/217 px à l'intérieur, au lieu de 676/338 attendus.

   On neutralise donc la mise en page extérieure dès que le conteneur interne
   est présent. Si le navigateur ne connaît pas « :has() » la règle est
   simplement ignorée : on retombe sur la mise en page étroite, imparfaite mais
   pas cassée. */

.wp-block-group.deux-tiers:has(> .wp-block-group__inner-container),
.wp-block-group.grille:has(> .wp-block-group__inner-container),
.wp-block-group.partenaires:has(> .wp-block-group__inner-container) {
  display: block;
}

@media (max-width: 760px) {
  .wp-block-group.deux-tiers > .wp-block-group__inner-container {
    grid-template-columns: 1fr;
  }
}

.wp-block-button__link {
  display: inline-block;
  padding: 11px 20px;
  background: var(--bordeaux);
  color: var(--creme);
  border-radius: var(--rayon);
  text-decoration: none;
  text-transform: uppercase;
  font-size: .88rem;
  letter-spacing: .07em;
}

.wp-block-quote {
  border-left: 4px solid var(--or);
  margin: 18px 0;
  padding: 4px 0 4px 18px;
  color: var(--encre-douce);
}

/* liste des actualités */
.article-liste { margin-bottom: 30px; }
.article-liste .date {
  display: block;
  font-size: .78rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--encre-douce);
}

.pagination { margin: 24px 0; }
.pagination .page-numbers {
  display: inline-block;
  padding: 7px 12px;
  margin-right: 5px;
  background: var(--papier-clair);
  border: 1px solid var(--papier-fonce);
  border-radius: var(--rayon);
  text-decoration: none;
}
.pagination .page-numbers.current {
  background: var(--bordeaux);
  color: var(--creme);
  border-color: var(--bordeaux);
}

/* barre d'administration : évite qu'elle recouvre l'en-tête */
body.admin-bar .bandeau { scroll-margin-top: 32px; }

/* ==========================================================================
   Téléphone — ajustements mesurés sur écran de 390 px (11/09/2026)
   Ce bloc vient en DERNIER pour l'emporter sur les règles générales.
   ========================================================================== */
@media (max-width: 760px) {

  /* --- Chorégraphies : le tableau devient une pile de cartes ---
     En tableau, les colonnes Vidéo et Fiche tombaient hors de l'écran : il
     fallait faire défiler le tableau pour les atteindre, ce que personne ne
     devine. Or c'est précisément ce que les danseurs viennent chercher. */
  .tableau-defilant { overflow-x: visible; }
  .tableau-defilant table { min-width: 0; }

  table.choregraphies,
  table.choregraphies tbody { display: block; width: 100%; }

  /* l'en-tête n'a plus d'usage visuel, mais reste lisible par les lecteurs d'écran */
  table.choregraphies thead {
    position: absolute; width: 1px; height: 1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }

  table.choregraphies tr {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
    padding: 14px 16px;
    margin-bottom: 12px;
    background: var(--papier-clair);
    border: 1px solid var(--papier-fonce);
    border-radius: var(--rayon);
  }

  table.choregraphies td { display: block; padding: 0; border: 0; }

  table.choregraphies td:first-child { flex: 1 1 100%; font-size: 1.08rem; }

  table.choregraphies td.date { flex: 1 1 100%; color: var(--encre-douce); font-size: .9rem; }
  table.choregraphies td.date::before { content: attr(data-label) " : "; }

  table.choregraphies td.media { flex: 1 1 0; }
  table.choregraphies td.media.vide { display: none; }

  .lien-media {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 12px;
    border: 2px solid var(--bordeaux);
    border-radius: var(--rayon);
    color: var(--bordeaux);
    font-weight: 700;
    text-decoration: none;
  }
  .lien-media:hover, .lien-media:focus { background: var(--bordeaux); color: var(--creme); }
  .lien-media .texte-court { display: none; }
  .lien-media .texte-long { display: inline; }

  table.choregraphies td.action-choregraphie { flex: 1 1 100%; width: auto; }

  /* --- Cibles tactiles : 44 px, la taille d'un doigt ---
     Mesurées avant correction : liens du pied de page à 15 px de haut, boutons
     « Voir » et « PDF » à 17 px. */
  footer .acces a,
  footer .legal a,
  footer a[href^="tel:"],
  .partenaires figcaption a {
    display: inline-block;
    padding: 12px 2px;
  }

  .lien-supprimer,
  .actions-photo button {
    min-height: 44px;
    padding: 8px 14px;
    font-size: .82rem;
  }

  .lien-supprimer { width: 100%; }

  /* Modifier et Supprimer côte à côte, à parts égales */
  table.choregraphies td.action-choregraphie { display: flex; gap: 10px; }

  .action-choregraphie .lien-modifier,
  .action-choregraphie form { flex: 1 1 0; margin: 0; }

  /* Même spécificité que la règle PC « .action-choregraphie .lien-modifier »
     (display: inline-block) : sinon elle l'emporte, le flex ne s'applique pas,
     et le texte se retrouve collé en haut à gauche du bouton. */
  .action-choregraphie .lien-modifier {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    font-size: .82rem;
  }
}