/* =========================================================================
   KreativPM — Capture · charte "Atelier lumineux"
   Source de vérité visuelle : docs/mockups/onepage-brand.html (+ merci.html)
   Mobile-first (375px = cible principale). Vanilla, aucune dépendance.
   ========================================================================= */

/* --- Fonts (bundlées en local, voir app/fonts/) -------------------------
   Manrope et Inter sont des polices variables : Google ne sert qu'UN seul
   fichier .woff2 par famille (couvrant tous les poids) — chaque @font-face
   ci-dessous pointe volontairement vers le même fichier local avec un poids
   fixe différent ; le moteur de rendu choisit l'instance statique adéquate.
   TODO fonts: aucun — bundle réussi (pas de fallback nécessaire). */
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/manrope-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/manrope-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../fonts/manrope-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/inter-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/inter-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/inter-latin.woff2") format("woff2");
}

/* --- Design tokens ------------------------------------------------------ */
:root {
  /* Palette "Atelier lumineux" */
  --color-cream: #FAF5ED;
  --color-beige: #E5DAC8;
  --color-beige-soft: #F3EADB;
  --color-white: #FFFFFF;
  --color-ink: #2A211A;
  --color-ink-soft: #6B5D4A;
  --color-muted: #968A77;
  --color-copper: #D4943F;
  --color-copper-dark: #B57730;
  --color-copper-soft: #E8B770;
  --color-copper-text: #8B5A20;
  --color-teal: #2ABFBF;
  --color-teal-dark: #1A9090;
  --color-xtool-green: #5CB85C;
  --color-xtool-green-bg: #EAF5EA;
  --color-xtool-green-text: #3D8F3D;
  --color-error: #C1443B;
  --color-error-bg: #FBEAE7;

  /* Typo */
  --font-heading: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Forme */
  --radius: 12px;
  --radius-sm: 10px;
  --radius-pill: 999px;
  --shadow-cta: 0 8px 20px rgba(212, 148, 63, .32);
  --shadow-check: 0 10px 24px rgba(212, 148, 63, .35);

  /* Layout */
  --content-max: 560px;
}

/* --- Reset & base --------------------------------------------------------*/
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--color-cream);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
button, input, textarea, select { font: inherit; color: inherit; }
a { color: var(--color-teal-dark); }
fieldset { border: 0; margin: 0; padding: 0; }
legend { display: block; width: 100%; padding: 0; }
h1, h2 { margin: 0; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* hidden doit toujours gagner, quoi qu'ajoute une classe déclarant "display"
   ailleurs dans la feuille (Tasks 3-5 togglent cet attribut en JS). */
[hidden] { display: none !important; }

:focus-visible {
  outline: 2px solid var(--color-teal);
  outline-offset: 2px;
}

/* --- Shell : header / main / footer -------------------------------------*/
.app-header {
  background: var(--color-cream);
  border-bottom: 1px solid var(--color-beige);
}
.app-header-inner {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 14px 16px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 14px;
  letter-spacing: .3px;
  color: var(--color-copper-text);
}
.brand-mark { width: 26px; height: 26px; border-radius: 6px; flex: none; }

.badge-salon {
  background: var(--color-beige-soft);
  border: 1px solid var(--color-beige);
  color: var(--color-copper-text);
  padding: 5px 11px;
  border-radius: var(--radius-pill);
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
}

.app-main {
  flex: 1 0 auto;
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 16px 32px;
  width: 100%;
}

.app-footer {
  background: var(--color-ink);
  border-top: 2px solid var(--color-copper);
}
.app-footer-inner {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 12px 16px;
  color: var(--color-cream);
  font-size: 10.5px;
  text-align: center;
  letter-spacing: .3px;
}

/* --- Écran "capture" : intro ---------------------------------------------*/
.screen-title {
  font-family: var(--font-heading);
  font-size: 23px;
  font-weight: 800;
  margin: 16px 0 4px;
  color: var(--color-ink);
}
.screen-sub {
  font-size: 13px;
  margin: 0 0 12px;
  color: var(--color-ink-soft);
}

.badge-xtool {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--color-xtool-green-bg);
  color: var(--color-xtool-green-text);
  border: 1px solid var(--color-xtool-green);
  border-radius: var(--radius-pill);
  font-size: 11.5px;
  font-weight: 600;
  padding: 6px 12px;
  margin-bottom: 18px;
}
.badge-xtool::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-xtool-green);
  flex: none;
}

