/* ==========================================================================
   MyPC — jetons de design (refonte « C mixte », validée le 7 octobre 2026)
   Source : maquettes/c-mixte/tokens.css. Le même fichier est copié dans
   site/assets/ (accueil général), site/particuliers/assets/ (part.) et
   site/professionnels/assets/ (pro.), car chaque dossier est publié comme
   une racine indépendante : toute modification d'un jeton se reporte dans
   les trois copies (scripts/verify_pro.py compare particuliers et pro).
   Disposition de la maquette B, allure de la maquette A : les VALEURS
   ci-dessous sont celles de A (palette, polices, échelle, rayons, ombres,
   mouvement) ; s'y ajoutent les dimensions qu'exige la mise en page de B.
   Un seul bloc :root. style.css n'utilise que ces variables.
   Pas de mode sombre : site vitrine, l'existant n'en a pas (décision assumée).
   Contrastes WCAG calculés : maquettes/c-mixte/composants.html.
   ========================================================================== */

/* --- Polices ------------------------------------------------------------------
   Red Hat Display 700 et Red Hat Text 400/500/700, AUTO-HÉBERGÉES dans
   fonts/ (à côté de ce fichier) : aucune requête vers Google. Fichiers
   woff2 du sous-ensemble latin, Fontsource 5.3.0, licence SIL OFL 1.1
   (voir site/THIRD-PARTY.md). Si un fichier manque, la pile de secours de
   --police-* prend le relais. */
@font-face {
  font-family: "Red Hat Display";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/red-hat-display-latin-700-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Red Hat Text";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/red-hat-text-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Red Hat Text";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/red-hat-text-latin-500-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Red Hat Text";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/red-hat-text-latin-700-normal.woff2") format("woff2");
}

