/* ============================================================
   CHARTE COMMUNE — extraite de l'accueil porté à la maquette
   « Clair Suisse », et appliquée à toutes les pages servies.

   PRINCIPE : nouvelle peau, même structure. Cette feuille ne
   déplace rien, ne réorganise rien, n'ajoute aucun composant. Elle
   redéfinit les jetons de couleur et de typographie, et les pages
   existantes changent d'apparence sans changer de balisage.

   C'est pourquoi elle REMAPPE les variables historiques plutôt que
   de les remplacer : les feuilles des pages en font 244 usages, et
   les réécrire une par une aurait multiplié les occasions de casser
   une mise en page qu'on ne voulait pas toucher.
   ============================================================ */

:root{
  /* --- Les jetons de la charte --- */
  --fond:#faf7f2;
  --fond-2:#f7f4ef;
  --fond-3:#eeeae3;
  --bleu:#17324f;
  --bleu-fonce:#0f2338;
  --accent:#c1571e;
  --accent-fonce:#a8481a;
  --trait:rgba(23,50,79,.14);
  --trait-fort:rgba(23,50,79,.28);
  --doux:rgba(23,50,79,.7);
  --inconnu:rgba(23,50,79,.42);

  /* --- Les variables historiques, remappées ---
     Elles gardent leur nom : c'est ce qui permet aux feuilles des
     pages de continuer à fonctionner sans être réécrites. */
  --ink:var(--bleu);
  --ink-2:var(--doux);
  --paper:var(--fond);
  --paper-2:#ffffff;
  --brass:var(--accent);          /* l'ancien laiton devient l'accent */
  --teal:var(--accent);           /* le vert aussi : un seul accent */
  --line:var(--trait);
  --muted:var(--doux);
  --unknown:var(--inconnu);
  --seal:var(--accent-fonce);
  --r:2px;                        /* angles : 4 px devient 2 px */
}

/* --- Typographie ---------------------------------------------------
   Trois familles auto-hébergées, aucune requête vers un tiers.
   Bricolage Grotesque et Inter disparaissent : elles venaient de
   Google Fonts, et les pages qui les nommaient encore retombent ici
   sur les familles de la charte. */
body{
  background:var(--fond-3);
  color:var(--bleu);
  font-family:'Source Sans 3',system-ui,sans-serif;
}
h1,h2,h3,.display{
  font-family:'Source Serif 4',Georgia,serif;
  font-weight:300;
  letter-spacing:-.01em;
}
.num,.eyebrow{font-family:'IBM Plex Mono',monospace}
.num{font-variant-numeric:tabular-nums lining-nums;
     font-feature-settings:"tnum" 1,"lnum" 1}
.eyebrow{color:var(--accent);letter-spacing:.12em;text-transform:uppercase}
a{color:var(--bleu)}
a:hover{color:var(--bleu-fonce)}
:focus-visible{outline:2.5px solid var(--accent);outline-offset:3px}

/* --- Composants partagés -------------------------------------------
   Ceux que plusieurs pages emploient déjà sous des noms différents.
   On les rassemble sans renommer l'existant. */

/* Boutons. DEUX niveaux, et il faut les distinguer sans quoi tout
   crie en meme temps.

   `.cta`, `.submit` et `.btn.gold` portent l'ACCENT : c'est l'action
   principale de la page, il n'y en a qu'une.

   `.btn` reste NEUTRE — encre sur clair. C'est ce que fait deja
   cedoo.css, chargee apres celle-ci ; declarer ici que `.btn` est un
   bouton d'accent produirait une regle qui ne s'applique jamais, et une
   feuille dont les regles ne s'appliquent pas trompe le prochain qui la
   lit. */
.cta,.submit,button.submit,.btn.gold{
  min-height:48px;padding:0 24px;border:0;border-radius:var(--r);
  background:var(--accent);color:#fff;cursor:pointer;
  font:600 16px/1 'Source Sans 3',sans-serif;
  display:inline-flex;align-items:center;justify-content:center;
  text-decoration:none;transition:background .18s,transform .12s;
}
.cta:hover,.submit:hover,.btn.gold:hover{background:var(--accent-fonce);color:#fff}
.cta:active,.submit:active,.btn.gold:active{transform:translateY(1px)}

/* Panneau : le fond blanc encadré, employé par les cartes, les
   encadrés de guide et le formulaire d'estimation. */
.panneau,.card,.encadre{
  background:#fff;border:1px solid var(--trait);border-radius:var(--r);
}

/* Champs de formulaire. */
input,select,textarea{
  font-family:inherit;font-size:16px;color:var(--bleu);
  background:var(--fond-2);border:1px solid var(--trait-fort);
  border-radius:var(--r);min-height:48px;padding:0 12px;
}
textarea{padding:12px;min-height:120px;line-height:1.55}
input:focus,select:focus,textarea:focus{
  outline:none;border-color:var(--accent);background:#fff;
  box-shadow:0 0 0 3px rgba(193,87,30,.14);
}

/* Étiquettes FAIT / HYPOTHÈSE. Un marqueur typographique sobre —
   bordure pleine contre bordure tiretée — et non des pastilles de
   couleur criardes. La distinction doit se lire, pas clignoter. */
.marqueur,.fait,.hypothese{
  font:600 10.5px/1 'Source Sans 3',sans-serif;
  letter-spacing:.08em;text-transform:uppercase;
  border:1px solid;padding:3px 6px;border-radius:var(--r);
  white-space:nowrap;display:inline-block;
}
.fait{color:var(--bleu);border-color:var(--bleu);border-style:solid}
.hypothese{color:var(--doux);border-color:var(--trait-fort);border-style:dashed}

/* La donnée inconnue : un élément assumé, pas un trou. */
.inconnu{color:var(--inconnu);border-bottom:1px dotted var(--trait-fort);cursor:help}

/* --- En-tête et pied historiques ------------------------------------
   `cedoo.css` peignait le pied en vert foncé — la couleur de l'ancienne
   charte. Sur fond clair, son texte devenait illisible. */
header{background:var(--fond);border-bottom:1px solid var(--trait)}
footer{background:var(--fond);border-top:1px solid var(--trait);color:var(--doux)}
footer a{color:var(--doux)}
footer a:hover{color:var(--bleu)}