/* ═══════════════════════════════════════════════════════════
   La Belle Conciergerie
   Blanc, centré, une seule famille de caractères.
   Petites capitales espacées, filets fins, grandes photos.
   ═══════════════════════════════════════════════════════════ */

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

:root {
  --blanc:   #FFFFFF;
  --gris-1:  #F7F7F6;
  --encre:   #22262C;
  --encre-2: #6B7078;
  --gris:    #9AA0A6;
  --or:      #B08D4F;
  --nuit:    #0B1F33;
  --filet:   rgba(34,38,44,.13);
  --filet-f: rgba(34,38,44,.26);
  --filet-blanc: rgba(255,255,255,.3);

  --police: 'Jost', 'Futura', 'Century Gothic', -apple-system, sans-serif;
  --marge:  clamp(22px, 6vw, 96px);
  --barre:  auto;
}

html { scroll-behavior: smooth; scroll-padding-top: 160px; }

body {
  font-family: var(--police);
  font-size: 16px; line-height: 1.75; font-weight: 300;
  background: var(--blanc); color: var(--encre);
  overflow-x: hidden; -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; }

/* ─── Titres : capitales espacées ─── */
h1, h2, h3 { font-weight: 400; line-height: 1.22; }
.titre {
  font-size: clamp(22px, 2.4vw, 34px); text-transform: uppercase;
  letter-spacing: .12em; font-weight: 400;
}
.titre-petit {
  font-size: clamp(14px, 1.2vw, 17px); text-transform: uppercase;
  letter-spacing: .18em; font-weight: 500;
}
em, .souligne { font-style: normal; color: var(--or); }

.eyebrow, .mono {
  font-size: 11px; font-weight: 400; letter-spacing: .26em;
  text-transform: uppercase; color: var(--gris);
}
.eyebrow { display: block; margin-bottom: 26px; }

/* La citation de la Maison : la calligraphie de l'enseigne — capitales,
   graisse légère, large interlettrage — un cran sous le titre pour qu'elle
   ouvre la page sans lui disputer la place. Le filet reprend celui qui
   séparait le nom de la zone sur l'illustration. */
.citation-maison {
  display: block; text-transform: uppercase; font-weight: 300;
  font-size: min(23px, 2.4vw); letter-spacing: .26em;
  line-height: 1.7; color: var(--encre);
  white-space: nowrap;           /* elle tient sur une seule ligne */
  margin: 0 0 30px;
}
/* En dessous, la ligne ne tiendrait plus qu'en corps minuscule :
   on la laisse alors se replier sur deux lignes, plus lisible. */
@media (max-width: 620px) {
  .citation-maison {
    white-space: normal; text-wrap: balance;
    font-size: 13px; letter-spacing: .18em;
  }
}
.citation-maison::after {
  content: ''; display: block; width: 48px; height: 1px;
  background: var(--filet); margin: 28px auto 0;
}

.bande { padding-inline: var(--marge); }
section { padding-block: clamp(72px, 11vh, 150px); }
.centre { text-align: center; }
.mesure { max-width: 62ch; margin-inline: auto; }
.mesure-large { max-width: 78ch; margin-inline: auto; }
.lede { font-size: clamp(16px, 1.3vw, 18px); line-height: 1.85; color: var(--encre-2); }
.sur-papier-2, .gris { background: var(--gris-1); }

hr.filet { border: 0; border-top: 1px solid var(--filet); margin: 0; }

