/* =====================================================================================================================
   YC Creations — styles propres à la page Services (repris de la maquette ; les commentaires vNNN renvoient à ses versions)
   Autres feuilles : commun.css (toutes les pages), outils.css (bloc des outils).
   ===================================================================================================================== */
/* Titres de bloc : badge flottant — pilule en verre, contour lumineux GoldYC/BleuYC qui tourne, point doré qui pulse,
     reflet champagne qui balaie le texte, léger flottement vertical. Tout en boucle douce (transform/opacity). */
@property --badge-angle{syntax:'<angle>'; inherits:false; initial-value:0deg;}
@keyframes badgeSpin{to{--badge-angle:360deg;}}
/* Rond de la flèche des boutons à effet CTA — règle commune (v484) : .hero-cta-arrow (tous les .hero-cta, dont .pk-cta et .ct-next)
     et .s2-chip > i. Au repos, rien ne change : rond Or YC (Bleu YC pour .s2-chip), flèche Noir abysse. Au survol et au focus clavier :
     rond Noir abysse tourné de 45°, flèche en dégradé YC animé (celui du remplissage du bouton). Le dégradé est un ::after à la taille
     de l'icône (16 px, 14 px pour .s2-chip), découpé par un masque qui reprend la flèche (M5 12h14 + M13 6l6 6-6 6, trait 2, bouts
     arrondis) : un linearGradient SVG ne marcherait pas sur le trait horizontal (boîte de hauteur nulle). Le SVG d'origine s'efface en
     fondu. Réduire les animations : dégradé fixe. */
.s2-chip > i{position:relative;}
/* v498 : formes fixes — le rond et sa flèche ne rétrécissent jamais dans la ligne flex, quelle que soit la longueur du texte
     (c'est le texte qui passe à la ligne) ; la flèche SVG garde 16 px (14 px pour .s2-chip), le masque du dégradé aussi */
.hero-cta-arrow, .s2-chip > i{flex:none; aspect-ratio:1; border-radius:50%;}
.s2-chip > i > svg{display:block; flex:none; width:14px; height:14px;}
.hero-cta-arrow::after, .s2-chip > i::after{content:''; position:absolute; inset:0; margin:auto; width:16px; height:16px; pointer-events:none; opacity:0; transition:opacity .4s ease;
    background:linear-gradient(90deg, var(--BleuYC) 0%, #A9DAEF 18%, #F1DDB0 32%, var(--GoldYC) 50%, #F1DDB0 68%, #A9DAEF 82%, var(--BleuYC) 100%); background-size:200% 100%; background-repeat:repeat-x; animation:ycGrad 3.5s linear infinite;
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='M13 6l6 6-6 6'/%3E%3C/svg%3E") center/16px 16px no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='M13 6l6 6-6 6'/%3E%3C/svg%3E") center/16px 16px no-repeat;}
.s2-chip > i::after{width:14px; height:14px; -webkit-mask-size:14px 14px; mask-size:14px 14px;}
.hero-cta-arrow svg, .s2-chip > i svg{transition:transform .3s ease, opacity .4s ease;}
.hero-cta:hover .hero-cta-arrow, .hero-cta:focus-visible .hero-cta-arrow, .s2-chip:hover > i, .s2-chip:focus-visible > i{background:var(--ink); transform:rotate(45deg);}
.hero-cta:hover .hero-cta-arrow::after, .hero-cta:focus-visible .hero-cta-arrow::after, .s2-chip:hover > i::after, .s2-chip:focus-visible > i::after{opacity:1;}
.hero-cta:hover .hero-cta-arrow svg, .hero-cta:focus-visible .hero-cta-arrow svg, .s2-chip:hover > i svg, .s2-chip:focus-visible > i svg{opacity:0; animation-play-state:paused;}
@media (prefers-reduced-motion: reduce){
  .hero-cta-arrow::after, .s2-chip > i::after{animation:none;}
}
/* Halos ambiants qui dérivent lentement, en fond de section */
@keyframes driftBlob{0%{transform:translate(0,0) scale(1);}50%{transform:translate(34px,-26px) scale(1.1);}100%{transform:translate(0,0) scale(1);}}
.blob{position:absolute;border-radius:50%;filter:blur(70px);pointer-events:none;animation:driftBlob 16s ease-in-out infinite;}
/* même écart badge → titre que "Ce qui nous distingue" */
.hx-intro{max-width:var(--lecture); font-size:16px; line-height:1.7; color:var(--texte-corps); margin:22px 0 0;}
@keyframes ycGrad{from{background-position:0% 0;}to{background-position:200% 0;}}
/* halos "spot de scène" des sections sombres atténués, pour un fond plus sombre */
.yc-sky > .blob{filter:blur(70px) brightness(0.55);}
.nav-shell, .hero-in, .trust-head, .stats-light, .hx-section, .tl-section, .pf-head, .tm-section,
  .sv-hero, .sv-main, .sv-packs, .po-hero, .po-index, .po-cases, .po-m-shell, .pk-hero, .pk-process, .pk-faq,
  .ap-hero, .ap-manifesto, .ap-stats, .ap-story, .ap-team, .ap-values, .ct-hero, .ct-proms{padding-left:var(--gutter) !important; padding-right:var(--gutter) !important;}
/* coupures de ligne (charte v2) : titres équilibrés, pas de mot isolé en dernière ligne des paragraphes */
h1, h2, h3, .titreYC, .tl-name, .hx-label, .pf-name{text-wrap:balance;}
p, blockquote, .tl-desc, .hx-desc, .d-desc, .pf-desc{text-wrap:pretty;}
.sv-line{display:block; width:fit-content; overflow:hidden; padding-bottom:0.1em; margin-bottom:-0.06em;}
/* entrée du hero : chaque élément monte en cascade (--d), le titre sort de derrière sa ligne */
.sv-in{animation:svIn 1s cubic-bezier(.22,1,.36,1) calc(.15s + var(--d, 0) * .12s) backwards;}
.sv-line .sv-in{animation-name:svLine; animation-duration:1.1s;}
@keyframes svIn{from{opacity:0; transform:translateY(26px); filter:blur(6px);}}
@keyframes svLine{from{transform:translateY(105%);}}
@media (prefers-reduced-motion: reduce){
  .sv-in, .sv-line .sv-in, .sv-hero-stage, .sv-float, .sv-band-track, .sv-card::before{animation:none !important;}
}
/* ---------- 01 : comparateur avant / après (poignée glissable ; va-et-vient automatique tant qu'on n'y touche pas) ---------- */
@property --ba{syntax:'<percentage>'; inherits:true; initial-value:50%;}
.nav-shell, .hero-in, .trust-head, .stats-light, .hx-section, .tl-section, .pf-head, .tm-section,
  .sv-hero, .sv-main, .sv-packs, .po-hero, .po-index, .po-cases, .po-m-shell, .pk-hero, .pk-process, .pk-faq,
  .ap-hero, .ap-manifesto, .ap-stats, .ap-story, .ap-team, .ap-values, .ct-hero, .ct-proms{padding-left:var(--gutter) !important; padding-right:var(--gutter) !important;}
