/* Ordeon — feuille de style unique. Aucune ressource externe, aucun JavaScript.
   Toute mise en forme passe par ce fichier : la CSP du site interdit les styles
   écrits dans le HTML. Deux matières : « papier » (partie problème) et
   « écran » (partie solution). Deux modes, clair et sombre, par jetons
   sémantiques : aucune couleur en dur hors des blocs :root. Voir DESIGN.md. */

/* ------------------------------------------------------------------ */
/* Polices hébergées dans le dépôt (voir assets/fonts/SOURCES.md)       */
/* ------------------------------------------------------------------ */
@font-face {
  font-family: "IBM Plex Sans";
  src: url("../fonts/IBMPlexSans-Regular-Latin1.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("../fonts/IBMPlexSans-SemiBold-Latin1.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/IBMPlexMono-Regular-Latin1.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ------------------------------------------------------------------ */
/* Jetons de conception — mode clair                                    */
/* ------------------------------------------------------------------ */
:root {
  color-scheme: light dark;

  /* Couleurs sémantiques (palette : bleu nuit #1B2A41, orange #C2410C) */
  --texte: #1B2A41;                      /* texte principal */
  --texte-2: #5B6573;                    /* texte secondaire */
  --fond: #FFFFFF;                       /* fond de page */
  --surface: #F7F5F0;                    /* papier : sections « problème », feuilles */
  --carte: #FFFFFF;                      /* cartes posées sur le fond de page */
  --carte-surface: #FFFFFF;              /* cartes posées sur le papier */
  --trait: #D8DDE3;                      /* filets et séparateurs (décoratifs) */
  --trait-fort: #1B2A41;                 /* traits « écran », trait de total */
  --bande-fond: #1B2A41;                 /* bande Fiabilité */
  --bande-texte: #FFFFFF;
  --bande-texte-2: rgba(255, 255, 255, 0.82);
  --bande-trait: rgba(255, 255, 255, 0.14);
  --bande-numero: #F08A55;
  --action: #C2410C;                     /* seule couleur d'action : boutons */
  --action-survol: #9A3412;
  --action-texte: #FFFFFF;
  --signal: #9A3412;                     /* à vérifier, numéros, chevrons, dominos qui tombent */
  --surlignage: rgba(194, 65, 12, 0.12); /* champs lus */
  --texture: rgba(27, 42, 65, 0.03);     /* trame du papier */
  --focus: #1B2A41;
  --focus-bande: #FFFFFF;
  --selection-fond: #1B2A41;
  --selection-texte: #FFFFFF;
  --ombre-1: 0 1px 2px rgba(27, 42, 65, 0.06), 0 1px 3px rgba(27, 42, 65, 0.08);

  /* Texture papier : deux trames diagonales à peine visibles */
  --texture-papier:
    repeating-linear-gradient(135deg, var(--texture) 0 1px, transparent 1px 9px),
    repeating-linear-gradient(45deg, var(--texture) 0 1px, transparent 1px 11px);

  /* Espacements (base 4 px) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-section: var(--space-8);   /* entre les sections */
  --space-bloc: var(--space-6);      /* entre les groupes d'une même section */

  /* Échelle typographique (16 px minimum pour tout texte courant) */
  --text-xs: 0.875rem;                                   /* étiquettes en capitales espacées, numéros */
  --text-sm: 1rem;                                       /* visuels, dominos, notes, pied de page */
  --text-base: 1.0625rem;                                /* corps */
  --text-lg: 1.1875rem;                                  /* sous-titre, contact, fermeture */
  --text-xl: 1.25rem;                                    /* titres h3 */
  --text-2xl: clamp(1.625rem, 1.2rem + 1.6vw, 2.125rem); /* titres h2 */
  --text-3xl: clamp(2rem, 1rem + 3vw, 3.25rem);          /* titre principal */
  --text-formule: clamp(1.5rem, 0.9rem + 2vw, 2.5rem);     /* formule du calcul */
  --text-resultat: clamp(1.25rem, 0.8rem + 1.1vw, 1.625rem);
  --interligne: 1.6;
  --interligne-serre: 1.5;
  --sans: "IBM Plex Sans", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;

  /* Rayons et mouvement */
  --r-xs: 2px;
  --r-1: 4px;
  --r-2: 8px;
  --r-3: 14px;
  --r-pilule: 999px;
  --duree: 150ms;

  /* Largeurs */
  --conteneur: 72rem;
  --colonne: 70ch;
  --entete-hauteur: 4.25rem;
}

@media (min-width: 60rem) {
  :root {
    --space-section: var(--space-9);
    --space-bloc: var(--space-7);
  }
}

/* ------------------------------------------------------------------ */
/* Jetons — mode sombre (prefers-color-scheme, sans JavaScript)         */
/* Contrastes : texte ≥ 9:1, texte secondaire ≥ 5,8:1, signal ≥ 4,7:1, */
/* boutons ≥ 5,5:1 sur leur fond.                                       */
/* ------------------------------------------------------------------ */
@media (prefers-color-scheme: dark) {
  :root {
    --texte: #F7F5F0;
    --texte-2: #B4C4DF;
    --fond: #1B2A41;
    --surface: #243752;
    --carte: #243752;
    --carte-surface: #2C425F;
    --trait: #4E6384;
    --trait-fort: #F7F5F0;
    --bande-fond: #121D30;
    --bande-texte: #F7F5F0;
    --bande-texte-2: #B4C4DF;
    --bande-trait: rgba(255, 255, 255, 0.14);
    --bande-numero: #F08A55;
    --action: #F39A6B;
    --action-survol: #F6B08A;
    --action-texte: #1B2A41;
    --signal: #F39A6B;
    --surlignage: rgba(240, 138, 85, 0.18);
    --texture: rgba(255, 255, 255, 0.03);
    --focus: #F7F5F0;
    --focus-bande: #F7F5F0;
    --selection-fond: #F7F5F0;
    --selection-texte: #1B2A41;
    --ombre-1: 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 3px rgba(0, 0, 0, 0.3);
  }
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--entete-hauteur) + var(--space-4));
}

