/* scripts/styles.css */ /* Fichier principal de styles de l’application */


/* =========================================================
   IMPORTS & VARIABLES GLOBALES
   ========================================================= */


@import url("https://fonts.googleapis.com/css2?family=Lobster&display=swap"); /* Import de la police décorative Lobster utilisée dans le diaporama */


:root { /* Variables CSS globales pour les couleurs, rayons, ombres, etc. */
  --color-bg: #101014; /* Couleur de fond principale du site */
  --color-surface: #181820; /* Fond des cartes / surfaces surélevées */
  --color-text: #f5f5f5; /* Couleur de texte principale */
  --color-muted: #b3b3c0; /* Texte secondaire / descriptions */
  --color-accent: #d7263d; /* Couleur d’accent (boutons, éléments actifs) */
  --color-accent-soft: rgba(215, 38, 61, 0.25); /* Accent adouci pour les survols */
  --color-header-bg: #14141c; /* Fond du header */
  --color-header-border: #2b2b38; /* Bordure inférieure du header */
  --color-menu-bg: #111118; /* Fond du menu latéral */
  --color-menu-border: #20202a; /* Bordure du menu latéral */
  --color-link-hover: #ff3b4d; /* Couleur des liens/boutons au survol */

  --radius-sm: 4px; /* Petit rayon de bordure standard */
  --radius-md: 8px; /* Rayon moyen pour les éléments interactifs */
  --radius-lg: 12px; /* Grand rayon pour les cartes */

  --shadow-soft: 0 8px 24px rgba(0, 0, 0, 0.45); /* Ombre douce pour les cartes / panneaux */

  --transition-fast: 0.15s ease-out; /* Transition rapide pour petites interactions */
  --transition-med: 0.25s ease-out; /* Transition moyenne pour éléments plus lourds */

  /* Hauteur standard sur PC */
  --header-height: 72px; /* Hauteur du header utilisée pour le layout et le filigrane */
  --menu-width: 260px; /* Largeur de référence du menu latéral (PC) */
}



/* Jauge de progression globale du diaporama (barre verte) */
.diaporama-gauge-container { /* Conteneur de la barre de progression sous le diaporama */
  width: 100%; /* Occupe toute la largeur disponible */
  height: 18px; /* ~+10% par rapport à 16px pour une meilleure lisibilité */
  background: rgba(255, 255, 255, 0.15); /* Fond semi-transparent */
  border: 1px solid rgba(255, 255, 255, 0.3); /* Bordure claire */
  border-radius: 10px; /* Bords arrondis pour l’aspect jauge */
  overflow: hidden; /* Cache le contenu qui dépasse (remplissage) */
  backdrop-filter: blur(4px); /* Léger blur de fond (effet verre) */
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.1); /* Ombre interne pour relief */
  cursor: pointer; /* Peut être cliquable pour naviguer dans le diaporama */
  position: relative; /* Base pour positionner des éléments internes */
  touch-action: none; /* Empêche les gestes par défaut (mobile) sur la jauge */
}


.diaporama-gauge-fill { /* Remplissage animé de la jauge de progression */
  height: 100%; /* Remplit la hauteur du conteneur */
  width: 0%; /* Départ à 0%, mis à jour en JS */
  background-color: #22c55e; /* Couleur verte de base */
  background-image: linear-gradient(90deg, #22c55e, #4ade80); /* Gradient pour plus de volume */
  transition: width 0.1s linear; /* Lissage des changements de progression */
  border-radius: 10px; /* Suit le rayon du conteneur */
}


.diaporama-btn.active { /* État visuel des boutons de contrôle actifs */
  background-color: rgba(255,255,255,0.15); /* Léger fond clair derrière l’icône */
}




/* =========================================================
   RESET DE BASE & BODY
   ========================================================= */


*, *::before, *::after { box-sizing: border-box; } /* Inclut les bordures dans les calculs de largeur/hauteur */

html, body { margin: 0; padding: 0; height: 100%; } /* Supprime les marges par défaut et force la hauteur à 100% */

body {
  font-family: "Montserrat", system-ui, -apple-system, sans-serif; /* Police principale du site */
  background: radial-gradient(circle at top left, #050509 0, #050509 45%, #050509 100%); /* Fond sombre avec léger dégradé */
  color: var(--color-text); /* Couleur de texte par défaut */
  -webkit-font-smoothing: antialiased; /* Meilleur rendu de police sur WebKit */

  /* AJOUT : Nécessaire pour le positionnement du filigrane */
  position: relative;  /* Permet d’ancrer ::before au body */
  min-height: 100vh; /* Assure un minimum plein écran */

  /* AJOUT CRUCIAL ICI : */
  z-index: 0; /* Met le body en dessous des overlays (diaporama, etc.) */
}


body::before { /* Filigrane en arrière-plan (logo en watermark) */
  content: ""; /* Pseudo-élément généré */
  position: fixed; /* L'image reste au centre même si on scrolle */
  top: var(--header-height); /* Commence sous le header fixe */
  left: 0;
  width: 100%;
  height: calc(100% - var(--header-height)); /* Occupe tout l’espace sous le header */
  z-index: -1; /* Place l'image DERRIÈRE le texte et le contenu */
  pointer-events: none; /* Permet de cliquer à travers l'image */

  /* Chemin vers ton image */
  background-image: url('../images/logo.png');  /* Logo utilisé comme filigrane */

  /* REGLAGE 1 : MODE "LOGO ENTIER" (Recommandé pour un logo) */
  /* L'image est centrée, ne se répète pas, et s'adapte sans être coupée */
  background-repeat: no-repeat; /* Empêche la répétition du logo */
  background-position: center; /* Centre le logo dans la zone visible */
  background-size: contain; /* Garde le logo entier sans le couper */

  /* REGLAGE 2 : MODE "PLEIN ECRAN" (Si tu préfères que ça remplisse tout) */
  /* Décommente la ligne ci-dessous et commente 'background-size: contain' */
  /* background-size: cover; */

  /* TRANSPARENCE FORTE */
  opacity: 0.15; /* Intensité du filigrane (0.15 = très subtil) */

  /* Mélange l'image avec le fond noir pour un effet plus incrusté */
  /* mix-blend-mode: overlay; */ /* Optionnel pour fusionner avec le fond */
}


/* =========================================================
   HEADER PRINCIPAL
   ========================================================= */


.site-header {
  position: fixed; /* Fixe le header en haut de la fenêtre */
  top: 0; left: 0; right: 0;
  height: var(--header-height); /* Hauteur définie par la variable */
  background: linear-gradient(120deg, var(--color-header-bg), #181822 60%, #121217 100%); /* Dégradé sombre */
  border-bottom: 1px solid var(--color-header-border); /* Ligne de séparation avec le contenu */
  display: flex; /* Alignement horizontal du logo + bouton */
  align-items: center; /* Centrage vertical des éléments */
  padding: 0 1.5rem; /* Marges horizontales internes */
  z-index: 1000; /* Toujours au-dessus du reste du contenu */
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.6); /* Ombre marquée sous le header */
}


/* Logo + titre */
.logo-title {
  display: flex; /* Aligne logo et titre sur une ligne */
  align-items: center; /* Centre verticalement logo et texte */
  gap: 1rem; /* Espace entre logo et bloc de texte */
}


/* Logo circulaire Shotokan */
.logo-shotokan {
  width: 48px; /* Taille du cercle contenant le logo */
  height: 48px;
  border-radius: 999px; /* Cercle parfait */
  background: radial-gradient(circle at 30% 20%, #ff5b6c, var(--color-accent) 55%, #5a050f 100%); /* Dégradé rouge */
  display: flex; /* Centre l’icône interne */
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.07); /* Fin trait clair autour du cercle */
}


.logo-shotokan svg { width: 36px; height: 36px; } /* Dimension du SVG interne si utilisé */
.logo-circle { fill: none; stroke: rgba(0, 0, 0, 0.7); stroke-width: 4; } /* Style pour un cercle décoratif */
.logo-tiger { fill: rgba(0, 0, 0, 0.75); } /* Remplissage d’une icône tigre éventuelle */
.logo-kanji { fill: rgba(255, 255, 255, 0.9); opacity: 0.9; } /* Style pour des kanji blancs dans le logo */


/* Titre principal */
.title-block h1 {
  font-family: "Oswald", sans-serif; /* Police de titre condensée */
  font-weight: 600; /* Épaisseur intermédiaire */
  letter-spacing: 0.08em; /* Espacement des lettres pour un effet logo */
  text-transform: uppercase; /* Tout en majuscules */
  margin: 0; /* Supprime les marges par défaut */
  font-size: 1.8rem; /* Taille du titre */
  line-height: 1.2; /* Hauteur de ligne compacte */
}


/* Sous-titre */
.title-block .subtitle {
  margin: 0; /* Supprime la marge par défaut */
  color: var(--color-muted); /* Texte plus discret */
  font-size: 0.85rem; /* Taille réduite */
  line-height: 1.4; /* Hauteur de ligne confortable */
}


/* Bouton MENU */
.header-menu-button {
  margin-left: auto; /* Pousse le bouton complètement à droite */
  padding: 0.35rem 0.9rem; /* Dimensions du bouton */
  border-radius: 999px; /* Bouton pilule */
  border: 1px solid rgba(0, 0, 0, 0.6); /* Bord sombre pour relief */
  background: linear-gradient(120deg, var(--color-accent), #ff5466); /* Dégradé rouge vif */
  color: #ffffff; /* Texte blanc */
  font-size: 0.85rem; /* Taille du texte */
  letter-spacing: 0.12em; /* Espacement accentuant l’effet “MENU” */
  text-transform: uppercase; /* Texte en majuscules */
  cursor: pointer; /* Transforme le curseur en main */
  transition: transform 0.15s ease-out; /* Animation de translation au survol */
}


/* Au survol, juste un léger effet, pas de changement de couleur */
.header-menu-button:hover {
  transform: translateY(-1px); /* Légère remontée du bouton */
}


.form-group {
  margin-bottom: 1.2rem; /* Espacement vertical entre les groupes de formulaire */
}


/* Un peu plus d'air avant les cases */
.human-check-group {
  margin-top: 1.2rem; /* Décale le groupe de checkboxes vers le bas */
}


/* Espacement spécifique entre les deux cases */
.human-check-group + .human-check-group {
  margin-top: 3rem; /* espace supplémentaire avant "Je suis un humain" */
}



/* Container général */
.human-check {
  display: inline-flex; /* Dispose la case et le label côte à côte */
  align-items: center; /* Centre verticalement */
  gap: 0.5rem; /* Espace entre la case et le texte */
  padding: 0.6rem 0.9rem; /* Rembourrage autour du contenu */
  border-radius: var(--radius-md); /* Angle arrondi moyen */
  background: #111118; /* Fond sombre du bloc de validation */
  border: 1px solid rgba(255, 255, 255, 0.12); /* Légère bordure claire */
}


/* On cache les checkboxes natives */
#humanCheck,
#newsletterOptIn {
  position: absolute; /* Sort la checkbox du flux */
  opacity: 0; /* La rend invisible */
  pointer-events: none; /* Empêche tout clic direct dessus */
}


/* Label cliquable */
.human-check label {
  display: inline-flex; /* Place horizontalement la pseudo-case et le texte */
  align-items: center; /* Centre verticalement */
  gap: 0.5rem; /* Espace entre la case et le texte */
  cursor: pointer; /* Indique que le label est cliquable */
}


/* Faux carré de validation */
.human-check-box {
  width: 18px;
  height: 18px;
  border-radius: 4px; /* Coins légèrement arrondis */
  border: 2px solid rgba(255, 255, 255, 0.6); /* Bordure claire visible */
  background: transparent; /* Fond transparent par défaut */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, border-color 0.15s ease; /* Animation au changement d’état */
}


/* Texte "Je suis un humain" */
.human-check-label {
  color: var(--color-text); /* Texte blanc */
  font-size: 0.9rem; /* Taille modeste */
}


/* État coché : carré rempli + petite coche */
#humanCheck:checked + label .human-check-box {
  background: linear-gradient(120deg, var(--color-accent), #ff5466); /* Remplit la case avec un dégradé rouge */
  border-color: var(--color-accent); /* Harmonise la bordure avec l’accent */
}


#humanCheck:checked + label .human-check-box::after {
  content: "✓"; /* Affiche une coche */
  font-size: 0.9rem; /* Taille de la coche */
  color: #fff; /* Coche blanche */
}
/* État coché pour "Recevoir les actualités du KDojo" */
#newsletterOptIn:checked + label .human-check-box {
  background: linear-gradient(120deg, var(--color-accent), #ff5466); /* Même style de remplissage que l’autre checkbox */
  border-color: var(--color-accent); /* Bordure accentuée */
}


#newsletterOptIn:checked + label .human-check-box::after {
  content: "✓"; /* Coche dans la case newsletter */
  font-size: 0.9rem;
  color: #fff;
}


