/* Estimation Clermont-Ferrand — feuille de style de la marque de service.
 *
 * Feuille AUTONOME, pas une surcharge de styles.css : les deux identités doivent
 * pouvoir diverger sans se contraindre l'une l'autre.
 *
 * Le parti pris est l'inverse du site personnel. Là où celui-ci est chaud, arrondi et
 * éditorial — craie, vert Auvergne, grotesque géométrique —, celui-ci est froid,
 * anguleux et documentaire : la pierre de Volvic de la cathédrale, un blanc bleuté,
 * une serif de labeur pour les titres, et une seule couleur de signal.
 *
 * Ce n'est pas qu'une question de palette. La structure change aussi : bannière en deux
 * colonnes au lieu d'un texte posé sur une photo, titres précédés d'un filet, chiffres
 * en tableau, angles vifs. Un simple changement de couleurs se serait vu.
 */

:root {
  --encre: #10151C;        /* basalte, la pierre de la cathédrale */
  --encre-clair: #1D2530;
  --papier: #F1F4F7;       /* blanc froid — le site personnel est sur une craie chaude */
  --papier-pur: #FFFFFF;
  --acier: #5C6B7D;        /* texte secondaire */
  --trait: #D3DBE3;
  --signal: #C2402A;       /* vermillon : tuile et lave, la seule couleur d'action */
  --signal-sombre: #A5341F;
  --ciel: #2E6BA8;         /* le bleu du ciel de la photo, réservé aux chiffres */
  --rayon: 2px;            /* presque droit : le site personnel est arrondi */
  --max: 1160px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--papier);
  color: var(--encre);
  font-family: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 17px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: "Newsreader", Georgia, "Times New Roman", serif;
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -.01em;
  margin: 0 0 .7rem;
}
h1 { font-size: clamp(2.1rem, 5vw, 3.5rem); }
h2 { font-size: clamp(1.55rem, 3.2vw, 2.25rem); }
h3 { font-size: 1.08rem; font-family: "IBM Plex Sans", sans-serif; font-weight: 600; letter-spacing: 0; }
p { margin: 0 0 1rem; }
a { color: var(--signal); }

strong { font-weight: 600; }

.conteneur { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 clamp(1.2rem, 4vw, 2.4rem); }
.conteneur--etroit { max-width: 790px; }

.saut {
  position: absolute; left: -9999px; top: 0; background: var(--encre); color: #fff;
  padding: .8rem 1.2rem; z-index: 20;
}
.saut:focus { left: .6rem; top: .6rem; }

:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }

/* ------------------------------------------------------------------ entête */

.entete { background: var(--papier-pur); border-bottom: 1px solid var(--trait); }
.entete__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .9rem 0; }
/* La mention est en encre, avec une bande vermillon qui la traverse en boucle. Le
   dégradé est appliqué au texte lui-même (background-clip: text) plutôt qu'en surcouche :
   pas d'élément en plus, et le texte reste sélectionnable et lisible par un lecteur
   d'écran. Les deux teintes du dégradé sont opaques — un dégradé « transparent » rendrait
   invisibles les parties non balayées. */
.entete__mention {
  font-size: .74rem; text-transform: uppercase; letter-spacing: .14em; font-weight: 600;
  color: var(--encre);
  background-image: linear-gradient(100deg,
    var(--encre) 42%, var(--signal) 50%, var(--encre) 58%);
  background-size: 280% 100%;
  background-position: 100% 0;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: balayage 4.5s ease-in-out infinite;
}

@keyframes balayage {
  0%, 12%   { background-position: 100% 0; }
  55%, 100% { background-position: 0% 0; }
}

/* Certains visiteurs demandent explicitement moins d'animation : on la coupe et le texte
   reste simplement noir. */
@media (prefers-reduced-motion: reduce) {
  .entete__mention {
    animation: none;
    background-image: none;
    -webkit-text-fill-color: var(--encre);
  }
}

/* Logotype : un dessin — les flèches de la cathédrale sur une toiture traversée par une
   flèche de valeur — puis le nom. « ESTIMATION » porte la couleur de signal : c'est le mot
   qui doit rester en tête, et le seul point de couleur de l'entête. */
