/* =====================================================================================================================
   YC Creations — styles propres à la page Portfolio (repris de la maquette ; les commentaires vNNN renvoient à ses versions)
   Autres feuilles : commun.css (toutes les pages), fenetre-projet.css (fenêtres projet).
   ===================================================================================================================== */
/* 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-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;}
.po-page{display:flex; flex-direction:column;}
.po-wrap{position:relative; z-index:1; max-width:1320px; margin:0 auto; width:100%;}
.po-lead{font-size:16px; line-height:1.75; color:rgba(255,255,255,0.68); margin:0; max-width:520px;}
/* entrées : le hero monte en cascade (--d), le titre sort de derrière sa ligne ; le reste se révèle au scroll (.rv) */
.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%);}}
.po-hero-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;}
.po-page.po-ready .rv{opacity:0; transform:translateY(40px); filter:blur(6px);}
.po-page.po-ready .rv.is-in{opacity:1; transform:none; filter:none; transition:opacity .9s ease calc(var(--d, 0) * .12s), transform 1.1s cubic-bezier(.22,1,.36,1) calc(var(--d, 0) * .12s), filter .9s ease calc(var(--d, 0) * .12s);}
/* ---------- HERO : texte à gauche, mur de slides réelles en 3D qui défile à droite ---------- */
.po-hero{position:relative; overflow:clip; min-height:100vh; box-sizing:border-box; padding:170px 64px 150px; display:flex; align-items:center;}
.po-hero-grid{position:relative; z-index:2; max-width:1320px; margin:0 auto; width:100%;}
.po-hero-text{display:flex; flex-direction:column; gap:32px; align-items:flex-start; max-width:600px;}
.po-hero-title{font-size:clamp(56px, 7.4vw, 112px); margin:0; white-space:nowrap;}
.po-hero-title br{display:none;}
.po-hero-p{font-size:20px; line-height:1.7; color:rgba(255,255,255,0.74); margin:0; max-width:500px;}
.po-hero-actions{display:flex; align-items:center; gap:32px; flex-wrap:wrap;}
/* chiffres clés : même style que la page Services (.s2-stats / .s2-stat), v475 */
.po-hero-stats{display:flex; width:100%; max-width:520px; margin-top:24px; padding-top:24px; border-top:1px solid var(--line);}
.po-hero-stats > div{flex:1; min-width:0; padding-right:24px;}
.po-hero-stats > div + div{padding-left:24px; border-left:1px solid var(--line);}
.po-hero-stats b{display:block; font-family:'Nohemi',sans-serif; font-weight:300; font-size:32px; line-height:1; color:#fff; font-variant-numeric:tabular-nums;}
.po-hero-stats b i{font-style:normal; color:var(--BleuYC);}
.po-hero-stats span{display:block; margin-top:8px; font-size:14px; color:var(--muted);}
@media (max-width:767px){
  .po-hero-stats > div{padding-right:12px;}
  .po-hero-stats > div + div{padding-left:12px;}
  .po-hero-stats b{font-size:24px;}
  .po-hero-stats span{font-size:12px;}
}
/* le mur : 3 colonnes de slides qui défilent en sens alternés, inclinées ; il suit légèrement la souris (--px/--py, poRef) */
.po-wall{position:absolute; z-index:1; top:0; bottom:0; right:-8%; width:66%; perspective:1800px; pointer-events:none;
    -webkit-mask-image:linear-gradient(90deg, transparent 0%, #000 30%, #000 88%, transparent 100%), linear-gradient(180deg, transparent 0%, #000 14%, #000 80%, transparent 100%);
    -webkit-mask-composite:source-in; mask-image:linear-gradient(90deg, transparent 0%, #000 30%, #000 88%, transparent 100%), linear-gradient(180deg, transparent 0%, #000 14%, #000 80%, transparent 100%); mask-composite:intersect;}
.po-wall-in{position:absolute; inset:0; display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:24px; transform-style:preserve-3d;
    transform:rotateX(calc(22deg - var(--py, 0) * 5deg)) rotateY(calc(-14deg + var(--px, 0) * 7deg)) rotateZ(9deg) scale(1.08) translateY(calc(var(--sy, 0) * -1px));}
.po-col{display:flex; flex-direction:column; gap:24px; animation:poScroll 96.25s linear infinite; will-change:transform;}
.po-col.c1{animation-direction:reverse; animation-duration:130.67s; margin-top:-140px;}
.po-col.c2{animation-duration:93s; margin-top:-60px;}
@keyframes poScroll{to{transform:translateY(calc(-50% - 11px));}}
.po-tile{position:relative; display:block; width:100%; aspect-ratio:16/9; padding:0; border:0; border-radius:var(--rayon-s); overflow:hidden; background:#10161d; cursor:pointer; pointer-events:auto;
    box-shadow:0 30px 60px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.06); transition:transform .6s cubic-bezier(.22,1,.36,1), box-shadow .6s ease, filter .6s ease; filter:saturate(.9) brightness(.82);}
.po-tile img{width:100%; height:100%; object-fit:cover; display:block;}
.po-tile:hover{transform:translateZ(40px) scale(1.04); filter:none; box-shadow:0 40px 80px rgba(0,0,0,0.6), 0 0 0 1px rgba(110,193,228,0.7), 0 0 40px rgba(110,193,228,0.25);}
.po-wall:hover .po-col{animation-play-state:paused;}
/* voile à gauche pour garder le texte parfaitement lisible */
.po-hero::after{content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
    background:linear-gradient(180deg, transparent 48%, rgba(10,13,16,0.35) 66%, rgba(10,13,16,0.72) 82%, rgba(10,13,16,0.94) 94%, #0A0D10 100%), linear-gradient(90deg, rgba(10,13,16,0.92) 0%, rgba(10,13,16,0.6) 34%, transparent 58%);}
/* ---------- TOUS LES PROJETS ---------- */
.po-index{position:relative; padding:150px 64px 160px; scroll-margin-top:40px;}
.po-index-head{display:flex; align-items:flex-end; justify-content:space-between; gap:48px;}
.po-total{display:flex; align-items:flex-end; gap:16px;}
.po-total-v{font-family:'Nohemi',sans-serif; font-weight:200; font-size:clamp(72px, 8vw, 120px); line-height:.8; letter-spacing:-0.04em; color:transparent; -webkit-text-stroke:1px rgba(110,193,228,0.55); display:inline-block;}
.po-total-v.is-flip{animation:poFlip .6s cubic-bezier(.22,1,.36,1);}
@keyframes poFlip{from{opacity:0; transform:translateY(30%); filter:blur(6px);}}
.po-total-l{font-size:12px; letter-spacing:0.16em; text-transform:uppercase; color:var(--muted); line-height:1.6; padding-bottom:4px;}
/* barre de contrôle : filtres + choix de l'affichage, pastille qui glisse sous le bouton actif (--ix/--iw, poRef) */
.po-ctrl{display:flex; align-items:center; justify-content:space-between; gap:24px; margin:64px 0 34px;}
.po-seg-ctl{position:relative; display:flex; gap:2px; padding:6px; border-radius:999px; background:rgba(255,255,255,0.035); border:1px solid rgba(255,255,255,0.08); backdrop-filter:blur(10px);}
.po-ind{position:absolute; z-index:0; top:6px; bottom:6px; left:0; width:var(--iw, 0px); transform:translateX(var(--ix, 6px)); border-radius:999px;
    background:linear-gradient(100deg, var(--BleuYC), #A9DAEF); box-shadow:0 8px 26px rgba(110,193,228,0.35);
    transition:transform .6s cubic-bezier(.22,1,.36,1), width .6s cubic-bezier(.22,1,.36,1);}
.po-f, .po-v{position:relative; z-index:1; display:inline-flex; align-items:center; gap:8px; padding:11px 20px; border:0; border-radius:999px; background:none; cursor:pointer;
    font-family:'Plus Jakarta Sans',sans-serif; font-weight:500; font-size:14px; color:rgba(255,255,255,0.66); transition:color .45s ease;}
.po-f:hover, .po-v:hover{color:#fff;}
.po-f sup{font-family:'Nohemi',sans-serif; font-weight:600; font-size:12px; color:var(--BleuYC); transition:color .45s ease; top:-0.5em;}
.po-f.is-on, .po-v.is-on{color:#0A0D10;}
.po-f.is-on sup{color:rgba(10,13,16,0.55);}
.po-v svg{width:17px; height:17px; flex-shrink:0;}
/* affichage liste : grandes lignes typographiques ; au survol le nom glisse et se remplit du dégradé YC */
.po-views-wrap[data-view="list"] .po-grid, .po-views-wrap[data-view="grid"] .po-list{display:none;}
.po-views-wrap.is-swap > *{animation:poSwap .8s cubic-bezier(.22,1,.36,1);}
@keyframes poSwap{from{opacity:0; transform:translateY(30px);}}
.po-list{border-top:1px solid rgba(255,255,255,0.08);}
.po-row{position:relative; display:grid; grid-template-columns:72px minmax(0,1fr) minmax(0,320px) 58px; align-items:center; gap:32px; padding:30px 8px; border-bottom:1px solid rgba(255,255,255,0.08); cursor:pointer; outline:none; transition:opacity .5s ease;}
.po-row::after{content:''; position:absolute; left:0; right:0; bottom:-1px; height:1px; background:linear-gradient(90deg, var(--BleuYC), var(--GoldYC) 60%, transparent); transform:scaleX(0); transform-origin:left; transition:transform .9s cubic-bezier(.22,1,.36,1);}
.po-row-n{font-family:'Nohemi',sans-serif; font-weight:600; font-size:14px; letter-spacing:0.08em; color:var(--muted); transition:color .5s ease;}
.po-row-name{display:block; min-width:0; transition:transform .8s cubic-bezier(.22,1,.36,1);}
.po-nm{position:relative; display:inline-block; font-family:'Nohemi',sans-serif; font-weight:200; font-size:clamp(40px, 5.2vw, 80px); line-height:1.05; letter-spacing:-0.03em; color:#fff; white-space:normal; text-wrap:balance;}
/* v489 : un nom trop long passe sur 2 lignes équilibrées (Kalea Digital & Formation) */
.po-nm::after{content:attr(data-t); position:absolute; inset:0; white-space:inherit; text-wrap:balance; background:linear-gradient(90deg, var(--BleuYC), #F1DDB0 45%, var(--GoldYC) 60%, var(--BleuYC)); background-size:200% 100%;
    -webkit-background-clip:text; background-clip:text; color:transparent; clip-path:inset(0 100% 0 0); transition:clip-path .9s cubic-bezier(.22,1,.36,1); animation:ycGrad 3.5s linear infinite;}
.po-row-meta{display:flex; flex-direction:column; gap:8px; align-items:flex-start;}
.po-row-cat{font-size:14px; line-height:1.5; color:rgba(255,255,255,0.72);}
.po-row-tags, .po-tags{display:flex; flex-wrap:wrap; gap:8px;}
.po-row-tags span, .po-tags span{font-size:12px; letter-spacing:0.04em; padding:5px 11px; border-radius:999px; color:rgba(255,255,255,0.7); border:1px solid rgba(255,255,255,0.12); background:rgba(255,255,255,0.03);}
.po-row-go{width:58px; height:58px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; border:1px solid rgba(255,255,255,0.16);
    transition:background .5s ease, border-color .5s ease, color .5s ease, transform .7s cubic-bezier(.22,1,.36,1); flex-shrink:0; aspect-ratio:1;}
.po-row-go svg{width:20px; height:20px; transform:rotate(-45deg); transition:transform .7s cubic-bezier(.22,1,.36,1); flex-shrink:0;}
.po-row:hover::after, .po-row:focus-visible::after{transform:scaleX(1);}
.po-row:hover .po-row-name, .po-row:focus-visible .po-row-name{transform:translateX(26px);}
.po-row:hover .po-nm::after, .po-row:focus-visible .po-nm::after{clip-path:inset(0 0 0 0);}
.po-row:hover .po-row-n, .po-row:focus-visible .po-row-n{color:var(--BleuYC);}
.po-row-go{position:relative;}
/* au survol, le rond devient un anneau en dégradé YC qui défile (même dégradé que la ligne du nom) */
.po-row-go::before{content:''; position:absolute; inset:-1px; border-radius:50%; padding:1.5px; pointer-events:none; opacity:0; transition:opacity .5s ease;
    background:linear-gradient(90deg, var(--BleuYC) 0%, #A9DAEF 18%, #F1DDB0 32%, var(--GoldYC) 50%, #F1DDB0 68%, #A9DAEF 82%, var(--BleuYC) 100%); background-size:200% 100%;
    -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);}
.po-row:hover .po-row-go, .po-row:focus-visible .po-row-go{border-color:transparent; color:#fff; transform:scale(1.08); box-shadow:0 0 22px rgba(110,193,228,0.18);}
.po-row:hover .po-row-go::before, .po-row:focus-visible .po-row-go::before{opacity:1; animation:ycGrad 3.5s linear infinite;}
@media (prefers-reduced-motion: reduce){
  .po-row-go::before{animation:none !important;}
}
.po-row:hover .po-row-go svg, .po-row:focus-visible .po-row-go svg{transform:rotate(0);}
@media (hover:hover){
  .po-list:hover .po-row:not(:hover){opacity:.35;}
}
/* filtrage : sortie rapide, entrée en cascade (--k) */
.po-row.is-out, .po-card.is-out{display:none;}
.po-row.is-leave, .po-card.is-leave{opacity:0 !important; transform:translateX(-24px); transition:opacity .28s ease, transform .28s ease;}
.po-card.is-leave{transform:scale(.94);}
.po-row.is-enter, .po-card.is-enter{animation:poIn .8s cubic-bezier(.22,1,.36,1) calc(var(--k, 0) * 70ms) backwards;}
@keyframes poIn{from{opacity:0; transform:translateY(34px);}}
/* aperçu flottant qui suit la souris sur la liste (les slides du projet défilent dedans) */
.po-peek{position:fixed; left:0; top:0; z-index:30; width:400px; aspect-ratio:16/9; pointer-events:none; visibility:hidden;
    transform:translate3d(var(--x, 0px), var(--y, 0px), 0) translate(-50%, -50%) rotate(var(--r, 0deg));}
.po-peek.is-ready{visibility:visible;}
.po-peek-in{position:absolute; inset:0; border-radius:var(--rayon-m); overflow:hidden; background:#0f151c; clip-path:inset(50% 50% 50% 50% round 16px);
    box-shadow:0 40px 80px rgba(0,0,0,0.55); transition:clip-path .7s cubic-bezier(.22,1,.36,1);}
.po-peek.is-on .po-peek-in{clip-path:inset(0 0 0 0 round 16px);}
.po-peek-g{position:absolute; inset:0; opacity:0; transition:opacity .4s ease;}
.po-peek-g.is-on{opacity:1;}
.po-peek-g img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transform:scale(1.1); transition:opacity .5s ease, transform 1.4s cubic-bezier(.22,1,.36,1);}
.po-peek-g img.is-on{opacity:1; transform:scale(1);}
.po-peek-badge{position:absolute; right:-26px; bottom:-26px; width:92px; height:92px; border-radius:50%; display:flex; align-items:center; justify-content:center;
    background:var(--GoldYC); color:#0A0D10; font-family:'Nohemi',sans-serif; font-weight:600; font-size:16px; letter-spacing:0.02em; transform:scale(0) rotate(-40deg);
    transition:transform .7s cubic-bezier(.34,1.56,.64,1) .1s; box-shadow:0 14px 34px rgba(217,169,79,0.35);}
.po-peek.is-on .po-peek-badge{transform:scale(1) rotate(0);}
/* affichage mosaïque : cartes photo ; au survol, inclinaison 3D, halo sous la souris et défilé des slides */
.po-grid{display:grid; grid-template-columns:repeat(12, minmax(0,1fr)); gap:24px;}
.po-grid.is-filtered .po-card{grid-column:span 6; height:460px;}
.po-card{position:relative; grid-column:span var(--span, 4); height:var(--h, 440px); border-radius:var(--rayon-l); overflow:hidden; isolation:isolate; cursor:pointer; outline:none; background:#0f151c;
    border:1px solid rgba(255,255,255,0.07); transform:perspective(1200px) rotateX(var(--ty, 0deg)) rotateY(var(--tx, 0deg));
    transition:transform .6s cubic-bezier(.22,1,.36,1), box-shadow .6s ease, border-color .6s ease;}
.po-card:hover, .po-card:focus-visible{box-shadow:0 40px 80px rgba(0,0,0,0.5); border-color:rgba(110,193,228,0.35);}
.po-card::after{content:''; position:absolute; inset:0; z-index:3; pointer-events:none; opacity:0; transition:opacity .5s ease;
    background:radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(110,193,228,0.20), transparent 60%);}
.po-card:hover::after{opacity:1;}
.po-card-media{position:absolute; inset:0; transform:scale(1.04); transition:transform 1.4s cubic-bezier(.22,1,.36,1);}
.po-card:hover .po-card-media{transform:scale(1.1);}
.po-card-img{position:absolute; inset:0; background-size:cover; background-position:center; opacity:0; transition:opacity .8s ease;}
.po-card-img.is-on{opacity:1;}
.po-card-shade{position:absolute; inset:0; z-index:1; background:linear-gradient(0deg, rgba(10,13,16,0.94) 0%, rgba(10,13,16,0.55) 38%, rgba(10,13,16,0.05) 70%), linear-gradient(180deg, rgba(10,13,16,0.5), transparent 26%);}
.po-card-top{position:absolute; z-index:2; top:26px; left:28px; right:28px; display:flex; align-items:center; justify-content:space-between;}
.po-card-logo{height:calc(30px * var(--lh, 1)); width:auto; max-width:140px; object-fit:contain; filter:brightness(0) invert(1); opacity:.92;}
.po-card-n{font-family:'Nohemi',sans-serif; font-weight:600; font-size:12px; letter-spacing:0.1em; color:rgba(255,255,255,0.6); padding:7px 12px; border-radius:999px; border:1px solid rgba(255,255,255,0.18); backdrop-filter:blur(8px);}
.po-card-body{position:absolute; z-index:2; left:28px; right:28px; bottom:26px; display:flex; flex-direction:column; align-items:flex-start; gap:8px;}
.po-card-cat{font-size:12px; letter-spacing:0.16em; text-transform:uppercase; color:var(--BleuYC); font-weight:600;}
.po-card-name{margin:0; font-family:'Nohemi',sans-serif; font-weight:500; font-size:32px; line-height:1.1; letter-spacing:-0.02em; color:#fff;}
.po-card-btn{display:inline-flex; align-items:center; gap:16px; margin-top:10px; font-weight:600; font-size:14px; color:#fff; max-height:0; opacity:0; transform:translateY(12px);
    transition:max-height .6s cubic-bezier(.22,1,.36,1), opacity .5s ease, transform .6s cubic-bezier(.22,1,.36,1);}
.po-card-btn i{width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--GoldYC); color:#0A0D10; flex-shrink:0; aspect-ratio:1;}
.po-card-btn svg{width:16px; height:16px; flex-shrink:0;}
.po-card:hover .po-card-btn, .po-card:focus-visible .po-card-btn{max-height:50px; opacity:1; transform:none;}
@media (hover:none){
  .po-card-btn{max-height:50px; opacity:1; transform:none;}
}
/* ---------- Responsive ---------- */
@media (max-width:1100px){
  .po-wall{width:100%; right:-20%; opacity:.45;}
  .po-hero::after{background:linear-gradient(180deg, transparent 48%, rgba(10,13,16,0.35) 66%, rgba(10,13,16,0.72) 82%, rgba(10,13,16,0.94) 94%, #0A0D10 100%), linear-gradient(90deg, rgba(10,13,16,0.9), rgba(10,13,16,0.55));}
  .po-row{grid-template-columns:56px minmax(0,1fr) 52px;}
  .po-row-meta{display:none;}
  .po-grid .po-card{grid-column:span 6 !important; height:420px !important;}
  .po-grid:not(.is-filtered) .po-card:first-child{grid-column:span 12 !important;}
}
@media (max-width:760px){
  .po-hero{padding:var(--section) 24px var(--section); min-height:0;}
  .po-hero-title{white-space:normal;}
  .po-index, .po-cases{padding-left:24px; padding-right:24px;}
  .po-index{padding-top:110px; padding-bottom:110px;}
  .po-index-head{flex-direction:column; align-items:flex-start;}
  .po-ctrl{flex-direction:column; align-items:stretch; margin:44px 0 22px;}
  .po-filters{overflow-x:auto; scrollbar-width:none;}
  .po-filters::-webkit-scrollbar{display:none;}
  .po-f{padding:10px 15px; white-space:nowrap;}
  .po-views{align-self:flex-start;}
  .po-row{grid-template-columns:34px minmax(0,1fr) 44px; gap:16px; padding:24px 2px;}
  .po-nm{font-size:clamp(30px, 9vw, 44px); white-space:normal;}
  .po-row-go{width:44px; height:44px; flex-shrink:0; aspect-ratio:1;}
  .po-grid .po-card{grid-column:span 12 !important; height:380px !important;}
  .po-peek{display:none;}
}
@media (prefers-reduced-motion: reduce){
  .sv-in, .sv-line .sv-in, .po-col, .po-brand-sl{animation:none !important;}
  .po-page.po-ready .rv{opacity:1; transform:none; filter:none;}
}
.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;}
/* ===== 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){
  .po-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 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 poPhotoRef. */
.po-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%);}
.po-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);}
.po-photo.is-in .po-photo-layer{clip-path:inset(0% 0% round 0px);}
.po-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;}
.po-photo.is-in img{opacity:1; transform:scale(1);}
.po-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;}
.po-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%);}
.po-photo.is-in .po-photo-glow{opacity:1;}
.po-photo.is-in .po-photo-glow::before{animation:poPhotoGlow 16s ease-in-out infinite alternate;}
@keyframes poPhotoGlow{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);}}
.po-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){
  .po-photo{height:340px; margin-top:56px;}
}
@media (prefers-reduced-motion: reduce){
  .po-photo-layer{clip-path:none; transition:none;}
  .po-photo img{opacity:1; transform:none; transition:none;}
  .po-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. */
.po-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%);}
.po-photo img{object-position:center 88%;}
.po-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%);}
.po-index{padding-bottom:0 !important;}
#contact{margin-top:-208px;}
@media (max-width:767px){
  .po-photo{height:400px;}
  #contact{margin-top:-96px;}
}
/* Le mur de slides du hero reste dans le hero : sans cela ses colonnes allongeaient la page d'un grand vide noir sous le footer */
.po-hero.yc-sky{overflow:clip !important;}
/* ===== 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;}
.po-index{z-index:2;}
.po-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){
  .po-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 maquettes, ligne ≈ 860 px sur 1254), quelle que soit la largeur ; même calcul que la page d'accueil. */
