/* =========================================================================
   ÉTAGE ZÉRO — feuille de styles partagée
   Charte V1 · mobile-first · point de rupture unique à 900 px
   ========================================================================= */

/* -------------------------------------------------------------------------
   01 — Variables
   ------------------------------------------------------------------------- */

:root {
  --ez-noir:        #0B0B0B;
  --ez-ivoire:      #F6F5F2;
  --ez-vert:        #3D7B6B;
  --ez-vert-fonce:  #2F685A;
  --ez-brume:       #DCE9E4;
  --ez-brume-trait: #C3D9D1;
  --ez-ciment:      #A6AAA7;
  --ez-gris:        #636864;
  --ez-trait:       #D8D8D3;
  --ez-blanc:       #FFFFFF;
  --ez-trait-noir:  #262626;

  --ez-titre: "Sora", "Poppins", "Helvetica Neue", sans-serif;
  --ez-texte: "Inter", "Helvetica Neue", Arial, system-ui, sans-serif;

  --ez-1: 4px;  --ez-2: 8px;   --ez-3: 12px;  --ez-4: 16px;
  --ez-6: 24px; --ez-8: 32px;  --ez-12: 48px; --ez-16: 64px; --ez-24: 96px;

  --ez-radius:     10px;
  --ez-radius-lg:  12px;
  --ez-transition: 200ms cubic-bezier(0.22, 1, 0.36, 1);
  --ez-max:        1200px;
  --ez-lecture:    720px;

  --ez-marge:      20px;  /* marge latérale mobile */
}

/* -------------------------------------------------------------------------
   02 — Base
   ------------------------------------------------------------------------- */

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

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

body {
  margin: 0;
  background: var(--ez-ivoire);
  color: var(--ez-noir);
  font-family: var(--ez-texte);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--ez-titre);
  margin: 0;
  line-height: 1.12;
  font-weight: 700;
}

p { margin: 0; }

a {
  color: var(--ez-vert);
  text-decoration: none;
  transition: color var(--ez-transition);
}

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

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

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

strong { font-weight: 600; }

button { font: inherit; }

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

.fond-noir :focus-visible { outline-color: var(--ez-brume); }

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

@media (min-width: 900px) {
  body { font-size: 18px; }
}

/* -------------------------------------------------------------------------
   03 — Utilitaires
   ------------------------------------------------------------------------- */

.wrap {
  max-width: var(--ez-max);
  margin: 0 auto;
  padding: 0 var(--ez-marge);
}

.section { padding: 56px 0; }
.section--serre { padding: 44px 0; }
.section--sans-haut { padding: 0 0 64px; }

.fond-blanc {
  background: var(--ez-blanc);
  border-top: 1px solid var(--ez-trait);
  border-bottom: 1px solid var(--ez-trait);
}

.fond-brume { background: var(--ez-brume); }

.fond-noir {
  background: var(--ez-noir);
  color: var(--ez-blanc);
}

.vert { color: var(--ez-vert); }

.br-desktop { display: none; }

.lecture { max-width: var(--ez-lecture); }

/* Respirations verticales — les seules marges appliquées depuis le HTML. */
.espace-xs { margin-top: 8px; }
.espace-s  { margin-top: 12px; }
.espace-m  { margin-top: 18px; }
.espace-l  { margin-top: 26px; }
.espace-xl { margin-top: 32px; }

.saut-contenu {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--ez-noir);
  color: var(--ez-blanc);
  padding: 12px 20px;
  border-radius: 0 0 var(--ez-radius) 0;
  font-size: 15px;
  font-weight: 600;
}

.saut-contenu:focus {
  left: 0;
  color: var(--ez-blanc);
}

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

@media (min-width: 900px) {
  :root { --ez-marge: 40px; }
  .section { padding: 96px 0; }
  .section--serre { padding: 72px 0; }
  .section--sans-haut { padding: 0 0 112px; }
  .br-desktop { display: inline; }
  .espace-m  { margin-top: 22px; }
  .espace-l  { margin-top: 32px; }
  .espace-xl { margin-top: 52px; }
}

/* Deux sections de même fond qui se suivent additionnent leurs respirations et
   creusent un trou de 192 px là où la charte en demande 96. La seconde ne porte
   donc pas de respiration haute : c'est celle de la première qui fait la
   séparation, et le marqueur de section marque le changement.
   Déclarée après la requête média ci-dessus pour l'emporter sur le raccourci
   `padding` de .section. */
.section--enchainee { padding-top: 0; }

/* -------------------------------------------------------------------------
   04 — Typographie
   ------------------------------------------------------------------------- */

.surtitre {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 1.4px;
  color: var(--ez-vert);
  text-transform: uppercase;
}

.titre-hero {
  font-size: 42px;
  font-weight: 700;
  letter-spacing: -0.8px;
}

.titre-page {
  font-size: 36px;
  font-weight: 700;
  letter-spacing: -0.6px;
}

.titre-section {
  font-size: 29px;
  font-weight: 600;
  letter-spacing: -0.4px;
}

.titre-section--petit {
  font-size: 27px;
  font-weight: 600;
  letter-spacing: -0.4px;
}

.titre-bloc {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.2px;
}

.titre-carte {
  font-size: 19px;
  font-weight: 600;
}

.chapeau {
  font-size: 17px;
  color: var(--ez-gris);
  margin-top: 20px;
  max-width: var(--ez-lecture);
  line-height: 1.6;
}

.texte {
  font-size: 16px;
  color: var(--ez-gris);
  max-width: var(--ez-lecture);
}

.texte + .texte { margin-top: 18px; }

.texte-petit {
  font-size: 15px;
  color: var(--ez-gris);
}

.texte-fort {
  font-size: 16px;
  font-weight: 500;
  color: var(--ez-noir);
}

.numero {
  font-family: var(--ez-titre);
  font-size: 14px;
  font-weight: 600;
  color: var(--ez-vert);
  letter-spacing: 1px;
}

