/* =====================================================================
   user.css — Identité visuelle « Statistiques d'électrification du Sénégal »
   Joomla 5 · template Cassiopeia
   Emplacement : /media/templates/site/cassiopeia/css/user.css
   Après enregistrement : Système → Vider le cache, puis Ctrl+Maj+R.
   ---------------------------------------------------------------------
   Palette : bleu ardoise (#1E2A3A / #4A6FA5), accent corail (#E94F37),
   fond clair (#F0F4F8). Boutons à coins arrondis modernes ; le corail
   est réservé aux états de survol.
   ---------------------------------------------------------------------
   VERSION CONSOLIDÉE — les blocs « AJUSTEMENT » et les patchs successifs
   ont été fusionnés dans les sections correspondantes. Plus aucun
   sélecteur n'est déclaré deux fois.
   ===================================================================== */

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

/* ---------------------------------------------------------------------
   1. VARIABLES DE MARQUE
   --------------------------------------------------------------------- */
:root{
  --gn-primary:#1E2A3A;      /* bleu ardoise foncé — titres, header, footer */
  --gn-secondary:#4A6FA5;    /* bleu moyen — liens, boutons */
  --gn-secondary-deep:#3A5C8F;
  --gn-accent:#E94F37;       /* corail — survols, accents */
  --gn-accent-deep:#C73D27;
  --gn-success:#2E7D32;

  --gn-bg:#F0F4F8;           /* fond général clair */
  --gn-surface:#FFFFFF;      /* cartes, blocs */
  --gn-surface-alt:#EEF2F7;  /* fond alterné */
  --gn-ink:#1E2A3A;          /* texte principal */
  --gn-ink-soft:#5B6B7F;     /* texte secondaire */
  --gn-line:#DEE2E6;         /* bordures */

  --gn-radius:14px;
  --gn-radius-sm:10px;
  --gn-radius-btn:10px;      /* coins arrondis modernes des boutons */
  --gn-shadow:0 1px 2px rgba(30,42,58,.05),0 8px 24px rgba(30,42,58,.07);
  --gn-shadow-lift:0 6px 14px rgba(30,42,58,.08),0 18px 42px rgba(74,111,165,.14);

  --gn-font:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;

  /* En-tête institutionnel */
  --gn-flag-h:52px;          /* hauteur du drapeau */
  --gn-title-size:30px;      /* taille du titre du site */

  /* Iframes (wrapper) */
  --gp-iframe-zoom:.7;       /* .7 = équivalent zoom navigateur 70 % */
  --gp-iframe-h:80vh;        /* hauteur visible du cadre */

  /* Remappage des variables Bootstrap / Cassiopeia */
  --bs-primary:#4A6FA5;
  --bs-primary-rgb:74,111,165;
  --bs-link-color:#4A6FA5;
  --bs-link-hover-color:#E94F37;
  --link-color:#4A6FA5;
  --link-hover-color:#E94F37;
}

/* ---------------------------------------------------------------------
   2. TYPOGRAPHIE & FOND
   --------------------------------------------------------------------- */
