/*
 * Feuille de base du socle.
 *
 * Règle unique : AUCUNE valeur en dur. Tout vient du contrat de jetons
 * (theme.json), que WordPress expose en --wp--preset--* et --wp--custom--*.
 * Personnaliser un client = éditer SON theme.json, jamais ce fichier.
 *
 * ⚠️ Les slugs de jetons ne commencent jamais par un chiffre : WordPress
 * convertit « 2xl » en « 2-xl ». D'où l'échelle xxs → xxxl.
 *
 * Ce que cette feuille apporte n'est pas un STYLE, c'est une COMPOSITION :
 * hiérarchie, rythme, états, et dégradation propre quand une image ou un texte
 * manque. Le style, lui, vient des jetons du client.
 */

:root {
  /* Alias historiques — conservés pour ne rien casser, désormais dérivés. */
  --container-width: var(--wp--style--global--content-size, 1100px);
  --spacing: var(--wp--preset--spacing--sm);
  --color-text: var(--wp--preset--color--text);
  --color-bg: var(--wp--preset--color--base);
  --color-muted: var(--wp--preset--color--text-muted);
  --color-border: var(--wp--preset--color--border);
}

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

body {
  margin: 0;
  color: var(--wp--preset--color--text);
  background: var(--wp--preset--color--base);
  font-family: var(--wp--preset--font-family--body);
  font-size: var(--wp--preset--font-size--md);
  line-height: var(--wp--custom--line-height--normal);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--wp--preset--font-family--heading);
  line-height: var(--wp--custom--line-height--tight);
  margin: 0 0 var(--wp--preset--spacing--md);
  text-wrap: balance;
}

h1 { font-size: var(--wp--preset--font-size--xxxl); }
h2 { font-size: var(--wp--preset--font-size--xxl); }
h3 { font-size: var(--wp--preset--font-size--xl); }
h4 { font-size: var(--wp--preset--font-size--lg); }

p { margin: 0 0 var(--wp--preset--spacing--md); }
p:last-child { margin-bottom: 0; }

a {
  color: var(--wp--preset--color--accent);
  transition: color var(--wp--custom--transition);
}

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

/* ⚠️ Le focus clavier est VISIBLE partout, et il emprunte l'accent du client :
   il change donc avec l'identité, sans jamais disparaître. */
:focus-visible {
  outline: var(--wp--custom--border--width-thick) solid var(--wp--preset--color--accent);
  outline-offset: 3px;
  border-radius: var(--wp--custom--radius--sm);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---------------------------------------------------------------------------
 * MISE EN PAGE
 * ------------------------------------------------------------------------- */

/* ⚠️ La gouttière a un PLANCHER.
 *
 * Elle dérivait de l'échelle d'espacement du client : une identité compacte
 * produisait une gouttière minuscule, et le texte touchait presque le bord à
 * 1280 px. Mesuré à l'écran. Le jeton reste réglable, mais il ne peut plus
 * descendre sous un seuil lisible — un socle doit rendre certaines fautes
 * impossibles, pas seulement configurables. */
.container {
  width: min(
    100% - (2 * max(var(--wp--custom--gouttiere, 1.5rem), var(--wp--preset--spacing--sm))),
    var(--container-width)
  );
  margin: 0 auto;
}

/* Le rythme vertical est un JETON : c'est lui, plus que la couleur, qui trahit
   deux sites issus d'une même base. */
.section { padding-block: var(--wp--custom--rhythm--section); }

.section--surface { background: var(--wp--preset--color--surface); }
.section--surface-alt { background: var(--wp--preset--color--surface-alt); }

.section__titre { margin-bottom: var(--wp--custom--rhythm--block); }

.texte-mesure { max-width: var(--wp--custom--measure); }

/* L'intro est TENUE par une mesure, et un chapeau descend l'œil vers le corps.
   Sans ça, un paragraphe seul flotte dans une section large et la page paraît
   inachevée.

   ⚠️ Elle n'est PAS centrée de force : l'alignement appartient à l'identité.
   Centrer ici donnait un bloc au milieu pendant que tout le reste du site était
   aligné à gauche — mesuré à l'écran sur l'identité dense. */
.intro {
  max-width: var(--wp--custom--measure);
}

.intro .content-body > p:first-child {
  font-size: var(--wp--preset--font-size--lg);
  line-height: var(--wp--custom--line-height--snug);
  color: var(--wp--preset--color--text);
}

.intro .content-body > p:not(:first-child) {
  color: var(--wp--preset--color--text-muted);
}

.content-body > :first-child { margin-top: 0; }
.content-body > :last-child { margin-bottom: 0; }

/* Le sur-titre porte la hiérarchie sans voler la vedette au titre. */
.surtitre {
  font-size: var(--wp--preset--font-size--xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--wp--preset--color--accent);
  margin-bottom: var(--wp--preset--spacing--sm);
  font-weight: 700;
}

.surtitre--sur-accent {
  color: inherit;
  opacity: 0.78;
}

/* ---------------------------------------------------------------------------
 * EN-TÊTES — deux compositions, niveau 3 des variations.
 * ------------------------------------------------------------------------- */

.site-header { padding-block: var(--wp--preset--spacing--md); }

.site-title {
  color: inherit;
  text-decoration: none;
  font-family: var(--wp--preset--font-family--heading);
  font-weight: 700;
}

.site-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--wp--preset--spacing--md);
  list-style: none;
  padding: 0;
  margin: 0;
}

