/* =============================================================================
   soumission-envoi.css : les pieces communes du formulaire de soumission en
   une etape, sur les trois pages qui le portent depuis le 2026-09-29
   (/quote-request, /get-a-quote, /fr/obtenir-un-devis).
   -----------------------------------------------------------------------------
   Les champs gardent le style de leur page : .ffield dans le tunnel
   (soumission.css), .apply__ sur les pages du site (adn.css). Ici vivent ce
   qu'aucune des deux feuilles n'avait : les lignes « joint » (la liste de Mon
   projet, le fil de l'assistant), la case d'accord et les erreurs hors du
   tunnel, la mention sous le bouton, et la fenetre de confirmation.

   DES JETONS, JAMAIS UNE COULEUR EN DUR : --fg, --fg-2, --fg-3, --surface,
   --rule-2, --accent valent la nuit ce que le site sombre ecrit, et le jour ce
   que theme.css retourne. La meme feuille est donc juste dans les deux modes,
   sans une regle de plus dans theme.css.
   ========================================================================== */

/* --- Ce qui part avec la demande sans etre un champ --- */
.sjoint{ margin:18px 0 0; font-size:13.5px; line-height:1.6; color:var(--fg-3); }
.sjoint[hidden]{ display:none; }
.sjoint a,
.sjoint button{
  padding:0 0 1px; border:0; border-bottom:1px solid var(--accent); background:none;
  font:inherit; color:var(--fg); cursor:pointer;
  transition:color var(--dur-quick) var(--ease-out);
}
.sjoint a:hover,
.sjoint button:hover{ color:var(--accent); }

/* --- La mention a cote du bouton --- */
.smention{ margin:0; font-size:12.5px; line-height:1.6; color:var(--fg-3); }
.smention a{ color:var(--fg-2); border-bottom:1px solid var(--rule-2); }
.smention a:hover{ color:var(--accent); border-color:var(--accent); }

/* --- Hors du tunnel : la case d'accord, les erreurs, la rangee d'envoi ---
   .apply__form est une grille de deux colonnes : ce qui suit les champs prend
   toute la largeur, y compris la mention HubSpot qu'avis-formulaires.js pose
   apres la case d'accord quand le formulaire est branche. */
.apply__form > .sjoint,
.apply__form > .scase,
.apply__form > .serreur,
.apply__form > .atl-avis-crm,
.apply__form > .senvoi{ grid-column:1 / -1; }
.apply__form > .sjoint{ margin:0; }

.scase{ display:flex; gap:12px; align-items:flex-start; cursor:pointer; }
.scase input{ width:18px; height:18px; margin:3px 0 0; flex:none; accent-color:var(--accent); cursor:pointer; }
.scase__texte{ font-size:14px; line-height:1.6; color:var(--fg-2); }

/* L'erreur d'un champ, et celle de l'envoi. Le texte reste dans l'encre de la
   page et le rouge ne marque que le filet : un rouge qui se lit en petit sur
   le noir ne se lit pas sur le blanc, et inversement. */
.serreur{
  margin:8px 0 0; padding-left:10px; border-left:2px solid var(--accent);
  font-size:13px; line-height:1.5; color:var(--fg);
}
.serreur[hidden]{ display:none; }
.serreur a{ border-bottom:1px solid var(--accent); }

.senvoi{ display:flex; align-items:center; gap:14px 22px; flex-wrap:wrap; }
.senvoi .btn[disabled]{ opacity:.55; cursor:progress; }

/* --- Le resume de Mon projet ---
   Depuis le 2026-10-06 (demande de Clement Lefebvre), sur les trois pages :
   la colonne de gauche de /quote-request (soumission.css le met en colonne,
   sous .fnl__aside), et une carte sous le courriel et le telephone de
   /get-a-quote et /fr/obtenir-un-devis (.sresume--carte, la meme boite que
   les .method de contact.css). soumission.js (peindreResume) ecrit le compte
   et les lignes ; la liste vide est du HTML. */
.sresume__vide[hidden],
.sresume__plein[hidden]{ display:none; }
.sresume__titre{
  margin:0 0 14px; padding-left:12px; border-left:2px solid var(--accent);
  font-family:var(--font-mono); font-weight:400; font-size:11px; line-height:1.6;
  letter-spacing:.14em; text-transform:uppercase; color:var(--fg-3);
}
.sresume__accroche,
.sresume__compte{
  margin:0 0 12px;
  font-family:var(--font-display); font-weight:700; font-size:17px; line-height:1.25;
  color:var(--fg);
}
.sresume__texte{ margin:0 0 16px; max-width:44ch; font-size:14px; line-height:1.6; color:var(--fg-3); }
.sresume__lien{
  display:inline-block; align-self:flex-start; padding-bottom:2px; border-bottom:1px solid var(--accent);
  font-family:var(--font-sans); font-weight:700; font-size:12px;
  letter-spacing:var(--track-wide); text-transform:uppercase;
  color:var(--fg); transition:color var(--dur-quick) var(--ease-out);
}
.sresume__lien:hover{ color:var(--accent); }
/* LES FILETS LISENT --clair-bord D'ABORD. En jour, theme.css retourne --rule-2
   en filet SOMBRE (#232327) pour les sections claires, et peint .method en
   --clair-bord par une regle a elle : la carte sortait donc encadree de noir a
   cote de deux cartes au filet gris. --clair-bord n'existe qu'en jour (bloc 1
   de theme.css) ; la nuit, le repli rend --rule-2, le filet de .method.
   Sans toucher a theme.css, dont le numero se reecrirait dans tout le site. */
