/* ==========================================================================
   Arcelle Solutions Performance
   Feuille de style — refonte 2026
   Motif directeur : le filet. Réseau de nœuds reliés, déplié à l'échelle
   de la page. Aucune bordure épaisse, aucun aplat saturé.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Fontes — les 4 graisses réellement présentes dans /font
   L'ancienne feuille n'en déclarait que 2 (400 et 900) : d'où le rendu massif.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: "Evolve";
  src: url("../font/made_evolve_sans_light-webfont.woff2") format("woff2"),
       url("../font/made_evolve_sans_light-webfont.woff") format("woff");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Evolve";
  src: url("../font/made_evolve_sans_regular-webfont.woff2") format("woff2"),
       url("../font/made_evolve_sans_regular-webfont.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Evolve";
  src: url("../font/made_evolve_sans_medium-webfont.woff2") format("woff2"),
       url("../font/made_evolve_sans_medium-webfont.woff") format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Evolve";
  src: url("../font/made_evolve_sans_bold-webfont.woff2") format("woff2"),
       url("../font/made_evolve_sans_bold-webfont.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* --------------------------------------------------------------------------
   2. Tokens
   -------------------------------------------------------------------------- */

:root {
  /* Couleur — charte Arcelle dédensifiée.
     Le vert est assombri de #579D43 à #4E8F3C pour passer AA sur papier. */
  --encre: #2e3150;
  --ardoise: #505279;
  --plume: #6b6e92;
  --vert: #4e8f3c;
  --vert-clair: #eaf2e7;
  --brique: #c52f38;
  --papier: #fcfcfd;
  --papier-creux: #f5f5f9;
  --filet: #dcdde8;
  --filet-clair: #ebecf3;
  --blanc: #ffffff;

  /* Type — html à 62.5 %, donc 1rem = 10px */
  --t-xs: 1.3rem;
  --t-sm: 1.5rem;
  --t-base: 1.8rem;
  --t-lg: 2.1rem;
  --t-xl: 2.6rem;
  --t-2xl: 3.4rem;

  /* Rythme vertical — échelle unique, pas de valeurs au jugé */
  --e1: 0.8rem;
  --e2: 1.6rem;
  --e3: 2.4rem;
  --e4: 3.2rem;
  --e5: 4.8rem;
  --e6: 7.2rem;
  --e7: 11rem;

  /* Gabarit */
  --mesure: 66rem;
  --gouttiere: 3.2rem;
  --marge-page: 2rem;
  --cadre: 118rem;

  --transition: 0.4s cubic-bezier(0.2, 0.6, 0.2, 1);
}

@media (min-width: 48em) {
  :root {
    --gouttiere: 6rem;
    --marge-page: 4rem;
    --t-base: 1.9rem;
    --t-2xl: 4.4rem;
  }
}

/* --------------------------------------------------------------------------
   3. Reset
   -------------------------------------------------------------------------- */

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

* {
  margin: 0;
}

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

body {
  background-color: var(--papier);
  color: var(--encre);
  font-family: "Evolve", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: var(--t-base);
  font-weight: 300;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
}

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

img {
  height: auto;
}

