/* ==========================================================================
   Aménagement de l'Est
   Direction : le site est lui-même un pavage. L'identité visuelle est bâtie
   sur les calepinages du métier (bâtons rompus, épi, opus incertum, écailles)
   plutôt que sur de la photographie.

   Charte reprise du flyer, prélevée au pixel :
     vert       #06A77D
     marine     #264D70
     vert pomme #98D058  (logo uniquement)
     anthracite #384040  (logo)
   ========================================================================== */

@import url("fonts.css");

/* --------------------------------------------------------------------------
   1. Socle
   -------------------------------------------------------------------------- */
:root {
  /* Marque. --vert est le vert exact du flyer, gardé pour tout ce qui est
     décoratif. --vert-lisible est la même teinte assombrie : le blanc sur
     #06a77d ne donne que 3.07:1, sous le minimum AA de 4.5:1. */
  --vert: #06a77d;
  --vert-lisible: #05815f;
  --vert-vif: #0bc492;
  --pomme: #98d058;

  --marine: #264d70;
  --marine-2: #1b3a56;
  --marine-3: #142b40;
  --marine-4: #0d1d2c;

  /* Neutres tirés du marine, jamais de gris pur */
  --papier: #f7f6f3;
  --papier-2: #eeece6;
  --encre: #16222c;
  --encre-2: #4d5f6d;

  --sable: #cbb9a3;
  --sable-2: #a89478;

  /* Un seul rayon sur tout le site : le pavé a des angles nets */
  --r: 3px;

  --largeur: 1280px;
  --gouttiere: clamp(1.25rem, 4vw, 2.5rem);
  --chapitre: clamp(3.25rem, 5.2vw, 5.25rem);

  --sortie: cubic-bezier(0.16, 1, 0.3, 1);
  --t: 260ms var(--sortie);

  color-scheme: light;
}

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

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

body {
  margin: 0;
  background: var(--papier);
  color: var(--encre);
  font-family: "Barlow", "Helvetica Neue", Arial, sans-serif;
  font-size: clamp(1rem, 0.97rem + 0.2vw, 1.125rem);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img {
  max-width: 100%;
  /* sans height:auto, les attributs width/height du HTML écrasent le ratio
     dès qu'une largeur est imposée en CSS (le logo du pied s'étirait). */
  height: auto;
  display: block;
}

picture {
  display: block;
}

a {
  color: inherit;
}

::selection {
  background: var(--vert);
  color: #fff;
}

/* --------------------------------------------------------------------------
   2. Typographie
   -------------------------------------------------------------------------- */
h1,
h2,
h3,
.display {
  font-family: "Oswald", "Barlow Condensed", Impact, sans-serif;
  font-weight: 700;
  margin: 0;
  text-transform: uppercase;
  font-style: italic; /* l'oblique du flyer */
  line-height: 0.96;
  letter-spacing: -0.005em;
  text-wrap: balance;
  padding-bottom: 0.08em; /* garde pour les jambages en italique */
}

/* Le titre du hero doit couler à l'horizontale, jamais en colonne étroite */
h1 {
  font-size: clamp(2.9rem, 8.2vw, 8.5rem);
}

h2 {
  font-size: clamp(1.85rem, 3.3vw, 3rem);
  /* la mesure doit être posée sur le titre lui-même : en `ch` sur un
     conteneur, elle se calcule avec la police du corps de texte et
     étrangle le titre sur cinq lignes. */
  max-width: 15ch;
}

h3 {
  font-size: clamp(1.1rem, 1.25vw, 1.32rem);
  line-height: 1.1;
  letter-spacing: 0.005em;
}

p {
  margin: 0 0 1.1rem;
  max-width: 62ch;
}

.mot-vert {
  color: var(--vert-lisible);
}

.sur-fonce .mot-vert {
  color: var(--vert-vif);
}

/* --------------------------------------------------------------------------
   3. Structure
   -------------------------------------------------------------------------- */
.enveloppe {
  width: 100%;
  max-width: var(--largeur);
  margin-inline: auto;
  padding-inline: var(--gouttiere);
}

.enveloppe--large {
  max-width: 1600px;
}

.chapitre {
  padding-block: var(--chapitre);
  position: relative;
}

.sur-fonce {
  background: var(--marine-3);
  color: #fff;
}

.sur-fonce h2,
.sur-fonce h3 {
  color: #fff;
}

.evite {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--marine-3);
  color: #fff;
  padding: 0.85rem 1.4rem;
  border-radius: var(--r);
  font-weight: 600;
}

.evite:focus {
  left: 1rem;
  top: 1rem;
}

:where(a, button, input, select, textarea, summary):focus-visible {
  outline: 3px solid var(--vert-lisible);
  outline-offset: 3px;
  border-radius: var(--r);
}

.sur-fonce :focus-visible,
.entete :focus-visible {
  outline-color: var(--vert-vif);
}

.ico {
  width: 1.5em;
  height: 1.5em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}

/* En-tête de section sur deux colonnes : titre à gauche, introduction à
   droite. Empilés, ils laissaient une grande zone vide et repoussaient le
   contenu d'une hauteur d'écran. */
.tete {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1rem clamp(1.5rem, 4vw, 3.5rem);
  align-items: end;
  margin-bottom: clamp(1.5rem, 2.6vw, 2.25rem);
}

