/* ==========================================================================
   VALÉRIE TRAZIC — Feuille de style commune
   --------------------------------------------------------------------------
   Ce fichier contient :
     1. les variables du design system (:root)
     2. les bases (typographie, conteneur)
     3. l'en-tête et la navigation
     4. les boutons
     5. le bandeau contact et le pied de page
     6. le responsive de ces éléments communs

   Il est chargé sur les 7 pages, AVANT le fichier propre à chaque page.

   Les valeurs ci-dessous sont RELEVÉES SUR LE SITE D'ORIGINE (ventyoga.fr),
   pas déduites du site de l'association : fond blanc, un seul jaune, texte
   noir, Quicksand partout.

   RÈGLE : aucune couleur, police ou graisse ne doit être écrite « en dur »
   ailleurs. On passe toujours par une variable de :root.
   ========================================================================== */


/* ==========================================================================
   1. VARIABLES — le tableau électrique du site
   --------------------------------------------------------------------------
   Pour changer une couleur partout, il suffit de la modifier ici.
   ========================================================================== */

:root {

  /* --- Couleurs, relevées sur ventyoga.fr --- */
  --fond:        #FFFFFF;  /* fond du site : blanc, PAS crème            */
  --creme:       #FFF8DE;  /* cellules du bandeau contact, formes déco    */
  --jaune:       #FED93F;  /* le seul jaune du site                      */
  --gris-bloc:   #F7F7F7;  /* bandeau gris de la section « Les cours »   */
  --texte:       #000000;  /* texte principal                            */
  --texte-doux:  #BABABA;  /* page courante dans le menu                 */
  --trait:       #282626;  /* filet sous l'en-tête                       */

  /* --- Police ---
     Le site d'origine n'utilise QUE Quicksand, titres comme corps de texte. */
  --titres: "Quicksand", sans-serif;
  --corps:  "Quicksand", sans-serif;

  /* --- Graisses --- */
  --normal:   400;
  --moyen:    500;
  --semigras: 600;
  --gras:     700;

  /* --- Espacements --- */
  --espace-xs: 0.5rem;   /*  8px */
  --espace-s:  1rem;     /* 16px */
  --espace-m:  2rem;     /* 32px */
  --espace-l:  4rem;     /* 64px */
  --espace-xl: 6rem;     /* 96px */

  /* --- Dimensions --- */
  --largeur-max: 1140px;
  --rayon:       12px;
}


/* ==========================================================================
   2. BASES
   ========================================================================== */

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

html {
  overflow-x: hidden;

  /* L'en-tête est collé en haut. Sans ce retrait, une arrivée par ancre
     placerait sa cible DERRIÈRE l'en-tête. */
  scroll-padding-top: 6rem;
  scroll-behavior: smooth;
}

/* 15 px et une interligne de 1,88 : les valeurs exactes du site d'origine. */
body {
  margin: 0;
  background-color: var(--fond);
  color: var(--texte);
  font-family: var(--corps);
  font-weight: var(--normal);
  font-size: 15px;
  line-height: 1.88;
}

h1, h2, h3 {
  font-family: var(--titres);
  color: var(--texte);
  margin: 0;
  font-weight: var(--normal);
  line-height: 1.4;
}

p { margin: 0 0 var(--espace-s); }

a { color: inherit; }

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

/* Contour de focus visible au clavier. Sans lui, une personne qui navigue à
   la touche Tab ne sait plus où elle se trouve. */
:focus-visible {
  outline: 2px solid var(--jaune);
  outline-offset: 3px;
}

/* Ouverture des panneaux dépliants (menu mobile, sous-menu).
   « display: none » ne s'anime pas ; une animation posée sur l'élément au
   moment où il s'affiche, elle, se joue. */
@keyframes deplier {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Respecte le réglage système « réduire les animations ». */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

.conteneur {
  width: 100%;
  max-width: var(--largeur-max);
  margin-inline: auto;
  padding-inline: var(--espace-m);
}

/* Masque un élément à l'écran tout en le laissant lisible par les lecteurs
   d'écran. */
.lecteur-ecran-seulement {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}


/* ==========================================================================
   3. EN-TÊTE — commun aux 7 pages
   --------------------------------------------------------------------------
   Fond blanc, 78 px de haut, et un filet fin sous le contenu : c'est tout.
   ========================================================================== */

.entete {
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: var(--fond);
}

/* Le filet est porté par le conteneur intérieur, pas par l'en-tête : il
   s'arrête donc avec le contenu au lieu de traverser tout l'écran. */
.entete__interieur {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espace-m);
  min-height: 78px;
  border-bottom: 1px solid var(--trait);
}

/* --- La marque : la branche + le nom ---
   « flex-shrink: 0 » est indispensable : sans lui, la marque se comprime
   quand le menu manque de place et la branche est écrasée. */
.entete__marque {
  display: flex;
  align-items: center;
  gap: var(--espace-s);
  flex-shrink: 0;
  text-decoration: none;
}

.entete__branche {
  width: 44px;
  flex-shrink: 0;
}

