/* ---------------------------------------------------------------------
   base.css — tokens & composants partagés par les 5 pages
   (chaque template ajoute ensuite son propre bloc extra_css)
--------------------------------------------------------------------- */

:root{
  --paper:#E4D9C4;
  --paper-light:#F3ECDD;
  --chalk:#FAF7F1;
  --ink:#211E19;
  --ink-soft:#4A443B;
  --graphite:#726C61;
  --blue:#2E4D6B;
  --blue-deep:#1D3348;
  --red:#B23A2E;
  --green:#4F6B4A;
  --line: rgba(33,30,25,0.14);
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--paper);
  background-image:
    repeating-linear-gradient(0deg, var(--line) 0px, var(--line) 1px, transparent 1px, transparent 32px),
    repeating-linear-gradient(90deg, var(--line) 0px, var(--line) 1px, transparent 1px, transparent 32px);
  color:var(--ink);
  font-family:'Newsreader', serif;
  line-height:1.55;
  overflow-x:hidden;
}
h1,h2,h3,.display{ font-family:'Space Grotesk', sans-serif; letter-spacing:-0.01em; }
.mono{ font-family:'IBM Plex Mono', monospace; letter-spacing:0.03em; }
a{ color:inherit; text-decoration:none; }
.wrap{ max-width:1180px; margin:0 auto; padding:0 32px; }

/* --- Nav --- */
header.site{
  position:sticky; top:0; z-index:50;
  background:rgba(228,217,196,0.88);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line);
}
nav.wrap{ display:flex; align-items:center; justify-content:space-between; height:76px; }
.logo{ font-size:1.15rem; font-weight:700; display:flex; align-items:center; gap:10px;}
.logo .swatch{ width:14px; height:14px; background:var(--blue); transform:rotate(45deg); display:inline-block;}
.navlinks{ display:flex; gap:34px; font-size:0.92rem; }
.navlinks a{ position:relative; padding:4px 0; color:var(--ink-soft); transition:color .2s;}
.navlinks a:hover{ color:var(--ink); }
.navlinks a.current{ color:var(--ink); font-weight:600; }
.navlinks a.current::after{
  content:""; position:absolute; left:0; right:0; bottom:-6px; height:2px; background:var(--red);
}
.btn{
  font-family:'IBM Plex Mono', monospace; font-size:0.78rem; letter-spacing:0.05em;
  padding:11px 20px; border:1px solid var(--ink); border-radius:2px;
  text-transform:uppercase; transition:all .2s ease; white-space:nowrap;
  display:inline-block; cursor:pointer; background:none;
}
.btn.primary{ background:var(--ink); color:var(--chalk); }
.btn.primary:hover{ background:var(--blue); border-color:var(--blue); }
.btn.ghost:hover{ background:var(--ink); color:var(--chalk); }

/* --- Sections communes --- */
section{ padding:88px 0; position:relative; }
.eyebrow{
  font-family:'IBM Plex Mono', monospace; font-size:0.76rem; letter-spacing:0.12em;
  color:var(--blue); text-transform:uppercase; display:flex; align-items:center; gap:10px; margin-bottom:22px;
}
.eyebrow::before{ content:""; width:24px; height:1px; background:var(--blue); display:inline-block; }
.divider-stitch{ height:1px; border-top:1px dashed var(--ink); opacity:0.4; margin:0 auto; }

.section-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:24px; margin-bottom:52px; flex-wrap:wrap; }
.section-head .eyebrow{ margin-bottom:14px; }
.section-head h2{ font-size:clamp(1.7rem,3vw,2.4rem); font-weight:600; max-width:20ch; }
.section-head .note{ font-family:'IBM Plex Mono', monospace; font-size:0.78rem; color:var(--graphite); max-width:32ch; text-align:right;}

