/* ============================================================================
   USER.CSS — Habillage Cassiopeia (Joomla 4/5) reproduisant le design
   de l'ancien template jm-apartments (EF4) du site AFPL.
   Version consolidée (remplace toutes les versions précédentes / tous les
   blocs collés à la suite : il ne doit y avoir QUE ce fichier).
   Fichier à coller dans :
   Système > Gérer > Modèles de site > Cassiopeia > onglet "Fichiers du modèle"
   > user.css  (chemin réel : media/templates/site/cassiopeia/css/user.css)
   ============================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@300;400;500;700&display=swap');

:root {
  --cassiopeia-color-primary: #658eca;
  --cassiopeia-color-hover: #3e6eb4;
  --cassiopeia-color-link: #658eca;

  --afpl-blue: #658eca;
  --afpl-blue-dark: #3e6eb4;
  --afpl-bg-light: #f1f3f2;
  --afpl-bg-white: #ffffff;
  --afpl-text: #242424;
  --afpl-font-heading: 'Ubuntu', sans-serif;
  --afpl-font-body: Arial, Helvetica, sans-serif;
}

body { font-family: var(--afpl-font-body); color: var(--afpl-text); }
h1, h2, h3, h4, h5, h6 { font-family: var(--afpl-font-heading); font-weight: 400; color: var(--afpl-text); }

/* Titres de module : texte simple, PAS de bandeau coloré (comme sur la
   capture cible : "INFORMATIONS - FLASH - NOUVEAUTÉS" est juste du texte). */
.moduletable > h3,
.mod-title {
  font-family: var(--afpl-font-heading);
  font-size: 22px;
  font-weight: 400;
  text-transform: uppercase;
  text-align: center;
  margin: 0 0 20px;
  padding: 0;
  background: none !important;
  border: none !important;
  color: var(--afpl-text);
}

a { color: var(--afpl-blue); }
a:hover { color: var(--afpl-blue-dark); }

/* Garde-fou : Bootstrap centre normalement .container tout seul, mais si un
   style venait à casser ce comportement, on le restaure explicitement. */
.container, .container-fluid {
  margin-left: auto;
  margin-right: auto;
}

/* Toute "carte" ajoutée par le style de module Joomla (option "Carte" dans
   les paramètres avancés du module) ajoute un fond blanc + une bordure +
   une ombre : c'est souvent la source des "contours"/couleurs indésirables.
   On neutralise ça uniquement à l'intérieur de nos sections personnalisées. */
