/* Feuille des 4 ecrans de /demande-offre/.
 *
 * POURQUOI ELLE EXISTE A PART DU SOCLE. `public/styles.css` est assemble a la
 * compilation depuis les feuilles du site et ne doit porter aucune regle
 * propre au parcours : il est le site. Ce fichier-ci porte les seules classes
 * que `api/demande.php` emet et que le site n'emet nulle part ailleurs, parce
 * que ces 4 adresses sont les seules servies par PHP.
 *
 * POURQUOI ELLE EST SI COURTE. Le parcours reemploie deliberement les classes
 * de l'etape 1 posee sur la page de contact par `Formulaire.astro` : `.btn`,
 * `.cartes`, `.carte`, `.piege`, et le `.monument` de la page d'accueil. Elles
 * vivent dans `src/styles/comptoir.css`, qui est dans le socle servi, donc le
 * rendu du parcours ne peut pas s'ecarter de celui du site : ce sont les memes
 * octets. Aucune valeur n'est recopiee ici, tout passe par les jetons.
 *
 * POURQUOI TOUT EST PORTE PAR `.demande`. Le socle servi est le socle ENTIER
 * du site, et deux noms s'y trouvaient deja : `.retour` y est la section sombre
 * de fin de page de soutien, `.n` le numero d'une bande de gaz. Sans la portee,
 * le lien « Revenir en arriere » du parcours heritait d'un fond noir. La portee
 * n'est donc pas de la precaution, c'est la correction d'un defaut constate a
 * l'ecran.
 *
 * LA COMPOSITION EST EN DEUX COLONNES, et c'est la seule decision de mise en
 * page du fichier. Une colonne de formulaire seule au milieu d'un ecran de
 * 2560 px est refusee par les regles maison, au meme titre qu'une colonne
 * collee a gauche. Le fil des etapes, le titre et la phrase d'accroche tiennent
 * donc la portee de gauche, les commandes la portee de droite, exactement comme
 * `.formBloc` sur la page de contact.
 */

/* Le site reserve 64 px en bas pour sa barre d'action persistante. Ces 4 ecrans
   ne la portent pas : la reserve y laisserait un vide que rien n'occupe. */
.pDemande{ padding-block-end: 0 }

/* DANS LA FENETRE MODALE. Le parcours est alors pose dans un cadre de la
   largeur de la boite : il ne porte plus l'enveloppe du site, il n'a plus a
   remplir une hauteur d'ecran, et il perd le decor de bord qui n'a de sens
   qu'en pleine page. La hauteur du cadre est reglee par le script parent
   d'apres ce que ce contenu mesure reellement. */
.pCadre .demande{ min-height: 0; padding-block: clamp(22px, 2.4vw, 52px) }
.pCadre .demande::before,
.pCadre .demande::after{ display: none }
.pCadre .evitement{ display: none }

/* L'ecran entier appartient au parcours. Sans cette hauteur, un formulaire de
   trois champs laisse les deux tiers bas de la dalle en aplat gris, et les deux
   objets de marque ci-dessous n'ont plus de place ou se poser. */
.demande{
  position: relative;
  min-height: 100vh; min-height: 100svh;
  padding-block: var(--pile-dense) var(--pile);
}

/* Le filet traversant et le treillis de la charte. Ces 4 ecrans n'ont ni
   en-tete ni pied : sans un objet de marque, la page n'appartient a personne.
   Le filet est le dispositif du site (`.filetSec`), le treillis est le motif
   de la charte, jamais une texture inventee. */
.demande::before{
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  inset-inline: 0; top: 0; height: 3px; background: var(--bleu);
}
.demande::after{
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  right: 0; bottom: 0;
  width: clamp(160px, 26vw, 620px); aspect-ratio: 1;
  background-image: url(/img/treillis-bleu.svg);
  background-repeat: repeat; background-size: 86px 86px;
  opacity: .10;
}
.demande > .p-conteneur{ position: relative; z-index: 1 }