.logo { display: inline-flex; align-items: center; gap: .7rem; text-decoration: none; color: inherit; }
.logo__marque { display: flex; align-items: center; flex: none; color: var(--encre); }
.logo__marque svg { display: block; width: 52px; height: 32px; }
.logo__texte { display: block; }
/* ESTIMATION domine, en vermillon. CLERMONT-FERRAND suit, plus petit et en encre.
   Les deux en capitales serrées : c'est le rapport de forces du logo fourni. */
.logo__sur {
  display: block; font-size: 1.18rem; line-height: .95; font-weight: 700;
  text-transform: uppercase; letter-spacing: .01em; color: var(--signal);
}
.logo__nom {
  display: block; font-size: .82rem; line-height: 1.1; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em; color: var(--encre); margin-top: .16rem;
}

/* Au pied, sur fond encre : le dessin passe en clair, le mot garde sa couleur. */
.logo--pied .logo__marque { color: rgba(241, 244, 247, .8); }
.logo--pied .logo__nom { color: rgba(241, 244, 247, .78); }

/* ------------------------------------------------------------------- hero */

/* Bannière pleine largeur : la photo occupe toute la section, le texte se pose dessus.
   Le voile est un dégradé et non un aplat — dense à gauche, là où se trouve le texte,
   nettement plus léger à droite, où la ville doit rester lisible. La couleur de fond sert
   de repli : si l'image ne charge pas, le texte clair reste lisible sur l'encre.
   L'image se change sans toucher au CSS : déposer public/hero-ville.jpg suffit. */
.hero {
  position: relative;
  background-color: var(--encre);
  background-image: var(--hero, url('/hero-cathedrale.jpg'));
  background-size: cover;
  /* 30 % et pas 50 % : au centrage par défaut, le surplus vertical est coupé pour moitié
     en haut et les flèches de la cathédrale sont rognées. En remontant le cadrage, on
     garde une trentaine de pixels de ciel au-dessus des flèches. */
  /* 40 % et non 34 % : la bannière ayant raccourci, la tranche visible de la photo est
     plus fine. En descendant un peu le point d'ancrage, la cathédrale reste entière
     dans le cadre au lieu d'être coupée sous les flèches. */
  /* Le cadrage vertical, calculé et non choisi à l'œil.

     La bannière ne montre qu'une tranche de la photo — 55 % à 1440 px de large, 41 % à
     1920. À 40 %, cette fenêtre commençait à 18 % de l'image : les flèches, qui culminent
     à 11 %, étaient coupées, et le bas était occupé par des toits qui n'apportent rien.

     16 % est la seule valeur qui garde À LA FOIS les flèches et la base de la cathédrale
     dans le cadre, de 1280 à 1920 px. En dessous les flèches sortent par le haut, au-dessus
     la base sort par le bas. */
  background-position: center 16%;
  color: var(--papier);
}
/* Deux voiles superposés plutôt qu'un seul latéral. La cathédrale occupe le tiers gauche
   de la photo, exactement là où se trouve le texte : un dégradé horizontal dense la
   noyait forcément. On assombrit donc surtout PAR LE BAS, là où le texte est posé, et on
   laisse le haut presque clair — la ville et les flèches restent lisibles. */
.hero::before {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(180deg,
      rgba(10, 14, 20, .16) 0%,
      rgba(10, 14, 20, .30) 34%,
      rgba(10, 14, 20, .78) 72%,
      rgba(10, 14, 20, .92) 100%),
    linear-gradient(96deg,
      rgba(10, 14, 20, .38) 0%,
      rgba(10, 14, 20, .14) 62%,
      rgba(10, 14, 20, 0) 100%);
}
/* Passé 2 100 px, la photo est tellement agrandie par le recadrage que la cathédrale ne
   tient plus dans les 528 px de bannière : il faut choisir entre les flèches et la base.
   On garde les flèches — c'est la silhouette qu'on reconnaît. */
@media (min-width: 2100px) {
  .hero { background-position: center 11%; }
}

