/* Le Coin des Motards — feuille de style commune
   Palette : encre, papier, un seul rouge. Pas de dégradé décoratif. */

:root{
  --ink:#0B0B0C;
  --surface:#141416;
  --surface-2:#1B1B1E;
  --line:#2A2A2E;
  --line-2:#3C3C42;
  --paper:#F4F1EC;
  --muted:#A8A49C;
  --muted-2:#7A776F;
  --red:#C8102E;
  --red-ink:#E81738;
  --head-bg:rgba(11,11,12,.94);
  --body-copy:#D9D6CF;
  --ghost-hover:rgba(255,255,255,.06);
  --focus-ring:rgba(244,241,236,.10);
  --sans:"Archivo","Helvetica Neue",Arial,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --wrap:1200px;
  --pad:clamp(18px,4vw,40px);
  --gap:clamp(20px,3vw,34px);
}

/* Thème clair : on inverse papier et encre, le rouge reste le seul accent.
   Les zones posées sur une photo ou sur le bandeau rouge gardent leur propre
   palette (voir .hero et .join plus bas) : elles ne suivent pas le thème. */
html[data-theme="clair"]{
  --ink:#F4F1EC;
  --surface:#FBF9F5;
  --surface-2:#EFEAE3;
  --line:#DCD6CC;
  --line-2:#B9B2A6;
  --paper:#0B0B0C;
  --muted:#4E4A44;
  --muted-2:#5F5B54;
  --red:#B00E28;
  --red-ink:#A00C24;
  --head-bg:rgba(244,241,236,.94);
  --body-copy:#26241F;
  --ghost-hover:rgba(11,11,12,.06);
  --focus-ring:rgba(11,11,12,.10);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;background:var(--ink);color:var(--paper);
  font-family:var(--sans);font-size:16.5px;line-height:1.62;
  font-synthesis-weight:none;-webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
p{margin:0 0 1em;text-wrap:pretty}
h1,h2,h3,h4{margin:0;font-weight:900;letter-spacing:-.028em;line-height:.94;text-wrap:balance}
ul{margin:0;padding:0;list-style:none}

.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 var(--pad)}
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--red);color:#fff;padding:12px 18px;font-weight:600}
.skip:focus{left:12px;top:12px}
.mono{font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--muted)}
.rule{height:1px;background:var(--line);border:0;margin:0}

/* ---------- en-tête ---------- */
.site-head{
  position:sticky;top:0;z-index:50;background:var(--head-bg);
  border-bottom:1px solid var(--line);backdrop-filter:blur(8px);
}
.site-head .wrap{display:flex;align-items:center;gap:clamp(14px,3vw,34px);height:66px}
.brand{display:flex;align-items:center;gap:11px;flex:0 0 auto;min-width:0}
.brand svg{width:40px;height:auto;color:var(--paper);flex:0 0 auto}
.brand-name{font-weight:900;font-size:15.5px;letter-spacing:-.02em;line-height:1;white-space:nowrap}
.brand-name small{display:block;font-family:var(--mono);font-weight:400;font-size:9.5px;letter-spacing:.14em;color:var(--muted);margin-top:4px}

.nav{display:flex;align-items:center;gap:clamp(12px,2.2vw,26px);margin-left:auto}
.nav a{font-size:14px;font-weight:500;color:var(--muted);padding:6px 0;border-bottom:2px solid transparent;transition:color .15s,border-color .15s}
.nav a:hover{color:var(--paper)}
.nav a[aria-current="page"]{color:var(--paper);border-bottom-color:var(--red)}
.nav .cta{
  color:var(--paper);border:1px solid var(--line-2);border-radius:2px;
  padding:8px 14px;font-weight:600;border-bottom-width:1px;
}
.nav .cta:hover{background:var(--red);border-color:var(--red)}

