/* ==========================================================================
   Salon du Cheval — Feuille de style principale================== */


/* ==========================================================================
   1. Variables & réglages globaux
   --------------------------------------------------------------------------
   Palette indicative (vert institutionnel / or), à ajuster si besoin :
   il suffit de modifier les valeurs ci-dessous pour re-thémer tout le site.
   ========================================================================== */
:root {
  --color-primary: #0b3d2e;   /* vert foncé institutionnel */
  --color-secondary: #c9a227; /* or / doré                 */
  --color-bg: #ffffff;
  --color-bg-alt: #f7f5f0;    /* beige clair (sections alternées) */
  --color-text: #222222;
  --color-text-light: #ffffff;
  --color-alert: #097b9f;     /* bleu du bandeau d'annonce */
  --color-alert-dark: #065a76;/* teinte basse de son clignotement */
  --color-gold-dark: #9a7a12;  /* teinte basse du bouton dore clignotant */

  /* Réglages divers réutilisés dans la feuille */
  --header-padding: 20px;
  --radius-card: 6px;
  --shadow-soft: 0 4px 14px rgba(0, 0, 0, .08);
  --shadow-strong: 0 18px 40px rgba(0, 0, 0, .22);
  --transition-base: .35s ease;
}

/* Défilement fluide pour les ancres internes */
html {
  scroll-behavior: smooth;
}

body {
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: 'Montserrat', 'Segoe UI', Arial, sans-serif;
  font-weight: 400;
  /* Compense le header sticky lors des ancres */
  scroll-padding-top: 120px;
}


/* ==========================================================================
   2. Typographie
   ========================================================================== */
h1, h2, h3, h4, h5, h6,
.fw-title {
  font-weight: 700;
  color: #222842;
  letter-spacing: .3px;
}

/* Titre de section : libellé centré + petit filet doré décoratif */
.section-title {
  text-align: center;
  margin-bottom: 2.5rem;
}

.section-title h2 {
  text-transform: uppercase;
  font-size: clamp(1.35rem, 2.4vw, 2rem);
  margin-bottom: .75rem;
}

.section-title::after {
  content: "";
  display: block;
  width: 70px;
  height: 3px;
  margin: 0 auto;
  background: var(--color-secondary);
}

/* Variante claire du titre (utilisée sur fond vert, ex. footer) */
.section-title--light h2 {
  color: var(--color-text-light);
}

/* Ligne arabe affichée sous la ligne française d'un titre/sous-titre bilingue */
.lang-ar {
  display: block;
  direction: rtl;
  unicode-bidi: isolate;
  font-family: 'Cairo', 'Montserrat', sans-serif;
  font-size: .72em;
  font-weight: 600;
  text-transform: none;
  opacity: .82;
  margin-top: .2em;
}

.text-gold {
  color: var(--color-secondary);
}

.bg-alt {
  background-color: var(--color-bg-alt);
}


/* ==========================================================================
   3. Header sticky (logo centré uniquement)
   --------------------------------------------------------------------------
   Pas de menu de navigation : bandeau minimaliste, logo cliquable = accueil.
   La classe .is-scrolled est ajoutée par assets/js/script.js (scrollY > 50).
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1030;                 /* au-dessus du contenu (cf. Bootstrap) */
  background-color: var(--color-bg-alt);
  padding: var(--header-padding) 0;
  box-shadow: none;
  transition: box-shadow var(--transition-base),
              padding var(--transition-base),
              background-color var(--transition-base);
}

/* État « scrollé » : ombre légère + bandeau plus compact */
.site-header.is-scrolled {
  background-color: var(--color-bg);
  box-shadow: 0 4px 18px rgba(0, 0, 0, .12);
  padding: 10px 0;
}

.site-header .logo-link,
.site-header .logo-partner-link {
  display: inline-block;
  line-height: 0;                /* supprime l'espace sous l'image */
}

.site-header .logo-link img {
  height: 92px;
  width: auto;
  transition: height var(--transition-base);
}

.site-header.is-scrolled .logo-link img {
  height: 66px;
}