.afpl-section-light .card,
.afpl-flash .card,
.container-bottom-a .card,
.container-footer .card,
.afpl-section-light .moduletable,
.afpl-flash .moduletable,
.container-bottom-a .moduletable,
.container-footer .moduletable {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

.btn, .readmore {
  display: inline-block;
  vertical-align: middle;
  padding: 6px 30px;
  font-size: 14px;
  line-height: 20px;
  color: var(--afpl-blue);
  background: transparent;
  border: 1px solid var(--afpl-blue);
  border-radius: 0;
  text-decoration: none;
  transition: all .2s ease-in;
}
.btn:hover, .readmore:hover { color: #fff; background: var(--afpl-blue); }

/* ============================================================================
   HEADER — bannière + menu horizontal
   ============================================================================ */

.container-header {
  background: var(--afpl-bg-white);
  background-image: none;
  padding-top: 0;
}

/* --- Barre du haut (structure RÉELLE : .container-topbar contient
   Facebook (#mod-custom178), la date (.datetime), le formulaire de
   recherche (.mod-finder), PUIS la bannière (#mod-custom194).
   On force les 3 premiers éléments sur une seule ligne alignée à droite,
   et on fait passer la bannière sur sa propre ligne (flex-basis:100%)
   en la faisant "déborder" en blanc par-dessus le fond gris. --- */
.container-topbar {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
  padding: 8px 20px;
  /* Le gris ne colore QUE les 52 premiers pixels (hauteur de la ligne
     recherche/date/facebook), jamais la bannière qui passe en dessous,
     quelle que soit la hauteur totale du conteneur. */
  background-image: linear-gradient(var(--afpl-bg-light), var(--afpl-bg-light));
  background-repeat: no-repeat;
  background-size: 100% 52px;
  background-position: top;
}
/* Ordre d'affichage demandé : recherche, date, Facebook */
.container-topbar .js-finder-searchform { order: 1; }
.container-topbar .datetime { order: 2; }
.container-topbar #mod-custom178 { order: 3; }
.container-topbar #mod-custom194,
.container-topbar .afpl-banner {
  order: 4;
}
.container-topbar .mod-finder input[type="text"],
.container-topbar .js-finder-search-query {
  border: 1px solid #ccc;
  border-radius: 3px;
  padding: 6px 10px;
  min-width: 180px;
  color: var(--afpl-text);
}
.container-topbar .js-finder-search-query::placeholder {
  color: #999;
}
.container-topbar .mod-custom p {
  margin: 0;
  line-height: 1;
}
.container-topbar .datetime,
.container-topbar .date.gregorian span {
  color: var(--afpl-text) !important;
  font-size: 14px;
  white-space: nowrap;
}
.container-topbar label.finder {
  /* label caché visuellement mais gardé pour l'accessibilité */
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

/* --- Bannière : la classe afpl-banner__inner (déjà dans votre contenu du
   module) suffit à centrer le logo ; on force juste le module lui-même
   (id auto-généré par Joomla, donc fragile — mieux vaudrait lui ajouter
   une "Classe CSS du module" du genre "afpl-banner" pour être stable
   dans le temps) à passer sur sa propre ligne, à déborder du padding du
   conteneur pour couvrir le fond gris, et à avoir un fond blanc. */
#mod-custom194,
.afpl-banner {
  flex-basis: 100%;
  width: 100%;
  margin: 0;
  text-align: center;
  padding: 10px 0 0;
  background: var(--afpl-bg-white);
}
.afpl-banner__inner { max-width: 1140px; margin: 0 auto; }
.afpl-banner__logo img { display: block; margin: 0 auto; max-width: 100%; height: auto; }

/* --- MENU (position `menu`) ---
   Structure RÉELLE (simplifiée et unifiée côté Joomla) :

   ul.mod-menu.mod-menu_dropdown-metismenu.metismenu.mod-list
     li.metismenu-item.level-1[.parent][.divider]
       a                          <- item SANS enfant (ex. "Accueil")
       button.mm-toggler-nolink   <- item AVEC enfants : le libellé est
                                     dans ce bouton, quel qu'il soit
                                     (ex. "Expositions", "Nos Clubs")
       ul.mm-collapse             <- le sous-menu, si l'item a des enfants
         li.metismenu-item.level-2 / level-3 ...

   Il n'y a plus qu'un seul cas à gérer par rôle (item simple / item avec
   sous-menu), à tous les niveaux : plus besoin des règles spécifiques à
   "mm-toggler-link" (bouton-flèche séparé) qui n'existe plus dans le HTML. */

ul.mod-menu.metismenu.mod-list {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 6px;
  list-style: none !important;
  padding: 0;
  margin: 0;
  background: var(--afpl-bg-white);
  width: 100%;
}

/* Tous les items (tous niveaux) : pas de puce ni de bordure parasite */
ul.mod-menu.metismenu .metismenu-item {
  border: none !important;
  list-style: none !important;
  position: relative; /* nécessaire pour positionner le sous-menu au survol */
}

/* Un item avec enfants occupe toute la largeur DANS un sous-menu (niveau
   2+), pour que son fond de survol et son texte soient alignés comme ses
   voisins ; au niveau 1, ce sont des cases de la rangée horizontale du
   haut, donc pas de width:100% là (ça les empilerait en colonne). */
ul.mod-menu.metismenu ul.mm-collapse .metismenu-item.parent {
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Niveau 1 : Ubuntu 16px MAJUSCULES, comme sur l'ancien site. Une seule
   règle pour <a> (item simple) ET button.mm-toggler-nolink (item avec
   sous-menu) puisque le HTML est maintenant unifié. */
ul.mod-menu.metismenu .metismenu-item.level-1 > a,
ul.mod-menu.metismenu .metismenu-item.level-1 > button {
  display: flex;
  align-items: center;
  padding: 22px 16px;
  font-family: var(--afpl-font-heading);
  font-size: 16px;
  font-weight: 400;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--afpl-text);
  background: transparent !important;
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
  border-bottom: 4px solid transparent !important; /* barre bleue en dessous, voir plus bas */
  line-height: 1;
  white-space: nowrap;
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  box-sizing: border-box;
  transition: color .2s ease-in, border-color .2s ease-in;
}
/* Pas de flèche : le bouton ne contient que le texte du libellé */
ul.mod-menu.metismenu button.mm-toggler-nolink::before,
ul.mod-menu.metismenu button.mm-toggler-nolink::after {
  content: none !important;
  display: none !important;
}
/* EXCEPTION : dans les sous-menus, un item qui a lui-même un sous-menu
   (ex. "AFPL", "Catimini-Club" dans "Nos Clubs") affiche un "+" tout à
   droite de sa boîte, pour signaler qu'il y a encore du contenu dessous
   — sur desktop et mobile, puisque cette règle n'est pas dans une
   media query. Plus spécifique que la règle ci-dessus, donc elle gagne. */
ul.mod-menu.metismenu ul.mm-collapse .metismenu-item.parent > button.mm-toggler-nolink::after {
  content: "+" !important;
  display: inline-block !important;
  margin-left: auto;
  padding-left: 12px;
  font-weight: 700;
  font-size: 16px;
  line-height: 1;
  color: inherit;
  /* Cassiopeia dessine son propre triangle sur ce ::after via
     border/background (pas juste du texte) : on neutralise tout ça pour
     qu'il ne reste QUE notre "+". */
  background: none !important;
  background-image: none !important;
  border: none !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  transform: none !important;
  box-shadow: none !important;
}
/* Barre bleue au survol ET en permanence sous la page actuellement
   sélectionnée (classes "active"/"current" posées par Joomla). */
ul.mod-menu.metismenu .metismenu-item.level-1 > a:hover,
ul.mod-menu.metismenu .metismenu-item.level-1 > button:hover,
ul.mod-menu.metismenu .metismenu-item.level-1.active > a,
ul.mod-menu.metismenu .metismenu-item.level-1.active > button,
ul.mod-menu.metismenu .metismenu-item.level-1.current > a,
ul.mod-menu.metismenu .metismenu-item.level-1.current > button {
  color: var(--afpl-blue) !important;
  border-bottom-color: var(--afpl-blue) !important;
}

/* --- Sous-menu réel (ul.mm-collapse) : fond BLANC + texte foncé, aligné
   à gauche, une seule règle pour tous les niveaux et pour <a>/button. --- */
ul.mod-menu.metismenu ul.mm-collapse {
  background: #fff !important; /* !important : Cassiopeia semble définir
    son propre fond sur ce composant "collapse", qui gagnait face à notre
    valeur sans !important, d'où l'apparence transparente constatée. */
  border: 1px solid var(--afpl-bg-light) !important;
  border-radius: 0;
  padding: 8px 0;
  margin: 0;
  list-style: none !important;
  min-width: 220px;
  box-shadow: 0 8px 16px rgba(0, 0, 0, .12) !important;
}
ul.mod-menu.metismenu ul.mm-collapse .metismenu-item > a,
ul.mod-menu.metismenu ul.mm-collapse .metismenu-item > button {
  display: flex;
  align-items: center;
  justify-content: flex-start; /* aligné à gauche, pas centré */
  width: 100% !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  appearance: none;
  -webkit-appearance: none;
  color: var(--afpl-text) !important;
  background: transparent !important;
  border: none !important;
  padding: 10px 20px !important;
  font-family: var(--afpl-font-body);
  font-weight: 400;
  text-align: left !important;
  text-decoration: none !important;
  white-space: nowrap;
  transition: color .15s ease-in, background-color .15s ease-in;
}
ul.mod-menu.metismenu ul.mm-collapse .metismenu-item > a:hover,
ul.mod-menu.metismenu ul.mm-collapse .metismenu-item > button:hover {
  color: var(--afpl-blue-dark) !important;
  background: var(--afpl-bg-light) !important;
}

/* --- Ouverture AU SURVOL de tout l'item, avec fondu/glissé doux.
   Fermé : max-height:0 + overflow:hidden → aucun espace vide réservé.
   "position:absolute" fait flotter le sous-menu sans repousser le
   contenu en dessous. --- */
/* IMPORTANT : tout est en !important ici. Cassiopeia gère lui-même ce
   ul.mm-collapse comme un composant "collapse" Bootstrap (avec ses propres
   règles de position/display, probablement aussi en !important) : sans nos
   propres !important, nos valeurs peuvent perdre face aux siennes, et le
   sous-menu se remet alors à occuper sa vraie hauteur dans la page (d'où le
   grand espace vide constaté entre "AFPL" et "Catimini-Club" : le niveau 3
   n'était pas réellement sorti du flux). */
ul.mod-menu.metismenu ul.mm-collapse {
  display: block !important;
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  z-index: 500 !important;
  max-height: 0 !important;
  overflow: hidden !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transform: translateY(-8px) !important;
  transition: opacity .3s ease, transform .3s ease, visibility .3s, max-height .3s ease !important;
}
@media (hover: hover) {
  ul.mod-menu.metismenu .metismenu-item.parent > ul.mm-collapse {
    transition-delay: .1s; /* laisse le temps de glisser la souris vers le sous-menu */
  }
  ul.mod-menu.metismenu .metismenu-item.parent:hover > ul.mm-collapse {
    max-height: 600px !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
    overflow: visible !important;
    transition-delay: 0s;
  }
}

/* --- Sous-menu de NIVEAU 3 et plus (ex. "Nos Clubs" > "AFPL" > "Contact") :
   il s'ouvre À DROITE de son parent de niveau 2, aligné en haut avec le
   texte survolé (le -8px compense le "padding: 8px 0" du ul.mm-collapse,
   pour que "Contact" tombe au même niveau que "AFPL"). --- */
ul.mod-menu.metismenu ul.mm-collapse ul.mm-collapse {
  top: -8px !important;
  left: 100% !important;
  margin-left: 2px;
  transform: translateX(-8px) !important;
}
@media (hover: hover) {
  ul.mod-menu.metismenu ul.mm-collapse .metismenu-item.parent:hover > ul.mm-collapse {
    transform: translateX(0) !important;
  }
}

.navbar-toggler { color: var(--afpl-blue); border: 1px solid var(--afpl-blue); }

/* ============================================================================
   MENU MOBILE — sous le seuil desktop de Cassiopeia (991px), on ne touche
   PAS au mécanisme d'ouverture/fermeture du bouton hamburger (déjà géré
   par le Bootstrap/JS fourni par Cassiopeia : il affiche/masque le
   conteneur du menu tout seul). On corrige seulement 2 choses,
   nécessaires au tactile, SANS toucher au comportement desktop (basé sur
   :hover, laissé intact dans les règles précédentes) :
   1) le menu s'empile verticalement au lieu de rester en ligne ;
   2) les sous-menus s'ouvrent au CLIC (le survol n'existe pas au doigt),
      en s'appuyant sur "aria-expanded", que le script de Cassiopeia
      bascule déjà lui-même au clic sur chaque bouton — on ne réinvente
      pas de mécanisme de clic, on réagit juste à cet état existant.
   ============================================================================ */
@media (max-width: 991px) {
  /* Le CONTENEUR du menu (ouvert/fermé par le bouton hamburger) a sa
     propre hauteur calculée par le JS de Cassiopeia au moment de
     l'ouverture, figée en pixels via un style inline — si on déplie
     ensuite un sous-menu, son contenu déborde de cette boîte au lieu de
     l'agrandir. On force la hauteur à s'adapter automatiquement,
     !important pour gagner face à ce style inline. */
  .container-nav,
  .grid-child.container-nav,
  .navbar-collapse {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }
  /* Flexbox totalement retiré du menu mobile : un menu vertical n'en a pas
     besoin (un simple empilement de blocs suffit), et flexbox était la
     cause de TOUS les bugs précédents (le "min-height:auto" implicite des
     flex-items imbriqués fait que Chrome et Firefox calculent différemment
     la hauteur d'un flex-item qui contient lui-même un enfant en display
     bloc de hauteur variable — d'où le bouton "Expositions" qui gonflait
     à 220px, puis la boîte vide + le texte qui se peignait par-dessus
     "Formulaires/Nos Clubs/Documents" après la 1ère tentative de correction).
     Avec display:block partout, chaque élément prend simplement la hauteur
     de son propre contenu et pousse le suivant en dessous, sans ambiguïté
     ni divergence entre navigateurs. */
  ul.mod-menu.metismenu.mod-list {
    display: block !important;
    width: 100% !important;
    max-width: 100vw;
    overflow-x: hidden;
    box-sizing: border-box;
  }
  ul.mod-menu.metismenu .metismenu-item {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box;
    position: relative;
  }
  ul.mod-menu.metismenu .metismenu-item.level-1 > a,
  ul.mod-menu.metismenu .metismenu-item.level-1 > button {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box;
    text-align: left !important;
    padding: 14px 20px !important;
    border-bottom: 1px solid var(--afpl-bg-light) !important;
  }
  /* Les sous-menus ne flottent plus par-dessus le contenu : ils
     s'insèrent dans le flux, sous leur item parent, pleine largeur,
     repliés par défaut (max-height:0 + overflow:hidden), et ouverts dès
     que le bouton associé passe à aria-expanded="true" (posé par le JS
     déjà présent au clic — on ne réinvente rien, on réagit juste à cet
     état existant). */
  ul.mod-menu.metismenu ul.mm-collapse {
    /* display:none/block plutôt qu'un jeu de hauteurs : c'est la seule
       méthode qui garantisse qu'un sous-menu fermé ne réserve NI
       n'affiche AUCUN espace, de façon identique sur tous les
       navigateurs (les tailles animées via max-height/height entraient
       en conflit avec le script JS de MetisMenu et créaient soit un
       grand vide, soit un chevauchement selon le navigateur). */
    display: none !important;
    position: static !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box;
    box-shadow: none !important;
    border: none !important;
    border-radius: 0 !important;
    transform: none !important;
    overflow: visible !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
  ul.mod-menu.metismenu button[aria-expanded="true"] + ul.mm-collapse {
    display: block !important;
  }
  ul.mod-menu.metismenu ul.mm-collapse .metismenu-item > a,
  ul.mod-menu.metismenu ul.mm-collapse .metismenu-item > button {
    display: block !important;
    text-align: left !important;
    width: 100% !important;
    box-sizing: border-box;
    padding: 12px 20px 12px 36px !important;
  }
  ul.mod-menu.metismenu ul.mm-collapse ul.mm-collapse .metismenu-item > a,
  ul.mod-menu.metismenu ul.mm-collapse ul.mm-collapse .metismenu-item > button {
    padding-left: 52px !important;
  }
  /* Le "+" (règle globale plus haut dans le fichier) utilise
     margin-left:auto, qui ne fonctionne que dans un parent flex ; les
     boutons étant repassés en display:block ci-dessus, on le fait flotter
     à droite à la place pour qu'il reste bien aligné en bout de ligne. */
  ul.mod-menu.metismenu ul.mm-collapse .metismenu-item.parent > button.mm-toggler-nolink::after {
    float: right;
    margin-left: 0;
  }
}

/* ============================================================================
   SECTIONS CLAIRES — "Bienvenue" / "Informations - Flash" / "Informations
   expositions" : fond uni, sans encadrement, comme sur la capture cible.
   Classe CSS du module → afpl-section-light  (gris clair, #f1f3f2)
   Classe CSS du module → afpl-flash          (bleu très clair, #d9edf7)
   ============================================================================ */
/* Technique "full-bleed centré" : le fond occupe 100% de la largeur de
   l'écran (width:100vw + marges négatives), quel que soit le niveau
   d'imbrication Bootstrap ; le CONTENU, lui, reste centré et limité à une
   largeur de lecture confortable grâce à un padding calculé (calc). C'est
   la même règle qui gère fond ET centrage, donc pas de conflit possible. */
.afpl-section-light,
.afpl-flash {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  box-sizing: border-box;
  text-align: center;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding-top: 30px;
  padding-bottom: 30px;
  padding-left: max(20px, calc((100vw - 1140px) / 2));
  padding-right: max(20px, calc((100vw - 1140px) / 2));
}

.afpl-section-light { background: var(--afpl-bg-light); }
.afpl-flash { background: #d9edf7; }

/* "Bienvenue" (container-top-a) ET "Informations expositions"
   (container-bottom-b) réutilisent toutes les deux afpl-section-light,
   mais aucune des deux ne doit garder le fond gris. */
.container-top-a.afpl-section-light,
.container-top-a .afpl-section-light,
.container-bottom-b.afpl-section-light,
.container-bottom-b .afpl-section-light {
  background: transparent !important;
}
/* Le titre "Informations expositions" (.card-header Bootstrap) a lui
   aussi un fond gris/blanc par défaut à neutraliser, comme les autres
   titres de module. */
.container-bottom-b .card-header {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
/* Rythme vertical irrégulier dans #mod-custom186 : le contenu d'origine
   ne met pas le même nombre de <br> entre chaque ligne (1 entre la 1ère
   et la 2e, 2 à la suite entre la 2e et la 3e, et 2 encore mais répartis
   dans deux éléments différents entre la 3e et la 4e) — d'où des écarts
   visuellement différents. On ramène chaque transition à un seul <br>. */
#mod-custom186 p br + br {
  display: none; /* les 2 <br> à la suite entre "Toute explication" et
                     "Plus de précision" : n'en garder qu'un */
}
#mod-custom186 p a[href*="jugement-tica"] br {
  display: none; /* le <br> à l'intérieur du lien "Déroulement des
                     jugemsnts TICA" ; l'autre <br> juste après (dans le
                     span suivant) suffit à créer la ligne */
}
#mod-custom186 p {
  line-height: 1.8;
}
#mod-custom186 p img {
  vertical-align: middle;
}

/* Tableau "Plans et Tarifs" (#mod-custom157) : certains liens "Y accéder"
   ont la classe .readmore (bouton encadré) et d'autres non (lien bleu
   souligné brut) dans le contenu d'origine — d'où l'incohérence visuelle.
   On uniformise TOUS les liens de la 1ère colonne (celle des "Y accéder")
   avec le même style bouton, peu importe leur classe. */
/* Le tableau a border="1" en HTML (quadrillage voulu à l'origine), mais
   le reset global des tableaux de contenu (plus bas dans ce fichier)
   supprime les bordures des <td> ; on les restaure ici spécifiquement. */
#mod-custom157 table[border="1"] {
  border-collapse: collapse !important;
}
#mod-custom157 table[border="1"] td {
  border: 1px solid #ccc !important;
}
#mod-custom157 table td:first-child {
  white-space: nowrap;
  width: 1%;
}
#mod-custom157 table td:first-child a {
  display: inline-block;
  padding: 4px 10px;
  border: 1px solid var(--afpl-blue);
  border-radius: 0;
  color: var(--afpl-blue);
  text-decoration: none !important;
  font-weight: 400;
  white-space: nowrap;
  transition: all .2s ease-in;
}
#mod-custom157 table td:first-child a:hover {
  background: var(--afpl-blue);
  color: #fff;
}

