/* ==========================================================================
   devispaysagiste.fr · Styles propres à la vitrine
   --------------------------------------------------------------------------
   S'appuie sur design/tokens.css, design/polices.css et design/composants.css
   (à charger avant).
   La vitrine est toujours en thème sombre ; certaines illustrations du
   produit sont en thème clair, comme l'application.
   ========================================================================== */

/* ---------- Base ---------- */
html { background-color: var(--nuit); scroll-behavior: smooth; }
.page { min-height: 100vh; overflow-x: clip; }
section[id] { scroll-margin-top: 72px; }
a { color: inherit; }
.section__entete .intro { margin-top: var(--espace-1); }
.section--serree { padding-block: calc(var(--espace-section) * 0.75); }
.conteneur--etroit { max-width: 52rem; }

.lien-evitement {
  position: absolute;
  left: max(var(--gouttiere), env(safe-area-inset-left, 0px));
  top: calc(env(safe-area-inset-top, 0px) + 8px);
  z-index: 100;
  padding: 10px 16px;
  border-radius: var(--rayon-pilule);
  background: var(--texte);
  color: var(--fond);
  font-weight: 500;
  transform: translateY(-200%);
}
.lien-evitement:focus { transform: none; }

/* Grilles : une colonne sur téléphone, trois sur ordinateur. */
.grille-3 { display: grid; gap: var(--espace-4); }
@media (min-width: 860px) { .grille-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.grille-3 > .carte { display: grid; gap: var(--espace-3); align-content: start; }

.deux-colonnes { display: grid; gap: var(--espace-7); align-items: center; }
.deux-colonnes > .section__entete { margin-bottom: 0; }
@media (min-width: 960px) { .deux-colonnes { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: var(--espace-8); } }

.liste-points { list-style: none; margin: var(--espace-2) 0 0; padding: 0; display: grid; gap: var(--espace-3); color: var(--texte-2); }
.liste-points li { position: relative; padding-left: var(--espace-5); }
.liste-points li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.55em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--texte-3);
}

/* ---------- 1. Hero ---------- */
.hero {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  min-height: max(560px, 92svh);
  overflow: hidden;
  text-align: center;
}
.hero__photo, .hero__photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  z-index: -2;
}
.hero__voile {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--nuit) 62%, transparent) 0%,
    color-mix(in srgb, var(--nuit) 48%, transparent) 40%,
    color-mix(in srgb, var(--nuit) 58%, transparent) 72%,
    var(--fond) 100%);
}
.hero__contenu {
  display: grid;
  justify-items: center;
  gap: var(--espace-5);
  max-width: 52rem;
  padding-top: 128px;
  padding-bottom: 112px;
  padding-left: max(var(--gouttiere), env(safe-area-inset-left, 0px));
  padding-right: max(var(--gouttiere), env(safe-area-inset-right, 0px));
}
.hero__sous-titre { font-size: var(--taille-texte-l); font-weight: 450; max-width: 34ch; text-wrap: balance; }
.hero__note { font-size: var(--taille-petit); color: var(--texte-2); }

/* ---------- 3. Comment ça marche ---------- */
.etapes { list-style: none; margin: 0; padding: 0; }
.etape { display: grid; gap: var(--espace-3); align-content: start; padding-top: var(--espace-5); border-top: 1px solid var(--trait); }
.etape__numero {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--surface);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

/* ---------- 4. Démonstration ---------- */
.demo__grille { display: grid; gap: var(--espace-6); align-items: start; }
.demo__panneau { z-index: 2; }
.demo__etapes { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--espace-5); }
.demo-etape { display: grid; gap: var(--espace-2); align-content: start; max-width: 32rem; }
.demo-etape__numero { font-size: var(--taille-petit); color: var(--texte-3); font-variant-numeric: tabular-nums; }

@media (min-width: 960px) {
  .demo__grille { grid-template-columns: minmax(0, 1fr) minmax(0, 28rem); gap: var(--espace-8); }
  .demo__panneau { order: 2; }
  .demo__etapes { order: 1; }
}