.entete__nom {
  font-family: var(--titres);
  font-weight: var(--normal);
  font-size: 15px;
}


/* ==========================================================================
   3b. NAVIGATION
   ========================================================================== */

.nav__liste {
  display: flex;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Le lien et le bouton « Cours » doivent être identiques à l'œil. Le bouton
   hérite donc explicitement de la police, que les navigateurs remplacent
   sinon par leur police de formulaire. */
.nav__lien {
  display: inline-block;
  padding: var(--espace-xs) 0.7rem;
  border: none;
  background: none;
  font-family: var(--corps);
  font-weight: var(--normal);
  font-size: 15px;
  color: var(--texte);
  line-height: inherit;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.2s ease;
}

/* Sur le site d'origine, la page courante n'est pas soulignée : elle est
   simplement grisée. Pas de trait jaune. */
.nav__lien[aria-current="page"] {
  color: var(--texte-doux);
}

.nav__lien:hover,
.nav__lien:focus-visible {
  color: var(--texte-doux);
}

/* --- Sous-menu « Cours » -------------------------------------------------
   Il s'ouvre dans trois cas — au survol de la souris, quand le clavier entre
   dans la zone (:focus-within), et au clic (aria-expanded, géré par
   menu.js). Les trois sont nécessaires : le survol ignore le clavier, le
   clavier ignore la souris, et sur un écran tactile seul le clic existe.
   Pas de chevron : le site d'origine n'en a pas. --------------------------- */

.nav__deroulant {
  position: relative;
}

.nav__sous-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 50%;
  translate: -50% 0;
  z-index: 20;
  min-width: 220px;
  margin: 0;
  padding: var(--espace-xs) 0;
  list-style: none;
  background-color: var(--fond);
  border: 1px solid var(--trait);
}

.nav__deroulant:hover .nav__sous-menu,
.nav__deroulant:focus-within .nav__sous-menu,
.nav__bascule[aria-expanded="true"] + .nav__sous-menu {
  display: block;
  animation: deplier 0.2s ease both;
}

/* Zone tampon invisible entre l'entrée « Cours » et le panneau : sans elle,
   le panneau se referme dès que la souris traverse l'espace vide en
   descendant vers lui. */
.nav__sous-menu::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -10px;
  height: 10px;
}

.nav__sous-lien {
  display: block;
  padding: var(--espace-xs) var(--espace-s);
  font-size: 15px;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.2s ease;
}

.nav__sous-lien:hover,
.nav__sous-lien:focus-visible,
.nav__sous-lien[aria-current="page"] {
  color: var(--texte-doux);
}

/* --- Bouton burger : visible uniquement sur mobile (voir §6) --- */

.nav__burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
}

.nav__burger span {
  display: block;
  height: 1px;
  width: 26px;
  background-color: var(--texte);
  transition: transform 0.25s ease, opacity 0.25s ease;
}

/* Les trois barres se transforment en croix quand le menu est ouvert. */
.nav__burger[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}
.nav__burger[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}
.nav__burger[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}


/* ==========================================================================
   4. BOUTONS — communs à tout le site
   ========================================================================== */

/* Relevé sur le site d'origine : un rectangle jaune plein, texte noir à 18 px.
   Les angles sont arrondis, à la demande de Simon — c'est le seul écart avec
   l'original, qui les laisse vifs. Au survol, le bouton se vide de sa couleur
   et garde son contour jaune : le mouvement inverse, pour que l'état survolé
   se distingue sans introduire de teinte nouvelle. */
.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 142px;
  min-height: 40px;
  padding: var(--espace-xs) var(--espace-s);
  border: 1px solid var(--jaune);
  border-radius: 6px;
  background-color: var(--jaune);
  color: var(--texte);
  font-family: var(--corps);
  font-weight: var(--normal);
  font-size: 18px;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.bouton:hover,
.bouton:focus-visible {
  background-color: transparent;
}


/* ==========================================================================
   5. BANDEAU CONTACT + PIED DE PAGE — communs aux 7 pages
   --------------------------------------------------------------------------
   Le bandeau porte id="contact" : c'est la cible de l'entrée « Contact » du
   menu, qui n'est pas une page mais une ancre.

   L'astuce du site d'origine : les filets jaunes entre les trois cellules ne
   sont pas des bordures. Le bandeau est un rectangle JAUNE, et les trois
   cellules grises posées dessus laissent 1 px d'écart entre elles. Le jaune
   qui apparaît dans ces fentes, c'est le fond.
   ========================================================================== */

.bandeau-contact {
  background-color: var(--jaune);
  padding: 1px;
}

.bandeau-contact__grille {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
}

.bandeau-contact__cellule {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--espace-m);
  min-height: 263px;
  padding: var(--espace-m) var(--espace-s);
  background-color: var(--creme);
  text-align: center;
}

/* Les trois icônes n'ont pas le même rapport largeur / hauteur. On fixe donc
   la HAUTEUR et on laisse la largeur suivre : à largeur égale, l'enveloppe
   paraîtrait plus grosse que le repère. */
