/* ===========================================================
   CLONE design elbiliainternational.ma  →  marque Écoles Privées L'Union
   Tokens réels extraits via getComputedStyle (reference/tokens.json)
   =========================================================== */
.eup-elbilia{
  /* === Palette de la version précédente (maquette) : navy + or === */
  --navy:#16284A;
  --navy-d:#11203B;
  --gold:#F0A818;
  --gold-d:#D8920E;
  --magenta:#16284A;   /* primary = navy (titres, liens, footer, CTA, H1) */
  --magenta-d:#11203B;
  --pink:#F0A818;      /* accent = or (pastille, play, fleches, chiffres) */
  --mauve:#26395f;     /* bouton secondaire = navy clair */
  --ink:#1A2744;
  --muted:#6c7480;
  --paper:#f6f6f7;
  --line:#e7e8ec;
  --container:1140px;
  font-family:'Poppins',sans-serif;
  color:var(--ink);
  background:#fff;
}
.eup-elbilia *{ box-sizing:border-box; }
.eup-elbilia img{ max-width:100%; display:block; }
.eup-elbilia a{ text-decoration:none; }
.el-container{ max-width:var(--container); margin:0 auto; padding:0 15px; width:100%; }

/* boutons pilule */
.el-btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; font-weight:700; font-size:18px;
  padding:11px 34px; border-radius:15px; border:0; cursor:pointer; transition:.18s; line-height:1.2; white-space:nowrap; }
