/* ===========================================================================
   Astra design system : les jetons
   ---------------------------------------------------------------------------
   Releves sur la seule page dessinee, l'accueil (index.html, Figma "Brand
   identity 2025", cadre Astra Home 5 3356:3176). DESIGN.md, a la racine du
   depot, decrit chaque role et ses regles ; design-system/index.html les
   montre en vrai, jour et nuit.

   Quatre etages :
   1. la palette brute (--p-*) : des valeurs, jamais utilisees telles quelles
      par un composant ;
   2. les echelles, communes au jour et a la nuit : typo, espacements,
      rayons, mouvement, mise en page ;
   3. les roles de jour (--page, --ink-2, --line...) : ce que les composants
      lisent, couleurs, traits et ombres ;
   4. les memes roles de nuit, sous :root[data-theme="night"]. Un sous-arbre
      peut prendre l'autre theme avec .theme-night ou .theme-day.
   Les teintes translucides (traits, voiles) restent ecrites en rgba dans les
   roles : un alias ne sait pas changer l'opacite d'une couleur.
   =========================================================================== */

:root{
  /* ---- 1. palette brute --------------------------------------------------- */
  /* papiers chauds, du plus clair au plus soutenu */
  --p-paper-50:#f1efea;     /* le fond d'une case allumee */
  --p-paper-100:#eeede9;    /* la page */
  --p-paper-150:#ecebe6;    /* la colonne */
  --p-paper-200:#e9e6e1;    /* une case dans une case */
  --p-paper-300:#dbd6cb;    /* le bouton cerne survole */
  --p-paper-0:#fbfaf8;      /* le bouton clair survole */
  /* gris neutres */
  --p-grey-200:#d8d7d6;
  --p-grey-300:#c4c4c4;
  --p-grey-350:#bfbfbf;
  --p-grey-600:#757575;
  --p-grey-700:#606060;
  --p-grey-900:#252525;
  /* taupes */
  --p-taupe-400:#b9b6b0;
  --p-taupe-500:#9a9189;
  /* encres */
  --p-ink-900:#1a1714;      /* le texte */
  --p-ink-850:#221e15;      /* l'encre des boutons cernes */
  --p-slate-800:#253941;    /* les grands titres, le logotype */
  --p-slate-500:#555e6b;
  --p-black:#000;
  --p-white:#fff;
  /* orange signal : le seul accent */
  --p-orange-200:#ffbfa6;
  --p-orange-400:#e77e5e;
  --p-orange-450:#ef6f3d;
  --p-orange-500:#ec6530;
  --p-orange-550:#e45e2a;
  --p-orange-650:#d73f03;
  --p-orange-900:#9e4200;
  --p-rust-700:#743f2f;
  /* bleu ciel : le systeme, en face de l'orange humain */
  --p-sky-300:#a9bbd5;
  /* nuit : bleus profonds et brumes */
  --p-night-900:#141619;
  --p-night-850:#171a20;
  --p-night-800:#1a1e25;
  --p-night-750:#1b2029;
  --p-night-600:#3c424d;
  --p-night-500:#4d5460;
  --p-night-sky:#2c3a55;
  --p-night-rust:#8a3a24;
  --p-mist-500:#8a909b;
  --p-mist-450:#938d87;
  --p-mist-300:#aab2c0;
  --p-mist-100:#e3e8ef;
  --p-mist-50:#eceef2;
  --p-mist-25:#f2f3f5;

  /* ---- 2. echelles -------------------------------------------------------- */
  /* typo : Geist partout, Instrument Sans pour les boutons cernes */
  --f:"Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-btn:"Instrument Sans", var(--f);
  --t-hero:max(26px, 42 * var(--u));            /* titre du hero, capitales (42 a 1600) */
  --t-h2:clamp(28px, 2.25vw, 36px);             /* titre de section */
  --t-title:clamp(26px, 2.25vw, 36px);          /* titre de carte, d'appel */
  --t-stat-l:clamp(34px, 3vw, 44px);            /* chiffre d'une carte de cas */
  --t-stat:clamp(28px, 2.375vw, 38px);          /* chiffre d'une case */
  --t-statement:clamp(24px, 1.875vw, 30px);     /* phrase de marque du pied de page */
  --t-lead:clamp(20px, 1.5vw, 24px);            /* intitule, recit du manifeste */
  --t-body-l:clamp(17px, 1.25vw, 20px);         /* texte des cases, liens, temoignage */
  --t-sub:16px;                                 /* sous-titre du hero */
  --t-body:16px;                                /* boutons, legendes, mentions */
  --t-small:15px;                               /* signature du temoignage */
  --t-nav:14px;                                 /* liens de la nav */
  --t-menu:34px;                                /* menu plein ecran */
  --tr-stat:-.04em;                             /* approche des chiffres */
  --tr-display:-.03em;                          /* titres et intitules */
  --tr-text:-.02em;                             /* texte des cases */
  --tr-ui:-.01em;                               /* boutons, sous-titre */

  /* espacements : le pas de 8, plus 12 et 20 */
  --s-2:2px;
  --s-8:8px;        /* entre deux cases ; entre deux boutons d'icone */
  --s-12:12px;      /* l'interieur d'une case qui porte des cases ; entre deux boutons */
  --s-16:16px;      /* le rembourrage d'une carte */
  --s-20:20px;      /* le rembourrage horizontal d'un bouton */
  --s-24:24px;      /* sous un titre de section */
  --s-32:32px;      /* le retrait des sections et des titres ; rembourrage d'une grande case */
  --s-48:48px;
  --s-56:56px;      /* au-dessus d'un titre de section */
  --s-64:64px;
  --s-160:160px;    /* le grand souffle avant Selected Work */

  /* rayons : les cases sont a angles droits, seuls les boutons s'arrondissent */
  --r-btn:8px;
  --r-btn-line:6px;
  --r-nav:0;        /* la nav est une barre a angles droits, collee en haut */

  /* mouvement */
  --ease:cubic-bezier(.55,0,.25,1);             /* la courbe maison : depart franc, arrivee douce */
  --ease-reveal:cubic-bezier(.2,.7,.2,1);
  --ease-draw:cubic-bezier(.3,.1,.2,1);
  --ease-media:cubic-bezier(0,0,.2,1);
  --d-press:.06s;
  --d-sweep:.13s;                               /* le balayage des hachures */
  --d-hover:.2s;
  --d-fade:.3s;
  --d-veil:.45s;
  --d-draw:.9s;                                 /* un trait qui se trace */
  --stagger:.06s;                               /* d'un trait au suivant */

  /* mise en page */
  --gut:clamp(16px, 4vw, 64px);                 /* la marge hachuree de chaque cote */
  --pad:clamp(16px, 2.2vw, 32px);               /* le retrait des blocs dans la colonne */
  --nav-top:0px;                                /* la nav colle au bord haut de l'ecran */
  --nav-h:70px;
  --stick:calc(var(--nav-top) + var(--nav-h) + 16px);
  /* la largeur de l'ecran sans la barre de defilement (astra.js), et la
     colonne : les cotes du hero en sont des fractions */
  --W:min(1264px, var(--vw, 100vw) - 2 * var(--gut));
  --L:calc((var(--vw, 100vw) - var(--W)) / 2);
  --u:calc(var(--W) / 1264);
}