.demande .dGrille{ display: grid; gap: clamp(22px, 2.2vw, 56px); grid-template-columns: 1fr }
@media (min-width: 1024px){
  .demande .dGrille{
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gap-col);
    /* La grille ne tient PLUS la hauteur de fenetre. Elle l'a tenue, et le
       resultat s'est vu a 2560 : le contenu occupait les 630 px du haut, le
       numero de l'etape etait pousse 800 px plus bas par un `margin: auto`, et
       entre les deux il n'y avait rien. Une colonne qui s'etire ne remplit pas
       une page, elle eloigne ses objets les uns des autres. C'est le bloc
       magasin, du contenu reel, qui tient desormais le bas de la portee. */
  }
  .demande .dTete  { grid-column: 1 / span 5; grid-row: 1; display: flex; flex-direction: column }
  .demande .dCorps { grid-column: 7 / span 6; grid-row: 1 / span 2 }
  /* Le bloc magasin est ECRIT apres le formulaire, pour qu'un telephone affiche
     les choix avant l'adresse. La grille le remonte ici dans la portee de
     gauche, sous le numero : l'ordre a l'ecran n'est pas l'ordre du document,
     et c'est le seul endroit du parcours ou les deux different. */
  .demande .dMagasin{ grid-column: 1 / span 5; grid-row: 2; margin-top: 0 }
}

.demande .chapeau{
  font-size: var(--t-chapeau); line-height: 1.45; color: #3C3B34;
  max-width: 42ch; margin: clamp(12px, 1vw, 26px) 0 0;
}
.demande a[href^="tel:"]{ color: var(--bleu); font-family: var(--tc); font-weight: 600 }

/* ---- le fil des 3 etapes ----
   Il dit d'avance ou on va : c'est ce qui autorise a decouper le formulaire.
   Un cran porte ses QUATRE bords, jamais un seul. */