.etiquette {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 1px;
}

.etiquette .vert { font-weight: 500; }

@media (min-width: 900px) {
  .surtitre { font-size: 14px; letter-spacing: 1.6px; }
  .titre-hero { font-size: 76px; letter-spacing: -1.6px; max-width: 860px; }
  .titre-page { font-size: 60px; letter-spacing: -1.2px; max-width: 820px; }
  .titre-section { font-size: 44px; letter-spacing: -0.8px; }
  .titre-section--petit { font-size: 38px; letter-spacing: -0.6px; }
  .titre-bloc { font-size: 25px; }
  .titre-carte { font-size: 21px; }
  .chapeau { font-size: 19px; margin-top: 26px; }
  .texte { font-size: 18px; }
  .texte-petit { font-size: 16px; }
  .texte-fort { font-size: 19px; }
  .numero { font-size: 15px; }
  .etiquette { font-size: 14px; letter-spacing: 1.2px; }
}

/* -------------------------------------------------------------------------
   05 — Marqueur de section
   ------------------------------------------------------------------------- */

.marqueur {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}

.marqueur::before {
  content: "";
  width: 22px;
  height: 2px;
  background: var(--ez-vert);
  flex: none;
}

.marqueur span {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 1.8px;
  color: var(--ez-gris);
  text-transform: uppercase;
}

@media (min-width: 900px) {
  .marqueur { gap: 12px; margin-bottom: 22px; }
  .marqueur::before { width: 28px; }
  .marqueur span { font-size: 12px; }
}

/* -------------------------------------------------------------------------
   06 — Boutons et liens
   ------------------------------------------------------------------------- */

.fleche {
  width: 16px;
  height: 16px;
  flex: none;
  transition: transform var(--ez-transition);
}

.btn:hover .fleche,
.lien-tertiaire:hover .fleche { transform: translateX(4px); }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 54px;
  padding: 0 26px;
  border-radius: var(--ez-radius);
  font-size: 16px;
  font-weight: 600;
  font-family: var(--ez-texte);
  text-align: center;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color var(--ez-transition), color var(--ez-transition),
              border-color var(--ez-transition);
}

.btn--principal {
  background: var(--ez-vert);
  color: var(--ez-blanc);
}

.btn--principal:hover {
  background: var(--ez-vert-fonce);
  color: var(--ez-blanc);
}

.btn--secondaire {
  background: transparent;
  border-color: var(--ez-noir);
  color: var(--ez-noir);
}

.btn--secondaire:hover {
  background: var(--ez-noir);
  color: var(--ez-blanc);
}

.btn--pleine-largeur { width: 100%; }

.btn--compact {
  min-height: 46px;
  padding: 0 22px;
  font-size: 15px;
}

.lien-tertiaire {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  color: var(--ez-noir);
  font-size: 15px;
  font-weight: 600;
}

.lien-tertiaire span {
  border-bottom: 2px solid var(--ez-vert);
  padding-bottom: 3px;
}

.lien-tertiaire .fleche { color: var(--ez-vert); }

.lien-tertiaire:hover { color: var(--ez-vert-fonce); }

.lien-souligne {
  color: var(--ez-vert);
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (min-width: 900px) {
  .fleche { width: 17px; height: 17px; }
  .btn { min-height: 56px; padding: 0 30px; font-size: 17px; }
  .btn--compact { min-height: 46px; padding: 0 22px; font-size: 15px; }
  .btn--pleine-largeur { width: auto; }
  .lien-tertiaire { font-size: 16px; }
  .lien-tertiaire span { padding-bottom: 4px; }
}

/* -------------------------------------------------------------------------
   07 — En-tête et navigation
   ------------------------------------------------------------------------- */

.entete {
  background: var(--ez-ivoire);
  border-bottom: 1px solid var(--ez-trait);
}

.entete__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  min-height: 64px;
}

.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;   /* zone cliquable minimale, cf. charte */
}

.logo__mono { width: 22px; height: 33px; }
.logo__nom  { width: 104px; height: 12px; }

.burger {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: -10px;
  background: none;
  border: 0;
  color: var(--ez-noir);
  cursor: pointer;
}

.burger svg { width: 22px; height: 22px; }

.burger__fermer { display: none; }
.entete.est-ouvert .burger__ouvrir { display: none; }
.entete.est-ouvert .burger__fermer { display: block; }

.nav {
  display: none;
  width: 100%;
  padding-bottom: 12px;
}

.entete.est-ouvert .nav { display: block; }

.nav__liste {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--ez-trait);
}

.nav__lien {
  display: flex;
  align-items: center;
  min-height: 52px;
  border-bottom: 1px solid var(--ez-trait);
  color: var(--ez-noir);
  font-size: 16px;
  font-weight: 500;
}

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

.nav__lien--actif {
  color: var(--ez-vert);
  font-weight: 600;
}

.nav .btn {
  margin-top: 16px;
  width: 100%;
  min-height: 54px;
  font-size: 16px;
}

@media (min-width: 900px) {
  .entete__inner { min-height: 88px; flex-wrap: nowrap; }
  .logo { gap: 14px; }
  .logo__mono { width: 30px; height: 46px; }
  .logo__nom  { width: 132px; height: 16px; }
  .burger { display: none; }

  .nav,
  .entete.est-ouvert .nav {
    display: flex;
    align-items: center;
    gap: 38px;
    width: auto;
    padding-bottom: 0;
  }

  .nav__liste {
    flex-direction: row;
    align-items: center;
    gap: 38px;
    border-top: 0;
  }

  .nav__lien {
    position: relative;
    min-height: 44px;
    border-bottom: 0;
  }

  /* Filet vert qui se déploie depuis la gauche au survol, et reste déployé
     sur la page courante. */
  .nav__lien::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 9px;
    height: 2px;
    background: var(--ez-vert);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--ez-transition);
  }

  .nav__lien:hover::after,
  .nav__lien--actif::after { transform: scaleX(1); }

  .nav .btn { margin-top: 0; width: auto; min-height: 46px; font-size: 15px; }
}

