/* ==========================================================================
   Brandt Energy — tokens.css
   Source unique : collection de variables Figma « Brandt » (maquette V3, mise à jour du 22/10/2026).
   Chaque custom property ci-dessous correspond à une variable Figma du même nom.
   Ne jamais écrire une couleur, un espacement, un rayon ou une taille en dur
   ailleurs que dans ce fichier.
   ========================================================================== */

:root {
  /* --- Couleurs (brandt/*) : 6 couleurs, fusion du 22/10/2026 ------------ */
  --brandt-carbon: #1e1e1e;
  --brandt-light: #f0f0f0;
  --brandt-red: #d50032;
  --brandt-white: #ffffff;
  --brandt-carbon-muted: rgba(30, 30, 30, 0.7);   /* textes secondaires, carte hero, voiles */
  --brandt-line: rgba(30, 30, 30, 0.12);          /* filets, bordure intérieure des cartes */

  /* --- Espacements (space/*) : grille de 4, aucune autre valeur ---------- */
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-28: 28px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;
  --space-56: 56px;
  --space-64: 64px;
  --space-80: 80px;

  /* --- Rayons (radius/*) -------------------------------------------------- */
  --radius-12: 12px;
  --radius-20: 20px;
  --radius-pill: 100px;

  /* --- Tailles (size/*) --------------------------------------------------- */
  --size-icon-16: 16px;
  --size-icon-20: 20px;
  --size-icon-24: 24px;
  --size-icon-32: 32px;
  --size-icon-14: 14px;           /* chevron de pagination mobile uniquement */
  --size-target-44: 44px;
  --size-container-1100: 1100px;
  --size-cta-desktop: 60px;
  --size-cta-mobile: 52px;
  --size-pastille-44: 44px;

  /* --- Traits (épaisseurs de filet et de contour) -------------------------- */
  --border-1: 1px;
  --border-1-5: 1.5px;
  --border-2: 2px;

  /* --- Mise en page : largeurs de référence de la maquette ----------------- */
  --size-column-title: 340px;     /* colonne titre des sections « titre à gauche » */
  --size-text-max: 760px;         /* largeur de lecture des intros et textes longs */
  --size-hero-card: 560px;        /* carte des heroes à photo (desktop) */
  --size-hero-title: 480px;       /* bloc titre + texte de la carte hero */
  --size-mobile-content: 358px;   /* largeur de contenu des maquettes mobiles (390 − 2 × 16) */
  --header-height: 64px;          /* header mobile (100 en desktop, 88 tunnel desktop) */
  --size-header-veil: 240px;      /* dégradé derrière le header sombre */
  --size-logo-header-w: 110px;  --size-logo-header-h: 33px;   /* 153 × 46 en desktop */
  --size-cta-compact: 44px;       /* CTA « Devis » du header mobile (cible tactile 44) */
  --size-submenu: 296px;
  --size-footer-brand: 320px;
  --size-logo-footer: 122px;      /* 153 en desktop */
  --size-dialog: 640px;           /* préférences cookies (desktop) */
  --switch-inset: 6px;
  --size-input: 52px;             /* hauteur des saisies (54 en desktop) */
  --size-textarea: 110px;         /* zone de message (Contact) */
  --size-table-first-col: 320px;
  --size-form-card: 620px;        /* carte formulaire Contact et candidature (desktop) */
  --size-prereq-title: 200px;     /* « Les prérequis » (Espace pro) */
  --icon-text-offset: 2px;        /* alignement optique d'une icône 20 sur la 1re ligne de texte */
  --size-marker: 22px;            /* pastille de La maison (24 en desktop) */


  /* --- Dimensions de composants (résultats de la maquette, nommés une fois ici) --- */
  --border-3: 3px;                /* ancre active (fiche produit) */
  --radius-checkbox: 6px;         /* case à cocher 24 px */
  --size-hero: 760px;             /* hauteur des heroes à photo (min(100svh, …)) */
  --size-header-tunnel: 88px;     /* header du tunnel de devis (desktop) */
  --size-text-narrow: 720px;      /* intro centrée (confirmation, 404) */
  --size-steps-max: 1000px;       /* rangée d'étapes (confirmation, 404) */
  --size-pastille-36: 36px;
  --size-pastille-40: 40px;
  --size-pastille-48: 48px;
  --size-pastille-56: 56px;
  --size-pastille-72: 72px;
  --size-thumb: 72px;             /* vignette de galerie (88 en desktop) */
  --radius-thumb: 10px;           /* vignette mobile (12 en desktop) */
  --size-switch-w: 52px;  --size-switch-h: 32px;
  --size-progress: 5px;           /* segments de progression du devis (6 en desktop) */
  --size-round-button: 44px;      /* bouton rond (56 en desktop) */
  --size-gallery: 400px;          /* galerie de la fiche produit (desktop) */
  --size-option-label: 170px;     /* libellé d'option de la fiche (desktop) */
  --size-spec-label: 120px;       /* libellé de caractéristique (240 en desktop) */
  --size-aide-label: 190px;       /* libellé « Les aides une par une » (desktop) */
  --size-field-short: 260px;      /* champ court du devis (surface, code postal) */
  --size-devis-form: 760px;       /* formulaire du devis (desktop) */
  --size-devis-panel: 276px;      /* panneau latéral du devis (desktop) */
  --size-legal-nav: 300px;        /* sommaire des pages légales (desktop) */
  --size-conseil-box: 440px;      /* encadré « Ce que vous obtenez » (desktop) */
  --size-visual-hero: 460px;      /* visuel du hero sans photo (desktop) */
  --size-visual-cqf: 420px;       /* visuels « Ce qui fait Brandt Energy » (desktop) */
  --ratio-cqf: 3 / 2;             /* ratio de ces visuels (desktop) */
  --size-option-min: 46px;        /* hauteur min d'une option (desktop) */
  --size-dialog-max-height: 92vh; /* préférences cookies : hauteur max de la fenêtre */
  --text-tight-lh: 1;             /* interligne des chiffres en pastille */
  /* La maison : ratio du visuel et cadrage de l'image (repris de la maquette, mobile ; desktop plus bas) */
  --maison-ratio: 358 / 288;
  --maison-img-x: -2.51%;
  --maison-img-y: 1.39%;
  --maison-img-w: 105.03%;
  --size-visual-aides: 360px;     /* visuel « Avec Brandt Energy » (desktop) */
  --size-product-media: 310px;    /* plateau visuel de la Carte produit (desktop) */
  --size-logo-brand: 212px;       /* wordmark Brandt de « La marque » (240 en desktop) */
  --min-card-photo: 447px;        /* carte à photo « Par où commencer » (500 en desktop) */
  --min-card-cap: 537px;          /* carte à photo « Comment améliorer / produire » (500 en desktop) */
  --min-product-card: 344px;      /* Carte produit horizontale (desktop) */
  --reveal-blur: 6px;             /* flou de l'entrée au défilement */
  --reveal-stagger: 60ms;         /* décalage entre les cartes d'une même grille */
  --press-scale: 0.98;            /* pression d'un bouton */
  --hover-lift: -2px;             /* survol d'une carte cliquable (translation, sans ombre) */
  --hover-scale: 1.1;             /* survol d'une pastille de La maison */

  /* --- Profondeur : uniquement les éléments flottants ---------------------- */
  --shadow-float: 0 8px 32px rgba(30, 30, 30, 0.16);
  --shadow-float-up: 0 -8px 32px rgba(30, 30, 30, 0.16);
  /* Voile de lisibilité (texte blanc sur photo) : carbone 70 % → 0 */
  --veil-top: linear-gradient(180deg, rgba(30, 30, 30, 0.7) 0%, rgba(30, 30, 30, 0) 100%);
  --veil-card: linear-gradient(180deg, rgba(30, 30, 30, 0.7) 0%, rgba(30, 30, 30, 0.2) 60%, rgba(30, 30, 30, 0) 100%);

  /* --- Empilement ------------------------------------------------------------ */
  --z-raised: 1;                  /* calque décoratif au-dessus d'une image (voile du header) */
  --z-sticky: 10;
  --z-header: 30;
  --z-cookies: 40;
  --z-overlay: 50;

  /* --- Typographie : styles Mobile/* par défaut, Desktop/* à 1024 px ----- */
  --font-family: "Onest", "Helvetica Neue", Arial, sans-serif;
  --font-weight-medium: 500;
  --font-weight-bold: 700;

  --text-h1-size: 28px;   --text-h1-lh: 1.1;  --text-h1-weight: var(--font-weight-bold);
  --text-h2-size: 18px;   --text-h2-lh: 1.2;  --text-h2-weight: var(--font-weight-bold);
  --text-body-size: 14px; --text-body-lh: 1.4; --text-body-weight: var(--font-weight-medium);
  --text-legend-size: 12px; --text-legend-lh: 1.3; --text-legend-weight: var(--font-weight-medium);
  --text-cta-size: 14px;  --text-cta-lh: 1.2;  --text-cta-weight: var(--font-weight-medium);

  /* --- Mise en page --------------------------------------------------------- */
  --section-padding: var(--space-56);
  --section-padding-under-title: var(--space-32);
  --gutter: var(--space-16);
  --grid-gap: var(--space-12);
  --card-padding: var(--space-20);
  --cta-height: var(--size-cta-mobile);
  --cta-padding-x: var(--space-20);

  /* --- Comportement ------------------------------------------------------- */
  --ease: cubic-bezier(0.32, 0.72, 0, 1);  /* courbe unique (maquette, « Mouvement ») */
  --duration-press: 120ms;
  --duration-state: 200ms;
  --duration-expand: 300ms;
  --duration-enter: 600ms;
  --transition: var(--duration-state) var(--ease);
  --focus-ring: 0 0 0 2px var(--brandt-white), 0 0 0 4px var(--brandt-carbon);
  --focus-ring-inverse: 0 0 0 2px var(--brandt-carbon), 0 0 0 4px var(--brandt-white);
  --disabled-opacity: 0.4;
  --idle-opacity: 0.5;            /* pastilles inactives de La maison */
  /* Points de rupture, pour mémoire : CSS ne lit pas une variable dans une media query, les fichiers écrivent donc 768px et 1024px en clair (seule exception à la règle des tokens). */
  --breakpoint-tablet: 768px;
  --breakpoint-desktop: 1024px;
}