/* Rangee des deux logos : l'ecart se regle ici en un seul point */
.header-logos {
  gap: 46px;
  flex-wrap: wrap;
}

/* Logo institutionnel partenaire, legerement plus petit que celui du salon.
   mix-blend-mode fond son aplat blanc dans le beige du bandeau. */
.site-header .logo-partner {
  height: 110px;
  width: auto;
  mix-blend-mode: multiply;
  transition: height var(--transition-base);
}

.site-header.is-scrolled .logo-partner {
  height: 54px;
}


/* ==========================================================================
   4. Section « 2 visuels rectangulaires » (page d'accueil)
   --------------------------------------------------------------------------
   Deux cartes rectangulaires empilées l'une sous l'autre.
   Chaque carte est un <a> entièrement cliquable.
   ========================================================================== */
.event-cards {
  /* Largeur max pour garder un rectangle lisible sur grands écrans */
  max-width: 900px;
  margin: 0 auto;
}

.event-card {
  position: relative;
  display: block;
  max-width: 100%;
  width: 100%;
  aspect-ratio: 16 / 7;          /* ratio rectangulaire */
  overflow: hidden;              /* contient le zoom de l'image */
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-soft);
  text-decoration: none;
  isolation: isolate;            /* contexte d'empilement propre */
  transition: box-shadow var(--transition-base),
              transform var(--transition-base);
}

/* Couche image en fond (élément séparé pour pouvoir la zoomer seule) */
.event-card__media {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transform: scale(1);
  transition: transform .4s ease;
}

/* Visuels de fond (déclarés ici pour rester modifiables en un point) */
.event-card--barbes .event-card__media {
  background-image: url('../img/visuel1.jpg');
}

.event-card--arabes-barbes .event-card__media {
  background-image: url('../img/visuel2.jpg');
}

/* Dégradé permanent en bas : garantit la lisibilité du titre */
.event-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, .65) 0%, rgba(0, 0, 0, 0) 55%);
  z-index: 1;
  pointer-events: none;
}

/* Overlay sombre révélé au survol */
.event-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .35);
  opacity: 0;
  z-index: 2;
  pointer-events: none;
  transition: opacity var(--transition-base);
}

.event-card:hover::after,
.event-card:focus-visible::after {
  opacity: 1;
}

.event-card:hover .event-card__media,
.event-card:focus-visible .event-card__media {
  transform: scale(1.05);        /* léger zoom de l'image */
}

.event-card:hover,
.event-card:focus-visible {
  box-shadow: var(--shadow-strong);
}

.event-card:focus-visible {
  outline: 3px solid var(--color-secondary);
  outline-offset: 3px;
}

/* Contenu texte par-dessus l'image */
.event-card__body {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  padding: 1.5rem 1.4rem;
  text-align: center;
  color: var(--color-text-light);
}

.event-card__title {
  display: block;                /* le titre est un <span> dans le lien */
  color: var(--color-text-light);
  font-size: clamp(1.05rem, 2vw, 1.35rem);
  font-weight: 700;
  margin: 0 0 .35rem;
  text-shadow: 0 2px 8px rgba(0, 0, 0, .55);
}

.event-card__subtitle {
  display: block;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--color-secondary);
  margin: 0;
}


/* ==========================================================================
   5. Bannière des pages événement
   --------------------------------------------------------------------------
   Visuel rectangulaire pleine largeur, hauteur bornée, recadrage « cover ».
   ========================================================================== */
.page-banner {
  position: relative;
  overflow: hidden;
}

