/* Page d'attente : mêmes couleurs, police et symboles que la charte du réseau (app/web/style.css), une seule colonne calme. */

@font-face {
  font-family: "Bricolage Grotesque";
  src: url("/polices/bricolage-grotesque.woff2") format("woff2");
  font-weight: 200 800;
  font-stretch: 75% 100%;
  font-display: swap;
}

:root {
  /* Les mêmes couleurs que le site (app/web/style.css), toujours en clair, comme lui (demande du fondateur, 14 oct.). */
  --fond: #ffffff;
  --encre: #0f1419;
  --encre-douce: #272c30;
  --gris: #536471;
  --filet: rgba(0, 0, 0, 0.08);
  --voile: #f2f3f5;
  --outremer: #2534eb;
  --outremer-survol: #1d29c4;
  --outremer-voile: #eef2ff;
  --sur-outremer: #ffffff;
  --soleil: #f59e0b;
  --encre-sur-soleil: #451a03;
  --signal: #d97706;
  --signal-voile: #fffbeb;
  --valide: #2534eb;
  --valide-voile: #eef2ff;
  --police: "Bricolage Grotesque", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --police-machine: "Cascadia Mono", "JetBrains Mono", Consolas, ui-monospace, monospace;
  color-scheme: light;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--fond);
  color: var(--encre);
  font-family: var(--police);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

.barre { border-bottom: 1px solid var(--filet); }
.barre-dedans { max-width: 1140px; margin: 0 auto; padding: 14px 24px; display: flex; align-items: center; justify-content: space-between; }
.marque { display: flex; align-items: center; gap: 10px; margin: 0; font-weight: 700; font-size: 20px; letter-spacing: -0.01em; color: var(--encre); text-decoration: none; }
.retour-demo { font-size: 14px; font-weight: 600; color: var(--gris); text-decoration: none; }
.retour-demo:hover { color: var(--encre); }
.logo { width: 34px; height: 24px; flex: none; }
.logo .carre { fill: var(--outremer); }
.logo .rond { fill: var(--soleil); stroke: var(--fond); stroke-width: 2; }

main { max-width: 720px; margin: 0 auto; padding: 0 16px 64px; }
.ecran { padding-top: clamp(36px, 7vw, 72px); }

h1 {
  margin: 0;
  font-size: clamp(32px, 6.4vw, 54px);
  line-height: 1.06;
  font-weight: 800;
  font-stretch: 85%;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
h1:focus { outline: none; }
.accent { color: var(--outremer); }
.sous-titre { margin: 18px 0 0; max-width: 60ch; color: var(--encre-douce); font-size: 18px; text-wrap: pretty; }

.inscription { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 32px; }
input[type="email"], input[type="text"], textarea {
  font: inherit;
  color: var(--encre);
  background: var(--fond);
  border: 1px solid rgba(0, 0, 0, 0.18);
  border-radius: 10px;
  padding: 12px 14px;
}
input[type="email"]:focus, input[type="text"]:focus, textarea:focus { outline: none; border-color: var(--outremer); box-shadow: 0 0 0 3px color-mix(in srgb, var(--outremer) 14%, transparent); }
input[type="email"] { flex: 1 1 260px; min-width: 0; }
button:focus-visible { outline: 3px solid color-mix(in srgb, var(--outremer) 40%, transparent); outline-offset: 2px; }
button {
  font: inherit;
  font-weight: 650;
  border: 1.5px solid var(--filet);
  border-radius: 10px;
  padding: 12px 20px;
  background: var(--fond);
  color: var(--encre);
  cursor: pointer;
}
button.principal { background: var(--outremer); border-color: var(--outremer); color: var(--sur-outremer); }
button.principal:hover { background: var(--outremer-survol); border-color: var(--outremer-survol); }
button:disabled { opacity: 0.6; cursor: default; }
.ecran > button.principal { margin-top: 28px; }

.sous-bouton { margin: 14px 0 0; font-size: 15px; font-weight: 600; }
.confidentialite { margin: 6px 0 0; max-width: 60ch; font-size: 14px; color: var(--gris); }
.erreur { margin: 12px 0 0; padding: 10px 14px; border-radius: 10px; background: var(--signal-voile); color: var(--signal); font-weight: 600; }

.promesse { margin: 48px 0 0; padding-top: 24px; border-top: 1px solid var(--filet); max-width: 40ch; font-size: 19px; font-weight: 650; line-height: 1.35; letter-spacing: -0.01em; color: var(--encre-douce); }

.questions { margin-top: 28px; }
.question { margin: 0 0 22px; padding: 18px 0 0; border: 0; border-top: 1px solid var(--filet); }
.question legend { padding: 0; font-weight: 700; font-size: 18px; margin-bottom: 8px; float: left; width: 100%; }
.question legend + * { clear: both; }
.precision { font-weight: 500; color: var(--gris); font-size: 15px; }
.choix { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 5px 0; }
.choix input[type="radio"], .choix input[type="checkbox"] { width: 18px; height: 18px; margin: 0; accent-color: var(--outremer); flex: none; }
.choix label { cursor: pointer; flex: 1 1 200px; }
.choix input:disabled + label { color: var(--gris); cursor: default; }
.libre { flex: 1 1 100%; margin-left: 28px; padding: 8px 12px !important; }
textarea { width: 100%; resize: vertical; }

.visuellement-cache, .piege {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.apercu { margin-top: 24px; padding: 16px 18px; border: 1px solid var(--filet); border-radius: 12px; background: var(--voile); max-width: 60ch; }
.apercu-titre { margin: 0 0 8px; font-weight: 650; }
.apercu dl { margin: 0 0 10px; }
.apercu dt { color: var(--gris); font-size: 14px; margin-top: 8px; }
.apercu dd { margin: 0; overflow-wrap: anywhere; }

/* Une longue liste de choix tient sur deux colonnes sur grand écran (moins de défilement). */
@media (min-width: 640px) {
  .question:has(.choix:nth-of-type(6)) { display: grid; grid-template-columns: 1fr 1fr; column-gap: 28px; }
  .question:has(.choix:nth-of-type(6)) legend { grid-column: 1 / -1; }
}