/* CycloCube — style partagé des pages intérieures (adhesion, blog, articles)
   Chartre : vert #6aa84f / foncé #4e7f39 / clair #e9f3e3, bleu #2c313f, gris #5b626b */
:root{
  --vert:#6aa84f;
  --vert-fonce:#4e7f39;
  --vert-clair:#e9f3e3;
  --bleu:#2c313f;
  --bleu-clair:#e8eaf0;
  --gris:#5b626b;
  --gris-clair:#f2f4f6;
  --blanc:#ffffff;
  --ombre:0 2px 10px rgba(44,49,63,.09);
  --rayon:14px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Asap',system-ui,sans-serif;color:var(--bleu);line-height:1.6}
h1,h2,h3,.btn{font-family:'Asap Condensed','Asap',sans-serif;letter-spacing:.01em}
img{max-width:100%;display:block}
a{color:var(--vert)}
.wrap{max-width:1100px;margin:0 auto;padding:0 20px}

.skip{position:absolute;left:-9999px;background:var(--blanc);color:var(--bleu);padding:.6em 1em;z-index:2000;border-radius:6px}
.skip:focus{left:12px;top:12px}

/* ---------- Header ---------- */
header{position:sticky;top:0;background:var(--blanc);box-shadow:0 1px 6px rgba(44,49,63,.09);z-index:900}
.nav{display:flex;align-items:center;justify-content:space-between;height:140px;gap:16px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--bleu);font-family:'Asap Condensed',sans-serif;font-weight:700;font-size:1.35rem;white-space:nowrap}
.brand img{height:88px;width:auto;object-fit:contain}
.nav-links{display:flex;gap:22px;list-style:none;align-items:center}
.nav-links a{text-decoration:none;color:var(--bleu);font-weight:500;padding:6px 2px;border-bottom:2px solid transparent}
.nav-links a:hover,.nav-links a:focus{border-bottom-color:var(--vert)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;font-weight:700;border-radius:999px;cursor:pointer;border:none;transition:transform .15s,box-shadow .15s}
.btn:hover{transform:translateY(-2px)}
.nav-toggle{display:none;background:none;border:none;font-size:1.6rem;cursor:pointer;padding:8px;color:var(--bleu)}

/* ---------- Bandeau de page (vert clair) ---------- */
.bandeau{background:var(--vert-clair);padding:40px 0 36px}
.bandeau h1{font-size:clamp(1.8rem,3.6vw,2.5rem);line-height:1.15;margin-bottom:10px}
.bandeau p{color:var(--gris);max-width:70ch}
.fil{font-size:.85rem;color:var(--gris);margin-bottom:10px}
.fil a{color:var(--gris);text-decoration:none}
.fil a:hover,.fil a:focus{color:var(--vert-fonce);text-decoration:underline}

