/* =========================================================================
   KOSMO · « Point, ligne, plan »
   Système graphique partagé par toutes les pages · v1 · 2 novembre 2026

   Le point : ce qui compte, une personne, une intention.
   La ligne : la trajectoire, le lien entre les choses.
   Le plan : l'espace, la place que l'on fait.
   ========================================================================= */

@view-transition { navigation: auto; }

:root{
  /* Base : neutres et profondes */
  --nuit:#0E1216;
  --nuit-2:#131920;
  --nuit-3:#1A2129;
  --trait:#232C35;
  --trait-2:#34404B;
  --brume:#8B959E;
  --brume-2:#B4BCC3;
  --clarte:#ECEEED;
  --blanc:#FFFFFF;

  /* Applications : un accent chacune. La maison n'a pas de couleur. */
  --kayros:#CB6B44;
  --kima:#2FA08C;
  --domos:#CC9452;
  --amos:#B47DC1;
  --accent:var(--clarte);

  --f:"Host Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  --marge:clamp(20px, 4.4vw, 72px);
  --gout:clamp(16px, 1.6vw, 24px);
  --max:1680px;
  --section:clamp(104px, 15vh, 196px);

  --t-affiche:clamp(50px, 8.2vw, 152px);
  --t-1:clamp(44px, 6.4vw, 112px);
  --t-2:clamp(34px, 4.3vw, 74px);
  --t-3:clamp(26px, 2.5vw, 42px);
  --t-4:clamp(20px, 1.55vw, 26px);
  --t-chapeau:clamp(18px, 1.38vw, 22px);
  --t-texte:17px;
  --t-petit:14.5px;
  --t-micro:13px;

  --e-precis:cubic-bezier(.65,0,.15,1);
  --e-sortie:cubic-bezier(.16,1,.3,1);
}
body[data-teinte="kayros"]{--accent:var(--kayros)}
body[data-teinte="kima"]{--accent:var(--kima)}
body[data-teinte="domos"]{--accent:var(--domos)}
body[data-teinte="amos"]{--accent:var(--amos)}

/* ---------- Transitions de page ---------- */
/* La page suivante s'ouvre depuis le point du logo, qui prend sa couleur. */
::view-transition-old(root){animation:none}
::view-transition-new(root){animation:kt-ouvrir .82s var(--e-precis) both}
@keyframes kt-ouvrir{from{clip-path:circle(0 at var(--vt-x,92px) var(--vt-y,42px))}to{clip-path:circle(150vmax at var(--vt-x,92px) var(--vt-y,42px))}}
.entete .marque .o.plein{view-transition-name:point}
::view-transition-group(point){animation-duration:.82s;animation-timing-function:var(--e-precis)}
/* Première visite : le point se remplit. */
html.premiere .entete .marque .o.plein{animation:kt-remplir 1.1s var(--e-sortie) .6s both}
@keyframes kt-remplir{from{background-color:transparent}}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scrollbar-color:var(--trait-2) var(--nuit)}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}
body{margin:0;background:var(--nuit);color:var(--clarte);font-family:var(--f);font-size:var(--t-texte);line-height:1.6;font-weight:400;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;font-kerning:normal;overflow-x:hidden}
img,svg,video,canvas{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit;color:inherit;letter-spacing:inherit}
button{background:none;border:0;padding:0;cursor:pointer}
h1,h2,h3,h4,h5,p,ul,ol,dl,dd,figure,blockquote{margin:0;padding:0}
ul,ol{list-style:none}
h1,h2,h3,h4{font-weight:400;text-wrap:balance}
p{text-wrap:pretty}
::selection{background:var(--clarte);color:var(--nuit)}
:focus-visible{outline:1.5px solid var(--accent);outline-offset:4px;border-radius:2px}
.sr-only{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.evitement{position:fixed;left:var(--marge);top:-80px;z-index:100;background:var(--clarte);color:var(--nuit);padding:10px 16px;border-radius:999px;font-weight:500;transition:top .3s}
.evitement:focus{top:14px}

/* ---------- Mise en page ---------- */
.cadre{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--marge)}
.grille{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gout)}
.section{padding-block:var(--section);position:relative}
.section.serre{padding-block:calc(var(--section) * .6)}
.bande{background:var(--nuit-2)}
.filet{height:1px;background:var(--trait);transform-origin:left center}

/* ---------- Typographie ---------- */
.t-affiche{font-size:var(--t-affiche);line-height:.94;letter-spacing:-.045em}
.t-1{font-size:var(--t-1);line-height:.95;letter-spacing:-.042em}
.t-2{font-size:var(--t-2);line-height:1;letter-spacing:-.035em}
.t-3{font-size:var(--t-3);line-height:1.06;letter-spacing:-.028em}
.t-4{font-size:var(--t-4);line-height:1.22;letter-spacing:-.016em}
.chapeau{font-size:var(--t-chapeau);line-height:1.46;color:var(--brume-2);letter-spacing:-.006em;max-width:46ch}
.texte p{color:var(--brume-2);max-width:62ch}
.texte p + p{margin-top:1.05em}
.texte strong{color:var(--clarte);font-weight:500}
.discret{color:var(--brume)}
.ombre{color:var(--brume)}
.etiquette{display:inline-flex;align-items:center;gap:10px;font-size:var(--t-micro);font-weight:450;letter-spacing:.01em;color:var(--brume);line-height:1.3}
.etiquette::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:var(--c, var(--accent))}
.chiffres{font-variant-numeric:tabular-nums}

/* ---------- Marque : K○SM● ---------- */
.marque{display:inline-flex;align-items:baseline;font-weight:500;letter-spacing:.012em;line-height:1;white-space:nowrap;color:var(--clarte)}
.marque .o{display:inline-block;flex:none;width:.71em;height:.71em;margin:0 .034em 0 .036em;border-radius:50%;border:.108em solid currentColor;transform:translateY(.011em)}
.marque .o.plein{background:var(--accent);border-color:var(--accent);transition:background-color .6s,border-color .6s}
.marque.fin .o{border-width:.075em}
.symbole{display:inline-flex;align-items:center;gap:.16em;line-height:0}
.symbole i{display:block;width:1em;height:1em;border-radius:50%;border:.15em solid currentColor}
.symbole i + i{background:var(--accent);border-color:var(--accent)}

/* ---------- Pictogrammes : point, ligne, plan ---------- */
.picto{width:48px;height:48px;overflow:visible;color:var(--c, var(--clarte))}
.picto .l{fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.picto .p{fill:currentColor}
.picto .v{fill:none;stroke:currentColor;stroke-width:1.5;vector-effect:non-scaling-stroke}
.picto .s{fill:currentColor;opacity:.92}

/* ---------- Flèche ---------- */
.fleche{width:15px;height:15px;flex:none;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;transition:transform .55s var(--e-sortie)}

/* ---------- Boutons et liens ---------- */
.bouton{display:inline-flex;align-items:center;justify-content:center;gap:12px;height:54px;padding:0 26px;border-radius:999px;border:1px solid var(--trait-2);font-size:15px;font-weight:500;letter-spacing:-.004em;color:var(--clarte);white-space:nowrap;transition:background-color .45s var(--e-sortie),color .45s var(--e-sortie),border-color .45s var(--e-sortie)}
.bouton:hover{border-color:var(--clarte)}
.bouton:hover .fleche{transform:translateX(4px)}
.bouton.plein{background:var(--clarte);border-color:var(--clarte);color:var(--nuit)}
.bouton.plein:hover{background:var(--blanc);border-color:var(--blanc)}
.bouton.accent{background:var(--accent);border-color:var(--accent);color:var(--nuit)}
.bouton.accent:hover{background:var(--clarte);border-color:var(--clarte)}
.boutons{display:flex;flex-wrap:wrap;gap:12px}
.lien{position:relative;display:inline-flex;align-items:center;gap:10px;font-weight:500;color:var(--clarte);padding-bottom:5px}
.lien::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;opacity:.55;transform:scaleX(.18);transform-origin:left center;transition:transform .75s var(--e-precis),opacity .4s}
.lien:hover::after{transform:scaleX(1);opacity:1}
.lien:hover .fleche{transform:translateX(4px)}
.lien.externe .fleche{transform:rotate(-45deg)}
.lien.externe:hover .fleche{transform:rotate(-45deg) translateX(3px)}

