/* MGR, base commune des maquettes : couleurs, typographie, contrôles. */
@font-face {
  font-family: "Jost";
  src: url(fonts/Jost-Variable.ttf) format("truetype");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --noir: #17171A;
  --graphite: #232327;
  --graphite-2: #2E2E33;
  --marbre: #EEECE8;
  --marbre-2: #E4E0D9;
  --blanc: #FAF9F7;
  --laiton: #A58B5C;
  --laiton-fonce: #8A7246;
  --laiton-clair: #C2A878;
  --texte: #1F1F23;
  --texte-doux: #5C5B60;
  --texte-clair: #B9B7B2;
  --ligne: #D9D5CE;
  --ligne-sombre: #36363B;
  --erreur: #A3392C;
  --rayon: 2px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --page: min(1240px, 100% - 48px);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; } }
body { margin: 0; font: 400 17px/1.65 "Jost", system-ui, sans-serif; color: var(--texte); background: var(--blanc); }
img { display: block; max-width: 100%; }
a { color: inherit; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
::selection { background: var(--laiton); color: var(--noir); }
:focus-visible { outline: 2px solid var(--laiton); outline-offset: 3px; }
h1, h2, h3 { font-weight: 300; line-height: 1.1; letter-spacing: -0.01em; margin: 0; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
.page { width: var(--page); margin-inline: auto; }

/* Nom de marque en capitales espacées, comme le logo. */
.capitales { text-transform: uppercase; letter-spacing: 0.22em; font-size: 13px; font-weight: 450; }

/* Bouton principal : une seule intention, « Demander un devis ». */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 28px; border: 1px solid transparent; border-radius: var(--rayon);
  font: 500 15px/1 "Jost", sans-serif; letter-spacing: 0.06em; text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease), transform 0.15s var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn-laiton { background: var(--laiton); color: var(--noir); }
.btn-laiton:hover { background: var(--laiton-clair); }
.btn-noir { background: var(--noir); color: var(--marbre); }
.btn-noir:hover { background: var(--graphite-2); }
.btn-ligne { border-color: currentColor; color: inherit; background: transparent; }
.btn-ligne:hover { background: rgb(165 139 92 / 0.12); }
.btn svg { width: 18px; height: 18px; }

/* Formulaire de devis. */
.champ { display: grid; gap: 6px; }
.champ label, .champ legend { font-size: 14px; font-weight: 500; letter-spacing: 0.02em; }
.champ .aide { font-size: 13px; color: var(--texte-doux); }
.champ input, .champ select, .champ textarea {
  width: 100%; min-height: 50px; padding: 12px 14px; border: 1px solid var(--ligne); border-radius: var(--rayon);
  font: 400 16px/1.4 "Jost", sans-serif; color: var(--texte); background: #fff;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.champ textarea { min-height: 120px; resize: vertical; }
.champ input::placeholder, .champ textarea::placeholder { color: #67666B; }
.champ input:focus, .champ select:focus, .champ textarea:focus { outline: none; border-color: var(--laiton); box-shadow: 0 0 0 3px rgb(165 139 92 / 0.25); }
.champ [aria-invalid="true"] { border-color: var(--erreur); }
.champ .erreur { font-size: 13px; color: var(--erreur); min-height: 0; }
.champ .erreur:empty { display: none; }

/* Choix du type de projet, en tuiles cliquables. */
.choix { display: grid; gap: 8px; border: 0; padding: 0; margin: 0; }
.legende-choix { font-size: 14px; font-weight: 500; letter-spacing: 0.02em; margin-bottom: 6px; padding: 0; }
.choix input { position: absolute; opacity: 0; pointer-events: none; }
.choix label {
  display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 10px 14px;
  border: 1px solid var(--ligne); border-radius: var(--rayon); cursor: pointer; font-weight: 400; background: #fff;
  transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease);
}
.choix label:hover { border-color: var(--laiton); }
.choix input:checked + label { border-color: var(--laiton); background: rgb(165 139 92 / 0.12); }
.choix input:focus-visible + label { outline: 2px solid var(--laiton); outline-offset: 2px; }
.choix svg { width: 22px; height: 22px; flex: none; color: var(--laiton-fonce); }

.merci { display: none; padding: 20px; border: 1px solid var(--laiton); border-radius: var(--rayon); background: rgb(165 139 92 / 0.1); }
.merci.visible { display: block; }

/* Bandeau mobile collant : le devis reste à un pouce. */
.devis-mobile { display: none; }
@media (max-width: 760px) {
  .devis-mobile {
    display: flex; position: fixed; z-index: 30; left: 0; right: 0; bottom: 0;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
    /* Socle sombre : Safari iOS teinte sa barre d'adresse avec cette couleur, pas avec le laiton du bouton. */
    background: #0F0F11; border-top: 1px solid #2A2A2F;
  }
  .devis-mobile .btn { flex: 1; box-shadow: 0 10px 30px rgb(23 23 26 / 0.35); }
  /* visibility : sinon Safari iOS teinte sa barre d'adresse avec la couleur du bouton caché. */
  .devis-mobile { transition: transform 0.35s var(--ease), opacity 0.35s var(--ease), visibility 0s linear 0s; }
  .devis-mobile.cache { transform: translateY(140%); opacity: 0; pointer-events: none; visibility: hidden; transition: transform 0.35s var(--ease), opacity 0.35s var(--ease), visibility 0s linear 0.35s; }
  body { padding-bottom: 76px; }
}

/* Étiquette de maquette, à retirer en production. */
.maquette-note { font-size: 12px; color: var(--texte-doux); }

/* Message d'échec d'envoi du formulaire. */
.echec { margin: 0; padding: 12px 14px; border: 1px solid var(--erreur); border-radius: var(--rayon); font-size: 15px; color: #E9B4AB; background: rgb(163 57 44 / 0.12); }
.echec a { color: inherit; }