/* =========================================================================
   eduka.me - feuille de style unique
   Site statique. Aucune dependance externe : ni CDN, ni police distante,
   ni script tiers. Les polices sont auto-hebergees dans /assets/fonts/.
   Reference visuelle : handoff_site_eduka/reference.html
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. POLICES AUTO-HEBERGEES
   Urbane : police de titre fournie par l'editeur, graisses 600 et 500
   uniquement. Les .otf d'origine sont conserves dans /assets/fonts/otf/ et
   ne sont pas servis. Si la licence web d'Urbane n'etait pas acquise, il
   suffit de retirer les deux blocs @font-face "Urbane" : Jost 600 prend
   le relais comme police de titre, le reste du site est inchange.
   ------------------------------------------------------------------------- */
@font-face{font-family:"Urbane";src:url("../fonts/urbane-demibold.woff2") format("woff2");
  font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Urbane";src:url("../fonts/urbane-medium.woff2") format("woff2");
  font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Jost";src:url("../fonts/jost-600.woff2") format("woff2");
  font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Public Sans";src:url("../fonts/public-sans-400.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Public Sans";src:url("../fonts/public-sans-600.woff2") format("woff2");
  font-weight:600;font-style:normal;font-display:swap}

/* -------------------------------------------------------------------------
   2. JETONS DE DESIGN
   ------------------------------------------------------------------------- */
:root{
  --font-display:"Urbane","Jost","Public Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-text:"Public Sans",system-ui,-apple-system,"Segoe UI",Helvetica,sans-serif;

  --violet:#9400d7;
  --violet-strong:#7a00b0;
  --violet-light:#c07af0;

  --bg:#fbfafc;
  --surface:#ffffff;
  --surface-2:#f4eff8;
  --text:#191622;
  --text-muted:#4b465a;
  --text-faint:#6d6779;
  --border:#e4dfea;
  --border-strong:#cdbfd9;
  --accent:#9400d7;
  --accent-text:#7a00b0;
  --accent-soft:#f3e6fb;
  --on-accent:#ffffff;
  --invert-bg:#191622;
  --invert-surface:#241f30;
  --invert-text:#ffffff;
  --invert-muted:#bdb7c9;
  --invert-border:#3a3348;
  --danger:#b3261e;
  --ok:#1f6f43;
  --shot-a:#efe9f3;
  --shot-b:#e7dfee;

  --r-sm:8px; --r-md:14px; --r-lg:20px; --r-xl:22px; --r-pill:999px;
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:20px; --s-6:28px;
  --s-7:36px; --s-8:48px; --s-9:64px; --s-10:88px;
  --shadow-1:0 2px 14px rgba(25,22,34,.06);
  --shadow-2:0 20px 50px -28px rgba(25,22,34,.55);
  --wrap:1200px;

  color-scheme:light dark;
}

/* Theme sombre. Les selecteurs [data-theme] sont conserves pour qu'un
   selecteur de theme puisse etre ajoute plus tard sans toucher au CSS ;
   le site publie ne suit aujourd'hui que prefers-color-scheme. */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#141119; --surface:#1c1825; --surface-2:#241f30;
    --text:#f3f1f6; --text-muted:#bdb7c9; --text-faint:#9c95ab;
    --border:#322c40; --border-strong:#453c58;
    --accent:#9400d7; --accent-text:#c07af0; --accent-soft:#2a1638;
    --invert-bg:#241f30; --invert-surface:#2f2840; --invert-border:#453c58;
    --danger:#ff9d94; --ok:#7fd3a3;
    --shot-a:#241f30; --shot-b:#2b2438;
    --shadow-1:0 2px 14px rgba(0,0,0,.35);
    --shadow-2:0 20px 50px -28px rgba(0,0,0,.8);
  }
}
:root[data-theme="dark"]{
  --bg:#141119; --surface:#1c1825; --surface-2:#241f30;
  --text:#f3f1f6; --text-muted:#bdb7c9; --text-faint:#9c95ab;
  --border:#322c40; --border-strong:#453c58;
  --accent:#9400d7; --accent-text:#c07af0; --accent-soft:#2a1638;
  --invert-bg:#241f30; --invert-surface:#2f2840; --invert-border:#453c58;
  --danger:#ff9d94; --ok:#7fd3a3;
  --shot-a:#241f30; --shot-b:#2b2438;
  --shadow-1:0 2px 14px rgba(0,0,0,.35);
  --shadow-2:0 20px 50px -28px rgba(0,0,0,.8);
}