.burger{display:none;margin-left:auto;background:none;border:1px solid var(--line-2);border-radius:2px;color:var(--paper);width:42px;height:38px;align-items:center;justify-content:center;cursor:pointer}
.burger span{display:block;width:17px;height:1.5px;background:currentColor;position:relative}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:17px;height:1.5px;background:currentColor}
.burger span::before{top:-5px}.burger span::after{top:5px}

/* ---------- bascule clair / sombre ---------- */
.theme{
  display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;padding:0;flex:0 0 auto;
  border:1px solid var(--line-2);border-radius:2px;background:transparent;
  color:var(--muted);cursor:pointer;
  transition:color .15s,background .15s,border-color .15s;
}
.theme:hover{color:var(--paper);background:var(--ghost-hover)}
.theme svg{width:16px;height:16px;display:block}
.theme .i-lune{display:none}
html[data-theme="clair"] .theme .i-soleil{display:none}
html[data-theme="clair"] .theme .i-lune{display:block}

@media (max-width:860px){
  .nav{display:none}
  .burger{display:flex}
  .site-head.open .nav{
    display:flex;flex-direction:column;align-items:stretch;gap:0;
    position:absolute;left:0;right:0;top:66px;background:var(--surface);
    border-bottom:1px solid var(--line);padding:8px var(--pad) 18px;
  }
  .site-head.open .nav a{padding:13px 0;border-bottom:1px solid var(--line);font-size:16px}
  .site-head.open .nav .cta{margin-top:14px;text-align:center;padding:12px}
}

/* ---------- hero ---------- */
/* le hero est posé sur une photo sombre : palette figée, quel que soit le thème */
.hero{--ink:#0B0B0C;--paper:#F4F1EC;--muted:#A8A49C;--muted-2:#7A776F;--line-2:rgba(244,241,236,.35);--red-ink:#E81738;
  color:#F4F1EC;
  position:relative;min-height:min(70vh,620px);display:flex;align-items:flex-end;overflow:hidden}
.hero-media{position:absolute;inset:0;background:#1b1b1e url("assets/hero-1920.jpg") center 34%/cover no-repeat;filter:grayscale(1) contrast(1.06)}
.hero-media::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(100deg, rgba(11,11,12,.88) 0%, rgba(11,11,12,.62) 34%, rgba(11,11,12,.10) 62%, rgba(11,11,12,.25) 100%),
    linear-gradient(to top,var(--ink) 1%, rgba(11,11,12,.55) 30%, rgba(11,11,12,.05) 70%);
}
.hero-inner{position:relative;width:100%;padding-bottom:clamp(30px,5.5vw,58px)}
.hero h1{font-size:clamp(40px,8.6vw,116px);max-width:15ch}
.hero h1 em{font-style:normal;color:var(--red-ink)}
.hero-sub{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin-top:22px}
.hero-sub .pill{
  font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:var(--paper);
  border:1px solid var(--line-2);border-radius:2px;padding:5px 9px;
}
.hero-sub .place{font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:var(--muted)}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--sans);font-size:14.5px;font-weight:600;letter-spacing:-.01em;
  padding:13px 22px;border-radius:2px;border:1px solid transparent;cursor:pointer;
  transition:background .16s,color .16s,border-color .16s,transform .1s;
  min-height:46px;
}
.btn:active{transform:translateY(1px)}
.btn-red{background:var(--red);color:#fff}
.btn-red:hover{background:var(--red-ink)}
.btn-ghost{border-color:var(--line-2);color:var(--paper)}
.btn-ghost:hover{border-color:var(--paper);background:var(--ghost-hover)}
.btn-paper{background:var(--paper);color:var(--ink)}
.btn-paper:hover{background:#fff}

/* ---------- sections ---------- */
.sec{padding:clamp(56px,8vw,110px) 0}
.sec-tight{padding:clamp(40px,6vw,76px) 0}
.sec-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:var(--gap);align-items:end;margin-bottom:clamp(30px,4.5vw,56px)}
.sec-head h2{font-size:clamp(29px,4.6vw,54px)}
.sec-head p{margin:0;color:var(--muted);max-width:46ch;font-size:16px}
@media (max-width:800px){.sec-head{grid-template-columns:1fr;align-items:start;gap:16px}}

.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--red-ink);margin:0 0 16px}

