/* ==========================================================================
   LA LOCO - theme bloc sur-mesure
   Les tokens vivent dans theme.json ; ce fichier ne fait que composer.
   ========================================================================== */

:root {
  --ll-marge: var(--wp--custom--marge-laterale, 24px);
  --ll-rayon: var(--wp--custom--rayon, 12px);
  --ll-rayon-lg: var(--wp--custom--rayon-large, 20px);
  --ll-ombre: var(--wp--custom--ombre-douce);
  --ll-ombre-portee: var(--wp--custom--ombre-portee);
  --ll-transition: var(--wp--custom--transition, 220ms cubic-bezier(.2,.7,.3,1));
}

html { -webkit-text-size-adjust: 100%; }
body { overflow-x: clip; }
* { text-wrap: pretty; }
h1, h2, h3, h4 { text-wrap: balance; }

/* PIEGE : blockGap fuit entre les regions du gabarit (header/main/footer)
   et entre les sections de premier niveau -> bandes parasites. */
.wp-site-blocks > * { margin-block: 0; }
.wp-site-blocks > main > * { margin-block: 0; }

/* Cible de saut clavier */
:where(a, button, input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--wp--preset--color--projecteur-profond);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   EN-TETE
   PIEGE : le sticky doit porter sur l'enveloppe .wp-block-template-part,
   sinon le parent fait exactement la hauteur de l'element et il n'a aucune course.
   -------------------------------------------------------------------------- */
header.wp-block-template-part {
  position: sticky;
  top: 0;
  z-index: 60;
}

/* PIEGE : .is-layout-flex > :is(*, div){margin:0} vaut (0,1,1) et bat une classe
   simple -> passer par le combinateur enfant. */

/* --------------------------------------------------------------------------
   SECTIONS ET RYTHME
   -------------------------------------------------------------------------- */
.ll-page-entete { border-bottom: 1px solid var(--wp--preset--color--brume); }
.ll-page-entete > * { margin-block: 0; }
.ll-page-entete > * + * { margin-block-start: 18px; }
/* PIEGE : la disposition contrainte du coeur pose margin-left/right:auto !important
   sur les enfants directs. Un chapo borne a 62ch se retrouve donc CENTRE, decale
   de son propre titre. Il faut les memes longhands PHYSIQUES que le coeur
   (margin-inline-start ne le bat pas). */
/* Chapo : borne a 88ch pour rester dans la fourchette de lecture (~75-85 signes).
   PIEGE : ne PAS tenter de le recaler avec margin-left:0 — cela le colle au bord
   du remplissage (40) au lieu du depart de colonne (72,4). La parade est
   STRUCTURELLE : le gabarit l enveloppe dans un groupe en disposition de flux,
   qui recoit la colonne et laisse son enfant s aligner a gauche. */
.ll-chapo { color: var(--wp--preset--color--graphite); max-width: 88ch; }
.ll-sombre .ll-chapo { color: color-mix(in srgb, var(--wp--preset--color--blanc) 78%, transparent); }

/* PIEGE : styles.elements.heading.color l'emporte sur la couleur heritee
   d'un groupe sombre -> on force ici. */
.ll-sombre :is(h1, h2, h3, h4, h5, h6) { color: var(--wp--preset--color--blanc); }
/* PIEGE : cette regle vaut (0,1,1) et bat le :root :where(.wp-block-button__link)
   du coeur, dont le :where() annule la specificite -> un bouton jaune place dans
   une section sombre heritait d un texte jaune, donc invisible.
   La couleur d un lien de section sombre ne doit jamais toucher un bouton. */
.ll-sombre a:not(.wp-block-button__link):not(.ll-btn) { color: var(--wp--preset--color--projecteur); }
.ll-sombre a:not(.wp-block-button__link):not(.ll-btn):hover { color: var(--wp--preset--color--blanc); }

/* --------------------------------------------------------------------------
   PROSE - la colonne de lecture ne laisse pas de vide a droite :
   elle occupe la contentSize (800px) sans borne supplementaire.
   PIEGE : ne pas surcharger --wp--style--block-gap (la regle de layout gagne),
   poser des marges directes.
   -------------------------------------------------------------------------- */
.ll-prose > * { margin-block: 0; }
.ll-prose > * + * { margin-block-start: 20px; }
.ll-prose > h2 { margin-block-start: 44px; }
.ll-prose > h3 { margin-block-start: 30px; }
.ll-prose > :is(ul, ol) { margin-block-start: 14px; }
.ll-prose > :first-child { margin-block-start: 0; }
.ll-prose :is(ul, ol) > li + li { margin-block-start: 8px; }

/* --------------------------------------------------------------------------
   GRILLE DES EVENEMENTS
   -------------------------------------------------------------------------- */
.ll-grille {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 2.4vw, 32px);
}
.ll-carte { margin: 0; }
.ll-carte__lien {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  color: inherit;
  background: var(--wp--preset--color--blanc);
  border: 1px solid var(--wp--preset--color--brume);
  border-radius: var(--ll-rayon-lg);
  overflow: hidden;
  box-shadow: var(--ll-ombre);
  transition: transform var(--ll-transition), box-shadow var(--ll-transition), border-color var(--ll-transition);
}
.ll-carte__lien:hover {
  transform: translateY(-4px);
  box-shadow: var(--ll-ombre-portee);
  border-color: var(--wp--preset--color--projecteur);
}
.ll-carte__visuel { position: relative; display: block; aspect-ratio: 3 / 2; background: var(--wp--preset--color--creme); }
.ll-carte__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ll-carte__etat {
  position: absolute;
  inset-block-start: 12px;
  inset-inline-start: 12px;
  background: var(--wp--preset--color--encre);
  color: var(--wp--preset--color--blanc);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 6px 10px;
  border-radius: 5px;
}
.ll-carte__corps { display: flex; flex-direction: column; gap: 6px; padding: 18px 20px 18px; flex: 1; }
.ll-carte__type {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--wp--preset--color--projecteur-profond);
}
.ll-carte__titre {
  font-family: var(--wp--preset--font-family--titre);
  font-size: var(--wp--preset--font-size--titre-mineur);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.018em;
}
.ll-carte__pied {
  margin-top: auto;
  padding-top: 12px;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.ll-carte__date { font-size: var(--wp--preset--font-size--petit); color: var(--wp--preset--color--graphite); }
.ll-carte__tarif {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--wp--preset--color--projecteur-profond);
  white-space: nowrap;
}
.ll-vide { color: var(--wp--preset--color--graphite); }

