/* =========================================================
   INSTITUTION DAMPIERRE THEME v4.3 STABLE
   Site : inst-dampierre.fr
   Base : Joomla 6 + Cassiopeia Extended
   Fichier : user.css
   ========================================================= */



/* =========================================================
   00 - VARIABLES / DESIGN SYSTEM
   ========================================================= */

:root {

  /* Couleurs institutionnelles */
  --dampierre-bleu-nuit: #252a7f;
  --dampierre-bleu: #2d318f;
  --dampierre-bleu-clair: #2c7bc6;
  --dampierre-fuchsia: #e5007d;
  --dampierre-or: #d7b85b;
  --dampierre-blanc: #ffffff;

  /* Neutres */
  --dampierre-texte: #222222;
  --dampierre-texte-doux: #4a4f63;
  --dampierre-bordure: #d8dee8;
  --dampierre-fond-clair: #f8f9fc;
  --dampierre-fond-module: #ffffff;

  /* Dégradés */
  --dampierre-degrade: linear-gradient(
    135deg,
    var(--dampierre-bleu-clair) 0%,
    var(--dampierre-bleu) 45%,
    var(--dampierre-bleu-nuit) 100%
  );

  --dampierre-degrade-module: linear-gradient(
    90deg,
    rgba(45, 49, 143, .08),
    rgba(44, 123, 198, .04)
  );

  /* Typographie */
  --font-size-base: 1.06rem;
  --font-size-menu: 1.05rem;
  --font-size-footer: .98rem;
  --font-size-h1: 2.6rem;
  --font-size-h2: 2rem;
  --font-size-h3: 1.35rem;

  --font-weight-texte: 400;
  --font-weight-lien-module: 600;
  --module-menu-color: var(--dampierre-bleu);
  --module-menu-hover: var(--dampierre-fuchsia);
  --font-weight-menu: 600;
  --font-weight-titre: 700;
  --font-weight-hero: 800;

  --line-height-base: 1.65;
  --line-height-module: 1.45;
  --line-height-module-compact: 1.35;

  /* Espacements */
  --espace-xs: .35rem;
  --espace-s: .7rem;
  --espace-m: 1rem;
  --espace-l: 1.5rem;
  --espace-xl: 2rem;

  --module-padding: 1rem 1.1rem;
  --module-title-padding: .9rem 1.1rem;
  --module-list-spacing: .22rem;

  --footer-hauteur: 1rem;
  --footer-separateur-espace: 1rem;

  /* Formes / effets */
  --rayon-module: 18px;
  --rayon-carte: 18px;
  --rayon-image: 12px;
  --rayon-pilule: 999px;

  --ombre-module: 0 6px 18px rgba(37, 42, 127, .08);
  --ombre-carte: 0 8px 24px rgba(0, 0, 0, .18);

  --transition-standard: .25s ease;

  /* Logos */
  --logo-hauteur-accueil: 350px;
  --logo-hauteur-pages: 220px;

  /* Couleurs des modules */
  --couleur-decouvrir: var(--dampierre-bleu);
  --couleur-nos-formations: var(--dampierre-bleu);
  --couleur-infos: var(--dampierre-bleu);
  --couleur-infos-pratiques: var(--dampierre-bleu);
  --couleur-voir-aussi: var(--dampierre-bleu);

  --couleur-professionnel: var(--dampierre-or);
  --couleur-batiment: var(--dampierre-or);
  --couleur-qualiopi: var(--dampierre-or);

  --couleur-technologique: var(--dampierre-bleu-clair);
  --couleur-sieg: var(--dampierre-bleu-clair);
  --couleur-informatique: var(--dampierre-bleu-clair);

  --couleur-superieur: var(--dampierre-fuchsia);
  --couleur-hotellerie: var(--dampierre-fuchsia);
  --couleur-tertiaire: var(--dampierre-fuchsia);
  --couleur-nous-situer: var(--dampierre-fuchsia);

  --couleur-industrie: var(--dampierre-bleu-nuit);
  --couleur-vie-scolaire: var(--dampierre-bleu-nuit);
  --couleur-notre-reseau: var(--dampierre-bleu-nuit);
}


/* =========================================================
   01 - BASE GLOBALE
   ========================================================= */

body {
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  font-weight: var(--font-weight-texte);
  color: var(--dampierre-texte);
  background: var(--dampierre-blanc);
}

h1 {
  font-size: var(--font-size-h1);
  font-weight: var(--font-weight-hero);
}

h2 {
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-titre);
}

h3 {
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-titre);
}

a {
  color: var(--dampierre-bleu);
  transition:
    color var(--transition-standard),
    background-color var(--transition-standard),
    box-shadow var(--transition-standard),
    transform var(--transition-standard);
}

a:hover,
a:focus {
  color: var(--dampierre-fuchsia);
}


/* =========================================================
   02 - HEADER / NAVIGATION CASSIOPEIA EXTENDED
   ========================================================= */

.container-header {
  background: var(--dampierre-degrade);
  box-shadow: 0 4px 12px rgba(0, 0, 0, .15);
}

.navbar-brand img {
  max-height: var(--logo-hauteur-pages);
  width: auto;
  transition: max-height .30s ease;
}

.container-header .navbar-brand,
.container-header .brand-logo {
  color: var(--dampierre-blanc) !important;
}

.container-header .mod-menu > li > a,
.container-header .navbar-nav > li > a,
.container-header .navbar-nav .nav-link,
.container-header .mod-menu .nav-link,
.container-header .metismenu.mod-menu .mm-toggler {
  color: var(--dampierre-blanc) !important;
  font-size: var(--font-size-menu);
  font-weight: var(--font-weight-menu);
}

.container-header .mod-menu > li > a:hover,
.container-header .navbar-nav > li > a:hover,
.container-header .navbar-nav .nav-link:hover,
.container-header .mod-menu .nav-link:hover,
.container-header .metismenu.mod-menu .mm-toggler:hover,
.container-header .active > .nav-link,
.container-header .current > a {
  color: var(--dampierre-or) !important;
}


/* =========================================================
   03 - HERO ACCUEIL
   Module HTML personnalisé
   Position recommandée : banner
   Classe du module recommandée : hero-dampierre-wrapper
   Image attendue : /images/accueil-dampierre.webp
   ========================================================= */