body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font-family: var(--sans);
  font-size: var(--text-base);
  line-height: var(--interligne);
  text-align: left;
  overflow-wrap: break-word;
}

::selection {
  background: var(--selection-fond);
  color: var(--selection-texte);
}

h1,
h2,
h3 {
  font-weight: 600;
  line-height: 1.2;
  margin: 0 0 0.6em;
  text-wrap: balance;
}

h1 {
  font-size: var(--text-3xl);
  line-height: 1.08;
  letter-spacing: -0.02em;
}

h2 {
  font-size: var(--text-2xl);
  letter-spacing: -0.01em;
  margin-bottom: var(--space-5);
}

h3 {
  font-size: var(--text-xl);
  margin-bottom: var(--space-2);
}

p,
ul,
ol,
dl {
  margin: 0 0 var(--space-4);
}

a {
  color: var(--signal);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

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

img,
svg {
  display: block;
}

mark {
  background: var(--surlignage);
  color: inherit;
  padding: 0 0.2em;
  border-radius: var(--r-xs);
}

.mono {
  font-family: var(--mono);
}

/* Focus clavier visible partout, sur fond clair comme sur fond sombre */
:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: var(--r-1);
}

.bande-sombre :focus-visible {
  outline-color: var(--focus-bande);
}

/* Lien d'évitement : caché jusqu'à ce qu'il reçoive le focus */
.evitement {
  position: absolute;
  left: var(--space-4);
  top: -10rem;
  padding: var(--space-2) var(--space-4);
  background: var(--fond);
  color: var(--texte);
  border: 2px solid var(--texte);
  border-radius: var(--r-1);
  z-index: 20;
}

.evitement:focus {
  top: var(--space-4);
}

