@import url('/fonts/fonts.css');

/* ============================================================================
   CHALLENGE IMMOBILIER — feuille de style unique, sans framework.
   ----------------------------------------------------------------------------
   ⚠️ COHÉRENCE DE MARQUE — les jetons `:root` sont COPIÉS DE VERDICT IMMO
   (`verdict-immo/styles.css`) : mêmes noms, mêmes valeurs, au caractère près.
   Le participant part du challenge vers Verdict Immo au jour 3 : il ne doit pas
   avoir l'impression de changer de maison. Toute évolution de palette se fait
   dans les DEUX fichiers, sinon les produits divergent.

   Différence assumée : les polices sont AUTO-HÉBERGÉES ici (public/fonts/).
   Verdict Immo les charge encore depuis fonts.googleapis.com, ce qui transmet
   l'IP du visiteur à Google — à corriger là-bas aussi (voir README).
   ========================================================================== */

:root {
  /* Papier et encre — jamais de blanc pur ni de noir pur */
  --papier: #f6f3ee;
  --papier-carte: #fffdfa;
  --encre: #1c1815;
  --encre-douce: #6b6156;
  --encre-tres-douce: #9a9084;
  --trait: #e0d9cf;
  --trait-fort: #cfc5b7;

  /* L'accent de marque */
  --taupe: #8f8478;
  --taupe-fonce: #6e6357;
  --taupe-clair: #ece6dd;
  --taupe-voile: #f2ede5;

  /* Verdicts — réchauffés pour tenir sur le papier */
  --vert: #4a6b3a;
  --vert-fond: #eaf0e4;
  --or: #9a6f16;
  --or-fond: #f8efdc;
  --orange: #b05a1e;
  --orange-fond: #fbeade;
  --rouge: #9c2f22;
  --rouge-fond: #fae9e6;
  --bleu: #3c5a73;
  --bleu-fond: #e6edf2;

  --rayon: 4px;
  --ombre: 0 1px 2px rgba(28, 24, 21, .04);
  --largeur: 980px;

  --titre: 'Fraunces', Georgia, serif;
  --corps: 'Karla', -apple-system, BlinkMacSystemFont, sans-serif;

  --rail: 304px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font: 16px/1.65 var(--corps);
  color: var(--encre);
  background: var(--papier);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--titre); font-weight: 600;
  line-height: 1.18; letter-spacing: -.02em; margin: 0 0 .4em;
}
h1 { font-size: clamp(1.9rem, 5vw, 2.9rem); font-variation-settings: 'opsz' 90; }
h2 { font-size: clamp(1.35rem, 3.4vw, 1.8rem); font-variation-settings: 'opsz' 60; }
h3 { font-size: 1.08rem; font-variation-settings: 'opsz' 20; }
p { margin: 0 0 1em; }
a { color: var(--taupe-fonce); }
button { font: inherit; cursor: pointer; }
input, select, textarea { font: inherit; }

/* --- Ossature -------------------------------------------------------------- */

.shell { display: block; }
.content { max-width: 720px; margin: 0 auto; padding: 0 1.25rem 5rem; }

@media (min-width: 1020px) {
  .shell { display: grid; grid-template-columns: var(--rail) 1fr; align-items: start; }
  .content { margin: 0; padding: 0 2.75rem 5rem; }
}

/* --- Bandeau de preuve sociale --------------------------------------------- */

.proof {
  position: sticky; top: 0; z-index: 50;
  background: var(--encre); border-bottom: 1px solid var(--encre);
}
.proof__inner {
  max-width: 1260px; margin: 0 auto; padding: .58rem 1.25rem;
  display: flex; align-items: center; gap: .55rem;
  font-size: .8rem; font-weight: 600; color: var(--papier);
}
.proof__icon { flex: none; color: var(--taupe); }
.proof--muted { background: var(--taupe-voile); border-bottom-color: var(--trait); }
.proof--muted .proof__inner { color: var(--encre-douce); font-weight: 500; }
.proof--muted .proof__icon { color: var(--taupe); }

