/* loiclelay.designer, tokens (compiled from tokens.json). Dark only.
   Load first, then components/bundle.css. */
@font-face{font-family:'General Sans';font-style:normal;font-weight:300;font-display:swap;src:url('fonts/general-sans-300.woff2') format('woff2')}
@font-face{font-family:'General Sans';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/general-sans-400.woff2') format('woff2')}
@font-face{font-family:'General Sans';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/general-sans-500.woff2') format('woff2')}
@font-face{font-family:'General Sans';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/general-sans-600.woff2') format('woff2')}
@font-face{font-family:'General Sans';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/general-sans-700.woff2') format('woff2')}
:root,[data-theme="dark"]{color-scheme:dark;
  --ground:#08080a; /* Le seul fond du site : un noir presque pur, à peine froid */
  --surface:rgba(255,255,255,.048); /* Remplissage discret posé sur ground : fond du contrôle segmenté, cases du marquee, vignettes en attente */
  --surface-2:rgba(255,255,255,.085); /* Un cran au-dessus : survol d'une ligne de liste, pastille .tag, curseur du segmented */
  --hairline:rgba(255,255,255,.1); /* Filets de séparation : entre deux lignes de liste, entre deux questions de FAQ, sous le segmented secondaire */
  --ink:#edeff2; /* Texte principal et titres non métalliques ; fond du bouton blanc */
  --ink-2:#9ba1a9; /* Texte secondaire : lead du hero, paragraphes, liens du nav, réponses de FAQ, témoignages */
  --ink-3:#6e747c; /* Texte tertiaire : labels .lab, méta, années, footer */
  --amber:#ffa742; /* L'accent, en petites touches seulement : icônes des preuves, soulignement du segmented secondaire, numéros de section, ::selection, anneau de focus */
  --red:#e8431f; /* Le rouge braise : teinte médiane de la lumière qui suit le pointeur sur le verre et sur le segmented */
  --amber-ink:#1b1006; /* Texte posé sur un aplat amber (::selection, badge de l'étape IA) */
  --glass-bg:rgba(255,255,255,.055); /* Le remplissage du verre liquide (nav, boutons glass, panneaux, chips) */
  --glass-border:rgba(255,255,255,.14); /* Le contour intérieur 1px du verre (box-shadow inset 0 0 0 1px) */
  --glass-edge:rgba(255,255,255,.3); /* La lèvre éclairée : le filet lumineux de 1px en haut du verre (inset 0 1px 0) */
  --glass-hi:rgba(255,255,255,.07); /* Le reflet sur la face du verre : dégradé de cette valeur vers transparent à 42 % (46 % pour le nav et les boutons) */
  --flame-1:#7a1408; /* Braise, couche principale du fond animé (42 % du dégradé) */
  --flame-2:#a82410; /* Braise, cœur du dégradé du fond, du halo LED et du loader */
  --flame-3:#5a1a10; /* Braise, seconde nappe plus sombre, à droite */
  --btn-ink:#0a0a0c; /* Libellé du bouton blanc .btn-1 (17,2:1 sur ink) */
  --text:var(--ink); /* Pages case study : la couleur des titres, des valeurs de méta et du big-copy */
  --body:#aeb4bc; /* Pages case study : texte courant (tagline, body-copy, décisions, metrics) */
  --muted:#868c94; /* Pages case study : texte discret (eyebrows, alt d'une décision, catégorie du next) */
  --muted-2:#767c84; /* Pages case study : le plus discret (clés de la meta-row, légendes de galerie) */
  --white:#ffffff; /* Blanc pur des case studies : titre h3 d'une décision, grand lien Next, chiffres des metrics */
  --border:rgba(255,255,255,.09); /* Filets des case studies : haut de la meta-row, lignes d'ap-points et de l'étape IA, séparateur entre décisions */
  --border-strong:rgba(255,255,255,.17); /* Filet appuyé : séparateurs verticaux des metrics, pointillés d'un emplacement média vide */
  --card:#0e0e11; /* Fond opaque de carte des case studies */
  --panel:#111114; /* Fond opaque de panneau des case studies */
  --orange:var(--amber); /* Pages case study : le nom d'origine de l'accent, repointé sur amber (numéros, tags, stat callout, liens) */
  --orange-soft:#ffcf97; /* Haut du dégradé du badge de l'étape IA */
  --glass-shadow:0 22px 48px -26px rgba(0,0,0,.8);
  --shadow-glass:inset 0 1px 0 rgba(255,255,255,.3), inset 0 0 0 1px rgba(255,255,255,.14), inset 0 -24px 36px -28px rgba(0,0,0,.9), 0 22px 48px -26px rgba(0,0,0,.8);
  --shadow-panel:inset 0 1px 0 rgba(255,255,255,.3), inset 0 0 0 1px rgba(255,255,255,.14), 0 22px 48px -26px rgba(0,0,0,.8);
  --shadow-lip:inset 0 1px 0 rgba(255,255,255,.3), inset 0 0 0 1px rgba(255,255,255,.14);
  --shadow-btn-1:inset 0 1px 0 rgba(255,255,255,.6);
  --shadow-btn-1-hover:inset 0 1px 0 rgba(255,255,255,.7), 0 16px 30px -16px rgba(255,255,255,.3);
  --shadow-btn-1-lit:inset 0 1px 0 rgba(255,255,255,.7), 0 10px 30px -8px rgba(255,167,66,.62);
  --shadow-btn-2-hover:inset 0 1px 0 rgba(255,255,255,.3), inset 0 0 0 1px rgba(255,255,255,.22), 0 16px 34px -20px rgba(0,0,0,.9);
  --shadow-seg-glow:inset 0 0 0 1px rgba(255,255,255,.1), inset 0 1px 0 rgba(255,255,255,.16), 0 18px 40px -24px rgba(0,0,0,.9);
  --shadow-thumb:0 1px 2px rgba(0,0,0,.35);
  --shadow-pop:inset 0 1px 0 rgba(255,255,255,.3), inset 0 0 0 1px rgba(255,255,255,.14), 0 26px 54px -22px rgba(0,0,0,.72);
  --shadow-media:0 30px 70px -30px rgba(0,0,0,.7);
  --shadow-peek:0 40px 80px -42px rgba(0,0,0,.95), inset 0 0 0 1px rgba(255,255,255,.14);
  --shadow-lightbox:0 48px 120px -40px rgba(0,0,0,.95);
}
:root{
  /* spacing */
  --maxw:1120px;
  --maxw-cs:1200px;
  --gut-min:20px;
  --gut-max:56px;
  --nav-top:14px;
  --nav-h:56px;
  --sec-min:96px;
  --sec-max:176px;
  --section-cs:110px;
  --gap-btn:12px;
  --gap-card:14px;
  --gap-gallery:24px;
  --duo-side:300px;
  --gap-duo:56px;
  /* radius */
  --r-sm:11px;
  --r-md:16px;
  --r-lg:24px;
  --r-pill:980px;
  --r-thumb:8px;
  --r-cs:16px;
  --r-card-cs:14px;
  --r-phone:2.4rem;
  /* easing */
  --ease:cubic-bezier(.32,.72,0,1);
  --ease-out:cubic-bezier(.19,1,.22,1);
  --power3-out:cubic-bezier(.25,1,.5,1);
  --power4-out:cubic-bezier(.22,1,.36,1);
  /* duration */
  --dur-colour:.3s;
  --dur-lift:.4s;
  --dur-roll:.5s;
  --dur-seg:.42s;
  --dur-pop:.22s;
  --dur-fade:.7s;
  --dur-batch:.75s;
  --dur-split:.85s;
  --dur-reveal:.9s;
  --dur-settle:1.3s;
  --dur-ember1:26s;
  --dur-ember2:38s;
  --dur-marquee:64s;
  --dur-strip:48s;
  --dur-loader:1.8s;
  /* filter */
  --glass-blur:blur(20px) saturate(1.55);
  --glass-blur-lite:blur(10px) saturate(1.3);
  --ember-blur:blur(78px);
  --lightbox-blur:blur(14px);
  /* gradient */
  --silver:linear-gradient(97deg,#767D86 0%,#FFFFFF 18%,#B4BBC4 36%,#F4F7FA 54%,#8C939C 70%,#FFFFFF 86%,#A2A9B2 100%);
  --glow-grad:linear-gradient(145deg,rgba(255,255,255,.36) 0%,rgba(255,255,255,.08) 40%,rgba(255,255,255,.03) 66%,rgba(255,255,255,.28) 100%);
  --glow-grad-strong:linear-gradient(145deg,rgba(255,255,255,.7) 0%,rgba(255,255,255,.26) 42%,rgba(255,255,255,.08) 68%,rgba(255,255,255,.5) 100%);
  /* zIndex */
  --z-bg:0;
  --z-content:1;
  --z-peek:45;
  --z-nav:50;
  --z-pop:120;
  --z-lightbox:300;
  --z-loader:1000;
  --font-sans:"General Sans", -apple-system, system-ui, sans-serif;
}
/* Display */
.t-hero{font-family:var(--font-sans);font-size:80px;line-height:0.98;font-weight:600;letter-spacing:-0.038em}
.t-page{font-family:var(--font-sans);font-size:80px;line-height:1.04;font-weight:600;letter-spacing:-0.032em}
.t-cs-title{font-family:var(--font-sans);font-size:104px;line-height:1.14;font-weight:600;letter-spacing:-0.025em}
.t-hiw-title{font-family:var(--font-sans);font-size:86px;line-height:1.14;font-weight:600;letter-spacing:-0.025em}
.t-next{font-family:var(--font-sans);font-size:88px;line-height:1.1;font-weight:600}
.t-h2{font-family:var(--font-sans);font-size:44px;line-height:1.08;font-weight:600;letter-spacing:-0.028em}
.t-pull{font-family:var(--font-sans);font-size:44px;line-height:1.26;font-weight:400;letter-spacing:-0.026em}
.t-strip{font-family:var(--font-sans);font-size:52px;line-height:1.6;font-weight:600;letter-spacing:-0.03em}
/* Figures */
.t-figure{font-family:var(--font-sans);font-size:60px;line-height:1;font-weight:300;letter-spacing:-0.035em}
.t-metric{font-family:var(--font-sans);font-size:52px;line-height:1;font-weight:300;letter-spacing:-0.01em}
.t-stat{font-family:var(--font-sans);font-size:64px;line-height:1;font-weight:700}
/* Text */
.t-kicker{font-family:var(--font-sans);font-size:18px;line-height:1.45;font-weight:500;letter-spacing:-0.01em}
.t-lead{font-family:var(--font-sans);font-size:20px;line-height:1.55;font-weight:400}
.t-body{font-family:var(--font-sans);font-size:17px;line-height:1.6;font-weight:400}
.t-h3{font-family:var(--font-sans);font-size:17px;line-height:1.6;font-weight:500;letter-spacing:-0.015em}
.t-small{font-family:var(--font-sans);font-size:13.5px;line-height:1.62;font-weight:400}
.t-button{font-family:var(--font-sans);font-size:15px;line-height:1.3;font-weight:500}
.t-button-sm{font-family:var(--font-sans);font-size:13.5px;line-height:1.3;font-weight:500}
.t-meta{font-family:var(--font-sans);font-size:12.5px;line-height:1.6;font-weight:400}
.t-tag{font-family:var(--font-sans);font-size:12px;line-height:1.6;font-weight:400}
.t-label{font-family:var(--font-sans);font-size:11.5px;line-height:1.6;font-weight:500;letter-spacing:0.14em;text-transform:uppercase}
/* Case study */
.t-cs-kicker{font-family:var(--font-sans);font-size:14.5px;line-height:1.45;font-weight:400;letter-spacing:0.01em}
.t-tagline{font-family:var(--font-sans);font-size:22px;line-height:1.65;font-weight:400}
.t-big-copy{font-family:var(--font-sans);font-size:30px;line-height:1.5;font-weight:400}
.t-body-copy{font-family:var(--font-sans);font-size:17.5px;line-height:1.66;font-weight:400}
.t-decision{font-family:var(--font-sans);font-size:27px;line-height:1.65;font-weight:600}
.t-eyebrow{font-family:var(--font-sans);font-size:13px;line-height:1.65;font-weight:400;letter-spacing:0.16em;text-transform:uppercase}
.t-meta-key{font-family:var(--font-sans);font-size:12px;line-height:1.6;font-weight:400;letter-spacing:0.14em;text-transform:uppercase}