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

   Le formulaire commun aux quatre pages : même objet que .ct-devis
   (contact), .cm-devis (communication) et .ia-devis (intelligence
   artificielle). Un visiteur qui passe d'une page à l'autre retrouve
   les mêmes champs, dans le même ordre ; seul le questionnaire replié
   change — ici, le TYPE DE PROJET.

   Au premier regard : trois tuiles de pôle cumulables, le message, le
   nom, l'e-mail, l'accord. Le reste attend dans un <details> natif.

   Le type est un vrai groupe de boutons radio, sans choix d'avance.
   Sans JavaScript, :has() n'affiche que le panneau du choix coché
   (§ 8) ; sans :has(), tous s'affichent. Avec JavaScript, seuls les
   champs du type choisi sont actifs — les autres sont `disabled`, donc
   jamais transmis.

   Préfixes retenus : .sw-devis, .sw-mention, .sw-poles/.sw-pole,
   .sw-plus, .sw-projets/.sw-projet, .sw-panneau, .sw-champs/.sw-champ,
   .sw-cases/.sw-case, .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(var(--scr-matiere-rgb),.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; }

/* Les fieldsets du formulaire perdent le cadre natif : seuls les
   panneaux de projet en gardent un, le leur. `:where` ramène la règle
   à une spécificité nulle, pour que .sw-panneau reprenne la main.
   `min-width: 0` : sans lui, un fieldset s'élargit à son contenu et
   pousse la page de côté sur mobile.                                */
:where(.sw-form fieldset) { margin: 0; padding: 0; border: 0; min-width: 0; }

/* « * = obligatoire », dit une fois, en tête : le chemin le plus court
   (nom, e-mail, accord) se voit avant le premier champ.             */
.sw-mention { margin: 0 0 20px; font-size: 14px; line-height: 1.5; color: var(--scr-on-night-mute); }
.sw-mention .sw-oblig { color: var(--scr-orange); }

/* ═══════════════════════════════════════════════════════════════════════
   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; }
/* Les questions se lisent comme des questions : police de texte, casse
   normale. La capitale mono reste aux étiquettes (surtitre, pastille). */