/* ═══ L'EN-TÊTE ═══ Logo centré, navigation centrée dessous. ═══ */
#nav {
  position: relative; z-index: 60; background: var(--blanc);
  padding: clamp(26px, 3.5vh, 44px) var(--marge) 0;
}
.nav-haut { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 18px; }
.enseigne {
  grid-column: 2; text-align: center; text-decoration: none;
  font-size: clamp(19px, 2.1vw, 30px); letter-spacing: .3em;
  text-transform: uppercase; font-weight: 400; white-space: nowrap;
}
.enseigne .zone {
  display: block; font-size: .6em; letter-spacing: .34em;
  margin-top: 7px; color: var(--encre); font-weight: 400;
}
.enseigne small {
  display: block; font-size: 9px; letter-spacing: .36em;
  color: var(--gris); margin-top: 9px; font-weight: 400;
}
.symbole {
  grid-column: 3; justify-self: end;
  background: none; border: 0; cursor: pointer;
  width: 38px; height: 38px; display: grid; align-content: center; gap: 7px; justify-items: end;
}
.symbole span { display: block; height: 1px; width: 24px; background: var(--encre); transition: transform .4s cubic-bezier(.3,.8,.3,1), opacity .25s, width .4s; }
.symbole span:last-child { width: 15px; }
.symbole:hover span:last-child { width: 24px; }
.symbole[aria-expanded="true"] span { width: 24px; }
.symbole[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
.symbole[aria-expanded="true"] span:last-child { transform: translateY(-4px) rotate(-45deg); }

.menu {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  list-style: none; margin-top: clamp(26px, 3.6vh, 46px);
  padding-bottom: clamp(20px, 2.6vh, 32px);
}
.menu li + li { border-left: 1px solid var(--filet); }
.menu a {
  display: block; padding: 4px clamp(14px, 1.9vw, 30px);
  font-size: 11.5px; letter-spacing: .2em; text-transform: uppercase;
  text-decoration: none; color: var(--encre); font-weight: 400;
  transition: color .3s;
}
.menu a:hover, .menu a[aria-current="page"] { color: var(--or); }

/* Menu replié sur mobile */
@media (max-width: 860px) {
  .symbole { display: grid; }
  /* Le logotype très espacé dépassait la grille et poussait le symbole hors
     de l'écran : sur mobile il occupe toute la largeur et le symbole se cale
     en absolu. */
  .nav-haut { display: block; position: relative; text-align: center; }
  /* Le nom reste sur une seule ligne jusqu'à 320 px : le corps et
     l'interlettrage suivent la largeur, et on ne coupe jamais. */
  .enseigne {
    display: block; white-space: nowrap;
    font-size: clamp(10.5px, 3.45vw, 19px); letter-spacing: .15em;
    padding-inline: 42px;
  }
  .enseigne .zone { font-size: 9.5px; letter-spacing: .3em; margin-top: 8px; }
  .enseigne small { font-size: 8px; letter-spacing: .26em; white-space: normal; }
  .symbole { position: absolute; right: 0; top: 50%; transform: translateY(-50%); }
  .menu {
    flex-direction: column; align-items: stretch; margin-top: 0;
    /* Le rembourrage bas doit tomber à zéro aussi : max-height n'annule que la
       boîte de contenu, le padding reste et laissait passer une bande de 21 px
       de liens sous l'en-tête. */
    padding-bottom: 0;
    max-height: 0; overflow: hidden;
    transition: max-height .45s cubic-bezier(.3,.8,.3,1), margin-top .45s, padding-bottom .45s;
  }
  .menu.ouvert { max-height: 60vh; margin-top: 26px; padding-bottom: 22px; }
  .menu li + li { border-left: 0; border-top: 1px solid var(--filet); }
  .menu a { padding: 16px 0; text-align: center; font-size: 12px; }
}
@media (min-width: 861px) { .symbole { display: none; } }

/* ═══ LIENS ═══ */
.lien {
  display: inline-block; font-size: 11.5px; letter-spacing: .22em;
  text-transform: uppercase; text-decoration: none; color: var(--encre);
  padding-bottom: 9px; border-bottom: 1px solid var(--filet-f);
  transition: color .3s, border-color .3s;
}
.lien:hover { color: var(--or); border-bottom-color: var(--or); }

.bouton {
  display: inline-block; font-family: var(--police);
  font-size: 11.5px; letter-spacing: .22em; text-transform: uppercase;
  background: var(--encre); color: #fff; border: 1px solid var(--encre);
  padding: 18px 42px; cursor: pointer; text-decoration: none;
  transition: background .3s, color .3s;
}
.bouton:hover { background: transparent; color: var(--encre); }

/* ═══ LE HÉROS ═══ L'illustration seule, plein cadre, sans texte. ═══ */
.heros {
  position: relative; overflow: hidden;
  height: clamp(420px, 74vh, 760px);
  display: flex; align-items: center; justify-content: center;
  background: var(--nuit);
}
.heros-fixe {
  position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1;
  background-color: var(--nuit);
}
/* L'illustration est une vraie image et non un fond CSS : elle est indexable
   par Google Images et elle porte son propre texte de remplacement.
   Recadrage légèrement haut : sur un écran large, c'est le bas de la piscine
   qui est rogné, jamais le concierge. */
.heros-fixe picture { display: block; width: 100%; height: 100%; }
.heros-fixe img { width: 100%; height: 100%; object-fit: cover; object-position: center 42%; }


/* ═══ EN-TÊTE DES PAGES INTÉRIEURES ═══ */
.entete { padding: clamp(56px, 9vh, 104px) var(--marge) clamp(34px, 5vh, 54px); text-align: center; }
.entete h1 { font-size: clamp(22px, 2.6vw, 36px); text-transform: uppercase; letter-spacing: .13em; }
.entete-sous { margin: 24px auto 0; max-width: 62ch; color: var(--encre-2); font-size: clamp(15.5px, 1.25vw, 17px); line-height: 1.85; }

/* ═══ LES BLOCS DE SERVICES ═══ */
.blocs { display: grid; gap: clamp(50px, 7vw, 96px); }
.bloc { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: clamp(28px, 5vw, 86px); }
.bloc:nth-child(even) .bloc-image { order: 2; }
.bloc-image { aspect-ratio: 3/2; background: var(--gris-1); overflow: hidden; }
.bloc-image picture { display: block; height: 100%; }
.bloc-image img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
/* Image presque carrée : on recadre un peu plus bas pour garder
   le concierge et la famille dans le champ. */
.bloc-image--maison img { object-position: center 58%; }
.bloc-texte { text-align: center; padding-inline: clamp(0px, 2vw, 40px); }
.bloc-texte h2 { margin-bottom: 20px; }
.bloc-texte p { color: var(--encre-2); margin-bottom: 30px; }
@media (max-width: 860px) {
  .bloc { grid-template-columns: 1fr; }
  .bloc:nth-child(even) .bloc-image { order: 0; }
}

/* ═══ LES CHIFFRES ═══ */
.chiffres { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--filet); border-block: 1px solid var(--filet); }
.chiffre { background: var(--blanc); padding: clamp(32px, 4.5vw, 58px) 18px; text-align: center; }
.chiffre b { display: block; font-size: clamp(30px, 3.6vw, 50px); font-weight: 300; letter-spacing: -.01em; }
.chiffre span { display: block; margin-top: 12px; font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase; color: var(--gris); }
@media (max-width: 760px) { .chiffres { grid-template-columns: 1fr 1fr; } }

