/* ================================================================
   MEV 2.0 — HERO ENGINE · feuille unique · v1 · 2026-08-23
   Un seul moteur. Aucune valeur page-spécifique ici.
   Toutes les données de page arrivent par attributs data-* .
   ================================================================ */

.mev-hero,.mev-hero *{box-sizing:border-box}

.mev-hero{
  /* --- jetons ------------------------------------------------- */
  --mev-beige-01:#F9F9EF;
  --mev-beige-02:#EFF0E9;
  --mev-rouge:#FD0600;
  --mev-rouge-2:#F85453;
  --mev-noir:#000000;

  /* --- géométrie ---------------------------------------------- */
  /* Décalage vertical au-dessus du hero. Le JavaScript le mesure et l'écrase
     à l'exécution — barre d'admin comprise. Ces valeurs ne sont que le repli
     sans JavaScript. Spécification arrêtée le 23 août au soir : 78 px en desktop,
     64 px en mobile. Le seuil suit la bascule de navigation GeneratePress. */
  --mev-header:78px;
  --mev-m-fill:.92;           /* part de la hauteur de scène occupée par le signe */
  --mev-m-cap:72vw;           /* garde-fou du signe encadré, emprise « A » */
  /* Emprise « B », par défaut : la boîte du signe est déduite de celle du
     lockup, de sorte que le glyphe M ait exactement la même hauteur pendant
     la mutation et après résolution dès que la largeur commande.
     0,4603 = (1080/1162,79) ÷ (1950/966,49), rapport des deux emboîtements. */
  --mev-state-cap:calc(var(--mev-lockup-cap) * 0.4603);
  --mev-lockup-cap:88vw;      /* garde-fou du lockup, qui est large */
  --mev-name-fill:.92;        /* part de la largeur occupée par la ligne la plus longue */
  --mev-secondary-em:.4;      /* repli sans JavaScript de la mention secondaire */
  --mev-secondary-fit:1;      /* 1 : la mention se cale sur la largeur du nom · 0 : corps fixe */
  --mev-resolve-k:1;          /* échelle du lockup relativement à la mutation */
  --mev-grid:1240px;
  --mev-gap:44px;             /* rythme de sortie desktop */
  --mev-liseré:1px;              /* charte §8.2 : 1 px comme point de départ global */
  /* Règle globale CURRENT : le filet interne entre la scène haute et la bande
     basse du Hero est noir, car les deux appartiennent au même composant.
     Le filet de sortie du Hero vers la page reste rouge : changement de régime. */
  --mev-liseré-entree:var(--mev-noir);
  --mev-liseré-sortie:var(--mev-rouge);

  /* --- moteur d'animation -------------------------------------- */
  --mev-fade:160ms;

  /* --- typographie -------------------------------------------- */
  --mev-font-title:Karrik,"Karrik Regular",Georgia,serif;
  --mev-font-body:"General Sans",-apple-system,"Helvetica Neue",Arial,sans-serif;

  position:relative;
  display:flex;
  flex-direction:column;
  min-height:calc(100svh - var(--mev-header));
  background:var(--mev-beige-01);
  color:var(--mev-noir);
  font-family:var(--mev-font-body);
  overflow:hidden;
}

/* ---------------- scène ---------------------------------------- */
.mev-hero__stage{
  position:relative;
  flex:1 1 auto;
  min-height:0;
  display:flex;
  align-items:center;
  justify-content:center;
}
.mev-hero__stage>*{position:absolute}

/* Le signe et le lockup occupent une boîte, et le SVG s'y inscrit sans
   jamais la déborder : preserveAspectRatio par défaut. La boîte est bornée
   en hauteur par la scène et en largeur par l'écran. Aucun débordement
   possible, quel que soit le rapport de forme du contenu. */
.mev-hero__state{
  width:min(var(--mev-state-cap),var(--mev-m-cap));
  height:calc(100% * var(--mev-m-fill));
  opacity:0;
}
.mev-hero__state.is-on{opacity:1}
.mev-hero__state svg{display:block;width:100%;height:100%}

/* ---------------- résolution ----------------------------------- */
.mev-hero__resolve{opacity:1;transition:opacity var(--mev-fade) ease}
.mev-hero__resolve--lockup{
  /* Le lockup est 1,77 fois plus large que haut. Une garde en hauteur seule
     le laisse sortir de l'écran en tablette et en mobile : la largeur commande. */
  width:var(--mev-lockup-cap);
  height:calc(100% * var(--mev-m-fill) * var(--mev-resolve-k));
}
.mev-hero__resolve--lockup svg{display:block;width:100%;height:100%}

