/* ==========================================================================
   KO KORNER©  ·  site.css  (v11)
   Direction « Encre + Éclat » : l'encre de l'accueil se prolonge sur chaque
   page (tuiles, vagues, trait des étapes) et l'emblème éclate en orbite
   (scènes animées, hublot sur la planète, carrousel des réalisations).
   Mode clair et mode sombre inversé, relief néomorphique, Montserrat.
   ========================================================================== */

/* ---------- Police auto hébergée (pas d'appel à Google Fonts, RGPD) ---------- */
@font-face{
  font-family:'Montserrat';
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url('../fonts/montserrat-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;
}

/* ---------- Palettes ----------
   p = palette de la page, b = palette des bandes (encre).
   En mode sombre, la brume devient charbon et l'encre reste noire :
   tout reste sombre pour le confort des yeux. */
:root{
  color-scheme:light;
  --p-fond:#E4E6ED;--p-haut:#EFF1F6;--p-bas:#D8DAE2;--p-encre:#0A0A0A;--p-texte:#18191D;--p-gris:#474A54;
  --p-ombre:#BCBFCA;--p-lum:#FFFFFF;--p-trait:rgba(150,154,168,.45);--p-trait2:rgba(255,255,255,.75);
  --p-eg:linear-gradient(160deg,#2A2A2F 0%,#131316 45%,#050506 100%);
  --p-emb:3px 3px 6px rgba(140,145,160,.45),-3px -3px 6px rgba(255,255,255,.95);
  --p-picto:invert(0);--p-picto-inv:invert(1) brightness(.95);

  --b-fond:#0A0A0A;--b-haut:#1B1C21;--b-bas:#050506;--b-encre:#E4E6ED;--b-texte:#E4E6ED;--b-gris:#A4A7B1;
  --b-ombre:#000000;--b-lum:#26282E;--b-trait:rgba(255,255,255,.1);--b-trait2:rgba(0,0,0,.6);
  --b-eg:linear-gradient(160deg,#FFFFFF 0%,#E4E6ED 55%,#CDD0D8 100%);
  --b-emb:3px 3px 7px rgba(0,0,0,.95),-2px -2px 6px rgba(60,62,70,.5);
  --b-picto:invert(1) brightness(.95);--b-picto-inv:invert(0);

  --hdr:rgba(228,230,237,.84);
  --r-s:14px;--r-m:24px;--r-l:36px;
  --wrap:1200px;
  --pad:clamp(20px,4vw,48px);
  --ease:cubic-bezier(.22,1,.36,1);
}
html.sombre{
  color-scheme:dark;
  --p-fond:#15171C;--p-haut:#1D2026;--p-bas:#0E0F13;--p-encre:#ECEDF2;--p-texte:#DCDEE5;--p-gris:#A3A7B2;
  --p-ombre:#07080A;--p-lum:#282C34;--p-trait:rgba(255,255,255,.08);--p-trait2:rgba(0,0,0,.55);
  --p-eg:linear-gradient(160deg,#FFFFFF 0%,#ECEDF2 50%,#D3D5DC 100%);
  --p-emb:3px 3px 7px rgba(0,0,0,.9),-2px -2px 6px rgba(62,66,76,.55);
  --p-picto:invert(1) brightness(.95);--p-picto-inv:invert(0);

  --b-fond:#060607;--b-haut:#15161A;--b-bas:#030304;--b-encre:#ECEDF2;--b-texte:#DCDEE5;--b-gris:#9EA2AD;
  --b-ombre:#000000;--b-lum:#1F2127;--b-trait:rgba(255,255,255,.08);--b-trait2:rgba(0,0,0,.6);
  --b-eg:linear-gradient(160deg,#FFFFFF 0%,#ECEDF2 50%,#D3D5DC 100%);
  --b-emb:3px 3px 7px rgba(0,0,0,.95),-2px -2px 6px rgba(56,58,66,.5);
  --b-picto:invert(1) brightness(.95);--b-picto-inv:invert(0);

  --hdr:rgba(21,23,28,.84);
}

/* Jetons utilisés par les composants : palette de page par défaut, palette encre dans .nuit */
:root,.nuit,.contre{
  --fond:var(--p-fond);--fond-haut:var(--p-haut);--fond-bas:var(--p-bas);--encre:var(--p-encre);--texte:var(--p-texte);
  --gris:var(--p-gris);--ombre:var(--p-ombre);--lumiere:var(--p-lum);--trait:var(--p-trait);--trait2:var(--p-trait2);
  --eg:var(--p-eg);--emb:var(--p-emb);--picto:var(--p-picto);--picto-inv:var(--p-picto-inv);
}
.nuit{
  --fond:var(--b-fond);--fond-haut:var(--b-haut);--fond-bas:var(--b-bas);--encre:var(--b-encre);--texte:var(--b-texte);
  --gris:var(--b-gris);--ombre:var(--b-ombre);--lumiere:var(--b-lum);--trait:var(--b-trait);--trait2:var(--b-trait2);
  --eg:var(--b-eg);--emb:var(--b-emb);--picto:var(--b-picto);--picto-inv:var(--b-picto-inv);
}
:root,.nuit,.contre{
  --grad:linear-gradient(145deg,var(--fond-haut),var(--fond-bas));
  --relief:8px 8px 18px var(--ombre),-8px -8px 18px var(--lumiere);
  --relief-s:5px 5px 10px var(--ombre),-5px -5px 10px var(--lumiere);
  --creux:inset 6px 6px 12px var(--ombre),inset -6px -6px 12px var(--lumiere);
  --creux-s:inset 3px 3px 6px var(--ombre),inset -3px -3px 6px var(--lumiere);
}
.nuit{background:var(--fond);color:var(--texte)}

/* ---------- Base ---------- */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:96px;background:var(--fond)}
body{background:var(--fond);color:var(--texte);font-family:'Montserrat',system-ui,-apple-system,'Segoe UI',sans-serif;font-size:1.0625rem;line-height:1.7;font-weight:450;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:clip}
img,svg,video{display:block;max-width:100%;height:auto}
a{color:inherit}
p a,li a,dd a,td a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
p a:hover,li a:hover,dd a:hover,td a:hover{text-decoration-thickness:2px}
strong{font-weight:700;color:var(--encre)}
button{font:inherit;color:inherit;cursor:pointer;background:none;border:none}
:focus-visible{outline:2px solid currentColor;outline-offset:3px;border-radius:6px}
::selection{background:var(--encre);color:var(--fond)}
[hidden]{display:none!important}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;left:16px;top:-80px;z-index:1000;background:var(--encre);color:var(--fond);padding:12px 18px;border-radius:10px;font-weight:700;text-decoration:none;transition:top .2s}
.skip:focus{top:16px}
.cm{font-size:.6em;vertical-align:.55em;margin-left:.08em;font-weight:800;letter-spacing:0}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.wrap{width:100%;max-width:calc(var(--wrap) + var(--pad)*2);margin:0 auto;padding:0 var(--pad)}
.wrap--etroit{max-width:calc(820px + var(--pad)*2)}
.picto{filter:var(--picto) drop-shadow(4px 4px 7px var(--ombre)) drop-shadow(-4px -4px 7px var(--lumiere))}

/* Bascule de thème : l'encre se répand depuis le bouton */
::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}
html.theme-anim,html.theme-anim *,html.theme-anim *::before,html.theme-anim *::after{transition:background-color .5s,color .5s,border-color .5s,box-shadow .5s,fill .5s!important}

/* ---------- Typographie ---------- */
.titre-page{font-weight:900;text-transform:uppercase;letter-spacing:.035em;line-height:1.02;font-size:clamp(2.2rem,5.3vw,4.5rem);color:var(--encre);text-shadow:var(--emb);text-wrap:balance}
.titre-page .ligne{display:block;animation:monte .9s var(--ease) both}
.titre-page .ligne:nth-child(2){animation-delay:.08s}
.titre-page .ligne:nth-child(3){animation-delay:.16s}
@keyframes monte{from{transform:translateY(.45em)}to{transform:none}}
.titre-page--m{font-size:clamp(2.1rem,4.2vw,3.7rem)}
h2,.h2{font-weight:800;font-size:clamp(1.65rem,3.1vw,2.5rem);line-height:1.15;letter-spacing:-.012em;color:var(--encre);text-wrap:balance}
h3,.h3{font-weight:750;font-size:1.18rem;line-height:1.35;color:var(--encre)}
.chapo{font-size:clamp(1.08rem,1.5vw,1.25rem);line-height:1.65;color:var(--gris);max-width:62ch}
.texte{max-width:68ch}
.texte p+p{margin-top:1em}
.muted{color:var(--gris)}
.petit{font-size:.92rem}
.surtitre{display:inline-flex;align-items:center;gap:10px;font-weight:800;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gris);margin-bottom:16px}
.surtitre svg{width:12px;height:17px;fill:currentColor}

/* ---------- Boutons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 30px;border-radius:999px;font-weight:800;font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;text-decoration:none;color:var(--encre);background:var(--grad);box-shadow:var(--relief-s);transition:box-shadow .35s var(--ease),transform .15s;white-space:nowrap}
.btn:hover{box-shadow:var(--creux-s);transform:scale(.985)}
.btn:active{transform:scale(.97)}
.btn svg{width:18px;height:18px;flex:none}
.btn--encre{background:var(--eg);color:var(--fond);box-shadow:6px 6px 14px var(--ombre),-6px -6px 14px var(--lumiere),inset 1px 1px 1px rgba(255,255,255,.08)}
.btn--encre:hover{box-shadow:2px 2px 6px var(--ombre),-2px -2px 6px var(--lumiere),inset 3px 3px 8px rgba(0,0,0,.35);transform:scale(.985)}
.btn--sm{min-height:44px;padding:0 22px;font-size:.7rem}
.btn[disabled]{opacity:.6;cursor:wait}
.rond{width:46px;height:46px;flex:none;border-radius:50%;display:grid;place-items:center;color:var(--encre);background:var(--grad);box-shadow:var(--relief-s);text-decoration:none;transition:box-shadow .3s var(--ease),transform .15s}
.rond:hover{box-shadow:var(--creux-s)}
.rond:active{transform:scale(.95)}
.rond svg{width:20px;height:20px}
.rond[disabled]{opacity:.35;cursor:default;box-shadow:var(--creux-s)}
.lien-fleche{display:inline-flex;align-items:center;gap:8px;font-weight:800;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;text-decoration:none;transition:gap .3s var(--ease)}
.lien-fleche svg{width:16px;height:16px;transition:transform .3s var(--ease)}
.lien-fleche:hover svg{transform:translateX(4px)}

/* ---------- En tête : une seule ligne ---------- */
.hdr{position:sticky;top:0;z-index:100;background:var(--hdr);-webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px);transition:box-shadow .3s}
.hdr.est-scrolle{box-shadow:0 1px 0 var(--trait),0 12px 30px -12px var(--ombre)}
.hdr-in{display:flex;align-items:center;gap:clamp(16px,2vw,32px);height:78px}
.logo{display:inline-flex;align-items:center;gap:11px;text-decoration:none;color:var(--encre);font-weight:900;font-size:.95rem;letter-spacing:.15em;white-space:nowrap;flex:none}
.logo svg{width:23px;height:33px;fill:currentColor;transition:transform .7s var(--ease)}
.logo:hover svg{transform:rotate(-16deg) scale(1.08)}
.logo .cm{margin-left:-.02em}
.hdr-nav{display:flex;align-items:center;gap:clamp(16px,1.7vw,28px);margin-left:auto}
.hdr-nav a{position:relative;text-decoration:none;font-weight:800;font-size:.69rem;letter-spacing:.15em;text-transform:uppercase;color:var(--encre);opacity:.62;padding:8px 0;white-space:nowrap;transition:opacity .2s}
.hdr-nav a::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:1.5px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.hdr-nav a:hover,.hdr-nav a[aria-current="page"]{opacity:1}
.hdr-nav a:hover::after,.hdr-nav a[aria-current="page"]::after{transform:scaleX(1)}
.hdr-act{display:flex;align-items:center;gap:12px;flex:none}
.burger{display:none}

