/* Vocation Santé — feuille de style (téléphone d'abord). */
:root{
  --encre:#0f4c5c; --encre-fonce:#0a3440; --texte:#1d2a2e; --doux:#566a70; --fond:#f6f8f7; --carte:#fff; --ligne:#d9e3e0;
  --menthe:#e5f2ee; --ambre:#e0a526; --ambre-doux:#fbf1d9; --bien:#1f7a4d; --bien-doux:#e2f3ea; --mal:#a3322a; --mal-doux:#f8e5e3;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--fond);color:var(--texte);font:16px/1.6 var(--sans)}
a{color:var(--encre)}
main{max-width:1040px;margin:0 auto;padding:0 16px 48px}
h1,h2,h3{font-family:var(--serif);color:var(--encre-fonce);line-height:1.2}
.essai{background:var(--ambre-doux);border-bottom:1px solid #ecd18a;text-align:center;padding:6px 12px;font-size:14px}
.haut{max-width:1040px;margin:0 auto;padding:14px 16px;display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.marque{display:flex;align-items:center;gap:10px;font:700 21px/1 var(--serif);color:var(--encre-fonce);text-decoration:none}
.marque-croix{position:relative;width:22px;height:22px;border-radius:6px;background:var(--encre)}
.marque-croix::before,.marque-croix::after{content:"";position:absolute;background:var(--ambre);border-radius:1px}
.marque-croix::before{left:9px;top:4px;width:4px;height:14px}
.marque-croix::after{left:4px;top:9px;width:14px;height:4px}
.haut nav{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.haut nav a{text-decoration:none;font-weight:600;font-size:15px}
.nav-form{margin:0}
button.lien{background:none;border:0;padding:0;font:600 15px var(--sans);color:var(--encre);cursor:pointer}
input,select,button,textarea{font:inherit}
input[type=text],input[type=tel],input[type=password],select{width:100%;padding:11px 12px;border:1px solid #c3d0cc;border-radius:10px;background:#fff;color:var(--texte)}
input:focus-visible,select:focus-visible,button:focus-visible,a:focus-visible{outline:3px solid var(--ambre);outline-offset:2px}
.bouton{display:inline-block;border:0;border-radius:10px;padding:11px 18px;background:var(--encre);color:#fff;font-weight:700;text-decoration:none;cursor:pointer;text-align:center}
.bouton:hover{background:var(--encre-fonce)}
.bouton.petit{padding:7px 12px;font-size:14px;color:#fff}
.bouton.grand{padding:14px 22px;font-size:18px}
.bouton.large{width:100%}
.bouton.discret{background:#fff;color:var(--encre);border:1px solid #c3d0cc}
.bouton.wave{background:#1aa6d9;color:#06212c}
.lien-fort{font-weight:700;margin-left:14px}
.aide{font-size:14px;color:var(--doux)}
.alerte{background:var(--mal-doux);border:1px solid #e3b0aa;color:var(--mal);padding:10px 12px;border-radius:10px}
.info{background:var(--bien-doux);border:1px solid #b5dcc6;color:var(--bien);padding:10px 12px;border-radius:10px}
.carte{background:var(--carte);border:1px solid var(--ligne);border-radius:14px;padding:20px}
.message{max-width:620px;margin:28px auto}
.formulaire{max-width:460px;margin:24px auto}
.formulaire.large{max-width:640px}
form label{display:block;font-weight:600;margin:0 0 14px;font-size:15px}
form label input,form label select{margin-top:5px;font-weight:400}
.fil{font-size:14px;color:var(--doux);margin:14px 0}
.sous{color:var(--doux);margin-top:-4px}
.titre-page{margin:22px 0 12px}
/* Accueil */
.une{display:grid;gap:28px;padding:28px 0 12px;align-items:center}
@media (min-width:860px){.une{grid-template-columns:1.25fr 1fr}}
.une-pour{font-size:13px;font-weight:700;color:var(--encre);margin:0 0 8px}
.une h1{font-size:clamp(30px,6vw,46px);margin:0 0 12px;max-width:17ch}
.une-sous{font-size:18px;color:var(--doux);max-width:46ch;margin:0 0 20px}
.une-actions{display:flex;align-items:center;flex-wrap:wrap;gap:8px}
.une-carte{background:var(--encre);border-radius:18px;padding:22px}
.qcm-demo{background:#fff;border-radius:12px;padding:18px;display:flex;flex-direction:column;gap:8px}
.qcm-demo-tag{font-size:12px;font-weight:700;color:var(--encre)}
.qcm-demo-q{font:700 18px/1.3 var(--serif);margin:0 0 4px;color:var(--encre-fonce)}
.qcm-demo-o{border:1px solid var(--ligne);border-radius:9px;padding:9px 12px;font-size:15px;display:flex;justify-content:space-between}
.qcm-demo-o.bon{border-color:var(--bien);background:var(--bien-doux);font-weight:700}
.qcm-demo-o i{font-style:normal;color:var(--bien)}
.qcm-demo-exp{font-size:13px;color:var(--doux);margin:4px 0 0;border-left:3px solid var(--ambre);padding-left:10px}
.bloc{margin:34px 0}
.bloc h2{font-size:26px;margin:0 0 14px}
.filieres{list-style:none;padding:0;margin:0;display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.filieres li{background:#fff;border:1px solid var(--ligne);border-left:4px solid var(--encre);border-radius:10px;padding:12px 14px;display:flex;flex-direction:column}
.filieres span{font-size:13px;color:var(--doux)}
.etapes ol{margin:0;padding-left:22px;max-width:640px}
.etapes li{margin:6px 0}
.offres,.choix-offres{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));max-width:560px}
.offre{background:#fff;border:1px solid var(--ligne);border-radius:14px;padding:18px;display:flex;flex-direction:column;gap:2px;text-align:left}
.offre.fort{border:2px solid var(--encre);background:var(--menthe)}
.offre-nom{font-weight:700;color:var(--encre)}
.offre-prix{font:700 28px/1.2 var(--serif);color:var(--encre-fonce)}
.offre-detail{font-size:14px;color:var(--doux)}
button.offre.choix{cursor:pointer;font:inherit;color:inherit}
button.offre.choix:hover{border-color:var(--encre)}
/* Espace */
.espace-tete{display:grid;gap:14px;margin:22px 0 16px;align-items:start}
@media (min-width:760px){.espace-tete{grid-template-columns:1fr minmax(280px,360px)}}
.espace-tete h1{margin:0}
.statut{background:var(--ambre-doux);border:1px solid #ecd18a;border-radius:12px;padding:12px 14px;display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.statut.ok{background:var(--bien-doux);border-color:#b5dcc6}
.statut span{font-size:14px}
.chiffres{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:8px 0 18px}
.chiffres div{background:#fff;border:1px solid var(--ligne);border-radius:12px;padding:12px;display:flex;flex-direction:column}
.chiffres b{font:700 22px var(--serif);color:var(--encre-fonce)}
.chiffres span{font-size:13px;color:var(--doux)}
.matiere h2{font-size:21px;margin:22px 0 8px}
.contenus{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.contenus a{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;background:#fff;border:1px solid var(--ligne);border-radius:12px;padding:12px 14px;text-decoration:none;color:var(--texte)}
.contenus a:hover{border-color:var(--encre)}
.contenus .ferme a{background:#fbfcfb;color:var(--doux)}
.type{font-size:12px;font-weight:700;border-radius:999px;padding:3px 9px}
.type-cours{background:var(--menthe);color:var(--encre)}
.type-qcm{background:var(--ambre-doux);color:#8a5d00}
.c-titre{font-weight:600;display:flex;flex-direction:column}
.c-titre small{font-weight:400;color:var(--doux);font-size:13px}
.c-etat{font-size:13px;color:var(--doux);white-space:nowrap}
@media (max-width:520px){.contenus a{grid-template-columns:auto 1fr}.c-etat{grid-column:2}}
/* Leçon */
.lecon{background:#fff;border:1px solid var(--ligne);border-radius:14px;padding:22px;max-width:760px}
.lecon h1{margin-top:0}
.lecon h2{font-size:22px;margin:26px 0 8px}
.lecon p{margin:0 0 12px}
.objectifs{background:var(--menthe);border-radius:10px;padding:12px 16px;margin:14px 0}
.objectifs ul{margin:6px 0 0;padding-left:20px}
.retenir{background:var(--ambre-doux);border-left:4px solid var(--ambre);border-radius:0 10px 10px 0;padding:10px 14px;margin:14px 0}
.retenir p{margin:4px 0 0}
.avert{font-size:14px;color:var(--doux);border-top:1px solid var(--ligne);padding-top:12px;margin-top:20px}
.suite{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:18px 0}
/* QCM */
.qcm{max-width:760px}
.questions{padding-left:22px;display:flex;flex-direction:column;gap:14px}
.questions>li{background:#fff;border:1px solid var(--ligne);border-radius:12px;padding:14px 16px}
.questions fieldset{border:0;margin:0;padding:0}
.q{font-weight:700;margin:0 0 8px;padding:0}
.option{display:flex;gap:10px;align-items:flex-start;font-weight:400;margin:0 0 8px;border:1px solid var(--ligne);border-radius:9px;padding:9px 12px;cursor:pointer}
.option input{margin-top:5px}
.option:has(input:checked){border-color:var(--encre);background:var(--menthe)}
.options{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:6px}
.options li{border:1px solid var(--ligne);border-radius:9px;padding:8px 12px}
.options li.bonne{border-color:var(--bien);background:var(--bien-doux)}
.options li.choisie{border-color:var(--mal);background:var(--mal-doux)}
.options b{font-size:13px}
.corrige li.juste{border-left:4px solid var(--bien)}
.corrige li.faux{border-left:4px solid var(--mal)}
.explication{font-size:14px;margin:10px 0 0;border-left:3px solid var(--ambre);padding-left:10px;color:var(--texte)}
.sans{font-size:13px;color:var(--mal);margin:6px 0 0}
.score{display:flex;flex-direction:column;border-radius:12px;padding:14px 16px;margin:12px 0}
.score b{font:700 32px var(--serif)}
.score.bien{background:var(--bien-doux);color:var(--bien)}
.score.moyen{background:var(--ambre-doux);color:#7a5200}
.score.faible{background:var(--mal-doux);color:var(--mal)}
/* Compte et paiement */
.colonnes{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));align-items:start}
.colonnes h2{margin-top:0;font-size:20px}
.paiements{padding-left:18px;font-size:14px}
.code-paie{display:inline-flex;flex-direction:column;border:2px dashed var(--ambre);border-radius:12px;padding:10px 16px;margin:8px 0}
.code-paie span{font-size:13px;color:var(--doux)}
.code-paie b{font-size:22px;letter-spacing:.06em;color:var(--encre-fonce)}
.actions{display:flex;gap:10px;flex-wrap:wrap}
.bas{max-width:1040px;margin:0 auto;padding:22px 16px 34px;border-top:1px solid var(--ligne);font-size:14px;color:var(--doux)}
.bas p{margin:4px 0}
.petit{font-size:13px}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}