/* Complément à theme.json. Tout ce qui est exprimable en theme.json y reste.
   Aucune couleur de la charte n'est écrite en dur : on passe par les variables
   de préréglage produites par theme.json. Seul le gris de bordure #ddd9d3,
   qui n'est pas un jeton de la palette, apparaît tel quel. */

/* Fiche adhérent : encart pratique collant en desktop (wireframe 1c). */
@media (min-width: 782px) {
  .lea-encart-pratique {
    position: sticky;
    top: var(--wp--preset--spacing--60);
  }
}

/* Fiche adhérent : l'encart pratique passe avant le texte en mobile.
   « c'est ce qu'on cherche sur un téléphone », annotation du wireframe 1c. */
@media (max-width: 781px) {
  .lea-fiche-colonnes { display: flex; flex-direction: column; }
  .lea-fiche-colonnes > .lea-colonne-encart { order: 1; }
  .lea-fiche-colonnes > .lea-colonne-texte { order: 2; }
}

/* Filet jaune des pages tiers-lieux : seul endroit où le jaune fait bandeau. */
.lea-filet-tiers-lieu {
  border-top: 6px solid var(--wp--preset--color--secondary);
}

/* Cartes, direction C (2026-09-10) : bloc très arrondi (28 px) sur fond
   gris clair, sans bordure ni ombre ; l'image se pose dedans avec son
   propre rayon (voir « Formes arrondies »). Un groupe qui écrit sa marge
   intérieure en ligne garde la sienne. */
.lea-carte {
  border: 0;
  border-radius: var(--wp--custom--rayon--bloc);
  overflow: hidden;
  padding: 12px;
  background: var(--wp--preset--color--surface);
}

/* Carte large de tiers-lieu : la même carte. La coiffe de couleur du lieu
   devient un bandeau intérieur, qui suit l'arrondi. Annotation du
   wireframe 1a : « jamais en cartes standard ». */
.lea-carte-lieu {
  border: 0;
  border-radius: var(--wp--custom--rayon--bloc);
  overflow: hidden;
  background: var(--wp--preset--color--surface);
  box-shadow: inset 0 8px 0 var(--wp--preset--color--secondary);
}

/* Liens des cartes en noir, comme sur l'accueil v2. Sur le fond gris clair,
   l'orange foncé des liens de texte ne tient que 4,5:1, à la limite du
   seuil ; le noir tient 15,5:1. « Voir la fiche » et « Lire la suite »
   restent soulignés, pour qu'on les reconnaisse comme liens. */
