/* Feuille de style commune à toutes les pages du site public — nav, footer et
   composants partagés (cartes, formulaires...). Chaque page garde son propre
   CSS spécifique à sa section dans son <style> inline. */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
:root {
  --red: #b60e21; --red-light: #E8392A;
  --cream: #F5F0E8; --dark: #0E0E0E; --gray: #2A2A2A;
  --gray-mid: #555; --gray-light: #999; --white: #FFFFFF;
  --line: rgba(255,255,255,0.09);
}
html { scroll-behavior: smooth; }
body { font-family: 'DM Sans', sans-serif; background: var(--dark); color: var(--cream); line-height: 1.6; overflow-x: hidden; }

/* Pages secondaires (association/cours/tarifs/galerie/contact) : la photo reste fixe en
   fond derrière tout le contenu, du bandeau de titre jusqu'au pied de page — chaque section
   garde un fond transparent pour laisser la photo filtrer, avec un voile sombre pour que le
   texte reste lisible par-dessus.
   Un pseudo-élément position:fixed plutôt que background-attachment:fixed sur body : ce
   dernier est peu fiable sur mobile (Safari iOS le traite historiquement comme "scroll"),
   et surtout — sans lui — "cover" se dimensionne sur la hauteur totale de la page (celle
   de body) plutôt que sur l'écran, ce qui zoome l'image de façon absurde sur une longue
   page. Un élément fixed avec inset:0 fait toujours exactement la taille de l'écran, donc
   "cover" s'y comporte correctement quelle que soit la longueur de la page. */
body.has-bg-photo { background: var(--dark); }
body.has-bg-photo::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(rgba(8,8,8,0.82), rgba(8,8,8,0.82)),
    url('/ressources/hero-bg.jpg') center 22% / cover no-repeat;
}

/* NAV */
nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; display: flex; justify-content: space-between; align-items: center; padding: 1.2rem 3rem; background: rgba(14,14,14,0.92); backdrop-filter: blur(12px); border-bottom: 1px solid rgba(192,40,26,0.3); }
.logo { font-family: 'Bebas Neue', sans-serif; font-size: 1.6rem; letter-spacing: 0.12em; color: var(--white); text-decoration: none; align-items: center; display: flex; gap: 0.8rem; }
.logo span { color: var(--red); }
.logo img { width: 40px; height: 40px; object-fit: contain; border-radius: 50%; opacity: 0.8; }
.nav-links { display: flex; align-items: center; gap: 2rem; list-style: none; }
.nav-links a { color: var(--gray-light); text-decoration: none; font-size: 0.85rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; transition: color 0.2s; }
.nav-links a:hover, .nav-links a.current { color: var(--red-light); }
.nav-cta { background: var(--red); color: var(--white) !important; padding: 0.5rem 1.3rem; border-radius: 2px; }
.nav-cta:hover { background: var(--red-light) !important; }
.nav-burger { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 32px; height: 32px; background: none; border: none; cursor: pointer; padding: 0; }
.nav-burger span { display: block; width: 100%; height: 2px; background: var(--cream); transition: transform 0.25s, opacity 0.25s; }
.nav-burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-burger.open span:nth-child(2) { opacity: 0; }
.nav-burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* HERO (page d'accueil) */
.hero { min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr; align-items: center; padding: 0 3rem; gap: 4rem; position: relative; overflow: hidden; background: #0a0a0a url('/ressources/hero-bg.jpg') center 25% / cover no-repeat; }
.hero::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10,10,10,0.94) 0%, rgba(10,10,10,0.75) 50%, rgba(10,10,10,0.55) 100%), radial-gradient(ellipse 60% 80% at 70% 50%, rgba(192,40,26,0.12) 0%, transparent 70%); pointer-events: none; }
/* Page d'accueil (body.accueil-photo) : la photo reste fixe à l'écran et le contenu défile
   par-dessus — nette dans le hero, puis assombrie sous les sections (fond semi-opaque), comme
   le fond des autres pages (body.has-bg-photo). Élément fixed plutôt que
   background-attachment: fixed, ignoré sur iPhone. */