/* Interrupteur clair / sombre */
.theme{position:relative;flex:none;width:64px;height:36px;border-radius:999px;background:var(--fond);box-shadow:var(--creux-s),0 0 0 1px var(--trait)}
.theme-bille{position:absolute;top:4px;left:4px;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;color:var(--encre);background:var(--grad);box-shadow:3px 3px 6px var(--ombre),-2px -2px 5px var(--lumiere);transition:transform .5s var(--ease)}
.theme svg{width:15px;height:15px;grid-area:1/1;transition:opacity .3s,transform .5s var(--ease)}
.theme .lune{opacity:0;transform:rotate(-60deg) scale(.6)}
html.sombre .theme-bille{transform:translateX(28px)}
.nuit .theme{box-shadow:var(--creux-s),0 0 0 1px var(--trait)}
.nuit .theme-bille{box-shadow:0 0 0 1px var(--trait),3px 3px 6px var(--ombre)}
html.sombre .theme .soleil{opacity:0;transform:rotate(60deg) scale(.6)}
html.sombre .theme .lune{opacity:1;transform:none}

/* Menu mobile : l'encre se répand depuis le bouton */
.menu-encre{position:fixed;inset:0;z-index:200;display:flex;flex-direction:column;padding:22px var(--pad) 32px;clip-path:circle(0px at calc(100% - 46px) 39px);visibility:hidden;transition:clip-path .7s var(--ease),visibility 0s linear .7s;overflow-y:auto}
.menu-encre.ouvert{clip-path:circle(150vmax at calc(100% - 46px) 39px);visibility:visible;transition:clip-path .75s var(--ease),visibility 0s}
.menu-haut{display:flex;align-items:center;justify-content:space-between;height:54px}
.menu-liens{list-style:none;margin:6vh 0 4vh;display:flex;flex-direction:column;gap:6px}
.menu-liens a{display:block;text-decoration:none;font-weight:900;text-transform:uppercase;letter-spacing:.06em;font-size:clamp(1.7rem,7vw,2.6rem);line-height:1.25;color:var(--texte);opacity:0;transform:translateY(16px);transition:opacity .4s,transform .5s var(--ease)}
.menu-encre.ouvert .menu-liens a{opacity:1;transform:none}
.menu-encre.ouvert .menu-liens li:nth-child(2) a{transition-delay:.04s}
.menu-encre.ouvert .menu-liens li:nth-child(3) a{transition-delay:.08s}
.menu-encre.ouvert .menu-liens li:nth-child(4) a{transition-delay:.12s}
.menu-encre.ouvert .menu-liens li:nth-child(5) a{transition-delay:.16s}
.menu-encre.ouvert .menu-liens li:nth-child(6) a{transition-delay:.2s}
.menu-liens a[aria-current="page"]{color:var(--gris)}
.menu-bas{margin-top:auto;display:flex;flex-direction:column;gap:14px}
.menu-bas .btn{width:100%}
body.menu-ouvert{overflow:hidden}

