/*
 * MT Héros animé — visuel en calques du héros.
 *
 * Blindage Elementor : tout est scopé sous #mth-hero (spécificité 1-x-x), sans !important
 * hors mouvement réduit. Les tailles sont en cqw (largeur du visuel) : c'est une
 * illustration qui garde ses proportions à toutes les largeurs ; les textes ont un
 * plancher en px via max().
 *
 * z-index — échelle locale au visuel (isolation: isolate) :
 *   1 chevrons · 2 photo · 3 phrase manuscrite et méthode · 4 carte
 *
 * Repère : les positions sont en % d'un cadre 1254 × 1010.
 */

@font-face {
  font-family: "MTH Caveat";
  src: url("fonts/caveat-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

/* Le widget « Code court » d'Elementor est un élément flex : sans largeur, il se
   rétracte sur un contenu qui, lui, prend 100 % de son parent. */
.elementor-widget-shortcode:has(#mth-hero) { width: 100%; }

#mth-hero {
  --mth-blue: #2766fe;
  --mth-blue-line: #caddff;
  --mth-bar: #2058d8;
  --mth-ink: #000;
  --mth-text: #333;
  --mth-hand: #1c2a4d;
  --mth-sans: "Inter", "Segoe UI", system-ui, sans-serif;
  --mth-ease: cubic-bezier(.16, 1, .3, 1);
  --mth-mx: 0;
  --mth-my: 0;
  position: relative;
  display: block;
  width: 100%;
  max-width: 600px; /* héros empilé sur tablette : le visuel ne prend pas tout l'écran */
  margin: 0 auto;
  padding: 0;
  container-type: inline-size;
  isolation: isolate;
  font-family: var(--mth-sans);
}
#mth-hero,
#mth-hero * { box-sizing: border-box; }
/* La scène porte les proportions ; la méthode est hors scène pour pouvoir passer
   dessous sur mobile. Sur grand écran, elle se place sur la scène (même hauteur). */
#mth-hero .mth-stage { position: relative; width: 100%; aspect-ratio: 1254 / 1010; }

/* ---------- Calques ---------- */
#mth-hero .mth-layer { position: absolute; margin: 0; padding: 0; }
#mth-hero .mth-idle,
#mth-hero .mth-in { width: 100%; height: 100%; }
#mth-hero .mth-l-chev-l,
#mth-hero .mth-l-chev-r { inset: 0; z-index: 1; --mth-depth: -1.2cqw; }
#mth-hero .mth-l-chev-r { --mth-depth: -1.8cqw; }
#mth-hero .mth-chev { display: block; width: 100%; height: 100%; overflow: visible; }
#mth-hero .mth-sheen { display: none; }

#mth-hero .mth-l-photo { left: 13.16%; top: 2.77%; width: 62.6%; height: 91.3%; z-index: 2; --mth-depth: .6cqw; }
#mth-hero .mth-l-photo .mth-in { overflow: hidden; border-radius: 2.6cqw; background: #e9e4df; }
#mth-hero .mth-kb { width: 100%; height: 100%; transform-origin: 55% 30%; }
/* Neutralise `.elementor img { height: auto; max-width: 100% }` et les bordures du kit. */
#mth-hero .mth-photo-img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  margin: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  object-fit: cover;
}

#mth-hero .mth-l-hand { left: 79%; top: 35%; width: 20%; z-index: 3; --mth-depth: 2.2cqw; }
#mth-hero .mth-hand {
  margin: 0;
  padding: 0;
  font: 500 3.6cqw/1.02 "MTH Caveat", "Segoe Script", cursive;
  letter-spacing: 0;
  text-transform: none;
  color: var(--mth-hand);
  transform: rotate(-12deg);
  transform-origin: left top;
}
#mth-hero .mth-hand-line { display: block; white-space: nowrap; }
#mth-hero .mth-hand-line:nth-child(2) { padding-left: .1em; }
#mth-hero .mth-hand-line:nth-child(3) { padding-left: .5em; }
#mth-hero .mth-hand-stroke { display: block; width: 62%; height: auto; margin: .15em 0 0 .9em; overflow: visible; }
#mth-hero .mth-hand-stroke path { fill: none; stroke: var(--mth-hand); stroke-width: 2.2; stroke-linecap: round; }

#mth-hero .mth-l-card { left: 0; top: 77.5%; width: 34%; z-index: 4; --mth-depth: 2.6cqw; }
#mth-hero .mth-card {
  margin: 0;
  padding: 2.3cqw 2.9cqw;
  background: rgba(234, 239, 249, .94);
  border-radius: 1.8cqw;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
