/* ═══════════════════════════════════════════════════════════════════════
   SCROLER — Page « Création de site web » · LE DEVIS
   ───────────────────────────────────────────────────────────────────────
   Suppose base.css, page.css puis site-web.css chargés avant.

   Troisième frère de la famille : mêmes gestes et même grammaire que
   .cm-devis (communication) et .ia-devis (intelligence artificielle).
   Un visiteur qui passe d'une page à l'autre doit reconnaître le même
   objet ; seul l'axe change — ici, le TYPE DE PROJET.

   Le type est un vrai groupe de boutons radio : sans JavaScript, tous
   les panneaux restent visibles et le formulaire reste envoyable. Avec
   JavaScript, seuls les champs du type choisi sont actifs — les autres
   sont `disabled`, donc jamais transmis.

   Préfixes retenus : .sw-devis, .sw-projets/.sw-projet, .sw-panneau,
   .sw-champs/.sw-champ, .sw-cases/.sw-case, .sw-pas, .sw-envoi,
   .sw-bilan, .sw-miel, .sw-consentement, .sw-oblig, .sw-erreur.
   Aucune ne figure dans site-web.css (vérifié) : pas de collision avec
   .sw-secteur, .sw-carte, .sw-pile, .sw-fiche & consorts.
   ═══════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════
   1. LE CADRE
   ═══════════════════════════════════════════════════════════════════════ */
.sw-devis { position: relative; }
.sw-devis__cadre {
  position: relative;
  padding: clamp(26px, 3.6vw, 54px);
  border: 1px solid var(--scr-bord);
  border-radius: 24px;
  background: linear-gradient(170deg, var(--scr-verre-2), rgba(23,18,15,.72));
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  overflow: hidden;
}
/* Halo orange derrière le formulaire : c'est la zone éclairée de la pièce */
.sw-devis__cadre::before {
  content: "";
  position: absolute;
  left: 50%; top: -180px;
  width: 620px; height: 420px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(233,78,26,.20), transparent 68%);
  pointer-events: none;
}
.sw-devis__cadre > * { position: relative; }

/* Le fil des trois étapes — repère de lecture, décoratif (aria-hidden) */
.sw-pas {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 26px;
  font-family: var(--scr-mono);
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(242,239,234,.62);
}
/* #FF7A4D et non le vif : sous le halo du cadre (orange à .20),
   #E94E1A retombe à 3,3:1 — l'orange clair y tient 4,8:1.        */
