/* ===================================================================
   Amplitude — feuille de style
   Voir docs/plan-design.md pour la justification de chaque choix, et
   docs/plan-mode-sombre.md pour la dérivation de la palette sombre.
   =================================================================== */

/* --- Polices autohébergées (pas de dépendance tierce, pas de CSP à
   ouvrir vers un CDN externe) --- */
@font-face {
  font-family: "Barlow Condensed";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/barlow-500.woff2") format("woff2");
}
@font-face {
  font-family: "Barlow Condensed";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/barlow-600.woff2") format("woff2");
}
@font-face {
  font-family: "Barlow Condensed";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/barlow-700.woff2") format("woff2");
}
@font-face {
  font-family: "Work Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/worksans-400.woff2") format("woff2");
}
@font-face {
  font-family: "Work Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/worksans-500.woff2") format("woff2");
}
@font-face {
  font-family: "Work Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/worksans-600.woff2") format("woff2");
}

/* ===================================================================
   Thème — variables sémantiques
   Chaque rôle (fond de page, texte, fonds de bande) est une variable
   séparée de la couleur de marque brute, pour pouvoir redéfinir un
   thème sombre sans deviner : les rôles "texte sur fond clair" et
   "texte sur bande de marque" n'ont pas la même valeur une fois la
   page assombrie (une couleur ne peut pas être à la fois assez claire
   pour contraster sur fond presque noir ET assez foncée pour
   contraster sur crème — vérifié par calcul, pas au jugé).
   =================================================================== */
:root {
  --page-bg: #f7f4ee;
  --text-primary: #1b2a41;
  --text-secondary: #565f6e;
  --text-on-brand: #f7f4ee;
  --accent-text: #a8502c;

  --brand-navy: #1b2a41;
  --brand-terracotta: #a8502c;
  --brand-sage: #3e7458;
  --brand-coral: #b23a26;

  --focus-ring: #1b2a41;
  --focus-ring-on-brand: #f7f4ee;

  --line: rgba(27, 42, 65, 0.12);

  /* "Papier" du dossard : reste une couleur fixe dans les deux thèmes,
     comme un objet physique (un vrai dossard de course ne s'inverse
     pas en mode sombre). */
  --paper: #f7f4ee;
  --paper-text: #1b2a41;
  --paper-accent: #a8502c;

  /* Crème réel du fichier logo (échantillonné dans le PNG : #fbfaf7),
     légèrement différent du crème choisi pour le site (#f7f4ee). Sert
     uniquement de cadre autour du logo pour éviter tout liseré visible
     entre son propre fond et celui de la page — voir .site-header__logo. */
  --logo-chip: #fbfaf7;

  --font-display: "Barlow Condensed", "Segoe UI", sans-serif;
  --font-body: "Work Sans", "Segoe UI", sans-serif;

  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.5rem;
  --space-5: 4rem;
  --space-6: 6rem;

  --max-width: 72rem;
}

/* Repli si JavaScript ne s'exécute pas (theme-init.js n'a pas pu
   poser l'attribut data-theme) : suit quand même la préférence système. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --page-bg: #101a28;
    --text-primary: #f3f1ea;
    --text-secondary: #8d96a5;
    --accent-text: #cf7049;

    --brand-navy: #243856;
    --brand-terracotta: #aa512c;
    --brand-sage: #3c7156;
    --brand-coral: #bd3e28;

    --focus-ring: #f3f1ea;
    --focus-ring-on-brand: #f3f1ea;

    --line: rgba(243, 241, 234, 0.14);
  }
}

/* Thème posé explicitement par theme-init.js / le bouton — prime sur
   la préférence système dès que JS a tranché. */
[data-theme="dark"] {
  --page-bg: #101a28;
  --text-primary: #f3f1ea;
  --text-secondary: #8d96a5;
  --accent-text: #cf7049;

  --brand-navy: #243856;
  --brand-terracotta: #aa512c;
  --brand-sage: #3c7156;
  --brand-coral: #bd3e28;

  --focus-ring: #f3f1ea;
  --focus-ring-on-brand: #f3f1ea;

  --line: rgba(243, 241, 234, 0.14);
}