/* -------------------------------------------------------------------------
   08 — Bloc d'accueil et titres de page
   ------------------------------------------------------------------------- */

.hero,
.entete-page {
  position: relative;
  overflow: hidden;
}

.filigrane {
  position: absolute;
  opacity: 0.04;
  pointer-events: none;
  user-select: none;
}

.filigrane--hero {
  right: -90px;
  top: 40px;
  width: 300px;
  height: 456px;
}

/* Même règle que pour les filigranes de section : la hauteur est exprimée en
   pourcentage de l'en-tête, pour que la seule coupure soit celle du bord droit
   de la fenêtre. `width: auto` conserve les proportions du monogramme. */
.filigrane--page {
  right: -80px;
  top: 6%;
  width: auto;
  height: 88%;
}

/* Ces blocs portent aussi la classe .wrap : n'écraser que le padding vertical,
   sinon les marges latérales du .wrap disparaissent. */
.hero__inner,
.entete-page__inner {
  position: relative;
  padding-top: 52px;
  padding-bottom: 40px;
}

.hero .surtitre { margin-bottom: 22px; }
.entete-page .surtitre { margin-bottom: 20px; }

.hero__texte {
  font-size: 17px;
  color: var(--ez-gris);
  margin-top: 24px;
  max-width: 620px;
  line-height: 1.6;
}

.hero__boutons {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 32px;
}

.domaines {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  padding: 8px 0 44px;
}

.domaines div {
  border-top: 1px solid var(--ez-trait);
  padding-top: 10px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 1px;
}

@media (min-width: 900px) {
  .filigrane--hero { right: -180px; top: -60px; width: 640px; height: 972px; }
  .filigrane--page { right: -120px; top: 6%; height: 88%; }
  .hero__inner { padding-top: 104px; padding-bottom: 76px; }
  .entete-page__inner { padding-top: 96px; padding-bottom: 72px; }
  .hero__texte { font-size: 20px; margin-top: 34px; }
  .hero__boutons { flex-direction: row; align-items: center; gap: 16px; margin-top: 44px; }
  .domaines {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 28px;
    padding: 0 0 96px;
  }
  .domaines div { padding-top: 14px; font-size: 14px; letter-spacing: 1.2px; }
}

/* -------------------------------------------------------------------------
   09 — Grilles
   ------------------------------------------------------------------------- */

.grille {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

.grille--2, .grille--3, .grille--4 { grid-template-columns: 1fr; }

.grille--serree { gap: 16px; }

.entete-double {
  display: grid;
  gap: 18px;
  align-items: end;
}

/* En-tête de section accompagné d'un schéma en trait à droite. */
.entete-schema { display: grid; gap: 28px; }

/* Le schéma est un ornement : il ne s'affiche qu'en desktop, là où la colonne
   de droite serait vide. En mobile le texte occupe toute la largeur et il n'y
   a rien à combler. */
.schema {
  display: none;
  width: 100%;
  height: auto;
  fill: none;
  stroke: var(--ez-trait);
  stroke-width: 1.5;
  stroke-linecap: round;
}

.schema__plein { fill: var(--ez-trait); stroke: none; }
.schema__vide { stroke-dasharray: 5 6; }
.schema__loupe { stroke: var(--ez-vert); }

@media (min-width: 900px) {
  .grille--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
  .grille--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
  .grille--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
  .entete-double {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 28px;
  }
  .entete-double > *:first-child { grid-column: span 7; }
  .entete-double > *:last-child  { grid-column: 9 / span 4; }

  .entete-schema {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 40px;
    align-items: center;
  }
  .entete-schema > *:first-child { grid-column: span 7; }
  .entete-schema > .schema { grid-column: 9 / span 4; display: block; }
}

/* -------------------------------------------------------------------------
   10 — Cartes
   ------------------------------------------------------------------------- */

.carte {
  background: var(--ez-blanc);
  border: 1px solid var(--ez-trait);
  border-radius: var(--ez-radius-lg);
  padding: 26px 22px;
}

.carte--ivoire { background: var(--ez-ivoire); }

.carte--avant {
  border: 2px solid var(--ez-vert);
  padding: 25px 21px;
  position: relative;
}

.carte__badge {
  position: absolute;
  top: -12px;
  left: 21px;
  background: var(--ez-vert);
  color: var(--ez-blanc);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.1px;
  padding: 5px 11px;
  border-radius: 6px;
}

.carte__niveau {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 1.3px;
  color: var(--ez-gris);
  text-transform: uppercase;
}

.carte__nom {
  font-size: 24px;
  font-weight: 600;
  margin-top: 6px;
}

.carte__filet {
  height: 1px;
  background: var(--ez-trait);
  margin: 18px 0;
}

.carte__mention {
  font-family: var(--ez-titre);
  font-size: 14px;
  color: var(--ez-gris);
}

.carte__prix {
  font-family: var(--ez-titre);
  font-size: 32px;
  font-weight: 700;
  margin-top: 2px;
}

.carte__prix .carte__mention {
  font-size: 17px;
  font-weight: 500;
}

.carte .liste-prix { margin-top: 0; }
.carte .liste-prix li:first-child { border-top: 0; padding-top: 0; }
.carte .liste-prix li:last-child { border-bottom: 0; padding-bottom: 0; }

.carte__pour-qui {
  font-size: 14px;
  color: var(--ez-gris);
  font-style: italic;
}

/* Accroche des cartes d'offre : hauteur réservée en desktop pour que les
   lignes de prix des trois cartes restent alignées. */
.carte__accroche {
  font-size: 15px;
  color: var(--ez-gris);
  margin-top: 10px;
}

.carte__liste {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin-top: 22px;
  font-size: 14px;
  color: var(--ez-noir);
}

.carte__liste li.est-inclus {
  color: var(--ez-vert);
  font-weight: 600;
}

.carte__liste li.est-titre { font-weight: 600; }

.carte__delai {
  border-top: 1px solid var(--ez-trait);
  margin-top: 26px;
  padding-top: 18px;
  font-size: 14px;
  color: var(--ez-gris);
}

@media (min-width: 900px) {
  .carte { padding: 34px 30px; }
  .carte--avant { padding: 33px 29px; }
  .carte__badge { top: -13px; left: 30px; font-size: 12px; letter-spacing: 1.2px; padding: 6px 12px; }
  .carte__niveau { font-size: 13px; letter-spacing: 1.4px; }
  .carte__nom { font-size: 27px; margin-top: 8px; }
  .carte__filet { margin: 22px 0; }
  .carte__mention { font-size: 15px; }
  .carte__prix { font-size: 38px; }
  .carte__accroche { min-height: 66px; margin-top: 14px; }
}

/* -------------------------------------------------------------------------
   11 — Blocs numérotés (constat, méthode, livraison)
   ------------------------------------------------------------------------- */

.constat {
  display: flex;
  flex-direction: column;
  gap: 28px;
  margin-top: 40px;
}

.constat__item {
  border-top: 2px solid var(--ez-vert);
  padding-top: 16px;
}

.constat__item .numero { display: block; }
.constat__item h3 { margin-top: 10px; }
.constat__item p { margin-top: 8px; }

.methode {
  display: grid;
  grid-template-columns: 1fr;
  gap: 30px;
  margin-top: 34px;
}

/* Chaque étape est posée sur un filet, avec l'amorce d'accent verte à gauche. */
.methode > div {
  position: relative;
  border-top: 1px solid var(--ez-trait);
  padding-top: 24px;
}

.methode > div::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 28px;
  height: 2px;
  background: var(--ez-vert);
}

