/* ==========================================================================
   lebusinessanalyst.fr — feuille de style unique
   Pile système, aucune police distante, aucun JavaScript.
   ========================================================================== */

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

:root {
  /* Couleurs */
  --fond: #fafaf8;
  --surface: #ffffff;
  --filet: #e3e1db;
  --filet-fort: #d3d0c8;
  --texte: #1a1a19;
  --texte-doux: #565651;
  --accent: #123a5c;
  --accent-fonce: #0c2840;
  --accent-voile: #edf1f5;
  --alerte: #8a5a17;
  --alerte-voile: #fcf7ee;
  --alerte-filet: #e8d9bd;

  /* Typographie */
  --pile: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;

  /* Rythme */
  --gouttiere: 1.5rem;
  --largeur-page: 1400px;

  /* Mesure de lecture : plafond de longueur de ligne du texte courant.

     En em, donc relatif à la taille du bloc auquel il s'applique. Un même
     nombre d'em donne le même nombre de caractères par ligne quelle que soit
     la taille du texte : c'est ce qui permet un seul réglage pour toute la
     page. Ne pas convertir en pixels, la valeur cesserait de suivre.

     34em donne 66 à 72 caractères par ligne, soit la fourchette visée (65-75).
     Valeurs mesurées sur les trois pages, pas estimées. */
  --largeur-texte: 34em;
  --section-y: clamp(3.5rem, 8vw, 6rem);
  --rayon: 4px;
}

/* Gouttière élargie sur écran large. Un seul point de réglage : tout ce qui
   utilise .page suit, sans règle par section. */
@media (min-width: 780px) {
  :root {
    --gouttiere: 3rem;
  }
}

/* --------------------------------------------------------------------------
   2. Reset ciblé
   -------------------------------------------------------------------------- */

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

* {
  margin: 0;
}

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

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

body {
  font-family: var(--pile);
  font-size: clamp(1.0625rem, 0.4vw + 1rem, 1.125rem);
  line-height: 1.65;
  color: var(--texte);
  background: var(--fond);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1,
h2,
h3 {
  line-height: 1.15;
  text-wrap: balance;
  letter-spacing: -0.011em;
}

p,
li {
  text-wrap: pretty;
}

ul,
ol {
  padding: 0;
}

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

a:hover {
  color: var(--accent-fonce);
}

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

/* --------------------------------------------------------------------------
   3. Structure
   -------------------------------------------------------------------------- */

.page {
  width: 100%;
  max-width: var(--largeur-page);
  margin-inline: auto;
  padding-inline: var(--gouttiere);
}

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

.evite {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--accent);
  color: #fff;
  padding: 0.75rem 1.25rem;
  z-index: 100;
  text-decoration: none;
}

.evite:focus {
  left: 0.5rem;
  top: 0.5rem;
  color: #fff;
}

/* --------------------------------------------------------------------------
   4. Titres de section
   -------------------------------------------------------------------------- */

.surtitre {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--texte-doux);
  margin-bottom: 0.75rem;
}

h2 {
  font-size: clamp(1.625rem, 2.6vw, 2rem);
  font-weight: 620;
  max-width: 26ch;
}

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

.entete {
  border-bottom: 1px solid var(--filet);
  background: var(--fond);
}

.entete__contenu {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem 2rem;
  padding-block: 1.125rem;
}

.marque {
  font-size: 1.0625rem;
  font-weight: 650;
  letter-spacing: -0.01em;
  color: var(--texte);
  text-decoration: none;
}

.nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.5rem;
  list-style: none;
  font-size: 0.9375rem;
}

.nav a {
  color: var(--texte-doux);
  text-decoration: none;
}

.nav a:hover {
  color: var(--accent);
  text-decoration: underline;
}

/* --------------------------------------------------------------------------
   6. Hero
   -------------------------------------------------------------------------- */

/* Hero en photo de fond. Le texte et le bouton sont posés par-dessus.
   La couleur de repli sous la photo est le bleu foncé : si l'image met du
   temps à charger ou ne charge pas, le hero reste lisible. */