.sw-champ > label {
  font-family: var(--scr-font);
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--scr-on-night);
}
.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(var(--scr-encre-rgb),.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(var(--scr-encre-rgb),.07);
  color: var(--scr-on-night);
  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(var(--scr-encre-rgb),.6) 50%),
                    linear-gradient(135deg, rgba(var(--scr-encre-rgb),.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. Le
   jeton matière suit seul le thème clair ; les intitulés de groupe du
   budget (optgroup) prennent le même fond, sans l'italique natif.   */
.sw-champ optgroup,
.sw-champ option { background: rgb(var(--scr-matiere-rgb)); color: var(--scr-on-night); font-style: normal; }
/* 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: var(--scr-on-night-faint); }
.sw-champ input:hover,
.sw-champ select:hover,
.sw-champ textarea:hover { border-color: rgba(var(--scr-encre-rgb),.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(var(--scr-encre-rgb),.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. LES PÔLES — trois tuiles cumulables
   ───────────────────────────────────────────────────────────────────────
   Le dessin des tuiles de .ct-poles (contact), avec un repère CARRÉ :
   ce sont des cases à cocher, plusieurs choix restent possibles.
   ═══════════════════════════════════════════════════════════════════════ */
.sw-poles { margin: 0 0 26px; }
.sw-poles > legend {
  padding: 0;
  margin-bottom: 14px;
  font-family: var(--scr-font);
  font-size: 17px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--scr-on-night);
}
.sw-poles__aide { margin: -6px 0 12px; font-size: 14px; color: var(--scr-on-night-mute); }
.sw-poles__liste { display: grid; gap: 10px; }
@media (min-width: 760px) { .sw-poles__liste { grid-template-columns: repeat(3, minmax(0,1fr)); } }
.sw-pole { position: relative; }
/* L'input reste dans le flux mais invisible : le focus clavier se voit
   sur le label grâce à `:focus-visible + label`.                      */
.sw-pole input {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip-path: inset(50%);
}
.sw-pole label {
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 58px;
  height: 100%;
  padding: 14px 22px;
  border: 1px solid var(--scr-bord);
  border-radius: 16px;
  background: rgba(var(--scr-matiere-rgb),.35);
  font-family: var(--scr-font);
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  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-pole label::before {
  content: "";
  flex: 0 0 auto;
  width: 11px; height: 11px;
  border-radius: 3px;
  border: 1px solid currentColor;
  transition: background-color .3s ease;
}
.sw-pole label:hover { transform: translateY(-2px); border-color: var(--scr-orange); color: var(--scr-on-night); }
.sw-pole input:checked + label {
  border-color: var(--scr-orange);
  background: color-mix(in srgb, var(--scr-orange) 16%, transparent);
  color: var(--scr-on-night);
}
.sw-pole input:checked + label::before { background: var(--scr-orange); }
.sw-pole input:focus-visible + label { outline: 3px solid var(--scr-orange); outline-offset: 3px; }

/* ═══════════════════════════════════════════════════════════════════════
   4. LE REPLI — « Ajouter des précisions »
   ───────────────────────────────────────────────────────────────────────
   Un <details> natif : il s'ouvre au clavier sans script. Le triangle
   du navigateur cède la place au chevron de la maison, en ::after.
   ═══════════════════════════════════════════════════════════════════════ */
.sw-plus { margin: 26px 0 0; border-top: 1px solid var(--scr-bord); border-bottom: 1px solid var(--scr-bord); }
.sw-plus > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 56px;
  padding: 14px 4px;
  cursor: pointer;
  list-style: none;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--scr-on-night);
  transition: color .3s ease;
}
.sw-plus > summary::-webkit-details-marker { display: none; }
.sw-plus > summary:hover { color: var(--scr-orange); }
.sw-plus > summary:focus-visible { outline: 3px solid var(--scr-orange); outline-offset: 2px; border-radius: 6px; }
.sw-plus > summary::after {
  content: "";
  flex: 0 0 auto;
  width: 10px; height: 10px;
  border-right: 1.5px solid var(--scr-orange);
  border-bottom: 1.5px solid var(--scr-orange);
  transform: rotate(45deg) translate(-3px, -3px);
  transition: transform .35s var(--scr-ease);
}
.sw-plus[open] > summary::after { transform: rotate(225deg) translate(-3px, -3px); }
.sw-plus__quoi { display: block; margin-top: 3px; font-size: 14px; color: var(--scr-on-night-mute); }
.sw-plus__corps { padding: 6px 0 24px; }
/* Le questionnaire propre à la page, sous le bloc commun. */
.sw-plus__detail { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--scr-bord); }

/* ═══════════════════════════════════════════════════════════════════════
   5. LE SÉLECTEUR DE TYPE DE PROJET
   ═══════════════════════════════════════════════════════════════════════ */
.sw-projets > legend {
  padding: 0;
  margin-bottom: 14px;
  font-family: var(--scr-font);
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--scr-on-night);
}
.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-font);
  font-size: 15px;
  letter-spacing: 0;
  text-transform: none;
  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-on-night); }
.sw-projet input:checked + label {
  border-color: var(--scr-orange);
  background: rgba(233,78,26,.14);
  color: var(--scr-on-night);
}
.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; }

/* ═══════════════════════════════════════════════════════════════════════
   6. LE PANNEAU DE PROJET
   ═══════════════════════════════════════════════════════════════════════ */
/* L'écart est porté par le haut du panneau : sans choix, aucun panneau,
   et le repli se referme juste sous les pastilles.                  */
.sw-panneau {
  margin: 22px 0 0;
  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(var(--scr-matiere-rgb),.45);
}
.sw-panneau[hidden] { display: none; }
.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-font);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  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(var(--scr-encre-rgb),.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(var(--scr-encre-rgb),.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-on-night); }
.sw-case input:checked + label {
  border-color: var(--scr-orange);
  background: rgba(233,78,26,.12);
  color: var(--scr-on-night);
}
.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(var(--scr-matiere-rgb),.8);
}
.sw-case input:focus-visible + label { outline: 3px solid var(--scr-orange); outline-offset: 3px; }

/* ═══════════════════════════════════════════════════════════════════════
   7. 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 (§ 9).  */