/* Texte présent pour les lecteurs d'écran, invisible à l'écran */
.visuellement-cache {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ------------------------------------------------------------------ */
/* Mise en page et matières                                             */
/* ------------------------------------------------------------------ */
.conteneur {
  max-width: var(--conteneur);
  margin: 0 auto;
  padding: 0 var(--space-4);
}

@media (min-width: 45rem) {
  .conteneur {
    padding: 0 var(--space-6);
  }
}

.colonne {
  max-width: var(--colonne);
}

.section {
  padding: var(--space-section) 0;
}

/* Deux sections qui se suivent partagent un seul espacement… */
.section + .section {
  padding-top: 0;
}

/* …sauf quand la matière change. */
.section + .papier,
.section + .bande-sombre,
.papier + .section,
.bande-sombre + .section {
  padding-top: var(--space-section);
}

/* Dans une section, chaque groupe (intro, visuel, conclusion) est séparé du suivant */
.bloc {
  margin-top: var(--space-bloc);
}

/* Matière papier : partie « problème » et contact */
.papier {
  background-color: var(--surface);
  background-image: var(--texture-papier);
  border-top: 1px solid var(--trait);
  border-bottom: 1px solid var(--trait);
}

/* Matière sombre : garanties */
.bande-sombre {
  background: var(--bande-fond);
  color: var(--bande-texte);
}

.bande-sombre h2,
.bande-sombre h3 {
  color: var(--bande-texte);
}

.bande-sombre p {
  color: var(--bande-texte-2);
}

/* Étiquettes en capitales espacées : visuels, badge, hypothèses */
.etiquette,
.badge {
  font-family: var(--mono);
  font-size: var(--text-xs);
  line-height: var(--interligne-serre);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--texte-2);
}

.badge {
  display: inline-block;
  padding: 0.2rem 0.7rem;
  background: var(--carte-surface);
  border: 1px solid var(--trait);
  border-radius: var(--r-pilule);
}

/* ------------------------------------------------------------------ */
/* En-tête : logo et menu, sans bouton (l'action unique est dans la page) */
/* ------------------------------------------------------------------ */
.entete {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--fond);
  border-bottom: 1px solid var(--trait);
}

.entete-barre {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: var(--entete-hauteur);
  padding-top: var(--space-3);
  padding-bottom: var(--space-3);
}

.logo {
  height: 32px;
  width: auto;
}

.logo-lien {
  display: inline-block;
  flex: none;
}

.nav {
  display: none;
}

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

.nav a {
  color: var(--texte);
  text-decoration: none;
  font-weight: 400;
  padding: var(--space-1) 0;
  border-bottom: 2px solid transparent;
  transition: border-color var(--duree) ease;
}

.nav a:hover {
  border-bottom-color: var(--action);
}

/* Page courante : trait sous l'entrée, sans effet au survol */
.nav a[aria-current="page"] {
  font-weight: 600;
  border-bottom-color: var(--trait-fort);
}

/* Logo (120 px) + menu (quatre entrées) tiennent dès 45 rem */
@media (min-width: 45rem) {
  .nav {
    display: block;
  }
}

/* Sommaire d'une page de service : navigation d'ancres sous le hero */
.sommaire {
  border-top: 1px solid var(--trait);
  border-bottom: 1px solid var(--trait);
}

.sommaire ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
}

.sommaire a {
  display: inline-block;
  padding: var(--space-3) 0;
  color: var(--texte-2);
  text-decoration: none;
  font-size: var(--text-sm);
  border-bottom: 2px solid transparent;
  transition: border-color var(--duree) ease, color var(--duree) ease;
}

.sommaire a:hover {
  color: var(--texte);
  border-bottom-color: var(--action);
}

/* Le hero suivi d'un sommaire garde un espacement plus court */
.hero:has(+ .sommaire) {
  padding-bottom: var(--space-7);
}

/* ------------------------------------------------------------------ */
/* Boutons (liens mailto, seule couleur d'action)                       */
/* ------------------------------------------------------------------ */
.bouton {
  display: inline-block;
  padding: 0.95rem 1.6rem;
  background: var(--action);
  color: var(--action-texte);
  font-weight: 600;
  font-size: var(--text-base);
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
  border-radius: var(--r-2);
  box-shadow: var(--ombre-1);
  transition: background-color var(--duree) ease;
}

.bouton:hover {
  background: var(--action-survol);
  color: var(--action-texte);
}

/* Bouton figuré des visuels : un simple texte, sans action */
.bouton-figure {
  display: inline-block;
  padding: 0.4rem 0.9rem;
  background: var(--action);
  color: var(--action-texte);
  font-weight: 600;
  font-size: var(--text-sm);
  border-radius: var(--r-1);
}

/* ------------------------------------------------------------------ */
/* Accueil (hero)                                                       */
/* ------------------------------------------------------------------ */
.hero {
  padding: var(--space-7) 0 var(--space-section);
}

.hero-grille {
  display: grid;
  gap: var(--space-7);
  align-items: center;
}

.hero h1 {
  max-width: 21ch;
}

.accroche {
  font-size: var(--text-lg);
  color: var(--texte-2);
  max-width: 52ch;
  margin-bottom: var(--space-6);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4) var(--space-5);
}

