/* Formulaires publics du cœur (views/forms/) et pages de message (.sqm-notice).
   Jetons du thème avec valeur de repli ; police héritée ; aucune flèche ; ombres douces seulement.
   --sqm-field-border : contour des champs et des tuiles, 3,6:1 sur blanc et 3,3:1 sur --mist (WCAG 1.4.11) ;
   --line reste réservé aux filets décoratifs. */

.sqm-form {
  --sqm-error: #b42318;
  --sqm-field-border: #6f8b99;
  container-type: inline-size;
  color: var(--ink, #102c3a);
  font-size: 16px;
  line-height: 1.55;
}
.sqm-form p { margin: 0; line-height: 1.55; }
.sqm-form [hidden] { display: none !important; }
/* Sans JavaScript, les champs conditionnels restent visibles : le serveur ignore ceux qui ne s'appliquent pas. */
.no-js .sqm-form .sqm-field[hidden] { display: grid !important; }

.sqm-form form { display: grid; gap: 24px; }
.sqm-form fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.sqm-form legend { padding: 0; }

/* Grille : chaque champ occupe trois rangées partagées (libellé, contrôle, consigne et erreur) ; les contrôles
   d'une même rangée restent alignés, quelles que soient la longueur des libellés et les consignes. L'écart entre
   champs est une marge (un écart de rangée s'ajouterait aussi entre les trois rangées d'un champ). */
.sqm-form__grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0 16px; margin-bottom: -20px; }
.sqm-field { display: grid; grid-column: 1 / -1; grid-row: span 3; grid-template-rows: subgrid; min-width: 0; margin-bottom: 20px; }
@container (min-width: 560px) {
  .sqm-field--half { grid-column: span 3; }
  .sqm-field--third { grid-column: span 2; }
  .sqm-field--two-thirds { grid-column: span 4; }
}

