/* HartEdge · monde 1 « Verre de nuit » · les deux pages qui suivent l'accueil (n° 16, A6) : sites.html et formulaire.html.
   Elles prennent style.css tel quel (les polices, la nuit, les boutons, le voile, le pied) ; ce fichier n'ajoute que leur mise en page.
   Le fond : l'affiche du monde 1 (l'image fixe que la scène montre sans WebGL), dans la même carte arrondie ; aucun script de scène. */

.scene--fixe { background-image: url(fond/affiche-tel.avif); }
@media (min-width: 900px) { .scene--fixe { background-image: url(fond/affiche-bureau.avif); } }

.entete--seconde { gap: 16px; }
.retour { font-size: 15px; padding-block: 12px; }

.seconde { position: relative; z-index: 1; padding: clamp(112px, 16vh, 168px) var(--marge) clamp(64px, 10vh, 120px);
  display: grid; gap: clamp(72px, 12vh, 128px); }
.seconde > * { max-width: 920px; }
/* Les voiles sous TOUS les textes (session 154) : dans style.css, chaque .voile fait son empilement (isolation: isolate) ; ici les blocs
   voilés se suivent, et l'ombre du voile d'un bloc (48 px de flou) se peignait sur le texte du bloc d'avant (15 + 4 textes éteints,
   _travail/n16/voile-dessus.mjs). Sans isolation, les voiles vont sous le contenu de .seconde, qui reste au-dessus de la scène. */
.seconde .voile { isolation: auto; }
.seconde .voile::before { box-shadow: 0 0 48px 48px rgba(10, 9, 23, 0.76); }
.seconde .lien { padding-block: 11px; margin-block: -11px; }
/* Le voile à la largeur de son texte (session 154) : ces blocs faisaient 920 px pour un texte bien plus court, et leur voile dessinait sur la
   lame, au bureau, des marches et des coins gris loin de tout texte (jusqu'à 773 px au-delà du texte ; l'accueil, le témoin : 154 au plus ;
   _travail/n16/voile-largeur.mjs). Seulement les blocs de texte et de boutons : ni la liste des ajouts (ses prix à droite), ni les
   formulaires (des champs à 100 %). Le bloc de fin et la tête du formulaire (session 155) : leur titre (.titre-fin, 13em) les tient à
   861 px ; le filet (640 px), les étapes (40em) n'y bougent pas (voile-bouge.mjs : la position de chaque élément, avant/après, 1440 et 390). */
.seconde div.seconde__tete.voile, .seconde .tarif.voile,
.seconde :is(.titre-section, .seconde__h3, .tarif__tva, .ajouts__note, .actions).voile,
.seconde .seconde__fin > .voile, .seconde section.seconde__tete.voile { width: fit-content; }
/* La tête du formulaire (session 156) : son titre (13em, 861 px) la tenait encore 159 px au-delà de son texte, et son voile éteignait le
   haut de la lame (cap5/formulaire-bureau-00 : le trait blanc à 58 sous le voile, 143 au dehors). « Demander une » tient en 10em : le
   titre garde ses deux lignes, et ce sont les étapes (40em) qui tiennent la tête. */
.seconde section.seconde__tete .titre-fin { max-width: 10em; }
.seconde__tete .phrase { margin-top: 22px; max-width: 32em; }
.sur-titre { margin-bottom: 14px; font-size: 15px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--glacier); }
.seconde__section .titre-section { margin-bottom: 30px; }
.seconde__section > .phrase { margin: -12px 0 30px; }
.seconde__h3 { font-family: 'Unbounded', sans-serif; font-weight: 300; font-size: clamp(19px, 2vw, 24px); line-height: 1.25; margin: 48px 0 18px; }
.volet .seconde__h3 { margin-top: 0; }