/* --- Écran "accueil" : routeur multi-besoin (Task 5) ----------------------
   3 cartes pleine-largeur (une par besoin : machine / devis / contact),
   peintes par router.js (initRouter). Boutons natifs (accessibilité clavier
   + focus-visible global déjà géré par la règle :focus-visible en tête de
   fichier — pas de redéfinition ici, même parti pris que .tile/.chip). */
.route-cards {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 6px;
}
.route-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  width: 100%;
  background: var(--color-white);
  border: 1.5px solid #E7DFD2;
  border-radius: var(--radius);
  padding: 16px 18px;
  text-align: left;
  font-family: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.route-card:hover { border-color: var(--color-copper); box-shadow: 0 0 0 2px rgba(212, 148, 63, .18); }
.route-card-titre {
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 800;
  color: var(--color-ink);
}
.route-card-sous {
  font-size: 12px;
  color: var(--color-muted);
}

/* Bouton "← Changer de demande" (#retour-accueil, en tête de #capture) :
   lien discret, pas un CTA — ne doit pas concurrencer le vrai bouton
   d'action du formulaire plus bas. */
.retour-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 10px 0 0;
  padding: 4px 0;
  background: none;
  border: none;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-ink-soft);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.retour-link:hover { color: var(--color-copper-text); }

/* --- Groupes de champs ----------------------------------------------------*/
.field-group { margin-bottom: 22px; }
.field-label {
  font-family: var(--font-heading);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--color-ink);
  margin: 0 0 10px;
}
.field-label .opt { color: var(--color-ink-soft); font-weight: 500; }

/* Libellé de champ (bloc « Vous ») : visible au-dessus de l'input, même
   graphie que .field-label. L'astérisque cuivre .req marque les champs requis
   (Prénom/Email/Téléphone) ; les optionnels (Nom/Société) n'en portent pas. */
.field-req-label {
  display: block;
  margin: 0 0 6px;
  font-family: var(--font-heading);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--color-ink);
}
.req {
  color: var(--color-copper);
  font-weight: 800;
  font-size: 13px;
  line-height: 1;
}

/* --- Grille machines (tuiles) ---------------------------------------------*/
.tile-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  border-radius: var(--radius);
}
/* Affordance d'erreur (≥1 machine requise, cf. validate.js) : jusqu'ici
   .tile-grid.has-error (règle groupée plus bas, cf. .input.has-error)
   changeait border-color sans effet, faute de bordure réelle sur .tile-grid.
   Un anneau en box-shadow (même idiome que .tile.sel juste plus bas) rend
   l'erreur visible sans toucher la boîte de mise en page (pas de décalage
   des tuiles/du gap, contrairement à une vraie bordure + compensation). */
.tile-grid.has-error { box-shadow: 0 0 0 2px var(--color-error); }
.tile {
  position: relative;
  display: block;
  width: 100%;
  border-radius: 11px;
  overflow: hidden;
  background: var(--color-white);
  border: 1.5px solid var(--color-beige);
  padding: 0;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  -webkit-tap-highlight-color: transparent;
}
.tile-photo {
  height: 52px;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: var(--font-heading);
  font-size: 11.5px;
  font-weight: 800;
  line-height: 1.15;
  color: var(--color-copper-text);
  background: linear-gradient(135deg, #FBF6EE, var(--color-beige-soft));
  border-bottom: 2px solid var(--color-copper-soft);
}
/* Vraie photo machine (render.js : machine.image_url non vide) — l'<img>
   remplit le cadre .tile-photo (hauteur fixe, cf. ci-dessus + media query
   tablette) en le recadrant plutôt qu'en le déformant. */
.tile-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}
/* Pas de photo (render.js : machine.image_url vide → texte seul, cf.
   tile-photo par défaut ci-dessus) : liseré pointillé pour distinguer un
   "vrai" visuel d'un simple nom en attente de photo (Réglages, Lot 3). */
.tile--placeholder .tile-photo { border-bottom-style: dashed; }
.tile-cap {
  font-size: 9px;
  color: var(--color-ink-soft);
  text-align: center;
  padding: 4px 3px 6px;
  font-weight: 600;
}
.tile.sel { border-color: var(--color-copper); box-shadow: 0 0 0 2px rgba(212, 148, 63, .22); }
.tile.sel .tile-photo {
  background: linear-gradient(135deg, var(--color-copper-soft), var(--color-copper));
  color: var(--color-cream);
  border-bottom-color: var(--color-copper-dark);
}
.tile.sel::after {
  content: "\2713";
  position: absolute;
  top: 4px;
  right: 6px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--color-copper);
  color: var(--color-cream);
  font-size: 9.5px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tile--utility .tile-photo {
  font-size: 17px;
  color: var(--color-ink-soft);
  background: var(--color-beige-soft);
  border-bottom-color: var(--color-beige);
}