/* ═══ LES ENGAGEMENTS ═══ */
.engagements { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(30px, 4.5vw, 70px); }
.engagement { text-align: center; }
.engagement h3 { margin-bottom: 16px; }
.engagement p { color: var(--encre-2); font-size: 15.5px; }
@media (max-width: 760px) { .engagements { grid-template-columns: 1fr; } }

/* ═══ LA FORMULE ═══ */
.formule-taux { font-size: clamp(56px, 8vw, 116px); font-weight: 300; line-height: 1; letter-spacing: -.02em; }
.formule-taux small { display: block; font-size: 10.5px; letter-spacing: .24em; text-transform: uppercase; color: var(--gris); margin-top: 20px; line-height: 2; }
.listes { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: clamp(32px, 5vw, 86px); margin-top: clamp(44px, 6vw, 80px); text-align: left; }
.liste h2 { font-size: 10.5px; letter-spacing: .24em; text-transform: uppercase; color: var(--gris); font-weight: 400; padding-bottom: 16px; border-bottom: 1px solid var(--filet-f); }
.liste ul { list-style: none; }
.liste li { padding: 15px 0; border-bottom: 1px solid var(--filet); font-size: 15.5px; line-height: 1.6; }
.options { margin-top: clamp(40px, 5vw, 66px); }
.options-titre { font-size: 10.5px; letter-spacing: .24em; text-transform: uppercase; color: var(--gris); margin-bottom: 16px; }
.options p { color: var(--encre-2); font-size: 15.5px; }
@media (max-width: 860px) { .listes { grid-template-columns: 1fr; gap: 34px; } }

