@charset "utf-8";

/* ==========================================================================
   Atelora — feuille de style unique
   Vocabulaire visuel : le plan, le schéma, la fiche technique.
   Six valeurs de couleur, deux familles typographiques, une couleur d'accent.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Polices — servies depuis le même domaine : aucun appel à un tiers,
      une connexion de moins, et rien à déclarer en matière de données.
      Sous-ensemble latin, qui couvre le français.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 700;
  font-stretch: 110%;
  font-display: swap;
  src: url('/assets/fonts/archivo-700-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;
}

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url('/assets/fonts/ibm-plex-sans-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;
}

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url('/assets/fonts/ibm-plex-sans-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;
}

/* --------------------------------------------------------------------------
   1. Jetons
   -------------------------------------------------------------------------- */

:root {
  /* Couleur — six valeurs, pas plus. */
  --papier: #ffffff;
  --calque: #eef1f6;
  --encre:  #0f2c63;
  --trait:  #c9d1de;
  --gris:   #55617a;
  --signal: #a82a1e;

  /* Typographie — deux familles. */
  --titre: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --texte: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;

  /* Échelle typographique. */
  --t-micro: 0.75rem;
  --t-petit: 0.8125rem;
  --t-menu:  0.9375rem;
  --t-base:  1.0625rem;
  --t-lead:  1.1875rem;
  --t-h3:    1.25rem;
  --t-h2:    clamp(1.65rem, 1.15rem + 1.9vw, 2.45rem);
  --t-h1:    clamp(2.05rem, 1.3rem + 3vw, 3.35rem);
  --t-prix:  clamp(1.9rem, 1.3rem + 1.6vw, 2.4rem);

  /* Rythme. */
  --marge:   clamp(1.25rem, 4vw, 2.5rem);
  --section: clamp(3.5rem, 7vw, 6rem);
  --large:   1140px;
  --etroit:  62ch;

  --rayon: 2px;
}

/* --------------------------------------------------------------------------
   2. Bases
   -------------------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 5.5rem;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--papier);
  color: var(--encre);
  font-family: var(--texte);
  font-size: var(--t-base);
  line-height: 1.6;
  font-feature-settings: "tnum" 1;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { margin: 0; font-weight: 600; line-height: 1.15; }
p, ul, ol, dl, table, figure { margin: 0; }
img, svg { max-width: 100%; }
a { color: inherit; }

h1, h2 {
  font-family: var(--titre);
  font-weight: 700;
  font-stretch: 110%;
  letter-spacing: -0.018em;
}

h1 { font-size: var(--t-h1); line-height: 1.04; }
h2 { font-size: var(--t-h2); line-height: 1.08; }
h3 { font-size: var(--t-h3); letter-spacing: -0.01em; }

strong, b { font-weight: 600; }

:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 3px;
  border-radius: 1px;
}

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

::selection { background: var(--encre); color: var(--papier); }

/* Lien d'évitement. */
.evitement {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 0.75rem 1.25rem;
  background: var(--encre);
  color: var(--papier);
  font-size: var(--t-menu);
  text-decoration: none;
}
.evitement:focus { left: 0; }

/* --------------------------------------------------------------------------
   3. Trame
   -------------------------------------------------------------------------- */

.enveloppe {
  width: 100%;
  max-width: var(--large);
  margin-inline: auto;
  padding-inline: var(--marge);
}

.section {
  padding-block: var(--section);
  border-top: 1px solid var(--trait);
}

.section--calque { background: var(--calque); }

.bloc-sombre {
  background: var(--encre);
  color: var(--papier);
  border-top-color: var(--encre);
}
.bloc-sombre .cote { color: var(--trait); }
.bloc-sombre .cote::before { background: var(--trait); }

/* Cote : l'étiquette d'annotation d'un plan. */
.cote {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin: 0 0 1.1rem;
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gris);
}
.cote::before {
  content: "";
  width: 26px;
  height: 1px;
  background: var(--gris);
  flex: none;
}