.page-banner img {
  width: 100%;
  height: 440px;                 /* ~400-450px demandé */
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Titre superposé à la bannière */
.page-banner__caption {
  position: absolute;
  inset: auto 0 0 0;
  padding: 2.5rem 1rem 1.75rem;
  background: linear-gradient(to top, rgba(0, 0, 0, .7), rgba(0, 0, 0, 0));
  text-align: center;
  color: var(--color-text-light);
}

.page-banner__caption h1 {
  color: var(--color-text-light);
  font-size: clamp(1.4rem, 3.5vw, 2.4rem);
  margin: 0;
  text-shadow: 0 2px 10px rgba(0, 0, 0, .6);
}

.page-banner__caption p {
  margin: .4rem 0 0;
  color: var(--color-secondary);
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-size: .8rem;
}


/* --------------------------------------------------------------------------
   Bandeau d'alerte bleu clignotant, place juste sous la banniere.
   Le texte (français + arabe) defile en boucle infinie vers la gauche.
   -------------------------------------------------------------------------- */
.alert-band {
  background-color: var(--color-alert);
  color: #fff;
  overflow: hidden;
  padding: 16px 0;
  margin: 0;
  /* Le fond pulse, le texte reste opaque : l'effet attire l'oeil
     sans jamais rendre le message illisible. */
  animation: alert-pulse 1.3s ease-in-out infinite;
}

.alert-band__track {
  display: inline-flex;
  width: max-content;
  white-space: nowrap;
  animation: alert-scroll 24s linear infinite;
}

.alert-band__item {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  padding: 0 2.5rem;
  font-weight: 700;
  font-size: clamp(.9rem, 1.6vw, 1.1rem);
  letter-spacing: .4px;
}

.alert-band__item .lang-ar-inline {
  direction: rtl;
  unicode-bidi: isolate;
  font-family: 'Cairo', 'Montserrat', sans-serif;
  font-weight: 600;
}

.alert-band__sep {
  color: var(--color-secondary);
}

@keyframes alert-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@keyframes alert-pulse {
  0%, 100% { background-color: var(--color-alert); }
  50%      { background-color: var(--color-alert-dark); }
}


/* ==========================================================================
   6. Boutons — .btn-salon
   --------------------------------------------------------------------------
   Fond plein -> fond transparent bordé au survol, + translateY et ombre.
   Variante dorée : .btn-salon--gold
   Couleurs propres aux boutons (distinctes de la palette globale du site) :
   --btn-color remplace le vert institutionnel, --btn-color-gold remplace le doré.
   ========================================================================== */
.btn-salon {
  --btn-color: #222842;
  --btn-color-gold: #c32800;
  --btn-color-gold-dark: #7f1a00;

  display: inline-block;
  padding: 14px 32px;
  background: var(--btn-color);
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  font-size: .95rem;
  letter-spacing: .5px;
  text-align: center;
  border: 2px solid var(--btn-color);
  border-radius: 30px;
  cursor: pointer;
  transition: all .35s ease;
}

.btn-salon:hover,
.btn-salon:focus-visible {
  background: transparent;
  color: var(--btn-color);
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, .15);
}

.btn-salon:focus-visible {
  outline: 2px solid var(--btn-color-gold);
  outline-offset: 3px;
}

/* Variante dorée (mise en avant, ex. « Inscription ») */
.btn-salon--gold {
  background: var(--btn-color-gold);
  border-color: var(--btn-color-gold);
}

.btn-salon--gold:hover,
.btn-salon--gold:focus-visible {
  background: transparent;
  color: var(--btn-color-gold);
}

/* Bouton clignotant : meme principe que .alert-band, transpose aux couleurs
   du bouton. Le fond pulse, le libelle reste toujours lisible.
   L'animation s'arrete au survol pour laisser jouer l'effet « outline ». */
.btn-salon--pulse {
  animation: btn-pulse 1.3s ease-in-out infinite;
}

@keyframes btn-pulse {
  0%, 100% {
    background-color: var(--btn-color-gold);
    border-color: var(--btn-color-gold);
  }
  50% {
    background-color: var(--btn-color-gold-dark);
    border-color: var(--btn-color-gold-dark);
  }
}

.btn-salon--pulse:hover,
.btn-salon--pulse:focus-visible {
  animation: none;
}

/* Variante claire sur fond sombre */
.btn-salon--light {
  background: transparent;
  border-color: var(--color-text-light);
  color: var(--color-text-light);
}

.btn-salon--light:hover,
.btn-salon--light:focus-visible {
  background: var(--color-text-light);
  color: var(--color-primary);
}

