@font-face{font-family:"Barlow";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/barlow-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Barlow";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/barlow-latin-500-normal.woff2") format("woff2")}
@font-face{font-family:"Barlow";font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/barlow-latin-600-normal.woff2") format("woff2")}
@font-face{font-family:"Outfit";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/outfit-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Outfit";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/outfit-latin-500-normal.woff2") format("woff2")}
@font-face{font-family:"Outfit";font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/outfit-latin-600-normal.woff2") format("woff2")}

  :root{
    --nuit:#133A65;
    --nuit-fonce:#0A2A4F;
    --nuit-clair:#42618A;
    --cuivre:#EAA159;
    --texte:#1B2433;
    --gris:#5A6577;
    --pierre:#E4E7EC;
    --fond:#F6F7F9;
    --blanc:#FFFFFF;
    --mesure:68ch;
  }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  @media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}
  body{margin:0;font-family:"Barlow",system-ui,sans-serif;font-size:1.0625rem;line-height:1.6;color:var(--texte);background:var(--blanc)}
  a{color:var(--nuit)}
  a:focus-visible,button:focus-visible{outline:3px solid var(--cuivre);outline-offset:3px}
  .wrap{max-width:1120px;margin:0 auto;padding:0 24px}
  h1,h2,h3{font-family:"Outfit","Barlow",sans-serif;font-weight:600;color:var(--nuit);line-height:1.1;margin:0}
  h2{font-size:clamp(1.9rem,3.6vw,2.6rem);margin-bottom:.6em}
  h3{font-size:1.45rem;margin-bottom:.35em}
  p{margin:0 0 1em;max-width:var(--mesure)}

  /* En-tête */
  header{border-bottom:1px solid var(--pierre);background:var(--blanc);position:sticky;top:0;z-index:10}
  .barre{display:flex;align-items:center;justify-content:space-between;gap:24px;height:72px}
  .logo{display:flex;align-items:center;text-decoration:none}
  .logo-bloc{display:flex;align-items:center;gap:10px}
  .logo-arbre{width:34px;height:37px;color:var(--cuivre);flex:none}
  .logo-nom{font-family:"Outfit",sans-serif;font-weight:500;font-size:1.45rem;color:var(--nuit);letter-spacing:.01em;white-space:nowrap}
  nav ul{list-style:none;display:flex;gap:28px;margin:0;padding:0}
  nav a{text-decoration:none;font-weight:500;color:var(--texte)}
  nav a:hover{color:var(--nuit);text-decoration:underline;text-decoration-color:var(--cuivre);text-decoration-thickness:3px;text-underline-offset:6px}
  .btn{display:inline-block;background:var(--cuivre);color:var(--nuit);font-weight:600;text-decoration:none;padding:12px 22px;border-radius:4px}
  .btn:hover{background:#F2B677}
  .btn-sec{background:transparent;color:var(--blanc);border:2px solid var(--blanc)}
  .btn-sec:hover{background:var(--blanc);color:var(--nuit)}

  /* Hero : l’arbre */
  .hero{background:linear-gradient(120deg,var(--nuit-fonce) 0%,var(--nuit) 45%,var(--nuit-clair) 100%);color:var(--blanc);padding:72px 0 80px;overflow:hidden}
  .hero .grille{display:grid;grid-template-columns:1.6fr 1fr;gap:56px;align-items:center}
  .hero-arbre{width:100%;max-width:210px;aspect-ratio:1024/1104;color:var(--cuivre);display:block;margin:0 auto}
  .hero h1{color:var(--blanc);font-weight:500;font-size:clamp(2.4rem,5.2vw,4rem);letter-spacing:-.01em;max-width:15ch}
  .hero .chapeau{font-size:1.2rem;color:#D6DCE8;margin:24px 0 32px;max-width:46ch}
  .hero .actions{display:flex;gap:14px;flex-wrap:wrap}
  .constat{border-left:4px solid var(--cuivre);padding:4px 0 4px 24px;margin-bottom:40px;color:var(--texte)}
  .constat strong{display:block;font-family:"Outfit",sans-serif;font-size:1.5rem;line-height:1.2;color:var(--nuit);margin-bottom:10px;font-weight:500}
  .constat p{margin:0}

  section{padding:88px 0}
  .alt{background:var(--fond)}

  /* Pour qui */
  .deux-col{display:grid;grid-template-columns:1fr 1fr;gap:56px}
  .liste-coches{list-style:none;padding:0;margin:0}
  .liste-coches li{position:relative;padding:14px 0 14px 34px;border-bottom:1px solid var(--pierre)}
  .liste-coches li:last-child{border-bottom:0}
  .liste-coches li::before{content:"";position:absolute;left:0;top:22px;width:16px;height:9px;border-left:3px solid var(--cuivre);border-bottom:3px solid var(--cuivre);transform:rotate(-45deg)}

  /* Services en rangées */
  .services{margin-top:24px;border-top:2px solid var(--nuit)}
  .service{display:grid;grid-template-columns:280px 1fr;gap:40px;padding:36px 0;border-bottom:1px solid var(--pierre)}
  .service h3{font-size:1.6rem}
  .service .detail ul{margin:.4em 0 0;padding-left:1.1em}
  .service .detail li{margin:.25em 0}

  /* Méthode : cycle réel, donc numéroté */
  .cycle{list-style:none;counter-reset:etape;padding:0;margin:40px 0 0;display:grid;grid-template-columns:repeat(6,1fr);gap:0;position:relative}
  .cycle li{counter-increment:etape;padding:0 16px 0 0;position:relative}
  .cycle li::before{content:counter(etape);display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;background:var(--nuit);color:var(--cuivre);font-family:"Outfit",sans-serif;font-weight:700;font-size:1.3rem;margin-bottom:16px;position:relative;z-index:1}
  .cycle li::after{content:"";position:absolute;top:21px;left:44px;right:0;height:2px;background:var(--pierre)}
  .cycle li:last-child::after{display:none}
  .cycle strong{display:block;color:var(--nuit);font-size:1.08rem;margin-bottom:4px}
  .cycle span{color:var(--gris);font-size:.96rem;display:block}
  .retour{margin-top:28px;color:var(--gris);font-size:.96rem}

  /* SEPP */
  .encadre{background:var(--blanc);border:1px solid var(--pierre);border-top:4px solid var(--cuivre);padding:32px 36px;border-radius:4px}

  /* À propos */
  .apropos{display:grid;grid-template-columns:1fr 2fr;gap:56px;align-items:start}
  .apropos .nom{font-family:"Outfit",sans-serif;font-size:2rem;color:var(--nuit);font-weight:700;line-height:1.1}
  .apropos .fonction{color:var(--gris);margin-top:6px}

  /* Contact */
  .contact{background:var(--nuit);color:var(--blanc)}
  .contact h2{color:var(--blanc)}
  .contact p{color:#D6DCE8}
  .contact .coord{font-size:1.25rem;margin-top:20px}
  .contact .coord a{color:var(--cuivre);font-weight:600}

  footer{background:var(--nuit-fonce);color:#A9B3C6;font-size:.9rem;padding:28px 0}
  footer .pied{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
  footer a{color:#A9B3C6}

  @media (max-width:900px){
    .hero-arbre{max-width:120px;margin:0;order:-1}
    nav ul{display:none}
    .hero .grille,.deux-col,.apropos{grid-template-columns:1fr;gap:36px}
    .service{grid-template-columns:1fr;gap:8px}
    .cycle{grid-template-columns:1fr 1fr;row-gap:32px}
    .cycle li::after{display:none}
    section{padding:64px 0}
  }
  @media (max-width:480px){
    .wrap{padding:0 16px}
    header .btn{padding:9px 14px;font-size:.95rem;white-space:nowrap}
    .logo-nom{font-size:1.15rem}
    .logo-arbre{width:28px;height:30px}
    .cycle{grid-template-columns:1fr}
    .encadre{padding:24px 20px}
  }

  /* Page mentions légales */
  .legal{padding:64px 0 88px}
  .legal h1{font-size:clamp(2rem,4vw,2.8rem);margin-bottom:.4em}
  .legal h2{font-size:1.5rem;margin:1.8em 0 .5em}
  .legal .maj{color:var(--gris);margin-bottom:2em}
  .legal dl{display:grid;grid-template-columns:220px 1fr;gap:6px 24px;margin:0 0 1em;max-width:var(--mesure)}
  .legal dt{color:var(--gris)}
  .legal dd{margin:0}
  .legal ul{max-width:var(--mesure);padding-left:1.2em}
  .a-completer{background:#FDEBD3;padding:0 4px;border-radius:3px}
  @media (max-width:600px){.legal dl{grid-template-columns:1fr}.legal dd{margin-bottom:10px}}