/* Cours Portes de Conscience — feuille de style
   Palette : fond crème (jamais blanc), bleu profond + jaune soleil du logo, touches corail. */
:root{
  --bg:#FBF4E6; --bg2:#F3E9D3; --card:#FFFDF8; --fg:#2A2B2F; --muted:#6E6A60; --line:#E5DAC2;
  --blue:#3E56A0; --blue2:#6078C0; --blue-ink:#1F2E5A; --sun:#F0D818; --sun-ink:#7A6A00; --sun-line:#E3C400;
  --coral:#F07A5A; --green:#2E8B57; --red:#B8321E;
  --admin-bg:#7A4A2A; --admin-fg:#FBF4E6;
  --display:"Cormorant Garamond",Georgia,serif; --body:"Nunito",-apple-system,"Segoe UI",sans-serif;
  --r:14px; --shadow:0 8px 30px rgba(62,86,160,.10);
}
@media (prefers-color-scheme:dark){:root{--bg:#1C1E2A;--bg2:#242738;--card:#2A2D3F;--fg:#F3EEE2;--muted:#B3AE9F;--line:#3A3E55;--blue:#7E95DE;--blue2:#9AADE8;--blue-ink:#DCE4FA;--sun-ink:#F5E36A;--coral:#F58A6C;--green:#5BBD86;--admin-bg:#4A2E1C;--admin-fg:#F3EEE2;--shadow:0 8px 30px rgba(0,0,0,.35);color-scheme:dark}}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--fg);font:16px/1.6 var(--body);min-height:100vh}
h1,h2,h3{font-family:var(--display);font-weight:600;line-height:1.1;margin:0;text-wrap:balance}
h1{font-size:clamp(2.2rem,5vw,3.4rem)} h2{font-size:clamp(1.7rem,3.5vw,2.3rem)} h3{font-size:1.45rem}
p{margin:0} a{color:var(--blue)}
img{max-width:100%}
.wrap{max-width:1100px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.eyebrow{font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--blue)}
.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.7rem 1.3rem;border-radius:999px;font-weight:700;border:0;cursor:pointer;font-family:var(--body);font-size:.95rem;text-decoration:none;line-height:1.2}
.btn-blue{background:var(--blue);color:#fff}
.btn-sun{background:var(--sun);color:#2A2B2F}
.btn-ghost{background:transparent;color:var(--blue);border:2px solid var(--blue)}
.btn-coral{background:var(--coral);color:#fff}
.btn-red{background:var(--red);color:#fff}
.btn.small{padding:.45rem .9rem;font-size:.85rem}
.btn:focus-visible,button:focus-visible,a:focus-visible{outline:3px solid var(--sun);outline-offset:2px}
.btn:disabled{opacity:.5;cursor:default}

/* ---- gabarit public : menu vertical étroit ---- */
.site{display:grid;grid-template-columns:104px minmax(0,1fr);align-items:start;min-height:100vh}
.sidebar{position:sticky;top:0;height:100vh;background:var(--card);border-right:1px solid var(--line);display:flex;flex-direction:column;align-items:center;padding:1.2rem .5rem;gap:1.4rem}
.sunlogo{width:48px;height:48px;border-radius:50%;background:radial-gradient(circle at 50% 50%,#FFF3A0 0 28%,#F0D818 30% 55%,#E39A1E 57% 62%,transparent 64%);position:relative;flex:none;display:block}
.sunlogo::after{content:"";position:absolute;inset:0;border-radius:50%;background:repeating-conic-gradient(from 0deg,#E39A1E 0 6deg,transparent 6deg 15deg);-webkit-mask:radial-gradient(circle,transparent 58%,#000 60% 100%);mask:radial-gradient(circle,transparent 58%,#000 60% 100%)}
.sunlogo img{width:100%;height:100%;border-radius:50%;object-fit:cover;position:relative;z-index:1}
nav.vert{display:flex;flex-direction:column;width:100%}
nav.vert a{text-decoration:none;color:var(--fg);font-weight:700;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;padding:.9rem .3rem;display:block;text-align:center;line-height:1.2;position:relative}
nav.vert a+a::before{content:"";position:absolute;top:-5px;left:50%;transform:translateX(-50%);width:48px;height:10px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 10'%3E%3Cpath d='M1 5 C9 0.5 15 0.5 24 5 S39 9.5 47 5' fill='none' stroke='%23E3C400' stroke-width='0.9' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;opacity:.9}
nav.vert a:hover,nav.vert a.on{color:var(--blue)}
.sidebar .login{margin-top:auto;display:flex;flex-direction:column;align-items:center;gap:.5rem;width:100%}
.sidebar .login .btn{padding:.5rem .9rem;font-size:.85rem}
.sidebar .login .me{display:flex;flex-direction:column;align-items:center;gap:.3rem;text-decoration:none;color:var(--fg);font-weight:700;font-size:.82rem}
.av{width:40px;height:40px;border-radius:50%;background:var(--sun);color:#2A2B2F;display:grid;place-items:center;font-weight:800;font-size:.85rem;flex:none}
.sidebar .ext{font-size:.72rem;color:var(--muted);text-decoration:none;text-align:center}
.page{min-width:0}
.pagehead{display:flex;align-items:baseline;gap:.8rem;flex-wrap:wrap;padding-block:1.2rem .4rem}
.pagehead b{font-family:var(--display);font-weight:600;font-size:1.6rem;line-height:1;color:var(--blue-ink)}
.pagehead small{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.flash{background:rgba(240,216,24,.25);border-left:4px solid var(--sun);padding:.7rem 1rem;border-radius:0 10px 10px 0;margin-block:.8rem}
.flash.err{background:rgba(184,50,30,.12);border-color:var(--red)}

/* accueil */
.hero{position:relative;overflow:hidden;border-bottom:1px solid var(--line)}
.hero .wrap{padding-block:3rem 2.6rem;display:grid;grid-template-columns:1.2fr .8fr;gap:2rem;align-items:center}
.hero h1{color:var(--blue-ink)}
.hero .eyebrow{color:var(--coral)}
.hero p.lead{font-size:1.15rem;max-width:34rem;color:var(--muted);margin-top:1rem}
.hero .acts{display:flex;gap:.8rem;margin-top:1.6rem;flex-wrap:wrap}
.halo{aspect-ratio:1;max-width:100%;border-radius:50%;background:radial-gradient(circle,#FFF3A0 0 18%,var(--sun) 20% 32%,rgba(240,216,24,.35) 34% 48%,rgba(240,216,24,.12) 50% 70%,transparent 72%);justify-self:center;width:min(100%,320px)}
.hero::before{content:"";position:absolute;right:-160px;top:-160px;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle,rgba(240,216,24,.28),transparent 68%)}
.section{padding-block:2.6rem}
.section-head{display:flex;justify-content:space-between;align-items:end;gap:1rem;margin-bottom:1.5rem;flex-wrap:wrap}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.4rem}
.course{background:var(--card);border-radius:var(--r);box-shadow:var(--shadow);overflow:hidden;display:flex;flex-direction:column;border:1px solid var(--line)}
.cover{height:150px;display:flex;align-items:end;padding:1rem;color:#fff;font-family:var(--display);font-size:1.6rem;font-weight:600;background-size:cover;background-position:center;text-shadow:0 1px 8px rgba(0,0,0,.35)}
.cover.c1{background-image:linear-gradient(120deg,#5B3FA0,#F07A5A 60%,#F0D818)}
.cover.c2{background-image:linear-gradient(120deg,#1F2E5A,#3E56A0 60%,#6FB7C9)}
.cover.c3{background-image:linear-gradient(120deg,#2E8B57,#9CCB5A 60%,#F0D818)}
.cover.c4{background-image:linear-gradient(120deg,#8A2E4A,#F07A5A 60%,#F5A524)}
.cover.c5{background-image:linear-gradient(120deg,#1E4D5C,#2A8C8C 60%,#9CCB5A)}
.course .body{padding:1.1rem 1.2rem 1.3rem;display:flex;flex-direction:column;gap:.7rem;flex:1}
.meta{display:flex;gap:.9rem;font-size:.82rem;color:var(--muted);flex-wrap:wrap}
.price{font-family:var(--display);font-size:1.6rem;font-weight:600;color:var(--blue)}
.course .foot{display:flex;justify-content:space-between;align-items:center;margin-top:auto;padding-top:.5rem;gap:.6rem;flex-wrap:wrap}
.tag{display:inline-block;background:var(--bg2);color:var(--muted);border-radius:999px;padding:.15rem .7rem;font-size:.75rem;font-weight:700}
.tag.soon{background:rgba(240,216,24,.25);color:var(--sun-ink)}
.tag.ok{background:rgba(46,139,87,.15);color:var(--green)}
.how{background:var(--bg2)}
.how .steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.5rem;margin-top:1.5rem}
.step .n{width:40px;height:40px;border-radius:50%;background:var(--sun);color:#2A2B2F;font-weight:800;display:grid;place-items:center;margin-bottom:.6rem}
footer.site-foot{border-top:1px solid var(--line);color:var(--muted);font-size:.85rem}
footer.site-foot .wrap{padding-block:1.6rem;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap}

/* page cours */
.coursehead{border-bottom:1px solid var(--line)}
.coursehead .wrap{padding-block:2.4rem;display:grid;grid-template-columns:1fr 320px;gap:2rem;align-items:start}
.coursehead h1{color:var(--blue-ink)}
.coursehead .lead{color:var(--muted);font-size:1.15rem;margin-top:1rem;max-width:36rem}
.band{height:10px;border-radius:999px;width:140px;margin-bottom:1rem}
.band.c1{background:linear-gradient(120deg,#5B3FA0,#F07A5A 60%,#F0D818)}.band.c2{background:linear-gradient(120deg,#1F2E5A,#3E56A0 60%,#6FB7C9)}.band.c3{background:linear-gradient(120deg,#2E8B57,#9CCB5A 60%,#F0D818)}.band.c4{background:linear-gradient(120deg,#8A2E4A,#F07A5A 60%,#F5A524)}.band.c5{background:linear-gradient(120deg,#1E4D5C,#2A8C8C 60%,#9CCB5A)}
.buybox{background:var(--card);border-radius:var(--r);padding:1.3rem;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:.8rem;border:1px solid var(--line)}
.buybox .price{font-size:2.2rem}
.buybox ul{margin:0;padding-left:1.1rem;font-size:.9rem;color:var(--muted)}
.two{display:grid;grid-template-columns:1fr 320px;gap:2rem;align-items:start}
.prose{max-width:65ch;display:flex;flex-direction:column;gap:1rem;min-width:0}
.prose p,.prose ul,.prose ol,.prose blockquote{margin:0}
.prose blockquote{border-left:4px solid var(--sun);padding:.6rem 1rem;background:var(--card);border-radius:0 10px 10px 0}
.prose ul{padding-left:1.2rem;display:flex;flex-direction:column;gap:.3rem}
.video{aspect-ratio:16/9;max-width:100%;border-radius:var(--r);background:#11131c;display:grid;place-items:center;color:#fff;position:relative;overflow:hidden}
.video video{width:100%;height:100%;display:block;background:#000}
.video.empty{background:linear-gradient(135deg,var(--blue-ink),var(--blue));color:#fff;font-size:.9rem;text-align:center;padding:1rem}
.program{background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.program h3{padding:1rem 1.2rem;background:var(--bg2);font-size:1.2rem}
.program ol{list-style:none;margin:0;padding:0}
.program li{display:flex;justify-content:space-between;gap:1rem;padding:.65rem 1.2rem;border-top:1px solid var(--line);font-size:.92rem}
.program li span:last-child{color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.program li.part{background:rgba(240,216,24,.18);font-weight:700;color:var(--sun-ink)}

/* espace élève */
.student{display:grid;grid-template-columns:300px 1fr;gap:2rem;align-items:start}
.lessons{background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;position:sticky;top:1rem}
.lessons .pbar{height:8px;background:var(--bg2)}
.lessons .pbar i{display:block;height:100%;background:linear-gradient(90deg,var(--sun),var(--coral))}
.lessons .head{padding:1rem 1.2rem;border-bottom:1px solid var(--line)}
.lessons .head small{color:var(--muted)}
.lessons a{display:flex;align-items:center;gap:.7rem;padding:.6rem 1.2rem;text-decoration:none;color:var(--fg);font-size:.9rem;border-bottom:1px solid var(--line)}
.lessons a.done .dot{background:var(--green);border-color:var(--green)}
.lessons a.done .dot::after{content:"✓";color:#fff;font-size:.7rem;font-weight:800}
.lessons a.now{background:rgba(240,216,24,.2);font-weight:700}
.dot{width:20px;height:20px;border-radius:50%;border:2px solid var(--line);display:grid;place-items:center;flex:none;background:var(--card)}
.lessons .part{padding:.5rem 1.2rem;font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);background:var(--bg2)}
.lesson{display:flex;flex-direction:column;gap:1.2rem;min-width:0}
.lesson .acts{display:flex;gap:.8rem;flex-wrap:wrap;align-items:center}
.files{display:flex;flex-wrap:wrap;gap:.5rem}
.file{display:inline-flex;align-items:center;gap:.5rem;background:var(--bg2);padding:.4rem .9rem;border-radius:8px;text-decoration:none;font-size:.9rem;font-weight:600;color:var(--fg)}
.mycourses{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.4rem}

/* formulaires */
.form{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.form label,.field{display:flex;flex-direction:column;gap:.35rem;font-size:.82rem;font-weight:700;color:var(--muted);min-width:0}
.form .full{grid-column:1/-1}
input[type=text],input[type=email],input[type=password],input[type=number],input[type=url],textarea,select{font:inherit;font-size:.95rem;padding:.6rem .8rem;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--fg);width:100%}
textarea{min-height:110px;resize:vertical}
.check{display:flex;align-items:center;gap:.5rem;font-weight:600;color:var(--fg);flex-direction:row}
.authbox{max-width:440px;margin:3rem auto;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:1.6rem;display:flex;flex-direction:column;gap:1rem;box-shadow:var(--shadow)}
.authbox .form{grid-template-columns:1fr}
.hint{font-size:.85rem;color:var(--muted)}

/* admin */
.admin{display:grid;grid-template-columns:230px 1fr;min-height:100vh}
.side{background:var(--admin-bg);color:var(--admin-fg);padding:1.3rem 0;display:flex;flex-direction:column;gap:.2rem;position:sticky;top:0;height:100vh}
.side .who{padding:0 1.3rem 1.2rem;border-bottom:1px solid rgba(255,255,255,.15);margin-bottom:.6rem}
.side .who b{font-family:var(--display);font-size:1.3rem;font-weight:600;display:block}
.side .who small{opacity:.7;font-size:.8rem}
.side a{color:var(--admin-fg);text-decoration:none;padding:.6rem 1.3rem;font-size:.92rem;display:flex;gap:.7rem;align-items:center;opacity:.85}
.side a.on{background:rgba(255,255,255,.1);opacity:1;border-left:3px solid var(--sun)}
.side .bottom{margin-top:auto;padding-top:.6rem;border-top:1px solid rgba(255,255,255,.15)}
.main{padding:1.8rem;background:var(--bg);display:flex;flex-direction:column;gap:1.6rem;min-width:0}
.main .top{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap}
.main .top .acts{display:flex;gap:.6rem;flex-wrap:wrap}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:1rem}
.kpi{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:1rem 1.2rem}
.kpi b{font-family:var(--display);font-size:2rem;font-weight:600;display:block;line-height:1;color:var(--blue)}
.kpi small{color:var(--muted);font-size:.8rem}
.kpi.sun{background:var(--sun);border-color:var(--sun);color:#2A2B2F}.kpi.sun b{color:#2A2B2F}.kpi.sun small{color:#5a5000}
.panel{background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.panel .ph{display:flex;justify-content:space-between;align-items:center;padding:.9rem 1.2rem;border-bottom:1px solid var(--line);gap:1rem;flex-wrap:wrap}
.panel .ph h3{font-size:1.25rem}
.panel .pb{padding:1.2rem}
.panel .form{padding:1.2rem}
table{width:100%;border-collapse:collapse;font-size:.9rem}
th{text-align:left;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding:.7rem 1.2rem;background:var(--bg2)}
td{padding:.7rem 1.2rem;border-top:1px solid var(--line);vertical-align:middle}
td.num{font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.pill{display:inline-block;padding:.15rem .65rem;border-radius:999px;font-size:.75rem;font-weight:700;white-space:nowrap}
.pill.ok{background:rgba(46,139,87,.15);color:var(--green)}
.pill.draft{background:rgba(240,216,24,.3);color:var(--sun-ink)}
.pill.pay{background:rgba(62,86,160,.15);color:var(--blue)}
.pill.err{background:rgba(184,50,30,.12);color:var(--red)}
.tscroll{overflow-x:auto}
.mini{background:transparent;border:1px solid var(--line);border-radius:8px;padding:.3rem .7rem;font:inherit;font-size:.8rem;font-weight:700;color:var(--blue);cursor:pointer;text-decoration:none;display:inline-block;line-height:1.3}
.mini.danger{color:var(--red)}
.inline{display:inline}
.rowacts{display:flex;gap:.3rem;flex-wrap:wrap;align-items:center}
.sessions{list-style:none;margin:0;padding:0 1.2rem 1.2rem;display:flex;flex-direction:column;gap:.5rem}
.sessions li{display:grid;grid-template-columns:1fr auto auto;gap:.8rem;align-items:center;background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:.6rem .8rem;font-size:.9rem}
.sessions li.part{background:rgba(240,216,24,.18);border-color:transparent}
.sessions .vid{font-size:.78rem;color:var(--muted)}
.sessions .vid.ok::before{content:"● ";color:var(--green)}
.sessions .vid.no::before{content:"● ";color:var(--coral)}
.drop{border:2px dashed var(--blue2);border-radius:var(--r);padding:1.2rem;text-align:center;color:var(--muted);font-size:.9rem;background:rgba(62,86,160,.04);cursor:pointer}
.drop b{color:var(--blue)}
.drop input{display:none}
.progress{height:8px;background:var(--bg2);border-radius:999px;overflow:hidden;margin-top:.6rem}
.progress i{display:block;height:100%;background:linear-gradient(90deg,var(--sun),var(--coral));width:0}
.toolbar{display:flex;gap:.3rem;flex-wrap:wrap;margin-bottom:.4rem}
.toolbar button{background:var(--bg2);border:1px solid var(--line);border-radius:6px;padding:.25rem .6rem;font:inherit;font-size:.8rem;cursor:pointer;color:var(--fg)}
.editor{min-height:260px;border:1px solid var(--line);border-radius:8px;padding:.8rem 1rem;background:var(--bg);font:inherit;font-size:.95rem;line-height:1.6;overflow:auto}
.editor:focus{outline:2px solid var(--sun)}
.editor blockquote{border-left:4px solid var(--sun);padding:.3rem 1rem;margin:.5rem 0;background:var(--card)}
.loginadmin{min-height:100vh;display:grid;place-items:center;padding:1rem}

@media (max-width:860px){
  .site{grid-template-columns:1fr}
  .sidebar{position:static;height:auto;flex-direction:row;flex-wrap:wrap;align-items:center;padding:.6rem 1rem;gap:.8rem;border-right:0;border-bottom:1px solid var(--line)}
  .sunlogo{width:36px;height:36px}
  nav.vert{flex-direction:row;flex-wrap:wrap;width:auto}
  nav.vert a{padding:.4rem .7rem}
  nav.vert a+a::before{display:none}
  .sidebar .login{margin-top:0;margin-left:auto;flex-direction:row;align-items:center;width:auto}
  .sidebar .login .me{flex-direction:row}
  .sidebar .ext{display:none}
  .hero .wrap,.coursehead .wrap,.two,.student{grid-template-columns:1fr}
  .halo{width:180px}
  .lessons{position:static}
  .admin{grid-template-columns:1fr}
  .side{position:static;height:auto;flex-direction:row;flex-wrap:wrap;padding:.6rem;gap:.2rem}
  .side .who,.side .bottom{display:none}
  .side a{padding:.4rem .8rem;font-size:.85rem}
  .form{grid-template-columns:1fr}
  .sessions li{grid-template-columns:1fr}
  .main{padding:1rem}
}
@media (prefers-reduced-motion:no-preference){.course{transition:transform .2s}.course:hover{transform:translateY(-3px)}}