/* ================================================================
   ARSÕLYA — Demande de devis
   Écran partagé : panneau ivoire/taupe à gauche (identité de marque,
   texture minérale discrète, sans photo), formulaire vertical à droite
   en 3 sections (Votre projet · Quelques détails · Vos coordonnées).
   Portée sous body[data-page="devis"] — aucune ressource externe.
   Tailles : calc(N * var(--k)) avec --k = 0,86 × --u (voir docs/responsive.md).
   ================================================================ */

body[data-page="devis"] {
  --ink: #0b0d10;
  --ink-soft: rgba(11,13,16,.68);
  --ink-faint: rgba(11,13,16,.62);
  --dark: #2b2b2b;
  --panel: #f3f3f3;
  --side-bg: #e7e7e7;
  --paper: #fdfdfd;
  --bronze: #8c8c8c;
  --line: rgba(11,13,16,.2);
  --line-soft: rgba(11,13,16,.14);
  --serif: "Times New Roman", Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --ease: cubic-bezier(.22,1,.36,1);
  --k: calc(var(--u) * .86); /* échelle propre à la page (1 = tailles de la maquette) */
  background: var(--panel);
  color: var(--ink);
}
body[data-page="devis"] main#MainContent { background: transparent; }
body[data-page="devis"] .arsolya-legal-footer { display: none !important; }

/* La barre du haut reste pleine : elle couvre les deux panneaux (l'un
   sombre, l'autre clair), le texte doit donc rester lisible sur les deux.
   C'est devenu la règle générale (css/style.css) : on garde la règle pour
   la mémoire du cas, sans doubler le filet du bas. */
body[data-page="devis"] .ars-header {
  background: var(--ars-header-solid);
}

.dv * { box-sizing: border-box; }
.dv {
  font-family: var(--sans); -webkit-font-smoothing: antialiased;
  margin-top: var(--ars-header-height);
  min-height: calc(100dvh - var(--ars-header-height));
  display: grid; grid-template-columns: minmax(0, 33%) minmax(0, 1fr);
}

/* ── Panneau ivoire/taupe : identité de marque, texture minérale discrète ── */
.dv-side {
  position: sticky; top: var(--ars-header-height); align-self: start; min-width: 0;
  height: calc(100dvh - var(--ars-header-height)); overflow: hidden; isolation: isolate;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: calc(56 * var(--k)) calc(44 * var(--k));
  color: var(--ink);
  background: var(--side-bg);
  border-right: 1px solid var(--line);
}
.dv-grain { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; opacity: .045; }
.dv-wave { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; opacity: .5; }
.dv-side-top { position: relative; z-index: 1; }
.dv-kicker {
  margin: 0; font-size: calc(12 * var(--k)); letter-spacing: .3em; text-transform: uppercase;
  color: var(--ink-faint); font-weight: 500;
}
.dv-h1 {
  font-family: var(--serif); font-weight: 400;
  font-size: calc(40 * var(--k)); line-height: 1.12; letter-spacing: -.005em;
  margin: calc(22 * var(--k)) 0 calc(20 * var(--k)); color: var(--ink);
}
.dv-side-lead { margin: 0; font-size: calc(16 * var(--k)); line-height: 1.55; color: var(--ink-soft); max-width: 22em; }
.dv-side-foot {
  position: relative; z-index: 1; padding-top: calc(20 * var(--k)); border-top: 1px solid var(--line);
}
.dv-side-foot-q { margin: 0 0 calc(4 * var(--k)); font-size: calc(14 * var(--k)); color: var(--ink-soft); }
.dv-side-foot a { font-size: calc(14 * var(--k)); color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }

/* ── Panneau formulaire ──
   Rythme vertical en clamp(px, vh, k) : se resserre sur un écran bas
   (objectif : tout le formulaire tient dans la hauteur visible, sans
   défilement) et retrouve les proportions --k sur un écran haut. */
.dv-main {
  background: var(--panel); min-width: 0;
  padding: clamp(6px, 1.4vh, calc(16 * var(--k))) calc(48 * var(--k)) clamp(6px, 1.4vh, calc(16 * var(--k))) calc(56 * var(--k));
  display: flex; flex-direction: column; justify-content: center;
  min-height: calc(100dvh - var(--ars-header-height));
}
.dv-title {
  font-family: var(--serif); font-weight: 400; font-size: clamp(20px, 3.2vh, calc(30 * var(--k))); line-height: 1.08;
  letter-spacing: -.01em; margin: 0 0 clamp(2px, .5vh, calc(6 * var(--k)));
}
.dv-sub { margin: 0; font-size: calc(13 * var(--k)); line-height: 1.3; color: var(--ink-soft); }

