/*
Theme Name:   PG Child Theme
Description:  Thème enfant de GeneratePress pour Les Prénoms Gourmands. Porte les jetons de la direction artistique du dossier 05.
Author:       Clément Duhin
Template:     generatepress
Version:      0.3.0
Text Domain:  pg-child-theme
Requires PHP: 8.1
*/

/* ===========================================================================
   ÉTAT DU FICHIER — 8 septembre 2026

   Les jetons, l'échelle typographique et les garde-fous d'accessibilité sont
   posés (§2 à §6), les gabarits globaux aussi (§8 à §12), et les composants
   sont portés au fil des pages intégrées : fiche produit, barre d'ancres,
   cartes pastel, listes à coches, emplacements photo.

   ✅ Les deux arbitrages cliente du 05 §5.3 sont rendus le 03/09 :
     - punchlines → Fraunces italique              → --pg-font-punchline
     - capitales  → Display XL, prénoms, surtitres → §4

   🔴 Une décision reste ouverte : le H3 en display ou en texte bold (§4). Elle
      a été prise en regardant Caprasimo, la police de substitution de la
      maquette, pas TAN St. Canard. Jugeable depuis le 05/09, les fiches
      produit sont rendues. Trois lignes à changer, réversible à tout moment.

   ⚠️ Où ajouter du style : une section numérotée par domaine, et AUCUNE
      couleur ni taille en dur hors du §2. Les blocs génériques (.pg-deux-col,
      .pg-carte-pastel, .pg-section--plum) sont faits pour resservir sur les
      pages restantes plutôt que d'être recopiés.
   =========================================================================== */


/* ===========================================================================
   1. POLICES  —  dossier 05 §5.3

   ✅ DISPLAY REMPLACÉE LE 13/10 — Anton (Google Fonts, SIL OFL) prend la
      place de TAN St. Canard, à la demande de la cliente. Auto-hébergée comme
      les deux autres : WOFF2 sous-ensemblé au latin étendu, 20,6 ko. Les trois
      familles pèsent désormais 73 ko sur un budget de 90.
      Couverture française vérifiée : é è à ù ç œ Œ Ç « » ’ €, et l'euro
      d'Anton a été REGARDÉ rendu, pas seulement compté — il est lisible.
      La face de secours qui empruntait l'euro de Glacial Indifference
      (journal du 15/09) n'existait que pour TAN : elle est retirée.

   ⚠️ Anton est une linéale CONDENSÉE et bien plus noire que TAN St. Canard :
      même corps, les titres sont plus étroits et paraissent plus hauts. Les
      tailles du §2 n'ont PAS été retouchées — à juger au navigateur.

   ⛔ Ne jamais réintroduire d'appel à fonts.googleapis.com : le dossier 05
      impose l'auto-hébergement (RGPD — l'IP du visiteur partirait chez Google
      sans consentement) et le budget est de 90 ko pour l'ensemble.
   =========================================================================== */