/* Erreur sous la case */
.form-error[data-for="humanCheck"] {
  display: block; /* Force l’affichage en bloc sous l’input */
  margin-top: 0.3rem; /* Petit espace au-dessus du message */
  font-size: 0.8rem; /* Texte un peu plus petit */
  color: #ff8080; /* Rouge clair pour signaler l’erreur */
}


/* Messages d'erreur des formulaires */
.form-error {
  display: block; /* Affichage en bloc */
  margin-top: 0.3rem; /* Espace par rapport au champ */
  font-size: 0.8rem; /* Taille du texte de message d’erreur */
  color: #ff4d4d; /* Rouge bien visible pour les erreurs */
}



/* =========================================================
   LAYOUT GLOBAL & MENU LATÉRAL
   ========================================================= */


.app-layout {
  display: block; /* Container principal simple */
  height: 100vh; /* Prend toute la hauteur de la fenêtre */
  padding-top: var(--header-height); /* Décale le contenu sous le header fixe */
}


/* Menu latéral (slide-in) */
.side-menu {
  background: radial-gradient(circle at top, #1b1b28, var(--color-menu-bg)); /* Fond sombre légèrement texturé */
  border-left: 1px solid var(--color-menu-border); /* Séparation visuelle du contenu */
  position: fixed; /* Collé au bord de la fenêtre */
  top: var(--header-height); /* Démarre sous le header */
  right: 0; /* Attaché au bord droit */
  width: min(280px, 90vw); /* Largeur maximale avec limite sur petits écrans */
  max-height: calc(100vh - var(--header-height)); /* Hauteur disponible sous le header */
  overflow-y: auto; /* Barre de scroll interne si nécessaire */
  opacity: 0; /* Caché par défaut */
  transform: translateY(-10px); /* Légère translation vers le haut pour l’animation */
  transition: all 0.25s ease-out; /* Animation d’apparition/disparition */
  z-index: 900; /* Au-dessus du contenu principal, mais sous certains overlays */
  box-shadow: -10px 10px 30px rgba(0,0,0,0.6); /* Ombre portée vers l’intérieur */
  pointer-events: none; /* Inactif tant qu’il n’est pas visible */
}


.side-menu.is-visible {
  opacity: 1; /* Devient visible */
  transform: translateY(0); /* Reprend sa position normale */
  padding: 1rem 0.5rem; /* Rembourrage interne quand ouvert */
  pointer-events: auto; /* Réactive les interactions */
}


/* Clics désactivés quand le menu est fermé */
.side-menu:not(.is-visible) .menu-root {
  pointer-events: none; /* Desactive les clics sur les boutons du menu caché */
}


/* Clics réactivés quand le menu est ouvert */
.side-menu.is-visible .menu-root {
  pointer-events: auto; /* Rétablit l’interaction avec les items du menu */
}


/* Liste racine du menu */
.menu-root {
  list-style: none; /* Retire les puces */
  margin: 0; /* Supprime les marges par défaut */
  padding: 0.4rem 0; /* Petite marge verticale interne */
}


.menu-root > li {
  margin-bottom: 0.35rem; /* Espace entre les éléments de menu */
}


/* Entrées de menu (niveau 1 + sous-menus) */
.menu-item,
.submenu-link {
  width: 100%; /* S’étend sur la largeur du menu */
  text-align: left; /* Alignement du texte à gauche */
  background: transparent; /* Pas de fond par défaut */
  border: none; /* Supprime le style bouton natif */
  color: var(--color-text); /* Texte blanc */
  padding: 0.55rem 0.85rem; /* Zone cliquable confortable */
  border-radius: var(--radius-md); /* Coins arrondis modérés */
  cursor: pointer; /* Interaction évidente */
  font-size: 0.9rem; /* Taille standard pour la navigation */
  display: flex; /* Permet d’ajouter icône/flèche à droite */
  align-items: center; /* Centre verticalement le contenu */
  justify-content: space-between; /* Titre à gauche, flèche à droite */
}


.menu-item:hover,
.submenu-link:hover {
  background: var(--color-accent-soft); /* Met en évidence l’élément survolé */
  color: #fff; /* Texte blanc quand survolé */
}


/* Élément de menu actif */
.menu-item.is-active {
  background: linear-gradient(120deg, var(--color-accent), #ff5466); /* Dégradé rouge pour la section active */
  color: #fff; /* Texte blanc */
}


/* Sous-menu repliable */
.submenu {
  list-style: none; /* Pas de puces */
  padding: 0.25rem 0.25rem 0.35rem 1.5rem; /* Décalage visuel sous l’élément parent */
  border-left: 1px solid rgba(255,255,255,0.05); /* Trait discret pour marquer la hiérarchie */
  max-height: 0; /* Caché par défaut (replié) */
  overflow: hidden; /* Cache le contenu hors hauteur */
  transition: 0.25s; /* Animation d’ouverture/fermeture */
  opacity: 0; /* Invisible tant que fermé */
}


.submenu.is-open {
  max-height: 800px; /* Hauteur max suffisante pour contenir les items */
  opacity: 1; /* Rendu visible */
  transform: translateY(0); /* Aligné sans décalage vertical */
}



/* =========================================================
   CONTENU PRINCIPAL
   ========================================================= */


.main-content {
  padding: 1.25rem 1.75rem; /* Marges internes autour du contenu */
  position: relative; /* Base pour des positionnements absolus internes */
  overflow-y: auto; /* Scroll vertical si le contenu dépasse */
  max-height: calc(100vh - var(--header-height)); /* Limite la hauteur sous le header */
}


/* Sections de contenu (accueil, techniques, vidéos, etc.) */
.content-section {
  display: none; /* Toutes les sections sont cachées par défaut */
  opacity: 0; /* Invisible initialement */
  transform: translateY(10px); /* Légère translation pour l’animation d’entrée */
  transition: 0.25s; /* Transition sur opacité et transform */
}


.content-section.is-active {
  display: block; /* Affiche la section active */
  opacity: 1; /* Pleinement visible */
  transform: translateY(0); /* Position normale */
}


.content-section h2 {
  font-family: "Oswald"; /* Police de titre cohérente avec le header */
  font-size: 1.4rem; /* Taille du sous-titre de section */
  text-transform: uppercase; /* Titre de section en majuscules */
  margin: 0 0 0.75rem 0; /* Espace au-dessous du titre */
}


/* Exception pour le titre de l'accueil : autoriser les minuscules */
#section-accueil h2 {
    text-transform: none; /* Désactive la majuscule forcée */
}


.content-section p {
  color: var(--color-muted); /* Texte des paragraphes plus doux */
  line-height: 1.6; /* Lecture confortable */
}


/* Fallback plein écran diaporama */
.force-fullscreen,
:fullscreen,
:-webkit-full-screen {
  position: fixed !important;
  inset: 0 !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100dvh !important; /* dvh s'adapte à la barre Android */
  
  /* CRUCIAL : Annule les styles du wrapper (bordures, animation, centrage) */
  transform: none !important; 
  margin: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  max-width: none !important;
  max-height: none !important;

  z-index: 20000 !important; /* Passe au-dessus de tout */
  background: #ffffff !important; /* Force le fond blanc (ou var(--color-bg) selon préférence) */
}

/* Optionnel : Assurer que le fond soit blanc spécifiquement si la classe est active sur le wrapper */
.diaporama-wrapper.force-fullscreen {
    background-color: #fff; /* Force le blanc si c'est le conteneur principal */
}



/* =========================================================
   BOUTONS D’ACTION
   ========================================================= */


.btn-accent,
.btn-link {
  display: inline-flex; /* Alignement flexible pour l’icon + texte */
  align-items: center; /* Centre verticalement contenus */
  justify-content: center; /* Centre horizontalement contenus */
  padding: 0.55rem 1.1rem; /* Dimensions du bouton */
  border-radius: 999px; /* Bouton arrondi type “pilule” */
  border: none; /* Pas de bordure externe explicite */
  background: linear-gradient(120deg, var(--color-accent), #ff5466); /* Dégradé d’accent */
  color: #fff; /* Texte blanc */
  font-weight: 600; /* Texte plus marqué */
  text-decoration: none; /* Supprime le soulignement si lien */
  cursor: pointer; /* Indique l’interaction */
  transition: transform 0.15s, box-shadow 0.15s; /* Animation au survol */
}


.btn-accent:hover {
  transform: translateY(-1px); /* Légère remontée du bouton */
  background: var(--color-link-hover); /* Passe à la couleur de hover */
}



/* =========================================================
   GRILLE TECHNIQUES & CARTES
   ========================================================= */


.section-header {
  padding-bottom: 1.5rem; /* Espace sous l’en-tête de section */
  padding-top: 0.5rem; /* Espace au-dessus */
}


.section-title {
  font-size: 2.2rem; /* Taille du titre majorée */
  margin-bottom: 0.5rem; /* Espace sous le titre */
}


.section-subtitle {
  font-size: 1rem; /* Taille pour le sous-titre */
  color: var(--color-muted); /* Ton adouci */
}


/* Grille des cartes techniques (PC/tablette) */
.techniques-grid {
  display: grid; /* Layout responsive en grille */
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Colonnes flexibles min 200px */
  gap: 1rem; /* Espace entre les cartes */
  margin-top: 1rem; /* Espace au-dessus de la grille */
}


/* Carte technique générique */
.technique-card {
  display: flex; /* Permet flex column / row selon media queries */
  flex-direction: column; /* Par défaut : contenu empilé verticalement */
  align-items: center; /* Centre le contenu horizontalement */
  text-align: center; /* Centrage du texte */
  background: var(--color-surface); /* Fond sombre de carte */
  border: 1px solid rgba(255, 255, 255, 0.08); /* Bordure subtile */
  border-radius: var(--radius-lg); /* Coins arrondis marqués */
  padding: 1.5rem 1rem; /* Espace interne */
  cursor: pointer; /* Signale la cliquabilité */
  transition: 0.15s; /* Douce animation sur hover */
}


.technique-card:hover {
  transform: translateY(-3px); /* Légère élévation au survol */
  background: #252535; /* Fond légèrement plus clair */
}


/* Icône dans une carte technique */
.technique-card .card-icon {
  width: 80px; /* Taille de l’icône cercle ou image */
  height: 80px;
  color: var(--color-accent); /* Couleur principale éventuelle de l’icône */
  margin-bottom: 0.75rem; /* Espace entre l’icône et le titre */
}


/* Titre de carte technique */
.technique-card .card-title {
  font-size: 1rem; /* Taille du titre de technique */
  font-weight: 700; /* Texte en gras */
  color: #fff; /* Blanc pour le contraste */
  margin: 0; /* Supprime la marge par défaut */
}


/* Description courte de carte technique */
.technique-card .card-description {
  font-size: 0.85rem; /* Texte un peu plus petit */
  color: var(--color-muted); /* Ton adouci pour la description */
  margin-top: 0.25rem; /* Légère marge au-dessus */
}


/* Image dans une icône de carte */
.card-icon-image {
  width: 100%; /* Occupe le conteneur d’icône */
  height: 100%;
  object-fit: contain; /* Garde l’image complète sans découpe */
  display: block; /* Évite les espaces inline */
}



/* =========================================================
   CATÉGORIES TECHNIQUES (tuiles)
   ========================================================= */


/* Grille de tuiles de catégories techniques */
.techniques-categories-grid {
  display: grid; /* Grille responsive pour les catégories */
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); /* Largeur min 180px */
  gap: 1rem; /* Espace entre tuiles */
  margin: 1rem 0 1.5rem; /* Espace autour de la grille */
}


/* Tuile de catégorie active */
.technique-card.tech-category-tile.is-active {
  background: #252535; /* Fond plus clair pour la catégorie sélectionnée */
}


/* Tuile de catégorie inactive */
.technique-card.tech-category-tile:not(.is-active) {
  background: #181820; /* Fond par défaut plus sombre */
}


/* Liste de lignes techniques (utilise renderMetalLinesList) */
.line-list.techniques-list-lines {
  width: 100%; /* S’assure de prendre toute la largeur de la colonne */
}


/* Tuiles de catégories techniques = pleine colonne */
.technique-card.tech-category-tile {
  width: 100%; /* Évite les tailles variables, occupe toute la colonne */
}


/* Grille des catégories techniques sur mobile (1 à 3 colonnes) */
@media (max-width: 768px) {
  .techniques-categories-grid {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); /* Réduis la largeur minimale sur mobile */
    gap: 0.75rem; /* Espace un peu réduit */
    margin-top: 1rem; /* Espace supérieur */
  }
}
@media (max-width: 768px) {
  .diaporama-slider-container {
    min-height: 45vh;   /* un peu plus de place sur smartphone */
  }
}