/* ---------- En-tête ---------- */
.entete{position:fixed;top:0;left:0;right:0;z-index:60;height:84px;display:flex;align-items:center;gap:clamp(20px,3vw,48px);padding:0 var(--marge);border-bottom:1px solid transparent;transition:height .6s var(--e-precis),background-color .5s,border-color .5s;view-transition-name:entete}
.entete.replie{height:64px;background:rgba(14,18,22,.95);border-bottom-color:var(--trait)}
.entete .marque{font-size:22px}
.nav{display:flex;align-items:center;gap:clamp(18px,2.4vw,38px);margin-left:auto}
.nav a{position:relative;font-size:14.5px;font-weight:450;color:var(--brume-2);padding:8px 0;transition:color .3s}
.nav a:hover,.nav a[aria-current="page"]{color:var(--clarte)}
.nav a::after{content:"";position:absolute;left:50%;bottom:-3px;width:5px;height:5px;margin-left:-2.5px;border-radius:50%;background:var(--accent);transform:scale(0);transition:transform .5s var(--e-precis)}
.nav a[aria-current="page"]::after{transform:scale(1)}
.entete .cta{height:44px;padding:0 20px;font-size:14px}
.bouton-menu{display:none;align-items:center;gap:12px;height:44px;padding:0 4px 0 18px;font-size:14.5px;font-weight:500}
.bouton-menu i{position:relative;width:36px;height:36px;border-radius:50%;border:1px solid var(--trait-2)}
.bouton-menu i::before,.bouton-menu i::after{content:"";position:absolute;left:11px;right:11px;height:1.5px;background:currentColor;top:15px;transition:transform .5s var(--e-precis)}
.bouton-menu i::after{top:20px}
.menu-ouvert .bouton-menu i::before{transform:translateY(2.5px) rotate(45deg)}
.menu-ouvert .bouton-menu i::after{transform:translateY(-2.5px) rotate(-45deg)}
@media (max-width:1100px){.nav,.entete .cta{display:none}.bouton-menu{display:inline-flex;margin-left:auto}}

/* ---------- Menu plein écran ---------- */
.menu{position:fixed;inset:0;z-index:55;background:var(--nuit);display:flex;flex-direction:column;padding:96px var(--marge) 32px;visibility:hidden;opacity:0;transition:opacity .45s var(--e-precis),visibility 0s linear .45s}
.menu-ouvert .menu{visibility:visible;opacity:1;transition:opacity .45s var(--e-precis)}
.menu ul{margin-top:auto;display:grid;gap:2px}
.menu li{opacity:0;transform:translateY(14px);transition:opacity .5s var(--e-sortie),transform .7s var(--e-sortie);transition-delay:calc(var(--i,0) * 50ms + .1s)}
.menu-ouvert .menu li{opacity:1;transform:none}
.menu li a{display:flex;align-items:center;gap:18px;font-size:clamp(38px,10vw,64px);letter-spacing:-.04em;line-height:1.12;padding:4px 0}
.menu li a i{flex:none;width:12px;height:12px;border-radius:50%;background:var(--c,var(--clarte));transform:translateY(-.08em)}
.menu-bas{margin-top:40px;padding-top:20px;border-top:1px solid var(--trait);display:flex;justify-content:space-between;gap:16px;color:var(--brume);font-size:var(--t-petit)}

/* ---------- Tête de page et point de clarté ---------- */
.tete-page{padding-top:calc(84px + clamp(64px,13vh,168px));padding-bottom:clamp(56px,8vh,104px)}
.ariane{display:flex;align-items:center;gap:10px;font-size:var(--t-micro);color:var(--brume);margin-bottom:clamp(28px,4.4vh,48px)}
.ariane a{transition:color .3s}
.ariane a:hover{color:var(--clarte)}
.ariane span[aria-hidden]{opacity:.5}
.tete-page h1{font-size:var(--t-1);line-height:.95;letter-spacing:-.042em;max-width:15ch}
.tete-page .chapeau{margin-top:clamp(24px,3.6vh,40px)}
.clarte{margin-top:clamp(52px,8vh,96px);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--gout);border-top:1px solid var(--trait);padding-top:22px}
.clarte dt{display:flex;align-items:center;gap:9px;font-size:var(--t-micro);color:var(--brume);margin-bottom:10px}
.clarte dt::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--accent)}
.clarte div:nth-child(2) dt::before{background:transparent;border:1.2px solid var(--accent);width:6px;height:6px}
.clarte div:nth-child(3) dt::before{width:14px;height:1.2px;border-radius:0}
.clarte dd{font-size:16.5px;line-height:1.5;color:var(--clarte);max-width:32ch}
@media (max-width:900px){.clarte{grid-template-columns:1fr;row-gap:22px}}

/* ---------- Tête de section ---------- */
.tete-section{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gout);align-items:end;margin-bottom:clamp(48px,8vh,96px)}
.tete-section .etiquette{grid-column:1/-1;margin-bottom:clamp(22px,3.4vh,34px)}
.tete-section h2{grid-column:1/9}
.tete-section .chapeau{grid-column:9/13;font-size:16.5px;max-width:36ch}
.tete-section .chapeau.bas{align-self:end}
@media (max-width:900px){.tete-section h2,.tete-section .chapeau{grid-column:1/-1}.tete-section .chapeau{margin-top:20px}}

/* ---------- Index (listes de référence) ---------- */
.index{border-top:1px solid var(--trait)}
.index-ligne{position:relative;display:grid;grid-template-columns:24px minmax(0,4fr) minmax(0,4fr) minmax(0,3fr) 30px;align-items:center;column-gap:var(--gout);padding:clamp(22px,3.3vh,36px) 0;border-bottom:1px solid var(--trait);transition:opacity .5s var(--e-sortie)}
.index-ligne::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--c,var(--clarte));transform:scaleX(0);transform-origin:left center;transition:transform .9s var(--e-precis)}
a.index-ligne:hover::after,a.index-ligne:focus-visible::after{transform:scaleX(1)}
.index:hover a.index-ligne:not(:hover){opacity:.36}
.i-point{width:10px;height:10px;border-radius:50%;background:var(--c,var(--clarte));transition:transform .6s var(--e-precis)}
.i-point.vide{background:transparent;border:1.5px solid var(--c,var(--clarte))}
a.index-ligne:hover .i-point{transform:scale(1.7)}
.i-nom{font-size:var(--t-3);letter-spacing:-.03em;line-height:1.05;transition:transform .7s var(--e-precis)}
a.index-ligne:hover .i-nom{transform:translateX(12px)}
.i-desc{font-size:16.5px;color:var(--brume-2);line-height:1.45}
.i-meta{font-size:var(--t-petit);color:var(--brume);line-height:1.45}
.index-ligne .fleche{justify-self:end;width:18px;height:18px;color:var(--brume);transition:transform .55s var(--e-sortie),color .3s}
a.index-ligne:hover .fleche{transform:translateX(5px);color:var(--clarte)}
.index.simple .index-ligne{grid-template-columns:24px minmax(0,3fr) minmax(0,5fr) minmax(0,4fr)}
@media (max-width:900px){
  .index-ligne,.index.simple .index-ligne{grid-template-columns:18px minmax(0,1fr) 22px;row-gap:6px}
  .i-desc,.i-meta{grid-column:2/3}
  .index.simple .i-meta{grid-column:2/4}
  .index-ligne .fleche{grid-row:1/2;grid-column:3/4}
}

/* Aperçu qui suit le pointeur */
.apercu{position:fixed;left:0;top:0;z-index:45;width:clamp(260px,23vw,380px);aspect-ratio:4/3;pointer-events:none;overflow:hidden;background:var(--nuit-3);clip-path:circle(0% at 50% 50%);transition:clip-path .7s var(--e-precis);will-change:transform,clip-path}
.apercu.visible{clip-path:circle(75% at 50% 50%)}
.apercu > div{position:absolute;inset:0;opacity:0;transition:opacity .35s}
.apercu > div.actif{opacity:1}
.apercu img{width:100%;height:100%;object-fit:cover}
.apercu .teinte{width:100%;height:100%;display:grid;place-items:center;background:color-mix(in srgb, var(--c) 16%, var(--nuit-2))}
.apercu .teinte .picto{width:120px;height:120px}
.apercu .teinte .telephone{width:38%;box-shadow:none}

/* ---------- Plans : images et captures ---------- */
.plan{position:relative;overflow:hidden;background:var(--nuit-2)}
.plan img{width:100%;height:100%;object-fit:cover}
.plan.contour{box-shadow:0 0 0 1px var(--trait)}
.plan.r-16-10{aspect-ratio:16/10}
.plan.r-4-5{aspect-ratio:4/5}
.plan.r-3-2{aspect-ratio:3/2}
.plan.r-1-1{aspect-ratio:1/1}
.plan.r-21-9{aspect-ratio:21/9}
/* Ouvrir : le point devient plan */
[data-ouvrir]{clip-path:circle(5px at var(--ox,50%) var(--oy,50%))}
[data-ouvrir]::after{content:"";position:absolute;inset:0;z-index:2;background:var(--accent);pointer-events:none;transition:opacity .55s var(--e-precis) .18s}
[data-ouvrir] img{transform:scale(1.14);transition:transform 2.2s var(--e-sortie)}
[data-ouvrir].ouvert{clip-path:circle(var(--r-fin,75%) at var(--ox,50%) var(--oy,50%));transition:clip-path 1.5s var(--e-precis)}
[data-ouvrir].ouvert::after{opacity:0}
[data-ouvrir].ouvert img{transform:none}
[data-ouvrir].fini{clip-path:none}
.legende{display:flex;justify-content:space-between;align-items:baseline;gap:20px;margin-top:16px;font-size:var(--t-petit);color:var(--brume);line-height:1.45}
.legende b{color:var(--clarte);font-weight:450}

