/* ==========================================================================
   LATOGA — feuille de style du site
   --------------------------------------------------------------------------
   Reprise fidèle des maquettes Claude Design (desktop 1440 px / mobile 390 px)
   Points de rupture :
     · mobile  : < 900 px   (maquettes « Mobile »)
     · desktop : ≥ 900 px   (maquettes « Desktop », fluides jusqu'à 1440 px)
   Sommaire :
     1. Polices          5. Composants partagés
     2. Variables        6. En-tête, menu mobile, pied de page
     3. Base             7. Pages (accueil, portfolio, services…)
     4. Utilitaires      8. Animations & mouvement réduit
   ========================================================================== */

/* 1. Polices (hébergées sur le site : aucune requête vers Google) -------- */
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:400 800;font-display:swap;src:url('../fonts/bricolage-grotesque-400-800-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:400 800;font-display:swap;src:url('../fonts/bricolage-grotesque-400-800-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Geist';font-style:normal;font-weight:300 700;font-display:swap;src:url('../fonts/geist-300-700-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Geist';font-style:normal;font-weight:300 700;font-display:swap;src:url('../fonts/geist-300-700-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Kalam';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/kalam-700-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Kalam';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/kalam-700-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* 2. Variables ----------------------------------------------------------- */
:root{
  --bg:#1B2B4D;          /* fond de page */
  --navy:#22365E;        /* papier quadrillé */
  --ink:#141A2C;         /* encre (textes foncés, contours) */
  --paper:#FBFAF6;       /* tirages, champs */
  --yellow:#FFC316;
  --orange:#FF7A1A;
  --blue:#2F45FF;
  --cyan:#3FE2FF;
  --pink:#FF5CC5;
  --lime:#B7F03A;
  --violet:#9D6BFF;
  --t2:#DCE4F5;          /* texte clair secondaire */
  --t3:#C9D4EC;          /* texte courant */
  --t4:#94A6CC;          /* texte discret */
  --line:rgba(170,205,245,.22);
  --f-body:'Geist','Helvetica Neue',Helvetica,Arial,sans-serif;
  --f-disp:'Bricolage Grotesque','Helvetica Neue',Arial,sans-serif;
  --f-hand:'Kalam','Comic Sans MS',cursive;
  --ease:cubic-bezier(.2,.7,.2,1);
  --spring:cubic-bezier(.34,1.56,.64,1);
  --gut:64px;            /* marge latérale */
  --max:1440px;          /* largeur de la maquette desktop */
}
@media (max-width:1199.98px){:root{--gut:40px}}
@media (max-width:899.98px){:root{--gut:20px}}

/* 3. Base ---------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:24px}
body{margin:0;min-height:100vh;background:var(--bg);font-family:var(--f-body);color:#fff;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
h1,h2,h3,h4,p,ul,ol,dl,dd,figure,blockquote{margin:0}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
img{border:0;height:auto}
[hidden]{display:none!important}
svg{flex-shrink:0}
:where(a,button,input,select,textarea,summary):focus-visible{outline:3px solid var(--yellow);outline-offset:4px}
::selection{background:var(--yellow);color:var(--ink)}

/* Papier millimétré : fond de toutes les pages */
.mat{position:relative;display:flex;flex-direction:column;min-height:100vh;overflow-x:clip;background-color:var(--navy);background-image:radial-gradient(1300px 950px at 50% -160px,rgba(255,255,255,.17),rgba(255,255,255,0) 72%),linear-gradient(rgba(140,205,240,.2) 1px,transparent 1px),linear-gradient(90deg,rgba(140,205,240,.2) 1px,transparent 1px),linear-gradient(rgba(140,205,240,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(140,205,240,.09) 1px,transparent 1px);background-size:100% 100%,140px 140px,140px 140px,28px 28px,28px 28px;background-position:center top;box-shadow:inset 0 0 280px rgba(6,12,30,.62)}
@supports not (overflow:clip){.mat{overflow-x:hidden}}
@media (max-width:899.98px){
  .mat{background-image:radial-gradient(520px 520px at 50% -80px,rgba(255,255,255,.17),rgba(255,255,255,0) 72%),linear-gradient(rgba(140,205,240,.2) 1px,transparent 1px),linear-gradient(90deg,rgba(140,205,240,.2) 1px,transparent 1px),linear-gradient(rgba(140,205,240,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(140,205,240,.09) 1px,transparent 1px);background-size:100% 100%,120px 120px,120px 120px,24px 24px,24px 24px;background-position:0 0;box-shadow:inset 0 0 120px rgba(6,12,30,.6)}
}
main{flex:0 0 auto;display:flex;flex-direction:column}

/* 4. Utilitaires ----------------------------------------------------------- */
.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--gut)}
.g12{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.skip{position:absolute;left:16px;top:-80px;z-index:100;padding:12px 18px;border-radius:999px;background:var(--yellow);color:var(--ink);font-weight:600;transition:top .2s}
.skip:focus{top:16px}
@media (min-width:900px){.m-only{display:none!important}}
@media (max-width:899.98px){.d-only{display:none!important}}

/* Typographies */
.disp{font-family:var(--f-disp);font-weight:800;letter-spacing:-.035em}
.hand{font-family:var(--f-hand);font-weight:700}
.hl{background:linear-gradient(180deg,transparent 58%,rgba(255,195,22,.92) 58%,rgba(255,195,22,.92) 90%,transparent 90%);padding:0 .06em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.hsm{background-image:linear-gradient(180deg,transparent 60%,rgba(255,195,22,.8) 60%,rgba(255,195,22,.8) 92%,transparent 92%);background-repeat:no-repeat;background-size:100% 100%;padding:0 .04em;color:#fff;font-weight:600;-webkit-box-decoration-break:clone;box-decoration-break:clone;animation:hsm 1.1s var(--ease) .8s backwards}
@keyframes hsm{from{background-size:0% 100%}to{background-size:100% 100%}}
.lk{text-decoration:underline;text-decoration-color:var(--yellow);text-decoration-thickness:2px;text-underline-offset:7px;transition:text-decoration-color .2s}
.lk:hover{text-decoration-color:#fff}
.nl{transition:color .2s}
.nl:hover{color:#fff!important}

/* 5. Composants partagés -------------------------------------------------- */

/* Boutons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:52px;padding:0 26px;border-radius:999px;font-size:16px;line-height:1;white-space:nowrap}
.btn--md{height:48px;padding:0 22px;font-size:15px}
.btn--sm{height:40px;padding:0 18px;font-size:15px}
.by{background-color:var(--yellow);color:var(--ink);border:2px solid var(--ink);box-shadow:0 4px 0 var(--ink);font-weight:600;transition:transform .15s,box-shadow .15s,background-color .2s}
.by:hover{transform:translateY(-2px);box-shadow:0 6px 0 var(--ink)}
.by:active{transform:translateY(2px);box-shadow:0 2px 0 var(--ink)}
.bw{border:2px solid rgba(255,255,255,.88);color:#fff;font-weight:500;transition:background-color .2s,color .2s,border-color .2s}
.bw:hover{background-color:rgba(255,255,255,.12)}
.bw.ba:hover,.bw.ba:active{background-color:#fff;border-color:#fff;color:var(--ink)}
.bk{background-color:var(--ink);color:#fff;font-weight:600;box-shadow:0 4px 0 rgba(20,26,44,.28);transition:transform .15s,box-shadow .15s}
.bk:hover{transform:translateY(-2px);box-shadow:0 6px 0 rgba(20,26,44,.28)}
.ba svg{transition:transform .25s var(--ease)}
.ba:hover svg{transform:translateX(4px)}
.ba.back:hover svg{transform:translateX(-4px)}
@media (max-width:899.98px){
  .btn{font-size:15px}
  .btn--block{display:flex;width:100%}
}

/* Étiquettes « autocollant » (titres découpés) */
.lbl{display:inline-block;position:relative;padding:.05em .3em .13em;border-radius:5px;font-family:var(--f-disp);font-weight:800;letter-spacing:-.035em;line-height:1.02;color:#fff;white-space:nowrap;box-shadow:0 14px 28px rgba(6,12,30,.4),inset 0 1px 0 rgba(255,255,255,.3)}
.lbl.o{background:linear-gradient(100deg,#FFA64F 0%,#FF6A0A 100%)}
.lbl.b{background:linear-gradient(100deg,#5263FF 0%,#1F2FD6 100%)}
.lbl.y{background:linear-gradient(100deg,#FFDD5C 0%,#FFB400 100%);color:var(--ink)}
.lbl.l{background:linear-gradient(100deg,#D6FF70 0%,#A3E324 100%);color:var(--ink)}
.lbl.w{background:var(--paper);color:var(--ink)}
.lbl.c{background:linear-gradient(100deg,#8CF1FF 0%,#1FC6EA 100%);color:var(--ink)}
.lbl.p{background:linear-gradient(100deg,#FF8AD6 0%,#EE3AAB 100%)}
.lbl.v{background:linear-gradient(100deg,#B294FF 0%,#7A4BEF 100%)}
.lbl.wrap-ok{white-space:normal;display:inline;line-height:1.5;-webkit-box-decoration-break:clone;box-decoration-break:clone}

/* Cadre de sélection (poignées bleues) */
.sel{position:absolute;inset:-12px -16px;border:1.5px dashed rgba(255,255,255,.9);pointer-events:none}
.sel i{position:absolute;width:9px;height:9px;background:#fff;border:1.5px solid #2F6BFF}
.sel i:nth-child(1){left:-5px;top:-5px}
.sel i:nth-child(2){right:-5px;top:-5px}
.sel i:nth-child(3){left:-5px;bottom:-5px}
.sel i:nth-child(4){right:-5px;bottom:-5px}
@media (max-width:899.98px){.sel{inset:-8px -10px}}

/* Autocollants (curseur, étoile) */
.stk{filter:drop-shadow(0 7px 7px rgba(3,8,22,.45));overflow:visible}

/* Pastilles lumineuses */
.pill{display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 14px;border-radius:999px;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#10162A;white-space:nowrap}
.pill.l{background:linear-gradient(180deg,#E9FFAE,#B7F03A);box-shadow:0 0 26px rgba(183,240,58,.5),inset 0 1px 0 rgba(255,255,255,.85)}
.pill.p{background:linear-gradient(180deg,#FFD0EE,#FF5CC5);box-shadow:0 0 26px rgba(255,92,197,.5),inset 0 1px 0 rgba(255,255,255,.85)}
.pill.c{background:linear-gradient(180deg,#CFF8FF,#3FE2FF);box-shadow:0 0 26px rgba(63,226,255,.5),inset 0 1px 0 rgba(255,255,255,.85)}
.pill.v{background:linear-gradient(180deg,#E3D5FF,#9D6BFF);box-shadow:0 0 26px rgba(157,107,255,.5),inset 0 1px 0 rgba(255,255,255,.85)}
.pill.y{background:linear-gradient(180deg,#FFF1B0,#FFC316);box-shadow:0 0 26px rgba(255,195,22,.5),inset 0 1px 0 rgba(255,255,255,.85)}
.pill.w{background:linear-gradient(180deg,#FFFFFF,#E7ECF7);box-shadow:0 0 22px rgba(255,255,255,.3),inset 0 1px 0 #fff}
.pill.sm{height:28px;padding:0 12px;font-size:11px}

/* Surtitre (trait jaune + capitales espacées) */
.eb{display:inline-flex;align-items:center;gap:10px;font-size:12.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--t3)}
.eb::before{content:"";width:22px;height:2px;border-radius:2px;background:var(--yellow)}
@media (max-width:899.98px){
  .eb{font-size:11.5px}
  .eb::before{width:18px}
}

/* Post-it, scotch, punaise, tirage photo */
.note{position:relative;color:#1A1F2E;box-shadow:0 20px 36px rgba(5,10,25,.4)}
.note.y{background:linear-gradient(172deg,#FFEC96,#FFD455)}
.note.b{background:linear-gradient(172deg,#E1EBFF,#B6CEFF)}
.note.p{background:linear-gradient(172deg,#FFE3F2,#FFB6DD)}
.note.l{background:linear-gradient(172deg,#F0FFCC,#D2F786)}
.note.o{background:linear-gradient(172deg,#FFE4CC,#FFBE85)}
.tape{position:absolute;height:30px;background:rgba(255,246,214,.64);box-shadow:0 1px 3px rgba(0,0,0,.18);clip-path:polygon(2% 10%,98% 0,100% 46%,97% 100%,3% 90%,0 52%);pointer-events:none}
.pin{position:absolute;width:24px;height:24px;border-radius:50%;background:radial-gradient(circle at 34% 30%,#FFA39B 0 15%,#E3261E 46%,#8F1008 100%);box-shadow:0 8px 10px rgba(0,0,0,.42)}
.pin.b{background:radial-gradient(circle at 34% 30%,#AFC0FF 0 15%,#2B45E0 46%,#0F1C80 100%)}
.print{background:var(--paper);border-radius:4px;box-shadow:0 26px 50px rgba(5,10,25,.48),0 4px 10px rgba(5,10,25,.3)}
.hnt{transition:transform .5s var(--spring),box-shadow .5s}
.hnt:hover{transform:rotate(0deg) translateY(-6px) scale(1.03)!important;box-shadow:0 30px 50px rgba(5,10,25,.5)}
.hsp{transition:transform .7s cubic-bezier(.34,1.4,.64,1)}
.hsp:hover{transform:rotate(0deg) translateY(-6px)!important}
.hsp img{transition:transform 1.2s var(--ease)}
.hsp:hover img{transform:scale(1.04)}

/* Bandeaux défilants */
.marquee{display:flex;width:max-content;animation:marquee 50s linear infinite}
.marquee.rev{animation-direction:reverse;animation-duration:64s}
@keyframes marquee{to{transform:translateX(-50%)}}
.mq{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 48px,#000 calc(100% - 48px),transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 48px,#000 calc(100% - 48px),transparent 100%)}
.mq:hover .marquee,.mq:focus-within .marquee{animation-play-state:paused}
@media (max-width:899.98px){
  .marquee{animation-duration:40s}
  .marquee.rev{animation-duration:52s}
  .mq{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 24px,#000 calc(100% - 24px),transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 24px,#000 calc(100% - 24px),transparent 100%)}
}
/* Bandeau bleu des métiers (portfolio, services, projets) */
.band{position:relative;height:50px;display:flex;align-items:center;overflow:hidden;background:var(--blue);box-shadow:0 12px 26px rgba(5,10,25,.38)}
.band-it{flex-shrink:0;display:flex;align-items:center;gap:26px;margin-right:26px;font-family:var(--f-disp);font-weight:800;font-size:19px;letter-spacing:.04em;color:#fff;white-space:nowrap}
.band-it svg{width:12px;height:12px}
@media (max-width:899.98px){
  .band{height:40px}
  .band-it{gap:18px;margin-right:18px;font-size:15px}
  .band-it svg{width:10px;height:10px}
}

/* Badge tournant « Parler de votre projet » */
.bd{position:relative;flex-shrink:0;display:flex;align-items:center;justify-content:center;width:236px;height:236px;border-radius:50%;background:var(--yellow);color:var(--ink);border:2.5px solid var(--ink);box-shadow:0 6px 0 var(--ink),0 24px 40px rgba(5,10,25,.4);transition:transform .45s var(--spring)}
.bd:hover{transform:scale(1.07) rotate(-6deg)}
.bd .bd-txt{position:absolute;left:-2.5px;top:-2.5px;width:236px;height:236px;animation:spin 16s linear infinite}
.bd .bd-txt text{font-size:17.5px;font-weight:700;letter-spacing:.08em;font-family:var(--f-body)}
.bd .bar{position:relative;display:flex;align-items:center;justify-content:center;width:99px;height:99px;border-radius:50%;background:var(--ink);color:var(--yellow);transition:transform .45s var(--ease)}
.bd:hover .bar{transform:rotate(-45deg)}
@keyframes spin{to{transform:rotate(360deg)}}

/* 6. En-tête ------------------------------------------------------------- */
.hdr{position:relative;z-index:30;flex-shrink:0;width:100%;max-width:var(--max);height:88px;margin-inline:auto;padding:0 var(--gut);display:flex;align-items:center;justify-content:space-between}
.hdr-logo{display:flex;align-items:center}
.hdr-logo img{display:block;height:26px;width:auto}
.hdr-r{display:flex;align-items:center;gap:40px}
.nav{display:flex;align-items:center;gap:32px;font-size:15px}
.nav a{position:relative;color:var(--t3);transition:color .2s}
.nav a:hover{color:#fff}
.nav a[aria-current="page"]{color:#fff;font-weight:600}
.nav a[aria-current="page"] svg{position:absolute;left:-4px;bottom:-11px;width:calc(100% + 8px);height:9px;overflow:visible}
.hdr-cta[aria-current="page"]{border-color:var(--yellow);box-shadow:none;transform:none;font-weight:500;color:#0B0B0B}
.menu-btn{display:none;gap:10px;height:44px;padding:0 16px}
.menu-btn .ic{display:flex;flex-direction:column;gap:4px}
.menu-btn .ic span{width:14px;height:2px;border-radius:2px;background:var(--ink)}
@media (max-width:1099.98px){
  .hdr-r{gap:28px}
  .nav{gap:24px}
}
@media (max-width:899.98px){
  .hdr{height:64px}
  .hdr-logo img{height:22px}
  .nav,.hdr-cta{display:none}
  .menu-btn{display:inline-flex}
}

/* Menu mobile (plein écran) */
.mnav{position:fixed;inset:0;z-index:90;display:none;flex-direction:column;padding:0 20px 32px;overflow-y:auto;overscroll-behavior:contain;opacity:0;transform:translateY(-12px);transition:opacity .3s ease,transform .4s var(--ease)}
.mnav.is-open{opacity:1;transform:none}
.mnav[hidden]{display:none!important}
@media (max-width:899.98px){.mnav{display:flex}}
.mnav-top{height:64px;flex-shrink:0;display:flex;align-items:center;justify-content:space-between}
.mnav-top img{display:block;height:22px;width:auto}
.mnav-close{gap:10px;height:44px;padding:0 16px}
.mnav nav{margin-top:40px;display:flex;flex-direction:column;border-top:1px solid var(--line)}
.mi{display:flex;align-items:center;justify-content:space-between;min-height:72px;border-bottom:1px solid var(--line);font-family:var(--f-disp);font-size:32px;font-weight:800;letter-spacing:-.03em}
.mi .ma{display:flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;border:1.5px solid rgba(255,255,255,.45);transition:transform .25s var(--ease),background-color .2s,border-color .2s,color .2s}
.mi:hover .ma,.mi:active .ma{transform:translateX(4px);background-color:var(--yellow);border-color:var(--yellow);color:var(--ink)}
.mnav-foot{margin-top:auto;padding-top:40px;display:flex;flex-direction:column;gap:24px}
.mnav-info{display:flex;flex-direction:column;gap:8px;font-size:15px}
.mnav-info span{color:var(--t3)}
.mnav-soc{display:flex;flex-wrap:wrap;gap:8px}
html.menu-open,html.menu-open body{overflow:hidden}

/* Pied de page ------------------------------------------------------------ */
.foot{position:relative;flex-grow:1;display:flex;flex-direction:column;background:linear-gradient(180deg,rgba(6,12,30,0) 0%,rgba(6,12,30,.34) 100%)}
.foot-wmb{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.foot-in{position:relative;flex-grow:1;width:100%;max-width:var(--max);margin-inline:auto;padding:64px var(--gut) 40px;display:flex;flex-direction:column;justify-content:space-between}
.foot-cut{position:absolute;left:var(--gut);right:var(--gut);top:0;border-top:2px dashed rgba(170,205,245,.45)}
.foot-cut span{position:absolute;left:20px;top:-12px;display:flex;transform:rotate(180deg)}
.foot-ruler{position:absolute;left:var(--gut);right:var(--gut);top:9px;height:9px;pointer-events:none;background-image:linear-gradient(90deg,rgba(170,205,245,.45) 1.5px,transparent 1.5px),linear-gradient(90deg,rgba(170,205,245,.26) 1px,transparent 1px);background-size:140px 9px,28px 5px;background-repeat:repeat-x}
.foot-wm{position:absolute;left:50%;bottom:-96px;width:1180px;max-width:none;height:auto;pointer-events:none;opacity:.045;transform:translateX(-50%)}
.foot-grid{position:relative;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px}
.foot-brand{grid-column:1 / span 4;display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.foot-brand img{display:block;height:64px;width:auto}
.foot-slogan{display:inline-block;margin-top:4px;font-size:26px;line-height:1.15;color:var(--yellow);transform:rotate(-2deg);transform-origin:0 50%}
.foot-desc{max-width:300px;font-size:15px;line-height:1.6;color:var(--t3)}
.foot-contact{grid-column:6 / span 3;display:flex;flex-direction:column;align-items:flex-start;gap:12px;font-size:15px}
.foot-soc{grid-column:9 / span 4;display:flex;flex-direction:column;align-items:flex-start;gap:14px;font-size:15px}
.foot-h{margin-bottom:2px;font-size:18px;color:var(--yellow)}
.foot-chips{display:flex;flex-wrap:wrap;gap:10px}
.foot-bot{position:relative;display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:60px;padding-top:20px;border-top:1px solid var(--line);font-size:13px;color:var(--t4)}
.foot-links{display:flex;align-items:center;gap:24px}
/* Liens soulignés au survol */
.fl{position:relative;display:inline-flex;align-items:center;gap:6px}
.fl::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:1.5px;border-radius:2px;background:var(--yellow);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.fl:hover::after,.fl:focus-visible::after{transform:scaleX(1)}
/* Bouton « haut de page » */
.ftop{display:inline-flex;align-items:center;gap:10px}
.fup{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;border:1.5px solid rgba(170,205,245,.45);color:#fff;transition:background-color .2s,border-color .2s,color .2s,transform .3s var(--spring)}
.ftop:hover .fup,.ftop:focus-visible .fup{background-color:var(--yellow);border-color:var(--yellow);color:var(--ink);transform:translateY(-3px)}
/* Pastilles réseaux sociaux */
.fsb{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 14px 0 13px;border-radius:999px;border:1.5px solid rgba(170,205,245,.38);background-color:rgba(255,255,255,.04);color:#fff;font-size:14px;font-weight:500;line-height:1;white-space:nowrap;transition:background-color .2s,border-color .2s,color .2s,transform .3s var(--spring)}
.fsb i{flex-shrink:0;width:8px;height:8px;border-radius:50%}
.fsb .ext{opacity:.7;transition:transform .25s var(--ease),opacity .2s}
.fsb:hover,.fsb:focus-visible{background-color:var(--yellow);border-color:var(--yellow);color:var(--ink);transform:translateY(-2px)}
.fsb:hover .ext,.fsb:focus-visible .ext{opacity:1;transform:translate(2px,-2px)}
.fsb.s{height:34px;padding:0 12px 0 11px;font-size:13px}
/* Variante compacte (contact, page en construction) */
.foot--compact .foot-in{padding:40px var(--gut);flex-direction:row;align-items:flex-end}
.foot--compact .foot-wm{bottom:-120px}
.foot-row{position:relative;width:100%;display:flex;justify-content:space-between;align-items:center;gap:24px;font-size:13px;color:var(--t4)}
.foot-row .foot-id{display:flex;align-items:center;gap:26px}
.foot-row .foot-slogan{margin:0;font-size:24px}
@media (max-width:1199.98px){
  .foot--compact .foot-row{flex-wrap:wrap;justify-content:center}
}
@media (max-width:899.98px){
  .foot-in,.foot--compact .foot-in{padding:52px var(--gut) 32px;flex-direction:column;align-items:stretch;gap:40px}
  .foot-cut span{left:16px}
  .foot-ruler{background-size:120px 9px,24px 5px}
  .foot-wm,.foot--compact .foot-wm{bottom:-30px;width:350px}
  .foot-grid{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:16px;row-gap:28px}
  .foot-brand{grid-column:1 / -1;gap:12px}
  .foot-brand img{height:52px}
  .foot-slogan{font-size:23px}
  .foot-desc{font-size:14px}
  .foot-contact,.foot-soc{grid-column:auto;gap:10px}
  .foot-soc{gap:8px}
  .foot-h{font-size:17px;margin-bottom:0}
  .foot-chips{flex-direction:column;align-items:flex-start;gap:8px}
  .foot-chips .fsb{height:34px;padding:0 12px 0 11px;font-size:13px}
  .foot-bot{margin-top:0;padding-top:18px}
  .foot-links{gap:18px}
}
@media (max-width:359.98px){.foot-grid{grid-template-columns:minmax(0,1fr)}}

/* 7. Pages ================================================================ */

/* ---- Accueil : accroche + roue de photos ---------------------------------- */
.hero{position:relative;flex-shrink:0;height:800px;overflow:hidden;display:flex;flex-direction:column;align-items:center;padding:368px var(--gut) 0}
.hero-bg{position:absolute;inset:0;-webkit-mask-image:linear-gradient(180deg,#000 50%,transparent 88%);mask-image:linear-gradient(180deg,#000 50%,transparent 88%)}
.wheel{position:absolute;left:50%;top:1128px;width:0;height:0;animation:wheel 200s linear infinite}
@keyframes wheel{to{transform:rotate(-360deg)}}
.wheel img{position:absolute;left:-98px;top:-128px;width:196px;height:256px;object-fit:cover;object-position:var(--op,50% 50%);border:6px solid var(--paper);border-radius:5px;background:#1A2A4A;box-shadow:0 16px 30px rgba(5,10,25,.45);transform:rotate(calc(var(--i) * 15deg)) translateY(-960px)}
.hero-c{position:relative;width:100%;display:flex;flex-direction:column;align-items:center;text-align:center}
.hero h1{margin-top:16px;display:flex;flex-direction:column;align-items:center;font-size:50px;font-weight:inherit}
.hero h1 .lbl{margin-top:var(--mt,0);transform:rotate(var(--r)) translateX(var(--x))}
.hero-cur{position:absolute;right:-44px;bottom:-36px}
.hero-cur svg{width:38px;height:38px}
.hero-ctas{margin-top:38px;display:flex;align-items:center;gap:14px}
.hero-ctas .bw{padding:0 24px}
.hero-star{position:absolute}
@media (max-width:899.98px){
  .hero{height:auto;padding:196px var(--gut) 64px}
  .hero-bg{-webkit-mask-image:none;mask-image:none}
  .wheel{top:466px;animation-duration:150s}
  .wheel img{left:-50px;top:-66px;width:100px;height:132px;object-position:var(--opm,var(--op,50% 50%));border-width:4px;border-radius:4px;box-shadow:0 10px 20px rgba(5,10,25,.45);transform:rotate(calc(var(--m) * 20deg)) translateY(-380px)}
  .hero h1{margin-top:22px;font-size:clamp(26px,8.2vw,40px)}
  .hero h1 .lbl{margin-top:var(--mtm,0);transform:rotate(var(--r)) translateX(var(--xm))}
  .hero-cur{right:-30px;bottom:-26px}
  .hero-cur svg{width:28px;height:28px}
  .hero-ctas{margin-top:34px;width:100%;max-width:440px;flex-direction:column;align-items:stretch;gap:12px}
}

/* ---- Accueil : bandeaux « Derniers projets » ------------------------------- */
.recent{position:relative;flex-shrink:0;height:196px;overflow:hidden}
.recent-blue{position:absolute;left:-80px;right:-80px;top:72px;height:50px;display:flex;align-items:center;overflow:hidden;background:var(--blue);transform:rotate(2.6deg);box-shadow:0 12px 26px rgba(5,10,25,.38)}
.recent-yel{position:absolute;left:-80px;right:-80px;top:64px;height:66px;display:flex;align-items:center;gap:22px;padding-left:calc(80px + var(--gut) + max(0px,(100vw - var(--max)) / 2));background:linear-gradient(180deg,#FFD43F,#FFBC0A);border-top:2px solid var(--ink);border-bottom:2px solid var(--ink);transform:rotate(-1.8deg);box-shadow:0 14px 30px rgba(5,10,25,.42)}
.recent-h{flex-shrink:0;display:inline-flex;align-items:center;height:34px;padding:0 14px;border-radius:999px;background:var(--ink);color:var(--yellow);font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
.recent-yel .mq{flex:1;min-width:0;overflow:hidden;padding-left:48px}
.recent-list{list-style:none;margin:0;padding:0;display:flex;align-items:center}
.recent-list li{flex-shrink:0;display:flex;align-items:center;gap:30px;margin-right:30px;font-family:var(--f-disp);font-weight:800;font-size:23px;letter-spacing:-.02em;color:var(--ink);white-space:nowrap}
.recent-list a{display:inline-flex;align-items:baseline;gap:12px;text-decoration:underline;text-decoration-color:transparent;text-decoration-thickness:3px;text-underline-offset:5px;transition:text-decoration-color .2s}
.recent-list a:hover,.recent-list a:focus-visible{text-decoration-color:var(--ink)}
.recent-list small{font-family:var(--f-body);font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:rgba(20,26,44,.62)}
.recent-list svg{width:14px;height:14px}
@media (max-width:899.98px){
  .recent{height:170px}
  .recent-h{position:absolute;left:var(--gut);top:14px;z-index:2;height:30px;padding:0 12px;font-size:11px}
  .recent-blue{left:-40px;right:-40px;top:82px;height:40px;transform:rotate(4deg)}
  .recent-yel{left:-40px;right:-40px;top:74px;height:54px;padding-left:0;transform:rotate(-3deg);box-shadow:0 12px 26px rgba(5,10,25,.42)}
  .recent-yel .mq{padding-left:60px}
  .recent-list li{gap:18px;margin-right:18px;font-size:18px}
  .recent-list a{gap:8px}
  .recent-list small{font-size:11px}
  .recent-list svg{width:11px;height:11px}
}

/* ---- Accueil : services (accordéon desktop / carrousel mobile) ------------ */
.svc-sec{flex-shrink:0;padding-top:120px}
.svc-sec h2{font-size:66px;line-height:1.02;max-width:760px}
.svcs{list-style:none;margin:56px 0 0;padding:0;display:flex;gap:12px}
.svc{position:relative;flex:1 1 0;min-width:0;overflow:hidden;background:#0B1429}
.svc-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.svc-shade{position:absolute;inset:0;pointer-events:none}
.svc-num{position:absolute;z-index:1;display:flex;align-items:center;justify-content:center;border-radius:50%;background:var(--c);color:var(--ink);font-family:var(--f-disp);font-weight:800;pointer-events:none}
.svc-body{position:absolute;z-index:3}
.svc-body h3{color:#fff}
.svc-body p{color:var(--t2)}
.svc-bar{position:absolute;left:0;right:0;bottom:0;z-index:1;height:5px;background:var(--c)}
.svc-all-li{display:flex}
.svc-all{position:relative;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:space-between;background:var(--yellow);color:var(--ink);border:2.5px solid var(--ink)}
.svc-all .c6{font-family:var(--f-disp);font-weight:800;font-size:13px;letter-spacing:.08em}
.svc-all .at{writing-mode:vertical-rl;transform:rotate(180deg);font-family:var(--f-disp);font-weight:800;font-size:32px;letter-spacing:-.02em;white-space:nowrap}
.svc-all .aa{display:flex;align-items:center;justify-content:center;width:66px;height:66px;border-radius:50%;background:var(--ink);color:var(--yellow);transition:transform .45s var(--spring)}
.svc-hint{display:none}
@media (min-width:900px){
  .svcs{height:540px}
  .svc{border-radius:22px;box-shadow:0 24px 48px rgba(5,10,25,.45);transition:flex-grow .7s var(--ease),box-shadow .4s}
  .svc.on{flex-grow:5.2;box-shadow:0 30px 60px rgba(5,10,25,.55),0 0 0 2px var(--c)}
  .svc-img{object-position:var(--op,50% 50%);filter:saturate(.3) brightness(.45);transform:scale(1.1);transition:filter .7s ease,transform 1.2s var(--ease)}
  .svc:not(.on):hover .svc-img{filter:saturate(.7) brightness(.6)}
  .svc.on .svc-img{filter:none;transform:scale(1)}
  .svc-shade{background:linear-gradient(180deg,rgba(8,12,26,.25) 0%,rgba(8,12,26,0) 30%,rgba(8,12,26,.18) 55%,rgba(8,12,26,.92) 100%)}
  .svc-hit{position:absolute;inset:0;z-index:2;width:100%;height:100%;border-radius:22px}
  .svc.on .svc-hit{cursor:default}
  .svc-hit:focus-visible{outline:3px solid var(--yellow);outline-offset:-3px}
  .svc-num{left:50%;top:24px;width:46px;height:46px;margin-left:-23px;font-size:14px;transition:left .7s var(--ease),margin .7s var(--ease)}
  .svc.on .svc-num{left:36px;margin-left:0}
  .svc-vt{position:absolute;left:50%;bottom:30px;z-index:1;writing-mode:vertical-rl;transform:translateX(-50%) rotate(180deg);font-family:var(--f-disp);font-weight:800;font-size:22px;letter-spacing:-.01em;white-space:nowrap;color:#fff;pointer-events:none;transition:opacity .3s ease}
  .svc.on .svc-vt{opacity:0}
  .svc-body{left:36px;bottom:36px;width:min(470px,calc(100% - 72px));opacity:0;transform:translateY(18px);pointer-events:none;transition:opacity .3s ease,transform .5s var(--ease)}
  .svc.on .svc-body{opacity:1;transform:none;transition-delay:.25s,.25s}
  .svc-body h3{font-size:34px;line-height:1.06}
  .svc-body p{margin-top:12px;max-width:440px;font-size:16px;line-height:1.6}
  .svc-tags{margin-top:18px;list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:8px}
  .svc-tags li{display:inline-flex;align-items:center;height:32px;padding:0 13px;border-radius:999px;border:1.5px solid rgba(255,255,255,.38);font-size:13px;font-weight:500;color:#fff}
  .svc-bar{transform:scaleX(0);transform-origin:left;transition:transform .8s var(--ease)}
  .svc.on .svc-bar{transform:scaleX(1)}
  .svc-all-li{flex:0 0 132px;transition:flex-basis .5s var(--ease)}
  .svc-all-li:hover{flex-basis:152px}
  .svc-all{padding:30px 0 26px;border-radius:22px;box-shadow:0 6px 0 var(--ink),0 24px 48px rgba(5,10,25,.4);transition:transform .35s var(--spring),background-color .25s}
  .svc-all:hover{transform:translateY(-4px);background-color:#FFD23F}
  .svc-all:hover .aa{transform:rotate(-45deg) scale(1.06)}
}
@media (min-width:900px) and (max-width:1199.98px){
  .svc-sec h2{font-size:54px}
  .svcs{height:500px}
  .svc-body{left:28px;bottom:28px;width:calc(100% - 56px)}
  .svc.on .svc-num{left:28px}
  .svc-body h3{font-size:28px}
  .svc-body p{font-size:15px}
  .svc-vt{font-size:19px}
  .svc-all-li{flex-basis:104px}
  .svc-all-li:hover{flex-basis:116px}
  .svc-all .at{font-size:27px}
  .svc-all .aa{width:54px;height:54px}
}
@media (max-width:899.98px){
  .svc-sec{padding-top:72px}
  .svc-sec h2{font-size:clamp(32px,9.8vw,46px);line-height:1.04}
  .svcs{margin:28px calc(-1 * var(--gut)) 0;padding:0 var(--gut) 26px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-left:var(--gut);scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .svcs::-webkit-scrollbar{display:none}
  .svc{flex:0 0 286px;height:420px;scroll-snap-align:start;border-radius:20px;box-shadow:0 20px 40px rgba(5,10,25,.45)}
  .svc-img{object-position:var(--opm,var(--op,50% 50%))}
  .svc-shade{background:linear-gradient(180deg,rgba(8,12,26,.2) 0%,rgba(8,12,26,0) 30%,rgba(8,12,26,.9) 72%)}
  .svc-hit,.svc-vt,.svc-tags{display:none}
  .svc-num{left:18px;top:18px;width:40px;height:40px;font-size:13px}
  .svc-body{left:20px;right:20px;bottom:20px}
  .svc-body h3{font-size:25px;line-height:1.08}
  .svc-body p{margin-top:8px;font-size:14px;line-height:1.55}
  .svc-all-li{flex:0 0 150px;scroll-snap-align:start}
  .svc-all{padding:26px 0 22px;border-radius:20px;box-shadow:0 5px 0 var(--ink)}
  .svc-all .c6{font-size:12px}
  .svc-all .at{font-size:28px}
  .svc-all .aa{width:58px;height:58px}
  .svc-all .aa svg{width:22px;height:22px}
  .svc-hint{display:block;font-size:18px;color:var(--t4)}
}

/* ---- Accueil : lien « Voir le portfolio » (dossier animé) ------------------ */
.pfl{flex-shrink:0;padding-top:120px}
.pf{position:relative;display:flex;align-items:center;justify-content:center;gap:30px;padding:48px 0;border-top:1.5px dashed rgba(170,205,245,.38);border-bottom:1.5px dashed rgba(170,205,245,.38);font-size:clamp(64px,6.95vw,100px)}
.pf-meta{display:none}
.pf-l{display:contents}
.pf-w{position:relative;font-family:var(--f-disp);font-weight:800;letter-spacing:-.035em;line-height:1;white-space:nowrap}
.pf .sq{position:absolute;left:0;bottom:-.12em;width:100%;height:.16em;overflow:visible}
.pf .sq path{stroke-dasharray:1 2;stroke-dashoffset:1.05;transition:stroke-dashoffset .6s var(--ease) .1s}
.pf:hover .sq path,.pf:focus-visible .sq path{stroke-dashoffset:0}
.pf .arr{display:flex;flex-shrink:0;align-items:center;justify-content:center;width:.96em;height:.96em;border-radius:50%;background:var(--yellow);color:var(--ink);border:2.5px solid var(--ink);box-shadow:0 5px 0 var(--ink);transition:transform .5s var(--ease)}
.pf .arr svg{width:.38em;height:.38em}
.pf:hover .arr,.pf:focus-visible .arr{transform:rotate(-45deg)}
/* Dossier : toutes les cotes en em pour suivre la taille du texte */
.fold{position:relative;display:block;flex-shrink:0;width:1.96em;height:1.32em}
.fold > span{position:absolute;display:block}
.fold .f-tab{left:.02em;top:.06em;width:.84em;height:.34em;border-radius:.12em .12em 0 0;background:linear-gradient(180deg,#A6EC2E,#7BC417)}
.fold .f-back{left:.02em;right:.02em;top:.24em;bottom:0;border-radius:.16em;background:linear-gradient(180deg,#8FDB22,#4E8C0E)}
.fold .fc{width:.92em;height:.78em;border-radius:.06em;overflow:hidden;border:.03em solid var(--paper);background:#1A2A4A;box-shadow:0 .06em .14em rgba(5,10,25,.35);transition:transform .6s var(--spring)}
.fold .fc img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover}
.fold .fc1{left:.18em;top:.1em;transform:rotate(-7deg)}
.fold .fc3{right:.16em;top:.12em;transform:rotate(9deg);transition-delay:.1s}
.fold .fc2{left:50%;top:0;width:1.04em;height:.88em;margin-left:-.52em;transform:rotate(1deg);transition-delay:.05s}
.fold .ff{left:-.06em;right:-.06em;bottom:0;height:.84em;border-radius:.16em;background:linear-gradient(180deg,rgba(214,255,120,.62),rgba(126,204,28,.9));border:1.5px solid rgba(235,255,190,.7);box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 .18em .32em rgba(5,10,25,.45);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transform-origin:50% 100%;transition:transform .5s var(--ease)}
.pf:hover .fc1,.pf:focus-visible .fc1{transform:translate(-.24em,-.3em) rotate(-15deg)}
.pf:hover .fc2,.pf:focus-visible .fc2{transform:translate(0,-.42em) rotate(-2deg)}
.pf:hover .fc3,.pf:focus-visible .fc3{transform:translate(.24em,-.27em) rotate(16deg)}
.pf:hover .ff,.pf:focus-visible .ff{transform:perspective(3.8em) rotateX(-20deg)}
.cy{opacity:0;animation:cy 12s linear infinite}
@keyframes cy{0%{opacity:0}3%{opacity:1}25%{opacity:1}28%{opacity:0}100%{opacity:0}}
@media (max-width:899.98px){
  .pfl{padding-top:72px}
  .pf{flex-direction:column;align-items:stretch;justify-content:flex-start;gap:18px;padding:22px 0 28px;font-size:clamp(44px,13.3vw,64px)}
  .pf-meta{display:flex;justify-content:space-between;font-size:13px;color:var(--t4)}
  .pf-l{display:flex;align-items:center;gap:14px}
  .pf-l + .pf-l{margin-top:-8px;justify-content:space-between}
  .pf .fold{font-size:calc(1em * 57 / 52)}
  .pf .arr{width:56px;height:56px;border-width:2px;box-shadow:0 4px 0 var(--ink)}
  .pf .arr svg{width:22px;height:22px}
  .pf .sq{bottom:-.15em;height:.23em}
  .pf:active .fc1{transform:translate(-.24em,-.3em) rotate(-15deg)}
  .pf:active .fc2{transform:translate(0,-.42em) rotate(-2deg)}
  .pf:active .fc3{transform:translate(.24em,-.27em) rotate(16deg)}
  .pf:active .ff{transform:perspective(3.8em) rotateX(-20deg)}
  .pf:active .sq path{stroke-dashoffset:0}
  .pf:active .arr{transform:rotate(-45deg)}
}

/* ---- Accueil : le studio --------------------------------------------------- */
.studio{flex-shrink:0;padding-top:120px}
.studio .g12{align-items:center}
.studio-ph{grid-column:1 / span 6;position:relative;height:470px}
.studio-ph figure{position:absolute;inset:0;padding:14px;transform:rotate(-1.6deg)}
.studio-ph .ph{position:relative;height:100%;overflow:hidden;border-radius:2px;background:#1A2A4A}
.studio-ph .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 40%}
.studio-ph .tape{width:130px;top:22px}
.studio-ph .tape.t1{left:-34px;transform:rotate(-38deg)}
.studio-ph .tape.t2{right:-34px;transform:rotate(38deg)}
.studio-moi{position:absolute;right:-118px;bottom:-64px;display:flex;flex-direction:column;align-items:flex-start}
.studio-moi .hand{margin-left:34px;font-size:28px;color:var(--yellow);transform:rotate(-6deg)}
.studio-badge{position:absolute;right:-8px;bottom:-42px;width:96px;height:96px;border-radius:50%;background:var(--yellow);color:var(--ink);border:2px solid var(--ink);box-shadow:0 4px 0 var(--ink);display:flex;align-items:center;justify-content:center}
.studio-badge .rot{position:absolute;left:0;top:0;width:92px;height:92px;animation:spin 28s linear infinite}
.studio-badge text{font-size:8.5px;font-weight:700;letter-spacing:.06em;font-family:var(--f-body)}
.studio-tx{grid-column:8 / span 5;display:flex;flex-direction:column;align-items:flex-start;gap:22px}
.studio-tx h2{font-size:60px;line-height:1.02;display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.studio-tx h2 .lbl{font-size:56px;transform:rotate(-2deg)}
.studio-tx > p{font-size:17px;line-height:1.65;color:var(--t3);text-wrap:pretty}
.studio-notes{position:relative;width:100%;margin-top:18px}
.studio-notes dl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.tnote{padding:26px 18px 20px;border-radius:2px;transform:rotate(-2.4deg)}
.tnote dt{font-size:24px;line-height:1.1}
.tnote .pin{left:50%;top:-11px;margin-left:-12px;z-index:2}
.tnote dd{margin-top:10px;display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.tnote dd .lbl{font-size:12.5px;padding:.2em .45em .26em;transform:rotate(-1.5deg);box-shadow:0 6px 12px rgba(6,12,30,.18)}
.tnote dd span:last-child{font-size:14px;line-height:1.45;color:#3B4155}
.studio-tx .btn{margin-top:10px}
@media (min-width:900px) and (max-width:1199.98px){
  .studio-ph{height:400px}
  .studio-tx h2{font-size:50px}
  .studio-tx h2 .lbl{font-size:46px}
  .studio-moi{right:-60px;bottom:-78px}
}
@media (max-width:899.98px){
  .studio{padding-top:96px}
  .studio .g12{display:block}
  .studio-ph{height:clamp(220px,66vw,420px)}
  .studio-ph figure{padding:9px}
  .studio-ph .ph img{object-position:88% 40%}
  .studio-ph .tape.t1{width:96px;height:24px;left:-26px;top:14px}
  .studio-tx{margin-top:60px;gap:16px}
  .studio-tx h2{font-size:clamp(32px,9.8vw,46px);line-height:1.04;gap:4px}
  .studio-tx h2 .lbl{font-size:.95em}
  .studio-tx > p{font-size:16px;line-height:1.6}
  .studio-notes{margin-top:16px}
  .studio-notes dl{gap:14px}
  .tnote{padding:22px 12px 14px}
  .tnote dt{font-size:19px}
  .tnote dd .lbl{font-size:10.5px}
  .tnote dd span:last-child{font-size:12.5px}
  .studio-tx .btn{margin-top:8px}
}

/* ---- Accueil : méthode (timeline de montage) ------------------------------- */
.method{flex-shrink:0;padding-top:160px}
.method-hd{align-items:end}
.method-hd h2{grid-column:1 / span 7;font-size:66px;line-height:1.02}
.method-hd p{grid-column:9 / span 4;font-size:17px;line-height:1.6;color:var(--t3)}
.tl{margin-top:56px;border-radius:16px;background:linear-gradient(180deg,#111C38,#0B1429);border:1.5px solid rgba(170,205,245,.24);box-shadow:0 30px 60px rgba(5,10,25,.5);padding:0 20px 20px}
.tl-top{height:46px;display:flex;align-items:center;justify-content:space-between}
.tl-dots{display:flex;gap:8px}
.tl-dots span{width:12px;height:12px;border-radius:50%}
.tl-tc{font-size:12px;font-weight:600;letter-spacing:.06em;color:var(--t4);font-variant-numeric:tabular-nums}
.tl-in{position:relative}
.tl-ruler{height:22px;background-image:linear-gradient(90deg,rgba(170,205,245,.45) 1px,transparent 1px),linear-gradient(90deg,rgba(170,205,245,.2) 1px,transparent 1px);background-size:10% 12px,1.25% 6px;background-repeat:repeat-x;background-position:0 100%,0 100%}
.tl-clips{margin-top:8px;height:132px;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
.clip{position:relative;border-radius:6px;overflow:hidden;background:#1A2A4A;border:2px solid var(--c)}
.clip .ci{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding-top:10px;background:radial-gradient(circle at 50% 56%,var(--g) 0%,transparent 62%);filter:grayscale(1) brightness(.8);animation:cii 16s linear infinite;animation-delay:var(--d)}
.clip .ci svg{width:40px;height:40px}
.clip .tag{position:absolute;left:0;top:0;display:inline-flex;align-items:center;height:22px;padding:0 8px;border-radius:0 0 6px 0;background:var(--c);color:var(--ink);font-size:11px;font-weight:700}
.clip .cb{position:absolute;inset:0;border-radius:4px;box-shadow:inset 0 0 0 2px #fff;opacity:0;animation:cb 16s linear infinite;animation-delay:var(--d)}
@keyframes cii{0%,18%{filter:none}21%,97%{filter:grayscale(1) brightness(.8)}100%{filter:none}}
@keyframes cb{0%,18%{opacity:1}21%,97%{opacity:0}100%{opacity:1}}
.tl-wave{position:relative;margin-top:6px;height:40px;border-radius:6px;background:#0A1226;overflow:hidden}
.tl-wave svg{position:absolute;inset:0;width:100%;height:100%}
.tl-wave .w0{fill:rgba(63,226,255,.22)}
.tl-wave .w1{fill:var(--cyan);animation:wfp 16s linear -1s infinite}
@keyframes wfp{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
.phw{position:absolute;inset:0;pointer-events:none;animation:ph 16s linear -1s infinite}
.phw i{position:absolute;top:0;bottom:0;left:-1px;width:2px;background:#FF3B30}
.phw b{position:absolute;top:0;left:-8px;width:16px;height:20px;background:#FF3B30;clip-path:polygon(0 0,100% 0,100% 62%,50% 100%,0 62%)}
@keyframes ph{from{transform:translateX(0)}to{transform:translateX(100%)}}
.steps{list-style:none;padding:0;margin-top:48px;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:22px;align-items:start}
.step{padding:26px 20px 22px;border-radius:2px;transform:rotate(var(--r))}
.step .tape{width:86px;left:50%;top:-15px;margin-left:-43px;transform:rotate(var(--tr))}
.step .n{font-size:13px;font-weight:700;color:rgba(26,31,46,.55)}
.step h3{margin-top:4px;font-size:25px;line-height:1.1}
.step p{margin-top:10px;font-size:14.5px;line-height:1.55;color:#2E3447}
.msteps{display:none}
@media (min-width:900px) and (max-width:1199.98px){
  .method-hd h2{grid-column:1 / span 8;font-size:54px}
  .method-hd p{grid-column:9 / span 4;font-size:16px}
  .steps{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:40px}
}
@media (max-width:899.98px){
  .method{padding-top:72px}
  .method-hd{display:block}
  .method-hd h2{margin-top:16px;font-size:clamp(32px,9.8vw,46px);line-height:1.04}
  .method-hd p{margin-top:16px;font-size:16px;line-height:1.6}
  .tl,.steps{display:none}
  .msteps{display:block;position:relative;margin-top:32px}
  .msteps ol{list-style:none;padding:0;display:flex;flex-direction:column;gap:8px}
  .mstep{min-height:128px;display:grid;grid-template-columns:112px minmax(0,1fr);column-gap:16px;align-items:start}
  .mstep .clip{height:128px}
  .mstep .clip .ci{padding-top:8px}
  .mstep .clip .ci svg{width:30px;height:30px}
  .mstep .clip .tag{height:20px;padding:0 6px;border-radius:0 0 5px 0;font-size:10px}
  .mstep-tx{display:flex;flex-direction:column;gap:4px;padding-top:2px}
  .mstep-tx .num{font-family:var(--f-disp);font-weight:800;font-size:13px;color:var(--c)}
  .mstep-tx h3{font-size:20px;line-height:1.15}
  .mstep-tx p{font-size:13.5px;line-height:1.5;color:var(--t3)}
  .phv{position:absolute;top:0;bottom:0;left:0;width:112px;pointer-events:none;animation:phv 16s linear -1s infinite}
  .phv i{position:absolute;top:-1px;left:-6px;right:-6px;height:2px;background:#FF3B30}
  .phv b{position:absolute;top:-7px;left:-8px;width:12px;height:14px;background:#FF3B30;clip-path:polygon(0 0,62% 0,100% 50%,62% 100%,0 100%)}
}
@keyframes phv{from{transform:translateY(0)}to{transform:translateY(100%)}}

/* ---- Accueil : « On tourne quand ? » (prise de contact rapide) -------------- */
.cta{flex-shrink:0;padding:160px 0 120px}
.cta .g12{align-items:center}
.cta-l{grid-column:1 / span 7;position:relative;display:flex;flex-direction:column;align-items:flex-start}
.cta h2{margin-top:24px;display:flex;flex-direction:column;align-items:flex-start;font-size:92px;font-weight:inherit}
.cta h2 .lbl:first-child{transform:rotate(-2.5deg)}
.cta h2 .lbl:last-child{margin-top:-8px;margin-left:110px;transform:rotate(1.8deg)}
.cta-l > p{margin-top:34px;max-width:520px;font-size:18px;line-height:1.6;color:var(--t2)}
.cta-r{grid-column:8 / span 5;position:relative;height:520px;display:flex;align-items:center;justify-content:center}
.emf-form{margin-top:30px;display:flex;flex-direction:column;align-items:flex-start;gap:18px}
.emf{position:relative;display:flex;align-items:center;width:min(560px,100%);height:66px;padding:6px 6px 6px 26px;border-radius:999px;background:var(--paper);border:2px solid var(--ink);box-shadow:0 6px 0 var(--ink);transition:box-shadow .2s}
.emf::before{content:"";position:absolute;inset:-3px;border:2px solid var(--yellow);border-radius:999px;pointer-events:none;opacity:0;animation:emr 2.8s ease-out infinite}
.emf:focus-within::before{animation:none;opacity:0}
.emf:focus-within{box-shadow:0 6px 0 var(--ink),0 0 0 4px rgba(255,195,22,.55)}
@keyframes emr{0%{opacity:.9;transform:scale(1,1)}75%,100%{opacity:0;transform:scale(1.035,1.42)}}
.emi{flex:1;min-width:0;height:100%;font:inherit;font-size:17px;color:var(--ink);background:transparent;border:0;outline:none}
.emi::placeholder{color:#7C849A}
.emf .by{flex-shrink:0;height:50px;padding:0 24px;border-radius:999px;font-size:15px;box-shadow:none}
.shine{position:relative;overflow:hidden}
.shine::after{content:"";position:absolute;top:0;bottom:0;left:-70%;width:45%;background:linear-gradient(100deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.85) 50%,rgba(255,255,255,0) 100%);transform:skewX(-20deg);pointer-events:none;animation:shine 3.8s ease-in-out 1.2s infinite}
@keyframes shine{0%,55%{left:-70%}100%{left:140%}}
.cta-note{display:flex;align-items:flex-start;gap:8px;margin-left:30px}
.cta-note .hand{padding-top:18px;font-size:21px;color:var(--yellow)}
.dr path{stroke-dasharray:1 2;stroke-dashoffset:1.05;animation:drl 4.6s ease-in-out infinite}
@keyframes drl{0%{stroke-dashoffset:1.05}28%,78%{stroke-dashoffset:0}100%{stroke-dashoffset:-1}}
.form-ok{margin-top:30px;display:flex;align-items:center;gap:14px;padding:18px 24px;border-radius:2px;transform:rotate(-1.5deg)}
.form-ok .ok{display:flex;flex-shrink:0;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;background:var(--ink);color:var(--lime)}
.form-ok .hand{font-size:24px}
.form-err{font-size:14px;color:#FFB4A8}
@media (min-width:900px) and (max-width:1199.98px){
  .cta h2{font-size:76px}
  .bd{width:200px;height:200px}
  .bd .bd-txt{width:200px;height:200px}
  .bd .bar{width:84px;height:84px}
}
@media (max-width:899.98px){
  .cta{padding:96px 0 72px}
  .cta .g12{display:block}
  .cta h2{margin-top:18px;font-size:clamp(40px,12.8vw,60px)}
  .cta h2 .lbl:last-child{margin-top:-4px;margin-left:56px}
  .cta-l > p{margin-top:26px;font-size:16px}
  .emf-form{margin-top:22px;width:100%;max-width:520px;align-items:stretch;gap:12px}
  .emf{width:100%;height:56px;padding:0 22px;box-shadow:0 5px 0 var(--ink)}
  .emf:focus-within{box-shadow:0 5px 0 var(--ink),0 0 0 4px rgba(255,195,22,.55)}
  .emi{font-size:16px}
  .emf-form > .btn{height:54px}
  .cta-note{margin:4px 0 0;justify-content:center;text-align:center}
  .cta-note .hand{padding-top:0;font-size:17px}
  .form-ok{margin-top:22px;gap:12px;padding:16px 18px}
  .form-ok .ok{width:34px;height:34px}
  .form-ok .hand{font-size:19px}
}
/* Sur mobile, la maquette place « Le studio » avant « Voir le portfolio » */
@media (max-width:899.98px){
  .p-accueil .studio{order:1}
  .p-accueil .pfl{order:2}
  .p-accueil .method{order:3}
  .p-accueil .cta{order:4}
}

/* ---- Animations communes aux pages intérieures ---------------------------- */
.tw{display:inline-block;animation:tw 3.2s ease-in-out infinite}
@keyframes tw{50%{transform:scale(.72) rotate(22deg)}}
.clk{display:inline-block;animation:press 2.6s ease-in-out infinite}
.clk path:first-child{animation:burst 2.6s ease-out infinite}
@keyframes press{0%,36%,56%,100%{transform:none}44%{transform:translate(-3px,-3px) scale(.9)}}
@keyframes burst{0%,40%{opacity:0}46%,78%{opacity:1}100%{opacity:0}}
.rise{animation:rise .9s var(--ease) backwards}
@keyframes rise{from{opacity:0;transform:translateY(26px)}}
.rec{animation:rec 1.1s steps(1,end) infinite}
@keyframes rec{50%{opacity:.15}}
@media (max-width:899.98px){
  .mrise{animation:rise .8s var(--ease) backwards}
}

/* ---- Portfolio : en-tête ---------------------------------------------------- */
.pfh{position:relative;flex-shrink:0;padding-top:40px}
.pfh .g12{align-items:center}
.pfh-tx{grid-column:1 / span 6;display:flex;flex-direction:column;align-items:flex-start}
.pfh h1{margin-top:30px;font-size:112px;line-height:1;font-weight:inherit}
.pfh h1 .lbl{transform:rotate(-2.5deg)}
.pfh-tx > p{margin-top:38px;max-width:520px;font-size:19px;line-height:1.6;color:var(--t2)}
.pfh-hint{margin-top:26px;margin-left:4px;display:flex;align-items:flex-start;gap:10px}
.pfh-hint .hand{font-size:23px;color:var(--yellow);transform:rotate(-3deg)}
.pfh-art{grid-column:7 / span 6;position:relative;height:540px}
.pfh-clk{position:absolute;left:446px;top:146px}
/* Dossier illustré « Mes projets » (520 × 330) */
.bigf{position:absolute;left:50%;bottom:40px;width:520px;height:330px;margin-left:-260px}
.bigf > span{position:absolute}
.bigf .bf-tab{left:22px;top:0;width:200px;height:70px;border-radius:24px 24px 0 0;background:linear-gradient(180deg,#B8F045,#86CC1C)}
.bigf .bf-back{left:0;right:0;top:46px;bottom:0;border-radius:32px;background:linear-gradient(180deg,#8FDB22,#4E8C0E)}
.bigf .bf-front{left:-12px;right:-12px;bottom:0;height:196px;border-radius:32px;background:linear-gradient(180deg,rgba(222,255,140,.64),rgba(126,204,28,.92));border:2px solid rgba(235,255,190,.72);box-shadow:inset 0 2px 0 rgba(255,255,255,.7),0 34px 60px rgba(5,10,25,.5);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.bigf .bf-lab{left:50%;bottom:60px;margin-left:-124px;width:248px;padding:16px 20px 14px;background:var(--paper);border-radius:4px;box-shadow:0 10px 22px rgba(5,10,25,.3);transform:rotate(-3deg);text-align:center}
.bigf .bf-lab .tape{width:90px;height:26px;left:50%;top:-14px;margin-left:-45px;transform:rotate(4deg)}
.bigf .bf-lab .hand{display:block;font-size:30px;line-height:1;color:var(--ink)}
.hp{position:absolute;left:50%;top:0;width:200px;height:150px;margin-left:-100px;border:8px solid var(--paper);border-radius:5px;overflow:hidden;background-color:#1A2A4A;box-shadow:0 18px 34px rgba(5,10,25,.45);transform:translate(var(--x),var(--y)) rotate(var(--r));animation:hf 3.6s ease-in-out infinite alternate}
.hp img{display:block;width:100%;height:100%;object-fit:cover}
@keyframes hf{to{transform:translate(var(--x),calc(var(--y) - 18px)) rotate(calc(var(--r) * 1.15))}}
@media (min-width:900px) and (max-width:1199.98px){
  .pfh h1{font-size:92px}
  .pfh-art{height:460px}
  .pfh-art .bigf{transform:scale(.74);transform-origin:50% 100%}
  .pfh-clk{left:auto;right:6%;top:120px}
}
@media (max-width:899.98px){
  .pfh{padding-top:36px}
  .pfh .g12{display:flex;flex-direction:column;align-items:flex-start}
  .pfh-tx{width:100%}
  .pfh h1{margin-top:0;font-size:clamp(48px,16.9vw,80px)}
  .pfh h1 .sel{inset:-10px -12px}
  .pfh-tx > p{margin-top:34px;font-size:16px;animation-delay:.1s}
  .pfh-tx .pfh-hint{display:none}
  .pfh-art{align-self:center;width:350px;height:250px;margin-top:18px;animation-delay:.2s}
  .pfh-art .bigf{bottom:10px;transform:scale(.6);transform-origin:50% 100%}
  .pfh-clk{display:none}
}

/* ---- Portfolio : filtres (dossiers) ---------------------------------------- */
.pff{position:relative;flex-shrink:0;padding-top:24px}
.pff .pfh-hint{display:none}
.lite{position:absolute;pointer-events:none;animation:spot 6s ease-in-out infinite alternate}
@keyframes spot{from{opacity:.8}to{opacity:1}}
.lite.spot{left:50%;top:-70px;width:1180px;height:470px;margin-left:-590px;background:radial-gradient(ellipse 44% 46% at 50% 62%,rgba(255,255,255,.22),rgba(255,255,255,.08) 50%,rgba(255,255,255,0) 74%)}
.lite.beam{left:50%;top:0;width:1060px;height:300px;margin-left:-530px;background:linear-gradient(180deg,rgba(255,255,255,0),rgba(255,255,255,.1) 55%,rgba(255,255,255,.17));clip-path:polygon(31% 0,69% 0,100% 100%,0 100%);filter:blur(16px)}
.lite.pool{left:50%;top:196px;width:1040px;height:112px;margin-left:-520px;background:radial-gradient(ellipse 50% 50% at 50% 50%,rgba(255,255,255,.24),rgba(255,255,255,.08) 52%,rgba(255,255,255,0) 72%)}
.tabs{position:relative;display:grid;grid-template-columns:repeat(5,199px);justify-content:center;column-gap:24px;padding-top:62px}
.tab{position:relative;display:block;width:100%;height:164px;text-align:left;transition:transform .4s var(--spring)}
.tab .ftab,.tab .fbk,.tab .fi,.tab .ffr,.tab .sl,.tab .fcur{position:absolute}
.tab .ftab{left:6px;top:14px;width:92px;height:36px;border-radius:12px 12px 0 0;background:linear-gradient(180deg,var(--t1),var(--t2))}
.tab .fbk{left:0;right:0;top:34px;bottom:0;border-radius:18px;background:linear-gradient(180deg,var(--b1),var(--b2))}
.tab .fi{top:30px;width:94px;height:74px;border:3px solid var(--paper);border-radius:6px;overflow:hidden;background-color:#1A2A4A;box-shadow:0 6px 14px rgba(5,10,25,.35);transition:transform .6s var(--spring)}
.tab .fi img{display:block;width:100%;height:100%;object-fit:cover}
.tab .fi1{left:14px;transform:rotate(-9deg)}
.tab .fi2{left:calc(50% - 47px);transform:translateY(-6px) rotate(2deg);transition-delay:.05s}
.tab .fi3{right:14px;transform:rotate(10deg);transition-delay:.1s}
.tab .ffr{left:-5px;right:-5px;bottom:0;height:98px;border-radius:18px;background:linear-gradient(180deg,var(--f1),var(--f2));border:1.5px solid rgba(255,255,255,.62);box-shadow:inset 0 1px 0 rgba(255,255,255,.75),0 16px 30px rgba(5,10,25,.42);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transform-origin:50% 100%;transition:transform .5s var(--ease)}
.tab .flb{position:absolute;left:15px;right:12px;bottom:34px;font-family:var(--f-disp);font-weight:800;font-size:17px;line-height:1.12;letter-spacing:-.02em;color:var(--ink)}
.tab .fct{position:absolute;left:15px;bottom:13px;font-size:12.5px;font-weight:600;color:rgba(20,26,44,.72)}
.tab .gl{position:absolute;left:-30px;right:-30px;bottom:-44px;height:76px;border-radius:50%;background:radial-gradient(ellipse 50% 50% at 50% 50%,var(--f2),rgba(0,0,0,0) 72%);opacity:0;filter:blur(10px);pointer-events:none;transition:opacity .4s}
.tab .sl{inset:-34px -12px -12px -12px;opacity:0;transition:opacity .3s}
.tab .fcur{right:-24px;bottom:-30px;opacity:0;transform:translate(12px,12px) scale(.8);transition:opacity .3s,transform .5s var(--spring)}
.tab:hover{transform:translateY(-6px)}
.tab:hover .fi1{transform:translate(-6px,-16px) rotate(-13deg)}
.tab:hover .fi2{transform:translate(0,-24px) rotate(0deg)}
.tab:hover .fi3{transform:translate(6px,-14px) rotate(14deg)}
.tab:hover .gl{opacity:.45}
.tab.on,.tab.on:hover{transform:translateY(-4px)}
.tab.on .fi1{transform:translate(-14px,-36px) rotate(-16deg)}
.tab.on .fi2{transform:translate(0,-50px) rotate(-2deg)}
.tab.on .fi3{transform:translate(14px,-34px) rotate(17deg)}
.tab.on .ffr{transform:perspective(380px) rotateX(-14deg)}
.tab.on .gl{opacity:.9}
.tab.on .sl,.tab.on .fcur{opacity:1}
.tab.on .fcur{transform:none}
.pff-floor{position:relative;height:2px;margin-top:50px}
.floor{position:absolute;left:0;right:0;top:0;height:3px;border-radius:2px;background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.75) 14%,#FFFFFF 50%,rgba(255,255,255,.75) 86%,rgba(255,255,255,0));box-shadow:0 0 16px 2px rgba(255,255,255,.6),0 0 56px 10px rgba(140,190,255,.38)}
.spill{position:absolute;left:4%;right:4%;top:3px;height:190px;pointer-events:none;background:radial-gradient(ellipse 50% 100% at 50% 0,rgba(150,195,255,.26),rgba(150,195,255,.08) 46%,rgba(150,195,255,0) 74%)}
/* Dossiers compacts (tablette et mobile) */
@media (max-width:1199.98px){
  .tab .ftab{left:6px;top:16px;width:78px;height:30px}
  .tab .fbk{top:32px;border-radius:16px}
  .tab .fi{top:32px;width:76px;height:58px}
  .tab .fi1{left:10px}
  .tab .fi2{left:calc(50% - 38px)}
  .tab .fi3{right:10px}
  .tab .ffr{left:-4px;right:-4px;height:88px;border-radius:16px}
  .tab .flb{left:13px;right:10px;bottom:31px;font-size:15px}
  .tab .fct{left:13px;bottom:11px;font-size:11.5px}
  .tab .gl{left:-14px;right:-14px;bottom:-30px;height:56px}
  .tab .sl{inset:-28px -8px -8px -8px}
  .tab .fcur{right:-10px;bottom:-22px}
  .tab.on .fi1{transform:translate(-8px,-30px) rotate(-16deg)}
  .tab.on .fi2{transform:translate(0,-40px) rotate(-2deg)}
  .tab.on .fi3{transform:translate(8px,-28px) rotate(17deg)}
}
@media (min-width:900px) and (max-width:1199.98px){
  .tabs{grid-template-columns:repeat(5,minmax(0,156px));column-gap:16px}
  .tab{height:150px}
}
@media (max-width:899.98px){
  .pff{padding-top:34px}
  .pff .wrap{padding-inline:0}
  .pff .pfh-hint{display:flex;margin:0;padding:0 var(--gut);gap:8px}
  .pff .pfh-hint .hand{font-size:20px}
  .pff .pfh-hint svg{width:44px;height:48px}
  .lite{display:none}
  .tabs{display:flex;justify-content:flex-start;gap:14px;overflow-x:auto;overflow-y:hidden;padding:64px var(--gut) 38px;scroll-snap-type:x mandatory;scroll-padding-left:var(--gut);scrollbar-width:none}
  .tabs::-webkit-scrollbar{display:none}
  .tab{flex:0 0 156px;width:156px;height:150px;scroll-snap-align:start}
  .pff-floor{margin:0 var(--gut)}
  .spill{display:none}
}

/* ---- Portfolio : cartes projets --------------------------------------------- */
.pfl-sec{flex-shrink:0;padding-top:64px}
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:24px;row-gap:56px}
.card{display:flex;flex-direction:column;gap:16px;animation:deal .75s var(--ease) backwards}
.card:nth-child(3n+2){animation-delay:.08s}
.card:nth-child(3n){animation-delay:.16s}
@keyframes deal{from{opacity:0;transform:translateY(46px) rotate(-3deg)}}
.card .pr{position:relative;aspect-ratio:421 / 263;overflow:hidden;background:#1A2A4A;border:10px solid var(--paper);border-radius:4px;box-shadow:0 24px 46px rgba(5,10,25,.45);transform:rotate(var(--r,0deg));transition:transform .45s var(--ease)}
.card .pr .bgblur{position:absolute;left:-24px;top:-24px;width:calc(100% + 48px);height:calc(100% + 48px);object-fit:cover;filter:blur(16px) brightness(.4) saturate(1.1)}
.card .im{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.card .im.contain{object-fit:contain}
.card .vp{position:absolute;left:14px;bottom:14px;display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 16px;border-radius:999px;background:var(--yellow);color:var(--ink);border:2px solid var(--ink);font-size:14px;font-weight:600;opacity:0;transform:translateY(10px);transition:opacity .3s,transform .4s var(--ease)}
.card .t{display:flex;justify-content:space-between;align-items:baseline;gap:16px}
.card .t > div{display:flex;flex-direction:column;gap:6px}
.card h2{font-family:var(--f-disp);font-size:20px;line-height:1.2;font-weight:700;text-decoration:underline;text-decoration-color:transparent;text-decoration-thickness:3px;text-underline-offset:6px;transition:text-decoration-color .2s}
.card .t > div span{font-size:15px;color:var(--t3)}
.card .yr{font-size:15px;color:var(--t4);white-space:nowrap}
.card:hover .im{transform:scale(1.04)}
.card:hover .pr{transform:translateY(-6px) rotate(0deg)}
.card:hover .vp,.card:focus-visible .vp{opacity:1;transform:none}
.card:hover h2,.card:focus-visible h2{text-decoration-color:var(--yellow)}
.pfl-pg{margin-top:72px;display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:26px;border-top:1.5px dashed rgba(170,205,245,.38)}
.pfl-pg .range{font-size:15px;color:var(--t4)}
.pfl-pg .ctl{display:flex;align-items:center;gap:12px}
.pfl-pg .pl{display:inline-flex;align-items:center;height:48px;padding:0 18px;border-radius:999px;background:rgba(255,255,255,.08);font-size:14px;font-weight:600;color:var(--t2)}
.pfl-pg .btn{height:48px;padding:0 22px;font-size:15px}
.pfl-pg .prev{padding-left:18px}
.pfl-pg .btn[aria-disabled="true"]{opacity:.4;cursor:not-allowed}
.pfl-pg .btn[aria-disabled="true"]:hover{background-color:transparent;border-color:rgba(255,255,255,.88);color:#fff}
.pfl-pg .btn[aria-disabled="true"]:hover svg{transform:none}
/* État vide (catégorie « Clips ») */
.pfl-empty{align-items:center;padding:8px 0 24px}
.pfl-empty-art{grid-column:1 / span 6;position:relative;height:340px}
.strip{position:absolute;left:36px;right:10px;top:70px;height:206px;padding:34px 20px;background:var(--ink);border-radius:6px;box-shadow:0 28px 54px rgba(5,10,25,.5);transform:rotate(-4deg)}
.strip .holes{position:absolute;left:16px;right:16px;display:flex;justify-content:space-between}
.strip .holes.t{top:11px}
.strip .holes.b{bottom:11px}
.strip .holes span{width:13px;height:11px;border-radius:3px;background:rgba(251,250,246,.85)}
.strip .fr{height:100%;display:grid;grid-template-columns:1fr 1.35fr 1fr;gap:14px}
.strip .fr > span{border:2px dashed rgba(255,255,255,.3);border-radius:4px}
.strip .fr .mid{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;border-color:var(--lime);background:rgba(183,240,58,.08)}
.strip .play{display:flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:50%;background:var(--lime);color:var(--ink);box-shadow:0 0 26px rgba(183,240,58,.5)}
.strip .mid .hand{font-size:24px;line-height:1;color:#fff}
.pfl-empty-art .tape{width:116px;left:14px;top:58px;transform:rotate(-34deg)}
.pfl-empty-tx{grid-column:7 / span 6;display:flex;flex-direction:column;align-items:flex-start}
.pfl-empty-tx > .hand{font-size:25px;color:var(--yellow);transform:rotate(-2deg)}
.pfl-empty-tx h2{margin-top:14px;font-size:58px;line-height:1.04}
.pfl-empty-tx p{margin-top:18px;max-width:470px;font-size:18px;line-height:1.6;color:var(--t2)}
.pfl-empty-tx .acts{margin-top:30px;display:flex;align-items:center;gap:12px}
.pfl-empty-tx .acts .btn{height:54px}
@media (min-width:900px) and (max-width:1199.98px){
  .cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pfl-empty-tx h2{font-size:46px}
}
@media (max-width:899.98px){
  .pfl-sec{padding-top:48px}
  .cards{display:flex;flex-direction:column;gap:44px}
  .card{gap:14px}
  .card .pr{aspect-ratio:350 / 218;border-width:8px}
  .card .vp{opacity:1;transform:none}
  .card h2{font-size:21px}
  .card .t > div span{font-size:14.5px}
  .card .yr{font-size:14px}
  .pfl-pg{margin-top:44px;padding-top:20px}
  .pfl-pg .range{font-size:14px}
  .pfl-pg .ctl{display:none}
  .pfl-empty{display:flex;flex-direction:column;align-items:flex-start;padding:4px 0 8px}
  .pfl-empty-art{display:none}
  .pfl-empty-tx > .hand{font-size:21px}
  .pfl-empty-tx h2{margin-top:12px;font-size:38px;line-height:1.05}
  .pfl-empty-tx p{margin-top:14px;font-size:16px}
  .pfl-empty-tx .acts{margin-top:24px;align-self:stretch;flex-direction:column;align-items:stretch}
  .pfl-empty-tx .acts .btn{height:52px;font-size:15px}
}

/* ---- Bloc « Le prochain film, c’est le vôtre ? » (portfolio, services) ---- */
.nxc{position:relative;flex-shrink:0;padding:230px 0 150px;overflow:hidden}
.nxc-band{position:absolute;left:-80px;right:-80px;top:74px;height:54px;border-top:2px solid var(--ink);border-bottom:2px solid var(--ink);transform:rotate(-2deg);box-shadow:0 14px 30px rgba(5,10,25,.4)}
.nxc .g12{align-items:center}
.nxc-l{grid-column:1 / span 7;display:flex;flex-direction:column;align-items:flex-start}
.nxc h2{margin-top:28px;display:flex;flex-direction:column;align-items:flex-start;font-size:88px;font-weight:inherit}
.nxc h2 .disp{line-height:1.08}
.nxc-rot{position:relative;display:block;margin:10px 0 12px}
.rot{display:block;height:1.3em;overflow:hidden;transform:rotate(-2deg)}
.rw{display:flex;flex-direction:column;align-items:flex-start;animation:rw 11s cubic-bezier(.7,0,.25,1) infinite}
.rw > span{display:block;height:1.3em;flex-shrink:0}
@keyframes rw{0%,15%{transform:translateY(0)}20%,35%{transform:translateY(-16.6667%)}40%,55%{transform:translateY(-33.3333%)}60%,75%{transform:translateY(-50%)}80%,95%{transform:translateY(-66.6667%)}100%{transform:translateY(-83.3333%)}}
.nxc-rot .clk{position:absolute;left:132px;bottom:-26px}
.nxc-l > p{margin-top:32px;max-width:520px;font-size:19px;line-height:1.6;color:var(--t2)}
.nxc-acts{margin-top:34px;display:flex;align-items:center;gap:14px}
.nxc-acts .btn{height:56px;padding:0 28px}
.nxc-acts .bw{padding:0 24px}
.nxc-r{grid-column:8 / span 5;position:relative;height:540px}
.yf{position:absolute;left:50%;bottom:70px;width:420px;height:280px;margin-left:-230px}
.yf > span,.yf > div{position:absolute}
.yf .yf-tab{left:20px;top:0;width:166px;height:58px;border-radius:20px 20px 0 0;background:linear-gradient(180deg,#FFD84A,#EFB000)}
.yf .yf-back{left:0;right:0;top:38px;bottom:0;border-radius:28px;background:linear-gradient(180deg,#F7BE12,#B98600)}
.bp{left:50%;top:-58px;width:272px;height:196px;margin-left:-136px;padding:12px;background:var(--paper);border-radius:6px;box-shadow:0 18px 36px rgba(5,10,25,.4);animation:bp 6.5s cubic-bezier(.65,0,.25,1) -2.2s infinite}
@keyframes bp{0%,6%{transform:translateY(96px) rotate(-7deg)}24%,72%{transform:translateY(0) rotate(3deg)}90%,100%{transform:translateY(96px) rotate(-7deg)}}
.bp-in{position:relative;height:100%;border:2px dashed #AEB6C8;border-radius:4px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px}
.bp-rec{position:absolute;left:10px;top:10px;display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;letter-spacing:.08em;color:#E3261E}
.bp-rec i{width:9px;height:9px;border-radius:50%;background:#E3261E}
.bp-n{position:absolute;right:10px;top:10px;font-size:11px;font-weight:700;letter-spacing:.06em;color:#7C849A}
.bp-plus{display:flex;align-items:center;justify-content:center;width:50px;height:50px;border-radius:50%;background:var(--ink);color:var(--yellow)}
.bp-in .hand{font-size:26px;line-height:1;color:var(--ink)}
.yf .yf-front{left:-10px;right:-10px;bottom:0;height:178px;border-radius:28px;background:linear-gradient(180deg,rgba(255,240,175,.7),rgba(255,192,24,.95));border:2px solid rgba(255,248,210,.75);box-shadow:inset 0 2px 0 rgba(255,255,255,.7),0 34px 60px rgba(5,10,25,.5);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.yf .yf-lab{left:34px;bottom:30px;font-size:26px;line-height:1.1;color:var(--ink);transform:rotate(-2deg)}
.bd.sm{position:absolute;right:6px;bottom:26px;width:176px;height:176px}
.bd.sm .bd-txt{width:176px;height:176px}
.bd.sm .bd-txt text{font-size:13px}
.bd.sm .bar{width:74px;height:74px}
@media (min-width:900px) and (max-width:1199.98px){
  .nxc h2{font-size:68px}
  .nxc-r{height:460px}
  .nxc-r .yf{transform:scale(.8);transform-origin:50% 100%}
  .bd.sm{right:-10px;bottom:0}
}
@media (max-width:899.98px){
  .nxc{padding:142px 0 84px}
  .nxc-band{left:-40px;right:-40px;top:34px;height:44px}
  .nxc .g12{display:block}
  .nxc h2{margin-top:0;font-size:clamp(38px,12.8vw,60px)}
  .nxc-rot{margin:8px 0 10px}
  .nxc-rot .clk{display:none}
  .nxc-l > p{margin-top:24px;font-size:16px}
  .nxc-acts{margin-top:28px;width:100%;max-width:520px;flex-direction:column;align-items:stretch;gap:12px}
  .nxc-acts .btn,.nxc-acts .bw{height:52px;padding:0 22px;font-size:15px}
  .nxc-r{display:none}
}

/* ---- Services : en-tête photo ---------------------------------------------- */
.qhx{position:relative;flex-shrink:0;margin-top:-88px;padding:170px 0 150px}
.qbgw{position:absolute;inset:0;pointer-events:none;-webkit-mask-image:linear-gradient(180deg,#000 62%,transparent 100%);mask-image:linear-gradient(180deg,#000 62%,transparent 100%)}
.qbgw img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 42%;filter:saturate(.85) contrast(1.04)}
.qbgw::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(16,25,50,.94) 0%,rgba(16,25,50,.82) 34%,rgba(16,25,50,.42) 66%,rgba(16,25,50,.3) 100%),linear-gradient(180deg,rgba(16,25,50,.55) 0%,rgba(16,25,50,0) 26%)}
.qhin{position:relative;display:flex;flex-direction:column;align-items:flex-start}
.qhx h1{display:flex;flex-direction:column;align-items:flex-start;font-size:84px;font-weight:inherit}
.qhx h1 .lbl{transform:rotate(var(--r));animation:qbump 9s ease-out infinite;animation-delay:var(--d)}
.qhx h1 .lbl:nth-child(2){margin-top:-6px;margin-left:92px}
.qhx h1 .lbl:nth-child(3){margin-top:-6px;margin-left:32px}
.qhs{opacity:0;animation:qsel 9s linear infinite;animation-delay:var(--d)}
.qhc{position:absolute;right:-46px;bottom:-40px;opacity:0;animation:qcur 9s ease-out infinite;animation-delay:var(--d)}
.qhx h1 .lbl:first-child .qhs,.qhx h1 .lbl:first-child .qhc{opacity:1}
@keyframes qbump{0%{scale:1}4%{scale:1.07}9%,100%{scale:1}}
@keyframes qsel{0%,32.4%{opacity:1}33.4%,100%{opacity:0}}
@keyframes qcur{0%{opacity:0;transform:translate(30px,22px)}5%{opacity:1;transform:none}8%{transform:scale(.84)}11%{transform:none}31%{opacity:1}33.4%,100%{opacity:0;transform:none}}
.qhin > p{margin-top:44px;max-width:560px;font-size:20px;line-height:1.6;color:#E6ECF8}
.qh-acts{margin-top:30px;display:flex;align-items:center;gap:14px}
.qh-acts .btn{padding:0 24px}
@media (min-width:900px) and (max-width:1199.98px){
  .qhx h1{font-size:70px}
}
@media (max-width:899.98px){
  .qhx{margin-top:-64px;padding:112px 0 76px}
  .qbgw img{object-position:58% 40%}
  .qbgw::after{background:linear-gradient(180deg,rgba(16,25,50,.72) 0%,rgba(16,25,50,.5) 38%,rgba(16,25,50,.86) 100%)}
  .qhx h1{font-size:clamp(40px,12.8vw,60px)}
  .qhx h1 .lbl:nth-child(2){margin-top:-2px;margin-left:30px}
  .qhx h1 .lbl:nth-child(3){margin-top:-2px;margin-left:12px}
  .qhc{right:-24px;bottom:-30px}
  .qhc svg{width:30px;height:30px}
  .qhin > p{margin-top:34px;font-size:16.5px}
  .qh-acts{margin-top:28px;width:100%;max-width:520px;flex-direction:column;align-items:stretch;gap:12px}
}

/* ---- Services : les six blocs ---------------------------------------------- */
.qsv{flex-shrink:0;padding-top:112px}
.qsv .wrap{display:flex;flex-direction:column}
.blk{position:relative;padding:36px 0 84px;scroll-margin-top:24px}
.blk:last-child{padding-bottom:16px}
.blk .bh{display:flex;align-items:center;gap:24px}
.blk .bnm{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:60px;height:60px;border-radius:50%;background:var(--c);color:var(--ink);font-family:var(--f-disp);font-weight:800;font-size:18px;box-shadow:0 10px 22px rgba(5,10,25,.35),inset 0 1px 0 rgba(255,255,255,.4);transition:transform .5s var(--spring)}
.blk .sn{position:relative;isolation:isolate;display:inline-block;padding:.02em .22em .09em;margin-left:-.1em;font-family:var(--f-disp);font-weight:800;font-size:80px;line-height:1.05;letter-spacing:-.035em;white-space:nowrap;color:#fff;transition:color .35s,transform .5s var(--spring)}
.blk .sn::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:8px;background:var(--lg);box-shadow:0 16px 32px rgba(6,12,30,.42),inset 0 1px 0 rgba(255,255,255,.3);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.blk.on .bnm{transform:rotate(-12deg) scale(1.1)}
.blk.on .sn{color:var(--t);transform:rotate(-1.4deg) translateX(8px)}
.blk.on .sn::before{transform:scaleX(1)}
.blk .bc{margin-top:36px;display:grid;grid-template-columns:minmax(0,1080px) 200px;justify-content:space-between;column-gap:32px;align-items:start}
.blk.alt .bc{grid-template-columns:200px minmax(0,1080px)}
.qpp{position:relative;padding:48px 56px 50px;border-radius:4px;background:var(--pg);color:var(--ink);box-shadow:0 30px 60px rgba(5,10,25,.45),0 4px 12px rgba(5,10,25,.25);transform:rotate(-.5deg);transition:transform .6s cubic-bezier(.34,1.4,.64,1),box-shadow .6s ease}
.blk.alt .qpp{transform:rotate(.5deg)}
.blk.on .qpp{transform:rotate(0deg) translateY(-6px);box-shadow:0 40px 80px rgba(5,10,25,.5),0 6px 16px rgba(5,10,25,.25)}
.qpp .tape{width:120px;top:-15px;transform:rotate(3deg);left:64px}
.blk.alt .qpp .tape{left:auto;right:64px}
.qld{max-width:900px;font-family:var(--f-disp);font-weight:800;font-size:38px;line-height:1.12;letter-spacing:-.025em;color:var(--ink)}
.qmk{background:linear-gradient(180deg,transparent 58%,var(--mk) 58%,var(--mk) 92%,transparent 92%);padding:0 .06em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.qpg{margin-top:30px;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);column-gap:64px;align-items:start}
.qdx{font-size:18px;line-height:1.7;color:#2A3350}
.qpa{margin-top:28px;display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.qbt{display:inline-flex;align-items:center;gap:10px;height:50px;padding:0 22px;border-radius:999px;background:var(--ink);color:#fff;font-size:15px;font-weight:600;box-shadow:0 4px 0 rgba(20,26,44,.28);transition:transform .15s,box-shadow .15s}
.qbt:hover{transform:translateY(-2px);box-shadow:0 6px 0 rgba(20,26,44,.28)}
.qpp a:focus-visible{outline-color:var(--ink)}
.qk{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:rgba(20,26,44,.62)}
.qck{margin-top:10px;list-style:none;padding:0}
.qck li{display:flex;align-items:flex-start;gap:12px;padding:9px 0;border-bottom:1.5px dashed rgba(20,26,44,.2);font-size:15.5px;line-height:1.45;font-weight:500;color:var(--ink)}
.qck li svg{flex-shrink:0;width:20px;height:20px;margin-top:1px}
.qsz{display:flex;justify-content:center;padding-top:40px}
.qstk{display:flex;align-items:center;justify-content:center;width:168px;height:168px;border-radius:50%;background:var(--lg);color:var(--t);border:3px solid var(--ink);box-shadow:0 7px 0 var(--ink),0 28px 48px rgba(5,10,25,.45),inset 0 2px 0 rgba(255,255,255,.35);transform:rotate(-9deg);transition:transform .6s var(--spring)}
.blk.alt .qstk{transform:rotate(8deg)}
.blk.on .qstk{transform:rotate(0deg) scale(1.06)}
@media (min-width:900px) and (max-width:1199.98px){
  .blk .sn{font-size:58px;white-space:normal}
  .blk .bc{grid-template-columns:minmax(0,1fr) 150px;column-gap:24px}
  .blk.alt .bc{grid-template-columns:150px minmax(0,1fr)}
  .qstk{width:136px;height:136px}
  .qstk svg{width:60px;height:60px}
  .qpp{padding:40px 40px 42px}
  .qld{font-size:32px}
  .qpg{column-gap:40px}
}
@media (max-width:899.98px){
  .qsv{padding-top:56px}
  .blk{padding:26px 0 60px}
  .blk .bh{gap:14px;align-items:flex-start}
  .blk .bnm{width:44px;height:44px;font-size:14px;margin-top:4px}
  .blk .sn{font-size:clamp(28px,8.7vw,40px);white-space:normal;color:var(--t);transform:rotate(-1deg)}
  .blk .sn::before{transform:scaleX(1)}
  .blk.on .sn{transform:rotate(-1.4deg) translateX(4px)}
  .blk .bc,.blk.alt .bc{position:relative;margin-top:30px;display:flex;flex-direction:column}
  .blk .qsz{position:absolute;right:-4px;top:-40px;z-index:2;padding:0}
  .qstk,.blk.alt .qstk{width:76px;height:76px;border-width:2.5px;box-shadow:0 4px 0 var(--ink),0 16px 28px rgba(5,10,25,.45),inset 0 2px 0 rgba(255,255,255,.35)}
  .qstk svg{width:38px;height:38px}
  .qpp{padding:34px 20px 26px}
  .qld{font-size:clamp(20px,5.9vw,28px);line-height:1.16;padding-right:34px}
  .qpg{margin-top:20px;grid-template-columns:minmax(0,1fr);row-gap:22px}
  .qdx{font-size:15.5px}
  .qpa{margin-top:20px}
  .qbt{height:46px;padding:0 20px;font-size:14.5px}
  .qk{font-size:11px}
  .qck li{font-size:14.5px;padding:8px 0}
}

/* ---- Services : méthode (5 étapes) ----------------------------------------- */
.svm{flex-shrink:0;padding-top:130px}
.mbox{position:relative;overflow:hidden;padding:60px 64px 72px;border-radius:28px;background:radial-gradient(900px 360px at 50% -120px,rgba(255,195,22,.1),rgba(255,195,22,0) 70%),#0E1428;border:1.5px solid rgba(170,205,245,.2);box-shadow:0 40px 80px rgba(5,10,25,.5)}
.mbox-hd{align-items:end}
.mbox-hd > div{grid-column:1 / span 7}
.mbox-hd .hand{font-size:22px;color:var(--yellow)}
.mbox-hd h2{margin-top:8px;font-size:60px;line-height:1.02}
.mbox-hd p{grid-column:9 / span 4;font-size:17px;line-height:1.6;color:var(--t3)}
.stp-w{position:relative;margin-top:70px}
.stp{position:relative;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));column-gap:24px}
.stp li > div{display:flex;flex-direction:column;align-items:center}
.stp-line{position:absolute;left:10%;right:10%;top:27px;height:2px;background:repeating-linear-gradient(90deg,rgba(170,205,245,.5) 0 8px,transparent 8px 15px)}
.lite2{position:absolute;top:27px;width:90px;height:3px;margin-left:-45px;border-radius:999px;background:linear-gradient(90deg,rgba(255,195,22,0),#FFC316,rgba(255,195,22,0));box-shadow:0 0 14px rgba(255,195,22,.8);animation:lite2 7s cubic-bezier(.45,0,.55,1) infinite}
@keyframes lite2{0%{left:10%;opacity:0}8%{opacity:1}92%{opacity:1}100%{left:90%;opacity:0}}
.stp li{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center}
.stp .nd2{display:flex;flex-shrink:0;align-items:center;justify-content:center;width:56px;height:56px;border-radius:50%;background:var(--ink);border:2px solid var(--c);color:#fff;font-family:var(--f-disp);font-weight:800;font-size:16px;box-shadow:0 0 0 6px rgba(20,26,44,.9),0 0 24px var(--g);transition:transform .35s var(--spring),background-color .25s,color .25s}
.stp li:hover .nd2{transform:translateY(-4px) scale(1.06);background-color:var(--c);color:var(--ink)}
.stp h3{margin-top:22px;font-size:22px;line-height:1.15}
.stp p{margin-top:10px;max-width:220px;font-size:15px;line-height:1.6;color:var(--t3)}
@media (min-width:900px) and (max-width:1199.98px){
  .mbox{padding:48px 40px 56px}
  .mbox-hd > div{grid-column:1 / span 12}
  .mbox-hd p{grid-column:1 / span 8;margin-top:16px}
  .mbox-hd h2{font-size:50px}
  .stp{column-gap:16px}
  .stp h3{font-size:19px}
  .stp p{font-size:14px}
}
@media (max-width:899.98px){
  .svm{padding-top:88px}
  .mbox{padding:34px 20px 36px;border-radius:22px}
  .mbox-hd{display:block}
  .mbox-hd .hand{font-size:20px}
  .mbox-hd h2{margin-top:6px;font-size:clamp(30px,9.2vw,42px);line-height:1.04}
  .mbox-hd p{margin-top:16px;font-size:15.5px}
  .stp-w{margin-top:34px}
  .stp{display:flex;flex-direction:column;gap:26px}
  .stp li > div{display:block}
  .stp-line{left:27px;right:auto;top:28px;bottom:28px;width:2px;height:auto;background:repeating-linear-gradient(180deg,rgba(170,205,245,.5) 0 8px,transparent 8px 15px)}
  .lite2{display:none}
  .stp li{display:grid;grid-template-columns:56px minmax(0,1fr);column-gap:16px;align-items:start;text-align:left}
  .stp .nd2{width:52px;height:52px;font-size:15px;margin-left:2px}
  .stp li > div{padding-top:6px}
  .stp h3{margin-top:0;font-size:21px}
  .stp p{margin-top:6px;max-width:none;font-size:14.5px}
}

/* ---- À propos ---------------------------------------------------------------- */
.a2-h2{font-family:var(--f-disp);font-weight:800;font-size:58px;line-height:1.04;letter-spacing:-.035em}
.a2m{background-repeat:no-repeat;background-size:100% 100%;padding:0 .05em;-webkit-box-decoration-break:clone;box-decoration-break:clone;animation:a2mk 1.1s var(--ease) backwards}
.a2m.y{background-image:linear-gradient(180deg,transparent 60%,rgba(255,195,22,.85) 60%,rgba(255,195,22,.85) 92%,transparent 92%)}
.a2m.c{background-image:linear-gradient(180deg,transparent 60%,rgba(63,226,255,.6) 60%,rgba(63,226,255,.6) 92%,transparent 92%)}
.a2m.p{background-image:linear-gradient(180deg,transparent 60%,rgba(255,92,197,.7) 60%,rgba(255,92,197,.7) 92%,transparent 92%)}
@keyframes a2mk{from{background-size:0% 100%}to{background-size:100% 100%}}
@media (min-width:900px) and (max-width:1199.98px){.a2-h2{font-size:48px}}
@media (max-width:899.98px){.a2-h2{font-size:clamp(30px,8.7vw,42px);line-height:1.06}}
.lbl.pk{background:linear-gradient(100deg,#FF8AD6 0%,#EE3AAB 100%)}

/* En-tête : portrait en fondu */
.a2h{position:relative;flex-shrink:0;margin-top:-88px;min-height:780px;padding-top:196px}
.a2bo{position:absolute;inset:0;pointer-events:none;-webkit-mask-image:linear-gradient(180deg,#000 66%,transparent 100%);mask-image:linear-gradient(180deg,#000 66%,transparent 100%)}
.a2bi{position:absolute;top:0;right:0;bottom:0;width:66%;-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 36%);mask-image:linear-gradient(90deg,transparent 0%,#000 36%)}
.a2bi img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:36% 30%;animation:a2zm 2.2s var(--ease) backwards}
.a2bi::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,22,46,.55) 0%,rgba(14,22,46,0) 30%)}
@keyframes a2zm{from{transform:scale(1.1);opacity:0}to{transform:none;opacity:1}}
.a2h-in{position:relative;display:flex;flex-direction:column;align-items:flex-start;max-width:640px}
.a2h h1{margin-top:26px;display:flex;flex-direction:column;align-items:flex-start;font-family:var(--f-disp);font-weight:800;font-size:92px;line-height:1;letter-spacing:-.04em}
.a2h h1 .lbl{margin-top:12px;font-size:84px;transform:rotate(-1.8deg);animation:a2bp 4.5s ease-out 1.2s infinite}
.a2cu{position:absolute;right:-44px;bottom:-38px;animation:a2ck 4.5s ease-out 1.2s infinite}
@keyframes a2bp{0%,70%{scale:1}75%{scale:1.05}82%,100%{scale:1}}
@keyframes a2ck{0%,68%{transform:none}73%{transform:scale(.82)}78%,100%{transform:none}}
.a2h-in > p{margin-top:42px;font-size:20px;line-height:1.65;color:#E6ECF8}
.a2h-acts{margin-top:32px;display:flex;align-items:center;gap:14px}
.a2h-acts .btn{padding:0 24px}
@media (min-width:900px) and (max-width:1199.98px){
  .a2h{min-height:680px;padding-top:170px}
  .a2h h1{font-size:76px}
  .a2h h1 .lbl{font-size:68px}
  .a2h-in{max-width:560px}
}
@media (max-width:899.98px){
  .a2h{margin-top:-64px;min-height:0;padding-top:318px}
  .a2bo{-webkit-mask-image:none;mask-image:none}
  .a2bi{left:0;right:0;bottom:auto;width:auto;height:400px;-webkit-mask-image:linear-gradient(180deg,#000 52%,transparent 100%);mask-image:linear-gradient(180deg,#000 52%,transparent 100%)}
  .a2bi img{object-position:50% 28%}
  .a2h-in{max-width:none}
  .a2h h1{font-size:clamp(34px,11.3vw,54px)}
  .a2h h1 .lbl{margin-top:10px;font-size:1em}
  .a2cu svg{width:30px;height:30px}
  .a2cu{right:-26px;bottom:-32px}
  .a2h-in > p{margin-top:34px;font-size:16.5px}
  .a2h-acts{margin-top:28px;width:100%;max-width:520px;flex-direction:column;align-items:stretch;gap:12px}
}

/* Le studio */
.a2s{flex-shrink:0;padding-top:70px}
.a2s-1{align-items:start}
.a2s-1 .eb{grid-column:1 / span 3;margin-top:16px}
.a2q{grid-column:4 / span 9;font-family:var(--f-disp);font-weight:700;font-size:42px;line-height:1.28;letter-spacing:-.02em;color:#fff}
.a2s-2{margin-top:110px;align-items:center}
.a2s-2 h3{grid-column:1 / span 6;font-size:52px}
.a2s-2 h3 .lbl{margin-top:10px;transform:rotate(-1.5deg)}
.a2s-2 > div{grid-column:8 / span 5;display:flex;flex-direction:column;gap:20px;font-size:18px;line-height:1.7;color:var(--t2)}
@media (min-width:900px) and (max-width:1199.98px){
  .a2q{font-size:34px}
  .a2s-2 h3{font-size:44px}
  .a2s-2 > div{grid-column:7 / span 6;font-size:17px}
}
@media (max-width:899.98px){
  .a2s{padding-top:64px}
  .a2s-1{display:flex;flex-direction:column;align-items:flex-start}
  .a2s-1 .eb{margin-top:0}
  .a2q{margin-top:18px;font-size:clamp(21px,5.9vw,28px);line-height:1.34}
  .a2s-2{margin-top:64px;display:flex;flex-direction:column;align-items:center}
  .a2s-2 h3{font-size:clamp(28px,8.2vw,40px);text-align:center}
  .a2s-2 > div{margin-top:26px;gap:16px;font-size:16px}
}

/* Le fondateur */
.a2fd{flex-shrink:0;padding-top:150px}
.a2fd h2{margin-top:22px}
.a2fd-g{margin-top:64px;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:48px;align-items:center}
.a2f{grid-column:1 / span 6;position:relative;display:flex;flex-direction:column}
.a2f .a2pr{position:relative;height:540px;padding:12px;transform:rotate(var(--r));transition:transform .7s cubic-bezier(.34,1.4,.64,1)}
.a2f .a2pr span{position:relative;display:block;height:100%;overflow:hidden;border-radius:2px;background:#1A2A4A}
.a2f .a2pr img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 28%;transition:transform 1.2s var(--ease)}
.a2f .tape{width:120px;left:50%;top:-14px;margin-left:-60px;transform:rotate(-4deg)}
.a2f-tx{margin-top:34px;display:flex;flex-direction:column;align-items:flex-start;gap:16px}
.a2f .a2rl{font-size:15px;transform:rotate(-2deg);transition:transform .5s var(--spring)}
.a2f .a2nm{font-family:var(--f-disp);font-weight:800;font-size:42px;line-height:1.05;letter-spacing:-.03em}
.a2f .a2bio{font-size:18px;line-height:1.7;color:var(--t2)}
.a2f:hover .a2pr{transform:rotate(0deg) translateY(-8px)}
.a2f:hover .a2pr img{transform:scale(1.05)}
.a2f:hover .a2rl{transform:rotate(0deg) scale(1.05)}
.a2qn{grid-column:7 / span 6;position:relative;align-self:center;padding:54px 56px 50px;border-radius:4px;background:linear-gradient(172deg,#FFF3B8 0%,#FFD95C 100%);color:var(--ink);box-shadow:0 30px 60px rgba(5,10,25,.45),0 4px 12px rgba(5,10,25,.25);transform:rotate(-.6deg)}
.a2qn .tape{width:130px;top:-15px}
.a2qn .tape.l{left:64px;transform:rotate(-3deg)}
.a2qn .tape.r{right:64px;transform:rotate(4deg)}
.a2qn .k{font-size:12.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:rgba(20,26,44,.6)}
.a2qn blockquote{margin-top:18px;font-family:var(--f-disp);font-weight:800;font-size:30px;line-height:1.32;letter-spacing:-.02em}
.a2qn .sig{margin-top:24px;font-size:15px;font-weight:700;letter-spacing:.04em}
@media (min-width:900px) and (max-width:1199.98px){
  .a2fd-g{column-gap:32px}
  .a2f .a2pr{height:460px}
  .a2qn{padding:44px 40px 40px}
  .a2qn blockquote{font-size:24px}
}
@media (max-width:899.98px){
  .a2fd{padding-top:96px}
  .a2fd h2{margin-top:18px}
  .a2fd-g{margin-top:48px;display:flex;flex-direction:column;align-items:stretch}
  .a2f .a2pr{height:clamp(320px,100vw,520px);padding:10px}
  .a2f-tx{margin-top:28px;gap:14px}
  .a2f .a2rl{font-size:13.5px}
  .a2f .a2nm{font-size:30px}
  .a2f .a2bio{font-size:16px}
  .a2qn{margin-top:72px;padding:34px 22px 30px}
  .a2qn .tape{width:96px}
  .a2qn .tape.l{left:26px}
  .a2qn .tape.r{right:26px}
  .a2qn .k{font-size:11px}
  .a2qn blockquote{margin-top:14px;font-size:clamp(19px,5.4vw,24px);line-height:1.34;letter-spacing:-.015em}
}

/* Ma façon de faire */
.a2v{flex-shrink:0;padding-top:150px}
.a2v h2{margin-top:22px}
.a2v-g{margin-top:64px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:32px;align-items:start}
.a2pp{position:relative;padding:40px 40px 38px;border-radius:4px;color:var(--ink);box-shadow:0 26px 52px rgba(5,10,25,.42),0 4px 10px rgba(5,10,25,.22);transform:rotate(var(--r));transition:transform .6s cubic-bezier(.34,1.4,.64,1)}
.a2pp .tape{width:104px;left:50%;top:-14px;margin-left:-52px;transform:rotate(-3deg)}
.a2pp .a2n{position:absolute;right:30px;top:30px;font-family:var(--f-disp);font-weight:800;font-size:15px;color:rgba(20,26,44,.45)}
.a2pp .a2st{display:flex;align-items:center;justify-content:center;width:72px;height:72px;border-radius:50%;border:2.5px solid var(--ink);box-shadow:0 4px 0 var(--ink);transform:rotate(-8deg);transition:transform .6s var(--spring)}
.a2pp h3{margin-top:26px;font-family:var(--f-disp);font-weight:800;font-size:36px;line-height:1.05;letter-spacing:-.03em}
.a2pp p{margin-top:14px;font-size:17px;line-height:1.65;color:#2A3350}
.a2pp:hover{transform:rotate(0deg) translateY(-8px)}
.a2pp:hover .a2st{transform:rotate(0deg) scale(1.08)}
@media (min-width:900px) and (max-width:1199.98px){
  .a2v-g{column-gap:20px}
  .a2pp{padding:34px 28px 32px}
  .a2pp h3{font-size:30px}
  .a2pp p{font-size:16px}
}
@media (max-width:899.98px){
  .a2v{padding-top:96px}
  .a2v h2{margin-top:18px}
  .a2v-g{margin-top:52px;display:flex;flex-direction:column;gap:40px}
  .a2pp{padding:32px 24px 30px}
  .a2pp .a2n{right:24px;top:26px}
  .a2pp .a2st{width:60px;height:60px}
  .a2pp .a2st svg{width:26px;height:26px}
  .a2pp h3{margin-top:20px;font-size:28px}
  .a2pp p{font-size:15.5px}
}

/* Où me trouver (carte) */
.a2o{flex-shrink:0;padding-top:150px}
.a2o .g12{align-items:center}
.a2o-tx{grid-column:1 / span 5;display:flex;flex-direction:column;align-items:flex-start}
.a2o-tx h2{margin-top:22px}
.a2o-tx h2 .lbl{margin-top:8px;transform:rotate(-1.5deg)}
.a2o-tx p{margin-top:28px;font-size:19px;line-height:1.7;color:var(--t2)}
.a2map{grid-column:7 / span 6;position:relative;height:520px;border-radius:24px;background:radial-gradient(420px 320px at 52% 40%,rgba(63,226,255,.1),rgba(63,226,255,0) 70%),#0E1428;border:1.5px solid rgba(170,205,245,.2);box-shadow:0 34px 70px rgba(5,10,25,.5);overflow:hidden}
.a2map svg{position:absolute;left:50%;top:50%;width:min(500px,96%);height:auto;aspect-ratio:470 / 465;transform:translate(-50%,-50%);overflow:visible}
.a2rt{fill:none;stroke:#FFC316;stroke-width:1.8;stroke-linecap:round;stroke-dasharray:3 7;opacity:.75;animation:a2rt 1.3s linear infinite}
@keyframes a2rt{to{stroke-dashoffset:-20}}
.a2pl{transform-box:fill-box;transform-origin:center;animation:a2pl 2.4s ease-out infinite}
@keyframes a2pl{0%{transform:scale(.6);opacity:.9}100%{transform:scale(2.6);opacity:0}}
@media (min-width:900px) and (max-width:1199.98px){
  .a2o-tx{grid-column:1 / span 6}
  .a2o-tx p{font-size:17px}
  .a2map{grid-column:7 / span 6;height:440px}
}
@media (max-width:899.98px){
  .a2o{padding-top:96px}
  .a2o .g12{display:flex;flex-direction:column;align-items:stretch}
  .a2o-tx h2{margin-top:18px}
  .a2o-tx p{margin-top:22px;font-size:16px}
  .a2map{margin-top:36px;height:360px;border-radius:20px}
  .a2map svg{width:min(350px,92%)}
}

/* Et maintenant ? */
.a2c{flex-shrink:0;padding:150px 0 140px}
.a2cta{position:relative;overflow:hidden;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:center;padding:64px 64px 68px;border-radius:30px;background:radial-gradient(640px 320px at 90% 0%,rgba(255,92,197,.16),rgba(255,92,197,0) 70%),radial-gradient(640px 320px at 0% 100%,rgba(63,226,255,.14),rgba(63,226,255,0) 70%),#0E1428;border:1.5px solid rgba(170,205,245,.2);box-shadow:0 40px 80px rgba(5,10,25,.5)}
.a2cta-l{grid-column:1 / span 7;display:flex;flex-direction:column;align-items:flex-start}
.a2cta-l h2{margin-top:24px;font-size:68px}
.a2cta-l h2 .lbl{margin-top:10px;transform:rotate(-2deg)}
.a2cta-r{grid-column:9 / span 4;display:flex;flex-direction:column;align-items:flex-start;gap:24px}
.a2cta-r p{font-size:18px;line-height:1.65;color:var(--t2)}
.a2cta-r .acts{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.a2cta-r .acts .btn{padding:0 24px;font-size:15px}
.a2cta-r .lk{font-size:15px}
@media (min-width:900px) and (max-width:1199.98px){
  .a2cta{padding:52px 44px 56px}
  .a2cta-l{grid-column:1 / span 6}
  .a2cta-l h2{font-size:54px}
  .a2cta-r{grid-column:7 / span 6}
}
@media (max-width:899.98px){
  .a2c{padding:96px 0 84px}
  .a2cta{display:flex;flex-direction:column;align-items:stretch;padding:36px 22px 34px;border-radius:24px}
  .a2cta-l h2{margin-top:18px;font-size:clamp(30px,8.5vw,40px)}
  .a2cta-r{margin-top:24px;gap:22px}
  .a2cta-r p{font-size:16px}
}

/* ---- Contact & page en construction : animations d'entrée ------------------- */
.ctl{animation:ctl .8s cubic-bezier(.34,1.45,.64,1) backwards}
.ctlb{animation:ctl .8s cubic-bezier(.34,1.45,.64,1) .2s backwards,ctbp 4.5s ease-out 1.6s infinite}
.ctr{animation:ctr .8s var(--ease) backwards}
.ctcu{position:absolute;right:-44px;bottom:-38px;animation:ctcl 4.5s ease-out 1.6s infinite}
@keyframes ctl{from{opacity:0;transform:translateY(-30px) rotate(-9deg) scale(1.08)}}
@keyframes ctr{from{opacity:0;transform:translateY(22px)}}
@keyframes ctbp{0%,70%{scale:1}75%{scale:1.05}82%,100%{scale:1}}
@keyframes ctcl{0%,68%{transform:none}73%{transform:scale(.82)}78%,100%{transform:none}}
@media (max-width:899.98px){
  .ctcu svg{width:28px;height:28px}
}

/* ---- Contact ------------------------------------------------------------------ */
.ct{flex-shrink:0;padding:96px 0 136px}
.ct .g12{grid-template-rows:auto 1fr;align-items:start}
.ct-intro{grid-column:1 / span 5;grid-row:1;display:flex;flex-direction:column;align-items:flex-start}
.ct h1{display:flex;flex-direction:column;align-items:flex-start;gap:22px;font-size:68px;line-height:1;font-weight:inherit}
.ct h1 .lbl:first-child{transform:rotate(-2.5deg);animation-delay:.05s}
.ct h1 .lbl:last-child{margin-left:26px;transform:rotate(1.5deg)}
.ct-intro > p{margin-top:44px;font-size:18px;line-height:1.6;color:var(--t3);text-wrap:pretty;animation-delay:.35s}
.ct-list{list-style:none;padding:0;margin-top:34px;display:flex;flex-direction:column;gap:14px}
.ctc{display:inline-flex;align-items:center;gap:16px;color:#fff}
.ctst{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:50%;background:var(--c);border:2px solid var(--ink);box-shadow:0 3px 0 var(--ink);transform:rotate(var(--r,-8deg));transition:transform .5s var(--spring)}
.ctv{font-size:17px;line-height:1.3;padding-bottom:3px;background-image:linear-gradient(var(--yellow),var(--yellow));background-repeat:no-repeat;background-position:0 100%;background-size:0% 2px;transition:background-size .35s var(--ease)}
.ctv.big{font-size:22px;font-weight:500}
a.ctc:hover .ctst,a.ctc:focus-visible .ctst{transform:rotate(0deg) scale(1.1)}
a.ctc:hover .ctv,a.ctc:focus-visible .ctv{background-size:100% 2px}
.ct-note{grid-column:1 / span 5;grid-row:2;align-self:start;margin-top:52px;animation-delay:.75s}
.ctn{padding:30px 30px 26px;border-radius:3px;transform:rotate(var(--r));transition:transform .6s cubic-bezier(.34,1.4,.64,1)}
.ctn:hover{transform:rotate(0deg) translateY(-6px)}
.ctn .tape{width:96px;left:50%;top:-15px;margin-left:-48px;transform:rotate(-3deg)}
.ctn h2{font-size:26px;line-height:1.1}
.ctn ol{list-style:none;padding:0;margin-top:16px;display:flex;flex-direction:column;gap:12px}
.ctn li{display:flex;align-items:flex-start;gap:14px;font-size:15.5px;line-height:1.5;color:#2E3447}
.ctnb{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;border:2px solid var(--ink);font-family:var(--f-disp);font-weight:800;font-size:13px;line-height:1;color:var(--ink)}
.ct-form{grid-column:7 / span 6;grid-row:1 / span 2;animation-delay:.25s}
.ctp{position:relative;padding:42px 40px 44px;border-radius:30px;background:radial-gradient(560px 320px at 100% 0%,rgba(255,92,197,.17),rgba(255,92,197,0) 70%),radial-gradient(520px 340px at 0% 100%,rgba(63,226,255,.13),rgba(63,226,255,0) 70%),rgba(12,20,44,.6);border:1.5px solid rgba(170,205,245,.22);box-shadow:0 34px 70px rgba(5,10,25,.45);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.ctf{display:flex;flex-direction:column;gap:30px}
.ctf .row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:24px}
.ctf .row.r2{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)}
.ctf label.f{display:flex;flex-direction:column;gap:8px}
.ctf .lab,.ctf legend{font-size:14px;font-weight:600;color:#fff}
.ctf .lab abbr{text-decoration:none}
.fld{width:100%;height:48px;font:inherit;font-size:17px;color:var(--ink);background-color:var(--paper);border:2px solid var(--ink);border-radius:12px;padding:0 16px;outline:none;box-shadow:0 4px 0 var(--ink);transition:box-shadow .2s,transform .25s var(--spring)}
.fld::placeholder{color:#7C849A}
.fld:hover{box-shadow:0 4px 0 var(--ink),0 0 0 4px rgba(255,255,255,.24)}
.fld:focus{box-shadow:0 4px 0 var(--ink),0 0 0 4px rgba(255,195,22,.7)}
input.fld:focus,textarea.fld:focus{transform:translateY(-2px);box-shadow:0 6px 0 var(--ink),0 0 0 4px rgba(255,195,22,.7)}
textarea.fld{height:124px;padding:12px 16px;line-height:1.5;resize:vertical;min-height:100px}
.sel-w{position:relative;display:block}
select.fld{padding-right:42px;-webkit-appearance:none;appearance:none;cursor:pointer}
.fld option{color:var(--ink)}
.sel-w svg{position:absolute;right:16px;top:16px;pointer-events:none}
.ctf fieldset{margin:0;padding:0;border:0;min-width:0}
.ctf legend{padding:0;margin-bottom:14px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{position:relative;display:inline-flex;align-items:center;gap:9px;height:40px;padding:0 16px 0 14px;border-radius:999px;font-size:14px;color:#fff;border:1.5px solid rgba(255,255,255,.45);cursor:pointer;user-select:none;transition:background-color .2s,color .2s,border-color .2s,box-shadow .2s,transform .3s var(--spring)}
.chip input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.chip i{flex-shrink:0;width:9px;height:9px;border-radius:50%;background:var(--c);box-shadow:0 0 10px var(--c);transition:background-color .2s,box-shadow .2s}
.chip:hover{border-color:var(--c);background-color:rgba(255,255,255,.08);transform:translateY(-2px)}
.chip.on,.chip:has(input:checked){background-color:var(--c);color:var(--ink);border-color:var(--ink);box-shadow:0 3px 0 var(--ink)}
.chip.on{animation:ctpop .4s var(--spring)}
.chip.on i,.chip:has(input:checked) i{background:var(--ink);box-shadow:none}
.chip:has(input:focus-visible){outline:3px solid var(--yellow);outline-offset:3px}
@keyframes ctpop{0%{transform:scale(.9)}60%{transform:scale(1.07)}100%{transform:scale(1)}}
.consent{display:flex;align-items:flex-start;gap:12px}
.chk{width:20px;height:20px;margin:1px 0 0;flex-shrink:0;accent-color:var(--yellow)}
.consent > div{display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.consent label{font-size:14px;line-height:1.5;color:var(--t3)}
.consent .lk{font-size:13px;color:var(--t3);text-underline-offset:5px}
.ctsend{height:54px;padding:0 28px;font-size:15px;font-weight:600;gap:12px}
.ctsend .ctpl{transition:transform .35s var(--ease)}
.ctsend:hover .ctpl,.ctsend:focus-visible .ctpl{transform:translate(3px,-3px) rotate(-8deg)}
.ctsend.go{pointer-events:none}
.ctsend.go .ctpl{animation:ctfly .6s cubic-bezier(.5,0,.75,0) forwards}
@keyframes ctfly{to{transform:translate(110px,-80px) rotate(-14deg);opacity:0}}
.ct-ok{display:flex;flex-direction:column;align-items:flex-start;gap:22px;padding:6px 0 4px}
.ctok{display:inline-flex;filter:drop-shadow(0 4px 0 #141A2C);animation:ctok .6s var(--spring) backwards}
.ctckp{stroke-dasharray:1;stroke-dashoffset:1;animation:ctdraw .45s ease-out .3s forwards}
@keyframes ctok{from{opacity:0;transform:scale(.4) rotate(-20deg)}}
@keyframes ctdraw{to{stroke-dashoffset:0}}
.ct-ok h2{font-family:var(--f-disp);font-size:44px;line-height:1.05;font-weight:800;letter-spacing:-.03em}
.ct-ok p{max-width:480px;font-size:17px;line-height:1.6;color:var(--t3)}
.ct-ok .acts{display:flex;flex-wrap:wrap;gap:12px}
.ct-ok .btn{height:48px;padding:0 22px;font-size:15px}
@media (min-width:900px) and (max-width:1199.98px){
  .ct .g12{column-gap:20px}
  .ct-intro,.ct-note{grid-column:1 / span 5}
  .ct-form{grid-column:6 / span 7}
  .ct h1{font-size:56px}
  .ctv.big{font-size:19px}
  .ctp{padding:34px 28px 36px}
  .ctf .row,.ctf .row.r2{grid-template-columns:minmax(0,1fr);row-gap:20px}
}
@media (max-width:899.98px){
  .ct{padding:36px 0 76px}
  .ct .g12{display:flex;flex-direction:column;align-items:stretch}
  .ct h1{gap:16px;font-size:clamp(34px,11.8vw,56px)}
  .ct h1 .lbl:last-child{margin-left:14px}
  .ct h1 .sel{inset:-9px -11px}
  .ct-intro .ctcu{right:-24px;bottom:-32px}
  .ct-intro > p{margin-top:38px;font-size:16px}
  .ct-list{margin-top:26px;gap:12px}
  .ctc{gap:14px}
  .ctst{width:42px;height:42px}
  .ctv.big{font-size:19px}
  .ct-form{margin-top:38px;animation-delay:.5s}
  .ctp{padding:26px 20px 28px;border-radius:24px}
  .ctf{gap:22px}
  .ctf .row,.ctf .row.r2{grid-template-columns:minmax(0,1fr);row-gap:20px}
  .ctf legend{margin-bottom:12px}
  .chip{height:38px;padding:0 14px 0 12px;font-size:13.5px}
  textarea.fld{height:140px}
  .ctsend{width:100%;padding:0 24px}
  .ct-note{order:3;margin-top:56px;animation-delay:.6s}
  .ctn{padding:28px 22px 24px}
  .ctn .tape{width:86px;margin-left:-43px}
  .ctn h2{font-size:24px}
  .ctn ol{margin-top:14px}
  .ctn li{gap:12px;font-size:15px}
  .ct-ok{gap:18px;padding:4px 0}
  .ct-ok .ctok svg{width:60px;height:60px}
  .ct-ok h2{font-size:34px}
  .ct-ok p{font-size:16px}
  .ct-ok .acts{align-self:stretch;flex-direction:column;gap:10px}
  .ct-ok .btn{height:52px}
}

/* ---- Page en construction ------------------------------------------------- */
.ec{position:relative;flex-shrink:0;padding:110px 0 20px}
.ec-in{display:flex;flex-direction:column;align-items:flex-start;max-width:820px}
.ec-in > .hand{font-size:24px;color:var(--yellow);transform:rotate(-2deg);animation-delay:.05s}
.ec h1{margin-top:20px;display:flex;flex-direction:column;align-items:flex-start;gap:14px;font-size:86px;line-height:1;font-weight:inherit}
.ec h1 .disp{animation-delay:.1s}
.ec h1 .lbl{margin-left:8px;transform:rotate(-2deg)}
.ec-in > p{margin-top:44px;max-width:580px;font-size:20px;line-height:1.6;color:var(--t2);animation-delay:.35s}
.ec-acts{margin-top:34px;display:flex;align-items:center;gap:14px;animation-delay:.45s}
.ec-acts .btn{height:54px;padding:0 26px}
.ec-acts .bw{padding:0 24px}
.ec-in > p.ec-q{margin-top:26px;font-size:15px;color:var(--t3);animation-delay:.55s}
.ec-tape{position:relative;flex-shrink:0;height:240px;overflow:hidden}
.ec-tape .t1{position:absolute;left:-80px;right:-80px;top:86px;height:52px;display:flex;align-items:center;overflow:hidden;background:var(--ink);border-top:2px solid var(--yellow);border-bottom:2px solid var(--yellow);transform:rotate(3deg);box-shadow:0 12px 26px rgba(5,10,25,.38)}
.ec-tape .t2{position:absolute;left:-80px;right:-80px;top:78px;height:64px;display:flex;align-items:center;overflow:hidden;background:repeating-linear-gradient(-45deg,#FFC316 0 26px,#FFD43F 26px 52px);border-top:3px solid var(--ink);border-bottom:3px solid var(--ink);transform:rotate(-2.4deg);box-shadow:0 14px 30px rgba(5,10,25,.42)}
.ec-tape span{flex-shrink:0;margin-right:22px;font-family:var(--f-disp);font-weight:800;white-space:nowrap}
.ec-tape .t1 span{font-size:19px;letter-spacing:.06em;color:var(--yellow)}
.ec-tape .t2 span{font-size:22px;letter-spacing:.04em;color:var(--ink)}
@media (min-width:900px) and (max-width:1199.98px){
  .ec h1{font-size:72px}
}
@media (max-width:899.98px){
  .ec{padding:44px 0 8px}
  .ec-in > .hand{font-size:21px}
  .ec h1{margin-top:16px;gap:12px;font-size:clamp(34px,11.3vw,56px)}
  .ec h1 .lbl{margin-left:4px}
  .ec h1 .sel{inset:-9px -11px}
  .ec h1 .ctcu{right:-18px;bottom:-30px}
  .ec-in > p{margin-top:36px;font-size:16.5px}
  .ec-acts{margin-top:40px;align-self:stretch;flex-direction:column;align-items:stretch;gap:12px}
  .ec-acts .btn,.ec-acts .bw{height:52px;padding:0 24px;font-size:15px}
  .ec-in > p.ec-q{margin-top:22px;font-size:14.5px;line-height:1.6}
  .ec-tape{height:210px}
  .ec-tape .t1{left:-40px;right:-40px;top:112px;height:38px;transform:rotate(5deg)}
  .ec-tape .t2{left:-40px;right:-40px;top:44px;height:46px;transform:rotate(-4deg)}
  .ec-tape .t1 span{font-size:14px}
  .ec-tape .t2 span{font-size:16px}
}

/* ---- Pages projets : éléments communs ------------------------------------- */
.pj{position:relative;flex-shrink:0;padding-top:40px}
.pj-top{display:flex;align-items:center;justify-content:space-between;gap:16px}
.pj-top .btn{height:42px;padding:0 18px 0 14px;gap:8px;font-size:15px}
.pj-top .hand{font-size:20px;color:var(--t4)}
.pj-hero{margin-top:44px;align-items:center}
.pj-tx{grid-column:1 / span 7;display:flex;flex-direction:column;align-items:flex-start}
.pj-pills{display:flex;flex-wrap:wrap;gap:10px;animation-delay:.06s}
.pill .dot{width:7px;height:7px;border-radius:50%;background:var(--ink)}
.pill.dk{gap:10px;background:var(--ink);color:#fff;border:1.5px solid var(--pc,#3FE2FF);box-shadow:0 0 22px var(--pg,rgba(63,226,255,.35))}
.pill.dk.ia{gap:7px}
.pj h1{margin-top:30px;font-size:84px;line-height:1;font-weight:inherit;animation-delay:.12s}
.pj h1 > .lbl:first-child{transform:rotate(-2deg)}
.pj-tx > p{margin-top:40px;max-width:560px;font-size:21px;line-height:1.5;color:var(--t2);animation-delay:.2s}
.pj-aside{position:relative;animation-delay:.18s}
.pj-aside .tape{width:128px;left:50%;top:-14px;margin-left:-64px;transform:rotate(-3deg)}
.pdot{position:relative;display:inline-block;flex-shrink:0;width:8px;height:8px;border-radius:50%;background:#3FE2FF}
.pdot::after{content:"";position:absolute;inset:-2px;border-radius:50%;border:2px solid #3FE2FF;animation:pdot 1.8s ease-out infinite}
.pdot.r{background:#FF4B3E}
.pdot.r::after{border-color:#FF4B3E}
@keyframes pdot{from{transform:scale(.8);opacity:.9}to{transform:scale(2.6);opacity:0}}
.noia .sl{stroke-dasharray:1 2;stroke-dashoffset:1.05;animation:draw .5s ease-out .9s forwards}
.ck path{stroke-dasharray:1 2;stroke-dashoffset:1.05;animation:draw .55s ease-out forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.pj-kick{font-size:22px;color:var(--yellow)}
.pj-h2{margin-top:8px;font-size:56px;line-height:1.03}
.pj-sec{flex-shrink:0;padding-top:130px}
@media (min-width:900px) and (max-width:1199.98px){
  .pj h1{font-size:68px}
  .pj-tx > p{font-size:19px}
  .pj-h2{font-size:48px}
}
@media (max-width:899.98px){
  .pj{padding-top:24px}
  .pj-top .btn{height:38px;padding:0 14px;font-size:13.5px}
  .pj-top .hand{font-size:17px}
  .pj-hero{margin-top:30px;display:flex;flex-direction:column;align-items:stretch}
  .pj-pills{gap:8px}
  .pj h1{margin-top:28px;font-size:clamp(44px,16.9vw,76px)}
  .pj h1 .sel{inset:-10px -12px}
  .pj-tx > p{margin-top:32px;font-size:17px;line-height:1.55}
  .pj-kick{font-size:20px}
  .pj-h2{margin-top:6px;font-size:clamp(30px,9.2vw,44px);line-height:1.04}
  .pj-sec{padding-top:84px}
}

/* Lecteur vidéo (Crystal, Gala Vita Danse) */
.pj-player{flex-shrink:0;padding-top:72px}
.xp{position:relative;border-radius:20px;overflow:hidden;background:#000;box-shadow:0 40px 80px rgba(5,10,25,.55),0 0 0 1px rgba(170,205,245,.18)}
.xp-v{position:relative;aspect-ratio:1312 / 738;overflow:hidden;background:#000}
.xp video,.xp .xp-poster{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover}
.xp-shade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(10,16,34,.3) 0%,rgba(10,16,34,0) 20%,rgba(10,16,34,0) 72%,rgba(10,16,34,.7) 100%)}
.xp .lab{position:absolute;left:28px;top:24px;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.88);pointer-events:none;transition:opacity .4s,transform .4s}
.xp .lab.hand{font-size:24px;letter-spacing:0;text-transform:none;color:#fff;transform:rotate(-2deg)}
.xp .big{position:absolute;left:50%;top:50%;width:110px;height:110px;margin:-55px 0 0 -55px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:var(--yellow);color:var(--ink);border:3px solid var(--ink);box-shadow:0 6px 0 var(--ink);opacity:0;transform:scale(.7);pointer-events:none;transition:opacity .35s,transform .45s var(--spring)}
.xp .big svg{margin-left:6px}
.xp .big::after{content:"";position:absolute;inset:-3px;border-radius:50%;box-shadow:0 0 0 0 rgba(255,195,22,.55);animation:ring 2.4s ease-out infinite}
@keyframes ring{to{box-shadow:0 0 0 30px rgba(255,195,22,0)}}
.xp.paused .big{opacity:1;transform:none;pointer-events:auto}
.xp.paused .big:hover{transform:scale(1.08)}
.xp-ctl{position:absolute;left:26px;right:26px;bottom:22px;display:flex;align-items:center;gap:16px;font-size:14px;font-weight:600;color:#fff;font-variant-numeric:tabular-nums}
.xp .ctl{position:relative;flex-shrink:0;display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.16);transition:background-color .2s,transform .25s var(--spring)}
.xp .ctl:hover{background-color:rgba(255,255,255,.3);transform:scale(1.08)}
.xp-cur{min-width:42px}
.xp-trk{position:relative;flex:1;height:5px;border-radius:999px;background:rgba(255,255,255,.25);overflow:hidden;cursor:pointer}
.xp-trk .prg{position:absolute;inset:0;display:block;border-radius:999px;background:var(--yellow);transform:scaleX(0);transform-origin:0 50%;transition:transform .3s linear}
.xp .ic-pause,.xp .ic-off{display:block}
.xp .ic-play,.xp .ic-on{display:none}
.xp.paused .ic-pause,.xp.snd .ic-off{display:none}
.xp.paused .ic-play,.xp.snd .ic-on{display:block}
.xp .sndb::after{content:"";position:absolute;inset:-2px;border-radius:50%;box-shadow:0 0 0 0 rgba(63,226,255,.65);animation:ring2 2s ease-out infinite}
@keyframes ring2{to{box-shadow:0 0 0 16px rgba(63,226,255,0)}}
.xp.heard .sndb::after{display:none}
.xp.auto .lab:not(.hand){animation:labout .8s ease 5s forwards}
.xp.auto.paused .lab{animation:none}
@keyframes labout{to{opacity:0;transform:translateY(-8px) rotate(-2deg)}}
.xp.playing .lab.hand{opacity:0}
.xp.nosrc video{display:none}
.xp:not(.nosrc) .xp-poster{display:none}
.xp-soon{position:absolute;left:50%;bottom:26px;display:none;align-items:center;gap:10px;height:40px;padding:0 18px;border-radius:999px;background:rgba(11,20,41,.82);border:1.5px solid rgba(255,255,255,.3);font-size:14px;font-weight:600;color:#fff;transform:translateX(-50%);white-space:nowrap}
.xp.nosrc .xp-soon{display:inline-flex}
.xp.nosrc .big,.xp.nosrc .xp-ctl{display:none}
/* Variante « fenêtre de montage » (Gala Vita Danse) */
.xp.win{border-radius:20px;background:#0B1429;border:1.5px solid rgba(170,205,245,.24);padding:0 14px 14px;box-shadow:0 40px 80px rgba(5,10,25,.55)}
.xp.win .xp-bar{height:48px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 6px;font-size:13px;font-weight:600;letter-spacing:.04em;color:var(--t4)}
.xp.win .xp-bar .dots{display:flex;gap:8px}
.xp.win .xp-bar .dots span{width:12px;height:12px;border-radius:50%}
.xp.win .xp-v{aspect-ratio:1284 / 700;border-radius:12px}
.xp.win .xp-shade{background:linear-gradient(180deg,rgba(10,16,34,.35) 0%,rgba(10,16,34,0) 26%,rgba(10,16,34,0) 62%,rgba(10,16,34,.78) 100%)}
.xp.win .lab{left:30px;top:26px}
.xp.win .big{width:116px;height:116px;margin:-58px 0 0 -58px}
.xp.win .xp-trk{height:6px}
@media (max-width:899.98px){
  .pj-player{padding-top:48px}
  .xp{border-radius:14px}
  .xp-v{aspect-ratio:350 / 200}
  .xp .lab{left:14px;top:12px;font-size:9.5px;letter-spacing:.12em}
  .xp .lab.hand{font-size:18px}
  .xp .big,.xp.win .big{width:64px;height:64px;margin:-32px 0 0 -32px}
  .xp .big svg{width:26px;height:26px;margin-left:4px}
  .xp-ctl{left:10px;right:10px;bottom:9px;gap:8px;font-size:11px}
  .xp .ctl{width:30px;height:30px}
  .xp .ctl svg{width:15px;height:15px}
  .xp-cur{min-width:32px}
  .xp .fs{display:none}
  .xp-soon{bottom:12px;height:34px;font-size:12.5px}
  .xp.win{border-radius:16px;padding:0 8px 8px}
  .xp.win .xp-bar{height:38px;font-size:10.5px}
  .xp.win .xp-bar .dots{gap:6px}
  .xp.win .xp-bar .dots span{width:9px;height:9px}
  .xp.win .xp-v{aspect-ratio:334 / 196;border-radius:10px}
}

/* Où en est le film ? (frise) */
.pj-st{align-items:center}
.pj-st > div:first-child{grid-column:1 / span 5;display:flex;flex-direction:column;align-items:flex-start}
.pj-st h2{margin-top:8px;font-size:52px;line-height:1.04}
.pj-st > div:first-child p{margin-top:18px;font-size:17px;line-height:1.65;color:var(--t2)}
.stl{grid-column:7 / span 6;position:relative;width:100%}
.stl-line{position:absolute;left:12.5%;right:12.5%;top:20px;height:3px;background:repeating-linear-gradient(90deg,rgba(170,205,245,.5) 0 8px,transparent 8px 15px)}
.tlf{position:absolute;left:12.5%;top:19.5px;height:4px;border-radius:999px;background:linear-gradient(90deg,#3FE2FF 0%,#D4FBFF 50%,#3FE2FF 100%);background-size:200% 100%;animation:flow 2.6s linear infinite}
@keyframes flow{to{background-position:-200% 0}}
.stl ol{position:relative;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.stl li{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center}
.nd{position:relative;display:flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:50%}
.nd.done{background:#3FE2FF;box-shadow:0 0 0 6px rgba(63,226,255,.14),0 0 24px rgba(63,226,255,.45)}
.nd.now{background:var(--ink);border:2.5px solid var(--nc,#3FE2FF);box-shadow:0 0 24px var(--ng,rgba(63,226,255,.4))}
.nd.now > span{width:14px;height:14px;border-radius:50%;background:var(--nc,#3FE2FF)}
.nd.now::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:2px solid var(--nc,#3FE2FF);animation:pdot 1.8s ease-out infinite}
.nd.todo{background:var(--bg);border:2px dashed rgba(170,205,245,.6);color:var(--t4)}
.stl .t{display:flex;flex-direction:column;gap:4px}
.stl .t b{font-size:15px;font-weight:700;color:#fff}
.stl .t span{font-size:13px;font-weight:600;color:var(--sc,#9AF1FF)}
.stl li.todo .t b{color:var(--t3)}
.stl li.todo .t span{color:var(--t4)}
@media (min-width:900px) and (max-width:1199.98px){
  .pj-st > div:first-child{grid-column:1 / span 12}
  .pj-st h2{font-size:44px}
  .stl{grid-column:1 / span 12;margin-top:48px}
}
@media (max-width:899.98px){
  .pj-st{display:flex;flex-direction:column;align-items:flex-start}
  .pj-st h2{font-size:clamp(30px,8.7vw,42px)}
  .pj-st > div:first-child p{font-size:16px}
  .stl{margin-top:36px}
  .stl-line{top:16px}
  .tlf{top:15.5px}
  .stl li{gap:10px}
  .nd{width:34px;height:34px}
  .nd svg{width:16px;height:16px}
  .nd.now > span{width:11px;height:11px}
  .stl .t b{font-size:12.5px}
  .stl .t span{font-size:11.5px}
}

/* Images du film */
.pj-ihd{display:flex;align-items:flex-end;justify-content:space-between;gap:24px}
.pj-note{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--t4)}
.stills{margin-top:40px;list-style:none;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.stc{position:relative;aspect-ratio:421 / 237;border-radius:14px;overflow:hidden;background:#1A2A4A;box-shadow:0 18px 36px rgba(5,10,25,.4)}
.stc img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.stc:hover img{transform:scale(1.05)}
@media (max-width:899.98px){
  .pj-ihd{display:block}
  .pj-ihd .pj-note{display:block;margin-top:10px;font-size:10.5px}
  .stills{margin-top:24px;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .stc{aspect-ratio:auto;height:112px;border-radius:10px}
  .stills .stc:first-child,.stills.ends .stc:last-child{grid-column:1 / span 2;height:auto;aspect-ratio:350 / 196}
}

/* Making-of (Crystal) */
.mk-hd{align-items:end}
.mk-hd > div{grid-column:1 / span 6}
.mk-hd p{grid-column:8 / span 5;font-size:17px;line-height:1.65;color:var(--t2)}
.mk{margin-top:44px;display:flex;gap:16px;align-items:flex-start}
.mk figure{min-width:0;flex:var(--f) 1 0}
.mo{position:relative;height:346px;border-radius:14px;overflow:hidden;background:#1A2A4A;box-shadow:0 18px 36px rgba(5,10,25,.4)}
.mo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.mo:hover img{transform:scale(1.05)}
.mk figcaption{margin-top:12px;font-size:14px;color:var(--t4)}
@media (min-width:900px) and (max-width:1199.98px){
  .mo{height:280px}
}
@media (max-width:899.98px){
  .mk-hd{display:block}
  .mk-hd p{margin-top:16px;font-size:16px}
  .mk{margin-top:26px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:12px;row-gap:20px}
  .mk figure.wide{grid-column:1 / -1;order:-1}
  .mo{height:200px;border-radius:12px}
  .mk figcaption{margin-top:10px;font-size:13px;line-height:1.4}
}

/* Générique */
.gen{position:relative;margin-top:44px;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;padding:60px 64px 64px;border-radius:24px;background:radial-gradient(900px 380px at 50% -140px,var(--gt,rgba(63,226,255,.12)),rgba(0,0,0,0) 70%),#070A12;border:1.5px solid rgba(170,205,245,.2);box-shadow:0 40px 80px rgba(5,10,25,.55);overflow:hidden}
.gen-wm{position:absolute;right:-18px;bottom:-58px;font-family:var(--f-disp);font-weight:800;font-size:210px;line-height:1;letter-spacing:-.02em;color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.07);pointer-events:none;white-space:nowrap}
.gen-l{grid-column:1 / span 4;position:relative;display:flex;flex-direction:column;align-items:flex-start}
.gen .k{letter-spacing:.3em;font-size:12px;font-weight:700;color:#8E9BB8}
.gen .k.c{margin-top:48px;color:var(--gc,#3FE2FF)}
.gen .who{margin-top:10px;font-size:46px;line-height:1;letter-spacing:-.01em;text-shadow:0 0 22px rgba(255,255,255,.3)}
.glw{animation:glw 4.5s ease-in-out infinite}
@keyframes glw{50%{text-shadow:0 0 36px rgba(255,255,255,.6),0 0 2px rgba(255,255,255,.9)}}
.cst{margin-top:18px;list-style:none;padding:0;display:flex;flex-direction:column;gap:18px}
.cst li{display:flex;flex-direction:column;gap:4px}
.cst .cw{font-size:22px;font-weight:700;line-height:1.2;transition:color .25s}
.cst .rl{font-size:13px;color:#8E9BB8}
.cst .rl .hand{font-size:19px;color:var(--gh,#9AF1FF)}
.gen-sep{grid-column:5 / span 1;justify-self:center;width:0;border-left:1px dashed rgba(170,205,245,.22)}
.gen dl{grid-column:6 / span 7;position:relative;align-self:center;display:flex;flex-direction:column;margin:0}
.cr{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:28px;align-items:baseline;padding:11px 0;border-top:1px dashed rgba(170,205,245,.16)}
.cr:first-child{border-top:0}
.cr dt{text-align:right;font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#8E9BB8;transition:color .25s}
.cr dd{font-size:18px;font-weight:600;color:#fff;transition:color .25s}
.cr dd small{display:block;margin-top:3px;font-size:13px;font-weight:500;color:#8E9BB8}
.cr:hover dd,.cst li:hover .cw{color:var(--gh,#9AF1FF)}
.cr:hover dt{color:#fff}
.gen-rights{margin-top:28px;max-width:900px;font-size:14px;line-height:1.7;color:var(--t4)}
.gen-rights strong{color:var(--t3);font-weight:600}
@media (min-width:900px) and (max-width:1199.98px){
  .gen{padding:48px 40px 52px;column-gap:16px}
  .gen-l{grid-column:1 / span 5}
  .gen-sep{grid-column:6 / span 1}
  .gen dl{grid-column:7 / span 6}
  .gen .who{font-size:38px}
  .cst .cw{font-size:19px}
  .cr{column-gap:16px}
  .cr dd{font-size:16px}
}
@media (max-width:899.98px){
  .gen{margin-top:28px;display:flex;flex-direction:column;padding:34px 20px 36px;border-radius:20px}
  .gen-wm{right:-8px;bottom:-26px;font-size:96px}
  .gen .who{margin-top:8px;font-size:36px}
  .gen .k.c{margin-top:30px}
  .cst{margin-top:16px;gap:16px}
  .cst .cw{font-size:19px}
  .gen-sep{display:block;width:auto;margin:30px 0 18px;border-left:0;border-top:1px dashed rgba(170,205,245,.22)}
  .cr{column-gap:14px;padding:10px 0}
  .cr dt{font-size:10px;letter-spacing:.12em}
  .cr dd{font-size:15.5px}
  .gen-rights{font-size:13px}
}

/* Projet suivant */
.nxt-sec{flex-shrink:0;padding-top:150px}
.nxt{position:relative;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:center;padding:44px 0;border-top:1.5px dashed rgba(170,205,245,.38);border-bottom:1.5px dashed rgba(170,205,245,.38)}
.nxt-tx{grid-column:1 / span 6;display:flex;flex-direction:column;align-items:flex-start}
.nxt-tx > .hand{font-size:23px;color:var(--yellow)}
.nxt .tt{margin-top:12px;font-size:84px;line-height:1;text-decoration:underline;text-decoration-color:transparent;text-decoration-thickness:5px;text-underline-offset:12px;transition:text-decoration-color .25s}
.nxt-pills{margin-top:22px;display:flex;flex-wrap:wrap;gap:10px}
.nxt-ph{grid-column:7 / span 5;position:relative;display:block;height:300px}
.nxt .pr{position:absolute;inset:0;display:block;padding:10px;transform:rotate(2.2deg);transition:transform .5s var(--ease)}
.nxt .pr > span{position:relative;display:block;height:100%;overflow:hidden;border-radius:2px;background:var(--pbg,#1A2A4A)}
.nxt .pr img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.nxt .pr img.bgblur{left:-24px;top:-24px;width:calc(100% + 48px);height:calc(100% + 48px);filter:blur(16px) brightness(.45)}
.nxt .pr img.contain{object-fit:contain}
.nxt .z{position:absolute;inset:0;display:block;transition:transform 1.4s var(--ease)}
.nxt:hover .z{transform:scale(1.06)}
.nxt-ph .tape{width:120px;left:50%;top:-14px;margin-left:-60px;transform:rotate(-4deg)}
.nxt .arr{grid-column:12 / span 1;justify-self:end;display:flex;align-items:center;justify-content:center;width:88px;height:88px;border-radius:50%;background:var(--yellow);color:var(--ink);border:2.5px solid var(--ink);box-shadow:0 5px 0 var(--ink);transition:transform .5s var(--ease)}
.nxt:hover .arr{transform:rotate(-45deg)}
.nxt:hover .pr{transform:translateY(-8px) rotate(0deg)}
.nxt:hover .tt{text-decoration-color:var(--yellow)}
.nxt-row{display:contents}
@media (min-width:900px) and (max-width:1199.98px){
  .nxt .tt{font-size:64px}
  .nxt-ph{height:240px}
  .nxt .arr{width:72px;height:72px}
}
@media (max-width:899.98px){
  .nxt-sec{padding-top:96px}
  .nxt{display:flex;flex-direction:column;align-items:flex-start;padding:30px 0 34px}
  .nxt-tx{display:contents}
  .nxt-tx > .hand{order:1;font-size:20px}
  .nxt-ph{order:2;align-self:stretch;height:206px;margin-top:26px}
  .nxt .pr{padding:8px}
  .nxt-ph .tape{width:104px;margin-left:-52px}
  .nxt-row{order:3;margin-top:28px;align-self:stretch;display:flex;align-items:center;justify-content:space-between;gap:16px}
  .nxt .tt{margin-top:0;font-size:clamp(30px,10.3vw,48px);line-height:1.02;text-decoration-thickness:4px;text-underline-offset:8px}
  .nxt .arr{width:58px;height:58px;box-shadow:0 4px 0 var(--ink)}
  .nxt .arr svg{width:24px;height:24px}
  .nxt-pills{order:4;margin-top:16px;gap:8px}
}

/* Bloc contact de fin de projet */
.pjc{flex-shrink:0;padding:140px 0}
.pjc-box{position:relative;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:center;padding:56px 60px;border-radius:32px;background:var(--ink);border:1.5px solid rgba(170,205,245,.24);box-shadow:0 40px 80px rgba(5,10,25,.55)}
.pjc-l{grid-column:1 / span 8;display:flex;flex-direction:column;align-items:flex-start}
.pjc-l > .hand{font-size:23px;color:var(--yellow)}
.pjc h2{margin-top:16px;display:flex;align-items:center;flex-wrap:wrap;gap:6px 18px;font-size:64px;font-weight:inherit}
.pjc h2 .disp{line-height:1.05}
.pjc h2 .lbl{transform:rotate(-2deg)}
.pjc-l > p{margin-top:22px;max-width:520px;font-size:18px;line-height:1.6;color:var(--t2)}
.pjc-acts{margin-top:30px;display:flex;align-items:center;gap:12px}
.pjc-acts .btn{height:54px;padding:0 26px}
.pjc-acts .bw{padding:0 22px}
.pjc-r{grid-column:10 / span 3;justify-self:end;position:relative}
.bd.md{width:196px;height:196px}
.bd.md .bd-txt{width:196px;height:196px}
.bd.md .bd-txt text{font-size:14.5px}
.bd.md .bar{width:82px;height:82px}
@media (min-width:900px) and (max-width:1199.98px){
  .pjc-box{padding:48px 40px}
  .pjc h2{font-size:52px}
  .pjc-l{grid-column:1 / span 9}
  .pjc-r{grid-column:10 / span 3}
  .bd.md{width:160px;height:160px}
  .bd.md .bd-txt{width:160px;height:160px}
  .bd.md .bar{width:68px;height:68px}
}
@media (max-width:899.98px){
  .pjc{padding:88px 0 80px}
  .pjc-box{display:flex;flex-direction:column;align-items:flex-start;padding:36px 24px 32px;border-radius:26px}
  .pjc-l > .hand{font-size:19px;line-height:1.25}
  .pjc h2{margin-top:14px;flex-direction:column;align-items:flex-start;gap:8px;font-size:clamp(30px,9.7vw,46px)}
  .pjc-l > p{margin-top:20px;font-size:16px}
  .pjc-l{width:100%}
  .pjc-acts{margin-top:26px;width:100%;flex-direction:column;align-items:stretch}
  .pjc-acts .btn,.pjc-acts .bw{height:52px;padding:0 22px;font-size:15px}
  .pjc-r{display:none}
}

/* ---- Gala Vita Danse --------------------------------------------------------- */
.vdpr{position:relative;display:block;padding:12px;transform:rotate(var(--r,2.4deg));transition:transform .7s cubic-bezier(.34,1.4,.64,1)}
.vdpr img{display:block;width:100%;aspect-ratio:16 / 9;object-fit:cover;border-radius:2px}
.vdpr:hover{transform:rotate(0deg) translateY(-6px)}
.pj-hero .pj-aside.vd{grid-column:8 / span 5}
.vd-proj{align-items:start}
.vd-proj > div:first-child{grid-column:1 / span 5;display:flex;flex-direction:column;align-items:flex-start}
.vd-ph{position:relative;margin-top:48px;width:100%;max-width:460px}
.vd-ph .tape{width:112px;left:50%;top:-14px;margin-left:-56px;transform:rotate(3deg)}
.vdbr{grid-column:7 / span 6;position:relative;margin-top:18px}
.vdbr .pp{padding:44px 50px 46px;border-radius:4px;background:linear-gradient(172deg,#FFE7F5 0%,#FFBBE1 100%);box-shadow:0 30px 60px rgba(5,10,25,.45),0 4px 12px rgba(5,10,25,.25);transform:rotate(.8deg);transition:transform .6s cubic-bezier(.34,1.4,.64,1),box-shadow .6s ease}
.vdbr:hover .pp{transform:rotate(0deg) translateY(-6px);box-shadow:0 40px 80px rgba(5,10,25,.5),0 6px 16px rgba(5,10,25,.25)}
.vdbr > .tape{width:120px;left:56px;top:-15px;transform:rotate(-3deg)}
.vdbr .kk{display:flex;align-items:center;justify-content:space-between;gap:16px;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:rgba(20,26,44,.62)}
.vdbr .lead{margin-top:18px;font-family:var(--f-disp);font-weight:800;font-size:30px;line-height:1.15;letter-spacing:-.02em;color:var(--ink)}
.vdbr .pp > p:not(.kk):not(.lead){margin-top:24px;font-size:17px;line-height:1.7;color:#2A3350}
.vdbr .pp > p + p:not(.lead){margin-top:14px}
.vdmk{background:linear-gradient(180deg,transparent 58%,rgba(255,64,178,.4) 58%,rgba(255,64,178,.4) 92%,transparent 92%);padding:0 .06em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.vd-lv{align-items:center}
.vd-lv > div{grid-column:1 / span 4}
.vdlv{grid-column:5 / span 8;list-style:none;margin:0;padding:10px 0;border-radius:28px;background:var(--ink);border:1.5px solid rgba(170,205,245,.24);box-shadow:0 40px 80px rgba(5,10,25,.55);overflow:hidden}
.vdlv li{display:grid;grid-template-columns:52px minmax(0,1fr) auto;column-gap:22px;align-items:center;padding:24px 38px;border-top:1px dashed rgba(170,205,245,.18);transition:background-color .25s}
.vdlv li:first-child{border-top:0}
.vdlv li:hover{background-color:rgba(255,255,255,.035)}
.vdlv .fi{display:flex;justify-content:center;transition:transform .35s var(--spring)}
.vdlv li:hover .fi{transform:translateY(-3px) rotate(-5deg)}
.vdlv .n{display:block;font-size:19px;font-weight:700;line-height:1.3}
.vdlv .d{display:block;margin-top:4px;font-size:15.5px;line-height:1.5;color:var(--t3)}
.vdlv .rs{position:relative;overflow:hidden;display:inline-flex;align-items:center;height:36px;padding:0 13px;border-radius:6px;font-family:var(--f-disp);font-weight:800;font-size:17px;letter-spacing:-.01em;white-space:nowrap;background:linear-gradient(180deg,#FFFFFF 0%,#DCE3F2 100%);color:var(--ink);transform:rotate(-2deg);box-shadow:0 8px 18px rgba(6,12,30,.35),inset 0 1px 0 rgba(255,255,255,.9);transition:transform .35s var(--spring)}
.vdlv .rs.k4{height:40px;padding:0 15px;font-size:21px;background:linear-gradient(100deg,#FF8AD6 0%,#EE3AAB 100%);color:#fff;box-shadow:0 8px 24px rgba(238,58,171,.45),inset 0 1px 0 rgba(255,255,255,.35)}
.vdlv .rs::after{content:"";position:absolute;top:-12px;bottom:-12px;left:0;width:34%;background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.8),rgba(255,255,255,0));transform:translateX(-160%) skewX(-18deg);animation:vdsh 4.2s ease-in-out infinite;animation-delay:var(--d,0s)}
.vdlv li:hover .rs{transform:rotate(0deg) scale(1.08)}
@keyframes vdsh{0%,50%{transform:translateX(-160%) skewX(-18deg)}72%,100%{transform:translateX(420%) skewX(-18deg)}}
.js .vdlv:not(.in) li{opacity:0}
.vdlv.in li{animation:vdin .8s var(--ease) backwards}
.vdlv.in li:nth-child(2){animation-delay:.14s}
.vdlv.in li:nth-child(3){animation-delay:.28s}
.vdlv.in .fi{animation:vdpop .7s var(--spring) backwards}
.vdlv.in li:nth-child(1) .fi{animation-delay:.2s}
.vdlv.in li:nth-child(2) .fi{animation-delay:.34s}
.vdlv.in li:nth-child(3) .fi{animation-delay:.48s}
@keyframes vdin{from{opacity:0;transform:translateX(56px)}}
@keyframes vdpop{from{opacity:0;transform:scale(.5) rotate(-12deg)}}
@media (min-width:900px) and (max-width:1199.98px){
  .vdbr .pp{padding:36px 36px 38px}
  .vdbr .lead{font-size:25px}
  .vd-lv > div{grid-column:1 / span 12;margin-bottom:32px}
  .vdlv{grid-column:1 / span 12}
}
@media (max-width:899.98px){
  .pj-hero .pj-aside.vd{margin-top:44px;padding:0 4px}
  .vdpr{padding:9px}
  .vd-proj{display:flex;flex-direction:column;align-items:stretch}
  .vd-proj > div:first-child{display:contents}
  .vd-proj > div:first-child > .pj-kick{order:1}
  .vd-proj > div:first-child > h2{order:2}
  .vdbr{order:3;margin-top:40px}
  .vd-ph{order:4;margin-top:48px;max-width:none;padding:0 6px}
  .vdbr .pp{padding:30px 22px 30px}
  .vdbr > .tape{width:96px;left:28px}
  .vdbr .kk{font-size:11px}
  .vdbr .lead{font-size:clamp(21px,6.2vw,28px)}
  .vdbr .pp > p:not(.kk):not(.lead){font-size:15.5px}
  .vd-lv{display:block}
  .vdlv{margin-top:28px;padding:4px 0;border-radius:20px}
  .vdlv li{grid-template-columns:40px minmax(0,1fr) auto;column-gap:14px;padding:20px 16px}
  .vdlv .fi svg{width:34px;height:auto}
  .vdlv .n{font-size:16.5px}
  .vdlv .d{font-size:14px}
  .vdlv .rs{height:30px;padding:0 9px;font-size:14px}
  .vdlv .rs.k4{height:34px;padding:0 11px;font-size:17px}
}

/* ---- Léo Martin ----------------------------------------------------------------- */
.pj-hero.lm .pj-tx{grid-column:1 / span 6}
.pj h1.lm-h{display:flex;flex-direction:column;align-items:flex-start;font-size:76px}
.lm-h .lbl.w{margin-top:-2px;margin-left:150px;font-size:34px;transform:rotate(1.8deg)}
.pj-hero.lm .pj-tx > p{max-width:520px}
.env-w{margin-top:44px;animation-delay:.28s}
.env{position:relative;width:430px;max-width:100%;padding:66px 22px 22px;border-radius:8px;background:linear-gradient(170deg,#EDDCB9,#D8BF8E);box-shadow:0 26px 50px rgba(5,10,25,.45);transform:rotate(-1.4deg)}
.env::before{content:"";position:absolute;left:0;right:0;top:0;height:70px;border-radius:8px 8px 0 0;background:linear-gradient(180deg,#DCC393,#CBAE78);clip-path:polygon(0 0,100% 0,50% 100%)}
.env .hand.n{position:absolute;left:20px;top:12px;font-size:18px;color:rgba(20,26,44,.6)}
.env-card{position:relative;padding:18px 22px 20px;border-radius:4px;background:var(--paper);box-shadow:0 6px 14px rgba(5,10,25,.18)}
.env-card .k{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#7C849A}
.env-card ul{margin-top:12px;list-style:none;padding:0;display:flex;flex-direction:column;gap:8px}
.env-card li{display:flex;align-items:center;gap:12px}
.env-card li svg{flex-shrink:0;overflow:visible}
.env-card li .hand{font-size:23px;line-height:1.2;color:var(--ink)}
.pj-hero.lm .pj-aside{grid-column:8 / span 5;justify-self:center;width:470px;max-width:100%}
.vfp{position:relative;aspect-ratio:470 / 619;border-radius:16px;overflow:hidden;background:#000;border:12px solid #0B0F1C;box-shadow:0 40px 80px rgba(5,10,25,.55),inset 0 0 0 1px rgba(255,255,255,.08)}
.vfp .kb{position:absolute;inset:0;display:block;animation:kb 26s ease-in-out infinite alternate}
.vfp .kb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
@keyframes kb{to{transform:scale(1.09)}}
.vfp-grid{position:absolute;inset:0;background-image:linear-gradient(90deg,transparent calc(33.33% - .5px),rgba(255,255,255,.28) calc(33.33% - .5px),rgba(255,255,255,.28) calc(33.33% + .5px),transparent calc(33.33% + .5px),transparent calc(66.66% - .5px),rgba(255,255,255,.28) calc(66.66% - .5px),rgba(255,255,255,.28) calc(66.66% + .5px),transparent calc(66.66% + .5px)),linear-gradient(180deg,transparent calc(33.33% - .5px),rgba(255,255,255,.28) calc(33.33% - .5px),rgba(255,255,255,.28) calc(33.33% + .5px),transparent calc(33.33% + .5px),transparent calc(66.66% - .5px),rgba(255,255,255,.28) calc(66.66% - .5px),rgba(255,255,255,.28) calc(66.66% + .5px),transparent calc(66.66% + .5px))}
.af{position:absolute;left:50%;top:41%;width:132px;height:150px;margin:-75px 0 0 -66px;animation:af 4.2s cubic-bezier(.5,0,.2,1) infinite}
.af i{position:absolute;width:26px;height:26px;border:0 solid #fff;animation:afc 4.2s steps(1,end) infinite}
.af i:nth-child(1){top:0;left:0;border-top-width:3px;border-left-width:3px}
.af i:nth-child(2){top:0;right:0;border-top-width:3px;border-right-width:3px}
.af i:nth-child(3){bottom:0;left:0;border-bottom-width:3px;border-left-width:3px}
.af i:nth-child(4){bottom:0;right:0;border-bottom-width:3px;border-right-width:3px}
.af b{position:absolute;left:50%;top:50%;width:12px;height:12px;margin:-6px 0 0 -6px;border:2px solid var(--lime);border-radius:2px}
@keyframes af{0%,8%{transform:scale(1.2);opacity:.55}30%,86%{transform:scale(1);opacity:1}100%{transform:scale(1.2);opacity:.55}}
@keyframes afc{0%{border-color:#FFFFFF}30%{border-color:#B7F03A}86%{border-color:#FFFFFF}}
.vfp-top{position:absolute;left:0;right:0;top:0;height:40px;padding:0 16px;display:flex;align-items:center;justify-content:space-between;background:linear-gradient(180deg,rgba(0,0,0,.55),rgba(0,0,0,0));font-size:12px;font-weight:700;letter-spacing:.08em;color:#fff}
.vfp-top > span:last-child{display:inline-flex;align-items:center;gap:8px}
.vfp-bot{position:absolute;left:0;right:0;bottom:0;height:50px;padding:0 18px;display:flex;align-items:center;gap:20px;background:rgba(5,8,18,.72);font-size:14px;font-weight:700;letter-spacing:.06em;color:#fff}
.vfp-meter{position:relative;flex:1;height:18px;display:flex;align-items:center;justify-content:space-between}
.vfp-meter::before{content:"";position:absolute;left:0;right:0;top:50%;height:1.5px;background:rgba(255,255,255,.55)}
.vfp-meter i{position:relative;width:1.5px;height:8px;background:#fff}
.vfp-meter i.l{height:14px}
.needle{position:absolute;left:50%;top:-6px;margin-left:-5px;width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:8px solid var(--yellow);animation:needle 3s ease-in-out infinite alternate}
@keyframes needle{from{transform:translateX(-22px)}to{transform:translateX(16px)}}
.flash{position:absolute;inset:0;background:#fff;opacity:0;animation:flash 6.5s ease-out 1.5s infinite}
@keyframes flash{0%,90%{opacity:0}91.5%{opacity:.9}100%{opacity:0}}
.clic{position:absolute;right:-22px;top:-28px;font-size:34px;color:var(--yellow);opacity:0;animation:clic 6.5s ease-out 1.5s infinite}
@keyframes clic{0%,90%{opacity:0;transform:scale(.6) rotate(-8deg)}92%{opacity:1;transform:scale(1.1) rotate(-8deg)}97%{opacity:1;transform:scale(1) rotate(-8deg)}100%{opacity:0;transform:scale(1) rotate(-8deg)}}
.lm-wall-hd{display:flex;align-items:flex-end;justify-content:space-between;gap:24px}
.lm-wall-hd .hand:last-child{font-size:20px;color:var(--t4)}
.wall{margin-top:44px;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));grid-auto-rows:clamp(140px,14vw,202px);gap:20px}
.pz{position:relative;display:block;margin:0;padding:6px;background:var(--paper);border-radius:4px;box-shadow:0 18px 34px rgba(5,10,25,.42),0 3px 8px rgba(5,10,25,.28);transform:rotate(var(--r,0deg));grid-column:var(--gc);grid-row:var(--gr);transition:transform .5s var(--spring),box-shadow .3s}
.pz .ph{position:relative;display:block;width:100%;height:100%;overflow:hidden;border-radius:2px;background:#1A2A4A}
.pz img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.pz:hover{transform:rotate(0deg) scale(1.035);z-index:2;box-shadow:0 34px 64px rgba(5,10,25,.58),0 6px 14px rgba(5,10,25,.3)}
.pz:hover img{transform:scale(1.06)}
.js .wall:not(.in) .pz{opacity:0}
.wall.in .pz{animation:deal2 .9s var(--ease) var(--d,0s) backwards}
.wall.in .pz img{animation:dev 2.2s ease-out var(--d,0s) backwards}
@keyframes deal2{from{opacity:0;transform:translateY(46px) rotate(calc(var(--r,0deg) - 5deg)) scale(.94)}}
@keyframes dev{from{filter:sepia(1) brightness(1.9) contrast(.45) blur(4px)}}
@media (min-width:900px) and (max-width:1199.98px){
  .pj h1.lm-h{font-size:64px}
  .lm-h .lbl.w{margin-left:110px;font-size:30px}
  .pj-hero.lm .pj-aside{width:380px}
  .wall{gap:14px}
}
@media (max-width:899.98px){
  .pj h1.lm-h{font-size:clamp(40px,14.9vw,66px)}
  .lm-h .lbl.w{margin-left:116px;font-size:26px}
  .pj-hero.lm .pj-tx > p{margin-top:30px}
  .pj-hero.lm .pj-tx{display:contents}
  .pj-hero.lm .pj-pills{order:1}
  .pj-hero.lm h1{order:2}
  .pj-hero.lm .pj-tx > p{order:3}
  .pj-hero.lm .pj-aside{order:4;margin-top:52px;width:100%;justify-self:auto}
  .pj-hero.lm .env-w{order:5;margin-top:44px;padding:0 4px}
  .vfp{aspect-ratio:auto;height:452px;border-width:10px}
  .clic{right:6px;top:-32px;font-size:28px}
  .env{width:auto}
  .env-card li .hand{font-size:21px}
  .lm-wall-hd .hand:first-child{font-size:21px}
  .lm-wall-hd .hand:last-child{display:none}
  .wall{margin-top:22px;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:auto;gap:12px}
  .pz{grid-column:auto;grid-row:auto;order:var(--o);height:250px;padding:5px}
  .pz.w{grid-column:1 / span 2;height:196px}
}

/* ---- RE-NOUS -------------------------------------------------------------------- */
.pj h1.rn-h{margin-top:26px;margin-left:-34px}
.pj h1.rn-h img{display:block;width:690px;max-width:calc(100% + 34px);height:auto}
.rn-by{margin-top:6px;font-size:13px;font-weight:600;letter-spacing:.3em;text-transform:uppercase;color:var(--t3);animation-delay:.16s}
.pj-tx > p.rn-lead{margin-top:48px;font-size:50px;line-height:1.06;color:#fff;max-width:none}
.pj-tx > p.rn-lead + p{margin-top:20px;font-size:20px;line-height:1.6;animation-delay:.26s}
.rnh{background:linear-gradient(180deg,transparent 58%,rgba(255,75,62,.55) 58%,rgba(255,75,62,.55) 90%,transparent 90%);padding:0 .06em}
.rn-acts{margin-top:34px;display:flex;align-items:center;gap:14px;animation-delay:.32s}
.rn-acts .btn{padding:0 24px}
.pj-hero .pj-aside.rn{grid-column:9 / span 4}
.rnp{position:relative;display:block;padding:12px;transform:rotate(2.4deg);transition:transform .7s cubic-bezier(.34,1.4,.64,1)}
.rnp img{display:block;width:100%;height:auto;border-radius:2px}
.rnp:hover{transform:rotate(0deg) translateY(-6px)}
@media (min-width:900px) and (max-width:1199.98px){
  .pj-tx > p.rn-lead{font-size:40px}
  .pj-hero .pj-aside.rn{grid-column:9 / span 4}
}
@media (max-width:899.98px){
  .pj-hero.rn-hero .pj-tx{display:contents}
  .pj-hero.rn-hero .pj-pills{order:1}
  .pj h1.rn-h{order:2;margin:22px -8px 0 -14px}
  .pj h1.rn-h img{width:100%;max-width:none}
  .rn-by{order:3;margin-top:4px;font-size:11.5px;letter-spacing:.26em}
  .pj-hero .pj-aside.rn{order:4;align-self:center;width:250px;margin-top:44px}
  .rnp{padding:9px}
  .pj-aside.rn .tape{width:96px;margin-left:-48px}
  .pj-tx > p.rn-lead{order:5;margin-top:52px;font-size:clamp(28px,8.7vw,40px);line-height:1.08}
  .pj-tx > p.rn-lead + p{order:6;margin-top:16px;font-size:16px}
  .rn-acts{order:7;margin-top:28px;flex-direction:column;align-items:stretch}
  .rn-acts .btn{padding:0 22px;font-size:15px}
}

/* Variantes de titres */
.p-projet .lbl.c{background:linear-gradient(100deg,#A8F4FF 0%,#2EC8EC 100%);color:var(--ink)}
@media (max-width:899.98px){
  .pj h1.vd-h{display:flex;flex-direction:column;align-items:flex-start;gap:10px;font-size:clamp(40px,13.8vw,64px)}
  .pj h1.vd-h .lbl:last-child{margin-left:34px;transform:rotate(1.2deg)}
}

/* ---- Pages légales (mentions légales, CGV) ------------------------------------ */
.lg-hd{position:relative;flex-shrink:0;padding-top:96px}
.lg-hd .g12{align-items:end}
.lg-hd .lg-t{grid-column:1 / span 8}
.lg-hd h1{margin-top:18px;display:flex;flex-direction:column;align-items:flex-start;gap:14px;font-size:84px;line-height:1;font-weight:inherit}
.lg-hd h1 .lbl{margin-left:var(--ml,0);transform:rotate(var(--r,-2deg))}
.lg-hd h1 .sub{margin-top:16px;font-size:30px;line-height:1.1;color:var(--t2)}
.lg-hd.cgv h1{font-size:76px}
.lg-date{grid-column:10 / span 3;justify-self:end;animation-delay:.12s}
.lg-date p{position:relative;padding:26px 22px 20px;border-radius:2px;transform:rotate(2.4deg)}
.lg-date .pin{left:50%;top:-11px;margin-left:-12px}
.lg-date .hand{display:block}
.lg-date .hand:first-of-type{font-size:17px;line-height:1.2;color:rgba(20,26,44,.65)}
.lg-date .hand + .hand{margin-top:4px;font-size:24px;line-height:1.15;color:var(--ink)}
.lg-body{flex-shrink:0;padding:88px 0 120px}
.lg-body .g12{align-items:start}
.toc{grid-column:1 / span 3;position:sticky;top:24px;max-height:calc(100vh - 48px);overflow-y:auto;scrollbar-width:thin}
.toc p{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--t4)}
.toc ol{margin-top:12px;list-style:none;padding:0;border-top:1px solid rgba(170,205,245,.16);font-size:14px}
.toc a{display:flex;align-items:center;gap:14px;padding:11px 0;color:var(--t3);border-bottom:1px solid rgba(170,205,245,.16);transition:color .2s}
.toc a .tn{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;flex-shrink:0;border-radius:50%;border:1.5px solid rgba(170,205,245,.4);font-family:var(--f-disp);font-weight:800;font-size:12px;color:#fff;transition:background-color .25s,border-color .25s,color .25s,transform .35s var(--spring)}
.toc a:hover,.toc a:focus-visible{color:#fff}
.toc a:hover .tn,.toc a:focus-visible .tn{background-color:var(--yellow);border-color:var(--yellow);color:var(--ink);transform:scale(1.08)}
.lg-main{grid-column:5 / span 8;display:flex;flex-direction:column}
.lg-main.solo{grid-column:3 / span 8}
.mls{padding:44px 0 48px;border-top:1.5px dashed rgba(170,205,245,.38);scroll-margin-top:24px}
.mls-h{display:flex;align-items:center;gap:16px}
.mls-h .n{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;flex-shrink:0;border-radius:50%;background:var(--yellow);color:var(--ink);font-family:var(--f-disp);font-weight:800;font-size:14px}
.mls h2{font-size:32px;line-height:1.1}
.mlp{margin-top:16px;font-size:16.5px;line-height:1.7;color:var(--t2)}
.mlu{margin-top:14px;list-style:none;padding:0;display:flex;flex-direction:column;gap:10px}
.mlu li{position:relative;padding-left:22px;font-size:16.5px;line-height:1.7;color:var(--t2)}
.mlu li::before{content:"";position:absolute;left:4px;top:.72em;width:7px;height:7px;border-radius:2px;background:var(--yellow)}
.mlu strong{font-weight:600;color:#fff}
.mls dl{margin-top:14px;border-top:1px solid rgba(170,205,245,.14)}
.mld{display:grid;grid-template-columns:220px minmax(0,1fr);column-gap:28px;padding:13px 0;border-bottom:1px solid rgba(170,205,245,.14)}
.mld dt{padding-top:3px;font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--t4)}
.mld dd{font-size:16px;line-height:1.6;color:#fff}
.ph{text-decoration:underline dashed rgba(255,195,22,.75);text-decoration-thickness:1.5px;text-underline-offset:5px}
@media (min-width:900px) and (max-width:1199.98px){
  .lg-hd h1{font-size:64px}
  .lg-hd.cgv h1{font-size:60px}
  .toc{grid-column:1 / span 4}
  .lg-main{grid-column:5 / span 8}
  .lg-main.solo{grid-column:1 / span 12}
  .mld{grid-template-columns:170px minmax(0,1fr)}
}
@media (max-width:899.98px){
  .lg-hd{padding-top:40px}
  .lg-hd .g12{display:flex;flex-direction:column;align-items:flex-start}
  .lg-hd h1,.lg-hd.cgv h1{margin-top:0;gap:12px;font-size:clamp(32px,10.3vw,48px)}
  .lg-hd h1 .sel{inset:-9px -11px}
  .lg-hd h1 .sub{margin-top:12px;font-size:21px;line-height:1.15}
  .lg-date{justify-self:auto;margin-top:40px;margin-left:6px}
  .lg-date p{padding:20px 20px 16px;transform:rotate(-2deg)}
  .lg-date .hand:first-of-type{font-size:15px}
  .lg-date .hand + .hand{margin-top:2px;font-size:21px}
  .lg-body{padding:44px 0 72px}
  .lg-body .g12{display:block}
  .toc{display:none}
  .mls{padding:32px 0 34px}
  .mls-h{gap:12px}
  .mls-h .n{width:34px;height:34px;font-size:12.5px}
  .mls h2{font-size:23px}
  .mlp{font-size:15.5px}
  .mlu li{font-size:15.5px;padding-left:20px}
  .mld{grid-template-columns:minmax(0,1fr);row-gap:5px;padding:12px 0}
  .mld dt{padding-top:0;font-size:10.5px}
  .mld dd{font-size:15px}
}