/* Aïkido Bain-de-Bretagne — feuille de style commune
   Palette tirée du dojo : keikogi blanc, hakama indigo, tatami vert et rouge. */

:root {
  --blanc: #f7f8f6;
  --papier: #ffffff;
  --encre: #232a3b;      /* hakama */
  --encre-douce: #4a5163;
  --tatami: #5f7a5c;     /* tatami vert */
  --tatami-clair: #e6ece3;
  --rouge: #b23a31;      /* tatami rouge / sceau */
  --rouge-fonce: #8f2c25;
  --trait: #d9ddd6;

  --titre: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", Georgia, serif;
  --texte: "Zen Kaku Gothic New", "Segoe UI", system-ui, -apple-system, sans-serif;

  --largeur: 1120px;
  --marge: clamp(1.25rem, 4vw, 2.5rem);
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 5rem; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--blanc);
  color: var(--encre);
  font-family: var(--texte);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--rouge-fonce); text-underline-offset: 0.18em; }
a:hover { color: var(--rouge); }

:focus-visible { outline: 3px solid var(--rouge); outline-offset: 3px; }

h1, h2, h3 {
  font-family: var(--titre);
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 0.6em;
  letter-spacing: 0.01em;
}
h1 { font-size: clamp(2.4rem, 6vw, 4.2rem); line-height: 1.08; }
h2 { font-size: clamp(1.75rem, 3.4vw, 2.5rem); }
h3 { font-size: 1.3rem; }
p { margin: 0 0 1em; max-width: 66ch; }

.conteneur { max-width: var(--largeur); margin: 0 auto; padding: 0 var(--marge); }

.lien-evitement {
  position: absolute; left: -999px; top: 0;
  background: var(--encre); color: #fff; padding: 0.6rem 1rem; z-index: 100;
}
.lien-evitement:focus { left: 0.5rem; top: 0.5rem; }