.el-btn svg{ width:14px; height:14px; }
.el-btn--pink{ background:var(--gold); color:var(--navy); }
.el-btn--pink:hover{ background:var(--gold-d); color:var(--navy); }
.el-btn--navy{ background:var(--navy); color:#fff; }
.el-btn--navy:hover{ background:var(--navy-d); color:#fff; }
.el-btn--mauve{ background:var(--mauve); color:#fff; }
.el-btn--mauve:hover{ background:var(--navy); color:#fff; }
.el-btn--white{ background:#fff; color:var(--navy); }
.el-btn--white:hover{ background:#f1f3f7; color:var(--navy); }

.el-link{ color:var(--magenta); font-weight:700; font-size:17px; display:inline-flex; align-items:center; gap:10px; white-space:nowrap; }
/* Flèche proportionnelle au texte (refonte premium : suppression de la flèche surdimensionnée,
   qui débordait sur mobile et alourdissait la hiérarchie). */
.el-link svg{ flex:none; width:auto; height:1.5em; max-width:42px; transition:transform var(--dur-base,200ms) var(--ease-standard,ease); }
.el-link:hover svg{ transform:translateX(4px); }
.el-link:hover{ color:var(--pink); }

/* ====== BANDEAU LOGOS PARTENAIRES (haut de page) — DÉFILEMENT CONTINU ======
   La piste contient 2 séries identiques ; on la translate d'exactement 1 série + 1 écart
   (--pb-gap) => raccord invisible, défilement perpétuel. Pause au survol, et animation
   désactivée si l'utilisateur a demandé « moins d'animations » (accessibilité). */
/* Jaune clair FRANC (teinte 50°, pas l'or #F0A818 qui tirait sur l'orange) : lumineux, doux,
   et les logos a texte sombre restent parfaitement lisibles dessus. */
.el-partnerbar{ --pb-gap:60px; --pb-speed:58s; background:#FCEC9E; padding:8px 0; }
.el-partnerbar__marquee{ overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent); }
.el-partnerbar__track{ display:flex; align-items:center; gap:var(--pb-gap); width:max-content;
  animation:elPartnerScroll var(--pb-speed) linear infinite; }
.el-partnerbar__set{ display:flex; align-items:center; gap:var(--pb-gap); }
.el-partnerbar__track img{ height:48px; width:auto; object-fit:contain; flex:none; }
.el-partnerbar__marquee:hover .el-partnerbar__track{ animation-play-state:paused; }
@keyframes elPartnerScroll{ from{ transform:translateX(0); }
  to{ transform:translateX(calc(-50% - var(--pb-gap) / 2)); } }
@media (prefers-reduced-motion:reduce){ .el-partnerbar__track{ animation:none; } }
/* Compat : ancienne structure statique encore présente sur des pages non régénérées */
.el-partnerbar__logos{ display:flex; align-items:center; justify-content:center; gap:60px; flex-wrap:wrap; }
.el-partnerbar__logos img{ height:48px; width:auto; object-fit:contain; }

/* ====== TOP UTILITY BAR — un seul menu fusionné (couleurs eup.ma : navy + texte blanc) ====== */
.el-topbar{ background:#242e5f; font-size:14px; color:#fff; }
.el-topbar .el-container{ display:flex; align-items:center; justify-content:center; min-height:44px; }
.el-topbar__menu{ display:flex; align-items:center; justify-content:center; gap:30px; flex-wrap:wrap; padding:6px 0; }
.el-topbar__menu a,.el-topbar a{ color:#fff; font-weight:500; opacity:.9; }
.el-topbar__menu a:hover,.el-topbar a:hover{ color:var(--gold); opacity:1; }

/* ====== HEADER / NAV ====== */
.el-header{ position:sticky; top:0; z-index:50; background:#fff; box-shadow:0 2px 14px rgba(0,0,0,.06); }
/* Menu UNIQUE : vraie grille 3 colonnes. Colonne centrale = logo (auto, ne retrecit
   jamais). Le centrage vient de la grille, pas d'un position:absolute -> jamais de
   chevauchement. Contenu compacte pour tenir dans --container (1140px) colonnes egales. */
/* Barre de menu un peu plus large que le reste du site : indispensable pour que les deux
   colonnes laterales tiennent SANS pousser le logo hors du centre. */
.el-header .el-container{ max-width:1320px; }
/* minmax(0,1fr) = les colonnes laterales font EXACTEMENT la meme largeur (avec 1fr seul, la
   colonne de droite, plus chargee, grossissait et decalait le logo vers la gauche).
   Resultat : le logo est litteralement au centre de l'ecran. */
.el-nav{ display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); align-items:center; column-gap:16px; padding:10px 0; }
.el-nav__list{ display:flex; align-items:center; gap:14px; list-style:none; margin:0; padding:0; min-width:0; }
.el-nav__list--right{ justify-content:flex-end; }
.el-nav__list a{ color:#23272e; font-weight:600; font-size:13px; letter-spacing:.2px; text-transform:uppercase; white-space:nowrap; display:inline-flex; align-items:center; }
.el-nav__list a:hover{ color:var(--magenta); }
/* Petit lien secondaire "Espace parents" (barre secondaire fusionnee dans le menu unique) */
.el-nav__login{ color:var(--magenta)!important; font-weight:600; font-size:10.5px!important; text-transform:uppercase; letter-spacing:.1px;
  border:1px solid rgba(22,40,74,.35); border-radius:999px; padding:4px 9px; white-space:nowrap; }
.el-nav__login:hover{ background:var(--magenta); color:#fff!important; }
/* CTA compact DANS la navbar (le .el-btn global 18px/34px est trop large pour une barre) */
.el-nav .el-btn--pink{ font-size:11.5px; padding:8px 13px; border-radius:9px; gap:5px; }
.el-nav .el-btn--pink svg{ width:11px; height:11px; }
.el-brand{ display:flex; flex-direction:column; align-items:center; }
.el-brand img{ height:48px; width:auto; flex:none; }
.el-brand__tag{ font-size:10px; color:var(--magenta); font-style:italic; margin-top:3px; letter-spacing:.2px; }
/* Desktop etroit (992-1100px) : on masque le pill "Espace parents" (toujours accessible
   dans le menu burger <=991px) pour garder le logo parfaitement centre, sans chevauchement
   ni compression du logo. Palier avant le passage en menu mobile. */
@media (min-width:992px) and (max-width:1250px){
  .el-nav__list a.el-nav__login{ display:none; }
  .el-nav__list{ gap:12px; }
}
/* Palier le plus etroit : on compacte encore le menu pour que rien n'empiete sur le logo centre. */
@media (min-width:992px) and (max-width:1120px){
  .el-nav__list{ gap:8px; }
  .el-nav__list a{ font-size:11.5px; letter-spacing:0; }
  .el-nav .el-btn--pink{ font-size:10.5px; padding:7px 10px; }
  .el-brand img{ height:42px; }
  .el-brand__tag{ font-size:9px; }
}
.el-burger{ display:none; }
/* item de nav actif */
.el-nav__list li.el-active > a{ color:var(--gold); }
/* caret des menus déroulants */
.el-caret{ width:11px !important; height:11px !important; margin-left:4px; opacity:.7; transition:transform .18s; }
.el-has-drop:hover .el-caret{ transform:rotate(180deg); }
/* menus déroulants */
.el-has-drop{ position:relative; }
.el-nav__drop{ position:absolute; top:100%; left:0; min-width:248px; background:#fff;
  border-radius:10px; box-shadow:0 18px 44px rgba(17,32,59,.18); border:1px solid var(--line);
  padding:8px 0; opacity:0; visibility:hidden; transform:translateY(8px); transition:.18s; z-index:60; }
.el-nav__drop--right{ left:auto; right:0; }
.el-has-drop:hover > .el-nav__drop{ opacity:1; visibility:visible; transform:translateY(0); }
.el-nav__drop:before{ content:""; position:absolute; bottom:100%; left:0; right:0; height:14px; } /* pont anti-survol */
.el-nav__drop a{ display:block; padding:10px 20px; font-size:13.5px; font-weight:500;
  text-transform:none; letter-spacing:0; color:#23272e; white-space:nowrap; }
.el-nav__drop a:hover{ background:var(--paper); color:var(--magenta); }

/* ====== HERO ====== */
.el-hero{ position:relative; min-height:760px; display:flex; align-items:center; justify-content:center;
  text-align:center; overflow:hidden; }
.el-hero__bg{ position:absolute; inset:0; z-index:0; }
.el-hero__bg img{ width:100%; height:100%; object-fit:cover; }
.el-hero__bg:after{ content:""; position:absolute; inset:0; z-index:3; background:linear-gradient(180deg,rgba(255,255,255,.30),rgba(245,247,250,.42)); }
/* Diaporama hero : crossfade auto de vraies photos */
.el-hero__slideshow img{ position:absolute; inset:0; opacity:0; animation:elHeroFade 30s infinite; }
.el-hero__slideshow img:nth-child(1){ animation-delay:0s; }
.el-hero__slideshow img:nth-child(2){ animation-delay:6s; }
.el-hero__slideshow img:nth-child(3){ animation-delay:12s; }
.el-hero__slideshow img:nth-child(4){ animation-delay:18s; }
.el-hero__slideshow img:nth-child(5){ animation-delay:24s; }
@keyframes elHeroFade{ 0%{opacity:1} 17%{opacity:1} 20%{opacity:0} 97%{opacity:0} 100%{opacity:1} }
.el-hero__in{ position:relative; z-index:2; max-width:1200px; padding:60px 20px; }
.el-hero__play{ width:128px; height:128px; border-radius:50%; border:3px solid rgba(255,255,255,.85);
  display:flex; align-items:center; justify-content:center; margin:0 auto 26px;
  background:rgba(255,255,255,.18); color:var(--pink); }
.el-hero__play svg{ width:46px; height:46px; margin-left:6px; }
.el-hero__h1{ font-size:58px; line-height:1.06; font-weight:800; color:var(--magenta);
  text-transform:uppercase; letter-spacing:-1px; margin:0 0 22px; text-shadow:0 2px 18px rgba(255,255,255,.5); }
.el-hero__h1 span{ color:var(--gold); }
.el-hero__sub{ display:flex; align-items:center; justify-content:center; gap:18px; flex-wrap:wrap;
  font-size:26px; color:var(--navy); font-weight:500; margin-bottom:34px; }
.el-hero__sub strong{ color:var(--magenta); }
.el-hero__cta{ display:flex; gap:22px; justify-content:center; flex-wrap:wrap; }

/* ====== SECTION GÉNÉRIQUE ====== */
.el-section{ padding:78px 0; }
.el-eyebrow{ text-align:center; color:var(--muted); font-size:15px; margin-bottom:6px; }
.el-h2{ font-size:34px; font-weight:700; color:var(--magenta); line-height:1.15; margin:0 0 12px; }
.el-h2--center{ text-align:center; }
.el-h2--ink{ color:var(--ink); }

/* ====== EXCELLENCE (split image/texte) ====== */
.el-excel{ display:grid; grid-template-columns:.85fr 1.15fr; gap:54px; align-items:center; }
.el-excel>*{ min-width:0; } /* autorise les colonnes à se réduire sous leur min-content (anti-débordement mobile) */
.el-excel__media{ display:grid; grid-template-columns:1fr; gap:16px; }
/* Les 2 photos font la MEME LARGEUR (toute la colonne) : aucun decalage, aucune bande vide. */
.el-excel__img{ width:100%;
  border-radius:10px; overflow:hidden; box-shadow:0 20px 50px rgba(0,0,0,.14); background:#f2f0ec; }
/* PHOTO ENTIERE (pas de recadrage) ET SANS BANDES VIDES : la hauteur suit exactement le format
   naturel de l'image (aucun max-height, sinon une photo verticale etait bridee en hauteur et
   `contain` laissait du vide a gauche et a droite). Les 2 photos ont donc le meme rendu :
   largeur pleine + hauteur proportionnelle. */
/* Largeur pleine + hauteur plafonnee a 360px. Une photo plus haute que ce cadre (portrait) est
   cadree au centre (object-fit:cover) : c'est la seule facon d'avoir la MEME LARGEUR que la photo
   du dessous sans la rendre enorme en hauteur ni laisser de bandes vides. Une photo paysage
   (comme la 2e) reste sous les 360px : elle s'affiche donc en entier, sans aucun rognage. */
.el-excel__img img{ display:block; width:100%; height:auto; max-height:360px;
  object-fit:cover; object-position:center; }
/* NOMBRE DE PHOTOS LIBRE (galerie pilotee depuis /admin/accueil.php) :
   1 photo = plus grande car seule ; 2 photos = empilees pleine largeur (rendu d'origine) ;
   3 photos ou plus = 2 colonnes pour ne pas allonger la colonne image. */
.el-excel--noimg{ grid-template-columns:1fr; }
.el-excel__media--1 .el-excel__img img{ max-height:520px; }
.el-excel__media--multi{ grid-template-columns:1fr 1fr; }
.el-excel__media--multi .el-excel__img img{ max-height:200px; }
.el-excel__head{ display:flex; justify-content:space-between; align-items:flex-start; gap:20px; }
.el-excel h2{ font-size:40px; font-weight:700; color:var(--magenta); line-height:1.1; margin:0; }
.el-excel h2 small{ display:block; color:var(--navy); font-size:22px; font-weight:600; margin-top:4px; }
.el-excel__badge{ width:120px; height:120px; flex:none; color:var(--mauve); }
.el-excel p{ font-size:14.5px; line-height:1.85; color:#3a414d; margin:16px 0 0; }
.el-excel p strong{ color:var(--ink); }
.el-excel .el-link{ margin-top:20px; }

/* ====== INNOVE (texte centré 2 col) ====== */
.el-innove{ text-align:center; }
.el-innove__lead{ color:var(--navy); font-size:18px; font-weight:500; margin:0 0 28px; }
.el-innove__cols{ columns:2; column-gap:48px; text-align:left; font-size:14.5px; line-height:1.85; color:#3a414d; }
.el-innove__cols p{ margin:0 0 14px; }
.el-innove ul{ text-align:left; max-width:760px; margin:6px auto 0; padding-left:20px; color:#3a414d; font-size:14.5px; line-height:1.9; }
.el-innove .el-link{ margin-top:24px; }

/* ====== CHIFFRES (section sombre image) ====== */
.el-stats{ position:relative; color:#fff; padding:64px 0 54px; overflow:hidden; }
.el-stats__bg{ position:absolute; inset:0; z-index:0; }
.el-stats__bg img{ width:100%; height:100%; object-fit:cover; }
.el-stats__bg:after{ content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(180deg,rgba(22,40,74,.82),rgba(17,32,59,.88)); }
/* Diaporama des photos déplacées depuis le hero : crossfade auto */
.el-stats__slideshow img{ position:absolute; inset:0; opacity:0; animation:elHeroFade 30s infinite; }
.el-stats__slideshow img:nth-child(1){ animation-delay:0s; }
.el-stats__slideshow img:nth-child(2){ animation-delay:6s; }
.el-stats__slideshow img:nth-child(3){ animation-delay:12s; }
.el-stats__slideshow img:nth-child(4){ animation-delay:18s; }
.el-stats__slideshow img:nth-child(5){ animation-delay:24s; }
.el-stats__in{ position:relative; z-index:2; }
.el-stats__title{ text-align:center; font-size:30px; font-weight:700; margin:0 0 36px; color:var(--gold); }
.el-stats__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; max-width:880px; margin:0 auto 48px; }
.el-stat{ text-align:center; }
.el-stat__n{ font-size:46px; font-weight:800; color:var(--pink); line-height:1; }
.el-stat__l{ font-size:14px; color:#e8eaf0; margin-top:8px; }
.el-partner{ text-align:center; margin:0 auto 30px; max-width:900px; }
.el-partner__t{ color:var(--pink); font-weight:700; font-size:22px; margin:0 0 16px; }
.el-partner__row{ display:grid; grid-template-columns:240px 1fr; gap:30px; align-items:center; text-align:left; }
.el-partner__row--rev{ grid-template-columns:1fr 240px; }
.el-partner__logo{ background:rgba(255,255,255,.1); border:1px dashed rgba(255,255,255,.4); border-radius:10px;
  height:120px; display:flex; align-items:center; justify-content:center; color:#cfd4e0; font-size:13px; text-align:center; padding:10px; }
.el-partner p{ font-size:13px; line-height:1.8; color:#dfe2ec; margin:0; }
.el-partner__logos{ display:flex; gap:18px; justify-content:center; flex-wrap:wrap; margin-bottom:18px; }
.el-partner__chip{ background:#fff; border-radius:12px; padding:14px 22px; height:80px; min-width:170px;
  display:flex; align-items:center; justify-content:center; box-shadow:0 8px 22px rgba(0,0,0,.18); }
.el-partner__chip img{ max-height:48px; width:auto; object-fit:contain; }
.el-thumbs{ display:flex; align-items:center; justify-content:center; gap:14px; }
.el-thumbs__track{ display:flex; gap:14px; }
.el-thumbs img{ width:120px; height:78px; object-fit:cover; border-radius:8px; }
.el-thumbs__arrow{ color:var(--pink); font-size:30px; line-height:1; background:none; border:0; cursor:pointer; }
/* Bande de photos qui défilent (déplacées depuis le hero).
   IMPORTANT : `flex:none` sur la piste ET sur les images — sans ça le conteneur flex comprimait
   la piste à la largeur de l'écran, l'animation ne balayait qu'une fraction du ruban et les
   dernières photos n'apparaissaient jamais. La piste = 2 séries identiques, translatées
   d'exactement 1 série + 1 écart => boucle sans raccord visible. */
.el-thumbs--scroll{ --th-gap:14px; overflow:hidden; justify-content:flex-start;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); }
.el-thumbs--scroll .el-thumbs__track{ flex:none; width:max-content; gap:var(--th-gap);
  animation:elThumbsScroll 48s linear infinite; }
.el-thumbs--scroll .el-thumbs__set{ display:flex; gap:var(--th-gap); }
.el-thumbs--scroll .el-thumbs__track img{ width:200px; height:128px; flex:none; }
.el-thumbs--scroll:hover .el-thumbs__track{ animation-play-state:paused; }
@keyframes elThumbsScroll{ from{ transform:translateX(0); }
  to{ transform:translateX(calc(-50% - var(--th-gap) / 2)); } }
@media (prefers-reduced-motion:reduce){ .el-thumbs--scroll .el-thumbs__track{ animation:none; } }

/* ====== ÉTABLISSEMENTS / CYCLES ====== */
.el-estab__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:34px; }
.el-estab__card{ position:relative; height:230px; border-radius:8px; overflow:hidden; }
.el-estab__card img{ width:100%; height:100%; object-fit:cover; transition:.4s; }
.el-estab__card:hover img{ transform:scale(1.05); }
.el-estab__card:after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(17,32,59,0) 45%,rgba(17,32,59,.82)); }
.el-estab__label{ position:absolute; left:16px; bottom:14px; z-index:2; color:#fff; font-size:13px; font-weight:500; }

/* ====== NOS CYCLES ====== */
.el-cycles{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-top:36px; }
.el-cycle{ display:block; background:#fff; border:1px solid #ecedf1; border-radius:12px; overflow:hidden;
  box-shadow:0 8px 22px rgba(17,32,59,.07); transition:transform .25s ease, box-shadow .25s ease; }
.el-cycle:hover{ transform:translateY(-6px); box-shadow:0 18px 38px rgba(17,32,59,.16); }
.el-cycle__img{ position:relative; height:185px; overflow:hidden; }
.el-cycle__img img{ width:100%; height:100%; object-fit:cover; transition:transform .45s ease; }
.el-cycle:hover .el-cycle__img img{ transform:scale(1.07); }
.el-cycle__img:after{ content:""; position:absolute; left:0; right:0; bottom:0; height:5px; background:var(--gold); }
.el-cycle__body{ padding:18px 20px 22px; }
.el-cycle__k{ display:inline-block; font-size:11px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase;
  color:var(--gold-d); background:#fdf3df; padding:3px 10px; border-radius:20px; margin-bottom:10px; }
.el-cycle__body h3{ font-size:18px; font-weight:700; color:var(--navy); margin:0 0 12px; }
.el-cycle__more{ display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:600; color:var(--navy); }
.el-cycle__more svg{ width:15px; height:15px; transition:transform .25s ease; }
.el-cycle:hover .el-cycle__more{ color:var(--gold-d); }
.el-cycle:hover .el-cycle__more svg{ transform:translateX(4px); }

/* ====== SERVICES ====== */
.el-services{ display:grid; grid-template-columns:1.15fr .85fr; gap:54px; align-items:center; }
.el-serv__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px 18px; }
.el-serv{ text-align:center; }
.el-serv__ic{ width:74px; height:74px; margin:0 auto 12px; }
.el-serv__ic svg{ width:100%; height:100%; }
.el-serv__l{ font-size:12.5px; font-weight:700; letter-spacing:.5px; text-transform:uppercase; color:var(--ink); }
.el-services__txt p{ font-size:14.5px; line-height:1.85; color:#3a414d; }

/* ====== CTA BANNER ====== */
.el-cta{ background:var(--magenta); }
/* Bandeau d'appel entierement centre (texte au-dessus, bouton dessous, tous deux au centre). */
.el-cta .el-container{ display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; gap:20px; padding-top:34px; padding-bottom:34px; }
.el-cta__t{ color:#fff; font-size:24px; font-weight:600; margin:0; text-align:center; max-width:900px; }

/* ====== ACTUALITÉS ====== */
.el-news__grid{ display:grid; grid-template-columns:1fr 1fr; gap:30px 54px; margin-top:34px; }
.el-news{ display:grid; grid-template-columns:170px 1fr; gap:20px; align-items:center; }
.el-news__img{ width:170px; height:150px; border-radius:8px; overflow:hidden; flex:none; }
.el-news__img img{ width:100%; height:100%; object-fit:cover; display:block; }
.el-news__body{ display:flex; flex-direction:column; min-width:0; }
.el-news__cat{ color:var(--muted); font-size:14px; margin-bottom:4px; }
.el-news__t{ color:var(--magenta); font-weight:700; font-size:16px; line-height:1.35; text-transform:uppercase; margin:0 0 8px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  min-height:calc(1.35em * 2); }
.el-news__t a{ color:inherit; }
.el-news__t a:hover{ color:var(--pink); }
.el-news__date{ color:var(--muted); font-size:13px; margin-top:auto; }

/* ====== FOOTER (rouge, comme eup.ma) ====== */
.el-footer{ background:#E7364A; color:#fff; padding:48px 0 0; }
.el-footer__grid{ display:grid; grid-template-columns:1.2fr 1fr 1fr 1fr; gap:30px; }
.el-footer__brand img{ height:64px; margin-bottom:10px; filter:brightness(0) invert(1); }
.el-footer__tag{ font-size:11px; font-style:italic; opacity:.95; }
.el-footer__col h4{ font-size:16px; font-weight:700; letter-spacing:.5px; margin:6px 0 16px; text-transform:uppercase; color:var(--gold); }
.el-footer__col ul{ list-style:none; margin:0; padding:0; }
.el-footer__col li{ margin-bottom:10px; }
.el-footer__col a{ color:#fff; font-size:13.5px; text-transform:uppercase; opacity:.95; }
.el-footer__col a:hover{ opacity:1; text-decoration:underline; }
.el-footer__social{ display:flex; gap:12px; margin-top:16px; }
.el-footer__social a{ width:40px; height:40px; border-radius:50%; background:#fff; color:#E7364A;
  display:flex; align-items:center; justify-content:center; }
.el-footer__social svg{ width:20px; height:20px; }
.el-footer__bottom{ background:#f6f6f7; color:#16284A; margin-top:40px; padding:18px 0; font-size:12.5px; text-align:center; }

/* ====== PAGES INTÉRIEURES (contenu bootstrap hérité eup.ma) ======
   Le contenu utilise des animations WOW.js (opacity:0 jusqu'au scroll).
   On le force visible pour fiabilité (indépendant du JS), sur tout le site refondu. */
.eup-elbilia .wow{ visibility:visible !important; opacity:1 !important; animation:none !important; }
.eup-elbilia .blog-content,
.eup-elbilia .section-padding{ padding-top:56px; padding-bottom:56px; }

/* ============================================================
   PASSE DE FINITION PREMIUM (visible) — héro, cartes, boutons, titres
   ============================================================ */

/* HÉRO : voile navy dégradé → contraste premium, titre blanc net (au lieu de
   navy lavé sur photo claire). Lisibilité AA + rendu éditorial. */
.el-hero{ min-height:700px; }
.el-hero__bg:after{
  background:
    linear-gradient(180deg, rgba(16,24,44,.34) 0%, rgba(16,24,44,.54) 55%, rgba(13,18,36,.82) 100%),
    linear-gradient(90deg, rgba(13,18,36,.60) 0%, rgba(13,18,36,.08) 62%);
}
.el-hero__h1{ color:#fff; text-shadow:0 3px 28px rgba(0,0,0,.45); }
.el-hero__h1 span{ color:var(--gold); text-shadow:0 3px 28px rgba(0,0,0,.5); }
.el-hero__sub{ color:#fff; }
.el-hero__sub strong{ color:var(--gold); }
.el-hero__play{ border-color:rgba(255,255,255,.9); background:rgba(255,255,255,.14); }

/* BOUTONS : micro-élévation au survol (sobre = premium) */
.el-btn{ transition:transform .18s var(--ease-standard,ease), background .18s, box-shadow .18s; }
.el-btn--pink:hover,.el-btn--navy:hover,.el-btn--mauve:hover,.el-btn--white:hover{
  transform:translateY(-2px); box-shadow:0 12px 26px rgba(16,24,44,.22); }

/* CARTES « La vie à l'école » : zoom image + voile bas (lisibilité label) + élévation */
.el-estab__card{ box-shadow:0 8px 22px rgba(17,32,59,.10);
  transition:transform .28s var(--ease-standard,ease), box-shadow .28s; }
.el-estab__card img{ transition:transform .55s var(--ease-standard,ease); will-change:transform; }
.el-estab__card:after{ content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, transparent 44%, rgba(13,18,36,.74) 100%); }
.el-estab__label{ z-index:2; font-weight:600; }
.el-estab__card:hover{ transform:translateY(-5px); box-shadow:0 20px 40px rgba(17,32,59,.20); }
.el-estab__card:hover img{ transform:scale(1.06); }

/* EYEBROWS de section : or, majuscules espacées (signature premium) */
.el-eyebrow{ color:var(--gold-d); font-weight:700; text-transform:uppercase;
  letter-spacing:2.5px; font-size:13px; }

/* TITRES de section centrés : filet d'accent or sous le titre */
.el-h2--center{ position:relative; }
.el-h2--center:after{ content:""; display:block; width:64px; height:4px; border-radius:2px;
  background:var(--gold); margin:18px auto 0; }

/* ====== RESPONSIVE ====== */
@media (max-width:991px){
  .el-hero__h1{ font-size:54px; }
  .el-hero__sub{ font-size:20px; }
  .el-excel,.el-services{ grid-template-columns:1fr; gap:34px; }
  .el-excel__media{ grid-template-columns:1fr 1fr; align-items:start; }
  .el-excel__media--1{ grid-template-columns:1fr; }
  .el-excel__img img,.el-excel__img--2 img{ height:auto; }
  .el-excel__media--1 .el-excel__img img{ max-height:420px; }
  .el-stats__grid{ grid-template-columns:repeat(2,1fr); gap:30px; }
  .el-estab__grid{ grid-template-columns:repeat(2,1fr); }
  .el-cycles{ grid-template-columns:repeat(2,1fr); }
  .el-news__grid{ grid-template-columns:1fr; }
  .el-innove__cols{ columns:1; }
  .el-footer__grid{ grid-template-columns:1fr 1fr; }
  .el-nav__list{ display:none; }
  .el-burger{ display:inline-flex; }
  .el-partner__row,.el-partner__row--rev{ grid-template-columns:1fr; }
}
@media (max-width:600px){
  .el-hero__h1{ font-size:38px; }
  .el-section{ padding:52px 0; }
  .el-estab__grid,.el-serv__grid,.el-footer__grid,.el-cycles{ grid-template-columns:1fr; }
  .el-news{ grid-template-columns:120px 1fr; }
  .el-news__img{ width:120px; height:110px; }
  .el-topbar{ display:none; }
  .el-cta .el-container{ justify-content:center; text-align:center; }
  .el-excel h2{ font-size:28px; }
  .el-excel h2 small{ font-size:17px; }
  .el-excel__badge{ width:72px; height:72px; }
  .el-excel__media{ grid-template-columns:1fr; }
  .el-excel__media--multi{ grid-template-columns:1fr 1fr; } /* 3 photos ou + : on garde 2 colonnes sur telephone */
  .el-excel__img img,.el-excel__img--2 img{ height:auto; }
  .el-excel__media--multi .el-excel__img img{ max-height:150px; }
}

/* Garde anti-débordement horizontal pour la médiathèque (legacy Bootstrap .row -15px) */
.portfolio{ overflow-x:hidden; }

/* ============================================================
   HÉRO ACCUEIL — eyebrow premium (signature de marque, accent or)
   ============================================================ */
.el-hero__eyebrow{
  display:inline-flex; align-items:center; gap:14px; margin:0 0 18px;
  color:var(--gold); font-weight:700; font-size:14px; letter-spacing:3px;
  text-transform:uppercase; text-shadow:0 2px 14px rgba(0,0,0,.55);
}
.el-hero__eyebrow:before,
.el-hero__eyebrow:after{ content:""; width:34px; height:2px; border-radius:2px; background:var(--gold); opacity:.9; }
.el-hero__h1{ letter-spacing:-1px; }

/* ============================================================
   PAGES INTÉRIEURES — FINITION PREMIUM
   Bandeau de titre, fil d'Ariane, typographie de contenu,
   formulaires, listes, documents, actualités, médiathèque.
   ============================================================ */

/* ---- BANDEAU DE TITRE (navy + voile dégradé + accent or) ---- */
.el-pagehead{ position:relative; overflow:hidden; background:var(--navy-d); isolation:isolate; }
.el-pagehead__bg{ position:absolute; inset:0; z-index:0; }
.el-pagehead__bg img{ width:100%; height:100%; object-fit:cover; object-position:center 28%; opacity:.62; }
.el-pagehead__bg:after{ content:""; position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(13,18,36,.42) 0%, rgba(13,18,36,.68) 100%),
    linear-gradient(90deg, rgba(13,18,36,.90) 0%, rgba(13,18,36,.34) 82%); }
.el-pagehead__in{ position:relative; z-index:1; padding:56px 0 48px; }
.el-pagehead__eyebrow{ margin:0 0 14px; color:var(--gold); font-weight:700;
  text-transform:uppercase; letter-spacing:2.5px; font-size:13px;
  display:inline-flex; align-items:center; gap:12px; }
.el-pagehead__eyebrow:before{ content:""; width:30px; height:3px; border-radius:2px; background:var(--gold); }
.el-pagehead__title{ font-family:'Poppins',sans-serif; color:#fff; font-weight:700;
  font-size:42px; line-height:1.12; letter-spacing:-.5px; margin:0; max-width:22ch;
  text-shadow:0 2px 16px rgba(0,0,0,.65), 0 1px 3px rgba(0,0,0,.55); }

/* ---- FIL D'ARIANE ---- */
.el-crumbs{ margin-top:20px; font-size:13.5px; display:flex; flex-wrap:wrap;
  align-items:center; gap:9px; color:rgba(255,255,255,.72); }
.el-crumbs a{ color:rgba(255,255,255,.82); font-weight:500; transition:color .18s; }
.el-crumbs a:hover{ color:var(--gold); }
.el-crumbs__sep{ color:rgba(255,255,255,.40); }
.el-crumbs__cur{ color:#fff; font-weight:600; }

/* ---- TITRE HÉRITÉ EN CONTENU : masqué (le H1 est désormais dans le bandeau) ---- */
.eup-elbilia .blog-content .p-padding,
.eup-elbilia .contact-wrapper .p-padding,
.eup-elbilia .protfolio .p-padding,
.eup-elbilia .blog-wrapper .p-padding{ display:none; }

/* ---- ARTICLE : largeur de lecture, rythme typographique, suppression du filigrane ---- */
.eup-elbilia .blog-content{ background:#fff; }
.eup-elbilia .int2{ background:none !important; min-height:0 !important; }
.eup-elbilia .blog-content .contents,
.eup-elbilia .contents{
  max-width:72ch; margin-left:auto; margin-right:auto;
  color:#3a414d; font-family:'Inter',sans-serif; font-size:17px; line-height:1.8;
  letter-spacing:0; font-weight:400; text-align:left;
}
.eup-elbilia .contents p{ margin:0 0 18px; text-align:left; }
/* Neutralise les styles « collés depuis Word » (MsoNormal, Times New Roman, tailles en pt)
   pour homogénéiser sur Inter et un rythme de lecture premium. */
.eup-elbilia .contents p,
.eup-elbilia .contents span,
.eup-elbilia .contents li,
.eup-elbilia .contents font{
  font-family:'Inter',sans-serif !important; font-size:17px !important; line-height:1.8 !important; }
.eup-elbilia .contents .MsoNormal{ margin:0 0 18px !important; }
.eup-elbilia .contents h2 span,
.eup-elbilia .contents h3 span,
.eup-elbilia .contents h4 span{ font-size:inherit !important; font-family:'Poppins',sans-serif !important; }
.eup-elbilia .contents strong{ color:var(--ink); font-weight:600; }
.eup-elbilia .contents h2,
.eup-elbilia .contents h3,
.eup-elbilia .contents h4{ font-family:'Poppins',sans-serif; color:var(--navy);
  font-weight:700; line-height:1.25; margin:34px 0 12px; letter-spacing:-.2px; }
.eup-elbilia .contents h2{ font-size:26px; }
.eup-elbilia .contents h3{ font-size:21px; }
.eup-elbilia .contents h4{ font-size:18px; }
.eup-elbilia .contents ul{ list-style:none; padding-left:0; margin:18px 0; }
.eup-elbilia .contents ul li{ position:relative; padding-left:30px; margin:0 0 12px; }
.eup-elbilia .contents ul li:before{
  content:""; position:absolute; left:5px; top:.62em; width:9px; height:9px;
  margin:0; border-radius:50%; background:var(--gold); color:transparent; }
.eup-elbilia .contents a{ color:var(--navy); font-weight:600;
  text-decoration:underline; text-underline-offset:2px; }
.eup-elbilia .contents a:hover{ color:var(--gold-d); }
.eup-elbilia .contents img{ border-radius:10px; box-shadow:0 14px 34px rgba(17,32,59,.12);
  margin:22px auto; }

/* ---- FORMULAIRES (contact / inscription) : section claire + carte blanche ---- */
.eup-elbilia .contact-wrapper{ background:var(--paper) !important; }
.eup-elbilia .contact-wrapper:before{ display:none !important; }
.eup-elbilia .contact-wrapper .section-title{ color:var(--navy); }
.eup-elbilia .contact-wrapper form{
  margin-top:0; background:#fff; border:1px solid var(--line); border-radius:16px;
  padding:34px 30px; box-shadow:0 20px 50px rgba(17,32,59,.10); }
.eup-elbilia .contact-wrapper .form-control,
.eup-elbilia .contact-wrapper input,
.eup-elbilia .contact-wrapper textarea{
  background:#fff; border:1.5px solid var(--line); border-radius:10px;
  color:var(--ink); font-family:'Inter',sans-serif; font-size:15px;
  padding:13px 16px; box-shadow:none; height:auto; margin:0 0 16px; }
.eup-elbilia .contact-wrapper textarea{ min-height:130px; resize:vertical; }
.eup-elbilia .contact-wrapper .form-control:focus{
  border-color:var(--gold); box-shadow:0 0 0 3px rgba(240,168,24,.18); outline:none; }
.eup-elbilia .contact-wrapper .form-control::placeholder{
  color:#9aa3b5; text-transform:none; letter-spacing:0; font-weight:400; }
.eup-elbilia .contact-wrapper label{ color:var(--ink); font-weight:600; font-size:14px; }
.eup-elbilia .contact-wrapper .btn,
.eup-elbilia .contact-wrapper .send-form,
.eup-elbilia .contact-wrapper .costom-btn{
  background:var(--gold); color:var(--navy); border:0; border-radius:12px;
  font-family:'Poppins',sans-serif; font-weight:700; font-size:16px;
  text-transform:none; letter-spacing:0; padding:14px 22px; cursor:pointer;
  transition:transform .18s var(--ease-standard,ease), background .18s, box-shadow .18s; }
.eup-elbilia .contact-wrapper .btn:hover,
.eup-elbilia .contact-wrapper .send-form:hover,
.eup-elbilia .contact-wrapper .costom-btn:hover{
  background:var(--gold-d); color:var(--navy);
  transform:translateY(-2px); box-shadow:0 12px 26px rgba(16,24,44,.22); border:0; }
.eup-elbilia .contact-wrapper .alert{ border-radius:10px; }

/* ---- CARTE GOOGLE (contact) : encadrée et dimensionnée ---- */
.eup-elbilia .content .google-map{ max-width:var(--container); margin:0 auto; padding:42px 15px 0; }
.eup-elbilia .google-map iframe{ width:100%; height:360px; border:0; display:block;
  border-radius:14px; box-shadow:0 14px 34px rgba(17,32,59,.12); background:#eef0f4; }

/* ---- DOCUMENTS PRATIQUES : liste de cartes cliquables premium ---- */
.eup-elbilia .pdf_tel{ margin:0 0 12px; }
.eup-elbilia .pdf_tel a{
  display:flex; align-items:center; gap:14px; background:#fff; color:var(--navy);
  border:1px solid var(--line); border-left:4px solid var(--gold); border-radius:12px;
  padding:16px 20px; font-family:'Inter',sans-serif; font-weight:500; font-size:15.5px;
  box-shadow:0 6px 18px rgba(17,32,59,.06);
  transition:transform .2s var(--ease-standard,ease), box-shadow .2s, border-color .2s; }
.eup-elbilia .pdf_tel a:hover{
  background:#fff; color:var(--navy); transform:translateY(-3px);
  box-shadow:0 16px 34px rgba(17,32,59,.14); border-left-color:var(--gold-d); }
.eup-elbilia .pdf_tel a i.fa{ color:var(--gold-d); margin-right:0; font-size:22px; }
.eup-elbilia .pdf_tel a:hover i.fa{ color:var(--gold-d); }
.eup-elbilia .blog-content .int1 .int2{ max-width:820px; margin:0 auto; }

/* ---- MÉDIATHÈQUE : pilules de filtre premium ---- */
.eup-elbilia #filter li a{
  border-radius:999px; background:#fff; color:var(--navy); border:1px solid var(--line);
  font-family:'Inter',sans-serif; font-weight:600; font-size:13px; letter-spacing:.3px;
  padding:8px 18px; margin:4px; transition:.18s; }
.eup-elbilia #filter li a.active,
.eup-elbilia #filter li a:hover,
.eup-elbilia #filter li a:focus{ background:var(--navy); color:#fff; border-color:var(--navy); }

/* ---- ACTUALITÉS (liste) : cartes premium (lift + accent or) ---- */
.eup-elbilia .blog-wrapper .it_blog{ margin-bottom:30px; }
.eup-elbilia .blog-wrapper .blog-container,
.eup-elbilia .blog-wrapper .blog-date-wrapper{ border-color:var(--line); }
.eup-elbilia .blog-wrapper .blog-container{
  border-width:1px 1px 0 1px; border-radius:14px 14px 0 0; background:#fff;
  transition:box-shadow .25s; }
.eup-elbilia .blog-wrapper .blog-container h2{ font-family:'Poppins',sans-serif;
  font-size:18px; letter-spacing:0; line-height:1.35; }
.eup-elbilia .blog-wrapper .blog-container h2 a{ color:var(--navy); }
.eup-elbilia .blog-wrapper .blog-container h2 a:hover{ color:var(--gold-d); }
.eup-elbilia .blog-wrapper .blog-date-wrapper{ background:var(--gold);
  border:0; border-radius:0 0 14px 14px; }
.eup-elbilia .blog-wrapper .blog-date-wrapper a{ color:var(--navy); font-weight:700; font-style:normal; }
.eup-elbilia .blog-wrapper .blog-date-wrapper a:hover{ color:var(--navy-d); }

/* ---- RESPONSIVE bandeau / contenu ---- */
@media (max-width:991px){
  .el-pagehead__title{ font-size:34px; }
  .el-pagehead__in{ padding:46px 0 40px; }
}
@media (max-width:600px){
  .el-pagehead__title{ font-size:27px; }
  .el-pagehead__in{ padding:38px 0 32px; }
  .el-hero__eyebrow{ font-size:12px; letter-spacing:2px; }
  .el-hero__eyebrow:before,.el-hero__eyebrow:after{ width:20px; }
  .eup-elbilia .contents{ font-size:16px; }
  .eup-elbilia .contact-wrapper form{ padding:24px 18px; }
}

/* ============================================================
   HÉRO ACCUEIL — BANNIÈRE RENTRÉE (backtoschool), affichée proprement
   (ratio naturel, sans voile ni texte superposé) + barre de CTA.
   ============================================================ */
.el-visually-hidden{ position:absolute !important; width:1px; height:1px; padding:0;
  margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.el-herobanner{ background:#001e4a; }
/* Cadre relatif = l'image sert d'arrière-plan aux boutons (superposés, image NON floutée).
   PLEINE LARGEUR : la bannière occupe 100% de l'écran sur ordinateur (plus de max-width 1333px). */
.el-herobanner__frame{ position:relative; width:100%; max-width:none; margin:0; }
.el-herobanner__media{ display:block; }
.el-herobanner__media img{ width:100%; height:auto; display:block; }
/* Voile dégradé net en bas (pas de flou) pour garder les boutons lisibles sur l'image */
.el-herobanner__frame::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:46%;
  background:linear-gradient(to top, rgba(0,20,55,.80) 0%, rgba(0,20,55,.34) 55%, rgba(0,20,55,0) 100%);
  pointer-events:none; }
.el-herobanner__cta{ position:absolute; left:0; right:0; bottom:0; z-index:2;
  display:flex; gap:18px; justify-content:center; align-items:center; flex-wrap:wrap;
  padding:0 15px clamp(14px,3.6%,34px); }
.el-herobanner__cta .el-btn{ box-shadow:0 8px 24px -8px rgba(0,0,0,.55); }
@media (max-width:600px){
  /* MOBILE : la bannière est très large (ratio 2.9) donc minuscule en hauteur sur téléphone,
     et les boutons superposés en masquaient la moitié. On la recadre (ratio 2.2 = +33% de
     hauteur) ET on descend les boutons SOUS la photo : l'image occupe toute sa hauteur, sans
     rien par-dessus. Pour une vraie grande image verticale, le client peut charger une
     « Bannière version TÉLÉPHONE » depuis /admin (classe .has-mob = affichée en entier). */
  .el-herobanner__media img{ aspect-ratio:2.2/1; height:auto; object-fit:cover; object-position:50% 50%; }
  .el-herobanner__media img.has-mob{ aspect-ratio:auto; object-fit:contain; }
  .el-herobanner__frame::after{ display:none; }          /* plus de voile : rien ne recouvre la photo */
  .el-herobanner__cta{ position:static; gap:8px; padding:12px 10px 14px; }
  .el-herobanner__cta .el-btn{ font-size:12.5px; padding:9px 14px; gap:5px; }
  .el-herobanner__cta .el-btn svg{ width:11px; height:11px; }
}
@media (max-width:380px){
  .el-herobanner__cta .el-btn{ font-size:11px; padding:6px 10px; }
}

/* ============================================================
   GODMODE v3 — ÉLÉVATION MAÎTRE (exécution seulement — direction conservée)
   Typographie fluide (clamp), rythme éditorial, équilibrage des lignes,
   niveaux d'élévation, focus, motion de page. Overrides additifs.
   ============================================================ */

/* Transitions de page fluides (MPA View Transitions) — crossfade sobre sans flash.
   Ignoré par les navigateurs non compatibles ; le fondu respecte prefers-reduced-motion. */
@view-transition{ navigation:auto; }

/* Niveaux d'élévation cohérents + courbes de motion, portés par le thème */
.eup-elbilia{
  --shadow-1:0 1px 2px rgba(16,24,44,.06), 0 3px 8px rgba(16,24,44,.06);
  --shadow-2:0 10px 28px rgba(16,24,44,.10);
  --shadow-3:0 20px 46px rgba(16,24,44,.15);
  --ease-standard:cubic-bezier(.2,0,0,1);
  --dur-base:.24s;
  /* rendu typographique de maître */
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}

/* ---- Typographie FLUIDE (échelle modulaire, mêmes rôles, direction intacte) ---- */
.eup-elbilia .el-hero__h1{ font-size:clamp(2.4rem, 1.35rem + 3.5vw, 4rem); line-height:1.03; text-wrap:balance; }
.eup-elbilia .el-hero__sub{ font-size:clamp(1.05rem, .82rem + 1.05vw, 1.62rem); text-wrap:balance; }
.eup-elbilia .el-h2{ font-size:clamp(1.7rem, 1.2rem + 1.6vw, 2.4rem); text-wrap:balance; }
.eup-elbilia .el-excel h2{ font-size:clamp(1.9rem, 1.3rem + 2vw, 2.6rem); text-wrap:balance; }
.eup-elbilia .el-stats__title{ font-size:clamp(1.5rem, 1.1rem + 1.35vw, 2rem); text-wrap:balance; }
.eup-elbilia .el-stat__n{ font-size:clamp(2.2rem, 1.55rem + 2.2vw, 3rem); letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.eup-elbilia .el-cta__t{ font-size:clamp(1.25rem, 1rem + 1vw, 1.6rem); text-wrap:balance; }
.eup-elbilia .el-cycle__body h3{ text-wrap:balance; }

/* Équilibrage typographique : évite veuves/orphelines sur le corps de texte */
.eup-elbilia p{ text-wrap:pretty; }

/* Rythme vertical fluide (échelle 4/8, respire davantage sur grands écrans) */
.eup-elbilia .el-section{ padding-block:clamp(3.5rem, 2rem + 4.5vw, 6.5rem); }

/* Élévation cohérente des cartes signature (niveaux, pas de valeurs ad hoc) */
.eup-elbilia .el-cycle{ box-shadow:var(--shadow-1); }
.eup-elbilia .el-cycle:hover{ box-shadow:var(--shadow-3); }
.eup-elbilia .el-estab__card{ box-shadow:var(--shadow-1); }
.eup-elbilia .el-estab__card:hover{ box-shadow:var(--shadow-3); }

/* Focus-visible net et cohérent à la marque (renfort local) */
.eup-elbilia a:focus-visible,
.eup-elbilia button:focus-visible,
.eup-elbilia .el-btn:focus-visible,
.eup-elbilia input:focus-visible,
.eup-elbilia textarea:focus-visible{
  outline:3px solid var(--gold); outline-offset:3px; border-radius:10px;
}

/* Finition boutons : niveau d'élévation cohérent au survol */
.eup-elbilia .el-btn--pink:hover,
.eup-elbilia .el-btn--navy:hover,
.eup-elbilia .el-btn--mauve:hover,
.eup-elbilia .el-btn--white:hover{ box-shadow:var(--shadow-2); }

/* ============================================================
   Pages de contenu (philosophie, cycles, établissement, vie
   scolaire…) : textes centrés « au milieu de la page ».
   ============================================================ */
.blog-content .contents{max-width:880px;margin-left:auto;margin-right:auto;text-align:center;}
.blog-content .contents img{margin-left:auto !important;margin-right:auto !important;display:block;float:none !important;}
.blog-content .contents ul,.blog-content .contents ol{display:inline-block;text-align:left;margin-left:auto;margin-right:auto;}
.blog-content .contents table{margin-left:auto;margin-right:auto;}
.blog-content .section-title{text-align:center;}
/* Force le centrage du texte des paragraphes (demande client) */
.blog-content .contents,
.blog-content .contents p,
.blog-content .contents span,
.blog-content .contents div{text-align:center !important;}
.blog-content .contents ul,
.blog-content .contents ol{text-align:left !important;}
/* Resserre la colonne de contenu -> textes plus au centre (demande client) */
.blog-content .contents{max-width:680px !important;margin-left:auto !important;margin-right:auto !important;padding-left:12px;padding-right:12px;}
/* Centrage STRICT au milieu de la page : on annule le décalage de colonne du gabarit */
.blog-content .row{display:block;text-align:center;}
.blog-content .row > [class*="col-"]{float:none !important;display:inline-block;vertical-align:top;
  margin-left:auto !important;margin-right:auto !important;text-align:center;}
.blog-content .col-md-offset-2{margin-left:auto !important;}
.blog-content .contents{max-width:680px !important;margin-left:auto !important;margin-right:auto !important;}
/* Override final : colonne pleine largeur + contenu centré = pile au milieu */
.blog-content .row{display:block !important;text-align:center;}
.blog-content .row > [class*="col-"]{display:block !important;float:none !important;width:100% !important;
  margin:0 auto !important;left:auto !important;right:auto !important;}
.blog-content .contents{max-width:680px !important;margin:0 auto !important;}
.blog-content .int1,.blog-content .int2{width:auto !important;margin:0 auto !important;float:none !important;}

/* ============================================================
   MENU MOBILE (hamburger + tiroir) + logos partenaires en ligne
   ============================================================ */
.el-burger{ display:none; flex-direction:column; justify-content:center; gap:5px; width:44px; height:44px; padding:9px; background:none; border:0; cursor:pointer; }
.el-burger span{ display:block; height:2.5px; width:100%; background:#16284A; border-radius:2px; transition:transform .3s, opacity .3s; }
.el-burger.is-open span:nth-child(1){ transform:translateY(7.5px) rotate(45deg); }
.el-burger.is-open span:nth-child(2){ opacity:0; }
.el-burger.is-open span:nth-child(3){ transform:translateY(-7.5px) rotate(-45deg); }

.el-mobmenu{ display:none; position:fixed; inset:0; z-index:60; background:rgba(22,40,74,.4); opacity:0; pointer-events:none; transition:opacity .25s; }
.el-mobmenu.open{ opacity:1; pointer-events:auto; }
.el-mobmenu__inner{ position:absolute; top:0; right:0; width:min(87vw,350px); height:100%; background:#fff; box-shadow:-10px 0 34px rgba(0,0,0,.22); padding:20px 18px 44px; overflow-y:auto; -webkit-overflow-scrolling:touch; transform:translateX(100%); transition:transform .32s cubic-bezier(.2,.8,.2,1); }
.el-mobmenu.open .el-mobmenu__inner{ transform:none; }
.el-mobmenu__top{ display:block; padding:13px 8px; font-weight:700; font-size:15px; color:#16284A; text-transform:uppercase; letter-spacing:.4px; border-bottom:1px solid #eef0f4; text-decoration:none; }
.el-mobmenu__group{ padding:12px 0 4px; border-bottom:1px solid #eef0f4; }
.el-mobmenu__group>span{ display:block; padding:4px 8px; font-weight:800; font-size:12px; letter-spacing:1px; text-transform:uppercase; color:#F0A818; }
.el-mobmenu__group>a{ display:block; padding:9px 8px 9px 18px; font-size:14.5px; color:#3a4256; text-decoration:none; }
.el-mobmenu__group>a:hover{ color:#16284A; }
.el-mobmenu__cta{ display:block; text-align:center; margin-top:18px; background:#F0A818; color:#16284A; font-weight:700; padding:14px; border-radius:999px; text-decoration:none; }
body.el-menu-open{ overflow:hidden; }

@media (max-width:991px){
  .el-mobmenu{ display:block; }
  .el-nav{ display:flex !important; align-items:center; justify-content:space-between; gap:10px; }
  .el-burger{ display:flex; order:2; }
  .el-brand{ order:1; margin:0 auto 0 0; }
  .el-partnerbar{ --pb-gap:34px; --pb-speed:40s; }
  .el-partnerbar__track img{ height:34px; }
  .el-partnerbar__logos{ gap:22px; flex-wrap:nowrap; }
  .el-partnerbar__logos img{ height:34px; }
}
@media (max-width:600px){
  .el-partnerbar{ --pb-gap:26px; --pb-speed:30s; padding:7px 0; }
  .el-partnerbar__track img{ height:28px; }
  .el-partnerbar__logos{ gap:12px; flex-wrap:nowrap; justify-content:center; }
  .el-partnerbar__logos img{ height:auto; max-height:28px; max-width:31%; object-fit:contain; }
  .el-brand img{ height:46px; }
  .el-brand__tag{ font-size:9px; }
}

/* ============================================================
   Carte de localisation dans le footer (colonne de droite)
   ============================================================ */
.el-footer__grid{ grid-template-columns:1.5fr 1.2fr 1.3fr; }
.el-footer__map a{ display:block; border-radius:12px; overflow:hidden; box-shadow:0 8px 22px rgba(0,0,0,.2); line-height:0; }
.el-footer__map iframe{ display:block; width:100%; height:150px; filter:grayscale(.12); }
.el-footer__mapaddr{ display:block; margin-top:9px; font-size:12.5px; opacity:.92; }
@media (max-width:991px){
  .el-footer__grid{ grid-template-columns:1fr 1fr; }
  .el-footer__map{ grid-column:1 / -1; }
  .el-footer__map iframe{ height:170px; }
}
@media (max-width:600px){ .el-footer__grid{ grid-template-columns:1fr; } }