@media (min-width: 60rem) {
  .hero {
    padding-top: var(--space-8);
  }

  .hero-grille {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: var(--space-8);
  }
}

/* Hero sans visuel (hub, appels d'offres) : titre plus large, pas d'action */
.hero-hub {
  padding-bottom: var(--space-7);
}

.hero-hub h1 {
  max-width: 26ch;
}

.hero-hub .accroche {
  margin-bottom: 0;
}

/* ------------------------------------------------------------------ */
/* Hub : deux cartes de service de même poids                           */
/* ------------------------------------------------------------------ */
.services {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-5);
}

/* Carte écran : pictogramme, titre, public, problème, bénéfices, lien en bas */
.service {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--space-6) var(--space-5);
  background: var(--carte);
  border: 1px solid var(--trait-fort);
  border-radius: var(--r-3);
  transition: border-color var(--duree) ease;
}

.service:hover {
  border-color: var(--action);
}

.service-picto {
  width: 3rem;
  height: 3rem;
  margin-bottom: var(--space-5);
  color: var(--trait-fort);
}

.service-picto .picto-signal {
  stroke: var(--signal);
}

.service h2 {
  font-size: var(--text-xl);
  margin-bottom: var(--space-2);
}

.service .etiquette {
  margin: 0 0 var(--space-4);
}

.service > p:not(.etiquette) {
  color: var(--texte-2);
}

.benefices {
  list-style: none;
  margin: 0 0 var(--space-5);
  padding: 0;
  border-top: 1px solid var(--trait);
}

.benefices li {
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--trait);
}

/* Le lien est le dernier élément ; son pseudo-élément couvre toute la carte */
.service-lien {
  margin-top: auto;
  font-weight: 600;
  text-decoration: none;
}

.service-lien::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--r-3);
}

/* Au clavier, le contour entoure toute la carte quand le navigateur sait le faire ;
   sinon le contour par défaut du lien reste visible */
.service:has(.service-lien:focus-visible) {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

.service:has(.service-lien:focus-visible) .service-lien {
  outline: none;
}

@media (min-width: 45rem) {
  .services {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-6);
  }

  .service {
    padding: var(--space-7) var(--space-6);
  }
}

/* ------------------------------------------------------------------ */
/* Feuille papier : bon de commande fictif (début du fil conducteur)    */
/* ------------------------------------------------------------------ */
.bon {
  position: relative;
  margin: var(--space-5) 0 0;
  padding: 0 var(--space-3) var(--space-3) 0;
}

.bon .badge {
  position: absolute;
  top: -0.9rem;
  right: 0;
  z-index: 2;
}

/* Deuxième feuille suggérée derrière la première */
.bon::before {
  content: "";
  position: absolute;
  inset: var(--space-3) 0 0 var(--space-3);
  background-color: var(--surface);
  background-image: var(--texture-papier);
  border: 1px solid var(--trait);
  border-radius: var(--r-1);
}

.feuille {
  position: relative;
  padding: var(--space-5) var(--space-5) var(--space-6);
  background-color: var(--surface);
  background-image: var(--texture-papier);
  border: 1px solid var(--trait);
  border-radius: var(--r-1);
  box-shadow: var(--ombre-1);
  font-size: var(--text-sm);
  line-height: var(--interligne-serre);
}

@media (min-width: 45rem) {
  .feuille {
    padding: var(--space-6) var(--space-6) var(--space-7);
  }
}

.feuille-entete {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-1) var(--space-4);
  margin: 0 0 var(--space-5);
  padding-bottom: var(--space-3);
  border-bottom: 2px solid var(--trait-fort);
}

.feuille-entete .mono {
  color: var(--texte-2);
}

.feuille-client {
  font-size: var(--text-lg);
  font-weight: 600;
  margin: 0 0 var(--space-4);
}

.feuille-delai {
  margin: var(--space-4) 0 0;
  color: var(--texte-2);
}

/* Lignes de commande : référence, désignation, quantité */
.lignes {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--trait);
}

.lignes li {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr) auto;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--trait);
}

.lignes .ref {
  font-family: var(--mono);
  color: var(--texte-2);
}

.lignes .qte {
  text-align: right;
  white-space: nowrap;
}