/* Le défilement pilote le devis : seulement si le script l'a activé
   (sans animation ou sans script, la carte est directement complète). */
.demo.est-animee .demo__panneau {
  position: sticky;
  top: calc(env(safe-area-inset-top, 0px) + 76px);
}
.demo.est-animee .demo__etapes { gap: 0; }
.demo.est-animee .demo-etape {
  min-height: 75svh;
  padding-block: var(--espace-6);
}
/* Étapes inactives : plus discrètes, mais toujours lisibles (contraste AA). */
.demo.est-animee .demo-etape .titre-3,
.demo.est-animee .demo-etape .texte-2 { transition: color var(--duree-entree) var(--courbe); }
.demo.est-animee .demo-etape:not(.est-active) .titre-3 { color: var(--texte-2); }
.demo.est-animee .demo-etape:not(.est-active) .texte-2 { color: var(--texte-3); }
.demo.est-animee .demo-etape:last-child { min-height: 55svh; }
/* Téléphone : carte plus compacte, pour laisser de la place au texte sous elle. */
@media (max-width: 959px) {
  .demo.est-animee .devis-exemple { padding: var(--espace-3); gap: var(--espace-2); }
  .demo.est-animee .devis-ligne { min-height: 48px; padding: 6px var(--espace-3); }
  .demo.est-animee .devis-exemple__note { display: none; }
  .demo.est-animee .devis-exemple__bandeau .bandeau-marge__complet { padding: var(--espace-3); gap: 4px; }
  .demo.est-animee .demo-etape:first-child { padding-top: 30svh; }
}
@media (max-width: 959px) and (max-height: 700px) {
  .demo.est-animee .devis-ligne__detail { display: none; }
}
@media (min-width: 960px) {
  .demo.est-animee .demo__panneau { top: max(80px, calc(50svh - 19.5rem)); }
  .demo.est-animee .demo-etape { min-height: 70svh; padding-block: 30svh 0; }
  .demo.est-animee .demo-etape:first-child { padding-top: 10svh; }
}

/* Carte du devis d'exemple, au style de l'application (thème clair). */
.devis-exemple {
  margin: 0;
  display: grid;
  gap: var(--espace-3);
  padding: var(--espace-4);
  border-radius: 20px;
  background: var(--fond);
  color: var(--texte);
  box-shadow: 0 0 0 1px var(--trait);
}
@media (min-width: 960px) { .devis-exemple { padding: var(--espace-5); } }
.devis-exemple__entete { display: flex; align-items: center; justify-content: space-between; gap: var(--espace-3); }
.devis-exemple__titre { font-family: var(--police-titre); font-stretch: var(--titre-largeur); font-weight: var(--titre-graisse); font-size: 1.0625rem; line-height: 1.2; }
.devis-exemple__contexte { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--espace-2); min-height: 28px; }
.devis-exemple__note { font-size: var(--taille-legende); color: var(--texte-3); }