ul {
  list-style: none;
  padding: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

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

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

/* --------------------------------------------------------------------------
   4. Typographie
   Une seule graisse forte par écran. Les titres sont en 500, pas en 700 :
   c'est le changement le plus déterminant pour la légèreté.
   -------------------------------------------------------------------------- */

h1,
h2,
h3 {
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.018em;
  text-wrap: balance;
}

h2 {
  font-size: var(--t-2xl);
}

h3 {
  font-size: var(--t-xl);
  letter-spacing: -0.012em;
}

p {
  text-wrap: pretty;
}

p + p {
  margin-top: var(--e2);
}

strong,
.fort {
  font-weight: 500;
}

.sourdine {
  color: var(--plume);
}

/* --------------------------------------------------------------------------
   5. Gabarit — la gouttière porte le filet et les nœuds
   -------------------------------------------------------------------------- */

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

.piste {
  display: grid;
  grid-template-columns: var(--gouttiere) minmax(0, 1fr);
  position: relative;
}

/* Le filet : un trait continu qui traverse toute la page.
   Il s'efface aux extrémités pour ne pas buter sur les bords. */
.piste::before {
  content: "";
  position: absolute;
  inset-block: 0;
  left: calc(var(--gouttiere) / 2);
  width: 1px;
  background: linear-gradient(
    to bottom,
    transparent,
    var(--filet) 6rem,
    var(--filet) calc(100% - 6rem),
    transparent
  );
}

.bloc {
  grid-column: 2;
  position: relative;
  padding-block: var(--e6);
}

/* La mesure de lecture porte sur le texte, pas sur le bloc : une figure
   reste ainsi libre de s'étendre et de se centrer dans la colonne. */
.bloc > h2,
.bloc > p,
.bloc > ul {
  max-width: var(--mesure);
}

/* Le nœud : seul élément rond de la page, en écho aux cercles du logo.
   Il est porté par le titre et non par le bloc, pour que le décalage
   vertical se calcule sur la police du titre : le centre de sa première
   ligne est à line-height / 2, soit 0.56em. */
.bloc > h2 {
  position: relative;
}

.bloc > h2::before {
  content: "";
  position: absolute;
  top: calc(0.56em - 4.5px);
  left: calc(-1 * var(--gouttiere) / 2 - 4.5px);
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background-color: var(--papier);
  box-shadow: inset 0 0 0 1.5px var(--ardoise);
  transition: box-shadow var(--transition), background-color var(--transition);
}

/* Le nœud se remplit quand sa section est à l'écran : la page indique
   où l'on en est dans la méthode, sans barre de progression. */
.bloc.est-vu > h2::before {
  background-color: var(--vert);
  box-shadow: inset 0 0 0 1.5px var(--vert);
}

/* --------------------------------------------------------------------------
   6. En-tête de page
   -------------------------------------------------------------------------- */

.entete {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  background-color: rgba(252, 252, 253, 0.82);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--transition), background-color var(--transition);
}

.entete.est-detachee {
  border-bottom-color: var(--filet);
}

.entete__corps {
  display: flex;
  align-items: center;
  gap: var(--e3);
  height: 6.4rem;
}

.entete__logo img {
  height: 2.8rem;
  width: auto;
}

.entete__nav {
  display: none;
  margin-left: auto;
  gap: var(--e3);
  font-size: var(--t-sm);
  font-weight: 400;
}

@media (min-width: 62em) {
  .entete__nav {
    display: flex;
  }
}

.entete__nav a {
  color: var(--plume);
  padding-block: 0.4rem;
  position: relative;
  transition: color var(--transition);
}

.entete__nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 1px;
  width: 100%;
  background-color: var(--vert);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition);
}

.entete__nav a:hover,
.entete__nav a[aria-current="true"] {
  color: var(--encre);
}

.entete__nav a[aria-current="true"]::after,
.entete__nav a:hover::after {
  transform: scaleX(1);
}

/* --------------------------------------------------------------------------
   7. Bouton
   -------------------------------------------------------------------------- */

.bouton {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  padding: 1.1rem 2.2rem;
  font-size: var(--t-sm);
  font-weight: 500;
  border-radius: 2px;
  background-color: var(--encre);
  color: var(--blanc);
  transition: background-color var(--transition), transform var(--transition);
}

.bouton:hover {
  background-color: var(--vert);
}

.bouton:active {
  transform: translateY(1px);
}

/* Fond blanc plein : le bouton se détache du réseau qui passe derrière. */
.bouton--discret {
  background-color: var(--blanc);
  color: var(--encre);
  box-shadow: inset 0 0 0 1px var(--filet);
}

.bouton--discret:hover {
  background-color: var(--blanc);
  color: var(--vert);
  box-shadow: inset 0 0 0 1px var(--vert);
}

.entete .bouton {
  margin-left: auto;
}

@media (min-width: 62em) {
  .entete .bouton {
    margin-left: 0;
  }
}

/* --------------------------------------------------------------------------
   8. Hero — typographique. Le réseau de nœuds remplace le diaporama :
   0 Ko d'image contre 1,3 Mo pour la première photo de l'ancienne version.
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  min-height: 92vh;
  min-height: 92svh;
  display: flex;
  align-items: center;
  padding-top: 6.4rem;
}

/* Fond fixe de toute la page : le réseau ne défile pas, le contenu passe
   au-dessus. Plus dense sur grand écran, où il se diluait. */