.lea-carte a:where(:not(.wp-element-button)),
.lea-carte-lieu a:where(:not(.wp-element-button)) {
  color: var(--wp--preset--color--contrast);
}
.lea-carte .wp-block-post-title a {
  text-decoration: none;
}
.lea-carte .wp-block-post-title a:hover,
.lea-carte .wp-block-post-title a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.lea-carte .wp-block-read-more {
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Étiquettes en pastille, direction C (2026-09-10). La pastille se pose sur
   le lien, pas sur son conteneur : une liste de termes donnait sinon une
   pastille dans la pastille. Une étiquette sans lien (nom de commune) prend
   la pastille elle-même. */
.lea-tag,
.lea-tag-neutre {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
}
.lea-tag a,
.lea-tag-neutre a,
.lea-tag-neutre:not(:has(a)) {
  display: inline-block;
  padding: 4px 14px;
  border-radius: var(--wp--custom--rayon--pastille);
  font-size: 0.8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  text-decoration: none;
}
.lea-tag .wp-block-post-terms__separator {
  display: none;
}

/* Tag de catégorie : jaune, texte noir (10,9:1). */
.lea-tag a {
  background: var(--wp--preset--color--secondary);
  color: var(--wp--preset--color--contrast);
}

/* Variante neutre, pour les filtres inactifs (planche 1g) : fond blanc,
   filet gris, texte noir. Le gris sur gris clair ne tenait que 4,1:1
   (audit du 2026-09-10, P2). Au survol, le jaune. */
.lea-tag-neutre a,
.lea-tag-neutre:not(:has(a)) {
  background: var(--wp--preset--color--base);
  color: var(--wp--preset--color--contrast);
  box-shadow: inset 0 0 0 1.5px #ddd9d3;
}
.lea-tag-neutre a:hover,
.lea-tag-neutre a:focus-visible {
  background: var(--wp--preset--color--secondary);
  box-shadow: none;
}

/* Surlignage d'encadré : bloc arrondi gris clair, filet jaune intérieur à
   gauche, qui suit l'arrondi. */
.lea-encadre {
  background: var(--wp--preset--color--surface);
  border-radius: var(--wp--custom--rayon--bloc);
  box-shadow: inset 8px 0 0 var(--wp--preset--color--secondary);
}

/* Cibles tactiles de 44 px minimum, annotation du wireframe 1f. */
.wp-block-navigation__responsive-container-content a,
.wp-block-button__link {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

/* Marque des liens externes (Yapla, sites des tiers-lieux). */
.lea-externe a::after,
a.lea-externe::after { content: " \2197"; }

/* Padding de section : 64 px en desktop, 40 px en mobile (planche 1g).
   theme.json ne sait pas exprimer de point de rupture. */
@media (max-width: 781px) {
  .lea-section {
    padding-top: var(--wp--preset--spacing--60);
    padding-bottom: var(--wp--preset--spacing--60);
  }
}

/* Logos des soutiens : niveaux de gris, hauteur normalisée 40 px. */
.lea-soutiens img {
  height: 40px;
  width: auto;
  filter: grayscale(1);
}

/* Les six catégories s'affichent en deux colonnes en mobile (wireframe 1a).
   Le bloc Grille ne connaît qu'une largeur minimale de colonne : elle est
   réglée pour donner trois colonnes en desktop, la seconde colonne mobile
   se rattrape ici. */
@media (max-width: 781px) {
  .lea-grille-categories { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Repli des catégories en mobile dans l'annuaire, annotation du wireframe 1b. */
@media (max-width: 781px) {
  .lea-filtres-secteurs { display: none; }
  .lea-filtres-repli { display: block; }
}
@media (min-width: 782px) {
  .lea-filtres-repli { display: none; }
}


/* ------------------------------------------------------------------
   Revue de design du 2026-09-09. Trois corrections tenues pour fondées
   après vérification dans le rendu réel ; les mesures de la revue ont été
   prises sur une vignette de 465 px de large, donc recalculées ici.
   ------------------------------------------------------------------ */

/* Pictogrammes : la grille de dessin reste 24 (CLAUDE.md section 4), mais la
   taille de rendu passe de 24 à 40 px. Le trait est ramené à 1,2 dans le
   viewBox pour rester à 2 px optiques une fois agrandi, sans quoi il
   épaissirait à 3,3 px. */
.lea-picto {
  width: 40px;
  height: 40px;
  color: var(--wp--preset--color--contrast);
}

/* Liens sur les aplats orange (pied, appel) : texte noir depuis l'étape a
   de la direction C, le blanc ne tenant que 3,0:1. Le soulignement
   permanent bruite la lecture à petite taille ; il passe au survol. */
.lea-pied a,
.lea-appel a {
  text-decoration: none;
}
.lea-pied a:hover,
.lea-pied a:focus-visible,
.lea-appel a:hover,
.lea-appel a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Le logo est un JPEG à fond blanc : sur l'orange, il prend la déclinaison
   « cartouche blanc » de la charte (planches 2 et 3), arrondie comme les
   blocs de la direction C. */
.lea-pied .wp-block-site-logo img {
  background: var(--wp--preset--color--base);
  padding: 8px;
  border-radius: 20px;
}

/* Logos de soutiens : normaliser la hauteur optique et non la boîte. Chaque
   cellule occupe la même largeur, le logo se contient dedans sans être étiré,
   qu'il soit carré ou en bandeau. */
.lea-soutiens {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  align-items: center;
  gap: var(--wp--preset--spacing--60);
}
.lea-soutiens a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
}
.lea-soutiens img {
  height: auto;
  max-height: 40px;
  max-width: 100%;
  width: auto;
  object-fit: contain;
  filter: grayscale(1);
}
@media (max-width: 781px) {
  .lea-soutiens { grid-template-columns: repeat(3, 1fr); }
}

/* Photo du hero de l'accueil, ajoutée le 2026-09-10. Même rayon que les cartes,
   aucune ombre. La photo est carrée : en pleine largeur mobile elle mangerait un
   écran entier, elle est donc recadrée en bandeau. Le sujet, les mains et le
   puzzle, occupe le centre de l'image et survit au recadrage. */
.lea-hero-photo img {
  border-radius: 8px;
  display: block;
  width: 100%;
  height: auto;
}
@media (max-width: 781px) {
  .lea-hero-photo img {
    max-height: 240px;
    object-fit: cover;
  }
}


/* ==================================================================
   Revue de design du 2026-09-10, demandée par Olivier sur cinq captures
   de l'accueil. Couleur sur les pictogrammes, photos sur les cartes de
   catégorie, logos sur les tiers-lieux, apparition au défilement.
   ================================================================== */

/* --- Apparition au défilement --------------------------------------
   Pilotée par la position dans la fenêtre, sans une ligne de JavaScript :
   `animation-timeline: view()`. Trois garde-fous : le contenu est visible
   par défaut et l'animation ne fait que s'y ajouter, elle ne se déclenche
   que si le navigateur la gère (`@supports`), et jamais si le visiteur a
   demandé moins de mouvement. Aucun risque de section restée invisible. */
/* Direction C (2026-09-10) : la cascade devient nette, comme sur l'accueil
   (montée de 56 px et léger zoom, une carte après l'autre), et elle vaut
   pour toutes les grilles de boucle de requête (annuaire, actualités,
   articles liés), pas seulement pour les motifs marqués lea-apparition. */
@keyframes lea-apparition {
  from { opacity: 0; translate: 0 56px; scale: 0.92; }
  to   { opacity: 1; translate: 0 0; scale: 1; }
}
@keyframes lea-monte {
  from { opacity: 0; translate: 0 32px; }
  to   { opacity: 1; translate: 0 0; }
}
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .lea-apparition > *,
    .wp-block-post-template.is-layout-grid > li {
      animation: lea-apparition linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 24%;
    }
    /* Décalage d'une tuile à l'autre : elles entrent ensemble dans la
       fenêtre, sans quoi les cartes apparaîtraient d'un bloc. Dans une
       grille de boucle, le décalage suit la colonne. */
    .lea-apparition > *:nth-child(2) { animation-range: entry 6% cover 32%; }
    .lea-apparition > *:nth-child(3) { animation-range: entry 12% cover 40%; }
    .lea-apparition > *:nth-child(4) { animation-range: entry 18% cover 48%; }
    .lea-apparition > *:nth-child(5) { animation-range: entry 24% cover 56%; }
    .lea-apparition > *:nth-child(6) { animation-range: entry 30% cover 64%; }
    .wp-block-post-template.is-layout-grid > li:nth-child(3n+2) { animation-range: entry 6% cover 32%; }
    .wp-block-post-template.is-layout-grid > li:nth-child(3n+3) { animation-range: entry 12% cover 40%; }
    /* Les titres de section montent à leur entrée dans la fenêtre. */
    .wp-block-heading.has-x-large-font-size {
      animation: lea-monte linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 28%;
    }
  }
}

/* --- Pictogrammes en couleur ---------------------------------------
   Le disque teinté sert à deux choses : il grossit la tache visuelle sans
   grossir le trait, et il pose le jaune sur un fond qui le retient. Un
   trait jaune nu sur blanc plafonne à 1,7:1 et s'efface. */
.lea-picto-disque {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--wp--preset--spacing--40);
}
.lea-picto-disque .lea-picto {
  width: 48px;
  height: 48px;
  /* `.lea-picto` pose `color: contrast` : sans cette reprise le trait reste
     noir et le disque coloré ne sert à rien. Le SVG est en `currentColor`. */
  color: inherit;
}
.lea-picto-orange {
  background: color-mix(in srgb, var(--wp--preset--color--primary) 12%, transparent);
  color: var(--wp--preset--color--primary);
}
.lea-picto-jaune {
  background: color-mix(in srgb, var(--wp--preset--color--secondary) 28%, transparent);
  color: var(--wp--preset--color--secondary);
}