.chapeau {
  max-width: var(--etroit);
  margin-top: 1.1rem;
  font-size: var(--t-lead);
  color: var(--gris);
}
.bloc-sombre .chapeau { color: var(--trait); }

/* --------------------------------------------------------------------------
   4. Boutons et liens
   -------------------------------------------------------------------------- */

.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.85rem 1.4rem;
  border: 1px solid transparent;
  border-radius: var(--rayon);
  font-family: var(--texte);
  font-size: var(--t-menu);
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.bouton--signal {
  background: var(--signal);
  color: var(--papier);
}
.bouton--signal:hover {
  background: #8c2117;
  background: color-mix(in srgb, var(--signal) 84%, #000);
}

.bouton--contour {
  background: transparent;
  color: var(--encre);
  border-color: var(--encre);
}
.bouton--contour:hover { background: var(--encre); color: var(--papier); }

.bouton--large { width: 100%; }

.lien-souligne {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.lien-souligne:hover { text-decoration-thickness: 2px; }

/* --------------------------------------------------------------------------
   5. En-tête
   -------------------------------------------------------------------------- */

.entete {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: saturate(1.4) blur(6px);
  border-bottom: 1px solid var(--trait);
}

.entete__rangee {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 4.25rem;
}

.marque { display: inline-flex; align-items: center; text-decoration: none; }

/* Le logo est une image : sa hauteur commande, la largeur suit. Les
   attributs width et height du HTML gardent la place réservée pendant le
   chargement — sans eux, l'en-tête sursaute. */
.marque__logo { display: block; width: auto; height: 32px; }

.menu { display: flex; align-items: center; gap: 1.6rem; }

.menu__liste {
  display: flex;
  gap: 1.6rem;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: var(--t-menu);
}
.menu__liste a {
  text-decoration: none;
  color: var(--gris);
  padding-block: 0.35rem;
  border-bottom: 1px solid transparent;
}
.menu__liste a:hover { color: var(--encre); border-bottom-color: var(--signal); }

/* Le téléphone, dans l'en-tête. Un dirigeant qui envisage de confier son
   informatique appelle avant d'écrire : le numéro doit être atteignable sans
   défiler. Pas de pictogramme — le site n'en compte aucun, ses seuls dessins
   sont les schémas de modules. Le numéro s'écrit, comme le reste. */
.menu__tel {
  display: inline-flex;
  align-items: center;
  font-size: var(--t-menu);
  font-weight: 600;
  color: var(--encre);
  text-decoration: none;
  white-space: nowrap;
}
/* Le filet est porté par le mot, et non par le lien : la cible tactile
   s'agrandit sur mobile sans que le trait s'en détache. */
.menu__tel > span {
  border-bottom: 1px solid var(--trait);
  padding-bottom: 0.2rem;
}
.menu__tel:hover { color: var(--signal); }
.menu__tel:hover > span { border-bottom-color: var(--signal); }
.menu__tel-court { display: none; }

@media (max-width: 940px) {
  .menu__liste { display: none; }
}
@media (max-width: 620px) {
  /* Le numéro complet ne tient plus à côté du bouton : le mot le remplace,
     l'appel part du même geste. La cible garde ses 44 px de haut, seuil en
     dessous duquel le doigt manque le lien. */
  .menu__tel-numero { display: none; }
  .menu__tel-court { display: inline; }
  .menu__tel { min-height: 44px; padding-inline: 0.35rem; }
  .menu { gap: 1rem; }
}
@media (max-width: 420px) {
  .entete .bouton { padding-inline: 0.9rem; }
}

/* --------------------------------------------------------------------------
   6. Ouverture
   -------------------------------------------------------------------------- */

.ouverture { padding-block: clamp(3rem, 6vw, 5.5rem) var(--section); }

.ouverture__grille {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4rem);
}
@media (min-width: 900px) {
  .ouverture__grille { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); align-items: start; }
}