.tete > .chapo {
  margin: 0 0 0.35rem;
  max-width: 44ch;
}

.titre-chapitre {
  max-width: none;
}

@media (max-width: 820px) {
  .tete {
    grid-template-columns: 1fr;
    align-items: start;
    gap: 0.75rem;
  }

  .tete > .chapo {
    margin-bottom: 0;
  }
}

.filet {
  display: block;
  width: 54px;
  height: 5px;
  background: var(--vert);
  margin-bottom: 1rem;
}

.chapo {
  max-width: 46ch;
  font-size: clamp(1rem, 1.05vw, 1.12rem);
  color: var(--encre-2);
  margin-top: 1rem;
}

/* Toute section posée sur un fond sombre reprend le texte clair : sur le
   marine, le gris de lecture ne donnait que 2,19:1. */
.sur-fonce .chapo,
.calepinages .chapo,
.contact .chapo,
.preuves .chapo {
  color: #b9cadb;
}

/* --------------------------------------------------------------------------
   3 bis. Matière : grain de papier, trames, jonctions en biseau
   -------------------------------------------------------------------------- */

/* Un grain très léger sur toute la page : le papier uni paraissait plat.
   Posé sur un pseudo-élément fixe et non cliquable, il ne coûte rien au
   défilement (aucun repaint sur les conteneurs qui bougent). */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 400;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}

/* Trame de calepinage en filigrane derrière une section claire. */
.trame-fond {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.55;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 42%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 42%, transparent 100%);
}

.chapitre > .enveloppe {
  position: relative;
  z-index: 1;
}

/* Jonction en biseau entre deux sections, dans l'esprit des coupes
   obliques du flyer. `--de` est la couleur du dessus, `--vers` celle
   du dessous. */
.jonction {
  position: relative;
  height: clamp(32px, 4.6vw, 84px);
  background: var(--de, var(--papier));
  overflow: hidden;
}

.jonction::after {
  content: "";
  position: absolute;
  inset: -1px 0 0;
  background: var(--vers, var(--marine-3));
  clip-path: polygon(0 100%, 100% 0, 100% 100%);
}

/* sens inverse, pour ne pas répéter la même pente sur toute la page */
.jonction--gauche::after {
  clip-path: polygon(0 0, 100% 100%, 0 100%);
}

/* un liseré vert souligne la coupe, comme les chevrons du flyer */
.jonction--filet::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: var(--vert);
  z-index: 1;
}

/* --------------------------------------------------------------------------
   4. Boutons
   -------------------------------------------------------------------------- */
.btn {
  --fond: var(--vert-lisible);
  --texte: #fff;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  white-space: nowrap;
  font-family: "Barlow", sans-serif;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.015em;
  line-height: 1;
  padding: 1.05rem 1.9rem;
  min-height: 52px;
  border: 2px solid transparent;
  border-radius: var(--r);
  background: var(--fond);
  color: var(--texte);
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  transition: transform var(--t), box-shadow var(--t), background-color var(--t),
    color var(--t), border-color var(--t);
}

/* le remplissage monte comme un pavé qu'on pose */
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--marine-3);
  transform: translateY(101%);
  transition: transform 420ms var(--sortie);
}

.btn:hover::before {
  transform: translateY(0);
}

.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(5, 129, 95, 0.28);
}

.btn:active {
  transform: translateY(0);
}

.btn--fantome {
  --fond: transparent;
  --texte: var(--encre);
  border-color: currentColor;
}

.btn--fantome::before {
  background: var(--encre);
}

.btn--fantome:hover {
  color: var(--papier);
  box-shadow: none;
}

.btn--clair {
  --fond: transparent;
  --texte: #fff;
  border-color: rgba(255, 255, 255, 0.42);
}

.btn--clair::before {
  background: #fff;
}

.btn--clair:hover {
  color: var(--marine-3);
  border-color: #fff;
  box-shadow: none;
}

.btn .ico {
  width: 1.1em;
  height: 1.1em;
  transition: transform var(--t);
}

.btn:hover .ico {
  transform: translateX(3px);
}

/* --------------------------------------------------------------------------
   5. En-tête : pile flottante
   -------------------------------------------------------------------------- */
.entete {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 90;
  padding: clamp(0.7rem, 1.6vw, 1.15rem) var(--gouttiere);
  transition: transform 420ms var(--sortie);
}

.entete[data-cachee="true"] {
  transform: translateY(-118%);
}

.entete__pile {
  max-width: var(--largeur);
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: 1.25rem;
  height: 64px;
  padding: 0 0.55rem 0 1.15rem;
  border-radius: var(--r);
  background: rgba(247, 246, 243, 0.82);
  border: 1px solid rgba(22, 34, 44, 0.1);
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  box-shadow: 0 1px 2px rgba(22, 34, 44, 0.05);
  transition: background-color var(--t), box-shadow var(--t), border-color var(--t);
}

.entete[data-posee="true"] .entete__pile {
  background: rgba(247, 246, 243, 0.94);
  box-shadow: 0 10px 34px rgba(22, 34, 44, 0.13);
}