/* -------------------------------------------------------------------------
   3. BASE
   ------------------------------------------------------------------------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font-text);
  font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;overflow-wrap:break-word}

h1,h2,h3{font-family:var(--font-display);font-weight:600;letter-spacing:-.02em;
  line-height:1.12;margin:0;text-wrap:pretty}
h1{font-size:56px}
h2{font-size:42px}
h3{font-size:23px}
p{margin:0}
ul,ol{margin:0}

a{color:var(--accent-text);text-decoration:none}
a:hover{color:var(--accent);text-decoration:underline}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,
textarea:focus-visible,summary:focus-visible,[tabindex]:focus-visible{
  outline:3px solid var(--accent-text);outline-offset:2px;border-radius:4px}

img{max-width:100%}

/* Le site est presque immobile : seules les couleurs transitionnent. */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
}

.wrap{max-width:var(--wrap);margin:0 auto;padding-left:var(--s-6);padding-right:var(--s-6)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:var(--s-4);top:var(--s-4);z-index:60;background:var(--surface);
  border:1px solid var(--border-strong);padding:10px 16px;border-radius:var(--r-sm)}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

section{scroll-margin-top:84px}
.section{padding-top:var(--s-9)}
.section-sm{padding-top:56px}
.section-hero{padding-top:40px}

/* -------------------------------------------------------------------------
   4. LOGOTYPE
   Fichier PNG fourni, transparent, 141 x 60. Servi a 30px de haut dans
   l'en-tete et 24px dans le pied de page, donc au double de sa taille
   d'affichage : net sur ecran a haute densite.
   ------------------------------------------------------------------------- */
.logo{display:inline-flex;align-items:center;text-decoration:none;line-height:0}
.logo:hover{text-decoration:none}
.logo img{display:block;height:30px;width:auto}
.logo .lg-dark{display:none}
:root[data-theme="dark"] .logo .lg-light{display:none}
:root[data-theme="dark"] .logo .lg-dark{display:block}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .logo .lg-light{display:none}
  :root:not([data-theme="light"]) .logo .lg-dark{display:block}
}

/* -------------------------------------------------------------------------
   5. BOUTONS ET PASTILLE
   ------------------------------------------------------------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--font-text);font-weight:600;font-size:17px;line-height:1;
  padding:15px 26px;min-height:44px;border-radius:var(--r-pill);
  border:1px solid transparent;cursor:pointer;text-align:center;
  transition:background-color .15s ease,color .15s ease,border-color .15s ease}
.btn-primary{background:var(--violet);color:#fff}
.btn-primary:hover{background:var(--invert-bg);color:#fff;text-decoration:none}
.btn-primary:active{background:var(--violet-strong)}
.btn-secondary{background:transparent;color:var(--text);border-color:var(--border-strong)}
.btn-secondary:hover{border-color:var(--violet);color:var(--accent-text);
  background:var(--surface);text-decoration:none}
.btn-light{background:#fff;color:var(--violet-strong)}
.btn-light:hover{background:var(--violet);color:#fff;text-decoration:none}
.btn-sm{padding:11px 20px;font-size:15px}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.45;pointer-events:none}

.badge{display:inline-block;font-size:13px;font-weight:600;color:var(--accent-text);
  background:var(--accent-soft);border-radius:var(--r-pill);padding:6px 13px;line-height:1.3}

/* -------------------------------------------------------------------------
   6. EN-TETE
   ------------------------------------------------------------------------- */
.site-header{position:sticky;top:0;z-index:30;background:var(--bg);
  border-bottom:1px solid transparent}