.sw-pas b { color: #FF7A4D; font-weight: 500; }
.sw-pas i { flex: 1 1 auto; height: 1px; background: rgba(242,239,234,.14); }

/* ═══════════════════════════════════════════════════════════════════════
   2. LES CHAMPS
   ═══════════════════════════════════════════════════════════════════════ */
.sw-champs { display: grid; gap: 20px; }
@media (min-width: 720px) { .sw-champs--2 { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.sw-champs--espace { margin-top: 20px; }

/* `align-content: start` : sans elle, un champ voisin plus haut (parce
   qu'il porte une ligne d'aide) étirerait la ligne et décalerait le
   contrôle vers le bas. Les deux colonnes restent alignées en tête. */
.sw-champ { display: grid; align-content: start; gap: 7px; }
.sw-champ > label {
  font-family: var(--scr-mono);
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--scr-on-night-soft);
}
.sw-champ > label .sw-oblig { color: var(--scr-orange); }
.sw-champ input,
.sw-champ select,
.sw-champ textarea {
  width: 100%;
  min-height: 50px;
  padding: 13px 16px;
  border: 1px solid rgba(242,239,234,.16);
  border-radius: 12px;
  /* Verre clair, PLUS clair que le panneau qui le porte : le champ se
     présente comme une surface qui attend la main, pas comme un puits. */
  background: rgba(242,239,234,.07);
  color: var(--scr-paper);
  font-family: var(--scr-font);
  font-weight: 300;
  font-size: 16px;               /* 16px : iOS ne zoome pas au focus */
  line-height: 1.5;
  transition: border-color .3s ease, background-color .3s ease, box-shadow .3s ease;
}
.sw-champ textarea { min-height: 128px; resize: vertical; }
.sw-champ select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 44px;
  background-image: linear-gradient(45deg, transparent 50%, rgba(242,239,234,.6) 50%),
                    linear-gradient(135deg, rgba(242,239,234,.6) 50%, transparent 50%);
  background-position: calc(100% - 22px) 22px, calc(100% - 16px) 22px;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}
/* Le menu déroulant natif emprunte les couleurs du système : sans cette
   ligne, du texte clair sur fond clair sur certains navigateurs.     */
.sw-champ select option { background: #17120F; color: var(--scr-paper); }
/* Le .48 des deux frères retombe à 4,24:1 sur le fond réel du champ
   (rgb 40 35 33, le verre clair composé sur le panneau). À .56, le
   texte composé vaut rgb 153 149 146 et le rapport monte à 5,2:1 ; au
   focus, où le champ s'éclaircit, il tient encore 4,9:1. Assez pâle
   pour rester un exemple, assez lisible pour être lu.             */
.sw-champ input::placeholder,
.sw-champ textarea::placeholder { color: rgba(242,239,234,.56); }
.sw-champ input:hover,
.sw-champ select:hover,
.sw-champ textarea:hover { border-color: rgba(242,239,234,.3); }
.sw-champ input:focus,
.sw-champ select:focus,
.sw-champ textarea:focus {
  /* Le focus ÉCLAIRE le champ : on écrit dans la lumière.
     `background-color` et non `background` : la forme courte remettrait
     `background-image` à `none` et effacerait la flèche du menu
     déroulant à l'instant précis où il reçoit le focus.           */
  background-color: rgba(242,239,234,.1);
  box-shadow: 0 0 0 4px rgba(233,78,26,.16);
}
.sw-champ__aide { font-size: 14px; line-height: 1.55; color: var(--scr-on-night-mute); }

/* État d'erreur : couleur ET texte, jamais la couleur seule */
.sw-champ input[aria-invalid="true"],
.sw-champ select[aria-invalid="true"],
.sw-champ textarea[aria-invalid="true"] { border-color: #FF7A4D; }
.sw-erreur {
  display: none;
  align-items: center;
  gap: 7px;
  font-size: 13.5px;
  color: #FFA98B;
}
.sw-erreur::before { content: "▲"; font-size: 9px; }
.sw-champ.is-erreur .sw-erreur { display: flex; }

/* ═══════════════════════════════════════════════════════════════════════
   3. LE SÉLECTEUR DE TYPE DE PROJET
   ═══════════════════════════════════════════════════════════════════════ */
.sw-projets {
  margin: 0 0 30px;
  padding: 0;
  border: 0;
}
.sw-projets > legend {
  padding: 0;
  margin-bottom: 14px;
  font-family: var(--scr-mono);
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--scr-on-night-soft);
}
.sw-projets__liste { display: flex; flex-wrap: wrap; gap: 9px; }
.sw-projet { position: relative; }
/* L'input reste dans le flux mais invisible : le focus clavier se voit
   sur le label grâce à `:focus-visible + label`.                      */
.sw-projet input {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip-path: inset(50%);
}
.sw-projet label {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 46px;
  padding: 11px 20px;
  border: 1px solid var(--scr-bord);
  border-radius: 999px;
  font-family: var(--scr-mono);
  font-size: 11.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--scr-on-night-soft);
  cursor: pointer;
  transition: transform .3s var(--scr-ease), border-color .3s ease, color .3s ease, background-color .3s ease;
}
.sw-projet label::before {
  content: "";
  flex: 0 0 auto;
  width: 7px; height: 7px;
  border-radius: 50%;
  border: 1px solid currentColor;
  transition: background-color .3s ease, box-shadow .3s ease;
}
.sw-projet label:hover { transform: translateY(-2px); border-color: var(--scr-orange); color: var(--scr-paper); }
.sw-projet input:checked + label {
  border-color: var(--scr-orange);
  background: rgba(233,78,26,.14);
  color: var(--scr-paper);
}
.sw-projet input:checked + label::before {
  background: var(--scr-orange);
  box-shadow: 0 0 10px rgba(233,78,26,.9);
}
.sw-projet input:focus-visible + label { outline: 3px solid var(--scr-orange); outline-offset: 3px; }

/* ═══════════════════════════════════════════════════════════════════════
   4. LE PANNEAU DE PROJET
   ═══════════════════════════════════════════════════════════════════════ */
.sw-panneau {
  margin: 0 0 26px;
  padding: clamp(20px, 2.4vw, 30px);
  border: 1px solid var(--scr-bord);
  border-left: 2px solid var(--scr-orange);
  border-radius: 4px 18px 18px 4px;
  background: rgba(23,18,15,.45);
}
.sw-panneau[hidden] { display: none; }
/* Le bloc de coordonnées n'appartient à aucun type de projet : il reste
   affiché quel que soit le choix, d'où le liseré neutre.            */
.sw-panneau--commun { border-left-color: rgba(242,239,234,.2); }
.js .sw-panneau.is-swap { animation: swBascule .5s var(--scr-ease); transform-origin: 0 50%; }
@keyframes swBascule {
  from { opacity: 0; transform: translateX(-10px); }
  to   { opacity: 1; transform: none; }
}
.sw-panneau > legend {
  margin: 0 0 6px;
  padding: 0;
  font-family: var(--scr-mono);
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--scr-orange);
}
.sw-panneau__phrase { margin: 0 0 18px; font-size: 15.5px; line-height: 1.6; color: var(--scr-on-night-soft); }