/* ===== PHOTO AVANT L'APPEL FINAL — mêmes effets que les photos de l'Accueil =====
     Pleine largeur, fondu en haut et en bas, ouverture du cadre + zoom doux à l'apparition, calque photo en parallaxe (--py),
     halo de projecteur qui part dans l'autre sens (--pg), voile sombre. Classes et variables posées par svPhotoRef. */
.sv-photo{position:relative; z-index:1; height:clamp(420px, 52vw, 720px); margin:96px calc(-1 * var(--gutter)) 0; overflow:hidden;
    -webkit-mask-image:linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.35) 14%, #000 38%, #000 76%, transparent 100%);
    mask-image:linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.35) 14%, #000 38%, #000 76%, transparent 100%);}
.sv-photo-layer{position:absolute; left:0; right:0; top:-14%; height:128%; will-change:transform; transform:translate3d(0, var(--py, 0px), 0);
    clip-path:inset(16% 12% round 30px); transition:clip-path 2s cubic-bezier(.16,1,.3,1);}
.sv-photo.is-in .sv-photo-layer{clip-path:inset(0% 0% round 0px);}
.sv-photo img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 42%;
    filter:saturate(0.8) brightness(0.82); opacity:0.001; transform:scale(1.08); transition:transform 2.2s cubic-bezier(.22,1,.36,1), opacity 1.4s ease;}
.sv-photo.is-in img{opacity:1; transform:scale(1);}
.sv-photo-glow{position:absolute; inset:-20%; pointer-events:none; mix-blend-mode:screen; opacity:0; will-change:transform; transform:translate3d(0, var(--pg, 0px), 0); transition:opacity 1.8s ease .5s;}
.sv-photo-glow::before{content:''; position:absolute; inset:0; background:radial-gradient(34% 44% at 30% 44%, rgba(110,193,228,0.34), transparent 70%), radial-gradient(28% 36% at 78% 38%, rgba(217,169,79,0.10), transparent 70%);}
.sv-photo.is-in .sv-photo-glow{opacity:1;}
.sv-photo.is-in .sv-photo-glow::before{animation:svPhotoGlow 16s ease-in-out infinite alternate;}
@keyframes svPhotoGlow{0%{transform:translate3d(-5%,0,0) scale(1);}50%{transform:translate3d(4%,-3%,0) scale(1.08);}100%{transform:translate3d(9%,3%,0) scale(1.14);}}
.sv-photo::after{content:''; position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg, rgba(10,13,16,0.55) 0%, rgba(14,42,58,0.2) 45%, rgba(10,13,16,0.4) 100%);}
@media (max-width:767px){
  .sv-photo{height:340px; margin-top:56px;}
}
@media (prefers-reduced-motion: reduce){
  .sv-photo-layer{clip-path:none; transition:none;}
  .sv-photo img{opacity:1; transform:none; transition:none;}
  .sv-photo-glow::before{animation:none !important;}
}
/* ===== PHOTO → APPEL FINAL : continuité =====
     Cadrage abaissé pour garder la partie sombre du bas de la photo, fondu du bas repoussé tout au bout,
     et appel final remonté sur ce bas sombre : la photo se prolonge dans le fond de l'appel final. */
.sv-photo{height:clamp(460px, 58vw, 840px);
    -webkit-mask-image:linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.35) 10%, #000 28%, #000 80%, transparent 100%);
    mask-image:linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.35) 10%, #000 28%, #000 80%, transparent 100%);}
.sv-photo img{object-position:center 88%;}
.sv-photo::after{background:linear-gradient(180deg, rgba(10,13,16,0.55) 0%, rgba(14,42,58,0.2) 40%, rgba(10,13,16,0.45) 72%, rgba(10,13,16,0.9) 100%);}
#contact{margin-top:-208px;}
@media (max-width:767px){
  .sv-photo{height:400px;}
  #contact{margin-top:-96px;}
}
/* ===== APPEL FINAL AU PREMIER PLAN + PARALLAXE + FOND DE BASE — mêmes règles que la page d'accueil =====
     L'appel final passe au-dessus de la photo. La photo défile moins vite que le bloc précédent et rejoint sa place
     quand le logo de l'appel final arrive au milieu de l'écran. Son haut est rogné sous le bloc précédent (--pc),
     avec un long fondu. Variables --pf et --pc posées par le script de la photo. */