/* Nettoyage des positions autour du hero */
.container-banner,
.container-top-a,
.container-topbar,
.container-main-top,
.moduletable.hero-dampierre-wrapper {
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.container-banner .grid-child,
.container-top-a .grid-child,
.container-topbar .grid-child,
.container-main-top .grid-child {
  max-width: none !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Hero */
.hero-dampierre {
  width: 100%;
  min-height: calc(100vh - 230px);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;

  background:
    linear-gradient(135deg, rgba(37, 42, 127, .82), rgba(44, 123, 198, .45)),
    url("/images/accueil-dampierre.webp") center/cover no-repeat;

  color: var(--dampierre-blanc);
  overflow: hidden;
  margin: 0 !important;
}

.hero-dampierre__content {
  max-width: 960px;
  padding: 3rem 2rem;
}

.hero-dampierre h1 {
  color: var(--dampierre-blanc);
  font-size: clamp(3rem, 6vw, 5rem);
  font-weight: var(--font-weight-hero);
  margin: 0 0 1rem;
  text-shadow: 0 3px 14px rgba(0, 0, 0, .35);
}

.hero-dampierre p {
  color: var(--dampierre-blanc);
  font-size: clamp(1.3rem, 2vw, 1.8rem);
  font-weight: 600;
  margin: 0 0 2rem;
  text-shadow: 0 2px 10px rgba(0, 0, 0, .35);
}

.hero-dampierre__actions {
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.hero-dampierre__restaurant {
  display: flex;
  justify-content: center;
  margin-top: 2rem;
}


/* =========================================================
   04 - BOUTONS HERO
   ========================================================= */

.btn-hero,
.btn-hero:visited {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  padding: .9rem 1.6rem;
  border-radius: var(--rayon-pilule);
  font-weight: 800;
  text-decoration: none !important;
  box-shadow: var(--ombre-module);
  color: var(--dampierre-blanc) !important;
}

.btn-hero i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.35em;
  height: 1.35em;
  margin-right: .35rem;
  font-size: 1.05rem;
  color: currentColor !important;
  opacity: 1 !important;
}

.btn-hero-lycee {
  background: var(--dampierre-bleu);
}

.btn-hero-centre {
  background: var(--dampierre-fuchsia);
}

.btn-hero-restaurant,
.btn-hero-restaurant:visited {
  background: var(--dampierre-or);
  color: var(--dampierre-bleu-nuit) !important;
}

.btn-hero:hover,
.btn-hero:focus {
  transform: translateY(-2px);
  box-shadow: var(--ombre-carte);
  text-decoration: none !important;
}

.btn-hero-lycee:hover,
.btn-hero-lycee:focus {
  background: var(--dampierre-bleu-nuit);
  color: var(--dampierre-blanc) !important;
}

.btn-hero-centre:hover,
.btn-hero-centre:focus {
  background: #c8006d;
  color: var(--dampierre-blanc) !important;
}

.btn-hero-restaurant:hover,
.btn-hero-restaurant:focus {
  background: #c7a03d;
  color: var(--dampierre-bleu-nuit) !important;
}

.btn-hero-restaurant i {
  color: var(--dampierre-bleu-nuit) !important;
}


/* =========================================================
   05 - PAGE ACCUEIL : SUPPRESSION ZONE BLANCHE
   Requis :
   Élément de menu Accueil > Affichage de la page > Classe de page :
   accueil-dampierre

   Principe :
   - on ne masque PAS .site-grid, car Extended y place aussi des modules ;
   - on masque seulement le composant/article vide de la page d'accueil.
   ========================================================= */

body.accueil-dampierre,
.accueil-dampierre {
  background: var(--dampierre-degrade) !important;
}

body.accueil-dampierre .site-grid,
.accueil-dampierre .site-grid {
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  min-height: 0 !important;
}

/* Article Accueil vide : on supprime seulement la zone composant */
body.accueil-dampierre .container-component,
body.accueil-dampierre main,
body.accueil-dampierre .com-content-article,
body.accueil-dampierre .com-content-article__body,
body.accueil-dampierre .item-page,
.accueil-dampierre .container-component,
.accueil-dampierre main,
.accueil-dampierre .com-content-article,
.accueil-dampierre .com-content-article__body,
.accueil-dampierre .item-page {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}


/* =========================================================
   06 - MODULES JOOMLA : STRUCTURE COMMUNE
   ========================================================= */

.sidebar-left .card,
.sidebar-right .card,
.moduletable {
  background: var(--dampierre-fond-module);
  border: 1px solid rgba(37, 42, 127, .14);
  border-radius: var(--rayon-module);
  box-shadow: var(--ombre-module);
  overflow: hidden;
  margin-bottom: var(--espace-l);
}

.sidebar-left .card-header,
.sidebar-right .card-header,
.moduletable > h3,
.module-title {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: var(--module-title-padding);
  background: var(--dampierre-degrade-module);
  color: var(--dampierre-bleu-nuit);
  border-left: 6px solid var(--module-color, var(--dampierre-bleu));
  border-bottom: 1px solid rgba(37, 42, 127, .12);
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-titre);
  letter-spacing: .01em;
}

.sidebar-left .card-body,
.sidebar-right .card-body,
.moduletable {
  padding: var(--module-padding);
  color: var(--dampierre-texte);
  line-height: var(--line-height-module);
}

.moduletable > h3 + * {
  margin-top: var(--espace-s);
}

/* Icônes des modules */
[class*="module-"] .card-header::before,
[class*="module-"] h3::before {
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  margin-right: .6rem;
  color: var(--module-color, var(--dampierre-bleu));
  content: var(--module-icon, "\f05a");
}


/* =========================================================
   07 - MODULES : COULEURS ET ICÔNES
   ========================================================= */

.module-decouvrir-lycee,
.module-decouvrir-centre {
  --module-color: var(--couleur-decouvrir);
  --module-icon: "\f19c";
}

.module-nos-formations {
  --module-color: var(--couleur-nos-formations);
  --module-icon: "\f5da";
}

.module-lycee-professionnel {
  --module-color: var(--couleur-professionnel);
  --module-icon: "\f7d9";
}

.module-batiment {
  --module-color: var(--couleur-batiment);
  --module-icon: "\f1ad";
}

.module-certification-qualiopi {
  --module-color: var(--couleur-qualiopi);
  --module-icon: "\f5a2";
}

.module-notre-reseau {
  --module-color: var(--couleur-notre-reseau);
  --module-icon: "\f1e0";
}

.module-lycee-technologique {
  --module-color: var(--couleur-technologique);
  --module-icon: "\f108";
}

.module-informatique {
  --module-color: var(--couleur-informatique);
  --module-icon: "\f109";
}

.module-sieg {
  --module-color: var(--couleur-sieg);
  --module-icon: "\f0b1";
}

.module-bts-superieur {
  --module-color: var(--couleur-superieur);
  --module-icon: "\f501";
}

.module-hotellerie-restauration {
  --module-color: var(--couleur-hotellerie);
  --module-icon: "\f2e7";
}

.module-tertiaire {
  --module-color: var(--couleur-tertiaire);
  --module-icon: "\f0c0";
}

.module-industrie {
  --module-color: var(--couleur-industrie);
  --module-icon: "\f275";
}

.module-infos-utiles-lycee {
  --module-color: var(--couleur-infos);
  --module-icon: "\f073";
}

.module-infos-pratiques {
  --module-color: var(--couleur-infos-pratiques);
  --module-icon: "\f05a";
}

.module-voir-aussi {
  --module-color: var(--couleur-voir-aussi);
  --module-icon: "\f0c1";
}

.module-vie-scolaire {
  --module-color: var(--couleur-vie-scolaire);
  --module-icon: "\f19d";
}

.module-nous-situer {
  --module-color: var(--couleur-nous-situer);
  --module-icon: "\f3c5";
}


/* =========================================================
   08 - MODULES : LIENS / SÉPARATEURS / MENUS
   Objectif : supprimer les verts Joomla et uniformiser les séparateurs.
   ========================================================= */

.moduletable a,
.sidebar-left .card a,
.sidebar-right .card a,
.card-body a,
.module-body a,
.mod-list a,
.mod-menu a,
.mod-articles-related a,
.module-voir-aussi a,
.moduletable .nav-link,
.sidebar-left .nav-link,
.sidebar-right .nav-link,
.moduletable .separator,
.moduletable .nav-header,
.moduletable .menu-separator,
.moduletable .mod-menu__separator,
.sidebar-left .separator,
.sidebar-right .separator {
  color: var(--dampierre-bleu) !important;
  font-weight: var(--font-weight-lien-module);
  text-decoration: none;
  letter-spacing: .01em;
}

.moduletable a:hover,
.moduletable a:focus,
.sidebar-left .card a:hover,
.sidebar-left .card a:focus,
.sidebar-right .card a:hover,
.sidebar-right .card a:focus,
.card-body a:hover,
.card-body a:focus,
.module-body a:hover,
.module-body a:focus,
.mod-list a:hover,
.mod-list a:focus,
.mod-menu a:hover,
.mod-menu a:focus,
.mod-articles-related a:hover,
.mod-articles-related a:focus,
.module-voir-aussi a:hover,
.module-voir-aussi a:focus {
  color: var(--dampierre-fuchsia) !important;
  text-decoration: underline;
}

/* Togglers / chevrons / accordéons */
.moduletable .mm-toggler,
.sidebar-left .mm-toggler,
.sidebar-right .mm-toggler,
.moduletable .dropdown-toggle,
.sidebar-left .dropdown-toggle,
.sidebar-right .dropdown-toggle,
.moduletable .accordion-button,
.sidebar-left .accordion-button,
.sidebar-right .accordion-button {
  color: var(--dampierre-bleu) !important;
  font-weight: var(--font-weight-lien-module);
}

.moduletable .mm-toggler:hover,
.sidebar-left .mm-toggler:hover,
.sidebar-right .mm-toggler:hover,
.moduletable .dropdown-toggle:hover,
.sidebar-left .dropdown-toggle:hover,
.sidebar-right .dropdown-toggle:hover,
.moduletable .accordion-button:hover,
.sidebar-left .accordion-button:hover,
.sidebar-right .accordion-button:hover {
  color: var(--dampierre-fuchsia) !important;
}

/* Icônes internes ou SVG hérités du template */
.moduletable i,
.sidebar-left .card i,
.sidebar-right .card i,
.moduletable svg,
.sidebar-left .card svg,
.sidebar-right .card svg {
  color: var(--module-color, var(--dampierre-bleu)) !important;
}

/* Traits de séparation */
.moduletable hr,
.sidebar-left .card hr,
.sidebar-right .card hr {
  border: 0;
  border-top: 1px solid rgba(37, 42, 127, .14);
  margin: .75rem 0;
}


/* =========================================================
   09 - MODULES : LISTES COMPACTES
   ========================================================= */

.moduletable ul,
.moduletable ol,
.sidebar-left .card-body ul,
.sidebar-left .card-body ol,
.sidebar-right .card-body ul,
.sidebar-right .card-body ol {
  margin-top: var(--module-list-spacing);
  margin-bottom: var(--module-list-spacing);
  padding-left: 1.1rem;
}

.moduletable li,
.sidebar-left .card-body li,
.sidebar-right .card-body li {
  margin-top: var(--module-list-spacing);
  margin-bottom: var(--module-list-spacing);
  line-height: var(--line-height-module-compact);
}

.module-voir-aussi ul,
.module-voir-aussi .mod-articles-related {
  list-style: none;
  margin: 0;
  padding: 0;
}

.module-voir-aussi li {
  margin: 0 0 .45rem 0;
  padding: 0;
}


/* =========================================================
   10 - IFRAMES / MÉDIAS
   ========================================================= */

.module-nous-situer iframe {
  width: 100%;
  height: 350px;
  border: 0;
  border-radius: var(--rayon-image);
  display: block;
}

/* =========================================================
   12 - FOOTER
   ========================================================= */

.container-footer {
  background: var(--dampierre-degrade);
  padding-block: var(--footer-hauteur);
  font-size: var(--font-size-footer);
  margin-top: 0 !important;
}

.container-footer .grid-child {
  display: flex;
  justify-content: center;
  align-items: center;
}

.container-footer .mod-menu,
.container-footer ul.mod-menu,
.container-footer .metismenu.mod-menu {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  justify-content: center;
  align-items: center;
  gap: 0;
  width: auto;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

.container-footer .mod-menu > li,
.container-footer ul.mod-menu > li,
.container-footer .metismenu.mod-menu > li {
  display: inline-flex;
  align-items: center;
  width: auto !important;
  margin: 0;
  padding: 0;
  white-space: nowrap;
}

.container-footer .mod-menu > li:not(:last-child)::after,
.container-footer ul.mod-menu > li:not(:last-child)::after,
.container-footer .metismenu.mod-menu > li:not(:last-child)::after {
  content: "|";
  margin: 0 var(--footer-separateur-espace);
  color: rgba(255, 255, 255, .75);
  font-weight: 600;
}

.container-footer .mod-menu a,
.container-footer ul.mod-menu a,
.container-footer .metismenu.mod-menu a {
  color: var(--dampierre-blanc) !important;
  text-decoration: none;
  font-weight: 600;
}

.container-footer .mod-menu a:hover,
.container-footer ul.mod-menu a:hover,
.container-footer .metismenu.mod-menu a:hover {
  color: var(--dampierre-or) !important;
  text-decoration: underline;
}


/* =========================================================
   13 - CASSIOPEIA EXTENDED : MENUS DE MODULES
   Correction validée :
   Extended applique .mod-menu a, .mod-menu button { color: var(--link-color); }
   On surcharge la variable et le sélecteur exact uniquement dans les modules.
   ========================================================= */

.sidebar-left .card .mod-menu,
.sidebar-right .card .mod-menu,
.moduletable .mod-menu,
.card-body .mod-menu,
.bottom-a.card .mod-menu {
  --link-color: var(--dampierre-bleu) !important;
  --link-hover-color: var(--dampierre-fuchsia) !important;
}

.sidebar-left .card .mod-menu a,
.sidebar-left .card .mod-menu button,
.sidebar-right .card .mod-menu a,
.sidebar-right .card .mod-menu button,
.moduletable .mod-menu a,
.moduletable .mod-menu button,
.card-body .mod-menu a,
.card-body .mod-menu button,
.bottom-a.card .mod-menu a,
.bottom-a.card .mod-menu button {
  color: var(--dampierre-bleu) !important;
  font-weight: var(--font-weight-lien-module) !important;
  text-decoration: none !important;
}

.sidebar-left .card .mod-menu button span,
.sidebar-right .card .mod-menu button span,
.moduletable .mod-menu button span,
.card-body .mod-menu button span,
.bottom-a.card .mod-menu button span {
  color: currentColor !important;
}

.sidebar-left .card .mod-menu button .icon-chevron-down,
.sidebar-left .card .mod-menu button .icon-chevron-up,
.sidebar-right .card .mod-menu button .icon-chevron-down,
.sidebar-right .card .mod-menu button .icon-chevron-up,
.moduletable .mod-menu button .icon-chevron-down,
.moduletable .mod-menu button .icon-chevron-up,
.card-body .mod-menu button .icon-chevron-down,
.card-body .mod-menu button .icon-chevron-up,
.bottom-a.card .mod-menu button .icon-chevron-down,
.bottom-a.card .mod-menu button .icon-chevron-up {
  color: currentColor !important;
}

.sidebar-left .card .mod-menu a:hover,
.sidebar-left .card .mod-menu a:focus,
.sidebar-left .card .mod-menu button:hover,
.sidebar-left .card .mod-menu button:focus,
.sidebar-right .card .mod-menu a:hover,
.sidebar-right .card .mod-menu a:focus,
.sidebar-right .card .mod-menu button:hover,
.sidebar-right .card .mod-menu button:focus,
.moduletable .mod-menu a:hover,
.moduletable .mod-menu a:focus,
.moduletable .mod-menu button:hover,
.moduletable .mod-menu button:focus,
.card-body .mod-menu a:hover,
.card-body .mod-menu a:focus,
.card-body .mod-menu button:hover,
.card-body .mod-menu button:focus,
.bottom-a.card .mod-menu a:hover,
.bottom-a.card .mod-menu a:focus,
.bottom-a.card .mod-menu button:hover,
.bottom-a.card .mod-menu button:focus {
  color: var(--dampierre-fuchsia) !important;
  text-decoration: underline !important;
}

/* Sécurité : ne pas impacter le menu principal et le footer */
.container-header .mod-menu a,
.container-header .mod-menu button {
  color: var(--dampierre-blanc) !important;
}

.container-footer .mod-menu a,
.container-footer .mod-menu button {
  color: var(--dampierre-blanc) !important;
}


/* =========================================================
   14 - LOGO INSTITUTION
   ========================================================= */

.container-header .navbar-brand img,
.container-header .brand-logo img {
  width: auto;
  max-height: var(--logo-hauteur-pages);
  transition: max-height .30s ease;
}

body.accueil-dampierre .container-header .navbar-brand img,
body.accueil-dampierre .container-header .brand-logo img {
  max-height: var(--logo-hauteur-accueil);
}


/* =========================================================
   15 - HERO PREMIUM FINAL
   Photo + boutons + signature, sans barre jaune.
   ========================================================= */

:root {
  --hero-overlay-fonce: rgba(37, 42, 127, .84);
  --hero-overlay-clair: rgba(44, 123, 198, .48);
}

.hero-dampierre {
  position: relative;
  isolation: isolate;
  min-height: calc(100vh - 230px);
  background:
    linear-gradient(135deg, var(--hero-overlay-fonce), var(--hero-overlay-clair)),
    url("/images/accueil-dampierre.webp") center/cover no-repeat fixed;
}

.hero-dampierre::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(circle at center, rgba(255,255,255,.10) 0%, rgba(255,255,255,0) 38%),
    linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.22));
}

.hero-dampierre__content::before {
  content: none !important;
  display: none !important;
}

.hero-dampierre h1 {
  letter-spacing: .01em;
}

.hero-dampierre__subtitle {
  max-width: 1000px;
  margin: 0 auto 2.3rem;
  color: var(--dampierre-blanc);
  font-size: clamp(1.25rem, 2vw, 1.75rem);
  font-weight: 650;
  line-height: 1.35;
  text-shadow: 0 3px 15px rgba(0,0,0,.35);
}

.hero-dampierre__actions {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.15rem;
  flex-wrap: wrap;
}

.btn-hero,
.btn-hero:visited {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  min-width: 230px;
  padding: 1rem 1.75rem;
  border-radius: var(--rayon-pilule);
  border: 1px solid rgba(255,255,255,.18);
  font-weight: 800;
  letter-spacing: .01em;
  text-decoration: none !important;
  box-shadow: var(--ombre-module);
  color: var(--dampierre-blanc) !important;
}

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

.btn-hero__icon i,
.btn-hero i {
  font-size: 1.18rem;
  color: currentColor !important;
}

.btn-hero-lycee {
  background: var(--dampierre-bleu);
}

.btn-hero-centre {
  background: var(--dampierre-fuchsia);
}

.btn-hero-restaurant,
.btn-hero-restaurant:visited {
  background: var(--dampierre-or);
  color: var(--dampierre-bleu-nuit) !important;
  border: 1px solid rgba(37,42,127,.25);
}

.btn-hero-restaurant .btn-hero__icon {
  border-right: 1px solid rgba(45,49,143,.25);
}

.btn-hero-restaurant i {
  color: var(--dampierre-bleu-nuit) !important;
}

.btn-hero:hover,
.btn-hero:focus {
  transform: translateY(-2px);
  box-shadow: var(--ombre-carte);
  text-decoration: none !important;
}

.btn-hero-lycee:hover,
.btn-hero-lycee:focus {
  background: var(--dampierre-bleu-nuit);
  color: var(--dampierre-blanc) !important;
}

.btn-hero-centre:hover,
.btn-hero-centre:focus {
  background: #c8006d;
  color: var(--dampierre-blanc) !important;
}

.btn-hero-restaurant:hover,
.btn-hero-restaurant:focus {
  background: #c7a03d;
  color: var(--dampierre-bleu-nuit) !important;
}

.hero-dampierre__signature {
  margin-top: 2.2rem;
  color: rgba(255,255,255,.95);
  font-size: clamp(1rem, 1.35vw, 1.25rem);
  font-style: italic;
  font-weight: 500;
  letter-spacing: .03em;
  text-shadow: 0 2px 10px rgba(0,0,0,.35);
}

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

.hero-dampierre__content {
  animation: heroFadeUp .65s ease both;
}

@keyframes heroFadeUp {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}


/* =========================================================
   16 - MENU MOBILE CASSIOPEIA EXTENDED
   Layout Joomla : Collapsible Dropdown.
   Important : aucune règle ne force le menu ouvert.
   ========================================================= */

@media (max-width: 991px) {

  .container-header {
    padding-top: .75rem;
    padding-bottom: .75rem;
  }

  .container-header .navbar-toggler {
    padding: .45rem .65rem;
    border: 2px solid rgba(255,255,255,.65);
    border-radius: 8px;
    background: rgba(255,255,255,.08);
    color: var(--dampierre-blanc) !important;
  }

  .container-header .navbar-toggler:hover,
  .container-header .navbar-toggler:focus {
    background: rgba(255,255,255,.16);
    box-shadow: none;
  }

  .container-header .mod-menu {
    gap: 0 !important;
    margin: 0 !important;
    padding: .25rem 0 0 !important;
  }

  .container-header .mod-menu > li {
    margin: 0 !important;
    padding: 0 !important;
  }

  .container-header .mod-menu > li > a,
  .container-header .mod-menu > li > button,
  .container-header .mod-menu > li > .nav-link {
    padding: .58rem 0 !important;
    font-size: 1.18rem;
    font-weight: 700;
    line-height: 1.25;
    color: var(--dampierre-blanc) !important;
    text-decoration: none;
  }

  .container-header .mod-menu > li > a:hover,
  .container-header .mod-menu > li > a:focus,
  .container-header .mod-menu > li > button:hover,
  .container-header .mod-menu > li > button:focus,
  .container-header .mod-menu > li > .nav-link:hover,
  .container-header .mod-menu > li > .nav-link:focus {
    color: var(--dampierre-or) !important;
    text-decoration: underline;
  }

  .container-header .mod-menu .mod-menu__sub {
    margin: .15rem 0 .35rem !important;
    padding-left: 1rem !important;
  }

  .container-header .mod-menu .mod-menu__sub a,
  .container-header .mod-menu .mod-menu__sub button {
    padding: .38rem 0 !important;
    font-size: 1rem;
    line-height: 1.25;
    color: rgba(255,255,255,.92) !important;
  }

  .container-header .navbar-brand img,
  .container-header .brand-logo img {
    max-height: 150px;
  }

  body.accueil-dampierre .container-header .navbar-brand img,
  body.accueil-dampierre .container-header .brand-logo img {
    max-height: 175px;
  }

  .hero-dampierre {
    background:
      linear-gradient(135deg, var(--hero-overlay-fonce), var(--hero-overlay-clair)),
      url("/images/accueil-dampierre.webp") center/cover no-repeat;
  }
}

