/* Sanad Bac, couche de contenu SEO "Bac Libre". Charte DESIGN.md. */
:root{
  --paper:#F7F6F2; --white:#fff;
  --ink-900:#1A1917; --ink-700:#44403A; --ink-500:#78716A; --ink-300:#B7B1A8;
  --ink-200:#E7E3DC; --ink-100:#EFEDE7; --ink-50:#F3F1EC;
  --maj:#5848E0; --maj-700:#4438B0; --maj-50:#EEECFC;
  --success:#00A86B; --warning:#B85C00;
  --radius:12px; --radius-sm:6px; --radius-lg:16px;
  --maxw:760px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--ink-900);
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  font-size:17px; line-height:1.7; -webkit-font-smoothing:antialiased;
}
.serif{font-family:"Instrument Serif",Georgia,serif; font-weight:400}
a{color:var(--maj-700); text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%}

/* Header */
.hd{position:sticky; top:0; z-index:20; background:rgba(247,246,242,.85); backdrop-filter:blur(8px); border-bottom:1px solid var(--ink-200)}
.hd .wrap{max-width:var(--maxw); margin:0 auto; padding:12px 20px; display:flex; align-items:center; justify-content:space-between}
.brand{display:flex; align-items:center; gap:8px; font-family:"Instrument Serif",Georgia,serif; font-size:22px; color:var(--ink-900)}
.brand:hover{text-decoration:none}
.dot{width:9px; height:9px; border-radius:50%; background:var(--maj)}
.btn{display:inline-block; background:var(--maj); color:#fff; padding:9px 16px; border-radius:var(--radius-sm); font-weight:600; font-size:15px; transition:background .2s ease}
.btn:hover{background:var(--maj-700); text-decoration:none}
.btn-lg{padding:13px 24px; font-size:17px; border-radius:var(--radius)}

/* Layout */
main{max-width:var(--maxw); margin:0 auto; padding:0 20px 80px}
.crumb{font-size:13.5px; color:var(--ink-500); padding:20px 0 0}
.crumb a{color:var(--ink-500)}
.eyebrow{font-family:"JetBrains Mono",ui-monospace,monospace; font-size:12.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--maj-700); margin:28px 0 10px}
h1{font-family:"Instrument Serif",Georgia,serif; font-weight:400; font-size:44px; line-height:1.1; margin:6px 0 14px; letter-spacing:-.01em}
.lede{font-size:19px; color:var(--ink-700); margin:0 0 26px}
h2{font-size:26px; line-height:1.25; margin:44px 0 12px; letter-spacing:-.01em}
h3{font-size:19px; margin:28px 0 8px}
p{margin:0 0 16px}
ul,ol{margin:0 0 18px; padding-left:22px}
li{margin:0 0 8px}
strong{color:var(--ink-900)}
.meta{font-size:13.5px; color:var(--ink-500); margin:0 0 28px; padding-bottom:20px; border-bottom:1px solid var(--ink-200)}

