/* =================================================================
   AJES — style.css
   Variables globales · reset · typographie · layout · sections
   ================================================================= */

/* ---------- Variables ---------- */
:root{
  /* Largeurs */
  --wrap: 1280px;
  --gutter: 24px;

  /* Couleurs */
  --bg-video: #324156;   /* placeholder du fond vidéo fixe */
  --bg-light: rgba(221,225,229,.7);   /* panneau intro/grille — #dde1e5 à 70% d'opacité */
  --white:    #ffffff;
  --ink:      #111111;
  --ink-soft: #3a3a3a;

  --blue:     #0000ff;   /* filet/anneau des boutons */
  --football: #000079;
  --rugby:    #df0031;
  --tennis:   #ed8700;
  --handball: #313131;
  --judo-ink: #313131;

  /* Typo */
  --font-jp:      "Noto Sans JP", system-ui, sans-serif;
  --font-display: "anton", "Anton", Impact, sans-serif;

  /* Header */
  --header-h: 88px;
}

/* ---------- Reset léger ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--font-jp);
  font-weight:700;              /* tous les textes JP en bold */
  line-height:1.8;
  color:var(--white);
  background:var(--bg-video);   /* fallback si la vidéo n'est pas chargée */
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  /* sticky footer : le footer reste collé en bas */
  min-height:100vh;
  display:flex;
  flex-direction:column;
}
main{ flex:1 0 auto; margin-bottom:80px; }  /* décolle le dernier bloc du footer */
img{ max-width:100%; display:block; }
ul{ margin:0; padding:0; list-style:none; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,p{ margin:0; }
button{ font:inherit; cursor:pointer; }

/* ---------- Fond vidéo fixe (index) ---------- */
.video-bg{
  position:fixed;
  inset:0;
  z-index:-1;
  background:var(--bg-video);   /* fallback couleur si la vidéo n'est pas chargée */
  overflow:hidden;
}
.video-bg__media{
  width:100%; height:100%;
  object-fit:cover;
}
/* Voile bleu AJES léger par-dessus la vidéo — améliore la lisibilité du texte */
.video-bg::after{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(0, 0, 121, 0.05);   /* #000079 à 5 % */
  pointer-events:none;
}

/* ---------- Fond : carrousel d'images plein écran, fixe (support-service) ----------
   Plusieurs slides empilées en position fixe couvrant toute la fenêtre.
   Le contenu défile par-dessus ; les images, elles, restent fixes.
   Crossfade géré par la classe .is-active (JS dans main.js). */
.bg-carousel{
  position:fixed;
  inset:0;
  z-index:-1;
  background:var(--bg-video);   /* fallback couleur si aucune image */
  overflow:hidden;
}
.bg-carousel__slide{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
  opacity:0;
  transition:opacity 1.2s ease;
}
.bg-carousel__slide.is-active{ opacity:1; }
/* voile sombre pour garder le texte blanc lisible par-dessus les photos */
.bg-carousel::after{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(13,13,26,.55);
}

/* ---------- Conteneur centré ---------- */
.wrap{
  width:100%;
  max-width:var(--wrap);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

/* ---------- Sections ----------
   Rythme : titre sur fond vidéo sombre (texte blanc) suivi d'un
   panneau clair (blanc ou gris #dde1e5) à coins supérieurs arrondis. */

/* Bloc-titre sur le fond vidéo sombre */
.block-title{
  text-align:center;
  color:var(--white);
  padding-block:96px 60px;
}
/* Variante dans un panneau clair (gris) : texte foncé, sans le grand padding sombre */
.block-title--panel{
  color:var(--ink);
  padding-block:0;
  margin-bottom:44px;
}
.block-title--panel .block-title__h{ line-height:1.15; }   /* interlignage resserré */
.block-title--panel .block-title__text{ color:var(--ink-soft); }
.block-title__h{
  font-weight:900;
  font-size:clamp(1.8rem,4vw,2.6rem);
  line-height:1.4;
  letter-spacing:.02em;
}
.block-title__sub{
  margin-top:22px;
  font-weight:700;
  font-size:clamp(1.44rem,3.46vw,1.94rem);   /* uniformisé avec .hero__kicker (+20% cumulé) */
  line-height:1.6;
}
/* texte courant sous le titre (sur fond sombre) */
.block-title__text{
  margin-top:28px;
  font-size:.95rem;
  line-height:2.1;
  color:rgba(255,255,255,.85);
}

/* Panneau clair (coins haut arrondis) */
.panel{
  background:var(--bg-light);            /* gris par défaut */
  color:var(--ink);
  border-radius:36px 36px 0 0;
  padding:64px clamp(20px,4vw,72px) 80px;
}
.panel--white{ background:var(--white); }
/* panneau collé bord à bord au panneau précédent (pas d'arrondi) */
.panel--flush{ border-radius:0; }

.panel__intro{
  max-width:760px;
  margin:0 auto 44px;
  text-align:center;
  font-size:.95rem;
  line-height:2;
  color:var(--ink-soft);
}
.panel__text{
  max-width:840px;
  margin:0 auto;
  text-align:center;
  font-size:.95rem;
  line-height:2.1;
}
.panel__cta{ margin-top:44px; text-align:center; }

/* Titre CONTACT (dans un panneau blanc, en noir) */
.contact-title{
  font-family:var(--font-display);
  font-weight:400;
  font-size:clamp(3rem,8vw,5rem);
  letter-spacing:.04em;
  text-align:center;
  margin-bottom:32px;
}

/* ---------- HERO ---------- */
.hero{
  padding-top:calc(var(--header-h) + 160px);
  padding-bottom:80px;
  text-align:center;
}
.hero__inner{ display:flex; flex-direction:column; align-items:center; gap:28px; }
.hero__kicker{
  font-weight:700;
  font-size:clamp(1.44rem,3.46vw,1.94rem);   /* +20% (x1.2 cumulé) */
  line-height:1.7;
}
.hero__title{
  font-weight:900;
  font-size:clamp(2.2rem,6vw,3.6rem);
  line-height:1.35;
  letter-spacing:.02em;
}
.hero__lead{
  font-weight:700;
  font-size:clamp(1.37rem,2.88vw,1.66rem);   /* +20% (x1.2 cumulé) */
  line-height:2.1;
}

/* ---------- Photo slider ---------- */
.panel .photo-slider{
  max-width:760px;
  margin:40px auto 0;
}

/* ---------- Responsive ---------- */
@media (max-width:768px){
  body{ line-height:1.9; }
  .block-title{ padding-block:64px 44px; }
  .panel{ border-radius:24px 24px 0 0; padding:48px 20px 56px; }
  .panel--flush{ border-radius:0; }   /* bloc Organizations : pas d'arrondi en mobile */
}