/* Voxsite AI — accueil en site conversationnel (page générée par lib/conversation.mjs).
   Charte v2 claire (décision du 06/10) : blanc, sapin #0F3D3A, corail #FF7A59, police Geist.
   Cartes en éventail façon Tinder (capture Landbot « Demo booking », 07/10).
   Sans JavaScript : le document (.cv-lecture) est la page (règle 2 du projet). */

@font-face {
  font-family: "Geist";
  src: url("/assets/fonts/geist-latin.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
}

:root {
  --sapin: #0F3D3A; --sapin-2: #1B5752; --corail: #FF7A59; --blanc: #FFFFFF;
  --fond: #F3F6F5; --encre: #0F3D3A; --doux: #4A6865; --trait: rgba(15, 61, 58, 0.13);
  --bulle: #FFFFFF; --ombre: 0 18px 40px -22px rgba(15, 61, 58, 0.45);
  --erreur: #A52A16; --tete: 60px; --colonne: 640px;
  color-scheme: light;
}
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; background: var(--fond); color: var(--encre); }
body { font-family: "Geist", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; -webkit-font-smoothing: antialiased; }
a { color: inherit; }
button, input, textarea { font-family: inherit; }
:focus-visible { outline: 2px solid var(--corail); outline-offset: 3px; }
.cv-masque { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ── Sans JavaScript : le document est la page ─────────────────────────── */
html:not(.js) .cv-fil, html:not(.js) .cv-bas, html:not(.js) .cv-actions { display: none; }

/* ── En-tête ───────────────────────────────────────────────────────────── */
.cv-tete {
  position: relative; z-index: 3; flex-shrink: 0; height: var(--tete); padding: 0 16px;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: var(--blanc); border-bottom: 1px solid var(--trait);
}
.cv-marque { display: flex; align-items: center; gap: 9px; font-size: 17px; font-weight: 800; letter-spacing: -0.02em; text-decoration: none; white-space: nowrap; }
.cv-pastille { width: 30px; height: 30px; border-radius: 50%; background: var(--corail); color: var(--sapin); display: flex; align-items: center; justify-content: center; }
.cv-actions { display: flex; align-items: center; gap: 8px; }
.cv-rappel-btn, .cv-bascule {
  height: 36px; padding: 0 13px; border-radius: 999px; font-size: 13px; font-weight: 800; cursor: pointer; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 6px;
}
.cv-rappel-btn { border: 0; background: var(--corail); color: var(--sapin); }
.cv-bascule { border: 1.5px solid var(--trait); background: transparent; color: var(--encre); }
.cv-fermer, body.lecture .cv-ouvrir { display: none; }
body.lecture .cv-fermer { display: inline; }

/* ── Avec JavaScript : une application d'une page ──────────────────────── */
.js body { height: 100vh; height: var(--vh, 100dvh); overflow: hidden; display: flex; flex-direction: column; }
.cv-fil {
  position: relative; flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch;
  padding: 18px 16px 28px; display: flex; flex-direction: column; gap: 12px; scroll-behavior: smooth;
}
.cv-fil > * { width: 100%; max-width: var(--colonne); margin-left: auto; margin-right: auto; }

/* Les bulles */
.cv-msg { display: flex; align-items: flex-end; gap: 8px; animation: cv-entree 0.35s ease both; }
.cv-msg-bot .cv-avatar { flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; background: var(--corail); color: var(--sapin); display: flex; align-items: center; justify-content: center; }
.cv-bulle {
  max-width: min(86%, 520px); padding: 11px 15px; border-radius: 18px 18px 18px 6px; background: var(--bulle);
  box-shadow: 0 1px 2px rgba(15, 61, 58, 0.08); border: 1px solid var(--trait); font-size: 16px; line-height: 1.45; font-weight: 500;
}
.cv-msg-moi { justify-content: flex-end; }
.cv-msg-moi .cv-bulle { background: var(--sapin); color: var(--blanc); border-color: var(--sapin); border-radius: 18px 18px 6px 18px; font-weight: 600; }
.cv-frappe { display: inline-flex; gap: 4px; padding: 15px 16px; }
.cv-frappe span { width: 7px; height: 7px; border-radius: 50%; background: var(--doux); opacity: 0.5; animation: cv-point 1s infinite; }
.cv-frappe span:nth-child(2) { animation-delay: 0.15s; }
.cv-frappe span:nth-child(3) { animation-delay: 0.3s; }
@keyframes cv-point { 0%, 60%, 100% { transform: translateY(0); opacity: 0.4; } 30% { transform: translateY(-4px); opacity: 1; } }
@keyframes cv-entree { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ── Les cartes ────────────────────────────────────────────────────────── */
.cv-carte {
  background: var(--blanc); border-radius: 22px; overflow: hidden; border: 1px solid var(--trait);
  box-shadow: var(--ombre); display: flex; flex-direction: column;
}
.cv-visuel {
  position: relative; height: 150px; flex-shrink: 0; overflow: hidden;
  background: radial-gradient(circle at 78% 18%, rgba(255, 122, 89, 0.55) 0, rgba(255, 122, 89, 0) 46%), linear-gradient(150deg, var(--sapin-2), var(--sapin));
  display: flex; align-items: center; justify-content: center;
}
.cv-visuel::before, .cv-visuel::after { content: ""; position: absolute; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, 0.14); }
.cv-visuel::before { width: 170px; height: 170px; }
.cv-visuel::after { width: 250px; height: 250px; }
.cv-visuel-icone { position: relative; z-index: 1; width: 64px; height: 64px; border-radius: 20px; background: var(--corail); color: var(--sapin); display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 26px -10px rgba(0, 0, 0, 0.5); }
.cv-visuel-bulle {
  position: absolute; z-index: 2; left: 14px; top: 14px; max-width: 70%; padding: 6px 11px; border-radius: 12px 12px 12px 4px;
  background: rgba(255, 255, 255, 0.95); color: var(--sapin); font-size: 12px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cv-visuel-bulle-2 { left: auto; top: auto; right: 14px; bottom: 14px; border-radius: 12px 12px 4px 12px; background: var(--corail); color: var(--sapin); }
.cv-carte-corps { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 8px; }
.cv-carte-surtitre { margin: 0; font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: #B4472B; }
.cv-carte h3, .cv-carte-titre { margin: 0; font-size: 20px; font-weight: 800; line-height: 1.2; letter-spacing: -0.02em; text-wrap: balance; }
.cv-carte-texte { margin: 0; font-size: 15px; line-height: 1.45; color: var(--doux); font-weight: 500; }
.cv-points { margin: 2px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.cv-points li { display: flex; gap: 8px; align-items: baseline; font-size: 14px; font-weight: 700; }
.cv-points li::before { content: ""; flex-shrink: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--corail); transform: translateY(-1px); }
.cv-chiffres { margin: 4px 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.cv-chiffres div { padding: 10px 12px; border-radius: 14px; background: var(--fond); }
.cv-chiffres dt { font-size: 18px; font-weight: 800; letter-spacing: -0.02em; }
.cv-chiffres dd { margin: 2px 0 0; font-size: 12px; line-height: 1.3; color: var(--doux); font-weight: 600; }
.cv-chiffres div:only-child { grid-column: 1 / -1; }
.cv-adresse { display: flex; gap: 8px; margin-top: 4px; }
.cv-adresse input { flex: 1 1 auto; min-width: 0; height: 44px; padding: 0 14px; border-radius: 999px; border: 1.5px solid var(--trait); background: var(--fond); color: var(--encre); font-size: 16px; font-weight: 600; }
.cv-adresse button { height: 44px; padding: 0 16px; border-radius: 999px; border: 0; background: var(--sapin); color: var(--blanc); font-size: 14px; font-weight: 800; cursor: pointer; white-space: nowrap; }

/* La carte d'accueil, en grand */
.cv-carte-accueil .cv-visuel { height: 170px; }
.cv-carte-accueil .cv-carte-titre { font-size: 26px; }
.cv-carte-accueil .cv-carte-texte { font-size: 19px; font-weight: 800; color: var(--encre); }

/* ── Le paquet en éventail (façon Tinder) ──────────────────────────────── */
.cv-paquet { position: relative; padding: 6px 0 4px; animation: cv-entree 0.4s ease both; }
.cv-scene { position: relative; height: var(--h-paquet, 470px); touch-action: pan-y; outline: none; }
.cv-scene .cv-carte {
  position: absolute; left: 50%; top: 0; width: min(76vw, 300px); height: 100%; margin-left: calc(min(76vw, 300px) / -2);
  transition: transform 0.45s cubic-bezier(0.2, 0.75, 0.25, 1), opacity 0.35s ease, box-shadow 0.35s ease;
  will-change: transform; user-select: none; -webkit-user-select: none;
}
.cv-scene .cv-carte.glisse { transition: none; }
.cv-scene .cv-carte .cv-carte-corps { overflow: hidden; }
.cv-commandes { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 10px; }
.cv-commandes button {
  width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid var(--trait); background: var(--blanc); color: var(--encre);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.cv-commandes button:disabled { background: #EEF2F1; color: #4A6865; border-color: transparent; cursor: default; }
.cv-repere { min-width: 64px; padding: 6px 12px; border-radius: 999px; background: var(--blanc); border: 1px solid var(--trait); text-align: center; font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums; }

/* ── Choix multiple, agenda, formulaire dans la conversation ───────────── */
.cv-panneau { background: var(--blanc); border: 1px solid var(--trait); border-radius: 20px; padding: 16px; box-shadow: var(--ombre); display: flex; flex-direction: column; gap: 12px; animation: cv-entree 0.4s ease both; }
.cv-panneau-titre { margin: 0; font-size: 15px; font-weight: 800; }
.cv-puces { display: flex; flex-wrap: wrap; gap: 8px; }
.cv-puces button {
  min-height: 42px; padding: 8px 14px; border-radius: 999px; border: 1.5px solid var(--trait); background: var(--blanc);
  color: var(--encre); font-size: 15px; font-weight: 700; cursor: pointer; text-align: left;
}
.cv-puces button[aria-pressed="true"] { background: var(--sapin); color: var(--blanc); border-color: var(--sapin); }
.cv-puces button[aria-pressed="true"]::before { content: "✓ "; }
.cv-valider {
  align-self: stretch; height: 48px; border-radius: 999px; border: 0; background: var(--corail); color: var(--sapin);
  font-size: 16px; font-weight: 800; cursor: pointer;
}
.cv-valider:disabled { background: #E4EAE9; color: #4A6865; cursor: default; }
.cv-jours { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.cv-jours::-webkit-scrollbar { display: none; }
.cv-jours button {
  flex: 0 0 auto; width: 58px; padding: 8px 0; border-radius: 14px; border: 1.5px solid var(--trait); background: var(--blanc);
  color: var(--encre); cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 2px; font-weight: 700;
}
.cv-jours small { font-size: 11px; font-weight: 800; text-transform: uppercase; color: var(--doux); }
.cv-jours strong { font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; }
.cv-jours button[aria-pressed="true"] { background: var(--sapin); border-color: var(--sapin); color: var(--blanc); }
.cv-jours button[aria-pressed="true"] small { color: rgba(255, 255, 255, 0.8); }
.cv-heures { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; }
.cv-heures button { height: 42px; border-radius: 12px; border: 1.5px solid var(--sapin); background: var(--blanc); color: var(--sapin); font-size: 15px; font-weight: 800; cursor: pointer; font-variant-numeric: tabular-nums; }
.cv-champs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cv-champ { display: flex; flex-direction: column; gap: 5px; font-size: 13px; font-weight: 700; min-width: 0; }
.cv-champ.large { grid-column: 1 / -1; }
.cv-champ input { height: 46px; padding: 0 12px; border-radius: 12px; border: 1.5px solid var(--trait); background: var(--fond); color: var(--encre); font-size: 16px; font-weight: 500; min-width: 0; }
.cv-champ input[aria-invalid="true"] { border-color: var(--erreur); }
.cv-erreur { margin: 0; font-size: 13px; font-weight: 700; color: var(--erreur); }
.cv-legal { margin: 0; font-size: 12px; line-height: 1.45; color: var(--doux); }

/* ── Le bas : réponses rapides (une rangée qui défile au doigt, fondu au bord) et saisie ── */
.cv-bas {
  position: relative; z-index: 3; flex-shrink: 0; background: var(--blanc); border-top: 1px solid var(--trait);
  padding: 10px 0 max(10px, env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 10px;
}
.cv-options-cadre { position: relative; }
.cv-espace { flex-shrink: 0; padding: 0 !important; margin: 0 auto !important; }
.cv-options {
  display: flex; flex-wrap: nowrap; justify-content: center; gap: 8px; padding: 2px 16px;
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scroll-padding: 0 16px; scrollbar-width: none;
}
.cv-options:empty { display: none; }
.cv-options::-webkit-scrollbar { display: none; }
.cv-options.deborde { justify-content: flex-start; }
.plus-droite .cv-options { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 56px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 56px), transparent); }
.plus-gauche .cv-options { -webkit-mask-image: linear-gradient(to right, transparent, #000 32px); mask-image: linear-gradient(to right, transparent, #000 32px); }
.plus-gauche.plus-droite .cv-options { -webkit-mask-image: linear-gradient(to right, transparent, #000 32px, #000 calc(100% - 56px), transparent); mask-image: linear-gradient(to right, transparent, #000 32px, #000 calc(100% - 56px), transparent); }
.cv-options button {
  flex: 0 0 auto; white-space: nowrap; scroll-snap-align: start; height: 40px; padding: 0 15px; border-radius: 999px;
  border: 1.5px solid var(--sapin); background: var(--blanc); color: var(--sapin); font-size: 14px; font-weight: 800; cursor: pointer;
  animation: cv-entree 0.35s ease both;
}
.cv-options button.principal { background: var(--sapin); color: var(--blanc); }
.cv-saisie {
  width: calc(100% - 32px); max-width: var(--colonne); margin: 0 auto; height: 52px; display: flex; align-items: center; gap: 8px;
  padding: 0 6px 0 18px; border-radius: 999px; background: var(--fond); border: 1.5px solid var(--trait);
}
.cv-saisie:focus-within { border-color: var(--corail); }
.cv-saisie input { flex: 1 1 auto; min-width: 0; height: 100%; border: 0; background: transparent; color: var(--encre); font-size: 16px; font-weight: 600; outline: none; }
.cv-saisie input::placeholder { color: var(--doux); opacity: 1; }
.cv-saisie button { width: 42px; height: 42px; flex-shrink: 0; border-radius: 50%; border: 0; background: var(--sapin); color: var(--corail); display: flex; align-items: center; justify-content: center; cursor: pointer; }

/* ── La version texte : la page sans JS, un panneau avec ───────────────── */
.cv-lecture { padding: 24px 16px 48px; }
.js .cv-lecture { display: none; position: fixed; left: 0; right: 0; top: var(--tete); bottom: 0; z-index: 4; background: var(--fond); overflow-y: auto; }
.js body.lecture .cv-lecture { display: block; }
.js body.lecture .cv-fil, .js body.lecture .cv-bas { display: none; }
.cv-lecture-corps { max-width: var(--colonne); margin: 0 auto; display: flex; flex-direction: column; gap: 20px; }
.cv-hero { display: flex; flex-direction: column; gap: 6px; }
.cv-surtitre { margin: 0; font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: #B4472B; }
.cv-hero h1 { margin: 0; font-size: clamp(28px, 6vw, 40px); font-weight: 800; line-height: 1.08; letter-spacing: -0.035em; text-wrap: balance; }
.cv-chapo { margin: 0; font-size: 17px; line-height: 1.5; color: var(--doux); font-weight: 500; }
.cv-sujet { display: flex; flex-direction: column; gap: 10px; padding-top: 18px; border-top: 1px solid var(--trait); }
.cv-sujet h2 { margin: 0; font-size: 22px; font-weight: 800; letter-spacing: -0.02em; }
.cv-sujet > p { margin: 0; font-size: 16px; line-height: 1.5; }
.cv-cartes { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.cv-pied { padding-top: 16px; border-top: 1px solid var(--trait); font-size: 13px; color: var(--doux); }
.cv-pied p { margin: 0 0 6px; }

/* Le formulaire de contact du document (lib/formulaire.html, envoyé par /contact.js) */
.contact-form { display: flex; flex-direction: column; gap: 12px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.field { display: flex; flex-direction: column; gap: 5px; }
.field label { font-size: 14px; font-weight: 700; }
.field .opt { font-weight: 500; color: var(--doux); }
.field input, .field textarea { width: 100%; padding: 11px 13px; border-radius: 12px; border: 1.5px solid var(--trait); background: var(--blanc); color: var(--encre); font-size: 16px; }
.field textarea { min-height: 110px; resize: vertical; }
.field-err { margin: 0; font-size: 13px; font-weight: 700; color: var(--erreur); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.contact-send { align-self: flex-start; height: 48px; padding: 0 26px; border-radius: 999px; border: 0; background: var(--corail); color: var(--sapin); font-size: 16px; font-weight: 800; cursor: pointer; }
.form-status { margin: 0; font-size: 14px; font-weight: 700; }
.form-legal { margin: 0; font-size: 12px; line-height: 1.45; color: var(--doux); }

@media (max-width: 420px) {
  .cv-bascule { padding: 0 10px; }
  .cv-rappel-btn span { display: none; }
  .cv-rappel-btn { width: 36px; padding: 0; justify-content: center; }
  .field-row, .cv-champs { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
@media (min-width: 900px) {
  .cv-scene .cv-carte { width: 340px; margin-left: -170px; }
}