body.accueil-photo::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  background: #0a0a0a url('/ressources/hero-bg.jpg') center 25% / cover no-repeat;
}
body.accueil-photo .hero { background: transparent; }
body.accueil-photo section:not(.hero) { background: rgba(8,8,8,0.86); }
.hero-text { padding-top: 5rem; position: relative; }
.hero-tag { font-size: 0.75rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--red); margin-bottom: 1.2rem; display: flex; align-items: center; gap: 0.7rem; }
.hero-tag::before { content: ''; width: 2rem; height: 1px; background: var(--red); display: inline-block; }
h1 { font-family: 'Bebas Neue', sans-serif; font-size: clamp(4rem, 8vw, 7.5rem); line-height: 0.9; letter-spacing: 0.02em; color: var(--white); margin-bottom: 1.5rem; }
h1 em { font-style: normal; color: var(--red); }
/* Accueil : « 태권도 » calligraphié (image du kit graphique, encre sombre éclaircie par invert),
   vertical, à côté de la seule ligne « coréen » (même hauteur qu'une ligne du titre). */
.hero-titre { margin-bottom: 1.5rem; }
.hero-titre h1 { margin-bottom: 0; }
.hero-titre h1 .hangeul { display: inline-block; height: 0.8em; width: auto; margin-left: 0.18em; vertical-align: -0.02em; filter: invert(1); opacity: 0.6; }
.hero-sub { font-size: 1.05rem; font-weight: 300; color: var(--gray-light); max-width: 420px; margin-bottom: 2.5rem; line-height: 1.75; }
.btn-group { display: flex; gap: 1rem; align-items: center; }
.btn-primary { background: var(--red); color: var(--white); text-decoration: none; padding: 0.85rem 2.2rem; font-size: 0.85rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; border-radius: 2px; transition: background 0.2s, transform 0.15s; display: inline-block; }
.btn-primary:hover { background: var(--red-light); transform: translateY(-1px); }
.btn-ghost { color: var(--gray-light); text-decoration: none; font-size: 0.85rem; font-weight: 500; letter-spacing: 0.06em; display: flex; align-items: center; gap: 0.5rem; transition: color 0.2s; }
.btn-ghost:hover { color: var(--white); }
.btn-ghost::after { content: '→'; }
.hero-visual { display: flex; justify-content: center; align-items: center; padding-top: 5rem; position: relative; }
.hero-logo-big { width: min(400px, 100%); aspect-ratio: 1; display: flex; align-items: center; justify-content: center; position: relative; }
.hero-logo-big img { width: 360px; height: 360px; object-fit: contain; filter: drop-shadow(0 0 40px rgba(192,40,26,0.35)); }
.ring-outer { position: absolute; inset: 0; border: 2px dashed #b60e21; border-radius: 50%; animation: rotateSlow 25s linear infinite; }
.ring-inner { position: absolute; inset: 15px; border: 2px solid #b60e2188; border-radius: 50%; }

/* PAGE HEADER (bandeau de titre en haut des pages secondaires) — pas de fond propre : la
   photo vient de body.has-bg-photo juste derrière, visible dès le tout début de la page. */
.page-header { padding: 9rem 3rem 4rem; position: relative; }
.page-header-inner { position: relative; max-width: 720px; }
.page-header h1 { font-size: clamp(2.8rem, 5vw, 4.5rem); margin-bottom: 0.8rem; }
.page-header p { position: relative; font-size: 1rem; font-weight: 300; color: var(--gray-light); max-width: 46ch; line-height: 1.7; }
.breadcrumb { position: relative; font-size: 0.78rem; color: var(--gray-light); margin-bottom: 1.2rem; letter-spacing: 0.04em; }
.breadcrumb a { color: var(--gray-light); text-decoration: none; }
.breadcrumb a:hover { color: var(--red-light); }

/* STATS */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid rgba(255,255,255,0.06); border-bottom: 1px solid rgba(255,255,255,0.06); background: var(--gray); }
.stat { padding: 2rem 2.5rem; border-right: 1px solid rgba(255,255,255,0.06); }
.stat:last-child { border-right: none; }
.stat-num { font-family: 'Bebas Neue', sans-serif; font-size: 3.5rem; color: var(--red); line-height: 1; margin-bottom: 0.3rem; }
.stat-label { font-size: 0.8rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gray-light); }

