/* ==========================================================================
   mystiQ · agencemystiq.com · feuille de style unique
   Bâtie sur le socle du site mystik-studio.com (juin 2026), identité mystiQ 2026 (brand book V1.1).
   Règles : aplats, aucune ombre, aucun dégradé, rayons de 8 px au plus sur les cartes, pas d'agrandissement
   au survol, un geste crayonné par écran, mouvement coupé si le visiteur le demande.
   ========================================================================== */

/* ---------- Polices (servies par le site) ---------- */
@font-face{font-family:"Montserrat";font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/montserrat-600.woff2") format("woff2")}
@font-face{font-family:"Montserrat";font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/montserrat-700.woff2") format("woff2")}
@font-face{font-family:"Montserrat";font-style:normal;font-weight:800;font-display:swap;src:url("../fonts/montserrat-800.woff2") format("woff2")}
@font-face{font-family:"Lato";font-style:normal;font-weight:300;font-display:swap;src:url("../fonts/lato-300.woff2") format("woff2")}
@font-face{font-family:"Lato";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/lato-400.woff2") format("woff2")}
@font-face{font-family:"Lato";font-style:italic;font-weight:400;font-display:swap;src:url("../fonts/lato-400i.woff2") format("woff2")}
@font-face{font-family:"Lato";font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/lato-700.woff2") format("woff2")}
@font-face{font-family:"Cormorant Garamond";font-style:italic;font-weight:500;font-display:swap;src:url("../fonts/cormorant-500i.woff2") format("woff2")}
@font-face{font-family:"Cormorant Garamond";font-style:italic;font-weight:600;font-display:swap;src:url("../fonts/cormorant-600i.woff2") format("woff2")}

/* ---------- Jetons ---------- */
:root{
  --bx:#891736;--bx-600:#761A31;--bx-700:#641B2B;--bx-800:#521B26;--bx-900:#401921;--bx-300:#C7888C;--bx-200:#DEB3B3;--bx-100:#F0D9D6;--bx-50:#F8EBE6;
  --cafe:#211A1C;--cafe-850:#2A2224;--cafe-800:#332B2C;--cafe-700:#453E3E;--cafe-600:#595150;--cafe-500:#6D6562;--cafe-400:#8C8580;--cafe-300:#B1ABA3;--cafe-200:#CDC6BC;--cafe-100:#DFD9CD;
  --bone:#F2ECDF;--bone-2:#EAE2D2;--blanc:#FFFFFF;--mou:#D8B60E;--mou-100:#F9F1DA;
  --clay:#BE543C;--clay-700:#853F31;--sable:#E2D2B0;--prune:#5A2A4A;--prune-100:#E6DCE2;--campus:#C9A227;--ocre:#A47400;
  --f-t:"Montserrat","Segoe UI",Arial,sans-serif;
  --f-x:"Lato","Segoe UI",Arial,sans-serif;
  --f-c:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --marge:clamp(18px,4.2vw,56px);
  --conteneur:1320px;
  --entete-h:76px;
  --s-y:clamp(72px,9vw,150px);
  --ease:cubic-bezier(.2,.7,.2,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --r:8px;
  /* rôles par défaut (surface Bone) */
  --fond:var(--bone);--texte:var(--cafe);--texte-2:var(--cafe-700);--texte-3:var(--cafe-500);
  --accent:var(--bx);--trait:var(--cafe-500);--trait-fort:var(--bx);--point:var(--bx);--filet:var(--cafe-200);
  --btn-fond:var(--bx);--btn-texte:var(--blanc);--btn-survol:var(--bx-600);--focus:var(--bx);
}
[data-surf="bone"]{--fond:var(--bone);--texte:var(--cafe);--texte-2:var(--cafe-700);--texte-3:var(--cafe-500);--accent:var(--bx);--trait:var(--cafe-500);--trait-fort:var(--bx);--point:var(--bx);--filet:var(--cafe-200);--btn-fond:var(--bx);--btn-texte:var(--blanc);--btn-survol:var(--bx-600);--focus:var(--bx)}
[data-surf="blanc"]{--fond:var(--blanc);--texte:var(--cafe);--texte-2:var(--cafe-700);--texte-3:var(--cafe-500);--accent:var(--bx);--trait:var(--cafe-500);--trait-fort:var(--bx);--point:var(--bx);--filet:var(--cafe-200);--btn-fond:var(--bx);--btn-texte:var(--blanc);--btn-survol:var(--bx-600);--focus:var(--bx)}
[data-surf="cafe"]{--fond:var(--cafe);--texte:var(--bone);--texte-2:#D9D1C2;--texte-3:#B9B0A2;--accent:var(--mou);--trait:var(--blanc);--trait-fort:var(--mou);--point:var(--mou);--filet:rgba(242,236,223,.16);--btn-fond:var(--bone);--btn-texte:var(--cafe);--btn-survol:var(--mou);--focus:var(--mou)}
[data-surf="bx"]{--fond:var(--bx);--texte:var(--bone);--texte-2:#F1DDD9;--texte-3:#E7C9C6;--accent:var(--mou);--trait:var(--blanc);--trait-fort:var(--mou);--point:var(--mou);--filet:rgba(242,236,223,.22);--btn-fond:var(--bone);--btn-texte:var(--bx);--btn-survol:var(--mou);--focus:var(--mou)}
[data-surf]{background:var(--fond);color:var(--texte)}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:calc(var(--entete-h) + 16px)}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;font-family:var(--f-x);font-size:17px;line-height:1.62;color:var(--cafe);background:var(--bone);text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;overflow-x:clip}
img,video,svg{display:block;max-width:100%}
img{height:auto}
picture{display:block}
a{color:inherit}
p{margin:0 0 1em}
h1,h2,h3,h4{margin:0;font-family:var(--f-t);font-weight:700;letter-spacing:-.01em;text-wrap:balance}
p,li{text-wrap:pretty}
button{font:inherit;color:inherit;cursor:pointer}
ul,ol{padding-left:1.2em}
::selection{background:var(--bx);color:var(--bone)}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:2px}
.visuellement-cache{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;padding:0;margin:-1px}
.lien-evitement{position:fixed;left:16px;top:-80px;z-index:200;background:var(--bone);color:var(--bx);font:600 15px var(--f-t);padding:12px 18px;border:2px solid var(--bx);border-radius:4px;text-decoration:none}
.lien-evitement:focus{top:12px}
main{display:block}
main:focus{outline:none}

/* ---------- Mise en page ---------- */
.env{width:100%;max-width:var(--conteneur);margin-inline:auto;padding-inline:var(--marge)}
.env--large{max-width:1600px}
.env--etroit{max-width:880px}
.s{padding-block:var(--s-y);position:relative}
.s--serre{padding-block:clamp(48px,6vw,96px)}
.grille-2{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(24px,3vw,48px)}

/* ---------- Typographie ---------- */
.surtitre{display:inline-flex;align-items:center;gap:.6em;font:600 13px/1.3 var(--f-t);letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin:0 0 20px}
.surtitre::before{content:"";width:28px;height:2px;background:currentColor;border-radius:2px}
.surtitre--nu::before{display:none}
.titre-d{font:800 clamp(3rem,1.2rem + 6.4vw,7.6rem)/.94 var(--f-t);letter-spacing:-.035em}
.titre-1{font:800 clamp(2.5rem,1.4rem + 4vw,5.2rem)/1 var(--f-t);letter-spacing:-.03em}
.titre-2{font:800 clamp(2rem,1.3rem + 2.5vw,3.5rem)/1.04 var(--f-t);letter-spacing:-.025em}
.titre-3{font:700 clamp(1.3rem,1.1rem + .6vw,1.6rem)/1.2 var(--f-t);letter-spacing:-.01em}
.titre-4{font:700 18px/1.3 var(--f-t)}
.chapo{font:300 clamp(1.18rem,1.02rem + .55vw,1.5rem)/1.5 var(--f-x);color:var(--texte-2);max-width:40ch}
.chapo strong{font-weight:700;color:var(--texte)}
.texte{max-width:64ch;color:var(--texte-2)}
.texte strong{color:var(--texte)}
.citation{font:500 italic clamp(1.9rem,1.1rem + 2.8vw,3.6rem)/1.1 var(--f-c);letter-spacing:-.005em}
.petit{font-size:14px;line-height:1.5;color:var(--texte-3)}
.pt{color:var(--point)}
.accent{color:var(--accent)}
.lien{color:var(--accent);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em}
.lien:hover{text-decoration-thickness:2px}
.texte a:not(.btn),.article__corps a:not(.btn),.chapo a{color:var(--accent);text-decoration:underline;text-underline-offset:.2em;text-decoration-thickness:1px}

/* ---------- Mots forts et crayonné ---------- */
.mot-fort{position:relative;display:inline-block;white-space:nowrap}
.mot-fort>.crayon{position:absolute;left:-3%;width:106%;height:auto;pointer-events:none}
.mot-fort>.crayon--souligne{bottom:-.18em}
.mot-fort>.crayon--cercle{left:-14%;width:128%;top:-26%;height:152%}
.crayon{color:var(--trait-fort);overflow:visible}
.crayon--graphite{color:var(--trait)}
[data-trace] .t{stroke-dasharray:1;stroke-dashoffset:1.001}
[data-trace] .p{opacity:0}
[data-trace].est-visible .t{animation:mq-trace var(--duree,.6s) linear var(--delai,0s) forwards}
[data-trace].est-visible .p{animation:mq-apparait .35s linear var(--delai,0s) forwards}
.crayon-mot{display:block;clip-path:inset(-10% 100% -10% 0);color:var(--trait-fort)}
.crayon-mot.est-visible{animation:mq-revele var(--duree,.9s) linear var(--delai,0s) forwards}
.crayon-mot svg{width:100%;height:auto;overflow:visible}
@keyframes mq-trace{to{stroke-dashoffset:0}}
@keyframes mq-apparait{to{opacity:1}}
@keyframes mq-revele{to{clip-path:inset(-10% -4% -10% 0)}}
html:not(.js) [data-trace] .t{stroke-dashoffset:0}
html:not(.js) [data-trace] .p{opacity:1}
html:not(.js) .crayon-mot{clip-path:none}

/* ---------- Boutons ---------- */
.btn{--h:52px;display:inline-flex;align-items:center;justify-content:center;gap:.7em;min-height:var(--h);padding:0 26px;border-radius:999px;font:600 15.5px/1.1 var(--f-t);letter-spacing:.01em;text-decoration:none;border:2px solid transparent;transition:background-color .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease),transform .25s var(--ease);white-space:nowrap}
.btn svg{width:18px;height:18px;flex:none;transition:transform .3s var(--ease)}
.btn:hover svg.fleche{transform:translateX(4px)}
.btn--plein{background:var(--btn-fond);color:var(--btn-texte)}
.btn--plein:hover{background:var(--btn-survol);transform:translateY(-2px)}
[data-surf="bx"] .btn--plein:hover,[data-surf="cafe"] .btn--plein:hover{color:var(--cafe)}
.btn--contour{border-color:currentColor;color:var(--texte);background:transparent}
.btn--contour:hover{background:var(--texte);color:var(--fond);transform:translateY(-2px)}
.btn--film{background:var(--mou);color:var(--cafe)}
.btn--film:hover{background:var(--bone);transform:translateY(-2px)}
.btn .lecture{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:var(--cafe);color:var(--mou);margin-left:-10px}
.btn .lecture svg{width:11px;height:11px;margin-left:2px}
.lien-fleche{display:inline-flex;align-items:center;gap:.55em;font:600 15px var(--f-t);color:var(--accent);text-decoration:none;padding:6px 0;border-bottom:2px solid currentColor}
.lien-fleche svg{width:18px;height:18px;transition:transform .3s var(--ease)}
.lien-fleche:hover svg{transform:translateX(5px)}
.actions{display:flex;flex-wrap:wrap;gap:14px;align-items:center}

/* ---------- En-tête ---------- */
.entete{position:fixed;inset:0 0 auto 0;z-index:60;height:var(--entete-h);display:flex;align-items:center;transition:background-color .35s var(--ease),border-color .35s var(--ease),transform .4s var(--ease);border-bottom:1px solid transparent;color:var(--cafe)}
.entete .env{display:flex;align-items:center;justify-content:space-between;gap:20px;max-width:1600px}
.entete__logo{display:block;flex:none;padding:10px 0}
.entete__logo img{height:34px;width:auto}
.entete__logo .blanc{display:none}
.entete[data-ton="sombre"]{color:var(--bone)}
.entete[data-ton="sombre"] .entete__logo .couleur{display:none}
.entete[data-ton="sombre"] .entete__logo .blanc{display:block}
.entete.est-defile{background:var(--bone);border-bottom-color:var(--cafe-200);color:var(--cafe)}
.entete.est-defile .entete__logo .couleur{display:block}
.entete.est-defile .entete__logo .blanc{display:none}
.entete.est-cache{transform:translateY(-100%)}
.entete__droite{display:flex;align-items:center;gap:10px}
.entete__nav{display:flex;gap:4px;margin-right:6px}
.entete__nav a{font:600 14.5px var(--f-t);text-decoration:none;padding:10px 12px;border-radius:999px;position:relative}
.entete__nav a::after{content:"";position:absolute;left:12px;right:12px;bottom:5px;height:2px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.entete__nav a:hover::after,.entete__nav a[aria-current="page"]::after{transform:scaleX(1)}
.entete__film{display:inline-flex;align-items:center;gap:10px;font:600 14.5px var(--f-t);background:none;border:0;padding:6px 14px 6px 6px;border-radius:999px;color:inherit}
.entete__film .rond{width:34px;height:34px;border-radius:50%;background:var(--bx);color:var(--bone);display:grid;place-items:center;transition:background-color .25s}
.entete[data-ton="sombre"]:not(.est-defile) .entete__film .rond{background:var(--mou);color:var(--cafe)}
.entete__film .rond svg{width:12px;height:12px;margin-left:2px}
.entete__film:hover .rond{background:var(--cafe);color:var(--mou)}
.entete__menu{display:inline-flex;align-items:center;gap:12px;background:var(--cafe);color:var(--bone);border:0;border-radius:999px;padding:0 20px 0 22px;height:46px;font:600 14.5px var(--f-t)}
.entete[data-ton="sombre"]:not(.est-defile) .entete__menu{background:var(--bone);color:var(--cafe)}
.entete__menu .barres{display:grid;gap:5px;width:20px}
.entete__menu .barres i{display:block;height:2px;background:currentColor;border-radius:2px;transition:transform .35s var(--ease)}
.entete__menu:hover .barres i:first-child{transform:translateX(4px)}
@media (max-width:1180px){.entete__nav{display:none}}
/* Langues : bouton FR / EN (en-tête, menu, pied) ; contenu masqué le temps de lire le pays (1,5 s au plus) */
.langues{display:inline-flex;align-items:center;gap:4px;font:700 13px/1 var(--f-t);letter-spacing:.06em}
div.langues a{color:inherit;font-size:13px;text-decoration:none;padding:9px 6px;border-radius:999px;opacity:.6;transition:opacity .2s}
div.langues a:hover{opacity:1}
div.langues a[aria-current="true"]{opacity:1;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px}
.langues span{opacity:.45}
.langues--menu{color:var(--bone);margin-left:auto;margin-right:16px}
.langues--pied{color:var(--texte-2)}
@media (max-width:640px){.langues--entete{gap:2px}.langues--entete a{padding:9px 4px}}
@media (max-width:340px){.langues--entete{display:none}}
.mq-geo main,.mq-geo .pied{opacity:0}
@media (max-width:640px){.entete__film .etiquette{display:none}.entete__film{padding:6px}.entete__logo img{height:28px}.entete__menu{padding:0 16px}}

/* ---------- Menu plein écran ---------- */
.menu{position:fixed;inset:0;z-index:100;display:none;background:var(--bx);color:var(--bone);overflow-y:auto;overscroll-behavior:contain}
.menu.est-ouvert{display:block}
.js .menu.est-ouvert{animation:mq-menu .55s var(--ease-out) both}
@keyframes mq-menu{from{clip-path:circle(0 at calc(100% - 70px) 38px)}to{clip-path:circle(150% at calc(100% - 70px) 38px)}}
.menu__haut{display:flex;align-items:center;justify-content:space-between;height:var(--entete-h)}
.menu__haut img{height:34px;width:auto}
.menu__fermer{display:inline-flex;align-items:center;gap:12px;height:46px;padding:0 20px;border-radius:999px;border:2px solid var(--bone);background:none;color:var(--bone);font:600 14.5px var(--f-t)}
.menu__fermer:hover{background:var(--bone);color:var(--bx)}
.menu__fermer svg{width:16px;height:16px}
.menu__corps{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:clamp(24px,5vw,90px);padding-block:clamp(24px,5vh,64px) 48px}
.menu__liste{list-style:none;margin:0;padding:0;counter-reset:m}
.menu__liste li{overflow:hidden}
.menu__liste a{display:flex;align-items:baseline;gap:18px;text-decoration:none;font:800 clamp(2.2rem,1.3rem + 3.6vw,4.6rem)/1.08 var(--f-t);letter-spacing:-.03em;padding:4px 0;color:var(--bone);position:relative}
.menu__liste a .num{font:600 14px var(--f-t);letter-spacing:.1em;color:var(--mou);min-width:2.2em}
.menu__liste a .mot{position:relative}
.menu__liste a .mot::after{content:"";position:absolute;left:0;right:0;bottom:.06em;height:.08em;background:var(--mou);transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease-out)}
.menu__liste a:hover .mot::after,.menu__liste a:focus-visible .mot::after,.menu__liste a[aria-current="page"] .mot::after{transform:scaleX(1)}
.menu__liste a .film-mention{font:600 14px var(--f-t);letter-spacing:0;color:var(--mou);align-self:center;border:1.5px solid var(--mou);border-radius:999px;padding:4px 12px;white-space:nowrap}
.js .menu.est-ouvert .menu__liste a{animation:mq-monte .7s var(--ease-out) both;animation-delay:calc(.08s + var(--i,0) * .05s)}
@keyframes mq-monte{from{transform:translateY(105%)}to{transform:none}}
.menu__cote{display:flex;flex-direction:column;gap:28px}
.menu__film{display:block;text-align:left;border:0;padding:0;background:none;color:var(--bone);position:relative;border-radius:var(--r);overflow:hidden}
.menu__film img{width:100%;aspect-ratio:16/9;object-fit:cover;transition:transform .8s var(--ease)}
.menu__film .voile{position:absolute;inset:0;background:rgba(33,26,28,.42);display:flex;align-items:center;justify-content:center}
.menu__film .gros-rond{width:78px;height:78px;border-radius:50%;background:var(--mou);color:var(--cafe);display:grid;place-items:center;transition:transform .35s var(--ease)}
.menu__film .gros-rond svg{width:24px;height:24px;margin-left:4px}
.menu__film:hover .gros-rond{transform:translateY(-3px)}
.menu__film .legende{position:absolute;left:16px;bottom:14px;right:16px;font:600 15px/1.3 var(--f-t)}
.menu__film .legende small{display:block;font:400 13.5px var(--f-x);opacity:.9;margin-top:2px}
.menu__contacts{font-size:16px;line-height:1.7}
.menu__contacts a{color:var(--bone);text-decoration:none;border-bottom:1px solid rgba(242,236,223,.35)}
.menu__contacts a:hover{border-bottom-color:var(--mou)}
.menu__contacts p{margin:0}
.menu__signature{width:min(300px,70%)}
@media (max-width:860px){.menu__corps{grid-template-columns:1fr}.menu__film{max-width:520px}}

/* ---------- Fenêtre du film ---------- */
.film-fenetre{padding:0;border:0;background:transparent;width:min(1200px,94vw);max-width:none;max-height:none;color:var(--bone);overflow:visible}
.film-fenetre::backdrop{background:rgba(33,26,28,.94)}
.film-fenetre[open]{animation:mq-fondu .35s var(--ease) both}
@keyframes mq-fondu{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.film-fenetre__haut{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:12px}
.film-fenetre__titre{font:700 clamp(1rem,.9rem + .5vw,1.35rem)/1.2 var(--f-t)}
.film-fenetre__titre small{display:block;font:400 14px var(--f-x);color:#D9D1C2;margin-top:4px}
.film-fenetre video{width:100%;aspect-ratio:16/9;background:#000;border-radius:6px}
.film-fenetre__pied{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 20px;margin-top:12px;font-size:14px;color:#D9D1C2}
.film-fenetre__pied a{color:var(--mou)}
.fermer-rond{width:48px;height:48px;border-radius:50%;border:2px solid var(--bone);background:none;color:var(--bone);display:grid;place-items:center;flex:none}
.fermer-rond:hover{background:var(--bone);color:var(--cafe)}
.fermer-rond svg{width:18px;height:18px}

/* ---------- Intro (accueil, une fois par visite) ---------- */
.intro{display:none}
.js .intro{position:fixed;inset:0;z-index:150;display:grid;place-items:center;background:var(--bx);color:var(--bone);cursor:pointer}
.js.intro-vue .intro{display:none}
.intro__scene{display:grid;justify-items:center;gap:22px;width:min(380px,74vw)}
.intro__tasse{width:clamp(110px,16vw,170px);color:var(--bone)}
.intro__logo{width:clamp(190px,26vw,300px);opacity:0;transform:translateY(10px);animation:mq-fondu .6s var(--ease-out) 1.05s forwards}
.intro__mot{width:clamp(210px,28vw,320px);color:var(--mou)}
.intro__passer{position:absolute;right:var(--marge);bottom:28px;background:none;border:0;color:var(--bone);font:600 13px var(--f-t);letter-spacing:.12em;text-transform:uppercase;opacity:.8}
.intro.est-finie{animation:mq-rideau .75s var(--ease-out) forwards}
@keyframes mq-rideau{to{clip-path:inset(0 0 100% 0)}}

/* ---------- Héros de l'accueil : le film en boucle ---------- */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden;background:var(--cafe);isolation:isolate}
.hero__media{position:absolute;inset:0;z-index:-1}
.hero__media picture,.hero__media img,.hero__media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero__media video{opacity:0;transition:opacity 1.1s var(--ease)}
.hero__media video.en-lecture{opacity:1}
.hero__cartouche{position:relative;margin:0 0 clamp(20px,5vh,56px) var(--marge);width:min(600px,calc(100% - 2 * var(--marge)));padding:clamp(26px,3.2vw,44px);border-radius:var(--r)}
.hero__cartouche .surtitre{color:var(--mou)}
.hero__titre{font:800 clamp(3.1rem,1.7rem + 5.2vw,6.6rem)/.93 var(--f-t);letter-spacing:-.04em;margin-bottom:22px}
.hero__titre .mot-fort>.crayon--souligne{bottom:-.14em}
.hero__texte{font:400 clamp(1.02rem,.96rem + .3vw,1.16rem)/1.55 var(--f-x);color:var(--texte-2);margin-bottom:26px;max-width:46ch}
.hero__fleche{position:absolute;right:-78px;top:calc(100% - 118px);width:92px;color:var(--bone);transform:rotate(-8deg)}
.hero__controles{position:absolute;right:var(--marge);bottom:clamp(20px,5vh,56px);display:flex;align-items:center;gap:10px;color:var(--bone)}
.hero__pause{width:46px;height:46px;border-radius:50%;border:2px solid rgba(242,236,223,.8);background:rgba(33,26,28,.55);color:var(--bone);display:grid;place-items:center}
.hero__pause:hover{background:var(--bone);color:var(--cafe)}
.hero__pause svg{width:16px;height:16px}
.hero__pause .i-lecture{display:none}
.hero__pause[aria-pressed="true"] .i-pause{display:none}
.hero__pause[aria-pressed="true"] .i-lecture{display:block}
.hero__etiquette{font:600 12.5px var(--f-t);letter-spacing:.08em;text-transform:uppercase;background:rgba(33,26,28,.55);padding:8px 12px;border-radius:999px}
@media (max-width:860px){
  .hero{display:block;min-height:0;background:var(--cafe)}
  .hero__media{position:relative;height:min(62svh,560px)}
  .hero__cartouche{margin:-56px var(--marge) 0;width:auto}
  .hero__controles{top:calc(min(62svh,560px) - 110px);bottom:auto}
  .hero__fleche{display:none}
  .hero{padding-bottom:28px}
}
@media (max-width:480px){.hero__titre{font-size:clamp(2.8rem,13vw,3.6rem)}.hero .actions .btn{width:100%}}

/* ---------- Héros des pages intérieures ---------- */
.page-hero{padding:calc(var(--entete-h) + clamp(40px,7vw,110px)) 0 clamp(48px,6vw,96px);position:relative;overflow:hidden}
.page-hero .titre-d{max-width:14ch}
.page-hero__grille{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(28px,5vw,80px);align-items:end}
.page-hero__visuel{position:relative}
.page-hero__chapo{margin-top:26px}
@media (max-width:900px){.page-hero__grille{grid-template-columns:1fr}}
.fil{display:flex;flex-wrap:wrap;gap:6px;font:600 13px var(--f-t);letter-spacing:.06em;text-transform:uppercase;color:var(--texte-3);margin-bottom:22px;list-style:none;padding:0}
.fil a{color:inherit;text-decoration:none}
.fil a:hover{color:var(--accent)}
.fil li+li::before{content:"·";margin-right:6px}

/* ---------- Bandes typographiques qui défilent ---------- */
.defile{overflow:hidden;white-space:nowrap;user-select:none;padding-block:clamp(10px,1.4vw,18px);contain:paint}
.defile__piste{display:inline-flex;align-items:center;gap:clamp(20px,3vw,44px);padding-right:clamp(20px,3vw,44px);animation:mq-defile var(--duree,36s) linear infinite;will-change:transform}
.defile--inverse .defile__piste{animation-direction:reverse}
.defile:hover .defile__piste{animation-play-state:paused}
.defile__mot{font:800 clamp(2.6rem,1.4rem + 5vw,6.2rem)/1 var(--f-t);letter-spacing:-.035em}
.defile--contour .defile__mot{color:transparent;-webkit-text-stroke:1.6px var(--accent)}
.defile__signe{width:clamp(34px,4vw,58px);height:auto;flex:none;color:var(--accent)}
.defile--petit .defile__mot{font-size:clamp(1.3rem,1rem + 1.2vw,2rem);letter-spacing:-.01em}
.defile--petit .defile__signe{width:26px}
@keyframes mq-defile{to{transform:translateX(-100%)}}
.defile-double{display:flex}
.defile-double .defile__piste{flex:none}

/* ---------- En-têtes de section ---------- */
.tete{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:24px 40px;margin-bottom:clamp(32px,4vw,64px)}
.tete__titre{max-width:20ch}
.tete .chapo{margin-top:18px}
.nav-rond{display:flex;gap:10px}
.nav-rond button{width:54px;height:54px;border-radius:50%;border:2px solid currentColor;background:none;display:grid;place-items:center;color:var(--texte);transition:background-color .25s,color .25s,opacity .25s}
.nav-rond button:hover:not(:disabled){background:var(--texte);color:var(--fond)}
.nav-rond button:disabled{opacity:.3;cursor:default}
.nav-rond svg{width:20px;height:20px}

/* ---------- Section « Tout commence autour d'un café » ---------- */
.cafe-intro{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,6vw,110px);align-items:start}
.cafe-intro__titre{position:sticky;top:calc(var(--entete-h) + 32px)}
.cafe-intro__tasse{width:clamp(120px,14vw,190px);margin:28px 0 0 -8px;color:var(--bx)}
.cafe-intro__texte p{font-size:clamp(1.05rem,.98rem + .3vw,1.22rem);color:var(--texte-2)}
.cafe-intro__texte p:first-child{font:300 clamp(1.35rem,1.1rem + 1vw,1.95rem)/1.4 var(--f-x);color:var(--texte)}
.chiffres{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin:clamp(32px,4vw,56px) 0;border-top:2px solid var(--cafe);padding-top:24px}
.chiffre b{display:block;font:800 clamp(2.6rem,1.6rem + 3.2vw,4.6rem)/1 var(--f-t);letter-spacing:-.04em;color:var(--bx)}
.chiffre span{display:block;font:600 14px/1.35 var(--f-t);color:var(--texte-2);margin-top:8px}
@media (max-width:900px){.cafe-intro{grid-template-columns:1fr}.cafe-intro__titre{position:static}}
@media (max-width:520px){.chiffres{grid-template-columns:1fr 1fr}.chiffre:last-child{grid-column:span 2}}

/* ---------- Cartes des travaux et sliders ---------- */
.slider{position:relative}
.slider__piste{display:flex;gap:clamp(16px,2vw,28px);overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--marge);padding-inline:var(--marge);padding-bottom:6px;scrollbar-width:none;overscroll-behavior-x:contain;cursor:grab}
.slider__piste::-webkit-scrollbar{display:none}
.slider__piste.est-tire{cursor:grabbing;scroll-snap-type:none}
.slider__piste.est-tire *{pointer-events:none}
.slider__piste>*{scroll-snap-align:start;flex:none}
.slider__bas{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:28px}
.slider__barre{flex:1;height:2px;background:var(--filet);position:relative;max-width:420px;border-radius:2px}
.slider__barre i{position:absolute;left:0;top:-1px;height:4px;width:var(--p,10%);background:var(--accent);border-radius:4px;transition:width .3s var(--ease)}
.slider__compteur{font:600 14px var(--f-t);letter-spacing:.08em;color:var(--texte-3);font-variant-numeric:tabular-nums}
.carte-trav{width:clamp(280px,38vw,560px);text-decoration:none;color:var(--texte);display:block}
.carte-trav__media{position:relative;aspect-ratio:4/5;overflow:hidden;border-radius:var(--r);background:var(--cafe-800)}
.carte-trav__media picture,.carte-trav__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.carte-trav__media .alt-img{opacity:0;transition:opacity .6s var(--ease)}
.carte-trav__media .alt-img.est-active{opacity:1}
.carte-trav__voir{position:absolute;right:16px;bottom:16px;width:58px;height:58px;border-radius:50%;background:var(--mou);color:var(--cafe);display:grid;place-items:center;transform:translateY(12px);opacity:0;transition:transform .4s var(--ease-out),opacity .4s}
.carte-trav__voir svg{width:22px;height:22px}
.carte-trav:hover .carte-trav__voir,.carte-trav:focus-visible .carte-trav__voir{transform:none;opacity:1}
.carte-trav__info{padding-top:18px;display:grid;gap:6px}
.carte-trav__client{font:800 clamp(1.3rem,1.1rem + .8vw,1.8rem)/1.1 var(--f-t);letter-spacing:-.02em}
.carte-trav__quoi{font-size:15.5px;color:var(--texte-2);line-height:1.45}
.carte-trav:hover .carte-trav__client{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.18em}
.etiquettes{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px;padding:0;list-style:none}
.etiquettes li{font:600 11.5px/1 var(--f-t);letter-spacing:.08em;text-transform:uppercase;padding:7px 10px;border-radius:999px;border:1.5px solid var(--filet);color:var(--texte-2)}
.carte-trav--paysage{width:clamp(300px,52vw,820px)}
.carte-trav--paysage .carte-trav__media{aspect-ratio:16/10}

/* ---------- Métiers ---------- */
.metiers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.4vw,20px)}
.metier{position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-height:clamp(300px,30vw,420px);padding:26px;border-radius:var(--r);overflow:hidden;color:var(--bone);text-decoration:none;isolation:isolate;background:var(--cafe)}
.metier__img{position:absolute;inset:0;z-index:-2}
.metier__img img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.metier::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(33,26,28,.58);transition:background-color .45s var(--ease)}
.metier:hover::before,.metier:focus-visible::before{background:rgba(137,23,54,.9)}
.metier__num{position:absolute;top:22px;left:26px;font:600 13px var(--f-t);letter-spacing:.12em;color:var(--mou)}
.metier__picto{position:absolute;top:14px;right:14px;width:76px;height:76px;border-radius:50%;background:var(--bone);display:grid;place-items:center;padding:10px}
.metier__picto svg,.metier__picto img{width:100%;height:100%}
.metier__nom{font:800 clamp(1.35rem,1.1rem + .9vw,1.9rem)/1.08 var(--f-t);letter-spacing:-.02em}
.metier__promesse{max-height:0;opacity:0;overflow:hidden;font-size:15.5px;line-height:1.45;color:#F1DDD9;transition:max-height .5s var(--ease),opacity .4s,margin .4s}
.metier:hover .metier__promesse,.metier:focus-visible .metier__promesse{max-height:9em;opacity:1;margin-top:10px}
.metier__lien{display:inline-flex;align-items:center;gap:8px;font:600 13.5px var(--f-t);margin-top:12px;color:var(--mou)}
.metier__lien svg{width:16px;height:16px}
@media (hover:none){.metier__promesse{max-height:none;opacity:1;margin-top:10px}}
@media (max-width:980px){.metiers{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.metiers{grid-template-columns:1fr}.metier{min-height:280px}}
.metier--studio{background:var(--clay)}
.bande-studio{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:20px 36px;margin-top:clamp(16px,2vw,24px);padding:clamp(22px,2.6vw,34px);border-radius:var(--r);background:var(--clay);color:var(--blanc)}
.bande-studio img{height:30px;width:auto}
.bande-studio p{margin:0;font-size:16.5px;line-height:1.5}
.bande-studio .btn--contour{color:var(--blanc)}
.bande-studio .btn--contour:hover{background:var(--blanc);color:var(--clay)}
@media (max-width:860px){.bande-studio{grid-template-columns:1fr}}

/* ---------- L'intelligence culturelle en cases ---------- */
.bd{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2vw,28px);align-items:start}
.bd__case{margin:0}
.bd__cadre{border:5px solid var(--cafe);border-radius:3px;overflow:hidden;background:var(--bone);transform:rotate(var(--rot,0deg))}
.bd__case:nth-child(1){--rot:-1.2deg}
.bd__case:nth-child(2){--rot:.9deg;margin-top:clamp(20px,3vw,48px)}
.bd__case:nth-child(3){--rot:-.6deg}
.bd__case figcaption{margin-top:20px;font-size:16px;line-height:1.5;color:var(--texte-2)}
.bd__case figcaption b{display:block;font:800 13px var(--f-t);letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin-bottom:6px}
.bd__case--barree{position:relative}
.bd__croix{position:absolute;right:-18px;top:-22px;width:64px;color:var(--bx)}
@media (max-width:860px){.bd{grid-template-columns:1fr}.bd__case:nth-child(2){margin-top:0}}
.temps{list-style:none;margin:clamp(40px,5vw,80px) 0 0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;position:relative}
.temps::before{content:"";position:absolute;left:5%;right:5%;top:52px;border-top:2px dashed var(--cafe-300)}
.temps li{position:relative;text-align:center;padding:0 6px}
.temps__picto{width:104px;height:104px;margin:0 auto 14px;border-radius:50%;background:var(--fond);border:2px solid var(--cafe-200);display:grid;place-items:center;padding:14px;position:relative}
.temps__picto svg{width:100%;height:100%}
.temps b{display:block;font:800 16px/1.2 var(--f-t);margin-bottom:6px}
.temps span{display:block;font-size:14.5px;line-height:1.45;color:var(--texte-2)}
.temps .n{position:absolute;top:-4px;left:calc(50% + 28px);font:800 12px var(--f-t);background:var(--bx);color:var(--bone);border-radius:999px;padding:4px 8px}
@media (max-width:900px){.temps{grid-template-columns:1fr 1fr;row-gap:28px}.temps::before{display:none}.temps li:last-child{grid-column:span 2}}

/* ---------- La rue des Kases : la rue défile à l'horizontale pendant la descente ----------
   Une rangée d'enseignes au-dessus de chaque maison (positions en % de la largeur de l'illustration),
   puis le forum IA Connect Africa au bout. Téléphone et mouvement réduit : défilement horizontal natif. */
.rue{position:relative;padding-block:var(--s-y)}
.rue__tete{margin-bottom:clamp(18px,2.4vw,36px)}
.rue__scene{position:relative}
.rue__piste{display:flex;align-items:flex-end;gap:clamp(24px,3vw,56px);padding-inline:var(--marge);width:max-content;will-change:transform}
.rue__troncon{position:relative;flex:none;display:flex;flex-direction:column}
.rue__enseignes{position:relative;height:var(--ens-h,236px)}
.rue__image{height:var(--rue-img,clamp(260px,44vh,520px))}
.rue__image picture{height:100%}
.rue__image img{height:100%;width:auto;max-width:none}
.rue__troncon--forum .rue__image img{border-radius:var(--r)}
.rue .kase{--kw:clamp(186px,14.5vw,236px);position:absolute;bottom:18px;left:var(--x);width:var(--kw);margin-left:calc(var(--kw) / -2);min-height:0;padding:16px 16px 18px;gap:8px}
.rue .kase::after{content:"";position:absolute;left:50%;top:100%;height:18px;border-left:2px dashed var(--cafe-500)}
.rue .kase p{font-size:14px;line-height:1.4}
.rue .kase__signature{font-size:1.12rem}
.rue .kase img.kase__logo{height:22px}
.rue .kase__endos{height:auto;width:150px}
.rue:not(.rue--active) .rue__scene{overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:thin;padding-bottom:10px}
.js .rue--active{height:var(--rue-h,260vh);padding-block:0}
.js .rue--active .rue__collant{position:sticky;top:0;height:100svh;display:flex;flex-direction:column;justify-content:center;overflow:hidden;padding-top:calc(var(--entete-h) * .6)}
.js .rue--active .rue__image{height:clamp(240px,calc(100svh - 500px),540px)}
.rue__progression{height:3px;background:var(--filet);margin-top:18px;border-radius:3px;overflow:hidden}
.rue__progression i{display:block;height:100%;width:100%;background:var(--bx);transform-origin:left;transform:scaleX(var(--p,0))}
.rue:not(.rue--active) .rue__progression{display:none}
.kase{border-radius:var(--r);padding:20px 20px 22px;display:flex;flex-direction:column;gap:10px;min-height:190px;transition:transform .35s var(--ease)}
.kase:hover{transform:translateY(-3px)}
.kase img.kase__logo{height:26px;width:auto;max-width:100%;object-fit:contain;object-position:left}
.kase p{margin:0;font-size:15px;line-height:1.45}
.kase__signature{font:500 italic 1.3rem/1.2 var(--f-c);margin-top:auto!important}
.kase__nom{font:800 1.15rem/1.1 var(--f-t)}
.kase--mere{background:var(--bx);color:var(--bone)}
.kase--studio{background:var(--clay);color:var(--blanc)}
.kase--music{background:var(--prune);color:var(--bone)}
.kase--campus{background:var(--campus);color:var(--cafe)}
.kase--ia{background:var(--cafe);color:var(--bone)}
@media (max-width:640px){.rue .kase{--kw:176px;padding:13px 13px 14px}.rue .kase p{font-size:13px}.rue__enseignes{--ens-h:220px}.rue__image{--rue-img:300px}}

/* ---------- Exergue sombre (pourquoi ça compte) ---------- */
.exergue{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(32px,5vw,90px);align-items:center}
.exergue__img{position:relative}
.exergue__img picture{border-radius:var(--r);overflow:hidden}
.exergue .citation{margin:18px 0 26px}
.exergue .citation .mot-fort>.crayon--souligne{bottom:-.08em}
.exergue__coeur{position:absolute;width:74px;right:-20px;top:-30px;color:var(--bone)}
@media (max-width:900px){.exergue{grid-template-columns:1fr}}

/* ---------- Logos des références ---------- */
.logos{overflow:hidden}
.logos__piste{display:flex;align-items:center;gap:18px;width:max-content;animation:mq-defile 48s linear infinite}
.logos:hover .logos__piste{animation-play-state:paused}
.logos__item{flex:none;width:210px;height:112px;display:grid;place-items:center;background:var(--blanc);border:1px solid var(--cafe-200);border-radius:var(--r);padding:18px}
.logos__item img{max-height:66px;width:auto;max-width:150px;object-fit:contain}
.references-note{margin-top:22px}

/* ---------- Cartes articles (Tendances) ---------- */
.articles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2.4vw,36px)}
.article-carte{display:flex;flex-direction:column;text-decoration:none;color:var(--texte)}
.article-carte__media{aspect-ratio:4/3;border-radius:var(--r);overflow:hidden;background:var(--bone-2);position:relative}
.article-carte__media img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.article-carte__media--contenu img{object-fit:contain;padding:6%}
.article-carte__meta{display:flex;flex-wrap:wrap;gap:6px 14px;margin:18px 0 10px;font:600 12.5px var(--f-t);letter-spacing:.08em;text-transform:uppercase;color:var(--texte-3)}
.article-carte__meta .tag{color:var(--accent)}
.article-carte__titre{font:800 clamp(1.25rem,1.05rem + .7vw,1.6rem)/1.16 var(--f-t);letter-spacing:-.02em;margin-bottom:10px}
.article-carte:hover .article-carte__titre{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.16em}
.article-carte__chapo{font-size:16px;color:var(--texte-2);line-height:1.5;margin:0}
.article-carte--une{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(24px,4vw,64px);align-items:center}
.article-carte--une .article-carte__media{aspect-ratio:16/10}
.article-carte--une .article-carte__titre{font-size:clamp(1.8rem,1.3rem + 2vw,3rem);line-height:1.05}
@media (max-width:980px){.articles{grid-template-columns:1fr 1fr}.article-carte--une{grid-template-columns:1fr}}
@media (max-width:640px){.articles{grid-template-columns:1fr}}

