/* pro-base.css — Espace Éducateurs */
/* Thème : ardoise scolaire, craie, vert tableau */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --green: #2E7D32;
  --green-light: #4CAF50;
  --green-dim: rgba(46,125,50,0.15);
  --green-glow: rgba(46,125,50,0.08);
  --chalk: #F5F5F0;
  --chalk-dim: rgba(245,245,240,0.65);
  --chalk-faint: rgba(245,245,240,0.25);
  --slate: #1A2332;
  --slate2: #222E3E;
  --card: rgba(255,255,255,0.05);
  --card-hover: rgba(255,255,255,0.09);
  --border: rgba(46,125,50,0.2);
  --border-hover: rgba(76,175,80,0.45);
  --radius: 18px;
  --radius-lg: 24px;
  --shadow: 0 4px 20px rgba(0,0,0,0.3);
  --shadow-hover: 0 10px 40px rgba(0,0,0,0.4);
}

html { scroll-behavior: smooth; }

body {
  font-family: 'Lora', serif;
  background: var(--slate);
  background-image:
    radial-gradient(ellipse at 10% 5%, rgba(46,125,50,.08) 0%, transparent 45%),
    radial-gradient(ellipse at 90% 95%, rgba(46,125,50,.05) 0%, transparent 50%);
  color: var(--chalk);
  min-height: 100vh;
}

/* ── NAV ── */
.p-nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(26,35,50,.95); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  padding: .9rem 1.5rem;
  display: flex; align-items: center; gap: .7rem; flex-wrap: wrap;
}
.p-nav-home { text-decoration:none; color:var(--green-light); font-family:'Nunito',sans-serif; font-weight:800; font-size:.85rem; transition:opacity .2s; }
.p-nav-home:hover { opacity:.75; }
.p-nav-sep { color:var(--chalk-faint); font-size:.75rem; }
.p-nav-pro { text-decoration:none; color:var(--chalk-dim); font-family:'Nunito',sans-serif; font-size:.8rem; font-weight:600; transition:color .2s; }
.p-nav-pro:hover { color:var(--chalk); }
.p-nav-current { color:var(--chalk); font-family:'Nunito',sans-serif; font-size:.8rem; font-weight:700; }

/* ── HERO ── */
.p-hero {
  padding: 4rem 1.5rem 3rem;
  max-width: 800px; margin: 0 auto;
  text-align: center; position: relative;
}
.p-hero::after {
  content:''; position:absolute; bottom:0; left:50%; transform:translateX(-50%);
  width:80px; height:1px;
  background:linear-gradient(90deg,transparent,var(--green-light),transparent);
}
.p-hero-eyebrow {
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:'Nunito',sans-serif; font-size:.68rem; font-weight:700;
  text-transform:uppercase; letter-spacing:3px;
  color:var(--green-light);
  border:1px solid var(--border);
  padding:.3rem .9rem; border-radius:20px;
  margin-bottom:1.3rem; background:var(--green-glow);
}
.p-hero-title {
  font-size:clamp(1.8rem,5vw,3rem);
  font-weight:700; line-height:1.15;
  color:var(--chalk); margin-bottom:1rem;
}
.p-hero-title em { font-style:italic; color:var(--green-light); }
.p-hero-sub {
  font-size:.98rem; color:var(--chalk-dim);
  line-height:1.8; max-width:580px;
  margin:0 auto; font-family:'Nunito',sans-serif;
}

/* ── MAIN ── */
.p-main { max-width:940px; margin:0 auto; padding:3rem 1.5rem 6rem; }

/* ── SECTIONS ── */
.p-section { margin-bottom:3.5rem; }
.p-section-title {
  font-size:1.2rem; font-weight:700; color:var(--chalk);
  margin-bottom:1.3rem; padding-bottom:.75rem;
  border-bottom:1px solid var(--border);
  display:flex; align-items:center; gap:.6rem;
}

/* ── CARTES ── */
.p-cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:1rem; }