/* SECTIONS */
section { padding: 7rem 3rem; }
.section-tag { font-size: 0.72rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--red); margin-bottom: 0.8rem; }
h2 { font-family: 'Bebas Neue', sans-serif; font-size: clamp(2.5rem, 5vw, 4rem); line-height: 1; letter-spacing: 0.02em; color: var(--white); margin-bottom: 1.5rem; }

/* Tuiles de navigation (page d'accueil) */
/* Séparations entre tuiles par un liseré sur chaque tuile (pas par le fond de la grille) : une
   dernière ligne incomplète ne laisse plus de grand bloc gris vide à droite. */
.nav-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.5px; margin-top: 3.5rem; }
.nav-tile { background: var(--dark); padding: 2.2rem; text-decoration: none; display: block; position: relative; overflow: hidden; transition: background 0.3s; box-shadow: 0 0 0 1px rgba(255,255,255,0.05); }
/* Communes voisines (page d'accueil, "Près de chez vous") en étiquettes. */
.villages { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 1.2rem 0 0; padding: 0; }
.villages li { padding: 6px 14px; border: 1px solid rgba(255,255,255,0.15); border-radius: 999px; font-size: 0.9rem; color: var(--white); }
.nav-tile:hover { background: var(--gray); }
.nav-tile::before { content: ''; position: absolute; top: 0; left: 0; width: 3px; height: 100%; background: var(--red); opacity: 0; transition: opacity 0.3s; }
.nav-tile:hover::before { opacity: 1; }
.nav-tile-title { font-family: 'Bebas Neue', sans-serif; font-size: 1.4rem; letter-spacing: 0.04em; color: var(--white); margin-bottom: 0.5rem; }
.nav-tile-desc { font-size: 0.85rem; font-weight: 300; color: var(--gray-light); line-height: 1.6; margin-bottom: 1rem; }
.nav-tile-link { font-size: 0.75rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--red-light); display: flex; align-items: center; gap: 0.4rem; }
.nav-tile-link::after { content: '→'; transition: transform 0.2s; }
.nav-tile:hover .nav-tile-link::after { transform: translateX(3px); }

/* Actualités (posts Facebook affichés avec le design du site) — liste plutôt qu'une grille de
   cartes : image à gauche, texte à droite. Le texte complet d'un post varie beaucoup en
   longueur (une ligne à plusieurs paragraphes) ; en grille ça donnait des cartes de hauteurs
   très inégales et peu lisibles, une liste large absorbe mieux cet écart. */
.news-grid { display: flex; flex-direction: column; gap: 1.2rem; max-width: 1000px; margin: 0 auto; }
.news-card { background: rgba(10,10,10,0.82); backdrop-filter: blur(6px); border: 1px solid var(--line); border-radius: 2px; overflow: hidden; text-decoration: none; display: flex; transition: border-color 0.25s; }
.news-card:hover { border-color: rgba(192,40,26,0.4); }
/* Zone de gauche (align-items: stretch, hérité, pour occuper toute la hauteur de la ligne —
   souvent plus grande que la photo elle-même vu la longueur variable du texte à côté) : un
   fond flouté de la même photo plutôt qu'un gris plat, la photo nette à sa taille naturelle
   centrée par-dessus — jamais recadrée ni déformée. */
.news-card-img-wrap { position: relative; width: 320px; flex: 0 0 320px; display: flex; align-items: center; justify-content: center; overflow: hidden; background: var(--gray); }
.news-card-img-bg { position: absolute; inset: -20px; background-size: cover; background-position: center; filter: blur(20px) brightness(0.45); transform: scale(1.1); }
.news-card-img { position: relative; z-index: 1; width: 100%; height: auto; display: block; }
.news-card-body { padding: 1.4rem 1.8rem; display: flex; flex-direction: column; flex: 1; min-width: 0; }
.news-card-date { font-size: 0.7rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--red); margin-bottom: 0.7rem; }
.news-card-text { font-size: 0.88rem; font-weight: 300; color: var(--gray-light); line-height: 1.65; margin-bottom: 1.1rem; white-space: pre-line; }
.news-card-link { font-size: 0.75rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--red-light); display: flex; align-items: center; gap: 0.4rem; margin-top: auto; }
.news-card-link::after { content: '→'; transition: transform 0.2s; }
.news-card:hover .news-card-link::after { transform: translateX(3px); }

