/* Venturlab V2 : couleurs relevées sur venturlab.co le 15/11/2026, dominante de blanc, texte vert très foncé, aucune ombre.
   Polices : titres en Lazare Grotesk Regular (comme Transpose), texte en Inter Display Light (= Inter en taille
   optique 32, graisse 300), libellés des questions et boutons en Inter Display Regular. */

/* Version d'essai de Lazare : sans lettres accentuées ni « », remplacées par « Lazare Repli » (Inter Display
   ajustée sur la hauteur d'x de Lazare, comme dans Transpose). */
@font-face {
  font-family: "Lazare Grotesk";
  src: url("polices/LazareGroteskTrial-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Lazare Repli";
  src: url("polices/InterDisplay-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
  size-adjust: 95%; ascent-override: 100%; descent-override: 25%;
}

:root {
  --encre: #29372E;          /* texte principal et boutons (site + thème Fillout) */
  --encre-douce: #6B6B6B;    /* texte secondaire */
  --sauge: #AAB7A2;          /* accent du site (titre « même sans idée ») */
  --sauge-claire: #CBD8C9;
  --sauge-voile: #F1F4EF;    /* fond d'une réponse choisie */
  --fond: #FFFFFF;
  --carte: #FAFAFA;          /* fond des questions, demandé par Pierre */
  --trait: #E6E9E4;
  --trait-fort: #D3D9D0;
  --erreur: #B3261E;
  --rayon: 12px;
  --police-titre: "Lazare Grotesk", "Lazare Repli", ui-sans-serif, system-ui, sans-serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--fond); color: var(--encre);
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
  font-variation-settings: "opsz" 32; font-feature-settings: "ss01", "cv11";
  font-size: 16px; line-height: 1.5; font-weight: 300; font-synthesis: none; -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font: inherit; color: inherit; font-variation-settings: inherit; }

/* --- en-tête --- */
.entete {
  position: sticky; top: 0; z-index: 5; background: rgba(255,255,255,.92);
  backdrop-filter: saturate(1.4) blur(10px); -webkit-backdrop-filter: saturate(1.4) blur(10px);
}
.entete-ligne {
  max-width: 1040px; margin: 0 auto; padding: 18px 24px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.logo { height: 22px; width: auto; display: block; }
.compte { display: flex; align-items: center; gap: 14px; font-size: 14px; color: var(--encre-douce); min-width: 0; }
.compte .email { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 36vw; }
.lien {
  background: none; border: 0; padding: 0; cursor: pointer; color: var(--encre);
  text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--sauge-claire);
  font-size: 14px;
}
.lien:hover { text-decoration-color: var(--encre); }
.progression { height: 3px; background: var(--trait); }
.progression > div { height: 100%; width: 0; background: var(--encre); transition: width .35s ease; }

/* --- carte centrale --- */
main { max-width: 680px; margin: 0 auto; padding: 40px 24px 96px; }
.carte {
  background: var(--carte); border: 1px solid var(--trait); border-radius: 20px;
  padding: 44px 44px 36px;
  animation: entree .28s ease;
}
@keyframes entree { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .carte { animation: none; } .progression > div { transition: none; } }

.etiquette {
  display: inline-block; font-family: "Martian Mono", ui-monospace, monospace; font-size: 11px;
  letter-spacing: .06em; text-transform: uppercase; color: var(--encre-douce);
  border: 1px solid var(--trait-fort); border-radius: 6px; padding: 3px 8px; margin-bottom: 18px;
}
h1, h2, h3 { margin: 0 0 12px; line-height: 1.2; }
h1, h2 { font-family: var(--police-titre); font-weight: 400; letter-spacing: -0.03em; line-height: 1.1; }
h1 strong, h2 strong { font-weight: inherit; }
h1 { font-size: 36px; }
h2 { font-size: 28px; }
h3 { font-size: 18px; font-weight: 400; letter-spacing: -0.01em; }
.titre-accent { color: var(--sauge); }
p { margin: 0 0 12px; }
.texte { color: var(--encre); }
.texte p { color: var(--encre-douce); }
.texte h2 + p, .texte h1 + p { margin-top: -2px; }
.sous-titre { color: var(--encre-douce); font-size: 17px; }

.separateur { border: 0; border-top: 1px solid var(--trait); margin: 28px 0; }

/* --- image des pages de section (static/visuel/visuel.js) --- */
.visuel { position: relative; height: 280px; margin: -44px -44px 4px; }
.visuel canvas {
  position: absolute; inset: 0; width: 100% !important; height: 100% !important; display: block;
  animation: apparition .6s ease;
  -webkit-mask-image: linear-gradient(to bottom, #000 60%, transparent 100%);   /* fondu blanc en bas */
          mask-image: linear-gradient(to bottom, #000 60%, transparent 100%);
}
@keyframes apparition { from { opacity: 0; } to { opacity: 1; } }

/* --- questions --- */
.question { margin: 26px 0 0; border: 0; padding: 0; min-width: 0; }
.question:first-child { margin-top: 0; }
.libelle { display: block; font-weight: 400; font-size: 17px; margin-bottom: 10px; letter-spacing: -0.01em; }
.libelle p { margin: 0; color: var(--encre); }
.libelle p + p { margin-top: 6px; }
.obligatoire { color: var(--sauge); margin-left: 2px; }
.aide { color: var(--encre-douce); font-size: 14px; margin: -4px 0 12px; white-space: pre-line; }
.facultatif { color: var(--encre-douce); font-weight: 300; font-size: 13px; margin-left: 6px; }

.champ, select.champ, textarea.champ {
  width: 100%; background: #fff; border: 1px solid var(--trait-fort); border-radius: 10px;
  padding: 13px 14px; outline: none; transition: border-color .15s, box-shadow .15s;
}
textarea.champ { resize: vertical; min-height: 120px; line-height: 1.5; }
.champ:focus { border-color: var(--encre); box-shadow: 0 0 0 4px rgba(170, 183, 162, .28); }
.champ::placeholder { color: #9AA19A; }
select.champ {
  appearance: none; -webkit-appearance: none; padding-right: 40px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath stroke='%2329372E' stroke-width='1.5' d='m1 1.5 5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center;
}
.compteur { text-align: right; font-size: 12px; color: var(--encre-douce); margin-top: 6px; }

.choix { display: grid; gap: 10px; }
.option {
  position: relative; display: flex; align-items: flex-start; gap: 12px; cursor: pointer;
  background: #fff; border: 1px solid var(--trait-fort); border-radius: var(--rayon);
  padding: 13px 14px; transition: border-color .15s, background .15s; user-select: none;
}
.option:hover { border-color: var(--sauge); }
.option input { position: absolute; opacity: 0; pointer-events: none; }
.option .touche {
  flex: none; width: 24px; height: 24px; border-radius: 6px; border: 1px solid var(--trait-fort);
  display: grid; place-items: center; font-size: 12px; font-weight: 400; color: var(--encre-douce);
  background: var(--carte); margin-top: -1px; transition: all .15s;
}
.option.multiple .touche { border-radius: 6px; }
.option .texte-option { flex: 1; }
.option:has(input:checked) { border-color: var(--encre); background: var(--sauge-voile); }
.option:has(input:checked) .touche { background: var(--encre); border-color: var(--encre); color: #fff; }
.option:has(input:focus-visible) { box-shadow: 0 0 0 4px rgba(170, 183, 162, .35); }
.option.bloquee { opacity: .45; cursor: not-allowed; }
.limite { font-size: 13px; color: var(--encre-douce); margin: -2px 0 10px; }

/* curseur 0–5 */
.curseur { display: flex; align-items: center; gap: 16px; }
.curseur input[type=range] { flex: 1; -webkit-appearance: none; appearance: none; height: 28px; background: transparent; cursor: pointer; }
.curseur input[type=range]::-webkit-slider-runnable-track { height: 6px; border-radius: 6px; background: linear-gradient(to right, var(--encre) var(--p, 0%), var(--trait) var(--p, 0%)); }
.curseur input[type=range]::-moz-range-track { height: 6px; border-radius: 6px; background: var(--trait); }
.curseur input[type=range]::-moz-range-progress { height: 6px; border-radius: 6px; background: var(--encre); }
.curseur input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 2px solid var(--encre); margin-top: -8px; }
.curseur input[type=range]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 2px solid var(--encre); }
.curseur input[type=range]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 5px rgba(170, 183, 162, .4); }
.curseur .valeur {
  flex: none; min-width: 48px; text-align: center; font-weight: 500; font-size: 18px;
  background: #fff; border: 1px solid var(--trait-fort); border-radius: 10px; padding: 6px 8px;
}
.curseur .valeur.vide { color: #9AA19A; font-weight: 300; }
.bornes { display: flex; justify-content: space-between; font-size: 12px; color: var(--encre-douce); margin: 4px 64px 0 0; }

/* échelle 1–10 */
.echelle { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 6px; }
.echelle label {
  display: grid; place-items: center; height: 46px; cursor: pointer; background: #fff;
  border: 1px solid var(--trait-fort); border-radius: 10px; font-weight: 400; transition: all .15s;
}
.echelle label:hover { border-color: var(--sauge); }
.echelle input { position: absolute; opacity: 0; pointer-events: none; }
.echelle label:has(input:checked) { background: var(--encre); border-color: var(--encre); color: #fff; }
.echelle label:has(input:focus-visible) { box-shadow: 0 0 0 4px rgba(170, 183, 162, .35); }
.echelle-bornes { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; color: var(--encre-douce); margin-top: 8px; }

/* photo */
.depot {
  display: flex; align-items: center; gap: 18px; background: #fff; border: 1px dashed var(--trait-fort);
  border-radius: var(--rayon); padding: 18px; cursor: pointer; transition: border-color .15s, background .15s;
}
.depot:hover, .depot.survol { border-color: var(--encre); background: var(--sauge-voile); }
.depot input { position: absolute; opacity: 0; pointer-events: none; width: 1px; }
.avatar {
  flex: none; width: 64px; height: 64px; border-radius: 50%; background: var(--carte) center/cover no-repeat;
  border: 1px solid var(--trait); display: grid; place-items: center; color: var(--sauge);
}
.depot strong { display: block; font-weight: 400; }
.depot span { font-size: 14px; color: var(--encre-douce); }

/* téléphone */
.telephone { display: flex; gap: 8px; }
.telephone select.champ { width: auto; flex: none; }

/* --- erreurs --- */
.erreur { color: var(--erreur); font-size: 14px; margin-top: 8px; }
.question.en-erreur .champ, .question.en-erreur .option, .question.en-erreur .echelle label { border-color: rgba(179, 38, 30, .5); }
.bandeau-erreur {
  background: #FDF3F2; border: 1px solid rgba(179, 38, 30, .25); color: var(--erreur);
  border-radius: 10px; padding: 12px 14px; font-size: 14px; margin-top: 18px;
}

.bandeau-ok {
  background: #F1F5EE; border: 1px solid rgba(147, 164, 138, .45); color: var(--encre);
  border-radius: 10px; padding: 12px 14px; font-size: 14px; margin-bottom: 18px;
}
.bandeau-ok strong { font-weight: 500; }

/* --- boutons --- */
.actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 34px; }
.actions .droite { display: flex; align-items: center; gap: 14px; margin-left: auto; }
.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer;
  background: var(--encre); color: #fff; border: 1px solid var(--encre); border-radius: 10px;
  padding: 12px 22px; font-weight: 400; font-size: 15px; text-decoration: none;
  transition: transform .08s, background .15s, opacity .15s;
}
.bouton:hover { background: #1F2B23; }
.bouton:active { transform: translateY(1px); }
.bouton:focus-visible { outline: none; box-shadow: 0 0 0 4px rgba(170, 183, 162, .45); }
.bouton[disabled] { opacity: .55; cursor: progress; }
.bouton.large { width: 100%; padding: 14px 22px; }
.bouton.secondaire { background: #fff; color: var(--encre); border-color: var(--trait-fort); }
.bouton.secondaire:hover { border-color: var(--encre); background: #fff; }
.raccourci { font-size: 12px; color: var(--encre-douce); }
.raccourci kbd { font-family: inherit; border: 1px solid var(--trait-fort); border-bottom-width: 2px; border-radius: 5px; padding: 0 5px; background: #fff; }

/* --- connexion --- */
.connexion { max-width: 460px; margin: 6vh auto 0; }
.connexion .carte { padding: 40px; }
.note { font-size: 14px; color: var(--encre-douce); background: #fff; border: 1px solid var(--trait); border-radius: 10px; padding: 12px 14px; margin: 18px 0 22px; }
.note strong { color: var(--encre); font-weight: 500; }
.code-saisie { letter-spacing: .5em; font-size: 24px; text-align: center; font-weight: 500; padding-left: calc(14px + .5em); }
.ligne-liens { display: flex; justify-content: space-between; gap: 12px; margin-top: 18px; flex-wrap: wrap; }
.essai {
  background: #FFF8E6; border: 1px solid #F1DFAE; color: #6B5A1E; border-radius: 10px;
  padding: 10px 14px; font-size: 13px; margin-bottom: 18px;
}
.essai code { font-weight: 700; font-size: 15px; letter-spacing: .15em; }

/* --- couverture et fin --- */
.couverture { text-align: center; padding: 64px 44px 52px; }
.couverture h1 { font-size: 48px; letter-spacing: -0.035em; line-height: 1.02; margin-bottom: 18px; }
.couverture .sous-titre { max-width: 500px; margin: 0 auto 24px; }
.duree {
  display: inline-flex; align-items: center; gap: 8px; margin: 0 auto 28px; padding: 7px 14px;
  background: #fff; border: 1px solid var(--trait); border-radius: 999px; font-size: 14px; font-weight: 400;
}
.duree svg { color: var(--sauge); flex: none; }
.fin { text-align: center; }
.fin .texte h1 { font-size: 28px; }
.fin .texte h3 { color: var(--encre-douce); font-weight: 300; font-size: 16px; line-height: 1.6; }
.coche { width: 56px; height: 56px; border-radius: 50%; background: var(--encre); color: #fff; display: grid; place-items: center; margin: 0 auto 22px; }

.chargement { text-align: center; color: var(--encre-douce); padding: 80px 0; }

/* --- essai : page Notion simulée --- */
.essai-notion main { max-width: 980px; }
.essai-notion table { width: 100%; border-collapse: collapse; font-size: 14px; background: #fff; }
.essai-notion th, .essai-notion td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--trait); vertical-align: top; }
.essai-notion th { background: var(--carte); font-weight: 500; }

/* --- téléphone --- */
@media (max-width: 640px) {
  .entete-ligne { padding: 14px 16px; }
  .logo { height: 18px; }
  .compte .email { display: none; }
  main { padding: 20px 16px 72px; }
  .carte, .connexion .carte { padding: 28px 20px 24px; border-radius: 16px; }
  .visuel { height: 220px; margin: -28px -20px 4px; }
  .couverture { padding: 44px 20px 36px; }
  .couverture h1 { font-size: 36px; }
  h2 { font-size: 22px; }
  .echelle { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .raccourci { display: none; }
  .bornes { margin-right: 0; }
}