/* =========================================================
   CATÉGORIES VIDÉOS (tuiles)
   ========================================================= */


/* Grille de catégories vidéos (Kata / Kumite / Karaté Contact) */
.video-tiles {
  display: grid; /* Grille de tuiles vidéo */
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); /* Colonnes adaptatives */
  gap: 1rem; /* Espace entre tuiles */
  margin: 1rem 0 1.5rem; /* Espace autour de la grille */
  width: 100%; /* Occupe toute la largeur disponible */
}



/* Tuiles de catégories vidéos */
.video-card-tile {
  display: flex; /* Layout flexible pour contenir icône + texte */
  flex-direction: column; /* Empile verticalement */
  align-items: center; /* Centre le contenu horizontalement */
  text-align: center; /* Texte centré */
  background: var(--color-surface); /* Fond sombre de la carte */
  border: 1px solid rgba(255, 255, 255, 0.08); /* Bordure subtile */
  border-radius: var(--radius-lg); /* Coins arrondis importants */
  padding: 1.5rem 1rem; /* Espace interne confortable */
  cursor: pointer; /* Cliquable (sélection de catégorie) */
  transition: 0.15s; /* Douce animation sur hover */
}


/* Tuile vidéo active */
.video-card-tile.is-active {
  background: #252535; /* Fond plus clair pour la catégorie active */
}


/* Tuile vidéo inactive */
.video-card-tile:not(.is-active) {
  background: #181820; /* Fond plus sombre pour inactif */
}


/* Styles hérités d’une ancienne carte vidéo simple (conservés si réutilisés) */
.video-tile {
  background: var(--color-surface); /* Fond de carte simple */
  border: 1px solid rgba(255, 255, 255, 0.08); /* Bordure légère */
  border-radius: var(--radius-lg); /* Coins arrondis */
  padding: 1rem 1.2rem; /* Marges internes */
  cursor: pointer; /* Indique l’interactivité */
  transition: 0.15s; /* Animation de hover */
}