/* ABOUT */
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6rem; align-items: center; }
.about-text p { font-weight: 300; color: var(--gray-light); margin-bottom: 1.2rem; font-size: 1rem; line-height: 1.8; }
.about-text p strong { color: var(--cream); font-weight: 500; }
.coaches { margin-top: 2rem; }
.coaches-title { font-size: 0.72rem; font-weight: 500; letter-spacing: 0.15em; text-transform: uppercase; color: var(--red); margin-bottom: 1rem; }
.coach-list { display: flex; flex-direction: column; gap: 0.6rem; }
.coach-item { display: flex; align-items: center; gap: 0.8rem; font-size: 0.9rem; color: var(--gray-light); }
.coach-item::before { content: ''; width: 6px; height: 6px; background: var(--red); border-radius: 50%; flex-shrink: 0; }
.coach-item-grade { font-size: 0.78rem; color: var(--gray-light); opacity: 0.7; }
.about-lieux { margin-top: 2rem; }
.lieu-item { display: flex; gap: 0.8rem; font-size: 0.85rem; color: var(--gray-light); margin-bottom: 0.6rem; line-height: 1.5; }
.lieu-item strong { color: var(--cream); font-weight: 500; min-width: 120px; }
.about-visual { display: flex; justify-content: center; align-items: center; }
.about-logo-frame { padding: 3rem;   display: flex; flex-direction: column; align-items: center; gap: 1.5rem; }
.about-logo-frame img { width: 250px; height: 250px; object-fit: contain; filter: drop-shadow(0 0 24px rgba(255, 255, 255, 1)); }
.about-logo-frame p { font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gray-light); text-align: center; }


/* COURS */
.cours-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; margin-top: 3.5rem; background: rgba(255,255,255,0.05); }
.cours-card { background: var(--dark); padding: 2.5rem; position: relative; overflow: hidden; transition: background 0.3s; }
.cours-card:hover { background: var(--gray); }
.cours-card::before { content: ''; position: absolute; top: 0; left: 0; width: 3px; height: 100%; background: var(--red); opacity: 0; transition: opacity 0.3s; }
.cours-card:hover::before { opacity: 1; }
.cours-icon { width: 40px; height: 40px; object-fit: contain; border-radius: 50%; opacity: 0.8; }
.cours-title { font-family: 'Bebas Neue', sans-serif; font-size: 1.5rem; letter-spacing: 0.05em; color: var(--white); margin-bottom: 0.3rem; }
.cours-age { font-size: 0.75rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--red); margin-bottom: 1rem; }
.cours-desc { font-size: 0.88rem; font-weight: 300; color: var(--gray-light); line-height: 1.7; margin-bottom: 1.5rem; }
.cours-schedule { display: flex; flex-direction: column; gap: 0.35rem; }
.cours-day { font-size: 0.8rem; color: var(--gray-light); display: flex; justify-content: space-between; align-items: flex-start; padding-bottom: 0.35rem; border-bottom: 1px solid rgba(255,255,255,0.04); gap: 1rem; }
.cours-day .day-name { font-weight: 500; color: var(--cream); min-width: 30px; flex-shrink: 0; }
.cours-day .day-detail { text-align: right; line-height: 1.4; }

/* TARIFS */
.tarifs-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: 3.5rem; }
.tarif-card { background: var(--dark); border: 1px solid rgba(255,255,255,0.07); padding: 2.5rem 2rem; border-radius: 2px; position: relative; transition: border-color 0.2s; }
 .tarif-card:hover { border-color: var(--red); background: linear-gradient(rgba(192,40,26,0.08), rgba(192,40,26,0.08)), var(--dark); }