/* ---------- Fil d'Ariane ---------- */
.ariane{font-size:.85rem;color:var(--gris);margin-bottom:22px}
.ariane ol{list-style:none;display:flex;flex-wrap:wrap;gap:6px}
.ariane li+li::before{content:"/";margin-right:6px;opacity:.5}
.ariane a{text-decoration:none}
.ariane a:hover{text-decoration:underline}

/* ---------- Sections ---------- */
.section{padding:clamp(64px,9vw,120px) 0}
.section--serre{padding:clamp(48px,6vw,80px) 0}
.tete{max-width:760px;margin-bottom:clamp(32px,4vw,56px)}
.tete p{margin-top:16px;color:var(--gris);font-size:1.08rem}
.tete-ligne{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px clamp(32px,6vw,96px);align-items:end;margin-bottom:clamp(36px,4.5vw,60px)}
.tete-ligne p{color:var(--gris);font-size:1.06rem}
.tete-ligne .btn{margin-top:22px}

/* ---------- Vagues d'encre (bord des bandes) ---------- */
.vague{display:block;width:100%;height:clamp(40px,6vw,90px);color:var(--b-fond);margin-bottom:-1px}
.vague--bas{transform:scaleY(-1);margin:-1px 0 0}
.vague path{fill:currentColor}

/* ---------- Hero ---------- */
.hero{position:relative;overflow-x:clip;padding:clamp(36px,6vw,88px) 0 clamp(48px,7vw,96px)}
.hero-grille{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(32px,5vw,72px);align-items:center}
.hero .chapo{margin-top:26px}
.hero-actions{display:flex;flex-wrap:wrap;gap:16px;margin-top:34px}
.hero-preuve{margin-top:28px;font-size:.95rem;color:var(--gris);max-width:52ch}
.hero-preuve strong{font-weight:800}