.ouverture h1 { max-width: 21ch; }
.h1-suite { display: block; }

.ouverture__chapeau {
  max-width: 46ch;
  margin-top: 1.4rem;
  font-size: var(--t-lead);
  color: var(--gris);
}

.ouverture__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.9rem;
  margin-top: 1.9rem;
}

.ouverture__note {
  margin-top: 0.9rem;
  font-size: var(--t-petit);
  color: var(--gris);
}

/* Fiche de repères : trois faits, pas trois promesses. */
.reperes {
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  background: var(--papier);
}
.reperes__ligne {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.15rem;
  padding: 1.05rem 1.25rem;
}
.reperes__ligne + .reperes__ligne { border-top: 1px solid var(--trait); }
.reperes__cle {
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--gris);
}
.reperes__valeur {
  font-family: var(--titre);
  font-weight: 700;
  font-stretch: 110%;
  font-size: 1.35rem;
  letter-spacing: -0.015em;
}
.reperes__detail { font-size: var(--t-petit); color: var(--gris); }

/* --------------------------------------------------------------------------
   7. Constats et prises en charge
   -------------------------------------------------------------------------- */

.colonnes {
  display: grid;
  gap: 1px;
  margin-top: 2.6rem;
  background: var(--trait);
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  overflow: hidden;
}
@media (min-width: 780px) {
  .colonnes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.colonnes__item {
  background: var(--papier);
  padding: 1.6rem 1.5rem 1.75rem;
}
.section--calque .colonnes__item { background: var(--calque); }

.colonnes__item h3 { margin-bottom: 0.6rem; }
.colonnes__item p { color: var(--gris); font-size: var(--t-menu); }

.liste-nette {
  list-style: none;
  margin: 0.9rem 0 0;
  padding: 0;
  font-size: var(--t-menu);
  color: var(--gris);
}
.liste-nette li {
  position: relative;
  padding-left: 1.1rem;
  padding-block: 0.28rem;
}
.liste-nette li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1em;
  width: 6px;
  height: 1px;
  background: var(--gris);
}

/* --------------------------------------------------------------------------
   8. L'échelle des chantiers — élément signature
   -------------------------------------------------------------------------- */

.echelle {
  display: grid;
  gap: 1px;
  margin-top: 2.6rem;
  background: var(--trait);
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  overflow: hidden;
}
@media (min-width: 820px) {
  .echelle { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.chantier {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  background: var(--papier);
  padding: 1.75rem 1.5rem 1.9rem;
}

.chantier__figure { margin: 0; }

.chantier__svg { display: block; width: 100%; max-width: 190px; height: auto; }
.chantier__cadre { fill: none; stroke: var(--trait); stroke-width: 1; }
.chantier__module { fill: var(--encre); }
.chantier__cote { fill: none; stroke: var(--gris); stroke-width: 1; }
.chantier__legende {
  fill: var(--gris);
  font-family: var(--texte);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
}

.chantier__titre {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  border-top: 1px solid var(--trait);
  padding-top: 0.9rem;
}
.chantier p { font-size: var(--t-menu); color: var(--gris); }

.chantier__exemples {
  margin-top: auto;
  border-top: 1px dashed var(--trait);
  padding-top: 0.9rem;
}
.chantier__exemples .cote { margin-bottom: 0.55rem; }

.note-module {
  margin-top: 1.6rem;
  max-width: var(--etroit);
  font-size: var(--t-petit);
  color: var(--gris);
}

/* Emplacement à compléter par le client. */
.a-completer {
  display: block;
  border: 1px dashed var(--trait);
  border-radius: var(--rayon);
  padding: 0.85rem 1rem;
  font-size: var(--t-petit);
  color: var(--gris);
  background: transparent;
}
.a-completer__etiquette {
  display: block;
  margin-bottom: 0.35rem;
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--signal);
}

/* --------------------------------------------------------------------------
   9. Grille tarifaire
   -------------------------------------------------------------------------- */

.grille { margin-top: 2.6rem; }

.grille table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}