.site-nav a {
  color: inherit;
  text-decoration: none;
  padding-block: var(--wp--preset--spacing--xxs);
  border-bottom: var(--wp--custom--border--width-thick) solid transparent;
  transition: border-color var(--wp--custom--transition);
}

.site-nav a:hover,
.site-nav a:focus-visible {
  border-bottom-color: var(--wp--preset--color--accent);
}

.site-header--classique {
  border-bottom: var(--wp--custom--border--width) solid var(--wp--preset--color--border);
}

.site-header--classique .site-header__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--wp--preset--spacing--md);
}

.site-header--centre {
  padding-block: var(--wp--custom--rhythm--block);
  text-align: center;
}

.site-header--centre .site-header__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--wp--preset--spacing--md);
}

.site-title--grand {
  font-size: var(--wp--preset--font-size--xl);
  letter-spacing: 0.02em;
}

.site-header--centre .site-nav ul { justify-content: center; }

/* ---------------------------------------------------------------------------
 * HERO — deux compositions.
 * ------------------------------------------------------------------------- */

.hero__titre { margin-bottom: var(--wp--preset--spacing--md); }

.hero__accroche {
  font-size: var(--wp--preset--font-size--lg);
  color: var(--wp--preset--color--text-muted);
  max-width: var(--wp--custom--measure);
}

.hero__action { margin-top: var(--wp--preset--spacing--lg); }

/* Hero TEXTE : deux colonnes, l'image à droite. Sans image, une seule colonne. */
.hero--texte { padding-block: var(--wp--custom--rhythm--section); }

.hero__grille--avec-image {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--wp--preset--spacing--xl);
  align-items: center;
}

.hero__media img {
  width: 100%;
  border-radius: var(--wp--custom--radius--lg);
  box-shadow: var(--wp--custom--shadow--md);
}

/* Hero BANDEAU : pleine largeur sur l'accent, texte centré. */
.hero--bandeau {
  background-color: var(--wp--preset--color--accent);
  color: var(--wp--preset--color--on-accent);
  padding-block: var(--wp--custom--rhythm--section);
  text-align: center;
  background-size: cover;
  background-position: center;
  position: relative;
}

/* ⚠️ Avec une photo de fond, un voile garantit la lisibilité du texte QUELLE
   QUE SOIT l'image choisie par le client. La lisibilité ne se délègue pas. */
.hero--bandeau-image::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--wp--preset--color--accent);
  opacity: 0.82;
}

.hero--bandeau .hero__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--wp--preset--spacing--sm);
}

.hero--bandeau .hero__titre { color: inherit; margin: 0; }

