/* =====================================================================================================================
   YC Creations — styles propres à la page À propos (repris de la maquette ; les commentaires vNNN renvoient à ses versions)
   Autre feuille : commun.css (toutes les pages).
   ===================================================================================================================== */
/* 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;}
/* 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;}
@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-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, .ct-grid, .ct-wrap{max-width:none !important; margin-left:0 !important; margin-right:0 !important;}
.ap-manifesto .ap-wrap{max-width:1080px !important;}
.ap-page{display:flex; flex-direction:column;}
.ap-wrap{position:relative; z-index:1; max-width:1240px; margin:0 auto; width:100%;}
.sv-line{display:block; width:fit-content; overflow:hidden; padding-bottom:0.1em; margin-bottom:-0.06em;}
.sv-line .sv-in{display:inline-block;}
.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%);}}
.ap-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;}
/* ---------- HERO : texte à gauche, monogramme YC et scènes en points à droite (.ap-yc : voir plus bas) ---------- */
.ap-hero{position:relative; min-height:100vh; box-sizing:border-box; padding:160px 64px 110px; display:flex; align-items:center;}
.ap-hero-grid{position:relative; z-index:1; display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,0.85fr); gap:clamp(40px, 5vw, 90px); align-items:center; max-width:1240px; margin:0 auto; width:100%;}
.ap-hero-text{display:flex; flex-direction:column; gap:32px; align-items:flex-start;}
.ap-title{font-size:clamp(46px, 5.3vw, 84px); margin:0; white-space:nowrap;}
@media (max-width:700px){
  .ap-title{white-space:normal;}
}
.ap-hero-p{margin:0; font-size:20px; line-height:1.7; color:rgba(255,255,255,0.74); max-width:540px;}
.ap-hero-actions{display:flex; align-items:center; gap:32px; flex-wrap:wrap;}
.ap-hero-vis{display:flex; align-items:center; justify-content:center;}
/* ---------- MANIFESTE : grand texte dont les mots s'allument au fil du scroll ---------- */
.ap-manifesto{position:relative; padding:var(--section) 64px var(--section);}
.ap-mf{margin:0; font-family:'Nohemi',sans-serif; font-weight:300; font-size:clamp(32px, 4vw, 58px); line-height:1.22; letter-spacing:-0.02em;}
.ap-w{color:rgba(255,255,255,0.14); transition:color .5s ease;}
.ap-w.is-lit{color:#fff;}
/* mots clés du mot du fondateur : gradientYC (même dégradé et même défilement que .yc-grad) */
.ap-w.is-hot{font-weight:600; 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;
    -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent; opacity:.18; transition:opacity .6s ease; animation:ycGrad 3.5s linear infinite;}
@media (prefers-reduced-motion: reduce){
  .ap-w.is-hot{animation:none;}
}
.ap-w.is-hot.is-lit{opacity:1;}
/* ---------- HISTOIRE : 4 chapitres alternés, colonne centrale qui se remplit (--sp) ---------- */
/* ===== NOTRE HISTOIRE : cartes qui s'empilent (reprises de la page À propos 2 ; classes a2- gardées) =====
     Bureau : chaque carte reste collée sous la nav, la suivante la recouvre ; celle du dessous recule et s'assombrit (--sc, --br : apStackRef).
     ≤ 1050 px : cartes l'une sous l'autre, sans empilement. */
.a2-story{--a2-out:cubic-bezier(.16,1,.3,1);}
.a2-story h2, .a2-story h3, .a2-story p, .a2-story figure{margin:0;}
.a2-story{position:relative; padding:var(--section) var(--gutter) 0;}
.a2-wrap{max-width:1320px; margin:0 auto;}
.a2-head{display:flex; flex-direction:column; align-items:flex-start; gap:24px; margin-bottom:64px;}
.a2-stack{position:relative;}
.a2-card{position:sticky; top:calc(112px + var(--i) * 24px); height:min(74vh, 660px); min-height:520px; margin-bottom:14vh;}
.a2-card:last-child{margin-bottom:0;}
.a2-card-in{position:relative; height:100%; box-sizing:border-box; display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(32px, 4vw, 72px); align-items:center;
    padding:clamp(32px, 4vw, 64px); border-radius:var(--rayon-l); overflow:hidden; isolation:isolate;
    background:radial-gradient(70% 90% at 100% 0%, rgba(31,110,145,0.18), transparent 70%), linear-gradient(160deg, #151A1F 0%, #0E1318 100%);
    box-shadow:inset 0 0 0 1px rgba(255,255,255,0.08), 0 -30px 80px rgba(0,0,0,0.45);
    transform-origin:50% 0; transform:scale(var(--sc, 1)); filter:brightness(var(--br, 1));}
.a2-txt{display:flex; flex-direction:column; align-items:flex-start; gap:20px; min-width:0;}
.a2-k{display:flex; align-items:center; gap:12px; font-size:12px; font-weight:600; letter-spacing:0.16em; text-transform:uppercase; color:var(--muted);}
.a2-k b{font-family:'Nohemi',sans-serif; font-size:14px; letter-spacing:0.04em; color:var(--GoldYC);}
.a2-k i{width:32px; height:1px; background:linear-gradient(90deg, var(--BleuYC), var(--GoldYC));}
.a2-t{font-family:'Nohemi',sans-serif; font-weight:200; font-size:clamp(40px, 4.4vw, 64px); line-height:1.02; letter-spacing:-0.02em; color:#fff;}
.a2-t .yc-grad{font-weight:700;}
.a2-p{font-size:16px; line-height:1.7; color:var(--texte-corps); max-width:480px;}
.a2-n{position:absolute; left:clamp(24px, 3vw, 48px); bottom:-40px; z-index:-1; font-family:'Nohemi',sans-serif; font-weight:700; font-size:clamp(160px, 18vw, 260px); line-height:1; letter-spacing:-0.05em;
    color:transparent; -webkit-text-stroke:1px rgba(110,193,228,0.12); pointer-events:none;}
.a2-vis{position:relative; height:100%; min-height:0; border-radius:var(--rayon-m); overflow:hidden;}
/* 01 — des milliers de slides */
.a2-mosaic{position:absolute; left:50%; top:50%; width:150%; display:grid; grid-template-columns:repeat(4, 1fr); gap:12px;
    transform:translate(-50%, calc(-50% + var(--sp, 0) * -60px)) rotate(-9deg);}
.a2-mosaic img{display:block; width:100%; aspect-ratio:16/9; object-fit:cover; border-radius:8px; filter:brightness(.55) saturate(.85); box-shadow:0 0 0 1px rgba(255,255,255,0.06);}
.a2-mosaic img:nth-child(3n+1){filter:brightness(.8) saturate(.95);}
.a2-v1::after{content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(10,13,16,0) 30%, rgba(10,13,16,0.92) 100%), radial-gradient(60% 60% at 30% 80%, rgba(10,13,16,0.6), transparent 70%);}
.a2-big{position:absolute; z-index:1; left:32px; bottom:28px; display:flex; flex-direction:column; gap:4px;}
.a2-big b{font-family:'Nohemi',sans-serif; font-weight:700; font-size:clamp(72px, 8vw, 120px); line-height:.9; letter-spacing:-0.04em;}
.a2-big span{font-size:12px; font-weight:600; letter-spacing:0.16em; text-transform:uppercase; color:rgba(255,255,255,0.75);}
/* 02 — naissance du studio : le logo dans son cadre de construction */
.a2-v2{display:flex; align-items:center; justify-content:center; background:radial-gradient(50% 60% at 50% 50%, rgba(110,193,228,0.14), transparent 70%), radial-gradient(40% 40% at 70% 70%, rgba(217,169,79,0.08), transparent 70%);}
.a2-frame{position:absolute; inset:14% 10%; border:1px dashed rgba(217,169,79,0.35); border-radius:4px;}
.a2-frame i{position:absolute; width:14px; height:14px; border-color:var(--GoldYC); border-style:solid; border-width:0;}
.a2-frame i:nth-child(1){left:-7px; top:-7px; border-left-width:1.5px; border-top-width:1.5px;}
.a2-frame i:nth-child(2){right:-7px; top:-7px; border-right-width:1.5px; border-top-width:1.5px;}
.a2-frame i:nth-child(3){left:-7px; bottom:-7px; border-left-width:1.5px; border-bottom-width:1.5px;}
.a2-frame i:nth-child(4){right:-7px; bottom:-7px; border-right-width:1.5px; border-bottom-width:1.5px;}
.a2-frame span{position:absolute; left:0; top:-26px; font-size:11px; font-weight:600; letter-spacing:0.14em; color:rgba(217,169,79,0.85);}
.a2-logo{position:relative; display:flex; align-items:center; gap:24px; clip-path:inset(0 100% 0 0); transition:clip-path 1.6s cubic-bezier(.65,0,.35,1) .2s;}
.a2-logo img{display:block; height:calc(clamp(40px, 4.4vw, 64px) * 780 / 564); width:auto;}
/* logo officiel complet (v468) : le monogramme garde clamp(40px, 4.4vw, 64px) de haut */
.a2-card.is-in .a2-logo{clip-path:inset(-20% -20% -20% -20%);}
/* lignes de construction autour du logo (v467) : cadre fin qui épouse le logo, repères d'angle de 8 px, guides sur le haut et
     le bas des lettres (monogramme, capitales et ligne de base de « Creations »), sur les côtés et sur l'axe (le trait) entre
     YC et Creations ; Bleu YC très léger, sans or (distinct du cadre extérieur). Tracées en ≈ 0,8 s à l'arrivée de la carte, juste
     avant le dévoilement du logo, puis fixes. Positions calculées sur --h, la hauteur du monogramme dans le logo officiel (v468). */
.a2-mark{--h:clamp(40px, 4.4vw, 64px); --m:calc(var(--h) * 0.22); --e:calc(var(--h) * 0.5); --c:rgba(110,193,228,0.22); position:relative;}
.a2-cons{position:absolute; top:0; bottom:0; left:calc(var(--h) * 0.2); right:calc(var(--h) * 0.115); pointer-events:none;}
/* bords du dessin dans le logo officiel (marges transparentes du fichier exclues) */
.a2-cons i{position:absolute; display:block; transition:transform .5s cubic-bezier(.65,0,.35,1) calc(var(--o) * 70ms);}
.a2-gh{left:calc(-1 * (var(--m) + var(--e))); right:calc(-1 * (var(--m) + var(--e))); top:var(--y); height:1px; margin-top:-0.5px; transform:scaleX(0); transform-origin:left;
    background:linear-gradient(90deg, transparent, var(--c) var(--e), var(--c) calc(100% - var(--e)), transparent);}
.a2-gv{top:calc(-1 * (var(--m) + var(--e))); bottom:calc(-1 * (var(--m) + var(--e))); left:var(--x); width:1px; margin-left:-0.5px; transform:scaleY(0); transform-origin:top;
    background:linear-gradient(180deg, transparent, var(--c) var(--e), var(--c) calc(100% - var(--e)), transparent);}
.a2-gd{-webkit-mask:repeating-linear-gradient(90deg, #000 0 3px, transparent 3px 6px); mask:repeating-linear-gradient(90deg, #000 0 3px, transparent 3px 6px);}
.a2-gv.a2-gd{-webkit-mask:repeating-linear-gradient(180deg, #000 0 3px, transparent 3px 6px); mask:repeating-linear-gradient(180deg, #000 0 3px, transparent 3px 6px);}
.a2-cf{position:absolute; inset:calc(-1 * var(--m));}
.a2-cf b{position:absolute; display:block; background:var(--c); transition:transform .2s linear;}
.a2-cf b:nth-child(1){left:0; right:0; top:0; height:1px; transform:scaleX(0); transform-origin:left; transition-delay:.1s;}
.a2-cf b:nth-child(2){top:0; bottom:0; right:0; width:1px; transform:scaleY(0); transform-origin:top; transition-delay:.3s;}
.a2-cf b:nth-child(3){left:0; right:0; bottom:0; height:1px; transform:scaleX(0); transform-origin:right; transition-delay:.4s;}
.a2-cf b:nth-child(4){top:0; bottom:0; left:0; width:1px; transform:scaleY(0); transform-origin:bottom; transition-delay:.6s;}
.a2-cf u{position:absolute; width:8px; height:8px; border:0 solid rgba(110,193,228,0.5); opacity:0; transition:opacity .25s ease .55s;}
.a2-cf u:nth-of-type(1){left:-4px; top:-4px; border-left-width:1px; border-top-width:1px;}
.a2-cf u:nth-of-type(2){right:-4px; top:-4px; border-right-width:1px; border-top-width:1px;}
.a2-cf u:nth-of-type(3){left:-4px; bottom:-4px; border-left-width:1px; border-bottom-width:1px;}
.a2-cf u:nth-of-type(4){right:-4px; bottom:-4px; border-right-width:1px; border-bottom-width:1px;}
.a2-card.is-in .a2-cons i, .a2-card.is-in .a2-cf b{transform:none;}
.a2-card.is-in .a2-cf u{opacity:1;}
.a2-mark .a2-logo{transition-delay:.75s;}
/* 03 — la confiance : logos clients */
.a2-v3{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); grid-auto-rows:1fr; align-content:center;}
.a2-v3 span{position:relative; display:flex; align-items:center; justify-content:center; min-height:96px; padding:16px;
    --k:0; --fa:calc(0.07 + var(--k) * 0.22); box-shadow:inset -1px 0 0 rgba(255,255,255,var(--fa)), inset 0 -1px 0 rgba(255,255,255,var(--fa)); opacity:0; translate:0 16px;
    transition:opacity .8s ease calc(.15s + var(--j) * 70ms), translate 1s var(--a2-out) calc(.15s + var(--j) * 70ms), background .5s ease;}
.a2-v3 span:nth-child(4n){box-shadow:inset 0 -1px 0 rgba(255,255,255,var(--fa));}
.a2-v3 span:nth-child(n+5){box-shadow:inset -1px 0 0 rgba(255,255,255,var(--fa));}
.a2-v3 span:nth-child(8){box-shadow:none;}
.a2-card.is-in .a2-v3 span{opacity:1; translate:0 0;}
.a2-v3 img{max-width:76%; max-height:var(--lh, 34px); width:auto; height:auto; filter:brightness(0) invert(1); opacity:calc(.6 + var(--k) * .4); transform:scale(calc(1 + var(--k) * .06)); transition:opacity .4s ease, transform .6s var(--a2-out);}
/* v473 : même lumière que « Portfolio – Nos clients » : un faisceau (--lx, --ly, posé par apStackRef) suit la souris avec inertie
     ou dérive seul ; les logos proches s'éclairent et grandissent (--k), les filets s'éclairent, un éclat Or au croisement.
     La lumière s'estompe avant les bords de la carte (masque). */
.a2-v3{--lx:50%; --ly:50%;}
.a2-v3::before{content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
    background:radial-gradient(260px circle at var(--lx) var(--ly), rgba(110,193,228,0.15), rgba(110,193,228,0.06) 35%, rgba(217,169,79,0.035) 55%, transparent 100%);
    -webkit-mask-image:linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent), linear-gradient(180deg, transparent, #000 14%, #000 86%, transparent); -webkit-mask-composite:source-in;
    mask-image:linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent), linear-gradient(180deg, transparent, #000 14%, #000 86%, transparent); mask-composite:intersect;}
.a2-v3 span::after{content:''; position:absolute; right:-3px; bottom:-3px; width:5px; height:5px; border-radius:50%; background:var(--GoldYC); opacity:calc(var(--k) * 0.8); box-shadow:0 0 12px rgba(217,169,79,0.7); pointer-events:none; display:none;}
.a2-v3 span:nth-child(-n+3)::after{display:block;}
.a2-v3 span:hover{background:radial-gradient(60% 60% at 50% 50%, rgba(110,193,228,0.10), transparent 75%);}
.a2-v3 span:hover img{opacity:1; transform:scale(1.06);}
/* 04 — un duo */
.a2-v4{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:32px;}
.a2-duo{display:flex; align-items:flex-start; justify-content:center; gap:clamp(24px, 4vw, 64px);}
.a2-duo figure{display:flex; flex-direction:column; align-items:center; gap:16px; text-align:center; opacity:0; translate:0 24px; transition:opacity .9s ease, translate 1.1s var(--a2-out);}
.a2-duo figure:nth-child(2){transition-delay:.15s;}
.a2-card.is-in .a2-duo figure{opacity:1; translate:0 0;}
.a2-duo .a2-face{width:clamp(112px, 11vw, 160px); height:clamp(112px, 11vw, 160px); padding:3px;}
.a2-duo figcaption{display:flex; flex-direction:column; gap:6px;}
.a2-duo b{font-family:'Nohemi',sans-serif; font-weight:300; font-size:24px; color:#fff;}
.a2-duo small{font-size:14px; color:var(--muted);}
.a2-pil{display:flex; align-items:center; gap:16px; font-family:'Nohemi',sans-serif; font-size:14px; font-weight:600; letter-spacing:0.16em; text-transform:uppercase; color:rgba(255,255,255,0.85);}
.a2-pil i{width:24px; height:1px; background:linear-gradient(90deg, var(--BleuYC), var(--GoldYC));}
.a2-link{display:inline-flex; align-items:center; gap:10px; font-size:14px; font-weight:600; letter-spacing:0.08em; text-transform:uppercase; color:var(--BleuYC); text-decoration:none; position:relative; padding-bottom:6px; transition:color .3s ease;}
.a2-link:hover, .a2-link:focus-visible{color:#fff;}
/* v489 : liens texte en capitales Bleu YC avec flèche (.a2-link) — trait du survol en dégradé YC animé, qui se dessine de gauche à droite */
.a2-link::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);}
.a2-link:hover::after, .a2-link:focus-visible::after{transform:scaleX(1);}
@media (prefers-reduced-motion: reduce){
  .a2-link::after{animation:none; transition:none;}
}
.a2-link svg{width:16px; height:16px; transition:transform .45s var(--a2-out); flex-shrink:0;}
.a2-link:hover svg{transform:translateX(4px);}
.a2-face{position:relative; width:72px; height:72px; border-radius:50%; padding:2px; background:linear-gradient(135deg, var(--BleuYC), var(--GoldYC)); flex:none;}
.a2-face img{display:block; width:100%; height:100%; border-radius:50%; object-fit:cover; background:#151A1F;}
.a2-story + .ap-values{padding-top:0;}
@media (max-height:780px) and (min-width:1051px){
  .a2-card{min-height:480px;}
  .a2-p{font-size:15px; line-height:1.6;}
}
@media (max-width:1050px){
  .a2-card{position:relative; top:auto; height:auto; min-height:0; margin-bottom:24px;}
  .a2-card-in{grid-template-columns:1fr; transform:none; filter:none;}
  .a2-vis{height:auto; aspect-ratio:16/10;}
  .a2-v3{aspect-ratio:auto;}
  .a2-v4{aspect-ratio:auto; padding:24px 0;}
}
@media (max-width:767px){
  .a2-v3{grid-template-columns:repeat(2, minmax(0,1fr));}
  .a2-v3 span, .a2-v3 span:nth-child(n){box-shadow:inset -1px 0 0 rgba(255,255,255,var(--fa)), inset 0 -1px 0 rgba(255,255,255,var(--fa));}
  .a2-v3 span:nth-child(2n){box-shadow:inset 0 -1px 0 rgba(255,255,255,var(--fa));}
  .a2-v3 span::after, .a2-v3 span:nth-child(-n+3)::after{display:none;}
  .a2-v3 span:nth-child(odd):nth-child(-n+5)::after{display:block;}
  .a2-big{left:20px; bottom:16px;}
  .a2-pil{gap:8px; font-size:11px; letter-spacing:0.12em;}
  .a2-pil i{width:12px;}
  .a2-mark{--m:4px; --e:8px;}
}
@media (prefers-reduced-motion: reduce){
  .a2-logo, .a2-v3 span, .a2-duo figure, .a2-cons i, .a2-cf b, .a2-cf u{transition:none !important;}
  .a2-card-in{transform:none !important; filter:none !important;}
}
/* ---------- VALEURS : 4 cartes, chacune appuyée par les mots d'un client ---------- */
.ap-values{position:relative; padding:40px 64px 150px;}
/* ---------- Responsive ---------- */
@media (max-width:1050px){
  .ap-hero-grid{grid-template-columns:1fr;}
}
@media (max-width:640px){
  .ap-hero{padding:140px 22px 80px; min-height:0;}
  .ap-manifesto{padding:100px 22px 90px;}
  .ap-values{padding-left:22px; padding-right:22px;}
}
@media (prefers-reduced-motion: reduce){
  .sv-in, .sv-line .sv-in{animation:none !important;}
  .ap-w{color:#fff;}
  .ap-w.is-hot{opacity:1;}
}
.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-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, .ct-grid, .ct-wrap{max-width:none !important; margin-left:0 !important; margin-right:0 !important;}
.ap-manifesto .ap-wrap{max-width:1080px !important;}
/* ===== HERO CENTRÉ (≥ 768 px) — même règle que l'Accueil =====
     Le hero fait la hauteur de l'écran ; son contenu est centré entre le bas de la nav (80 px) et le bas de l'écran :
     même écart au-dessus du contenu qu'en dessous. Mobile inchangé. */
@media (min-width:768px){
  .ap-hero{min-height:100vh; min-height:100svh; box-sizing:border-box; padding-top:80px; padding-bottom:0;}
}
/* ===== PHOTO AVANT L'APPEL FINAL — mêmes effets que les photos des pages Services et Portfolio =====
     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 poPhotoRef. */
.ap-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%);}
.ap-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);}
.ap-photo.is-in .ap-photo-layer{clip-path:inset(0% 0% round 0px);}
.ap-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;}
.ap-photo.is-in img{opacity:1; transform:scale(1);}
.ap-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;}
.ap-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%);}
.ap-photo.is-in .ap-photo-glow{opacity:1;}
.ap-photo.is-in .ap-photo-glow::before{animation:apPhotoGlow 16s ease-in-out infinite alternate;}
@keyframes apPhotoGlow{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);}}
.ap-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){
  .ap-photo{height:340px; margin-top:56px;}
}
@media (prefers-reduced-motion: reduce){
  .ap-photo-layer{clip-path:none; transition:none;}
  .ap-photo img{opacity:1; transform:none; transition:none;}
  .ap-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. */
.ap-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%);}
.ap-photo img{object-position:center 28%;}
/* photo fond55 : cadrage plus haut que Services / Portfolio, les deux silhouettes devant le mur d'idées restent entières */
.ap-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%);}
.ap-values{padding-bottom:0 !important;}
#contact{margin-top:-208px;}
@media (max-width:767px){
  .ap-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;}