#mth-hero .mth-card-name {
  display: block;
  font: 700 max(13px, 3.1cqw)/1.2 var(--mth-sans);
  letter-spacing: -.2px;
  color: var(--mth-ink);
  overflow-wrap: anywhere;
}
#mth-hero .mth-card-tagline {
  display: block;
  margin-top: .3em;
  font: 400 max(11px, 2.3cqw)/1.3 var(--mth-sans);
  color: var(--mth-text);
  overflow-wrap: anywhere;
}

#mth-hero .mth-l-steps { left: 82%; top: 74%; z-index: 3; --mth-depth: 1.4cqw; }
#mth-hero .mth-steps { position: relative; padding-left: 2.4cqw; }
#mth-hero .mth-steps-list { display: grid; gap: 1.5cqw; margin: 0; padding: 0; list-style: none; }
#mth-hero .mth-step {
  margin: 0;
  padding: 0;
  font: 500 max(9px, 1.85cqw)/1.2 var(--mth-sans);
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--mth-hand);
  transition: color .4s var(--mth-ease), transform .4s var(--mth-ease);
}
#mth-hero .mth-step::marker { content: none; }
#mth-hero .mth-steps-bar,
#mth-hero .mth-steps-mark { position: absolute; left: 0; top: 0; width: 2px; }
#mth-hero .mth-steps-bar { height: 100%; background: var(--mth-bar); transform-origin: top; }
/* Repère de l'étape active : 100 px de long, mis à l'échelle par hero.js
   (transform seul, pas de transition sur la taille). */
#mth-hero .mth-steps-mark {
  height: 100px;
  background: var(--mth-blue);
  opacity: 0;
  transform: scale(0);
  transform-origin: 0 0;
  transition: transform .55s var(--mth-ease), opacity .3s;
}

/* ---------- Mot souligné dans le titre (inséré par hero.js dans le H1 d'Elementor) ---------- */
.mth-u { position: relative; display: inline-block; }
.mth-u .mth-u-svg {
  position: absolute;
  left: -2%;
  bottom: -.2em;
  width: 104%;
  height: .32em;
  overflow: visible;
  pointer-events: none;
}
.mth-u .mth-u-svg path { fill: none; stroke: #2766fe; stroke-width: 5; stroke-linecap: round; }
.mth-u.mth-u--draw .mth-u-svg path { stroke-dasharray: 1; animation: mth-draw .7s cubic-bezier(.16, 1, .3, 1) .45s both; }

/* ================= Entrée orchestrée (une fois, au chargement) ================= */
#mth-hero.mth-fx-entree .mth-l-photo .mth-in { animation: mth-photo-in .9s var(--mth-ease) both; }
#mth-hero.mth-fx-entree .mth-photo-img { animation: mth-photo-zoom 1.4s var(--mth-ease) both; }
#mth-hero.mth-fx-entree .mth-l-chev-l .mth-in { animation: mth-chev-l-in 1s var(--mth-ease) .1s both; }
#mth-hero.mth-fx-entree .mth-l-chev-r .mth-in { animation: mth-chev-r-in 1.1s var(--mth-ease) .2s both; }
#mth-hero.mth-fx-entree .mth-l-card .mth-in { animation: mth-slide-in .7s var(--mth-ease) .55s both; }
#mth-hero.mth-fx-entree .mth-steps-bar { animation: mth-bar-in .7s var(--mth-ease) .65s both; }
#mth-hero.mth-fx-entree .mth-step { animation: mth-step-in .5s var(--mth-ease) both; }
#mth-hero.mth-fx-entree .mth-step:nth-child(1) { animation-delay: .7s; }
#mth-hero.mth-fx-entree .mth-step:nth-child(2) { animation-delay: .78s; }
#mth-hero.mth-fx-entree .mth-step:nth-child(3) { animation-delay: .86s; }
#mth-hero.mth-fx-entree .mth-step:nth-child(n+4) { animation-delay: .94s; }
#mth-hero.mth-fx-entree .mth-hand-line { animation: mth-write .5s cubic-bezier(.45, 0, .55, 1) both; }
#mth-hero.mth-fx-entree .mth-hand-line:nth-child(1) { animation-duration: .25s; animation-delay: .9s; }
#mth-hero.mth-fx-entree .mth-hand-line:nth-child(2) { animation-delay: 1.15s; }
#mth-hero.mth-fx-entree .mth-hand-line:nth-child(n+3) { animation-delay: 1.65s; }
#mth-hero.mth-fx-entree .mth-hand-stroke path { stroke-dasharray: 1; animation: mth-draw .4s ease-out 2.15s both; }

@keyframes mth-photo-in { from { clip-path: inset(100% 0 0 0 round 2.6cqw); } to { clip-path: inset(0 0 0 0 round 2.6cqw); } }
@keyframes mth-photo-zoom { from { transform: scale(1.12); } to { transform: none; } }
@keyframes mth-chev-l-in { from { translate: -9cqw -9cqw; opacity: 0; } to { translate: 0 0; opacity: 1; } }
@keyframes mth-chev-r-in { from { translate: 0 11cqw; opacity: 0; } to { translate: 0 0; opacity: 1; } }
@keyframes mth-slide-in { from { translate: -4cqw 0; opacity: 0; } to { translate: 0 0; opacity: 1; } }
@keyframes mth-bar-in { from { transform: scaleY(0); } to { transform: none; } }
@keyframes mth-step-in { from { translate: -1.2cqw 0; opacity: 0; } to { translate: 0 0; opacity: 1; } }
@keyframes mth-write { from { clip-path: inset(-20% 100% -20% 0); } to { clip-path: inset(-20% 0 -20% 0); } }
@keyframes mth-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }

