/* =====================================================================================================================
   YC Creations — styles propres à l'Accueil (repris de la maquette ; les commentaires vNNN renvoient à ses versions)
   Autres feuilles : commun.css (toutes les pages), outils.css (bloc des outils), fenetre-projet.css (fenêtres projet).
   ===================================================================================================================== */
/* 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;}}
.wordmark{font-family:'Plus Jakarta Sans',sans-serif;letter-spacing:0.06em;text-transform:uppercase;color:var(--muted);font-size:12px;}
.trust-section{position:relative; padding:40px 0 36px; display:flex; flex-direction:column; overflow:hidden;}
.trust-section .yc-badge{background:rgba(10,13,16,0.05); box-shadow:0 8px 24px rgba(20,30,40,0.10), inset 0 1px 0 rgba(255,255,255,0.4);}
.trust-section .yc-badge-text{background:none; -webkit-text-fill-color:#7A5A1E; color:#7A5A1E;}
/* Bande claire « gris confiance » de 92 px, bord à bord, sous les logos */
.trust-carousel{position:relative; height:92px; background:radial-gradient(rgba(14,42,58,0.10) 1px, transparent 1.2px) 0 0/24px 24px, var(--perle); box-shadow:inset 0 1px 0 rgba(255,255,255,0.55), inset 0 -1px 0 rgba(20,30,40,0.08), 0 20px 50px rgba(0,0,0,0.35); cursor:grab; touch-action:pan-y; user-select:none; -webkit-user-select:none;}
.trust-carousel.is-dragging{cursor:grabbing;}
.trust-item{position:absolute; left:0; top:50%; will-change:transform;}
.trust-logo{display:block; max-width:none; -webkit-user-drag:none; transition:transform .35s ease, opacity .35s ease, filter .35s ease;}
/* Bas du hero : fondu vers le fond, pour que la vidéo ne s'arrête pas net au-dessus des logos */
.hero::after{content:''; position:absolute; left:0; right:0; bottom:0; height:260px; z-index:1; pointer-events:none; background:linear-gradient(to bottom, rgba(10,13,16,0), var(--ink) 85%);}
.trust-item:hover .trust-logo{transform:scale(1.1); filter:drop-shadow(0 3px 10px rgba(20,22,28,0.18));}
/* Hero : entrée en fondu + liens avec trait animé */
@keyframes fadeUp{from{opacity:0;transform:translateY(22px);}to{opacity:1;transform:translateY(0);}}
.hero-in{opacity:0;animation:fadeUp .85s cubic-bezier(.16,.8,.3,1) forwards;}
/* Étincelles : la distance de montée se règle par section via --rise */
@keyframes sparkRise{0%{transform:translateY(0) scale(1); opacity:0;}12%{opacity:0.85;}88%{opacity:0.25;}100%{transform:translateY(var(--rise,-220px)) scale(0.3); opacity:0;}}
.hero-spark{position:absolute; bottom:6%; z-index:1; width:4px; height:4px; border-radius:50%; background:var(--accent); animation:sparkRise 7s ease-in infinite; pointer-events:none; box-shadow:0 0 8px 1px rgba(110,193,228,0.6);}
/* Hero vidéo : une vraie présentation filmée (travelling avant dans la salle), étalonnée bleu nuit,
     fondue dans le fond sombre, avec un halo qui respire et un balayage de lumière façon projecteur */
@keyframes videoGlow{0%,100%{opacity:0.55;}50%{opacity:1;}}
@keyframes lightSweep{0%{transform:translateX(-120%) skewX(-18deg); opacity:0;}15%{opacity:1;}60%{opacity:1;}75%,100%{transform:translateX(420%) skewX(-18deg); opacity:0;}}
/* La présentatrice est recadrée au centre de la vidéo ; le bloc vidéo va de 560px à 115px au-delà du bord droit,
     donc son centre = (titre 675px + bord droit) / 2 : elle reste pile au milieu de l'espace libre, quelle que soit la largeur d'écran */
