/* Composant 5 : « Ce qu'il nous faut pour votre devis ». Un bon de demande d'imprimeur, sur une feuille posée :
   cases imprimées en bleu, choix entourés au stylo bille, sens d'enroulement en 8 positions. */
.demande { max-width: 1440px; margin: 0 auto; padding: var(--espace-9) max(var(--espace-7), env(safe-area-inset-right, 0px)) var(--espace-9) max(var(--espace-7), env(safe-area-inset-left, 0px));
  display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: var(--espace-8); align-items: start; border-top: 1px solid var(--filet); }
.demande__texte { position: sticky; top: 110px; }
.demande h2 { margin: 0; font-family: var(--font-titre); font-weight: 700; font-size: clamp(34px, 3.6vw, 48px); line-height: 1.08; letter-spacing: -0.01em; text-wrap: balance; }
.demande__texte p { margin: 20px 0 0; max-width: 32em; font-size: 18px; line-height: 28px; }
.demande__texte .doux { font-size: 16px; line-height: 24px; color: var(--texte-doux); }
.demande__texte strong { font-weight: 600; user-select: all; }

/* La feuille : papier blanc chaud, grain léger, posée de travers sur la table. */
.feuille {
  --encre-form: #1f4fd0; --stylo: #1b2f8f;
  position: relative; padding: 44px 48px 40px; color: var(--texte); transform: rotate(-0.6deg);
  background: #fffdf8 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.45 0 0 0 0 0.4 0 0 0 0 0.3 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23g)'/%3E%3C/svg%3E");
  box-shadow: 0 1px 1px rgba(10, 10, 11, 0.06), 0 6px 14px -6px rgba(10, 10, 11, 0.18), 0 30px 60px -30px rgba(10, 10, 11, 0.35);
}
.feuille__tete { display: flex; align-items: center; justify-content: space-between; gap: var(--espace-5); padding-bottom: 18px; border-bottom: 2px solid var(--encre-form); }
.feuille__tete img { height: 40px; width: auto; }
.feuille__tete h3 { margin: 0; font-family: var(--font-titre); font-size: 22px; line-height: 26px; color: var(--encre-form); text-align: right; }
.feuille__tete h3 small { display: block; font-family: var(--font-texte); font-weight: 500; font-size: 13px; line-height: 18px; color: var(--texte-doux); }

.case { margin: 0; padding: 20px 0 18px; border: 0; border-bottom: 1px solid color-mix(in srgb, var(--encre-form) 30%, transparent); }
.case legend, .case > label, .case__titre { display: block; padding: 0; margin-bottom: 12px; font-size: 12.5px; line-height: 16px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--encre-form); }
.case__titre small, .case legend small { font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--texte-doux); }
.lignes { display: flex; flex-wrap: wrap; gap: 14px 28px; align-items: end; }
.champ { display: grid; gap: 4px; min-width: 0; }
.champ span { font-size: 13px; line-height: 16px; color: var(--texte-doux); }
.champ input, .champ textarea {
  width: 100%; padding: 4px 2px 6px; border: 0; border-bottom: 1.5px dotted var(--encre-form); border-radius: 0; background: transparent;
  font: 500 18px/24px var(--font-texte); color: var(--stylo);
}
.champ textarea { resize: vertical; min-height: 56px; }
.champ input:focus, .champ textarea:focus { outline: none; border-bottom-style: solid; }
.champ input:focus-visible, .champ textarea:focus-visible { box-shadow: 0 2px 0 0 var(--focus); }
.champ--court { width: 110px; } .champ--moyen { width: 180px; } .champ--long { flex: 1 1 260px; }
.multiplie { padding-bottom: 8px; font-size: 18px; color: var(--encre-form); }

/* Les choix : un mot imprimé ; choisi, il est entouré d'un trait de stylo à main levée. */
.choix { display: flex; flex-wrap: wrap; gap: 10px 22px; }
.choix label { position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 8px 10px; cursor: pointer; font-size: 16px; line-height: 20px; }
.choix input { position: absolute; opacity: 0; pointer-events: none; }
.choix label:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.stylo { position: absolute; left: -10px; top: -6px; width: calc(100% + 20px); height: calc(100% + 12px); overflow: visible; pointer-events: none; }
.stylo path { fill: none; stroke: var(--stylo); stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 0.5s cubic-bezier(0.3, 0.6, 0.3, 1); }
.choix label:has(input:checked) .stylo path { stroke-dashoffset: 0; }
.enroulement__legende { position: relative; display: grid; justify-items: center; gap: 2px; padding: 2px 8px; }
.choix label:has(input:checked) { color: var(--stylo); }

/* Les 8 positions d'enroulement, dessinées comme sur une fiche technique. */
.enroulement { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px 14px; }
.enroulement label { display: grid; justify-items: center; gap: 4px; padding: 10px 6px 8px; text-align: center; font-size: 12.5px; line-height: 15px; color: var(--texte-doux); }
.enroulement label b { font-family: var(--font-titre); font-size: 15px; color: var(--encre-form); }
.enroulement .picto { width: 100%; max-width: 120px; height: auto; color: var(--encre-form); }
.enroulement__groupe { grid-column: 1 / -1; font-size: 12px; font-weight: 600; color: var(--texte-doux); margin-top: 4px; }
.enroulement .inconnu { grid-column: 1 / -1; justify-self: start; font-size: 15px; color: var(--texte); }

.feuille__pied { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px; margin-top: 30px; }
.feuille__pied p { margin: 0; font-size: 14px; line-height: 20px; color: var(--texte-doux); }
.feuille__pied strong { color: var(--texte); user-select: all; }
.feuille .devis { border: 0; background: none; cursor: pointer; font-family: var(--font-texte); }

@media (max-width: 1000px) {
  .demande { grid-template-columns: 1fr; gap: var(--espace-6); padding: var(--espace-8) max(var(--espace-4), env(safe-area-inset-right, 0px)) var(--espace-8) max(var(--espace-4), env(safe-area-inset-left, 0px)); }
  .demande__texte { position: static; }
  .feuille { padding: 28px 20px 28px; transform: none; margin: 0 -4px; }
  .feuille__tete h3 { font-size: 18px; line-height: 22px; }
  .enroulement { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .champ--long { flex-basis: 100%; }
}

/* Les positions d'enroulement sont des choix comme les autres (entourés au stylo). */
.enroulement label { position: relative; cursor: pointer; }
.enroulement label input { position: absolute; opacity: 0; pointer-events: none; }

/* Arrivée par un lien « #devis » : le bon ne passe pas sous l en-tête collant. */
.demande { scroll-margin-top: 66px; }

/* Confirmation après l'envoi, et mention sur les données. */
.feuille .envoi { flex-basis: 100%; margin: 0; font-size: 14.5px; line-height: 21px; color: var(--accent); font-weight: 600; }
.feuille .envoi:empty { display: none; }
.feuille .donnees { flex-basis: 100%; margin: 4px 0 0; font-size: 12.5px; line-height: 18px; color: var(--texte-doux); }