/* ---------- Appel final « Prenons un café » ---------- */
.cafe{position:relative;overflow:hidden}
.cafe__grille{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:clamp(24px,5vw,80px);align-items:center}
.cafe__titre{font:800 clamp(3.2rem,1.4rem + 7vw,8.4rem)/.92 var(--f-t);letter-spacing:-.045em}
.cafe__tasse{width:min(340px,100%);margin-inline:auto;color:var(--bone)}
.cafe__trame{position:absolute;right:0;top:0;bottom:0;width:32%;background:url("../img/motif/motif-blanc-sur-bordeaux.webp") 0 0/300px 300px repeat;opacity:.55;pointer-events:none;z-index:0}
.cafe .env{position:relative;z-index:1}
.cafe__contacts{display:flex;flex-wrap:wrap;gap:10px 28px;margin-top:22px;font-size:16px}
.cafe__contacts a{color:var(--bone);text-decoration:none;border-bottom:1px solid rgba(242,236,223,.4)}
.cafe__contacts a:hover{border-bottom-color:var(--mou)}
@media (max-width:860px){.cafe__grille{grid-template-columns:1fr}.cafe__trame{width:100%;height:40%;top:auto;opacity:.25}.cafe__tasse{width:200px;margin:0}}

/* ---------- Pied de page ---------- */
.pied{padding-top:clamp(56px,7vw,100px)}
.pied__haut{display:grid;grid-template-columns:minmax(0,1.3fr) repeat(3,minmax(0,1fr));gap:36px}
.pied__marque img{width:220px;height:auto}
.pied__marque p{margin-top:18px;color:var(--texte-2);max-width:34ch;font-size:15.5px}
.pied h2{font:600 12.5px var(--f-t);letter-spacing:.14em;text-transform:uppercase;color:var(--mou);margin-bottom:16px}
.pied ul{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.pied a{text-decoration:none;color:var(--bone);font-size:15.5px}
.pied a:hover{color:var(--mou)}
.pied__bas{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 24px;border-top:1px solid var(--filet);margin-top:clamp(40px,5vw,72px);padding:22px 0 26px;font-size:13px;color:var(--texte-3)}
.pied__bas a{font-size:13px;color:var(--texte-3);text-decoration:underline;text-underline-offset:.2em}
@media (max-width:980px){.pied__haut{grid-template-columns:1fr 1fr}.pied__marque{grid-column:span 2}}
@media (max-width:560px){.pied__haut{grid-template-columns:1fr}.pied__marque{grid-column:auto}}

/* ---------- Bouton WhatsApp flottant ---------- */
.wa{position:fixed;right:18px;bottom:18px;z-index:55;width:58px;height:58px;border-radius:50%;background:var(--bx);color:var(--bone);display:grid;place-items:center;text-decoration:none;border:2px solid var(--bone);transition:transform .3s var(--ease),background-color .3s}
.wa:hover{background:var(--cafe);transform:translateY(-3px)}
.wa svg{width:28px;height:28px}
.wa__bulle{position:absolute;right:70px;white-space:nowrap;background:var(--cafe);color:var(--bone);font:600 13px var(--f-t);padding:8px 12px;border-radius:999px;opacity:0;transform:translateX(8px);transition:opacity .3s,transform .3s;pointer-events:none}
.wa:hover .wa__bulle,.wa:focus-visible .wa__bulle{opacity:1;transform:none}
@media (max-width:640px){.wa{width:52px;height:52px;right:14px;bottom:14px}.wa__bulle{display:none}}

/* ---------- Apparitions au défilement ---------- */
.js [data-rev]{opacity:0;transform:translateY(22px);transition:opacity .8s var(--ease-out),transform .9s var(--ease-out);transition-delay:calc(var(--i,0) * 90ms)}
.js [data-rev="gauche"]{transform:translateX(-26px)}
.js [data-rev="droite"]{transform:translateX(26px)}
.js [data-rev="echelle"]{transform:translateY(30px)}
.js [data-rev].est-visible{opacity:1;transform:none}
.js [data-mots] .m{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.08em;margin-bottom:-.08em}
.js [data-mots] .m>span{display:inline-block;transform:translateY(105%);transition:transform .9s var(--ease-out);transition-delay:calc(var(--j,0) * 55ms + var(--d0,0ms))}
.js [data-mots].est-visible .m>span{transform:none}
.js [data-voile]{clip-path:inset(0 0 100% 0);transition:clip-path 1.1s var(--ease-out)}
.js [data-voile].est-visible{clip-path:inset(0 0 0 0)}
.js [data-dessin]{clip-path:inset(0 100% 0 0);transition:clip-path 2.4s cubic-bezier(.45,.05,.3,1)}
.js [data-dessin].est-visible{clip-path:inset(0 0 0 0)}

/* ---------- Pages intérieures : blocs communs ---------- */
.deux-col{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(28px,5vw,96px);align-items:start}
.deux-col--centre{align-items:center}
@media (max-width:900px){.deux-col{grid-template-columns:1fr}}
.cadre-img{border-radius:var(--r);overflow:hidden;position:relative}
.cadre-img img{width:100%;height:100%;object-fit:cover}
.legende{margin-top:10px;font-size:13.5px;line-height:1.45;color:var(--texte-3)}
.legende-ia{font-style:italic}
.citation-bloc{position:relative;padding:clamp(28px,4vw,56px) 0}
.citation-bloc .guillemets{position:absolute;left:-8px;top:0;width:clamp(60px,6vw,90px);color:var(--trait-fort)}
.citation-bloc blockquote{margin:0;padding-left:clamp(50px,7vw,110px)}
.citation-bloc cite{display:block;margin-top:18px;font:600 14px var(--f-t);font-style:normal;letter-spacing:.06em;text-transform:uppercase;color:var(--texte-3)}

/* Frise (la maison) */
.frise{position:relative}
.frise .slider__piste{align-items:stretch}
.jalon{width:clamp(270px,30vw,400px);display:flex;flex-direction:column;gap:14px}
.jalon__annee{font:800 clamp(2.6rem,1.8rem + 2.6vw,4.2rem)/1 var(--f-t);letter-spacing:-.04em;color:var(--accent);position:relative;display:inline-block;align-self:flex-start}
.jalon__media{aspect-ratio:4/3;border-radius:var(--r);overflow:hidden;background:var(--bone-2);border:1px solid var(--filet)}
.jalon__media img{width:100%;height:100%;object-fit:cover}
.jalon__media--contenu img{object-fit:contain;padding:8%}
.jalon p{margin:0;font-size:15.5px;line-height:1.5;color:var(--texte-2)}
.jalon h3{font:800 1.12rem/1.25 var(--f-t)}
.frise__ligne{position:absolute;left:0;right:0;top:calc(clamp(2.6rem,1.8rem + 2.6vw,4.2rem) * .5);border-top:2px dashed var(--filet);pointer-events:none}

/* Années de doute (fondu nuit / matin) */
.doute{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(28px,5vw,80px);align-items:center}
.doute__images{position:relative;border:5px solid var(--bone);border-radius:3px;overflow:hidden;background:var(--cafe)}
.doute__images picture{position:relative}
.doute__images .matin{position:absolute;inset:0;opacity:var(--matin,0);transition:opacity .2s linear}
.doute__images .matin img{width:100%;height:100%;object-fit:cover}
@media (max-width:900px){.doute{grid-template-columns:1fr}}

/* Valeurs */
.valeurs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,1.6vw,24px)}
.valeur{background:var(--blanc);border:1px solid var(--cafe-200);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column}
.valeur__img{aspect-ratio:1;background:var(--bone);border-bottom:1px solid var(--cafe-200)}
.valeur__img img{width:100%;height:100%;object-fit:cover}
.valeur__corps{padding:20px 20px 22px;display:flex;flex-direction:column;gap:12px;flex:1}
.valeur__num{font:600 12.5px var(--f-t);letter-spacing:.12em;color:var(--bx)}
.valeur h3{font:800 1.35rem/1.12 var(--f-t);letter-spacing:-.02em}
.valeur p{margin:0;font-size:15px;line-height:1.5;color:var(--cafe-700)}
.onglets{display:flex;gap:6px;margin-top:auto;padding-top:6px}
.onglets button{flex:1;border:1.5px solid var(--cafe-200);background:none;border-radius:999px;padding:8px 10px;font:600 12.5px var(--f-t);color:var(--cafe-700)}
.onglets button[aria-selected="true"]{background:var(--cafe);color:var(--bone);border-color:var(--cafe)}
.onglet-panneau{font-size:14.5px;line-height:1.5;color:var(--cafe-700)}
.onglet-panneau ul{margin:0;padding-left:1.1em}
.onglet-panneau li{margin-bottom:6px}
.onglet-panneau[hidden]{display:none}
@media (max-width:1100px){.valeurs{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.valeurs{grid-template-columns:1fr}}

/* Fondateur */
.fondateur{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,5vw,90px);align-items:center}
.fondateur__img{border-radius:var(--r);overflow:hidden;background:var(--bx)}
.fondateur blockquote{margin:28px 0 0;padding:22px 0 0;border-top:2px solid var(--filet)}
.fondateur blockquote p{font:500 italic clamp(1.4rem,1.1rem + 1vw,1.9rem)/1.25 var(--f-c);margin-bottom:10px}
@media (max-width:900px){.fondateur{grid-template-columns:1fr}.fondateur__img{max-width:520px}}