.video-tile:hover {
  transform: translateY(-3px); /* Légère remontée au survol */
  background: #252535; /* Fond plus clair sur hover */
}


.video-tile h3 {
  margin: 0; /* Enlève les marges par défaut */
  font-size: 1rem; /* Taille du titre vidéo */
  font-weight: 700; /* Texte en gras */
  color: #fff; /* Texte blanc */
}


/* Frame vidéo intégrée (YouTube) */
.video-card iframe {
  width: 100%; /* S’adapte à la largeur du conteneur */
  aspect-ratio: 16 / 9; /* Force un ratio 16:9 */
  height: auto; /* Hauteur auto selon la largeur */
  border: none; /* Enlève la bordure iframe par défaut */
  border-radius: var(--radius-md); /* Coins arrondis sur le player */
}


/* Wrapper ratio 16:9 */
.video-frame {
  position: relative; /* Base pour l’iframe en position absolue */
  width: 100%; /* Occupe toute la largeur */
  padding-bottom: 56.25%; /* 16/9 ≈ 56.25% pour ratio responsive */
  height: 0; /* Hauteur gérée par padding-bottom */
  overflow: hidden; /* Cache ce qui dépasse */
}


.video-frame iframe {
  position: absolute; /* Positionne la vidéo par dessus le wrapper */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none; /* Pas de bordure additionnelle */
}



/* =========================================================
   LISTE DES TECHNIQUES (dans une catégorie)
   ========================================================= */


.techniques-list {
  list-style: none; /* Retire les puces de la liste */
  padding: 0; /* Supprime le padding par défaut */
  margin: 0; /* Supprime les marges externes */
}


/* Ligne clicable : nom d’une technique */
.tech-list-item {
  width: 100%; /* Occupe toute la largeur disponible */
  text-align: left; /* Texte aligné à gauche */
  background: none; /* Pas de fond supplémentaire */
  border: none; /* Pas de bordure visuelle pour le bouton */
  color: var(--color-text); /* Texte blanc */
  font-size: 1.1rem; /* Taille du nom de la technique */
  padding: 0.8rem 0; /* Hauteur de ligne cliquable confortable */
  cursor: pointer; /* Indique une action au clic */
  border-bottom: 1px solid rgba(255,255,255,0.05); /* Séparation légère entre lignes */
}


.tech-list-item:hover {
  color: var(--color-accent); /* Texte en couleur d’accent au survol */
  transform: translateX(3px); /* Légère translation vers la droite */
}


/* Bouton retour */
.back-button {
  color: var(--color-accent); /* Bouton dans la couleur d’accent */
  border: none; /* Pas de bordure supplémentaire */
  background: none; /* Pas de fond */
  cursor: pointer; /* Action possible au clic */
  font-weight: 600; /* Texte légèrement plus gras */
  margin-bottom: 1rem; /* Espace sous le bouton */
  display: flex; /* Permet d’ajouter une icône à côté du texte */
  align-items: center; /* Centre verticalement l’ensemble */
  gap: 0.5rem; /* Espace entre l’icône et le texte */
}


/* Séparateur vertical entre groupes de techniques */
.tech-line-break {
  grid-column: 1 / -1; /* Étend sur toutes les colonnes de la grille */
  height: 0.75rem; /* Espacement vertical visible */
  padding: 0;
  margin: 0;
}



/* =========================================================
   DIAPORAMA (overlay techniques)
   ========================================================= */


#section-techniques {
  display: flex; /* Permet de centrer le conteneur du diaporama */
  justify-content: center; /* Centre horizontalement */
  align-items: center; /* Centre verticalement */
  position: fixed; /* Overlay plein écran */
  inset: 0; /* Couvre toute la fenêtre */
  background: rgba(0,0,0,0.85); /* Fond noir semi-transparent */
  z-index: 10000; /* Par-dessus quasi tout le reste */
  opacity: 0; /* Caché tant qu’inactif */
  pointer-events: none; /* Désactive les clics lorsqu’inactif */
  transition: opacity 0.05s ease; /* Apparition rapide */
}


#section-techniques.is-active {
  opacity: 1; /* Affiche le diaporama */
  pointer-events: auto; /* Réactive les interactions */
}


/* Cadre principal du diaporama */
#mon-conteneur-wrapper {
  position: relative; /* Base pour les éléments internes (barre, titres) */
  width: 80vw; /* Largeur en pourcentage de la fenêtre */
  height: 85vh; /* Hauteur en pourcentage de la fenêtre */
  max-width: 1200px; /* Limite de largeur */
  max-height: 900px; /* Limite de hauteur */
  background: #ffffff; /* Fond blanc du diaporama */
  box-shadow: 0 0 50px rgba(0,0,0,0.9); /* Ombre forte autour du cadre */
  border-left: 4px solid #1a1a1a; /* Bordures latérales noires */
  border-right: 4px solid #1a1a1a;
  transition: all 0.3s ease; /* Transition globale pour zoom, opacité, etc. */
}


#mon-conteneur-wrapper.is-visible {
  opacity: 1; /* Opacité maximale */
  transform: scale(1); /* Échelle normale (animation d’apparition possible) */
}


/* Racine JS du diaporama */
#mon-conteneur.diaporama-container {
  width: 100%; /* Remplit le wrapper horizontalement */
  height: 100%; /* Remplit le wrapper verticalement */
  background-color: transparent !important; /* Laisse le fond géré par les slides */
  display: block !important; /* Forçage pour neutraliser des styles externes */
  margin: 0;
  padding: 0;
}


#diaporama-root {
  width: 100%; /* Couvre le conteneur */
  height: 100%;
  display: flex; /* Layout vertical du diaporama (titre, slides, barre) */
  flex-direction: column;
  overflow: hidden; /* Cache les débordements */
}


