/* Page d’accueil : repris de la page d’accueil du Manuel interactif */
  *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
  .x {
    --hec:#185FA5; --geo:#1D6B7A; --hqc:#2E6B3E; --h20:#7A3B10; --gcult:#6B4A8A; --mc:#8A4A2E; --ef:#2E6B5A;
    --noir:#000; --blanc:#fff; --gris-clair:#F5F5F5;
  }
  html { scroll-behavior: smooth; }
  body { font-family:'Inter',sans-serif; background:var(--blanc); color:var(--noir); overflow-x:hidden; }
  a { color: inherit; }

  /* ══ HEADER ══ */
  .accueil-hero { min-height:100vh; display:flex; flex-direction:column; justify-content:flex-end; padding:0 5rem 7rem; position:relative; border-bottom:3px solid var(--noir); overflow:hidden; }
  .accueil-hero .barre-top { position:absolute; top:0; left:0; right:0; height:6px;
    background:linear-gradient(90deg,var(--hec) 0%,var(--hec) 14.28%,var(--geo) 14.28%,var(--geo) 28.57%,var(--accent) 28.57%,var(--accent) 42.85%,var(--h20) 42.85%,var(--h20) 57.14%,var(--gcult) 57.14%,var(--gcult) 71.42%,var(--mc) 71.42%,var(--mc) 85.71%,var(--ef) 85.71%,var(--ef) 100%); }
  .retour { position:absolute; top:28px; left:5rem; font-size:12px; font-weight:800; letter-spacing:.18em; text-transform:uppercase; text-decoration:none; border:2px solid var(--noir); padding:8px 14px; background:#fff; transition:.2s; z-index:2; }
  .retour:hover { background:var(--noir); color:#fff; }
  .bg-letters { position:absolute; font-family:'Playfair Display',serif; font-size:30vw; font-weight:900; color:transparent; -webkit-text-stroke:1px rgba(0,0,0,.04); top:50%; right:-4vw; transform:translateY(-50%); line-height:.9; pointer-events:none; user-select:none; letter-spacing:-.05em; }
  .accueil-hero .hero-tag { display:inline-flex; align-items:center; gap:10px; background:var(--noir); padding:12px 24px; font-size:13px; font-weight:800; color:#fff; letter-spacing:.25em; text-transform:uppercase; margin-bottom:3rem; width:fit-content; opacity:0; transform:translateY(20px); transition:opacity .8s ease, transform .8s ease; }
  .accueil-hero .hero-tag.visible { opacity:1; transform:translateY(0); }
  .accueil-hero .hero-tag .dot { width:6px; height:6px; background:var(--accent); border-radius:50%; animation:pulse 2s infinite; }
  @keyframes pulse { 0%,100%{transform:scale(1);opacity:1} 50%{transform:scale(1.5);opacity:.6} }
  .titre-hero { font-family:'Playfair Display',serif; font-size:clamp(3.2rem,7.4vw,7.6rem); font-weight:900; line-height:1.05; letter-spacing:-.03em; margin-bottom:3.5rem; }
  .titre-ligne { display:block; padding-bottom:.15em; }
  .titre-mot { display:inline-block; transform:translateY(110%); opacity:0; transition:transform .9s cubic-bezier(.16,1,.3,1), opacity .6s ease; }
  .titre-mot.visible { transform:translateY(0); opacity:1; }
  .titre-accent { font-style:italic; color:var(--accent); }
  .hero-desc { font-size:17px; color:#444; line-height:1.85; max-width:700px; opacity:0; transform:translateY(20px); transition:opacity .9s ease .6s, transform .9s ease .6s; }
  .hero-desc.visible { opacity:1; transform:translateY(0); }
  .scroll-hint { position:absolute; bottom:3rem; right:5rem; display:flex; flex-direction:column; align-items:center; gap:8px; opacity:0; animation:fadeInHint 1s ease 1.5s forwards; }
  @keyframes fadeInHint { to { opacity:.4; } }
  .scroll-hint span { font-size:10px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; writing-mode:vertical-rl; }
  .scroll-line { width:1px; height:60px; background:var(--noir); animation:scrollAnim 2s ease-in-out 2s infinite; }
  @keyframes scrollAnim { 0%{transform:scaleY(0);transform-origin:top} 50%{transform:scaleY(1);transform-origin:top} 51%{transform:scaleY(1);transform-origin:bottom} 100%{transform:scaleY(0);transform-origin:bottom} }

  /* ══ SECTIONS ══ */
  .section-chapitres, .section-ressources, .section-navigation, .section-encouragement { padding:7rem 5rem; }
  .section-titre { display:flex; align-items:baseline; gap:2rem; margin-bottom:1.5rem; flex-wrap:wrap; }
  .section-titre h2 { font-family:'Playfair Display',serif; font-size:3.5rem; font-weight:900; letter-spacing:-.03em; line-height:1; }
  .section-num { font-size:12px; font-weight:800; letter-spacing:.2em; color:#aaa; text-transform:uppercase; }
  .section-desc { font-size:17px; color:#555; line-height:1.85; max-width:700px; margin-bottom:5rem; }
  .grille { display:grid; grid-template-columns:repeat(2,1fr); border:3px solid var(--noir); }

  /* ══ CARTES CHAPITRES ══ */
  .carte { --c:var(--accent); --p:#EAF5EE; padding:4rem 3.5rem; position:relative; overflow:hidden; text-decoration:none; color:inherit; display:block; background:#fff; border:1.5px solid var(--noir); }
  .carte::before { content:''; position:absolute; inset:0; transform:translateY(100%); transition:transform .6s cubic-bezier(.16,1,.3,1); z-index:0; opacity:.06; background:var(--c); }
  .carte:hover::before { transform:translateY(0); }
  .carte::after { content:''; position:absolute; top:0; left:0; right:0; height:5px; transform:scaleX(0); transform-origin:left; transition:transform .5s cubic-bezier(.16,1,.3,1); z-index:2; background:var(--c); }
  .carte:hover::after { transform:scaleX(1); }
  .carte-inner { position:relative; z-index:1; }
  .carte-niveau { font-size:9px; font-weight:800; text-transform:uppercase; letter-spacing:.3em; margin-bottom:1.5rem; display:block; transition:letter-spacing .4s ease; color:var(--c); }
  .carte:hover .carte-niveau { letter-spacing:.4em; }
  .carte-titre { font-family:'Playfair Display',serif; font-size:2rem; font-weight:900; margin-bottom:2rem; line-height:1.1; letter-spacing:-.02em; transition:transform .4s ease; }
  .carte:hover .carte-titre { transform:translateX(4px); }
  .carte-desc { font-size:15px; color:#555; line-height:1.8; margin-bottom:2rem; }
  .carte-cta { display:flex; align-items:center; gap:12px; margin-top:3rem; font-size:11px; font-weight:800; letter-spacing:.2em; text-transform:uppercase; overflow:hidden; }
  .cta-texte { transform:translateX(-120%); transition:transform .55s cubic-bezier(.16,1,.3,1); white-space:nowrap; }
  .cta-ligne { flex:1; height:1px; background:var(--noir); transform-origin:left; transform:scaleX(.1); transition:transform .55s cubic-bezier(.16,1,.3,1); }
  .cta-arrow { font-size:20px; font-weight:900; transition:transform .5s cubic-bezier(.68,-.55,.27,1.55); }
  .carte:hover .cta-texte { transform:translateX(0); }
  .carte:hover .cta-ligne { transform:scaleX(1); }
  .carte:hover .cta-arrow { transform:translateX(8px); }
  .carte-corner { position:absolute; width:20px; height:20px; opacity:0; transition:opacity .3s ease, transform .4s cubic-bezier(.16,1,.3,1); z-index:2; }
  .carte-corner path { stroke:var(--c); }
  .carte-corner--tl { top:16px; left:16px; transform:translate(-6px,-6px); }
  .carte-corner--br { bottom:16px; right:16px; transform:translate(6px,6px); rotate:180deg; }
  .carte:hover .carte-corner { opacity:1; transform:translate(0,0); }
  .carte-dates { font-family:'Playfair Display',serif; font-style:italic; font-weight:700; font-size:1.1rem; color:var(--c); margin-bottom:.6rem; display:block; }

  /* ══ RESSOURCES ══ */
  .section-ressources { background:var(--gris-clair); border-top:3px solid var(--noir); }
  .ressources-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:24px; }
  .ressource-card { background:#fff; border:2px solid var(--noir); padding:2.5rem 2rem; transition:transform .3s ease, box-shadow .3s ease; text-decoration:none; color:inherit; display:block; }
  .ressource-card:hover { transform:translateY(-4px); box-shadow:8px 8px 0 var(--noir); }
  .ressource-card:hover .ressource-badge { transform:translateX(4px); }
  .ressource-titre { font-family:'Playfair Display',serif; font-size:1.5rem; font-weight:900; margin-bottom:1rem; }
  .ressource-desc { font-size:15px; color:#555; line-height:1.8; }
  .ressource-badge { display:inline-block; font-size:11px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; padding:6px 14px; background:var(--noir); color:#fff; margin-top:1.5rem; transition:transform .3s ease; }

  /* ══ NAVIGATION ══ */
  .section-navigation { background:var(--noir); color:#fff; }
  .section-navigation .section-num { color:#999; }
  .section-navigation .section-desc { color:rgba(255,255,255,.7); }
  .nav-steps { display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:24px; }
  .nav-step { background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.15); padding:2.5rem 2rem; text-align:center; transition:background .3s ease; }
  .nav-step:hover { background:rgba(255,255,255,.1); }
  .nav-step-num { width:50px; height:50px; border-radius:50%; background:var(--accent); color:#fff; display:flex; align-items:center; justify-content:center; font-size:22px; font-weight:900; margin:0 auto 1.5rem; font-family:'Playfair Display',serif; }
  .nav-step-titre { font-size:1.2rem; font-weight:700; margin-bottom:.8rem; }
  .nav-step-desc { font-size:15px; color:rgba(255,255,255,.65); line-height:1.7; }

  /* ══ ENCOURAGEMENT ══ */
  .section-encouragement { border-top:3px solid var(--noir); text-align:center; }
  .encour-titre { font-family:'Playfair Display',serif; font-size:2.5rem; font-weight:900; margin-bottom:1.5rem; }
  .encour-desc { font-size:17px; color:#555; line-height:1.85; max-width:900px; margin:0 auto 2.5rem; }
  .encour-pills { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; max-width:1000px; margin:0 auto; }
  .epill { background:var(--gris-clair); border:2px solid var(--noir); padding:10px 20px; font-size:14px; font-weight:600; transition:transform .2s ease, background .2s ease; }
  .epill:hover { transform:translateY(-2px); background:var(--noir); color:#fff; }


  .reveal { opacity:0; transform:translateY(40px); transition:opacity .9s ease, transform .9s cubic-bezier(.16,1,.3,1); }
  .reveal.visible { opacity:1; transform:translateY(0); }

  @media (prefers-reduced-motion:reduce){ *{animation:none!important; transition:none!important} .reveal,.titre-mot,.hero-tag,.hero-desc{opacity:1!important; transform:none!important} }
  @media (max-width:1024px) {
    .accueil-hero { padding:0 3rem 6rem; } .retour { left:3rem; }
    .section-chapitres, .section-ressources, .section-navigation, .section-encouragement { padding:6rem 3rem; }
    .grille { grid-template-columns:1fr; }
  }
  @media (max-width:768px) {
    .accueil-hero { padding:0 16px 5rem; min-height:86vh; } .retour { left:16px; top:20px; }
    .section-chapitres, .section-ressources, .section-navigation, .section-encouragement { padding:4rem 16px; }
    .carte { padding:3rem 1.5rem; } .section-titre h2 { font-size:2.4rem; }
    .scroll-hint { display:none; } .ressources-grid { grid-template-columns:1fr; } .nav-steps { grid-template-columns:1fr; }
  }