/* Téléphones */
.telephone{position:relative;aspect-ratio:1179/2556;border-radius:clamp(22px,2.6vw,42px);overflow:hidden;background:#000;box-shadow:0 0 0 1px var(--trait-2),0 50px 90px -40px rgba(0,0,0,.9)}
.telephone img{width:100%;height:100%;object-fit:cover}

/* ---------- Statuts : le point se remplit ---------- */
.statut{display:inline-flex;align-items:center;gap:9px;font-size:var(--t-micro);color:var(--brume-2);white-space:nowrap}
.statut::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;border:1.5px solid var(--c,var(--clarte))}
.statut[data-niveau="2"]::before{background:linear-gradient(90deg, var(--c,var(--clarte)) 50%, transparent 50%)}
.statut[data-niveau="3"]::before{background:var(--c,var(--clarte))}

/* ---------- Réalisations ---------- */
.projets{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gout);row-gap:clamp(72px,11vh,136px);align-items:start}
.projet{display:block;position:relative}
.projet .plan img{transition:transform 1.2s var(--e-sortie)}
.projet:hover .plan.fini img{transform:scale(1.025)}
.projet-meta{margin-top:18px;display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:16px;row-gap:4px;align-items:baseline}
.projet-meta h3{font-size:var(--t-4);letter-spacing:-.018em;line-height:1.2}
.projet-meta p{grid-column:1/2;font-size:var(--t-petit);color:var(--brume);line-height:1.45}
.projet-meta .nature{grid-row:1/2;grid-column:2/3;font-size:var(--t-micro);color:var(--brume)}
.projet-meta .fleche{display:none}
@media (max-width:900px){.projets > *{grid-column:1/-1!important;margin-top:0!important}}

/* ---------- Écosystème : la scène de l'accueil ---------- */
/* Le fil arrive au centre, se sépare, chaque nœud se pose. La phrase s'allume au même rythme. */
.eco-scene{position:relative;z-index:1}
.eco-cadre{display:grid;grid-template-rows:auto minmax(0,1fr) auto;row-gap:clamp(18px,3vh,34px);min-height:100svh;padding-top:calc(64px + clamp(24px,5vh,56px));padding-bottom:clamp(28px,5.5vh,60px)}
.eco-eti{grid-row:1;justify-self:start}
.eco-titre{grid-row:3;font-size:clamp(30px,3.3vw,58px);line-height:1.02;letter-spacing:-.036em}
.eco{grid-row:2;position:relative;display:grid;grid-template-columns:minmax(0,4fr) minmax(0,3fr) minmax(0,4fr);align-items:center;column-gap:var(--gout);isolation:isolate}
.eco-lignes{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:-1}
.eco-lignes .branche{fill:none;stroke:var(--brume);stroke-width:1;stroke-dasharray:1;stroke-dashoffset:1;opacity:.62;transition:opacity .45s,stroke-width .45s}
.eco-lignes .trace,.fil .trace{fill:none;stroke:var(--brume-2);stroke-width:1;stroke-dasharray:1;stroke-dashoffset:1;opacity:.5}
.eco-lignes .guide,.fil .guide{fill:none;stroke:var(--brume);stroke-width:1.3;stroke-linecap:round;stroke-dasharray:0 8;opacity:.3}
.eco-lignes .route,.fil .route{fill:none;stroke:none}
.eco-lignes .orbite{fill:none;stroke:var(--trait-2);stroke-width:1;stroke-dasharray:1 7;stroke-linecap:round}
.eco-lignes .perle{fill:var(--clarte);opacity:0}
.eco-lignes .onde{fill:none;stroke:var(--clarte);stroke-width:1;opacity:0}
.eco.focus .branche{opacity:.14}
.eco.focus .branche.on{opacity:1;stroke-width:1.5}
.eco-groupe{display:grid;gap:clamp(16px,3.2vh,38px)}
.eco-gauche{justify-items:end;text-align:right}
.eco-gauche > .etiquette{flex-direction:row-reverse}
.eco-centre{justify-self:center;display:grid;justify-items:center;text-align:center;gap:14px}
.c-point{width:22px;height:22px;border-radius:50%;background:var(--clarte)}
.eco-centre .marque{font-size:26px;background:var(--nuit);padding:4px 10px;overflow:hidden}
.eco-centre p{font-size:var(--t-micro);color:var(--brume);max-width:22ch;background:var(--nuit);padding:2px 8px}
.noeud{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:16px;row-gap:3px;align-items:center;transition:opacity .45s}
.eco-gauche .noeud{grid-template-columns:minmax(0,1fr) auto}
.noeud .n-nom,.noeud .n-desc{justify-self:start}
.eco-gauche .noeud .n-nom,.eco-gauche .noeud .n-desc{justify-self:end}
.noeud .n-point{grid-row:1/3;width:12px;height:12px;border-radius:50%;background:var(--c,var(--clarte));transition:scale .5s var(--e-precis)}
.eco-gauche .noeud .n-point{grid-column:2/3}
.noeud .n-nom{font-size:var(--t-4);letter-spacing:-.02em;line-height:1.15}
.noeud .n-desc{font-size:var(--t-micro);color:var(--brume);line-height:1.4}
.noeud:hover .n-point,.noeud:focus-visible .n-point{scale:1.6}
.noeud .n-point.recoit{animation:n-recoit .7s var(--e-sortie)}
@keyframes n-recoit{35%{scale:1.5}}
.eco.focus .noeud:not(.on){opacity:.35}
.eco-note{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gout);row-gap:16px;align-items:baseline;margin-top:clamp(8px,2vh,24px);padding-top:22px;border-top:1px solid var(--trait);font-size:var(--t-petit);color:var(--brume);line-height:1.55}
.eco-note p:first-child{grid-column:1/6}
.eco-note p:nth-child(2){grid-column:6/11}
.eco-note .lien{grid-column:11/13;justify-self:end}
@media (max-width:900px),(max-height:619px){
  .eco-cadre{display:block;min-height:0;padding-block:var(--section) calc(var(--section) * .5)}
  .eco-titre{margin:clamp(22px,3.4vh,34px) 0 clamp(48px,8vh,80px);font-size:var(--t-2)}
}
@media (max-width:900px){
  .eco{grid-template-columns:1fr;row-gap:48px}
  .eco-centre{justify-self:start;justify-items:start;text-align:left;order:-1}
  .eco-gauche{justify-items:start;text-align:left}
  .eco-gauche > .etiquette{flex-direction:row}
  .eco-gauche .noeud{grid-template-columns:auto minmax(0,1fr)}
  .eco-gauche .noeud .n-point{grid-column:1/2}
  .eco-gauche .noeud .n-nom,.eco-gauche .noeud .n-desc{justify-self:start}
  .eco-lignes,.fil{display:none}
  .eco-note p,.eco-note .lien{grid-column:1/-1!important;justify-self:start}
}

/* ---------- Le fil de l'accueil : du point final du titre au centre de KOSMO ---------- */
.fil{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:0;overflow:visible}
.fil .guide{opacity:0;transition:opacity 1.4s var(--e-sortie)}
.fil.pret .guide{opacity:.3}
.comete{position:fixed;left:0;top:0;z-index:3;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:var(--clarte);pointer-events:none;opacity:0;will-change:transform;box-shadow:0 0 0 6px rgba(236,238,237,.07),0 0 34px 8px rgba(236,238,237,.16)}

/* ---------- Ouverture de l'accueil : le point devient KOSMO, puis rejoint l'en-tête ---------- */
.ouverture{display:none}
html.intro .ouverture{position:fixed;inset:0;z-index:90;display:grid;place-items:center;pointer-events:none;animation:o-secours .4s linear 6s forwards}
@keyframes o-secours{to{opacity:0;visibility:hidden}}
html.intro-active{overflow:hidden}
html.intro .entete .marque,html.intro .entete .nav,html.intro .entete .cta,html.intro .entete .bouton-menu{opacity:0}
.o-fond{position:absolute;inset:0;background:var(--nuit)}
.o-vol{position:relative;font-size:clamp(64px,10.5vw,184px);line-height:1;transform-origin:0 0;will-change:transform}
.o-marque{font-size:1em;overflow:hidden;vertical-align:top}
.o-marque .o-l{opacity:0}
.o-marque .o-place{visibility:hidden}
.o-point{position:absolute;left:0;top:0;border-radius:50%;background:var(--accent);opacity:0}
.o-onde{position:absolute;left:50%;top:50%;width:84px;height:84px;margin:-42px 0 0 -42px;border-radius:50%;border:1px solid var(--clarte);opacity:0}
.o-legende{position:absolute;left:0;right:0;bottom:clamp(28px,6vh,56px);text-align:center;font-size:var(--t-micro);color:var(--brume);opacity:0}