.reseau {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  opacity: 0.3;
  pointer-events: none;
}

@media (min-width: 62em) {
  .reseau {
    opacity: 0.62;
  }
}

/* Le contenu se place au-dessus du fond. */
.hero,
main,
.pied {
  position: relative;
  z-index: 1;
}

/* Voile de lisibilité : un halo blanc aux bords fondus sous les zones de
   texte. Le réseau garde toute sa présence dans les marges et entre les
   sections, mais cesse de passer derrière les phrases — c'était la vraie
   gêne, plutôt que son intensité. Aucun bord perceptible : pas d'effet
   de boîte. */
.bloc::after,
.citation::after {
  content: "";
  position: absolute;
  inset: 0 -3rem 0 -2rem;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(
    ellipse 75% 60% at 38% 50%,
    rgba(255, 255, 255, 0.92) 0%,
    rgba(255, 255, 255, 0.82) 45%,
    rgba(255, 255, 255, 0) 100%
  );
}

@media (min-width: 62em) {
  .bloc::after,
  .citation::after {
    inset: 0 -6rem 0 -4rem;
  }
}

.citation {
  position: relative;
}

.hero__corps {
  position: relative;
  z-index: 1;
  width: 100%;
}

.hero__titre {
  font-size: clamp(3.6rem, 7.5vw, 8.4rem);
  font-weight: 300;
  letter-spacing: -0.03em;
  line-height: 1.02;
  max-width: 16ch;
}

.hero__titre .accent {
  font-weight: 500;
}

/* Le « 360° » est le seul endroit du hero où la couleur intervient. */
.hero__titre .tour {
  color: var(--vert);
  font-weight: 500;
  white-space: nowrap;
}

.hero__accroche {
  margin-top: var(--e4);
  max-width: 52ch;
  font-size: var(--t-lg);
  color: var(--plume);
  line-height: 1.55;
}

.hero__actions {
  margin-top: var(--e5);
  display: flex;
  flex-wrap: wrap;
  gap: var(--e2);
}

/* --------------------------------------------------------------------------
   9. Sections courantes
   -------------------------------------------------------------------------- */

.bloc__intro {
  margin-top: var(--e3);
  color: var(--plume);
  font-size: var(--t-lg);
  line-height: 1.55;
}

/* Liste à filet : le tiret vertical remplace la puce ronde rouge.
   Cohérent avec le motif de la page, et beaucoup moins bruyant. */
.liste {
  margin-top: var(--e4);
  display: grid;
  gap: var(--e3);
}

.liste li {
  padding-left: var(--e3);
  border-left: 1px solid var(--filet);
  transition: border-color var(--transition);
}

.liste li:hover {
  border-left-color: var(--vert);
}

.liste__titre {
  display: block;
  font-weight: 500;
  margin-bottom: 0.3rem;
}

.liste__detail {
  color: var(--plume);
  font-size: var(--t-sm);
  line-height: 1.6;
}

/* Liste simple, sans filet, pour les énumérations courtes */
.liste-plate {
  margin-top: var(--e3);
  display: grid;
  gap: var(--e2);
  color: var(--plume);
}

.liste-plate li {
  display: flex;
  gap: 1.2rem;
}

.liste-plate li::before {
  content: "";
  flex: none;
  width: 1.4rem;
  height: 1px;
  margin-top: 0.85em;
  background-color: var(--filet);
}

/* --------------------------------------------------------------------------
   10. Schéma des leviers
   L'infographie déborde de la mesure de texte : c'est une pièce à examiner,
   pas une illustration.
   -------------------------------------------------------------------------- */

.schema {
  margin-top: var(--e5);
  margin-inline: auto;
  width: 100%;
  max-width: 92rem;
  border: 1px solid var(--filet);
  border-radius: 2px;
  background-color: var(--blanc);
  padding: var(--e3);
}

.schema img {
  margin-inline: auto;
}

/* --------------------------------------------------------------------------
   11. Citation
   -------------------------------------------------------------------------- */