@supports (background:color-mix(in srgb,red 90%,transparent)){
  .site-header{background:color-mix(in srgb,var(--bg) 90%,transparent)}
}
@supports ((backdrop-filter:blur(10px)) or (-webkit-backdrop-filter:blur(10px))){
  .site-header{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
}
.site-header .bar{display:flex;align-items:center;gap:var(--s-5);
  padding-top:18px;padding-bottom:18px;position:relative}
.site-nav{margin-left:auto;display:flex;align-items:center;gap:var(--s-6);font-size:15px}
.site-nav a{color:var(--text-muted)}
.site-nav a:hover{color:var(--accent-text)}
.site-nav a.btn-primary{color:#fff}
/* Emplacement reserve au futur selecteur de langue : juste avant
   "Se connecter". Ne rien afficher tant qu'une seule langue existe. */
.lang-slot{display:none}
.nav-toggle{display:none;margin-left:auto;background:none;
  border:1px solid var(--border-strong);border-radius:var(--r-sm);
  padding:8px 14px;min-height:44px;color:var(--text);
  font-family:var(--font-text);font-size:15px;font-weight:600;cursor:pointer;
  transition:border-color .15s ease,color .15s ease}
.nav-toggle:hover{border-color:var(--violet);color:var(--accent-text)}

/* -------------------------------------------------------------------------
   7. BLOCS DE TEXTE
   ------------------------------------------------------------------------- */
.eyebrow{font-size:14px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--accent-text);margin:0 0 14px}
.lead{font-size:19px;color:var(--text-muted);text-wrap:pretty}
.note{font-size:14px;color:var(--text-faint)}
.muted{color:var(--text-muted)}
.faint{color:var(--text-faint)}
.small{font-size:15px}
.text-16{font-size:16px}
.mesure{max-width:60ch}
.mesure-46{max-width:46ch}
.mesure-50{max-width:50ch}
.mesure-52{max-width:52ch}
.h3-29{font-size:29px}

/* Paragraphe unique de la section "Le problème" : Urbane 500. */
.probleme-txt{font-family:var(--font-display);font-size:32px;font-weight:500;
  line-height:1.32;max-width:30ch;text-wrap:pretty}

.panel{background:var(--surface-2);border-radius:var(--r-xl);padding:56px}
.panel-32{padding:32px}
.panel-48{padding:48px}
.card{background:var(--surface);border-radius:var(--r-lg);padding:30px;
  box-shadow:var(--shadow-1);border:1px solid var(--border)}
.card-20{padding:20px}
.card strong{font-weight:600}

/* -------------------------------------------------------------------------
   8. GRILLES DE SECTION
   .two-col marque les grilles qui passent a une colonne sous 960px.
   ------------------------------------------------------------------------- */
.hero-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:var(--s-8);align-items:center}
.grid-probleme{display:grid;grid-template-columns:1.05fr .95fr;gap:var(--s-8);align-items:center}
.grid-eleves{display:grid;grid-template-columns:1.05fr .95fr;gap:var(--s-8);align-items:center}
.grid-1-1-start{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-8);align-items:start}
.benefits{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-5)}
.card-large{grid-column:span 2;padding:36px;display:grid;grid-template-columns:1fr 1fr;
  gap:var(--s-7);align-items:center}
.card-stack{padding:30px;display:grid;grid-template-columns:1fr;gap:var(--s-5)}
.stack-12{display:grid;gap:12px}
.stack-12-start{display:grid;gap:12px;align-content:start}
.shots-eleves{display:grid;grid-template-columns:.9fr 1.1fr;gap:var(--s-5);align-items:start}
.actions{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:14px}

/* -------------------------------------------------------------------------
   9. CONTENEUR DE CAPTURE
   Tant que les captures n'existent pas, .shot-frame porte le ratio
   definitif, l'identifiant attendu et la legende definitive. A la
   substitution, le <div class="shot-frame"> devient un <img> : la legende
   et les regles ci-dessous ne changent pas.
   ------------------------------------------------------------------------- */
figure.shot{margin:0}
.shot-frame{border-radius:var(--r-md);display:flex;align-items:center;justify-content:center;
  background:repeating-linear-gradient(135deg,var(--shot-a),var(--shot-a) 10px,
                                       var(--shot-b) 10px,var(--shot-b) 20px);
  border:1px solid var(--border)}
.shot-frame.raised{box-shadow:var(--shadow-2)}
.shot-tag{font-size:13px;font-weight:600;color:var(--text-muted);background:var(--surface);
  padding:8px 13px;border-radius:var(--r-sm);border:1px solid var(--border);text-align:center}
.shot img{display:block;width:100%;height:auto;border-radius:var(--r-md);
  border:1px solid var(--border)}
.shot img.raised{box-shadow:var(--shadow-2)}
figcaption{font-size:14px;color:var(--text-faint);margin-top:12px;line-height:1.5}
.ratio-16-10{aspect-ratio:16/10}
.ratio-16-9{aspect-ratio:16/9}
.ratio-4-3{aspect-ratio:4/3}
.ratio-9-16{aspect-ratio:9/16}
.ratio-10-7{aspect-ratio:10/7}
.ratio-a4{aspect-ratio:1000/1400}
.shot-phone{max-width:220px}

/* -------------------------------------------------------------------------
   10. SCHEMA "COMMENT CA MARCHE"
   Vrai texte, couleurs prises aux variables de theme : lisible en clair
   comme en sombre. Sous 620px, le schema cede la place a la meme
   information en liste ordonnee.
   ------------------------------------------------------------------------- */
.schema{width:100%;height:auto;display:block;font-family:var(--font-text)}
.schema-liste{display:none;margin:0;padding-left:20px;color:var(--text-muted)}
.schema-liste li{margin-bottom:10px}
.schema-liste strong{color:var(--text);font-weight:600}