.hero-video-wrap{position:absolute; z-index:0; top:120px; left:560px; right:-115px; height:800px; overflow:hidden; pointer-events:none;
    -webkit-mask-image:linear-gradient(to right, transparent 0, #000 260px), linear-gradient(to bottom, transparent 0%, #000 9%, #000 74%, transparent 100%);
    -webkit-mask-composite:source-in;
    mask-image:linear-gradient(to right, transparent 0, #000 260px), linear-gradient(to bottom, transparent 0%, #000 9%, #000 74%, transparent 100%);
    mask-composite:intersect;}
.hero-video{display:block; width:100%; height:100%; object-fit:cover; object-position:50% 0%;}
.hero-video-glow{position:absolute; inset:0; background:radial-gradient(ellipse 40% 55% at 50% 40%, rgba(110,193,228,0.16), transparent 70%); mix-blend-mode:screen; animation:videoGlow 5s ease-in-out infinite;}
.hero-video-sweep{position:absolute; top:0; bottom:0; left:0; width:22%; background:linear-gradient(90deg, transparent, rgba(110,193,228,0.10), rgba(255,255,255,0.06), rgba(110,193,228,0.10), transparent); mix-blend-mode:screen; animation:lightSweep 9s ease-in-out infinite;}
/* Bouton CTA du hero : pilule qui respire, se remplit d'accent au survol, flèche circulaire animée */
@keyframes ctaGlow{0%,100%{box-shadow:0 0 0 0 rgba(217,169,79,0.32), 0 8px 26px rgba(0,0,0,0.35);}50%{box-shadow:0 0 0 9px rgba(217,169,79,0), 0 8px 26px rgba(0,0,0,0.35);}}
/* v498 : logos jamais étirés, même si la boîte et le fichier n'ont pas exactement le même rapport */
.nav-logo-mark, .nav-logo-tail img, .yc-intro-mark, .trust-logo, .titre-logo, .po-m-brand img, .po-m-logo, .ap-sign-logo img, .a2-logo img, .a2-v3 img, .yc-sky > img{object-fit:contain;}
/* Parallax du hero : chaque couche défile à sa propre vitesse (--sy = scroll en px, fourni par le script).
     "translate" se cumule avec les animations existantes au lieu de les écraser */
.hero .hero-video-wrap{translate:0 calc(var(--sy, 0) * 0.38px);}
.hero .blob{translate:0 calc(var(--sy, 0) * 0.22px);}
.hero .hero-spark{translate:0 calc(var(--sy, 0) * 0.55px);}
.hero .hero-title{translate:0 calc(var(--sy, 0) * -0.12px);}
/* Intro cinématique (au chargement + à chaque clic sur le logo de la nav). Masquée par défaut : le script l'active.
     Séquence : le logo émerge du flou avec une lente avancée de caméra et un reflet de lumière le traverse, puis le
     slogan apparaît mot à mot, sur un voile sombre à 85 % derrière lequel la vidéo du hero tourne en plein écran.
     À 1,7 s, le voile se dissout, la vidéo se rétracte jusqu'à sa place dans le hero, le logo vole jusqu'à la barre
     de nav et les 3 mots jusqu'au titre du hero (animations pilotées par le script). */
.yc-intro{display:none; position:fixed; inset:0; z-index:300; overflow:hidden;}
.yc-intro.is-on{display:block;}
/* pendant l'intro, le titre du hero (et ce qui se dévoile après lui) reste caché par CSS : les 3 mots de l'intro
     viennent se poser à sa place vide, dès le premier chargement comme au clic sur le logo YC.
     (une consigne en style inline pouvait être effacée par le premier rendu de la page ; une règle CSS, non) */
.yc-intro.is-on ~ main .hero .hero-title h1,
  .yc-intro.is-on ~ main .hero .hero-body p,
  .yc-intro.is-on ~ main .hero .hero-body .hero-cta,
  .yc-intro.is-on ~ .nav-shell .nav-logo{visibility:hidden;}
.yc-intro-bg{position:absolute; inset:0; background:radial-gradient(65% 65% at 50% 46%, rgba(10,24,32,0.85) 0%, rgba(5,7,10,0.85) 68%); transition:opacity 1.1s cubic-bezier(.65,0,.35,1) .15s, transform 1.4s cubic-bezier(.65,0,.35,1);}
.yc-intro-bg::before{content:''; position:absolute; left:50%; top:46%; width:900px; height:900px; margin:-450px 0 0 -450px; border-radius:50%; background:radial-gradient(circle, rgba(110,193,228,0.09), rgba(217,169,79,0.03) 40%, transparent 65%); animation:ycGlow 3.2s cubic-bezier(.22,1,.36,1) both;}
.yc-intro-bg::after{content:''; position:absolute; inset:0; background:radial-gradient(120% 90% at 50% 50%, transparent 50%, rgba(0,0,0,0.7) 100%);}
.yc-intro.is-leaving .yc-intro-bg{opacity:0; transform:scale(1.08);}
@keyframes ycGlow{from{opacity:0; transform:scale(0.7);}to{opacity:1; transform:scale(1);}}
.yc-intro-stage{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;}
.yc-intro-logo{position:relative; width:112px; margin-bottom:38px; transform-origin:0 0; animation:ycLogoIn 1.3s cubic-bezier(.16,1,.3,1) backwards;}
@keyframes ycLogoIn{from{opacity:0; scale:1.22; filter:blur(14px);}}
.yc-intro-mark{display:block; width:100%; height:auto; filter:drop-shadow(0 0 26px rgba(110,193,228,0.28)); animation:ycDolly 2.6s cubic-bezier(.33,0,.2,1) forwards;}
@keyframes ycDolly{from{transform:scale(1);}to{transform:scale(1.07);}}
/* reflet de lumière qui traverse le logo (masqué par la forme du logo) */
.yc-intro-sheen{position:absolute; inset:0; pointer-events:none;
    -webkit-mask:url('/assets/img/logos/yc-monogramme-intro.png') center/contain no-repeat; mask:url('/assets/img/logos/yc-monogramme-intro.png') center/contain no-repeat;
    background:linear-gradient(110deg, transparent 38%, rgba(241,221,176,0.95) 50%, transparent 62%) 160% 0/260% 100% no-repeat;
    animation:ycSheen 1.3s cubic-bezier(.45,0,.2,1) .55s both, ycDolly 2.6s cubic-bezier(.33,0,.2,1) forwards;}
@keyframes ycSheen{from{background-position:160% 0;}to{background-position:-60% 0;}}
.yc-intro-words{display:flex; gap:0.28em; font-family:'Nohemi',sans-serif; font-weight:200; font-size:34px; line-height:1; letter-spacing:-0.025em; color:#ffffff; text-shadow:0 4px 28px rgba(0,0,0,0.45); white-space:nowrap;}
.yc-intro-word{display:inline-block; transform-origin:0 0; animation:ycWordIn .9s cubic-bezier(.22,1,.36,1) backwards;}
.yc-intro-word.is-accent{color:var(--BleuYC); font-weight:700;}
.yc-intro-word:nth-child(1){animation-delay:.8s;}
.yc-intro-word:nth-child(2){animation-delay:.9s;}
.yc-intro-word:nth-child(3){animation-delay:1s;}
@keyframes ycWordIn{from{opacity:0; translate:0 16px; filter:blur(8px);}}
/* Logo de la nav : masqué pendant l'intro, il prend le relais du logo volant ; "CREATIONS" glisse ensuite à côté */
.nav-logo.yc-hide{visibility:hidden;}
.nav-logo.yc-arrive .nav-logo-tail img{animation:navTailIn .8s cubic-bezier(.22,1,.36,1) .05s backwards;}
@keyframes navTailIn{from{opacity:0; translate:-16px 0;}}
/* Hero : après l'atterrissage du titre, le paragraphe se dévoile puis le bouton arrive (classes posées par le script) */
.hero-body .yc-hide{opacity:0 !important; animation:none !important;}
.hero-body p.yc-reveal{animation:heroPIn 1s cubic-bezier(.22,1,.36,1) backwards;}
@keyframes heroPIn{from{opacity:0; transform:translateY(18px); filter:blur(8px); clip-path:inset(0 0 100% 0);}to{opacity:1; transform:none; filter:blur(0); clip-path:inset(0 0 0 0);}}
.hero-cta.yc-reveal{animation:heroCtaIn .95s cubic-bezier(.22,1,.36,1) .55s backwards, ctaGlow 2.8s ease-in-out 1.5s infinite;}
.hero-cta.yc-reveal .hero-cta-arrow{animation:heroArrowIn .8s cubic-bezier(.34,1.56,.64,1) 1.05s backwards;}
@keyframes heroCtaIn{from{opacity:0; transform:translateY(22px) scale(0.94);}}
@keyframes heroArrowIn{from{transform:scale(0) rotate(-90deg);}}
.hero .hero-body{translate:0 calc(var(--sy, 0) * -0.05px);}
/* Chiffres clés : comptage de 0 au chiffre final, en CSS pur */
@property --num{syntax:'<integer>'; inherits:false; initial-value:0;}
.stat-num{counter-reset:num var(--num); font-variant-numeric:tabular-nums; animation-play-state:paused !important;}
.stats-go .stat-num{animation-play-state:running !important;}
/* posé par statsInViewRef quand le bloc est visible */
.stat-num::after{content:counter(num);}
/* v521 — chiffres clés : un seul nombre affiché, à toutes les tailles. Dès que le script a écrit le nombre dans la case
     (mobile), le compteur CSS se retire, même si une mise à jour de la page a retiré la classe is-js (sinon « 200200 »). */
.stat-num:not(:empty){animation:none !important;}
.stat-num:not(:empty)::after{content:none;}
.stats-card{position:relative; z-index:1; overflow:hidden; border-radius:var(--rayon-l); padding:48px 32px 56px;
    background:var(--BleuYC);   /* Bleu YC, chiffres en Bleu nuit */
    border:1px solid rgba(255,255,255,0.25);
    box-shadow:0 30px 70px rgba(0,0,0,0.40), 0 2px 6px rgba(0,0,0,0.12), inset 0 1px 0 rgba(255,255,255,0.3);}
.stats-card .stats-sheen{background:linear-gradient(100deg, transparent 0%, rgba(255,255,255,0.22) 50%, transparent 100%);}
.stats-card > div:last-child{position:relative; z-index:1;}
.stat-cell{padding:0 32px; display:flex; flex-direction:column; gap:8px; align-items:center; text-align:center; position:relative;}
.stat-cell + .stat-cell::before{content:''; position:absolute; left:0; top:14%; bottom:14%; width:1px; background:linear-gradient(180deg, transparent, rgba(14,42,58,0.22), transparent);}
.stat-val{font-family:'Nohemi',sans-serif; font-size:clamp(64px, 7.8vw, 112px); font-weight:200; line-height:0.9; color:var(--bleu-nuit); letter-spacing:-0.04em; white-space:nowrap; display:flex; align-items:flex-start; justify-content:center;}
/* échelle « chiffre » de la charte : Nohemi 200, 108 px, interligne 0,9, −0,04em */
.stat-suf{font-weight:600; font-size:.42em; line-height:1; margin-top:.12em; margin-left:.06em; letter-spacing:-0.01em; color:var(--bleu-nuit);}
/* suffixe en 600, Bleu nuit (lisible sur Bleu YC) */
@media (min-width:768px) and (max-width:1100px){
  .stat-cell{padding:0 16px;}
}
.stat-label{color:var(--bleu-nuit); font-size:14px; font-weight:500;}
/* Bleu nuit : lisible sur l'Azur */
@media (max-width:900px){
  .stats-light{padding:64px 24px 80px !important;}
  .stats-card{padding:36px 12px 40px;}
  .stats-card > div:last-child{grid-template-columns:repeat(2, minmax(0,1fr)) !important; row-gap:36px;}
  .stat-cell{padding:0 12px;}
  .stat-cell:nth-child(odd)::before{display:none;}
  .stat-val{font-size:64px;}
  .stat-label{font-size:12px;}
}
@keyframes countTo17{from{--num:0;}to{--num:17;}}
@keyframes countTo3{from{--num:0;}to{--num:3;}}
@keyframes countTo200{from{--num:0;}to{--num:200;}}
@keyframes countTo10{from{--num:0;}to{--num:10;}}
/* 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;}
/* Fond dynamique du bloc "Le choix de l'excellence" : reflet lumineux qui balaie la bande + halos qui dérivent, sans changer le ton de bleu */
@keyframes sheenSweep{0%{transform:translateX(-40%) skewX(-12deg);}100%{transform:translateX(220%) skewX(-12deg);}}
.stats-sheen{position:absolute; top:-20%; bottom:-20%; left:0; width:26%; background:linear-gradient(100deg, transparent 0%, rgba(255,255,255,0.22) 50%, transparent 100%); animation:sheenSweep 7s ease-in-out infinite; pointer-events:none;}
/* "Ce qui nous distingue" : la carte survolée se colore et s'étend ; les 2 autres glissent hors champ */
.distinguish-grid{display:flex; gap:32px;}
.d-card{
    box-sizing:border-box; position:relative; flex:1 1 0; min-width:0; height:420px; border-radius:var(--rayon-l);
    background:var(--ink-2); padding:32px; overflow:hidden; cursor:default;
    transition:flex-grow .55s cubic-bezier(.4,.2,.2,1), flex-basis .55s cubic-bezier(.4,.2,.2,1), padding .5s ease, background .45s ease, color .45s ease, opacity .45s ease, transform .55s cubic-bezier(.4,.2,.2,1);
  }
.d-card:hover{background:var(--accent); flex-grow:5;}
.d-inner{position:relative; display:flex; align-items:stretch; gap:24px; height:100%;}
.d-text{box-sizing:border-box; flex:0 0 auto; width:220px; display:flex; flex-direction:column;}
.d-top{position:relative; height:36px;}
.d-ghost{position:absolute; top:50%; left:100%; transform:translate(-100%, calc(-50% - 48px)); font-family:'Nohemi',sans-serif; font-weight:700; font-size:clamp(110px, 11vw, 160px); line-height:1; letter-spacing:-0.04em; color:transparent; -webkit-text-stroke:1px rgba(110,193,228,0.30); pointer-events:none; z-index:0; transition:left .5s cubic-bezier(.4,.2,.2,1), transform .5s cubic-bezier(.4,.2,.2,1), -webkit-text-stroke-color .45s ease;}
/* au survol, le bord droit du numéro s'aligne exactement sur le bord droit du paragraphe (colonne de texte de 220 px) */
.d-card:hover .d-ghost{left:220px; transform:translate(calc(-100% + 0.02em), calc(-50% - 56px)); -webkit-text-stroke-color:rgba(10,13,16,0.55);}
.d-icon-lottie{width:42px; height:42px; position:relative; z-index:1; transition:transform .45s cubic-bezier(.34,1.4,.64,1); flex-shrink:0;}
.d-card:hover .d-icon-lottie{transform:scale(1.28);}
/* icônes Lottie (001 / 002 / 003) recolorées aux couleurs du site : traits blancs + accents BleuYC sur la carte sombre ;
     au survol (carte BleuYC), les traits blancs passent en noir abysse et les accents en blanc */
.d-icon-lottie path{transition:stroke .45s ease;}
.d-card:hover .d-icon-lottie path[stroke="rgb(255,255,255)"]{stroke:#0A0D10;}
.d-card:hover .d-icon-lottie path[stroke="rgb(110,193,228)"]{stroke:#ffffff;}
.d-body{margin-top:auto; display:flex; flex-direction:column; position:relative; z-index:1;}
.d-card:hover .d-body{text-align:right;}
.d-title{font-size:32px; line-height:1.15; font-weight:500; transition:transform .45s cubic-bezier(.4,.2,.2,1), color .45s ease, font-size .45s cubic-bezier(.4,.2,.2,1);}
.d-card:hover .d-title{transform:translateY(-6px); color:var(--ink);}
.d-title-break{display:block;}
.d-hint{font-size:12px; color:var(--muted); display:flex; align-items:center; gap:8px; margin-top:12px; max-height:20px; opacity:1; overflow:hidden; transition:opacity .3s ease, max-height .35s ease, margin-top .35s ease;}
.d-hint-dash{width:16px; height:1px; background:var(--muted); display:inline-block; flex-shrink:0;}
.d-card:hover .d-hint{opacity:0; max-height:0; margin-top:0;}
.d-desc{font-size:14px; line-height:1.6; color:var(--texte-corps); max-height:0; opacity:0; margin:0; overflow:hidden; transition:max-height .45s ease .05s, opacity .35s ease .1s, margin-top .45s ease .05s, color .45s ease;}
.d-card:hover .d-desc{max-height:140px; opacity:1; margin-top:16px; color:var(--bleu-nuit);}
/* L'image occupe toute la hauteur de la carte et vient border le bord droit (les paddings haut/droite/bas sont annulés) */
.d-image{box-sizing:border-box; flex:1 1 auto; min-width:0; align-self:stretch; margin:-32px -32px -32px 0; background:rgba(14,14,18,0.06); display:flex; align-items:center; justify-content:center; overflow:hidden; opacity:0; transition:opacity .5s ease .1s;}
.d-card:hover .d-image{opacity:1;}
.d-image span{font-size:12px; color:rgba(14,14,18,0.5); text-align:center; padding:0 24px;}
.d-image-photo{width:100%; height:100%; object-fit:cover; display:block; transform:scale(1.1); transition:transform .9s cubic-bezier(.16,.8,.3,1);}
.d-card:hover .d-image-photo{transform:scale(1);}
@media (min-width:901px){
  /* case 1 survolée -> 2 et 3 glissent hors champ à droite */
  .distinguish-grid:has(> .d-card:nth-child(1):hover) > .d-card:nth-child(2),
    .distinguish-grid:has(> .d-card:nth-child(1):hover) > .d-card:nth-child(3){flex-grow:0; flex-basis:0; padding:0; opacity:0; transform:translateX(160px); pointer-events:none;}
  /* case 2 survolée -> 1 part à gauche, 3 part à droite */
  .distinguish-grid:has(> .d-card:nth-child(2):hover) > .d-card:nth-child(1){flex-grow:0; flex-basis:0; padding:0; opacity:0; transform:translateX(-160px); pointer-events:none;}
  .distinguish-grid:has(> .d-card:nth-child(2):hover) > .d-card:nth-child(3){flex-grow:0; flex-basis:0; padding:0; opacity:0; transform:translateX(160px); pointer-events:none;}
  /* case 3 survolée -> 1 et 2 partent à gauche */
  .distinguish-grid:has(> .d-card:nth-child(3):hover) > .d-card:nth-child(1),
    .distinguish-grid:has(> .d-card:nth-child(3):hover) > .d-card:nth-child(2){flex-grow:0; flex-basis:0; padding:0; opacity:0; transform:translateX(-160px); pointer-events:none;}
}
/* Nos expertises : liste "hover expand". Une seule ligne ouverte à la fois (survol, focus clavier ou tap).
     La ligne qui s'ouvre et celle qui se ferme partagent la même courbe : la hauteur totale reste constante,
     rien ne saute sous la section. */
.hx-section{position:relative; background:var(--ink); padding:var(--section) 64px; overflow:hidden;}
.hx-section::before{content:''; position:absolute; width:760px; height:760px; right:-240px; top:-300px; border-radius:50%; background:radial-gradient(circle, rgba(110,193,228,0.10), transparent 65%); pointer-events:none;}
.hx-wrap{position:relative; max-width:1280px; margin:0 auto; display:flex; flex-direction:column; gap:48px;}
.hx-header{display:flex; justify-content:space-between; align-items:flex-end; gap:40px; flex-wrap:wrap;}
/* logo YC blanc dans un titre : même hauteur que la majuscule du mot qui suit (C de Nohemi Bold = 0,745 em), posé sur la ligne de base */
.titre-logo{display:inline-block; height:0.745em; width:auto; vertical-align:-0.015em; margin-right:0.2em; filter:drop-shadow(0 4px 22px rgba(0,0,0,.38));}
.hx-title{margin:16px 0 0;}
/* 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;}
.hx-list{display:flex; flex-direction:column; gap:16px;}
.hx-row{--hx-ease:cubic-bezier(.22,1,.36,1); position:relative; height:96px; border-radius:var(--rayon-l); overflow:hidden; background-color:rgba(255,255,255,0.025); border:1px solid rgba(255,255,255,0.07); cursor:pointer; transition:height .8s var(--hx-ease), opacity .45s ease, border-color .45s ease, background-color .45s ease;}
.hx-row:not(.is-open):hover{background-color:rgba(255,255,255,0.045);}
.hx-row.is-open{height:400px; border-color:rgba(255,255,255,0.06); cursor:default;}
.hx-list.is-hovering .hx-row:not(.is-open){opacity:0.4;}
/* fond révélé : dégradé navy + halo bleu qui "dézoome" (1.06 -> 1) à l'ouverture */
.hx-bg{position:absolute; inset:0; background:radial-gradient(70% 95% at 78% 45%, rgba(31,110,145,0.30), transparent 70%), radial-gradient(40% 60% at 96% 100%, rgba(217,169,79,0.06), transparent 70%), linear-gradient(115deg, #10202B 0%, #0E1C26 45%, #0A0D10 100%); opacity:0; transform:scale(1.06); transition:opacity .6s ease, transform 1.1s var(--hx-ease); pointer-events:none;}
.hx-row.is-open .hx-bg{opacity:1; transform:scale(1);}
/* en-tête de ligne (bouton : accessible au clavier) */
.hx-h{position:relative; z-index:3; margin:0; font-weight:500; letter-spacing:normal;}
.hx-head{position:relative; display:flex; align-items:center; gap:28px; width:100%; height:94px; padding:0 32px 0 40px; margin:0; background:none; border:0; color:inherit; font:inherit; text-align:left; cursor:inherit;}
.hx-head:focus-visible{outline:2px solid var(--BleuYC); outline-offset:-8px; border-radius:var(--rayon-m);}
.hx-num{font-family:'Nohemi',sans-serif; font-weight:700; font-size:24px; color:var(--muted); min-width:36px; transition:color .45s ease;}
.hx-label{flex:1; font-family:'Nohemi',sans-serif; font-weight:500; font-size:32px; line-height:1.2; color:rgba(255,255,255,0.78); margin:0; transition:color .45s ease, transform .7s var(--hx-ease);}
.hx-sub{font-family:'Plus Jakarta Sans',sans-serif; font-weight:500; font-size:12px; letter-spacing:0.12em; text-transform:uppercase; color:var(--muted); white-space:nowrap; transition:opacity .35s ease, transform .5s var(--hx-ease);}
.hx-plus{position:relative; width:42px; height:42px; flex:0 0 42px; border-radius:50%; border:1px solid rgba(255,255,255,0.18); transition:transform .7s var(--hx-ease), background-color .45s ease, border-color .45s ease; aspect-ratio:1;}
/* + fermé, × ouvert (même pastille ronde au trait que les flèches du site) */
.hx-plus::before,.hx-plus::after{content:''; position:absolute; left:50%; top:50%; width:14px; height:1.5px; border-radius:2px; background:#fff; transform:translate(-50%,-50%); transition:transform .7s var(--hx-ease), background-color .45s ease;}
.hx-plus::after{transform:translate(-50%,-50%) rotate(90deg);}
.hx-row:not(.is-open):hover .hx-plus{border-color:var(--BleuYC); background-color:rgba(110,193,228,0.10);}
.hx-row.is-open .hx-num{color:var(--BleuYC);}
.hx-row.is-open .hx-label{color:#fff; transform:translateX(4px);}
/* grand écran : à l'ouverture, le titre grandit et passe sur 2 lignes pour occuper l'espace au-dessus du paragraphe.
     Le titre est calé en haut (même position qu'avant quand la ligne est fermée) et ne grandit que vers le bas. */
@media (min-width:901px){
  .hx-label{align-self:flex-start; margin-top:30px; transition:color .45s ease, transform .7s var(--hx-ease), font-size .7s var(--hx-ease), line-height .7s var(--hx-ease);}
  .hx-row.is-open .hx-label{font-size:44px; line-height:1.06; letter-spacing:-0.01em;}
  .hx-row.is-open .hx-l2{display:block;}
  /* le numéro grandit avec le titre, aligné sur sa première ligne ; le paragraphe s'aligne sur le titre décalé */
  .hx-num{align-self:flex-start; margin-top:34px; line-height:1.2; transition:color .45s ease, font-size .7s var(--hx-ease), line-height .7s var(--hx-ease), margin-top .7s var(--hx-ease), min-width .7s var(--hx-ease);}
  .hx-row.is-open .hx-num{font-size:44px; line-height:1.06; margin-top:30px; min-width:62px; letter-spacing:-0.01em;}
  .hx-row.is-open .hx-body{left:130px;}
}
.hx-sub{max-width:260px; overflow:hidden;}
.hx-row.is-open .hx-sub{opacity:0; transform:translateX(12px); max-width:0; transition:opacity .35s ease, transform .5s var(--hx-ease), max-width .7s var(--hx-ease);}
/* le sous-titre libère sa place : le titre ouvert tient sur 2 lignes */
.hx-row.is-open .hx-plus{transform:rotate(45deg); background-color:rgba(110,193,228,0.12); border-color:var(--BleuYC);}
/* contenu : texte qui glisse depuis la gauche (léger retard), visuel qui entre depuis la droite */
.hx-body{position:absolute; z-index:2; left:104px; right:calc(47% + 64px); bottom:44px; max-width:440px; display:flex; flex-direction:column; align-items:flex-start; gap:24px; opacity:0; transform:translateX(-28px); pointer-events:none; transition:opacity .3s ease, transform .3s ease;}
.hx-row.is-open .hx-body{opacity:1; transform:none; pointer-events:auto; transition:opacity .6s ease .12s, transform .9s var(--hx-ease) .12s;}
.hx-desc{font-size:16px; line-height:1.7; color:rgba(255,255,255,0.82); margin:0;}
.hx-cta{display:inline-flex; align-items:center; gap:10px; font-size:14px; letter-spacing:0.04em; text-transform:uppercase; font-weight:500; color:var(--BleuYC); padding-bottom:6px; position:relative; transition:color .3s ease;}
.hx-cta:hover, .hx-cta:focus-visible{color:#fff;}
.hx-cta-arrow{transition:transform .45s var(--hx-ease);}
.hx-cta:hover .hx-cta-arrow{transform:translateX(5px);}
.hx-visual{position:absolute; z-index:1; right:40px; top:104px; height:260px; width:47%; container-type:size; display:flex; align-items:center; justify-content:flex-end; opacity:0; transform:translateX(40px); pointer-events:none; transition:opacity .25s ease, transform .3s ease;}
.hx-row.is-open .hx-visual{opacity:1; transform:none; transition:opacity .6s ease .15s, transform 1s var(--hx-ease) .15s;}
/* ===== NOS EXPERTISES — VISUELS (v448) : de vraies slides YC, même langage que la slide de la page Services (.s2-sl).
     Chaque visuel = une composition 2,2:1 (.hv) : une slide 16:9 principale + un panneau latéral (miniatures, dispositions, modules).
     Textes en cqw (taille relative à la slide ou à la composition). À l'ouverture de la ligne, la slide se pose puis ses éléments
     arrivent en cascade (--d) ; graphique, Morph, compteurs (data-count, hxRef) se jouent une fois, puis tout se pose.
     Aucun point lumineux, aucune bordure qui tourne, aucun reflet en boucle. Fermée : tout revient à l'état de départ. ===== */
.hv{position:relative; width:min(100cqw, 220cqh); aspect-ratio:2.2/1; container-type:inline-size;}
.hv-sl{position:absolute; display:block; aspect-ratio:16/9; border-radius:10px; overflow:hidden; container-type:inline-size; isolation:isolate;
    background-color:var(--bleu-nuit); box-shadow:0 26px 60px rgba(0,0,0,0.5), inset 0 0 0 1px rgba(255,255,255,0.08);}
.hv-sl::before{content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
    background:radial-gradient(60% 70% at 85% 10%, rgba(110,193,228,0.18), transparent 70%), radial-gradient(50% 60% at 10% 100%, rgba(217,169,79,0.07), transparent 70%);}
.hv-sl.is-main{top:5.4%; width:72%; z-index:2;}
.hv-1 .hv-sl.is-main, .hv-3 .hv-sl.is-main{right:0;}
.hv-2 .hv-sl.is-main, .hv-4 .hv-sl.is-main{left:0;}
.hv-t{position:absolute; left:var(--x); top:var(--y); margin:0; white-space:nowrap; line-height:1;}
.hv-e{position:absolute; display:block; left:var(--x); top:var(--y); width:var(--w); height:var(--h);}
.is-r{transform:translateX(-100%);}
/* entrée : la slide se pose, puis ses éléments en cascade */
.hv-land{opacity:0; transform:translateY(10px) scale(.98); transition:opacity .25s ease, transform .3s ease;}
.hx-row.is-open .hv-land{opacity:1; transform:none; transition:opacity .6s ease .2s, transform 1s var(--hx-ease) .2s;}
.hv-in{opacity:0; translate:0 6px; transition:opacity .25s ease, translate .25s ease;}
.hx-row.is-open .hv-in{opacity:1; translate:0 0; transition:opacity .6s ease calc(.45s + var(--d, 0) * .09s), translate .8s var(--hx-ease) calc(.45s + var(--d, 0) * .09s);}
/* typographie des slides */
.hv-k{font-size:2.1cqw; font-weight:600; letter-spacing:0.16em; text-transform:uppercase; color:var(--BleuYC);}
.hv-k.is-dark{color:var(--ardoise);}
.hv-k.is-mute{color:rgba(255,255,255,0.42);}
.hv-h{font-family:'Nohemi',sans-serif; font-weight:300; font-size:5.4cqw; letter-spacing:-0.02em; color:#fff;}
.hv-h.is-b{font-weight:700;}
.hv-h.is-ink{color:var(--bleu-nuit);}
.hv-grad-d{background:linear-gradient(90deg, var(--bleu-profond), var(--GoldYC)); -webkit-background-clip:text; background-clip:text; color:transparent;}
.hv-kpi{font-family:'Nohemi',sans-serif; font-weight:600; font-size:13cqw; letter-spacing:-0.03em; color:#fff; font-variant-numeric:tabular-nums;}
.hv-kpi i{font-style:normal; font-weight:300; color:var(--BleuYC);}
.hv-cap{font-size:2.4cqw; color:rgba(255,255,255,0.62);}
.hv-foot{font-size:1.8cqw; letter-spacing:0.06em; color:rgba(255,255,255,0.38);}
.hv-small{font-size:1.8cqw; color:rgba(255,255,255,0.5); font-variant-numeric:tabular-nums;}
.hv-small b{font-weight:600; color:#fff;}
.hv-tag{position:absolute; padding:.55cqw 1.2cqw; border-radius:999px; font-size:1.25cqw; font-weight:600; letter-spacing:0.14em; text-transform:uppercase; color:rgba(255,255,255,0.7);
    background:rgba(10,13,16,0.72); box-shadow:inset 0 0 0 1px rgba(255,255,255,0.12);}
.hv-side{position:absolute; top:5.4%; bottom:5.4%; right:0; width:24%; display:flex; flex-direction:column; align-items:flex-start; gap:2cqw;}
.hv-side.is-left{left:0; right:auto; width:22%;}
.hv-side-k{font-size:1.2cqw; font-weight:600; letter-spacing:0.16em; text-transform:uppercase; color:rgba(255,255,255,0.45);}
/* 01 — avant / après : la slide brouillonne s'efface derrière la slide de pitch, le graphique pousse, le chiffre compte */
.hv-sl.is-draft{left:0; top:34%; width:38%; z-index:1; background-color:#EFEDE8; box-shadow:0 18px 40px rgba(0,0,0,0.45); rotate:-5deg; opacity:0; transition:opacity .25s ease;}
.hv-sl.is-draft::before{display:none;}
.hx-row.is-open .hv-sl.is-draft{opacity:.5; transition:opacity .6s ease .15s;}
.hv-dr-t{position:absolute; left:7%; top:11%; font-family:Arial, Helvetica, sans-serif; font-weight:700; font-size:7.4cqw; color:#3A3A3A; white-space:nowrap;}
.hv-dr-l{position:absolute; left:9%; top:var(--y); width:var(--w); height:4%; border-radius:2px; background:#A3A3A3;}
.hv-dr-pie{position:absolute; right:7%; top:40%; width:22%; aspect-ratio:1; border-radius:50%; background:conic-gradient(#8C8C8C 0 40%, #C2C2C2 0 72%, #6E6E6E 0);}
.is-draft-tag{left:2%; top:21%;}
.hv-1 .hv-land{transform:translateX(-6%);}
.hv-base{background:rgba(255,255,255,0.22);}
.hv-bar{border-radius:.8cqw .8cqw 0 0; background:linear-gradient(180deg, var(--ciel), var(--BleuYC)); transform-origin:50% 100%; transform:scaleY(0); transition:transform .25s ease;}
.hv-bar.is-gold{background:linear-gradient(180deg, var(--champagne), var(--GoldYC));}
.hx-row.is-open .hv-bar{transform:none; transition:transform 1s cubic-bezier(.22,1,.36,1) calc(1.05s + var(--d) * .12s);}
.hv-val{font-size:2cqw; font-weight:600; color:rgba(255,255,255,0.75); transform:translateX(-50%); font-variant-numeric:tabular-nums;}
.hv-val.is-gold{color:var(--GoldYC);}
.hv-ax{font-size:1.8cqw; color:rgba(255,255,255,0.4); transform:translateX(-50%);}
/* 02 — masque : grille qui se trace, palette nommée, spécimen « Aa », une disposition choisie puis appliquée à la slide */
.hv-sl.is-perle{background-color:var(--perle);}
.hv-sl.is-perle::before{background:radial-gradient(60% 70% at 88% 8%, rgba(110,193,228,0.16), transparent 70%);}
.hv-grid{background-image:repeating-linear-gradient(90deg, rgba(31,110,145,0.16) 0 1px, transparent 1px calc(100% / 12)); box-shadow:inset -1px 0 0 rgba(31,110,145,0.16);
    transform-origin:50% 0; transform:scaleY(0); transition:transform .25s ease;}
.hx-row.is-open .hv-grid{transform:none; transition:transform 1s cubic-bezier(.65,0,.35,1) .45s;}
.hv-ly-img, .hv-ly-l, .hv-ly-acc{opacity:0; transform:translateX(10%); transition:opacity .25s ease, transform .25s ease;}
.hv-ly-img{border-radius:.8cqw; background:linear-gradient(135deg, var(--bleu-profond), var(--BleuYC) 70%, var(--ciel));}
.hv-ly-l{border-radius:99px; background:rgba(14,42,58,0.78);}
.hv-ly-l.is-s{background:rgba(14,42,58,0.26);}
.hv-ly-acc{border-radius:99px; background:linear-gradient(90deg, var(--bleu-profond), var(--GoldYC));}
.hx-row.is-open .hv-ly-img, .hx-row.is-open .hv-ly-l, .hx-row.is-open .hv-ly-acc{opacity:1; transform:none;
    transition:opacity .6s ease calc(1.75s + var(--k, 0) * .07s), transform .9s var(--hx-ease) calc(1.75s + var(--k, 0) * .07s);}
.hv-sw{border-radius:.6cqw; opacity:0; transform:scale(.6); transition:opacity .25s ease, transform .25s ease;}
.hx-row.is-open .hv-sw{opacity:1; transform:none; transition:opacity .4s ease calc(.9s + var(--d) * .1s), transform .6s cubic-bezier(.34,1.56,.64,1) calc(.9s + var(--d) * .1s);}
.hv-sw.is-b{background:var(--BleuYC);}
.hv-sw.is-o{background:var(--GoldYC);}
.hv-sw.is-n{background:var(--bleu-nuit);}
.hv-sw.is-p{background:var(--perle); box-shadow:inset 0 0 0 1px rgba(14,42,58,0.28);}
.hv-sw-n{font-size:1.75cqw; font-weight:600; color:var(--bleu-nuit);}
.hv-sw-h{font-size:1.45cqw; letter-spacing:0.04em; color:var(--ardoise);}
.hx-row.is-open .hv-sw-n, .hx-row.is-open .hv-sw-h{transition-delay:calc(1s + var(--d) * .1s);}
.hv-aa{position:relative; display:flex; flex-direction:column; justify-content:space-between; width:100%; height:30%; padding:1.4cqw 1.6cqw; box-sizing:border-box; border-radius:1.6cqw;
    background:linear-gradient(155deg, var(--bleu-marine), var(--bleu-nuit)); box-shadow:inset 0 0 0 1px rgba(255,255,255,0.08), 0 18px 40px rgba(0,0,0,0.4);}
.hv-aa b{font-family:'Nohemi',sans-serif; font-weight:300; font-size:6.6cqw; line-height:.9; letter-spacing:-0.02em;
    background:linear-gradient(90deg, var(--BleuYC), var(--champagne), var(--GoldYC)); -webkit-background-clip:text; background-clip:text; color:transparent;}
.hv-aa small{font-size:1.1cqw; letter-spacing:0.04em; color:rgba(255,255,255,0.55); white-space:nowrap;}
.hv-th{position:relative; display:block; width:76%; aspect-ratio:16/9; border-radius:1cqw; background:#151A1F; box-shadow:inset 0 0 0 1px rgba(255,255,255,0.1);}
.hv-th i{position:absolute; display:block; border-radius:99px;}
.hv-th .th-t{left:10%; top:14%; width:50%; height:9%; background:rgba(255,255,255,0.8);}
.hv-th .th-s{left:10%; top:30%; width:30%; height:6%; background:rgba(255,255,255,0.3);}
.hv-th .th-img{left:10%; top:36%; width:38%; height:46%; border-radius:.6cqw; background:linear-gradient(135deg, var(--bleu-profond), var(--BleuYC));}
.hv-th .th-l{left:56%; top:42%; width:32%; height:6%; background:rgba(255,255,255,0.35);}
.hv-th .th-l.is-2{top:56%; width:24%;}
.hv-th::after{content:''; position:absolute; inset:-3px; border-radius:calc(1cqw + 3px); box-shadow:0 0 0 1.5px var(--BleuYC); opacity:0;}
.hx-row.is-open .hv-th.is-1::after{animation:hvPick 1.5s ease .85s both;}
@keyframes hvPick{0%{opacity:0;} 18%,70%{opacity:1;} 100%{opacity:0;}}
.hx-row.is-open .hv-th.is-2::after{opacity:1; transition:opacity .3s ease 1.5s;}
/* 03 — Morph : volet des miniatures (1 → 2), la slide passe de la couverture aux données en 1,1 s, le chiffre compte */
.hv-pane{display:flex; align-items:flex-start; gap:1cqw; width:100%;}
.hv-pane em{font-style:normal; font-size:1.2cqw; font-weight:600; color:rgba(255,255,255,0.45); width:1.4cqw;}
.hv-mini{position:relative; flex:1; aspect-ratio:16/9; border-radius:1cqw; background:var(--bleu-nuit); box-shadow:inset 0 0 0 1px rgba(255,255,255,0.1);}
.hv-mini i{position:absolute; display:block;}
.hv-mini.is-a .mi-t{left:10%; top:40%; width:44%; height:8%; border-radius:99px; background:rgba(255,255,255,0.8);}
.hv-mini.is-a .mi-s{left:10%; top:56%; width:28%; height:5%; border-radius:99px; background:rgba(255,255,255,0.3);}
.hv-mini.is-a .mi-c{left:62%; top:20%; width:26%; aspect-ratio:1; border-radius:50%; background:var(--BleuYC);}
.hv-mini.is-b .mi-t{left:8%; top:12%; width:32%; height:6%; border-radius:99px; background:rgba(255,255,255,0.8);}
.hv-mini.is-b .mi-b1, .hv-mini.is-b .mi-b2, .hv-mini.is-b .mi-b3{bottom:16%; width:10%; border-radius:2px 2px 0 0;}
.hv-mini.is-b .mi-b1{left:47%; height:30%; background:var(--ciel);}
.hv-mini.is-b .mi-b2{left:60%; height:48%; background:var(--BleuYC);}
.hv-mini.is-b .mi-b3{left:73%; height:62%; background:var(--GoldYC);}
.hv-mini::after{content:''; position:absolute; inset:-3px; border-radius:calc(1cqw + 3px); box-shadow:0 0 0 1.5px var(--BleuYC); opacity:0; transition:opacity .25s ease;}
.hx-row.is-open .hv-pane.is-1 .hv-mini::after{animation:hvPick 1.3s ease .4s both;}
.hx-row.is-open .hv-pane.is-2 .hv-mini::after{opacity:1; transition:opacity .3s ease 1.05s;}
.hv-morph-chip{position:relative; display:inline-flex; align-items:center; padding:.7cqw 1.3cqw; border-radius:999px; font-size:1.3cqw; white-space:nowrap; color:rgba(255,255,255,0.7);
    background:rgba(10,13,16,0.72); box-shadow:inset 0 0 0 1px rgba(255,255,255,0.12);}
.hv-morph-chip b{font-weight:600; color:var(--BleuYC);}
.hv-morph-chip i{position:absolute; left:14%; right:14%; bottom:-1px; height:1px; overflow:hidden; background:rgba(255,255,255,0.12);}
.hv-morph-chip u{display:block; height:100%; background:linear-gradient(90deg, var(--BleuYC), var(--GoldYC)); transform-origin:left; transform:scaleX(0); transition:transform .25s ease;}
.hx-row.is-open .hv-morph-chip u{transform:none; transition:transform 1.1s linear .9s;}
.hv-morph-chip.is-in-slide{display:none; position:absolute; right:4%; bottom:6%; font-size:2cqw; padding:1cqw 1.8cqw;}
/* la slide : état A (couverture) au repos, état B (données) quand la ligne est ouverte ; même courbe pour tous les éléments */
.mo{--mo-t:left, top, width, height, border-radius, font-size, opacity; position:absolute; display:block; transition-property:var(--mo-t); transition-duration:.3s; transition-timing-function:ease;}
/* taille fixe du visuel (.hx-visual) : les cqw ne bougent pas pendant l'ouverture */
.hx-row.is-open .mo{transition-duration:1.1s; transition-timing-function:cubic-bezier(.77,0,.18,1); transition-delay:.9s;}
.mo-title{left:8%; top:34%; font-family:'Nohemi',sans-serif; font-weight:300; font-size:6.4cqw; line-height:1; letter-spacing:-0.02em; color:#fff; white-space:nowrap;}
.mo-sub{left:8%; top:48%; font-size:2.4cqw; line-height:1; color:rgba(255,255,255,0.55); white-space:nowrap;}
.mo-shape{left:62%; top:18%; width:26%; height:46.2%; border-radius:50%; background-color:var(--BleuYC);}
.mo-gold{left:56%; top:66%; width:6%; height:10.7%; border-radius:1cqw; background-color:var(--GoldYC);}
.mo-bar3{left:47%; top:82%; width:9%; height:0; opacity:0; border-radius:.8cqw .8cqw 0 0; background-color:var(--ciel);}
.mo-kpi{left:8%; top:50%; opacity:0; font-family:'Nohemi',sans-serif; font-weight:600; font-size:11cqw; line-height:1; letter-spacing:-0.03em; color:#fff; white-space:nowrap; font-variant-numeric:tabular-nums;}
.mo-kpi i{font-style:normal; font-weight:300; color:var(--BleuYC);}
.mo-cap{left:8%; top:72%; opacity:0; font-size:2.2cqw; line-height:1; color:rgba(255,255,255,0.6); white-space:nowrap;}
.mo-base{left:44%; top:82%; width:50%; height:.4%; opacity:0; background-color:rgba(255,255,255,0.22);}
.hx-row.is-open .mo-title{left:6%; top:9%; font-size:3.6cqw;}
.hx-row.is-open .mo-sub{left:6%; top:17%; font-size:1.9cqw;}
.hx-row.is-open .mo-shape{left:60%; top:34%; width:9%; height:48%; border-radius:.8cqw .8cqw 0 0;}
.hx-row.is-open .mo-gold{left:73%; top:20%; width:9%; height:62%; border-radius:.8cqw .8cqw 0 0;}
.hx-row.is-open .mo-bar3{top:52%; height:30%; opacity:1;}
.hx-row.is-open .mo-kpi{top:40%; opacity:1;}
.hx-row.is-open .mo-cap{top:63%; opacity:1;}
.hx-row.is-open .mo-base{opacity:1;}
/* 04 — formation : écran du module, vidéo avec lecture, raccourci clavier pressé une fois, progression ; volet des modules */
.hv-sl.is-screen{background-color:#151A1F;}
.hv-vid{position:absolute; left:5%; top:16%; width:58%; height:60%; border-radius:1cqw; background:var(--bleu-nuit); box-shadow:inset 0 0 0 1px rgba(255,255,255,0.08); overflow:hidden;}
.hv-vid-k{position:absolute; left:7%; top:13%; font-family:'Nohemi',sans-serif; font-weight:300; font-size:3.4cqw; line-height:1; color:#fff; white-space:nowrap;}
.hv-vid-row{position:absolute; left:7%; top:var(--y); width:86%; display:flex; align-items:center; gap:3%;}
.hv-vid-row b{font-family:'Nohemi',sans-serif; font-weight:600; font-size:2cqw; line-height:1; color:var(--BleuYC);}
.hv-vid-row i{display:block; width:var(--w); height:.9cqw; border-radius:99px; background:rgba(255,255,255,0.24);}
.hv-play{position:absolute; left:82%; top:58%; width:10cqw; height:10cqw; margin:-5cqw 0 0 -5cqw; border-radius:50%; background:rgba(10,13,16,0.5); box-shadow:inset 0 0 0 1px rgba(255,255,255,0.6);}
.hv-play::after{content:''; position:absolute; left:40%; top:50%; border-style:solid; border-width:1.7cqw 0 1.7cqw 2.7cqw; border-color:transparent transparent transparent #fff; transform:translate(-20%, -50%);}
.hv-key{position:absolute; left:67%; top:16%; width:28%; height:60%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2.4cqw; border-radius:1cqw;
    background:rgba(255,255,255,0.03); box-shadow:inset 0 0 0 1px rgba(255,255,255,0.08);}
.hv-keys{display:flex; align-items:center; gap:1cqw;}
.hv-keys em{font-style:normal; font-size:2cqw; color:rgba(255,255,255,0.45);}
.hv-keys kbd{display:inline-flex; align-items:center; justify-content:center; min-width:5cqw; padding:1cqw 1.4cqw; border-radius:.8cqw; font-family:'Plus Jakarta Sans',sans-serif; font-size:2.3cqw; font-weight:600; line-height:1; color:#fff;
    background:linear-gradient(180deg, #2A3139, #1B2127); box-shadow:inset 0 0 0 1px rgba(255,255,255,0.14), 0 .5cqw 0 #0A0D10; transition:box-shadow .3s ease;}
.hx-row.is-open .hv-keys kbd{animation:hvPress .5s ease 2.1s both;}
.hx-row.is-open .hv-keys kbd + em + kbd{animation-delay:2.25s;}
@keyframes hvPress{0%{translate:0 0; box-shadow:inset 0 0 0 1px rgba(255,255,255,0.14), 0 .5cqw 0 #0A0D10;} 40%{translate:0 .4cqw; box-shadow:inset 0 0 0 1px var(--BleuYC), 0 .1cqw 0 #0A0D10;} 100%{translate:0 0; box-shadow:inset 0 0 0 1px var(--BleuYC), 0 .5cqw 0 #0A0D10;}}
.hv-key-l{font-size:1.8cqw; color:rgba(255,255,255,0.55); white-space:nowrap;}
.hv-track{border-radius:99px; overflow:hidden; background:rgba(255,255,255,0.12);}
.hv-fill{display:block; width:100%; height:100%; background:linear-gradient(90deg, var(--BleuYC), var(--GoldYC)); transform-origin:left; transform:scaleX(0);}
/* seule animation continue de la ligne ouverte, très lente : la lecture avance (s'arrête à la fermeture) */
.hx-row.is-open .hv-fill{transform:scaleX(.38); animation:hvFill 1.3s cubic-bezier(.22,1,.36,1) .8s both, hvPlay 40s linear 2.1s forwards;}
@keyframes hvFill{from{transform:scaleX(0);} to{transform:scaleX(.38);}}
@keyframes hvPlay{from{transform:scaleX(.38);} to{transform:scaleX(.46);}}
.hv-mod{display:flex; align-items:center; gap:1.1cqw; width:100%; box-sizing:border-box; padding:1cqw 1.2cqw; border-radius:1cqw; font-size:1.7cqw; color:rgba(255,255,255,0.55); white-space:nowrap;}
.hv-mod i{flex:none; display:inline-flex; align-items:center; justify-content:center; width:3cqw; height:3cqw; border-radius:50%; font-style:normal; font-size:1.1cqw; font-weight:600; box-shadow:inset 0 0 0 1px rgba(255,255,255,0.2);}
.hv-mod i svg{width:60%; height:60%;}
.hv-mod.is-done i{background:var(--BleuYC); color:var(--ink); box-shadow:none;}
.hv-mod.is-cur{color:#fff; background:rgba(110,193,228,0.08); box-shadow:inset 2px 0 0 var(--BleuYC);}
.hv-mod.is-cur i{color:var(--BleuYC); box-shadow:inset 0 0 0 1px var(--BleuYC);}
/* tablette étroite et mobile : la slide principale seule, en 16:9, sur toute la largeur */
@media (max-width:900px){
  .hv{width:min(100cqw, 177.78cqh); aspect-ratio:16/9;}
  .hv-side, .hv-sl.is-draft, .is-draft-tag{display:none;}
  .hv-sl.is-main, .hv-1 .hv-sl.is-main, .hv-3 .hv-sl.is-main, .hv-2 .hv-sl.is-main, .hv-4 .hv-sl.is-main{left:0; right:auto; top:0; width:100%;}
  .hv-morph-chip.is-in-slide{display:inline-flex;}
}
/* Bas de "Nos expertises" : photo qui se fond dans le fond sombre. Le haut et le bas de l'image se dissolvent
     (masque en dégradé), sa couleur est adoucie pour rester dans la palette, et elle se révèle au scroll. */
.hx-section{padding-bottom:0;}
@media (max-width:900px){
  .hx-section{padding:80px 24px 0;}
}
@media (max-width:900px){
  .hx-section{padding:80px 24px 0;}
  .hx-wrap{gap:32px;}
  .hx-row{height:76px; border-radius:var(--rayon-m);}
  .hx-row.is-open{height:540px;}
  .hx-head{height:74px; gap:16px; padding:0 18px 0 22px;}
  .hx-num{font-size:16px; min-width:24px;}
  .hx-label{font-size:18px;}
  .hx-sub{display:none;}
  .hx-plus{width:34px; height:34px; flex-basis:34px; flex-shrink:0; aspect-ratio:1;}
  .hx-visual{left:22px; right:22px; top:90px; bottom:auto; width:auto; height:200px; justify-content:center;}
  .hx-body{left:22px; right:22px; bottom:28px; max-width:none; gap:18px;}
  .hx-row.is-open .hx-plus{transform:rotate(45deg);}
  .hx-desc{font-size:14px; line-height:1.65;}
}
@media (prefers-reduced-motion: reduce){
  .hx-section *, .hx-section *::before, .hx-section *::after{transition-duration:.01ms !important; transition-delay:0s !important; animation:none !important;}
}
/* ===== PORTFOLIO : "image accordion" horizontal =====
     Pour chaque panneau :
       - image : une ligne par client ci-dessous (--bg = image, --pos = cadrage au repos, --pos-open = cadrage ouvert, facultatif) ;
         sans --bg = fond neutre + libellé "Image N"
       - textes : .pf-cat / .pf-name / .pf-desc, lien : href de .pf-btn, logo client : .pf-logo
     Ouverture : survol (souris), tap (tactile), focus clavier sur le bouton. */
/* Portfolio : fond sombre + halos bleus "spot de scène" et points lumineux qui montent (comme "Ce qui nous distingue") */
.pf-section{position:relative; overflow:hidden; isolation:isolate; background:#0A0D10;}
.pf-section .blob{z-index:0;}
.pf-section .hero-spark{z-index:1;}
.pf-section .hero-spark.is-gold{background:var(--GoldYC); box-shadow:0 0 8px 1px rgba(217,169,79,0.6);}
.pf-head, .pf-acc{position:relative; z-index:2;}
.pf-head{padding:0 64px;}
.pf-more{display:inline-flex; align-items:center; gap:10px; font-size:14px; font-weight:500; letter-spacing:0.04em; text-transform:uppercase; color:var(--BleuYC); padding-bottom:6px; position:relative; transition:color .3s ease;}
.pf-more:hover, .pf-more:focus-visible{color:#fff;}
/* v489 : liens texte en capitales Bleu YC avec flèche (.pf-more, .hx-cta) — trait du survol en dégradé YC animé, qui se dessine de gauche à droite */
.pf-more::after, .hx-cta::after{content:''; position:absolute; left:0; bottom:0; width:100%; height:1px; pointer-events:none; 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%; animation:ycGrad 3.5s linear infinite; transform:scaleX(0); transform-origin:left; transition:transform .45s cubic-bezier(.22,1,.36,1);}
.pf-more:hover::after, .pf-more:focus-visible::after, .hx-cta:hover::after, .hx-cta:focus-visible::after{transform:scaleX(1);}
@media (prefers-reduced-motion: reduce){
  .pf-more::after, .hx-cta::after{animation:none; transition:none;}
}
@media (max-width:767px){
  .pf-section{padding:80px 0 !important; gap:48px !important;}
  .pf-head{padding:0 24px;}
}
.pf-acc{--ease:cubic-bezier(0.65,0,0.35,1); container-type:inline-size; display:flex; height:650px; margin:0 16px; overflow:hidden;}
.pf-panel{position:relative; flex:1 1 0; min-width:0; overflow:hidden; cursor:pointer; outline:none;
    background:linear-gradient(160deg, #151A1F 0%, #262D34 100%); transition:flex-grow .7s var(--ease);}
.pf-panel + .pf-panel{box-shadow:inset 1px 0 0 rgba(255,255,255,0.05);}
/* séparation à peine visible entre fonds neutres */
.pf-label{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-family:'Nohemi',sans-serif; font-weight:300; font-size:12px; letter-spacing:0.22em; text-transform:uppercase; color:rgba(255,255,255,0.42); transition:opacity .3s ease;}
/* l'image recouvre le libellé : dès que --bg est renseigné, "Image N" disparaît */
.pf-media{position:absolute; inset:0; background:var(--bg, none) var(--pos, center) / cover no-repeat; transform:scale(1.08); transition:transform 1.2s var(--ease), background-position .7s var(--ease);}
.pf-leboncoin{--bg:url('/assets/img/projets/leboncoin-apercu.jpg'); --pos:40% 50%; --pos-open:58% 50%;}
.pf-petitbateau{--bg:url('/assets/img/projets/petit-bateau-apercu.jpg'); --pos:50% 40%;}
.pf-cartier{--bg:url('/assets/img/projets/cartier-apercu.jpg'); --pos:66% 50%;}
.pf-msa{--bg:url('/assets/img/projets/mon-specialiste-auto-apercu.jpg'); --pos:74% 81%; --pos-open:92% 81%;}
/* photo 03 : la voiture (centre ≈ 66 % × 72 % de l'image) reste au milieu du panneau, fermé comme ouvert */
.pf-kalea{--bg:url('/assets/img/projets/kalea-apercu.jpg'); --pos:53% 30%; --pos-open:53% 30%;}
/* v489 : photo kalea01 (poignée de main), cadrée sur la femme au centre, panneau fermé comme ouvert */
.pf-shade{position:absolute; inset:0; background:linear-gradient(to top, rgba(0,0,0,0.3), transparent 38%), rgba(0,0,0,0.55); opacity:0; transition:opacity .45s ease;}
/* logo client (même traitement monochrome que "Ils nous ont fait confiance", passé en blanc sur la photo) */
.pf-logo{position:absolute; left:0; right:0; bottom:40px; display:flex; justify-content:center; pointer-events:none; opacity:0; transform:scale(1); transform-origin:center bottom; transition:opacity .15s ease, transform .3s ease;}
/* visible seulement sur la carte ouverte */
.pf-logo img{display:block; height:var(--lh, 30px); width:auto; max-width:min(160px, 80%); object-fit:contain; filter:brightness(0) invert(1) drop-shadow(0 2px 10px rgba(0,0,0,0.55)); opacity:0.92;}
.pf-content{position:absolute; top:50%; left:50%; width:calc(42cqw - 72px); transform:translate(-50%,-50%); display:flex; flex-direction:column; align-items:center; text-align:center; gap:16px; color:#fff; pointer-events:none;}
.pf-content > *{opacity:0; transform:translateY(20px); transition:opacity .15s ease, transform .15s ease;}
/* fermeture : disparition rapide */
.pf-cat{font-family:'Plus Jakarta Sans',sans-serif; font-weight:600; font-size:12px; letter-spacing:0.16em; text-transform:uppercase;}
.pf-name{font-family:'Nohemi',sans-serif; font-weight:700; font-size:clamp(36px, 4.2cqw, 64px); line-height:1.05; letter-spacing:-0.01em; margin:0;}
.pf-desc{font-family:'Nohemi',sans-serif; font-weight:300; font-size:16px; line-height:1.5; margin:4px 0 8px; max-width:430px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}
.pf-btn{display:inline-block; font-family:'Plus Jakarta Sans',sans-serif; font-weight:600; font-size:14px; letter-spacing:0.03em; color:#fff; padding:12px 32px; border:1.5px solid #fff; border-radius:999px; background:transparent;
    transition:background-color .3s ease, color .3s ease, border-color .3s ease;}
.pf-btn:hover, .pf-btn:focus-visible{background:#6EC1E4; border-color:#6EC1E4; color:#0E2A3A;}
/* --- État ouvert : survol souris, tap (.is-active), focus clavier --- */
.pf-panel.is-active, .pf-panel:has(.pf-btn:focus-visible){flex-grow:2.897;}
/* ≈ 42 % ; les 4 autres ≈ 14,5 % */
.pf-panel.is-active .pf-shade, .pf-panel:has(.pf-btn:focus-visible) .pf-shade{opacity:1;}
.pf-panel.is-active .pf-logo, .pf-panel:has(.pf-btn:focus-visible) .pf-logo{opacity:1; transform:scale(1.12); transition:opacity .6s ease .45s, transform .9s cubic-bezier(.22,1,.36,1) .45s;}
/* ouvert : le logo apparaît et grandit légèrement */
.pf-panel.is-active .pf-media, .pf-panel:has(.pf-btn:focus-visible) .pf-media{transform:scale(1); background-position:var(--pos-open, var(--pos, center));}
.pf-panel.is-active .pf-content, .pf-panel:has(.pf-btn:focus-visible) .pf-content{pointer-events:auto;}
.pf-panel.is-active .pf-content > *, .pf-panel:has(.pf-btn:focus-visible) .pf-content > *{opacity:1; transform:none;
    transition:opacity .5s ease calc(.2s + var(--i) * .09s), transform .6s cubic-bezier(.22,1,.36,1) calc(.2s + var(--i) * .09s);}
.pf-acc.is-engaged .pf-label{opacity:0;}
/* libellés visibles uniquement à l'état initial */
@media (hover:hover) and (pointer:fine){
  .pf-panel:hover{flex-grow:2.897;}
  .pf-panel:hover .pf-shade{opacity:1;}
  .pf-panel:hover .pf-logo{opacity:1; transform:scale(1.12); transition:opacity .6s ease .45s, transform .9s cubic-bezier(.22,1,.36,1) .45s;}
  .pf-panel:hover .pf-media{transform:scale(1); background-position:var(--pos-open, var(--pos, center));}
  .pf-panel:hover .pf-content{pointer-events:auto;}
  .pf-panel:hover .pf-content > *{opacity:1; transform:none;
        transition:opacity .5s ease calc(.2s + var(--i) * .09s), transform .6s cubic-bezier(.22,1,.36,1) calc(.2s + var(--i) * .09s);}
  .pf-acc:hover .pf-label{opacity:0;}
}
/* Tablette */
@media (max-width:1024px){
  .pf-acc{height:500px;}
  .pf-content{width:calc(42cqw - 48px); gap:12px;}
  .pf-desc{font-size:14px;}
}
/* Mobile : accordéon vertical, le premier panneau est ouvert par défaut */
@media (max-width:767px){
  .pf-acc{flex-direction:column; height:640px;}
  .pf-panel + .pf-panel{box-shadow:inset 0 1px 0 rgba(255,255,255,0.05);}
  .pf-panel.is-active, .pf-acc:not(.is-engaged) .pf-panel:first-child{flex-grow:5;}
  .pf-acc:not(.is-engaged) .pf-panel:first-child .pf-shade{opacity:1;}
  .pf-acc:not(.is-engaged) .pf-panel:first-child .pf-logo{opacity:1; transform:scale(1.12);}
  .pf-logo{bottom:18px;}
  .pf-logo img{height:calc(var(--lh, 30px) * 0.75);}
  .pf-acc:not(.is-engaged) .pf-panel:first-child .pf-media{transform:scale(1); background-position:var(--pos-open, var(--pos, center));}
  .pf-acc:not(.is-engaged) .pf-panel:first-child .pf-content{pointer-events:auto;}
  .pf-acc:not(.is-engaged) .pf-panel:first-child .pf-content > *{opacity:1; transform:none;}
  .pf-acc:not(.is-engaged) .pf-panel:first-child .pf-label{opacity:0;}
  .pf-content{width:calc(100cqw - 48px); gap:10px;}
  .pf-name{font-size:36px;}
  .pf-desc{font-size:14px; margin:2px 0 6px; -webkit-line-clamp:3;}
}
@media (prefers-reduced-motion: reduce){
  .pf-section *, .pf-section *::before, .pf-section *::after{transition-duration:.01ms !important; transition-delay:0s !important;}
  .pf-content > *{transform:none !important;}
}
/* ===== AVIS CLIENTS : carte "à la une" qui défile automatiquement, sélecteur par logos =====
     Pour chaque avis (dans le HTML) : .tm-quote (texte), .tm-name, .tm-role, initiales .tm-avatar ;
     le logo correspondant est le même bouton que dans .tm-tabs (même ordre). */
.tm-section{--tm-dur:7s; position:relative; overflow:hidden; background:var(--ink); padding:var(--section) 64px; display:flex; flex-direction:column; gap:48px;}
.tm-glow{position:absolute; border-radius:50%; filter:blur(70px); pointer-events:none; opacity:.55; animation:tmDrift 18s ease-in-out infinite alternate;}
.tm-glow.g1{width:520px; height:520px; left:-160px; top:40px; background:radial-gradient(circle, rgba(110,193,228,0.28), transparent 70%);}
.tm-glow.g2{width:420px; height:420px; right:-120px; bottom:-80px; background:radial-gradient(circle, rgba(217,169,79,0.16), transparent 70%); animation-delay:-9s;}
@keyframes tmDrift{0%{transform:translate(0,0) scale(1);}100%{transform:translate(60px,-40px) scale(1.12);}}
.tm-head{position:relative; display:flex; justify-content:space-between; align-items:flex-end; gap:24px; flex-wrap:wrap;}
.tm-head-l{display:flex; flex-direction:column; gap:16px;}
/* en-tête centré : badge, titre puis compteur 01 / 07, au milieu de la section */
.tm-head{flex-direction:column; justify-content:center; align-items:center; text-align:center; gap:22px;}
.tm-head-l{align-items:center;}
.tm-head-l .yc-badge{align-self:center;}
/* compteur 01 / 07 : à droite de l'écran, aligné sur le bas du titre (sur mobile, il reste centré sous le titre) */
@media (min-width:768px){
  .tm-count{position:absolute; right:0; bottom:8px;}
}
.tm-count{font-family:'Nohemi',sans-serif; font-weight:300; font-size:16px; letter-spacing:0.12em; color:var(--muted);}
.tm-count b{font-weight:700; color:#fff;}
/* carrousel : l'avis actif au centre, les voisins de chaque côté, plus petits et flous.
     Chaque carte lit sa position --o (-2 … 2, posée par tmRef) et sa distance --ao (0 … 2). */
.tm-stage{position:relative; display:grid; justify-items:center; padding:10px 0 6px;}
.tm-slide{--o:0; --ao:0; grid-area:1 / 1; position:relative; width:min(640px, 100%); box-sizing:border-box; border-radius:var(--rayon-l); padding:48px 48px 40px;
    display:flex; flex-direction:column; justify-content:space-between; gap:32px; cursor:pointer;
    background:radial-gradient(420px circle at var(--mx, 70%) var(--my, 15%), rgba(110,193,228,0.10), transparent 60%), linear-gradient(160deg, #151A1F 0%, #0A0D10 100%);
    box-shadow:0 30px 70px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.05);
    transform:translateX(calc(var(--o) * 78%)) scale(calc(1 - var(--ao) * 0.14));
    filter:blur(calc(var(--ao) * 3.5px)) brightness(calc(1 - var(--ao) * 0.28));
    opacity:calc(1 - var(--ao) * 0.35); z-index:calc(10 - var(--ao));
    transition:transform .9s cubic-bezier(.65,0,.35,1), filter .9s cubic-bezier(.65,0,.35,1), opacity .9s ease;}
.tm-slide.is-far{opacity:0; pointer-events:none;}
.tm-slide:not(.is-active):not(.is-placed){opacity:0; pointer-events:none;}
/* tant que le script ne l'a pas placée, une carte reste cachée */
.tm-slide.is-active{cursor:default;}
/* bordure animée or/bleu (comme les badges), visible sur la carte active */
.tm-slide::before{content:''; position:absolute; inset:0; border-radius:inherit; padding:1px; pointer-events:none; opacity:.25; transition:opacity .6s ease;
    background:conic-gradient(from var(--badge-angle), rgba(217,169,79,0.12) 0%, var(--GoldYC) 18%, rgba(217,169,79,0.12) 36%, rgba(110,193,228,0.12) 55%, var(--BleuYC) 72%, rgba(110,193,228,0.12) 90%, rgba(217,169,79,0.12) 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 9s linear infinite;}
.tm-slide.is-active::before{opacity:1;}
.tm-mark{position:absolute; top:30px; right:34px; width:58px; height:auto; opacity:.18; pointer-events:none;}
.tm-quote{margin:0; font-family:'Nohemi',sans-serif; font-weight:300; font-size:20px; line-height:1.55; letter-spacing:-0.005em; color:#fff; padding-right:56px;}
.tm-quote em{font-style:normal; font-weight:500; color:var(--BleuYC);}
.tm-author{display:flex; align-items:center; gap:14px;}
.tm-avatar{width:44px; height:44px; border-radius:50%; flex:0 0 44px; overflow:hidden; color:rgba(10,13,16,0.78); display:flex; align-items:center; justify-content:center;
    font-family:'Nohemi',sans-serif; font-weight:600; font-size:16px; color:#0A0D10; background:linear-gradient(135deg, var(--BleuYC), var(--GoldYC)); aspect-ratio:1;}
.tm-name{font-family:'Nohemi',sans-serif; font-weight:600; font-size:16px; color:#fff;}
.tm-avatar svg{width:100%; height:100%; display:block;}
.tm-role{font-size:14px; color:var(--muted); margin-top:3px; letter-spacing:0.02em;}
.tm-stars{margin-left:auto; display:flex; gap:3px; color:var(--GoldYC);}
.tm-stars svg{width:14px; height:14px; flex-shrink:0;}
/* le texte de la carte qui devient active arrive en fondu, avec une légère montée */
.tm-slide.is-active > .tm-quote, .tm-slide.is-active > .tm-author{animation:tmTextIn .9s cubic-bezier(.22,1,.36,1) backwards;}
.tm-slide.is-active > .tm-author{animation-delay:.15s;}
@keyframes tmTextIn{from{opacity:0; transform:translateY(14px);}}
/* sélecteur par logos + barre de progression */
.tm-tabs{position:relative; display:grid; grid-template-columns:repeat(7, minmax(0,1fr)); gap:8px;}
/* cases des logos réduites de 20 % (largeur et hauteur), rangée centrée */
@media (min-width:1025px){
  .tm-tabs{width:80%; margin:0 auto; box-sizing:border-box;}
}
.tm-tab{position:relative; display:flex; align-items:center; justify-content:center; height:58px; padding:0 12px; border:0; border-radius:var(--rayon-s); background:rgba(255,255,255,0.02); cursor:pointer; transition:background .35s ease;}
.tm-tab:hover{background:rgba(255,255,255,0.05);}
.tm-tab:focus-visible{outline:2px solid var(--BleuYC); outline-offset:2px;}
.tm-tab img{height:var(--lh, 24px); width:auto; max-width:100%; object-fit:contain; filter:brightness(0) invert(1); opacity:.38; transition:opacity .35s ease, transform .35s ease;}
.tm-tab:hover img{opacity:.7;}
.tm-tab.is-active img{opacity:1; transform:scale(1.06);}
.tm-tab::after{content:''; position:absolute; left:14px; right:14px; bottom:9px; height:2px; border-radius:2px; background:rgba(255,255,255,0.08);}
.tm-bar{position:absolute; left:14px; right:14px; bottom:9px; height:2px; border-radius:2px; z-index:1; transform:scaleX(0); transform-origin:left center;
    background:linear-gradient(90deg, var(--BleuYC), var(--GoldYC));}
.tm-tab.is-active .tm-bar{animation:tmProgress var(--tm-dur) linear forwards; animation-play-state:paused;}
.tm-section.is-playing .tm-tab.is-active .tm-bar{animation-play-state:running;}
@keyframes tmProgress{from{transform:scaleX(0);}to{transform:scaleX(1);}}
/* avant l'apparition au scroll */
.tm-section.is-ready .tm-head, .tm-section.is-ready .tm-stage, .tm-section.is-ready .tm-tabs{opacity:0; transform:translateY(28px);}
.tm-section.is-in .tm-head, .tm-section.is-in .tm-stage, .tm-section.is-in .tm-tabs{opacity:1; transform:none; transition:opacity .9s ease, transform 1s cubic-bezier(.22,1,.36,1);}
.tm-section.is-in .tm-stage{transition-delay:.12s;}
.tm-section.is-in .tm-tabs{transition-delay:.24s;}
@media (max-width:1024px){
  .tm-section{padding:96px 40px;}
  .tm-tabs{display:flex; overflow-x:auto; scroll-snap-type:x mandatory; scroll-padding:0 40px; margin:0 -40px; padding:0 40px; scrollbar-width:none;}
  .tm-tab{flex:0 0 120px; scroll-snap-align:start;}
  .tm-slide{width:min(560px, 76%);}
  .tm-quote{font-size:20px;}
}
@media (max-width:767px){
  .tm-section{padding:80px 20px; gap:32px;}
  .tm-slide{width:84%; padding:32px 24px 26px; border-radius:20px; gap:22px; transform:translateX(calc(var(--o) * 96%)) scale(calc(1 - var(--ao) * 0.1));}
  .tm-mark{width:40px; top:20px; right:20px;}
  .tm-quote{font-size:18px; line-height:1.55; padding-right:34px;}
  .tm-stars{display:none;}
  .tm-tabs{display:flex; overflow-x:auto; scroll-snap-type:x mandatory; scroll-padding:0 20px; gap:8px; margin:0 -20px; padding:0 20px; scrollbar-width:none;}
  .tm-tabs::-webkit-scrollbar{display:none;}
  .tm-tab{flex:0 0 34%; scroll-snap-align:start; height:53px;}
}
@media (prefers-reduced-motion: reduce){
  .tm-section *, .tm-section *::before{animation:none !important; transition-duration:.01ms !important; transition-delay:0s !important;}
  .tm-section.is-ready .tm-head, .tm-section.is-ready .tm-stage, .tm-section.is-ready .tm-tabs{opacity:1; transform:none;}
}
@keyframes ycGrad{from{background-position:0% 0;}to{background-position:200% 0;}}
.yc-grad:not(.yc-intro-word){display:inline-block;}
/* v495 : « Inspirez » de l'intro sans drop-shadow (filtre + texte détouré = flou sous Chrome/Safari) ; son entrée a sa
     propre courbe de flou (blur → aucun), pour que le flou se dissipe progressivement dans tous les navigateurs */
.yc-intro-word.yc-grad{filter:none; animation:ycWordInG .9s cubic-bezier(.22,1,.36,1) .8s backwards, ycGrad 3.5s linear infinite;}
@keyframes ycWordInG{from{opacity:0; translate:0 16px; filter:blur(8px);} to{opacity:1; translate:0 0; filter:blur(0);}}
@media (prefers-reduced-motion: reduce){
  .yc-grad, .yc-intro-word.yc-grad{animation:none;}
}
.yc-sky:not(.hero){overflow-x:clip !important; overflow-y:visible !important;}
/* 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);}
.tm-section .tm-glow{opacity:.35;}
.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;}
/* Conteneurs : plus de centrage à largeur max, ils vont d'une marge à l'autre */
.hx-wrap, .sv-hero-grid, .sv-layout, .sv-packs-card, .po-hero-grid, .po-wrap, .po-m-bar, .po-m-panels, .po-m-nav,
  .pk-wrap, .pk-cards, .pk-flow, .ap-hero-grid, .ap-wrap, .ap-team-row, .ct-grid, .ct-wrap{max-width:none !important; margin-left:0 !important; margin-right:0 !important;}
@media (max-width:1024px){
  .tm-tabs{margin-left:calc(-1 * var(--gutter)); margin-right:calc(-1 * var(--gutter)); padding-left:var(--gutter); padding-right:var(--gutter); scroll-padding:0 var(--gutter);}
}
/* Portfolio de l'accueil : les photos vont d'un bord à l'autre de l'écran */
.pf-acc{margin-left:0 !important; margin-right:0 !important;}
/* Tablette étroite et mobile : les 3 cartes s'empilent, le texte est toujours visible et le chiffre reste en haut à droite, à la même distance du bord que le texte à gauche */
@media (max-width:900px){
  .distinguish-grid{flex-direction:column; gap:18px;}
  .d-inner{min-height:256px;}
  .d-card, .d-card:hover{flex:none !important; height:auto; min-height:320px; padding:32px !important; opacity:1; transform:none !important; pointer-events:auto !important; background:var(--ink-2);}
  .d-image{display:none;}
  .d-text{width:100%;}
  .d-card .d-hint{display:none;}
  .d-card .d-desc, .d-card:hover .d-desc{max-height:none; opacity:1; margin-top:16px; color:var(--texte-corps);}
  .d-card:hover .d-title{transform:none; color:var(--white);}
  .d-card:hover .d-body{text-align:left;}
  .d-card:hover .d-icon-lottie{transform:none;}
  .d-card:hover .d-icon-lottie path[stroke="rgb(255,255,255)"]{stroke:#ffffff;}
  .d-card:hover .d-icon-lottie path[stroke="rgb(110,193,228)"]{stroke:#6EC1E4;}
  .d-ghost, .d-card:hover .d-ghost{top:24px; left:100%; transform:translateX(-100%); font-size:clamp(96px, 26vw, 140px); -webkit-text-stroke-color:rgba(110,193,228,0.30);}
}
/* dégradé des mots-clés : défile en continu, au repos comme au survol (charte) */
.yc-intro-word.yc-grad{animation:ycWordInG .9s cubic-bezier(.22,1,.36,1) .8s backwards, ycGrad 3.5s linear infinite;}
/* bouton principal : texte toujours blanc, remplissage Or profond au survol ; plus de pulsation ni de flèche qui oscille.
     Sa bordure ne tourne que là où aucun titre ne défile (appel final). */
.hero-cta, .hero-cta.yc-reveal{animation:none;}
.hero-cta.yc-reveal{animation:heroCtaIn .95s cubic-bezier(.22,1,.36,1) .55s backwards;}
.hero .hero-cta::before{animation:none;}
.hero-video-sweep{display:none;}
/* carte des chiffres : légères lignes Bleu nuit */
.stats-card{border-color:rgba(14,42,58,0.18);}
/* avis : la carte active garde sa bordure, fixe ; le défilement automatique suffit comme mouvement */
.tm-slide::before{animation:none;}
/* titre du hero : taille réduite sur mobile pour tenir dans la marge (112 px max. sur mobile selon l'échelle, ici calé sur la largeur) */
.hero .hero-title h1{font-size:clamp(56px, 10.4vw, 150px) !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;}
@media (prefers-reduced-motion: reduce){
  .yc-grad, .yc-intro-word.yc-grad, .yc-badge:hover .yc-badge-text{animation:none !important;}
}
/* ===== RYTHME VERTICAL : un seul espace entre deux blocs = var(--bloc) (168 px ordinateur, 80 px mobile) =====
     Chaque bloc porte l'espace au-dessus de lui et n'en ajoute pas en dessous ; les photos pleine largeur comptent comme un bloc. */
:root{--bloc:168px; --bloc-large:224px; --bloc-photo:96px;}
/* --bloc-photo : écart plus serré entre un bloc et sa photo pleine largeur (le haut de la photo est déjà en fondu) */
@media (max-width:767px){
  :root{--bloc:var(--section); --bloc-large:104px; --bloc-photo:56px;}
}
.trust-section + .yc-sky, .stats-light, .hx-section, .tl-section, .pf-section, .tm-section{padding-top:var(--bloc) !important; padding-bottom:0 !important;}
/* écart plus large autour des blocs chiffres → expertises, outils → portfolio → avis → appel final */
.hx-section, .pf-section, .tm-section{padding-top:var(--bloc-large) !important;}
#contact{padding-top:var(--bloc-large) !important; padding-bottom:var(--bloc) !important;}
.dg-follow{translate:0 var(--ty, 0px);}
@media (prefers-reduced-motion: reduce){
  .dg-follow{translate:none;}
}
.trust-section{padding-top:0;}
/* mobile : la bande des logos commence pile à la fin du hero */
/* ordinateur : respiration de 64 px entre le hero et la bande ; ce vide prolonge le fond du bas du hero (Noir abysse) puis se fond dans le fond continu, sans ligne de raccord */
@media (min-width:768px){
  .trust-section{padding-top:64px; background:linear-gradient(to bottom, var(--ink), rgba(10,13,16,0) 64px);}
}
/* ===== HERO centré dans l'écran (ordinateur et tablette) =====
     Le hero fait la hauteur de l'écran ; titre, texte et bouton sont centrés verticalement, à distance égale des bords haut et bas.
     La taille du titre suit aussi la hauteur de l'écran pour que tout le hero reste visible. Mobile : inchangé. */
@media (min-width:768px){
  /* centré entre le bas de la nav (80 px) et le bas de l'écran : même écart au-dessus du titre et sous le bouton */
  .hero{height:auto !important; min-height:100vh; min-height:100svh; box-sizing:border-box; justify-content:center; padding:78px 0 0;}
  /* 78 = 80 px de nav moins le petit blanc au-dessus des lettres du titre */
  .hero .hero-title{padding-top:0 !important;}
  .hero .hero-body{padding-bottom:0 !important;}
  .hero .hero-title h1{font-size:clamp(56px, min(10.4vw, 16.5vh), 150px) !important;}
  .hero-video-wrap{top:96px; bottom:0; height:auto;}
}
/* ===== BOUTON PRINCIPAL (hero-cta) : bordure or / bleu animée en continu ;
     au survol, le remplissage (même bascule qu'avant) devient le dégradé animé Bleu YC → Or YC et le texte passe en Noir abysse ===== */
.hero-cta::before, .hero .hero-cta::before{animation:badgeSpin 7s linear infinite;}
@media (prefers-reduced-motion: reduce){
  .hero-cta::before, .hero .hero-cta::before, .hero-cta-fill{animation:none !important;}
}
/* ===== HALO BLEU YC : bordure simple (filet 1 px) + halo Bleu YC, même effet partout ===== */
:root{--halo-edge:rgba(110,193,228,0.55); --halo-glow:0 0 42px rgba(110,193,228,0.28), 0 0 90px rgba(110,193,228,0.12);}
/* avis : la carte active porte le halo, les autres un filet discret */
.tm-slide{transition:transform .9s cubic-bezier(.65,0,.35,1), filter .9s cubic-bezier(.65,0,.35,1), opacity .9s ease, box-shadow .8s ease;}
.tm-slide::before{background:rgba(255,255,255,0.10); opacity:1; animation:none; transition:background .8s ease;}
.tm-section .tm-slide.is-active::before{background:var(--halo-edge);}
.tm-section .tm-slide.is-active{box-shadow:0 30px 70px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.05), var(--halo-glow);}
/* Nos expertises : la ligne survolée prend le filet et le halo */
.hx-row{transition:height .8s var(--hx-ease), opacity .45s ease, border-color .45s ease, background-color .45s ease, box-shadow .6s ease;}
.hx-row:not(.is-open):hover{border-color:var(--halo-edge); box-shadow:var(--halo-glow);}
.hx-row.is-open{box-shadow:0 0 42px rgba(110,193,228,0.14), 0 0 90px rgba(110,193,228,0.06);}
/* ligne ouverte : un filet Bleu YC → Or YC fait le tour du contour une seule fois (≈ 1 s), puis reste fixe */
.hx-edge{position:absolute; inset:0; z-index:4; width:100%; height:100%; overflow:visible; pointer-events:none;}
.hx-edge rect{x:.5px; y:.5px; width:calc(100% - 1px); height:calc(100% - 1px); rx:29.5px; ry:29.5px; fill:none; stroke-width:1; stroke-dasharray:100 100; stroke-dashoffset:100; opacity:0; transition:stroke-dashoffset .25s ease, opacity .25s ease;}
.hx-row.is-open .hx-edge rect{stroke-dashoffset:0; opacity:1; transition:stroke-dashoffset 1.1s cubic-bezier(.65,0,.35,1) .1s, opacity .2s ease .1s;}
@media (max-width:900px){
  .hx-edge rect{rx:19.5px; ry:19.5px;}
}
/* ordinateur : la liste garde la hauteur d'une ligne ouverte, rien ne bouge sous le bloc */
@media (min-width:901px) and (max-width:1200px){
  .hx-row.is-open .hx-label, .hx-row.is-open .hx-num{font-size:38px;}
  .hx-visual{width:44%; right:28px;}
  .hx-body{right:calc(44% + 52px);}
  .hx-desc{font-size:15px; line-height:1.6;}
}
@media (min-width:901px) and (hover:hover){
  .hx-list{min-height:calc(3 * 98px + 402px + 3 * 16px);}
}
/* Notre approche : la carte survolée prend le filet et le halo */
.d-card{transition:flex-grow .55s cubic-bezier(.4,.2,.2,1), flex-basis .55s cubic-bezier(.4,.2,.2,1), padding .5s ease, background .45s ease, color .45s ease, opacity .45s ease, transform .55s cubic-bezier(.4,.2,.2,1), box-shadow .6s ease;}
.d-card:hover{box-shadow:inset 0 0 0 1px var(--halo-edge), var(--halo-glow);}
[data-rv="card"]{transform-origin:50% 0;}
.distinguish-grid, .hx-list{perspective:1600px;}
.tm-section.is-ready .tm-head{opacity:1; transform:none;}
/* ===== PHOTO AVANT L'APPEL FINAL — mêmes effets que la photo de la page Services =====
     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 cfPhotoRef. */
.cf-photo{position:relative; z-index:1; height:clamp(420px, 52vw, 720px); margin:96px 0 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%);}
.cf-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);}
.cf-photo.is-in .cf-photo-layer{clip-path:inset(0% 0% round 0px);}
.cf-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;}
.cf-photo.is-in img{opacity:1; transform:scale(1);}
.cf-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;}
.cf-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%);}
.cf-photo.is-in .cf-photo-glow{opacity:1;}
.cf-photo.is-in .cf-photo-glow::before{animation:cfPhotoGlow 16s ease-in-out infinite alternate;}
@keyframes cfPhotoGlow{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);}}
.cf-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){
  .cf-photo{height:340px; margin-top:56px;}
}
@media (prefers-reduced-motion: reduce){
  .cf-photo-layer{clip-path:none; transition:none;}
  .cf-photo img{opacity:1; transform:none; transition:none;}
  .cf-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. */
.cf-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%);}
.cf-photo img{object-position:center 8%;}
/* cadrage haut : l'orateur reste visible, le public en silhouettes fait la transition sombre */
/* ≥ 768 px : la photo est calée pour que le logo de l'appel final passe juste sous les épaules du public.
     Le décalage vertical suit la hauteur du cadre (clamp) et la largeur de l'image (vw) : la ligne des épaules
     (≈ 62 % de la hauteur de l'image d'origine) tombe environ 120 px au-dessus du bas de la photo. */
@media (min-width:768px){
  .cf-photo img{object-position:50% calc(1.14 * clamp(460px, 58vw, 840px) - 120px - 62vw);}
}
.cf-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:calc(-80px - var(--bloc-large));}
/* logo 80 px dans le bas de la photo, comme sur Services */
@media (max-width:767px){
  .cf-photo{height:400px;}
  #contact{margin-top:calc(-16px - var(--bloc-large));}
}
/* ===== LIMITE ENTRE LES BLOCS : PROFONDEUR AU DÉFILEMENT =====
     Chaque grand bloc est un « plan ». Quand un bloc quitte l'écran par le haut, il recule : il descend moins vite
     que la page, se réduit légèrement et s'assombrit. Le bloc suivant, lui, monte un peu plus vite que la page et
     arrive au premier plan. Au passage, les deux plans se croisent : on sent qu'un bloc se termine et qu'un autre commence.
     Mouvement lié uniquement au défilement (rien ne bouge seul). Variables posées par depthRef ; coupé si
     l'utilisateur préfère réduire les animations. */
.dp-sec{transform:var(--dp-tf, none); opacity:var(--dp-o, 1); transform-origin:50% 100%; will-change:transform, opacity;}
@media (prefers-reduced-motion: reduce){
  .dp-sec{transform:none !important; opacity:1 !important;}
}
/* ===== APPEL FINAL AU PREMIER PLAN + PARALLAXE DU HAUT DE LA PHOTO =====
     L'appel final passe toujours au-dessus de la photo (et de tout le reste de la page, sauf la nav).
     La photo défile moins vite que le bloc « Avis » : elle part plus haut, derrière le bas des avis, et rejoint sa place
     exacte au moment où le logo de l'appel final arrive au milieu de l'écran (le bas de la photo reste donc inchangé).
     Décalage --pf posé par cfPhotoRef. */
#contact{z-index:3;}
.tm-section{z-index:2;}
.cf-photo{translate:0 var(--pf, 0px);}
@media (prefers-reduced-motion: reduce){
  .cf-photo{translate:none;}
}
/* La photo ne passe jamais derrière le bloc « Avis » : son haut est rogné (--pc) sous les avis (160 px de fond de page), et un long fondu
     du haut repart de cette nouvelle limite. Dès que les avis sont sortis de l'écran, la photo retrouve toute sa hauteur. */
.cf-photo{
    -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%);}
/* ===== AVIS : grand guillemet en bas à droite de la carte, plus grand ; étoiles sous la marque du client ===== */
.tm-mark{top:auto; bottom:32px; right:36px; width:96px;}
.tm-author .tm-stars{margin:8px 0 0;}
@media (max-width:767px){
  .tm-mark{top:auto; bottom:22px; right:20px; width:64px;}
}
/* ===== PORTFOLIO : descriptions des cartes plus longues (textes d'octobre 2026) — jusqu'à 4 lignes au lieu de 2 au-delà de 767 px,
     pour qu'elles s'affichent en entier (3 lignes suffisent sur ordinateur, 4 vers 768 px). Mobile inchangé (3 lignes). ===== */
@media (min-width:768px){
  .pf-desc{-webkit-line-clamp:4;}
}
/* ===== PORTFOLIO : bouton « En savoir plus » — au survol (et au focus clavier), dégradé YC qui défile, comme le bouton Contact
     de la nav et les mots-clés des titres YC ; texte Noir abysse, sans bordure (padding compensé : même taille). ===== */
.pf-btn:hover, .pf-btn:focus-visible{border:0; padding:13.5px 33.5px; color:#0A0D10; background-color:var(--BleuYC);
    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 2.4s linear infinite;}
@media (prefers-reduced-motion: reduce){
  .pf-btn:hover, .pf-btn:focus-visible{animation:none;}
}
/* ===== AVIS CLIENTS : la rangée de logos tourne comme un carrousel. Le logo de l'avis affiché est toujours au centre ;
     chaque logo lit sa position --to (-3 … 3, posée par tmRef) et sa distance --tao. Bords fondus. ===== */
.tm-tabs{display:block !important; position:relative; height:58px; overflow:hidden !important; padding:0 !important; scroll-snap-type:none !important; --tw:calc((100% - 48px) / 7); --tg:8px;
    -webkit-mask-image:linear-gradient(to right, transparent 0, #000 9%, #000 91%, transparent 100%); mask-image:linear-gradient(to right, transparent 0, #000 9%, #000 91%, transparent 100%);}
.tm-tabs .tm-tab{position:absolute !important; top:0; left:50%; width:var(--tw); height:100%; margin-left:calc(var(--tw) / -2); flex:none !important; box-sizing:border-box;
    transform:translateX(calc(var(--to, 0) * (100% + var(--tg)))) scale(calc(1 - var(--tao, 0) * 0.05)); opacity:calc((1 - var(--tao, 0) * 0.14) * var(--te, 1));
    transition:background .35s ease; will-change:transform, opacity;}
/* le mouvement est calculé image par image (tmRef) */
@media (max-width:1024px){
  .tm-tabs{--tw:132px;}
}
@media (max-width:767px){
  .tm-tabs{height:53px; --tw:34%;}
}
@media (prefers-reduced-motion: reduce){
  .tm-tabs .tm-tab{transition:none;}
}
/* ===== AVIS : les cartes suivent la même position continue que les logos (tmRef, image par image) — v432.
     Plus de transition CSS sur la position : quel que soit l'écart (1, 2 ou 3 avis), tout glisse d'un seul mouvement.
     --se éteint une carte qui s'éloigne au-delà de ±1, pour qu'elle passe d'un bord à l'autre sans être vue. ===== */
.tm-slide{transition:none; opacity:calc((1 - var(--ao) * 0.35) * var(--se, 1)); will-change:transform, opacity, filter;}
.tm-slide.is-far{opacity:calc((1 - var(--ao) * 0.35) * var(--se, 1));}
@media (min-width:2000px){
  .hero{min-height:calc(100svh / var(--xl));}
  .cf-photo img{object-position:50% calc(1.14 * 840px - 120px - 62vw / var(--xl));}
}
/*=====BLOCK=====*/
/* ===== v504 — CORRECTIONS MOBILES (≤ 767 px uniquement : tablette, ordinateur et grands écrans inchangés) ===== */
.m-nt, .m-nt *{transition:none !important;}
/* mesure de la mise en page finale (script), le temps d'une lecture */
@media (max-width:767px){
  /* 1. Hero : la vidéo devient le fond plein cadre du hero, cadrée sur la présentatrice, sous un voile Noir abysse
            plus dense en bas (titre, texte et bouton restent lisibles). Parallaxe coupée sur la vidéo (pas de saccade). */
  .hero-video-wrap{top:0; left:0; right:0; bottom:0; height:auto; -webkit-mask-image:none; mask-image:none;}
  .hero .hero-video-wrap{translate:none;}
  .hero-video{object-position:51% 50%;}
  .hero-video-wrap::after{content:''; position:absolute; inset:0; pointer-events:none;
        background:linear-gradient(180deg, rgba(10,13,16,0.62) 0%, rgba(10,13,16,0.42) 18%, rgba(10,13,16,0.60) 36%, rgba(10,13,16,0.76) 54%, rgba(10,13,16,0.90) 76%, #0A0D10 100%);}
  /* 2. « Ce qui fait la différence » : carte fermée = icône, titre, « Touchez la carte » ; au tap, le texte et l'image
            s'ouvrent SOUS le titre, dans la carte (fond Bleu YC, comme au survol sur ordinateur). Une seule carte ouverte. */
  .d-card{cursor:pointer; -webkit-tap-highlight-color:transparent;}
  .d-card:not(.is-open):hover{box-shadow:none;}
  .d-inner{flex-direction:column; align-items:stretch; gap:0;}
  .d-text{flex:1 0 auto;}
  .d-top{height:calc(clamp(96px, 26vw, 140px) * 0.8 + 32px);}
  /* carte ouverte : le titre reste sous le grand chiffre (01, 02, 03) */
  .d-card .d-hint, .d-card:hover .d-hint{display:flex; max-height:20px; opacity:1; margin-top:12px;}
  .d-card .d-desc, .d-card:hover .d-desc{max-height:0; opacity:0; margin-top:0;}
  .d-image, .d-card:hover .d-image{display:flex; flex:none; align-self:stretch; height:0; margin:0 -32px -32px; opacity:0;
        transition:height .55s cubic-bezier(.22,1,.36,1), margin-top .55s cubic-bezier(.22,1,.36,1), opacity .45s ease .1s;}
  .d-card.is-open, .d-card.is-open:hover{background:var(--accent); box-shadow:inset 0 0 0 1px var(--halo-edge), var(--halo-glow);}
  .d-card.is-open .d-title{color:var(--ink);}
  .d-card.is-open .d-hint{opacity:0; max-height:0; margin-top:0;}
  .d-card.is-open .d-desc{max-height:220px; opacity:1; margin-top:16px; color:var(--bleu-nuit);}
  .d-card.is-open .d-image{height:220px; margin-top:28px; opacity:1;}
  .d-card.is-open .d-image-photo{transform:scale(1);}
  .d-card.is-open .d-icon-lottie path[stroke="rgb(255,255,255)"]{stroke:#0A0D10;}
  .d-card.is-open .d-icon-lottie path[stroke="rgb(110,193,228)"]{stroke:#ffffff;}
  .d-card.is-open .d-ghost{-webkit-text-stroke-color:rgba(10,13,16,0.55);}
  .d-card:focus-visible{outline:2px solid var(--BleuYC); outline-offset:3px;}
  /* 3. Chiffres clés : le compteur est écrit par le script (statsInViewRef) — plus fiable sur mobile que l'animation CSS */
  .stats-light.is-js .stat-num{animation:none !important;}
  .stats-light.is-js .stat-num::after{content:none;}
  /* 5. Avis : la page garde le défilement vertical, le glissement horizontal est pris par le script (tmRef) */
  .tm-stage{touch-action:pan-y;}
}
@media (max-width:767px) and (prefers-reduced-motion: reduce){
  .d-card, .d-card *{transition:none !important;}
}
/*=====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 */
  .hero .hero-title{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;}
  /* avis : plus de flou ni de couche permanente ; les voisins s'effacent par l'opacité et l'échelle (transform + opacity) */
  .tm-glow{animation:none !important; filter:none !important;}
  .tm-slide{filter:none !important; will-change:auto; opacity:calc((1 - var(--ao) * 0.6) * var(--se, 1));}
  .tm-slide.is-far{opacity:calc((1 - var(--ao) * 0.6) * var(--se, 1));}
  .tm-slide.is-off{visibility:hidden;}
  /* au-delà de ±2 : non rendue (taille gardée : pas de saut) */
  .tm-section.is-moving .tm-slide:not(.is-off){will-change:transform, opacity;}
  /* seulement pendant un mouvement */
  /* images de fond en 800 px sur mobile */
  .pf-leboncoin{--bg:url('/assets/img/projets/leboncoin-apercu-800.jpg');}
  .pf-cartier{--bg:url('/assets/img/projets/cartier-apercu-800.jpg');}
  .pf-msa{--bg:url('/assets/img/projets/mon-specialiste-auto-apercu-800.jpg');}
  .pf-kalea{--bg:url('/assets/img/projets/kalea-apercu-800.jpg');}
}
/*=====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 (« audience ») 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){
  .hero .hero-title h1{font-size:min(calc((100vw - 2 * var(--gutter, 24px)) * 0.245), 112px) !important;}
  .hero .hero-body p{font-size:16px !important; line-height:1.7 !important;}
}
/* ===== v516 — Accueil, ruban de logos sur mobile : 30 % plus petit (logos, espacement, vitesse : trustRef ; bande : 92 → 64,4 px) ===== */
@media (max-width:767px){
  .trust-carousel{height:64.4px;}
}

/* ---------- Site : les photos des panneaux du portfolio ne sont chargées qu'à l'approche de la section (classe posée
   par accueil.js) ; sans script, elles se chargent normalement. Aucun changement visible. ---------- */
.js .pf-acc:not(.is-proche) .pf-media{background-image:none;}

/* ---------- Site (version anglaise) : mention « Reviews translated from French » sous le titre des avis (DECISIONS.md § 2) ---------- */
.tm-note{margin:0; font-size:14px; line-height:1.5; letter-spacing:0.02em; color:var(--muted);}