.page-hero{ padding:76px 0 40px; }
.page-hero h1{ font-size:clamp(2.2rem,4.4vw,3.4rem); font-weight:600; line-height:1.08; max-width:18ch; margin-bottom:22px; }
.page-hero p.lede{ font-size:1.1rem; color:var(--ink-soft); max-width:58ch; }

.filters{ display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin-top:30px; }
.filters .flabel{ font-family:'IBM Plex Mono', monospace; font-size:0.72rem; color:var(--graphite); text-transform:uppercase; margin-right:6px; }
.fbtn{
  font-family:'IBM Plex Mono', monospace; font-size:0.75rem; padding:8px 16px;
  border:1px solid var(--ink); background:transparent; cursor:pointer; transition:all .18s ease;
}
.fbtn.active{ background:var(--ink); color:var(--chalk); }
.fbtn:hover:not(.active){ background:var(--paper-light); }

/* --- FAQ (Services + Formations) --- */
.faq{ max-width:820px; }
.faq-item{ border-bottom:1px solid var(--line); padding:22px 0; }
.faq-item summary{ cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center; font-size:1.05rem; font-weight:500; }
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{ content:"+"; font-family:'IBM Plex Mono', monospace; font-size:1.2rem; color:var(--blue); }
.faq-item[open] summary::after{ content:"–"; }
.faq-item p{ color:var(--ink-soft); margin-top:14px; max-width:62ch; }

/* --- CTA final (toutes pages) --- */
.cta-final{ background:var(--blue-deep); color:var(--chalk); }
.cta-final .wrap{ text-align:center; padding:20px 32px; }
.cta-final h2{ color:var(--chalk); font-size:clamp(1.8rem,3.4vw,2.6rem); max-width:24ch; margin:0 auto 20px; }
.cta-final p{ color:#C9D3DC; max-width:46ch; margin:0 auto 34px; }
.cta-final .btn.primary{ background:var(--red); border-color:var(--red); }
.cta-final .btn.primary:hover{ background:var(--chalk); color:var(--ink); border-color:var(--chalk); }

footer{ border-top:1px solid var(--line); padding:44px 0; }
.foot-grid{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:24px; font-family:'IBM Plex Mono', monospace; font-size:0.78rem; color:var(--graphite);}
.foot-grid a{ color:var(--ink-soft); }

.nav-toggle{
  display:none; flex-direction:column; justify-content:space-between;
  width:26px; height:18px; background:none; border:none; cursor:pointer; padding:0; z-index:60;
}
.nav-toggle span{ display:block; height:2px; width:100%; background:var(--ink); transition:transform .25s ease, opacity .2s ease; }
.nav-toggle.open span:nth-child(1){ transform:translateY(8px) rotate(45deg); }
.nav-toggle.open span:nth-child(2){ opacity:0; }
.nav-toggle.open span:nth-child(3){ transform:translateY(-8px) rotate(-45deg); }

.nav-cta-mobile{ display:none; }

@media (max-width:860px){
  .nav-toggle{ display:flex; }
  .nav-cta-desktop{ display:none; }

  .navlinks{
    display:flex; flex-direction:column; gap:0;
    position:fixed; top:76px; left:0; right:0; bottom:0; z-index:55;
    background:var(--paper); padding:8px 32px 32px; overflow-y:auto;
    transform:translateY(-12px); opacity:0; pointer-events:none;
    transition:opacity .2s ease, transform .2s ease;
    border-top:1px solid var(--line);
  }
  .navlinks.open{ opacity:1; transform:translateY(0); pointer-events:auto; }
  .navlinks a{ padding:18px 0; border-bottom:1px solid var(--line); font-size:1.1rem; }
  .navlinks a.current::after{ display:none; }
  .navlinks a.current{ color:var(--blue); }
  .nav-cta-mobile{ display:inline-block; text-align:center; margin-top:24px; }

  .section-head{ flex-direction:column; align-items:flex-start; }
  .section-head .note{ text-align:left; }
}