/* --- Colonne de branding ----------------------------------------------------
   Reprend le vocabulaire du .bandeau-marque de Verdict Immo (portrait rond
   cerclé, nom en Fraunces, rôle en corps discret). ------------------------- */

.rail {
  background: var(--taupe-voile); border-bottom: 1px solid var(--trait);
  padding: .8rem 1.25rem; display: flex; align-items: center; gap: .85rem;
}
.rail__photo {
  width: 46px; height: 46px; flex: none; border-radius: 50%;
  object-fit: cover; object-position: center top; background: var(--papier-carte);
  box-shadow: 0 0 0 1px var(--trait-fort), 0 0 0 4px var(--papier-carte);
  display: grid; place-items: center;
  font-family: var(--titre); font-weight: 600; color: var(--taupe-fonce); font-size: 1rem;
}
.rail__id { min-width: 0; flex: 1; line-height: 1.3; }
.rail__challenge {
  font-family: var(--titre); font-weight: 700; font-size: 1.08rem;
  font-variation-settings: 'opsz' 20; letter-spacing: -.02em;
}
.rail__auteur {
  font-family: var(--titre); font-weight: 700; font-size: 1.08rem;
  font-variation-settings: 'opsz' 20; letter-spacing: -.02em; color: var(--taupe);
}
.rail__role { display: none; }
.rail__accroche, .rail__preuves, .rail__liens, .rail__legal, .rail > .tp--full { display: none; }
.rail__tp--mobile { margin-left: auto; flex: none; }

@media (min-width: 560px) {
  .rail__role { display: block; font-size: .78rem; color: var(--encre-douce); margin-top: .18rem; }
}

@media (min-width: 1020px) {
  .rail {
    position: sticky; top: var(--proof-h, 0px);
    height: calc(100vh - var(--proof-h, 0px)); overflow-y: auto;
    flex-direction: column; align-items: stretch; gap: 0;
    border-bottom: 0; border-right: 1px solid var(--trait);
    padding: 2rem 1.6rem 1.4rem;
  }
  .rail__photo { width: 84px; height: 84px; font-size: 1.8rem; margin-bottom: 1.1rem; }
  .rail__challenge, .rail__auteur { font-size: 1.4rem; font-variation-settings: 'opsz' 40; }
  .rail__role { margin-top: .45rem; }

  .rail__accroche {
    display: block; color: var(--encre-douce); font-size: .87rem; line-height: 1.55;
    margin: 1.1rem 0; padding-left: .85rem; border-left: 2px solid var(--taupe);
    font-style: italic;
  }
  .rail__preuves { display: grid; gap: .5rem; list-style: none; padding: 0; margin: 1.1rem 0; }
  .rail__preuves li {
    font-size: .84rem; color: var(--encre-douce); line-height: 1.4;
    padding-left: 1.3rem; position: relative;
  }
  .rail__preuves li::before { content: '→'; position: absolute; left: 0; color: var(--taupe); font-weight: 700; }

  .rail__liens { display: flex; flex-direction: column; gap: .1rem; margin-top: auto; padding-top: 1.2rem; }
  .rail__liens a { font-size: .84rem; color: var(--encre-douce); text-decoration: none; padding: .22rem 0; }
  .rail__liens a:hover { color: var(--taupe-fonce); }
  .rail__legal { display: block; color: var(--encre-douce); font-size: .72rem; margin-top: .8rem; }
  .rail__tp--mobile { display: none; }
  .rail > .tp--full { display: block; }
}

/* Portable 13-14" : on sacrifie l'accroche, jamais la note de confiance. */
@media (min-width: 1020px) and (max-height: 840px) {
  .rail { padding: 1.4rem 1.6rem 1rem; }
  .rail__photo { width: 62px; height: 62px; font-size: 1.4rem; margin-bottom: .8rem; }
  .rail__challenge, .rail__auteur { font-size: 1.2rem; }
  .rail__accroche { display: none; }
  .rail__preuves { margin: .85rem 0; gap: .42rem; }
  .rail__preuves li { font-size: .79rem; }
}

