/* ============================================================
   MIEUX APPRENDRE — Page d'accueil (refonte maquette v1)
   Bleu marine profond + jaune or, hero photo, cartes services
   ============================================================ */
:root{
  --home-navy:#0a2350; --home-navy2:#123a7d; --home-gold:#ffc000; --home-gold2:#f5b301;
  --home-blue:#0b5ed7; --ink:#12233f; --muted:#5b6b85; --line:#e2e9f4;
}
html{scroll-behavior:smooth}
.homepage{margin:0;background:#f5f8fd;color:var(--ink);font-family:'Segoe UI',system-ui,Roboto,Arial,sans-serif;-webkit-font-smoothing:antialiased}
.homepage img{max-width:100%;display:block}
.homepage a{text-decoration:none}

/* ============ HEADER ============ */
.home-header{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:22px;
  padding:10px 3.2%;background:#ffffff;box-shadow:0 2px 14px rgba(10,35,80,.08)}
.home-brand{display:flex;align-items:center;gap:10px;flex-shrink:0}
.home-brand img{width:64px;height:52px;object-fit:contain}
.home-brand b{display:block;font-size:19px;font-weight:900;color:#0a2350;letter-spacing:.3px;line-height:1.05}
.home-brand small{display:block;font-size:8.6px;font-weight:800;letter-spacing:1.8px;color:#b78920;margin-top:3px}
.home-nav{display:flex;align-items:center;gap:22px;flex:1;justify-content:center;white-space:nowrap}
.home-nav a{position:relative;color:#1b3353;font-weight:700;font-size:12.5px;padding:8px 0}
.home-nav a:hover{color:var(--home-blue)}
.home-nav a.active::after,.home-nav a:hover::after{content:'';position:absolute;left:0;right:0;bottom:0;height:2.5px;border-radius:2px;background:var(--home-gold)}
.header-actions{display:flex;align-items:center;gap:10px;flex-shrink:0}
.menu-button{display:none;border:0;background:none;font-size:20px;color:var(--home-navy);cursor:pointer}

/* ============ BOUTONS ============ */
.home-button{display:inline-flex;align-items:center;justify-content:center;gap:9px;border-radius:40px;
  font-size:11.5px;font-weight:800;padding:11px 22px;border:1.5px solid transparent;color:#0a2350;cursor:pointer;
  transition:transform .15s ease,box-shadow .15s ease,filter .15s ease;white-space:nowrap}
.home-button:hover{transform:translateY(-1px);filter:brightness(1.05);box-shadow:0 8px 20px rgba(10,35,80,.18)}
.home-button.yellow{background:linear-gradient(100deg,#ffc60b,#ffb400);box-shadow:0 4px 12px rgba(255,180,0,.35);color:#0a2350}
.home-button.blue{background:linear-gradient(100deg,#0a5cc4,#0b6ee0);color:#fff}
.home-button.outline{border-color:#173d62;background:#fff;color:#0a2350}
.home-button.ghost{border-color:rgba(255,255,255,.85);color:#fff;background:rgba(255,255,255,.08)}
.home-button.big{font-size:13px;padding:14px 26px}
.header-actions .home-button{font-size:10.5px;padding:9px 18px}

/* ============ HERO ============ */
.home-hero{position:relative;overflow:hidden;color:#fff;
  background:
   radial-gradient(60% 90% at 78% 20%,rgba(255,255,255,.22),rgba(255,255,255,0) 60%),
   linear-gradient(100deg,#061a45 0%,#0a2a78 34%,rgba(18,75,180,.78) 62%,rgba(48,128,222,.45) 100%),
   url('../assets/hero-bg.jpg') right center/cover no-repeat,#0a2350;
  min-height:460px;display:flex;align-items:stretch;box-shadow:inset 0 -60px 80px -60px rgba(6,26,69,.55)}
.hero-photo{}
.hero-copy h1{font-size:clamp(2rem,4vw,3.3rem)}
.hero-rule{width:96px}
.home-hero .home-button.ghost{background:rgba(255,255,255,.12);backdrop-filter:blur(6px);border:1.5px solid rgba(255,255,255,.75);color:#fff}
.hero-inner{width:100%;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);align-items:center;padding:44px 4%}
.hero-copy h1{margin:0;font-size:clamp(1.9rem,3.6vw,3rem);font-weight:900;line-height:1.14;color:#fff;text-shadow:0 2px 14px rgba(0,0,0,.35)}
.hero-copy h1 em{font-style:normal;color:var(--home-gold)}
.hero-rule{display:block;width:74px;height:4px;border-radius:3px;background:var(--home-gold);margin:20px 0 14px}
.hero-tag{margin:0 0 26px;font-size:clamp(1rem,1.6vw,1.3rem);font-weight:800;letter-spacing:.5px;color:#fff}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap}
.hero-photo{display:block;align-self:end;justify-self:end;width:100%;max-width:440px;background:url('../assets/hero-equipe.jpg') center center/cover no-repeat;border-radius:18px;box-shadow:0 18px 40px rgba(10,35,80,.25);aspect-ratio:853/1280}

/* ============ SECTION TITRES ============ */
.home-spaces,.home-about,.home-contact{padding:44px 3.4%}
.home-spaces{text-align:center;background:#fff}
.home-spaces h2,.home-contact h2{display:flex;align-items:center;justify-content:center;gap:16px;
  margin:0 0 6px;font-size:clamp(1.35rem,2.6vw,1.9rem);font-weight:900;color:#0a2350}
.home-spaces h2 span,.home-contact h2 span{width:46px;height:3.5px;border-radius:2px;background:var(--home-gold);flex:0 0 auto}
.section-subtitle{margin:0 0 30px;color:var(--muted);font-size:.95rem;text-align:center}

/* ============ CARTES SERVICES ============ */
.spaces-row{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:18px;max-width:1240px;margin:0 auto;text-align:left}
.home-space{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:16px;
  overflow:hidden;box-shadow:0 10px 26px rgba(10,35,80,.08);transition:transform .18s ease,box-shadow .18s ease}
.home-space:hover{transform:translateY(-4px);box-shadow:0 16px 34px rgba(10,35,80,.14)}
.home-space .space-photo{height:120px;width:100%;object-fit:cover}
.space-icon{align-self:center;margin-top:-26px;width:52px;height:52px;border-radius:50%;flex:0 0 auto;
  display:grid;place-items:center;background:var(--home-navy);color:#fff;font-size:20px;
  border:3.5px solid #fff;box-shadow:0 6px 14px rgba(10,35,80,.3)}
.home-space.gold .space-icon,.space-icon.gold{background:var(--home-gold);color:#0a2350}
.home-space h3{margin:12px 16px 4px;font-size:1.02rem;font-weight:900;color:#0a2350;text-align:center}
.home-space p{margin:0 16px 16px;font-size:.8rem;line-height:1.55;color:var(--muted);text-align:center;flex:1}
.home-space .home-button{margin:0 16px 18px;font-size:11px;padding:10px 14px}
.home-space.gold{border-color:#ffe08a}

/* ============ SECTION SUIVI / AVENIR ============ */
.home-about{display:grid;grid-template-columns:minmax(300px,.9fr) minmax(0,1.35fr);gap:34px;align-items:start;
  background:linear-gradient(180deg,#f5f8fd 0%,#eef3fb 100%)}
.about-kicker{display:flex;align-items:center;gap:10px;font-size:11px;font-weight:800;letter-spacing:2px;color:#33486b;margin-bottom:14px}
.about-kicker i{width:26px;height:2px;background:#9db2cf}
.about-copy h2{margin:0 0 16px;font-size:clamp(1.6rem,3vw,2.3rem);font-weight:900;color:#0a2350;line-height:1.15}
.about-copy h2 em{font-style:normal;color:var(--home-gold2)}
.about-copy>p{color:#33415c;font-size:.95rem;line-height:1.7;margin:0 0 18px}
.about-quote{font-style:italic;color:#43536e;font-size:.92rem;border-left:3.5px solid var(--home-gold);padding-left:14px;margin:0 0 22px}
.about-panels{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.feature-panel{border-radius:16px;padding:18px 16px 16px;background:#fff;box-shadow:0 10px 26px rgba(10,35,80,.1);border-top:5px solid}
.feature-panel h3{margin:0 0 4px;font-size:.86rem;font-weight:900;letter-spacing:.4px;display:flex;align-items:center;gap:8px}
.feature-panel>p{margin:0 0 14px;font-size:.74rem;color:var(--muted);line-height:1.5}
.p-orange{border-top-color:#f59e0b}.p-orange h3{color:#b45309}
.p-green{border-top-color:#10b981}.p-green h3{color:#047857}
.p-purple{border-top-color:#8b5cf6}.p-purple h3{color:#6d28d9}
.feat-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.feat-grid>div{display:flex;flex-direction:column;align-items:center;gap:7px;text-align:center;
  background:#f8fafd;border:1px solid #e7edf6;border-radius:11px;padding:11px 6px}
.feat-grid span{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;font-size:15px}
.p-orange .feat-grid span{background:#fef3e2;color:#d97706}
.p-green .feat-grid span{background:#e3f8ef;color:#059669}
.p-purple .feat-grid span{background:#f1ebfe;color:#7c3aed}
.feat-grid b{font-size:.68rem;font-weight:800;color:#1b3353;line-height:1.25;text-transform:uppercase;letter-spacing:.3px}

/* ============ CONTACT ============ */
.home-contact{background:#fff;text-align:center;padding-top:38px}
.contact-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;max-width:980px;margin:24px auto 0}
.contact-card{background:#f6faff;border:1px solid #e3edf9;border-radius:14px;padding:22px 12px;display:flex;flex-direction:column;align-items:center;gap:7px;color:#102745;transition:transform .18s ease,box-shadow .18s ease}
.contact-card:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(6,42,94,.11)}
.contact-card i{font-size:24px;color:#0a56a0;margin-bottom:4px}
.contact-card b{font-size:13.5px}
.contact-card span{font-size:11.5px;color:#4a5b72;line-height:1.5;word-break:break-all}
.contact-cta{margin-top:28px}
.contact-cta .home-button{font-size:12.5px;padding:13px 30px}

/* ============ PIED DE PAGE ============ */
.home-footer{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
  background:linear-gradient(120deg,#081d42,#0a2350);color:#cdd9ee;padding:28px 4%}
.home-footer .home-brand img{width:58px;height:46px}
.home-footer .home-brand b{color:#fff}
.home-footer .home-brand small{color:var(--home-gold)}
.footer-center nav{display:flex;gap:18px;flex-wrap:wrap;justify-content:center;margin-bottom:8px}
.footer-center nav a{color:#cdd9ee;font-size:12px;font-weight:700}
.footer-center nav a:hover{color:var(--home-gold)}
.footer-center p{margin:0;font-size:11px;color:#8ea3c4;text-align:center}
.footer-social{display:flex;gap:10px}
.footer-social a{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.1);color:#fff;font-size:14px;transition:background .15s}
.footer-social a:hover{background:var(--home-gold);color:#0a2350}
.footer-motto{margin:0;font-size:12px;font-style:italic;color:var(--home-gold);text-align:right;line-height:1.5}

/* ============ BOÎTES DE DIALOGUE ============ */
.homepage dialog{border:0;border-radius:18px;padding:26px 26px 22px;max-width:min(520px,92vw);box-shadow:0 26px 70px rgba(6,32,74,.35)}
.homepage dialog::backdrop{background:rgba(6,25,58,.55);backdrop-filter:blur(3px)}
.homepage dialog h2{margin:0 0 6px;color:#0a2350;font-size:1.25rem}
.close-dialog{position:absolute;top:12px;right:14px;border:0;background:#f1f5fb;border-radius:50%;width:32px;height:32px;font-size:18px;cursor:pointer;color:#33486b}
.rdv-note{font-size:12.5px;color:#536074;margin:0 0 12px;line-height:1.6}
.rdv-form{display:grid;gap:12px;text-align:left}
.rdv-form label{display:grid;gap:5px;font-size:12.5px;font-weight:700;color:#164e7b}
.rdv-form input,.rdv-form textarea{border:1px solid #cdddf0;border-radius:9px;padding:10px 12px;font:inherit;font-weight:400;color:#102745;background:#fbfdff;width:100%;box-sizing:border-box}
.rdv-form input:focus,.rdv-form textarea:focus{outline:2px solid rgba(255,195,12,.35);border-color:#0a56a0}
.rdv-form .home-button{border:0;justify-self:start;font-size:12px;padding:11px 24px}

/* ============ RESPONSIVE ============ */
@media(max-width:1199px){
  .spaces-row{grid-template-columns:repeat(3,minmax(0,1fr))}
  .home-about{grid-template-columns:1fr}
}
@media(max-width:980px){
  .home-nav{position:absolute;top:100%;left:0;right:0;display:none;flex-direction:column;align-items:flex-start;
    background:#fff;padding:12px 4% 18px;box-shadow:0 14px 28px rgba(10,35,80,.14);gap:6px}
  .home-nav.open{display:flex}
  .menu-button{display:block;margin-left:auto}
  .header-actions{margin-left:0}
  .hero-inner{grid-template-columns:1fr;padding:36px 5%}
  .home-hero{min-height:0}
  .about-panels{grid-template-columns:1fr}
  .contact-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .home-footer{flex-direction:column;text-align:center}
  .footer-motto{text-align:center}
}
@media(max-width:640px){
  .spaces-row{grid-template-columns:1fr}
  .header-actions .home-button{padding:8px 12px;font-size:9.5px}
  .hero-actions .home-button{width:100%}
  .contact-grid{grid-template-columns:1fr 1fr;gap:10px}
  .home-spaces h2,.home-contact h2{font-size:1.25rem}
}
@media(prefers-reduced-motion:reduce){.home-button,.home-space,.contact-card{transition:none}}

/* ===== Habillage « maquette » : services, suivi/avenir (le bloc Contact est conservé tel quel) ===== */
.home-spaces{background:linear-gradient(180deg,#fff 0%,#f3f7fe 100%)}
.home-space{border:0;border-radius:18px;box-shadow:0 10px 28px rgba(10,35,80,.12);overflow:hidden}
.home-space .space-photo{height:132px}
.space-icon{box-shadow:0 6px 16px rgba(10,35,80,.28);border:3px solid #fff}
.home-space .home-button.blue{background:linear-gradient(135deg,#0b4fc4,#1d6fe6);border-color:transparent;box-shadow:0 6px 14px rgba(13,82,200,.3)}
.home-space.gold{box-shadow:0 10px 28px rgba(245,170,20,.25)}

.home-about{position:relative;overflow:hidden;align-items:center;padding:56px 3.4% 64px;
  background:
   linear-gradient(180deg,rgba(255,255,255,.96) 0%,rgba(255,255,255,.82) 45%,rgba(226,238,255,.9) 100%),
   url('../assets/hero-bg.jpg') center/cover no-repeat,#eef4ff}
.about-kicker{display:inline-flex;background:#e6eefb;border-radius:99px;padding:8px 18px;margin-bottom:18px}
.about-copy h2{font-size:clamp(2rem,3.6vw,2.9rem);line-height:1.1;margin-bottom:18px}
.about-copy h2 em{display:block;color:#e0a010}
.about-quote{font-family:'Segoe Script','Brush Script MT','Lucida Handwriting','Comic Sans MS',cursive;font-style:normal;
  color:#0a2a78;font-size:1.05rem;line-height:1.7;border:0;padding:0 0 18px;margin:26px 0 0;position:relative}
.about-quote::after{content:'';position:absolute;left:0;bottom:0;width:190px;height:6px;border-radius:50%;
  background:linear-gradient(90deg,#f5b400,rgba(245,180,0,.2));transform:rotate(-2deg)}

.feature-panel{--pc:#f97316;--pc2:#fbab3c;padding:0;overflow:hidden;border:2.5px solid var(--pc);border-radius:18px;
  background:rgba(255,255,255,.93);box-shadow:0 14px 30px rgba(10,35,80,.14)}
.p-green{--pc:#16a34a;--pc2:#34d27b}.p-purple{--pc:#7c3aed;--pc2:#b06af5}
.feature-panel h3,.p-orange h3,.p-green h3,.p-purple h3{margin:0;padding:12px 12px;justify-content:center;text-align:center;
  color:#fff;background:linear-gradient(135deg,var(--pc),var(--pc2));font-size:.9rem;letter-spacing:.6px;text-transform:uppercase}
.feature-panel h3 i{font-size:1.15rem}
.feature-panel>p{padding:10px 14px 0;text-align:center;margin-bottom:12px}
.feat-grid{padding:0 12px 14px}
.feat-grid>div{background:rgba(255,255,255,.9);border:1px solid #e3eaf6;border-radius:12px}
.p-orange .feat-grid span,.p-green .feat-grid span,.p-purple .feat-grid span{background:transparent;width:38px;height:34px;font-size:23px}
.p-orange .feat-grid span{color:var(--pc)}.p-green .feat-grid span{color:var(--pc)}.p-purple .feat-grid span{color:var(--pc)}
.feat-grid b{font-size:.62rem;letter-spacing:.1px;overflow-wrap:anywhere;hyphens:auto;max-width:100%}
.feat-grid>div{padding:10px 4px;min-width:0}
@media(max-width:640px){.home-header{flex-wrap:wrap;gap:8px}.header-actions{order:3;width:100%;display:flex;gap:8px}.header-actions .home-button{flex:1;justify-content:center;white-space:nowrap}}
.feat-grid b{overflow-wrap:break-word;word-break:normal;hyphens:manual;font-size:.64rem}
@media(min-width:981px){.home-about{grid-template-columns:minmax(260px,.72fr) minmax(0,1.65fr)}}
.feat-grid b{font-size:.56rem;letter-spacing:0}
.feat-grid>div{padding:10px 2px}
@media(min-width:981px){.about-copy h2{font-size:clamp(1.7rem,2.6vw,2.4rem)}}