.methode__numero {
  font-family: var(--ez-titre);
  font-size: 34px;
  font-weight: 700;
  color: var(--ez-vert);
  line-height: 1;
}

.methode h3 { margin-top: 12px; font-size: 19px; font-weight: 600; }
.methode p { margin-top: 8px; }

.livraison {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px 16px;
  margin-top: 30px;
}

.livraison__item {
  border-top: 1px solid var(--ez-trait);
  padding-top: 14px;
}

.livraison__item .numero { display: block; font-size: 12px; }
.livraison__item h3 { margin-top: 8px; font-size: 16px; font-weight: 600; }
.livraison__item p { margin-top: 8px; }

@media (min-width: 900px) {
  .constat {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 40px;
    margin-top: 72px;
  }
  .constat__item { padding-top: 22px; }
  .constat__item h3 { margin-top: 14px; }
  .constat__item p { margin-top: 12px; }

  .methode {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 32px;
    margin-top: 60px;
  }
  .methode__numero { font-size: 44px; }
  .methode h3 { font-size: 20px; margin-top: 20px; }
  .methode p { margin-top: 12px; }

  .livraison {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 36px 32px;
    margin-top: 52px;
  }
  .livraison__item { padding-top: 22px; }
  .livraison__item .numero { font-size: 13px; }
  .livraison__item h3 { font-size: 19px; margin-top: 12px; }
}

/* -------------------------------------------------------------------------
   12 — Comparaison avant / après
   ------------------------------------------------------------------------- */

/* Les cinq constats se répondent deux à deux : « aujourd'hui » a toujours son
   « après ». En desktop, les deux colonnes partagent donc une seule grille —
   `display: contents` fait remonter leurs lignes dans la grille parente — pour
   que chaque ligne soit exactement en face de la sienne. Sans cet alignement,
   les hauteurs divergent dès qu'une phrase passe sur deux lignes et le bloc
   paraît brouillon.

   La grille compte six rangées : l'en-tête et cinq lignes. Si le nombre de
   lignes change, ajuster `grid-template-rows`. */

.comparaison { margin-top: 28px; }

.comparaison__col + .comparaison__col { margin-top: 28px; }

/* En mobile, les deux colonnes s'empilent : la seconde reprend l'aplat de brume
   sous forme de carte. En desktop, `display: contents` fait disparaître cette
   boîte et c'est le pseudo-élément de la grille qui peint la bande. */
.comparaison__col--apres {
  background: var(--ez-brume);
  border-radius: var(--ez-radius-lg);
  padding: 22px 20px;
}

.comparaison__tete {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  color: var(--ez-gris);
  padding-bottom: 14px;
  border-bottom: 2px solid var(--ez-trait);
}

.comparaison__col--apres .comparaison__tete {
  color: var(--ez-vert-fonce);
  border-bottom-color: var(--ez-vert);
}

.comparaison__ligne {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 15px 0;
  font-size: 15px;
  color: var(--ez-gris);
  border-top: 1px solid var(--ez-trait);
}

.comparaison__col > .comparaison__ligne:first-of-type { border-top: 0; }

.comparaison__col--apres .comparaison__ligne { color: var(--ez-noir); }

/* Puces dessinées en CSS : un tiret pour l'état actuel, une coche verte pour
   l'après. Aucune image, aucune police d'icônes. */
.comparaison__ligne::before {
  content: "";
  flex: none;
  width: 10px;
  height: 2px;
  margin-top: 11px;
  background: var(--ez-ciment);
}

.comparaison__col--apres .comparaison__ligne::before {
  width: 6px;
  height: 11px;
  margin: 5px 2px 0;
  background: none;
  border-right: 2px solid var(--ez-vert);
  border-bottom: 2px solid var(--ez-vert);
  transform: rotate(45deg);
}

