/* Multimédia Concept - feuille commune du site statique
   Piste « Faisceaux » (maquette v2-1 du 02/11/2026) : la nuit, une seule source de lumière turquoise.
   Le vert #42c5bf ne sert qu'à la lumière et à l'action principale, sur fond sombre.
   Sur fond clair, le texte d'accent utilise --accent-ink (#13706b), contraste AA.
   Animations au défilement : uniquement sous @supports (animation-timeline), avec repli statique complet.
   Aucun style inline dans les pages (CSP style-src 'self'). */

/* ---------- Polices (auto-hébergées, voir MEDIAS_A_FOURNIR.md) ---------- */
@font-face{font-family:"Montserrat";font-style:normal;font-weight:100 900;font-display:swap;src:url("/assets/fonts/montserrat-latin-var.woff2") format("woff2")}

:root{
  --night:#090c0d; --night-2:#0f1415; --night-3:#141b1c;
  --fg:#eef3f2; --muted:#93a4a2; --dim:#5d6b6a; --dim-text:#8a9a98; --line:rgba(255,255,255,.08);
  --accent:#42c5bf; --accent-glow:rgba(66,197,191,.55);
  --paper:#eef3f2; --ink:#0f1a1a; --ink-muted:#3d4a49; --accent-ink:#13706b;
  --ok:#42c5bf; --err:#ff8a7a;
  --font:"Montserrat","Segoe UI",system-ui,-apple-system,sans-serif;
  --step--1:clamp(.8rem,.77rem + .15vw,.9rem);
  --step-0:clamp(1rem,.96rem + .2vw,1.1rem);
  --step-1:clamp(1.2rem,1.1rem + .5vw,1.45rem);
  --step-2:clamp(1.6rem,1.2rem + 1.8vw,2.6rem);
  --step-3:clamp(2.2rem,1.4rem + 3.6vw,4.6rem);
  --step-hero:clamp(2.8rem,1.4rem + 5.2vw,6.8rem);
  --gut:max(16px, env(safe-area-inset-left, 0px));
  --gut-r:max(16px, env(safe-area-inset-right, 0px));
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--night);color:var(--fg);font-family:var(--font);font-size:var(--step-0);line-height:1.6;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:40;background:var(--night)}
img,video,svg{max-width:100%}
img,video{height:auto;display:block}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}
.light :focus-visible{outline-color:var(--accent-ink)}
.wrap{width:100%;max-width:1320px;margin-inline:auto;padding-left:var(--gut);padding-right:var(--gut-r)}
.wrap.narrow{max-width:900px}
h1,h2,h3{text-wrap:balance;margin:0;font-weight:inherit}
p{margin:0}
.sr-only{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:var(--gut);top:-60px;z-index:60;background:var(--accent);color:var(--night);padding:10px 16px;border-radius:6px;font-weight:700;text-decoration:none}
.skip:focus{top:calc(env(safe-area-inset-top,0px) + 10px)}
[hidden]{display:none!important}

/* ---------- Fil de faisceaux sur toute la page ---------- */
.thread{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.55}
.thread svg{position:absolute;right:-20vw;top:-10vh;width:120vw;height:130vh}
.thread line{stroke:var(--accent);stroke-width:1;vector-effect:non-scaling-stroke}
.thread line:nth-child(1){stroke-opacity:.10}
.thread line:nth-child(2){stroke-opacity:.07}
.thread line:nth-child(3),.thread line:nth-child(4){stroke-opacity:.05}
@supports (animation-timeline: scroll()){
  .thread svg{animation:sweep linear both;animation-timeline:scroll(root)}
  @keyframes sweep{from{rotate:-6deg}to{rotate:14deg}}
}
main,header,footer{position:relative;z-index:1}

