/* ============================================================
   So'Clean — système de design « Réservation, blocs nets »
   Source : charte graphique (palette p.7, typo p.9) + maquette C
   Poppins = titres & interface · Inter = texte courant
   ============================================================ */

:root {
  /* Palette officielle — charte p.7 */
  --graphite: #2B2F33;
  --bleu: #0071BC;
  --bleu-ciel: #4FA6DD;
  --ice: #E9F3FA;
  --papier: #FBFCFE;
  /* Neutres dérivés de la maquette */
  --blanc: #FFFFFF;
  --hairline: #E3E9F0;
  --texte: #2B2F33;
  --texte-2: #5A6570;
  --texte-3: #626E7B;
  --fond-input: #F5F7F9;
  /* Typo */
  --ff-titre: "Poppins", "Segoe UI", system-ui, sans-serif;
  --ff-texte: "Inter", "Segoe UI", system-ui, sans-serif;
  /* Géométrie */
  --r-panel: 16px;
  --r-card: 12px;
  --r-btn: 8px;
  /* Hauteur commune aux boutons et aux champs : côte à côte, ils tombent au
     même pixel quelle que soit la balise ou le type de champ. */
  --h-controle: 48px;
  --gabarit: 1206px;
  --ombre-hover: 0 10px 24px -12px rgba(43, 47, 51, .22);
  --ombre-header: 0 6px 18px -14px rgba(43, 47, 51, .28);
  --ombre-douce: 0 1px 2px rgba(43, 47, 51, .03), 0 14px 36px -20px rgba(43, 47, 51, .16);
  /* Courbes de mouvement — un seul vocabulaire pour tout le site */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --opacite-inactif: .4;
}

/* ---------- Reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 96px; }
/* L attribut hidden l emporte sur tout display défini plus loin : sans cette
   règle, un bloc masqué mais stylé en grid ou flex continue d occuper sa place
   (le résultat du test de zone laissait ainsi 50 px de vide sous le champ). */
[hidden] { display: none !important; }
body {
  margin: 0;
  background: var(--papier);
  color: var(--texte);
  font-family: var(--ff-texte);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { max-width: 100%; height: auto; display: block; }
/* figure et blockquote portent 40 px de marge par défaut dans les navigateurs :
   les avis rendus depuis Supabase (<figure><blockquote>) s'en trouvaient
   rétrécis de 80 px dans leur colonne. */
figure, blockquote { margin: 0; }
a { color: var(--bleu); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
::selection { background: var(--bleu); color: #fff; }
/* Les exemples se distinguent de la saisie : italique et gris plus clair. */
::placeholder { color: var(--texte-3); opacity: 1; font-style: italic; }
input, textarea, select { caret-color: var(--bleu); }
:focus-visible { outline: 2px solid var(--bleu); outline-offset: 2px; border-radius: 4px; }
* { scrollbar-width: thin; scrollbar-color: #C4D3E0 transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: #C4D3E0; border-radius: 8px; border: 2px solid var(--papier); }
*::-webkit-scrollbar-track { background: transparent; }

h1, h2, h3, h4 { font-family: var(--ff-titre); color: var(--graphite); line-height: 1.18; margin: 0 0 .5em; text-wrap: balance; }
h1 { font-size: 42px; font-weight: 700; letter-spacing: -.015em; }
h2 { font-size: 29px; font-weight: 700; letter-spacing: -.01em; }
h3 { font-size: 19px; font-weight: 600; }
h4 { font-size: 16px; font-weight: 600; }
p { margin: 0 0 1em; max-width: 72ch; }
p:last-child { margin-bottom: 0; }
.muted { color: var(--texte-2); }
strong { color: var(--graphite); font-weight: 600; }

/* ---------- Utilitaires de marque ---------- */
.overline {
  font-family: var(--ff-titre);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--bleu);
  margin: 0 0 14px;
}
.wrap { max-width: var(--gabarit); margin: 0 auto; padding: 0 32px; }

/* ---------- Boutons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--ff-titre); font-size: 12.5px; font-weight: 600;
  /* line-height explicite : <button> n'hérite pas de celui du body, un même
     bouton mesurait 50 px en <a> et 48 px en <button>. */
  line-height: 20px; min-height: var(--h-controle);
  letter-spacing: .08em; text-transform: uppercase;
  padding: 13px 26px; border-radius: var(--r-btn);
  border: 1px solid transparent; cursor: pointer; text-decoration: none;
  transition: background-color .16s ease, color .16s ease, box-shadow .16s ease, transform .16s ease;
  white-space: nowrap;
}
.btn:hover { text-decoration: none; }
@media (hover: hover) and (pointer: fine) {
  .btn:hover { transform: translateY(-1px); box-shadow: var(--ombre-hover); }
}
.btn:active { transform: translateY(0); box-shadow: none; }
.btn-primaire { background: var(--bleu); color: #fff; }
.btn-primaire:hover { background: #0067AB; color: #fff; }
.btn-secondaire { background: var(--blanc); color: var(--graphite); border-color: #C9D3DC; }
.btn-secondaire:hover { border-color: var(--graphite); color: var(--graphite); }
.btn-blanc { background: var(--blanc); color: var(--graphite); }
.btn-blanc:hover { color: var(--bleu); }
.btn-bloc { width: 100%; }
.btn[disabled], .btn.est-inactif { opacity: var(--opacite-inactif); pointer-events: none; }

/* ---------- Header ---------- */
.header {
  position: sticky; top: 0; z-index: 50;
  background: var(--blanc);
  border-bottom: 1px solid var(--hairline);
  transition: box-shadow .2s ease;
}
.header.est-scrolle { box-shadow: var(--ombre-header); }
.header-inner { display: flex; align-items: center; gap: 28px; height: 80px; }
.header-logo img { width: 144px; height: auto; }
/* Le bouton hors nav ne sert qu'au mobile (à côté du burger) */
.header-inner > .btn { display: none; }
.nav { display: flex; align-items: center; gap: 26px; margin-left: auto; }
.nav a {
  font-family: var(--ff-titre); font-size: 13.5px; font-weight: 500;
  color: var(--graphite);
  /* Un libellé de menu ne se coupe jamais en deux lignes. */
  white-space: nowrap;
}
.nav a:hover { color: var(--bleu); text-decoration: none; }
.nav a.est-actif { color: var(--bleu); font-weight: 600; }
/* Le bouton Réserver vit dans la nav : « .nav a » l'emporterait sur « .btn-primaire »
   et rendrait son texte graphite (puis bleu sur bleu au survol). */
.nav a.btn-primaire,
.nav a.btn-primaire:hover { color: #fff; }
.header .btn { margin-left: 4px; }
.burger {
  display: none; margin-left: auto;
  background: none; border: 0; padding: 10px; cursor: pointer; border-radius: 8px;
}
.burger svg { width: 24px; height: 24px; stroke: var(--graphite); }

/* ---------- Hero (accueil) ---------- */
.hero {
  padding: 76px 0 24px;
  background: radial-gradient(760px 380px at 84% -22%, var(--ice) 0%, transparent 68%);
}
/* Entrée signée de l'accueil : titre → intro → visuel → carte, en cascade courte */
@media (prefers-reduced-motion: no-preference) {
  .hero-haut > div, .hero-haut > .hero-intro, .hero-bas > .hero-visuel {
    animation: hero-entre .56s var(--ease-out) both;
  }
  .hero-haut > .hero-intro { animation-delay: 90ms; }
  .hero-bas > .hero-visuel { animation-delay: 150ms; }
  /* La carte cumule l'entrée et le halo permanent : sans cette règle,
     « animation » (raccourci) écraserait le halo, plus faiblement spécifique. */
  .hero-bas > .carte-resa {
    animation:
      hero-entre .56s var(--ease-out) 210ms both,
      halo-carte 9s ease-in-out 210ms infinite;
  }
}
@keyframes hero-entre {
  from { opacity: 0; transform: translateY(14px); }
}
.hero-haut { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 48px; align-items: end; margin-bottom: 36px; }
.hero h1 { font-size: 54px; margin: 0; }
.hero h1 .accent { color: var(--bleu); }
.hero-intro { color: var(--texte-2); font-size: 15.5px; max-width: 46ch; }
.hero-bas { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 48px; align-items: stretch; }
.hero-visuel {
  position: relative;
  border-radius: var(--r-panel);
  overflow: hidden;
  background: var(--ice);
  border: 1px solid var(--hairline);
  min-height: 420px;
  display: flex;
  align-items: stretch;
  justify-content: stretch;
  box-shadow: var(--ombre-douce);
  padding: 0;
}
.hero-visuel img, .hero-visuel svg {
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: cover;
  display: block;
  transition: transform .4s var(--ease-out);
}
.hero-visuel:hover img {
  transform: scale(1.02);
}

/* Pastilles flottantes de réassurance */
.hero-badge {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--hairline);
  border-radius: 12px;
  box-shadow: 0 10px 24px -6px rgba(43, 47, 51, 0.10), 0 4px 8px -2px rgba(0, 113, 188, 0.06);
  z-index: 2;
  pointer-events: none;
  transition: transform .25s ease, box-shadow .25s ease;
}

.badge-top-left { top: 16px; left: 16px; }
.badge-top-right { top: 16px; right: 16px; }
.badge-bottom-left { bottom: 16px; left: 16px; }
.badge-bottom-right { bottom: 16px; right: 16px; }

.badge-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--ice);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.badge-icon svg {
  width: 17px;
  height: 17px;
  stroke: var(--bleu);
}
.badge-icon.badge-etoiles {
  background: #FFF8E7;
}
.badge-icon.badge-etoiles svg {
  stroke: none;
}
.badge-icon.badge-eco {
  background: #EAF7EE;
}
.badge-icon.badge-eco svg {
  stroke: #1B8347;
}

.badge-texte {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}
.badge-texte strong {
  font-family: var(--ff-titre);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--graphite);
  display: flex;
  align-items: center;
  gap: 4px;
}
.badge-texte span {
  font-size: 11px;
  color: var(--texte-2);
}
.badge-highlight {
  color: #FFB800;
  font-size: 12px;
}

@media (prefers-reduced-motion: no-preference) {
  .badge-top-left { animation: flotter-1 5.5s ease-in-out infinite; }
  .badge-bottom-right { animation: flotter-2 6s ease-in-out infinite; }
}

@keyframes flotter-1 {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}
@keyframes flotter-2 {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(5px); }
}

@media (max-width: 640px) {
  .hero-badge { padding: 6px 10px; gap: 7px; }
  .badge-icon { width: 26px; height: 26px; }
  .badge-icon svg { width: 14px; height: 14px; }
  .badge-texte strong { font-size: 11px; }
  .badge-texte span { font-size: 9.5px; }
  .badge-top-left { top: 10px; left: 10px; }
  .badge-bottom-right { bottom: 10px; right: 10px; }
}

/* Carte de réservation express (hero + encarts) */
.carte-resa {
  position: relative;
  /* La carte est étirée à la hauteur de l illustration voisine : sur grand
     écran, les champs passent sur deux colonnes et le contenu devient plus
     court que le cadre. On centre le contenu pour répartir l excédent en haut
     et en bas, au lieu de le laisser tomber en bloc sous la dernière ligne. */
  display: flex; flex-direction: column; justify-content: center;
  background: var(--blanc);
  border: 1.5px solid var(--bleu);
  border-radius: 14px;
  padding: 26px;
  /* Halo bleuté qui respire en boucle, discret. En box-shadow plutôt qu'en
     pseudo-élément flouté : une ombre ne participe pas à la mise en page, donc
     le halo ne peut pas provoquer de débordement horizontal de la page. */
  box-shadow:
    var(--ombre-douce),
    0 8px 30px -14px rgba(0, 113, 188, .14),
    0 0 44px -20px rgba(79, 166, 221, .10);
}
@media (prefers-reduced-motion: no-preference) {
  .carte-resa { animation: halo-carte 9s ease-in-out infinite; }
  /* La respiration s'interrompt pendant la saisie : pas de scintillement
     dans le dos de quelqu'un qui remplit le formulaire. */
  .carte-resa:focus-within { animation-play-state: paused; }
}
@keyframes halo-carte {
  0%, 100% {
    border-color: var(--bleu);
    box-shadow:
      var(--ombre-douce),
      0 8px 30px -14px rgba(0, 113, 188, .12),
      0 0 42px -20px rgba(79, 166, 221, .08);
  }
  50% {
    border-color: var(--bleu-ciel);
    box-shadow:
      var(--ombre-douce),
      0 10px 44px -12px rgba(0, 113, 188, .26),
      0 0 70px -16px rgba(79, 166, 221, .20);
  }
}
/* Titre de la carte : plus affirmé que les overlines de section */
.carte-resa .overline {
  color: var(--graphite);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .06em;
  margin-bottom: 20px;
}
/* Les libellés en capitales font office de titres de section : c est
   au-dessus d eux que l air compte, pas entre eux et leur champ. */
.carte-resa .champ { margin-bottom: 18px; }
/* Dans la grille, l écart de grille suffit : la marge des champs s y
   ajoutait et doublait l espace (24 px au lieu de 12). */
.carte-resa .grille-2 { margin-bottom: 18px; }
.carte-resa .grille-2 > .champ { margin-bottom: 0; }
.carte-resa-note { font-size: 12.5px; color: var(--texte-2); text-align: center; margin: 12px 0 0; }
/* Deux colonnes tant qu elles tiennent : en dessous, les champs passaient
   sous 120 px et coupaient leur exemple (« Ex. : 06 12 34 56 78 »). */
.grille-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }

/* ---------- Bande « En bref » ---------- */
.en-bref {
  background: var(--blanc); border: 1px solid var(--hairline); border-radius: var(--r-panel);
  display: grid; grid-template-columns: repeat(4, 1fr);
  padding: 34px 10px; margin: 52px 0 0;
  box-shadow: var(--ombre-douce);
}
.en-bref > div { text-align: center; padding: 4px 18px; border-left: 1px solid var(--hairline); }
.en-bref > div:first-child { border-left: 0; }
/* margin: 0 explicite — ces libellés sont des <p> et hériteraient sinon
   du margin-bottom: 1em global, qui creusait un vide sous le chiffre. */
.chiffre { font-family: var(--ff-titre); font-size: 33px; font-weight: 700; color: var(--bleu); line-height: 1.1; margin: 0; }
.chiffre-legende {
  font-family: var(--ff-titre); font-size: 10px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--texte-3);
  margin: 5px 0 0; line-height: 1.35;
}