.p-card {
  background:var(--card); border:1px solid var(--border);
  border-radius:var(--radius); padding:1.5rem 1.3rem;
  transition:background .22s,border-color .22s,transform .22s,box-shadow .22s;
  position:relative; overflow:hidden;
}
.p-card::before {
  content:''; position:absolute; top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--green-light),transparent);
  opacity:0; transition:opacity .3s;
}
.p-card:hover { background:var(--card-hover); border-color:var(--border-hover); transform:translateY(-3px); box-shadow:var(--shadow-hover); }
.p-card:hover::before { opacity:1; }

.p-card-emoji { font-size:1.9rem; display:block; margin-bottom:.75rem; }
.p-card-title { font-size:1rem; font-weight:600; color:var(--chalk); margin-bottom:.45rem; line-height:1.3; }
.p-card-desc { font-family:'Nunito',sans-serif; font-size:.82rem; color:var(--chalk-dim); line-height:1.65; }

/* ── CARTES LIEN ── */
.p-card-link { text-decoration:none; display:block; }

/* ── CARTES FICHE ── */
.fiche-card {
  background:var(--card); border:1px solid var(--border);
  border-radius:var(--radius); padding:1.4rem;
  text-decoration:none; display:block;
  transition:background .2s,border-color .2s,transform .2s;
  position:relative; overflow:hidden;
}
.fiche-card::before {
  content:''; position:absolute; top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,var(--green),var(--green-light));
  opacity:0; transition:opacity .3s;
}
.fiche-card:hover { background:var(--card-hover); border-color:var(--border-hover); transform:translateY(-3px); }
.fiche-card:hover::before { opacity:1; }
.fiche-card-top { display:flex; align-items:flex-start; gap:.8rem; margin-bottom:.6rem; }
.fiche-emoji { font-size:1.7rem; width:44px; height:44px; background:var(--green-glow); border-radius:12px; display:flex;align-items:center;justify-content:center;flex-shrink:0; }
.fiche-meta-top { flex:1; }
.fiche-badge { font-size:.62rem;font-weight:800;text-transform:uppercase;letter-spacing:1.5px;color:var(--green-light);margin-bottom:.2rem;display:block; }
.fiche-titre { font-family:'Nunito',sans-serif;font-size:.95rem;font-weight:700;color:var(--chalk);line-height:1.2; }
.fiche-desc { font-family:'Nunito',sans-serif;font-size:.8rem;color:var(--chalk-dim);line-height:1.6;margin-bottom:.7rem; }
.fiche-footer { display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.4rem; }
.fiche-tags { display:flex;gap:.35rem;flex-wrap:wrap; }
.fiche-tag { font-size:.62rem;font-weight:700;padding:.15rem .5rem;border-radius:6px;background:var(--green-glow);color:var(--green-light); }
.fiche-info { font-size:.7rem;font-weight:700;color:var(--chalk-faint); }

/* ── LISTE ── */
.p-list { list-style:none;display:flex;flex-direction:column;gap:.75rem;background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:1.5rem 1.5rem 1.5rem 1.8rem; }
.p-list li { font-family:'Nunito',sans-serif;font-size:.9rem;color:var(--chalk-dim);line-height:1.6;padding-left:1.3rem;position:relative; }
.p-list li::before { content:'✦';position:absolute;left:0;color:var(--green-light);font-size:.6rem;top:.38rem; }

/* ── INFO BOX ── */
.p-info-box { background:var(--green-glow);border:1px solid var(--border);border-left:3px solid var(--green-light);border-radius:var(--radius);padding:1.3rem 1.6rem;margin-bottom:1.5rem; }
.p-info-box-title { font-size:.88rem;font-weight:700;color:var(--green-light);margin-bottom:.5rem; }
.p-info-box p { font-family:'Nunito',sans-serif;font-size:.84rem;color:var(--chalk-dim);line-height:1.7; }