/* ---------- En-tête ---------- */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:30;background:rgba(9,12,13,.92);border-bottom:1px solid var(--line)}
@supports (backdrop-filter:blur(1px)){@media (min-width:821px){.top{background:rgba(9,12,13,.7);backdrop-filter:blur(12px)}}}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:12px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-weight:600;letter-spacing:.14em;font-size:.74rem;text-transform:uppercase}
.brand img{width:38px;height:auto}
.nav{display:flex;flex-wrap:wrap;align-items:center;gap:4px clamp(12px,2.2vw,30px);font-size:.9rem;font-weight:500;letter-spacing:.04em}
.nav-tel{display:none}
html.menu-ouvert{overflow:hidden}
.nav a{text-decoration:none;color:var(--muted);transition:color .2s}
.nav a:hover,.nav a:focus-visible,.nav a[aria-current]{color:var(--fg)}
.nav a[aria-current]{text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:6px}
/* Contact : bouton neutre au repos (rien ne doit paraître sélectionné), turquoise au survol et au focus seulement */
.nav .cta-mini{background:transparent;border:1px solid rgba(255,255,255,.28);padding:5px 14px;border-radius:999px;transition:color .2s,border-color .2s}
.nav .cta-mini:hover,.nav .cta-mini:focus-visible{color:var(--accent);border-color:var(--accent)}
.menu-btn,.menu-close{display:none;background:none;border:1px solid var(--line);color:var(--fg);font:inherit;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;padding:0 18px;min-height:44px;min-width:44px;align-items:center;justify-content:center;border-radius:999px;cursor:pointer;text-decoration:none}
/* Menu mobile : sans JS, le lien « Menu » cible #nav et :target ouvre le panneau ; avec JS, classe .open */
@media (max-width:820px){
  .menu-btn{display:inline-flex;position:relative;z-index:1}
  .brand{position:relative;z-index:1}
  .nav{display:none}
  /* Panneau plein écran opaque, sous la barre (logo et bouton « Fermer » restent au-dessus) */
  .nav:target,.nav.open{display:flex;position:fixed;inset:0;z-index:-1;flex-direction:column;align-items:stretch;gap:0;background:var(--night);overflow-y:auto;padding:calc(env(safe-area-inset-top,0px) + 84px) var(--gut-r) 32px var(--gut);animation:nav-entree .18s ease-out both}
  @keyframes nav-entree{from{opacity:0;transform:translateY(-8px)}}
  .nav:target a,.nav.open a{padding:14px 0;min-height:44px;border-bottom:1px solid var(--line);font-size:1.15rem}
  .nav:target .nav-tel,.nav.open .nav-tel{display:block;order:9;margin-top:18px;border-bottom:0;color:var(--accent);font-weight:600}
  .nav:target .cta-mini,.nav.open .cta-mini{text-align:center;margin-top:14px;border:1px solid rgba(255,255,255,.28);padding:12px 14px}
  .nav:target .menu-close{display:block;margin-top:12px;text-align:center}
  .nav.open .menu-close{display:none}
}

/* ---------- Ouverture (accueil) ---------- */
.hero{position:relative;isolation:isolate;overflow:hidden;min-height:min(92svh,980px);display:flex;align-items:flex-end;padding-block:clamp(40px,8vw,96px)}
/* Cadrage (revue du 05/11/2026) : logo entier à toutes les largeurs, calé sur le bord droit de la colonne
   de contenu ; largeur bornée aussi par la hauteur d'écran (logo de ratio 331,4/210,4 = 1,575). */
.mono{position:absolute;z-index:-1;top:46%;right:max(var(--gut-r),calc((100% - 1320px) / 2 + 16px));width:min(66vw,1000px);width:min(66vw,1000px,calc((92svh - 120px) * 1.575));translate:0 -50%;color:var(--fg);pointer-events:none}
.mono svg{width:100%;height:auto;overflow:visible;display:block}
/* Animation d'ouverture B3 (validée par Florian le 06/11/2026, horaires revus le 06/11/2026), environ 4,6 s,
   transform et opacity (plus stroke-dashoffset pour le tracé des contours). L'état de base de chaque élément
   est l'état final : en mouvement réduit, ou après un clic, une touche ou un défilement (classe .fin posée par
   site.js), le logo et le texte s'affichent directement. L'animation se joue à chaque chargement de l'accueil.
   1) 0,1 - 3,2 s : faisceaux dans le noir (2 couches), seuls jusqu'à 0,6 s, balayage de 2 s puis extinction ;
   2) 0,6 - 3,1 s : tracé lent des contours de M et C (1,9 s, fin vers 2,5 - 2,65 s), puis remplissage en fondu ;
   3) 2,5 - 3,6 s : accroche, H1 et boutons en fondu ascendant, à la fin du tracé ;
   4) 2,7 - 4,6 s : en parallèle, rayons m1-m6 et c1-c8 un par un depuis le point focal, puis halo léger qui se stabilise. */