/* ---------- Scènes animées (une par page) ---------- */
.scene{position:relative;width:min(100%,440px);aspect-ratio:1;margin-inline:auto;display:grid;place-items:center}
.scene > *{grid-area:1/1}
/* Orbites inclinées avec leur satellite */
.orbite{position:absolute;inset:var(--i,6%);border-radius:50%;border:1.5px solid var(--trait);transform:rotateX(68deg) rotateZ(var(--r,0deg));animation:tourne var(--d,30s) linear infinite}
.orbite::after{content:"";position:absolute;top:50%;left:-6px;width:11px;height:11px;margin-top:-5.5px;border-radius:50%;background:var(--encre);box-shadow:0 0 0 4px var(--fond)}
@keyframes tourne{to{transform:rotateX(68deg) rotateZ(calc(var(--r,0deg) + 360deg))}}
/* L'emblème qui éclate */
.eclat{position:relative;width:54%;filter:drop-shadow(10px 14px 18px var(--ombre)) drop-shadow(-6px -6px 14px var(--lumiere))}
.eclat svg{width:100%;height:auto;fill:var(--encre);overflow:visible}
.eclat path{transform-box:fill-box;transform-origin:center}
.eclat .p0{animation:etoile 10s ease-in-out infinite}
.eclat .p1{animation:f1 8s ease-in-out infinite}
.eclat .p2{animation:f2 8s ease-in-out infinite .4s}
.eclat .p3{animation:f3 8s ease-in-out infinite .8s}
.eclat .p4{animation:f4 8s ease-in-out infinite .2s}
.eclat .p5{animation:f5 8s ease-in-out infinite .6s}
.eclat .p6{animation:f6 8s ease-in-out infinite 1s}
@keyframes etoile{0%,100%{transform:rotate(-5deg) scale(1)}50%{transform:rotate(5deg) scale(1.04)}}
@keyframes f1{0%,100%{transform:translate(0,0) rotate(0)}50%{transform:translate(-26px,-14px) rotate(-8deg)}}
@keyframes f2{0%,100%{transform:translate(0,0) rotate(0)}50%{transform:translate(30px,-6px) rotate(6deg)}}
@keyframes f3{0%,100%{transform:translate(0,0) rotate(0)}50%{transform:translate(-30px,8px) rotate(-10deg)}}
@keyframes f4{0%,100%{transform:translate(0,0) rotate(0)}50%{transform:translate(4px,-30px) rotate(5deg)}}
@keyframes f5{0%,100%{transform:translate(0,0) rotate(0)}50%{transform:translate(-22px,22px) rotate(-7deg)}}
@keyframes f6{0%,100%{transform:translate(0,0) rotate(0)}50%{transform:translate(14px,28px) rotate(8deg)}}
.eclat--fort .p1{animation-name:g1}.eclat--fort .p2{animation-name:g2}.eclat--fort .p3{animation-name:g3}
.eclat--fort .p4{animation-name:g4}.eclat--fort .p5{animation-name:g5}.eclat--fort .p6{animation-name:g6}
@keyframes g1{0%,100%{transform:translate(-30px,-20px) rotate(-14deg)}50%{transform:translate(-60px,-40px) rotate(-26deg)}}
@keyframes g2{0%,100%{transform:translate(40px,-12px) rotate(10deg)}50%{transform:translate(70px,-26px) rotate(22deg)}}
@keyframes g3{0%,100%{transform:translate(-44px,14px) rotate(-16deg)}50%{transform:translate(-74px,30px) rotate(-30deg)}}
@keyframes g4{0%,100%{transform:translate(6px,-44px) rotate(8deg)}50%{transform:translate(12px,-80px) rotate(18deg)}}
@keyframes g5{0%,100%{transform:translate(-34px,34px) rotate(-12deg)}50%{transform:translate(-60px,64px) rotate(-24deg)}}
@keyframes g6{0%,100%{transform:translate(22px,44px) rotate(14deg)}50%{transform:translate(40px,76px) rotate(28deg)}}
/* La tache d'encre vivante, la goutte et son onde */
.tache{position:absolute;inset:8% 4% 10% 10%;background:var(--encre);border-radius:42% 58% 63% 37% / 41% 44% 56% 59%;animation:morph 14s ease-in-out infinite;box-shadow:inset 24px 24px 50px rgba(255,255,255,.07),inset -18px -18px 40px rgba(0,0,0,.3)}
@keyframes morph{
  0%,100%{border-radius:42% 58% 63% 37% / 41% 44% 56% 59%;transform:rotate(0deg) scale(1)}
  33%{border-radius:58% 42% 38% 62% / 55% 38% 62% 45%;transform:rotate(8deg) scale(1.03)}
  66%{border-radius:37% 63% 51% 49% / 37% 60% 40% 63%;transform:rotate(-6deg) scale(.98)}
}
.disque{position:relative;width:min(100%,380px);aspect-ratio:1;border-radius:50%;background:var(--grad);box-shadow:16px 16px 36px var(--ombre),-16px -16px 36px var(--lumiere);display:grid;place-items:center}
.disque::before{content:"";position:absolute;inset:13%;border-radius:50%;box-shadow:var(--creux)}
.disque img{position:relative;width:40%;height:auto;filter:var(--picto) drop-shadow(4px 4px 7px var(--ombre)) drop-shadow(-4px -4px 7px var(--lumiere))}
.disque > svg{position:relative;width:38%;height:auto;color:var(--encre);fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(3px 3px 5px var(--ombre)) drop-shadow(-3px -3px 5px var(--lumiere))}
.scene .disque--coin{position:absolute;left:0;bottom:2%;width:56%}
.goutte{position:absolute;left:66%;top:-4%;width:20px;height:28px;background:var(--encre);border-radius:50% 50% 50% 50% / 62% 62% 38% 38%;animation:chute 5.5s cubic-bezier(.55,0,.85,.35) infinite}
@keyframes chute{0%{transform:translateY(-40px) scaleY(1.1);opacity:0}8%{opacity:1}34%{transform:translateY(180px) scaleY(1.15);opacity:1}38%{transform:translateY(196px) scale(1.5,.5);opacity:0}100%{transform:translateY(196px);opacity:0}}
.onde{position:absolute;left:calc(66% - 40px);top:calc(-4% + 210px);width:100px;height:100px;border-radius:50%;border:2px solid var(--fond);opacity:0;animation:onde 5.5s ease-out infinite}
@keyframes onde{0%,36%{transform:scale(.1);opacity:0}40%{opacity:.7}70%,100%{transform:scale(1.6);opacity:0}}
.scene--contact .goutte{left:calc(50% - 10px);top:-6%}
.scene--contact .onde{left:calc(50% - 50px);top:calc(-6% + 190px);border-color:var(--encre)}
/* L'objectif (vidéo) : la planète vue à travers une lentille */
.objectif{position:relative;width:86%;aspect-ratio:1;border-radius:50%;background:var(--grad);box-shadow:16px 16px 36px var(--ombre),-16px -16px 36px var(--lumiere);display:grid;place-items:center}
.objectif::before{content:"";position:absolute;inset:7%;border-radius:50%;box-shadow:var(--creux);background:repeating-conic-gradient(from 0deg,var(--trait) 0 2deg,transparent 2deg 10deg);-webkit-mask:radial-gradient(circle,transparent 66%,#000 67%);mask:radial-gradient(circle,transparent 66%,#000 67%);animation:bague 40s linear infinite}
@keyframes bague{to{transform:rotate(360deg)}}
.lentille{position:relative;width:66%;aspect-ratio:1;border-radius:50%;overflow:hidden;background:#000;box-shadow:inset 0 0 0 6px #050506,0 0 0 2px var(--trait),0 18px 40px -10px rgba(0,0,0,.6)}
.lentille img{width:100%;height:100%;object-fit:cover;animation:derive 22s ease-in-out infinite alternate}
@keyframes derive{from{transform:scale(1.15) rotate(0deg)}to{transform:scale(1.35) rotate(12deg)}}
.lentille::after{content:"";position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 30% 26%,rgba(255,255,255,.38),transparent 30%),radial-gradient(circle at 70% 80%,rgba(120,160,255,.16),transparent 40%);pointer-events:none}
.rec{position:absolute;top:8%;right:4%;display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;font-weight:800;font-size:.68rem;letter-spacing:.18em;color:var(--encre);background:var(--grad);box-shadow:var(--relief-s)}
.rec::before{content:"";width:9px;height:9px;border-radius:50%;background:#E5484D;animation:clignote 1.6s steps(2,start) infinite}
@keyframes clignote{to{visibility:hidden}}
/* Le radar (référencement) */
.radar{position:relative;width:88%;aspect-ratio:1;border-radius:50%;background:var(--grad);box-shadow:16px 16px 36px var(--ombre),-16px -16px 36px var(--lumiere);display:grid;place-items:center}
.radar-ecran{position:absolute;inset:9%;border-radius:50%;box-shadow:var(--creux);overflow:hidden;background:radial-gradient(circle,transparent 0 24%,var(--trait) 24.4% 25%,transparent 25.4% 49%,var(--trait) 49.4% 50%,transparent 50.4% 74%,var(--trait) 74.4% 75%,transparent 75.4%)}
.radar-ecran::before{content:"";position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 0deg,transparent 0 280deg,color-mix(in srgb,var(--encre) 26%,transparent) 360deg);animation:bague 5s linear infinite}
.radar .point{position:absolute;width:12px;height:12px;border-radius:50%;background:var(--encre);box-shadow:0 0 0 5px color-mix(in srgb,var(--encre) 14%,transparent);animation:ping 5s ease-out infinite}
.radar .point:nth-of-type(1){left:66%;top:28%;animation-delay:.6s}
.radar .point:nth-of-type(2){left:24%;top:62%;animation-delay:2.4s}
.radar .point:nth-of-type(3){left:70%;top:68%;animation-delay:3.6s}
@keyframes ping{0%,100%{transform:scale(.6);opacity:.35}8%{transform:scale(1.25);opacity:1}30%{transform:scale(1);opacity:.85}}
.radar-centre{position:relative;width:34%;aspect-ratio:1;border-radius:50%;background:var(--grad);box-shadow:var(--relief-s);display:grid;place-items:center}
.radar-centre svg{width:58%;height:auto;color:var(--encre)}
.pastille-n1{position:absolute;right:2%;bottom:12%;padding:10px 16px;border-radius:16px;font-weight:800;font-size:.78rem;color:var(--encre);background:var(--grad);box-shadow:var(--relief-s);animation:flotte 6s ease-in-out infinite}
.pastille-n1 small{display:block;font-weight:600;font-size:.7rem;color:var(--gris)}
@keyframes flotte{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}

/* ---------- Bandeau défilant ---------- */
.defile-cadre{overflow:hidden;padding:clamp(14px,2vw,26px) 0}
.defile{transform:rotate(-1.4deg);margin:0 -2%;padding:18px 0;background:var(--b-fond);color:var(--b-texte)}
.defile-piste{display:flex;align-items:center;gap:34px;width:max-content;animation:defile 36s linear infinite;font-weight:900;font-size:clamp(.95rem,1.35vw,1.2rem);letter-spacing:.14em;text-transform:uppercase;white-space:nowrap}
.defile-piste svg{width:14px;height:20px;fill:currentColor;opacity:.55;flex:none}
.defile:hover .defile-piste{animation-play-state:paused}
.defile--inverse{background:var(--p-fond);color:var(--p-texte)}
@keyframes defile{to{transform:translateX(-50%)}}

/* ---------- Tuiles : l'encre envahit la carte ---------- */
.tuiles{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2vw,28px)}
.tuile{position:relative;overflow:hidden;isolation:isolate;display:flex;flex-direction:column;gap:14px;min-height:300px;padding:34px 30px 30px;border-radius:30px;color:var(--texte);background:var(--grad);box-shadow:var(--relief);transition:color .45s var(--ease),transform .5s var(--ease)}
.tuile::before{content:"";position:absolute;z-index:-1;inset:-55%;border-radius:46% 54% 41% 59% / 52% 39% 61% 48%;background:var(--encre);transform:scale(0) rotate(-20deg);transform-origin:80% 80%;transition:transform .85s var(--ease)}
.tuile:hover::before,.tuile:focus-within::before,.tuile.encre::before{transform:scale(1) rotate(0)}
.tuile:hover,.tuile:focus-within,.tuile.encre{color:var(--fond);transform:translateY(-4px)}
.tuile h3{color:inherit;font-weight:800;font-size:1.22rem}
.tuile p{font-size:.98rem;line-height:1.65;opacity:.8}
.tuile-ico{width:58px;height:58px;flex:none;border-radius:18px;display:grid;place-items:center;box-shadow:var(--creux-s);transition:box-shadow .45s,transform .6s var(--ease)}
.tuile-ico svg{width:27px;height:27px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.tuile-ico img{width:40px;height:40px;filter:var(--picto)}
.tuile:hover .tuile-ico,.tuile:focus-within .tuile-ico,.tuile.encre .tuile-ico{box-shadow:inset 0 0 0 1.5px currentColor;transform:rotate(-8deg)}
.tuile:hover .tuile-ico img,.tuile:focus-within .tuile-ico img,.tuile.encre .tuile-ico img{filter:var(--picto-inv)}
.tuiles--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.tuiles--4 .tuile{min-height:280px}
.tuile-lien{margin-top:auto;padding-top:8px;display:inline-flex;align-items:center;gap:8px;font-weight:800;font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;text-decoration:none;color:inherit}
.tuile-lien::after{content:"";position:absolute;inset:0;border-radius:inherit}
.tuile-lien svg{width:16px;height:16px;transition:transform .35s var(--ease)}
.tuile:hover .tuile-lien svg,.tuile:focus-within .tuile-lien svg{transform:translateX(5px)}
.tuile-lien:focus-visible{outline:none}
.tuile:has(.tuile-lien:focus-visible){outline:2px solid var(--encre);outline-offset:4px}
.tuile--appel{background:var(--eg);color:var(--fond)}
.tuile--appel::before{background:var(--fond)}
.tuile--appel:hover,.tuile--appel:focus-within,.tuile--appel.encre{color:var(--encre)}
.tuile--appel .tuile-ico{box-shadow:inset 0 0 0 1.5px currentColor}
.tuile--large{grid-column:span 2}
/* Tuiles sur bande d'encre (accueil) */
.nuit .tuile{box-shadow:var(--relief)}

/* ---------- Hublot : un morceau d'espace et des cartes de verre ---------- */
.hublot{position:relative;overflow:hidden;isolation:isolate;border-radius:40px;background:#030304;color:#E9EBF1;padding:clamp(48px,6vw,88px) clamp(22px,4vw,64px) clamp(44px,5vw,72px);box-shadow:0 40px 80px -30px rgba(0,0,0,.55)}
html.sombre .hublot{box-shadow:0 0 0 1px rgba(255,255,255,.07),0 40px 80px -30px #000}
.hublot-etoiles{position:absolute;inset:0;z-index:-1;background-image:radial-gradient(1.2px 1.2px at 12% 18%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 32% 8%,#cfd3de 50%,transparent 51%),radial-gradient(1.4px 1.4px at 58% 22%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 76% 12%,#cfd3de 50%,transparent 51%),radial-gradient(1.2px 1.2px at 90% 28%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 22% 34%,#aab0bd 50%,transparent 51%),radial-gradient(1px 1px at 46% 40%,#fff 50%,transparent 51%),radial-gradient(1.3px 1.3px at 84% 46%,#cfd3de 50%,transparent 51%),radial-gradient(1px 1px at 6% 48%,#fff 50%,transparent 51%),radial-gradient(1.1px 1.1px at 66% 4%,#fff 50%,transparent 51%);animation:scintille 6s ease-in-out infinite alternate}
@keyframes scintille{from{opacity:.5}to{opacity:1}}
.hublot-planete{position:absolute;z-index:-1;left:-8%;width:116%;bottom:-6%;height:74%}
.hublot-planete img{width:100%;height:100%;object-fit:cover;object-position:50% 0%;animation:leve 24s ease-in-out infinite alternate}
@keyframes leve{from{transform:translateY(4%) scale(1.02)}to{transform:translateY(0) scale(1.07)}}
.hublot-planete::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#030304 0%,rgba(3,3,4,0) 30%,rgba(3,3,4,.35) 100%)}
.hublot h2{color:#F1F2F6;max-width:18ch}
.hublot .hublot-chapo{margin-top:16px;color:#B9BDC8;max-width:56ch;font-size:1.06rem}
.verres{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-top:clamp(36px,5vw,64px)}
.verres--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.verres--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.verre{position:relative;display:flex;flex-direction:column;gap:10px;padding:28px 26px;border-radius:26px;color:#F1F2F6;background:rgba(18,19,24,.42);border:1px solid rgba(255,255,255,.14);-webkit-backdrop-filter:blur(18px) saturate(1.25);backdrop-filter:blur(18px) saturate(1.25);box-shadow:inset 0 1px 0 rgba(255,255,255,.12);transition:transform .5s var(--ease),border-color .3s,background .3s}
.verre:hover{transform:translateY(-6px);border-color:rgba(255,255,255,.38);background:rgba(18,19,24,.58)}
.verre h3{font-weight:800;font-size:1.15rem;color:#fff}
.verre p{font-size:.96rem;line-height:1.6;color:#C3C7D1}
.verre .etiquette{align-self:flex-start;font-size:.74rem;font-weight:800;letter-spacing:.06em;color:#E9EBF1;border:1px solid rgba(255,255,255,.28);border-radius:999px;padding:6px 14px;margin-bottom:6px}
.verre-ico{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.25);transition:transform .5s var(--ease)}
.verre:hover .verre-ico{transform:rotate(-12deg) scale(1.08)}
.verre-ico svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.cadre-format{display:grid;place-items:center;height:118px;margin-bottom:8px}
.cadre-format span{display:grid;place-items:center;height:100%;aspect-ratio:var(--ar);max-width:100%;border-radius:10px;border:1.5px solid rgba(255,255,255,.55);background:linear-gradient(160deg,rgba(255,255,255,.1),rgba(255,255,255,.02));transition:transform .5s var(--ease)}
.cadre-format[data-ar="16-9"] span{height:auto;width:100%}
.verre:hover .cadre-format span{transform:scale(1.06)}
.cadre-format svg{width:22px;height:22px;fill:#fff;opacity:.85}
.verre .format{font-weight:900;font-size:1.5rem;letter-spacing:.04em;color:#fff}

/* ---------- Écrans (mockups) ---------- */
.ecran{position:relative}
.portable{position:relative}
.portable-cadre{position:relative;border-radius:16px 16px 6px 6px;padding:2.2% 2.2% 3%;background:linear-gradient(160deg,#2b2c31,#0c0c0e);box-shadow:0 30px 60px -20px rgba(0,0,0,.45),inset 0 0 0 1px rgba(255,255,255,.06)}
.portable-cadre::before{content:"";position:absolute;top:.9%;left:50%;width:5px;height:5px;margin-left:-2.5px;border-radius:50%;background:#3a3c42}
.portable-ecran{position:relative;aspect-ratio:16/10;overflow:hidden;border-radius:4px;background:#111}
.portable-ecran img{width:100%;height:100%;object-fit:cover;object-position:50% 0%;transition:object-position 7s cubic-bezier(.45,0,.2,1)}
.portable-socle{position:relative;height:clamp(10px,1.4vw,18px);margin:0 -4%;border-radius:0 0 18px 18px;background:linear-gradient(180deg,#d9dbe2,#9fa2ac);box-shadow:0 18px 30px -12px rgba(0,0,0,.4)}
.portable-socle::before{content:"";position:absolute;top:0;left:50%;width:16%;height:38%;transform:translateX(-50%);border-radius:0 0 10px 10px;background:#b6b9c2}
.telephone{position:absolute;right:-2%;bottom:-6%;width:22%;border-radius:14% / 6.5%;padding:2.2%;background:linear-gradient(160deg,#2b2c31,#0b0b0d);box-shadow:0 26px 50px -16px rgba(0,0,0,.55),inset 0 0 0 1px rgba(255,255,255,.07)}
.telephone-ecran{aspect-ratio:390/844;overflow:hidden;border-radius:11% / 5.2%;background:#111}
.telephone-ecran img{width:100%;height:100%;object-fit:cover;object-position:50% 0%}
a.ecran-lien:hover .portable-ecran img,a.ecran-lien:focus-visible .portable-ecran img,.ecran:hover .portable-ecran img{object-position:50% 100%}
.ecran-lien{display:block;text-decoration:none}
.nuit .portable-cadre{box-shadow:0 30px 60px -20px rgba(0,0,0,.6),0 0 0 1px var(--trait),inset 0 0 0 1px rgba(255,255,255,.06)}

/* ---------- Carrousel des réalisations ---------- */
.reals{padding:clamp(36px,5vw,72px) 0 clamp(36px,4vw,56px)}
.reals-tete{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:20px 40px}
.reals-tete p{margin-top:14px;color:var(--gris);max-width:56ch}
.carrousel-nav{display:flex;gap:14px}
.carrousel-piste{display:grid;grid-auto-flow:column;grid-auto-columns:max(290px,44%);gap:clamp(24px,3.4vw,48px);overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:var(--pad);padding:48px var(--pad) 30px;margin:0 calc(-1 * var(--pad));scrollbar-width:thin;scrollbar-color:var(--gris) transparent;cursor:grab}
.carrousel-piste.glisse{cursor:grabbing;scroll-snap-type:none;scroll-behavior:auto}
.carrousel-piste.glisse a{pointer-events:none}
.carrousel-piste img{-webkit-user-drag:none;user-select:none}
.carte-real{scroll-snap-align:start}
.carte-real .portable{margin-bottom:26px}
.carte-real h3{font-size:1.25rem}
.carte-real p{margin-top:4px;color:var(--gris)}
.reals-pied{display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between;margin-top:18px}
.reals-pied .indice{font-size:.9rem;color:var(--gris)}

/* ---------- Formules (sur devis) ---------- */
.formules{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2.4vw,30px)}
.formule{position:relative;display:flex;flex-direction:column;padding:clamp(28px,3vw,40px);border-radius:var(--r-l);background:var(--grad);box-shadow:var(--relief);transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.formule:hover{transform:translateY(-6px)}
.formule-etoile{position:absolute;top:24px;right:24px;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;box-shadow:var(--creux-s)}
.formule-etoile svg{width:14px;height:20px;fill:var(--encre);transition:transform .8s var(--ease)}
.formule:hover .formule-etoile svg{transform:rotate(180deg) scale(1.15)}
.formule h3{font-weight:900;text-transform:uppercase;letter-spacing:.12em;font-size:.95rem;padding-right:56px}
.formule .pour{margin-top:8px;color:var(--gris);font-size:.95rem;padding-right:40px}
.formule ul{list-style:none;margin:24px 0 28px;display:flex;flex-direction:column;gap:12px}
.formule li{position:relative;padding-left:30px;font-size:.98rem}
.formule li::before{content:"";position:absolute;left:0;top:.42em;width:16px;height:16px;border-radius:50%;box-shadow:var(--creux-s)}
.formule li::after{content:"";position:absolute;left:5px;top:calc(.42em + 4px);width:6px;height:4px;border-left:2px solid var(--encre);border-bottom:2px solid var(--encre);transform:rotate(-45deg)}
.formule .prix{margin-top:auto;font-weight:800;font-size:1.05rem;color:var(--encre)}
.formule .prix span{display:block;font-weight:500;font-size:.85rem;color:var(--gris)}
.formule .btn{margin-top:20px;align-self:flex-start}

/* ---------- Méthode : un trait d'encre relie les étapes ---------- */
.etapes{--g:clamp(18px,2.4vw,32px);position:relative;list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--g);counter-reset:etape}
.etapes::before,.etapes::after{content:"";position:absolute;left:24px;right:calc((100% - 3 * var(--g)) / 4 - 24px);top:22px;height:4px;border-radius:4px}
.etapes::before{box-shadow:inset 1px 1px 2px var(--ombre),inset -1px -1px 2px var(--lumiere)}
.etapes::after{background:var(--encre);transform-origin:left;transition:transform 1.8s cubic-bezier(.65,0,.35,1) .2s}
.js .etapes:not(.vu)::after{transform:scaleX(0)}
.etape{position:relative}
.etape::before{counter-increment:etape;content:counter(etape);position:relative;z-index:1;display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:var(--grad);box-shadow:var(--relief-s);font-weight:900;font-size:.95rem;color:var(--encre);margin-bottom:22px;transition:background .4s,color .4s}
.etapes.vu .etape::before{animation:pointEncre .6s var(--ease) both}
.etapes.vu .etape:nth-child(1)::before{animation-delay:.25s}
.etapes.vu .etape:nth-child(2)::before{animation-delay:.8s}
.etapes.vu .etape:nth-child(3)::before{animation-delay:1.35s}
.etapes.vu .etape:nth-child(4)::before{animation-delay:1.9s}
@keyframes pointEncre{from{background:var(--grad);color:var(--encre)}to{background:var(--encre);color:var(--fond)}}
.etape h3{margin-bottom:8px}
.etape p{color:var(--gris);font-size:.98rem}

/* ---------- FAQ ---------- */
.faq{border-radius:var(--r-l);padding:clamp(6px,1vw,12px) clamp(22px,3vw,40px);box-shadow:var(--creux)}
.faq details+details{border-top:1px solid var(--trait);box-shadow:inset 0 1px 0 var(--trait2)}
.faq summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:24px 0;cursor:pointer;font-weight:700;font-size:1.06rem;color:var(--encre)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:34px;height:34px;border-radius:50%;background:linear-gradient(var(--encre),var(--encre)) center/12px 2px no-repeat,linear-gradient(var(--encre),var(--encre)) center/2px 12px no-repeat,var(--grad);box-shadow:var(--relief-s);transition:transform .3s var(--ease)}
.faq details[open] summary::after{background:linear-gradient(var(--encre),var(--encre)) center/12px 2px no-repeat,var(--grad);transform:rotate(180deg)}
.faq .reponse{padding:0 0 26px;color:var(--gris);max-width:70ch}
.faq .reponse p+p{margin-top:.8em}

/* ---------- Bande d'appel : le bord de la planète ---------- */
.appel{--pb:clamp(150px,17vw,240px);position:relative;overflow:hidden;isolation:isolate;padding-bottom:var(--pb)!important}
.appel-planete{position:absolute;z-index:-1;left:-10%;width:120%;top:calc(100% - var(--pb) + 34px - 13.4vw);height:auto}
.appel-planete img{width:100%;height:auto;opacity:.92;-webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 13%);mask-image:linear-gradient(to bottom,transparent 0%,#000 13%)}
.appel::before{content:"";position:absolute;z-index:-1;right:-12%;top:-34%;width:58%;aspect-ratio:1;background:var(--fond-haut);opacity:.55;border-radius:42% 58% 63% 37% / 41% 44% 56% 59%;animation:morph 18s ease-in-out infinite}
.appel-grille{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:clamp(32px,5vw,80px);align-items:end}
.appel .titre-appel{font-weight:900;text-transform:uppercase;letter-spacing:.04em;line-height:1.05;font-size:clamp(2rem,4.6vw,3.8rem);color:var(--encre);text-wrap:balance}
.appel p{margin-top:18px;color:var(--gris);max-width:52ch}
.appel-actions{display:flex;flex-direction:column;gap:14px;align-items:stretch}
.appel-actions .btn{width:100%}

/* ---------- Pied de page ---------- */
.pied{padding:clamp(56px,7vw,88px) 0 40px;font-size:.95rem;color:var(--gris);border-top:1px solid var(--trait)}
.pied-grille{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));gap:clamp(28px,4vw,56px)}
.pied-adresse{font-style:normal;margin-top:20px;line-height:1.9}
.pied-adresse a{text-decoration:none;color:var(--texte)}
.pied-adresse a:hover{text-decoration:underline}
.pied h2{font-size:.72rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--texte);margin-bottom:16px}
.pied ul{list-style:none;display:flex;flex-direction:column;gap:9px}
.pied ul a,.pied ul button{text-decoration:none;color:var(--gris);text-align:left;font-size:.95rem;padding:0}
.pied ul a:hover,.pied ul button:hover{color:var(--texte)}
.pied-bas{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;margin-top:clamp(40px,5vw,64px);padding-top:26px;border-top:1px solid var(--trait);font-size:.85rem}
.pied-reseaux{display:flex;gap:12px;margin-top:22px}
.pied-reseaux .rond{width:42px;height:42px}
.pied-reseaux .rond svg{width:18px;height:18px}

/* ---------- Page réalisations ---------- */
.projet{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:clamp(36px,6vw,88px);align-items:center;padding:clamp(56px,8vw,110px) 0}
.projet+.projet{border-top:1px solid var(--trait);box-shadow:inset 0 1px 0 var(--trait2)}
.projet--inverse{grid-template-columns:minmax(0,1fr) minmax(0,1.45fr)}
.projet--inverse .projet-visuel{order:2}
.projet-visuel{padding-bottom:6%}
.projet-num{display:inline-flex;align-items:center;gap:10px;font-weight:800;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gris);margin-bottom:14px}
.projet-num span{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--grad);box-shadow:var(--relief-s);color:var(--encre);letter-spacing:0}
.projet h2{font-size:clamp(1.6rem,2.8vw,2.3rem)}
.projet .lieu{margin-top:6px;font-weight:600;color:var(--gris)}
.projet .texte{margin-top:20px;color:var(--gris)}
.pastilles{list-style:none;display:flex;flex-wrap:wrap;gap:10px;margin:24px 0 30px}
.pastilles li{font-size:.82rem;font-weight:700;padding:7px 15px;border-radius:999px;box-shadow:var(--creux-s)}

/* ---------- Contact ---------- */
.contact-grille{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(28px,4vw,56px);align-items:start}
.panneau{border-radius:var(--r-l);padding:clamp(26px,3.4vw,46px);background:var(--grad);box-shadow:var(--relief)}
.form{display:flex;flex-direction:column;gap:22px}
.form-ligne{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.champ{display:flex;flex-direction:column;gap:9px}
.champ label{font-weight:700;font-size:.9rem;color:var(--encre)}
.champ label .opt{font-weight:500;color:var(--gris)}
.saisie{width:100%;font:inherit;font-size:1rem;color:var(--encre);background:var(--fond);border:none;outline:none;border-radius:16px;padding:15px 20px;box-shadow:var(--creux-s);transition:box-shadow .25s}
.saisie::placeholder{color:var(--gris);opacity:.85}
.saisie:focus{box-shadow:inset 5px 5px 10px var(--ombre),inset -5px -5px 10px var(--lumiere),0 0 0 2px var(--encre)}
select.saisie{appearance:none;-webkit-appearance:none;cursor:pointer;background-image:linear-gradient(45deg,transparent 50%,var(--encre) 50%),linear-gradient(135deg,var(--encre) 50%,transparent 50%);background-position:calc(100% - 24px) 52%,calc(100% - 18px) 52%;background-size:6px 6px;background-repeat:no-repeat;padding-right:48px}
input[type="date"].saisie{color-scheme:inherit}
textarea.saisie{min-height:150px;resize:vertical}
.pot-de-miel{position:absolute!important;left:-10000px!important;width:1px;height:1px;overflow:hidden}
.form-bas{display:flex;flex-wrap:wrap;gap:20px;align-items:center;justify-content:space-between}
.form-rgpd{font-size:.85rem;color:var(--gris);max-width:60ch}
.alerte{border-radius:16px;padding:18px 22px;font-weight:600;box-shadow:var(--creux-s)}
.alerte--erreur{color:#B42318}
html.sombre .alerte--erreur{color:#FF8A80}
.succes{display:flex;flex-direction:column;align-items:flex-start;gap:18px}
.succes .coche{width:58px;height:58px;border-radius:50%;display:grid;place-items:center;box-shadow:var(--relief-s);font-weight:900;font-size:1.4rem;color:var(--encre)}
.direct{display:flex;flex-direction:column;gap:14px}
.direct a{display:flex;align-items:center;gap:16px;text-decoration:none;padding:16px 20px;border-radius:20px;background:var(--grad);box-shadow:var(--relief-s);transition:box-shadow .3s var(--ease)}
.direct a:hover{box-shadow:var(--creux-s)}
.direct .ico{flex:none;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;box-shadow:var(--creux-s)}
.direct .ico svg{width:20px;height:20px}
.direct small{display:block;color:var(--gris);font-size:.82rem;font-weight:600}
.direct span.val{font-weight:800;color:var(--encre)}
.zone{margin-top:26px;color:var(--gris);font-size:.95rem}
.suite{list-style:none;counter-reset:s;margin-top:30px;display:flex;flex-direction:column;gap:16px}
.suite li{position:relative;padding-left:52px;color:var(--gris);font-size:.96rem}
.suite li strong{display:block;color:var(--encre)}
.suite li::before{counter-increment:s;content:counter(s);position:absolute;left:0;top:2px;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font-weight:900;font-size:.85rem;color:var(--encre);box-shadow:var(--relief-s);background:var(--grad)}

/* ---------- Pages légales ---------- */
.legal-grille{display:grid;grid-template-columns:240px minmax(0,1fr);gap:clamp(32px,5vw,72px);align-items:start}
.sommaire{position:sticky;top:110px;border-radius:var(--r-m);padding:22px 24px;box-shadow:var(--creux);font-size:.9rem}
.sommaire p{font-weight:800;color:var(--encre);margin-bottom:10px}
.sommaire ol{list-style:none;display:flex;flex-direction:column;gap:8px}
.sommaire a{text-decoration:none;color:var(--gris)}
.sommaire a:hover{color:var(--encre);text-decoration:underline}
.legal{max-width:74ch}
.legal section{padding-bottom:36px;margin-bottom:36px;border-bottom:1px solid var(--trait);box-shadow:0 1px 0 var(--trait2)}
.legal section:last-child{border-bottom:none;box-shadow:none}
.legal h2{font-size:clamp(1.3rem,2.2vw,1.6rem);margin-bottom:16px}
.legal h3{font-size:1.05rem;margin:22px 0 8px}
.legal p,.legal li{color:var(--gris)}
.legal p+p{margin-top:.9em}
.legal ul{margin:12px 0 0 1.2em;display:flex;flex-direction:column;gap:6px}
.legal dl{display:grid;grid-template-columns:minmax(150px,auto) minmax(0,1fr);gap:10px 24px}
.legal dt{font-weight:700;color:var(--encre)}
.legal dd{color:var(--gris)}
.a-completer{background:#fff3c4;color:#5a4500;font-weight:700;padding:1px 6px;border-radius:6px}
.tableau{width:100%;border-collapse:collapse;font-size:.93rem;margin-top:14px}
.tableau th,.tableau td{text-align:left;padding:12px 10px;vertical-align:top;border-bottom:1px solid var(--trait)}
.tableau th{font-weight:800;color:var(--encre)}
.tableau td{color:var(--gris)}
.maj{margin-top:10px;font-size:.9rem;color:var(--gris)}
.table-defile{overflow-x:auto}

/* ---------- Bouton WhatsApp flottant ---------- */
.wa{position:fixed;right:clamp(14px,2.4vw,28px);bottom:clamp(14px,2.4vw,28px);z-index:150;width:58px;height:58px;border-radius:50%;display:grid;place-items:center;background:var(--p-eg);color:var(--p-fond);box-shadow:6px 6px 16px var(--p-ombre),-5px -5px 12px var(--p-lum),inset 1px 1px 1px rgba(255,255,255,.1);transition:transform .2s,box-shadow .3s}
.wa:hover{transform:scale(1.06)}
.wa svg{width:28px;height:28px}
.wa-bulle{position:absolute;right:70px;top:50%;transform:translateY(-50%);white-space:nowrap;background:var(--p-encre);color:var(--p-fond);font-size:.8rem;font-weight:700;padding:8px 14px;border-radius:999px;opacity:0;pointer-events:none;transition:opacity .2s}
.wa:hover .wa-bulle,.wa:focus-visible .wa-bulle{opacity:1}
body.menu-ouvert .wa{display:none}

/* ---------- Gestion des cookies ---------- */
.ck{position:fixed;left:0;right:0;bottom:0;z-index:300;display:flex;justify-content:center;padding:16px;pointer-events:none}
.ck-carte{pointer-events:auto;width:100%;max-width:960px;border-radius:26px;padding:24px 28px;background:var(--grad);box-shadow:12px 12px 30px var(--ombre),-10px -10px 26px var(--lumiere);display:flex;flex-wrap:wrap;gap:20px 28px;align-items:center}
.ck-txt{flex:1 1 360px;font-size:.92rem;color:var(--gris)}
.ck-txt strong{display:block;font-size:1rem;margin-bottom:6px}
.ck-actions{display:flex;flex-wrap:wrap;gap:12px}
.ck-modal{position:fixed;inset:0;z-index:310;display:grid;place-items:center;padding:16px;background:rgba(10,10,10,.45)}
.ck-boite{width:100%;max-width:600px;max-height:90vh;overflow:auto;border-radius:28px;padding:30px;background:var(--fond);box-shadow:0 30px 80px rgba(0,0,0,.35)}
.ck-boite h2{font-size:1.4rem}
.ck-boite > p{margin-top:10px;color:var(--gris);font-size:.95rem}
.ck-cat{margin-top:20px;padding:18px 20px;border-radius:18px;box-shadow:var(--creux-s);display:flex;gap:18px;justify-content:space-between;align-items:flex-start}
.ck-cat h3{font-size:1rem}
.ck-cat p{font-size:.88rem;color:var(--gris);margin-top:4px}
.ck-etat{font-size:.8rem;font-weight:800;white-space:nowrap;color:var(--gris)}
.interrupteur{position:relative;flex:none;width:54px;height:30px}
.interrupteur input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer;z-index:1}
.interrupteur span{position:absolute;inset:0;border-radius:999px;box-shadow:var(--creux-s);transition:background .25s}
.interrupteur span::after{content:"";position:absolute;top:4px;left:4px;width:22px;height:22px;border-radius:50%;background:var(--grad);box-shadow:2px 2px 5px var(--ombre),-2px -2px 5px var(--lumiere);transition:transform .25s var(--ease)}
.interrupteur input:checked+span{background:var(--encre)}
.interrupteur input:checked+span::after{transform:translateX(24px)}
.interrupteur input:focus-visible+span{outline:2px solid var(--encre);outline-offset:3px}
.ck-boite .ck-actions{margin-top:24px}

/* ---------- Page 404 ---------- */
.p404{overflow-x:clip;min-height:72vh;display:grid;place-items:center;text-align:center;padding:40px 0 80px}
.p404 .scene{width:min(70vw,300px);margin-bottom:10px}
.p404 .chapo{margin:20px auto 0}
.p404 .hero-actions{justify-content:center}

/* ---------- Apparition au défilement ---------- */
.attente{opacity:0}
.attente.vu{animation:apparait .9s var(--ease) var(--d,0s) both}
@keyframes apparait{from{opacity:0;translate:0 30px}to{opacity:1;translate:0 0}}

/* ---------- Responsive ---------- */
@media (max-width:1180px){
  .hdr-nav,.hdr-wa,.hdr-cta{display:none}
  .burger{display:grid}
  .hdr-act{margin-left:auto}
}
@media (max-width:1100px){
  .verres--4,.tuiles--4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:980px){
  .hero-grille,.contact-grille,.appel-grille,.projet,.projet--inverse,.legal-grille,.tete-ligne{grid-template-columns:minmax(0,1fr)}
  .hero-grille .scene{order:-1;width:min(66vw,300px)}
  .sommaire{position:static}
  .tuiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tuile--large{grid-column:auto}
  .formules{grid-template-columns:minmax(0,1fr)}
  .etapes{grid-template-columns:repeat(2,minmax(0,1fr))}
  .etapes::before,.etapes::after{display:none}
  .projet--inverse .projet-visuel{order:0}
  .pied-grille{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pied-grille > div:first-child{grid-column:1/-1}
  .carrousel-piste{grid-auto-columns:max(280px,72%)}
}
@media (min-width:621px) and (max-width:980px){
  .formule ul{display:grid;grid-template-columns:1fr 1fr;column-gap:28px}
  .formule .btn{align-self:flex-start}
}
@media (max-width:720px){
  body{font-size:1rem}
  .tuiles,.verres{grid-template-columns:minmax(0,1fr)!important}
  .tuile{min-height:0;padding:28px 24px 26px}
  .etapes{grid-template-columns:minmax(0,1fr);gap:26px}
  .etapes::before,.etapes::after{display:block;left:22px;right:auto;top:24px;bottom:24px;width:4px;height:auto}
  .etapes::after{transform-origin:top}
  .js .etapes:not(.vu)::after{transform:scaleY(0)}
  .etape{display:grid;grid-template-columns:48px minmax(0,1fr);column-gap:20px}
  .etape::before{grid-row:span 2;margin-bottom:0}
  .form-ligne{grid-template-columns:minmax(0,1fr)}
  .hero-actions .btn{flex:1 1 100%}
  .legal dl{grid-template-columns:minmax(0,1fr);gap:2px 0}
  .legal dd{margin-bottom:10px}
  .ck-actions{width:100%}
  .ck-actions .btn{flex:1 1 auto}
  .wa{width:52px;height:52px}
  .hublot{border-radius:28px;margin:0 calc(-1 * var(--pad) + 8px)}
  .hublot-planete{height:52%}
  .carrousel-piste{grid-auto-columns:86%}
  .reals-tete .carrousel-nav{display:none}
}
@media (max-width:480px){
  .titre-page{font-size:clamp(1.6rem,8.6vw,2.2rem)}
  .titre-page--long{font-size:7vw}
  .hdr-in{height:68px;gap:10px}
  .theme{width:58px;height:34px}
  .theme-bille{width:26px;height:26px}
  html.sombre .theme-bille{transform:translateX(24px)}
  .rond{width:44px;height:44px}
}
@media (max-width:420px){
  .btn{white-space:normal;text-align:center;line-height:1.35;padding:12px 24px}
  .pied-grille{grid-template-columns:minmax(0,1fr)}
  .logo{font-size:.82rem;letter-spacing:.12em;gap:9px}
  .logo svg{width:20px;height:29px}
}
@media (hover:none){
  .defile:hover .defile-piste{animation-play-state:running}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .attente{opacity:1}
}