/* --- Trustpilot -------------------------------------------------------------- */

.tp { display: block; text-decoration: none; color: inherit; }
.tp--full {
  background: var(--papier-carte); border: 1px solid var(--trait); border-radius: var(--rayon);
  padding: .85rem .95rem; margin: .2rem 0 0;
}
.tp__brand {
  font-size: .68rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--vert);
}
.tp__top { display: flex; align-items: baseline; gap: .3rem; margin-top: .2rem; }
.tp__score {
  font-family: var(--titre); font-variation-settings: 'opsz' 60;
  font-size: 1.8rem; font-weight: 600; letter-spacing: -.025em;
}
.tp__max { color: var(--encre-douce); font-size: .78rem; }
.tp__stars { color: #00b67a; letter-spacing: .06em; font-size: .95rem; margin: .1rem 0; }
.tp__meta { color: var(--encre-douce); font-size: .77rem; }
.tp__profil {
  color: var(--encre-douce); font-size: .76rem; font-style: italic;
  margin-top: .45rem; padding-top: .45rem; border-top: 1px solid var(--trait);
}
.tp--chip {
  display: inline-flex; align-items: center; gap: .3rem; border: 1px solid var(--trait);
  background: var(--papier-carte); border-radius: 99px; padding: .22rem .58rem; font-size: .8rem;
}
/* Sur petit écran, la pastille cinq étoiles volait 112 px au titre, qui passait
   sur quatre lignes. Une seule étoile suffit : le chiffre porte l'information. */
@media (max-width: 560px) {
  .tp--chip .tp__stars { display: none; }
  .tp--chip::before { content: '★'; color: #00b67a; }
}

/* --- Boutons (calqués sur .bouton de Verdict Immo) --------------------------- */

.btn {
  font-weight: 600; font-size: .94rem; padding: .66rem 1.3rem;
  border-radius: var(--rayon); border: 1px solid transparent;
  background: var(--encre); color: var(--papier);
  transition: background .15s, color .15s, transform .06s, border-color .15s;
}
.btn:hover:not(:disabled) { background: var(--taupe-fonce); }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { background: var(--encre-tres-douce); cursor: not-allowed; }
.btn--ghost { background: transparent; color: var(--encre); border-color: var(--trait-fort); }
.btn--ghost:hover:not(:disabled) { background: var(--taupe-clair); border-color: var(--taupe); }
.btn--wide { width: 100%; padding: .85rem; font-size: 1rem; }
.btn--sm { padding: .38rem .8rem; font-size: .85rem; }

/* --- Cartes ------------------------------------------------------------------ */

.card {
  background: var(--papier-carte); border: 1px solid var(--trait); border-radius: var(--rayon);
  padding: 1.6rem; box-shadow: var(--ombre); margin-bottom: 1.1rem;
}
.card--flat { background: none; border: 0; box-shadow: none; padding: 0; }
.card__head { display: flex; align-items: flex-start; gap: .8rem; }
.card__head h2 { font-size: 1.2rem; margin: 0; }
.card__sub { color: var(--encre-douce); font-size: .87rem; margin-top: .15rem; }

/* --- En-tête de l'espace ------------------------------------------------------ */

.head { padding: 2rem 0 .6rem; }
.head__top { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.head h1 { font-size: clamp(1.6rem, 4vw, 2.1rem); font-variation-settings: 'opsz' 60; margin: 0; }
.head__day {
  font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .09em;
  color: var(--encre-douce);
}

.chips { display: flex; flex-wrap: wrap; gap: .35rem; margin: 1rem 0; }
.chip {
  display: inline-flex; align-items: center; gap: .3rem; font-size: .74rem; font-weight: 600;
  padding: .16rem .5rem; border-radius: 3px; background: var(--taupe-clair); color: var(--taupe-fonce);
}
.chip--accent { background: var(--encre); color: var(--papier); }
.chip--btn { cursor: pointer; border: 0; }
.chip--btn:hover { background: var(--taupe-fonce); color: var(--papier); }

.bar { height: 4px; background: var(--trait); margin: 1rem 0 .35rem; }
.bar > i { display: block; height: 100%; background: var(--encre); transition: width .5s cubic-bezier(.2,.7,.3,1); }
.bar__legend {
  display: flex; justify-content: space-between;
  font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--encre-douce);
}

/* --- Les étapes : UNE PAR ÉCRAN -------------------------------------------------
   L'accordéon empilait les quatre étapes et noyait le bouton « Valider » au
   milieu d'un long défilement. Ici : un fil de progression cliquable, l'étape
   seule, son replay dessous, et la navigation en bas. ------------------------ */

.fil { display: flex; gap: .35rem; margin: 1.6rem 0 .9rem; }
.fil__etape {
  flex: 1; min-width: 0; background: var(--papier-carte); color: var(--encre-douce);
  border: 1px solid var(--trait); border-top: 3px solid var(--trait-fort);
  border-radius: var(--rayon); padding: .5rem .3rem;
  display: flex; flex-direction: column; align-items: center; gap: .15rem;
  transition: border-color .15s, background .15s, color .15s;
}
.fil__etape:hover { background: var(--taupe-voile); }
.fil__rang {
  font-family: var(--titre); font-variation-settings: 'opsz' 20;
  font-size: .95rem; font-weight: 600; line-height: 1;
}
.fil__nom {
  font-size: .68rem; line-height: 1.25; text-align: center;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%;
}
.fil__etape--done { border-top-color: var(--vert); color: var(--vert); }
.fil__etape--open { border-top-color: var(--encre); color: var(--encre); }
.fil__etape--a_venir { opacity: .55; }
.fil__etape--vue { background: var(--taupe-clair); border-color: var(--trait-fort); color: var(--encre); }

/* Sous 560 px les intitulés ne tiennent pas : on garde les numéros seuls. */
@media (max-width: 560px) {
  .fil__nom { display: none; }
  .fil__etape { padding: .55rem .3rem; }
}

.ecran {
  background: var(--papier-carte); border: 1px solid var(--trait); border-radius: var(--rayon);
  border-top: 3px solid var(--encre); box-shadow: var(--ombre);
  padding: 1.6rem; margin-bottom: 1.1rem;
}
.ecran--done { border-top-color: var(--vert); }
.ecran--a_venir { border-top-color: var(--trait-fort); }

.ecran__entete { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.ecran__compteur {
  font-size: .7rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--taupe-fonce);
}
.ecran--done .ecran__compteur { color: var(--vert); }
.ecran--done .ecran__compteur::after { content: ' · validée'; }
.ecran__preuve { font-size: .78rem; color: var(--encre-douce); }
.ecran h2 { margin: .35rem 0 .2rem; }
.ecran__question { color: var(--encre-douce); margin: 0 0 1.2rem; }

.ecran__replays { margin-top: 1.8rem; padding-top: 1.4rem; border-top: 1px solid var(--trait); }
.ecran__replays h3 { margin-bottom: .8rem; }

.navetapes { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 2.5rem; }
@media (max-width: 480px) { .navetapes .btn { padding: .6rem .85rem; font-size: .86rem; } }

/* --- Choix du cap --------------------------------------------------------------- */

.caps { display: grid; gap: .9rem; grid-template-columns: 1fr; margin: 1.1rem 0; }
@media (min-width: 620px) { .caps { grid-template-columns: 1fr 1fr; } }

.cap {
  text-align: left; background: var(--taupe-voile); border: 1px solid var(--trait);
  border-left: 3px solid var(--taupe); border-radius: var(--rayon); padding: 1.1rem; color: inherit;
  transition: border-color .15s, background .15s, transform .06s;
}
.cap:hover { border-color: var(--taupe); background: var(--taupe-clair); }
.cap:active { transform: translateY(1px); }
.cap--on { border-left-color: var(--encre); background: var(--taupe-clair); }
.cap__emoji { font-size: 1.4rem; line-height: 1; }
.cap h3 { margin: .5rem 0 .7rem; }
.cap dl { margin: 0; font-size: .85rem; }
.cap dt {
  font-size: .68rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em;
  color: var(--encre-douce); margin-top: .5rem;
}
.cap dd { margin: .05rem 0 0; color: var(--encre); line-height: 1.4; }

/* --- Formulaires ---------------------------------------------------------------- */

.grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }

label {
  display: block; font-size: .74rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .07em; color: var(--encre-douce); margin-bottom: .3rem;
}

input[type='text'], input[type='email'], input[type='number'], textarea, select {
  width: 100%; padding: .62rem .75rem; border: 1px solid var(--trait); border-radius: var(--rayon);
  background: var(--papier-carte); color: inherit; transition: border-color .15s, box-shadow .15s;
}
:is(input, textarea, select):focus {
  outline: none; border-color: var(--taupe); box-shadow: 0 0 0 3px var(--taupe-clair);
}
input::placeholder { color: var(--encre-tres-douce); }
.field__hint { font-size: .78rem; color: var(--encre-douce); margin-top: .28rem; }

input[type='range'] { accent-color: var(--taupe-fonce); padding: 0; border: 0; background: none; box-shadow: none; }
input[type='range']:focus { box-shadow: none; }

/* --- Le compteur d'enveloppe ------------------------------------------------------ */

.enveloppe {
  margin: 1.4rem 0; padding: 1.6rem 1.5rem;
  background: var(--taupe-voile); border: 1px solid var(--trait);
  border-left: 3px solid var(--encre); border-radius: var(--rayon);
}
.enveloppe__label {
  font-size: .7rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--taupe-fonce);
}
.enveloppe__value {
  font-family: var(--titre); font-variation-settings: 'opsz' 120; font-weight: 600;
  font-size: clamp(2.6rem, 10vw, 3.8rem); letter-spacing: -.035em; line-height: 1.02;
  margin: .3rem 0 .55rem; font-variant-numeric: tabular-nums;
}
.enveloppe__detail {
  color: var(--encre-douce); font-size: .92rem; line-height: 1.6;
  border-top: 1px solid var(--trait); padding-top: .7rem;
}
.enveloppe__detail b { color: var(--encre); font-weight: 600; }

