/* Retours de Michel du 17/10 (retours-site/RETOURS-SITE.md). Chargée en dernier : elle fait foi.
   Fluidité d'abord : seuls transform et opacity bougent. */

/* ——— Verre : mat, un seul survol rose pour toutes les commandes (logo compris) ——— */
[data-glass]::before{opacity:.55}
[data-glass]::after{opacity:.45}
[data-glass]:hover:not(.has-liquid-rim),[data-glass]:focus-visible:not(.has-liquid-rim){background:rgb(255 79 168/.2)}
.has-liquid-rim:not(.language-switch):hover>.zk-verre,.has-liquid-rim:not(.language-switch):focus-visible>.zk-verre{background:rgb(255 79 168/.2)}
.site-header .brand[data-glass]:hover{background:rgb(255 79 168/.2)!important}

/* ——— Fond : le bleu se réchauffe ——— */
body[data-page=home] .background-blue,.background-blue{background:#4a3cf5}

/* ——— Accueil : la phrase, puis le film, dans le flux de la page (défilement natif, aucun collage) ——— */
.acc .acc-hero{height:auto}
.acc-hero-stick{position:relative;height:auto;min-height:0;overflow:visible;padding:clamp(120px,18svh,180px) var(--gutter) 0}
.acc .acc-hero .acc-phrase.intro-title,.acc[data-opening=loading] .acc-hero .acc-phrase.intro-title{position:relative;top:auto;left:auto;transform:none;will-change:auto}
.acc .acc-hero .acc-phrase.intro-title{font-size:clamp(46px,10.4vw,190px);line-height:.92;letter-spacing:-.06em;max-width:100%}
.acc .acc-dispo{position:relative;top:auto;left:auto;opacity:1;margin-bottom:24px}
.acc-film{position:relative;left:auto;bottom:auto;transform:none;width:100%;margin:clamp(40px,7svh,80px) 0 0;aspect-ratio:16/9;border-radius:6px;box-shadow:none;will-change:auto}
.acc-film video{object-fit:cover}
.acc .acc-work{padding:clamp(64px,9svh,110px) 0}

/* ——— Anneau de projets (scripts/ring.js) ——— */
.ring{position:relative;height:clamp(440px,68svh,680px);perspective:1700px;perspective-origin:50% 40%;overflow-x:clip;cursor:grab;touch-action:pan-y;user-select:none;outline:none;pointer-events:auto}
.ring:active{cursor:grabbing}
.ring:focus-visible{outline:2px solid var(--pink);outline-offset:-3px}
.ring-world{--cw:380px;position:absolute;left:50%;top:50%;width:0;height:0;transform-style:preserve-3d;will-change:transform}
.ring-card{position:absolute;left:calc(var(--cw)/-2);top:calc(var(--cw)*-.3125);width:var(--cw);aspect-ratio:16/10;display:block;overflow:hidden;border-radius:6px;will-change:transform,opacity;-webkit-user-drag:none}
.ring-card img{width:100%;height:100%;object-fit:cover;display:block;-webkit-user-drag:none}
.ring-card.mood-zokomo img{object-fit:contain;padding:14%;background:#08084b}
.ring-logo{position:absolute;left:50%;top:50%;width:12%!important;height:auto!important;transform:translate(-50%,-50%);object-fit:contain!important}
.ring-name{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.ring-cap{display:grid;gap:10px;margin-top:clamp(20px,3svh,36px);pointer-events:auto}
.ring-cap h3{margin:0;font-size:clamp(34px,3.8vw,62px);font-weight:600;line-height:1;letter-spacing:-.045em}
.ring-ctrl{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;margin-top:28px}
.ring-ctrl>.acc-arrows{justify-self:start}
.ring-ctrl>.acc-views{justify-self:center}
.ring-ctrl>.acc-all{justify-self:end}
/* Sans mouvement (mobile, pause, mouvement réduit) : une liste plate de cartes. */
.acc-work.is-flat .ring{height:auto;perspective:none;cursor:auto;overflow:visible}
.acc-work.is-flat .ring-world{position:static;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(28px,3vw,48px) var(--gap);width:auto;height:auto;padding-inline:var(--gutter);transform:none!important}
.acc-work.is-flat .ring-card{position:static;width:auto;overflow:visible;border-radius:0;background:none}
.acc-work.is-flat .ring-card img{aspect-ratio:16/10;border-radius:6px}
.acc-work.is-flat .ring-logo{top:calc((100% - 3em)/2*.62)}
.acc-work.is-flat .ring-name{position:static;width:auto;height:auto;overflow:visible;clip-path:none;display:block;margin-top:12px;font-size:clamp(22px,2.2vw,32px);font-weight:600;letter-spacing:-.04em}
.acc-work.is-flat :is(.ring-cap,.ring-ctrl>.acc-arrows,.ring-ctrl>.acc-views){display:none}
.acc-work.is-flat .ring-ctrl{grid-template-columns:1fr}
.acc-work.is-flat .ring-ctrl>.acc-all{justify-self:start}
@media(max-width:1000px){.acc-work.is-flat .ring-world{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ——— Pied de page : plein écran, mot-symbole plus mesuré, CTA visible ——— */
.pied-logo{position:relative;width:min(46vw,720px)}
.pied-logo-rose{position:absolute;inset:0;aspect-ratio:2228/651;background:#ff4fa8;-webkit-mask:url(../assets/zokomo-ink.svg) 0 0/100% 100% no-repeat;mask:url(../assets/zokomo-ink.svg) 0 0/100% 100% no-repeat;opacity:0;transform:translate3d(0,0,0);transition:opacity .25s,transform .35s var(--ease)}
.pied-logo:hover .pied-logo-rose,.pied-logo:focus-visible .pied-logo-rose{opacity:.9;transform:translate3d(8px,-4px,0)}
.pied-logo-signe{animation:none}
.pied-phrase{color:#d9dbff;font-size:clamp(18px,1.55vw,25px)}
.pied-contact{display:flex;align-items:center;gap:20px clamp(24px,3vw,48px);flex-wrap:wrap;margin-top:clamp(24px,3.4vh,44px)}
.pied-mail{margin:0;font-size:clamp(26px,3.4vw,56px)}
.pied-cta{display:inline-flex;align-items:center;gap:12px;min-height:56px;padding:0 28px;background:#ff4fa8;color:#151518;font:600 17px/1 'Inter Display',Arial,sans-serif;text-decoration:none;border-radius:999px;transition:transform .25s var(--ease)}
.pied-cta:hover,.pied-cta:focus-visible{transform:translate3d(0,-3px,0)}
.pied-legal{display:flex;flex-wrap:wrap;gap:8px 24px;width:100%;font-size:14px;color:#babffa}
.pied-legal a{color:inherit;text-decoration:none}
.pied-legal a:hover{color:#ff4fa8}
.pied-bug{position:absolute;z-index:0;background:#ff4fa8;pointer-events:none;opacity:0;animation:pied-bug .7s steps(5,end) both}
@keyframes pied-bug{0%{opacity:.95}100%{opacity:0;transform:translate3d(18px,0,0)}}
.pied-inner{position:relative;z-index:1}

/* ——— Pixels du défilement : arqués ; lentille convexe du bas à partir de 85 % ——— */
.scroll-striations{mask-image:radial-gradient(ellipse 85% 130% at 50% 100%,#000 52%,transparent 70%)}
.edge-lens-bottom{inset:85% 0 0;height:15%;mask-image:linear-gradient(transparent,#000 30%);border-radius:50% 50% 0 0/22% 22% 0 0;background:linear-gradient(transparent,#9badcf14)}
.edge-lens-bottom::before,.edge-lens-bottom::after{content:'';position:absolute;inset:0;opacity:0;transition:opacity .15s ease}
.edge-lens-bottom::before{background:linear-gradient(90deg,rgb(0 235 255/.34),transparent 9%,transparent 91%,rgb(255 20 150/.34));mix-blend-mode:screen}
.edge-lens-bottom.is-moving::before{opacity:1}

/* ——— Page Projets : grille de trois ——— */
.work-index{display:block;min-height:0;padding-top:clamp(120px,16vh,170px);padding-bottom:clamp(80px,12vh,140px)}
.work-index-side{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;position:static;margin-bottom:clamp(36px,6vh,72px)}
.work-index-side h1{margin:0;font-size:clamp(56px,11vw,200px);letter-spacing:-.065em;line-height:.86}
.work-grid-3{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(36px,4.4vw,68px) var(--gap)}
.wg-card{display:grid;gap:6px;color:inherit;text-decoration:none}
.wg-media{display:block;aspect-ratio:4/3;overflow:hidden;border-radius:6px;background:#111}
.wg-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s var(--ease)}
.wg-card:hover .wg-media img,.wg-card:focus-visible .wg-media img{transform:scale(1.035)}
.wg-media.mood-zokomo img{object-fit:contain;padding:14%;background:#08084b}
.wg-kind{margin-top:14px;font-size:13px;color:var(--muted)}
.wg-name{font-size:clamp(24px,2.2vw,36px);font-weight:600;letter-spacing:-.04em;line-height:1.05}
.wg-line{font-size:15px;line-height:1.4;color:var(--muted)}
@media(max-width:1000px){.work-grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){.work-grid-3{grid-template-columns:1fr}}

/* ——— Photographie : galeries ——— */
.listing-head .pg-filters{margin:clamp(20px,3vh,36px) 0 0}
.photo-gallery{padding-top:clamp(40px,7vh,84px)}
.photo-gallery>header{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px var(--gap);align-items:end;margin-bottom:clamp(20px,3vh,36px)}
.photo-gallery h2{margin:0;font-size:clamp(34px,4.8vw,68px);letter-spacing:-.045em;line-height:1}
.photo-gallery p{margin:0;max-width:52ch;font-size:clamp(16px,1.3vw,19px);line-height:1.45}
@media(max-width:760px){.photo-gallery>header{grid-template-columns:1fr}}

/* ——— Carnet : trois colonnes, photos des articles ——— */
.stories-three{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:1000px){.stories-three{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){.stories-three{grid-template-columns:1fr}}
.story-photos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(10px,1.2vw,20px);margin:clamp(32px,5vh,60px) 0}
.story-photos figcaption{display:none}
.story-photos img{width:100%;aspect-ratio:1;object-fit:cover;display:block}
@media(max-width:760px){.story-photos{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ——— Playground, Save the Freelancer, pages légales, 404 ——— */
.pg-concept{display:none;margin:20px 0 0;font-size:16px;line-height:1.45;max-width:40ch}
.stf-sheets{grid-template-columns:repeat(3,minmax(0,1fr))}
.stf-story{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(28px,4vh,48px) var(--gap);padding-bottom:clamp(40px,8vh,80px)}
.stf-story h2{margin:0 0 10px;font-size:clamp(24px,2.4vw,36px);letter-spacing:-.04em}
.stf-story p{margin:0;max-width:56ch;font-size:clamp(16px,1.3vw,19px);line-height:1.5}
@media(max-width:760px){.stf-story{grid-template-columns:1fr}.stf-sheets{grid-template-columns:1fr}}
.legal{padding-bottom:clamp(60px,10vh,120px)}
.legal p{max-width:62ch;font-size:clamp(16px,1.3vw,19px);line-height:1.55}
.erreur{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--gap);align-items:center;min-height:100svh;padding-block:60px}
.erreur img{width:100%;height:auto;max-height:80svh;object-fit:cover;border-radius:6px}
.erreur h1{margin:0 0 12px;font-size:clamp(44px,7vw,110px);letter-spacing:-.06em;line-height:.9}
.erreur p{margin:0 0 28px;font-size:clamp(18px,1.6vw,24px)}
@media(max-width:760px){.erreur{grid-template-columns:1fr;min-height:0}}

/* ——— Fiches projets ——— */
body[data-page=project] .ed-text{max-width:62ch;margin:0 0 clamp(8px,2vh,24px)}
body[data-page=project] .ed-text p{margin:0 0 1em;font-size:clamp(17px,1.3vw,20px);line-height:1.55}
body[data-page=project] .ed-cta{margin:clamp(20px,3vh,36px) 0 0}
body[data-page=project] .cl-marks-all .cl-marks-grid{grid-column:1/-1}
body[data-page=project] .cl-marks-all .cl-mark-cell img{animation:none;transition:opacity .32s ease}
body[data-page=project] .cl-marks-all .cl-mark-cell img.is-swap{opacity:0}
body[data-page=project] .cl-zeyo .cl-steps{display:grid;grid-template-columns:1fr 1fr;column-gap:22px;align-content:center}
body[data-page=project] .cl-zeyo .cl-step{padding:8px 0 7px}
body[data-page=project] .cl-zeyo .cl-step-label{font-size:clamp(16px,1.35vw,21px)}
body[data-page=project] .ed-illustration img{object-fit:contain;padding:10%;box-sizing:border-box}
body[data-page=project] .case-facts dt{font-size:14px}
body[data-page=project] .case-facts dd{font-size:16px;line-height:1.35}
body[data-page=project] .case-sidebar nav a{font-size:15px}
body[data-page=project] .case-sidebar .text-link[data-glass]{margin-left:0}
@media(max-width:1000px){body[data-page=project] .cl-zeyo .cl-steps{display:flex}}

/* ——— Menu : le vrai logo, plein écran, rien du header ne transparaît ——— */
.has-liquid-menu .menu-wordmark img{display:block;height:34px;width:auto}
html.has-menu body .site-header{opacity:0;visibility:hidden}

/* ——— Mobile : version plate (7 colonnes imaginaires, boutons carrés rose acide, aucune animation) ——— */
@media(max-width:760px){
 :root{--col:calc((100vw - 2*var(--gutter) - 48px)/7)}
 *,*::before,*::after{animation:none!important;transition:none!important}
 .lv,.scroll-striations,.edge-lens{display:none!important}
 [data-glass]{border-radius:0!important;background:var(--pink)!important;color:#151518!important;box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
 [data-glass]::before,[data-glass]::after,.zk-verre,.zk-glass-rim,.zk-gouttes{display:none!important}
 .site-header .brand[data-glass],.language-switch[data-glass],.acc-views[data-glass],.text-link[data-glass],.pied-signature .motion-pause[data-glass]{background:none!important}
 .language-switch [aria-current=page]{background:var(--pink);border-radius:0;color:#151518}
 :is(.work-filters,.pg-filters) button[data-glass]{background:none!important;border:1.5px solid currentColor;color:inherit!important}
 :is(.work-filters,.pg-filters) button[data-glass][aria-pressed=true]{background:var(--pink)!important;border-color:var(--pink);color:#151518!important}
 .motion-pause,.header-actions .motion-pause{display:none!important}
 .pied-cta{border-radius:0}
 .pied-trame{animation:none}
 .pg-concept{display:block}
 .playground-covers{display:none}
 .acc-hero-stick{padding-top:clamp(100px,16svh,140px)}
 .acc .acc-hero .acc-phrase.intro-title{font-size:clamp(40px,13.4vw,84px)}
 .acc-film{margin-top:36px}
 :is(.listing-head,.about-copy,.legal,.article-body,.story-article>header,.contact-page) :is(p,h2){max-width:calc(var(--col)*6 + 40px)}
 .photo-gallery h2{font-size:34px}
}

/* ——— Articles : tout sur la marge de la page ——— */
.story-article>header,.article-body{margin-left:0;margin-right:auto}