/* =====================================================================
   user.css — Identité visuelle « PEC · Côte d'Ivoire »
   Joomla 5 · template Cassiopeia
   Emplacement : /media/templates/site/cassiopeia/css/user.css
   Après enregistrement : Système → Vider le cache, puis Ctrl+Maj+R.
   ---------------------------------------------------------------------
   Structure reprise du CSS du Sénégal (UCS) : mêmes classes, mêmes
   tailles de bannière, de menu et d'iframes. Seule la palette change.
   Palette : vert émeraude (#00633F / #007A4D) et orange (#F7941D), les deux
   couleurs du drapeau ivoirien, sur fond clair légèrement verdi.
   Boutons à coins arrondis ; l'orange est réservé aux survols.
   ===================================================================== */

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

/* ---------------------------------------------------------------------
   1. VARIABLES DE MARQUE
   --------------------------------------------------------------------- */
:root{
  --gn-primary:#00633F;        /* émeraude foncé — titres, en-tête, pied de page */
  --gn-primary-deep:#004F33;   /* départ du dégradé d'en-tête */
  --gn-secondary:#007A4D;      /* émeraude moyen — liens, boutons */
  --gn-secondary-rgb:0,122,77;/* même vert en RGB (ombres, survols, focus) */
  --gn-fresh:#3DD68C;          /* vert clair — fin du filet sous le titre */
  --gn-on-accent:#00331F;      /* texte posé sur l'orange (boutons au survol) */
  --gn-secondary-deep:#00663F;
  --gn-accent:#F7941D;         /* orange — survols, filets, accents */
  --gn-accent-text:#B85C00;    /* orange foncé — texte au survol sur fond clair (contraste AA) */
  --gn-accent-deep:#D97C0B;
  --gn-success:#1E8E3E;

  --gn-bg:#F2F7F3;             /* fond général clair, très légèrement vert */
  --gn-surface:#FFFFFF;        /* cartes, blocs */
  --gn-surface-alt:#EAF2EC;    /* fond alterné */
  --gn-ink:#12261B;            /* texte principal */
  --gn-ink-soft:#55695C;       /* texte secondaire */
  --gn-line:#D9E3DC;           /* bordures */

  --gn-measure:68ch;           /* largeur maximale d'une ligne de texte */

  --gn-radius:14px;
  --gn-radius-sm:10px;
  --gn-radius-btn:10px;        /* coins arrondis des boutons */
  --gn-shadow:0 1px 2px rgba(18,38,27,.05),0 8px 24px rgba(18,38,27,.07);
  --gn-shadow-lift:0 6px 14px rgba(18,38,27,.08),0 18px 42px rgba(var(--gn-secondary-rgb),.14);

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

  /* En-tête institutionnel (mêmes tailles que le Sénégal) */
  --gn-flag-h:40px;            /* hauteur du drapeau */
  --gn-title-size:30px;        /* taille du titre du site */

  /* Iframes (wrapper) — mêmes valeurs que le Sénégal */
  --gp-iframe-zoom:.6;         /* le contenu voit un viewport plus large */
  --gp-iframe-h:calc(100vh - 190px);

  /* Remappage des variables Bootstrap / Cassiopeia */
  --bs-primary:var(--gn-secondary);
  --bs-primary-rgb:var(--gn-secondary-rgb);
  --bs-link-color:var(--gn-secondary);
  --bs-link-hover-color:var(--gn-accent-text);
  --link-color:var(--gn-secondary);
  --link-hover-color:var(--gn-accent-text);
  --cassiopeia-color-primary:var(--gn-secondary);
  --cassiopeia-color-hover:var(--gn-accent-text);
  --cassiopeia-color-link:var(--gn-secondary);
}