/* ---------- Sections ---------- */
.section { padding: 56px 0 0; }
.section:last-of-type { padding-bottom: 84px; }
.section-titre { margin-bottom: 28px; font-size: 31px; }

/* ---------- Cartes service / étapes ---------- */
.grille-cartes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.grille-cartes.cols-3 { grid-template-columns: repeat(3, 1fr); }
.carte {
  background: var(--ice); border-radius: var(--r-card);
  padding: 20px; display: flex; flex-direction: column; gap: 12px;
  transition: transform .16s ease, box-shadow .16s ease;
}
a.carte { color: inherit; }
a.carte:hover { text-decoration: none; }
@media (hover: hover) and (pointer: fine) {
  a.carte:hover { transform: translateY(-2px); box-shadow: var(--ombre-hover); }
}
.carte-num {
  font-family: var(--ff-titre); font-size: 11px; font-weight: 600;
  letter-spacing: .14em; color: var(--bleu);
}
/* 4/3 plutôt que 16/10 : les illustrations de la série sont carrées et se
   trouvaient à l'étroit — le cadre panoramique laissait un quart de vide. */
.carte-visuel { border-radius: 8px; overflow: hidden; background: var(--ice); aspect-ratio: 4 / 3; padding: 0; }
.carte-visuel img, .carte-visuel svg { width: 100%; height: 100%; object-fit: cover; display: block; }
.carte h3 { margin: 2px 0 0; font-size: 16.5px; }
.carte p { font-size: 13.5px; color: var(--texte-2); line-height: 1.55; margin: 0; }
/* Cartes étapes avec photo pleine et texte par-dessus */
.carte.carte-etape-fond {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  min-height: 380px;
  padding: 185px 20px 24px 20px;
  border-radius: var(--r-card);
  color: #ffffff;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  grid-row: auto;
  border: 0;
  background: var(--graphite);
}
.carte-etape-fond .etape-degrade {
  background: linear-gradient(to top, rgba(10, 15, 25, 0.95) 0%, rgba(10, 15, 25, 0.75) 55%, rgba(10, 15, 25, 0.25) 85%, rgba(10, 15, 25, 0.1) 100%);
}
.carte-etape-fond .carte-etape-contenu {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.carte-etape-fond .carte-num {
  color: #ffffff;
  font-weight: 700;
  font-size: 11.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.8);
  display: inline-block;
}
.carte-etape-fond h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: #ffffff;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.85), 0 1px 3px rgba(0, 0, 0, 0.95);
}
.carte-etape-fond p {
  color: rgba(255, 255, 255, 0.95);
  font-size: 13.5px;
  line-height: 1.55;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.85);
  margin: 0;
}
.carte-etape-fond:hover .etape-fond img {
  transform: scale(1.05);
}
/* En rangée, un titre qui tient sur une ligne remontait son paragraphe de
   20 px par rapport aux cartes voisines : deux lignes sont réservées, les
   textes démarrent tous sur la même ligne de base. */
@supports (grid-template-rows: subgrid) {
  @media (min-width: 901px) {
    /* num · visuel · titre · texte : quatre rangées partagées par les cartes */
    .grille-cartes:not(.grille-etapes-accueil) .carte {
      display: grid;
      grid-template-rows: subgrid;
      grid-row: span 4;
      align-content: start;
    }
  }
}
@supports not (grid-template-rows: subgrid) {
  @media (min-width: 901px) {
    .grille-cartes:not(.grille-etapes-accueil) .carte h3 { min-height: calc(2 * 1.18em); }
  }
}

/* ---------- Bande sombre CTA ---------- */
.bande-sombre {
  background: linear-gradient(135deg, #33383D 0%, var(--graphite) 55%);
  border-radius: var(--r-panel);
  padding: 48px 54px;
  display: flex; align-items: center; justify-content: space-between; gap: 36px;
  color: #fff;
  box-shadow: 0 18px 44px -24px rgba(43, 47, 51, .45);
}
.bande-sombre .overline { color: #9FB4C6; margin-bottom: 10px; }
.bande-sombre h2 { color: #fff; margin: 0 0 8px; }
.bande-sombre p { color: #B9C2CB; font-size: 14.5px; margin: 0; }

/* ---------- Layout page intérieure : sidebar + contenu ---------- */
.page { padding: 56px 0 80px; }
.page-grille { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 44px; align-items: start; }
.sidebar { position: sticky; top: 100px; display: flex; flex-direction: column; gap: 26px; }
.sidebar h1 { font-size: 38px; margin-bottom: 10px; }
.sidebar-intro { font-size: 14.5px; color: var(--texte-2); }
.sommaire { border-top: 1px solid var(--hairline); }
.sommaire a {
  display: flex; justify-content: space-between; align-items: center;
  padding: 13px 2px; border-bottom: 1px solid var(--hairline);
  font-family: var(--ff-titre); font-size: 13.5px; font-weight: 600; color: var(--graphite);
}
.sommaire a::after { content: "→"; color: var(--bleu); font-weight: 500; }
.sommaire a:hover { color: var(--bleu); text-decoration: none; }
.contenu { display: flex; flex-direction: column; gap: 28px; min-width: 0; }

/* ---------- Panneaux ---------- */
.panneau {
  background: var(--blanc); border: 1px solid var(--hairline);
  border-radius: var(--r-panel); padding: 36px 40px;
  box-shadow: var(--ombre-douce);
}
.panneau-entete {
  display: flex; align-items: center; gap: 10px; margin-bottom: 22px;
  font-family: var(--ff-titre); font-size: 12px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--graphite);
}
.panneau-entete::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--bleu); flex: none; }
.panneau-sous-titre { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--texte-3); margin: -14px 0 22px; font-family: var(--ff-titre); font-weight: 500; }

