/* ============ Variables & base ============ */
:root{
  --header-h: 96px;
  --ink:#0f172a; --muted:#475569;
  --blue-700:#1e3a8a; --blue-800:#0f2e6d; --blue-900:#0a2352;
  --gold:#c9a23a; --bg:#ffffff; --bg-soft:#f6f8fb; --card:#ffffff;
  --shadow:0 10px 25px rgba(16,24,40,.08);

  /* Accents */
  --acc-sky:#0ea5e9; --acc-sky-100:#e0f2fe;
  --acc-teal:#10b981; --acc-teal-100:#d1fae5;
  --acc-amber:#f59e0b; --acc-amber-100:#fef3c7;
  --acc-violet:#8b5cf6; --acc-violet-100:#ede9fe;
  --acc-rose:#f43f5e; --acc-rose-100:#ffe4e6;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
html { scroll-behavior:smooth; }

body{
  font-family: "Times New Roman", Times, serif;
  color:var(--ink); background:#eaf6ff; line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}

[lang="ar"], [dir="rtl"], .main-nav[dir="rtl"]{
  font-family: "Times New Roman", Times, serif;
}

img{max-width:100%; height:auto; display:block}
.container{width:min(1200px, 92vw); margin-inline:auto}
.section{padding:56px 0}
.section-white{background:#fff}
.section h2{position:relative; display:inline-block; padding-inline:6px 10px;}
.section h2::after{
  content:""; position:absolute; inset-inline:0; bottom:-8px; height:4px;
  background:linear-gradient(90deg, var(--acc-sky), var(--acc-teal)); border-radius:6px;
}
.section,#services,#actualites{scroll-margin-top: calc(var(--header-h) + 16px);}
@media (max-width:900px){ :root{ --header-h: 64px; } }

/* ============ Topbar ============ */
.topbar{ background:linear-gradient(90deg, #0a2352 0%, #11346e 100%); color:#eaf3ff; font-size:.95rem; }
.topbar .container{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:6px 0; }
.top-links a{ color:#eaf3ff; text-decoration:none; margin-inline:10px; padding:6px 10px; border-radius:999px; border:1px solid rgba(255,255,255,.15); }
.top-links a.cta{background:#ffffff1a}
.top-links a:hover{background:#ffffff24}

/* ============ Header & Nav ============ */
.site-header{
  position:sticky; top:0; z-index:50;
  background:#fff; backdrop-filter:none;
  box-shadow:0 2px 12px rgba(15,23,42,.06);
}
.header-inner{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:10px 0}

/* Burger */
.main-nav .burger{display:none; background:none; border:0; width:44px; height:44px; border-radius:8px; position:relative;}
.burger-bar,.burger-bar::before,.burger-bar::after{
  content:""; position:absolute; left:10px; right:10px; height:2px; background:var(--blue-900); border-radius:2px;
}
.burger-bar{top:21px}.burger-bar::before{top:-8px}.burger-bar::after{top:8px}

/* Nav list */
.nav-list{display:flex; align-items:center; gap:32px; list-style:none; margin:0; padding:8px 0;}
.nav-list a{ text-decoration:none; border-radius:0; background:transparent; }

/* Dropdown (simple) */
.has-dd{ position:relative }
.dd-toggle{ background:transparent; border:0; cursor:pointer; display:inline-flex; gap:6px; align-items:center; }
.dd-toggle .chev{ font-size:.85rem; transition:.2s }
.dd-toggle[aria-expanded="true"] .chev{ transform:rotate(180deg) }

.dropdown{
  position:absolute; top:100%; right:0; /* RTL */
  background:#fff; border:1px solid #e9edf4; border-radius:12px;
  min-width:280px; padding:6px 0; box-shadow:0 10px 28px rgba(15,23,42,.12);
  display:none;
}
.has-dd.open > .dropdown{ display:block; }
.dropdown li{list-style:none}
.dropdown li + li{ border-top:1px solid #f1f3f7; }
.dropdown a{ display:block; padding:10px 14px; color:#0b2247; font-weight:700; }
.dropdown a:hover{ background:#f7f9ff; }

/* ============ Hero & cartes ============ */
.hero{position:relative; min-height:420px; display:grid; align-items:center; overflow:hidden}
.hero .container{position:relative; z-index:1}
.hero-overlay{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(11,25,65,.55), rgba(11,25,65,.35)); }
.hero-bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; filter:contrast(1.05) saturate(1.05); }

.cards-5{display:grid; grid-template-columns:repeat(5,1fr); gap:14px}
.service-card{
  background:var(--card); border:1px solid #e6ecf5; border-radius:14px; padding:16px; text-align:center; text-decoration:none; color:var(--ink);
  box-shadow:0 6px 16px rgba(16,24,40,.06); font-weight:800; transition:transform .15s ease, box-shadow .2s ease, filter .2s ease;
}
.service-card:hover{transform:translateY(-3px); box-shadow:0 14px 28px rgba(15,23,42,.12); filter:saturate(1.05)}
.cards-5 .service-card:nth-child(1){ background:linear-gradient(135deg, var(--acc-sky-100), #bae6fd); border-color:#b6e2fc }
.cards-5 .service-card:nth-child(2){ background:linear-gradient(135deg, var(--acc-teal-100), #bbf7d0); border-color:#b2f0c8 }
.cards-5 .service-card:nth-child(3){ background:linear-gradient(135deg, var(--acc-amber-100), #fde68a); border-color:#f8dd78 }
.cards-5 .service-card:nth-child(4){ background:linear-gradient(135deg, var(--acc-violet-100), #ddd6fe); border-color:#d2ccfd }
.cards-5 .service-card:nth-child(5){ background:linear-gradient(135deg, var(--acc-rose-100), #fecdd3); border-color:#f9c0c7 }

.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.news-card{ background:#fff; border:1px solid #e6ecf5; border-radius:16px; padding:18px; box-shadow:0 6px 16px rgba(16,24,40,.06); transition:transform .15s, box-shadow .2s }
.news-card:hover{ transform:translateY(-2px); box-shadow:0 12px 24px rgba(0,0,0,.06) }
.news-card .tag{ display:inline-block; padding:2px 10px; border-radius:999px; font-size:.8rem; font-weight:700 }
.grid-3 .news-card:nth-child(1) .tag{ background:var(--acc-amber-100); color:#7a5600 }
.grid-3 .news-card:nth-child(2) .tag{ background:var(--acc-violet-100); color:#4b2bb6 }
.grid-3 .news-card:nth-child(3) .tag{ background:var(--acc-teal-100); color:#0b6b4e }

/* Filtres formations */
.filters{display:flex; gap:8px; margin:8px 0 18px}
.filter-btn{
  border:1px solid #dbe5ff; background:#fff; padding:8px 12px; border-radius:999px; cursor:pointer;
  font-weight:700; color:var(--blue-900);
  transition: background .15s ease, color .15s ease, border-color .15s ease, transform .1s;
}
.filter-btn:hover{ transform:translateY(-1px) }
.filter-btn.is-active{ background:#1e3a8a; color:#fff; border-color:#1e3a8a }

.programs-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.program-card{
  display:block; text-decoration:none; color:inherit;
  background:#fff; border:1px solid #e6ecf5; border-radius:16px; padding:16px;
  box-shadow:0 6px 16px rgba(16,24,40,.05);
  border-inline-start:4px solid transparent;
}
[dir="rtl"] .program-card{ border-left:1px solid #e6ecf5; border-right:none }
.program-card[data-type="licence"]  { border-inline-start-color: var(--acc-sky)   }
.program-card[data-type="licencex"] { border-inline-start-color: var(--acc-amber) }
.program-card[data-type="master"]   { border-inline-start-color: var(--acc-teal)  }
.program-card[data-type="masterx"]  { border-inline-start-color: var(--acc-violet)}
.program-card:hover{ box-shadow:0 12px 24px rgba(0,0,0,.06) }

.program-tag{ display:inline-block; padding:2px 10px; border-radius:999px; background:var(--acc-sky-100); color:#0a3a57; font-weight:800; font-size:.8rem; margin-bottom:6px }
.program-tag-x{ background:var(--acc-amber-100); color:#7a4a00 }
.program-tag-m{ background:var(--acc-teal-100);  color:#0b6b4e }
.program-tag-xm{background:var(--acc-violet-100);color:#4b2bb6}

/* Titres des cartes formations (consolidé) */
.program-card h3 {
  font-size: 1rem !important;
  line-height: 1.4 !important;
  font-weight: 600;
  margin: 0;
}
@media (max-width: 768px) {
  .program-card h3 { font-size: 0.9rem !important; }
}
@media (min-width: 1400px) {
  .program-card h3 { font-size: 1.05rem !important; }
}

/* ============ Footer ============ */
.site-footer{
  background: linear-gradient(180deg, #e8f1ff 0%, #eef6ff 100%);
  border-top: 1px solid #d7e6ff;
  color: #0e2346;
}
.footer-grid{
  display:grid;
  grid-template-columns: 1.2fr 1fr 1.2fr;
  gap:24px;
  padding:40px 0;
}
.footer-col h3{
  margin:0 0 12px; font-weight:700; color:#0e2346;
  position:relative; display:inline-block; padding-inline-end:8px;
}
.footer-col h3::after{
  content:""; position:absolute; left:0; right:0; bottom:-6px;
  height:3px; border-radius:2px; background:#d4a017;
}
.list-unstyled{list-style:none; margin:0; padding:0}
.list-unstyled li + li{ margin-top:8px }
.site-footer a{ color:#0e2346; text-decoration:none }
.site-footer a:hover{ color:#163a73; text-decoration:underline }

.social-list .social{
  display:inline-flex; align-items:center; gap:10px;
  background:#fff; border:1px solid #dbe8ff;
  padding:8px 12px; border-radius:999px;
  box-shadow:0 4px 10px rgba(14,41,90,.06);
  transition:transform .12s, box-shadow .12s;
}
.social-list .social:hover{
  transform:translateY(-1px);
  box-shadow:0 8px 18px rgba(14,41,90,.10);
}
.contact-list li{ display:flex; align-items:baseline; gap:10px; }

/* Sous-footer (version finale) */
.sub-footer {
  background: #0a2352;
  border-top: none;
  font-size: .95rem;
}
.sub-footer__inner {
  padding: 14px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.sub-footer, .sub-footer p {
  color: #fff !important;
}

/* ============ Responsive ============ */
@media (max-width:900px){
  .main-nav .burger{display:block}
  .nav-list{
    position:fixed; inset:64px 0 0 0; background:#fff; flex-direction:column;
    padding:18px; gap:12px; transform:translateX(110%);
    transition:transform .22s ease; box-shadow:0 18px 50px rgba(2,12,40,.18); display:block;
  }
  .nav-list.open{ transform:translateX(0) }
  .dropdown{ position:static; box-shadow:none; border:none; }
  .cards-5{grid-template-columns:repeat(2,1fr)}
  .grid-3{grid-template-columns:1fr}
  .programs-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr; gap:18px}
}
@media (max-width:560px){
  .sub-footer__inner{ padding:12px 0; }
}

/* ============ NAV — Normalisation finale ============ */
.brand img{ max-height:110px !important; height:auto; width:auto; }
.nav-list > li > a, .dd-toggle{
  font-size:16px !important; font-weight:600 !important; line-height:1.1 !important;
  color:#0b2247 !important; padding:10px 6px !important;
}
.nav-list > li > a.active{ position:relative; color:#0e2a5b !important; }
.nav-list > li > a.active::after{
  content:""; position:absolute; left:8px; right:8px; bottom:-8px;
  height:3px; border-radius:2px; background:#d4a017;
}
.nav-list a:hover{ color:#0e2a5b !important; background:transparent !important; }

/* ============ Paragraphes (contenu) ============ */
p {
  font-family: "Sakkal Majalla", "Times New Roman", serif !important;
  font-size: 1.35rem;
  line-height: 1.8;
  text-align: justify;
  color: #0e2346;
  margin-bottom: 1em;
}

/* ====== ????? – cartes cliquables ====== */
.dept-intro{
  text-align: right;
  font-size: 1.25rem;
  font-weight: 700;
  color:#0e2346;
  margin:-8px 0 18px;
}
.depts-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:22px;
}
.dept-card{
  display:block;
  background: linear-gradient(135deg, #2582d9 0%, #04b0f0 100%);
  color:#fff;
  text-align:center;
  padding:28px 18px;
  border-radius:18px;
  box-shadow: 0 10px 26px rgba(13, 48, 94, .18);
  font-weight:700;
  font-size:1.25rem;
  letter-spacing:.2px;
  border:1px solid rgba(255,255,255,.15);
  position:relative;
  overflow:hidden;
  text-decoration:none;
  transition: transform .15s ease, box-shadow .2s ease, filter .2s ease;
}
.dept-card:focus{
  outline: none;
  box-shadow:0 0 0 3px rgba(255,255,255,.6), 0 10px 26px rgba(13,48,94,.18);
}
.dept-card::before{
  content:"";
  position:absolute; top:-40px; left:-40px;
  width:140px; height:140px;
  background: radial-gradient(closest-side, rgba(255,255,255,.35), transparent 70%);
  transform: rotate(25deg);
  pointer-events:none;
}
.dept-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 18px 34px rgba(13, 48, 94, .22);
  filter: saturate(1.05);
}
@media (max-width: 1200px){
  .depts-grid{ grid-template-columns:repeat(3,1fr); }
  .dept-card{ font-size:1.15rem; padding:24px 16px; }
}
@media (max-width: 900px){
  .depts-grid{ grid-template-columns:repeat(2,1fr); }
  .dept-card{ font-size:1.05rem; padding:20px 14px; }
}
@media (max-width: 560px){
  .depts-grid{ grid-template-columns:1fr; }
}
/* ====== Laboratoires ====== */
.labs-title {
  text-align: right;   /* aligné à droite */
  font-size: 1.4rem;   /* plus grand */
  font-weight: 700;    /* en gras */
  color: #0e2346;
  margin: 20px 0;
}

.labs-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 6px 16px rgba(0,0,0,.08);
}

.labs-table th {
  background: #0a2352;
  color: #fff;
  padding: 12px;
  text-align: center;
}

.labs-table td {
  padding: 12px;
  border-top: 1px solid #e6ecf5;
  text-align: center;
}
/* ==== Formations ==== */
.formation-cards{
  display:grid; gap:24px;
  grid-template-columns: repeat(4, 1fr);
}
.formation-card{
  position:relative; display:block; border-radius:16px; overflow:hidden;
  box-shadow:0 10px 30px rgba(16,24,40,.12);
  transition:transform .15s ease, box-shadow .2s ease;
}
.formation-card img{ width:100%; height:260px; object-fit:cover; display:block; }
.formation-card .overlay{
  position:absolute; inset:0;
  background: linear-gradient(0deg, rgba(6,29,64,.75) 8%, rgba(6,29,64,.15) 60%, rgba(6,29,64,0) 100%);
}
.formation-card .content{
  position:absolute; left:0; right:0; bottom:0; padding:18px 18px 20px;
  color:#fff;
}
.formation-card h3{ margin:0; font-size:1.55rem; line-height:1.2; }
.formation-card p{ margin:.35rem 0 .6rem; opacity:.95 }
.formation-card .btn-link{ font-weight:700; letter-spacing:.2px; }
.formation-card.emphasis{ outline: 3px solid rgba(255,193,7,.35); }

/* Marges entre sections */
.mt-6{ margin-top:48px; }

/* Responsive */
@media (max-width: 1100px){
  .formation-cards{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px){
  .formation-cards{ grid-template-columns: 1fr; }
  .formation-card img{ height:220px; }
}