/* Titre principal */
.diaporama-main-title {
  font-family: 'Lobster', cursive; /* Utilise la police décorative pour le titre du diaporama */
  font-size: 2.5rem; /* Taille importante pour marquer le titre */
  color: #fff; /* Texte blanc */
  text-shadow: 1px 1px 2px #000; /* Légère ombre pour lisibilité sur fond sombre */
  text-align: center; /* Centré horizontalement */
  background: linear-gradient(180deg, #666666 0%, #2a2a2a 50%, #000000 51%, #444444 100%); /* Fond effet barre métallique */
  border-bottom: 1px solid #000; /* Séparation avec le contenu du diaporama */
  padding: 0.5rem 0; /* Espace vertical interne */
  margin: 0; /* Supprime les marges par défaut du h1/h2 */
  flex-shrink: 0; /* Empêche que la barre soit compressée */
}


.diaporama-main-title.hidden {
  display: none; /* Permet de masquer le titre si besoin */
}


/* Container des slides */
.diaporama-slider-container {
  position: relative; /* Base pour positionner les slides en absolu */
  flex-grow: 1; /* Occupe tout l’espace vertical restant */
  width: 100%; /* Remplit la largeur du diaporama */
  min-height: 40vh; /* hauteur mini pour éviter le 0px */
  background: #ffffff; /* Fond blanc derrière les slides */
  overflow: hidden; /* Cache ce qui déborde des slides */
}


/* Toast diaporama : message en bas de l'écran */
.diaporama-toast {
  position: absolute; /* Position flottante dans le conteneur des slides */
  left: 50%; /* Centrage horizontal */
  bottom: 12px; /* Positionné au bas du diaporama */
  transform: translateX(-50%); /* Centre exactement */
  background: rgba(0, 0, 0, 0.9); /* Fond noir quasi opaque */
  color: #fff; /* Texte blanc */
  padding: 6px 12px; /* Dimensions du toast */
  border-radius: 999px; /* Toast arrondi de type “pill” */
  font-size: 0.8rem; /* Texte plus petit */
  opacity: 0; /* Invisble par défaut */
  pointer-events: none; /* Aucun clic possible lorsque caché */
  transition: opacity 0.2s ease; /* Animation d’apparition/disparition */
  z-index: 100; /* Au-dessus du contenu du slide */
}


.diaporama-toast.visible {
  opacity: 1; /* Devient visible */
  pointer-events: auto; /* Permet des interactions éventuelles */
}



/* Titre du site dans la carte */
.link-card h3 {
  margin-bottom: 0.25rem; /* Réduit l'espace sous le titre */
}


/* Description sous le titre (même police que lexique) */
.link-card .lexique-definition {
  margin-top: 0;           /* Colle au titre */
  margin-bottom: 1.5rem;   /* Augmente l'espace avant le bouton */
}


/* Bouton "Visiter" */
.link-card .btn-link {
  margin-top: 0;           /* Au cas où il y aurait une marge par défaut */
}


/* Slide individuelle */
.diaporama-slide {
  position: absolute; /* Tous les slides se superposent */
  inset: 0; /* Occupe tout le conteneur */
  opacity: 0; /* Invisibles par défaut */
  pointer-events: none; /* Déclenchements désactivés tant qu’inactifs */
}


.diaporama-slide.active {
  opacity: 1; /* Slide actif visible */
  pointer-events: auto; /* Interactions possibles */
  z-index: 10; /* Au-dessus des autres slides */
}


/* Background visuel d’un slide */
.diaporama-slide-bg {
  position: absolute; /* Couche de fond du slide */
  inset: 0; /* Remplit toute la surface du slide */
  background-size: contain; /* Affiche l’image entière sans la couper */
  background-position: center; /* Centre l’image */
  background-repeat: no-repeat; /* Empêche la répétition */
}


/* Overlay de détails de slide */
.diaporama-details {
  position: absolute; /* Couvre le slide entier */
  inset: 0;
  background: rgba(0,0,0,0.9); /* Fond noir quasi opaque */
  display: flex; /* Permet de centrer le contenu de détail */
  align-items: center;
  justify-content: center;
  opacity: 0; /* Caché par défaut */
  transition: 0.4s; /* Animation d’apparition/disparition */
  z-index: 50; /* Au-dessus du slide */
  color: white; /* Texte blanc */
  pointer-events: none; /* Pas cliquable tant que caché */
}


.diaporama-details-active .diaporama-details {
  opacity: 1; /* Rend l’overlay de détail visible */
  pointer-events: auto; /* Permet le scroll/interaction dans les détails */
}


/* Texte détaillé dans l’overlay */
.diaporama-description-content {
  padding: 0 10%; /* Marges horizontales internes */
  font-size: 1.3rem; /* Texte détaillé assez grand */
  line-height: 1.6; /* Bonne lisibilité */
  max-height: 80vh; /* Limite pour rester dans l’écran */
  overflow-y: auto; /* Scroll si le texte est trop long */
}


/* Zone L1/L2 (bas du diaporama) */
.diaporama-title-zone {
  background: #ffffff; /* Fond blanc pour les titres L1 et L2 */
  border-top: 1px solid #dddddd; /* Séparation avec la zone de slide */
  padding: 0.5rem; /* Espace interne */
  text-align: center; /* Titres centrés */
  min-height: 80px; /* Hauteur minimale pour lisibilité */
  display: flex; /* Permet de centrer le texte verticalement */
  flex-direction: column;
  justify-content: center;
  flex-shrink: 0; /* Ne se fait pas écraser par le reste */
  position: relative; /* Base pour d’éventuels éléments positionnés */
  z-index: 60; /* Au-dessus du slider */
}


.diaporama-title-zone.hidden {
  display: none; /* Peut être cachée si non utilisée */
}


/* Titre L1 */
.diaporama-text-l1 {
  text-transform: none !important; /* Laisse la casse telle quelle */
  font-size: 1.4rem; /* Taille du niveau L1 */
  font-weight: bold; /* Titre gras */
  color: blue !important; /* Couleur bleue spécifique */
  margin: 0; /* Pas de marge externe */
  line-height: 1.2; /* Hauteur de ligne serrée */
  cursor: pointer; /* Peut déclencher des actions (glossaire, etc.) */
}


/* Titre L2 */
.diaporama-text-l2 {
  font-size: 1.3rem; /* Taille légèrement plus petite que L1 */
  font-weight: bold; /* Gris du titre L2 */
  color: green !important; /* Couleur verte spécifique */
  margin: 0; /* Pas de marge externe */
  line-height: 1.2; /* Hauteur de ligne serrée */
  cursor: pointer; /* Cliquable (ex: accent sur vocabulaire) */
}

/* Mots issus de "..." dans L1 */
.diaporama-text-l1 .diaporama-quoted {
  font-size: 1.1rem;      /* ~2 px de moins que 1.4rem */
  font-weight: normal;     /* annule le gras hérité */
  color: #888888;          /* gris moyen */
}

/* Mots issus de "..." dans L2 */
.diaporama-text-l2 .diaporama-quoted {
  font-size: 1.0rem;       /* ~2 px de moins que 1.3rem */
  font-weight: normal;     /* annule le gras hérité */
  color: #888888;          /* gris moyen */
}


/* Mot de vocabulaire cliquable dans le diaporama */
.diaporama-vocab {
  border-bottom: 2px dotted currentColor; /* Souligne le mot d’une bordure pointillée */
  cursor: pointer; /* Indique une interaction (infobulle, lexique) */
}


/* Barre de contrôles */
.diaporama-controls {
  background: linear-gradient(180deg, #666666 0%, #2a2a2a 50%, #000000 51%, #444444 100%); /* Barre de contrôle métallisée */
  border-top: 1px solid #000; /* Séparation du slider */
  padding: 5px 0; /* Hauteur de base de la barre */
  z-index: 30; /* Au-dessus des slides mais sous le titre zone (L1/L2) */
  flex-shrink: 0; /* Ne se réduit pas à cause du slider */
}
.diaporama-controls-bottom {
  padding: 4px 1rem 10px; /* 10px de marge sous la jauge */
}


.diaporama-controls-top {
  display: flex; /* Alignement horizontal des icônes/boutons */
  justify-content: space-between; /* Boutons répartis aux extrémités */
  padding: 0 1rem; /* Espace horizontal de la barre */
  width: 100%; /* Occupe toute la largeur du diaporama */
}


.diaporama-btn-group {
  display: flex; /* Groupe de boutons alignés */
  gap: 1rem; /* Espace entre les icônes */
  align-items: center; /* Centre verticalement les boutons */
}


/* Boutons d’icônes du diaporama */
.diaporama-btn {
  background: none; /* Pas de fond pour le bouton */
  border: none; /* Pas de bordure */
  color: #fff; /* Couleur du texte/icône si texte */
  cursor: pointer; /* Indique un élément cliquable */
  padding: 8px; /* Zone cliquable autour de l’icône */
  font-size: 1.4rem; /* Taille si symbole texte */
  font-weight: 700; /* Épaisseur du texte */
  display: flex; /* Permet de centrer l’icône */
  align-items: center;
  justify-content: center;
}


.diaporama-btn svg {
  width: 32px; /* Taille de l’icône SVG */
  height: 32px;
  fill: #ffffff; /* Remplissage blanc par défaut */
}


/* Home / Eye / Back : contour blanc, intérieur transparent */
#diaporama-home svg,
#diaporama-eye svg,
#diaporama-back svg {
  fill: none !important; /* Pas de remplissage */
  stroke: #ffffff !important; /* Trait blanc */
  stroke-width: 2px; /* Épaisseur du trait */
}


/* Bouton Info “D” */
#diaporama-info {
  font-size: 1.8rem; /* Légèrement plus grand pour le bouton info */
}


/* Masquage utilitaire */
.diaporama-hidden {
  display: none !important; /* Classe utilitaire pour cacher des éléments du diaporama */
}



/* =========================================================
   INFOBULLES VOCABULAIRE (diaporama)
   ========================================================= */


.diaporama-vocab {
  position: relative; /* Nécessaire pour positionner l’infobulle par rapport au mot */
}


/* Contenu de l’infobulle */
.diaporama-tooltip {
  position: absolute; /* Infobulle positionnée par rapport au mot */
  z-index: 2000; /* Au-dessus de tout dans le diaporama */
  max-width: 260px; /* Largeur maximale de l’infobulle */
  background: rgba(15, 15, 24, 0.95); /* Fond sombre légèrement translucide */
  color: #fff; /* Texte blanc */
  border-radius: 6px; /* Bords arrondis */
  padding: 0.4rem 0.6rem; /* Marges internes */
  font-size: 0.8rem; /* Taille du texte de l’infobulle */
  line-height: 1.4; /* Bonne lisibilité */
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.6); /* Ombre portée */
  transform: translate(-50%, -100%); /* Centre horizontalement au-dessus du mot */
  left: 50%; /* Position horizontale centrale */
  bottom: 100%; /* Place l’infobulle au-dessus du mot */
  margin-bottom: 0.35rem; /* Espace entre le mot et l’infobulle */
  pointer-events: none; /* Infobulle non interactive par défaut */
}


/* Flèche de l’infobulle */
.diaporama-tooltip::after {
  content: ""; /* Génère un petit triangle */
  position: absolute;
  left: 50%; /* Centré horizontalement */
  bottom: -6px; /* Positionné sous l’infobulle */
  transform: translateX(-50%); /* Centre précis */
  border-width: 6px 6px 0 6px; /* Triangle pointant vers le bas */
  border-style: solid; /* Style de bordure plein */
  border-color: rgba(15, 15, 24, 0.95) transparent transparent transparent; /* Triangle noir vers le bas */
}



/* =========================================================
   LEXIQUE
   ========================================================= */


/* Séparateur logique dans la liste du lexique */
.lexique-line-break {
  grid-column: 1 / -1; /* Occupe toute la largeur dans une éventuelle grille */
  height: 0; /* Pas de hauteur visible, juste logique */
  padding: 0;
  margin: 0;
}


/* Ancienne structure de ligne lexique (déroulante) */
.lexique-line {
  align-items: flex-start; /* Aligne le contenu en haut verticalement */
  flex-direction: column; /* Empile titre + définition */
  gap: 0.25rem; /* Espace entre le terme et la définition */
}


.lexique-line-header {
  display: flex; /* Met le terme et l’icône de toggle sur une ligne */
  align-items: center;
  justify-content: space-between; /* Terme à gauche, icône à droite */
  width: 100%;
}


