/* AubeTraining — feuille de style éditorial-aviation.
   Papier chaud, encre, un seul accent cachet. Serif display + mono technique. */

:root{
  --paper:#f4efe4;
  --paper-2:#ece5d6;
  --card:#fbf8f1;
  --ink:#17140f;
  --ink-soft:#544c3f;
  --ink-faint:#8a8170;
  --line:#d8cfba;
  --line-strong:#c2b69a;
  --cachet:#a32c1c;
  --cachet-deep:#7d2114;
  --gold:#a8801f;
  --blue:#27425f;
  --ok:#2f6b3f;
  --shadow:0 1px 0 var(--line), 0 18px 40px -28px rgba(40,30,15,.5);
  --serif:"Fraunces", Georgia, "Times New Roman", serif;
  --mono:"JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --sans:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-size:16px; line-height:1.6;
  background-image:
    radial-gradient(circle at 12% -10%, rgba(163,44,28,.05), transparent 40%),
    radial-gradient(circle at 100% 0%, rgba(39,66,95,.05), transparent 35%);
}
a{color:var(--ink); text-decoration:none}
a:hover{color:var(--cachet)}
img{max-width:100%; display:block}
h1,h2,h3,h4{font-family:var(--serif); font-weight:600; line-height:1.12; letter-spacing:-.01em; margin:0 0 .4em}
h1{font-size:clamp(2.1rem,5vw,3.5rem); font-weight:600}
h2{font-size:clamp(1.5rem,3vw,2.1rem)}
h3{font-size:1.25rem}
p{margin:0 0 1rem}
hr{border:0; border-top:1px solid var(--line); margin:2rem 0}
.wrap{width:min(1140px,92vw); margin-inline:auto}
.muted{color:var(--ink-soft)}
.small{font-size:.85rem}
.mono{font-family:var(--mono)}
.center{text-align:center}

/* Kicker : libellé mono en petites capitales espacées */
.kicker{
  font-family:var(--mono); font-size:.72rem; font-weight:600;
  text-transform:uppercase; letter-spacing:.22em; color:var(--cachet);
  margin:0 0 .8rem;
}
.kicker.ink{color:var(--ink-faint)}

/* ---------- En-tête ---------- */
.masthead{position:sticky; top:0; z-index:50; background:rgba(244,239,228,.9);
  backdrop-filter:saturate(1.1) blur(8px); border-bottom:1px solid var(--line)}
.masthead-in{display:flex; align-items:center; gap:1.5rem; height:64px}
.brand{display:flex; align-items:center; gap:.55rem; font-family:var(--serif)}
.brand .mark{flex:none}
.brand-text{font-size:1.25rem; letter-spacing:-.02em}
.brand-text strong{font-weight:700; color:var(--cachet)}
.brand.small .brand-text{font-size:1.05rem}
.nav{display:flex; gap:1.3rem; margin-left:.5rem}
.nav a{font-size:.95rem; color:var(--ink-soft)}
.nav a:hover{color:var(--ink)}
.nav-right{margin-left:auto; display:flex; align-items:center; gap:.7rem}
.wallet-pill{border:1px solid var(--line-strong); border-radius:999px; padding:.3rem .7rem;
  font-size:.82rem; background:var(--card)}
.wallet-pill:hover{border-color:var(--cachet)}

.usermenu{position:relative}
.usermenu summary{list-style:none; cursor:pointer; padding:.4rem .7rem; border:1px solid var(--line-strong);
  border-radius:8px; background:var(--card); font-size:.9rem}
.usermenu summary::-webkit-details-marker{display:none}
.usermenu-pop{position:absolute; right:0; top:calc(100% + .4rem); background:var(--card);
  border:1px solid var(--line-strong); border-radius:10px; padding:.6rem; min-width:210px;
  display:flex; flex-direction:column; gap:.1rem; box-shadow:var(--shadow)}
.usermenu-pop a, .usermenu-pop .linkish{padding:.45rem .5rem; border-radius:6px; font-size:.92rem;
  text-align:left; color:var(--ink-soft)}
.usermenu-pop a:hover, .usermenu-pop .linkish:hover{background:var(--paper-2); color:var(--ink)}
.linkish{background:none; border:0; font:inherit; cursor:pointer; width:100%}