/* Le mot allumé (RE21 : « à allumer ») : le spectre dans la lettre. Chaque couleur du spectre est à plus de 7:1 sur la nuit. */
.allume { background: var(--spectre); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* Le bloc du prix (.tarif : .prix est le panneau de l'accueil, dans style.css) */
.tarif { padding: 4px 0; }
.tarif__montant { font-family: 'Unbounded', sans-serif; font-weight: 300; font-size: clamp(56px, 9vw, 112px); line-height: 1; letter-spacing: -0.02em; }
.tarif__sous { margin-top: 14px; font-size: 19px; color: var(--givre); }
.tarif__lignes { margin: 26px 0 0; padding: 0; list-style: none; display: grid; gap: 14px; color: var(--brume); max-width: 38em; }
.tarif__lignes li { padding-left: 22px; position: relative; }
.tarif__lignes li::before { content: ''; position: absolute; left: 0; top: 0.75em; width: 10px; height: 1px; background: var(--brume); }
.tarif__tva { margin-top: 20px; font-size: 15px; color: var(--brume); }
.actions--seule { flex-direction: column; align-items: flex-start; gap: 10px; }
.actions__note { font-size: 15px; color: var(--brume); }

.compris { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; color: var(--brume); max-width: 40em; }
.compris strong, .pas-compris strong { color: var(--givre); font-weight: 500; }
.pas-compris { margin-top: 22px; color: var(--brume); max-width: 40em; }

.ajouts { margin: 0; padding: 0; list-style: none; display: grid; max-width: 34em; }
.ajouts li { display: flex; justify-content: space-between; gap: 18px; padding: 14px 0; border-bottom: 1px solid var(--givre-14); }
.ajouts li strong { font-weight: 500; white-space: nowrap; }
.ajouts__note { margin-top: 14px; font-size: 15px; color: var(--brume); }

.volets { display: grid; gap: 40px; }
@media (min-width: 900px) { .volets { grid-template-columns: 1fr 1fr; gap: 56px; } }
.volet p + p { margin-top: 12px; }
.volet p { color: var(--brume); }
.volet .volet__pour { color: var(--givre); font-size: 15px; }

.seconde__fin .phrase { margin-top: 22px; }
.retour-bas { margin-top: 28px; }

/* Les quatre étapes */
.etapes { counter-reset: e; margin: 40px 0 0; padding: 0; list-style: none; display: grid; gap: 22px; max-width: 40em; }
@media (min-width: 900px) { .etapes { grid-template-columns: 1fr 1fr; gap: 28px 48px; } }
.etapes li { counter-increment: e; position: relative; padding-left: 46px; color: var(--brume); }
.etapes li::before { content: counter(e); position: absolute; left: 0; top: 0; width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center; font-size: 15px; color: var(--givre); box-shadow: inset 0 0 0 1px rgba(243, 245, 251, 0.32); }
.etapes strong { display: block; margin-bottom: 4px; color: var(--givre); font-weight: 500; }

/* Les formulaires */
.formulaire { display: grid; gap: 22px; max-width: 34em; }
.champ { display: grid; gap: 8px; }
.champ label { font-size: 16px; color: var(--givre); }
.champ input, .champ textarea { width: 100%; min-height: 52px; padding: 13px 16px; border: 0; border-radius: 12px; font: inherit; color: var(--givre);
  background: rgba(243, 245, 251, 0.06); box-shadow: inset 0 0 0 1px rgba(243, 245, 251, 0.32); transition: box-shadow 0.2s ease; }
.champ textarea { resize: vertical; min-height: 150px; }
.champ input:focus-visible, .champ textarea:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--glacier); }
.champ__aide { font-size: 15px; color: var(--brume); }
.champ__erreur { font-size: 15px; color: var(--sp-1); }
.champ [aria-invalid="true"] { box-shadow: inset 0 0 0 2px var(--sp-1); }
.formulaire__alerte { padding: 14px 16px; border-radius: 12px; color: var(--givre); box-shadow: inset 0 0 0 1px var(--sp-1); }
.formulaire__alerte p + p { margin-top: 6px; color: var(--brume); }
.formulaire .bouton { justify-self: start; cursor: pointer; border: 0; font-family: inherit; }
.formulaire__note { font-size: 15px; color: var(--brume); }
.formulaire__note .lien { padding-block: 13px; margin-block: -13px; white-space: nowrap; }  /* A22 P3 : la cible « Vos données » à 44 px */
.autrement { margin-top: 48px; color: var(--brume); max-width: 34em; }

/* Le piège : hors écran, inerte (RE21 c ; comme contact.remote.ts) */
.piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Après l'envoi : sans script, la page d'arrivée (?envoye=1#envoye-… ou ?echec=1#echec-…) le montre par :target ; avec, une classe. */
.message, .echec { display: none; max-width: 34em; }
.message .titre-section { margin-bottom: 18px; }
.message p + p { margin-top: 22px; }
.echec { margin-bottom: 26px; padding: 14px 16px; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--sp-1); }
.message:target, .bloc-form.envoye .message, .echec:target { display: block; }
.bloc-form:has(.message:target) .formulaire, .bloc-form.envoye .formulaire { display: none; }

/* Les pages du droit (R734, chef-hartedge, 07/11) : vos-donnees.html et mentions-legales.html au design du site ; leurs mots n'ont pas bougé
   (r734/_travail/pages-droit.py le vérifie). Leurs balises gardent leurs noms d'avant (.stop, .detail) ; seul le style change. */
.seconde .doc { max-width: 44em; }
.doc .titre-fin { font-size: clamp(28px, 4vw, 52px); max-width: 16em; margin-bottom: 8px; }
.doc h2 { font-family: 'Unbounded', sans-serif; font-weight: 300; font-size: clamp(19px, 2vw, 24px); line-height: 1.25;
  margin: 44px 0 14px; padding-top: 18px; border-top: 1px solid var(--givre-14); }
.doc p, .doc dl, .doc li { color: var(--brume); }
.doc p, .doc dl { margin: 12px 0 0; }
.doc strong { color: var(--givre); font-weight: 500; }
.doc a { color: var(--glacier); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px;
  text-decoration-color: rgba(133, 221, 243, 0.45); overflow-wrap: anywhere; }
.doc a:hover { text-decoration-color: var(--glacier); }
.doc .stop { margin-top: 28px; padding: 16px 18px; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--givre-14); border-left: 2px solid var(--glacier);
  font-size: 18px; line-height: 1.5; }
.doc .detail { list-style: none; margin: 24px 0 0; padding: 0; }
.doc .detail li { padding: 16px 0; border-top: 1px solid var(--givre-14); }
.doc .detail li:last-child { border-bottom: 1px solid var(--givre-14); }
.doc dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 20px; }
.doc dd { margin: 0; color: var(--givre); }
@media (max-width: 420px) { .doc dl { grid-template-columns: 1fr; gap: 2px; } .doc dd { margin-bottom: 10px; } }