/* ── Particulier / Professionnel ── */
.dv-audience {
  display: inline-flex; margin-top: clamp(6px, 1.2vh, calc(14 * var(--k)));
  border: 1px solid var(--line); border-radius: calc(4 * var(--k)); overflow: hidden;
}
.dv-audience-btn {
  font-family: var(--sans); font-size: calc(12.5 * var(--k)); font-weight: 500; color: var(--ink-soft);
  background: var(--paper); border: 0; cursor: pointer;
  padding: clamp(5px, .8vh, calc(9 * var(--k))) calc(18 * var(--k));
  transition: background .25s var(--ease), color .25s var(--ease);
}
.dv-audience-btn + .dv-audience-btn { border-left: 1px solid var(--line); }
.dv-audience-btn.is-active { background: var(--dark); color: #fff; }
.dv-audience-btn:focus-visible { outline: 2px solid var(--bronze); outline-offset: -2px; }

/* ── Sections empilées verticalement (ordre 01 · 02 · 03) ── */
.dv-sec { border: 0; margin: 0; padding: 0; min-width: 0; max-width: calc(860 * var(--k)); }
.dv-form { margin-top: clamp(3px, .7vh, calc(12 * var(--k))); min-width: 0; }
.dv-form > .dv-sec + .dv-sec { margin-top: clamp(3px, .7vh, calc(12 * var(--k))); }

.dv-sec-h {
  padding: 0; display: flex; align-items: center; gap: calc(16 * var(--k));
  font-family: var(--serif); font-size: calc(16 * var(--k)); line-height: 1.2; color: var(--ink);
  margin-bottom: clamp(2px, .5vh, calc(7 * var(--k))); float: left; width: 100%;
}
.dv-sec-h::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--line); }
.dv-sec-h ~ * { clear: both; }
.dv-n { color: var(--bronze); font-size: calc(16 * var(--k)); flex: 0 0 auto; }

.dv-field { margin-bottom: clamp(2px, .45vh, calc(6 * var(--k))); }
.dv-label { display: block; font-size: calc(13 * var(--k)); font-weight: 500; color: var(--ink); margin-bottom: calc(5 * var(--k)); }
.dv-req-mark { color: var(--ink-soft); font-weight: 600; }
.dv-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 calc(16 * var(--k)); }
.dv-row3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0 calc(16 * var(--k)); }

/* Champs Professionnel fusionnés dans les lignes existantes (Lieu +
   Type d'établissement ; Société + Prénom + Nom) plutôt qu'ajoutés en
   lignes propres : le formulaire garde exactement la même hauteur en
   mode Particulier et Professionnel, condition du verrou sans défilement
   ci-dessous (voir « Vue unique »). */
.dv-row-lieu { grid-template-columns: 1fr; }
.dv-row-identity { grid-template-columns: 1fr 1fr; }
@media (min-width: 961px) {
  body[data-page="devis"].dv-is-pro .dv-row-lieu { grid-template-columns: 1fr 1fr; }
  body[data-page="devis"].dv-is-pro .dv-row-identity { grid-template-columns: 1fr 1fr 1fr; }
}