/* --- Chips intention --------------------------------------------------- */
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  box-sizing: border-box;
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  padding: 9px 16px;
  border-radius: var(--radius-pill);
  background: var(--color-white);
  border: 1.5px solid var(--color-beige);
  color: var(--color-ink);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.chip.sel {
  background: var(--color-copper);
  border-color: var(--color-copper);
  color: var(--color-cream);
  font-weight: 600;
}

/* --- Champs texte -------------------------------------------------------*/
.input {
  display: block;
  width: 100%;
  background: var(--color-white);
  border: 1.5px solid var(--color-beige);
  border-radius: var(--radius-sm);
  padding: 12px 13px;
  font-size: 14px;
  font-family: inherit;
  color: var(--color-ink);
}
.input::placeholder { color: var(--color-ink-soft); }
.input:focus-visible {
  outline: none;
  border-color: var(--color-copper);
  box-shadow: 0 0 0 3px rgba(212, 148, 63, .18);
}
.input.area { min-height: 64px; resize: vertical; }

.vous-fields { display: flex; flex-direction: column; gap: 8px; }
.row-2 { display: flex; gap: 8px; }
.row-2 .field { flex: 1; min-width: 0; }

.consent {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  margin-top: 14px;
  font-size: 12px;
  color: var(--color-ink-soft);
  line-height: 1.45;
  cursor: pointer;
}
.consent input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin: 1px 0 0;
  flex: none;
  accent-color: var(--color-copper);
}

/* Lien RGPD (revue finale Lot 2, Important #2) : discret, sous la ligne de
   consentement — même gabarit que .consent (11.5px muted, cf. .reassure) ;
   seul le lien lui-même reprend la couleur teal déjà utilisée pour les
   liens de l'app (cf. règle `a` globale). */
.privacy-link {
  margin: 6px 0 0;
  font-size: 11.5px;
  color: var(--color-ink-soft);
  line-height: 1.4;
}
.privacy-link a {
  color: var(--color-teal-dark);
}

/* --- Erreurs de validation (câblées en Task 4) --------------------------*/
.field-error {
  margin: 6px 0 0;
  font-size: 11.5px;
  color: var(--color-error);
}
.input.has-error, .chip-row.has-error {
  border-color: var(--color-error);
}
/* .tile-grid.has-error : cf. règle dédiée (box-shadow) au bloc "Grille
   machines" plus haut — border-color seul y serait sans effet (pas de
   border-width sur .tile-grid). */

/* --- CTA & réassurance ----------------------------------------------------*/
/* Retour terrain (proprio, écran "fermé", bouton "Visiter le site") : le
   cuivre-deep + crème lisait délavé/olive (~3.4:1, cf. ancien commentaire
   et task-7-report.md). Cuivre standard + encre quasi-noire ≈ 5:1 (AA plein
   texte normal), toujours 100% palette existante. */
.cta {
  display: block;
  width: 100%;
  margin-top: 16px;
  background: var(--color-copper);
  color: var(--color-ink);
  text-align: center;
  text-decoration: none;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 14.5px;
  padding: 15px;
  border: none;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-cta);
  cursor: pointer;
}
/* Filtre plutôt que changement de fond : assombrit le cuivre au survol
   pour un retour visuel sans ajouter de nouveau token. */
.cta:hover { filter: brightness(.92); }
.cta:active { transform: translateY(1px); }
/* État "envoi en cours" (Task 7) : cta-submit ET erreur-retry, cf. app.js
   setSubmitBusy() — désactivation visuelle en plus du garde JS `submitting`. */
.cta:disabled {
  opacity: .7;
  cursor: default;
  box-shadow: none;
}
.cta:disabled:hover { filter: none; }

.ghost-btn {
  display: block;
  width: 100%;
  margin-top: 10px;
  background: transparent;
  color: var(--color-teal-dark);
  border: 1.5px solid var(--color-teal);
  border-radius: var(--radius-sm);
  text-align: center;
  text-decoration: none;
  font-weight: 700;
  font-size: 13px;
  padding: 12px;
  cursor: pointer;
}