@media (min-width:768px){
  .po-photo img{object-position:50% calc(1.14 * clamp(460px, 58vw, 840px) - 120px - 68.6vw);}
}
/* ===== NOS CLIENTS : « table lumineuse » (après « Explorer nos projets »). Grille 5 × 3 aux filets à peine visibles ;
     un faisceau (--lx, --ly) éclaire la grille. Chaque logo lit son éclairage --k (0 → 1), posé par poClientsRef. ===== */
.po-clients{position:relative; z-index:2; padding:180px 64px 40px;}
.po-cl-head{display:flex; flex-direction:column; align-items:center; text-align:center; gap:24px; margin-bottom:72px;}
.po-cl-head .yc-badge{align-self:center;}
.po-cl-head .po-lead{max-width:520px;}
.po-cl-table{position:relative; max-width:1120px; margin:0 auto; --lx:50%; --ly:50%;}
/* la lumière : un calque bien plus grand que la grille, sans masque ni débordement coupé → aucun bord visible */
.po-cl-light{position:absolute; inset:-360px; pointer-events:none; z-index:0;
    background:radial-gradient(340px circle at calc(var(--lx) + 360px) calc(var(--ly) + 360px), rgba(110,193,228,0.15), rgba(110,193,228,0.06) 35%, rgba(217,169,79,0.035) 55%, transparent 100%);}