.hero--bandeau .hero__accroche {
  color: inherit;
  opacity: 0.92;
  margin: 0;
}

/* ---------------------------------------------------------------------------
 * CARTES ET LISTE — les mêmes données, deux compositions.
 * ------------------------------------------------------------------------- */

.cartes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--wp--preset--spacing--lg);
}

.carte {
  display: flex;
  flex-direction: column;
  background: var(--wp--preset--color--base);
  border: var(--wp--custom--border--width) solid var(--wp--preset--color--border);
  border-radius: var(--wp--custom--radius--md);
  box-shadow: var(--wp--custom--shadow--sm);
  overflow: hidden;
  transition: box-shadow var(--wp--custom--transition), transform var(--wp--custom--transition);
}

.carte:hover,
.carte:focus-within {
  box-shadow: var(--wp--custom--shadow--lg);
  transform: translateY(-2px);
}

.carte__media img { width: 100%; }

.carte__corps {
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--sm);
  padding: var(--wp--preset--spacing--lg);
  flex: 1;
}

.carte__titre { font-size: var(--wp--preset--font-size--lg); margin: 0; }
.carte__titre a { text-decoration: none; color: inherit; }

.carte__texte { color: var(--wp--preset--color--text-muted); margin: 0; }

.carte__lien {
  margin-top: auto;
  font-size: var(--wp--preset--font-size--sm);
  font-weight: 700;
  color: var(--wp--preset--color--accent);
}

.liste-numerotee {
  list-style: none;
  counter-reset: rubrique;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--wp--preset--spacing--lg);
}

.liste-numerotee__item {
  counter-increment: rubrique;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--wp--preset--spacing--md);
  align-items: center;
  border-top: var(--wp--custom--border--width) solid var(--wp--preset--color--border);
  padding-top: var(--wp--preset--spacing--lg);
}

.liste-numerotee__corps { position: relative; padding-left: 3.5rem; }

.liste-numerotee__corps::before {
  content: counter(rubrique, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--wp--preset--font-family--heading);
  font-size: var(--wp--preset--font-size--xl);
  color: var(--wp--preset--color--accent);
  line-height: 1;
}

.liste-numerotee__titre {
  font-size: var(--wp--preset--font-size--lg);
  margin: 0 0 var(--wp--preset--spacing--xs);
}

.liste-numerotee__titre a { text-decoration: none; color: inherit; }
.liste-numerotee__texte { color: var(--wp--preset--color--text-muted); margin: 0; }

.liste-numerotee__media {
  width: 100%;
  border-radius: var(--wp--custom--radius--md);
}

/* ⚠️ États dégradés, vérifiés à l'écran le 2026-09-21.
 *
 * Une carte sans image ni résumé ne doit pas paraître cassée. Le corps garde un
 * minimum de hauteur pour que la grille reste régulière, et le lien reste collé
 * en bas — sans quoi les cartes d'une même rangée se décalent les unes des
 * autres dès qu'un contenu manque. */
.carte__corps { min-height: 7rem; }

/* ---------------------------------------------------------------------------
 * APPEL À L'ACTION ET BOUTONS
 * ------------------------------------------------------------------------- */

.appel { background: var(--wp--preset--color--accent-soft); }

.appel__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--wp--preset--spacing--lg);
}

.appel__texte {
  font-size: var(--wp--preset--font-size--lg);
  margin: 0;
  max-width: var(--wp--custom--measure);
}

.bouton {
  display: inline-block;
  background: var(--wp--preset--color--accent);
  color: var(--wp--preset--color--on-accent);
  text-decoration: none;
  font-family: var(--wp--preset--font-family--heading);
  font-size: var(--wp--preset--font-size--md);
  padding: var(--wp--preset--spacing--sm) var(--wp--preset--spacing--lg);
  border-radius: var(--wp--custom--radius--pill);
  transition: opacity var(--wp--custom--transition), transform var(--wp--custom--transition);
}

.bouton:hover,
.bouton:focus-visible {
  opacity: 0.9;
  transform: translateY(-1px);
}

.bouton--inverse {
  background: var(--wp--preset--color--on-accent);
  color: var(--wp--preset--color--accent);
}