/* ═══ MANIFESTE ═══ */
.manifeste p { font-size: clamp(16.5px, 1.4vw, 19px); line-height: 1.9; margin-bottom: 1.3em; color: var(--encre-2); }
.manifeste p:last-child { margin-bottom: 0; }
.chiffre-vif { color: var(--or); }

/* ═══ INDEX DU MÉTIER ═══ */
.index-entree { display: grid; grid-template-columns: 54px minmax(0,4fr) minmax(0,7fr); gap: 0 clamp(18px,3vw,50px); align-items: start; padding: clamp(26px,3vw,40px) 0; border-top: 1px solid var(--filet); text-align: left; }
.index-entree:last-child { border-bottom: 1px solid var(--filet); }
.index-num { font-size: 11px; color: var(--gris); letter-spacing: .1em; padding-top: .45em; }
.index-entree p { color: var(--encre-2); font-size: 15.5px; }
.index-detail { margin-top: 12px; font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--gris); }
@media (max-width: 860px) { .index-entree { grid-template-columns: 36px 1fr; row-gap: 10px; } .index-entree p { grid-column: 2; } }

/* ═══ FRISE ═══ */
.frise { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(24px, 3.4vw, 54px); }
.frise-etape { text-align: center; }
.frise-quand { font-size: 10px; letter-spacing: .24em; text-transform: uppercase; color: var(--or); margin-bottom: 16px; }
.frise-etape h2 { margin-bottom: 14px; }
.frise-etape p { font-size: 15px; color: var(--encre-2); }
@media (max-width: 1040px) { .frise { grid-template-columns: 1fr 1fr; row-gap: 40px; } }
@media (max-width: 560px) { .frise { grid-template-columns: 1fr; } }

/* ═══ CATALOGUE ═══ */
.filtres { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 26px; margin-bottom: clamp(36px, 5vw, 56px); }
.filtre { font-family: var(--police); font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; background: none; border: 0; border-bottom: 1px solid transparent; padding: 5px 0; color: var(--gris); cursor: pointer; transition: color .25s, border-color .25s; }
.filtre:hover { color: var(--encre); }
.filtre.actif { color: var(--encre); border-bottom-color: var(--or); }

.carte { columns: 2; column-gap: clamp(40px, 6vw, 96px); text-align: left; }
.plat { break-inside: avoid; display: grid; grid-template-columns: 1fr auto; gap: 4px 24px; padding: 22px 0 24px; border-bottom: 1px solid var(--filet); }
.plat.cachee { display: none; }
.plat-cat { grid-column: 1/-1; font-size: 9.5px; letter-spacing: .22em; text-transform: uppercase; color: var(--gris); margin-bottom: 9px; }
.plat h3 { font-size: 15px; text-transform: uppercase; letter-spacing: .13em; font-weight: 500; }
.plat-prix { font-size: 17px; font-weight: 300; white-space: nowrap; text-align: right; }
.plat-prix small { display: block; font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--gris); margin-top: 5px; }
.plat p { grid-column: 1/-1; font-size: 15px; color: var(--encre-2); margin-top: 8px; }
.plat-delai { grid-column: 1/-1; font-size: 9.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--gris); margin-top: 12px; }
@media (max-width: 860px) { .carte { columns: 1; } }

/* ═══ QUESTIONS ═══ */
.questions { columns: 2; column-gap: clamp(40px, 6vw, 96px); text-align: left; }
.question { break-inside: avoid; padding: 28px 0; border-top: 1px solid var(--filet); }
.question:first-child { border-top: 0; padding-top: 0; }
.question h2 { margin-bottom: 14px; }
.question p { font-size: 15.5px; color: var(--encre-2); }
@media (max-width: 860px) { .questions { columns: 1; } }

/* ═══ CONTACT ═══ */
.mot { font-size: clamp(16px, 1.3vw, 18px); line-height: 1.85; color: var(--encre-2); }
.mot p { margin-bottom: 1em; }
.coordonnees { margin-top: 44px; display: grid; gap: 20px; text-align: left; }
.coord-ligne { display: grid; grid-template-columns: 130px 1fr; gap: 18px; align-items: baseline; padding-bottom: 16px; border-bottom: 1px solid var(--filet); }
.coord-ligne dt { font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--gris); }
.coord-ligne dd, .coord-ligne dd a { font-size: 16px; color: var(--encre); text-decoration: none; }
.coord-ligne dd a:hover { color: var(--or); }
@media (max-width: 860px) { .coord-ligne { grid-template-columns: 1fr; gap: 6px; } }

