/* ==========================================================================
   AQUILA PRIME TECHNOLOGIES — TOKENS.CSS
   Design system — variables, reset, primitives.
   Conforme à Charte_Graphique_Aquila_Prime_Technologies.docx v1.0 (13/08/2026)
   et à brief/BRIEF.md §2 (charte) et §2.4 (exigence de tokenisation).

   RÈGLE D'OR : tout le CSS des pages consomme ces tokens.
   Aucune valeur hexadécimale codée en dur en dehors de ce fichier.
   ========================================================================== */

/* Polices auto-hébergées — déjà générées, ne jamais réécrire ce fichier
   ni appeler Google Fonts (brief §0 « Zéro CDN » + §2.2). */
@import url('../fonts/fonts.css');

/* ==========================================================================
   1. RESET MODERNE (concis)
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  min-height: 100dvh;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img,
picture,
svg,
video {
  display: block;
  max-width: 100%;
  height: auto;
}

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

button {
  background: none;
  border: none;
  cursor: pointer;
}

a {
  color: inherit;
  text-decoration: none;
}

ul[class],
ol[class] {
  list-style: none;
  padding: 0;
}

table {
  border-collapse: collapse;
  width: 100%;
}

/* Cible les racines d'arbre d'isolement (ex. #app) : évite les surprises de
   sur-débordement causées par des enfants trop larges. */
#root,
#app {
  isolation: isolate;
}

/* ==========================================================================
   2. TOKENS — :root
   ========================================================================== */