.hero {
  position: relative;
  isolation: isolate;
  border-top: 0;
  background: var(--accent-fonce);
  padding-block: clamp(4rem, 9vw, 7rem);
  overflow: hidden;
}

.hero__fond {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.hero__fond img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Sur mobile, le recadrage « cover » est très serré : centré, il place la
   partie claire de la photo derrière le texte, qui occupe toute la largeur.
   Le décalage à 35 % ramène le mur sombre derrière le texte. */
@media (max-width: 779px) {
  .hero__fond img {
    object-position: 35% center;
  }
}

/* Voile de lisibilité.

   Les opacités sont calculées pour le pire cas : une zone entièrement blanche
   de la photo passant derrière le texte. Ce n'est pas théorique ici, l'écran
   de l'ordinateur est presque blanc.

   Le dégradé est volontairement plat (86 % à gauche, 66 % à droite) et sans
   point de rupture : la largeur de la colonne de texte varie avec la fenêtre
   et le recadrage « cover » déplace la photo, si bien qu'aucune zone n'est
   garantie sombre. Sur du blanc pur, 86 % donne 12:1 et 66 % donne 5,7:1 :
   le contraste AA tient donc partout, quelle que soit la largeur.

   Ne pas réduire ces valeurs sans revérifier les contrastes. */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    95deg,
    rgba(9, 26, 43, 0.86) 0%,
    rgba(9, 26, 43, 0.78) 45%,
    rgba(9, 26, 43, 0.66) 100%
  );
}

.hero h1 {
  font-size: clamp(2.125rem, 5vw, 3.25rem);
  font-weight: 650;
  letter-spacing: -0.02em;
  line-height: 1.12;
  max-width: 20ch;
  color: #fff;
}

/* 48ch, pas 56ch : le texte doit rester dans la moitié gauche pour ne pas
   entrer dans la partie claire du dégradé (voir .hero::after). */
.hero__sous {
  margin-top: 1.5rem;
  max-width: 48ch;
  font-size: clamp(1.0625rem, 0.5vw + 1rem, 1.1875rem);
  color: rgba(255, 255, 255, 0.88);
}

/* Bouton inversé : fond blanc sur le hero sombre. */
.hero .bouton {
  background: #fff;
  border-color: #fff;
  color: var(--accent-fonce);
}

.hero .bouton:hover {
  background: var(--accent-voile);
  border-color: var(--accent-voile);
  color: var(--accent-fonce);
}

.hero .lien-mail {
  color: rgba(255, 255, 255, 0.85);
}

.hero .lien-mail a {
  color: #fff;
}

.hero :focus-visible {
  outline-color: #fff;
}

/* Le contenu se place au-dessus du voile. Les deux couches de fond sont en
   z-index négatif, cette règle n'est donc qu'une sécurité de pile. */
.hero__contenu {
  position: relative;
  z-index: 1;
}

.hero__action {
  margin-top: 2.25rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
}

/* Texte clair sur le hero sombre. Le filet reprend la même teinte translucide
   que sur fond clair, mais inversé. */
.hero__rappel {
  margin-top: 1.5rem;
  max-width: 58ch;
  font-size: 0.9375rem;
  color: rgba(255, 255, 255, 0.88);
  padding-left: 0.875rem;
  border-left: 2px solid rgba(255, 255, 255, 0.35);
}

.hero__rappel strong {
  color: #fff;
}

/* --------------------------------------------------------------------------
   6 bis. Schéma de flux

   Le circuit d'une facture, dans la section Échéance. Construit en HTML et
   CSS, pas en image : le texte reste sélectionnable, lisible par un lecteur
   d'écran, traduisible, et il se réagence en colonne sur mobile au lieu de
   rétrécir.

   C'est la seule illustration du site en dehors de la photo du hero.
   -------------------------------------------------------------------------- */

img {
  max-width: 100%;
  height: auto;
}

.schema {
  margin: 3rem 0 0;
  max-width: 880px;
}

.schema figcaption {
  margin-top: 1.5rem;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--texte-doux);
  max-width: 66ch;
}

