/* L’Abritant V2 — généré depuis tokens.json (design system V2, artefact CtyEMP44zfCF9JAVRkL2ZU version 1793037409-ecb3, synchronisé le 26/10/2026). Ne pas modifier : relancer tokens_css.py. */
:root, [data-theme="clair"] {
  --jaune-hauban: #ffd21f; /* La couleur signal de la marque : bouton principal, surlignage d’un mot-clé, sticker Astuce, cotes sur photo, logo sur graphite. Toujours avec du texte `graphite` dessus (10,9:1). Jamais comme couleur de texte ni de trait sur `toile` ou `blanc` (1,3:1). Environ 10 % d’une page, pas plus. V2 : l’étiquette « Nouveau » n’est plus jaune (contour `graphite`), pour ne pas se confondre avec FREQUENS. */
  --graphite: #1f2421; /* L’encre de la marque : texte courant et titres sur `toile`, `blanc`, `toile-fonce`, `jaune-pale`, `sapin-pale` et `jaune-hauban` (≥ 10,8:1). En fond : bandeaux inversés, pied de page, bouton secondaire. */
  --toile: #f4f1e8; /* Le fond de page par défaut, couleur toile écrue. Aussi le texte et le logo posés sur `graphite`, `graphite-doux` ou `sapin`. */
  --sapin: #1f5c45; /* Couleur d’appui réservée au durable et au réemploi (reconditionné, réparation, filière 2de vie) et aux messages de réussite. En texte sur `toile`, `blanc` ou `sapin-pale` (≥ 6,4:1) ; en fond, texte `toile`. */
  --jaune-pale: #fff2bf; /* Teinte de relief du jaune : fond d’encart conseil, ligne survolée d’un tableau technique, fond d’avertissement doux. Texte `graphite` ou `ardoise` dessus. */
  --sapin-pale: #ddebe2; /* Teinte de relief du sapin : fond d’étiquette « Reconditionné », encart réemploi, message de succès. Texte `sapin` ou `graphite` dessus. */
  --toile-fonce: #e9e4d7; /* Fond de section alternée, zone d’image produit détourée, étiquette neutre. Texte `graphite` ou `ardoise` dessus (≥ 5:1). */
  --blanc: #ffffff; /* Surface surélevée posée sur `toile` : cartes, champs de formulaire, menus, tableaux techniques. */
  --ardoise: #5a605b; /* Texte secondaire (légendes, métadonnées, aide de champ) sur `toile`, `blanc`, `toile-fonce`, `jaune-pale` et `sapin-pale` (≥ 5:1). */
  --graphite-doux: #343a36; /* Surface surélevée sur fond `graphite` (carte dans un bandeau inversé). Texte `toile` ou `jaune-hauban` dessus (≥ 8:1). */
  --toile-attenuee: #c9c4b6; /* Texte tertiaire sur `graphite` (9:1) ou `graphite-doux` (6,7:1) : mentions et ligne d’engagements du pied des e-mails. Repris du thème d’e-mails du staging (V2). Jamais sur fond clair. */
  --trait: #d8d2c4; /* Filets décoratifs : séparateurs, lignes de tableau, contour de carte. Ne porte jamais seul une information. */
  --trait-fort: #7c817b; /* Contour des champs de formulaire et des contrôles sur `blanc` et `toile` (≥ 3,5:1). */
  --erreur: #b3261e; /* Erreur de saisie, alerte bloquante. En texte sur `toile`, `blanc` ou `erreur-pale` (≥ 5,3:1), toujours accompagné d’un mot ou d’une icône. */
  --erreur-pale: #fbe3e0; /* Fond de message d’erreur, texte `erreur` ou `graphite` dessus. */
  --attention: #8f5200; /* Avertissement non bloquant (délai rallongé, stock bas). En texte sur `toile` ou `jaune-pale` (≥ 5,5:1), avec un mot ou une icône. */
  --fond: var(--toile); /* Alias sémantique : fond de page. */
  --fond-carte: var(--blanc); /* Alias sémantique : cartes, champs, menus. */
  --fond-section: var(--toile-fonce); /* Alias sémantique : section alternée. */
  --fond-inverse: var(--graphite); /* Alias sémantique : bandeau inversé, pied de page. */
  --texte: var(--graphite); /* Alias sémantique : texte principal sur `fond`, `fond-carte`, `fond-section`. */
  --texte-doux: var(--ardoise); /* Alias sémantique : texte secondaire sur `fond`, `fond-carte`, `fond-section`. */
  --texte-inverse: var(--toile); /* Alias sémantique : texte sur `fond-inverse`. */
  --action: var(--jaune-hauban); /* Alias sémantique : remplissage du bouton principal. */
  --sur-action: var(--graphite); /* Texte, icône et contour posés sur `action`. */
  --succes: var(--sapin); /* Alias sémantique : confirmation, succès (avec un mot ou une coche). */
  --focus: var(--graphite); /* Anneau de focus clavier : 3 px plein, décalé de 2 px, sur fonds clairs. Sur `graphite` et `sapin`, l’anneau passe en `jaune-hauban`. */
  --ombre-tampon: 4px 4px 0 #1f2421; /* Ombre franche, décalée et sans flou, réservée au sticker Astuce et au survol du bouton principal : l’objet « se soulève » comme un tampon. */
  --ombre-flottante: 0 1px 2px rgba(31, 36, 33, 0.08), 0 8px 24px rgba(31, 36, 33, 0.12); /* Menus déroulants, fenêtres modales, carte survolée. */
}
:root {
  --espace-1: 4px; /* Écart entre une icône et son libellé. */
  --espace-2: 8px; /* Écart entre étiquettes, entre libellé et champ. */
  --espace-3: 12px; /* Marge interne des étiquettes et des cellules de tableau. */
  --espace-4: 16px; /* Marge interne des boutons, gouttière mobile, écart entre champs. */
  --espace-6: 24px; /* Marge interne des cartes, gouttière de grille. */
  --espace-8: 32px; /* Écart entre un titre de section et son contenu. */
  --espace-12: 48px; /* Marge interne des bandeaux et des sections en mobile. */
  --espace-16: 64px; /* Espace entre sections en desktop. */
  --espace-24: 96px; /* Respiration autour de l’accroche principale. */
  --rayon-0: 0px; /* Signes de marque : surlignage, cotes, sticker Astuce, bandeaux pleine largeur. La marque est anguleuse, comme son A. */
  --rayon-s: 4px; /* Boutons, champs, étiquettes. */
  --rayon-m: 8px; /* Cartes, images, encarts. */
  --angle-hauban: 64deg; /* Inclinaison des jambes du A du logo. Angle unique des diagonales : bords du surlignage, traits de cote, filets obliques. */
  --angle-astuce: -3deg; /* Rotation du sticker Astuce, la seule pièce de la marque qui n’est pas d’aplomb. */
  --trait-fin: 1px; /* Filets de tableau, séparateurs, contour de carte (`trait`). */
  --trait-moyen: 2px; /* Contour des boutons et des champs, ligne de cote. */
  --trait-hauban: 3px; /* Anneau de focus, soulignement des liens au survol, filet oblique décoratif. */
  --ecran-collant: 1360px; /* Sous ce palier, la barre collante remplace ses six univers par un bouton menu. */
  --ecran-l: 1200px; /* Compte et panier en icônes ; réassurance et pied en 3 colonnes ; filtres de 240 px ; bloc d’achat de 440 px. */
  --ecran-m: 992px; /* Bascule tablette : une colonne pour la fiche et les listes, menu en panneau, barre d’achat fixe en bas, marge de 16 px. */
  --ecran-s: 768px; /* Téléphone : filtres en tiroir, tout en une colonne, titres sur l’échelle téléphone. */
  --ecran-xs: 480px; /* Grille de produits : 1 colonne en dessous, 2 colonnes de 480 à 767 px. */
  --ecran-xxs: 380px; /* Logo réduit à 40 / 22 et boutons de 40 px dans l’en-tête. */
  --conteneur: 1280px; /* Largeur maximale du contenu. */
  --marge: 48px; /* Marge latérale de la page ; 16 px sous 992 px. */
  --controle: 48px; /* Hauteur des boutons et des champs. */
  --cible-min: 44px; /* Règle maison : aucune cible tactile ou cliquable plus petite (puces, pastilles, + / −, croix, liens du pied sur téléphone). */
  --barre-collante: 64px; /* Hauteur de la barre collante ; 56 px sous 992 px (et de la barre principale mobile). */
  --colonne-filtres: 280px; /* Panneau de filtres des listes ; 240 px sous 1 200 px. */
  --bloc-achat: 520px; /* Colonne du bloc d’achat de la fiche ; 440 px sous 1 200 px. */
  --colonne-conseil: 320px; /* Colonne conseil commune à tous les méga-menus. */
  --logo-icone: 50px; /* Icône carrée du logo à icône ; 40 px dans la barre collante et sous 380 px. */
  --logo-mot: 32px; /* Hauteur du mot-symbole à côté de l’icône ; 26 px dans la barre collante et sous 992 px, 22 px sous 380 px. */
  --font-titre: "Bricolage Grotesque", "Arial Narrow", system-ui, sans-serif;
  --font-texte: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-technique: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
  --text-titre-affiche: 800 72px/0.95 var(--font-titre); /* Accroche de page d’accueil et de campagne, une seule par page. Fluide : clamp(40px, 5.4vw, 72px) ; 44px sur téléphone (titre-affiche-tel). */
  --text-titre-1: 750 48px/52px var(--font-titre); /* Titre de page. Fluide : clamp(32px, 3.4vw, 48px) ; 34px sur téléphone (titre-1-tel). */
  --text-titre-2: 700 34px/40px var(--font-titre); /* Titre de section. Fluide : clamp(26px, 2.4vw, 34px) ; 28px sur téléphone (titre-2-tel). */
  --text-titre-3: 700 24px/30px var(--font-titre); /* Titre de bloc, titre de carte large. */
  --text-titre-4: 700 19px/24px var(--font-titre); /* Nom de produit dans une carte, intertitre court. */
  --text-chapo: 400 21px/32px var(--font-texte); /* Introduction sous un titre-affiche ou un titre-1, 62 caractères au plus par ligne. Fluide : clamp(18px, 1.5vw, 21px). */
  --text-corps: 400 17px/27px var(--font-texte); /* Texte courant. */
  --text-corps-fort: 600 17px/27px var(--font-texte); /* Mise en avant dans le texte courant, libellé de champ. */
  --text-petit: 400 14px/21px var(--font-texte); /* Légendes, mentions, aide de champ. */
  --text-bouton: 600 16px/20px var(--font-texte); /* Libellé des boutons et des liens d’action. */
  --text-surtitre: 600 12px/16px var(--font-technique); /* Surtitre au-dessus d’un titre, toujours en capitales. */
  --text-cote: 500 13px/16px var(--font-technique); /* Libellé des cotes (dimensions) et des annotations sur image ou schéma. */
  --text-donnee: 400 15px/22px var(--font-technique); /* Valeurs des fiches techniques, références produit, numéros de commande. */
  --text-titre-affiche-tel: 800 44px/46px var(--font-titre); /* Accroche sur téléphone (accueil). */
  --text-titre-1-tel: 750 34px/38px var(--font-titre); /* Titre de page sur téléphone (catalogue, pages). */
  --text-titre-produit-tel: 750 28px/32px var(--font-titre); /* Nom du produit et prix dans la fiche sur téléphone. */
  --text-titre-2-tel: 700 28px/34px var(--font-titre); /* Titre de section sur téléphone. */
  --text-prose: 400 18px/31.5px var(--font-texte); /* Articles et pages CMS : 66 caractères au plus, interlignage 1,75, espacement des mots 0,04em, aligné à gauche, sans césure automatique (lisibilité pour les lecteurs dyslexiques, Qarto Q22). 17px sous 768 px. */
}
.titre-affiche {
  font-family: var(--font-titre);
  font-size: 72px;
  line-height: 0.95;
  font-weight: 800;
  letter-spacing: -0.02em;
  font-variation-settings: 'opsz' 96;
}
.titre-1 {
  font-family: var(--font-titre);
  font-size: 48px;
  line-height: 52px;
  font-weight: 750;
  letter-spacing: -0.015em;
  font-variation-settings: 'opsz' 72;
}
.titre-2 {
  font-family: var(--font-titre);
  font-size: 34px;
  line-height: 40px;
  font-weight: 700;
  letter-spacing: -0.01em;
  font-variation-settings: 'opsz' 48;
}
.titre-3 {
  font-family: var(--font-titre);
  font-size: 24px;
  line-height: 30px;
  font-weight: 700;
  letter-spacing: 0;
  font-variation-settings: 'opsz' 24;
}
.titre-4 {
  font-family: var(--font-titre);
  font-size: 19px;
  line-height: 24px;
  font-weight: 700;
  letter-spacing: 0;
  font-variation-settings: 'opsz' 18;
}
.chapo {
  font-family: var(--font-texte);
  font-size: 21px;
  line-height: 32px;
  font-weight: 400;
  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: 600;
  letter-spacing: 0;
}
.petit {
  font-family: var(--font-texte);
  font-size: 14px;
  line-height: 21px;
  font-weight: 400;
  letter-spacing: 0;
}
.bouton {
  font-family: var(--font-texte);
  font-size: 16px;
  line-height: 20px;
  font-weight: 600;
  letter-spacing: 0;
}
.surtitre {
  font-family: var(--font-technique);
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  letter-spacing: 0.1em;
}
.cote {
  font-family: var(--font-technique);
  font-size: 13px;
  line-height: 16px;
  font-weight: 500;
  letter-spacing: 0.02em;
}
.donnee {
  font-family: var(--font-technique);
  font-size: 15px;
  line-height: 22px;
  font-weight: 400;
  letter-spacing: 0;
}
.titre-affiche-tel {
  font-family: var(--font-titre);
  font-size: 44px;
  line-height: 46px;
  font-weight: 800;
  letter-spacing: -0.02em;
  font-variation-settings: 'opsz' 48;
}
.titre-1-tel {
  font-family: var(--font-titre);
  font-size: 34px;
  line-height: 38px;
  font-weight: 750;
  letter-spacing: -0.015em;
  font-variation-settings: 'opsz' 36;
}
.titre-produit-tel {
  font-family: var(--font-titre);
  font-size: 28px;
  line-height: 32px;
  font-weight: 750;
  letter-spacing: -0.01em;
  font-variation-settings: 'opsz' 28;
}
.titre-2-tel {
  font-family: var(--font-titre);
  font-size: 28px;
  line-height: 34px;
  font-weight: 700;
  letter-spacing: -0.01em;
  font-variation-settings: 'opsz' 28;
}
.prose {
  font-family: var(--font-texte);
  font-size: 18px;
  line-height: 31.5px;
  font-weight: 400;
  letter-spacing: 0;
}
@font-face {
  font-family: "Bricolage Grotesque";
  src: url("../fonts/BricolageGrotesque-Variable-latin.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("../fonts/InstrumentSans-Variable-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("../fonts/InstrumentSans-Variable-Italic-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-style: italic;
  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;
}