:root {

  /* --------------------------------------------------------------------
     2.1 COULEURS DE MARQUE — palette strictement fermée (brief §2, charte §2.1)
     Aucune autre teinte de marque n'est autorisée (pas de bleu, vert, violet…).
     -------------------------------------------------------------------- */
  --apt-orange: #D46F03;        /* Orange Aquila — couleur signature, logotype « AQUILA PRIME » */
  --apt-orange-vif: #FA8301;    /* Orange vif — reflets/pointes des plumes, extrémité claire du dégradé */
  --apt-brun: #4A2900;          /* Brun profond — contours/ombres tête d'aigle, extrémité foncée du dégradé */
  --apt-noir: #000000;          /* Noir — logotype « TECHNOLOGIES », version monochrome */
  --apt-blanc: #FFFFFF;         /* Blanc — fond principal recommandé par la charte */

  /* Dégradé de marque officiel, repris du pictogramme (charte §2.1).
     Réservé aux accents graphiques (bandeaux, bordures, icônes, formes) —
     jamais sous de longs blocs de texte (contraste non garanti). */
  --apt-gradient-brand: linear-gradient(135deg, var(--apt-brun) 0%, var(--apt-orange) 55%, var(--apt-orange-vif) 100%);
  --apt-gradient-brand-h: linear-gradient(90deg, var(--apt-brun) 0%, var(--apt-orange) 55%, var(--apt-orange-vif) 100%);
  /* Variante radiale douce pour fonds de section sombres (évoque la courbe des plumes) */
  --apt-gradient-radial: radial-gradient(circle at 20% 20%, var(--apt-orange-vif) 0%, var(--apt-orange) 35%, var(--apt-brun) 100%);

  /* Orange assombri fonctionnel — PAS une nouvelle couleur de marque : simple
     assombrissement du même hue (~#D46F03) pour obtenir un contraste texte
     ≥ 4.5:1 sur blanc. À utiliser exclusivement pour les liens/texte orange
     de petite taille (boutons tertiaires, liens inline). Ratio mesuré ≈ 6.0:1
     sur #FFFFFF (AA texte courant, formule WCAG 2.1). Ne jamais l'utiliser
     en aplat de marque (bouton, bandeau) : réservé au texte/liens. */
  --apt-orange-text: #9A4F02;

  /* --------------------------------------------------------------------
     2.2 NEUTRES — gris dérivés du noir uniquement (charte §2.1 : « sans
     dominante colorée parasite », interdiction de concurrencer l'orange).
     Échelle 50 (quasi blanc) → 950 (quasi noir).
     -------------------------------------------------------------------- */
  --apt-gray-50:  #FAFAFA;
  --apt-gray-100: #F2F1EF;
  --apt-gray-200: #E4E2DE;
  --apt-gray-300: #CFCCC6;
  --apt-gray-400: #A9A59D;
  --apt-gray-500: #837E74;
  --apt-gray-600: #625E56;
  --apt-gray-700: #454239;
  --apt-gray-800: #2A2822;
  --apt-gray-900: #171512;
  --apt-gray-950: #0B0A08;

  /* --------------------------------------------------------------------
     2.3 COULEURS SÉMANTIQUES DE FORMULAIRE (charte §2.1 : seuls écarts admis
     hors palette de marque, réservés aux formulaires, usage discret).
     -------------------------------------------------------------------- */
  --apt-success: #2E7D32;
  --apt-success-bg: #EDF7EE;
  --apt-error: #C62828;
  --apt-error-bg: #FDECEC;
  --apt-warning: #B26A00;
  --apt-warning-bg: #FFF4E5;
  /* Info : dérivé du Brun profond de la charte, et non d'un gris bleuté —
     la charte proscrit toute dominante colorée étrangère à la palette. */
  --apt-info: #4A2900;
  --apt-info-bg: #F7F3ED;

  /* --------------------------------------------------------------------
     2.4 RÔLES SÉMANTIQUES — surface / texte / bordure
     Mode clair par défaut (fond blanc recommandé par la charte).
     -------------------------------------------------------------------- */
  --apt-bg: var(--apt-blanc);              /* fond de page par défaut */
  --apt-bg-alt: var(--apt-gray-50);        /* alternance de section claire */
  --apt-surface: var(--apt-blanc);         /* cartes, panneaux sur fond clair */
  --apt-surface-raised: var(--apt-blanc);  /* cartes surélevées (avec ombre) */

  --apt-bg-dark: var(--apt-gray-950);      /* sections sombres (alternance), header/footer sombres */
  --apt-bg-dark-alt: var(--apt-gray-900);  /* variante sombre secondaire */
  --apt-surface-dark: var(--apt-gray-900); /* cartes sur fond sombre */

  --apt-text: var(--apt-gray-950);         /* texte principal sur fond clair */
  --apt-text-muted: var(--apt-gray-600);   /* texte secondaire sur fond clair */
  --apt-text-subtle: var(--apt-gray-500);  /* légendes, méta-infos */
  --apt-text-inverse: var(--apt-blanc);    /* texte principal sur fond sombre */
  --apt-text-inverse-muted: var(--apt-gray-300); /* texte secondaire sur fond sombre */

  --apt-border: var(--apt-gray-200);       /* bordures discrètes sur fond clair */
  --apt-border-strong: var(--apt-gray-300);
  --apt-border-dark: rgba(255, 255, 255, .12); /* bordures sur fond sombre */

  --apt-brand-text: var(--apt-orange-text); /* liens/accents texte — voir 2.1 */
  --apt-brand-solid: var(--apt-orange);     /* aplats, boutons, bordures épaisses, icônes, gros titres ≥24px bold */

  /* --------------------------------------------------------------------
     2.5 TYPOGRAPHIE (charte §2.2)
     Montserrat : titres, éléments forts, sur-titres (capitales).
     Poppins : texte courant, sous-titres.
     -------------------------------------------------------------------- */
  --apt-font-heading: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
  --apt-font-body: 'Poppins', 'Helvetica Neue', Arial, sans-serif;

  --apt-fw-light: 300;
  --apt-fw-regular: 400;
  --apt-fw-medium: 500;
  --apt-fw-semibold: 600;
  --apt-fw-bold: 700;
  --apt-fw-extrabold: 800;

  /* Échelle fluide clamp(min, préféré-vw, max) — base 16px, ratio ~1.2-1.25 */
  --apt-fs-xs:   clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem);   /* 12–13px : légendes, labels */
  --apt-fs-sm:   clamp(0.875rem, 0.84rem + 0.2vw, 0.9375rem);   /* 14–15px : méta, micro-copy */
  --apt-fs-base: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);       /* 16–17px : texte courant */
  --apt-fs-md:   clamp(1.125rem, 1.07rem + 0.3vw, 1.25rem);     /* 18–20px : intro, lead */
  --apt-fs-lg:   clamp(1.125rem, 1.07rem + 0.3vw, 1.3125rem);   /* 18–21px : h6/h5 */
  --apt-fs-xl:   clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);       /* 20–24px : h4 */
  --apt-fs-2xl:  clamp(1.5rem, 1.35rem + 0.75vw, 1.875rem);     /* 24–30px : h3 */
  --apt-fs-3xl:  clamp(1.75rem, 1.55rem + 1vw, 2.375rem);       /* 28–38px : h2 */
  --apt-fs-4xl:  clamp(2rem, 1.7rem + 1.5vw, 2.875rem);         /* 32–46px : h1 de page interne */
  --apt-fs-5xl:  clamp(2.25rem, 1.9rem + 1.75vw, 3.125rem);     /* 36–50px : h1 hero d'accueil */
  --apt-fs-6xl:  clamp(2.75rem, 2.25rem + 2.5vw, 4.25rem);      /* 44–68px : chiffres compteurs */

  --apt-lh-tight: 1.1;
  --apt-lh-heading: 1.2;
  --apt-lh-snug: 1.35;
  --apt-lh-body: 1.65;
  --apt-lh-loose: 1.8;

  --apt-ls-tight: -0.02em;
  --apt-ls-normal: 0;
  --apt-ls-wide: 0.04em;      /* micro-espacement sur-titres */
  --apt-ls-wider: 0.12em;     /* sur-titres majuscules type « AQUILA PRIME » */

  /* --------------------------------------------------------------------
     2.6 ESPACEMENT — base 4px
     -------------------------------------------------------------------- */
  --apt-space-0: 0;
  --apt-space-1: 0.25rem;   /* 4px */
  --apt-space-2: 0.5rem;    /* 8px */
  --apt-space-3: 0.75rem;   /* 12px */
  --apt-space-4: 1rem;      /* 16px */
  --apt-space-5: 1.5rem;    /* 24px */
  --apt-space-6: 2rem;      /* 32px */
  --apt-space-7: 2.5rem;    /* 40px */
  --apt-space-8: 3rem;      /* 48px */
  --apt-space-9: 4rem;      /* 64px */
  --apt-space-10: 5rem;     /* 80px */
  --apt-space-11: 6rem;     /* 96px */
  --apt-space-12: 8rem;     /* 128px */

  /* Espacements fluides pour le rythme vertical des sections (voir DESIGN-SYSTEM.md) */
  --apt-space-section-y: clamp(4rem, 3rem + 4vw, 8rem);
  --apt-space-section-y-sm: clamp(2.5rem, 2rem + 2vw, 4rem);

  /* --------------------------------------------------------------------
     2.7 CONTENEURS & GRILLE — points de rupture 360 / 768 / 1024 / 1440
     -------------------------------------------------------------------- */
  --apt-bp-mobile: 22.5rem;   /* 360px */
  --apt-bp-tablet: 48rem;     /* 768px */
  --apt-bp-desktop: 64rem;    /* 1024px */
  --apt-bp-large: 90rem;      /* 1440px */

  --apt-container-max: 80rem;      /* 1280px : largeur de contenu max */
  --apt-container-narrow: 48rem;   /* 768px : colonnes de texte, FAQ */
  --apt-container-pad: clamp(1.25rem, 1rem + 2vw, 3rem); /* gouttière latérale fluide */

  --apt-grid-gap: clamp(1.5rem, 1.2rem + 1.2vw, 2.5rem);

  /* --------------------------------------------------------------------
     2.8 RAYONS
     -------------------------------------------------------------------- */
  --apt-radius-xs: 0.25rem;
  --apt-radius-sm: 0.5rem;
  --apt-radius-md: 0.75rem;
  --apt-radius-lg: 1rem;
  --apt-radius-xl: 1.5rem;
  --apt-radius-2xl: 2rem;
  --apt-radius-full: 999px;

  /* --------------------------------------------------------------------
     2.9 OMBRES — teintées brun (var(--apt-brun)) plutôt que gris neutre,
     pour rester dans l'univers chromatique de la marque (charte §2.1).
     -------------------------------------------------------------------- */
  --apt-shadow-sm: 0 1px 2px rgba(74, 41, 0, 0.06), 0 1px 1px rgba(74, 41, 0, 0.04);
  --apt-shadow-md: 0 4px 12px rgba(74, 41, 0, 0.08), 0 2px 4px rgba(74, 41, 0, 0.05);
  --apt-shadow-lg: 0 12px 32px rgba(74, 41, 0, 0.12), 0 4px 8px rgba(74, 41, 0, 0.06);
  --apt-shadow-xl: 0 24px 56px rgba(74, 41, 0, 0.16), 0 8px 16px rgba(74, 41, 0, 0.08);
  /* Ombre portée « signature », utilisable sur les cartes en vedette au survol */
  --apt-shadow-brand: 0 16px 40px rgba(212, 111, 3, 0.22);

  /* --------------------------------------------------------------------
     2.10 Z-INDEX — échelle par paliers de 10 pour laisser des marges
     -------------------------------------------------------------------- */
  --apt-z-base: 0;
  --apt-z-raised: 10;
  --apt-z-sticky: 100;
  --apt-z-header: 200;
  --apt-z-overlay: 300;
  --apt-z-modal: 400;
  --apt-z-toast: 500;
  --apt-z-tooltip: 600;

  /* --------------------------------------------------------------------
     2.11 ANIMATION — durées et courbes
     -------------------------------------------------------------------- */
  --apt-duration-fast: 150ms;
  --apt-duration-base: 250ms;
  --apt-duration-slow: 400ms;
  --apt-duration-slower: 600ms;

  --apt-ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --apt-ease-out: cubic-bezier(0, 0, 0.2, 1);
  --apt-ease-in: cubic-bezier(0.4, 0, 1, 1);
  --apt-ease-brand: cubic-bezier(0.22, 0.9, 0.32, 1); /* léger overshoot doux, pour les reveals */

  /* --------------------------------------------------------------------
     2.12 LOGO — zone de protection & tailles minimales (charte §4, §8, §9)
     X = hauteur du pictogramme. Zone de protection = padding égal à X
     tout autour du logo dans le header et le footer.
     -------------------------------------------------------------------- */
  --apt-logo-min-width: 90px;                 /* largeur minimale absolue, jamais en dessous */
  --apt-logo-ratio: 4.0609;                   /* 1600/394 — logo complet, à préserver */
  --apt-logo-picto-ratio: 1;                  /* picto carré */
  --apt-logo-header-height: clamp(2rem, 1.7rem + 1vw, 2.75rem); /* hauteur visuelle du logo en header */
  /* X — zone de protection déduite de la hauteur du picto affiché en header/footer.
     Approximation : le picto occupe ~394/1600 ≈ 24.6% de la largeur du logo complet,
     donc sa hauteur affichée ≈ hauteur du logo complet. On utilise donc directement
     --apt-logo-header-height comme valeur de X pour le padding de protection. */
  --apt-logo-protect-x: var(--apt-logo-header-height);

  /* --------------------------------------------------------------------
     2.13 FOCUS & SÉLECTION
     -------------------------------------------------------------------- */
  --apt-focus-ring: 0 0 0 3px rgba(212, 111, 3, 0.45);
  --apt-focus-ring-offset: 2px;
}