.ouverture .lettres{opacity:.22}
.ouverture .mono svg *{transform-box:view-box;transform-origin:330.1px 207.3px}
.ouverture .foyer{fill:var(--accent);animation:ouv-foyer .5s cubic-bezier(.2,.8,.2,1) .1s both}
@keyframes ouv-foyer{from{opacity:0;transform:scale(.2)}}
.ouverture .faisceaux{position:absolute;inset:0;opacity:0;animation:ouv-faisceaux 3s linear .2s both}
.ouverture .faisceaux svg{position:absolute;left:0;top:0;width:100%;height:auto;overflow:visible;transform-origin:99.61% 98.53%}
/* will-change seulement pendant le balayage (classe .anime posée puis retirée par site.js) */
.ouverture.anime .faisceaux{will-change:opacity}
.ouverture.anime .faisceaux svg{will-change:transform}
@keyframes ouv-faisceaux{0%{opacity:0}10%{opacity:1}55%{opacity:.9}100%{opacity:0}}
.ouverture .couche{animation:ouv-balayage 2s cubic-bezier(.45,.05,.35,1) both}
.ouverture .couche.coeur{animation-delay:.2s}
.ouverture .couche.large{animation-delay:.3s}
@keyframes ouv-balayage{from{transform:rotate(50deg)}to{transform:rotate(-25deg)}}
.ouverture .contour{opacity:0;animation:ouv-contour 2.6s linear .6s both}
@keyframes ouv-contour{0%,75%{opacity:1}100%{opacity:0}}
.ouverture .contour path{stroke-width:.6;stroke-dasharray:1;stroke-dashoffset:0;animation:ouv-trace 1.9s cubic-bezier(.45,0,.25,1) .6s both}
.ouverture .contour path+path{animation-delay:.75s}
@keyframes ouv-trace{from{stroke-dashoffset:1}}
.ouverture .plein{animation:ouv-plein .8s ease-out 2.3s both}
@keyframes ouv-plein{from{opacity:0}}
.ouverture .rayons path{animation:ouv-rayon .45s cubic-bezier(.2,.8,.2,1) both}
.ouverture .eclats path{opacity:0;animation:ouv-eclat .5s ease-out both}
@keyframes ouv-rayon{from{opacity:0;transform:scale(.92)}}
@keyframes ouv-eclat{0%{opacity:0}35%{opacity:.8}100%{opacity:0}}
.ouverture .rayons path:nth-child(1),.ouverture .eclats path:nth-child(1){animation-delay:2.70s}
.ouverture .rayons path:nth-child(2),.ouverture .eclats path:nth-child(2){animation-delay:2.78s}
.ouverture .rayons path:nth-child(3),.ouverture .eclats path:nth-child(3){animation-delay:2.85s}
.ouverture .rayons path:nth-child(4),.ouverture .eclats path:nth-child(4){animation-delay:2.93s}
.ouverture .rayons path:nth-child(5),.ouverture .eclats path:nth-child(5){animation-delay:3.00s}
.ouverture .rayons path:nth-child(6),.ouverture .eclats path:nth-child(6){animation-delay:3.08s}
.ouverture .rayons path:nth-child(7),.ouverture .eclats path:nth-child(7){animation-delay:3.15s}
.ouverture .rayons path:nth-child(8),.ouverture .eclats path:nth-child(8){animation-delay:3.23s}
.ouverture .rayons path:nth-child(9),.ouverture .eclats path:nth-child(9){animation-delay:3.30s}
.ouverture .rayons path:nth-child(10),.ouverture .eclats path:nth-child(10){animation-delay:3.38s}
.ouverture .rayons path:nth-child(11),.ouverture .eclats path:nth-child(11){animation-delay:3.45s}
.ouverture .rayons path:nth-child(12),.ouverture .eclats path:nth-child(12){animation-delay:3.53s}
.ouverture .rayons path:nth-child(13),.ouverture .eclats path:nth-child(13){animation-delay:3.60s}
.ouverture .rayons path:nth-child(14),.ouverture .eclats path:nth-child(14){animation-delay:3.68s}
.ouverture .halo{opacity:.28;animation:ouv-halo .7s ease-out 3.9s both}
@keyframes ouv-halo{0%{opacity:0;transform:scale(.6)}60%{opacity:.45}100%{opacity:.28;transform:scale(1)}}
.ouverture .hook,.ouverture .h1,.ouverture .ctas{animation:ouv-monte .75s cubic-bezier(.2,.8,.2,1) both}
.ouverture .hook{animation-delay:2.5s}
.ouverture .h1{animation-delay:2.7s}
.ouverture .ctas{animation-delay:2.85s}
@keyframes ouv-monte{from{opacity:0;transform:translateY(18px)}}
.ouverture.fin,.ouverture.fin *{animation:none!important}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,var(--night) 0%,rgba(9,12,13,.75) 38%,rgba(9,12,13,0) 70%),linear-gradient(0deg,var(--night) 0%,rgba(9,12,13,0) 40%)}
.hero-copy{max-width:min(820px,100%)}
@media (max-width:820px){.mono{width:min(84vw,560px);right:var(--gut-r);top:28%}.ouverture .lettres{opacity:.18}.ouverture .contour path{stroke-width:1.1}}
.hook{font-size:clamp(56px,6.5vw,96px);font-weight:200;line-height:.98;letter-spacing:-.035em}
.hook b{font-weight:800;color:var(--fg);text-shadow:0 0 40px var(--accent-glow)}
.hook .br{display:block}
.h1{margin-top:clamp(20px,2.6vw,32px);font-size:var(--step-1);font-weight:400;color:var(--muted);max-width:36ch;line-height:1.45}
.h1 strong{color:var(--fg);font-weight:600}
.ctas{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;margin-top:clamp(26px,3vw,38px)}
.btn{display:inline-flex;align-items:center;gap:10px;text-decoration:none;font-weight:600;font-size:.95rem;padding:15px 24px;border-radius:999px;border:0;font-family:inherit;cursor:pointer;transition:box-shadow .3s,transform .3s}
.btn.primary{background:var(--accent);color:var(--night)}
.btn.primary:hover,.btn.primary:focus-visible{box-shadow:0 0 0 1px var(--accent),0 0 42px -6px var(--accent);transform:translateY(-2px)}
.tlink{color:var(--fg);font-weight:500;text-decoration:none;border-bottom:1px solid var(--dim);padding-bottom:3px;transition:border-color .2s}
.tlink:hover,.tlink:focus-visible{border-color:var(--accent)}

