/* ==========================================================================
   MonEnseignant — SKETCH (maquette de validation)
   Autonome : aucun JS, aucune dépendance au site live. Design system Caplogy
   (navy/cyan) adouci vers un rendu institutionnel, tous publics.
   ========================================================================== */

:root {
  /* Navy */
  --navy-950:#0d1b3a; --navy-900:#13264f; --navy-800:#1b3670;
  --navy-700:#24448c; --navy-600:#2a58b0; --navy-500:#3164c8;
  /* Cyan */
  --cyan-700:#2b8797; --cyan-600:#3aa2b3; --cyan-500:#4ac1d4;
  --cyan-400:#5ad1e3; --cyan-300:#8ee6f3; --cyan-200:#bff0f7;
  /* Surfaces & encres */
  --cloud:#ffffff; --paper:#f4fbfd; --mist:#e6f6fa;
  --ink:#0b1428; --ink-soft:#41506b; --ink-mute:#6b7a95;
  --emerald:#10c98a; --amber:#ffb02e;
  /* Ombres */
  --shadow-card: 0 1px 2px rgb(11 20 40 / .05), 0 18px 40px -18px rgb(11 20 40 / .22);
  --shadow-card-hover: 0 1px 2px rgb(11 20 40 / .06), 0 26px 54px -18px rgb(74 193 212 / .4);
  --shadow-glow: 0 0 0 1px rgb(74 193 212 / .35), 0 18px 50px -18px rgb(74 193 212 / .45);
}

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  font-family:"Outfit",system-ui,sans-serif;
  color:var(--ink);
  background:var(--cloud);
  line-height:1.65;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4 { font-family:"Space Grotesk",system-ui,sans-serif; letter-spacing:-.02em; line-height:1.12; color:var(--navy-900); }
a { color:inherit; text-decoration:none; }
img { max-width:100%; display:block; }