/* ---------- Boutons ---------- */
.bouton {
  display: inline-block;
  font-family: var(--texte);
  font-weight: 700;
  font-size: 1rem;
  padding: 0.85rem 1.4rem;
  border-radius: 3px;
  text-decoration: none;
  border: 2px solid transparent;
  cursor: pointer;
  transition: background-color .15s, color .15s;
}
.bouton-plein { background: var(--rouge); color: #fff; }
.bouton-plein:hover { background: var(--rouge-fonce); color: #fff; }
.bouton-contour { border-color: var(--encre); color: var(--encre); background: transparent; }
.bouton-contour:hover { background: var(--encre); color: #fff; }
.bouton-blanc { background: #fff; color: var(--rouge-fonce); }
.bouton-blanc:hover { background: var(--encre); color: #fff; }

/* ---------- En-tête ---------- */
.entete {
  position: sticky; top: 0; z-index: 50;
  background: rgba(247, 248, 246, 0.96);
  border-bottom: 1px solid var(--trait);
}
@supports (backdrop-filter: blur(8px)) {
  .entete { background: rgba(247, 248, 246, 0.85); backdrop-filter: blur(8px); }
}
.entete .conteneur {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; min-height: 4.5rem;
}
.marque {
  display: flex; align-items: center; gap: 0.75rem;
  text-decoration: none; color: var(--encre);
}
.marque img { width: 48px; height: 48px; border-radius: 50%; }
.marque span { font-family: var(--titre); font-weight: 700; font-size: 1.1rem; line-height: 1.15; }
.marque small { display: block; font-family: var(--texte); font-weight: 400; font-size: 0.8rem; color: var(--encre-douce); }

.navigation ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 1.6rem; }
.navigation a { color: var(--encre); text-decoration: none; font-weight: 500; }
.navigation a:hover, .navigation a[aria-current="page"] { color: var(--rouge); }
.navigation .bouton { padding: 0.6rem 1rem; color: #fff; }
.navigation .bouton:hover { color: #fff; }

.menu-bouton {
  display: none;
  background: none; border: 2px solid var(--encre); border-radius: 3px;
  font: inherit; font-weight: 700; color: var(--encre);
  padding: 0.4rem 0.8rem; cursor: pointer;
}

@media (max-width: 860px) {
  .menu-bouton { display: block; }
  .navigation {
    display: none;
    position: absolute; left: 0; right: 0; top: 100%;
    background: var(--blanc); border-bottom: 1px solid var(--trait);
  }
  .navigation.ouvert { display: block; }
  .navigation ul { flex-direction: column; align-items: stretch; gap: 0; padding: 0.5rem var(--marge) 1.25rem; }
  .navigation li a { display: block; padding: 0.8rem 0; border-bottom: 1px solid var(--trait); }
  .navigation li:last-child a { margin-top: 1rem; border: 0; text-align: center; }
}

/* ---------- Accroche ---------- */
.accroche { padding: clamp(2.5rem, 6vw, 4.5rem) 0 0; overflow: hidden; }
.accroche .conteneur {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(1.5rem, 5vw, 4rem);
  align-items: center;
}
.accroche-texte { padding-bottom: clamp(2.5rem, 6vw, 4.5rem); }
.accroche .chapeau { font-size: clamp(1.1rem, 1.6vw, 1.3rem); color: var(--encre-douce); max-width: 34em; }
.accroche .actions { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 1.8rem; }
.calligraphie {
  width: clamp(110px, 13vw, 165px);
  margin-bottom: clamp(2rem, 5vw, 3.5rem);
  position: relative; z-index: 2;
}
.calligraphie img { width: 100%; }
.calligraphie img { opacity: 0.92; }

@media (max-width: 640px) {
  .accroche .conteneur { grid-template-columns: 1fr; }
  .calligraphie { display: none; }
}

/* ---------- Tatami : infos pratiques ---------- */
.tatami {
  background: var(--tatami);
  color: #fff;
  position: relative;
}
.tatami .conteneur {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.1fr);
}
.tatami .info {
  padding: 2rem 1.5rem 2.2rem 0;
  border-right: 1px solid rgba(255,255,255,0.25);
  margin-right: 1.5rem;
}
.tatami h2 {
  font-family: var(--texte); font-size: 0.95rem; font-weight: 500;
  color: rgba(255,255,255,0.8); margin-bottom: 0.4rem; letter-spacing: 0;
}
.tatami p { margin: 0; font-size: 1.05rem; line-height: 1.45; }
.tatami strong { font-family: var(--titre); font-size: 1.35rem; font-weight: 700; display: block; }
.tatami a { color: #fff; }
.carre-rouge {
  background: var(--rouge);
  padding: 2rem 1.75rem 2.2rem;
  display: flex; flex-direction: column; justify-content: center; gap: 1rem;
}
.carre-rouge p { font-size: 1rem; }

@media (max-width: 960px) {
  .tatami .conteneur { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .carre-rouge { grid-column: 1 / -1; margin: 0 calc(var(--marge) * -1); padding-left: var(--marge); padding-right: var(--marge); }
}
@media (max-width: 640px) {
  .tatami .conteneur { grid-template-columns: 1fr; }
  .tatami .info { border-right: 0; margin-right: 0; border-bottom: 1px solid rgba(255,255,255,0.25); padding: 1.4rem 0; }
}

/* ---------- Sections ---------- */
.section { padding: clamp(3.5rem, 8vw, 6rem) 0; }
.section-blanche { background: var(--papier); }
.intro-section { max-width: 40rem; margin-bottom: 2.5rem; }
.intro-section p { color: var(--encre-douce); }

/* L'aïkido en bref */
.bref { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.bref figure { margin: 0; }
.bref figcaption, .legende { font-size: 0.9rem; color: var(--encre-douce); margin-top: 0.6rem; }
.disciplines { list-style: none; padding: 0; margin: 1.5rem 0 1.8rem; border-top: 1px solid var(--trait); }
.disciplines li {
  display: grid; grid-template-columns: 6.5rem 1fr; gap: 1rem;
  padding: 0.7rem 0; border-bottom: 1px solid var(--trait);
}
.disciplines span { font-family: var(--titre); font-weight: 700; }
@media (max-width: 820px) { .bref { grid-template-columns: 1fr; } }

/* Enseignants */
.enseignants { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; }
.enseignant { border-left: 4px solid var(--rouge); padding: 0.2rem 0 0.2rem 1.4rem; }
.enseignant h3 { margin-bottom: 0.25rem; }
.enseignant .grade { color: var(--tatami); font-weight: 700; margin-bottom: 0.6rem; }
@media (max-width: 700px) { .enseignants { grid-template-columns: 1fr; } }

.citation {
  margin: 3rem 0 0; padding: 0; max-width: 46rem;
  font-family: var(--titre); font-size: clamp(1.3rem, 2.4vw, 1.7rem); line-height: 1.45;
}

/* Premier cours : étapes */
.etapes { list-style: none; padding: 0; margin: 0; counter-reset: etape;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; }
.etapes li { counter-increment: etape; border-top: 2px solid var(--encre); padding-top: 1.2rem; }
.etapes li::before {
  content: counter(etape);
  display: inline-grid; place-items: center;
  width: 2.2rem; height: 2.2rem; margin-bottom: 0.9rem;
  background: var(--rouge); color: #fff; font-family: var(--titre); font-weight: 700;
}
.etapes p { margin: 0; color: var(--encre-douce); }
@media (max-width: 820px) { .etapes { grid-template-columns: 1fr; } }

/* Questions fréquentes */
.faq { margin-top: 4rem; max-width: 46rem; }
.faq details { border-bottom: 1px solid var(--trait); }
.faq details:first-of-type { border-top: 1px solid var(--trait); }
.faq summary {
  cursor: pointer; list-style: none; padding: 1.1rem 2.5rem 1.1rem 0; position: relative;
  font-weight: 700; font-size: 1.08rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: 0.25rem; top: 50%; transform: translateY(-50%);
  font-family: var(--titre); font-size: 1.6rem; color: var(--rouge);
}
.faq details[open] summary::after { content: "−"; }
.faq details p { color: var(--encre-douce); padding-bottom: 0.6rem; }

/* Vie du club */
.galerie { display: grid; grid-template-columns: 1.4fr 1fr; gap: 1.5rem; }
.galerie figure { margin: 0; }
.galerie img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.galerie .grande { grid-column: 1 / -1; }
.galerie .grande img { aspect-ratio: 21 / 9; }
@media (max-width: 700px) { .galerie { grid-template-columns: 1fr; } .galerie .grande img { aspect-ratio: 16 / 9; } }

/* Contact */
.contact { display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(2rem, 6vw, 5rem); }
@media (max-width: 860px) { .contact { grid-template-columns: 1fr; } }

.formulaire { display: grid; gap: 1.1rem; }
.champ label { display: block; font-weight: 700; margin-bottom: 0.35rem; }
.champ .aide { font-weight: 400; color: var(--encre-douce); font-size: 0.9rem; }
.champ input, .champ select, .champ textarea {
  width: 100%; font: inherit; color: var(--encre);
  background: var(--papier); border: 1px solid #aeb4ab; border-radius: 3px;
  padding: 0.7rem 0.8rem;
}
.champ textarea { min-height: 8rem; resize: vertical; }
.champ input:focus, .champ select:focus, .champ textarea:focus { border-color: var(--encre); outline: 2px solid var(--encre); outline-offset: 0; }
.deux-champs { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
@media (max-width: 560px) { .deux-champs { grid-template-columns: 1fr; } }
.piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.mention-form { font-size: 0.88rem; color: var(--encre-douce); margin: 0; }

.statut { padding: 1rem 1.2rem; border-left: 4px solid; margin-bottom: 1.5rem; display: none; }
.statut.visible { display: block; }
.statut-ok { border-color: var(--tatami); background: var(--tatami-clair); }
.statut-erreur { border-color: var(--rouge); background: #f6e3e1; }

.coordonnees { display: grid; gap: 1.6rem; align-content: start; }
.coordonnees h3 { font-family: var(--texte); font-size: 0.95rem; font-weight: 500; color: var(--encre-douce); margin: 0 0 0.2rem; }
.coordonnees p { margin: 0; }
.coordonnees .gros { font-family: var(--titre); font-size: 1.25rem; font-weight: 700; }

.documents { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.9rem; }
.documents a { display: flex; align-items: center; gap: 0.9rem; text-decoration: none; color: var(--encre); font-weight: 500; }
.documents a:hover { color: var(--rouge); }
.documents img { width: 52px; height: 68px; object-fit: cover; border: 1px solid var(--trait); }

/* ---------- Pied de page ---------- */
.pied { background: var(--encre); color: #d6d9e0; padding: 3rem 0 2rem; font-size: 0.95rem; }
.pied a { color: #fff; }
.pied .conteneur { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 2rem; }
.pied h2 { font-family: var(--texte); font-size: 0.95rem; font-weight: 700; color: #fff; margin-bottom: 0.6rem; }
.pied ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.35rem; }
.logos { display: flex; gap: 1rem; align-items: center; margin-top: 1rem; }
.logos a { background: #fff; padding: 0.5rem; border-radius: 3px; display: block; }
.logos img { height: 44px; width: auto; }
.bas-de-page { grid-column: 1 / -1; border-top: 1px solid rgba(255,255,255,0.15); padding-top: 1.2rem; margin-top: 1rem; font-size: 0.85rem; }
@media (max-width: 760px) { .pied .conteneur { grid-template-columns: 1fr; } }

/* ---------- Pages intérieures ---------- */
.titre-page { padding: clamp(2.5rem, 6vw, 4rem) 0 clamp(1.5rem, 4vw, 2.5rem); border-bottom: 1px solid var(--trait); }
.titre-page p { color: var(--encre-douce); font-size: 1.15rem; }
.article { display: grid; grid-template-columns: minmax(0, 42rem) minmax(0, 1fr); gap: clamp(2rem, 6vw, 5rem); }
.article p { line-height: 1.8; }
.article h2 { margin-top: 2.5rem; }
.article h2:first-child { margin-top: 0; }
.encadre { position: sticky; top: 6.5rem; align-self: start; background: var(--papier); border-top: 4px solid var(--rouge); padding: 1.5rem; }
.encadre img { width: 140px; margin-bottom: 1rem; }
.encadre p { font-size: 0.98rem; }
@media (max-width: 860px) { .article { grid-template-columns: 1fr; } .encadre { position: static; } }

.mentions h2 { font-size: 1.4rem; margin-top: 2.2rem; }
.mentions p, .mentions li { max-width: 66ch; }
.a-completer { background: #fff3c4; padding: 0 0.2em; }
.tatami .info p + p { margin-top: 0.6rem; }
.tatami .petit { font-size: 0.92rem; }
.tatami .bouton-blanc { color: var(--rouge-fonce); }
.tatami .bouton-blanc:hover { color: #fff; }
.insecable { white-space: nowrap; }
.bas-de-page { max-width: none; }
.galerie { align-items: start; }
.galerie figure:not(.grande) img { aspect-ratio: auto; object-fit: contain; }

/* =========================================================
   Variante contrastée : en-tête et accroche bleu nuit
   (activée par <body class="contraste">)
   ========================================================= */
.contraste .entete { background: var(--encre); border-bottom-color: rgba(255,255,255,0.08); }
@supports (backdrop-filter: blur(8px)) { .contraste .entete { background: var(--encre); backdrop-filter: none; } }
.contraste .marque, .contraste .navigation a { color: #fff; }
.contraste .marque small { color: #b9bfcc; }
.contraste .navigation a:hover, .contraste .navigation a[aria-current="page"] { color: #f0a59e; }
.contraste .menu-bouton { color: #fff; border-color: #fff; }
@media (max-width: 860px) { .contraste .navigation { background: var(--encre); } .contraste .navigation li a { border-color: rgba(255,255,255,0.12); } }

.contraste .accroche { background: var(--encre); color: #fff; }
.contraste .accroche h1 { color: #fff; }
.contraste .accroche .chapeau { color: #c9cedb; }
.contraste .accroche .bouton-contour { border-color: #fff; color: #fff; }
.contraste .accroche .bouton-contour:hover { background: #fff; color: var(--encre); }
.contraste .calligraphie img { filter: invert(1); opacity: 0.95; }

/* =========================================================
   Page d'atterrissage « cours d'essai » (essai.html)
   ========================================================= */
.atterrissage .entete .conteneur { min-height: 4rem; }
.tel-entete { color: #fff; text-decoration: none; font-weight: 700; white-space: nowrap; }
.tel-entete:hover { color: #f0a59e; }

.essai-accroche { background: var(--encre); color: #fff; padding: clamp(2.5rem, 6vw, 4.5rem) 0; position: relative; overflow: hidden; }
.essai-accroche .conteneur { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); align-items: start; position: relative; z-index: 1; }
.essai-accroche h1 { color: #fff; font-size: clamp(2.2rem, 5vw, 3.6rem); }
.essai-accroche .chapeau { color: #c9cedb; font-size: clamp(1.1rem, 1.6vw, 1.25rem); }
.essai-kanji {
  position: absolute; right: -2rem; bottom: -3rem; width: clamp(160px, 22vw, 300px);
  filter: invert(1); opacity: 0.06; pointer-events: none;
}
.rassurances { list-style: none; padding: 0; margin: 1.8rem 0 0; display: grid; gap: 0.9rem; }
.rassurances li { padding-left: 2rem; position: relative; }
.rassurances li::before {
  content: ""; position: absolute; left: 0; top: 0.45em; width: 0.9rem; height: 0.9rem; background: var(--rouge);
}
.rassurances strong { color: #fff; }
.rassurances li { color: #c9cedb; }

.carte-formulaire { background: var(--papier); color: var(--encre); padding: clamp(1.5rem, 3vw, 2.2rem); border-top: 6px solid var(--rouge); }
.carte-formulaire h2 { font-size: 1.5rem; margin-bottom: 0.3rem; }
.carte-formulaire .sous-titre { color: var(--encre-douce); margin-bottom: 1.3rem; font-size: 0.98rem; }
.creneaux { border: 0; padding: 0; margin: 0; }
.creneaux legend { font-weight: 700; margin-bottom: 0.5rem; padding: 0; }
.creneaux-choix { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
.creneaux-choix label {
  display: block; border: 1px solid #aeb4ab; border-radius: 3px; padding: 0.7rem 0.8rem; cursor: pointer; line-height: 1.3;
}
.creneaux-choix input { position: absolute; opacity: 0; }
.creneaux-choix label span { display: block; font-size: 0.88rem; color: var(--encre-douce); }
.creneaux-choix input:checked + label { border-color: var(--rouge); outline: 2px solid var(--rouge); background: #fbefee; }
.creneaux-choix input:focus-visible + label { outline: 3px solid var(--encre); }
.creneaux-choix .large { grid-column: 1 / -1; }
.carte-formulaire .bouton { width: 100%; text-align: center; font-size: 1.05rem; }

@media (max-width: 860px) {
  .essai-accroche .conteneur { grid-template-columns: 1fr; }
}

.temoignages { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; }
.temoignage { margin: 0; }
.temoignage blockquote { margin: 0 0 0.9rem; font-family: var(--titre); font-size: 1.2rem; line-height: 1.5; }
.temoignage blockquote::before { content: "« "; color: var(--rouge); }
.temoignage blockquote::after { content: " »"; color: var(--rouge); }
.temoignage figcaption { color: var(--encre-douce); font-size: 0.95rem; }
@media (max-width: 820px) { .temoignages { grid-template-columns: 1fr; } }

.appel-final { background: var(--rouge); color: #fff; text-align: center; padding: clamp(3rem, 7vw, 5rem) 0; }
.appel-final h2 { color: #fff; }
.appel-final p { margin-left: auto; margin-right: auto; color: #fbe3e0; }
.appel-final .actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.8rem; margin-top: 1.5rem; }
.appel-final .bouton-contour { border-color: #fff; color: #fff; }
.appel-final .bouton-contour:hover { background: #fff; color: var(--rouge-fonce); }

.pied-mini { background: var(--encre); color: #c9cedb; padding: 1.5rem 0; font-size: 0.9rem; }
.pied-mini .conteneur { display: flex; flex-wrap: wrap; gap: 1rem 2rem; justify-content: space-between; }
.pied-mini a { color: #fff; }