/*
 * 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; }
}

/* Illustrations métier. Calques locaux : fond 0, contenu 1, annotations 2. */
#mth-hero.mth-scene { color: #10203a; font-family: var(--mth-sans); }
#mth-hero .mth-v-canvas { position: relative; padding: 24px; overflow: hidden; background: linear-gradient(145deg,#f6f9ff,#e8f0ff); border: 1px solid #dce6f8; border-radius: 24px; }
#mth-hero .mth-v-canvas::before { content: ''; position: absolute; width: 240px; height: 240px; right: -140px; top: 110px; border: 48px solid #d7e5ff; transform: rotate(45deg); pointer-events:none; }
#mth-hero .mth-v-heading { position: relative; display:flex; align-items:center; gap:12px; font-size:14px; font-weight:600; line-height:1.4; }
#mth-hero .mth-v-number { display:grid; place-items:center; width:32px; height:32px; flex-shrink:0; border-radius:50%; color:#fff; background:#2c63f5; font-size:12px; }
#mth-hero .mth-v-spark { margin-left:auto; color:#2c63f5; font-size:28px; line-height:1; }
#mth-hero .mth-v-footer { position:relative; display:flex; gap:16px; align-items:center; margin-top:16px; min-height:48px; }
#mth-hero .mth-v-footer-line { width:32px; height:2px; flex-shrink:0; background:#2c63f5; }
#mth-hero .mth-v-footer p { padding:0; margin:0; color:#172947; font-size:18px; font-weight:600; line-height:1.35; letter-spacing:-.4px; }
#mth-hero .mth-v-direction,#mth-hero .mth-v-offer,#mth-hero .mth-v-presence,#mth-hero .mth-v-time { position:relative; min-height:330px; margin:24px 0; }
#mth-hero .mth-v-orbit { position:absolute; width:248px; height:248px; border:1px solid #a9c2f3; border-radius:50%; top:28px; left:50%; transform:translateX(-50%); background: radial-gradient(circle,#fff 0 24%,transparent 25% 49%,#bed1f1 49.4% 49.8%,transparent 50%); }
#mth-hero .mth-v-orbit::before,#mth-hero .mth-v-orbit::after { content:''; position:absolute; background:#c0d3f5; }
#mth-hero .mth-v-orbit::before { top:50%; left:0; width:100%; height:1px; }
#mth-hero .mth-v-orbit::after { top:0; left:50%; width:1px; height:100%; }
#mth-hero .mth-v-north { position:absolute; top:-22px; left:50%; transform:translateX(-50%); color:#2454c6; font-size:12px; font-weight:700; }
#mth-hero .mth-v-needle { position:absolute; z-index:1; left:calc(50% - 20px); top:28px; width:40px; height:172px; background:linear-gradient(#2c63f5 0 55%,#bed2fe 55%); clip-path:polygon(50% 0,100% 60%,50% 100%,0 60%); transform:rotate(28deg); transform-origin:50% 56%; }
#mth-hero .mth-v-center { position:absolute; z-index:2; top:calc(50% - 6px); left:calc(50% - 6px); width:12px; height:12px; border-radius:50%; background:#fff; border:3px solid #2454c6; }
#mth-hero .mth-v-pill { position:absolute; z-index:2; max-width:90%; padding:12px 16px; background:#fff; border:1px solid #d5e2f9; border-radius:8px; box-shadow:0 8px 24px #1538670a; color:#243e64; font-size:13px; line-height:1.35; font-weight:600; }
#mth-hero .mth-v-p1 { top:40px; left:0; }
#mth-hero .mth-v-p2 { top:156px; right:0; }
#mth-hero .mth-v-p3 { top:272px; left:8px; }
#mth-hero .mth-v-offer { padding:12px 12px 0; }
#mth-hero .mth-v-sheet { position:absolute; inset:8px 12px 0; border-radius:12px; background:#d0e0ff; transform:rotate(-5deg); }
#mth-hero .mth-v-document { position:relative; padding:24px; border:1px solid #cbdcf8; border-radius:12px; background:#fff; box-shadow:0 12px 32px #15386708; }
#mth-hero .mth-v-doc-label { display:block; font-size:12px; font-weight:600; line-height:1.4; color:#36577d; }
#mth-hero .mth-v-doc-title { margin:12px 0 20px; font-size:24px; font-weight:700; line-height:1.2; letter-spacing:-.6px; color:#10203a; }
#mth-hero .mth-v-offer-row { display:flex; align-items:center; gap:12px; padding:14px 0; border-top:1px solid #e3eaf5; color:#36577d; font-size:12px; }
#mth-hero .mth-v-offer-row strong { font-size:13px; font-weight:600; color:#243e64; }
#mth-hero .mth-v-offer-row i { margin-left:auto; width:6px; height:6px; border-radius:50%; background:#2c63f5; flex-shrink:0; }
#mth-hero .mth-v-seal { display:flex; gap:8px; align-items:center; margin-top:12px; font-size:12px; font-weight:600; line-height:1.4; color:#2454c6; }
#mth-hero .mth-v-seal span { font-size:20px; }
#mth-hero .mth-v-presence { padding-top:8px; }
#mth-hero .mth-v-browser { position:relative; z-index:1; width:88%; margin:auto; background:#fff; border:1px solid #cbdcf8; border-radius:12px; overflow:hidden; }
#mth-hero .mth-v-browser-bar { display:flex; gap:20px; align-items:center; padding:12px 16px; background:#f4f7fd; border-bottom:1px solid #e3eaf5; font-size:11px; color:#42618a; }
#mth-hero .mth-v-browser-bar span:first-child { color:#7e9dd0; font-size:8px; letter-spacing:2px; }
#mth-hero .mth-v-site { padding:24px; }
#mth-hero .mth-v-site strong { display:block; margin:12px 0; color:#10203a; font-size:24px; line-height:1.2; letter-spacing:-.5px; }
#mth-hero .mth-v-site-lines { display:grid; gap:6px; margin:16px 0; }
#mth-hero .mth-v-site-lines i { height:4px; width:90%; background:#e4ebf7; border-radius:4px; }
#mth-hero .mth-v-site-lines i:last-child { width:60%; }
#mth-hero .mth-v-contact { display:inline-block; font-size:12px; font-weight:600; color:#2454c6; }
#mth-hero .mth-v-channels { position:relative; z-index:2; display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:24px; }
#mth-hero .mth-v-channel { display:grid; grid-template-columns:32px 1fr; column-gap:8px; padding:16px 12px; background:#fff; border:1px solid #cbdcf8; border-radius:10px; font-size:12px; line-height:1.5; }
#mth-hero .mth-v-channel-icon { grid-row:span 2; color:#2c63f5; font-size:28px; line-height:1.3; }
#mth-hero .mth-v-channel strong { font-size:13px; font-weight:600; color:#243e64; }
#mth-hero .mth-v-channel > span:last-child { color:#42618a; }
#mth-hero .mth-v-presence-link { position:absolute; width:54%; height:40px; bottom:60px; left:23%; border:1px solid #a9c2f3; border-bottom:0; }
#mth-hero .mth-v-journey { position:relative; display:flex; flex-direction:column; gap:16px; padding:16px 0; margin:24px 0; }
#mth-hero .mth-v-journey-line { position:absolute; left:22px; top:36px; bottom:36px; width:2px; background:#bfd2f4; }
#mth-hero .mth-v-stop { position:relative; display:flex; align-items:center; gap:16px; padding:12px 16px 12px 0; min-height:48px; color:#243e64; font-size:14px; font-weight:600; line-height:1.35; }
#mth-hero .mth-v-stop-dot { display:grid; place-items:center; width:44px; height:44px; flex-shrink:0; border:1px solid #bfd2f4; border-radius:50%; background:#fff; color:#2454c6; font-size:12px; }
#mth-hero .mth-v-stop-4 { background:#2c63f5; border-radius:28px 12px 12px 28px; color:#fff; }
#mth-hero .mth-v-stop-4 .mth-v-stop-dot { color:#fff; background:#2c63f5; border-color:#9cbaff; }
#mth-hero .mth-v-check { margin-left:auto; font-size:20px; }
#mth-hero .mth-v-clock { position:relative; width:208px; height:208px; margin:0 auto; border:1px solid #a9c2f3; border-radius:50%; background:repeating-conic-gradient(#a9c2f3 0deg 1deg,transparent 1deg 30deg); }
#mth-hero .mth-v-clock::before { content:''; position:absolute; inset:10px; background:#f1f6ff; border-radius:50%; }
#mth-hero .mth-v-clock-hand { position:absolute; z-index:1; top:28px; left:101px; height:72px; width:3px; background:#2c63f5; border-radius:3px; transform:rotate(45deg); transform-origin:center bottom; }
#mth-hero .mth-v-clock-dot { position:absolute; z-index:2; width:9px; height:9px; border-radius:50%; background:#2c63f5; left:98px; top:96px; }
#mth-hero .mth-v-clock-label { position:absolute; z-index:1; top:120px; left:0; width:100%; text-align:center; font-size:12px; line-height:1.5; color:#36577d; }
#mth-hero .mth-v-clock-label strong { color:#10203a; font-size:14px; }
#mth-hero .mth-v-time-stack { position:relative; display:grid; gap:8px; margin-top:-12px; }
#mth-hero .mth-v-time-item { display:flex; align-items:center; gap:12px; padding:14px 16px; border:1px solid #cbdcf8; border-radius:8px; background:#fff; font-size:13px; line-height:1.4; color:#243e64; font-weight:600; }
#mth-hero .mth-v-time-item > span { color:#2c63f5; font-size:20px; }
#mth-hero .mth-v-return { margin-top:20px; padding-left:16px; border-left:2px solid #2c63f5; font-size:12px; line-height:1.6; color:#36577d; }
#mth-hero .mth-v-return strong { display:block; font-size:14px; font-weight:600; color:#10203a; }
@container (max-width:360px) {
#mth-hero .mth-v-canvas { padding:16px; border-radius:16px; }
#mth-hero .mth-v-document,#mth-hero .mth-v-site { padding:16px; }
#mth-hero .mth-v-doc-title,#mth-hero .mth-v-site strong { font-size:20px; }
#mth-hero .mth-v-channel { grid-template-columns:1fr; gap:4px; padding:12px; }
#mth-hero .mth-v-channel-icon { grid-row:auto; font-size:24px; }
#mth-hero .mth-v-footer p { font-size:16px; }
#mth-hero .mth-v-pill { padding:12px; font-size:12px; }
#mth-hero .mth-v-stop { font-size:13px; gap:12px; }
#mth-hero .mth-v-offer { padding:8px 4px 0; }
#mth-hero .mth-v-offer-row { gap:8px; }
}
@media (prefers-reduced-motion:reduce) {
/* Le choix d'accessibilité prévaut sur les effets et les animations Elementor. */
#mth-hero.mth-scene * { animation:none !important; }
}