/* --- Alertes & listes --------------------------------------------------------------- */

.alert {
  padding: .85rem 1.05rem; font-size: .9rem; margin: .6rem 0; border-radius: var(--rayon);
  border: 1px solid var(--trait); border-left: 3px solid var(--encre-douce);
  background: var(--papier-carte);
}
.alert--bloquant { border-left-color: var(--rouge); background: var(--rouge-fond); }
.alert--attention { border-left-color: var(--or); background: var(--or-fond); }
.alert--info { border-left-color: var(--bleu); background: var(--bleu-fond); }

.todo { list-style: none; padding: 0; margin: .7rem 0 0; display: grid; gap: .5rem; }
.todo li {
  background: var(--papier-carte); border: 1px solid var(--trait);
  border-left: 3px solid var(--or); border-radius: var(--rayon);
  padding: .6rem .8rem; font-size: .88rem; color: var(--encre-douce);
}

.muted { color: var(--encre-douce); }
.small { font-size: .87rem; }
.center { text-align: center; }
.hidden { display: none !important; }

/* --- Le live quotidien ----------------------------------------------------------------- */

.live { border-left: 3px solid var(--taupe); }
.live--direct { border-left-color: var(--rouge); background: var(--rouge-fond); }
.live--present { border-left-color: var(--vert); }

