/* ==========================================================================
   QUALITIA CERTIFICATION — Design tokens
   Source de vérité unique. Ne jamais écrire une valeur en dur dans un
   composant : si une valeur manque ici, c'est ici qu'on l'ajoute.
   Valeurs extraites du kit Elementor du site (post-6.css) et des fichiers
   logo, puis normalisées. Voir SKILL.md pour les règles d'usage.
   ========================================================================== */

:root {
  /* --- Couleurs de marque ------------------------------------------------
     Ces deux couleurs sont la marque. Elles portent les actions à parts
     égales selon le contexte (voir la table des rôles dans SKILL.md).      */
  --qc-navy:        #31358D;   /* bleu marine institutionnel               */
  --qc-red:         #BE232C;   /* rouge Qualitia                           */

  /* Fonds sombres et accent premium */
  --qc-navy-deep:   #16163F;   /* fond de section sombre, texte sur or     */
  --qc-gold:        #D3B574;   /* accent de conversion — FOND UNIQUEMENT   */

  /* Variantes d'état (calculées pour passer WCAG AA sur blanc) */
  --qc-navy-hover:  #262A6E;   /* survol des liens et boutons bleus        */
  --qc-red-hover:   #9C1C23;   /* survol des boutons rouges                */
  --qc-gold-hover:  #C0A05D;   /* survol du CTA doré                       */

  /* Neutres */
  --qc-white:       #FFFFFF;
  --qc-grey-100:    #F5F5F7;   /* fond de section alternatif très clair    */
  --qc-grey-200:    #D7D7D9;   /* séparateurs, bordures discrètes          */
  --qc-grey-600:    #4A4A4A;   /* texte secondaire, témoignages            */
  --qc-grey-800:    #323539;   /* texte courant                            */

  /* Décoratif — jamais en texte sur fond clair (contraste 2.2:1) */
  --qc-periwinkle:  #A5A8E9;   /* icônes et ornements sur fond sombre      */

  /* --- Rôles sémantiques ------------------------------------------------
     Préférer ces variables aux couleurs brutes dans les composants :
     elles rendent l'intention lisible et les changements globaux triviaux. */
  --qc-text:            var(--qc-grey-800);
  --qc-text-muted:      var(--qc-grey-600);
  --qc-text-invert:     var(--qc-white);
  --qc-bg:              var(--qc-white);
  --qc-bg-alt:          var(--qc-grey-100);
  --qc-bg-dark:         var(--qc-navy-deep);
  --qc-border:          var(--qc-grey-200);
  --qc-link:            var(--qc-navy);
  --qc-link-hover:      var(--qc-navy-hover);
  --qc-accent-rule:     var(--qc-red);   /* filets 4px des titres          */

  /* --- Typographie ------------------------------------------------------
     Montserrat est la seule famille du système. Deux registres de titre
     cohabitent volontairement — voir SKILL.md § Registres typographiques. */
  --qc-font: "Montserrat", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;

  --qc-fs-display: 50px;  /* hero uniquement, poids 800                    */
  --qc-fs-h1:      38px;  /* titre de page, poids 700                      */
  --qc-fs-h2:      30px;  /* titre de section, poids 300 + capitalize      */
  --qc-fs-h3:      25px;  /* sous-titre, poids 600                         */
  --qc-fs-h4:      20px;  /* titre de carte, poids 700                     */
  --qc-fs-body:    18px;  /* corps de texte, poids 400                     */
  --qc-fs-sm:      16px;
  --qc-fs-xs:      15px;  /* citations, mentions légales, poids 300        */

  --qc-fw-light:    300;
  --qc-fw-regular:  400;
  --qc-fw-medium:   600;
  --qc-fw-bold:     700;
  --qc-fw-black:    800;

  --qc-lh-tight:   1.2;   /* gros titres                                   */
  --qc-lh-title:   1.4;   /* titres éditoriaux                             */
  --qc-lh-body:    1.6;   /* corps de texte                                */
  --qc-ls-title:   1.2px; /* seul letter-spacing du système                */

  /* --- Espacement -------------------------------------------------------
     Grille de 5px. Tout espacement doit sortir de cette échelle.          */
  --qc-space-1:   5px;
  --qc-space-2:  10px;
  --qc-space-3:  15px;
  --qc-space-4:  20px;   /* espacement inter-widgets par défaut du site    */
  --qc-space-5:  30px;
  --qc-space-6:  40px;
  --qc-space-7:  50px;
  --qc-space-8:  80px;   /* respiration verticale des sections (desktop)   */

  --qc-section-y:      var(--qc-space-8);
  --qc-section-y-tab:  var(--qc-space-7);
  --qc-section-y-mob:  var(--qc-space-6);

  /* --- Formes -----------------------------------------------------------
     Un seul rayon dans le système : 15px. La variante plate (0) existe
     pour le CTA doré, héritée du site. Le pill sert aux badges.           */
  --qc-radius:       15px;
  --qc-radius-flat:   0px;
  --qc-radius-pill: 999px;

  --qc-border-w:      2px;  /* bordures de cartes et de boutons            */
  --qc-rule-w:        4px;  /* filet d'accent sur UN seul côté             */
  --qc-hairline:      1px;  /* séparateurs                                 */

  /* Trois ombres, reprises telles quelles du site. Plus le flou augmente,
     plus l'opacité baisse — c'est la logique à respecter si on en ajoute. */
  --qc-shadow-sm: 0 0 10px 0 rgba(0, 0, 0, 0.50);  /* cartes produits     */
  --qc-shadow-md: 0 0 20px 0 rgba(0, 0, 0, 0.25);  /* cartes témoignages  */
  --qc-shadow-lg: 0 0 30px 0 rgba(0, 0, 0, 0.15);  /* grands blocs        */

  /* --- Mise en page ----------------------------------------------------- */
  --qc-container:      1140px;
  --qc-container-wide: 1200px;
  --qc-gutter:           20px;
  --qc-hero-min-h:      700px;

  /* --- Mouvement -------------------------------------------------------- */
  --qc-transition: 200ms ease;
}

/* Échelle mobile — les titres desktop sont trop hauts sous 767px.
   Redéfinir les tokens plutôt que surcharger chaque composant.            */
@media (max-width: 767px) {
  :root {
    --qc-fs-display: 34px;
    --qc-fs-h1:      28px;
    --qc-fs-h2:      24px;
    --qc-fs-h3:      20px;
    --qc-fs-h4:      18px;
    --qc-fs-body:    17px;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root { --qc-transition: 0ms; }
}