/* ==========================================================================
   LANDING PREMIUM - Direction Drapeau
   Couche de style de l'accueil + en-tete premium. Chargee APRES styles.css.
   Extraite de styles.css pour la maintenabilite (aucun changement de valeur).
   ========================================================================== */

/* ============================================================
   PREMIUM LANDING - Direction Drapeau (integration accueil)
   Bloc additif : surcharge les styles .home-* de la page d'accueil.
   ============================================================ */
:root{
  --font-display:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,ui-serif,serif;
  --gold-grad:linear-gradient(135deg,#ffdf74 0%,#f4c430 55%,#d9a521 100%);
  --gold-deep:#cf9c16;
  --hero-brand-grad:linear-gradient(135deg,#1e5ca8 0%,#123b7a 60%,#0d2c5c 100%);
}

/* apparition au scroll */
.js .reveal-up{opacity:0;transform:translateY(24px);
  transition:opacity .7s cubic-bezier(.2,.7,.25,1),transform .7s cubic-bezier(.2,.7,.25,1);}
.js .reveal-up.is-in{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){.js .reveal-up{opacity:1;transform:none;transition:none;}}

/* ---- HERO ---- */
.home-hero{position:relative;overflow:hidden;grid-template-columns:1.05fr .95fr;
  gap:clamp(24px,4vw,56px);align-items:center;background:var(--hero-brand-grad);
  border-radius:26px;padding:clamp(30px,4vw,60px);border-bottom:4px solid var(--primary-yellow);
  box-shadow:0 30px 64px rgba(6,20,48,.28);margin-bottom:0;}
.home-hero .hero-sun{position:absolute;top:-120px;right:-120px;width:460px;height:auto;opacity:.10;pointer-events:none;}
.home-hero-content{background:none;border:0;box-shadow:none;padding:0;position:relative;z-index:2;}
.home-hero .hero-eyebrow{color:var(--primary-yellow);letter-spacing:.22em;}
.home-hero-content h1{font-family:var(--font-display);font-weight:600;color:#fff;
  font-size:clamp(32px,5vw,58px);line-height:1.06;letter-spacing:-.012em;margin-bottom:18px;}
.home-hero-content .hero-lead{color:rgba(233,240,251,.92);font-size:clamp(16px,1.6vw,19px);max-width:44ch;}
.home-hero .hero-home-actions{margin-top:30px;}

.btn-gold{background:var(--gold-grad);color:#3a2a06;border:0;
  box-shadow:0 10px 26px rgba(244,196,48,.30),inset 0 1px 0 rgba(255,255,255,.4);}
.btn-gold:hover{transform:translateY(-2px);box-shadow:0 16px 34px rgba(244,196,48,.4);color:#3a2a06;}
.btn-hero-ghost{background:rgba(255,255,255,.06);color:#fff;border:1px solid rgba(255,255,255,.45);}
.btn-hero-ghost:hover{border-color:var(--primary-yellow);color:var(--primary-yellow);background:rgba(255,255,255,.08);}

.hero-social{display:flex;align-items:center;gap:12px;margin-top:28px;color:rgba(233,240,251,.9);font-size:13.5px;}
.hero-avatars{display:flex;}
.hero-avatars span{width:34px;height:34px;border-radius:50%;margin-left:-10px;border:2px solid #123b7a;
  display:grid;place-items:center;font-weight:700;font-size:13px;color:#fff;font-family:var(--font-display);}
.hero-avatars span:first-child{margin-left:0;background:linear-gradient(135deg,#3a72c0,#1e5ca8);}
.hero-avatars span:nth-child(2){background:linear-gradient(135deg,#f4c430,#d9a521);color:#3a2a06;}
.hero-avatars span:nth-child(3){background:linear-gradient(135deg,#e05561,#c82333);}
.hero-avatars span:last-child{background:rgba(255,255,255,.16);}
.hero-social b{color:#fff;}

.home-hero-media{min-height:0;position:relative;box-shadow:none;overflow:visible;border-radius:0;z-index:2;}
.hero-frame{position:relative;border-radius:22px;overflow:hidden;aspect-ratio:4/5;
  border:1px solid rgba(255,255,255,.25);
  box-shadow:0 30px 60px rgba(6,20,48,.45),inset 0 0 0 6px rgba(244,196,48,.18);}
.hero-frame img{width:100%;height:100%;object-fit:cover;object-position:center 18%;filter:saturate(1.03) contrast(1.02);}
.hero-frame::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(13,44,92,.04),rgba(13,44,92,.42) 100%);}
.hero-seal-badge{position:absolute;left:-16px;bottom:24px;display:flex;align-items:center;gap:12px;
  background:var(--surface-0);border-radius:16px;padding:11px 16px 11px 11px;box-shadow:0 18px 40px rgba(6,20,48,.3);z-index:3;}
.hero-seal-badge .hero-seal{width:40px;height:40px;}
.hero-seal-badge b{display:block;font-size:15px;color:var(--text-dark);font-weight:800;line-height:1.1;}
.hero-seal-badge .hsb-text > span{font-size:11.5px;color:var(--text-light);}

/* ---- STATS ---- */
.home-trust-strip{margin-top:22px;background:var(--surface-0);border:1px solid var(--border-color);border-radius:18px;
  box-shadow:0 12px 30px rgba(13,44,92,.06);display:grid;grid-template-columns:repeat(5,1fr);overflow:hidden;}
.home-trust-strip div{padding:26px 18px;border-left:1px solid var(--border-color);text-align:left;}
.home-trust-strip div:first-child{border-left:0;}
.home-trust-strip strong{font-size:clamp(26px,3.2vw,38px);font-weight:800;letter-spacing:-.02em;
  background:linear-gradient(135deg,#1e5ca8,#123b7a);-webkit-background-clip:text;background-clip:text;color:transparent;
  font-variant-numeric:tabular-nums;display:block;}
.home-trust-strip span{font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-light);
  font-weight:600;margin-top:8px;display:block;}

/* ---- SECTION TITLES ---- */
.home-section .section-title-wrap{text-align:center;}
.home-section .section-title-wrap .hero-eyebrow{color:var(--gold-deep);}
.home-section .section-title-wrap h2{font-family:var(--font-display);font-weight:600;color:var(--primary-blue);
  font-size:clamp(24px,3.2vw,38px);letter-spacing:-.01em;}

/* ---- FEATURE CARDS ---- */
.feature-card{position:relative;overflow:hidden;}
.feature-card .fc-ic{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;
  background:var(--surface-2);color:var(--primary-blue);margin-bottom:16px;}
.feature-card .fc-ic svg{width:26px;height:26px;}
.feature-card:nth-child(2) .fc-ic{background:rgba(244,196,48,.16);color:var(--gold-deep);}
.feature-card:nth-child(3) .fc-ic{background:rgba(200,35,51,.10);color:var(--primary-red);}
.feature-card h3{font-family:var(--font-display);font-weight:600;}
.feature-card::after{content:"";position:absolute;left:0;top:0;height:3px;width:100%;
  background:var(--gold-grad);transform:scaleX(0);transform-origin:left;transition:transform .35s ease;}
.feature-card:hover::after{transform:scaleX(1);}

/* ---- PROCESS ---- */
.process-card{position:relative;overflow:hidden;}
.process-card span{font-family:var(--font-display);color:var(--gold-deep);background:none !important;
  width:auto !important;height:auto !important;border-radius:0 !important;font-size:34px;font-weight:700;
  display:inline-block;box-shadow:none !important;line-height:1;}
.process-card h3{font-family:var(--font-display);font-weight:600;}
.process-card::after{content:"";position:absolute;left:0;top:0;height:3px;width:100%;
  background:var(--gold-grad);transform:scaleX(0);transform-origin:left;transition:transform .35s ease;}
.process-card:hover::after{transform:scaleX(1);}

/* ---- CTA BAND ---- */
.home-cta-band{position:relative;overflow:hidden;background:var(--hero-brand-grad);color:#fff;
  border-radius:26px;border-bottom:4px solid var(--primary-yellow);}
.home-cta-band .cta-sun{position:absolute;left:-120px;top:-120px;width:360px;opacity:.10;pointer-events:none;}
.home-cta-band h2{font-family:var(--font-display);font-weight:600;color:#fff;position:relative;}
.home-cta-band p{color:rgba(233,240,251,.9);position:relative;}
.home-cta-band .btn{position:relative;}

/* ---- hover cartes (dynamisme) ---- */
.feature-card,.process-card{transition:transform .28s cubic-bezier(.2,.7,.25,1),box-shadow .28s ease;}
.feature-card:hover,.process-card:hover{transform:translateY(-5px);box-shadow:0 22px 46px rgba(13,44,92,.13);}

/* ---- responsive ---- */
@media (max-width:860px){
  .home-hero{grid-template-columns:1fr;}
  .home-hero-media{max-width:420px;margin:6px auto 0;}
  .home-trust-strip{grid-template-columns:repeat(2,1fr);}
  .home-trust-strip div{border-top:1px solid var(--border-color);}
  .home-trust-strip div:nth-child(odd){border-left:0;}
  .home-trust-strip div:nth-child(1),.home-trust-strip div:nth-child(2){border-top:0;}
}
@media (max-width:520px){
  .home-trust-strip{grid-template-columns:1fr;}
  .home-trust-strip div{border-left:0;border-top:1px solid var(--border-color);}
  .home-trust-strip div:first-child{border-top:0;}
  .hero-seal-badge{left:10px;}
}

/* ---- fidelite concept : accent titre + soleil de section ---- */
.home-hero-content h1 .hero-accent{font-style:italic;
  background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;color:transparent;}
.home-section .section-title-wrap .sec-sun{display:block;width:54px;height:54px;
  margin:0 auto 6px;opacity:.5;}
.home-section .section-title-wrap .section-sub{margin:12px auto 0;max-width:52ch;
  color:var(--text-light);font-size:16px;line-height:1.6;}

/* ---- section enseignants verifies (concept) ---- */
.home-teachers .section-title-wrap h2 em{font-style:italic;color:var(--gold-deep);}
.home-teacher-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.tcard{position:relative;overflow:hidden;background:var(--surface-0);border:1px solid var(--border-color);
  border-radius:20px;padding:24px;
  box-shadow:0 1px 2px rgba(13,44,92,.05),0 12px 30px rgba(13,44,92,.06);
  transition:transform .28s cubic-bezier(.2,.7,.25,1),box-shadow .28s ease;}
.tcard:hover{transform:translateY(-5px);box-shadow:0 22px 46px rgba(13,44,92,.13);}
.tcard::after{content:"";position:absolute;left:0;top:0;height:3px;width:100%;
  background:var(--gold-grad);transform:scaleX(0);transform-origin:left;transition:transform .35s ease;}
.tcard:hover::after{transform:scaleX(1);}
.tcard-row{display:flex;align-items:center;gap:14px;}
.tcard-av{width:54px;height:54px;border-radius:15px;flex:none;display:grid;place-items:center;
  font-family:var(--font-display);font-weight:700;font-size:21px;color:#fff;background:var(--hero-brand-grad);}
.tcard-row h3{font-size:17px;font-weight:700;margin:0;color:var(--text-dark);font-family:var(--sans, inherit);}
.tcard-subj{color:var(--text-light);font-size:13.5px;margin:2px 0 0;}
.tcard-seal{position:absolute;top:20px;right:20px;width:26px;height:26px;}
.tag-pop{position:absolute;top:22px;right:56px;background:var(--primary-red);color:#fff;font-size:10.5px;
  font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:4px 9px;border-radius:999px;}
.tcard-meta{display:flex;align-items:center;gap:14px;margin-top:20px;padding-top:18px;
  border-top:1px solid var(--border-color);font-size:13.5px;color:var(--text-light);}
.tcard-rating{display:inline-flex;align-items:center;gap:5px;color:var(--text-dark);font-weight:700;
  font-variant-numeric:tabular-nums;}
.tcard-rating .tstar{width:15px;height:15px;color:var(--primary-yellow);flex:none;}
.tcard-price{margin-left:auto;color:var(--text-dark);font-weight:700;}
.tcard-price small{color:var(--faint,#8592a6);font-weight:500;}
.tcard .btn-block{margin-top:20px;}
.btn-block{width:100%;justify-content:center;}
.btn-blue-solid{background:var(--hero-brand-grad);color:#fff;border:0;
  box-shadow:0 8px 20px rgba(18,59,122,.22);}
.btn-blue-solid:hover{transform:translateY(-2px);color:#fff;}
.btn-outline-blue{background:transparent;color:var(--primary-blue);border:1px solid var(--border-color);}
.btn-outline-blue:hover{border-color:var(--primary-blue);background:var(--surface-1);}
@media (max-width:860px){
  .home-teacher-cards{grid-template-columns:1fr;max-width:420px;margin:0 auto;}
}

/* ---- hero pleine largeur : unifie l'en-tete et le heros (fin de l'effet carte flottante) ---- */
.home-hero-band{position:relative;overflow:hidden;background:var(--hero-brand-grad);
  border-bottom:4px solid var(--primary-yellow);}
.home-hero-band .hero-sun{position:absolute;top:-120px;right:-40px;width:460px;height:auto;
  opacity:.10;pointer-events:none;z-index:0;}
.home-hero{background:none;border:0;border-bottom:0;border-radius:0;box-shadow:none;margin:0 auto;
  max-width:1200px;padding:clamp(34px,4.5vw,72px) 24px;
  grid-template-columns:1.05fr .95fr;gap:clamp(24px,4vw,56px);align-items:center;}
.home-hero-content,.home-hero-media{position:relative;z-index:1;}
@media (min-width:769px){
  .home-hero-band{width:100vw;margin-left:calc(50% - 50vw);margin-top:-40px;}
}
@media (max-width:860px){
  .home-hero{grid-template-columns:1fr;}
  .home-hero-media{max-width:420px;margin:6px auto 0;}
}

/* ---- fidelite maquette : fleche bouton, titre plus grand, photo pleine hauteur ---- */
.btn-gold{display:inline-flex;align-items:center;justify-content:center;gap:10px;}
.btn-arrow{width:18px;height:18px;flex:none;}
.home-hero-content h1{font-size:clamp(36px,5.6vw,64px);}
.home-hero{align-items:stretch;}
.home-hero-content{display:flex;flex-direction:column;justify-content:center;}
.home-hero-media{align-self:stretch;display:flex;}
.home-hero-media .hero-frame{aspect-ratio:auto;height:100%;width:100%;min-height:460px;}
.home-hero-media .hero-frame img{height:100%;width:100%;object-fit:cover;object-position:center 15%;}
@media (max-width:860px){
  .home-hero-media .hero-frame{min-height:400px;}
}

/* ============================================================
   HERO plein ecran + EN-TETE premium (Direction Drapeau)
   ============================================================ */

/* ---- HERO : remplit le premier ecran ---- */
@media (min-width:769px){
  .home-hero{min-height:calc(100vh - 120px);max-width:1320px;
    grid-template-columns:1fr 1.05fr;gap:48px;}
  .home-hero-content h1{font-size:clamp(42px,5.2vw,72px);}
  .home-hero-content .hero-lead{font-size:19px;max-width:46ch;}
  .home-hero-media .hero-frame{min-height:520px;}
}

/* ---- EN-TETE premium ---- */
.header{background:linear-gradient(135deg,#0b2551 0%,#123b7a 55%,#1e5ca8 120%);
  box-shadow:0 14px 30px rgba(6,20,48,.34);}
.header h1{background:none;}
.brand-title{font-family:var(--font-display);font-weight:600;font-size:22px;letter-spacing:.005em;}
.brand-tagline{letter-spacing:.16em;opacity:.78;font-size:10.5px;}
.brand-logo{width:48px;height:48px;box-shadow:0 6px 16px rgba(1,24,76,.4);}

@media (min-width:769px){
  .header nav{border-top:1px solid rgba(255,255,255,.12);
    background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,0));}
  .header nav a{position:relative;text-transform:uppercase;letter-spacing:.13em;
    font-size:12px;font-weight:600;border-bottom:0;padding:15px 24px;opacity:.92;}
  .header nav a::after{content:"";position:absolute;left:24px;right:24px;bottom:9px;height:2px;
    background:var(--gold-grad);transform:scaleX(0);transform-origin:left;
    transition:transform .28s cubic-bezier(.2,.7,.25,1);border-radius:2px;}
  .header nav a:hover{background:rgba(255,255,255,.05);opacity:1;}
  .header nav a:hover::after{transform:scaleX(1);}
  #main-nav a.nav-active{background:rgba(255,255,255,.05);border-bottom-color:transparent;opacity:1;}
  #main-nav a.nav-active::after{transform:scaleX(1);}
}

/* ============================================================
   EN-TETE UNE SEULE LIGNE (inspiration Preply) - desktop
   Fond continu avec le heros, nav inline, actions a droite.
   ============================================================ */
@media (min-width:769px){
  .header{grid-template-columns:auto 1fr auto;grid-template-rows:auto;
    align-items:center;padding:0 10px;min-height:74px;
    box-shadow:none;border-bottom:1px solid rgba(255,255,255,.10);}
  .header h1{grid-column:1;grid-row:1;padding:10px 6px 10px 14px;}
  #main-nav{grid-column:2;grid-row:1;display:flex;align-items:center;justify-content:flex-start;
    gap:2px;padding:0 0 0 22px;border-top:0;background:none;}
  .header-user{grid-column:3;grid-row:1;padding:8px 12px;}
  .header nav a{padding:10px 16px;font-size:12px;letter-spacing:.12em;}
  .header nav a::after{left:16px;right:16px;bottom:6px;}
}

/* ---- Icones SVG (remplacement des emoji) ---- */
.notification-bell{display:inline-flex;align-items:center;justify-content:center;
  width:42px;height:42px;padding:0;border-radius:12px;position:relative;cursor:pointer;
  background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.28);color:#fff;
  transition:background .2s ease,border-color .2s ease;}
.notification-bell:hover{background:rgba(255,255,255,.16);border-color:var(--primary-yellow);}
.notification-bell .ic-bell{width:20px;height:20px;display:block;color:#fff;}
.notification-count{position:absolute;top:-5px;right:-5px;}
.mobile-nav-icon .ic-mnav{width:23px;height:23px;display:block;}
#back-to-top{display:inline-flex;align-items:center;justify-content:center;}
#back-to-top svg{width:20px;height:20px;display:block;}

/* ---- L'accueil remplit la largeur (fin des grandes marges vides) ---- */
@media (min-width:769px){
  body.has-hero-band main{max-width:1440px;}
  .home-hero{max-width:1440px;}
}
@media (min-width:1200px){
  body.has-hero-band main{max-width:1500px;}
  .home-hero{max-width:1500px;}
}

/* ---- Marque sans logo : wordmark TchadEdu ---- */
.brand-link{display:inline-flex;align-items:center;gap:0;text-decoration:none;}
.brand-wordmark{font-family:var(--font-display);font-weight:700;font-size:25px;
  letter-spacing:.005em;color:#fff;line-height:1;white-space:nowrap;}
.brand-wordmark .brand-wordmark-accent{color:var(--primary-yellow);}
@media (max-width:768px){
  .brand-wordmark{font-size:22px;}
}

/* ---- Header + heros : un seul bleu plat, sans couture (comme Preply) ---- */
.header{background:#123b7a;}
.home-hero-band{background:#123b7a;}
body.has-hero-band .header{border-bottom-color:transparent;box-shadow:none;}

/* ============================================================
   POLISH : stats, cartes roles, footer
   ============================================================ */

/* ---- Stats : 4 colonnes reparties, centrees, remplissent la largeur ----
   min-width gate : sans elle cette regle (placee apres les breakpoints
   mobiles ci-dessus dans la cascade) les ecrasait inconditionnellement,
   forcant 4 colonnes meme sur un ecran de telephone etroit et provoquant
   un debordement horizontal des chiffres/libelles. */
@media (min-width:861px){
  .home-trust-strip{grid-template-columns:repeat(4,1fr);}
}
.home-trust-strip div{text-align:center;}

/* ---- Cartes "Une plateforme pour chacun" : modernes (plus de lisere) ---- */
.feature-card{border-left:0;text-align:left;padding:30px 28px;border:1px solid var(--border-color);
  border-radius:16px;box-shadow:0 10px 30px rgba(13,44,92,.06);}
.feature-card h3{color:var(--text-dark);font-size:20px;margin-bottom:10px;}
.feature-card p{color:var(--text-light);font-size:15px;line-height:1.65;}

/* ---- Footer premium ---- */
.site-footer{background:#0f2e63;border-top:3px solid var(--primary-yellow);margin-top:56px;}
.site-footer-inner{max-width:1440px;}
.site-footer h4{font-family:var(--font-display);font-weight:600;font-size:16px;color:#fff;letter-spacing:.01em;}
.site-footer a{transition:color .18s ease;}
.site-footer a:hover{color:var(--primary-yellow);}
.footer-wordmark{font-family:var(--font-display);font-weight:700;font-size:24px;color:#fff;line-height:1;}
.footer-logo{margin:0 0 4px;}
.footer-logo-subtitle{letter-spacing:.14em;opacity:.75;}

/* ---- Stats : sans cadre ni traits (juste les chiffres, facon Preply) ---- */
.home-trust-strip{background:none;border:0;box-shadow:none;border-radius:0;margin-top:0;padding:20px 0 8px;}
.home-trust-strip div{border-left:0;border-top:0;padding:30px 18px;}
.home-trust-strip strong{font-size:clamp(30px,3.6vw,46px);}

/* ---- Cartes roles : bordure grise uniforme (annule le trait jaune/rouge a gauche) ---- */
.feature-card,
.feature-card:nth-child(2),
.feature-card:nth-child(3){border-color:var(--border-color);}

/* ===== Nav : hierarchie S'inscrire (bouton or) / Se connecter (lien) ===== */
#main-nav #nav-register-link{background:var(--gold-grad);color:#3a2a06 !important;border-radius:999px;
  padding:9px 18px !important;font-weight:800 !important;letter-spacing:.05em !important;
  box-shadow:0 6px 16px rgba(244,196,48,.26);transition:transform .18s ease,box-shadow .18s ease;}
#main-nav #nav-register-link::after{display:none !important;}
#main-nav #nav-register-link:hover{transform:translateY(-1px);box-shadow:0 10px 22px rgba(244,196,48,.36);
  background:var(--gold-grad);color:#3a2a06 !important;}

/* ===== Boutons or sur element <button> (Continuer, Creer mon compte...) ===== */
button.btn-gold{background:var(--gold-grad) !important;color:#3a2a06 !important;
  box-shadow:0 10px 26px rgba(244,196,48,.30),inset 0 1px 0 rgba(255,255,255,.4) !important;}
button.btn-gold:hover{color:#3a2a06 !important;transform:translateY(-2px);}