/* ===========================================================================
Astra design system : les composants
---------------------------------------------------------------------------
A charger apres tokens.css, avant la feuille propre a la page :
Tout ce qui est ici vient de l'accueil, la seule page dessinee (Figma
Astra Home 5, 3356:3176). Chaque composant lit les roles de tokens.css,
jamais une couleur en dur, et suit le jour comme la nuit. DESIGN.md donne
les regles d'emploi ; design-system/index.html montre chaque etat.
Sommaire
1. theme jour / nuit 10. chiffres (.figure)
2. socle 11. carrousel de cas (.work-rail, .story)
3. colonne, croix, cases 12. cases "Two ways" (.track)
4. hachures au survol 13. temoignages (.quotes, .quote-card)
5. titres 14. bande d'appel (.cta)
6. logotype 15. pied de page, ecran a LED
7. boutons 16. apparition au defilement
8. nav, menu 17. paliers 999 / 599
9. clients (.proof, .logo) 18. animations reduites
19. pastille (.spots)
20. panneau "Start a project" (.start)
21. rangees (.rows)
22. questions et recit (.qa)
Les trois derniers ne sont pas encore dans le Figma : DESIGN.md, Known
Gaps, les donne en attente de revue.
=========================================================================== */
/* ---- 1. theme jour / nuit ------------------------------------------------ */
.night-only{display:none}
:root[data-theme="night"] .day-only{display:none}
:root[data-theme="night"] .night-only{display:block}
/* un sous-arbre de nuit dans une page de jour, et l'inverse */
.theme-night .day-only{display:none}
.theme-night .night-only{display:block}
.theme-day .day-only{display:block}
.theme-day .night-only{display:none}
/* Bascule jour / nuit : la nouvelle vue se revele depuis le coin haut gauche
derriere un degrade radial, en une demi-seconde (View Transitions). */
@property --vt{syntax:'';inherits:false;initial-value:0%}
::view-transition-old(root){animation:none}
::view-transition-new(root){animation:vt-sweep .5s cubic-bezier(.45,0,.25,1) both;mix-blend-mode:normal;
-webkit-mask-image:radial-gradient(farthest-corner at 0 0,#000 calc(var(--vt) - 22%),transparent var(--vt));
mask-image:radial-gradient(farthest-corner at 0 0,#000 calc(var(--vt) - 22%),transparent var(--vt))}
@keyframes vt-sweep{from{--vt:0%}to{--vt:122%}}
/* ---- 2. socle --------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:var(--stick)}
/* Les marges hachurees du Figma : les hachures couvrent le fond de la page,
du haut jusqu'en bas, a mi-intensite ; la nav, le hero et la colonne les
recouvrent de leur propre fond. La bande unie de sa largeur s'arrete au
bas de la colonne : dessous, 24 de hachures comme sur les cotes, puis la
page finit (Elio, 17/10/2026). */
body{margin:0;overflow-x:clip;
background:linear-gradient(var(--page),var(--page)) 50% 0/var(--W) calc(100% - var(--s-24)) no-repeat,var(--hatch-soft) 0 0/8px 8px var(--page);color:var(--ink-2);font-family:var(--f);font-size:var(--t-body);line-height:1.5;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
h1,h2,h3,p,ul,ol,figure{margin:0;padding:0}
h1,h2,h3{font-weight:400}
ul,ol{list-style:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
/* l'anneau de focus : ink-2, lisible sur le papier comme autour d'un bouton orange */
:focus-visible{outline:2px solid var(--ink-2);outline-offset:3px}
/* passer la nav au clavier : le lien apparait au premier Tab */
.skip{position:absolute;left:var(--s-16);top:var(--s-8);z-index:70;padding:var(--s-8) var(--s-12);background:var(--sec);color:var(--ink-2);
border:var(--bw) solid var(--line);font-size:var(--t-body);transform:translateY(-200%)}
.skip:focus-visible{transform:none}
/* ---- 3. colonne, croix, cases ---------------------------------------------
La page tient dans une colonne de 1264 au plus, entre deux marges
hachurees. La colonne est cernee a 0,5 et marquee d'une croix a chaque
coin ; dedans, des cases cernees, separees de 8, dont chaque coin est un
peu plus sombre, comme deux traits translucides qui se superposent. */
.page{width:min(1264px, 100% - 2 * var(--gut));margin:0 auto var(--s-24)}
.column{position:relative;margin-top:10px;background:var(--sec);border:var(--bw) solid var(--line)}
/* l'accueil coupe sa colonne en deux sans que cela se voie : main, puis le
pied de page, un repere a part */
.column.col-main{border-bottom:0}
.column.col-foot{margin-top:0;border-top:0}
.plus{position:absolute;z-index:2;width:17px;height:17px;pointer-events:none;
background:linear-gradient(var(--plus),var(--plus)) center/17px .5px no-repeat,
linear-gradient(var(--plus),var(--plus)) center/.5px 17px no-repeat}
/* centree sur le milieu du trait, a un quart de pixel a l'interieur du bord */
.plus.tl{left:-8.75px;top:-8.75px}
.plus.tr{right:-8.75px;top:-8.75px}
.plus.bl{left:-8.75px;bottom:-8.75px}
.plus.br{right:-8.75px;bottom:-8.75px}
.block{padding:0 var(--pad)}
/* ---- sections : composer une nouvelle section ------------------------------
Les ouvertures de l'accueil (Astra Home 5), pour qu'une autre page s'en
serve sans home.css. Toutes a 12 des bords de la colonne, a --pad sous
1000 px.
.sec-open : la grande respiration avant une section qui commence par son
titre (Selected Work) ;
.sec-cells : une section qui s'ouvre sur des cases, 8 sous la precedente
(manifeste, Two ways) ;
.sec-band : la bande d'appel finale, 20 au-dessus, 32 dessous. */
/* la marque deposee du systeme : Photon™, en exposant,
plus petite, dans la couleur du texte, a chaque mention (Elio, 04/10/2026) */
.tm{position:relative;top:-.55em;margin-left:.04em;font-size:.5em;line-height:0;vertical-align:baseline;font-weight:inherit;letter-spacing:0;color:inherit}
.sec-open{padding:var(--s-160) var(--s-12) 0}
.sec-cells{padding:var(--s-8) var(--s-12) 0}
.sec-band{padding:var(--s-20) var(--s-12) var(--s-32)}
/* en-tete avec une action a droite (lien, fleches) : le titre garde ses
56 / 24 et ses 32 du bord, comme un .h2 seul */
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--s-16) var(--s-32);flex-wrap:wrap;padding:var(--s-56) 0 var(--s-24) var(--s-32)}
.sec-head .h2{padding:0}
/* grille de cases, 8 entre elles : --c colonnes (3 par defaut), --c-t sous
1000 px (2), --c-p sous 600 px (1) */
.grid{display:grid;gap:var(--s-8);grid-template-columns:repeat(var(--c,3),minmax(0,1fr))}
/* l'equipe (accueil, About) : la section clients de Mintlify dans nos cases
(Elio, 04/10/2026). Une piste qui defile a l'horizontale et deborde a
droite jusqu'au bord de l'ecran, comme les etudes de cas (11. ; astra.js
mesure --bl et --br) : trois cartes pleines, la quatrieme coupee. Chaque
carte : la photo carree dans sa case a la teinte des cartes chiffres
(cell), qui s'allume au survol ; dessous, le nom et le role aux tailles
de What we do (lead, puis body en quote). */
.team{container-type:inline-size}
.team-rail{display:flex;gap:var(--s-16);margin:0 calc(-1 * var(--br, 0px)) 0 calc(-1 * var(--bl, 0px));padding:0 var(--br, 0px) 0 var(--bl, 0px);
overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-left:var(--bl, 0px);scrollbar-width:none;list-style:none}
.team-rail::-webkit-scrollbar{display:none}
@media (hover:hover) and (pointer:fine){.team-rail{cursor:grab}}
.team-rail.is-dragging{cursor:grabbing;scroll-snap-type:none;user-select:none}
.team-rail.is-dragging .team-card{pointer-events:none}
.team-card{flex:0 0 calc((100cqw - 3 * var(--s-16)) / 3.35);scroll-snap-align:start;display:flex;flex-direction:column;gap:var(--s-16)}
/* la carte entiere (photo, nom, role) dans une case teintee (Elio, 17/10/2026) */
.team-card.box{padding:var(--s-8) var(--s-8) var(--s-24);background-color:var(--cell)}
.team-card.box .team-text{padding:0 var(--s-16)}
.team-img{aspect-ratio:1;background-color:var(--cell)}
.hatch.team-img>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.team-text{display:flex;flex-direction:column;gap:var(--s-8)}
.team-t{font-weight:400;font-size:var(--t-lead);line-height:1.29;letter-spacing:var(--tr-display);color:var(--ink-2)}
.team-p{max-width:22em;font-size:var(--t-body);line-height:1.5;letter-spacing:var(--tr-text);color:var(--quote);text-wrap:pretty}
/* case de texte : le titre en haut, le texte en bas ; texte lisible en
ardoise (--quote, 5,27:1 sur la case), jamais en --warm */
.cell{display:flex;flex-direction:column;justify-content:space-between;gap:var(--s-24);padding:var(--s-32)}
.cell-t{font-weight:400;font-size:var(--t-body-l);line-height:1.3;letter-spacing:var(--tr-text);color:var(--ink-2)}
.cell-p{max-width:26.5em;font-size:var(--t-body);line-height:1.625;letter-spacing:var(--tr-text);color:var(--quote)}
.cell-p b{font-weight:400;color:var(--ink-2)}
.cell-p a{color:var(--ink-2);text-decoration:underline;text-decoration-thickness:var(--bw);text-underline-offset:3px}
/* en haut de la case, une icone (24, ink-2) au-dessus du titre, 8 entre eux */
.cell-head{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s-8);color:var(--ink-2)}
/* un texte d'ouverture dans une case : lead, ink-2 */
.cell-lead{max-width:26.5em;font-weight:400;font-size:var(--t-lead);line-height:1.29;letter-spacing:var(--tr-display);color:var(--ink-2)}
/* grille texte + image aux proportions de la preuve (353 / 910), et grille a
rangees egales */
.grid.split{grid-template-columns:minmax(0,353fr) minmax(0,910fr)}
.grid.even{grid-auto-rows:1fr}
/* les chiffres poses dans une section (et non en tete de colonne) */
.block .figures{margin:0}
/* case image : un rendu ou une couverture recadre, cerne a 0,5 */
.media{position:relative;overflow:hidden;min-height:240px;border:var(--bw) solid var(--line);background:var(--cell)}
.media>img,.media>video{width:100%;height:100%;object-fit:cover}
/* un ratio donne en ligne fixe la hauteur : pas de minimum, sinon la case
deborde a 320 px */
.media.is-ratio{min-height:0}
/* canvas : un asset hors du site (image de partage, slide, post). Dessine a
la moitie de sa taille en pixels (600 x 315 pour 1200 x 630) et rendu a 2x
dans une fenetre de bureau (1264 px et plus) : la classe fige les tailles
fluides a leur valeur de bureau ; la colonne se pose a 16 des bords, ses
cases a 8 d'elle et entre elles. */
.canvas{--t-h2:36px;--t-title:36px;--t-stat-l:44px;--t-stat:38px;--t-statement:30px;--t-lead:24px;--t-body-l:20px;
position:relative;overflow:hidden;background:var(--hatch-soft) 0 0/8px 8px var(--page)}
.canvas>.column{position:absolute;inset:var(--s-16);margin:0;display:flex;gap:var(--s-8);padding:var(--s-8)}
.canvas .cell{gap:var(--s-32);padding:var(--s-24)}
.canvas .cell-p{font-size:var(--t-body-l);line-height:1.3}
.canvas .track-p{line-height:1.2}
.canvas.is-share .cell{padding:var(--s-20)}
.canvas .h2,.canvas .sec-head{padding:0}
.canvas .track{height:auto}
.canvas .hatch>.track-art{position:relative;left:auto;top:auto;transform:none;display:block;margin:auto}
.canvas .figure{aspect-ratio:auto}
.canvas .figure span{min-height:2.6em}
/* formats en hauteur (post, carre, story) : la case d'en-tete en haut, le
visuel prend le reste */
.canvas.is-tall>.column{flex-direction:column}
.canvas.is-tall>.column>:last-child{flex:1 1 auto}
/* chiffres dans un canvas : 8 entre eux, legende lisible en ardoise */
.canvas .figures{gap:var(--s-8);margin:0}
.canvas .figure.is-on span{color:var(--quote)}
.box{position:relative;border:var(--bw) solid var(--line);background-color:var(--sec);
background-image:
linear-gradient(var(--corner),var(--corner)),linear-gradient(var(--corner),var(--corner)),
linear-gradient(var(--corner),var(--corner)),linear-gradient(var(--corner),var(--corner)),
linear-gradient(var(--corner),var(--corner)),linear-gradient(var(--corner),var(--corner)),
linear-gradient(var(--corner),var(--corner)),linear-gradient(var(--corner),var(--corner));
background-size:8px var(--bw),var(--bw) 8px,8px var(--bw),var(--bw) 8px,8px var(--bw),var(--bw) 8px,8px var(--bw),var(--bw) 8px;
background-position:0 0,0 0,100% 0,100% 0,0 100%,0 100%,100% 100%,100% 100%;
background-repeat:no-repeat;background-origin:border-box;background-clip:border-box}
/* une case image dans une boite garde le papier en retrait */
.box.media{background-color:var(--cell)}
/* ---- 4. hachures au survol ------------------------------------------------
En un quart de seconde : les hachures balaient la case depuis le coin haut
gauche, puis le fond clair (--lit) les recouvre dans le meme sens. Les deux
couches sont des triangles qui grandissent (clip-path) : a 200 % de cote,
ils couvrent toute la case. Sur ecran tactile, astra.js pose .is-on quand
la case entre dans l'ecran. */
.hatch{isolation:isolate;overflow:hidden}
.hatch>*{position:relative;z-index:1}
.hatch::before,.hatch::after{content:"";position:absolute;inset:0;pointer-events:none;clip-path:polygon(0 0,0 0,0 0)}
.hatch::before{
background:var(--hatch-lines) 0 0/8px 8px;
animation:hatch .5s linear infinite paused;
transition:clip-path .1s var(--ease) .05s}
.hatch::after{background:var(--lit);transition:clip-path .09s var(--ease)}
@keyframes hatch{to{background-position:32px 0}}
.hatch.is-on::before{clip-path:polygon(0 0,200% 0,0 200%);animation-play-state:running;transition:clip-path var(--d-sweep) var(--ease)}
.hatch.is-on::after{clip-path:polygon(0 0,200% 0,0 200%);transition:clip-path var(--d-sweep) var(--ease) .11s}
@media (hover:hover){
.hatch:hover::before{clip-path:polygon(0 0,200% 0,0 200%);animation-play-state:running;transition:clip-path var(--d-sweep) var(--ease)}
.hatch:hover::after{clip-path:polygon(0 0,200% 0,0 200%);transition:clip-path var(--d-sweep) var(--ease) .11s}
.logo:hover img{opacity:1;transition:opacity .12s ease .1s}
.logo-rest:hover span{color:var(--ink-2);transition:color .12s ease .1s}
}
/* sur ecran tactile, la case allumee (.is-on) montre le logo comme au survol */
.logo.is-on img{opacity:1;transition:opacity .12s ease .1s}
.logo-rest.is-on span{color:var(--ink-2);transition:color .12s ease .1s}
/* la couleur du client (Elio, 04/10/2026) : une case peut porter sa couleur
(--brand) ; au survol, c'est elle qui remplit la case a la place du fond
clair, et le logo passe en blanc (.ink-light) ou en noir (.ink-dark), le
meme PNG recolore (les filtres ont la meme forme au repos et au survol :
le passage est continu). Un logo a deux tons garde sa version (.logo-c,
meme cadre), montree a sa place : Fabric, symbole blanc et mot noir. */
.logo{--brand:var(--lit)}
/* la couleur arrive avec le meme leger liseré de hachures blanches que les
cartes d'etude de cas (.story-panel::before), fort dans le coin bas droit,
effacé vers le haut gauche : un degrade de la couleur pose par-dessus les
hachures tient lieu du masque (Elio, 17/10/2026) */
.logo.hatch::after{background:
radial-gradient(120% 90% at 100% 100%,transparent 0,color-mix(in srgb,var(--brand) 45%,transparent) 35%,var(--brand) 70%),
var(--hatch-white) 0 0/8px 8px,
var(--brand)}
.logo-rest.hatch::after,.logo:not([style*="--brand"]).hatch::after{background:var(--brand)}
.logo img{grid-area:1 / 1;filter:brightness(1) invert(0);transition:opacity .2s,filter .2s}
:root[data-theme="night"] .logo img{filter:brightness(1) invert(1)}
.logo .logo-c,:root[data-theme="night"] .logo .logo-c{opacity:0;filter:brightness(1) invert(0)}
.logo.ink-light.is-on img:not(.logo-c){filter:brightness(0) invert(1);transition:opacity .12s ease .1s,filter .12s ease .1s}
.logo.ink-dark.is-on img:not(.logo-c){filter:brightness(0) invert(0);transition:opacity .12s ease .1s,filter .12s ease .1s}
.logo.is-on:has(.logo-c) img:not(.logo-c){opacity:0}
.logo.is-on .logo-c{opacity:1}
@media (hover:hover){
.logo.ink-light:hover img:not(.logo-c){filter:brightness(0) invert(1);transition:opacity .12s ease .1s,filter .12s ease .1s}
.logo.ink-dark:hover img:not(.logo-c){filter:brightness(0) invert(0);transition:opacity .12s ease .1s,filter .12s ease .1s}
.logo:hover:has(.logo-c) img:not(.logo-c){opacity:0}
.logo:hover .logo-c{opacity:1}
}
/* ---- 5. titres ---------------------------------------------------------------
Le titre de section du Figma : Geist 36, interligne 1,08, a 32 du bord
interieur de sa section ; deux tons, l'encre puis le gris chaud
(.dim-warm) pour la seconde phrase. */
.h2{font-weight:400;font-size:var(--t-h2);line-height:1.08;letter-spacing:var(--tr-display);color:var(--ink-2);padding:var(--s-56) 0 var(--s-24) var(--s-32)}
.dim-warm{color:var(--warm)}
/* ---- 6. logotype ------------------------------------------------------------ */
@media (forced-colors:active){.astra-logo{forced-color-adjust:none;background:CanvasText}}
.astra-logo{display:block;width:137px;height:30px;background:var(--ink);
-webkit-mask:url(../media/astraos-logo.svg) no-repeat center/contain;mask:url(../media/astraos-logo.svg) no-repeat center/contain}
/* hors du site (autre origine, assets), on pose dans le span le SVG de
design-system/art/astraos-logo.svg : le masque s'efface, la couleur reste */
.astra-logo:has(svg){background:none;-webkit-mask:none;mask:none;color:var(--ink)}
.astra-logo svg{display:block;width:100%;height:100%}
/* ---- 7. boutons ---------------------------------------------------------------
Deux boutons seulement, et toujours dans cet ordre de lecture : le cerne
(.btn-line, secondaire) puis l'orange (.btn-accent, l'action principale).
L'orange est le CTA du Figma (bouton 3322:5303) : ombre portee orangee,
liseré clair et trait plus fonce dedans en bas. Au survol il se souleve
d'un pixel, au clic il s'enfonce et son ombre se resserre. Le cerne,
embosse par un liseré blanc dessous, se remplit en 0,3 s. */
.btn{display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;font-family:var(--f-btn);font-size:var(--t-body);line-height:22px;letter-spacing:0;padding:0 var(--s-20);border-radius:var(--r-btn-line);border:1px solid transparent;transition:background-color .3s ease-out,box-shadow .2s ease-in-out}
.btn-lg{height:48px}
.btn-accent{font-family:var(--f);height:48px;padding:0 var(--s-20);border:0;border-radius:var(--r-btn);background:var(--accent);color:var(--on-accent);
font-weight:400;font-size:var(--t-body);line-height:1.4;letter-spacing:var(--tr-ui);text-transform:none;
box-shadow:var(--sh-accent);
transition:background-color .2s ease-out,box-shadow .2s ease-out,transform .15s ease-out}
.btn-accent:hover,.btn-accent.is-hover{background:var(--accent-hover);transform:translateY(-1px);box-shadow:var(--sh-accent-hover)}
.btn-accent:active,.btn-accent.is-press{background:var(--accent-press);transform:translateY(1px);transition-duration:var(--d-press);box-shadow:var(--sh-accent-press)}
/* chaque bouton anime au survol a sa propre couche de rendu, comme celui de
la nav (fixe) : son survol ne redessine que lui, pas la page autour */
.btn-accent,.btn-line{will-change:transform}
.btn-line{background:var(--line-bg);border-color:var(--line-bd);color:var(--line-fg);box-shadow:var(--line-sh)}
.btn-line:hover,.btn-line.is-hover{background:var(--line-hover)}
/* les etats forces, pour les montrer (styleguide, maquettes) : .is-hover,
.is-press, .is-focus reprennent :hover, :active, :focus-visible */
.is-focus{outline:2px solid var(--accent);outline-offset:3px}
.btns{display:flex;flex-wrap:wrap;gap:var(--s-12)}
/* Le bouton d'icone : un carre de 48, construit comme le cerne, une icone
Lucide a 16 (1,5 px de trait). Grise et inerte quand il n'y a plus rien a
faire. */
.btn-icon,.work-arrow,.quote-arrow{width:48px;height:48px;padding:0;border-radius:var(--r-btn)}
.btn-icon svg,.work-arrow svg,.quote-arrow svg{width:16px;height:16px;stroke:currentColor;stroke-width:2.25;stroke-linecap:round;stroke-linejoin:round}
.btn-icon:disabled,.work-arrow:disabled,.quote-arrow:disabled{opacity:.4;cursor:default}
/* Le bouton clair, pour une surface de couleur (la couleur d'un client) :
meme construction que le CTA, en blanc. Pose seul (.btn-light), il a son
propre survol ; dans une carte de cas (.story-btn), c'est la carte qui le
souleve. */
.btn-light,.story-btn{display:inline-flex;align-items:center;justify-content:center;height:48px;padding:0 var(--s-20);border-radius:var(--r-btn);
background:var(--light-bg);color:var(--light-fg);font-size:var(--t-body);line-height:1.4;letter-spacing:var(--tr-ui);
box-shadow:var(--sh-light);
transition:transform .15s ease-out,box-shadow .2s ease-out,background-color .2s ease-out}
.btn-light{font-family:var(--f);white-space:nowrap}
.btn-light:hover,.btn-light.is-hover,.story.is-on:hover .story-btn{transform:translateY(-1px);background:var(--light-hover);box-shadow:var(--sh-light-hover)}
.btn-light:active,.btn-light.is-press,.story.is-on:active .story-btn{transform:translateY(1px);transition-duration:var(--d-press);box-shadow:var(--sh-light-press)}
/* Les icones : Lucide (design-system/icons/sprite.svg), au trait, sans
remplissage, toujours 1,5 px de trait a l'ecran quelle que soit la
taille : le trait du dessin est ramene a la taille d'affichage.
Par defaut 20 ; .icon-16, .icon-24, .icon-32 pour les autres tailles. */
.icon{display:inline-block;flex:none;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;vertical-align:middle}
.icon-16{width:16px;height:16px;stroke-width:2.25}
.icon-24{width:24px;height:24px;stroke-width:1.5}
.icon-32{width:32px;height:32px;stroke-width:1.125}
/* ---- 8. nav, menu ------------------------------------------------------------
Figma Astra Home 5 (3356:3179, 02/10/2026) : une barre de la largeur de la
colonne, collee au bord haut de l'ecran, a angles droits ; ses cellules
vont d'un bord a l'autre, separees par des filets : le logotype,
Showcase et son anneau, les liens, puis, pousses a droite, le CTA et la
bascule jour / nuit. Sous 1000 px : le logotype, la bascule et le menu
plein ecran. */
.nav{position:sticky;top:var(--nav-top);z-index:50}
.nav-bar{display:flex;align-items:stretch;height:var(--nav-h);padding:0;
background:var(--page);border:1px solid var(--navline);border-radius:var(--r-nav)}
.nav-cell{display:flex;align-items:center;padding:0 var(--s-32)}
.nav-logo{border-right:1px solid var(--navline)}
.nav-show{gap:var(--s-16);border-right:1px solid var(--navline);font-size:var(--t-nav);line-height:12px;letter-spacing:.24px;color:var(--ink)}
.nav-show svg{width:16px;height:16px;color:var(--navicon);opacity:.35;transition:opacity .25s,transform .6s var(--ease)}
.nav-show:hover svg{opacity:.8;transform:rotate(90deg)}
.nav-links{display:flex;align-items:center;gap:52px;padding:0 var(--s-32);white-space:nowrap;font-size:var(--t-nav);line-height:12px;letter-spacing:.24px;font-weight:300;color:var(--ink)}
.nav-links a,.nav-show{transition:opacity .2s}
/* la page courante : comme Showcase, en 400 */
.nav-links a[aria-current]{font-weight:400}
/* au-dessus de 1000 px la bascule garde ses 70 px ; entre 1000 et 1059 px,
les liens se resserrent pour lui laisser la place (sous 1000 px, la bascule
et le menu se partagent l'espace restant) */
@media (min-width:1000px){.theme-btn{flex:none}}
@media (max-width:1099px){.nav-links{gap:var(--s-20);padding:0 var(--s-24)}}
.nav-links a:hover{opacity:.55}
.nav-end{margin-left:auto;gap:var(--s-12);border-left:1px solid var(--navline)}
/* "Book a call" (outline, avant l'appel) : des 1280 px, liens resserres
de 1100 a 1359 px ; retire de la nav en dessous (le hero, le menu et le
panneau "Start a project" le portent) */
@media (min-width:1100px) and (max-width:1359px){.nav-links{gap:40px}}
@media (max-width:1279px){.nav-book{display:none}}
.menu-btn{display:none}
.theme-btn{display:grid;place-items:center;width:var(--nav-h);border-left:1px solid var(--navline);color:var(--ink)}
.theme-btn svg{width:20px;height:20px;transition:transform .5s var(--ease),opacity .25s}
.theme-btn:hover svg{transform:rotate(-20deg)}
.theme-btn .ico-sun{display:none}
:root[data-theme="night"] .theme-btn .ico-sun{display:block}
:root[data-theme="night"] .theme-btn .ico-moon{display:none}
.menu-overlay{position:fixed;inset:0;z-index:40;display:flex;flex-direction:column;justify-content:center;gap:18px;padding:120px var(--gut) 40px;
background:var(--page);font-size:var(--t-menu);letter-spacing:var(--tr-display);color:var(--ink);
opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s}
.menu-overlay .btn{align-self:flex-start;margin-top:var(--s-16);font-size:var(--t-body);letter-spacing:0}
.menu-overlay .btn + .btn{margin-top:0}
.menu-open .menu-overlay{opacity:1;visibility:visible;transition:opacity .3s,visibility 0s}
/* la page courante, dans le menu comme dans la nav */
.menu-overlay a[aria-current]:not(.btn){text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.18em}
.menu-open{overflow:hidden}
/* ---- 9. clients ----------------------------------------------------------------
Figma Astra Home 5 (3361:4456) : l'intitule a gauche, en deux tons, et son
lien ; a droite les logos en cinq colonnes, chacun dans sa case plus
sombre (--cell), a 12 d'ecart. Ce bloc n'est pas une case dans la
colonne : il EST le haut de la colonne, seul un trait le separe de la
suite. Au survol, les hachures puis le fond clair, et le logo s'allume. */
.proof{display:grid;grid-template-columns:minmax(220px, 353fr) minmax(0, 910fr);align-items:stretch;border-bottom:var(--bw) solid var(--line)}
.proof-intro{display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start;gap:var(--s-32);padding:var(--s-32);border-right:var(--bw) solid var(--line)}
.proof-t{font-weight:400;font-size:var(--t-lead);line-height:1.29;letter-spacing:var(--tr-display);color:var(--grey)}
.proof-t span{color:var(--name)}
.logos{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--s-12);padding:var(--s-12)}
.logo{aspect-ratio:168/128;display:grid;place-items:center;padding:0 var(--s-8);overflow:hidden;isolation:isolate;background-color:var(--cell)}
/* --h : la hauteur optique du logo, en pixels du Figma a 1600 */
.logo img{position:relative;z-index:1;width:auto;height:calc(var(--h) * clamp(.8px, .0625vw, 1.1px));max-width:84%;object-fit:contain;
opacity:var(--logo-op);filter:var(--logo-filter);transition:opacity .2s}
.logo-rest span{font-size:var(--t-body-l);line-height:1;letter-spacing:var(--tr-text);text-align:center;color:var(--pale);transition:color .1s}
/* ---- 10. chiffres ----------------------------------------------------------------
Quatre cases de 300 x 330 (Figma), l'illustration en haut, le chiffre et
sa legende en bas. Au repos : l'illustration en gris a 50 %, le texte
pale. Au survol (sur ecran tactile, quand la case est au centre de
l'ecran : .is-on, astra.js), l'image en couleur et pleine, le chiffre
noir, la legende grise, et la boucle de l'illustration joue. Les traces au
sol s'effacent vers les bords de la case. La nuit, les memes objets
rendus de nuit (stats_illus.py --nuit). */
.figures{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s-12);margin:var(--s-12) var(--s-12) var(--s-8)}
.figure{display:flex;flex-direction:column;justify-content:flex-end;gap:var(--s-12);aspect-ratio:300/330;padding:var(--s-16);overflow:hidden;background-color:var(--cell)}
.fig-art{position:absolute;left:0;right:0;top:0;aspect-ratio:300.75/248.12;opacity:.5;color:var(--ink-2);transition:opacity .3s ease}
.fig-art>*{position:absolute;inset:0;width:100%;height:100%}
.fig-plan{-webkit-mask:radial-gradient(closest-side,#000 55%,transparent);mask:radial-gradient(closest-side,#000 55%,transparent);
-webkit-mask-size:100% 100%;mask-size:100% 100%}
.fig-art img,.fig-art video{object-fit:cover;filter:grayscale(1);transition:filter .3s ease}
/* la boucle du survol : elle part de l'affiche et revient dessus ; tant
qu'elle joue, l'affiche du dessous est masquee */
.fig-art video{opacity:0}
.fig-art video.is-live{opacity:1}
.fig-art.is-playing img{visibility:hidden}
/* ---- le plan de la machine (manifeste de l'accueil, cartes Projects de How it works)
Le symbole #man-plan (viewBox -595 -271 1085 585) est pose une fois dans la page. */
/* Le plan (pointilles, cercles, hachures du Figma) est en SVG ; la machine
est une video transparente posee dessus, a l'endroit exact du cadre des
rendus : le plan est calcule avec la meme camera, la machine agrandie
de 30 % dedans (cadre de 1085 x 585). Son ombre tombe donc sur les
hachures. Safari lit le HEVC avec alpha, les autres le WebM. */
.man-plan{position:relative;width:100%;aspect-ratio:1085/585}
.man-decor{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.mp-hatch{opacity:.22}
.mp-line{stroke:var(--ink-2);stroke-opacity:.34}
.mp-grid{stroke-opacity:.26}
.mp-dot{fill:var(--ink-2);fill-opacity:.55}
.man-loop{position:absolute;left:14.65%;top:-8.90%;width:85.07%;height:108.80%;line-height:0}
.man-loop video{width:100%;height:100%;object-fit:contain}
/* une affiche et sa boucle dans le cadre des rendus : la boucle n'apparait
qu'une fois lancee, l'affiche revient a la fin (astra.js 9, ou la page) */
.man-loop>img,.man-loop>video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.man-loop>video.fig-loop,.man-loop>video.hw-loop{opacity:0}
.man-loop>video.is-live{opacity:1}
.man-loop.is-playing>img{visibility:hidden}
/* la meme grammaire hors des chiffres (What we do, Where AI fits) : le plan
pointille dessous, l'affiche detouree en couleur, la boucle qui joue une
fois au survol ([data-loop="once"], astra.js 9) puis rend l'affiche */
.plan-art{position:relative;overflow:hidden;color:var(--ink-2);background-color:var(--cell)}
.plan-art>*{position:absolute;inset:0;width:100%;height:100%}
.plan-art img,.plan-art video{object-fit:contain}
.plan-art video{opacity:0}
.plan-art video.is-live{opacity:1}
.plan-art.is-playing img{visibility:hidden}
.figure b{position:relative;font-weight:400;font-size:var(--t-stat);line-height:.89;letter-spacing:var(--tr-stat);color:var(--pale);transition:color .2s}
.figure span{position:relative;font-size:var(--t-body-l);line-height:1;letter-spacing:var(--tr-text);color:var(--pale);transition:color .2s}
.figure.is-on .fig-art{opacity:1}
.figure.is-on .fig-art img,.figure.is-on .fig-art video{filter:none}
.figure.is-on b{color:var(--name)}
.figure.is-on span{color:var(--grey)}
@media (hover:hover){
.figure:hover .fig-art{opacity:1}
.figure:hover .fig-art img,.figure:hover .fig-art video{filter:none}
.figure:hover b{color:var(--name)}
.figure:hover span{color:var(--grey)}
}
/* ---- 11. carrousel de cas ---------------------------------------------------------
La logique du carrousel "Powering businesses" de Mintlify, dans nos cases :
un titre en deux tons, les fleches et le lien a droite ; dessous, une
piste qui defile a l'horizontale et s'aimante sur chaque carte. La carte
courante est pleine, les autres attendent sous un voile (astra.js). Chaque
carte : a gauche le panneau a la couleur du client (--brand), trame de
hachures blanches qui s'effacent vers le texte ; a droite la couverture,
voilee de la couleur a 10 %, qui grossit un peu au survol. */
.work-head{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--s-16) var(--s-32);flex-wrap:wrap;padding:var(--s-48) var(--s-32) var(--s-48) var(--s-32)}
.work-head .h2{padding:0}
.work-ctrl,.quotes-ctrl{display:flex;align-items:center;gap:var(--s-8);padding-bottom:var(--s-2)}
/* une seule carte de temoignage : pas de fleches (hidden dans le HTML) */
.quotes-ctrl[hidden]{display:none}
/* La piste sort de la colonne et passe par-dessus les marges hachurees,
d'un bord de l'ecran a l'autre : astra.js mesure l'ecart entre la colonne
et chaque bord (--bl, --br). La premiere carte reste alignee sur le
texte ; la suivante deborde dans la marge de droite, la precedente dans
celle de gauche. Chaque carte fait la largeur du texte moins --peek, et
la piste finit sur assez de vide pour aligner aussi la derniere. */
.work{container-type:inline-size;--peek:32px}
.work-rail{display:flex;gap:var(--s-8);overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;
margin:0 calc(-1 * var(--br, 0px)) 0 calc(-1 * var(--bl, 0px));padding:0 calc(var(--br, 0px) + var(--peek)) 0 var(--bl, 0px);
scroll-padding-left:var(--bl, 0px)}
.work-rail::-webkit-scrollbar{display:none}
/* tiree a la souris (astra.js) : la main, et pas d'aimant pendant le geste */
@media (hover:hover) and (pointer:fine){.work-rail{cursor:grab}}
.work-rail.is-dragging{cursor:grabbing;scroll-snap-type:none;user-select:none}
.work-rail.is-dragging .story{pointer-events:none}
.story{flex:0 0 calc(100cqw - var(--peek));scroll-snap-align:start;display:grid;grid-template-columns:minmax(0,51fr) minmax(0,49fr);
gap:0;padding:var(--s-16);min-height:clamp(440px, 34.5vw, 552px)}
/* Les cartes en attente sont voilees du fond de la colonne plutot que
rendues transparentes : celles qui debordent sur les marges ne laissent
pas voir les hachures a travers elles. */
.story::after{content:"";position:absolute;inset:calc(-1 * var(--bw));background:var(--sec);opacity:.6;pointer-events:none;transition:opacity var(--d-veil) ease}
.story.is-on::after{opacity:0}
.story-panel{position:relative;display:flex;flex-direction:column;align-items:flex-start;padding:clamp(24px, 2.6vw, 40px);
overflow:hidden;background:var(--brand);color:var(--on-brand)}
.story-panel::before{content:"";position:absolute;inset:0;pointer-events:none;
background:var(--hatch-white) 0 0/8px 8px;
-webkit-mask:radial-gradient(120% 90% at 100% 100%,#000 0,rgba(0,0,0,.55) 35%,transparent 70%);
mask:radial-gradient(120% 90% at 100% 100%,#000 0,rgba(0,0,0,.55) 35%,transparent 70%)}
.story-panel>*{position:relative}
.story-logo{width:auto;height:22px;filter:brightness(0) invert(1)}
.story-t{max-width:15em;margin-top:var(--s-32);font-size:var(--t-title);line-height:1.14;letter-spacing:var(--tr-display);color:var(--on-brand-dim)}
.story-t b{font-weight:400;color:var(--on-brand)}
.story-stats{display:flex;gap:clamp(24px, 3.3vw, 48px);margin-top:var(--s-32)}
.story-stat{display:flex;flex-direction:column;gap:var(--s-8);max-width:11em;font-size:var(--t-body);line-height:1.4;letter-spacing:var(--tr-ui)}
.story-stat b{font-weight:400;font-size:var(--t-stat-l);line-height:1.1;letter-spacing:var(--tr-display)}
/* le bouton de la carte est le bouton clair (7.) ; toute la carte est le
lien, il pousse le bouton en bas du panneau */
.story-btn{margin-top:auto}
.story-media{position:relative;display:block;overflow:hidden;background:var(--brand)}
.story-media img,.story-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease-media)}
/* la boucle de la carte (astra.js, 15.) se pose sur son affiche une fois lancee */
.story-media video{opacity:0;transition:opacity .4s var(--ease),transform .5s var(--ease-media)}
.story-media.is-playing video{opacity:1}
.story-media::after{content:"";position:absolute;inset:0;background:var(--brand);opacity:.1;pointer-events:none}
.story:hover .story-media img,.story:hover .story-media video{transform:scale(1.03)}
/* ---- 12. cases "Two ways" -----------------------------------------------------------
Deux cases cote a cote, a la couleur de leur voie. Au repos, la case
grise et son dessin en filigrane, gris sur gris ; le texte en deux tons
du reste du site. Au survol, la couleur arrive comme sur les logos
(hachures puis aplat), le filigrane s'efface et le dessin se retrace, et
le texte prend les gris teintes de sa couleur. */
.tracks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-8)}
.track{display:flex;flex-direction:column;justify-content:flex-end;gap:var(--s-32);padding:var(--s-32);
/* la section tient sous la nav : le titre en haut, les deux cases
remplissent le reste de l'ecran (au plus la hauteur du Figma, 694) */
height:clamp(380px, calc(100svh - var(--nav-top) - var(--nav-h) - 196px), 694px)}
.track{cursor:pointer}
.track-p{font-size:var(--t-body-l);line-height:1;letter-spacing:var(--tr-text);color:var(--warm);transition:color .2s ease}
.track-p b{font-weight:500;color:var(--ink-2);transition:color .2s ease}
.track-blue .track-p{max-width:26.5em}
.track-orange .track-p{max-width:22.5em}
.track-blue.is-on .track-p{color:var(--track-p-blue)}
.track-orange.is-on .track-p{color:var(--track-p-orange)}
.track.is-on .track-p b{color:var(--track-lead)}
@media (hover:hover){
.track-blue:hover .track-p{color:var(--track-p-blue)}
.track-orange:hover .track-p{color:var(--track-p-orange)}
.track:hover .track-p b{color:var(--track-lead)}
}
.hatch>.track-art{position:absolute;z-index:1;left:50%;top:43.2%;width:66.5%;height:auto;transform:translate(-50%,-50%);pointer-events:none}
.art{opacity:var(--art-op);fill:none;stroke:var(--art)}
.art .fill,.art .pop{fill:var(--art);stroke:none}
.track-blue{--lit:var(--track-blue)}
.track-orange{--lit:var(--track-orange)}
/* au repos, la case prend la teinte des cases du site (--cell) ; au survol,
la couleur arrive avec le liseré de hachures blanches des logos, fort
dans le coin bas droit (Elio, 17/10/2026) */
.box.track{background-color:var(--cell)}
.track.hatch::after{background:
radial-gradient(120% 90% at 100% 100%,transparent 0,color-mix(in srgb,var(--lit) 45%,transparent) 35%,var(--lit) 70%),
var(--hatch-white) 0 0/8px 8px,
var(--lit)}
/* Le dessin, second temps du survol : les traits se tracent (dashoffset de
1 a 0 sur une longueur ramenee a 1), les points apparaissent apres. Au
repos, une copie deja tracee (.art-ghost, astra.js) tient le filigrane. */
.art-ghost{fill:none;stroke:var(--art);opacity:var(--ghost-op);transition:opacity .25s ease}
.art-ghost .fill,.art-ghost .pop{fill:var(--art);stroke:none}
.hatch.is-on .art-ghost{opacity:0;transition-duration:.15s}
@media (hover:hover){.hatch:hover .art-ghost{opacity:0;transition-duration:.15s}}
.art .draw{stroke-dasharray:1 2;stroke-dashoffset:1.02;transition:stroke-dashoffset .2s ease-in}
.art .pop{opacity:0;transition:opacity .12s}
.hatch.is-on .art .draw{stroke-dashoffset:0;transition:stroke-dashoffset var(--d-draw) var(--ease-draw) calc(var(--i) * var(--stagger))}
.hatch.is-on .art .geo-saturn{transition-duration:1.6s}
.hatch.is-on .art .pop{opacity:1;transition:opacity .35s ease calc(.2s + var(--i) * var(--stagger))}
@media (hover:hover){
.hatch:hover .art .draw{stroke-dashoffset:0;transition:stroke-dashoffset var(--d-draw) var(--ease-draw) calc(var(--i) * var(--stagger))}
.hatch:hover .art .geo-saturn{transition-duration:1.6s}
.hatch:hover .art .pop{opacity:1;transition:opacity .35s ease calc(.2s + var(--i) * var(--stagger))}
}
/* un dessin dans le flux d'une case de texte (.cell) : centre, 66,5 % de la
case au plus, 300 px au plus ; il se retrace quand la case s'allume */
.cell-art{display:block;width:min(66.5%, 300px);height:auto;margin:var(--s-8) auto}
/* ---- 13. temoignages --------------------------------------------------------------------
Figma Astra Home 5 (3475:3467, 02/10/2026) : le titre en deux tons, les
fleches a droite ; dessous, a 12 des bords de la colonne, un bac (--cell,
cerne) ou les cartes defilent a l'horizontale, a 16 d'ecart, et
s'aimantent (astra.js, comme les cas clients). La piste deborde du bac
jusqu'au bord de la colonne : la carte suivante passe sur le cerne du bac
et s'y coupe. Chaque carte : le texte, puis l'auteur, son visage (ou la
marque de sa societe) en carre de 48, son nom et son role. */
.quotes{display:flex;flex-direction:column;gap:var(--s-8);--qw:402px}
.quotes-head{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--s-16) var(--s-32);flex-wrap:wrap;padding:var(--s-56) var(--s-32) var(--s-24)}
.quotes-head .h2{padding:0}
.quotes-wrap{padding:var(--s-12);overflow:hidden}
.quotes-well{--out:calc(var(--s-16) + var(--s-12) + var(--bw));padding:var(--s-16);background:var(--cell);border:var(--bw) solid var(--line)}
.quotes-rail{display:flex;gap:var(--s-16);overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;
margin-right:calc(-1 * var(--out));padding-right:var(--out)}
.quotes-rail::-webkit-scrollbar{display:none}
@media (hover:hover) and (pointer:fine){.quotes-rail{cursor:grab}}
.quotes-rail.is-dragging{cursor:grabbing;scroll-snap-type:none;user-select:none}
.quote-card{flex:0 0 var(--qw);scroll-snap-align:start;display:flex;flex-direction:column;justify-content:center;gap:var(--s-32);margin:0;padding:var(--s-32);
background:var(--sec);border:var(--bw) solid var(--line)}
.quote-t{margin:0;font-size:var(--t-body);line-height:1.8125;letter-spacing:var(--tr-text);color:var(--quote)}
.quote-who{display:flex;align-items:center;gap:var(--s-12);padding:6px 0;font-size:var(--t-small);line-height:24px;color:var(--name)}
.quote-face{position:relative;flex:none;display:grid;place-items:center;width:48px;height:48px;overflow:hidden;background:var(--cell)}
.quote-face img{width:48px;height:48px;object-fit:cover}
/* sans portrait : la marque de la societe, en blanc sur sa couleur */
.quote-mark{background:var(--brand)}
.quote-mark img{width:30px;height:auto;object-fit:contain;filter:brightness(0) invert(1)}
/* ---- 14. bande d'appel --------------------------------------------------------------------
Figma Astra Home 5 (3356:3878), la bande de Mintlify : basse, le titre a
gauche, les deux boutons a droite (le principal en dernier) ; en fond, a
droite, les hachures fondues vers le titre. */
.cta{display:flex;align-items:center;justify-content:space-between;gap:var(--s-24) var(--s-32);flex-wrap:wrap;min-height:140px;padding:var(--s-32);
overflow:hidden;background-color:var(--cell)}
.cta::before{content:"";position:absolute;top:0;right:0;bottom:0;width:55%;pointer-events:none;
background:var(--hatch-lines) 0 0/8px 8px;
-webkit-mask:linear-gradient(to left,#000,transparent);mask:linear-gradient(to left,#000,transparent)}
.cta>*{position:relative}
.cta-t{font-weight:400;font-size:var(--t-title);line-height:1.18;letter-spacing:var(--tr-display);color:var(--ink-2)}
.cta .btns{flex-wrap:nowrap}
/* le bouton cerne est translucide : sur les hachures, on lui donne le fond
de la case dessous pour qu'il passe par-dessus */
.cta .btn-line{background:linear-gradient(var(--line-bg),var(--line-bg)),var(--cell)}
.cta .btn-line:hover{background:var(--line-hover)}
/* ---- 15. pied de page, ecran a LED ------------------------------------------------------
Meme grammaire que le reste de la colonne : cases cernees a 8 d'ecart,
intitule en haut, contenu en bas ; la phrase de marque en deux tons ;
liens gris chaud qui foncent au survol (.is-ink : la page courante) ;
l'ecran a LED ; les mentions. */
.foot{padding-top:var(--s-56);padding-bottom:var(--s-32)}
/* les colonnes du pied s'alignent sur la bande d'appel au-dessus (12 du bord) */
.foot{padding-left:var(--s-12);padding-right:var(--s-12)}
.foot-cols{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1fr);gap:var(--s-8)}
.foot-col{display:flex;flex-direction:column;justify-content:space-between;gap:var(--s-48);min-height:260px;padding:var(--s-32)}
.foot-say{max-width:18em;font-weight:400;font-size:var(--t-statement);line-height:1.2667;letter-spacing:var(--tr-text);color:var(--ink-2)}
/* comme dans le Figma, la phrase deborde un peu sur le retrait de la case
(530 pour 527) : la seconde voix tient sur une ligne a 1600 */
.foot-brand .foot-say{margin-right:calc(-1 * var(--s-8))}
/* Figma Astra Home 5 (3356:3888, 02/10/2026) : l'intitule a 20 sur une ligne
de 16, les liens a 16 sur 26 */
.foot-label{font-size:var(--t-body-l);line-height:.8;letter-spacing:var(--tr-text);color:var(--grey)}
.foot-links{display:flex;flex-direction:column;gap:var(--s-8);font-size:var(--t-body);line-height:1.625;letter-spacing:var(--tr-text);color:var(--warm)}
.foot-links a{position:relative;transition:color .25s}
/* la zone de clic deborde de 8 au-dessus et au-dessous : 42 px par lien */
.foot-links a::after{content:"";position:absolute;left:0;right:0;top:calc(-1 * var(--s-8));bottom:calc(-1 * var(--s-8))}
.foot-links a:hover,.foot-links .is-ink{color:var(--ink-2)}
.foot-links .is-ink:hover{color:var(--warm)}
/* l'ecran a LED : 194 x 43 diodes de 4,58 au pas de 6,18 (Figma 3401:1278),
dessinees dans un canvas par astra.js */
.led{margin-top:var(--s-8);aspect-ratio:1197.4/264.15}
.led canvas{display:block;width:100%;height:100%}
.legal{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s-8) var(--s-32);flex-wrap:wrap;padding-top:var(--s-16);
font-size:var(--t-body);line-height:1.3;letter-spacing:var(--tr-text);color:var(--warm)}
.legal a{color:var(--grey);transition:color .25s}
.legal a:hover{color:var(--ink-2)}
/* ---- 19. pastille --------------------------------------------------------------------------
Le prochain depart Photon, pres des boutons (hero, pricing). Figma "box
spots" (3624:1244, Elio, 05/10/2026) : une petite case (.box, ses coins)
teintee d'orange, 7,5 % sur le papier, son filet a 24 % ; une diode
carree a l'orange qui respire ; le texte en ink-2, 14 px. Plus de nombre
de places en dur : astra.js ecrit "Next Photon(tm) start: Monday, Oct 26"
a partir de data-next-start="2026-10-26" et ne montre la pastille que si
la date est posee et pas encore passee (hidden sinon, et sans script). */
.spots{display:inline-flex;align-items:center;gap:var(--s-8);min-height:var(--s-32);padding:var(--s-8) var(--s-12);
font-size:var(--t-small);line-height:1;letter-spacing:var(--tr-ui);color:var(--ink-2);background-color:var(--cell)}
.spots-dot{flex:none;width:6px;height:6px;border-radius:1px;background:var(--ink-2);animation:spots 2.4s ease-in-out infinite}
.spots[data-next-start]{border-color:color-mix(in srgb, var(--accent) 24%, var(--sec));background-color:color-mix(in srgb, var(--accent) 7.5%, var(--sec));font-size:var(--t-nav)}
.spots[data-next-start] .spots-dot{background:var(--accent)}
.spots[data-next-start] .spots-t{min-width:120px;text-align:center}
.spots[hidden]{display:none}
@keyframes spots{50%{opacity:.3}}
/* ---- 20. panneau "Start a project" ---------------------------------------------------------
Chaque bouton "Start a project" (un mailto) ouvre ce panneau (astra.js) :
un appel, Telegram, l'e-mail. Une case de la colonne, posee au centre de
l'ecran ; dedans, une case par moyen, qui s'allume comme les autres. Sous
600 px, il monte du bas de l'ecran. Sans JavaScript, le bouton reste un
mailto. */
.start{width:min(560px, 100% - 2 * var(--s-16));max-width:none;max-height:calc(100% - 2 * var(--s-16));margin:auto;padding:0;
overflow:auto;overscroll-behavior:contain;border:var(--bw) solid var(--line);background:var(--sec);color:var(--ink-2)}
.start::backdrop{background:var(--veil)}
.start[open]{animation:start-in .3s var(--ease-reveal)}
@keyframes start-in{from{opacity:0;transform:translateY(12px)}}
.start-in{padding:var(--s-12)}
.start-head{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--s-16);padding:var(--s-20) var(--s-20) var(--s-24) var(--s-20)}
.start-t{font-weight:400;font-size:var(--t-title);line-height:1.08;letter-spacing:var(--tr-display);color:var(--ink-2)}
.start-list{display:grid;gap:var(--s-8)}
.start-opt{gap:var(--s-12);padding:var(--s-24);background-color:var(--cell)}
.start-opt .cell-head{flex-direction:row;align-items:center;gap:var(--s-12);width:100%}
.start-opt .cell-head .icon:last-child{margin-left:auto;color:var(--grey);transition:transform var(--d-hover) var(--ease)}
@media (hover:hover){.start-opt:hover .cell-head .icon:last-child{transform:translate(2px,-2px);color:var(--ink-2)}}
/* ---- 21. rangees ---------------------------------------------------------------------------
Une liste dans une case : des rangees separees par le filet, sans puce ;
l'amorce en passe en ink-2. */
.rows{border-bottom:var(--bw) solid var(--line)}
.rows li{padding:var(--s-12) 0;border-top:var(--bw) solid var(--line);font-size:var(--t-body);line-height:1.5;letter-spacing:var(--tr-text);color:var(--quote)}
.rows b{font-weight:400;color:var(--ink-2)}
/* ---- 22. questions et recit (.qa) ------------------------------------------------------------
Une case par question (Pricing) ou par temps d'un recit (etudes de cas) :
details.box.cell.hatch.qa dans une .qa-list. La question en body-l ink-2,
un plus de 20 dont la barre verticale se couche : il devient un moins
(Elio, 17/10/2026) ; la reponse en .cell-p dessous (.qa-a).
Numerotee (.is-num), un petit index la precede et la reponse s'aligne sur
le titre. La case coupe ce qui depasse : l'anneau de focus passe dedans. */
.qa-list{display:grid;gap:var(--s-8)}
.box.qa{display:block;padding:0;background-color:var(--cell)}
/* .qa-s : la meme ligne de titre, sans bascule (un recit a lire en entier) */
.qa summary,.qa-s{display:flex;align-items:baseline;gap:var(--s-16);padding:var(--s-24) var(--s-32);list-style:none;cursor:pointer;
font-size:var(--t-body-l);line-height:1.3;letter-spacing:var(--tr-text);color:var(--ink-2)}
.qa summary::-webkit-details-marker{display:none}
.qa summary:focus-visible{outline-offset:-6px}
.qa-s{cursor:auto}
.qa summary>span,.qa-t{flex:1 1 auto;font:inherit;letter-spacing:inherit;color:inherit}
.qa summary small,.qa-s small{flex:none;width:2ch;font-size:var(--t-body);letter-spacing:var(--tr-ui);color:var(--quote)}
.qa summary .icon{flex:none;align-self:center}
.qa-v{transform-box:fill-box;transform-origin:center;transition:transform var(--d-fade) var(--ease)}
.qa[open] .qa-v{transform:rotate(90deg)}
/* un depliant qui se referme (astra.js, 19) : le moins redevient un plus des le clic */
details.is-closing[open] .qa-v{transform:none}
.qa-a{padding:0 var(--s-32) var(--s-32)}
.qa.is-num .qa-a{padding-left:calc(var(--s-32) + 2ch + var(--s-16))}
.qa-a .cell-p{max-width:40em}
/* ---- 16. apparition au defilement --------------------------------------------------------- */
.js [data-in]{opacity:0;transform:translateY(18px);transition:opacity .8s ease,transform .9s var(--ease-reveal)}
/* filet : si astra.js ne vient pas, tout apparait au bout de 3 s (astra.js
pose .astra sur html et reprend la main) */
.js:not(.astra) [data-in]{animation:in-late 0s 3s forwards}
@keyframes in-late{to{opacity:1;transform:none}}
/* une fenetre modale ouverte : la page derriere ne defile plus */
html.is-locked{overflow:hidden}
.js [data-in].in{opacity:1;transform:none}
/* ---- 17. paliers ---------------------------------------------------------------------------
999 : la nav se replie, les grilles passent a deux colonnes (ou une).
599 : telephone. */
@media (max-width:999px){
.nav-show,.nav-links,.nav-end{display:none}
.nav-bar{justify-content:space-between}
.theme-btn{margin-left:auto}
.nav-logo{border-right:0}
.menu-btn{display:grid;place-items:center;width:var(--nav-h);border-left:1px solid var(--navline);position:relative;z-index:60}
.menu-btn span,.menu-btn span::before{display:block;width:20px;height:1.5px;background:var(--ink);transition:transform .3s var(--ease)}
.menu-btn span{position:relative;transform:translateY(-3px)}
.menu-btn span::before{content:"";position:absolute;left:0;top:6px}
.menu-open .menu-btn span{transform:translateY(0) rotate(45deg)}
.menu-open .menu-btn span::before{transform:translateY(-6px) rotate(-90deg)}
.proof{grid-template-columns:1fr}
.proof-intro{padding:var(--s-20);gap:var(--s-20);border-right:0;border-bottom:var(--bw) solid var(--line)}
.logos{grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--s-8);padding:var(--s-8)}
.figures{grid-template-columns:repeat(2,minmax(0,1fr));margin:var(--s-12) var(--s-12) var(--s-48)}
.work{--peek:24px}
.story{grid-template-columns:1fr;grid-template-rows:auto 240px;min-height:0;gap:var(--s-8);padding:var(--s-8)}
.story-t{margin-top:var(--s-20);font-size:22px}
.story-stat b{font-size:30px}
.story-stat{font-size:14px}
.story-logo{height:18px}
.story-stats{margin:var(--s-24) 0 var(--s-32)}
.work-ctrl .btn-lg{display:none}
.tracks{grid-template-columns:1fr}
.track{height:auto;padding:var(--s-20);gap:var(--s-24)}
.track-p{line-height:1.2}
.hatch>.track-art{position:relative;left:auto;top:auto;transform:none;width:78%;max-width:420px;margin:0 auto}
.foot-cols{grid-template-columns:1fr 1fr}
.foot-brand{grid-column:1 / -1}
.foot-col{min-height:200px;padding:var(--s-16)}
.h2{padding:var(--s-48) 0 var(--s-20)}
.work-head{padding:var(--s-24) 0 var(--s-20)}
.sec-open{padding:var(--s-24) var(--pad) 0}
.sec-cells{padding:0 var(--pad)}
.sec-band{padding:var(--s-48) var(--pad) var(--s-32)}
.foot{padding-left:var(--pad);padding-right:var(--pad)}
.sec-head{padding:var(--s-48) 0 var(--s-20)}
.grid{grid-template-columns:repeat(var(--c-t,2),minmax(0,1fr))}
.team-card{flex-basis:calc((100cqw - 2 * var(--s-16)) / 2.35)}
.cell{padding:var(--s-20)}
.grid.split{grid-template-columns:minmax(0,1fr)}
.sec-cells>.grid:first-child{margin-top:var(--s-8)}
.quotes{padding:0 var(--pad);--qw:min(402px, 86%)}
.quotes-head{padding:var(--s-48) 0 var(--s-20)}
.quotes-wrap{padding:0}
.quotes-well{--out:calc(var(--s-8) + var(--pad) + var(--bw));padding:var(--s-8)}
.quotes-rail{gap:var(--s-8)}
.quote-card{padding:var(--s-24) var(--s-20);gap:var(--s-24)}
.cta{flex-direction:column;align-items:flex-start;padding:28px var(--s-20)}
}
@media (max-width:599px){
.team-rail{gap:var(--s-12)}
.team-card{flex-basis:calc((100cqw - var(--s-12)) / 1.4)}
.nav-cell{padding:0 var(--s-20)}
.logos{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-8);padding:var(--s-8)}
.figures{gap:var(--s-8)}
.figure{padding:var(--s-12);gap:var(--s-8)}
.grid{grid-template-columns:repeat(var(--c-p,1),minmax(0,1fr))}
.btns{width:100%}
.btns .btn:not(:only-child){flex:1}
.cta .btns{width:100%;flex-wrap:wrap}
.cta .btns .btn{flex:1}
.foot-cols{grid-template-columns:1fr}
.legal{flex-direction:column;gap:6px}
.start{width:100%;max-height:calc(100% - var(--s-16));margin:auto 0 0}
.start-head{padding:var(--s-16) var(--s-12) var(--s-20)}
.start-opt{padding:var(--s-20)}
.start-in{padding-bottom:calc(var(--s-12) + env(safe-area-inset-bottom, 0px))}
}
/* de 560 a 999 px, l'appel reste dans la nav, a gauche de la bascule */
@media (min-width:560px) and (max-width:999px){
.nav-end{display:flex;align-items:center;margin-left:auto}
.theme-btn{margin-left:0}
}
@media (max-width:999px){
.qa summary,.qa-s{padding:var(--s-20);gap:var(--s-12)}
.qa-a,.qa.is-num .qa-a{padding:0 var(--s-20) var(--s-20)}
}
/* ---- 18. animations reduites --------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
.btn-accent{transition:none}
.btn-accent:hover,.btn-accent:active{transform:none}
html{scroll-behavior:auto}
::view-transition-new(root){animation:none}
.js [data-in]{opacity:1;transform:none;transition:none}
.hatch::before{display:none}
.fig-art,.fig-art img,.fig-art video,.figure b,.figure span,
.hatch::after,.hatch *,.story::after,.story-media img,.story-media video,.story-btn,.btn-light{transition-duration:.01s!important;transition-delay:0s!important}
.art .draw{stroke-dashoffset:0}
.art .pop{opacity:1}
.spots-dot,.start[open]{animation:none}
.qa-v{transition:none}
}