.container { width:min(1180px, 92vw); margin-inline:auto; }
.section { padding:5.5rem 0; }
.section-cloud { background:var(--cloud); }
.section-light { background:var(--paper); }
.section-mist  { background:linear-gradient(180deg,#ffffff 0%, var(--mist) 100%); }
.section-navy  { background:var(--navy-900); color:#fff; }
.section-navy h1,.section-navy h2,.section-navy h3 { color:#fff; }

/* Eyebrow ------------------------------------------------------------------ */
.eyebrow {
  display:inline-flex; align-items:center; gap:.7rem;
  font-family:"Space Grotesk",sans-serif; font-size:.72rem; font-weight:600;
  text-transform:uppercase; letter-spacing:.24em; color:var(--cyan-700);
  margin-bottom:1rem;
}
.eyebrow::before {
  content:""; width:2rem; height:2px; border-radius:2px;
  background:linear-gradient(90deg,var(--cyan-500),var(--cyan-300));
  box-shadow:0 0 12px rgb(74 193 212 / .7);
  animation:eb 3.2s ease-in-out infinite;
}
.section-navy .eyebrow { color:var(--cyan-300); }
@keyframes eb { 0%,100%{width:2rem} 50%{width:2.9rem} }

/* Section header ----------------------------------------------------------- */
.section-header { max-width:720px; margin-bottom:3rem; }
.section-header.center { margin-inline:auto; text-align:center; }
.section-header h2 { font-size:clamp(1.9rem,3.6vw,2.9rem); margin-bottom:1rem; }
.section-header p { color:var(--ink-soft); font-size:1.08rem; }
.text-grad { background-image:linear-gradient(120deg,var(--navy-900),var(--cyan-600)); -webkit-background-clip:text; background-clip:text; color:transparent; }

/* Buttons ------------------------------------------------------------------ */
.btn {
  display:inline-flex; align-items:center; gap:.55rem;
  font-family:"Space Grotesk",sans-serif; font-weight:600; font-size:.98rem;
  padding:.9rem 1.6rem; border-radius:999px; cursor:pointer; border:1px solid transparent;
  transition:transform .25s ease, box-shadow .3s ease, background .25s ease;
}
.btn svg { width:18px; height:18px; }
.btn-primary { background:var(--navy-900); color:#fff; }
.btn-primary:hover { transform:translateY(-2px); box-shadow:0 16px 34px -14px rgb(19 38 79 / .6); }
.btn-cyan { background:var(--cyan-500); color:var(--navy-900); }
.btn-cyan:hover { transform:translateY(-2px); box-shadow:var(--shadow-glow); }
.btn-ghost { background:rgb(255 255 255 / .6); backdrop-filter:blur(8px); border-color:rgb(11 20 40 / .18); color:var(--navy-900); }
.btn-ghost:hover { border-color:var(--cyan-500); }
.section-navy .btn-ghost { background:rgb(255 255 255 / .08); border-color:rgb(255 255 255 / .28); color:#fff; }
.btn-lg { padding:1.05rem 2rem; font-size:1.05rem; }

/* Nav ---------------------------------------------------------------------- */
.nav {
  position:sticky; top:0; z-index:50;
  background:rgb(255 255 255 / .82); backdrop-filter:blur(16px);
  border-bottom:1px solid rgb(11 20 40 / .07);
}
.nav-inner { display:flex; align-items:center; justify-content:space-between; height:70px; }
.brand { display:flex; align-items:center; gap:.6rem; font-family:"Space Grotesk",sans-serif; font-weight:700; font-size:1.2rem; color:var(--navy-900); }
.brand .b-mon { color:var(--navy-900); }
.brand .b-ens { color:var(--cyan-600); }
.brand-mark { width:34px; height:34px; border-radius:10px; background:linear-gradient(135deg,var(--cyan-500),var(--navy-700)); display:grid; place-items:center; color:#fff; font-weight:700; }
.nav-links { display:flex; align-items:center; gap:1.6rem; }
.nav-links a { font-size:.95rem; color:var(--ink-soft); font-weight:500; position:relative; padding:.2rem 0; }
.nav-links a:hover { color:var(--navy-900); }
.nav-links a::after { content:""; position:absolute; left:0; bottom:-3px; height:2px; width:0; background:var(--cyan-500); transition:width .3s cubic-bezier(.16,1,.3,1); }
.nav-links a:hover::after { width:100%; }
.nav-cta { margin-left:.4rem; }
.nav-burger { display:none; }

/* Hero --------------------------------------------------------------------- */
.hero {
  background:linear-gradient(158deg,#ffffff 0%, var(--mist) 34%, var(--cyan-300) 88%, var(--cyan-400) 100%);
  padding:5.5rem 0 6rem;
}
.hero-inner { display:grid; grid-template-columns:1.15fr .85fr; gap:3.5rem; align-items:center; }
.hero h1 { font-size:clamp(2.3rem,5vw,3.6rem); margin-bottom:1.4rem; color:var(--navy-950); }
.hero p.lead { font-size:1.2rem; color:var(--navy-800); max-width:33ch; margin-bottom:2rem; }
.hero-targets { display:flex; flex-wrap:wrap; gap:.6rem; margin-bottom:2.2rem; }
.pill { font-family:"Space Mono",monospace; font-size:.74rem; text-transform:uppercase; letter-spacing:.08em; background:rgb(255 255 255 / .7); border:1px solid rgb(19 38 79 / .12); color:var(--navy-800); padding:.4rem .8rem; border-radius:999px; }
.hero-actions { display:flex; flex-wrap:wrap; gap:.9rem; }
/* Hero visual : carte "services" sobre, pas de dashboard tech */
.hero-card { background:rgb(255 255 255 / .72); backdrop-filter:blur(18px); border:1px solid rgb(255 255 255 / .8); border-radius:2rem; padding:1.8rem; box-shadow:var(--shadow-card); }
.hero-card h4 { font-size:.8rem; text-transform:uppercase; letter-spacing:.16em; color:var(--cyan-700); font-family:"Space Mono",monospace; margin-bottom:1.1rem; }
.hero-card ul { list-style:none; display:grid; gap:.9rem; }
.hero-card li { display:flex; gap:.8rem; align-items:flex-start; font-size:.98rem; color:var(--navy-800); }
.hero-card li .dot { flex:0 0 auto; width:26px; height:26px; border-radius:8px; background:var(--mist); color:var(--cyan-700); display:grid; place-items:center; font-size:.9rem; }

/* Services grid (bandeau) -------------------------------------------------- */
.svc-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1.4rem; }
.card {
  background:var(--cloud); border:1px solid rgb(11 20 40 / .07); border-radius:1.5rem;
  padding:1.8rem; box-shadow:var(--shadow-card); transition:transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.card:hover { transform:translateY(-5px); border-color:rgb(74 193 212 / .6); box-shadow:var(--shadow-card-hover); }
.card .ic { width:48px; height:48px; border-radius:14px; display:grid; place-items:center; font-size:1.5rem; background:linear-gradient(135deg,var(--mist),var(--cyan-200)); margin-bottom:1.1rem; }
.card h3 { font-size:1.18rem; margin-bottom:.5rem; }
.card p { color:var(--ink-soft); font-size:.96rem; }
.card .lnk { display:inline-flex; align-items:center; gap:.35rem; margin-top:1rem; font-family:"Space Grotesk",sans-serif; font-weight:600; font-size:.9rem; color:var(--cyan-700); }
.card .lnk:hover { gap:.6rem; }

/* Service feature (bloc alterné) ------------------------------------------- */
.feature { display:grid; grid-template-columns:1fr 1fr; gap:3.5rem; align-items:center; }
.feature.rev .feature-media { order:-1; }
.feature-media {
  border-radius:1.8rem; min-height:320px; box-shadow:var(--shadow-card);
  background:linear-gradient(150deg,var(--navy-800),var(--cyan-600)); position:relative; overflow:hidden;
  display:grid; place-items:center; color:#fff; text-align:center; padding:2rem;
}
.feature-media .badge { position:absolute; top:1.1rem; left:1.1rem; font-family:"Space Mono",monospace; font-size:.7rem; text-transform:uppercase; letter-spacing:.12em; background:rgb(255 255 255 / .16); padding:.35rem .7rem; border-radius:999px; }
.feature-media .big { font-family:"Space Grotesk",sans-serif; font-size:2.6rem; font-weight:700; }
.feature h2 { font-size:clamp(1.7rem,3.2vw,2.5rem); margin-bottom:1rem; }
.feature .flag { font-family:"Space Mono",monospace; font-size:.74rem; text-transform:uppercase; letter-spacing:.14em; color:var(--cyan-700); margin-bottom:.8rem; display:block; }
.feature p { color:var(--ink-soft); font-size:1.05rem; margin-bottom:1.3rem; }
.pillars { list-style:none; display:grid; gap:.9rem; margin-bottom:1.6rem; }
.pillars li { display:flex; gap:.8rem; align-items:flex-start; }
.pillars .chk { flex:0 0 auto; width:24px; height:24px; border-radius:7px; background:rgb(16 201 138 / .14); color:var(--emerald); display:grid; place-items:center; font-size:.85rem; font-weight:700; }
.pillars strong { color:var(--navy-900); }

/* Pourquoi (stats) --------------------------------------------------------- */
.why-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1.4rem; margin-top:2.5rem; }
.why-item { text-align:center; }
.why-item .num { font-family:"Space Grotesk",sans-serif; font-size:2.6rem; font-weight:700; color:#fff; }
.why-item .lbl { color:var(--cyan-200); font-size:.95rem; }

/* Contact ------------------------------------------------------------------ */
.contact-grid { display:grid; grid-template-columns:1fr .9fr; gap:2.5rem; align-items:start; }
.form { display:grid; gap:1rem; }
.field { display:grid; gap:.4rem; }
.field label { font-size:.85rem; font-weight:600; color:var(--navy-800); }
.field input, .field textarea {
  font-family:inherit; font-size:1rem; padding:.85rem 1rem; border-radius:.9rem;
  border:1px solid rgb(11 20 40 / .14); background:#fff; color:var(--ink); resize:vertical;
}
.field input:focus, .field textarea:focus { outline:none; border-color:var(--cyan-500); box-shadow:0 0 0 3px rgb(74 193 212 / .25); }
/* Carte interlocuteur (personal branding Samir) */
.person { background:var(--cloud); border:1px solid rgb(11 20 40 / .07); border-radius:1.5rem; padding:1.8rem; box-shadow:var(--shadow-card); }
.person-head { display:flex; align-items:center; gap:1rem; margin-bottom:1.1rem; }
.person-photo { width:72px; height:72px; border-radius:50%; object-fit:cover; background:linear-gradient(135deg,var(--cyan-400),var(--navy-700)); box-shadow:0 0 0 3px rgb(74 193 212 / .35); display:grid; place-items:center; color:#fff; font-family:"Space Grotesk",sans-serif; font-weight:700; font-size:1.4rem; }
.person-head h3 { font-size:1.2rem; margin-bottom:.15rem; }
.person-role { font-family:"Space Mono",monospace; font-size:.72rem; text-transform:uppercase; letter-spacing:.1em; color:var(--cyan-700); }
.person p { color:var(--ink-soft); font-size:.96rem; margin-bottom:1rem; }
.person .contact-line { display:flex; align-items:center; gap:.5rem; font-size:.93rem; color:var(--navy-800); margin-bottom:.5rem; }

/* Footer ------------------------------------------------------------------- */
.footer { background:var(--navy-950); color:#c7d3e8; padding:4rem 0 2rem; }
.footer-top { display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:2rem; margin-bottom:2.5rem; }
.footer .brand { color:#fff; margin-bottom:1rem; }
.footer .brand .b-ens { color:var(--cyan-400); }
.footer-blurb { font-size:.92rem; max-width:32ch; color:#9fb0cc; }
.footer h4 { color:#fff; font-size:.78rem; text-transform:uppercase; letter-spacing:.14em; margin-bottom:1rem; font-family:"Space Mono",monospace; }
.footer-col a { display:block; font-size:.93rem; color:#a9b7d2; padding:.28rem 0; }
.footer-col a:hover { color:var(--cyan-300); }
.footer-bottom { border-top:1px solid rgb(255 255 255 / .1); padding-top:1.5rem; display:flex; justify-content:space-between; flex-wrap:wrap; gap:1rem; font-size:.85rem; color:#8194b4; }
.footer-legal { display:flex; gap:1.2rem; }

/* Sketch banner (mention maquette) ---------------------------------------- */
.sketch-flag { background:var(--amber); color:var(--navy-950); text-align:center; font-family:"Space Mono",monospace; font-size:.75rem; letter-spacing:.08em; padding:.4rem; text-transform:uppercase; }

/* Responsive --------------------------------------------------------------- */
@media (max-width:960px) {
  .hero-inner, .feature, .feature.rev .feature-media, .contact-grid { grid-template-columns:1fr; }
  .feature.rev .feature-media { order:0; }
  .svc-grid, .why-grid { grid-template-columns:repeat(2,1fr); }
  .footer-top { grid-template-columns:1fr 1fr; }
  .nav-links { display:none; }
  .nav-burger { display:inline-grid; place-items:center; width:42px; height:42px; border-radius:12px; border:1px solid rgb(11 20 40 / .14); background:#fff; }
}
@media (max-width:560px) {
  .svc-grid, .why-grid, .footer-top { grid-template-columns:1fr; }
  .section { padding:3.5rem 0; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation:none !important; scroll-behavior:auto; }
}

/* Photos (repli sur dégradé si l'image manque) ----------------------------- */
.feature-media.photo { background-size:cover; background-position:center; }
.feature-media > * { position:relative; z-index:1; }
.feature-media.photo::before {
  content:""; position:absolute; inset:0; z-index:0;
  background:linear-gradient(160deg, rgb(19 38 79 / .58), rgb(43 135 151 / .42));
}

/* Galerie événements */
.gallery { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin-top:2rem; }
.shot {
  aspect-ratio:4/3; border-radius:1.2rem; position:relative; overflow:hidden;
  background:linear-gradient(150deg,var(--navy-800),var(--cyan-600)); background-size:cover; background-position:center;
  box-shadow:var(--shadow-card);
}
.shot span {
  position:absolute; bottom:.6rem; left:.6rem;
  font-family:"Space Mono",monospace; font-size:.66rem; text-transform:uppercase; letter-spacing:.1em;
  color:#fff; background:rgb(11 20 40 / .5); padding:.3rem .6rem; border-radius:999px;
}

/* Bloc coordonnées (contact, sans personal branding) */
.info-card { background:var(--cloud); border:1px solid rgb(11 20 40 / .07); border-radius:1.5rem; padding:1.8rem; box-shadow:var(--shadow-card); }
.info-card h3 { font-size:1.1rem; margin-bottom:.8rem; }
.info-card .contact-line { display:flex; align-items:center; gap:.5rem; font-size:.95rem; color:var(--navy-800); margin-bottom:.6rem; }
.info-card .lnk { display:inline-flex; align-items:center; gap:.35rem; margin-top:.6rem; font-family:"Space Grotesk",sans-serif; font-weight:600; font-size:.92rem; color:var(--cyan-700); }

/* À propos — portrait Samir */
.about-grid { display:grid; grid-template-columns:220px 1fr; gap:2.5rem; align-items:center; }
.portrait {
  width:220px; height:280px; border-radius:1.6rem; overflow:hidden;
  background:linear-gradient(135deg,var(--cyan-400),var(--navy-700)); background-size:cover; background-position:center top;
  box-shadow:var(--shadow-card); display:grid; place-items:center;
  color:#fff; font-family:"Space Grotesk",sans-serif; font-weight:700; font-size:3rem;
}
.about-grid .person-role { display:inline-block; margin:.3rem 0 1rem; }
.about-grid p { color:var(--ink-soft); font-size:1.05rem; margin-bottom:1rem; }

@media (max-width:960px) { .gallery { grid-template-columns:1fr 1fr; } .about-grid { grid-template-columns:1fr; justify-items:start; } }
@media (max-width:560px) { .gallery { grid-template-columns:1fr; } }

/* ==== Animations (progressive enhancement, coupées si reduced-motion) ===== */
@media (prefers-reduced-motion: no-preference) {
  .has-js .section-header,
  .has-js .card,
  .has-js .feature-copy,
  .has-js .feature-media,
  .has-js .lab-card,
  .has-js .lms-card,
  .has-js .shot,
  .has-js .why-item,
  .has-js .hero-card,
  .has-js .about-banner {
    opacity:0; transform:translateY(26px);
    transition:opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1);
  }
  .has-js .in { opacity:1 !important; transform:none !important; }
  .has-js .stagger > * { transition-delay:calc(var(--i,0) * .07s); }
}
.nav { transition:box-shadow .3s ease, background .3s ease; }
.nav.scrolled { box-shadow:0 10px 30px -20px rgb(11 20 40 / .5); background:rgb(255 255 255 / .92); }

/* Carte lab animée (virtualisation) */
.lab-card { background:#0b1428; border-radius:1.6rem; overflow:hidden; box-shadow:var(--shadow-card); border:1px solid rgb(74 193 212 / .2); }
.lab-top { display:flex; align-items:center; gap:.45rem; padding:.75rem 1rem; background:rgb(255 255 255 / .04); border-bottom:1px solid rgb(255 255 255 / .07); }
.lab-dot { width:11px; height:11px; border-radius:50%; }
.lab-title { margin-left:.5rem; font-family:"Space Mono",monospace; font-size:.7rem; color:#8ea3c8; letter-spacing:.03em; }
.lab-live { margin-left:auto; display:inline-flex; align-items:center; gap:.4rem; font-family:"Space Mono",monospace; font-size:.66rem; color:var(--cyan-300); text-transform:uppercase; letter-spacing:.08em; }
.pulse-dot { width:8px; height:8px; border-radius:50%; background:var(--emerald); box-shadow:0 0 0 0 rgb(16 201 138 / .6); animation:pulse 1.8s infinite; }
@keyframes pulse { 0%{box-shadow:0 0 0 0 rgb(16 201 138 / .55)} 70%{box-shadow:0 0 0 8px rgb(16 201 138 / 0)} 100%{box-shadow:0 0 0 0 rgb(16 201 138 / 0)} }
.term { font-family:"Space Mono",monospace; font-size:.8rem; line-height:1.75; padding:1.1rem 1.2rem; color:#cdd8ee; min-height:172px; }
.term .l { display:block; white-space:pre-wrap; }
.term .g { color:#10c98a; } .term .c { color:#5ad1e3; } .term .m { color:#8194b4; } .term .y { color:#ffb02e; }
.cursor { display:inline-block; width:8px; height:1.02em; background:var(--cyan-400); vertical-align:-2px; margin-left:1px; animation:blink 1s step-end infinite; }
@keyframes blink { 50%{opacity:0} }
.vm-tiles { display:grid; grid-template-columns:repeat(3,1fr); gap:.5rem; padding:0 1.2rem 1.2rem; }
.vm { border:1px solid rgb(255 255 255 / .08); border-radius:.7rem; padding:.55rem .4rem; text-align:center; font-family:"Space Mono",monospace; font-size:.6rem; color:#6b7a95; background:rgb(255 255 255 / .02); transition:all .45s cubic-bezier(.16,1,.3,1); }
.vm .ic { font-size:1.05rem; display:block; margin-bottom:.15rem; filter:grayscale(1) opacity(.5); transition:filter .45s; }
.vm.on { color:var(--cyan-300); border-color:rgb(74 193 212 / .55); background:rgb(74 193 212 / .06); box-shadow:0 0 0 1px rgb(74 193 212 / .3), 0 10px 22px -12px rgb(74 193 212 / .6); }
.vm.on .ic { filter:none; }

/* Carte LMS animée (e-learning) */
.lms-card { background:var(--cloud); border:1px solid rgb(11 20 40 / .08); border-radius:1.6rem; padding:1.6rem; box-shadow:var(--shadow-card); }
.lms-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:1.2rem; font-family:"Space Grotesk",sans-serif; font-weight:600; color:var(--navy-900); }
.lms-tag { font-family:"Space Mono",monospace; font-size:.64rem; text-transform:uppercase; letter-spacing:.1em; background:var(--mist); color:var(--cyan-700); padding:.3rem .6rem; border-radius:999px; }
.lms-row { display:flex; justify-content:space-between; font-size:.86rem; color:var(--ink-soft); margin-bottom:.35rem; }
.lms-pct { font-family:"Space Mono",monospace; color:var(--cyan-700); }
.bar { height:8px; border-radius:999px; background:var(--mist); overflow:hidden; margin-bottom:1.1rem; }
.bar i { display:block; height:100%; width:0; border-radius:999px; background:linear-gradient(90deg,var(--cyan-500),var(--navy-600)); transition:width 1.1s cubic-bezier(.16,1,.3,1); }
.in .bar i { width:var(--w); }

/* À propos — crédibilité + bannière conférence */
.creds { display:flex; flex-wrap:wrap; gap:.5rem; margin:.5rem 0 1.1rem; }
.cred { font-family:"Space Mono",monospace; font-size:.66rem; text-transform:uppercase; letter-spacing:.07em; background:var(--mist); color:var(--cyan-700); padding:.35rem .7rem; border-radius:999px; border:1px solid rgb(74 193 212 / .25); }
.about-banner { margin-top:2.5rem; border-radius:1.6rem; overflow:hidden; box-shadow:var(--shadow-card); position:relative; aspect-ratio:21/7; background-size:cover; background-position:center 30%; }
.about-banner::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgb(13 27 58 / .85), rgb(13 27 58 / .1)); }
.about-banner .cap { position:absolute; z-index:1; left:1.6rem; bottom:1.3rem; color:#fff; max-width:60%; }
.about-banner .cap .flag { color:var(--cyan-300); }
.about-banner .cap h3 { color:#fff; font-size:1.3rem; }
@media (max-width:640px){ .about-banner{ aspect-ratio:3/2 } .about-banner .cap{ max-width:90% } }