/* ---------- Entreprises : du site au système ---------- */
/* En surface ce que les clients voient, en profondeur ce qui fait tourner l'entreprise, puis une demande traverse les deux. */
.meca{position:relative}
.meca-cadre{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gout);align-items:center;min-height:100svh;padding-block:calc(64px + 2vh) 2vh}
.meca-recit{grid-column:1/5;grid-row:1;display:grid;align-self:center;padding-right:clamp(0px,2vw,32px)}
.meca-etape{grid-area:2/1;display:grid;gap:18px;align-content:start;justify-items:start}
.meca-etape > p:not(.etiquette){color:var(--brume-2);font-size:17px;max-width:40ch}
.meca-etape .boutons{margin-top:8px;align-items:center;gap:14px 26px}
.meca-etape:focus-within{opacity:1!important;visibility:visible!important}
.meca-scene{grid-column:5/13;grid-row:1;display:grid;place-items:center;min-width:0}
.meca-svg{width:100%;height:auto;max-height:calc(100svh - 100px);overflow:visible;font-family:var(--f)}
.meca-jalons{grid-row:1;display:flex;gap:8px;margin-bottom:30px}
.meca-jalons i{position:relative;width:44px;height:2px;background:var(--trait);overflow:hidden}
.meca-jalons b{position:absolute;inset:0;background:var(--clarte);transform:scaleX(0);transform-origin:left center}
.meca-svg .m-cadre{fill:var(--nuit-2);stroke:var(--trait-2);stroke-width:1}
.meca-svg .m-trait{fill:none;stroke:var(--trait-2);stroke-width:1}
.meca-svg .m-trait-fort{fill:none;stroke:var(--clarte);stroke-width:1}
.meca-svg .m-plein{fill:var(--clarte)}
.meca-svg .m-doux{fill:var(--brume);fill-opacity:.5}
.meca-svg .m-vide{fill:var(--nuit-3)}
.meca-svg .m-res{fill:var(--brume);fill-opacity:.45}
.meca-svg .m-res.m-vous{fill:var(--clarte);fill-opacity:1}
.meca-svg .m-anneau{fill:none;stroke:var(--clarte);stroke-width:1.5}
.meca-svg .m-orbite{fill:none;stroke:var(--brume);stroke-width:1;stroke-dasharray:2 4}
.meca-svg .m-noeud{fill:var(--nuit);stroke:var(--brume);stroke-width:1.5}
.meca-svg .m-case{fill:none;stroke:var(--trait-2);stroke-width:1}
.meca-svg .m-texte{fill:var(--brume);font-size:10.5px;font-weight:450;letter-spacing:.01em}
.meca-svg .m-texte.fort{fill:var(--clarte)}
.meca-svg .m-texte-cta{fill:var(--nuit);font-size:10.5px;font-weight:500}
.meca-svg .m-zone{fill:var(--brume);font-size:12.5px;letter-spacing:.01em}
.meca-svg .m-flottaison{fill:none;stroke:var(--trait-2);stroke-width:1}
.meca-svg .m-connexion{fill:none;stroke:var(--brume);stroke-width:1;stroke-dasharray:1 5;stroke-linecap:round;opacity:0}
.meca-svg .m-route{fill:none;stroke:none}
.meca-svg .m-halo{fill:var(--clarte);opacity:.16}
.meca-svg .m-nouveau,.meca-svg .m-notif,.meca-svg .m-voyageur,.meca-svg .m-total,.meca-svg .m-cap{opacity:0}
@media (max-width:900px),(max-height:619px){
  .meca-cadre{display:block;min-height:0;padding-block:0}
  .meca-scene{margin-bottom:clamp(40px,7vh,64px)}
  .meca-svg{max-height:none}
  .meca-recit{display:grid;gap:56px}
  .meca-etape{grid-area:auto}
  .meca-jalons{display:none}
}

/* ---------- Flux (KOSMO Systems) ---------- */
.flux{position:relative;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));column-gap:var(--gout);padding-top:6px}
.flux::before{content:"";position:absolute;left:6px;right:calc((100% - 5 * var(--gout)) / 6 - 6px);top:12px;height:1px;background:var(--trait-2)}
.flux .pas{position:relative;padding-top:38px}
.flux .pas::before{content:"";position:absolute;left:0;top:6px;width:13px;height:13px;border-radius:50%;border:1.5px solid var(--brume);background:var(--nuit);transition:background-color .35s,border-color .35s,transform .5s var(--e-precis)}
.flux .pas.allume::before{background:var(--clarte);border-color:var(--clarte);transform:scale(1.2)}
.flux .pas b{display:block;font-weight:450;font-size:16.5px;letter-spacing:-.01em;line-height:1.3}
.flux .pas span{display:block;margin-top:6px;font-size:var(--t-micro);color:var(--brume);line-height:1.45}
.flux .pas:last-child b{color:var(--clarte)}
.impulsion{position:absolute;left:0;top:6px;width:13px;height:13px;border-radius:50%;background:var(--clarte);box-shadow:0 0 0 7px rgba(236,238,237,.07);z-index:2;will-change:transform}
@media (max-width:900px){
  .flux{grid-template-columns:1fr;row-gap:26px;padding-left:34px}
  .flux::before{left:6px;right:auto;top:12px;bottom:12px;width:1px;height:auto}
  .flux .pas{padding-top:0}
  .flux .pas::before{left:-34px;top:4px}
  .impulsion{left:0;top:4px}
}

/* ---------- Trajectoire : quatre points sur une ligne ---------- */
.trajectoire{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:var(--gout)}
.trajectoire::before{content:"";position:absolute;left:0;right:0;top:9px;height:1px;background:var(--trait-2);transform-origin:left center;transform:scaleX(var(--trace,1));transition:transform 1.8s var(--e-precis)}
.trajectoire[data-tracer]{--trace:0}
.trajectoire.trace{--trace:1}
.trajectoire > a,.trajectoire > div{position:relative;padding-top:42px;display:block}
.trajectoire .t-point{position:absolute;left:0;top:0;width:19px;height:19px;border-radius:50%;background:var(--c,var(--clarte));transform:scale(0);transition:transform .8s var(--e-precis);transition-delay:calc(var(--i,0) * 160ms + .6s)}
.trajectoire.trace .t-point,.trajectoire:not([data-tracer]) .t-point{transform:none}
.trajectoire .t-point.vide{background:var(--nuit);border:1.5px solid var(--c,var(--clarte))}
.trajectoire b{display:block;font-size:var(--t-4);font-weight:400;letter-spacing:-.02em;line-height:1.15}
.trajectoire span{display:block;margin-top:6px;font-size:var(--t-petit);color:var(--brume);line-height:1.45}
.trajectoire a:hover .t-point{transform:scale(1.25)}
@media (max-width:900px){
  .trajectoire{grid-template-columns:1fr;row-gap:28px;padding-left:40px}
  .trajectoire::before{left:9px;right:auto;top:0;bottom:0;width:1px;height:auto;transform:scaleY(var(--trace,1));transform-origin:center top}
  .trajectoire > a,.trajectoire > div{padding-top:0}
  .trajectoire .t-point{left:-40px;top:2px}
}

/* ---------- Méthode : comprendre, clarifier, proposer, agir ---------- */
.methode{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:var(--gout);border-top:1px solid var(--trait)}
.methode > div{position:relative;padding-top:30px}
.methode > div::before{content:"";position:absolute;left:0;top:-5px;width:9px;height:9px;border-radius:50%;background:var(--accent);transform:scale(0);transition:transform .7s var(--e-precis);transition-delay:calc(var(--i,0) * 140ms + .2s)}
.methode.pose > div::before,.methode:not([data-poser]) > div::before{transform:none}
.methode h3{font-size:var(--t-3);letter-spacing:-.03em;line-height:1.05}
.methode p{margin-top:14px;color:var(--brume-2);font-size:16px;line-height:1.5;max-width:30ch}
.methode small{display:block;margin-top:16px;font-size:var(--t-micro);color:var(--brume);line-height:1.45;max-width:28ch}
.methode small b{display:block;color:var(--clarte);font-weight:450;margin-bottom:2px}
@media (max-width:900px){.methode{grid-template-columns:1fr 1fr;row-gap:40px}}
@media (max-width:560px){.methode{grid-template-columns:1fr}}