/* Groupe des 3 boutons d'une page événement */
.btn-group-salon {
  gap: 1.25rem;
}

/* Ces 3 boutons sont l'appel à l'action principal des pages événement :
   ils sont volontairement plus grands que les boutons courants du site.
   Le sélecteur est limité au groupe, les autres .btn-salon ne bougent pas. */
.btn-group-salon .btn-salon {
  padding: 18px 46px;
  font-size: 1.08rem;
  border-radius: 34px;
}


/* ==========================================================================
   7. Page « Mot du Président »
   ========================================================================== */
.president-photo {
  width: 100%;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-soft);
  object-fit: cover;
}

.president-card {
  background: var(--color-bg-alt);
  border-left: 4px solid var(--color-secondary);
  padding: 1.25rem 1.5rem;
  margin-top: 1.25rem;
  border-radius: 0 var(--radius-card) var(--radius-card) 0;
}

.president-card .name {
  font-weight: 700;
  color: var(--color-primary);
  margin: 0;
}

.president-card .role {
  margin: .15rem 0 0;
  font-size: .9rem;
  color: #666;
}

/* Variante RTL : bordure et arrondi inversés, police arabe */
.president-card--rtl {
  border-left: none;
  border-right: 4px solid var(--color-secondary);
  border-radius: var(--radius-card) 0 0 var(--radius-card);
  font-family: 'Cairo', sans-serif;
}

/* Texte du discours : paragraphes justifiés, interlignage confortable */
.speech {
  text-align: justify;
  line-height: 1.9;
  font-size: 1rem;
  color: #333;
}

.speech p {
  margin-bottom: 1.15rem;
}

/* Lettrine sur le premier paragraphe */
.speech > p:first-of-type::first-letter {
  float: left;
  font-size: 3.2rem;
  line-height: 1;
  font-weight: 700;
  color: var(--color-secondary);
  padding: .1rem .55rem 0 0;
}

/* Variante arabe (RTL) du discours : pas de lettrine, alignement inversé */
.speech--rtl {
  direction: rtl;
  font-family: 'Noto Naskh Arabic', 'Cairo', serif;
}

.speech--rtl > p:first-of-type::first-letter {
  float: none;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
  padding: 0;
}

.speech--rtl .signature {
  text-align: left;
}

.speech .signature {
  text-align: right;
  font-weight: 600;
  color: var(--color-primary);
  margin-top: 2rem;
}


/* ==========================================================================
   8. Page « Inscription »
   ========================================================================== */
.redirect-box {
  max-width: 620px;
  margin: 0 auto;
  background: var(--color-bg-alt);
  border: 1px solid rgba(11, 61, 46, .12);
  border-radius: var(--radius-card);
  padding: 2.5rem 2rem;
  text-align: center;
}

/* Petit spinner « redirection en cours » */
.redirect-spinner {
  width: 46px;
  height: 46px;
  margin: 0 auto 1.25rem;
  border: 4px solid rgba(11, 61, 46, .15);
  border-top-color: var(--color-secondary);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}


/* ==========================================================================
   9. Footer + zone Sponsors
   ========================================================================== */
.sponsors {
  background-color: var(--color-bg-alt);
  padding: 3.5rem 0;
}

.sponsor-item {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: .5rem;
}

/* Logos en niveaux de gris, colorisés au survol */
.sponsor-item img {
  max-width: 100%;
  max-height: 80px;
  width: auto;
  filter: grayscale(100%);
  opacity: .75;
  transition: filter .3s ease, opacity .3s ease, transform .3s ease;
}

.sponsor-item img:hover {
  filter: grayscale(0%);
  opacity: 1;
  transform: scale(1.04);
}

/* --------------------------------------------------------------------------
   Variante utilisee sur le site : UNE SEULE image rectangulaire regroupant
   tous les logos partenaires. Les regles .sponsor-item ci-dessus restent
   disponibles si vous revenez un jour a une grille de logos separes.
   -------------------------------------------------------------------------- */