/* Filet de couleur en tête de carte, qui reprend la couleur du disque. */
.lea-carte-orange { border-top: 4px solid var(--wp--preset--color--primary); }
.lea-carte-jaune  { border-top: 4px solid var(--wp--preset--color--secondary); }

/* --- Cartes de catégorie en photo ----------------------------------
   Bloc Couverture du cœur : la photo est le fond, le voile assombri porte
   le titre en blanc. Au survol le voile vire à l'orange et la photo avance
   d'un cran, pour signaler que la carte est un lien. */
.lea-carte-categorie {
  border-radius: 8px;
  overflow: hidden;
  /* Le bandeau doit affleurer les trois bords : la marge intérieure du bloc
     Couverture est reprise par le bandeau lui-même. */
  padding: 0;
}
/* Bandeau de titre. Un fond plein, et non un voile calculé sur la photo : le
   contraste du titre blanc ne dépend plus de ce que montre l'image. */
.lea-carte-categorie .wp-block-cover__inner-container {
  width: 100%;
  max-width: none;
  background: color-mix(in srgb, var(--wp--preset--color--contrast) 86%, transparent);
  padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50);
  transition: background-color .3s ease;
}
.lea-carte-categorie:hover .wp-block-cover__inner-container,
.lea-carte-categorie:focus-within .wp-block-cover__inner-container {
  background: var(--wp--preset--color--primary);
}
.lea-carte-categorie .wp-block-cover__image-background {
  transition: transform .4s ease;
}
.lea-carte-categorie .wp-block-cover__background {
  transition: background-color .3s ease, opacity .3s ease;
}
.lea-carte-categorie:hover .wp-block-cover__image-background,
.lea-carte-categorie:focus-within .wp-block-cover__image-background {
  transform: scale(1.05);
}
.lea-carte-categorie:hover .wp-block-cover__background,
.lea-carte-categorie:focus-within .wp-block-cover__background {
  background-color: var(--wp--preset--color--primary) !important;
}
.lea-carte-categorie a {
  color: var(--wp--preset--color--base);
  text-decoration: none;
}
.lea-carte-categorie a:hover,
.lea-carte-categorie a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  .lea-carte-categorie .wp-block-cover__image-background { transition: none; }
  .lea-carte-categorie:hover .wp-block-cover__image-background { transform: none; }
}