:root {
  /* --- Couleurs par rôle (valeurs de A) ------------------------------------ */
  --c-fond: #ffffff;                 /* fond de page, cartes, champs, en-tête */
  --c-surface: #f4f5f9;              /* sections alternées : services, zone tarifs et contact */
  --c-surface-marque: #eceef7;       /* encadrés d'information, survols */
  --c-accent-pale: #fdeee1;          /* pastilles d'icônes (cartes, choix, étiquette) */
  --c-texte: #1b1f3b;                /* texte courant */
  --c-texte-2: #4d5373;              /* texte secondaire, surtitres, mentions */
  --c-bordure: #dcdfe9;              /* séparateurs décoratifs, contours de cartes */
  --c-bordure-forte: #7b809a;        /* contour des champs et des boutons « Menu » / téléphone */

  --c-marque: #242966;               /* bleu marine du logo : titres, liens, prix, page courante */
  --c-marque-fonce: #161b45;         /* pied de page, voiles, texte sur l'orange */
  --c-accent: #e07820;               /* orange d'action, SEUL accent : bouton principal, filets, page courante */
  --c-accent-survol: #f79245;        /* orange exact du logo */
  --c-accent-actif: #ea8634;
  --c-sur-accent: #161b45;           /* texte sur bouton orange : marine foncé, jamais blanc */

  --c-texte-inverse: #ffffff;        /* texte sur fond sombre ou sous voile */
  --c-texte-inverse-2: #c5cae2;      /* texte secondaire sur fond sombre ou sous voile fort */
  --c-bordure-inverse: rgba(255, 255, 255, 0.7);  /* contour des boutons clairs sur image */
  --c-voile-fort: rgba(22, 27, 69, 0.8);    /* zone du texte des héros et bandeaux */
  --c-voile-leger: rgba(22, 27, 69, 0.65);  /* bords des héros */
  --c-survol-inverse: rgba(255, 255, 255, 0.12);
  --c-separateur-inverse: rgba(255, 255, 255, 0.18);
  /* voiles en dégradé (A) : fort sous le texte, léger vers les bords */
  --voile-video: radial-gradient(ellipse at center, var(--c-voile-fort) 0%, var(--c-voile-fort) 40%, var(--c-voile-leger) 100%);
  --voile-bandeau: linear-gradient(90deg, var(--c-voile-fort) 0%, var(--c-voile-fort) 45%, var(--c-voile-leger) 100%);

  --c-focus: #242966;                /* anneau de focus sur fond clair */
  --c-focus-inverse: #f79245;        /* anneau de focus sur fond sombre, vidéo ou photo voilée */

  --c-succes: #1d6b3f;
  --c-succes-fond: #e6f4ec;
  --c-erreur: #b42318;
  --c-erreur-fond: #fdeceb;
  --c-desactive-fond: #e6e8ef;
  --c-desactive-texte: #6b7089;      /* états désactivés : exemptés, gardés lisibles */

  /* --- Typographie (A) ------------------------------------------------------ */
  --police-titre: "Red Hat Display", system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --police-texte: "Red Hat Text", system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;

  /* échelle fixe : 14 / 16 / 18 / 22 / 28 / 36 / 48 px */
  --fs-1: 0.875rem;
  --fs-2: 1rem;
  --fs-3: 1.125rem;
  --fs-4: 1.375rem;
  --fs-5: 1.75rem;
  --fs-6: 2.25rem;
  --fs-7: 3rem;

  --lh-serre: 1.15;                  /* grands titres */
  --lh-titre: 1.3;                   /* intertitres, boutons, prix */
  --lh-texte: 1.6;                   /* texte courant */

  --graisse-normale: 400;
  --graisse-moyenne: 500;
  --graisse-forte: 700;

  --interlettre-label: 0.08em;       /* surtitres en petites capitales */
  --mesure: 68ch;                    /* largeur de lecture */
  --soulignement-decalage: 0.2em;

  /* --- Espacement : unité 4 px (A) ----------------------------------------- */
  --esp-1: 0.25rem;   /*  4 */
  --esp-2: 0.5rem;    /*  8 */
  --esp-3: 0.75rem;   /* 12 */
  --esp-4: 1rem;      /* 16 */
  --esp-5: 1.5rem;    /* 24 */
  --esp-6: 2rem;      /* 32 */
  --esp-7: 3rem;      /* 48 */
  --esp-8: 4rem;      /* 64 */
  --esp-9: 6rem;      /* 96 */

  /* --- Dimensions : celles de A, plus celles de la disposition B ------------ */
  --conteneur: 75rem;                /* 1200 px (disposition B) */
  --gouttiere: 1rem;                 /* marge latérale mobile : 16 px */
  --gouttiere-large: 2rem;           /* dès 768 px */
  --hauteur-entete: 4rem;            /* 64 px */
  --hauteur-ecran-repli: 100vh;      /* accueil général : un écran (navigateurs anciens) */
  --hauteur-ecran: 100svh;           /* accueil général : un écran, barre d'adresse mobile comprise */
  --hauteur-logo: 2.125rem;          /* logo long, mobile : 34 × 130 px */
  --hauteur-logo-large: 2.75rem;     /* logo long, dès 768 px : 44 × 168 px */
  --cible-tactile: 2.75rem;          /* 44 px minimum : boutons, liens de menu, champs */
  --icone-1: 1.125rem;               /* 18 px */
  --icone-2: 1.5rem;                 /* 24 px */
  --pastille: 3rem;                  /* carré d'icône : cartes, choix, étiquette */
  --icone-trait: 2;                  /* épaisseur du trait des icônes (unités du viewBox 24) */
  --tuile-logo: 2.75rem;             /* logo carré du pied de page */
  --largeur-enseigne: 22rem;         /* logo long sur l'enseigne blanche de l'accueil général */
  --largeur-choix: 46rem;            /* duo Professionnels / Particuliers */
  --largeur-categories: 16rem;       /* colonne « Catégories » collante des tarifs */
  --largeur-prix: 7.5rem;            /* colonne Prix, mobile : identique dans toutes les cartes */
  --largeur-prix-large: 10rem;       /* colonne Prix dès 768 px (« 20 € à 50 € » sur une ligne) */
  --hauteur-zone-message: 10rem;     /* champ « Votre message » */
  --filet-titre: 3rem;               /* longueur du filet orange des titres de section */

  /* Bandeau de l'accueil particuliers (A) */
  --hauteur-hero-part: clamp(26rem, 60svh, 36rem);
  --largeur-hero: 48rem;             /* le titre tient sur une ligne dès 1024 px */

  /* --- Empilement ---------------------------------------------------------- */
  --z-video: -2;                     /* vidéo de fond */
  --z-voile: -1;                     /* voiles des héros et bandeaux */
  --z-commande: 1;                   /* étiquette posée sur le visuel, lien étiré des cartes */
  --z-entete: 50;                    /* en-tête collant */
  --z-evitement: 100;                /* lien « Aller au contenu » */

  /* --- Bordures, rayons, ombres (A) ---------------------------------------- */
  --trait-fin: 1px;
  --trait-moyen: 2px;
  --trait-fort: 3px;
  --focus-largeur: 3px;
  --focus-decalage: 2px;

  --rayon-1: 0.25rem;
  --rayon-2: 0.5rem;                 /* champs, encadrés, pastilles */
  --rayon-3: 0.75rem;                /* cartes, visuel, enseigne */
  --rayon-pilule: 999px;             /* boutons */

  --ombre-1: 0 1px 2px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.08);
  --ombre-2: 0 2px 4px rgba(0, 0, 0, 0.06), 0 8px 20px rgba(0, 0, 0, 0.08);
  --ombre-entete: 0 1px 0 rgba(0, 0, 0, 0.06);

  /* --- Mouvement (A) ------------------------------------------------------- */
  --duree: 160ms;
  --duree-rotation: 800ms;
  --courbe: cubic-bezier(0.2, 0, 0, 1);
}