.mev-hero__resolve--name{
  width:92vw;
  display:flex;
  align-items:center;
  justify-content:center;
}
.mev-hero__name{
  font-family:var(--mev-font-title);
  font-weight:400;                 /* Karrik n'a pas de face 700 : jamais de gras synthétique */
  line-height:.95;
  letter-spacing:-.03em;
  text-align:center;
  color:var(--mev-rouge);
}
.mev-hero__line{
  display:block;
  white-space:nowrap;
  /* Largeur intrinsèque : la ligne mesure le texte, pas le conteneur.
     Sans cela, l'ajustement se mesure lui-même et diverge. */
  width:max-content;
  margin-inline:auto;
}
.mev-hero__secondary{
  display:block;
  width:max-content;
  margin-inline:auto;
  color:var(--mev-rouge);
  font-size:calc(var(--mev-secondary-em,.4) * 1em);
  letter-spacing:-.01em;
  margin-top:.3em;
  white-space:nowrap;
}
.mev-hero__name--d{font-size:calc(var(--mev-fd) * 1vw)}
.mev-hero__name--m{font-size:calc(var(--mev-fm) * 1vw);display:none}
@media (max-width:720px){
  .mev-hero__name--d{display:none}
  .mev-hero__name--m{display:block}
}

/* ---------------- bande de sortie ------------------------------ */
.mev-hero__band{
  flex:0 0 auto;
  width:100%;
  /* La gouttière horizontale n'appartient plus à la bande : elle est portée
     par le conteneur intérieur, qui consomme le contrat éditorial de la page.
     Un padding et une largeur maximale sur le même élément décalent l'axe. */
  padding-block:var(--mev-gap);    /* charte §13 : les deux GAP sont égaux */
  padding-inline:0;
  background:linear-gradient(180deg,
      var(--mev-beige-01) 0%,var(--mev-beige-02) 50%,var(--mev-beige-01) 100%);
  border-top:var(--mev-liseré) solid var(--mev-liseré-entree);
  border-bottom:var(--mev-liseré) solid var(--mev-liseré-sortie);
}
/* Contrat d'axe éditorial. Le moteur ne déclare pas ces deux variables :
   il les hérite du layout de page ou de famille. Sans contrat déclaré, le
   repli reproduit exactement la géométrie antérieure — 1240 px et 5vw. */
.mev-hero__inner{
  width:min(
    var(--mev-editorial-max, var(--mev-grid)),
    calc(100% - (2 * var(--mev-gutter, 5vw)))
  );
  max-width:none;
  margin-inline:auto;
}
.mev-hero__h1{
  font-family:var(--mev-font-title);
  font-weight:400;
  font-size:clamp(24px,3.5vw,54px);
  line-height:1.05;
  letter-spacing:-.022em;
  margin:0;
}
.mev-hero__h1 em{font-style:normal;color:inherit}  /* aucun mot en rouge dans le hero */
.mev-hero__hline,.mev-hero__cline{display:inline}
.mev-hero.is-coupures-partout .mev-hero__hline,
.mev-hero.is-coupures-partout .mev-hero__cline{display:block}
@media (max-width:1024px){
  .mev-hero__hline,.mev-hero__cline{display:block}
  .mev-hero__hline+.mev-hero__hline,
  .mev-hero__cline+.mev-hero__cline{text-indent:0}
}
.mev-hero__canon{
  font-size:clamp(15px,1.3vw,20px);
  line-height:1.32;
  opacity:.82;
  margin:var(--mev-gap) 0 0;
  /* mesure de lecture — charte §6.3 : 800 à 1000 px */
  max-width:min(62ch,1000px);
}
.mev-hero__cta{
  display:inline-block;
  margin-top:var(--mev-gap);
  padding:11px 19px;
  font-size:13px;
  font-weight:400;
  border:2px solid var(--mev-noir);
  text-decoration:none;
  color:var(--mev-noir);
  background:transparent;
}
.mev-hero__cta:hover,
.mev-hero__cta:focus-visible{background:var(--mev-noir);color:var(--mev-beige-01)}