.citation {
  border-left: 1px solid var(--vert);
  padding-left: var(--e4);
  max-width: 62rem;
}

.citation p {
  font-size: var(--t-xl);
  font-weight: 300;
  line-height: 1.4;
  letter-spacing: -0.012em;
  text-align: left;
}

.citation figcaption {
  margin-top: var(--e3);
  font-size: var(--t-sm);
  color: var(--plume);
}

.citation figcaption .nom {
  display: block;
  color: var(--encre);
  font-weight: 500;
  font-size: var(--t-base);
}

/* --------------------------------------------------------------------------
   12. Réalisations — défilement horizontal natif par scroll-snap.
   Remplace le slider en translateY dont les hauteurs étaient figées en JS.
   -------------------------------------------------------------------------- */

.travaux {
  padding-block: var(--e6);
}

.travaux__entete {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--e3);
  flex-wrap: wrap;
  margin-bottom: var(--e4);
}

/* La piste déborde volontairement de la marge de page à droite :
   une carte coupée au bord signale qu'il y en a d'autres. */
.travaux__piste {
  display: flex;
  gap: var(--e3);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-bottom: var(--e3);
  margin-right: calc(-1 * var(--marge-page));
  scrollbar-width: none;
}

.travaux__piste::-webkit-scrollbar {
  display: none;
}

.travaux__piste::after {
  content: "";
  flex: none;
  width: var(--marge-page);
}

.cas {
  flex: none;
  width: min(42rem, 82vw);
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  padding: var(--e4);
  background-color: var(--blanc);
  border: 1px solid var(--filet);
  border-radius: 2px;
}

/* Le chiffre est le seul élément coloré fort de la page. C'est l'argument
   de vente d'Arcelle : il était noyé en fin de paragraphe dans l'ancienne
   version. */
.cas__gain {
  font-size: 4.8rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--brique);
}

.cas__gain--qualitatif {
  font-size: var(--t-xl);
  color: var(--vert);
  max-width: 14ch;
  line-height: 1.15;
}

.cas__gain-legende {
  margin-top: var(--e1);
  font-size: var(--t-sm);
  color: var(--plume);
  padding-bottom: var(--e3);
  border-bottom: 1px solid var(--filet-clair);
}

.cas__profil {
  margin-top: var(--e3);
  font-weight: 500;
  line-height: 1.4;
}

.cas__texte {
  margin-top: var(--e2);
  font-size: var(--t-sm);
  color: var(--plume);
  line-height: 1.6;
}

.cas__leviers {
  margin-top: var(--e3);
  display: grid;
  gap: var(--e1);
  font-size: var(--t-sm);
  color: var(--plume);
}

.cas__leviers li {
  display: flex;
  gap: 1rem;
}

.cas__leviers li::before {
  content: "";
  flex: none;
  width: 1rem;
  height: 1px;
  margin-top: 0.85em;
  background-color: var(--vert);
}

/* Pagination */
.travaux__nav {
  display: flex;
  gap: 0.8rem;
  align-items: center;
}

.travaux__puce {
  width: 2.4rem;
  height: 2px;
  background-color: var(--filet);
  border-radius: 1px;
  transition: background-color var(--transition);
}

.travaux__puce[aria-current="true"] {
  background-color: var(--encre);
}

.travaux__puce:hover {
  background-color: var(--plume);
}

/* --------------------------------------------------------------------------
   13. Appel à l'action
   -------------------------------------------------------------------------- */

.appel {
  margin-top: var(--e6);
  padding: var(--e6) var(--marge-page);
  background-color: var(--papier-creux);
  border-top: 1px solid var(--filet);
  border-bottom: 1px solid var(--filet);
  text-align: center;
}

.appel h2 {
  max-width: 20ch;
  margin-inline: auto;
}

.appel p {
  margin-top: var(--e3);
  margin-inline: auto;
  max-width: 48ch;
  color: var(--plume);
}

.appel__actions {
  margin-top: var(--e4);
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--e2);
}

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

.pied {
  padding-block: var(--e5);
  border-top: 1px solid var(--filet);
  margin-top: var(--e6);
  /* Voile blanc : détache le pied du réseau qui défile derrière,
     sans le couper franchement du reste de la page. */
  background-color: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.pied__corps {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e4);
  justify-content: space-between;
  align-items: flex-start;
}