.live__entete { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: .7rem; }
.live__pastille {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .68rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  padding: .2rem .6rem; border-radius: 3px; background: var(--taupe-clair); color: var(--taupe-fonce);
}
.live--direct .live__pastille { background: var(--rouge); color: #fff; }
.live--present .live__pastille { background: var(--vert-fond); color: var(--vert); }

/* Le point qui bat : seul élément animé de la page, réservé au direct. */
.live__point { width: .5rem; height: .5rem; border-radius: 99px; background: #fff; animation: battement 1.4s ease-in-out infinite; }
@keyframes battement { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }

.live__preuve { margin: .8rem 0 0; font-size: .89rem; color: var(--encre-douce); font-style: italic; }
.live__replay { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; margin-top: 1rem; }

/* Assiduité : une pastille par live du programme. */
.assidu { display: flex; align-items: center; gap: .3rem; font-size: .72rem; color: var(--encre-douce); }
.assidu span { margin-left: .2rem; font-weight: 600; }
.assidu__pt { width: .62rem; height: .62rem; border-radius: 99px; border: 1px solid var(--trait-fort); background: transparent; }
.assidu__pt--present { background: var(--vert); border-color: var(--vert); }
.assidu__pt--replay { background: var(--or); border-color: var(--or); }
.assidu__pt--manque { background: var(--rouge-fond); border-color: var(--rouge); }
.assidu__pt--avenir { background: transparent; }

/* --- Lecteur vidéo intégré (replays) ---------------------------------------------------- */

.video {
  position: relative; margin-top: 1rem; aspect-ratio: 16 / 9;
  background: var(--encre); border-radius: var(--rayon); overflow: hidden;
  border: 1px solid var(--trait);
}
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.replay {
  background: var(--papier-carte); border: 1px solid var(--trait); border-radius: var(--rayon);
  padding: 1.2rem; margin-bottom: 1rem;
}
.replay__entete { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.replay__entete h3 { margin: 0; }

/* --- L'offre d'accompagnement (étape finale) ------------------------------------------ */

.offre { border-left: 3px solid var(--encre); background: var(--taupe-voile); }
.offre__entete { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: .8rem; }
.offre__pastille {
  display: inline-block; font-size: .68rem; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; padding: .2rem .6rem; border-radius: 3px;
  background: var(--encre); color: var(--papier);
}
.offre__compteur { display: flex; align-items: baseline; gap: .4rem; color: var(--rouge); }
.offre__compteur-label { font-size: .68rem; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; }
.offre__compteur b {
  font-family: var(--titre); font-variation-settings: 'opsz' 20;
  font-size: 1.05rem; font-weight: 600; font-variant-numeric: tabular-nums;
}
.offre h2 { margin-bottom: .3rem; }
.offre__pourqui {
  background: var(--papier-carte); border: 1px solid var(--trait); border-radius: var(--rayon);
  padding: .9rem 1.05rem; font-size: .89rem;
}
.offre__pourqui strong { display: block; margin-bottom: .4rem; font-size: .84rem; }
.offre__pourqui ul { margin: 0; padding-left: 1.15rem; color: var(--encre-douce); }
.offre__pourqui li { margin-bottom: .25rem; }
.offre--fermee { border-left-color: var(--encre-tres-douce); background: var(--papier-carte); }
.offre--faite { border-left-color: var(--vert); background: var(--vert-fond); }
.offre--faite .offre__pastille { background: var(--vert); }

/* --- Page d'opt-in ------------------------------------------------------------------ */

.landing { padding: 1.8rem 0 1rem; }
.landing__kicker {
  display: inline-block; font-size: .7rem; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; padding: .3rem .7rem; border-radius: 3px;
  background: var(--encre); color: var(--papier); margin-bottom: 1rem;
}
.landing h1 { font-size: clamp(2rem, 5.6vw, 3.1rem); font-variation-settings: 'opsz' 120; }
.landing h1 em { font-style: italic; color: var(--taupe-fonce); }
.landing__lead { font-size: 1.1rem; color: var(--encre-douce); max-width: 36em; }
.landing__lead strong { color: var(--encre); font-weight: 600; }

.recit {
  border-left: 2px solid var(--taupe); padding-left: 1.05rem; margin: 1.6rem 0;
  color: var(--encre-douce); font-size: .96rem; font-style: italic;
}
.recit strong { color: var(--encre); font-style: normal; }

/* Le déroulé — reprend la liste numérotée de Verdict Immo. */
.jours { list-style: none; counter-reset: jour; padding: 0; margin: 1.2rem 0; display: grid; gap: .7rem; }
.jour {
  counter-increment: jour; position: relative; padding: 1rem 1.1rem 1rem 3.2rem;
  background: var(--papier-carte); border: 1px solid var(--trait);
  border-left: 3px solid var(--taupe); border-radius: var(--rayon);
}
.jour::before {
  content: counter(jour); position: absolute; left: 1rem; top: 1.05rem;
  width: 1.5rem; height: 1.5rem; border-radius: 99px;
  background: var(--taupe-clair); color: var(--taupe-fonce);
  font-family: var(--titre); font-weight: 600; font-size: .8rem;
  display: grid; place-items: center;
}
.jour__num { font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .09em; color: var(--encre-douce); }
.jour__t {
  font-family: var(--titre); font-weight: 600; font-size: 1.1rem;
  font-variation-settings: 'opsz' 20; margin-top: .1rem;
}
.jour__d { color: var(--encre-douce); font-size: .9rem; margin-top: .25rem; }

.section { margin: 2.8rem 0; }
.section > h2 { margin-bottom: .9rem; }

.rassurances { list-style: none; padding: 0; margin: 1.1rem 0 0; display: grid; gap: .6rem; }
.rassurances li { font-size: .93rem; color: var(--encre-douce); padding-left: 1.4rem; position: relative; }
.rassurances li::before { content: '→'; position: absolute; left: 0; color: var(--taupe); font-weight: 700; }
.rassurances strong { color: var(--encre); }

.duo { display: grid; gap: 1rem; }
@media (min-width: 700px) { .duo { grid-template-columns: 1fr 1fr; } }
.duo__col {
  background: var(--papier-carte); border: 1px solid var(--trait);
  border-radius: var(--rayon); padding: 1.2rem;
}
.duo__col h3 { font-size: .95rem; margin-bottom: .7rem; }
.duo__col ul { margin: 0; padding-left: 1.15rem; font-size: .91rem; color: var(--encre-douce); }
.duo__col li { margin-bottom: .45rem; line-height: 1.45; }
.duo__col--oui { border-left: 3px solid var(--vert); }
.duo__col--oui h3 { color: var(--vert); }
.duo__col--non { border-left: 3px solid var(--orange); }
.duo__col--non h3 { color: var(--orange); }

.faq { border-bottom: 1px solid var(--trait); padding: .9rem 0; }
.faq summary {
  cursor: pointer; font-family: var(--titre); font-weight: 600; font-size: 1.02rem;
  font-variation-settings: 'opsz' 20; list-style: none; display: flex; gap: .55rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before { content: '+'; color: var(--taupe); font-family: var(--corps); flex: none; }
.faq[open] summary::before { content: '–'; }
.faq p { color: var(--encre-douce); font-size: .91rem; margin: .55rem 0 0 1.2rem; }

.optin { border-left: 3px solid var(--encre); }
.optin h2 { font-size: 1.3rem; }

.consent {
  display: flex; gap: .6rem; align-items: flex-start; font-size: .83rem;
  color: var(--encre-douce); margin: 1rem 0; line-height: 1.45;
  text-transform: none; letter-spacing: 0; font-weight: 400;
}
.consent input { margin-top: .25rem; accent-color: var(--taupe-fonce); flex: none; width: auto; }

.note-legale {
  font-size: .83rem; color: var(--encre-douce); margin: 1rem 0 0;
  border-left: 2px solid var(--trait); padding-left: .85rem;
}

.devbox {
  border: 1px dashed var(--taupe); background: var(--taupe-voile); border-radius: var(--rayon);
  padding: .8rem; font-size: .82rem; margin-top: 1rem; word-break: break-all;
}

/* --- Entrée en scène ------------------------------------------------------------------ */

@keyframes monte { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.landing > *, .head, .card, .ecran { animation: monte .35s cubic-bezier(.2, .7, .3, 1) both; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}