/* Portail feedback ATECH — charte web v1 (mesurée sur atechs.be le 2026-07-29)
   Densité 5/10 · variance 3/10 · mouvement 2/10 : une page de travail, lue au calme, souvent au téléphone. */

@font-face { font-family: "Jura"; src: url("/assets/jura-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Jura"; src: url("/assets/jura-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  --marine: #141E2E;
  --cyan: #00BFE0;
  --fond: #f0f2f5;
  --surface: #ffffff;
  --texte: #212529;
  --texte-doux: #4a525c;
  --filet: #d8dde4;
  --lien: #00788f;
  --ok: #1d7446;      --ok-fond: #e5f3ea;
  --ko: #b3261e;      --ko-fond: #fbe9e7;
  --bloque: #85600a;  --bloque-fond: #fbf1dc;
  --champ: #ffffff;
  --dur-court: 150ms;
  --ease-sortie: cubic-bezier(.2, .8, .2, 1);
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --fond: #0d141e;
    --surface: #152030;
    --texte: #e5e9ef;
    --texte-doux: #a9b3c1;
    --filet: #26344a;
    --lien: #4fd2ec;
    --ok: #5fcf92;      --ok-fond: #12301f;
    --ko: #f28b82;      --ko-fond: #3a1714;
    --bloque: #e3b454;  --bloque-fond: #33270c;
    --champ: #0f1826;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 1rem; scroll-padding-bottom: 5rem; }
body {
  margin: 0; background: var(--fond); color: var(--texte);
  font-family: "Jura", "Segoe UI", system-ui, sans-serif; font-size: 1.0625rem; line-height: 1.55;
  font-weight: 400;
}
body.avec-barre { padding-bottom: 4rem; }
img, video { max-width: 100%; height: auto; }
a { color: var(--lien); text-underline-offset: .15em; }
h1, h2, h3, h4 { line-height: 1.2; margin: 0; font-weight: 700; }
p { margin: 0 0 .75rem; }
code { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: .9em; }
svg { width: 1.1em; height: 1.1em; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.visuellement-cache { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- bandeau ---------- */
.bandeau { background: var(--marine); color: #fff; }
.bandeau-in { max-width: 48rem; margin: 0 auto; padding: .7rem 1rem; }
.marque { display: flex; align-items: center; gap: .65rem; min-height: 2.75rem; }
.marque-signe { width: 2.75rem; height: 2.75rem; }
.marque-nom { font-size: 1.15rem; letter-spacing: .02em; white-space: nowrap; }
.marque-nom b { letter-spacing: .06em; }
.marque-sep { width: 1px; align-self: stretch; margin: .35rem .35rem; background: rgba(255, 255, 255, .28); }
.marque-partenaire { height: 1rem; width: auto; }

/* ---------- structure ---------- */
main { max-width: 48rem; margin: 0 auto; padding: 0 1rem 2rem; }
.entete { padding: 2rem 0 1rem; }
.surtitre { color: var(--texte-doux); font-size: .95rem; letter-spacing: .02em; margin-bottom: .4rem; }
h1 { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.15rem); margin-bottom: .75rem; }
.sous-titre { font-size: 1.1rem; color: var(--texte-doux); }
.intro { margin: 1rem 0; }
.intro ul, .intro ol { padding-left: 1.3rem; margin: 0 0 .75rem; }

.acces { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin: 1.25rem 0; }
.acces-aide { color: var(--texte-doux); font-size: .95rem; }

.mode-emploi { border-left: 3px solid var(--cyan); padding: .15rem 0 .15rem 1rem; margin: 1.5rem 0; }
.mode-emploi-titre { font-weight: 700; margin-bottom: .35rem; }
.mode-emploi ol { margin: 0; padding-left: 1.2rem; color: var(--texte-doux); }
.mode-emploi li + li { margin-top: .2rem; }

.bienvenue { color: var(--texte-doux); }
.alerte { background: var(--bloque-fond); color: var(--texte); border-left: 3px solid var(--bloque); padding: .75rem 1rem; }

.sommaire { border-top: 1px solid var(--filet); border-bottom: 1px solid var(--filet); padding: .75rem 0; margin-top: 1.5rem; }
.sommaire ol { margin: 0; padding-left: 1.3rem; }
.sommaire li { padding: .15rem 0; }
.sommaire-n { color: var(--texte-doux); font-size: .9rem; white-space: nowrap; }

.bloc { padding-top: 2.25rem; }
.bloc > h2 { display: flex; align-items: baseline; gap: .6rem; font-size: 1.45rem; padding-bottom: .6rem; border-bottom: 2px solid var(--marine); }
@media (prefers-color-scheme: dark) { .bloc > h2 { border-bottom-color: var(--cyan); } }
.bloc-num { color: var(--lien); font-size: 1.1rem; }
.bloc-intro { margin-top: .75rem; color: var(--texte-doux); }

/* ---------- un point à tester ---------- */
.point { background: var(--surface); border: 1px solid var(--filet); border-left: 4px solid var(--filet); margin-top: 1rem; padding: 1.1rem 1rem 1rem; transition: border-color var(--dur-court) var(--ease-sortie); }
.point[data-statut="ok"] { border-left-color: var(--ok); }
.point[data-statut="ko"] { border-left-color: var(--ko); }
.point[data-statut="bloque"] { border-left-color: var(--bloque); }
.point-tete { display: flex; gap: .6rem; align-items: baseline; }
.point-num { color: var(--texte-doux); font-size: .95rem; font-variant-numeric: tabular-nums; flex: none; }
.point-tete h3 { font-size: 1.15rem; }
.point-corps { margin-top: .6rem; }
.point-corps h4 { font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; color: var(--texte-doux); margin: 1rem 0 .35rem; }
.point-corps ul, .point-corps ol { padding-left: 1.3rem; margin: 0 0 .5rem; }
.etapes li + li { margin-top: .25rem; }
.attendu { border-left: 2px solid var(--cyan); padding-left: .75rem; }
.attendu p:last-child, .point-contexte p:last-child { margin-bottom: 0; }

.demo, .illustration { margin: 1rem 0 .25rem; }
.demo video, .illustration img { display: block; width: 100%; border: 1px solid var(--filet); background: #000; }
.illustration img { background: transparent; }
figcaption { font-size: .9rem; color: var(--texte-doux); margin-top: .35rem; }

.point-lien a { display: inline-flex; align-items: center; gap: .35rem; }

.historique { margin-top: 1rem; border: 1px dashed var(--filet); padding: .75rem .9rem; font-size: .98rem; }
.historique-titre { font-weight: 700; margin-bottom: .4rem; }
.historique blockquote { margin: 0 0 .6rem; padding-left: .75rem; border-left: 2px solid var(--filet); color: var(--texte-doux); }
.historique-qui { font-weight: 700; color: var(--lien); margin-bottom: .2rem; }
.historique-reponse p:last-child { margin-bottom: 0; }

/* ---------- la réponse ---------- */
.reponse { margin-top: 1.1rem; padding-top: 1rem; border-top: 1px solid var(--filet); }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
legend { font-weight: 700; margin-bottom: .5rem; padding: 0; }
.choix-statut { display: grid; grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr)); gap: .5rem; }
.opt, .opt-choix { position: relative; display: block; cursor: pointer; }
.opt input, .opt-choix input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.opt span, .opt-choix span {
  display: flex; align-items: center; justify-content: center; gap: .45rem; min-height: 2.9rem;
  padding: .5rem .75rem; border: 1px solid var(--filet); background: var(--champ); color: var(--texte);
  font-weight: 700; text-align: center;
  transition: background-color var(--dur-court) var(--ease-sortie), border-color var(--dur-court) var(--ease-sortie), color var(--dur-court) var(--ease-sortie);
}
.opt:hover span, .opt-choix:hover span { border-color: var(--texte-doux); }
.opt input:focus-visible + span, .opt-choix input:focus-visible + span { outline: 3px solid var(--cyan); outline-offset: 2px; }
.opt-ok input:checked + span { background: var(--ok-fond); border-color: var(--ok); color: var(--ok); }
.opt-ko input:checked + span { background: var(--ko-fond); border-color: var(--ko); color: var(--ko); }
.opt-bloque input:checked + span { background: var(--bloque-fond); border-color: var(--bloque); color: var(--bloque); }
.choix-liste { display: grid; gap: .5rem; }
.opt-choix span { justify-content: flex-start; text-align: left; font-weight: 400; }
.opt-choix input:checked + span { border-color: var(--lien); box-shadow: inset 4px 0 0 var(--lien); font-weight: 700; }

.champ { display: block; margin: 1rem 0 .35rem; }
.champ-libelle { font-weight: 700; }
textarea, input[type="text"], input[type="date"] {
  display: block; width: 100%; font: inherit; color: var(--texte); background: var(--champ);
  border: 1px solid var(--filet); padding: .6rem .7rem; border-radius: 0;
}
input[type="date"] { max-width: 14rem; min-height: 2.9rem; }
textarea { resize: vertical; min-height: 5.5rem; }
textarea:focus, input:focus { outline: 3px solid var(--cyan); outline-offset: 0; border-color: transparent; }
textarea:disabled, input:disabled { opacity: .6; }

.captures { margin-top: .6rem; }
.vignettes { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.vignettes li { position: relative; width: 6.5rem; }
.vignettes img { display: block; width: 6.5rem; height: 4.5rem; object-fit: cover; border: 1px solid var(--filet); }
.vignettes button { display: block; width: 100%; margin-top: .2rem; font: inherit; font-size: .8rem; background: none; border: 0; color: var(--lien); cursor: pointer; padding: .2rem 0; text-decoration: underline; }
.vignettes li:last-child { margin-bottom: .5rem; }
.bouton-fichier { position: relative; display: inline-flex; align-items: center; gap: .45rem; min-height: 2.75rem; color: var(--lien); cursor: pointer; font-weight: 700; }
.bouton-fichier input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.bouton-fichier:focus-within { outline: 3px solid var(--cyan); outline-offset: 2px; }

.etat-point { min-height: 1.3rem; margin: .4rem 0 0; font-size: .88rem; color: var(--texte-doux); }
.etat-point.erreur { color: var(--ko); }

/* ---------- questions ---------- */
.question { background: var(--surface); border: 1px solid var(--filet); padding: 1.1rem 1rem 1rem; margin-top: 1rem; }
.question-titre { display: block; font-weight: 700; font-size: 1.1rem; margin-bottom: .5rem; }
.question .aide { color: var(--texte-doux); font-size: .97rem; margin-bottom: .7rem; }
.question .aide p:last-child { margin-bottom: 0; }

/* ---------- boutons ---------- */
.bouton { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 3rem; padding: .6rem 1.25rem; font: inherit; font-weight: 700; text-decoration: none; cursor: pointer; border: 1px solid transparent; }
.bouton-principal { background: var(--cyan); color: var(--marine); }
.bouton-principal:hover { background: #22cbe8; }
.bouton-principal:disabled { opacity: .55; cursor: progress; }
.bouton-secondaire { background: var(--marine); color: #fff; }
@media (prefers-color-scheme: dark) { .bouton-secondaire { background: transparent; border-color: var(--cyan); color: var(--cyan); } }
.bouton:focus-visible { outline: 3px solid var(--cyan); outline-offset: 3px; }

/* ---------- envoi ---------- */
.envoi { margin-top: 2.5rem; padding: 1.5rem 1rem; background: var(--surface); border: 1px solid var(--filet); border-top: 4px solid var(--cyan); }
.envoi h2 { font-size: 1.45rem; margin-bottom: .75rem; }
.recap { color: var(--texte-doux); }
.envoi-etat { margin-top: .9rem; font-weight: 700; min-height: 1.4rem; }
.envoi-etat.succes { color: var(--ok); }
.envoi-etat.erreur { color: var(--ko); }
.envoi .aide { color: var(--texte-doux); font-size: .92rem; margin-bottom: 0; }

/* ---------- barre de progression ---------- */
.barre { position: fixed; left: 0; right: 0; bottom: 0; background: var(--marine); color: #fff; z-index: 10; border-top: 2px solid var(--cyan); }
.barre-in { max-width: 48rem; margin: 0 auto; padding: .55rem 1rem; display: flex; align-items: center; gap: .75rem; font-size: .92rem; }
.barre-sauvegarde { color: #b9c4d2; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.barre-lien { color: var(--cyan); font-weight: 700; white-space: nowrap; }

/* ---------- pied ---------- */
.pied { border-top: 1px solid var(--filet); }
.pied-in { max-width: 48rem; margin: 0 auto; padding: 1.25rem 1rem 2rem; color: var(--texte-doux); font-size: .9rem; }
.noscript { max-width: 48rem; margin: 1rem auto; padding: 0 1rem; color: var(--ko); }

/* ---------- pages simples (accueil, lien inactif) ---------- */
.page-simple { min-height: 100vh; display: grid; place-items: center; padding: 1rem; }
.simple { max-width: 30rem; background: var(--surface); border: 1px solid var(--filet); border-top: 4px solid var(--cyan); padding: 2rem 1.5rem; }
.simple-marque { margin-bottom: 1.25rem; color: var(--texte); }
.simple h1 { font-size: 1.5rem; margin-bottom: .75rem; }
.simple p { color: var(--texte-doux); margin: 0; }

@media (min-width: 40rem) {
  .point, .question { padding: 1.35rem 1.5rem 1.2rem; }
  .envoi { padding: 1.75rem 1.5rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; }
}