.sresume__liste{ margin:0; padding:0; list-style:none; border-top:1px solid var(--clair-bord, var(--rule-2)); }
.sresume__ligne{
  display:grid; grid-template-columns:56px minmax(0,1fr) auto; align-items:center; gap:14px;
  padding:12px 4px 12px 0; border-bottom:1px solid var(--clair-bord, var(--rule-2));
}
/* Le meme fond gris clair que les vignettes de Mon projet (compte.css,
   .citem__media) : les photos sont des PNG detoures. Gris clair dans les deux
   modes, comme la-bas.
   LE PLAFOND DE L'IMAGE EST EN PIXELS, PAS EN %. En grille (place-items), la
   rangee est en auto : un max-height:100% s'y rapporte a une hauteur qui
   depend de l'image elle-meme, il est donc ignore, et une machine plus haute
   que large (la M118) montait a 68 px dans une vignette de 56. Mesure en
   production le 2026-10-06. */
.sresume__media{
  width:56px; height:56px; padding:4px; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  background:radial-gradient(80% 90% at 50% 40%, #eceef0 0%, #cfd2d7 100%);
}
.sresume__media img{
  display:block; width:auto; height:auto; max-width:48px; max-height:48px; object-fit:contain;
}
.sresume__corps{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.sresume__nom{ font-size:14.5px; font-weight:600; line-height:1.35; color:var(--fg); overflow-wrap:anywhere; }
.sresume__code{ font-family:var(--font-mono); font-size:11.5px; letter-spacing:.06em; color:var(--fg-3); }
.sresume__qte{ font-size:14px; font-weight:600; white-space:nowrap; color:var(--fg); }
.sresume__pied{
  margin:14px 0 0;
  display:flex; flex-wrap:wrap; align-items:baseline; gap:8px 16px;
  font-size:13px; line-height:1.55; color:var(--fg-3);
}
/* Sur les pages du site, une carte sous les deux .method. Sa liste se plafonne
   a cinq lignes environ, puis defile : la carte passe AU-DESSUS du formulaire
   sous 1080 px (contact.css), et une liste de soixante lignes le repousserait
   d'autant. Pas d'overscroll-behavior ici : sur telephone, la page doit
   reprendre le defilement une fois la liste au bout. */
.sresume--carte{
  margin-top:14px; padding:20px 22px;
  background:var(--clair-panneau, var(--surface));
  border:1px solid var(--clair-bord, var(--rule-2));
}
.sresume--carte .sresume__liste{ max-height:400px; overflow-y:auto; }

/* --- La fenetre de confirmation ---
   Un <dialog> ouvert par showModal() : il passe au-dessus de tout, garde le
   focus, et Echap le ferme. AUCUN display ici : sur un <dialog>, un display
   d'auteur l'afficherait meme ferme. */
.smerci{
  width:min(92vw, 520px); max-height:90dvh; margin:auto; padding:0;
  border:1px solid var(--rule-2); background:var(--surface); color:var(--fg);
  box-shadow:0 30px 80px rgba(0,0,0,.45);
}
.smerci::backdrop{ background:rgba(0,0,0,.62); }
.smerci__boite{ padding:clamp(26px,4vw,40px); }
.smerci__coche{
  display:grid; place-items:center; width:56px; height:56px; margin:0 0 20px;
  border:2px solid var(--accent); border-radius:50%; color:var(--accent);
}
.smerci__titre{
  margin:0 0 12px;
  font-family:var(--font-display); font-weight:800; text-transform:uppercase;
  font-size:clamp(24px,3vw,32px); line-height:1.05; color:var(--fg);
}
.smerci__texte{ margin:0 0 20px; font-size:15px; line-height:1.6; color:var(--fg-2); }
.smerci__ref{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:12px;
  margin:0 0 10px; padding:12px 16px; border:1px solid var(--rule-2);
}
.smerci__reflabel{
  font-family:var(--font-sans); font-weight:700; font-size:11px;
  letter-spacing:var(--track-wide); text-transform:uppercase; color:var(--fg-3);
}
.smerci__refval{ font-family:var(--font-mono); font-size:16px; letter-spacing:.06em; color:var(--fg); }
.smerci__note{ margin:0 0 24px; font-size:13px; line-height:1.6; color:var(--fg-3); }

@media (prefers-reduced-motion:reduce){
  .sjoint a, .sjoint button, .sresume__lien{ transition:none; }
}