/* ---------------------------------------------------------------------------
 * PIED DE PAGE — il structure le bas de page au lieu de le laisser tomber.
 * ------------------------------------------------------------------------- */

.site-footer {
  border-top: var(--wp--custom--border--width) solid var(--wp--preset--color--border);
  background: var(--wp--preset--color--surface);
  padding-block: var(--wp--custom--rhythm--section) var(--wp--preset--spacing--lg);
  margin-top: var(--wp--custom--rhythm--section);
  font-size: var(--wp--preset--font-size--sm);
}

.site-footer__colonnes {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--wp--preset--spacing--xl);
}

.site-footer__marque {
  font-family: var(--wp--preset--font-family--heading);
  font-size: var(--wp--preset--font-size--lg);
  margin-bottom: var(--wp--preset--spacing--xs);
}

.site-footer__baseline { color: var(--wp--preset--color--text-muted); }

.site-footer__titre {
  font-size: var(--wp--preset--font-size--xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--wp--preset--color--text-muted);
  margin-bottom: var(--wp--preset--spacing--sm);
  font-weight: 700;
}

.site-footer__liste {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--wp--preset--spacing--xs);
}

.site-footer__liste a,
.site-footer__coordonnees a {
  color: inherit;
  text-decoration: none;
}

.site-footer__liste a:hover,
.site-footer__liste a:focus-visible { text-decoration: underline; }

.site-footer__coordonnees { color: var(--wp--preset--color--text-muted); }

.site-footer__bas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--wp--preset--spacing--md);
  justify-content: space-between;
  margin-top: var(--wp--custom--rhythm--block);
  padding-top: var(--wp--preset--spacing--md);
  border-top: var(--wp--custom--border--width) solid var(--wp--preset--color--border);
  color: var(--wp--preset--color--text-muted);
}

.site-footer__bas p { margin: 0; }

/* ---------------------------------------------------------------------------
 * PROPORTIONS D'IMAGES — un jeton, pour la même raison que le rythme.
 * ------------------------------------------------------------------------- */

.media--hero { aspect-ratio: var(--wp--custom--ratio--hero); object-fit: cover; width: 100%; }
.media--card { aspect-ratio: var(--wp--custom--ratio--card); object-fit: cover; width: 100%; }
.media--portrait { aspect-ratio: var(--wp--custom--ratio--portrait); object-fit: cover; width: 100%; }

/* ---------------------------------------------------------------------------
 * FORMULAIRES — ils suivent les jetons, pas les styles du plugin.
 * ------------------------------------------------------------------------- */

.ff-el-form-control {
  width: 100%;
  padding: var(--wp--preset--spacing--sm);
  border: var(--wp--custom--border--width) solid var(--wp--preset--color--border);
  border-radius: var(--wp--custom--radius--sm);
  font-family: inherit;
  font-size: var(--wp--preset--font-size--md);
  background: var(--wp--preset--color--base);
  color: var(--wp--preset--color--text);
}

.ff-el-form-control:focus {
  border-color: var(--wp--preset--color--accent);
  outline: none;
}

.ff-btn-submit {
  background: var(--wp--preset--color--accent) !important;
  color: var(--wp--preset--color--on-accent) !important;
  border: 0 !important;
  border-radius: var(--wp--custom--radius--pill) !important;
  font-family: var(--wp--preset--font-family--heading) !important;
  padding: var(--wp--preset--spacing--sm) var(--wp--preset--spacing--lg) !important;
}

/* ---------------------------------------------------------------------------
 * AU-DELÀ DE 48rem — la composition passe en colonnes.
 * Mobile d'abord : tout ce qui précède est le rendu téléphone.
 * ------------------------------------------------------------------------- */

@media (min-width: 48rem) {
  .hero__grille--avec-image { grid-template-columns: 1.1fr 0.9fr; }

  .liste-numerotee__item { grid-template-columns: 1fr minmax(0, 14rem); }

  .site-footer__colonnes { grid-template-columns: 1.4fr 1fr 1fr; }
}