/*
Theme Name: Maître Pierre
Theme URI: https://maitrepierre.com
Author: Groupe MAS
Description: Thème sur mesure pour Maître Pierre — Tartes Fines & Cie
Version: 1.0.1
Text Domain: maitre-pierre
*/

/* ============================================================
   VARIABLES — Palette BRAND.md
   ============================================================ */
:root {
  /* Couleurs */
  --color-primary:    #CBBBA0; /* Beige doré */
  --color-bg:         #FAF7F2; /* Crème ivoire — fond principal */
  --color-bg-alt:     #E5DCCD; /* Beige grège apparent — motifs trame à 45% opacité sur fond crème */
  --color-text:       #2C1F14; /* Brun profond — texte principal */
  --color-text-light: #6B4F35; /* Brun moyen — texte secondaire */
  --color-accent:     #B8714E; /* Terracotta doux — traits, bordures, aplats, anneau de focus */
  --color-accent-text:#8F4E32; /* Terracotta assombri — TEXTE uniquement. 5,95:1 sur crème, 4,68:1 sur beige grège.
                                  #B8714E ne tient que 3,57:1 sur crème : illisible en corps de texte. */
  --color-muted:      #D4CFC8; /* Gris lin */

  /* Typographie — Système 1 Institutionnel */
  --font-display:  'Playfair Display', Georgia, serif;
  --font-body:     'Inter', system-ui, sans-serif;
  --font-label:    'Cormorant Garamond', Georgia, serif;

  /* Typographie — Système 2 Produit */
  --font-hero:     'Assistant', system-ui, sans-serif;
  --font-script:   'Grand Hotel', cursive;

  /* Espacement */
  --spacing-xs:  0.5rem;
  --spacing-sm:  1rem;
  --spacing-md:  1.5rem;
  --spacing-lg:  2.5rem;
  --spacing-xl:  4rem;
  --spacing-2xl: 6rem;

  /* Typographie globale */
  --tracking-tight: -0.03em;
  --lh-body: 1.7;

  /* Transitions */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --duration: 280ms;
}

/* ============================================================
   RESET & BASE
   ============================================================ */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
}

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

a {
  color: inherit;
  text-decoration: none;
}

ul {
  list-style: none;
}

/* ============================================================
   FOCUS CLAVIER — plancher global
   Un seul anneau, partout. Les composants peuvent le renforcer,
   jamais le supprimer : un « outline: none » sans remplacement rend
   la navigation au clavier impossible à suivre.
   ============================================================ */
:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* ============================================================
   TYPOGRAPHIE GLOBALE
   ============================================================ */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: var(--tracking-tight);
  line-height: 1.2;
  color: var(--color-text);
}

h1 { font-size: clamp(2rem, 5vw, 3.5rem); }
h2 { font-size: clamp(1.5rem, 3.5vw, 2.5rem); }
h3 { font-size: clamp(1.25rem, 2.5vw, 1.75rem); }

p {
  max-width: 68ch;
  line-height: var(--lh-body);
}

/* ============================================================
   UTILITAIRES
   ============================================================ */
.container {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: var(--spacing-md);
}

/* ------------------------------------------------------------
   Pas de cursive en anglais.

   Grand Hotel dessine des accroches françaises courtes ; sur des phrases
   anglaises plus longues elle devient illisible et sonne faux. On redéfinit
   le seul jeton, pas les sept règles qui l'utilisent : aucune d'elles n'est
   touchée, et le français ne bouge pas.

   html[lang^="en"] (0,1,1) l'emporte sur :root (0,1,0) — le jeton anglais
   gagne sans !important. Seule la fonte change : tailles, marges et
   interlignes restent ceux d'origine.

   Le remplaçant est Playfair Display en italique, et le choix est
   d'abord économique. Inter, employée d'abord, était lisible mais plate.
   Cormorant Garamond conviendrait au registre, mais elle coûte 77 Ko
   pour trois usages dans tout le thème — une légende de photo, une ligne
   « mis à jour le », la baseline du pied de page. L'employer ici en
   aurait ajouté un quatrième et rendu cette famille plus difficile à
   retirer.

   Playfair est déjà chargée, et sa coupe italique (1,400) déjà employée
   pour une citation dans company.css:89 — même registre, même intention,
   zéro octet supplémentaire.

   Le font-style est explicite parce que les sept règles d'origine ne le
   déclarent pas. Cette seconde règle ajoute une déclaration, elle n'en
   modifie aucune : tailles et interlignes restent ceux d'origine.
   ------------------------------------------------------------ */