/* Sous 480 px, la feuille est étroite : colonnes resserrées */
@media (max-width: 29.99rem) {
  .lignes li {
    grid-template-columns: 4.5rem minmax(0, 1fr) auto;
    gap: var(--space-2);
  }
}

/* ------------------------------------------------------------------ */
/* Le coût invisible : chaîne de dominos (SVG statiques)               */
/* ------------------------------------------------------------------ */
.dominos {
  list-style: none;
  margin: var(--space-bloc) 0;
  padding: 0;
  display: grid;
  gap: var(--space-5);
  counter-reset: domino;
}

.dominos li {
  display: grid;
  grid-template-columns: 5rem minmax(0, 1fr);
  column-gap: var(--space-4);
  align-items: start;
  counter-increment: domino;
}

.dominos p {
  grid-column: 2;
  margin: 0;
  font-size: var(--text-sm);
  line-height: var(--interligne-serre);
}

/* Numéro du domino, en mono, devant le texte */
.dominos p:first-of-type::before {
  content: "0" counter(domino);
  display: block;
  margin-bottom: var(--space-1);
  font-family: var(--mono);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  color: var(--signal);
}

.domino {
  width: 5rem;
  height: auto;
  overflow: visible;
}

.domino .sol {
  stroke: var(--trait);
  stroke-width: 2;
}

.domino .tuile rect {
  fill: var(--carte-surface);
  stroke: var(--trait-fort);
  stroke-width: 2;
}

.domino .tuile path {
  stroke: var(--trait-fort);
  stroke-width: 2;
}

.domino .tuile-marquee rect,
.domino .tuile-tombe rect,
.domino .tuile-marquee path,
.domino .tuile-tombe path {
  stroke: var(--signal);
}

.domino .tuile-marquee rect {
  fill: var(--surlignage);
}

.domino .marque {
  fill: var(--action);
}

.domino-note {
  color: var(--signal);
  margin-top: var(--space-2);
}

.fermeture {
  font-size: var(--text-lg);
  font-weight: 600;
  margin-top: var(--space-5);
}

@media (min-width: 60rem) {
  .dominos {
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 0;
  }

  .dominos li {
    display: block;
    padding: 0 var(--space-2);
  }

  .dominos li:first-child {
    padding-left: 0;
  }

  .dominos li:last-child {
    padding-right: 0;
  }

  /* Chaque tuile occupe sa colonne : le sol se prolonge d'une colonne à l'autre */
  .domino {
    width: auto;
    margin-bottom: var(--space-4);
  }
}

/* ------------------------------------------------------------------ */
/* Faites le calcul : formule en très grand, mono, opérateurs alignés   */
/* ------------------------------------------------------------------ */
.formule {
  display: grid;
  row-gap: 0.4em;
  margin: 0 0 var(--space-bloc);
  font-family: var(--mono);
  font-size: var(--text-formule);
  line-height: 1.4;
  letter-spacing: -0.01em;
}

/* Chaque ligne : colonne fixe pour l'opérateur, puis l'opérande */
.formule-ligne {
  display: grid;
  grid-template-columns: 1.6em minmax(0, 1fr);
  column-gap: 0.3em;
  align-items: baseline;
}

.operateur {
  text-align: center;
  color: var(--signal);
}

/* Le résultat se pose sous un trait, comme un total */
.formule-resultat {
  margin-top: 0.3em;
  padding-top: 0.5em;
  border-top: 2px solid var(--trait-fort);
}

.calcul-grille {
  display: grid;
  gap: var(--space-6);
  align-items: start;
}

.hypotheses .etiquette {
  margin: 0 0 var(--space-3);
}

.hypotheses ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.hypotheses li {
  padding: var(--space-3) 0;
  border-top: 1px solid var(--trait);
  max-width: var(--colonne);
}

.hypotheses li:last-child {
  border-bottom: 1px solid var(--trait);
}

.exemple {
  padding: var(--space-5);
  background: var(--carte-surface);
  border: 1px solid var(--trait-fort);
  border-radius: var(--r-2);
}

.badge-texte {
  text-transform: none;
  letter-spacing: 0.02em;
  border-radius: var(--r-1);
  margin-bottom: var(--space-4);
}

.exemple p {
  max-width: 52ch;
}

.calcul-resultat {
  margin: var(--space-5) 0 0;
  font-family: var(--mono);
  line-height: 1.4;
}