.pied__logo img {
  height: 7rem;
  width: auto;
}

.pied__contact {
  display: grid;
  gap: var(--e1);
  font-size: var(--t-sm);
}

.pied__contact a {
  color: var(--plume);
  transition: color var(--transition);
}

.pied__contact a:hover {
  color: var(--vert);
}

.pied__bas {
  margin-top: var(--e5);
  padding-top: var(--e3);
  border-top: 1px solid var(--filet-clair);
  display: flex;
  flex-wrap: wrap;
  gap: var(--e2);
  justify-content: space-between;
  font-size: var(--t-xs);
  color: var(--plume);
}

/* Le lien des mentions légales est un bouton : il ouvre une modale,
   il ne navigue pas. */
.lien-pied {
  font-size: var(--t-xs);
  color: var(--plume);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: var(--filet);
  transition: color var(--transition), text-decoration-color var(--transition);
}

.lien-pied:hover {
  color: var(--encre);
  text-decoration-color: var(--vert);
}

/* Adresses obfusquées — conservé du site d'origine */
.courriel::after {
  content: attr(data-nom) "@" attr(data-domaine) "." attr(data-ext);
}

.telephone::after {
  content: attr(data-n1) " " attr(data-n2) " " attr(data-n3) " " attr(data-n4) " " attr(data-n5);
}

/* --------------------------------------------------------------------------
   15. Modales — <dialog> natif : Échap, piège de focus et fond assurés
   par le navigateur.
   -------------------------------------------------------------------------- */

.modale {
  /* margin: auto rétabli : le reset * { margin: 0 } écrase le centrage
     que le navigateur applique par défaut à un dialog modal. */
  margin: auto;
  width: min(56rem, calc(100vw - 3.2rem));
  max-height: min(84vh, 72rem);
  padding: 0;
  border: 1px solid var(--filet);
  border-radius: 4px;
  background-color: var(--papier);
  color: var(--encre);
  box-shadow: 0 24px 60px -20px rgba(46, 49, 80, 0.3);
  overflow: hidden;
}

.modale::backdrop {
  background-color: rgba(46, 49, 80, 0.45);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.modale[open] {
  animation: modale-entre 0.32s cubic-bezier(0.2, 0.7, 0.2, 1);
}

@keyframes modale-entre {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.modale__tete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e3);
  padding: var(--e3) var(--e4);
  border-bottom: 1px solid var(--filet);
}

.modale__tete h2 {
  font-size: var(--t-xl);
  letter-spacing: -0.012em;
}

.modale__corps {
  padding: var(--e4);
  overflow-y: auto;
  max-height: calc(min(84vh, 72rem) - 8rem);
}

.modale__fermer {
  flex: none;
  width: 3.4rem;
  height: 3.4rem;
  display: grid;
  place-items: center;
  color: var(--plume);
  border-radius: 50%;
  transition: background-color var(--transition), color var(--transition);
}

.modale__fermer:hover {
  background-color: var(--papier-creux);
  color: var(--encre);
}

/* Mentions légales */
.mentions section + section {
  margin-top: var(--e4);
  padding-top: var(--e4);
  border-top: 1px solid var(--filet-clair);
}

.mentions h3 {
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--vert);
  margin-bottom: var(--e2);
}

.mentions dl {
  display: grid;
  gap: 0.6rem;
  font-size: var(--t-sm);
  color: var(--plume);
  line-height: 1.6;
}

.mentions dt {
  color: var(--encre);
}

.mentions dd {
  margin: 0;
}

.mentions a {
  color: var(--ardoise);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: var(--filet);
}

.mentions a:hover {
  text-decoration-color: var(--vert);
}

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

.form__intro {
  font-size: var(--t-sm);
  color: var(--plume);
  margin-bottom: var(--e4);
}

.champ {
  display: grid;
  gap: 0.6rem;
  margin-bottom: var(--e3);
}

.champ label {
  font-size: var(--t-sm);
  font-weight: 500;
}

.champ .facultatif {
  color: var(--plume);
  font-weight: 300;
}

