/* ═══════════════════════════════════════════════════════════════════════
   PLUME ÉTUDES — tokens.css
   Direction « Le plan coté » — charte graphique, document de référence unique.

   Les valeurs ci-dessous sont RECOPIÉES de la charte (section 08). Aucune
   couleur ni taille en dur nulle part ailleurs : tout passe par ces variables.
   Modifier une valeur ici, jamais dans une page.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── LA POLICE, SERVIE PAR LE SITE ────────────────────────────────────────
   Libre Franklin était chargée depuis Google : deux allers-retours en
   chaîne (fonts.googleapis.com puis fonts.gstatic.com) avant que le
   premier texte ne puisse s'afficher — 985 ms mesurés sur mobile par
   PageSpeed. Elle est maintenant sur le serveur : un seul fichier, servi
   par la connexion déjà ouverte.

   C'est une police VARIABLE : le même fichier porte les quatre graisses
   (300, 600, 700, 800). Il n'y a donc rien à ajouter si une graisse
   manque — elle est déjà là.

   L'unicode-range fait le tri : un navigateur ne télécharge latin-ext que
   s'il rencontre un caractère qui l'exige. Pour du texte français, seul
   « latin » part (29 Ko).

   Effet de bord utile : plus aucune adresse IP de visiteur n'est envoyée
   à Google au chargement d'une page. */