/* --- Logos des deux tiers-lieux -------------------------------------
   Hauteur optique normalisée : le logo de La Ruche est un bandeau, celui
   de La Maison du Manège une pastille carrée. On borne la boîte, on ne
   déforme pas le dessin. */
.lea-logo-lieu {
  display: flex;
  align-items: center;
  min-height: 132px;
  padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--50) 0;
}
.lea-logo-lieu img {
  max-height: 108px;
  width: auto;
  max-width: 300px;
  object-fit: contain;
}

/* Coiffe de couleur des deux cartes de tiers-lieu : orange pour La Ruche,
   jaune pour La Maison du Manège. Remplace le filet jaune uniforme, qui
   ne distinguait pas les deux lieux. */
.lea-carte-lieu-ruche  { box-shadow: inset 0 8px 0 var(--wp--preset--color--primary); }
.lea-carte-lieu-manege { box-shadow: inset 0 8px 0 var(--wp--preset--color--secondary); }

/* --- Boutons, direction C (2026-09-10) ------------------------------
   Tous les boutons du site en pastille. Le bouton par défaut est une
   pastille noire (theme.json) ; le bouton à filet se remplit d'orange au
   survol, règle d'Olivier du 2026-09-10, mais avec un texte noir (5,8:1)
   et non plus blanc (3,0:1). Plusieurs blocs écrivent encore un rayon de
   3 px en ligne : il est repris ici, d'où le !important. */