.formulaire { display: grid; gap: 30px; text-align: left; }
.duo { display: grid; gap: 30px; grid-template-columns: 1fr 1fr; }
@media (max-width: 860px) { .duo { grid-template-columns: 1fr; } }
.champ label { display: block; font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--gris); margin-bottom: 11px; }
.champ input, .champ select, .champ textarea {
  width: 100%; font-family: var(--police); font-size: 16px; font-weight: 300; color: var(--encre);
  background: transparent; border: 0; border-bottom: 1px solid var(--filet-f); border-radius: 0;
  padding: 8px 0 13px; transition: border-color .3s;
}
.champ input:focus, .champ select:focus, .champ textarea:focus { outline: 0; border-bottom-color: var(--or); }
.champ input::placeholder, .champ textarea::placeholder { color: var(--gris); }
.champ textarea { resize: vertical; min-height: 88px; }
.mention { font-size: 12px; letter-spacing: .1em; line-height: 1.9; color: var(--gris); text-transform: uppercase; }
.mention a { color: var(--or); display: inline-block; padding-block: 4px; margin-block: -4px; }
/* Téléphone et e-mail : ce sont les liens les plus utiles du site sur mobile,
   ils doivent être confortables à toucher. */
.coord-ligne dd a { display: inline-block; padding-block: 4px; margin-block: -4px; }

/* ═══ ENCART ═══ */
.encart { border: 1px solid var(--filet); padding: clamp(32px, 4.5vw, 64px); max-width: 76ch; margin-inline: auto; text-align: center; }
.encart h2 { margin-bottom: 24px; }
.encart p { color: var(--encre-2); font-size: 15.5px; }
.encart p + p { margin-top: 1em; }
.encart .lien { margin-top: 32px; }

/* ═══ LISTE À COCHER ═══ */
.liste-check { list-style: none; display: grid; gap: 13px; text-align: left; }
.liste-check li { position: relative; padding-left: 24px; font-size: 15.5px; color: var(--encre-2); }
.liste-check li::before { content: ''; position: absolute; left: 0; top: .55em; width: 11px; height: 5px; border-left: 1px solid var(--or); border-bottom: 1px solid var(--or); transform: rotate(-45deg); }

/* ═══ PIED ═══ */
footer { background: var(--gris-1); padding: clamp(50px, 7vh, 86px) var(--marge) clamp(26px, 4vh, 40px); text-align: center; }
.pied-nom { font-size: clamp(16px, 1.6vw, 21px); letter-spacing: .3em; text-transform: uppercase; }
.pied-liens { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 30px; margin-top: 30px; font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; }
.pied-liens a {
  text-decoration: none; color: var(--encre-2); transition: color .25s;
  /* Cible tactile d'au moins 24 px de haut : en dessous, on tape à côté.
     Les marges négatives annulent l'espace ajouté pour que le pied garde
     exactement le même dessin qu'avant. */
  display: inline-block; padding-block: 5px; margin-block: -5px;
}
.pied-liens a:hover { color: var(--or); }
.pied-bas { margin-top: clamp(32px, 4.5vh, 50px); padding-top: 22px; border-top: 1px solid var(--filet); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--gris); display: flex; flex-wrap: wrap; gap: 10px 26px; justify-content: center; }

/* ═══ PAGE LÉGALE ═══ */
.legale { text-align: left; max-width: 78ch; margin-inline: auto; }
.legale a { display: inline-block; padding-block: 4px; margin-block: -4px; }
.legale h2 { font-size: 15px; text-transform: uppercase; letter-spacing: .16em; margin: 46px 0 16px; font-weight: 500; }
.legale h2:first-of-type { margin-top: 28px; }
.legale h3 { font-size: 15.5px; letter-spacing: .01em; margin: 30px 0 9px; font-weight: 500; color: var(--encre); }
.legale h2 + h3 { margin-top: 20px; }
.legale p, .legale ul { color: var(--encre-2); font-size: 15.5px; margin-bottom: 15px; }
.legale li { margin-bottom: 7px; }
.legale ul { padding-left: 22px; }
.legale a { color: var(--or); }