/* Mode sombre système — le site reste en thème clair par défaut (recommandation
   de charte), mais on documente les tokens de fond sombre pour les sections
   alternées et le header/footer sombres. Pas de bascule automatique du thème
   global : uniquement usage local via classes (.apt-section--dark, etc.),
   décrit dans DESIGN-SYSTEM.md. */

/* ==========================================================================
   3. STYLES DE BASE
   ========================================================================== */

html {
  scroll-behavior: smooth;
  scroll-padding-top: 5.5rem; /* compense le header sticky lors des ancres */
}

body {
  background-color: var(--apt-bg);
  color: var(--apt-text);
  font-family: var(--apt-font-body);
  font-weight: var(--apt-fw-regular);
  font-size: var(--apt-fs-base);
  line-height: var(--apt-lh-body);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--apt-font-heading);
  font-weight: var(--apt-fw-bold);
  line-height: var(--apt-lh-heading);
  letter-spacing: var(--apt-ls-tight);
  color: var(--apt-text);
}

h1 { font-size: var(--apt-fs-5xl); font-weight: var(--apt-fw-extrabold); }
h2 { font-size: var(--apt-fs-3xl); font-weight: var(--apt-fw-extrabold); }
h3 { font-size: var(--apt-fs-2xl); }
h4 { font-size: var(--apt-fs-xl); }
h5 { font-size: var(--apt-fs-lg); }
h6 {
  font-size: var(--apt-fs-md);
  text-transform: uppercase;
  letter-spacing: var(--apt-ls-wide);
}