/* --------------------------------------------------------------------------
   FICHE EVENEMENT
   -------------------------------------------------------------------------- */
.ll-evt-hero > * { margin-block: 0; }
.ll-evt-hero > * + * { margin-block-start: 16px; }
.ll-evt-hero__type {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--wp--preset--color--projecteur);
}
.ll-evt-hero__type a { text-decoration: none; }
.ll-evt-hero__cta { margin-block-start: 28px; }
.ll-evt-visuel { margin-block-start: 0; }
.ll-evt-visuel__img img { width: 100%; border-radius: 0; display: block; }

.ll-fiche > * { margin-block: 0; }
.ll-fiche > * + * { margin-block-start: 44px; }
.ll-fiche__titre {
  font-family: var(--wp--preset--font-family--titre);
  font-size: var(--wp--preset--font-size--titre);
  font-weight: 700;
  letter-spacing: -0.018em;
  margin: 0 0 20px;
}
.ll-fiche__etat {
  display: inline-block;
  background: var(--wp--preset--color--encre);
  color: var(--wp--preset--color--blanc);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 8px 16px;
  border-radius: 5px;
  margin: 0;
}
.ll-fiche__infos {
  list-style: none;
  margin: 0;
  padding: 24px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px 24px;
  background: var(--wp--preset--color--creme);
  border: 1px solid var(--wp--preset--color--brume);
  border-radius: var(--ll-rayon-lg);
}
.ll-fiche__info { display: flex; flex-direction: column; gap: 4px; margin: 0; }
.ll-fiche__label {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--wp--preset--color--projecteur-profond);
}
.ll-fiche__valeur { font-weight: 500; }
.ll-fiche__gratuit {
  display: inline-block;
  background: var(--wp--preset--color--projecteur);
  color: var(--wp--preset--color--encre);
  font-weight: 700;
  padding: 10px 20px;
  border-radius: 5px;
}
/* Alerte d etat : complet / annule / reporte */
.ll-fiche__alerte {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  padding: 18px 22px;
  border-radius: var(--ll-rayon);
  background: var(--wp--preset--color--encre);
  color: var(--wp--preset--color--blanc);
}
.ll-fiche__alerte > * { margin: 0; }
.ll-fiche__etat {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: var(--wp--preset--color--projecteur);
  color: var(--wp--preset--color--encre);
  padding: 6px 14px;
  border-radius: 5px;
}
.ll-fiche__report { font-weight: 500; }
.ll-fiche__billetterie-fermee {
  padding: 18px 22px;
  border: 1px dashed var(--wp--preset--color--brume);
  border-radius: var(--ll-rayon);
  color: var(--wp--preset--color--graphite);
  background: var(--wp--preset--color--creme);
}

