/* ═══════════════════════════════════════════════════════════════════
   EFM-THEME.CSS — Charte graphique E-Flow Morocco
   ⚠ Modifiez les couleurs UNIQUEMENT dans :root (variables).
     Vos ajouts personnels → assets/css/custom.css
   ═══════════════════════════════════════════════════════════════════ */

/* ─── 1. VARIABLES (charte issue du logo EFM) ─────────────────────── */
:root {
    --efm-navy:      #000D1E;    /* Bleu nuit (fonds sombres)            */
    --efm-navy-rgb:  0, 13, 30;  /* Même couleur en RGB (voiles hero)    */
                                /* ⚠ si vous changez --efm-navy,        */
                                /*   mettez à jour --efm-navy-rgb       */
    --efm-navy-2:    #0A1828;    /* Bleu nuit clair (survol)             */
    --efm-teal:      #2FA8A0;    /* Turquoise principal                  */
    --efm-cyan:      #35D0E8;    /* Cyan lumineux (accents)              */
    --efm-cyan-rgb:  53, 208, 232; /* Même couleur en RGB (halos)         */
    --efm-light:     #F5F9FB;    /* Fond de section claire               */
    --efm-text:      #12283C;    /* Texte principal                      */
    --efm-muted:     #5A7184;    /* Texte secondaire                     */
    --efm-gradient:  linear-gradient(135deg, var(--efm-teal), var(--efm-cyan));
}

/* Polices locales OPTIONNELLES : déposez les .woff2 dans assets/fonts/
   (Poppins pour les titres, Inter pour le texte) puis décommentez :
@font-face { font-family:'Poppins'; font-weight:600; src:url('../fonts/Poppins-600.woff2') format('woff2'); font-display:swap; }
@font-face { font-family:'Inter';   font-weight:400; src:url('../fonts/Inter-400.woff2')   format('woff2'); font-display:swap; }
*/