/* ═══ APPARITION ═══ */
.js .paraitre { opacity: 0; transform: translateY(14px); transition: opacity .9s ease, transform .9s ease; }
.js .paraitre.vu { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .paraitre { opacity: 1; transform: none; transition: none; }
}

@media print {
  #nav, footer, .heros, .filtres, .bouton, .lien { display: none !important; }
  body { background: #fff; font-size: 11pt; }
  section { padding-block: 16px; }
  .carte { columns: 2; }
  .plat { break-inside: avoid; }
}

/* ═══ BULLE WHATSAPP ═══
   Discrète, fixe en bas à droite, au-dessus de tout. Elle porte un vrai
   libellé sur grand écran et se réduit au sigle sur téléphone. */
.bulle-wa {
  position: fixed; right: clamp(16px, 2.6vw, 30px); bottom: clamp(16px, 2.6vw, 30px);
  z-index: 80; display: inline-flex; align-items: center; gap: 11px;
  padding: 13px 20px 13px 16px; border-radius: 999px;
  background: var(--nuit); color: #fff; text-decoration: none;
  font-size: 12px; letter-spacing: .13em; text-transform: uppercase; font-weight: 400;
  box-shadow: 0 6px 22px rgba(11, 31, 51, .22);
  transition: background .25s ease, transform .25s ease, box-shadow .25s ease;
}
.bulle-wa:hover { background: var(--or); transform: translateY(-2px); box-shadow: 0 10px 28px rgba(11,31,51,.28); }
.bulle-wa:focus-visible { outline: 2px solid var(--or); outline-offset: 3px; }
.bulle-wa svg { width: 21px; height: 21px; flex: none; fill: currentColor; }
@media (max-width: 700px) {
  .bulle-wa { padding: 14px; gap: 0; }
  .bulle-wa .bulle-mot { display: none; }
}
@media print { .bulle-wa { display: none !important; } }

/* ═══════════════════════ ESTIMATION ═══════════════════════
   Un parcours en sept écrans. Sans JavaScript, tous les écrans
   s'affichent à la suite et le formulaire reste utilisable. */

.estim { max-width: 62ch; margin-inline: auto; }
.estim-jauge { height: 1px; background: var(--filet); margin-bottom: 14px; overflow: hidden; }
.estim-jauge i { display: block; height: 1px; width: 0; background: var(--or); transition: width .45s cubic-bezier(.3,.8,.3,1); }
.estim-compte { font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--gris); text-align: center; margin-bottom: 40px; }

.etape { text-align: center; }
.js .etape[hidden] { display: none; }
.etape h2 { margin-bottom: 10px; }
.etape-sous { font-size: 14.5px; line-height: 1.75; color: var(--encre-2); margin-bottom: 34px; }

/* ─ champs ─ */
.estim .champ { text-align: left; margin-bottom: 22px; }
.estim label { display: block; font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--gris); margin-bottom: 9px; }
.estim input[type=text], .estim input[type=tel], .estim input[type=email],
.estim input[type=number], .estim textarea, .estim select {
  width: 100%; border: 0; border-bottom: 1px solid var(--filet); background: none;
  padding: 10px 0; font: inherit; font-size: 16px; color: var(--encre);
  border-radius: 0; -webkit-appearance: none; appearance: none;
}
.estim textarea { min-height: 96px; resize: vertical; line-height: 1.7; }
.estim input:focus, .estim textarea:focus, .estim select:focus { outline: none; border-bottom-color: var(--or); }
.estim .duo { display: grid; grid-template-columns: 1fr 1fr; gap: 0 26px; }
@media (max-width: 560px) { .estim .duo { grid-template-columns: 1fr; } }