/* ---------------------------------------------------------------------
   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);
}

.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-text)}
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:linear-gradient(100deg,var(--gn-primary-deep) 0%,var(--gn-primary) 55%,var(--gn-secondary) 100%);
}

/* Rembourrage vertical de Cassiopeia neutralisé : 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:.25rem;
  padding-bottom:.25rem;
  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;
}

/* Pas d'espace entre l'en-tête et les modules de la position top-a */
.top-a,
.top-a > div,
.container-top-a{
  margin-top:0 !important;
  margin-bottom:0 !important;
  padding-top:0 !important;
  padding-bottom:0 !important;
}

/* ---------------------------------------------------------------------
   4b. EN-TÊTE INSTITUTIONNEL (module Custom du header)
   --------------------------------------------------------------------- */
.site-brand{
  display:flex;
  align-items:center;
  gap:14px;
  min-height:0;
  padding-left:16px;
  padding-top:8px;
  padding-bottom:14px;
}

/* 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:.68rem;
  line-height:1.15;
  color:rgba(255,255,255,.92);
}
.site-brand__motto{
  font-style:italic;
  font-size:.6rem;
  line-height:1.15;
  color:rgba(255,255,255,.72);
}
.site-brand__ministry{
  font-weight:600;
  font-size:.58rem;
  line-height:1.15;
  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,.18);
  flex:1 1 auto;
}

/* Titre et filet dégradé : la boîte du <h1> fait la largeur de son
   texte (width:max-content) pour que le filet démarre sur la première
   lettre. */
.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,#F7941D 0%,var(--gn-fresh) 100%);   /* orange → vert */
}
/*
########################Meunu connexion##############################
*/
/* ===== Menu Connexion en haut à droite ===== */
.container-topbar {
  position: relative;
}
#mod-menu113 {
  position: absolute;
  top: 8px;
  right: 30px;
  z-index: 1000;
  margin: 0;
  padding: 0;
}
#mod-menu113 a {
  color: #fff;
  font-weight: 600;
  text-decoration: none;
}
#mod-menu113 a:hover {
  text-decoration: underline;
}

/* ===== Version téléphone ===== */
@media (max-width: 767.98px) {
  /* Bannière : logos réduits, titre sur toute la largeur */
  #mod-custom112 > div {
    flex-wrap: wrap;
    justify-content: space-between !important;
    padding: 10px 15px !important;
    gap: 10px;
  }
  #mod-custom112 img {
    height: 50px !important;
  }
  #mod-custom112 > div > div {
    order: 3;
    flex-basis: 100%;
  }
  #mod-custom112 h1 {
    font-size: 20px !important;
  }

  /* Connexion : sous la bannière, alignée à droite */
  #mod-menu113 {
    position: static;
    justify-content: flex-end;
    padding: 0 15px 10px;
  }
}
#mod-custom112 img[alt="Banque Mondiale"] {
  height: 60px !important;
  margin-top: 30px;
}
/* ============================================================
   MENU PRINCIPAL — ul#mod-menu1 (classes : mod-menu mod-list nav)
   Barre blanche arrondie, liens en pilules.
   Si l'identifiant du menu PEC n'est pas « mod-menu1 », remplacer
   #mod-menu1 par l'identifiant réel dans tout ce bloc.
   ============================================================ */

/* La liste de premier niveau : en ligne, sur fond blanc */
ul#mod-menu1.mod-menu {
  min-height: 3em;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap;
  align-items: center;
  font-size: 25px;
  margin: 0 !important;
  padding: 4px 10px !important;
  list-style: none !important;
  background: var(--gn-surface);
  border-radius: var(--gn-radius);
  box-shadow: var(--gn-shadow);
}

/* Les <li> de premier niveau */
ul#mod-menu1.mod-menu > li.nav-item {
  display: block !important;
  position: relative;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
}

/* Liens et boutons de sous-menu : vert sur fond blanc, pilule */
ul#mod-menu1.mod-menu > li.nav-item > a,
ul#mod-menu1.mod-menu > li.nav-item > button.mod-menu__toggle-sub {
  display: inline-flex !important;
  align-items: center;
  gap: 7px;
  margin: 0 !important;
  padding: 9px 16px !important;
  border-radius: 999px;

  font-family: var(--gn-font) !important;
  font-size: 17px !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;

  color: var(--gn-secondary) !important;
  text-decoration: none !important;
  white-space: nowrap;

  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  cursor: pointer;
  transition: color .2s ease, background .2s ease;
}

