/* =====================================================================
   EASY SCHOOL — Connexion des applications dédiées (Professeur & Parent)
   Feuille autonome, préfixe .pl-  ·  pilotée par variables de thème.
   Chaque page définit : --pl-a --pl-a2 --pl-a-d --pl-gold --pl-overlay
   ===================================================================== */

.pl-app{
    --pl-a:#2f4bd6; --pl-a2:#5578ff; --pl-a-d:#141d52; --pl-gold:#f6b81f;
    --pl-overlay:linear-gradient(120deg,rgba(9,14,40,.93) 0%,rgba(17,30,86,.72) 46%,rgba(26,46,120,.48) 100%);
    --pl-panel:#f6f8fd;
    position:fixed; inset:0; overflow:hidden;
    display:grid; grid-template-columns:1.1fr .9fr;
    background:#0b1020;
    font-family:'Inter','Segoe UI',system-ui,sans-serif;
}

/* ============================ HÉRO / PHOTOS ============================ */
.pl-hero{position:relative; overflow:hidden; isolation:isolate; min-height:100vh}
.pl-slide{position:absolute; inset:0; background-size:cover; background-position:center;
    opacity:0; transition:opacity 1.7s ease; will-change:opacity,transform; z-index:0}
.pl-slide.on{opacity:1; animation:plKen 9s ease-out both}
@keyframes plKen{from{transform:scale(1.13)}to{transform:scale(1)}}
.pl-hero-ov{position:absolute; inset:0; z-index:1; background:var(--pl-overlay)}
/* voile de grain très léger + halo doré */
.pl-hero-ov::after{content:''; position:absolute; inset:0;
    background:radial-gradient(1100px 520px at 8% 112%, color-mix(in srgb,var(--pl-gold) 20%, transparent), transparent 60%)}
/* liseré drapeau du Mali en bas du héros */
.pl-flag{position:absolute; left:0; right:0; bottom:0; height:5px; z-index:3;
    background:linear-gradient(90deg,#0d8a3f 0 33.33%,#f6c517 33.33% 66.66%,#ce1126 66.66%)}

.pl-hero-inner{position:relative; z-index:2; height:100%; min-height:100vh;
    display:flex; flex-direction:column; justify-content:space-between;
    padding:clamp(2rem,4vw,4rem) clamp(2rem,4.4vw,4.6rem); color:#fff}

/* -- Lockup de marque -- */
.pl-brand{display:flex; align-items:center; gap:.85rem}
.pl-brand-logo{width:52px; height:52px; border-radius:15px; object-fit:contain; background:#fff;
    padding:6px; box-shadow:0 10px 30px -8px rgba(0,0,0,.5)}
.pl-brand-txt{line-height:1.05}
.pl-brand-name{font-family:'Plus Jakarta Sans',sans-serif; font-weight:800; font-size:1.18rem; letter-spacing:.02em}
.pl-brand-name b{color:var(--pl-gold)}
.pl-brand-sub{font-size:.72rem; font-weight:600; letter-spacing:.26em; text-transform:uppercase; opacity:.82; margin-top:2px}

/* -- Bloc central -- */
.pl-hero-mid{max-width:560px; margin:auto 0}
.pl-badge{display:inline-flex; align-items:center; gap:.5rem; font-size:.74rem; font-weight:700;
    letter-spacing:.14em; text-transform:uppercase; padding:.5rem .95rem; border-radius:999px;
    background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.26);
    -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px)}
.pl-badge i{color:var(--pl-gold)}
.pl-h1{font-family:'Plus Jakarta Sans',sans-serif; font-weight:800; line-height:1.06;
    font-size:clamp(2.1rem,3.9vw,3.5rem); margin:1.15rem 0 .5rem; text-shadow:0 6px 30px rgba(0,0,0,.35)}
.pl-h1 span{color:var(--pl-gold)}
.pl-lead{font-size:clamp(1rem,1.3vw,1.18rem); line-height:1.6; color:rgba(255,255,255,.9);
    max-width:34ch; text-shadow:0 2px 12px rgba(0,0,0,.35)}

/* -- Chips fonctionnalités -- */
.pl-feats{display:grid; grid-template-columns:1fr 1fr; gap:.7rem; margin-top:2rem; max-width:470px}
.pl-feat{display:flex; align-items:center; gap:.7rem; padding:.72rem .9rem; border-radius:14px;
    background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.16);
    -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); font-weight:600; font-size:.9rem}
