/* Ekklesia. Concept : une bande bleu nuit (le fond du logo) porte la marque et la navigation ;
   en dessous, une page de lecture claire et calme, colonne de ~65 caractères, comme un cahier de cours.
   Le vert feuille ne sert qu'aux accents. */

@font-face{font-family:"Literata";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/literata-latin-400-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Literata";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/literata-latin-ext-400-normal.woff2) format("woff2");unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Literata";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/literata-greek-400-normal.woff2) format("woff2");unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF}
@font-face{font-family:"Literata";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/literata-greek-ext-400-normal.woff2) format("woff2");unicode-range:U+1F00-1FFF}
@font-face{font-family:"Literata";font-style:italic;font-weight:400;font-display:swap;src:url(fonts/literata-latin-400-italic.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Literata";font-style:italic;font-weight:400;font-display:swap;src:url(fonts/literata-latin-ext-400-italic.woff2) format("woff2");unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Literata";font-style:italic;font-weight:400;font-display:swap;src:url(fonts/literata-greek-400-italic.woff2) format("woff2");unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF}
@font-face{font-family:"Literata";font-style:italic;font-weight:400;font-display:swap;src:url(fonts/literata-greek-ext-400-italic.woff2) format("woff2");unicode-range:U+1F00-1FFF}
@font-face{font-family:"Literata";font-style:normal;font-weight:600;font-display:swap;src:url(fonts/literata-latin-600-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Literata";font-style:normal;font-weight:600;font-display:swap;src:url(fonts/literata-latin-ext-600-normal.woff2) format("woff2");unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Literata";font-style:normal;font-weight:600;font-display:swap;src:url(fonts/literata-greek-600-normal.woff2) format("woff2");unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF}
@font-face{font-family:"Literata";font-style:normal;font-weight:600;font-display:swap;src:url(fonts/literata-greek-ext-600-normal.woff2) format("woff2");unicode-range:U+1F00-1FFF}
@font-face{font-family:"Barlow Condensed";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/barlow-condensed-latin-500-normal.woff2) format("woff2"),url(fonts/barlow-condensed-latin-ext-500-normal.woff2) format("woff2")}
@font-face{font-family:"Barlow Condensed";font-style:normal;font-weight:600;font-display:swap;src:url(fonts/barlow-condensed-latin-600-normal.woff2) format("woff2"),url(fonts/barlow-condensed-latin-ext-600-normal.woff2) format("woff2")}
@font-face{font-family:"Barlow Condensed";font-style:normal;font-weight:700;font-display:swap;src:url(fonts/barlow-condensed-latin-700-normal.woff2) format("woff2"),url(fonts/barlow-condensed-latin-ext-700-normal.woff2) format("woff2")}

:root{
  /* Couleurs */
  --navy:#003464;          /* fond du logo, bande de marque */
  --navy-2:#0A4378;        /* surfaces sur la bande */
  --leaf:#85C441;          /* vert des feuilles, accents sur bleu */
  --leaf-ink:#3E6F12;      /* vert lisible sur fond clair */
  --paper:#F4F6F8;         /* fond de lecture, gris légèrement bleuté */
  --card:#FFFFFF;
  --ink:#14202D;
  --muted:#556476;
  --line:#D6DEE7;
  --on-navy:#F5F8FA;
  --on-navy-muted:#B9C9DA;
  /* Typographie */
  --display:"Barlow Condensed","Arial Narrow","Roboto Condensed",sans-serif;
  --body:"Literata",Georgia,"Times New Roman",serif;
  --step--1:.875rem; --step-0:1.0625rem; --step-1:1.25rem; --step-2:1.6rem; --step-3:2.2rem; --step-4:clamp(2.4rem,5.5vw,3.6rem);
  --measure:66ch;
  --wrap:1120px;
  --radius:6px;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --navy:#001F3D; --navy-2:#062C52; --leaf:#93D04F; --leaf-ink:#A6DA6B;
  --paper:#0C1624; --card:#122034; --ink:#E5EBF1; --muted:#9DAEC2; --line:#22344C;
  --on-navy:#F5F8FA; --on-navy-muted:#A9BBCF; color-scheme:dark}}
:root[data-theme="dark"]{
  --navy:#001F3D; --navy-2:#062C52; --leaf:#93D04F; --leaf-ink:#A6DA6B;
  --paper:#0C1624; --card:#122034; --ink:#E5EBF1; --muted:#9DAEC2; --line:#22344C;
  --on-navy:#F5F8FA; --on-navy-muted:#A9BBCF; color-scheme:dark}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 var(--step-0)/1.65 var(--body);font-feature-settings:"kern","liga"}
img,video{max-width:100%;display:block}
a{color:var(--leaf-ink);text-decoration-thickness:1px;text-underline-offset:.18em}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--leaf);outline-offset:2px;border-radius:2px}
h1,h2,h3{font-family:var(--display);font-weight:600;line-height:1.08;letter-spacing:.005em;text-wrap:balance;margin:0}
p{margin:0}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.skip{position:absolute;left:-999px;top:0;background:var(--leaf);color:#0B1A0A;padding:.5rem 1rem;z-index:20;font-family:var(--display)}
.skip:focus{left:max(16px,env(safe-area-inset-left,0px))}
.eyebrow{font-family:var(--display);font-weight:600;font-size:var(--step--1);letter-spacing:.14em;text-transform:uppercase;color:var(--leaf-ink)}

/* Bande de marque */
.brand{background:var(--navy);color:var(--on-navy)}
.brand a{color:var(--on-navy)}
.brand .eyebrow{color:var(--leaf)}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:12px 24px;flex-wrap:wrap;padding-block:14px}
.logo{display:block;line-height:0}
.logo img{height:46px;width:auto}
.nav{display:flex;align-items:center;gap:6px 22px;flex-wrap:wrap;font-family:var(--display);font-weight:600;font-size:1.06rem;letter-spacing:.06em;text-transform:uppercase}
.nav a{text-decoration:none;color:var(--on-navy-muted);padding-block:4px;border-bottom:2px solid transparent}
.nav a:hover,.nav a[aria-current="page"]{color:var(--on-navy);border-bottom-color:var(--leaf)}
.langs{display:flex;gap:2px;margin-left:6px}
.langs a{font-size:.95rem;padding:3px 7px;border:1px solid transparent;border-radius:4px;border-bottom-width:1px}
.langs a[aria-current="true"]{border-color:color-mix(in srgb,var(--on-navy) 35%,transparent);color:var(--on-navy)}

/* Accueil : en-tête avec la vidéo */
.hero{display:grid;grid-template-columns:minmax(0,1fr);gap:28px;padding-block:28px 48px;align-items:center}
@media (min-width:880px){.hero{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:48px;padding-block:40px 64px}}
.hero h1{font-size:var(--step-4);text-transform:uppercase;letter-spacing:.01em;margin-top:10px}
.hero .lead{margin-top:18px;font-size:var(--step-1);line-height:1.55;color:var(--on-navy-muted);max-width:34em}
.hero .actions{margin-top:28px;display:flex;gap:12px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:.5em;font-family:var(--display);font-weight:600;font-size:1.12rem;letter-spacing:.06em;text-transform:uppercase;text-decoration:none;padding:.62em 1.15em;border-radius:var(--radius);border:2px solid transparent;cursor:pointer;line-height:1.1}
.btn-leaf{background:var(--leaf);color:#0F2006 !important}
.btn-leaf:hover{background:color-mix(in srgb,var(--leaf) 85%,#fff)}
.btn-line{border-color:var(--line);color:var(--ink);background:transparent}
.brand .btn-line{border-color:color-mix(in srgb,var(--on-navy) 40%,transparent);color:var(--on-navy)}
.btn-line:hover{border-color:var(--leaf)}
.screen{position:relative;border-radius:10px;overflow:hidden;background:#002a52;aspect-ratio:16/9;max-width:100%;box-shadow:0 30px 60px -30px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.08)}
.screen video{width:100%;height:100%;object-fit:cover}
.replay{position:absolute;right:12px;bottom:12px;font-family:var(--display);font-weight:600;font-size:.9rem;letter-spacing:.08em;text-transform:uppercase;background:rgba(0,30,60,.65);color:#fff;border:1px solid rgba(255,255,255,.35);border-radius:999px;padding:6px 12px;cursor:pointer;backdrop-filter:blur(4px)}
.replay:hover{border-color:var(--leaf)}

/* Le mot grec */
.word{display:grid;grid-template-columns:minmax(0,1fr);gap:8px 48px;padding-block:56px;border-bottom:1px solid var(--line)}
@media (min-width:880px){.word{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:baseline}}
.word .greek{font-family:var(--body);font-style:italic;font-weight:400;font-size:clamp(2.6rem,7vw,4.4rem);line-height:1;color:var(--ink)}
.greek small{display:block;font-style:normal;font-family:var(--display);font-size:1rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:12px}
.word p{font-size:var(--step-1);line-height:1.6;max-width:var(--measure)}

/* Sections */
.section{padding-block:56px}
.section-head{display:flex;flex-direction:column;gap:10px;margin-bottom:28px;max-width:var(--measure)}
.section-head h2{font-size:var(--step-3);text-transform:uppercase}
.section-head p{color:var(--muted)}

/* Cours mis en avant */
.course{display:grid;grid-template-columns:minmax(0,1fr);background:var(--card);border:1px solid var(--line);border-radius:10px;overflow:hidden}
@media (min-width:880px){.course{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.course-main{padding:28px;display:flex;flex-direction:column;gap:14px}
.course-main h3{font-size:var(--step-3);text-transform:uppercase}
.course-main h3 a{color:var(--ink);text-decoration:none}
.course-main h3 a:hover{color:var(--leaf-ink)}
.subtitle{font-family:var(--body);font-style:italic;color:var(--muted);font-size:var(--step-1)}
.meta{display:flex;flex-wrap:wrap;gap:6px 18px;font-family:var(--display);font-weight:500;letter-spacing:.05em;text-transform:uppercase;font-size:.98rem;color:var(--muted);font-variant-numeric:tabular-nums}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{font-family:var(--display);font-weight:600;font-size:.9rem;letter-spacing:.08em;text-transform:uppercase;padding:2px 9px;border-radius:999px;border:1px solid var(--line);color:var(--muted)}
.chip.free{border-color:var(--leaf-ink);color:var(--leaf-ink)}
.course-plan{background:color-mix(in srgb,var(--paper) 60%,var(--card));border-top:1px solid var(--line);padding:22px 28px}
@media (min-width:880px){.course-plan{border-top:0;border-left:1px solid var(--line)}}
.course-plan h4{margin:0 0 8px;font-family:var(--display);font-weight:600;font-size:.95rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}

/* Plan numéroté (leçons dans l'ordre) */
.plan{list-style:none;margin:0;padding:0;counter-reset:l}
.plan li{counter-increment:l;display:grid;grid-template-columns:2.2rem minmax(0,1fr);gap:0 10px;padding-block:9px;border-top:1px solid var(--line)}
.plan li:first-child{border-top:0}
.plan li::before{content:counter(l);font-family:var(--display);font-weight:700;font-size:1.35rem;line-height:1.2;color:var(--leaf-ink);font-variant-numeric:tabular-nums}
.plan a{color:var(--ink);text-decoration:none;font-weight:600}
.plan a:hover{color:var(--leaf-ink);text-decoration:underline}
.plan .sum{grid-column:2;color:var(--muted);font-size:.97rem;margin-top:2px}
.plan .mins{grid-column:2;font-family:var(--display);font-size:.92rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-top:2px}
.plan.big li{padding-block:16px;grid-template-columns:3rem minmax(0,1fr)}
.plan.big li::before{font-size:2rem}
.plan.big a{font-size:var(--step-1)}

/* Enseignant */
.author{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;max-width:var(--measure)}
.author h2{font-size:var(--step-2);text-transform:uppercase}
.author p{color:var(--muted)}

/* En-tête de page intérieure */
.page-head{padding-block:22px 40px}
.crumbs{font-family:var(--display);font-weight:500;letter-spacing:.06em;text-transform:uppercase;font-size:.95rem;color:var(--on-navy-muted);display:flex;flex-wrap:wrap;gap:4px 8px;margin-bottom:22px}
.crumbs a{color:var(--on-navy-muted);text-decoration:none}
.crumbs a:hover{color:var(--on-navy);text-decoration:underline}
.crumbs span[aria-hidden]{opacity:.5}
.page-head h1{font-size:var(--step-4);text-transform:uppercase;margin-top:8px;max-width:22ch}
.page-head .subtitle{color:var(--on-navy-muted);margin-top:10px}
.page-head .lead{margin-top:16px;font-size:var(--step-1);line-height:1.55;color:var(--on-navy-muted);max-width:var(--measure)}
.page-head .meta{color:var(--on-navy-muted);margin-top:18px}
.page-head .actions{margin-top:24px;display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.pdfnote{font-size:.9rem;color:var(--on-navy-muted)}

/* Page de cours */
.course-body{display:grid;grid-template-columns:minmax(0,1fr);gap:40px;padding-block:48px}
@media (min-width:960px){.course-body{grid-template-columns:minmax(0,1fr) 300px}}
.course-body h2{font-size:var(--step-2);text-transform:uppercase;margin-bottom:12px}
.aside-box{border-top:2px solid var(--leaf-ink);padding-top:14px;display:flex;flex-direction:column;gap:10px;color:var(--muted);font-size:.97rem;align-self:start}
.aside-box h3{font-size:1rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}

/* Leçon */
.lesson-layout{display:grid;grid-template-columns:minmax(0,1fr);gap:48px;padding-block:44px 64px}
@media (min-width:1080px){.lesson-layout{grid-template-columns:250px minmax(0,1fr)}}
.outline{display:none}
@media (min-width:1080px){.outline{display:block;position:sticky;top:20px;align-self:start}}
.outline h2{font-size:.95rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.outline .plan li{padding-block:7px;grid-template-columns:1.6rem minmax(0,1fr)}
.outline .plan li::before{font-size:1.05rem;color:var(--muted)}
.outline .plan a{font-weight:400;font-size:.93rem;line-height:1.4;display:block}
.outline .plan li.on::before{color:var(--leaf-ink)}
.outline .plan li.on a{font-weight:600}
.lesson{max-width:var(--measure);min-width:0}
.lesson .media{display:flex;flex-direction:column;gap:14px;margin-bottom:32px}
.lesson .media video{border-radius:8px;width:100%;background:#000}
.lesson .media audio{width:100%}
.media-label{font-family:var(--display);font-weight:600;letter-spacing:.1em;text-transform:uppercase;font-size:.95rem;color:var(--muted)}
.prose{display:flex;flex-direction:column;gap:1.05em}
.prose h2{font-size:var(--step-2);margin-top:1.1em;color:var(--ink)}
.prose ul,.prose ol{margin:0;padding-left:1.3em;display:flex;flex-direction:column;gap:.45em}
.prose li::marker{color:var(--leaf-ink);font-family:var(--display);font-weight:700}
.prose strong{font-weight:600}
.prose em{font-style:italic}
.prose blockquote{margin:0;padding-left:1em;border-left:2px solid var(--line);color:var(--muted)}

.notes{margin-top:44px;display:grid;grid-template-columns:minmax(0,1fr);gap:28px}
.note{border-top:1px solid var(--line);padding-top:16px}
.note h2{font-size:1.05rem;letter-spacing:.14em;text-transform:uppercase;margin-bottom:12px;display:flex;align-items:center;gap:10px}
.note h2::before{content:"";width:12px;height:16px;flex:none;background:var(--leaf);border-radius:0 100% 0 100%;transform:rotate(-12deg)}
.note ul{margin:0;padding-left:1.2em;display:flex;flex-direction:column;gap:.55em}
.note.key{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:20px 22px}
.note.reading li{color:var(--muted);font-size:.97rem}

.pager{margin-top:48px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}
.pager a{display:flex;flex-direction:column;gap:4px;padding:14px 16px;border:1px solid var(--line);border-radius:8px;text-decoration:none;color:var(--ink);background:var(--card);min-width:0}
.pager a:hover{border-color:var(--leaf-ink)}
.pager .dir{font-family:var(--display);font-weight:600;letter-spacing:.1em;text-transform:uppercase;font-size:.88rem;color:var(--muted)}
.pager .t{font-weight:600;line-height:1.35}
.pager .next{text-align:right;grid-column:2}
.pager .done{grid-column:2;text-align:right;align-self:center;color:var(--muted);font-style:italic}
@media (max-width:560px){.pager{grid-template-columns:minmax(0,1fr)}.pager .next,.pager .done{grid-column:1}}

.source{margin-top:28px;font-size:.92rem;color:var(--muted);font-style:italic}

/* Pied de page */
.foot{background:var(--navy);color:var(--on-navy-muted);margin-top:0}
.foot .wrap{padding-block:32px;display:flex;flex-wrap:wrap;gap:16px 32px;align-items:center;justify-content:space-between}
.foot img{height:38px;width:auto}
.foot p{font-size:.95rem}
.foot a{color:var(--on-navy-muted)}

/* Page d'accueil des langues */
.picker{min-height:100%;display:grid;place-items:center;padding-block:48px}
.picker-inner{display:flex;flex-direction:column;align-items:center;gap:28px;text-align:center}
.picker img{width:min(320px,70vw);height:auto}
.picker .langs-big{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}

@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important;animation:none!important}}

/* Grille de cours (accueil) */
.cards{display:grid;grid-template-columns:minmax(0,1fr);gap:20px}
@media (min-width:760px){.cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
.card{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:24px;display:flex;flex-direction:column;gap:10px;min-width:0}
.card h3{font-size:var(--step-2);text-transform:uppercase}
.card h3 a{color:var(--ink);text-decoration:none}
.card h3 a:hover{color:var(--leaf-ink)}
.card .subtitle{font-size:var(--step-0)}
.card .desc{color:var(--muted);font-size:.98rem}
.card-foot{margin-top:auto;padding-top:10px;display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between}

/* Présentation de l'enseignant */
.bio{margin-top:56px;padding-top:40px;border-top:1px solid var(--line);display:grid;grid-template-columns:minmax(0,1fr);gap:28px;align-items:start}
@media (min-width:880px){.bio{grid-template-columns:minmax(0,1fr) 280px}}
.bio-text{display:flex;flex-direction:column;gap:12px;max-width:var(--measure);min-width:0}
.bio-text h2{font-size:var(--step-3);text-transform:uppercase}
.portrait{width:100%;max-width:280px;height:auto;border-radius:10px;object-fit:cover;aspect-ratio:4/5}
.tls{margin-top:48px;display:grid;grid-template-columns:minmax(0,1fr);gap:40px}
@media (min-width:880px){.tls{grid-template-columns:repeat(2,minmax(0,1fr))}}
.tl h3{font-size:1.05rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:16px}
.tl ol{list-style:none;margin:0;padding:0 0 0 18px;border-left:2px solid var(--line);display:flex;flex-direction:column;gap:22px}
.tl li{position:relative;display:flex;flex-direction:column;gap:2px}
.tl li::before{content:"";position:absolute;left:-25px;top:6px;width:12px;height:12px;border-radius:50%;background:var(--paper);border:2px solid var(--leaf-ink)}
.tl-years{font-family:var(--display);font-weight:600;letter-spacing:.06em;color:var(--leaf-ink);font-variant-numeric:tabular-nums}
.tl-title{font-weight:600}
.tl-place{color:var(--muted);font-size:.97rem}
.tl-text{color:var(--muted);font-size:.97rem;margin-top:4px}
.home-author{display:grid;grid-template-columns:96px minmax(0,1fr);gap:20px;align-items:center}
.home-author img{width:96px;height:120px;object-fit:cover;border-radius:8px}
@media (min-width:600px){.home-author{grid-template-columns:140px minmax(0,1fr);gap:28px}.home-author img{width:140px;height:175px}}