.reassure {
  text-align: center;
  font-size: 11.5px;
  color: var(--color-ink-soft);
  margin: 10px 0 4px;
}

/* --- Écrans de fin (merci / fermé / erreur) — scaffolding Task 2,
   contenu détaillé adapté de merci.html en Task 5 --------------------------*/
.end-screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 44px 4px 24px;
}
.end-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-copper-soft), var(--color-copper));
  color: var(--color-cream);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-size: 28px;
  font-weight: 800;
  margin-bottom: 16px;
  box-shadow: var(--shadow-check);
}
.end-title {
  font-family: var(--font-heading);
  font-size: 21px;
  font-weight: 800;
  margin: 0 0 8px;
  color: var(--color-ink);
}
.end-text {
  font-size: 13px;
  color: var(--color-ink-soft);
  margin: 0 0 16px;
  line-height: 1.5;
  max-width: 340px;
}
.end-screen .cta, .end-screen .ghost-btn { max-width: 320px; }

.tag-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-bottom: 8px; }
.tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--color-white);
  border: 1.5px solid var(--color-beige);
  border-radius: var(--radius-pill);
  padding: 6px 12px;
  font-size: 11px;
  font-weight: 600;
  color: var(--color-ink);
}
.tag.copper { background: var(--color-copper); border-color: var(--color-copper); color: var(--color-cream); }

.countdown-label { font-size: 11px; color: var(--color-ink-soft); margin: 12px 0 6px; }
.countdown-label b { color: var(--color-copper-text); }
.progress {
  height: 6px;
  width: 100%;
  max-width: 280px;
  background: var(--color-beige-soft);
  border-radius: var(--radius-pill);
  overflow: hidden;
  margin-bottom: 6px;
}
.progress > i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, var(--color-copper-soft), var(--color-copper)); }
/* Durée posée en JS (style.animation, cf. app.js restartProgressAnimation)
   selon AUTO_RESET_SECONDS — pas de durée fixe ici. */
@keyframes merci-countdown {
  from { width: 100%; }
  to { width: 0%; }
}

/* --- Écran merci : variantes kiosk / self (Task 5) -----------------------
   #merci-kiosk (récap + auto-retour) et #merci-self (vitrine, pas de reset)
   sont mutuellement exclusifs, togglés en JS selon MODE. width:100% pour que
   leurs enfants (.progress, .cta, .ghost-btn, .badge-xtool) gardent le même
   calcul de largeur que s'ils étaient enfants directs de .end-screen. */
#merci-kiosk, #merci-self {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
/* Réutilisation du badge header (Task 2) comme lien vitrine plein-largeur
   dans l'écran merci self — contexte différent (bouton, pas badge d'info). */
.end-screen .badge-xtool {
  display: flex;
  justify-content: center;
  width: 100%;
  max-width: 320px;
  margin: 10px 0 0;
  text-decoration: none;
  cursor: pointer;
}

/* --- Indicateur "en attente de synchro" (Task 6, injecté en JS — cf.
   app.js getQueueIndicator) : pastille fixe, visible seulement tant que
   queue.pendingCount() > 0. Anciennement du CSS inline en hex dans app.js ;
   déplacé ici en tokens (Task 7) — app.js ne pose plus que #id/attributs. */
#queue-indicator {
  position: fixed;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  background: var(--color-ink);
  color: var(--color-cream);
  border: 1px solid var(--color-copper);
  font: 600 11.5px/1 var(--font-body);
  padding: 7px 14px;
  border-radius: var(--radius-pill);
  z-index: 9999;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .18);
}

/* --- Mobile-first : légers ajustements au-delà de 375px ------------------*/
@media (min-width: 400px) {
  .tile-photo { height: 56px; }
}

/* --- Tablette (≥700px) : la carte centrale respire un peu plus et la
   grille machines passe à 4 colonnes (plutôt qu'un simple étirement des
   tuiles en 3 colonnes) — cf. brief T7 "3 col mobile, plus large tablette".
   --content-max piloté depuis :root est déjà lu par header/main/footer,
   donc une seule redéclaration élargit tout le shell de façon cohérente. */
@media (min-width: 700px) {
  :root { --content-max: 640px; }
  .tile-grid { grid-template-columns: repeat(4, 1fr); gap: 10px; }
  .tile-photo { height: 68px; }
}