/* Offres Google et Réseaux animées (08/11/2026, GO Luca). Feuille autonome, tout est sous .oa :
 * aucune règle ne touche la nav, le formulaire ni le pied de page historiques des LP. */
.oa{
  --a:#051D33;--b:#700020;--c:#798DA4;--ww:#EFEFED;--ow:#fff;
  --ink:#051D33;--ink-2:rgba(5,29,51,.74);--ink-3:rgba(5,29,51,.56);--line:rgba(5,29,51,.12);
  --map:#F3F1EC;--street:#fff;--park:#DDE6D3;--river:#CFDCE8;--pin:#9AA7B6;--wa:#25D366;--blue:#1A73E8;
  --r:12px;--row:52px;--nav:72px;
  --display:'Lil Grotesk','Space Grotesk',sans-serif;--text:'Space Grotesk',system-ui,sans-serif;
  font-family:var(--text);color:var(--ink);font-size:17px;line-height:1.55
}
.oa *,.oa *::before,.oa *::after{box-sizing:border-box}
.oa-wrap{max-width:1120px;margin:0 auto;padding:0 16px}
.oa-sec{padding:56px 0}
.oa-sec--alt{background:var(--ww)}
.oa-sec--dark{background:var(--a);color:#fff}
.oa-kicker{font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--b);margin:0 0 10px}
.oa-sec--dark .oa-kicker{color:#E9A9B9}
.oa h1,.oa h2{font-family:var(--display);font-weight:900;text-transform:uppercase;line-height:1.02;letter-spacing:-.005em;margin:0 0 14px;color:inherit}
.oa h1{font-size:clamp(34px,9.6vw,64px)}
.oa h2{font-size:clamp(26px,7vw,44px)}
.oa h1 em,.oa h2 em{font-style:normal;color:var(--b)}
.oa-sec--dark h2 em{color:#E9A9B9}
.oa h3{font-size:1.06rem;font-weight:700;margin:0 0 6px;line-height:1.3}
.oa p{margin:0 0 12px}
.oa-lead{font-size:1.06rem;color:var(--ink-2);max-width:58ch}
.oa-sec--dark .oa-lead,.oa-sec--dark p{color:rgba(255,255,255,.8)}
.oa-note{font-size:.78rem;color:var(--ink-3);margin-top:12px}
.oa-btns{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.oa-btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:12px 22px;border-radius:999px;background:var(--b);color:#fff;font:600 .95rem var(--text);text-decoration:none;border:1.5px solid var(--b);transition:transform .16s cubic-bezier(.23,1,.32,1),background-color .2s}
.oa-btn:active{transform:scale(.97)}
.oa-btn--ghost{background:transparent;color:var(--a);border-color:var(--a)}
.oa-btn--wa{background:var(--wa);border-color:var(--wa);color:#05361a}
@media (hover:hover){.oa-btn:hover{background:#520018}.oa-btn--ghost:hover{background:var(--a);color:#fff}.oa-btn--wa:hover{background:#1fb859}}
.oa-trust{text-wrap:balance;font-size:.82rem;color:var(--ink-3);margin-top:14px}
/* Hero : texte puis animation (mobile), côte à côte (bureau) */
.oa-hero{padding:calc(var(--nav) + 28px) 0 48px}
.oa-hero__grid{display:grid;gap:28px}
.oa-hero__sub{font-size:1.1rem;color:var(--ink-2);max-width:46ch}
/* Listes de points */
.oa-cards{display:grid;gap:12px;margin-top:22px;padding:0;list-style:none;counter-reset:oa}
.oa-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px 18px 14px}
.oa-sec--alt .oa-card{border-color:transparent}
.oa-card p{color:var(--ink-2);font-size:.96rem;margin:0}
.oa-cards--num .oa-card{counter-increment:oa;position:relative;padding-left:56px}
.oa-cards--num .oa-card::before{content:counter(oa);position:absolute;left:18px;top:17px;width:26px;height:26px;border-radius:50%;background:var(--b);color:#fff;font:700 .8rem/26px var(--text);text-align:center}
.oa-sec--dark .oa-card{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.12)}
.oa-sec--dark .oa-card p{color:rgba(255,255,255,.78)}
/* Preuve */
.oa-proof{display:grid;gap:6px;padding:22px;border-radius:16px;background:var(--a);color:#fff;text-decoration:none;margin-top:18px}
.oa-proof b{font:900 clamp(40px,12vw,64px)/1 var(--display)}
.oa-proof span{color:rgba(255,255,255,.82)}
.oa-proof small{color:#E9A9B9;font-weight:600}
/* FAQ */
.oa-faq details{border-bottom:1px solid var(--line);padding:14px 0}
.oa-faq summary{cursor:pointer;font-weight:700;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:44px}
.oa-faq summary::after{content:'+';font-weight:400;font-size:1.3rem;line-height:1;transition:transform .2s}
.oa-faq details[open] summary::after{transform:rotate(45deg)}
.oa-faq details p{color:var(--ink-2);margin:10px 0 0}
/* ── A. Google ─────────────────────────────────────────── */
.g-stage{background:#fff;border:1px solid var(--line);border-radius:20px;padding:14px;box-shadow:0 18px 40px -24px rgba(5,29,51,.35);max-width:440px;width:100%;justify-self:center;overflow:hidden}
.g-search{display:flex;align-items:center;gap:8px;height:44px;padding:0 14px;border:1px solid var(--line);border-radius:999px;font-size:.95rem;box-shadow:0 2px 6px rgba(5,29,51,.06)}
.g-search__ico{width:18px;height:18px;fill:none;stroke:var(--ink-3);stroke-width:2;stroke-linecap:round;flex:none}
.g-search__q{white-space:nowrap}
.g-search__caret{width:1.5px;height:20px;background:var(--b);margin-left:1px}
.g-map{margin:12px 0;border-radius:var(--r);overflow:hidden;aspect-ratio:320/170;background:var(--map)}
.g-map svg{display:block;width:100%;height:100%}
.m-bg{fill:var(--map)}
.m-park{fill:var(--park)}
.m-river{fill:none;stroke:var(--river);stroke-width:12;stroke-linecap:round}
.m-streets path{fill:none;stroke:var(--street);stroke-width:5}
.m-streets .m-street--big{stroke-width:8}
.m-route{fill:none;stroke:#1A73E8;stroke-width:4;stroke-linecap:round}
.m-me__halo{fill:rgba(26,115,232,.18)}
.m-me__dot{fill:#1A73E8;stroke:#fff;stroke-width:2}
.m-pin__in{fill:var(--pin)}
.m-pin__hole{fill:#fff}
.m-pin--you .m-pin__in{fill:var(--b)}
.m-pulse{fill:none;stroke:var(--b);stroke-width:2;opacity:0}
.g-list{position:relative;list-style:none;margin:0;padding:0;height:calc(var(--row) * 5)}
.g-row{position:absolute;left:0;right:0;top:0;height:calc(var(--row) - 6px);display:flex;align-items:center;gap:10px;padding:0 10px;border-radius:10px;background:#fff;border:1px solid var(--line);font-size:.88rem}
.g-row__rank{flex:none;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-size:.75rem;font-weight:700;background:var(--ww);color:var(--ink-2)}
.g-row__body{display:flex;flex-direction:column;gap:5px;min-width:0;flex:1}
.g-row__body b{font-weight:600;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.g-sk{display:block;width:60%;height:6px;border-radius:3px;background:var(--ww)}
.g-row:nth-child(2){transform:translateY(52px)}.g-row:nth-child(3){transform:translateY(104px)}.g-row:nth-child(4){transform:translateY(156px)}.g-row:nth-child(5){transform:translateY(208px)}
.g-row--you{z-index:2;border-color:rgba(112,0,32,.25)}
.g-row--you .g-row__body b{color:var(--ink)}
.g-row--you .g-row__rank{background:var(--b);color:#fff}
.g-stars{display:flex;gap:2px;height:13px}
.g-stars svg{width:13px;height:13px;fill:#F2B400}
.g-row__go{flex:none;font-size:.75rem;font-weight:700;color:#fff;background:#1A73E8;border-radius:999px;padding:6px 10px}
.g-reviews{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:6px}
.g-review{display:flex;gap:8px;align-items:center;padding:10px;border-radius:10px;background:var(--ww)}
.g-av{flex:none;width:22px;height:22px;border-radius:50%;background:var(--c)}
.g-lines{display:flex;flex-direction:column;gap:5px;flex:1}
.g-lines i{display:block;height:5px;border-radius:3px;background:rgba(5,29,51,.15)}
.g-lines i+i{width:65%}

/* ── B. Réseaux ────────────────────────────────────────── */
.r-zone{fill:none;stroke:var(--b);stroke-width:1;stroke-dasharray:3 4;opacity:.35}
.r-home__halo{fill:rgba(112,0,32,.18)}
.r-home__dot{fill:var(--b);stroke:#fff;stroke-width:2.5}
.r-scale path{fill:none;stroke:var(--a);stroke-width:1.5}
.r-scale text{font:700 11px var(--text);fill:var(--a);text-anchor:middle}

/* ── Comment on travaille ─────────────────────────────────────────────────────────────────────
 * Par défaut (sans JS, mouvement réduit) : 6 cartes lisibles. Avec .is-pinned : un écran épinglé, un seul conteneur
 * centré (titre, compteur, étape), un cadre commun derrière les scènes qui se transforme d'une étape à l'autre. */
.oa-proc{background:var(--a);color:#fff}
.oa-proc .oa-kicker{color:#E9A9B9}
.oa-proc__pin{padding:56px 16px;max-width:1180px;margin:0 auto}
.oa-proc__head{text-align:center;max-width:860px;margin:0 auto}
.oa-proc__head h2 em{color:#E9A9B9}
.oa-proc__meter{display:none}
.oa-proc__list{list-style:none;margin:24px auto 0;padding:0;display:grid;gap:18px}
.oa-proc__deco{display:none}
.oa-step{display:grid;gap:14px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:18px;padding:18px}
.oa-step__n{display:inline-block;font:900 .9rem var(--display);color:#E9A9B9;letter-spacing:.08em;margin-bottom:6px}
.oa-step h3{font-family:var(--display);font-weight:900;text-transform:uppercase;font-size:clamp(20px,5.6vw,30px);line-height:1.05;margin:0 0 8px}
.oa-step p{color:rgba(255,255,255,.8);margin:0;max-width:44ch}
.oa-vis{position:relative;width:100%;max-width:400px;aspect-ratio:4/3;border-radius:16px;background:#0B2A47;overflow:hidden;justify-self:center}
.oa-vis svg{display:block;width:100%;height:100%;overflow:visible}

/* Épinglé : mobile d'abord (titre, compteur, scène, texte : empilés et centrés) */
.oa-proc.is-pinned .oa-proc__pin{height:100vh;height:100svh;padding:calc(var(--nav) + 12px) 16px 74px;display:flex;flex-direction:column;overflow:hidden}
.oa-proc.is-pinned .oa-proc__head{width:100%}
.oa-proc.is-pinned .oa-proc__head h2{font-size:clamp(20px,5.2vw,40px);margin-bottom:12px;text-wrap:balance}
.oa-proc.is-pinned .oa-proc__meter{display:flex;align-items:center;gap:14px;max-width:560px;margin:0 auto}
.oa-proc__count{display:flex;align-items:baseline;gap:6px;margin:0;font:900 1.05rem/1 var(--display);color:#fff;font-variant-numeric:tabular-nums}
.oa-roll{display:inline-block;height:1em;overflow:hidden;line-height:1}
.oa-roll__col{display:flex;flex-direction:column}
.oa-roll__col span{display:block;height:1em;line-height:1}
.oa-roll__tot{font-size:.72rem;color:rgba(255,255,255,.55)}
.oa-segs{flex:1;display:grid;grid-template-columns:repeat(6,1fr);gap:5px}
.oa-seg{height:4px;border-radius:2px;background:rgba(255,255,255,.16);overflow:hidden}
.oa-seg i{display:block;height:100%;background:#E9A9B9;transform-origin:0 50%;transform:scaleX(0)}
.oa-proc.is-pinned .oa-proc__list{flex:1;min-height:0;width:100%;margin:14px 0 0;gap:12px;display:grid;
  grid-template-areas:"vis" "txt";grid-template-rows:minmax(0,1fr) auto;grid-template-columns:minmax(0,1fr);justify-items:center;align-items:center}
.oa-proc.is-pinned .oa-proc__deco{display:contents}
.oa-proc.is-pinned .oa-step{display:contents}
.oa-proc.is-pinned .oa-step__txt{grid-area:txt;align-self:start;text-align:center;max-width:36em;opacity:0}
.oa-proc.is-pinned .oa-step__txt p{margin:0 auto}
.oa-proc.is-pinned .oa-step h3{font-size:clamp(20px,5.4vw,40px)}
.oa-proc.is-pinned .oa-vis{grid-area:vis;width:100%;height:100%;max-width:560px;aspect-ratio:auto;background:none;border-radius:0;overflow:visible;opacity:0;z-index:2}
.oa-frame,.oa-glow{grid-area:vis;align-self:center;justify-self:center;pointer-events:none;display:block}
.oa-frame{width:min(100%,560px);height:100%;max-height:420px;border-radius:28px;background:#123153;box-shadow:0 30px 80px -40px rgba(0,0,0,.8),inset 0 0 0 1px rgba(255,255,255,.06);z-index:1}
.oa-glow{width:min(90%,520px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(233,169,185,.22),rgba(233,169,185,0) 62%);z-index:0}
.oa-w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.1em;margin-bottom:-.1em}
.oa-w>span{display:inline-block}
@media (min-width:860px){
  .oa-proc__list{grid-template-columns:1fr 1fr}
  .oa-proc.is-pinned .oa-proc__pin{padding:calc(var(--nav) + 20px) 32px 28px}
  .oa-proc.is-pinned .oa-proc__list{grid-template-areas:"txt vis";grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);grid-template-rows:minmax(0,1fr);column-gap:64px;margin-top:22px}
  .oa-proc.is-pinned .oa-step__txt{align-self:center;justify-self:start;text-align:left;max-width:30em}
  .oa-proc.is-pinned .oa-step__txt p{margin:0;font-size:1.12rem}
  .oa-proc.is-pinned .oa-step h3{font-size:clamp(28px,3.2vw,46px)}
  .oa-proc.is-pinned .oa-vis{max-height:440px}
  .oa-frame{max-height:440px}
}


/* Visuels des étapes : couleurs */
.pv-card{fill:#fff}
.pv-soft{fill:#EFEFED}
.pv-line{fill:#D9DEE5}
.pv-b{fill:#700020}
.pv-a{fill:#051D33}
.pv-c{fill:#798DA4}
.pv-wa{fill:#25D366}
.pv-blue{fill:#1A73E8}
.pv-star{fill:#F2B400}
.pv-txt{font:700 11px 'Space Grotesk',system-ui,sans-serif;fill:#051D33}
.pv-txt--w{fill:#fff}
.pv-txt--s{font-size:9px;font-weight:600;fill:rgba(5,29,51,.6)}
.pv-stroke{fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.pv-stroke--b{stroke:#700020}
.pv-stroke--blue{stroke:#1A73E8}
.pv-ghost{fill:none;stroke:rgba(255,255,255,.35);stroke-width:2}
@media (min-width:860px){
  .oa-hero__grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:56px}
  .oa-cards{grid-template-columns:repeat(3,1fr)}
  .oa-cards--2{grid-template-columns:repeat(2,1fr)}
  .oa-sec{padding:80px 0}
}
.oa .g-stage{margin:0 auto}
/* ── Réseaux v2 : la vidéo diffusée en publicité dans le quartier, jusqu'à la réservation ── */
.r2{display:grid;justify-items:center;width:100%;max-width:460px;margin:0 auto}
.r2-map{width:100%;aspect-ratio:4/3;border-radius:var(--r);overflow:hidden;background:var(--map)}
.r2-map svg{display:block;width:100%;height:100%}
.r2-ring{fill:rgba(112,0,32,.06);stroke:var(--b);stroke-width:1.5;opacity:0}
.r2-hbody{fill:#C9D1DB}
.r2-win{fill:#F2B400}
.r2-house.is-on .r2-hbody{fill:#B8C2CE}
.r2-hph__body{fill:var(--a)}
.r2-hph__scr{fill:var(--b)}
.r2-pk{fill:var(--b);opacity:0}
.r2-chip__t{font:700 10px var(--text);fill:var(--a)}
.r2-phone,.s2-phone{width:min(200px,54vw);aspect-ratio:9/18.5;border-radius:30px;background:var(--a);padding:7px;box-shadow:0 24px 48px -26px rgba(5,29,51,.7);margin:-104px 8px 0 auto;position:relative;z-index:2}
.r2-screen,.s2-screen{position:relative;width:100%;height:100%;border-radius:24px;overflow:hidden;background:#111}
.r2-screen video{width:100%;height:100%;object-fit:cover;display:block}
.r2-spons{position:absolute;top:10px;left:10px;font:600 .6rem var(--text);color:#fff;background:rgba(0,0,0,.45);padding:3px 8px;border-radius:999px}
.r2-cta,.s2-cta{position:absolute;left:10px;right:10px;bottom:12px;display:block;text-align:center;font:700 .82rem/1 var(--text);color:#fff;background:var(--blue);padding:11px 0;border-radius:10px}
.r2-sheet,.s2-sheet{position:absolute;left:0;right:0;bottom:0;background:#fff;border-radius:16px 16px 0 0;padding:14px 12px 12px;box-shadow:0 -10px 24px rgba(0,0,0,.25);transform:translateY(105%)}
.r2-sheet__t{font:700 .82rem var(--text);color:var(--a);margin:0 0 10px}
.r2-chips{display:flex;gap:5px;margin-bottom:12px}
.r2-chips span{flex:1;text-align:center;font:600 .66rem/1 var(--text);padding:8px 0;border-radius:8px;background:var(--ww);color:var(--a)}
.r2-chips span.is-on{background:var(--a);color:#fff}
.r2-ok{display:block;text-align:center;font:700 .78rem/1 var(--text);color:#fff;background:var(--b);padding:11px 0;border-radius:10px}
.oa-done{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;background:rgba(5,29,51,.9);color:#fff;text-align:center;padding:16px}
.oa-done p{font:700 .95rem/1.2 var(--text);margin:0;color:#fff}
.oa-check{width:56px;height:56px}
.oa-check circle{fill:#25D366}
.oa-check path{fill:none;stroke:#fff;stroke-width:4;stroke-linecap:round;stroke-linejoin:round}
.oa-tap{position:absolute;left:0;top:0;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;background:rgba(255,255,255,.55);box-shadow:0 0 0 2px rgba(5,29,51,.25);opacity:0;pointer-events:none}
/* ── Site internet : la même réservation passe du téléphone à l'ordinateur (morphing par clip-path) ──
 * --p / --l = découpe du téléphone / de l'écran d'ordinateur (bord), --p2 / --l2 = la même chose pour la dalle.
 * L'état écrit en CSS est l'état final (ordinateur, réservation validée) : sans JS ou en mouvement réduit, il s'affiche tel quel. */
.s3{--p:2% 28% 2% 28%;--p2:3.6% 30% 3.6% 30%;--l:15% 3% 31% 3%;--l2:17% 4.6% 33% 4.6%;--deck:69%;
  position:relative;width:100%;max-width:420px;aspect-ratio:1/1.04;margin:0 auto}
.s3-bezel,.s3-screen{position:absolute;inset:0}
.s3-bezel{background:var(--a);clip-path:inset(var(--l) round 12px)}
.s3-screen{background:#fff;clip-path:inset(var(--l2) round 6px)}
.s3-deck{position:absolute;left:0;right:0;top:var(--deck);height:4.5%;border-radius:2px 2px 14px 14px;background:linear-gradient(#D5DBE3,#A9B4C1)}
.s3-deck::after{content:'';position:absolute;left:42%;right:42%;top:0;height:35%;border-radius:0 0 6px 6px;background:rgba(5,29,51,.18)}
.s3-mob,.s3-desk{position:absolute;overflow:hidden;font-family:var(--text);color:var(--a)}
.s3-mob{inset:var(--p2);opacity:0}
.s3-desk{inset:var(--l2)}
.s3-url{height:9%;display:flex;align-items:center;justify-content:center;margin:4% 5% 0;border-radius:8px;background:var(--ww);font:600 .55rem var(--text);color:var(--ink-3)}
.s3-view{position:absolute;top:15%;left:0;right:0;bottom:0;overflow:hidden}
.s3-page{padding:0 7% 40%}
.s3-hero,.s3-dhero{border-radius:10px;background:linear-gradient(160deg,#700020,#2B0010 72%);display:flex;flex-direction:column;justify-content:flex-end;padding:9px}
.s3-hero{height:110px;margin-bottom:10px}
.s3-hero__t{font:900 .78rem/1 var(--display);text-transform:uppercase;color:#fff;margin:0 0 3px}
.s3-hero__s{font:500 .5rem var(--text);color:rgba(255,255,255,.8);margin:0}
.s3-h{font:700 .6rem var(--text);margin:8px 0 6px}
.s3-l{display:block;height:5px;border-radius:3px;background:#E3E7EC;margin-bottom:6px}
.s3-l--s{width:64%}
.s3-grid{display:grid;grid-template-columns:1fr 1fr;gap:5px}
.s3-grid b{aspect-ratio:1;border-radius:6px;background:#798DA4}
.s3-grid b:nth-child(2),.s3-grid b:nth-child(3){background:#C9A86A}
.s3-btn{display:block;text-align:center;font:700 .62rem/1 var(--text);color:#fff;background:var(--b);padding:8px 0;border-radius:8px}
.s3-btn--sticky{position:absolute;left:7%;right:7%;bottom:4%}
.s3-btn--sm{display:inline-block;padding:5px 9px;font-size:.5rem;border-radius:6px}
.s3-sheet{position:absolute;left:0;right:0;bottom:0;background:#fff;border-radius:14px 14px 0 0;padding:10px 8px 18%;box-shadow:0 -8px 20px rgba(0,0,0,.18);transform:translateY(105%)}
.s3-sheet__t{font:700 .64rem var(--text);margin:0 0 8px}
.s3-chips{display:flex;gap:4px;margin-bottom:8px}
.s3-chips span{flex:1;text-align:center;font:600 .52rem/1 var(--text);padding:6px 0;border-radius:6px;background:var(--ww)}
.s3-chips span.is-on{background:var(--a);color:#fff}
.s3-nav{display:flex;align-items:center;gap:6%;height:14%;padding:0 4%;border-bottom:1px solid var(--line)}
.s3-nav b{font:900 .56rem var(--display);text-transform:uppercase;white-space:nowrap}
.s3-nav i{display:block;width:8%;height:4px;border-radius:2px;background:#E3E7EC}
.s3-nav .s3-btn{margin-left:auto}
.s3-body{display:grid;grid-template-columns:1.2fr 1fr;gap:4%;padding:4%;height:86%}
.s3-dhero{height:100%}
.s3-panel{border:1px solid var(--line);border-radius:8px;padding:8px;display:flex;flex-direction:column;justify-content:center}
.s3-field{display:block;border:1px solid var(--line);border-radius:6px;padding:3px 6px;margin-bottom:6px}
.s3-field span{display:block;font:600 .45rem var(--text);color:var(--ink-3)}
.s3-field em{display:block;min-height:1.1em;font:600 .6rem var(--text);font-style:normal}
.s3 .oa-done p{font-size:.72rem}
.s3 .oa-check{width:38px;height:38px}
.s3-pill{position:absolute;left:50%;top:1%;white-space:nowrap;font:700 .66rem/1 var(--text);color:#fff;background:var(--b);padding:7px 12px;border-radius:999px;opacity:0;z-index:3;transform:translateX(-50%)}
@media (min-width:860px){
  .s3{--p:3% 35% 3% 35%;--p2:4.6% 36.4% 4.6% 36.4%;--l:6% 6% 22% 6%;--l2:8.4% 7.4% 24.4% 7.4%;--deck:78%;max-width:560px;aspect-ratio:16/11}
  .s3-hero{height:96px}
}


/* Petits écrans en hauteur (≤ 700 px) : on serre le titre et le texte pour laisser au moins 150 px à la scène. */
@media (max-height:700px) and (max-width:859px){
  .oa-proc.is-pinned .oa-proc__pin{padding:calc(var(--nav) + 6px) 14px 96px}
  .oa-proc.is-pinned .oa-proc__head .oa-kicker{display:none}
  .oa-proc.is-pinned .oa-proc__head h2{font-size:17px;margin-bottom:8px}
  .oa-proc.is-pinned .oa-proc__list{grid-template-rows:minmax(150px,1fr) auto;margin-top:8px;gap:8px}
  .oa-proc.is-pinned .oa-step h3{font-size:19px;margin-bottom:4px}
  .oa-proc.is-pinned .oa-step__n{margin-bottom:2px}
  .oa-proc.is-pinned .oa-step__txt p{font-size:.86rem;line-height:1.4}
}

/* Le fil de l'histoire, sous chaque animation */
.oa-flow{display:flex;flex-wrap:wrap;gap:6px;list-style:none;padding:0;margin:14px 0 0;justify-content:center}
.oa-flow li{font:600 .72rem/1 var(--text);padding:7px 11px;border-radius:999px;background:var(--ww);color:var(--ink-3);transition:background-color .3s,color .3s}
.oa-flow li.is-on{background:var(--b);color:#fff}
@media (min-width:860px){
  .r2{grid-template-columns:1fr auto;align-items:center;gap:20px;max-width:none}
  .r2-phone{margin:0;width:200px}
}
.oa-proc .oa-kicker{color:#E9A9B9}

/* ── Scènes posées dans les autres pages (accueil, landings, services) ──
 * .oa--compact : la scène garde sa mise en page mobile même sur grand écran (cartes étroites, 3 par ligne). */
.v3-bene--oa{display:grid;gap:16px;grid-template-columns:1fr}
@media (min-width:1000px){.v3-bene--oa{grid-template-columns:repeat(3,minmax(0,1fr))}}
.oa-stage-block{margin-top:8px}
.oa--compact .r2{grid-template-columns:1fr;max-width:460px}
.oa--compact .r2-phone{margin:-104px 8px 0 auto;width:min(200px,54%)}
.oa--compact .s3{--p:2% 28% 2% 28%;--p2:3.6% 30% 3.6% 30%;--l:15% 3% 31% 3%;--l2:17% 4.6% 33% 4.6%;--deck:69%;max-width:420px;aspect-ratio:1/1.04}
.oa--compact .s3-hero{height:110px}
.oa--compact .g-stage{max-width:100%}
/* Section « scène » autonome (pages services, offres) */
.oa-scene-sec{padding:48px 0}
.oa-scene-sec .oa-hero__grid{align-items:center}
/* Fil de l'histoire resserré dans les cartes étroites et sur petit téléphone : une seule ligne */
.oa--compact .oa-flow,.oa-stage-block .oa-flow{gap:4px}
.oa--compact .oa-flow li{font-size:.6rem;padding:5px 7px}
@media (max-width:420px){.oa-flow li{font-size:.64rem;padding:6px 8px}.oa-flow{gap:4px}}
/* Retour Luca n°3 : les 3 cartes « Ce que ça change » équilibrées (scène centrée verticalement, plus grande) */
.v3-bene--oa .v3-bene__card{display:flex;flex-direction:column}
.v3-bene--oa .oa-stage-block{flex:1;display:flex;flex-direction:column;justify-content:center;gap:4px}
.oa--compact .s3{max-width:100%}
@media (min-width:1000px){
  /* Carte « Sur votre site » de l'accueil : scène plus haute pour tenir la hauteur des cartes Google et Réseaux */
  .v3-bene--oa .oa--compact .s3{aspect-ratio:1/1.45;--p:2% 22% 2% 22%;--p2:3.3% 24% 3.3% 24%;--l:26% 3% 34% 3%;--l2:27.8% 4.6% 35.8% 4.6%;--deck:66%}
}


/* ── Retours Luca n°11 (mobile, 08/11) ──
 * 1. « Six étapes » : aucun texte coupé. La hauteur du texte le plus long est réservée (--oa-txt, mesurée par le script),
 *    la scène prend le reste ; le bloc épinglé ne masque plus rien en hauteur (seuls les débords latéraux sont coupés).
 * 2. Le configurateur « Composez votre offre » n'existe pas sur téléphone (pas adapté) ; il reste sur ordinateur. */
@media (max-width:859px){
  .oa-proc.is-pinned .oa-proc__pin{overflow-x:clip;overflow-y:visible;height:var(--oa-vh,100svh)!important;max-height:none!important}
  .oa-proc.is-pinned .oa-proc__list{grid-template-rows:minmax(0,1fr) var(--oa-txt,auto)}
  .oa-proc.is-pinned .oa-vis{min-height:0;max-height:100%}
  .oa-proc.is-pinned .oa-vis svg{max-height:100%}
  #composer{display:none}
  a[href="#composer"],p:has(> a[href="#composer"]:only-child){display:none}
}