html[lang^="en"] {
  --font-script: var(--font-display);
}

html[lang^="en"] .hero__script,
html[lang^="en"] .section-products__script,
html[lang^="en"] .section-moments__script,
html[lang^="en"] .page-hero__script,
html[lang^="en"] .page-section__script,
html[lang^="en"] .page-inline__script,
html[lang^="en"] .product-line__script {
  font-style: italic;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* Les images responsives sont enveloppées dans un élément picture.
   display: contents supprime la boîte de l'enveloppe : l'image reste, pour
   la mise en page, l'enfant direct de son conteneur d'origine. Sans cette
   règle, une image en height: 100% se résoudrait contre l'enveloppe et non
   contre la figure qui la contient. */
picture {
  display: contents;
}

/* Lien d'évitement : masqué comme .sr-only, mais rendu visible dès qu'il
   reçoit le focus au clavier. Sans ces règles il reste focusable et
   invisible, ce qui est pire que son absence. */
.skip-link:focus-visible {
  position: fixed;
  top: var(--spacing-sm);
  left: var(--spacing-sm);
  z-index: 1100;

  width: auto;
  height: auto;
  margin: 0;
  padding: 0.75rem 1.25rem;
  overflow: visible;
  clip: auto;

  font-family: var(--font-body);
  font-size: 0.875rem;
  color: var(--color-bg);
  text-decoration: none;

  background: var(--color-text);
  border-radius: 2px;
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* ============================================================
   BOUTON CTA
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.75rem;
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1.5px solid var(--color-primary);
  border-radius: 4px;
  background: transparent;
  color: var(--color-text);
  cursor: pointer;
  /* --btn-fill : la couleur que le disque apporte au survol. Chaque variante
     la redéfinit ci-dessous avec exactement le fond que son :hover posait
     auparavant — seule la MANIÈRE dont la couleur arrive change, pas la
     couleur. La courbe et la demi-seconde viennent du composant d'origine.
     background ne se transitionne plus : il ne change plus. */
  --btn-fill: var(--color-primary);
  --btn-ease: cubic-bezier(0.16, 1, 0.3, 1);
  transition: color 300ms var(--btn-ease),
              border-color 500ms var(--btn-ease);
}

/* ------------------------------------------------------------
   DISQUE D'ORIGINE
   Un disque naît là où le pointeur est entré et grandit jusqu'à couvrir le
   bouton. Le bouton à flux est exclu : il a son propre disque et ses propres
   pseudo-éléments — les flèches — qui se percuteraient avec celui-ci.

   z-index: -1 sous isolation: isolate — dans le contexte d'empilement du
   bouton, un enfant à z-index négatif se peint AU-DESSUS du fond et de la
   bordure du bouton, mais SOUS son texte. Le libellé reste donc lisible sans
   qu'on ait à l'envelopper dans un span : aucun gabarit n'est touché.

   Sans JavaScript, les trois valeurs de repli s'appliquent : un disque centré
   de 250 % de la largeur, qui couvre n'importe quel bouton du site. Le survol
   fonctionne donc entièrement sans script — le script ne fait que déplacer
   l'origine sous le pointeur.
   ------------------------------------------------------------ */
.btn:not(.btn--flow) {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.btn:not(.btn--flow)::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: var(--btn-ox, 50%);
  top: var(--btn-oy, 50%);
  width: var(--btn-size, 250%);
  /* Une seule dimension animée : la hauteur suit, et c'est l'échelle qui
     bouge, pas la taille — le navigateur compose au lieu de recalculer. */
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--btn-fill);
  transform: translate(-50%, -50%) scale(0);
  transition: transform 500ms var(--btn-ease);
}