/* Survol : texte orange foncé, pilule très légère */
ul#mod-menu1.mod-menu > li.nav-item > a:hover,
ul#mod-menu1.mod-menu > li.nav-item > button.mod-menu__toggle-sub:hover,
ul#mod-menu1.mod-menu > li.nav-item > button[aria-expanded="true"] {
  color: var(--gn-accent-text) !important;
  background: rgba(var(--gn-secondary-rgb),.08) !important;
}

/* Item actif : pas de bulle, texte orange foncé */
ul#mod-menu1.mod-menu > li.nav-item.current > a,
ul#mod-menu1.mod-menu > li.nav-item.active > a {
  background: transparent !important;
  color: var(--gn-accent-text) !important;
}

/* Intitulé d'un menu parent */
ul#mod-menu1 .mod-menu__heading.nav-header {
  display: inline;
  margin: 0 !important;
  padding: 0 !important;
  font: inherit !important;
  color: inherit !important;
}

/* Flèche */
ul#mod-menu1 .icon-chevron-down {
  display: inline-block;
  font-size: 11px;
  transition: transform .2s ease;
}
ul#mod-menu1 button[aria-expanded="true"] .icon-chevron-down {
  transform: rotate(180deg);
}

/* Sous-menu déroulant */
ul#mod-menu1 > li.nav-item.parent > ul.mod-menu__sub,
ul#mod-menu1 > li.nav-item.deeper > ul.mod-menu__sub {
  position: absolute !important;
  top: calc(100% + 8px) !important;
  left: 0 !important;
  z-index: 9999;

  display: block !important;
  flex-direction: column !important;

  min-width: 240px;
  max-width: min(320px, 90vw);

  margin: 0 !important;
  padding: 8px !important;
  list-style: none !important;

  background: #fff !important;
  border: 1px solid var(--gn-line) !important;
  border-radius: 12px !important;
  box-shadow: 0 12px 32px rgba(18,38,27,.18) !important;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(6px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
}

/* Ouverture (JS Joomla) */
ul#mod-menu1 > li.nav-item > button[aria-expanded="true"] + ul.mod-menu__sub,
ul#mod-menu1 > li.nav-item > ul.mod-menu__sub.show-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

/* Liens du sous-menu */
ul#mod-menu1 ul.mod-menu__sub > li.nav-item > a {
  display: block !important;
  padding: 9px 14px !important;
  border-radius: 8px;
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--gn-ink) !important;
  text-decoration: none !important;
  background: transparent !important;
  transition: color .2s ease, background .2s ease;
}
ul#mod-menu1 ul.mod-menu__sub > li.nav-item > a:hover,
ul#mod-menu1 ul.mod-menu__sub > li.nav-item.active > a {
  color: var(--gn-accent-text) !important;
  background: var(--gn-surface-alt) !important;
}

/* Accessibilité : focus visible sur fond blanc */
ul#mod-menu1 a:focus-visible,
ul#mod-menu1 button:focus-visible {
  outline: 2px solid var(--gn-secondary) !important;
  outline-offset: 2px;
}


/* Le conteneur du module de menu n'a pas de cadre : seule la barre blanche
   ci-dessous est visible (évite le double cadre). */