/* Bornes desktop (maquettes 1440 px). Entre 768 et 1023 px : mise en page mobile, grilles à 2 colonnes. */
@media (min-width: 1024px) {
  :root {
    --maison-ratio: 736 / 442;
    --maison-img-x: 7.61%;
    --maison-img-y: -2.71%;
    --maison-img-w: 84.92%;
    --text-h1-size: 36px;
    --text-h2-size: 22px;
    --text-body-size: 16px;
    --text-legend-size: 12px;
    --text-cta-size: 18px;

    --section-padding: var(--space-80);
    --section-padding-under-title: var(--space-64);
    --gutter: var(--space-64);
    --grid-gap: var(--space-20);
    --card-padding: var(--space-28);
    --cta-height: var(--size-cta-desktop);
    --cta-padding-x: var(--space-28);
    --header-height: 100px;
    --size-marker: 24px;
    --size-logo-footer: 153px;
    --size-thumb: 88px;
    --radius-thumb: var(--radius-12);
    --size-progress: 6px;
    --size-round-button: 56px;
    --size-spec-label: 240px;
    --size-logo-brand: 240px;
    --min-card-photo: 500px;
    --min-card-cap: 500px;
    --size-input: 54px;
    --size-logo-header-w: 153px;  --size-logo-header-h: 46px;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root { --duration-press: 0ms; --duration-state: 0ms; --duration-expand: 0ms; --duration-enter: 0ms; }
}

/* --- Polices : Onest Medium 500 et Bold 700, fichiers locaux (RGPD) --------
   Fichiers locaux assets/fonts/Onest-Medium.woff2 et Onest-Bold.woff2 (licence OFL, Google Fonts), préchargés par functions.php. */
@font-face {
  font-family: "Onest";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/Onest-Medium.woff2") format("woff2");
}
@font-face {
  font-family: "Onest";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/Onest-Bold.woff2") format("woff2");
}