/* Engagements */
.engagements{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(24px,4vw,64px)}
.engagements li{display:grid;grid-template-columns:44px 1fr;gap:14px;align-items:start;padding:18px 0;border-top:1px solid var(--filet);font-size:16.5px;line-height:1.5}
.engagements .coche{width:40px;color:var(--mou);margin-top:-4px}
@media (max-width:800px){.engagements{grid-template-columns:1fr}}

/* Kases détaillées (page Maison) */
.kases-detail{display:grid;gap:clamp(18px,2vw,28px)}
.kase-detail{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);border-radius:var(--r);overflow:hidden;min-height:340px}
.kase-detail:nth-child(even){grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}
.kase-detail:nth-child(even) .kase-detail__img{order:2}
.kase-detail__img{background:var(--bone-2)}
.kase-detail__img img{width:100%;height:100%;object-fit:cover}
.kase-detail__corps{padding:clamp(26px,3.6vw,52px);display:flex;flex-direction:column;justify-content:center;gap:14px}
.kase-detail__corps img.logo-kase{height:34px;width:auto;align-self:flex-start}
.kase-detail__corps p{margin:0;font-size:16.5px;line-height:1.55}
.kase-detail__signature{font:500 italic clamp(1.5rem,1.2rem + 1vw,2.1rem)/1.15 var(--f-c)}
.kase-detail--studio{background:var(--clay);color:var(--blanc)}
.kase-detail--music{background:var(--prune);color:var(--bone)}
.kase-detail--campus{background:var(--campus);color:var(--cafe)}
.kase-detail--ia{background:var(--cafe);color:var(--bone)}
.kase-detail--mere{background:var(--bx);color:var(--bone)}
.kase-detail a{color:inherit}
@media (max-width:860px){.kase-detail,.kase-detail:nth-child(even){grid-template-columns:1fr}.kase-detail:nth-child(even) .kase-detail__img{order:0}.kase-detail__img{aspect-ratio:16/9}}