.card:has(ul#mod-menu1),
.moduletable:has(ul#mod-menu1){
  background:none;
  border:0;
  box-shadow:none;
  border-radius:0;
}
.card:has(ul#mod-menu1):hover{ transform:none; box-shadow:none; }
.card:has(ul#mod-menu1) > .card-body{ padding:0; }

/* Position top-a : un peu d'air sous l'en-tête, et même largeur que le contenu */
.container-top-a{ padding-top:14px !important; }
@media (min-width:992px){
  .site-grid > .container-top-a{
    grid-column: full-start / full-end !important;
    max-width:none !important;
    width:100% !important;
    padding-left:1.5rem;
    padding-right:1.5rem;
  }
}

/* ---------------------------------------------------------------------
   6. BOUTONS (coins arrondis, orange 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(var(--gn-secondary-rgb),.22);
  transition:background .2s ease,border-color .2s ease,color .2s ease,transform .18s ease,box-shadow .18s ease;
}
/* Survol : fond orange, texte vert très foncé (lisible, contraste > 5) */
.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:var(--gn-on-accent);
  transform:translateY(-2px);
  box-shadow:0 8px 20px rgba(247,148,29,.32);
}
.btn-primary:active,
.btn.btn-primary:active,
.gn-btn:active{
  background:var(--gn-accent-deep);
  border-color:var(--gn-accent-deep);
  color:var(--gn-on-accent);
  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-text);
  transform:translateY(-2px);
}

/* Bouton succès */
.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;
}

/* ---------------------------------------------------------------------
   7b. PAGES DE CONTENU (articles Joomla, texte de la page d'accueil)
   --------------------------------------------------------------------- */
.item-page,
.container-component .moduletable{
  padding:clamp(1.25rem,2.4vw,2.25rem) clamp(1.25rem,3.6vw,3.25rem);
}

/* Titres : même graisse et même couleur, quelle que soit leur mise en forme
   dans l'éditeur (les styles en ligne sont neutralisés). */
.item-page h1,
.item-page h2,
.item-page h3,
.item-page h4{
  font-family:var(--gn-font);
  font-weight:700 !important;
  color:var(--gn-primary) !important;
  line-height:1.25;
  letter-spacing:-.01em;
}
.item-page h1{
  position:relative;
  font-size:clamp(1.6rem,2.4vw,2.1rem) !important;
  margin:0 0 1.5rem;
  padding-bottom:1rem;
}
.item-page h1::after{                 /* court filet orange sous le titre de page */
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:56px;
  height:4px;
  border-radius:3px;
  background:var(--gn-accent);
}
.item-page h2,
.item-page h3{                        /* titres de section : un seul style */
  font-size:1.35rem !important;
  margin:2.4rem 0 .9rem;
  padding-left:.85rem;
  border-left:4px solid var(--gn-accent);
}
.item-page h4{ font-size:1.1rem !important; margin:1.6rem 0 .6rem; }

/* Texte : lignes de longueur confortable, interlignes réguliers */
.item-page p,
.item-page ul,
.item-page ol{ max-width:var(--gn-measure); }
.item-page p{ margin:0 0 1.1rem; }
.item-page .com-content-article__body > p:first-of-type{
  font-size:1.125rem;                 /* paragraphe d'introduction */
}
.item-page ul,
.item-page ol{ margin:0 0 1.25rem; padding-left:1.4rem; }
.item-page li{ margin-bottom:.6rem; padding-left:.25rem; line-height:1.65; }
.item-page li::marker{ color:var(--gn-accent); }
.item-page strong{ color:var(--gn-primary); font-weight:700; }

/* ---------------------------------------------------------------------
   7c. PAGE D'ACCUEIL PEC — bloc .pec-home (HTML dans accueil_PEC.html)
   --------------------------------------------------------------------- */
.item-page:has(.pec-home){            /* l'accueil gère ses propres cadres */
  background:none;
  border:0;
  box-shadow:none;
  padding:0;
}
.pec-home{
  max-width:none;                    /* même largeur que l'en-tête et le menu */
  padding:8px 0 40px;
}
.pec-home section{ margin-bottom:56px; }

/* Neutralise la mise en forme d'article (7b) à l'intérieur de l'accueil */
.item-page .pec-home h1,
.item-page .pec-home h2,
.item-page .pec-home h3{
  padding:0;
  border:0;
  max-width:none;
}
.item-page .pec-home h1::after{ display:none; }
.item-page .pec-home h2{
  font-size:clamp(1.45rem,2.3vw,1.9rem) !important;
  margin:0 0 .75rem;
}
.item-page .pec-home h3{
  font-size:1.15rem !important;
  margin:1rem 0 .5rem;
}
.item-page .pec-home p{ max-width:none; margin:0 0 1rem; }