.lexique-term {
  position: relative; /* Base pour accent visuel éventuel */
  z-index: 1; /* Au-dessus de certains backgrounds */
}


.lexique-toggle-icon {
  position: relative; /* Position pour déplacer l’icône si besoin */
  z-index: 1;
  font-size: 0.8rem; /* Icône plus petite que le texte */
  opacity: 0.7; /* Légèrement atténuée */
}


.lexique-def {
  width: 100%; /* Prend toute la largeur */
  font-size: 0.9rem; /* Texte de définition plus petit */
  color: var(--color-muted); /* Couleur adoucie */
  max-height: 0; /* Cachée tant que non ouverte */
  overflow: hidden; /* Cache le contenu hors hauteur */
  opacity: 0; /* Invisible par défaut */
  transition: max-height 0.25s ease, opacity 0.25s ease; /* Animation d’ouverture */
}


.lexique-line.is-open .lexique-def {
  max-height: 200px; /* Hauteur suffisante pour la plupart des définitions */
  opacity: 1; /* Devient visible */
}


/* Conteneur général du lexique */
.lexique-list {
  margin-top: 1rem; /* Espace au-dessus du bloc de lexique */
}



/* =========================================================
   LISTE GÉNÉRIQUE DE LIGNES MÉTALLIQUES
   ========================================================= */


.line-list {
  display: flex; /* Liste verticale de lignes */
  flex-direction: column;
  gap: 0.35rem; /* Espace entre chaque ligne métallique */
  margin-top: 1rem; /* Espace au-dessus de la liste */
}


/* Ligne métallique générique */
.line-metal {
  width: 100%; /* Occupe tout l’espace horizontal */
  text-align: left; /* Texte aligné à gauche */
  border-radius: var(--radius-md); /* Bords arrondis de taille moyenne */
  padding: 0.6rem 0.9rem; /* Rembourrage interne */
  border: 1px solid rgba(255, 255, 255, 0.15); /* Bordure claire subtile */
  background: linear-gradient(135deg, #3b3b3f 0%, #15151a 40%, #2c2c30 100%); /* Gradient effet métal */
  color: var(--color-text); /* Texte principal blanc */
  cursor: pointer; /* Cliquable (navigation, sélection) */

  display: flex; /* Layout horizontal pour icône + texte */
  align-items: center; /* Centre verticalement le contenu */
  justify-content: flex-start; /* Aligne à gauche */
  gap: 0.75rem; /* Espace entre l’icône et le texte */

  font-size: 0.95rem; /* Taille de texte légèrement réduite */
  letter-spacing: 0.03em; /* Légère espacement entre lettres */
  text-transform: none; /* Respecte la casse du contenu */
  position: relative; /* Nécessaire pour les pseudo-éléments décoratifs */
  overflow: hidden; /* Cache les effets débordants */
}


/* Texture métallique */
.line-metal::before {
  content: ""; /* Pseudo couche décorative */
  position: absolute;
  inset: 0; /* Couvre complètement la carte */
  background: linear-gradient(
    120deg,
    rgba(255, 255, 255, 0.08) 0%,
    transparent 35%,
    transparent 65%,
    rgba(255, 255, 255, 0.06) 100%
  ); /* Reflets métalliques */
  mix-blend-mode: screen; /* Fusionne les reflets avec le fond */
  opacity: 0.7; /* Reflet modéré */
  pointer-events: none; /* Aucun impact sur les interactions */
}


/* Survol : effet brillant */
.line-metal:hover {
  transform: translateY(-1px); /* Légère remontée */
  box-shadow: 0 0 18px rgba(255, 255, 255, 0.25); /* Halo lumineux autour de la ligne */
  border-color: rgba(255, 255, 255, 0.45); /* Bordure plus claire */
  background: linear-gradient(135deg, #55565b 0%, #1d1e24 45%, #707076 100%); /* Gradient plus lumineux */
}


/* Reflet mobile au hover */
.line-metal::after {
  content: ""; /* Reflet mobile */
  position: absolute;
  top: -120%; /* Départ hors de la carte */
  left: -40%;
  width: 60%;
  height: 340%;
  background: radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.212), transparent 60%); /* Spot lumineux */
  opacity: 0; /* Invisible par défaut */
  pointer-events: none; /* Ne bloque pas les clics */
}


.line-metal:hover::after {
  opacity: 1; /* Reflet visible sur hover */
  transform: translateX(220%); /* Balaye la carte de gauche à droite */
}


/* Variante de ligne pour le lexique */
.line-metal.lexique-line {
  display: flex;
  flex-direction: row; /* Affiche terme + définition sur une même ligne */
  align-items: baseline; /* Aligne les textes sur la ligne de base */
  justify-content: flex-start;
  gap: 1rem; /* Espace entre le terme et sa définition */
}


/* Texte de définition / sous-titre */
.line-metal-def {
  color: var(--color-muted); /* Ton plus doux pour la définition */
  font-style: italic; /* Style italique pour différencier du terme */
  font-size: 0.9rem; /* Légèrement plus petit */
}


/* Variante de ligne pour les vidéos */
.line-metal.video-line {
  display: flex;
  flex-direction: row; /* Titre + sous-titre alignés horizontalement */
  align-items: baseline;
  justify-content: flex-start;
  gap: 1rem;
}


.video-line .line-metal-def {
  color: var(--color-muted); /* Ton adouci pour le texte secondaire */
  font-style: italic; /* Différencie le sous-titre */
  font-size: 0.9rem; /* Taille réduite */
}



/* =========================================================
   AUTRES BLOCS (cartes simples, vignettes, formulaires)
   ========================================================= */


/* Anciennes cartes vidéo/lexique (si encore utilisées) */
.video-card,
.lexique-item {
  background: var(--color-surface); /* Fond sombre standard */
  padding: 0.7rem; /* Rembourrage interne */
  border-radius: var(--radius-md); /* Angles modérément arrondis */
  box-shadow: var(--shadow-soft); /* Ombre douce autour de la carte */
}


/* Vignette vidéo simple */
.video-thumb {
  height: 130px; /* Hauteur fixe de la vignette */
  background: #333; /* Fond plus foncé */
  border-radius: var(--radius-md); /* Bords arrondis */
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative; /* Base pour une icône de lecture centrée par exemple */
  margin-bottom: 0.5rem; /* Espace sous la vignette */
}


/* Champs de formulaire (contact) */
.form-group input,
.form-group textarea {
  width: 100%; /* Champs plein largeur */
  padding: 0.4rem; /* Rembourrage interne */
  background: var(--color-surface); /* Fond sombre de champ */
  border: 1px solid rgba(255,255,255,0.1); /* Bordure très légère */
  color: #fff; /* Texte blanc */
  border-radius: 4px; /* Bords légèrement arrondis */
}
/* Grille de tuiles d'histoires (même esprit que techniques / vidéos) */
.history-tiles {
  display: grid; /* Grille responsive pour les histoires */
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); /* Colonnes adaptatives */
  gap: 1rem; /* Espace entre tuiles */
  margin: 1rem 0 1.5rem; /* Espace autour de la grille */
}


/* Tuile d'histoire (ici : on réutilise le style des cartes techniques) */
.history-tile.card-history {
  background: var(--color-surface); /* Fond sombre de carte */
  border: 1px solid rgba(255, 255, 255, 0.08); /* Bordure subtile */
  border-radius: var(--radius-lg); /* Angles arrondis prononcés */
  padding: 1.5rem 1rem; /* Espace interne */
  cursor: pointer; /* Tuiles cliquables */
  transition: 0.15s; /* Effet de hover */
  text-align: center; /* Texte centré */
}


.history-tile.card-history:hover {
  transform: translateY(-3px); /* Légère remontée au survol */
  background: #252535; /* Fond éclairci */
}


/* Tuile active (histoire sélectionnée) */
.history-tile.card-history.is-active {
  background: #252535; /* Utilise le même fond qu’au survol pour marquer la sélection */
}


/* Carte de contenu de l'histoire (sous les tuiles) */
.history-content-card {
  background: var(--color-surface); /* Fond de carte de texte */
  border: 1px solid rgba(255, 255, 255, 0.12); /* Bordure plus visible */
  border-radius: var(--radius-lg); /* Bords arrondis */
  padding: 1.2rem 1.4rem; /* Rembourrage interne */
  box-shadow: var(--shadow-soft); /* Ombre pour décoller du fond */
  color: var(--color-text); /* Texte blanc */
  line-height: 1.6; /* Lecture confortable pour l’histoire */
}


/* Titre du contenu d'histoire (si tu en ajoutes un via JS) */
.history-content-card h3 {
  margin-top: 0; /* Pas d’espace au-dessus du titre */
  margin-bottom: 0.75rem; /* Espace sous le titre */
  font-size: 1.1rem; /* Taille du titre d’histoire */
  font-weight: 700; /* Texte en gras */
}



/* =========================================================
   RÉGLAGES SPÉCIFIQUES MOBILE (≤ 768px)
   ========================================================= */


