/* Base commune des trois maquettes : la police et l'encre du questionnaire PDF. */
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("fonts/atkinson-hyperlegible-next-latin.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
}

:root {
  color-scheme: light;
  --papier: #f7f9f7;
  --surface: #ffffff;
  --encre: #1c2226;
  --encre-douce: #4b5752;
  --filet: #6e7c75;
  --filet-doux: #cfd8d3;
  --grille: #cfe2d8;
  --choix: #e3efe8;
  --accent: #2c6650;
  --accent-texte: #ffffff;
  --rouge: #c0391b;
  --ombre: 0 1px 2px rgb(20 30 25 / .06), 0 6px 20px -8px rgb(20 30 25 / .18);

  --police: "Atkinson Hyperlegible Next", "Segoe UI", system-ui, sans-serif;
  --rayon: 14px;
  --t-corps: clamp(1.125rem, 1rem + .45vw, 1.5rem);
  --t-aide: clamp(1.05rem, .95rem + .35vw, 1.35rem);
  --t-titre: clamp(1.75rem, 1.1rem + 2.5vw, 3.6rem);
  --t-saisie: clamp(1.35rem, 1.05rem + 1.1vw, 2.25rem);
  --douceur: cubic-bezier(.22, 1, .36, 1);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --papier: #101517;
    --surface: #182023;
    --encre: #e9efeb;
    --encre-douce: #aab7b1;
    --filet: #84938c;
    --filet-doux: #2f3b3c;
    --grille: #24362e;
    --choix: #1d3a2f;
    --accent: #8fd1b3;
    --accent-texte: #0c1a14;
    --rouge: #ff8a6b;
    --ombre: 0 1px 2px rgb(0 0 0 / .3), 0 10px 30px -10px rgb(0 0 0 / .6);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --papier: #101517;
  --surface: #182023;
  --encre: #e9efeb;
  --encre-douce: #aab7b1;
  --filet: #84938c;
  --filet-doux: #2f3b3c;
  --grille: #24362e;
  --choix: #1d3a2f;
  --accent: #8fd1b3;
  --accent-texte: #0c1a14;
  --rouge: #ff8a6b;
  --ombre: 0 1px 2px rgb(0 0 0 / .3), 0 10px 30px -10px rgb(0 0 0 / .6);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--papier);
  color: var(--encre);
  font-family: var(--police);
  font-size: var(--t-corps);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.etoile { color: var(--rouge); margin-left: .15em; font-weight: 700; }

[hidden] { display: none !important; }

/* Bandeau « maquette » */
.bandeau-maquette {
  display: flex; flex-wrap: wrap; gap: .25em 1em; align-items: center; justify-content: space-between;
  padding: .45em 16px; font-size: .8rem; color: var(--encre-douce);
  border-bottom: 1px solid var(--filet-doux); background: var(--surface);
}
.bandeau-maquette a { color: inherit; }
.bandeau-maquette button { background: none; border: 0; padding: 0; text-decoration: underline; color: inherit; font-size: inherit; }

/* Boutons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: 48px; padding: .55em 1.2em; border-radius: 999px;
  border: 1.5px solid var(--filet); background: var(--surface); color: var(--encre);
  font-weight: 700; font-size: 1em; line-height: 1.2;
  transition: transform .15s var(--douceur), background-color .15s, border-color .15s;
}
.btn:hover { border-color: var(--encre); }
.btn:active { transform: scale(.97); }
.btn-principal { background: var(--encre); border-color: var(--encre); color: var(--papier); }
.btn-principal:hover { background: var(--accent); border-color: var(--accent); color: var(--accent-texte); }
.btn-lien { border: 0; background: none; min-height: 44px; padding: .2em .4em; text-decoration: underline; text-underline-offset: .2em; font-weight: 600; color: var(--encre-douce); }

/* Saisies */
.saisie {
  display: block; width: 100%;
  padding: .55em .75em;
  border: 1.5px solid var(--filet); border-radius: 10px;
  background: var(--surface); color: var(--encre);
  transition: border-color .15s, box-shadow .15s;
}
.saisie::placeholder { color: var(--encre-douce); opacity: .75; }
.saisie:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent); }
textarea.saisie { resize: vertical; min-height: 3.2em; line-height: 1.4; }
.sous-champ + .sous-champ { margin-top: 1em; }
.sous-label { display: block; font-weight: 700; margin-bottom: .3em; }
.conseil { margin-top: .9em; color: var(--encre-douce); font-size: var(--t-aide); }
.erreur { color: var(--rouge); font-weight: 700; min-height: 0; }
.erreur:empty { display: none; }