@media (max-width:1024px){
  .mev-hero{--mev-gap:33px;--mev-lockup-cap:92vw}
}
@media (max-width:768px){
  .mev-hero{--mev-header:64px;--mev-gutter:16px;--mev-lockup-cap:calc(100vw - 32px)}

  /* Composition mobile CURRENT : le Hero bas partage un axe gauche unique
     avec le système éditorial de la page. H1, phrase canonique et CTA partent
     du même bord gauche que la première étiquette éditoriale ; le CTA reste
     l'unique action mobile alignée à gauche. Le conteneur conserve la largeur
     éditoriale mobile commune au lieu de se contracter autour de son contenu. */
  .mev-hero__inner{
    display:grid;
    grid-template-columns:minmax(0,1fr);
    justify-content:stretch;
  }
  .mev-hero__h1,
  .mev-hero__canon,
  .mev-hero__cta{justify-self:start;text-align:left}
  .mev-hero__canon{max-width:none}
}

@media (max-width:720px){
  .mev-hero{--mev-m-cap:84vw}
}

/* Régime des fenêtres basses — téléphone en paysage, portable très bas.
   La règle est indexée sur la hauteur de fenêtre, non sur un appareil :
   elle vaut partout où la place manque, et nulle part ailleurs.
   Sans elle, la bande consomme toute la hauteur et la scène tombe à zéro. */
@media (max-height:540px){
  .mev-hero{--mev-gap:22px}
  .mev-hero__h1{font-size:clamp(19px,2.6vw,28px)}
  .mev-hero__canon{font-size:14px;line-height:1.28;margin-top:calc(var(--mev-gap) * .8)}
  .mev-hero__cta{padding:8px 14px;font-size:12px}
}

/* ---------------- états du moteur ------------------------------
   Sans JS  : .mev-hero--js absent → résolution visible d'emblée.
   Avec JS  : résolution masquée, sauf mode statique, reduced-motion
              ou filet de sécurité déclenché.
   --------------------------------------------------------------- */
.mev-hero--js .mev-hero__resolve{opacity:0}
.mev-hero--js .mev-hero__resolve.is-on{opacity:1}
.mev-hero[data-mev-mode="static"] .mev-hero__resolve{opacity:1}
.mev-hero.is-failsafe .mev-hero__resolve{opacity:1}

@media (prefers-reduced-motion:reduce){
  .mev-hero__state{opacity:0!important}
  .mev-hero__resolve{opacity:1!important;transition:none}
}

/* ================================================================
   EQ38 — HERO GLOBAL VALIDÉ 2026-09-07
   M + nom de page rouge + H1. Aucun replay, aucun CTA, aucun canon,
   aucune flèche. M et textes figés. Seul le liseret rouge s'anime.
   Le groupe est centré verticalement dans une bande 38svh et commence
   sur le même axe que la colonne éditoriale 880 px.
   ================================================================ */
.mev-hero.mev-hero--eq38{
  --mev-eq-copy:880px;
  --mev-eq-gutter:24px;
  --mev-eq-m:min(165px,12vw);
  --mev-eq-gap:clamp(18px,1.4vw,24px);
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:clamp(315px,38svh,400px);
  min-height:0;
  overflow:hidden;
  background:var(--mev-beige-01);
  color:var(--mev-noir);
  border-top:1px solid var(--mev-noir);
  border-bottom:1px solid var(--mev-noir);
}
.mev-hero.mev-hero--eq38>.mev-hero__stage,
.mev-hero.mev-hero--eq38>.mev-hero__band{display:none!important}
.mev-hero__eq-inner{
  width:min(var(--mev-eq-copy),calc(100% - (2 * var(--mev-eq-gutter))));
  max-width:none;
  margin:0 auto;
  display:grid;
  grid-template-columns:var(--mev-eq-m) minmax(0,1fr);
  column-gap:var(--mev-eq-gap);
  align-items:end;
  justify-content:start;
}
.mev-hero__eq-m{
  grid-column:1;
  width:var(--mev-eq-m);
  aspect-ratio:669.32/966.49;
  align-self:end;
  justify-self:start;
  opacity:1!important;
  transform:none!important;
  transition:none!important;
  animation:none!important;
}
.mev-hero__eq-m svg{
  display:block;
  width:100%;
  height:100%;
  opacity:1!important;
  transform:none!important;
  transition:none!important;
  animation:none!important;
}
.mev-hero__eq-copy{
  grid-column:2;
  align-self:end;
  justify-self:start;
  display:inline-grid;
  grid-template-columns:max-content;
  grid-auto-rows:auto;
  width:max-content;
  max-width:100%;
  min-width:0;
  text-align:left;
  opacity:1!important;
  transform:none!important;
  transition:none!important;
  animation:none!important;
}
.mev-hero__eq-name{
  grid-column:1;
  width:max-content;
  max-width:100%;
  margin:0;
  padding:0;
  color:var(--mev-rouge);
  font-family:var(--mev-font-title);
  font-size:clamp(48px,4.2vw,64px);
  font-weight:400;
  line-height:.84;
  letter-spacing:-.035em;
  text-align:left;
  white-space:nowrap;
  opacity:1!important;
  transform:none!important;
  transition:none!important;
  animation:none!important;
}
.mev-hero__eq-name span{display:block;width:max-content;max-width:100%}
.mev-hero__eq-name::before{
  content:"";
  display:block;
  width:var(--mev-eq-rule-width,calc(100% - .08em));
  height:3px;
  margin:0 0 8px var(--mev-eq-rule-offset,.04em);
  background:var(--mev-rouge);
  transform:scaleX(0);
  transform-origin:center;
  animation:mev-eq-rule-in 820ms cubic-bezier(.22,.61,.36,1) forwards;
}
@keyframes mev-eq-rule-in{to{transform:scaleX(1)}}
.mev-hero__eq-h1{
  grid-column:1;
  width:100%;
  max-width:100%;
  min-width:0;
  margin:5px 0 0;
  padding:0;
  contain:inline-size;
  color:var(--mev-noir);
  font-family:var(--mev-font-title);
  font-size:clamp(24px,1.85vw,32px);
  font-weight:400;
  line-height:.98;
  letter-spacing:-.022em;
  text-align:left;
  text-wrap:wrap;
  white-space:normal;
  overflow-wrap:normal;
  word-break:normal;
  hyphens:none;
  opacity:1!important;
  transform:none!important;
  transition:none!important;
  animation:none!important;
}
.mev-hero__eq-h1 em{font-style:normal;color:inherit}