.calcul-resultat span {
  display: block;
}

.calcul-grand {
  font-size: var(--text-resultat);
  color: var(--signal);
  margin-bottom: var(--space-2);
}

@media (min-width: 60rem) {
  .calcul-grille {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
    gap: var(--space-8);
  }
}

/* ------------------------------------------------------------------ */
/* Relire ne suffit pas : étude citée                                   */
/* ------------------------------------------------------------------ */
.etude {
  margin: 0 0 var(--space-5);
  padding: var(--space-5);
  background: var(--carte-surface);
  border: 1px solid var(--trait);
  border-radius: var(--r-1);
}

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

.note {
  font-size: var(--text-sm);
  line-height: var(--interligne-serre);
  color: var(--texte-2);
  padding-top: var(--space-3);
  border-top: 1px solid var(--trait);
}

/* ------------------------------------------------------------------ */
/* Des données propres : grille « écran » à traits fins                 */
/* ------------------------------------------------------------------ */
.grille-ecran {
  list-style: none;
  margin: var(--space-bloc) 0 0;
  padding: 0;
  display: grid;
  gap: 1px;
  background: var(--trait);
  border: 1px solid var(--trait);
  border-radius: var(--r-2);
  overflow: hidden;
}

.grille-ecran li {
  padding: var(--space-5);
  background: var(--carte);
}

.grille-ecran p {
  margin: 0;
  color: var(--texte-2);
}

@media (min-width: 45rem) {
  .grille-ecran {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 60rem) {
  .grille-ecran {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ------------------------------------------------------------------ */
/* Une journée avant / après : papier contre écran                      */
/* ------------------------------------------------------------------ */
.chapeau {
  color: var(--texte-2);
}

.journee {
  display: grid;
  gap: var(--space-5);
  margin-top: var(--space-bloc);
}

.journee-avant,
.journee-apres {
  padding: var(--space-5);
  border-radius: var(--r-1);
}

.journee-avant {
  background-color: var(--surface);
  background-image: var(--texture-papier);
  border: 1px solid var(--trait);
}

.journee-apres {
  background: var(--carte);
  border: 1px solid var(--trait-fort);
  border-radius: var(--r-2);
}

.journee h3 {
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--trait);
}

.journee-apres h3 {
  border-bottom-color: var(--trait-fort);
}

.journee dl {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-3) var(--space-4);
  margin: 0;
}

.journee dt {
  font-family: var(--mono);
  font-size: var(--text-sm);
  line-height: var(--interligne-serre);
  color: var(--signal);
  white-space: nowrap;
}

.journee dd {
  margin: 0;
  font-size: var(--text-sm);
  line-height: var(--interligne-serre);
}

@media (min-width: 60rem) {
  .journee {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-6);
  }
}

/* ------------------------------------------------------------------ */
/* Comment Ordeon fonctionne : 4 étapes, du papier à la ligne propre    */
/* ------------------------------------------------------------------ */
.etapes {
  list-style: none;
  margin: 0 0 var(--space-bloc);
  padding: 0;
  display: grid;
  gap: var(--space-6);
}

.etapes p {
  margin: 0;
  color: var(--texte-2);
}

.numero {
  display: block;
  font-family: var(--mono);
  font-weight: 400;
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  color: var(--signal);
  margin-bottom: var(--space-2);
}

.bande-sombre .numero {
  color: var(--bande-numero);
}

/* Visuels des étapes : cartes compactes de l'exemple fictif */
.visuel {
  margin-bottom: var(--space-4);
  padding: var(--space-4);
  background: var(--carte);
  border: 1px solid var(--trait);
  border-radius: var(--r-2);
  font-size: var(--text-sm);
  line-height: var(--interligne-serre);
  color: var(--texte);
}

.visuel p {
  color: inherit;
}

.visuel-papier {
  background-color: var(--surface);
  background-image: var(--texture-papier);
  border-radius: var(--r-1);
}

.visuel-ecran {
  border-color: var(--trait-fort);
}

.visuel .etiquette {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 var(--space-3);
}

.visuel .etiquette svg {
  width: 1rem;
  height: 1rem;
  flex: none;
}

.visuel-doc {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-1) var(--space-3);
  margin: 0 0 var(--space-2);
}

.visuel-doc .mono {
  color: var(--texte-2);
}