/* -------------------------------------------------------------------------
   11. BANDEAU DE CHIFFRES
   ------------------------------------------------------------------------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s-5)}
.stat{background:var(--surface-2);border-radius:18px;padding:26px}
.stat b{display:block;font-family:var(--font-display);font-size:36px;font-weight:600;
  color:var(--accent-text);letter-spacing:-.02em}
.stat span{font-size:15px;color:var(--text-muted)}

/* -------------------------------------------------------------------------
   12. BLOC SOMBRE
   ------------------------------------------------------------------------- */
.dark-block{background:var(--invert-bg);color:#fff;border-radius:var(--r-xl);padding:52px;
  display:grid;grid-template-columns:1fr 1fr;gap:var(--s-8)}
.dark-block h2{color:#fff;font-size:36px}
.dark-block p{color:var(--invert-muted)}
.dark-block .eyebrow{color:#c79cea}
.dark-block figcaption{color:var(--invert-muted)}
.dark-block .shot-frame{border-color:var(--invert-border)}
.dark-block .shot-tag{background:var(--invert-surface);color:var(--invert-muted);
  border-color:var(--invert-border)}
.dark-block .shot img{border-color:var(--invert-border)}
.mini{background:var(--invert-surface);border-radius:var(--r-md);padding:20px}
.mini strong{font-weight:600;color:#fff}
.mini p{font-size:15px;margin-top:6px}

/* -------------------------------------------------------------------------
   13. LISTES DE FONCTIONS
   ------------------------------------------------------------------------- */
.features{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-5)}
.features h3{font-size:19px;margin-bottom:10px}
.features ul{margin:0;padding-left:18px;color:var(--text-muted);font-size:16px}
.features li{margin-bottom:6px}
.liste{margin:0;padding-left:20px;color:var(--text-muted)}
.liste li{margin-bottom:8px}
.liste li:last-child{margin-bottom:0}

/* Domaines de la page Fonctionnalites */
.domaine{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-8);align-items:start}
.domaine-shots{display:grid;gap:var(--s-5)}

/* -------------------------------------------------------------------------
   14. FORMULAIRE
   ------------------------------------------------------------------------- */
.field{display:grid;gap:6px;margin-bottom:var(--s-4)}
.field label{font-size:14px;font-weight:600}
.field .hint{font-size:13px;color:var(--text-faint)}
.field input,.field select,.field textarea{font-family:var(--font-text);font-size:16px;
  color:var(--text);background:var(--surface);border:1px solid var(--border-strong);
  border-radius:var(--r-sm);padding:12px 14px;width:100%;
  transition:border-color .15s ease}
.field textarea{resize:vertical;min-height:96px;line-height:1.5}
.field input::placeholder,.field textarea::placeholder{color:var(--text-faint)}
.field input:hover,.field select:hover,.field textarea:hover{border-color:var(--accent-text)}
.field.error input,.field.error select,.field.error textarea{border-color:var(--danger);border-width:2px}
.field .err{font-size:14px;color:var(--danger);font-weight:600}
/* La case de consentement fait 24px : c'est la taille de cible minimale
   exigee par WCAG 2.2 (2.5.8). Son etiquette, cliquable, prolonge la cible
   sur toute la hauteur de la ligne. */
.field-check{grid-template-columns:auto 1fr;display:grid;gap:10px;align-items:start}
.field-check input{width:24px;height:24px;margin-top:1px;flex:none}
.field-check label{font-weight:400;font-size:15px;min-height:44px;display:flex;align-items:center}
.field-leurre{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
/* Le titre du formulaire garde son niveau (h2 sur la page Demander un acces,
   h3 dans la section de l'accueil) mais toujours la taille d'un titre 3. */
.form-acces h2,.form-acces h3{font-size:23px}
.form-note{font-size:14px;color:var(--text-faint)}
.alert{border-radius:var(--r-md);padding:16px 18px;font-size:16px;border:1px solid var(--border)}
.alert-ok{background:var(--accent-soft);color:var(--text);border-color:var(--border-strong)}
.alert-ko{background:var(--surface);color:var(--text);border-color:var(--danger)}
.alert strong{font-weight:600}
.form-submit{width:100%}

/* -------------------------------------------------------------------------
   15. PIED DE PAGE
   ------------------------------------------------------------------------- */
.site-footer{background:var(--surface-2);margin-top:var(--s-9)}
.site-footer .bar{display:flex;gap:var(--s-6);align-items:center;flex-wrap:wrap;
  padding-top:32px;padding-bottom:32px;font-size:15px;color:var(--text-muted)}
.site-footer .logo img{height:24px}
.site-footer a{color:var(--text-muted)}
.site-footer a:hover{color:var(--accent-text)}
.site-footer .mention{margin-left:auto;font-size:13px;color:var(--text-faint)}

/* -------------------------------------------------------------------------
   16. PAGES DE TEXTE (donnees et securite, conditions, confidentialite, 404)
   ------------------------------------------------------------------------- */
.page-head{padding-top:var(--s-8);padding-bottom:var(--s-2)}
.prose{max-width:70ch}
.prose h2{font-size:32px;margin-top:var(--s-8);margin-bottom:var(--s-3)}
.prose h2:first-of-type{margin-top:var(--s-6)}
.prose h3{margin-top:var(--s-6);margin-bottom:var(--s-2)}
.prose p{color:var(--text-muted);margin-bottom:var(--s-4)}
.prose ul{color:var(--text-muted);padding-left:20px;margin-bottom:var(--s-4)}
.prose li{margin-bottom:8px}
.page-404{padding-top:var(--s-10);padding-bottom:var(--s-10);text-align:center}
.page-404 .actions{justify-content:center}

/* -------------------------------------------------------------------------
   17. POINTS DE RUPTURE
   Conception d'abord mobile : l'ordre du DOM est l'ordre de lecture
   mobile, aucune reorganisation par order.
   ------------------------------------------------------------------------- */
@media (max-width:960px){
  .hero-grid,.dark-block,.two-col,.domaine{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr 1fr}
  .features{grid-template-columns:1fr 1fr}
  h1{font-size:40px}
  h2{font-size:32px}
  .dark-block h2{font-size:32px}
  .panel{padding:32px}
  .dark-block{padding:32px}
  .card-large{padding:32px}

  /* Menu mobile : la navigation se replie sous la barre. */
  .site-nav{display:none;position:absolute;left:0;right:0;top:100%;
    flex-direction:column;align-items:stretch;gap:0;margin-left:0;
    background:var(--bg);border-bottom:1px solid var(--border);
    box-shadow:var(--shadow-1);
    padding:var(--s-2) var(--s-6) var(--s-5)}
  .site-nav.is-open{display:flex}
  .site-nav a{font-size:17px;padding:12px 0}
  .site-nav a.btn{margin-top:var(--s-2);padding:15px 26px}
  .nav-toggle{display:block}
}

@media (max-width:620px){
  body{font-size:16px}
  .wrap{padding-left:var(--s-4);padding-right:var(--s-4)}

  /* La pastille bêta passe sous le logotype. L'ordre du DOM (logotype,
     bouton Menu, pastille) reste l'ordre de lecture : rien n'est deplace
     par `order`. */
  .site-header .bar{display:grid;grid-template-columns:1fr auto;
    align-items:center;gap:var(--s-3) var(--s-4)}
  .site-header .logo{grid-column:1;grid-row:1}
  .site-header .nav-toggle{grid-column:2;grid-row:1;margin-left:0}
  .site-header .badge{grid-column:1 / -1;grid-row:2;justify-self:start}

  .section{padding-top:40px}
  .section-sm{padding-top:40px}
  .stats,.features,.benefits,.shots-eleves{grid-template-columns:1fr}
  .card-large{grid-column:span 1}
  h1{font-size:34px}
  h2{font-size:32px}
  .panel{padding:24px}
  .dark-block{padding:24px}
  .card,.card-large{padding:24px}
  .btn{width:100%}
  .site-nav a.btn{width:100%}
  .shot-phone{max-width:100%}
  .site-footer .bar{flex-direction:column;align-items:flex-start;gap:var(--s-3)}
  .site-footer .mention{margin-left:0}
  .schema{display:none}
  .schema-liste{display:block}
  .prose h2{font-size:26px}
}

/* -------------------------------------------------------------------------
   18. UTILITAIRES D'ESPACEMENT
   Calques sur la reference visuelle. Places en dernier pour l'emporter sur
   les marges par defaut des composants (une <ul class="liste mb-20">, par
   exemple, doit bien garder ses 20px sous elle).
   ------------------------------------------------------------------------- */
.mb-6{margin-bottom:6px}
.mb-10{margin-bottom:10px}
.mb-12{margin-bottom:12px}
.mb-14{margin-bottom:14px}
.mb-16{margin-bottom:16px}
.mb-20{margin-bottom:20px}
.mb-22{margin-bottom:22px}
.mb-28{margin-bottom:28px}
.mb-30{margin-bottom:30px}
.mt-6{margin-top:6px}
.mt-10{margin-top:10px}
.mt-14{margin-top:14px}
.mt-20{margin-top:20px}