@media (min-width: 900px) {
  .comparaison {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(6, auto);
    grid-auto-flow: column;
    column-gap: 24px;
    margin-top: 52px;
  }

  .comparaison__col { display: contents; }

  /* Aplat de brume derrière la colonne « après ». Peint par un pseudo-élément
     parce que la colonne, en `display: contents`, n'a plus de boîte à habiller.
     `::before` et non `::after` : un pseudo-élément positionné vient en dernier
     dans l'ordre de peinture et recouvrirait le texte. */
  .comparaison::before {
    content: "";
    position: absolute;
    z-index: 0;
    top: -18px;
    bottom: -18px;
    left: calc(50% + 12px);
    right: 0;
    background: var(--ez-brume);
    border-radius: var(--ez-radius-lg);
  }

  /* Les lignes repassent au-dessus de l'aplat. */
  .comparaison > * > * { position: relative; z-index: 1; }

  .comparaison__col--apres > * { padding-left: 26px; padding-right: 26px; }

  .comparaison__ligne {
    padding-top: 16px;
    padding-bottom: 16px;
    font-size: 16px;
  }
}

/* -------------------------------------------------------------------------
   13 — Liste des domaines (accueil) et blocs de service
   ------------------------------------------------------------------------- */

.domaines-liste {
  display: flex;
  flex-direction: column;
  margin-top: 32px;
}

.domaines-liste__item {
  border-top: 1px solid var(--ez-trait);
  padding: 24px 0;
}

.domaines-liste__item:last-child { border-bottom: 1px solid var(--ez-trait); }

.domaines-liste__item h3 { margin-top: 10px; font-size: 21px; font-weight: 600; }
.domaines-liste__item p { margin-top: 8px; }

.service {
  border-top: 1px solid var(--ez-trait);
  padding-top: 32px;
  margin-top: 32px;
}

.service:first-of-type { margin-top: 40px; }

.service h2 { margin-top: 12px; }

.service__bloc { margin-top: 22px; }

.service__bloc h3 {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--ez-noir);
  font-family: var(--ez-texte);
}

.service__bloc p { margin-top: 8px; }

.service__liste {
  display: flex;
  flex-direction: column;
  margin-top: 12px;
}