.btn:not(.btn--flow):hover::before,
.btn:not(.btn--flow):focus-visible::before {
  transform: translate(-50%, -50%) scale(1);
}

.btn:hover,
.btn:focus-visible {
  color: var(--color-bg);
}

/* L'enfoncement du composant d'origine. L'opacité qui tenait ce rôle est
   neutralisée : elle aurait fait pâlir le disque en même temps. */
.btn:not(.btn--flow):active {
  transform: scale(0.985);
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .btn:not(.btn--flow),
  .btn:not(.btn--flow)::before {
    transition: none;
  }

  .btn:not(.btn--flow):active { transform: none; }
}

.btn--primary {
  --btn-fill: var(--color-accent);
  background: #2c1f14;
  color: #f7f3ee;
  border-color: #2c1f14;
}

.btn--primary:hover,
.btn--primary:focus-visible {
  border-color: var(--color-accent);
  color: #f7f3ee;
}

.btn--filled {
  --btn-fill: var(--color-accent);
  background: var(--color-text);
  color: var(--color-bg);
  border-color: var(--color-text);
}

.btn--filled:hover,
.btn--filled:focus-visible {
  border-color: var(--color-accent);
  color: var(--color-bg);
}

.page-section--dark .btn {
  --btn-fill: var(--color-primary);
  background: var(--color-bg);
  border-color: var(--color-bg);
  color: var(--color-text);
}

.page-section--dark .btn:hover,
.page-section--dark .btn:focus-visible {
  border-color: var(--color-primary);
  color: var(--color-text);
}

.btn--gold {
  --btn-fill: #D4A417;
  background: #EBB928;
  border-color: #EBB928;
  color: var(--color-text);
}

.btn--gold:hover,
.btn--gold:focus-visible {
  border-color: #D4A417;
  color: var(--color-text);
}

.btn--beige {
  --btn-fill: var(--color-accent);
  background: #2c1f14;
  border-color: #2c1f14;
  color: #f7f3ee;
}

.btn--beige:hover,
.btn--beige:focus-visible {
  border-color: var(--color-accent);
  color: #f7f3ee;
}

/* ============================================================
   BOUTON À FLUX — .btn--flow
   Au repos : contour en pilule, flèche à droite, libellé décalé à gauche.
   Au survol : un disque brun se déploie du centre et remplit le bouton, la
   pilule se resserre en rectangle arrondi, le contour s'efface, la flèche
   de droite sort par la droite pendant qu'une seconde entre par la gauche,
   et le libellé glisse à sa rencontre.
   Les trois courbes viennent du composant d'origine, y compris celle des
   flèches qui dépasse volontairement sa cible (1.56) : ce léger rebond est
   le caractère même du bouton, pas un accident.
   Rien n'est masqué au repos : le libellé est du texte, lisible et
   sélectionnable, quelle que soit l'issue des transitions.
   ============================================================ */