.sponsors-banner {
  display: block;
  width: 100%;
  max-width: 1100px;   /* evite un bandeau demesure sur grand ecran */
  height: auto;
  margin: 0 auto;
  transition: transform .3s ease;
}

/* Decommentez pour retrouver l'effet noir & blanc -> couleur au survol :
.sponsors-banner {
  filter: grayscale(100%);
  opacity: .8;
  transition: filter .3s ease, opacity .3s ease, transform .3s ease;
}
.sponsors-banner:hover {
  filter: grayscale(0%);
  opacity: 1;
}
*/

.site-footer {
  background-color: var(--color-primary);
  color: rgba(255, 255, 255, .85);
  padding: 3rem 0 1.5rem;
  text-align: center;
}

.site-footer .footer-logo {
  height: 84px;
  width: auto;
  margin-bottom: 1.5rem;
  /* Le logo est sur fond vert : on l'éclaircit légèrement */
  filter: brightness(0) invert(1);
  opacity: .95;
}

/* Réseaux sociaux */
.social-list {
  list-style: none;
  display: flex;
  justify-content: center;
  gap: 1rem;
  padding: 0;
  margin: 0 0 1.75rem;
}

.social-list a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .35);
  color: var(--color-text-light);
  transition: transform .3s ease, background-color .3s ease,
              border-color .3s ease, color .3s ease;
}

.social-list a:hover,
.social-list a:focus-visible {
  transform: scale(1.1);         /* légère mise à l'échelle */
  background-color: var(--color-secondary);
  border-color: var(--color-secondary);
  color: var(--color-primary);
}

.social-list svg {
  width: 19px;
  height: 19px;
  fill: currentColor;
}

.footer-copy {
  font-size: .8rem;
  color: rgba(255, 255, 255, .55);
  margin: 0;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, .12);
}


/* ==========================================================================
   10. Animations d'apparition au scroll
   --------------------------------------------------------------------------
   .reveal est l'état initial ; .is-visible est ajoutée par l'IntersectionObserver
   défini dans assets/js/script.js.
   ========================================================================== */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .7s ease, transform .7s ease;
  will-change: opacity, transform;
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Décalages en cascade pour les éléments d'une même rangée */
.reveal-delay-1 { transition-delay: .12s; }
.reveal-delay-2 { transition-delay: .24s; }
.reveal-delay-3 { transition-delay: .36s; }

/* Accessibilité : on neutralise les animations si l'utilisateur le demande */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .event-card__media,
  .event-card::after,
  .btn-salon,
  .social-list a,
  .sponsor-item img {
    transition: none;
  }

  .redirect-spinner { animation: none; }

  /* Le bandeau et le bouton restent visibles, mais fixes */
  .alert-band,
  .alert-band__track,
  .btn-salon--pulse { animation: none; }
}


/* ==========================================================================
   11. Responsive
   ========================================================================== */

/* Tablette et moins */
@media (max-width: 767.98px) {
  .site-header .logo-link img { height: 72px; }
  .site-header.is-scrolled .logo-link img { height: 56px; }

  /* Ecart reduit et logo partenaire plus compact sur petit ecran */
  .header-logos { gap: 22px; }
  .site-header .logo-partner { height: 54px; }
  .site-header.is-scrolled .logo-partner { height: 44px; }

  .event-card { aspect-ratio: 4 / 3; }

  .page-banner img { height: 300px; }
}

/* Mobile : les 3 boutons passent en colonne, gap 15px */
@media (max-width: 575.98px) {
  .btn-group-salon {
    flex-direction: column;
    align-items: stretch;
    gap: 15px;
  }

  .btn-salon {
    width: 100%;
    padding: 13px 20px;
  }

  /* Version mobile des gros boutons événement (annule le padding desktop) */
  .btn-group-salon .btn-salon {
    padding: 15px 24px;
    font-size: 1rem;
  }

  .page-banner img { height: 230px; }

  .speech { text-align: left; }   /* évite les « rivières » sur écran étroit */
  .speech--rtl { text-align: right; }

  .redirect-box { padding: 1.75rem 1.25rem; }
}