.sqm-field__hint { color: var(--muted, #5a6e78); font-size: 14px; }
.sqm-step { display: grid; gap: 16px; }
.sqm-step__legend { margin-bottom: 4px; color: var(--deep, #00344b); font-family: var(--font-serif, Georgia, serif); font-size: 22px; line-height: 1.3; scroll-margin-top: 120px; }

.sqm-form .sqm-field__label { align-self: end; margin-bottom: 6px; color: var(--sqm-form-label, var(--petrol, #004766)); font-size: 15px; font-weight: 600; line-height: 1.4; }
.sqm-field__req { margin-left: 2px; color: var(--sqm-form-label, var(--petrol, #004766)); }
/* Le thème recolore le texte des formulaires sur un fond sombre avec --sqm-form-label, --sqm-form-muted, --sqm-form-placeholder et --sqm-form-error (posées sur un conteneur) ; sans elles, rien ne change. */
.sqm-form ::placeholder { color: var(--sqm-form-placeholder, #5f7580); opacity: 1; }
.sqm-field__hint { margin-top: 6px; line-height: 1.45; }
.sqm-field__control { display: flex; align-items: center; gap: 10px; }
.sqm-field__unit { flex: none; color: var(--muted, #5a6e78); font-size: 15px; white-space: nowrap; }

.sqm-form :is(input:not([type="checkbox"], [type="radio"]), select, textarea) {
  width: 100%; min-height: 48px; padding: 11px 14px;
  border: 1px solid var(--sqm-field-border); border-radius: var(--radius, 5px);
  background-color: #fff; color: var(--ink, #102c3a); font: inherit; font-size: 16px; line-height: 1.4;
  transition: border-color .16s ease, box-shadow .16s ease;
}
.sqm-form textarea { min-height: 132px; resize: vertical; }
.sqm-form :is(input, select, textarea):focus-visible { outline: 3px solid var(--focus, #2986aa); outline-offset: 2px; }
.sqm-form a:focus-visible, .sqm-form button:focus-visible, .sqm-form [tabindex="-1"]:focus-visible { outline: 3px solid var(--focus, #2986aa); outline-offset: 3px; }
.sqm-form [tabindex="-1"]:focus:not(:focus-visible) { outline: none; }

.sqm-field__error { margin-top: 6px; color: var(--sqm-form-error, var(--sqm-error)); font-size: 14px; font-weight: 500; line-height: 1.45; }
.sqm-field__error:empty { display: none; }
.sqm-form [aria-invalid="true"]:not([type="checkbox"], [type="radio"]) { border-color: var(--sqm-error); box-shadow: inset 0 0 0 1px var(--sqm-error); }

/* Cases et boutons radio : 20 px, libellé entier cliquable, cible de 44 px. */
.sqm-choices { display: flex; flex-wrap: wrap; gap: 0 28px; }
.sqm-choice { display: flex; align-items: flex-start; gap: 12px; min-height: 44px; padding: 10px 0; cursor: pointer; line-height: 1.5; }
.sqm-choice input { flex: none; width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--petrol, #004766); cursor: pointer; }
.sqm-choice a { color: var(--petrol, #004766); text-decoration: underline; text-underline-offset: 3px; }
.sqm-field--checkbox .sqm-field__after { padding-left: 32px; }
.sqm-field--checkbox .sqm-field__error, .sqm-field--checkbox .sqm-field__hint { margin-top: 0; }

.sqm-choices--tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@container (min-width: 720px) { .sqm-choices--tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@container (max-width: 419px) { .sqm-choice--tile { flex-direction: column; align-items: flex-start; gap: 6px; } }
.sqm-choice--tile {
  align-items: center; padding: 13px 16px; border: 1px solid var(--sqm-field-border); border-radius: var(--radius, 5px);
  background: #fff; transition: border-color .16s ease, background-color .16s ease;
}
.sqm-choice--tile:has(:checked) { padding: 12px 15px; border: 2px solid var(--petrol, #004766); background: var(--mist, #f1f6f7); }
.sqm-choice--tile:has(:focus-visible) { outline: 3px solid var(--focus, #2986aa); outline-offset: 2px; }
.sqm-choice--tile input:focus-visible { outline: none; }

/* Piège à robots : hors écran, jamais focalisable. */
.sqm-form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.sqm-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.sqm-form .sqm-form__info { color: var(--sqm-form-muted, var(--muted, #5a6e78)); font-size: 14px; line-height: 1.5; }
.sqm-form__info a { color: var(--petrol, #004766); text-decoration: underline; text-underline-offset: 3px; }
.sqm-form__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.sqm-form__actions .button[aria-busy="true"] { cursor: progress; opacity: .75; }
.sqm-form__add { grid-column: 1 / -1; justify-self: start; margin-bottom: 20px; }
.sqm-form__turnstile:empty { display: none; }

.sqm-form__summary, .sqm-form__success { margin-bottom: 24px; padding: 18px 22px; border-radius: var(--radius, 5px); }
.sqm-form__summary { border: 1px solid var(--sqm-error); background: #fdf3f2; }
.sqm-form__summary p + p, .sqm-form__summary p + ul, .sqm-form__success p + p { margin-top: 8px; }
.sqm-form__summary-title { font-weight: 600; }
.sqm-form__summary ul { display: grid; gap: 4px; margin: 0; padding-left: 20px; list-style: disc; }
.sqm-form__summary a { color: var(--sqm-error); font-size: 15px; text-decoration: underline; text-underline-offset: 3px; }

/* Succès : fond brume, contour pétrole léger, coche dans un cercle. */
.sqm-form__success { display: grid; grid-template-columns: 28px 1fr; column-gap: 16px; padding: 22px 24px; border: 1px solid #b9cdd5; background: var(--mist, #f1f6f7); box-shadow: 0 10px 30px rgb(16 44 58 / .06); }
.sqm-form__success > * { grid-column: 2; }
.sqm-form__success-icon { grid-column: 1; grid-row: 1 / span 4; fill: var(--petrol, #004766); stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sqm-form__success-title { color: var(--deep, #00344b); font-family: var(--font-serif, Georgia, serif); font-size: 22px; line-height: 1.3; }

@media (hover: hover) and (pointer: fine) {
  .sqm-address__list li:hover { background: var(--mist, #f1f6f7); }
  .sqm-form :is(input:not([type="checkbox"], [type="radio"]), select, textarea):hover,
  .sqm-choice--tile:not(:has(:checked)):hover { border-color: var(--muted, #5a6e78); }
  .sqm-form [aria-invalid="true"]:not([type="checkbox"], [type="radio"]):hover { border-color: var(--sqm-error); }
}

@container (max-width: 559px) {
  .sqm-form__actions .button { width: 100%; }
  .sqm-form__success { grid-template-columns: 1fr; padding: 20px; }
  .sqm-form__success > * { grid-column: 1; }
  .sqm-form__success-icon { grid-row: auto; margin-bottom: 12px; }
}

/* Estimation en étapes (estimation.js) : progression en segments, recherche d'adresse, mini-carte, créneau d'appel. */
.sqm-progress { display: flex; gap: 6px; margin: 0; padding: 0; list-style: none; }
.sqm-progress li { flex: 1 1 0; min-width: 0; }
.sqm-progress__step {
  display: flex; align-items: center; gap: 8px; width: 100%; min-height: 44px; padding: 8px 0 0;
  border: 0; border-top: 4px solid #cfdde3; background: none; color: var(--muted, #5a6e78); font: inherit; font-size: 14px; line-height: 1.3; text-align: left;
}
.sqm-progress :is(.is-done, .is-current) .sqm-progress__step { border-top-color: var(--petrol, #004766); color: var(--ink, #102c3a); }
.sqm-progress .is-current .sqm-progress__step { font-weight: 600; }
button.sqm-progress__step { cursor: pointer; }
.sqm-progress__num { display: grid; flex: none; place-items: center; width: 26px; height: 26px; border: 1px solid currentColor; border-radius: 50%; font-size: 13px; font-variant-numeric: tabular-nums; }
.sqm-progress .is-done .sqm-progress__num, .sqm-progress .is-current .sqm-progress__num { border-color: var(--petrol, #004766); background: var(--petrol, #004766); color: #fff; }
.sqm-progress__label { min-width: 0; overflow-wrap: break-word; }
@container (max-width: 639px) {
  .sqm-progress .is-current { flex-grow: 7; }
  .sqm-progress li:not(.is-current) .sqm-progress__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
}
@container (max-width: 299px) {
  .sqm-progress .is-current .sqm-progress__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
}
/* Avec JavaScript (classe `sqm-js`, posée sur <html> par le script de l'en-tête), la page naît dans son état final : barre de progression,
   étape 1 seule, ni ligne d'information ni bouton d'envoi (à la place de « Continuer ») ; estimation.js n'a plus rien à déplacer.
   `display: none` retire aussi l'écart de la grille. Si le script ne démarre pas, tout réapparaît après 6 s. */
.sqm-progress--early { display: none; }
.sqm-js .sqm-progress--early { display: flex; }
.sqm-js .sqm-form[data-sqm-form="estimation"]:not(.is-ready) .sqm-step:not([data-step="1"]) { display: none; animation: sqm-step-fallback 1ms 6s forwards; }
.sqm-js .sqm-form[data-sqm-form="estimation"]:not(.is-ready) .sqm-form__info { display: none; animation: sqm-info-fallback 1ms 6s forwards; }
.sqm-js .sqm-form[data-sqm-form="estimation"]:not(.is-ready) .sqm-form__actions [type="submit"] { visibility: hidden; animation: sqm-submit-fallback 1ms 6s forwards; }
@keyframes sqm-step-fallback { to { display: grid; } }
@keyframes sqm-info-fallback { to { display: block; } }
@keyframes sqm-submit-fallback { to { visibility: visible; } }
.sqm-step__summary { margin-bottom: 0; }

.sqm-address { display: grid; }
.sqm-address__box { position: relative; }
.sqm-address__list {
  position: absolute; z-index: 5; top: calc(100% + 4px); right: 0; left: 0; max-height: 320px; margin: 0; padding: 4px; overflow-y: auto;
  border: 1px solid var(--sqm-field-border); border-radius: var(--radius, 5px); background: #fff; box-shadow: 0 14px 32px rgb(16 44 58 / .16); list-style: none;
}
.sqm-address__list li { display: flex; align-items: center; min-height: 44px; padding: 8px 12px; border-radius: 4px; cursor: pointer; }
.sqm-address__list [aria-selected="true"] { background: var(--mist, #f1f6f7); box-shadow: inset 0 0 0 2px var(--petrol, #004766); }
.sqm-address .sqm-field__hint { margin-top: 8px; }
.sqm-address__map { margin-top: 16px; }
.sqm-address__canvas { height: 280px; overflow: hidden; border-radius: var(--radius, 5px); background: linear-gradient(135deg, #e9f2f5, #f7fbfc); }

.sqm-callback { margin-top: 20px; padding: 22px 24px; border: 1px solid #cfdde3; border-radius: var(--radius, 5px); background: #fff; box-shadow: 0 10px 30px rgb(16 44 58 / .06); }
.sqm-callback:has(> .sqm-form__success) { padding: 0; border: 0; box-shadow: none; }
.sqm-callback__title { color: var(--deep, #00344b); font-family: var(--font-serif, Georgia, serif); font-size: 20px; line-height: 1.3; }

/* Pages de message du cœur (nouveautés, aperçu d'un formulaire) : carte blanche sur un fond teinté. */
.sqm-notice { padding: clamp(40px, 7vw, 88px) 20px; background: linear-gradient(180deg, var(--mist, #f1f6f7) 0%, #e8f0f2 100%); font-size: 16px; }
.sqm-notice__card { width: min(680px, 100%); margin: 0 auto; padding: clamp(28px, 5vw, 48px); border-radius: var(--radius, 5px); background: #fff; box-shadow: var(--shadow-card, 0 10px 30px rgb(16 44 58 / .08)); }
.sqm-notice h1 { margin-bottom: 20px; color: var(--deep, #00344b); font-family: var(--font-serif, Georgia, serif); font-size: clamp(30px, 4vw, 42px); font-weight: 400; line-height: 1.15; letter-spacing: -.5px; }
.sqm-notice__card > p { margin-bottom: 24px; line-height: 1.65; }
.sqm-notice__card > :last-child { margin-bottom: 0; }

/* Mobile : texte courant 15 px, cibles de 44 px. */
@media (max-width: 760px) {
  .sqm-form, .sqm-notice { font-size: 15px; }
  .sqm-form__summary a { display: inline-flex; align-items: center; min-height: 44px; }
  .sqm-form__summary ul { gap: 0; }
}