.grille caption {
  caption-side: top;
  text-align: left;
  padding-bottom: 1.1rem;
  font-size: var(--t-petit);
  color: var(--gris);
}

.grille th, .grille td {
  padding: 1rem 1.1rem;
  border-bottom: 1px solid var(--trait);
  vertical-align: top;
  font-size: var(--t-menu);
  font-weight: 400;
}

.grille thead th,
.grille thead td {
  border-bottom: 1px solid var(--encre);
  padding-top: 0;
  vertical-align: bottom;
}

.grille tbody th {
  font-weight: 600;
  color: var(--gris);
  width: 24%;
}

.grille tbody tr:last-child th,
.grille tbody tr:last-child td { border-bottom: 1px solid var(--encre); }

.formule__nom {
  display: block;
  font-family: var(--titre);
  font-weight: 700;
  font-stretch: 110%;
  font-size: 1.45rem;
  letter-spacing: -0.015em;
}
.formule__pour {
  display: block;
  margin-top: 0.25rem;
  font-size: var(--t-petit);
  font-weight: 400;
  color: var(--gris);
}
.formule__fanion {
  display: inline-block;
  margin-bottom: 0.55rem;
  padding: 0.2rem 0.5rem;
  background: var(--signal);
  color: var(--papier);
  border-radius: var(--rayon);
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.formule__reserve { display: block; height: 1.75rem; }

.grille .colonne-mise-en-avant { background: var(--calque); }
.section--calque .grille .colonne-mise-en-avant { background: var(--papier); }
.grille thead .colonne-mise-en-avant { border-bottom-color: var(--signal); }

.prix {
  font-family: var(--titre);
  font-weight: 700;
  font-stretch: 110%;
  font-size: var(--t-prix);
  letter-spacing: -0.02em;
  line-height: 1;
}
.prix small {
  display: block;
  margin-top: 0.3rem;
  font-family: var(--texte);
  font-size: var(--t-petit);
  font-weight: 400;
  letter-spacing: 0;
  color: var(--gris);
}

/* Le repère de capacité : le même objet que l'échelle des chantiers. */
.capacite { display: flex; align-items: center; gap: 0.75rem; }
.capacite__svg { flex: none; width: 46px; height: 46px; }
.capacite__cadre { fill: none; stroke: var(--trait); stroke-width: 1; }
.capacite__module { fill: var(--encre); }
.colonne-mise-en-avant .capacite__module { fill: var(--signal); }
.capacite__texte { font-size: var(--t-petit); }
.capacite__texte b { display: block; font-weight: 600; font-size: var(--t-menu); }
.capacite__texte span { color: var(--gris); }

.grille tfoot td { border-bottom: 0; padding-top: 1.4rem; }

.mentions {
  list-style: none;
  margin: 1.4rem 0 0;
  padding: 0;
  max-width: 90ch;
  font-size: var(--t-petit);
  color: var(--gris);
}
.mentions li { padding-block: 0.22rem; padding-left: 1.1rem; position: relative; }
.mentions li::before {
  content: "";
  position: absolute; left: 0; top: 1em;
  width: 6px; height: 1px; background: var(--gris);
}

/* Bascule mobile : chaque ligne devient un critère, les trois formules en dessous. */
@media (max-width: 840px) {
  .grille table, .grille thead, .grille tbody, .grille tfoot,
  .grille tr, .grille th, .grille td { display: block; width: auto; }
  /* Hors contexte de tableau, la légende se réduirait à sa largeur minimale. */
  .grille caption { display: block; }

  .grille thead { border-bottom: 1px solid var(--encre); padding-bottom: 1rem; }
  .grille thead tr { display: grid; gap: 0.9rem; }
  .grille thead th { border: 0; padding: 0; }
  .grille thead th:first-child { display: none; }
  .grille thead .colonne-mise-en-avant {
    padding: 0.9rem 1rem;
    border-radius: var(--rayon);
  }
  .formule__reserve { display: none; }

  .grille tbody tr {
    border-bottom: 1px solid var(--trait);
    padding-block: 1.1rem;
  }
  .grille tbody tr:last-child { border-bottom: 1px solid var(--encre); }
  .grille tbody th {
    width: auto;
    padding: 0 0 0.55rem;
    border: 0;
    font-size: var(--t-micro);
    letter-spacing: 0.13em;
    text-transform: uppercase;
  }
  .grille tbody td {
    display: grid;
    grid-template-columns: 8.5rem minmax(0, 1fr);
    gap: 0.75rem;
    align-items: start;
    padding: 0.5rem 0;
    border: 0;
    background: none !important;
  }
  .grille tbody td::before {
    content: attr(data-formule);
    font-size: var(--t-micro);
    font-weight: 600;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: var(--gris);
    padding-top: 0.3em;
  }
  .grille tfoot tr { display: grid; gap: 0.75rem; padding-top: 1.4rem; }
  .grille tfoot td { padding: 0; }
  .grille tfoot td:first-child { display: none; }
}

@media (max-width: 420px) {
  .grille tbody td { grid-template-columns: minmax(0, 1fr); gap: 0.1rem; }
}

/* --------------------------------------------------------------------------
   10. Comparatif
   -------------------------------------------------------------------------- */

.comparatif {
  margin-top: 2.6rem;
  border-top: 1px solid rgba(255, 255, 255, 0.28);
}

.comparatif__ligne {
  display: grid;
  gap: 0.35rem 2rem;
  padding-block: 1.35rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.28);
}
@media (min-width: 760px) {
  .comparatif__ligne {
    grid-template-columns: minmax(0, 19rem) minmax(0, 15rem) minmax(0, 1fr);
    align-items: baseline;
  }
}