/* ---------- Boutons ---------- */
.btn-vert{background:var(--vert);color:var(--blanc);padding:13px 28px;font-size:1.05rem}
.btn-vert:hover{background:var(--vert-fonce)}
.btn-bleu{background:var(--bleu);color:var(--blanc);padding:12px 26px}
.btn-bleu:hover{background:#1a1e28}

/* ---------- Cartes cliquables (adhesion / articles) ---------- */
.cards{display:grid;grid-template-columns:repeat(5,1fr);gap:24px}
.card-verte{background:var(--vert-clair)}
.card{background:var(--blanc);border:1px solid #e2e6ec;border-top:4px solid var(--vert);border-radius:var(--rayon);padding:28px 24px;text-decoration:none;color:var(--bleu);display:flex;flex-direction:column;gap:12px;transition:transform .15s,box-shadow .15s,border-color .15s;min-width:0}
.card .go{overflow-wrap:anywhere}
.card:hover{transform:translateY(-4px);box-shadow:var(--ombre);border-top-color:var(--bleu)}
.card h2,.card h3{font-size:1.25rem;font-weight:700}
.card p{color:var(--gris);font-size:.97rem;flex:1}
.card .go{color:var(--vert);font-weight:600;font-size:.95rem}
.card:hover .go{text-decoration:underline}

/* ---------- Adhésion ---------- */
.velos-a-vendre{display:grid;grid-template-columns:1fr 230px;gap:36px;align-items:center;margin-top:38px;background:var(--blanc);border:1px solid #e2e6ec;border-top:4px solid var(--vert);border-radius:var(--rayon);padding:32px}
.velos-texte{max-width:70ch}
.velos-photos{display:grid;gap:14px}
.velos-photos a{display:block;border-radius:12px;overflow:hidden;box-shadow:var(--ombre)}
.velos-photos img{width:100%;height:auto;aspect-ratio:2/1;object-fit:cover;display:block;transition:transform .2s}
.velos-photos a:hover img{transform:scale(1.03)}
.velos-accroche{font-family:'Asap Condensed','Asap',sans-serif;font-weight:700;font-size:1.35rem;color:var(--vert-fonce);margin-bottom:10px}
.velos-desc{color:var(--gris);margin-bottom:20px}
.section{padding:56px 0}
.intro-note{background:var(--gris-clair);border-radius:var(--rayon);padding:22px 26px;color:var(--gris);font-size:.95rem}
.intro-note a{color:var(--vert-fonce)}
.frise-titre{font-size:1.3rem;margin-top:38px}
.frise-ateliers{display:grid;grid-template-columns:repeat(5,1fr);gap:18px;text-decoration:none}
.frise-item{display:flex;flex-direction:column;gap:6px}
.frise-item img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:12px;border:1px solid #e2e6ec}
.frise-nom{font-size:.8rem;text-align:center;color:var(--bleu);line-height:1.25}

/* ---------- Blog : liste d'articles ---------- */
.article-meta{font-size:.85rem;color:var(--gris);display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.article-meta .cat{display:inline-block;background:var(--vert-clair);color:var(--vert-fonce);font-family:'Asap Condensed',sans-serif;font-weight:600;font-size:.8rem;text-transform:uppercase;letter-spacing:.04em;border-radius:999px;padding:2px 10px}
.article-item h2{font-size:1.35rem;margin:6px 0 8px;line-height:1.3}
.article-item h2 a{color:var(--bleu);text-decoration:none}
.article-item h2 a:hover,.article-item h2 a:focus{color:var(--vert-fonce);text-decoration:underline}
.article-item .chapeau{color:var(--gris)}
.article-list{display:grid;gap:24px}

/* ---------- Article ---------- */
.article-page{max-width:760px;margin:0 auto}
.article-head{border-bottom:1px solid #e2e6ec;padding-bottom:18px;margin-bottom:26px}
.article-head h1{font-size:clamp(1.7rem,3.4vw,2.3rem);line-height:1.2;margin:8px 0 12px}
.article-page h2{font-size:1.5rem;margin:34px 0 12px}
.article-page h3,.article-page h4{font-size:1.2rem;margin:28px 0 10px}
.article-page p{margin-bottom:1em}
.article-page ul,.article-page ol{margin:0 0 1em 1.4em}
.article-page li{margin-bottom:.4em}
.article-page blockquote{border-left:4px solid var(--vert);padding:10px 18px;margin:0 0 1em;color:var(--gris);background:var(--gris-clair);border-radius:0 10px 10px 0}
.article-page img{border-radius:10px;box-shadow:var(--ombre);height:auto}
.article-page figure{margin:24px 0}
.article-page figcaption{font-size:.85rem;color:var(--gris);margin-top:8px}
.article-page iframe{width:100%;aspect-ratio:16/9;border:0;border-radius:10px}
.article-page a{color:var(--vert-fonce)}
.article-page details{background:var(--gris-clair);border-radius:10px;padding:16px 20px;margin:20px 0}
.article-page summary{font-weight:600;cursor:pointer}
.article-page .video-frame{position:relative;padding-bottom:56.25%;height:0;overflow:hidden;border-radius:10px;background:#000}
.article-page .video-frame iframe{position:absolute;top:0;left:0;width:100%;height:100%;aspect-ratio:auto}
.article-nav{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:44px;padding-top:24px;border-top:1px solid #e2e6ec}
.article-nav a{text-decoration:none;font-weight:600}
.article-nav a:hover,.article-nav a:focus{text-decoration:underline}

/* ---------- Bandeau soutien ---------- */
.support{background:var(--vert);padding:34px 0}
.support .wrap{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
.support h2{font-size:1.5rem;color:var(--blanc)}
.support .btn{background:var(--bleu);color:var(--blanc);padding:12px 26px}
.support .btn:hover{background:#1a1e28}

/* ---------- Footer ---------- */
footer{background:var(--bleu);color:#c8ccd6;padding:44px 0 28px;font-size:.92rem}
.foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:32px;margin-bottom:32px}
footer h3{color:var(--blanc);font-size:1rem;margin-bottom:12px}
footer ul{list-style:none}
footer a{color:#c8ccd6;text-decoration:none}
footer a:hover{color:var(--vert)}
.socials{display:flex;gap:12px;margin-top:14px}
.socials a{width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.1);display:grid;place-items:center;transition:background .15s}
.socials a:hover{background:var(--vert)}
.socials svg{width:18px;height:18px;fill:#c8ccd6}
.foot-bottom{border-top:1px solid rgba(255,255,255,.12);padding-top:18px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .foot-grid{grid-template-columns:1fr 1fr}
  .cards{grid-template-columns:repeat(3,1fr)}
  .velos-a-vendre{grid-template-columns:1fr;gap:24px}
  .velos-photos{max-width:230px}
}
@media (max-width:700px){
  .nav-links{position:absolute;top:140px;left:0;right:0;background:var(--blanc);flex-direction:column;gap:0;padding:10px 20px 18px;display:none;box-shadow:0 6px 12px rgba(44,49,63,.12);align-items:flex-start}
  .nav-links.open{display:flex}
  .nav-links li{width:100%}
  .nav-links a{display:block;padding:12px 0}
  .nav-toggle{display:block}
  section,.section{padding:44px 0}
  .bandeau{padding:32px 0 28px}
  .cards{grid-template-columns:repeat(2,1fr)}
  .frise-ateliers{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:520px){
  .cards{grid-template-columns:1fr}
  .frise-ateliers{grid-template-columns:repeat(2,1fr)}
}