@font-face {
  font-family: 'Libre Franklin';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('assets/polices/libre-franklin-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* L'ordre compte. Les deux sous-ensembles se chevauchent sur U+0152-0153
   (Œ œ) et, à plage égale, c'est la DERNIÈRE déclaration qui gagne. Avec
   « latin » en second, un mot comme « cœur » ou « œuvre » tire le fichier
   latin ; dans l'autre sens il tirait latin-ext, soit 25 Ko inutiles sur
   presque chaque page française. Google ordonne ses propres @font-face
   exactement comme ça. */
@font-face {
  font-family: 'Libre Franklin';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('assets/polices/libre-franklin-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}


:root {
  /* ── Couleurs (charte §02) ────────────────────────────────────────────
     Cinq valeurs, pas une de plus. Une partie du public a plus de 70 ans :
     tout texte courant tient au minimum 4,5:1, le corps ne descend jamais
     sous 17 px. */
  --papier: #FFFFFF;        /* fond général — écran comme papier */
  --papier-gris: #F5F8FA;   /* encadrés */
  --encre: #0E2A45;         /* texte principal, titres, traits de cote — 14,6:1 */
  --tirage: #1F5C8B;        /* libellés de cote, sur-titres, liens — 7,1:1 */
  --texte: #3E4C5A;         /* texte courant secondaire — 8,0:1 */
  --gris: #4E5D6C;          /* légendes — 6,1:1 */
  --chantier: #E8B21F;      /* APLAT UNIQUEMENT, encre par-dessus. Jamais en
                               couleur de texte sur blanc : 1,9:1. */
  --cote: #C3CFDA;          /* traits d'attache, bordures inactives */
  --cote-faible: #E2E8ED;   /* séparateurs légers */

  /* Sur fond encre, la charte (§02) impose : texte en blanc, libellés de cote
     en jaune de chantier, jamais de bleu de tirage. Le trait de cote n'y est
     donc pas une 6e couleur mais le papier atténué — déclaré ici pour qu'aucune
     valeur ne soit écrite en dur dans une page. */
  --cote-encre: rgba(255, 255, 255, 0.28);

  /* ── Zones climatiques de la carte d'intervention ────────────────────
     Trois couleurs franches demandées pour la carte : jaune, bleu, rouge.
     Le rouge n'existait pas dans la palette — il est déclaré ici et ne
     sert QUE sur cette carte, pour dire « hors zone ». Il ne doit pas
     ressortir ailleurs : ce n'est pas une 6e couleur de marque.

     Les libellés posés dessus ne se choisissent pas au hasard :
       · sur le jaune, l'encre           — 7,9:1
       · sur le bleu, le papier          — 7,1:1
       · sur le rouge, le papier         — 6,2:1
     Le blanc sur le jaune tomberait à 1,9:1, illisible. */
  --rouge-hors-zone: #B3322B;

  --zone-h1: var(--chantier);
  --zone-h2: var(--tirage);
  --zone-h3: var(--rouge-hors-zone);

  /* ── Typographie (charte §03) ────────────────────────────────────────
     Libre Franklin, famille unique, cinq graisses. Un plan n'a qu'une
     écriture. Aucune police à chasse fixe nulle part, y compris pour les
     chiffres, les prix et les libellés. */
  --police: 'Libre Franklin', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;

  --gr-fin: 300;
  --gr-cote: 600;
  --gr-valeur: 700;
  --gr-titre: 800;

  /* Tailles : mobile d'abord, valeurs bureau en bas de fichier */
  --t-titre-1: 29px;
  --t-titre-2: 24px;
  --t-titre-3: 20px;
  --t-courant: 17px;
  --t-valeur: 15px;
  --t-legende: 13px;
  --t-surtitre: 11px;

  /* Interlignages */
  --li-titre-1: 1.12;
  --li-titre-2: 1.15;
  --li-titre-3: 1.2;
  --li-courant: 1.65;
  --li-valeur: 1.4;
  --li-legende: 1.5;
  --li-surtitre: 1.4;

  /* Interlettrages : sur-titres et libellés de cote en capitales */
  --il-cote: 0.18em;
  --il-marque: 0.12em;

  /* ── Espacement, traits, formes (charte §08) ─────────────────────────
     Échelle de 4. */
  --e-1: 4px;
  --e-2: 8px;
  --e-3: 12px;
  --e-4: 16px;
  --e-5: 20px;
  --e-6: 24px;
  --e-8: 32px;
  --e-10: 40px;
  --e-12: 48px;
  --e-16: 64px;
  --e-20: 80px;

  --trait-fin: 1px;         /* filets, traits d'attache */
  --trait-cote: 1.5px;      /* repères et traits de cote */
  --trait-fort: 2px;        /* soulignement de titre */
  --repere-haut: 12px;      /* hauteur des repères verticaux */

  --rayon: 0;               /* aucun arrondi, nulle part */
  --ombre: none;            /* aucune ombre, nulle part */
  --cible-min: 48px;        /* taille tactile minimale */

  /* ── La grille du site (charte §05, « version bureau ») ───────────────
     UNE seule largeur pour l'en-tête, le corps et le pied de page : sans
     ça, le logo et le titre de la page ne commencent pas sur la même
     verticale, et un site dont la charte s'appelle « le plan coté »
     affiche un défaut d'alignement de 190 px dès la deuxième page.
     Le texte, lui, garde sa longueur de ligne : c'est le CONTENEUR qui
     fait 1120 px, pas le paragraphe. */
  --largeur-page: 1120px;   /* largeur de lecture, charte §08 */
  --marge-page: var(--e-12);/* 48 px, charte §08 */
  --colonne-texte: 66ch;    /* longueur de ligne confortable */
  --entete-h: 104px;        /* hauteur de l'en-tête collante, sur ordinateur :
                               sert au calage des ancres et du sommaire */

  /* ── Mouvement ───────────────────────────────────────────────────────
     Une seule transition, sobre. Rien de décoratif. */
  --transition: 200ms ease-out;

  /* ── Zone sûre (encoche iPhone, barre du bas) ────────────────────── */
  --safe-haut: max(env(safe-area-inset-top), 8px);
  --safe-bas: max(env(safe-area-inset-bottom), 8px);


  /* Mode clair uniquement : un plan ne s'inverse pas. */
  color-scheme: light;
}

/* Tailles bureau (charte §03) */
@media (min-width: 901px) {
  :root {
    --t-titre-1: 56px;
    --t-titre-2: 36px;
    --t-titre-3: 26px;
    --t-courant: 18px;
    --t-valeur: 16px;
  }
}

/* Grand écran. Sur 1400 px, un corps de 18 px se lit petit et un titre de
   36 px ne tient plus la page : l'échelle monte d'un cran. Le format story
   est exclu — il n'a jamais cette largeur, et son budget de 425 px se
   calcule sur les tailles du téléphone. */
@media (min-width: 1280px) {
  :root {
    --t-titre-1: 66px;
    --t-titre-2: 44px;
    --t-titre-3: 28px;
    --t-courant: 19px;
    --t-valeur: 17px;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   BASE
   ═══════════════════════════════════════════════════════════════════════ */

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--police);
  font-size: var(--t-courant);
  font-weight: var(--gr-fin);
  line-height: var(--li-courant);
  color: var(--texte);
  background-color: var(--papier);
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--police);
  font-weight: var(--gr-titre);
  color: var(--encre);
}

h1 {
  font-size: var(--t-titre-1);
  line-height: var(--li-titre-1);
}

h2 {
  font-size: var(--t-titre-2);
  line-height: var(--li-titre-2);
}

h3 {
  font-size: var(--t-titre-3);
  line-height: var(--li-titre-3);
}

p {
  margin-bottom: var(--e-4);
}

p:last-child {
  margin-bottom: 0;
}

strong {
  font-weight: var(--gr-valeur);
  color: var(--encre);
}

a {
  color: var(--tirage);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: var(--trait-fin);
}

a:hover {
  color: var(--encre);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
label:focus-within {
  outline: var(--trait-fort) solid var(--tirage);
  outline-offset: 2px;
}

/* Sur fond encre, le bleu de tirage tombe à 2,1:1 : on perd le curseur au
   clavier dans le menu, le hero et les sections inversées. Le jaune de
   chantier y tient 7,9:1. Une règle de contexte, pas cinq rustines. */
.sur-encre a:focus-visible,
.sur-encre button:focus-visible,
.sur-encre summary:focus-visible,
.footer a:focus-visible,
.footer button:focus-visible,
.menu-plein a:focus-visible,
.menu-plein button:focus-visible,
.slide--encre a:focus-visible,
.slide--encre button:focus-visible,
.lp-cine a:focus-visible,
.lp-pied a:focus-visible,
.hero-contenu a:focus-visible,
#slide-1 a:focus-visible,
#slide-1 button:focus-visible {
  outline-color: var(--chantier);
}

/* ── Le motif de cote — seul ornement autorisé (charte §01) ──────────────
   Deux repères, un trait, la valeur inscrite. Ce qui n'est pas mesuré
   n'est pas affiché. */

/* Sur-titre et libellé de cote */
.surtitre {
  font-size: var(--t-surtitre);
  font-weight: var(--gr-cote);
  line-height: var(--li-surtitre);
  letter-spacing: var(--il-cote);
  text-transform: uppercase;
  color: var(--tirage);
}

/* Cote simple : encadre un titre, une section, un bloc de valeurs */
.cote {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  margin-bottom: var(--e-4);
}

.cote::before,
.cote::after {
  content: "";
  width: var(--trait-cote);
  height: var(--repere-haut);
  background-color: var(--encre);
  flex: 0 0 auto;
}

.cote__trait {
  flex: 1;
  height: var(--trait-cote);
  background-color: var(--encre);
}

/* Ligne de relevé : libellé à gauche, trait d'attache, valeur à droite.
   C'est la brique de la fiche d'étude, du devis et du compte rendu. */
.releve {
  margin: var(--e-6) 0;
}

.releve__ligne {
  display: flex;
  align-items: baseline;
  gap: var(--e-3);
  padding: var(--e-3) 0;
  /* Filet de sécurité : une ligne à qui il manque son trait d'attache garde
     malgré tout sa valeur calée à droite. Sans ça — le cas de toute la page
     Prestations — le libellé et la valeur se collent à gauche et le motif de
     cote, seul ornement autorisé, disparaît de la page. */
  justify-content: space-between;
}

.releve__label {
  font-size: var(--t-courant);
  color: var(--texte);
  flex: 0 0 auto;
}

.releve__attache {
  flex: 1;
  height: var(--trait-fin);
  background-color: var(--cote);
  min-width: var(--e-6);
}

.releve__valeur {
  font-size: var(--t-valeur);
  font-weight: var(--gr-valeur);
  font-variant-numeric: tabular-nums;
  color: var(--encre);
  flex: 0 0 auto;
  text-align: right;
}

/* Valeur non encore mesurée : le vide fait partie du dessin.
   Partout où l'information manque, on écrit visiblement « à compléter ». */
.a-completer {
  font-weight: var(--gr-fin);
  font-style: italic;
  color: var(--gris);
}

/* ── Boutons ─────────────────────────────────────────────────────────────
   DEUX boutons pour tout le site, définis ici une seule fois. Avant, la
   même action « Tester mon éligibilité » portait cinq habillages selon la
   page — dont, trois fois sur cinq, le petit bouton de 13 px de l'en-tête
   réemployé comme action de fin de page : un bouton plus petit que le
   texte qui l'entoure. L'action principale est un aplat de jaune de
   chantier avec l'encre par-dessus (charte §02 et §05), partout, sans
   exception. */

.btn-plein,
.btn-vide {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--cible-min);
  padding: var(--e-3) var(--e-6);
  font-family: var(--police);
  font-size: var(--t-courant);
  line-height: 1.5;
  text-align: center;
  text-decoration: none;
  border-radius: var(--rayon);
  box-shadow: var(--ombre);
  cursor: pointer;
  transition: background-color var(--transition), color var(--transition);
}

/* Action principale : aplat de jaune de chantier, encre par-dessus.
   Le jaune ne s'emploie QUE en aplat — jamais en couleur de texte sur
   blanc, où il tombe à 1,9:1 (charte §02). */
.btn-plein {
  background-color: var(--chantier);
  border: var(--trait-cote) solid var(--chantier);
  color: var(--encre);
  font-weight: var(--gr-valeur);
}

.btn-plein:hover {
  background-color: var(--encre);
  border-color: var(--encre);
  color: var(--papier);
}

/* Action secondaire : le filet seul. */
.btn-vide {
  background-color: transparent;
  border: var(--trait-cote) solid var(--encre);
  color: var(--encre);
  font-weight: var(--gr-cote);
}

.btn-vide:hover {
  background-color: var(--encre);
  color: var(--papier);
}

/* ── L'appui ─────────────────────────────────────────────────────────────
   Au doigt, le survol n'existe pas : sans état d'appui, le visiteur tape et
   rien ne confirme sa frappe. L'inversion est immédiate (aucune transition
   à l'aller), puis revient en douceur. Aucun déplacement, aucune ombre. */
.btn-plein:active,
.btn-vide:active {
  background-color: var(--encre);
  border-color: var(--encre);
  color: var(--papier);
  transition: none;
}

.btn-plein:active {
  border-color: var(--encre);
}

/* Le survol ne s'applique qu'aux appareils qui en ont un : sur téléphone il
   restait « collé » après la tape, bouton inversé jusqu'au prochain geste. */
@media (hover: none) {
  .btn-plein:hover {
    background-color: var(--chantier);
    border-color: var(--chantier);
    color: var(--encre);
  }

  .btn-vide:hover {
    background-color: transparent;
    color: var(--encre);
  }
}

/* ── Formulaires ─────────────────────────────────────────────────────── */

input:not([type="checkbox"]):not([type="radio"]),
select,
textarea {
  width: 100%;
  min-height: var(--cible-min);
  padding: var(--e-3);
  font-family: var(--police);
  font-size: var(--t-courant);
  color: var(--encre);
  background-color: var(--papier);
  /* Le gris de cote (1,58:1) ne se voit pas à 60 ans : la frontière d'un
     champ doit tenir 3:1 (WCAG 1.4.11). Le gris de légende fait 6,1:1. */
  border: var(--trait-cote) solid var(--gris);
  border-radius: var(--rayon);
  transition: border-color var(--transition);
}

/* Épaisseur constante entre les deux états : sinon le champ saute de 1 px
   au moment où l'on clique dedans. */
input:not([type="checkbox"]):not([type="radio"]):focus,
select:focus,
textarea:focus {
  border-color: var(--encre);
}

input[type="checkbox"],
input[type="radio"] {
  width: 22px;
  height: 22px;
  accent-color: var(--encre);
  cursor: pointer;
}

label {
  color: var(--encre);
}

/* ── Maquette : « à compléter » visible (charte §07) ──────────────────── */

/* La marque reste dans le code — c'est la mémoire de ce qui manque — mais
   elle ne s'affiche plus au visiteur : un site qui écrit « à compléter »
   sur sa page d'accueil ne récolte aucune demande.
   Pour la relecture : ouvrir la console et taper
   document.documentElement.classList.add('revue')
   ou ajouter class="revue" sur la balise <html>. */
[data-maquette] {
  border-bottom: 0;
}

[data-maquette]::after {
  content: none;
}

html.revue [data-maquette] {
  border-bottom: var(--trait-fin) dashed var(--cote);
}

html.revue [data-maquette]::after {
  content: " à compléter";
  font-size: var(--t-legende);
  font-style: italic;
  font-weight: var(--gr-fin);
  color: var(--gris);
  letter-spacing: 0;
  text-transform: none;
}

/* ── Accessibilité ───────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Texte destiné aux seuls lecteurs d'écran. Il complète un libellé trop court
   pour être compris hors contexte : « En détail » ne dit rien à qui parcourt
   la page lien par lien, « La pompe à chaleur air/eau en détail » si. */
.hors-ecran {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ── LE BANDEAU DE CONSENTEMENT ────────────────────────────────────────────
   Il est ici, et pas dans page.css, parce que les huit pages le portent :
   le conteneur Tag Manager est sur tout le site, donc la demande aussi.
   Son balisage est construit une seule fois, par suivi.js — il n'existe
   dans aucun fichier HTML, et il n'apparaît que si un conteneur est
   configuré. La page d'annonce arrondit ses deux coins hauts dans son
   propre bloc d'habillage ; les sept autres gardent les angles nets. */
.consent {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 500;
  padding: var(--e-4) var(--e-4) calc(var(--e-4) + var(--safe-bas));
  background-color: var(--papier);
  border-top: var(--trait-fort) solid var(--encre);
}

.consent__inner {
  max-width: 1120px;
  margin-inline: auto;
  display: grid;
  gap: var(--e-3);
}

.consent p {
  margin: 0;
  font-size: var(--t-legende);
  line-height: var(--li-legende);
  color: var(--gris);
}

.consent__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--e-3);
}

.consent__actions button { width: 100%; }

@media (min-width: 720px) {
  .consent__inner {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--e-8);
  }
  .consent__actions { grid-template-columns: auto auto; }
  .consent__actions button { width: auto; min-width: 9rem; }
}