/* Généré par outils/tokens-vers-css.py depuis 05-design/tokens.json — ne pas modifier à la main. */
/* Points de rupture : mobile ≤ 767px, tablette ≤ 1024px. */

:root {
  /* Couleurs */
  --couleur-fond: #FFFFFF;
  --couleur-fond-alterne: #E7F6FF;
  --couleur-fond-sombre: #222A3D;
  --couleur-texte: #222A3D;
  --couleur-texte-secondaire: #55607A;
  --couleur-texte-sur-sombre: #FFFFFF;
  --couleur-texte-secondaire-sur-sombre: #B6C0D4;
  --couleur-principale: #3ABBED;
  --couleur-principale-texte: #222A3D;
  --couleur-accent: #0A6F9A;
  --couleur-filet: #D5DEEA;
  --couleur-bordure-champ: #8A94A8;
  --couleur-voile-photo: rgba(34, 42, 61, 0.62);
  --couleur-erreur: #B3261E;
  --couleur-succes: #1E7B34;
  /* Polices */
  --police-titres: "Montserrat", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --police-texte: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  /* Styles de texte (tailles desktop ; tablette et mobile plus bas) */
  --h1-police: var(--police-titres);
  --h1-graisse: 700;
  --h1-interligne: 1.1;
  --h1-lettres: 0;
  --h1-taille: 56px;
  --h2-police: var(--police-titres);
  --h2-graisse: 700;
  --h2-interligne: 1.2;
  --h2-lettres: 0;
  --h2-taille: 40px;
  --h3-police: var(--police-titres);
  --h3-graisse: 600;
  --h3-interligne: 1.3;
  --h3-lettres: 0;
  --h3-taille: 24px;
  --chiffre-police: var(--police-titres);
  --chiffre-graisse: 700;
  --chiffre-interligne: 1;
  --chiffre-lettres: 0;
  --chiffre-taille: 56px;
  --texte-police: var(--police-texte);
  --texte-graisse: 400;
  --texte-interligne: 1.65;
  --texte-lettres: 0;
  --texte-taille: 17px;
  --petit-police: var(--police-texte);
  --petit-graisse: 400;
  --petit-interligne: 1.5;
  --petit-lettres: 0;
  --petit-taille: 14px;
  --surtitre-police: var(--police-titres);
  --surtitre-graisse: 700;
  --surtitre-interligne: 1.4;
  --surtitre-lettres: 0.12em;
  --surtitre-casse: uppercase;
  --surtitre-taille: 13px;
  --bouton-police: var(--police-texte);
  --bouton-graisse: 600;
  --bouton-interligne: 1.25;
  --bouton-lettres: 0;
  --bouton-taille: 16px;
  /* Espacements */
  --espace-1: 4px;
  --espace-2: 8px;
  --espace-3: 12px;
  --espace-4: 16px;
  --espace-5: 24px;
  --espace-6: 32px;
  --espace-7: 48px;
  --espace-8: 64px;
  --espace-9: 96px;
  --espace-10: 128px;
  --section-vertical: 112px;
  --marge-laterale: 40px;
  --contenu-max: 1200px;
  /* Rayons et ombres */
  --rayon-petit: 8px;
  --rayon-moyen: 16px;
  --rayon-grand: 28px;
  --rayon-pastille: 999px;
  --ombre-carte: 0 8px 24px rgba(34, 42, 61, 0.08);
  --ombre-survol: 0 16px 40px rgba(34, 42, 61, 0.14);
  /* Boutons */
  --bouton-principal-repos-fond: var(--couleur-principale);
  --bouton-principal-repos-texte: var(--couleur-principale-texte);
  --bouton-principal-repos-bordure: none;
  --bouton-principal-survol-fond: var(--couleur-fond-sombre);
  --bouton-principal-survol-texte: var(--couleur-principale);
  --bouton-principal-survol-bordure: none;
  --bouton-principal-focus-contour: 2px solid var(--couleur-accent);
  --bouton-principal-focus-decalage: 2px;
  --bouton-principal-rayon: var(--rayon-pastille);
  --bouton-principal-padding: 0 24px;
  --bouton-principal-transition: 0.25s ease;
  --bouton-secondaire-repos-fond: transparent;
  --bouton-secondaire-repos-texte: var(--couleur-texte);
  --bouton-secondaire-repos-bordure: 2px solid var(--couleur-texte);
  --bouton-secondaire-survol-fond: var(--couleur-texte);
  --bouton-secondaire-survol-texte: var(--couleur-fond);
  --bouton-secondaire-survol-bordure: 2px solid var(--couleur-texte);
  --bouton-secondaire-focus-contour: 2px solid var(--couleur-accent);
  --bouton-secondaire-focus-decalage: 2px;
  --bouton-secondaire-rayon: var(--rayon-pastille);
  --bouton-secondaire-padding: 0 24px;
  --bouton-secondaire-transition: 0.25s ease;
  --bouton-secondaire-sur-sombre-repos-fond: transparent;
  --bouton-secondaire-sur-sombre-repos-texte: var(--couleur-texte-sur-sombre);
  --bouton-secondaire-sur-sombre-repos-bordure: 2px solid var(--couleur-texte-sur-sombre);
  --bouton-secondaire-sur-sombre-survol-fond: var(--couleur-texte-sur-sombre);
  --bouton-secondaire-sur-sombre-survol-texte: var(--couleur-fond-sombre);
  --bouton-secondaire-sur-sombre-survol-bordure: 2px solid var(--couleur-texte-sur-sombre);
  --bouton-secondaire-sur-sombre-focus-contour: 2px solid var(--couleur-principale);
  --bouton-secondaire-sur-sombre-focus-decalage: 2px;
  --bouton-secondaire-sur-sombre-rayon: var(--rayon-pastille);
  --bouton-secondaire-sur-sombre-padding: 0 24px;
  --bouton-secondaire-sur-sombre-transition: 0.25s ease;
  /* Champs de formulaire */
  --champ-fond: var(--couleur-fond);
  --champ-texte: var(--couleur-texte);
  --champ-taille-texte: 17px;
  --champ-bordure: 1px solid var(--couleur-bordure-champ);
  --champ-bordure-focus: 2px solid var(--couleur-accent);
  --champ-rayon: var(--rayon-petit);
  --champ-hauteur: 48px;
  --champ-padding: 0 16px;
  --champ-padding-bordure-2px: 0 15px;
  --champ-zone-de-texte: {'padding': '12px 16px', 'hauteur_min': {'contact': '160px', 'devis': '120px'}};
  --champ-erreur: var(--couleur-erreur);
  --champ-bordure-erreur: 2px solid var(--couleur-erreur);
  --champ-desactive: {'fond': 'fond_alterne', 'bordure': '1px solid filet', 'texte': 'texte_secondaire'};
  --champ-case-a-cocher: {'taille': '24px', 'bordure': '2px solid bordure_champ', 'rayon': 'petit', 'cochee': {'fond': 'accent', 'bordure': '2px solid accent'}, 'focus': {'contour': '2px solid accent', 'decalage': '2px'}};
  --image-rayon: var(--rayon-grand);
}

@media (max-width: 1024px) {
  :root {
    --h1-taille: 44px;
    --h2-taille: 32px;
    --h3-taille: 22px;
    --chiffre-taille: 48px;
    --texte-taille: 17px;
    --petit-taille: 14px;
    --surtitre-taille: 13px;
    --bouton-taille: 16px;
    --section-vertical: 80px;
    --marge-laterale: 32px;
  }
}

@media (max-width: 767px) {
  :root {
    --h1-taille: 34px;
    --h2-taille: 28px;
    --h3-taille: 20px;
    --chiffre-taille: 40px;
    --texte-taille: 16px;
    --petit-taille: 14px;
    --surtitre-taille: 13px;
    --bouton-taille: 16px;
    --section-vertical: 56px;
    --marge-laterale: 20px;
  }
}