/* =====================================================================
   Murphy — Home page (refonte wireframe juillet 2026)
   Feuille de style dédiée à la home (scopée .mh) — n'affecte aucune
   autre page. S'appuie sur les tokens de theme.css (couleurs, typos).
   Sections : hero · codes (rail) · pépites (rail) · safe place ·
   fonctionnement (onglets + zigzag téléphones) · démo swipe · aventure.
   ===================================================================== */

.mh{
  /* Dégradé signature = les stops du coeur multicolore.
     Réservé AU COEUR du hero (marque). Le reste de l'UI est bleu uni. */
  --mh-grad:linear-gradient(100deg,#6B96D9 0%,#B091AC 22%,#BD90A4 36%,#DAAB4F 60%,#E7B82A 72%,#E86B23 85%,#E9291D 100%);
  --mh-grad-soft:linear-gradient(120deg,#EAF0FB,#F7EAF0 46%,#FBF1E2 72%,#FDEDE8);
  --mh-blue:#4F7FCE;      /* accent unique (titres, boutons, puces) */
  --mh-red:#E9291D;       /* réservé à la safe place */
  --mh-pink:#B36A87;      /* rose unique : kicker, titre et détails des témoignages */
  --mh-ink:#14181F;
  position:relative;
  overflow-x:clip;
}
.mh *,.mh *::before,.mh *::after{box-sizing:border-box;}
.mh .container{max-width:1180px;margin:0 auto;padding:0 26px;}

/* Grain subtil global */
.mh-grain{
  position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.035;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Curseur lumineux (hero) */
.mh-glow{
  position:absolute;top:0;left:0;width:520px;height:520px;border-radius:50%;
  transform:translate(-50%,-50%);pointer-events:none;z-index:0;opacity:0;transition:opacity .5s ease;
  background:radial-gradient(circle,rgba(106,151,219,.28),rgba(219,144,164,.14) 42%,transparent 68%);
  filter:blur(4px);will-change:transform;
}

/* ---------- Reveal (état masqué seulement si JS actif → robuste sans JS) ---------- */
.mh [data-reveal]{transition:opacity .8s cubic-bezier(.16,.84,.44,1),transform .8s cubic-bezier(.16,.84,.44,1);}
.mh-js .mh [data-reveal]{opacity:0;transform:translateY(34px);}
.mh-js .mh [data-reveal].in{opacity:1;transform:none;}
[data-reveal-d="1"]{transition-delay:.08s;}
[data-reveal-d="2"]{transition-delay:.16s;}
[data-reveal-d="3"]{transition-delay:.24s;}

/* =====================================================================
   HERO
   ===================================================================== */
.mh-hero{
  position:relative;z-index:2;
  min-height:calc(100svh - 72px);
  display:flex;align-items:center;
  padding:64px 0 88px;
  background:
    radial-gradient(1100px 560px at 88% -8%,rgba(106,151,219,.16),transparent 62%),
    radial-gradient(900px 620px at -6% 108%,rgba(219,144,164,.18),transparent 58%),
    radial-gradient(680px 480px at 60% 120%,rgba(231,184,42,.10),transparent 60%),
    #FBFBFD;
  /* clip horizontal, mais laisse la pointe du cœur déborder ~260px sous le hero
     (sur le bloc "Cassez les codes") pour une transition fluide (demande Quentin). */
  overflow:clip;overflow-clip-margin:260px;
}
.mh-hero-grid{
  position:relative;z-index:3;width:100%;
  display:grid;grid-template-columns:1.08fr .92fr;gap:clamp(28px,4vw,60px);align-items:center;
}
/* Bandeau bas sur toute la largeur : le bouton de navigation et le bloc app
   restent ainsi rigoureusement au même niveau, quelle que soit la hauteur
   des deux colonnes au-dessus. */
.mh-hero-foot{
  grid-column:1 / -1;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px 24px;
  margin-top:clamp(18px,3vw,38px);
}

/* Coeur signature — incliné (comme sur les cartes du parcours), trait fin,
   centré, et sa pointe déborde sur le bloc du dessous. Seule pièce
   multicolore conservée. */
.mh-heart{
  position:absolute;z-index:1;pointer-events:none;
  left:50%;top:42%;
  transform:translate(calc(-50% + var(--px,0px)),calc(-50% + var(--py,0px))) rotate(18deg);
  height:min(150vh,1500px);width:auto;opacity:1;
  transition:transform .4s cubic-bezier(.16,.84,.44,1);will-change:transform;
}
.mh-heart path{
  fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;   /* trait fin = moins "bulle" */
  stroke-dasharray:var(--len,3000);stroke-dashoffset:0;   /* repos = visible */
}
.mh-heart.draw path,.mh-cta-heart.draw path{animation:mhDraw 2.7s cubic-bezier(.5,0,.2,1) .2s both;}
@keyframes mhDraw{from{stroke-dashoffset:var(--len,3000);}to{stroke-dashoffset:0;}}

.mh-title{
  font-family:var(--font-display);font-weight:400;
  /* Taille calée pour tenir en 3 lignes ("Pensée pour" / "arrêter de" /
     "chercher .") et laisser le sous-titre visible sous le pli. */
  font-size:clamp(40px,6.1vw,90px);line-height:1.04;letter-spacing:-.01em;
  margin:0 0 20px;color:var(--mh-ink);
}
.mh-title .grad{color:var(--mh-blue);}
@keyframes mhFlow{0%,100%{background-position:0% 50%;}50%{background-position:100% 50%;}}
/* padding+marge négative : laisse dépasser les accents des capitales (É, À)
   sans quoi le masque de l'animation d'entrée les tranche. */
.mh-title .line{display:block;overflow:hidden;padding-top:.2em;margin-top:-.2em;white-space:nowrap;}
.mh-title .line > span{display:inline-block;transform:translateY(110%);animation:mhRise .9s cubic-bezier(.16,.84,.44,1) forwards;}
.mh-title .line:nth-child(1) > span{animation-delay:.10s;}
.mh-title .line:nth-child(2) > span{animation-delay:.20s;}
.mh-title .line:nth-child(3) > span{animation-delay:.30s;}
@keyframes mhRise{to{transform:translateY(0);}}

.mh-lead{font-size:clamp(16.5px,1.5vw,20px);color:var(--mh-ink);max-width:560px;margin:0 0 32px;}

/* Liens secondaires du hero (navigation + app) */
.mh-hero-dl{display:inline-flex;align-items:center;gap:12px;}
.mh-hero-link{
  display:inline-flex;align-items:center;gap:.5em;
  font-weight:700;font-size:14.5px;line-height:1;color:var(--mh-ink);
  background:rgba(255,255,255,.72);border:1.6px solid rgba(20,24,31,.14);
  border-radius:999px;padding:14px 22px;backdrop-filter:blur(6px);
  transition:transform .18s cubic-bezier(.16,.84,.44,1),border-color .2s,color .2s,box-shadow .25s;
}
.mh-hero-link:hover{transform:translateY(-2px);border-color:var(--blue-500);color:var(--blue-700);box-shadow:0 12px 26px -14px rgba(20,24,31,.35);}
.mh-hero-link .arw{transition:transform .2s;}
.mh-hero-link:hover .arw{transform:translateY(3px);}
.mh-qr{display:inline-flex;flex-direction:column;align-items:center;gap:4px;}
.mh-qr img{
  width:74px;height:74px;background:#fff;border:1px solid var(--gray-200);border-radius:14px;padding:6px;
  box-shadow:0 10px 26px -14px rgba(20,24,31,.35);transition:transform .2s cubic-bezier(.16,.84,.44,1);
}
.mh-qr:hover img{transform:scale(1.06);}
.mh-qr span{font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--gray-500);}

/* ---------- Panneau d'accessibilité (RGAA) déclenché par le bouton "faciliter ta navigation" ---------- */
.mh-a11y{position:relative;}
.mh-a11y [data-a11y-toggle]{cursor:pointer;}
.mh-a11y [data-a11y-toggle] svg{color:var(--mh-blue);}
.mh-a11y-panel{
  position:absolute;bottom:calc(100% + 12px);left:0;z-index:40;width:min(320px,86vw);
  background:#fff;border:1px solid var(--gray-200);border-radius:18px;padding:16px 18px;
  box-shadow:0 24px 60px -24px rgba(20,24,31,.45);
  display:flex;flex-direction:column;gap:2px;
}
.mh-a11y-panel[hidden]{display:none;}
.mh-a11y-title{font-weight:800;font-size:13px;letter-spacing:.02em;color:var(--mh-ink);margin:0 0 8px;}
.mh-a11y-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:9px 0;border-top:1px solid var(--gray-100);}
.mh-a11y-row span{display:flex;flex-direction:column;}
.mh-a11y-row b{font-size:13.5px;font-weight:700;color:var(--mh-ink);}
.mh-a11y-row small{font-size:11.5px;color:var(--gray-500);}
.mh-a11y-note{font-size:11px;color:var(--gray-400);margin:8px 0 0;}
.acc-toggle{flex:none;width:44px;height:25px;border:none;border-radius:13px;background:var(--gray-300);position:relative;cursor:pointer;padding:0;transition:background .2s;}
.acc-toggle .acc-knob{position:absolute;top:3px;left:3px;width:19px;height:19px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:left .2s;}
.acc-toggle[aria-checked="true"]{background:var(--mh-blue);}
.acc-toggle[aria-checked="true"] .acc-knob{left:22px;}

/* ---------- Inscription express du hero (un bloc par public) ---------- */
.mh-hero-side{
  justify-self:end;width:100%;max-width:430px;
  display:flex;flex-direction:column;align-items:flex-start;gap:22px;
}
.mh-join{width:100%;}
.mh-join-lab{font-size:15.5px;color:var(--mh-ink);margin:0 0 9px;}
.mh-join-lab b{font-weight:800;}
.mh-join-line{display:flex;align-items:stretch;gap:10px;}
.mh-join-line input{
  flex:1;min-width:0;font-family:var(--font-body);font-size:15px;color:var(--mh-ink);
  background:rgba(255,255,255,.92);border:1.6px solid rgba(20,24,31,.14);border-radius:14px;
  padding:14px 16px;outline:none;backdrop-filter:blur(6px);
  transition:border-color .2s,box-shadow .2s;
}
.mh-join-line input::placeholder{color:var(--gray-400);}
.mh-join-line input:focus{border-color:var(--jc,var(--blue-500));box-shadow:0 0 0 3px color-mix(in srgb,var(--jc,var(--blue-500)) 22%,transparent);}
.mh-join-go{
  /* largeur commune aux deux boutons → les champs email s'alignent */
  flex:0 0 auto;min-width:152px;
  font-family:var(--font-body);font-weight:700;font-size:14.5px;line-height:1;color:#fff;
  background:var(--jc,var(--blue-500));border:0;border-radius:14px;padding:14px 20px;cursor:pointer;white-space:nowrap;
  box-shadow:0 12px 26px -14px var(--jc,var(--blue-500));
  transition:transform .18s cubic-bezier(.16,.84,.44,1),filter .2s,box-shadow .25s;
}
.mh-join-go:hover{transform:translateY(-2px);filter:brightness(1.06);box-shadow:0 16px 32px -14px var(--jc,var(--blue-500));}
.mh-join-go:active{transform:translateY(0);}
.mh-join-go:focus-visible{outline:2px solid var(--mh-ink);outline-offset:3px;}
/* Bleu pour les talents, rose pour les entreprises — convention du site */
.mh-join:has(.talent){--jc:#597CB3;}
.mh-join:has(.company){--jc:#B36A87;}
.mh-join-go.talent{background:#597CB3;box-shadow:0 12px 26px -14px #597CB3;}
.mh-join-go.company{background:#B36A87;box-shadow:0 12px 26px -14px #B36A87;}
.mh-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55em;
  font-family:var(--font-body);font-weight:700;font-size:15.5px;line-height:1;
  padding:17px 30px;border-radius:999px;border:1.6px solid transparent;cursor:pointer;
  transition:transform .18s cubic-bezier(.16,.84,.44,1),box-shadow .25s,background .25s,color .2s;
  will-change:transform;position:relative;white-space:nowrap;
}
.mh-btn-grad{color:#fff;background:var(--mh-blue);box-shadow:0 12px 30px -10px rgba(79,127,206,.5);}
.mh-btn-grad:hover{background:#3f6cba;box-shadow:0 16px 40px -10px rgba(79,127,206,.55);}
.mh-btn-ghost{color:var(--mh-ink);background:rgba(255,255,255,.6);border-color:rgba(20,24,31,.14);backdrop-filter:blur(6px);}
.mh-btn-ghost:hover{border-color:var(--blue-500);color:var(--blue-700);}
.mh-btn .arw{transition:transform .2s;}
.mh-btn:hover .arw{transform:translateY(3px);}

/* Indice de scroll */
.mh-scroll{position:absolute;left:26px;bottom:22px;z-index:4;display:flex;align-items:center;gap:10px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--gray-500);font-weight:700;}
.mh-scroll .bar{width:34px;height:2px;background:var(--gray-300);position:relative;overflow:hidden;}
.mh-scroll .bar::after{content:"";position:absolute;inset:0;width:40%;background:var(--mh-blue);animation:mhSlide 1.8s ease-in-out infinite;}
@keyframes mhSlide{0%{transform:translateX(-120%);}100%{transform:translateX(340%);}}

/* =====================================================================
   SECTIONS communes
   ===================================================================== */
.mh-sec{position:relative;z-index:2;padding:clamp(50px,6.5vw,92px) 0;}
.mh-head{max-width:720px;margin:0 auto 56px;text-align:center;}
.mh-head.left{max-width:none;margin:0 0 44px;text-align:left;}
.mh-kicker{display:inline-block;font-weight:800;letter-spacing:.16em;text-transform:uppercase;font-size:12.5px;color:var(--blue-600);margin-bottom:14px;}
.mh-kicker.mh-k-pink{color:var(--mh-pink);}
.mh-kicker.mh-k-yellow{color:#B8860B;}
.mh-h2{font-family:var(--font-display);font-weight:400;font-size:clamp(32px,5vw,64px);line-height:.98;letter-spacing:-.01em;margin:0;color:var(--mh-ink);text-wrap:balance;}
.mh-h2 .grad{color:var(--mh-blue);}
/* Accents de titre par section (Quentin) : pépites = rose, guide = jaune */
.mh-h2 .grad.grad-pink{color:var(--mh-pink);}
.mh-h2 .grad.grad-yellow{color:#E7B82A;}
.mh-sub{font-size:clamp(16px,1.6vw,19px);color:var(--gray-600);margin:18px auto 0;max-width:600px;}

/* Ancres sous le header sticky */
#hero,#codes,#pepites,#safe-place,#fonctionnement,#essayer,#rejoindre{scroll-margin-top:86px;}

/* =====================================================================
   RAILS SWIPABLES (codes + pépites) — défilement horizontal type Apple
   ===================================================================== */
.mh-rail-wrap{position:relative;--rail-pad:max(26px,calc((100vw - 1128px)/2));}
.mh-rail{
  display:flex;gap:22px;overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;cursor:grab;
  padding:10px var(--rail-pad) 30px;
  /* Sans ce scroll-padding, le snap colle la 1re carte au bord de l'écran
     et mange la marge qui l'aligne sur le titre de section. */
  scroll-padding-left:var(--rail-pad);
  scrollbar-width:none;-ms-overflow-style:none;
  /* Fondu sur les bords : les cartes se dissolvent au lieu d'être tranchées.
     Les variables sont pilotées par le JS selon le sens encore scrollable. */
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 var(--fade-l,0px),#000 calc(100% - var(--fade-r,0px)),transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 var(--fade-l,0px),#000 calc(100% - var(--fade-r,0px)),transparent 100%);
  transition:-webkit-mask-image .3s,mask-image .3s;
}
.mh-rail::-webkit-scrollbar{display:none;}
.mh-rail:focus-visible{outline:2px solid var(--blue-500);outline-offset:-2px;border-radius:26px;}
.mh-rail.dragging{cursor:grabbing;scroll-snap-type:none;scroll-behavior:auto;}
.mh-rail.dragging *{pointer-events:none;}
.mh-rail > *{scroll-snap-align:start;flex:0 0 auto;}

/* Contrôles : points + flèches */
.mh-rail-ctrl{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:2px;}
.mh-rail-dots{display:flex;align-items:center;gap:8px;}
.mh-rail-dots button{
  width:9px;height:9px;padding:0;border:0;border-radius:999px;background:var(--gray-300);cursor:pointer;
  transition:width .35s cubic-bezier(.16,.84,.44,1),background .3s;
}
.mh-rail-dots button:hover{background:var(--gray-400);}
.mh-rail-dots button.on{width:30px;background:var(--mh-blue);}
.mh-rail-dots button:focus-visible{outline:2px solid var(--blue-500);outline-offset:3px;}
.mh-rail-btns{display:flex;gap:10px;}
.mh-rail-btns button{
  width:46px;height:46px;border-radius:50%;border:1.6px solid rgba(20,24,31,.16);background:#fff;
  font-size:18px;color:var(--mh-ink);cursor:pointer;line-height:1;
  transition:transform .18s cubic-bezier(.16,.84,.44,1),border-color .2s,color .2s,opacity .2s,box-shadow .25s;
}
.mh-rail-btns button:hover{transform:translateY(-2px);border-color:var(--blue-500);color:var(--blue-700);box-shadow:0 12px 24px -14px rgba(20,24,31,.4);}
.mh-rail-btns button:disabled{opacity:.3;pointer-events:none;}

/* ---------- Cartes "Cassez les codes" ----------
   Contour couleur, étiquette à cheval sur le bord haut et icône de l'app
   à cheval sur le bord bas (les vraies icônes de la nav mobile). */
/* Fond transparent : laisse voir la pointe du cœur du hero qui déborde ici. */
.mh-codes-sec{background:transparent;}
/* `overflow-x:auto` force `overflow-y` à ne plus être visible : sans cette
   réserve, l'étiquette et l'icône qui débordent des cartes seraient rognées. */
.mh-codes-sec .mh-rail{padding-top:26px;padding-bottom:58px;}
.mh-code-card{
  position:relative;width:min(420px,82vw);background:#fff;
  border:2px solid var(--cc,var(--blue-500));border-radius:22px;
  padding:34px 28px 56px;
  display:flex;flex-direction:column;
  transition:transform .3s,box-shadow .3s;
}
.mh-code-card:hover{transform:translateY(-6px);box-shadow:0 30px 60px -30px color-mix(in srgb,var(--cc) 45%,rgba(20,24,31,.3));}
.mh-code-tag{
  position:absolute;top:0;left:26px;transform:translateY(-52%);
  background:var(--cc,var(--blue-500));color:#fff;
  font-size:13px;font-weight:700;line-height:1.15;
  padding:8px 16px;border-radius:12px;max-width:calc(100% - 52px);
  box-shadow:0 10px 22px -12px color-mix(in srgb,var(--cc) 80%,transparent);
}
.mh-code-body{flex:1;}
.mh-code-card p{font-size:14.5px;line-height:1.55;color:var(--gray-600);margin:0 0 12px;}
.mh-code-card p:last-child{margin-bottom:0;}
.mh-code-card p b{color:var(--mh-ink);}
.mh-code-ic{
  position:absolute;bottom:0;left:28px;transform:translateY(50%);
  width:76px;height:76px;border-radius:50%;
  display:grid;place-items:center;
  background:#fff;box-shadow:0 12px 26px -14px rgba(20,24,31,.4);
}
.mh-code-ic img{display:block;width:48px;height:48px;}
/* LikeIcon embarque déjà son propre cercle blanc : il fait office de pastille. */
.mh-code-ic.bare{background:none;box-shadow:none;}
.mh-code-ic.bare img{width:76px;height:76px;filter:drop-shadow(0 12px 22px rgba(20,24,31,.28));}

/* ---------- Cartes témoignages ---------- */
.mh-pepites-sec{padding-top:0;background:#FBFBFD;}
/* Un seul rose dans la section : titre, guillemets et pastilles identiques. */
.mh-pepites-sec .mh-quote-card{--cc:var(--mh-pink);}
.mh-quote-card{
  position:relative;width:min(390px,82vw);margin:0;background:#fff;border:1px solid var(--gray-200);border-radius:26px;
  padding:30px 30px 26px;display:flex;flex-direction:column;
  transition:transform .3s,box-shadow .3s;
}
.mh-quote-card:hover{transform:translateY(-6px);box-shadow:0 30px 60px -30px rgba(20,24,31,.3);}
.mh-quote-mark{font-family:var(--font-display);font-size:64px;line-height:.6;color:var(--cc,var(--blue-500));display:block;margin:6px 0 16px;}
.mh-quote-card blockquote{font-size:18.5px;line-height:1.45;color:var(--mh-ink);font-weight:500;margin:0 0 22px;flex:1;}
.mh-quote-card figcaption{display:flex;align-items:center;gap:12px;}
.mh-quote-card .ava{
  width:42px;height:42px;border-radius:13px;flex:0 0 auto;display:grid;place-items:center;
  color:#fff;font-family:var(--font-display);font-size:19px;background:var(--cc,var(--blue-500));
}
.mh-quote-card figcaption b{display:block;font-size:15px;color:var(--mh-ink);}
.mh-quote-card figcaption small{display:block;font-size:12.5px;color:var(--gray-500);margin-top:1px;}

/* =====================================================================
   UNE SAFE PLACE — titre ROUGE centré + carte texte à liseré rouge +
   écran d'app présenté façon Apple (réf. Excalidraw)
   ===================================================================== */
.mh-safe-sec{padding-top:clamp(56px,7vw,96px);
  background:radial-gradient(820px 480px at 50% -6%,rgba(233,41,29,.07),transparent 60%),#FBFBFD;}
.mh-safe-head{text-align:center;margin:0 auto clamp(30px,4vw,48px);}
.mh-safe-kicker{display:inline-block;font-weight:800;letter-spacing:.16em;text-transform:uppercase;font-size:12.5px;color:var(--mh-red);margin-bottom:12px;}
.mh-safe-title{
  font-family:var(--font-display);font-weight:400;font-size:clamp(34px,5vw,64px);line-height:1;
  color:var(--mh-red);margin:0;
}
.mh-safe{
  border:2px solid var(--mh-red);border-radius:30px;background:#fff;
  padding:clamp(30px,4vw,52px);
  display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(28px,4vw,56px);align-items:center;
  box-shadow:0 34px 70px -44px rgba(233,41,29,.35);
}
.mh-safe-copy .big{font-family:var(--font-display);font-size:clamp(22px,2.5vw,30px);line-height:1.12;color:var(--mh-ink);margin:0 0 16px;}
.mh-safe-copy p{font-size:clamp(15.5px,1.5vw,17.5px);line-height:1.6;color:var(--gray-600);margin:0 0 16px;}
.mh-safe-copy p b{color:var(--mh-red);text-transform:uppercase;font-size:.92em;letter-spacing:.04em;}
.mh-safe-chips{display:flex;flex-wrap:wrap;gap:9px;margin-top:20px;}
.mh-safe-chips span{
  font-size:12.5px;font-weight:700;color:var(--mh-red);background:color-mix(in srgb,var(--mh-red) 8%,#fff);
  border:1px solid color-mix(in srgb,var(--mh-red) 28%,#fff);border-radius:999px;padding:8px 14px;
}
.mh-safe-visual{display:flex;justify-content:center;}
.mh-safe-visual .mh-shot{transform:rotate(-2deg);}
.mh-safe:hover .mh-shot{transform:rotate(0) translateY(-6px);}

/* =====================================================================
   COMMENT MURPHY FONCTIONNE — onglets + zigzag téléphones
   ===================================================================== */
.mh-how-sec{background:#fff;}
.mh-tabs{
  display:flex;justify-content:center;gap:8px;flex-wrap:wrap;
  width:max-content;max-width:100%;margin:0 auto clamp(30px,4vw,54px);
  background:var(--gray-100);border:1px solid var(--gray-200);border-radius:999px;padding:6px;
}
.mh-tab{
  font-family:var(--font-body);font-weight:700;font-size:15.5px;line-height:1;color:var(--mh-ink);
  background:transparent;border:0;border-radius:999px;padding:14px 26px;cursor:pointer;white-space:nowrap;
  transition:color .2s,background .3s,box-shadow .3s,transform .18s;
}
.mh-tab:hover{color:var(--mh-ink);}
.mh-tab.is-active{color:#fff;background:var(--mh-grad);background-size:180% 100%;box-shadow:0 10px 24px -10px rgba(219,144,164,.55);}

.mh-tabpanel{display:none;}
.mh-tabpanel.is-active{display:block;animation:mhPanelIn .5s cubic-bezier(.16,.84,.44,1);}
@keyframes mhPanelIn{from{opacity:0;transform:translateY(22px);}to{opacity:1;transform:none;}}

.mh-feature{
  display:grid;grid-template-columns:1fr .9fr;gap:clamp(14px,2vw,32px);align-items:center;
  /* bloc resserré et centré → la photo reste proche du texte (demande Quentin) */
  max-width:960px;margin-inline:auto;
  padding:clamp(20px,2.4vw,34px) 0;
}
.mh-feature:nth-of-type(even) .mh-feature-copy{order:2;}
.mh-feature-copy h3{
  position:relative;font-family:var(--font-display);font-weight:400;
  font-size:clamp(28px,3.4vw,44px);line-height:1;margin:0 0 18px;color:var(--mh-ink);padding-left:20px;
}
.mh-feature-copy h3,.mh-feature-copy h3 *{color:var(--mh-ink);}
.mh-feature-copy h3::before{content:"";position:absolute;left:0;top:6%;bottom:6%;width:6px;border-radius:99px;background:var(--fc,var(--blue-500));}
/* Toute la section est en noir (titre + corps) : demande Quentin, meilleur
   contraste que le gris d'origine. */
.mh-feature-copy p{font-size:15.5px;line-height:1.6;color:var(--mh-ink);margin:0 0 14px;max-width:480px;}
.mh-feature-copy p b,.mh-feature-copy li b{color:var(--mh-ink);}
.mh-feature-copy ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px;max-width:480px;}
.mh-feature-copy li{position:relative;padding-left:28px;font-size:15.5px;line-height:1.5;color:var(--mh-ink);}
.mh-feature-copy li::before{
  content:"";position:absolute;left:0;top:4px;width:16px;height:16px;border-radius:50%;
  background:color-mix(in srgb,var(--fc,var(--blue-500)) 18%,#fff);
  box-shadow:inset 0 0 0 4.5px color-mix(in srgb,var(--fc,var(--blue-500)) 75%,#fff);
}

/* ---------- Visuel de fonctionnalité ----------
   Écran rapproché du texte : aligné vers le bord intérieur (côté texte)
   pour éviter le grand vide entre la photo et la typo. */
.mh-feature-visual{display:flex;justify-content:flex-start;}
.mh-feature:nth-of-type(even) .mh-feature-visual{justify-content:flex-end;}

/* Vraies captures de l'app : le PNG embarque déjà le cadre du téléphone et
   son ombre (fond transparent) → aucun encadrement CSS par-dessus.
   Dimensionné en hauteur pour rester à la taille du bloc de texte voisin. */
.mh-shot{
  width:auto;height:clamp(280px,33vw,384px);max-width:100%;
  transition:transform .45s cubic-bezier(.16,.84,.44,1);
}
.mh-feature:hover .mh-shot{transform:translateY(-8px) scale(1.02);}
/* Écran d'inclusion en "gros angle" (recadré serré) : plus grand */
.mh-shot-wide{height:clamp(320px,40vw,480px);}

/* =====================================================================
   DÉMO SWIPE — « À toi d'essayer » (conservée de l'ancienne home)
   ===================================================================== */
.mh-try-sec{padding-top:0;background:#fff;}
.mh-demo{display:flex;flex-direction:column;align-items:center;}
.mh-demo-head{text-align:center;max-width:560px;margin-bottom:34px;}
.mh-demo-badge{display:inline-block;font-size:11.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#fff;
  background:var(--mh-grad);background-size:180% 100%;border-radius:999px;padding:7px 15px;margin-bottom:16px;box-shadow:0 8px 20px -8px rgba(219,144,164,.5);}
.mh-demo-head h3{font-family:var(--font-display);font-weight:400;font-size:clamp(28px,3.4vw,44px);line-height:1;margin:0 0 12px;color:var(--mh-ink);}
.mh-demo-head p{font-size:15px;color:var(--gray-600);margin:0;}
.mh-demo-head p b{color:var(--gray-700);font-weight:700;white-space:nowrap;}
.mh-demo .mh-deck-wrap{margin-bottom:30px;} /* place pour les boutons à cheval sur le bord bas */

.mh-deck-wrap{position:relative;z-index:3;justify-self:center;width:100%;max-width:380px;}
.mh-deck{position:relative;width:100%;aspect-ratio:5/6.4;touch-action:pan-y;}
.mh-card{
  position:absolute;inset:0;background:#fff;border-radius:26px;overflow:hidden;
  border:1px solid var(--gray-200);
  box-shadow:0 30px 60px -24px color-mix(in srgb,var(--cc) 30%,rgba(20,24,31,.34)),0 10px 24px -14px rgba(20,24,31,.2);
  display:flex;flex-direction:column;cursor:grab;user-select:none;
  transform-origin:center bottom;will-change:transform;
  --cc:var(--blue-500);
}
.mh-card:active{cursor:grabbing;}
.mh-card::before{content:"";position:absolute;top:0;left:0;right:0;height:6px;background:var(--cc);z-index:3;}
/* Carte-annonce : même anatomie que JobFeedCard.tsx de l'app mobile —
   bandeau blanc surélevé (logo cerclé + contrat + poste, badge match en
   débord), puces d'infos, bande photos, bloc vocal. */
.mh-jc-head{
  position:relative;z-index:2;flex:0 0 auto;
  margin:16px 16px 0;padding:12px 14px;
  background:#fff;border-radius:14px;
  display:flex;align-items:center;gap:12px;
  box-shadow:0 8px 20px -10px color-mix(in srgb,var(--cc) 70%,transparent),0 2px 6px rgba(20,24,31,.08);
}
.mh-jc-logo{width:52px;height:52px;flex:0 0 auto;border-radius:50%;border:3px solid var(--cc);}
.mh-jc-id{min-width:0;display:flex;flex-direction:column;gap:1px;}
.mh-jc-id .ct{font-family:var(--font-display);font-size:14px;line-height:1.1;color:var(--cc);}
.mh-jc-id .co{font-family:var(--font-display);font-size:15px;line-height:1.1;color:var(--mh-ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.mh-jc-id .ro{font-size:12.5px;font-weight:700;color:var(--gray-600);line-height:1.25;margin-top:2px;}
.mh-jc-match{
  position:absolute;top:-11px;right:-7px;z-index:3;
  background:var(--cc);color:#fff;border-radius:14px;padding:6px 11px 7px;text-align:center;
  box-shadow:0 4px 10px rgba(20,24,31,.25);
}
.mh-jc-match b{display:block;font-family:var(--font-display);font-size:16px;line-height:1;}
.mh-jc-match small{display:block;font-size:8.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;opacity:.92;line-height:1;margin-top:3px;}

.mh-jc-body{flex:1;min-height:0;display:flex;flex-direction:column;gap:12px;padding:14px 0 56px 16px;}

/* Puces d'infos : défilement horizontal comme dans l'app */
.mh-jc-chips{display:flex;gap:6px;overflow-x:auto;padding-right:16px;scrollbar-width:none;}
.mh-jc-chips::-webkit-scrollbar{display:none;}
.mh-jc-chips span{
  flex:0 0 auto;font-size:12px;font-weight:600;color:var(--gray-700);
  border:1px solid var(--gray-300);border-radius:12px;padding:6px 10px;white-space:nowrap;
}

/* Bande photos de l'entreprise */
.mh-jc-photos{display:flex;gap:10px;overflow-x:auto;padding-right:16px;scrollbar-width:none;}
.mh-jc-photos::-webkit-scrollbar{display:none;}
.mh-jc-photos img{
  flex:0 0 auto;width:150px;height:190px;border-radius:16px;object-fit:cover;
  background:var(--gray-100);
}

/* Bloc vocal de l'entreprise */
.mh-jc-audio{margin-top:auto;padding-right:16px;}
.mh-jc-audio .t{font-family:var(--font-display);font-size:14px;line-height:1.15;color:var(--mh-ink);margin:0 0 7px;}
.mh-jc-audio .p{
  display:flex;align-items:center;gap:10px;
  background:color-mix(in srgb,var(--cc) 9%,#fff);border:1px solid color-mix(in srgb,var(--cc) 26%,#fff);
  border-radius:999px;padding:7px 12px;
}
.mh-jc-audio .go{
  width:26px;height:26px;flex:0 0 auto;border-radius:50%;background:var(--cc);color:#fff;
  display:grid;place-items:center;font-size:10px;padding-left:2px;
}
.mh-jc-audio .wv{flex:1;display:flex;align-items:center;gap:3px;height:20px;}
.mh-jc-audio .wv i{flex:1;background:color-mix(in srgb,var(--cc) 55%,#fff);border-radius:2px;}
.mh-jc-audio .wv i:nth-child(3n){height:70%;}
.mh-jc-audio .wv i:nth-child(3n+1){height:40%;}
.mh-jc-audio .wv i:nth-child(3n+2){height:95%;}
.mh-jc-audio .wv i:nth-child(-n+5){background:var(--cc);}
.mh-jc-audio .d{flex:0 0 auto;font-size:11px;font-weight:700;color:var(--gray-500);}

/* Overlays LIKE / NOPE / SUPER */
.mh-ov{position:absolute;top:26px;z-index:4;font-family:var(--font-display);font-size:32px;letter-spacing:.02em;padding:6px 16px;border:4px solid;border-radius:12px;opacity:0;pointer-events:none;}
.mh-ov.like{left:22px;color:#1F9D6B;border-color:#1F9D6B;transform:rotate(-14deg);}
.mh-ov.nope{right:22px;color:#E9291D;border-color:#E9291D;transform:rotate(14deg);}
.mh-ov.super{left:50%;top:auto;bottom:96px;transform:translateX(-50%) rotate(-6deg);color:var(--blue-600);border-color:var(--blue-600);}

/* Actions — superposées sur le bas de la carte, comme dans l'app :
   ❌ Pass | SUPERLIKE | ❤️ Like, à cheval sur le bord bas du deck.
   Le conteneur laisse passer le drag (pointer-events:none), seuls les
   boutons capturent le pointeur. */
.mh-deck-actions{
  position:absolute;left:0;right:0;bottom:-26px;z-index:24;
  display:flex;justify-content:center;align-items:center;gap:24px;
  pointer-events:none;
}
.mh-act{
  pointer-events:auto;background:none;border:0;padding:0;margin:0;cursor:pointer;
  display:grid;place-items:center;
  filter:drop-shadow(0 10px 14px rgba(20,24,31,.24));
  transition:transform .16s cubic-bezier(.16,.84,.44,1),filter .2s;will-change:transform;
}
.mh-act:hover{transform:translateY(-3px) scale(1.08);filter:drop-shadow(0 14px 20px rgba(20,24,31,.32));}
.mh-act:active{transform:scale(.92);}
.mh-act img{display:block;pointer-events:none;}
.mh-act.pass img{width:56px;height:auto;}
.mh-act.like img{width:60px;height:auto;}
.mh-act.sl{background:#fff;border-radius:10px;padding:12px 14px;}
.mh-act.sl img{width:82px;height:auto;}

/* Etat vide du deck */
.mh-deck-end{position:absolute;inset:0;z-index:30;border-radius:26px;display:none;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:14px;padding:28px;
  background:linear-gradient(160deg,#fff,#F6F1FA);border:1px solid var(--gray-200);box-shadow:0 30px 60px -24px rgba(20,24,31,.3);}
.mh-deck-end.show{display:flex;animation:mhPop .5s cubic-bezier(.16,.84,.44,1);}
.mh-deck-end h3{font-family:var(--font-display);font-size:26px;margin:0;color:var(--mh-ink);}
.mh-deck-end p{font-size:14px;color:var(--gray-600);margin:0;}
.mh-step-replay.linklike{background:none;border:0;cursor:pointer;font-size:13px;font-weight:700;color:var(--gray-500);}
.mh-step-replay.linklike:hover{color:var(--blue-600);}
@keyframes mhPop{from{opacity:0;transform:scale(.9);}to{opacity:1;transform:scale(1);}}

/* Popup "C'est un match !" (z > cartes empilées en z-index 20-i) */
.mh-match-pop{position:absolute;inset:0;z-index:40;display:none;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:8px;
  border-radius:26px;color:#fff;padding:24px;background:linear-gradient(160deg,#5A86D0,#3f6cba);}
.mh-match-pop.show{display:flex;animation:mhPop .45s cubic-bezier(.16,.84,.44,1);}
.mh-match-pop .big{font-family:var(--font-display);font-size:38px;line-height:.95;margin:0;text-shadow:0 4px 20px rgba(0,0,0,.18);}
.mh-match-pop p{font-size:14.5px;margin:0;opacity:.95;max-width:230px;}
.mh-match-pop .btns{display:flex;gap:10px;margin-top:8px;}
.mh-match-pop .mini{background:#fff;color:var(--blue-700);font-weight:700;font-size:13.5px;padding:11px 18px;border-radius:999px;border:0;cursor:pointer;}
.mh-match-pop .mini.ghost{background:rgba(255,255,255,.16);color:#fff;border:1.5px solid rgba(255,255,255,.5);}
.mh-confetti{position:absolute;inset:0;z-index:45;pointer-events:none;width:100%;height:100%;}

/* =====================================================================
   TARIFS ENTREPRISES (réintroduits — accent bleu uni)
   ===================================================================== */
.mh-pricing{background:#FBFBFD;}
.mh-plans{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:stretch;}
.mh-price-card{position:relative;background:#fff;border:1px solid var(--gray-200);border-radius:26px;padding:36px 30px 30px;display:flex;flex-direction:column;transition:transform .3s,box-shadow .3s,border-color .3s;}
.mh-price-card::before{content:"";position:absolute;top:0;left:0;right:0;height:5px;border-radius:26px 26px 0 0;background:var(--pc,var(--mh-blue));}
.mh-price-card:hover{transform:translateY(-6px);box-shadow:0 30px 60px -30px color-mix(in srgb,var(--pc,var(--mh-blue)) 45%,rgba(20,24,31,.3));}
.mh-price-card.is-popular{border-color:color-mix(in srgb,var(--pc,var(--mh-blue)) 55%,#fff);box-shadow:0 34px 70px -34px color-mix(in srgb,var(--pc,var(--mh-blue)) 55%,transparent);}
@media(min-width:981px){.mh-price-card.is-popular{transform:scale(1.04);}.mh-price-card.is-popular:hover{transform:scale(1.04) translateY(-6px);}}
.mh-price-badge{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--mh-grad);background-size:180% 100%;color:#fff;font-size:12px;font-weight:800;letter-spacing:.03em;padding:6px 15px;border-radius:999px;white-space:nowrap;box-shadow:0 8px 20px -6px rgba(219,144,164,.5);}
.mh-price-name{font-family:var(--font-display);font-size:24px;color:var(--mh-ink);margin-top:4px;}
.mh-price{display:flex;align-items:baseline;gap:5px;margin:10px 0 4px;}
.mh-price b{font-family:var(--font-display);font-weight:400;font-size:44px;line-height:1;color:var(--mh-ink);}
.mh-price span{font-size:15px;font-weight:600;color:var(--gray-500);}
.mh-price-desc{font-size:14.5px;color:var(--gray-600);margin:0 0 20px;}
.mh-price-feats{list-style:none;margin:0 0 26px;padding:0;display:flex;flex-direction:column;gap:12px;flex:1;}
.mh-price-feats li{position:relative;padding-left:30px;font-size:14.5px;color:var(--gray-700);line-height:1.35;}
.mh-price-feats li::before{content:"";position:absolute;left:0;top:0;width:20px;height:20px;border-radius:50%;background:color-mix(in srgb,var(--pc,var(--mh-blue)) 16%,#fff);}
.mh-price-feats li::after{content:"✓";position:absolute;left:5px;top:0;font-size:12px;font-weight:800;color:var(--pc,var(--mh-blue));}
.mh-price-cta{width:100%;justify-content:center;margin-top:auto;}
.mh-price-cta.mh-btn-grad{background:var(--pc,var(--mh-blue));box-shadow:0 12px 26px -12px color-mix(in srgb,var(--pc,var(--mh-blue)) 70%,transparent);}
.mh-price-cta.mh-btn-grad:hover{filter:brightness(1.05);background:var(--pc,var(--mh-blue));}
.mh-price-cta.mh-btn-ghost{background:#fff;border-color:color-mix(in srgb,var(--pc,var(--mh-blue)) 45%,#fff);color:color-mix(in srgb,var(--pc,var(--mh-blue)) 78%,#000);}
.mh-price-cta.mh-btn-ghost:hover{background:color-mix(in srgb,var(--pc,var(--mh-blue)) 9%,#fff);border-color:var(--pc,var(--mh-blue));}
.mh-price-note{text-align:center;margin:36px 0 0;font-size:14px;color:var(--gray-500);}

/* =====================================================================
   L'AVENTURE COMMENCE ICI — bloc centré, épuré (réf. Excalidraw)
   ===================================================================== */
.mh-final-sec{position:relative;z-index:2;padding:clamp(48px,7vw,96px) 26px;}
/* Encadré multicolore + écriture blanche, centré (demande Quentin) */
.mh-final{position:relative;max-width:1000px;margin:0 auto;text-align:center;isolation:isolate;
  border-radius:34px;overflow:hidden;color:#fff;
  padding:clamp(44px,6vw,72px) clamp(28px,5vw,64px);
  background:var(--mh-grad);background-size:200% 200%;animation:mhFlow 9s ease infinite;
  box-shadow:0 34px 80px -40px rgba(219,144,164,.5);}
.mh-final h2{font-family:var(--font-display);font-weight:400;font-size:clamp(34px,5vw,64px);line-height:1;margin:0 0 20px;color:#fff;text-shadow:0 4px 22px rgba(0,0,0,.16);}
.mh-final p{margin:0 auto 12px;color:rgba(255,255,255,.94);font-size:clamp(16px,1.7vw,19px);max-width:660px;}
.mh-final p.strong{color:#fff;font-weight:700;}
.mh-final-cta{display:flex;gap:12px;flex-wrap:wrap;align-items:center;justify-content:center;margin-top:28px;}
.mh-final-cta .mh-btn-grad{background:#fff;color:var(--red-500);font-weight:800;box-shadow:0 12px 30px -12px rgba(0,0,0,.35);}
.mh-final-cta .mh-btn-grad:hover{background:#fff;transform:translateY(-2px);box-shadow:0 16px 40px -12px rgba(0,0,0,.4);}
.mh-final-cta .mh-btn-ghost{background:rgba(255,255,255,.14);color:#fff;border-color:rgba(255,255,255,.6);backdrop-filter:blur(4px);}
.mh-final-cta .mh-btn-ghost:hover{background:rgba(255,255,255,.24);border-color:#fff;color:#fff;}
.mh-final-stores{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:20px;}
.mh-store{
  display:inline-flex;align-items:center;gap:9px;
  font-size:14px;font-weight:700;color:#fff;line-height:1;
  background:var(--mh-ink);border-radius:999px;padding:13px 20px;
  transition:transform .18s cubic-bezier(.16,.84,.44,1),background .2s;
}
.mh-store:hover{transform:translateY(-2px);background:#000;}
.mh-store svg{width:18px;height:18px;flex:0 0 auto;}

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media(max-width:980px){
  /* Mobile : cœur incliné derrière le titre, estompé pour la lisibilité. */
  .mh-heart{left:50%;top:24%;transform:translate(-50%,-50%) rotate(18deg);right:auto;opacity:.16;height:min(64vh,560px);}
  .mh-hero{padding-top:48px;}
  .mh-hero-grid{grid-template-columns:1fr;gap:36px;}
  .mh-hero-side{justify-self:stretch;max-width:560px;}
  .mh-safe{grid-template-columns:1fr;}
  .mh-safe-visual{order:-1;}
  .mh-plans{grid-template-columns:1fr;max-width:440px;margin:0 auto;}
  .mh-feature{grid-template-columns:1fr;gap:30px;}
  .mh-feature:nth-of-type(even) .mh-feature-copy{order:0;}
  .mh-feature-visual{order:2;}
}
@media(max-width:560px){
  .mh .container{padding:0 18px;}
  .mh-hero{min-height:auto;padding:38px 0 52px;}
  .mh-btn{padding:15px 22px;font-size:14.5px;}
  .mh-hero-link{padding:13px 18px;font-size:13.5px;}
  .mh-qr{display:none;}
  .mh-scroll{display:none;}
  /* Panneau a11y : pleine largeur du hero sur petit écran */
  .mh-a11y-panel{left:0;right:0;width:auto;}
  .mh-hero-side{gap:18px;}
  /* Champ + bouton empilés : côte à côte, le bouton écraserait l'email */
  .mh-join-line{flex-direction:column;align-items:stretch;gap:8px;}
  .mh-join-go{padding:15px 20px;}
  .mh-rail-wrap{--rail-pad:18px;}
  .mh-rail{gap:14px;padding:10px var(--rail-pad) 26px;}
  .mh-rail-ctrl{margin-top:0;}
  .mh-tabs{width:100%;}
  .mh-tab{flex:1;padding:13px 10px;font-size:13.5px;}
  .mh-deck-actions{gap:16px;bottom:-22px;}
  .mh-act.pass img{width:50px;}
  .mh-act.like img{width:54px;}
  .mh-act.sl{padding:10px 12px;}
  .mh-act.sl img{width:72px;}
}

/* ---------- Reduced motion ---------- */
@media(prefers-reduced-motion:reduce){
  .mh *{animation-duration:.001s !important;animation-iteration-count:1 !important;transition-duration:.001s !important;}
  .mh-heart path{stroke-dashoffset:0 !important;}
  .mh-title .line > span{transform:none !important;}
  .mh [data-reveal]{opacity:1 !important;transform:none !important;}
  .mh-glow{display:none;}
  .mh-rail{scroll-behavior:auto;}
}