/* ==========================================================================
   GéoDataNum — feuille de style (version 5)
   Couleurs de la brochure : vert profond, vert anis, crème, vert d'eau,
   avec une touche de magenta.
   ========================================================================== */

@font-face {
  font-family: "Bricolage Grotesque";
  src: url("../fonts/bricolage-grotesque.woff2") format("woff2");
  font-weight: 200 800;
  font-stretch: 75% 100%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Spectral";
  src: url("../fonts/spectral-400-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

/* ---------- Variables : changer une couleur ici la change partout ---------- */
:root {
  --encre: #16302a;          /* vert très sombre : en-tête, pied de page, titres */
  --encre-2: #0f231e;
  --texte: #1f302b;          /* texte courant */
  --gris: #5a6b65;           /* texte secondaire */
  --vert: #0b6e5c;           /* vert de la brochure : boutons, liens */
  --vert-fonce: #085446;
  --lime: #c4d62c;           /* vert anis de la brochure : accents, boutons sur fond sombre */
  --magenta: #b5017e;        /* touche de couleur : points sur les cartes, survol des liens */
  --creme: #ebe6d9;          /* fond crème de la brochure */
  --menthe: #e3f2ee;         /* fond vert d'eau de la brochure */
  --fond: #f6f3ea;           /* crème clair, pour les petites surfaces */
  --papier: #ffffff;
  --filet: #dcdccf;

  /* carte de démonstration */
  --marine: #0b6e5c;
  --eau: #c4e0ea;
  --hauts-fonds: #e3f1f5;
  --terre: #f4ebc3;
  --estran: #2f7d5c;
  --balise: #b5017e;

  --police: "Bricolage Grotesque", "Segoe UI", system-ui, -apple-system, sans-serif;
  --largeur: 68rem;                      /* largeur maximale du contenu */
  --marge: clamp(1.25rem, 5vw, 3.5rem);  /* marge à gauche et à droite */
  --bloc: clamp(3.5rem, 7vw, 5.5rem);    /* espace au-dessus et au-dessous des sections */
  --rayon: 14px;
  --ombre: 0 1px 2px rgba(22, 48, 42, 0.06), 0 12px 32px rgba(22, 48, 42, 0.1);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 5.5rem; }
body {
  margin: 0; background: var(--papier); color: var(--texte);
  font-family: var(--police); font-size: 1.0625rem; line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}
img, svg, video { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 {
  color: var(--encre); font-weight: 700; line-height: 1.1;
  letter-spacing: -0.015em; margin: 0 0 0.6em; text-wrap: balance;
}
h1 { font-size: clamp(2.2rem, 1.4rem + 3.3vw, 3.5rem); font-stretch: 86%; line-height: 1.04; }
h2 { font-size: clamp(1.7rem, 1.25rem + 1.8vw, 2.45rem); font-stretch: 88%; }
h3 { font-size: clamp(1.2rem, 1.1rem + 0.5vw, 1.45rem); font-weight: 650; letter-spacing: -0.01em; }
h4 { font-size: 1.05rem; letter-spacing: 0; }
p { margin: 0 0 1.1em; max-width: 66ch; }
ul, ol { margin: 0 0 1.1em; padding-left: 1.2em; max-width: 66ch; }
li { margin-bottom: 0.35em; }
a { color: var(--vert); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { color: var(--magenta); }
:focus-visible { outline: 3px solid var(--magenta); outline-offset: 3px; border-radius: 4px; }

.visuellement-cache { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.evitement { position: absolute; left: 1rem; top: -4rem; z-index: 100; background: #fff; color: var(--encre); padding: 0.6rem 1rem; border-radius: 8px; }
.evitement:focus { top: 1rem; }

.conteneur { width: 100%; max-width: var(--largeur); margin-inline: auto; padding-inline: var(--marge); }
.chapeau { font-size: clamp(1.15rem, 1.05rem + 0.5vw, 1.35rem); line-height: 1.5; max-width: 58ch; color: var(--texte); }
.note { font-size: 0.95rem; color: var(--gris); }

/* ---------- Boutons ---------- */
.bouton {
  display: inline-block; font-family: inherit; font-size: 1.02rem; font-weight: 650; line-height: 1.2;
  padding: 0.9em 1.5em; border: 2px solid var(--vert); border-radius: 999px;
  background: var(--vert); color: #fff; text-decoration: none; cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s, transform 0.15s;
}
.bouton:hover { background: var(--vert-fonce); border-color: var(--vert-fonce); color: #fff; transform: translateY(-1px); }
.bouton--contour { background: transparent; color: var(--encre); border-color: var(--encre); }
.bouton--contour:hover { background: var(--encre); border-color: var(--encre); color: #fff; }
/* sur les fonds sombres, le bouton principal passe au vert anis */
.fond-carte .bouton, .section--encre .bouton, .hero--video .bouton { background: var(--lime); border-color: var(--lime); color: var(--encre); }
.fond-carte .bouton:hover, .section--encre .bouton:hover, .hero--video .bouton:hover { background: #fff; border-color: #fff; color: var(--encre); }
.fond-carte .bouton--clair, .section--encre .bouton--clair, .hero--video .bouton--clair, .bouton--clair { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.7); }
.fond-carte .bouton--clair:hover, .section--encre .bouton--clair:hover, .hero--video .bouton--clair:hover, .bouton--clair:hover { background: #fff; border-color: #fff; color: var(--encre); }
.section--lime .bouton { background: var(--encre); border-color: var(--encre); color: #fff; }
.actions { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 1.8rem; }
.lien-fleche { font-weight: 650; }

/* ---------- En-tête ---------- */
.entete { position: sticky; top: 0; z-index: 50; background: var(--encre); color: #fff; }
.entete__barre { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: 4.4rem; }
.logo { display: inline-flex; align-items: center; gap: 0.7rem; font-weight: 700; font-size: 1.35rem; font-stretch: 88%; letter-spacing: -0.02em; color: #fff; text-decoration: none; }
.logo:hover { color: #fff; }
.logo img { width: 2.7rem; height: auto; flex: none; background: #fff; border-radius: 10px; padding: 3px; }

.menu { display: flex; align-items: center; gap: 0.2rem; list-style: none; margin: 0; padding: 0; max-width: none; }
.menu > li { margin: 0; position: relative; }
.menu a { display: block; padding: 0.6rem 0.85rem; font-size: 1rem; font-weight: 500; color: #fff; text-decoration: none; border-radius: 8px; }
.menu a:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }
.menu > li > a[aria-current="page"] { box-shadow: inset 0 -3px 0 var(--lime); border-radius: 0; }
.menu .menu__contact a { margin-left: 0.6rem; background: var(--lime); color: var(--encre); font-weight: 650; padding-inline: 1.2rem; border-radius: 999px; }
.menu .menu__contact a:hover { background: #fff; color: var(--encre); }
.menu .menu__contact a[aria-current="page"] { box-shadow: none; border-radius: 999px; }

.menu-bouton { display: none; font-family: inherit; font-size: 1rem; font-weight: 650; padding: 0.55rem 1rem; border: 2px solid rgba(255, 255, 255, 0.7); border-radius: 999px; background: transparent; color: #fff; cursor: pointer; }
@media (max-width: 60rem) {
  .js .menu-bouton { display: block; }
  .entete__barre { flex-wrap: wrap; padding-block: 0.7rem; }
  .entete nav { width: 100%; }
  .js .entete nav { display: none; }
  .js .entete nav.est-ouvert { display: block; }
  .menu { flex-direction: column; align-items: stretch; gap: 0; padding-bottom: 0.8rem; }
  .menu a { padding: 0.85rem 0.4rem; border-top: 1px solid rgba(255, 255, 255, 0.16); border-radius: 0; }
  .menu > li > a[aria-current="page"] { box-shadow: inset 4px 0 0 var(--lime); padding-left: 0.9rem; }
  .menu .menu__contact a { margin: 0.8rem 0 0; text-align: center; border-top: 0; border-radius: 999px; }
}

/* ---------- Fond à courbes de niveau (sections sombres) ---------- */
.fond-carte { position: relative; isolation: isolate; background: var(--encre); color: #dfe9e4; overflow: hidden; }
.fond-carte::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(60rem 30rem at 88% 0%, rgba(11, 110, 92, 0.75), transparent 62%),
    radial-gradient(38rem 24rem at 0% 100%, rgba(196, 214, 44, 0.14), transparent 60%);
}
.fond-carte::after {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0.1;
  background: url("../img/courbes.svg") center / 1100px auto;
}
.fond-carte h1, .fond-carte h2, .fond-carte h3 { color: #fff; }
.fond-carte .chapeau { color: #dfe9e4; }
.fond-carte a:not(.bouton) { color: #fff; }
.fond-carte--vert { background: var(--vert); color: #e9f4f0; }
.fond-carte--vert::before { background: radial-gradient(52rem 28rem at 100% 0%, rgba(196, 214, 44, 0.22), transparent 62%), radial-gradient(40rem 26rem at 0% 100%, rgba(22, 48, 42, 0.55), transparent 62%); }
.fond-carte--vert .chapeau { color: #e9f4f0; }

/* ---------- Accueil : ouverture avec vidéo de fond ----------
   La vidéo occupe toute la largeur ; le texte est posé dessus, en haut à gauche,
   aligné sur la marge du reste du site. */
.hero--video { position: relative; isolation: isolate; overflow: hidden; background: var(--encre); color: #e6efea; min-height: clamp(29rem, 74vh, 40rem); padding-block: clamp(2.8rem, 6vw, 4.2rem) clamp(3.5rem, 8vw, 6rem); }
.hero__fond { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.hero--video::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(100deg, rgba(22, 48, 42, 0.95) 0%, rgba(22, 48, 42, 0.84) 36%, rgba(22, 48, 42, 0.1) 80%); }
.hero__texte { max-width: 35rem; }
.hero__texte::before { content: ""; display: block; width: 4.5rem; height: 0.45rem; border-radius: 999px; background: var(--lime); margin-bottom: 1.5rem; }
.hero--video h1 { color: #fff; font-size: clamp(2.1rem, 1.35rem + 2.8vw, 3.3rem); margin-bottom: 0.5em; }
.hero--video h1 em { font-style: normal; color: var(--lime); }
.hero--video .chapeau { color: #e6efea; max-width: 31em; font-size: clamp(1.08rem, 1rem + 0.4vw, 1.25rem); }
@media (max-width: 44rem) { .hero--video::after { background: rgba(22, 48, 42, 0.84); } }

.surtitre { display: flex; align-items: center; gap: 0.6rem; font-weight: 650; font-size: 1.02rem; color: var(--vert); margin: 0 0 0.6rem; }
.surtitre::before { content: ""; width: 1.6rem; height: 0.3rem; border-radius: 999px; background: var(--lime); flex: none; }
.section--encre .surtitre, .fond-carte .surtitre { color: var(--lime); }
.section__tete--ligne { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.2rem 2rem; }
.section__tete--ligne h2 { margin-bottom: 0; }
.section__tete--ligne > div { flex: 1 1 22rem; }
.section__tete--ligne > .bouton { flex: none; }

.video-cadre { margin: 0; }
.video-cadre video { width: 100%; aspect-ratio: 16 / 9; border-radius: var(--rayon); background: var(--encre); box-shadow: var(--ombre); }
.video-cadre figcaption { margin-top: 0.8rem; font-size: 0.93rem; color: var(--gris); }

.atouts { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin: clamp(2.5rem, 5vw, 3.5rem) 0 0; padding: 0; max-width: none; border-radius: var(--rayon); overflow: hidden; }
.atouts li { margin: 0; padding: 1.8rem 1.6rem 1.9rem; }
.atouts li:nth-child(1) { background: var(--vert); color: #e9f4f0; }
.atouts li:nth-child(1) h3 { color: #fff; }
.atouts li:nth-child(2) { background: var(--lime); color: var(--encre); }
.atouts li:nth-child(3) { background: var(--creme); }
.atouts h3 { margin-bottom: 0.35em; }
.atouts p { margin: 0; font-size: 1rem; }
@media (max-width: 54rem) { .atouts { grid-template-columns: minmax(0, 1fr); } }

.offres { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.4rem; }
.offre { display: flex; flex-direction: column; padding: 1.8rem 1.6rem 1.6rem; background: #fff; border: 1px solid var(--filet); border-top: 5px solid var(--vert); border-radius: var(--rayon); transition: box-shadow 0.2s, transform 0.2s; }
.offre:nth-child(2) { border-top-color: var(--lime); }
.offre:nth-child(3) { border-top-color: var(--magenta); }
.offre:hover { box-shadow: var(--ombre); transform: translateY(-3px); }
.offre svg { width: 3.6rem; height: 3.6rem; padding: 0.75rem; border-radius: 12px; margin-bottom: 1.2rem; background: var(--vert); color: #fff; }
.offre:nth-child(2) svg { background: var(--lime); color: var(--encre); }
.offre:nth-child(3) svg { background: var(--encre); color: var(--lime); }
.offre ul { list-style: none; padding: 0; margin: 0 0 1.4rem; max-width: none; }
.offre li { margin: 0; padding: 0.65rem 0; border-bottom: 1px solid var(--filet); }
.offre .lien-fleche { margin-top: auto; }
@media (max-width: 56rem) { .offres { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Sections ---------- */
.section { padding-block: var(--bloc); }
.section--eau { background: var(--creme); }
.section--menthe { background: var(--menthe); }
.section--lime { background: var(--lime); color: var(--encre); }
.section--lime .citation { color: var(--encre); }
.section--serree { padding-block: clamp(2.5rem, 5vw, 4rem); }
.section--encre { position: relative; isolation: isolate; background: var(--encre); color: #dfe9e4; overflow: hidden; }
.section--encre::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(50rem 26rem at 100% 0%, rgba(11, 110, 92, 0.7), transparent 62%); }
.section--encre h2, .section--encre h3 { color: #fff; }
.section--encre .chapeau { color: #dfe9e4; }
.section--encre a:not(.bouton) { color: #fff; }
.section--encre .note { color: #a9bdb4; }
.section__tete { margin-bottom: clamp(2rem, 4vw, 3.2rem); }
.section__tete p { margin-bottom: 0; }

/* ---------- Expertises (accueil) ---------- */
.expertises { list-style: none; margin: 0; padding: 0; max-width: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.2rem; }
.expertises li { margin: 0; }
.expertise { display: flex; flex-direction: column; height: 100%; padding: 1.6rem 1.4rem 1.5rem; background: #fff; border: 1px solid var(--filet); border-radius: var(--rayon); color: var(--texte); text-decoration: none; transition: box-shadow 0.2s, transform 0.2s, border-color 0.2s; }
.expertise:hover { box-shadow: var(--ombre); transform: translateY(-3px); border-color: transparent; color: var(--texte); }
.expertise svg { width: 2.6rem; height: 2.6rem; margin-bottom: 1.1rem; color: var(--vert); }
.expertise h3 { margin-bottom: 0.4em; }
.expertise p { font-size: 0.98rem; line-height: 1.5; margin: 0 0 1rem; }
.expertise span { margin-top: auto; font-weight: 650; color: var(--vert); }
@media (max-width: 62rem) { .expertises { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 34rem) { .expertises { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Deux colonnes ---------- */
.duo { display: grid; gap: clamp(2rem, 5vw, 5rem); grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
.duo--centre { align-items: center; }
.duo--large-gauche { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
@media (max-width: 54rem) { .duo, .duo--large-gauche { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Photos : un emplacement n'apparaît que si le fichier existe ---------- */
.photo { position: relative; margin: 0; aspect-ratio: 4 / 3; border-radius: var(--rayon); overflow: hidden; background: var(--fond); box-shadow: var(--ombre); }
.photo[hidden] { display: none; }
.photo--large { aspect-ratio: 21 / 9; }
.photo > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s ease; }
.photo:hover > img { transform: scale(1.05); }
.bande-photos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2rem; margin-top: clamp(2.5rem, 5vw, 4rem); }
.bande-photos:not(:has(.photo:not([hidden]))) { display: none; }
.bandeau-photo { margin-top: var(--bloc); }
.bandeau-photo:has(.photo[hidden]) { display: none; }
.duo:has(> .photo[hidden]) { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 44rem) { .bande-photos { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Cadre d'écran autour d'une capture ---------- */
.ecran { margin: 0; border-radius: 12px; overflow: hidden; background: #fff; box-shadow: 0 18px 50px rgba(22, 48, 42, 0.28); }
.ecran::before { content: ""; display: block; height: 1.6rem; background: #ecebe2 radial-gradient(circle at 0.9rem 50%, #f26b5b 0.26rem, transparent 0.28rem), radial-gradient(circle at 1.8rem 50%, #f5bd4f 0.26rem, transparent 0.28rem), radial-gradient(circle at 2.7rem 50%, #5fc55b 0.26rem, transparent 0.28rem); }
.ecran img { width: 100%; }

/* ---------- Étapes (vraies séquences) ---------- */
.etapes { list-style: none; counter-reset: etape; margin: 0; padding: 0; max-width: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 2.5rem; }
.etapes li { counter-increment: etape; margin: 0; padding: 1.4rem 0 1.8rem; border-top: 1px solid rgba(255, 255, 255, 0.24); }
.etapes li::before { content: counter(etape); display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; margin-bottom: 0.9rem; background: var(--lime); color: var(--encre); font-weight: 700; font-size: 1.1rem; }
.etapes h3 { font-size: 1.2rem; margin-bottom: 0.4em; }
.etapes p { margin: 0; font-size: 1rem; line-height: 1.55; color: #cddbd4; }
.etapes--clair li { border-top-color: var(--filet); }
.etapes--clair li::before { background: var(--vert); color: #fff; }
.etapes--clair p { color: var(--texte); }
.etapes--colonne { grid-template-columns: minmax(0, 1fr); }
.etapes--colonne li { display: grid; grid-template-columns: 2.4rem minmax(0, 1fr); column-gap: 1.1rem; padding: 1.1rem 0 1.2rem; }
.etapes--colonne li::before { grid-row: span 2; margin: 0; }
.etapes--colonne h3, .etapes--colonne p { grid-column: 2; }
.etapes--sans-numero li::before { content: none; }
@media (max-width: 56rem) { .etapes { grid-template-columns: repeat(2, minmax(0, 1fr)); } .etapes--colonne { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 36rem) { .etapes { grid-template-columns: minmax(0, 1fr); } }
@media (min-width: 62rem) {
  .etapes--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 2rem; }
  .etapes--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0 1.6rem; }
  .etapes--5 p { font-size: 0.96rem; }
}

/* ---------- Listes et citations ---------- */
.liste-filets { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--encre); max-width: none; }
.liste-filets li { margin: 0; padding: 0.8rem 0; border-bottom: 1px solid var(--filet); font-size: 1.05rem; line-height: 1.35; font-weight: 500; }
.section--encre .liste-filets { border-top-color: var(--lime); }
.section--encre .liste-filets li { border-bottom-color: rgba(255, 255, 255, 0.22); }
.liste-coches { list-style: none; padding: 0; margin: 0 0 1.2em; }
.liste-coches li { position: relative; padding-left: 2rem; margin-bottom: 0.7em; }
.liste-coches li::before { content: ""; position: absolute; left: 0.15rem; top: 0.42em; width: 0.95rem; height: 0.5rem; border-left: 3px solid var(--vert); border-bottom: 3px solid var(--vert); transform: rotate(-45deg); }
.citation { margin: 0; padding: 0; font-weight: 650; font-stretch: 86%; font-size: clamp(1.4rem, 1.1rem + 1.6vw, 2.15rem); line-height: 1.14; letter-spacing: -0.015em; text-wrap: balance; color: var(--encre); }
.section--encre .citation, .fond-carte .citation { color: #fff; }
.citation p { max-width: 24em; margin: 0; }
.citation footer { margin-top: 1.2rem; font-size: 1rem; font-weight: 500; font-stretch: 100%; letter-spacing: 0; color: var(--gris); }

/* ---------- Carte de démonstration ---------- */
.demo { margin: 0; }
.demo__carte { border-radius: var(--rayon) var(--rayon) 0 0; overflow: hidden; background: var(--eau); box-shadow: var(--ombre); }
.demo__carte svg { width: 100%; }
.demo__panneau { background: #fff; padding: 1.1rem 1.2rem 1.2rem; border-radius: 0 0 var(--rayon) var(--rayon); border: 1px solid var(--filet); border-top: 0; box-shadow: var(--ombre); }
.demo fieldset { border: 0; margin: 0; padding: 0; }
.demo legend { padding: 0; font-weight: 700; font-size: 1.05rem; margin-bottom: 0.6rem; color: var(--encre); }
.demo__criteres { display: grid; gap: 0.3rem; }
.critere { display: flex; align-items: center; gap: 0.65rem; padding: 0.45rem 0.5rem; margin-inline: -0.5rem; border-radius: 8px; font-size: 1rem; line-height: 1.25; cursor: pointer; }
.critere:hover { background: var(--fond); }
.critere input { width: 1.2rem; height: 1.2rem; accent-color: var(--vert); flex: none; margin: 0; }
.critere__motif { width: 1.5rem; height: 1rem; flex: none; border: 1px solid var(--encre); border-radius: 2px; }
.critere__motif--inondable { background: repeating-linear-gradient(45deg, #2b7fa6 0 2px, #cfe6f0 2px 6px); }
.critere__motif--protege { background: repeating-linear-gradient(-45deg, #2f7d5c 0 2px, #d7ead9 2px 6px); }
.critere__motif--reseau { background: linear-gradient(#0b6e5c, #0b6e5c) center / 100% 2px no-repeat, rgba(11, 110, 92, 0.18); }
.demo__resultat { margin: 0.9rem 0 0; padding-top: 0.8rem; border-top: 1px solid var(--filet); font-size: 1.05rem; max-width: none; }
.demo__resultat strong { font-size: 1.6rem; font-weight: 700; color: var(--magenta); }
.demo figcaption { margin-top: 1rem; font-size: 0.93rem; color: var(--gris); max-width: 60ch; }
.couche { opacity: 0; transition: opacity 0.35s ease; }
.couche.est-visible { opacity: 1; }
.site-point { transform-box: fill-box; transform-origin: center; transition: transform 0.25s ease, fill 0.25s ease, stroke 0.25s ease; fill: var(--balise); stroke: #fff; stroke-width: 2.5; }
.site-point.est-ecarte { fill: #fff; stroke: #5a6b65; stroke-width: 2.2; transform: scale(0.7); }
.carte-nom { font-family: "Spectral", Georgia, serif; font-style: italic; font-size: 17px; fill: #2b7fa6; letter-spacing: 0.08em; }
.carte-echelle { font-family: var(--police); font-size: 12px; fill: var(--encre); }

/* ---------- Nos réalisations ---------- */
.realisations { list-style: none; margin: 0; padding: 0; max-width: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 1.6rem; }
.realisations > .realisation { flex: 0 1 calc((100% - 3.2rem) / 3); }
.realisation { margin: 0; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--filet); border-radius: var(--rayon); overflow: hidden; transition: box-shadow 0.2s, transform 0.2s; }
.realisation:hover { box-shadow: var(--ombre); transform: translateY(-3px); }
.realisation__visuel { display: block; aspect-ratio: 960 / 560; overflow: hidden; background: var(--fond); border-bottom: 1px solid var(--filet); }
.realisation__visuel img, .realisation__visuel svg { width: 100%; height: 100%; object-fit: cover; }
.realisation__corps { display: flex; flex-direction: column; flex: 1; padding: 1.4rem 1.4rem 1.5rem; }
.realisation h3 { font-size: clamp(1.5rem, 1.2rem + 1vw, 1.85rem); font-stretch: 86%; font-weight: 700; margin-bottom: 0.25em; }
.realisation__role { font-weight: 600; font-size: 1rem; line-height: 1.3; color: var(--vert); margin-bottom: 0.8em; }
.realisation__corps p:not(.realisation__role) { font-size: 1rem; line-height: 1.55; margin-bottom: 1.4em; }
.realisation .bouton { margin-top: auto; text-align: center; }
@media (max-width: 62rem) { .realisations > .realisation { flex-basis: 100%; } }
@media (min-width: 40rem) and (max-width: 62rem) {
  .realisation { flex-direction: row; }
  .realisation__visuel { flex: 0 0 42%; aspect-ratio: auto; border-bottom: 0; border-right: 1px solid var(--filet); }
  .realisation .bouton { align-self: flex-start; }
}

/* ---------- En-tête des pages intérieures ---------- */
.page-tete { padding-block: clamp(3rem, 7vw, 5.5rem) clamp(2.8rem, 6vw, 4.5rem); }
.page-tete h1 { font-size: clamp(2.2rem, 1.4rem + 3.3vw, 3.5rem); max-width: 16em; margin-bottom: 0.35em; }
.page-tete .chapeau { margin-bottom: 0; }
.page-tete__sigle { font-weight: 500; color: var(--lime); font-size: clamp(1.15rem, 1rem + 0.7vw, 1.5rem); line-height: 1.25; margin: 0 0 1.1em; }
.fil { font-size: 1rem; margin-bottom: 1.1rem; }
.fil a { font-weight: 600; }

.sommaire { display: flex; flex-wrap: wrap; gap: 0.6rem; list-style: none; padding: 0; margin: 1rem 0 0; max-width: none; }
.sommaire li { margin: 0; }
.sommaire a { display: block; padding: 0.55rem 1.1rem; border: 1.5px solid var(--encre); border-radius: 999px; font-weight: 600; font-size: 1rem; color: var(--encre); text-decoration: none; background: #fff; }
.sommaire a:hover, .sommaire a[aria-current="page"] { background: var(--encre); color: #fff; }
.titre-discret { font-size: 1.25rem; font-stretch: 100%; letter-spacing: 0; }
.classes-etat { list-style: none; padding: 0; margin: 1rem 0 0; max-width: none; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.classes-etat li { margin: 0; padding: 0.45rem 1.1rem; border-radius: 999px; font-weight: 650; color: var(--encre); background: #5aa469; }
.classes-etat li:nth-child(2) { background: #f2c94c; }
.classes-etat li:nth-child(3) { background: #ee8f3a; }
.classes-etat li:nth-child(4) { background: #c23a32; color: #fff; }

/* ---------- Pages de réalisation ---------- */
.produit__grille { display: grid; gap: clamp(2rem, 5vw, 4.5rem); grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: start; }
.produit__figure { margin: 0; position: sticky; top: 6.5rem; }
.produit__figure svg, .produit__figure img { width: 100%; border-radius: var(--rayon); border: 1px solid var(--filet); box-shadow: var(--ombre); background: #fff; }
.produit__figure figcaption { margin-top: 0.9rem; font-size: 0.93rem; color: var(--gris); }
@media (max-width: 56rem) { .produit__grille { grid-template-columns: minmax(0, 1fr); } .produit__figure { position: static; } }

.capture { margin: 0; }
.capture a { display: block; border-radius: 12px; overflow: hidden; border: 1px solid var(--filet); box-shadow: var(--ombre); background: #fff; }
.capture img { width: 100%; }
.capture figcaption { margin-top: 0.8rem; font-size: 0.93rem; color: var(--gris); max-width: 70ch; }
.capture--large { margin-top: calc(-1 * clamp(2rem, 5vw, 3.5rem)); position: relative; z-index: 2; }
.capture--large a { border-radius: var(--rayon); box-shadow: 0 24px 60px rgba(22, 48, 42, 0.3); }
.section--remontee { padding-top: 0; }

.fonctions { display: grid; gap: clamp(3rem, 7vw, 5.5rem); }
.fonction { display: grid; grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
.fonction:nth-child(even) .fonction__texte { order: 2; }
.fonction h3 { font-size: clamp(1.45rem, 1.2rem + 1vw, 1.95rem); font-stretch: 86%; font-weight: 700; }
.fonction p:last-child { margin-bottom: 0; }
@media (max-width: 56rem) { .fonction { grid-template-columns: minmax(0, 1fr); } .fonction:nth-child(even) .fonction__texte { order: 0; } }

.encadre { border-left: 4px solid var(--vert); background: var(--menthe); padding: 1rem 1.2rem; margin: 1.8rem 0 0; max-width: 68ch; border-radius: 0 10px 10px 0; }
.encadre p { margin: 0; font-size: 1rem; }
.prose h2 { margin-top: 1.8em; font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.1rem); }
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin-top: 1.6em; }

.definitions { margin: 0; max-width: 68ch; border-top: 2px solid var(--encre); }
.definitions div { display: grid; grid-template-columns: minmax(0, 10.5rem) minmax(0, 1fr); gap: 0.3rem 1.5rem; padding: 0.85rem 0; border-bottom: 1px solid var(--filet); }
.definitions dt { font-weight: 650; color: var(--encre); }
.definitions dd { margin: 0; }
@media (max-width: 36rem) { .definitions div { grid-template-columns: minmax(0, 1fr); } }

/* cartes de bénéfices (adressage) */
.benefices { list-style: none; margin: 0; padding: 0; max-width: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2rem; }
.benefices li { margin: 0; padding: 1.4rem 1.4rem 1.3rem; background: #fff; border: 1px solid var(--filet); border-radius: var(--rayon); }
.benefices h3 { font-size: 1.15rem; margin-bottom: 0.35em; }
.benefices p { margin: 0; font-size: 0.99rem; line-height: 1.5; }
@media (max-width: 56rem) { .benefices { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 34rem) { .benefices { grid-template-columns: minmax(0, 1fr); } }

.illustration { margin: 0; }
.illustration svg { width: 100%; border-radius: var(--rayon); box-shadow: var(--ombre); }
.illustration figcaption { margin-top: 0.9rem; font-size: 0.93rem; color: var(--gris); }
.fond-carte .illustration figcaption, .section--encre .illustration figcaption { color: #a9bdb4; }

/* ---------- Formulaire ---------- */
.formulaire { display: grid; gap: 1.1rem; max-width: 40rem; }
.formulaire__rang { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem; }
@media (max-width: 36rem) { .formulaire__rang { grid-template-columns: minmax(0, 1fr); } }
.champ label { display: block; font-weight: 650; font-size: 1rem; margin-bottom: 0.35rem; color: var(--encre); }
.champ .facultatif { font-weight: 400; color: var(--gris); }
.champ input, .champ select, .champ textarea { width: 100%; font: inherit; font-size: 1.05rem; color: var(--encre); padding: 0.75rem 0.9rem; border: 1.5px solid #8a9a93; border-radius: 10px; background: #fff; }
.champ textarea { min-height: 10rem; resize: vertical; line-height: 1.45; }
.champ input:focus, .champ select:focus, .champ textarea:focus { outline: 3px solid var(--vert); outline-offset: 1px; border-color: var(--encre); }
.champ--piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.formulaire__etat { font-size: 1.05rem; padding: 0.9rem 1.1rem; border-radius: 10px; margin: 0; max-width: none; }
.formulaire__etat:empty { display: none; }
.formulaire__etat.est-ok { background: #e6f3ea; border-left: 4px solid var(--estran); }
.formulaire__etat.est-erreur { background: #fbe9f3; border-left: 4px solid var(--magenta); }

/* ---------- Appel final ---------- */
.appel h2 { max-width: 16em; }

/* ---------- Pied de page ---------- */
.pied { background: var(--encre-2); color: #cddbd4; padding-block: 3.5rem 2rem; font-size: 1rem; }
.pied a { color: #fff; text-decoration: none; }
.pied a:hover { text-decoration: underline; color: #fff; }
.pied__grille { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: 2.5rem; }
.pied .logo { margin-bottom: 0.9rem; }
.pied h2 { font-size: 1rem; font-stretch: 100%; letter-spacing: 0; color: #fff; margin-bottom: 0.8rem; }
.pied ul { list-style: none; padding: 0; margin: 0; }
.pied li { margin-bottom: 0.45rem; }
.pied p { max-width: 34ch; }
.pied__bas { margin-top: 2.5rem; padding-top: 1.3rem; border-top: 1px solid rgba(255, 255, 255, 0.2); font-size: 0.92rem; display: flex; flex-wrap: wrap; gap: 0.5rem 2rem; justify-content: space-between; }
.pied__bas p { margin: 0; max-width: none; }
@media (max-width: 60rem) { .pied__grille { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 36rem) { .pied__grille { grid-template-columns: minmax(0, 1fr); gap: 2rem; } }

/* ---------- Sélecteur de langue : Français / English ---------- */
.menu .menu__langues { display: flex; align-items: center; gap: 0.1rem; margin-left: 0.8rem; padding: 0.2rem; border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 999px; font-size: 0.92rem; font-weight: 600; white-space: nowrap; }
.menu .menu__langues svg { width: 1.05rem; height: 1.05rem; margin: 0 0.15rem 0 0.5rem; opacity: 0.85; flex: none; }
.menu .menu__langues a, .menu .menu__langues span { display: block; padding: 0.32rem 0.7rem; border-radius: 999px; border: 0; font-size: inherit; font-weight: inherit; }
.menu .menu__langues span { background: var(--lime); color: var(--encre); }
@media (max-width: 60rem) {
  .menu .menu__langues { align-self: flex-start; margin: 0.9rem 0 0; }
  .menu .menu__langues a { border-top: 0; padding: 0.32rem 0.7rem; }
}

/* ---------- Page Réalisations ---------- */
.projets { display: grid; gap: clamp(3rem, 7vw, 5.5rem); }
.projet { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(1.5rem, 5vw, 4.5rem); align-items: center; }
.projet:nth-child(even) .projet__visuel { order: 2; }
.projet__visuel { margin: 0; }
.projet__visuel a { display: block; border-radius: var(--rayon); overflow: hidden; border: 1px solid var(--filet); box-shadow: var(--ombre); background: #fff; }
.projet__visuel svg { width: 100%; }
.projet__visuel figcaption { margin-top: 0.9rem; font-size: 0.93rem; color: var(--gris); }
.projet h2 { font-size: clamp(1.8rem, 1.3rem + 2vw, 2.6rem); margin-bottom: 0.2em; }
.projet .realisation__role { font-size: 1.15rem; margin-bottom: 1em; }
@media (max-width: 56rem) { .projet { grid-template-columns: minmax(0, 1fr); } .projet:nth-child(even) .projet__visuel { order: 0; } }



/* ---------- Page Réalisations ---------- */
.realisations-liste { display: grid; gap: clamp(3rem, 7vw, 5.5rem); }
.realisation-ligne { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: center; }
.realisation-ligne:nth-child(even) .realisation-ligne__visuel { order: 2; }
.realisation-ligne__visuel a { display: block; border-radius: var(--rayon); overflow: hidden; border: 1px solid var(--filet); box-shadow: var(--ombre); background: #fff; }
.realisation-ligne__visuel img, .realisation-ligne__visuel svg { width: 100%; display: block; transition: transform 0.7s ease; }
.realisation-ligne__visuel a:hover > * { transform: scale(1.04); }
.realisation-ligne h2 { margin-bottom: 0.25em; }
.realisation-ligne .bouton { margin-top: 0.6rem; }
@media (max-width: 56rem) { .realisation-ligne { grid-template-columns: minmax(0, 1fr); } .realisation-ligne:nth-child(even) .realisation-ligne__visuel { order: 0; } }
.realisation__visuel > * { transition: transform 0.7s ease; }
.realisation:hover .realisation__visuel > * { transform: scale(1.05); }

.section--remontee > .conteneur > :first-child { margin-top: calc(-1 * clamp(2rem, 5vw, 3.5rem)); position: relative; z-index: 2; }

/* ---------- Maquettes animées ----------
   Une « fenêtre » avec des onglets : chaque onglet est une vue (un dessin SVG).
   Les vues défilent toutes seules ; un clic sur un onglet ou sur Pause arrête le défilement. */
.maquette { margin: 0; border-radius: var(--rayon); overflow: hidden; background: #fff; border: 1px solid var(--filet); box-shadow: 0 24px 60px rgba(22, 48, 42, 0.28); }
.maquette__barre { display: flex; align-items: center; gap: 0.8rem; padding: 0.55rem 0.9rem; background: var(--encre); }
.maquette__pastilles { display: flex; gap: 0.35rem; flex: none; }
.maquette__pastilles i { width: 0.7rem; height: 0.7rem; border-radius: 50%; background: var(--magenta); }
.maquette__pastilles i:nth-child(2) { background: var(--lime); }
.maquette__pastilles i:nth-child(3) { background: #3fa48f; }
.maquette__onglets { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-inline: auto; justify-content: center; }
.maquette__onglet, .maquette__pause { font: inherit; font-size: 0.95rem; font-weight: 600; line-height: 1.2; padding: 0.42rem 1rem; border-radius: 999px; border: 1.5px solid rgba(255, 255, 255, 0.32); background: transparent; color: #fff; cursor: pointer; transition: background-color 0.15s, color 0.15s, border-color 0.15s; }
.maquette__onglet:hover, .maquette__pause:hover { background: rgba(255, 255, 255, 0.14); }
.maquette__onglet.est-actif { background: var(--lime); border-color: var(--lime); color: var(--encre); }
.maquette__pause { flex: none; font-size: 0.88rem; padding-inline: 0.8rem; }
html:not(.js) .maquette__barre, html:not(.js) .maquette__temoin { display: none; }
.maquette__temoin { height: 3px; background: var(--creme); }
.maquette__temoin i { display: block; height: 100%; width: 0; background: var(--magenta); }
@keyframes m-temoin { from { width: 0; } to { width: 100%; } }
.maquette.est-animee:not(.est-en-pause) .maquette__temoin i { animation: m-temoin 8s linear forwards; }
.maquette__scene { overflow-x: auto; background: #f4f1e8; }
.maquette__defile { position: relative; min-width: 38rem; aspect-ratio: 960 / 560; }
.maquette__vue { display: block; width: 100%; height: auto; font-family: var(--police); }
.js .maquette__vue { position: absolute; inset: 0; height: 100%; opacity: 0; visibility: hidden; transition: opacity 0.45s ease, visibility 0.45s; }
.js .maquette__vue.est-active { opacity: 1; visibility: visible; }
.maquette figcaption { padding: 0.7rem 1.1rem; font-size: 0.93rem; color: var(--gris); border-top: 1px solid var(--filet); }
.maquette__astuce { display: none; }
@media (max-width: 40rem) { .maquette__astuce { display: inline; } }
.maquette--compacte { border: 0; border-radius: 0; box-shadow: none; }
.maquette--compacte .maquette__scene { overflow: hidden; }
.maquette--compacte .maquette__defile { min-width: 0; }
.maquette--compacte .maquette__temoin { position: relative; margin-top: -3px; background: transparent; }
@media (max-width: 40rem) { .maquette__pastilles { display: none; } .maquette__onglet { padding-inline: 0.75rem; font-size: 0.9rem; } }

/* animations des dessins : elles ne jouent que dans la vue affichée, quand la maquette est à l'écran */
@keyframes m-fondu { from { opacity: 0; } }
@keyframes m-pop { from { opacity: 0; transform: scale(0.3); } }
@keyframes m-pousse { from { transform: scaleY(0); } }
@keyframes m-etire { from { transform: scaleX(0); } }
@keyframes m-trace { 0% { stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0; } 2% { opacity: 1; } 100% { stroke-dasharray: 1; stroke-dashoffset: 0; } }
@keyframes m-glisse { from { opacity: 0; transform: translateX(-18px); } }
@keyframes m-monte { from { opacity: 0; transform: translateY(14px); } }
@keyframes m-pulse { from { transform: scale(0.55); opacity: 0.95; } to { transform: scale(1.5); opacity: 0; } }
@keyframes m-soleil { from { transform: rotate(-42deg); } to { transform: rotate(42deg); } }
@keyframes m-ombre { from { transform: translate(34px, 8px); } to { transform: translate(-34px, 8px); } }
@keyframes m-curseur { from { transform: translateX(0); } to { transform: translateX(106px); } }
.m-pop, .m-pulse { transform-box: fill-box; transform-origin: center; }
.m-pousse { transform-box: fill-box; transform-origin: center bottom; }
.m-etire { transform-box: fill-box; transform-origin: left center; }
.m-soleil { transform-box: view-box; transform-origin: 500px 562px; }
.m-ombre { transform: translate(-12px, 8px); }
.est-animee .est-active .m-fondu { animation: m-fondu 0.6s ease var(--d, 0s) backwards; }
.est-animee .est-active .m-pop { animation: m-pop 0.45s cubic-bezier(0.2, 0.9, 0.3, 1.3) var(--d, 0s) backwards; }
.est-animee .est-active .m-pousse { animation: m-pousse 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) var(--d, 0s) backwards; }
.est-animee .est-active .m-etire { animation: m-etire 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) var(--d, 0s) backwards; }
.est-animee .est-active .m-trace { animation: m-trace 1.2s ease var(--d, 0s) backwards; }
.est-animee .est-active .m-glisse { animation: m-glisse 0.55s ease var(--d, 0s) backwards; }
.est-animee .est-active .m-monte { animation: m-monte 0.55s ease var(--d, 0s) backwards; }
.est-animee .est-active .m-pulse { animation: m-pulse 1.9s ease-out infinite; }
.est-animee .est-active .m-soleil { animation: m-soleil 4s ease-in-out infinite alternate; }
.est-animee .est-active .m-ombre { animation: m-ombre 4s ease-in-out infinite alternate; }
.est-animee .est-active .m-curseur { animation: m-curseur 4s ease-in-out infinite alternate; }

/* ---------- Carrousel de captures ---------- */
.carrousel { border-radius: var(--rayon); overflow: hidden; background: #fff; border: 1px solid var(--filet); box-shadow: 0 24px 60px rgba(22, 48, 42, 0.3); }
.carrousel__vue { margin: 0; }
.carrousel__vue img { width: 100%; display: block; }
.carrousel__vue figcaption { padding: 0.8rem 1.2rem; font-size: 0.98rem; border-top: 1px solid var(--filet); background: #fff; }
.js .carrousel__piste { position: relative; aspect-ratio: 16 / 10.6; background: #f1efe6; }
.js .carrousel__vue { position: absolute; inset: 0; display: flex; flex-direction: column; opacity: 0; visibility: hidden; transition: opacity 0.6s ease, visibility 0.6s; }
.js .carrousel__vue.est-active { opacity: 1; visibility: visible; }
.js .carrousel__vue a { flex: 1; min-height: 0; cursor: zoom-in; }
.js .carrousel__vue img { height: 100%; object-fit: contain; }
.carrousel__commandes { display: flex; align-items: center; gap: 0.5rem; padding: 0.7rem 1rem; border-top: 1px solid var(--filet); background: var(--fond); }
.carrousel__commandes button { font: inherit; cursor: pointer; }
.carrousel__fleche, .carrousel__pause { height: 2.6rem; min-width: 2.6rem; padding: 0 0.9rem; border-radius: 999px; border: 1.5px solid var(--encre); background: #fff; color: var(--encre); font-weight: 650; }
.carrousel__fleche:hover, .carrousel__pause:hover { background: var(--encre); color: #fff; }
.carrousel__points { display: flex; flex-wrap: wrap; gap: 0.15rem; margin-inline: auto; }
.carrousel__points button { width: 1.6rem; height: 1.6rem; padding: 0; border: 0; background: none; display: grid; place-items: center; }
.carrousel__points button::before { content: ""; width: 0.7rem; height: 0.7rem; border-radius: 50%; background: #c3cdc4; transition: background-color 0.2s, transform 0.2s; }
.carrousel__points button[aria-current="true"]::before { background: var(--magenta); transform: scale(1.35); }
.capture a[data-agrandir] { cursor: zoom-in; }

/* ---------- Visionneuse (agrandissement d'une image) ---------- */
.visionneuse { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; align-content: center; gap: 0.9rem; padding: 3vmin; background: rgba(10, 24, 20, 0.94); }
.visionneuse[hidden] { display: none; }
.visionneuse img { max-width: 100%; max-height: 84vh; width: auto; height: auto; border-radius: 8px; background: #fff; }
.visionneuse p { margin: 0; color: #fff; text-align: center; max-width: 70ch; }
.visionneuse button { position: absolute; top: 1rem; right: 1rem; font: inherit; font-weight: 650; padding: 0.6rem 1.1rem; border-radius: 999px; border: 2px solid #fff; background: transparent; color: #fff; cursor: pointer; }
.visionneuse button:hover { background: #fff; color: var(--encre); }

/* ---------- Apparition au défilement ---------- */
.js .a-reveler { opacity: 0; transform: translateY(22px); transition: opacity 0.7s ease, transform 0.7s ease; }
.js .a-reveler.est-visible { opacity: 1; transform: none; }

/* ---------- Mouvement réduit, impression ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
@media print {
  .entete, .pied, .menu-bouton, .actions, .demo__panneau, .hero__fond, .carrousel__commandes, .maquette__barre, .maquette__temoin { display: none; }
  .js .a-reveler { opacity: 1; transform: none; }
  body { font-size: 11pt; }
  .section, .hero, .page-tete { padding-block: 1.5rem; }
  .fond-carte, .section--encre { background: #fff; color: #000; }
  .fond-carte h1, .fond-carte h2, .section--encre h2 { color: #000; }
}