.service__liste li {
  border-top: 1px solid var(--ez-trait);
  padding: 14px 0;
  font-size: 15px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Pas de filet sous la dernière ligne : le bloc suivant porte déjà le sien,
   44 px plus bas, et les deux se lisaient comme un doublon. */

.service__liste .prix {
  font-weight: 600;
  color: var(--ez-noir);
  white-space: nowrap;
}

.service__prix {
  display: inline-block;
  margin-top: 22px;
  font-family: var(--ez-titre);
  font-size: 20px;
  font-weight: 600;
}

@media (min-width: 900px) {
  .domaines-liste { margin-top: 60px; }
  .domaines-liste__item {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 28px;
    padding: 40px 0;
    align-items: start;
  }
  .domaines-liste__item > *:nth-child(1) { grid-column: span 3; }
  .domaines-liste__item > *:nth-child(2) { grid-column: span 4; }
  .domaines-liste__item > *:nth-child(3) { grid-column: span 5; }
  .domaines-liste__item h3 { margin-top: 0; font-size: 25px; }
  .domaines-liste__item p { margin-top: 0; }

  .service { padding-top: 44px; margin-top: 44px; }
  .service:first-of-type { margin-top: 56px; }
  .service__bloc { margin-top: 26px; }
  .service__liste li {
    flex-direction: row;
    justify-content: space-between;
    gap: 24px;
    font-size: 16px;
  }
  .service__prix { font-size: 22px; }
}

/* -------------------------------------------------------------------------
   14 — Réalisations
   ------------------------------------------------------------------------- */

.realisations { margin-top: 30px; }

.vignette {
  background: var(--ez-ivoire);
  border: 1px solid var(--ez-trait);
  border-radius: var(--ez-radius-lg);
  overflow: hidden;
}

.vignette__apercu {
  height: 170px;
  background: var(--ez-blanc);
  border-bottom: 1px solid var(--ez-trait);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* Gabarit de navigateur en trait : l'emplacement montre ce qui va y prendre
   place, au lieu de rester une zone vide. */
.squelette {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: var(--ez-trait);
  stroke-width: 1.5;
}

.squelette circle { fill: var(--ez-trait); stroke: none; }
.squelette__champ { fill: var(--ez-trait); stroke: none; opacity: 0.5; }
.squelette__accent { fill: var(--ez-vert); stroke: none; opacity: 0.28; }

.vignette__etiquette {
  position: relative;
  padding-top: 26px;
}

.vignette__mention {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 1.5px;
  color: var(--ez-gris);
}

.vignette__etat {
  font-family: var(--ez-titre);
  font-size: 15px;
  font-weight: 600;
  color: var(--ez-gris);
  margin-top: 6px;
}

.vignette__corps { padding: 20px; }
.vignette__corps h3 { margin-top: 10px; font-size: 20px; font-weight: 600; }
.vignette__corps p { margin-top: 8px; font-size: 14px; }

@media (min-width: 900px) {
  .realisations { margin-top: 52px; }
  .vignette { background: var(--ez-blanc); }
  .vignette__apercu { height: 250px; background: var(--ez-ivoire); }
  .vignette__etiquette { padding-top: 38px; }
  .vignette__mention { font-size: 12px; letter-spacing: 1.6px; }
  .vignette__etat { font-size: 17px; margin-top: 8px; }
  .vignette__corps { padding: 26px 26px 30px; }
  .vignette__corps h3 { font-size: 22px; margin-top: 12px; }
  .vignette__corps p { font-size: 15px; margin-top: 10px; }
}

/* -------------------------------------------------------------------------
   15 — Secteurs, listes simples
   ------------------------------------------------------------------------- */

.liste-filets {
  display: flex;
  flex-direction: column;
  margin-top: 26px;
}

.liste-filets li {
  border-top: 1px solid var(--ez-trait);
  padding: 14px 0;
  font-size: 15px;
  min-height: 44px;
}

.liste-filets li:last-child { border-bottom: 1px solid var(--ez-trait); }

.liste-prix {
  display: flex;
  flex-direction: column;
  margin-top: 28px;
}

.liste-prix li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  border-top: 1px solid var(--ez-trait);
  padding: 14px 0;
  font-size: 15px;
}

.liste-prix li:last-child { border-bottom: 1px solid var(--ez-trait); }

/* Pas de `white-space: nowrap` ici : la liste sert aussi à des valeurs longues
   (la fiche d'identité de la page À propos), et une valeur insécable de 536 px
   faisait déborder la page en mobile. Les montants restent d'un seul tenant
   grâce aux espaces insécables écrits dans le texte (« 90  € »). */
.liste-prix span:last-child {
  font-weight: 500;
  text-align: right;
}

@media (min-width: 900px) {
  .liste-filets li, .liste-prix li { font-size: 16px; }
}

/* -------------------------------------------------------------------------
   16 — Tableau comparatif
   ------------------------------------------------------------------------- */

.comparatif-zone {
  margin-top: 32px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.comparatif {
  width: 100%;
  min-width: 620px;
  border-collapse: collapse;
  text-align: left;
}

.comparatif th,
.comparatif td {
  border-top: 1px solid var(--ez-trait);
  padding: 15px 16px 15px 0;
  font-size: 15px;
  font-weight: 400;
  vertical-align: top;
}

.comparatif thead th {
  border-top: 0;
  padding-top: 0;
  font-family: var(--ez-titre);
  font-size: 17px;
  font-weight: 600;
}

.comparatif thead th.est-avant { color: var(--ez-vert); }

.comparatif tbody th {
  color: var(--ez-gris);
  font-weight: 400;
}

.comparatif .est-vide { color: var(--ez-gris); }
.comparatif .est-option { color: var(--ez-gris); }
.comparatif .est-inclus { color: var(--ez-vert); font-weight: 600; }

.comparatif tfoot th,
.comparatif tfoot td {
  border-top: 2px solid var(--ez-noir);
  padding-top: 20px;
  font-family: var(--ez-titre);
  font-weight: 700;
  font-size: 22px;
}

.comparatif tfoot th {
  font-size: 16px;
  font-weight: 600;
  color: var(--ez-noir);
}

.comparatif tfoot td.est-avant { color: var(--ez-vert); }

.comparatif caption {
  caption-side: bottom;
  padding-top: 16px;
  font-size: 14px;
  color: var(--ez-gris);
  text-align: left;
}

@media (min-width: 900px) {
  .comparatif-zone { margin-top: 44px; overflow-x: visible; }
  .comparatif { min-width: 0; table-layout: fixed; }
  .comparatif caption { display: none; }
}

/* -------------------------------------------------------------------------
   17 — Conditions, FAQ
   ------------------------------------------------------------------------- */

.conditions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

.conditions__item {
  border-top: 2px solid var(--ez-vert);
  padding-top: 18px;
}

.conditions__item h3 {
  font-family: var(--ez-texte);
  font-size: 15px;
  font-weight: 600;
}

.conditions__item p { margin-top: 8px; font-size: 14px; color: var(--ez-gris); }

.faq {
  display: grid;
  grid-template-columns: 1fr;
  gap: 26px;
  margin-top: 30px;
}

.faq h3 { font-size: 17px; font-weight: 600; }
.faq p { margin-top: 8px; font-size: 15px; color: var(--ez-gris); }

@media (min-width: 900px) {
  .conditions { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
  .faq {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 36px 64px;
    margin-top: 48px;
  }
  .faq h3 { font-size: 19px; }
  .faq p { font-size: 16px; margin-top: 10px; }
}

/* -------------------------------------------------------------------------
   18 — Pourquoi Étage Zéro
   ------------------------------------------------------------------------- */

.pourquoi { position: relative; overflow: hidden; }

.pourquoi .filigrane {
  left: -70px;
  top: 40px;
  width: auto;
  height: 395px;
  max-height: calc(100% - 80px);
  opacity: 0.05;
}

.pourquoi__inner { position: relative; }

.pourquoi__filet {
  width: 56px;
  height: 3px;
  background: var(--ez-vert);
  margin-top: 24px;
}

@media (min-width: 900px) {
  /* Coupé par le bord gauche de la fenêtre, pour la même raison. */
  .pourquoi .filigrane { left: -120px; top: 40px; height: 638px; }
  .pourquoi__inner {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 40px;
    align-items: start;
  }
  .pourquoi__titre { grid-column: span 5; }
  .pourquoi__texte { grid-column: 7 / span 6; }
  .pourquoi__filet { margin-top: 28px; }
}

/* -------------------------------------------------------------------------
   19 — Méthode de travail (à propos)
   ------------------------------------------------------------------------- */

.principes {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  margin-top: 32px;
}

.principe {
  border-top: 1px solid var(--ez-trait);
  padding-top: 20px;
}

.principe h3 { font-size: 19px; font-weight: 600; }
.principe p { margin-top: 10px; font-size: 15px; color: var(--ez-gris); }

@media (min-width: 900px) {
  .principes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 40px 48px;
    margin-top: 52px;
  }
  .principe p { font-size: 16px; }
}

/* -------------------------------------------------------------------------
   20 — Formulaire
   ------------------------------------------------------------------------- */

.formulaire {
  background: var(--ez-blanc);
  border: 1px solid var(--ez-trait);
  border-radius: var(--ez-radius-lg);
  padding: 26px 22px;
}

.champs {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

.champ { display: flex; flex-direction: column; }

.champ label {
  font-size: 14px;
  font-weight: 500;
  color: var(--ez-noir);
  margin-bottom: 8px;
}

.champ .facultatif {
  color: var(--ez-gris);
  font-weight: 400;
}

.champ input,
.champ select,
.champ textarea {
  font-family: var(--ez-texte);
  font-size: 16px;
  color: var(--ez-noir);
  background: var(--ez-ivoire);
  border: 1px solid var(--ez-trait);
  border-radius: var(--ez-radius);
  padding: 14px 14px;
  min-height: 52px;
  width: 100%;
  transition: border-color var(--ez-transition);
}

.champ select {
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236E736F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 42px;
}

.champ textarea {
  min-height: 150px;
  resize: vertical;
  line-height: 1.55;
}

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

.champ input:focus,
.champ select:focus,
.champ textarea:focus { border-color: var(--ez-vert); }

.champ--case {
  flex-direction: row;
  align-items: flex-start;
  gap: 12px;
}

.champ--case input {
  width: 22px;
  height: 22px;
  min-height: 0;
  margin: 2px 0 0;
  flex: none;
  accent-color: var(--ez-vert);
  padding: 0;
}

.champ--case label {
  margin-bottom: 0;
  font-weight: 400;
  font-size: 15px;
  color: var(--ez-gris);
  line-height: 1.5;
}

.piege {
  position: absolute;
  left: -9999px;
  opacity: 0;
  height: 0;
  overflow: hidden;
}

.formulaire .btn { margin-top: 24px; }

.formulaire__mention {
  font-size: 14px;
  color: var(--ez-gris);
  margin-top: 18px;
  line-height: 1.5;
}

.formulaire__reponse {
  margin-top: 20px;
  border-radius: var(--ez-radius);
  padding: 16px 18px;
  font-size: 15px;
  line-height: 1.5;
}

.formulaire__reponse[hidden] { display: none; }

.formulaire__reponse--ok {
  background: var(--ez-brume);
  border: 1px solid var(--ez-brume-trait);
  color: var(--ez-noir);
}

.formulaire__reponse--erreur {
  background: var(--ez-ivoire);
  border: 1px solid var(--ez-noir);
  color: var(--ez-noir);
}

/* En mobile, les deux colonnes de la page Contact s'empilent : sans cette
   respiration, le titre « En direct » vient coller à la carte du formulaire.
   En desktop, c'est le `gap` de la grille qui s'en charge. */
.contact-page__infos { margin-top: 48px; }

.contact-direct { margin-top: 40px; }

.contact-direct__item {
  border-top: 1px solid var(--ez-trait);
  padding: 18px 0;
}

.contact-direct__item:last-child { border-bottom: 1px solid var(--ez-trait); }

.contact-direct__label {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 1.4px;
  color: var(--ez-gris);
  text-transform: uppercase;
}

.contact-direct__valeur {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--ez-titre);
  font-size: 19px;
  font-weight: 600;
  color: var(--ez-noir);
  margin-top: 4px;
}

a.contact-direct__valeur:hover { color: var(--ez-vert); }

.contact-direct__precision {
  font-size: 15px;
  color: var(--ez-gris);
  margin-top: 2px;
}

@media (min-width: 900px) {
  .formulaire { padding: 40px 36px; }
  .champs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
  .champ--large { grid-column: span 2; }
  .contact-direct { margin-top: 0; }
  .contact-page {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 48px;
    align-items: start;
  }
  .contact-page__formulaire { grid-column: span 7; }
  .contact-page__infos { grid-column: 9 / span 4; margin-top: 0; }
}

/* -------------------------------------------------------------------------
   21 — Pages légales
   ------------------------------------------------------------------------- */

.texte-legal { max-width: var(--ez-lecture); }

.texte-legal h2 {
  font-size: 21px;
  font-weight: 600;
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid var(--ez-trait);
}

.texte-legal h2:first-of-type { margin-top: 32px; }

.texte-legal p {
  font-size: 16px;
  color: var(--ez-gris);
  margin-top: 14px;
  line-height: 1.6;
}

.texte-legal p strong { color: var(--ez-noir); }

.texte-legal ul {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.texte-legal li {
  font-size: 16px;
  color: var(--ez-gris);
  padding-left: 18px;
  position: relative;
}

.texte-legal li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 11px;
  width: 6px;
  height: 2px;
  background: var(--ez-vert);
}

@media (min-width: 900px) {
  .texte-legal h2 { font-size: 25px; margin-top: 52px; padding-top: 26px; }
  .texte-legal p, .texte-legal li { font-size: 17px; }
}

/* -------------------------------------------------------------------------
   22 — Appel à l'action final
   ------------------------------------------------------------------------- */

.cta__inner { padding-top: 56px; padding-bottom: 56px; }

.cta h2 {
  font-size: 29px;
  font-weight: 600;
  color: var(--ez-blanc);
  letter-spacing: -0.4px;
}

.cta p {
  font-size: 16px;
  color: var(--ez-ciment);
  margin-top: 18px;
  max-width: 560px;
}

.cta .btn { margin-top: 28px; }

@media (min-width: 900px) {
  .cta__inner {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 28px;
    align-items: center;
    padding-top: 92px;
    padding-bottom: 92px;
  }
  .cta__texte { grid-column: span 7; }
  .cta__action { grid-column: 9 / span 4; display: flex; justify-content: flex-end; }
  .cta h2 { font-size: 44px; letter-spacing: -0.8px; }
  .cta p { font-size: 17px; margin-top: 22px; }
  .cta .btn { margin-top: 0; }
}

/* -------------------------------------------------------------------------
   23 — Icônes en trait
   ------------------------------------------------------------------------- */

.icone {
  width: 26px;
  height: 26px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  color: var(--ez-noir);
}

.icone--vert { color: var(--ez-vert); }

/* Icône et numéro sur une même ligne, en tête de bloc. */
.tete-bloc {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
}

.tete-bloc .numero { line-height: 1; }
.tete-bloc + h3 { margin-top: 0; }

.domaines-liste__item .icone,
.service .icone,
.carte > .icone { margin-bottom: 14px; }

.contact-direct .tete-bloc { gap: 10px; margin-bottom: 6px; }
.contact-direct .icone { width: 20px; height: 20px; color: var(--ez-vert); }
.contact-direct__valeur { margin-top: 0; }

/* Les principes de la page À propos reprennent l'amorce verte des étapes. */
.principe { position: relative; }

.principe::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 28px;
  height: 2px;
  background: var(--ez-vert);
}

@media (min-width: 900px) {
  .icone { width: 28px; height: 28px; }
}

/* -------------------------------------------------------------------------
   24 — Filigrane de section
   ------------------------------------------------------------------------- */

.section--decor {
  position: relative;
  overflow: hidden;
}

.section--decor > .wrap { position: relative; }

/* Réservé au desktop : sur mobile le contenu occupe toute la largeur et le
   filigrane passerait derrière du texte courant, ce que la charte interdit. */
.filigrane--section { display: none; }

@media (min-width: 900px) {
  /* Le filigrane ne doit être coupé que par le bord droit de la fenêtre, jamais
     par la limite basse de sa section : une coupure horizontale au milieu d'un
     aplat ivoire, sans filet ni changement de fond pour la justifier, se lit
     comme un défaut d'affichage. D'où le `max-height` : la hauteur est plafonnée
     par celle de la section, et `width: auto` conserve les proportions. */
  .filigrane--section {
    display: block;
    right: -110px;
    top: -50px;
    width: auto;
    height: 577px;
    max-height: calc(100% + 50px);
    opacity: 0.04;
  }
}

/* -------------------------------------------------------------------------
   25 — Apparition au défilement
   ------------------------------------------------------------------------- */

/* La classe .apparitions est posée sur <html> par assets/js/apparition.js,
   avant le premier rendu, sauf si le visiteur a demandé à réduire les
   animations. Sans elle, rien ne bouge : aucun contenu ne dépend du
   JavaScript pour s'afficher.

   L'animation ne joue QUE sur `transform`, jamais sur l'opacité. C'est
   délibéré : une première version faisait apparaître les blocs en fondu depuis
   l'opacité 0, et dans une fenêtre dont le rendu est suspendu — panneau
   d'aperçu, vue embarquée, onglet jamais composité — la transition ne se joue
   pas et des sections entières restaient blanches alors que leur texte était
   bien dans la page. En n'animant qu'un déplacement de 18 px, le pire des cas
   est un bloc posé 18 px plus bas que prévu : invisible à l'œil, et jamais un
   trou dans la page.

   Cette liste de sélecteurs est reprise à l'identique dans apparition.js. */

.apparitions .hero__inner > *,
.apparitions .entete-page__inner > *,
.apparitions .domaines > div,
.apparitions .marqueur,
.apparitions .titre-section,
.apparitions .titre-section--petit,
.apparitions .titre-bloc,
.apparitions .chapeau,
.apparitions .constat__item,
.apparitions .comparaison,
.apparitions .domaines-liste__item,
.apparitions .vignette,
.apparitions .carte,
.apparitions .livraison__item,
.apparitions .methode > div,
.apparitions .principe,
.apparitions .conditions__item,
.apparitions .faq > div,
.apparitions .service,
.apparitions .liste-prix,
.apparitions .comparatif-zone,
.apparitions .formulaire,
.apparitions .contact-direct__item,
.apparitions .texte-legal > *,
.apparitions .schema,
.apparitions .cta__texte,
.apparitions .cta__action {
  transform: translateY(18px);
  transition: transform 320ms ease-out;
}

.apparitions .est-visible { transform: none; }

/* -------------------------------------------------------------------------
   26 — Pied de page
   ------------------------------------------------------------------------- */

.pied {
  background: var(--ez-noir);
  color: var(--ez-blanc);
  border-top: 1px solid var(--ez-trait-noir);
}

.pied__inner { padding-top: 44px; padding-bottom: 32px; }

.pied__signature {
  font-size: 14px;
  color: var(--ez-ciment);
  margin-top: 16px;
}

.pied__estampille {
  font-size: 11px;
  letter-spacing: 1.4px;
  color: var(--ez-ciment);
  margin-top: 28px;
}

.pied__titre {
  font-size: 12px;
  letter-spacing: 1.4px;
  color: var(--ez-ciment);
  margin-bottom: 14px;
  text-transform: uppercase;
}

.pied__colonne { margin-top: 32px; }

.pied__liste {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 15px;
}

.pied__liste a,
.pied__liste span {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--ez-blanc);
}