/* Cases à cocher : de vraies cibles (44 px), pas des puces décoratives */
.sw-cases { display: flex; flex-wrap: wrap; gap: 9px; }
.sw-case { position: relative; }
.sw-case input {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip-path: inset(50%);
}
.sw-case label {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  padding: 10px 17px;
  border: 1px solid rgba(242,239,234,.16);
  border-radius: 12px;
  font-size: 14.5px;
  color: var(--scr-on-night-soft);
  cursor: pointer;
  transition: border-color .3s ease, color .3s ease, background-color .3s ease;
}
.sw-case label::before {
  content: "";
  flex: 0 0 auto;
  width: 15px; height: 15px;
  border: 1px solid rgba(242,239,234,.4);
  border-radius: 4px;
  transition: background-color .25s ease, border-color .25s ease;
}
.sw-case label:hover { border-color: rgba(233,78,26,.55); color: var(--scr-paper); }
.sw-case input:checked + label {
  border-color: var(--scr-orange);
  background: rgba(233,78,26,.12);
  color: var(--scr-paper);
}
.sw-case input:checked + label::before {
  background: var(--scr-orange) linear-gradient(transparent, transparent);
  border-color: var(--scr-orange);
  box-shadow: inset 0 0 0 2px rgba(23,18,15,.8);
}
.sw-case input:focus-visible + label { outline: 3px solid var(--scr-orange); outline-offset: 3px; }

/* ═══════════════════════════════════════════════════════════════════════
   5. CONSENTEMENT, POT DE MIEL, ENVOI, RÉPONSES
   ═══════════════════════════════════════════════════════════════════════ */
.sw-consentement {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-top: 4px;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--scr-on-night-soft);
}
/* La case est enveloppée dans un .sw-champ : sans ces remises à zéro,
   elle hériterait du gabarit des champs de saisie (50 px de haut,
   13 px de renfoncement) et s'afficherait en rectangle vertical.

   Le DESSIN garde les 20 px de la famille, mais la CIBLE fait 44 px :
   les marges négatives font déborder la zone sensible dans la marge du
   panneau sans déplacer d'un pixel ce que l'œil voit. Un contrôle
   natif ne sait pas avoir de cible plus grande que son dessin, d'où le
   `appearance: none` et la case redessinée en ::before — même idiome
   que .sw-case plus haut (carré plein, anneau sombre en creux).
   Le mode couleurs forcées rend la main au contrôle natif (§ 6).  */