.hero__grille { position: relative; max-width: var(--max); margin: 0 auto; }
.hero__texte {
  /* Plus large de quatre caractères : le chapô tient sur une ligne de moins, ce qui
     raccourcit la bannière sans retirer un mot au texte. */
  max-width: 46rem;
  /* Marge haute resserrée. Elle doit encore dégager le ciel au-dessus du texte — c'est
     ce qui laisse voir les flèches — mais 11 rem était généreux au point de pousser le
     bouton hors de vue au premier écran. Le bas, lui, ne servait à rien. */
  padding: clamp(2.8rem, 6.2vw, 4.75rem) clamp(1.2rem, 4vw, 2.4rem) clamp(1.3rem, 2.2vw, 1.75rem);
}
/* La colonne image ne sert plus : la photo est portée par la section elle-même. */
.hero__image { display: none; }
/* Le voile ayant été allégé pour laisser voir la cathédrale, le texte reprend du
   contraste par une ombre portée douce plutôt qu'en réassombrissant toute l'image. */
.hero h1 {
  color: var(--papier-pur); text-shadow: 0 1px 18px rgba(6, 9, 14, .55);
  /* 1.15 sur deux lignes de 56 px laisse un blanc que rien ne vient occuper. */
  line-height: 1.06;
  margin-bottom: .45rem;
}
.hero .chapo {
  color: rgba(244, 247, 250, .92); max-width: 56ch;
  text-shadow: 0 1px 12px rgba(6, 9, 14, .6);
  line-height: 1.5;
  margin-bottom: .6rem;
}
.surtitre {
  font-size: .68rem; text-transform: uppercase; letter-spacing: .22em;
  color: var(--signal); font-weight: 600; margin: 0 0 1.1rem;
}
.hero .surtitre { color: #E4826C; text-shadow: 0 1px 10px rgba(6, 9, 14, .7); }
.chapo { font-size: 1.04rem; }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .9rem 1.3rem; margin: 1rem 0 .7rem; }
.hero__reassurance { font-size: .85rem; color: rgba(241, 244, 247, .78); text-shadow: 0 1px 10px rgba(6, 9, 14, .6); }

.pastilles { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; padding: 0; margin: .8rem 0 0; }
.pastilles li {
  font-size: .76rem; padding: .3rem .7rem; border: 1px solid rgba(241, 244, 247, .3);
  color: rgba(241, 244, 247, .9); background: rgba(10, 14, 20, .35);
}

/* ---------------------------------------------------------------- boutons */