.devis-lignes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  border-radius: var(--rayon-carte);
  background: var(--carte);
  box-shadow: var(--ombre-carte);
}
.devis-ligne {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: var(--espace-3);
  row-gap: 1px;
  min-height: 58px;
  align-content: center;
  padding: var(--espace-2) var(--espace-4);
  font-size: var(--taille-petit);
}
.devis-ligne + .devis-ligne { border-top: 1px solid var(--trait); }
.devis-ligne__nom { font-weight: 500; }
.devis-ligne__montant { font-weight: 500; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.devis-ligne__detail { grid-column: 1 / -1; font-size: var(--taille-legende); color: var(--texte-2); font-variant-numeric: tabular-nums; }
.devis-ligne__coef { color: var(--texte); }
/* Signalement d'oubli, à la place de la ligne tant qu'elle manque. */
.devis-ligne__alerte {
  grid-column: 1 / -1;
  display: none;
  align-items: center;
  gap: var(--espace-2);
  font-weight: 500;
  color: var(--attention);
}
.devis-ligne__alerte::before {
  content: "!";
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  flex: none;
  border-radius: 50%;
  background: var(--attention-fond);
  font-size: 12px;
}
.devis-ligne[data-montre="alerte"] { background: var(--attention-fond); }
.devis-ligne[data-montre="alerte"] .devis-ligne__alerte { display: flex; }
.devis-ligne[data-montre="alerte"] > :not(.devis-ligne__alerte),
.devis-ligne[data-montre="non"] > * { visibility: hidden; }
.devis-ligne:first-child { border-radius: var(--rayon-carte) var(--rayon-carte) 0 0; }
.devis-ligne:last-child { border-radius: 0 0 var(--rayon-carte) var(--rayon-carte); }

.devis-exemple__bandeau { position: static; transform: none; }
.devis-exemple__bandeau .bandeau-marge__complet { cursor: default; }
.devis-exemple__bandeau .bandeau-marge__bas { font-size: var(--taille-legende); column-gap: var(--espace-3); }

/* Avant l'arrivée des lignes : une indication plutôt qu'une carte vide. */
.devis-lignes { position: relative; }
.demo.est-animee .devis-exemple[data-etape="0"] .devis-lignes::before,
.demo.est-animee .devis-exemple[data-etape="1"] .devis-lignes::before {
  content: "Les lignes du devis vont s’ajouter ici";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: var(--taille-legende);
  color: var(--texte-3);
}

/* Apparitions dans la carte : fondu court, seulement quand l'animation est active. */
.demo.est-animee [data-des],
.demo.est-animee .devis-ligne > * {
  transition: opacity var(--duree-entree) var(--courbe), transform var(--duree-entree) var(--courbe);
}
.demo.est-animee [data-des][data-montre="non"] { opacity: 0; transform: translateY(6px); }
.demo.est-animee .devis-ligne[data-montre="non"] { background: transparent; }

/* ---------- 5. Analyse photo ---------- */
.analyse {
  margin: 0;
  overflow: hidden;
  border-radius: 20px;
  background: var(--carte);
  color: var(--texte);
  box-shadow: 0 0 0 1px var(--trait);
}
.analyse__photo { width: 100%; height: auto; aspect-ratio: 2 / 1; object-fit: cover; }
.analyse__corps { display: grid; gap: var(--espace-3); padding: var(--espace-4); }
@media (min-width: 768px) { .analyse__corps { padding: var(--espace-5); } }
.analyse__titre { font-size: var(--taille-petit); font-weight: 500; color: var(--texte-2); }
.analyse__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--espace-2); }
.proposition { display: grid; gap: var(--espace-2); padding: var(--espace-3); border-radius: var(--rayon-champ); background: var(--surface); }
.proposition--doute { background: var(--attention-fond); }
.proposition__haut { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--espace-2); }
.proposition__nom { font-weight: 500; font-size: var(--taille-petit); }
.proposition__effet { font-size: var(--taille-legende); color: var(--texte-2); }
.proposition .pastille { background: var(--carte); }
.proposition .choix { justify-self: start; background: var(--carte); }
.proposition .choix span { display: inline-grid; place-items: center; min-height: 32px; padding: 0 12px; border-radius: var(--rayon-pilule); font-size: var(--taille-legende); font-weight: 500; color: var(--texte-2); }
.proposition .choix .est-choisi { background: var(--texte); color: var(--fond); }
.analyse__raison { font-size: var(--taille-legende); color: var(--texte-2); font-style: italic; }