/* Liste des seances multiples */
.ll-fiche__seances { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ll-fiche__seance {
  margin: 0;
  padding: 14px 18px;
  background: var(--wp--preset--color--blanc);
  border: 1px solid var(--wp--preset--color--brume);
  border-left: 3px solid var(--wp--preset--color--projecteur);
  border-radius: var(--ll-rayon);
  font-weight: 500;
}
.ll-fiche__seance.is-passee { opacity: 0.55; border-left-color: var(--wp--preset--color--brume); }

.ll-fiche__tarifs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; }
.ll-fiche__tarif {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px 20px;
  background: var(--wp--preset--color--blanc);
  border: 1px solid var(--wp--preset--color--brume);
  border-radius: var(--ll-rayon);
}
.ll-fiche__tarif.is-vedette { border-color: var(--wp--preset--color--projecteur); background: #FFFDF5; }
.ll-fiche__prix { font-family: var(--wp--preset--font-family--titre); font-size: 1.25rem; font-weight: 700; }
.ll-fiche__plateformes { display: flex; flex-wrap: wrap; gap: 14px; }
.ll-fiche__plateforme {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  font-weight: 600;
  padding: 14px 24px;
  background: var(--wp--preset--color--blanc);
  border: 1px solid var(--wp--preset--color--brume);
  border-radius: var(--ll-rayon);
  transition: border-color var(--ll-transition), transform var(--ll-transition);
}
.ll-fiche__plateforme:hover { border-color: var(--wp--preset--color--projecteur); transform: translateY(-2px); }

/* --------------------------------------------------------------------------
   BOUTONS
   PIEGE : les classes de palette de WP sortent en !important et ecrasent la
   couleur propre d'un bouton place dans un groupe colore. La couleur d'un
   bouton lui appartient.
   -------------------------------------------------------------------------- */
.wp-block-button__link { transition: background-color var(--ll-transition), color var(--ll-transition), transform var(--ll-transition); }

/* La couleur d un bouton lui appartient : on la reaffirme en priorite pour
   qu aucune classe de palette heritee ne puisse l ecraser. */
.wp-block-button:not(.is-style-outline) > .wp-block-button__link {
  background-color: var(--wp--preset--color--projecteur) !important;
  color: var(--wp--preset--color--encre) !important;
}
.wp-block-button:not(.is-style-outline) > .wp-block-button__link:hover {
  background-color: var(--wp--preset--color--encre) !important;
  color: var(--wp--preset--color--blanc) !important;
}
.wp-block-button__link:hover { transform: translateY(-2px); }
.wp-block-button.is-style-outline > .wp-block-button__link {
  background: transparent !important;
  color: var(--wp--preset--color--encre) !important;
  border: 2px solid currentColor;
}
.ll-sombre .wp-block-button.is-style-outline > .wp-block-button__link { color: var(--wp--preset--color--blanc) !important; }
.wp-block-button.is-style-outline > .wp-block-button__link:hover {
  background: var(--wp--preset--color--projecteur) !important;
  color: var(--wp--preset--color--encre) !important;
  border-color: var(--wp--preset--color--projecteur);
}

/* --------------------------------------------------------------------------
   PIED
   -------------------------------------------------------------------------- */
.ll-pied a { text-decoration: none; }
.ll-pied a:hover { text-decoration: underline; }

/* ------------------------------------------------- NEWSLETTER (haut du pied)
   Elle passe AVANT les colonnes de liens : c est la premiere chose que l on
   propose, pas une ligne perdue en bas de page. */
.ll-news {
  position: relative;
  isolation: isolate;
  background: var(--wp--preset--color--encre-douce);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding-block: clamp(52px, 6vw, 88px);
  overflow: hidden;
}
/* Fond photographique. La couleur reste sous l image : si elle tarde a charger,
   le texte blanc est deja lisible sur l encre. */
.ll-news__fond { position: absolute; inset: 0; z-index: -2; }
.ll-news__img { width: 100%; height: 100%; object-fit: cover; object-position: center 42%; display: block; }
/* Voile : dense a gauche ou vit le texte, et plancher sombre general pour que
   le formulaire reste lisible quelle que soit la zone de la photo. */
.ll-news__voile {
  position: absolute;
  inset: 0;
  z-index: -1;
  /* La photo est deja tres sombre (luminance moyenne 0,024) : un voile lourd
     l effacerait completement. Dose pour ~0,71 d opacite dans la zone du texte,
     ce qui laisse l image lisible tout en tenant les contrastes. */
  background:
    linear-gradient(to right,
      rgba(8, 10, 14, 0.68) 0%,
      rgba(8, 10, 14, 0.60) 42%,
      rgba(8, 10, 14, 0.56) 72%,
      rgba(8, 10, 14, 0.54) 100%),
    linear-gradient(to bottom,
      rgba(8, 10, 14, 0.12) 0%,
      rgba(8, 10, 14, 0.22) 100%);
}
.ll-news > .ll-evt__wrap { position: relative; z-index: 1; }
/* Page Newsletter (38) : elle ne porte QUE ce bloc, il doit donc tenir dans la
   fenetre, comme le hero de l accueil. Le scope .page-id-38 est OBLIGATOIRE :
   le meme bloc vit dans le pied de TOUTES les autres pages, ou il reste compact.
   --ll-entete-h est pose par menu.js ; le repli 100px couvre le grand ecran. */
.page-id-38 .ll-news {
  /* border-box sinon min-height porte sur la boite de CONTENU et les 153 px de
     padding s ajoutent : la section depassait la fenetre de 155 px. */
  box-sizing: border-box;
  display: flex;
  align-items: center;
  min-height: calc(100vh - var(--ll-entete-h, 100px));
  min-height: calc(100svh - var(--ll-entete-h, 100px));
}
/* Sans largeur pleine, l enfant flex se reduirait a son contenu et la grille
   perdrait ses deux colonnes. */
.page-id-38 .ll-news > .ll-evt__wrap { width: 100%; }
.ll-news__grille {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
  gap: clamp(26px, 4vw, 64px);
  align-items: center;
}
.ll-news__texte > * { margin-block: 0; }
.ll-news__kicker {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--wp--preset--color--projecteur);
  margin-bottom: 12px;
}
.ll-news__titre {
  font-family: var(--wp--preset--font-family--titre);
  font-size: var(--wp--preset--font-size--titre);
  font-weight: 700;
  letter-spacing: -0.022em;
  line-height: 1.12;
  color: var(--wp--preset--color--blanc);
}
.ll-news__accroche {
  margin-block-start: 12px !important;
  color: rgba(255, 255, 255, 0.74);
  max-width: 52ch;
}
.ll-news__form > * { margin-block: 0; }
.ll-news__label {
  display: block;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 10px;
}
.ll-news__ligne { display: flex; flex-wrap: wrap; gap: 10px; }
.ll-news__champ {
  flex: 1 1 240px;
  min-width: 0;
  padding: 13px 16px;
  border-radius: 5px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.06);
  color: var(--wp--preset--color--blanc);
  font-size: var(--wp--preset--font-size--corps);
}
.ll-news__champ::placeholder { color: rgba(255, 255, 255, 0.42); }
.ll-news__champ:focus {
  outline: 2px solid var(--wp--preset--color--projecteur);
  outline-offset: 2px;
  border-color: transparent;
}
.ll-news__mention {
  margin-block-start: 12px !important;
  font-size: var(--wp--preset--font-size--petit);
  color: rgba(255, 255, 255, 0.52);
}

/* --- Habillage du formulaire du greffon Newsletter (classes tnp-*) ---------
   Le greffon arrive avec son style clair par defaut : on le rhabille pour le
   fond sombre du pied, sans toucher a son balisage ni a son fonctionnement. */