@font-face {
  font-family: 'Anton';
  src: url('assets/fonts/anton-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Glacial Indifference';
  src: url('assets/fonts/glacial-indifference-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Glacial Indifference';
  src: url('assets/fonts/glacial-indifference-bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Instance statique wght=400, opsz=18 — l'axe de taille optique de Fraunces est
   calé sur la taille d'affichage réelle des punchlines (17→21 px), pas sur une
   taille de titrage. */
@font-face {
  font-family: 'Fraunces';
  src: url('assets/fonts/fraunces-italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}


/* ===========================================================================
   2. JETONS  —  source unique de vérité, recopiée du dossier 05 §5.2
   Aucune couleur en dur ailleurs dans le projet. Si une valeur doit changer,
   elle change ici et nulle part ailleurs.
   =========================================================================== */

:root {

  /* — Structure — */
  --pg-cream:        #FFFBF4;
  --pg-cream-deep:   #FFD3E0;  /* 15/10 « peps rose » — était #FBF3E7. Sections
                                  alternées, encarts, panneau mobile, fond des
                                  fiches. 13,4:1 avec l'encre. */
  --pg-ink:          #2E1B1E;
  --pg-ink-soft:     #6B5359;
  --pg-border:       #E8DACA;

  /* — Marque — */
  /* Les deux teintes ci-dessous sont relevées dans la CHARTE GRAPHIQUE LPG
     (p. 16, « LES 5 COULEURS PRINCIPALES »), qui donne le #HEX comme référence
     la plus précise. Elles n'étaient pas dans le dossier 05 §5.2, d'où leur
     ajout tardif. ⚠️ Le ROSE y est décrit comme une couleur d'identité, pas
     comme une encre : à 1,65:1 sur le crème, il ne passe aucun seuil de
     contraste en texte. Voir §4 avant de s'en servir pour un titre. */
  --pg-charte-rose:   #FCB3BC;  /* charte : « gourmandise, convivialité » */
  --pg-charte-beige:  #FCECBC;  /* charte : le fond de ses propres pages */
  --pg-charte-marron: #731823;  /* charte : « savoir-faire artisanal, chocolat » */
  --pg-plum:         #C2185B;  /* 15/10 framboise — était #8C2B41. Crème dessus :
                                  5,7:1 ; --pg-on-plum dessus : 4,8:1. */
  --pg-plum-dark:    #9C1349;  /* 15/10 — était #6E1F31. Survolé / pressé. */

  /* — Peps rose (15/10) — */
  --pg-rose-pop:     #EF5A8C;  /* rose vif — décor, traits, ombres, focus.
                                  3,3:1 sur le crème : graphique et gros texte
                                  SEULEMENT, jamais en texte courant. Texte
                                  posé DESSUS : l'encre brune uniquement. */
  --pg-rose-ombre:   #F49AB6;  /* ombre portée colorée des boutons */
  --pg-rose-pois:    rgba(194, 24, 91, .16);   /* motif à pois des sections rosées */
  --pg-rose-trait:   rgba(194, 24, 91, .14);   /* bordures rosées */
  --pg-rose-onglet:  rgba(194, 24, 91, .10);   /* fond de l'onglet actif, survol des pilules */
  --pg-pois-pas:     22px;     /* espacement du motif à pois */
  /* ↑ Jetons de la proposition A, CONSERVÉS pour y revenir sans rien
     réécrire. Ils ne sont plus employés depuis « pop franc » (§32). */

  /* — Pop franc (15/10) — */
  --pg-pop-rose:     #FF4F9A;  /* rose électrique. ⛔ JAMAIS de crème dessus
                                  (3,1:1) : toujours l'encre brune (5,2:1). */
  --pg-pop-jaune:    #FFD84D;  /* surlignage, badges, survols sur fond brun */
  --pg-pop-trait:    2px;      /* épaisseur des contours d'autocollant */
  --pg-pop-ombre:    5px;      /* décalage de l'ombre dure des cartes */
  --pg-pop-ombre-btn: 4px;     /* décalage de l'ombre dure des boutons */
  --pg-pop-incline:  -2deg;    /* inclinaison des surtitres et badges */
  --pg-carte-incline: 3deg;    /* cartes penchées, alternées ± — « marque de fabrique » (18/10), §33 */
  --pg-survol-levee:  10px;    /* une carte survolée monte de… */
  --pg-survol-zoom:   1.04;    /* …et grossit de 4 % */
  --pg-ressort:       cubic-bezier(.34, 1.56, .64, 1);  /* léger rebond en fin de course */
  --pg-caramel:      #C9762F; /* graphique et gros texte uniquement */
  --pg-caramel-text: #A2601F; /* variante accessible pour le texte courant */

  /* — Fonctionnelles — */
  --pg-green:        #2F7D4F;  /* icônes de validation, mentions « disponible » */

  /* — Textes sur fonds sombres — */
  --pg-on-plum:      #F6E4E4;  /* texte secondaire sur bordeaux */
  --pg-on-ink:       #E3CEC8;  /* texte courant du pied de page */
  --pg-on-ink-label: #C9A9A0;  /* libellés de colonne du pied de page */

  /* — Pastels de parcours — 15/10 « pop franc » (proposition B, validée) :
     couleurs franches, encre brune dessus ≥ 7:1. ⚠️ COPIÉS dans
     `pg_pastels_charte()` (inc/helpers.php) et theme.json : changer les trois.
     Origine → peps rose (A) → pop franc (B). */
  --pg-strawberry:   #FF9CC8;  /* #F9D2DC → #FFB3C8 → bonbon */
  --pg-apricot:      #FFB067;  /* #FCDCC0 → #FFC39A */
  --pg-vanilla:      #FFD84D;  /* #FBEEBC → #FFE173 */
  --pg-pistachio:    #7EDDA0;  /* #CFE7D6 → #A6E3BC */
  --pg-sky:          #7CC8F8;  /* #CBE2F0 → #A7D6F7 */
  --pg-lilac:        #B79CFF;  /* #D8CEEC → #C8B4F4 */

  /* — Bannière de l'accueil (18/10) — le rose uni de l'image de fond fournie
     par la cliente, relevé au pixel. Il remplit la bannière sans image et
     autour d'elle en mobile : changer l'image de fond, c'est revoir ce rose. */
  --pg-banniere-fond: #F38A9B;

  /* — Encre claire —
     Depuis le 15/09, le fond d'une carte se choisit au nuancier libre et non
     plus dans une liste de six pastels validés : rien ne garantit donc plus que
     l'encre courante y passe le contraste. `pg_style_carte()` compare, et pose
     ces quatre valeurs sur la carte quand le fond est trop sombre.
     ⚠️ --pg-encre-claire est RECOPIÉE dans `pg_encres_reference()` : le calcul
     de contraste est du PHP, il ne sait pas lire une variable CSS. Si elle
     change ici, elle change là aussi. */
  --pg-encre-claire:        #FFFBF4;
  --pg-encre-claire-soft:   #E3CEC8;
  --pg-encre-claire-accent: #F6E4E4;
  --pg-encre-claire-trait:  rgba(255, 251, 244, .28);

  /* — Familles —
     La display est réservée aux titres : jamais sous 19 px, jamais en bloc de
     texte, jamais dans un formulaire (05 §5.3).
     Glacial Indifference n'existe qu'en 400 et 700. Il n'y a pas de graisse
     intermédiaire : ne jamais écrire font-weight 500 ou 600, le navigateur
     synthétiserait un faux gras. */
  --pg-font-display: 'Anton', 'Impact', 'Arial Narrow', 'Segoe UI', system-ui, sans-serif;
  --pg-font-text:    'Glacial Indifference', 'Century Gothic', 'Avenir Next', system-ui, -apple-system, sans-serif;

  /* ✅ ARBITRÉ le 03/09 — la cliente valide l'écart à la charte.
     Troisième famille, réservée aux seules punchlines : la charte n'en prévoit
     que deux, mais le dossier 05 §5.1 jugeait le serif italique « très juste,
     c'est ce qui donne le côté personnage ». Fraunces est en SIL OFL, gratuite,
     et s'auto-héberge comme les deux autres — aucun appel à Google Fonts.
     ⚠️ Ne jamais l'employer ailleurs que sur .pg-punchline. */
  --pg-font-punchline: 'Fraunces', Georgia, 'Times New Roman', serif;

  /* — Échelle typographique — maquette validée (handoff §Typographie), fluide
     de 375 à 1200 px. Redessinée sur deux graisses : la hiérarchie repose sur
     la taille, l'interlignage et la casse, plus sur la graisse. */
  --pg-size-xl:       clamp(2.1250rem, 1.3864rem + 3.1515vw, 3.7500rem); /* Display XL — hero      34 → 60 */
  --pg-size-banniere: clamp(2.5000rem, 1.0000rem + 5.0000vw, 5.0000rem); /* Titre de la bannière   40 → 80 (18/10) */
  --pg-size-h1:       clamp(1.7500rem, 1.2955rem + 1.9394vw, 2.7500rem); /* H1 pages internes      28 → 44 */
  --pg-size-h2:       clamp(1.5000rem, 1.2159rem + 1.2121vw, 2.1250rem); /* H2 de section          24 → 34 */
  --pg-size-h2-bloc:  clamp(1.5000rem, 1.3295rem + 0.7273vw, 1.8750rem); /* H2 de bloc, gros prix  24 → 30 */
  --pg-size-h3:       clamp(1.2500rem, 1.1364rem + 0.4848vw, 1.5000rem); /* H3 de carte            20 → 24 */
  --pg-size-prenom:   clamp(1.1875rem, 1.1023rem + 0.3636vw, 1.3750rem); /* Prénom, prix de fiche  19 → 22 */
  --pg-size-surtitre: clamp(0.9375rem, 0.9091rem + 0.1212vw, 1.0000rem); /* Surtitre               15 → 16 */
  --pg-size-body-l:   clamp(1.0625rem, 1.0057rem + 0.2424vw, 1.1875rem); /* Corps L — chapeau      17 → 19 */
  --pg-size-body:     clamp(1.0000rem, 0.9716rem + 0.1212vw, 1.0625rem); /* Corps                  16 → 17 */
  --pg-size-small:    0.9375rem;                                         /* Corps S — fixe         15      */
  --pg-size-caption:  0.8125rem;                                         /* Libellé de tableau     13      */
  --pg-size-button:   1rem;                                              /* Bouton                 16      */
  --pg-size-punch:    clamp(1.0625rem, 0.9489rem + 0.4848vw, 1.3125rem); /* Punchline              17 → 21 */
  --pg-size-h2-carte: clamp(1.3750rem, 1.2614rem + 0.4848vw, 1.6250rem); /* H2 de carte de parcours 22 → 26 */
  --pg-size-edition:  clamp(1.1250rem, 1.0682rem + 0.2424vw, 1.3125rem); /* Nom d'édition de saison 18 → 21 */
  --pg-size-puce:     1.25rem;                                           /* Chiffre d'étape         20      */
  --pg-size-annot:    0.6875rem;                                         /* Annotation de cadrage   11      */
  --pg-size-etoile:   1.0625rem;                                         /* Étoile « Gratuit »      17      */
  --pg-etoile:        5.75rem;    /* diamètre de l'étoile « Gratuit » — 92 px */
  /* Même palier de l'échelle que le prénom (19 → 22). Un alias plutôt qu'une
     seconde valeur : deux jetons à tenir égaux finissent toujours par diverger. */
  --pg-size-fait:     var(--pg-size-prenom);                             /* Valeur de bandeau de faits    */

  /* — Rythme vertical — valeurs de la MAQUETTE, qui priment sur le 05 §5.12.
     Le dossier annonçait 64/112 ; la maquette validée est nettement plus serrée. */
  --pg-section-y:      3.5rem;  /* 56 px — sections courantes */
  --pg-section-y-home: 4rem;    /* 64 px — accueil            */
  --pg-section-y-band: 2.5rem;  /* 40 px — bandeaux           */

  /* — Gouttière de conteneur — 20 px mobile → 48 px desktop */
  --pg-gutter:        1.25rem;

  /* — Rayons — aucun angle vif dans ce design */
  --pg-radius-pill:   999px;  /* boutons, onglets, badges, champs, puces */
  --pg-radius-modal:  24px;   /* pop-up */
  --pg-radius-card:   20px;   /* cartes, blocs pleins, sections encadrées */
  --pg-radius-tile:   16px;   /* vignettes de galerie, encarts */
  --pg-radius-photo:  14px;   /* emplacements photo dans une carte */
  --pg-radius-field:  12px;   /* champs rectangulaires, accordéons */

  /* — Ombres — */
  /* ⚠️ --pg-shadow-card et --pg-shadow-hover ne sont plus appelés nulle part
     depuis le 15/09 : les neuf cartes calculent leur ombre à partir de leur
     propre fond (voir juste dessous et §15). Conservés parce qu'ils portent
     l'ombre douce de la maquette d'origine — c'est à eux qu'il faut revenir
     pour la retrouver, et il vaut mieux les relire que les redeviner. */
  --pg-shadow-card:   0 2px 12px rgba(46, 27, 30, .06);
  --pg-shadow-hover:  0 8px 28px rgba(46, 27, 30, .10);
  --pg-shadow-modal:  0 18px 60px rgba(46, 27, 30, .28);
  --pg-shadow-mascot: 0 8px 18px rgba(46, 27, 30, .16);

  /* — Ombre des cartes à fond choisi —
     🔑 GÉOMÉTRIE ET TEINTE SÉPARÉES, et c'est tout l'intérêt : la teinte n'est
     pas écrite, elle se CALCULE à partir du fond de chaque carte. Une carte rose
     porte une ombre franchement rose, une carte prune une ombre prune — y
     compris pour une couleur choisie au nuancier, que personne n'a pu prévoir
     ici. Les six valeurs ci-dessous sont les seuls réglages : les modifier
     suffit à retoucher l'ombre des neuf cartes d'un coup.

     ⛔ LE CALCUL SE FAIT EN OKLCH, PAS EN sRGB, et ce n'est pas un détail. Foncer
     une couleur en sRGB — ou la mélanger à l'encre brune — lui fait perdre sa
     saturation : toutes les ombres finissaient au même beige grisâtre, quelle que
     soit la carte. En oklch on agit séparément sur la clarté et sur le chroma, ce
     qui permet de foncer ET de saturer. C'est ce qui rend la couleur assumée
     plutôt que sale. */
  --pg-ombre-x:       3px;
  --pg-ombre-y:       4px;
  --pg-ombre-flou:    5px;
  --pg-ombre-clarte:  .52;  /* facteur de clarté : < 1 fonce. Multiplicatif, donc
                               un fond déjà sombre ne vire pas au noir plat. */
  --pg-ombre-chroma:  2.2;  /* facteur de saturation : > 1 avive. C'est LUI qui
                               fait la couleur assumée — à 1, l'ombre est terne. */
  --pg-ombre-alpha:   1;    /* opaque : une couleur, pas un voile. */

  /* Même ombre, portée plus loin, pour l'état survolé. */
  --pg-ombre-survol-x:    4px;
  --pg-ombre-survol-y:    9px;
  --pg-ombre-survol-flou: 16px;

  /* Repli des navigateurs sans couleur relative : une ombre plate, de la même
     géométrie. ⛔ Ne pas la supprimer — sans elle, ces navigateurs n'affichent
     AUCUNE ombre, la déclaration entière étant invalide chez eux. */
  --pg-ombre-repli:   rgba(46, 27, 30, .16);

  /* — Divers — */
  --pg-measure:       62ch;   /* 65 caractères maximum par ligne */
  --pg-target:        44px;   /* cible tactile — 54 px en mobile, voir §6 */
}

@media (min-width: 768px) {
  :root { --pg-gutter: 3rem; }
}


/* ===========================================================================
   3. BASE
   =========================================================================== */

/* 🔴 NE PAS RETIRER — sans cette règle, l'attribut hidden ne fait rien.
   La feuille du navigateur déclare [hidden] { display: none }, mais ce sélecteur
   d'attribut a la MÊME spécificité qu'une classe : la moindre règle du thème qui
   pose un display (.pg-modal { display: grid }, par exemple) la bat, simplement
   parce qu'elle arrive après. Le panneau reste alors affiché en permanence, et
   le JavaScript qui bascule hidden semble ne rien faire.
   C'est le piège classique de l'état piloté par hidden ; le !important est ici
   la bonne réponse, pas un raccourci. */
[hidden] { display: none !important; }

/* Défilement fluide sur les ancres — décidé le 08/09.
   ⚠️ Écart assumé au handoff, qui écrit « aucun défilement piloté ». L'écart
   est mince et le bénéfice réel : sans lui, un clic sur une ancre du pied de
   page ou de la barre de Nos gourmandises téléporte le visiteur, qui perd le
   fil de là où il était dans la page.
   Les visiteurs en « mouvement réduit » retombent sur un saut instantané —
   c'est le scroll-behavior: auto du garde-fou §6, qui ne servait à rien
   jusqu'ici faute de défilement fluide à neutraliser. */
html { scroll-behavior: smooth; }

body {
  font-family: var(--pg-font-text);
  font-size:   var(--pg-size-body);
  font-weight: 400;
  line-height: 1.65;
  color:       var(--pg-ink);
  background:  var(--pg-cream);
}

/* Largeur de ligne. Au-delà de 65 caractères, l'œil perd le début de la ligne
   suivante. Ne s'applique qu'au texte courant : les grilles et les bandeaux
   doivent pouvoir s'étendre. */
p, li { max-width: var(--pg-measure); }

/* Chapeaux : évite les lignes veuves d'un seul mot. */
.pg-body-l { text-wrap: pretty; }
/* Un mot à trait d'union qui passe à la ligne d'un bloc (« week-end ») — posé
   par pg_sans_coupure() sur les grands titres. */
.pg-insecable { white-space: nowrap; }


/* ===========================================================================
   4. TITRES  —  05 §5.3

   ✅ CAPITALES — COMPROMIS VALIDÉ PAR LA CLIENTE LE 03/09 (05 §5.3 point 3).
      La charte prescrivait le Titre 1 en majuscules. Au-delà de quatre mots
      elles deviennent illisibles, rédhibitoire sur un H1 en mobile. Le
      compromis retenu réserve les majuscules au Display XL, aux prénoms de
      créations et aux surtitres de section — rien d'autre.

   ⚠️ La maquette v2 contredit ce compromis en deux endroits, sur la page Notre
      concept : son H1 (« On ne choisit pas une gaufre… », neuf mots) et son H2
      « Voici Marguerite. » y sont en capitales. On suit l'arbitrage cliente,
      qui est une décision nommée, et pas un reste de mise en forme.
      Retour arrière si elle tranche autrement : text-transform: uppercase sur
      .pg-concept-hero-texte h1, et rien d'autre.
   =========================================================================== */

h1, h2 {
  font-family: var(--pg-font-display);
  font-weight: 400;      /* la display n'a qu'une graisse */
  color:       var(--pg-ink);
}

h1, .pg-h1 { font-size: var(--pg-size-h1); line-height: 1.1;  }
h2 { font-size: var(--pg-size-h2); line-height: 1.15; }

/* H2 dans le MARRON de la charte (#731823) — 10,8:1 sur le crème, très au-dessus
   du seuil. ⚠️ La règle est volontairement peu spécifique : les trois sections à
   fond sombre (.pg-emporter, .pg-section--plum, .pg-cloture--plum) repassent leur
   h2 en crème juste après, et il faut qu'elles continuent de l'emporter. */
h2 { color: var(--pg-charte-marron); }

/* H1 dans le ROSE de la charte (#FCB3BC), SANS OMBRE — demande du 15/10.

   🔴 DÉCISION ASSUMÉE CONTRE LE CONTRASTE. Le rose seul donne 1,65:1 sur le
   crème, sous le seuil de 3:1 du grand texte (WCAG 1.4.3). Jusqu'au 15/10, une
   ombre marron décalée redessinait chaque lettre et portait ce contraste
   (charte p. 15, où le rose n'apparaît jamais nu). Elle a été retirée à la
   demande, en connaissance de cause : le titre principal de chaque page est
   désormais peu lisible, et la recette accessibilité (étape 25) le relèvera.
   Retour arrière : `text-shadow: .05em .07em 0 var(--pg-charte-marron);` ici,
   ou passer le H1 en marron (10,8:1), la couleur du « Titre 1 » de la charte. */
h1, .pg-h1 { color: var(--pg-charte-rose); }

/* `.pg-h1` — l'apparence d'un H1 sur une autre balise, quand le H1 de la page
   est porté par un autre élément (Les brunchs : le surtitre, 13/10). */

/* H3 en display — ✅ ARBITRAGE CLOS LE 11/09, sur la vraie typographie.

   Décidé le 03/09, mais sur une maquette composée avec des polices de
   SUBSTITUTION (Caprasimo). L'arbitrage a donc été rouvert le 04/09, à revoir
   « sur une fiche produit rendue à côté d'un H2 » — condition remplie depuis le
   05/09. Réexaminé et **confirmé** : on reste en TAN St. Canard.
   ⚠️ La display est devenue Anton le 13/10 (§1). Le H3 la suit sans changement
      de CSS — mais l'arbitrage a été rendu sur TAN : à revoir au navigateur.

   ⚠️ Le dossier 05 §5.3 prescrivait Glacial Indifference Bold, au motif que
   trois niveaux en display seraient lourds. La maquette validée par la cliente
   met le H3 de carte en display (24 → 20 px), et c'est elle qui fait foi sur le
   rendu — elle est postérieure et validée.

   Retour arrière, si la cliente change d'avis : remplacer les deux lignes par
   font-family: var(--pg-font-text) et font-weight: 700. Reste réversible. */
h3 {
  font-family: var(--pg-font-display);
  font-size:   var(--pg-size-h3);
  font-weight: 400;
  line-height: 1.2;
}

/* Display XL — le seul titre en majuscules, réservé au hero. */
.pg-display-xl {
  font-family:    var(--pg-font-display);
  font-size:      var(--pg-size-xl);
  font-weight:    400;
  line-height:    1.05;
  text-transform: uppercase;
}

/* Prénom de produit — court par nature, les majuscules y restent lisibles. */
.pg-prenom {
  font-family:    var(--pg-font-display);
  font-size:      var(--pg-size-prenom);
  font-weight:    400;
  line-height:    1.2;
  text-transform: uppercase;
}

/* Sous-titre de section — reprend le rôle que jouait la graisse 500 disparue :
   capitales espacées en Bold, petite taille. C'est aussi ce que la charte
   prescrit pour ses sous-titres (p. 14). */
.pg-surtitre {
  margin:         0 0 12px;
  font-family:    var(--pg-font-text);
  font-size:      var(--pg-size-surtitre);
  font-weight:    700;
  line-height:    1.3;
  text-transform: uppercase;
  letter-spacing: .08em;
  color:          var(--pg-encre-accent, var(--pg-caramel-text)); /* #A2601F — ocre de la maquette */
}

/* Libellé de tableau et de liste de définition — interlettrage plus serré que
   le surtitre, et couleur d'encre douce. */
.pg-label {
  font-family:    var(--pg-font-text);
  font-size:      var(--pg-size-caption);
  font-weight:    700;
  line-height:    1;
  text-transform: uppercase;
  letter-spacing: .06em;
  color:          var(--pg-ink-soft);
}

/* ⏳ Punchline — la famille dépend de l'arbitrage en cours (voir --pg-font-punchline).
   La taille et l'interlignage, eux, sont arrêtés par la maquette.
   Le niveau « accroche de section » du dossier 05 §5.3 n'existe pas dans la
   maquette : la punchline absorbe ce rôle. Classe retirée volontairement. */
.pg-punchline {
  font-family: var(--pg-font-punchline);
  font-size:   var(--pg-size-punch);
  font-style:  italic;
  font-weight: 400;
  line-height: 1.45;
  color:       var(--pg-encre-accent, var(--pg-plum));
  max-width:   var(--pg-measure);
}

.pg-body-l  { font-size: var(--pg-size-body-l); line-height: 1.65; }
.pg-small   { font-size: var(--pg-size-small);  line-height: 1.55; }
.pg-caption { font-size: var(--pg-size-caption); font-weight: 700; line-height: 1.45; color: var(--pg-ink-soft); }


/* ===========================================================================
   5. SECTIONS  —  rythme vertical 05 §5.12
   =========================================================================== */

.pg-section        { padding-block: var(--pg-section-y); }
.pg-section--cream { background: var(--pg-cream-deep); }


/* ===========================================================================
   6. GARDE-FOUS D'ACCESSIBILITÉ  —  05 §5.10

   Ces règles ne sont pas décoratives. Elles évitent des défauts qui coûtent
   cher à rattraper une fois les 14 pages intégrées.
   =========================================================================== */

/* Focus visible au clavier. GeneratePress le masque par défaut sur certains
   éléments : sans ça, la navigation au clavier devient impossible à suivre. */
:where(a, button, input, select, textarea, summary):focus-visible {
  outline:        3px solid var(--pg-caramel); /* #C9762F — jamais l'anneau bleu par défaut */
  outline-offset: 2px;
  border-radius:  4px;
}

/* 16 px minimum dans les champs de formulaire : en dessous, iOS zoome
   automatiquement à la mise au point et casse la mise en page. */
input, select, textarea {
  font-family: var(--pg-font-text);
  font-size:   1rem;
}

/* La display n'entre jamais dans un formulaire (05 §5.3). */
input, select, textarea, label { font-family: var(--pg-font-text) !important; }

/* Respect du réglage système « réduire les animations ». */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    /* .01ms et non 0 : à zéro, les événements transitionend et animationend
       ne sont pas émis par tous les navigateurs, et tout JavaScript qui les
       attend resterait bloqué. .01ms est imperceptible mais émet bien. */
    animation-duration:  .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior:     auto !important;
  }

  /* 🔴 Ce bloc supprime la DURÉE, pas le DÉPLACEMENT. Sans les deux lignes
     qui suivent, une carte survolée sautait toujours de 4 px — simplement
     d'un coup au lieu d'être animée, ce qui est le contraire du but. On ne
     garde que le renforcement d'ombre : il signale le survol sans bouger
     quoi que ce soit. */
  .pg-fiche:hover,
  .pg-formule:hover,
  .pg-parcours:hover { transform: rotate(var(--pg-incline, 0deg)); }   /* garde son inclinaison (§33) au lieu de se redresser d'un coup */
}

/* Cible tactile — 54 px en mobile, 44 px à partir de la tablette.
   La maquette applique cette règle partout, y compris aux liens de navigation.

   🔴 `.pg-btn` N'Y FIGURAIT PAS, depuis le premier commit (04/09), et personne
   ne l'a vu avant le 29/09 : la règle visait `a.button` et `button`, classes
   de GeneratePress et du navigateur, jamais NOS boutons. `.pg-btn` a un
   remplissage vertical nul (§7) : sans hauteur minimale, chaque bouton du
   site mesurait ~20 px en mobile — sous le seuil de 24 px du WCAG 2.5.8, et
   loin des 54 px de la charte. Le tunnel l'avait corrigé chez lui seulement.
   ⛔ Ne pas redonner une hauteur à `.pg-btn` ailleurs : c'est ici qu'elle vit. */
a.button, button, summary, .wp-block-button__link, .pg-btn,
.pg-nav a, .pg-tabbar a { min-height: 54px; }

@media (min-width: 768px) {
  a.button, button, summary, .wp-block-button__link, .pg-btn,
  .pg-nav a, .pg-tabbar a { min-height: var(--pg-target); }
}


/* ===========================================================================
   7. BOUTONS  —  handoff « États d'interaction »

   Trois variantes seulement. Toutes en pilule, toutes à cible tactile conforme
   (54 px en mobile, 44 px ensuite — voir §6).
   =========================================================================== */

.pg-btn {
  display:          inline-flex;
  align-items:      center;
  justify-content:  center;
  gap:              8px;
  /* max-width + coupure : « Écrire à contact@lesprenomsgourmands.fr » ne
     tenait pas à 320 px et faisait défiler la page de côté (18/10). Le
     bouton passe alors sur deux lignes ; sa hauteur minimale vit au §6.
     OÙ couper est dit par `pg_libelle_contact()` (après « @ », jamais dans
     le numéro) : `anywhere` n'est qu'un dernier recours. */
  max-width:        100%;
  overflow-wrap:    anywhere;
  text-align:       center;
  padding:          0 28px;
  border:           2px solid transparent;
  border-radius:    var(--pg-radius-pill);
  font-family:      var(--pg-font-text);
  font-size:        var(--pg-size-button);
  font-weight:      700;
  line-height:      1.15;   /* 1 → 1,15 le 18/10 : un libellé coupé sur deux lignes restait collé ; la hauteur d'un bouton d'une ligne vient de sa hauteur minimale (§6), elle ne bouge pas */
  text-decoration:  none;
  cursor:           pointer;
  transition:       background-color .18s ease, color .18s ease, border-color .18s ease;
}

.pg-btn--primary {
  background: var(--pg-plum);
  color:      var(--pg-cream);
}
.pg-btn--primary:hover,
.pg-btn--primary:focus-visible { background: var(--pg-plum-dark); color: var(--pg-cream); }

/* Contour : le survol inverse le rapport fond/texte plutôt que d'assombrir la
   bordure — c'est ce que fait la maquette, et c'est nettement plus lisible. */
.pg-btn--outline {
  background:   transparent;
  color:        var(--pg-plum);
  border-color: var(--pg-plum);
}
.pg-btn--outline:hover,
.pg-btn--outline:focus-visible { background: var(--pg-plum); color: var(--pg-cream); }

.pg-btn--dark {
  background: var(--pg-ink);
  color:      var(--pg-cream);
}
.pg-btn--dark:hover,
.pg-btn--dark:focus-visible { background: #000; color: var(--pg-cream); }

.pg-btn--block { display: flex; width: 100%; }

.pg-icon { flex: none; }


/* ===========================================================================
   8. EN-TÊTE SUR DEUX NIVEAUX  —  handoff v2 « En-tête (global) »

   🔴 DEUX NIVEAUX, ET C'EST IMPOSÉ. Sept entrées plus le téléphone ne tiennent
   pas sur une rangée. Le handoff v2 l'écrit : « Ne pas revenir à un en-tête
   unique qui se replie sur deux lignes. » Ne pas remettre de flex-wrap ici.

   Point de bascule à 960 px. Calcul : logo 58 + nav 556 (six libellés en
   nowrap au plus petit corps, plus cinq gouttières de 10) + bouton 167 +
   gouttières 40 + marges de conteneur 96 ≈ 917 px. On bascule juste au-dessus.
   Entre 960 et 1400 px, gouttières, corps et paddings sont FLUIDES : c'est ce
   qui absorbe les largeurs intermédiaires sans jamais replier la nav.
   =========================================================================== */

/* — Bandeau utilitaire — desktop seulement, et volontairement NON collant :
     il défile, seul l'en-tête reste en haut. */
.pg-utility {
  display:       none;
  align-items:   center;
  gap:           10px;
  min-height:    38px;
  padding:       0 var(--pg-gutter);
  background:    var(--pg-cream-deep);
  border-bottom: 1px solid var(--pg-border);
  font-size:     0.875rem;   /* 14 px */
}
.pg-utility p { margin: 0; max-width: none; }

.pg-utility-emporter {
  display:     inline-flex;
  align-items: center;
  gap:         6px;
  font-weight: 700;
  color:       var(--pg-plum);
}
.pg-utility-sep  { color: #D9CBB8; }
.pg-utility-lieu { color: var(--pg-ink-soft); }

.pg-utility-phone {
  margin-left:     auto;
  font-weight:     700;
  color:           var(--pg-plum);
  text-decoration: none;
  white-space:     nowrap;
}
.pg-utility-phone:hover { text-decoration: underline; }

/* — En-tête —
   On cible .pg-header et non .site-header : le conteneur du parent n'existe
   plus, il partait avec generate_construct_header(). Voir inc/header.php. */
.pg-header {
  position:      sticky;
  top:           0;
  z-index:       100;
  background:    var(--pg-cream);
  border-bottom: 1px solid var(--pg-border);
}

.pg-header-inner {
  display:     flex;
  align-items: center;
  gap:         20px;
  padding:     10px var(--pg-gutter);
  /* ⛔ Pas de flex-wrap : voir l'avertissement en tête de section. */
}

.pg-logo { display: block; flex: none; }
.pg-logo img {
  display: block;
  height:  3rem;            /* 48 px, valeur mobile */
  width:   auto;
}

/* — Bloc desktop : nav à gauche, bouton à droite —
     min-width: 0 est indispensable. Sans lui, un enfant flex refuse de passer
     sous sa largeur de contenu et pousse le bouton hors de l'écran. */
.pg-header-desktop { display: none; }

.pg-nav a {
  display:         inline-flex;
  align-items:     center;
  min-height:      40px;
  color:           var(--pg-ink);
  text-decoration: none;
  white-space:     nowrap;
}
.pg-nav a:hover { color: var(--pg-plum); }

/* La page courante est signalée par un trait, pas seulement par la couleur :
   une différence de teinte seule ne passe pas le critère 1.4.1 du WCAG. */
.pg-nav a[aria-current="page"] {
  color:                     var(--pg-plum);
  text-decoration:           underline;
  text-underline-offset:     6px;
  text-decoration-thickness: 2px;
}

/* — En-tête mobile — */
.pg-header-mobile {
  display:     flex;
  align-items: center;
  gap:         10px;
  margin-left: auto;
}

.pg-round {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  width:           48px;
  height:          48px;
  border:          2px solid transparent;
  border-radius:   var(--pg-radius-pill);
  background:      transparent;
  cursor:          pointer;
  transition:      background-color .18s ease, color .18s ease;
}
.pg-round--outline { color: var(--pg-plum); border-color: var(--pg-plum); }
.pg-round--outline:hover { background: var(--pg-plum); color: var(--pg-cream); }
.pg-round--solid   { background: var(--pg-plum); color: var(--pg-cream); }
.pg-round--solid:hover { background: var(--pg-plum-dark); }

/* Le burger montre la croix une fois ouvert : sans ça, rien n'indique que le
   même bouton referme le panneau. */
.pg-burger-close { display: none; }
#pg-burger[aria-expanded="true"] .pg-burger-open  { display: none; }
#pg-burger[aria-expanded="true"] .pg-burger-close { display: inline-flex; }

/* — Panneau mobile — les sept pages — */
.pg-mobile-panel {
  display:       grid;
  gap:           4px;
  padding:       16px var(--pg-gutter) 24px;
  background:    var(--pg-cream-deep);
  border-bottom: 1px solid var(--pg-border);
}

.pg-pill {
  display:         flex;
  align-items:     center;
  min-height:      54px;
  padding:         0 18px;
  border-radius:   var(--pg-radius-pill);
  font-weight:     700;
  color:           var(--pg-ink);
  text-decoration: none;
}
.pg-pill:hover      { background: var(--pg-rose-onglet); }
.pg-pill.is-current { background: var(--pg-plum); color: var(--pg-cream); }

.pg-mobile-panel .pg-btn { margin-top: 12px; }

/* Le panneau ouvert fige le défilement de la page derrière lui. */
.pg-nav-open { overflow: hidden; }

@media (min-width: 960px) {
  .pg-utility        { display: flex; }
  .pg-header-mobile,
  .pg-mobile-panel   { display: none; }

  /* Interpolations calées sur 960 → 1400 px. */
  .pg-logo img       { height: clamp(3rem, 1.6364rem + 2.2727vw, 3.625rem); }   /* 48 → 58 */

  .pg-header-desktop {
    display:         flex;
    flex:            1;
    min-width:       0;
    align-items:     center;
    justify-content: space-between;
    gap:             20px;
  }

  .pg-nav {
    display:   flex;
    align-items: center;
    min-width: 0;
    gap:       clamp(0.625rem, -1.0114rem + 2.7273vw, 1.375rem);                /* 10 → 22 */
  }
  .pg-nav a { font-size: clamp(0.9375rem, 0.8011rem + 0.2273vw, 1rem); }        /* 15 → 16 */

  .pg-header-cta {
    flex:        none;
    min-height:  44px;
    padding:     0 clamp(1rem, -0.3636rem + 2.2727vw, 1.625rem);                /* 16 → 26 */
    font-size:   clamp(0.9375rem, 0.8011rem + 0.2273vw, 1rem);
    white-space: nowrap;
  }
}


/* ===========================================================================
   9. BARRE D'ONGLETS MOBILE  —  handoff « Barre d'onglets mobile (global) »

   Elle disparaît à partir de 1024 px, comme le burger : au-delà, la navigation
   complète est dans l'en-tête.
   =========================================================================== */

.pg-tabbar {
  position:      sticky;
  bottom:        0;
  z-index:       90;
  display:       grid;
  grid-template-columns: repeat(4, 1fr);
  gap:           4px;
  padding:       8px;
  background:    var(--pg-cream);
  border-top:    1px solid var(--pg-border);
}

.pg-tab {
  display:         flex;
  align-items:     center;
  justify-content: center;
  min-height:      54px;
  padding:         0 6px;
  border-radius:   var(--pg-radius-pill);
  font-size:       var(--pg-size-caption);   /* 13 px */
  font-weight:     700;
  line-height:     1.1;
  text-align:      center;
  color:           var(--pg-ink);
  text-decoration: none;
}
.pg-tab.is-current { color: var(--pg-plum); background: var(--pg-rose-onglet); }

.pg-tab--cta {
  background: var(--pg-plum);
  color:      var(--pg-cream);
}
.pg-tab--cta:hover { background: var(--pg-plum-dark); }

/* 🔴 Sans cette réserve, la barre recouvre la fin du contenu — typiquement le
   dernier bouton d'une page, celui qui compte le plus. */
body { padding-bottom: 70px; }

@media (min-width: 960px) {
  .pg-tabbar { display: none; }
  body       { padding-bottom: 0; }
}


/* ===========================================================================
   10. PIED DE PAGE  —  handoff « Pied de page (global) »
   =========================================================================== */

.site-footer {
  position:   relative;
  overflow:   hidden;      /* la mascotte déborde volontairement */
  background: var(--pg-ink);
  color:      var(--pg-cream);
}

.pg-footer-inner {
  position: relative;
  display:  grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap:      32px;
  padding:  48px var(--pg-gutter) 40px;
}

.pg-footer-name {
  margin:      0 0 12px;
  font-family: var(--pg-font-display);
  font-size:   1.25rem;    /* 20 px */
  font-weight: 400;
  color:       var(--pg-cream);
}

.pg-footer-text {
  margin:      0 0 6px;
  max-width:   none;       /* pas de mesure de lecture ici, ce sont des blocs courts */
  font-size:   0.9375rem;  /* 15 px */
  line-height: 1.7;
  color:       var(--pg-on-ink);
}
.pg-footer-text a { color: var(--pg-on-ink); text-decoration: none; }
.pg-footer-text a:hover { text-decoration: underline; }

.pg-footer-label {
  margin:         0 0 12px;
  font-size:      0.875rem;  /* 14 px */
  font-weight:    700;
  line-height:    1;
  text-transform: uppercase;
  letter-spacing: .08em;
  color:          var(--pg-on-ink-label);
}

.pg-footer-links {
  margin:     0;
  padding:    0;
  list-style: none;
}
.pg-footer-links li { margin: 0 0 8px; max-width: none; }
.pg-footer-links a,
.pg-linklike {
  font-size:       0.9375rem;  /* 15 px */
  color:           var(--pg-cream);
  text-decoration: none;
}
.pg-footer-links a:hover,
.pg-linklike:hover { text-decoration: underline; }
/* Fond seulement : la couleur de survol (jaune) est posée au §32. Sans cette
   ligne, `button:hover` de GeneratePress y ajoutait un pavé gris (18/10). */
.pg-linklike:hover,
.pg-linklike:focus,
.pg-linklike:active { background: none; }

/* Un bouton qui doit se lire comme un lien : il ouvre une boîte de dialogue,
   pas une page, donc c'est bien un <button> — mais rien ne doit le trahir. */
.pg-linklike {
  padding:     0;
  border:      0;
  background:  none;
  font-family: inherit;
  font-weight: inherit;
  /* 🔴 line-height compris — c'est le seul oubli qui trahissait le bouton. Un
     <button> garde le `line-height: normal` de l'agent utilisateur là où les
     <a> voisins héritent du 1.65 du corps : la ligne « Allergènes » était plus
     haute que les autres et cassait le rythme de la colonne. Constaté au
     navigateur le 08/09, invisible à la lecture du CSS. */
  line-height: inherit;
  cursor:      pointer;
}

.pg-footer-mascotte {
  position:       absolute;
  right:          -12px;
  bottom:         -24px;
  width:          140px;
  height:         auto;
  opacity:        .9;
  pointer-events: none;
  user-select:    none;
}

@media (min-width: 768px) {
  .pg-footer-mascotte { width: 190px; }
}


/* ===========================================================================
   11. BOÎTES DE DIALOGUE  —  handoff « Pop-up allergènes (global) »
   =========================================================================== */

.pg-modal {
  position:    fixed;
  inset:       0;
  z-index:     200;
  display:     grid;
  place-items: center;
  padding:     24px;
  background:  rgba(46, 27, 30, .55);
}

.pg-modal-panel {
  width:         100%;
  max-width:     860px;
  max-height:    82vh;
  overflow:      auto;
  padding:       28px;
  background:    var(--pg-cream);
  border-radius: var(--pg-radius-modal);
  box-shadow:    var(--pg-shadow-modal);
}

.pg-modal-head {
  display:       flex;
  align-items:   flex-start;
  gap:           16px;
  margin-bottom: 20px;
}
.pg-modal-head h2 { margin: 0 0 6px; font-size: var(--pg-size-h2-bloc); }
.pg-modal-head .pg-small { margin: 0; color: var(--pg-ink-soft); }

.pg-modal-mascotte { flex: none; width: 62px; height: auto; }

.pg-modal-close {
  flex:            none;
  margin-left:     auto;
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  width:           48px;
  height:          48px;
  border:          1px solid var(--pg-border);
  border-radius:   var(--pg-radius-pill);
  background:      var(--pg-cream-deep);
  color:           var(--pg-ink);
  cursor:          pointer;
}
.pg-modal-close:hover { background: var(--pg-border); }

.pg-modal-legende {
  margin:    16px 0 0;
  max-width: none;
  color:     var(--pg-ink-soft);
}

/* Le panneau ouvert fige le défilement derrière lui. */
.pg-modal-open { overflow: hidden; }


/* ===========================================================================
   12. TABLEAUX  —  handoff « Les suppléments » et tableau des allergènes
   =========================================================================== */

/* Un tableau large ne doit jamais élargir la page : il défile dans son propre
   conteneur. tabindex le rend atteignable au clavier, sans quoi son contenu
   serait inaccessible à qui n'a pas de souris. */
.pg-table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.pg-table {
  width:           100%;
  border-collapse: collapse;
  font-size:       var(--pg-size-small);
}
.pg-table th,
.pg-table td {
  padding:       10px 12px;
  border-bottom: 1px solid var(--pg-border);
  text-align:    center;
  white-space:   nowrap;
}
.pg-table thead th {
  border-bottom:  2px solid var(--pg-ink);
  font-size:      var(--pg-size-caption);
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color:          var(--pg-ink-soft);
}
.pg-table tbody th[scope="row"] {
  text-align:  left;
  font-weight: 700;
  white-space: normal;
}
.pg-table td { font-weight: 700; }
.pg-table .is-present { color: var(--pg-plum); }
.pg-table .is-absent  { color: var(--pg-border); }
.pg-table .is-unknown { color: var(--pg-ink-soft); }


/* ===========================================================================
   13. UTILITAIRES
   =========================================================================== */

/* Visible pour les lecteurs d'écran, invisible à l'œil. Sert aux légendes de
   tableau et à doubler les symboles ✔ / — / ? par un mot : « ✔ » seul n'est pas
   annoncé de façon fiable, et sur un tableau d'allergènes l'ambiguïté n'est pas
   acceptable. */
.pg-visually-hidden {
  position:    absolute;
  width:       1px;
  height:      1px;
  margin:      -1px;
  padding:     0;
  overflow:    hidden;
  clip-path:   inset(50%);
  white-space: nowrap;
  border:      0;
}


/* ===========================================================================
   14. MISE EN PAGE DES GABARITS

   GeneratePress contraint #page et #content. Nos sections doivent pouvoir
   toucher les bords — « À emporter » est un aplat brun de bord à bord — donc
   on libère les conteneurs du parent et chaque section gère sa largeur.
   =========================================================================== */

.pg-page #page,
.pg-page #content,
.pg-page .site-content,
.pg-page .content-area,
.pg-page .site-main {
  /* 🔴 display: block EST LA LIGNE QUI COMPTE. GeneratePress met #content en
     `display: flex; flex-direction: row` pour sa mise en page contenu/barre
     latérale. Sans cette remise à zéro, chaque <section> devient un élément
     flex et la page s'affiche en colonnes côte à côte — hero à gauche, ancres
     au milieu, sections empilées horizontalement. Le défaut est spectaculaire
     et la cause invisible : les autres propriétés étaient déjà neutralisées. */
  display:   block;
  max-width: none;
  width:     100%;
  margin:    0;
  padding:   0;
}

.pg-container {
  width:     100%;
  max-width: 1200px;
  margin:    0 auto;
  padding:   0 var(--pg-gutter);
}

.pg-section--cream { background: var(--pg-cream-deep); }
.pg-section--hero  { padding-block: var(--pg-section-y) 2rem; }

.pg-section h2 { margin: 0 0 8px; }
.pg-section > .pg-container > h2 + .pg-grid,
.pg-section > .pg-container > h2 + .pg-table { margin-top: 24px; }


/* ===========================================================================
   15. BADGES, GRILLES, ENCARTS
   =========================================================================== */

.pg-badge {
  display:       inline-flex;
  align-items:   center;
  gap:           6px;
  margin:        0 0 16px;
  max-width:     none;
  padding:       6px 14px;
  border-radius: var(--pg-radius-pill);
  font-size:     var(--pg-size-caption);
  font-weight:   700;
}
.pg-badge--apricot { background: var(--pg-apricot); color: var(--pg-ink); }
.pg-badge--vanilla { background: var(--pg-vanilla); color: var(--pg-ink); }

.pg-grid { display: grid; gap: 20px; }
.pg-grid--fiches   { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.pg-grid--heroines { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; }
.pg-grid--encarts  { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; }

.pg-encart {
  padding:       28px;
  border-radius: var(--pg-radius-card);
  border:        1px solid var(--pg-border);
}
.pg-encart--cream     { background: var(--pg-cream-deep); }
.pg-encart--pistachio { background: var(--pg-pistachio); }
.pg-encart h2 { margin: 0 0 10px; font-size: var(--pg-size-h2-bloc); }
.pg-encart p  { margin: 0 0 18px; }

/* Encre des cartes à fond choisi.
   🔑 Ces quatre variables n'ont PAS de valeur par défaut, et c'est le principe :
   tant que le fond reste clair, elles n'existent pas et chaque règle retombe sur
   le repli écrit dans son `var()`. Seules les cartes dont le fond est trop
   sombre les reçoivent, en style inline, depuis `pg_style_carte()`. Une carte
   pastel ne porte donc aucune déclaration de plus qu'avant le nuancier libre.
   ⛔ Ne pas les réécrire en `--pg-ink` / `--pg-ink-soft` : ces deux jetons
   servent AUSSI de fond (bouton sombre, bandeau à emporter) à l'intérieur même
   des cartes — les redéfinir localement retournerait ces aplats. */
.pg-fiche,
.pg-moment,
.pg-carte-pastel,
.pg-membre,
.pg-saison,
.pg-parcours,
.pg-formule,
.pg-volet,
.pg-brunch,
.pg-jour--dispo a {
  color: var(--pg-encre, var(--pg-ink));

  /* Ombre dont la couleur est calculée sur le fond de la carte.
     🔑 DEUX `box-shadow` DE SUITE, ET C'EST VOULU. La première est le repli :
     une ombre plate, que tout navigateur comprend. La seconde la remplace là où
     la syntaxe de couleur relative existe. Un navigateur qui l'ignore jette la
     déclaration entière et garde la première — ⛔ les inverser, ou n'en laisser
     qu'une, c'est priver d'ombre les navigateurs anciens sans que rien ne le
     signale ici.

     `oklch(from …)` lit le fond et le réécrit : même teinte (h), clarté abaissée,
     chroma augmenté. Comme le calcul part de `--pg-fond`, il suit aussi bien un
     pastel de la charte qu'une teinte choisie au nuancier. */
  box-shadow: var(--pg-ombre-x) var(--pg-ombre-y) var(--pg-ombre-flou)
              var(--pg-ombre-repli);
  box-shadow: var(--pg-ombre-x) var(--pg-ombre-y) var(--pg-ombre-flou)
              oklch(from var(--pg-fond)
                    calc(l * var(--pg-ombre-clarte))
                    calc(c * var(--pg-ombre-chroma))
                    h / var(--pg-ombre-alpha));
}


/* ===========================================================================
   16. FICHE PRODUIT  —  handoff « Composant : fiche produit »

   Le fond pastel arrive par --pg-fiche-fond, posé en style inline sur l'article :
   c'est la seule valeur qui varie d'une fiche à l'autre, et la calculer en PHP
   évite quatre classes modificatrices pour une seule propriété.
   =========================================================================== */

.pg-fiche {
  display:        flex;
  flex-direction: column;
  gap:            12px;
  padding:        18px;
  border:         1px solid var(--pg-border);
  border-radius:  var(--pg-radius-card);
  --pg-fond:      var(--pg-fiche-fond, var(--pg-cream-deep));
  background:     var(--pg-fond);
  transition:     box-shadow .2s ease, transform .2s ease;
}
/* Au survol, l'ombre s'écarte mais garde SA TEINTE : sans ça, la carte
   changerait de couleur d'ombre au passage de la souris, ce qui se voit. */
.pg-fiche:hover {
  box-shadow: var(--pg-ombre-survol-x) var(--pg-ombre-survol-y) var(--pg-ombre-survol-flou)
              var(--pg-ombre-repli);
  box-shadow: var(--pg-ombre-survol-x) var(--pg-ombre-survol-y) var(--pg-ombre-survol-flou)
              oklch(from var(--pg-fond)
                    calc(l * var(--pg-ombre-clarte))
                    calc(c * var(--pg-ombre-chroma))
                    h / var(--pg-ombre-alpha));
  transform: translateY(-4px);
}

.pg-fiche-photo {
  position:      relative;
  aspect-ratio:  1;
  border-radius: var(--pg-radius-photo);
  overflow:      hidden;
  /* Motif hachuré tant qu'aucune photo n'est déposée : une zone vide se lirait
     comme un défaut d'affichage, une hachure se lit comme un emplacement. */
  background: repeating-linear-gradient(135deg,
    rgba(255, 251, 244, .85) 0 10px,
    rgba(255, 251, 244, .50) 10px 20px);
}
.pg-fiche-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

.pg-fiche-badge {
  position:      absolute;
  top:           10px;
  left:          10px;
  /* ⚠️ Depuis que le badge est un champ LIBRE (15/09) et non plus une liste de
     deux libellés, rien ne borne sa longueur. La photo est en `overflow: hidden`
     et trancherait le texte en plein milieu, ce qui se lit comme un bogue :
     cette largeur maximale le fait revenir à la ligne dans la pastille. */
  max-width:     calc(100% - 20px);
  padding:       5px 12px;
  border-radius: var(--pg-radius-pill);
  background:    var(--pg-cream);
  font-size:     var(--pg-size-caption);
  font-weight:   700;
}

.pg-fiche-compo { margin: 0; font-size: var(--pg-size-small); color: var(--pg-encre-soft, var(--pg-ink-soft)); }
.pg-fiche .pg-punchline { margin: 0; }

.pg-fiche-pied {
  display:         flex;
  align-items:     baseline;
  justify-content: space-between;
  gap:             12px;
  margin-top:      auto;
  padding-top:     14px;
  border-top:      1px solid var(--pg-encre-trait, rgba(46, 27, 30, .18));
}
.pg-fiche-prix {
  font-family: var(--pg-font-display);
  font-size:   var(--pg-size-prenom);
}
/* Carte d'héroïne cliquable vers la liste de sa famille — le « lien étiré ».
   🔑 Le lien est sur le prénom ; son `::after` s'étend à toute la carte, qui
   devient sa boîte de référence. Les cartes n'ont plus de bouton Allergènes
   (20/10) ; tout contrôle qu'on y ajouterait devra être remonté au-dessus
   (`position: relative; z-index: 1`), sinon le recouvrement l'avalerait.
   ⛔ Ne pas remplacer par un <a> autour de la carte : un bouton dans un lien
   est du HTML invalide. Voir `pg_fiche_produit()`. */
.pg-fiche:has(.pg-fiche-lien) { position: relative; cursor: pointer; }
.pg-fiche-lien {
  color:           inherit;
  text-decoration: none;
}
.pg-fiche-lien::after {
  content:       "";
  position:      absolute;
  inset:         0;
  border-radius: inherit;
}
/* Le focus clavier entoure la carte entière, pas seulement le prénom : c'est
   toute la carte qui est la cible. */
.pg-fiche-lien:focus-visible { outline: none; }
.pg-fiche:has(.pg-fiche-lien:focus-visible) {
  outline:        3px solid var(--pg-plum);
  outline-offset: 3px;
}

.pg-grid--heroines .pg-fiche { padding: 28px; }
.pg-grid--heroines .pg-fiche-photo { aspect-ratio: auto; height: 200px; }
.pg-grid--heroines .pg-prenom { font-size: var(--pg-size-h2-bloc); }


/* ===========================================================================
   17. BARRE D'ANCRES  —  page Nos gourmandises
   =========================================================================== */

.pg-anchors {
  position:      sticky;
  /* Se cale sous l'en-tête collant. La hauteur ne peut pas être écrite en dur :
     le logo est fluide (48 → 58 px), donc l'en-tête fait 69 px à 960 et 79 px
     à 1400. pg.js mesure l'élément et pose --pg-header-h ; le repli couvre le
     temps de chargement du script. */
  top:           var(--pg-header-h, 70px);
  z-index:       80;
  background:    var(--pg-cream);
  border-top:    1px solid var(--pg-border);
  border-bottom: 1px solid var(--pg-border);
}
.pg-anchors-inner {
  display:    flex;
  gap:        8px;
  padding-block: 12px;
  overflow-x: auto;
  scrollbar-width: none;
}
.pg-anchors-inner::-webkit-scrollbar { display: none; }

.pg-anchor {
  display:         inline-flex;
  align-items:     center;
  flex:            none;
  min-height:      44px;
  padding:         0 18px;
  border-radius:   var(--pg-radius-pill);
  font-size:       var(--pg-size-small);
  font-weight:     700;
  color:           var(--pg-ink);
  text-decoration: none;
  white-space:     nowrap;
}
.pg-anchor:hover      { background: var(--pg-cream-deep); }
.pg-anchor.is-current { background: var(--pg-ink); color: var(--pg-cream); }

/* Sans cette réserve, une ancre place le titre de section SOUS l'en-tête et la
   barre collants — on atterrit au milieu de la section précédente. */
[id="sucrees"], [id="salees"], [id="milkshakes"],
[id="boissons-chaudes"], [id="a-emporter"] {
  scroll-margin-top: calc(var(--pg-header-h, 70px) + 78px);
}


/* ===========================================================================
   18. SECTION À EMPORTER  —  aplat brun de bord à bord
   =========================================================================== */

.pg-emporter {
  position:   relative;
  overflow:   hidden;
  background: var(--pg-ink);
  color:      var(--pg-cream);
}
.pg-emporter-inner {
  position: relative;
  display:  grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap:      40px;
}
.pg-emporter h2 { color: var(--pg-cream); }
.pg-emporter-texte { color: var(--pg-on-ink); margin: 0 0 24px; }
.pg-emporter-conditions {
  margin:    16px 0 0;
  max-width: none;
  font-size: var(--pg-size-small);
  color:     var(--pg-on-ink-label);
}

.pg-btn--cream { background: var(--pg-cream); color: var(--pg-ink); }
.pg-btn--cream:hover { background: var(--pg-cream-deep); color: var(--pg-ink); }

.pg-etapes {
  display:        grid;
  gap:            20px;
  margin:         0;
  padding:        0;
  list-style:     none;
  align-content:  start;
}
.pg-etapes li {
  display:   flex;
  gap:       16px;
  max-width: none;
}
/* ⚠️ La couleur claire est propre à l'aplat brun « À emporter », pas au
   composant. Laissée sur .pg-etapes li, elle rendait les étapes de la page
   Ateliers illisibles sur crème. */
.pg-emporter .pg-etapes li { color: var(--pg-on-ink); }
.pg-etape-num {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  flex:            none;
  width:           40px;
  height:          40px;
  border-radius:   var(--pg-radius-pill);
  background:      var(--pg-plum);
  color:           var(--pg-cream);
  font-family:     var(--pg-font-display);
  font-size:       var(--pg-size-h3);
}

.pg-emporter-mascotte {
  position:       absolute;
  right:          -16px;
  bottom:         -30px;
  width:          150px;
  height:         auto;
  pointer-events: none;
}

.pg-table--supplements { max-width: 620px; }
.pg-table--supplements caption {
  margin-bottom: 12px;
  font-size:     var(--pg-size-small);
  color:         var(--pg-ink-soft);
  text-align:    left;
}
.pg-table--supplements td { text-align: right; }


/* ===========================================================================
   19. ACCUEIL
   =========================================================================== */

/* L'accueil respire un peu plus que les autres pages : 64 px contre 56. */
.pg-section--home { padding-block: var(--pg-section-y-home); }

/* — Bannière (18/10, demande cliente) —
     Le texte se pose sur une image de fond administrable ; Marguerite quitte
     le cadre photo pour se percher au bout du titre. L'image fournie est un
     rose uni avec ses décors EN BAS à gauche et à droite : tout le placement
     ci-dessous en dépend.
     · Mobile : l'image n'est PAS rognée (un `cover` sur un écran haut et
       étroit ne garderait que le centre, c'est-à-dire du rose). Elle est posée
       entière en bas, et le padding bas lui réserve la place de ses décors.
     · Desktop : `cover` calé en bas, le haut de l'image peut disparaître.
     ⚠️ Titre crème sur ce rose : 2,3:1, sous le seuil de 3:1 du grand texte.
     C'est le rendu de la maquette cliente ; le chapeau, lui, reste en encre
     brune (7:1). */
.pg-banniere {
  position:         relative;
  overflow:         hidden;
  background-color: var(--pg-banniere-fond);
  /* Haut : Marguerite assise dépasse de 1,9 em du titre au-dessus de sa
     PREMIÈRE ligne, et la bannière rogne (overflow: hidden). Le padding suit
     donc la taille du titre. Bas (mobile) : 62 % de la hauteur de l'image,
     la place de ses décors. */
  padding-block:    calc(var(--pg-size-banniere) * 1.9 + 1rem) calc(56.25vw * .62);
}
.pg-banniere-fond {
  position:       absolute;
  left:           0;
  bottom:         0;
  width:          100%;
  height:         auto;
  pointer-events: none;
}
.pg-banniere-contenu { position: relative; }   /* passe au-dessus de l'image */

.pg-hero-texte  { position: relative; max-width: 46rem; }
/* padding-right .9 em : Marguerite déborde de .87 em à droite du dernier
   caractère de la 1re ligne. Sans cette réserve, une ligne qui va jusqu'au
   bord la ferait sortir de l'écran (la bannière la rognerait). */
.pg-hero-texte h1 { margin: 0 0 16px; padding-right: .9em; font-size: var(--pg-size-banniere); color: var(--pg-cream); }
.pg-hero-texte .pg-body-l { margin: 0 0 28px; color: var(--pg-ink); }

@media (min-width: 960px) {
  .pg-banniere {
    display:       flex;
    align-items:   center;
    min-height:    clamp(32rem, 70vh, 42rem);
    padding-bottom: 7rem;   /* les boutons restent au-dessus de la tasse */
  }
  .pg-banniere-fond { top: 0; height: 100%; object-fit: cover; object-position: center bottom; }
  /* 80 % : « POUR CRÉER ET PARTAGER » fait 746 px en Anton 80 px, il doit
     tenir sur une ligne (contrôlé au navigateur le 18/10). Les verres de
     l'image commencent à 70 % de la largeur d'écran, le bloc s'arrête avant. */
  .pg-hero-texte { width: fit-content; max-width: min(62rem, 80%); }
}

/* — Marguerite assise au bout de la 1re ligne du titre (18/10) —
     Tout est en `em` du titre : elle suit sa taille à toutes les largeurs.
     Repères mesurés sur l'image : l'assise est à 80 % de sa hauteur, le bord
     gauche des bottes à 50 % de sa largeur. Hauteur de capitale d'Anton :
     0,86 em (mesurée au navigateur).
     · width 1,74 em → hauteur 2,36 em, soit 2,74 capitales, comme la maquette ;
     · left −0,87 em → les bottes tombent devant la dernière lettre ;
     · bottom 0,39 em → l'assise (0,47 em au-dessus du bas) se pose sur le haut
       des capitales (0,86 em au-dessus de la ligne de base).
     ⛔ Changer d'image impose de remesurer ces trois valeurs.
     Le placement au bout de la 1re ligne affichée est fait par `pg.js`, à
     toutes les largeurs — la Marguerite debout du mobile a été retirée le
     18/10, une seule mascotte suffit. */
.pg-hero-assise {
  display:        inline-block;
  position:       relative;
  width:          0;
  height:         0;
  pointer-events: none;
}
.pg-hero-assise img {
  position:   absolute;
  left:       -.87em;
  bottom:     .39em;
  width:      1.74em;
  max-width:  none;
  height:     auto;
  filter:     drop-shadow(var(--pg-shadow-mascot));
}
/* Invisible le temps que `pg.js` la place (après le chargement d'Anton),
   sans quoi on la verrait sauter du bout du titre au bout de la 1re ligne.
   🔴 Le repli à 1,5 s la montre même si le script échoue : ⛔ ne jamais
   laisser un `opacity: 0` sans sortie (voir pg_js_flag()). Le garde-fou
   de mouvement réduit (§6) écrase la durée, pas le délai : il tient. */
@keyframes pg-assise-repli { to { opacity: 1; } }
.pg-js .pg-hero-assise:not(.is-placee) img {
  opacity:   0;
  animation: pg-assise-repli 0s 1.5s forwards;
}

.pg-boutons { display: flex; flex-wrap: wrap; gap: 12px; }

/* — Emplacement photo — */
.pg-photo {
  display:         grid;
  place-items:     center;
  border-radius:   var(--pg-radius-photo);
  background: repeating-linear-gradient(135deg,
    rgba(255, 251, 244, .85) 0 10px,
    rgba(255, 251, 244, .50) 10px 20px);
  background-color: var(--pg-cream-deep);
}
/* Emplacement rempli par une vraie photo — ajouté le 08/09 avec les champs
   image. On retire le motif hachuré : sur un PNG transparent, il se verrait à
   travers l'image. */
.pg-photo--pleine {
  background:  none;
  overflow:    hidden;
  padding:     0;
}

/* ⚠️ `> img` ET NON `img` — la leçon des deux pièges de spécificité de la
   journée. Aucune mascotte n'est enfant direct d'un .pg-photo aujourd'hui,
   mais le jour où l'une le devient, cette règle ne l'écrasera pas. */
.pg-photo > img {
  width:         100%;
  height:        100%;
  object-fit:    cover;
  display:       block;
  border-radius: inherit;
}

.pg-photo span {
  padding:     8px;
  font-family: ui-monospace, Menlo, monospace;
  font-size:   var(--pg-size-annot);
  text-align:  center;
  color:       var(--pg-ink-soft);
}
.pg-photo--180 { height: 180px; }

/* — Bandeau de réassurance — */
.pg-reassurance {
  background:    var(--pg-cream-deep);
  border-block:  1px solid var(--pg-border);
  padding-block: 18px;
}
.pg-reassurance ul {
  display:   flex;
  flex-wrap: wrap;
  /* 12 px et pas plus : les sept éléments font ~1 020 px pour 1 104 px de
     colonne. Au-delà de 13 px, « Ateliers » repasse seul à la ligne. Un
     élément ajouté ou un libellé allongé refera passer à la ligne. */
  gap:       12px;
  /* margin-BLOCK, pas margin : ce sélecteur pèse plus lourd que .pg-container
     et un `margin: 0` écrasait son `margin: 0 auto` — le bandeau partait
     collé à gauche de l'écran au lieu d'être centré. */
  margin-block: 0;
  padding-inline: var(--pg-gutter);
  list-style: none;
  font-size:  var(--pg-size-surtitre);
  font-weight: 700;
}
.pg-reassurance li {
  display:     flex;
  align-items: center;
  gap:         8px;
  max-width:   none;
}
.pg-reassurance li::before {
  content:       '';
  flex:          none;
  width:         8px;
  height:        8px;
  border-radius: var(--pg-radius-pill);
  background:    var(--pg-caramel);
}
/* Centré en desktop, aligné à gauche en mobile — le handoff insiste, et pour
   cause : centré sur un écran étroit, un item isolé sur sa ligne flotte. */
@media (min-width: 768px) {
  .pg-reassurance ul { justify-content: center; }
}

/* — Deux piliers — */
.pg-grid--piliers { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; }

/* 🔑 SUBGRID — les deux cartes partagent les mêmes cinq rangées : photo, badge,
   titre, texte, bouton. Le badge n'existe que sur la première (et seulement
   s'il est rempli) : dans l'autre, sa rangée reste vide mais garde la hauteur
   commune, et les titres tombent à la même hauteur. Les boutons aussi.
   ⚠️ Les rangées sont placées par élément, pas dans l'ordre du HTML : sans
      ça, le titre de la carte sans badge remonterait dans la rangée du badge.
   ⚠️ Écart vertical en margin-top, pas en `gap` : un gap entourerait aussi la
      rangée vide, et la carte sans badge prendrait 14 px de trop en mobile. */
.pg-pilier {
  display:            grid;
  grid-row:           span 5;
  grid-template-rows: subgrid;
  row-gap:            0;
  padding:            28px;
  border:             1px solid var(--pg-border);
  border-radius:      var(--pg-radius-card);
  background:         var(--pg-pilier-fond, var(--pg-cream-deep));
}
.pg-pilier > .pg-photo { grid-row: 1; }
.pg-pilier > .pg-badge { grid-row: 2; justify-self: start; margin: 14px 0 0; } /* l'emporte sur .pg-badge--cream */
.pg-pilier > h2        { grid-row: 3; }
.pg-pilier > p         { grid-row: 4; }
.pg-pilier > .pg-btn   { grid-row: 5; justify-self: start; align-self: end; }
.pg-pilier > *              { margin: 14px 0 0; }
.pg-pilier > .pg-photo      { margin: 0; }
.pg-badge--cream { background: var(--pg-cream); color: var(--pg-ink); margin: 0; }

/* — Aperçu et liens de suite — */
.pg-lien-suite {
  margin:    24px 0 0;
  max-width: none;
}
.pg-lien-suite a,
a.pg-lien-suite {
  display:         inline-flex;
  align-items:     center;
  gap:             8px;
  font-weight:     700;
  color:           var(--pg-plum);
  text-decoration: none;
}
.pg-lien-suite a:hover,
a.pg-lien-suite:hover { text-decoration: underline; }

/* — Les moments — « éventail d'autocollants » (18/10, demande cliente)
     Cartes penchées une sur deux, contour brun et ombre dure. Sans numéro
     (retiré le 18/10 : un ordre qui n'a pas de sens ici) ;
     au survol, la carte se redresse, monte et passe devant ses voisines.
     Règles tenues :
     · L'inclinaison est STATIQUE et vit dans `transform` ; l'apparition du §23
       anime `translate`. Les deux se composent, ⛔ ne pas fusionner.
     · Le survol est réservé aux pointeurs qui survolent (`hover: hover`) : sur
       écran tactile, un :hover reste collé après le toucher.
     · En mouvement réduit, aucun déplacement : la carte reste penchée et seule
       son ombre change.
     · ⛔ Pas de carrousel en mobile — le handoff l'interdit. Les cartes
       s'empilent. */
.pg-grid--moments {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap:        28px;
  margin-top: 32px;
}
.pg-moment {
  --pg-incline:   calc(var(--pg-carte-incline) * -.5);   /* mobile : moitié moins */
  position:       relative;
  display:        flex;
  flex-direction: column;
  gap:            10px;
  padding:        24px;
  border-radius:  var(--pg-radius-card);
  border:         var(--pg-pop-trait) solid var(--pg-ink);
  --pg-fond:      var(--pg-moment-fond, var(--pg-cream-deep));
  background:     var(--pg-fond);
  box-shadow:     var(--pg-ombre-x) var(--pg-ombre-y) 0 var(--pg-ink);
  transform:      rotate(var(--pg-incline));
  --pg-survol-duree:  .28s;              /* relues par l'apparition (§23) */
  --pg-survol-courbe: var(--pg-ressort);
  transition:     transform var(--pg-survol-duree) var(--pg-survol-courbe), box-shadow .2s ease;
}
.pg-moment:nth-child(even) { --pg-incline: calc(var(--pg-carte-incline) * .5); }

.pg-moment h3 { margin: 0; font-size: var(--pg-size-h2-carte); }
.pg-moment p  { margin: 0; }
.pg-moment .pg-lien-suite { margin-top: auto; padding-top: 8px; }

/* Photo détourée : elle déborde du coin bas droit, comme un autocollant
   posé de travers. Le padding bas lui réserve sa place sous le texte. */
.pg-moment--photo { padding-bottom: 7rem; }
.pg-moment-photo {
  position:       absolute;
  right:          12px;    /* pas plus loin : au-delà, la carte voisine la recouvre */
  bottom:         -18px;
  width:          clamp(7.5rem, 30%, 10rem);
  height:         auto;
  transform:      rotate(6deg);
  transition:     transform .28s var(--pg-ressort);
  filter:         drop-shadow(var(--pg-shadow-mascot));
  pointer-events: none;
}

/* Deux par rangée en tablette, puis toutes sur une ligne : entre les deux,
   l'auto-fit laissait une quatrième carte seule sur sa rangée. */
@media (min-width: 640px) {
  .pg-grid--moments { grid-template-columns: repeat(2, 1fr); }
  .pg-moment { min-height: 19rem; --pg-incline: calc(var(--pg-carte-incline) * -1); }
  .pg-moment:nth-child(even) { --pg-incline: var(--pg-carte-incline); margin-top: 2rem; }
  .pg-moment--photo { padding-bottom: 8.5rem; }
}
/* Gouttière serrée : ce sont les coins penchés qui se frôlent et font
   l'éventail. ⛔ Pas de marge négative, une carte survolée masquerait le
   titre de sa voisine. */
@media (min-width: 1100px) {
  .pg-grid--moments { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
}

/* Survol et clavier : même effet. `:focus-within` parce que c'est le lien de
   la carte qui reçoit le focus, pas la carte. */
.pg-moment:hover,
.pg-moment:focus-within {
  z-index:    2;
  box-shadow: var(--pg-ombre-survol-x) var(--pg-ombre-survol-y) 0 var(--pg-ink);
}
@media (prefers-reduced-motion: no-preference) {
  .pg-moment:focus-within {
    transform: rotate(0deg) translateY(calc(var(--pg-survol-levee) * -1)) scale(var(--pg-survol-zoom));
  }
  .pg-moment:focus-within .pg-moment-photo { transform: rotate(-4deg) translate(6px, -8px) scale(1.08); }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .pg-moment:hover {
    transform: rotate(0deg) translateY(calc(var(--pg-survol-levee) * -1)) scale(var(--pg-survol-zoom));
  }
  .pg-moment:hover .pg-moment-photo { transform: rotate(-4deg) translate(6px, -8px) scale(1.08); }
}

/* — Bloc « Tout compris » — */
.pg-tout-compris {
  position:      relative;
  overflow:      hidden;
  margin-top:    32px;
  padding:       36px;
  border-radius: var(--pg-radius-card);
  background:    var(--pg-plum);
  color:         var(--pg-cream);
}
.pg-tout-compris h2 {
  margin:      0 0 24px;
  max-width:   none;
  font-size:   var(--pg-size-h2-bloc);
  color:       var(--pg-cream);
}
.pg-tout-compris-mascotte {
  position:       absolute;
  right:          -20px;
  bottom:         -30px;
  width:          150px;
  height:         auto;
  pointer-events: none;
}
/* Réassurances agrandies (demande du 15/10) — l'icône suit la taille du texte. */
.pg-tout-compris .pg-liste-check li {
  align-items: center;
  font-size:   var(--pg-size-prenom);
  font-weight: 700;
}
.pg-tout-compris .pg-liste-check svg { width: 1.2em; height: 1.2em; margin-top: 0; }

.pg-liste-check {
  display:    grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap:        12px 24px;
  margin:     0;
  padding:    0;
  list-style: none;
}
.pg-liste-check li {
  display:   flex;
  gap:       10px;
  max-width: none;
}
.pg-liste-check svg { flex: none; color: var(--pg-check, var(--pg-green)); margin-top: 2px; }

/* — Le lieu — */
.pg-lieu {
  display:     grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap:         40px;
  align-items: center;
}
.pg-mosaique {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows:        120px;
  gap:                   12px;
}
.pg-tuile          { border-radius: var(--pg-radius-tile); }
.pg-tuile--grande  { grid-column: span 2; grid-row: span 2; }
.pg-tuile--large   { grid-column: span 3; }

/* — Newsletter — */
.pg-newsletter {
  position:      relative;
  overflow:      hidden;
  display:       grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap:           32px;
  padding:       36px;
  border-radius: var(--pg-radius-card);
  background:    var(--pg-pistachio);
}
.pg-newsletter h2 { margin: 0 0 10px; font-size: var(--pg-size-h2-bloc); }
.pg-newsletter p  { margin: 0; }

.pg-form { display: grid; gap: 16px; align-content: start; }
.pg-form input[type="email"] {
  height:        52px;
  padding:       0 16px;
  border:        1.5px solid var(--pg-border);
  border-radius: var(--pg-radius-field);
  background:    #FFF;
}
.pg-check {
  display:   flex;
  gap:       10px;
  font-size: var(--pg-size-small);
  cursor:    pointer;
}
.pg-check input {
  flex:         none;
  width:        18px;
  height:       18px;
  margin-top:   2px;
  accent-color: var(--pg-plum);
}
.pg-form .pg-btn { justify-self: start; }

.pg-newsletter-mascotte {
  position:       absolute;
  left:           50%;
  bottom:         -40px;
  translate:      -50% 0;
  width:          160px;
  height:         auto;
  opacity:        .35;
  pointer-events: none;
  z-index:        0;
}
.pg-newsletter > * { position: relative; z-index: 1; }


/* ===========================================================================
   20. PAGE NOTRE CONCEPT  —  handoff v2 « 2. Notre concept »

   Trois blocs sont pensés pour resservir sur les pages E4 à E7 :
   .pg-deux-col (texte + média), .pg-carte-pastel (grille de cartes colorées)
   et .pg-section--plum (aplat bordeaux de bord à bord). Les nommer
   génériquement évite de recopier la même mise en page cinq fois.
   =========================================================================== */

/* — Variantes de section — */
.pg-section--bordered { border-block: 1px solid var(--pg-border); }

/* Aplat bordeaux de bord à bord — pendant de .pg-emporter, qui est brun. */
.pg-section--plum {
  position:   relative;
  overflow:   hidden;
  background: var(--pg-plum);
  color:      var(--pg-cream);
}
.pg-section--plum h2 { color: var(--pg-cream); }

/* Titre volontairement bridé à 26 ch : le handoff le demande sur « Pourquoi les
   prénoms », pour que la phrase casse en trois lignes et fasse bloc. */
.pg-titre-court { max-width: 26ch; }
/* — Texte enrichi des champs éditeur (`pg_riche()`, 15/10) —
   Le lien prend la couleur du texte qui l'entoure : il reste lisible sur le
   crème comme sur le prune, sans une règle par fond. Le soulignement suffit
   à le distinguer — c'est lui, pas la couleur, qui signale le lien. */
.pg-lien-texte {
  color:                 inherit;
  text-decoration:       underline;
  text-underline-offset: .15em;
}
.pg-lien-texte:hover,
.pg-lien-texte:focus-visible { text-decoration-thickness: 2px; }

/* — Étoile « Gratuit » des ateliers gratuits (`pg_etoile_gratuit()`, 15/10) —
   Macaron jaune à contour et ombre dure bruns, la grammaire « pop franc » du
   §32, posé de travers en haut à droite de la carte, en débord.
   ⚠️ Débord borné à 12 px : sur mobile, la carte touche la marge de 16 px de
   l'écran — au-delà, l'étoile créerait un défilement horizontal.
   Aucune animation continue (WCAG 2.2.2) : un petit balancement au survol de
   la carte seulement, et rien en mouvement réduit. */
.pg-parcours { position: relative; }
.pg-etoile-gratuit {
  position:       absolute;
  top:            -16px;
  right:          -12px;
  z-index:        2;
  display:        grid;
  place-items:    center;
  width:          var(--pg-etoile);
  height:         var(--pg-etoile);
  transform:      rotate(12deg);
  filter:         drop-shadow(3px 3px 0 var(--pg-ink));
  pointer-events: none;
}
.pg-etoile-gratuit svg {
  position: absolute;
  inset:    0;
  width:    100%;
  height:   100%;
}
.pg-etoile-gratuit polygon {
  fill:            var(--pg-pop-jaune, var(--pg-vanilla));
  stroke:          var(--pg-ink);
  stroke-width:    3;
  stroke-linejoin: round;
}
.pg-etoile-gratuit > span {
  position:       relative;
  font-family:    var(--pg-font-display);
  font-size:      var(--pg-size-etoile);
  line-height:    1;
  text-transform: uppercase;
  color:          var(--pg-ink);
}
/* Mobile : l'étoile rentre au bord de la carte. Penchée à 1,5° (§33), la
   carte avance déjà son coin haut droit de quelques pixels ; avec les 12 px
   de débord, l'étoile dépassait l'écran de 6 px à 390 px (18/10). */
@media (max-width: 639px) {
  .pg-etoile-gratuit { right: 0; }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .pg-parcours:hover .pg-etoile-gratuit { animation: pg-etoile-balance .5s ease; }
}
@keyframes pg-etoile-balance {
  0%, 100% { transform: rotate(12deg)  scale(1); }
  40%      { transform: rotate(-4deg)  scale(1.08); }
  70%      { transform: rotate(18deg)  scale(1.04); }
}

/* `.pg-intro-large` — titre et chapeau d'une section en pleine largeur, posée
   sur le conteneur (demandes du 15/10 : « Pourquoi les prénoms » du concept,
   « Notre carte » de l'accueil, haut de page des Ateliers ; « Moments » de
   l'accueil le 20/10). Enfants DIRECTS
   seulement : les textes des cartes de la section gardent leur mesure. */
.pg-intro-large > .pg-titre-court,
.pg-intro-large > .pg-titre-22,
.pg-intro-large > .pg-at-sous-titre,
.pg-intro-large > .pg-deux-col-chapeau,
.pg-intro-large > .pg-body-l { max-width: none; }

/* — 1. Hero — */
.pg-concept-hero {
  display:     flex;
  flex-wrap:   wrap;
  gap:         44px;
  align-items: center;
}
.pg-concept-hero-texte { flex: 1 1 400px; max-width: 620px; }
.pg-concept-hero-texte h1 { margin: 0 0 20px; }
.pg-concept-hero-texte .pg-body-l { margin: 0; color: var(--pg-ink-soft); }

/* ⚠️ Marguerite est INFORMATIVE ici, et seulement ici : pas de
   pointer-events: none, et l'image porte un vrai alt. */
.pg-concept-hero-mascotte { flex: 0 1 300px; display: grid; place-items: center; }
.pg-concept-hero-mascotte img {
  width:  clamp(180px, 24vw, 300px);
  height: auto;
  filter: drop-shadow(0 12px 26px rgba(46, 27, 30, .18));
}

/* — 2. Cartes pastel — sert aussi aux engagements — */
.pg-grid--pastels { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 24px; }

.pg-carte-pastel {
  padding:       26px;
  border:        1px solid var(--pg-border);
  border-radius: var(--pg-radius-card);
  --pg-fond:     var(--pg-carte-fond, var(--pg-cream-deep));
  background:    var(--pg-fond);
}
.pg-carte-pastel h3 { margin: 0 0 10px; }
.pg-carte-pastel p  { margin: 0; }

/* L'encart de la règle éditoriale — crème clair sur fond crème profond, la
   bordure fait tout le travail de séparation. */
.pg-regle {
  margin-top:    28px;
  padding:       22px 26px;
  border:        1px solid var(--pg-border);
  border-radius: var(--pg-radius-card);
  background:    var(--pg-cream);
}
.pg-regle .pg-label     { margin: 0 0 8px; }
.pg-regle .pg-punchline { margin: 0; }

/* — 3 et 7. Deux colonnes texte + média — */
.pg-deux-col {
  display:     flex;
  flex-wrap:   wrap;
  gap:         40px;
  align-items: center;
}
.pg-deux-col-texte { flex: 1 1 340px; max-width: 560px; }
.pg-deux-col-texte h2 { margin: 0 0 18px; }
.pg-deux-col-chapeau { margin: 0 0 24px; color: var(--pg-ink-soft); }
.pg-deux-col-media { flex: 1 1 300px; }

/* 🔴 Même plafond que sur le hero de l'accueil, et pour la même raison : sans
   lui, un emplacement en 4/5 sur une colonne de ~460 px monte à 575 px de haut
   et déséquilibre toute la section. La maquette ne pose ici qu'un min-height,
   pas un ratio — le 4:5 est une consigne de cadrage pour le photographe. */
.pg-deux-col-media .pg-photo { min-height: 320px; max-height: 460px; }

/* La liste à coches se répartit en colonnes par défaut (bloc « Tout compris »).
   Dans une colonne étroite, elle se couperait en deux avec un orphelin. */
.pg-liste-check--simple { grid-template-columns: 1fr; }

/* — 4. La mascotte — */
.pg-mascotte-inner {
  position:    relative;
  display:     flex;
  flex-wrap:   wrap;
  gap:         40px;
  align-items: center;
}
.pg-mascotte-portrait {
  flex:           0 1 200px;
  width:          clamp(140px, 18vw, 220px);
  height:         auto;
  pointer-events: none;
}
.pg-mascotte-inner > div { flex: 1 1 340px; }
.pg-mascotte-inner h2 { margin: 0 0 18px; }
.pg-mascotte-texte { margin: 0 0 16px; color: var(--pg-on-plum); }

/* Sur bordeaux, l'ocre du surtitre et le bordeaux de la punchline ne passent
   plus : les deux basculent sur le jaune vanille, comme le veut le handoff. */
.pg-surtitre--vanilla  { color: var(--pg-vanilla); }
.pg-punchline--vanilla { color: var(--pg-vanilla); margin: 0; }

/* — 5. L'équipe — */
.pg-grid--equipe { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 24px; }

.pg-membre {
  display:        flex;
  flex-direction: column;
  padding:        24px;
  border:         1px solid var(--pg-border);
  border-radius:  var(--pg-radius-card);
  --pg-fond:      var(--pg-carte-fond, var(--pg-cream-deep));
  background:     var(--pg-fond);
}
.pg-membre .pg-prenom { margin: 18px 0 6px; }
.pg-membre p { margin: 0; }
.pg-membre .pg-label { margin: 0 0 10px; }

/* Le portrait est rond et occupe 62 % de la carte : c'est le seul endroit du
   site où une image sort du rayon de carte. */
.pg-portrait {
  width:         62%;
  aspect-ratio:  1;
  overflow:      hidden;
  border-radius: var(--pg-radius-pill);
  display:       grid;
  place-items:   center;
  padding:       12px;
  background:    repeating-linear-gradient(
                   135deg,
                   rgba(255, 251, 244, .9) 0 10px,
                   rgba(255, 251, 244, .5) 10px 20px
                 );
}
.pg-portrait img {
  width:         100%;
  height:        100%;
  object-fit:    cover;
  border-radius: var(--pg-radius-pill);
}
.pg-portrait span {
  font-family: ui-monospace, Menlo, monospace;
  font-size:   var(--pg-size-annot);
  text-align:  center;
  color:       var(--pg-ink-soft);
}

/* Variante ocre du libellé — le rôle d'un membre, plus soutenu que l'encre
   douce des libellés de tableau. */
.pg-label--ocre { color: var(--pg-caramel-text); }

/* — 7. Les éditions — */
.pg-saisons {
  flex:       1 1 300px;
  margin:     0;
  padding:    0;
  list-style: none;
  display:    grid;
  gap:        12px;
}
.pg-saison {
  display:         flex;
  flex-wrap:       wrap;
  gap:             8px 16px;
  justify-content: space-between;
  align-items:     baseline;
  max-width:       none;
  padding:         18px 22px;
  border:          1px solid var(--pg-border);
  border-radius:   var(--pg-radius-tile);
  --pg-fond:       var(--pg-carte-fond, var(--pg-cream-deep));
  background:      var(--pg-fond);
}
.pg-saison-nom {
  font-family: var(--pg-font-display);
  font-size:   var(--pg-size-edition);
}
.pg-saison-mois { font-size: var(--pg-size-small); color: var(--pg-encre-soft, var(--pg-ink-soft)); }

/* — 8. Clôture — */
.pg-section--cloture { padding-block: 0 var(--pg-section-y); }

.pg-cloture {
  position:      relative;
  overflow:      hidden;
  display:       flex;
  flex-wrap:     wrap;
  gap:           24px;
  align-items:   center;
  padding:       36px;
  border:        1px solid var(--pg-border);
  border-radius: var(--pg-radius-card);
  background:    var(--pg-pistachio);
}
.pg-cloture > div { position: relative; z-index: 1; flex: 1 1 340px; }
.pg-cloture h2 { margin: 0 0 10px; font-size: var(--pg-size-h2-bloc); }
.pg-cloture p  { margin: 0; }
.pg-cloture .pg-btn { position: relative; z-index: 1; }
.pg-cloture img {
  position:       absolute;
  right:          -14px;
  bottom:         -30px;
  width:          clamp(96px, 12vw, 150px);
  height:         auto;
  opacity:        .35;
  pointer-events: none;
  z-index:        0;
}


/* ===========================================================================
   21. PAGE LES ATELIERS  —  handoff v2 « 5. Les ateliers »

   Hub des activités, sans réservation. Les cinq cartes de parcours portent les
   ancres vers lesquelles le pied de page renvoie — voir pg_atelier_anchors().
   =========================================================================== */

/* Titre bridé à 22 ch, comme le demande le handoff : la phrase casse en deux
   lignes et fait bloc, au lieu de filer sur toute la largeur. */
.pg-titre-22 { max-width: 22ch; }

.pg-at-sous-titre  { max-width: 30ch; margin: 12px 0 16px; }

/* — Privatisation (13/10) — le reste de la page réutilise les composants
     d'Anniversaires, d'Ateliers et de Notre concept, sans copie.
     Lien des cartes « occasion » calé en bas de carte, pour qu'il tombe à la
     même hauteur d'une carte à l'autre. Couleur héritée, pas le bordeaux : sur
     un fond choisi au nuancier, l'encre de la carte bascule déjà en clair. */
.pg-pr-occasion { display: flex; flex-direction: column; }
.pg-pr-occasion-lien { margin: auto 0 0; padding-top: 16px; }
.pg-pr-occasion-lien a {
  display:         inline-flex;
  align-items:     center;
  gap:             8px;
  font-weight:     700;
  color:           inherit;
  text-decoration: none;
}
.pg-pr-occasion-lien a:hover { text-decoration: underline; }
.pg-at-chapeau     { margin: 0 0 32px; color: var(--pg-ink-soft); }
.pg-at-tc-chapeau  { margin: 0 0 28px; color: var(--pg-ink-soft); }
.pg-at-etapes-titre { margin: 0 0 32px; }

/* La section des parcours prolonge le hero : pas de padding en haut, sinon les
   56 px du hero et les 56 px de la section se cumulent en 112 px de vide. */
.pg-section--parcours { padding-block: 0 var(--pg-section-y); }

.pg-grid--parcours { grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 24px; }

.pg-parcours {
  display:        flex;
  flex-direction: column;
  padding:        24px;
  border:         1px solid var(--pg-border);
  border-radius:  var(--pg-radius-card);
  --pg-fond:      var(--pg-carte-fond, var(--pg-cream-deep));
  background:     var(--pg-fond);
  /* L'en-tête collant mesure ~62 px : sans cette marge, un clic depuis le pied
     de page place le titre de la carte SOUS l'en-tête. Le nombre est plus
     faible que les 130 px de Nos gourmandises, qui empile deux barres. */
  scroll-margin-top: 90px;
}
/* `h3` : la même carte sur l'accueil (« Les prochains ateliers », 15/10), où
   elle est sous le H2 de la section. Couleur héritée de la carte, donc juste
   sur un fond sombre comme sur un pastel. */
/* Accueil : `auto-fill` et non `auto-fit` — un atelier seul garde la largeur
   d'une colonne au lieu de s'étirer sur toute la page (constaté le 15/10 :
   la photo devenait un bandeau). */
.pg-prochains .pg-grid--parcours { grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); }

.pg-parcours h2,
.pg-parcours h3 {
  margin:    12px 0 8px;
  /* Le handoff demande 26 px ici, pas les 30 px du H2 de bloc. Constaté au
     navigateur : à 30 px, « Stages de vacances » passait sur deux lignes et
     désalignait la rangée. */
  font-size: var(--pg-size-h2-carte);
}
.pg-parcours p { margin: 0 0 16px; }
.pg-parcours .pg-badge { margin: 16px 0 0; align-self: flex-start; }

/* Hauteur fixe, pas de ratio : la carte doit garder la même allure quelle que
   soit la largeur de colonne. Voir le piège du 4/5 sur la page Notre concept. */
.pg-parcours-photo { height: 150px; }

/* Le lien est poussé en bas pour que les cinq cartes alignent leurs pieds,
   quelle que soit la longueur du texte. */
.pg-parcours-cta,
.pg-parcours-mention {
  display:     inline-flex;
  align-items: center;
  gap:         8px;
  margin:      auto 0 0;
  font-weight: 700;
  max-width:   none;
}
.pg-parcours-cta {
  color:           var(--pg-encre, var(--pg-ink));
  text-decoration: none;
  /* Cible tactile : la carte est cliquable au doigt sur mobile. */
  min-height:      var(--pg-target);
}
.pg-parcours-cta:hover { text-decoration: underline; }

/* Sans destination en phase 1 — « Jeux sur place ». Même position, mais rien
   qui suggère qu'on puisse cliquer. */
.pg-parcours-mention { color: var(--pg-encre-soft, var(--pg-ink-soft)); }

/* La prochaine date en vente (`pg_atelier_dates_carte()`, 13/10). C'est elle
   qui prend le bas de la carte : le lien de la carte vient juste dessous. */
.pg-parcours-dates {
  display:        flex;
  flex-direction: column;
  align-items:    flex-start;
  gap:            8px;
  margin:         auto 0 16px;
  padding-top:    16px;
  border-top:     1px solid var(--pg-border);
}
.pg-parcours .pg-parcours-dates p { margin: 0; }

/* — Mise en page du 18/10 (demande cliente) : le jour en avant, l'heure sur
     sa ligne, le prix en pastille à droite du bouton. — */
.pg-parcours-quand { display: flex; flex-direction: column; gap: 2px; }
.pg-parcours-quand-label {
  font-size:   var(--pg-size-caption);
  font-weight: 700;
  color:       var(--pg-encre-soft, var(--pg-ink-soft));
}
.pg-parcours-jour {
  font-family: var(--pg-font-display);
  font-size:   var(--pg-size-prenom);
  font-weight: 400;      /* la display n'a qu'une graisse */
  line-height: 1.15;
}
.pg-parcours-heure { font-weight: 700; }

/* Bouton à gauche, prix à droite. `flex-wrap` : sur une carte étroite, le
   prix passe sous le bouton plutôt que d'écraser son libellé. */
.pg-parcours-resa {
  display:         flex;
  flex-wrap:       wrap;
  align-items:     center;
  justify-content: space-between;
  gap:             8px;
  width:           100%;
  margin-top:      6px;
}
/* Pastille « autocollant », crème : elle se détache de TOUS les fonds de
   carte — en jaune, elle disparaîtrait sur une carte vanille. Encre fixe,
   pas l'encre de la carte : le fond de la pastille, lui, ne change pas. */
.pg-parcours .pg-parcours-resa .pg-parcours-prix {
  margin:        0 0 0 auto;
  padding:       4px 10px;   /* 10 et non 14 : « Gratuit » tient alors à côté du bouton dès 360 px (mesuré le 18/10) */
  border:        var(--pg-pop-trait) solid var(--pg-ink);
  border-radius: var(--pg-radius-pill);
  background:    var(--pg-cream);
  box-shadow:    3px 3px 0 var(--pg-ink);
  color:         var(--pg-ink);
  font-family:   var(--pg-font-display);
  font-size:     var(--pg-size-prenom);
  line-height:   1.3;
  white-space:   nowrap;
}
/* Côtés du bouton resserrés ICI seulement : sur une carte de 268 px (mobile),
   bouton et prix manquaient de 7 px pour tenir sur une ligne. */
.pg-parcours-resa .pg-btn { padding-inline: 20px; }
.pg-parcours-complet { font-weight: 700; }

/* Badge « Complet » : en haut à gauche de la carte (l'étoile « Gratuit » prend
   la droite), penché comme les autres autocollants (§32).
   `.pg-parcours` devant : sinon `.pg-parcours p` (plus spécifique) lui
   remet sa marge basse. */
.pg-parcours .pg-badge-complet {
  position:       absolute;
  top:            -12px;
  left:           -8px;   /* débord borné, comme l'étoile : pas de défilement horizontal en mobile */
  z-index:        2;
  margin:         0;
  padding:        6px 16px;
  border:         var(--pg-pop-trait) solid var(--pg-ink);
  border-radius:  var(--pg-radius-pill);
  background:     var(--pg-ink);
  color:          var(--pg-cream);
  font-family:    var(--pg-font-display);
  font-size:      var(--pg-size-etoile);
  line-height:    1.2;
  text-transform: uppercase;
  transform:      rotate(var(--pg-pop-incline));
  pointer-events: none;
}
.pg-parcours-dates-toutes {
  font-size: var(--pg-size-small);
  font-weight: 700;
  color:     var(--pg-encre, var(--pg-ink));
}
.pg-parcours-dates + .pg-parcours-cta,
.pg-parcours-dates + .pg-parcours-mention { margin-top: 0; }

/* Cible d'ancre de repli, pour une ancre attendue par le pied de page qu'aucune
   carte n'a produite. Invisible et sans hauteur : elle ne fait que donner au
   navigateur un endroit où atterrir. */
.pg-ancre-repli {
  display:           block;
  height:            0;
  scroll-margin-top: 90px;
}

/* — Étapes numérotées, version claire — le handoff demande 44 px et un
     décalage optique du texte. La variante brune vit au §18. */
.pg-etapes--parcours { gap: 24px; }
.pg-etapes--parcours li { gap: 20px; }
.pg-etapes--parcours .pg-etape-num {
  width:     var(--pg-target);
  height:    var(--pg-target);
  font-size: var(--pg-size-puce);
}
.pg-etapes--parcours p {
  margin:      0;
  padding-top: 9px; /* aligne optiquement le texte sur le centre de la puce */
  max-width:   var(--pg-measure);
}
/* Deux colonnes dès la tablette (21/10, demande cliente) : en une seule, les
   étapes s'arrêtaient à mi-bandeau, bridées par la mesure, sous un titre qui
   court jusqu'au bord. On remplit la largeur sans allonger les lignes. */
@media (min-width: 768px) {
  .pg-etapes--parcours {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap:                   32px 48px;
  }
}

/* Survol des cartes d'atelier — le même effet que les Moments de l'accueil
   (§19, 18/10, demande cliente), SANS l'inclinaison, qui appartient à
   l'éventail des Moments : la carte monte, grossit de 4 %, passe devant ses
   voisines, avec un léger rebond. Vaut aussi pour « Les prochains ateliers »
   de l'accueil, qui réutilise la carte.
   · `:focus-within` : même effet au clavier, quand le lien de la carte prend
     le focus — hors `hover: hover`, un clavier existe aussi sur tablette.
   · En mouvement réduit, aucun déplacement (§6 et ci-dessous) : seule
     l'ombre grandit, posée au §32.
   · transform et non translate : c'est la propriété que .pg-fiche utilise
     déjà (§16), et `translate` est pris par l'apparition (§23). */
.pg-parcours {
  --pg-survol-duree:  .28s;              /* relues par l'apparition (§23) */
  --pg-survol-courbe: var(--pg-ressort);
  transition: box-shadow .2s ease, transform var(--pg-survol-duree) var(--pg-survol-courbe);
}
.pg-parcours:hover,
.pg-parcours:focus-within { z-index: 2; }
@media (prefers-reduced-motion: no-preference) {
  .pg-parcours:focus-within {
    transform: translateY(calc(var(--pg-survol-levee) * -1)) scale(var(--pg-survol-zoom));
  }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .pg-parcours:hover {
    transform: translateY(calc(var(--pg-survol-levee) * -1)) scale(var(--pg-survol-zoom));
  }
}


/* ===========================================================================
   22. MOUVEMENT  —  retours d'interaction

   🔑 Ce que le handoff interdit, ce sont les **animations d'entrée**, le
   défilement piloté et les carrousels — pas le retour d'interaction. Ouvrir un
   panneau ou une boîte de dialogue EST une interaction : sans transition, elle
   apparaît d'un coup et se lit comme un défaut d'affichage plutôt que comme une
   réponse à un geste.

   ⚠️ Tout ce qui suit est automatiquement neutralisé par le garde-fou de
   mouvement réduit (§6), qui écrase les durées. Rien à répéter ici.

   ⛔ On n'anime que l'OUVERTURE, jamais la fermeture. Une fermeture animée
   donne l'impression que l'interface traîne : quand on ferme, on veut que ce
   soit parti.
   =========================================================================== */

@keyframes pg-glisse {
  from { opacity: 0; translate: 0 -8px; }
  to   { opacity: 1; translate: 0 0; }
}

@keyframes pg-fondu {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes pg-surgit {
  from { opacity: 0; scale: .97; }
  to   { opacity: 1; scale: 1; }
}

/* Panneau du burger — glisse depuis sous l'en-tête. */
.pg-mobile-panel:not([hidden]) { animation: pg-glisse .18s ease; }

/* Pop-up allergènes — le fond se fond, le panneau surgit légèrement.
   Le scale part de .97 et non de .9 : au-delà, l'effet se remarque, et une
   boîte de dialogue qui se fait remarquer détourne de son contenu. */
.pg-modal:not([hidden])                  { animation: pg-fondu .16s ease; }
.pg-modal:not([hidden]) .pg-modal-panel  { animation: pg-surgit .18s ease; }

/* Pilules d'ancre — l'état actif est piloté par IntersectionObserver au
   défilement. Sans transition, la pilule claque d'une section à l'autre. */
.pg-anchor {
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}


/* ===========================================================================
   23. APPARITIONS  —  écart assumé au handoff, décidé le 08/09

   Le handoff écrit « aucune animation d'entrée ». Décision de projet : le lieu
   vend du fun, et une page entièrement statique le raconte mal. L'écart est
   donc assumé — mais tenu par quatre règles :

   1. On n'anime QUE LES CARTES. Les titres et le texte courant apparaissent
      normalement : c'est ce qu'on vient lire, ça ne se fait pas attendre.
   2. 🔴 JAMAIS LE HERO. Le H1 est l'élément le plus lourd au premier rendu
      (Largest Contentful Paint) : l'animer en opacité retarde la mesure de
      performance du même délai, sur toutes les pages. Le gain est nul, le coût
      mesurable.
   3. Le déplacement reste sous 12 px et la durée sous 400 ms. Au-delà, on
      remarque l'animation au lieu du contenu.
   4. Tout est conditionné à `html.pg-js` : sans JavaScript, aucun état
      invisible n'existe (voir pg_js_flag()).

   ⚠️ Le garde-fou §6 écrase les durées, mais ne suffirait PAS ici : un élément
   en opacity: 0 que l'observateur ne révèle jamais resterait invisible. D'où
   la condition `prefers-reduced-motion: no-preference` — en mouvement réduit,
   l'état invisible n'est même pas posé.
   =========================================================================== */

@media (prefers-reduced-motion: no-preference) {

  .pg-js .pg-fiche,
  .pg-js .pg-formule,
  .pg-js .pg-parcours,
  .pg-js .pg-carte-pastel,
  .pg-js .pg-moment,
  .pg-js .pg-membre,
  .pg-js .pg-saison,
  .pg-js .pg-pilier {
    opacity:    0;
    /* ⚠️ `translate` ICI, et `transform` pour le survol (§16, §21) — ce n'est
       pas une incohérence. Les deux propriétés se composent au lieu de
       s'écraser : une carte survolée pendant son apparition garderait sinon
       l'un des deux décalages seulement, et sauterait de 12 px. */
    translate:  0 12px;
    /* 🔴 `transform` et `box-shadow` DANS LA LISTE, sinon cette règle — plus
       spécifique (.pg-js …) — écrase la transition de survol de la carte, qui
       saute alors sans s'animer. Constaté le 18/10 : les fiches produit
       sautaient ainsi depuis le 08/09, les Moments et les Ateliers aussi.
       Chaque carte règle sa courbe de survol par les deux variables.
       ⚠️ L'ORDRE compte : `pg.js` pose un délai par propriété dans ce même
       ordre (opacity, translate, transform, box-shadow). */
    transition: opacity .38s ease, translate .38s ease,
                transform var(--pg-survol-duree, .2s) var(--pg-survol-courbe, ease),
                box-shadow .2s ease;
  }

  /* Posée par l'observateur quand la carte entre dans le champ. */
  .pg-js .pg-vu {
    opacity:   1;
    translate: 0 0;
  }
}

/* — Marguerite respire —
   Six secondes, quatre pixels : à la limite du perceptible, et c'est le but.
   Elle a l'air vivante sans attirer l'œil hors du texte qu'elle accompagne.
   Réservé au hero de Notre concept, le seul endroit où elle est grande et
   informative. Le garde-fou §6 la stoppe en mouvement réduit — il ramène la
   durée à .01ms et le nombre d'itérations à 1. */
@keyframes pg-respire {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -4px; }
}

.pg-concept-hero-mascotte img {
  animation: pg-respire 6s ease-in-out infinite;
}

/* — La photo d'une fiche s'approche au survol —
   Ne se produit que s'il y a une vraie photo : le conteneur est déjà en
   overflow: hidden, et l'emplacement hachuré n'a pas d'<img>. */
@media (hover: hover) {
  .pg-fiche-photo img {
    transition: scale .3s ease;
  }
  .pg-fiche:hover .pg-fiche-photo img {
    scale: 1.04;
  }
}


/* ===========================================================================
   24. PAGE ANNIVERSAIRES  —  handoff v2 « 6. Anniversaires »

   La page la plus dense du site : neuf sections. Deux composants sont écrits
   génériques parce que d'autres pages les attendent — `.pg-faits` (repris par
   Les brunchs) et `.pg-faq` (repris par Contact).
   =========================================================================== */

/* — Variantes de section — */
.pg-section--lilac    { position: relative; overflow: hidden; background: var(--pg-lilac); }
.pg-section--band     { padding-block: var(--pg-section-y-band); }
/* Le filtre et la grille sont une seule idée : on supprime le vide entre eux. */
.pg-section--filtre   { padding-block: var(--pg-section-y) 1.5rem; }
.pg-section--formules { padding-block: 0 var(--pg-section-y); }

/* — 2. Tout est compris — */
.pg-an-tc { position: relative; }
.pg-an-tc h2 { margin: 0 0 20px; font-size: var(--pg-size-h2-bloc); }

.pg-an-tc-phrase {
  margin:      24px 0 0;
  font-family: var(--pg-font-display);
  /* Le palier 20 → 24 de l'échelle : le handoff demande 24 px de display ici. */
  font-size:   var(--pg-size-h3);
  line-height: 1.2;
}

.pg-an-tc-mascotte {
  position:       absolute;
  right:          -20px;
  bottom:         -56px;
  width:          clamp(110px, 13vw, 170px);
  height:         auto;
  pointer-events: none;
  z-index:        0;
}
.pg-an-tc > *:not(.pg-an-tc-mascotte) { position: relative; z-index: 1; }

/* 🔴 On lui RÉSERVE sa place au lieu de la laisser passer par-dessus le texte.
   Constaté au navigateur le 08/09 : la 4ᵉ ligne à coche (« Une boisson de
   saison, chaude ou froide ») passait derrière elle, et « chaude » devenait
   illisible. Un z-index n'y aurait rien fait — le texte serait passé DEVANT
   elle, ce qui est aussi laid. La grille à coches retombe sur trois colonnes,
   ce qui est plus lisible que quatre.
   Uniquement à partir de 960 px : en dessous, elle est plus petite et le texte
   s'empile, il n'y a pas de recouvrement. */
@media (min-width: 960px) {
  .pg-an-tc { padding-right: 200px; }
}

/* — 3. Bandeau de faits — partagé avec Les brunchs — */
.pg-faits {
  display:               grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap:                   20px;
  /* Ni trait ni marge basse : la section `--band` porte déjà son espacement,
     et le filet coupait le bandeau en deux (retiré à la demande de la cliente
     le 21/10). */
  margin:                0;
}
.pg-fait dt { margin: 0 0 4px; }
.pg-fait-valeur {
  margin:      0;
  font-family: var(--pg-font-display);
  font-size:   var(--pg-size-fait);
  line-height: 1.2;
}
/* Le prix ressort en bordeaux — c'est le seul fait qu'on cherche des yeux. */
.pg-fait-valeur--accent { color: var(--pg-plum); }

/* — 4. Filtre d'âge — */
.pg-filtre {
  display:   flex;
  flex-wrap: wrap;
  gap:       12px;
  margin:    24px 0 0;
}
.pg-filtre-btn {
  display:         inline-flex;
  flex-direction:  column;
  align-items:     flex-start;
  justify-content: center;
  /* 54 px : la cible tactile mobile du handoff, appliquée partout ici parce que
     c'est le contrôle le plus manipulé de la page. */
  min-height:      54px;
  padding:         0 20px;
  border:          2px solid var(--pg-plum);
  border-radius:   var(--pg-radius-pill);
  background:      transparent;
  color:           var(--pg-plum);
  font-family:     inherit;
  font-size:       var(--pg-size-button);
  font-weight:     700;
  line-height:     1.2;
  cursor:          pointer;
}
.pg-filtre-btn:hover { background: var(--pg-plum); color: var(--pg-cream); }

/* L'état actif porte sur aria-pressed, pas sur une classe : l'information est
   ainsi disponible pour le lecteur d'écran ET pour le style, sans dédoublement
   qui pourrait se désynchroniser. */
.pg-filtre-btn[aria-pressed="true"] {
  background: var(--pg-plum);
  color:      var(--pg-cream);
}
.pg-filtre-ages { font-size: var(--pg-size-small); font-weight: 400; opacity: .85; }

.pg-filtre-vide { margin: 24px 0 0; color: var(--pg-ink-soft); }
/* Page Ateliers : le filtre est AU-DESSUS des cartes, pas sous un titre. */
.pg-filtre--ateliers { margin: 0 0 32px; }

/* — 5. Cartes de formule — */
.pg-grid--formules { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; }

.pg-formule {
  display:        flex;
  flex-direction: column;
  gap:            10px;
  padding:        20px;
  border:         1px solid var(--pg-border);
  border-radius:  var(--pg-radius-card);
  --pg-fond:      var(--pg-carte-fond, var(--pg-cream-deep));
  background:     var(--pg-fond);
}

.pg-formule-photo {
  position:      relative;
  aspect-ratio:  4 / 3;
  overflow:      hidden;
  border-radius: var(--pg-radius-photo);
  display:       grid;
  place-items:   center;
  background: repeating-linear-gradient(135deg,
    rgba(255, 251, 244, .85) 0 10px,
    rgba(255, 251, 244, .50) 10px 20px);
}
/* 🔴 `:not()` INDISPENSABLE. Sans lui, ce sélecteur (spécificité 0,1,1) bat
   `.pg-formule-mascotte` (0,1,0) et Marguerite hérite du width/height 100 % de
   la vraie photo : elle remplissait tout l'emplacement au lieu de tenir dans
   son angle. Constaté au navigateur le 08/09.
   C'est le même mécanisme que le piège de l'attribut `hidden` (§3) — une règle
   générale qui gagne sur une règle spécifique par simple spécificité. */
.pg-formule-photo img:not(.pg-formule-mascotte) {
  width:      100%;
  height:     100%;
  object-fit: cover;
  display:    block;
}
.pg-formule-brief {
  font-family: ui-monospace, Menlo, monospace;
  font-size:   var(--pg-size-annot);
  color:       var(--pg-ink-soft);
}

/* Marguerite en vignette dans l'angle bas droit — handoff §5. Décorative. */
.pg-formule-mascotte {
  position:       absolute;
  right:          6px;
  bottom:         -10px;
  width:          72px;
  height:         auto;
  pointer-events: none;
}

.pg-formule .pg-badge { margin: 0; align-self: flex-start; }
.pg-formule h3 { margin: 0; }
.pg-formule-exp { margin: 0; font-size: var(--pg-size-small); }

.pg-formule-effets {
  margin:     0;
  padding-left: 18px;
  font-size:  var(--pg-size-small);
}
.pg-formule-effets li { max-width: none; margin-bottom: 4px; }

/* Poussé en bas pour que les pieds de carte s'alignent d'une carte à l'autre,
   quelle que soit la longueur de l'expérience et le nombre d'effets. */
.pg-formule-pied {
  margin-top:  auto;
  padding-top: 12px;
  display:     grid;
  gap:         12px;
}
.pg-formule-meta {
  display:    flex;
  flex-wrap:  wrap;
  gap:        6px 16px;
  margin:     0;
  padding:    0;
  list-style: none;
  font-size:  var(--pg-size-small);
  font-weight: 700;
}
.pg-formule-meta li {
  display:     inline-flex;
  align-items: center;
  gap:         6px;
  max-width:   none;
}

/* Le contact reste à portée sous « Réserver cette formule » : un lien, pas un
   second bouton — deux boutons pleins dans un pied de carte, et on ne sait
   plus lequel est l'action. Il suit l'encre de la carte, qui bascule en clair
   sous un fond sombre choisi au nuancier. Cible tactile tenue par la hauteur. */
.pg-formule-contact {
  display:         flex;
  align-items:     center;
  justify-content: center;
  min-height:      var(--pg-target);
  font-size:       var(--pg-size-small);
  font-weight:     700;
  color:           var(--pg-encre, var(--pg-ink));
}

/* — 6. Option de saison — */
.pg-saison-bloc {
  display:       flex;
  flex-wrap:     wrap;
  gap:           24px;
  align-items:   center;
  padding:       32px;
  border:        1px solid var(--pg-border);
  border-radius: var(--pg-radius-card);
  background:    var(--pg-pistachio);
}
.pg-saison-bloc > div { flex: 1 1 340px; }
.pg-saison-bloc h2 { margin: 0 0 10px; font-size: var(--pg-size-h2-bloc); }
.pg-saison-bloc p  { margin: 0; }
.pg-saison-prix {
  flex:        none;
  margin:      0;
  font-family: var(--pg-font-display);
  font-size:   var(--pg-size-h2-bloc);
  color:       var(--pg-plum);
}

/* — 8. FAQ — partagée avec Contact —
   `<details>` natif : ni JavaScript, ni extension. */
.pg-faq { display: grid; gap: 12px; margin-top: 24px; }

.pg-faq details {
  overflow:      hidden;
  border:        1px solid var(--pg-border);
  border-radius: var(--pg-radius-field);
  background:    var(--pg-cream-deep);
}
.pg-faq summary {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  gap:             16px;
  min-height:      54px;
  padding:         16px;
  font-weight:     700;
  cursor:          pointer;
  /* Retire le triangle natif — Chrome et Safari le posent différemment. */
  list-style:      none;
}
.pg-faq summary::-webkit-details-marker { display: none; }

/* 🔑 Le + qui devient − : le handoff le demandait « à ajouter à
   l'intégration ». Fait en CSS pur, sans une ligne de JavaScript — l'état
   ouvert est déjà porté par l'attribut `open` du <details>. */
.pg-faq summary::after {
  content:     '+';
  flex:        none;
  font-family: var(--pg-font-display);
  font-size:   var(--pg-size-h3);
  line-height: 1;
  color:       var(--pg-plum);
}
.pg-faq details[open] summary::after { content: '−'; }

.pg-faq p {
  /* Pleine largeur de la question (13/10) : la mesure de lecture globale
     (`p, li`, §3) laissait la réponse s'arrêter aux deux tiers du cadre. */
  max-width: none;
  margin:    0;
  padding:   0 16px 16px;
  color:     var(--pg-ink-soft);
}

.pg-faq-bloc h2 { font-size: var(--pg-size-h2-bloc); }

/* — 9. Clôture bordeaux — variante du bloc pistache de Notre concept — */
.pg-cloture--plum {
  background:   var(--pg-plum);
  border-color: var(--pg-plum-dark);
}
.pg-cloture--plum h2 { color: var(--pg-cream); }
.pg-cloture--plum p  { color: var(--pg-on-plum); }


/* ===========================================================================
   25. PAGE CONTACT / FAQ  —  handoff v2 « 7. Contact / FAQ »

   La FAQ elle-même vit au §24 : c'est le même composant que la page
   Anniversaires, et il ne doit pas être dupliqué.
   =========================================================================== */

.pg-section--contacts { padding-block: 0 var(--pg-section-y); }

.pg-grid--contacts { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; }

.pg-contact {
  padding:       24px;
  border:        1px solid var(--pg-border);
  border-radius: var(--pg-radius-card);
  background:    var(--pg-cream-deep);
}
.pg-contact .pg-label { margin: 0 0 8px; }
.pg-contact p:last-child { margin: 0; }
.pg-contact .pg-small { margin: 8px 0 0; color: var(--pg-ink-soft); }

/* Le téléphone, en display : c'est l'information qu'on vient chercher ici. */
.pg-contact-fort {
  display:         block;
  font-family:     var(--pg-font-display);
  font-size:       var(--pg-size-h3);
  line-height:     1.2;
  color:           var(--pg-plum);
  text-decoration: none;
}
.pg-contact-fort:hover { text-decoration: underline; }

/* ⚠️ `word-break` indispensable : contact@lesprenomsgourmands.fr fait 33
   caractères sans espace et débordait de la carte en mobile. */
.pg-contact-mail {
  display:         block;
  font-weight:     700;
  color:           var(--pg-plum);
  text-decoration: none;
  word-break:      break-word;
}
.pg-contact-mail:hover { text-decoration: underline; }

.pg-contact-adresse { margin: 0; font-weight: 700; }

/* — Deux colonnes : formulaire à gauche, FAQ à droite —
   Le formulaire d'abord dans le HTML, donc premier au clavier et à la lecture
   d'écran : c'est l'action, la FAQ est la consultation. */
.pg-contact-cols {
  display:               grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap:                   32px;
  align-items:           start;
}
.pg-contact-cols h2 { font-size: var(--pg-size-h2-bloc); margin: 0 0 16px; }

.pg-contact-form {
  padding:       28px;
  border:        1px solid var(--pg-border);
  border-radius: var(--pg-radius-card);
  background:    var(--pg-cream);
}
.pg-contact-form .pg-boutons { margin-top: 20px; }

/* Habillage du formulaire Fluent Forms — on ne redéfinit que ce qui jurerait :
   la police et les rayons. Le reste de son CSS fait le travail. */
.pg-contact-form .fluentform input[type="text"],
.pg-contact-form .fluentform input[type="email"],
.pg-contact-form .fluentform select,
.pg-contact-form .fluentform textarea {
  font-family:   inherit;
  font-size:     var(--pg-size-body);
  border-radius: var(--pg-radius-field);
  border:        1.5px solid var(--pg-border);
}

/* Note d'administration — visible du seul administrateur, jamais d'un
   visiteur. Volontairement sobre : ce n'est pas un message d'erreur, c'est un
   pense-bête posé là où le manque se constate. */
.pg-admin-note {
  margin-top:    24px;
  padding:       16px 18px;
  border:        1px dashed var(--pg-caramel);
  border-radius: var(--pg-radius-field);
  background:    var(--pg-cream-deep);
  font-size:     var(--pg-size-small);
}
.pg-admin-note p { margin: 0 0 8px; }
.pg-admin-note p:last-child { margin: 0; }
.pg-admin-note code {
  padding:       2px 5px;
  border-radius: 4px;
  background:    rgba(46, 27, 30, .07);
  font-size:     .95em;
}


/* ===========================================================================
   26. PAGE LES BRUNCHS  —  handoff v2 « 4. Les brunchs »

   La dernière des sept. Elle réutilise `.pg-faits` (§24), `.pg-faq` (§24),
   `.pg-deux-col` (§20) et `.pg-cloture--plum` (§24) : seules les formes qui
   lui sont propres vivent ici.
   =========================================================================== */

/* — 1. Hero — Marguerite adossée en bas à GAUCHE, seul hero du site où elle
     est de ce côté. Le conteneur doit être positionné pour l'ancrer. */
.pg-b-media { position: relative; }

.pg-b-mascotte {
  position:       absolute;
  left:           -30px;
  bottom:         -18px;
  width:          clamp(110px, 14vw, 170px);
  height:         auto;
  filter:         drop-shadow(0 8px 18px rgba(46, 27, 30, .16));
  pointer-events: none;
}

/* — 3. Les trois temps du service — */
.pg-grid--volets { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; }

.pg-volet {
  display:        flex;
  flex-direction: column;
  padding:        24px;
  border:         1px solid var(--pg-border);
  border-radius:  var(--pg-radius-card);
  --pg-fond:      var(--pg-carte-fond, var(--pg-cream-deep));
  background:     var(--pg-fond);
}
/* Hauteur fixe et non un ratio : les trois cartes doivent garder la même
   allure quelle que soit la largeur de colonne. Voir le piège du 4/5 (§20). */
.pg-volet-photo { height: 150px; }
.pg-volet .pg-badge { margin: 16px 0 0; align-self: flex-start; }
.pg-volet h3 { margin: 12px 0 8px; font-size: var(--pg-size-h2-carte); }
.pg-volet p  { margin: 0; }

/* — 4. Les trois formules, depuis le CPT — */
.pg-grid--brunchs { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; }

.pg-brunch {
  display:        flex;
  flex-direction: column;
  gap:            12px;
  padding:        26px;
  border:         1px solid var(--pg-border);
  border-radius:  var(--pg-radius-card);
  --pg-fond:      var(--pg-carte-fond, var(--pg-cream-deep));
  background:     var(--pg-fond);
}
.pg-brunch .pg-badge { margin: 0; align-self: flex-start; }

/* Nom de formule : capitales display, comme un prénom de création — c'est un
   nom de produit, et l'arbitrage du 03/09 autorise les capitales là. */
.pg-brunch-nom   { margin: 0; font-size: var(--pg-size-h2-carte); }
.pg-brunch-posit { margin: 0; font-size: var(--pg-size-small); color: var(--pg-encre-soft, var(--pg-ink-soft)); }

/* Poussé en bas pour que les pieds s'alignent d'une carte à l'autre, quelle
   que soit la longueur de la liste d'inclus. */
.pg-brunch-pied {
  display:     flex;
  flex-wrap:   wrap;
  gap:         4px 12px;
  align-items: baseline;
  margin-top:  auto;
  padding-top: 12px;
}
.pg-brunch-prix {
  font-family: var(--pg-font-display);
  font-size:   var(--pg-size-h2-bloc);
  color:       var(--pg-encre-accent, var(--pg-plum));
}
.pg-brunch-public { font-size: var(--pg-size-small); color: var(--pg-encre-soft, var(--pg-ink-soft)); }

.pg-brunch-note {
  margin:    28px 0 0;
  font-size: var(--pg-size-small);
  color:     var(--pg-ink-soft);
}

/* — 5. La brunch box — */
.pg-box {
  display:               grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap:                   32px;
  align-items:           center;
  padding:               32px;
  border:                1px solid var(--pg-border);
  border-radius:         var(--pg-radius-card);
  background:            var(--pg-vanilla);
}
.pg-box-texte h2 { margin: 12px 0 10px; font-size: var(--pg-size-h2-bloc); }
.pg-box-texte p  { margin: 0 0 20px; }
.pg-box-texte .pg-badge { margin: 0; }
.pg-box-media .pg-photo { min-height: 240px; }
/* Bloc « Brunch et ateliers » (19/10) : même encadré, autre pastel. */
.pg-box--sky { background: var(--pg-sky); }
.pg-box-texte .pg-brunch-note { margin: 0 0 20px; }

/* ===========================================================================
   27. FORMULAIRES FLUENT FORMS  —  newsletter (accueil) et contact

   🔑 POURQUOI CETTE SECTION EXISTE. Les deux formulaires du site sont rendus
      par Fluent Forms, qui produit SON balisage — `.ff-el-group`,
      `.ff-el-form-control`, `.ff-btn-submit`. Aucune des classes du thème
      (`.pg-check`, `.pg-btn`) ne s'y applique : sans cette section, les
      formulaires arrivent avec l'habillage par défaut de l'extension, bouton
      bleu compris, au milieu d'une charte crème et bordeaux.

   ⛔ Ne pas remettre de couleur dans les réglages du formulaire côté Fluent
      Forms : l'extension les pose en style INLINE, donc plus rien ici ne peut
      les reprendre, et une couleur du site devient introuvable dans le thème.
      Convention n°4 — les couleurs vivent en §2, et nulle part ailleurs.

   `.pg-form` est posée sur le <form> par le réglage `layout.cssClassName` du
   formulaire : c'est ce qui fait le pont entre le balisage de l'extension et
   cette feuille. Les règles historiques de `.pg-form` (§20) continuent de
   servir au balisage écrit à la main qui subsiste ailleurs.
   =========================================================================== */

/* — 1. LE LEVIER PRINCIPAL : on repeint la palette de Fluent Forms.
     🔑 Fluent Forms pilote ses couleurs par variables CSS. Les redéfinir sur
     `.pg-form` suffit à recolorer TOUT ce qu'il dessine — astérisque des champs
     obligatoires, icône d'aide, bordures, rayons — sans écrire une seule règle
     concurrente.

     🔴 C'EST LA SEULE MÉTHODE QUI TIENT, et je l'ai appris en la ratant.
     Mes premières règles visaient les sélecteurs un par un, et elles perdaient
     systématiquement — pour DEUX raisons cumulées, constatées au navigateur :
       1. les sélecteurs de Fluent Forms sont préfixés `.fluentform`, donc
          toujours d'une classe plus spécifiques que l'équivalent écrit ici ;
       2. `fluent-forms-public.css` est chargé APRÈS `style.css` — l'extension
          enfile sa feuille au rendu du shortcode, pas dans le `<head>`.
     Se battre là-dessus imposerait des `!important` partout, et casserait à la
     première mise à jour qui renomme un sélecteur. Les variables, elles, sont
     l'interface publique de l'extension : elles survivent aux refontes.
     ⛔ Ne pas remplacer ce bloc par des règles ciblées. */
.pg-form {
  --fluentform-primary:       var(--pg-plum);
  --fluentform-secondary:     var(--pg-ink-soft);
  --fluentform-border-color:  var(--pg-border);
  --fluentform-border-radius: var(--pg-radius-field);

  /* L'erreur est en bordeaux, pas en rouge. La charte n'a aucun rouge de
     texte : `--pg-strawberry` (#FF9CC8) est un rose, prévu comme fond.
     L'employer en couleur de texte sur le crème serait illisible — c'est
     exactement la faute que ce fichier contenait avant ce correctif. */
  --fluentform-danger:        var(--pg-plum);
}

/* — 2. Le groupe de champ : c'est lui qui porte l'espacement vertical.
     `.pg-form` est en `display: grid` (§20), donc pas de marge à cumuler. */
.pg-form .ff-el-group { margin-bottom: 0; }

/* — 2. Libellés. */
.pg-form .ff-el-input--label label {
  font-family:    var(--pg-font-text);
  font-size:      var(--pg-size-small);
  font-weight:    600;
  margin-bottom:  6px;
  color:          var(--pg-ink);
}
/* L'astérisque des champs obligatoires est déjà au bon ton : il suit
   `--fluentform-danger`, redéfini en §27-1. Aucune règle nécessaire ici. */

/* — 3. Champs de saisie. Reprend au trait près `.pg-form input[type=email]`
     de la §20 : les deux habillages doivent être indiscernables. */
.pg-form .ff-el-form-control {
  width:         100%;
  min-height:    52px;
  padding:       0 16px;
  border:        1.5px solid var(--pg-border);
  border-radius: var(--pg-radius-field);
  background:    #FFF;
  font-family:   var(--pg-font-text);
  font-size:     var(--pg-size-body);
  color:         var(--pg-ink);
  box-shadow:    none;
}
/* Le <textarea> est le seul champ qui respire sur plusieurs lignes. */
.pg-form textarea.ff-el-form-control {
  min-height: 140px;
  padding:    14px 16px;
  line-height: 1.6;
}
.pg-form select.ff-el-form-control { padding-right: 40px; }

.pg-form .ff-el-form-control:focus,
.pg-form .ff-el-form-control:focus-visible {
  border-color: var(--pg-plum);
  outline:      2px solid var(--pg-plum);
  outline-offset: 1px;
}

/* — 4. Cases à cocher et consentement RGPD.
     Même dessin que `.pg-check` (§20), sur le balisage de l'extension. */
.pg-form .ff-el-form-check { margin-bottom: 8px; }
.pg-form .ff-el-form-check-label {
  display:     flex;
  gap:         10px;
  align-items: flex-start;
  font-size:   var(--pg-size-small);
  line-height: 1.5;
  cursor:      pointer;
}
.pg-form .ff-el-form-check-label input[type="checkbox"] {
  flex:         none;
  width:        18px;
  height:       18px;
  margin-top:   2px;
  accent-color: var(--pg-plum);
}
/* Le consentement RGPD est un bloc de texte, pas une étiquette courte.
   ⚠️ Il était en `--pg-size-annot`, soit 11 px : trop petit pour une mention
   qui engage juridiquement le visiteur, et c'était mon erreur. Remonté au
   corps courant des mentions secondaires.
   Sa mise en page, elle, est laissée à Fluent Forms : il l'assemble en
   `display: table` (case en cellule de 20 px + texte), ce qui aligne mieux un
   texte de trois lignes que le `flex` du reste du formulaire. */
.pg-form .ff-el-tc label.ff_tc_label {
  font-size:   var(--pg-size-small);
  line-height: 1.5;
  color:       var(--pg-ink-soft);
}

/* — 5. Bouton d'envoi. Repris de `.pg-btn--dark` : c'est le bouton que la
     maquette met dans le bloc newsletter. */
.pg-form .ff-btn-submit {
  justify-self:   start;
  min-height:     var(--pg-target);
  padding:        0 28px;
  border:         0;
  border-radius:  var(--pg-radius-pill);
  background:     var(--pg-ink);
  color:          var(--pg-on-ink);
  font-family:    var(--pg-font-text);
  font-size:      var(--pg-size-button);
  font-weight:    600;
  cursor:         pointer;
  transition:     background .18s ease, transform .18s ease;
}
.pg-form .ff-btn-submit:hover { background: var(--pg-plum); transform: translateY(-1px); }
.pg-form .ff-btn-submit:focus-visible {
  outline:        2px solid var(--pg-plum);
  outline-offset: 2px;
}

/* — 6. Erreurs et confirmation.
     ⚠️ L'erreur ne doit JAMAIS être portée par la seule couleur : le texte est
     explicite et le champ prend une bordure épaisse, pour qui ne distingue pas
     le rouge du gris. */
/* 🔴 CORRIGÉ — le rose pâle en couleur de texte était illisible.
   `--pg-strawberry` (#FF9CC8) est un fond, pas une encre. Il sert donc ici à
   teinter le champ en faute, et le texte passe en bordeaux via
   `--fluentform-danger`. La bordure reste épaissie : l'erreur ne doit jamais
   être portée par la seule couleur. */
.pg-form .ff-el-is-error .ff-el-form-control {
  border-width: 2px;
  border-color: var(--pg-plum);
  background:   var(--pg-strawberry);
}
.pg-form .text-danger,
.pg-form .error-text {
  display:    block;
  margin-top: 6px;
  font-size:  var(--pg-size-small);
  color:      var(--pg-plum);
}
.ff-message-success {
  padding:       20px 24px;
  border:        1px solid var(--pg-border);
  border-left:   4px solid var(--pg-green);
  border-radius: var(--pg-radius-card);
  background:    var(--pg-vanilla);
  font-size:     var(--pg-size-body);
  color:         var(--pg-ink);
}

/* — 7. Le bloc newsletter de l'accueil est sur fond coloré : le formulaire y
     tient la colonne de droite, sans déborder de la grille. */
.pg-newsletter .frm-fluent-form { display: grid; gap: 16px; align-content: start; }

/* — 8. Newsletter : une confirmation qu'on ne peut pas rater (04/10).
     🔴 Des visiteurs s'inscrivaient plusieurs fois : l'encart vanille se
     perdait sur le pistache, et rien ne bougeait pendant l'envoi. Le balisage
     est ajouté par `pg.js` (bloc « Newsletter — confirmation visible ») ;
     sans JavaScript, on retombe sur l'encart standard du point 6. */

/* Pendant l'envoi : le bouton change de texte (pg.js) et passe en bordeaux.
   La barre de progression de Fluent Forms (`.ff-working::after`) reste.
   ⚠️ Le `form` en tête n'est pas décoratif : Fluent Forms met le bouton à
   65 % d'opacité (`.fluentform .ff-btn.disabled`, même spécificité, chargé
   après nous) — le texte en devenait illisible sur le pistache. */
form.pg-form .ff-btn-submit.ff-working,
form.pg-form .ff-btn-submit:disabled {
  opacity:    1;
  background: var(--pg-plum);
  cursor:     progress;
  transform:  none;
}

/* La confirmation : fond blanc franc et bordure verte pleine, pour trancher
   sur le pistache. Le vert n'est jamais seul : il y a l'icône et le titre. */
.pg-newsletter .pg-nl-ok {
  display:      grid;
  gap:          10px;
  align-content: start;
  padding:      22px 24px;
  border:       2px solid var(--pg-green);
  border-left-width: 6px;
  background:   #FFF;
  animation:    pg-surgit .25s ease;
}
.pg-newsletter .pg-nl-ok p { margin: 0; }
.pg-nl-ok__titre {
  display:     flex;
  align-items: center;
  gap:         10px;
  font-size:   var(--pg-size-h3);
  font-weight: 700;
  /* Sans lui, l'interligne du corps (1.7) s'applique : sur deux lignes,
     « Vous êtes déjà sur la liste » s'écartait comme deux titres distincts. */
  line-height: 1.2;
  color:       var(--pg-ink);
}
.pg-nl-ok__titre svg { flex: none; color: var(--pg-green); }
.pg-nl-ok__detail {
  font-size: var(--pg-size-small);
  color:     var(--pg-ink-soft);
}
/* `anywhere` et non `break-all` : l'adresse passe d'abord à la ligne entière,
   et n'est coupée que si elle ne tient pas sur une ligne seule. */
.pg-nl-ok__detail strong { color: var(--pg-ink); overflow-wrap: anywhere; }

/* Au retour : le formulaire est replié derrière ce lien-bouton. */
.pg-nl-deja__autre {
  justify-self:    start;
  min-height:      var(--pg-target);
  padding:         0;
  border:          0;
  background:      none;
  font-family:     var(--pg-font-text);
  font-size:       var(--pg-size-small);
  font-weight:     600;
  color:           var(--pg-plum);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor:          pointer;
}
.pg-nl-deja__autre:hover { color: var(--pg-plum-dark); }
.pg-nl-deja__autre:focus-visible {
  outline:        2px solid var(--pg-plum);
  outline-offset: 2px;
}

/* ===========================================================================
   28. PAGES DE TEXTE  —  mentions légales, et les pages juridiques à venir

   🔑 POURQUOI CETTE SECTION EXISTE. Les sept pages de la phase 1 ont chacune
      leur gabarit : leur typographie est calibrée pour des SECTIONS — un H2 y
      annonce un pan de page, en display, à 34 px. Une page juridique n'a rien
      de tout ça : c'est du texte long, découpé en rubriques courtes.

   🔴 CONSTATÉ AU NAVIGATEUR LE 10/09. Sans cette section, « Mentions légales »
      affichait « Éditeur du site » et « Responsable de la publication » en TAN
      St. Canard à la même échelle que le titre de la page. Illisible comme
      hiérarchie, et absurde pour un texte de loi.

   La classe `pg-texte` est posée sur le body par `pg_body_class()`, sur toute
   page SANS gabarit dédié. Une page juridique ajoutée demain est donc habillée
   sans toucher au code.
   =========================================================================== */

/* — 1. La colonne. GeneratePress cadre déjà le contenu ; on resserre à la
     mesure de lecture du projet et on aère verticalement. */
.pg-texte .inside-article {
  padding-block: clamp(2rem, 5vw, 3.5rem);
}
.pg-texte .entry-content {
  max-width: var(--pg-measure);
}

/* — 2. Hiérarchie des titres, refaite pour du texte long.
     Le H1 garde la display : c'est le titre de la page, et il doit rester
     dans la charte. Les H2 descendent en texte courant appuyé — ils
     découpent, ils n'annoncent pas une section de page. */
.pg-texte .entry-content h2 {
  margin:      2.25rem 0 .6rem;
  font-family: var(--pg-font-text);
  font-size:   var(--pg-size-h3);
  font-weight: 700;
  line-height: 1.25;
  color:       var(--pg-ink);
}
.pg-texte .entry-content h2:first-child { margin-top: 0; }

.pg-texte .entry-content h3 {
  margin:      1.5rem 0 .4rem;
  font-family: var(--pg-font-text);
  font-size:   var(--pg-size-body-l);
  font-weight: 700;
  color:       var(--pg-ink);
}

/* — 3. Corps du texte. Interligne plus généreux qu'ailleurs : on lit ici des
     paragraphes entiers, pas des accroches de trois lignes. */
.pg-texte .entry-content p,
.pg-texte .entry-content li {
  font-size:   var(--pg-size-body);
  line-height: 1.7;
  color:       var(--pg-ink-soft);
}
.pg-texte .entry-content p { margin: 0 0 1rem; }

/* — 4. Listes. Une page légale est faite d'énumérations « libellé : valeur ».
     Le libellé en gras est en <strong> dans le contenu ; on lui rend juste
     la couleur pleine, pour qu'il se détache du reste de la ligne. */
.pg-texte .entry-content ul,
.pg-texte .entry-content ol {
  margin:        0 0 1.25rem;
  padding-left:  1.25rem;
}
.pg-texte .entry-content li { margin-bottom: .35rem; }
.pg-texte .entry-content strong { color: var(--pg-ink); }

/* — 5. Liens. Soulignés, et pas seulement colorés : dans un texte au fil,
     la couleur seule ne suffit pas à signaler un lien. */
.pg-texte .entry-content a {
  color:                    var(--pg-plum);
  text-decoration:          underline;
  text-underline-offset:    2px;
}
.pg-texte .entry-content a:hover { color: var(--pg-plum-dark); }


/* ===========================================================================
   29. TUNNEL DE RÉSERVATION  —  /reserver/, phase 3

   ⚠️ AUCUNE MAQUETTE : la v2 du handoff a été faite pour un site sans
      réservation. 🔑 D'où la règle de cette section : ELLE N'INVENTE AUCUN
      COMPOSANT. Tout ce que le client voit existe déjà ailleurs sur le site —
        · la carte de formule        → `pg_carte_formule()`, §24 (page Anniversaires)
        · les créneaux               → les pilules du filtre d'âge, `.pg-filtre-btn`, §24
        · les numéros d'étape        → `.pg-etape-num`, §18
        · les champs                 → le dessin des champs de la §27
      Ne restent ici que la grille du calendrier et les ajustements de place.
      À faire valider par la cliente, pas à considérer comme validé.

   ⛔ PAS DE `.pg-formule` DANS CETTE SECTION. Une première version du 24/09 la
      réécrivait (bordure, fond crème) : la règle s'appliquait AUSSI à la page
      Anniversaires, dont les cartes avaient perdu leur pastel. Constaté au
      navigateur. Tout ce qui est propre au tunnel porte `pg-tunnel-`,
      `pg-calendrier` ou `pg-jour`.

   🔑 LE CALENDRIER MONTRE TOUS LES JOURS (spécification du 18/09). Un jour sans
      réservation possible porte « Pas de disponibilité » ; il ne disparaît pas.
      ⚠️ En mobile, sept colonnes de 45 px ne peuvent pas porter ce libellé :
      il y est masqué À L'ŒIL SEULEMENT (lu par les lecteurs d'écran), et le
      jour indisponible se reconnaît à son numéro barré et estompé.
   =========================================================================== */

.pg-tunnel h1 { margin: 0 0 24px; }

/* — 1. Les étapes : les puces numérotées du site, estompées tant qu'on n'y est pas — */
.pg-tunnel-etapes {
  display:    flex;
  flex-wrap:  wrap;
  gap:        12px 28px;
  margin:     0 0 32px;
  padding:    0;
  list-style: none;
  color:      var(--pg-ink-soft);
}
.pg-tunnel-etapes li { display: flex; align-items: center; gap: 10px; max-width: none; }
.pg-tunnel-etapes .pg-etape-num {
  width:      36px;
  height:     36px;
  /* Le palier h3 de `.pg-etape-num` est dessiné pour un cercle de 40 px à côté
     d'un paragraphe : dans une frise d'étapes à 36 px, le chiffre en display
     débordait du cercle. */
  font-size:  var(--pg-size-body-l);
  background: var(--pg-cream-deep);
  color:      var(--pg-ink-soft);
}
.pg-tunnel-etapes [aria-current="step"]                { color: var(--pg-ink); font-weight: 700; }
.pg-tunnel-etapes [aria-current="step"] .pg-etape-num  { background: var(--pg-plum); color: var(--pg-cream); }

.pg-tunnel-rappel   { margin: 0 0 28px; color: var(--pg-ink-soft); }
.pg-tunnel-rappel a { margin-left: 6px; color: var(--pg-plum); font-weight: 700; }
.pg-tunnel-aide     { margin: 48px 0 0; color: var(--pg-ink-soft); }
.pg-tunnel-aide a   { color: var(--pg-plum); font-weight: 700; }

/* — 2. Le préalable PMR — */
.pg-tunnel-question { max-width: var(--pg-measure); }
.pg-tunnel-question .pg-body-l { margin: 0 0 24px; color: var(--pg-ink-soft); }
.pg-tunnel-question-texte { margin: 0 0 16px; font-size: var(--pg-size-body-l); }
.pg-tunnel-choix { display: flex; flex-wrap: wrap; gap: 12px; }

/* — 3. Les messages de WooCommerce —
     Ses feuilles ne sont chargées que sur les pages de commerce
     (`inc/woocommerce.php`) : ses messages arrivent ici nus, on les habille. */
.pg-tunnel-messages ul { margin: 0 0 28px; padding: 0; list-style: none; }
.pg-tunnel-messages li {
  max-width:     var(--pg-measure);
  padding:       14px 20px;
  border-radius: var(--pg-radius-tile);
  background:    var(--pg-strawberry);
  color:         var(--pg-ink);
  font-weight:   700;
}

/* — 4. Le calendrier — */
.pg-calendrier { max-width: 760px; }

.pg-calendrier-nav {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             12px;
  margin:          0 0 16px;
}
.pg-calendrier-mois { margin: 0; font-size: var(--pg-size-h2-bloc); }
.pg-calendrier-fleche {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  width:           var(--pg-target);
  height:          var(--pg-target);
  border:          2px solid var(--pg-plum);
  border-radius:   var(--pg-radius-pill);
  font-size:       var(--pg-size-h3);
  line-height:     1;
  color:           var(--pg-plum);
  text-decoration: none;
}
span.pg-calendrier-fleche { border-color: transparent; }
a.pg-calendrier-fleche:hover,
a.pg-calendrier-fleche:focus-visible { background: var(--pg-plum); color: var(--pg-cream); }

.pg-calendrier-grille {
  width:           100%;
  border-collapse: separate;
  border-spacing:  8px;
  table-layout:    fixed;
  margin:          0 -8px;
}
.pg-calendrier-grille th {
  padding:        0 0 4px;
  font-size:      var(--pg-size-caption);
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color:          var(--pg-ink-soft);
}
.pg-calendrier-grille abbr { text-decoration: none; border-bottom: 0; cursor: default; }
/* GeneratePress trace une bordure sur tout tableau (`table, td, th`) : dans une
   grille de cartes, ce sont des traits gris entre les jours. Constaté le 24/09. */
.pg-calendrier-grille,
.pg-calendrier-grille th,
.pg-calendrier-grille td { border: 0; }

/* ⛔ Le `display: flex` va sur l'élément INTÉRIEUR, jamais sur la cellule : un
   <td> en flex sort de la mise en page du tableau, et le mois s'empile sur une
   seule colonne. Constaté au navigateur le 24/09. */
.pg-jour { padding: 0; vertical-align: top; }
.pg-jour a,
.pg-jour-case {
  display:        flex;
  flex-direction: column;
  gap:            2px;
  min-height:     64px;
  padding:        10px;
  border-radius:  var(--pg-radius-tile);
  font-size:      var(--pg-size-caption);
  line-height:    1.25;
}
.pg-jour-numero { font-family: var(--pg-font-display); font-size: var(--pg-size-prenom); line-height: 1; }

/* Un jour réservable est une petite carte : pastel, et l'ombre de la charte
   calculée sur son fond (§15, où ce sélecteur figure dans la liste). */
.pg-jour--dispo a {
  --pg-fond:       var(--pg-pistachio);
  background:      var(--pg-fond);
  color:           var(--pg-ink);
  text-decoration: none;
  transition:      transform .18s ease;
}
.pg-jour--dispo .pg-jour-etat { font-weight: 700; }
.pg-jour--dispo a:hover,
.pg-jour--dispo a:focus-visible { transform: translateY(-2px); }
.pg-jour--choisi a { --pg-fond: var(--pg-plum); color: var(--pg-cream); }

.pg-jour--complet .pg-jour-case   { color: var(--pg-ink-soft); }
.pg-jour--complet .pg-jour-numero { opacity: .55; }

@media (prefers-reduced-motion: reduce) {
  .pg-jour--dispo a:hover,
  .pg-jour--dispo a:focus-visible { transform: none; }
}

@media (max-width: 599px) {
  .pg-calendrier-grille { border-spacing: 4px; margin: 0 -4px; }
  .pg-jour a,
  .pg-jour-case { align-items: center; justify-content: center; min-height: 48px; padding: 6px 2px; }
  .pg-jour-etat {
    position:    absolute;
    width:       1px;
    height:      1px;
    overflow:    hidden;
    clip-path:   inset(50%);
    white-space: nowrap;
  }
  .pg-jour--complet .pg-jour-numero { text-decoration: line-through; }
}

/* — 5. Les créneaux du jour choisi : les pilules du filtre d'âge (§24) — */
.pg-creneaux { margin-top: 48px; scroll-margin-top: 120px; }
.pg-creneaux h2 { margin: 0 0 16px; font-size: var(--pg-size-h2-bloc); }
.pg-creneaux-liste {
  display:    flex;
  flex-wrap:  wrap;
  gap:        12px;
  margin:     0;
  padding:    0;
  list-style: none;
}
.pg-creneaux-liste li { max-width: none; }
.pg-creneaux-liste a.pg-filtre-btn { text-decoration: none; }
/* Un créneau pris reste visible mais inerte : même pilule, trait et encre éteints. */
.pg-creneau--complet,
.pg-creneau--complet:hover {
  border-color: var(--pg-border);
  background:   transparent;
  color:        var(--pg-ink-soft);
  cursor:       default;
}

/* — 6. Les cartes de formule —
     `auto-fill` et non l'`auto-fit` de la page Anniversaires : avec une seule
     formule réservable sur un créneau — le cas courant — `auto-fit` l'étire sur
     toute la largeur, photo comprise. `auto-fill` garde les colonnes vides et
     laisse la carte à sa taille. Constaté le 24/09. */
.pg-tunnel .pg-grid--formules { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }

/* — 7. Le pied de la carte de formule dans le tunnel —
     La carte elle-même est celle de la page Anniversaires (§24). On ne règle
     ici que ce qui est dans son pied : prix, effectif, acompte. Les couleurs
     suivent l'encre de la carte (`--pg-encre`), qui bascule en clair sous un
     fond sombre choisi au nuancier. */
.pg-tunnel-prix { display: grid; gap: 2px; margin: 0; font-size: var(--pg-size-small); }
.pg-tunnel-prix strong { font-size: var(--pg-size-body); }
.pg-tunnel-form { display: grid; gap: 12px; }

.pg-tunnel-effectif {
  display:     flex;
  flex-wrap:   wrap;
  align-items: center;
  gap:         8px 12px;
  font-size:   var(--pg-size-small);
}
.pg-tunnel-effectif label { flex: 1 0 100%; font-weight: 700; }
/* Le dessin des champs de la §27, au trait près. 16 px minimum : en dessous,
   iOS zoome à la saisie (§6). */
.pg-tunnel-effectif input {
  width:         6.5em;
  min-height:    52px;
  padding:       0 16px;
  border:        1.5px solid var(--pg-border);
  border-radius: var(--pg-radius-field);
  background:    var(--pg-cream);
  font-family:   var(--pg-font-text);
  font-size:     var(--pg-size-body);
  color:         var(--pg-ink);
}
.pg-tunnel-effectif input:focus-visible {
  border-color:   var(--pg-plum);
  outline:        2px solid var(--pg-plum);
  outline-offset: 1px;
}
/* Les noms des participants (21/10) : même dessin que le champ de places. */
.pg-tunnel-noms {
  display:   grid;
  gap:       6px;
  font-size: var(--pg-size-small);
}
.pg-tunnel-noms[hidden] { display: none; }
.pg-tunnel-noms label { font-weight: 700; }
.pg-tunnel-noms textarea {
  width:         100%;
  padding:       12px 16px;
  border:        1.5px solid var(--pg-border);
  border-radius: var(--pg-radius-field);
  background:    var(--pg-cream);
  font-family:   var(--pg-font-text);
  font-size:     var(--pg-size-body);
  color:         var(--pg-ink);
  resize:        vertical;
}
.pg-tunnel-noms textarea:focus-visible {
  border-color:   var(--pg-plum);
  outline:        2px solid var(--pg-plum);
  outline-offset: 1px;
}
.pg-tunnel-acompte { margin: 0; font-size: var(--pg-size-small); }

.pg-tunnel-vide .pg-body-l { margin: 0 0 24px; }
.pg-tunnel-vide p:last-child { display: flex; flex-wrap: wrap; gap: 12px; }


/* ===========================================================================
   30. PANIER ET PAGE DE COMMANDE  —  WooCommerce en blocs, phase 3

   🔴 CONSTATÉ AU NAVIGATEUR LE 29/09 : la page de commande ne ressemblait pas
      au site. Deux causes :
        1. elle était rangée parmi les PAGES DE TEXTE (§28) — colonne de 680 px,
           que WooCommerce prenait pour un écran mobile : récapitulatif replié en
           haut, formulaire étroit sur une page de 1 200 px. Corrigé dans
           `pg_body_class()`, qui lui donne `pg-commerce` à la place ;
        2. WooCommerce y dessine TOUT, avec son propre vocabulaire — titres en
           texte courant, champs gris à coins de 4 px, bouton gris anthracite
           à angles droits.

   🔑 MÊME RÈGLE QUE LA §29 : AUCUN COMPOSANT INVENTÉ. On repeint les classes de
      WooCommerce avec ce qui existe déjà :
        · titres d'étape → le H2 du site (display, marron de la charte)
        · champs         → le dessin de la §27 et de `.pg-tunnel-effectif` (§29)
        · bouton         → `.pg-btn--primary` (§7), pilule bordeaux
        · messages       → ceux du tunnel (§29-3), fond fraise
      L'en-tête (surtitre, H1, frise des étapes) est celui du tunnel, posé par
      `inc/commande.php`.

   ⚠️ `style.css` est chargé APRÈS les feuilles de WooCommerce (vérifié le
      29/09) : à spécificité égale, ces règles l'emportent. Le préfixe
      `.pg-commerce` ne sert qu'à les cantonner à ces deux pages.
   ⛔ On ne touche NI à la hauteur NI au remplissage des champs : WooCommerce y
      loge un libellé flottant, positionné en absolu. Les changer le fait
      chevaucher la saisie.
   =========================================================================== */

/* — 1. Le cadre, et l'en-tête du tunnel au-dessus du formulaire.
     GeneratePress pose l'article sur un bloc BLANC (« conteneurs séparés ») :
     au milieu du crème, la page de commande avait l'air d'une fenêtre
     collée sur le site. Le tunnel, lui, est posé à même le fond. */
.pg-commerce .inside-article { background: transparent; }
/* GeneratePress fait déborder un bloc `alignwide` : marges négatives et
   largeur de « 100 % + 60 px ». Deux défauts constatés le 29/09 :
     · en bureau, le formulaire partait 40 px plus à gauche que l'en-tête ;
     · 🔴 en mobile, les marges ne compensent plus, et la page défilait
       horizontalement de 15 px.
   On garde tout dans la même colonne. */
.pg-commerce .wp-block-woocommerce-checkout.alignwide,
.pg-commerce .wp-block-woocommerce-cart.alignwide {
  width:         auto;
  max-width:     100%;
  margin-inline: 0;
}
.pg-commande-entete { margin: 0 0 8px; }

/* — 2. Les titres d'étape : le H2 du site — */
.pg-commerce .wc-block-components-checkout-step__title,
.pg-commerce .wc-block-components-title.wc-block-components-title {
  font-family: var(--pg-font-display);
  font-size:   var(--pg-size-h2-bloc);
  font-weight: 400;
  line-height: 1.15;
  color:       var(--pg-charte-marron);
}

/* — 3. Les champs : le trait, le rayon et le fond de la §27 — */
/* ⚠️ `.wc-block-components-form` dans le sélecteur n'est pas du zèle :
   WooCommerce vise ses champs en (0,3,1) — `.wc-block-components-form
   .wc-block-components-text-input input[type="email"]` — et notre (0,2,1)
   perdait. Constaté au navigateur le 29/09 : le trait restait gris foncé. */
.pg-commerce .wc-block-components-form .wc-block-components-text-input input,
.pg-commerce .wc-block-components-form .wc-block-components-textarea,
.pg-commerce .wc-blocks-components-select__select {
  border:        1.5px solid var(--pg-border);
  border-radius: var(--pg-radius-field);
  background:    var(--pg-cream);
  font-family:   var(--pg-font-text);
  color:         var(--pg-ink);
  box-shadow:    none;
}
.pg-commerce .wc-blocks-components-select__container { border-radius: var(--pg-radius-field); }
.pg-commerce .wc-block-components-text-input label,
.pg-commerce .wc-blocks-components-select__label { color: var(--pg-ink-soft); }

.pg-commerce .wc-block-components-form .wc-block-components-text-input input:focus,
.pg-commerce .wc-block-components-form .wc-block-components-textarea:focus,
.pg-commerce .wc-blocks-components-select__select:focus {
  border-color:   var(--pg-plum);
  outline:        2px solid var(--pg-plum);
  outline-offset: 1px;
  box-shadow:     none;
}

/* Un champ en faute : fond fraise ET bordure épaisse. L'erreur n'est jamais
   portée par la seule couleur (§27-6). */
.pg-commerce .wc-block-components-form .wc-block-components-text-input.has-error input,
.pg-commerce .wc-blocks-components-select.has-error .wc-blocks-components-select__select {
  border-width: 2px;
  border-color: var(--pg-plum);
  background:   var(--pg-strawberry);
}
.pg-commerce .wc-block-components-validation-error { color: var(--pg-plum); font-weight: 700; }

/* — 4. Les cases à cocher : allergènes, droit à l'image, CGV.
     13 px chez WooCommerce : trop petit pour des mentions qui engagent, et
     pour une liste d'allergènes. Remonté au corps S, comme le consentement de
     la §27-4. */
.pg-commerce .wc-block-components-checkbox__label {
  font-size:   var(--pg-size-small);
  line-height: 1.5;
  color:       var(--pg-ink);
}
.pg-commerce .wc-block-components-checkbox .wc-block-components-checkbox__input {
  border:        1.5px solid var(--pg-ink-soft);
  border-radius: 4px;
  background:    var(--pg-cream);
}
.pg-commerce .wc-block-components-checkbox .wc-block-components-checkbox__input:checked {
  border-color: var(--pg-plum);
  background:   var(--pg-plum);
}
.pg-commerce .wc-block-components-checkbox .wc-block-components-checkbox__mark { fill: var(--pg-cream); }
.pg-commerce .wc-block-components-checkbox .wc-block-components-checkbox__input:focus-visible {
  outline:        2px solid var(--pg-plum);
  outline-offset: 2px;
}

/* — 5. Le bouton de commande et celui du panier : `.pg-btn--primary` (§7).
     Le bouton du panier était illisible (encre prune sur fond sombre) :
     relevé au navigateur le 24/09. */
.pg-commerce .wc-block-components-checkout-place-order-button,
.pg-commerce .wc-block-cart__submit-button {
  min-height:    54px;
  padding:       0 28px;
  border:        2px solid transparent;
  border-radius: var(--pg-radius-pill);
  background:    var(--pg-plum);
  color:         var(--pg-cream);
  font-family:   var(--pg-font-text);
  font-size:     var(--pg-size-button);
  font-weight:   700;
  text-decoration: none;
  transition:    background-color .18s ease;
}
.pg-commerce .wc-block-components-checkout-place-order-button:hover,
.pg-commerce .wc-block-components-checkout-place-order-button:focus-visible,
.pg-commerce .wc-block-cart__submit-button:hover,
.pg-commerce .wc-block-cart__submit-button:focus-visible {
  background: var(--pg-plum-dark);
  color:      var(--pg-cream);
}
.pg-commerce .wc-block-components-checkout-place-order-button:focus-visible,
.pg-commerce .wc-block-cart__submit-button:focus-visible {
  outline:        2px solid var(--pg-plum);
  outline-offset: 2px;
}

/* — 6. Les messages : ceux du tunnel (§29-3) — */
.pg-commerce .wc-block-components-notice-banner {
  border:        0;
  border-radius: var(--pg-radius-tile);
  background:    var(--pg-strawberry);
  color:         var(--pg-ink);
  font-size:     var(--pg-size-small);
}
.pg-commerce .wc-block-components-notice-banner > svg {
  border-radius: var(--pg-radius-pill);
  background:    var(--pg-plum);
  fill:          var(--pg-cream);
}

/* — 7. Le récapitulatif : un encart crème foncé, comme ceux de la §15 — */
.pg-commerce .wp-block-woocommerce-checkout-order-summary-block,
.pg-commerce .wp-block-woocommerce-cart-order-summary-block {
  padding:       8px 20px;
  border:        0;
  border-radius: var(--pg-radius-card);
  background:    var(--pg-cream-deep);
}
.pg-commerce .wc-block-components-totals-item__label,
.pg-commerce .wc-block-components-product-name { color: var(--pg-ink); }
.pg-commerce .wc-block-components-product-metadata { color: var(--pg-ink-soft); font-size: var(--pg-size-small); }
/* Le produit « Réservation » n'a pas d'image, et n'en aura pas : WooCommerce
   affichait à la place une vignette grise vide. */
.pg-commerce .wc-block-components-order-summary-item__image { display: none; }

/* La croix « Retirer » posée par `assets/js/pg-commande.js` (15/10), au bout
   de chaque ligne. Cible de 44 px (WCAG 2.5.5) malgré la petite pastille. */
.pg-commerce .wc-block-components-order-summary-item { position: relative; padding-right: 48px; }
.pg-retirer-ligne {
  position:        absolute;
  top:             50%;
  right:           0;
  display:         grid;
  place-items:     center;
  width:           44px;
  height:          44px;
  margin:          -22px 0 0;
  padding:         0;
  border:          0;
  background:      none;
  color:           var(--pg-ink);
  cursor:          pointer;
}
.pg-retirer-ligne span {
  display:       grid;
  place-items:   center;
  width:         28px;
  height:        28px;
  border:        2px solid var(--pg-ink);
  border-radius: var(--pg-radius-pill);
  background:    var(--pg-cream);
  font-size:     var(--pg-size-prenom);
  line-height:   1;
}
.pg-retirer-ligne:hover span,
.pg-retirer-ligne:focus-visible span { background: var(--pg-pop-rose, var(--pg-strawberry)); }
.pg-ligne-retrait { opacity: .4; pointer-events: none; }

/* — 8. La mention des conditions, sous les cases — */
.pg-commerce .wc-block-checkout__terms { font-size: var(--pg-size-small); color: var(--pg-ink-soft); }
.pg-commerce .wc-block-checkout__terms a,
.pg-commerce .wc-block-components-checkout-return-to-cart-button { color: var(--pg-plum); font-weight: 700; }


/* ===========================================================================
   31. PROCHAINES SÉANCES  —  page Les ateliers, phase 3

   La liste des séances d'atelier programmées par la gérante (`inc/seances.php`,
   `pg_seances_liste()`). ⚠️ AUCUNE MAQUETTE, comme le tunnel : la section
   reprend le dessin des cartes de parcours de la même page (§21) — fond crème
   foncé, trait, rayon de carte — et n'invente rien. À faire valider.

   🔑 LA DATE D'ABORD. Le client vient chercher « quand », puis « quoi » : la
   date est le premier élément de la carte, en display, l'activité dessous.
   =========================================================================== */

.pg-seances-chapeau { margin: 0 0 28px; color: var(--pg-ink-soft); }

.pg-seances-liste {
  display:               grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap:                   20px;
  margin:                0;
  padding:               0;
  list-style:            none;
}

.pg-seance {
  display:        flex;
  flex-direction: column;
  gap:            8px;
  max-width:      none;
  padding:        20px;
  border:         1px solid var(--pg-border);
  border-radius:  var(--pg-radius-card);
  background:     var(--pg-cream-deep);
}

.pg-seance-date {
  display:        flex;
  flex-direction: column;
  margin:         0;
  font-family:    var(--pg-font-display);
  font-size:      var(--pg-size-prenom);
  line-height:    1.15;
  color:          var(--pg-charte-marron);
}
.pg-seance-date span {
  font-family: var(--pg-font-text);
  font-size:   var(--pg-size-small);
  font-weight: 700;
  color:       var(--pg-ink-soft);
}

/* Le nom de l'activité : un H3, mais au palier du corps L — la date domine. */
.pg-seance-titre { margin: 0; font-size: var(--pg-size-body-l); }

.pg-seance-infos {
  display:   flex;
  flex-wrap: wrap;
  gap:       4px 14px;
  margin:    0;
  font-size: var(--pg-size-small);
  color:     var(--pg-ink-soft);
}

/* Le bouton est poussé en bas : les cartes d'une rangée alignent leurs pieds. */
.pg-seance .pg-btn,
.pg-seance-complet { margin-top: auto; }

.pg-seance-complet {
  font-weight: 700;
  color:       var(--pg-ink-soft);
}
.pg-seance--complet .pg-seance-date { color: var(--pg-ink-soft); }

/* ===========================================================================
   32. POP FRANC  —  proposition B du 15/10, validée par la cliente

   Grammaire « autocollant » : contour brun épais + ombre dure sans flou.
   Les couleurs franches sont en APLATS ; le crème reste le fond de page.

   Remplace le §32 « PEP'S ROSE » (proposition A) — ⛔ ne pas empiler les
   deux, leurs règles se contrediraient. Retour à A : remettre ses six
   pastels au §2 et son §32 (fichier `pg-peps-rose.css` du 15/10).

   ⛔ Ne touche à aucune dimension de mise en page, marge, grille ni ordre.
   ⛔ Ne touche ni au H1 (rose charte, décision du 15/10) ni aux H2 marron.
   =========================================================================== */

::selection { background: var(--pg-pop-jaune); color: var(--pg-ink); }

:where(a, button, input, select, textarea, summary):focus-visible {
  outline-color: var(--pg-ink);
}

/* — Boutons : rose électrique, encre brune, contour et ombre dure — */
.pg-btn {
  border-width: var(--pg-pop-trait);
  transition:   background-color .15s ease, color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.pg-btn--primary {
  background:   var(--pg-pop-rose);
  color:        var(--pg-ink);
  border-color: var(--pg-ink);
  box-shadow:   var(--pg-pop-ombre-btn) var(--pg-pop-ombre-btn) 0 var(--pg-ink);
}
.pg-btn--primary:hover,
.pg-btn--primary:focus-visible {
  background: var(--pg-pop-rose);
  color:      var(--pg-ink);
  transform:  translate(-2px, -2px);
  box-shadow: calc(var(--pg-pop-ombre-btn) + 2px) calc(var(--pg-pop-ombre-btn) + 2px) 0 var(--pg-ink);
}
.pg-btn--primary:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--pg-ink); }

.pg-btn--outline {
  background:   var(--pg-cream);
  color:        var(--pg-ink);
  border-color: var(--pg-ink);
  box-shadow:   var(--pg-pop-ombre-btn) var(--pg-pop-ombre-btn) 0 var(--pg-ink);
}
.pg-btn--outline:hover,
.pg-btn--outline:focus-visible { background: var(--pg-pop-jaune); color: var(--pg-ink); transform: translate(-2px, -2px); }

.pg-btn--dark:hover,
.pg-btn--dark:focus-visible { background: var(--pg-pop-rose); color: var(--pg-ink); }

/* Sur les aplats sombres (à emporter, clôtures) le bouton crème garde sa
   couleur : il est déjà le point le plus clair du bloc. */
.pg-btn--cream { border-color: var(--pg-ink); }

/* — Boutons à couleur choisie (20/10) —
     La cliente règle le fond d'un bouton dans l'administration
     (`pg_btn_couleur()`) ; l'encre est calculée côté PHP. Placé APRÈS les
     variantes pour l'emporter sur elles, survol compris : le survol garde le
     soulèvement et l'ombre de la variante, il ne change plus la couleur. */
.pg-btn[data-pg-couleur],
.pg-btn[data-pg-couleur]:hover,
.pg-btn[data-pg-couleur]:focus-visible,
.pg-btn[data-pg-couleur]:active {
  background:   var(--pg-btn-fond);
  color:        var(--pg-btn-encre);
  border-color: var(--pg-ink);
}

/* — Bandeau utilitaire : brun, accents électriques —
     ⚠️ Adapté au balisage réel : le patch visait `.pg-utility a`, qui n'existe
     pas — le seul lien est `.pg-utility-phone`. Et `.pg-utility-lieu` porte sa
     propre couleur (texte secondaire, illisible sur le brun) : il hérite ici
     du crème posé sur le bandeau. */
.pg-utility { background: var(--pg-ink); color: var(--pg-cream); border-bottom: 0; }
.pg-utility-emporter { color: var(--pg-pop-rose); }   /* 5,2:1 */
.pg-utility-phone    { color: var(--pg-pop-jaune); }  /* 11:1 */
.pg-utility-sep      { color: var(--pg-pop-rose); }
.pg-utility-lieu     { color: inherit; }

/* — Navigation — */
.pg-nav a {
  border-radius: var(--pg-radius-pill);
  transition:    background-color .15s ease, color .15s ease;
}
.pg-nav a:hover { background: var(--pg-pop-jaune); color: var(--pg-ink); }
.pg-nav a[aria-current="page"] {
  color:                     var(--pg-ink);
  text-decoration-color:     var(--pg-pop-rose);
  text-decoration-thickness: 4px;
}

/* — Onglets mobiles et panneau du burger — */
.pg-tab.is-current { background: var(--pg-strawberry); color: var(--pg-ink); }
.pg-tab--cta,
.pg-tab--cta:hover {
  background:   var(--pg-pop-rose);
  color:        var(--pg-ink);
  border:       var(--pg-pop-trait) solid var(--pg-ink);
}
.pg-pill:hover      { background: var(--pg-pop-jaune); }
.pg-pill.is-current { background: var(--pg-ink); color: var(--pg-cream); }

/* — Sections alternées : aplat bonbon, bordées de brun — */
.pg-section--cream {
  background:        var(--pg-strawberry);
  border-block:      var(--pg-pop-trait) solid var(--pg-ink);
}

/* — Cartes : l'ombre calculée devient une ombre dure brune, avec contour.
     On ne réécrit pas l'ombre carte par carte : on rebranche les réglages
     du §2 pour ce rendu, et on force la teinte à l'encre.
     🔑 Ces règles arrivent APRÈS le calcul de teinte du §15 (et son survol
     du §21), à spécificité égale : ce sont elles qui l'emportent. — */
:root {
  --pg-ombre-x:           var(--pg-pop-ombre);
  --pg-ombre-y:           var(--pg-pop-ombre);
  --pg-ombre-flou:        0px;
  --pg-ombre-survol-x:    calc(var(--pg-pop-ombre) + 3px);
  --pg-ombre-survol-y:    calc(var(--pg-pop-ombre) + 3px);
  --pg-ombre-survol-flou: 0px;
}
.pg-fiche,
.pg-formule,
.pg-parcours,
.pg-carte-pastel,
.pg-encart {
  border:     var(--pg-pop-trait) solid var(--pg-ink);
  box-shadow: var(--pg-ombre-x) var(--pg-ombre-y) 0 var(--pg-ink);
}
.pg-fiche:hover,
.pg-formule:hover,
.pg-parcours:hover,
.pg-parcours:focus-within {
  box-shadow: var(--pg-ombre-survol-x) var(--pg-ombre-survol-y) 0 var(--pg-ink);
}

/* — Surtitres : pastille jaune inclinée, comme un autocollant — */
.pg-section .pg-surtitre,
.pg-section--cream .pg-surtitre {
  display:        inline-block;
  padding:        5px 14px;
  border:         var(--pg-pop-trait) solid var(--pg-ink);
  border-radius:  var(--pg-radius-pill);
  /* Réglable dans Réglages du site › Couleurs (inc/options.php) ; vide, le jaune. */
  background:     var(--pg-surtitre-fond, var(--pg-pop-jaune));
  color:          var(--pg-surtitre-encre, var(--pg-ink));
  transform:      rotate(var(--pg-pop-incline));
}

/* — Badges : même grammaire — */
.pg-badge {
  border:    var(--pg-pop-trait) solid var(--pg-ink);
  transform: rotate(var(--pg-pop-incline));
}

/* — Barre d'ancres — */
.pg-anchor            { border: var(--pg-pop-trait) solid var(--pg-ink); }
.pg-anchor:hover      { background: var(--pg-pop-jaune); }
.pg-anchor.is-current { background: var(--pg-ink); color: var(--pg-cream); }

/* — Aplats « prune » : passent au marron de la charte (crème dessus 10,8:1) — */
.pg-section--plum,
.pg-cloture--plum { background: var(--pg-charte-marron); }

/* — Pied de page — */
.site-footer      { border-top: 8px solid var(--pg-pop-rose); }
.pg-footer-label  { color: var(--pg-pop-rose); }
.pg-footer-links a:hover,
.pg-linklike:hover,
.pg-footer-text a:hover { color: var(--pg-pop-jaune); }

@media (prefers-reduced-motion: reduce) {
  .pg-btn--primary:hover, .pg-btn--primary:focus-visible, .pg-btn--primary:active,
  .pg-btn--outline:hover, .pg-btn--outline:focus-visible { transform: none; }
}


/* ===========================================================================
   33. CARTES PENCHÉES  —  « marque de fabrique », demande cliente du 18/10

   Toutes les cartes du site penchent, une sur deux dans l'autre sens, comme
   des autocollants posés à la main. Né sur les Moments de l'accueil (§19),
   étendu à tout le site.

   · ±3° en desktop, ±1,5° en mobile (moitié) : sur une carte pleine largeur,
     3° feraient déborder ses coins dans la marge de l'écran.
   · Les BANDEAUX larges (éditions de Notre concept, encarts de Notre carte)
     penchent deux fois moins : à 3° sur 600 px, un bandeau monterait de
     30 px d'un bout à l'autre et ne s'alignerait plus sur rien.
   · Au survol, les cartes qui ont un effet (fiches, ateliers, Moments) se
     REDRESSENT : leur `transform` de survol ne contient pas de rotation.
     En mouvement réduit, elles gardent leur inclinaison (§6).
   · L'inclinaison vit dans `transform` ; l'apparition (§23) anime
     `translate`. Les deux se composent — ⛔ ne pas fusionner.
   · `nth-child` compte les cartes masquées : sur Notre carte, un filtre
     actif peut mettre deux cartes visibles côte à côte dans le même sens.
     Assumé — la recalculer en JavaScript ne vaut pas le détail.
   · Les Moments gardent leurs propres règles (§19) : même jeton, plus le
     décalage en escalier qui leur est propre.
   =========================================================================== */

.pg-fiche,
.pg-formule,
.pg-parcours,
.pg-carte-pastel,
.pg-membre,
.pg-pilier,
.pg-volet,
.pg-brunch {
  --pg-incline: calc(var(--pg-carte-incline) * -.5);
  transform:    rotate(var(--pg-incline));
}
:is(.pg-fiche, .pg-formule, .pg-parcours, .pg-carte-pastel, .pg-membre, .pg-pilier, .pg-volet, .pg-brunch):nth-child(even) {
  --pg-incline: calc(var(--pg-carte-incline) * .5);
}

.pg-saison,
.pg-encart {
  --pg-incline: calc(var(--pg-carte-incline) * -.25);
  transform:    rotate(var(--pg-incline));
}
:is(.pg-saison, .pg-encart):nth-child(even) {
  --pg-incline: calc(var(--pg-carte-incline) * .25);
}

@media (min-width: 640px) {
  .pg-fiche,
  .pg-formule,
  .pg-parcours,
  .pg-carte-pastel,
  .pg-membre,
  .pg-pilier,
  .pg-volet,
  .pg-brunch { --pg-incline: calc(var(--pg-carte-incline) * -1); }
  :is(.pg-fiche, .pg-formule, .pg-parcours, .pg-carte-pastel, .pg-membre, .pg-pilier, .pg-volet, .pg-brunch):nth-child(even) {
    --pg-incline: var(--pg-carte-incline);
  }
  .pg-saison,
  .pg-encart { --pg-incline: calc(var(--pg-carte-incline) * -.5); }
  :is(.pg-saison, .pg-encart):nth-child(even) { --pg-incline: calc(var(--pg-carte-incline) * .5); }

  /* Gouttières élargies : penchée à 3°, une carte de 450 à 700 px de haut
     déplace ses coins de 12 à 18 px — dans les 20 à 24 px d'origine, deux
     cartes voisines se touchaient (constaté au navigateur le 18/10, fiches
     et formules d'anniversaire). Les Moments gardent leur éventail serré. */
  .pg-grid--fiches,
  .pg-grid--formules,
  .pg-grid--brunchs,
  .pg-grid--volets,
  .pg-grid--pastels,
  .pg-grid--equipe,
  .pg-grid--piliers,
  .pg-grid--parcours,
  .pg-grid--encarts { gap: 32px; }
}


/* ===========================================================================
   34. « EN SAVOIR PLUS »  —  l'événement en détails (18/10, demande cliente)

   Le bouton sur la carte, et la fenêtre qui reprend la carte en grand avec le
   contenu de l'onglet « L'événement en détails » (`pg_details_carte()`,
   `pg.js`). La fenêtre réutilise `.pg-modal` (§11).
   =========================================================================== */

/* — Le bouton : un lien de suite, pas un second bouton plein — la carte en a
     déjà un (« Réserver »). Masqué sans JavaScript : personne pour l'ouvrir. */
.pg-details-btn {
  display:         none;
  align-items:     center;
  align-self:      flex-start;
  gap:             8px;
  margin:          0 0 16px;
  /* Pastille jaune cerclée (21/10, demande cliente), comme les surtitres — et
     sur le même réglage de couleur (Réglages du site › Couleurs). */
  padding:         6px 16px;
  border:          var(--pg-pop-trait) solid var(--pg-ink);
  border-radius:   var(--pg-radius-pill);
  background:      var(--pg-surtitre-fond, var(--pg-pop-jaune));
  color:           var(--pg-surtitre-encre, var(--pg-ink));
  font:            inherit;
  font-weight:     700;
  text-decoration: none;
  cursor:          pointer;
}
.pg-js .pg-details-btn { display: inline-flex; }

/* — Le contenu des détails, sur la carte : toujours masqué. Il n'est là que
     pour être recopié dans la fenêtre, et lu par Google. ⛔ `!important`
     délibéré : l'attribut `hidden` ne pèse que le poids d'une feuille de style
     navigateur, et la moindre règle `display` posée sur les `div` d'une carte
     le ferait apparaître. */
.pg-details-contenu[hidden] { display: none !important; }
/* 🔴 GeneratePress donne à TOUT <button> survolé un fond gris foncé et un texte
   blanc (`button:hover`) : ce lien-bouton devenait un pavé gris (18/10).
   `.pg-details-btn:hover` (0,2,0) l'emporte sur `button:hover` (0,1,1). */
.pg-details-btn:hover,
.pg-details-btn:focus,
.pg-details-btn:active {
  background: var(--pg-surtitre-fond, var(--pg-pop-jaune));
  color:      var(--pg-surtitre-encre, var(--pg-ink));
  box-shadow: 2px 2px 0 var(--pg-ink);
}

/* — La fenêtre — */
.pg-modal--details .pg-details-panel {
  position:      relative;
  max-width:     720px;
  max-height:    88vh;
  padding:       0;
  border:        var(--pg-pop-trait) solid var(--pg-ink);
  box-shadow:    var(--pg-pop-ombre) var(--pg-pop-ombre) 0 var(--pg-ink);
}
/* Le zoom est joué par `pg.js` : l'apparition générique des fenêtres (§22)
   s'y superposerait. */
.pg-modal--details:not([hidden]) .pg-details-panel { animation: none; }

/* La croix reste à portée pendant le défilement du contenu : collante, calée
   à droite, et sa marge basse négative ramène la carte dessous.
   ⛔ PAS de `float` : la carte est un conteneur flex, qui s'écarte d'un
   flottant sur toute sa hauteur — en mobile, le contenu perdait 80 px de
   large sur toute la fenêtre (constaté le 18/10). */
.pg-details-fermer {
  position:      sticky;
  top:           12px;
  z-index:       3;
  display:       flex;
  margin:        12px 12px -60px auto;
  border-color:  var(--pg-ink);
}

/* La carte recopiée : à plat, droite, sans cadre — c'est le panneau qui porte
   le contour. Ces règles l'emportent sur l'inclinaison (§33), le survol (§21)
   et l'apparition (§23) : même spécificité, déclarées après. */
.pg-details-corps .pg-details-carte {
  min-height:    0;
  margin:        0;
  padding:       28px;
  border:        0;
  border-radius: 0;
  box-shadow:    none;
  transform:     none;
  translate:     none;
  opacity:       1;
}
.pg-details-corps .pg-details-carte:hover,
.pg-details-corps .pg-details-carte:focus-within { transform: none; box-shadow: none; }

/* Photo plus généreuse qu'en vignette. */
.pg-details-carte .pg-parcours-photo { height: clamp(180px, 34vw, 280px); }
/* Même hauteur pour une formule : en 4:3 sur toute la largeur de la fenêtre,
   la photo occupait plus de la moitié de l'écran avant le moindre détail. */
.pg-details-carte .pg-formule-photo { aspect-ratio: auto; height: clamp(180px, 34vw, 280px); }

/* — Le contenu saisi par la cliente — */
.pg-details-texte {
  margin:      4px 0 20px;
  padding-top: 16px;
  border-top:  var(--pg-pop-trait) dashed var(--pg-encre-trait, var(--pg-ink));
}
.pg-details-texte > :first-child { margin-top: 0; }
.pg-details-texte > :last-child  { margin-bottom: 0; }
.pg-details-texte h2,
.pg-details-texte h3,
.pg-details-texte h4 { margin: 20px 0 8px; font-size: var(--pg-size-h3); color: inherit; }
.pg-details-texte p,
.pg-details-texte li { max-width: none; }
.pg-details-texte ul,
.pg-details-texte ol { margin: 0 0 14px; padding-left: 1.2em; }
.pg-details-texte img { max-width: 100%; height: auto; border-radius: var(--pg-radius-photo); }
.pg-details-texte a { color: inherit; font-weight: 700; }


/* ===========================================================================
   35. FONDS DES BLOCS  —  couleur et/ou image par bloc (18/10, `inc/fonds.php`)

   · La couleur arrive en style inline (`background:`) : elle l'emporte sur le
     fond d'origine du bloc (aplat bonbon, prune, lilas…), motif compris.
   · L'image est une <img> en `object-fit: cover`, sous un voile de la couleur
     choisie (crème à défaut), d'intensité réglable (40 % par défaut) — sa
     couleur décide de l'encre (`--sombre` / `--clair`), et un halo de la
     même couleur derrière le texte garde la lecture sur un voile léger.
   · Image et voile passent SOUS le contenu par un z-index négatif, dans un
     contexte d'empilement propre au bloc (`isolation`). ⛔ Ne pas plutôt
     remonter le contenu en `position: relative` : les mascottes et l'étoile
     « Gratuit », positionnées en absolu, perdraient leur ancrage.
   · L'image est TOUJOURS fixe : `position: fixed`, à la hauteur de l'écran,
     découpée à la taille du bloc par `clip-path` — le bloc défile, l'image
     ne bouge pas. Marche
     aussi sur iOS, contrairement à `background-attachment: fixed`.
     ⚠️ Un ancêtre transformé casserait l'effet : les blocs ne le sont pas
     (seules les CARTES penchent, §33).
   =========================================================================== */

.pg-bloc-fond--image {
  position:  relative;
  isolation: isolate;
}
.pg-bloc-media,
.pg-bloc-voile {
  position:       absolute;
  inset:          0;
  z-index:        -1;
  pointer-events: none;
}
.pg-bloc-media { overflow: hidden; }
.pg-bloc-img {
  display:    block;
  width:      100%;
  height:     100%;
  max-width:  none;
  object-fit: cover;
}
.pg-bloc-voile {
  background: var(--pg-bloc-voile, var(--pg-cream));
  opacity:    var(--pg-bloc-voile-force, .4);   /* réglé ligne par ligne, 40 % par défaut */
}

/* Halo de la couleur du voile derrière le texte du bloc : sur un voile léger,
   c'est lui qui garde la lecture au-dessus d'une photo chargée. Hors cartes,
   qui ont leur propre fond. */
.pg-bloc-fond--image :is(h1, h2, h3, .pg-body-l, .pg-surtitre + *, p):not(:is(.pg-fiche, .pg-formule, .pg-parcours, .pg-carte-pastel, .pg-membre, .pg-pilier, .pg-volet, .pg-brunch, .pg-encart, .pg-saison, .pg-moment, .pg-cloture, .pg-tout-compris, .pg-box, .pg-faits, .pg-faq, .pg-form, .pg-seance, .pg-badge, .pg-surtitre, .pg-btn, .pg-table) *) {
  text-shadow: 0 0 14px var(--pg-bloc-voile, var(--pg-cream)), 0 0 4px var(--pg-bloc-voile, var(--pg-cream));
}
/* Fond de page : le halo prend la couleur du voile de PAGE, posée sur :root
   par `inc/fonds.php` (le calque n'est l'ancêtre d'aucun bloc). */
.pg-page-claire :is(.pg-section, .pg-reassurance):not(.pg-bloc-fond, .pg-section--cream, .pg-section--plum, .pg-section--lilac, .pg-emporter) :is(h1, h2, h3, .pg-body-l, p):not(:is(.pg-fiche, .pg-formule, .pg-parcours, .pg-carte-pastel, .pg-membre, .pg-pilier, .pg-volet, .pg-brunch, .pg-encart, .pg-saison, .pg-moment, .pg-cloture, .pg-tout-compris, .pg-box, .pg-faits, .pg-faq, .pg-form, .pg-seance, .pg-badge, .pg-surtitre, .pg-btn, .pg-table) *),
.pg-page-sombre :is(.pg-section, .pg-reassurance):not(.pg-bloc-fond, .pg-section--cream, .pg-section--plum, .pg-section--lilac, .pg-emporter) :is(h1, h2, h3, .pg-body-l, p):not(:is(.pg-fiche, .pg-formule, .pg-parcours, .pg-carte-pastel, .pg-membre, .pg-pilier, .pg-volet, .pg-brunch, .pg-encart, .pg-saison, .pg-moment, .pg-cloture, .pg-tout-compris, .pg-box, .pg-faits, .pg-faq, .pg-form, .pg-seance, .pg-badge, .pg-surtitre, .pg-btn, .pg-table) *) {
  text-shadow: 0 0 14px var(--pg-page-voile, var(--pg-cream)), 0 0 4px var(--pg-page-voile, var(--pg-cream));
}

/* — L'image est TOUJOURS fixe pendant le défilement (18/10, `inc/fonds.php`) — */
.pg-bloc-fond--fixe .pg-bloc-media { clip-path: inset(0); }
.pg-bloc-fond--fixe .pg-bloc-img {
  position: fixed;
  inset:    0;
  width:    100vw;
  height:   100vh;
}

/* — « Toute la page » : un calque fixe sous tout le contenu — */
.pg-page-fond {
  position:       fixed;
  inset:          0;
  z-index:        -1;
  pointer-events: none;
}
.pg-page-fond .pg-bloc-media,
.pg-page-fond .pg-bloc-voile { z-index: auto; }

/* — L'encre suit le fond. Les cartes du bloc gardent la leur (`:not(… *)`) :
     elles ont leur propre couleur de fond. — */
.pg-bloc-fond--sombre { color: var(--pg-encre-claire); }
.pg-bloc-fond--sombre :is(h1, h2, h3, h4, .pg-body-l, .pg-small, .pg-lien-suite a, a.pg-lien-suite, .pg-lien-texte):not(:is(.pg-fiche, .pg-formule, .pg-parcours, .pg-carte-pastel, .pg-membre, .pg-pilier, .pg-volet, .pg-brunch, .pg-encart, .pg-saison, .pg-moment, .pg-cloture, .pg-tout-compris, .pg-box, .pg-faits, .pg-faq, .pg-form, .pg-seance) *) {
  color: var(--pg-encre-claire);
}
/* Une couleur claire posée sur un bloc sombre d'origine (la mascotte de Notre
   concept, l'à-emporter de Notre carte) : le texte repasse en brun. */
.pg-bloc-fond--clair { color: var(--pg-ink); }
.pg-bloc-fond--clair h2:not(:is(.pg-fiche, .pg-formule, .pg-parcours, .pg-carte-pastel, .pg-membre, .pg-pilier, .pg-volet, .pg-brunch, .pg-encart, .pg-saison, .pg-moment, .pg-cloture, .pg-tout-compris, .pg-box) *) {
  color: var(--pg-charte-marron);
}
.pg-bloc-fond--clair :is(.pg-body-l, .pg-small, p):not(:is(.pg-fiche, .pg-formule, .pg-parcours, .pg-carte-pastel, .pg-membre, .pg-pilier, .pg-volet, .pg-brunch, .pg-encart, .pg-saison, .pg-moment, .pg-cloture, .pg-tout-compris, .pg-box, .pg-faits, .pg-faq, .pg-form, .pg-seance, .pg-badge, .pg-surtitre) *) {
  color: inherit;
}

/* Fond de page sombre : même bascule, pour les blocs TRANSPARENTS seulement —
   ceux qui ont un aplat d'origine (bonbon, prune, lilas, à-emporter) ou leur
   propre fond gardent leur encre. */
.pg-page-sombre :is(.pg-section, .pg-reassurance):not(.pg-bloc-fond, .pg-section--cream, .pg-section--plum, .pg-section--lilac, .pg-emporter) :is(h1, h2, h3, .pg-body-l, .pg-small, p, li):not(:is(.pg-fiche, .pg-formule, .pg-parcours, .pg-carte-pastel, .pg-membre, .pg-pilier, .pg-volet, .pg-brunch, .pg-encart, .pg-saison, .pg-moment, .pg-cloture, .pg-tout-compris, .pg-box, .pg-faits, .pg-faq, .pg-form, .pg-seance, .pg-badge, .pg-surtitre, .pg-btn, .pg-table) *) {
  color: var(--pg-encre-claire);
}

/* ===========================================================================
   35 ter. L'ENCADRÉ D'UN BLOC  (21/10, « Couleur de l'encadré »)

   Les blocs qui portent un encadré en dur — newsletter, fin de page, brunch
   box, « Tout compris », encarts, option de saison — prennent la couleur
   choisie, et leur texte l'encre calculée en PHP (`pg_bloc_attrs()`).
   🔑 `:where()` partout : la spécificité reste minimale, si bien qu'une
      « Couleur des textes » choisie pour le bloc (§35 bis, plus bas)
      l'emporte toujours sur l'encre automatique de l'encadré.
   =========================================================================== */
.pg-bloc-carte :where(.pg-newsletter, .pg-cloture, .pg-box, .pg-encart, .pg-tout-compris, .pg-saison-bloc) {
  background: var(--pg-bloc-carte) !important;
}
.pg-bloc-carte :where(.pg-newsletter, .pg-cloture, .pg-box, .pg-encart, .pg-tout-compris, .pg-saison-bloc) :where(h2, h3, p, li):where(:not(.pg-badge, .pg-surtitre, .pg-btn *, .pg-badge *, .pg-form *, .frm-fluent-form *)) {
  color: var(--pg-bloc-carte-encre) !important;
}

/* ===========================================================================
   35 bis. COULEURS DU TEXTE PAR BLOC ET PAR CARTE  (21/10)

   🔑 Choisies par la cliente : un bloc dans « Fonds et couleurs des blocs »
      (`pg_bloc_attrs()`, classes `pg-bloc-titres` / `pg-bloc-textes`), une
      carte sur sa fiche (`pg_carte_couleurs()`, variables `--pg-c-*`).
   ⚠️ `!important` ASSUMÉ, et seulement ici : un choix explicite de la cliente
      doit l'emporter sur toutes les règles d'encre ci-dessus (bascule
      clair/sombre, pages à fond d'image…), dont la spécificité varie.
   ⛔ Les cartes, boutons, pastilles, surtitres et formulaires d'un bloc ne
      prennent PAS la couleur du bloc : ils ont leur fond et leurs réglages.
   =========================================================================== */
.pg-bloc-titres :is(h1, h2, h3, h4):not(:is(.pg-fiche, .pg-formule, .pg-parcours, .pg-carte-pastel, .pg-membre, .pg-pilier, .pg-volet, .pg-brunch, .pg-moment, .pg-saison, .pg-seance, .pg-form) *) {
  color: var(--pg-bloc-titres) !important;
}
.pg-bloc-textes :is(p, li, dt, dd, summary, td, th, figcaption):not(.pg-badge, .pg-surtitre, .pg-btn):not(:is(.pg-fiche, .pg-formule, .pg-parcours, .pg-carte-pastel, .pg-membre, .pg-pilier, .pg-volet, .pg-brunch, .pg-moment, .pg-saison, .pg-seance, .pg-form, .pg-badge, .pg-btn) *) {
  color: var(--pg-bloc-textes) !important;
}

/* Les cartes : nom, punchline, texte. */
[style*="--pg-c-nom:"] :is(h2, h3, .pg-prenom) { color: var(--pg-c-nom) !important; }
[style*="--pg-c-punch:"] .pg-punchline { color: var(--pg-c-punch) !important; }
[style*="--pg-c-texte:"] :is(p, li):not(.pg-punchline, .pg-badge, .pg-surtitre, .pg-badge-complet):not(:is(.pg-btn, .pg-badge) *) {
  color: var(--pg-c-texte) !important;
}

/* ===========================================================================
   36. CARTE EN PDF — bouton de téléchargement de Notre carte  (02/11)

   N'existe que si un PDF est déposé (onglets « Carte en PDF » de Notre carte
   et « Ateliers en PDF » des Ateliers, 05/11). Ni format ni poids depuis le
   05/11 : `pg_bouton_pdf()`.
   =========================================================================== */
.pg-hero-simple > .pg-boutons,
.pg-at-chapeau + .pg-boutons { margin-top: 24px; }