/* ---------- En-tête des pages intérieures ---------- */
.page-head{position:relative;isolation:isolate;overflow:hidden;padding-block:clamp(48px,8vw,110px) clamp(36px,5vw,64px);border-bottom:1px solid var(--line)}
.page-head::before{content:"";position:absolute;z-index:-1;right:-10%;top:-40%;width:70%;height:180%;background:radial-gradient(closest-side,rgba(66,197,191,.18),transparent);pointer-events:none}
.crumbs{font-size:var(--step--1);color:var(--muted);margin-bottom:clamp(18px,2.4vw,28px)}
.crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.crumbs li+li::before{content:"/";margin-right:6px;color:var(--dim)}
.crumbs a{text-decoration:none}
.crumbs a:hover,.crumbs a:focus-visible{color:var(--fg)}
.page-title{font-size:var(--step-3);font-weight:300;line-height:1.04;letter-spacing:-.03em;max-width:22ch}
.page-title b{font-weight:700}
.page-intro{margin-top:clamp(18px,2.4vw,28px);font-size:var(--step-1);font-weight:300;color:var(--muted);max-width:52ch;line-height:1.5}

/* ---------- Titres de section : révélés par la lumière ---------- */
.h2{font-size:var(--step-3);font-weight:300;line-height:1.02;letter-spacing:-.03em}
.h2 b{font-weight:700}
.h2.s{font-size:var(--step-2)}
@supports (animation-timeline: view()){
  /* zone de fond étendue au-dessus des accents et sous les jambages (g, p, q, y, j), compensée par des marges
     négatives : l'espacement visuel ne change pas (line-height serré de 1,02) */
  .h2{background:linear-gradient(90deg,var(--fg) 0 50%,var(--dim) 50% 100%) 100% 0/200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;padding-block:.1em .22em;margin-block:-.1em -.22em;animation:lightup linear both;animation-timeline:view();animation-range:entry 0% entry 100%}
  @keyframes lightup{to{background-position:0 0}}
  .wipe{animation:wipe linear both;animation-timeline:view();animation-range:entry 0% entry 70%}
  @keyframes wipe{from{clip-path:inset(0 35% 0 0);opacity:.55}to{clip-path:inset(0 0 0 0);opacity:1}}
  .rise{animation:riseview linear both;animation-timeline:view();animation-range:entry 0% entry 60%}
  @keyframes riseview{from{opacity:0;transform:translateY(24px)}}
}