.pied__liste a:hover { color: var(--ez-brume); }

.pied__liste .discret { color: var(--ez-ciment); }

.pied__bas {
  border-top: 1px solid var(--ez-trait-noir);
  margin-top: 28px;
  padding-top: 20px;
  font-size: 12px;
  color: var(--ez-ciment);
  line-height: 1.9;
}

/* Les marges négatives compensent exactement la rembourrure : la zone
   cliquable atteint 44 px sans écarter la ligne de bas de page. */
.pied__bas a {
  color: var(--ez-ciment);
  display: inline-block;
  padding: 11px 0;
  margin: -11px 0;
}

.pied__bas a:hover { color: var(--ez-blanc); }

@media (min-width: 900px) {
  .pied__inner { padding-top: 64px; padding-bottom: 40px; }
  .pied__grille {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 28px;
  }
  .pied__marque  { grid-column: span 5; }
  .pied__colonne { margin-top: 0; }
  .pied__colonne--nav     { grid-column: span 3; }
  .pied__colonne--contact { grid-column: span 4; }
  .pied__signature { font-size: 15px; margin-top: 20px; }
  .pied__estampille { font-size: 12px; letter-spacing: 1.6px; margin-top: 26px; }
  .pied__titre { font-size: 12px; margin-bottom: 18px; }
  .pied__liste { gap: 2px; }
  .pied__bas {
    margin-top: 48px;
    padding-top: 24px;
    font-size: 13px;
    line-height: 1.7;
  }
}