.tarif-badge { position: absolute; top: -1px; right: 2rem; background: var(--red); color: var(--white); font-size: 0.68rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; padding: 0.3rem 0.8rem; border-radius: 0 0 4px 4px; }
.tarif-label { font-size: 0.72rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gray-light); margin-bottom: 0.8rem; }
.tarif-price { font-family: 'Bebas Neue', sans-serif; font-size: 3.2rem; color: var(--white); line-height: 1; margin-bottom: 0.2rem; }
.tarif-price sup { font-size: 1.4rem; font-family: 'DM Sans', sans-serif; font-weight: 300; vertical-align: super; }
.tarif-price sub { font-size: 0.95rem; font-family: 'DM Sans', sans-serif; font-weight: 300; color: var(--gray-light); }
.tarif-desc { font-size: 0.83rem; color: var(--gray-light); margin-bottom: 1.5rem; line-height: 1.6; font-weight: 300; }
.tarif-features { list-style: none; display: flex; flex-direction: column; gap: 0.6rem; margin-bottom: 2rem; }
.tarif-features li { font-size: 0.83rem; color: var(--gray-light); display: flex; align-items: flex-start; gap: 0.6rem; }
.tarif-features li::before { content: '✓'; color: var(--red); font-weight: 500; flex-shrink: 0; }
/* .btn-tarif est rouge par défaut (utilisé tel quel par tarifs.html, plusieurs boutons "S'inscrire
   en ligne"). cursor/font-family : cette classe habille aussi de vrais <button> (boutique...),
   pas seulement des <a> — sans ça le rendu par défaut du navigateur masquait le texte clair. */
.btn-tarif { display: block; width: 100%; text-align: center; padding: 0.75rem; background: var(--red); border: 1px solid var(--red); color: var(--cream); text-decoration: none; font-size: 0.78rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; border-radius: 2px; cursor: pointer; font-family: 'DM Sans', sans-serif; transition: all 0.2s; }
.btn-tarif:hover { background: var(--red-light); color: var(--white); }
.btn-tarif:disabled { opacity: 0.5; cursor: not-allowed; }
/* Variante secondaire (transparente) — bouton "Ajouter au panier" de la boutique, à côté du
   bouton .btn-tarif rouge "Payer et valider la commande". */
.btn-tarif-outline { background: transparent; border-color: rgba(255,255,255,0.15); }
.btn-tarif-outline:hover { background: transparent; border-color: var(--red); color: var(--red); }

/* CONTACT */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; margin-top: 1rem; }
.contact-info-list { display: flex; flex-direction: column; gap: 1.5rem; margin-bottom: 2rem; }
.contact-info-item { display: flex; gap: 1.2rem; align-items: flex-start; }
.contact-icon { width: 40px; height: 40px; border: 1px solid rgba(192,40,26,0.3); display: flex; align-items: center; justify-content: center; font-size: 1.1rem; flex-shrink: 0; border-radius: 2px; }
.contact-icon svg { width: 19px; height: 19px; color: var(--red); }
.contact-info-item h4 { font-size: 0.72rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gray-light); margin-bottom: 0.2rem; }
.contact-info-item p { font-size: 0.95rem; color: var(--cream); }
.contact-info-item a { color: var(--cream); text-decoration: none; }
.contact-info-item a:hover { color: var(--red-light); }
.social-row { display: flex; gap: 1rem; margin-top: 0.5rem; }
.social-btn { display: flex; align-items: center; gap: 0.5rem; font-size: 0.78rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gray-light); text-decoration: none; border: 1px solid rgba(255,255,255,0.1); padding: 0.5rem 1rem; border-radius: 2px; transition: all 0.2s; }
.social-btn:hover { border-color: var(--red); color: var(--red-light); }

/* Composants de formulaire partagés (utilisés par le formulaire de contact) */
.card { background: rgba(10,10,10,0.82); backdrop-filter: blur(6px); border: 1px solid var(--line); border-radius: 2px; }
.field { display: flex; flex-direction: column; gap: 0.4rem; }
.field label { font-size: 0.72rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gray-light); }
.field input, .field select, .field textarea { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1); color: var(--cream); padding: 0.75rem 1rem; font-family: 'DM Sans', sans-serif; font-size: 0.9rem; border-radius: 2px; outline: none; transition: border-color 0.2s; width: 100%; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--red); }
/* Champ rempli automatiquement par le navigateur : Chrome/Edge lui imposent un fond bleu-blanc et
   un texte noir. Texte remis en crème, changement de fond retardé indéfiniment. */
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus,
textarea:-webkit-autofill, select:-webkit-autofill {
  -webkit-text-fill-color: var(--cream); caret-color: var(--cream);
  transition: background-color 99999s ease-in-out 0s, color 99999s ease-in-out 0s;
}
/* Même traitement que les select de l'admin (voir admin.html) : fond sombre + texte cream sur
   les options, pour un menu déroulant qui reste dans le thème du site plutôt que le popup
   clair par défaut du navigateur. */
