/* ===== RENARD DES SURFACES — feuille de style partagée ===== */
:root{
  --vert:#3D9838; --vert-fonce:#2A6B27;
  --bleu:#194E9D; --bleu-fonce:#123a75;
  --rouge:#A1142E; --jaune:#FFDE59;
  --orange:#F47E0A; --texte:#1A1A1A; --gris:#F5F5F5;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:'Fraunces','Georgia',serif;
  color:var(--texte); line-height:1.65; background:#fff;
}
h1,h2,h3,.display{font-family:'Fredoka','Arial Black',sans-serif; font-weight:600; letter-spacing:.3px;}
a{color:inherit;}
img,svg{max-width:100%;}
.wrap{max-width:1080px; margin:0 auto; padding:0 24px;}

/* ---------- NAV (ruban partagé) ---------- */
header.nav{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.96); backdrop-filter:blur(6px);
  border-bottom:1px solid #e7e7e7;
}
.nav-inner{display:flex; align-items:center; justify-content:space-between; height:64px;}
.brand{display:flex; align-items:center; gap:10px; font-family:'Fredoka',sans-serif;
  font-size:25px; color:var(--bleu); letter-spacing:1px; text-decoration:none;}
.brand .ball{font-size:22px;}
.brand .logo-mini{height:42px; width:auto; display:block;}
.brand .brand-txt{display:flex; align-items:center; gap:9px;}
.brand .brand-name{font-weight:700;}
.brand .brand-fox{height:30px; width:auto; display:block; opacity:.95;}
nav.links{display:flex; gap:26px;}
nav.links a{text-decoration:none; font-weight:500; font-size:15px; color:#333; transition:color .15s;}
nav.links a:hover{color:var(--vert);}
nav.links a.active{color:var(--vert); font-weight:700;}
.burger{display:none; background:none; border:0; font-size:26px; cursor:pointer; color:var(--bleu);}
@media(max-width:780px){
  nav.links{position:absolute; top:64px; left:0; right:0; flex-direction:column;
    background:#fff; gap:0; border-bottom:1px solid #e7e7e7; display:none;}
  nav.links.open{display:flex;}
  nav.links a{padding:14px 24px; border-top:1px solid #f0f0f0;}
  .burger{display:block;}
}

/* ---------- HERO ---------- */
.hero{
  background:linear-gradient(135deg,var(--bleu) 0%,var(--bleu-fonce) 55%,var(--vert-fonce) 100%);
  color:#fff; position:relative; overflow:hidden;
}
.hero::after{ /* lignes de terrain en filigrane */
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(circle at 80% 20%, rgba(255,255,255,.08) 0 120px, transparent 121px),
    linear-gradient(transparent 49.5%, rgba(255,255,255,.06) 50%, transparent 50.5%);
  background-size:auto, 100% 60px; pointer-events:none;
}
.hero-inner{position:relative; z-index:1; padding:64px 0 96px; text-align:center;}
.hero .crest{width:clamp(150px,22vw,210px); height:auto; margin:0 auto 8px;
  display:block; filter:drop-shadow(0 6px 14px rgba(0,0,0,.28));}
.hero h1{font-size:clamp(40px,7vw,76px); line-height:1; color:#fff; text-shadow:0 3px 0 rgba(0,0,0,.18);}
.hero h1 .fox{color:var(--jaune);}
.hero .tagline{font-family:'Fraunces',serif; font-weight:600; font-size:clamp(16px,2.4vw,22px);
  margin-top:18px; color:#eafff0;}
.hero .pitch{max-width:620px; margin:22px auto 0; font-size:17px; color:#d9e6ff;}
.badges{display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:34px;}
.badge{background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.25);
  border-radius:999px; padding:9px 20px; font-weight:600; font-size:15px;}
.badge b{font-family:'Fredoka',sans-serif; color:var(--jaune); margin-right:6px; letter-spacing:1px;}
.cta{display:inline-flex; gap:12px; margin-top:38px; flex-wrap:wrap; justify-content:center;}
.btn{display:inline-block; text-decoration:none; font-weight:600; font-size:16px;
  padding:14px 30px; border-radius:10px; transition:transform .12s, box-shadow .12s;}
.btn:hover{transform:translateY(-2px);}
.btn-primary{background:var(--jaune); color:#1a1a1a; box-shadow:0 4px 0 #c9a800;}
.btn-ghost{background:transparent; color:#fff; border:2px solid rgba(255,255,255,.55);}

/* ---------- SECTIONS ---------- */
section{padding:72px 0;}
section.alt{background:var(--gris);}
.sec-head{text-align:center; margin-bottom:44px;}
.sec-head .kicker{display:inline-block; font-weight:700; font-size:13px; letter-spacing:2px;
  text-transform:uppercase; color:var(--vert); margin-bottom:8px;}
.sec-head h2{font-size:clamp(28px,4.5vw,40px); color:var(--bleu);}
.sec-head p{max-width:640px; margin:14px auto 0; color:#444;}

/* page-title : en-tête de page interne (sous le ruban) */
.page-title{background:linear-gradient(135deg,var(--bleu) 0%,var(--bleu-fonce) 100%); color:#fff; padding:56px 0;}
.page-title .wrap{text-align:center;}
.page-title h1{font-size:clamp(32px,5vw,48px); color:#fff;}
.page-title p{max-width:640px; margin:14px auto 0; color:#d9e6ff; font-size:17px;}

/* présentation : cartes de points forts */
.grid3{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
@media(max-width:780px){.grid3{grid-template-columns:1fr;}}
.feature{background:#fff; border:1px solid #ececec; border-radius:14px; padding:28px 24px;
  box-shadow:0 2px 10px rgba(0,0,0,.04);}
.feature .ic{width:52px; height:52px; border-radius:12px; display:flex; align-items:center;
  justify-content:center; font-size:26px; margin-bottom:16px;}
.feature h3{font-size:21px; color:var(--bleu); margin-bottom:8px; letter-spacing:.3px;}
.feature p{font-size:15px; color:#444;}

/* comment jouer : étapes */
.steps{display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-bottom:48px;}
@media(max-width:780px){.steps{grid-template-columns:repeat(2,1fr);}}
@media(max-width:460px){.steps{grid-template-columns:1fr;}}
.step{text-align:center; padding:10px;}
.step .n{width:54px; height:54px; margin:0 auto 14px; border-radius:50%;
  background:var(--vert); color:#fff; font-family:'Fredoka',sans-serif; font-size:26px;
  display:flex; align-items:center; justify-content:center;}
.step h3{font-size:18px; color:var(--bleu); margin-bottom:6px;}
.step p{font-size:14px; color:#555;}

/* comment jouer : étapes en rubans horizontaux dépliables */
.steprows{display:flex; flex-direction:column; gap:16px; margin-bottom:48px;}
.steprow{background:#fff; border:1px solid #e7e7e7; border-left:6px solid var(--vert);
  border-radius:14px; box-shadow:0 2px 10px rgba(0,0,0,.04); overflow:hidden;}
.steprow > summary{display:flex; align-items:center; gap:22px; padding:20px 26px;
  cursor:pointer; list-style:none;}
.steprow > summary::-webkit-details-marker{display:none;}
.steprow .n{flex:0 0 auto; width:60px; height:60px; border-radius:50%;
  background:var(--vert); color:#fff; font-family:'Fredoka',sans-serif; font-size:30px;
  display:flex; align-items:center; justify-content:center;}
.steprow .st-head{flex:1;}
.steprow .st-head h3{font-size:22px; color:var(--bleu); margin:0;}
.steprow .st-head .st-sub{font-size:14.5px; color:#777;}
.steprow .chev{flex:0 0 auto; font-family:'Fredoka',sans-serif; font-size:30px;
  color:var(--vert); line-height:1; transition:transform .2s;}
.steprow[open] .chev{transform:rotate(45deg);}
.steprow .st-body{padding:4px 26px 24px; }
.steprow .st-body > :first-child{margin-top:0;}
.steprow .st-body p{font-size:15.5px; color:#444; margin-bottom:12px;}
.steprow .st-body ul{margin:0 0 12px; padding-left:20px; color:#444; font-size:15.5px;}
.steprow .st-body li{margin-bottom:5px;}
/* dégradé de couleur au fil des étapes */
.steprow:nth-child(1){border-left-color:var(--vert);}
.steprow:nth-child(1) .n{background:var(--vert);} .steprow:nth-child(1) .chev{color:var(--vert);}
.steprow:nth-child(2){border-left-color:#2f8aa0;}
.steprow:nth-child(2) .n{background:#2f8aa0;} .steprow:nth-child(2) .chev{color:#2f8aa0;}
.steprow:nth-child(3){border-left-color:var(--orange);}
.steprow:nth-child(3) .n{background:var(--orange);} .steprow:nth-child(3) .chev{color:var(--orange);}
.steprow:nth-child(4){border-left-color:var(--rouge);}
.steprow:nth-child(4) .n{background:var(--rouge);} .steprow:nth-child(4) .chev{color:var(--rouge);}
@media(max-width:560px){
  .steprow > summary{gap:14px; padding:16px 18px;}
  .steprow .n{width:46px; height:46px; font-size:23px;}
  .steprow .st-head h3{font-size:18px;}
  .steprow .st-body{padding:2px 18px 20px;}
}

/* deux options de tour */
.options{display:grid; grid-template-columns:1fr 1fr; gap:22px; margin-top:10px;}
@media(max-width:780px){.options{grid-template-columns:1fr;}}
.opt{border-radius:14px; overflow:hidden; border:2px solid #e3e3e3; background:#fff;}
.opt .head{padding:16px 22px; color:#fff; font-family:'Fredoka',sans-serif; font-size:22px; letter-spacing:.5px;}
.opt.o1 .head{background:var(--orange);}
.opt.o2 .head{background:var(--vert);}
.opt .body{padding:20px 22px; font-size:15.5px;}
.opt .body strong{color:var(--vert-fonce);}

/* encart tir */
.shot{display:grid; grid-template-columns:1.1fr .9fr; gap:30px; align-items:center; margin-top:46px;}
@media(max-width:780px){.shot{grid-template-columns:1fr;}}
.shot .calc{background:var(--bleu); color:#fff; border-radius:16px; padding:30px;}
.shot .calc h3{color:var(--jaune); font-size:24px; margin-bottom:18px;}
.vs{display:flex; align-items:center; gap:14px; margin:10px 0;}
.vs .team{flex:1; background:rgba(255,255,255,.1); border-radius:10px; padding:14px; text-align:center;}
.vs .team .lbl{font-size:13px; text-transform:uppercase; letter-spacing:1px; opacity:.85;}
.vs .team .val{font-family:'Fredoka',sans-serif; font-size:34px; color:var(--jaune);}
.vs .mid{font-family:'Fredoka',sans-serif; font-size:22px;}
.shot .res{margin-top:14px; text-align:center; font-weight:700; font-size:18px;}
.alerte{margin-top:14px; font-size:14.5px; color:#666; background:#fbe9ec;
  border-left:4px solid var(--rouge); padding:10px 14px; border-radius:6px;}

/* exemple de partie : timeline */
.timeline{position:relative; max-width:760px; margin:0 auto; padding-left:20px;}
.timeline::before{content:""; position:absolute; left:0; top:6px; bottom:6px; width:4px;
  background:linear-gradient(var(--vert),var(--bleu)); border-radius:4px;}
.turn{position:relative; padding:0 0 30px 34px;}
.turn::before{content:""; position:absolute; left:-8px; top:4px; width:20px; height:20px;
  border-radius:50%; background:#fff; border:4px solid var(--vert);}
.turn:last-child{padding-bottom:0;}
.turn .who{font-family:'Fredoka',sans-serif; font-size:14px; letter-spacing:1px;
  color:var(--vert); text-transform:uppercase;}
.turn h3{font-size:19px; color:var(--bleu); margin:2px 0 6px;}
.turn p{font-size:15px; color:#444;}
.turn .note{margin-top:8px; font-size:13.5px; color:#666; font-style:normal;
  background:#fff6e0; border-left:4px solid var(--orange); padding:8px 12px; border-radius:6px;}
.turn.goal h3{color:var(--rouge);}
.turn.goal::before{border-color:var(--rouge); background:var(--rouge);}

/* anatomie carte */
.cards-row{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
@media(max-width:780px){.cards-row{grid-template-columns:1fr;}}
.ctype{border-radius:14px; padding:24px; color:#fff;}
.ctype.foot{background:linear-gradient(135deg,#e9ecf1 0%,#c8cdd6 55%,#aeb4bf 100%); color:#2a2e35;}
.ctype.act{background:var(--vert);}
.ctype.tac{background:var(--orange);}
.ctype h3{font-size:22px; margin-bottom:10px;}
.ctype p{font-size:15px; opacity:.95;}
.ctype .tag{display:inline-block; background:rgba(0,0,0,.18); border-radius:6px;
  padding:3px 10px; font-size:12px; font-weight:600; margin-bottom:12px; letter-spacing:.5px;}
.ctype.foot .tag{background:rgba(0,0,0,.12); color:#2a2e35;}

/* drapeaux rectangulaires */
.flag{display:inline-block; height:1em; width:1.5em; vertical-align:-0.12em;
  border-radius:2px; box-shadow:0 0 0 1px rgba(0,0,0,.12); margin-right:.35em;
  background-size:cover; background-position:center;}

/* footballeurs en détail (page cartes) */
.foot-detail{display:grid; grid-template-columns:280px 1fr; gap:36px; align-items:center;}
.foot-card{margin:0;}
.foot-card img{width:100%; border-radius:12px; box-shadow:0 8px 22px rgba(0,0,0,.16); display:block;}
.foot-card figcaption{font-size:13.5px; color:#666; text-align:center; margin-top:10px;}
.foot-text h3{font-size:21px; color:var(--bleu); margin-bottom:4px;}
.foot-text .tbl{margin-top:14px;}
@media(max-width:760px){
  .foot-detail{grid-template-columns:1fr; gap:22px;}
  .foot-card{max-width:240px; margin:0 auto;}
}

/* compétences (Vista / Tikitaka) */
.skills{display:grid; grid-template-columns:1fr 1fr; gap:22px; margin-top:8px;}
@media(max-width:680px){.skills{grid-template-columns:1fr;}}
.skill{background:#fff; border:1px solid #e8e8e8; border-radius:14px; padding:26px 24px;
  text-align:center; box-shadow:0 2px 10px rgba(0,0,0,.04);}
.skill img{height:96px; width:auto; margin:0 auto 14px; display:block;}
.skill h3{font-size:20px; margin-bottom:8px; color:var(--bleu);}
.skill p{font-size:14.5px; color:#555;}

/* tableaux */
.tbl{width:100%; border-collapse:collapse; margin-top:30px; font-size:15px; background:#fff; border-radius:12px; overflow:hidden;}
.tbl th,.tbl td{padding:12px 16px; text-align:left; border-bottom:1px solid #eee;}
.tbl th{background:var(--bleu); color:#fff; font-family:'Fraunces',serif; font-weight:600;}
.tbl tr:last-child td{border-bottom:0;}
.tbl td strong{color:var(--vert-fonce);}

/* FAQ */
.faq{max-width:760px; margin:0 auto;}
details{background:#fff; border:1px solid #e7e7e7; border-radius:10px; margin-bottom:12px; padding:0 20px;}
details summary{cursor:pointer; font-weight:600; padding:16px 0; list-style:none; font-size:16px; color:var(--bleu);
  display:flex; justify-content:space-between; align-items:center;}
details summary::-webkit-details-marker{display:none;}
details summary::after{content:"+"; font-family:'Fredoka',sans-serif; font-size:22px; color:var(--vert);}
details[open] summary::after{content:"–";}
/* les rubans (règles / étapes) ont déjà leur propre chevron : pas de second marqueur,
   ni fermé ni ouvert (on bat la spécificité de details[open] summary::after) */
.rulesec > summary::after, .rulesec[open] > summary::after,
.steprow > summary::after, .steprow[open] > summary::after{content:none;}
details p{padding:0 0 18px; color:#444; font-size:15px;}

/* aide-mémoire / appel final */
.recap{background:linear-gradient(135deg,var(--vert-fonce),var(--bleu)); color:#fff; border-radius:18px; padding:44px;}
.recap h2{color:#fff; font-size:30px; margin-bottom:6px;}
.recap .sub{color:#d9e6ff; margin-bottom:26px;}
.recap-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:14px;}
@media(max-width:600px){.recap-grid{grid-template-columns:1fr;}}
.recap-grid .item{background:rgba(255,255,255,.12); border-radius:10px; padding:16px 18px;}
.recap-grid .item b{font-family:'Fredoka',sans-serif; color:var(--jaune); display:block; margin-bottom:4px; letter-spacing:.5px;}
.recap-grid .item span{font-size:14.5px;}

/* grille de liens vers les pages (accueil) */
.navcards{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
@media(max-width:780px){.navcards{grid-template-columns:1fr;}}
.navcard{display:block; text-decoration:none; background:#fff; border:1px solid #ececec;
  border-radius:14px; padding:26px 24px; box-shadow:0 2px 10px rgba(0,0,0,.04);
  transition:transform .12s, box-shadow .12s;}
.navcard:hover{transform:translateY(-3px); box-shadow:0 8px 20px rgba(0,0,0,.08);}
.navcard .ic{font-size:30px; margin-bottom:12px;}
.navcard h3{font-size:20px; color:var(--bleu); margin-bottom:6px;}
.navcard p{font-size:14.5px; color:#555;}
.navcard .go{display:inline-block; margin-top:12px; color:var(--vert); font-weight:700; font-size:14px;}

/* renards baladeurs */
.hero .renard-peek{position:absolute; right:4%; bottom:0; width:clamp(90px,12vw,140px);
  z-index:2; pointer-events:none; filter:drop-shadow(0 4px 8px rgba(0,0,0,.25));}

/* footer */
footer{position:relative; background:#111; color:#999; text-align:center; padding:40px 24px; font-size:14px; overflow:hidden;}
footer .renard-run{position:absolute; left:5%; bottom:8px; width:120px; opacity:.9;
  pointer-events:none;}

/* petit renard assis qui "se balade" dans un coin de section (titres) */
.renard-coin{position:absolute; width:clamp(56px,9vw,92px); z-index:3; pointer-events:none;
  filter:drop-shadow(0 3px 6px rgba(0,0,0,.2));}
.sec-head{position:relative;}
.sec-head .renard-coin{right:0; top:-18px;}

/* sur mobile : on garde les renards visibles, mais plus discrets */
@media(max-width:680px){
  footer .renard-run{width:84px; left:50%; transform:translateX(-50%); bottom:6px; opacity:.85;}
  footer{padding-bottom:64px;}
}
@media(max-width:560px){
  .hero .renard-peek{width:74px; right:8px; opacity:.95;}
  .sec-head .renard-coin{width:48px; top:-10px; right:-4px;}
}
footer .ft-brand{font-family:'Fredoka',sans-serif; color:#fff; font-size:20px; letter-spacing:1px; margin-bottom:8px;}
footer a{color:#bbb; text-decoration:none;}
footer a:hover{color:#fff;}
footer .ft-links{margin-top:10px; display:flex; gap:18px; justify-content:center; flex-wrap:wrap; font-size:13px;}

/* ===== Page LES RÈGLES (livret) — styles propres, isolés sous .rulebook ===== */
.rulebook{background:#e9eef0;}
.rulebook .page{
  max-width:820px; margin:24px auto; background:#fff;
  padding:40px 56px 48px; border-radius:8px;
  box-shadow:0 2px 16px rgba(0,0,0,.08);
}
.rulebook .page h1{font-family:'Fredoka','Arial Black',sans-serif; font-size:46px;
   letter-spacing:1px; color:var(--bleu); margin:0 0 4px; line-height:1.05;}
.rulebook .page h1 .sous{display:block; font-family:'Fraunces',serif; font-weight:600;
   font-size:18px; color:var(--vert-fonce); letter-spacing:0; margin-top:8px;}
.rulebook .page h2{font-family:'Fredoka','Arial Black',sans-serif; font-size:28px;
   color:#fff; background:var(--bleu); letter-spacing:.5px;
   padding:8px 16px; border-radius:6px; margin:44px 0 18px;}
.rulebook .page h2 .num{color:var(--jaune); margin-right:10px;}
.rulebook .page h3{font-size:19px; color:var(--bleu); margin:24px 0 6px;}
.rulebook .page p,.rulebook .page li{font-size:16px;}
.rulebook .page strong{color:var(--vert-fonce);}
.rulebook .page .lead{font-size:18px; color:#333;}
.rulebook .page hr{border:none; border-top:2px solid var(--gris); margin:40px 0;}
.rulebook .box{border-radius:8px; padding:14px 18px; margin:18px 0; font-size:15px;}
.rulebook .ex{background:#eaf3ea; border-left:6px solid var(--vert);}
.rulebook .ex b{color:var(--vert-fonce);}
.rulebook .astuce{background:#fff6e0; border-left:6px solid var(--orange);}
.rulebook .astuce b{color:#b35e00;}
.rulebook .attention{background:#fbe9ec; border-left:6px solid var(--rouge);}
.rulebook .attention b{color:var(--rouge);}
.rulebook .box .titre{display:block; font-weight:700; margin-bottom:4px; text-transform:uppercase;
   font-size:13px; letter-spacing:1px;}
.rulebook .apercu{display:flex; gap:16px; flex-wrap:wrap; margin:20px 0;}
.rulebook .stat{flex:1; min-width:140px; background:var(--gris); border-radius:8px;
   text-align:center; padding:16px 10px;}
.rulebook .stat .big{display:block; font-family:'Fredoka',sans-serif; font-size:30px; color:var(--bleu);}
.rulebook .stat .lab{font-size:13px; text-transform:uppercase; letter-spacing:1px; color:#555;}
.rulebook table{border-collapse:collapse; width:100%; margin:16px 0; font-size:15px;}
.rulebook th,.rulebook td{border:1px solid #ddd; padding:8px 12px; text-align:left;}
.rulebook th{background:var(--bleu); color:#fff; font-weight:600;}
.rulebook tr:nth-child(even){background:var(--gris);}
.rulebook ol.etapes{counter-reset:step; list-style:none; padding-left:0;}
.rulebook ol.etapes li{position:relative; padding:8px 0 8px 48px; margin-bottom:6px;}
.rulebook ol.etapes li::before{counter-increment:step; content:counter(step);
   position:absolute; left:0; top:6px; width:32px; height:32px;
   background:var(--vert); color:#fff; border-radius:50%;
   font-family:'Fredoka',sans-serif; font-size:18px;
   display:flex; align-items:center; justify-content:center;}
.rulebook .options-rb{display:flex; gap:18px; flex-wrap:wrap; margin:18px 0;}
.rulebook .opt-rb{flex:1; min-width:260px; border-radius:10px; overflow:hidden; border:2px solid #ddd;}
.rulebook .opt-rb .head{padding:10px 16px; color:#fff; font-family:'Fredoka',sans-serif;
   font-size:20px; letter-spacing:.5px;}
.rulebook .opt-rb.o1 .head{background:var(--orange);}
.rulebook .opt-rb.o2 .head{background:var(--vert);}
.rulebook .opt-rb .body{padding:14px 16px; font-size:15px;}
.rulebook .legende{font-size:13px; color:#666; text-align:center; margin-top:4px;}

/* carte exemple annotée (section 2 du livret) */
.rulebook .carte-demo{display:grid; grid-template-columns:auto 1fr; gap:32px; align-items:center;
   background:var(--gris); border-radius:12px; padding:26px 28px; margin:22px 0;}
.rulebook .carte-demo img{width:230px; max-width:46vw; border-radius:10px;
   box-shadow:0 6px 18px rgba(0,0,0,.18); display:block;}
.rulebook .carte-demo .annot{list-style:none; padding:0; margin:0;}
.rulebook .carte-demo .annot li{position:relative; padding:10px 0 10px 16px; border-left:3px solid var(--bleu);
   margin-bottom:10px; font-size:15px;}
.rulebook .carte-demo .annot li:last-child{margin-bottom:0;}
.rulebook .carte-demo .annot b{color:var(--bleu); display:block; font-family:'Fredoka',sans-serif;
   letter-spacing:.3px;}
@media(max-width:640px){
  .rulebook .carte-demo{grid-template-columns:1fr; gap:18px; justify-items:center; text-align:left;}
  .rulebook .carte-demo img{width:200px; max-width:70vw;}
}
/* carte illustrée à côté d'un texte (action / tactique) */
.rulebook .carte-illu{display:flex; gap:24px; align-items:center; margin:14px 0 8px;}
.rulebook .carte-illu img{width:170px; max-width:42vw; border-radius:9px;
   box-shadow:0 5px 14px rgba(0,0,0,.16); flex:0 0 auto;}
.rulebook .carte-illu .txt{flex:1;}
.rulebook .carte-illu .txt p{margin-top:0;}
@media(max-width:560px){
  .rulebook .carte-illu{flex-direction:column; gap:12px; align-items:flex-start;}
  .rulebook .carte-illu img{width:160px; max-width:60vw;}
}

/* ===== TABLETTE (≤ 780px) — ajustements de confort ===== */
@media(max-width:780px){
  section{padding:56px 0;}
  .hero-inner{padding:52px 0 72px;}
  .sec-head{margin-bottom:34px;}
  /* tableaux : on autorise un défilement horizontal si besoin, sans casser la page */
  .tbl{display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; white-space:normal;}
}

/* ===== MOBILE (≤ 560px) ===== */
@media(max-width:560px){
  .wrap{padding:0 16px;}
  section{padding:44px 0;}

  /* ruban */
  .brand{font-size:16px; letter-spacing:.5px; gap:8px;}
  .brand .logo-mini{height:34px;}

  /* hero */
  .hero-inner{padding:40px 0 56px;}
  .hero .crest{width:clamp(120px,40vw,160px);}
  .hero .pitch{font-size:15.5px;}
  .badges{gap:10px; margin-top:26px;}
  .badge{padding:8px 14px; font-size:13.5px;}
  .cta{margin-top:30px; width:100%; gap:10px;}
  .btn{width:100%; text-align:center; padding:14px 18px; font-size:15.5px;}

  /* en-tête de page interne */
  .page-title{padding:38px 0;}

  /* sections génériques */
  .sec-head{margin-bottom:28px;}
  .feature, .navcard, .skill{padding:22px 18px;}

  /* tableaux compacts */
  .tbl{font-size:13.5px;}
  .tbl th, .tbl td{padding:9px 11px;}

  /* compétences */
  .skill img{height:78px;}

  /* encart tir */
  .shot{margin-top:32px; gap:22px;}
  .shot .calc{padding:22px;}
  .vs{gap:10px;}
  .vs .team{padding:11px;}
  .vs .team .val{font-size:27px;}

  /* aide-mémoire */
  .recap{padding:28px 20px;}
  .recap h2{font-size:24px;}

  /* footer */
  footer{padding:32px 18px;}
  footer .ft-links{gap:14px;}

  /* ---- livret de règles ---- */
  .rulebook .page{padding:24px 18px 30px; margin:10px auto; border-radius:0;}
  .rulebook .page h1{font-size:32px;}
  .rulebook .page h1 .sous{font-size:16px;}
  .rulebook .page h2{font-size:21px; padding:7px 12px; margin:30px 0 14px;}
  .rulebook .page h3{font-size:17px;}
  .rulebook .page p, .rulebook .page li{font-size:15px;}
  .rulebook .page .lead{font-size:16px;}
  .rulebook th, .rulebook td{padding:7px 9px; font-size:13.5px;}
  .rulebook .options-rb{gap:12px;}
  .rulebook .opt-rb{min-width:100%;}
  .rulebook ol.etapes li{padding-left:42px;}
  .rulebook .box{padding:12px 14px;}
}

/* ===== RÈGLES v2 — pleine largeur + grandes parties en accordéon ===== */
.rules-full{background:#fff; padding:60px 0;}
/* typographie générale du livret, hors ancien .page */
.rulebook h3{font-size:19px; color:var(--bleu); margin:22px 0 6px;}
.rulebook p, .rulebook li{font-size:16px;}
.rulebook strong{color:var(--vert-fonce);}
.rules-full .lead{font-size:19px; color:#2a2a2a; max-width:840px;
  margin:0 auto 6px; text-align:center;}
.rules-full .apercu{max-width:840px; margin:24px auto 40px;}

.rulesec{border:1px solid #e1e6ea; border-radius:14px; margin-bottom:16px;
  overflow:hidden; background:#fff; box-shadow:0 2px 10px rgba(0,0,0,.05);}
.rulesec > summary{list-style:none; cursor:pointer; display:flex; align-items:center;
  gap:18px; padding:17px 24px; background:var(--bleu); color:#fff;
  transition:background .15s;}
.rulesec > summary::-webkit-details-marker{display:none;}
.rulesec > summary:hover{background:var(--bleu-fonce);}
.rulesec .num{flex:0 0 auto; width:44px; height:44px; border-radius:50%;
  background:rgba(255,255,255,.16); color:var(--jaune); font-family:'Fredoka',sans-serif;
  font-size:24px; display:flex; align-items:center; justify-content:center;}
.rulesec .t{flex:1; font-family:'Fredoka',sans-serif; font-size:23px; letter-spacing:.4px;}
.rulesec .chev{flex:0 0 auto; font-family:'Fredoka',sans-serif; font-size:30px;
  line-height:1; transition:transform .2s;}
.rulesec[open] .chev{transform:rotate(45deg);}
.rulesec .rs-body{padding:10px 30px 28px;}
.rulesec .rs-body > :first-child{margin-top:0;}

/* carte annotée avec flèches (section 2) — figure SVG centrée */
.carte-annot-wide{display:block; max-width:760px; margin:24px auto 8px;}
.carte-annot-wide svg{width:100%; height:auto; display:block;}
.carte-annot-wide .a-title{font-family:'Fredoka',sans-serif; fill:var(--bleu);
  font-size:18px; letter-spacing:.3px;}
.carte-annot-wide .a-sub{font-family:'Fraunces',serif; fill:#444; font-size:15px;}
.carte-annot-narrow{display:none;}
.carte-annot-narrow .ca-pic{position:relative; width:210px; max-width:64vw; margin:0 auto 18px;}
.carte-annot-narrow .ca-pic img{display:block; width:100%; margin:0;
  border-radius:10px; box-shadow:0 6px 18px rgba(0,0,0,.18);}
.carte-annot-narrow .pin{position:absolute; transform:translate(-50%,-50%);
  width:24px; height:24px; border-radius:50%; background:var(--bleu); color:#fff;
  border:2px solid #fff; box-shadow:0 1px 4px rgba(0,0,0,.4);
  font-family:'Fredoka',sans-serif; font-size:13px; line-height:20px; text-align:center;}
.carte-annot-narrow .pin.red{background:var(--rouge);}
.carte-annot-narrow .annot{list-style:none; padding:0; margin:0;}
.carte-annot-narrow .annot li{position:relative; padding:9px 0 9px 14px;
  border-left:3px solid var(--bleu); margin-bottom:9px; font-size:15px;}
.carte-annot-narrow .annot b{color:var(--bleu); display:block; font-family:'Fredoka',sans-serif;}

@media(max-width:760px){
  .rules-full{padding:40px 0;}
  .rulesec > summary{gap:13px; padding:14px 16px;}
  .rulesec .num{width:38px; height:38px; font-size:20px;}
  .rulesec .t{font-size:18.5px;}
  .rulesec .rs-body{padding:6px 16px 22px;}
  .carte-annot-wide{display:none;}
  .carte-annot-narrow{display:block;}
}