/* ================= Méthode vivante (hero.js allume l'étape) ================= */
#mth-hero.mth-fx-methode .mth-steps-bar { background: var(--mth-blue-line); }
#mth-hero.mth-fx-methode .mth-steps-mark { opacity: 1; }
#mth-hero.mth-fx-methode .mth-step.mth-is-on { color: var(--mth-blue); transform: translateX(.5cqw); }

/* ================= Respiration (en continu, rythmes décalés) ================= */
@media (prefers-reduced-motion: no-preference) {
  #mth-hero.mth-fx-respiration .mth-sheen { display: inline; animation: mth-sheen 7.5s cubic-bezier(.45, 0, .55, 1) infinite; }
  #mth-hero.mth-fx-respiration .mth-l-chev-l .mth-sheen { animation-delay: -3.2s; }
  #mth-hero.mth-fx-respiration .mth-l-chev-r .mth-idle { animation: mth-drift-up 7s ease-in-out infinite alternate; }
  #mth-hero.mth-fx-respiration .mth-l-chev-l .mth-idle { animation: mth-drift-diag 9s ease-in-out -3s infinite alternate; }
  #mth-hero.mth-fx-respiration .mth-kb { animation: mth-breathe 16s ease-in-out infinite alternate; }
  #mth-hero.mth-fx-respiration .mth-l-card .mth-idle { animation: mth-bob 6s ease-in-out -1s infinite alternate; }
  #mth-hero.mth-fx-respiration .mth-l-hand .mth-idle { animation: mth-sway 8s ease-in-out -2s infinite alternate; }
  #mth-hero.mth-fx-respiration .mth-card { box-shadow: 0 1.4cqw 3.2cqw rgba(22, 37, 92, .12); }
  #mth-hero.mth-offscreen .mth-idle,
  #mth-hero.mth-offscreen .mth-kb,
  #mth-hero.mth-offscreen .mth-sheen { animation-play-state: paused; }
}
@keyframes mth-sheen { from { transform: translateX(-520px); } 70%, to { transform: translateX(1500px); } }
@keyframes mth-drift-up { from { transform: translateY(0); } to { transform: translateY(-1.6cqw); } }
@keyframes mth-drift-diag { from { transform: translate(0, 0); } to { transform: translate(1cqw, 1cqw); } }
@keyframes mth-breathe { from { transform: scale(1); } to { transform: scale(1.045); } }
@keyframes mth-bob { from { transform: translateY(0); } to { transform: translateY(-.9cqw); } }
@keyframes mth-sway { from { transform: translateY(0) rotate(0deg); } to { transform: translateY(-.7cqw) rotate(-1.2deg); } }

/* ================= Suivi de la souris (hero.js règle --mth-mx / --mth-my) ================= */
#mth-hero.mth-fx-souris .mth-layer {
  translate: calc(var(--mth-mx) * var(--mth-depth, 0cqw)) calc(var(--mth-my) * var(--mth-depth, 0cqw));
}

/* ================= Profondeur au défilement =================
   Chaque calque se décale selon la traversée du visuel dans l'écran : neutre quand
   le visuel est centré (au chargement sur ordinateur), plus bas à l'entrée, plus haut
   à la sortie. Sur mobile, c'est le doigt qui anime la profondeur.
   CSS natif (timeline de vue) ; sinon hero.js pose .mth-scroll-js et règle --mth-p. */