/* ---------- 6. Tu comprends chaque ligne ---------- */
.outil__apercu {
  margin: var(--espace-2) 0 0;
  padding: var(--espace-4);
  border-radius: var(--rayon-champ);
  background: var(--fond);
  color: var(--texte);
  font-size: var(--taille-petit);
  line-height: 1.55;
}
.mini-bandeau {
  display: grid;
  gap: var(--espace-2);
  padding: var(--espace-3);
  border-radius: var(--rayon-champ);
  background: var(--perte-fond);
  box-shadow: inset 0 0 0 1px var(--perte);
}
.mini-bandeau .bandeau-marge__etat { color: var(--perte); }
.mini-bandeau__chiffres { display: flex; flex-wrap: wrap; gap: var(--espace-1) var(--espace-4); font-size: var(--taille-legende); color: var(--texte-2); font-variant-numeric: tabular-nums; }
.mini-bandeau__chiffres b { font-weight: 500; color: var(--perte); }
.check-liste { list-style: none; display: grid; gap: var(--espace-2); }
.check-liste li { display: flex; align-items: center; gap: var(--espace-2); }
.check-liste li::before {
  content: "";
  flex: none;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
}
.check-liste__ok::before { background: var(--rentable-fond); box-shadow: inset 0 0 0 1px var(--rentable); }
.check-liste__ok { color: var(--texte); }
.check-liste__alerte { color: var(--attention); font-weight: 500; }
.check-liste__alerte::before { background: var(--attention-fond); box-shadow: inset 0 0 0 1px var(--attention); }

/* ---------- 7. Calculateurs ---------- */
.carte--lien { text-decoration: none; transition: background-color var(--duree-rapide) var(--courbe); }
.carte--lien:hover { background: var(--surface); }
.carte__action { margin-top: var(--espace-2); font-size: var(--taille-petit); font-weight: 500; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.carte--lien:hover .carte__action { text-decoration-thickness: 2px; }

/* ---------- 8. Formules ---------- */
.formules { display: grid; gap: var(--espace-4); max-width: 56rem; }
@media (min-width: 768px) { .formules { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.formule { display: grid; gap: var(--espace-3); align-content: start; }
.formule__entete { display: flex; align-items: center; justify-content: space-between; gap: var(--espace-3); }
.formule__prix { font-size: var(--taille-texte-l); font-weight: 500; margin-top: var(--espace-2); }
.formule__montant {
  font-family: var(--police-titre);
  font-stretch: var(--titre-largeur);
  font-size: var(--taille-h2);
  font-weight: var(--titre-graisse);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.formule__periode { color: var(--texte-2); font-weight: 400; }
.formule .bouton { margin-top: var(--espace-3); }
.liste-coches { list-style: none; margin: var(--espace-2) 0 0; padding: var(--espace-4) 0 0; border-top: 1px solid var(--trait); display: grid; gap: var(--espace-3); font-size: var(--taille-petit); }
.liste-coches li { position: relative; padding-left: var(--espace-6); }
.liste-coches li::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 0.32em;
  width: 10px;
  height: 5px;
  border-left: 1.5px solid var(--texte-2);
  border-bottom: 1.5px solid var(--texte-2);
  transform: rotate(-45deg);
}

/* ---------- 9. Questions fréquentes ---------- */
.faq { display: grid; border-top: 1px solid var(--trait); }
.faq details { border-bottom: 1px solid var(--trait); }
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espace-4);
  min-height: 64px;
  padding-block: var(--espace-4);
  font-size: var(--taille-texte-l);
  font-weight: 500;
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  flex: none;
  width: 9px;
  height: 9px;
  margin-right: 4px;
  border-right: 1.5px solid var(--texte-2);
  border-bottom: 1.5px solid var(--texte-2);
  transform: translateY(-3px) rotate(45deg);
  transition: transform var(--duree) var(--courbe);
}
.faq details[open] summary::after { transform: translateY(2px) rotate(-135deg); }
.faq details p { padding-bottom: var(--espace-5); color: var(--texte-2); max-width: 62ch; }

/* ---------- 10. Liste d'attente ---------- */
.inscription { align-self: start; }
.formulaire { display: grid; gap: var(--espace-4); }
.formulaire__duo { display: grid; gap: var(--espace-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); }
.formulaire .legende a { color: var(--texte-2); }
.formulaire__erreur { font-size: var(--taille-petit); }
.piege { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.bouton[aria-busy="true"] { opacity: 0.7; cursor: progress; }
.confirmation { display: grid; gap: var(--espace-3); justify-items: start; }
.confirmation:focus { outline: none; }
.confirmation__icone {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--surface);
  position: relative;
}
.confirmation__icone::after {
  content: "";
  position: absolute;
  left: 15px;
  top: 15px;
  width: 14px;
  height: 7px;
  border-left: 2px solid var(--texte);
  border-bottom: 2px solid var(--texte);
  transform: rotate(-45deg);
}

/* ---------- 11. Pied de page ---------- */
.pied { padding-block: var(--espace-7) var(--espace-6); box-shadow: inset 0 1px 0 var(--trait); font-size: var(--taille-petit); }
.pied__grille { display: grid; gap: var(--espace-6); }
@media (min-width: 768px) { .pied__grille { grid-template-columns: minmax(0, 2fr) repeat(2, minmax(0, 1fr)); } }
.pied__marque { display: grid; gap: var(--espace-2); align-content: start; }
.pied__colonne { display: grid; gap: var(--espace-2); align-content: start; }
.pied__colonne a { color: var(--texte-2); text-decoration: none; padding-block: 4px; overflow-wrap: anywhere; }
.pied__colonne a:hover { color: var(--texte); text-decoration: underline; text-underline-offset: 3px; }
.pied__titre { font-weight: 500; }
.pied__bas { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--espace-2) var(--espace-5); margin-top: var(--espace-7); padding-top: var(--espace-5); border-top: 1px solid var(--trait); color: var(--texte-3); font-size: var(--taille-legende); }