/* Angles vifs, pas de rayon : le site personnel a des boutons arrondis. */
.bouton {
  display: inline-block; padding: .82rem 1.5rem; text-decoration: none;
  font-weight: 600; font-size: .95rem; border: 1px solid transparent;
  transition: background .15s, color .15s;
}
.bouton--primaire { background: var(--signal); color: #fff; }
.bouton--primaire:hover { background: var(--signal-sombre); }
.bouton--clair { background: var(--papier-pur); color: var(--encre); }
.bouton--clair:hover { background: var(--papier); }

/* ------------------------------------------------------- titres de section */

/* Filet vermillon court au-dessus du titre : le repère visuel de la marque. */
section > .conteneur > h2::before,
section > .conteneur--etroit > h2::before {
  content: ''; display: block; width: 34px; height: 3px;
  background: var(--signal); margin-bottom: 1.1rem;
}

/* ------------------------------------------------------------- livrable */

.livrable { padding: clamp(2.8rem, 6vw, 4.6rem) 0; background: var(--papier-pur); }
.livrable__contenu { display: grid; grid-template-columns: 1.25fr 1fr; gap: clamp(1.8rem, 4vw, 3.2rem); align-items: start; }
.livrable__liste { list-style: none; padding: 0; margin: 0; }
.livrable__liste li { padding: .8rem 0 .8rem 1.4rem; border-bottom: 1px solid var(--trait); position: relative; font-size: .96rem; }
.livrable__liste li::before { content: ''; position: absolute; left: 0; top: 1.42rem; width: 6px; height: 6px; background: var(--signal); }
.livrable__liste li:last-child { border-bottom: 0; }

.exemples { display: grid; gap: 1.1rem; }
.exemple { margin: 0; border: 1px solid var(--trait); background: var(--papier); padding: 1.2rem 1.3rem; }
.exemple figcaption { font-size: .9rem; font-weight: 600; margin-bottom: .9rem; }
.exemple__badge {
  display: inline-block; font-size: .62rem; text-transform: uppercase; letter-spacing: .14em;
  background: var(--encre); color: var(--papier); padding: .22rem .5rem; margin-right: .5rem;
  font-weight: 600;
}
.exemple__prix { margin: 0; }
.exemple__prix > div { display: flex; justify-content: space-between; align-items: baseline; padding: .5rem .6rem; }
.exemple__prix dt { font-size: .88rem; color: var(--acier); margin: 0; }
.exemple__prix dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.exemple__cible { background: var(--encre); }
.exemple__cible dt { color: rgba(241, 244, 247, .8); }
.exemple__cible dd { color: #fff; }
.exemple__note { font-size: .82rem; color: var(--acier); margin: .9rem 0 0; }

/* --------------------------------------------------------------- socle */

.socle { padding: clamp(2.8rem, 6vw, 4.4rem) 0; }
.socle__grille { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.8rem, 4vw, 3rem); align-items: start; }
.socle__texte p { color: var(--acier); max-width: 36em; }
.socle__chiffres { list-style: none; padding: 0; margin: 1.8rem 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.socle__chiffres li { border-left: 3px solid var(--signal); padding-left: .9rem; font-size: .84rem; color: var(--acier); }
.socle__chiffres span {
  display: block; font-family: "Newsreader", Georgia, serif; font-size: clamp(1.7rem, 3vw, 2.3rem);
  color: var(--encre); font-variant-numeric: tabular-nums; line-height: 1.1;
}

/* Panneau de ventes : clair et tabulaire, quand le site personnel le fait sombre. */
.panneau { background: var(--papier-pur); border: 1px solid var(--trait); padding: clamp(1.2rem, 3vw, 1.7rem); }
.panneau__eyebrow { font-size: .64rem; text-transform: uppercase; letter-spacing: .18em; color: var(--signal); font-weight: 600; margin: 0 0 .5rem; }
.panneau__titre { font-size: 1rem; margin-bottom: 1rem; }
.panneau__note { font-size: .78rem; color: var(--acier); margin: 1.1rem 0 0; }
.panneau__lien { color: var(--ciel); }

.ventes { list-style: none; margin: 0; padding: 0; }
.vente {
  display: grid;
  grid-template-areas: "commune prix" "voie m2" "detail m2";
  grid-template-columns: 1fr auto;
  gap: 0 .8rem; padding: .75rem 0; border-top: 1px solid var(--trait);
}
.vente:first-child { border-top: 0; }
.vente__commune { grid-area: commune; font-size: .64rem; text-transform: uppercase; letter-spacing: .14em; color: var(--signal); font-weight: 600; }
.vente__voie { grid-area: voie; font-size: .92rem; font-weight: 500; }
.vente__detail { grid-area: detail; font-size: .78rem; color: var(--acier); }
.vente__prix { grid-area: prix; text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.vente__m2 { grid-area: m2; text-align: right; font-size: .78rem; color: var(--ciel); font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------ franchise */

.franchise { padding: clamp(2.6rem, 5vw, 4rem) 0; background: var(--encre); color: var(--papier); }
.franchise h2 { color: var(--papier-pur); }
.franchise > .conteneur--etroit > h2::before { background: var(--signal); }
.franchise__intro { color: rgba(241, 244, 247, .72); font-size: 1.02rem; }
.franchise p:not(.franchise__intro) { color: rgba(241, 244, 247, .72); margin-top: .5rem; }
.franchise__colonnes { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.4rem, 3vw, 2.4rem); margin-top: 1.8rem; }
.franchise h3 { color: var(--papier-pur); }

/* ----------------------------------------------------------- formulaire */

.formulaire { padding: clamp(2.8rem, 6vw, 4.4rem) 0; background: var(--papier-pur); }
.formulaire__inner { display: grid; grid-template-columns: 1fr 1.35fr; gap: clamp(1.8rem, 4vw, 3rem); align-items: start; }
.formulaire__intro p { color: var(--acier); }

/* Un <fieldset> refuse par défaut de descendre sous la largeur intrinsèque de son
   contenu (min-width: min-content dans la feuille du navigateur) : sans min-width: 0,
   il déborde son conteneur sur mobile. */
.etape { border: 1px solid var(--trait); padding: 1.4rem 1.5rem 1.6rem; margin: 0; background: var(--papier); min-width: 0; }
.etape--cachee { display: none; }
.etape legend {
  float: left; width: 100%; display: flex; align-items: center; gap: .7rem;
  font-family: "Newsreader", Georgia, serif; font-size: 1.15rem; padding: 0; margin-bottom: 1.1rem;
}
.etape > *:not(legend) { clear: both; }
.etape__num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; background: var(--signal); color: #fff;
  font-family: "IBM Plex Sans", sans-serif; font-size: .8rem; font-weight: 600; flex: none;
}

.grille-champs { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; }
.champ { display: flex; flex-direction: column; gap: .3rem; font-size: .85rem; }
.champ--large { grid-column: 1 / -1; }
.champ span, .champ > label { color: var(--acier); }
.champ input, .champ select, .champ textarea {
  font: inherit; font-size: .95rem; padding: .6rem .7rem;
  border: 1px solid var(--trait); background: var(--papier-pur); color: var(--encre);
  border-radius: 0;
}
.champ input:focus, .champ select:focus, .champ textarea:focus { border-color: var(--signal); outline: none; }
.champ .invalide { border-color: var(--signal); background: #FCF2F0; }

.depot {
  display: block; border: 1px dashed var(--trait); padding: 1.1rem; text-align: center;
  cursor: pointer; font-size: .88rem; color: var(--acier); background: var(--papier-pur);
}
.depot:hover { border-color: var(--signal); color: var(--encre); }

.actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.2rem; align-items: center; }
.lien-discret { background: none; border: 0; color: var(--acier); text-decoration: underline; cursor: pointer; font: inherit; font-size: .88rem; }

.consentement { display: flex; gap: .6rem; align-items: flex-start; font-size: .84rem; color: var(--acier); margin-top: 1rem; }
.consentement input { margin-top: .25rem; }

.confirmation { border: 1px solid var(--trait); border-top: 3px solid var(--signal); background: var(--papier); padding: 1.5rem; }
.confirmation__pastille {
  display: inline-block; background: var(--encre); color: var(--papier);
  font-size: .68rem; text-transform: uppercase; letter-spacing: .14em; font-weight: 600;
  padding: .25rem .6rem; margin-bottom: .8rem;
}
.confirmation > p:not(.confirmation__pastille) { color: var(--acier); }

.jauge { height: 5px; background: var(--trait); margin: .7rem 0 .3rem; }
.jauge__remplissage { height: 100%; background: var(--signal); transition: width .3s; }

/* --------------------------------------------------------------- déroulé */

.deroule { padding: clamp(2.8rem, 6vw, 4.4rem) 0; }
.etapes { list-style: none; padding: 0; margin: 1.8rem 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.2rem, 3vw, 2.2rem); counter-reset: etape; }
.etapes li { border-top: 3px solid var(--encre); padding-top: 1rem; }
.etapes__num {
  display: block; font-family: "Newsreader", Georgia, serif; font-size: 1.5rem;
  color: var(--signal); margin-bottom: .3rem;
}
.etapes p { font-size: .9rem; color: var(--acier); }

/* ------------------------------------------------------------------- FAQ */

.faq { padding: clamp(2.6rem, 5vw, 4rem) 0; background: var(--papier-pur); }
.faq details { border-bottom: 1px solid var(--trait); padding: .9rem 0; }
.faq summary { cursor: pointer; font-weight: 600; font-size: .98rem; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before { content: '+'; color: var(--signal); font-weight: 600; margin-right: .6rem; }
.faq details[open] summary::before { content: '−'; }
.faq details p { margin: .7rem 0 0; color: var(--acier); font-size: .93rem; }
.faq__reserve { margin-top: 1.8rem; font-size: .82rem; color: var(--acier); font-style: italic; }

/* ----------------------------------------------------------------- rappel */

.rappel { background: var(--signal); color: #fff; padding: clamp(2.2rem, 4vw, 3.2rem) 0; }
.rappel__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.2rem; }
.rappel h2 { color: #fff; margin: 0; max-width: 22ch; }
.rappel h2::before { display: none; }

/* ------------------------------------------------------------------- pied */

.pied { background: var(--encre); color: rgba(241, 244, 247, .6); padding: 2.4rem 0; font-size: .84rem; }
.pied__zone { margin: 1rem 0 0; }
.pied__mentions { margin: .8rem 0 0; max-width: 74ch; }
.pied a { color: rgba(241, 244, 247, .85); }
.pied__copy { margin: 1.1rem 0 0; font-size: .78rem; color: rgba(241, 244, 247, .38); }

/* --------------------------------------------------------- pages légales */

.texte-legal { padding: clamp(2.2rem, 5vw, 3.6rem) 0; }
.texte-legal h2 { font-size: 1.3rem; margin-top: 2rem; }
.texte-legal h2::before { display: none; }
.texte-legal p, .texte-legal li { color: var(--acier); font-size: .93rem; }
.texte-legal__todo {
  background: #FFF6E8; border-left: 3px solid #C8901E; padding: .9rem 1.1rem;
  font-size: .87rem; color: var(--encre);
}
.texte-legal__retour { margin-top: 2.4rem; }

/* Sans ceci, un enfant de grille refuse de passer sous la largeur intrinsèque de son
   contenu (min-width: auto par défaut) et déborde sa piste : sur mobile, la page gagnait
   5 px de défilement horizontal, ce qui se voit tout de suite au doigt. */
.hero__grille > *,
.livrable__contenu > *,
.socle__grille > *,
.franchise__colonnes > *,
.formulaire__inner > *,
.grille-champs > *,
.etapes > * { min-width: 0; }

/* Rien ne doit pouvoir élargir la page. */
img, svg, table, pre { max-width: 100%; }

/* ------------------------------------------------------------ responsive */

@media (max-width: 900px) {
  .livrable__contenu, .socle__grille, .franchise__colonnes, .formulaire__inner { grid-template-columns: 1fr; }
  .etapes { grid-template-columns: 1fr; }
  .socle__chiffres { grid-template-columns: 1fr; }
}

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

  /* La mention disparaît sur mobile : le logo se retrouverait seul, collé à gauche,
     avec un grand vide à sa droite. On le centre. */
  .entete__mention { display: none; }
  .entete__inner { justify-content: center; }

  .rappel__inner { flex-direction: column; align-items: flex-start; }
}

/* ------------------------------------------------- ajustements mobile fins */

@media (max-width: 620px) {
  body { font-size: 16px; }

  /* Sur mobile, l'image est rognée sur les côtés (c'est la hauteur qui commande le
     cadrage) et la cathédrale, située dans le tiers gauche, sortait du cadre. On décale
     donc la fenêtre vers la gauche. Le voile reste dégradé du haut vers le bas : clair
     là où se trouve la ville, dense sous le texte. */
  .hero { background-position: 30% 34%; }
  .hero::before {
    background: linear-gradient(180deg,
      rgba(10, 14, 20, .20) 0%,
      rgba(10, 14, 20, .42) 22%,
      rgba(10, 14, 20, .86) 58%,
      rgba(10, 14, 20, .94) 100%);
  }
  .hero__texte { padding: 5.4rem 1.2rem 1.5rem; }
  .surtitre { letter-spacing: .18em; }

  /* Le logotype se resserre sans perdre le dessin. */
  .logo { gap: .55rem; }
  .logo__marque svg { width: 42px; height: 26px; }
  .logo__sur { font-size: 1.02rem; }
  .logo__nom { font-size: .74rem; }

  /* Boutons pleine largeur : au pouce, un bouton de 140 px se rate. */
  .hero__actions { flex-direction: column; align-items: stretch; gap: .8rem; }
  .hero__actions .bouton { text-align: center; }
  .actions { flex-direction: column; align-items: stretch; }
  .actions .bouton { width: 100%; text-align: center; }
  .actions__note { text-align: center; }

  /* Champs plus hauts : 16 px de police évite le zoom automatique d'iOS au focus. */
  .champ input, .champ select, .champ textarea { font-size: 16px; padding: .7rem .75rem; }

  .etape { padding: 1.1rem 1rem 1.3rem; }
  .etape legend { font-size: 1.05rem; flex-wrap: wrap; gap: .5rem; }
  .etape__compteur { width: 100%; font-size: .75rem; }

  /* Les cartes de prix : le libellé au-dessus de la valeur plutôt qu'à côté. */
  .exemple__prix > div { padding: .45rem .5rem; }

  /* Le panneau de ventes reste lisible en colonne étroite. */
  .vente { grid-template-columns: 1fr auto; gap: 0 .5rem; }
  .vente__prix, .vente__m2 { white-space: nowrap; }

  .rappel__inner { align-items: stretch; }
  .rappel .bouton { text-align: center; }
}

@media (max-width: 400px) {
  .entete__inner { padding: .7rem 0; }
  h1 { font-size: 1.85rem; }
}

/* Logo fourni en fichier image : il contient déjà le nom, donc il occupe seul l'entête.
   Il est empilé — dessin au-dessus, texte en dessous — donc il lui faut plus de hauteur
   qu'un logotype horizontal, sinon la seconde ligne devient illisible. */
/* Le logo est un PNG détouré : plus besoin de mode de fusion pour masquer un fond.
   Sur le pied sombre, invert(1) suffit — le dessin noir passe en clair, la transparence
   reste transparente. */
.logo__image { display: block; height: 105px; width: auto; }
.logo--pied .logo__image { height: 93px; filter: invert(1); opacity: .9; }

@media (max-width: 620px) {
  .logo__image { height: 78px; }
  .logo--pied .logo__image { height: 72px; }
}

/* Arguments de l'étape photos : la partie qui décide un propriétaire à en joindre. */
.etape__arguments { list-style: none; padding: 0; margin: 0 0 1.2rem; }
.etape__arguments li {
  position: relative; padding: .45rem 0 .45rem 1.3rem;
  font-size: .89rem; color: var(--acier); line-height: 1.55;
}
.etape__arguments li::before {
  content: ''; position: absolute; left: 0; top: .95rem;
  width: 5px; height: 5px; background: var(--signal);
}
.etape__arguments strong { color: var(--encre); font-weight: 600; }

/* Le bloc facultatif de l'étape 2. Fermé, il ne pèse presque rien dans la page ;
   ouvert, il ressemble au reste du formulaire et non à une annexe. */
.plus{border:1px solid #D3DBE3;background:#fff;margin:6px 0 0;padding:0}
.plus > summary{cursor:pointer;list-style:none;padding:14px 16px;display:flex;
                align-items:baseline;gap:10px;flex-wrap:wrap}
.plus > summary::-webkit-details-marker{display:none}
.plus > summary::before{content:'+';font-weight:700;color:#C2402A;margin-right:2px}
.plus[open] > summary::before{content:'–'}
.plus[open] > summary{border-bottom:1px solid #D3DBE3}
.plus__titre{font-weight:600}
.plus__note{font-size:.86rem;color:#5C6B7D}
.plus__intro{margin:16px 16px 4px;font-size:.9rem;color:#5C6B7D}
.plus .grille-champs{padding:0 16px 18px}
.plus summary:hover .plus__titre{color:#C2402A}

/* Zone de dépôt survolée par un fichier. Le trait devient plein et la teinte change :
   il faut que le relâchement se sente permis avant de lâcher le bouton. */
.depot--survol{border-style:solid;border-color:#C2402A;background:#FCF3F1}
.depot--survol .depot__icone{transform:scale(1.15)}
.depot__glisser{color:#5C6B7D;font-weight:400}
@media(hover:none){.depot__glisser{display:none}}

/* L'attribut hidden ne vaut que par la règle display:none du navigateur, et toute
   règle d'auteur portant un display la bat. `.champ{display:flex}` rendait donc
   visibles les champs que le script venait de masquer : un propriétaire de maison
   voyait « Étage » et « Ascenseur ». Le !important est ici à sa place — hidden veut
   dire caché, sans négociation. */
[hidden]{display:none!important}


/* Sur-titre en phrase : plus de capitales forcées ni d'interlettrage, qui rendent
   illisible autre chose que deux ou trois mots. On garde la couleur d'accent, qui suffit
   à le distinguer du titre. */
.hero .surtitre--phrase { margin-bottom: .6rem; }

.surtitre--phrase {
  text-transform: none;
  letter-spacing: 0;
  font-size: 1rem;
  font-weight: 500;
}