body{
  font-family:var(--gn-font);
  color:var(--gn-ink);
  background-color:var(--gn-bg);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4,h5,h6,
.page-header h1,.page-header h2{
  font-family:var(--gn-font);
  font-weight:700;
  letter-spacing:-.01em;
  line-height:1.25;
  color:var(--gn-primary);
}

/* Titre / nom du site dans l'en-tête */
.site-title,.container-header .site-title,
h1.title,.brand a{
  font-family:var(--gn-font);
  font-weight:700;
  color:var(--gn-primary);
}

/* ---------------------------------------------------------------------
   3. LIENS
   --------------------------------------------------------------------- */
a{color:var(--gn-secondary);text-decoration:none;transition:color .2s ease}
a:hover,a:focus{color:var(--gn-accent)}
a:focus-visible{outline:3px solid var(--gn-secondary);outline-offset:2px;border-radius:4px}

/* ---------------------------------------------------------------------
   4. EN-TÊTE — bandeau et hauteurs
   --------------------------------------------------------------------- */
.container-header,
.header{
  background:var(--gn-primary);
}
.container-header a,
.container-header .site-title{
  color:#fff;
}

/* On neutralise le rembourrage vertical de Cassiopeia : la hauteur est
   dictée par le contenu (voir .site-brand en section 4b). */
.container-header{
  padding-top:0 !important;
  padding-bottom:0 !important;
}
.container-header .grid-child,
.container-header .container-nav{
  min-height:0;
  padding-top:.5rem;
  padding-bottom:.5rem;
  align-items:center;
}
.container-header .navbar-brand,
.container-header .brand-logo{
  padding-top:0;
  padding-bottom:0;
  margin-bottom:0;
}

/* Logo par défaut du template masqué (l'en-tête institutionnel le remplace) */
.navbar-brand .brand-logo .logo,
.navbar-brand img.logo{
  display:none !important;
}

/* ---------------------------------------------------------------------
   4b. EN-TÊTE INSTITUTIONNEL (module Custom du header)
   --------------------------------------------------------------------- */
.site-brand{
  display:flex;
  align-items:center;      /* titre centré verticalement dans la bannière */
  gap:18px;
  min-height:0;
  padding-left:16px;
  padding-top:16px;
  padding-bottom:26px;     /* respiration sous le bloc institutionnel */
}

/* Bloc emblème : drapeau + devise + ministère empilés */
.site-brand__emblem{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:1px;
  flex:0 0 auto;
  text-align:center;
}
.site-brand__emblem p{margin:0;line-height:1.25}

.site-brand__flag{
  height:var(--gn-flag-h);
  width:auto;
  margin-bottom:0;
}
.site-brand__sub{
  font-weight:600;
  font-size:.72rem;
  line-height:1.2;
  color:rgba(255,255,255,.92);
}
.site-brand__motto{
  font-style:italic;
  font-size:.65rem;
  line-height:1.2;
  color:rgba(255,255,255,.72);
}
.site-brand__ministry{
  font-weight:600;
  font-size:.63rem;
  line-height:1.2;
  text-transform:uppercase;
  letter-spacing:.02em;
  color:#fff;
  margin-top:0 !important;
}

/* Séparateur vertical entre l'emblème et le titre */
.site-brand__title-wrap{
  padding-left:18px;
  border-left:2px solid rgba(255,255,255,.15);
  flex:1 1 auto;
}

/* --- LE TITRE ET SON FILET DÉGRADÉ ---------------------------------
   Le filet doit démarrer exactement sur la première lettre. Pour cela
   la boîte du <h1> doit faire la largeur de son texte, pas celle du
   conteneur : d'où `width:max-content`. Aucun décalage (left/padding)
   n'est appliqué au pseudo-élément.
   Si le titre contient un <span>, voir la variante en fin de section. */
.site-brand__title{
  position:relative;
  display:block;
  width:max-content;
  max-width:100%;
  margin:0;
  padding:0 0 12px;
  text-indent:0;
  font-family:var(--gn-font);
  font-weight:800;
  font-size:var(--gn-title-size);
  line-height:1.15;
  letter-spacing:-.02em;
  color:#fff;
}
.site-brand__title::after{
  content:"";
  position:absolute;
  left:0;
  right:auto;
  bottom:0;
  width:100%;
  height:2px;
  margin:0;
  padding:0;
  border-radius:3px;
  background:linear-gradient(100deg,#E5326E 0%,#F7941D 100%);
}

/* VARIANTE si le filet reste décalé : entourez le texte d'un <span>
   dans le module Custom —  <h1 class="site-brand__title"><span>…</span></h1>
   puis décommentez ce bloc. Un inline-block fait toujours exactement
   la largeur de son contenu.

.site-brand__title{ width:auto; padding-bottom:0; }
.site-brand__title::after{ display:none; }
.site-brand__title > span{
  display:inline-block;
  position:relative;
  padding-bottom:12px;
}
.site-brand__title > span::after{
  content:"";
  position:absolute;
  left:0; bottom:0;
  width:100%; height:2px;
  border-radius:3px;
  background:linear-gradient(100deg,#E5326E 0%,#F7941D 100%);
}
*/

/* ---------------------------------------------------------------------
   5. MENU PRINCIPAL (horizontal)
   --------------------------------------------------------------------- */
#mod-menu1.mod-menu,
.mod-menu.nav{
  display:flex !important;
  flex-direction:row !important;
  flex-wrap:wrap;
  gap:1.15rem;
  list-style:none;
  padding-left:0;
  margin-bottom:0;
  align-items:center;
}
#mod-menu1.mod-menu > .nav-item,
.mod-menu.nav > .nav-item{
  display:inline-block !important;
  float:none !important;
  width:auto !important;
}
.mod-menu .nav-item > a{
  font-family:var(--gn-font);
  font-weight:600;
  color:var(--gn-secondary);
  position:relative;
  padding:.25rem 0;
  font-size:.92rem;
  transition:color .2s ease;
}
.mod-menu .nav-item > a:hover,
.mod-menu .nav-item.current > a,
.mod-menu .nav-item.active > a{
  color:var(--gn-accent);
}
/* Soulignement animé sous l'onglet actif / survolé */
.mod-menu .nav-item > a::after{
  content:"";position:absolute;left:0;right:0;bottom:-2px;height:3px;
  border-radius:3px;background:var(--gn-accent);
  transform:scaleX(0);transform-origin:left;
  transition:transform .28s cubic-bezier(.4,0,.2,1);
}
.mod-menu .nav-item > a:hover::after,
.mod-menu .nav-item.current > a::after,
.mod-menu .nav-item.active > a::after{transform:scaleX(1)}

/* ---------------------------------------------------------------------
   6. BOUTONS (coins arrondis modernes, corail au survol)
   --------------------------------------------------------------------- */
.btn-primary,
button.btn-primary,
.btn.btn-primary,
.gn-btn{
  font-family:var(--gn-font);font-weight:600;
  background:var(--gn-secondary);
  border:1px solid var(--gn-secondary-deep);
  color:#fff;
  padding:.6rem 1.3rem;
  border-radius:var(--gn-radius-btn);
  box-shadow:0 4px 12px rgba(74,111,165,.22);
  transition:background .2s ease,border-color .2s ease,transform .18s ease,box-shadow .18s ease;
}
.btn-primary:hover,
button.btn-primary:hover,
.btn.btn-primary:hover,
.gn-btn:hover{
  background:var(--gn-accent);
  border-color:var(--gn-accent-deep);
  color:#fff;
  transform:translateY(-2px);
  box-shadow:0 8px 20px rgba(233,79,55,.30);
}
.btn-primary:active,
.btn.btn-primary:active,
.gn-btn:active{
  background:var(--gn-accent-deep);
  border-color:var(--gn-accent-deep);
  transform:translateY(0);
}

/* Bouton secondaire / contour */
.btn-secondary,
.btn-outline-primary,
.gn-btn--ghost{
  font-family:var(--gn-font);font-weight:600;
  background:transparent;color:var(--gn-secondary);
  border:1.5px solid var(--gn-line);
  padding:.6rem 1.3rem;border-radius:var(--gn-radius-btn);
  transition:all .2s ease;
}
.btn-secondary:hover,
.btn-outline-primary:hover,
.gn-btn--ghost:hover{
  border-color:var(--gn-accent);
  color:var(--gn-accent);
  transform:translateY(-2px);
}

/* Bouton succès (vert) */
.btn-success{
  background:var(--gn-success);
  border:1px solid var(--gn-success);
  color:#fff;border-radius:var(--gn-radius-btn);
  font-weight:600;
}

/* ---------------------------------------------------------------------
   7. CARTES / BLOCS (modules, articles)
   --------------------------------------------------------------------- */
.card,
.moduletable,
.item-page{
  background:var(--gn-surface);
  border:1px solid var(--gn-line);
  border-radius:var(--gn-radius);
  box-shadow:var(--gn-shadow);
}
.card{
  transition:transform .22s ease,box-shadow .22s ease;
}
.card:hover{
  transform:translateY(-3px);
  box-shadow:var(--gn-shadow-lift);
}

/* Titres de module */
.moduletable > h3,
.moduletable > .module-title,
.card-header{
  font-family:var(--gn-font);font-weight:700;
  color:var(--gn-primary);
  border-bottom:2px solid var(--gn-line);
  padding-bottom:.5rem;
}

/* ---------------------------------------------------------------------
   8. FORMULAIRES & CHAMPS
   --------------------------------------------------------------------- */
.form-control,
.form-select,
input[type="text"],
input[type="email"],
input[type="search"],
select,textarea{
  border:1px solid var(--gn-line);
  border-radius:var(--gn-radius-sm);
  transition:border-color .2s ease,box-shadow .2s ease;
}
.form-control:focus,
.form-select:focus,
input:focus,select:focus,textarea:focus{
  border-color:var(--gn-secondary);
  box-shadow:0 0 0 3px rgba(74,111,165,.18);
  outline:none;
}

/* ---------------------------------------------------------------------
   9. TABLEAUX
   --------------------------------------------------------------------- */
.table thead th{
  background:var(--gn-surface-alt);
  color:var(--gn-primary);
  font-weight:600;
  border-bottom:2px solid var(--gn-line);
}
.table tbody tr:hover{
  background:var(--gn-surface-alt);
}

/* ---------------------------------------------------------------------
   10. PIED DE PAGE — bande fine
   --------------------------------------------------------------------- */
.container-footer,
.footer{
  background:var(--gn-primary);
  color:#fff;
}
.container-footer a,
.footer a{color:#fff}
.container-footer a:hover,
.footer a:hover{color:var(--gn-accent)}

.container-footer{
  padding-top:0 !important;
  padding-bottom:0 !important;
}
.container-footer .grid-child,
.container-footer .footer{
  padding-top:.85rem;
  padding-bottom:.85rem;
  min-height:0;
}
.container-footer p,
.footer p{
  margin-bottom:0;
  font-size:.85rem;
  line-height:1.5;
}
.container-footer .mod-menu,
.footer .mod-menu{
  gap:1rem;
  margin:0;
  padding:0;
}
.container-footer .mod-menu .nav-item > a,
.footer .mod-menu .nav-item > a{ padding:.15rem 0; }
.back-to-top-link{ margin:.25rem 0 0; }

/* ---------------------------------------------------------------------
   11. IFRAMES (wrapper) — dézoom équivalent au zoom navigateur à 70 %
   ---------------------------------------------------------------------
   Principe : on agrandit la boîte de l'iframe de 1/0.7 (~143 %) puis on
   la réduit par transform:scale(.7). Le contenu « voit » un viewport
   plus large et se remet en page — c'est un vrai zoom, pas une simple
   réduction d'image.
   ⚠ Le module/menu Wrapper doit avoir « Hauteur automatique » = Non,
   sinon le script de Joomla recalcule la hauteur et casse l'effet.
   --------------------------------------------------------------------- */
.com-wrapper{
  position:relative;
  width:100%;
  max-width:none;
  height:var(--gp-iframe-h);
  overflow:hidden;
}
.com-wrapper__iframe{
  position:absolute;
  top:0;
  left:0;
  display:block;
  border:0;
  width:calc(100% / var(--gp-iframe-zoom));
  height:calc(100% / var(--gp-iframe-zoom));
  max-width:none;
  transform:scale(var(--gp-iframe-zoom));
  transform-origin:0 0;
}

/* Contenu étendu sur toute la largeur de la grille */
@media (min-width:992px){
  .site-grid > .container-component{
    grid-column: full-start / full-end !important;
    max-width:none !important;
    width:100% !important;
    padding-left:1.5rem;
    padding-right:1.5rem;
  }
}

/* ---------------------------------------------------------------------
   12. BADGES / TAGS
   --------------------------------------------------------------------- */
.badge,.tag{
  background:var(--gn-secondary);
  color:#fff;font-weight:600;
  border-radius:999px;padding:.25em .7em;
}

/* ---------------------------------------------------------------------
   13. PAGE D'ACCUEIL GÉOPORTAIL
   --------------------------------------------------------------------- */
.gp{ max-width:1180px; margin:0 auto; padding:8px 16px 40px; }
.gp section{ margin-bottom:56px; }

.gp-h2{ font-family:var(--gn-font); font-weight:700; font-size:1.5rem;
  line-height:1.25; margin:0 0 16px; }
.gp-h2--blue{ color:var(--gn-secondary); }
.gp-h2--accent{ color:var(--gn-accent); }
.gp p{ color:var(--gn-ink); line-height:1.7; }

/* Bloc bienvenue : logo à gauche, texte à droite */
.gp-welcome{ display:grid; grid-template-columns:300px 1fr; gap:48px; align-items:start; }
.gp-welcome__brand{ display:flex; flex-direction:column; align-items:center; gap:20px; }
.gp-welcome__logo{ width:100%; max-width:260px; height:auto; }
.gp-welcome__eu{ width:70px; height:auto; }

/* Bloc indicateurs : texte à gauche, photo à droite */
.gp-indics{ display:grid; grid-template-columns:1fr 360px; gap:48px; align-items:start; }
.gp-list{ margin:14px 0 0; padding-left:20px; }
.gp-list li{ margin-bottom:8px; line-height:1.6; color:var(--gn-ink); }
.gp-list li strong{ color:var(--gn-primary); }
.gp-indics__media img{ width:100%; height:auto; border-radius:var(--gn-radius);
  box-shadow:var(--gn-shadow); }

/* Clause de non-responsabilité */
.gp-disclaimer{ background:var(--gn-surface-alt); border:1px solid var(--gn-line);
  border-radius:var(--gn-radius); padding:20px 24px; }
.gp-disclaimer__title{ font-weight:700; color:var(--gn-primary); margin:0 0 8px !important; }
.gp-disclaimer p{ font-size:.85rem; color:var(--gn-ink-soft); line-height:1.6; margin:0; }

/* Crédit bas de page */
.gp-credit{ display:flex; align-items:center; gap:12px; }
.gp-credit span{ font-size:.85rem; color:var(--gn-ink-soft); }
.gp-credit img{ height:28px; width:auto; }

/* ---------------------------------------------------------------------
   14. RESPONSIVE
   --------------------------------------------------------------------- */
@media (max-width:900px){
  :root{ --gn-title-size:24px; }
  .site-brand{ gap:14px; padding-bottom:22px; }
  .site-brand__title-wrap{ padding-left:14px; }
}

@media (max-width:820px){
  .gp-welcome,.gp-indics{ grid-template-columns:1fr; gap:28px; }
  .gp-welcome__brand{ flex-direction:row; justify-content:flex-start; }
  .gp-indics__media{ order:-1; }
}

@media (max-width:768px){
  :root{ --gp-iframe-h:65vh; }
  #mod-menu1.mod-menu,
  .mod-menu.nav{ gap:1rem; }
}

@media (max-width:640px){
  :root{ --gn-flag-h:38px; --gn-title-size:19px; }
  .site-brand{
    flex-direction:row;
    align-items:center;
    gap:12px;
    padding-left:8px;
    padding-top:12px;
    padding-bottom:18px;
  }
  .site-brand__title-wrap{ border-left:0; padding-left:0; }
  .site-brand__title{ padding-bottom:8px; }
  .site-brand__motto{ display:none; }   /* on allège sur mobile */
}

@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
}

:root{
  --gp-iframe-zoom:.6;    /* .7 → .6 : le contenu voit un viewport encore plus large */
  --gp-iframe-h:calc(100vh - 190px);
}