/* Enchaînement de boîtes. En colonne par défaut, en ligne à partir de 760px. */
.flux {
  display: grid;
  gap: 2.25rem;
}

.flux__boite {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--filet-fort);
  border-radius: var(--rayon);
  padding: 1rem 1.125rem 1.125rem;
}

.flux__boite strong {
  display: block;
  font-size: 0.9375rem;
  font-weight: 650;
  line-height: 1.3;
  color: var(--texte);
}

.flux__boite span {
  display: block;
  margin-top: 0.375rem;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--texte-doux);
}

/* Chevron d'enchaînement, dessiné avec deux bordures pivotées.
   Vers le bas en pile, vers la droite en ligne. */
.flux__boite + .flux__boite::before {
  content: "";
  position: absolute;
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  left: 50%;
  top: -1.35rem;
  margin-left: -6px;
  transform: rotate(45deg);
}

@media (min-width: 760px) {
  .flux {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.75rem;
  }

  .flux__boite + .flux__boite::before {
    left: -1.15rem;
    top: 50%;
    margin-left: 0;
    margin-top: -6px;
    transform: rotate(-45deg);
  }
}

.flux__liaison {
  margin-top: 1.75rem;
  font-size: 0.875rem;
  color: var(--texte-doux);
}

/* Le portail public ne fait pas partie du circuit d'échange : bordure
   pointillée pour le distinguer des plateformes qui transportent la facture. */
.flux__cible {
  margin-top: 0.875rem;
  border: 1px dashed var(--filet-fort);
  border-left: 3px solid var(--texte-doux);
  border-radius: var(--rayon);
  padding: 1rem 1.125rem 1.125rem;
}

.flux__cible strong {
  display: block;
  font-size: 0.9375rem;
  font-weight: 650;
  color: var(--texte);
}

.flux__cible span {
  display: block;
  margin-top: 0.375rem;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--texte-doux);
  max-width: 72ch;
}

/* --------------------------------------------------------------------------
   7. Boutons
   -------------------------------------------------------------------------- */

.bouton {
  display: inline-block;
  background: var(--accent);
  color: #fff;
  font-size: 1rem;
  font-weight: 600;
  padding: 0.875rem 1.5rem;
  border-radius: var(--rayon);
  text-decoration: none;
  border: 1px solid var(--accent);
}

.bouton:hover {
  background: var(--accent-fonce);
  border-color: var(--accent-fonce);
  color: #fff;
}

.lien-mail {
  font-size: 0.9375rem;
  color: var(--texte-doux);
}

.lien-mail a {
  color: var(--accent);
}

/* --------------------------------------------------------------------------
   8. Bandeau échéance
   -------------------------------------------------------------------------- */

.echeance {
  background: var(--alerte-voile);
  border-top: 1px solid var(--alerte-filet);
  border-bottom: 1px solid var(--alerte-filet);
}

.echeance .surtitre {
  color: var(--alerte);
}

.reperes {
  list-style: none;
  margin-top: 2rem;
  display: grid;
  gap: 1.75rem 2.5rem;
  grid-template-columns: repeat(auto-fit, minmax(196px, 1fr));
}

.repere {
  border-left: 3px solid var(--alerte);
  padding-left: 1.125rem;
}

.repere__date {
  display: block;
  font-size: 1.0625rem;
  font-weight: 650;
  color: var(--alerte);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

.repere p {
  margin-top: 0.4rem;
  font-size: 0.9375rem;
  line-height: 1.55;
}

.note {
  margin-top: 2.25rem;
  font-size: 0.875rem;
  color: var(--texte-doux);
  max-width: var(--largeur-texte);
}

/* --------------------------------------------------------------------------
   9. Services
   -------------------------------------------------------------------------- */

.cartes {
  list-style: none;
  margin-top: 2.5rem;
  display: grid;
  gap: 1.25rem;
  grid-template-columns: 1fr;
}

/* 4 services : grille 2 × 2, plus lisible qu'une rangée de 4 colonnes
   étroites ou qu'une rangée de 3 laissant une carte orpheline. */
@media (min-width: 700px) {
  .cartes {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }
}

.carte {
  background: var(--surface);
  border: 1px solid var(--filet);
  border-radius: var(--rayon);
  padding: 1.75rem 1.625rem;
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}

.carte:hover {
  border-color: var(--accent);
}

.carte__icone {
  color: var(--accent);
  width: 24px;
  height: 24px;
}

.carte h3 {
  font-size: 1.1875rem;
  font-weight: 600;
  line-height: 1.3;
}

.carte p {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--texte-doux);
  max-width: var(--largeur-texte);
}