/* ---------- Boutons ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font-family:var(--mono); font-size:.85rem; font-weight:600; letter-spacing:.02em;
  padding:.7rem 1.2rem; border-radius:9px; border:1px solid var(--ink); cursor:pointer;
  background:var(--ink); color:var(--paper); transition:transform .06s ease, background .15s}
.btn:hover{color:var(--paper); transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn-cachet{background:var(--cachet); border-color:var(--cachet)}
.btn-cachet:hover{background:var(--cachet-deep); border-color:var(--cachet-deep)}
.btn-ghost{background:transparent; color:var(--ink)}
.btn-ghost:hover{background:var(--ink); color:var(--paper)}
.btn-line{background:var(--card); color:var(--ink); border-color:var(--line-strong)}
.btn-line:hover{background:var(--paper-2); color:var(--ink); border-color:var(--ink)}
.btn-sm{padding:.45rem .8rem; font-size:.78rem; border-radius:7px}
.btn-block{width:100%}
.btn[disabled]{opacity:.5; cursor:not-allowed}

/* ---------- Badges ---------- */
.badge{display:inline-flex; align-items:center; gap:.35rem; font-family:var(--mono);
  font-size:.72rem; font-weight:600; padding:.2rem .55rem; border-radius:6px;
  border:1px solid var(--line-strong); color:var(--ink-soft); background:var(--card)}