.wp-block-button__link {
  border-radius: var(--wp--custom--rayon--pastille) !important;
}
.wp-block-button:not(.is-style-outline) > .wp-block-button__link,
.wp-block-button.is-style-outline > .wp-block-button__link {
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.wp-block-button.is-style-outline > .wp-block-button__link {
  border-width: 2px;
  font-weight: 700;
}
.wp-block-button.is-style-outline > .wp-block-button__link:hover,
.wp-block-button.is-style-outline > .wp-block-button__link:focus-visible {
  background-color: var(--wp--preset--color--primary);
  border-color: var(--wp--preset--color--primary);
  color: var(--wp--preset--color--contrast);
}
.wp-block-button:not(.is-style-outline) > .wp-block-button__link:hover,
.wp-block-button:not(.is-style-outline) > .wp-block-button__link:focus-visible {
  background-color: var(--wp--preset--color--primary);
  color: var(--wp--preset--color--contrast);
}
/* Boutons qui forcent l'orange à texte blanc dans leur balisage (fiche
   adhérent, 404, contenu de À propos et d'Adhésion) : 3,0:1, sous le seuil
   pour un libellé de 16 px (audit du 2026-09-10, P1). Le texte passe au
   noir (5,8:1) sans toucher au balisage ; au survol, pastille noire. Les
   !important répondent à ceux des classes de couleur de WordPress. */
.wp-block-button__link.has-primary-background-color.has-base-color {
  color: var(--wp--preset--color--contrast) !important;
}
.wp-block-button__link.has-primary-background-color.has-base-color:hover,
.wp-block-button__link.has-primary-background-color.has-base-color:focus-visible {
  background-color: var(--wp--preset--color--contrast) !important;
  color: var(--wp--preset--color--base) !important;
}
/* Exception, l'aplat orange de l'appel : un bouton qui s'y remplirait
   d'orange disparaîtrait dans son propre fond. Il passe au jaune. */
.lea-appel .wp-block-button > .wp-block-button__link:hover,
.lea-appel .wp-block-button > .wp-block-button__link:focus-visible {
  background-color: var(--wp--preset--color--secondary);
  border-color: var(--wp--preset--color--secondary);
  color: var(--wp--preset--color--contrast);
}

/* --- Bandeau d'appel logé dans la section « Pourquoi adhérer » ------- */
.lea-appel-encadre {
  border-radius: 8px;
}

/* --- Logos des soutiens : nettement plus grands ----------------------
   La revue du 2026-09-09 avait normalisé leur hauteur optique à 40 px.
   Trop bas : à cette taille les six blasons sont illisibles. Portés à
   72 px, et à quatre par ligne pour leur laisser de la largeur. */
.lea-soutiens {
  grid-template-columns: repeat(3, 1fr);
  gap: var(--wp--preset--spacing--70) var(--wp--preset--spacing--60);
}
.lea-soutiens img {
  max-height: 72px;
}
@media (max-width: 781px) {
  .lea-soutiens { grid-template-columns: repeat(2, 1fr); }
  .lea-soutiens img { max-height: 60px; }
}

/* Carte de catégorie cliquable en entier, sans une ligne de JavaScript : le
   lien du titre étend sa zone de clic à toute la carte. Le texte du lien
   reste un vrai texte de lien pour un lecteur d'écran. */
.lea-carte-categorie { position: relative; }
.lea-carte-categorie a::after { content: ""; position: absolute; inset: 0; }

/* Le nom de commune des cartes de tiers-lieu était un paragraphe : son fond
   gris traversait la carte de part en part. Un tag se dimensionne à son
   texte. */
.lea-tag-neutre { display: inline-block; }

/* Cartes d'égale hauteur dans une rangée. Une colonne s'étire sur toute la
   hauteur de la rangée, mais la carte qu'elle contient s'arrêtait à son
   texte : « Mutualiser », plus court, finissait 60 px au-dessus des autres.
   `height` seul, sans `display: flex` : une carte est un groupe en mise en
   page contrainte, et WordPress y pose `margin-left: auto; margin-right: auto`
   sur chaque enfant. Dans une colonne flex, ces marges centrent les titres,
   qui doivent rester fer à gauche comme le reste de la carte. */
.wp-block-column > .lea-carte,
.wp-block-column > .lea-carte-lieu {
  height: 100%;
}

/* Titres de niveau 1 : césure automatique. Source Sans 3 800 en capitales
   est 31 % plus large que Barlow Condensed (mesure du 2026-09-10 sur les 136
   titres du site). Même ramené à 32 px par le clamp de `xx-large`, trois mots
   restent plus larges que la colonne d'un écran de 360 px : « ENTREPRENEURIALES »,
   « L'ENTREPRENEURIAT », « TOF'INFORMATIQUE ». La césure les coupe au lieu de
   les laisser déborder. `overflow-wrap` rattrape un navigateur sans
   dictionnaire français. */
h1 {
  hyphens: auto;
  overflow-wrap: break-word;
}


/* ==================================================================
   Boutons en pastille, direction C (2026-09-10). À poser sur le bloc
   Bouton : la classe lea-v2-btn plus une variante. Déplacés de lea-v2.css
   pour servir hors de l'accueil : le bouton de la newsletter, dans
   l'avant-pied, est sur toutes les pages.
   Contrastes : blanc sur noir 17,3:1, noir sur blanc 17,3:1, noir sur
   orange 5,8:1, noir sur jaune 10,9:1. Aucun petit texte blanc sur orange.
   ================================================================== */
.wp-block-button.lea-v2-btn > .wp-block-button__link {
  border-radius: var(--wp--custom--rayon--pastille);
  padding: 14px 28px;
  font-size: 1.0625rem;
  font-weight: 700;
  border: 2px solid transparent;
  transition:
    background-color var(--wp--custom--mouvement--survol) var(--wp--custom--mouvement--courbe),
    color var(--wp--custom--mouvement--survol) var(--wp--custom--mouvement--courbe),
    border-color var(--wp--custom--mouvement--survol) var(--wp--custom--mouvement--courbe),
    translate var(--wp--custom--mouvement--survol) var(--wp--custom--mouvement--courbe);
}

/* Pastille noire : texte blanc. Au survol elle se remplit d'orange, texte
   noir ; sur un aplat orange elle passe au blanc. */
.wp-block-button.lea-v2-btn--sombre > .wp-block-button__link {
  background-color: var(--wp--preset--color--contrast);
  color: var(--wp--preset--color--base);
}
.wp-block-button.lea-v2-btn--sombre > .wp-block-button__link:hover,
.wp-block-button.lea-v2-btn--sombre > .wp-block-button__link:focus-visible {
  background-color: var(--wp--preset--color--primary);
  color: var(--wp--preset--color--contrast);
}
.has-primary-background-color .wp-block-button.lea-v2-btn--sombre > .wp-block-button__link:hover,
.has-primary-background-color .wp-block-button.lea-v2-btn--sombre > .wp-block-button__link:focus-visible {
  background-color: var(--wp--preset--color--base);
  color: var(--wp--preset--color--contrast);
}

/* Pastille blanche : texte noir. Au survol, le jaune en petite surface. */
.wp-block-button.lea-v2-btn--clair > .wp-block-button__link {
  background-color: var(--wp--preset--color--base);
  color: var(--wp--preset--color--contrast);
}
.wp-block-button.lea-v2-btn--clair > .wp-block-button__link:hover,
.wp-block-button.lea-v2-btn--clair > .wp-block-button__link:focus-visible {
  background-color: var(--wp--preset--color--secondary);
  color: var(--wp--preset--color--contrast);
}

/* Pastille à filet : prend la couleur du texte qui l'entoure. */
.wp-block-button.lea-v2-btn--filet > .wp-block-button__link {
  background-color: transparent;
  color: currentColor;
  border-color: currentColor;
}
.wp-block-button.lea-v2-btn--filet > .wp-block-button__link:hover,
.wp-block-button.lea-v2-btn--filet > .wp-block-button__link:focus-visible {
  background-color: var(--wp--preset--color--contrast);
  border-color: var(--wp--preset--color--contrast);
  color: var(--wp--preset--color--base);
}

@media (prefers-reduced-motion: no-preference) {
  .wp-block-button.lea-v2-btn > .wp-block-button__link:hover {
    translate: 0 -2px;
  }
}


/* ==================================================================
   Éléments partagés, direction C (étape a, 2026-09-10) : en-tête, pied,
   titres de section, formes arrondies. Tout ce qui suit touche toutes les
   pages à la fois.
   ================================================================== */

/* --- En-tête -------------------------------------------------------- */

/* Bouton « Adhérer » : pastille orange, texte noir (5,8:1) ; au survol,
   pastille noire. Il ne force plus aucune couleur dans son balisage. */
.wp-block-button.lea-btn-adherer > .wp-block-button__link {
  background-color: var(--wp--preset--color--primary);
  color: var(--wp--preset--color--contrast);
  padding: 10px 22px;
  white-space: nowrap;
}
.wp-block-button.lea-btn-adherer > .wp-block-button__link:hover,
.wp-block-button.lea-btn-adherer > .wp-block-button__link:focus-visible {
  background-color: var(--wp--preset--color--contrast);
  color: var(--wp--preset--color--base);
}

/* Menu replié derrière le bouton jusqu'à 1200 px. WordPress ne le replie
   qu'en dessous de 600 px : entre les deux, les entrées passaient sur deux
   lignes (audit du 2026-09-10, responsive).
   Seuil porté de 1024 à 1200 px le 2026-09-22, avec la sixième entrée
   « Entreprendre ici ». Largeur des six libellés mesurée sur Roboto 600 à
   14 px avec 0,06 em d'interlettre : 806 px de menu, soit environ 1114 px
   d'en-tête avec le logo, le bouton et les marges. À 1024 px, le menu serait
   passé sur deux lignes. */
@media (min-width: 600px) and (max-width: 1200px) {
  header .wp-block-navigation__responsive-container-open:not(.always-shown) {
    display: flex;
  }
  header .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
    display: none;
  }
}