/* deux colonnes éditoriales */
.split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,5vw,72px)}
.split>div{min-width:0}
@media (max-width:860px){.split{grid-template-columns:1fr;gap:26px}}
.lede{font-size:clamp(19px,2.4vw,25px);line-height:1.42;font-weight:600;letter-spacing:-.015em;margin:0 0 20px}
.body-copy p{color:var(--body-copy)}
.body-copy p:last-child{margin-bottom:0}

/* liste éditoriale — pas de cartes */
.facts{border-top:1px solid var(--line)}
.fact{display:grid;grid-template-columns:minmax(0,120px) minmax(0,1fr);gap:clamp(14px,3vw,40px);padding:26px 0;border-bottom:1px solid var(--line);align-items:baseline}
.fact .k{font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;color:var(--muted-2)}
.fact h3{font-size:clamp(20px,2.6vw,29px);margin-bottom:8px}
.fact p{margin:0;color:var(--muted);max-width:62ch}
@media (max-width:640px){.fact{grid-template-columns:1fr;gap:8px}.fact .k{margin-bottom:2px}}

/* ---------- rendez-vous ---------- */
.agenda{border-top:1px solid var(--line)}
.ev{display:grid;grid-template-columns:minmax(0,150px) minmax(0,1fr) minmax(0,180px);gap:clamp(12px,3vw,36px);padding:24px 0;border-bottom:1px solid var(--line);align-items:center}
.ev-when{font-family:var(--mono);font-size:12.5px;letter-spacing:.06em;line-height:1.5}
.ev-when b{display:block;font-size:17px;letter-spacing:.02em;color:var(--paper);font-weight:500}
.ev-when span{color:var(--muted-2)}
.ev-main h3{font-size:clamp(19px,2.3vw,25px);margin-bottom:5px}
.ev-main p{margin:0;color:var(--muted);font-size:14.5px}
.ev-tag{justify-self:end;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;color:var(--muted);border:1px solid var(--line-2);border-radius:2px;padding:4px 8px;white-space:nowrap}
.ev-tag.todo{color:var(--red-ink);border-color:rgba(232,23,56,.45)}
@media (max-width:760px){
  .ev{grid-template-columns:1fr;gap:9px;padding:20px 0}
  .ev-tag{justify-self:start;margin-top:4px}
}

/* ---------- bandeau adhésion ---------- */
/* bandeau rouge : texte et bouton papier figés */
.join{--ink:#0B0B0C;--paper:#F4F1EC;background:var(--red);color:#fff;padding:clamp(38px,6vw,68px) 0}
.join .wrap{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(20px,4vw,48px);align-items:center}
.join h2{font-size:clamp(28px,4.4vw,50px);max-width:18ch}
.join p{margin:14px 0 0;color:rgba(255,255,255,.9);max-width:52ch;font-size:15.5px}
.join-price{text-align:right}
.join-price .amount{font-weight:900;font-size:clamp(44px,6vw,72px);line-height:1;letter-spacing:-.04em}
.join-price .per{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:rgba(255,255,255,.82)}
.join .btn-paper{margin-top:18px}
@media (max-width:800px){
  .join .wrap{grid-template-columns:1fr}
  .join-price{text-align:left}
}

/* ---------- pages intérieures ---------- */
.page-head{padding:clamp(46px,7vw,92px) 0 clamp(30px,4vw,48px);border-bottom:1px solid var(--line)}
.page-head h1{font-size:clamp(36px,7vw,84px);max-width:18ch}
.page-head .lede{margin-top:22px;max-width:56ch;color:var(--body-copy)}
.crumb{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--muted-2);margin-bottom:22px}
.crumb a:hover{color:var(--paper)}