@media (max-width: 768px) {
  :root {
    --header-height: 55px; /* Réduit la hauteur du header sur mobile */
  }

  /* Header plus compact */
  .site-header {
    padding: 0 10px; /* Marges horizontales réduites */
    height: var(--header-height); /* Applique la nouvelle hauteur */
    min-height: auto; /* Permet de s’adapter */
    display: flex;
    align-items: center;
    justify-content: space-between; /* Logo à gauche, bouton à droite */
  }

  .logo-title {
    display: flex;
    align-items: center;
    gap: 8px; /* Espace réduit entre logo et titre */
    flex: 1; /* Prend tout l’espace possible */
    overflow: hidden; /* Évite que le texte ne dépasse */
  }

  .logo-shotokan {
    width: 34px; /* Logo plus petit sur mobile */
    height: 34px;
    flex-shrink: 0; /* Évite qu’il soit compressé */
  }

  .title-block {
    display: flex;
    flex-direction: column;
    justify-content: center; /* Centre le titre et le sous-titre verticalement */
  }

  .title-block h1 {
    font-size: 1.2rem; /* Titre réduit */
    line-height: 0.85; /* Hauteur de ligne serrée */
    margin: 0 0 -3px 0; /* Légère superposition avec le sous-titre */
    white-space: nowrap; /* Empêche un retour à la ligne */
    padding: 0;
  }

  .title-block .subtitle {
    font-size: 0.65rem; /* Sous-titre plus petit */
    margin: 10px 0 0 0; /* Décalé vers le bas */
    padding: 0;
    line-height: 1; /* Serrer la hauteur de ligne */
    color: var(--color-muted);
    white-space: nowrap; /* Pas de retour à la ligne */
    overflow: hidden; /* Cache le dépassement */
    text-overflow: ellipsis; /* Ajoute "..." si le texte est trop long */
  }

  .header-menu-button {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 30px; /* Hauteur du bouton réduite */
    padding: 0 12px; /* Largeur fixe */
    margin-left: 10px; /* Espace entre le titre et le bouton */
    font-size: 0.7rem; /* Texte plus petit */
    line-height: 1;
    border: 1px solid rgba(255, 255, 255, 0.4); /* Bordure plus visible sur mobile */
    border-radius: 20px; /* Bouton plus compact */
  }

  /* Conteneur du diaporama ajusté sur mobile */
  #mon-conteneur-wrapper {
    width: 100%; /* Diaporama occupe toute la largeur */
    height: auto; /* Hauteur gérée par le contenu */
    border: none; /* Enlève les bordures latérales */
    border-radius: 0; /* Pas de coins arrondis */
    background: transparent; /* Laisse la section gérer le fond */
  }

  /* Jauge du diaporama plus lisible sur mobile */
  .diaporama-gauge-container {
    height: 22px;   /* un peu plus haute sur mobile */
    border-width: 1px; /* Bord légèrement plus marqué */
  }

  .diaporama-gauge-fill {
    border-radius: 999px; /* Jauge encore plus arrondie */
  }

  .diaporama-main-title {
    font-size: 1.8rem !important; /* Titre plus petit pour tenir en largeur */
    padding: 0.3rem 0 !important; /* Réduit l’espace vertical */
  }

  .diaporama-title-zone {
    min-height: 80px !important; /* Hauteur minimum pour lisibilité */
    padding: 0.5rem !important; /* Rembourrage interne un peu réduit */
  }

  /* Grille techniques → flex wrap sur mobile */
  .techniques-grid {
    display: flex; /* Passe la grille en flex pour plus de souplesse */
    flex-wrap: wrap; /* Permet de retourner à la ligne */
    gap: 1rem; /* Espace entre les cartes */
  }
  /* Marge sous la jauge du diaporama (mobile) */
  .diaporama-controls-bottom {
    padding: 4px 1rem 14px; /* même padding que desktop + marge un peu plus grande en bas */
  }
  /* Espace sous toute la barre de contrôle (mobile) */
  .diaporama-controls {
    margin-bottom: 10px; /* Ajoute un espace sous la barre de contrôle */
  }

  .technique-card {
    flex-direction: row !important; /* Affiche l’icône et le texte côte à côte */
    padding: 0.8rem !important; /* Réduit le padding sur card */
    min-height: 70px; /* Hauteur minimale pour rester cliquable */
  }

  .technique-card .card-description {
    display: none !important; /* Cache la description pour alléger la carte sur mobile */
  }

  .main-content {
    padding: 1rem !important; /* Réduit les marges internes du contenu principal */
  }

  .side-menu {
    top: var(--header-height); /* Menu démarre sous le header adapté mobile */
    padding-top: 0; /* Supprime un éventuel padding superflu */
  }

  /* Catégories vidéos (tuiles) ajustées sur mobile */
  .video-tiles {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); /* 1 à 3 tuiles selon la largeur */
    gap: 0.75rem; /* Espacement légèrement réduit */
  }
}


/* =========================================================
   ACCUEIL (image + texte)
========================================================= */
.accueil-layout {
  display: flex; /* Disposition en ligne image + texte */
  align-items: center; /* Centre verticalement la ligne */
  justify-content: flex-start; /* on commence à gauche */
  gap: 2rem; /* Espace entre l’image et le texte */
  margin-top: 1.5rem; /* Espace au-dessus du bloc d’accueil */
  width: 90%;          /* 90% utile */
  margin-left: 0;      /* collé à gauche */
  margin-right: auto;  /* laisse ~10% de marge à droite */
}


/* 50% image / 40% texte à l'intérieur des 90% utiles */
.accueil-col-image {
  flex: 0 0 50%; /* Colonne image occupe 50% */
  display: flex;
  justify-content: center; /* Centre l’image horizontalement */
  align-items: center; /* Centre l’image verticalement */
}


/* Image : responsives en largeur ET en hauteur */
.accueil-image {
  max-width: 90%; /* Ne dépasse pas 90% de la colonne */
  max-height: 70vh; /* ne dépasse pas 70% de la hauteur visible */
  height: auto; /* Maintient le ratio d’aspect */
  width: auto;
  display: block; /* Supprime l’espace inline sous l’image */
  border-radius: var(--radius-lg); /* Bords arrondis harmonisés */
  box-shadow: var(--shadow-soft); /* Ombre douce autour de l’image */
}
.logo-shotokan .logo-image {
  width: 100%; /* Fait rentrer le logo dans le cercle */
  height: 100%;
  object-fit: contain; /* Garde le logo complet dans le cercle */
  display: block; /* Évite l’espace inline */
}



/* Texte à droite plus grand */
.accueil-col-texte {
  flex: 0 0 40%; /* Colonne texte occupe 40% */
  text-align: left; /* Texte aligné à gauche */
  font-size: 1.2rem; /* Taille de texte majorée */
  line-height: 1.7; /* Lecture confortable */
  font-weight: 600; /* Texte légèrement plus épais */
}


/* Marges des paragraphes */
.accueil-col-texte p {
  margin-top: 0; /* Pas d’espace au-dessus du premier paragraphe */
  margin-bottom: 1.5rem; /* Espace entre les paragraphes */
}


/* Lien contact */
.accueil-contact-link {
  font-size: 1.2rem; /* Même taille que le texte environnant */
  line-height: 1.7; /* Hauteur de ligne assortie */
  font-weight: 600; /* Texte marqué */
  padding: 0; /* Pas de padding supplémentaire */
  background: none; /* Pas de fond de bouton */
  border: none; /* Pas de bordure */
  color: var(--color-accent); /* Utilise la couleur d’accent pour inciter au clic */
  font-weight: 600; /* Renforce le texte du lien */
}


/* Logo dans la page Contact */
.contact-logo-wrapper {
  display: flex; /* Centre le logo dans son container */
  justify-content: center;
  align-items: center;
  margin: 1.5rem 0; /* Espace autour du logo */
}
/* Bas du formulaire de contact : deux colonnes */
.contact-bottom {
  display: flex; /* Place les cases et le logo côte à côte */
  gap: 2rem; /* Espace entre les deux colonnes */
  align-items: flex-start; /* Aligne le haut des colonnes */
  justify-content: space-between; /* Espace entre les colonnes */
  margin-top: 1.5rem; /* Espace au-dessus de la zone bas */
}


/* Colonne gauche : cases + bouton */
.contact-bottom-left {
  flex: 1 1 50%; /* Colonne flexible, base 50% */
}


/* Colonne droite : logo centré */
/* Colonne droite : logo parfaitement centré */
.contact-bottom-right {
  flex: 0 0 70%; /* Colonne fixe de 70% de largeur */
  display: flex;
  justify-content: center; /* centre horizontalement */
  align-items: bottom;     /* centre verticalement (attention : “bottom” n’est pas une valeur standard, plutôt “flex-end”) */
  min-height: 140px;       /* hauteur mini pour bien voir le centrage */
}


/* Logo responsive */
.contact-logo {
  width: 25vw; /* Largeur relative à la fenêtre */
  max-width: 180px; /* Limite max pour ne pas être trop grand */
  height: auto; /* Respecte le ratio */
  display: block; /* Image en bloc */
  opacity: 0.9; /* Légèrement adoucie */
}