/* ─ choix en pastilles ─ */
.choix { display: flex; flex-wrap: wrap; gap: 10px; }
.choix.deux { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.choix input { position: absolute; opacity: 0; width: 0; height: 0; }
.choix label {
  display: block; margin: 0; cursor: pointer;
  border: 1px solid var(--filet); padding: 13px 18px; text-align: center;
  font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--encre-2); transition: border-color .2s, color .2s, background .2s;
}
.choix label:hover { border-color: var(--gris); color: var(--encre); }
.choix input:checked + label { border-color: var(--nuit); background: var(--nuit); color: #fff; }
.choix input:focus-visible + label { outline: 2px solid var(--or); outline-offset: 2px; }
.choix.serre label { padding: 11px 15px; font-size: 11px; letter-spacing: .1em; }

/* ─ adresse : la liste de suggestions ─ */
.champ-adresse { position: relative; }
.suggestions {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 20;
  background: var(--blanc); border: 1px solid var(--filet); border-top: 0;
  max-height: 260px; overflow-y: auto; list-style: none; text-align: left;
}
.suggestions:empty, .suggestions[hidden] { display: none; }
.suggestions li {
  padding: 12px 14px; font-size: 14.5px; color: var(--encre-2); cursor: pointer;
  border-bottom: 1px solid var(--filet);
}
.suggestions li:last-child { border-bottom: 0; }
.suggestions li:hover, .suggestions li[aria-selected="true"] { background: var(--gris-1); color: var(--encre); }
.suggestions li small { display: block; font-size: 11px; color: var(--gris); margin-top: 3px; letter-spacing: .04em; }
.estim-aide { font-size: 12.5px; color: var(--gris); margin-top: 10px; line-height: 1.7; }
.estim-aide button {
  border: 0; background: none; padding: 0; font: inherit; font-size: 12.5px;
  color: var(--or); border-bottom: 1px solid var(--filet-f, rgba(176,141,79,.4)); cursor: pointer;
}
.hors-zone { font-size: 12.5px; line-height: 1.7; color: var(--encre-2); border-left: 1px solid var(--or); padding-left: 14px; margin-top: 16px; text-align: left; }

/* ─ calendrier ─ */
.cal { border: 1px solid var(--filet); padding: 18px; }
.cal-tete { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.cal-mois { font-size: 12px; letter-spacing: .18em; text-transform: uppercase; }
.cal-tete button { border: 1px solid var(--filet); background: none; width: 32px; height: 32px; cursor: pointer; color: var(--encre); font-size: 15px; line-height: 1; }
.cal-tete button:disabled { opacity: .3; cursor: default; }
.cal-grille { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal-jour-nom { font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: var(--gris); text-align: center; padding-bottom: 6px; }
.cal-case { border: 1px solid transparent; background: none; padding: 9px 0; font: inherit; font-size: 13.5px; color: var(--encre); cursor: pointer; }
.cal-case:hover:not(:disabled) { border-color: var(--filet); }
.cal-case:disabled { color: var(--filet); cursor: default; }
.cal-case[aria-pressed="true"] { background: var(--nuit); color: #fff; border-color: var(--nuit); }
.cal-creneaux { margin-top: 18px; }

/* ─ navigation du parcours ─ */
.estim-nav { display: flex; gap: 14px; justify-content: center; align-items: center; margin-top: 38px; flex-wrap: wrap; }
.estim-retour { border: 0; background: none; font: inherit; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--gris); cursor: pointer; padding: 12px 6px; }
.estim-retour:hover { color: var(--encre); }
.champ.fichier input[type=file] { border: 0; padding: 0; font-size: 13.5px; color: var(--encre-2); width: 100%; }
.champ.fichier input[type=file]::file-selector-button {
  font: inherit; font-size: 10px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--encre); background: transparent; border: 1px solid var(--trait);
  padding: 10px 18px; margin-right: 14px; cursor: pointer; transition: border-color .3s, color .3s;
}
.champ.fichier input[type=file]::file-selector-button:hover { border-color: var(--or); color: var(--or); }
.poids-total { font-size: 13px; color: var(--gris); margin-top: 6px; min-height: 1.2em; }
.poids-total.trop { color: #9B2C2C; }
.estim-erreur { font-size: 13px; color: #9B2C2C; margin-top: 14px; min-height: 1.2em; }

/* ─ récapitulatif ─ */
.recap { text-align: left; border-top: 1px solid var(--filet); margin-top: 8px; }
.recap div { display: grid; grid-template-columns: 1fr auto; gap: 8px 22px; padding: 11px 0; border-bottom: 1px solid var(--filet); font-size: 14px; }
.recap dt, .recap span:first-child { color: var(--gris); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; align-self: center; }
.recap span:last-child { color: var(--encre); text-align: right; }