/* ---- 3. roles, jour -----------------------------------------------------------
   Sur :root, et sur tout element .theme-day : un sous-arbre peut garder le
   jour dans une page de nuit (et .theme-night l'inverse, plus bas). */
:root,.theme-day{
  /* surfaces */
  --page:var(--p-paper-100);     /* le fond de la page, sous les hachures des marges */
  --sec:var(--p-paper-150);      /* la colonne et les cases qu'elle porte */
  --cell:var(--p-paper-200);     /* une case dans une case : logos, chiffres, temoignage */
  --lit:var(--p-paper-50);       /* le fond d'une case survolee */
  /* textes */
  --ink:var(--p-slate-800);      /* titres du hero, logotype, nav */
  --ink-2:var(--p-ink-900);      /* titres de section, texte fort */
  --name:var(--p-black);         /* un nom, un chiffre allume */
  --grey:var(--p-grey-600);      /* texte secondaire, legendes allumees */
  --warm:var(--p-taupe-500);     /* la seconde voix des titres, les liens au repos */
  --pale:var(--p-grey-300);      /* texte au repos des cases (chiffres, "19+ other clients") */
  --quote:var(--p-slate-500);    /* le texte du temoignage */
  /* l'accent : orange, reserve a l'action principale */
  --accent:var(--p-orange-500);
  --accent-hover:var(--p-orange-450);
  --accent-press:var(--p-orange-550);
  --accent-edge:var(--p-orange-650);       /* le trait plus fonce dedans, en bas */
  --on-accent:var(--p-white);
  /* sur une couleur de client (cartes de cas) */
  --on-brand:var(--p-white);
  --on-brand-dim:rgba(255,255,255,.7);
  --light-bg:var(--p-white);               /* le bouton clair */
  --light-hover:var(--p-paper-0);
  --light-fg:var(--p-ink-900);
  /* traits : noir translucide, qui rend le #cdcdcd de la maquette sur la
     colonne. Translucide pour que l'angle pose dessous le fonce, comme deux
     traits qui se superposent. */
  --bw:.5px;
  --line:rgba(0,0,0,.13);
  --corner:rgba(0,0,0,.14);
  --plus:rgba(163,163,163,.5);
  --navline:var(--p-grey-200);
  --navicon:var(--p-grey-700);
  --veil:rgba(20,22,25,.34);     /* sous le panneau "Start a project" */
  /* le bouton cerne */
  --line-bg:rgba(219,214,203,.2);
  --line-bd:rgba(99,91,67,.4);
  --line-fg:var(--p-ink-850);
  --line-sh:0 1.5px 0 rgba(255,255,255,.6),inset 0 -1px 2px rgba(34,30,21,.2);
  --line-hover:var(--p-paper-300);
  /* logos des clients : des PNG noirs, eteints au repos */
  --logo-op:.28;
  --logo-filter:none;
  /* l'ecran a LED du pied de page */
  --led-off:rgba(0,0,0,.05);
  --led-on:var(--p-taupe-400);
  /* les deux voies de "Two ways" : le systeme en bleu, l'humain en orange */
  --track-blue:var(--p-sky-300);
  --track-orange:var(--p-orange-400);
  --track-lead:var(--p-black);
  --track-p-blue:var(--p-slate-500);
  --track-p-orange:var(--p-rust-700);
  /* les dessins au trait */
  --art:var(--p-black);
  --art-op:.22;
  --ghost-op:.1;                 /* le dessin en filigrane, au repos */
  /* la regle graduee */
  --rule:var(--p-grey-350);
  --rule-ink:var(--p-grey-900);
  /* les hachures : un trait de 0,75 a 45 degres, au pas de 8 */
  --hatch-lines:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M-2 2 2-2M0 8 8 0M6 10 10 6' stroke='%231a1714' stroke-opacity='.2' stroke-width='.75'/%3E%3C/svg%3E");
  --hatch-soft:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M-2 2 2-2M0 8 8 0M6 10 10 6' stroke='%231a1714' stroke-opacity='.1' stroke-width='.75'/%3E%3C/svg%3E");
  /* les interstices de l'en-tete (entre la nav, les deux cases du hero et la
     colonne) : un peu plus marques que les marges */
  --hatch-mid:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M-2 2 2-2M0 8 8 0M6 10 10 6' stroke='%231a1714' stroke-opacity='.15' stroke-width='.75'/%3E%3C/svg%3E");
  --hatch-white:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M-2 2 2-2M0 8 8 0M6 10 10 6' stroke='%23ffffff' stroke-opacity='.32' stroke-width='.75'/%3E%3C/svg%3E");
  /* ombres ; le titre : un filet clair et une ombre courte, en em, qui reste
     sous sa propre ligne (les longues ombres du Figma bavaient d'une ligne a
     l'autre du titre en capitales) */
  --title-shadow:0 1px 0 #fff,0 .06em .2em rgba(0,0,0,.05);
  --sh-accent:0 7px 1.9px -4px rgba(158,66,0,.4),inset 0 -.5px 0 rgba(255,191,166,.63),inset 0 -2px 1px var(--p-orange-650);
  --sh-accent-hover:0 9px 2.4px -4px rgba(158,66,0,.42),inset 0 -.5px 0 rgba(255,191,166,.7),inset 0 -2px 1px var(--p-orange-650);
  --sh-accent-press:0 4px 1px -3px rgba(158,66,0,.35),inset 0 -.5px 0 rgba(255,191,166,.5),inset 0 -1px 1px var(--p-orange-650);
  --sh-light:0 7px 1.9px -4px rgba(34,30,21,.3),inset 0 -.5px 0 rgba(255,255,255,.9),inset 0 -2px 1px rgba(34,30,21,.16);
  --sh-light-hover:0 9px 2.4px -4px rgba(34,30,21,.32),inset 0 -.5px 0 rgba(255,255,255,.9),inset 0 -2px 1px rgba(34,30,21,.16);
  --sh-light-press:0 4px 1px -3px rgba(34,30,21,.28),inset 0 -.5px 0 rgba(255,255,255,.8),inset 0 -1px 1px rgba(34,30,21,.16);
  color-scheme:light;

}