.bandeau-contact__icone {
  height: 34px;
  width: auto;
}

.bandeau-contact__texte {
  margin: 0;
  font-size: 16px;
  line-height: 1.7;
  font-style: normal;   /* neutralise l'italique par défaut de <address> */

  /* Trois lignes réservées, même quand le texte n'en fait qu'une. Sans ça,
     la cellule de l'adresse — la seule à tenir sur trois lignes — pousse son
     icône vers le haut et les trois pictos ne sont plus alignés. */
  min-height: calc(3 * 16px * 1.7);
}

.bandeau-contact__texte a {
  text-decoration: none;
}

.bandeau-contact__texte a:hover,
.bandeau-contact__texte a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 4px;
}


/* --- Pied de page : fond blanc, tout centré --- */

.pied {
  padding-block: var(--espace-m);
  text-align: center;
}

.pied__branche {
  width: 44px;
  margin: 0 auto var(--espace-s);
}

.pied__nom {
  margin: 0;
  font-family: var(--titres);
  font-weight: var(--normal);
  font-size: 22px;
  line-height: 1.41;
}

.pied__role {
  margin: 0;
  font-size: 15px;
}

.pied__credit {
  margin: var(--espace-s) 0 0;
  font-size: 14px;
  line-height: 1.79;
}

.pied__credit a {
  text-decoration: none;
}

.pied__credit a:hover,
.pied__credit a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Le lien vers les mentions légales. Il est obligatoire et doit être
   atteignable depuis n'importe quelle page : sa place est donc au pied de
   page, présent partout. Il est écrit plus petit et plus pâle que le reste —
   c'est une obligation légale, pas une invitation à cliquer. */
.pied__legal {
  margin: var(--espace-s) 0 0;
  font-size: 13px;
}

.pied__legal a {
  color: var(--texte-doux);
  text-decoration: none;
}

.pied__legal a:hover,
.pied__legal a:focus-visible {
  color: var(--texte);
  text-decoration: underline;
  text-underline-offset: 3px;
}


/* ==========================================================================
   6. RESPONSIVE — éléments communs
   --------------------------------------------------------------------------
   Quatre largeurs de référence : 1440 / 900 / 600 / 375 px.
   ========================================================================== */

/* --- Le menu passe en burger --- */
@media (max-width: 900px) {

  .nav__burger {
    display: flex;
  }

  /* Le menu se déplie sous l'en-tête, en pleine largeur. */
  .nav__liste {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    z-index: 10;
    flex-direction: column;
    align-items: stretch;
    padding: var(--espace-s) var(--espace-m) var(--espace-m);
    background-color: var(--fond);
    border-bottom: 1px solid var(--trait);
    /* Si la liste est plus haute que l'écran, elle défile à l'intérieur
       plutôt que de sortir de la fenêtre. */
    max-height: calc(100vh - 100%);
    overflow-y: auto;
  }

  .nav__liste.est-ouvert {
    display: flex;
    animation: deplier 0.24s ease both;
  }

  .nav__lien {
    padding: var(--espace-s) 0;
    font-size: 16px;
  }

  /* --- Le sous-menu « Cours » dans le burger ---
     Pas de déroulé dans un déroulé : c'est la source classique de menus
     impossibles à utiliser au doigt. Les cinq entrées sont simplement
     listées en retrait, toujours visibles. --- */
  .nav__deroulant {
    position: static;
  }

  .nav__bascule {
    cursor: default;
    color: var(--texte-doux);
    padding-bottom: 0;
  }

  .nav__sous-menu,
  .nav__deroulant:hover .nav__sous-menu,
  .nav__deroulant:focus-within .nav__sous-menu {
    display: block;
    position: static;
    translate: none;
    min-width: 0;
    padding: 0 0 var(--espace-xs);
    background: none;
    border: none;
    animation: none;
  }

  .nav__sous-menu::before {
    display: none;
  }

  .nav__sous-lien {
    padding: var(--espace-xs) 0 var(--espace-xs) var(--espace-s);
    font-size: 16px;
  }

  /* --- Bandeau contact sur une colonne --- */
  .bandeau-contact__grille {
    grid-template-columns: 1fr;
  }

  .bandeau-contact__cellule {
    min-height: 0;
    gap: var(--espace-s);
    padding: var(--espace-m) var(--espace-s);
  }

  /* Empilées, les cellules n'ont plus à s'aligner entre elles : la hauteur
     réservée ne servirait qu'à créer du vide. */
  .bandeau-contact__texte {
    min-height: 0;
  }
}


/* --- Mobile --- */
@media (max-width: 600px) {

  /* Marge latérale un peu plus large qu'un simple 1 rem : le texte tombait
     trop près du bord de l'écran. */
  .conteneur {
    padding-inline: 1.5rem;
  }

  .entete__interieur {
    min-height: 66px;
  }

  .entete__branche {
    width: 38px;
  }

  .bouton {
    width: 100%;
  }
}