/* Fichier nettoyé depuis 
/* ========================================================================== */
/* ANIMATAIX — Personnalisation de Cassiopeia Extended                       */
/* Fichier : media/templates/site/cassiopeia_extended/css/user.css           */
/* ========================================================================== */


/* ========================================================================== */
/* 1. EN-TÊTE                                                                */
/* ========================================================================== */

/* Écran large : place le logo et le menu principal sur une seule ligne. */
@media screen and (min-width: 992px) {
  header.container-header {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    grid-template-rows: auto !important;
    align-items: center !important;
    gap: 0 2rem;
    padding-top: 0.35rem;
    padding-bottom: 0.35rem;
  }

  /* Premier enfant de l'en-tête : zone du logo. */
  header.container-header > .grid-child:first-of-type {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Deuxième colonne : navigation principale. */
  header.container-header > .container-nav {
    grid-column: 2 !important;
    grid-row: 1 !important;
    align-self: center;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  header.container-header .navbar-brand {
    margin: 0 !important;
    padding: 0 !important;
  }

  header.container-header .navbar-brand img {
    display: block;
    width: auto;
    max-height: 55px;
  }

  header.container-header .navbar {
    margin: 0;
    padding: 0;
  }
}

/* Tablette et téléphone : réduit le logo, rapproche le bouton hamburger
   et augmente le contraste de ce bouton sur le fond de l'en-tête. */
@media screen and (max-width: 991.98px) {
  .container-header .navbar-brand {
    margin-bottom: 0;
    padding-top: 0.25rem;
    padding-bottom: 0;
  }

  .container-header .navbar-brand img {
    width: auto;
    max-height: 45px;
  }

  .container-header .container-nav,
  .container-header .navbar {
    margin-top: 0;
    padding-top: 0;
  }

  .container-header .navbar-toggler {
    color: #111;
    border-color: #111;
  }

  .container-header .navbar-toggler .icon-menu,
  .container-header .navbar-toggler-icon {
    color: #111;
  }
}
/* Écran intermédiaire : compacte le menu avant son passage en hamburger. */
@media screen and (min-width: 992px) and (max-width: 1199.98px) {
  header.container-header {
    gap: 0 0.75rem;
  }

  /* Regroupe les entrées à partir de la gauche. */
  .container-header .metismenu.mod-menu {
    justify-content: flex-start;
    gap: 0;
  }

  /* Cassiopeia place principalement l'espacement sur chaque élément. */
  .container-header
    .metismenu.mod-menu
    > .metismenu-item {
    margin: 0;
    padding-right: 0.35rem;
    padding-left: 0.35rem;
    font-size: 0.9rem;
  }

  /* Évite d'ajouter une seconde marge dans le lien. */
  .container-header
    .metismenu.mod-menu
    > .metismenu-item
    > a {
    padding-right: 0;
    padding-left: 0;
  }
}

/* ========================================================================== */
/* 2. BANDEAU (HERO) DE LA PAGE D'ACCUEIL                                    */
/* ========================================================================== */

/* Ces règles sont limitées à la classe de page "accueil-animataix".
   Le module placé en position banner doit aussi être assigné à Accueil seul. */
.accueil-animataix .hero {
  position: relative;
  overflow: hidden;
}

/* Affiche la photographie panoramique entière, sans recadrage. */
.accueil-animataix .hero img {
  display: block;
  width: 100%;
  height: auto;
}

/* Texte superposé à la photographie sur écran large. */
.accueil-animataix .hero-text {
  position: absolute;
  z-index: 2;
  left: 5%;
  bottom: 12%;
  color: #fff;
  text-shadow: 1px 1px 5px rgb(0 0 0 / 90%);
}

.accueil-animataix .hero-text h1 {
  margin: 0;
  font-size: clamp(2rem, 5vw, 4rem);
}

.accueil-animataix .hero-text p {
  margin: 0.5rem 0 0;
  font-size: clamp(1rem, 2vw, 1.5rem);
}

/* Écran large : fixe la photographie derrière le contenu et réserve sous
   l'en-tête une hauteur calculée d'après son format réel (2030 × 500 px).
   La limite de 565 px correspond à 500 px d'image + 65 px d'en-tête. */
@media screen and (min-width: 992px) {
  .accueil-animataix .container-banner {
    position: fixed;
    top: 65px;
    right: 0;
    left: 0;
    z-index: 0;
  }

  .accueil-animataix .container-component {
    position: relative;
    z-index: 1;
    margin-top: min(calc((100vw * 500 / 2030) + 65px), 565px);
    background-color: #fff;
  }
}

/* Tablette et téléphone : le bandeau reprend sa place dans le flux normal.
   Le texte est ancré par le haut : si le sous-titre occupe deux lignes, il
   grandit vers le bas sans repousser le titre ANIMATAIX sous l'en-tête. */
@media screen and (max-width: 991.98px) {
  .accueil-animataix .container-banner {
    position: static;
  }

  .accueil-animataix .container-component {
    margin-top: 0;
  }

  .accueil-animataix .hero-text {
    top: 1rem;
    right: 1rem;
    bottom: auto;
    left: 1rem;
    padding: 0;
    transform: none;
  }

  .accueil-animataix .hero-text h1 {
    font-size: clamp(1.8rem, 9vw, 2.7rem);
  }

  .accueil-animataix .hero-text p {
    margin-top: 0.25rem;
    font-size: 1rem;
    line-height: 1.2;
  }
}


/* ========================================================================== */
/* 3. ARTICLES ÉPINGLÉS DE LA PAGE D'ACCUEIL                                 */
/* ========================================================================== */

/* Présente chaque article sous forme de carte, titre et texte compris.
   La hauteur à 100 % égalise les cartes d'une même rangée. */
.accueil-animataix .blog-items .blog-item {
  box-sizing: border-box;
  height: 100%;
  padding: 1rem;
  background-color: #fff;
  border: 1px solid #d8d8d8;
  border-radius: 0.4rem;
}

/* Écran large seulement : réserve une zone 16:9 identique au sommet de
   chaque carte. Sans image, cette zone reste vide et maintient l'alignement. */
@media screen and (min-width: 992px) {
  .accueil-animataix .blog-items .blog-item {
    position: relative;
  }

  .accueil-animataix .blog-items .blog-item::before {
    content: "";
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    margin-bottom: 1rem;
  }

  /* Place l'image dans la zone réservée, à l'intérieur du cadre et de son
     espacement intérieur de 1 rem. */
  .accueil-animataix .blog-items .blog-item .item-image {
    position: absolute;
    top: 1rem;
    left: 1rem;
    width: calc(100% - 2rem);
    aspect-ratio: 16 / 9;
    margin: 0;
    overflow: hidden;
    border-radius: 0.25rem;
  }

  /* Recadre portrait et paysage dans le cadre commun, sans déformation. */
  .accueil-animataix .blog-items .blog-item .item-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

/* Prolonge le fond blanc du composant jusqu'aux bords de l'écran tout en
   conservant la largeur normale du contenu. L'image fixe reste ainsi masquée
   à droite et à gauche pendant le défilement des articles. */
.accueil-animataix .container-component {
  background-color: #fff;
  box-shadow: 0 0 0 100vmax #fff;
  clip-path: inset(0 -100vmax);
}


/* ========================================================================== */
/* 4. PAGE DE CONNEXION DES MEMBRES                                           */
/* ========================================================================== */

/* Limite la largeur du formulaire et le centre dans la page. */
.connexion-membres .com-users-login {
  max-width: 32rem;
  margin-inline: auto;
}

/* Masque les liens de récupération, inutiles pour le compte générique
   administré directement dans Joomla. */
.connexion-membres .com-users-login__options {
  display: none;
}

/* ========================================================================== */
/* 5. PIED DE PAGE                                           */
/* ========================================================================== */

.container-footer {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2rem;
  align-items: start;
}

.container-footer .footer-col {
  min-width: 0;
}

@media (max-width: 768px) {
  .container-footer {
    grid-template-columns: 1fr;
  }
}