/* v473 : la section ne coupe plus la lumière à la marge (overflow visible) ; la lumière s'estompe en fondu avant les bords de
     l'écran (masque : --fl / --fr = position des bords de l'écran dans le calque, posées par poClientsRef). Marges inchangées. */
.po-clients.yc-sky{overflow-x:visible !important;}
.po-cl-light{--fl:-9999px; --fr:99999px;
    -webkit-mask-image:linear-gradient(90deg, transparent var(--fl), #000 calc(var(--fl) + 160px), #000 calc(var(--fr) - 160px), transparent var(--fr));
    mask-image:linear-gradient(90deg, transparent var(--fl), #000 calc(var(--fl) + 160px), #000 calc(var(--fr) - 160px), transparent var(--fr));}
.po-cl-grid{position:relative; z-index:1; list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(5, minmax(0,1fr));
    -webkit-mask-image:radial-gradient(130% 120% at 50% 50%, #000 62%, transparent 100%); mask-image:radial-gradient(130% 120% at 50% 50%, #000 62%, transparent 100%);}
.po-cl{--k:0; position:relative; height:148px; display:flex; align-items:center; justify-content:center; padding:0 24px; box-sizing:border-box;
    border-right:1px solid rgba(255,255,255,calc(0.05 + var(--k) * 0.22)); border-bottom:1px solid rgba(255,255,255,calc(0.05 + var(--k) * 0.22));}
.po-cl:nth-child(5n){border-right-color:transparent;}
.po-cl:nth-last-child(-n+5){border-bottom-color:transparent;}
/* coin lumineux : un petit éclat Or YC au croisement des filets, quand la lumière passe */
.po-cl::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;}
.po-cl:nth-child(5n)::after, .po-cl:nth-last-child(-n+5)::after{display:none;}
.po-cl-logo{height:var(--lh, 32px); width:auto; max-width:72%; max-height:52px; object-fit:contain; filter:brightness(0) invert(1); opacity:calc(0.3 + var(--k) * 0.7);
    transform:scale(calc(1 + var(--k) * 0.06)); user-select:none; -webkit-user-drag:none;}
/* entrée : les logos arrivent en cascade quand la grille apparaît */
.po-page.po-ready .po-cl-table.rv .po-cl{opacity:0; transform:translateY(16px);}
.po-page.po-ready .po-cl-table.rv.is-in .po-cl{opacity:1; transform:none; transition:opacity .8s ease calc(.2s + var(--i) * 50ms), transform 1s cubic-bezier(.22,1,.36,1) calc(.2s + var(--i) * 50ms);}
@media (max-width:1024px){
  .po-cl{height:124px; padding:0 16px;}
  .po-cl-logo{max-height:44px;}
}
@media (max-width:760px){
  .po-clients{padding:120px 24px 24px;}
  .po-cl-head{margin-bottom:48px;}
  .po-cl-grid{grid-template-columns:repeat(3, minmax(0,1fr));}
  .po-cl{height:92px; padding:0 10px;}
  .po-cl-logo{height:calc(var(--lh, 32px) * 0.7); max-height:34px; max-width:80%;}
  .po-cl:nth-child(5n){border-right-color:rgba(255,255,255,calc(0.05 + var(--k) * 0.22));}
  .po-cl:nth-last-child(-n+5){border-bottom-color:rgba(255,255,255,calc(0.05 + var(--k) * 0.22));}
  .po-cl:nth-child(3n){border-right-color:transparent;}
  .po-cl:nth-last-child(-n+3){border-bottom-color:transparent;}
  .po-cl:nth-child(5n)::after, .po-cl:nth-last-child(-n+5)::after{display:block;}
  .po-cl:nth-child(3n)::after, .po-cl:nth-last-child(-n+3)::after{display:none;}
}
@media (prefers-reduced-motion: reduce){
  .po-cl{--k:0.6;}
}
.po-gl > .po-card-media, .po-gl > .po-brand{position:absolute; inset:0; transition:none;}
@media (min-width:2000px){
  .po-hero{min-height:calc(100svh / var(--xl));}
  .po-photo img{object-position:50% calc(1.14 * 840px - 120px - 68.6vw / var(--xl));}
}
/*=====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 */
  .po-hero{padding-top:var(--hero-top-m) !important;}
  /* halos « spot de scène » : figés, flou remplacé par un masque radial (aucun filter:blur) */
  .blob{animation:none !important; translate:none !important; filter:none !important;
        -webkit-mask-image:radial-gradient(closest-side, #000 18%, transparent 100%); mask-image:radial-gradient(closest-side, #000 18%, transparent 100%);}
  .yc-sky > .blob{filter:brightness(0.55) !important;}
}
/*=====BLOCK=====*/
/* ===== v506 — HERO MOBILE (≤ 767 px) : même paragraphe que Services (16 px, interligne 1,7) sur les 6 pages ;
     titre agrandi : sa ligne la plus longue (« vos histoires ») 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.po-hero-title{font-size:min(calc((100vw - 2 * var(--gutter, 24px)) * 0.1663), 112px) !important;}
  p.po-hero-p{font-size:16px !important; line-height:1.7 !important;}
}