.comparatif__quoi { font-weight: 600; font-size: var(--t-lead); }
.comparatif__combien {
  font-family: var(--titre);
  font-weight: 700;
  font-stretch: 110%;
  font-size: 1.35rem;
  letter-spacing: -0.015em;
  white-space: nowrap;
}
.comparatif__quoi-encore { color: var(--trait); font-size: var(--t-menu); }

.comparatif__ligne--nous .comparatif__quoi { color: var(--papier); }
.comparatif__ligne--nous .comparatif__combien { color: var(--papier); font-size: 1.7rem; }
.comparatif__ligne--nous .comparatif__quoi-encore { color: var(--papier); }

.comparatif__marque {
  display: inline-block;
  margin-right: 0.5rem;
  padding: 0.12rem 0.45rem;
  background: var(--signal);
  color: var(--papier);
  border-radius: var(--rayon);
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  vertical-align: 0.15em;
}

.source {
  margin-top: 1.6rem;
  font-size: var(--t-petit);
  color: var(--trait);
  max-width: 80ch;
}

/* --------------------------------------------------------------------------
   11. Cas clients
   -------------------------------------------------------------------------- */

/* Les exemples réels, sous chaque taille de chantier. */
.chantier__liste {
  margin-top: 0.75rem;
  padding-left: 1.05rem;
  list-style: none;
}
.chantier__liste li {
  position: relative;
  padding-block: 0.32rem;
  font-size: var(--t-menu);
  color: var(--gris);
}
.chantier__liste li::before {
  content: "";
  position: absolute;
  left: -1.05rem;
  top: 0.85em;
  width: 0.42rem;
  height: 1px;
  background: var(--trait);
}

.cas {
  display: grid;
  gap: 1px;
  margin-top: 2.6rem;
  background: var(--trait);
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  overflow: hidden;
}
@media (min-width: 820px) {
  .cas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1000px) {
  /* Quatre cas : deux par ligne restent plus lisibles que quatre colonnes
     étroites, l'intitulé de chaque ligne du tableau étant déjà large. */
  .cas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.cas__item { background: var(--papier); padding: 1.75rem 1.5rem; }
.section--calque .cas__item { background: var(--calque); }

.cas__entete {
  font-size: var(--t-micro);
  line-height: 1.45;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--gris);
  padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--trait);
}