.ap-values{z-index:2;}
.ap-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){
  .ap-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 de la table, sous les deux silhouettes, ligne ≈ 878 px sur 1254), quelle que soit la largeur ; même calcul que la page d'accueil. */
@media (min-width:768px){
  .ap-photo img{object-position:50% calc(1.14 * clamp(460px, 58vw, 840px) - 120px - 70vw);}
}
/* =====================================================================
     À PROPOS v2
     ===================================================================== */
/* ----- HERO « LE SOUFFLE YC » (v466) -----
     Toile (.ap-yc-pts, WebGL : tous les points en une passe ; repli 2D) dans la colonne de droite, jamais sous le texte.
     Quelques milliers de points Bleu YC / Or YC (touches de Ciel et de Champagne), toujours vivants : ils circulent à
     l'intérieur des formes sans les brouiller. Un souffle en spirale les rassemble sur le monogramme YC (masque _ycMask),
     une vague de lumière le traverse, puis ils racontent nos 4 services (01 Présentations sur mesure, 02 Chartes graphiques
     & templates, 03 Animations et transitions Morph, 04 Formations PowerPoint) avant de revenir au logo.
     Boucle d'environ 23 s (18 s sur mobile, v473), sans coupure. Légende sous l'illustration (.ap-yc-cap : numéro Or + nom du
     service), aucun point devant elle. Souris : les points s'écartent autour du curseur. Défilement : l'animation
     s'estompe. Piloté par apRef. Réduire les animations : monogramme de points, immobile. */