/* bureau */
.board{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);margin-top:8px}
.role{background:var(--ink);padding:22px 20px}
.role .r{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;color:var(--red-ink)}
.role .n{font-weight:800;font-size:17px;margin-top:9px;letter-spacing:-.02em}
.role .n.todo{color:var(--muted-2);font-weight:500;font-size:14px;font-style:italic}

/* liste de valeurs */
.vals{display:flex;flex-wrap:wrap;gap:0;border-top:1px solid var(--line);border-left:1px solid var(--line)}
.vals li{flex:1 1 150px;padding:26px 20px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.vals b{display:block;font-weight:800;font-size:clamp(17px,2vw,21px);letter-spacing:-.02em}
.vals span{display:block;margin-top:7px;font-size:13.5px;color:var(--muted);line-height:1.5}

/* formulaire */
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 18px}
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field.full{grid-column:1/-1}
.field label{font-size:12.5px;color:var(--muted);font-weight:500}
.field input,.field select,.field textarea{
  width:100%;min-width:0;background:var(--surface);color:var(--paper);
  border:1px solid var(--line-2);border-radius:2px;padding:12px 12px;font:inherit;font-size:15px;
}
.field textarea{min-height:120px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--paper);box-shadow:0 0 0 3px var(--focus-ring)}
@media (max-width:620px){.form-grid{grid-template-columns:1fr}}

.faq{border-top:1px solid var(--line);margin-top:8px}
.faq details{border-bottom:1px solid var(--line);padding:18px 0}
.faq summary{cursor:pointer;font-weight:700;font-size:16.5px;list-style:none;display:flex;justify-content:space-between;gap:16px;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--mono);color:var(--red-ink);font-size:18px;flex:0 0 auto}
.faq details[open] summary::after{content:"−"}
.faq p{margin:12px 0 0;color:var(--muted);font-size:15px;max-width:70ch}

/* encart d'information */
.note{border-left:2px solid var(--red);padding:2px 0 2px 16px;color:var(--muted);font-size:14.5px;margin:22px 0}
.note b{color:var(--paper);font-weight:600}

/* ---------- pied ---------- */
.site-foot{border-top:1px solid var(--line);padding:clamp(40px,6vw,64px) 0 30px;background:var(--ink)}
.foot-grid{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(2,minmax(0,1fr)) minmax(0,1fr);gap:var(--gap)}
.foot-grid h4{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;color:var(--muted-2);font-weight:400;margin-bottom:14px}
.foot-grid li{margin-bottom:9px;font-size:14px;color:var(--muted)}
.foot-grid a:hover{color:var(--paper)}
.foot-brand{display:flex;align-items:center;gap:11px;margin-bottom:14px}
.foot-brand svg{width:46px;height:auto;color:var(--paper)}
.foot-note{font-size:12.5px;color:var(--muted-2);max-width:34ch;line-height:1.6}
.foot-credit{text-align:center;margin:16px 0 0;font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted-2);opacity:.7}
.foot-credit a{border-bottom:1px solid transparent;transition:border-color .15s,color .15s}
.foot-credit a:hover{color:var(--paper);border-bottom-color:var(--paper)}
.foot-bottom{display:flex;flex-wrap:wrap;gap:10px 24px;justify-content:space-between;margin-top:clamp(30px,4vw,48px);padding-top:20px;border-top:1px solid var(--line);font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--muted-2)}
@media (max-width:860px){.foot-grid{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.foot-grid{grid-template-columns:1fr}}

/* ---------- focus visible ---------- */
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:2px solid var(--paper);outline-offset:3px;
}

/* ---------- impression ---------- */
@media print{
  .site-head,.site-foot,.join,.hero-media,.burger{display:none}
  body{background:#fff;color:#000}
  .hero{min-height:0}
  a{text-decoration:underline}
}