.lignes-mini li,
.lignes-ecran li {
  grid-template-columns: 4.5rem minmax(0, 1fr) auto;
  gap: var(--space-2);
  padding: var(--space-1) 0;
}

.lignes-ecran {
  border-top-color: var(--trait-fort);
}

.visuel-doc-delai {
  margin: var(--space-2) 0 0;
  color: var(--texte-2);
}

.champs {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-2) var(--space-3);
  margin: 0;
}

.champs dt {
  color: var(--texte-2);
}

.champs dd {
  margin: 0;
  font-weight: 600;
}

.controles {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-2);
}

.controles li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
}

.controles svg {
  width: 1.125rem;
  height: 1.125rem;
  flex: none;
  margin-top: 0.15rem;
}

.controles .a-verifier {
  color: var(--signal);
  font-weight: 600;
}

.pret {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-3);
  margin: var(--space-3) 0 0;
}

.pret span:first-child {
  color: var(--texte-2);
}

@media (min-width: 45rem) {
  .etapes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 60rem) {
  .etapes {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-5);
  }

  /* Les visuels ont des hauteurs différentes : visuel, numéro, titre et texte
     s'alignent sur des rangées partagées (subgrid ; sans lui, chaque colonne
     s'empile simplement) */
  .etapes li {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 4;
    align-content: start;
  }

  /* Étapes sans visuel (appels d'offres) : numéro, titre, texte */
  .etapes-simples li {
    grid-row: span 3;
  }
}

/* ------------------------------------------------------------------ */
/* Appels d'offres : fiche « pour qui », constats, partage des rôles   */
/* ------------------------------------------------------------------ */
.fiche {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-3) var(--space-5);
  margin: var(--space-5) 0 0;
  padding-top: var(--space-4);
  border-top: 1px solid var(--trait);
}

.fiche dt {
  font-family: var(--mono);
  font-size: var(--text-xs);
  line-height: var(--interligne);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--texte-2);
  padding-top: 0.2rem;
}

.fiche dd {
  margin: 0;
}

/* Constats du problème : cartes posées sur le papier */
.constats {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-4);
}

.constats li {
  padding: var(--space-5);
  background: var(--carte-surface);
  border: 1px solid var(--trait);
  border-radius: var(--r-1);
}

.constats p {
  margin: 0;
  color: var(--texte-2);
}

@media (min-width: 45rem) {
  .constats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-5);
  }
}

/* Qui fait quoi : deux colonnes dès 45 rem, l'une sous l'autre en dessous */
.partage {
  display: grid;
  gap: var(--space-5);
}

.partage-vous,
.partage-ordeon {
  padding: var(--space-5);
  background: var(--carte);
  border-radius: var(--r-2);
}

.partage-vous {
  border: 1px solid var(--trait);
}

.partage-ordeon {
  border: 1px solid var(--trait-fort);
}

.partage h3 {
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--trait);
}

.partage-ordeon h3 {
  border-bottom-color: var(--trait-fort);
}

.partage ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.partage li {
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--trait);
  font-size: var(--text-sm);
  line-height: var(--interligne-serre);
}

.partage li:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

@media (min-width: 45rem) {
  .partage {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-6);
  }
}

/* Encadré : validation humaine */
.encadre {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  max-width: var(--colonne);
  margin: 0;
  padding: var(--space-4) var(--space-5);
  background: var(--carte);
  border: 1px solid var(--trait);
  border-radius: var(--r-2);
}

.encadre svg {
  width: 1.25rem;
  height: 1.25rem;
  flex: none;
  margin-top: 0.2rem;
  color: var(--signal);
}

/* ------------------------------------------------------------------ */
/* Fiabilité et sécurité : liste numérotée, deux colonnes dès 60 rem    */
/* ------------------------------------------------------------------ */
.garanties {
  display: grid;
  border-top: 1px solid var(--bande-trait);
}

.garantie {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  column-gap: var(--space-4);
  padding: var(--space-5) 0;
  border-bottom: 1px solid var(--bande-trait);
}

.garantie .numero {
  grid-row: 1 / 3;
  margin: 0.2rem 0 0;
}

.garantie h3 {
  grid-column: 2;
  margin-bottom: var(--space-2);
}

.garantie p {
  grid-column: 2;
  margin: 0;
  max-width: var(--colonne);
}

