/* Handoff EN, refonte du 10/11 (PRODUIT ; liste de Kevin relayée par le LEAD à 11:20, points 1 à 7).
   Système V4 seulement : --b-blue #4458AC, --b-ink #263153, --b-lavender #EEF0FC, --b-lime #E4EE99, --b-muted #5C6480, --b-paper #FCFCFF.
   Hero, FAQ, closer et pied : inchangés, sauf l'état au survol des deux « Add to Chrome ».
   Passe v3 (PRODUIT, retour de Kevin relayé par le LEAD à 13:20) : ① « Why Handoff » et « What it does » ne font plus qu'UNE section
   de quatre blocs alternés ; ③ « How it works » porte le contrat d'ÉTAPES (home-sections-v4/etapes.*) et tient dans l'écran ;
   ④ fonds clairs et calmes. Le seul aplat fort de la page reste la carte bleue du closer (inchangée). */
.hf3{--hr-blue:#4458AC;--hr-blue-d:#36478F;--hr-ink:#263153;--hr-lav:#EEF0FC;--hr-lime:#E4EE99;--hr-lime-soft:#F2F6CF;--hr-muted:#5C6480;--hr-paper:#FCFCFF}

/* ── 2 · L'artefact du hero : la barre d'adresse porte le logo et la vraie adresse, le bleu en valeur ── */
.hf3 .hf-screen{transition:transform .28s cubic-bezier(.2,.7,.2,1),box-shadow .28s ease;border-color:#cdd5f1;box-shadow:0 40px 90px -50px #26315399,0 0 0 1px #4458ac14}
.hf3 .hf-screen:hover,.hf3 .hf-screen:focus-within{transform:translateY(-6px);box-shadow:0 56px 110px -54px #4458acb3,0 0 0 1px #4458ac4d}
.hf3 .hf-screen-bar{background:var(--hr-blue);border-bottom:0;padding:12px 18px;gap:7px}
.hf3 .hf-screen-bar span{background:#ffffff4d}
.hf3 .hf-screen-bar .hf-address{display:inline-flex;align-items:center;gap:9px;margin:0 0 0 16px;padding:5px 16px 5px 5px;border-radius:999px;background:#ffffff1f;border:1px solid #ffffff33;font:500 13px/1 DM,Arial,sans-serif;color:#fff;letter-spacing:.01em}
.hf3 .hf-screen-bar .hf-address img{display:block;width:20px;height:20px;border-radius:6px}
.hf3 .hf-showcase .hf-example-bar{border-bottom:1px solid #e3e8f8;color:var(--hr-blue)}
.hf3 .hf-showcase .hf-example-dot{background:var(--hr-lime);box-shadow:0 0 0 3px #4458ac;width:7px;height:7px;flex:0 0 7px}
.hf3 .hf-showcase .hf-doc-body.result-text{border-left:3px solid var(--hr-blue)}
.hf3 .hf-showcase .hf-doc-badge{padding:7px 12px;font-size:13px}
/* DA V4, 12/11/2026 (LEAD 13:2x UTC, remarque de QUALITÉ 2) : la puce du document d'exemple prend la teinte de son outil, comme la
   pastille du hero : [data-outil] pose --uck-p-bg / --uck-p-ink (systeme-v4/uncook-v4.css). Repli : le bleu et le blanc d'avant
   (prototype-2213.css), pour une page qui chargerait cette feuille sans le système. */
.hf3 .hf-showcase .hf-doc-badge[data-outil]{background:var(--uck-p-bg,#4458ac);color:var(--uck-p-ink,#fff)}
.hf3 .hf-example-foot{display:flex;align-items:center;gap:20px;flex-wrap:wrap;padding:18px 28px 20px;border-top:1px solid #e3e8f8}
.hf3 .hf-example-foot p{margin:0;color:var(--hr-muted)}
.hf3 .hf-example-open{display:inline-flex;align-items:center;gap:14px;min-height:46px;padding:12px 18px 12px 20px;border:0;border-radius:10px;background:var(--hr-blue);color:#fff;font:600 15px/1.2 DM,Arial,sans-serif;box-shadow:0 10px 22px -14px #4458acee;cursor:pointer;transition:background-color .2s ease,transform .2s ease,box-shadow .2s ease}
.hf3 .hf-example-open span{font-size:17px;transition:transform .2s ease}
.hf3 .hf-example-open:hover{background:var(--hr-blue-d);transform:translateY(-1px);box-shadow:0 14px 26px -14px #4458acf2}
.hf3 .hf-example-open:hover span{transform:translate(2px,-2px)}
.hf3 .hf-example-open:focus-visible{outline:3px solid var(--hr-blue);outline-offset:3px}

/* ── 3 · Survol : « Add to Chrome » du hero et du closer ── */
.hf3 #handoff .hero-action .button{transition:background-color .2s ease,transform .2s ease,box-shadow .2s ease;box-shadow:0 10px 22px -16px #4458acee}
.hf3 #handoff .hero-action .button span{transition:transform .2s ease}
.hf3 #handoff .hero-action .button:hover{background:var(--hr-blue-d);transform:translateY(-2px);box-shadow:0 18px 30px -16px #4458acf2}
.hf3 #handoff .hero-action .button:hover span{transform:translate(2px,-2px)}
.hf3 #handoff .hero-action .button:focus-visible{outline:3px solid var(--hr-blue);outline-offset:4px}
.hf3>#closer-call.hf-tool-closer .chrome-cta{transition:background-color .2s ease,transform .2s ease,box-shadow .2s ease}
.hf3>#closer-call.hf-tool-closer .chrome-cta:hover{background:#eef4b4;transform:translateY(-2px);box-shadow:0 16px 30px -16px #10183088}

/* ── Sur-titres : la forme des sections de /_home-v4/ (.section-kicker) ── */
.hf3 .hf-prototype .hf-kicker{display:inline-flex;align-items:center;gap:10px;font:700 12px/1.5 DM,Arial,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--hr-blue);margin:0 0 16px}
/* 10/11 (Kevin, via LEAD 16:4x) : plus de tiret devant les sur-titres, le sur-titre reste. */

/* ── ④ Fonds : clairs et calmes. Lavande pâle → blanc V4 pour les quatre blocs, lime très doux pour How it works, blanc pour la FAQ.
   Un seul aplat fort sur toute la page : la carte bleue du closer, qui ferme la page (inchangée). Contraste mesuré au pixel. ── */
.hf3 .hf-prototype .hf-why,.hf3 .hf-prototype .hf-how{position:relative;overflow:hidden;isolation:isolate}
.hf3 .hf-prototype .hf-why>.frame,.hf3 .hf-prototype .hf-how>.frame{position:relative;z-index:1}

/* ── ① Why Handoff : une section, quatre blocs alternés gauche / droite, chacun avec sa boucle, beaucoup d'air ── */
.hf3 .hf-prototype .hf-why{padding:112px 0 136px;background:linear-gradient(180deg,#F0F2FC 0%,#F5F6FE 46%,#FCFCFF 100%)}
.hf3 .hf-prototype .hf-why:before{content:'';position:absolute;z-index:0;width:560px;height:200px;border-radius:999px;background:#F2F6CF;filter:blur(80px);opacity:.75;right:-120px;top:34%;transform:rotate(-12deg)}
.hf3 .hf-prototype .hf-why:after{content:'';position:absolute;z-index:0;width:520px;height:190px;border-radius:999px;background:#E3E7FB;filter:blur(80px);opacity:.8;left:-160px;top:62%;transform:rotate(10deg)}
.hf3 .hf-why-head{max-width:46rem}
.hf3 .hf-prototype .hf-why h2{margin:0}
.hf3 .hf-why .hf-block{display:grid;grid-template-columns:5fr 7fr;gap:96px;align-items:center;padding:0;margin:88px 0 0}
.hf3 .hf-why .hf-block+.hf-block{margin-top:144px}
.hf3 .hf-why .hf-block:nth-of-type(even){grid-template-columns:7fr 5fr}
.hf3 .hf-why .hf-block:nth-of-type(even) .hf-block-copy{order:2}
.hf3 .hf-block-tag{display:inline-flex;align-items:center;gap:12px;margin:0 0 22px;font:600 15px/1.2 DM,Arial,sans-serif;color:var(--hr-blue);letter-spacing:.01em}
.hf3 .hf-block-tag span{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--hr-lime);color:var(--hr-ink);font:700 12px/1 Jakarta,Arial,sans-serif;letter-spacing:.02em}
.hf3 .hf-why .hf-block-copy h3{font:700 44px/1.1 Jakarta,Arial,sans-serif;letter-spacing:-.04em;color:var(--hr-ink);margin:0 0 20px}
.hf3 .hf-why .hf-block-copy p:not(.hf-block-tag){font:400 19px/1.6 DM,Arial,sans-serif;color:var(--hr-muted);margin:0;max-width:38ch}
/* La scène pâle de la page tient la place de la boucle avant son montage ; montée, la boucle porte sa propre scène (règle :has plus bas). */
.hf3 .hf-why .hf-block-stage{position:relative;margin:0;border:0;border-radius:30px;padding:44px;overflow:hidden;isolation:isolate;background:linear-gradient(150deg,#F4F6FF 0%,#DCE2FA 100%);box-shadow:0 40px 80px -56px #26315366}
.hf3 .hf-why .hf-block-stage .hb{display:block;position:relative;width:100%}
.hf3 .hf-why .hf-block-stage .hb:empty{aspect-ratio:4/3;min-block-size:240px;border-radius:20px;background:#ffffffa6;box-shadow:inset 0 0 0 1px #ffffff}

/* ── ③ How it works : le contrat d'ÉTAPES, la section tient dans l'écran (≤ 900 px à 1440) ── */
.hf3 .hf-prototype .hf-how{padding:40px 0;background:linear-gradient(180deg,#F8FAE8 0%,#F3F6D9 100%)}
/* La rangée d'ÉTAPES mesure 703 px à 1440 (e60e5e17) : le cadre de section n'en garde que ~190 pour tenir dans 900 (892 mesurés). */
.hf3 .hf-prototype .hf-how .hf-kicker{margin-bottom:10px}
.hf3 .hf-prototype .hf-how:before{content:'';position:absolute;z-index:0;width:520px;height:170px;border-radius:999px;background:#ffffff;filter:blur(70px);opacity:.8;left:28%;top:-50px;transform:rotate(-8deg)}
.hf3 .hf-prototype .hf-how h2{margin:0 0 20px}
/* 10/11 (PRODUIT) : la rangée « How it works » est tenue par etapes.css ; l'ancien repli en grille (spécificité nulle) est retiré : avant l'arrivée du module, il montrait 3 colonnes égales et des visuels coupés. */

/* ── Mouvement au défilement : classe posée par IntersectionObserver (refonte-1110.js), jamais sous prefers-reduced-motion ── */
.hf-rv .hf3 [data-hf-rv]{opacity:0;transform:translateY(22px);transition:opacity .55s ease var(--d,0ms),transform .7s cubic-bezier(.2,.7,.2,1) var(--d,0ms)}
.hf-rv .hf3 [data-hf-rv].is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .hf3 .hf-screen,.hf3 .hf-example-open,.hf3 .hf-example-open span,.hf3 #handoff .hero-action .button,.hf3 #handoff .hero-action .button span,.hf3>#closer-call.hf-tool-closer .chrome-cta{transition:none}
  .hf3 .hf-screen:hover,.hf3 .hf-screen:focus-within,.hf3 .hf-example-open:hover,.hf3 #handoff .hero-action .button:hover,.hf3>#closer-call.hf-tool-closer .chrome-cta:hover{transform:none}
  .hf3 .hf-example-open:hover span,.hf3 #handoff .hero-action .button:hover span{transform:none}
}

/* ── Tablette ── */
@media (max-width:1100px){
  .hf3 .hf-why .hf-block,.hf3 .hf-why .hf-block:nth-of-type(even){gap:56px}
  .hf3 .hf-why .hf-block-copy h3{font-size:38px}
  .hf3 .hf-why .hf-block-stage{padding:32px}
}
/* ── Mobile ── */
@media (max-width:900px){
  .hf3 .hf-prototype .hf-why{padding:72px 0 88px}
  .hf3 .hf-why .hf-block,.hf3 .hf-why .hf-block:nth-of-type(even){grid-template-columns:minmax(0,1fr);gap:28px;margin-top:56px}
  .hf3 .hf-why .hf-block+.hf-block{margin-top:96px}
  .hf3 .hf-why .hf-block:nth-of-type(even) .hf-block-copy{order:0}
  .hf3 .hf-why .hf-block-copy h3{font-size:32px}
  .hf3 .hf-why .hf-block-copy p:not(.hf-block-tag){font-size:17px}
  .hf3 .hf-why .hf-block-stage{padding:22px;border-radius:24px}
  .hf3 .hf-prototype .hf-how{padding:64px 0 72px}
}
@media (max-width:760px){
  .hf3 .hf-screen-bar{padding:10px 12px}
  .hf3 .hf-screen-bar .hf-address{margin-left:8px;font-size:12px;padding:4px 12px 4px 4px;gap:7px}
  .hf3 .hf-screen-bar .hf-address img{width:18px;height:18px;border-radius:5px}
  .hf3 .hf-example-foot{padding:16px 20px 18px;gap:12px}
  .hf3 .hf-example-open{font-size:14px;min-height:44px}
  .hf3 .hf-prototype .hf-kicker{font-size:11px;margin-bottom:12px}
  .hf3 .hf-prototype .hf-how h2{margin-bottom:28px}
  .hf3 .hf-block-tag{font-size:14px;margin-bottom:16px}
  .hf3 .hf-block-tag span{width:30px;height:30px}
  .hf3 .hf-why .hf-block-copy h3{font-size:29px;margin-bottom:14px}
  .hf3 .hf-why .hf-block-stage{padding:16px;border-radius:22px}
}
/* 10/11 (PRODUIT) : quand la boucle est montée, elle porte sa propre scène (gradient à formes, référence Callie). La scène pâle de la page s'efface : un seul cadre, pas trois.
   Passe v3 : la règle suit les blocs dans leur nouvelle section (.hf-why au lieu de .hf-blocks). */
.hf3 .hf-why .hf-block-stage:has(.hb-stage){background:none;padding:0;box-shadow:none;border-radius:0;overflow:visible}
.hf3 .hf-why .hf-block-stage:has(.hb-stage):before,.hf3 .hf-why .hf-block-stage:has(.hb-stage):after{content:none}
/* 10/11 (PRODUIT, défaut de QUALITÉ 14:0x) : « How it works » collait aux bords entre la largeur max du cadre et 1200 px. prototype-2213.css y met .frame à width:100% ; on rend la gouttière commune des pages V4. */
.hf3 .hf-prototype .hf-how>.frame{width:calc(100% - var(--gutter)*2)}

/* 10/11 train 3 (Kevin, via LEAD 16:4x) — Why Handoff : en-tête centré avec un texte de 2 lignes,
   un peu plus d'air entre les blocs 01 · 02 · 03 · 04. */
.hf3 .hf-why-head{max-width:46rem;margin:0 auto;text-align:center;display:flex;flex-direction:column;align-items:center}
.hf3 .hf-prototype .hf-why-head .hf-kicker{justify-content:center}
.hf3 .hf-prototype .hf-why-lede{font:400 19px/1.6 DM,Arial,sans-serif;color:var(--hr-muted);margin:20px 0 0;max-width:40rem}
.hf3 .hf-why .hf-block{margin-top:112px}
.hf3 .hf-why .hf-block+.hf-block{margin-top:184px}
@media (max-width:900px){
  .hf3 .hf-why .hf-block{margin-top:72px}
  .hf3 .hf-why .hf-block+.hf-block{margin-top:120px}
}
@media (max-width:600px){
  .hf3 .hf-prototype .hf-why-lede{font-size:17px}
  .hf3 .hf-prototype .hf-why-lede br{display:none}
}

/* ---------- T3-A (PRODUIT, 10/11, Kevin via LEAD) : How it works, mêmes règles que la Home ----------
   Pleine hauteur, contenu centré ; en-tête centré (sur-titre, titre, deux lignes de texte) ; la rangée des étapes
   (etapes.css) garde sa largeur. Le tiret du sur-titre est retiré par LEAD (l. 39), pas ici. Bloc à moi, en fin de fichier. */
.hf3 .hf-prototype .hf-how{min-height:100svh;display:flex;align-items:center}
.hf3 .hf-prototype .hf-how>.frame{text-align:center}
.hf3 .hf-prototype .hf-how>.frame>h2{margin-inline:auto;margin-bottom:0}
.hf3 .hf-prototype .hf-how .hf-how-chapo{max-width:62ch;margin:14px auto 32px;font:400 18px/1.55 DM,Arial,sans-serif;color:#5C6480;text-wrap:balance}
.hf3 .hf-prototype .hf-how .uck-etapes{text-align:start}
@media(min-width:761px){.hf3 .hf-prototype .hf-how .hf-how-chapo>span{display:block}}
@media(max-width:760px){.hf3 .hf-prototype .hf-how .hf-how-chapo{font-size:16px;margin-bottom:24px}}