.ll-news__form .tnp-subscription { margin: 0; max-width: none; }
.ll-news__form .tnp-subscription form { margin: 0; }
.ll-news__form .tnp-field { margin-bottom: 10px; }
.ll-news__form .tnp-field label {
  display: block;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 8px;
}
.ll-news__form .tnp-field input[type="email"],
.ll-news__form .tnp-field input[type="text"] {
  width: 100%;
  box-sizing: border-box;
  padding: 13px 16px;
  border-radius: 5px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.06);
  color: var(--wp--preset--color--blanc);
  font-family: inherit;
  font-size: var(--wp--preset--font-size--corps);
}
.ll-news__form .tnp-field input::placeholder { color: rgba(255, 255, 255, 0.42); }
.ll-news__form .tnp-field input:focus {
  outline: 2px solid var(--wp--preset--color--projecteur);
  outline-offset: 2px;
  border-color: transparent;
}
.ll-news__form .tnp-field-button { margin-bottom: 0; }
/* PIEGE : le greffon cible `.tnp-subscription input.tnp-submit` (0,2,1).
   Une classe seule (0,2,0) perd : il faut inclure le selecteur d element. */
.ll-news .ll-news__form input.tnp-submit {
  width: auto;
  padding: 13px 26px;
  border: 0;
  border-radius: 5px;
  background: var(--wp--preset--color--projecteur);
  color: var(--wp--preset--color--encre);
  font-family: inherit;
  font-size: var(--wp--preset--font-size--corps);
  font-weight: 600;
  cursor: pointer;
  transition: background-color var(--ll-transition), color var(--ll-transition);
}
.ll-news .ll-news__form input.tnp-submit:hover {
  background: var(--wp--preset--color--blanc);
  color: var(--wp--preset--color--encre);
}
/* Case de consentement (opt-in RGPD) : alignee sur la PREMIERE ligne du texte,
   jamais centree verticalement sur un libelle qui court sur deux lignes. */
.ll-news__form .tnp-field-privacy,
.ll-news__form .tnp-field-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 14px;
}
/* PIEGE : `flex: none` vaut `0 0 auto` — la case garde sa largeur intrinseque
   (13,3px) malgre `width: 18px`. Il faut une base flexible explicite. */
.ll-news .ll-news__form input.tnp-privacy,
.ll-news__form .tnp-field-checkbox input[type="checkbox"] {
  flex: 0 0 18px;
  width: 18px;
  min-width: 18px;
  height: 18px;
  margin: 2px 0 0;
  accent-color: var(--wp--preset--color--projecteur);
  cursor: pointer;
}
.ll-news__form .tnp-field-privacy label,
.ll-news__form .tnp-field-checkbox label {
  margin: 0;
  font-size: var(--wp--preset--font-size--petit);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.68);
  cursor: pointer;
}
.ll-news__form .tnp-field-privacy label a,
.ll-news__form .tnp-field-checkbox label a {
  color: var(--wp--preset--color--projecteur);
  text-decoration: underline;
}