/* ---------- Liste de prestations ---------- */
.catalogue{border-top:1px solid var(--trait)}
.catalogue > div{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,4fr) minmax(0,5fr);column-gap:var(--gout);padding:clamp(24px,3.4vh,36px) 0;border-bottom:1px solid var(--trait);align-items:baseline}
.catalogue h3{font-size:var(--t-3);letter-spacing:-.03em;line-height:1.05}
.catalogue p{color:var(--brume-2);font-size:16.5px;line-height:1.5;max-width:38ch}
.catalogue ul{display:flex;flex-wrap:wrap;gap:8px 8px}
.catalogue li{font-size:var(--t-petit);color:var(--clarte);border:1px solid var(--trait-2);border-radius:999px;padding:6px 14px;line-height:1.3}
@media (max-width:900px){.catalogue > div{grid-template-columns:1fr;row-gap:12px}}

/* ---------- Deux formats ---------- */
.formats{display:grid;grid-template-columns:1fr 1fr;column-gap:var(--gout);border-top:1px solid var(--trait)}
.formats > div{padding:30px 0 0}
.formats > div + div{border-left:1px solid var(--trait);padding-left:var(--gout)}
.formats h3{font-size:var(--t-3);letter-spacing:-.03em}
.formats p{margin-top:14px;color:var(--brume-2);max-width:42ch}
@media (max-width:900px){.formats{grid-template-columns:1fr}.formats > div + div{border-left:0;padding-left:0;margin-top:28px;border-top:1px solid var(--trait)}}

/* ---------- Questions ---------- */
.faq{border-top:1px solid var(--trait)}
.faq details{border-bottom:1px solid var(--trait)}
.faq summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:24px;padding:clamp(22px,3vh,30px) 0;font-size:var(--t-4);letter-spacing:-.016em;line-height:1.25;cursor:pointer}
.faq summary::-webkit-details-marker{display:none}
.faq summary i{position:relative;flex:none;width:16px;height:16px}
.faq summary i::before,.faq summary i::after{content:"";position:absolute;left:0;right:0;top:50%;height:1.5px;margin-top:-.75px;background:currentColor;transition:transform .5s var(--e-precis)}
.faq summary i::after{transform:rotate(90deg)}
.faq details[open] summary i::after{transform:rotate(0deg)}
.faq details > div{padding:0 0 30px;color:var(--brume-2);max-width:68ch}

/* ---------- Grands énoncés ---------- */
.enonce{font-size:var(--t-2);line-height:1.04;letter-spacing:-.035em;max-width:20ch}
.enonce .ombre{color:var(--brume)}

/* ---------- Appel final ---------- */
.appel{padding-block:clamp(120px,20vh,240px);text-align:left}
.appel h2{font-size:var(--t-1);line-height:.95;letter-spacing:-.042em;max-width:14ch}
.appel .boutons{margin-top:clamp(36px,5vh,56px)}

/* ---------- Formulaires ---------- */
.formulaire{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gout);row-gap:clamp(28px,4vh,40px)}
.champ{display:grid;gap:12px;align-content:start}
.champ > label,.champ > .lbl{font-size:var(--t-petit);color:var(--brume-2)}
.champ input,.champ textarea{width:100%;background:transparent;border:0;border-bottom:1px solid var(--trait-2);border-radius:0;padding:12px 0;font-size:19px;color:var(--clarte);outline:none;transition:border-color .35s}
.champ textarea{resize:vertical;min-height:120px;line-height:1.5}
.champ input:focus,.champ textarea:focus{border-color:var(--clarte)}
.champ input::placeholder,.champ textarea::placeholder{color:#5C6670}
.choix{display:flex;flex-wrap:wrap;gap:10px}
.choix label{position:relative;cursor:pointer}
.choix input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.choix span{display:inline-flex;align-items:center;gap:10px;height:46px;padding:0 20px;border:1px solid var(--trait-2);border-radius:999px;font-size:15px;color:var(--brume-2);transition:border-color .35s,color .35s}
.choix span::before{content:"";width:9px;height:9px;border-radius:50%;border:1.5px solid currentColor;transition:background-color .35s}
.choix label:hover span{border-color:var(--brume)}
.choix input:checked + span{border-color:var(--clarte);color:var(--clarte)}
.choix input:checked + span::before{background:currentColor}
.choix input:focus-visible + span{outline:1.5px solid var(--accent);outline-offset:3px}
.envoi{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.envoi small{color:var(--brume);font-size:var(--t-micro);max-width:46ch}
.confirmation{display:none;padding:26px 0;border-top:1px solid var(--trait);font-size:var(--t-4);letter-spacing:-.015em}
.envoye .confirmation{display:block}
.envoye .a-masquer{display:none}

/* ---------- Pied de page ---------- */
.pied{position:relative;border-top:1px solid var(--trait);padding-top:clamp(80px,13vh,148px);padding-bottom:28px;overflow:hidden}
.pied-haut{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;flex-wrap:wrap}
.pied-signature{font-size:var(--t-2);line-height:1;letter-spacing:-.035em;max-width:15ch}
.pied-signature span{display:block;margin-top:16px;font-size:var(--t-4);letter-spacing:-.015em;color:var(--brume)}
.pied-colonnes{margin-top:clamp(64px,10vh,112px);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:var(--gout);row-gap:40px;border-top:1px solid var(--trait);padding-top:28px}
.pied-colonnes h4{font-size:var(--t-micro);font-weight:450;color:var(--brume);margin-bottom:14px}
.pied-colonnes li a{display:inline-flex;align-items:center;gap:10px;padding:5px 0;color:var(--brume-2);transition:color .3s}
.pied-colonnes li a:hover{color:var(--clarte)}
.pied-colonnes li a i{width:7px;height:7px;border-radius:50%;background:var(--c)}
.pied-geant{clip-path:inset(-60% -4% 0 -4%);display:flex;margin-top:clamp(64px,11vh,128px);font-size:calc((min(100vw, var(--max)) - 2 * var(--marge)) / 3.78);line-height:.74;color:var(--clarte);user-select:none}
.pied-bas{margin-top:clamp(28px,4vh,40px);display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px 28px;padding-top:20px;border-top:1px solid var(--trait);font-size:var(--t-micro);color:var(--brume)}
.pied-bas a{transition:color .3s}
.pied-bas a:hover{color:var(--clarte)}
.pied-bas nav{display:flex;gap:20px;flex-wrap:wrap}
@media (max-width:900px){.pied-colonnes{grid-template-columns:1fr 1fr}}

/* ---------- Intro des grands titres ---------- */
[data-intro] .mot{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.1em;margin-bottom:-.1em}
[data-intro] .mot > span{display:inline-block;transform:translateY(108%);transition:transform 1.25s var(--e-sortie);transition-delay:calc(var(--i,0) * 55ms + .12s)}
.joue [data-intro] .mot > span{transform:none}
.leve .mot-l{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.1em;margin-bottom:-.1em}
.leve .mot-l > span{display:inline-block;will-change:transform}
[data-intro="lettres"] .mots-l{display:inline-block;white-space:nowrap}
[data-intro="lettres"] .mot{padding-bottom:.14em;margin-bottom:-.14em}
[data-intro="lettres"] .mot > span{transform:translateY(112%) rotate(7deg);transform-origin:0 100%;transition:transform 1.3s var(--e-sortie);transition-delay:calc(var(--i,0) * 48ms + .1s)}
.joue [data-intro="lettres"] .mot > span{transform:none}
.point-final{display:inline-block;width:.165em;height:.165em;margin-left:.05em;border-radius:50%;background:var(--accent);transform:scale(0);transition:transform .9s var(--e-precis);transition-delay:calc(var(--n,8) * 55ms + .75s)}
.joue .point-final{transform:none}
[data-apparait]{opacity:0;transition:opacity 1.1s var(--e-sortie);transition-delay:var(--d,.9s)}
.joue [data-apparait]{opacity:1}
[data-vu]{opacity:0;transition:opacity 1.1s var(--e-sortie);transition-delay:var(--d,0s)}
[data-vu].vu{opacity:1}
[data-tracer].filet{transform:scaleX(0);transition:transform 1.5s var(--e-precis)}
[data-tracer].filet.trace{transform:none}

/* ---------- Mouvement réduit ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;transition-delay:0s!important}
  [data-ouvrir]{clip-path:none!important}
  [data-ouvrir]::after{display:none}
  [data-ouvrir] img{transform:none!important}
  [data-intro] .mot > span,.point-final{transform:none!important}
  [data-apparait],[data-vu]{opacity:1!important}
  [data-tracer].filet{transform:none!important}
  .trajectoire{--trace:1!important}
  .noeud{opacity:1!important}
  .c-point{transform:none!important}
  ::view-transition-old(root),::view-transition-new(root),::view-transition-group(*){animation:none!important}
  html.premiere .entete .marque .o.plein{animation:none!important}
  .embleme *{transition:none!important;transform:none!important;stroke-dashoffset:0!important}
  .embleme .e-vu,.tete-page .ariane,.produit-tete .ariane,.clarte > div{opacity:1!important}
  .tete-page .ariane,.produit-tete .ariane,.clarte > div,.clarte::before{transform:none!important}
  .embleme mask circle{r:330px}
}

/* =========================================================================
   Composants des pages intérieures
   ========================================================================= */
/* Bloc deux colonnes : visuel et texte */
.duo{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gout);align-items:center}
.duo > .visuel{grid-column:1/8}
.duo > .propos{grid-column:9/13}
.duo.inverse > .visuel{grid-column:6/13;grid-row:1}
.duo.inverse > .propos{grid-column:1/5;grid-row:1}
.propos{display:grid;gap:18px;align-content:start}
.propos > p:not(.etiquette):not(.expression){color:var(--brume-2)}
.propos .expression{font-size:var(--t-4);letter-spacing:-.016em;line-height:1.25;color:var(--clarte)}
.propos ul.puces{display:grid;gap:10px;margin-top:4px}
.propos ul.puces li{position:relative;padding-left:20px;color:var(--brume-2);font-size:16px;line-height:1.5}
.propos ul.puces li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:6px;border-radius:50%;background:var(--c,var(--accent))}
.propos .boutons{margin-top:8px}
@media (max-width:900px){.duo > .visuel,.duo > .propos,.duo.inverse > .visuel,.duo.inverse > .propos{grid-column:1/-1;grid-row:auto}.duo > .propos{margin-top:32px}}

