/* =========================================================
   PROJET 2 — HOME TEST DAMPIERRE
   Fichier : hero-home.css
   Version : finale stabilisée
   ---------------------------------------------------------
   Objectif :
   - conserver le header existant ;
   - agrandir le logo ;
   - garder le Hero plein écran ;
   - limiter au maximum la démarcation header / Hero ;
   - ne pas toucher à l'accueil actuelle.
   ========================================================= */


/* =========================================================
   01 - PAGE HOME TEST : SUPPRESSION DU CADRE JOOMLA
   ========================================================= */

body.home-slider-test,
body.home-slider-test .site-grid {
  margin: 0 !important;
  padding: 0 !important;
  background: var(--dampierre-degrade, #252a7f) !important;
}

body.home-slider-test .container-component,
body.home-slider-test main,
body.home-slider-test .com-content-article,
body.home-slider-test .com-content-article__body,
body.home-slider-test .item-page,
body.home-slider-test .moduletable,
body.home-slider-test .card,
body.home-slider-test .card-body {
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  background: transparent !important;
}

body.home-slider-test .page-header,
body.home-slider-test h1:not(.home2-hero__title) {
  display: none !important;
}


/* =========================================================
   02 - HEADER HOME TEST : LOGO PLUS GRAND
   ========================================================= */

body.home-slider-test .container-header {
  min-height: 205px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
  position: relative;
  z-index: 20;
  background: var(--dampierre-degrade, linear-gradient(135deg,#2c7bc6 0%,#2d318f 45%,#252a7f 100%)) !important;
}

body.home-slider-test .container-header .grid-child,
body.home-slider-test .container-header .navbar,
body.home-slider-test .container-header .container-nav {
  min-height: 205px !important;
  align-items: center !important;
}

body.home-slider-test .container-header .navbar-brand img,
body.home-slider-test .container-header .brand-logo img {
  max-height: 210px !important;
  width: auto !important;
}

/* Transition douce issue du header : atténue la démarcation */
body.home-slider-test .container-header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -70px;
  height: 70px;
  z-index: 30;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(37,42,127,.95) 0%,
    rgba(37,42,127,.70) 38%,
    rgba(37,42,127,.28) 72%,
    rgba(37,42,127,0) 100%
  );
}


/* =========================================================
   03 - HERO PRINCIPAL
   ========================================================= */

.home2-hero {
  --home2-bleu-nuit: var(--dampierre-bleu-nuit, #252a7f);
  --home2-bleu: var(--dampierre-bleu, #2d318f);
  --home2-bleu-clair: var(--dampierre-bleu-clair, #2c7bc6);
  --home2-fuchsia: var(--dampierre-fuchsia, #e5007d);
  --home2-or: var(--dampierre-or, #d7b85b);
  --home2-blanc: var(--dampierre-blanc, #fff);

  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: center;

  width: 100vw !important;
  max-width: 100vw !important;
  min-height: calc(100vh - 205px);
  margin-left: calc(50% - 50vw) !important;
  margin-top: 0 !important;
  padding-top: 0 !important;

  overflow: hidden;
  color: var(--home2-blanc);
  background: var(--home2-bleu-nuit);
}


/* =========================================================
   04 - DIAPORAMA DE FOND
   ========================================================= */

.home2-hero__slides {
  position: absolute;
  inset: 0;
  z-index: -4;
}

.home2-hero__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  transform: scale(1.035);
  transition:
    opacity 750ms ease,
    transform 4000ms ease;
}

.home2-hero__slide.is-active {
  opacity: 1;
  transform: scale(1);
}


/* =========================================================
   05 - VOILES BLEUS
   ========================================================= */

.home2-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -3;
  pointer-events: none;
  background:
    linear-gradient(
      135deg,
      rgba(37,42,127,.64) 0%,
      rgba(44,123,198,.30) 100%
    ),
    linear-gradient(
      to bottom,
      rgba(37,42,127,.42) 0%,
      rgba(37,42,127,.36) 26%,
      rgba(37,42,127,.66) 100%
    );
}

.home2-hero__slides::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 120px;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(37,42,127,.75) 0%,
    rgba(37,42,127,.48) 42%,
    rgba(37,42,127,.15) 76%,
    rgba(37,42,127,0) 100%
  );
}

.home2-hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  z-index: -2;
  height: 46%;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(0,0,0,.16) 52%,
    rgba(0,0,0,.30) 100%
  );
}


/* =========================================================
   06 - CONTENU
   ========================================================= */

.home2-hero__content {
  width: min(980px, calc(100% - 2rem));
  margin: 0 auto;
  padding: clamp(2.2rem, 5vw, 4rem) 1.25rem;
  text-align: center;
  animation: home2FadeUp .65s ease both;
}

@media (min-width: 992px) {
  .home2-hero__content {
    transform: translateY(-24px);
  }
}

.home2-hero__title {
  display: block !important;
  margin: 0 0 .85rem;
  color: #fff !important;
  font-size: clamp(3.5rem, 6.4vw, 5.6rem);
  font-weight: 900;
  line-height: 1.02;
  letter-spacing: .01em;
  text-shadow: 0 4px 18px rgba(0,0,0,.42);
}

.home2-hero__subtitle {
  max-width: 900px;
  margin: 0 auto 1.55rem;
  color: rgba(255,255,255,.98);
  font-size: clamp(1.15rem, 2vw, 1.62rem);
  font-weight: 750;
  line-height: 1.35;
  text-shadow: 0 3px 14px rgba(0,0,0,.36);
}


/* =========================================================
   07 - BOUTONS
   ========================================================= */

.home2-hero__actions {
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: 1rem;
  flex-wrap: wrap;
}

.home2-btn,
.home2-btn:visited {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 250px;
  min-height: 60px;
  padding: 1rem 1.65rem;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.20);
  border-radius: 999px;
  font-size: 1.05rem;
  font-weight: 850;
  line-height: 1.2;
  text-decoration: none !important;
  box-shadow: 0 10px 24px rgba(13, 27, 76, .27);
  transition:
    transform .20s ease,
    box-shadow .20s ease,
    filter .20s ease;
}

