.budget-payment{--green:#008074;--ink:#173c33;--muted:#5b6f68;--line:#dce5dc;--pause:#b9791f;--pause-bg:#fbf3e6;--mint:#e8f5f3;}
.hrg .grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:30px}.hrg .icon{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:50%;background:var(--mint);font-size:20px;margin-bottom:12px}.hrg .icon.is-pause{background:var(--pause-bg);color:var(--pause);font-weight:700}
@media(max-width:900px){.hrg .grid3{grid-template-columns:1fr}.hrg .months{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(max-width:520px){.hrg .months{grid-template-columns:repeat(2,minmax(0,1fr))}}
.hrg .months{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}
.hrg .months li{border-radius:12px;background:#f1f7f3;padding:14px 12px;display:flex;flex-direction:column;gap:4px;min-width:0;margin:0}
.hrg .months li.pause{background:var(--pause-bg)}
.hrg .months small{font:700 12px Arial,sans-serif;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.hrg .months span{font-size:14px;line-height:1.35}
.hrg .months strong{font:700 22px/1.2 Arial,sans-serif;color:var(--ink);margin-top:auto}
.hrg .months .pause strong{color:var(--pause)}
.hrg .bar{display:block;height:8px;border-radius:99px;background:#dbe7e0;overflow:hidden}
.hrg .bar i{display:block;height:100%;background:var(--green)}
.hrg .example{background:#fff;border:1px solid var(--line);border-radius:18px;padding:24px;margin-top:30px}
.hrg .example .kicker{color:var(--muted)}
.hrg .total{margin:18px 0 0;padding-top:14px;border-top:1px dashed var(--line)}
.hrg .qs{margin-top:24px;display:grid;gap:10px}
.hrg details{background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px 18px}
.hrg summary{cursor:pointer;font-weight:700;color:var(--ink)}
.hrg details p{margin:12px 0 0;color:var(--muted)}

/* Exemple fictif : chemin entre les mois et sens de progression. */
.hrg .months{gap:24px 18px}
.hrg .months li{position:relative;min-height:178px}
.hrg .months .bar{height:20px;flex-shrink:0}
.hrg .months .bar i{position:relative;border-radius:99px}
.hrg .months .bar-direction{position:absolute;right:4px;top:50%;transform:translateY(calc(-50% - 1px));width:min(16px,calc(100% - 5px));height:12px;display:block}.hrg .months .bar-direction svg{display:block;width:100%;height:100%}
.hrg .months .progress-percent{font-size:13px}
.hrg .months li.celebrate{background:linear-gradient(145deg,#fff7d5,#d8f3e3);border:2px solid #3dc559;box-shadow:0 4px 14px rgba(147,122,47,.15);padding:30px 10px 14px;text-align:center}
.hrg .months .celebrate .finish-title{font-weight:800;text-align:center;color:#006b60}
.hrg .months .celebrate strong{color:#008074;font-size:28px}

/* Flèche blanche légèrement remontée, avec du vert devant sa pointe. */
.hrg .months .progress-track{position:relative;display:block;margin-top:auto;padding-top:0}
.hrg .duo.group-video-only{grid-template-columns:1fr}
/* Landing /rdv-google/ — animations au scroll (essais A, B, C, D du 03/10/2026).
   Tout reste lisible sans JavaScript et sans mouvement (prefers-reduced-motion). */

/* ---------- Torii (remplace la vidéo du haut) ---------- */
.hrg .torii-embed{position:relative;width:100%;max-width:470px;margin:0 auto;background:transparent}
.hrg .torii-embed iframe{display:block;width:100%;aspect-ratio:1176/1338;max-height:66vh;border:0;background:transparent}

/* ---------- Apparitions douces ---------- */
.hrg.anim-on .rv{opacity:0;transition:opacity 1s cubic-bezier(.22,.61,.36,1),transform 1s cubic-bezier(.22,.61,.36,1),filter 1.2s ease;transition-delay:var(--d,0ms)}
.hrg.anim-on .rv.is-in{opacity:1;transform:none;filter:none}
.hrg.anim-on[data-anim="A"] .rv{transform:translateY(22px)}
.hrg.anim-on[data-anim="B"] .rv{transform:translateY(16px)}
.hrg.anim-on[data-anim="C"] .rv{filter:blur(8px);transform:scale(.985);transition-duration:1.5s,1.5s,1.6s}
.hrg.anim-on[data-anim="D"] .rv{transform:translateX(-14px)}
/* D : titres qui se posent mot à mot */
.hrg.anim-on[data-anim="D"] h2 .w{display:inline-block;opacity:0;transform:translateY(.4em);transition:opacity .8s ease,transform .8s cubic-bezier(.22,.61,.36,1);transition-delay:calc(var(--i) * 70ms)}
.hrg.anim-on[data-anim="D"] h2.is-in .w{opacity:1;transform:none}

/* ---------- B : fil conducteur ---------- */
.hrg .thread{display:none}
.hrg.anim-on[data-anim="B"] .thread{display:block;position:fixed;z-index:80;pointer-events:none;left:max(10px,calc((100vw - 1100px) / 2 - 34px));top:90px;bottom:40px;width:2px;background:rgba(0,128,116,.12);border-radius:2px}
.hrg .thread i{position:absolute;left:0;top:0;width:100%;height:100%;background:linear-gradient(#7fc4b8,#008074);transform-origin:top;transform:scaleY(var(--p,0));border-radius:2px}
.hrg .thread b{position:absolute;left:50%;top:calc(var(--p,0) * 100%);width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:#fff;border:2px solid #008074;box-shadow:0 0 0 6px rgba(0,128,116,.12);animation:hrg-breathe 4.5s ease-in-out infinite}
@keyframes hrg-breathe{0%,100%{box-shadow:0 0 0 4px rgba(0,128,116,.10)}50%{box-shadow:0 0 0 10px rgba(0,128,116,.04)}}
@media(max-width:1240px){.hrg.anim-on[data-anim="B"] .thread{left:0;right:0;top:0;bottom:auto;width:auto;height:3px;border-radius:0}.hrg .thread i{transform-origin:left;transform:scaleX(var(--p,0))}.hrg .thread b{display:none}}

/* ---------- C : lumière qui évolue ---------- */
.hrg.anim-on[data-anim="C"]{background:var(--ambient,#fbfbf7);transition:background-color .6s linear}
.hrg.anim-on[data-anim="C"] main>section{background:transparent!important}

/* ---------- D : repères de lecture ---------- */
.hrg .rail{display:none}
@media(min-width:1420px){
  .hrg.anim-on .rail{display:flex;position:fixed;left:18px;top:50%;transform:translateY(-50%);z-index:80;flex-direction:column;gap:17px;list-style:none;margin:0;padding:0}
}
.hrg .rail a{display:flex;flex-direction:row-reverse;align-items:center;justify-content:flex-end;gap:10px;text-decoration:none;color:#9aa5a2;font:600 15px Arial,sans-serif;transition:color .45s ease}
.hrg .rail.in-hero a{color:var(--ink)}
.hrg .rail a span{white-space:nowrap}
.hrg .rail a:hover{color:var(--ink)}
.hrg .rail a:hover::after{border-color:#008074}
.hrg .rail a::after{content:"";flex:0 0 auto;width:11px;height:11px;border-radius:50%;border:1.5px solid rgba(0,128,116,.5);background:#fff;transition:all .35s ease}
.hrg .rail a.is-on::after{background:#008074;border-color:#008074;transform:scale(1.25)}
.hrg .rail a.is-on{color:var(--ink)}

/* ---------- annotation manuscrite à droite du torii ---------- */
.hrg .torii-embed .touch-note{position:absolute;left:calc(100% - 46px);top:30%;width:190px;pointer-events:none;color:#2f4a44;font:600 30px/1 'Caveat',cursive;transform:rotate(-4deg)}
.hrg .touch-note span{display:block;padding-left:22px}
.hrg .touch-note svg{display:block;width:118px;height:86px;margin-top:2px;overflow:visible}
.hrg .touch-note path{fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.hrg.anim-on .touch-note .tn-line{stroke-dasharray:170;stroke-dashoffset:170;animation:tnDraw 1.1s ease-out 1.4s forwards}
.hrg.anim-on .touch-note .tn-head{stroke-dasharray:40;stroke-dashoffset:40;animation:tnDraw .35s ease-out 2.4s forwards}
.hrg.anim-on .touch-note span{opacity:0;animation:tnIn .7s ease 1s forwards}
@keyframes tnDraw{to{stroke-dashoffset:0}}
@keyframes tnIn{to{opacity:1}}
@media(max-width:1180px){.hrg .torii-embed .touch-note{left:auto;right:-6px;top:auto;bottom:-62px;width:auto;font-size:26px;display:flex;align-items:center;flex-direction:row-reverse;gap:4px;transform:rotate(-3deg)}.hrg .touch-note span{padding:0}.hrg .touch-note svg{width:70px;height:56px;transform:rotate(62deg)}.hrg #video{padding-bottom:56px}}
@media(prefers-reduced-motion:reduce){.hrg .touch-note *{animation:none!important;stroke-dashoffset:0!important;opacity:1!important}}
.hrg.anim-on[data-anim="D"] .figure img{transform:translateY(var(--px,0));transition:transform .2s linear;will-change:transform}

/* ---------- Mois animés ---------- */
.hrg .mx[hidden]{display:none}
.hrg .sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.hrg .mx{--prog:#008074;--pause:#b9791f}
.hrg .mx-scroll{position:relative;height:calc(100vh + 240vh)}
.hrg .mx-stage{position:sticky;top:calc(50vh - 150px);min-height:300px;display:flex;flex-direction:column;justify-content:center}
.hrg .mx-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:22px}
.hrg .mx-month{display:flex;align-items:baseline;gap:10px;font:400 26px/1 Georgia,serif;color:var(--ink)}
.hrg .odo{display:inline-block;height:1.15em;overflow:hidden;vertical-align:bottom;font:400 64px/1.15 Georgia,serif;color:var(--prog)}
.hrg .odo>span{display:flex;flex-direction:column;transition:transform .7s cubic-bezier(.45,.05,.2,1)}
.hrg .odo>span>b{display:block;height:1.15em;font-weight:400;text-align:center}
.hrg .mx-label{font:600 18px/1.35 Arial,sans-serif;color:var(--ink);text-align:right;max-width:60%;transition:opacity .4s ease}
.hrg .mx-label.is-swap{opacity:0}
.hrg .mx-pct{display:block;margin-top:14px;text-align:right;font:700 15px Arial,sans-serif;color:var(--ink)}
.hrg .mx-note{min-height:1.6em;margin-top:6px;text-align:right;font-size:15px;color:var(--pause);opacity:0;transition:opacity .5s ease}
.hrg .mx.is-pause .mx-note{opacity:1}

/* barre (A et B) */
.hrg .mx-bar{position:relative;height:26px;border-radius:99px;background:#dbe7e0;overflow:visible}
.hrg .mx-fill{position:absolute;left:0;top:0;bottom:0;width:calc(var(--v,0) * 1%);min-width:26px;border-radius:99px;background:linear-gradient(90deg,#4fb3a6,var(--prog));transition:background .6s ease}
.hrg .mx.is-pause .mx-fill{background:linear-gradient(90deg,#e7c48f,var(--pause))}
.hrg .mx.is-done .mx-fill{background:linear-gradient(90deg,#3dc559,#008074)}
.hrg .mx-tip{position:absolute;right:5px;top:50%;width:16px;height:16px;transform:translateY(-50%);color:#fff}
.hrg .mx-tip svg{position:absolute;inset:0;width:100%;height:100%;transition:opacity .35s ease,transform .35s ease}
.hrg .mx-tip .t-pause,.hrg .mx-tip .t-done{opacity:0;transform:scale(.6)}
.hrg .mx.is-pause .mx-tip .t-arrow,.hrg .mx.is-done .mx-tip .t-arrow{opacity:0;transform:scale(.6)}
.hrg .mx.is-pause .mx-tip .t-pause,.hrg .mx.is-done .mx-tip .t-done{opacity:1;transform:none}
.hrg .mx.is-moving .mx-tip .t-arrow{animation:hrg-nudge 2.2s ease-in-out infinite}
@keyframes hrg-nudge{0%,100%{transform:translateX(0)}50%{transform:translateX(3px)}}
.hrg .mx.is-pause .mx-tip .t-pause{animation:hrg-rest 2.4s ease-in-out infinite}
@keyframes hrg-rest{0%,100%{opacity:1}50%{opacity:.45}}
.hrg .mx-ticks{display:grid;grid-template-columns:repeat(6,1fr);margin-top:10px;font:700 11px Arial,sans-serif;letter-spacing:.06em;text-transform:uppercase;color:#9aaba4}
.hrg .mx-ticks span{text-align:center;transition:color .4s ease}
.hrg .mx-ticks span.is-on{color:var(--ink)}
.hrg .mx-ticks span.is-pause{color:var(--pause)}
.hrg .mx.is-done{--finish:1}
.hrg .mx-finish{margin-top:18px;text-align:center;font:800 20px/1.3 Arial,sans-serif;color:#006b60;opacity:0;transform:translateY(8px);transition:all .6s ease}
.hrg .mx.is-done .mx-finish{opacity:1;transform:none}
.hrg .mx-replay{display:flex;justify-content:flex-end;margin-top:14px}
.hrg .mx-replay button{font:600 14px Arial,sans-serif;color:var(--green);background:#fff;border:1px solid #bfd7cc;border-radius:8px;padding:8px 14px;cursor:pointer}

/* anneau (C) */
.hrg .mx-ring{display:grid;grid-template-columns:auto 1fr;gap:36px;align-items:center}
.hrg .mx-ring svg.ring{width:240px;height:240px;overflow:visible}
.hrg .mx-ring .ring-bg{fill:none;stroke:#dbe7e0;stroke-width:14}
.hrg .mx-ring .ring-fg{fill:none;stroke:var(--prog);stroke-width:14;stroke-linecap:round;transition:stroke .6s ease}
.hrg .mx.is-pause .ring-fg{stroke:var(--pause)}
.hrg .mx.is-done .ring-fg{stroke:#3dc559}
.hrg .mx-ring .ring-center{position:relative}
.hrg .mx-ring .ring-wrap{position:relative;width:240px;height:240px}
.hrg .mx-ring .ring-mid{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;font:400 18px/1 Georgia,serif;color:var(--muted)}
.hrg .mx-ring .ring-mid .odo{font-size:72px}
.hrg .mx-ring .ring-dot{fill:#fff;stroke:var(--prog);stroke-width:3;transition:stroke .6s ease}
.hrg .mx.is-pause .ring-dot{stroke:var(--pause)}
.hrg .mx-ring .mx-label,.hrg .mx-ring .mx-pct,.hrg .mx-ring .mx-note{text-align:left;max-width:none}
.hrg .mx-ring .mx-state{display:inline-flex;align-items:center;gap:8px;margin-top:14px;padding:6px 12px;border-radius:99px;background:#e8f5f3;color:var(--green);font:700 13px Arial,sans-serif}
.hrg .mx.is-pause .mx-state{background:#fbf3e6;color:var(--pause)}
@media(max-width:640px){.hrg .mx-ring{grid-template-columns:1fr;justify-items:center;gap:18px}.hrg .mx-ring .mx-label,.hrg .mx-ring .mx-pct,.hrg .mx-ring .mx-note{text-align:center}.hrg .mx-ring svg.ring,.hrg .mx-ring .ring-wrap{width:200px;height:200px}}

/* chemin (D) */
.hrg .mx-path{position:relative}
.hrg .mx-path svg.path{display:block;width:100%;height:auto;overflow:visible}
.hrg .mx-path .p-bg{fill:none;stroke:#dbe7e0;stroke-width:6;stroke-linecap:round;stroke-dasharray:2 12}
.hrg .mx-path .p-fg{fill:none;stroke:var(--prog);stroke-width:6;stroke-linecap:round}
.hrg .mx-path .p-st{fill:#fff;stroke:#c9d9d1;stroke-width:3;transition:all .4s ease}
.hrg .mx-path .p-st.is-on{stroke:var(--prog);fill:#e8f5f3}
.hrg .mx-path .p-st.is-pause{stroke:var(--pause);fill:#fbf3e6}
.hrg .mx-path .p-st.is-done{stroke:#3dc559;fill:#d8f3e3}
.hrg .mx-path .marker{position:absolute;left:0;top:0;transform:translate(-50%,-100%);pointer-events:none;display:flex;flex-direction:column;align-items:center}
.hrg .mx-path .bubble{display:flex;align-items:baseline;gap:6px;padding:6px 12px 4px;border-radius:14px;background:#fff;border:1px solid var(--line);box-shadow:0 6px 18px rgba(0,60,50,.10);font:400 14px Georgia,serif;color:var(--muted);white-space:nowrap}
.hrg .mx-path .bubble .odo{font-size:30px}
.hrg .mx-path .feather{width:30px;height:30px;margin-top:2px;color:var(--prog);transform-origin:50% 90%;animation:hrg-float 3.2s ease-in-out infinite;transition:color .5s ease}
.hrg .mx.is-pause .feather{color:var(--pause);animation:hrg-settle 3.6s ease-in-out infinite}
@keyframes hrg-float{0%,100%{transform:rotate(-8deg) translateY(0)}50%{transform:rotate(6deg) translateY(-4px)}}
@keyframes hrg-settle{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(2deg)}}
.hrg .mx-path .mx-under{display:flex;justify-content:space-between;gap:16px;margin-top:16px;align-items:flex-start}
.hrg .mx-path .mx-under .mx-label{text-align:left;max-width:none}
@media(max-width:640px){.hrg .mx-path .mx-under{flex-direction:column;gap:4px}.hrg .mx-path .mx-pct{text-align:left;margin-top:0}}

@media(max-width:640px){.hrg .odo{font-size:48px}.hrg .mx-label{font-size:16px}.hrg .mx-scroll{height:calc(100vh + 200vh)}}

/* Sans mouvement : la liste d'origine reste affichée, sans animation. */
@media(prefers-reduced-motion:reduce){.hrg .rv{opacity:1!important;transform:none!important;filter:none!important}}

/* fin : le message final centré suffit, pas de doublon */
.hrg .mx.is-done .mx-head .mx-label{visibility:hidden}

/* hero beige (option par défaut) ; le vert d’origine reste via data-hero="vert" */
.hrg[data-hero=beige] .hero{background:linear-gradient(180deg,#f4ecdf 0%,#f8f3ea 60%,var(--bg) 100%)}
.hrg .hero .sub + .sub{margin-top:12px}
.hrg .hero .sub-calm{font-family:Georgia,serif;font-style:italic;color:var(--ink,#13343b)}

/* hero : un seul bouton, centré à la demande de Raphaël, flèche qui invite à descendre */
.hrg .hero .hero-actions{align-items:center}
.hrg .hero .hero-actions .actions-row{justify-content:center}
.hrg .hero .trust{justify-content:flex-start;margin-top:26px}
.hrg .btn-next{display:inline-flex;align-items:center;gap:10px}
.hrg .btn-next .next-arrow{display:inline-block;animation:nextNudge 2.4s ease-in-out infinite}
@keyframes nextNudge{0%,100%{transform:translateY(-1px)}50%{transform:translateY(4px)}}
@media (prefers-reduced-motion:reduce){.hrg .btn-next .next-arrow{animation:none}}

/* Boucle émotionnelle : cases en fondu l’une après l’autre, flèche qui glisse entre chacune,
   puis la ligne de retour se dessine ; ensuite une pulsation fait le tour de la boucle. */
.hrg .lp-track.is-pin{position:relative}
.hrg .lp-track.is-pin .lp-stage{position:sticky}
.hrg.anim-on .loop.lp{--ax:-14px;--ay:0px;--px:5px;--py:0px;--rx:0px;--ry:-5px}
.hrg.anim-on .loop.lp>div{opacity:0;transform:translateY(12px);transition:opacity .9s ease,transform .9s cubic-bezier(.22,.61,.36,1)}
.hrg.anim-on .loop.lp>div.lp-on{opacity:1;transform:none}
.hrg.anim-on .loop.lp>div:not(:last-child)::after{opacity:0;translate:var(--ax) var(--ay);transition:opacity .45s ease,translate .45s ease-out}
.hrg.anim-on .loop.lp>div.lp-arr:not(:last-child)::after{opacity:1;translate:0 0}
.hrg.anim-on .loop.lp-done>div:not(:last-child)::after{animation:lpPulse 5s ease-in-out calc(1.2s + var(--k)*1s) infinite}
.hrg.anim-on .loop.lp::before{clip-path:inset(0 0 0 100%);transition:clip-path 1.4s ease-in-out}
.hrg.anim-on .loop.lp-ret::before{clip-path:inset(0 0 0 0)}
.hrg.anim-on .loop.lp::after{opacity:0;translate:0 6px;transition:opacity .5s ease 1.2s,translate .5s ease-out 1.2s}
.hrg.anim-on .loop.lp-ret::after{opacity:1;translate:0 0}
.hrg.anim-on .loop.lp-done::after{animation:lpRet 5s ease-in-out 5.2s infinite}
@keyframes lpPulse{0%,30%,100%{translate:0 0}15%{translate:var(--px) var(--py)}}
@keyframes lpRet{0%,30%,100%{translate:0 0}15%{translate:var(--rx) var(--ry)}}
@media(max-width:900px){
  .hrg.anim-on .loop.lp{--ax:0px;--ay:-12px;--px:0px;--py:5px;--rx:5px;--ry:0px}
  .hrg.anim-on .loop.lp::before{clip-path:inset(100% 0 0 0)}
}

/* Mois : une seule carte, même format qu’un mois du design d’origine ; le numéro tourne, la barre et le % montent */
.hrg .mx .months.mx-one{display:grid;grid-template-columns:minmax(0,190px);justify-content:center;gap:0;margin:8px 0 0}
.hrg .mx .mx-one li{min-height:178px;transition:background-color .6s ease,border-color .6s ease,box-shadow .6s ease}
.hrg .mx .mx-one li.celebrate{padding:14px 12px;border:2px solid #3dc559}
.hrg .mx .mx-one small{display:flex;align-items:center;gap:6px}
.hrg .mx .mx-one .odo{font:700 18px/1.15 Arial,sans-serif;color:var(--ink);height:1.15em;clip-path:inset(0)}
.hrg .mx .mx-one .mx-label{margin:0;padding:0;max-width:none;font-weight:400;font-size:14px;line-height:1.35;font-family:inherit;text-align:left;color:var(--text);transition:opacity .45s ease;min-height:2.7em}
.hrg .mx .mx-one .mx-label.finish-title{font-weight:800;color:#006b60;text-align:center}
.hrg .mx .mx-one .bar{height:20px}
.hrg .mx .mx-one .bar i{position:relative;border-radius:99px;transition:width .12s linear}
.hrg .mx .mx-one .progress-percent{margin-top:6px;font-weight:700;color:var(--ink);text-align:center;font-size:13px;font-variant-numeric:tabular-nums}
.hrg .mx .mx-one .c-done{display:none}
.hrg .mx.is-done .mx-one .c-done{display:inline}.hrg .mx.is-done .mx-one .c-arrow{display:none}
.hrg .mx.is-moving .mx-one .bar-direction svg{animation:cardNudge 2.2s ease-in-out infinite}
@keyframes cardNudge{0%,100%{transform:translateX(-1px)}50%{transform:translateX(2px)}}
.hrg .mx-scroll:has(.mx-one){height:calc(100vh + 330vh)}
.hrg .mx-stage:has(.mx-one){top:calc(50vh - 100px);min-height:200px}
.hrg .mx .mx-one .odo>span>b{height:1.15em;line-height:1.15em;overflow:hidden}

/* ---------- Exemple sur 6 mois : grande carte + courbe, puis paquet de cartes ---------- */
.hrg .mx-show{position:relative}
.hrg .mx-duo{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);display:flex;align-items:center;justify-content:center;gap:34px}
.hrg .mx .months.mx-one{grid-template-columns:minmax(0,270px);margin:0;flex:0 0 270px}
.hrg .mx .mx-one li{min-height:380px;padding:28px 22px 24px;gap:10px;border-radius:18px;box-shadow:0 18px 44px rgba(19,52,59,.10)}
.hrg .mx .mx-one li.celebrate{padding:28px 22px 24px}
.hrg .mx .mx-one small{font-size:14px;gap:8px}
.hrg .mx .mx-one .odo{font-size:30px}
.hrg .mx .mx-one .mx-label{font-size:20px;line-height:1.35;min-height:2.8em;margin-top:10px}
.hrg .mx .mx-one .bar{height:26px}
.hrg .mx .mx-one .progress-percent{font-size:17px;margin-top:12px}
.hrg .mx-chart{flex:0 1 480px;min-width:0;background:#fff;border:1px solid var(--line);border-radius:18px;padding:16px 16px 6px;box-shadow:0 18px 44px rgba(19,52,59,.08);transition:opacity .15s linear}
.hrg .mx-chart .cap{font:700 12px Arial,sans-serif;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:0 0 4px 6px}
.hrg .mx-chart svg{display:block;width:100%;height:auto;overflow:visible}
.hrg .mx-chart .c-grid line{stroke:#e5ece8;stroke-width:1}
.hrg .mx-chart .c-grid text{font:600 11px Arial,sans-serif;fill:#9aa9a3}
.hrg .mx-chart .c-area{fill:url(#mxGrad)}
.hrg .mx-chart .c-bg{fill:none;stroke:#cfdcd5;stroke-width:3;stroke-dasharray:1 8;stroke-linecap:round}
.hrg .mx-chart .c-fg{fill:none;stroke:#008074;stroke-width:4;stroke-linecap:round}
.hrg .mx-chart .c-st{fill:#fff;stroke:#cfdcd5;stroke-width:2.5;transition:fill .3s,stroke .3s}
.hrg .mx-chart .c-st.is-on{fill:#008074;stroke:#008074}
.hrg .mx-chart .c-st.is-pause{fill:#fff5e6;stroke:var(--pause)}
.hrg .mx-chart .c-lbl{font:700 12px Arial,sans-serif;fill:#7d8f88;text-anchor:middle}
.hrg .mx-chart .c-dot{fill:#008074;stroke:#fff;stroke-width:3;transition:fill .3s}
.hrg .mx-chart .c-ring{fill:#008074;opacity:.16;transform-box:fill-box;transform-origin:center;animation:cRing 2s ease-in-out infinite}
.hrg .mx.is-pause .c-dot,.hrg .mx.is-pause .c-ring{fill:var(--pause)}
@keyframes cRing{50%{transform:scale(1.35);opacity:.06}}
.hrg .mx-deck{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);margin:0;opacity:0;pointer-events:none}
.hrg .mx-deck li{transform-origin:50% 50%;will-change:transform;box-shadow:0 10px 26px rgba(19,52,59,.10)}
.hrg .mx-deck li::after{content:"";position:absolute;inset:-5px;border-radius:16px;pointer-events:none;opacity:var(--g,0);box-shadow:0 0 0 2px rgba(0,128,116,.32),0 0 34px 6px rgba(120,132,130,.32),0 14px 34px rgba(0,128,116,.22);background:radial-gradient(120% 80% at 50% 0%,rgba(255,250,230,.55),rgba(255,250,230,0) 70%)}
@media(max-width:760px){
  .hrg .mx-duo{flex-direction:column;gap:14px}
  .hrg .mx .months.mx-one{flex:0 0 auto;width:min(300px,100%);grid-template-columns:1fr}
  .hrg .mx .mx-one li{min-height:250px;padding:20px 18px}
  .hrg .mx .mx-one .mx-label{font-size:17px}
  .hrg .mx-chart{flex:0 0 auto;width:100%;max-width:420px;padding:10px 10px 4px}
}

/* ---------- 03/10 : lisibilité, boucle, mois, programme, plume ---------- */
/* textes plus grands */
.hrg{font-size:19px;--muted:#4d615a}
.hrg h3{font-size:21px}
.hrg .kicker{font-size:14.5px}
.hrg .menu a{font-size:15.5px}
/* 03/10 : intitulés plus longs, le menu tient sur une ligne */
@media(min-width:1181px){.hrg .menu a{font-size:13.5px;white-space:nowrap}.hrg .menu .wrap{column-gap:14px;max-width:1340px;flex-wrap:nowrap}}
.hrg .hero .sub{font-size:21px}
.hrg .trust span{font-size:16.5px}
.hrg .card p,.hrg .program p,.hrg .steps p,.hrg .spare li,.hrg .door p{font-size:18px}
.hrg .loop div{font-size:17px}.hrg .loop strong{font-size:18.5px}
.hrg .figure figcaption,.hrg .micro,.hrg .steps .exit,.hrg .profile .pick{font-size:16px}
.hrg .months small{font-size:13.5px}.hrg .months span{font-size:16px}.hrg .months .progress-percent{font-size:15px}
.hrg .quote{font-size:24px}
.hrg .btn{font-size:18px}
@media(max-width:520px){.hrg{font-size:18px}.hrg .menu a{font-size:13px}.hrg .actions-row .btn{font-size:16px}}

/* boucle : la ligne de retour reste dans le bloc figé, plus de passage derrière le texte */
.hrg .lp-stage{display:flow-root}

/* plume du torii à côté de « Touchez les plumes » */
.hrg .touch-note span{white-space:nowrap}
.hrg .touch-note .tn-feather{display:inline-block;width:40px;height:auto;margin:-26px 0 -18px 6px;vertical-align:middle;filter:drop-shadow(0 1px 1px rgba(70,55,45,.45)) drop-shadow(0 4px 8px rgba(70,55,45,.2));transform-origin:80% 95%}
.hrg.anim-on .touch-note .tn-feather{animation:tnSway 3.6s ease-in-out 2s infinite}
@keyframes tnSway{0%,100%{transform:rotate(0)}50%{transform:rotate(-12deg) translateY(-2px)}}
@media(max-width:1180px){.hrg .touch-note .tn-feather{width:34px;margin:-22px 0 -14px 4px}}
/* phrase d'accueil manuscrite */
.hrg .hero .sub-welcome{margin:10px 0 0;font:600 34px/1.15 'Caveat',cursive;color:#2f4a44;transform:rotate(-4deg);transform-origin:left center}
@media(max-width:520px){.hrg .hero .sub-welcome{font-size:29px}}

/* encart suivant : apparaît en fondu, flou tant qu'il n'est pas arrivé */
.hrg.anim-on #profil>.wrap{opacity:var(--fi,1);filter:blur(calc((1 - var(--fi,1)) * 12px));transform:translateY(calc((1 - var(--fi,1)) * 30px))}

/* plume qui se détache du torii et se pose sur la case du milieu */
.hrg .fly-feather{position:fixed;left:0;top:0;width:80px;height:auto;margin:-47px 0 0 -40px;z-index:90;pointer-events:none;filter:drop-shadow(0 1px 1px rgba(70,55,45,.4)) drop-shadow(0 8px 14px rgba(70,55,45,.2));will-change:transform}
.hrg .profile .fly-feather{position:absolute;left:auto;right:16px;top:-44px;margin:0;z-index:2;transform:rotate(18deg)}

/* mois : titre, courbe à gauche, carte à droite */
.hrg .mx-title{font:400 clamp(24px,3vw,32px)/1.25 Georgia,serif;color:var(--ink);margin:0 0 8px}
.hrg .mx-head2{position:absolute;left:0;right:0;top:0;text-align:center}
.hrg .mx-head2 .mx-title{margin:0}
.hrg .mx-chart{order:1}.hrg .mx .months.mx-one{order:2}
/* compteur de mois : chiffre actif noir aligné sur « Mois », voisins gris, celui qui part presque effacé */
.hrg .mx .mx-one small{display:flex;align-items:center;gap:10px;font-size:16px;letter-spacing:.06em}
.hrg .mx .mx-one .odo{--r:25px;font:700 24px/var(--r) Arial,sans-serif;height:calc(var(--r) * 3);margin:calc(var(--r) * -1) 0;clip-path:none;color:#a9b5b1;-webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,.06) 0,rgba(0,0,0,.2) 30%,#000 37%,#000 63%,rgba(0,0,0,.2) 70%,rgba(0,0,0,.06) 100%);mask-image:linear-gradient(to bottom,rgba(0,0,0,.06) 0,rgba(0,0,0,.2) 30%,#000 37%,#000 63%,rgba(0,0,0,.2) 70%,rgba(0,0,0,.06) 100%)}
.hrg .mx .mx-one .odo>span{padding-top:var(--r)}
.hrg .mx .mx-one .odo>span>b{height:var(--r);line-height:var(--r);font-weight:700;transition:color .4s ease,transform .4s ease}
.hrg .mx .mx-one .odo>span>b.is-on{color:var(--ink)}
/* objectif atteint : coche verte */
.hrg .goal-tick{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;margin-right:8px;border-radius:50%;background:#2fb457;color:#fff;vertical-align:-7px;box-shadow:0 0 0 5px rgba(47,180,87,.16)}
.hrg .goal-tick svg{width:16px;height:16px}
.hrg .mx .mx-one .mx-pct.is-goal{color:#1f7a45;font-size:19px}
.hrg .mx.is-done .goal-tick{animation:goalPop 1s cubic-bezier(.22,.61,.36,1)}
@keyframes goalPop{0%{transform:scale(.3);opacity:0}100%{transform:none;opacity:1}}
.hrg .months .goal{color:#1f7a45!important}
@media(max-width:760px){.hrg .mx .mx-one .odo{--r:23px;font-size:21px}}
/* carte : pourcentage au-dessus de la barre ; mois sans progrès = symbole pause + explication */
.hrg .mx .mx-one .mx-pct{margin:auto 0 10px;order:0}
.hrg .mx .mx-one .progress-track{margin-top:0}
.hrg .mx .mx-one .c-pz{display:none}
.hrg .mx.is-pause .mx-one .c-pz{display:inline}.hrg .mx.is-pause .mx-one .c-arrow{display:none}
.hrg .mx .mx-one .bar i{transition:width .12s linear,background-color .4s ease}
.hrg .mx.is-pause .mx-one .bar i{background:var(--pause)}
.hrg .mx-pausenote{display:flex;gap:10px;align-items:flex-start;font-size:16px;line-height:1.4;color:#7a4f12;max-height:0;opacity:0;overflow:hidden;transition:max-height .5s ease,opacity .4s ease,margin .4s ease}
.hrg .mx.is-pause .mx-pausenote{max-height:7em;opacity:1;margin-top:6px}
.hrg .mx-pausenote .pz-ico{flex:0 0 26px;width:26px;height:26px;border-radius:50%;background:var(--pause);color:#fff;display:inline-flex;align-items:center;justify-content:center;margin-top:1px}
.hrg .mx-pausenote .pz-ico svg{width:14px;height:14px}
/* courbe : pastille pause au-dessus du point du mois 2, coche verte au-dessus du mois 6 */
.hrg .mx-chart .c-badge{opacity:0;transition:opacity .4s ease}
.hrg .mx-chart .c-badge.is-show{opacity:1}
.hrg .mx-chart .c-badge path{fill:none;stroke:#fff;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.hrg .mx-chart .c-bpause circle{fill:var(--pause)}
.hrg .mx-chart .c-bgoal circle{fill:#2fb457}
/* vidéo de l'approche dans le dernier encart */
.hrg .final-video{max-width:820px;margin:44px auto 0;scroll-margin-top:90px}

/* ---------- Programme : retravailler son quotidien ---------- */
.hrg .qx{display:grid;grid-template-columns:1fr 64px 1fr 64px 1fr;align-items:start;gap:0;margin-top:30px}
.hrg .qx-col{background:#fff;border:1px solid var(--line);border-radius:18px;padding:24px 22px 22px;box-shadow:0 14px 34px rgba(19,52,59,.07)}
.hrg .qx-col h3{margin:0 0 16px;line-height:1.3}
.hrg .qx-meter{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;border-radius:14px;background:#f6f8f5}
.hrg .qx-name{font:700 14px/1.3 Arial,sans-serif;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.hrg .qx-score{font:400 22px/1 Georgia,serif;color:var(--muted);white-space:nowrap}
.hrg .qx-score b{font:700 44px/1 Arial,sans-serif;color:var(--qc,#2e9d5b);font-variant-numeric:tabular-nums;margin-right:2px;display:inline-block;min-width:.62em;text-align:right}
.hrg .qx-list{list-style:none;margin:18px 0 0;padding:0}
.hrg .qx-list li{position:relative;padding-left:26px;margin:0 0 10px;font-size:17.5px;line-height:1.5;color:var(--text)}
.hrg .qx-list li::before{content:"";position:absolute;left:2px;top:.5em;width:12px;height:7px;border-left:2.5px solid #2e9d5b;border-bottom:2.5px solid #2e9d5b;transform:rotate(-45deg)}
.hrg .qx-arrow{align-self:center;display:flex;justify-content:center;color:#008074}
.hrg .qx-arrow svg{width:20px;height:15px;overflow:visible}
.hrg .qx-arrow path{fill:none;stroke:currentColor;stroke-opacity:.55;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.hrg .qx-pin{position:relative}.hrg .qx-pin .qx-stage{position:sticky}
.hrg.anim-on .qx.qx-live .qx-col{opacity:var(--o,0);transform:translateY(calc((1 - var(--o,0)) * 24px));filter:blur(calc((1 - var(--o,0)) * 6px))}
.hrg.anim-on .qx.qx-live .qx-list li{opacity:var(--o,0);transform:translateX(calc((1 - var(--o,0)) * -10px))}
.hrg.anim-on .qx.qx-live .qx-arrow path{stroke-dasharray:30;stroke-dashoffset:calc((1 - var(--o,0)) * 30)}
@media(max-width:900px){
  .hrg .qx{grid-template-columns:1fr;gap:0}
  .hrg .qx-arrow{padding:8px 0}.hrg .qx-arrow svg{transform:rotate(90deg)}
}
.hrg .profile{position:relative;overflow:visible}
/* plume de la note à gauche du texte sur grand écran (évite le débordement à droite) */
@media(min-width:1181px){.hrg .touch-note span{position:relative}.hrg .touch-note .tn-feather{position:absolute;left:-26px;top:-30px;margin:0;width:38px}}
/* cartes du récapitulatif : pourcentage au-dessus de la barre, mois 2 en pause */
.hrg .months li .progress-percent{order:1;margin:auto 0 8px!important}
.hrg .months li .progress-track{order:2;margin-top:0}
.hrg .months li.pause .bar i{background:var(--pause)}
/* plume : vol dans la page (position absolue), posée à plat sur le bord haut de la carte du milieu */
.fly-feather.is-flying{position:absolute;left:0;top:0;width:80px;height:auto;margin:-47px 0 0 -40px;z-index:90;pointer-events:none;filter:drop-shadow(0 1px 1px rgba(70,55,45,.4)) drop-shadow(0 8px 14px rgba(70,55,45,.2));will-change:transform}
.hrg .profile .fly-feather{left:calc(50% + 30px - 40px);right:auto;top:calc(12px - 47px);transform:rotate(108deg)}
/* exemple sur six mois : même fond que les trois cartes au-dessus, sans cadre ni rupture */
.hrg #fonctionnement .example{background:transparent;border:0;border-radius:0;padding:0}

/* mois centrés dans les cartes ; coche verte au-dessus du titre du mois 6 (sans texte) ; ombres grises */
.hrg .months li small,.hrg .mx .mx-one small{justify-content:center;text-align:center}
.hrg .months li.celebrate,.hrg .mx .mx-one li.celebrate{box-shadow:0 14px 34px rgba(19,52,59,.14)}
.hrg .mx-goal{display:none;justify-content:center;margin-top:6px}
.hrg .mx.is-done .mx-goal{display:flex}
.hrg .mx-goal .goal-tick,.hrg .goal-top{width:38px;height:38px;margin:0 auto;box-shadow:0 0 0 7px rgba(47,180,87,.16)}
.hrg .mx-goal .goal-tick svg,.hrg .goal-top svg{width:22px;height:22px}
.hrg .goal-top{display:flex;margin:6px auto 4px}
.hrg .mx .mx-one .mx-pct.is-goal{visibility:hidden}

/* 03/10 : accueil manuscrit au-dessus du bouton Découvrir */
.hrg .hero .hero-actions .sub-welcome{margin:0 0 10px;text-align:center;transform:none}
/* 03/10 : plume à droite de « Touchez les plumes » sur ordinateur */
@media(min-width:1181px){.hrg .touch-note span{display:inline-block;padding-left:22px;padding-right:28px}.hrg .touch-note .tn-feather{left:auto;right:-8px;top:-24px}}
@media(min-width:1181px) and (max-width:1400px){.hrg .torii-embed .touch-note{left:calc(100% - 74px);font-size:24px}.hrg .touch-note span{padding-left:0}.hrg .touch-note .tn-feather{width:32px;top:-20px}}

/* 03/10 : Retravailler son quotidien — variantes (contenu d’origine gardé pour les lecteurs d’écran) */
.hrg .qx.qx-src{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;margin:0}
.hrg .qx-view{margin-top:28px}
.hrg .q-card{position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:18px;padding:22px 22px 20px;box-shadow:0 14px 34px rgba(19,52,59,.08)}
.hrg .q-ico{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:50%;margin-bottom:12px;color:var(--c);background:color-mix(in srgb,var(--c) 13%,#fff)}
.hrg .q-ico svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.hrg .q-card h3{margin:0 0 14px;line-height:1.3}
.hrg .q-list{list-style:none;margin:0 0 18px;padding:0}
.hrg .q-list li{position:relative;padding-left:27px;margin:0 0 9px;font-size:17px;line-height:1.45;color:var(--text);opacity:var(--o,1);transform:translateX(calc((1 - var(--o,1)) * -10px))}
.hrg .q-list li::before{content:"";position:absolute;left:2px;top:.48em;width:12px;height:7px;border-left:2.5px solid #2e9d5b;border-bottom:2.5px solid #2e9d5b;transform:rotate(-45deg)}
.hrg .qm{margin-top:auto;padding:13px 15px 14px;border-radius:14px;background:#f6f8f5}
.hrg .qm-top{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.hrg .qm-name{font:700 13px/1.3 Arial,sans-serif;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.hrg .qm-score{font:400 18px/1 Georgia,serif;color:var(--muted);white-space:nowrap}
.hrg .qm-score b{font:700 34px/1 Arial,sans-serif;color:var(--c);font-variant-numeric:tabular-nums;display:inline-block;min-width:.62em;text-align:right;margin-right:2px}
.hrg .qm-bar{height:10px;margin-top:10px;border-radius:99px;background:#e2ebe6;overflow:hidden}
.hrg .qm-bar i{display:block;height:100%;width:0;border-radius:inherit;background:var(--c)}
.hrg .qc-chart{background:#fff;border:1px solid var(--line);border-radius:18px;padding:16px 16px 8px;box-shadow:0 18px 44px rgba(19,52,59,.08)}
.hrg .qc-chart .cap{font:700 12px Arial,sans-serif;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:0 0 4px 6px}
.hrg .qc-chart svg{display:block;width:100%;height:auto;overflow:visible}
.hrg .qc-grid line{stroke:#e5ece8;stroke-width:1}
.hrg .qc-grid text{font:600 11px Arial,sans-serif;fill:#9aa9a3}
.hrg .qc-grid .qc-lbl{font:700 12px Arial,sans-serif;fill:#7d8f88}
.hrg .qc{opacity:0}
.hrg .qc-bg{fill:none;stroke:var(--c);stroke-opacity:.25;stroke-width:3;stroke-dasharray:1 8;stroke-linecap:round}
.hrg .qc-fg{fill:none;stroke:var(--c);stroke-width:4;stroke-linecap:round}
.hrg .qc-dot{fill:var(--c);stroke:#fff;stroke-width:3}
.hrg .qc-tag{font:700 13px Arial,sans-serif;fill:var(--c);opacity:0}
.hrg .qc-delta{opacity:0}
.hrg .qc-delta path{fill:none;stroke:#2fb457;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.hrg .qc-dnum{font:800 26px Arial,sans-serif;fill:#2fb457}
.hrg .qc-dtxt{font:800 15px Arial,sans-serif;fill:#2fb457}
.hrg .qc-delta .qc-dring{fill:#2fb457;stroke:rgba(47,180,87,.18);stroke-width:8;transform-box:fill-box;transform-origin:center;transform:scale(calc(.6 + .4 * var(--k,0)))}
.hrg .qc-delta .qc-dchk{stroke:#fff;stroke-width:3;stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--k,0))}
.hrg .q-final{display:flex;align-items:center;justify-content:center;margin:20px 0 0;font:800 20px/1.3 Arial,sans-serif;color:#006b60;opacity:var(--o,0);transform:translateY(calc((1 - var(--o,0)) * 8px))}
/* 1 · cartes empilées */
.hrg .q1{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:30px;align-items:center}
.hrg .q1-stack{position:relative}
.hrg .q1-stack .q-card{position:absolute;left:0;right:0;top:0;transform-origin:50% 0;will-change:transform}
.hrg .q1-stack .q-card::after{content:"";position:absolute;inset:0;border-radius:inherit;background:#f3f6f4;opacity:calc(var(--dim,0) * .55);pointer-events:none}
/* 2 · trois cartes */
.hrg .q2{display:grid;grid-template-columns:1fr 48px 1fr 48px 1fr;align-items:stretch}
.hrg .qv2 .q-card,.hrg .qv3 .q-card{opacity:var(--o,0);transform:translateY(calc((1 - var(--o,0)) * 22px))}
.hrg .q-arrow path{stroke-dasharray:30;stroke-dashoffset:calc((1 - var(--o,0)) * 30)}
/* 3 · courbe commune */
.hrg .q3 .qc-chart{max-width:640px;margin:0 auto}
.hrg .q3-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:18px}
.hrg .q3 .q-card{padding:18px 18px 16px}
.hrg .q3 .q-ico{width:34px;height:34px;margin-bottom:8px}
.hrg .q3 .q-card h3{font-size:19px;margin-bottom:10px}
.hrg .q3 .q-list li{font-size:15.5px;margin-bottom:6px}
.hrg .q3 .qm-score b{font-size:28px}
@media(max-width:900px){
  .hrg .qx-view{margin-top:20px}
  .hrg .q1{grid-template-columns:1fr;gap:14px}
  .hrg .q1 .q-final{display:none}
  .hrg .q2{grid-template-columns:1fr}
  .hrg .q2 .q-arrow{padding:8px 0}.hrg .q2 .q-arrow svg{transform:rotate(90deg)}
  .hrg .q3-cols{grid-template-columns:1fr}
  .hrg .qc-chart{padding:10px 10px 4px}
  .hrg .q-card{padding:18px 18px 16px}
  .hrg .q-list li{font-size:16px;margin-bottom:6px}
}
/* 03/10 : libellés du sous-menu plus longs — retour à la ligne pour ne pas toucher le contenu */
.hrg .rail a span{max-width:132px;line-height:1.2;white-space:normal}
.hrg .rail a{font-size:14px}
/* 03/10 : plus d’air entre le titre de L’approche et les cases */
.hrg #approche h2 + .loop,.hrg #approche .loop{margin-top:60px!important}

/* 03/10 : paiement progressif — exemple au-dessus, cases dans l'encart figé, carte du mois resserrée */
.hrg .mx-stage>.kicker{margin:0 0 6px}
.hrg .mx-stage .pay-cards{margin-top:14px;gap:14px}
.hrg .pay-in .card{--o:0;opacity:var(--o)!important;transform:translateY(calc((1 - var(--o)) * 26px))!important;transition:none!important;padding:16px 20px;display:grid;grid-template-columns:42px 1fr;column-gap:14px;align-items:start;will-change:opacity,transform}
.hrg .pay-in .card .icon{grid-row:span 2;margin:0}
.hrg .pay-in .card h3{font-size:18px;margin:2px 0 0}
.hrg .pay-in .card p{margin:4px 0 0;font-size:15px;line-height:1.45}
.hrg #fonctionnement .example+.pay-cards{margin-top:24px}
.hrg .mx .mx-one li{min-height:300px}

/* 03/10 : groupe — vidéo de témoignage à gauche du texte (reprise de /rdv/) */
.hrg #groupe .narrow{max-width:1000px}
.hrg .group-intro{display:grid;grid-template-columns:260px minmax(0,1fr);grid-template-rows:auto auto;column-gap:48px;row-gap:12px;align-items:start;margin-top:48px}
/* 03/10 : le texte se centre sur la vidéo seule (légende exclue), sans vide au-dessus */
.hrg .group-video{display:contents}
.hrg .group-video wistia-player{grid-column:1;grid-row:1}
.hrg .group-video figcaption{grid-column:1;grid-row:2;margin-top:0!important}
.hrg .group-text{grid-column:2;grid-row:1;align-self:center}
.hrg .group-text .group-points{margin-bottom:0}
.hrg .group-video{margin:0}
.hrg .group-video wistia-player{display:block;border-radius:14px;overflow:hidden;box-shadow:0 18px 40px rgba(19,52,59,.14)}
.hrg .group-video figcaption{margin-top:12px;font-size:14px;line-height:1.45;color:var(--muted);font-style:italic;text-align:center}
.hrg .group-text .lead{margin-top:0}
@media(max-width:760px){.hrg .group-intro{grid-template-columns:1fr;grid-template-rows:auto;row-gap:12px;margin-top:28px}.hrg .group-video wistia-player{width:100%;max-width:260px;margin:0 auto}.hrg .group-video figcaption,.hrg .group-text{grid-column:1;grid-row:auto}.hrg .group-text{margin-top:14px}}

/* 03/10 : menu latéral — points intermédiaires et point actif cerclé */
.hrg.anim-on .rail{gap:6px}
.hrg .rail-steps{display:flex;flex-direction:column;gap:6px;padding:2px 0 2px 4px}
.hrg .rail-steps i{display:block;width:4px;height:4px;border-radius:50%;background:rgba(0,128,116,.22);transition:background-color .35s ease,transform .35s ease}
.hrg .rail-steps i.is-on{background:#008074;transform:scale(1.25)}
.hrg .rail a.is-past::after{border-color:#008074;background:#e3f2ef}
.hrg .rail a.is-on::after{background:#008074;border-color:#fff;transform:scale(1.3);box-shadow:0 0 0 1.5px #008074,0 2px 6px rgba(0,128,116,.35)}
/* 03/10 : mobile — menu du haut sur une ligne qui défile horizontalement */
@media(max-width:900px){.hrg .menu .wrap{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;scrollbar-width:none;-webkit-overflow-scrolling:touch}.hrg .menu .wrap::-webkit-scrollbar{display:none}.hrg .menu a{white-space:nowrap;flex:0 0 auto}}

/* 03/10 : « Bienvenue » plus fin, la plume passe à sa droite (retirée de « Touchez les plumes ») */
.hrg .hero .hero-actions .sub-welcome{font-weight:400;font-size:32px;color:#3d5a53}
.hrg .sub-welcome .sw-feather{display:inline-block;width:34px;height:auto;margin:-24px 0 -14px 10px;vertical-align:middle;filter:drop-shadow(0 1px 1px rgba(70,55,45,.4)) drop-shadow(0 4px 8px rgba(70,55,45,.18));transform-origin:80% 95%}
.hrg.anim-on .sub-welcome .sw-feather{animation:tnSway 3.6s ease-in-out 2s infinite}
@media(max-width:520px){.hrg .hero .hero-actions .sub-welcome{font-size:28px}.hrg .sub-welcome .sw-feather{width:28px}}
@media(min-width:1181px){.hrg .touch-note span{padding-right:0}}

/* 03/10 : titre rouge foncé au-dessus de la boucle */
.hrg #approche .loop-title{margin:44px 0 0;font:700 15px/1.3 Arial,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#8b1e1e}
.hrg #approche .loop-title + .loop{margin-top:16px!important}

/* 03/10 : titre vert au-dessus des cartes du quotidien (pendant de « Votre cycle infernal actuel ») */
#programme .qx-title{margin:44px 0 0;font:700 15px/1.3 Arial,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#008074}
#programme .qx-title + .qx{margin-top:16px!important}

/* 03/10 : coche verte pour « Un changement progressif et durable » */
.hrg .pay-cards .icon.is-check{background:#00807473;color:#fff}
.hrg .mx-stage>h2.mx-head{margin:0 0 10px}
.hrg .mx-stage>.lead.mx-head{margin:0 0 22px;max-width:820px}
.hrg .mx-stage>h2.mx-head + .kicker{margin-top:18px}

/* 03/10 : courbe commune par défaut — bloc plus compact pour rester fixé sur un écran d'ordinateur courant */
@media (min-width:901px){
  .hrg #programme .qx-stage .qx-title{margin-top:20px}
  .hrg .q3 .qc-chart{max-width:450px}
  .hrg .q3-cols{margin-top:14px}
  .hrg .q3 .q-final{margin-top:12px}
}

/* 03/10 : menu numéroté — un peu plus petit sur les écrans moyens pour tenir sur une ligne */
@media(min-width:1181px) and (max-width:1320px){.hrg .menu a{font-size:12.5px}.hrg .menu .wrap{column-gap:10px}}

/* 03/10 : boucle — texte et illustration après l'arrivée de la flèche de retour */
.hrg .lp-gate > .lead, .hrg .lp-gate > .narrowfig{transition:opacity .7s ease,transform .7s ease}
.hrg .lp-gate:not(.lp-after) > .lead, .hrg .lp-gate:not(.lp-after) > .narrowfig{opacity:0!important;transform:translateY(16px)!important}
/* 03/10 : bouton sous les étapes */
.hrg #etapes .steps .actions.steps-cta{display:flex;align-items:center;justify-content:center;margin:18px 0 6px!important;padding:0}
.hrg #etapes .steps .steps-cta + .exit{margin-top:6px}

/* 03/10 : Raphaël à gauche des cases de choix */
.hrg .profil-row{display:grid;grid-template-columns:119px minmax(0,1fr);column-gap:18px;align-items:end}   /* 03/10 : photo à 70 % (170 → 119 px) */
.hrg .profil-guide{display:block;width:100%;height:auto;margin:0 0 -6px}
@media(max-width:900px){.hrg .profil-row{grid-template-columns:1fr}.hrg .profil-guide{display:none}}

/* 03/10 : « Une sortie durable » dans la carte bonheur */
.hrg .q3 .q-card .q-final{margin:auto 0 14px!important;justify-content:center;font-size:18px}
.hrg .q3 .q-card .q-final + .qm{margin-top:0}

/* 03/10 : essai — photo à gauche du titre « Vous vous reconnaissez peut-être ici » */
@media(min-width:901px){
  .hrg #profil.photo-titre>.wrap{display:grid;grid-template-columns:170px minmax(0,1fr);column-gap:28px;align-items:center}
  .hrg #profil.photo-titre .profil-row{display:contents}
  .hrg #profil.photo-titre .profil-guide{grid-column:1;grid-row:1;align-self:end;margin:0 0 6px}
  .hrg #profil.photo-titre>.wrap>h2,.hrg #profil.photo-titre>.wrap>.lead{grid-column:2;text-align:left;margin-left:0}
  .hrg #profil.photo-titre>.wrap>h2{align-self:end}
  .hrg #profil.photo-titre>.wrap>.lead{align-self:start}
  .hrg #profil.photo-titre .grid3{grid-column:1 / -1;margin-top:26px}
}

/* 03/10 : flèche de retour plus épaisse, pilotée par le scroll sur grand écran */
@media(min-width:901px){
  .hrg .loop::before{border-width:3px;border-color:rgba(0,128,116,.8);border-top:0}
  .hrg .loop::after{left:calc(10% - 9px);width:21px;height:21px;top:calc(100% - 4px);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M1.5 8l4.5-4.5 4.5 4.5' fill='none' stroke='%23008074' stroke-opacity='.8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
  .hrg.anim-on .loop.lp-scrub::before{transition:none;clip-path:inset(0 0 0 calc((1 - var(--ret,0)) * 100%))}
  .hrg.anim-on .loop.lp-scrub::after{transition:opacity .25s ease,translate .25s ease-out;opacity:0;translate:0 6px}
  .hrg.anim-on .loop.lp-scrub.lp-done::after{opacity:1;translate:0 0}
}

/* 03/10 : voile du menu de gauche (fondu sortant puis entrant) */
.rail-veil{position:fixed;inset:0;z-index:9000;background:var(--bg,#fbfaf6);opacity:0;pointer-events:none;transition:opacity .5s ease}
.rail-veil.on{opacity:1}
@media (prefers-reduced-motion:reduce){.rail-veil{transition:none}}

/* 03/10 : titre de la boucle sous les cartes, dans la flèche verte de retour */
.hrg #approche .loop-title{text-align:center;transition:opacity .9s ease}
.hrg.anim-on #approche .loop-title{opacity:0}
@media(min-width:901px){
  .hrg #approche .loop{margin-top:40px!important}
  .hrg #approche .loop + .loop-title{position:relative;margin:-58px 0 34px;padding:0 12%}
}
@media(max-width:900px){.hrg #approche .loop + .loop-title{margin:8px 0 24px}}

/* 03/10 : courbe poids / bonheur + image trois étapes, fin de « Retravailler son quotidien » */
.hrg .pc{max-width:640px;margin:44px auto 0;background:#fff;border:1px solid var(--line);border-radius:18px;padding:16px 16px 8px;box-shadow:0 18px 44px rgba(19,52,59,.08)}
.hrg .pc .cap{font:700 12px Arial,sans-serif;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:0 0 4px 6px}
.hrg .pc svg{display:block;width:100%;height:auto;overflow:visible}
.hrg .pc-grid line{stroke:#e5ece8;stroke-width:1}
.hrg .pc-grid text{font:600 11px Arial,sans-serif;fill:#9aa9a3}
.hrg .pc-line{fill:none;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:0}
.hrg .pc-bon{stroke:#2fb457}
.hrg .pc-poi{stroke:#b5835a}
.hrg .pc-lbl{font:700 13px Arial,sans-serif}
.hrg .pc-lbon{fill:#2fb457}.hrg .pc-lpoi{fill:#b5835a}
.hrg .pc-mark line{stroke:#2fb457;stroke-width:1.5;stroke-dasharray:4 5}
.hrg .pc-mark text{font:700 12px Arial,sans-serif;fill:#13343b}
.hrg .pc-img{max-width:520px;margin:28px auto 0;text-align:center}
.hrg .pc-img img{width:100%;height:auto;display:block}
.anim-on .hrg .pc-line,.hrg.anim-on .pc-line{stroke-dashoffset:1;transition:stroke-dashoffset 2.4s cubic-bezier(.45,0,.25,1)}
.anim-on .hrg .pc-poi,.hrg.anim-on .pc-poi{transition-delay:1.9s}
.anim-on .hrg .pc-mark,.anim-on .hrg .pc-lbl,.hrg.anim-on .pc-mark,.hrg.anim-on .pc-lbl{opacity:0;transition:opacity .9s ease}
.anim-on .hrg .pc-mark,.hrg.anim-on .pc-mark{transition-delay:1.5s}
.anim-on .hrg .pc-lbon,.hrg.anim-on .pc-lbon{transition-delay:1.8s}
.anim-on .hrg .pc-lpoi,.hrg.anim-on .pc-lpoi{transition-delay:3.6s}
.anim-on .hrg .pc-img,.hrg.anim-on .pc-img{opacity:0;transform:translateY(14px);transition:opacity 1.1s ease,transform 1.1s ease}
.hrg .pc.is-in .pc-line{stroke-dashoffset:0}
.hrg .pc.is-in .pc-mark,.hrg .pc.is-in .pc-lbl,.hrg .pc-img.is-in{opacity:1!important;transform:none!important}
@media (max-width:700px){.hrg .pc{margin-top:32px;padding:10px 10px 4px}.hrg .pc-mark text{font-size:15px}.hrg .pc-grid text{font-size:14px}}

/* 03/10 : encart « Ce que je ne vous demanderai pas » après le texte de « Votre situation » */
.hrg .lp-gate > .spare{transition:opacity .7s ease .2s,transform .7s ease .2s}
.hrg .lp-gate:not(.lp-after) > .spare{opacity:0!important;transform:translateY(16px)!important}
#approche .spare{margin-top:28px}
/* 03/10 : flèches étape précédente / suivante, en bas au centre */
.hrg .step-nav{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:8000;display:flex;gap:8px;align-items:center;transition:opacity .4s}
.hrg .step-nav button{font:700 15px Arial,sans-serif;color:#fff;background:#008074;border:0;border-radius:999px;height:44px;min-width:44px;padding:0 16px;cursor:pointer;box-shadow:0 8px 22px rgba(19,52,59,.22);transition:background .2s,opacity .3s}
.hrg .step-nav button:hover{background:#006b61}
.hrg .step-nav button[data-dir="-1"]{background:#fff;color:#008074;border:1px solid #cfe3dc;padding:0}
.hrg .step-nav.at-top button[data-dir="-1"]{opacity:0;pointer-events:none}
.hrg .step-nav.at-end button[data-dir="1"]{opacity:0;pointer-events:none}
@media (max-width:700px){.hrg .step-nav{bottom:12px;left:16px;transform:none}.hrg .step-nav button span{display:none}.hrg .step-nav button{padding:0;width:44px}}

/* 03/10 : courbe commune agrandie + suite sur le poids */
.hrg .q3 .qc-chart{max-width:760px;transform-origin:50% 0;will-change:transform;position:relative;z-index:2}
.hrg .q3-cols{transition:none}
.hrg .qc-mark line{stroke:#b5835a;stroke-width:1.5;stroke-dasharray:4 5}
.hrg .qc-mark text{font:700 12px Arial,sans-serif;fill:#8a5f3c}
.hrg .qc-end{display:flex;align-items:center;justify-content:center;gap:4px;margin:2px 0 6px;font:800 15px/1.3 Arial,sans-serif;color:#006b60;opacity:0}
.hrg .q3 .qc-chart{max-width:640px}
.hrg .qc-end{position:absolute;top:12px;right:18px;margin:0;font-size:13px}
.hrg .qc-mark line{stroke:#008074}.hrg .qc-mark text{fill:#006b60}

/* 03/10 : suite sur le poids — graphique allongé (même hauteur), 4e carte, « stress » recouvre en partie « sommeil » */
.hrg .q3 .qc-chart{transform:none!important}
.hrg .q3-cols{position:relative}
.hrg .q3-cols .q-card{position:relative}
.hrg .q3-cols .q-card:nth-child(2){z-index:2}.hrg .q3-cols .q-card:nth-child(3){z-index:3}
.hrg .q3-cols .q-card:nth-child(2),.hrg .q3-cols .q-card:nth-child(3){box-shadow:-14px 0 30px rgba(19,52,59,.10),0 14px 34px rgba(19,52,59,.08)}
.hrg .q3-cols .q-w4{position:absolute;right:0;top:0;bottom:0;opacity:0;z-index:4;justify-content:flex-start;align-items:flex-start;box-shadow:-14px 0 24px -16px rgba(19,52,59,.28);border-color:color-mix(in srgb,var(--c) 35%,#fff)}
.hrg .q3-cols .q-w4 h3{color:var(--c)}
.hrg .q3-cols .q-w4 .q-ico svg{stroke:var(--c)}
@media (max-width:900px){.hrg .q3-cols .q-w4{position:static;width:auto!important;translate:none!important}}
.hrg .q3-cols .q-w4 h3{font-size:21px;line-height:1.3}
/* 03/10 : « Ce que je ne vous demanderai jamais » — titre rouge, cadre marron plus épais */
.hrg .spare{border:3px solid #8b5a2b}
.hrg .spare strong{color:#b3261e}
.hrg .qc-end{display:none}
.hrg .qc-wtxt{font:800 15px Arial,sans-serif;fill:#006b60}
.hrg .q3-cols .q-w4 .q-w4-txt{margin:8px 0 0;font-size:13px;line-height:1.42;color:#33504b}

/* 03/10 : flèche vers les cases sous « Choisissez votre situation : » */
.hrg .profil-down{display:inline-block;vertical-align:middle;width:.95em;height:.95em;margin-left:.15em;animation:hrgDown 1.8s ease-in-out infinite}
.hrg .profil-down svg{width:100%;height:100%;fill:none;stroke:#008074;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
@keyframes hrgDown{0%,100%{transform:translateY(-2px)}50%{transform:translateY(5px)}}
@media (prefers-reduced-motion:reduce){.hrg .profil-down{animation:none}}
/* 03/10 : « Ce qui est inclus » — apparition plus rapide des cases */
.hrg.anim-on #accompagnement .program > .rv{transition-duration:.38s,.38s,.38s}
/* 03/10 : bouton sous les trois cases du paiement à la réussite, aligné à droite */
.hrg .pay-cta{display:flex;justify-content:flex-end;margin:26px 0 34px}
/* 03/10 : grand écran — les repères à gauche remplacent le menu du haut ; il reste affiché sur petit écran */
@media(min-width:1420px){.hrg.anim-on .menu{display:none}}

/* 03/10 : titre du programme fixé avec la courbe, marges resserrées */
@media (min-width:901px){.hrg .qx-stage>.kicker{margin-bottom:4px}.hrg .qx-stage>h2{margin-bottom:6px;line-height:1.25}.hrg #programme .qx-stage>.qx-title{margin-top:16px}.hrg .qx-stage>.qx-view{margin-top:12px}}

/* Mobile RDV — 03/10/2026 : menu, piles compactes et effets allégés. */
.hrg .rdv-menu-toggle{display:none}
#tariff-ab-rail[hidden]{display:none!important}
.hrg .group-visual .figure{margin:0}
.hrg .group-visual .quote{margin:20px 0 0;font-size:22px;line-height:1.4;text-align:left}
.hrg .group-visual{align-self:center}
.hrg .group-intro>.group-visual{grid-column:1;grid-row:1}
.hrg .duo .group-video{width:100%;max-width:300px;justify-self:center;margin:0}
.hrg .mx-stage>.mx-head{display:block;text-align:left;flex:none}
.hrg .mx-stage>.lead.mx-head{margin:0 0 14px}
body.hrg-rdv-page .hpp-prospect-whatsapp{right:calc(var(--rdv-cta-width,260px) + 30px)!important;bottom:max(20px,calc(env(safe-area-inset-bottom) + 20px))!important}
body.hrg-rdv-page .hpp-prospect-whatsapp__tooltip{opacity:1;transition:opacity .15s}
body.hrg-rdv-page .hpp-prospect-whatsapp:hover .hpp-prospect-whatsapp__tooltip,body.hrg-rdv-page .hpp-prospect-whatsapp:focus-visible .hpp-prospect-whatsapp__tooltip{opacity:1}
@media(max-width:900px){
 .hrg.nav-ready .menu{display:none}
 .hrg.nav-ready .rdv-menu-toggle{position:fixed;right:12px;top:max(10px,env(safe-area-inset-top));z-index:8100;display:flex;align-items:center;gap:12px;padding:11px 14px;border:1px solid #cfe3dc;border-radius:12px;background:#fff;color:#006b60;font:700 15px Arial,sans-serif;box-shadow:0 3px 12px #173c3314;cursor:pointer}
 .rdv-menu-bars{width:21px;display:grid;gap:4px}.rdv-menu-bars i{display:block;height:2px;background:currentColor;border-radius:2px}
 .hrg.nav-ready .rail{position:fixed;left:auto;right:12px;top:62px;transform:none;z-index:8100;display:none;max-height:calc(100svh - 144px);overflow-y:auto;overscroll-behavior:contain;width:min(290px,calc(100vw - 24px));padding:18px 20px;border:1px solid #cfe3dc;border-radius:16px;background:#fff;box-shadow:0 10px 30px #173c3320;gap:5px}
 .hrg.nav-ready .rail.is-open{display:flex;flex-direction:column}
 .hrg .rail a{font-size:14px;min-height:24px;flex-shrink:0;justify-content:flex-end}
 .hrg .rail a span{max-width:220px;line-height:1.3}
 .hrg .rail.in-hero a{color:#879a94}.hrg .rail a.is-on{color:#008074;font-weight:800}
 .hrg .rail-steps{flex-shrink:0;padding-left:4px;gap:4px}
 .hrg .rail a.is-on::after{background:#008074;border-color:#fff;box-shadow:0 0 0 1.5px #008074}
 .hrg .hero{padding-top:80px}
 .hrg.anim-on #profil>.wrap{opacity:1!important;filter:none!important;transform:none!important}
 .fly-feather.is-flying,.hrg .fly-feather{display:none!important}
 .hrg.anim-on .rv{filter:none!important;transition:opacity .25s ease,transform .25s ease;transform:translateY(8px)}
 .hrg .q-card,.hrg .qc-chart,.hrg .mx-chart,.hrg .mx .mx-one li{box-shadow:none}
 .hrg .lp-stage .loop-title{order:0;margin:14px 0 10px;opacity:1!important;font-size:15px}
 .hrg .loop{margin-top:12px;margin-left:24px;gap:22px;margin-bottom:26px}
 .hrg .loop>div{padding:14px;font-size:16px}
 .hrg.anim-on .loop.lp>div{transition:opacity .22s ease,transform .22s ease}
 .hrg.anim-on .loop.lp>div.lp-on{opacity:1;transform:none}
 .hrg .loop::before{left:-21px;right:auto;top:36px;bottom:36px;height:auto;width:18px;border:3px solid #c43b36;border-right:0;border-radius:14px 0 0 14px}
 .hrg.anim-on .loop.lp-scrub::before{clip-path:inset(calc((1 - var(--ret,0))*100%) 0 0 0);transition:none}
 .hrg .loop::after{left:-4px;top:29px;bottom:auto;right:auto;width:16px;height:16px;transform:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 2l6 6-6 6' fill='none' stroke='%23c43b36' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
 .hrg.anim-on .loop.lp::after{opacity:var(--ret,0);translate:none;transition:none}
 .hrg .loop.lp-done>div::after,.hrg .loop.lp-done::after{animation:none!important}
 .hrg #programme .qx-stage>.kicker{font-size:11px;margin:0 0 4px}
 .hrg #programme .qx-stage>h2{font-size:23px;line-height:1.15;margin:0 0 6px}
 .hrg #programme .qx-stage>.qx-title{font-size:11px;letter-spacing:.06em;margin:0 0 6px}
 .hrg .qx-stage>.qx-view{margin:0}
 .hrg .q3 .qc-chart{max-width:100%;padding:8px 8px 3px}
 .hrg .q3 .qc-chart svg{height:145px;width:100%}
 .hrg .qc-chart .cap{font-size:10px;margin:0 0 2px}
 .hrg .q3-cols{display:block;position:relative;margin-top:10px}
 .hrg .q3-cols>.q-card,.hrg .q3-cols>.q-w4{position:absolute;inset:0;bottom:auto;width:100%!important;padding:12px 14px;translate:none!important;transform:none!important;box-shadow:none;opacity:0;pointer-events:none;transition:opacity .18s ease;background:#fff}
 .hrg .q3-cols>.q-current{pointer-events:auto}
 .hrg .q3 .q-ico{width:26px;height:26px;margin-bottom:5px}.hrg .q3 .q-ico svg{width:18px;height:18px}
 .hrg .q3 .q-card h3,.hrg .q3 .q-w4 h3{font-size:17px;line-height:1.2;margin:0 0 8px}
 .hrg .q3 .q-list{margin:0 0 8px}.hrg .q3 .q-list li{font-size:14px;line-height:1.3;margin-bottom:5px;padding-left:22px}
 .hrg .q3 .qm{padding:7px 10px}.hrg .q3 .qm-score b{font-size:23px}.hrg .q3 .qm-name{font-size:10px}.hrg .q3 .qm-bar{margin-top:5px;height:6px}
 .hrg .q3 .q-card .q-final{font-size:14px;margin:0 0 5px!important}
 .hrg .qx-stage{background:#fbfbf7;padding-bottom:8px}
 .hrg .mx-stage{min-height:0;justify-content:flex-start}
 .hrg .mx-stage>.kicker.mx-head{font-size:11px;margin:0 0 4px}
 .hrg .mx-stage>h2.mx-head{font-size:23px;line-height:1.15;margin:0 0 8px}
 .hrg .mx-stage>.lead.mx-head{font-size:14px;line-height:1.35;margin:0 0 10px}
 .hrg .mx-title{font-size:18px;margin:0 0 6px}
 .hrg .mx-stage>.kicker{font-size:10px;margin:0 0 4px}
 .hrg .mx-duo{gap:10px}.hrg .mx-chart{padding:7px 8px 3px}.hrg .mx-chart svg{height:145px}
 .hrg .mx .months.mx-one{width:100%}.hrg .mx .mx-one li{min-height:170px;padding:10px 14px;gap:4px}
 .hrg .mx .mx-one .mx-label{font-size:16px;min-height:1.4em;margin-top:3px}
 .hrg .mx .mx-one .progress-percent{font-size:14px;margin:4px 0}.hrg .mx .mx-one .bar{height:20px}
 .hrg .mx .mx-one .odo{--r:19px;font-size:18px}
 .hrg .mx-pausenote{font-size:13px;line-height:1.25}
 .hrg .mx-mobile-deck{position:static;transform:none;opacity:1;pointer-events:auto;margin:20px 0 0;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
 .hrg .mx-mobile-deck li{transform:none!important;box-shadow:none;will-change:auto}.hrg .mx-mobile-deck li::after{display:none}
 .hrg .mx .c-ring,.hrg .mx .bar-direction svg,.hrg .profil-down,.hrg .btn-next .next-arrow{animation:none!important}
 .hrg .group-intro{grid-template-columns:1fr;gap:20px}.hrg .group-intro>.group-visual,.hrg .group-intro>.group-text{grid-column:auto;grid-row:auto}
 .hrg .group-visual .quote{font-size:20px;margin-top:16px}
 .hrg-float{right:12px;bottom:max(12px,calc(env(safe-area-inset-bottom) + 12px));padding:8px 10px;gap:8px;border-radius:12px;max-width:210px}
 .hrg-float img{width:38px;height:38px}.hrg-float-title{font-size:14px;line-height:1.25}.hrg-float-title>span{display:block;white-space:nowrap}.hrg-float-sub{display:none}
 body.hrg-rdv-page .hpp-prospect-whatsapp{right:calc(var(--rdv-cta-width,190px) + 22px)!important;bottom:max(12px,calc(env(safe-area-inset-bottom) + 12px))!important;width:50px;height:54px}
 body.hrg-rdv-page .hpp-prospect-whatsapp svg{width:42px;height:42px;filter:none}
 body.hrg-rdv-page .hpp-prospect-whatsapp__tooltip{display:block;position:fixed;right:12px;bottom:max(80px,calc(env(safe-area-inset-bottom) + 80px));box-sizing:border-box;width:calc(var(--rdv-cta-width,190px) + 60px);max-width:calc(100vw - 24px);font-size:12px;line-height:1.4}
 body.hrg-rdv-page .hpp-prospect-whatsapp__tooltip::after{right:calc(var(--rdv-cta-width,190px) + 29px)}
 body.hrg-rdv-page.rdv-whatsapp-hint-dismissed .hpp-prospect-whatsapp__tooltip{display:none}
 .hrg .step-nav{left:12px;bottom:80px;gap:5px}.hrg .step-nav button{width:34px;min-width:34px;height:34px;padding:0;font-size:13px;box-shadow:none}.hrg .step-nav button span{display:none}
 .hrg .actions,.hrg .hero-actions{align-items:flex-end}.hrg .hero-actions .actions-row{justify-content:flex-end}
}
@media(max-width:900px) and (max-height:700px){
 .hrg #programme .qx-stage>h2,.hrg .mx-stage>h2.mx-head{font-size:20px}
 .hrg .q3 .qc-chart svg,.hrg .mx-chart svg{height:105px}
 .hrg .q3 .q-ico{display:none}.hrg .q3-cols>.q-card{padding:10px 12px}
 .hrg .mx .mx-one li{min-height:145px}.hrg .mx-stage>.lead.mx-head{font-size:13px}
}
@media(max-width:900px){
 .hrg .mx-duo{position:static;transform:none}
 .hrg .mx-show{height:auto!important}
 .hrg #approche .loop{margin-top:12px!important}
 .hrg .mx .mx-one li{height:205px;min-height:205px}
 .hrg .mx-stage .mx-title{display:none}
}
@media(max-width:900px) and (max-height:700px){.hrg .mx .mx-one li{height:160px;min-height:160px}}
@media(max-width:900px) and (max-height:700px){.hrg .mx-chart svg{height:90px}.hrg .mx .mx-one li{height:150px;min-height:150px}}
@media(max-width:900px){
 .hrg .mx .mx-one .odo{height:auto;margin:0;overflow:visible;mask-image:none;-webkit-mask-image:none;font-size:19px}
 .hrg .mx .mx-one .odo>span{padding:0;transform:none!important}
 .hrg .mx .mx-one .odo>span>b{display:none;height:auto;line-height:1.15}.hrg .mx .mx-one .odo>span>b.is-on{display:block}
 .hrg .mx .mx-one .mx-pct.is-goal{display:none}
 .hrg .mx-goal{margin:2px 0}.hrg .mx-goal .goal-tick{width:24px;height:24px;box-shadow:none}.hrg .mx-goal .goal-tick svg{width:16px;height:16px}
 .hrg .mx .mx-one .mx-label{flex-shrink:0}
 .hrg .mx .mx-one .progress-track{margin-top:auto}
}
@media(max-width:900px) and (max-height:700px){
 .hrg #programme .qx-stage>.qx-title{display:none}
 .hrg #programme .qx-stage>h2{font-size:19px}
 .hrg .q3 .qc-chart svg{height:90px}
 .hrg .q3 .q-list li{font-size:13px;line-height:1.25;margin-bottom:4px}
 .hrg .q3 .q-card h3,.hrg .q3 .q-w4 h3{font-size:16px}
}
@media(max-width:900px) and (max-height:700px){.hrg .mx-chart svg{height:75px}.hrg .mx .mx-one li{height:170px;min-height:170px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* 03/10 : cycle fixé jusqu'au retour complet ; graphiques et navigation tactile. */
.hrg .step-nav button svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;vertical-align:middle;transform:rotate(90deg)}
.hrg .step-nav button[data-dir="-1"] svg{transform:rotate(-90deg)}
@media(max-width:900px){
 .feather-desktop-sound{display:none}
 .hrg .lp-track.is-pin .lp-stage{background:#fff;padding:8px 0 4px;z-index:2}
 .hrg .lp-stage .loop-title{margin:0 0 12px;font-size:13px;line-height:1.3}
 .hrg .lp-stage .loop{margin:0 0 0 24px!important;gap:16px}
 .hrg .lp-stage .loop>div{padding:10px 12px;font-size:14px;line-height:1.3}
 .hrg .lp-stage .loop strong{font-size:16px;line-height:1.25;margin-bottom:5px}
 .hrg .loop::before{top:28px;bottom:28px}.hrg .loop::after{top:21px}
 .hrg .mx-duo{width:100%;align-items:stretch;flex-direction:column}
 .hrg .mx-chart{width:100%;max-width:none;flex:0 0 auto;padding:8px 4px 4px}
 .hrg .mx-chart svg{width:100%;height:auto!important}
 .hrg .step-nav{gap:7px}
 .hrg .step-nav button{width:42px;min-width:42px;height:42px;border-radius:10px;border:1px solid #d0d5d3;background:#d2d7d5;color:#385149;display:flex;align-items:center;justify-content:center}
 .hrg .step-nav button[data-dir="-1"]{background:#edf0ee;color:#385149;border-color:#dde2df}
 .hrg .step-nav button svg{width:25px;height:25px;transform:none;stroke-width:3.3}
 .hrg .step-nav button[data-dir="-1"] svg{transform:rotate(180deg)}
}
@media(max-width:900px) and (max-height:700px){
 .hrg .lp-stage .loop{gap:12px}.hrg .lp-stage .loop>div{padding:8px 10px;font-size:13px;line-height:1.25}
 .hrg .lp-stage .loop strong{font-size:15px;margin-bottom:3px}
 .hrg .lp-stage .loop-title{font-size:12px;margin-bottom:8px}
 .hrg .mx-stage>h2.mx-head{font-size:18px;line-height:1.1;margin-bottom:5px}
 .hrg .mx-stage>.lead.mx-head{font-size:12px;line-height:1.25;margin-bottom:6px}
 .hrg .mx .mx-one li{height:125px;min-height:125px;padding:8px 12px;gap:2px}
 .hrg .mx .mx-one .mx-label{font-size:14px;margin-top:0}
 .hrg .mx .mx-one .progress-percent{font-size:12px;margin:2px 0}
 .hrg .mx-pausenote{font-size:11px;line-height:1.2}
 .hrg .mx .mx-one .bar{height:16px}
 .hrg .mx .mx-one .mx-goal{position:absolute;right:12px;top:10px}
 .hrg .mx-stage .mx-title{display:none}
}

@media(max-width:900px){.hrg .lp-stage .loop>div:not(:last-child)::after{bottom:-14px;width:12px;height:10px}}
@media(max-width:900px) and (max-height:700px){.hrg .lp-stage .loop>div:not(:last-child)::after{bottom:-11px;width:10px;height:8px}}
@media(max-width:900px) and (max-height:700px){
 .hrg .mx .mx-one li{height:98px;min-height:98px;padding:6px 12px;gap:1px}
 .hrg .mx .mx-one .mx-label{font-size:13px;line-height:1.2}
 .hrg .mx .mx-one small{font-size:11px}
 .hrg .mx .mx-one .odo{font-size:16px}
 .hrg .mx .mx-one .mx-pausenote{font-size:10px;line-height:1.15;margin:0}
 .hrg .mx .mx-one .progress-percent{font-size:11px;margin:1px 0}
 .hrg .mx .mx-one .bar{height:13px}
}
@media(max-width:900px){.hrg .lp-stage .loop{padding-left:0}}
@media(max-width:900px) and (max-height:700px){
 .hrg .lp-stage .loop{gap:10px}
 .hrg .lp-stage .loop>div{padding:7px 9px;font-size:13px;line-height:1.2}
 .hrg .lp-stage .loop strong{font-size:14px;line-height:1.2;margin-bottom:2px}
 .hrg .lp-stage .loop>div:not(:last-child)::after{bottom:-10px;width:9px;height:7px}
}
/* Barre basse : les flèches restent sous les encarts, sans cacher leurs dernières lignes. */
@media(max-width:900px){
 .hrg .step-nav{bottom:max(12px,calc(env(safe-area-inset-bottom) + 12px));gap:6px}
 .hrg .step-nav button{width:40px;min-width:40px;height:40px}
 .hrg-float{width:190px}
}
@media(max-width:340px){
 .hrg .step-nav button{width:36px;min-width:36px;height:36px}
 .hrg-float{width:160px;padding:7px 8px;gap:6px}
 .hrg-float img{width:28px;height:28px}.hrg-float-title{font-size:12px}
 body.hrg-rdv-page .hpp-prospect-whatsapp{width:40px;height:42px;right:calc(var(--rdv-cta-width,160px) + 24px)!important}
 body.hrg-rdv-page .hpp-prospect-whatsapp svg{width:36px;height:36px}
}

/* 03/10 : au mois 6, récapitulatif qui passe sur la grande carte, sous la courbe fixée. */
.hrg .mx-recap-window{display:none}
@media(max-width:900px){
 .hrg .mx-recap-window{display:block;position:absolute;left:0;right:0;overflow:hidden;z-index:3;pointer-events:none;visibility:hidden;contain:paint}
 .hrg .mx-recap-window.is-on{visibility:visible}
 .hrg .mx-recap-deck{position:relative;top:0;left:0;right:auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:0;opacity:0;will-change:transform;transform-origin:50% 0}
 .hrg .mx-recap-deck li{height:auto;min-height:125px;padding:12px 10px;gap:7px;box-shadow:none;transform:none!important;will-change:auto}
 .hrg .mx-recap-deck li::after{display:none}
 .hrg .mx-recap-deck small{font-size:13px}
 .hrg .mx-recap-deck span{font-size:14px;line-height:1.25}
 .hrg .mx-recap-deck .progress-percent{font-size:12px;margin:0}
 .hrg .mx-chart{position:relative;z-index:4}
}
@media(max-width:900px) and (max-height:700px){
 .hrg .mx-recap-deck{grid-template-columns:1fr}
 .hrg .mx-recap-deck li{height:98px;min-height:98px;padding:8px 12px;gap:3px}
 .hrg .mx-recap-deck span{font-size:13px;line-height:1.2}
 .hrg .mx-recap-deck small{font-size:12px}
}

/* Étape 2 mobile : courbes étendues et repères de mois lisibles. */
@media(max-width:900px){
 .hrg .q3 .qc-chart{width:100%;max-width:none;padding:8px 4px 4px}
 .hrg .q3 .qc-chart svg{width:100%;height:auto!important;max-height:none}
 .hrg .qc-grid .qc-lbl{font-size:22px}
 .hrg .qc-grid text{font-size:16px}
 .hrg .qc-tag{font-size:18px}
 .hrg .qc-wtxt{font-size:18px}
}

/* Étape 4 : les encarts blancs remontent sous la courbe avant la sortie du bloc fixé. */
@media(max-width:900px){
 .hrg .mx-recap-window .mx-pay-recap{position:absolute;left:0;right:0;top:0;display:grid;grid-template-columns:1fr;gap:12px;margin:0;padding:0;visibility:hidden;z-index:2;will-change:transform}
 .hrg .mx-recap-window .mx-pay-recap.is-on{visibility:visible}
 .hrg .mx-pay-recap .card{opacity:1!important;transform:none!important;filter:none!important;transition:none!important;background:#fff;padding:16px 18px;box-shadow:none}
 .hrg .mx-pay-recap .card .icon{width:32px;height:32px;margin:0 0 8px}
 .hrg .mx-pay-recap .card h3{font-size:18px;line-height:1.2;margin:0 0 8px}
 .hrg .mx-pay-recap .card p{font-size:15px;line-height:1.35;margin:0}
}
@media(max-width:900px) and (max-height:700px){
 .hrg .mx-pay-recap .card{padding:8px 10px;display:grid;grid-template-columns:20px minmax(0,1fr);column-gap:8px;row-gap:3px}
 .hrg .mx-pay-recap .card .icon{width:20px;height:20px;font-size:14px;grid-row:span 2;margin:0}
 .hrg .mx-pay-recap .card .icon svg{width:14px;height:14px}
 .hrg .mx-pay-recap .card h3{font-size:14px;line-height:1.2;margin:0}
 .hrg .mx-pay-recap .card p{font-size:12px;line-height:1.2;margin:0}
}
@media(max-width:900px){.hrg .mx-recap-window .mx-pay-recap.is-on{pointer-events:auto}}

/* Navigation assistée réservée aux ordinateurs. */
@media (max-width:1180px), (pointer:coarse){
 .hrg .step-nav{display:none!important}
}