p {
  max-width: 70ch;
}

p + p {
  margin-top: var(--apt-space-4);
}

a {
  transition: color var(--apt-duration-fast) var(--apt-ease-standard);
}

/* Liens orange en texte courant : jamais l'orange de marque brut (contraste
   ~4.0:1, insuffisant pour du petit texte, charte §2.1 / brief accessibilité).
   Utilisation systématique du ton assombri fonctionnel. */
a:not([class]) {
  color: var(--apt-brand-text);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
}

a:not([class]):hover {
  color: var(--apt-brun);
}

ul, ol {
  padding-left: 1.25em;
}

li + li {
  margin-top: var(--apt-space-2);
}

strong, b {
  font-weight: var(--apt-fw-semibold);
}

small {
  font-size: var(--apt-fs-sm);
  color: var(--apt-text-muted);
}

/* Focus visible — anneau orange, conforme WCAG 2.1 AA navigation clavier
   (brief §0). Ne s'affiche que lors d'une navigation clavier grâce à
   :focus-visible, pour ne pas polluer les interactions à la souris. */
:focus-visible {
  outline: none;
  box-shadow: var(--apt-focus-ring);
  border-radius: var(--apt-radius-xs);
}

/* Sélection de texte aux couleurs de marque */
::selection {
  background-color: var(--apt-orange);
  color: var(--apt-blanc);
}