.home2-btn__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: .8rem;
  padding-right: .8rem;
  border-right: 1px solid rgba(255,255,255,.30);
}

.home2-btn__icon i {
  color: currentColor !important;
  font-size: 1.12rem;
}

.home2-btn--lycee {
  background: linear-gradient(135deg, var(--home2-bleu), var(--home2-bleu-nuit));
}

.home2-btn--centre {
  background: linear-gradient(135deg, #f0188d, var(--home2-fuchsia));
}

.home2-btn--1926,
.home2-btn--1926:visited {
  color: var(--home2-bleu-nuit) !important;
  background: linear-gradient(135deg, #f2c84d, var(--home2-or));
  border-color: rgba(37,42,127,.22);
}

.home2-btn--1926 .home2-btn__icon {
  border-right-color: rgba(37,42,127,.28);
}

.home2-btn--1926 i {
  color: var(--home2-bleu-nuit) !important;
}

.home2-btn:hover,
.home2-btn:focus {
  transform: translateY(-2px);
  filter: brightness(1.04);
  box-shadow: 0 14px 30px rgba(13, 27, 76, .35);
  text-decoration: none !important;
}


/* =========================================================
   08 - SIGNATURE ET POINTS
   ========================================================= */

.home2-hero__signature {
  margin-top: 1.55rem;
  color: rgba(255,255,255,.96);
  font-size: clamp(1rem, 1.35vw, 1.22rem);
  font-style: italic;
  font-weight: 500;
  letter-spacing: .03em;
  text-shadow: 0 2px 10px rgba(0,0,0,.35);
}

.home2-hero__signature::before,
.home2-hero__signature::after {
  content: "";
  display: inline-block;
  width: 48px;
  height: 1px;
  margin: 0 .8rem;
  vertical-align: middle;
  background: rgba(244,176,0,.85);
}

.home2-hero__dots {
  display: flex;
  justify-content: center;
  gap: .45rem;
  margin-top: 1.15rem;
}

.home2-hero__dot {
  width: 2rem;
  height: .22rem;
  border: 0;
  border-radius: 999px;
  background: rgba(255,255,255,.42);
  cursor: pointer;
}

.home2-hero__dot.is-active {
  background: var(--home2-or);
}


/* =========================================================
   09 - MOBILE
   ========================================================= */

@media (max-width: 700px) {
  body.home-slider-test .container-header {
    min-height: 145px !important;
  }

  body.home-slider-test .container-header .grid-child,
  body.home-slider-test .container-header .navbar,
  body.home-slider-test .container-header .container-nav {
    min-height: 145px !important;
  }

  body.home-slider-test .container-header .navbar-brand img,
  body.home-slider-test .container-header .brand-logo img {
    max-height: 132px !important;
  }

  body.home-slider-test .container-header::after {
    bottom: -48px;
    height: 48px;
  }

  .home2-hero {
    min-height: calc(100vh - 145px);
  }

  .home2-hero__content {
    width: min(100%, 390px);
    padding: 1.6rem 1.15rem 1.25rem;
    transform: none !important;
  }

  .home2-hero__title {
    max-width: 320px;
    margin: 0 auto .75rem;
    font-size: clamp(2.25rem, 10vw, 3rem);
    line-height: 1.08;
    text-align: left;
  }

  .home2-hero__subtitle {
    max-width: 340px;
    margin: 0 auto 1.05rem;
    font-size: .98rem;
    line-height: 1.32;
    font-weight: 760;
  }

  .home2-hero__actions {
    flex-direction: column;
    align-items: center;
    gap: .72rem;
  }

  .home2-btn,
  .home2-btn:visited {
    width: min(100%, 320px);
    min-width: 0;
    min-height: 54px;
    padding: .78rem 1.05rem;
    font-size: 1rem;
  }

  .home2-hero__signature {
    margin-top: 1.15rem;
    font-size: .95rem;
  }

  .home2-hero__signature::before,
  .home2-hero__signature::after {
    display: none;
  }

  .home2-hero__slides::after {
    height: 70px;
  }
}

@media (max-width: 420px) {
  .home2-hero__content {
    padding-top: 1.15rem;
    padding-bottom: .95rem;
  }

  .home2-hero__title {
    font-size: 2.25rem;
    margin-bottom: .55rem;
  }

  .home2-hero__subtitle {
    font-size: .9rem;
    margin-bottom: .85rem;
  }

  .home2-btn,
  .home2-btn:visited {
    min-height: 50px;
    padding: .68rem .95rem;
  }
}


/* =========================================================
   10 - ACCESSIBILITÉ
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
  .home2-hero__content,
  .home2-hero__slide,
  .home2-btn,
  .home2-hero__dot {
    animation: none !important;
    transition: none !important;
  }

  .home2-hero__slide {
    transform: none !important;
  }
}

@keyframes home2FadeUp {
  from {
    opacity: 0;
    transform: translateY(16px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}