/* ==========================================================================
   Karaté Kyokushin St-Luc — feuille de style du site
   Remplace bootstrap.css, template.css, responsive.css et base-sizing.css
   ========================================================================== */

:root{
  --noir:#0f1114; --charbon:#181b21; --ardoise:#232830;
  --rouge:#c0272d; --rouge-clair:#e0393f;
  --papier:#f6f3ee; --papier-2:#ebe6dd;
  --or:#c8a961; --or-fonce:#a08340;
  --texte:#2a2d33; --texte-doux:#6b7078; --blanc-doux:#e8e5df;
  --bord:#e2ddd4;
  --mincho:"Shippori Mincho B1",Georgia,"Times New Roman",serif;
  --labo:"Oswald",Impact,sans-serif;
  --corps:"Inter",-apple-system,"Segoe UI",Roboto,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:120px}
body{font-family:var(--corps);color:var(--texte);background:var(--papier);
  -webkit-font-smoothing:antialiased;line-height:1.6}
img{max-width:100%;height:auto;display:block}
a{text-decoration:none;color:inherit}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}

/* ---------- barre supérieure ---------- */
/* Claire : la ceinture noire de l'en-tête se détache dessus. */
.topbar{background:var(--papier);color:#6b7078;font-size:12.5px;letter-spacing:.04em;border-bottom:1px solid #e1dbd0}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;height:38px;gap:20px}
.topbar a{font-family:var(--labo);font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  color:var(--noir);border-bottom:1px solid var(--rouge);padding-bottom:2px;transition:color .18s}
.topbar a:hover{color:var(--rouge)}
.topbar .topbar__tel{font-family:var(--corps);font-size:13px;letter-spacing:.02em;text-transform:none;
  color:var(--noir);font-weight:600;border-bottom:0}
.topbar .topbar__tel:hover{color:var(--rouge)}

/* ---------- en-tête : la ceinture noire ---------- */
/* Trame tissée en sergé, rangées de surpiqûres dorées sur la hauteur, deux coutures
   plus marquées aux bords. La barre reste collée en haut et se compacte au défilement. */
.entete{position:sticky;top:0;z-index:60;border-bottom:1px solid #2a2418;background-color:#111316;
  background-image:
    repeating-linear-gradient(0deg,rgba(200,169,97,.07) 0 1px,transparent 1px 11px),
    repeating-linear-gradient(45deg,rgba(255,255,255,.035) 0 1px,transparent 1px 4px),
    repeating-linear-gradient(-45deg,rgba(255,255,255,.025) 0 1px,transparent 1px 4px);
  box-shadow:0 2px 20px rgba(0,0,0,.35)}
.entete:before,.entete:after{content:"";position:absolute;left:0;right:0;height:1px;pointer-events:none;
  background:repeating-linear-gradient(90deg,var(--or) 0 7px,transparent 7px 12px);opacity:.42}
.entete:before{top:5px}
.entete:after{bottom:5px}
body{--h-entete:92px}
body.est-defile{--h-entete:66px}
.entete .wrap{display:flex;align-items:center;gap:26px;height:var(--h-entete);transition:height .25s ease}
.logo{display:flex;align-items:center;gap:13px;flex:0 0 auto}
.logo img{height:62px;width:auto;transition:height .25s ease}
body.est-defile .logo img{height:50px}
.logo .nom{font-family:var(--mincho);color:var(--papier);font-size:15px;line-height:1.15;font-weight:600}
.logo .nom small{display:block;font-family:var(--labo);font-weight:300;font-size:10.5px;
  letter-spacing:.22em;color:var(--or);margin-top:3px;text-transform:uppercase}

/* ---------- navigation ---------- */
.nav{margin-left:auto;display:flex;gap:16px;align-items:center;list-style:none}
.nav > li{position:relative}
.nav > li > a{display:block;font-family:var(--labo);font-weight:400;font-size:13.5px;letter-spacing:.1em;
  text-transform:uppercase;color:#c3c8cf;padding:34px 0;position:relative;white-space:nowrap;
  transition:color .2s,padding .25s}
body.est-defile .nav > li > a{padding:22px 0}
/* le trait rouge se noue de gauche à droite, comme une ceinture ; doré sur la page courante */
.nav > li > a:not(.btn-nav):after{content:"";position:absolute;left:0;right:0;bottom:24px;height:2px;
  background:var(--rouge);transform:scaleX(0);transform-origin:left;transition:transform .32s cubic-bezier(.22,.61,.36,1)}
body.est-defile .nav > li > a:not(.btn-nav):after{bottom:14px}
.nav > li > a:hover,.nav > li.actif > a{color:#fff}
.nav > li > a:hover:after,.nav > li.actif > a:after{transform:scaleX(1)}
.nav > li.actif > a:after{background:var(--or)}
.nav .btn-nav{background:var(--rouge);color:#fff!important;font-weight:500;font-size:12.5px;
  padding:12px 16px!important;border:1px solid transparent!important;border-radius:2px;transition:.18s}
.nav .btn-nav:hover{background:var(--rouge-clair)}
.nav .btn-nav--gris{background:transparent;border-color:#4a515b!important;color:var(--papier)!important}
.nav .btn-nav--gris:hover{background:transparent;border-color:var(--or)!important;color:var(--or)!important}
.nav .btn-nav:after{display:none}
/* Les deux boutons d'action se touchent presque : ils forment une paire. */
.nav > li.nav__btn + li.nav__btn{margin-left:-8px}
.nav__pied{display:none}

/* ---------- menu mobile ---------- */
/* « flex:0 0 44px » est indispensable : sans lui le bouton se fait comprimer par
   le conteneur flex de l'en-tete des que le bloc-logo s'elargit. */
.burger{display:none;margin-left:auto;flex:0 0 44px;background:none;border:1px solid #3d444e;
  border-radius:2px;width:44px;height:40px;cursor:pointer;position:relative;transition:border-color .2s}
.burger span{position:absolute;left:11px;right:11px;height:2px;background:#e8e5df;transition:transform .25s,opacity .2s,top .25s}
.burger span:nth-child(1){top:13px}.burger span:nth-child(2){top:19px}.burger span:nth-child(3){top:25px}
body.menu-ouvert .burger{border-color:var(--or)}
body.menu-ouvert .burger span:nth-child(1){top:19px;transform:rotate(45deg)}
body.menu-ouvert .burger span:nth-child(2){opacity:0}
body.menu-ouvert .burger span:nth-child(3){top:19px;transform:rotate(-45deg)}
body.menu-ouvert .entete{z-index:66}
body.menu-ouvert .logo,body.menu-ouvert .burger{position:relative;z-index:70}

/* ---------- boutons ---------- */
.btn{display:inline-block;font-family:var(--labo);font-weight:500;font-size:13.5px;letter-spacing:.14em;
  text-transform:uppercase;padding:16px 30px;border-radius:2px;transition:.18s;border:1px solid transparent;
  cursor:pointer}
.btn-rouge{background:var(--rouge);color:#fff}
.btn-rouge:hover{background:var(--rouge-clair);transform:translateY(-1px)}
.btn-vide{border-color:#4a515b;color:var(--papier)}
.btn-vide:hover{border-color:var(--papier);background:rgba(255,255,255,.06)}
.btn-gris{background:#3a4048;color:#fff}
.btn-gris:hover{background:var(--ardoise);transform:translateY(-1px)}
.btn-ligne{border-color:#d3ccc1;color:var(--texte);background:#fff}
.btn-ligne:hover{border-color:var(--rouge);color:var(--rouge)}

/* ---------- sous-en-tête des pages intérieures ---------- */
.souscoiffe{background:var(--charbon);position:relative;overflow:hidden;padding:64px 0 56px}
.souscoiffe:before{content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(15,17,20,.5),rgba(15,17,20,0))}
.souscoiffe .wrap{position:relative;z-index:2}
.souscoiffe .fil{font-family:var(--labo);font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--or);margin-bottom:14px;display:block}
.souscoiffe .fil a:hover{color:var(--papier)}
.souscoiffe h1{font-family:var(--mincho);font-weight:800;font-size:44px;line-height:1.12;color:#fff}
.souscoiffe p{color:#a9afb8;font-size:16.5px;font-weight:300;margin-top:12px;max-width:64ch}
/* « width:auto » est indispensable : l'attribut width= de la balise agit comme un
   width fixe et deformerait l'image, puisque la hauteur est donnee en pourcentage. */
.souscoiffe .kanji{position:absolute;right:-14px;top:50%;transform:translateY(-50%);height:190%;width:auto;
  opacity:.06;filter:brightness(0) invert(1);pointer-events:none}

/* ---------- sections ---------- */
.section{padding:76px 0}
.section.serre{padding:52px 0}
.section.claire{background:var(--papier-2)}
.section.sombre{background:var(--charbon);color:var(--blanc-doux)}
.tete{text-align:center;margin-bottom:48px}
.tete .sur{display:block;font-family:var(--labo);font-weight:300;font-size:11.5px;letter-spacing:.28em;
  text-transform:uppercase;color:var(--rouge);margin-bottom:14px}
.tete h2{font-family:var(--mincho);font-weight:800;font-size:38px;line-height:1.18;color:var(--noir)}
.section.sombre .tete h2{color:#fff}
.section.sombre .tete .sur{color:var(--or)}
.tete p{color:var(--texte-doux);max-width:64ch;margin:16px auto 0;font-size:16.5px;font-weight:300}
.trait{width:46px;height:3px;background:var(--rouge);margin:20px auto 0}

/* ---------- corps de texte ---------- */
.prose{color:#454a51;font-size:16.5px;line-height:1.82;font-weight:300}
.prose p{margin-bottom:16px}
.prose h3{font-family:var(--mincho);font-weight:600;font-size:24px;color:var(--noir);margin:34px 0 12px}
.prose strong{font-weight:600;color:var(--texte)}
.prose ul{list-style:none;margin:8px 0 20px}
/* Les listes numerotees portent leur numero par compteur CSS. Sans cette regle,
   le navigateur ajoute sa propre numerotation en plus de la pastille rouge. */
.prose ol{list-style:none;counter-reset:pas;margin:8px 0 20px}
.prose ol li{padding-left:34px;counter-increment:pas}
.prose ol li:before{content:counter(pas) ".";top:0;left:0;width:auto;height:auto;
  border-radius:0;background:none;font-family:var(--labo);font-weight:500;font-size:14px;
  color:var(--rouge);line-height:inherit}
.prose li{position:relative;padding-left:26px;margin-bottom:9px}
.prose li:before{content:"";position:absolute;left:0;top:10px;width:8px;height:8px;border-radius:50%;
  background:var(--rouge)}
.prose a{color:var(--rouge);border-bottom:1px solid rgba(192,39,45,.32)}
.prose a:hover{border-bottom-color:var(--rouge)}

/* ---------- cartes de cours (accueil et page Cours) ---------- */
.cours{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.carte{background:#fff;border:1px solid var(--bord);overflow:hidden;transition:.2s;display:flex;
  flex-direction:column}
.carte:hover{border-color:var(--rouge);transform:translateY(-4px);box-shadow:0 16px 34px rgba(15,17,20,.13)}
.carte__vue{position:relative;overflow:hidden;background:var(--ardoise)}
.carte__vue img{height:210px;width:100%;object-fit:cover;transition:.5s;filter:grayscale(.28)}
.carte:hover .carte__vue img{transform:scale(1.05);filter:grayscale(0)}
.carte__age{position:absolute;left:0;bottom:0;background:var(--rouge);color:#fff;font-family:var(--labo);
  font-weight:500;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;padding:8px 16px}
.carte__c{padding:24px 24px 26px;display:flex;flex-direction:column;flex:1}
.carte__c h3{font-family:var(--mincho);font-weight:600;font-size:23px;color:var(--noir);margin-bottom:9px}
.carte__c p{color:var(--texte-doux);font-size:14.5px;line-height:1.65;font-weight:300;flex:1}
.carte__pied{margin-top:18px;padding-top:15px;border-top:1px solid #eee7dc;display:flex;
  justify-content:space-between;align-items:baseline;gap:10px}
.carte__prix{font-family:var(--labo);font-weight:500;font-size:19px;color:var(--noir)}
.carte__prix small{font-family:var(--corps);font-weight:400;font-size:12px;color:var(--texte-doux)}
.carte__fl{font-family:var(--labo);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--rouge)}
@media(max-width:980px){.cours{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.cours{grid-template-columns:1fr}}

/* ---------- barre de sections (pages longues) ---------- */
/* La barre colle juste sous l'en-tête, dont la hauteur varie (compact au défilement, réduit sur petit écran). */
.sousnav{background:var(--papier-2);border-bottom:1px solid var(--bord);position:sticky;top:var(--h-entete,92px);z-index:40;
  transition:top .25s ease}
.sousnav .wrap{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.sousnav .wrap::-webkit-scrollbar{display:none}
.sousnav a{flex:0 0 auto;font-family:var(--labo);font-weight:400;font-size:12.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--texte-doux);padding:16px 18px;white-space:nowrap;
  border-bottom:2px solid transparent;transition:.16s}
.sousnav a:hover{color:var(--noir);background:rgba(0,0,0,.03)}
.sousnav a.on{color:var(--rouge);border-bottom-color:var(--rouge)}

@media(max-width:767px){.sousnav a{padding:13px 14px;font-size:11.5px}}

/* ==========================================================================
   Compatibilité — pages dont le contenu d'origine utilise la grille Bootstrap.
   Portée limitée à .legacy : n'affecte aucune page reconstruite entièrement.
   ========================================================================== */
.legacy .row{display:flex;flex-wrap:wrap;margin-left:-14px;margin-right:-14px}
.legacy [class*="col-sm-"],.legacy [class*="col-md-"],.legacy [class*="col-lg-"]{
  padding-left:14px;padding-right:14px;width:100%}
.legacy .col-lg-1{width:8.333%}.legacy .col-lg-2{width:16.666%}.legacy .col-lg-3{width:25%}
.legacy .col-lg-4{width:33.333%}.legacy .col-lg-5{width:41.666%}.legacy .col-lg-6{width:50%}
.legacy .col-lg-7{width:58.333%}.legacy .col-lg-8{width:66.666%}.legacy .col-lg-9{width:75%}
.legacy .col-lg-10{width:83.333%}.legacy .col-lg-12{width:100%}
.legacy img{border-radius:4px}
.legacy .img-responsive,.legacy .img-fluid{max-width:100%;height:auto}
.legacy .text-center{text-align:center}
.legacy h2,.legacy h3,.legacy h4{font-family:var(--mincho);color:var(--noir);line-height:1.25;
  margin:26px 0 12px}
.legacy h2{font-size:30px;font-weight:700}
.legacy h3{font-size:24px;font-weight:600}
.legacy h4{font-size:19px;font-weight:600}
.legacy p{margin-bottom:15px}
.legacy ul{list-style:none;margin:8px 0 18px}
.legacy li{position:relative;padding-left:26px;margin-bottom:8px}
.legacy li:before{content:"";position:absolute;left:0;top:10px;width:8px;height:8px;
  border-radius:50%;background:var(--rouge)}
.legacy a{color:var(--rouge)}
.legacy a:hover{border-bottom:1px solid var(--rouge)}
.legacy .hg_section{padding:34px 0}
.legacy table{width:100%;border-collapse:collapse;margin:18px 0}
.legacy td,.legacy th{border:1px solid var(--bord);padding:10px 12px;text-align:left}
@media(max-width:900px){
  .legacy [class*="col-lg-"]{width:100%!important}
}

/* ---------- fenêtre d'essai gratuit ---------- */
.modale{position:fixed;inset:0;z-index:200;display:none;align-items:flex-start;justify-content:center;
  padding:28px 18px;overflow-y:auto;background:rgba(15,17,20,.72)}
.modale.ouverte{display:flex}
.modale__boite{background:#fff;width:100%;max-width:620px;border-radius:4px;position:relative;
  box-shadow:0 24px 60px rgba(0,0,0,.45);animation:modaleIn .22s ease-out}
@keyframes modaleIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.modale__tete{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;
  padding:24px 26px 18px;border-bottom:1px solid var(--bord)}
.modale__tete h2{font-family:var(--mincho);font-weight:700;font-size:24px;color:var(--noir);
  line-height:1.25;margin-bottom:5px}
.modale__tete p{color:var(--texte-doux);font-size:14.5px;font-weight:300;line-height:1.55}
.modale__sous p{margin:0 0 9px}
.modale__sous p:last-child{margin-bottom:0}
.modale__fermer{flex:0 0 auto;width:38px;height:38px;border:1px solid var(--bord);background:#fff;
  border-radius:3px;cursor:pointer;font-size:22px;line-height:1;color:var(--texte-doux);transition:.15s}
.modale__fermer:hover{border-color:var(--rouge);color:var(--rouge)}
.modale__corps{padding:8px 14px 14px;min-height:420px}
.modale__corps iframe{width:100%;border:0;display:block}
.modale__attente{padding:60px 20px;text-align:center;color:var(--texte-doux);font-size:14.5px}
body.modale-ouverte{overflow:hidden}
@media(max-width:620px){
  .modale{padding:0}
  .modale__boite{max-width:none;min-height:100%;border-radius:0}
}

/* ---------- consentement aux témoins ---------- */
.cons{position:fixed;left:0;right:0;bottom:0;z-index:300;background:var(--charbon);
  border-top:3px solid var(--rouge);box-shadow:0 -8px 34px rgba(0,0,0,.4)}
.cons[hidden]{display:none}
.cons__boite{max-width:1180px;margin:0 auto;padding:22px 24px;display:grid;
  grid-template-columns:1fr auto;gap:28px;align-items:center}
.cons__txt h2{font-family:var(--mincho);font-weight:700;font-size:19px;color:#fff;margin-bottom:6px}
.cons__txt p{color:#a9afb8;font-size:14.5px;line-height:1.65;font-weight:300;max-width:78ch}
.cons__txt a{color:var(--rouge-clair);border-bottom:1px solid rgba(224,57,63,.4)}
.cons__actions{display:flex;gap:9px;flex-wrap:wrap}
.cons__btn{font-family:var(--labo);font-weight:500;font-size:12.5px;letter-spacing:.12em;
  text-transform:uppercase;padding:13px 20px;border-radius:2px;cursor:pointer;transition:.16s;
  white-space:nowrap;border:1px solid transparent}
.cons__btn--oui{background:var(--rouge);color:#fff}
.cons__btn--oui:hover{background:var(--rouge-clair)}
.cons__btn--vide{background:transparent;border-color:#4a515b;color:var(--blanc-doux)}
.cons__btn--vide:hover{border-color:var(--papier);background:rgba(255,255,255,.06)}

.cons-panneau{position:fixed;inset:0;z-index:310;background:rgba(15,17,20,.74);
  display:flex;align-items:flex-start;justify-content:center;padding:28px 18px;overflow-y:auto}
.cons-panneau[hidden]{display:none}
.cons-panneau__boite{background:#fff;width:100%;max-width:600px;border-radius:4px;
  box-shadow:0 24px 60px rgba(0,0,0,.45)}
.cons-panneau__tete{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:22px 26px 16px;border-bottom:1px solid var(--bord)}
.cons-panneau__tete h2{font-family:var(--mincho);font-weight:700;font-size:22px;color:var(--noir)}
.cons-panneau__x{width:36px;height:36px;border:1px solid var(--bord);background:#fff;border-radius:3px;
  cursor:pointer;font-size:21px;line-height:1;color:var(--texte-doux);transition:.15s}
.cons-panneau__x:hover{border-color:var(--rouge);color:var(--rouge)}
.cons-panneau__corps{padding:6px 26px 10px}
.cons-panneau__pied{display:flex;justify-content:flex-end;gap:9px;flex-wrap:wrap;
  padding:18px 26px 22px;border-top:1px solid var(--bord)}
.cons-panneau__pied .cons__btn--vide{border-color:#d3ccc1;color:var(--texte)}
.cons-panneau__pied .cons__btn--vide:hover{border-color:var(--rouge);color:var(--rouge);background:none}
.cons-cat{padding:20px 0;border-bottom:1px solid #eee7dc}
.cons-cat:last-child{border-bottom:0}
.cons-cat__tete{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:7px}
.cons-cat h3{font-family:var(--corps);font-weight:600;font-size:16.5px;color:var(--noir)}
.cons-cat p{color:var(--texte-doux);font-size:14.5px;line-height:1.6;font-weight:300}
.cons-cat__fixe{font-family:var(--labo);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:#1e7a45;background:#e4f4ea;border:1px solid #a8dcbd;padding:4px 10px;border-radius:20px;
  white-space:nowrap}
.cons-cat__svc{display:block;margin-top:6px;font-size:13px;color:#6b7078;font-style:italic}
.cons-inter{position:relative;flex:0 0 auto;cursor:pointer}
.cons-inter input{position:absolute;opacity:0;width:0;height:0}
.cons-inter__piste{display:block;width:46px;height:26px;background:#cfc8bc;border-radius:26px;
  transition:.2s;position:relative}
.cons-inter__piste:after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;
  background:#fff;border-radius:50%;transition:.2s;box-shadow:0 1px 3px rgba(0,0,0,.25)}
.cons-inter input:checked + .cons-inter__piste{background:var(--rouge)}
.cons-inter input:checked + .cons-inter__piste:after{transform:translateX(20px)}
.cons-inter input:focus-visible + .cons-inter__piste{outline:2px solid var(--rouge);outline-offset:2px}
body.cons-ouvert{overflow:hidden}
@media(max-width:820px){
  .cons__boite{grid-template-columns:1fr;gap:16px;padding:18px 20px}
  .cons__actions .cons__btn{flex:1 1 auto;text-align:center}
}

/* ---------- pied de page ---------- */
.pied{background:var(--noir);color:#868d96;padding:58px 0 26px;font-size:14px;font-weight:300}
.pied .cols{display:grid;grid-template-columns:1.35fr 1fr 1fr 1fr;gap:40px;padding-bottom:34px;
  border-bottom:1px solid #22262d}
.pied h5{font-family:var(--labo);font-weight:400;font-size:12.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--or);margin-bottom:18px}
.pied .logo-pied{height:96px;width:auto;margin-bottom:18px}
.pied .pied-adr{line-height:1.75;margin-bottom:14px}
.pied .pied-tel{color:var(--papier);font-weight:500;font-size:15.5px}
.pied .pied-tel:hover{color:var(--rouge-clair)}
.pied .pied-soc{display:flex;gap:10px;flex-wrap:wrap}
.pied .pied-soc a{border:1px solid #2b3038;padding:7px 15px;font-family:var(--labo);font-size:11.5px;
  letter-spacing:.12em;text-transform:uppercase;transition:.16s}
.pied .pied-soc a:hover{border-color:var(--rouge);color:var(--papier)}
.pied ul{list-style:none}
.pied li{margin-bottom:10px;line-height:1.5}
.pied li a:hover{color:var(--papier)}
.pied li span{display:inline-block;font-family:var(--labo);font-size:9.5px;letter-spacing:.1em;
  border:1px solid #363c45;border-radius:2px;padding:1px 5px;margin-left:6px;color:#6e757e;
  vertical-align:1px}
.pied .pied-cta{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
  padding:26px 0;border-bottom:1px solid #22262d}
.pied .pied-cta span{color:var(--blanc-doux);font-size:16px;font-weight:300}
.pied .pied-cta .actions{display:flex;gap:8px;flex-wrap:wrap}
.pied .bas{padding-top:22px;display:flex;justify-content:space-between;gap:16px;font-size:12.5px;
  color:#8a9099}
.pied .bas-liens{display:flex;gap:20px;flex-wrap:wrap}
.pied .bas-liens a{border-bottom:1px solid #2b3038}
.pied .bas-liens a:hover{color:var(--papier);border-bottom-color:#6c737d}
@media(max-width:640px){.pied .bas{flex-direction:column;gap:10px}}

/* ---------- responsive ---------- */
/* Sous 1200 px, le menu horizontal ne tient plus : panneau plein écran, clair, qui
   s'ouvre sous la ceinture (le haut est calculé par le script du menu). */
@media(max-width:1200px){
  .burger{display:block}
  .nav{position:fixed;top:var(--haut-entete,72px);right:0;bottom:0;left:0;width:100%;background:var(--papier);
    flex-direction:column;align-items:stretch;gap:0;padding:26px 28px 110px;overflow-y:auto;
    transform:translateX(100%);transition:transform .28s ease;z-index:65}
  .nav:before{content:"";position:absolute;right:-30px;top:10px;width:60%;height:80%;
    background:url('../images/kyokushin-kanjii.png') right top/contain no-repeat;opacity:.07;pointer-events:none}
  body.menu-ouvert .nav{transform:translateX(0)}
  body.menu-ouvert{overflow:hidden}
  /* même police que le bureau, plus grande ; coutures rouges entre les liens */
  .nav > li:not(.nav__pied) > a{font-size:19px;letter-spacing:.14em;padding:13px 0!important;
    color:var(--noir)!important;border-bottom:0!important;white-space:normal;
    background:linear-gradient(90deg,rgba(192,39,45,.28) 0 7px,transparent 7px 12px) bottom left/12px 1px repeat-x;
    opacity:0;transform:translateX(18px);transition:opacity .35s,transform .35s,color .2s}
  body.menu-ouvert .nav > li:not(.nav__pied) > a{opacity:1;transform:none}
  .nav > li:nth-child(1) > a{transition-delay:.05s}.nav > li:nth-child(2) > a{transition-delay:.1s}
  .nav > li:nth-child(3) > a{transition-delay:.15s}.nav > li:nth-child(4) > a{transition-delay:.2s}
  .nav > li:nth-child(5) > a{transition-delay:.25s}.nav > li:nth-child(6) > a{transition-delay:.3s}
  .nav > li:nth-child(7) > a{transition-delay:.35s}
  /* pas de trait animé dans le panneau : la page courante est simplement en rouge */
  .nav > li > a:not(.btn-nav):after{display:none}
  .nav > li:not(.nav__pied) > a:hover,.nav > li.actif:not(.nav__pied) > a{color:var(--rouge)!important}
  .nav > li.nav__btn{display:none}
  .nav > li.nav__btn + li.nav__btn{margin-left:0}
  /* les boutons de la barre de bureau, fixés au bas du panneau */
  .nav > li.nav__pied{display:flex;gap:10px;position:absolute;left:0;right:0;bottom:0;padding:16px 28px 26px;
    background:linear-gradient(180deg,rgba(246,243,238,0),var(--papier) 30%)}
  .nav > li.nav__pied > a.btn-nav{flex:1 1 0;display:block;margin:0;text-align:center;padding:14px 12px!important;
    opacity:1;transform:none;transition:.18s}
  .nav > li.nav__pied > a.btn-nav--gris{background:#3a4048;border-color:#3a4048!important;color:#fff!important}
  .nav > li.nav__pied > a.btn-nav--gris:hover{background:var(--noir);border-color:var(--noir)!important}
}
/* Sur petit ecran, le bloc-logo doit laisser au bouton du menu ses 44 px pleins :
   a 375 px de large il ne reste que 327 px utiles une fois les marges deduites. */
@media(max-width:520px){
  .entete .wrap{gap:14px}
  .logo{gap:10px}
  .logo img{height:50px}
  .logo .nom{font-size:14px}
  body,body.est-defile{--h-entete:72px}
  .logo .nom small{font-size:9.5px}
}
@media(max-width:767px){
  .souscoiffe{padding:46px 0 40px}
  .souscoiffe h1{font-size:31px}
  .tete h2{font-size:28px}
  .section{padding:52px 0}
  .pied .cols{grid-template-columns:1fr 1fr}
  .pied .pied-cta{flex-direction:column;align-items:flex-start}
  .topbar .wrap{font-size:11.5px;gap:10px}
}
@media(max-width:520px){
  .pied .cols{grid-template-columns:1fr}
  .topbar .wrap span:first-child{display:none}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* Zones tactiles : sur un ecran sans souris, les liens de listes gagnent de la
   hauteur pour approcher les 44 px recommandes, sans changer l'aspect au bureau. */
@media(hover:none){
  .pied li{margin-bottom:4px}
  .pied li a{display:inline-block;padding:7px 0}
  .pied .pied-soc a{display:inline-block;padding:8px 14px}
  .sousnav a{padding-top:14px;padding-bottom:14px}
  .topbar a{padding-top:6px;padding-bottom:6px}
}

/* Tableaux sur petit ecran : plutot que de pousser toute la page vers la droite,
   ils defilent horizontalement dans leur propre cadre. Sans cette regle, les
   tableaux de categories et de fournisseurs elargissaient le document entier. */
@media(max-width:700px){
  table{display:block;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
  /* On ne force pas « nowrap » : les tableaux aux cellules descriptives, comme
     celui des fournisseurs de la politique, doivent continuer de se replier.
     Une largeur minimale garde les colonnes lisibles quand elles defilent. */
  table tbody{display:table;width:100%;min-width:340px}
}

/* ---------- lien d'évitement (clavier et lecteurs d'écran) ---------- */
.saut{position:absolute;left:-999px;top:10px;z-index:400;background:var(--rouge);color:#fff;
  font-family:var(--labo);font-size:13px;letter-spacing:.12em;text-transform:uppercase;padding:12px 18px;
  border-radius:2px}
.saut:focus{left:10px;outline:2px solid #fff;outline-offset:2px}

/* ---------- contenu tiers chargé sur demande (Facebook, Google Maps) ---------- */
/* Rien n'est demandé à Facebook ni à Google tant que la personne n'a pas cliqué :
   c'est ce que promet le bandeau de consentement. */
.tiers{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  gap:14px;padding:36px 26px;background:var(--papier-2);color:var(--texte);height:100%;min-height:100%}
.tiers p{font-size:14.5px;color:var(--texte-doux);line-height:1.6;max-width:44ch;margin:0}
.tiers .lien{font-size:13.5px;color:var(--rouge);border-bottom:1px solid rgba(192,39,45,.3)}

/* ---------- foire aux questions ---------- */
.faq-bloc{max-width:820px;margin:0 auto 54px}
.faq-bloc h2{font-family:var(--mincho);font-weight:700;font-size:28px;color:var(--noir);margin:0 0 18px;
  padding-bottom:12px;border-bottom:2px solid var(--rouge)}
.faq{border:1px solid var(--bord);background:#fff;margin-bottom:10px}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;
  gap:16px;padding:18px 22px;font-weight:600;font-size:16.5px;color:var(--noir);line-height:1.4}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:"+";flex:0 0 auto;font-family:var(--labo);font-weight:300;font-size:26px;
  color:var(--rouge);line-height:1;transition:transform .2s}
.faq[open] summary:after{transform:rotate(45deg)}
.faq summary:hover{background:var(--papier)}
.faq summary:focus-visible{outline:2px solid var(--rouge);outline-offset:-2px}
.faq__r{padding:0 22px 20px;color:#454a51;font-size:15.5px;line-height:1.75;font-weight:300}
.faq__r p{margin:0 0 10px}
.faq__r p:last-child{margin-bottom:0}
.faq__r ul{list-style:none;margin:6px 0 12px}
.faq__r li{position:relative;padding-left:22px;margin-bottom:6px}
.faq__r li:before{content:"";position:absolute;left:0;top:10px;width:7px;height:7px;border-radius:50%;
  background:var(--rouge)}
.faq__r a{color:var(--rouge);border-bottom:1px solid rgba(192,39,45,.32)}
.faq__r a.btn{color:#fff;border:0;margin-top:6px}
.faq__r .tarif{display:grid;grid-template-columns:1fr auto;gap:6px 18px;margin:10px 0 14px;max-width:440px}
.faq__r .tarif b{font-family:var(--labo);font-weight:500;color:var(--noir);white-space:nowrap}
.faq__r address{font-style:normal;line-height:1.7}
.faq-fin{text-align:center;max-width:640px;margin:10px auto 0}
.faq-fin h2{font-family:var(--mincho);font-weight:800;font-size:32px;color:var(--noir);margin-bottom:14px}
.faq-fin p{color:var(--texte-doux);font-size:16.5px;font-weight:300;line-height:1.7;margin-bottom:12px}
.faq-fin .points{font-family:var(--labo);font-size:12px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--rouge);margin:18px 0 22px}
@media(max-width:640px){.faq summary{padding:15px 16px;font-size:15.5px}.faq__r{padding:0 16px 16px}}

/* ---------- note « événement passé » (pages d'archives) ---------- */
.passe-note{max-width:920px;margin:28px auto -34px;background:#fff8e6;border:1px solid #f0d48a;
  border-left:4px solid #d9a92a;padding:14px 18px;font-size:15px;line-height:1.6;color:#3d3010}
.passe-note strong{color:#3d3010}
.passe-note a{color:var(--rouge);border-bottom:1px solid rgba(192,39,45,.3)}

/* ---------- bandeau de chiffres (accueil et pages d'atterrissage) ---------- */
.chiffres{background:var(--rouge);color:#fff}
.chiffres .wrap{padding:34px 24px 38px}
.chiffres__titre{font-family:var(--labo);font-weight:400;font-size:12px;letter-spacing:.2em;
  text-transform:uppercase;text-align:center;color:rgba(255,255,255,.82);margin:0 0 28px}
.chiffres__grille{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.chiffre{text-align:center;padding:6px 14px;position:relative}
.chiffre+.chiffre:before{content:"";position:absolute;left:0;top:6%;height:88%;width:1px;
  background:rgba(255,255,255,.22)}
.chiffre b{display:block;font-family:var(--mincho);font-weight:800;font-size:42px;line-height:1}
/* Le « + » et le « près de » restent des nuances : plus petits et moins appuyés
   que le nombre lui-même, pour ne pas en casser la lecture. */
.chiffre b sup{font-size:.46em;vertical-align:.62em;font-weight:700;margin-left:2px;
  color:rgba(255,255,255,.72)}
.chiffre b i{font-family:var(--labo);font-style:normal;font-weight:300;font-size:15px;
  letter-spacing:.03em;vertical-align:.3em;margin-right:2px;color:rgba(255,255,255,.78)}
/* Ces libellés sont des phrases, pas des étiquettes : les capitales et
   l'interlettrage large du reste du site les rendraient illisibles. */
.chiffre span{display:block;font-family:var(--labo);font-weight:300;font-size:13px;
  letter-spacing:.02em;margin-top:12px;color:rgba(255,255,255,.9);line-height:1.5}
@media(max-width:860px){
  .chiffres__grille{grid-template-columns:1fr 1fr;gap:30px 18px}
  .chiffre+.chiffre:before{display:none}
}

/* ---------- pages d'atterrissage (campagnes publicitaires) ---------- */
/* Une seule action possible : le formulaire d'essai. Pas de menu, un téléphone, un pied réduit. */
/* même ceinture noire que l'en-tête principal */
.atter-entete{position:sticky;top:0;z-index:60;border-bottom:1px solid #2a2418;background-color:#111316;
  background-image:
    repeating-linear-gradient(0deg,rgba(200,169,97,.07) 0 1px,transparent 1px 11px),
    repeating-linear-gradient(45deg,rgba(255,255,255,.035) 0 1px,transparent 1px 4px),
    repeating-linear-gradient(-45deg,rgba(255,255,255,.025) 0 1px,transparent 1px 4px);
  box-shadow:0 2px 20px rgba(0,0,0,.35)}
.atter-entete:before,.atter-entete:after{content:"";position:absolute;left:0;right:0;height:1px;pointer-events:none;
  background:repeating-linear-gradient(90deg,var(--or) 0 7px,transparent 7px 12px);opacity:.42}
.atter-entete:before{top:5px}
.atter-entete:after{bottom:5px}
.atter-entete .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;height:78px}
.atter-entete .logo img{height:58px}
.atter-tel{text-align:right;font-family:var(--mincho);font-weight:700;font-size:19px;color:var(--papier);line-height:1.15}
.atter-tel span{display:block;font-family:var(--labo);font-weight:400;font-size:10.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--rouge);margin-bottom:2px}
.atter-tel:hover{color:var(--or)}
.atter-hero{background:var(--noir);color:#fff;position:relative;overflow:hidden}
.atter-hero__fond{position:absolute;inset:0;background-position:center 35%;background-size:cover;
  filter:grayscale(.5) contrast(1.05);opacity:.6}
.atter-hero__voile{position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(15,17,20,.96) 0%,rgba(15,17,20,.88) 45%,rgba(15,17,20,.5) 100%)}
/* Le formulaire est haut : le texte s'aligne en haut pour que le titre soit visible sans défiler. */
.atter-hero__grille{position:relative;z-index:2;display:grid;grid-template-columns:1.15fr .85fr;gap:54px;
  align-items:start;padding-top:56px;padding-bottom:64px}
.atter-hero__txt{padding-top:34px}
.atter-hero h1{font-family:var(--mincho);font-weight:800;font-size:46px;line-height:1.12;letter-spacing:-.01em;
  margin-bottom:18px}
.atter-hero h1 em{font-style:normal;color:var(--rouge-clair)}
.atter-hero__sous{color:#b9bec6;font-size:17px;line-height:1.7;font-weight:300;max-width:52ch;margin-bottom:24px}
.atter-preuves{list-style:none;display:flex;flex-wrap:wrap;gap:10px 22px;margin-bottom:30px}
.atter-preuves li{position:relative;padding-left:26px;font-size:14.5px;color:var(--papier)}
.atter-preuves li:before{content:"";position:absolute;left:0;top:3px;width:16px;height:16px;border-radius:50%;
  background:var(--rouge)}
.atter-preuves li:after{content:"";position:absolute;left:6px;top:6px;width:4px;height:8px;border:solid #fff;
  border-width:0 2px 2px 0;transform:rotate(45deg)}
.atter-hero__cta{display:none}
.atter-form{background:#fff;color:var(--texte);border-radius:4px;padding:26px 24px 20px;
  box-shadow:0 24px 60px rgba(0,0,0,.45)}
.atter-form h2{font-family:var(--mincho);font-weight:700;font-size:23px;color:var(--noir);line-height:1.25;
  margin-bottom:6px}
.atter-form > p{color:var(--texte-doux);font-size:14.5px;font-weight:300;line-height:1.55;margin-bottom:10px}
.atter-form__cadre{min-height:380px}
.atter-form__cadre iframe{width:100%;border:0;display:block}
.atter-form__note{font-size:12.5px;color:#8a9099;margin-top:8px;line-height:1.5}
.atter-form__note a{color:var(--rouge)}
.atter-cartes{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.atter-carte{background:#fff;border:1px solid var(--bord);overflow:hidden}
.atter-carte img{height:200px;width:100%;object-fit:cover}
.atter-carte div{padding:22px 24px 26px}
.atter-carte h3{font-family:var(--mincho);font-weight:600;font-size:21px;color:var(--noir);margin-bottom:8px}
.atter-carte p{color:var(--texte-doux);font-size:14.5px;line-height:1.65;font-weight:300}
.etapes{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;counter-reset:etape}
.etape{background:#fff;border:1px solid var(--bord);padding:28px 26px;counter-increment:etape}
.etape:before{content:counter(etape);display:block;width:44px;height:44px;border-radius:50%;background:var(--rouge);
  color:#fff;font-family:var(--mincho);font-weight:800;font-size:20px;line-height:44px;text-align:center;
  margin-bottom:16px}
.etape h3{font-family:var(--mincho);font-weight:600;font-size:20px;color:var(--noir);margin-bottom:8px}
.etape p{color:var(--texte-doux);font-size:14.5px;line-height:1.65;font-weight:300}
.atter-info{display:grid;grid-template-columns:1.2fr .8fr;gap:26px}
.atter-info > div{background:#fff;border:1px solid var(--bord);padding:28px 30px}
.atter-info .et{display:block;font-family:var(--labo);font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--rouge);margin-bottom:8px}
.atter-info h3{font-family:var(--mincho);font-weight:600;font-size:21px;color:var(--noir);margin-bottom:14px}
.horaire-liste{list-style:none}
.horaire-liste li{display:grid;grid-template-columns:minmax(150px,auto) 1fr;gap:2px 16px;padding:10px 0;
  border-bottom:1px solid #eee7dc;font-size:15px}
.horaire-liste li:last-child{border-bottom:0}
.horaire-liste b{font-family:var(--labo);font-weight:500;color:var(--noir);letter-spacing:.02em}
.horaire-liste span{color:var(--texte)}
.horaire-liste small{grid-column:1/-1;color:var(--texte-doux);font-size:13px;font-weight:300}
.atter-prix{font-family:var(--mincho);font-weight:800;font-size:40px;color:var(--noir);line-height:1;margin:6px 0 2px}
.atter-prix small{font-family:var(--corps);font-weight:400;font-size:14px;color:var(--texte-doux)}
.atter-prix-note{color:var(--texte-doux);font-size:14px;font-weight:300;line-height:1.6;margin-top:10px}
.atter-info .lien{color:var(--rouge);border-bottom:1px solid rgba(192,39,45,.3);font-size:14px}
.shihan{display:grid;grid-template-columns:auto 1fr;gap:36px;align-items:center;max-width:900px;margin:0 auto}
.shihan img{width:170px;height:170px;border-radius:50%;object-fit:cover;border:4px solid var(--or)}
.shihan h3{font-family:var(--mincho);font-weight:700;font-size:26px;color:#fff;margin-bottom:4px}
.shihan .grade{display:block;font-family:var(--labo);font-size:12px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--or);margin-bottom:14px}
.shihan p{color:#a9afb8;font-size:16px;line-height:1.75;font-weight:300}
.atter-fin{text-align:center;max-width:640px;margin:0 auto}
.atter-fin h2{font-family:var(--mincho);font-weight:800;font-size:32px;color:var(--noir);margin-bottom:12px}
.atter-fin p{color:var(--texte-doux);font-size:16.5px;font-weight:300;line-height:1.7;margin-bottom:18px}
.atter-fin address{font-style:normal;color:var(--noir);font-weight:500;line-height:1.7;margin-bottom:18px}
.atter-fin .actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.atter-pied{padding:26px 0}
.atter-pied .bas{padding-top:0}
.atter-colle{display:none}
@media(max-width:980px){
  .atter-hero__grille{grid-template-columns:1fr;gap:34px;padding-top:44px;padding-bottom:44px}
  .atter-hero h1{font-size:34px}
  .atter-hero__cta{display:inline-block}
  .atter-cartes,.etapes,.atter-info{grid-template-columns:1fr}
  .shihan{grid-template-columns:1fr;text-align:center;justify-items:center}
}
@media(max-width:767px){
  body.atter{padding-bottom:74px}
  .atter-entete .wrap{height:66px}
  .atter-entete .logo .nom{display:none}
  .atter-tel{font-size:17px}
  .atter-hero h1{font-size:29px}
  .atter-colle{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:150;gap:8px;padding:10px 12px;
    background:rgba(15,17,20,.96);border-top:1px solid #2b3038}
  .atter-colle .btn{flex:1;text-align:center;padding:14px 10px;font-size:12.5px}
}

/* ---------- flèche pour remonter ---------- */
.haut{position:fixed;right:22px;bottom:22px;width:46px;height:46px;border-radius:50%;background:var(--rouge);
  box-shadow:0 8px 22px rgba(0,0,0,.28);z-index:140;display:flex;align-items:center;justify-content:center;
  opacity:0;visibility:hidden;transform:translateY(12px);transition:opacity .25s,transform .25s,visibility .25s,background .18s}
.haut span{width:11px;height:11px;border-left:2px solid #fff;border-top:2px solid #fff;transform:translateY(3px) rotate(45deg)}
.haut.visible{opacity:1;visibility:visible;transform:none}
.haut:hover{background:var(--rouge-clair)}
.haut:focus-visible{outline:2px solid #fff;outline-offset:2px}
body.menu-ouvert .haut,body.modale-ouverte .haut{opacity:0;visibility:hidden}
@media(max-width:767px){.haut{right:14px;bottom:14px;width:42px;height:42px}body.atter .haut{bottom:86px}}