@media (max-width:768px){
  .mev-hero.mev-hero--eq38{
    --mev-eq-gutter:16px;
    --mev-eq-m:min(20vw,92px);
    --mev-eq-gap:12px;
    height:clamp(285px,38svh,370px);
  }
  .mev-hero__eq-name{font-size:clamp(34px,9vw,46px)}
  .mev-hero__eq-name::before{height:2px;margin-bottom:7px}
  .mev-hero__eq-h1{margin-top:5px;font-size:clamp(18px,4.8vw,24px)}
}

/* 2026-09-10 — SYSTEM DARK PALETTE DORMANT / NOT ACTIVE. Code retained for possible future reactivation. */
@media (prefers-color-scheme:dark) and (max-width:0px){
  .mev-hero.mev-hero--eq38{
    background:#000;
    color:#F9F9EF;
    border-color:#F9F9EF;
  }
  .mev-hero.mev-hero--eq38 .mev-hero__eq-h1{color:#F9F9EF}
}

@media (prefers-reduced-motion:reduce){
  .mev-hero__eq-name::before{animation:none!important;transform:scaleX(1)!important}
}

/* EQ38 MOTION A/B — DRAFT ONLY — 2026-09-07
   Invariant: the official M is the only element fully present from frame 1.
   Text never moves; it is only uncovered from centre to edges, using the same
   spatial grammar as the red rule. Geometry, palette and copy remain unchanged.
   A = red proposition with rule, then black page name.
   B = rule leads, red proposition joins at ~34%, black page name follows. */
.mev-hero.mev-hero--eq38.mev-hero--eq-motion-a .mev-hero__eq-name span,
.mev-hero.mev-hero--eq38.mev-hero--eq-motion-a .mev-hero__eq-h1,
.mev-hero.mev-hero--eq38.mev-hero--eq-motion-b .mev-hero__eq-name span,
.mev-hero.mev-hero--eq38.mev-hero--eq-motion-b .mev-hero__eq-h1{
  clip-path:inset(0 50% 0 50%);
  will-change:clip-path;
}
.mev-hero.mev-hero--eq38.mev-hero--eq-motion-a .mev-hero__eq-name span{
  animation:mev-eq-text-center-in 820ms cubic-bezier(.22,.61,.36,1) both;
}
.mev-hero.mev-hero--eq38.mev-hero--eq-motion-a .mev-hero__eq-h1{
  animation:mev-eq-text-center-in 240ms cubic-bezier(.22,.61,.36,1) 820ms both;
}
.mev-hero.mev-hero--eq38.mev-hero--eq-motion-b .mev-hero__eq-name span{
  animation:mev-eq-text-center-in 760ms cubic-bezier(.22,.61,.36,1) 280ms both;
}
.mev-hero.mev-hero--eq38.mev-hero--eq-motion-b .mev-hero__eq-h1{
  animation:mev-eq-text-center-in 560ms cubic-bezier(.22,.61,.36,1) 620ms both;
}
@keyframes mev-eq-text-center-in{to{clip-path:inset(0 0 0 0)}}
@media (prefers-reduced-motion:reduce){
  .mev-hero.mev-hero--eq38.mev-hero--eq-motion-a .mev-hero__eq-name span,
  .mev-hero.mev-hero--eq38.mev-hero--eq-motion-a .mev-hero__eq-h1,
  .mev-hero.mev-hero--eq38.mev-hero--eq-motion-b .mev-hero__eq-name span,
  .mev-hero.mev-hero--eq38.mev-hero--eq-motion-b .mev-hero__eq-h1{
    animation:none!important;
    clip-path:inset(0)!important;
  }
}

/* EQ38 FINAL FROZEN — hiérarchie globale : proposition rouge / nom de page noir.
   Case Studies : nom du cas rouge / "Cas d'étude" ou "Case study" noir. */
.mev-hero.mev-hero--eq38.mev-hero--eq-invert .mev-hero__eq-copy{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  width:100%;
  max-width:700px;
}
.mev-hero.mev-hero--eq38.mev-hero--eq-invert .mev-hero__eq-name{
  width:fit-content;
  max-width:100%;
  white-space:normal;
  text-wrap:balance;
  font-size:clamp(42px,3.6vw,58px);
  line-height:.9;
}
.mev-hero.mev-hero--eq38.mev-hero--eq-invert .mev-hero__eq-name span{
  display:block;
  width:fit-content;
  max-width:100%;
}
.mev-hero.mev-hero--eq38.mev-hero--eq-invert .mev-hero__eq-h1{
  width:100%;
  max-width:100%;
  contain:none;
  white-space:nowrap;
  text-wrap:nowrap;
}
/* Règle finale : ligne rouge toujours unique en desktop.
   Si le texte éditorial est trop long, on adapte la formulation — jamais la géométrie.
   Mobile conserve la même hiérarchie et peut revenir sur 2 lignes maximum. */
.mev-hero.mev-hero--eq38.mev-hero--eq-invert-single .mev-hero__eq-copy{
  max-width:none;
  overflow:visible;
}
.mev-hero.mev-hero--eq38.mev-hero--eq-invert-single .mev-hero__eq-name{
  width:max-content;
  max-width:none;
  white-space:nowrap;
  text-wrap:nowrap;
  font-size:clamp(46px,3.25vw,50px);
  line-height:.9;
}
.mev-hero.mev-hero--eq38.mev-hero--eq-invert-single .mev-hero__eq-name span{
  width:max-content;
  max-width:none;
  white-space:nowrap;
}
@media(max-width:768px){
  .mev-hero.mev-hero--eq38.mev-hero--eq-invert .mev-hero__eq-name{
    font-size:clamp(27px,7.2vw,34px);
    line-height:.92;
    text-wrap:balance;
  }
  .mev-hero.mev-hero--eq38.mev-hero--eq-invert .mev-hero__eq-h1{
    font-size:clamp(18px,4.8vw,24px);
    white-space:normal;
    text-wrap:wrap;
  }
  .mev-hero.mev-hero--eq38.mev-hero--eq-invert-single .mev-hero__eq-copy{
    width:100%;max-width:700px;overflow:visible;
  }
  .mev-hero.mev-hero--eq38.mev-hero--eq-invert-single .mev-hero__eq-name,
  .mev-hero.mev-hero--eq38.mev-hero--eq-invert-single .mev-hero__eq-name span{
    width:100%;max-width:100%;white-space:normal;text-wrap:balance;
  }
}

/* Static renderers raccordés à EQ38. Le contenu éditorial existant est conservé
   sous le bandeau ; seuls les anciens H1/heads redondants sont neutralisés. */
body.mev-static-eq38 .mev-p17-head,
body.mev-static-eq38 .mev-p20-head,
body.mev-static-eq38 .mev-practical-head{display:none!important}
body.mev-static-eq38 .mev-p17-head + .mev-p17-separator,
body.mev-static-eq38 .mev-p20-head + .mev-p20-separator,
body.mev-static-eq38 .mev-practical-head + .mev-practical-separator{display:none!important}
body.mev-static-eq38 .mev-p19-title,
body.mev-static-eq38 .mev-p18-title{display:none!important}
body.mev-static-eq38 .mev-p18-head,
body.mev-static-eq38 .mev-p19-head{margin-top:0!important}