/* ==========================================================================
   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 ---------- */
.topbar{background:var(--noir);color:#8d939c;font-size:12.5px;letter-spacing:.04em}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;height:40px;gap:20px}
.topbar b{color:var(--papier);font-weight:500}
/* Le lien du bandeau reprend le langage des étiquettes du site — Oswald en
   capitales, filet rouge — pour se distinguer du texte gris qui l'entoure. */
.topbar a{font-family:var(--labo);font-size:11px;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:var(--papier);border-bottom:1px solid var(--rouge);
  padding-bottom:2px;transition:color .18s,border-color .18s}
.topbar a:hover{color:#fff;border-bottom-color:var(--rouge-clair)}

/* ---------- en-tête ---------- */
.entete{background:var(--charbon);border-bottom:1px solid #262b33;position:sticky;top:0;z-index:60;
  transition:background .3s ease,border-color .3s ease,box-shadow .3s ease}
.entete .wrap{display:flex;align-items:center;gap:26px;height:88px}
.logo{display:flex;align-items:center;gap:13px;flex:0 0 auto}
.logo img{height:66px;width:auto}
.logo .nom{font-family:var(--mincho);color:var(--papier);font-size:16px;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:24px;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:.12em;
  text-transform:uppercase;color:#a9afb8;padding:32px 0;border-bottom:2px solid transparent;transition:.18s}
.nav > li > a:hover,.nav > li.actif > a{color:var(--papier);border-bottom-color:var(--rouge)}
.nav .btn-nav{background:var(--rouge);color:#fff!important;font-weight:500;font-size:12.5px;
  padding:12px 20px!important;border:0!important;border-radius:2px;transition:.18s}
.nav .btn-nav:hover{background:var(--rouge-clair)}
.nav .btn-nav--gris{background:var(--ardoise);color:var(--blanc-doux)!important}
/* Les deux boutons d'action se touchent presque : ils forment une paire, */
/* alors que l'écart de 24 px sépare les rubriques de navigation. */
.nav > li:last-child{margin-left:-16px}
.nav .btn-nav--gris:hover{background:#2e343d;color:#fff!important}
body.nav-clair .nav .btn-nav--gris,
body.nav-auto .entete.est-defile .nav .btn-nav--gris{background:#3a4048;color:#fff!important}
body.nav-clair .nav .btn-nav--gris:hover,
body.nav-auto .entete.est-defile .nav .btn-nav--gris:hover{background:var(--noir)}


/* variante claire de l'en-tête (pages sans héros, ou après défilement) */
body.nav-clair .entete,
body.nav-auto .entete.est-defile{background:var(--papier);border-bottom-color:#e1dbd0;
  box-shadow:0 2px 14px rgba(15,17,20,.07)}
body.nav-clair .logo .nom,
body.nav-auto .entete.est-defile .logo .nom{color:var(--noir)}
body.nav-clair .logo .nom small,
body.nav-auto .entete.est-defile .logo .nom small{color:var(--or-fonce)}
body.nav-clair .nav > li > a,
body.nav-auto .entete.est-defile .nav > li > a{color:#5f656d}
body.nav-clair .nav > li > a:hover,body.nav-clair .nav > li.actif > a,
body.nav-auto .entete.est-defile .nav > li > a:hover,
body.nav-auto .entete.est-defile .nav > li.actif > a{color:var(--noir)}
body.nav-clair .nav .btn-nav,
body.nav-auto .entete.est-defile .nav .btn-nav{color:#fff!important}

/* variante transparente (au-dessus d'un héros) */
body.nav-auto .entete{background:transparent;border-bottom-color:transparent;box-shadow:none}
body.nav-auto .entete:not(.est-defile) .logo .nom{color:#fff}
body.nav-auto .entete:not(.est-defile) .nav > li > a{color:#d6d9dd}
body.nav-auto .entete:not(.est-defile) .nav > li > a:hover{color:#fff}
body.nav-auto .topbar{background:rgba(15,17,20,.55);position:relative;z-index:61}

/* ---------- 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, et la zone
   tactile tombe a une dizaine de pixels. */
.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}
.burger span{position:absolute;left:11px;right:11px;height:2px;background:#c3c8cf;transition:.2s}
.burger span:nth-child(1){top:13px}.burger span:nth-child(2){top:19px}.burger span:nth-child(3){top:25px}
body.nav-clair .burger,body.nav-auto .entete.est-defile .burger{border-color:#cfc8bc}
body.nav-clair .burger span,body.nav-auto .entete.est-defile .burger span{background:#5f656d}

/* ---------- 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) ---------- */
.sousnav{background:var(--papier-2);border-bottom:1px solid var(--bord);position:sticky;top:88px;z-index:40}
.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:1024px){.sousnav{top:0}}
@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:#9aa0a9;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:#5d636b}
.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 ---------- */
@media(max-width:1024px){
  .burger{display:block}
  .nav{position:fixed;top:0;right:0;bottom:0;width:min(340px,86vw);background:var(--charbon);
    flex-direction:column;align-items:stretch;gap:0;padding:88px 0 30px;overflow-y:auto;
    transform:translateX(102%);transition:transform .28s ease;box-shadow:-16px 0 40px rgba(0,0,0,.4);z-index:65}
  body.menu-ouvert .nav{transform:translateX(0)}
  .nav > li > a{padding:15px 26px!important;border-bottom:1px solid #22262d!important;color:#c3c8cf!important}
  /* On annule le rapprochement de la paire, prevu pour la barre horizontale du bureau :
     dans le panneau mobile il decalait le second bouton de 16 px vers la gauche. */
  .nav > li:last-child{margin-left:0}
  .nav .btn-nav{display:block;margin:18px 26px;text-align:center;border-bottom:0!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:52px}
  .logo .nom{font-size:14px}
  .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}
}