@media (prefers-reduced-transparency: reduce) {
  .entete__pile {
    background: var(--papier);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

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

.entete__logo img {
  height: 42px;
  width: auto;
}

.menu {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: clamp(0.5rem, 1.6vw, 1.7rem);
}

.menu__lien {
  position: relative;
  font-weight: 500;
  font-size: 0.98rem;
  text-decoration: none;
  color: var(--encre);
  padding: 0.5rem 0;
  white-space: nowrap;
  transition: color var(--t);
}

/* le soulignement se pose depuis la gauche */
.menu__lien::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0.15rem;
  width: 100%;
  height: 2px;
  background: var(--vert-lisible);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 320ms var(--sortie);
}

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

.menu__lien:hover::after {
  transform: scaleX(1);
}

/* Le bouton logé dans le menu ne sert qu'à la version repliée :
   en grand écran c'est celui de la barre d'actions qui s'affiche. */
.menu > .btn {
  display: none;
}

.entete__actions {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex: none;
}

.tel-entete {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  height: 46px;
  padding-inline: 0.85rem;
  border-radius: var(--r);
  font-weight: 600;
  font-size: 0.98rem;
  text-decoration: none;
  color: var(--marine);
  white-space: nowrap;
  transition: background-color var(--t), color var(--t);
}

.tel-entete:hover {
  background: rgba(38, 77, 112, 0.09);
}

.entete .btn {
  min-height: 46px;
  padding: 0.8rem 1.3rem;
  font-size: 0.95rem;
}

.hamburger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  padding: 0;
  background: transparent;
  border: 1px solid rgba(22, 34, 44, 0.2);
  border-radius: var(--r);
  color: var(--encre);
  cursor: pointer;
}

.hamburger .ico {
  width: 1.55rem;
  height: 1.55rem;
}

.hamburger__fermer {
  display: none;
}

.hamburger[aria-expanded="true"] .hamburger__ouvrir {
  display: none;
}

.hamburger[aria-expanded="true"] .hamburger__fermer {
  display: block;
}

@media (max-width: 1080px) {
  .hamburger {
    display: inline-flex;
  }

  .entete .btn--entete {
    display: none;
  }

  .menu {
    position: absolute;
    top: calc(100% + 0.5rem);
    left: var(--gouttiere);
    right: var(--gouttiere);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0.6rem 1.15rem 1.35rem;
    border-radius: var(--r);
    background: var(--papier);
    border: 1px solid rgba(22, 34, 44, 0.12);
    box-shadow: 0 22px 60px rgba(22, 34, 44, 0.2);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity var(--t), transform var(--t), visibility var(--t);
  }

  .menu[data-ouvert="true"] {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  .menu__lien {
    padding: 1rem 0;
    font-size: 1.1rem;
    border-bottom: 1px solid rgba(22, 34, 44, 0.1);
  }

  .menu__lien::after {
    display: none;
  }

  .menu > .btn {
    display: inline-flex;
    margin-top: 1.1rem;
  }

  .tel-entete span {
    display: none;
  }

  .tel-entete {
    width: 46px;
    justify-content: center;
    padding-inline: 0;
    border: 1px solid rgba(22, 34, 44, 0.2);
  }
}

/* --------------------------------------------------------------------------
   6. Hero : un mur de pavés qui se pose
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  background: var(--marine-4);
  color: #fff;
  overflow: hidden;
  padding-block: clamp(7rem, 14vh, 10rem) clamp(3rem, 8vh, 5rem);
}

/* La trame de pavés, remplie par le script.
   width/height explicites : dans un conteneur flex, un enfant absolu
   sans contenu se réduit à zéro et le mur ne se construit jamais. */
.mur {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  overflow: hidden;
}

.mur__pave {
  position: absolute;
  border-radius: 1px;
  background: var(--marine-2);
  will-change: transform, opacity;
}

/* voile qui garantit la lisibilité du titre par-dessus la trame */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(
      120% 90% at 18% 45%,
      rgba(13, 29, 44, 0.94) 0%,
      rgba(13, 29, 44, 0.82) 38%,
      rgba(13, 29, 44, 0.42) 70%,
      rgba(13, 29, 44, 0.24) 100%
    );
}

.hero__contenu {
  position: relative;
  z-index: 2;
  width: 100%;
}

.hero h1 {
  max-width: 15ch; /* large : le titre coule à l'horizontale, 2 à 3 lignes */
  color: #fff;
}

.hero h1 .ligne {
  display: block;
  overflow: hidden;
  padding-bottom: 0.06em;
}

.hero h1 .ligne > span {
  display: block;
}

.hero__socle {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: clamp(1.5rem, 4vw, 4rem);
  margin-top: clamp(1.8rem, 3.5vw, 2.8rem);
}

.hero__accroche {
  font-size: clamp(1.05rem, 1.35vw, 1.3rem);
  color: #c2d3e2;
  max-width: 34ch;
  margin: 0;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
}

/* les chevrons du flyer, en signature discrète */
.chevrons {
  height: 26px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 40'%3E%3Cpath d='M4 4 L21 20 L4 36' fill='none' stroke='%2306a77d' stroke-width='8' stroke-linecap='square'/%3E%3C/svg%3E");
  background-size: auto 100%;
  background-repeat: repeat-x;
  width: 132px;
}

.hero .chevrons {
  margin-bottom: 1.6rem;
}