/* Plaque : un univers sans écran, dessiné par ses formes */
.plaque{position:relative;aspect-ratio:16/10;display:grid;place-items:center;overflow:hidden;background:color-mix(in srgb, var(--c) 11%, var(--nuit-2));box-shadow:0 0 0 1px var(--trait)}
.plaque .picto{width:min(36%,240px);height:auto;color:var(--c)}
.plaque .note-plaque{position:absolute;left:22px;bottom:18px;font-size:var(--t-micro);color:var(--brume-2)}
.plaque::before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:color-mix(in srgb, var(--c) 30%, transparent)}

/* Trio de téléphones */
.trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.6vw,26px);align-items:center;padding:clamp(28px,5vw,64px) clamp(16px,4vw,56px);background:color-mix(in srgb, var(--c,var(--kima)) 10%, var(--nuit-2));box-shadow:0 0 0 1px var(--trait)}
.trio .telephone:nth-child(1),.trio .telephone:nth-child(3){transform:scale(.9);filter:brightness(.82)}
.trio .telephone:nth-child(2){z-index:2}

/* Fiche d'identité d'un projet */
.fiche{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:var(--gout);border-top:1px solid var(--trait);padding-top:22px}
.fiche dt{font-size:var(--t-micro);color:var(--brume);margin-bottom:8px}
.fiche dd{font-size:16px;line-height:1.5;color:var(--clarte)}
.fiche dd a{border-bottom:1px solid var(--trait-2);transition:border-color .3s}
.fiche dd a:hover{border-color:var(--clarte)}
@media (max-width:900px){.fiche{grid-template-columns:1fr 1fr;row-gap:24px}}

/* Chiffres vérifiés */
.chiffres-cles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--gout);border-top:1px solid var(--trait)}
.chiffres-cles > div{padding-top:26px}
.chiffres-cles b{display:block;font-size:var(--t-1);font-weight:400;letter-spacing:-.045em;line-height:.95;font-variant-numeric:tabular-nums}
.chiffres-cles span{display:block;margin-top:14px;font-size:16px;color:var(--brume-2);max-width:28ch;line-height:1.45}
.chiffres-cles small{display:block;margin-top:8px;font-size:var(--t-micro);color:var(--brume)}
@media (max-width:900px){.chiffres-cles{grid-template-columns:1fr;row-gap:32px}}

/* Valeurs émotionnelles */
.valeurs{display:flex;flex-wrap:wrap;gap:14px 40px;font-size:var(--t-3);letter-spacing:-.03em;line-height:1.1}
.valeurs li{display:inline-flex;align-items:center;gap:16px}
.valeurs li::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--accent)}

/* Paires de personnalité */
.paires{border-top:1px solid var(--trait)}
.paires li{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:var(--gout);padding:clamp(18px,2.6vh,26px) 0;border-bottom:1px solid var(--trait);font-size:var(--t-4);letter-spacing:-.016em;line-height:1.25}
.paires li span{color:var(--brume)}
@media (max-width:700px){.paires li{grid-template-columns:1fr;row-gap:4px}}

/* Tête des pages d'application */
.produit-tete{padding-top:calc(84px + clamp(56px,11vh,140px));padding-bottom:clamp(48px,7vh,88px)}
.produit-tete.avec-embleme{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:clamp(28px,4vw,72px);align-items:end}
.produit-tete.avec-embleme > .tete-texte{grid-column:1;grid-row:1}
.produit-tete.avec-embleme > .embleme{grid-column:2;grid-row:1;align-self:end;width:clamp(260px,25vw,400px);margin:0 -12px -18px 0}
.produit-tete.avec-embleme > .produit-bas{grid-column:1/-1;grid-row:2}
@media (max-width:1100px){.produit-tete.avec-embleme{display:block}}
.produit-tete h1{font-size:clamp(64px,13vw,236px);line-height:.86;letter-spacing:-.055em}
.produit-tete .univers{margin-top:clamp(18px,3vh,30px);font-size:var(--t-2);letter-spacing:-.035em;line-height:1;color:var(--brume-2)}
.produit-bas{margin-top:clamp(40px,6vh,72px);display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gout);align-items:end;border-top:1px solid var(--trait);padding-top:24px}
.produit-bas .chapeau{grid-column:1/7}
.produit-bas .actions{grid-column:8/13;justify-self:end;display:grid;justify-items:end;gap:18px}
@media (max-width:900px){.produit-bas .chapeau,.produit-bas .actions{grid-column:1/-1;justify-self:start;justify-items:start}.produit-bas .actions{margin-top:28px}}
.signature-produit{display:flex;justify-content:space-between;align-items:baseline;gap:20px;border-top:1px solid var(--trait);padding-top:22px;font-size:var(--t-petit);color:var(--brume)}
.signature-produit b{font-weight:450;color:var(--clarte)}
.suivant{display:flex;justify-content:space-between;align-items:center;gap:24px;padding-block:clamp(56px,9vh,104px);border-top:1px solid var(--trait)}
.suivant a{display:inline-flex;align-items:center;gap:22px;font-size:var(--t-2);letter-spacing:-.035em;line-height:1}
.suivant a i{width:16px;height:16px;border-radius:50%;background:var(--c)}
.suivant a .fleche{width:30px;height:30px}
.suivant a:hover .fleche{transform:translateX(8px)}

/* Filtres */
.filtres{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:clamp(48px,7vh,80px)}
.projet[hidden]{display:none}

/* Point de clarté, en grand */
.clarte-app{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--gout);border-top:1px solid var(--trait)}
.clarte-app > div{padding-top:26px}
.clarte-app b{display:block;font-size:var(--t-3);font-weight:400;letter-spacing:-.03em;line-height:1.05}
.clarte-app span{display:block;margin-top:12px;color:var(--brume-2);max-width:30ch}
@media (max-width:900px){.clarte-app{grid-template-columns:1fr;row-gap:28px}}