/* ---------- Manifeste, chiffres, garanties ---------- */
.manifest{padding-block:clamp(80px,12vw,160px) clamp(48px,7vw,90px)}
.manifest .lead{font-size:var(--step-2);font-weight:300;line-height:1.3;max-width:24ch;letter-spacing:-.01em}
.manifest .lead b{font-weight:700}
.manifest .more{margin-top:clamp(20px,2.6vw,32px);color:var(--muted);max-width:56ch;font-size:var(--step-1);font-weight:300;line-height:1.5}
.figures{list-style:none;margin:clamp(48px,7vw,90px) 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
@media (max-width:820px){.figures{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 20px}}
.figures li{border-top:1px solid var(--line);padding-top:18px;min-width:0}
.figures .n{display:block;font-size:var(--step-3);font-weight:200;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}
.figures .n small{font-size:.32em;font-weight:500;letter-spacing:0;color:var(--muted);vertical-align:baseline;margin-right:.3em}
.figures .l{display:block;margin-top:10px;color:var(--muted);font-size:var(--step--1);max-width:20ch}
.proofs{display:flex;flex-wrap:wrap;gap:10px 28px;margin-top:clamp(36px,5vw,56px);color:var(--fg);font-size:var(--step--1);font-weight:500;letter-spacing:.02em}
.proofs span{display:inline-flex;align-items:center;gap:10px}
.proofs span::before{content:"";width:18px;height:1px;background:var(--accent);box-shadow:0 0 8px var(--accent);flex:none}
/* Chiffres clés de l'accueil (06/11/2026) : 4 colonnes égales sur toute la largeur au-delà de 900 px, 2 x 2 en
   dessous ; préfixe sur sa propre ligne (réservée aussi pour « 35 ») pour aligner préfixes et chiffres ;
   réassurance sur la même grille. Compteurs animés : site.js (la valeur finale est écrite dans le HTML). */
.kpi,.kpi-proofs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:clamp(20px,3vw,40px)}
.kpi{row-gap:36px}
.kpi li{display:flex;flex-direction:column}
.kpi .n{display:flex;flex-direction:column;align-items:flex-start}
.kpi .n small{display:block;min-height:1.5em;margin:0 0 .5em;font-size:max(.8rem,.26em);line-height:1.5}
.kpi .v{display:inline-block;white-space:nowrap}
.kpi .compte{display:inline-block;white-space:nowrap;text-align:right}
.kpi .v-cache{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.kpi-proofs{row-gap:14px}
.kpi-proofs span{align-items:flex-start}
.kpi-proofs span::before{margin-top:.7em}
.kpi.five{grid-template-columns:repeat(5,minmax(0,1fr))}
.kpi.five .n{font-size:clamp(2.2rem,1rem + 2.6vw,3.6rem)}
@media (max-width:1100px){.kpi.five{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:900px){.kpi,.kpi.five,.kpi-proofs{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* C. le double animé n'a pas de texte : la valeur affichée vient de data-n (pseudo-élément, aria-hidden) */
.kpi .compte::before{content:attr(data-n)}
.kpi .src{display:block;margin-top:6px;font-size:.75rem;line-height:1.4;color:var(--dim-text);max-width:28ch}
@media print{.kpi .compte{display:none}.kpi .v-cache{position:static;width:auto;height:auto;clip:auto}}

/* ---------- Sections génériques ---------- */
.section{padding-block:clamp(72px,10vw,140px)}
.section.flush{padding-top:0}
.section.tight{padding-block:clamp(48px,7vw,96px)}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px 40px;flex-wrap:wrap;margin-bottom:clamp(28px,4vw,56px)}
.sec-head p{color:var(--muted);max-width:40ch}
.prose{max-width:68ch}
.prose p+p,.prose p+ul,.prose ul+p{margin-top:1em}
.prose ul{padding-left:1.2em;margin:0}
.prose li+li{margin-top:.4em}
.text-muted{color:var(--muted)}
.mt{margin-top:clamp(20px,2.6vw,32px)}

/* ---------- Expertises : liste typographique ---------- */
.xp{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.xp li{position:relative;border-bottom:1px solid var(--line)}
.xp a,.xp .row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:8px 40px;align-items:baseline;padding-block:clamp(18px,2.4vw,30px);text-decoration:none}
.xp h3{font-size:clamp(40px,4vw,56px);font-weight:300;letter-spacing:-.03em;line-height:1.05;color:var(--muted);transition:color .35s,transform .35s}
.xp p{color:var(--dim-text);font-size:clamp(1.0625rem,1rem + .2vw,1.125rem);transition:color .35s;max-width:46ch}
.xp li::after{content:"";position:absolute;left:0;bottom:-1px;height:1px;width:0;background:var(--accent);box-shadow:0 0 12px var(--accent);transition:width .6s cubic-bezier(.2,.8,.2,1)}
.xp a:hover h3,.xp a:focus-visible h3{color:var(--fg);transform:translateX(6px)}
.xp a:hover p,.xp a:focus-visible p{color:var(--muted)}
.xp li:hover::after,.xp li:focus-within::after{width:100%}
.xp.static h3{color:var(--fg)}
.xp.static p{color:var(--muted)}
@media (max-width:760px){.xp a,.xp .row{grid-template-columns:1fr}}
/* Aperçu image (vignette 16/10) : images chargées au premier survol de la liste, jamais sur mobile */
.peek{position:fixed;left:0;top:0;width:320px;aspect-ratio:16/10;border-radius:10px;overflow:hidden;pointer-events:none;z-index:25;opacity:0;scale:.96;transition:opacity .3s ease-out,scale .3s ease-out;background:var(--night-3);box-shadow:0 24px 48px -18px rgba(0,0,0,.75),0 0 0 1px rgba(255,255,255,.06)}
.peek.on{opacity:1;scale:1}
.peek img{width:100%;height:100%;object-fit:cover}
@media (pointer:coarse),(max-width:900px){.peek{display:none}}

/* ---------- Médias et réalisations ---------- */
.works{display:grid;gap:clamp(56px,8vw,120px)}
.work{position:relative;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(20px,4vw,64px);align-items:end}
.work:nth-child(even){grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
.work:nth-child(even) .media{order:2}
.media{position:relative;aspect-ratio:16/9;max-width:100%;border-radius:6px;overflow:hidden;background:var(--night-3)}
.media img,.media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.shot{background:radial-gradient(120% 90% at 85% 8%,rgba(66,197,191,.42),transparent 58%),linear-gradient(150deg,#132a2b 0%,#0b1011 70%)}
.shot::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(115deg,transparent 0 46px,rgba(255,255,255,.035) 46px 47px)}
.media .sweep{position:absolute;inset:0;background:linear-gradient(110deg,transparent 35%,rgba(238,243,242,.16) 48%,transparent 60%);translate:-120% 0;transition:translate .6s;pointer-events:none}
.work:hover .media img,.work:hover .media video,.work:focus-within .media img,.work:focus-within .media video{transform:scale(1.04)}
.work:hover .sweep,.work:focus-within .sweep{translate:120% 0}
/* Diaporamas des réalisations : fondu lent ; sans JS, seule la première photo s'affiche */
.diapo img{transition:opacity 1.2s ease,transform .6s cubic-bezier(.2,.8,.2,1)}
.diapo.js img{opacity:0}
.diapo.js img.on{opacity:1}
.diapo-ctrl{position:absolute;left:10px;bottom:10px;z-index:2;display:flex;align-items:center;gap:2px;padding:2px 6px;border-radius:999px;background:rgba(9,12,13,.6)}
.diapo-ctrl button{width:28px;height:28px;padding:0;border:0;background:none;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;color:var(--fg)}
.diapo-ctrl .point::before{content:"";width:8px;height:8px;border-radius:50%;border:1px solid var(--fg);background:transparent}
.diapo-ctrl .point[aria-current="true"]::before{background:var(--accent);border-color:var(--accent)}
.diapo-ctrl .pause::before{content:"";width:8px;height:10px;border-left:3px solid currentColor;border-right:3px solid currentColor}
.diapo-ctrl .pause[aria-pressed="true"]::before{width:0;height:0;border-style:solid;border-width:6px 0 6px 10px;border-color:transparent transparent transparent currentColor}
.media .tag{position:absolute;left:14px;top:14px;font-size:.7rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--fg);background:rgba(9,12,13,.7);padding:6px 10px;border-radius:4px}
.work h3,.work h2{font-size:var(--step-2);font-weight:300;letter-spacing:-.02em;line-height:1.1}
.work h3 a,.work h2 a{text-decoration:none}
.work .stretch::after{content:"";position:absolute;inset:0}
.work .k{display:block;margin-top:14px;font-size:var(--step-1);font-weight:700;font-variant-numeric:tabular-nums}
.work p{margin-top:10px;color:var(--muted);max-width:42ch}
@media (max-width:820px){
  .works.rail{grid-auto-flow:column;grid-auto-columns:84%;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:12px;scrollbar-width:thin}
  .work,.work:nth-child(even){grid-template-columns:1fr;scroll-snap-align:start;align-items:start}
  .work:nth-child(even) .media{order:0}
}
.figure{margin:0}
.figure img,.figure video{border-radius:6px;width:100%}
.figure figcaption{margin-top:10px;font-size:var(--step--1);color:var(--muted)}

/* ---------- Références ---------- */
/* Liste typographique : chaque nom renvoie à sa réalisation (en attendant les logos clients) */
.refs{list-style:none;margin:clamp(56px,8vw,100px) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:clamp(20px,4vw,56px)}
@media (max-width:820px){.refs{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:480px){.refs{grid-template-columns:1fr}}
.refs li{border-top:1px solid var(--line);min-width:0}
.refs a{display:block;padding:14px 0;font-size:clamp(.95rem,.85rem + .3vw,1.1rem);font-weight:400;color:var(--muted);line-height:1.35;text-decoration:none;transition:color .2s}
.refs a:hover,.refs a:focus-visible{color:var(--fg);text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:5px}
/* Références en logos (lot 4) : logo blanc, nom accessible dans l'alt ; taille de chaque logo fixée par ses attributs
   width/height (poids visuel équivalent, outils/logos-equilibre.php), centré dans sa case, réduit si la case est plus étroite */
.refs.logos a{display:flex;align-items:center;justify-content:center;min-height:104px;padding:20px 8px}
.refs.logos a:hover,.refs.logos a:focus-visible{text-decoration:none}
.refs.logos img{max-width:100%;height:auto;opacity:.8;transition:opacity .2s}
.refs.logos a:hover img,.refs.logos a:focus-visible img{opacity:1}

/* ---------- Grilles de cartes (versions, modules, formations, méthode) ---------- */
.cards{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr));gap:0;border-top:1px solid var(--line);border-left:1px solid var(--line)}
.cards>li{background:var(--night);padding:clamp(20px,2.6vw,32px);min-width:0;position:relative;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
@media (min-width:901px){#methode .cards,.cards.three{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:621px){.cards.three.tiles{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:620px){.cards.three.tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;border:0}.cards.three.tiles>li{border:0;padding:0;background:none}}
.cards h3{font-size:var(--step-1);font-weight:600;line-height:1.25}
.cards p{margin-top:10px;color:var(--muted);font-size:.98rem}
.cards .num{display:block;font-size:var(--step-2);font-weight:200;color:var(--accent);line-height:1;margin-bottom:14px;font-variant-numeric:tabular-nums}
.cards a{text-decoration:none}
.cards a.stretch::after{content:"";position:absolute;inset:0}
.cards li:has(a.stretch):hover,.cards li:focus-within{background:var(--night-2)}
.cards .go{display:inline-block;margin-top:14px;font-size:var(--step--1);font-weight:600;color:var(--fg);border-bottom:1px solid var(--accent)}
.cards.two{grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr))}
.cards img{margin:-4px 0 18px;border-radius:4px;aspect-ratio:16/10;object-fit:cover;width:100%}
#creations .cards img{aspect-ratio:16/9;margin:0}
.chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.chips a{display:inline-block;padding:10px 18px;border:1px solid var(--line);border-radius:999px;text-decoration:none;font-weight:500;transition:border-color .2s,background .2s}
.chips a:hover,.chips a:focus-visible{border-color:var(--accent);background:rgba(66,197,191,.08)}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,80px);align-items:center}
@media (max-width:820px){.split{grid-template-columns:1fr}}
.split.top{align-items:start}
.ticks{list-style:none;margin:0;padding:0}
.ticks li{position:relative;padding-left:30px}
.ticks li+li{margin-top:12px}
.ticks li::before{content:"";position:absolute;left:0;top:.8em;width:18px;height:1px;background:var(--accent);box-shadow:0 0 8px var(--accent)}

/* ---------- Frise (agence) ---------- */
.timeline{list-style:none;margin:0;padding:0;position:relative;display:grid;gap:clamp(28px,4vw,48px)}
.timeline::before{content:"";position:absolute;left:7px;top:8px;bottom:8px;width:1px;background:linear-gradient(var(--accent),rgba(66,197,191,.1))}
.timeline li{position:relative;padding-left:44px}
.timeline li::before{content:"";position:absolute;left:0;top:.55em;width:15px;height:15px;border-radius:50%;background:var(--night);border:1px solid var(--accent);box-shadow:0 0 14px var(--accent-glow)}
.timeline .y{display:block;font-size:var(--step-2);font-weight:200;line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.timeline p{margin-top:8px;color:var(--muted);max-width:52ch}
@media (min-width:901px){.timeline{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(28px,5vw,80px)}.timeline::before{display:none}.timeline li::after{content:"";position:absolute;left:7px;top:calc(.55em + 16px);bottom:-12px;width:1px;background:linear-gradient(var(--accent),rgba(66,197,191,0))}}

/* ---------- Bande photo ---------- */
.place{position:relative;isolation:isolate;min-height:min(56svh,560px);display:flex;align-items:flex-end;overflow:hidden}
.place>img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;object-position:20% 40%}
@media (max-width:620px){.place>img{object-position:0% 40%}}
.place::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,var(--night) 0%,rgba(9,12,13,.35) 55%,rgba(9,12,13,.1) 100%)}
.place .wrap{padding-block:clamp(28px,4vw,48px)}
.place p{font-size:var(--step-1);font-weight:300;max-width:34ch}
.place p b{font-weight:700}