/* Métiers (page) : rangées alternées */
.route{position:relative}
.metier-ligne{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,5vw,90px);align-items:center;padding-block:clamp(36px,5vw,72px);border-top:1px solid var(--filet)}
.metier-ligne:nth-child(even) .metier-ligne__media{order:2}
.metier-ligne__media{position:relative}
.metier-ligne__media .cadre-img{aspect-ratio:4/3;background:var(--bone-2)}
.metier-ligne__picto{position:absolute;left:-20px;bottom:-24px;width:112px;height:112px;border-radius:50%;background:var(--bone);border:2px solid var(--cafe);padding:14px}
.metier-ligne:nth-child(even) .metier-ligne__picto{left:auto;right:-20px}
.metier-ligne__num{font:800 13px var(--f-t);letter-spacing:.14em;color:var(--accent)}
.metier-ligne h2{font:800 clamp(1.8rem,1.3rem + 2vw,3rem)/1.04 var(--f-t);letter-spacing:-.03em;margin:10px 0 16px}
.metier-ligne .promesse{font:500 italic clamp(1.3rem,1.1rem + .8vw,1.7rem)/1.25 var(--f-c);color:var(--texte);margin:18px 0}
.metier-ligne ul{margin:0 0 20px;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.metier-ligne ul li{font:600 13px var(--f-t);border:1.5px solid var(--filet);border-radius:999px;padding:7px 12px;color:var(--texte-2)}
@media (max-width:900px){.metier-ligne{grid-template-columns:1fr}.metier-ligne:nth-child(even) .metier-ligne__media{order:0}.metier-ligne__picto{width:84px;height:84px;left:auto;right:14px;bottom:-20px}}

.conseil-studio{display:grid;grid-template-columns:1fr 1fr;border-radius:var(--r);overflow:hidden}
.conseil-studio>div{padding:clamp(28px,4vw,64px);min-height:300px;display:flex;flex-direction:column;justify-content:flex-end;gap:12px}
.conseil-studio .gauche{background:var(--bx);color:var(--bone)}
.conseil-studio .droite{background:var(--clay);color:var(--blanc)}
.conseil-studio .titre-2 .pt{color:var(--mou)}
@media (max-width:760px){.conseil-studio{grid-template-columns:1fr}}

/* ---------- Travaux : page index ---------- */
.filtres{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:clamp(28px,3vw,44px)}
.filtres button{border:1.5px solid var(--cafe-300);background:none;border-radius:999px;padding:10px 16px;font:600 13.5px var(--f-t);color:var(--cafe-700);transition:background-color .2s,color .2s,border-color .2s}
.filtres button:hover{border-color:var(--cafe)}
.filtres button[aria-pressed="true"]{background:var(--cafe);border-color:var(--cafe);color:var(--bone)}
.grille-trav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(28px,3.4vw,56px) clamp(18px,2.4vw,36px)}
.grille-trav .carte-trav{width:auto}
.grille-trav .carte-trav:nth-child(4n+2),.grille-trav .carte-trav:nth-child(4n+3){--decal:0}
.grille-trav .carte-trav__media{aspect-ratio:4/3}
.grille-trav .carte-trav.est-cache{display:none}
.carte-trav__points{position:absolute;left:14px;bottom:14px;display:flex;gap:5px}
.carte-trav__points i{width:7px;height:7px;border-radius:50%;background:rgba(242,236,223,.55)}
.carte-trav__points i.est-active{background:var(--mou)}
@media (max-width:760px){.grille-trav{grid-template-columns:1fr}}
.refs-simples{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.ref-simple{display:grid;grid-template-columns:96px 1fr;gap:16px;align-items:center;padding:16px;border:1px solid var(--cafe-200);border-radius:var(--r);background:var(--blanc)}
.ref-simple__media{width:96px;height:96px;border-radius:6px;overflow:hidden;background:var(--bone);display:grid;place-items:center}
.ref-simple__media img{width:100%;height:100%;object-fit:cover}
.ref-simple__media--logo img{object-fit:contain;padding:10px}
.ref-simple b{display:block;font:800 16px/1.2 var(--f-t)}
.ref-simple span{display:block;font-size:14px;line-height:1.4;color:var(--cafe-700);margin-top:4px}
@media (max-width:980px){.refs-simples{grid-template-columns:1fr 1fr}}
@media (max-width:620px){.refs-simples{grid-template-columns:1fr}}

/* ---------- Page projet ---------- */
.proj-hero{padding-top:calc(var(--entete-h) + clamp(24px,4vw,56px))}
.proj-hero__tete{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:24px 60px;align-items:end;margin-bottom:clamp(24px,3vw,44px)}
.proj-hero__tete .chapo{max-width:52ch}
@media (max-width:900px){.proj-hero__tete{grid-template-columns:1fr}}
/* Galerie : chaque cadre prend le format de son image (--ratio posé par le générateur), même hauteur pour tous,
   sans bande vide ni image coupée ; jamais plus large que l'écran. */
.galerie .slider__piste{align-items:flex-start}
.galerie__item{margin:0;display:flex;flex-direction:column;--h:clamp(320px,64vh,680px)}
.galerie__item button{flex:none;width:min(calc(var(--h) * var(--ratio,1.5)),88vw);aspect-ratio:var(--ratio,1.5);border:0;padding:0;background:var(--cafe-800);border-radius:var(--r);overflow:hidden;cursor:zoom-in}
.galerie__item picture{height:100%}
.galerie__item img{width:100%;height:100%;object-fit:contain}
.galerie__item figcaption{padding-top:10px;font-size:13.5px;line-height:1.4;color:var(--texte-3);max-width:min(44ch,88vw)}
@media (max-width:640px){.galerie__item{--h:min(58vh,480px)}}
.fiche{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;border-top:2px solid var(--texte);border-bottom:1px solid var(--filet)}
.fiche div{padding:18px 18px 20px 0}
.fiche dt{font:600 12px var(--f-t);letter-spacing:.14em;text-transform:uppercase;color:var(--texte-3);margin-bottom:6px}
.fiche dd{margin:0;font:700 16px/1.35 var(--f-t)}
@media (max-width:800px){.fiche{grid-template-columns:1fr 1fr}}
.recit{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:clamp(24px,5vw,90px)}
.recit__bloc+.recit__bloc{margin-top:clamp(36px,4vw,56px)}
.recit h2{font:800 clamp(1.5rem,1.2rem + 1.2vw,2.2rem)/1.1 var(--f-t);letter-spacing:-.02em;margin-bottom:14px}
.recit p{font-size:17.5px;color:var(--texte-2)}
.recit__aside{position:sticky;top:calc(var(--entete-h) + 32px);align-self:start}
.recit__aside .a-retenir{width:190px;color:var(--bx)}
@media (max-width:900px){.recit{grid-template-columns:1fr}.recit__aside{position:static}}
.proj-suite{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,28px)}
.proj-suite .carte-trav{width:auto}
.proj-suite .carte-trav__media{aspect-ratio:4/3}
@media (max-width:900px){.proj-suite{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.proj-suite{grid-template-columns:1fr}}
.nav-proj{display:flex;justify-content:space-between;gap:20px;border-top:1px solid var(--filet);padding-top:24px;margin-top:clamp(40px,5vw,72px)}
.nav-proj a{text-decoration:none;display:grid;gap:4px;max-width:48%}
.nav-proj a span{font:600 12.5px var(--f-t);letter-spacing:.12em;text-transform:uppercase;color:var(--texte-3)}
.nav-proj a b{font:800 clamp(1.1rem,1rem + .6vw,1.5rem)/1.15 var(--f-t)}
.nav-proj a:hover b{color:var(--accent)}
.nav-proj a:last-child{text-align:right;margin-left:auto}

/* Visionneuse (galeries) */
.visionneuse{padding:0;border:0;background:transparent;max-width:none;max-height:none;width:100vw;height:100vh;height:100dvh;margin:0;color:var(--bone)}
.visionneuse::backdrop{background:rgba(33,26,28,.96)}
.visionneuse[open]{display:grid;grid-template-rows:auto 1fr auto}
.visionneuse__haut{display:flex;justify-content:space-between;align-items:center;padding:16px var(--marge)}
.visionneuse__compteur{font:600 14px var(--f-t);letter-spacing:.1em}
.visionneuse__scene{position:relative;display:grid;place-items:center;min-height:0;padding:0 72px}
.visionneuse__scene img{max-width:100%;max-height:calc(100dvh - 180px);width:auto;height:auto;object-fit:contain;border-radius:4px}
.visionneuse__prec,.visionneuse__suiv{position:absolute;top:50%;transform:translateY(-50%);width:54px;height:54px;border-radius:50%;border:2px solid var(--bone);background:rgba(33,26,28,.5);color:var(--bone);display:grid;place-items:center}
.visionneuse__prec{left:12px}.visionneuse__suiv{right:12px}
.visionneuse__prec:hover,.visionneuse__suiv:hover{background:var(--bone);color:var(--cafe)}
.visionneuse__prec svg,.visionneuse__suiv svg{width:20px;height:20px}
.visionneuse__legende{padding:14px var(--marge) 22px;text-align:center;font-size:14.5px;color:#D9D1C2}
@media (max-width:640px){.visionneuse__scene{padding:0 8px}.visionneuse__prec,.visionneuse__suiv{top:auto;bottom:-64px;transform:none}}

/* ---------- Article (Tendances) ---------- */
.progression{position:fixed;left:0;top:0;height:3px;width:100%;z-index:70;transform-origin:left;transform:scaleX(var(--p,0));background:var(--bx)}
.article-hero{padding:calc(var(--entete-h) + clamp(32px,6vw,90px)) 0 clamp(28px,4vw,56px)}
.article-hero .titre-1{max-width:18ch;font-size:clamp(2.3rem,1.3rem + 3.6vw,4.6rem)}
.article-hero__meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px 20px;margin-top:28px;font-size:15px;color:var(--texte-2)}
.auteur{display:flex;align-items:center;gap:12px}
.auteur img{width:48px;height:48px;border-radius:50%;object-fit:cover;background:var(--bx)}
.auteur b{display:block;font:700 15px var(--f-t);color:var(--texte)}
.article-couv{margin:0 auto clamp(40px,5vw,72px);max-width:1320px;padding-inline:var(--marge)}
.article-couv .cadre-img{aspect-ratio:21/9;background:var(--bone-2)}
.article-couv--contenu .cadre-img img{object-fit:contain}
.article__grille{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,680px) minmax(0,1fr);gap:0 40px}
.article__corps{grid-column:2;font-size:18.5px;line-height:1.72;color:var(--cafe-700)}
.article__corps>p:first-child{font:300 clamp(1.3rem,1.15rem + .6vw,1.6rem)/1.5 var(--f-x);color:var(--cafe)}
.article__corps h2{font:800 clamp(1.5rem,1.25rem + 1vw,2.1rem)/1.12 var(--f-t);letter-spacing:-.02em;color:var(--cafe);margin:2em 0 .7em}
.article__corps h3{font:700 1.2rem/1.25 var(--f-t);color:var(--cafe);margin:1.6em 0 .5em}
.article__corps strong{color:var(--cafe)}
.article__corps ul,.article__corps ol{margin:0 0 1.2em}
.article__corps li{margin-bottom:.45em}
.article__corps blockquote{margin:2em 0;padding:0 0 0 clamp(18px,3vw,36px);border-left:3px solid var(--bx);font:500 italic clamp(1.45rem,1.2rem + 1vw,2rem)/1.28 var(--f-c);color:var(--cafe)}
.article__corps blockquote p{margin:0}
.article__corps figure{margin:2.2em 0}
.article__corps figure.large{margin-inline:calc(-1 * clamp(0px,8vw,140px))}
.article__corps figure img{border-radius:var(--r);width:100%}
.article__corps figcaption{font-size:14px;color:var(--cafe-500);margin-top:10px;line-height:1.45}
.encadre{background:var(--bx-100);border-radius:var(--r);padding:clamp(20px,3vw,32px);margin:2em 0;font-size:17px}
.encadre h3{margin-top:0!important;color:var(--bx)!important}
.encadre p:last-child,.encadre ul:last-child{margin-bottom:0}
.sources{grid-column:2;margin-top:3em;padding-top:1.4em;border-top:2px solid var(--cafe);font-size:14.5px;line-height:1.55;color:var(--cafe-600)}
.sources h2{font:700 14px var(--f-t);letter-spacing:.12em;text-transform:uppercase;color:var(--cafe);margin-bottom:12px}
.sources ol{padding-left:1.3em;margin:0}
.sources li{margin-bottom:8px;overflow-wrap:anywhere}
.sources a{color:var(--bx)}
.note-apres{grid-column:2;font-size:14.5px;color:var(--cafe-500);margin-top:1.6em}
@media (max-width:900px){.article__grille{grid-template-columns:1fr}.article__corps,.sources,.note-apres{grid-column:1}.article__corps figure.large{margin-inline:0}}