#mth-hero.mth-fx-defilement .mth-l-chev-r { --mth-par: -7.5cqw; }
#mth-hero.mth-fx-defilement .mth-l-chev-l { --mth-par: -4.5cqw; }
#mth-hero.mth-fx-defilement .mth-l-hand { --mth-par: -4cqw; }
#mth-hero.mth-fx-defilement .mth-l-card { --mth-par: -3cqw; }
#mth-hero.mth-fx-defilement .mth-l-steps { --mth-par: -2cqw; }
#mth-hero.mth-fx-defilement .mth-l-photo { --mth-par: -1cqw; }
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    #mth-hero.mth-fx-defilement { view-timeline: --mth-view block; }
    #mth-hero.mth-fx-defilement .mth-layer {
      animation: mth-parallax linear both;
      animation-timeline: --mth-view;
      animation-range: cover 0% cover 100%;
    }
  }
  #mth-hero.mth-fx-defilement.mth-scroll-js .mth-layer {
    transform: translateY(calc(var(--mth-par, 0cqw) * var(--mth-p, 0)));
  }
}
@keyframes mth-parallax {
  from { transform: translateY(calc(var(--mth-par, 0cqw) * -1)); }
  to { transform: translateY(var(--mth-par, 0cqw)); }
}

/* ================= Écrans tactiles : la profondeur dérive seule =================
   Sans souris, --mth-mx / --mth-my suivent une dérive lente (deux périodes
   différentes : le mouvement ne boucle jamais à l'identique). */
@property --mth-mx { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --mth-my { syntax: "<number>"; inherits: true; initial-value: 0; }
@media (hover: none) and (prefers-reduced-motion: no-preference) {
  #mth-hero.mth-fx-souris { animation: mth-wander-x 9s ease-in-out infinite alternate, mth-wander-y 13s ease-in-out -4s infinite alternate; }
  #mth-hero.mth-fx-souris.mth-offscreen { animation-play-state: paused; }
}
@keyframes mth-wander-x { from { --mth-mx: -.7; } to { --mth-mx: .7; } }
@keyframes mth-wander-y { from { --mth-my: -.5; } to { --mth-my: .5; } }

/* Entrée en attente : visuel hors écran au chargement (mobile, héros empilé).
   hero.js relance l'entrée figée à son début et la libère quand le visuel paraît. */
/* !important : les raccourcis `animation` des effets (spécificité jusqu'à 1-3-0)
   remettent animation-play-state à running. */
#mth-hero.mth-wait * { animation-play-state: paused !important; }

/* ================= Mobile : composition dédiée quand le visuel est étroit =================
   Requête de conteneur (largeur du visuel, pas de l'écran) : la même règle vaut pour
   une colonne étroite sur ordinateur. Proportionnels, les textes deviendraient
   illisibles et « STRUCTURER » déborderait : la photo grandit, la phrase manuscrite
   garde 12,5 px, et la méthode passe sous le visuel, en ligne. */
@container (max-width: 480px) {
  #mth-hero .mth-l-photo { left: 3%; top: 1.5%; width: 66.5%; height: 97%; }
  /* Couvert par la photo agrandie, le chevron gauche ne laisserait qu'un liseré. */
  #mth-hero .mth-l-chev-l { display: none; }
  #mth-hero .mth-l-hand { left: 71.5%; top: 27%; width: 28%; }
  #mth-hero .mth-hand { font-size: max(12.5px, 3.6cqw); }
  #mth-hero .mth-l-card { top: 74%; width: auto; max-width: 64%; }
  #mth-hero .mth-card { padding: 8px 12px; border-radius: 8px; }

  #mth-hero .mth-l-steps { position: relative; left: auto; top: auto; margin-top: 24px; }
  #mth-hero .mth-steps { padding: 0 0 8px; }
  #mth-hero .mth-steps-list { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; }
  #mth-hero .mth-step { font-size: 10px; letter-spacing: .1em; }
  #mth-hero .mth-steps-bar { display: none; }
  #mth-hero .mth-steps-mark { width: 100px; height: 2px; }
  #mth-hero.mth-fx-methode .mth-step.mth-is-on { transform: none; }
  #mth-hero.mth-fx-entree .mth-step { animation-name: mth-step-up; }
  #mth-hero.mth-fx-defilement .mth-l-steps { --mth-par: 0cqw; }
}
@keyframes mth-step-up { from { translate: 0 6px; opacity: 0; } to { translate: 0 0; opacity: 1; } }

/* Mouvement réduit : tout s'affiche dans son état final.
   !important : neutralise nos propres animations, déclarées plus haut avec une
   spécificité supérieure (#mth-hero.mth-fx-… .classe). */
@media (prefers-reduced-motion: reduce) {
  #mth-hero *,
  .mth-u * { animation: none !important; transition: none !important; }
}