/* --- Bloc d'ouverture ---------------------------------------------- */
.pec-hero{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(1.5rem,5vw,4rem);
  align-items:center;
  background:var(--gn-surface);
  border:1px solid var(--gn-line);
  border-radius:20px;
  box-shadow:var(--gn-shadow);
  padding:clamp(1.25rem,3vw,2.5rem);
}
.pec-hero__title::after{              /* même filet orange que sous le titre des pages */
  content:"";
  display:block;
  width:56px;
  height:4px;
  border-radius:3px;
  background:var(--gn-accent);
  margin-top:1.25rem;
}
.item-page .pec-home .pec-hero h1{
  font-size:clamp(1.9rem,3.3vw,2.8rem) !important;
  line-height:1.12;
  letter-spacing:-.02em;
  margin:0;
}
.item-page .pec-home .pec-hero__text p{ max-width:62ch; }   /* lignes lisibles */
.item-page .pec-home .pec-lead{ font-size:1.15rem; line-height:1.65; }

/* --- Trois fonctionnalités ----------------------------------------- */
.item-page .pec-home .pec-sub{ color:var(--gn-ink-soft); max-width:72ch; }
.pec-cards{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:20px;
  margin-top:1.5rem;
}
.pec-card{
  background:var(--gn-surface);
  border:1px solid var(--gn-line);
  border-radius:var(--gn-radius);
  box-shadow:var(--gn-shadow);
  padding:1.5rem;
}
.item-page .pec-home .pec-card p{ margin:0; color:var(--gn-ink-soft); }
.pec-ico{
  position:relative;
  width:48px;
  height:48px;
  border-radius:12px;
  background:rgba(var(--gn-secondary-rgb),.1);
}
.pec-ico::before{
  content:"";
  position:absolute;
  inset:12px;
  background:var(--gn-secondary);
  -webkit-mask:var(--ico) center/contain no-repeat;
  mask:var(--ico) center/contain no-repeat;
}
.pec-ico--layers{ --ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4l8 4l-8 4l-8-4z'/%3E%3Cpath d='M4 12l8 4l8-4'/%3E%3Cpath d='M4 16l8 4l8-4'/%3E%3C/svg%3E"); }
.pec-ico--map{ --ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7l6-3l6 3l6-3v13l-6 3l-6-3l-6 3z'/%3E%3Cpath d='M9 4v13'/%3E%3Cpath d='M15 7v13'/%3E%3C/svg%3E"); }
.pec-ico--chart{ --ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 19h16'/%3E%3Cpath d='M7 19v-6'/%3E%3Cpath d='M12 19v-11'/%3E%3Cpath d='M17 19v-3'/%3E%3C/svg%3E"); }

/* --- Bandeau de conclusion ----------------------------------------- */
.pec-band{
  background:var(--gn-primary);
  border-radius:20px;
  padding:clamp(1.5rem,4vw,3rem);
  color:#fff;
}
.pec-band::before{                    /* même filet orange que sous le titre des pages */
  content:"";
  display:block;
  width:56px;
  height:4px;
  border-radius:3px;
  background:var(--gn-accent);
  margin-bottom:1.1rem;
}
.item-page .pec-home .pec-band h2{
  color:#fff !important;
  font-size:clamp(1.4rem,2.4vw,2rem) !important;
}
.item-page .pec-home .pec-band p{
  max-width:62ch;
  margin:0;
  font-size:1.1rem;
  color:rgba(255,255,255,.9);
}

/* --- Partenaires --------------------------------------------------- */
.pec-partners{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:24px;
  margin-top:1.25rem;
}
.pec-partners > div{
  border-top:3px solid var(--gn-secondary);
  padding-top:.9rem;
}
.pec-partners strong{ display:block; font-size:1.1rem; }
.pec-partners span{
  display:block;
  margin-top:.2rem;
  font-size:.9rem;
  line-height:1.5;
  color:var(--gn-ink-soft);
}

@media (max-width:900px){
  .pec-hero{ grid-template-columns:1fr; }
}

/* ---------------------------------------------------------------------
   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(var(--gn-secondary-rgb),.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:.5rem;
  padding-bottom:.5rem;
  min-height:0;
}
.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; }

/* Logo et texte du pied de page, à l'échelle */
.simg_ied{
  height:32px !important;
  width:auto !important;
}
.container-footer p,
.footer p{
  display:flex;
  align-items:center;
  gap:12px;
  margin:0;
  font-size:.85rem;
  line-height:1.4;
}
.container-footer p span,
.footer p span{
  font-size:.85rem !important;   /* neutralise le style inline 18px */
}

/* ---------------------------------------------------------------------
   11. IFRAMES (wrapper) — dézoom équivalent au zoom navigateur à 60 %
   ---------------------------------------------------------------------
   On agrandit la boîte de l'iframe de 1/zoom puis on la réduit par
   transform:scale(zoom) : le contenu « voit » un viewport plus large et
   se remet en page.
   ⚠ 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 / PAGINATION
   --------------------------------------------------------------------- */
.badge,.tag{
  background:var(--gn-secondary);
  color:#fff;font-weight:600;
  border-radius:999px;padding:.25em .7em;
}
.pagination .page-link{
  color:var(--gn-secondary) !important;
  border-radius:var(--gn-radius-sm);
}
.pagination .page-item.active .page-link{
  background-color:var(--gn-secondary) !important;
  border-color:var(--gn-secondary) !important;
  color:#fff !important;
}

/* ---------------------------------------------------------------------
   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); }       /* nom de classe conservé (compatibilité HTML) */
.gp-h2--accent{ color:var(--gn-accent-text); }
.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. PAGE DE CONNEXION (spécifique PEC)
   --------------------------------------------------------------------- */
/* Le conteneur de la page de connexion ne garde ni cadre ni ombre */
.main-top.card{
  --card-cap-bg:var(--gn-secondary);
  --card-cap-color:#fff;
  background:none !important;
  border:none !important;
  box-shadow:none !important;
}
.main-top.card:hover{ transform:none; box-shadow:none !important; }

h3.card-header{
  --card-cap-bg:var(--gn-secondary);
  background-color:var(--gn-secondary) !important;
  color:#fff !important;
  font-size:30px;
  text-align:center;
  border:none;
}

.mod-login{
  max-width:400px;
  margin:40px auto;
}
.mod-login .card-header{
  background-color:var(--gn-secondary) !important;
  color:#fff !important;
  font-size:18px;
  text-align:center;
  border:none;
}
.mod-login .card-body{
  background-color:#fff !important;
  border:1px solid var(--gn-line) !important;
  border-radius:0 0 var(--gn-radius) var(--gn-radius);
  padding:24px !important;
}
.mod-login .input-group-text{
  background-color:var(--gn-surface-alt) !important;
  border-color:var(--gn-line) !important;
  color:var(--gn-secondary) !important;
}
.mod-login__options a{
  color:var(--gn-secondary) !important;
  font-size:13px;
}
.mod-login__options a:hover{
  color:var(--gn-accent-text) !important;
}

/* ---------------------------------------------------------------------
   15. RESPONSIVE (placé en dernier pour s'appliquer réellement)
   --------------------------------------------------------------------- */
@media (max-width:900px){
  :root{ --gn-title-size:24px; }
  .site-brand{ gap:12px; padding-bottom:12px; }
  .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){
  ul#mod-menu1.mod-menu{ gap:.25rem; }
}

@media (max-width:640px){
  :root{ --gn-flag-h:34px; --gn-title-size:19px; }
  .site-brand{
    flex-direction:row;
    align-items:center;
    gap:10px;
    padding-left:8px;
    padding-top:8px;
    padding-bottom:12px;
  }
  .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}
}