/* Trait de séparation entre "Afin de pouvoir bénéficier..." et
   "Les Assemblées Générales..." dans le tableau Informations - Flash :
   ce sont 2 lignes du même tableau, on sépare via une bordure sur la 2e. */
#mod-custom180 table tr:nth-child(2) > td:first-child {
  border-top: 2px solid var(--afpl-blue) !important;
  padding-top: 15px !important;
}

/* ============================================================================
   ZONE "EXPOSITIONS" (position bottom-a) — grille 2 colonnes + fond bleu
   ============================================================================ */
.container-bottom-a {
  /* même technique : fond 100vw, contenu (la grille) centré via padding */
  width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  box-sizing: border-box;
  background: var(--afpl-blue) !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding-top: 50px;
  padding-bottom: 50px;
  padding-left: max(20px, calc((100vw - 1140px) / 2));
  padding-right: max(20px, calc((100vw - 1140px) / 2));
  display: grid !important;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  justify-items: center;
}
/* Si Cassiopeia imbrique un .container/.row/.grid-child Bootstrap à
   l'intérieur de la position, on le neutralise pour que ce soit bien
   .container-bottom-a qui pilote seul la grille (sinon les colonnes
   restent alignées à gauche). */
.container-bottom-a > .container,
.container-bottom-a > .row,
.container-bottom-a > .grid-child {
  display: contents;
}