/* --- Reset minimal --- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

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

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--text-primary);
  background: var(--page-bg);
  -webkit-font-smoothing: antialiased;
  transition: background-color 0.2s ease, color 0.2s ease;
}

h1,
h2,
h3 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.05;
  margin: 0 0 var(--space-2);
  letter-spacing: 0.01em;
}

h1 {
  font-size: clamp(2.75rem, 6vw, 4.75rem);
  text-transform: uppercase;
}

h2 {
  font-size: clamp(2rem, 4vw, 3rem);
  text-transform: uppercase;
}

p {
  margin: 0 0 var(--space-2);
  max-width: 38em;
}

a {
  color: inherit;
}

img {
  max-width: 100%;
  display: block;
}

.container {
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--space-3);
}

/* --- Focus clavier visible partout ---
   Anneau bleu nuit sur fond clair, crème sur bande de marque/pied de
   page — les deux dépassent largement 3:1 dans les deux thèmes
   (vérifié par calcul, voir docs/plan-mode-sombre.md). */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 3px;
}

.borne--navy a:focus-visible,
.borne--navy button:focus-visible,
.borne--terracotta a:focus-visible,
.borne--terracotta button:focus-visible,
.borne--sage a:focus-visible,
.borne--sage button:focus-visible,
.site-footer a:focus-visible,
.site-footer button:focus-visible {
  outline-color: var(--focus-ring-on-brand);
}

/* --- Sélecteur de thème (soleil/lune) --- */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--text-primary);
  cursor: pointer;
}

.theme-toggle:hover {
  background: var(--line);
}

.theme-toggle__icon {
  width: 20px;
  height: 20px;
}

[data-theme="light"] .theme-toggle__icon--sun,
:root:not([data-theme]) .theme-toggle__icon--sun {
  display: none;
}

[data-theme="dark"] .theme-toggle__icon--moon {
  display: none;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) .theme-toggle__icon--moon {
    display: none;
  }
  :root:not([data-theme="light"]):not([data-theme="dark"]) .theme-toggle__icon--sun {
    display: block;
  }
}

/* --- Ligne de progression (repère de parcours) ---
   Se remplit au scroll ; reste pleine et statique si mouvement réduit. */
.progress-rail {
  position: fixed;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: var(--line);
  z-index: 40;
}

.progress-rail__fill {
  width: 100%;
  height: 0%;
  background: linear-gradient(180deg, var(--brand-terracotta), var(--brand-sage));
  transform-origin: top;
}

@media (prefers-reduced-motion: reduce) {
  .progress-rail__fill {
    height: 100% !important;
  }
}

@media (max-width: 640px) {
  .progress-rail {
    display: none;
  }
}

/* --- En-tête --- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--page-bg);
  border-bottom: 1px solid var(--line);
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding-block: var(--space-2);
}

.site-header__logo {
  /* Le fichier logo a un fond crème plein (non détouré, non
     transparent — voir docs/brief-client.md). Sans ce fond dédié, il
     redevient soit invisible (parties claires du logo qui se fondent
     dans un fond blanc/clair non identique au crème d'origine), soit
     encadré d'un bloc qui jure une fois le thème sombre posé derrière
     lui. On lui redonne systématiquement son propre cadre crème
     ("papier"), comme dans le PDF fourni par le client. */
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  border-radius: 6px;
  background: var(--logo-chip);
}

.site-header__logo img {
  height: 44px;
  width: auto;
}