/* ------------------------------------------------------------- CORPS DU PIED */
.ll-pied__grille {
  display: grid;
  grid-template-columns: 1.5fr repeat(3, minmax(0, 1fr));
  gap: clamp(28px, 4vw, 60px);
}
.ll-pied__marque > * { margin-block: 0; }
.ll-pied__marque > * + * { margin-block-start: 18px; }
.ll-pied__logo img { max-width: 210px; height: auto; }
.ll-pied__titre {
  font-family: var(--wp--preset--font-family--corps) !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--wp--preset--color--blanc) !important;
  margin: 0 0 16px !important;
}
.ll-pied__liens { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.ll-pied__liens a { color: rgba(255, 255, 255, 0.78); }
.ll-pied__liens a:hover { color: var(--wp--preset--color--blanc); }
.ll-pied__adresse,
.ll-pied__contact { color: rgba(255, 255, 255, 0.74); line-height: 1.6; }
.ll-pied__contact a { color: rgba(255, 255, 255, 0.9); }

.ll-social {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px 10px 12px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 5px;
  color: rgba(255, 255, 255, 0.88) !important;
  font-size: var(--wp--preset--font-size--petit);
  font-weight: 600;
  transition: background-color var(--ll-transition), border-color var(--ll-transition), color var(--ll-transition);
}
.ll-social svg { width: 20px; height: 20px; flex: none; }
.ll-social:hover {
  background: var(--wp--preset--color--projecteur);
  border-color: var(--wp--preset--color--projecteur);
  color: var(--wp--preset--color--encre) !important;
  text-decoration: none !important;
}

/* --------------------------------------------------------------- BAS DU PIED */
.ll-pied__bas { border-top: 1px solid rgba(255, 255, 255, 0.1); }
.ll-pied__bas-grille {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 28px;
}
/* Le groupe est declare en layout flow mais rendu en flex : le coeur pose
   margin-block-start sur le 2e enfant via :root :where(.is-layout-flow) > *
   (0,1,0), ce qui decale les liens de 12px. Specificite (0,2,0) pour neutraliser. */
.ll-pied__bas .ll-pied__bas-grille > * {
  margin-block-start: 0;
  margin-block-end: 0;
}

.ll-copyright {
  margin: 0;
  font-size: var(--wp--preset--font-size--petit);
  color: rgba(255, 255, 255, 0.6);
}
.ll-pied__legal {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  font-size: var(--wp--preset--font-size--petit);
}
.ll-pied__legal a { color: rgba(255, 255, 255, 0.6); }
.ll-pied__legal a:hover { color: var(--wp--preset--color--projecteur); }

@media (max-width: 1023.98px) {
  .ll-news__grille { grid-template-columns: minmax(0, 1fr); }
  .ll-pied__grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ll-pied__marque { grid-column: 1 / -1; }
}
@media (max-width: 599.98px) {
  .ll-pied__grille { grid-template-columns: minmax(0, 1fr); }
  .ll-news__ligne .ll-btn { flex: 1 1 100%; }
}

/* --------------------------------------------------------------------------
   RESPONSIVE - bornes en .98 pour ne pas laisser de bande non stylee
   sur les largeurs fractionnaires (zoom, ecrans a facteur d'echelle).
   -------------------------------------------------------------------------- */
@media (max-width: 1023.98px) {
  .ll-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ll-fiche__infos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 781.98px) {
  /* Le CTA billetterie reste visible en mobile : c est l objectif premier du site.
     On le compacte au lieu de le masquer.
     PIEGE : .wp-block-buttons.is-layout-flex du coeur vaut (0,2,0) et bat une
     classe simple -> combiner les classes plutot que de recourir a !important. */
  .ll-entete__cta.wp-block-buttons .wp-block-button__link { padding: 9px 15px; font-size: 0.8125rem; }
  .ll-entete__barre { padding-block: 10px; gap: 10px; }
  .ll-entete__droite { gap: 10px; }
  .ll-pied__bas { flex-direction: column; align-items: flex-start; gap: 12px; }
}

@media (max-width: 599.98px) {
  .ll-grille { grid-template-columns: minmax(0, 1fr); }
  .ll-fiche__infos { grid-template-columns: minmax(0, 1fr); padding: 20px; }
  .ll-fiche > * + * { margin-block-start: 34px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  .ll-carte__lien:hover, .wp-block-button__link:hover, .ll-fiche__plateforme:hover { transform: none; }
}

/* ------------------------------------------------------- EN-TETE SOMBRE
   Le fond encre vient de la classe de palette has-encre-background-color
   posee dans parts/header.html : on ne redeclare PAS de background ici.
   .ll-sombre est VOLONTAIREMENT absente de l en-tete : .ll-sombre a
   passerait tous les liens du menu en jaune.

   SPECIFICITES A BATTRE (relevees dans le rendu, styles du coeur) :
   - .wp-block-navigation .wp-block-navigation-item__content.wp-block-navigation-item__content   (0,3,0) color:inherit
   - .wp-block-navigation:not(.has-background) .wp-block-navigation__submenu-container            (0,3,0) fond blanc + bordure noire
   - .wp-block-navigation .has-child .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content  (0,5,0) padding
   D ou le prefixe .ll-entete .ll-nav.wp-block-navigation (0,3,0) sur toutes
   les regles ci-dessous, jamais de !important. */
.ll-entete {
  position: relative;
  z-index: 20;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.ll-entete__barre {
  box-sizing: border-box;
  max-width: calc(1280px + 2 * var(--ll-marge));
  margin-inline: auto;
  padding-inline: var(--ll-marge);
  padding-block: 15px;
  gap: clamp(1rem, 4vw - 1.7rem, 2.25rem);
}

/* Logo : blanc sur transparent (69,9 % de pixels transparents mesures). */
.ll-entete__logo { line-height: 0; }
.ll-entete__logo img,
.ll-entete__logo .custom-logo {
  display: block;
  width: 205px;
  height: auto;
}

.ll-entete__droite { gap: clamp(1rem, 3vw, 2rem); }
.ll-entete__barre > .ll-entete__droite { margin-left: auto; }

/* CTA billetterie : rayon 5px comme partout, jamais de pilule. */
.ll-entete__cta.wp-block-buttons .wp-block-button__link {
  padding: 11px 22px;
  font-size: var(--wp--preset--font-size--menu);
  border-radius: 5px;
}/* Chevron du parent : discret, il pivote a l ouverture. */
/* ------------------------------------------------------------ SOUS-MENU
   Verre sombre : la profondeur vient du reflet interne et de l ombre
   portee, jamais d un contour colore. */
/* (0,6,0) : bat le (0,5,0) du coeur sur le padding des liens de panneau. */
/* Dans le panneau, l etat est porte par la matiere, pas par un filet. */
/* En panneau deroulant mobile le sous-menu est deja dans le flux :
   ni verre, ni ombre, ni fond, juste un retrait. */

/* Le logo ne doit pas se comprimer : par defaut le conteneur flex lui
   donne flex: 0 1 auto, mesure a 136,6px au lieu de 186 en tablette. */
.ll-entete__barre > .ll-entete__logo { flex: none; }

/* ---------------------------------------------------- BASCULE OVERLAY
   Le coeur ne repasse en menu deroulant que sous 600px. A 768px les six
   entrees passaient sur DEUX lignes et l en-tete montait a 128,4px.
   On avance le seuil a 1024px en reprenant les deux regles du coeur :
   .wp-block-navigation__responsive-container:not(...):not(...)  (0,3,0)
   .wp-block-navigation__responsive-container-open:not(...)      (0,2,0)
   nos selecteurs valent (0,5,0) et (0,4,0). */
@media (max-width: 1023.98px) {
}

@media (max-width: 767.98px) {
  .ll-entete__logo img,
  .ll-entete__logo .custom-logo { width: 165px; }
}/* ------------------------------------------ AXE DE L OVERLAY (suite)
   Corriger le conteneur ne suffit pas : chaque <li> a sous-menu est
   lui-meme un flex en colonne et heritait de flex-end. Mesure : les 3
   entrees a sous-menu tombaient sur 3 axes distincts (102,3 / 135,3 /
   189,2) quand les 3 entrees simples etaient bien a 20. */

/* ================================================== MEGA MENU LA LOCO
   Bloc maison laloco/menu : plus aucune specificite du coeur a combattre.
   Filets de separation NEUTRES (rgba blanc), jamais de liseré d accent. */
.ll-menu { display: flex; align-items: center; }

.ll-menu__liste {
  display: flex;
  align-items: center;
  gap: clamp(0.6rem, 1.7vw, 1.5rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.ll-menu__item { position: relative; display: flex; align-items: center; }

.ll-menu__lien {
  position: relative;
  display: block;
  padding-block: 22px;
  color: var(--wp--preset--color--blanc);
  font-size: var(--wp--preset--font-size--menu);
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--ll-transition);
}

.ll-menu__lien::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: 14px;
  height: 2px;
  background: var(--wp--preset--color--projecteur);
  transition: right var(--ll-transition);
}

.ll-menu__item:hover .ll-menu__lien,
.ll-menu__item.est-actif .ll-menu__lien { color: var(--wp--preset--color--projecteur); }
.ll-menu__item:hover .ll-menu__lien::after,
.ll-menu__item:focus-within .ll-menu__lien::after,
.ll-menu__item.est-actif .ll-menu__lien::after { right: 0; }

.ll-menu__bascule {
  display: inline-flex;
  align-items: center;
  margin-left: 3px;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
}
.ll-menu__bascule svg { width: 15px; height: 15px; opacity: 0.62; transition: transform var(--ll-transition), opacity var(--ll-transition); }
.ll-menu__item:hover .ll-menu__bascule svg,
.ll-menu__item.est-ouvert .ll-menu__bascule svg { opacity: 1; transform: rotate(180deg); }

.ll-menu__hamburger {
  display: none;
  padding: 6px;
  border: 0;
  background: none;
  color: var(--wp--preset--color--blanc);
  cursor: pointer;
}
.ll-menu__hamburger svg { width: 26px; height: 26px; }

/* ------------------------------------------------------------ PANNEAU */
.ll-menu__panneau {
  position: absolute;
  top: 100%;
  left: 50%;
  z-index: 40;
  transform: translate(-50%, 8px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--ll-transition), transform var(--ll-transition), visibility var(--ll-transition);
}

.ll-menu__item--mega:hover .ll-menu__panneau,
.ll-menu__item--mega:focus-within .ll-menu__panneau,
.ll-menu__item--mega.est-ouvert .ll-menu__panneau {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, 0);
}

/* Verre sombre : la profondeur vient du reflet et de l ombre, pas d un contour. */
.ll-mega {
  box-sizing: border-box;
  width: max-content;
  max-width: min(92vw, 720px);
  padding: 22px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 5px;
  background-color: rgba(11, 13, 17, 0.94);
  background-image: linear-gradient(158deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.04) 36%, transparent 70%);
  -webkit-backdrop-filter: blur(28px) saturate(168%);
  backdrop-filter: blur(28px) saturate(168%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 34px 76px -30px rgba(0, 0, 0, 0.88);
}

.ll-mega--large { max-width: min(94vw, 860px); }
.ll-mega__grille { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, 1.18fr); gap: 24px; }
.ll-mega__col--filet { border-left: 1px solid rgba(255, 255, 255, 0.1); padding-left: 24px; }

.ll-mega__surtitre {
  margin: 0 0 14px;
  color: var(--wp--preset--color--projecteur);
  font-family: var(--wp--preset--font-family--corps);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.ll-mega__genres { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.ll-mega__duo { display: grid; grid-template-columns: repeat(2, minmax(241px, 1fr)); gap: 2px; }
.ll-mega__pile { display: grid; gap: 2px; }

.ll-mega__entree {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 5px;
  color: var(--wp--preset--color--blanc);
  text-decoration: none;
  transition: background var(--ll-transition), color var(--ll-transition);
}
.ll-mega__entree:hover,
.ll-mega__entree:focus-visible { background: rgba(255, 255, 255, 0.08); color: var(--wp--preset--color--projecteur); }

.ll-mega__picto { display: inline-flex; flex: none; }
.ll-mega__picto .ll-picto { width: 21px; height: 21px; display: block; }
.ll-mega__txt { display: flex; flex-direction: column; min-width: 0; }
.ll-mega__libelle { font-size: 0.875rem; line-height: 1.3; }
.ll-mega__legende { color: rgba(255, 255, 255, 0.58); font-size: 0.75rem; line-height: 1.35; }

/* --------------------------------------------------------- A L AFFICHE */
.ll-mega__affiche { display: grid; gap: 4px; }

.ll-mega__spectacle {
  display: flex;
  gap: 12px;
  padding: 8px;
  border-radius: 5px;
  color: var(--wp--preset--color--blanc);
  text-decoration: none;
  transition: background var(--ll-transition);
}
.ll-mega__spectacle:hover,
.ll-mega__spectacle:focus-visible { background: rgba(255, 255, 255, 0.08); }

.ll-mega__vignette { flex: none; width: 62px; height: 62px; border-radius: 5px; overflow: hidden; background: var(--wp--preset--color--encre-douce); }
.ll-mega__vignette img { display: block; width: 100%; height: 100%; object-fit: cover; }

.ll-mega__spectacle-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ll-mega__meta { color: var(--wp--preset--color--projecteur); font-size: 0.75rem; letter-spacing: 0.02em; }
.ll-mega__titre { font-size: 0.9375rem; font-weight: 500; line-height: 1.25; }
.ll-mega__pastilles { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }

.ll-mega__pastille {
  border-radius: 5px;
  padding: 2px 7px;
  font-size: 0.6875rem;
  font-weight: 500;
  line-height: 1.5;
}
.ll-mega__pastille--prevente { background: var(--wp--preset--color--projecteur); color: var(--wp--preset--color--encre); }
.ll-mega__pastille--reporte { background: var(--wp--preset--color--report); color: var(--wp--preset--color--encre); }
.ll-mega__pastille--complet { background: var(--wp--preset--color--complet); color: var(--wp--preset--color--encre); }
.ll-mega__pastille--annule { background: var(--wp--preset--color--annule); color: var(--wp--preset--color--blanc); }
.ll-mega__tarif { color: rgba(255, 255, 255, 0.62); font-size: 0.75rem; }

/* --------------------------------------------------------- BANDE BASSE */
.ll-mega__bande {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 18px;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.ll-mega__bande-liens { display: flex; flex-wrap: wrap; gap: 4px 10px; }
.ll-mega__entree--ligne { padding: 6px 8px; }
.ll-mega__entree--ligne .ll-mega__picto .ll-picto { width: 17px; height: 17px; }
.ll-mega__entree--ligne .ll-mega__libelle { font-size: 0.8125rem; }

.ll-mega__brochure {
  color: var(--wp--preset--color--projecteur);
  font-size: 0.8125rem;
  font-weight: 500;
  text-decoration: none;
}
.ll-mega__brochure:hover { text-decoration: underline; }

.ll-mega__bande--pastilles { justify-content: flex-start; }
.ll-mega__plateforme {
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 5px;
  padding: 5px 11px;
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.75rem;
  text-decoration: none;
  transition: border-color var(--ll-transition), color var(--ll-transition);
}
.ll-mega__plateforme:hover { border-color: rgba(255, 255, 255, 0.32); color: var(--wp--preset--color--blanc); }

.ll-mega__adresse { display: flex; align-items: flex-start; gap: 9px; color: rgba(255, 255, 255, 0.74); font-size: 0.8125rem; line-height: 1.5; }
.ll-mega__adresse .ll-picto { width: 18px; height: 18px; flex: none; margin-top: 1px; }

/* --------------------------------------------------------------- MOBILE */
@media (max-width: 1023.98px) {
  .ll-menu__hamburger { display: inline-flex; }

  .ll-menu__liste {
    position: fixed;
    top: var(--ll-entete-h, 61px);
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 60;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 18px var(--ll-marge) 48px;
    background: var(--wp--preset--color--encre);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .ll-menu.est-deploye .ll-menu__liste { display: flex; }

  .ll-menu__item { display: block; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
  .ll-menu__item--mega { display: flex; flex-wrap: wrap; align-items: center; }
  .ll-menu__lien { flex: 1; padding-block: 15px; font-size: 1.0625rem; }
  .ll-menu__lien::after { display: none; }
  .ll-menu__bascule { padding: 12px; margin-left: auto; }
  .ll-menu__bascule svg { width: 20px; height: 20px; }

  /* En mobile le panneau entre dans le FLUX : ni verre, ni ombre, ni absolu. */
  .ll-menu__panneau {
    position: static;
    transform: none;
    width: 100%;
    height: 0;
    overflow: hidden;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: none;
  }
  /* PIEGE TACTILE : apres un appui, :hover et :focus-within RESTENT actifs sur
     le bouton. Au second appui le JS retire .est-ouvert, mais ces deux regles
     rouvraient le panneau -- et sans transform: none il heritait du
     translate(-50%) du bureau : panneau decale de la MOITIE de sa largeur,
     partie gauche hors ecran (mesure : gauche -140, droite 180 pour 320 de
     large). En mobile, SEUL .est-ouvert ouvre. */
  .ll-menu__item--mega:hover .ll-menu__panneau,
  .ll-menu__item--mega:focus-within .ll-menu__panneau { height: 0; transform: none; }
  .ll-menu__item--mega.est-ouvert .ll-menu__panneau { height: auto; transform: none; }

  .ll-mega,
  .ll-mega--large {
    width: 100%;
    max-width: none;
    padding: 4px 0 16px;
    border: 0;
    border-radius: 0;
    background: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: none;
  }
  .ll-mega__grille { grid-template-columns: 1fr; gap: 14px; }
  .ll-mega__col--filet { border-left: 0; border-top: 1px solid rgba(255, 255, 255, 0.1); padding-left: 0; padding-top: 14px; }
  .ll-mega__genres { grid-template-columns: 1fr 1fr; }
  .ll-mega__surtitre { margin-bottom: 9px; }
  .ll-mega__bande { margin-top: 12px; padding-top: 11px; }
}

@media (max-width: 599.98px) {
  .ll-mega__genres,
  .ll-mega__duo { grid-template-columns: 1fr; }
}

.ll-menu-ouvert { overflow: hidden; }

/* --------------------------------------------- HAMBURGER A DROITE
   Dans le DOM le bouton vit dans .ll-menu, donc avant le CTA. En mobile
   on l envoie a l extreme droite (usage etabli) sans toucher a l ordre
   du document, qui reste correct au clavier et pour les lecteurs d ecran.
   Mesure avant : hamburger 194-232 puis CTA 256-355 ; en-tete a 89px. */
@media (max-width: 1023.98px) {
  .ll-entete__droite { gap: 8px; }
  .ll-entete__droite > .ll-menu { order: 2; }
  .ll-entete__droite > .ll-entete__cta { order: 1; }
  .ll-menu__hamburger { padding: 4px; }
  .ll-menu__hamburger svg { width: 24px; height: 24px; }
  .ll-entete__barre { padding-block: 12px; }

  /* CTA compact mobile : la regle desktop, ajoutee en fin de fichier,
     ecrasait a specificite egale la compaction qui vivait plus haut.
     Bouton mesure a 58px de haut, ce qui portait l en-tete a 82px. */
  .ll-entete__cta.wp-block-buttons .wp-block-button__link {
    padding: 9px 15px;
    font-size: 0.8125rem;
    line-height: 1.35;
  }
}

/* ------------------------------------------------ CROIX DE FERMETURE
   L overlay demarre SOUS l en-tete (top: --ll-entete-h, pose par le JS)
   pour que le bouton reste visible et cliquable. Il bascule en croix.
   Avant : inset:0 + z-index superieur = hamburger recouvert, fermeture
   possible uniquement au clavier avec Echap. */
.ll-menu__icone { width: 24px; height: 24px; }
.ll-menu__icone--croix { display: none; }
.ll-menu.est-deploye .ll-menu__icone--barres { display: none; }
.ll-menu.est-deploye .ll-menu__icone--croix { display: block; }
.ll-menu__hamburger { position: relative; z-index: 70; }

/* --------------------------------------------- PLAQUES DES PLATEFORMES
   Luminance d encre MESUREE sur les 4 logos : de 0 (See Tickets, noir pur)
   a 0,70 (Fnac). Poses sur le verre sombre, les deux plus sombres seraient
   invisibles (contraste 1,1). Chaque logo recoit donc sa plaque claire.
   Les hauteurs sont normalisees en PHP (h = k / ratio^0.32 / remplissage). */
.ll-mega__bande--plaques { display: block; }

.ll-mega__plaques {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.ll-mega__plaque {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 5px 10px;
  border-radius: 5px;
  background: var(--wp--preset--color--creme);
  text-decoration: none;
  transition: background var(--ll-transition), transform var(--ll-transition);
}
.ll-mega__plaque:hover,
.ll-mega__plaque:focus-visible {
  background: var(--wp--preset--color--blanc);
  transform: translateY(-2px);
}

.ll-mega__logo {
  display: block;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}

/* Repli si le media manque : jamais de plaque vide. */
.ll-mega__plaque-nom {
  color: var(--wp--preset--color--encre);
  font-size: 0.8125rem;
  font-weight: 500;
}

@media (max-width: 1023.98px) {
  .ll-mega__plaques { gap: 6px; }
  .ll-mega__plaque { min-height: 42px; }
}

/* ------------------------------------------------ LOGO ANIME (2026-08-18)
   Balayage projecteur, variante validee sur maquette : un faisceau
   traverse le lettrage une fois au chargement, puis au survol. Le
   faisceau est confine aux GLYPHES par un masque = le fichier du logo.
   Deux couches distinctes : ::after joue au chargement, ::before au
   survol — revenir sur une meme couche rejouerait l animation a la
   sortie du survol. Chemin absolu sans domaine : vaut en dev et en prod. */

.wp-block-site-logo .custom-logo-link { position: relative; }

@supports ((-webkit-mask-image: url("")) or (mask-image: url(""))) {
  @media (prefers-reduced-motion: no-preference) {
    .wp-block-site-logo .custom-logo-link::before,
    .wp-block-site-logo .custom-logo-link::after {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      background-image: linear-gradient(100deg,
        rgba(251, 211, 76, 0) 40%,
        rgba(251, 211, 76, 0.95) 50%,
        rgba(255, 255, 255, 0.9) 52%,
        rgba(251, 211, 76, 0) 62%);
      background-size: 260% 100%;
      background-repeat: no-repeat;
      background-position: 160% 0;
      -webkit-mask-image: url(/wp-content/uploads/2021/11/cropped-logo-white.png);
      -webkit-mask-repeat: no-repeat;
      -webkit-mask-size: contain;
      -webkit-mask-position: left center;
      mask-image: url(/wp-content/uploads/2021/11/cropped-logo-white.png);
      mask-repeat: no-repeat;
      mask-size: contain;
      mask-position: left center;
    }
    .wp-block-site-logo .custom-logo-link::after {
      animation: llLogoBalaye 3.2s ease-in-out 0.5s 1 both;
    }
    .wp-block-site-logo .custom-logo-link:hover::before,
    .wp-block-site-logo .custom-logo-link:focus-visible::before {
      animation: llLogoBalaye 2.4s ease-in-out 1;
    }
  }
}

@keyframes llLogoBalaye {
  from { background-position: 160% 0; }
  to { background-position: -60% 0; }
}

/* --------------------------------------------------------- ECRANS ETROITS
   PIEGE : le coeur pose word-break: break-word sur .wp-block-button__link, et
   le conteneur flex laisse le CTA rETRECIR sous la largeur du mot. Mesure a
   360px : bouton 75x53, "Reserver" sur DEUX lignes -- TROIS a 150 % de taille
   de police systeme (97px de haut). Le libelle d un bouton ne se coupe jamais.
   -------------------------------------------------------------------------- */
@media (max-width: 420px) {
  .ll-entete__cta.wp-block-buttons .wp-block-button__link {
    white-space: nowrap;
    word-break: normal;
    padding: 9px 13px;
  }
  .ll-entete__cta,
  .ll-entete__cta .wp-block-button { flex: none; }
  /* Le logo cede la place plutot que le bouton : il reste lisible a 140px. */
  .ll-entete__logo img,
  .ll-entete__logo .custom-logo { width: 140px; }
}

/* Deux reseaux cote a cote. .ll-pied__marque occupe toute la largeur du
   pied, il y a donc la place ; on replie en colonne sur ecran etroit. */
.ll-social__groupe { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.ll-social__intro { margin: 0; color: rgba(255, 255, 255, 0.66); font-size: var(--wp--preset--font-size--petit); }
.ll-social__liens { display: flex; flex-wrap: wrap; gap: 10px; }
/* Icone seule : carre, le nom du reseau reste lisible par les lecteurs d ecran. */
.ll-social--icone { padding: 11px; }