/* Ordre d'affichage voulu (Joomla ne permet pas de réordonner les
   positions de module directement, donc on le fait en CSS) : la grille
   ci-dessus est en 2 colonnes, remplissage automatique ligne par ligne,
   donc "order:1" et "order:2" forment la 1ère ligne (gauche/droite),
   "order:3" et "order:4" la 2e ligne — exactement comme "order" en
   flexbox, que "display:grid" respecte aussi. Chaque bloc est identifié
   sans ambiguïté par l'id du module "mod-custom..." qu'il contient
   (:has()), plutôt que par sa position dans le HTML, qui peut changer :
     181 "Nos Futures Expositions"            -> haut gauche (la future expo)
     183 "Nos Expositions Passées"            -> haut droite
     184 "Future expo après la prochaine"     -> bas gauche
     185 "Résultats de l'avant dernière expo" -> bas droite
   Si un jour vous changez quel module va à quelle place, il suffit de
   changer les numéros ci-dessous — pas besoin de toucher au HTML. */
.container-bottom-a .afpl-expo:has(#mod-custom181) { order: 1; }
.container-bottom-a .afpl-expo:has(#mod-custom183) { order: 2; }
.container-bottom-a .afpl-expo:has(#mod-custom184) { order: 3; }
.container-bottom-a .afpl-expo:has(#mod-custom185) { order: 4; }

.afpl-expo {
  background: transparent;
  border: none;
  padding: 10px;
  color: #fff;
  text-align: center;
  width: 100%;
}
.afpl-expo h3, .afpl-expo .mod-title { color: #fff; text-align: center; }
.afpl-expo p { text-align: center; }
.afpl-expo img { max-width: 100%; height: auto; }
/* Les affiches ont un style inline "float:left" dans le contenu d'origine.
   On le CONSERVE ici (contrairement à une version précédente de ce
   fichier, qui le neutralisait en display:block + margin:auto) : c'est ce
   float qui produit la disposition de la maquette cible — l'affiche
   reste à gauche, le titre et le lieu (les h3 suivants) remontent à côté
   d'elle sur sa hauteur au lieu de s'empiler dessous, puis le reste du
   bloc (dates, boutons, résultats) repasse sous l'affiche, pleine largeur
   et centré, dès que le texte a dépassé la hauteur de l'image. On ajoute
   juste un peu de marge pour que le texte ne colle pas à l'image, et que
   le bas de l'affiche ne touche pas le texte qui suit. Les icônes de
   cocarde (1er/2e/3e prix) n'ont pas ce style inline, donc cette règle ne
   les concerne pas : elles restent côte à côte comme à l'origine. */
.afpl-expo img[style*="float"] {
  margin: 0 15px 10px 0 !important;
}
.afpl-expo a, .afpl-expo .readmore { color: #fff; border-color: #fff; }
.afpl-expo a:hover, .afpl-expo .readmore:hover { color: var(--afpl-blue); background: #fff; }

/* Titre "Nos Expositions Passées" (Bootstrap .card-header) : même style
   que les autres titres de module, sans son fond/bordure blanche par
   défaut, en blanc pour rester lisible sur le bleu. */
.container-bottom-a .card-header {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: #fff;
  font-family: var(--afpl-font-heading);
  font-size: 20px;
  font-weight: 400;
  text-transform: uppercase;
  text-align: left;
  padding: 0 0 15px;
  margin: 0;
}

@media (max-width: 767px) {
  .container-bottom-a { grid-template-columns: 1fr; }
}

/* ============================================================================
   FORMULAIRES — tous les formulaires du site sont du contenu brut (tableau
   + <input>/<select>/<textarea>) collé dans l'article. On leur donne un
   minimum de style (espacement, bordures, focus) au lieu du rendu "brut"
   par défaut du navigateur, sans rien casser dans le JS/inline existant.
   ============================================================================ */
.com-content-article__body table {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  max-width: 750px;
}
/* Tableaux JCE avec border="1" dans le HTML d'origine (ex: articles
   "ANIMAL EXPO", grilles de tarifs, tableaux de juges...) : Cassiopeia
   applique le reset Bootstrap qui met "border: 0" sur toutes les cellules
   de tous les tableaux, ce qui rend invisible le quadrillage que
   l'éditeur JCE avait pourtant bien écrit via l'attribut HTML border="1".
   On restaure ce quadrillage, mais UNIQUEMENT sur les tableaux qui ont
   explicitement border="1" (pas ceux en border="0", volontairement sans
   grille, comme le tableau "Choix du mode de paiement" plus bas). */
.com-content-article__body table[border="1"] {
  border-collapse: collapse !important;
  max-width: none; /* un tableau border="1" a presque toujours une largeur fixe voulue en HTML (ex: 1000px) ; on ne la limite pas artificiellement à 750px comme les tableaux de formulaire */
}
.com-content-article__body table[border="1"] td,
.com-content-article__body table[border="1"] th {
  border: 1px solid #999 !important;
  padding: 6px 8px;
}
.com-content-article__body table td {
  padding: 10px 8px;
  vertical-align: middle;
  font-family: var(--afpl-font-body);
  color: var(--afpl-text);
  font-size: 14px;
}
.com-content-article__body input[type="text"],
.com-content-article__body input[type="email"],
.com-content-article__body input[type="tel"],
.com-content-article__body input[type="number"],
.com-content-article__body textarea,
.com-content-article__body select {
  padding: 8px 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-family: var(--afpl-font-body);
  font-size: 14px;
  color: var(--afpl-text);
  background: #fff;
  box-sizing: border-box;
  transition: border-color .2s ease-in, box-shadow .2s ease-in;
}
.com-content-article__body input[type="text"]:focus,
.com-content-article__body input[type="email"]:focus,
.com-content-article__body textarea:focus,
.com-content-article__body select:focus {
  border-color: var(--afpl-blue);
  outline: none;
  box-shadow: 0 0 0 2px rgba(101, 142, 202, .2);
}
.com-content-article__body input[type="radio"],
.com-content-article__body input[type="checkbox"] {
  margin-right: 6px;
  vertical-align: middle;
}
.com-content-article__body h1.title,
.com-content-article__body .titre_formulaire {
  font-family: var(--afpl-font-heading);
  font-weight: 400;
  color: var(--afpl-text);
  margin: 10px 0 25px;
}
.com-content-article__body .button-more.readmore {
  cursor: pointer;
}

/* VRAIE CAUSE (confirmée via l'inspecteur) : la grille CSS de Cassiopeia
   (.site-grid) réserve TOUJOURS des colonnes latérales ("side-l"/"side-r")
   dans son grid-template-columns, même quand aucun module n'y est publié
   — ces colonnes vides restent réservées et rétrécissent d'autant
   ".container-component". Ce n'était donc pas un souci d'iframe : elle
   remplissait déjà correctement son wrapper, c'est le wrapper lui-même
   qui était trop étroit. On force ".container-component" à s'étendre sur
   TOUTES les colonnes de la grille (grid-column: 1/-1), pour qu'il prenne
   toute la largeur dès qu'il n'y a pas de barre latérale. */
.container-component {
  grid-column: 1 / -1 !important;
}

/* Le <iframe> lui-même (composant "com-wrapper", page externe
   forms.assoafpl.fr) : garde 100% de large + un ascenseur horizontal de
   secours si la page externe a une mise en page fixe non responsive
   (on ne peut pas re-styliser son contenu, autre domaine). */
.com-wrapper.contentpane {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.com-wrapper__iframe {
  display: block;
  width: 100% !important;
  border: none;
}
/* Filet de sécurité : le formulaire est hébergé sur un AUTRE domaine
   (forms.assoafpl.fr) que le site (assoafpl.fr) — le navigateur bloque
   par sécurité toute lecture JS de la hauteur réelle de son contenu
   (cross-origin), donc l'option Joomla "Hauteur automatique" ne peut pas
   fonctionner ici, quoi qu'on active côté admin. On force donc une
   hauteur minimale confortable en CSS avec !important, pour qu'elle
   prenne le dessus même si Joomla pose sa propre hauteur/attribut JS sur
   l'iframe (qui échouera silencieusement à cause du cross-origin). */
.com-wrapper__iframe {
  min-height: 2200px !important;
}

/* ============================================================================
   FORMULAIRE "Demande de diplôme de titre" — mise en forme dédiée pour
   ressembler à la maquette (blocs encadrés "Nom du Demandeur"/"Nom du
   chat"/etc., tableau des certificats avec quadrillage, tout centré).
   Scopé sur l'action du formulaire pour ne toucher QUE cette page.
   ============================================================================ */
form[action*="demande-de-diplome-de-titre"] {
  max-width: 900px;
  margin: 0 auto;
}
form[action*="demande-de-diplome-de-titre"] h1.titre_formulaire {
  font-size: 30px;
  font-weight: 700;
  color: var(--afpl-text);
  margin: 0 0 15px;
}
form[action*="demande-de-diplome-de-titre"] h1 {
  font-size: 22px;
  font-weight: 700;
}
/* Les 3 premiers tableaux ("Nom du Demandeur", "Nom du chat", "Diplôme
   demandé") : bloc encadré, fond blanc, coins légèrement arrondis. */
form[action*="demande-de-diplome-de-titre"] > table {
  border: 1px solid #ccc !important;
  border-radius: 4px;
  background: #fff;
  padding: 15px 20px !important;
  margin: 0 auto 20px;
  box-sizing: border-box;
}
form[action*="demande-de-diplome-de-titre"] > table td {
  padding: 6px 8px;
  text-align: left;
}
form[action*="demande-de-diplome-de-titre"] > table td strong {
  font-size: 15px;
}
/* Tableau "Liste des fac-similés" (border="1" en HTML) : vrai quadrillage
   avec bordures fusionnées, en-têtes centrés et légèrement mis en valeur. */
form[action*="demande-de-diplome-de-titre"] table[border="1"] {
  border-collapse: collapse !important;
  border: 1px solid #999 !important;
  margin: 20px auto;
}
form[action*="demande-de-diplome-de-titre"] table[border="1"] td {
  border: 1px solid #999 !important;
  padding: 8px 10px;
}
form[action*="demande-de-diplome-de-titre"] table[border="1"] tr:first-child td {
  font-weight: 700;
  background: var(--afpl-bg-light);
}
/* Bloc "Choix du mode de paiement" : même style encadré que les blocs du
   haut, centré. */
form[action*="demande-de-diplome-de-titre"] table[border="0"] {
  border: 1px solid #ccc !important;
  border-radius: 4px;
  background: #fff;
  padding: 15px 20px !important;
  margin: 15px auto;
}
form[action*="demande-de-diplome-de-titre"] table[border="0"] td {
  text-align: left;
  padding: 4px 0;
}
form[action*="demande-de-diplome-de-titre"] .button.readmore {
  display: inline-block;
  margin-top: 10px;
}

/* "Détails" + icône calendrier au-dessus des articles/formulaires :
   superflu, on ne garde que la date "Mis à jour". */
.article-info-term,
.article-info .icon-calendar {
  display: none;
}
.article-info {
  font-size: 13px;
  color: #888;
}

/* ============================================================================
   CONTENU DES ARTICLES (formulaires, pages "Nos Clubs", "Documents", etc.) —
   fond gris clair pleine largeur, SAUF sur la page d'accueil. On applique
   le fond sur ".site-grid" (l'enveloppe commune à TOUTES les pages),
   plutôt que sur ".container-component" seul, qui ne se comporte pas
   forcément pareil selon le type de page. Pour exclure la page d'accueil,
   on NE SE FIE PLUS à la classe "itemid-295" du <body> : elle est
   fragile et a changé lors d'une réorganisation du menu, ce qui a fait
   réapparaître le gris sur l'accueil. À la place, on détecte l'accueil
   par sa vraie particularité structurelle : c'est la SEULE page qui a un
   ".container-top-a" (bloc "Bienvenue") dans sa grille. */
.site-grid {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  box-sizing: border-box;
}
.site-grid:not(:has(.container-top-a)) {
  background: var(--afpl-bg-light);
}
.container-component {
  padding-top: 30px;
  padding-bottom: 30px;
  padding-left: max(20px, calc((100vw - 1140px) / 2));
  padding-right: max(20px, calc((100vw - 1140px) / 2));
  box-sizing: border-box;
}

/* ============================================================================
   FOOTER — fond gris clair, texte foncé, liens bleus (PAS de fond bleu)
   ============================================================================ */
.container-footer {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  box-sizing: border-box;
  background: var(--afpl-bg-light);
  color: var(--afpl-text);
  text-align: center;
  font-size: 13px;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding-top: 30px;
  padding-bottom: 30px;
  padding-left: max(20px, calc((100vw - 1140px) / 2));
  padding-right: max(20px, calc((100vw - 1140px) / 2));
}
.container-footer > .container,
.container-footer > .row,
.container-footer > .grid-child {
  display: contents;
}
/* Le contenu réel (#mod-custom116) doit rester centré dans la largeur de
   lecture, pas collé à gauche de la bande grise pleine largeur. */
.container-footer #mod-custom116,
.container-footer .mod-custom {
  width: 100%;
  max-width: 1140px;
  margin: 0 auto;
  text-align: center;
}
.container-footer p { text-align: center; margin: 0 0 10px; }
.container-footer a,
.container-footer a:visited {
  color: var(--afpl-blue) !important;
  text-decoration: underline !important;
}
.container-footer a:hover { color: var(--afpl-blue-dark) !important; }

/* ============================================================================
   PAGE D'ERREUR 404 PERSONNALISÉE
   ============================================================================ */
.custom-error-404 {
    text-align: center;
    padding: 40px 20px;
    font-family: inherit;
    color: #333;
}
.custom-error-404 .error-code {
    font-size: 100px;
    font-weight: bold;
    color: #2c3e50;
    line-height: 1;
    display: block;
    margin-bottom: 10px;
}
.custom-error-404 h2 {
    font-size: 24px;
    color: #2c3e50;
    margin-bottom: 15px;
}
.custom-error-404 p {
    font-size: 16px;
    color: #666;
    max-width: 600px;
    margin: 0 auto 20px auto;
}
.custom-error-404 .error-tips {
    list-style: none;
    padding: 0;
    margin: 0 auto 30px auto;
    max-width: 500px;
    text-align: left;
    background: #f8f9fa;
    padding: 15px 20px;
    border-radius: 5px;
    border-left: 4px solid #2c3e50;
}
.custom-error-404 .error-tips li {
    margin-bottom: 8px;
    font-size: 14px;
    color: #555;
}
.custom-error-404 .error-tips li:last-child {
    margin-bottom: 0;
}
.custom-error-404 .btn-home {
    display: inline-block;
    background-color: #2c3e50;
    color: #ffffff;
    padding: 12px 25px;
    border-radius: 4px;
    text-decoration: none;
    font-weight: bold;
    transition: background-color 0.2s ease;
}
.custom-error-404 .btn-home:hover {
    background-color: #1a252f;
    color: #ffffff;
}


/* Conteneur global du pied de page */
    .footer-afpl {
        background-color: transparent; /* Fond transparent pour fusionner avec le template */
        padding: 15px 0 20px 0; /* Ajustement des marges pour un rendu plus propre */
        text-align: center;
        font-size: 0.95em;
        width: 100%;
        color: #333; /* Couleur de texte neutre */
    }
    
    /* Espacement des paragraphes */
    .footer-afpl p {
        margin: 5px 0 10px 0;
        line-height: 1.6;
    }

    /* Style des liens classiques */
    .footer-afpl a {
        text-decoration: none;
        color: #0056b3; 
        transition: color 0.3s ease;
    }
    .footer-afpl a:hover {
        text-decoration: underline;
        color: #003d82;
    }

    /* Ligne de séparation et signature Deva2 bien en bas */
    .footer-credit {
        margin-top: 30px !important; /* Pousse la signature vers le bas */
        padding-top: 15px;
        border-top: 1px solid #dcdcdc; /* Ligne continue fine et discrète */
        font-size: 0.85em;
        color: #6c757d;
    }
    
    .footer-credit a.deva2-link {
        font-weight: bold;
        color: #555; 
    }
    .footer-credit a.deva2-link:hover {
        color: #e65100; /* Couleur au survol */
        text-decoration: none;
    }