.demande .etapes{
  list-style: none; margin: 0 0 clamp(18px, 1.6vw, 40px); padding: 0;
  display: flex; flex-wrap: wrap; gap: clamp(10px, 1vw, 22px);
  font-family: var(--tc); text-transform: uppercase; font-weight: 500;
  font-size: var(--t-micro); letter-spacing: .08em; color: #8A8982;
}
.demande .etapes li{ display: flex; align-items: center; gap: .6em }
.demande .etapes .n{
  display: grid; place-items: center; width: 1.9em; height: 1.9em;
  font-weight: 700; font-size: var(--t-petit); line-height: 1;
  border: 2px solid #D4D4CE; color: #8A8982;
}
.demande .etapes .faite, .demande .etapes .courante{ color: var(--bleu) }
.demande .etapes .faite .n{ border-color: var(--bleu); color: var(--bleu) }
.demande .etapes .courante .n{ background: var(--bleu); border-color: var(--bleu); color: #fff }

/* ---- le numero de l'etape, en objet ----
   Le fil ci-dessus porte deja l'information : celui-ci n'en porte aucune, il
   occupe le bas de la portee de gauche que trois lignes de texte laisseraient
   vide sur une dalle de 2560. Il reprend le traitement du monument de la page
   d'accueil, et non un traitement invente pour l'occasion. Sous 1024 px la page
   n'a plus qu'une colonne : il n'a plus de place a tenir, il disparait. */
.demande .dNum{ display: none }
@media (min-width: 1024px){
  .demande .dNum{
    display: block; background: none;
    margin: 0 0 0 -.07em; padding-top: clamp(24px, 2.4vw, 64px);
    color: var(--bleu); opacity: .16;
  }
}

/* ---- le bloc magasin ----
   Trois lignes de contenu reel au bas de la portee de gauche : l'adresse, les
   horaires, le numero appelable. Il repond a ce que se demande quelqu'un qui
   hesite a laisser ses coordonnees, et il est la seule issue quand l'envoi
   echoue. Aucun bord de couleur sur un seul cote : c'est un bloc de texte,
   separe par l'espace, pas par un filet. */
.demande .dMagasin{
  margin-top: clamp(26px, 2.6vw, 64px);
  font-size: var(--t-petit); line-height: 1.6; color: #4B4A43;
  max-width: 34ch;
}
.demande .dMagasin p{ margin: 0 }
.demande .dMagTitre{
  font-family: var(--tc); text-transform: uppercase; font-weight: 700;
  letter-spacing: .08em; font-size: var(--t-micro);
  color: var(--bleu); margin-bottom: .5em !important;
}

/* ---- message d'erreur ----
   Plaque pleine, sur ses quatre cotes. Un bord de couleur sur un seul cote est
   le marqueur d'IA que le client repere en trois secondes. */
.demande .erreur{
  margin: 0 0 clamp(14px, 1.2vw, 28px);
  background: var(--noir); color: #fff;
  padding: clamp(12px, 1vw, 20px) clamp(14px, 1.2vw, 26px);
  font-size: var(--t-petit);
}

/* ---- les champs ---- */
.demande fieldset{ border: 0; margin: 0 0 clamp(18px, 1.6vw, 38px); padding: 0 }
.demande legend{
  font-family: var(--tc); text-transform: uppercase; font-weight: 700;
  font-size: var(--t-h4); color: var(--bleu); margin-bottom: .7em; padding: 0;
}

.demande .dChamps{ display: grid; gap: clamp(10px, 1vw, 20px); grid-template-columns: 1fr }
@media (min-width: 620px){
  .demande .dChamps{ grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .demande .dChamps > label:first-child{ grid-column: 1 / -1 }
}
.demande .dChamps label, .demande .libre{
  display: grid; gap: .45em;
  font-family: var(--tc); text-transform: uppercase; letter-spacing: .1em;
  font-size: var(--t-micro); color: #4B4A43;
}
.demande .libre{ margin-top: clamp(14px, 1.2vw, 30px) }
.demande .requis{ letter-spacing: .08em; color: var(--bleu) }

.demande :is(input[type="text"], input[type="tel"], input[type="email"], textarea){
  font: inherit; font-size: var(--t-petit); padding: .55em .9em;
  border: 2px solid #D4D4CE; background: #fff; color: var(--noir);
  min-height: 48px; width: 100%;
}
.demande textarea{ min-height: 0; resize: vertical; line-height: 1.5 }
.demande :is(input, textarea):focus{ border-color: var(--bleu) }

/* ---- actions de bas d'ecran ----
   Le bouton prend la largeur sous 620 px : c'est lui qui doit etre atteint
   d'abord sur un telephone, et l'ordre du document reste celui de la lecture. */
.demande .actions{
  display: flex; flex-wrap: wrap; align-items: center;
  gap: clamp(12px, 1.2vw, 26px); margin-top: clamp(18px, 1.6vw, 40px);
}
.demande .actions .btn{ flex: 1 1 auto; text-align: center }
@media (min-width: 620px){ .demande .actions .btn{ flex: 0 0 auto } }
/* `background` et `padding` sont remis a zero explicitement : `.retour` existe
   deja dans le socle, ou il designe la section sombre de fin de page. */
.demande .retour{
  background: none; padding: .2em 0;
  font-family: var(--tc); text-transform: uppercase; font-weight: 600;
  letter-spacing: .05em; font-size: var(--t-petit); color: var(--bleu);
  text-decoration: none; border-bottom: 2px solid transparent;
}
.demande .retour:hover{ border-bottom-color: var(--bleu) }

/* ---- le bloc ALTCHA ----
   Une ligne d'etat, et rien a cliquer. Elle ne doit pas ressembler a un
   message d'erreur ni a un bouton : c'est de l'information, en petit, sous
   les champs. Le bloc existe meme sans JavaScript, ou il reste muet : c'est
   l'honnetete minimale, la page ne promet pas une verification qu'elle ne
   fait pas. Aucun bord de couleur sur un seul cote. */
.demande .altcha{ margin-top: clamp(14px, 1.2vw, 28px) }
.demande .altchaEtat{
  margin: 0; font-family: var(--tc); text-transform: uppercase;
  letter-spacing: .08em; font-size: var(--t-micro); color: #8A8982;
}
.demande [data-altcha-fait] .altchaEtat{ color: var(--bleu) }