/* ---------- Le film (page) ---------- */
.film-page__lecteur{border-radius:var(--r);overflow:hidden;background:#000;aspect-ratio:16/9;position:relative}
.film-page__lecteur video{width:100%;height:100%}
.chapitres{list-style:none;margin:0;padding:0;counter-reset:ch;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(20px,3vw,48px)}
.chapitres li{border-top:1px solid var(--filet)}
.chapitres button{width:100%;display:grid;grid-template-columns:62px 1fr auto;gap:14px;align-items:center;text-align:left;background:none;border:0;padding:14px 0;color:var(--texte)}
.chapitres button:hover .ch-titre,.chapitres button.est-actif .ch-titre{color:var(--accent)}
.chapitres .ch-temps{font:700 14px var(--f-t);color:var(--accent);font-variant-numeric:tabular-nums}
.chapitres .ch-titre{font:700 16px/1.3 var(--f-t)}
.chapitres .ch-img{width:96px;border-radius:4px;overflow:hidden}
.chapitres button.est-actif{box-shadow:inset 3px 0 0 var(--accent);padding-left:12px}
@media (max-width:860px){.chapitres{grid-template-columns:1fr}.chapitres .ch-img{display:none}.chapitres button{grid-template-columns:62px 1fr}}

/* ---------- Contact ---------- */
.contact{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);min-height:100svh}
.contact__gauche{padding:calc(var(--entete-h) + clamp(32px,5vw,72px)) var(--marge) clamp(40px,5vw,72px);position:relative;overflow:hidden}
.contact__gauche .env{padding:0;max-width:560px;margin:0 0 0 auto;position:relative;z-index:1}
.contact__droite{padding:calc(var(--entete-h) + clamp(32px,5vw,72px)) var(--marge) clamp(40px,5vw,72px)}
.contact__droite .env{padding:0;max-width:640px;margin:0}
.contact__canaux{display:grid;gap:14px;margin-top:32px}
.canal{display:grid;grid-template-columns:48px 1fr;gap:14px;align-items:center;text-decoration:none;color:var(--bone);padding:14px 0;border-top:1px solid var(--filet)}
.canal .ic{width:48px;height:48px;border-radius:50%;background:var(--bone);color:var(--bx);display:grid;place-items:center}
.canal .ic svg{width:22px;height:22px}
.canal b{display:block;font:700 17px var(--f-t)}
.canal span{font-size:14.5px;color:var(--texte-2)}
.canal:hover b{color:var(--mou)}
.contact__tasse{width:150px;color:var(--bone);margin-top:36px}
@media (max-width:900px){.contact{grid-template-columns:1fr;min-height:0}.contact__gauche .env{margin:0}.contact__droite{padding-top:48px}}
.form{display:grid;gap:18px}
.form__ligne{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media (max-width:620px){.form__ligne{grid-template-columns:1fr}}
.champ{display:grid;gap:8px}
.champ label{font:700 14px var(--f-x);color:var(--cafe)}
.champ label small{font-weight:400;color:var(--cafe-500)}
.champ input,.champ select,.champ textarea{font:400 16.5px/1.4 var(--f-x);color:var(--cafe);background:var(--blanc);border:1.5px solid var(--cafe-400);border-radius:6px;padding:14px 14px;width:100%;transition:border-color .2s}
.champ textarea{min-height:170px;resize:vertical}
.champ select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 8l5 5 5-5' fill='none' stroke='%23891736' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;background-size:18px;padding-right:44px}
.champ input:focus,.champ select:focus,.champ textarea:focus{outline:none;border-color:var(--bx);box-shadow:0 0 0 1px var(--bx)}
.champ--piege{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.form__bas{display:flex;flex-wrap:wrap;align-items:center;gap:16px 24px}
.form__etat{font-size:15.5px;min-height:1.5em;margin:0}
.form__etat.ok{color:var(--cafe)}
.form__etat.erreur{color:var(--bx)}
.form__note{font-size:13.5px;color:var(--cafe-500);margin:0}
.form__merci{width:120px;color:var(--bx);display:none}
.form__merci.est-visible{display:block}

/* ---------- Mentions légales, 404, merci ---------- */
.legal{font-size:16.5px;color:var(--cafe-700)}
.legal h2{font:800 1.5rem/1.2 var(--f-t);color:var(--cafe);margin:2.2em 0 .6em}
.legal dl{display:grid;grid-template-columns:max-content 1fr;gap:6px 18px;margin:0}
.legal dt{font-weight:700;color:var(--cafe)}
.legal dd{margin:0}
@media (max-width:600px){.legal dl{grid-template-columns:1fr}.legal dd{margin-bottom:8px}}
.erreur-page{min-height:100svh;display:grid;align-items:center;padding:calc(var(--entete-h) + 40px) 0 60px}
.erreur-page .croix{width:90px;color:var(--bx);margin-bottom:24px}

/* ---------- Parallaxe douce ---------- */
.js [data-parallaxe]{will-change:transform}

/* ---------- Transitions entre pages (navigateurs récents) ---------- */
@view-transition{navigation:auto}
::view-transition-old(root){animation:mq-sortie .28s var(--ease) both}
::view-transition-new(root){animation:mq-entree .45s var(--ease-out) both}
@keyframes mq-sortie{to{opacity:0}}
@keyframes mq-entree{from{opacity:0;transform:translateY(8px)}}

/* ---------- Mouvement réduit (réglage du système) ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .defile__piste,.logos__piste{animation:none!important}
  .js [data-rev],.js [data-mots] .m>span{opacity:1!important;transform:none!important}
  .js [data-voile],.js [data-dessin]{clip-path:none!important}
  [data-trace] .t{stroke-dashoffset:0!important}[data-trace] .p{opacity:1!important}
  .crayon-mot{clip-path:none!important}
  .js .intro{display:none!important}
  @view-transition{navigation:none}
}

/* ---------- Impression ---------- */
@media print{
  .entete,.menu,.wa,.hero__controles,.intro,.film-fenetre,.defile,.cafe__trame{display:none!important}
  body{background:#fff;color:#000}
  [data-surf]{background:#fff!important;color:#000!important}
  .js [data-rev]{opacity:1!important;transform:none!important}
  a{text-decoration:underline}
}

/* ==========================================================================
   Compléments du 29/09 (générateur build.py)
   ========================================================================== */
/* En-tête toujours plein (contact, merci, 404) */
.entete[data-ton="plein"]{background:var(--bone);border-bottom-color:var(--cafe-200);color:var(--cafe)}
/* Cartes des travaux : blocs */
.carte-trav__media{display:block}
.carte-trav__info .etiquettes{margin-top:4px}
/* Métiers : la tuile mystiK Studio garde sa couleur Clay */
.metier--studio::before{background:rgba(133,63,49,.72)}
.metier--studio:hover::before,.metier--studio:focus-visible::before{background:rgba(190,84,60,.92)}
.metier--studio .metier__num{color:var(--sable)}
.picto--studio{color:var(--clay)}
/* Les cinq temps */
.temps .temps__picto{display:grid}
.temps .temps__picto svg{width:100%;height:100%}
.temps .n{display:inline-block}
.methode__suite{max-width:52ch;margin-top:clamp(32px,4vw,56px)}
.methode__lien{margin-top:clamp(28px,3vw,44px)}
.temps__note{max-width:300px}
.temps__note p{font-size:15px;color:var(--texte-2);margin:8px 0 0}
/* Bande des logos : deux pistes identiques pour une boucle sans couture */
.logos{display:flex;overflow:hidden}
.logos__piste{list-style:none;margin:0;padding:0 18px 0 0;flex:none}
/* Pourquoi ça compte : l'illustration garde un fond clair */
.exergue__img picture{display:block;background:var(--bone)}
/* Héros de l'accueil : la flèche montre le bouton du film */
.hero__fleche{right:auto;left:clamp(150px,22vw,300px);top:auto;bottom:clamp(-54px,-4vw,-30px);width:86px;transform:rotate(168deg) scaleY(-1);color:var(--mou)}
@media (max-width:860px){.hero__fleche{display:none}}
/* Pages intérieures */
.page-hero__large{margin-top:clamp(32px,5vw,72px)}
.panorama img,.route img{width:100%;height:auto}
.porte-unique{margin-top:clamp(28px,3vw,44px);max-width:70ch;font-size:17px;color:var(--texte-2)}
.porte-unique strong{color:var(--texte)}
.kase-detail__corps .logo-kase{height:34px}
.kase-detail__nom{font:800 clamp(1.6rem,1.3rem + 1vw,2.2rem)/1.05 var(--f-t);letter-spacing:-.02em}
.kase-detail__corps .logo-endos{width:170px;height:auto}
.kase-detail__coeur{width:54px;color:var(--mou);margin:-8px 0 0}
.kase-detail .lien-fleche{color:inherit}
.deploiement__img img{width:100%;height:auto}
.engagements li>span{display:block}
.fondateur blockquote cite{font:600 13px var(--f-t);font-style:normal;letter-spacing:.08em;text-transform:uppercase;color:var(--texte-3)}
.metier-ligne__studio{height:26px;width:auto;margin:-4px 0 6px}
.metier-ligne--studio h2{color:var(--clay-700)}
.metier-ligne__picto{display:grid;place-items:center}
.metier-ligne__picto svg{width:100%;height:100%}
.metier-ligne .legende{margin-top:14px}
.route-metiers .metier-ligne:first-child{border-top:0}
/* Projet */
.proj-hero__actions{margin-top:20px}
.recit__fleche{width:90px;color:var(--bx);margin:4px 0 8px 40px;transform:rotate(12deg)}
.recit__phrase{font:500 italic clamp(1.4rem,1.2rem + .8vw,1.9rem)/1.2 var(--f-c);color:var(--texte);max-width:16ch}
.recit__credits{margin-top:clamp(28px,3vw,40px)}
.galerie__item picture,.galerie__item button{display:block}
/* Articles */
.article__corps blockquote{position:relative}
.guillemets-article{position:absolute;left:clamp(-64px,-5vw,-40px);top:-4px;width:44px;color:var(--cafe-500)}
@media (max-width:900px){.guillemets-article{position:static;width:36px;margin-bottom:8px}}
.auteur picture{flex:none}
.auteur>span{display:block;font-size:14px;line-height:1.3}
.article-carte__media picture{display:block;height:100%}
/* Le film */
.film-page{padding-top:clamp(24px,3vw,40px)}
.film-page__h{margin:clamp(28px,3vw,44px) 0 12px}
.film-page__credits{margin-top:28px}
.chapitres .ch-img picture{display:block}
/* Contact, merci, 404 */
.contact__tasse{width:140px}
.form__note .lien{color:var(--bx)}
.erreur-page__mot{margin-left:6px}
.merci-mot{margin-bottom:18px}
/* Héros : voile uni sur le film, pour que le logo et les boutons blancs restent lisibles sur les scènes claires */
.hero__media::after{content:"";position:absolute;inset:0;background:rgba(33,26,28,.34);pointer-events:none}
@media (max-width:860px){
  .hero__controles{top:calc(var(--entete-h) + 8px);bottom:auto;right:var(--marge)}
  .hero__etiquette{font-size:11px;padding:6px 10px}
}
/* Rue des Kases sur téléphone : indice de glissement */
.rue__indice{display:none;align-items:center;gap:8px;font:600 13px var(--f-t);letter-spacing:.06em;color:var(--texte-3);margin-top:12px}
.rue__indice svg{width:18px;height:18px}
.rue:not(.rue--active) .rue__indice{display:inline-flex}

/* ==========================================================================
   Retouches du 29/09 après relecture de JP : aucun fond beige (blanc, bordeaux, café),
   blocs détachés, promesse d'abord, tasse crayonnée à la place des tirets de surtitre
   ========================================================================== */
:root{--bone:#FFFFFF;--bone-2:#F3F1F1}
body{background:var(--blanc)}
/* Les blocs de couleur sont des cartes posées sur la page : ils ne se touchent jamais */
.s[data-surf="cafe"],.s[data-surf="bx"],.rue[data-surf="cafe"]{margin:clamp(10px,1.4vw,20px) clamp(8px,1.2vw,20px);border-radius:var(--r);overflow:clip}
.s[data-surf="blanc"]+.s[data-surf="blanc"]::before{content:"";position:absolute;top:0;left:var(--marge);right:var(--marge);max-width:calc(var(--conteneur) - 2 * var(--marge));margin-inline:auto;border-top:1px solid #ECEAEA}
/* Surtitre : la tasse crayonnée remplace le tiret */
.surtitre{gap:.7em}
.surtitre::before{width:26px;height:26px;border-radius:0;background:currentColor;-webkit-mask:url("../img/crayonne/tasse-signe.svg") center/contain no-repeat;mask:url("../img/crayonne/tasse-signe.svg") center/contain no-repeat}
/* Héros de l'accueil : le film, seul */
.hero{display:block;min-height:100svh}
.hero__media::after{background:rgba(33,26,28,.22)}
.hero__controles{top:auto;bottom:clamp(18px,4vh,36px);right:var(--marge)}
@media (max-width:860px){
  .hero{min-height:0;height:min(64svh,540px);padding-bottom:0}
  .hero__media{position:absolute;inset:0;height:auto}
  .hero__controles{top:auto;bottom:14px}
}
/* La promesse, et le film au centre */
.promesse{text-align:center}
.promesse .env{display:flex;flex-direction:column;align-items:center}
.promesse .surtitre{justify-content:center}
.promesse__titre{font:800 clamp(2.3rem,1.2rem + 4.2vw,5.4rem)/1.02 var(--f-t);letter-spacing:-.035em;max-width:18ch;margin:0 auto 24px}
.promesse__titre .mot-fort>.crayon--souligne{bottom:-.12em}
.promesse__sous{font:400 clamp(1.08rem,1rem + .45vw,1.4rem)/1.55 var(--f-x);max-width:46ch;margin:0 auto 34px;color:var(--texte-2)}
.promesse__actions{justify-content:center}
.promesse .btn--film{--h:64px;font-size:17px;padding:0 34px 0 30px}
.promesse__signature{margin:44px auto 0}
/* Chiffres plus présents */
.chiffre b{font-size:clamp(3rem,1.8rem + 4vw,5.6rem)}
/* Rue des Kases, sur fond café */
.rue .kase::after{border-left-color:rgba(242,236,223,.55)}
.rue .kase--ia{border:1.5px solid rgba(255,255,255,.35)}
.js .rue--active .rue__image{height:var(--rue-img-h,clamp(240px,calc(100svh - 500px),540px))}
/* Métiers sur fond bordeaux */
[data-surf="bx"] .metier:hover::before,[data-surf="bx"] .metier:focus-visible::before{background:rgba(33,26,28,.88)}
/* Les pictogrammes restent sur un rond blanc */
.temps__picto{background:var(--blanc)!important}
/* Engagements sur fond blanc */
.engagements .coche{color:var(--bx)}
/* Illustrations au trait : toujours sur du blanc */
.deploiement__img{background:var(--blanc);border-radius:var(--r);padding:clamp(12px,2vw,24px)}
.ref-simple{color:var(--cafe)}
/* Menu : formulaire de contact */
.menu__form{display:grid;gap:8px;background:var(--bx-600);border-radius:var(--r);padding:20px}
.menu__form-titre{font:700 18px/1.3 var(--f-t);margin:0 0 6px}
.menu__form label{font:600 13px var(--f-x);color:var(--bone)}
.menu__form input,.menu__form textarea{font:400 15px/1.4 var(--f-x);color:var(--cafe);background:var(--blanc);border:0;border-radius:6px;padding:11px 12px;width:100%}
.menu__form textarea{min-height:84px;resize:vertical}
.menu__form .btn{justify-self:start;margin-top:6px;--h:46px}
.menu__form .form__etat{font-size:14px;color:var(--bone);margin:0}
.menu__form .form__etat.erreur{color:var(--mou)}
.menu__signature{width:min(320px,80%)}
/* La lettre Tendances */
.lettre{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:20px 48px;align-items:center;margin-top:clamp(40px,5vw,72px);padding-top:clamp(28px,3vw,44px);border-top:1px solid var(--filet)}
.env>.lettre:first-child{margin-top:0;padding-top:0;border-top:0}
.lettre__titre{font:800 clamp(1.5rem,1.1rem + 1.4vw,2.3rem)/1.08 var(--f-t);letter-spacing:-.02em;margin:0}
.lettre__texte{margin:10px 0 0;color:var(--texte-2);max-width:46ch}
.lettre__form{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.lettre__form input[type=email]{flex:1 1 240px;min-width:0;font:400 16px var(--f-x);padding:0 18px;height:52px;border-radius:999px;border:1.5px solid var(--filet);background:var(--blanc);color:var(--cafe)}
.lettre__form .form__etat{flex-basis:100%;font-size:14.5px;margin:0}
.lettre__note{flex-basis:100%;font-size:13px;line-height:1.45;color:var(--texte-3);margin:0}
.lettre__note a{color:inherit}
@media (max-width:860px){.lettre{grid-template-columns:1fr}}
.lettre--compacte{grid-template-columns:1fr;gap:12px;margin-top:24px;padding-top:0;border-top:0}
.lettre--compacte .lettre__titre{font-size:15px;letter-spacing:.02em}
.lettre--compacte .lettre__texte{font-size:14.5px;margin-top:4px}
.lettre--compacte input[type=email]{height:46px;font-size:15px}
.lettre--compacte .btn{--h:46px;padding:0 18px}
.pied__signature{margin:18px 0 0}
.contact__signature{margin-top:36px}
.conseil-studio .titre-3{margin:0}
/* Mots manuscrits : le masque se pose sur l'image, pas sur l'élément observé (sinon l'observateur le croit invisible) */
.crayon-mot{clip-path:none!important;animation:none!important}
.crayon-mot>img,.crayon-mot>svg{clip-path:inset(-10% 100% -10% 0)}
.crayon-mot.est-visible>img,.crayon-mot.est-visible>svg{animation:mq-revele var(--duree,.9s) linear var(--delai,0s) forwards}
html:not(.js) .crayon-mot>img,html:not(.js) .crayon-mot>svg{clip-path:none}
@media (prefers-reduced-motion:reduce){.crayon-mot>img,.crayon-mot>svg{clip-path:none!important;animation:none!important}}

/* ==========================================================================
   Retouches du 29/09, second passage (retours de JP après visualisation)
   ========================================================================== */
/* Marron clair des pages intérieures (en-têtes et blocs) : texte café 8,7:1, café 700 5,3:1, bordeaux 4,75:1 */
:root{--brun:#CFB49A}
[data-surf="brun"]{--fond:var(--brun);--texte:var(--cafe);--texte-2:var(--cafe-700);--texte-3:var(--cafe-700);--accent:var(--bx);--trait:var(--cafe-700);--trait-fort:var(--bx);--point:var(--bx);--filet:rgba(33,26,28,.22);--btn-fond:var(--bx);--btn-texte:var(--blanc);--btn-survol:var(--bx-600);--focus:var(--bx)}
.s[data-surf="brun"]{margin:clamp(10px,1.4vw,20px) clamp(8px,1.2vw,20px);border-radius:var(--r);overflow:clip}
[data-surf="brun"] .btn--plein:hover{color:var(--blanc)}

/* En-tête : barre bordeaux, logo cœur blanc, bouton du menu jaune ; transparent seulement sur le film de l'accueil */
.entete{color:var(--bone);--focus:var(--mou)}
.entete,.entete.est-defile,.entete[data-ton]{background:var(--bx);border-bottom-color:rgba(255,255,255,.14);color:var(--bone)}
.entete__menu,.entete[data-ton="sombre"]:not(.est-defile) .entete__menu{background:var(--mou);color:var(--cafe)}
.entete__menu:hover{background:var(--blanc);color:var(--cafe)}
.entete__film .rond,.entete[data-ton="sombre"]:not(.est-defile) .entete__film .rond{background:var(--mou);color:var(--cafe)}
.entete__film:hover .rond{background:var(--blanc);color:var(--bx)}

/* Intro de l'accueil : un peu plus de 10 secondes, deux temps, une barre de progression, « Passer l'intro » */
.intro__scene{position:relative;display:grid;place-items:center;width:min(640px,88vw);min-height:min(420px,70vh)}
.intro__plan{grid-area:1/1;display:grid;justify-items:center;align-content:center;gap:22px;text-align:center}
.intro__plan--1{animation:mq-intro-sortie .7s var(--ease) 4.1s forwards}
.intro__tasse{width:clamp(120px,17vw,180px);color:var(--bone)}
.intro__phrase{margin:0;font:800 clamp(1.5rem,1.05rem + 1.8vw,2.5rem)/1.15 var(--f-t);letter-spacing:-.02em;color:var(--bone)}
.intro__phrase>span{display:inline-block;opacity:0;transform:translateY(.45em);animation:mq-intro-mot .6s var(--ease-out) forwards;animation-delay:calc(1.9s + var(--j,0) * .22s)}
.intro__plan--2{opacity:0;animation:mq-fondu .9s var(--ease-out) 4.7s forwards}
.intro__logo{width:clamp(210px,28vw,320px);opacity:1;transform:none;animation:none}
.intro__mot{width:clamp(240px,30vw,340px);color:var(--mou)}
.intro__ligne{margin:4px 0 0;font:600 13px/1.3 var(--f-t);letter-spacing:.16em;text-transform:uppercase;color:var(--bone);opacity:0;animation:mq-apparait .8s linear 8.2s forwards}
.intro__passer{position:absolute;right:var(--marge);bottom:30px;display:inline-flex;align-items:center;min-height:44px;padding:0 20px;border-radius:999px;border:1.5px solid rgba(255,255,255,.55);background:none;color:var(--bone);font:600 13px var(--f-t);letter-spacing:.1em;text-transform:uppercase;opacity:1;cursor:pointer;transition:background-color .25s,border-color .25s,color .25s}
.intro__passer:hover{background:var(--mou);border-color:var(--mou);color:var(--cafe)}
.intro__passer:focus-visible{outline:2px solid var(--mou);outline-offset:3px}
.intro__barre{position:absolute;left:0;right:0;bottom:0;height:4px;background:rgba(255,255,255,.16)}
.intro__barre i{display:block;height:100%;background:var(--mou);transform-origin:left;transform:scaleX(0);animation:mq-barre 10.2s linear forwards}
@keyframes mq-intro-sortie{to{opacity:0;transform:translateY(-14px)}}
@keyframes mq-intro-mot{to{opacity:1;transform:none}}
@keyframes mq-barre{to{transform:scaleX(1)}}

/* La promesse : le surtitre fait partie du titre (mot-clé visible) */
.promesse__sur{display:flex;justify-content:center;margin:0 auto 22px}
/* Soulignés crayonnés : le trait (au milieu de son dessin) se pose juste sous la ligne de base, jamais sur les lettres,
   quelle que soit la longueur du mot souligné (la hauteur du dessin dépend de sa largeur, d'où le décalage en %) */
.mot-fort>.crayon--souligne,.promesse__titre .mot-fort>.crayon--souligne,.hero__titre .mot-fort>.crayon--souligne{bottom:auto;top:calc(100% - .02em);transform:translateY(-52%)}
.exergue .citation .mot-fort>.crayon--souligne{bottom:auto;top:calc(100% - .14em);transform:translateY(-52%)}

/* Rue des Kases : logo et texte centrés, sans les signatures */
.rue .kase{align-items:center;justify-content:center;text-align:center}
.rue .kase img.kase__logo{object-position:center}

/* Deux colonnes : le grand titre tient dans sa colonne (« Notre raison d'être ») */
.deux-col>*{min-width:0}
.deux-col .titre-1{font-size:clamp(2.2rem,1.3rem + 2.4vw,4rem);overflow-wrap:break-word}

/* La campagne SIGNARE (accueil) : le texte d'abord, la photo ensuite */
.exergue--texte-d-abord{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr)}
.exergue--texte-d-abord .titre-2{margin-bottom:22px}

/* Pied de page : réseaux sociaux, sans la lettre ; mentions centrées */
.pied .pied__reseaux{display:flex;flex-wrap:wrap;gap:10px;margin:22px 0 0;padding:0;list-style:none}
.pied__reseaux a{width:44px;height:44px;border-radius:50%;border:1.5px solid rgba(242,236,223,.35);display:grid;place-items:center;color:var(--bone);transition:background-color .25s,border-color .25s,color .25s}
.pied__reseaux a:hover,.pied__reseaux a:focus-visible{background:var(--mou);border-color:var(--mou);color:var(--cafe)}
.pied__reseaux svg{width:20px;height:20px}
.pied__bas{justify-content:center;text-align:center}
.pied__bas p{margin:0}

/* Fenêtre du film : le lien partageable */
.film-fenetre{--focus:var(--mou)}
.film-fenetre__partage{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin-top:14px;font-size:14.5px;color:#D9D1C2}
.film-fenetre__url{color:var(--bone);font-weight:700;text-decoration:underline;text-underline-offset:.2em;overflow-wrap:anywhere}
.film-fenetre__copier{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 18px;border-radius:999px;border:1.5px solid rgba(242,236,223,.55);background:none;color:var(--bone);font:600 13.5px var(--f-t);transition:background-color .25s,border-color .25s,color .25s}
.film-fenetre__copier svg{width:18px;height:18px}
.film-fenetre__copier:hover{background:var(--mou);border-color:var(--mou);color:var(--cafe)}
.film-fenetre__etat{font-weight:700;color:var(--mou)}

/* Kases détaillées sur téléphone et tablette : l'image en 16/9 ne s'étire plus en hauteur (sinon elle élargit la carte) */
.kase-detail>*{min-width:0}
@media (max-width:860px){
  .kase-detail,.kase-detail:nth-child(even){grid-template-columns:minmax(0,1fr)}
  .kase-detail__img{align-self:start;width:100%}
}
/* Métiers sur téléphone : le pictogramme des rangées paires reste dans l'écran */
@media (max-width:900px){.metier-ligne:nth-child(even) .metier-ligne__picto{right:14px}}