.cas__dl { margin-top: 1.1rem; }
.cas__dl > div {
  display: grid;
  gap: 0.2rem 1.25rem;
  padding-block: 0.75rem;
}
@media (min-width: 520px) {
  .cas__dl > div { grid-template-columns: 8.5rem minmax(0, 1fr); }
}
.cas__dl > div + div { border-top: 1px dashed var(--trait); }
.cas__dl dt {
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--gris);
  padding-top: 0.15em;
}
.cas__dl dd { margin: 0; font-size: var(--t-menu); }

/* --------------------------------------------------------------------------
   12. Questions
   -------------------------------------------------------------------------- */

.questions {
  margin-top: 2.4rem;
  max-width: 78ch;
  border-top: 1px solid var(--trait);
}

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

.question > summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.15rem 0;
  cursor: pointer;
  font-weight: 600;
  font-size: var(--t-lead);
  list-style: none;
}
.question > summary::-webkit-details-marker { display: none; }
.question > summary::after {
  content: "+";
  flex: none;
  font-family: var(--titre);
  font-weight: 700;
  font-size: 1.35rem;
  line-height: 1;
  color: var(--signal);
}
.question[open] > summary::after { content: "\2013"; }
.question > summary:hover { color: var(--signal); }

.question__corps {
  padding: 0 0 1.35rem;
  max-width: var(--etroit);
  color: var(--gris);
}
.question__corps p + p { margin-top: 0.8rem; }
.question__corps strong { color: var(--encre); }

/* --------------------------------------------------------------------------
   13. Diagnostic et formulaire
   -------------------------------------------------------------------------- */

.diagnostic__grille { display: grid; gap: clamp(2.25rem, 5vw, 3.5rem); }
@media (min-width: 900px) {
  .diagnostic__grille {
    grid-template-columns: minmax(0, 1fr) minmax(0, 26rem);
    align-items: start;
  }
}

.livrable {
  list-style: none;
  margin: 1.8rem 0 0;
  padding: 0;
  border-top: 1px solid var(--trait);
}
.livrable li {
  display: grid;
  gap: 0.15rem;
  padding: 0.95rem 0;
  border-bottom: 1px solid var(--trait);
}
.livrable b { font-weight: 600; }
.livrable span { color: var(--gris); font-size: var(--t-menu); }

.formulaire {
  border: 1px solid var(--encre);
  border-radius: var(--rayon);
  padding: clamp(1.4rem, 3vw, 1.9rem);
  background: var(--papier);
}
.formulaire__titre { margin-bottom: 1.25rem; }

.champ { display: grid; gap: 0.35rem; margin-bottom: 1.05rem; }
.champ > label {
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--gris);
}

.champ input,
.champ select,
.champ textarea {
  width: 100%;
  padding: 0.7rem 0.8rem;
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  background: var(--papier);
  color: var(--encre);
  font-family: var(--texte);
  font-size: var(--t-menu);
  line-height: 1.45;
}
.champ textarea { resize: vertical; min-height: 6.5rem; }
.champ input:hover, .champ select:hover, .champ textarea:hover { border-color: var(--gris); }
.champ input:focus, .champ select:focus, .champ textarea:focus { border-color: var(--encre); }

.champ select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--gris) 50%),
                    linear-gradient(135deg, var(--gris) 50%, transparent 50%);
  background-position: right 1rem center, right 0.7rem center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 2.1rem;
}

.champ__erreur {
  font-size: var(--t-petit);
  color: var(--signal);
  font-weight: 600;
}
.champ__erreur:empty { display: none; }
.champ[data-invalide="oui"] input,
.champ[data-invalide="oui"] select,
.champ[data-invalide="oui"] textarea { border-color: var(--signal); }