/* ---------- Tableaux de la maquette ---------- */
.tableau { width: 100%; border-collapse: collapse; }
.tableau caption { text-align: left; }
.tableau thead th {
  font-family: var(--ff-titre); font-size: 10.5px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--texte-3);
  text-align: left; padding: 0 0 10px; border-bottom: 2px solid var(--graphite);
}
.tableau thead th:last-child { text-align: right; }
/* Retrait horizontal identique sur toutes les cellules : les lignes mises en
   avant le portaient seules, pour loger leur fond arrondi, et leur texte se
   décalait de 16 px par rapport aux autres lignes. */
.tableau th, .tableau td { padding-left: 16px; padding-right: 16px; }
.tableau td { padding-top: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--hairline); vertical-align: top; }
.tableau td:last-child { text-align: right; font-weight: 600; color: var(--graphite); white-space: nowrap; font-variant-numeric: tabular-nums; }
.tableau .libelle { font-weight: 600; color: var(--graphite); }
.tableau .sous-libelle { display: block; font-size: 13px; color: var(--texte-3); font-weight: 400; margin-top: 2px; }
.tableau tr.mise-en-avant td { background: var(--fond-input); border-bottom: 0; }
.tableau tr.mise-en-avant td:first-child { border-radius: 8px 0 0 8px; }
.tableau tr.mise-en-avant td:last-child { border-radius: 0 8px 8px 0; }
.tableau tr.mise-en-avant + tr.mise-en-avant td { border-top: 1px solid var(--hairline); }

/* ---------- Listes à puces marque ---------- */
.liste-coche { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.liste-coche li { display: flex; gap: 12px; align-items: flex-start; color: var(--texte-2); font-size: 14.5px; }
.liste-coche svg { width: 18px; height: 18px; flex: none; margin-top: 3px; color: var(--bleu); }

/* ---------- Formulaires ---------- */
.champ { display: flex; flex-direction: column; gap: 7px; }

.champ label {
  font-family: var(--ff-titre); font-size: 10.5px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--graphite);
}
.champ input, .champ select, .champ textarea {
  font-family: var(--ff-texte); font-size: 14.5px; color: var(--graphite);
  background: var(--blanc); border: 1px solid #DCE4EC; border-radius: 8px;
  /* line-height explicite : sans elle, input[type=date] se calait 2 px plus
     haut que les autres champs (hauteur du widget natif). */
  line-height: 20px; padding: 13px 14px; width: 100%;
  transition: border-color .16s ease, background-color .16s ease;
}
/* Un champ simple et un bouton posés côte à côte tombent au même pixel.
   Hauteur imposée, pas seulement minimale : le widget natif de input[type=date]
   se cale sinon 2 px plus haut que les champs texte. */