.carte p strong {
  color: var(--texte);
  font-weight: 600;
}

.mention-tarif {
  margin-top: 1.5rem;
  font-size: 0.9375rem;
  color: var(--texte-doux);
}

/* --------------------------------------------------------------------------
   10. Méthode
   -------------------------------------------------------------------------- */

.etapes {
  list-style: none;
  counter-reset: etape;
  margin-top: 2.5rem;
  display: grid;
  gap: 2rem;
}

@media (min-width: 780px) {
  .etapes {
    grid-template-columns: repeat(2, 1fr);
    gap: 2.5rem 3rem;
  }
}

.etape {
  counter-increment: etape;
  display: grid;
  grid-template-columns: 2.75rem 1fr;
  gap: 0 1.125rem;
  align-items: start;
}

.etape::before {
  content: counter(etape, decimal-leading-zero);
  grid-row: 1 / span 2;
  font-size: 1.125rem;
  font-weight: 650;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  padding-top: 0.1rem;
  border-top: 2px solid var(--accent);
  line-height: 1.6;
}

.etape h3 {
  font-size: 1.125rem;
  font-weight: 600;
  padding-top: 0.35rem;
}

.etape p {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--texte-doux);
  margin-top: 0.5rem;
  max-width: var(--largeur-texte);
}

/* --------------------------------------------------------------------------
   11. À propos
   -------------------------------------------------------------------------- */

.apropos__intro {
  margin-top: 1.25rem;
  max-width: 62ch;
  font-size: 1.0625rem;
}

.apropos__grille {
  margin-top: 2.5rem;
  display: grid;
  gap: 2.5rem;
}

@media (min-width: 860px) {
  .apropos__grille {
    grid-template-columns: 1.35fr 1fr;
    gap: 3.5rem;
  }
}

.parcours {
  list-style: none;
  display: grid;
  gap: 1.5rem;
}

.parcours li {
  border-left: 2px solid var(--filet-fort);
  padding-left: 1.125rem;
}

.parcours strong {
  display: block;
  font-weight: 600;
  font-size: 1rem;
}

.parcours span {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.9375rem;
  color: var(--texte-doux);
  line-height: 1.6;
  max-width: var(--largeur-texte);
}

.encadre {
  background: var(--surface);
  border: 1px solid var(--filet);
  border-radius: var(--rayon);
  padding: 1.625rem;
  align-self: start;
}

.encadre h3 {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 0.75rem;
}

.encadre p {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--texte-doux);
}

.encadre p + p {
  margin-top: 0.875rem;
}

.competences {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1rem;
}

.competences li {
  font-size: 0.8125rem;
  font-weight: 500;
  background: var(--accent-voile);
  color: var(--accent);
  padding: 0.3rem 0.625rem;
  border-radius: 3px;
}

/* --------------------------------------------------------------------------
   12. FAQ
   -------------------------------------------------------------------------- */

/* Deux colonnes au-delà de 1000 px : le titre à gauche, l'accordéon à droite.

   La section occupe ainsi toute la largeur du conteneur alors que les réponses
   gardent une colonne de lecture. C'est le seul moyen de concilier les deux :
   étirer un paragraphe sur 1300 px donnerait 150 caractères par ligne, l'œil
   perd la ligne suivante au retour à la marge.

   La colonne de droite est plafonnée à 620 px, largeur calée sur la mesure de
   lecture des réponses (voir .faq details > p). */
