/* ══════════════════════════════════════════════════════════════════
   Charte Bureau 403 — v1
   Servie sur tous les sites : <link rel="stylesheet" href="/_design/bureau403.css">
   Thème par site : redéfinir librement les variables :root (accent, fonds,
   encres, polices, rayon, ombres) — la charte fournit le rythme et les
   composants, le site fournit sa personnalité.
   Doctrine : sobre, lisible, humain. Le contenu d'abord.
   ══════════════════════════════════════════════════════════════════ */

:root {
  /* — Couleurs (clair) — */
  --accent: #4f46e5;            /* UNE seule couleur d'accent par site */
  --accent-contrast: #ffffff;
  --fond: #fafaf9;
  --surface: #ffffff;
  --encre: #1c1917;
  --encre-2: #57534e;
  --trait: #e7e5e4;
  --ok: #15803d;
  --alerte: #b91c1c;

  /* — Typographie fluide — */
  --police: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --police-titre: var(--police);
  --t-0: clamp(0.9rem, 0.85rem + 0.2vw, 1rem);      /* petit    */
  --t-1: clamp(1rem, 0.95rem + 0.35vw, 1.125rem);   /* courant  */
  --t-2: clamp(1.25rem, 1.1rem + 0.8vw, 1.6rem);    /* h3       */
  --t-3: clamp(1.6rem, 1.3rem + 1.5vw, 2.3rem);     /* h2       */
  --t-4: clamp(2.1rem, 1.6rem + 2.8vw, 3.4rem);     /* h1       */

  /* — Rythme — */
  --e-1: 0.5rem; --e-2: 1rem; --e-3: 1.5rem; --e-4: 2.5rem; --e-5: 4rem;
  --rayon: 12px;
  --ombre: 0 1px 2px rgb(0 0 0 / .04), 0 8px 24px -12px rgb(0 0 0 / .12);
  --largeur: 68rem;
  --largeur-texte: 42rem;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fond: #131110;
    --surface: #1d1a19;
    --encre: #f5f5f4;
    --encre-2: #a8a29e;
    --trait: #302c2a;
    --ombre: 0 1px 2px rgb(0 0 0 / .3), 0 8px 24px -12px rgb(0 0 0 / .5);
  }
}

/* ── Base ─────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
body {
  margin: 0;
  font-family: var(--police);
  font-size: var(--t-1);
  line-height: 1.65;
  color: var(--encre);
  background: var(--fond);
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
main { flex: 1; }
img, svg, video { max-width: 100%; height: auto; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 2px; }

h1, h2, h3, h4 {
  font-family: var(--police-titre);
  line-height: 1.15;
  letter-spacing: -0.015em;
  margin: 0 0 var(--e-2);
  text-wrap: balance;
}
h1 { font-size: var(--t-4); font-weight: 750; }
h2 { font-size: var(--t-3); font-weight: 700; margin-top: var(--e-5); }
h3 { font-size: var(--t-2); font-weight: 650; margin-top: var(--e-4); }
p, ul, ol { margin: 0 0 var(--e-2); max-width: var(--largeur-texte); }
.sourdine { color: var(--encre-2); }
a { color: var(--accent); text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
hr { border: 0; border-top: 1px solid var(--trait); margin: var(--e-4) 0; }
code { background: color-mix(in srgb, var(--trait) 55%, transparent);
       padding: .15em .4em; border-radius: 5px; font-size: .92em; }

/* ── Structure ────────────────────────────────────────────────── */
.conteneur { width: min(var(--largeur), 100% - 2.5rem); margin-inline: auto; }
.section { padding-block: var(--e-5); }
.section-alt { background: var(--surface); border-block: 1px solid var(--trait); }

/* En-tête de site */
.entete {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--e-3); padding-block: var(--e-2);
}
.entete nav { display: flex; gap: var(--e-3); flex-wrap: wrap; }
.entete nav a { color: var(--encre); text-decoration: none; font-weight: 500; }
.entete nav a:hover, .entete nav a[aria-current] { color: var(--accent); }
.logo { font-weight: 800; letter-spacing: .02em; text-decoration: none; color: var(--encre); font-size: 1.15rem; }
.logo em { color: var(--accent); font-style: normal; }

/* Héros */
.heros { padding-block: var(--e-5); }
.heros h1 { max-width: 24ch; }
.heros .accroche { font-size: var(--t-2); color: var(--encre-2); max-width: 38ch; font-weight: 400; }
.heros .actions { display: flex; gap: var(--e-2); flex-wrap: wrap; margin-top: var(--e-3); }

/* Grilles */
.grille { display: grid; gap: var(--e-3); grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }

/* Cartes */
.carte {
  background: var(--surface); border: 1px solid var(--trait);
  border-radius: var(--rayon); padding: var(--e-3); box-shadow: var(--ombre);
}
.carte h3 { margin-top: 0; font-size: 1.15rem; }
.carte > :last-child { margin-bottom: 0; }

/* Boutons */
.btn {
  display: inline-block; padding: .7em 1.4em; border-radius: 999px;
  font: inherit; font-weight: 600; text-decoration: none; cursor: pointer;
  border: 1.5px solid transparent; transition: transform .12s, box-shadow .12s;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn-plein { background: var(--accent); color: var(--accent-contrast); }
.btn-plein:hover { box-shadow: 0 6px 20px -6px color-mix(in srgb, var(--accent) 55%, transparent); }
.btn-contour { border-color: var(--trait); color: var(--encre); background: var(--surface); }
.btn-contour:hover { border-color: var(--accent); color: var(--accent); }

/* Étiquettes, prix, FAQ */
.etiquette {
  display: inline-block; font-size: var(--t-0); font-weight: 600;
  color: var(--accent); background: color-mix(in srgb, var(--accent) 11%, transparent);
  padding: .25em .8em; border-radius: 999px; margin-bottom: var(--e-2);
}
.prix { font-size: var(--t-3); font-weight: 750; }
.prix small { font-size: var(--t-0); font-weight: 500; color: var(--encre-2); }
details { border: 1px solid var(--trait); border-radius: var(--rayon);
          padding: var(--e-2) var(--e-3); background: var(--surface); margin-bottom: var(--e-1); }
details summary { font-weight: 600; cursor: pointer; }
details[open] summary { margin-bottom: var(--e-1); }

/* Formulaires */
input, textarea, select {
  font: inherit; color: inherit; width: 100%;
  background: var(--surface); border: 1.5px solid var(--trait);
  border-radius: calc(var(--rayon) / 1.5); padding: .65em .9em;
}
input:focus, textarea:focus, select:focus { border-color: var(--accent); outline: none; }
label { font-weight: 600; display: block; margin-bottom: var(--e-1); }

/* Tableaux */
table { border-collapse: collapse; width: 100%; margin-bottom: var(--e-3); }
th, td { text-align: left; padding: .6em .9em; border-bottom: 1px solid var(--trait); }
th { font-size: var(--t-0); text-transform: uppercase; letter-spacing: .05em; color: var(--encre-2); }

/* Pied de page */
.pied {
  border-top: 1px solid var(--trait); padding-block: var(--e-4);
  font-size: var(--t-0); color: var(--encre-2);
}
.pied a { color: inherit; }
.pied .conteneur { display: flex; justify-content: space-between; gap: var(--e-3); flex-wrap: wrap; }

/* Utilitaires */
.centre { text-align: center; }
.centre > * { margin-inline: auto; }
.visuellement-cache {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}