/* ---- 4. roles, nuit ---------------------------------------------------------
   Les memes roles, inverses sur un fond bleu nuit. Les traits translucides
   passent au blanc, les logos (des PNG noirs) sont inverses, les cases
   "Two ways" prennent des tons profonds du bleu et de l'orange du jour. */
:root[data-theme="night"],.theme-night{
  --page:var(--p-night-900);
  --sec:var(--p-night-850);
  --cell:var(--p-night-800);
  --lit:var(--p-night-750);
  --ink:var(--p-mist-100);
  --ink-2:var(--p-mist-50);
  --name:var(--p-mist-25);
  --grey:var(--p-mist-500);
  --warm:var(--p-mist-450);
  --pale:var(--p-night-600);
  --quote:rgba(255,255,255,.62);
  --line:rgba(255,255,255,.1);
  --corner:rgba(255,255,255,.16);
  --plus:rgba(150,165,190,.5);
  --navline:rgba(255,255,255,.12);
  --veil:rgba(0,0,0,.5);
  --navicon:var(--p-mist-300);
  --line-bg:rgba(255,255,255,.05);
  --line-bd:rgba(255,255,255,.18);
  --line-fg:var(--p-mist-50);
  --line-sh:0 1.5px 0 rgba(255,255,255,.05),inset 0 -1px 2px rgba(0,0,0,.45);
  --line-hover:rgba(255,255,255,.14);
  --logo-op:.42;
  --logo-filter:invert(1);
  --led-off:rgba(255,255,255,.05);
  --led-on:var(--p-night-500);
  --track-blue:var(--p-night-sky);
  --track-orange:var(--p-night-rust);
  --track-lead:var(--p-mist-25);
  --track-p-blue:rgba(255,255,255,.62);
  --track-p-orange:rgba(255,255,255,.62);
  --art:var(--p-white);
  --art-op:.3;
  --ghost-op:.13;
  --rule:rgba(255,255,255,.2);
  --rule-ink:var(--p-mist-50);
  --hatch-lines:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M-2 2 2-2M0 8 8 0M6 10 10 6' stroke='%23ffffff' stroke-opacity='.16' stroke-width='.75'/%3E%3C/svg%3E");
  --hatch-soft:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M-2 2 2-2M0 8 8 0M6 10 10 6' stroke='%23ffffff' stroke-opacity='.08' stroke-width='.75'/%3E%3C/svg%3E");
  --hatch-mid:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M-2 2 2-2M0 8 8 0M6 10 10 6' stroke='%23ffffff' stroke-opacity='.12' stroke-width='.75'/%3E%3C/svg%3E");
  --title-shadow:0 1px 0 rgba(0,0,0,.5),0 .06em .2em rgba(0,0,0,.3);
  color-scheme:dark;
}