/* Piège à robots — jamais affiché, jamais annoncé. */
.piege {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.formulaire__pied {
  margin-top: 0.4rem;
  font-size: var(--t-petit);
  color: var(--gris);
}
.formulaire__pied a { color: var(--gris); }

.message {
  margin-bottom: 1.1rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--encre);
  border-left-width: 3px;
  border-radius: var(--rayon);
  font-size: var(--t-menu);
}
.message--erreur { border-color: var(--signal); }
.message--bon { border-color: var(--encre); background: var(--calque); }
.message:focus-visible { outline-offset: 1px; }

/* Sans cela, .champ { display: grid } l'emporterait sur l'attribut hidden
   et les champs resteraient affichés après un envoi réussi. */
[hidden] { display: none !important; }

/* --------------------------------------------------------------------------
   14. Pied de page
   -------------------------------------------------------------------------- */

.pied { background: var(--encre); color: var(--trait); padding-block: var(--section) 2.5rem; }
.pied a { color: var(--papier); }

.pied__grille {
  display: grid;
  gap: 2.25rem;
  padding-bottom: 2.25rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.28);
}
@media (min-width: 760px) {
  .pied__grille { grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr)); }
}

.pied__signature {
  margin-top: 0.7rem;
  font-size: var(--t-petit);
  letter-spacing: 0.02em;
}
.pied__adresse { margin-top: 1.1rem; font-style: normal; font-size: var(--t-menu); }

.pied__titre {
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--trait);
  margin-bottom: 0.85rem;
}
.pied__liste { list-style: none; margin: 0; padding: 0; font-size: var(--t-menu); }
.pied__liste li { padding-block: 0.28rem; }
.pied__liste a { text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, 0.3); }
.pied__liste a:hover { border-bottom-color: var(--papier); }

.pied__bas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.75rem;
  justify-content: space-between;
  padding-top: 1.5rem;
  font-size: var(--t-petit);
}

/* --------------------------------------------------------------------------
   15. Pages secondaires
   -------------------------------------------------------------------------- */

.document { max-width: 72ch; padding-block: var(--section); }
.document h2 { margin-top: 2.75rem; margin-bottom: 0.9rem; font-size: 1.5rem; }
.document h2:first-of-type { margin-top: 2rem; }
.document p, .document ul { margin-top: 0.9rem; color: var(--gris); }
.document ul { padding-left: 1.15rem; }
.document li { padding-block: 0.2rem; }
.document strong { color: var(--encre); }
.document .retour { display: inline-block; margin-bottom: 1.75rem; font-size: var(--t-menu); }

/* Le tableau d'identité de l'éditeur, en mentions légales. */
.identite { margin-top: 1.1rem; border-top: 1px solid var(--trait); }
.identite > div {
  display: grid;
  gap: 0.2rem 1.25rem;
  padding-block: 0.7rem;
  border-bottom: 1px solid var(--trait);
}
@media (min-width: 520px) {
  .identite > div { grid-template-columns: 14rem minmax(0, 1fr); }
}
.identite dt {
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--gris);
  padding-top: 0.15em;
}
.identite dd { margin: 0; font-size: var(--t-menu); color: var(--encre); }

/* --------------------------------------------------------------------------
   16. Mouvement — une apparition, rien de plus
   -------------------------------------------------------------------------- */

.js .paraitre {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.45s ease-out, transform 0.45s ease-out;
}
.js .paraitre.est-la { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .js .paraitre { opacity: 1; transform: none; transition: none; }
  .bouton, .menu__liste a, .champ input, .champ select, .champ textarea { transition: none; }
}

/* --------------------------------------------------------------------------
   17. Impression
   -------------------------------------------------------------------------- */

@media print {
  .entete, .formulaire, .ouverture__actions { display: none; }
  body { color: #000; font-size: 11pt; }
  .bloc-sombre, .pied { background: #fff; color: #000; }
  .section { break-inside: avoid; border-top: 1px solid #999; }
  .question > summary::after { content: ""; }
  .question__corps { display: block; }
}