/* Exemples à toucher */
.exemples { display: flex; flex-wrap: wrap; gap: .4em; align-items: center; margin-top: .5em; font-size: .85em; }
.exemples-titre { color: var(--encre-douce); margin-right: .2em; }
.exemple {
  min-height: 36px; padding: .2em .8em; border-radius: 999px;
  border: 1.5px dashed var(--filet); background: transparent; color: var(--encre);
  transition: background-color .15s, border-color .15s;
}
.exemple:hover { border-style: solid; background: var(--choix); }

/* Choix */
.choix-liste { display: grid; gap: .6em; }
.choix {
  position: relative; display: flex; align-items: center; gap: .8em;
  min-height: 56px; padding: .6em 1em;
  border: 1.5px solid var(--filet-doux); border-radius: var(--rayon);
  background: var(--surface); cursor: pointer;
  transition: border-color .15s, background-color .15s, transform .15s var(--douceur);
}
.choix:hover { border-color: var(--filet); }
.choix:active { transform: scale(.985); }
.choix-input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.choix:has(.choix-input:focus-visible) { outline: 3px solid var(--accent); outline-offset: 3px; }
.choix:has(.choix-input:checked) { border-color: var(--accent); background: var(--choix); }
.choix-texte { display: flex; flex-direction: column; }
.choix-nom { font-weight: 600; }
.choix-mot { font-size: .8em; color: var(--encre-douce); }
.lettre {
  flex: none; display: inline-grid; place-items: center;
  min-width: 1.75em; height: 1.75em; padding: 0 .3em;
  border: 1.5px solid var(--filet); border-radius: 7px;
  font-size: .78em; font-weight: 700; background: var(--surface);
  transition: background-color .15s, color .15s, border-color .15s;
}
.choix:has(.choix-input:checked) .lettre { background: var(--accent); border-color: var(--accent); color: var(--accent-texte); }
.coche { margin-left: auto; flex: none; width: 1.2em; height: 1.2em; position: relative; opacity: 0; transform: scale(.6); transition: opacity .15s, transform .2s var(--douceur); }
.coche::after {
  content: ""; position: absolute; left: .38em; top: .1em; width: .38em; height: .7em;
  border: solid var(--accent); border-width: 0 .17em .17em 0; transform: rotate(45deg);
}
.choix:has(.choix-input:checked) .coche { opacity: 1; transform: none; }

/* Ambiances */
.ambiances { grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); }
.ambiances .choix { flex-direction: column; align-items: stretch; gap: .5em; padding: .55em; }
.ambiances .lettre { position: absolute; top: 1em; left: 1em; z-index: 1; }
.ambiances .coche { position: absolute; top: auto; bottom: .7em; right: .7em; width: 1.6em; height: 1.6em; border-radius: 50%; background: var(--accent); }
.ambiances .coche::after { border-color: var(--accent-texte); }
.ambiances .choix-texte { padding-right: 1.8em; }
@media (max-width: 600px) {
  .ambiance-apercu { height: 5.4em; }
  .ambiance-aa { font-size: 1.8em; }
}
.ambiances .coche::after { left: .58em; top: .3em; }
.ambiances .choix-texte { padding: 0 .3em .2em; }
.ambiance-apercu {
  display: flex; flex-direction: column; justify-content: space-between;
  height: 7.2em; padding: .5em .7em; border-radius: 10px;
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / .08);
}
.ambiance-aa { font-size: 2.2em; line-height: 1; align-self: flex-end; font-weight: 700; }
.ambiance-pastilles { display: flex; gap: .3em; }
.ambiance-pastilles i { width: 1.05em; height: 1.05em; border-radius: 50%; box-shadow: 0 0 0 1px rgb(0 0 0 / .15); }
.ambiance-apercu.blanche {
  align-items: center; justify-content: center;
  border: 2px dashed var(--filet); box-shadow: none; color: var(--encre-douce);
}
.ambiance-apercu.blanche .ambiance-aa { align-self: center; }

/* Résumé */
.resume { display: grid; gap: 0; margin: 0; }
.resume-ligne {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .2em 1em; align-items: start;
  padding: .8em 0; border-top: 1px solid var(--filet-doux);
}
.resume-ligne dt { font-size: .85em; color: var(--encre-douce); grid-column: 1; }
.resume-ligne dd { margin: 0; font-weight: 600; white-space: pre-line; grid-column: 1; overflow-wrap: anywhere; }
.resume-ligne .btn-lien { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
.note-loi { font-size: .8em; color: var(--encre-douce); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}