.badge-free{color:var(--ok); border-color:#b6cdb9; background:#eef6ef}
.badge-price{color:var(--cachet); border-color:#e0b6ae; background:#fbeeeb}
.badge-level{text-transform:capitalize}
.tag{font-family:var(--mono); font-size:.68rem; text-transform:uppercase; letter-spacing:.1em;
  padding:.15rem .45rem; border-radius:5px; align-self:flex-start}
.tag-apprenant{background:#eef3f7; color:var(--blue)}
.tag-formateur{background:#fbeeeb; color:var(--cachet)}
.tag-admin{background:var(--ink); color:var(--paper)}

/* ---------- Flash ---------- */
.flashes{margin-top:1rem; display:flex; flex-direction:column; gap:.5rem}
.flash{padding:.7rem 1rem; border-radius:9px; border-left:4px solid; font-size:.92rem; background:var(--card)}
.flash-success{border-color:var(--ok); background:#eef6ef}
.flash-error{border-color:var(--cachet); background:#fbeeeb}
.flash-info{border-color:var(--blue); background:#eef3f7}

/* ---------- Cartes ---------- */
.card{background:var(--card); border:1px solid var(--line); border-radius:14px; padding:1.4rem}
.grid{display:grid; gap:1.3rem}
.cards{display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:1.3rem}

/* Carte formation */
.course-card{display:flex; flex-direction:column; overflow:hidden; background:var(--card);
  border:1px solid var(--line); border-radius:14px; transition:border-color .15s, transform .08s}
.course-card:hover{border-color:var(--line-strong); transform:translateY(-2px)}
.course-cover{aspect-ratio:16/9; background:var(--paper-2); position:relative; overflow:hidden;
  display:flex; align-items:flex-end; padding:.7rem}
.course-cover img{width:100%; height:100%; object-fit:cover; position:absolute; inset:0}
.course-cover .ph{position:absolute; inset:0; display:grid; place-items:center;
  background:linear-gradient(135deg, var(--paper-2), #e2d8c2); color:var(--ink-faint); font-family:var(--serif); font-size:2.6rem}
.course-card .body{padding:1rem 1.1rem 1.2rem; display:flex; flex-direction:column; gap:.5rem; flex:1}
.course-card .meta{display:flex; gap:.4rem; flex-wrap:wrap; position:relative; z-index:1}
.course-card h3{margin:0; font-size:1.12rem}
.course-card .by{font-size:.84rem; color:var(--ink-faint)}
.course-card .foot{margin-top:auto; display:flex; align-items:center; justify-content:space-between;
  padding-top:.6rem; border-top:1px solid var(--line)}
.course-card .stat-line{font-family:var(--mono); font-size:.74rem; color:var(--ink-faint)}

/* ---------- Hero ---------- */
.hero{padding:4rem 0 2.5rem; border-bottom:1px solid var(--line)}
.hero-grid{display:grid; grid-template-columns:1.15fr .85fr; gap:3rem; align-items:center}
.hero h1{margin-bottom:1rem}
.hero .lead{font-size:1.2rem; color:var(--ink-soft); max-width:46ch}
.hero-cta{display:flex; gap:.7rem; flex-wrap:wrap; margin-top:1.6rem}
.hero-card{background:var(--card); border:1px solid var(--line-strong); border-radius:16px;
  padding:1.4rem; box-shadow:var(--shadow)}
.hero-card .row{display:flex; justify-content:space-between; padding:.6rem 0; border-bottom:1px dashed var(--line)}
.hero-card .row:last-child{border-bottom:0}
.hero-card .v{font-family:var(--serif); font-size:1.5rem}

/* Bandeau de statistiques sobre */
.statbar{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line);
  border:1px solid var(--line); border-radius:12px; overflow:hidden; margin:2.5rem 0}
.statbar .cell{background:var(--card); padding:1.2rem 1.3rem}
.statbar .n{font-family:var(--serif); font-size:1.9rem; line-height:1}
.statbar .l{font-family:var(--mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.14em;
  color:var(--ink-faint); margin-top:.4rem}

.section{padding:3rem 0}
.section-head{display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:1.6rem; gap:1rem}
.section-head p{margin:0; max-width:50ch}

/* Bandeau catégories */
.chips{display:flex; gap:.5rem; flex-wrap:wrap}
.chip{font-family:var(--mono); font-size:.8rem; padding:.4rem .8rem; border:1px solid var(--line-strong);
  border-radius:999px; background:var(--card); color:var(--ink-soft)}
.chip:hover, .chip.on{background:var(--ink); color:var(--paper); border-color:var(--ink)}

/* ---------- Détail formation ---------- */
.detail{display:grid; grid-template-columns:1fr 340px; gap:2.5rem; padding:2.5rem 0; align-items:start}
.detail .lede{font-size:1.15rem; color:var(--ink-soft)}
.buybox{position:sticky; top:84px; background:var(--card); border:1px solid var(--line-strong);
  border-radius:16px; overflow:hidden; box-shadow:var(--shadow)}
.buybox .cover{aspect-ratio:16/9; background:var(--paper-2); position:relative}
.buybox .cover img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.buybox .cover .ph{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--serif);
  font-size:3rem;color:var(--ink-faint);background:linear-gradient(135deg,var(--paper-2),#e2d8c2)}
.buybox .in{padding:1.3rem}
.buybox .price{font-family:var(--serif); font-size:2.2rem; margin:.2rem 0 1rem}
.buybox ul{list-style:none; padding:0; margin:1rem 0; font-size:.9rem}
.buybox ul li{padding:.3rem 0; border-bottom:1px solid var(--line); display:flex; gap:.5rem}
.buybox ul li::before{content:"›"; color:var(--cachet); font-family:var(--mono)}

.objectives{display:grid; grid-template-columns:1fr 1fr; gap:.6rem 1.5rem; list-style:none; padding:0}
.objectives li{padding-left:1.4rem; position:relative}
.objectives li::before{content:"✓"; position:absolute; left:0; color:var(--ok); font-weight:700}

/* Curriculum */
.curric{border:1px solid var(--line); border-radius:12px; overflow:hidden; background:var(--card)}
.curric .mod{border-top:1px solid var(--line)}
.curric .mod:first-child{border-top:0}
.curric .mod-h{padding:.9rem 1.1rem; background:var(--paper-2); font-family:var(--serif); font-size:1.05rem;
  display:flex; justify-content:space-between; gap:1rem}
.curric .les{display:flex; align-items:center; gap:.7rem; padding:.65rem 1.1rem; border-top:1px solid var(--line);
  font-size:.93rem}
.curric .les .ic{font-family:var(--mono); color:var(--ink-faint); font-size:.8rem; flex:none; width:1.4rem}
.curric .les .t{flex:1}
.curric .les .d{font-family:var(--mono); font-size:.76rem; color:var(--ink-faint)}
.curric .les.done .t{color:var(--ink-faint)}
.curric .les.current{background:#fbeeeb}

/* Avis */
.review{border-top:1px solid var(--line); padding:1rem 0}
.stars{color:var(--gold); letter-spacing:.1em; font-size:.95rem}
.stars .off{color:var(--line-strong)}

/* ---------- Lecteur ---------- */
.player{display:grid; grid-template-columns:300px 1fr; min-height:calc(100vh - 64px)}
.player-side{border-right:1px solid var(--line); background:var(--card); overflow-y:auto; max-height:calc(100vh - 64px); position:sticky; top:64px}
.player-side .ph{padding:1.1rem 1.2rem; border-bottom:1px solid var(--line)}
.player-side .prog{height:6px; background:var(--paper-2); border-radius:99px; overflow:hidden; margin-top:.6rem}
.player-side .prog i{display:block; height:100%; background:var(--cachet)}
.player-main{padding:2rem clamp(1rem,4vw,3rem); max-width:920px}
.lesson-doc{margin:1.5rem 0; border:1px solid var(--line-strong); border-radius:12px; overflow:hidden; background:var(--card)}
.lesson-doc .doc-h{display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:.7rem 1rem; border-bottom:1px solid var(--line); background:var(--paper-2)}
.lesson-doc .doc-h .ttl{font-family:var(--mono); font-size:.82rem}

/* Visionneuse PDF / diapos */
.pdfv{background:#2b2723}
.pdfv .stage{display:grid; place-items:center; padding:1rem; min-height:380px}
.pdfv canvas{max-width:100%; height:auto; box-shadow:0 10px 30px rgba(0,0,0,.4); background:#fff}
.pdfv iframe{width:100%; height:75vh; border:0; background:#fff}
.pdfv .bar{display:flex; align-items:center; justify-content:center; gap:1rem; padding:.6rem;
  background:#211e1a; color:#e8e1d3; font-family:var(--mono); font-size:.8rem}
.pdfv .bar button{background:#3a352e; color:#e8e1d3; border:1px solid #4a443a; border-radius:6px;
  padding:.3rem .7rem; cursor:pointer; font-family:var(--mono)}
.pdfv .bar button:hover{background:#4a443a}
.pdfv .bar button[disabled]{opacity:.4; cursor:not-allowed}

.lesson-body{font-size:1.05rem; line-height:1.75}
.lesson-body h2,.lesson-body h3{margin-top:1.6rem}
.lesson-nav{display:flex; justify-content:space-between; gap:1rem; margin-top:2.5rem;
  padding-top:1.5rem; border-top:1px solid var(--line)}

/* ---------- Formulaires ---------- */
.field{margin-bottom:1.1rem}
.field label{display:block; font-family:var(--mono); font-size:.78rem; text-transform:uppercase;
  letter-spacing:.08em; color:var(--ink-soft); margin-bottom:.4rem}
.input, input[type=text], input[type=email], input[type=password], input[type=number],
input[type=search], select, textarea{
  width:100%; font:inherit; padding:.65rem .8rem; border:1px solid var(--line-strong);
  border-radius:9px; background:var(--card); color:var(--ink)}
textarea{min-height:120px; resize:vertical; line-height:1.6}
.input:focus, input:focus, select:focus, textarea:focus{outline:2px solid var(--cachet); outline-offset:1px; border-color:var(--cachet)}
.row2{display:grid; grid-template-columns:1fr 1fr; gap:1rem}
.row3{display:grid; grid-template-columns:repeat(3,1fr); gap:1rem}
.check{display:flex; align-items:center; gap:.5rem; font-family:var(--mono); font-size:.85rem}
.check input{width:auto}
.help{font-size:.8rem; color:var(--ink-faint); margin-top:.3rem}
.authcard{max-width:440px; margin:4rem auto; }
.authcard .card{padding:2rem}

/* ---------- Tables ---------- */
.table{width:100%; border-collapse:collapse; font-size:.9rem}
.table th{text-align:left; font-family:var(--mono); font-size:.72rem; text-transform:uppercase;
  letter-spacing:.08em; color:var(--ink-faint); padding:.6rem .7rem; border-bottom:1px solid var(--line-strong)}
.table td{padding:.65rem .7rem; border-bottom:1px solid var(--line)}
.table tr:hover td{background:var(--paper-2)}
.num{font-family:var(--mono); text-align:right; white-space:nowrap}
.pos{color:var(--ok)} .neg{color:var(--cachet)}

/* ---------- Studio ---------- */
.studio-grid{display:grid; grid-template-columns:1fr 320px; gap:2rem; align-items:start; padding:2rem 0}
.mini-stat{display:flex; flex-direction:column; gap:.2rem; padding:1rem 0; border-bottom:1px solid var(--line)}
.mini-stat .n{font-family:var(--serif); font-size:1.6rem}
.mini-stat .l{font-family:var(--mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.1em; color:var(--ink-faint)}

.editor-mod{border:1px solid var(--line); border-radius:12px; margin-bottom:1.2rem; background:var(--card); overflow:hidden}
.editor-mod > summary{list-style:none; cursor:pointer; padding:.9rem 1.1rem; background:var(--paper-2);
  font-family:var(--serif); font-size:1.1rem; display:flex; align-items:center; justify-content:space-between; gap:1rem}
.editor-mod > summary::-webkit-details-marker{display:none}
.editor-les{border-top:1px solid var(--line); padding:.9rem 1.1rem}
.editor-les > summary{list-style:none; cursor:pointer; display:flex; align-items:center; gap:.6rem; font-size:.95rem}
.editor-les > summary::-webkit-details-marker{display:none}
.editor-les .les-body{margin-top:.9rem; padding-top:.9rem; border-top:1px dashed var(--line)}
.doc-chip{display:flex; align-items:center; gap:.6rem; padding:.5rem .7rem; border:1px solid var(--line);
  border-radius:8px; margin:.4rem 0; font-size:.86rem; background:var(--paper)}
.doc-chip .k{font-family:var(--mono); font-size:.68rem; text-transform:uppercase; padding:.1rem .4rem;
  border-radius:4px; background:var(--ink); color:var(--paper)}
.inline-form{display:flex; gap:.5rem; flex-wrap:wrap; align-items:center}
.inline-form input[type=text], .inline-form input[type=number]{width:auto; flex:1; min-width:140px}

.steps{counter-reset:s; list-style:none; padding:0; margin:1.5rem 0}
.steps li{counter-increment:s; padding-left:2.4rem; position:relative; margin-bottom:1rem}
.steps li::before{content:counter(s); position:absolute; left:0; top:0; width:1.7rem; height:1.7rem;
  background:var(--cachet); color:var(--paper); border-radius:50%; display:grid; place-items:center;
  font-family:var(--mono); font-size:.85rem; font-weight:600}

/* Attestation */
.attest{max-width:820px; margin:3rem auto; background:var(--card); border:2px solid var(--ink);
  padding:3rem; box-shadow:var(--shadow); position:relative}
.attest::after{content:""; position:absolute; inset:14px; border:1px solid var(--line-strong); pointer-events:none}
.attest .seal{width:90px; height:90px; border:3px solid var(--cachet); border-radius:50%; color:var(--cachet);
  display:grid; place-items:center; font-family:var(--mono); font-size:.62rem; text-align:center;
  transform:rotate(-9deg); margin:1.5rem auto; line-height:1.3; letter-spacing:.05em}
.attest h1{text-align:center}
.attest .name{font-family:var(--serif); font-size:2.2rem; text-align:center; color:var(--cachet); margin:.5rem 0}

/* ---------- Pied de page ---------- */
.footer{margin-top:4rem; border-top:1px solid var(--line); background:var(--paper-2)}
.footer-in{display:grid; grid-template-columns:1.3fr 2fr; gap:2.5rem; padding:3rem 0 1.5rem}
.footer-cols{display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem}
.footer-cols a, .footer-cols span{display:block; font-size:.9rem; color:var(--ink-soft); padding:.18rem 0}
.footer-cols a:hover{color:var(--cachet)}
.footer-base{padding:1rem 0 2rem; font-size:.75rem; color:var(--ink-faint); border-top:1px solid var(--line)}

/* ---------- Divers ---------- */
.breadcrumb{font-family:var(--mono); font-size:.78rem; color:var(--ink-faint); margin:1.5rem 0 .5rem}
.breadcrumb a{color:var(--ink-faint)} .breadcrumb a:hover{color:var(--cachet)}
.empty{text-align:center; padding:4rem 1rem; color:var(--ink-soft)}
.empty .mark{margin:0 auto 1rem; width:40px; height:40px}
.pill-row{display:flex; gap:.4rem; flex-wrap:wrap; align-items:center}
.rule{height:1px; background:var(--line); margin:1.5rem 0}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr; gap:1.5rem}
  .detail{grid-template-columns:1fr}
  .buybox{position:static}
  .studio-grid{grid-template-columns:1fr}
  .player{grid-template-columns:1fr}
  .player-side{position:static; max-height:none; border-right:0; border-bottom:1px solid var(--line)}
  .statbar{grid-template-columns:repeat(2,1fr)}
  .footer-in{grid-template-columns:1fr}
  .objectives{grid-template-columns:1fr}
}
@media (max-width:560px){
  .nav{display:none}
  .row2,.row3{grid-template-columns:1fr}
  .statbar{grid-template-columns:1fr 1fr}
}