.site-header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.site-header__marker {
  font-family: var(--font-display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.85rem;
  color: var(--text-secondary);
  text-decoration: none;
}

.site-header__marker:hover {
  color: var(--accent-text);
}

/* --- Bornes (sections) --- */
.borne {
  padding-block: var(--space-6);
  transition: background-color 0.2s ease;
}

.borne--navy {
  background: var(--brand-navy);
  color: var(--text-on-brand);
}

.borne--terracotta {
  background: var(--brand-terracotta);
  color: var(--text-on-brand);
}

.borne--sage {
  background: var(--brand-sage);
  color: var(--text-on-brand);
}

.borne--navy p,
.borne--terracotta p,
.borne--sage p {
  color: var(--text-on-brand);
}

.borne--navy .borne__label,
.borne--terracotta .borne__label,
.borne--sage .borne__label {
  color: var(--text-on-brand);
}

.borne__label {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.9rem;
  color: var(--accent-text);
  margin-bottom: var(--space-1);
}

/* --- Hero (Borne 0) --- */
.hero {
  padding-block: var(--space-6) var(--space-5);
}

.hero__lede {
  font-size: 1.2rem;
  color: var(--text-secondary);
  max-width: 34em;
}

/* --- Bouton --- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-family: var(--font-display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-decoration: none;
  padding: 0.9em 1.6em;
  border-radius: 999px;
  border: 2px solid transparent;
  transition: transform 0.15s ease, background 0.15s ease;
}

.btn--coral {
  background: var(--brand-coral);
  color: var(--text-on-brand);
}

.btn--coral:hover {
  transform: translateY(-2px);
}

.btn--outline {
  background: transparent;
  border-color: currentColor;
}

.btn--large {
  font-size: 1.1rem;
  padding: 1.1em 2.2em;
}

/* --- Grille de services --- */
.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.service-card {
  padding: var(--space-3);
  border: 1px solid rgba(247, 244, 238, 0.25);
  border-radius: 4px;
}

.service-card__title {
  font-family: var(--font-display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: 1.15rem;
  margin-bottom: 0.4em;
}

.service-card p {
  font-size: 0.98rem;
  margin: 0;
  color: rgba(247, 244, 238, 0.9);
}

/* --- Dossards de preuve (élément signature) ---
   Toujours le "papier" clair fixe, dans les deux thèmes — voir la note
   sur --paper en tête de fichier. */
.dossard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.dossard {
  position: relative;
  background: var(--paper);
  color: var(--paper-text);
  border-radius: 6px;
  padding: var(--space-3) var(--space-3) var(--space-2);
  border: 1.5px solid var(--paper-text);
}

.dossard::before {
  content: "";
  position: absolute;
  top: -1px;
  left: var(--space-2);
  right: var(--space-2);
  height: 0;
  border-top: 2px dashed rgba(27, 42, 65, 0.35);
}

.dossard__number {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.08em;
  color: var(--paper-accent);
  display: block;
  margin-bottom: var(--space-1);
}

.dossard__figure {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2rem, 4vw, 2.75rem);
  line-height: 1;
  margin-bottom: 0.3em;
}

.dossard p {
  color: var(--paper-text);
  margin: 0;
  font-size: 0.95rem;
}

/* --- Zone d'intervention --- */
.zones-list {
  list-style: none;
  margin: var(--space-4) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-5);
}

.zones-list li {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  text-transform: uppercase;
}

.contact-phone {
  margin-top: var(--space-2);
  font-size: 0.95rem;
}

/* --- Pied de page --- */
.site-footer {
  background: var(--brand-navy);
  color: var(--text-on-brand);
  padding-block: var(--space-4);
  font-size: 0.9rem;
  transition: background-color 0.2s ease;
}

.site-footer a {
  color: var(--text-on-brand);
  text-decoration: underline;
}

.site-footer__row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  align-items: center;
  justify-content: space-between;
}

.site-footer nav ul {
  list-style: none;
  display: flex;
  gap: var(--space-3);
  padding: 0;
  margin: 0;
  flex-wrap: wrap;
}

/* --- Page mentions légales --- */
.legal {
  padding-block: var(--space-6);
}

.legal h2 {
  font-size: 1.5rem;
  text-transform: none;
  margin-top: var(--space-4);
}

.legal .todo {
  background: rgba(178, 58, 38, 0.12);
  border-left: 3px solid var(--brand-coral);
  padding: 0.75em 1em;
  margin: 0.75em 0;
  font-size: 0.95rem;
}

/* --- Ajustements mobile --- */
@media (max-width: 640px) {
  .borne {
    padding-block: var(--space-4);
  }

  .hero {
    padding-block: var(--space-4) var(--space-3);
  }

  .site-footer__row {
    flex-direction: column;
    align-items: flex-start;
  }

  .zones-list {
    gap: var(--space-2) var(--space-3);
  }

  .btn--large {
    width: 100%;
    justify-content: center;
  }
}

/* --- Utilitaire visually-hidden (skip link, libellés a11y) --- */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--brand-coral);
  color: var(--text-on-brand);
  padding: 0.75em 1.25em;
  z-index: 50;
  border-radius: 0 0 6px 0;
}

.skip-link:focus {
  left: 0;
}