/* ============================================================
   Mon carnet d'apprenti — Bloomdayz × Mathésciences
   Feuille de style PARTAGÉE par tous les carnets (1 par stage).
   Format : livret A4 PORTRAIT, 1 page par expérience.
   Pages : Couverture → 1 page / expérience → 4e de couverture.
   Palette navy / or / crème · polices Anton · Inter · Caveat.
   ============================================================ */

@font-face{font-family:"Anton";src:url("fonts/Anton-Regular.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Caveat";src:url("fonts/Caveat-Bold.woff2") format("woff2");font-weight:600 700;font-display:swap}
@font-face{font-family:"Inter";src:url("fonts/inter-v20-latin-regular.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Inter";src:url("fonts/inter-v20-latin-500.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Inter";src:url("fonts/inter-v20-latin-600.woff2") format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Inter";src:url("fonts/inter-v20-latin-700.woff2") format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Inter";src:url("fonts/inter-v20-latin-900.woff2") format("woff2");font-weight:900;font-display:swap}

:root{
  --navy:#15233f; --navy-2:#1c2c4d;
  --gold:#f2c63f; --gold-soft:#f7d873; --gold-deep:#caa233;
  --cream:#f4eede; --paper:#fbf7ec;
  --note-bg:#f7f1de; --note-line:#d3c49b;
  --ink:#1c2942; --muted:#8a7d5e;
  --accent:var(--gold); --accent-ink:#7a6320; --accent-bg:#fbf3d9;
}
/* Couleur secondaire par volet (chip domaine, filets, observe) */
body.volet-info{--accent:#2f6df0; --accent-ink:#1d4ec0; --accent-bg:#eaf1ff}
body.volet-sciences{--accent:#2f9e6b; --accent-ink:#1f7a50; --accent-bg:#e7f7ee}
body.volet-petits{--accent:#e8743b; --accent-ink:#bf5526; --accent-bg:#fdeee4}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:"Inter",system-ui,sans-serif;color:var(--ink);
  background:#c8ccd2;-webkit-font-smoothing:antialiased;font-size:11pt;line-height:1.5;
}

/* ---- Une page = une feuille A4 portrait ---- */
.page{
  width:210mm;height:297mm;background:var(--cream);
  margin:10mm auto;position:relative;overflow:hidden;display:flex;flex-direction:column;
  box-shadow:0 10px 40px rgba(0,0,0,.25);padding:14mm 14mm 11mm;
}

/* ===========================================================
   COUVERTURE
   =========================================================== */
.cover-page{padding:11mm}
.cover{
  flex:1;background:linear-gradient(165deg,var(--navy-2),var(--navy));
  border-radius:22px;color:#fff;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;padding:20mm 16mm;
  box-shadow:0 12px 30px rgba(21,35,63,.22);position:relative;
}
.cover::after{content:"";position:absolute;inset:6mm;border:1.5px solid rgba(242,198,63,.34);border-radius:16px;pointer-events:none}
.cover .cap{width:120px;height:auto;margin:0 0 11mm;fill:var(--gold)}
.cover .kicker{font-family:"Caveat",cursive;font-weight:700;color:var(--gold-soft);font-size:21pt;line-height:1;margin:0 0 3mm}
.cover h1{font-family:"Anton",sans-serif;font-weight:400;color:var(--gold);text-transform:uppercase;letter-spacing:.01em;font-size:46pt;line-height:.96;margin:0}
.cover .sub{color:#e8ecf4;font-size:12.5pt;font-weight:500;letter-spacing:.02em;margin:8mm 0 0;max-width:80%;line-height:1.45}
.cover .rule{width:46mm;height:2px;background:var(--gold);border:0;margin:10mm 0;opacity:.85}
.cover .name-field{display:flex;flex-direction:column;align-items:center;gap:4mm;margin:0 0 12mm}
.cover .name-field span{font-size:10.5pt;color:#c9d3e4;letter-spacing:.04em;text-transform:uppercase;font-weight:600}
.cover .name-field i{display:block;width:64mm;border-bottom:1.6px dashed rgba(242,198,63,.6);height:7mm}
.cover .brand{position:absolute;left:0;right:0;bottom:15mm;margin:0;font-family:"Anton",sans-serif;font-weight:400;color:var(--gold);text-transform:uppercase;letter-spacing:.05em;font-size:19pt;line-height:1}
.cover .brand small{display:block;font-family:"Inter",sans-serif;font-weight:600;color:#c9d3e4;font-size:9pt;letter-spacing:.16em;margin-top:3mm}

/* ===========================================================
   PAGE D'EXPÉRIENCE
   =========================================================== */
.exp-page{padding:13mm 13mm 10mm}

/* Bandeau navy : numéro + domaine + titre */
.xp-hd{
  background:linear-gradient(120deg,var(--navy),var(--navy-2));color:#fff;border-radius:18px;
  padding:7mm 8mm;display:flex;align-items:center;gap:7mm;box-shadow:0 7px 18px rgba(21,35,63,.18);
}
.xp-no{
  flex:0 0 auto;width:24mm;height:24mm;border-radius:16px;background:var(--gold);color:var(--navy);
  font-family:"Anton",sans-serif;font-size:34pt;line-height:1;display:flex;align-items:center;justify-content:center;
}
.xp-hd-tx{min-width:0}
.xp-dom{
  display:inline-block;font-size:9pt;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--navy);background:var(--gold-soft);border-radius:999px;padding:2px 11px;margin:0 0 3mm;
}
.xp-ttl{font-family:"Anton",sans-serif;font-weight:400;color:#fff;text-transform:uppercase;letter-spacing:.01em;font-size:24pt;line-height:1.04;margin:0}

/* Corps */
.xp-body{flex:1;display:flex;flex-direction:column;gap:6mm;margin-top:7mm}
.block{background:#fff;border-radius:16px;padding:6mm 7mm;box-shadow:0 5px 15px rgba(21,35,63,.08);position:relative;overflow:hidden}
.block::before{content:"";position:absolute;left:0;top:0;bottom:0;width:6px}
.b-enigme::before{background:var(--gold)}
.b-science::before{background:var(--accent)}
.b-k{display:flex;align-items:center;gap:8px;font-family:"Anton",sans-serif;font-weight:400;text-transform:uppercase;letter-spacing:.02em;font-size:14pt;margin:0 0 3mm}
.b-enigme .b-k{color:var(--gold-deep)}
.b-science .b-k{color:var(--accent-ink)}
.b-k svg{width:21px;height:21px;flex:0 0 auto}
.b-enigme .b-k svg{fill:var(--gold-deep)}
.b-science .b-k svg{fill:var(--accent-ink)}
.block p{margin:0;font-size:12pt;line-height:1.55;color:var(--ink)}
.block .big{font-size:13pt}

/* Zone à remplir : ce que j'ai observé */
.observe{
  flex:1;min-height:54mm;background:var(--note-bg);border:2px dashed var(--accent);border-radius:16px;
  padding:6mm 7mm;display:flex;flex-direction:column;
}
.observe .o-k{display:flex;align-items:center;gap:8px;font-family:"Caveat",cursive;font-weight:700;color:var(--accent-ink);font-size:18pt;line-height:1;margin:0 0 4mm}
.observe .o-k svg{width:20px;height:20px;fill:var(--accent-ink);flex:0 0 auto}
.observe .o-lines{flex:1;display:flex;flex-direction:column;justify-content:space-evenly}
.observe .o-lines span{display:block;border-bottom:1.6px dashed var(--note-line);height:0}

/* Pied de page */
.pg-foot{display:flex;align-items:center;gap:10px;margin-top:7mm;color:var(--muted);font-size:8.6pt;font-weight:600;letter-spacing:.03em}
.pg-foot .sep{flex:1;height:1px;background:#ded3b6}
.pg-foot .brand{text-transform:uppercase;letter-spacing:.08em}
.pg-foot img{width:18px;height:18px;object-fit:contain;opacity:.85}

/* ===========================================================
   4e DE COUVERTURE : contact + QR
   =========================================================== */
.back-page{padding:11mm}
.back{
  flex:1;background:#fff;border:2px solid var(--gold);border-radius:22px;
  padding:16mm 14mm;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;box-shadow:0 8px 22px rgba(21,35,63,.08);
}
.back .closing{font-family:"Caveat",cursive;font-weight:700;color:var(--navy);font-size:21pt;line-height:1.15;margin:0 0 12mm;max-width:84%}
.back h2{font-family:"Anton",sans-serif;font-weight:400;color:var(--navy);text-transform:uppercase;letter-spacing:.02em;font-size:24pt;line-height:1.05;margin:0 0 9mm}
.contact{display:flex;flex-direction:column;gap:6mm;margin:0 0 11mm;text-align:left}
.contact .row{display:flex;align-items:center;gap:5mm}
.contact .ic{flex:0 0 auto;width:32px;height:32px;border-radius:50%;background:var(--gold);display:flex;align-items:center;justify-content:center}
.contact .ic svg{width:16px;height:16px;display:block;fill:var(--navy)}
.contact .tx{font-weight:700;color:var(--navy);font-size:12.5pt}
.back .qr{width:42mm;height:42mm;display:block;margin:0 auto 6mm;image-rendering:pixelated}
.back .scan{font-family:"Inter",sans-serif;font-weight:700;color:var(--navy);text-transform:uppercase;letter-spacing:.05em;font-size:10pt;margin:0}

/* ===========================================================
   Barre d'aide à l'impression (écran seulement)
   =========================================================== */
.printbar{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;gap:14px;align-items:center;justify-content:center;background:var(--navy);color:#fff;padding:8px 14px;font-family:"Inter",sans-serif;font-size:13px}
.printbar b{color:var(--gold);font-weight:700}
.printbar button{font:inherit;font-weight:700;color:var(--navy);background:var(--gold);border:0;border-radius:999px;padding:6px 16px;cursor:pointer}
body.has-bar .page:first-of-type{margin-top:64px}

/* ===========================================================
   RESPONSIVE écran — la page A4 est un format fixe : on la met
   à l'échelle (zoom) pour qu'elle tienne sur tablette/téléphone.
   zoom est Baseline 2024 (tous navigateurs récents) ; sans effet à l'impression.
   =========================================================== */
@media screen and (max-width:900px){
  .page{zoom:.66}
  body.has-bar .page:first-of-type{margin-top:46px}
}
@media screen and (max-width:620px){
  .page{zoom:.48}
  .printbar{font-size:11px;gap:8px;padding:6px 10px;flex-wrap:wrap;text-align:center}
  .printbar button{padding:5px 12px}
}
@media screen and (max-width:430px){
  .page{zoom:.36}
}

/* ===========================================================
   Impression : 1 feuille A4 portrait par page, sans marge
   =========================================================== */
@media print{
  @page{size:A4 portrait;margin:0}
  html,body{background:#fff}
  .printbar{display:none}
  body.has-bar .page:first-of-type{margin-top:0}
  .page{margin:0;box-shadow:none;page-break-after:always;break-after:page}
  .page:last-of-type{page-break-after:auto}
  .cover,.back,.block,.xp-hd,.observe{box-shadow:none}
  *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}