.champ input,
.champ textarea {
  font: inherit;
  font-size: var(--t-sm);
  color: var(--encre);
  background-color: var(--blanc);
  border: 1px solid var(--filet);
  border-radius: 2px;
  padding: 1.1rem 1.4rem;
  width: 100%;
  transition: border-color var(--transition), box-shadow var(--transition);
}

.champ textarea {
  resize: vertical;
  min-height: 12rem;
  line-height: 1.55;
}

.champ input:hover,
.champ textarea:hover {
  border-color: var(--plume);
}

.champ input:focus,
.champ textarea:focus {
  outline: none;
  border-color: var(--vert);
  box-shadow: 0 0 0 3px var(--vert-clair);
}

.champ.est-fautif input,
.champ.est-fautif textarea {
  border-color: var(--brique);
}

.champ.est-fautif input:focus,
.champ.est-fautif textarea:focus {
  box-shadow: 0 0 0 3px rgba(197, 47, 56, 0.12);
}

.champ__erreur {
  font-size: var(--t-xs);
  color: var(--brique);
  min-height: 1.6rem;
}

/* Pot de miel : hors écran plutôt que display:none, que les robots
   savent détecter. Jamais atteint au clavier ni annoncé aux lecteurs. */
.pot-de-miel {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form__pied {
  display: flex;
  align-items: center;
  gap: var(--e3);
  flex-wrap: wrap;
  margin-top: var(--e4);
  padding-top: var(--e3);
  border-top: 1px solid var(--filet-clair);
}

.form__etat {
  font-size: var(--t-sm);
  line-height: 1.5;
}

.form__etat[data-ton="erreur"] {
  color: var(--brique);
}

.form__etat[data-ton="succes"] {
  color: var(--vert);
}

.bouton[aria-busy="true"] {
  opacity: 0.6;
  pointer-events: none;
}

/* Message de confirmation qui remplace le formulaire */
.form__merci {
  text-align: center;
  padding: var(--e4) 0 var(--e2);
}

.form__merci h3 {
  font-size: var(--t-xl);
  margin-bottom: var(--e2);
}

.form__merci p {
  color: var(--plume);
  font-size: var(--t-sm);
  max-width: 38ch;
  margin-inline: auto;
}

/* --------------------------------------------------------------------------
   16. Retour en haut
   -------------------------------------------------------------------------- */

.remonter {
  position: fixed;
  right: var(--marge-page);
  bottom: var(--marge-page);
  z-index: 40;
  width: 4rem;
  height: 4rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background-color: var(--blanc);
  color: var(--encre);
  box-shadow: 0 1px 2px rgba(46, 49, 80, 0.08), 0 0 0 1px var(--filet);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity var(--transition), visibility var(--transition),
    transform var(--transition), color var(--transition);
}

.remonter.est-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.remonter:hover {
  color: var(--vert);
}

/* --------------------------------------------------------------------------
   17. Mouvement
   Une seule séquence orchestrée au chargement du hero, et des révélations
   sobres au défilement. Rien ne bloque la lecture.
   -------------------------------------------------------------------------- */

@keyframes leve {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.hero__titre,
.hero__accroche,
.hero__actions {
  animation: leve 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
}

.hero__accroche {
  animation-delay: 0.1s;
}

.hero__actions {
  animation-delay: 0.2s;
}

/* La révélation n'est armée que si le script tourne : sans JS, ou s'il
   échoue, le contenu reste visible au lieu de disparaître. */
.js .revele {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.7s ease-out, transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.js .revele.est-vu {
  opacity: 1;
  transform: none;
}

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

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .js .revele {
    opacity: 1;
    transform: none;
  }

  .travaux__piste {
    scroll-behavior: auto;
  }

  .reseau {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   18. Utilitaires
   -------------------------------------------------------------------------- */

.hors-ecran {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.saut-contenu {
  position: absolute;
  top: -100%;
  left: var(--marge-page);
  z-index: 100;
  padding: 1rem 1.6rem;
  background-color: var(--encre);
  color: var(--blanc);
  font-size: var(--t-sm);
  border-radius: 0 0 2px 2px;
  transition: top var(--transition);
}

.saut-contenu:focus {
  top: 0;
}