.champ input:not([type="checkbox"]):not([type="radio"]), .champ select { height: var(--h-controle); }
.champ select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' stroke='%235A6570' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 38px; }
.champ input:focus, .champ select:focus, .champ textarea:focus {
  border-color: var(--bleu); background: var(--blanc); outline: none;
}
.champ input.est-invalide, .champ select.est-invalide, .champ textarea.est-invalide { border-color: #C6362E; background: #FDF3F2; }
.champ .aide { font-size: 12.5px; color: var(--texte-3); }
.champ-erreur { font-size: 12.5px; color: #C6362E; display: none; }
.champ.a-erreur .champ-erreur { display: block; }
.form-grille { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form-grille .pleine-largeur { grid-column: 1 / -1; }
textarea { min-height: 110px; resize: vertical; }

/* ---------- Tunnel de réservation ---------- */
.tunnel-onglets { display: flex; gap: 26px; border-bottom: 2px solid var(--hairline); margin-bottom: 30px; flex-wrap: wrap; }
.tunnel-onglet {
  font-family: var(--ff-titre); font-size: 11.5px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--texte-3);
  padding: 0 2px 14px; margin-bottom: -2px; border: 0; background: none; cursor: pointer;
  border-bottom: 2px solid transparent; display: flex; gap: 8px; align-items: center;
  transition: color .16s ease, border-color .16s ease;
}
.tunnel-onglet .num { color: inherit; }
.tunnel-onglet.est-actif { color: var(--bleu); border-bottom-color: var(--bleu); }
.tunnel-onglet.est-fait { color: var(--graphite); }
.tunnel-onglet:disabled { cursor: default; opacity: 1; color: #75818E; }
.tunnel-etape { display: none; }
.tunnel-etape.est-active { display: block; }
.tunnel-actions { display: flex; justify-content: space-between; gap: 16px; margin-top: 28px; }
.tunnel-actions > .btn:only-child { margin-left: auto; }
.tunnel-actions .btn-retour { background: none; border: 0; color: var(--texte-2); font-family: var(--ff-titre); font-size: 12.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; padding: 14px 8px; }
.tunnel-actions .btn-retour:hover { color: var(--graphite); }
.creneaux { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
.creneau { position: relative; }
.creneau input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.creneau > span {
  display: block; text-align: center; padding: 12px 8px;
  background: var(--fond-input); border: 1px solid transparent; border-radius: 8px;
  font-family: var(--ff-titre); font-size: 13px; font-weight: 600; color: var(--graphite);
  transition: border-color .16s ease, background-color .16s ease, color .16s ease;
}
/* .est-choisi (posée par app.js) double le :checked : le rendu du combinateur
   « + » sur les groupes radio s'est montré instable dans Chrome. */
.creneau input:checked + span,
.creneau.est-choisi > span { background: var(--bleu); color: #fff; }
.creneau input:disabled + span,
.creneau.est-desactive > span {
  opacity: .45;
  background: var(--ice);
  color: var(--texte-3);
  cursor: not-allowed;
  border-color: #E2E8F0;
  text-decoration: line-through;
}
.creneau input:disabled { cursor: not-allowed; }
.creneau input:focus-visible + span { outline: 2px solid var(--bleu); outline-offset: 2px; }
.creneau:not(.est-choisi):not(.est-desactive) input:not(:checked):hover + span { border-color: var(--bleu); }
.case-option { display: flex; gap: 12px; align-items: flex-start; background: var(--fond-input); border-radius: 8px; padding: 14px 16px; cursor: pointer; }
.case-option input { width: 17px; height: 17px; margin-top: 3px; accent-color: var(--bleu); flex: none; }
.case-option .titre { font-weight: 600; color: var(--graphite); font-size: 14.5px; }
.case-option .detail { font-size: 13px; color: var(--texte-2); }
/* Un lien de trois mots ne se coupe pas en fin de ligne. */
.case-option .detail a { white-space: nowrap; }

/* ---------- Récapitulatif façon ticket de caisse ----------
   .ticket-tenue porte le sticky et l'ombre (drop-shadow épouse la découpe
   crantée, contrairement à box-shadow) ; .ticket porte le papier + le mask. */
.ticket-tenue {
  position: sticky; top: 90px;
  filter: drop-shadow(0 1px 2px rgba(43, 47, 51, .10)) drop-shadow(0 14px 22px rgba(43, 47, 51, .13));
}
.recap {
  --ff-ticket: ui-monospace, "Cascadia Mono", Consolas, "Courier New", monospace;
  --dent: 14px;
  background: #FEFEFC; padding: 30px 24px 24px; border-radius: 3px 3px 0 0;
  /* Déchirure en bas seulement : en haut, le ticket « sort de l'imprimante ». */
  mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / var(--dent) 100%;
}
.ticket-tete { text-align: center; }
.ticket-tete img { display: block; margin: 0 auto 10px; }
.ticket-marque { font-family: var(--ff-titre); font-size: 16px; font-weight: 700; letter-spacing: .26em; color: var(--graphite); text-indent: .26em; }
.ticket-coord { font-family: var(--ff-ticket); font-size: 11px; line-height: 1.6; color: var(--texte-2); margin-top: 6px; }
.ticket-meta {
  display: flex; justify-content: space-between; gap: 10px;
  font-family: var(--ff-ticket); font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--texte-2); margin: 16px 0 8px;
}
.ticket-sep { border-top: 1.5px dashed #C7CDD4; margin: 4px 0; }
/* Lignes de produits resserrées : le ticket se lit en bloc. */
.ticket .recap-ligne { border-bottom: 0; padding: 5px 0; font-family: var(--ff-ticket); font-size: 13px; line-height: 1.45; }
.ticket .recap-ligne .det { font-family: var(--ff-ticket); }
.ticket .recap-total {
  border-top: 3px double var(--graphite); border-bottom: 3px double var(--graphite);
  margin-top: 10px; padding: 13px 0;
}
.ticket .recap-total .lib { font-family: var(--ff-ticket); letter-spacing: .08em; }
.ticket .recap-total .val { font-family: var(--ff-ticket); }
.ticket .recap-note { font-family: var(--ff-ticket); font-size: 11.5px; line-height: 1.55; }
.ticket-barres {
  height: 38px; width: 78%; margin: 18px auto 8px;
  background: repeating-linear-gradient(90deg,
    var(--graphite) 0 1.5px, transparent 1.5px 3.5px,
    var(--graphite) 3.5px 6px, transparent 6px 7px,
    var(--graphite) 7px 8px, transparent 8px 12px);
}
.ticket-merci { text-align: center; font-family: var(--ff-ticket); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--texte-2); }
.recap-ligne { display: flex; justify-content: space-between; gap: 14px; padding: 13px 0; border-bottom: 1px solid var(--hairline); font-size: 14.5px; }
.recap-ligne .lib { color: var(--graphite); font-weight: 600; }
.recap-ligne .det { display: inline; font-size: 12.5px; color: var(--texte-3); font-weight: 400; margin-left: 2px; }
.recap-ligne .val { font-weight: 600; color: var(--graphite); white-space: nowrap; font-variant-numeric: tabular-nums; }
.recap-total { display: flex; justify-content: space-between; align-items: baseline; padding: 18px 0 4px; }
.recap-total .lib { font-family: var(--ff-titre); font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.recap-total .val { font-family: var(--ff-titre); font-size: 30px; font-weight: 700; color: var(--graphite); font-variant-numeric: tabular-nums; }
.recap-note { font-size: 12.5px; color: var(--texte-2); margin-top: 8px; }
.page-grille.tunnel-grille { grid-template-columns: minmax(0, 1fr) 340px; }
/* align-items:start réduit l'aside à la hauteur du ticket → un sticky sans
   course ne colle jamais. Étiré, l'aside rend au ticket toute la rangée. */
.tunnel-grille > aside { align-self: stretch; }

/* ---------- Référence de commande & Confirmation Chic ---------- */
.confirmation-badge-succes {
  display: inline-flex; align-items: center; gap: 8px;
  background: #E6F4EA; color: #137333; padding: 8px 16px;
  border-radius: 30px; font-weight: 600; font-size: 13.5px; margin-bottom: 18px;
}
.confirmation-badge-succes svg { width: 18px; height: 18px; stroke: #137333; }

.carte-reference-chic {
  background: var(--fond-input); border: 1px solid var(--hairline);
  border-left: 4px solid var(--bleu); border-radius: 12px;
  padding: 20px 24px; margin-bottom: 24px;
}
.carte-reference-chic .ref-entete { display: flex; justify-content: space-between; align-items: center; }
.carte-reference-chic .ref-valeur {
  font-family: var(--ff-titre); font-size: 34px; font-weight: 700;
  color: var(--graphite); letter-spacing: 0.04em; margin: 6px 0;
}
.carte-reference-chic .ref-note { font-size: 13px; color: var(--texte-3); margin: 0; }
.btn-copier-ref {
  display: inline-flex; align-items: center; gap: 6px;
  background: #ffffff; border: 1px solid var(--hairline);
  border-radius: 6px; padding: 5px 10px; font-size: 12px; font-weight: 600;
  color: var(--graphite); cursor: pointer; transition: all .16s ease;
}
.btn-copier-ref:hover { border-color: var(--bleu); color: var(--bleu); }
.btn-copier-ref svg { width: 14px; height: 14px; }

.grille-confirmation-details {
  display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 24px;
}
@media (max-width: 768px) {
  .grille-confirmation-details { grid-template-columns: 1fr; }
}

.carte-conf-detail {
  background: #ffffff; border: 1px solid var(--hairline);
  border-radius: 14px; padding: 22px; display: flex; flex-direction: column;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
}
.carte-conf-titre {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--ff-titre); font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em; color: var(--texte-3);
  margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px dashed var(--hairline);
}
.carte-conf-titre svg { width: 16px; height: 16px; stroke: var(--bleu); }

.valeur-date-collecte {
  font-family: var(--ff-titre); font-size: 17px; font-weight: 700;
  color: var(--graphite); text-transform: capitalize; margin-bottom: 6px;
}
.badge-creneau-horaire {
  display: inline-block; background: var(--ice); color: var(--bleu);
  font-weight: 600; font-size: 13px; padding: 4px 10px; border-radius: 6px;
  margin-bottom: 8px; align-self: flex-start;
}
.adresse-passage-collecte { font-size: 13px; color: var(--texte-2); margin: 0 0 16px 0; }

.menu-ajouter-calendrier { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--hairline); }
.menu-ajouter-calendrier .label-cal { font-size: 12px; font-weight: 600; color: var(--texte-2); margin: 0 0 8px 0; }
.boutons-calendrier { display: flex; flex-direction: column; gap: 8px; }
.btn-cal {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 9px 12px; border-radius: 8px; font-size: 12.5px; font-weight: 600;
  cursor: pointer; transition: all .16s ease; width: 100%; border: 1px solid var(--hairline);
}
.btn-ics { background: var(--bleu); color: #ffffff; border-color: var(--bleu); }
.btn-ics:hover { background: #005a96; }
.btn-gcal { background: #ffffff; color: var(--graphite); }
.btn-gcal:hover { background: var(--ice); border-color: var(--bleu); }
.btn-cal svg { width: 15px; height: 15px; }

.client-salutation { font-family: var(--ff-titre); font-size: 17px; font-weight: 700; color: var(--graphite); margin-bottom: 6px; }
.prestation-synthese { font-size: 13.5px; color: var(--texte-2); line-height: 1.45; margin-bottom: 14px; }
.montant-estime-bloc {
  background: var(--ice); padding: 12px 14px; border-radius: 8px;
  margin-bottom: 14px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px;
}
.montant-estime-bloc .lbl-total { font-size: 13px; color: var(--texte-2); }
.montant-estime-bloc .val-total { font-family: var(--ff-titre); font-size: 20px; font-weight: 700; color: var(--graphite); }
.montant-estime-bloc .note-pesee { font-size: 12px; color: var(--texte-3); }

.puces-garanties { display: flex; flex-direction: column; gap: 6px; margin-top: auto; }
.puce-garantie { font-size: 12px; font-weight: 500; color: var(--texte-2); }
.puce-garantie.verde { color: #137333; }

.note-paiement-confort {
  background: var(--fond-input); border-radius: 10px; padding: 14px 18px;
  font-size: 13px; color: var(--texte-2); margin: 0; line-height: 1.5;
}

/* ---------- FAQ accordéon ---------- */
.faq-item { border-bottom: 1px solid var(--hairline); }
.faq-question {
  width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 18px;
  background: none; border: 0; cursor: pointer; text-align: left;
  font-family: var(--ff-titre); font-size: 16px; font-weight: 600; color: var(--graphite);
  padding: 20px 2px;
}
.faq-question .signe { font-size: 20px; font-weight: 400; color: var(--texte-2); flex: none; transition: transform .2s ease; }
.faq-item.est-ouvert .signe { transform: rotate(45deg); color: var(--bleu); }
.faq-reponse { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .26s var(--ease-in-out); }
.faq-item.est-ouvert .faq-reponse { grid-template-rows: 1fr; }
.faq-reponse > div { overflow: hidden; }
.faq-reponse p { color: var(--texte-2); font-size: 14.5px; padding: 0 2px 20px; margin: 0; max-width: none; }

/* ---------- Avis ---------- */
.mots-cles-avis { font-family: var(--ff-titre); font-size: 26px; font-weight: 700; color: var(--bleu); line-height: 1.35; max-width: 22ch; }
.grille-avis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.avis-carte { background: var(--ice); border-radius: var(--r-card); padding: 22px; display: flex; flex-direction: column; gap: 10px; }
.avis-etoiles { color: #E8A33D; font-size: 13px; letter-spacing: 2px; }
.avis-texte { font-size: 14px; color: var(--texte-2); font-style: italic; margin: 0; }
.avis-auteur { font-family: var(--ff-titre); font-size: 12.5px; font-weight: 600; color: var(--graphite); margin-top: auto; }
.avis-lien-suite {
  display: flex !important;
  justify-content: flex-end !important;
  text-align: right !important;
  width: 100%;
  margin-top: 18px;
  margin-bottom: 0;
}
.avis-lien-suite a {
  font-family: var(--ff-titre);
  font-size: 15.5px;
  font-weight: 600;
  color: var(--bleu);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: transform .2s ease, color .2s ease;
}
.avis-lien-suite a:hover {
  color: var(--bleu-ciel);
  transform: translateX(5px);
  text-decoration: none;
}

/* ---------- Infos contact (tableau clé/valeur) ---------- */
.infos { border-top: 2px solid var(--graphite); }
/* Deux colonnes plutôt qu'un espace-entre : une valeur longue (l'adresse)
   écrasait sinon son libellé, qui s'enroulait sur trois lignes. */
.infos > div { display: grid; grid-template-columns: minmax(96px, max-content) 1fr; gap: 20px; align-items: baseline; padding: 15px 0; border-bottom: 1px solid var(--hairline); }
.infos .cle { color: var(--texte-2); font-size: 14.5px; }
.infos .cle small { display: block; font-size: 12.5px; color: var(--texte-3); }
.infos .val { font-weight: 600; color: var(--graphite); text-align: right; overflow-wrap: break-word; }
.infos .val a { color: var(--graphite); }
.infos .val a:hover { color: var(--bleu); }

/* ---------- Zone / communes ---------- */
.zone-grille { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 32px; align-items: stretch; }
.zone-visuel { background: var(--ice); border-radius: var(--r-card); overflow: hidden; height: 100%; min-height: 320px; display: flex; }
.zone-visuel img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Section Pro sur la page d'accueil : conteneur visuel compact et large */
.pro-grille { align-items: center; }
.pro-visuel {
  width: 100%;
  height: 240px;
  max-height: 240px;
  min-height: auto;
  border-radius: var(--r-card);
  overflow: hidden;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.08);
}
.pro-visuel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.communes { font-family: var(--ff-titre); font-size: 17px; font-weight: 600; color: var(--graphite); line-height: 1.7; }
.communes .sep { color: var(--bleu-ciel); padding: 0 2px; }

/* ---------- Footer ---------- */
.footer {
  background: var(--blanc); border-top: 1px solid var(--hairline); margin-top: 80px;
  position: relative; overflow: hidden;
}
/* Filigrane : le picto en grand format, très faible opacité, ancré en bas à droite
   (« motif de fond » prévu par la charte p.4). */
.footer::after {
  content: "";
  position: absolute;
  right: -52px;
  bottom: -68px;
  width: 340px;
  height: 340px;
  background: url("../assets/logo/picto.png") no-repeat center center / contain;
  opacity: .06;
  pointer-events: none;
  z-index: 0;
}
.footer .wrap { position: relative; z-index: 1; }
.footer-haut { display: grid; grid-template-columns: minmax(0, 1.4fr) 1fr 1fr 1.2fr; gap: 40px; padding: 60px 0 48px; }
.footer-logo img { width: 128px; margin-bottom: 16px; }
.footer-bio { font-size: 13.5px; color: var(--texte-2); max-width: 34ch; }
.footer h4 {
  font-family: var(--ff-titre); font-size: 10.5px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--texte-3); margin: 4px 0 16px;
}
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.footer ul a, .footer address a { font-size: 14px; color: var(--graphite); }
.footer ul a:hover, .footer address a:hover { color: var(--bleu); text-decoration: none; }
.footer address { font-style: normal; font-size: 14px; color: var(--graphite); display: grid; gap: 9px; }
.footer-bas {
  border-top: 1px solid var(--hairline);
  display: flex; justify-content: space-between; align-items: center; gap: 18px;
  padding: 18px 0; font-size: 13px; color: var(--texte-2);
}
.footer-bas a { color: var(--texte-2); }
.footer-bas a:hover { color: var(--bleu); }

/* ---------- Texte légal ---------- */
.prose h2 { font-size: 21px; margin: 1.6em 0 .5em; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-size: 16px; margin: 1.5em 0 .4em; }
.prose p, .prose li { color: var(--texte-2); font-size: 14.5px; }
.prose ul, .prose ol { padding-left: 20px; }
.prose li { margin-bottom: 5px; }
.prose li::marker { color: var(--texte-3); }
.a-completer { background: #FFF6E5; border-radius: 4px; padding: 1px 6px; color: #8A6116; font-size: 13px; }

/* ---------- Documents juridiques (mentions, CGV, confidentialité) ---------- */
/* Articles numérotés automatiquement : la renumérotation suit les ajouts. */
.juridique { counter-reset: article; }
.juridique h2 { counter-increment: article; scroll-margin-top: 100px; }
.juridique h2::before {
  content: "Article " counter(article) " — ";
  color: var(--bleu); font-weight: 600;
}
.juridique h2.sans-numero { counter-increment: none; }
.juridique h2.sans-numero::before { content: none; }
/* Repère de dernière mise à jour, en tête de document */
.doc-date {
  display: inline-block; margin: 0 0 22px;
  background: var(--ice); border-radius: 999px; padding: 6px 14px;
  font-size: 12.5px; color: var(--texte-2);
}
/* Tableau de document : durées de conservation, sous-traitants… */
.tableau-doc { width: 100%; border-collapse: collapse; margin: 14px 0 4px; font-size: 13.5px; }
.tableau-doc th, .tableau-doc td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--hairline); vertical-align: top; }
.tableau-doc th { font-family: var(--ff-titre); font-size: 11.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--graphite); }
.tableau-doc td { color: var(--texte-2); }
.tableau-doc tr:last-child td { border-bottom: 0; }
.tableau-enveloppe { overflow-x: auto; }
/* Encadré : point d'attention ou information mise en avant */
.encadre-doc {
  background: var(--ice); border-radius: var(--r-card);
  padding: 16px 18px; margin: 16px 0;
}
.encadre-doc p:last-child { margin-bottom: 0; }
.encadre-doc .titre-encadre { font-family: var(--ff-titre); font-size: 13.5px; font-weight: 600; color: var(--graphite); margin: 0 0 6px; }

/* ---------- Motion : apparition au scroll ---------- */
@media (prefers-reduced-motion: no-preference) {
  .apparait { opacity: 0; transform: translateY(12px); transition: opacity .48s var(--ease-out), transform .48s var(--ease-out); }
  .apparait.est-visible { opacity: 1; transform: none; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .nav { gap: 17px; }
  .header-inner { gap: 18px; }
  .grille-cartes { grid-template-columns: repeat(2, 1fr); }
  .grille-avis { grid-template-columns: repeat(2, 1fr); }
  .footer-haut { grid-template-columns: 1fr 1fr; }
  .page-grille { grid-template-columns: 260px minmax(0, 1fr); gap: 32px; }
  .page-grille.tunnel-grille { grid-template-columns: minmax(0, 1fr); }
  .ticket-tenue { position: static; }
  .hero h1 { font-size: 40px; }
}
@media (max-width: 900px) {
  .header-inner > .btn { display: inline-flex; margin-left: auto; padding: 11px 18px; }
  .burger { margin-left: 0; }
  .nav {
    display: none; position: absolute; top: 76px; left: 0; right: 0;
    background: var(--blanc); border-bottom: 1px solid var(--hairline);
    flex-direction: column; align-items: stretch; gap: 0; padding: 8px 32px 20px;
    box-shadow: var(--ombre-header);
  }
  .nav.est-ouverte { display: flex; }
  .nav a { padding: 13px 0; border-bottom: 1px solid var(--hairline); font-size: 15px; }
  .nav a:last-of-type { border-bottom: 0; }
  .nav .btn { margin: 12px 0 0; }
  .burger { display: block; margin-left: auto; }
  /* Le CTA « Réserver » reste visible à côté du burger, groupé à droite —
     une règle « display:none » redondante le masquait entièrement. */
  .header-inner > .btn { display: inline-flex; margin-left: 10px; padding: 11px 18px; }
  .hero-haut, .hero-bas { grid-template-columns: 1fr; gap: 24px; }
  .hero { padding-top: 40px; }
  .hero h1 { font-size: 34px; }
  .page-grille { grid-template-columns: 1fr; }
  .sidebar { position: static; }
  .zone-grille { grid-template-columns: 1fr; }
  .bande-sombre { flex-direction: column; align-items: flex-start; padding: 34px 30px; }
}
@media (max-width: 640px) {
  .wrap { padding: 0 20px; }
  .footer::after { width: 200px; height: 200px; right: -40px; bottom: -46px; }
  h1, .sidebar h1 { font-size: 30px; }
  .hero h1 { font-size: 29px; }
  h2 { font-size: 24px; }
  .en-bref { grid-template-columns: 1fr 1fr; row-gap: 22px; padding: 24px 4px; }
  .en-bref > div:nth-child(3) { border-left: 0; }
  .grille-cartes, .grille-cartes.cols-3, .grille-avis { grid-template-columns: 1fr; }
  .panneau { padding: 24px 20px; }
  .form-grille, .grille-2, .compteurs-articles { grid-template-columns: 1fr; }
  .footer-haut { grid-template-columns: 1fr; gap: 28px; padding: 36px 0 28px; }
  .footer-bas { flex-direction: column; align-items: flex-start; gap: 8px; }
  .tunnel-onglets { gap: 16px; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .tunnel-onglets::-webkit-scrollbar { display: none; }
  .tunnel-onglet { flex: 0 0 auto; }
  /* .infos > div est une grille : flex-direction n'a aucun effet dessus.
     On empile en une seule colonne — libellé au-dessus, valeur dessous. */
  .infos > div { grid-template-columns: 1fr; gap: 2px; }
  .infos .val { text-align: left; white-space: normal; }
  .recap-total .val { font-size: 26px; }
}

/* ajout cohérence : .form-confirmation — message affiché par js/app.js après envoi
   des formulaires de contact.html et soclean-pro.html (classe absente à l'origine) */
.form-confirmation { margin: 4px 0 0; padding: 12px 16px; background: var(--ice); border-radius: var(--r-btn); color: var(--graphite); }

/* ajout cohérence : espace client compte.html (connexion OAuth + pastilles de statut
   générées par le script de la page) — classes absentes à l'origine */
.compte-connexion { max-width: 560px; display: grid; gap: 18px; }
.boutons-oauth { display: grid; gap: 10px; max-width: 360px; }
.boutons-oauth .btn { display: flex; align-items: center; justify-content: center; gap: 10px; }
.pastille { display: inline-block; padding: 2px 10px; border-radius: 999px; font-family: var(--ff-titre); font-size: 11px; font-weight: 600; letter-spacing: .04em; background: var(--ice); color: var(--bleu); }
.pastille.statut-confirmee { background: var(--bleu); color: var(--blanc); }
.pastille.statut-collectee { background: var(--bleu-ciel); color: var(--blanc); }
.pastille.statut-traitement { background: var(--fond-input); color: var(--texte-2); }
.pastille.statut-livree { background: #E6F3EB; color: #2E7D4F; }
.pastille.statut-annulee { background: #FBEBEA; color: #C6362E; }

/* ============================================================
   Cohérence & branchement — compléments au système
   ============================================================ */

/* Reset des fieldsets du tunnel (bordure/padding natifs du navigateur) */
.tunnel-etape { border: 0; padding: 0; margin: 0; min-inline-size: 0; }
fieldset.tunnel-etape legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* État d'erreur visible sur les cases à cocher (CGV, options) */
.case-option.a-erreur { outline: 1.5px solid #C6362E; outline-offset: 0; background: #FDF3F2; }

/* Espacement de l'étape 4 du tunnel */
.tunnel-etape .infos { margin-bottom: 22px; }
.tunnel-etape .case-option { margin-bottom: 14px; }

/* Encadré des mots-clés d'avis (maquette p.7) */
.mots-cles-avis { background: var(--blanc); border: 1px solid var(--hairline); border-radius: var(--r-card); padding: 26px 30px; }

/* Lien admin discret dans le pied de page */
.footer-bas .lien-admin { opacity: .45; }
.footer-bas .lien-admin:hover { opacity: 1; color: var(--bleu); }

/* ---------- Motion du tunnel : glissement entre étapes ---------- */
@media (prefers-reduced-motion: no-preference) {
  .tunnel-etape.est-active.va-avant { animation: tunnel-avant .26s var(--ease-out) both; }
  .tunnel-etape.est-active.va-arriere { animation: tunnel-arriere .26s var(--ease-out) both; }
  @keyframes tunnel-avant { from { opacity: 0; transform: translateX(22px); } to { opacity: 1; transform: none; } }
  @keyframes tunnel-arriere { from { opacity: 0; transform: translateX(-22px); } to { opacity: 1; transform: none; } }
}

/* Total du récapitulatif : brève montée en bleu à chaque changement
   (transition retargetable — le montant change à chaque frappe) */
#recap-total { transition: color .16s ease; }
#recap-total.total-change { color: var(--bleu); }

/* ============================================================
   Cartes, recherche d'adresse et test de couverture
   ============================================================ */

/* ---------- Conteneurs de carte ---------- */
.carte-geo {
  width: 100%;
  height: 420px;
  border-radius: var(--r-card);
  overflow: hidden;
  background: var(--ice);
  border: 1px solid var(--hairline);
  z-index: 0; /* Leaflet crée ses propres couches : on contient la pile */
}
.carte-geo.carte-zone { height: 580px; }
.carte-credits {
  font-size: 11.5px;
  color: var(--texte-3);
  margin: 8px 0 0;
}
.carte-credits a { color: var(--texte-3); text-decoration: underline; text-underline-offset: 2px; }
.carte-credits a:hover { color: var(--bleu); }

/* Leaflet : accorder les surfaces à la charte */
.leaflet-container { font-family: var(--ff-texte); background: var(--ice); }
.leaflet-control-attribution {
  font-size: 10.5px; background: rgba(255, 255, 255, .82); color: var(--texte-3);
}
.leaflet-control-attribution a { color: var(--texte-2); }
.leaflet-bar a {
  color: var(--graphite); border-bottom-color: var(--hairline);
  width: 32px; height: 32px; line-height: 32px;
}
.leaflet-bar a:hover { background: var(--ice); color: var(--bleu); }
.leaflet-popup-content-wrapper {
  border-radius: 10px; box-shadow: var(--ombre-hover); font-size: 13.5px; line-height: 1.6;
}
.leaflet-popup-content { margin: 12px 16px; }
.leaflet-popup-content a { color: var(--bleu); font-weight: 600; }
.etiquette-commune {
  background: var(--graphite); color: #fff; border: 0; border-radius: 5px;
  font-family: var(--ff-titre); font-size: 11.5px; font-weight: 600; padding: 3px 8px;
  box-shadow: none;
}
.etiquette-commune::before { display: none; }
.marqueur-soclean { background: none; border: 0; }

/* ---------- Test de couverture ---------- */
.test-zone { display: grid; gap: 14px; margin-bottom: 16px; }
.test-saisie { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-start; }
.test-saisie .adresse-champ { flex: 1 1 260px; min-width: 0; }
.test-saisie .btn { flex: none; }
.test-bouton-loc { display: inline-flex; align-items: center; gap: 8px; }
.test-bouton-loc svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.75; }

.test-resultat {
  border-radius: var(--r-card);
  padding: 18px 20px;
  display: grid;
  gap: 6px;
  justify-items: start;
  font-size: 14.5px;
}
.test-resultat .test-titre {
  font-family: var(--ff-titre); font-size: 17px; font-weight: 600; margin: 0; color: var(--graphite);
}
.test-resultat .test-detail { margin: 0; color: var(--texte-2); }
.test-resultat .btn { margin-top: 10px; }
.test-resultat.est-couvert { background: #E6F3EB; }
.test-resultat.est-couvert .test-titre { color: #2E7D4F; }
.test-resultat.est-hors-zone { background: var(--ice); }
.test-resultat.est-attente { background: var(--fond-input); color: var(--texte-2); }
.test-resultat.est-erreur { background: #FBEBEA; color: #C6362E; }

/* ---------- Autocomplétion d'adresse ---------- */
.adresse-champ { position: relative; }
.adresse-suggestions {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 40;
  margin: 0; padding: 6px; list-style: none;
  background: var(--blanc); border: 1px solid var(--hairline);
  border-radius: 10px; box-shadow: var(--ombre-hover);
  max-height: 288px; overflow-y: auto;
}
.adresse-suggestions li {
  padding: 9px 12px; border-radius: 7px; cursor: pointer;
  display: grid; gap: 1px;
}
.adresse-suggestions li.est-survole, .adresse-suggestions li:hover { background: var(--ice); }
.adresse-libelle { font-size: 14px; color: var(--graphite); }
.adresse-libelle b { color: var(--bleu); font-weight: 600; }
.adresse-contexte { font-size: 12px; color: var(--texte-3); }

/* ---------- Avis : ce que les clients apprécient ---------- */
.grille-themes {
  display: grid;
  /* Nombre de colonnes explicite (et non auto-fit) : il faut le connaître pour
     étaler la dernière cellule quand elle se retrouve seule sur sa rangée —
     sans quoi la grille se termine sur un grand vide encadré. */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  /* Fond blanc, et non hairline : les cases laissées vides par le 7e thème
     resteraient sinon peintes en gris. Les séparateurs viennent des cellules. */
  background: var(--blanc);
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
  overflow: hidden;
}
.theme {
  background: var(--blanc);
  box-shadow: 0 0 0 1px var(--hairline);
  padding: 20px 22px;
  display: grid;
  gap: 6px;
  align-content: start;
}
/* Dernière cellule seule sur sa rangée : elle prend toute la largeur et son
   contenu passe en ligne, plutôt que de laisser deux cases vides encadrées.
   Le nombre de colonnes change avec la largeur, d'où les deux règles. */
.grille-themes > :nth-child(3n + 1):last-child { grid-column: 1 / -1; }
.grille-themes > :nth-child(3n + 1):last-child.theme {
  grid-template-columns: auto 1fr; align-items: center; column-gap: 14px;
}
.grille-themes > :nth-child(3n + 1):last-child.theme h3 { grid-column: 2; margin: 0; }
.grille-themes > :nth-child(3n + 1):last-child.theme p { grid-column: 2; }
@media (max-width: 900px) {
  .grille-themes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grille-themes > :nth-child(3n + 1):last-child { grid-column: auto; }
  .grille-themes > :nth-child(3n + 1):last-child.theme { grid-template-columns: none; align-items: stretch; }
  .grille-themes > :nth-child(2n + 1):last-child { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .grille-themes { grid-template-columns: 1fr; }
}
.theme svg { width: 20px; height: 20px; stroke: var(--bleu); fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.theme h3 { font-size: 15px; font-weight: 600; margin: 4px 0 0; color: var(--graphite); }
.theme p { font-size: 13.5px; color: var(--texte-2); margin: 0; line-height: 1.55; }

@media (max-width: 640px) {
  .carte-geo, .carte-geo.carte-zone { height: 320px; }
  .test-saisie .btn { width: 100%; }
}

/* Bandeau posé sur le formulaire de contact quand on arrive depuis « hors zone » */
.form-hors-zone {
  grid-column: 1 / -1;
  margin: 0 0 4px;
  padding: 13px 16px;
  background: var(--ice);
  border-radius: var(--r-btn);
  font-size: 14px;
  color: var(--graphite);
}

/* Le champ du test de zone vit hors d'un .champ : il lui faut son propre habillage */
.test-saisie input {
  font-family: var(--ff-texte); font-size: 14.5px; color: var(--graphite);
  background: var(--blanc); border: 1px solid #DCE4EC; border-radius: var(--r-btn);
  line-height: 20px; min-height: var(--h-controle); padding: 13px 15px; width: 100%;
  transition: border-color .16s ease, background-color .16s ease;
}
.test-saisie input:focus { border-color: var(--bleu); background: var(--blanc); outline: none; }
.test-saisie input:disabled { opacity: var(--opacite-inactif); cursor: progress; }

/* ============================================================
   Estimation : compteurs de pièces, choix de panier, minimum
   ============================================================ */
.estimation-blocs { display: grid; gap: 22px; }
.estimation-bloc > .bloc-titre {
  font-family: var(--ff-titre); font-size: 13px; font-weight: 600; color: var(--graphite);
  display: flex; align-items: baseline; gap: 8px; margin: 0 0 10px;
}
.estimation-bloc > .bloc-titre .bloc-aide { font-family: var(--ff-texte); font-size: 12.5px; font-weight: 400; color: var(--texte-3); }

.compteurs { display: grid; gap: 8px; }
.compteur {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  background: var(--fond-input); border-radius: var(--r-card); padding: 10px 12px 10px 16px;
}
.compteur-lib { font-size: 14.5px; color: var(--graphite); font-weight: 500; }
.compteur-lib .compteur-prix { display: block; font-size: 12px; color: var(--texte-3); font-weight: 400; }
.compteur-cmd { display: flex; align-items: center; gap: 6px; }
.compteur-cmd button {
  width: 34px; height: 34px; border-radius: var(--r-btn); border: 1px solid #C9D3DC;
  background: var(--blanc); color: var(--graphite); font-family: var(--ff-titre); font-size: 18px; line-height: 1;
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  transition: border-color .14s ease, color .14s ease, background-color .14s ease;
}
/* Au doigt, les + / − respectent la cible minimale de 44 px. */
@media (pointer: coarse) {
  .compteur-cmd { gap: 4px; }
  .compteur-cmd button { width: 44px; height: 44px; }
}
.compteur-cmd button:hover { border-color: var(--bleu); color: var(--bleu); }
.compteur-cmd button:disabled { opacity: var(--opacite-inactif); pointer-events: none; }
.compteur-cmd input {
  width: 46px; text-align: center; border: 0; background: none;
  font-family: var(--ff-titre); font-size: 15px; font-weight: 600; color: var(--graphite);
  font-variant-numeric: tabular-nums; padding: 4px 0;
}
.compteur-cmd input:focus { outline: 2px solid var(--bleu); outline-offset: 1px; border-radius: 6px; }
.compteur.est-actif { background: var(--ice); }

/* Choix de panier : mêmes puces que les créneaux, avec sous-libellé */
.paniers { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 900px) { .paniers { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .paniers { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.paniers .creneau > span { display: grid; gap: 1px; padding: 10px 8px; }
.paniers .creneau .sous { font-size: 11.5px; font-weight: 400; color: var(--texte-3); }
.paniers .creneau input:checked + span .sous,
.paniers .creneau.est-choisi > span .sous { color: rgba(255, 255, 255, .8); }

/* Note d'estimation & minimum */
.note-estimation {
  display: flex; gap: 10px; align-items: flex-start;
  background: var(--ice); border-radius: 10px; padding: 12px 14px;
  font-size: 13px; color: var(--graphite); margin-top: 18px;
}
.note-estimation svg { width: 17px; height: 17px; flex: none; margin-top: 2px; stroke: var(--bleu); fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.recap-minimum {
  margin-top: 10px; padding: 10px 12px; border-radius: 8px;
  background: #FFF6E5; color: #8A6116; font-size: 13px;
}

/* ---------- Erreur visible sur le groupe de créneaux ---------- */
.champ.a-erreur .creneau > span { outline: 1.5px solid #C6362E; outline-offset: -1.5px; }
.champ.a-erreur > .champ-erreur { display: block; }

/* ---------- Alerte hors zone sous les champs d'adresse ---------- */
.adresse-alerte {
  margin: 8px 0 0; padding: 11px 14px;
  background: #FFF6E5; border-radius: var(--r-btn);
  font-size: 13px; color: #8A6116; line-height: 1.55;
  display: grid; gap: 4px; justify-items: start;
}
.adresse-alerte strong { color: inherit; }
.adresse-alerte a { font-weight: 600; color: var(--bleu); }

/* ---------- Bascule poids / articles ---------- */
.mode-poids { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 14px; }
.sous-mode[hidden] { display: none; }
.compteurs-articles { grid-template-columns: 1fr 1fr; }
.synthese-articles {
  margin: 12px 0 0; padding: 11px 14px;
  background: var(--ice); border-radius: var(--r-btn);
  font-family: var(--ff-titre); font-size: 13.5px; font-weight: 600; color: var(--graphite);
}

/* ---------- Barre de total fixe (mobile) ---------- */
.barre-total {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
  display: none; align-items: center; justify-content: space-between; gap: 14px;
  width: 100%; border: 0; cursor: pointer;
  padding: 13px 20px calc(13px + env(safe-area-inset-bottom));
  background: var(--graphite); color: #DEE5EB;
  font-family: var(--ff-texte); font-size: 13px; text-align: left;
}
.barre-total strong { font-family: var(--ff-titre); font-size: 19px; color: #fff; font-variant-numeric: tabular-nums; }
@media (max-width: 1080px) {
  .barre-total { display: flex; }
  .page:has(#tunnel) { padding-bottom: 76px; }
  /* La carte de consentement se pose au-dessus de la barre de total au lieu
     de la recouvrir : sur le tunnel, le montant doit rester lisible. */
  body:has(.barre-total) .bandeau-cookies { bottom: calc(76px + env(safe-area-inset-bottom)); }
}


/* Barre latérale hors flux : sa hauteur est réservée par l'aside (min-height
   posé en JS), la boîte est fixée à sa position de repos. Elle s'efface en
   fondu à l'approche du pied de page plutôt que de passer par-dessus. */
.sidebar.est-fixe { position: static; }
.sidebar.est-fixe > .sidebar-fixe {
  position: fixed;
  display: flex; flex-direction: column; gap: 26px;
  transition: opacity .22s var(--ease-out), visibility .22s;
}
.sidebar.est-fixe > .sidebar-fixe.est-effacee { opacity: 0; visibility: hidden; }
@media (prefers-reduced-motion: reduce) {
  .sidebar.est-fixe > .sidebar-fixe { transition: none; }
}

/* ---------- Éléments de fond pour étapes (photo grand format + dégradé) ---------- */
.etape-fond {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 1;
  pointer-events: none;
}
.etape-fond img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .6s var(--ease-out);
}
.etape-degrade {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(10, 15, 25, 0.94) 0%, rgba(10, 15, 25, 0.58) 45%, rgba(10, 15, 25, 0.22) 80%, rgba(10, 15, 25, 0.1) 100%);
  z-index: 2;
  transition: opacity .3s ease;
}

/* ---------- Les 4 étapes : panneaux dépliants (page fonctionnement) ----------
   Séquence chorégraphiée au clic :
   1. Le titre vertical fade out immédiatement (.18s)
   2. La fenêtre s'allonge (.5s avec courbe fluide)
   3. Le contenu fade in avec un mouvement vertical ascendant (.42s à t=0.22s) */
.etapes-panneaux {
  display: flex;
  gap: 14px;
  align-items: stretch;
  min-height: 380px;
}
.etape-panneau {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  border-radius: var(--r-card);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.16);
  transition: flex-grow .5s cubic-bezier(0.23, 1, 0.32, 1), box-shadow .3s ease;
  cursor: pointer;
  background: var(--graphite);
  outline: none;
}
.etape-panneau:focus-visible {
  box-shadow: 0 0 0 3px var(--bleu-ciel), 0 6px 22px rgba(0, 0, 0, 0.3);
}
.etape-panneau.est-ouverte {
  flex-grow: 4.6;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.32);
  cursor: default;
}
.etape-panneau:hover:not(.est-ouverte) .etape-fond img {
  transform: scale(1.06);
}
.etape-panneau:hover:not(.est-ouverte) .etape-degrade {
  opacity: 0.82;
}

/* Pastille de numéro d'étape */
.etape-num {
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  color: #ffffff;
  font-size: 12.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
  transition: transform .3s ease, background-color .3s ease;
}

/* Volet inactif : pastille BLEU CLAIR avec chiffre en BLANC */
.etape-panneau:not(.est-ouverte) .etape-num {
  background: var(--bleu-ciel);
  color: #ffffff;
}

/* 1. Onglet vertical replié : fade out instantané au clic */
.etape-onglet {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 20px 10px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  gap: 18px;
  z-index: 3;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity .18s ease 0s, visibility 0s 0s;
}
.etape-panneau.est-ouverte .etape-onglet {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .18s ease 0s, visibility 0s .18s;
}
.etape-titre-vertical {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: var(--ff-titre);
  font-size: 15px;
  font-weight: 600;
  color: #ffffff;
  white-space: nowrap;
  letter-spacing: 0.02em;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.85);
}

/* 2 & 3. Bloc de contenu : fade in avec mouvement vertical ascendant */
.etape-corps {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 4;
  padding: 24px 26px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 10px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(22px);
  transition: opacity .2s ease 0s, transform .2s ease 0s, visibility 0s .2s;
}
.etape-panneau.est-ouverte .etape-corps {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
  transition: opacity .4s ease .22s,
              transform .42s cubic-bezier(0.23, 1, 0.32, 1) .22s,
              visibility 0s .22s;
}

.etape-entete-ouverte {
  display: flex;
  align-items: center;
  gap: 14px;
}
.etape-entete-ouverte .etape-num {
  width: 36px;
  height: 36px;
  background: var(--bleu);
  font-size: 13px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}
.etape-entete-ouverte .etape-titre {
  margin: 0;
  font-family: var(--ff-titre);
  font-size: 19px;
  font-weight: 700;
  color: #ffffff;
  line-height: 1.25;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.85), 0 1px 3px rgba(0, 0, 0, 0.95);
}

.etape-texte {
  font-size: 14.5px;
  color: rgba(255, 255, 255, 0.96);
  line-height: 1.6;
  margin: 0;
  max-width: 560px;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.85), 0 1px 4px rgba(0, 0, 0, 0.95);
  font-weight: 400;
}

@media (prefers-reduced-motion: reduce) {
  .etape-panneau, .etape-fond img, .etape-corps, .etape-onglet { transition: none !important; }
}

/* Sous 900 px : carrousel horizontal avec amorce de la slide suivante */
@media (max-width: 900px) {
  .etapes-panneaux {
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 14px;
    padding: 6px 4px 16px;
    margin: 0 -16px;
    padding-left: 16px;
    padding-right: 16px;
    min-height: 310px;
  }
  .etapes-panneaux::-webkit-scrollbar {
    height: 6px;
  }
  .etapes-panneaux::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 4px;
  }
  .etape-panneau, .etape-panneau.est-ouverte {
    flex: 0 0 82%;
    max-width: 330px;
    scroll-snap-align: start;
    min-height: 290px;
  }
  .etape-onglet {
    display: none !important;
  }
  .etape-corps {
    position: relative !important;
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    padding: 18px 20px;
    height: 100%;
  }
  .etape-texte {
    font-size: 13.5px;
  }

  /* Sur accueil : grille d'étapes en carrousel aussi pour voir l'amorce de la photo suivante */
  .grille-etapes-accueil {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 14px;
    padding: 6px 4px 16px;
    margin: 0 -16px;
    padding-left: 16px;
    padding-right: 16px;
  }
  .grille-etapes-accueil .carte-etape-fond {
    flex: 0 0 82%;
    max-width: 300px;
    scroll-snap-align: start;
    min-height: 280px;
  }
}

/* ---------- Champs à pictogramme ---------- */
.champ-icone { position: relative; display: block; }
.champ-icone > svg {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  width: 17px; height: 17px; pointer-events: none;
  stroke: var(--texte-3); fill: none; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
  transition: stroke .16s ease;
}
.champ-icone.champ-icone-haut > svg { top: 17px; transform: none; }
.champ-icone > input, .champ-icone > textarea { padding-left: 42px; }
.champ-icone:focus-within > svg { stroke: var(--bleu); }

/* Piège à robots : hors écran, jamais lu par un lecteur d'écran ni tabulé. */
.pot-de-miel {
  position: absolute; left: -9999px; width: 1px; height: 1px;
  overflow: hidden; opacity: 0;
}

/* ---------- Vérification anti-robot ---------- */
.captcha-ligne { display: flex; align-items: center; gap: 10px; }
.captcha-question {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  min-width: 104px; height: var(--h-controle); padding: 0 14px;
  background: var(--ice); border-radius: var(--r-btn);
  font-family: var(--ff-titre); font-size: 15px; font-weight: 600;
  color: var(--graphite); font-variant-numeric: tabular-nums;
  user-select: none; white-space: nowrap;
}
.captcha-ligne input { flex: 1 1 90px; min-width: 0; max-width: 130px; text-align: center; }
.captcha-rejouer {
  flex: none; width: var(--h-controle); height: var(--h-controle);
  border: 1px solid #C9D3DC; border-radius: var(--r-btn);
  background: var(--blanc); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: border-color .16s ease;
}
.captcha-rejouer:hover { border-color: var(--bleu); }
.captcha-rejouer svg {
  width: 17px; height: 17px; stroke: var(--texte-2); fill: none;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.captcha-rejouer:hover svg { stroke: var(--bleu); }

/* Page contact : le formulaire prime sur le bloc d'informations, qui était
   la colonne la plus large. Deux champs courts tiennent ainsi sur une ligne. */
/* Formulaire puis informations, empilés : chacun dispose de toute la largeur. */
#formulaire .zone-grille { grid-template-columns: 1fr; gap: 34px; }

/* Contour du champ au survol : le fond blanc rend le repère moins évident
   qu'un aplat, un contour un peu plus marqué le compense. */
.champ input:hover:not(:focus), .champ select:hover:not(:focus),
.champ textarea:hover:not(:focus), .test-saisie input:hover:not(:focus) {
  border-color: #C3D0DC;
}

/* ============================================================
   Consentement aux traceurs — bandeau et panneau de réglages
   ============================================================ */
/* Carte compacte en bas à gauche, colonne unique : titre, texte, puis une
   rangée de deux boutons égaux et le lien de réglages centré dessous. La
   version précédente étalait texte et boutons en flex pleine largeur : à
   chaque taille d'écran, les enveloppes se répartissaient autrement et rien
   n'était jamais aligné. */
.bandeau-cookies {
  position: fixed; left: 16px; bottom: 16px; z-index: 60;
  width: min(430px, calc(100vw - 32px));
  background: var(--blanc); border: 1px solid var(--hairline);
  border-radius: var(--r-panel); padding: 22px 22px 16px;
  box-shadow: 0 2px 6px rgba(43, 47, 51, .06), 0 22px 48px -24px rgba(43, 47, 51, .34);
  opacity: 0; transform: translateY(14px);
  transition: opacity .3s var(--ease-out), transform .3s var(--ease-out);
}
.bandeau-cookies.est-visible { opacity: 1; transform: none; }
.bandeau-cookies-titre { font-family: var(--ff-titre); font-size: 15px; font-weight: 600; color: var(--graphite); margin: 0 0 6px; }
.bandeau-cookies p { font-size: 13.5px; line-height: 1.55; color: var(--texte-2); margin: 0 0 16px; }
/* Refuser et accepter : deux cellules égales — la CNIL demande que refuser
   soit aussi simple qu'accepter. Le lien de réglages occupe la rangée du
   dessous, centré. */
.bandeau-cookies-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.bandeau-cookies-actions .btn { padding-left: 12px; padding-right: 12px; }
.bandeau-cookies-actions .lien-reglages { grid-column: 1 / -1; justify-self: center; }
.lien-reglages {
  background: none; border: 0; cursor: pointer; padding: 9px 8px 5px;
  font-family: var(--ff-titre); font-size: 12px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; color: var(--texte-2);
  text-decoration: underline; text-underline-offset: 3px;
}
.lien-reglages:hover { color: var(--bleu); }
@media (max-width: 400px) {
  .bandeau-cookies-actions { grid-template-columns: 1fr; }
}

.voile-cookies {
  position: fixed; inset: 0; z-index: 70;
  display: flex; align-items: center; justify-content: center; padding: 20px;
  background: rgba(43, 47, 51, .5);
  opacity: 0; transition: opacity .22s ease;
}
.voile-cookies.est-visible { opacity: 1; }
body.cookies-ouverts { overflow: hidden; }
.panneau-cookies {
  background: var(--blanc); border-radius: var(--r-panel);
  width: min(560px, 100%); max-height: min(84vh, 720px);
  display: flex; flex-direction: column; overflow: hidden;
  box-shadow: 0 30px 60px -30px rgba(43, 47, 51, .5);
  transform: translateY(10px); transition: transform .22s var(--ease-out);
}
.voile-cookies.est-visible .panneau-cookies { transform: none; }
.panneau-cookies-tete {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 22px 24px 16px; border-bottom: 1px solid var(--hairline);
}
.panneau-cookies-tete h2 { font-size: 20px; margin: 0; }
.fermer-cookies {
  flex: none; width: 34px; height: 34px; border-radius: 8px;
  border: 0; background: var(--fond-input); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.fermer-cookies:hover { background: var(--ice); }
.fermer-cookies svg { width: 16px; height: 16px; stroke: var(--graphite); fill: none; stroke-width: 1.9; stroke-linecap: round; }
.panneau-cookies-corps { padding: 6px 24px 18px; overflow-y: auto; }
.categorie-cookies { padding: 18px 0; border-bottom: 1px solid var(--hairline); }
.categorie-cookies:last-child { border-bottom: 0; }
.categorie-cookies-tete { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 6px; }
.categorie-cookies h3 { font-size: 15.5px; margin: 0; }
.categorie-cookies p { font-size: 13.5px; color: var(--texte-2); margin: 0; }
.etiquette-cookies {
  flex: none; font-family: var(--ff-titre); font-size: 11px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; color: var(--texte-3);
  background: var(--fond-input); border-radius: 999px; padding: 5px 11px;
}
/* Bascule : un interrupteur lisible, avec son état écrit en toutes lettres */
.bascule-cookies { flex: none; display: inline-flex; align-items: center; gap: 9px; cursor: pointer; }
.bascule-cookies input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.bascule-piste {
  width: 42px; height: 24px; border-radius: 999px; background: #C9D3DC;
  position: relative; transition: background-color .18s ease;
}
.bascule-piste::after {
  content: ""; position: absolute; top: 3px; left: 3px;
  width: 18px; height: 18px; border-radius: 50%; background: #fff;
  transition: transform .18s var(--ease-out);
}
.bascule-cookies input:checked + .bascule-piste { background: var(--bleu); }
.bascule-cookies input:checked + .bascule-piste::after { transform: translateX(18px); }
.bascule-cookies input:focus-visible + .bascule-piste { outline: 2px solid var(--bleu); outline-offset: 2px; }
.bascule-texte { font-size: 12.5px; color: var(--texte-2); min-width: 66px; }
.panneau-cookies-pied {
  display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap;
  padding: 16px 24px 20px; border-top: 1px solid var(--hairline);
}
@media (max-width: 560px) {
  .panneau-cookies-pied .btn { flex: 1 1 auto; }
}
@media (prefers-reduced-motion: reduce) {
  .bandeau-cookies, .voile-cookies, .panneau-cookies, .bascule-piste::after { transition: none; }
}

/* Lien de gestion des traceurs, dans le pied de page */
.lien-cookies {
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; color: inherit;
  text-decoration: underline; text-underline-offset: 3px;
}
.lien-cookies:hover { color: var(--bleu); }

/* Le bouton d'envoi termine la ligne de vérification, poussé à droite. */
.captcha-envoyer { margin-left: auto; }
@media (max-width: 560px) {
  .captcha-ligne { flex-wrap: wrap; }
  .captcha-envoyer { margin-left: 0; width: 100%; }
}

/* ---------- Ticket : groupes par catégorie ---------- */
.ticket-groupe + .ticket-groupe { margin-top: 22px; }
/* Le premier intitulé se détache du filet de la ligne date. */
.ticket-groupe:first-child .ticket-cat { margin-top: 14px; }
.ticket-cat {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  margin: 0 0 7px;
  font-family: var(--ff-ticket); font-size: 11px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; color: var(--graphite);
}
.ticket-cat-info { font-weight: 400; color: var(--texte-2); letter-spacing: .04em; }

/* Flèche du bouton : elle avance légèrement au survol. */
.btn-fleche {
  width: 16px; height: 16px; flex: none;
  stroke: currentColor; fill: none; stroke-width: 1.9;
  stroke-linecap: round; stroke-linejoin: round;
  transition: transform .16s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .btn:hover .btn-fleche { transform: translateX(3px); }
}
@media (prefers-reduced-motion: reduce) { .btn-fleche { transition: none; } }

/* ---------- Étape 1 du tunnel : hiérarchie des blocs ----------
   Chaque bloc annonce son rang, son statut et ce qu'il apporte. Un filet
   sépare les blocs : sans lui, les pièces à l'unité et le panier se lisaient
   comme des variantes du linge au poids, alors qu'ils s'y ajoutent. */
.estimation-blocs { gap: 0; }
/* :not(:first-child) plutôt que « + » : le message d erreur du groupe
   s intercale entre deux blocs et romprait l adjacence. */
.estimation-bloc:not(:first-child) {
  margin-top: 26px; padding-top: 26px; border-top: 1px solid var(--hairline);
}
.bloc-entete { display: flex; align-items: center; gap: 11px; margin-bottom: 6px; }
.bloc-num {
  flex: none; width: 26px; height: 26px; border-radius: 50%;
  background: var(--bleu); color: #fff;
  font-family: var(--ff-titre); font-size: 12.5px; font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center;
}
.estimation-bloc > .bloc-entete .bloc-titre {
  margin: 0; display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-family: var(--ff-titre); font-size: 15.5px; font-weight: 600; color: var(--graphite);
}
/* Requis ou facultatif : l'information manquait, et c'est elle qui lève
   l'hésitation devant un compteur qu'on n'est pas obligé de remplir. */
.bloc-statut {
  font-family: var(--ff-titre); font-size: 10.5px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--texte-2); background: var(--fond-input);
  border-radius: 999px; padding: 4px 10px;
}
.bloc-statut.est-requis { color: var(--bleu); background: var(--ice); }
.bloc-aide-long {
  font-size: 13.5px; color: var(--texte-2); line-height: 1.6;
  margin: 0 0 14px; padding-left: 37px; max-width: 68ch;
}
@media (max-width: 560px) {
  .bloc-aide-long { padding-left: 0; }
}

/* Le panier retenu s annule d un second clic : le curseur le laisse deviner. */
.paniers .creneau.est-choisi { cursor: pointer; }

/* Compteurs : les flèches natives du champ numérique réservent une place à
   droite, même invisibles, ce qui décalait le chiffre vers la gauche entre
   le − et le +. On les retire pour que le nombre tombe au centre. */
.compteur-cmd input[type="number"] { appearance: textfield; -moz-appearance: textfield; }
.compteur-cmd input[type="number"]::-webkit-outer-spin-button,
.compteur-cmd input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none; margin: 0;
}

/* ---------- Saisie tactile ----------
   iOS Safari zoome automatiquement sur tout champ dont la police fait moins
   de 16 px : au moindre appui, la page grossit et se decale, et le visiteur
   doit pincer pour revenir. Les champs du site etaient a 14,5 px (15 px pour
   les compteurs), donc chaque saisie declenchait ce zoom. 16 px l'evite, sans
   rien changer au rendu sur ordinateur.
   Regle placee en fin de feuille pour primer sur les declarations precedentes. */
@media (pointer: coarse) {
  .champ input, .champ select, .champ textarea,
  .compteur-cmd input, .test-saisie input,
  input[type="text"], input[type="email"], input[type="tel"],
  input[type="number"], input[type="date"], input[type="search"],
  select, textarea {
    font-size: 16px;
  }
  /* Le compteur reste compact malgre la police plus grande. */
  .compteur-cmd input { width: 42px; }
}