/* ---------- Bloc contact (bas de page) ---------- */
.contact{position:relative;isolation:isolate;overflow:hidden;padding-block:clamp(96px,14vw,190px)}
.contact .bg{position:absolute;inset:0;z-index:-2;background:url("/assets/img/port-toul-1100x731.webp") center/cover no-repeat;background-image:-webkit-image-set(url("/assets/img/port-toul-1100x731.webp") 1x,url("/assets/img/port-toul-2200x1462.webp") 2x);background-image:image-set(url("/assets/img/port-toul-1100x731.webp") 1x,url("/assets/img/port-toul-2200x1462.webp") 2x);filter:grayscale(1) contrast(1.1);opacity:.5}
.contact .tint{position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,var(--night) 0%,rgba(9,12,13,.2) 40%,rgba(9,12,13,.2) 60%,var(--night) 100%),rgba(19,112,107,.55)}
.contact h2{max-width:20ch}
.contact .intro{margin-top:22px;color:var(--fg);max-width:46ch;opacity:.85}
.phone{display:inline-block;margin-top:clamp(36px,5vw,64px);font-size:clamp(2rem,1rem + 5.4vw,6.4rem);font-weight:200;letter-spacing:-.03em;line-height:1;text-decoration:none;font-variant-numeric:tabular-nums;position:relative}
.phone::after{content:"";position:absolute;left:0;right:0;bottom:-10px;height:2px;background:linear-gradient(90deg,transparent,var(--accent),transparent);background-size:200% 100%;background-position:100% 0;transition:background-position .9s}
.phone:hover::after,.phone:focus-visible::after{background-position:0 0}
.contact .ctas{margin-top:clamp(36px,5vw,56px)}
.cta-band{padding-block:clamp(56px,8vw,110px);border-top:1px solid var(--line)}
.cta-band .ctas{margin-top:0}