/* ---------- Pages de texte (mentions légales, confidentialité, introuvable) ---------- */
.entete-simple { padding-top: env(safe-area-inset-top, 0px); box-shadow: inset 0 -1px 0 var(--trait); }
.entete-simple__interieur { display: flex; align-items: center; justify-content: space-between; gap: var(--espace-4); min-height: 64px; }
.pied--simple .pied__bas { margin-top: 0; border-top: 0; }
.pied--simple a { color: var(--texte-2); }
.texte-long { max-width: 46rem; padding-top: var(--espace-8); padding-bottom: var(--espace-8); }
.texte-long h1 { margin-bottom: var(--espace-5); }
.texte-long h2 { margin: var(--espace-7) 0 var(--espace-3); font-size: var(--taille-h3); }
.texte-long p, .texte-long li { color: var(--texte-2); }
.texte-long p + p { margin-top: var(--espace-3); }
.texte-long ul { padding-left: 1.2em; display: grid; gap: var(--espace-2); }
.texte-long a { color: var(--texte); }
.a-relire {
  margin-bottom: var(--espace-6);
  padding: var(--espace-4);
  border-radius: var(--rayon-champ);
  background: var(--attention-fond);
  color: var(--texte);
  font-size: var(--taille-petit);
}
.a-completer { padding: 0 4px; border-radius: 4px; background: var(--attention-fond); color: var(--attention); font-weight: 500; }

/* ---------- Apparitions au défilement ----------
   Fondu et petite translation, une seule fois par élément. Le script ne cache
   que les éléments encore sous l'écran au chargement : rien de ce qui est déjà
   visible ne disparaît, et sans script tout reste affiché. */
.revele.a-reveler { opacity: 0; transform: translateY(16px); }
.revele.est-revele {
  transition: opacity var(--duree-entree) var(--courbe), transform var(--duree-entree) var(--courbe);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .revele.a-reveler { opacity: 1; transform: none; }
}

/* « Bientôt » : ce qui n'existe pas encore dans l'application (06/11/2026). */
.pastille--bientot { background: var(--attention-fond); color: var(--attention); vertical-align: middle; margin-left: 6px; }
.surtitre .pastille--bientot { margin-left: 8px; text-transform: none; letter-spacing: 0; }