.ap-yc{--w:clamp(300px, 36vw, 540px); position:relative; width:var(--w); max-width:100%; aspect-ratio:1 / 1;}
.ap-yc-pts{position:absolute; inset:0; width:100%; height:100%; display:block; pointer-events:none;}
/* v489 : lueur Or YC de l'entrée (naît au centre, grandit, puis s'éteint pendant que les points en jaillissent ; pilotée par apRef) */
.ap-yc-glow{position:absolute; left:50%; top:48%; width:26%; aspect-ratio:1; margin:-13% 0 0 -13%; border-radius:50%; pointer-events:none; opacity:0;
    background:radial-gradient(closest-side, rgba(246,226,182,0.95) 0%, rgba(217,169,79,0.55) 28%, rgba(217,169,79,0.18) 60%, rgba(217,169,79,0) 100%); will-change:transform, opacity;}
@media (prefers-reduced-motion: reduce){
  .ap-yc-glow{display:none;}
}
.ap-yc-cap{position:absolute; left:0; right:0; bottom:3%; margin:0; display:flex; justify-content:center; align-items:baseline; gap:12px;
    font-family:'Nohemi','Plus Jakarta Sans',sans-serif; line-height:1.2; opacity:0; pointer-events:none; white-space:nowrap; will-change:opacity, transform;}
