/* AmpStore — tokens du design system.
   Source : design-system/ampstore.tokens.json (copie de travail ; kDrive fait foi).
   Le premier bloc est la sélection employée par les maquettes ; le second, généré,
   complète le jeu pour couvrir les 188 tokens de la source. */

:root {
  --brand-blue: #0B2F63;
  --brand-green: #7AC142;

  --blue-50: #EDF3FD;  --blue-100: #D1E2FA; --blue-200: #A3C5F5;
  --blue-300: #5E99ED; --blue-400: #2373E7; --blue-500: #155BC1;
  --blue-600: #114897; --blue-700: #0E3B7C; --blue-800: #0B2F63;
  --blue-900: #071E40;

  --green-50: #F1F9EC;  --green-100: #DFF0D1; --green-200: #C1E2A7;
  --green-300: #9ED275; --green-400: #7AC142; --green-500: #67A436;
  --green-600: #52832B; --green-700: #3D6220; --green-800: #2B4517;

  /* Cyan et lime — les deux autres couleurs du dégradé du symbole, promues en
     échelles complètes. Comme le vert de marque, les paliers 400 sont des aplats :
     1,80:1 et 1,47:1 sur blanc. Palier 600 minimum pour du texte. */
  --cyan-50: #ECFDFD;  --cyan-100: #D3F8F9; --cyan-200: #ADF1F2;
  --cyan-300: #74E4E7; --cyan-400: #39D5D8; --cyan-500: #21A4A7;
  --cyan-600: #1E8385; --cyan-700: #176264; --cyan-800: #124546;

  --lime-50: #F8FDE7;  --lime-100: #EEFAC8; --lime-200: #DFF59B;
  --lime-300: #CBEE5C; --lime-400: #B5E61D; --lime-500: #7EA016;
  --lime-600: #64800E; --lime-700: #4A6004; --lime-800: #36430D;

  --brand-cyan: #39D5D8;
  --brand-lime: #B5E61D;

  --n-0: #FFFFFF;  --n-50: #F9FAFB; --n-100: #F3F5F6; --n-200: #E4E7EC;
  --n-300: #D0D5DD; --n-400: #9AA6B6; --n-500: #607085; --n-600: #515E70;
  --n-700: #3E4856; --n-800: #2B323B; --n-900: #1A1E23;

  --danger: #B3261E; --warning: #B25E09; --info: #155BC1;

  --grad-symbole: linear-gradient(to top, #2A7DE1 0%, #39D5D8 28%, #7AC142 74%, #B5E61D 100%);
  --grad-tagline: linear-gradient(to right, #0B2F63 0%, #2B85E0 34%, #39D5D8 66%, #7AC142 100%);
  /* Variante horizontale du dégradé du symbole, pour filets et surlignages. */
  --grad-filet: linear-gradient(to right, #2A7DE1 0%, #39D5D8 28%, #7AC142 74%, #B5E61D 100%);

  --font-display: "Montserrat", "Segoe UI Semibold", Tahoma, sans-serif;
  --font-text: "Inter", "Segoe UI", Arial, sans-serif;

  --size-display: 56px; --size-h1: 36px; --size-h2: 28px; --size-h3: 22px;
  --size-h4: 18px; --size-body: 16px; --size-sm: 14px; --size-label: 13px;
  --size-legal: 11px;

  --lh-display: 1.05; --lh-heading: 1.2; --lh-tight: 1.35; --lh-body: 1.6;
  --ls-display: -0.02em; --ls-heading: -0.01em; --ls-label: 0.06em; --ls-tagline: 0.12em;

  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 20px;
  --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px;
  --s-20: 80px; --s-24: 96px; --s-32: 128px;

  --container: 1200px; --container-narrow: 800px; --gutter: 24px;

  --r-xs: 2px; --r-sm: 4px; --r-md: 6px; --r-lg: 10px; --r-xl: 16px; --r-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(11,47,99,.06), 0 1px 1px rgba(11,47,99,.04);
  --shadow-md: 0 2px 4px rgba(11,47,99,.06), 0 6px 16px rgba(11,47,99,.08);
  --shadow-lg: 0 4px 8px rgba(11,47,99,.06), 0 16px 40px rgba(11,47,99,.12);

  --dur-fast: 120ms; --dur-base: 180ms; --dur-slow: 240ms;
  --ease: cubic-bezier(.4, 0, .2, 1);
  --ease-out: cubic-bezier(0, 0, .2, 1);

  --focus-ring: 0 0 0 3px rgba(35,115,231,.45);
}

/* ------------------------------------------------------------------
   Complément généré depuis design-system/ampstore.tokens.json.
   Ces tokens ne sont pas tous utilisés par les maquettes actuelles mais
   sont nécessaires dès qu'on construit de nouveaux composants : rôles
   applicatifs, plans d'empilement, formats imprimés.
   ------------------------------------------------------------------ */
:root {
  /* Couleurs sémantiques complémentaires */
  --danger-surface: #FDF2F1;
  --warning-surface: #FDF5EC;
  --info-surface: var(--blue-50);
  --success: var(--green-700);
  --success-surface: var(--green-50);

  /* Familles de repli et graisses */
  --font-display-office: "Trebuchet MS", "Segoe UI", Tahoma, sans-serif;
  --font-text-office: "Segoe UI", Arial, sans-serif;  /* Repli bureautique. Calibri retirée : licence Microsoft, fichier non déposable. */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* Typographie — compléments */
  --size-h5: 16px;  /* print 12 pt */
  --size-body-sm: 14px;  /* print 10,5 pt */
  --ls-body: 0em;

  /* Espacement — compléments */
  --s-0: 0px;

  /* Grille et points de rupture */
  --grid-columns: 12;
  --page-margin: 16px;
  --bp-sm: 480px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;
  --bp-2xl: 1440px;

  /* Rayons — complément */
  --r-none: 0px;

  /* Bordures — épaisseurs et couleurs */
  --bw-hairline: 1px;
  --bw-thick: 2px;
  --bw-accent: 3px;
  --border-color: var(--n-200);
  --border-color-strong: var(--n-300);
  --border-color-inverse: rgba(255,255,255,0.24);

  /* Opacités */
  --opacity-disabled: 0.4;
  --opacity-muted: 0.64;
  --opacity-hover-overlay: 0.08;
  --opacity-press-overlay: 0.14;
  --opacity-scrim: 0.6;

  /* Plans d'empilement */
  --z-base: 0;
  --z-raised: 10;
  --z-sticky: 100;
  --z-header: 200;
  --z-dropdown: 300;
  --z-overlay: 400;
  --z-modal: 500;
  --z-toast: 600;

  /* Mouvement — compléments */
  --dur-instant: 80ms;
  --ease-in: cubic-bezier(0.4, 0, 1, 1);

  /* Rôles — couleurs applicatives */
  /* Surfaces */
  --surface-page: var(--n-0);
  --surface-subtle: var(--n-50);
  --surface-card: var(--n-0);
  --surface-sunken: var(--n-100);
  --surface-inverse: var(--brand-blue);
  --surface-inverse-soft: var(--blue-700);
  --surface-accent: var(--brand-green);
  --surface-accent-subtle: var(--green-50);
  --surface-cyan: var(--brand-cyan);
  --surface-cyan-subtle: var(--cyan-50);
  --surface-lime: var(--brand-lime);
  --surface-lime-subtle: var(--lime-50);
  --surface-disabled: var(--n-100);
  /* Textes */
  --text-heading: var(--brand-blue);
  --text-body: var(--n-800);
  --text-muted: var(--n-500);  /* 5,06:1 sur blanc */
  --text-inverse: var(--n-0);
  --text-on-accent: var(--brand-blue);  /* 5,96:1 sur le vert de marque */
  --text-accent: var(--green-700);  /* Vert en texte : palier 700 obligatoire — 6,57:1 sur fond teinté */
  --text-cyan: var(--cyan-700);  /* 7,08:1 sur blanc */
  --text-lime: var(--lime-700);  /* 7,08:1 sur blanc */
  --text-on-cyan: var(--brand-blue);  /* 7,30:1 sur le cyan de marque */
  --text-on-lime: var(--brand-blue);  /* 8,93:1 sur le lime de marque */
  --text-link: var(--blue-600);
  --text-link-hover: var(--blue-800);
  --text-disabled: var(--n-400);
  /* Bordures */
  --border-default: var(--n-200);
  --border-strong: var(--n-300);
  --border-focus: var(--blue-400);
  --border-accent: var(--green-600);  /* Trait fin : le vert de marque ne tient pas le plancher de 3:1 sur blanc */
  --border-danger: var(--danger);
  /* Icônes */
  --icon-default: var(--brand-blue);
  --icon-muted: var(--n-500);
  --icon-accent: var(--green-600);
  --icon-cyan: var(--cyan-600);  /* 4,53:1 sur blanc */
  --icon-lime: var(--lime-600);  /* 4,53:1 sur blanc */
  --icon-inverse: var(--n-0);
  --icon-danger: var(--danger);
  --icon-disabled: var(--n-400);
  --icon-stroke: 1.5px;  /* Trait réécrit à l'injection ; repasser à 2px sous 16px */
  /* Actions */
  --action-primary-bg: var(--brand-green);
  --action-primary-bg-hover: var(--green-500);
  --action-primary-bg-active: var(--green-600);
  --action-primary-text: var(--brand-blue);
  --action-secondary-text: var(--brand-blue);
  --action-secondary-border: var(--brand-blue);
  --action-secondary-bg-hover: var(--blue-50);
  --action-secondary-bg-active: var(--blue-100);
  --action-tertiary-bg-hover: var(--n-100);
  --action-tertiary-bg-active: var(--n-200);
  --action-disabled-bg: var(--n-200);
  --action-disabled-text: var(--n-400);
  /* Champs de formulaire */
  --field-bg: var(--n-0);
  --field-bg-disabled: var(--n-100);
  --field-border: var(--n-300);
  --field-border-hover: var(--n-400);
  --field-border-focus: var(--blue-400);
  --field-border-error: var(--danger);
  --field-text: var(--n-800);
  --field-placeholder: var(--n-500);

  /* Formats imprimés */
  --print-a4-width: 210mm;
  --print-a4-height: 297mm;
  --print-a4-margin: 18mm;
  --print-a5-width: 148mm;
  --print-a5-height: 210mm;
  --print-a5-margin: 12mm;
  --print-dl-width: 99mm;
  --print-dl-height: 210mm;
  --print-card-width: 85mm;
  --print-card-height: 55mm;
  --print-card-margin: 5mm;
  --print-bleed: 3mm;
  --print-safe: 5mm;
  --print-baseline: 4mm;
}

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

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

body {
  margin: 0;
  font-family: var(--font-text);
  font-size: var(--size-body);
  line-height: var(--lh-body);
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
  margin: 0;
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }
img { max-width: 100%; display: block; }
a { color: inherit; }

:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--r-sm); }

.tabular { font-variant-numeric: tabular-nums lining-nums; }

/* Icônes — Lucide (ISC), trait réécrit à 1,5 px conformément au design system.
   Colorisation par masque + currentColor, aucun appel réseau. */
.ico {
  display: inline-block; flex: none;
  width: var(--icon-size, 24px); height: var(--icon-size, 24px);
  background-color: currentColor;
  -webkit-mask: var(--icon-url) center / contain no-repeat;
  mask: var(--icon-url) center / contain no-repeat;
}
.ico--sun              { --icon-url: url(../icons/sun.svg); }
.ico--trending-down    { --icon-url: url(../icons/trending-down.svg); }
.ico--line-chart       { --icon-url: url(../icons/line-chart.svg); }
.ico--circle-euro      { --icon-url: url(../icons/circle-euro.svg); }
.ico--battery-plus     { --icon-url: url(../icons/battery-plus.svg); }
.ico--map-pin          { --icon-url: url(../icons/map-pin.svg); }
.ico--phone            { --icon-url: url(../icons/phone.svg); }
.ico--mail             { --icon-url: url(../icons/mail.svg); }
.ico--repeat           { --icon-url: url(../icons/repeat.svg); }
.ico--plug-zap         { --icon-url: url(../icons/plug-zap.svg); }
.ico--shield-check     { --icon-url: url(../icons/shield-check.svg); }
.ico--battery-charging { --icon-url: url(../icons/battery-charging.svg); }
.ico--car              { --icon-url: url(../icons/car.svg); }
.ico--gauge            { --icon-url: url(../icons/gauge.svg); }
.ico--users            { --icon-url: url(../icons/users.svg); }
.ico--layers           { --icon-url: url(../icons/layers.svg); }
.ico--unlink           { --icon-url: url(../icons/unlink.svg); }
.ico--activity         { --icon-url: url(../icons/activity.svg); }
.ico--scale            { --icon-url: url(../icons/scale.svg); }
.ico--file-text        { --icon-url: url(../icons/file-text.svg); }
.ico--ruler            { --icon-url: url(../icons/ruler.svg); }
.ico--wrench           { --icon-url: url(../icons/wrench.svg); }
.ico--factory          { --icon-url: url(../icons/factory.svg); }
.ico--tractor          { --icon-url: url(../icons/tractor.svg); }
.ico--building-2       { --icon-url: url(../icons/building-2.svg); }
.ico--clock            { --icon-url: url(../icons/clock.svg); }
.ico--zap              { --icon-url: url(../icons/zap.svg); }
.ico--unplug           { --icon-url: url(../icons/unplug.svg); }

.label {
  font-family: var(--font-text);
  font-size: var(--size-label);
  font-weight: 600;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}