/* AEROCAP — généré depuis tokens.json (artefact KdYSqqHXYF4LDtmyhzVURQ version 1793813234-4347, synchronisé le 04/11/2026). Ne pas modifier : relancer tokens_css.py. */
:root, [data-theme="clair"] {
  --noir: #16181f; /* Noir à peine bleuté, l'encre du site (via encre et texte) : texte, titres, boutons primaires, contours et traits d'état courant, icônes. 15,7:1 sur écru, 17,7:1 avec le blanc. Il s'accorde au noir du logo AEROCAP eco. */
  --noir-800: #2b2e38; /* Survol des boutons primaires noirs, piste de l'interrupteur « Prix HT ». Texte blanc 13,5:1. */
  --marine: #1e2657; /* Bleu marine de la marque (PANTONE 2766 C · CMJN 100-94-36-31 · RVB 30-38-87) : le cadre du site et ses moments de marque. Barre utilitaire de l'en-tête (via fond-inverse), bandeau conseiller (via fond-marque), étiquettes de gamme AEROCAP et PRO, logo, couverture. Jamais en texte courant ni en bouton. */
  --marine-900: #151b40; /* Marine foncé : fond du pied de page, pour qu'il se détache du bandeau marine qui le précède parfois. Texte blanc 16,6:1, brume 10,6:1, rouge-clair 5,5:1. */
  --rouge: #ec1d25; /* Rouge de la marque (PANTONE 485 C · CMJN 1-99-96-0 · RVB 236-29-37) : les Λ du logo et le Λ agrandi des couvertures, le repère de rubrique (diagonale du Λ). Rien d'autre. 4,4:1 sur blanc : jamais de texte. */
  --rouge-700: #c8151d; /* Le seul rouge de l'interface (via action) : bouton d'achat (texte blanc 5,9:1), montant de la remise, erreurs avec icône. Jamais deux fois dans le même bloc. */
  --rouge-800: #a51117; /* Survol et état actif du bouton d'achat. Texte blanc 7,8:1. */
  --rouge-clair: #ff5a5f; /* Le rouge posé sur noir (5,8:1), marine (4,7:1) ou marine-900 (5,5:1) uniquement : repère de rubrique sur un bandeau marine (ac-ent--clair). Jamais sur fond clair. */
  --blanc: #ffffff; /* Surfaces posées sur l'écru (via fond-carte) ; texte sur marine et sur rouge-700. */
  --ecru: #f4f1e8; /* Écru, la même toile que L'Abritant : fond de page de tout le site (via fond). Texte marine 12,7:1, ardoise 6,2:1, rouge-700 5,2:1. */
  --ecru-fonce: #e9e4d7; /* Écru foncé (via fond-section) : sections alternées, bande de la lettre d'information, étiquettes neutres (épuisé, location), boutons désactivés. Texte noir 14:1, ardoise 5,5:1. */
  --jaune-post-it: #fff2bf; /* Jaune « post-it », le même que le jaune pâle de L'Abritant : la teinte d'aide partagée par les sites du groupe, via fond-accent. Texte noir 15,8:1, ardoise 6,2:1, rouge-700 5,2:1, vert 5,8:1, ambre 5,5:1. */
  --ardoise: #545967; /* Gris bleuté du texte secondaire (via texte-doux) : 7,0:1 sur blanc, 6,2:1 sur écru, 5,5:1 sur écru foncé. */
  --brume: #c9cee3; /* Texte secondaire sur marine (9,1:1) et marine-900 (10,6:1), via texte-inverse-doux ; à 30 % d'opacité (trait-inverse), filets du pied de page. */
  --trait: #d8d2c4; /* Filets 1 px décoratifs : séparateurs, lignes de tableaux, contours de cartes. Ne porte jamais seul une information. */
  --trait-fort: #7a7e8c; /* Contour des champs, cases, quantité et variantes : 4,1:1 sur blanc, 3,6:1 sur écru. */
  --trait-inverse: #c9cee34d; /* Filet 1 px sur marine et marine-900 (brume à 30 %) : séparations du pied de page, entre les marques du groupe, contour des boutons réseaux. Décoratif, ne porte jamais seul une information. */
  --dispo: #1f6b45; /* Vert du stock disponible et des confirmations, toujours avec le mot : 6,6:1 sur blanc, 5,7:1 sur écru. */
  --delai: #9c4a07; /* Ambre des délais et avertissements, toujours avec le mot : 6,2:1 sur blanc, 5,5:1 sur écru et attention-pale. */
  --succes-pale: #e4f1ea; /* Fond des messages de réussite et de la compatibilité « Compatible ». Texte dispo 5,6:1. */
  --attention-pale: #fbefe2; /* Fond des messages d'avertissement. Texte delai 5,5:1, marine 13:1. */
  --erreur-pale: #fbe8e9; /* Fond des messages d'erreur. Texte rouge-700 5,0:1. */
  --gamme-eco: #000000; /* Noir du logo AEROCAP eco (monochrome) : étiquette de gamme eco en forme d'étiquette de prix (seule forme découpée de l'interface, reprise du logo), texte blanc (21:1). eco = la gamme économique d'entrée, jamais un argument écologique. */
  --gamme-eco-100: #ededed; /* Teinte claire eco : bandeau ou page de gamme eco ; texte noir ou marine dessus. */
  --gamme-core: var(--marine); /* Gamme AEROCAP (cœur de gamme), couleur réelle des machines (bleu) : étiquette pleine marine, texte blanc 14,3:1 ; ouverture de la page de gamme en diagonale marine. */
  --gamme-pro: var(--noir); /* Gamme AEROCAP PRO, couleur réelle des machines (noir) : étiquette noire à angles droits, texte blanc 17,4:1 ; ouverture de la page de gamme en diagonale noire. Soulignement jaune #FFED00 en essai (hors palette, à trancher). */
  --gamme-pro-100: var(--ecru-fonce); /* PROVISOIRE : bandeau ou page de gamme PRO. */
  --fond: var(--ecru); /* Rôle commun au socle (mêmes noms que L'Abritant) : fond de page. */
  --fond-carte: var(--blanc); /* Rôle commun : cartes, champs, menus, tableaux, bloc d'achat, récapitulatif. */
  --fond-section: var(--ecru-fonce); /* Rôle commun : section alternée, réassurance, filtres. */
  --fond-accent: var(--jaune-post-it); /* Rôle commun (le même jaune pâle que L'Abritant) : tout ce qui aide ou est choisi. Encart Conseil, astuce, variante et service choisis, volet ouvert, onglet et rubrique actifs, remise, compatibilité à renseigner, message d'information. Jamais en grand aplat de section. */
  --fond-inverse: var(--marine); /* Rôle commun : barre utilitaire de l'en-tête, bandeau des chiffres clés. Pour AEROCAP, le marine ; le pied de page prend marine-900. */
  --fond-marque: var(--marine); /* Rôle propre à chaque marque : l'aplat qui porte sa couleur, un par page au plus (bandeau conseiller, héros). Pour AEROCAP, le marine. */
  --encre: var(--noir); /* Rôle commun : boutons primaires, traits d'état courant (3 px), contours de boutons, icônes, étoiles, en-têtes de tableaux. */
  --encre-800: var(--noir-800); /* Rôle : survol des boutons primaires, piste de l'interrupteur. */
  --texte: var(--noir); /* Rôle commun : texte principal sur fond, fond-carte, fond-section. */
  --texte-doux: var(--ardoise); /* Rôle commun : texte secondaire (chapô, légendes, HT, références). */
  --texte-inverse: var(--blanc); /* Rôle commun : texte sur fond-inverse. */
  --texte-inverse-doux: var(--brume); /* Rôle commun : texte secondaire sur fond-inverse. */
  --action: var(--rouge-700); /* Rôle commun : remplissage du bouton d'achat, le seul signal (un visible à la fois). Texte sur-action 5,9:1. */
  --sur-action: var(--blanc); /* Rôle commun : texte et icône posés sur action. */
  --succes: var(--dispo); /* Rôle commun : confirmation, succès, avec un mot ou une coche. */
  --attention: var(--delai); /* Rôle commun : avertissement non bloquant, avec une icône. */
  --erreur: var(--rouge-700); /* Rôle commun : erreur, épuisé, incompatibilité, toujours avec une icône et le mot. */
  --focus: var(--noir); /* Rôle commun : anneau de focus 3 px décalé de 2 px sur fonds clairs ; blanc sur fond-inverse. */
  --ombre-flottante: 0 2px 4px rgba(21, 27, 64, 0.08), 0 12px 32px rgba(21, 27, 64, 0.16); /* Uniquement ce qui flotte au-dessus de la page : méga-menu, aperçu du panier, suggestions de recherche, notification d'ajout. Jamais sur une carte. */
}
:root {
  --space-1: 4px; /* Écart entre une icône et son texte. */
  --space-2: 8px; /* Écart entre étiquettes, padding vertical des étiquettes. */
  --space-3: 12px; /* Padding vertical des boutons, écart entre lignes d'une liste. */
  --space-4: 16px; /* Padding des miniatures, marge de page sous 992 px. */
  --space-6: 24px; /* Écart entre miniatures, padding des cases de réassurance et du bandeau des marques. */
  --space-8: 32px; /* Padding des encarts (Conseil), du bloc d'achat et du récapitulatif ; écart entre blocs d'une même section. */
  --space-12: 48px; /* Marge de page sur ordinateur, écart entre sections sur téléphone. */
  --space-16: 64px; /* Écart entre sections sur ordinateur. */
  --radius-0: 0px; /* Bandeaux pleine largeur, photos d'ambiance, aplats de couverture. */
  --radius-sm: 4px; /* Boutons, champs, variantes, étiquettes, messages, vignettes. */
  --radius-md: 8px; /* Cartes produit, encarts Conseil, bloc d'achat, récapitulatif, menus flottants. Jamais davantage, jamais de pilule. */
  --angle-diagonale: 65deg; /* Angle de la coupe de la diagonale du Λ (parallèle à une jambe du Λ du logo) : repère de rubrique, séparateur, héros, et hachures des zones vides (packshot manquant, variante indisponible). */
  --pas-trame: 9px; /* Pas de la grille de points de la trame en grand format (héros, ouvertures de gamme) sur ordinateur (data-pas). */
  --pas-trame-compact: 7px; /* Pas de la trame sur téléphone et en visuel réduit (réseaux, vignettes). */
  --pas-trame-repere: 4px; /* Pas des points du repère de rubrique (ac-ent) et du séparateur (ac-separateur), dessinés en SVG fixe. */
  --border-fin: 1px; /* Filets et contours de cartes (couleur filet). */
  --border-controle: 2px; /* Bouton contour, champs actifs, filet au-dessus des étapes. */
  --border-etat: 3px; /* Trait encre (noir) de l'état courant (onglet, ligne active, pli ouvert, entrée du menu) et anneau de focus. */
  --conteneur: 1280px; /* Largeur maximale du contenu ; la page est fluide en dessous. */
  --marge: 48px; /* Marge latérale de page sur ordinateur ; 16 px sous 992 px. */
  --controle: 48px; /* Hauteur des boutons et champs. */
  --cible-min: 44px; /* Aucune cible tactile plus petite : quantité + / −, pastilles, croix, liens du pied sur téléphone. */
  --barre-collante: 64px; /* Hauteur de la barre d'en-tête collante ; 56 px sous 992 px. */
  --colonne-filtres: 280px; /* Colonne des filtres des listes ; 240 px sous 1 200 px, tiroir sous 768 px. */
  --bloc-achat: 480px; /* Largeur du bloc d'achat de la fiche produit ; 420 px sous 1 200 px, pleine largeur sous 992 px. */
  --colonne-conseil: 320px; /* Colonne conseil des méga-menus. */
  --ecran-l: 1200px; /* Palier : bloc d'achat réduit, 2 miniatures à côté des filtres. */
  --ecran-m: 992px; /* Palier : une colonne, barre d'achat fixe, menu en panneau. */
  --ecran-s: 768px; /* Palier : filtres en tiroir, échelle de titres téléphone. */
  --ecran-xs: 480px; /* Palier : une miniature par ligne. */
  --font-titre: Manrope, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-texte: Manrope, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-technique: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
  --text-display: 800 52px/56px var(--font-titre); /* Accroche de héros, une par page, Manrope 800. */
  --text-h1: 800 38px/44px var(--font-titre); /* Titre de page, nom du produit sur la fiche. */
  --text-h2: 800 28px/34px var(--font-titre); /* Titre de section, Manrope 800, précédé d'un surtitre. */
  --text-h3: 700 20px/26px var(--font-texte); /* Titre de bloc, de carte, d'étape, nom de produit en miniature. */
  --text-surtitre: 500 13px/18px var(--font-technique); /* Au-dessus d'un titre de section : IBM Plex Mono, texte-doux, précédé du repère rouge (diagonale du Λ, ac-ent). Un par section au plus. */
  --text-display-tel: 800 36px/40px var(--font-titre); /* Accroche sous 768 px. */
  --text-h1-tel: 800 28px/33px var(--font-titre); /* Titre de page et nom du produit sous 768 px. */
  --text-chapo: 500 20px/30px var(--font-texte); /* Introduction d'une page ou d'une section, en texte-2. */
  --text-corps: 400 17px/27px var(--font-texte); /* Texte courant. */
  --text-corps-fort: 650 17px/27px var(--font-texte); /* Libellés, mots clés, titres d'engagement. */
  --text-petit: 400 14px/20px var(--font-texte); /* Mentions, légendes, références, en texte-2. */
  --text-bouton: 700 16px/20px var(--font-texte); /* Libellés de boutons et liens d'action. */
  --text-etiquette: 700 12px/16px var(--font-texte); /* Badges de gamme, étiquettes produit, pastilles. */
  --text-prose: 400 18px/31px var(--font-texte); /* Articles Décap'Mag, guides et pages de contenu : 66 caractères par ligne au plus. */
  --text-prix: 800 32px/36px var(--font-texte); /* Prix principal du bloc d'achat, chiffres tabulaires. */
  --text-prix-carte: 800 22px/28px var(--font-texte); /* Prix d'une miniature, d'une ligne de panier, du récapitulatif. */
  --text-chiffre: 800 40px/44px var(--font-titre); /* Chiffres clés prouvés (aérogommeuses vendues, années), avec leur source. */
  --text-spec: 500 14px/20px var(--font-technique); /* Valeurs techniques, références, prix HT, codes postaux, numéros de commande, en IBM Plex Mono. */
  --text-donnee: 400 15px/22px var(--font-technique); /* Données dans les tableaux techniques et les récapitulatifs. */
}
.display {
  font-family: var(--font-titre);
  font-size: 52px;
  line-height: 56px;
  font-weight: 800;
  letter-spacing: -0.025em;
}
.h1 {
  font-family: var(--font-titre);
  font-size: 38px;
  line-height: 44px;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.h2 {
  font-family: var(--font-titre);
  font-size: 28px;
  line-height: 34px;
  font-weight: 800;
  letter-spacing: -0.015em;
}
.h3 {
  font-family: var(--font-texte);
  font-size: 20px;
  line-height: 26px;
  font-weight: 700;
  letter-spacing: 0;
}
.surtitre {
  font-family: var(--font-technique);
  font-size: 13px;
  line-height: 18px;
  font-weight: 500;
  letter-spacing: 0;
}
.display-tel {
  font-family: var(--font-titre);
  font-size: 36px;
  line-height: 40px;
  font-weight: 800;
  letter-spacing: -0.015em;
}
.h1-tel {
  font-family: var(--font-titre);
  font-size: 28px;
  line-height: 33px;
  font-weight: 800;
  letter-spacing: 0;
}
.chapo {
  font-family: var(--font-texte);
  font-size: 20px;
  line-height: 30px;
  font-weight: 500;
  letter-spacing: 0;
}
.corps {
  font-family: var(--font-texte);
  font-size: 17px;
  line-height: 27px;
  font-weight: 400;
  letter-spacing: 0;
}
.corps-fort {
  font-family: var(--font-texte);
  font-size: 17px;
  line-height: 27px;
  font-weight: 650;
  letter-spacing: 0;
}
.petit {
  font-family: var(--font-texte);
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  letter-spacing: 0;
}
.bouton {
  font-family: var(--font-texte);
  font-size: 16px;
  line-height: 20px;
  font-weight: 700;
  letter-spacing: 0;
}
.etiquette {
  font-family: var(--font-texte);
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.prose {
  font-family: var(--font-texte);
  font-size: 18px;
  line-height: 31px;
  font-weight: 400;
  letter-spacing: 0;
}
.prix {
  font-family: var(--font-texte);
  font-size: 32px;
  line-height: 36px;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.prix-carte {
  font-family: var(--font-texte);
  font-size: 22px;
  line-height: 28px;
  font-weight: 800;
  letter-spacing: 0;
}
.chiffre {
  font-family: var(--font-titre);
  font-size: 40px;
  line-height: 44px;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.spec {
  font-family: var(--font-technique);
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  letter-spacing: 0;
}
.donnee {
  font-family: var(--font-technique);
  font-size: 15px;
  line-height: 22px;
  font-weight: 400;
  letter-spacing: 0;
}
@font-face {
  font-family: "Manrope";
  src: url("../fonts/Manrope-Variable-latin.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/IBMPlexMono-400-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/IBMPlexMono-500-latin.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/IBMPlexMono-600-latin.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}