.ap-yc-n{font-weight:500; font-size:14px; letter-spacing:0.08em; color:#D9A94F;}
.ap-yc-t{font-weight:300; font-size:20px; letter-spacing:0.005em; color:#fff;}
/* tablette (768–1050 px) : le monogramme reste à droite du texte, plus petit ; mobile (≤ 767 px) : sous le texte */
@media (min-width:768px) and (max-width:1050px){
  .ap-hero-grid{grid-template-columns:minmax(0,1.35fr) minmax(0,0.65fr);}
  .ap-yc{--w:min(290px, 100%);}
  .ap-yc-cap{gap:8px;}
  .ap-yc-n{font-size:12px;}
  .ap-yc-t{font-size:15px;}
}
@media (max-width:767px){
  .ap-yc{--w:min(340px, 100%);}
  .ap-hero-vis{margin-top:8px;}
  .ap-yc-cap{gap:10px;}
  .ap-yc-n{font-size:13px;}
  .ap-yc-t{font-size:16px;}
}
/* ----- HERO : sans le lien « Voir nos réalisations », le bouton reste seul ----- */
.ap-hero-actions{gap:0;}
/* ----- MOT DU FONDATEUR : même effet (les mots s'allument au fil du défilement), groupes clés soulignés en dégradé,
     signature (photo de Yassine, v460) qui apparaît quand la citation est entièrement lue ----- */
.ap-manifesto .ap-wrap.ap-mf-wrap{max-width:1320px !important;}
.ap-quote{margin:0; display:grid; grid-template-columns:minmax(0,1fr); gap:48px; align-items:start;}
.ap-quote .ap-mf{max-width:1000px;}
/* taille calée sur la hauteur d'écran : badge, citation et signature tiennent ensemble à l'écran */
.ap-quote .ap-mf{font-size:clamp(24px, min(3.4vw, 5.2svh), 50px);}
.ap-hl{padding-bottom:.06em; background:linear-gradient(90deg, var(--BleuYC), #F1DDB0, var(--GoldYC)) no-repeat 0 100% / 0% 2px; -webkit-box-decoration-break:clone; box-decoration-break:clone;
    transition:background-size 1.1s cubic-bezier(.22,1,.36,1) .15s;}
.ap-hl.is-lit{background-size:100% 2px;}
/* signature : discrète, sous la citation — portrait rond (fin filet Bleu YC → Or YC), filet vertical, nom, fonction et logo.
     Le portrait apparaît en fondu avec un léger agrandissement (0,92 → 1), puis le nom et la fonction (v460). */
.ap-mf-badge{margin-bottom:34px;}
.ap-sign{display:flex; flex-direction:row; align-items:center; gap:24px;}
.ap-sign-img{display:block; flex:none; box-sizing:border-box; width:88px; height:88px; padding:1.5px; border-radius:50%; object-fit:cover;
    background:linear-gradient(135deg, rgba(110,193,228,0.55), rgba(217,169,79,0.45));
    opacity:0; transform:scale(.92); transition:opacity .9s ease, transform 1.1s cubic-bezier(.22,1,.36,1);}
.ap-quote.is-signed .ap-sign-img{opacity:1; transform:none;}
.ap-sign-t{display:flex; flex-direction:column; gap:4px; padding-left:24px; border-left:1px solid rgba(255,255,255,0.16); opacity:0; transform:translateY(8px); transition:opacity .6s ease .45s, transform .6s cubic-bezier(.22,1,.36,1) .45s;}
.ap-quote.is-signed .ap-sign-t{opacity:1; transform:none;}
.ap-sign-t b{font-family:'Nohemi',sans-serif; font-weight:500; font-size:16px; color:#fff;}
.ap-sign-t span{font-size:12px; letter-spacing:0.16em; text-transform:uppercase; font-weight:600; color:var(--muted);}
/* « Fondateur et CEO », puis le logo YC Creations (mêmes images que la nav) */
.ap-sign-t .ap-sign-role{display:flex; flex-direction:column; align-items:flex-start; gap:8px;}
.ap-sign-t .ap-sign-logo{display:inline-flex; align-items:center;}
.ap-sign-logo img{display:block; height:18px; width:auto;}
@media (max-width:900px){
  .ap-quote{gap:40px;}
  .ap-sign{gap:18px;}
  .ap-sign-img{width:72px; height:72px;}
  .ap-sign-t{padding-left:18px;}
}
@media (prefers-reduced-motion: reduce){
  .ap-hl{background-size:100% 2px; transition:none;}
  .ap-sign-img{opacity:1; transform:none; transition:none;}
  .ap-sign-t{opacity:1; transform:none; transition:none;}
}
/* ===== HERO : TITRE À L'ÉCHELLE « titre-hero » DE LA CHARTE (comme Services, Portfolio, Packs) =====
     112 px au plus, 56 px au moins. Trois lignes courtes (« Derrière / chaque slide, / une intention ») : le titre tient
     dans la colonne de gauche, à côté de l'animation, comme dans la mise en page d'origine du hero. */
.ap-title{font-size:clamp(56px, 7.4vw, 112px);}
/* « Découvrez notre histoire » mène au mot du fondateur (défilement doux, décalé sous la nav) */
#mot-du-fondateur{scroll-margin-top:96px;}
@media (min-width:2000px){
  .ap-hero{min-height:calc(100svh / var(--xl));}
  .a2-card{height:min(74vh / var(--xl), 660px); margin-bottom:calc(14vh / var(--xl));}
  .ap-photo img{object-position:50% calc(1.14 * 840px - 120px - 70vw / var(--xl));}
}
/* ===== v504 — À PROPOS MOBILE (≤ 767 px) : les 4 cartes de « Notre histoire » ont exactement la même hauteur =====
     Carte 03 : sans les logos TPAC et Mon Spécialiste Auto, grille resserrée. Hauteur commune = celle de la plus grande carte
     (grille à rangées égales, recalculée par le navigateur à chaque largeur ; rien ne change pour l'empilement apStackRef). */
@media (max-width:767px){
  .a2-stack{display:grid; grid-auto-rows:1fr; row-gap:24px;}
  .a2-stack > .a2-card{margin-bottom:0;}
  .a2-stack .a2-card-in{align-content:space-between;}
  /* la hauteur en plus va entre le texte (en haut) et le visuel (en bas) */
  .a2-v3 span:nth-child(6), .a2-v3 span:nth-child(7){display:none;}
  .a2-v3 span:nth-child(5)::after{display:none !important;}
  .a2-v3 span{min-height:50px; padding:10px 12px;}
}
/*=====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 */
  .ap-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 (« une intention ») 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.ap-title{font-size:min(calc((100vw - 2 * var(--gutter, 24px)) * 0.1643), 112px) !important;}
  p.ap-hero-p{font-size:16px !important; line-height:1.7 !important;}
}
/*=====BLOCK=====*/
/* ===== v514 — « Notre histoire » sur grand écran (remplace v513) =====
     Les cartes gardent leur largeur d'origine (.a2-wrap centré, 1 320 px max). Au-delà de 1 448 px, là où le bloc ne va plus
     d'une marge à l'autre, le badge et le titre sont centrés au-dessus des cartes (exception « titres centrés » de la règle
     des marges) : plus de titre calé sur un bord de carte flottant au milieu de l'écran. Jusqu'à 1 448 px : inchangé. */
@media (min-width:1449px){
  .a2-head{align-items:center; text-align:center;}
  .a2-head > .yc-badge{align-self:center;}
}
/*=====BLOCK=====*/
/* v525 — mots-clés du duo : « Direction artistique » ne se coupe pas */
.a2-pil > span{white-space:nowrap;}
/* sous 480 px, la rangée ne tient plus sur une ligne lisible : les trois mots s'empilent, centrés, séparés par le même filet */
@media (max-width:479px){
  .a2-pil{flex-direction:column; gap:10px; font-size:12px;}
  .a2-pil i{width:24px;}
}