@media (min-width: 1000px) {
  .faq-bloc {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 620px);
    gap: 0 4rem;
    align-items: start;
  }

  /* La colonne de gauche peut atteindre 600 px sur très grand écran. Le titre
     y est borné pour rester un bloc compact face à l'accordéon, plutôt qu'une
     ligne étirée sur toute la colonne. */
  .faq-tete {
    max-width: 20rem;
  }

  /* En deux colonnes, l'accordéon n'est plus sous le titre : sa marge haute
     le ferait décrocher du haut de la colonne. */
  .faq-bloc .faq {
    margin-top: 0;
  }
}

.faq {
  margin-top: 2.5rem;
  max-width: 620px;
  border-top: 1px solid var(--filet);
}

.faq details {
  border-bottom: 1px solid var(--filet);
}

.faq summary {
  cursor: pointer;
  list-style: none;
  padding: 1.125rem 2.5rem 1.125rem 0;
  font-size: 1.125rem;
  font-weight: 600;
  position: relative;
  line-height: 1.4;
}

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

.faq summary::after {
  content: "";
  position: absolute;
  right: 0.5rem;
  top: 1.6rem;
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(45deg);
}

.faq details[open] summary::after {
  transform: rotate(225deg);
  top: 1.75rem;
}

.faq summary:hover {
  color: var(--accent);
}

/* Les réponses occupent toute la largeur de l'accordéon : pas de max-width ici,
   c'est .faq qui borne la colonne. Une largeur propre au paragraphe le rendrait
   plus étroit que la question juste au-dessus — c'était le défaut précédent,
   la réponse flottait dans un tiers du bloc.

   Le corps est passé de 15 à 17 px : à 620 px de colonne, cela donne environ
   70 caractères par ligne. En 15 px, la même colonne en donnerait 79, au-delà
   de la fourchette de lisibilité. Les deux valeurs vont ensemble. */
.faq details > p {
  padding-right: 2.5rem;
  margin-top: -0.25rem;
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--texte-doux);
}

.faq details > p + p {
  margin-top: 0.75rem;
}

.faq details > p:last-child {
  padding-bottom: 1.375rem;
}

/* --------------------------------------------------------------------------
   13. CTA final
   -------------------------------------------------------------------------- */

.cta {
  background: var(--accent);
  color: #fff;
  border: 0;
}

.cta h2 {
  color: #fff;
  font-size: clamp(1.5rem, 2.4vw, 1.875rem);
}

.cta p {
  margin-top: 1rem;
  max-width: 58ch;
  color: #d6e0e9;
  font-size: 1.0625rem;
}

.cta__coord {
  margin-top: 1.5rem;
  font-size: 0.9375rem;
  color: #d6e0e9;
}

.cta__coord a {
  color: #fff;
}

.cta :focus-visible {
  outline-color: #fff;
}

.cta__grille {
  display: grid;
  gap: 2.5rem;
  align-items: start;
}

@media (min-width: 900px) {
  .cta__grille {
    grid-template-columns: 1fr 1.05fr;
    gap: 4rem;
  }
}

/* --------------------------------------------------------------------------
   13 bis. Formulaire de contact
   -------------------------------------------------------------------------- */

.formulaire {
  background: var(--surface);
  border-radius: 6px;
  padding: clamp(1.375rem, 3vw, 1.875rem);
  color: var(--texte);
}

/* Le contour de focus clair du bloc CTA ne convient pas sur la carte blanche. */
.cta .formulaire :focus-visible {
  outline-color: var(--accent);
}

.champ + .champ,
.champ-double + .champ,
.champ + .champ-double,
.champ-double + .champ-double {
  margin-top: 1rem;
}

.champ label {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  margin-bottom: 0.375rem;
}

.facultatif {
  font-weight: 400;
  color: var(--texte-doux);
  font-size: 0.8125rem;
}

.champ input,
.champ select,
.champ textarea {
  width: 100%;
  font-family: inherit;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--texte);
  background: var(--fond);
  border: 1px solid var(--filet-fort);
  border-radius: var(--rayon);
  padding: 0.625rem 0.75rem;
}

.champ textarea {
  resize: vertical;
  min-height: 6rem;
}