.dv-input {
  display: block; width: 100%; font-family: var(--sans); font-size: calc(14 * var(--k)); color: var(--ink);
  background: var(--paper); border: 1px solid var(--line); border-radius: calc(3 * var(--k));
  padding: clamp(4px, .7vh, calc(8 * var(--k))) calc(15 * var(--k)); outline: none; -webkit-appearance: none; appearance: none;
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.dv-input::placeholder { color: rgba(11,13,16,.58); }
.dv-input:focus { border-color: var(--dark); box-shadow: 0 0 0 calc(3 * var(--k)) rgba(47,42,39,.09); }
.dv-input.is-bad { border-color: #a5432f; }
.dv-textarea { min-height: clamp(20px, 2.6vh, calc(36 * var(--k))); resize: vertical; line-height: 1.3; }
.dv-select { position: relative; }
.dv-select select { padding-right: calc(44 * var(--k)); cursor: pointer; }
.dv-select select.is-empty { color: rgba(11,13,16,.58); }
.dv-select svg { position: absolute; right: calc(15 * var(--k)); top: 50%; width: calc(18 * var(--k)); height: calc(18 * var(--k)); margin-top: calc(-9 * var(--k)); pointer-events: none; color: var(--ink-soft); }

/* Revêtement : pastilles (radios masqués) — 3 colonnes, sur deux lignes (5 choix) */
.dv-chips { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(8 * var(--k)); }
.dv-chip { position: relative; cursor: pointer; }
.dv-chip input, .dv-radio input, .dv-check input, .dv-file {
  position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none;
}
.dv-chip span {
  display: block; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-size: calc(13 * var(--k)); color: var(--ink-soft);
  padding: clamp(4px, .7vh, calc(8 * var(--k))) calc(8 * var(--k));
  background: var(--paper); border: 1px solid var(--line); border-radius: calc(3 * var(--k));
  transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.dv-chip:hover span { border-color: var(--dark); color: var(--ink); }
.dv-chip input:checked + span { background: var(--dark); border-color: var(--dark); color: #fff; }
.dv-chip input:focus-visible + span { outline: 2px solid var(--bronze); outline-offset: 2px; }

/* Intérieur / Extérieur */
.dv-radios { display: flex; gap: calc(24 * var(--k)); margin: 0 0 clamp(2px, .45vh, calc(6 * var(--k))); }
.dv-radio { position: relative; display: inline-flex; align-items: center; gap: calc(10 * var(--k)); cursor: pointer; font-size: calc(14 * var(--k)); }
.dv-radio i {
  width: calc(19 * var(--k)); height: calc(19 * var(--k)); border-radius: 50%; flex-shrink: 0;
  border: 1.5px solid var(--ink-faint); background: var(--paper); display: grid; place-items: center;
  transition: border-color .2s var(--ease);
}
.dv-radio i::after { content: ""; width: calc(10 * var(--k)); height: calc(10 * var(--k)); border-radius: 50%; background: var(--dark); transform: scale(0); transition: transform .2s var(--ease); }
.dv-radio input:checked + i { border-color: var(--dark); }
.dv-radio input:checked + i::after { transform: scale(1); }
.dv-radio input:focus-visible + i { outline: 2px solid var(--bronze); outline-offset: 2px; }

/* Ajout de photos */
.dv-upload {
  position: relative; display: flex; align-items: center; justify-content: center; gap: calc(14 * var(--k));
  padding: clamp(4px, .8vh, calc(9 * var(--k))) calc(18 * var(--k)); cursor: pointer; color: var(--ink);
  border: 1.5px dashed rgba(11,13,16,.28); border-radius: calc(3 * var(--k)); background: rgba(253,252,250,.6);
  transition: border-color .25s var(--ease), background .25s var(--ease);
}
.dv-upload:hover, .dv-upload.is-over { border-color: var(--dark); background: var(--paper); }
.dv-upload:has(.dv-file:focus-visible) { outline: 2px solid var(--bronze); outline-offset: 2px; }
.dv-upload > svg { width: calc(24 * var(--k)); height: calc(24 * var(--k)); flex-shrink: 0; }
.dv-upload-t b { display: block; font-size: calc(14 * var(--k)); font-weight: 500; }
.dv-upload-t small { display: block; margin-top: calc(2 * var(--k)); font-size: calc(11.5 * var(--k)); color: var(--ink-faint); }
.dv-files { list-style: none; margin: calc(8 * var(--k)) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: calc(10 * var(--k)); }
.dv-files:empty { display: none; }
.dv-files li { position: relative; width: calc(48 * var(--k)); height: calc(48 * var(--k)); border-radius: calc(3 * var(--k)); overflow: hidden; border: 1px solid var(--line); background: var(--paper); }
.dv-files img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dv-files button {
  position: absolute; top: calc(3 * var(--k)); right: calc(3 * var(--k)); width: calc(20 * var(--k)); height: calc(20 * var(--k));
  border: 0; border-radius: 50%; background: rgba(11,13,16,.72); color: #fff; cursor: pointer; padding: 0;
  font-size: calc(14 * var(--k)); line-height: 1; display: grid; place-items: center;
}
/* Pièce jointe PDF (pas d'aperçu image possible) */
.dv-files li.is-pdf { display: grid; place-items: center; background: var(--paper); }
.dv-files-ext { font-size: calc(11 * var(--k)); font-weight: 700; letter-spacing: .04em; color: var(--ink-soft); }
/* Photo en cours de traitement (compression côté navigateur avant envoi) */
.dv-files li.is-processing { display: grid; place-items: center; background: var(--paper); }
.dv-files li.is-processing::after {
  content: ""; width: calc(20 * var(--k)); height: calc(20 * var(--k)); border-radius: 50%;
  border: 2px solid var(--line); border-top-color: var(--ink-soft); animation: dvSpin .8s linear infinite;
}
@keyframes dvSpin { to { transform: rotate(360deg); } }

/* Consentement */
.dv-check { position: relative; display: flex; align-items: flex-start; gap: calc(10 * var(--k)); cursor: pointer; margin: 0 0 clamp(3px, .7vh, calc(8 * var(--k))); font-size: calc(11.5 * var(--k)); line-height: 1.3; color: var(--ink-soft); }
.dv-check i {
  flex-shrink: 0; width: calc(20 * var(--k)); height: calc(20 * var(--k)); border-radius: calc(3 * var(--k)); margin-top: calc(1 * var(--k));
  border: 1.5px solid var(--ink-faint); background: var(--paper); color: #fff; display: grid; place-items: center;
  transition: background .2s var(--ease), border-color .2s var(--ease);
}
.dv-check i svg { width: calc(13 * var(--k)); height: calc(13 * var(--k)); opacity: 0; }
.dv-check input:checked + i { background: var(--dark); border-color: var(--dark); }
.dv-check input:checked + i svg { opacity: 1; }
.dv-check input:focus-visible + i { outline: 2px solid var(--bronze); outline-offset: 2px; }
.dv-check.is-bad i { border-color: #a5432f; }
.dv-check a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }

.dv-btn {
  display: flex; width: 100%; align-items: center; justify-content: center; gap: calc(14 * var(--k));
  font-family: var(--sans); font-size: calc(12 * var(--k)); letter-spacing: .14em; text-transform: uppercase; font-weight: 600; white-space: nowrap;
  color: #fff; background: var(--dark); border: 1px solid var(--dark); border-radius: calc(3 * var(--k));
  padding: clamp(5px, .6vh, calc(10 * var(--k))) calc(16 * var(--k)); cursor: pointer;
  transition: background .35s var(--ease), color .35s var(--ease), opacity .3s var(--ease);
}
.dv-btn:hover:not(:disabled) { background: transparent; color: var(--dark); }
.dv-btn:disabled { opacity: .45; cursor: default; }
.dv-btn .a { font-size: calc(16 * var(--k)); letter-spacing: 0; transition: transform .35s var(--ease); }
.dv-btn:hover:not(:disabled) .a { transform: translateX(calc(4 * var(--k))); }
.dv-msg { min-height: calc(6 * var(--k)); margin: calc(2 * var(--k)) 0 0; font-size: calc(11.5 * var(--k)); color: #a5432f; }
.dv-foot-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: calc(20 * var(--k));
  margin-top: clamp(3px, .6vh, calc(9 * var(--k))); flex-wrap: wrap;
}
.dv-req { margin: 0; font-size: calc(12.5 * var(--k)); color: var(--ink-soft); }
.dv-followup { margin: 0; font-size: calc(12.5 * var(--k)); color: var(--ink-faint); text-align: right; }

/* ── Responsive ── */
@media (max-width: 960px) {
  .dv { grid-template-columns: 1fr; min-height: 0; }
  .dv-side { position: relative; top: auto; height: auto; padding: 40px 24px 32px; border-right: 0; border-bottom: 1px solid var(--line); }
  .dv-h1 { font-size: 32px; margin: 14px 0 12px; }
  .dv-kicker { font-size: 11px; }
  .dv-main { padding: 34px 20px 44px; }
  .dv-title { font-size: 30px; }
  .dv-sub { font-size: 15px; }
  .dv-audience-btn { font-size: 14px; padding: 10px 18px; }
  .dv-form { margin-top: 26px; }
  .dv-form > .dv-sec + .dv-sec { margin-top: 28px; }
  .dv-sec-h, .dv-n { font-size: 22px; }
  .dv-label { font-size: 14px; }
  .dv-input { font-size: 16px; padding: 13px 14px; }
  .dv-chip span { font-size: 14px; padding: 12px 14px; }
  .dv-radio { font-size: 15px; }
  .dv-check, .dv-req, .dv-followup { font-size: 13.5px; }
  .dv-btn { font-size: 12.5px; padding: 18px 20px; }
}
/* Mobile : introduction raccourcie, une seule colonne */
@media (max-width: 640px) {
  .dv-side-lead { display: none; }
}
@media (max-width: 520px) {
  .dv-chips { grid-template-columns: 1fr 1fr; }
  .dv-radios { flex-wrap: wrap; row-gap: 12px; }
  .dv-row2, .dv-row3 { grid-template-columns: 1fr; }
  .dv-upload { padding: 18px 14px; }
}
@media (max-width: 960px) {
  /* En mode Professionnel, la ligne Société + Prénom + Nom s'empile
     proprement (1 colonne) plutôt que de déborder sur une 2e rangée. */
  body[data-page="devis"].dv-is-pro .dv-row-identity { grid-template-columns: 1fr; }
}

/* ── Vue unique, sans défilement ──
   Sur un écran assez grand (desktop), tout le formulaire tient dans la
   hauteur visible : particulier et professionnel ont rigoureusement la
   même hauteur (champs pro fusionnés dans les lignes existantes,
   voir plus haut), donc le verrou s'applique de façon identique aux
   deux modes. En dessous de ce seuil (fenêtre plus petite, tablette,
   mobile), on revient au défilement normal plutôt que de risquer de
   couper le bouton d'envoi. */
@media (min-width: 961px) and (min-height: 720px) {
  html:has(body[data-page="devis"]) { height: 100%; overflow: hidden; }
  body[data-page="devis"] { height: 100%; overflow: hidden; }
}
@media (prefers-reduced-motion: reduce) {
  .dv * { transition: none !important; animation: none !important; }
}