@media (min-width: 60rem) {
  /* Quatre garanties à gauche, trois à droite, rangées alignées */
  .garanties {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(4, auto);
    grid-auto-flow: column;
    column-gap: var(--space-8);
  }

  /* Version courte du hub : cinq garanties, trois à gauche et deux à droite */
  .garanties-courtes {
    grid-template-rows: repeat(3, auto);
  }
}

/* ------------------------------------------------------------------ */
/* Pourquoi Ordeon existe                                               */
/* ------------------------------------------------------------------ */
.pourquoi {
  display: grid;
  gap: var(--space-4);
}

.pourquoi p {
  max-width: var(--colonne);
}

.signature {
  color: var(--texte-2);
  margin: 0;
}

@media (min-width: 60rem) {
  .pourquoi {
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    gap: var(--space-8);
  }
}

/* ------------------------------------------------------------------ */
/* Questions fréquentes : <details>, sans JavaScript                    */
/* ------------------------------------------------------------------ */
.questions {
  max-width: var(--colonne);
  border-top: 1px solid var(--trait);
}

.questions details {
  border-bottom: 1px solid var(--trait);
}

.questions summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) 0;
  cursor: pointer;
  font-weight: 600;
  list-style: none;
}

.questions summary::-webkit-details-marker {
  display: none;
}

/* Chevron dessiné en CSS */
.questions summary::after {
  content: "";
  flex: none;
  width: 0.6rem;
  height: 0.6rem;
  border-right: 2px solid var(--signal);
  border-bottom: 2px solid var(--signal);
  transform: rotate(45deg);
  margin-right: 0.3rem;
  transition: transform var(--duree) ease;
}

.questions details[open] summary::after {
  transform: rotate(225deg);
}

.questions summary:hover {
  color: var(--signal);
}

.questions details p {
  margin: 0 0 var(--space-5);
  color: var(--texte-2);
  max-width: 60ch;
}

/* ------------------------------------------------------------------ */
/* Contact                                                              */
/* ------------------------------------------------------------------ */
.contact {
  text-align: center;
}

.contact .colonne {
  margin: 0 auto;
  max-width: 56ch;
}

.contact p {
  color: var(--texte-2);
  font-size: var(--text-lg);
}

.contact-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-6);
}

/* Encart de situation : bloc indépendant, facile à retirer */
.situation {
  margin: 0;
  padding: var(--space-5) 0;
  border-top: 1px solid var(--trait);
  color: var(--texte-2);
  font-size: var(--text-sm);
  text-align: center;
}

.papier + .situation {
  border-top: 0;
}

.situation p {
  margin: 0;
}

/* ------------------------------------------------------------------ */
/* Pages légales                                                        */
/* ------------------------------------------------------------------ */
.page-legale {
  padding: var(--space-7) 0 var(--space-section);
}

.page-legale .colonne {
  margin: 0;
}

.page-legale h2 {
  font-size: var(--text-xl);
  margin: var(--space-6) 0 var(--space-2);
}

.page-legale h1 + p {
  color: var(--texte-2);
}

/* ------------------------------------------------------------------ */
/* Pied de page                                                         */
/* ------------------------------------------------------------------ */
.pied {
  border-top: 1px solid var(--trait);
  padding: var(--space-6) 0 var(--space-7);
  font-size: var(--text-sm);
}

.pied-barre {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4) var(--space-6);
}

.pied ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
}

.pied a {
  display: inline-block;
  padding: var(--space-2) 0;
  color: var(--texte);
}

.pied a:hover {
  color: var(--signal);
}

.pied a[aria-current="page"] {
  color: var(--texte-2);
  text-decoration: none;
}

.pied .symbole {
  width: 24px;
  height: 24px;
}

/* ------------------------------------------------------------------ */
/* Mouvement réduit et impression                                       */
/* ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    transition: none !important;
  }
}

@media print {
  .entete,
  .evitement,
  .bouton,
  .pied {
    display: none;
  }

  .papier,
  .feuille,
  .bon::before,
  .journee-avant,
  .visuel-papier {
    background-image: none;
  }

  .bande-sombre,
  .bande-sombre h2,
  .bande-sombre h3,
  .bande-sombre p {
    background: none;
    color: var(--texte);
  }

  .bande-sombre .numero {
    color: var(--signal);
  }

  .garanties,
  .garantie {
    border-color: var(--trait);
  }
}