.champ input:focus,
.champ select:focus,
.champ textarea:focus {
  background: var(--surface);
  border-color: var(--accent);
}

.champ-double {
  display: grid;
  gap: 1rem;
}

@media (min-width: 520px) {
  .champ-double {
    grid-template-columns: 1fr 1fr;
  }
  .champ-double .champ + .champ {
    margin-top: 0;
  }
}

.champ-case {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  margin-top: 1.25rem;
}

.champ-case input {
  margin-top: 0.15rem;
  width: 1rem;
  height: 1rem;
  flex: none;
  accent-color: var(--accent);
}

.champ-case label {
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--texte-doux);
}

/* Piège à robots : hors écran plutôt que display:none, pour que les
   automates le remplissent. Retiré du flux de tabulation et du lecteur. */
.pot-de-miel {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.bouton--large {
  width: 100%;
  margin-top: 1.25rem;
  padding-block: 1rem;
  font-size: 1.0625rem;
  font-family: inherit;
  cursor: pointer;
}

.cta .formulaire .bouton--large {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

.cta .formulaire .bouton--large:hover {
  background: var(--accent-fonce);
  border-color: var(--accent-fonce);
}

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

.pied {
  border-top: 1px solid var(--filet);
  padding-block: 2.5rem 3rem;
  font-size: 0.9375rem;
  color: var(--texte-doux);
}

/* Le filet porte ici, et non sur .pied__bas : la ligne de mentions est bornée
   en largeur de lecture, le filet doit rester pleine largeur. */
.pied__haut {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1.25rem 2.5rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--filet);
}

.pied__nom {
  font-weight: 600;
  color: var(--texte);
}

.pied__liens {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
}

/* Sans max-width, cette ligne atteindrait 174 caractères sur un écran large. */
.pied__bas {
  margin-top: 1.25rem;
  font-size: 0.875rem;
  max-width: var(--largeur-texte);
}

/* --------------------------------------------------------------------------
   15. Page intérieure (mentions légales)
   -------------------------------------------------------------------------- */

.interieur {
  border-top: 0;
  padding-block: clamp(2.5rem, 6vw, 4rem) var(--section-y);
}

.interieur h1 {
  font-size: clamp(1.875rem, 3.5vw, 2.5rem);
  font-weight: 650;
  letter-spacing: -0.018em;
}

.interieur h2 {
  font-size: 1.1875rem;
  font-weight: 600;
  margin-top: 2.5rem;
  max-width: none;
}

.interieur h2 + * {
  margin-top: 0.75rem;
}

.interieur p,
.interieur ul {
  max-width: var(--largeur-texte);
  font-size: 1rem;
}

.interieur p + p {
  margin-top: 0.875rem;
}

.interieur ul {
  list-style: none;
  display: grid;
  gap: 0.5rem;
}

.interieur ul li {
  padding-left: 1rem;
  position: relative;
}

.interieur ul li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--texte-doux);
}

.merci__intro {
  margin-top: 1.25rem;
  max-width: 60ch;
  font-size: 1.125rem;
}

.retour {
  display: inline-block;
  margin-bottom: 1.75rem;
  font-size: 0.9375rem;
  text-decoration: none;
}

.retour:hover {
  text-decoration: underline;
}

/* --------------------------------------------------------------------------
   16. Impression
   -------------------------------------------------------------------------- */

@media print {
  .nav,
  .formulaire,
  .hero__action {
    display: none;
  }

  body {
    background: #fff;
    font-size: 11pt;
  }

  .cta {
    background: #fff;
    color: #000;
  }

  .cta h2,
  .cta p,
  .cta__coord,
  .cta__coord a {
    color: #000;
  }

  /* À l'impression, la photo de fond et son voile sont retirés : le hero
     redevient du texte noir sur blanc. */
  .hero__fond {
    display: none;
  }

  .hero {
    background: #fff;
  }

  .hero::after {
    display: none;
  }

  .hero h1,
  .hero__sous,
  .hero__rappel,
  .hero__rappel strong {
    color: #000;
  }

  .hero__rappel {
    border-left-color: #000;
  }
}