.chevrons--blanc {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 40'%3E%3Cpath d='M4 4 L21 20 L4 36' fill='none' stroke='%23ffffff' stroke-width='8' stroke-linecap='square' opacity='.3'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------------------
   7. Bandeau des engagements
   -------------------------------------------------------------------------- */
.engagements {
  background: var(--vert-lisible);
  color: #fff;
  position: relative;
  z-index: 3;
}

.engagements__liste {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  list-style: none;
  margin: 0;
  padding: 0;
}

.engagements li {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 1.15rem 1.35rem;
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.32;
  border-left: 1px solid rgba(255, 255, 255, 0.22);
}

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

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

.engagements .ico {
  width: 1.7rem;
  height: 1.7rem;
  opacity: 0.92;
}

@media (max-width: 900px) {
  .engagements__liste {
    grid-template-columns: repeat(2, 1fr);
  }

  .engagements li {
    padding: 1.15rem 1.1rem;
    font-size: 0.95rem;
  }

  .engagements li:nth-child(odd) {
    border-left: 0;
    padding-left: 0;
  }

  .engagements li:nth-child(-n + 2) {
    border-bottom: 1px solid rgba(255, 255, 255, 0.22);
  }
}

@media (max-width: 540px) {
  .engagements__liste {
    grid-template-columns: 1fr;
  }

  .engagements li {
    border-left: 0;
    padding-inline: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.22);
  }

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

/* --------------------------------------------------------------------------
   7 bis. Ancienneté : le premier argument, juste sous le titre
   -------------------------------------------------------------------------- */
.anciennete {
  position: relative;
  background: var(--papier);
  padding-block: clamp(2rem, 3.6vw, 3.25rem);
  overflow: hidden;
}

.anciennete__jeu {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(1rem, 3vw, 2.75rem);
}

.anciennete__compte {
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
  margin: 0;
  flex: none;
  color: var(--vert-lisible);
}

.anciennete__chiffre {
  font-family: "Oswald", sans-serif;
  font-style: italic;
  font-weight: 700;
  font-size: clamp(4.5rem, 11vw, 9rem);
  line-height: 0.82;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.anciennete__unite {
  font-family: "Oswald", sans-serif;
  font-style: italic;
  font-weight: 600;
  text-transform: uppercase;
  font-size: clamp(1.35rem, 2.4vw, 2.15rem);
  line-height: 1;
}

/* un filet vert sépare le nombre du texte, comme les filets de section */
.anciennete__dire {
  flex: 1 1 22rem;
  padding-left: clamp(1rem, 2.5vw, 2rem);
  border-left: 4px solid var(--vert);
}

.anciennete__titre {
  margin: 0 0 0.5rem;
  max-width: none;
  font-family: "Oswald", sans-serif;
  font-style: italic;
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(1.5rem, 2.9vw, 2.5rem);
  line-height: 1.02;
  letter-spacing: -0.005em;
  color: var(--encre);
  padding-bottom: 0.06em;
}

.anciennete__note {
  margin: 0;
  max-width: 54ch;
  font-size: clamp(0.98rem, 1.05vw, 1.1rem);
  color: var(--encre-2);
}

@media (max-width: 620px) {
  .anciennete__dire {
    flex-basis: 100%;
    padding-left: 0;
    padding-top: 1rem;
    border-left: 0;
    border-top: 4px solid var(--vert);
  }
}

/* --------------------------------------------------------------------------
   8. Manifeste : les mots s'allument au défilement
   -------------------------------------------------------------------------- */
.manifeste {
  background: var(--papier);
}

.manifeste__texte {
  font-family: "Oswald", sans-serif;
  font-weight: 500;
  font-style: italic;
  text-transform: uppercase;
  font-size: clamp(1.45rem, 3vw, 2.5rem);
  line-height: 1.18;
  max-width: 30ch;
  margin: 0;
}

.manifeste__texte .m {
  color: rgba(22, 34, 44, 0.15);
  transition: color 120ms linear;
}

.manifeste__texte .m[data-allume="true"] {
  color: var(--encre);
}

.manifeste__texte .m--vert[data-allume="true"] {
  color: var(--vert-lisible);
}

/* --------------------------------------------------------------------------
   9. Prestations : grille dense, aucune cellule vide
   -------------------------------------------------------------------------- */
.prestations {
  background: var(--papier-2);
}

.grille-prestations {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-flow: dense;
  gap: 0.85rem;
}

.presta {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 205px;
  padding: 1.5rem;
  border-radius: var(--r);
  background: var(--papier);
  border: 1px solid rgba(22, 34, 44, 0.09);
  overflow: hidden;
  transition: transform 420ms var(--sortie), box-shadow 420ms var(--sortie);
}

.presta:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 46px rgba(22, 34, 44, 0.14);
}

/* chaque prestation porte son propre calepinage, dessiné par le JS */
.presta__trame {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0.5;
  transition: opacity 420ms var(--sortie), transform 620ms var(--sortie);
}

.presta:hover .presta__trame {
  opacity: 0.78;
  transform: scale(1.04);
}

.presta > *:not(.presta__trame) {
  position: relative;
  z-index: 1;
}

.presta__ico {
  width: 2.15rem;
  height: 2.15rem;
  color: var(--vert-lisible);
  margin-bottom: auto;
}

.presta h3 {
  margin-bottom: 0.55rem;
}

.presta p {
  margin: 0;
  font-size: 0.98rem;
  color: var(--encre-2);
  max-width: 40ch;
}

/* A : la prestation phare, 4 colonnes sur 2 rangées */
.presta--phare {
  grid-column: span 4;
  grid-row: span 2;
  min-height: 400px;
  background: var(--marine-3);
  border-color: transparent;
  padding: 2rem;
}

.presta--phare h3 {
  font-size: clamp(1.45rem, 2.1vw, 2.05rem);
  color: #fff;
}

.presta--phare p {
  color: #b9cadb;
  font-size: 1.06rem;
  max-width: 46ch;
}

.presta--phare .presta__ico {
  color: var(--vert-vif);
  width: 2.5rem;
  height: 2.5rem;
}

/* B et C : la colonne de droite */
.presta--colonne {
  grid-column: span 2;
}

/* D en vert, E en clair : la rangée du bas */
.presta--moitie {
  grid-column: span 3;
  min-height: 225px;
}

.presta--vert {
  background: var(--vert-lisible);
  border-color: transparent;
}

.presta--vert h3 {
  color: #fff;
}

.presta--vert p {
  color: rgba(255, 255, 255, 0.94);
}

.presta--vert .presta__ico {
  color: #fff;
}

@media (max-width: 1000px) {
  .grille-prestations {
    grid-template-columns: repeat(2, 1fr);
  }

  .presta--phare {
    grid-column: span 2;
    grid-row: auto;
    min-height: 360px;
  }

  .presta--colonne,
  .presta--moitie {
    grid-column: span 1;
  }
}

@media (max-width: 640px) {
  .grille-prestations {
    grid-template-columns: 1fr;
  }

  .presta--phare,
  .presta--colonne,
  .presta--moitie {
    grid-column: span 1;
  }

  .presta--phare {
    min-height: 320px;
  }
}

/* --------------------------------------------------------------------------
   10. Calepinages : le visiteur choisit son appareillage
   -------------------------------------------------------------------------- */
.calepinages {
  background: var(--marine-3);
  color: #fff;
  overflow: hidden;
}

.calepinages__jeu {
  display: grid;
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  gap: clamp(1.25rem, 2.5vw, 2.25rem);
  align-items: start;
}

.choix {
  display: grid;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.choix__btn {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.95rem;
  padding: 0.95rem 1.15rem;
  min-height: 60px;
  text-align: left;
  font-family: "Barlow", sans-serif;
  font-size: 1.02rem;
  font-weight: 600;
  color: #fff;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--r);
  cursor: pointer;
  transition: background-color var(--t), border-color var(--t), transform var(--t);
}

.choix__btn:hover {
  background: rgba(255, 255, 255, 0.1);
  transform: translateX(4px);
}

.choix__btn[aria-selected="true"] {
  background: var(--vert-lisible);
  border-color: var(--vert-vif);
}

/* vignette du motif, dessinée par le JS */
.choix__vignette {
  width: 46px;
  height: 34px;
  flex: none;
  border-radius: 2px;
  overflow: hidden;
  background: var(--marine-4);
}

.choix__nom {
  display: block;
}

.choix__note {
  display: block;
  font-weight: 400;
  font-size: 0.86rem;
  color: #a9bccd;
  margin-top: 0.1rem;
}

.choix__btn[aria-selected="true"] .choix__note {
  color: rgba(255, 255, 255, 0.86);
}

.scene {
  position: relative;
  /* width explicite : sans elle, le min-height combiné à l'aspect-ratio
     repousse la largeur bien au-delà de la colonne sur petit écran. */
  width: 100%;
  border-radius: var(--r);
  overflow: hidden;
  background: var(--marine-4);
  border: 1px solid rgba(255, 255, 255, 0.1);
  aspect-ratio: 16 / 11;
  min-height: 320px;
}

.scene__toile {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.scene__legende {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 1.5rem 1.6rem 1.35rem;
  background: linear-gradient(to top, rgba(13, 29, 44, 0.95), rgba(13, 29, 44, 0));
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
}

.scene__nom {
  font-family: "Oswald", sans-serif;
  font-style: italic;
  font-weight: 600;
  text-transform: uppercase;
  font-size: clamp(1.25rem, 2vw, 1.75rem);
  line-height: 1;
  color: #fff;
}

.scene__desc {
  font-size: 0.96rem;
  color: #b9cadb;
  margin: 0.35rem 0 0;
  max-width: 44ch;
}

@media (max-width: 900px) {
  .calepinages__jeu {
    grid-template-columns: 1fr;
  }

  .choix {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-flow: row;
  }
}

@media (max-width: 520px) {
  .choix {
    grid-template-columns: 1fr;
  }
}

/* --------------------------------------------------------------------------
   11. La coupe de sol : section épinglée, les couches s'empilent
   -------------------------------------------------------------------------- */
.coupe {
  background: var(--papier);
}

.coupe__scene {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
  gap: clamp(1.75rem, 3.5vw, 3rem);
  align-items: center;
}

.coupe__texte {
  position: relative;
  z-index: 1;
}

.coupe__liste {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  display: grid;
  gap: 0;
}

.coupe__item {
  display: grid;
  grid-template-columns: 13px 1fr;
  gap: 0.85rem;
  align-items: start;
  padding: 0.7rem 0.6rem 0.7rem 0;
  border-top: 1px solid rgba(22, 34, 44, 0.13);
  opacity: 0.42;
  cursor: default;
  border-radius: var(--r);
  transition: opacity 280ms var(--sortie), background-color 280ms var(--sortie);
}

.coupe__item[data-actif="true"] {
  opacity: 1;
}

/* survoler une ligne met sa couche en avant dans le dessin */
.coupe__item[data-actif="true"]:hover,
.coupe__item[data-vise="true"] {
  background: rgba(6, 167, 125, 0.09);
}

.coupe__puce {
  width: 13px;
  height: 13px;
  margin-top: 0.4rem;
  border-radius: 2px;
  background: var(--puce, var(--sable));
  /* liseré : la puce sable serait sinon presque invisible sur le papier */
  box-shadow: inset 0 0 0 1px rgba(22, 34, 44, 0.25);
}

.coupe__item strong {
  display: block;
  font-family: "Oswald", sans-serif;
  font-style: italic;
  text-transform: uppercase;
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.coupe__item span {
  font-size: 0.94rem;
  line-height: 1.5;
  color: var(--encre-2);
}

/* le dessin de la coupe */
.coupe__dessin {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3.15;
  border-radius: var(--r);
  overflow: hidden;
  background: linear-gradient(180deg, #cfe0ef 0%, #e6eef5 42%, #f2f4f2 100%);
  border: 1px solid rgba(22, 34, 44, 0.12);
}

.couche {
  position: absolute;
  left: 0;
  right: 0;
  will-change: transform;
  transition: filter 280ms var(--sortie);
}

.coupe__dessin[data-vise] .couche {
  filter: saturate(0.45) brightness(1.06);
}

.coupe__dessin[data-vise] .couche[data-vise="true"] {
  filter: none;
}

.couche__etiquette {
  position: absolute;
  right: 0.7rem;
  top: 50%;
  transform: translateY(-50%);
  padding: 0.1rem 0.45rem;
  border-radius: 2px;
  font-size: 0.72rem;
  line-height: 1.3;
  font-weight: 600;
  letter-spacing: 0.02em;
  /* pastille sombre plutôt qu'une ombre portée : la lisibilité ne dépend
     plus de la teinte de la couche sous l'étiquette. */
  color: #fff;
  background: rgba(13, 29, 44, 0.72);
  pointer-events: none;
  white-space: nowrap;
}

.couche__etiquette--sombre {
  color: #fff;
}

@media (max-width: 900px) {
  .coupe__scene {
    grid-template-columns: 1fr;
    min-height: 0;
    gap: 2.5rem;
  }

  .coupe__dessin {
    order: -1;
  }
}

/* --------------------------------------------------------------------------
   11 bis. Les deux photos de chantier, en grand, juste sous le hero
   -------------------------------------------------------------------------- */
.chantiers {
  background: var(--papier);
  padding-block: clamp(1.75rem, 3vw, 2.75rem);
}

.chantiers__grille {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(0.85rem, 1.6vw, 1.35rem);
  align-items: start;
}

.vue {
  margin: 0;
}

.vue__cadre {
  overflow: hidden;
  border-radius: var(--r);
  background: var(--papier-2);
}

/* ni ratio imposé ni zoom : les photos sont montrées entières */
.vue__cadre {
  transition: box-shadow 320ms var(--sortie);
}

.vue:hover .vue__cadre {
  box-shadow: 0 14px 34px rgba(22, 34, 44, 0.16);
}

.vue__cadre img {
  width: 100%;
}

.vue figcaption {
  margin-top: 0.7rem;
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  flex-wrap: wrap;
  font-size: 0.94rem;
  color: var(--encre-2);
}

.vue figcaption strong {
  font-family: "Oswald", sans-serif;
  font-style: italic;
  text-transform: uppercase;
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--encre);
}

@media (max-width: 720px) {
  .chantiers__grille {
    grid-template-columns: 1fr;
  }
}

/* --------------------------------------------------------------------------
   13. Déroulement du chantier
   -------------------------------------------------------------------------- */
.etapes {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.4rem;
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
}

.etapes::before {
  content: "";
  position: absolute;
  top: 26px;
  left: 26px;
  right: 26px;
  height: 2px;
  background: rgba(22, 34, 44, 0.14);
}

.etape {
  position: relative;
}

.etape__jeton {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: var(--r);
  background: var(--vert-lisible);
  color: #fff;
  margin-bottom: 1.25rem;
}

.etape__jeton .ico {
  width: 1.6rem;
  height: 1.6rem;
}

.etape h3 {
  margin-bottom: 0.5rem;
}

.etape p {
  margin: 0;
  font-size: 0.98rem;
  color: var(--encre-2);
}

@media (max-width: 900px) {
  .etapes {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .etapes::before {
    top: 26px;
    bottom: 40px;
    left: 25px;
    right: auto;
    width: 2px;
    height: auto;
  }

  .etape {
    display: grid;
    grid-template-columns: 52px 1fr;
    gap: 0.4rem 1.25rem;
    padding-bottom: 2.25rem;
  }

  .etape__jeton {
    margin-bottom: 0;
  }

  /* le titre et le texte partagent la seconde colonne : sans ça, le
     paragraphe retombe sous le jeton, dans une colonne de 52px. */
  .etape > h3,
  .etape > p {
    grid-column: 2;
  }
}

/* --------------------------------------------------------------------------
   13 bis. Rendus : liste de matières à gauche, vitrine à droite
   -------------------------------------------------------------------------- */
.rendus {
  background: var(--papier-2);
}

.rendus__jeu {
  display: grid;
  grid-template-columns: minmax(0, 290px) minmax(0, 620px);
  justify-content: start;
  gap: clamp(1.25rem, 2.5vw, 2rem);
  align-items: start;
}

.matieres {
  display: grid;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.matiere {
  width: 100%;
  display: block;
  text-align: left;
  padding: 0.85rem 1.1rem;
  min-height: 58px;
  font-family: "Barlow", sans-serif;
  color: var(--encre);
  background: var(--papier);
  border: 1px solid rgba(22, 34, 44, 0.11);
  border-left: 3px solid transparent;
  border-radius: var(--r);
  cursor: pointer;
  transition: background-color var(--t), border-color var(--t), transform var(--t);
}

.matiere:hover {
  transform: translateX(4px);
  border-left-color: var(--vert);
}

.matiere[aria-selected="true"] {
  background: var(--marine-3);
  border-color: var(--marine-3);
  border-left-color: var(--vert);
  color: #fff;
}

.matiere__nom {
  display: block;
  font-family: "Oswald", sans-serif;
  font-style: italic;
  text-transform: uppercase;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.matiere__note {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.88rem;
  color: var(--encre-2);
}

.matiere[aria-selected="true"] .matiere__note {
  color: #b9cadb;
}

/* La vitrine : hauteur stable, image toujours entière */
.vitrine {
  position: relative;
  width: 100%;
  border-radius: var(--r);
  overflow: hidden;
  background: var(--papier);
  border: 1px solid rgba(22, 34, 44, 0.11);
  /* hauteur bornée : le but de la vitrine est de tenir moins de place que
     quatre images alignées, pas davantage. */
  height: clamp(250px, 30vw, 390px);
}

.vitrine__fond {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0.9;
}

.vitrine__scene {
  position: absolute;
  inset: 0;
  z-index: 1;
  padding: clamp(0.5rem, 1.2vw, 0.9rem);
}

/* les quatre vues sont empilées et préchargées : le survol ne provoque
   ni saut de mise en page ni temps de chargement. */
.vitrine__vue {
  position: absolute;
  inset: clamp(0.5rem, 1.2vw, 0.9rem);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(1.015);
  transition: opacity 320ms var(--sortie), transform 460ms var(--sortie);
  pointer-events: none;
}

.vitrine__vue[data-actif="true"] {
  opacity: 1;
  transform: none;
}

/* contain : l'image reste entière, quel que soit son format */
.vitrine__vue img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 2px;
  box-shadow: 0 6px 22px rgba(22, 34, 44, 0.18);
}

@media (max-width: 860px) {
  .rendus__jeu {
    grid-template-columns: 1fr;
    justify-content: stretch;
  }

  .matieres {
    grid-template-columns: repeat(2, 1fr);
  }

  .vitrine {
    height: clamp(230px, 52vw, 340px);
  }
}

@media (max-width: 520px) {
  .matieres {
    grid-template-columns: 1fr;
  }
}

/* --------------------------------------------------------------------------
   14. Zone d'intervention : une enseigne, plus une liste de villes
   -------------------------------------------------------------------------- */
.zone__jeu {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(1.75rem, 4vw, 3.5rem);
  align-items: center;
}

.zone__jeu .btn {
  margin-top: 0.5rem;
}

/* Le nom de la région, posé comme une plaque */
.enseigne {
  position: relative;
  margin: 0;
  max-width: none;
  padding: clamp(1.5rem, 3.5vw, 2.75rem);
  border-radius: var(--r);
  background: var(--marine-3);
  color: #fff;
  overflow: hidden;
  isolation: isolate;
}

/* trame de pavés en filigrane derrière l'enseigne */
.enseigne__trame {
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.5;
}

.enseigne__petit {
  display: block;
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #9fb6c9;
}

.enseigne__grand {
  display: block;
  font-family: "Oswald", sans-serif;
  font-style: italic;
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(2.9rem, 7vw, 5.75rem);
  line-height: 0.92;
  letter-spacing: -0.01em;
  margin: 0.5rem 0 0.75rem;
  padding-bottom: 0.06em;
}

.enseigne__pied {
  display: inline-block;
  padding: 0.4rem 0.9rem;
  border-radius: var(--r);
  background: var(--vert-lisible);
  font-size: 0.94rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

@media (max-width: 860px) {
  .zone__jeu {
    grid-template-columns: 1fr;
  }
}

/* --------------------------------------------------------------------------
   15. Contact
   -------------------------------------------------------------------------- */
.contact {
  background: var(--marine-3);
  color: #fff;
}

.contact__jeu {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: clamp(1.75rem, 3.5vw, 3rem);
  align-items: start;
}

.formulaire {
  display: grid;
  gap: 1.15rem;
}

.champ {
  display: grid;
  gap: 0.4rem;
}

.champ label {
  font-weight: 600;
  font-size: 0.97rem;
  color: #fff;
}

.champ .option {
  font-weight: 400;
  color: #a9bccd;
}

.champ input,
.champ select,
.champ textarea {
  font-family: inherit;
  font-size: 1rem;
  color: #fff;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: var(--r);
  padding: 0.85rem 1rem;
  min-height: 50px;
  width: 100%;
  transition: border-color var(--t), background-color var(--t), box-shadow var(--t);
}

.champ textarea {
  min-height: 130px;
  resize: vertical;
}

.champ select option {
  background: var(--marine-3);
  color: #fff;
}

.champ input::placeholder,
.champ textarea::placeholder {
  color: #93a9bd;
}

.champ input:focus,
.champ select:focus,
.champ textarea:focus {
  outline: none;
  border-color: var(--vert-vif);
  background: rgba(255, 255, 255, 0.11);
  box-shadow: 0 0 0 3px rgba(11, 196, 146, 0.25);
}

.champ__aide {
  font-size: 0.89rem;
  color: #a9bccd;
}

.champ__erreur {
  display: none;
  font-size: 0.92rem;
  font-weight: 600;
  color: #ffb4ab;
}

.champ[data-invalide="true"] input,
.champ[data-invalide="true"] select,
.champ[data-invalide="true"] textarea {
  border-color: #ffb4ab;
}

.champ[data-invalide="true"] .champ__erreur {
  display: block;
}

.champ--duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.15rem;
}

.etat {
  display: none;
  align-items: flex-start;
  gap: 0.7rem;
  padding: 1rem 1.15rem;
  border-radius: var(--r);
  line-height: 1.5;
}

.etat[data-visible="true"] {
  display: flex;
}

.etat--ok {
  background: rgba(11, 196, 146, 0.14);
  border: 1px solid var(--vert-vif);
}

.etat--ko {
  background: rgba(255, 180, 171, 0.13);
  border: 1px solid #ffb4ab;
}

.etat--info {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.28);
}

.etat--info .ico {
  color: var(--vert-vif);
}

.etat a {
  color: #fff;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

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

.etat--ok .ico {
  color: var(--vert-vif);
}

.etat--ko .ico {
  color: #ffb4ab;
}

.btn[data-envoi="true"] {
  pointer-events: none;
  opacity: 0.72;
}

.coordonnees {
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--r);
  padding: clamp(1.5rem, 3vw, 2.1rem);
  background: rgba(255, 255, 255, 0.04);
}

.coordonnees h3 {
  margin-bottom: 1.35rem;
}

.coordonnees ul {
  list-style: none;
  margin: 0 0 1.6rem;
  padding: 0;
  display: grid;
  gap: 1.15rem;
}

.coordonnees li {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
}

.coordonnees .ico {
  color: var(--vert-vif);
  margin-top: 3px;
}

.coordonnees a {
  display: inline-block;
  padding-block: 0.3rem;
  font-weight: 600;
  text-decoration: none;
  color: #fff;
  overflow-wrap: anywhere;
  transition: color var(--t);
}

.coordonnees a:hover {
  color: var(--vert-vif);
  text-decoration: underline;
}

.coordonnees span {
  display: block;
  font-size: 0.9rem;
  color: #a9bccd;
}

.coordonnees .btn {
  width: 100%;
}

@media (max-width: 860px) {
  .contact__jeu {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .champ--duo {
    grid-template-columns: 1fr;
  }
}

/* --------------------------------------------------------------------------
   16. Pied de page
   -------------------------------------------------------------------------- */
.pied {
  background: var(--marine-4);
  color: #b9cadb;
  padding-top: 0;
}

.pied__chevrons {
  width: 100%;
  height: 24px;
}

.pied__corps {
  display: grid;
  grid-template-columns: 1.35fr 1fr 1fr;
  gap: 2.5rem;
  padding-block: clamp(2.75rem, 6vw, 4rem);
}

.pied__logo {
  width: 205px;
  margin-bottom: 1.15rem;
}

.pied h3 {
  color: #fff;
  font-size: 1.02rem;
  margin-bottom: 1rem;
}

.pied ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.2rem;
}

.pied a {
  display: inline-block;
  padding-block: 0.35rem;
  color: #b9cadb;
  text-decoration: none;
  overflow-wrap: anywhere;
  transition: color var(--t);
}

.pied a:hover {
  color: #fff;
  text-decoration: underline;
}

.pied p {
  font-size: 0.97rem;
  margin: 0;
}

.pied__note {
  margin: 0;
  padding-bottom: 1.3rem;
  max-width: 74ch;
  font-size: 0.72rem;
  line-height: 1.45;
  color: #7e93a6;
}

.pied__bas {
  border-top: 1px solid rgba(255, 255, 255, 0.13);
  padding-block: 1.3rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem 1.5rem;
  justify-content: space-between;
  font-size: 0.9rem;
}

@media (max-width: 780px) {
  .pied__corps {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}

/* --------------------------------------------------------------------------
   17. Apparitions et mouvement réduit
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  [data-monte] {
    opacity: 0;
    transform: translateY(26px);
  }
}

@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;
  }

  [data-monte] {
    opacity: 1 !important;
    transform: none !important;
  }

  .manifeste__texte .m {
    color: var(--encre);
  }
}

@media print {
  .entete,
  .hamburger,
  .formulaire,
  .mur,
  .scene {
    display: none !important;
  }

  body {
    background: #fff;
    color: #000;
  }
}