/* Réalisations en index régulier */
.projets.liste .projet{grid-column:span 6}
.projets.liste .projet:nth-child(even){margin-top:clamp(64px,14vh,160px)}
.projets.liste .trio{aspect-ratio:16/10;padding:clamp(16px,2.4vw,36px) clamp(28px,5vw,80px)}
.etiquettes{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.etiquettes span{font-size:12px;color:var(--brume-2);border:1px solid var(--trait-2);border-radius:999px;padding:4px 11px;line-height:1.3}

/* Manifeste */
.manifeste{display:grid;gap:clamp(40px,7vh,80px);max-width:1180px}
.manifeste .enonce{max-width:22ch}
.manifeste .texte p{font-size:var(--t-4);line-height:1.4;letter-spacing:-.012em;color:var(--brume-2);max-width:44ch}
.manifeste .moments{display:grid;gap:10px;font-size:var(--t-3);letter-spacing:-.03em;line-height:1.1}
.manifeste .moments li{display:flex;align-items:center;gap:18px}
.manifeste .moments li::before{content:"";flex:none;width:12px;height:12px;border-radius:50%;background:var(--c,var(--clarte))}
.manifeste .fin-manifeste{display:flex;align-items:baseline;gap:24px;flex-wrap:wrap;font-size:var(--t-2);letter-spacing:-.035em;line-height:1}
.manifeste .fin-manifeste .marque{font-size:var(--t-2)}

/* Grand symbole */
.grand-symbole{display:flex;align-items:center;justify-content:center;gap:clamp(18px,3vw,44px);aspect-ratio:16/10;background:var(--nuit);box-shadow:0 0 0 1px var(--trait)}
.grand-symbole i{display:block;width:clamp(90px,14vw,210px);aspect-ratio:1;border-radius:50%;border:clamp(10px,1.5vw,22px) solid var(--clarte)}
.grand-symbole i + i{background:var(--clarte);transform:scale(1.08)}

/* Étapes verticales */
.etapes-v{display:grid;gap:30px;position:relative;padding-left:34px}
.etapes-v::before{content:"";position:absolute;left:5px;top:8px;bottom:8px;width:1px;background:var(--trait-2)}
.etapes-v li{position:relative}
.etapes-v li::before{content:"";position:absolute;left:-34px;top:6px;width:11px;height:11px;border-radius:50%;background:var(--nuit);border:1.5px solid var(--clarte)}
.etapes-v li:first-child::before{background:var(--clarte)}
.etapes-v b{display:block;font-size:var(--t-4);font-weight:400;letter-spacing:-.016em;line-height:1.2}
.etapes-v span{display:block;margin-top:6px;color:var(--brume-2);font-size:15.5px;line-height:1.5}

/* Correctifs */
.trajectoire .t-point{margin:0}
@media (max-width:900px){.grille > *,.formulaire > *{grid-column:1/-1!important}.grille > .enonce ~ .texte{margin-top:28px}}

/* Le point se pose dans le grand symbole et dans le manifeste */
.grand-symbole i + i{transition:transform 1.1s var(--e-sortie) .35s}
.grand-symbole[data-vu]:not(.vu) i + i{transform:scale(0)}
.manifeste .moments[data-poser] li::before{transform:scale(0);transition:transform .8s var(--e-sortie);transition-delay:calc(var(--i,0) * 120ms + .1s)}
.manifeste .moments.pose li::before{transform:none}

/* Contact */
.contact{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gout);align-items:start}
.contact-suite{grid-column:1/5;display:grid;gap:clamp(44px,7vh,72px);position:sticky;top:112px}
.contact-form{grid-column:6/13}
.contact-autres{display:grid;gap:16px;justify-items:start}
.contact-autres .etiquette{margin-bottom:4px}
@media (max-width:900px){.contact{grid-template-columns:1fr;row-gap:64px}.contact-suite,.contact-form{grid-column:1/-1;position:static}}

/* Gel des transitions, pour rejouer une animation */
.fige,.fige *,.fige::before,.fige::after,.fige *::before,.fige *::after{transition:none!important}

/* Chiffres clés : le nombre, puis son unité */
.chiffres-cles b em{font-style:normal;font-size:var(--t-4);letter-spacing:-.012em;color:var(--brume-2);margin-left:.4em}

/* Un téléphone seul, posé sur un plan teinté */
.solo{display:grid;place-items:center;padding:clamp(36px,6vw,88px) clamp(24px,4vw,64px);background:color-mix(in srgb,var(--c) 10%,var(--nuit-2));box-shadow:0 0 0 1px var(--trait)}
.solo .telephone{width:min(300px,64%)}

/* =========================================================================
   Emblèmes de page : point, ligne, plan
   ========================================================================= */
.tete-page.avec-embleme{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:clamp(28px,4vw,72px);align-items:end}
.tete-page.avec-embleme > .tete-texte{grid-column:1;grid-row:1}
.tete-page.avec-embleme > .embleme{grid-column:2;grid-row:1;align-self:center;margin:-24px -12px -8px 0}
.tete-page.avec-embleme > .clarte{grid-column:1/-1;grid-row:2}
.tete-page.avec-embleme h1{max-width:15ch}
.embleme{width:clamp(290px,28vw,460px);height:auto;overflow:visible;pointer-events:none}
.embleme .e-l{fill:none;stroke:var(--brume-2);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.embleme .e-f{fill:none;stroke:var(--trait-2);stroke-width:1.2}
.embleme .e-m{fill:none;stroke:#2E3842;stroke-width:1}
.embleme .e-s{fill:var(--nuit-3);stroke:var(--trait-2);stroke-width:1.2}
.embleme .e-s2{fill:var(--nuit-2);stroke:var(--trait-2);stroke-width:1}
.embleme .e-p{fill:var(--clarte)}
.embleme .e-p2{fill:var(--brume)}
.embleme .e-l2{fill:var(--brume);fill-opacity:.55}
.embleme .e-pill{fill:var(--clarte)}
.embleme .e-a{fill:var(--accent)}
.embleme .e-a-trait{fill:none;stroke:var(--accent);stroke-width:1.5}
.embleme .e-v{fill:var(--nuit);stroke:var(--clarte);stroke-width:1.6}
.embleme .e-c{fill:none;stroke-width:1.5;stroke-linecap:round}
.embleme .e-case{fill:none;stroke:var(--brume);stroke-width:1}
.embleme .e-orbite{fill:none;stroke:var(--brume);stroke-width:1;stroke-dasharray:2 4}
.embleme .e-sel{fill:none;stroke:var(--clarte);stroke-width:1.2}
.embleme .e-scan{fill:var(--clarte)}
.embleme .e-txt{fill:var(--brume);font-family:var(--f);font-size:11px;font-weight:450;letter-spacing:.02em}
.embleme .e-txt.fort{fill:var(--clarte)}
.embleme .t{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.6s var(--e-precis);transition-delay:calc(var(--d,0s) + .45s)}
.embleme .pose{transform-box:fill-box;transform-origin:center;transform:scale(0);transition:transform .9s var(--e-sortie);transition-delay:calc(var(--d,0s) + .45s)}
.embleme .ouvre{transform-box:fill-box;transform-origin:var(--o,0 0);transform:scale(0);transition:transform 1.4s var(--e-precis);transition-delay:calc(var(--d,0s) + .45s)}
.embleme .onde{transform-box:fill-box;transform-origin:center;transform:scale(.2);opacity:0;transition:transform 1.6s var(--e-sortie),opacity 1.2s;transition-delay:calc(var(--d,0s) + .45s)}
.embleme .e-vu{opacity:0;transition:opacity 1s var(--e-sortie);transition-delay:calc(var(--d,0s) + .45s)}
.joue .embleme .t{stroke-dashoffset:0}
.joue .embleme .pose,.joue .embleme .ouvre{transform:none}
.joue .embleme .onde{transform:none;opacity:1}
.joue .embleme .e-vu{opacity:1}
/* L'entrée de page : le fil d'Ariane glisse, la ligne du point de clarté se trace, ses trois repères suivent */
.tete-page .ariane,.produit-tete .ariane{opacity:0;transform:translateY(6px);transition:opacity .9s var(--e-sortie) .15s,transform 1.1s var(--e-sortie) .15s}
.joue .tete-page .ariane,.joue .produit-tete .ariane{opacity:1;transform:none}
.clarte{border-top:0;position:relative}
.clarte::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--trait);transform:scaleX(0);transform-origin:left center;transition:transform 1.6s var(--e-precis) 1.05s}
.joue .clarte::before{transform:none}
.clarte > div{opacity:0;transform:translateY(10px);transition:opacity .9s var(--e-sortie),transform 1.1s var(--e-sortie);transition-delay:calc(1.25s + var(--i,0) * .12s)}
.clarte > div:nth-child(2){--i:1}
.clarte > div:nth-child(3){--i:2}
.joue .clarte > div{opacity:1;transform:none}
@media (max-width:1100px){.embleme{display:none}.tete-page.avec-embleme{display:block}}

/* Rail de lecture : les points se remplissent à mesure que l'on avance */
.rail{position:fixed;right:clamp(12px,1.5vw,24px);top:50%;z-index:50;display:grid;gap:10px;transform:translateY(-50%);opacity:0;pointer-events:none;transition:opacity .6s}
.rail.visible{opacity:1;pointer-events:auto}
.rail::before{content:"";position:absolute;left:8px;top:9px;bottom:9px;width:1px;background:var(--trait-2)}
.rail a{position:relative;display:block;width:17px;height:17px}
.rail a i{position:absolute;inset:4px;border-radius:50%;background:var(--nuit);border:1.5px solid var(--brume);transition:background-color .45s,border-color .45s,transform .45s var(--e-sortie)}
.rail a.passe i{background:var(--brume);border-color:var(--brume)}
.rail a.actuelle i{background:var(--accent);border-color:var(--accent);transform:scale(1.4)}
.rail a span{position:absolute;right:28px;top:50%;white-space:nowrap;font-size:var(--t-micro);color:var(--brume-2);background:var(--nuit);padding:5px 11px;border-radius:999px;box-shadow:0 0 0 1px var(--trait);opacity:0;transform:translate(6px,-50%);pointer-events:none;transition:opacity .3s,transform .45s var(--e-sortie)}
.rail:hover a span,.rail a:focus-visible span{opacity:1;transform:translate(0,-50%)}
.rail a.actuelle span{color:var(--clarte)}
body.menu-ouvert .rail{opacity:0;pointer-events:none}
@media (max-width:1100px){.rail{display:none}}