@media (max-width: 700px) {
  .hero-dampierre {
    min-height: calc(100vh - 190px);
  }

  .hero-dampierre__content {
    padding: 2.5rem 1.25rem;
  }

  .hero-dampierre__subtitle {
    font-size: 1.18rem;
  }

  .btn-hero {
    width: 100%;
    max-width: 320px;
    min-width: 0;
  }

  .hero-dampierre__signature::before,
  .hero-dampierre__signature::after {
    display: none;
  }

  .container-footer .mod-menu,
  .container-footer ul.mod-menu,
  .container-footer .metismenu.mod-menu {
    flex-wrap: wrap !important;
    row-gap: .4rem;
  }
}

@media (max-width: 576px) {
  .container-header .navbar-brand img,
  .container-header .brand-logo img {
    max-height: 115px;
  }

  body.accueil-dampierre .container-header .navbar-brand img,
  body.accueil-dampierre .container-header .brand-logo img {
    max-height: 125px;
  }

  .container-header .mod-menu > li > a,
  .container-header .mod-menu > li > button,
  .container-header .mod-menu > li > .nav-link {
    padding: .52rem 0 !important;
    font-size: 1.12rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-dampierre__content {
    animation: none;
  }

  .btn-hero:hover,
  .btn-hero:focus {
    transform: none;
  }
}

/* =========================================================
   17 - CORRECTIFS V4.3
   Menu mobile Bootstrap / Cassiopeia Extended
   Objectif :
   - conserver le fonctionnement natif "Collapsible Dropdown" ;
   - améliorer le bouton hamburger ;
   - réduire les espacements du menu mobile ;
   - remplacer le cadre orange du lien actif par un fond or discret.
   ========================================================= */

@media (max-width: 991px) {

  /* Bouton hamburger */
  .container-header .navbar-toggler {
    margin: .5rem 1rem .75rem;
    padding: .55rem .75rem;
    border-radius: 10px;
    border: 2px solid rgba(255,255,255,.60);
    background: rgba(255,255,255,.08);
    box-shadow: none !important;
    outline: none !important;
    transition: background var(--transition-standard), border-color var(--transition-standard);
  }

  .container-header .navbar-toggler:hover,
  .container-header .navbar-toggler:focus {
    background: rgba(255,255,255,.18);
    border-color: rgba(255,255,255,.90);
    box-shadow: none !important;
    outline: none !important;
  }

  .container-header .navbar-toggler-icon {
    width: 1.5rem;
    height: 1.5rem;
  }

  /* Menu mobile compact */
  .container-header .mod-menu {
    gap: 0 !important;
    margin: 0 !important;
    padding-top: .25rem !important;
  }

  .container-header .mod-menu > li {
    margin: 0 !important;
    padding: 0 !important;
  }

  .container-header .mod-menu > li > a,
  .container-header .mod-menu > li > button,
  .container-header .mod-menu > li > .nav-link {
    padding: .55rem 0 !important;
    font-size: 1.15rem;
    line-height: 1.25;
    font-weight: 700;
    color: var(--dampierre-blanc) !important;
    text-decoration: none !important;
  }

  /* Lien actif : texte or + soulignement discret */
  .container-header .mod-menu .current > a,
  .container-header .mod-menu .active > a,
  .container-header .mod-menu .current > button,
  .container-header .mod-menu .active > button,
  .container-header .mod-menu .current > .nav-link,
  .container-header .mod-menu .active > .nav-link {
    position: relative;
    background: transparent !important;
    color: var(--dampierre-or) !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding-inline: 0 !important;
    text-decoration: none !important;
  }

  .container-header .mod-menu .current > a::after,
  .container-header .mod-menu .active > a::after,
  .container-header .mod-menu .current > button::after,
  .container-header .mod-menu .active > button::after,
  .container-header .mod-menu .current > .nav-link::after,
  .container-header .mod-menu .active > .nav-link::after {
    content: "";
    position: absolute;
    left: 12%;
    right: 12%;
    bottom: -4px;
    height: 3px;
    background: var(--dampierre-or);
    border-radius: 999px;
  }

  .container-header .mod-menu .current > a:hover,
  .container-header .mod-menu .active > a:hover,
  .container-header .mod-menu .current > button:hover,
  .container-header .mod-menu .active > button:hover,
  .container-header .mod-menu .current > .nav-link:hover,
  .container-header .mod-menu .active > .nav-link:hover {
    color: var(--dampierre-or) !important;
    background: transparent !important;
    text-decoration: none !important;
  }

  /* Sous-menu mobile */
  .container-header .mod-menu .mod-menu__sub {
    margin: .15rem 0 .35rem !important;
    padding-left: 1rem !important;
  }

  .container-header .mod-menu .mod-menu__sub a,
  .container-header .mod-menu .mod-menu__sub button {
    padding: .38rem 0 !important;
    font-size: 1rem;
    line-height: 1.25;
    color: rgba(255,255,255,.92) !important;
  }
}



.fiche-champ--kpi {
  align-items: start;
}

.fiche-champ--kpi .fiche-valeur {
  display: grid;
  gap: .65rem;
}

.fiche-kpi-valeur {
  color: var(--dampierre-bleu, #2d318f);
  font-size: 2rem;
  font-weight: 900;
  line-height: 1;
}

.fiche-kpi-jauge {
  display: block;
  width: 100%;
  height: 12px;
  overflow: hidden;
  background: #eef2ff;
  border-radius: 999px;
}

.fiche-kpi-jauge span {
  display: block;
  width: var(--jauge, 0%);
  height: 100%;
  background: var(--dampierre-fuchsia, #e5007d);
  border-radius: 999px;
}

/* =========================================================
   18 - MENU RESPONSIVE DAMPIERRE v5.1 STABLE
   ---------------------------------------------------------
   Desktop :
   - conserve le menu horizontal Bootstrap / Cassiopeia
   - ajoute uniquement des soulignements colorés

   Mobile :
   - transforme le menu en panneau compact blanc
   - lignes horizontales colorées
   - icônes colorées

   Palette :
   Accueil  : bleu foncé
   Lycée    : bleu clair
   Centre   : fuchsia
   Contacts : bleu-vert
   Le 1926  : or
   ========================================================= */

/* =========================================================
   18.1 - DESKTOP : MENU HORIZONTAL CONSERVÉ
   ========================================================= */

@media (min-width: 992px) {

  .container-header .container-nav nav.navbar[aria-label="Main Menu"] {
    position: static !important;
    display: flex !important;
    width: 100%;
    margin: 0;
  }

  .container-header .container-nav nav.navbar[aria-label="Main Menu"] .navbar-collapse {
    position: static !important;
    display: flex !important;
    width: auto;
    min-width: 0;
    max-width: none;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .container-header .container-nav nav.navbar[aria-label="Main Menu"] .navbar-toggler {
    display: none !important;
  }

  .container-header .container-nav nav.navbar[aria-label="Main Menu"] .mod-menu,
  .container-header .container-nav nav.navbar[aria-label="Main Menu"] .navbar-nav {
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    gap: .35rem;
    margin: 0 !important;
    padding: 0 !important;
  }

  .container-header .container-nav nav.navbar[aria-label="Main Menu"] .mod-menu > li,
  .container-header .container-nav nav.navbar[aria-label="Main Menu"] .navbar-nav > li {
    position: relative;
    display: inline-flex !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 .15rem .35rem !important;
  }

  .container-header .container-nav nav.navbar[aria-label="Main Menu"] .mod-menu > li > a,
  .container-header .container-nav nav.navbar[aria-label="Main Menu"] .navbar-nav > li > a,
  .container-header .container-nav nav.navbar[aria-label="Main Menu"] .nav-link {
    display: inline-flex !important;
    align-items: center;
    gap: .45rem;
    padding: .55rem .75rem !important;
    color: var(--dampierre-blanc) !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    font-size: var(--font-size-menu, 1.05rem) !important;
    font-weight: var(--font-weight-menu, 600) !important;
    line-height: 1.2;
    text-decoration: none !important;
    box-shadow: none !important;
  }

  .container-header .container-nav nav.navbar[aria-label="Main Menu"] .mod-menu > li > a:hover,
  .container-header .container-nav nav.navbar[aria-label="Main Menu"] .navbar-nav > li > a:hover,
  .container-header .container-nav nav.navbar[aria-label="Main Menu"] .nav-link:hover,
  .container-header .container-nav nav.navbar[aria-label="Main Menu"] .active > a,
  .container-header .container-nav nav.navbar[aria-label="Main Menu"] .current > a,
  .container-header .container-nav nav.navbar[aria-label="Main Menu"] .active > .nav-link,
  .container-header .container-nav nav.navbar[aria-label="Main Menu"] .current > .nav-link {
    color: var(--dampierre-or) !important;
    background: transparent !important;
    text-decoration: none !important;
  }

  /* Soulignement de base */
  .container-header .container-nav nav.navbar[aria-label="Main Menu"] .mod-menu > li::after,
  .container-header .container-nav nav.navbar[aria-label="Main Menu"] .navbar-nav > li::after {
    content: "";
    position: absolute;
    left: .75rem;
    right: .75rem;
    bottom: .1rem;
    height: 3px;
    border-radius: 999px;
    background: var(--dampierre-bleu, #2d318f);
    transform: scaleX(.35);
    transform-origin: center;
    opacity: .85;
    transition: transform .22s ease, opacity .22s ease;
  }

  .container-header .container-nav nav.navbar[aria-label="Main Menu"] .mod-menu > li:hover::after,
  .container-header .container-nav nav.navbar[aria-label="Main Menu"] .navbar-nav > li:hover::after,
  .container-header .container-nav nav.navbar[aria-label="Main Menu"] .mod-menu > li.active::after,
  .container-header .container-nav nav.navbar[aria-label="Main Menu"] .mod-menu > li.current::after,
  .container-header .container-nav nav.navbar[aria-label="Main Menu"] .navbar-nav > li.active::after,
  .container-header .container-nav nav.navbar[aria-label="Main Menu"] .navbar-nav > li.current::after {
    transform: scaleX(1);
    opacity: 1;
  }

  /* Icône discrète en desktop */
  .container-header .container-nav nav.navbar[aria-label="Main Menu"] a::before,
  .container-header .container-nav nav.navbar[aria-label="Main Menu"] .nav-link::before {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    color: currentColor;
    opacity: .9;
  }

  /* Accueil */
  .container-header .container-nav nav.navbar[aria-label="Main Menu"] li:has(a[href*="accueil"])::after,
  .container-header .container-nav nav.navbar[aria-label="Main Menu"] .mod-menu > li:nth-child(1)::after,
  .container-header .container-nav nav.navbar[aria-label="Main Menu"] .navbar-nav > li:nth-child(1)::after {
    background: var(--dampierre-bleu, #2d318f);
  }

  /* Lycée */
  .container-header .container-nav nav.navbar[aria-label="Main Menu"] li:has(a[href*="lycee"])::after,
  .container-header .container-nav nav.navbar[aria-label="Main Menu"] li:has(a[href*="lycée"])::after,
  .container-header .container-nav nav.navbar[aria-label="Main Menu"] .mod-menu > li:nth-child(2)::after,
  .container-header .container-nav nav.navbar[aria-label="Main Menu"] .navbar-nav > li:nth-child(2)::after {
    background: var(--dampierre-bleu-clair, #2c7bc6);
  }

  /* Centre */
  .container-header .container-nav nav.navbar[aria-label="Main Menu"] li:has(a[href*="centre"])::after,
  .container-header .container-nav nav.navbar[aria-label="Main Menu"] li:has(a[href*="formation"])::after,
  .container-header .container-nav nav.navbar[aria-label="Main Menu"] .mod-menu > li:nth-child(3)::after,
  .container-header .container-nav nav.navbar[aria-label="Main Menu"] .navbar-nav > li:nth-child(3)::after {
    background: var(--dampierre-fuchsia, #e5007d);
  }

  /* Contacts */
  .container-header .container-nav nav.navbar[aria-label="Main Menu"] li:has(a[href*="contact"])::after,
  .container-header .container-nav nav.navbar[aria-label="Main Menu"] .mod-menu > li:nth-child(4)::after,
  .container-header .container-nav nav.navbar[aria-label="Main Menu"] .navbar-nav > li:nth-child(4)::after {
    background: #0f8b8d;
  }

  /* Le 1926 */
  .container-header .container-nav nav.navbar[aria-label="Main Menu"] li:has(a[href*="1926"])::after,
  .container-header .container-nav nav.navbar[aria-label="Main Menu"] .mod-menu > li:nth-child(5)::after,
  .container-header .container-nav nav.navbar[aria-label="Main Menu"] .navbar-nav > li:nth-child(5)::after {
    background: var(--dampierre-or, #d7b85b) !important;
  }
}

/* =========================================================
   18.2 - MOBILE : PETIT MENU DÉROULANT COMPACT
   ========================================================= */

@media (max-width: 991px) {

  .container-header .container-nav nav.navbar[aria-label="Main Menu"] {
    position: relative !important;
    display: inline-block !important;
    width: auto !important;
    margin: .5rem 0 1rem;
  }

  .container-header .container-nav nav.navbar[aria-label="Main Menu"] .navbar-toggler {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: auto;
    min-width: 54px;
    height: 48px;
    padding: .55rem .8rem;
    margin: 0;
    color: var(--dampierre-blanc) !important;
    background: rgba(255,255,255,.10);
    border: 2px solid rgba(255,255,255,.75);
    border-radius: 12px;
    box-shadow: none !important;
  }

  .container-header .container-nav nav.navbar[aria-label="Main Menu"] .navbar-toggler::after {
    content: "MENU";
    margin-left: .55rem;
    color: var(--dampierre-blanc);
    font-size: .9rem;
    font-weight: 800;
    letter-spacing: .04em;
  }

  .container-header .container-nav nav.navbar[aria-label="Main Menu"] .navbar-toggler:hover,
  .container-header .container-nav nav.navbar[aria-label="Main Menu"] .navbar-toggler:focus {
    background: rgba(255,255,255,.18);
    border-color: var(--dampierre-or);
  }

  .container-header .container-nav nav.navbar[aria-label="Main Menu"] .navbar-collapse {
    position: absolute !important;
    z-index: 9999;
    top: calc(100% + .45rem);
    left: 0;
    min-width: 300px;
    max-width: min(92vw, 360px);
    padding: .75rem;
    background: #fff;
    border: 1px solid rgba(45,49,143,.18);
    border-radius: 14px;
    box-shadow: 0 14px 34px rgba(37,42,127,.22);
  }

  .container-header .container-nav nav.navbar[aria-label="Main Menu"] .navbar-collapse:not(.show) {
    display: none !important;
  }

  .container-header .container-nav nav.navbar[aria-label="Main Menu"] .navbar-collapse.show {
    display: block !important;
  }

  .container-header .container-nav nav.navbar[aria-label="Main Menu"] .mod-menu,
  .container-header .container-nav nav.navbar[aria-label="Main Menu"] .navbar-nav {
    display: block !important;
    width: 100%;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none;
  }

  .container-header .container-nav nav.navbar[aria-label="Main Menu"] .mod-menu > li,
  .container-header .container-nav nav.navbar[aria-label="Main Menu"] .navbar-nav > li {
    position: relative;
    display: block !important;
    width: 100%;
    margin: 0 0 .55rem !important;
    padding: 0 0 .48rem !important;
  }

  .container-header .container-nav nav.navbar[aria-label="Main Menu"] .mod-menu > li::after,
  .container-header .container-nav nav.navbar[aria-label="Main Menu"] .navbar-nav > li::after {
    content: "";
    position: absolute;
    left: 3.25rem;
    right: .75rem;
    bottom: 0;
    height: 4px;
    border-radius: 999px;
    background: var(--dampierre-bleu, #2d318f);
  }

  .container-header .container-nav nav.navbar[aria-label="Main Menu"] .mod-menu > li > a,
  .container-header .container-nav nav.navbar[aria-label="Main Menu"] .navbar-nav > li > a,
  .container-header .container-nav nav.navbar[aria-label="Main Menu"] .nav-link {
    display: flex !important;
    align-items: center;
    gap: .55rem;
    width: 100%;
    padding: .62rem .45rem !important;
    color: var(--dampierre-bleu-nuit) !important;
    background: #fff !important;
    border: 0 !important;
    border-radius: 9px;
    font-size: .96rem !important;
    font-weight: 800 !important;
    line-height: 1.2;
    text-decoration: none !important;
    box-shadow: none !important;
  }

  .container-header .container-nav nav.navbar[aria-label="Main Menu"] a::before,
  .container-header .container-nav nav.navbar[aria-label="Main Menu"] .nav-link::before {
    content: "\f0da";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    width: 1.3rem;
    color: var(--dampierre-bleu);
    text-align: center;
  }

  .container-header .container-nav nav.navbar[aria-label="Main Menu"] a[href*="accueil"]::before,
  .container-header .container-nav nav.navbar[aria-label="Main Menu"] .item-101 > a::before {
    content: "\f015";
  }

  .container-header .container-nav nav.navbar[aria-label="Main Menu"] a[href*="lycee"]::before,
  .container-header .container-nav nav.navbar[aria-label="Main Menu"] a[href*="lycée"]::before {
    content: "\f549";
  }

  .container-header .container-nav nav.navbar[aria-label="Main Menu"] a[href*="centre"]::before,
  .container-header .container-nav nav.navbar[aria-label="Main Menu"] a[href*="formation"]::before {
    content: "\f19d";
  }

  .container-header .container-nav nav.navbar[aria-label="Main Menu"] a[href*="contact"]::before {
    content: "\f095";
  }

  .container-header .container-nav nav.navbar[aria-label="Main Menu"] a[href*="1926"]::before {
    content: "\f1da";
  }

  .container-header .container-nav nav.navbar[aria-label="Main Menu"] .mod-menu > li > a:hover,
  .container-header .container-nav nav.navbar[aria-label="Main Menu"] .navbar-nav > li > a:hover,
  .container-header .container-nav nav.navbar[aria-label="Main Menu"] .nav-link:hover {
    background: #f8f9fc !important;
    color: var(--dampierre-fuchsia, #e5007d) !important;
    text-decoration: none !important;
  }

  /* Accueil */
  .container-header .container-nav nav.navbar[aria-label="Main Menu"] li:has(a[href*="accueil"])::after,
  .container-header .container-nav nav.navbar[aria-label="Main Menu"] .mod-menu > li:nth-child(1)::after,
  .container-header .container-nav nav.navbar[aria-label="Main Menu"] .navbar-nav > li:nth-child(1)::after {
    background: var(--dampierre-bleu, #2d318f);
  }

  .container-header .container-nav nav.navbar[aria-label="Main Menu"] li:has(a[href*="accueil"]) a::before,
  .container-header .container-nav nav.navbar[aria-label="Main Menu"] .mod-menu > li:nth-child(1) a::before,
  .container-header .container-nav nav.navbar[aria-label="Main Menu"] .navbar-nav > li:nth-child(1) a::before {
    color: var(--dampierre-bleu, #2d318f);
  }

  /* Lycée */
  .container-header .container-nav nav.navbar[aria-label="Main Menu"] li:has(a[href*="lycee"])::after,
  .container-header .container-nav nav.navbar[aria-label="Main Menu"] li:has(a[href*="lycée"])::after,
  .container-header .container-nav nav.navbar[aria-label="Main Menu"] .mod-menu > li:nth-child(2)::after,
  .container-header .container-nav nav.navbar[aria-label="Main Menu"] .navbar-nav > li:nth-child(2)::after {
    background: var(--dampierre-bleu-clair, #2c7bc6);
  }

  .container-header .container-nav nav.navbar[aria-label="Main Menu"] li:has(a[href*="lycee"]) a::before,
  .container-header .container-nav nav.navbar[aria-label="Main Menu"] li:has(a[href*="lycée"]) a::before,
  .container-header .container-nav nav.navbar[aria-label="Main Menu"] .mod-menu > li:nth-child(2) a::before,
  .container-header .container-nav nav.navbar[aria-label="Main Menu"] .navbar-nav > li:nth-child(2) a::before {
    color: var(--dampierre-bleu-clair, #2c7bc6);
  }

  /* Centre */
  .container-header .container-nav nav.navbar[aria-label="Main Menu"] li:has(a[href*="centre"])::after,
  .container-header .container-nav nav.navbar[aria-label="Main Menu"] li:has(a[href*="formation"])::after,
  .container-header .container-nav nav.navbar[aria-label="Main Menu"] .mod-menu > li:nth-child(3)::after,
  .container-header .container-nav nav.navbar[aria-label="Main Menu"] .navbar-nav > li:nth-child(3)::after {
    background: var(--dampierre-fuchsia, #e5007d);
  }

  .container-header .container-nav nav.navbar[aria-label="Main Menu"] li:has(a[href*="centre"]) a::before,
  .container-header .container-nav nav.navbar[aria-label="Main Menu"] li:has(a[href*="formation"]) a::before,
  .container-header .container-nav nav.navbar[aria-label="Main Menu"] .mod-menu > li:nth-child(3) a::before,
  .container-header .container-nav nav.navbar[aria-label="Main Menu"] .navbar-nav > li:nth-child(3) a::before {
    color: var(--dampierre-fuchsia, #e5007d);
  }

  /* Contacts */
  .container-header .container-nav nav.navbar[aria-label="Main Menu"] li:has(a[href*="contact"])::after,
  .container-header .container-nav nav.navbar[aria-label="Main Menu"] .mod-menu > li:nth-child(4)::after,
  .container-header .container-nav nav.navbar[aria-label="Main Menu"] .navbar-nav > li:nth-child(4)::after {
    background: #0f8b8d;
  }

  .container-header .container-nav nav.navbar[aria-label="Main Menu"] li:has(a[href*="contact"]) a::before,
  .container-header .container-nav nav.navbar[aria-label="Main Menu"] .mod-menu > li:nth-child(4) a::before,
  .container-header .container-nav nav.navbar[aria-label="Main Menu"] .navbar-nav > li:nth-child(4) a::before {
    color: #0f8b8d;
  }

  /* Le 1926 */
  .container-header .container-nav nav.navbar[aria-label="Main Menu"] li:has(a[href*="1926"])::after,
  .container-header .container-nav nav.navbar[aria-label="Main Menu"] .mod-menu > li:nth-child(5)::after,
  .container-header .container-nav nav.navbar[aria-label="Main Menu"] .navbar-nav > li:nth-child(5)::after {
    background: var(--dampierre-or, #d7b85b) !important;
  }

  .container-header .container-nav nav.navbar[aria-label="Main Menu"] li:has(a[href*="1926"]) a::before,
  .container-header .container-nav nav.navbar[aria-label="Main Menu"] .mod-menu > li:nth-child(5) a::before,
  .container-header .container-nav nav.navbar[aria-label="Main Menu"] .navbar-nav > li:nth-child(5) a::before {
    color: var(--dampierre-or, #d7b85b) !important;
  }
}

/* =========================================================
   19 - MENU RESPONSIVE DAMPIERRE v5.2 FINAL
   ---------------------------------------------------------
   Correctifs desktop :
   - texte toujours blanc
   - suppression des soulignements hérités Bootstrap/Cassiopeia
   - une seule barre colorée Dampierre
   - barre centrée, largeur du texte
   - animation douce au survol / actif

   Mobile :
   - conserve le rendu compact validé
   ========================================================= */

/* =========================================================
   19.1 - DESKTOP : UNE SEULE BARRE, TEXTE BLANC
   ========================================================= */

@media (min-width: 992px) {

  /* Texte toujours blanc */
  .container-header .container-nav nav.navbar[aria-label="Main Menu"] .mod-menu > li > a,
  .container-header .container-nav nav.navbar[aria-label="Main Menu"] .navbar-nav > li > a,
  .container-header .container-nav nav.navbar[aria-label="Main Menu"] .nav-link,
  .container-header .container-nav nav.navbar[aria-label="Main Menu"] .mod-menu > li > a:hover,
  .container-header .container-nav nav.navbar[aria-label="Main Menu"] .navbar-nav > li > a:hover,
  .container-header .container-nav nav.navbar[aria-label="Main Menu"] .nav-link:hover,
  .container-header .container-nav nav.navbar[aria-label="Main Menu"] .mod-menu > li > a:focus,
  .container-header .container-nav nav.navbar[aria-label="Main Menu"] .navbar-nav > li > a:focus,
  .container-header .container-nav nav.navbar[aria-label="Main Menu"] .nav-link:focus,
  .container-header .container-nav nav.navbar[aria-label="Main Menu"] .active > a,
  .container-header .container-nav nav.navbar[aria-label="Main Menu"] .current > a,
  .container-header .container-nav nav.navbar[aria-label="Main Menu"] .active > .nav-link,
  .container-header .container-nav nav.navbar[aria-label="Main Menu"] .current > .nav-link {
    color: var(--dampierre-blanc, #fff) !important;
    background: transparent !important;
    text-decoration: none !important;
  }

  /* Suppression des soulignements / décorations hérités du template */
  .container-header .container-nav nav.navbar[aria-label="Main Menu"] a::after,
  .container-header .container-nav nav.navbar[aria-label="Main Menu"] .nav-link::after,
  .container-header .container-nav nav.navbar[aria-label="Main Menu"] .active > a::after,
  .container-header .container-nav nav.navbar[aria-label="Main Menu"] .current > a::after,
  .container-header .container-nav nav.navbar[aria-label="Main Menu"] .active > .nav-link::after,
  .container-header .container-nav nav.navbar[aria-label="Main Menu"] .current > .nav-link::after {
    display: none !important;
    content: none !important;
  }

  /* Base de chaque entrée */
  .container-header .container-nav nav.navbar[aria-label="Main Menu"] .mod-menu > li,
  .container-header .container-nav nav.navbar[aria-label="Main Menu"] .navbar-nav > li {
    position: relative;
    display: inline-flex !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 .15rem .55rem !important;
  }

  /* Notre seule barre colorée */
  .container-header .container-nav nav.navbar[aria-label="Main Menu"] .mod-menu > li::after,
  .container-header .container-nav nav.navbar[aria-label="Main Menu"] .navbar-nav > li::after {
    content: "";
    position: absolute;
    left: .75rem;
    right: .75rem;
    bottom: .15rem;
    height: 3px;
    border-radius: 999px;
    background: var(--dampierre-bleu, #2d318f);
    transform: scaleX(.55);
    transform-origin: center;
    opacity: .85;
    transition:
      transform .22s ease,
      opacity .22s ease,
      background-color .22s ease;
  }

  .container-header .container-nav nav.navbar[aria-label="Main Menu"] .mod-menu > li:hover::after,
  .container-header .container-nav nav.navbar[aria-label="Main Menu"] .navbar-nav > li:hover::after,
  .container-header .container-nav nav.navbar[aria-label="Main Menu"] .mod-menu > li.active::after,
  .container-header .container-nav nav.navbar[aria-label="Main Menu"] .mod-menu > li.current::after,
  .container-header .container-nav nav.navbar[aria-label="Main Menu"] .navbar-nav > li.active::after,
  .container-header .container-nav nav.navbar[aria-label="Main Menu"] .navbar-nav > li.current::after {
    transform: scaleX(1);
    opacity: 1;
  }

  /* Accueil : bleu foncé */
  .container-header .container-nav nav.navbar[aria-label="Main Menu"] li:has(a[href*="accueil"])::after,
  .container-header .container-nav nav.navbar[aria-label="Main Menu"] .mod-menu > li:nth-child(1)::after,
  .container-header .container-nav nav.navbar[aria-label="Main Menu"] .navbar-nav > li:nth-child(1)::after {
    background: var(--dampierre-bleu, #2d318f) !important;
  }

  /* Lycée : bleu clair */
  .container-header .container-nav nav.navbar[aria-label="Main Menu"] li:has(a[href*="lycee"])::after,
  .container-header .container-nav nav.navbar[aria-label="Main Menu"] li:has(a[href*="lycée"])::after,
  .container-header .container-nav nav.navbar[aria-label="Main Menu"] .mod-menu > li:nth-child(2)::after,
  .container-header .container-nav nav.navbar[aria-label="Main Menu"] .navbar-nav > li:nth-child(2)::after {
    background: var(--dampierre-bleu-clair, #2c7bc6) !important;
  }

  /* Centre : fuchsia */
  .container-header .container-nav nav.navbar[aria-label="Main Menu"] li:has(a[href*="centre"])::after,
  .container-header .container-nav nav.navbar[aria-label="Main Menu"] li:has(a[href*="formation"])::after,
  .container-header .container-nav nav.navbar[aria-label="Main Menu"] .mod-menu > li:nth-child(3)::after,
  .container-header .container-nav nav.navbar[aria-label="Main Menu"] .navbar-nav > li:nth-child(3)::after {
    background: var(--dampierre-fuchsia, #e5007d) !important;
  }

  /* Contacts : bleu-vert */
  .container-header .container-nav nav.navbar[aria-label="Main Menu"] li:has(a[href*="contact"])::after,
  .container-header .container-nav nav.navbar[aria-label="Main Menu"] .mod-menu > li:nth-child(4)::after,
  .container-header .container-nav nav.navbar[aria-label="Main Menu"] .navbar-nav > li:nth-child(4)::after {
    background: #0f8b8d !important;
  }

  /* Le 1926 : or */
  .container-header .container-nav nav.navbar[aria-label="Main Menu"] li:has(a[href*="1926"])::after,
  .container-header .container-nav nav.navbar[aria-label="Main Menu"] .mod-menu > li:nth-child(5)::after,
  .container-header .container-nav nav.navbar[aria-label="Main Menu"] .navbar-nav > li:nth-child(5)::after {
    background: var(--dampierre-or, #d7b85b) !important;
  }
}

/* =========================================================
   20 - MENU RESPONSIVE DAMPIERRE v5.3 FINAL
   ---------------------------------------------------------
   Finition premium desktop :
   - barre toujours pleine largeur
   - au repos : fine et discrète
   - au survol / actif : plus lumineuse
   - texte toujours blanc
   - fonctionne même avec un libellé long comme "Le Centre de formation"

   Mobile :
   - conserve le menu compact validé
   ========================================================= */

@media (min-width: 992px) {

  /* Texte toujours blanc */
  .container-header .container-nav nav.navbar[aria-label="Main Menu"] .mod-menu > li > a,
  .container-header .container-nav nav.navbar[aria-label="Main Menu"] .navbar-nav > li > a,
  .container-header .container-nav nav.navbar[aria-label="Main Menu"] .nav-link,
  .container-header .container-nav nav.navbar[aria-label="Main Menu"] .mod-menu > li > a:hover,
  .container-header .container-nav nav.navbar[aria-label="Main Menu"] .navbar-nav > li > a:hover,
  .container-header .container-nav nav.navbar[aria-label="Main Menu"] .nav-link:hover,
  .container-header .container-nav nav.navbar[aria-label="Main Menu"] .mod-menu > li > a:focus,
  .container-header .container-nav nav.navbar[aria-label="Main Menu"] .navbar-nav > li > a:focus,
  .container-header .container-nav nav.navbar[aria-label="Main Menu"] .nav-link:focus,
  .container-header .container-nav nav.navbar[aria-label="Main Menu"] .active > a,
  .container-header .container-nav nav.navbar[aria-label="Main Menu"] .current > a,
  .container-header .container-nav nav.navbar[aria-label="Main Menu"] .active > .nav-link,
  .container-header .container-nav nav.navbar[aria-label="Main Menu"] .current > .nav-link {
    color: var(--dampierre-blanc, #fff) !important;
    background: transparent !important;
    text-decoration: none !important;
  }

  /* Neutralise les décorations héritées */
  .container-header .container-nav nav.navbar[aria-label="Main Menu"] a::after,
  .container-header .container-nav nav.navbar[aria-label="Main Menu"] .nav-link::after,
  .container-header .container-nav nav.navbar[aria-label="Main Menu"] .active > a::after,
  .container-header .container-nav nav.navbar[aria-label="Main Menu"] .current > a::after,
  .container-header .container-nav nav.navbar[aria-label="Main Menu"] .active > .nav-link::after,
  .container-header .container-nav nav.navbar[aria-label="Main Menu"] .current > .nav-link::after {
    display: none !important;
    content: none !important;
  }

  /* Entrée de menu */
  .container-header .container-nav nav.navbar[aria-label="Main Menu"] .mod-menu > li,
  .container-header .container-nav nav.navbar[aria-label="Main Menu"] .navbar-nav > li {
    position: relative;
    display: inline-flex !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 .15rem .58rem !important;
  }

  /* Barre unique : pleine largeur, fine au repos */
  .container-header .container-nav nav.navbar[aria-label="Main Menu"] .mod-menu > li::after,
  .container-header .container-nav nav.navbar[aria-label="Main Menu"] .navbar-nav > li::after {
    content: "";
    position: absolute;
    left: .75rem;
    right: .75rem;
    bottom: .15rem;
    height: 2px;
    border-radius: 999px;
    background: var(--dampierre-bleu, #2d318f);
    opacity: .78;
    transform: none !important;
    box-shadow: none;
    transition:
      height .18s ease,
      opacity .18s ease,
      box-shadow .18s ease,
      background-color .18s ease;
  }

  /* Effet "barre qui s'allume" */
  .container-header .container-nav nav.navbar[aria-label="Main Menu"] .mod-menu > li:hover::after,
  .container-header .container-nav nav.navbar[aria-label="Main Menu"] .navbar-nav > li:hover::after,
  .container-header .container-nav nav.navbar[aria-label="Main Menu"] .mod-menu > li.active::after,
  .container-header .container-nav nav.navbar[aria-label="Main Menu"] .mod-menu > li.current::after,
  .container-header .container-nav nav.navbar[aria-label="Main Menu"] .navbar-nav > li.active::after,
  .container-header .container-nav nav.navbar[aria-label="Main Menu"] .navbar-nav > li.current::after {
    height: 4px;
    opacity: 1;
    box-shadow: 0 0 10px currentColor;
  }

  /* Accueil : bleu foncé */
  .container-header .container-nav nav.navbar[aria-label="Main Menu"] li:has(a[href*="accueil"])::after,
  .container-header .container-nav nav.navbar[aria-label="Main Menu"] .mod-menu > li:nth-child(1)::after,
  .container-header .container-nav nav.navbar[aria-label="Main Menu"] .navbar-nav > li:nth-child(1)::after {
    background: var(--dampierre-bleu, #2d318f) !important;
    color: var(--dampierre-bleu, #2d318f);
  }

  /* Lycée : bleu clair */
  .container-header .container-nav nav.navbar[aria-label="Main Menu"] li:has(a[href*="lycee"])::after,
  .container-header .container-nav nav.navbar[aria-label="Main Menu"] li:has(a[href*="lycée"])::after,
  .container-header .container-nav nav.navbar[aria-label="Main Menu"] .mod-menu > li:nth-child(2)::after,
  .container-header .container-nav nav.navbar[aria-label="Main Menu"] .navbar-nav > li:nth-child(2)::after {
    background: var(--dampierre-bleu-clair, #2c7bc6) !important;
    color: var(--dampierre-bleu-clair, #2c7bc6);
  }

  /* Centre : fuchsia */
  .container-header .container-nav nav.navbar[aria-label="Main Menu"] li:has(a[href*="centre"])::after,
  .container-header .container-nav nav.navbar[aria-label="Main Menu"] li:has(a[href*="formation"])::after,
  .container-header .container-nav nav.navbar[aria-label="Main Menu"] .mod-menu > li:nth-child(3)::after,
  .container-header .container-nav nav.navbar[aria-label="Main Menu"] .navbar-nav > li:nth-child(3)::after {
    background: var(--dampierre-fuchsia, #e5007d) !important;
    color: var(--dampierre-fuchsia, #e5007d);
  }

  /* Contacts : bleu-vert */
  .container-header .container-nav nav.navbar[aria-label="Main Menu"] li:has(a[href*="contact"])::after,
  .container-header .container-nav nav.navbar[aria-label="Main Menu"] .mod-menu > li:nth-child(4)::after,
  .container-header .container-nav nav.navbar[aria-label="Main Menu"] .navbar-nav > li:nth-child(4)::after {
    background: #0f8b8d !important;
    color: #0f8b8d;
  }

  /* Le 1926 : or */
  .container-header .container-nav nav.navbar[aria-label="Main Menu"] li:has(a[href*="1926"])::after,
  .container-header .container-nav nav.navbar[aria-label="Main Menu"] .mod-menu > li:nth-child(5)::after,
  .container-header .container-nav nav.navbar[aria-label="Main Menu"] .navbar-nav > li:nth-child(5)::after {
    background: var(--dampierre-or, #d7b85b) !important;
    color: var(--dampierre-or, #d7b85b);
  }
}

/* =========================================================
   21 - MENU RESPONSIVE DAMPIERRE v5.4 FINAL
   ---------------------------------------------------------
   Correction :
   - l'élément actif ne force plus la barre en 4px
   - toutes les barres desktop restent fines au repos
   - seule la barre survolée s'épaissit
   - corrige le cas "Le Centre de formation" déjà épais
   ========================================================= */

@media (min-width: 992px) {

  /* État normal ET actif : barre fine */
  .container-header .container-nav nav.navbar[aria-label="Main Menu"] .mod-menu > li::after,
  .container-header .container-nav nav.navbar[aria-label="Main Menu"] .navbar-nav > li::after,
  .container-header .container-nav nav.navbar[aria-label="Main Menu"] .mod-menu > li.active::after,
  .container-header .container-nav nav.navbar[aria-label="Main Menu"] .mod-menu > li.current::after,
  .container-header .container-nav nav.navbar[aria-label="Main Menu"] .navbar-nav > li.active::after,
  .container-header .container-nav nav.navbar[aria-label="Main Menu"] .navbar-nav > li.current::after {
    height: 2px !important;
    opacity: .82 !important;
    box-shadow: none !important;
  }

  /* Seul le survol épaissit la barre */
  .container-header .container-nav nav.navbar[aria-label="Main Menu"] .mod-menu > li:hover::after,
  .container-header .container-nav nav.navbar[aria-label="Main Menu"] .navbar-nav > li:hover::after {
    height: 4px !important;
    opacity: 1 !important;
    box-shadow: 0 0 10px currentColor !important;
  }

  /* Texte toujours blanc, y compris actif */
  .container-header .container-nav nav.navbar[aria-label="Main Menu"] .active > a,
  .container-header .container-nav nav.navbar[aria-label="Main Menu"] .current > a,
  .container-header .container-nav nav.navbar[aria-label="Main Menu"] .active > .nav-link,
  .container-header .container-nav nav.navbar[aria-label="Main Menu"] .current > .nav-link {
    color: var(--dampierre-blanc, #fff) !important;
    background: transparent !important;
    text-decoration: none !important;
  }
}

/* =========================================================
   22 - MENU RESPONSIVE DAMPIERRE v5.5 FINAL
   ---------------------------------------------------------
   Même effet premium sur le menu hamburger mobile :
   - ligne fine au repos
   - ligne légèrement plus marquée sur l'entrée active
   - ligne lumineuse au survol / focus / toucher
   - texte conservé en bleu nuit dans le panneau blanc
   ========================================================= */

@media (max-width: 991px) {

  /* Barre mobile au repos */
  .container-header .container-nav nav.navbar[aria-label="Main Menu"] .mod-menu > li::after,
  .container-header .container-nav nav.navbar[aria-label="Main Menu"] .navbar-nav > li::after {
    height: 2px !important;
    opacity: .82 !important;
    box-shadow: none !important;
    transition:
      height .18s ease,
      opacity .18s ease,
      box-shadow .18s ease,
      background-color .18s ease;
  }

  /* Entrée active : légèrement plus marquée, mais sans lueur */
  .container-header .container-nav nav.navbar[aria-label="Main Menu"] .mod-menu > li.active::after,
  .container-header .container-nav nav.navbar[aria-label="Main Menu"] .mod-menu > li.current::after,
  .container-header .container-nav nav.navbar[aria-label="Main Menu"] .navbar-nav > li.active::after,
  .container-header .container-nav nav.navbar[aria-label="Main Menu"] .navbar-nav > li.current::after {
    height: 3px !important;
    opacity: 1 !important;
    box-shadow: none !important;
  }

  /* Survol / focus / toucher : effet lumineux */
  .container-header .container-nav nav.navbar[aria-label="Main Menu"] .mod-menu > li:hover::after,
  .container-header .container-nav nav.navbar[aria-label="Main Menu"] .mod-menu > li:focus-within::after,
  .container-header .container-nav nav.navbar[aria-label="Main Menu"] .navbar-nav > li:hover::after,
  .container-header .container-nav nav.navbar[aria-label="Main Menu"] .navbar-nav > li:focus-within::after {
    height: 4px !important;
    opacity: 1 !important;
    box-shadow: 0 0 10px currentColor !important;
  }

  /* Texte mobile : stable, pas de changement agressif */
  .container-header .container-nav nav.navbar[aria-label="Main Menu"] .mod-menu > li > a,
  .container-header .container-nav nav.navbar[aria-label="Main Menu"] .navbar-nav > li > a,
  .container-header .container-nav nav.navbar[aria-label="Main Menu"] .nav-link {
    color: var(--dampierre-bleu-nuit, #252a7f) !important;
  }

  .container-header .container-nav nav.navbar[aria-label="Main Menu"] .mod-menu > li > a:hover,
  .container-header .container-nav nav.navbar[aria-label="Main Menu"] .navbar-nav > li > a:hover,
  .container-header .container-nav nav.navbar[aria-label="Main Menu"] .nav-link:hover,
  .container-header .container-nav nav.navbar[aria-label="Main Menu"] .mod-menu > li > a:focus,
  .container-header .container-nav nav.navbar[aria-label="Main Menu"] .navbar-nav > li > a:focus,
  .container-header .container-nav nav.navbar[aria-label="Main Menu"] .nav-link:focus {
    color: var(--dampierre-bleu-nuit, #252a7f) !important;
    background: #f8f9fc !important;
    text-decoration: none !important;
  }
}


/* =========================================================
   23 - V5.6 UX
   Toute la ligne est réellement cliquable
   ========================================================= */

@media (min-width:992px){

  .container-header .container-nav nav.navbar[aria-label="Main Menu"] .mod-menu>li>a,
  .container-header .container-nav nav.navbar[aria-label="Main Menu"] .navbar-nav>li>a,
  .container-header .container-nav nav.navbar[aria-label="Main Menu"] .nav-link{
      position:relative;
      display:flex !important;
      align-items:center;
      padding:.60rem .85rem .95rem .85rem !important;
      cursor:pointer;
  }

  /* La barre appartient visuellement au lien */
  .container-header .container-nav nav.navbar[aria-label="Main Menu"] .mod-menu>li::after,
  .container-header .container-nav nav.navbar[aria-label="Main Menu"] .navbar-nav>li::after{
      bottom:.45rem !important;
      pointer-events:none !important;
  }
}

@media (max-width:991px){

  .container-header .container-nav nav.navbar[aria-label="Main Menu"] .mod-menu>li>a,
  .container-header .container-nav nav.navbar[aria-label="Main Menu"] .navbar-nav>li>a,
  .container-header .container-nav nav.navbar[aria-label="Main Menu"] .nav-link{
      position:relative;
      display:flex !important;
      align-items:center;
      padding:.70rem .55rem .95rem .55rem !important;
      cursor:pointer;
  }

  .container-header .container-nav nav.navbar[aria-label="Main Menu"] .mod-menu>li::after,
  .container-header .container-nav nav.navbar[aria-label="Main Menu"] .navbar-nav>li::after{
      bottom:.38rem !important;
      pointer-events:none !important;
  }
}

/* =========================================================
   24 - MENU RESPONSIVE DAMPIERRE v5.7 FINAL
   Correction focus / bouton appuyé
   ---------------------------------------------------------
   Objectif :
   - supprimer le cadre Bootstrap disgracieux au clic/focus ;
   - conserver une accessibilité propre via une lueur discrète ;
   - garder uniquement la barre colorée comme repère visuel principal.
   ========================================================= */

.container-header .container-nav nav.navbar[aria-label="Main Menu"] a:focus,
.container-header .container-nav nav.navbar[aria-label="Main Menu"] a:active,
.container-header .container-nav nav.navbar[aria-label="Main Menu"] .nav-link:focus,
.container-header .container-nav nav.navbar[aria-label="Main Menu"] .nav-link:active,
.container-header .container-nav nav.navbar[aria-label="Main Menu"] .mod-menu > li > a:focus,
.container-header .container-nav nav.navbar[aria-label="Main Menu"] .mod-menu > li > a:active {
  outline: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

/* Focus clavier : discret, sans cadre dur */
.container-header .container-nav nav.navbar[aria-label="Main Menu"] a:focus-visible,
.container-header .container-nav nav.navbar[aria-label="Main Menu"] .nav-link:focus-visible,
.container-header .container-nav nav.navbar[aria-label="Main Menu"] .mod-menu > li > a:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(255,255,255,.18) !important;
  border-radius: 8px;
}

/* Dans le panneau mobile blanc, la lueur doit rester douce */
@media (max-width: 991px) {
  .container-header .container-nav nav.navbar[aria-label="Main Menu"] a:focus-visible,
  .container-header .container-nav nav.navbar[aria-label="Main Menu"] .nav-link:focus-visible,
  .container-header .container-nav nav.navbar[aria-label="Main Menu"] .mod-menu > li > a:focus-visible {
    box-shadow: 0 0 0 3px rgba(45,49,143,.12) !important;
    border-radius: 8px;
  }
}

/* =========================================================
   25 - MODULES DAMPIERRE UI v1.1 SOBRE BLEU
   ---------------------------------------------------------
   Règle retenue :
   - Le bleu nuit structure les modules.
   - La couleur de famille devient un accent discret.
   - Le fuchsia n'envahit plus les modules Centre.

   Logique Joomla :
   classe métier + classe famille

   Exemples :
   module-hotellerie-restauration module-centre
   module-vie-scolaire module-lycee
   module-contacts module-contact
   module-histoire module-1926
   ========================================================= */


/* =========================================================
   25.1 - Familles graphiques
   ========================================================= */

.module-institution {
  --module-accent: var(--dampierre-bleu, #2d318f);
  --module-icon: "\f19c";
}

.module-lycee,
.module-lycée {
  --module-accent: var(--dampierre-bleu-clair, #2c7bc6);
  --module-icon: "\f549";
}

.module-centre {
  --module-accent: var(--dampierre-fuchsia, #e5007d);
  --module-icon: "\f19d";
}

.module-contact,
.module-contacts {
  --module-accent: #0f8b8d;
  --module-icon: "\f095";
}

.module-1926 {
  --module-accent: var(--dampierre-or, #d7b85b);
  --module-icon: "\f1da";
}


/* =========================================================
   25.2 - Icônes métiers
   ========================================================= */

.module-nos-formations { --module-icon: "\f5da"; }
.module-vie-scolaire { --module-icon: "\f19d"; }
.module-infos-pratiques { --module-icon: "\f05a"; }
.module-voir-aussi { --module-icon: "\f0c1"; }
.module-notre-reseau { --module-icon: "\f1e0"; }
.module-certification-qualiopi { --module-icon: "\f5a2"; }
.module-nous-situer { --module-icon: "\f3c5"; }
.module-batiment { --module-icon: "\f1ad"; }
.module-industrie { --module-icon: "\f275"; }
.module-informatique { --module-icon: "\f109"; }
.module-hotellerie-restauration { --module-icon: "\f2e7"; }
.module-tertiaire { --module-icon: "\f0c0"; }
.module-bts-superieur { --module-icon: "\f501"; }


/* =========================================================
   25.3 - Base visuelle
   ========================================================= */

.moduletable.module-institution,
.moduletable.module-lycee,
.moduletable.module-centre,
.moduletable.module-contact,
.moduletable.module-1926,
.card.module-institution,
.card.module-lycee,
.card.module-centre,
.card.module-contact,
.card.module-1926 {
  --module-main: var(--dampierre-bleu-nuit, #252a7f);

  overflow: hidden;
  position: relative;
  background: #ffffff !important;
  border: 1px solid rgba(37, 42, 127, .14) !important;
  border-left: 6px solid var(--module-accent) !important;
  border-radius: var(--rayon-module, 18px) !important;
  box-shadow: var(--ombre-module, 0 6px 18px rgba(37, 42, 127, .08)) !important;
  transition:
    transform .22s ease,
    box-shadow .22s ease,
    border-color .22s ease;
}

.moduletable.module-institution:hover,
.moduletable.module-lycee:hover,
.moduletable.module-centre:hover,
.moduletable.module-contact:hover,
.moduletable.module-1926:hover,
.card.module-institution:hover,
.card.module-lycee:hover,
.card.module-centre:hover,
.card.module-contact:hover,
.card.module-1926:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(37, 42, 127, .14) !important;
}


/* =========================================================
   25.4 - Titre sobre
   ========================================================= */

.moduletable.module-institution > h3,
.moduletable.module-lycee > h3,
.moduletable.module-centre > h3,
.moduletable.module-contact > h3,
.moduletable.module-1926 > h3,
.card.module-institution .card-header,
.card.module-lycee .card-header,
.card.module-centre .card-header,
.card.module-contact .card-header,
.card.module-1926 .card-header {
  position: relative;
  display: flex;
  align-items: center;
  gap: .75rem;
  margin: 0 !important;
  padding: 1rem 1.15rem .9rem !important;
  color: var(--module-main) !important;
  background: #ffffff !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(37, 42, 127, .10) !important;
  font-size: 1.18rem;
  font-weight: 850;
  line-height: 1.25;
  letter-spacing: .01em;
}

/* Ligne d'accent sous le titre */
.moduletable.module-institution > h3::after,
.moduletable.module-lycee > h3::after,
.moduletable.module-centre > h3::after,
.moduletable.module-contact > h3::after,
.moduletable.module-1926 > h3::after,
.card.module-institution .card-header::after,
.card.module-lycee .card-header::after,
.card.module-centre .card-header::after,
.card.module-contact .card-header::after,
.card.module-1926 .card-header::after {
  content: "";
  position: absolute;
  left: 4.25rem;
  right: 1.15rem;
  bottom: .45rem;
  height: 3px;
  background: var(--module-accent);
  border-radius: 999px;
  opacity: .95;
}

/* Icône : bleu nuit, avec petite pastille d'accent */
.moduletable.module-institution > h3::before,
.moduletable.module-lycee > h3::before,
.moduletable.module-centre > h3::before,
.moduletable.module-contact > h3::before,
.moduletable.module-1926 > h3::before,
.card.module-institution .card-header::before,
.card.module-lycee .card-header::before,
.card.module-centre .card-header::before,
.card.module-contact .card-header::before,
.card.module-1926 .card-header::before {
  content: var(--module-icon, "\f05a");
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.35rem;
  height: 2.35rem;
  flex: 0 0 2.35rem;
  color: #ffffff !important;
  background:
    linear-gradient(135deg, var(--module-main), var(--module-accent));
  border-radius: 999px;
  font-size: .98rem;
  box-shadow: 0 5px 14px rgba(37, 42, 127, .12);
}


/* =========================================================
   25.5 - Corps
   ========================================================= */

.moduletable.module-institution,
.moduletable.module-lycee,
.moduletable.module-centre,
.moduletable.module-contact,
.moduletable.module-1926 {
  padding: 0 !important;
}

.card.module-institution .card-body,
.card.module-lycee .card-body,
.card.module-centre .card-body,
.card.module-contact .card-body,
.card.module-1926 .card-body {
  padding: 1rem 1.15rem !important;
}

.moduletable.module-institution > *:not(h3),
.moduletable.module-lycee > *:not(h3),
.moduletable.module-centre > *:not(h3),
.moduletable.module-contact > *:not(h3),
.moduletable.module-1926 > *:not(h3) {
  padding-left: 1.15rem;
  padding-right: 1.15rem;
}

.moduletable.module-institution > *:last-child,
.moduletable.module-lycee > *:last-child,
.moduletable.module-centre > *:last-child,
.moduletable.module-contact > *:last-child,
.moduletable.module-1926 > *:last-child {
  padding-bottom: 1rem;
}

/* Liens : bleu nuit par défaut, accent au survol */
.moduletable.module-institution a,
.moduletable.module-lycee a,
.moduletable.module-centre a,
.moduletable.module-contact a,
.moduletable.module-1926 a,
.card.module-institution a,
.card.module-lycee a,
.card.module-centre a,
.card.module-contact a,
.card.module-1926 a {
  color: var(--module-main) !important;
  font-weight: 700;
  text-decoration: none !important;
}

.moduletable.module-institution a:hover,
.moduletable.module-lycee a:hover,
.moduletable.module-centre a:hover,
.moduletable.module-contact a:hover,
.moduletable.module-1926 a:hover,
.card.module-institution a:hover,
.card.module-lycee a:hover,
.card.module-centre a:hover,
.card.module-contact a:hover,
.card.module-1926 a:hover {
  color: var(--module-accent) !important;
  text-decoration: underline !important;
}

/* Listes */
.moduletable.module-institution ul,
.moduletable.module-lycee ul,
.moduletable.module-centre ul,
.moduletable.module-contact ul,
.moduletable.module-1926 ul,
.card.module-institution ul,
.card.module-lycee ul,
.card.module-centre ul,
.card.module-contact ul,
.card.module-1926 ul {
  margin-top: .45rem;
  margin-bottom: .45rem;
  padding-left: 1.2rem;
}

.moduletable.module-institution li,
.moduletable.module-lycee li,
.moduletable.module-centre li,
.moduletable.module-contact li,
.moduletable.module-1926 li,
.card.module-institution li,
.card.module-lycee li,
.card.module-centre li,
.card.module-contact li,
.card.module-1926 li {
  margin-top: .25rem;
  margin-bottom: .25rem;
}


/* =========================================================
   25.6 - Aide-mémoire
   =========================================================

   module-vie-scolaire module-lycee
   module-hotellerie-restauration module-centre
   module-contacts module-contact
   module-histoire module-1926
   module-decouvrir module-institution

   ========================================================= */

/* =========================================================
   26 - DAMPIERRE UI v6.4
   Finition modules + boutons accueil
   ---------------------------------------------------------
   Décision :
   - modules : bleu nuit en structure
   - familles : couleur uniquement en accent
   - centre : fuchsia en accent, plus en couleur dominante
   - boutons accueil : contraste conservé, rendu plus fin
   ========================================================= */


/* =========================================================
   26.1 - Modules : titre et icône toujours bleu nuit
   ========================================================= */

.moduletable.module-institution > h3,
.moduletable.module-lycee > h3,
.moduletable.module-centre > h3,
.moduletable.module-contact > h3,
.moduletable.module-1926 > h3,
.card.module-institution .card-header,
.card.module-lycee .card-header,
.card.module-centre .card-header,
.card.module-contact .card-header,
.card.module-1926 .card-header {
  color: var(--dampierre-bleu-nuit, #252a7f) !important;
}

/* Icône toujours structurée en bleu nuit */
.moduletable.module-institution > h3::before,
.moduletable.module-lycee > h3::before,
.moduletable.module-centre > h3::before,
.moduletable.module-contact > h3::before,
.moduletable.module-1926 > h3::before,
.card.module-institution .card-header::before,
.card.module-lycee .card-header::before,
.card.module-centre .card-header::before,
.card.module-contact .card-header::before,
.card.module-1926 .card-header::before {
  color: var(--module-accent) !important;
  background: #ffffff !important;
  border: 2px solid rgba(37,42,127,.08);
  box-shadow: 0 5px 14px rgba(37,42,127,.12);
}

/* Accent uniquement sur bord gauche et filet */
.moduletable.module-institution,
.moduletable.module-lycee,
.moduletable.module-centre,
.moduletable.module-contact,
.moduletable.module-1926,
.card.module-institution,
.card.module-lycee,
.card.module-centre,
.card.module-contact,
.card.module-1926 {
  border-left-color: var(--module-accent) !important;
}

.moduletable.module-institution > h3::after,
.moduletable.module-lycee > h3::after,
.moduletable.module-centre > h3::after,
.moduletable.module-contact > h3::after,
.moduletable.module-1926 > h3::after,
.card.module-institution .card-header::after,
.card.module-lycee .card-header::after,
.card.module-centre .card-header::after,
.card.module-contact .card-header::after,
.card.module-1926 .card-header::after {
  background: var(--module-accent) !important;
}

/* Liens : bleu nuit, accent seulement au survol */
.moduletable.module-institution a,
.moduletable.module-lycee a,
.moduletable.module-centre a,
.moduletable.module-contact a,
.moduletable.module-1926 a,
.card.module-institution a,
.card.module-lycee a,
.card.module-centre a,
.card.module-contact a,
.card.module-1926 a {
  color: var(--dampierre-bleu-nuit, #252a7f) !important;
}

.moduletable.module-institution a:hover,
.moduletable.module-lycee a:hover,
.moduletable.module-centre a:hover,
.moduletable.module-contact a:hover,
.moduletable.module-1926 a:hover,
.card.module-institution a:hover,
.card.module-lycee a:hover,
.card.module-centre a:hover,
.card.module-contact a:hover,
.card.module-1926 a:hover {
  color: var(--module-accent) !important;
}


/* =========================================================
   26.2 - Boutons accueil : contraste + finesse
   ========================================================= */

.btn-hero,
.btn-hero:visited {
  min-width: 230px;
  padding: .9rem 1.55rem;
  border-radius: var(--rayon-pilule, 999px);
  font-weight: 850;
  letter-spacing: .01em;
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 10px 24px rgba(13, 27, 76, .22);
  transition:
    transform .20s ease,
    box-shadow .20s ease,
    filter .20s ease,
    background .20s ease;
}

.btn-hero-lycee {
  background:
    linear-gradient(135deg, var(--dampierre-bleu, #2d318f), var(--dampierre-bleu-nuit, #252a7f));
  color: #ffffff !important;
}

.btn-hero-centre {
  background:
    linear-gradient(135deg, #f0188d, var(--dampierre-fuchsia, #e5007d));
  color: #ffffff !important;
}

.btn-hero-restaurant,
.btn-hero-restaurant:visited {
  background:
    linear-gradient(135deg, #f2c84d, var(--dampierre-or, #d7b85b));
  color: var(--dampierre-bleu-nuit, #252a7f) !important;
  border-color: rgba(37,42,127,.22);
}

/* Séparateur interne plus discret */
.btn-hero__icon {
  margin-right: .75rem;
  padding-right: .75rem;
  border-right: 1px solid rgba(255,255,255,.28);
}

.btn-hero-restaurant .btn-hero__icon {
  border-right-color: rgba(37,42,127,.25);
}

/* Hover doux, pas de changement brutal */
.btn-hero:hover,
.btn-hero:focus {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(13, 27, 76, .30);
  filter: brightness(1.04);
  text-decoration: none !important;
}

.btn-hero-lycee:hover,
.btn-hero-lycee:focus,
.btn-hero-centre:hover,
.btn-hero-centre:focus {
  color: #ffffff !important;
}

.btn-hero-restaurant:hover,
.btn-hero-restaurant:focus {
  color: var(--dampierre-bleu-nuit, #252a7f) !important;
}

/* Responsive boutons accueil */
@media (max-width: 700px) {
  .btn-hero,
  .btn-hero:visited {
    width: 100%;
    max-width: 320px;
    min-width: 0;
  }
}





/* ==========================================================
   REGULAR LABS - TABS & ACCORDIONS
   Style Institution Dampierre
   ========================================================== */

[data-rlta-element="container"]{
    margin:2rem 0;
}

/* Ligne des onglets */
[data-rlta-element="container"] > div:first-child{
    display:flex;
    gap:6px;
    margin-bottom:0;
}

/* Onglets */
div[data-rlta-element="button"]{
    display:flex;
    align-items:center;
    justify-content:center;

    min-height:54px;
    padding:11px 18px;

    background:#ffffff !important;
    color:#2c7bc6 !important;

    border:2px solid #2c7bc6 !important;
    border-left:6px solid #2c7bc6 !important;
    border-bottom:none !important;
    border-radius:7px 7px 0 0 !important;

    font-size:1.02rem;
    font-weight:700;
    line-height:1.18;
    text-align:center;

    box-shadow:none !important;
    position:relative;
    z-index:1;

    transition:background .2s ease, color .2s ease, border-color .2s ease;
}

/* Survol */
div[data-rlta-element="button"]:hover{
    background:#f3f9ff !important;
    color:#252a7f !important;
}

/* Onglet actif */
div[data-rlta-element="button"][data-rlta-state="open"]{
    background:#2c7bc6 !important;
    color:#ffffff !important;

    border-color:#2c7bc6 !important;
    border-left-color:#e5007d !important;
    border-top:4px solid #e5007d !important;

    margin-bottom:-2px !important;
    z-index:5;
}

/* Panneau */
div[data-rlta-element="panel"]{
    background:#ffffff !important;

    border:2px solid #2c7bc6 !important;
    border-radius:0 7px 7px 7px !important;

    padding:20px !important;
    margin-top:0 !important;
    margin-bottom:20px;

    box-shadow:0 3px 10px rgba(0,0,0,.04);
}

/* Mobile */
@media (max-width:768px){
    [data-rlta-element="container"] > div:first-child{
        gap:4px;
    }

    div[data-rlta-element="button"]{
        min-height:50px;
        padding:10px 12px;
        font-size:.95rem;
    }

    div[data-rlta-element="panel"]{
        padding:16px !important;
    }
}

/* =========================================================
   NOTE MAINTENANCE
   ---------------------------------------------------------
   Le Hero de la page Home est isolé dans :
   hero-home.css

   Ne plus ajouter ici de correctifs Hero expérimentaux.
   user.css reste le fichier principal :
   - variables globales ;
   - header / navigation ;
   - modules ;
   - footer ;
   - correctifs généraux.
   ========================================================= */

/* ==========================================================
   PAGE CONTACTS - INSTITUTION DAMPIERRE - V4 UNIQUE
   Remplace toutes les anciennes versions contacts dans user.css
   ========================================================== */

.dampierre-contacts-page {
  --contact-lycee: #2c7bc6;
  --contact-centre: #e5007d;
  --contact-1926: #d7b85b;
  --contact-bleu: #2d318f;
  --contact-texte: #20233a;
  --contact-muted: #5f6475;

  margin: 0 auto 5rem;
  max-width: 1240px;
}

/* ---------- En-tête ---------- */

.dampierre-contacts-header {
  margin: 1.5rem 0 2rem;
  padding: 2rem;
  border-radius: 22px;
  background:
    linear-gradient(135deg, rgba(45,49,143,.08), rgba(44,123,198,.08)),
    #fff;
  box-shadow: 0 10px 30px rgba(0,0,0,.06);
  text-align: center;
}

.dampierre-contacts-kicker,
.dampierre-map-kicker {
  margin: 0 0 .45rem;
  color: var(--contact-centre);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .85rem;
}

.dampierre-contacts-header h1 {
  margin: 0 0 .7rem;
  color: var(--contact-bleu);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 850;
}

.dampierre-contacts-header p:last-child {
  max-width: 760px;
  margin: 0 auto;
  color: var(--contact-muted);
  font-size: 1.05rem;
  line-height: 1.7;
}

/* ---------- Cartes contacts ---------- */

.dampierre-contacts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
  gap: 2rem;
  align-items: stretch;
  margin-bottom: 4rem;
}

.dampierre-contact-card {
  position: relative;
  display: flex;
  gap: 1.25rem;
  min-height: 100%;
  padding: 2rem;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 14px 38px rgba(0,0,0,.08);
  border: 1px solid rgba(45,49,143,.08);
  overflow: hidden;
  transition: transform .22s ease, box-shadow .22s ease;
}

.dampierre-contact-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 7px;
  background: var(--contact-bleu);
}

.dampierre-contact-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 42px rgba(0,0,0,.12);
}

.dampierre-contact-icon {
  flex: 0 0 62px;
  width: 62px;
  height: 62px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  font-size: 1.65rem;
  background: rgba(45,49,143,.09);
  color: var(--contact-bleu);
}

.dampierre-contact-content {
  display: flex;
  flex-direction: column;
  min-width: 0;
  width: 100%;
}

.dampierre-contact-card h2 {
  margin: .1rem 0 .75rem;
  color: var(--contact-texte);
  font-size: 1.45rem;
  line-height: 1.25;
  font-weight: 850;
}

.dampierre-contact-desc {
  margin-bottom: 1rem;
  color: var(--contact-muted);
  line-height: 1.65;
}

.dampierre-contact-desc p {
  margin-bottom: .6rem;
}

.dampierre-contact-infos {
  list-style: none;
  margin: .5rem 0 1.3rem;
  padding: 0;
}

.dampierre-contact-infos li {
  display: flex;
  gap: .7rem;
  align-items: flex-start;
  margin: .72rem 0;
  color: var(--contact-texte);
  line-height: 1.45;
  min-width: 0;
}

.dampierre-contact-infos .fa {
  flex: 0 0 1.2rem;
  width: 1.2rem;
  margin-top: .15rem;
  color: var(--contact-bleu);
  text-align: center;
}

.dampierre-contact-infos a {
  color: inherit;
  text-decoration: none;
  font-weight: 650;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  flex: 1;
}

.dampierre-contact-infos a:hover {
  text-decoration: underline;
}

.dampierre-contact-button {
  margin-top: auto;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: .55rem;
  width: 100%;
  padding: .85rem 1rem;
  border-radius: 999px;
  background: var(--contact-bleu);
  color: #fff !important;
  text-decoration: none;
  font-weight: 800;
  transition: filter .2s ease, transform .2s ease;
}

.dampierre-contact-button:hover {
  filter: brightness(.95);
  transform: translateY(-1px);
  text-decoration: none;
}

/* ---------- Couleurs par structure ---------- */

.dampierre-contact-card.contact-lycee::before,
.dampierre-contact-card.contact-lycee .dampierre-contact-button {
  background: var(--contact-lycee);
}

.dampierre-contact-card.contact-lycee .dampierre-contact-icon {
  background: rgba(44,123,198,.12);
  color: var(--contact-lycee);
}

.dampierre-contact-card.contact-lycee .dampierre-contact-infos .fa {
  color: var(--contact-lycee);
}

.dampierre-contact-card.contact-centre::before,
.dampierre-contact-card.contact-centre .dampierre-contact-button {
  background: var(--contact-centre);
}

.dampierre-contact-card.contact-centre .dampierre-contact-icon {
  background: rgba(229,0,125,.11);
  color: var(--contact-centre);
}

.dampierre-contact-card.contact-centre .dampierre-contact-infos .fa {
  color: var(--contact-centre);
}

.dampierre-contact-card.contact-1926::before,
.dampierre-contact-card.contact-1926 .dampierre-contact-button {
  background: var(--contact-1926);
}

.dampierre-contact-card.contact-1926 .dampierre-contact-icon {
  background: rgba(215,184,91,.18);
  color: #9a7623;
}

.dampierre-contact-card.contact-1926 .dampierre-contact-infos .fa {
  color: #9a7623;
}

/* ---------- OpenStreetMap ---------- */

.dampierre-map-section {
  margin-top: 1rem;
  padding: 2rem;
  border-radius: 26px;
  background:
    linear-gradient(135deg, rgba(45,49,143,.06), rgba(229,0,125,.045)),
    #fff;
  box-shadow: 0 14px 38px rgba(0,0,0,.08);
}

.dampierre-map-header {
  text-align: center;
  margin-bottom: 1.6rem;
}

.dampierre-map-header h2 {
  margin: 0 0 .35rem;
  color: var(--contact-bleu);
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  font-weight: 850;
}

.dampierre-map-header p:last-child {
  margin: 0;
  color: var(--contact-muted);
  font-size: 1.05rem;
}

.dampierre-map-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(300px, .85fr);
  gap: 1.5rem;
  align-items: stretch;
}

.dampierre-map-frame {
  min-height: 420px;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 10px 28px rgba(0,0,0,.10);
  background: #eef1f7;
}

.dampierre-map-frame iframe {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 420px;
  border: 0;
}

.dampierre-map-card {
  display: flex;
  flex-direction: column;
  padding: 1.6rem;
  border-radius: 22px;
  background: #fff;
  border: 1px solid rgba(45,49,143,.08);
  box-shadow: 0 10px 28px rgba(0,0,0,.06);
}

.dampierre-map-icon {
  width: 58px;
  height: 58px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  margin-bottom: 1rem;
  background: rgba(45,49,143,.09);
  color: var(--contact-bleu);
  font-size: 1.55rem;
}

.dampierre-map-card h3 {
  margin: 0 0 .7rem;
  color: var(--contact-texte);
  font-size: 1.45rem;
  font-weight: 850;
}

.dampierre-map-card p {
  margin: 0 0 1rem;
  color: var(--contact-muted);
  line-height: 1.6;
}

.dampierre-map-card ul {
  list-style: none;
  padding: 0;
  margin: .3rem 0 1.4rem;
}

.dampierre-map-card li {
  display: flex;
  gap: .65rem;
  align-items: flex-start;
  margin: .7rem 0;
  color: var(--contact-texte);
  line-height: 1.45;
}

.dampierre-map-card li .fa {
  flex: 0 0 1.25rem;
  margin-top: .15rem;
  color: var(--contact-centre);
  text-align: center;
}

.dampierre-map-button {
  margin-top: auto;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: .55rem;
  width: 100%;
  padding: .9rem 1rem;
  border-radius: 999px;
  background: var(--contact-bleu);
  color: #fff !important;
  text-decoration: none;
  font-weight: 800;
}

.dampierre-map-button:hover {
  filter: brightness(.95);
  text-decoration: none;
}

/* ---------- Responsive ---------- */

@media (max-width: 992px) {
  .dampierre-map-layout {
    grid-template-columns: 1fr;
  }

  .dampierre-map-frame,
  .dampierre-map-frame iframe {
    min-height: 360px;
  }
}

@media (max-width: 768px) {
  .dampierre-contacts-page {
    margin-bottom: 4rem;
  }

  .dampierre-contacts-header,
  .dampierre-map-section {
    padding: 1.4rem;
    border-radius: 18px;
  }

  .dampierre-contacts-grid {
    grid-template-columns: 1fr;
    gap: 1.1rem;
    margin-bottom: 3rem;
  }

  .dampierre-contact-card {
    padding: 1.25rem;
    border-radius: 18px;
  }

  .dampierre-contact-icon {
    width: 54px;
    height: 54px;
    flex-basis: 54px;
    font-size: 1.4rem;
  }

  .dampierre-contact-infos a {
    white-space: normal;
    overflow: visible;
    text-overflow: initial;
    overflow-wrap: anywhere;
  }

  .dampierre-map-frame,
  .dampierre-map-frame iframe {
    min-height: 320px;
  }
}

@media (max-width: 480px) {
  .dampierre-contact-card {
    flex-direction: column;
  }

  .dampierre-map-card {
    padding: 1.25rem;
  }
}

/* =========================================================
   27 - MENUS LATÉRAUX ACCORDÉON — VERSION FINALE
   ---------------------------------------------------------
   Classes attendues sur les modules :
   Lycée  : module-navigation-accordeon module-lycee
   Centre : module-navigation-accordeon module-centre

   Ce bloc remplace les anciens essais de couleurs et de tailles
   concernant uniquement les menus latéraux accordéon.
   Le Main Menu horizontal n'est pas concerné.
   ========================================================= */

/* Taille et lisibilité communes */
.sidebar-left .card.module-navigation-accordeon .mod-menu > li > button.mod-menu__toggle-sub,
.sidebar-right .card.module-navigation-accordeon .mod-menu > li > button.mod-menu__toggle-sub,
.moduletable.module-navigation-accordeon .mod-menu > li > button.mod-menu__toggle-sub {
  font-size: 1.04rem !important;
  line-height: 1.35 !important;
}

.sidebar-left .card.module-navigation-accordeon .mod-menu > li > a,
.sidebar-right .card.module-navigation-accordeon .mod-menu > li > a,
.moduletable.module-navigation-accordeon .mod-menu > li > a {
  font-size: 1.02rem !important;
  line-height: 1.35 !important;
}

.sidebar-left .card.module-navigation-accordeon .mod-menu__sub a,
.sidebar-right .card.module-navigation-accordeon .mod-menu__sub a,
.moduletable.module-navigation-accordeon .mod-menu__sub a {
  font-size: .94rem !important;
  line-height: 1.4 !important;
}

/* Un peu d'air sans allonger excessivement le module */
.module-navigation-accordeon .mod-menu > li {
  margin-block: .18rem !important;
}

.module-navigation-accordeon .mod-menu__sub > li {
  margin-block: .12rem !important;
}

/* Lycée : bleu */
.sidebar-left .card.module-navigation-accordeon.module-lycee .mod-menu,
.sidebar-right .card.module-navigation-accordeon.module-lycee .mod-menu,
.moduletable.module-navigation-accordeon.module-lycee .mod-menu {
  --link-color: var(--dampierre-bleu-clair, #2c7bc6) !important;
  --link-hover-color: var(--dampierre-bleu-clair, #2c7bc6) !important;
}

.sidebar-left .card.module-navigation-accordeon.module-lycee .mod-menu a,
.sidebar-left .card.module-navigation-accordeon.module-lycee .mod-menu button,
.sidebar-right .card.module-navigation-accordeon.module-lycee .mod-menu a,
.sidebar-right .card.module-navigation-accordeon.module-lycee .mod-menu button,
.moduletable.module-navigation-accordeon.module-lycee .mod-menu a,
.moduletable.module-navigation-accordeon.module-lycee .mod-menu button {
  color: var(--dampierre-bleu-clair, #2c7bc6) !important;
}

.sidebar-left .card.module-navigation-accordeon.module-lycee .mod-menu a:hover,
.sidebar-left .card.module-navigation-accordeon.module-lycee .mod-menu a:focus,
.sidebar-left .card.module-navigation-accordeon.module-lycee .mod-menu button:hover,
.sidebar-left .card.module-navigation-accordeon.module-lycee .mod-menu button:focus,
.sidebar-left .card.module-navigation-accordeon.module-lycee .mod-menu button[aria-expanded="true"],
.sidebar-right .card.module-navigation-accordeon.module-lycee .mod-menu a:hover,
.sidebar-right .card.module-navigation-accordeon.module-lycee .mod-menu a:focus,
.sidebar-right .card.module-navigation-accordeon.module-lycee .mod-menu button:hover,
.sidebar-right .card.module-navigation-accordeon.module-lycee .mod-menu button:focus,
.sidebar-right .card.module-navigation-accordeon.module-lycee .mod-menu button[aria-expanded="true"],
.moduletable.module-navigation-accordeon.module-lycee .mod-menu a:hover,
.moduletable.module-navigation-accordeon.module-lycee .mod-menu a:focus,
.moduletable.module-navigation-accordeon.module-lycee .mod-menu button:hover,
.moduletable.module-navigation-accordeon.module-lycee .mod-menu button:focus,
.moduletable.module-navigation-accordeon.module-lycee .mod-menu button[aria-expanded="true"] {
  color: var(--dampierre-bleu-clair, #2c7bc6) !important;
  background: rgba(44, 123, 198, .10) !important;
  text-decoration: none !important;
}

/* Centre : fuchsia */
.sidebar-left .card.module-navigation-accordeon.module-centre .mod-menu,
.sidebar-right .card.module-navigation-accordeon.module-centre .mod-menu,
.moduletable.module-navigation-accordeon.module-centre .mod-menu {
  --link-color: var(--dampierre-fuchsia, #e5007d) !important;
  --link-hover-color: var(--dampierre-fuchsia, #e5007d) !important;
}

.sidebar-left .card.module-navigation-accordeon.module-centre .mod-menu a,
.sidebar-left .card.module-navigation-accordeon.module-centre .mod-menu button,
.sidebar-right .card.module-navigation-accordeon.module-centre .mod-menu a,
.sidebar-right .card.module-navigation-accordeon.module-centre .mod-menu button,
.moduletable.module-navigation-accordeon.module-centre .mod-menu a,
.moduletable.module-navigation-accordeon.module-centre .mod-menu button {
  color: var(--dampierre-fuchsia, #e5007d) !important;
}

.sidebar-left .card.module-navigation-accordeon.module-centre .mod-menu a:hover,
.sidebar-left .card.module-navigation-accordeon.module-centre .mod-menu a:focus,
.sidebar-left .card.module-navigation-accordeon.module-centre .mod-menu button:hover,
.sidebar-left .card.module-navigation-accordeon.module-centre .mod-menu button:focus,
.sidebar-left .card.module-navigation-accordeon.module-centre .mod-menu button[aria-expanded="true"],
.sidebar-right .card.module-navigation-accordeon.module-centre .mod-menu a:hover,
.sidebar-right .card.module-navigation-accordeon.module-centre .mod-menu a:focus,
.sidebar-right .card.module-navigation-accordeon.module-centre .mod-menu button:hover,
.sidebar-right .card.module-navigation-accordeon.module-centre .mod-menu button:focus,
.sidebar-right .card.module-navigation-accordeon.module-centre .mod-menu button[aria-expanded="true"],
.moduletable.module-navigation-accordeon.module-centre .mod-menu a:hover,
.moduletable.module-navigation-accordeon.module-centre .mod-menu a:focus,
.moduletable.module-navigation-accordeon.module-centre .mod-menu button:hover,
.moduletable.module-navigation-accordeon.module-centre .mod-menu button:focus,
.moduletable.module-navigation-accordeon.module-centre .mod-menu button[aria-expanded="true"] {
  color: var(--dampierre-fuchsia, #e5007d) !important;
  background: rgba(229, 0, 125, .09) !important;
  text-decoration: none !important;
}

/* Les textes et chevrons contenus dans le bouton suivent la couleur du bouton */
.module-navigation-accordeon .mod-menu button span {
  color: currentColor !important;
}

/* =========================================================
   ÉQUIPE DE DIRECTION — rendu natif Joomla 6
   ---------------------------------------------------------
   Cible uniquement le champ :
   .membres-de-lequipe-de-direction

   À AJOUTER à la fin du user.css déjà chargé par le template.
   Aucun PHP / override Joomla nécessaire.
   ========================================================= */

/* Masque le libellé général du champ */
.membres-de-lequipe-de-direction {
  list-style: none;
}

.membres-de-lequipe-de-direction::marker {
  content: "";
}

/* Masque le libellé général du champ */
.membres-de-lequipe-de-direction > .field-label {
  display: none;
}

/* Le conteneur natif du Subform devient une grille */
.membres-de-lequipe-de-direction > .field-value > .fields-container {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.35rem;
  margin: 1.25rem 0 2rem;
  padding: 0;
  list-style: none;
}

/* Une ligne du Subform = une carte */
.membres-de-lequipe-de-direction > .field-value > .fields-container > li {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  overflow: hidden;
  min-width: 0;
  margin: 0;
  padding: 0 0 1.2rem;

  /* Cache les virgules texte ajoutées par Joomla */
  font-size: 0;

  background: #fff;
  border: 1px solid rgba(45, 49, 143, .12);
  border-left: 5px solid var(--dampierre-bleu-clair, #2c7bc6);
  border-radius: 14px;
  box-shadow: 0 5px 16px rgba(37, 42, 127, .08);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.membres-de-lequipe-de-direction > .field-value > .fields-container > li:hover {
  transform: translateY(-2px);
  border-left-color: var(--dampierre-bleu, #2d318f);
  box-shadow: 0 10px 24px rgba(37, 42, 127, .14);
}

/* Tous les sous-champs */
.membres-de-lequipe-de-direction > .field-value > .fields-container > li > .field-entry {
  min-width: 0;
  font-size: 1rem;
}

/* Masque Photo:, Prénom:, Nom:, Fonction:... */
.membres-de-lequipe-de-direction > .field-value > .fields-container > li > .field-entry > .field-label {
  display: none;
}

/* Nettoie le rendu natif des valeurs */
.membres-de-lequipe-de-direction > .field-value > .fields-container > li > .field-entry > .field-value {
  display: block;
  margin: 0;
  padding: 0;
}

/* ---------------------------------------------------------
   1. PHOTO
   --------------------------------------------------------- */

.membres-de-lequipe-de-direction > .field-value > .fields-container > li > .field-entry:nth-of-type(1) {
  grid-column: 1 / -1;
  width: 100%;
  margin: 0 0 1rem;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: #eef2ff;
}

.membres-de-lequipe-de-direction > .field-value > .fields-container > li > .field-entry:nth-of-type(1) > .field-value {
  width: 100%;
  height: 100%;
}

.membres-de-lequipe-de-direction > .field-value > .fields-container > li > .field-entry:nth-of-type(1) img {
  display: block;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover;
  object-position: center;
  border: 0;
  border-radius: 0;
}

/* ---------------------------------------------------------
   2 + 3. PRÉNOM / NOM
   --------------------------------------------------------- */

.membres-de-lequipe-de-direction > .field-value > .fields-container > li > .field-entry:nth-of-type(2) {
  grid-column: 1 / -1;
  padding: 0 1.15rem;
  color: var(--dampierre-bleu-nuit, #252a7f);
  font-size: 1.18rem;
  font-weight: 800;
  line-height: 1.25;
}

/* ---------------------------------------------------------
   4. FONCTION
   --------------------------------------------------------- */

.membres-de-lequipe-de-direction > .field-value > .fields-container > li > .field-entry:nth-of-type(3) {
  grid-column: 1 / -1;
  margin-top: .45rem;
  padding: 0 1.15rem;
  color: var(--dampierre-bleu, #2d318f);
  font-size: .98rem;
  font-weight: 700;
  line-height: 1.4;
}

/* ---------------------------------------------------------
   5. AUTRE RESPONSABILITÉ
   --------------------------------------------------------- */

.membres-de-lequipe-de-direction > .field-value > .fields-container > li > .field-entry:nth-of-type(4) {
  grid-column: 1 / -1;
  margin: .8rem 1.15rem 0;
  padding-top: .8rem;
  color: #4a4a4a;
  border-top: 1px solid rgba(45, 49, 143, .10);
  font-size: .9rem;
  line-height: 1.45;
}

/* ---------------------------------------------------------
   RESPONSIVE
   --------------------------------------------------------- */

@media (max-width: 980px) {
  .membres-de-lequipe-de-direction > .field-value > .fields-container {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .membres-de-lequipe-de-direction > .field-value > .fields-container {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .membres-de-lequipe-de-direction > .field-value > .fields-container > li {
    width: 100%;
    max-width: 430px;
    margin-inline: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .membres-de-lequipe-de-direction > .field-value > .fields-container > li {
    transition: none;
  }

  .membres-de-lequipe-de-direction > .field-value > .fields-container > li:hover {
    transform: none;
  }
}