/* ─── 2. BASE ─────────────────────────────────────────────────────── */
body  { font-family:'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; color:var(--efm-text); }
h1,h2,h3,h4,h5,h6 { font-family:'Poppins','Inter',system-ui,sans-serif; font-weight:600; color:var(--efm-navy); }
.bg-efm-light { background:var(--efm-light); }
.bg-efm-navy  { background:var(--efm-navy); }
.text-efm-teal { color:var(--efm-teal) !important; }
.text-efm-navy { color:var(--efm-navy) !important; }
.section { padding:4.5rem 0; }   /* Espacement standard des sections */

/* ─── 3. BOUTONS ──────────────────────────────────────────────────── */
.btn-efm-primary { background:var(--efm-gradient); color:#fff; border:0; border-radius:50rem; padding:.6rem 1.6rem; }
.btn-efm-primary:hover { filter:brightness(1.1); color:#fff; }
.btn-efm-outline { border:2px solid var(--efm-teal); color:var(--efm-teal); border-radius:50rem; padding:.55rem 1.5rem; background:transparent; }
.btn-efm-outline:hover { background:var(--efm-teal); color:#fff; }
/* Bouton "fantôme" pour fonds sombres (hero) — survol cyan, écho des trainées */
.btn-efm-ghost { border:2px solid rgba(255,255,255,.7); color:#fff; border-radius:50rem; padding:.6rem 1.6rem; background:transparent; }
.btn-efm-ghost:hover { background:var(--efm-cyan); border-color:var(--efm-cyan); color:var(--efm-navy); }

/* ─── 4. NAVBAR (fond bleu nuit) ──────────────────────────────────── */
.navbar-efm { background:var(--efm-navy); min-height:72px;
              border-bottom:1px solid rgba(255,255,255,.06); }
.navbar-efm .nav-link { color:rgba(255,255,255,.85); margin:0 .35rem; transition:color .2s; }
.navbar-efm .nav-link:hover { color:var(--efm-cyan); }   /* écho des trainées du hero */
.navbar-efm .nav-link.active { color:#fff;
  border-bottom:3px solid; border-image:var(--efm-gradient) 1; }

/* Sélecteur de langue */
.lang-switch { border:1px solid rgba(255,255,255,.25); border-radius:50rem; padding:.15rem .5rem; }
.lang-link { color:rgba(255,255,255,.7); text-decoration:none; font-size:.85rem; padding:.15rem .35rem; }
.lang-link.active { color:#fff; font-weight:700; }
.lang-link + .lang-link { border-inline-start:1px solid rgba(255,255,255,.2); }

/* ─── 5. SOUS-MENUS AU SURVOL (desktop uniquement) ────────────────── */
@media (min-width:992px) {
  .navbar-efm .dropdown:hover > .dropdown-menu { display:block; margin-top:0; }
  .navbar-efm .dropdown-menu {
    background:var(--efm-navy-2); border:0; border-radius:.75rem;
    box-shadow:0 12px 28px rgba(0,0,0,.35), 0 0 0 1px rgba(var(--efm-cyan-rgb), .15);
    animation:efm-fade .18s ease;
  }
  .navbar-efm .dropdown-item { color:rgba(255,255,255,.85); padding:.55rem 1.1rem; }
  .navbar-efm .dropdown-item:hover {
    background:rgba(var(--efm-cyan-rgb), .10); color:#fff;
    box-shadow:inset 3px 0 0 var(--efm-cyan);   /* liseré cyan, comme les cercles du hero */
  }
}
[dir="rtl"] .navbar-efm .dropdown-item:hover { box-shadow:inset -3px 0 0 var(--efm-cyan); }
@keyframes efm-fade { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:translateY(0); } }

/* ─── 6. BANDE LOGO + HERO ACCUEIL ────────────────────────────────── */
/* Bande logo : même navy que la navbar → continuité parfaite */
.logo-band { background:var(--efm-navy); padding:3.5rem 0 2.5rem; text-align:center; }
.logo-band img { max-width:260px; height:auto; }

/* Hero : textes clairs sur le diaporama d'images */
.hero-section {
  position:relative;
  overflow:hidden;
  background:var(--efm-navy);
  color:#fff;
}
.hero-section h1 { color:#fff; }

/* Diaporama desktop : les 2 images se fondent l'une dans l'autre */
.hero-background {
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
}
.hero-bg {
  position:absolute;
  inset:0;
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
  animation:efm-hero-fade-1 10s ease-in-out infinite;
}
.hero-bg-1 { background-image:url('../images/hero/hero1.jpg'); }
.hero-bg-2 {
  background-image:url('../images/hero/hero2.jpg');
  animation-name:efm-hero-fade-2;
}
@keyframes efm-hero-fade-1 {
  0%, 40% { opacity:1; }
  50%, 90% { opacity:0; }
  100% { opacity:1; }
}
@keyframes efm-hero-fade-2 {
  0%, 40% { opacity:0; }
  50%, 90% { opacity:1; }
  100% { opacity:0; }
}
/* Soulignement "trainée lumineuse" (dégradé + halo, écho de la route) */
.hero-section h1::after {
  content:""; display:block; width:110px; height:4px; border-radius:2px;
  margin-top:.9rem;
  background:var(--efm-gradient);
  box-shadow:0 0 14px rgba(var(--efm-cyan-rgb), .55);
}
[dir="rtl"] .hero-section h1::after { margin-inline:auto; } /* ressort des 2 côtés */
/*[dir="rtl"] .hero-section h1::after { margin-inline-end:auto; }*/
.hero-section .lead { color:rgba(255,255,255,.9); }
.hero-text { padding:3.5rem 0 2rem; }
.hero-mobile-slideshow {
  display:grid;
  margin-bottom:3.5rem;
  border-radius:1rem;
  overflow:hidden;
  box-shadow:0 16px 40px rgba(0,0,0,.35);
}
.hero-img-mobile {
  grid-area:1 / 1;
  width:100%;
  height:auto;
  display:block;
  border-radius:1rem;
  animation:efm-hero-fade-1 10s ease-in-out infinite;
}
.hero-img-mobile-2 { animation-delay:-5s; }

@media (prefers-reduced-motion: reduce) {
  .hero-bg,
  .hero-img-mobile { animation:none; }
  .hero-bg-2,
  .hero-img-mobile-2 { opacity:0; }
}

/* Desktop (≥992px) : image pure en fond, voiles navy pour la lisibilité */
@media (min-width:992px) {
  .hero-section {
    min-height:620px; display:flex; align-items:center;
  }
  /* Double voile : fondu haut (depuis la bande logo) + ombrage gauche (texte) */
  .hero-section::before {
    content:""; position:absolute; inset:0; pointer-events:none;
    background:
      linear-gradient(180deg, var(--efm-navy) 0%,
                      rgba(var(--efm-navy-rgb), .40) 16%,
                      rgba(var(--efm-navy-rgb), 0) 34%),
      linear-gradient(90deg, rgba(var(--efm-navy-rgb), .88) 0%,
                      rgba(var(--efm-navy-rgb), .55) 42%,
                      rgba(var(--efm-navy-rgb), 0) 75%);
  }
  .hero-section .container { position:relative; z-index:1; }
  .hero-text { max-width:540px; padding:0; }
}
/* Arabe (RTL) : voile de lisibilité inversé */
[dir="rtl"] .hero-section::before {
  background:
    linear-gradient(180deg, var(--efm-navy) 0%,
                    rgba(var(--efm-navy-rgb), .40) 16%,
                    rgba(var(--efm-navy-rgb), 0) 34%),
    linear-gradient(270deg, rgba(var(--efm-navy-rgb), .88) 0%,
                    rgba(var(--efm-navy-rgb), .55) 42%,
                    rgba(var(--efm-navy-rgb), 0) 75%);
}
/* Arabe (RTL) : images adaptées à la lecture de droite à gauche. */
[dir="rtl"] .hero-bg-1 { background-image:url('../images/hero/hero1-Ar.jpg'); }
[dir="rtl"] .hero-bg-2 { background-image:url('../images/hero/hero2-Ar.jpg'); }

@media (max-width:991.98px) {
  [dir="rtl"] .hero-img-mobile-1 { content:url('../images/hero/hero1-Ar.jpg'); }
  [dir="rtl"] .hero-img-mobile-2 { content:url('../images/hero/hero2-Ar.jpg'); }
}

/* ─── 7. CARTES & ICÔNES ──────────────────────────────────────────── */
.card-efm { border:0; border-radius:1rem; background:#fff;
            transition:transform .25s, box-shadow .25s; }
.card-efm:hover { transform:translateY(-6px); box-shadow:0 14px 30px rgba(0,13,30,.12); }
.icon-efm { width:56px; height:56px; border-radius:14px; display:grid; place-items:center;
            background:var(--efm-gradient); color:#fff; font-size:1.35rem; }

/* ─── 8. BANDEAU CTA (dégradé signature) ──────────────────────────── */
.cta-efm { background:var(--efm-gradient); color:#fff; border-radius:1.25rem; }
.cta-efm h2 { color:#fff; }

/* ─── 9. PAGE HERO (pages internes) ───────────────────────────────── */
.page-hero { background:var(--efm-navy); color:#fff; padding:4rem 0 3rem;
             border-bottom:4px solid; border-image:var(--efm-gradient) 1; }
.page-hero h1 { color:#fff; }

/* ─── 10. FOOTER ──────────────────────────────────────────────────── */
.footer-efm { background:var(--efm-navy); color:rgba(255,255,255,.75); }
.footer-efm h6 { color:#fff; letter-spacing:.05em; }
.footer-efm a { color:rgba(255,255,255,.75); text-decoration:none; }
.footer-efm a:hover { color:var(--efm-cyan); }
.footer-links li { margin-bottom:.55rem; font-size:.92rem; }