/* ── CTA ── */
.cta-green {
  display:inline-flex;align-items:center;gap:.5rem;
  background:linear-gradient(135deg,var(--green),var(--green-light));
  color:white; font-family:'Nunito',sans-serif;
  font-weight:800; font-size:.9rem;
  padding:.75rem 1.6rem; border-radius:50px;
  text-decoration:none; border:none; cursor:pointer;
  transition:transform .2s,opacity .2s;
  box-shadow:0 4px 20px rgba(46,125,50,.35);
}
.cta-green:hover { transform:translateY(-2px); opacity:.9; }

.cta-outline {
  display:inline-flex;align-items:center;gap:.5rem;
  background:transparent; color:var(--green-light);
  font-family:'Nunito',sans-serif; font-weight:700; font-size:.88rem;
  padding:.7rem 1.4rem; border-radius:50px;
  text-decoration:none; border:1px solid var(--border-hover);
  transition:background .2s,color .2s;
}
.cta-outline:hover { background:var(--green-glow); color:var(--chalk); }

/* ── GRILLE FICHES ── */
.fiches-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(270px,1fr)); gap:1rem; }

/* ── SÉQUENCE ── */
.seq-card {
  background:var(--card); border:1px solid var(--border);
  border-radius:var(--radius-lg); overflow:hidden;
  transition:transform .2s,box-shadow .2s;
}
.seq-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-hover); }
.seq-header { background:linear-gradient(135deg,var(--green),#1B5E20); padding:1.5rem; }
.seq-emoji { font-size:2.2rem; margin-bottom:.5rem; display:block; }
.seq-titre { font-family:'Nunito',sans-serif; font-size:1.1rem; font-weight:800; color:white; margin-bottom:.3rem; }
.seq-durée { font-size:.75rem; font-weight:700; color:rgba(255,255,255,.7); }
.seq-body { padding:1.3rem; }
.seq-steps { list-style:none; display:flex; flex-direction:column; gap:.6rem; }
.seq-step { font-family:'Nunito',sans-serif; font-size:.83rem; color:var(--chalk-dim); line-height:1.5; display:flex; align-items:flex-start; gap:.6rem; }
.seq-step-num { background:var(--green-glow); color:var(--green-light); font-size:.72rem; font-weight:800; width:20px; height:20px; border-radius:50%; display:flex;align-items:center;justify-content:center; flex-shrink:0; margin-top:.1rem; }
.seq-cta { display:flex; gap:.6rem; padding:0 1.3rem 1.3rem; flex-wrap:wrap; }

/* ── FORMULAIRE ── */
.p-form-wrap { background:var(--green-glow);border:1px solid var(--border);border-radius:var(--radius-lg);padding:2rem; max-width:540px; }
.p-form-row { display:flex;gap:.8rem;flex-wrap:wrap;margin-top:1rem; }
.p-form-input { flex:1;min-width:180px;padding:.75rem 1rem;border-radius:12px;border:1px solid var(--border);background:rgba(255,255,255,.05);color:var(--chalk);font-family:'Nunito',sans-serif;font-size:.9rem;transition:border-color .2s; }
.p-form-input:focus { outline:none;border-color:var(--green-light); }
.p-form-input::placeholder { color:var(--chalk-faint); }
.p-form-submit { background:var(--green);color:white;font-family:'Nunito',sans-serif;font-weight:800;font-size:.88rem;padding:.75rem 1.5rem;border-radius:12px;border:none;cursor:pointer;transition:background .2s; }
.p-form-submit:hover { background:var(--green-light); }

/* ── PUB ── */
.pub-slot { background:var(--card);border:1px solid var(--border);border-radius:14px;padding:1rem;text-align:center;margin:2rem 0;color:var(--chalk-faint);font-family:'Nunito',sans-serif;font-size:.72rem; }

/* ── FOOTER ── */
.p-footer { border-top:1px solid var(--border);padding:1.5rem;text-align:center;color:var(--chalk-faint);font-family:'Nunito',sans-serif;font-size:.72rem;line-height:1.8; }

/* ── RESPONSIVE ── */
@media (max-width:600px) {
  .p-cards { grid-template-columns:1fr; }
  .fiches-grid { grid-template-columns:1fr; }
}