#contact{z-index:3;}
.sv-photo{translate:0 var(--pf, 0px); -webkit-mask-image:linear-gradient(to bottom, transparent 0, transparent var(--pc, 0px), rgba(0,0,0,0.12) calc(var(--pc, 0px) + 10%), rgba(0,0,0,0.45) calc(var(--pc, 0px) + 24%), #000 calc(var(--pc, 0px) + 40%), #000 80%, transparent 100%); mask-image:linear-gradient(to bottom, transparent 0, transparent var(--pc, 0px), rgba(0,0,0,0.12) calc(var(--pc, 0px) + 10%), rgba(0,0,0,0.45) calc(var(--pc, 0px) + 24%), #000 calc(var(--pc, 0px) + 40%), #000 80%, transparent 100%);}
@media (prefers-reduced-motion: reduce){
  .sv-photo{translate:none;}
}
/* ≥ 768 px : image calée pour que le logo de l'appel final tombe toujours au même endroit de la photo (bord du bureau, sous l'écran, ligne ≈ 900 px sur 1254), quelle que soit la largeur ; même calcul que la page d'accueil. */
@media (min-width:768px){
  .sv-photo img{object-position:50% calc(1.14 * clamp(460px, 58vw, 840px) - 120px - 71.8vw);}
}
/* =====================================================================================================
     SERVICES (ancien prototype Services2, devenu la page Services le 2026-10-03) : même direction artistique que le site.
     1. Hero : titre + jeu de 4 slides en profondeur (une par expertise), qui suit la souris ; clic = chapitre.
     2. « Une slide, quatre savoir-faire » : sur ordinateur, une slide épinglée se transforme au défilement
        (comme une transition Morph) d'une expertise à l'autre ; sur tablette et mobile, un chapitre par bloc.
     3. Outils (même bloc que la page Services) · puis photo, appel final et footer communs.
     Les cartes du hero portent quelques repères en plus (.s2-cardx) ; la grande slide et les slides mobiles jouent une petite
     animation, une seule fois, à chaque mise en place d'une mise en page (s2Ref, fonction play).
     Préfixe s2-, piloté par s2Ref. Une même « slide » (.s2-sl) sert au hero, à la scène et aux blocs mobiles :
     ses éléments (.s2-m) changent de place, de taille et de couleur selon data-s (0 à 3, ou x = rassemblés).
     ===================================================================================================== */
.s2-page{position:relative; --s2-ease:cubic-bezier(.65,0,.35,1); --s2-out:cubic-bezier(.16,1,.3,1);}
.s2-page h2, .s2-page h3, .s2-page p{margin:0;}
.s2-only-m{display:none;}
/* ---------- 1. HERO ---------- */
.s2-hero{position:relative; overflow-x:clip; min-height:100vh; min-height:100svh; box-sizing:border-box; display:flex; flex-direction:column; justify-content:center; padding:128px var(--gutter) 96px;}
.s2-hero-grid{position:relative; z-index:1; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.08fr); gap:clamp(48px, 6vw, 104px); align-items:center; width:100%; max-width:1320px; margin:0 auto;}
.s2-hero-text{display:flex; flex-direction:column; align-items:flex-start; gap:24px; min-width:0;}
.s2-title{font-size:clamp(56px, 7.4vw, 112px); white-space:nowrap;}
.s2-title .sv-line .sv-in{display:inline-block;}
.s2-title .yc-grad.sv-in{animation:svLine 1.1s cubic-bezier(.22,1,.36,1) calc(.15s + var(--d, 0) * .12s) backwards, ycGrad 3.5s linear infinite;}
.s2-hero-p{font-size:20px; line-height:1.7; color:var(--texte-corps); max-width:520px;}
.s2-actions{display:flex; align-items:center; flex-wrap:wrap; gap:16px 32px; margin-top:8px;}
.s2-stats{display:flex; width:100%; max-width:520px; margin-top:24px; padding-top:24px; border-top:1px solid var(--line);}
.s2-stat{flex:1; min-width:0; padding-right:24px;}
.s2-stat + .s2-stat{padding-left:24px; border-left:1px solid var(--line);}
.s2-stat b{display:block; font-family:'Nohemi',sans-serif; font-weight:300; font-size:32px; line-height:1; color:#fff; font-variant-numeric:tabular-nums;}
.s2-stat b i{font-style:normal; color:var(--BleuYC);}
.s2-stat span{display:block; margin-top:8px; font-size:14px; color:var(--muted);}
/* jeu de slides : 4 cartes en profondeur ; --k = rang depuis l'avant ; --rx / --ry posés par s2Ref (souris) */
.s2-deck{position:relative; height:clamp(400px, 38vw, 560px); perspective:1800px;}
.s2-deck-in{position:absolute; inset:0; pointer-events:none; transform-style:preserve-3d; transform:rotateX(calc(8deg + var(--rx, 0deg))) rotateY(calc(-13deg + var(--ry, 0deg))); transition:transform 1s var(--s2-out);}
.s2-card{position:absolute; pointer-events:auto; left:0; top:41%; width:64%; padding:0; border:0; background:none; cursor:pointer; text-align:left; transform-style:preserve-3d; --h:0;
    transform:translate3d(calc(var(--k) * 15%), calc(var(--k) * -25% - var(--h) * 6%), calc(var(--k) * -80px + var(--h) * (var(--k) * 80px + 70px)));
    transition:transform .8s var(--s2-out); animation:s2Deal 1.5s var(--s2-out) calc(.5s + (3 - var(--k)) * .13s) backwards;}
@keyframes s2Deal{from{opacity:0; translate:-24% 70% 0; scale:.86;}}
.s2-card .s2-sl{transition:filter .6s ease, box-shadow .6s ease;}
.s2-card-lab{position:absolute; left:0; bottom:calc(100% + 12px); display:inline-flex; align-items:center; gap:8px; padding:6px 14px 6px 8px; border-radius:999px; white-space:nowrap;
    font-size:12px; font-weight:600; letter-spacing:0.12em; text-transform:uppercase; color:rgba(255,255,255,0.78); background:rgba(10,13,16,0.7); box-shadow:inset 0 0 0 1px rgba(255,255,255,0.10);
    -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); opacity:.0; transform:translateY(6px); transition:opacity .45s ease, transform .6s var(--s2-out), color .3s ease;}
.s2-card-lab b{display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:50%; font-family:'Nohemi',sans-serif; font-size:12px; letter-spacing:0; color:#0A0D10; background:var(--BleuYC); flex-shrink:0; aspect-ratio:1;}
.s2-card[data-k="0"] .s2-card-lab, .s2-card:hover .s2-card-lab, .s2-card:focus-visible .s2-card-lab{opacity:1; transform:none;}
.s2-deck-in:has(.s2-card:hover) .s2-card:not(:hover) .s2-card-lab{opacity:0;}
.s2-card:hover, .s2-card:focus-visible{--h:1;}
.s2-deck-in:has(.s2-card:hover) .s2-card:not(:hover) .s2-sl{filter:brightness(.55) saturate(.8);}
.s2-card:hover .s2-sl, .s2-card:focus-visible .s2-sl{box-shadow:0 50px 90px rgba(0,0,0,0.6), 0 0 0 1px rgba(110,193,228,0.55), 0 0 48px rgba(110,193,228,0.22);}
.s2-card:focus-visible{outline:none;}
/* ---------- LA SLIDE (composant commun) ---------- */
.s2-sl{position:relative; display:block; width:100%; aspect-ratio:16/9; border-radius:var(--rayon-s); overflow:hidden; container-type:inline-size; isolation:isolate;
    background-color:#0E2A3A; box-shadow:0 30px 70px rgba(0,0,0,0.5), inset 0 0 0 1px rgba(255,255,255,0.08); transition:background-color 1.1s var(--s2-ease);}
.s2-sl::before{content:''; position:absolute; inset:0; z-index:-1; opacity:var(--glow, 1); transition:opacity 1.1s var(--s2-ease), background-position 1.1s var(--s2-ease);
    background:radial-gradient(60% 70% at 85% 10%, rgba(110,193,228,0.20), transparent 70%), radial-gradient(50% 60% at 10% 100%, rgba(217,169,79,0.08), transparent 70%);}
.s2-sl[data-s="1"]{background-color:#E8E6E1; --glow:0;}
.s2-sl[data-s="2"]{background-color:#0A0D10;}
.s2-sl[data-s="3"]{background-color:#151A1F; --glow:.55;}
.s2-sl[data-s="x"]{background-color:#0A0D10; --glow:.4;}
.s2-m{position:absolute; left:var(--x); top:var(--y); width:var(--w); height:var(--h); border-radius:var(--r); background-color:var(--bg); opacity:var(--o, 1); overflow:hidden;
    transition:left 1.1s var(--s2-ease), top 1.1s var(--s2-ease), width 1.1s var(--s2-ease), height 1.1s var(--s2-ease), border-radius 1.1s var(--s2-ease), background-color 1.1s var(--s2-ease), opacity .8s ease;
    transition-delay:calc(var(--i) * 26ms);}
.s2-m::after{content:''; position:absolute; inset:0; background:linear-gradient(90deg, var(--BleuYC), var(--GoldYC)); opacity:var(--go, 0); transition:opacity 1.1s var(--s2-ease);}
.s2-m.m-img::after{background:linear-gradient(135deg, #1F6E91 0%, #6EC1E4 70%, #A9DAEF 100%);}
/* textes et tracés propres à chaque mise en page : apparaissent quand la slide est en place */
.s2-tx{position:absolute; left:var(--x); top:var(--y); margin:0; opacity:0; filter:blur(4px); translate:0 6px; pointer-events:none; white-space:nowrap; line-height:1;
    transition:opacity .3s ease, filter .3s ease, translate .3s ease;}
.s2-sl[data-s="0"] .s2-tx[data-t="0"], .s2-sl[data-s="1"] .s2-tx[data-t="1"], .s2-sl[data-s="2"] .s2-tx[data-t="2"], .s2-sl[data-s="3"] .s2-tx[data-t="3"]{
    opacity:1; filter:none; translate:0 0; transition:opacity .7s ease .55s, filter .7s ease .55s, translate .9s var(--s2-out) .55s;}
.s2-k{font-size:1.45cqw; font-weight:600; letter-spacing:0.16em; text-transform:uppercase; color:var(--BleuYC);}
.s2-k.is-dark{color:#56606A;}
.s2-kpi{font-family:'Nohemi',sans-serif; font-weight:600; font-size:10cqw; letter-spacing:-0.03em; color:#fff;}
.s2-kpi i{font-style:normal; font-weight:300; color:var(--BleuYC);}
.s2-cap{font-size:1.75cqw; color:rgba(255,255,255,0.62);}
.s2-aa{font-family:'Nohemi',sans-serif; font-weight:300; font-size:9cqw; color:#0E2A3A; letter-spacing:-0.02em;}
.s2-small{font-size:1.45cqw; color:rgba(255,255,255,0.5); font-variant-numeric:tabular-nums;}
.s2-path{position:absolute; inset:0; width:100%; height:100%; left:0; top:0;}
.s2-path path{fill:none; stroke:rgba(169,218,239,0.45); stroke-width:1.2; stroke-dasharray:2 4; vector-effect:non-scaling-stroke;}
.s2-play{width:0; height:0; border-style:solid; border-width:1.3cqw 0 1.3cqw 2.1cqw; border-color:transparent transparent transparent #0E2A3A; translate:-35% -50%;}
.s2-sl[data-s="3"] .s2-play{translate:-35% -50%;}
@media (prefers-reduced-motion: reduce){
  .s2-m, .s2-tx, .s2-sl, .s2-sl::before, .s2-card, .s2-deck-in{transition:none !important;}
  .s2-card{animation:none !important;}
}
/* ---------- 2. UNE SLIDE, QUATRE SAVOIR-FAIRE ---------- */
.s2-main{position:relative; z-index:2; padding:0 var(--gutter);}
.s2-sec{position:relative; max-width:1320px; margin:0 auto; padding-top:var(--section);}
.s2-head{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,420px); align-items:end; gap:24px 64px;}
.s2-head-l{display:flex; flex-direction:column; align-items:flex-start; gap:24px;}
.s2-head p{font-size:16px; line-height:1.7; color:var(--texte-corps);}
.s2-pin{position:relative; height:calc(100vh + 3 * 90vh); height:calc(100svh + 3 * 90svh); margin-top:32px;}
.s2-pin-in{position:sticky; top:0; height:100vh; height:100svh; box-sizing:border-box; padding:104px 0 40px; display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:clamp(40px, 5vw, 96px); align-items:center;}
.s2-left{display:flex; flex-direction:column; gap:48px; min-width:0;}
.s2-txs, .s2-fts{display:grid;}
.s2-txs > *, .s2-fts > *{grid-area:1 / 1;}
.s2-ch{display:flex; flex-direction:column; align-items:flex-start; gap:24px; min-width:0;}
.s2-ch-k{display:flex; align-items:center; gap:12px; font-size:12px; font-weight:600; letter-spacing:0.16em; text-transform:uppercase; color:var(--muted);}
.s2-ch-k b{font-family:'Nohemi',sans-serif; font-size:14px; font-weight:600; letter-spacing:0.04em; color:var(--GoldYC);}
.s2-ch-k i{width:32px; height:1px; background:linear-gradient(90deg, var(--BleuYC), var(--GoldYC));}
.s2-ch-t{font-family:'Nohemi',sans-serif; font-weight:200; font-size:clamp(40px, min(4.4vw, 7.2svh), 64px); line-height:1.02; letter-spacing:-0.02em; color:#fff;}
.s2-ch-t .yc-grad{font-weight:700;}
.s2-l{display:block; overflow:hidden; padding-bottom:.1em; margin-bottom:-.1em;}
.s2-l > span{display:inline-block;}
.s2-ch-p{font-size:16px; line-height:1.7; color:var(--texte-corps); max-width:520px;}
.s2-chip{display:inline-flex; align-items:center; gap:16px; padding:10px 10px 10px 20px; border-radius:999px; text-decoration:none; color:#fff;
    background:rgba(255,255,255,0.04); box-shadow:inset 0 0 0 1px rgba(255,255,255,0.10); transition:background .4s ease, box-shadow .4s ease;}
.s2-chip small{font-size:12px; font-weight:600; letter-spacing:0.12em; text-transform:uppercase; color:var(--muted);}
.s2-chip b{font-size:14px; font-weight:600;}
.s2-chip > i{display:flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:50%; color:#0A0D10; background:var(--BleuYC); transition:transform .5s var(--s2-out), background .4s ease; flex-shrink:0; aspect-ratio:1;}
.s2-chip > i svg{width:14px; height:14px; flex-shrink:0;}
/* v473 : effet du bouton principal (.hero-cta) : bordure animée qui tourne au repos ; au survol et au focus, remplissage depuis la
     droite en dégradé YC animé, texte en Noir abysse, pastille Noir abysse à flèche Or qui tourne de 45°. Contenu et taille inchangés. */
.s2-chip{position:relative; overflow:hidden; isolation:isolate; background:rgba(255,255,255,0.06); box-shadow:none; transition:color .4s ease;}
.s2-chip::before{content:''; position:absolute; inset:0; border-radius:inherit; padding:1px; pointer-events:none; z-index:2;
    background:conic-gradient(from var(--badge-angle), rgba(217,169,79,0.15) 0%, var(--GoldYC) 18%, rgba(217,169,79,0.15) 36%, rgba(110,193,228,0.15) 55%, var(--BleuYC) 72%, rgba(110,193,228,0.15) 90%, rgba(217,169,79,0.15) 100%);
    -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask:linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
    animation:badgeSpin 7s linear infinite;}
.s2-chip-fill{position:absolute; inset:0; z-index:-1; border-radius:inherit; transform:scale(0); transform-origin:right center; transition:transform .55s cubic-bezier(.4,.2,.2,1);
    background-color:var(--GoldYC); background-image:linear-gradient(90deg, var(--BleuYC) 0%, #A9DAEF 18%, #F1DDB0 32%, var(--GoldYC) 50%, #F1DDB0 68%, #A9DAEF 82%, var(--BleuYC) 100%); background-size:200% 100%; background-repeat:repeat-x; animation:ycGrad 3.5s linear infinite;}
.s2-chip small{transition:color .4s ease;}
.s2-chip > i{transition:transform .4s cubic-bezier(.4,.2,.2,1), background .4s ease, color .4s ease;}
.s2-chip:hover, .s2-chip:focus-visible{color:var(--ink);}
.s2-chip:hover small, .s2-chip:focus-visible small{color:var(--ink);}
.s2-chip:hover .s2-chip-fill, .s2-chip:focus-visible .s2-chip-fill{transform:scale(1);}
/* survol et focus du rond : règle commune « Rond de la flèche » (v484), en tête de <style> */
@media (prefers-reduced-motion: reduce){
  .s2-chip::before, .s2-chip-fill{animation:none;}
}
.s2-chip:focus-visible{outline:2px solid var(--BleuYC); outline-offset:3px;}
/* changement de chapitre : les lignes du titre sortent par le haut / entrent par le bas selon le sens */
.s2-pin .s2-ch, .s2-pin .s2-ft{visibility:hidden; transition:visibility 0s linear .7s;}
.s2-pin .s2-ch[data-pos="on"], .s2-pin .s2-ft[data-pos="on"]{visibility:visible; transition:none;}
.s2-pin .s2-l > span{transition:translate .7s var(--s2-ease);}
.s2-pin [data-pos="before"] .s2-l > span{translate:0 -115%;}
.s2-pin [data-pos="after"] .s2-l > span{translate:0 115%;}
.s2-pin [data-pos="on"] .s2-l > span{translate:0 0; transition:translate 1s var(--s2-out) calc(.25s + var(--j, 0) * .09s);}
.s2-pin .s2-fade{transition:opacity .4s ease, translate .6s var(--s2-ease), filter .4s ease;}
.s2-pin [data-pos="before"] .s2-fade{opacity:0; translate:0 -18px; filter:blur(6px);}
.s2-pin [data-pos="after"] .s2-fade{opacity:0; translate:0 18px; filter:blur(6px);}
.s2-pin [data-pos="on"] .s2-fade{opacity:1; translate:0 0; filter:none; transition:opacity .8s ease calc(.4s + var(--j, 0) * .08s), translate 1s var(--s2-out) calc(.4s + var(--j, 0) * .08s), filter .8s ease calc(.4s + var(--j, 0) * .08s);}
/* sommaire des 4 chapitres : le fil se remplit avec le défilement (--f) */
.s2-sorter{display:flex; flex-direction:column; border-top:1px solid var(--line);}
.s2-so{position:relative; display:flex; align-items:center; gap:16px; padding:12px 0; border:0; border-bottom:1px solid var(--line); background:none; font:inherit; text-align:left; cursor:pointer; color:var(--muted); transition:color .4s ease;}
.s2-so b{font-family:'Nohemi',sans-serif; font-size:14px; font-weight:600; min-width:24px; transition:color .4s ease;}
.s2-so span{font-size:14px; font-weight:500;}
.s2-so em{position:absolute; left:0; right:0; bottom:-1px; height:1px; background:linear-gradient(90deg, var(--BleuYC), var(--GoldYC)); transform:scaleX(var(--f, 0)); transform-origin:left; pointer-events:none;}
.s2-so:hover{color:#fff;}
.s2-so.is-on{color:#fff;}
.s2-so.is-on b{color:var(--GoldYC);}
.s2-so:focus-visible{outline:2px solid var(--BleuYC); outline-offset:2px; border-radius:4px;}
/* scène : barre d'outils façon logiciel de présentation, slide, 3 points forts du chapitre */
.s2-right{display:flex; flex-direction:column; gap:24px; min-width:0;}
.s2-stage{position:relative;}
.s2-stage::before{content:''; position:absolute; inset:-12% -8%; z-index:-1; pointer-events:none; opacity:.9; transition:background 1s ease;
    background:radial-gradient(50% 50% at 50% 55%, rgba(110,193,228,0.16), transparent 70%);}
.s2-stage[data-s="1"]::before{background:radial-gradient(50% 50% at 50% 55%, rgba(232,230,225,0.10), transparent 70%);}
.s2-stage[data-s="3"]::before{background:radial-gradient(50% 50% at 50% 55%, rgba(217,169,79,0.12), transparent 70%);}
.s2-bar{display:flex; align-items:center; gap:16px; margin-bottom:16px; font-size:12px; letter-spacing:0.12em; text-transform:uppercase; color:var(--muted);}
.s2-bar-dots{display:flex; gap:6px;}
.s2-bar-dots i{width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,0.14); flex-shrink:0; aspect-ratio:1;}
.s2-bar-n{font-variant-numeric:tabular-nums;}
.s2-bar-n b{color:#fff; font-weight:600;}
.s2-morph{margin-left:auto; display:inline-flex; align-items:center; gap:8px; padding:6px 12px; border-radius:999px; color:rgba(255,255,255,0.72); box-shadow:inset 0 0 0 1px rgba(255,255,255,0.10); transition:box-shadow .5s ease, color .5s ease;}
.s2-morph i{width:6px; height:6px; border-radius:50%; background:var(--BleuYC); opacity:.5; transition:opacity .5s ease, box-shadow .5s ease; flex-shrink:0; aspect-ratio:1;}
.s2-stage.is-morph .s2-morph{color:#fff; box-shadow:inset 0 0 0 1px rgba(110,193,228,0.6), 0 0 24px rgba(110,193,228,0.25);}
.s2-stage.is-morph .s2-morph i{opacity:1; box-shadow:0 0 10px var(--BleuYC);}
.s2-stage .s2-sl{border-radius:var(--rayon-m); box-shadow:0 50px 100px rgba(0,0,0,0.55), inset 0 0 0 1px rgba(255,255,255,0.08);}
.s2-ft{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:24px;}
.s2-f{display:flex; flex-direction:column; gap:8px; min-width:0;}
.s2-f h4{position:relative; margin:0; padding-left:24px; font-size:16px; font-weight:600; line-height:1.4; color:#fff;}
.s2-f h4::before{content:''; position:absolute; left:0; top:.7em; width:12px; height:1.5px; background:var(--BleuYC);}
.s2-f p{padding-left:24px; font-size:14px; line-height:1.6; color:var(--muted);}
@media (max-height:820px) and (min-width:1051px){
  .s2-pin-in{padding-top:96px; padding-bottom:24px;}
  .s2-left{gap:32px;}
  .s2-ch{gap:16px;}
  .s2-ch-p{font-size:15px; line-height:1.6;}
  .s2-so{padding:8px 0;}
  .s2-f p{display:none;}
}
@media (prefers-reduced-motion: reduce){
  .s2-pin .s2-l > span, .s2-pin .s2-fade{transition:none !important;}
}
/* tablette et mobile : un chapitre par bloc, la slide se met en place à son arrivée */
.s2-list{display:none;}
.s2-mch{display:flex; flex-direction:column; gap:24px; padding-top:96px;}
.s2-mch + .s2-mch{margin-top:96px; border-top:1px solid var(--line);}
.s2-mch .s2-sl{margin:16px 0 8px; border-radius:var(--rayon-m);}
.s2-mch .s2-ft{grid-template-columns:1fr; gap:16px;}
@media (max-width:1050px){
  .s2-pin{display:none;}
  .s2-list{display:block;}
  .s2-only-d{display:none;}
  .s2-only-m{display:inline;}
  .s2-head{grid-template-columns:1fr;}
  .s2-ch-t{font-size:clamp(40px, 8vw, 64px);}
}
/* cartes du hero : repères supplémentaires, affichés seulement dans les cartes (.s2-card) */
.s2-cardx{display:none;}
.s2-card .s2-cardx{display:block;}
.s2-val{translate:-50% 6px; font-size:1.45cqw; font-weight:600; color:rgba(255,255,255,0.75); font-variant-numeric:tabular-nums;}
.s2-val.is-gold{color:var(--GoldYC);}
.s2-sl[data-s="0"] .s2-val[data-t="0"]{translate:-50% 0;}
/* élément qui glisse le long de la trajectoire (mise en page 2), visible seulement pendant son animation */
.s2-glide{position:absolute; left:10%; top:73.5%; width:2.4cqw; height:2.4cqw; margin:-1.2cqw 0 0 -1.2cqw; border-radius:50%; opacity:0; pointer-events:none;
    background:linear-gradient(135deg, var(--BleuYC), var(--GoldYC));}
.s2-m.m-c1, .s2-m.m-c2, .s2-m.m-c3, .s2-m.m-c4{transform-origin:50% 100%;}
.s2-m.m-d1{transform-origin:0 50%;}
/* indication sous le jeu de slides : survoler pour découvrir, cliquer pour explorer ; s'estompe après le premier survol */
.s2-deck-hint{position:absolute; left:0; right:0; bottom:0; z-index:2; display:flex; align-items:center; justify-content:center; gap:10px; pointer-events:none;
    font-family:'Plus Jakarta Sans',sans-serif; font-size:12px; font-weight:600; letter-spacing:0.14em; text-transform:uppercase; color:var(--muted);
    animation:svIn 1s cubic-bezier(.22,1,.36,1) 1.6s backwards; transition:opacity .8s ease;}
.s2-deck-hint svg{width:16px; height:16px; flex:none; color:var(--BleuYC);}
.s2-deck-hint .is-touch{display:none;}
.s2-deck.is-hinted .s2-deck-hint{opacity:0;}
@media (hover:none){
  .s2-deck-hint .is-fine{display:none;}
  .s2-deck-hint .is-touch{display:inline;}
}
@media (max-width:1050px){
  .s2-deck-hint{bottom:-40px; white-space:nowrap;}
}
@media (prefers-reduced-motion: reduce){
  .s2-deck-hint{animation:none;}
}
/* photo avant l'appel final : directement dans .s2-main (qui porte la gouttière) */
.s2-main > .sv-photo{margin-top:96px;}
/* outils : la gouttière vient de .s2-main ; haut = espace de section (128 / 80 px) après « Nos expertises » */
.s2-main > .tl-section{padding-left:0 !important; padding-right:0 !important;}
/* ---------- RESPONSIVE GÉNÉRAL ---------- */
@media (max-width:1050px){
  .s2-hero{padding-top:144px; padding-bottom:80px;}
  .s2-hero-grid{grid-template-columns:1fr; gap:64px;}
  .s2-deck{height:clamp(300px, 52vw, 460px); max-width:680px; width:100%; justify-self:center;}
  .s2-card{top:46%;}
}
@media (max-width:767px){
  .s2-hero{padding-top:128px; padding-bottom:64px;}
  .s2-title{white-space:normal;}
  .s2-hero-p{font-size:16px;}
  .s2-stat{padding-right:12px;}
  .s2-stat + .s2-stat{padding-left:12px;}
  .s2-stat b{font-size:24px;}
  .s2-stat span{font-size:12px;}
  .s2-deck{height:clamp(220px, 60vw, 300px);}
  .s2-card-lab{font-size:10px;}
}
/* mises en page de la slide (générées) : x, y, largeur, hauteur en % de la slide */
.s2-sl[data-s="0"] .m-bar{--x:6%; --y:12%; --w:6%; --h:1.4%; --r:2px; --bg:#6EC1E4; --o:1; --go:1;}
.s2-sl[data-s="0"] .m-t{--x:6%; --y:17%; --w:40%; --h:5.5%; --r:4px; --bg:#fff; --o:0.92; --go:0;}
.s2-sl[data-s="0"] .m-s{--x:6%; --y:25.5%; --w:26%; --h:2.6%; --r:3px; --bg:rgba(255,255,255,0.35); --o:1; --go:0;}
.s2-sl[data-s="0"] .m-l1{--x:6%; --y:68%; --w:30%; --h:2.2%; --r:3px; --bg:rgba(255,255,255,0.22); --o:1; --go:0;}
.s2-sl[data-s="0"] .m-l2{--x:6%; --y:73.5%; --w:24%; --h:2.2%; --r:3px; --bg:rgba(255,255,255,0.22); --o:1; --go:0;}
.s2-sl[data-s="0"] .m-l3{--x:6%; --y:79%; --w:18%; --h:2.2%; --r:3px; --bg:rgba(255,255,255,0.22); --o:1; --go:0;}
.s2-sl[data-s="0"] .m-img{--x:72%; --y:30%; --w:6%; --h:10.7%; --r:50%; --bg:#1F6E91; --o:0; --go:1;}
.s2-sl[data-s="0"] .m-ring{--x:72%; --y:30%; --w:6%; --h:10.7%; --r:50%; --bg:rgba(255,255,255,0.1); --o:0; --go:0;}
.s2-sl[data-s="0"] .m-c1{--x:54%; --y:62%; --w:7%; --h:24%; --r:4px; --bg:rgba(110,193,228,.45); --o:1; --go:0;}
.s2-sl[data-s="0"] .m-c2{--x:63.5%; --y:50%; --w:7%; --h:36%; --r:4px; --bg:rgba(110,193,228,.65); --o:1; --go:0;}
.s2-sl[data-s="0"] .m-c3{--x:73%; --y:40%; --w:7%; --h:46%; --r:4px; --bg:rgba(110,193,228,.9); --o:1; --go:0;}
.s2-sl[data-s="0"] .m-c4{--x:82.5%; --y:26%; --w:7%; --h:60%; --r:4px; --bg:#D9A94F; --o:1; --go:0;}
.s2-sl[data-s="0"] .m-d1{--x:52%; --y:86.4%; --w:40%; --h:0.5%; --r:0px; --bg:rgba(255,255,255,0.25); --o:1; --go:0;}
.s2-sl[data-s="0"] .m-d2{--x:6%; --y:86.5%; --w:1.7%; --h:3%; --r:50%; --bg:#6EC1E4; --o:1; --go:0;}
.s2-sl[data-s="0"] .m-d3{--x:9.5%; --y:86.5%; --w:1.7%; --h:3%; --r:50%; --bg:#D9A94F; --o:1; --go:0;}
.s2-sl[data-s="1"] .m-bar{--x:22%; --y:12%; --w:5%; --h:1.4%; --r:2px; --bg:#6EC1E4; --o:1; --go:0;}
.s2-sl[data-s="1"] .m-t{--x:22%; --y:17%; --w:34%; --h:5.5%; --r:4px; --bg:#0E2A3A; --o:1; --go:0;}
.s2-sl[data-s="1"] .m-s{--x:22%; --y:25.5%; --w:22%; --h:2.6%; --r:3px; --bg:rgba(14,42,58,.45); --o:1; --go:0;}
.s2-sl[data-s="1"] .m-l1{--x:22%; --y:36%; --w:30%; --h:2.2%; --r:3px; --bg:rgba(14,42,58,.2); --o:1; --go:0;}
.s2-sl[data-s="1"] .m-l2{--x:22%; --y:41.5%; --w:26%; --h:2.2%; --r:3px; --bg:rgba(14,42,58,.2); --o:1; --go:0;}
.s2-sl[data-s="1"] .m-l3{--x:22%; --y:47%; --w:20%; --h:2.2%; --r:3px; --bg:rgba(14,42,58,.2); --o:1; --go:0;}
.s2-sl[data-s="1"] .m-img{--x:60%; --y:14%; --w:34%; --h:40%; --r:10px; --bg:#1F6E91; --o:1; --go:1;}
.s2-sl[data-s="1"] .m-ring{--x:74%; --y:28%; --w:6%; --h:10.7%; --r:50%; --bg:rgba(255,255,255,.0); --o:0; --go:0;}
.s2-sl[data-s="1"] .m-c1{--x:4%; --y:7%; --w:13%; --h:13%; --r:4px; --bg:#CFE9F5; --o:1; --go:0;}
.s2-sl[data-s="1"] .m-c2{--x:4%; --y:26.5%; --w:13%; --h:13%; --r:4px; --bg:#fff; --o:1; --go:0;}
.s2-sl[data-s="1"] .m-c3{--x:4%; --y:46%; --w:13%; --h:13%; --r:4px; --bg:#fff; --o:1; --go:0;}
.s2-sl[data-s="1"] .m-c4{--x:4%; --y:65.5%; --w:13%; --h:13%; --r:4px; --bg:#fff; --o:1; --go:0;}
.s2-sl[data-s="1"] .m-d1{--x:22%; --y:62%; --w:6%; --h:10.7%; --r:8px; --bg:#6EC1E4; --o:1; --go:0;}
.s2-sl[data-s="1"] .m-d2{--x:29.5%; --y:62%; --w:6%; --h:10.7%; --r:8px; --bg:#D9A94F; --o:1; --go:0;}
.s2-sl[data-s="1"] .m-d3{--x:37%; --y:62%; --w:6%; --h:10.7%; --r:8px; --bg:#0E2A3A; --o:1; --go:0;}
.s2-sl[data-s="2"] .m-bar{--x:8%; --y:12%; --w:5%; --h:1.4%; --r:2px; --bg:#6EC1E4; --o:1; --go:1;}
.s2-sl[data-s="2"] .m-t{--x:8%; --y:17%; --w:30%; --h:5.5%; --r:4px; --bg:#fff; --o:0.92; --go:0;}
.s2-sl[data-s="2"] .m-s{--x:8%; --y:25.5%; --w:20%; --h:2.6%; --r:3px; --bg:rgba(255,255,255,0.35); --o:1; --go:0;}
.s2-sl[data-s="2"] .m-l1{--x:8%; --y:33%; --w:14%; --h:2.2%; --r:3px; --bg:rgba(255,255,255,0.18); --o:1; --go:0;}
.s2-sl[data-s="2"] .m-l2{--x:8%; --y:38.5%; --w:10%; --h:2.2%; --r:3px; --bg:rgba(255,255,255,0.18); --o:1; --go:0;}
.s2-sl[data-s="2"] .m-l3{--x:8%; --y:44%; --w:6%; --h:2.2%; --r:3px; --bg:rgba(255,255,255,0.12); --o:1; --go:0;}
.s2-sl[data-s="2"] .m-img{--x:60%; --y:20%; --w:26%; --h:46.2%; --r:50%; --bg:#1F6E91; --o:1; --go:1;}
.s2-sl[data-s="2"] .m-ring{--x:55%; --y:11%; --w:36%; --h:64%; --r:50%; --bg:rgba(110,193,228,.07); --o:1; --go:0;}
.s2-sl[data-s="2"] .m-c1{--x:8%; --y:70%; --w:4%; --h:7.1%; --r:50%; --bg:#D9A94F; --o:1; --go:0;}
.s2-sl[data-s="2"] .m-c2{--x:20%; --y:59%; --w:4.4%; --h:7.8%; --r:50%; --bg:rgba(110,193,228,.6); --o:1; --go:0;}
.s2-sl[data-s="2"] .m-c3{--x:32%; --y:51%; --w:4.8%; --h:8.5%; --r:50%; --bg:rgba(110,193,228,.85); --o:1; --go:0;}
.s2-sl[data-s="2"] .m-c4{--x:44%; --y:46.5%; --w:5.2%; --h:9.2%; --r:50%; --bg:#A9DAEF; --o:1; --go:0;}
.s2-sl[data-s="2"] .m-d1{--x:8%; --y:86%; --w:14%; --h:1%; --r:2px; --bg:#6EC1E4; --o:1; --go:0;}
.s2-sl[data-s="2"] .m-d2{--x:24%; --y:86%; --w:22%; --h:1%; --r:2px; --bg:#D9A94F; --o:1; --go:0;}
.s2-sl[data-s="2"] .m-d3{--x:48%; --y:86%; --w:10%; --h:1%; --r:2px; --bg:rgba(255,255,255,0.25); --o:1; --go:0;}
.s2-sl[data-s="3"] .m-bar{--x:5%; --y:79%; --w:58%; --h:1%; --r:2px; --bg:rgba(255,255,255,0.14); --o:1; --go:0;}
.s2-sl[data-s="3"] .m-t{--x:68%; --y:15%; --w:26%; --h:5%; --r:4px; --bg:#fff; --o:0.92; --go:0;}
.s2-sl[data-s="3"] .m-s{--x:68%; --y:22.5%; --w:16%; --h:2.6%; --r:3px; --bg:rgba(255,255,255,0.35); --o:1; --go:0;}
.s2-sl[data-s="3"] .m-l1{--x:71%; --y:36%; --w:14%; --h:2.2%; --r:3px; --bg:rgba(255,255,255,0.55); --o:1; --go:0;}
.s2-sl[data-s="3"] .m-l2{--x:71%; --y:49%; --w:12%; --h:2.2%; --r:3px; --bg:rgba(255,255,255,0.3); --o:1; --go:0;}
.s2-sl[data-s="3"] .m-l3{--x:71%; --y:62%; --w:15%; --h:2.2%; --r:3px; --bg:rgba(255,255,255,0.3); --o:1; --go:0;}
.s2-sl[data-s="3"] .m-img{--x:5%; --y:12%; --w:58%; --h:62%; --r:8px; --bg:#0E2A3A; --o:1; --go:0.35;}
.s2-sl[data-s="3"] .m-ring{--x:29.5%; --y:34.5%; --w:9%; --h:16%; --r:50%; --bg:rgba(255,255,255,0.92); --o:1; --go:0;}
.s2-sl[data-s="3"] .m-c1{--x:68%; --y:32%; --w:27%; --h:10%; --r:8px; --bg:rgba(110,193,228,.18); --o:1; --go:0;}
.s2-sl[data-s="3"] .m-c2{--x:68%; --y:45%; --w:27%; --h:10%; --r:8px; --bg:rgba(255,255,255,0.05); --o:1; --go:0;}
.s2-sl[data-s="3"] .m-c3{--x:68%; --y:58%; --w:27%; --h:10%; --r:8px; --bg:rgba(255,255,255,0.05); --o:1; --go:0;}
.s2-sl[data-s="3"] .m-c4{--x:68%; --y:71%; --w:27%; --h:10%; --r:8px; --bg:rgba(255,255,255,0.05); --o:1; --go:0;}
.s2-sl[data-s="3"] .m-d1{--x:5%; --y:79%; --w:24%; --h:1%; --r:2px; --bg:#6EC1E4; --o:1; --go:1;}
.s2-sl[data-s="3"] .m-d2{--x:29%; --y:78%; --w:0.5%; --h:3%; --r:1px; --bg:rgba(255,255,255,0.6); --o:1; --go:0;}
.s2-sl[data-s="3"] .m-d3{--x:44%; --y:78%; --w:0.5%; --h:3%; --r:1px; --bg:rgba(255,255,255,0.6); --o:1; --go:0;}
.s2-sl[data-s="x"] .s2-m{--x:47%; --y:44.6%; --w:6%; --h:10.7%; --r:50%; --bg:rgba(110,193,228,.5); --o:0; --go:0;}
/* ===== LA RENCONTRE (composant commun) — tous les boutons à effet CTA, sur les 6 pages =====
     Boutons concernés : Accueil — bouton du hero, « Prendre contact » ; Services — « Demander un devis », les 8 pastilles de pack
     .s2-chip (4 du bloc épinglé, 4 de la liste mobile), « Prendre contact » ; Portfolio — « Découvrir nos projets », « Prendre
     contact » ; Packs — « Découvrir les formules », les 3 « Demander un devis » (.pk-cta), « Prendre contact » ; À propos —
     « Découvrez notre histoire », « Prendre contact » ; Contact — le bouton d'étape .ct-next.
     La barre de navigation n'a plus d'effet de bordure (ni lumière, ni bordure conique) : filet fixe, soulèvement et reflet au survol.
     Contour : deux fines lumières naissent ensemble en fondu à côté de la pastille, Bleu YC par le bord supérieur, Or YC par le bord
     inférieur ; elles filent vers la gauche et se rejoignent au milieu de la courbe de gauche (2,05 s), avec un bref éclat bleu → or
     (≈ 0,4 s). Texte : dès la rencontre, une large bande de dégradé YC (cœur ≈ la moitié du texte, fondus larges) le traverse de
     gauche à droite en 1,6 s ; le fond fait 3 fois la largeur réelle du texte (posée par le moteur), la bande entre et sort
     entièrement ; hors passage, le texte garde sa couleur de repos (currentColor : blanc, ou var(--muted) pour le <small> des .s2-chip).
     Cycle de 5,45 s, une seule horloge par bouton. Moteur commun dans skyRef (_ycmOff) : une instance par bouton, identifiants SVG
     uniques (ycm-<page><n>-…), tracés à la taille réelle, pause hors écran, boutons masqués ignorés, départs décalés de 0,5 s.
     Survol et focus : le contour s'efface, le texte reprend son style de survol. Réduire les animations : rien ne bouge, texte à sa
     couleur de repos, filet fixe discret. */
.hero-cta, .s2-chip{overflow:visible !important;}
.hero-cta::before, .s2-chip::before{background:rgba(255,255,255,0.16) !important; animation:none !important;}
.hero-cta:hover > .ycm, .hero-cta:focus-visible > .ycm, .s2-chip:hover > .ycm, .s2-chip:focus-visible > .ycm{opacity:0;}
.hero-cta > .hero-cta-label, .s2-chip > small, .s2-chip > b{
    background-image:linear-gradient(90deg, currentColor 0%, currentColor 33.4%, #6EC1E4 41.5%, #A9DAEF 45.5%, #F1DDB0 50%, #D9A94F 56.5%, currentColor 66.6%, currentColor 100%);
    background-size:300% 100%; background-repeat:no-repeat; background-position:100% 0; -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;}
.hero-cta:hover > .hero-cta-label, .hero-cta:focus-visible > .hero-cta-label, .s2-chip:hover > small, .s2-chip:hover > b, .s2-chip:focus-visible > small, .s2-chip:focus-visible > b,
  .is-sending .hero-cta > .hero-cta-label{background-image:none; -webkit-text-fill-color:currentColor;}
@media (prefers-reduced-motion: reduce){
  .hero-cta > .hero-cta-label, .s2-chip > small, .s2-chip > b{background-image:none; -webkit-text-fill-color:currentColor;}
}
@media (min-width:2000px){
  .sv-hero, .s2-hero{min-height:calc(100svh / var(--xl));}
  .sv-photo img{object-position:50% calc(1.14 * 840px - 120px - 71.8vw / var(--xl));}
  .s2-pin{height:calc(370svh / var(--xl));}
  .s2-pin-in{height:calc(100svh / var(--xl));}
}
/* ===== v504 — SERVICES MOBILE (≤ 767 px) : le jeu de slides du hero se feuillette au doigt (s2Ref) ; la page garde le défilement vertical ===== */
@media (max-width:767px){
  .s2-deck{touch-action:pan-y;}
}
/*=====BLOCK=====*/
/* ===== v505 — MOBILE (≤ 767 px) : MÉMOIRE ET FLUIDITÉ — tablette, ordinateur et grands écrans inchangés =====
     Cause du rechargement de l'Accueil sur iPhone : trop de grandes couches graphiques actives en même temps (halos de fond
     animés avec will-change, halos flous, avis flous), plus des images de 2 400 px décodées pour des vignettes. Ici :
     halos figés et sans flou, plus de verre dépoli, animations en pause hors écran, images de 800 px sur mobile. */
@media (max-width:767px){
  /* départ commun des hero : nav (80 px) + 40 px — badge, ou titre s'il n'y a pas de badge */
  .s2-hero{padding-top:var(--hero-top-m) !important;}
  /* halos « spot de scène » : figés, flou remplacé par un masque radial (aucun filter:blur) */
  .blob{animation:none !important; translate:none !important; filter:none !important;
        -webkit-mask-image:radial-gradient(closest-side, #000 18%, transparent 100%); mask-image:radial-gradient(closest-side, #000 18%, transparent 100%);}
  .yc-sky > .blob{filter:brightness(0.55) !important;}
}
/*=====BLOCK=====*/
/* ===== v506 — HERO MOBILE (≤ 767 px) : même paragraphe que Services (16 px, interligne 1,7) sur les 6 pages ;
     titre agrandi : sa ligne la plus longue (« à vos idées ») occupe ≈ 98 % de la largeur utile, à toute largeur de mobile
     (taille proportionnelle à 100vw − 2 gouttières), plafonnée à 112 px. Tablette et ordinateur inchangés. ===== */
@media (max-width:767px){
  h1.s2-title{font-size:min(calc((100vw - 2 * var(--gutter, 24px)) * 0.1906), 112px) !important;}
}

/* Ajout du site (demande de Yassine) : mêmes marges que les autres pages sur grand écran. Comme leurs conteneurs, ceux de
   Services vont d'une gouttière à l'autre au lieu d'être centrés dans une colonne de 1 320 px. */
.s2-hero-grid, .s2-sec{max-width:none; margin-left:0; margin-right:0;}

/* Ajout du site (demande de Yassine) : la slide cliquée dans le jeu du hero reste en avant (comme au survol), les autres
   s'assombrissent ; au survol d'une autre slide, c'est elle qui passe devant le temps du survol. */
.s2-card.is-pick{--h:1;}
.s2-card.is-pick .s2-card-lab{opacity:1; transform:none;}
.s2-card.is-pick .s2-sl{box-shadow:0 50px 90px rgba(0,0,0,0.6), 0 0 0 1px rgba(110,193,228,0.55), 0 0 48px rgba(110,193,228,0.22);}
.s2-deck-in:has(.s2-card.is-pick):not(:has(.s2-card:hover)) .s2-card:not(.is-pick) .s2-sl{filter:brightness(.55) saturate(.8);}
.s2-deck-in:has(.s2-card.is-pick):not(:has(.s2-card:hover)) .s2-card:not(.is-pick) .s2-card-lab{opacity:0;}
.s2-deck-in:has(.s2-card:hover) .s2-card.is-pick:not(:hover){--h:0;}