/* ==========================================================================
   MADRASSAT-E - LE SITE PUBLIC (abdAllah, 09/10)
   --------------------------------------------------------------------------
   La mise en page vitrine : en-tête, héros, carrousel, sections, cartes,
   fiches et pied. Les couleurs et les composants restent ceux de l'ERP
   (bootstrap.css, backend.css) : cette feuille ne fait que les disposer.
   ========================================================================== */

.mc-site {
   --site-dominante: var(--dominante-color, #065d89);
   /* LA 2E COULEUR DES DÉGRADÉS (abdAllah, 10/10) : la dominante assombrie, recalculée pour chaque
      couleur du site (et non plus un bleu nuit fixe). */
   --site-fonce: color-mix(in srgb, var(--site-dominante) 55%, #000);
   --site-clair: var(--dc-30-w, #b4cedc);
   --site-fond: #f5f7fa;
   --site-rayon: 8px; /* LES BLOCS À OMBRE : coins de 8 px (abdAllah, 10/10). */
   margin-bottom: 0;
   background: var(--site-fond);
   min-height: 100vh;
   display: flex;
   flex-direction: column;
}

.mc-site-contenu {
   flex: 1 0 auto;
}

.mc-site-evitement {
   position: absolute;
   top: .5rem;
   left: .5rem;
   z-index: 2000;
   padding: .5rem 1rem;
   background: #fff;
   border-radius: 8px;
}

/* ── L'EN-TÊTE ──────────────────────────────────────────────────────────── */
.mc-site-entete {
   position: sticky;
   top: 0;
   z-index: 1030;
   background: rgba(255, 255, 255, .96);
   /* L'OMBRE SOUS LA BARRE (abdAllah, 10/10) : prononcée (l'ombre levée du site), sur toute la largeur. */
   box-shadow: rgba(0, 0, 0, .19) 0 10px 20px, rgba(0, 0, 0, .23) 0 6px 6px;
   backdrop-filter: blur(6px);
}

/* La barre de l'ERP (backend.css, `.navbar`) est foncée, collante et de hauteur fixe :
   celle du site est claire, et suit son contenu (menu replié sur mobile). */
.mc-site-entete .navbar {
   position: static;
   height: auto;
   background: transparent;
   box-shadow: none;
   padding: .6rem 0;
}

.mc-site-marque {
   flex-shrink: 0;
   display: inline-flex;
   align-items: center;
   gap: .6rem;
   font-weight: 700;
   font-size: 1.15rem;
   color: var(--site-dominante);
   text-decoration: none;
}

.mc-site-marque img {
   object-fit: contain;
   border-radius: 8px;
}

.mc-site-entete .nav-link {
   font-weight: 600;
   color: #3b4656;
   padding: .5rem .9rem !important;
   border-radius: 8px;
   /* LE TRAIT AU SURVOL (abdAllah, 10/10) : réservé (transparent) pour que le lien ne bouge pas. */
   border-bottom: 2px solid transparent;
   transition: border-color .25s ease, background-color .25s ease, color .25s ease;
}

.mc-site-entete .nav-link:hover,
.mc-site-entete .nav-link.active {
   color: var(--site-dominante);
   background: color-mix(in srgb, var(--site-dominante) 7%, transparent);
}

.mc-site-entete .nav-link:hover,
.mc-site-entete .nav-link:focus-visible {
   border-bottom-color: var(--site-dominante);
}

.mc-site-entete .navbar-toggler {
   border: 0;
   font-size: 1.6rem;
   color: var(--site-dominante);
}

/* LE MENU SUR UNE LIGNE (abdAllah, 10/10) : un libellé ne passe jamais à la ligne (« À propos ») ;
   les boutons du compte restent côte à côte ; entre 1200 et 1400 px, les liens se resserrent et un
   nom d'établissement long passe sur deux lignes ; en dessous de 1200 px, le menu se replie. */
.mc-site-entete .nav-link,
.mc-site-compte .btn {
   white-space: nowrap;
}

@media (min-width: 1200px) {
   .mc-site-entete .navbar-nav {
      align-items: center;
      gap: .3rem; /* UNE MARGE ENTRE LES LIENS (abdAllah, 10/10) : deux fonds voisins ne se touchent plus. */
   }

   .mc-site-compte {
      flex-wrap: nowrap !important;
   }
}

@media (min-width: 1200px) and (max-width: 1399.98px) {
   .mc-site-entete .nav-link {
      padding: .5rem .55rem !important;
   }

   .mc-site-marque {
      font-size: 1rem;
   }

   .mc-site-marque span {
      max-width: 210px;
      white-space: normal;
      line-height: 1.2;
   }
}

@media (max-width: 1199.98px) {
   .mc-site-entete .navbar-collapse {
      padding: .75rem 0 .25rem;
   }

   .mc-site-compte {
      margin-top: .5rem;
   }
}

/* ── LE HÉROS ───────────────────────────────────────────────────────────── */
.mc-site-heros {
   position: relative;
   color: #fff;
   background: linear-gradient(135deg, var(--site-dominante), var(--site-fonce));
   background-size: cover;
   background-position: center;
   /* La hauteur de l'écran (abdAllah, 10/10) : 50vh, comme le slider ; le texte centré dedans. */
   height: 50vh;
   min-height: 260px;
   display: flex;
   align-items: center;
   padding: 3rem 0;
   overflow: hidden;
}

.mc-site-heros::before {
   content: '';
   position: absolute;
   inset: 0;
   background: linear-gradient(90deg, rgba(0, 0, 0, .55), rgba(0, 0, 0, .15));
}

.mc-site-heros > .container {
   position: relative;
   width: 100%;
}

.mc-site-heros h1 {
   font-size: clamp(2rem, 4.5vw, 3.3rem);
   font-weight: 800;
   line-height: 1.15;
   max-width: 760px;
   color: #fff;
}

.mc-site-heros p {
   font-size: clamp(1rem, 1.6vw, 1.25rem);
   max-width: 640px;
   opacity: .95;
}

.mc-site-heros .btn {
   padding: .7rem 1.4rem;
   font-weight: 700;
}

.mc-site-heros .btn-light {
   color: var(--site-dominante);
}

/* ── LES SECTIONS ───────────────────────────────────────────────────────── */
.mc-site-section {
   padding: 4rem 0;
}

.mc-site-section-blanche {
   background: #fff;
}

.mc-site-section-titre {
   font-size: clamp(1.5rem, 2.6vw, 2.1rem);
   font-weight: 800;
   color: #1f2a37;
   margin-bottom: .5rem;
}

.mc-site-section-sous {
   color: #5b6675;
   margin-bottom: 2rem;
   max-width: 720px;
}

.mc-site-bandeau {
   background: linear-gradient(135deg, var(--site-dominante), var(--site-fonce));
   color: #fff;
   padding: 3rem 0 2.5rem;
   /* L'OMBRE PRONONCÉE (abdAllah, 10/10), comme la barre du haut ; au-dessus de la section qui suit. */
   position: relative;
   z-index: 1;
   box-shadow: rgba(0, 0, 0, .19) 0 10px 20px, rgba(0, 0, 0, .23) 0 6px 6px;
}

.mc-site-bandeau h1 {
   font-size: clamp(1.7rem, 3.5vw, 2.6rem);
   font-weight: 800;
   color: #fff;
   margin-bottom: .4rem;
}

.mc-site-bandeau p {
   opacity: .92;
   margin-bottom: 0;
}

.mc-site-fil {
   font-size: .85rem;
   margin-bottom: .75rem;
   opacity: .85;
}

.mc-site-fil a {
   color: #fff;
}

/* ── LES CARTES ─────────────────────────────────────────────────────────── */
.mc-site-carte {
   background: #fff;
   border: 1px solid rgba(0, 0, 0, .06);
   border-radius: var(--site-rayon);
   box-shadow: rgba(0, 0, 0, .16) 0 3px 6px, rgba(0, 0, 0, .23) 0 3px 6px;
   height: 100%;
   overflow: hidden;
   display: flex;
   flex-direction: column;
   transition: transform .2s ease, box-shadow .2s ease;
}

a.mc-site-carte {
   color: inherit;
   text-decoration: none;
}

a.mc-site-carte:hover {
   transform: translateY(-3px);
   box-shadow: rgba(0, 0, 0, .19) 0 10px 20px, rgba(0, 0, 0, .23) 0 6px 6px;
}

.mc-site-carte-corps {
   padding: 1.25rem 1.35rem;
   display: flex;
   flex-direction: column;
   gap: .45rem;
   flex: 1;
}

.mc-site-carte h3 {
   font-size: 1.15rem;
   font-weight: 700;
   color: #1f2a37;
   margin: 0;
}

.mc-site-carte-image {
   width: 100%;
   height: auto;
   aspect-ratio: 690 / 410;
   object-fit: cover;
   display: block;
}
/* L'IMAGE DU SLIDER D'UN ÉVÉNEMENT (abdAllah, 10/10) : une bannière, montrée entière à son format. */
.mc-site-carte-image.mc-site-carte-banniere { aspect-ratio: 1130 / 330; }
/* LE CADRE COMMUN DES CARTES D'ÉVÉNEMENT DE L'ACCUEIL (abdAllah, 10/10) : la même hauteur (2:1) pour
   une bannière comme pour un flyer ; l'image entière, sur un fond flouté d'elle-même. */
.mc-site-carte-cadre {
   position: relative;
   aspect-ratio: 2 / 1;
   overflow: hidden;
   background: var(--site-fonce);
}
.mc-site-carte-cadre::before {
   content: "";
   position: absolute;
   inset: -20px;
   background: var(--cadre-fond) center / cover no-repeat;
   filter: blur(14px) brightness(.85);
}
/* UNE OMBRE SOUS LA PHOTO (abdAllah, 11/10) : portée par le haut du corps de la carte, pour rester sous le
   reflet glossy de l'image. */
.mc-site-carte-cadre + .mc-site-carte-corps,
.mc-site-article-photo + .mc-site-carte-corps { box-shadow: inset 0 10px 10px -6px rgba(0, 0, 0, .5); }
/* La page d'un article sans photo (11/10) : le fond des cartes sans image, moins haut qu'une photo. */
.mc-site-article-sans-photo { aspect-ratio: auto; height: 220px; opacity: 1; padding: 1rem 1.5rem; text-align: center; }
.mc-site-article-sans-photo span { display: block; font-size: clamp(1.6rem, 4vw, 2.6rem); font-weight: 800; line-height: 1.15; letter-spacing: .01em; text-shadow: 0 2px 6px rgba(0, 0, 0, .3); }
/* Le sous-titre « Vous informe » sous le nom (11/10). */
.mc-site-article-sans-photo small { display: block; margin-top: .35rem; font-size: clamp(.95rem, 1.8vw, 1.2rem); font-weight: 400; letter-spacing: .04em; opacity: .9; text-shadow: 0 1px 4px rgba(0, 0, 0, .3); }
.mc-site-carte-cadre img {
   position: relative;
   display: block;
   width: 100%;
   height: 100%;
   object-fit: contain;
}

.mc-site-carte-pied {
   margin-top: auto;
   padding-top: .5rem;
   display: flex;
   justify-content: space-between;
   align-items: center;
   gap: .5rem;
   flex-wrap: wrap;
}
/* LE PIED DE CARTE SÉPARÉ (abdAllah, 10/10) : hors du corps, en bas, sur un fond léger. */
.mc-site-carte-pied.mc-site-carte-footer {
   padding: .65rem 1.35rem;
   background: color-mix(in srgb, var(--site-dominante) 5%, #fff);
   border-top: 1px solid color-mix(in srgb, var(--site-dominante) 14%, #fff);
}

.mc-site-infos {
   list-style: none;
   padding: 0;
   margin: 0;
   color: #4a5565;
   font-size: .92rem;
   display: grid;
   gap: .3rem;
}

.mc-site-infos i {
   color: var(--site-dominante);
   margin-right: .3rem;
}

.mc-site-pastille {
   display: inline-block;
   font-size: .75rem;
   font-weight: 700;
   padding: .2rem .6rem;
   border-radius: 999px;
}

/* LE PRIX (abdAllah, 10/10) : plus grand, moins gras. */
.mc-site-prix {
   font-weight: 600;
   color: var(--site-dominante);
   font-size: 1.55rem;
}

/* Les points forts de l'accueil. */
.mc-site-atout {
   text-align: center;
   padding: 1.75rem 1.25rem;
   /* La bordure à la couleur du site, et le survol des cartes-liens (abdAllah, 10/10). */
   border-color: var(--site-dominante);
   /* Une ombre plus marquée (abdAllah, 10/10). */
   box-shadow: rgba(0, 0, 0, .16) 0 3px 6px, rgba(0, 0, 0, .23) 0 3px 6px;
   transition: transform .2s ease, box-shadow .2s ease;
}

.mc-site-atout:hover {
   transform: translateY(-4px);
   box-shadow: rgba(0, 0, 0, .19) 0 10px 20px, rgba(0, 0, 0, .23) 0 6px 6px;
}

/* La bordure à la couleur du site (abdAllah, 10/10), comme dans Paramètres › Le Site WEB. */
.mc-site-carte.mc-site-atout {
   border-color: var(--site-dominante);
   /* UN FOND CLAIR (abdAllah, 11/10) : le dégradé radial des cartes d'articles - blanc au centre, une teinte
      claire de la couleur du site vers les bords. */
   background: radial-gradient(ellipse at 50% 50%, #fff 0%, color-mix(in srgb, var(--site-dominante) 6%, #fff) 40%, color-mix(in srgb, var(--site-dominante) 22%, #fff) 100%);
}

.mc-site-atout i {
   font-size: 2.4rem;
   color: var(--site-dominante);
   background: color-mix(in srgb, var(--site-dominante) 8%, transparent);
   width: 72px;
   height: 72px;
   border-radius: 50%;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   margin-bottom: .75rem;
}

/* ── LE CARROUSEL DES BANNIÈRES ─────────────────────────────────────────── */
.mc-site-carrousel {
   border-radius: var(--site-rayon);
   overflow: hidden;
   box-shadow: rgba(0, 0, 0, .16) 0 3px 6px, rgba(0, 0, 0, .23) 0 3px 6px;
}

.mc-site-carrousel .carousel-item img {
   width: 100%;
   height: auto;
   aspect-ratio: 1130 / 330;
   object-fit: cover;
}

.mc-site-carrousel .carousel-caption {
   left: 0;
   right: 0;
   bottom: 0;
   padding: 1rem 1.5rem;
   text-align: left;
   background: linear-gradient(0deg, rgba(0, 0, 0, .6), rgba(0, 0, 0, 0));
}

.mc-site-carrousel .carousel-caption a {
   color: #fff;
   font-weight: 700;
}

@media (max-width: 575.98px) {
   .mc-site-carrousel .carousel-caption {
      position: static;
      background: var(--site-dominante);
   }
}

/* ── LA PRÉSENTATION ET LES TEXTES ──────────────────────────────────────── */
.mc-site-texte {
   font-size: 1.02rem;
   line-height: 1.7;
   color: #333d4a;
}

.mc-site-texte img {
   max-width: 100%;
   height: auto;
   border-radius: 10px;
}

.mc-site-texte h2,
.mc-site-texte h3 {
   color: #1f2a37;
   font-weight: 700;
   margin-top: 1.5rem;
}

/* ── LA FICHE (formation, événement) ────────────────────────────────────── */
.mc-site-fiche-cote {
   position: sticky;
   top: 90px;
}

.mc-site-banniere {
   width: 100%;
   height: auto;
   aspect-ratio: 1130 / 330;
   object-fit: cover;
   border-radius: var(--site-rayon);
   box-shadow: rgba(0, 0, 0, .16) 0 3px 6px, rgba(0, 0, 0, .23) 0 3px 6px;
}

/* LA JAUGE DES PLACES, ZÉBRÉE (abdAllah, 10/10) : fiche formation et fiche événement. */
.mc-site-places {
   height: 10px;
   border-radius: 99px;
   background: #e7ecf1;
   overflow: hidden;
}

.mc-site-places > span {
   display: block;
   height: 100%;
   background-color: var(--site-dominante);
   background-image: linear-gradient(-45deg, rgba(255, 255, 255, .22) 25%, transparent 25%, transparent 50%,
                                     rgba(255, 255, 255, .22) 50%, rgba(255, 255, 255, .22) 75%, transparent 75%, transparent);
   background-size: 10px 10px;
}

/* ── LES FILTRES (onglets de filières, de sessions) ─────────────────────── */
.mc-site-filtres {
   display: flex;
   flex-wrap: wrap;
   gap: .5rem;
   margin-bottom: 1.75rem;
}

.mc-site-filtres .btn {
   border-radius: 999px;
}

/* ── LE CONTACT ─────────────────────────────────────────────────────────── */
.mc-site-piege {
   position: absolute !important;
   left: -10000px !important;
   width: 1px;
   height: 1px;
   overflow: hidden;
}

/* ── LE PIED ────────────────────────────────────────────────────────────── */
.mc-site-pied {
   /* La couleur du site, très assombrie (abdAllah, 10/10) - suit le réglage comme les dégradés. */
   background: color-mix(in srgb, var(--site-dominante) 22%, #0b0f14);
   color: #c9d3dd;
   padding: 3rem 0 1.25rem;
   font-size: .92rem;
   margin-top: auto;
}

/* LES LIENS DU PIED (abdAllah, 10/10) : une teinte claire de la couleur du site ; blancs au survol,
   jamais soulignés. */
.mc-site-pied a {
   color: color-mix(in srgb, var(--site-dominante) 25%, #fff);
   text-decoration: none;
   transition: color .15s ease;
}

.mc-site-pied a:hover,
.mc-site-pied a:focus-visible {
   color: #fff;
   text-decoration: none;
}

/* L'ANIMATION (abdAllah, 10/10) : au survol, un lien des listes glisse un peu vers la droite, précédé
   d'un petit trait qui se déploie. */
.mc-site-pied li a {
   position: relative;
   display: inline-block;
   transition: color .2s ease, transform .2s ease;
}

.mc-site-pied li a::before {
   content: '';
   position: absolute;
   left: -14px;
   top: 50%;
   width: 0;
   height: 2px;
   border-radius: 1px;
   background: #fff;
   transform: translateY(-50%);
   transition: width .2s ease;
}

.mc-site-pied li a:hover,
.mc-site-pied li a:focus-visible {
   transform: translateX(14px);
}

.mc-site-pied li a:hover::before,
.mc-site-pied li a:focus-visible::before {
   width: 9px;
}

.mc-site-pied .mc-site-marque {
   color: #fff;
}

.mc-site-pied-titre {
   font-size: 1rem;
   font-weight: 700;
   color: #fff;
   margin-bottom: .75rem;
}

.mc-site-pied i {
   color: var(--site-clair);
}

.mc-site-reseaux a {
   width: 40px;
   height: 40px;
   border-radius: 50%;
   background: rgba(255, 255, 255, .08);
   display: inline-flex;
   align-items: center;
   justify-content: center;
   font-size: 1.3rem;
}

.mc-site-reseaux a:hover {
   background: rgba(255, 255, 255, .18);
   text-decoration: none;
}

.mc-site-pied-bas {
   border-top: 1px solid rgba(255, 255, 255, .1);
   margin-top: 2rem;
   padding-top: 1rem;
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
   gap: .5rem;
   font-size: .82rem;
}

/* ── L'ÉTAT VIDE ────────────────────────────────────────────────────────── */
.mc-site-vide {
   text-align: center;
   padding: 3rem 1rem;
   color: #6b7685;
}

.mc-site-vide i {
   font-size: 3rem;
   color: var(--site-clair);
   display: block;
   margin-bottom: .5rem;
}

/* ── L'IMPRESSION ───────────────────────────────────────────────────────── */
@media print {
   .mc-site-entete,
   .mc-site-pied,
   .mc-site-carrousel {
      display: none !important;
   }
}

/* Le logo, souvent foncé, garde un fond clair sur le pied sombre. */
.mc-site-pied .mc-site-marque img {
   background: #fff;
   padding: 3px;
}

/* ── LE SLIDER DE L'ACCUEIL (abdAllah, 10/10) : 40 % de la hauteur de l'écran, la photo recadrée
   au centre, le texte en surimpression sur un voile sombre à gauche. ─────────────────────────── */
.mc-site-slider { position: relative; background: var(--site-fonce); }
.mc-site-slider .carousel-item { height: 50vh; min-height: 260px; }
.mc-site-slider .carousel-item img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* La photo porte déjà son texte (abdAllah, 10/10) : entière, sur la couleur du site, sans voile. */
.mc-site-slider .mc-site-slider-affiche { background: var(--site-dominante); }
.mc-site-slider .mc-site-slider-affiche img { object-fit: contain; }
.mc-site-slider-texte {
   position: absolute;
   inset: 0;
   display: flex;
   align-items: center;
   color: #fff;
   background: linear-gradient(90deg, rgba(0, 0, 0, .6), rgba(0, 0, 0, .15));
}
.mc-site-slider-titre {
   font-size: clamp(1.6rem, 4vw, 3rem);
   font-weight: 800;
   line-height: 1.15;
   max-width: 760px;
   color: #fff;
   margin-bottom: .4rem;
   text-shadow: 0 2px 6px rgba(0, 0, 0, .35);
}
.mc-site-slider-sous { font-size: clamp(1rem, 1.6vw, 1.25rem); font-weight: 600; max-width: 640px; margin-bottom: .4rem; }
.mc-site-slider-desc {
   max-width: 640px;
   margin-bottom: .25rem;
   opacity: .95;
   display: -webkit-box;
   -webkit-line-clamp: 3;
   -webkit-box-orient: vertical;
   overflow: hidden;
}
.mc-site-slider .btn-light { color: var(--site-dominante); font-weight: 700; }
.mc-site-slider .carousel-control-prev,
.mc-site-slider .carousel-control-next { width: 6%; }
/* .mc-site-slider-vide : la hauteur vient de .mc-site-heros (50vh). */

/* ── L'AGENDA DE L'ACCUEIL (abdAllah, 10/10) : une date en pastille, l'intitulé à côté. ────── */
.mc-site-agenda {
   display: flex;
   gap: .75rem;
   align-items: flex-start;
   height: 100%;
   padding: .75rem;
   background: #fff;
   border-radius: var(--site-rayon);
   box-shadow: rgba(0, 0, 0, .16) 0 3px 6px, rgba(0, 0, 0, .23) 0 3px 6px;
}
.mc-site-agenda-date {
   flex: 0 0 3.4rem;
   display: flex;
   flex-direction: column;
   align-items: center;
   padding: .35rem 0;
   border-radius: .6rem;
   color: #fff;
   background: linear-gradient(135deg, var(--site-dominante), var(--site-fonce));
   line-height: 1.05;
}
.mc-site-agenda-jour { font-size: 1.4rem; font-weight: 800; }
.mc-site-agenda-mois { font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; }
.mc-site-agenda-corps { min-width: 0; }
.mc-site-agenda-titre { font-weight: 700; color: #1f2a37; }
.mc-site-agenda-info { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* LES CARTES D'ARTICLE (abdAllah, 10/10) : le résumé sur trois lignes au plus. */
.mc-site-article-resume { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
/* Sans image : un bandeau à la couleur du site, pour que les cartes restent alignées. */
.mc-site-article-sans-image { aspect-ratio: 3 / 2; display: flex; align-items: center; justify-content: center; font-size: 3rem; color: #fff; background: linear-gradient(135deg, var(--site-dominante), var(--site-fonce)); opacity: .9; }

/* LES INFOS PRATIQUES EN TUILES (abdAllah, 10/10) : le look des touches de l'accueil du backend
   (.mc-tuile) - dégradé de la couleur du site, reflet en haut, arête sombre en bas, ombre portée.
   Plus larges que carrées : le détail (adresse, horaires…) se lit sous le libellé. Une tuile-lien
   se soulève au survol et s'enfonce au clic. */
/* CENTRÉES SUR LA LARGEUR (abdAllah, 11/10) : des tuiles de même largeur, la dernière ligne centrée elle
   aussi (la grille les étirait, ou laissait la dernière ligne à gauche). Deux par ligne sur téléphone. */
.mc-site-tuiles {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   gap: .75rem;
}
.mc-site-tuiles > .mc-site-tuile { flex: 0 1 190px; }
@media (max-width: 575.98px) { .mc-site-tuiles > .mc-site-tuile { flex-basis: calc(50% - .375rem); } }
.mc-site-tuile {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   gap: .3rem;
   min-height: 140px;
   padding: 1rem .75rem;
   border-radius: 8px;
   background: var(--site-dominante);
   background: linear-gradient(160deg,
      color-mix(in srgb, var(--site-dominante) 78%, #fff) 0%,
      var(--site-dominante) 55%,
      color-mix(in srgb, var(--site-dominante) 72%, #000) 100%);
   color: #fff;
   text-align: center;
   text-decoration: none;
   border-bottom: 4px solid color-mix(in srgb, var(--site-dominante) 55%, #000);
   box-shadow: rgba(0, 0, 0, .16) 0 3px 6px, rgba(0, 0, 0, .23) 0 3px 6px, inset rgba(255, 255, 255, .28) 0 1px 0;
   transition: transform .28s cubic-bezier(.34, 1.4, .64, 1), box-shadow .28s ease, border-bottom-width .28s ease, filter .2s ease;
}
.mc-site-tuile .ph-duotone { font-size: 2.1rem; line-height: 1; }
.mc-site-tuile-libelle { font-weight: 700; font-size: .95rem; line-height: 1.2; }
.mc-site-tuile-detail { font-size: .82rem; line-height: 1.35; opacity: .92; overflow-wrap: anywhere; }
a.mc-site-tuile:hover, a.mc-site-tuile:focus-visible { color: #fff; filter: brightness(1.08); transform: translateY(-3px); }
a.mc-site-tuile:active {
   transition-duration: .18s;
   transition-timing-function: cubic-bezier(.4, 0, .2, 1);
   transform: scale(.95) translateY(2px);
   border-bottom-width: 1px;
   box-shadow: rgba(0, 0, 0, .30) 0 1px 2px, inset rgba(0, 0, 0, .22) 0 2px 5px;
   filter: brightness(.95);
}

/* L'AGENDA DE L'ACCUEIL (abdAllah, 10/10) : les cartes de Planifications › Agenda (backend.css,
   .mc-agenda-carte), à la largeur de leur colonne. */
.mc-site-agenda-carte { width: 100%; height: 100%; background: #fff; border-radius: 8px; box-shadow: rgba(0, 0, 0, .16) 0 3px 6px, rgba(0, 0, 0, .23) 0 3px 6px; }

/* LA CARTE DE LA PAGE CONTACT (abdAllah, 10/10) : Google Maps intégré, à la largeur de la page. */
.mc-site-plan iframe { display: block; width: 100%; height: 380px; border: 0; }
@media (max-width: 575.98px) { .mc-site-plan iframe { height: 300px; } }

/* À PROPOS (abdAllah, 10/10) : l'icône sur un disque à la couleur du site, le titre dessous ; le texte
   sur une largeur de lecture. */
.mc-site-apropos-tete { display: flex; flex-direction: column; align-items: flex-start; gap: .75rem; }
.mc-site-apropos-icone { width: 72px; height: 72px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 2.3rem; color: var(--site-dominante); background: color-mix(in srgb, var(--site-dominante) 10%, transparent); }
.mc-site-apropos-texte { max-width: 760px; font-size: 1.05rem; line-height: 1.7; }
@media (min-width: 992px) { .mc-site-apropos-texte { padding-top: .5rem; } }

/* LE PASSAGE MOBILE (abdAllah, 10/10). Le slider : sous 576 px, les flèches chevauchaient le texte -
   on les retire (le doigt fait glisser les diapos, les tirets restent). Le pied : des liens plus
   espacés, faciles à toucher. */
@media (max-width: 575.98px) {
   .mc-site-slider .carousel-control-prev,
   .mc-site-slider .carousel-control-next { display: none; }
   .mc-site-pied li a { padding: .3rem 0; }
}

/* LES FORMATIONS (abdAllah, 10/10). Les filtres en listes, avec leur icône ; le titre de chaque
   filière en bande pleine largeur, coins de 5 px ; les cartes à l'ombre marquée, coins de 7 px. */
.mc-site-filtres-listes .input-group { width: auto; flex: 0 1 320px; min-width: 220px; }
.mc-site-filiere-bande { display: block; width: 100%; border-radius: 8px; padding: .6rem 1rem; margin-bottom: 0; font-size: 1.15rem !important; font-weight: 700; }
.mc-site-carte-formation { border-radius: 8px; box-shadow: rgba(0, 0, 0, .16) 0 3px 6px, rgba(0, 0, 0, .23) 0 3px 6px; }
a.mc-site-carte-formation:hover { box-shadow: rgba(0, 0, 0, .19) 0 10px 20px, rgba(0, 0, 0, .23) 0 6px 6px; }
/* LE FOND DES CARTES DE FORMATION (abdAllah, 11/10) : la teinte claire de la filière (16 %) au repos ;
   au survol, le dégradé grady-light de la charte (blanc vers gris clair), avec le reflet glossy et
   l'éclat qui traverse la carte (plus bas). */
.mc-site-carte-formation {
   background-color: color-mix(in srgb, var(--cf-couleur, var(--site-dominante)) 16%, #fff);
   transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
}
a.mc-site-carte-formation:hover { background: linear-gradient(#fff, #ddd); }

/* LES FORMATIONS FILTRÉES, ANIMÉES (abdAllah, 10/10) : un bloc qui part s'efface en glissant ; les
   cartes restantes glissent jusqu'à leur nouvelle place, les autres arrivent en fondu. Rien pour qui demande moins d'animations. */
.mc-site-filtres-listes .form-select { font-weight: 600; transition: background-color .2s ease, color .2s ease; }
[data-fo-bloc].mc-fo-sortie { opacity: 0; transform: translateY(-8px); transition: opacity .2s ease, transform .2s ease; }
/* Le déplacement des cartes vers leur nouvelle place est joué par le script de la page (FLIP). */

/* L'EFFET GLOSSY DES BANDES DE FILIÈRE (abdAllah, 10/10) : un reflet sur la moitié haute, une arête
   sombre en bas ; au survol, un éclat de lumière traverse la bande. La couleur reste celle de la
   filière (fond posé par la page). */
.mc-site-filiere-bande {
   position: relative;
   overflow: hidden;
   background-image: linear-gradient(180deg, rgba(255, 255, 255, .38) 0%, rgba(255, 255, 255, .12) 50%, rgba(0, 0, 0, 0) 51%, rgba(0, 0, 0, .12) 100%);
   box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), inset 0 -2px 0 rgba(0, 0, 0, .18), rgba(0, 0, 0, .16) 0 3px 6px, rgba(0, 0, 0, .23) 0 3px 6px;
   text-shadow: 0 1px 1px rgba(0, 0, 0, .18);
   transition: filter .2s ease;
}

.mc-site-filiere-bande::after {
   content: '';
   position: absolute;
   top: 0;
   bottom: 0;
   left: -40%;
   width: 30%;
   background: linear-gradient(100deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .55) 50%, rgba(255, 255, 255, 0) 100%);
   transform: skewX(-20deg);
   pointer-events: none;
   opacity: 0;
}

.mc-site-filiere-bande:hover {
   filter: brightness(1.06);
}

.mc-site-filiere-bande:hover::after {
   animation: mc-site-eclat .8s ease-out;
}

@keyframes mc-site-eclat {
   0%   { left: -40%; opacity: 1; }
   100% { left: 120%; opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
   .mc-site-filiere-bande:hover::after { animation: none; }
}

/* L'EFFET GLOSSY DES CARTES DE FORMATION AU SURVOL (abdAllah, 10/10) : en plus de la teinte claire de
   la filière, un reflet sur la moitié haute et un éclat qui traverse la carte. */
.mc-site-carte-formation { position: relative; }

.mc-site-carte-formation::before,
.mc-site-carte-formation::after {
   content: '';
   position: absolute;
   pointer-events: none;
   opacity: 0;
   transition: opacity .25s ease;
}

.mc-site-carte-formation::before {
   inset: 0;
   background: linear-gradient(180deg, rgba(255, 255, 255, .55) 0%, rgba(255, 255, 255, .12) 45%, rgba(255, 255, 255, 0) 46%, rgba(0, 0, 0, .03) 100%);
}

.mc-site-carte-formation::after {
   top: 0;
   bottom: 0;
   left: -45%;
   width: 35%;
   background: linear-gradient(100deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .8) 50%, rgba(255, 255, 255, 0) 100%);
   transform: skewX(-20deg);
}

a.mc-site-carte-formation:hover::before,
a.mc-site-carte-formation:focus-visible::before { opacity: 1; }

a.mc-site-carte-formation:hover::after {
   opacity: 1;
   animation: mc-site-eclat-carte .9s ease-out;
}

@keyframes mc-site-eclat-carte {
   from { left: -45%; }
   to   { left: 130%; }
}

/* Le contenu reste au-dessus du reflet. */
.mc-site-carte-formation > .mc-site-carte-corps { position: relative; z-index: 1; }

@media (prefers-reduced-motion: reduce) {
   a.mc-site-carte-formation:hover::after { animation: none; opacity: 0; }
}

/* LES CARTES DE LA PAGE ÉVÉNEMENTS AU SURVOL (abdAllah, 11/10) : à la place du glossy, la photo s'agrandit
   doucement dans son cadre, pendant que la carte se soulève. Rien pour qui demande moins d'animations. */
.mc-site-carte-zoom .mc-site-carte-cadre img { transition: transform .6s ease; }
a.mc-site-carte-zoom:hover .mc-site-carte-cadre img,
a.mc-site-carte-zoom:focus-visible .mc-site-carte-cadre img { transform: scale(1.12); }
/* Les cartes d'article (11/10) : la même photo qui s'agrandit, dans son propre cadre. */
.mc-site-carte-image-cadre { overflow: hidden; }
.mc-site-carte-zoom .mc-site-carte-image-cadre > .mc-site-carte-image { transition: transform .6s ease; }
.mc-site-carte-image-cadre > img.mc-site-carte-image { display: block; width: 100%; }
a.mc-site-carte-zoom:hover .mc-site-carte-image-cadre > .mc-site-carte-image,
a.mc-site-carte-zoom:focus-visible .mc-site-carte-image-cadre > .mc-site-carte-image { transform: scale(1.12); }
/* Et le fond de la carte prend un dégradé RADIAL (11/10) : blanc au centre du texte, une teinte claire de la
   couleur du site vers les bords. */
.mc-site-carte-zoom { transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease; }
a.mc-site-carte-zoom:hover,
a.mc-site-carte-zoom:focus-visible { background: radial-gradient(ellipse at 50% 62%, #fff 0%, color-mix(in srgb, var(--site-dominante) 6%, #fff) 40%, color-mix(in srgb, var(--site-dominante) 22%, #fff) 100%); }
@media (prefers-reduced-motion: reduce) {
   a.mc-site-carte-zoom:hover .mc-site-carte-cadre img { transform: none; }
   a.mc-site-carte-zoom:hover .mc-site-carte-image-cadre > .mc-site-carte-image { transform: none; }
}

/* LA LISTE DES FILIÈRES (abdAllah, 10/10) : le nombre de classes à droite, en simple texte (pas de pastille). */
.mc-site-filtres-listes .mc-combo-option-sous-texte,
.mc-site-filtres-listes .mc-combo-option[aria-selected="true"] .mc-combo-option-sous-texte {
   background: none;
   color: inherit;
   padding: 0;
   border-radius: 0;
   margin-left: auto;
   padding-left: .75rem;
   font-size: .85rem;
   font-weight: 400;
   opacity: .85;
   white-space: nowrap;
}

/* LE NOM DE LA CLASSE (abdAllah, 10/10) : à la couleur de sa filière, un peu assombrie pour rester
   lisible sur le blanc de la carte, même pour une filière claire (jaune, rose pâle…). */
.mc-site-carte-formation-titre { color: color-mix(in srgb, var(--cf-couleur, var(--site-dominante)) 62%, #000) !important; }

/* LA FICHE D'UNE FORMATION (abdAllah, 10/10) : des cartes à en-tête (icône et titre), coins de 5 px,
   ombre marquée. */
.mc-site-fiche-carte { border-radius: 8px; box-shadow: rgba(0, 0, 0, .16) 0 3px 6px, rgba(0, 0, 0, .23) 0 3px 6px; }
.mc-site-fiche-entete {
   display: flex;
   align-items: center;
   gap: .5rem;
   margin: 0;
   padding: .7rem 1.35rem;
   font-size: 1.05rem;
   font-weight: 700;
   color: var(--site-dominante);
   background: color-mix(in srgb, var(--site-dominante) 7%, #fff);
   border-bottom: 1px solid color-mix(in srgb, var(--site-dominante) 15%, #fff);
}
/* L'ICÔNE À DROITE (abdAllah, 10/10). */
.mc-site-fiche-entete .ph-duotone {
   margin-left: auto;
   font-size: 1.5rem;
}

/* LES ENTRÉES DE LA FICHE FORMATION (abdAllah, 10/10) : les blocs de gauche glissent depuis la gauche,
   le bloc Informations depuis la droite ; lentes et fluides (longue décélération), décalées par
   animation-delay (en ligne). */
.mc-site-entree-gauche,
.mc-site-entree-droite {
   animation: 1.6s cubic-bezier(.22, 1, .36, 1) both;
   will-change: transform, opacity;
}
.mc-site-entree-gauche { animation-name: mc-entree-gauche; }
.mc-site-entree-droite { animation-name: mc-entree-droite; }
@keyframes mc-entree-gauche { from { opacity: 0; transform: translateX(-56px); } to { opacity: 1; transform: none; } }
@keyframes mc-entree-droite { from { opacity: 0; transform: translateX(56px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
   .mc-site-entree-droite, .mc-site-entree-gauche { animation: none; }
}

/* ── LES ENTRÉES AU DÉFILEMENT (abdAllah, 10/10) - mc-site-revele.js ───────────────────────────────
   En attente : invisible. À l'écran : une entrée lente et fluide, puis la classe s'en va (le survol
   reprend la main). « mc-revele-pret » cache dès le <head>, avant que le script ne prenne le relais. */
.mc-revele-pret [data-revele],
.mc-revele-pret [data-revele-enfants] > *,
.mc-revele-attente { opacity: 0; }
.mc-revele-gauche, .mc-revele-droite, .mc-revele-bas, .mc-revele-haut, .mc-revele-zoom, .mc-revele-bascule {
   /* LENTES ET FLUIDES (abdAllah, 10/10) : 1,6 s, une décélération douce, des distances courtes. */
   animation: 1.6s cubic-bezier(.22, 1, .36, 1) both;
}
.mc-revele-gauche  { animation-name: mc-revele-gauche; }
.mc-revele-droite  { animation-name: mc-revele-droite; }
.mc-revele-bas     { animation-name: mc-revele-bas; }
.mc-revele-haut    { animation-name: mc-revele-haut; }
.mc-revele-zoom    { animation-name: mc-revele-zoom; }
.mc-revele-bascule { animation-name: mc-revele-bascule; transform-origin: 50% 100%; }
@keyframes mc-revele-gauche  { from { opacity: 0; transform: translateX(-48px); } to { opacity: 1; transform: none; } }
@keyframes mc-revele-droite  { from { opacity: 0; transform: translateX(48px); } to { opacity: 1; transform: none; } }
@keyframes mc-revele-bas     { from { opacity: 0; transform: translateY(36px); } to { opacity: 1; transform: none; } }
@keyframes mc-revele-haut    { from { opacity: 0; transform: translateY(-30px); } to { opacity: 1; transform: none; } }
@keyframes mc-revele-zoom    { from { opacity: 0; transform: translateY(24px) scale(.9); } to { opacity: 1; transform: none; } }
@keyframes mc-revele-bascule { from { opacity: 0; transform: perspective(900px) rotateX(14deg) translateY(30px); } to { opacity: 1; transform: none; } }
/* À l'impression, tout est visible, même ce qui n'a pas encore défilé. */
@media print {
   .mc-revele-pret [data-revele], .mc-revele-pret [data-revele-enfants] > *, .mc-revele-attente { opacity: 1 !important; }
}
/* Une entrée latérale ne fait pas défiler la page en largeur (clip garde « sticky » actif). */
body.mc-site { overflow-x: clip; }

/* UNE SEULE OMBRE ET DES COINS DE 8 PX POUR LES BLOCS DU SITE (abdAllah, 10/10) :
   rgba(0, 0, 0, .16) 0 3px 6px, rgba(0, 0, 0, .23) 0 3px 6px - et au survol, l'ombre levée
   rgba(0, 0, 0, .19) 0 10px 20px, rgba(0, 0, 0, .23) 0 6px 6px. Posées règle par règle ci-dessus. */

/* LES DÉCOMPTES DES CARTES D'ÉVÉNEMENT (abdAllah, 11/10) - page Événements, comme la liste du personnel
   (evDecomptes()) : à gauche la clôture des inscriptions (jaune, puis rouge une fois clôturées), à
   droite l'événement (dégradé de la couleur du site, vert pendant qu'il se déroule). */
.mc-site .mc-ev-decomptes { display: flex; gap: .5rem; margin-top: .75rem; }
.mc-site .mc-ev-decompte-bloc { flex: 1 1 0; min-width: 0; border-radius: 6px; text-align: center; padding: .45rem .5rem .3rem; font-variant-numeric: tabular-nums; }
.mc-site .mc-ev-decompte-lib { font-size: .68rem; text-transform: uppercase; letter-spacing: .04em; opacity: .9; line-height: 1.15; }
.mc-site .mc-ev-decompte-val { font-size: 1.05rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mc-site .mc-ev-decompte-bloc.grady-jaune { background: linear-gradient(color-mix(in srgb, #ffc107 60%, #fff), #ffc107); color: #3d2f00; }
.mc-site .mc-ev-decompte-bloc.grady-dark { background: linear-gradient(color-mix(in srgb, var(--site-dominante) 72%, #fff), var(--site-dominante)); color: #fff; }
.mc-site .mc-ev-decompte-bloc.mc-ev-clos { background: linear-gradient(color-mix(in srgb, #dc3545 72%, #fff), #dc3545); color: #fff; }
.mc-site .mc-ev-decompte-bloc.mc-ev-encours { background: linear-gradient(color-mix(in srgb, #198754 72%, #fff), #198754); color: #fff; }
/* Sur la fiche d'un événement (11/10) : les deux décomptes l'un sous l'autre. */
.mc-site .mc-ev-decomptes-colonne .mc-ev-decomptes { flex-direction: column; margin-top: 0; }
/* LA RÉPONSE DU FORMULAIRE DE CONTACT, sous le bandeau (abdAllah, 11/10) : le message de l'ERP, sans
   la marge latérale du back-office. */
.mc-site-contact-flash { padding-top: 1.25rem; }
.mc-site-contact-flash .flash-zone { padding: 0; }

/* LA PAGE DE PRÉSENTATION, SITE ÉTEINT (abdAllah, 11/10) - front/presentation.php : sur le dégradé de la
   couleur du site, une carte centrée avec le logo, le nom de l'établissement et le bouton Connexion. */
body.mc-site-presentation {
   min-height: 100vh;
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 1.5rem;
   background: radial-gradient(ellipse at 50% 30%, color-mix(in srgb, var(--site-dominante) 70%, #fff) 0%, var(--site-dominante) 55%, var(--site-fonce) 100%);
}
.mc-site-presentation-carte {
   width: 100%;
   max-width: 440px;
   background: #fff;
   border-radius: var(--site-rayon, 8px);
   box-shadow: rgba(0, 0, 0, .19) 0 10px 20px, rgba(0, 0, 0, .23) 0 6px 6px;
   padding: 3rem 2rem 2.75rem;
   text-align: center;
   animation: mc-revele-zoom 1s ease both;
}
.mc-site-presentation-logo { width: 120px; height: 120px; object-fit: contain; margin-bottom: 2rem; }
/* Le logo de MADRASSAT-E, à défaut de celui de l'établissement (11/10) : plus large que haut. */
.mc-site-presentation-logo-large { width: 240px; height: auto; max-width: 100%; }
.mc-site-presentation-carte h1 { font-size: clamp(1.5rem, 4vw, 2rem); font-weight: 800; color: var(--site-dominante); margin-bottom: 2.5rem; }
/* LES ENTRÉES (abdAllah, 11/10) : le logo descend, le nom arrive en zoom, les boutons montent - l'un après
   l'autre, après la carte. */
.mc-site-presentation-logo { animation: mc-revele-haut 1.1s ease .35s both; }
.mc-site-presentation-carte h1 { animation: mc-presentation-zoom 1.1s ease .7s both; }
@keyframes mc-presentation-zoom { from { opacity: 0; transform: scale(.55); } to { opacity: 1; transform: none; } }
.mc-site-presentation-carte > .d-flex { animation: mc-revele-bas 1.1s ease 1.05s both; }
.mc-site-presentation-copyright { margin: 2.25rem 0 0; font-size: .75rem; color: #8a94a3; animation: mc-revele-bas 1.1s ease 1.3s both; }
@media (prefers-reduced-motion: reduce) {
   .mc-site-presentation-carte,
   .mc-site-presentation-logo,
   .mc-site-presentation-carte h1,
   .mc-site-presentation-carte > .d-flex,
   .mc-site-presentation-copyright { animation: none; }
}