/* Cards & callouts */
.card{background:var(--white); border:1px solid var(--ink-200); border-radius:var(--radius); padding:22px 24px; margin:24px 0}
.note{background:var(--maj-50); border:1px solid #DAD5F7; border-radius:var(--radius); padding:16px 20px; margin:22px 0; font-size:15.5px; color:var(--ink-700)}
.note strong{color:var(--maj-700)}
.warn{background:#FBF3EA; border:1px solid #F0DFC7; border-radius:var(--radius); padding:16px 20px; margin:22px 0; font-size:15.5px; color:var(--ink-700)}

/* Table */
.tbl{width:100%; border-collapse:collapse; margin:20px 0; font-size:15.5px}
.tbl th,.tbl td{text-align:left; padding:11px 14px; border-bottom:1px solid var(--ink-200)}
.tbl th{background:var(--ink-50); font-weight:600; font-size:13.5px}
.tbl tr:last-child td{border-bottom:none}

/* CTA block */
.cta{background:var(--ink-900); color:#fff; border-radius:var(--radius-lg); padding:32px 28px; margin:40px 0; text-align:center}
.cta h2{color:#fff; margin:0 0 10px; font-size:27px}
.cta p{color:#D6D2CC; margin:0 0 22px}
.cta .btn{background:var(--maj)}
.cta .btn:hover{background:#6b5cf0}

/* Related */
.rel{display:grid; gap:10px; margin:16px 0 0}
.rel a{display:block; background:var(--white); border:1px solid var(--ink-200); border-radius:var(--radius-sm); padding:14px 18px; color:var(--ink-900); font-weight:500}
.rel a:hover{border-color:var(--maj); text-decoration:none}
.rel a span{display:block; font-size:13.5px; color:var(--ink-500); font-weight:400; margin-top:2px}

/* FAQ */
.faq{margin:18px 0}
.faq details{border:1px solid var(--ink-200); border-radius:var(--radius-sm); padding:2px 18px; margin:0 0 10px; background:var(--white)}
.faq summary{cursor:pointer; font-weight:600; padding:14px 0; list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; float:right; color:var(--maj); font-size:20px; line-height:1}
.faq details[open] summary::after{content:", "}
.faq details p{margin:0 0 14px; color:var(--ink-700); font-size:15.5px}

/* E-E-A-T : bandeau "vérifié" */
.verified{display:flex; gap:10px; align-items:flex-start; background:#F0F7F3; border:1px solid #CDE7DA; border-radius:var(--radius-sm); padding:12px 16px; margin:0 0 28px; font-size:13.5px; color:#2C5A47; line-height:1.5}
.verified b{color:#1E4535}
.verified svg{flex:none; margin-top:1px}

/* Encart calcul (formule note) */
.calc{background:var(--white); border:1px solid var(--ink-200); border-left:3px solid var(--maj); border-radius:var(--radius); padding:20px 24px; margin:22px 0}
.calc .formula{font-family:"JetBrains Mono",ui-monospace,monospace; font-size:15px; background:var(--ink-50); border-radius:var(--radius-sm); padding:12px 16px; margin:10px 0; color:var(--ink-900)}
.calc .big{font-size:17px; font-weight:600; color:var(--maj-700)}

/* Plan de révision */
.plan{width:100%; border-collapse:collapse; margin:18px 0; font-size:15px}
.plan th,.plan td{text-align:left; padding:10px 14px; border:1px solid var(--ink-200); vertical-align:top}
.plan th{background:var(--maj-50); font-weight:600; font-size:13.5px; color:var(--maj-700)}

/* ---- Calculateur (widget outil) ---- */
.tool{background:var(--white); border:1px solid var(--ink-200); border-radius:var(--radius-lg); padding:26px 26px 30px; margin:26px 0}
.seg{display:inline-flex; background:var(--ink-50); border:1px solid var(--ink-200); border-radius:var(--radius); padding:4px; margin:0 0 22px; width:100%}
.seg button{flex:1; border:none; background:none; padding:10px 12px; border-radius:var(--radius-sm); font:inherit; font-weight:600; font-size:15px; color:var(--ink-500); cursor:pointer; transition:all .15s ease}
.seg button.on{background:var(--white); color:var(--maj-700); box-shadow:0 1px 2px rgba(0,0,0,.06)}
.field{margin:0 0 16px}
.field label{display:block; font-size:14.5px; font-weight:600; color:var(--ink-900); margin:0 0 6px}
.field .hint{font-weight:400; color:var(--ink-500); font-size:13px}
.field input{width:100%; font:inherit; font-size:17px; padding:12px 14px; border:1px solid var(--ink-300); border-radius:var(--radius-sm); background:var(--white); color:var(--ink-900)}
.field input:focus{outline:none; border-color:var(--maj); box-shadow:0 0 0 3px var(--maj-50)}
.field.hidden{display:none}
.result{margin:22px 0 0; padding:22px 24px; border-radius:var(--radius); background:var(--maj-50); border:1px solid #DAD5F7; text-align:center}
.result .moy{font-family:"Instrument Serif",Georgia,serif; font-size:52px; line-height:1; color:var(--maj-700)}
.result .moy small{font-size:24px; color:var(--ink-500)}
.result .mention{display:inline-block; margin:12px 0 0; padding:6px 16px; border-radius:100px; font-weight:600; font-size:15px; background:var(--white); border:1px solid #DAD5F7; color:var(--ink-900)}
.result .sub{margin:16px 0 0; font-size:14px; color:var(--ink-700); border-top:1px solid #DAD5F7; padding-top:14px}
.result.fail{background:#FBF3EA; border-color:#F0DFC7}
.result.fail .moy{color:var(--warning)}
.tool .foot{font-size:12.5px; color:var(--ink-500); margin:16px 0 0; text-align:center}

/* Footer */
footer{border-top:1px solid var(--ink-200); background:var(--white)}
footer .wrap{max-width:var(--maxw); margin:0 auto; padding:28px 20px; font-size:14px; color:var(--ink-500); display:flex; flex-wrap:wrap; gap:8px 20px; justify-content:space-between}
footer a{color:var(--ink-500)}

@media(max-width:640px){
  body{font-size:16px}
  h1{font-size:34px} h2{font-size:22px}
  .hd .btn{padding:8px 12px; font-size:14px}
}