/* ---------- Page contact : formulaire ---------- */
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 24px}
@media (max-width:640px){.form-grid{grid-template-columns:1fr}}
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field.full{grid-column:1/-1}
.field label{font-size:var(--step--1);font-weight:600;letter-spacing:.02em}
.field .req{color:var(--accent)}
.field .opt{font-weight:400;color:var(--muted)}
.field input,.field textarea,.field select{font:inherit;color:var(--fg);background:var(--night-2);border:1px solid rgba(255,255,255,.4);border-radius:6px;padding:12px 14px;width:100%}
.field select{min-height:48px}
.field textarea{min-height:180px;resize:vertical}
.field input:focus,.field textarea:focus,.field select:focus{outline:2px solid var(--accent);outline-offset:0;border-color:var(--accent)}
.call{margin-top:18px;font-size:var(--step-1);font-weight:500}
.map-link{display:block}
.map-link:focus-visible{outline-offset:4px}
.consent{display:flex;gap:12px;align-items:flex-start;margin-top:22px;font-size:.95rem}
.consent input{margin-top:.35em;width:18px;height:18px;flex:none;accent-color:var(--accent)}
.hp{position:absolute!important;left:-10000px;width:1px;height:1px;overflow:hidden}
.form-note{margin-top:14px;font-size:var(--step--1);color:var(--muted)}
.legal-note{margin-top:28px;font-size:.82rem;color:var(--muted);line-height:1.55}
.legal-note a{color:var(--fg)}
.notice{display:none;margin-bottom:28px;padding:18px 20px;border-radius:6px;border:1px solid;font-weight:500}
.notice:target,.notice.show{display:block}
.notice.ok{border-color:var(--ok);background:rgba(66,197,191,.1)}
.notice.err{border-color:var(--err);background:rgba(255,138,122,.08)}
.notice strong{display:block;margin-bottom:4px}
.nojs-note{margin-bottom:22px;padding:14px 18px;border:1px solid var(--line);border-radius:6px;color:var(--muted);font-size:.95rem}
.coords{font-style:normal;line-height:1.8}
.coords strong{font-weight:600}
.coords a{text-decoration:none;border-bottom:1px solid var(--dim)}