/* --- Pied de page --------------------------------------------------- */

/* Sur l'orange : texte noir (5,8:1), la devise seule en blanc, assez grande
   pour compter comme grand texte (3,0:1 suffit à partir de 24 px). */
.lea-pied__devise {
  font-family: var(--wp--preset--font-family--titre);
  font-weight: 800;
  font-size: 1.75rem;
  line-height: 1.05;
  text-transform: uppercase;
  margin-top: var(--wp--preset--spacing--40);
}
.lea-pied h2 {
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.lea-pied ul {
  list-style: none;
  padding-left: 0;
}

/* --- Titres de section ---------------------------------------------- */

/* Les titres de section des gabarits et motifs (préréglage x-large) passent
   en capitales 800, de 32 à 56 px, comme sur l'accueil (audit, P2 :
   hiérarchie). Les titres de niveau 2 écrits dans le corps d'un article
   gardent leur taille de lecture. Le !important répond à celui de la classe
   de taille de WordPress. */
.wp-block-heading.has-x-large-font-size {
  font-size: clamp(2rem, 1.3rem + 2.6vw, 3.5rem) !important;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.005em;
  text-transform: uppercase;
}

/* --- Formes arrondies ----------------------------------------------- */

/* Les images à la une prennent le rayon « photo » (32 px), 20 px dans une
   carte. Les gabarits écrivent encore 8 px en ligne : repris ici. */
.wp-block-post-featured-image img {
  border-radius: var(--wp--custom--rayon--photo) !important;
}
.lea-carte .wp-block-post-featured-image img {
  border-radius: 20px !important;
}
/* Le conteneur de l'image garde sinon le rayon de 8 px écrit en ligne et
   rogne l'image à cet arrondi, quel que soit le rayon de l'image. */
.wp-block-post-featured-image {
  overflow: visible;
}

/* Champ de recherche en pastille, comme les boutons. */
.wp-block-search__inside-wrapper,
.wp-block-search__input {
  border-radius: var(--wp--custom--rayon--pastille);
}
.wp-block-search__input {
  padding-inline: 20px;
}

/* ------------------------------------------------------------------
   Newsletter en fenêtre modale (2026-09-21). Le formulaire Brevo vit dans
   un popover natif, ouvert par le bouton de l'avant-pied : pas de
   JavaScript. La fenêtre encapsule l'iframe à sa largeur (540 px), avec
   un seul ajout, le bouton Fermer. Rien d'autre, décision d'Olivier.
   ------------------------------------------------------------------ */
.lea-newsletter__actions button.wp-block-button__link {
  cursor: pointer;
  font: inherit;
}
.lea-modale {
  position: fixed;
  box-sizing: border-box;
  width: min(540px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  overflow: auto;
  padding: 0;
  border: 0;
  border-radius: var(--wp--custom--rayon--bloc);
  background: var(--wp--preset--color--base);
}
/* Les marges de flux de WordPress (« > * + * ») écrasaient le margin: auto
   du popover, qui se collait en bas de l'écran. Sélecteur renforcé. */
.lea-modale[popover] {
  margin: auto;
}
.lea-modale::backdrop {
  background: color-mix(in srgb, var(--wp--preset--color--contrast) 60%, transparent);
}
.lea-modale__cadre {
  display: block;
  width: 100%;
  height: 480px;
  border: 0;
}
/* Fermer : pastille ronde de 44 px posée sur le coin du formulaire. */
.lea-modale__fermer {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 2px solid var(--wp--preset--color--contrast);
  border-radius: 50%;
  background: var(--wp--preset--color--base);
  color: var(--wp--preset--color--contrast);
  font-size: 1.75rem;
  line-height: 1;
  cursor: pointer;
}
.lea-modale__fermer:hover,
.lea-modale__fermer:focus-visible {
  background: var(--wp--preset--color--secondary);
  border-color: var(--wp--preset--color--secondary);
}
@media (max-width: 480px) {
  .lea-modale__cadre {
    height: 540px;
  }
}
@media (prefers-reduced-motion: no-preference) {
  .lea-modale:popover-open {
    animation: lea-modale-ouvre 0.2s ease-out;
  }
}
@keyframes lea-modale-ouvre {
  from { opacity: 0; translate: 0 16px; }
  to   { opacity: 1; translate: 0 0; }
}
/* Navigateur sans popover : le bouton ne ferait rien. On le masque, et le
   formulaire s'affiche en place, dans le flux de l'avant-pied. */
@supports not selector(:popover-open) {
  .lea-newsletter__actions,
  .lea-modale__fermer {
    display: none;
  }
  .lea-modale {
    position: static;
  }
}