/* evalio — styles partagés (design tokens + chrome commun) */
:root{
  --encre:#1b2733; --encre-doux:#4a5a6a; --papier:#f7f5f1; --carte:#ffffff;
  --trait:#dfe3e0; --trait-fort:#c3cbc8; --accent:#2f6f5e; --accent-doux:#e4efea;
  --juste:#2f6f5e; --faux:#b4452f; --attention:#9a6b12;
  --rayon:12px; --ombre:0 1px 2px rgba(27,39,51,.06), 0 8px 26px rgba(27,39,51,.06);
  color-scheme:light;
}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){
  --encre:#e8ece9; --encre-doux:#9fb0aa; --papier:#10171c; --carte:#172028;
  --trait:#273440; --trait-fort:#384854; --accent:#6bbfa6; --accent-doux:#17302a;
  --juste:#6bbfa6; --faux:#e08b76; --attention:#d6a94a; color-scheme:dark; }}
:root[data-theme="dark"]{
  --encre:#e8ece9; --encre-doux:#9fb0aa; --papier:#10171c; --carte:#172028;
  --trait:#273440; --trait-fort:#384854; --accent:#6bbfa6; --accent-doux:#17302a;
  --juste:#6bbfa6; --faux:#e08b76; --attention:#d6a94a; color-scheme:dark; }
*{box-sizing:border-box}
:root{box-sizing:border-box;padding-top:env(safe-area-inset-top,0);padding-bottom:env(safe-area-inset-bottom,0)}
html,body{margin:0}
body{background:var(--papier);color:var(--encre);font-family:Inter,system-ui,sans-serif;line-height:1.5;-webkit-font-smoothing:antialiased;display:flex;flex-direction:column;min-height:100vh}

/* chrome commun */
.entete{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:6px 24px;border-bottom:1px solid var(--trait);background:var(--carte)}
.marque{font-family:Fraunces,serif;font-weight:600;font-size:36px;text-decoration:none;color:var(--encre)}
.marque span{color:var(--accent)}
.marque em{font-style:normal;font-family:Inter;font-size:12px;font-weight:600;color:var(--encre-doux);letter-spacing:.08em;margin-left:3px;vertical-align:2px}
.entete-nav a{color:var(--encre-doux);text-decoration:none;font-size:14px;font-weight:500}
.entete-nav a:hover{color:var(--encre)}
/* petit écran : la navigation passe sous la marque, sur toute la largeur */
@media(max-width:575.98px){.entete{flex-wrap:wrap;row-gap:0;padding:4px 16px 8px}.marque{font-size:30px}
  .entete-nav:first-of-type{order:3;flex-basis:100%}}
.contenu{flex:1;width:100%;max-width:720px;margin:0 auto;padding:26px 20px 60px}
.pied{border-top:1px solid var(--trait);padding:6px 18px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:12.5px;color:var(--encre-doux);background:var(--carte)}
.pied a{color:var(--encre-doux)}
/* footer fixé (fixed-bottom) : le contenu garde de quoi défiler sous lui jusqu'à sa dernière ligne */
main.avec-pied-fixe{padding-bottom:calc(var(--pied-h,56px) + 24px)}
/* en-tête sticky-top (dans le flux) : simple respiration sous lui, pas de compensation de hauteur */
main.container{padding-top:24px}
@media(max-width:767.98px){main.container{padding-top:16px}}

/* documents juridiques (CGV, confidentialité) */
.doc-legal{line-height:1.65;font-size:15px}
.doc-legal h1{margin:0 0 4px}
.doc-legal .maj{color:var(--encre-doux);font-size:13.5px;margin:0 0 28px}
.doc-legal h2{font-size:1.125rem;margin:32px 0 10px;padding-bottom:5px;border-bottom:1px solid var(--trait)}
.doc-legal p,.doc-legal li{margin:8px 0}
.doc-legal ul{padding-left:22px}
.doc-legal a{color:var(--accent);overflow-wrap:anywhere}
.doc-legal .tableau-wrap{overflow-x:auto;margin:12px 0}
.doc-legal table{border-collapse:collapse;width:100%;min-width:520px;font-size:14px}
.doc-legal th,.doc-legal td{border:1px solid var(--trait);padding:8px 10px;text-align:left;vertical-align:top}
.doc-legal th{background:var(--accent-doux);font-weight:600}

/* Vue : élément masqué tant que l'application n'a pas démarré (évite d'afficher des {{ … }}) */
[v-cloak]{display:none !important}

/* éléments réutilisables */
.carte{background:var(--carte);border:1px solid var(--trait);border-radius:var(--rayon);box-shadow:var(--ombre);padding:26px 24px}
/* Boutons : gabarit commun à Bootstrap (.btn) — réglé par ses variables, pour que
   .btn-primary & co restent intacts. Classes historiques evalio : .primaire, .fantome
   (utilisées par le questionnaire) ; dans les .ejs, préférer btn-primary / btn-outline-secondary. */
.btn{--bs-btn-font-family:inherit;--bs-btn-font-weight:600;--bs-btn-font-size:14px;--bs-btn-line-height:1.5;
  --bs-btn-padding-y:11px;--bs-btn-padding-x:20px;--bs-btn-border-radius:9px}
.btn.primaire{--bs-btn-color:#fff;--bs-btn-bg:var(--accent);--bs-btn-border-color:var(--accent);
  --bs-btn-hover-color:#fff;--bs-btn-hover-bg:color-mix(in srgb,var(--accent) 88%,#000);--bs-btn-hover-border-color:transparent;
  --bs-btn-active-color:#fff;--bs-btn-active-bg:color-mix(in srgb,var(--accent) 80%,#000);--bs-btn-active-border-color:transparent;
  --bs-btn-disabled-color:#fff;--bs-btn-disabled-bg:var(--accent);--bs-btn-disabled-border-color:var(--accent);--bs-btn-disabled-opacity:.4}
.btn.primaire:disabled{cursor:not-allowed;pointer-events:auto}
.btn.fantome{--bs-btn-color:var(--encre-doux);--bs-btn-bg:transparent;--bs-btn-border-color:var(--trait-fort);
  --bs-btn-hover-color:var(--encre);--bs-btn-hover-bg:transparent;--bs-btn-hover-border-color:var(--trait-fort);
  --bs-btn-active-color:var(--encre);--bs-btn-active-bg:transparent;--bs-btn-active-border-color:var(--trait-fort)}
/* Bootstrap met tous les liens en souligné : on garde la sobriété evalio hors des textes courants */
.marque,.entete-nav a{text-decoration:none}