.pl-feat i{display:grid; place-items:center; width:34px; height:34px; border-radius:10px; flex:0 0 auto;
    background:color-mix(in srgb,var(--pl-gold) 26%, transparent); color:var(--pl-gold); font-size:1.05rem}

/* -- Bas de héros -- */
.pl-hero-foot{display:flex; align-items:center; gap:1.4rem; margin-top:2.2rem; flex-wrap:wrap}
.pl-stat{line-height:1}
.pl-stat b{display:block; font-family:'Plus Jakarta Sans',sans-serif; font-size:1.5rem; font-weight:800}
.pl-stat span{font-size:.76rem; opacity:.8; letter-spacing:.04em}
.pl-stat-sep{width:1px; height:34px; background:rgba(255,255,255,.24)}

/* Montre / heure locale */
.pl-clock{position:absolute; top:clamp(1.4rem,2.6vw,2.2rem); right:clamp(1.4rem,2.6vw,2.2rem); z-index:4;
    text-align:right; color:#fff; text-shadow:0 2px 12px rgba(0,0,0,.4)}
.pl-clock .t{font-family:'Plus Jakarta Sans',sans-serif; font-weight:800; font-size:1.7rem;
    letter-spacing:.5px; font-variant-numeric:tabular-nums}
.pl-clock .t .s{font-size:.85rem; opacity:.75; vertical-align:super; margin-left:2px}
.pl-clock .d{font-size:.76rem; opacity:.85; text-transform:capitalize; margin-top:2px}

/* ============================ PANNEAU FORMULAIRE ============================ */
.pl-panel{position:relative; display:flex; align-items:center; justify-content:center;
    padding:clamp(1.5rem,3vw,3rem); background:var(--pl-panel); overflow-y:auto; min-height:100vh}
.pl-panel::before{content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
    background:
        radial-gradient(560px 380px at 112% -6%, color-mix(in srgb,var(--pl-a) 12%, transparent), transparent 60%),
        radial-gradient(520px 360px at -12% 108%, color-mix(in srgb,var(--pl-gold) 14%, transparent), transparent 60%)}
.pl-card{position:relative; z-index:1; width:100%; max-width:428px}

.pl-logo{display:flex; align-items:center; gap:.7rem; margin-bottom:2rem}
.pl-logo img{height:44px; width:auto}
.pl-logo .n{font-family:'Plus Jakarta Sans',sans-serif; font-weight:800; color:#1a2238; font-size:1.02rem; line-height:1}
.pl-logo .n small{display:block; font-weight:600; font-size:.68rem; letter-spacing:.2em; text-transform:uppercase;
    color:var(--pl-a); margin-top:3px}

.pl-eyebrow{display:inline-flex; align-items:center; gap:.45rem; font-size:.76rem; font-weight:700;
    letter-spacing:.06em; text-transform:uppercase; color:var(--pl-a);
    background:color-mix(in srgb,var(--pl-a) 12%, #fff); border:1px solid color-mix(in srgb,var(--pl-a) 22%, #fff);
    padding:.34rem .7rem; border-radius:999px}
.pl-title{font-family:'Plus Jakarta Sans',sans-serif; font-weight:800; color:#131a2e;
    font-size:1.72rem; margin:.9rem 0 .35rem; line-height:1.15}
.pl-subtitle{color:#6b7793; font-size:.96rem; margin:0 0 1.6rem}

/* Alertes flash */
.pl-alert{display:flex; align-items:flex-start; gap:.6rem; padding:.72rem .9rem; border-radius:12px;
    font-size:.88rem; margin-bottom:1rem; border:1px solid transparent}
.pl-alert i{font-size:1.05rem; margin-top:1px}
.pl-alert-danger{background:#fdecec; color:#a12027; border-color:#f6c9cc}
.pl-alert-success{background:#e8f7ee; color:#1a7a43; border-color:#bfe6cd}
.pl-alert-warning{background:#fff5e2; color:#946100; border-color:#ffe1a6}
.pl-alert-info,.pl-alert-primary{background:#eaf1ff; color:#1e478f; border-color:#c9dcff}

/* Champs */
.pl-field{position:relative; margin-bottom:1.05rem}
.pl-field>.ic{position:absolute; left:1rem; top:50%; transform:translateY(-50%);
    color:#9aa6bf; font-size:1.12rem; pointer-events:none; transition:color .2s}
.pl-field input{width:100%; height:54px; border-radius:14px; border:1.5px solid #e2e8f4;
    background:#fff; padding:0 3rem 0 2.9rem; font-size:.97rem; color:#1a2238; outline:none;
    transition:border-color .2s, box-shadow .2s}
.pl-field input::placeholder{color:#9aa6bf}
.pl-field input:focus{border-color:var(--pl-a);
    box-shadow:0 0 0 4px color-mix(in srgb,var(--pl-a) 16%, transparent)}
.pl-field input:focus+.ic,.pl-field:focus-within>.ic{color:var(--pl-a)}
.pl-eye{position:absolute; right:.55rem; top:50%; transform:translateY(-50%); border:0; background:transparent;
    color:#9aa6bf; width:38px; height:38px; border-radius:10px; cursor:pointer; font-size:1.1rem; transition:color .2s,background .2s}
.pl-eye:hover{color:var(--pl-a); background:color-mix(in srgb,var(--pl-a) 10%, transparent)}

/* Ligne options */
.pl-row{display:flex; align-items:center; justify-content:space-between; gap:1rem; margin:.2rem 0 1.4rem}
.pl-check{display:flex; align-items:center; gap:.5rem; font-size:.88rem; color:#4b5772; cursor:pointer; user-select:none}
.pl-check input{width:17px; height:17px; accent-color:var(--pl-a); cursor:pointer}
.pl-forgot{font-size:.88rem; font-weight:600; color:var(--pl-a)}
.pl-forgot:hover{text-decoration:underline}

/* Bouton principal */
.pl-submit{width:100%; height:54px; border:0; border-radius:14px; cursor:pointer;
    font-family:'Plus Jakarta Sans',sans-serif; font-weight:800; font-size:1.02rem; color:#fff;
    display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
    background:linear-gradient(120deg,var(--pl-a),var(--pl-a2));
    box-shadow:0 16px 34px -12px color-mix(in srgb,var(--pl-a) 70%, transparent);
    transition:transform .15s, box-shadow .2s, filter .2s}
.pl-submit:hover{transform:translateY(-2px); filter:brightness(1.05);
    box-shadow:0 22px 44px -12px color-mix(in srgb,var(--pl-a) 75%, transparent)}
.pl-submit:active{transform:translateY(0)}
.pl-submit i{transition:transform .2s}
.pl-submit:hover i{transform:translateX(4px)}

/* Séparateur + liens secondaires */
.pl-sep{display:flex; align-items:center; gap:.9rem; margin:1.5rem 0; color:#9aa6bf; font-size:.8rem}
.pl-sep::before,.pl-sep::after{content:''; flex:1; height:1px; background:#e4e9f3}
.pl-links{display:flex; flex-direction:column; gap:.55rem}
.pl-altlink{display:flex; align-items:center; gap:.7rem; padding:.7rem .9rem; border-radius:12px;
    border:1.5px solid #e6ebf5; background:#fff; color:#3b4763; font-weight:600; font-size:.9rem;
    transition:border-color .2s, background .2s, transform .12s}
.pl-altlink:hover{border-color:var(--pl-a); background:color-mix(in srgb,var(--pl-a) 6%, #fff); transform:translateY(-1px)}
.pl-altlink i{color:var(--pl-a); font-size:1.15rem}
.pl-altlink .chev{margin-left:auto; color:#b6c0d4}

.pl-foot{margin-top:1.7rem; text-align:center; color:#9aa6bf; font-size:.8rem}
.pl-foot a{color:var(--pl-a); font-weight:600}

/* ============================ RESPONSIVE ============================ */
@media (max-width:980px){
    .pl-app{position:relative; inset:auto; grid-template-columns:1fr; min-height:100vh; overflow:visible}
    .pl-hero, .pl-hero-inner{min-height:auto}
    .pl-hero{min-height:44vh}
    .pl-hero-inner{padding:1.6rem 1.5rem 2rem}
    .pl-hero-mid{margin:1.3rem 0}
    .pl-h1{font-size:clamp(1.7rem,7vw,2.4rem)}
    .pl-feats{display:none}
    .pl-hero-foot{margin-top:1.2rem}
    .pl-panel{min-height:auto; padding:2rem 1.3rem 2.6rem}
    .pl-clock{display:none}
}
@media (max-width:560px){
    .pl-hero{min-height:38vh}
    .pl-lead{display:none}
    .pl-brand-logo{width:44px;height:44px}
    .pl-title{font-size:1.5rem}
}
@media (min-width:981px) and (max-width:1180px){
    .pl-feats{grid-template-columns:1fr}
}

/* Confort de saisie : évite le zoom iOS */
@media (max-width:560px){ .pl-field input{font-size:16px} }