.btn--flow {
  --flow-shell:  cubic-bezier(0.23, 1, 0.32, 1);
  --flow-arrow:  cubic-bezier(0.34, 1.56, 0.64, 1);
  --flow-circle: cubic-bezier(0.19, 1, 0.22, 1);

  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  isolation: isolate;
  /* 2 rem au lieu des 1,75 rem communs : les flèches occupent les deux
     extrémités, le libellé a besoin de la place qu'elles prennent. */
  padding-inline: 2rem;
  border-radius: 100px;
  /* Pas de border-color ici : le contour est celui de .btn, donc le beige doré
     --color-primary, comme tous les autres boutons du site. Le bouton à flux
     portait un contour brun à 55 % qui lui était propre et le faisait détonner
     à côté de ses voisins ; la ligne a été retirée plutôt que réécrite, c'est
     l'exception qui disparaît.
     Le prix est connu et assumé : ce contour brun tenait 3,62:1 sur crème,
     là où le beige doré n'en donne que 1,76 (1,39 sur les sections grège), en
     dessous des 3:1 que la WCAG 1.4.11 demande à la limite visible d'une
     commande. C'est la valeur de TOUTE la famille .btn, pas une régression
     propre à ce bouton : le relever suppose de changer le jeton, donc les
     boutons de tout le site d'un coup. */
  background: transparent;
  color: var(--color-text);
  transition: border-color 600ms var(--flow-shell),
              color 600ms var(--flow-shell),
              border-radius 600ms var(--flow-shell),
              transform 200ms var(--ease-out);
}

/* Les deux flèches sont un même dessin masqué : la couleur vient de
   background-color, donc elle se transitionne comme n'importe quelle autre. */
.btn--flow::before,
.btn--flow::after {
  content: "";
  position: absolute;
  top: 50%;
  z-index: 2;
  width: 1rem;
  height: 1rem;
  margin-top: -0.5rem;
  background-color: var(--color-text);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M12 5l7 7-7 7'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M12 5l7 7-7 7'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: left 800ms var(--flow-arrow),
              right 800ms var(--flow-arrow),
              background-color 800ms var(--flow-arrow);
}

.btn--flow::before { left: -25%; }
.btn--flow::after  { right: 1rem; }

/* Le disque : une seule dimension animée, la hauteur suit par aspect-ratio.
   Exprimé en pourcentage de la largeur du bouton, il couvre aussi bien un
   libellé court qu'un libellé long — là où les 220 px fixes de l'original
   auraient laissé les angles découverts sur un bouton large. */
.btn__flow-fill {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 0;
  width: 250%;
  aspect-ratio: 1;
  /* Le disque garde sa taille finale et c'est son échelle qui bouge. Animer
     la largeur, comme le fait l'original, ferait recalculer la mise en page
     à chaque image ; une mise à l'échelle est composée par le GPU et donne
     exactement le même mouvement. */
  transform: translate(-50%, -50%) scale(0);
  border-radius: 50%;
  /* Terracotta, le même jeton que la coche des cases à cocher. Ce n'est pas
     un nouvel aplat au sens de la Règle du Trait : c'est la Règle de la
     Bascule, qui veut qu'un bouton soit brun au repos et vire au terracotta
     sous un état — .btn--primary, .btn--filled et .btn--beige le font déjà.
     Le libellé et les flèches y restent crème, ce qui donne 3,57:1. C'est
     exactement ce que .btn--filled:hover affiche depuis toujours ; le passage
     à --color-accent-text (#8F4E32) le porterait à 5,95:1 en gardant le même
     orange, mais il vaut mieux le décider pour les quatre variantes à la fois
     que pour celle-ci seule. */
  background: var(--color-accent);
  opacity: 0;
  transition: transform 800ms var(--flow-circle),
              opacity 800ms var(--flow-circle);
}

.btn__flow-label {
  position: relative;
  z-index: 1;
  transform: translateX(-0.75rem);
  transition: transform 800ms var(--ease-out);
}

/* .btn:hover impose un fond plein à tous les boutons : il est neutralisé
   ici, c'est le disque qui remplit. */
.btn--flow:hover,
.btn--flow:focus-visible {
  background: transparent;
  border-color: transparent;
  border-radius: 12px;
  color: var(--color-bg);
}

.btn--flow:hover .btn__flow-fill,
.btn--flow:focus-visible .btn__flow-fill {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
}

.btn--flow:hover .btn__flow-label,
.btn--flow:focus-visible .btn__flow-label {
  transform: translateX(0.75rem);
}