.sw-consentement input {
  appearance: none;
  -webkit-appearance: none;
  flex: 0 0 auto;
  display: grid;
  place-content: center;
  box-sizing: border-box;
  width: 44px; height: 44px;
  min-height: 0;
  margin: -10px -12px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  cursor: pointer;
}
.sw-consentement input::before {
  content: "";
  width: 20px; height: 20px;
  border: 1px solid rgba(242,239,234,.4);
  border-radius: 5px;
  transition: background-color .25s ease, border-color .25s ease;
}
.sw-consentement input:hover::before { border-color: rgba(233,78,26,.55); }
.sw-consentement input:checked::before {
  background: var(--scr-orange);
  border-color: var(--scr-orange);
  box-shadow: inset 0 0 0 3px rgba(23,18,15,.85);
}
/* Le champ de saisie s'éclaire au focus ; la case, elle, n'a pas de
   fond à éclairer — sans ces deux remises à zéro, la règle commune
   peindrait un rectangle de 44 px et son halo autour du dessin.   */
.sw-consentement input:focus { background-color: transparent; box-shadow: none; }
.sw-consentement input:focus-visible { outline: 3px solid var(--scr-orange); outline-offset: -8px; }
/* La bordure rouge de l'état d'erreur passe au dessin : l'élément
   lui-même n'a plus de bordure à colorer.                        */
.sw-consentement input[aria-invalid="true"]::before { border-color: #FF7A4D; }
.sw-consentement a { color: var(--scr-orange); }
.sw-consentement .sw-oblig { color: var(--scr-orange); }

/* Pot de miel : invisible pour l'humain, tentant pour le robot. */
.sw-miel {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

.sw-envoi {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px 26px;
  margin-top: 30px;
  padding-top: 26px;
  border-top: 1px solid var(--scr-bord);
}
.sw-envoi .scr-btn { flex: 0 0 auto; }
.sw-envoi__rassure {
  margin: 0;
  padding: 8px 18px;
  border: 1px solid var(--scr-bord);
  border-radius: 999px;
  background: var(--scr-verre-1);
  font-family: var(--scr-mono);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(242,239,234,.62);
}

/* Récapitulatif d'erreurs, en tête du formulaire. role="alert" et
   tabindex="-1" sont posés dans le HTML ; le script y met le focus. */
.sw-bilan {
  margin: 0 0 22px;
  padding: 16px 20px;
  border: 1px solid rgba(255,122,77,.5);
  border-radius: 12px;
  background: rgba(255,122,77,.08);
  font-size: 15px;
  line-height: 1.6;
  color: #FFC3AC;
}
.sw-bilan[hidden] { display: none; }
.sw-bilan p { margin: 0; }
.sw-bilan ul { margin: 8px 0 0; padding-left: 20px; }
.sw-bilan a { color: inherit; }

/* ═══════════════════════════════════════════════════════════════════════
   6. PRÉFÉRENCES SYSTÈME
   ═══════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  /* La bascule de panneau perd son animation : le panneau apparaît, net. */
  .js .sw-panneau.is-swap { animation: none; }
  .sw-projet label:hover { transform: none; }
  .sw-projet label,
  .sw-case label,
  .sw-consentement input::before,
  .sw-champ input,
  .sw-champ select,
  .sw-champ textarea { transition: none; }
}

@media (forced-colors: active) {
  .sw-devis__cadre::before { display: none; }
  .sw-projet input:checked + label,
  .sw-case input:checked + label { border: 3px solid ButtonText; }
  /* La case de consentement redevient un contrôle natif : un dessin
     maison en ::before ne serait plus visible ici. La cible retombe
     à 20 px, mais son libellé reste cliquable sur toute la ligne. */
  .sw-consentement input {
    appearance: auto;
    -webkit-appearance: auto;
    width: 20px; height: 20px;
    margin: 2px 0 0;
  }
  .sw-consentement input::before { display: none; }
}

@media print {
  .sw-devis__cadre { background: #fff; color: #000; border-color: #999; }
  .sw-devis__cadre::before { display: none; }
  .sw-panneau { background: #fff; border-color: #999; }
  .sw-panneau > legend { color: #000; }
  .sw-panneau__phrase, .sw-champ__aide { color: #222; }
  .sw-champ input, .sw-champ select, .sw-champ textarea { background: #fff; color: #000; border-color: #999; }
}