/* Respect des préférences utilisateur de mouvement réduit — toutes les
   animations/transitions décrites dans DESIGN-SYSTEM.md doivent s'y plier. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   4. CLASSES UTILITAIRES (strict nécessaire — le reste vit dans style.css)
   ========================================================================== */

/* Conteneur central, largeur max + gouttières fluides */
.apt-container {
  width: 100%;
  max-width: var(--apt-container-max);
  margin-inline: auto;
  padding-inline: var(--apt-container-pad);
}

.apt-container--narrow {
  max-width: var(--apt-container-narrow);
}

/* Rythme vertical standard d'une section (voir DESIGN-SYSTEM.md §2) */
.apt-section {
  padding-block: var(--apt-space-section-y);
}

.apt-section--sm {
  padding-block: var(--apt-space-section-y-sm);
}

.apt-section--dark {
  background-color: var(--apt-bg-dark);
  color: var(--apt-text-inverse);
}

.apt-section--dark h1,
.apt-section--dark h2,
.apt-section--dark h3,
.apt-section--dark h4,
.apt-section--dark h5,
.apt-section--dark h6 {
  color: var(--apt-text-inverse);
}

.apt-section--alt {
  background-color: var(--apt-bg-alt);
}

/* Sur-titre en capitales, style « surtitre de catalogue » (ex. « Best solutions ») */
.apt-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--apt-space-2);
  font-family: var(--apt-font-heading);
  font-weight: var(--apt-fw-bold);
  font-size: var(--apt-fs-sm);
  text-transform: uppercase;
  letter-spacing: var(--apt-ls-wider);
  /* Petit texte (≈15px) : l'orange de marque brut ne donne que 3,46:1 sur
     blanc. On utilise l'orange assombri fonctionnel (§2.1), ≈6:1, seul
     conforme AA pour du texte de cette taille. Les variantes sur fond sombre
     (.apt-eyebrow--inverse, .apt-hero__eyebrow) restent en blanc. */
  color: var(--apt-brand-text);
}

.apt-eyebrow::before {
  content: '';
  display: inline-block;
  width: 1.5rem;
  height: 2px;
  background: var(--apt-gradient-brand-h);
  border-radius: var(--apt-radius-full);
}

/* Grilles utilitaires */
.apt-grid-3 {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: var(--apt-grid-gap);
}

@media (min-width: 48rem) {
  .apt-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 64rem) {
  .apt-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.apt-grid-4 {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: var(--apt-grid-gap);
}

@media (min-width: 48rem) {
  .apt-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 64rem) {
  .apt-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.apt-grid-2 {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: var(--apt-grid-gap);
  align-items: center;
}

@media (min-width: 64rem) {
  .apt-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Masque visuellement tout en conservant l'élément accessible aux lecteurs
   d'écran (skip-links, libellés implicites, etc.) */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Zone de protection du logo — padding généreux à appliquer au conteneur du
   logo dans le header et le footer (charte §4/§9). Voir DESIGN-SYSTEM.md
   pour la structure HTML recommandée. */
.apt-logo-protect {
  padding: var(--apt-logo-protect-x);
}

/* Fond dégradé de marque prêt à l'emploi, pour cartes en vedette / bandeaux CTA */
.apt-bg-gradient-brand {
  background: var(--apt-gradient-brand);
  color: var(--apt-text-inverse);
}