.field select option { background: var(--dark); color: var(--cream); }
.note { font-size: 12.5px; color: var(--gray-light); background: rgba(255,255,255,0.03); border-left: 3px solid var(--red); padding: 10px 14px; line-height: 1.55; margin-top: 6px; font-weight: 300; }

/* GALERIE */
.slideshow-track { overflow: hidden; width: 100%; cursor: grab; }
.slideshow-track:active { cursor: grabbing; }
.slideshow-inner { display: flex; gap: 12px; padding: 0 3rem; transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94); will-change: transform; }
.slide-item { flex: 0 0 320px; height: 260px; border-radius: 2px; overflow: hidden; position: relative; }
.slide-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease, filter 0.4s ease; display: block; filter: grayscale(1) contrast(1.05); }
.slide-item:hover img { filter: grayscale(0.4) contrast(1.05); transform: scale(1.04); }
.slide-dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,0.2); border: none; cursor: pointer; transition: all 0.2s; padding: 0; }
.slide-dot.active { background: var(--red); width: 18px; border-radius: 3px; }

/* FOOTER */
footer { background: rgba(8,8,8,0.88); border-top: 1px solid rgba(255,255,255,0.06); padding: 2.5rem 3rem; display: flex; justify-content: space-between; align-items: center; gap: 2rem; flex-wrap: wrap; }
.footer-brand { display: flex; align-items: center; gap: 0.8rem; }
.footer-brand img { width: 40px; height: 40px; object-fit: contain; border-radius: 50%; opacity: 0.8; }
.footer-brand-text span { color: var(--red); }
.footer-brand-text { font-family: 'Bebas Neue', sans-serif; font-size: 1.2rem; color: var(--white); letter-spacing: 0.08em; }
footer p { font-size: 0.78rem; color: var(--gray-mid); }
.footer-links { display: flex; gap: 1.8rem; list-style: none; flex-wrap: wrap; }
.footer-links a { font-size: 0.78rem; color: var(--gray-mid); text-decoration: none; transition: color 0.2s; }
.footer-links a:hover { color: var(--gray-light); }

/* ANIMATIONS */
@keyframes fadeUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
.hero-text > * { animation: fadeUp 0.7s ease both; }
.page-header-inner > * { animation: fadeUp 0.7s ease both; }
.hero-tag { animation-delay: 0.1s; }
h1, .hero-titre { animation-delay: 0.2s; }
.hero-sub, .page-header p { animation-delay: 0.3s; }
.btn-group { animation-delay: 0.4s; }
@keyframes rotateSlow { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

@media (max-width: 900px) {
  nav { padding: 1rem 1.5rem; }
  .nav-burger { display: flex; }
  .nav-links {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0; background: rgba(14,14,14,0.98); backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(192,40,26,0.3); padding: 0.5rem 1.5rem 1.2rem;
  }
  .nav-links.open { display: flex; }
  .nav-links li { width: 100%; border-top: 1px solid rgba(255,255,255,0.06); }
  .nav-links li:first-child { border-top: none; }
  .nav-links a { display: block; padding: 0.9rem 0; }
  .nav-links .nav-cta { display: inline-block; margin: 0.8rem 0 0.2rem; padding: 0.5rem 1.3rem; }
  .hero { grid-template-columns: 1fr; padding: 6rem 1.5rem 3rem; min-height: 80vh; background-position: 65% center; background-size: cover; }
  .hero-visual { display: none; }
  body.accueil-photo::before { background-position: 65% center; }
  .page-header { padding: 7rem 1.5rem 3rem; }
  .stats { grid-template-columns: 1fr; }
  .stat { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.06); }
  section { padding: 4rem 1.5rem; }
  .nav-tiles { grid-template-columns: 1fr; gap: 1px; }
  .about-grid { grid-template-columns: 1fr; gap: 3rem; }
  .about-visual { display: none; }
  .cours-grid { grid-template-columns: 1fr;  }
  .tarifs-grid { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; gap: 3rem; }
  .slide-item { flex: 0 0 78vw; height: 62vw; }
  .slideshow-inner { padding: 0; }
  .galerie-header { padding: 0 1.5rem !important; }
  .news-card { flex-direction: column; }
  .news-card-img-wrap { width: 100%; flex: none; }
  footer { flex-direction: column; text-align: center; padding: 2rem 1.5rem; }
}