/* Chorégraphies 1.3 : fond 0, composition 1, commandes 2. */
#mth-hero.mth-cinematic { --mth-pointer-x:0px; --mth-pointer-y:0px; }
#mth-hero.mth-cinematic .mth-v-canvas { overflow:clip; background:linear-gradient(145deg,#f9fbff 0%,#edf3ff 64%,#e4edff 100%); border-color:#d9e4f6; box-shadow:inset 0 1px 0 #fff,0 24px 64px -48px #194caa55; }
#mth-hero.mth-cinematic .mth-v-canvas::before { opacity:.35; width:280px; height:280px; right:-180px; border-width:40px; transform:translate(var(--mth-pointer-x),var(--mth-pointer-y)) rotate(45deg); }
#mth-hero .mth-c-light { position:absolute; inset:-40%; pointer-events:none; background:radial-gradient(ellipse at 50% 40%,#ffffffc0,transparent 55%); transform:translate(var(--mth-pointer-x),var(--mth-pointer-y)); }
#mth-hero .mth-c-toggle { position:relative; z-index:2; margin:0 0 0 auto; padding:8px; width:32px; height:32px; min-height:0; border:1px solid #c8d9f4; border-radius:50%; background:#ffffffb8; color:#315589; box-shadow:none; display:grid; place-items:center; cursor:pointer; flex-shrink:0; transition:transform .2s,background .2s; }
#mth-hero .mth-c-toggle[hidden] { display:none; }
#mth-hero .mth-c-toggle:hover { background:#fff; transform:scale(1.06); }
#mth-hero .mth-c-toggle:active { transform:scale(.96); }
#mth-hero .mth-c-toggle:focus-visible { outline:3px solid #2454c6; outline-offset:3px; }
#mth-hero .mth-c-toggle svg { width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
#mth-hero .mth-c-toggle .mth-c-play { display:none; }
#mth-hero .mth-c-toggle[aria-pressed="true"] .mth-c-pause { display:none; }
#mth-hero .mth-c-toggle[aria-pressed="true"] .mth-c-play { display:block; }
#mth-hero .mth-c-dial { position:absolute; inset:-16px; width:calc(100% + 32px); height:calc(100% + 32px); overflow:visible; fill:none; stroke:#7da4ee; stroke-width:1; }
#mth-hero .mth-c-dial circle:first-child { stroke-dasharray:1 8; }
#mth-hero .mth-c-dial circle:last-child { stroke:#2c63f5; stroke-width:2; stroke-dasharray:44 700; }
#mth-hero .mth-c-orbit-carrier { position:absolute; inset:-16px; border-radius:50%; }
#mth-hero .mth-c-orbit-carrier i { position:absolute; top:-3px; left:calc(50% - 4px); width:8px; height:8px; border:2px solid #fff; border-radius:50%; background:#2c63f5; box-shadow:0 0 0 4px #2c63f517; }
#mth-hero.mth-cinematic .mth-v-orbit { background:radial-gradient(circle,#fff 0 24%,transparent 25% 49%,#bed1f1 49.4% 49.8%,transparent 50%); }
#mth-hero.mth-cinematic .mth-v-pill { background:#fffffff0; box-shadow:0 8px 20px -12px #204f9a40; }
#mth-hero.mth-cinematic .mth-v-document { box-shadow:0 20px 32px -24px #204f9a70; }
#mth-hero .mth-c-sheet-far { background:#bed3fb; transform:translate(0,8px) rotate(-9deg); }
#mth-hero.mth-cinematic .mth-v-sheet-back { background:#dbe7fe; }
#mth-hero.mth-cinematic .mth-v-offer-row { position:relative; isolation:isolate; }
#mth-hero .mth-c-wash { position:absolute; z-index:-1; inset:4px -8px; border-radius:6px; background:linear-gradient(90deg,#d9e7ff,#edf4ff40); opacity:0; transform-origin:left; }
#mth-hero.mth-cinematic .mth-v-channel { box-shadow:0 12px 20px -16px #2454c644; }
#mth-hero .mth-c-packet { position:absolute; top:-4px; left:calc(50% - 4px); width:8px; height:8px; border-radius:50%; background:#2c63f5; box-shadow:0 0 0 4px #2766fe14; opacity:0; }
#mth-hero .mth-c-rail { position:absolute; inset:0; background:#2c63f5; transform:scaleY(0); transform-origin:top; }
#mth-hero .mth-c-runner { position:absolute; top:-4px; left:-3px; width:8px; height:8px; background:#2c63f5; border-radius:50%; box-shadow:0 0 0 4px #2c63f51a; opacity:0; }
#mth-hero .mth-c-stop-wash { position:absolute; z-index:0; inset:8px 0 8px 20px; background:linear-gradient(90deg,#dce9ff,#e6efff00); border-radius:0 12px 12px 0; opacity:0; transform-origin:left; }
#mth-hero.mth-cinematic .mth-v-stop > span:not(.mth-c-stop-wash) { position:relative; }
#mth-hero.mth-cinematic .mth-v-stop-4 .mth-c-stop-wash { background:linear-gradient(90deg,#ffffff30,#ffffff00); }
#mth-hero .mth-c-clock-orbit { position:absolute; inset:-14px; width:calc(100% + 28px); height:calc(100% + 28px); fill:none; stroke:#2c63f5; stroke-width:2; stroke-dasharray:100 630; transform:rotate(-90deg); opacity:.65; }
#mth-hero.mth-cinematic .mth-v-clock-hand { transform-origin:50% 100%; }
#mth-hero.mth-cinematic .mth-v-footer-line { transform-origin:left; }
@media(prefers-reduced-motion:reduce){
#mth-hero .mth-c-toggle { transition:none; }
}

#mth-hero.mth-cinematic .mth-v-sheet { inset:24px 24px 48px; }