/* ---------- Fond clair (pages légales) ---------- */
.light{background:var(--paper);color:var(--ink);color-scheme:light}
.light a{color:var(--accent-ink)}
.light .hl{color:var(--accent-ink);font-weight:700}
.legal{padding-block:clamp(40px,6vw,80px);color:var(--muted)}
.legal>*{max-width:72ch}
.legal h2{font-size:var(--step-1);font-weight:600;letter-spacing:.02em;color:var(--fg);margin-top:2.4em;margin-bottom:.7em;padding-top:1.2em;border-top:1px solid var(--line);line-height:1.3}
.legal strong,.legal b{color:var(--fg)}
.legal a,.legal .hl{color:var(--accent)}
.legal .hl{font-weight:600}
.legal h2:first-child{margin-top:0;padding-top:0;border-top:0}
.legal p,.legal ul{margin:0 0 1em}
.legal ul{padding-left:1.3em}
.legal li+li{margin-top:.3em}
.legal .pdf{display:inline-block;margin-bottom:2em;font-weight:600}
.legal p,.legal li{overflow-wrap:anywhere}

/* ---------- 404 ---------- */
.notfound{min-height:60svh;display:flex;align-items:center}
.notfound .code{display:block;font-size:clamp(5rem,3rem + 10vw,12rem);font-weight:200;line-height:1;letter-spacing:-.05em;color:var(--accent);text-shadow:0 0 60px var(--accent-glow)}

/* ---------- Pied de page ---------- */
footer{border-top:1px solid var(--line);padding-block:44px;color:var(--muted);font-size:.85rem}
footer .wrap{display:flex;flex-wrap:wrap;gap:18px 48px;justify-content:space-between}
footer address{font-style:normal}
footer address strong{color:var(--fg)}
footer nav{display:flex;flex-wrap:wrap;gap:0 24px}
footer nav a,footer nav .ck-open{display:inline-flex;align-items:center;min-height:44px}
footer a{text-decoration:none}
footer a:hover,footer a:focus-visible{color:var(--fg)}
.note{margin-top:28px;width:100%;font-size:.75rem;color:var(--dim-text)}
.ck-open{background:none;border:0;padding:0;font:inherit;color:inherit;cursor:pointer;text-decoration:none;letter-spacing:.06em}
.ck-open:hover,.ck-open:focus-visible{color:var(--fg)}

/* ---------- Bandeau cookies ---------- */
.ck{position:fixed;left:var(--gut);right:var(--gut-r);bottom:max(16px,env(safe-area-inset-bottom,0px));z-index:50;max-width:760px;margin-inline:auto;background:var(--night-2);border:1px solid rgba(255,255,255,.16);border-radius:10px;padding:20px 22px;box-shadow:0 30px 60px -20px #000}
.ck p{font-size:.9rem;color:var(--fg)}
.ck p a{color:var(--fg)}
.ck-btns{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.ck-btn{font:inherit;font-size:.8rem;font-weight:600;letter-spacing:.06em;padding:10px 16px;border-radius:999px;cursor:pointer;border:1px solid var(--accent);background:var(--accent);color:var(--night)}
.ck-btn.alt{background:transparent;color:var(--fg);border-color:rgba(255,255,255,.3)}
.ck-modal{position:fixed;inset:0;z-index:55;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(0,0,0,.6)}
.ck-box{background:var(--night-2);border:1px solid rgba(255,255,255,.16);border-radius:10px;max-width:640px;width:100%;max-height:85vh;overflow-y:auto;padding:26px 28px}
.ck-box .ck-title{font-size:var(--step-1);font-weight:600;margin-bottom:14px}
.ck-cat{border-top:1px solid var(--line);padding-block:14px}
.ck-cat label{display:flex;gap:10px;align-items:center;font-weight:600}
.ck-cat input{width:18px;height:18px;accent-color:var(--accent)}
.ck-cat p{margin-top:8px;color:var(--muted);font-size:.88rem}

/* ---------- Mouvement réduit ---------- */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .h2{color:var(--fg)!important;background:none!important}
}

/* ---------- Impression ---------- */
@media print{
  .thread,.top,.peek,.ck,.ck-modal,.contact .bg,.contact .tint,.mono{display:none!important}
  body{background:#fff;color:#000}
  .light{background:#fff}
}