.btn--flow:hover::before,
.btn--flow:focus-visible::before {
  left: 1rem;
  background-color: var(--color-bg);
}

.btn--flow:hover::after,
.btn--flow:focus-visible::after {
  right: -25%;
  background-color: var(--color-bg);
}

.btn--flow:active {
  transform: scale(0.95);
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .btn--flow,
  .btn--flow::before,
  .btn--flow::after,
  .btn__flow-fill,
  .btn__flow-label {
    transition: none;
  }

  .btn--flow:active { transform: none; }
}

/* ============================================================
   FORMULAIRES — états de validation (communs à tous les formulaires)
   ============================================================ */
.form-field.is-error > label {
  color: #c53030;
}

.form-field.is-error input:not([type="checkbox"]),
.form-field.is-error select,
.form-field.is-error textarea {
  border-color: #e05252;
  background-color: #fff8f8;
}

.form-field--checkbox.is-error > label {
  color: #c53030;
}

.form-notice {
  padding: var(--spacing-sm) var(--spacing-md);
  margin-bottom: var(--spacing-md);
  font-size: 0.875rem;
  border-left: 3px solid;
  line-height: 1.6;
}

.form-notice--success {
  background: #f0faf5;
  border-color: #2d9e6b;
  color: #1a6b47;
}

.form-notice--error {
  background: #FFF8F8;
  border-color: #e05252;
  color: #C53030;
}

/* ============================================================
   MOTIF ÉPIS (trame de fond ton sur ton)
   ============================================================ */
.bg-epis {
  background-color: var(--color-text);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cpath d='M0 20 L10 10 L20 20 L10 30 Z M20 20 L30 10 L40 20 L30 30 Z' fill='none' stroke='%23CBBBA0' stroke-width='0.6' opacity='0.18'/%3E%3C/svg%3E");
}

/* ============================================================
   MOTIF TRESSÉ
   ============================================================ */
.bg-tresse {
  background-color: #F5F0E8;
  background-image: url("assets/images-opt/Fond/A4-vertical-grege.png");
  background-repeat: repeat;
  background-size: 700px auto;
}

.bg-epis--light {
  background-color: var(--color-bg-alt);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cpath d='M0 20 L10 10 L20 20 L10 30 Z M20 20 L30 10 L40 20 L30 30 Z' fill='none' stroke='%23CBBBA0' stroke-width='0.6' opacity='0.35'/%3E%3C/svg%3E");
}

.bg-epis--transparent {
  position: relative;
  background-color: #E5DCCD;
  isolation: isolate;
}

.bg-epis--transparent::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("assets/images-opt/Fond/A4-vertical-grege.png");
  background-repeat: repeat;
  background-size: 700px auto;
  filter: invert(1) grayscale(1) brightness(3) contrast(10);
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 0;
}

.bg-epis--transparent .container {
  position: relative;
  z-index: 1;
}

.bg-epis--cream {
  position: relative;
  background-color: #faf7f2;
  isolation: isolate;
}

.bg-epis--cream::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("assets/images-opt/Fond/A4-vertical-grege.png");
  background-repeat: repeat;
  background-size: 700px auto;
  mix-blend-mode: multiply;
  opacity: 0.6;
  pointer-events: none;
  z-index: 0;
}

.bg-epis--cream .container {
  position: relative;
  z-index: 1;
}

.bg-epis--beige {
  position: relative;
  background-color: #e5dccd;
  isolation: isolate;
}

.bg-epis--beige::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("assets/images-opt/Fond/A4-vertical-grege.png");
  background-repeat: repeat;
  background-size: 700px auto;
  filter: invert(1) grayscale(1) brightness(3) contrast(10);
  mix-blend-mode: screen;
  opacity: 0.75;
  pointer-events: none;
  z-index: 0;
}

.bg-epis--beige .container {
  position: relative;
  z-index: 1;
}

