/* Système global V4 (14 oct. 2026) : typographie, couleurs, fond, navigation, transitions, mouvement.
   Chargée en dernier sur toutes les pages. Les noms de variables existants sont conservés
   (--ink, --paper, --pink, --blue, --text, --muted, --line, --gutter, --gap, --ease) : seules leurs valeurs changent.
   Les fichiers propres aux fiches projet (cases.css, cases-palette.css, prototype-case.css) ne sont pas modifiés.

   Couleurs reprises des versions validées :
   - fond bleu-gris en dégradé : version-3/accueil/accueil.css (--sky-1/2/3), demandé dans BRIEF-REPONSES (« fond bleu-gris très clair en dégradé ») ;
   - encre bleu nuit #161626, gris #5d6373 : version-3/z3.css et accueil.css ;
   - rose acide #ff4fa8 : prototype/style.css et version-3 (« signal : rose acide ») ; rose plus transparent sur le verre
     (réponse de Michel, work/v2/claude-messages.json, message 70 : « un peu plus de transparence au rose ») ;
   - nuit #0a0b3c : version-3/z3.css (--night) ;
   - pied de page bleu nuit #08084e, points #3a3cff, texte #f2f3ff / #b9bfff, logo crème #f1ebe4 :
     version-3/case.css et foot-wall.js (« le bleu zokomo, plus de contraste et d'acidité », message 69). */

:root{
 --sky-1:#f2f5f9;--sky-2:#e3e9f0;--sky-3:#d3dce7;
 --ink:#161626;--paper:#edf1f5;--muted:#5d6373;--line:rgb(22 22 38 / .14);
 --pink:#ff4fa8;--pink-glass:rgb(255 79 168 / .58);--pink-soft:rgb(255 79 168 / .2);
 --night:#0a0b3c;--night-foot:#08084e;--night-dot:#3a3cff;--night-text:#f2f3ff;--night-mute:#b9bfff;--cream:#f1ebe4;
 --blue:var(--night-foot);--text:var(--ink);
 --glass:rgb(255 255 255 / .42);--glass-dark:rgb(10 11 60 / .38);
 --ease:cubic-bezier(.22,1,.36,1);--ease-io:cubic-bezier(.65,0,.35,1);--ease-mw:cubic-bezier(0,.01,.38,.95);
 --radius:6px;
 --display:"Inter Display",Arial,sans-serif;
}
body{font-family:"Inter Display",Arial,sans-serif;background:var(--sky-2)}
body[data-theme=dark],body[data-theme=blue]{--text:var(--night-text);--muted:var(--night-mute);--line:rgb(185 191 255 / .28)}
p{letter-spacing:-.004em}
h1,h2,h3{letter-spacing:-.045em}
::selection{background:var(--pink-glass);color:var(--ink)}

