/* ============================================================
   SHINGITAI KARATÉ-DO — Feuille de style principale
   Palette : rouge soleil #f40500 · or tigre #a28442 ·
             encre #1a1a1a · papier #f7f3ea
   ============================================================ */

:root{
  --rouge:#f40500;
  --rouge-fonce:#a80d05;
  --or:#a28442;
  --encre:#1a1a1a;
  --papier:#f7f3ea;
  --blanc:#ffffff;
}

*{margin:0;padding:0;box-sizing:border-box}

body{
  font-family:Georgia,"Times New Roman",serif;
  background:var(--papier);
  color:var(--encre);
  line-height:1.7;
}

/* ---------- En-tête ---------- */
.entete{
  text-align:center;
  padding:36px 20px 18px;
  background:linear-gradient(180deg,#fffdf8 0%,var(--papier) 100%);
  border-bottom:3px solid var(--rouge);
}
.logo-entete{
  width:min(320px,70vw);
  height:auto;
  display:block;
  margin:0 auto 14px;
}
.entete h1{
  font-size:clamp(1.6rem,4vw,2.4rem);
  letter-spacing:.08em;
  color:var(--rouge-fonce);
  text-transform:uppercase;
}
.devise{
  font-style:italic;
  color:var(--or);
  margin-top:6px;
}

/* ---------- Menu ---------- */
.menu{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:4px;
  background:var(--encre);
  padding:10px 8px;
  position:sticky;
  top:0;
  z-index:10;
}
.menu a{
  color:var(--papier);
  text-decoration:none;
  padding:8px 22px;
  border-radius:4px;
  letter-spacing:.06em;
  font-family:"Segoe UI",Helvetica,Arial,sans-serif;
  font-size:.95rem;
  transition:background .25s,color .25s;
}
.menu a:hover{background:rgba(244,5,0,.85);color:#fff}
.menu a.actif{background:var(--rouge);color:#fff}

/* ---------- Contenu ---------- */
main{
  max-width:900px;
  margin:0 auto;
  padding:34px 22px 50px;
}
.carte{
  background:var(--blanc);
  border:1px solid #e5ddc9;
  border-left:5px solid var(--or);
  border-radius:6px;
  padding:26px 30px;
  margin-bottom:26px;
  box-shadow:0 2px 8px rgba(90,70,20,.07);
}
.carte h2{
  color:var(--rouge-fonce);
  letter-spacing:.05em;
  margin-bottom:12px;
  padding-bottom:8px;
  border-bottom:2px solid var(--papier);
}
.a-completer{
  color:#9a8c66;
  font-style:italic;
  background:#fbf8f0;
  border:1px dashed var(--or);
  border-radius:4px;
  padding:10px 14px;
  margin-top:10px;
}

/* ---------- Pied de page ---------- */
.pied{
  text-align:center;
  background:var(--encre);
  color:var(--papier);
  padding:22px 15px;
  font-size:.9rem;
}
.pied a{color:#e8c766}

/* ---------- Horaire des cours ---------- */
.h-lieu{
  font-style:italic;color:#6a5a2a;margin-bottom:18px;
}
.grille-horaire{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(175px,1fr));
  gap:14px;
  margin-bottom:20px;
}
.jour h3{
  color:var(--encre);
  font-size:.95rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  border-bottom:2px solid var(--or);
  padding-bottom:5px;
  margin-bottom:10px;
}
.cours{
  border-radius:6px;
  padding:10px 12px;
  margin-bottom:8px;
  font-size:.88rem;
  line-height:1.45;
  font-family:"Segoe UI",Helvetica,Arial,sans-serif;
  border:1px solid rgba(0,0,0,.07);
}
.cours b{
  display:block;
  margin-top:6px;
  font-size:.82rem;
  color:#3a3a3a;
}
.c-deb{background:#e3f1fa}
.c-jaune{background:#fbe9b8}
.c-vert{background:#e2efc8}
.c-marron{background:#f4cdb0}
.c-bleu{background:#cfe0f2}
.c-bunkai{background:#e6e4e0}
.h-notes{
  background:#fbf8f0;
  border-left:4px solid var(--rouge);
  border-radius:4px;
  padding:12px 18px;
}
.h-notes p{margin:4px 0;font-size:.95rem}

/* ---------- Signature du dojo (depuis 1982) ---------- */
.signature-dojo{
  text-align:center;
  font-style:italic;
  font-size:1.15rem;
  color:var(--or);
  letter-spacing:.06em;
  margin-top:14px;
  padding-top:12px;
  border-top:1px solid #eee4cd;
}

/* ---------- Section Instructeur ---------- */
.instr-nom{
  color:#6a5a2a;
  font-size:1.15rem;
  letter-spacing:.04em;
  margin-bottom:14px;
}
#instructeur p{margin-bottom:12px}

/* ---------- Section Contact ---------- */
.contact-grille{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:14px;
}
.contact-item{
  background:#fffdf8;
  border:1px solid #eee4cd;
  border-radius:6px;
  padding:14px 18px;
}
.ct-label{
  display:block;
  font-family:"Segoe UI",Helvetica,Arial,sans-serif;
  font-size:.78rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--or);
  margin-bottom:5px;
}
.contact-item b{color:var(--encre)}
.contact-item a{
  color:var(--rouge-fonce);
  text-decoration:none;
  font-weight:600;
}
.contact-item a:hover{text-decoration:underline}

/* ---------- Valeurs du dojo (Corps · Esprit · Valeurs) ---------- */
.sous-titre{
  color:#6a5a2a;
  font-size:1.05rem;
  letter-spacing:.04em;
  margin:20px 0 10px;
  padding-top:12px;
  border-top:1px solid #eee4cd;
}
#apropos p{margin-bottom:10px}
.valeurs-grille{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:14px;
  margin:6px 0 8px;
}
.valeur-carte{
  background:#fbf8f0;
  border:1px solid #eee4cd;
  border-top:3px solid var(--or);
  border-radius:6px;
  padding:14px 16px;
  text-align:center;
}
.valeur-carte h3{
  color:var(--rouge-fonce);
  font-size:.88rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  margin-bottom:8px;
}
.valeur-carte ul{list-style:none}
.valeur-carte li{
  font-family:"Segoe UI",Helvetica,Arial,sans-serif;
  font-size:.9rem;
  padding:3px 0;
}

/* ---------- Étiquette de gymnase (vendredi) ---------- */
.gym-tag{
  display:block;
  font-size:.68rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#6a5a2a;
  margin-bottom:2px;
}

/* ---------- Tarifs ---------- */
.tarif-defile{overflow-x:auto;margin-bottom:14px}
.tarif-table{
  width:100%;
  border-collapse:collapse;
  font-family:"Segoe UI",Helvetica,Arial,sans-serif;
  font-size:.92rem;
}
.tarif-table th{
  background:var(--rouge-fonce);
  color:#fff;
  text-align:left;
  padding:9px 12px;
  letter-spacing:.04em;
  font-weight:600;
  white-space:nowrap;
}
.tarif-table td{
  padding:9px 12px;
  border-bottom:1px solid #eee4cd;
}
.tarif-table tbody tr:nth-child(even){background:#fbf8f0}
.tarif-table .prix{font-weight:700;white-space:nowrap}
.tarif-note{
  background:#fbf8f0;
  border-left:4px solid var(--rouge);
  border-radius:4px;
  padding:10px 16px;
  font-size:.9rem;
  font-style:italic;
  margin-bottom:18px;
}
.tarif-2col{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:14px;
}
.tarif-bloc{
  background:#fffdf8;
  border:1px solid #eee4cd;
  border-radius:6px;
  padding:14px 18px;
}
.tarif-bloc h3{
  color:var(--rouge-fonce);
  font-size:.95rem;
  letter-spacing:.05em;
  margin-bottom:8px;
}
.tarif-bloc ul{list-style:none}
.tarif-bloc li{
  font-family:"Segoe UI",Helvetica,Arial,sans-serif;
  font-size:.9rem;
  padding:5px 0;
  border-bottom:1px dashed #eee4cd;
}
.tarif-bloc li:last-child{border-bottom:none}

/* ---------- Le dojo en images (galerie) ---------- */
.galerie{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
  gap:12px;
}
.photo-vignette{
  margin:0;cursor:zoom-in;border-radius:6px;overflow:hidden;
  border:1px solid #e5ddc9;background:#fffdf8;
  transition:box-shadow .2s,transform .2s;
}
.photo-vignette:hover{box-shadow:0 4px 14px rgba(90,70,20,.18);transform:translateY(-2px)}
.photo-vignette img{
  width:100%;aspect-ratio:4/3;object-fit:cover;display:block;
}
.photo-vignette figcaption{
  font-family:"Segoe UI",Helvetica,Arial,sans-serif;
  font-size:.8rem;color:#6a5a2a;padding:7px 10px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.galerie-vide{
  grid-column:1/-1;color:#9a8c66;font-style:italic;
  background:#fbf8f0;border:1px dashed var(--or);border-radius:6px;
  padding:26px 20px;text-align:center;
}
#visionneuse{
  position:fixed;inset:0;background:rgba(8,8,10,.94);z-index:1000;
  display:flex;align-items:center;justify-content:center;gap:14px;padding:30px;
}
#visionneuse figure{max-width:88vw;max-height:88vh;text-align:center;margin:0}
#visionneuse img{
  max-width:88vw;max-height:80vh;border-radius:6px;
  box-shadow:0 10px 40px rgba(0,0,0,.6);
}
#visionneuse figcaption{
  color:#e8dcc0;font-family:"Segoe UI",Helvetica,Arial,sans-serif;
  font-size:.95rem;margin-top:12px;
}
#visionneuse button{
  background:none;border:none;color:#cfc4a6;cursor:pointer;
  font-size:2.2rem;line-height:1;padding:10px;transition:color .2s;
}
#visionneuse button:hover{color:#fff}
#visionneuse .v-fermer{position:absolute;top:14px;right:20px;font-size:1.6rem}

/* ---------- Message important (bandeau en haut de l'accueil) ---------- */
.avis-important{
  background:#fff3f1;
  border:1px solid #f0b8b4;
  border-left:6px solid var(--rouge);
  border-radius:6px;
  padding:18px 24px;
  margin-bottom:26px;
  box-shadow:0 3px 12px rgba(168,13,5,.12);
}
.avis-etiquette{
  display:block;
  font-family:"Segoe UI",Helvetica,Arial,sans-serif;
  font-size:.75rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--rouge-fonce);
  font-weight:700;
  margin-bottom:6px;
}
.avis-important h3{
  color:var(--rouge-fonce);
  letter-spacing:.03em;
  margin-bottom:6px;
}
.avis-important p{white-space:pre-line;margin-bottom:4px}
.avis-date{
  font-family:"Segoe UI",Helvetica,Arial,sans-serif;
  font-size:.78rem;color:#a89a72;
}
.avis-important .doc-btn{
  display:inline-block;font-family:"Segoe UI",Arial,sans-serif;font-size:.9rem;
  text-decoration:none;padding:8px 18px;border-radius:5px;
  background:var(--rouge);color:#fff;margin-top:10px;
}
.avis-important .doc-btn:hover{background:var(--rouge-fonce)}

/* ---------- Boutique du dojo ---------- */
.boutique-grille{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
  gap:16px;
  margin-top:18px;
}
.article-carte{
  background:#fffdf8;
  border:1px solid #eee4cd;
  border-top:3px solid var(--or);
  border-radius:6px;
  padding:16px;
  text-align:center;
  transition:box-shadow .2s,transform .2s;
}
.article-carte:hover{box-shadow:0 4px 14px rgba(90,70,20,.16);transform:translateY(-2px)}
.article-image{
  background:#fff;border-radius:6px;height:170px;
  display:flex;align-items:center;justify-content:center;margin-bottom:12px;
}
.article-image img{max-height:160px;max-width:100%;object-fit:contain}
.article-carte h3{color:var(--rouge-fonce);font-size:1rem;letter-spacing:.03em;margin-bottom:6px}
.article-prix{
  font-family:"Segoe UI",Helvetica,Arial,sans-serif;
  font-weight:700;font-size:.95rem;color:var(--encre);margin-bottom:4px;
}
.article-tailles{
  font-family:"Segoe UI",Helvetica,Arial,sans-serif;
  font-size:.8rem;color:#8a7a50;
}
.boutique-ou{
  display:flex;gap:26px;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;
}
.boutique-ou p{margin-bottom:10px}
.boutique-ou a{color:var(--rouge-fonce);font-weight:600;text-decoration:none}
.boutique-ou a:hover{text-decoration:underline}
.boutique-qr{margin:0;text-align:center}
.boutique-qr img{width:130px;height:auto;border:1px solid #eee4cd;border-radius:6px}
.boutique-qr figcaption{
  font-family:"Segoe UI",Helvetica,Arial,sans-serif;
  font-size:.78rem;color:#8a7a50;margin-top:6px;max-width:150px;
}

/* ---------- Documentation (articles) ---------- */
.doc-article{
  display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;
  background:#fffdf8;border:1px solid #eee4cd;border-left:5px solid var(--or);
  border-radius:6px;padding:16px 22px;margin-bottom:14px;
  transition:box-shadow .2s;
}
.doc-article:hover{box-shadow:0 3px 12px rgba(90,70,20,.14)}
.doc-texte{flex:1;min-width:220px}
.doc-date{
  font-family:"Segoe UI",Helvetica,Arial,sans-serif;
  font-size:.78rem;color:#a89a72;letter-spacing:.05em;
}
.doc-article h3{color:var(--rouge-fonce);font-size:1.05rem;letter-spacing:.03em;margin:2px 0 6px}
.doc-article p{font-size:.95rem;margin:0}
.doc-btn{
  display:inline-block;font-family:"Segoe UI",Arial,sans-serif;font-size:.92rem;
  text-decoration:none;padding:9px 20px;border-radius:5px;
  background:var(--rouge);color:#fff;white-space:nowrap;transition:background .2s;
}
.doc-btn:hover{background:var(--rouge-fonce)}

/* ============================================================
   TÉLÉPHONES ET TABLETTES — ajouté le 18 août 2026
   ------------------------------------------------------------
   Sur grand écran, rien ne change : .liens et .barre-mobile
   sont transparents à la mise en page (display:contents), et
   le menu reste la rangée de boutons habituelle.
   Sous 900 px, l'en-tête se compacte et les liens se replient
   derrière un bouton « Menu ».
   ============================================================ */
.liens{display:contents}
.barre-mobile{display:contents}
.bouton-menu{display:none}
.bouton-menu .point{display:none}

@media (max-width:900px){

  /* ----- En-tête compact ----- */
  .entete{padding:9px 14px 8px}
  /* !important : plusieurs pages portent une largeur en style= sur l'image */
  .logo-entete{width:30px!important;margin-bottom:4px}
  .entete h1{font-size:.95rem;letter-spacing:.04em;line-height:1.25}
  .devise{font-size:.75rem;margin-top:3px;line-height:1.45}

  /* ----- Menu repliable ----- */
  .menu{display:flex;flex-direction:column;align-items:stretch;gap:0;padding:0}

  .barre-mobile{
    order:-1;display:flex;align-items:center;justify-content:space-between;
    gap:8px;padding:4px 8px;
  }
  .bouton-menu{
    display:flex;align-items:center;gap:12px;min-height:48px;
    background:none;border:0;color:var(--papier);cursor:pointer;
    font-family:"Segoe UI",Helvetica,Arial,sans-serif;
    font-size:.95rem;letter-spacing:.09em;text-transform:uppercase;
    padding:10px 14px;border-radius:5px;
  }
  .bouton-menu:hover,.bouton-menu[aria-expanded="true"]{background:rgba(255,255,255,.09)}

  /* Témoin « nouveau message » à droite du mot Menu.
     Invisible tant que le visiteur est à jour ; allumé dès qu'une
     nouvelle n'a pas été lue. Il s'éteint seul après la visite. */
  @keyframes shingiPointMenu{0%,100%{opacity:1;transform:scale(1)}
                             50%{opacity:.15;transform:scale(.82)}}
  .bouton-menu .point{display:none}
  .menu.a-du-neuf .bouton-menu .point{
    display:inline-block;width:10px;height:10px;border-radius:50%;
    background:#ffd21e;box-shadow:0 0 8px 2px rgba(255,210,30,.75);
    margin-left:3px;vertical-align:middle;
    animation:shingiPointMenu 1.1s ease-in-out infinite}
  @media (prefers-reduced-motion:reduce){
    .menu.a-du-neuf .bouton-menu .point{animation:none}
  }
  .bouton-menu .traits{display:block;position:relative;width:22px;height:2px;
    background:var(--papier);transition:background .2s}
  .bouton-menu .traits::before,.bouton-menu .traits::after{
    content:"";position:absolute;left:0;width:22px;height:2px;
    background:var(--papier);transition:transform .25s}
  .bouton-menu .traits::before{top:-7px}
  .bouton-menu .traits::after{top:7px}
  .bouton-menu[aria-expanded="true"] .traits{background:transparent}
  .bouton-menu[aria-expanded="true"] .traits::before{transform:translateY(7px) rotate(45deg)}
  .bouton-menu[aria-expanded="true"] .traits::after{transform:translateY(-7px) rotate(-45deg)}

  .liens{display:none;border-top:1px solid #343434;
    max-height:calc(100vh - 120px);overflow-y:auto}
  .menu.ouvert .liens{display:block}

  /* le bloc « .menu > a » garde le menu utilisable si JavaScript est coupé */
  .menu .liens a,.menu>a{
    display:block;padding:13px 18px;border-radius:0;font-size:1rem;
    border-bottom:1px solid #2b2b2b;
  }

  /* ----- Sélecteur de langue ----- */
  .menu .choix-langue{margin-left:0!important;gap:5px}
  .menu .choix-langue a{
    display:inline-block;border:1px solid #3d3d3d;border-radius:4px;
    min-width:44px;min-height:40px;line-height:24px;text-align:center;
    padding:8px 6px!important;font-size:.88rem!important;
  }

  /* ----- Le contenu remonte ----- */
  main{padding:18px 14px 40px}
  .carte{padding:18px 16px;border-radius:5px}
  /* le menu collant ne doit pas masquer la section visée par une ancre */
  [id]{scroll-margin-top:64px}
}

@media (max-width:420px){
  .entete{padding:9px 12px 8px}
  .logo-entete{width:26px!important}
  .entete h1{font-size:.86rem}
  .devise{font-size:.68rem}
  main{padding:14px 11px 34px}
  .carte{padding:15px 13px}
}