/* Responsive : empiler sur mobile */
@media (max-width: 768px) {
  .contact-bottom {
    flex-direction: column; /* Colonne au lieu de ligne */
    align-items: stretch; /* Les enfants s’étirent en largeur */
  }

  .contact-bottom-right {
    justify-content: center; /* Centre le logo horizontalement */
  }

  .contact-logo {
    width: 40vw; /* Logo un peu plus large en proportion */
    max-width: 160px; /* Taille maximale légèrement réduite */
  }
}



/* Responsive mobile : tout passe en pleine largeur */
@media (max-width: 768px) {
  .accueil-layout {
    flex-direction: column; /* Passe l’image et le texte en pile verticale */
    align-items: center; /* Centre le contenu sur l’axe horizontal */
    gap: 1.25rem; /* Espace entre les deux blocs */
    width: 100%; /* Utilise toute la largeur */
    margin-right: 0; /* Supprime la marge droite auto */
  }

  .accueil-col-image,
  .accueil-col-texte {
    flex: 0 0 auto; /* Laisse chaque bloc prendre sa largeur naturelle */
    width: 100%; /* Chaque bloc occupe toute la largeur */
  }

  .accueil-image {
    max-width: 70vw; /* Image moins large sur mobile */
    max-height: 50vh; /* Image moins haute pour éviter de manger tout l’écran */
  }

  .accueil-col-texte {
    font-size: 1rem; /* Réduit le texte pour mobile */
  }
}


/* =========================================================
   GESTION DU FILIGRANE (Caché sur l'accueil)
   ========================================================= */


/* Si le body contient l'élément #section-accueil avec la classe .is-active,
   alors on cache l'élément ::before du body (le logo)
*/
body:has(#section-accueil.is-active)::before {
    opacity: 0; /* Rend le filigrane totalement transparent */
    visibility: hidden; /* Le masque pour de bon */
    transition: opacity 0.3s ease; /* Effet de transition doux */
}


/* Plein écran quand le diaporama demande force-fullscreen */
.section-techniques.is-active .diaporama-wrapper.force-fullscreen {
  position: fixed; /* Diaporama collé à la fenêtre */
  inset: 0; /* Couvre toute la surface */
  width: 100vw; /* Pleine largeur */
  height: 100dvh; /* Force la hauteur dynamique ici aussi */
  margin: 0; /* Supprime les marges */
  max-width: none; /* Enlève les limites de largeur */
  max-height: none; /* Enlève les limites de hauteur */
  border-radius: 0; /* Bords droits */
}

/* =========================================================
   Mise en page générale du tuto
   ========================================================= */
.tuto-guide-container {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.tuto-guide-section {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: 1.4rem 1.6rem;
  box-shadow: var(--shadow-soft);
}

/* Ligne titre + icône haut dans les sections du tuto */
.tuto-guide-section-header {
  display: inline-flex;          /* Titre + icône sur une même ligne */
  align-items: center;           /* Alignement vertical parfait */
  gap: 0.8rem;                   /* Espace entre titre et icône (≈ 2 espaces visuels) */
}

.tuto-guide-title {
  margin: 0 0 0.75rem 0;
  font-family: Oswald, sans-serif;
  font-size: 1.1rem;
  text-transform: uppercase;
}

.tuto-guide-content {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  align-items: center;
}

/* Variantes gauche / droite */
.tuto-guide-content--image-right .tuto-guide-text {
  order: 1;
  flex: 1 1 260px;
}

.tuto-guide-content--image-right .tuto-guide-image-box {
  order: 2;
  flex: 0 0 auto;
}

.tuto-guide-content--image-left .tuto-guide-image-box {
  order: 1;
  flex: 0 0 auto;
}

.tuto-guide-content--image-left .tuto-guide-text {
  order: 2;
  flex: 1 1 260px;
}

/* Tailles des images */
.tuto-guide-image-box {
  display: flex;
  justify-content: center;
  align-items: center;
}

.tuto-guide-image-box--small {
  max-width: 260px;
}

.tuto-guide-image-box--medium {
  max-width: 380px;
}

.tuto-guide-image-box--large {
  max-width: 520px;
}

/* Image : border et redimensionnement */
.tuto-guide-image {
  width: 100%;
  height: auto;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: var(--radius-md);
  cursor: zoom-in;
}

/* Overlay plein écran pour l’image */
.tuto-image-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 12000;
}

.tuto-image-overlay img {
  max-width: 95vw;
  max-height: 95vh;
  border: 1px solid #fff;
  border-radius: var(--radius-md);
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.9);
  cursor: zoom-out;
}

/* Bloc spécifique C4 : deux captures l'une sous l'autre */
.tuto-kplayer-liens-images {
  display: flex;
  flex-direction: column; /* Empile en colonne */
  gap: 0.75rem;           /* Espace vertical entre les deux images */
}

/* Bouton retour haut de page dans chaque bloc du tuto */
.tuto-back-top {
  border: none;                 /* Pas de bordure du bouton */
  background: transparent;      /* Fond transparent */
  padding: 0;                   /* Pas de padding autour */
  margin: 0 0 0.5rem 0;         /* Petit espace sous le titre */
  cursor: pointer;              /* Curseur main */
  display: inline-flex;         /* Contient juste l’icône */
  align-items: center;          /* Centre l’image dans la hauteur de ligne */
  justify-content: center;
}

.tuto-back-top-icon {
  height: 1.1rem;                /* Même hauteur que le font-size du titre */
  width: auto;                   /* Conserve le ratio du logo */
  display: block;
}

.tuto-back-top:hover .tuto-back-top-icon {
  filter: brightness(1.2);      /* Légère mise en avant au survol */
}

/* Mobile */
@media (max-width: 768px) {
  .tuto-guide-content {
    flex-direction: column;
  }

  .tuto-guide-image-box--small,
  .tuto-guide-image-box--medium,
  .tuto-guide-image-box--large {
    max-width: 100%;
  }
}

/* Grille des tuiles du tuto (sommaire KPlayer) */
.tuto-tiles-grid {
  display: grid;                           /* Utilise une grille comme pour les catégories techniques */
  grid-auto-flow: column;                  /* Toutes les tuiles sur une seule ligne */
  grid-auto-columns: minmax(180px, 1fr);   /* Largeur mini de chaque tuile */
  gap: 1rem;                               /* Espacement entre tuiles */
  margin: 1.5rem 0 2rem;                   /* Espace autour du bloc de tuiles */
}

/* Chaque tuile réutilise le style .technique-card mais on s'assure qu'elle occupe bien sa colonne */
.tuto-tile {
  width: 100%;
  padding-top: 0.9rem;
  padding-bottom: 0.7rem;
}

/* Icône flèche (tuto C4) alignée sur la taille de l'icône Maison */
.tuto-retour-icon {
  width: 48px;      /* même largeur que la Maison */
  height: 48px;     /* même hauteur */
  object-fit: contain;
}

/* Mobile : on repasse en grille multi-lignes classique */
@media (max-width: 768px) {
  .tuto-tiles-grid {
    grid-auto-flow: row;                   /* On n’impose plus une seule ligne */
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  }
}


/* Fix veille mobile - hauteur garantie après recréation */
/* On élargit à 768px pour couvrir tous les smartphones (y compris format paysage ou grand écran) */
@media (max-width: 768px) {
  
  /* 1. CRUCIAL : Désactive l'animation transform sur le conteneur parent.
     Cela permet au "position: fixed" de l'enfant de se coller correctement au vrai haut de l'écran. */
  #section-techniques.is-active {
    transform: none !important; 
    align-items: flex-start !important; /* Force l'alignement tout en haut */
    padding-top: 0 !important; /* Sécurité anti-padding */
  }

  /* 2. On force le wrapper du diaporama à prendre 100% de l'écran réel */
  .section-techniques.is-active .diaporama-wrapper {
    position: fixed !important; /* S'assure qu'il est fixé à l'écran */
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    
    display: flex !important;
    flex-direction: column !important;
    z-index: 20000 !important; /* Au-dessus de tout */
  }

  /* 3. Ajustement du titre pour éviter qu'il soit caché sous l'encoche (notch) des iPhone */
  .diaporama-main-title {
    padding-top: max(0.5rem, env(safe-area-inset-top)) !important;
    flex-shrink: 0 !important;
  }

  /* 4. La zone centrale (slider) prend tout l'espace restant */
  #diaporama-slider {
    flex-grow: 1 !important;
    min-height: 0 !important;
    border-radius: 0 !important;
  }

  /* 5. La barre de contrôle collée en bas avec marge de sécurité pour la barre de swipe */
  .diaporama-controls {
    flex-shrink: 0 !important;
    margin-top: auto !important;
    background: #000; /* Fond noir pour masquer le vide */
    padding-bottom: max(30px, env(safe-area-inset-bottom)) !important; /* On force 30px minimum, ce qui remontera ta barre verte au dessus des boutons Android */
  }
  
  /* Sécurité supplémentaire : on force la barre de titre L1/L2 à ne pas être écrasée */
  .diaporama-title-zone {
      flex-shrink: 0 !important;
  }
}

/* Taille forcée pour l'icône flèche du tuto (C4) */
.tuto-retour-icon {
  width: 48px !important;   /* mets ici la largeur exacte de ton icône Maison */
  height: 48px !important;  /* même hauteur */
  object-fit: contain;
}