/* ——— Typographie : Inter Display (demande de Michel, 15/10). Titres moyens et gras. ——— */
.intro-title,.listing-head h1,.section-heading h2,.projects-side h1,.projects-side h2,.footer-cta,.contact-page h1,.next-project strong,.story-article h1{font-family:"Inter Display",Arial,sans-serif;font-weight:600;letter-spacing:-.05em}
.intro-title>[data-intro-line]:last-of-type{color:#d42f86}
.eyebrow{font-weight:600}

/* ——— Fond : le dégradé bleu-gris de la V3, fixe dans la fenêtre. Zones sombres : la nuit zokomo. ——— */
.site-background{background:linear-gradient(180deg,var(--sky-1) 0%,var(--sky-2) 45%,var(--sky-3) 100%)}
.background-dark{background:#000}
.background-blue{background:var(--night-foot)}
.site-background>div{transition:opacity .7s var(--ease-mw)}
/* ——— Fond de caractères (Michel, 15/10) : des lignes de lettres qui brillent faiblement, par-dessus le dégradé
   et les zones sombres, sous le contenu. Le canvas est peint par scripts/fond.js. ——— */
.site-chars{position:absolute;inset:0;z-index:2;pointer-events:none}
body{transition:color .45s ease}

/* ——— Liens et boutons : pas de contours (demande de Michel), verre et rose transparent. ——— */
.text-link{border-bottom:0;background:linear-gradient(currentColor,currentColor) 100% 100%/100% 1px no-repeat;padding-bottom:5px}
.text-link:hover{animation:zk-underline .7s var(--ease) both}
@keyframes zk-underline{0%{background-size:100% 1px;background-position:100% 100%}49%{background-size:0 1px;background-position:100% 100%}50%{background-size:0 1px;background-position:0 100%}100%{background-size:100% 1px;background-position:0 100%}}
.pill{border:0;background:var(--glass);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);transition:background .3s ease,transform .4s var(--ease)}
.pill:hover{background:var(--pink-glass);color:var(--ink);border:0}
.projects-controls button{border:0;background:rgb(255 255 255 / .1);transition:background .3s ease,color .3s ease,transform .4s var(--ease)}
.projects-controls button:hover:enabled{background:var(--pink-glass);color:var(--ink)}
.projects-controls>p{font-feature-settings:"tnum"}
[data-magnetic]{will-change:transform}

/* ——— Médias : coins un peu arrondis (réponse au questionnaire), mise au point en pixels à l'arrivée. ——— */
.project-panel-media,.work-card-media,.story-card a>div,.story-article>img,.contact-page,.playground-board .board-demo{border-radius:var(--radius)}
.project-panel-media,.work-card-media,.story-card a>div{position:relative;overflow:hidden}
.media-slot{position:relative}
.zk-pix{position:absolute;inset:0;width:100%;height:100%;z-index:3;pointer-events:none;image-rendering:pixelated;display:block}

/* Mouthwash : au survol d'une carte, seule la couleur change ; pas d'image qui grossit ni qui lévite. */
.project-panel a:hover .project-panel-media img,.work-card:hover img,.story-card a:hover img{transform:none}
.project-panel-caption h3,.work-card h2,.story-card h3,.story-card h2{transition:color .3s ease}
.project-panel-caption>span:last-child,.work-card-caption>span{display:inline-block;transition:transform .5s var(--ease)}
.project-panel a:hover h3{color:var(--pink)}
.project-panel a:hover .project-panel-caption>span:last-child,.work-card:hover .work-card-caption>span{transform:rotate(45deg)}
.work-card:hover h2,.story-card a:hover h3,.story-card a:hover h2{color:#c4287a}

.zk-tint{transition:color .25s linear}

/* ——— Transition de page : écran de pixels. La transition de vue du navigateur est retirée. ——— */
@view-transition{navigation:none}
.curtain{position:fixed;inset:0;width:100%;height:100%;z-index:1000;pointer-events:none;image-rendering:pixelated;visibility:hidden}
.curtain.is-live{visibility:visible}

/* ——— Mobile ——— */
@media(max-width:760px){
}
@media(prefers-reduced-motion:reduce){.zk-pix{display:none}}

/* ——— Logo de l'en-tête : grand en haut de page, il se réduit au défilement (NOWW). ——— */
.brand img{transform-origin:0 50%;transform:scale(var(--brand-k,1));transition:transform .25s linear,filter .6s ease-out}
.site-header{transition:color .6s ease-out,background .6s ease-out,padding .3s ease}

/* ——— Section projets (accueil et /work/) : noir #000, une présentation, des images mood = logo + fond du projet. ——— */
.selected-projects{background:#000;color:#f4f4f6}
.projects-lead{font-size:16px;line-height:1.5;max-width:300px;color:#b9bac4;margin:-12px 0 30px}
.projects-side h1{font-size:clamp(44px,5vw,72px);margin:36px 0;line-height:.99}
.mood-card{background:#111}
.mood-card img{width:100%;height:100%;object-fit:cover;display:block}
.project-panel a:hover .mood-card img{filter:none}
body[data-page=work] .selected-projects{padding-top:120px}
body[data-page=work] .selected-projects.is-pinned{padding-top:0}

/* ——— Stories et Playground : personnels, en liste de magazine (pas d'image réutilisée). ——— */
.perso-lead{font-size:20px;max-width:560px;margin:-30px 0 46px;color:var(--muted)}
.perso-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.perso-list li{border-bottom:1px solid var(--line)}
.perso-list li,.perso-list li>a{display:grid;grid-template-columns:44px minmax(110px,1fr) 3fr 4fr 32px;gap:var(--gap);align-items:baseline;padding:22px 0;transition:background .3s ease,padding .4s var(--ease)}
.perso-list li>a{padding:0;grid-column:1/-1}
.perso-list li:has(>a){display:block;padding:22px 0}
.perso-list span{font-size:11px;color:var(--muted);font-feature-settings:"tnum"}
.perso-list em{font-style:normal;font-size:13px;color:var(--muted)}
.perso-list strong{font-size:clamp(24px,2.4vw,38px);font-weight:600;letter-spacing:-.04em;line-height:1.05}
.perso-list p{font-size:16px;line-height:1.45;max-width:520px}
.perso-list li>a>span:last-child{font-size:24px;color:inherit;justify-self:end;transition:transform .5s var(--ease)}
.perso-list li:hover{background:var(--pink-soft);padding-inline:14px}
.perso-list li:has(>a):hover{padding-inline:14px}
.perso-list li>a:hover>span:last-child{transform:rotate(45deg)}
.playground-door{display:block;border-top:0;padding-top:120px}
.playground-door h2{font-size:clamp(40px,5vw,72px);margin:0}

/* ——— Pied de page « Parlons-en » : toute la hauteur de l'écran, pas de gros logo,
   l'image de référence de l'ancienne version (affiches déchirées de l'identité) refaite en vecteur, glitchée au passage du pointeur. ——— */
.site-footer{position:relative;isolation:isolate;overflow:hidden;min-height:100svh;display:flex;flex-direction:column;background:#08084e;color:var(--night-text);margin-top:120px;padding:0}
.footer-inner{position:relative;z-index:1;flex:1;display:flex;flex-direction:column;justify-content:space-between;width:100%;padding-top:110px;padding-bottom:32px}
.foot-affiches{position:absolute;inset:0;z-index:0;overflow:hidden}
.foot-affiches img,.foot-affiches .zk-band{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.foot-affiches .zk-band{background-size:cover;background-position:center;will-change:transform}
.foot-affiches::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgb(8 8 78 / .1) 0%,rgb(8 8 78 / 0) 45%,rgb(8 8 78 / .72) 100%);pointer-events:none}
.footer-top>p{color:var(--night-mute)}
.footer-cta{color:#f1ebe4;transition:color .3s ease}
.footer-cta:hover{color:var(--pink)}
.footer-cta>span[aria-hidden=true]:not(.zk-verre){display:inline-block;transition:transform .5s var(--ease)}
.footer-cta:hover>span[aria-hidden=true]:not(.zk-verre){transform:rotate(45deg)}
.footer-bottom{border-top-color:rgb(185 191 255 / .35)}
.footer-bottom a:hover{color:var(--pink)}
.site-footer :focus-visible{outline-color:var(--pink)}
@media(max-width:760px){
 .perso-lead{font-size:17px;margin:-14px 0 30px}
 .perso-list li,.perso-list li>a{grid-template-columns:30px 1fr;row-gap:6px}
 .perso-list em{grid-column:2}.perso-list strong{grid-column:1/-1;font-size:26px}.perso-list p{grid-column:1/-1;font-size:15px}
 .perso-list li>a>span:last-child{grid-column:2;grid-row:1}
 .playground-door{padding-top:70px}
 .footer-inner{padding-top:80px}
 .projects-lead{font-size:14px;margin:4px 0 0;grid-column:1/-1;max-width:none}
}
body[data-theme=blue] .site-header{background:rgb(8 8 78 / .62)}
body[data-theme=dark] .site-header{background:rgb(0 0 0 / .62)}
/* Image mood : l'image garde son cadre entier ; la carte prend la couleur du projet autour (aucun bord noir). */
.mood-card img{object-fit:contain}
.mood-prisma{background:#FF7A00}.mood-af{background:#B4553C}.mood-zeyo{background:#FFFFFF}.mood-esther{background:#753C52}.mood-avenue{background:#9A968A}

/* ——— 15/10 (lot 2) ——— */
/* Hiérarchie des graisses : 600 pour les titres et les repères forts, 400–500 pour la lecture. */
.eyebrow,.text-link,.pill,.header-actions,.availability,.intro-bottom a{font-weight:500}
.story-card a>p:not(.eyebrow),.work-card p,.project-panel-caption p,.perso-lead,.projects-lead{font-weight:400}
/* En-tête lisible sur les fonds sombres (rail noir, pied de page nuit), y compris en bas des fiches projets. */
body[data-theme=dark] .site-header,body[data-theme=blue] .site-header{color:#f2f3ff!important}
body[data-theme=dark] .site-header .brand img,body[data-theme=blue] .site-header .brand img{filter:invert(1) brightness(1.7)!important}
body[data-theme=dark] .site-header .menu-toggle i,body[data-theme=blue] .site-header .menu-toggle i{border-color:#f2f3ff}

/* Stories : la présentation en cartes d'avant, en quatre retours d'expérience. */
.stories-four{grid-template-columns:repeat(4,minmax(0,1fr))}
.stories-four .story-card h2,.stories-four .story-card h3{font-size:24px}
@media(max-width:1100px){.stories-four{grid-template-columns:repeat(2,minmax(0,1fr))}.stories-four .story-card:last-child{grid-column:auto;max-width:none}}
@media(max-width:760px){.stories-four{grid-template-columns:1fr}}
.story-card a>div{background:#e9edf3}
.story-card a>div img[src$=".svg"]{object-fit:cover}

/* ——— Page Projets : vue d'ensemble (huyml) — infos et filtres à gauche, image d'ambiance au centre, liste à droite. ——— */
.work-index{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gap);padding-top:150px;padding-bottom:120px;align-items:start;min-height:100svh}
.work-index-side{grid-column:1/4;position:sticky;top:120px}
.work-index-side h1{font-size:clamp(50px,6vw,96px);margin:28px 0 36px;line-height:.95}
.work-filters{display:flex;flex-wrap:wrap;gap:8px}
.work-filters button{padding:10px 16px;border-radius:999px;background:var(--glass);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);font-size:13px;font-weight:500;transition:background .3s ease,color .3s ease}
.work-filters button sup{font-size:9px;margin-left:5px;opacity:.6;font-feature-settings:"tnum"}
.work-filters button:hover{background:var(--pink-soft)}
.work-filters button[aria-pressed=true]{background:var(--pink-glass);color:var(--ink)}
.work-index-preview{grid-column:4/9;position:sticky;top:120px;aspect-ratio:4/3.4;border-radius:var(--radius);overflow:hidden;background:#000}
.work-index-frame{position:absolute;inset:0;opacity:0;transition:opacity .35s var(--ease-mw)}
.work-index-frame.is-on{opacity:1}
.work-index-frame img{width:100%;height:100%;object-fit:contain}
.work-index-frame.mood-urban img{object-fit:cover}
.work-index-list{grid-column:9/13;list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.work-index-list li{border-bottom:1px solid var(--line);overflow:hidden;transition:opacity .4s ease,max-height .55s var(--ease-io),border-color .4s ease;max-height:220px}
.work-index-list li.is-out{opacity:0;max-height:0;border-color:transparent;pointer-events:none}
.work-index-list a{display:grid;grid-template-columns:28px 1fr 24px;column-gap:10px;row-gap:4px;padding:18px 0;align-items:baseline;transition:padding .4s var(--ease)}
.wi-num{font-size:11px;color:var(--muted);font-feature-settings:"tnum";grid-row:1/3}
.wi-kind{font-size:11px;color:var(--muted)}
.wi-name{grid-column:2;font-size:clamp(24px,2.3vw,36px);font-weight:600;letter-spacing:-.04em;line-height:1.05;transition:color .3s ease}
.wi-line{grid-column:2;font-size:14px;color:var(--muted)}
.work-index-list a>span[aria-hidden]{grid-column:3;grid-row:1/3;align-self:center;font-size:22px;transition:transform .5s var(--ease)}
.wi-thumb{display:none}
.work-index-list li.is-active a,.work-index-list a:hover,.work-index-list a:focus-visible{padding-left:12px}
.work-index-list li.is-active .wi-name{color:#c4287a}
.work-index-list li.is-active a>span[aria-hidden]{transform:rotate(45deg)}
.work-index-list:hover li:not(:hover):not(.is-out){opacity:.45}
body[data-page=work] .site-footer{margin-top:40px}
@media(max-width:1100px){.work-index-side{grid-column:1/-1;position:static}.work-index-preview{grid-column:1/7}.work-index-list{grid-column:7/13}}
@media(max-width:760px){
 .work-index{display:block;padding-top:120px}
 .work-index-side h1{font-size:56px;margin:20px 0 24px}
 .work-index-preview{display:none}
 .work-index-list{margin-top:34px}
 .work-index-list a{grid-template-columns:28px 1fr 22px}
 .wi-thumb{display:block;grid-column:1/-1;grid-row:3;margin-top:14px;aspect-ratio:16/10;border-radius:var(--radius);overflow:hidden}
 .wi-thumb img{width:100%;height:100%;object-fit:contain}
 .mood-urban.wi-thumb img{object-fit:cover}
 .work-index-list li{max-height:600px}
}
.mood-ok-0moz{background:#2134F4}.mood-urban{background:#c0262d}
.story-card a>div:has(img[src*="ok-0moz-note"]){background:#DFFF00}.story-card a>div img[src*="ok-0moz-note"]{object-fit:contain}



/* ——— Lot 3, effets ——— */
.site-background>div{z-index:1}
/* Textes un peu plus gros (Mouthwash / NOWW) */
.presentation>div>p{font-size:22px;line-height:1.5}
.presentation h2{font-size:clamp(40px,4.8vw,76px)}
.perso-lead{font-size:24px}
.story-card a>p:not(.eyebrow){font-size:17px}
.stories-four .story-card h2,.stories-four .story-card h3{font-size:28px}
.projects-lead{font-size:18px}.wi-line{font-size:16px}
.footer-top>p{font-size:24px}
.eyebrow{font-size:14px}.text-link{font-size:15px}
.services summary h3{font-size:clamp(28px,3.4vw,52px)}
.services details p{font-size:19px}
@media(max-width:760px){.presentation>div>p{font-size:18px}.perso-lead{font-size:19px}.story-card a>p:not(.eyebrow){font-size:16px}.footer-top>p{font-size:19px}}

.mood-card img[src*="ambiance"],.work-index-frame img[src*="ambiance"],.wi-thumb img[src*="ambiance"]{object-fit:cover}

/* 15/10 : empêche tout débordement horizontal (canvas de glitch sur mobile) */
html,body{overflow-x:clip}

/* ——— Tailles relevées (Michel, 15/10 : « globalement les tailles de polices un peu plus grosses ») ———
   Environ 15 % de plus sur grand écran, comme Mouthwash et NOWW : le texte s'assume, les images gardent l'air
   autour. Les petits écrans gardent leurs tailles, déjà calées sur la largeur. */
body{font-size:17px}
@media(min-width:761px){
 body{font-size:18px}
 .presentation h2{font-size:clamp(46px,5.6vw,96px)}
 .presentation>div>p{font-size:clamp(20px,1.5vw,26px)}
 .section-heading h2{font-size:clamp(48px,6vw,100px)}
 .services>h2{font-size:28px}
 .services summary h3{font-size:clamp(32px,3.9vw,62px)}
 .services details p{font-size:clamp(19px,1.35vw,23px)}
 .story-card h2,.story-card h3,.stories-four .story-card h2,.stories-four .story-card h3{font-size:clamp(28px,2.2vw,38px)}
 .story-card p{font-size:clamp(17px,1.15vw,20px)}
 .perso-lead{font-size:clamp(22px,1.75vw,30px)}
 .eyebrow{font-size:14px}
 .text-link{font-size:16px}
 .footer-top p{font-size:clamp(19px,1.45vw,25px)}
 .footer-cta{font-size:clamp(52px,7.4vw,124px)}
 .listing-head h1{font-size:clamp(60px,8.4vw,136px)}
 .wi-name{font-size:clamp(28px,2.7vw,46px)}
}


/* ——— Verre liquide (scripts/liquide.js) ———
   Seulement sur ce qu'on touche : le menu, les commandes, les pastilles. Jamais pour décorer (Michel : « il faut
   pas le faire gratuitement »). Au repos il réfracte ce qui passe derrière ; il ne s'anime qu'au contact du pointeur.
   Partout : un verre dépoli. Sous Chromium : la vraie réfraction, son biseau et son aberration chromatique. */
:where([data-glass]){position:relative}
[data-glass]{isolation:isolate;background:rgb(255 255 255 / .16);-webkit-backdrop-filter:blur(14px) saturate(1.6);backdrop-filter:blur(14px) saturate(1.6)}
/* Sous Chromium, l'élément ne doit pas isoler son fond : la couche de verre doit voir la page derrière lui. */
.has-liquide [data-glass]{-webkit-backdrop-filter:none;backdrop-filter:none;isolation:auto;z-index:0}
.zk-verre{position:absolute;inset:0;z-index:-2;border-radius:inherit;pointer-events:none;backdrop-filter:var(--liquide) blur(.4px) saturate(1.75) brightness(1.05)}
/* Le reflet : une lumière qui suit le pointeur, et la lumière du biseau, en haut et en bas. */
[data-glass]::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;
 background:radial-gradient(90% 130% at var(--lx,28%) var(--ly,0%),rgb(255 255 255 / .5),rgb(255 255 255 / 0) 55%),
  linear-gradient(165deg,rgb(255 255 255 / .32),rgb(255 255 255 / 0) 42%,rgb(255 255 255 / 0) 72%,rgb(255 255 255 / .16));
 box-shadow:inset 0 1px 0 rgb(255 255 255 / .9),inset 0 -1px 1px rgb(255 255 255 / .32),0 10px 26px -16px rgb(22 22 38 / .45)}
/* Le grain de pixels, dans la matière ; au survol il se met à grésiller — le glitch ne touche que ce qui change. */
[data-glass]::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;
 background:url(../assets/ui/grain.png) 0 0/8px 8px;image-rendering:pixelated;opacity:.4;mix-blend-mode:overlay}
[data-glass]:hover::after{animation:zk-grain .42s steps(3,end) infinite;opacity:.6}
/* Sous Chromium, pas de mélange « overlay » : il ferait de l'élément un groupe isolé, et la couche de verre ne verrait
   plus la page. Le grain se pose simplement, plus léger. */
.has-liquide [data-glass]::after{mix-blend-mode:normal;opacity:.16}
.has-liquide [data-glass]:hover::after{opacity:.26}
@keyframes zk-grain{0%{background-position:0 0}33%{background-position:3px -2px}66%{background-position:-2px 3px}100%{background-position:0 0}}
@media(prefers-reduced-motion:reduce){[data-glass]:hover::after{animation:none}}
body[data-motion=paused] [data-glass]:hover::after{animation:none}

.menu-toggle[data-glass]{padding:9px 16px;border-radius:999px}

/* Les gouttes : la sélection d'un groupe est une goutte qui s'étire jusqu'au bouton choisi et s'y resserre ; la
   petite goutte du survol s'y soude. Le filtre « gooey » (#zk-gouttes) les fait fusionner comme de l'eau. */
.has-gouttes{display:flex;flex-wrap:wrap;gap:2px;padding:4px;border-radius:999px}
.work-filters.has-gouttes{border-radius:24px}
.has-gouttes>button,.has-gouttes>button:hover,.has-gouttes>button[aria-pressed=true]{position:relative;z-index:1;background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;border:0}
.zk-gouttes{position:absolute;inset:0;z-index:0;pointer-events:none;filter:url(#zk-gouttes);opacity:.62;color:var(--pink)}
.acc-views .zk-gouttes{color:#fff;opacity:.9}
.zk-gouttes>span{position:absolute;left:0;top:0;border-radius:999px;background:currentColor;transform-origin:50% 50%}
.zk-goutte-tete{transition:transform .42s cubic-bezier(.3,1.35,.5,1),width .42s cubic-bezier(.3,1.35,.5,1),height .42s ease}
.zk-goutte-queue{transition:transform .86s cubic-bezier(.65,0,.2,1),width .86s cubic-bezier(.65,0,.2,1),height .86s ease}
.zk-goutte-survol{opacity:0;transition:transform .5s cubic-bezier(.3,1.3,.5,1),width .5s ease,height .5s ease,opacity .35s ease}
.zk-goutte-survol.is-on{opacity:1}
.zk-gouttes.is-pose>span,.zk-gouttes.is-calme>span{transition:none}
.acc-views.has-gouttes{gap:0}
.acc-views.has-gouttes>button{padding:8px 14px}

/* L'en-tête garde son flou, mais sur une couche à part : un élément qui floute son arrière-plan isole tout ce qu'il
   contient, et le menu liquide n'aurait plus rien à réfracter. */
.has-liquide .site-header{-webkit-backdrop-filter:none;backdrop-filter:none}
.has-liquide .site-header::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;-webkit-backdrop-filter:blur(18px) saturate(1.6);backdrop-filter:blur(18px) saturate(1.6)}

/* Les images coulent quand on défile (scripts/eau.js) ; au repos, aucun filtre. */
.is-eau{filter:url(#zk-eau)}
.is-eau-scene{filter:var(--zk-scene-filter)}

/* Langue actuelle explicite, une seule navigation principale. */
.language-switch[data-glass]{display:flex;align-items:center;gap:10px;min-height:44px;padding:0 14px;font-size:12px;border-radius:999px;white-space:nowrap}
.language-switch [aria-current=page]{font-weight:600}
.language-switch a{display:inline-flex;align-items:center;min-height:44px;color:var(--muted);text-decoration:none}
.language-switch i{font-style:normal;opacity:.35}
.language-switch a:hover{color:var(--ink)}
body[data-theme=blue] .brand img,body[data-theme=dark] .brand img{filter:brightness(0) invert(1)}
@media(max-width:760px){.header-actions{gap:12px}.language-switch[data-glass]{gap:7px;padding-inline:12px}}
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}