.page-cta.bg-epis--beige::before,
.page-cta.bg-epis--cream::before,
.page-cta.bg-epis--transparent::before {
  top: auto;
  height: calc(var(--spacing-2xl) + 1.5rem);
}

/* Section #faf7f2, trame ancrée en bas : fond #e5dccd + motifs #faf7f2 */
.bg-epis--beige-trame {
  position: relative;
  background-color: #faf7f2;
  isolation: isolate;
}

/* Fond beige de la bande (sans filter pour préserver la couleur) */
.bg-epis--beige-trame::before {
  content: '';
  position: absolute;
  top: auto;
  bottom: 0;
  left: 0;
  right: 0;
  height: calc(var(--spacing-2xl) + 1.5rem);
  background-color: #e5dccd;
  pointer-events: none;
}

/* Motifs PNG en screen sur le fond beige → motifs ~#faf7f2 */
.bg-epis--beige-trame::after {
  content: '';
  position: absolute;
  top: auto;
  bottom: 0;
  left: 0;
  right: 0;
  height: calc(var(--spacing-2xl) + 1.5rem);
  background-image: url("assets/images-opt/Fond/A4-vertical-grege.png");
  background-repeat: repeat;
  background-size: 700px auto;
  filter: invert(1) grayscale(1) brightness(3) contrast(10);
  mix-blend-mode: screen;
  opacity: 0.75;
  pointer-events: none;
}

.bg-epis--beige-trame .container {
  position: relative;
  z-index: 1;
}

/* ============================================================
   APPARITION AU DÉFILEMENT — utilitaire .js-reveal
   L'élément est masqué au repos et révélé par main.js quand il entre
   dans le champ de vision. Deux replis le rendent visible quoi qu'il
   arrive : l'absence de JavaScript (.no-js, ci-dessous) et la demande de
   mouvement réduit (media query plus bas).
   ============================================================ */
.js-reveal {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out);
}

.js-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Sans JavaScript, personne ne viendra poser .is-visible : le masquage
   serait définitif. La classe .no-js est retirée dans le <head> avant le
   premier rendu, donc cette règle ne s'applique jamais quand le script
   tourne — l'affichage normal est inchangé. */
.no-js .js-reveal {
  opacity: 1;
  transform: none;
  transition: none;
}

@media (prefers-reduced-motion: reduce) {
  .js-reveal {
    transition: none;
    opacity: 1;
    transform: none;
  }
}

/* Le même mouvement, en images clés.
   Certains composants déclarent leur propre raccourci `transition` pour leur
   survol — .post-card et .stat-item aujourd'hui. À spécificité égale et
   chargé plus tard, ce raccourci l'emporte sur celui de .js-reveal ; opacity
   n'y figurant pas, elle bascule d'un coup et les délais de cascade se
   retrouvent à retarder le SURVOL au lieu de l'apparition. Le défaut avait
   été trouvé sur les cartes d'actualités le 2026-08-10.
   Une @keyframes ne passe pas par transition-property et échappe au conflit.
   Elle vit ici, et non dans la feuille d'une page, parce que deux feuilles
   l'utilisent : une seule source, aucune dérive possible entre les deux.
   Les composants concernés l'appellent avec animation-fill-mode: backwards —
   et non both — pour qu'après coup leurs valeurs déclarées, donc le survol,
   reprennent la main. */
@keyframes mp-card-reveal {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   MARKER HIGHLIGHT — surlignage animé (span.marker-wrap)
   Chargé globalement (utilisé home + pages entreprise).
   ============================================================ */
.marker-wrap {
  background-image: linear-gradient(rgba(235, 185, 40, 0.55), rgba(235, 185, 40, 0.55));
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 0% 85%;
  padding: 0.06em 0.14em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  transition: background-size 0.7s var(--ease-out);
}

.marker-wrap.is-active {
  background-size: 100% 85%;
}

@media (prefers-reduced-motion: reduce) {
  .marker-wrap {
    transition: none;
    background-size: 100% 85%;
  }
}