.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(var(--scr-encre-rgb),.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(var(--scr-matiere-rgb),.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: var(--scr-on-night-faint);
}

/* 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; }

/* ═══════════════════════════════════════════════════════════════════════
   8. SANS JAVASCRIPT
   ───────────────────────────────────────────────────────────────────────
   <html> garde sa classe `no-js` tant que le script en ligne du <head>
   ne l'a pas remplacée par `js`. Le CSS fait alors la bascule seul :
   aucun panneau sans choix, puis celui du type coché. Un navigateur
   sans :has() ignore le bloc entier et montre les sept panneaux —
   c'est sans risque, chaque champ porte un nom qui lui est propre.
   ═══════════════════════════════════════════════════════════════════════ */
@supports selector(:has(*)) {
  .no-js .sw-panneau[data-projet] { display: none; }
  .no-js .sw-form:has(#pj-vitrine:checked) .sw-panneau[data-projet="vitrine"],
  .no-js .sw-form:has(#pj-boutique:checked) .sw-panneau[data-projet="boutique"],
  .no-js .sw-form:has(#pj-plateforme:checked) .sw-panneau[data-projet="plateforme"],
  .no-js .sw-form:has(#pj-metier:checked) .sw-panneau[data-projet="metier"],
  .no-js .sw-form:has(#pj-refonte:checked) .sw-panneau[data-projet="refonte"],
  .no-js .sw-form:has(#pj-multilingue:checked) .sw-panneau[data-projet="multilingue"],
  .no-js .sw-form:has(#pj-flou:checked) .sw-panneau[data-projet="flou"] { display: block; }
}

/* ═══════════════════════════════════════════════════════════════════════
   9. 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,
  .sw-pole label:hover { transform: none; }
  .sw-plus > summary::after { transition: none; }
  .sw-projet label,
  .sw-pole 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-pole 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; }
  .sw-plus > summary::after { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════════
   THÈME CLAIR — le formulaire sur la table de jour
   ───────────────────────────────────────────────────────────────────────
   Le cadre devient une feuille (jetons verre + matière), posée avec une
   ombre chaude. Les champs sont PLUS BLANCS que la feuille : même idée
   que la nuit — une surface qui attend la main — et le focus les
   éclaire encore. Les oranges éclaircis pour la nuit (#FF7A4D, #FFA98B,
   #FFC3AC) sont illisibles sur le papier : ils passent aux oranges de
   jour. Les cases à cocher (consentement, besoins) sont exclues des
   règles de fond : leur dessin vit dans ::before.                     */
:root[data-theme="light"] .sw-devis__cadre { box-shadow: 0 30px 70px -40px rgba(60,35,20,.30); }
/* Le halo de nuit, à .20, virait la tête de la feuille au saumon. */
:root[data-theme="light"] .sw-devis__cadre::before {
  background: radial-gradient(ellipse at center, rgba(233,78,26,.10), transparent 68%);
}

:root[data-theme="light"] .sw-champ input:not([type="checkbox"]),
:root[data-theme="light"] .sw-champ select,
:root[data-theme="light"] .sw-champ textarea { background-color: rgba(255,255,255,.82); }
:root[data-theme="light"] .sw-champ input:not([type="checkbox"]):focus,
:root[data-theme="light"] .sw-champ select:focus,
:root[data-theme="light"] .sw-champ textarea:focus { background-color: #fff; }
:root[data-theme="light"] .sw-champ input[aria-invalid="true"],
:root[data-theme="light"] .sw-champ select[aria-invalid="true"],
:root[data-theme="light"] .sw-champ textarea[aria-invalid="true"],
:root[data-theme="light"] .sw-consentement input[aria-invalid="true"]::before { border-color: var(--scr-orange); }
:root[data-theme="light"] .sw-erreur { color: var(--scr-orange-d); }   /* 6:1 sur la feuille */

:root[data-theme="light"] .sw-projet input:checked + label::before { box-shadow: 0 0 6px rgba(233,78,26,.4); }

:root[data-theme="light"] .sw-bilan {
  border-color: rgba(193,61,18,.45);
  background: rgba(193,61,18,.06);
  color: var(--scr-orange-d);
}