/* =========================================================================
   Vitrine d'un site : écran d'ordinateur qui défile, téléphone posé devant
   ========================================================================= */
.vitrine-site{position:relative;padding-bottom:clamp(36px,5vw,84px)}
.vitrine-site .ecran-bureau{position:relative;border-radius:10px;overflow:hidden;background:var(--nuit-2);box-shadow:0 0 0 1px var(--trait-2),0 48px 90px -48px rgba(0,0,0,.7)}
.vitrine-site .barre{display:flex;align-items:center;gap:10px;height:34px;padding:0 14px;background:var(--nuit-3);border-bottom:1px solid var(--trait);font-size:12px;color:var(--brume);letter-spacing:.01em}
.vitrine-site .barre i{flex:none;width:7px;height:7px;border-radius:50%;background:var(--c,var(--clarte))}
.vitrine-site .barre span:last-child{margin-left:auto;color:var(--brume)}
.vitrine-site .defile{aspect-ratio:16/10;overflow:hidden;background:var(--nuit-2)}
.vitrine-site .defile img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 0;transition:object-position 10s cubic-bezier(.45,0,.55,1)}
@media (hover:hover){.vitrine-site:hover .defile img{object-position:50% 100%}}
/* Les vues détaillées d'un concept, sous sa vitrine */
.concept-details{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gout);margin-top:clamp(28px,4vh,48px)}
.concept-details figure{display:grid;gap:12px;align-content:start}
.concept-details .plan{border-radius:6px}
.concept-details figcaption{font-size:var(--t-micro);color:var(--brume);line-height:1.45}
.concept-details figcaption b{display:block;color:var(--clarte);font-weight:450;font-size:14px;margin-bottom:2px}
@media (max-width:900px){.concept-details{grid-template-columns:1fr 1fr}}
@media (hover:none){.vitrine-site.vu .defile img{animation:defiler 18s ease-in-out 1.2s infinite alternate}}
@keyframes defiler{from{object-position:50% 0}to{object-position:50% 100%}}
.vitrine-site > .telephone{position:absolute;right:clamp(-12px,-1vw,0px);bottom:0;width:21%;box-shadow:0 0 0 1px var(--trait-2),0 40px 70px -24px rgba(0,0,0,.75)}
@media (max-width:700px){.vitrine-site > .telephone{width:30%}}
@media (prefers-reduced-motion:reduce){.vitrine-site .defile img{transition:none!important;animation:none!important}}

/* Blocs de concept */
.concept{padding-block:clamp(56px,9vh,112px);border-top:1px solid var(--trait)}
.concept:first-child{border-top:0;padding-top:0}
.concept .propos h3{font-size:var(--t-2);line-height:1;letter-spacing:-.035em}
.concept .propos .lieu{font-size:var(--t-micro);color:var(--brume)}
.nature-tag{display:inline-flex;align-items:center;gap:8px;font-size:12px;color:var(--brume-2);border:1px solid var(--trait-2);border-radius:999px;padding:5px 12px;line-height:1.2;width:max-content}
.nature-tag::before{content:"";width:6px;height:6px;border-radius:50%;border:1.3px solid currentColor}

/* Règles de l'Ordre */
.regles-ordre{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--gout);border-top:1px solid var(--trait)}
.regles-ordre li{position:relative;padding:22px 0 22px 30px;border-bottom:1px solid var(--trait)}
.regles-ordre li::before{content:"";position:absolute;left:2px;top:29px;width:12px;height:12px;border-radius:50%;border:1.5px solid var(--clarte)}
.regles-ordre li.non::before{border-color:var(--brume);background:linear-gradient(135deg,transparent 45%,var(--brume) 45%,var(--brume) 55%,transparent 55%)}
.regles-ordre b{display:block;font-size:var(--t-4);font-weight:400;letter-spacing:-.016em;line-height:1.25}
.regles-ordre span{display:block;margin-top:6px;color:var(--brume-2);font-size:15.5px;line-height:1.5;max-width:46ch}
.source-ordre{margin-top:24px;font-size:var(--t-micro);color:var(--brume);max-width:80ch;line-height:1.5}
@media (max-width:900px){.regles-ordre{grid-template-columns:1fr}}

/* =========================================================================
   Galerie des réalisations : le défilement vertical devient horizontal
   ========================================================================= */
.galerie-travaux{position:relative;height:340vh}
.galerie-colle{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:flex;flex-direction:column;justify-content:center;gap:clamp(28px,5vh,56px);padding-top:64px}
.galerie-tete{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,auto);align-items:end;gap:24px}
.galerie-tete .etiquette{margin-bottom:clamp(18px,2.6vh,28px)}
.galerie-tete .chapeau{max-width:34ch;font-size:16.5px}
.galerie-piste{display:flex;align-items:flex-start;gap:clamp(20px,2.6vw,44px);padding-inline:var(--marge);will-change:transform}
.travail{flex:none;width:clamp(300px,40vw,700px);display:block}
.travail-visuel{aspect-ratio:16/10;overflow:hidden;background:var(--nuit-2);box-shadow:0 0 0 1px var(--trait)}
.travail-visuel .plan{width:100%;height:100%;box-shadow:none}
.travail-visuel .plan img{transition:transform 1.2s var(--e-sortie)}
.travail:hover .travail-visuel .plan.fini img{transform:scale(1.03)}
.travail-visuel .plan img{scale:1.12}
.travail-visuel .trio{height:100%;aspect-ratio:auto;padding:clamp(14px,2vw,30px) clamp(26px,4.4vw,72px)}
.travail-meta{margin-top:18px;display:grid;gap:6px}
.travail-meta .nature{display:inline-flex;align-items:center;gap:9px;font-size:var(--t-micro);color:var(--brume)}
.travail-meta .nature i{width:6px;height:6px;border-radius:50%;background:var(--c,var(--clarte))}
.travail-meta h3{font-size:var(--t-4);letter-spacing:-.018em;line-height:1.2}
.travail-meta p{font-size:var(--t-petit);color:var(--brume);line-height:1.45;max-width:46ch}
.travail-fin{width:clamp(240px,24vw,380px);aspect-ratio:16/10;display:flex;flex-direction:column;justify-content:space-between;padding:clamp(22px,2.4vw,34px);border:1px solid var(--trait-2);transition:border-color .4s,background-color .4s}
.travail-fin:hover{border-color:var(--clarte);background:var(--nuit-2)}
.travail-fin .t-3{max-width:10ch}
.fleche-ronde{display:grid;place-items:center;width:54px;height:54px;border-radius:50%;border:1px solid var(--trait-2)}
.travail-fin:hover .fleche-ronde{border-color:var(--clarte)}
.travail-fin .fleche{width:20px;height:20px}
.galerie-progres{position:relative;height:1px;background:var(--trait-2)}
.galerie-progres i{position:absolute;inset:-1px 0;background:var(--clarte);transform-origin:left center;transform:scaleX(0)}
/* Mobile et mouvement réduit : un carrousel à balayer, sans épinglage */
.galerie-travaux.libre{height:auto}
.galerie-travaux.libre .galerie-colle{position:static;height:auto;overflow:visible;padding-block:var(--section)}
.galerie-travaux.libre .galerie-piste{overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:14px;scrollbar-width:none;transform:none!important}
.galerie-travaux.libre .galerie-piste::-webkit-scrollbar{display:none}
.galerie-travaux.libre .travail{scroll-snap-align:start;width:min(84vw,560px)}
.galerie-travaux.libre .galerie-progres{display:none}
@media (max-width:900px){.galerie-tete{grid-template-columns:1fr}}

/* Deux images en regard, décalées */
.galerie-cas{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gout);align-items:start}
.galerie-cas > :first-child{grid-column:1/8}
.galerie-cas > :last-child{grid-column:8/13;margin-top:clamp(80px,16vh,200px)}
.galerie-cas.inverse > :first-child{grid-column:6/13;grid-row:1}
.galerie-cas.inverse > :last-child{grid-column:1/6;grid-row:1;margin-top:clamp(80px,16vh,200px)}
@media (max-width:900px){.galerie-cas > *{grid-column:1/-1!important;grid-row:auto!important;margin-top:0!important}.galerie-cas > * + *{margin-top:24px!important}}