:root {
--font-ar: "Cairo", "Noto Sans Arabic", Tahoma, Arial, sans-serif;
--font-latin: "Cairo", "Cairo Play", "Segoe UI", Roboto, Arial, sans-serif;
}
html,
body {
font-family: var(--font-latin) !important;
}
html[dir="rtl"] body,
html:lang(ar) body {
font-family: var(--font-ar) !important;
}
p,
span,
div {
font-family: var(--font-ar) !important;
}
p,
span,
div {
font-size: 16px !important;
}
:root {
--primary-color: #2c3e50;
--secondary-color: #3498db;
--accent-color: #e74c3c;
--light-color: #f8f9fa;
--dark-color: #343a40;
}
body {
font-family: "Noto Sans Arabic", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
line-height: 1.6;
color: #333;
/* background-color: #f8f9fa; */
}
a:hover {
text-decoration: none !important;
}
/* Header Styles */
.top-nav {
background-color: var(--light-color);
padding: 8px 0;
font-size: 14px;
border-bottom: 1px solid #dee2e6;
}
.top-nav a {
color: var(--dark-color);
text-decoration: none;
margin-left: 15px;
transition: color 0.3s;
}
.top-nav a:hover {
color: var(--secondary-color);
}
.navbar {
background-color: white;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
padding: 15px 0;
}
.navbar-brand {
display: flex;
align-items: center;
}
.logo {
height: 60px;
margin-left: 15px;
}
.nav-link {
color: var(--primary-color);
font-weight: 500;
margin: 0 5px;
transition: color 0.3s;
}
.nav-link:hover {
color: var(--secondary-color);
}
.content {
padding: 40px 20px;
text-align: center;
color: var(--primary-color);
}
.content h1 {
margin-bottom: 20px;
font-weight: 700;
}
.content p {
font-size: 18px;
max-width: 800px;
margin: 0 auto;
line-height: 1.6;
}
/* Hero Section */
/* .hero {
background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)), url('https://images.unsplash.com/photo-1582213782179-e0d53f98f2ca?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80') no-repeat center center/cover;
color: white;
padding: 100px 0;
text-align: center;
}
.hero h1 {
font-size: 2.5rem;
margin-bottom: 20px;
}
.hero p {
font-size: 1.2rem;
margin-bottom: 30px;
max-width: 700px;
margin-left: auto;
margin-right: auto;
} */
.newsletter-form {
max-width: 500px;
margin: 0 auto;
}
.newsletter-form .btn-primary {
background-color: var(--secondary-color);
border-color: var(--secondary-color);
}
.newsletter-form .btn-primary:hover {
background-color: #2980b9;
border-color: #2980b9;
}
/* Section Titles */
.section-title {
font-size: 1.8rem;
margin-bottom: 30px;
color: var(--primary-color);
border-right: 4px solid var(--secondary-color);
padding-right: 15px;
position: relative;
}
.section-title::after {
content: '';
position: absolute;
right: 0;
bottom: -10px;
width: 50px;
height: 3px;
background-color: var(--secondary-color);
}
/* Activity Cards */
.activity-card {
background: white;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
transition: transform 0.3s, box-shadow 0.3s;
margin-bottom: 25px;
height: 100%;
}
.activity-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
}
.activity-img {
height: 200px;
background-size: cover;
background-position: center;
}
.activity-date {
background-color: var(--secondary-color);
color: white;
padding: 10px 15px;
font-weight: bold;
}
.activity-content {
padding: 20px;
}
.activity-content h4 {
color: var(--primary-color);
margin-bottom: 10px;
}
.activity-content p {
color: #666;
margin-bottom: 15px;
}
.read-more {
color: var(--secondary-color);
text-decoration: none;
font-weight: 500;
display: inline-block;
margin-top: 10px;
transition: color 0.3s;
}
.read-more:hover {
color: var(--primary-color);
}
/* Calendar Section */
.calendar-section {
background: white;
border-radius: 8px;
padding: 30px;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
margin-bottom: 40px;
}
.calendar-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
}
.calendar-day {
text-align: center;
padding: 10px;
font-weight: bold;
background-color: var(--light-color);
border-radius: 5px;
margin-bottom: 5px;
}
.calendar-date {
text-align: center;
padding: 10px;
border-radius: 5px;
margin-bottom: 5px;
cursor: pointer;
transition: all 0.3s;
}
.calendar-date:hover {
background-color: #e9ecef;
}
.calendar-date.active {
background-color: var(--secondary-color);
color: white;
}
.calendar-date.other-month {
color: #adb5bd;
}
/* Publications Section */
.publication-card {
background: white;
border-radius: 8px;
padding: 25px;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
text-align: center;
transition: transform 0.3s;
margin-bottom: 25px;
height: 100%;
}
.publication-card:hover {
transform: translateY(-5px);
}
.publication-icon {
font-size: 2.5rem;
color: var(--secondary-color);
margin-bottom: 15px;
}
.publication-card h4 {
color: var(--primary-color);
margin-bottom: 15px;
}
.publication-card p {
color: #666;
margin-bottom: 15px;
}
/* Photo Gallery */
.gallery-item {
height: 200px;
border-radius: 8px;
overflow: hidden;
margin-bottom: 20px;
position: relative;
}
.gallery-item img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s;
}
.gallery-item:hover img {
transform: scale(1.1);
}
.gallery-overlay {
position: absolute;
bottom: 0;
right: 0;
width: 100%;
background: rgba(0, 0, 0, 0.7);
color: white;
padding: 10px;
transform: translateY(100%);
transition: transform 0.3s;
}
.gallery-item:hover .gallery-overlay {
transform: translateY(0);
}
/* Responsive Adjustments */
@media (max-width: 768px) {
/* .hero {
padding: 60px 0;
}
.hero h1 {
font-size: 2rem;
} */
.section-title {
font-size: 1.5rem;
}
.calendar-date,
.calendar-day {
padding: 8px 5px;
font-size: 0.9rem;
}
.social-links {
justify-content: flex-start;
margin-top: 15px;
}
}
/* */
:root {
--bg: #ffffff;
--linknav: #75BCB8;
--linknav-hover: #2e8f95;
--lang-bg: #E99182;
--lang-bg-hover: #e59787;
--text: #1d1d1f;
--muted: #8c97a1;
--search-border: #f19a88;
--shadow: 0 8px 14px rgba(0, 0, 0, .05);
}
.didh-header {
position: sticky;
top: 0;
z-index: 1000;
background: var(--bg);
box-shadow: var(--shadow);
}
/* grid container */
.didh-header__inner {
max-width: 1320px;
margin-inline: auto;
padding: 12px 16px;
display: grid;
grid-template-columns: auto 1fr auto;
gap: 55px;
align-items: center;
}
/* brand (right) */
.didh-brand {
display: flex;
align-items: center;
gap: 12px;
justify-self: end;
}
.didh-brand img {
height: 100px;
width: auto;
display: block;
}
.didh-logo {
display: inline-flex;
}
.didh-toggle {
display: none;
border: 0;
background: transparent;
font-size: 1.25rem;
line-height: 1;
padding: 8px;
cursor: pointer;
color: var(--muted);
}
.didh-toggle:hover {
color: var(--linknav-hover);
}
/* menu (center) */
.didh-menu {
justify-self: center;
}
/* .didh-menu ul{list-style:none;margin:0;padding:0;display:flex;gap:28px;} */
.didh-menu a {
text-decoration: none;
color: var(--linknav);
font-weight: 600;
font-size: 1.05rem;
display: inline-block;
padding-block: 10px;
white-space: nowrap;
/* no-wrap as requested */
}
.didh-menu a:hover {
color: var(--linknav-hover);
}
/* left column: socials (row) then tools (search+lang) under it */
.didh-actions {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 10px;
justify-self: start;
}
.didh-socials {
display: flex;
align-items: center;
gap: 56px;
color: var(--muted);
font-size: 1.05rem;
}
.didh-socials a {
color: var(--muted);
text-decoration: none;
}
.didh-socials a:hover {
color: var(--linknav-hover);
}
/* tools row (search + lang) */
.didh-tools {
display: flex;
align-items: center;
gap: 12px;
}
.didh-search {
position: relative;
display: flex;
align-items: center;
gap: 8px;
border: 1.5px solid var(--search-border);
border-radius: 999px;
padding: 6px 12px;
background: #fff;
height: 36px;
flex-direction: row;
/* icon on the left */
}
.didh-search i {
font-size: .95rem;
opacity: .9;
color: #E99182;
margin-right: 6px;
/* small spacing from input */
}
.didh-search input {
border: 0;
outline: 0;
background: transparent;
padding: 0;
font-size: .95rem;
width: 140px;
line-height: 1.2;
}
.didh-lang-wrap {
position: relative;
}
.didh-lang-menu {
position: absolute;
inset-inline-start: 0;
top: calc(100% + 6px);
min-width: 160px;
margin: 0;
padding: 6px;
list-style: none;
display: none;
z-index: 1000;
background: #fff;
border: 1px solid #e5e7eb;
border-radius: 10px;
box-shadow: 0 10px 25px rgba(0, 0, 0, .08);
direction: rtl;
/* keeps Arabic alignment nice in RTL */
}
.didh-lang-menu.open {
display: block;
}
.didh-lang-menu li {
padding: 10px 12px;
border-radius: 8px;
cursor: pointer;
font-weight: 700;
color: #1f2937;
white-space: nowrap;
}
.didh-lang-menu li[aria-selected="true"] {
background: #f3f4f6;
}
.didh-lang-menu li:hover,
.didh-lang-menu li:focus {
background: #f6f7fb;
outline: 0;
}
/* language chip */
.didh-lang {
display: inline-flex;
align-items: center;
gap: 8px;
border-radius: 999px;
padding: 8px 14px;
border: 1px solid rgba(0, 0, 0, .05);
background: var(--lang-bg);
color: #fff;
font-weight: 600;
cursor: pointer;
height: 36px;
}
.didh-lang:hover {
background: var(--lang-bg-hover);
}
/* ===== Responsive ===== */
@media (max-width: 992px) {
.didh-toggle {
display: inline-flex;
}
.didh-menu {
position: absolute;
inset-inline: 0;
top: 100%;
display: none;
background: #fff;
box-shadow: var(--shadow);
padding: 10px 16px;
border-top: 1px solid #f0f0f0;
}
.didh-menu.is-open {
display: block;
}
.didh-menu ul {
flex-direction: column;
gap: 0;
}
.didh-menu a {
padding: 12px 8px;
}
.didh-brand img {
height: 56px;
}
.didh-search input {
width: 120px;
}
}
.didh-menu {
position: relative;
}
.didh-submenu-panel {
position: absolute;
inset-inline-start: 0;
top: 80%;
min-width: 320px;
max-width: min(92vw, 720px);
background: #fff;
border: 1px solid #e5e7eb;
border-radius: 10px;
padding: 14px 16px;
box-shadow: 0 10px 25px rgba(0, 0, 0, .08);
display: none;
z-index: 50;
direction: rtl;
}
.didh-submenu-panel.open {
display: block;
}
.didh-submenu-title {
margin: 0 0 10px;
font-weight: 700;
color: #b30000;
font-size: 18px;
}
.didh-submenu-list {
list-style: "• ";
padding: 0 18px;
margin: 0;
display: block !important;
}
.didh-submenu-list li {
margin: 6px 0;
}
.didh-submenu-list a {
text-decoration: none;
color: #222;
}
/* .didh-submenu-list a:hover{ text-decoration:underline; } */
/* إغلاق بالـ X (اختياري) */
.didh-submenu-close {
position: absolute;
inset-inline-end: 10px;
top: 8px;
font-size: 18px;
cursor: pointer;
user-select: none;
}
/* شاشات صغيرة: اجعل اللوحة تأخذ كامل العرض */
@media (max-width: 768px) {
.didh-submenu-panel {
inset-inline: 0;
width: auto;
max-width: 100%;
}
}
/* responsive header */
/* ---------- Tablet tweaks (≤1200px) ---------- */
@media (max-width: 1200px) {
.didh-header__inner {
grid-template-columns: auto 1fr auto;
/* gap: 28px; */
/* smaller gaps */
}
.didh-brand img {
height: 72px;
}
/* shrink logo a bit */
.didh-socials {
gap: 20px;
}
/* tighter social icons */
}
/* ---------- Mobile / small tablet (≤992px) ---------- */
@media (max-width: 992px) {
/* Grid → 2 rows: top (brand+toggle + actions), bottom (menu) */
.didh-header__inner {
grid-template-columns: 1fr auto;
/* brand (rtl=right) + toggle on the right cell, actions on left */
grid-template-rows: auto auto;
gap: 12px;
align-items: center;
direction: ltr;
}
/* Show burger */
.didh-toggle {
display: inline-flex;
}
/* Brand line */
.didh-brand {
grid-column: 2 / 3;
/* right in RTL */
justify-self: end;
}
.didh-brand img {
height: 56px;
}
/* Actions line (stack socials + tools and let them wrap) */
.didh-actions {
grid-column: 1 / -1;
/* full width row */
flex-direction: row;
flex-wrap: wrap;
align-items: center;
gap: 10px 16px;
justify-self: stretch;
}
.didh-socials {
gap: 16px;
font-size: 1rem;
}
.didh-tools {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}
.didh-search {
height: 38px;
}
.didh-search input {
width: 100px;
}
/* Menu becomes a full-width dropdown panel */
.didh-menu {
grid-column: 1 / -1;
position: static;
/* reset absolute */
width: 100%;
display: none;
background: #fff;
border-top: 1px solid #f0f0f0;
border-bottom: 1px solid #f0f0f0;
box-shadow: none;
padding: 8px 0;
z-index: 999;
}
.didh-menu.is-open {
display: block;
}
.didh-menu ul {
flex-direction: column;
gap: 0;
padding: 6px 10px;
}
.didh-menu a {
padding: 12px 10px;
width: 100%;
}
/* Submenu panel: inline block under the list, not floating */
.didh-submenu-panel {
position: static;
inset: auto;
top: auto;
width: 100%;
max-width: 100%;
display: none;
/* hidden until JS opens */
margin: 6px 0 0;
padding: 10px 12px;
border-radius: 8px;
}
.didh-submenu-panel.open {
display: block;
}
}
/* ---------- Small phones (≤576px) ---------- */
@media (max-width: 576px) {
.didh-brand img {
height: 48px;
}
.didh-socials {
gap: 12px;
}
.didh-search input {
width: 88px;
}
.didh-lang {
padding: 7px 12px;
height: 34px;
}
.didh-lang-menu {
min-width: 140px;
}
}
/* ---------- Mobile / small tablet (≤1024px) ---------- */
@media (max-width: 1024px) {
.didh-header__inner {
grid-template-columns: 1fr auto;
grid-template-rows: auto auto;
gap: 12px;
align-items: center;
direction: ltr;
}
.didh-toggle {
display: inline-flex;
}
.didh-brand {
grid-column: 2 / 3;
justify-self: end;
}
.didh-brand img {
height: 56px;
}
.didh-actions {
grid-column: 1 / -1;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
gap: 10px 16px;
justify-self: stretch;
}
.didh-socials {
gap: 16px;
font-size: 1rem;
}
.didh-tools {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}
.didh-search {
height: 38px;
}
.didh-search input {
width: 100px;
}
.didh-menu {
grid-column: 1 / -1;
position: static;
width: 100%;
display: none;
background: #fff;
border-top: 1px solid #f0f0f0;
border-bottom: 1px solid #f0f0f0;
box-shadow: none;
padding: 8px 0;
z-index: 999;
}
.didh-menu.is-open {
display: block;
}
.didh-menu ul {
flex-direction: column;
gap: 0;
padding: 6px 10px;
}
.didh-menu a {
padding: 12px 10px;
width: 100%;
}
.didh-submenu-panel {
position: static;
inset: auto;
top: auto;
width: 100%;
max-width: 100%;
display: none;
margin: 6px 0 0;
padding: 10px 12px;
border-radius: 8px;
}
.didh-submenu-panel.open {
display: block;
}
}
/* Hero: full-bleed background image */
.hero {
position: relative;
color: #FBFBFB;
margin-left: 2px;
margin-right: 2px;
min-height: 762px;
/* background: url('../image/slide-img.jpg') center/cover no-repeat; */
}
/* container just to keep height */
.hero .infoCompl {
min-height: inherit;
}
/* Bottom translucent blue bar (~45% of hero) */
.hero .info_text {
position: absolute;
left: 0;
right: 0;
bottom: 0;
min-height: 10%;
/* min-height:30%; */
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 5px 20px;
/* padding:40px 20px; */
/* translucent blue + subtle vertical lines like the mock */
background:
linear-gradient(to top,
rgba(0, 112, 184, .92),
rgba(0, 112, 184, .88));
backdrop-filter: blur(0.2px);
/* keeps crispness, optional */
/* border-top: 1px solid rgba(255,255,255,.35); */
}
.hero h1 {
/* font-size: clamp(1.6rem, 3vw + 0rem, 0.6rem); */
font-size: 18px;
margin-bottom: 0;
/* margin-bottom:.75rem; */
font-weight: 900;
margin-top: 5px;
}
.hero p {
font-size: clamp(.95rem, 1vw + .6rem, 1.15rem);
/* max-width: 56ch; */
max-width: 80ch;
margin: 0 auto 1.25rem;
}
/* dots centered */
/* ✅ LOCK carousel indicators size (no resize / no scale) */
#heroTextCarousel .carousel-indicators {
position: static;
/* keep your layout */
margin-top: 1rem;
display: flex;
justify-content: center;
gap: .5rem;
/* avoid layout/line-height effects */
padding: 0 !important;
line-height: 0 !important;
font-size: 0 !important;
}
#heroTextCarousel .carousel-indicators [data-bs-target] {
/* hard lock size */
width: 6px !important;
height: 6px !important;
min-width: 6px !important;
min-height: 6px !important;
max-width: 6px !important;
max-height: 6px !important;
flex: 0 0 10px !important;
/* prevent flex resize */
padding: 0 !important;
margin: 0 !important;
border-radius: 50% !important;
border: 0 !important;
/* important: no transform scaling */
transform: none !important;
box-shadow: none !important;
background: rgba(255, 255, 255, .55);
opacity: .7;
}
#heroTextCarousel .carousel-indicators .active {
opacity: 1;
background: #fff;
}
/* CTA button */
.carousel-item .btn-hero {
border-radius: 999px;
padding-inline: 20px;
display: inline-flex;
align-items: center;
gap: .5rem;
margin: 0 auto;
/* centered */
}
/* Mobile: give the bar a bit more space */
@media (max-width:768px) {
.hero {
min-height: 520px;
}
.hero .info_text {
min-height: 55%;
padding: 32px 16px;
}
}
.hero {
position: relative;
color: #FBFBFB;
margin-left: 2px;
margin-right: 2px;
/* min-height: 762px; */
overflow: hidden;
}
.hero {
min-height: clamp(520px, 100vh, 762px);
}
/* background layers */
.hero .hero-bg {
position: absolute;
inset: 0;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
opacity: 0;
transition: opacity 700ms ease;
z-index: 0;
}
.hero .hero-bg {
will-change: opacity;
transform: translateZ(0);
backface-visibility: hidden;
pointer-events: none;
}
.hero .hero-bg.is-active {
opacity: 1;
}
/* keep overlay above bg */
.hero .infoCompl {
min-height: inherit;
position: relative;
z-index: 2;
}
/* (ton CSS existant) */
.hero .info_text {
position: absolute;
left: 0;
right: 0;
bottom: 0;
min-height: 5%;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 2px 20px;
background:
linear-gradient(to top,
rgba(0, 112, 184, .92),
rgba(0, 112, 184, .88));
}
/* Banner */
:root {
--banner-bg: #E99182;
--banner-radius: 16px;
--banner-min-height: 160px;
--banner-overlay: rgba(0, 0, 0, .35);
--banner-padding: 24px;
}
.site-banner {
width: 100%;
min-height: var(--banner-min-height);
margin-block: 16px;
background-color: var(--banner-bg);
background-image: var(--banner-image, none);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
display: grid;
place-items: center;
position: relative;
overflow: hidden;
background-color: #8E2D31;
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
.site-banner::before {
content: "";
position: absolute;
inset: 0;
/* background:var(--banner-overlay); */
z-index: 0;
}
.site-banner__inner {
width: 100%;
max-width: 1200px;
margin-inline: auto;
padding: var(--banner-padding) 16px;
text-align: center;
position: relative;
z-index: 1;
}
.site-banner__title {
font-family: "Poppins", "Noto Sans Arabic", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
font-weight: 700;
font-size: clamp(22px, 2.2vw, 32px);
color: #fff;
margin: 0;
letter-spacing: .3px;
line-height: 1.2;
text-shadow: 0 10px 30px rgba(0, 0, 0, .25);
}
@media (max-width:576px) {
.site-banner {
min-height: 140px;
}
.site-banner__inner {
padding: 18px 14px;
}
}
#banner {
width: 100%;
padding: 10px 160px;
box-sizing: border-box;
}
#banner .site-banner {
max-width: 1200px;
margin-inline: auto;
}
@media (max-width: 1300px) {
#banner {
padding: 10px 110px;
}
}
@media (max-width: 992px) {
#banner {
padding: 0 20px;
}
}
/* */
/* ====== Color system & sizing ====== */
:root {
--surface: #ffffff;
--ink: #0f172a;
--muted: #64748b;
--brand-blue: #2f6dff;
/* badge color (reports) */
--brand-salmon: #ee8f7f;
/* badge color (calendar) */
--corner-teal: #56c2b3;
/* background corners */
--corner-coral: #e69080;
--card-radius: 24px;
--frame-radius: 28px;
--shadow: 0 10px 30px rgba(2, 8, 23, .08);
}
/* ====== Section frame with background ====== */
.didh-activities .didh-frame {
position: relative;
}
/* Colored corner blocks (BEHIND cards) */
.didh-activities .corner {
position: absolute;
width: 128px;
height: 128px;
z-index: 0;
opacity: .98;
}
.didh-activities .corner.tl {
top: 14px;
left: -14px;
background: var(--corner-teal);
border-radius: 20px;
}
.didh-activities .corner.tr {
top: 14px;
right: -14px;
background: var(--corner-coral);
border-radius: 20px;
}
.didh-activities .corner.bl {
bottom: 14px;
left: -14px;
background: var(--corner-coral);
border-radius: 20px;
}
.didh-activities .corner.br {
bottom: 14px;
right: -14px;
background: var(--corner-teal);
border-radius: 20px;
}
/* ====== Cards ====== */
.didh-activities .panel-card {
position: relative;
z-index: 1;
background: #F5F5F5;
border-radius: var(--card-radius);
box-shadow: var(--shadow);
padding: 3rem 1.5rem 1.5rem;
/* more top space for the big badge */
height: 100%;
}
.didh-activities .panel-card .panel-badge {
position: absolute;
inset-inline-start: 50%;
top: -46px;
transform: translateX(-50%);
width: 86px;
height: 86px;
border-radius: 50%;
display: grid;
place-items: center;
background: #ddd;
}
/* per-card badge colors (to match screenshot) */
.didh-activities .panel-card.brand-salmon .panel-badge {
background: var(--brand-salmon);
box-shadow: 0 12px 24px rgba(238, 143, 127, .35);
}
.didh-activities .panel-card.brand-blue .panel-badge {
background: #0070B8;
box-shadow: 0 12px 24px rgba(47, 109, 255, .35);
}
.didh-activities .panel-badge-icon {
width: 62px;
height: 58px;
display: block;
object-fit: contain;
}
.didh-activities .panel-title {
font-weight: 800;
text-align: center;
color: #2F327D;
font-size: 1.18rem;
margin-bottom: 1.1rem;
letter-spacing: .2px;
}
.didh-activities .panel-media {
background: #f8fafc;
border-radius: 16px;
overflow: hidden;
border: 1px solid rgba(2, 8, 23, .06);
}
.didh-activities .panel-media img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.zoom-clip {
overflow: hidden;
border-radius: inherit;
/* keeps corners clean */
}
.zoom-img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
transform-origin: center;
transition: transform var(--zoom-duration, .45s) cubic-bezier(.2, .75, .2, 1);
}
@media (hover:hover) {
.zoom:hover .zoom-img,
.zoom:focus-within .zoom-img {
transform: scale(var(--zoom-scale, 2.08));
}
}
@media (prefers-reduced-motion: reduce) {
.zoom-img {
transition: none;
}
}
/* ====== Calendar mockup (static design) ====== */
.didh-activities .calendar {
background: #F5F5F5;
}
.didh-activities .cal-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: .5rem;
margin-bottom: .75rem;
}
.didh-activities .cal-head .cal-month {
font-weight: 800;
color: #1e2b4a;
}
.didh-activities .cal-head .month {
margin-inline-end: .35rem;
}
.didh-activities .btn-nav {
width: 36px;
height: 36px;
display: grid;
place-items: center;
border-radius: 10px;
border: 1px solid rgba(2, 8, 23, .12);
background: #fff;
}
.didh-activities .cal-grid {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: .35rem;
}
.didh-activities .cal-weekdays span {
color: var(--muted);
font-size: .8rem;
text-align: center;
font-weight: 700;
}
.didh-activities .cal-days .day {
display: grid;
place-items: center;
height: 40px;
border-radius: 10px;
font-weight: 700;
letter-spacing: .2px;
color: #1e2b4a;
background: #f8fafc;
border: 1px solid rgba(2, 8, 23, .04);
}
.didh-activities .cal-days .day.is-muted {
color: #9aa4b2;
background: #f9fafb;
}
.didh-activities .cal-days .day.is-active {
background: var(--brand-blue);
color: #fff;
border-color: transparent;
box-shadow: 0 6px 12px rgba(47, 109, 255, .25);
}
.didh-activities .cal-days .day.is-range {
background: var(--brand-blue);
color: #fff;
border-color: transparent;
}
@media (min-width: 992px) {
.col-lg-4 {
flex: 0 0 auto;
width: 50%;
}
}
/* Optional: smaller on phones */
@media (max-width: 575.98px) {
.didh-activities .panel-card {
padding: 2.75rem 1rem 1rem;
}
}
/* ---------- Mobile / small tablet (≤992px) ---------- */
@media (max-width: 992px) {
.didh-activities .isdarTakarir {
margin-top: 60px;
}
}
/* ---------- Small phones (≤576px) ---------- */
@media (max-width: 576px) {
.didh-activities .isdarTakarir {
margin-top: 60px;
}
}
/* ===== Footer ===== */
:root {
--footer-blue: #0b66a3;
--footer-blue-ink: #e8f2fb;
--ink: #0f172a;
--muted: #6b7280;
--bg-soft: #f5f6f8;
--chip: #e9eef6;
--radius: 8px;
--shadow: 0 10px 30px rgba(2, 8, 23, .06);
}
/* ===== Wrapper & container ===== */
.site-footer .site-footer {
background: var(--bg-soft);
color: var(--ink);
}
.site-footer .footer-container {
max-width: 1200px;
margin-inline: auto;
padding-inline: 16px;
}
/* ===== Newsletter bar ===== */
.site-footer .footer-newsletter {
background: var(--footer-blue);
border-radius: 0;
box-shadow: 0 1px 0 rgba(255, 255, 255, .1) inset;
}
.site-footer .footer-newsletter .newsletter-inner {
position: relative;
padding: 40px 0;
display: grid;
grid-template-columns: 1fr auto;
gap: 24px;
align-items: center;
}
.site-footer .footer-newsletter .nl-text {
text-align: right;
}
.site-footer .footer-newsletter .nl-title {
color: #fff;
font-weight: 800;
font-size: 28px;
line-height: 1.2;
margin: 0 0 6px;
}
.site-footer .footer-newsletter .nl-subtitle {
color: var(--footer-blue-ink);
margin: 0;
font-size: 14px;
line-height: 1.8;
}
.site-footer .footer-newsletter .nl-border {
content: "";
position: absolute;
inset: 12px;
border: 1px;
border-radius: 0;
pointer-events: none;
}
/* Form group (RTL: button at the far left, input on its right) */
.site-footer .nl-form {
display: flex;
justify-content: flex-start;
}
.site-footer .nl-group {
display: flex;
flex-direction: row-reverse;
align-items: stretch;
background: var(--chip);
border-radius: 10px;
overflow: hidden;
box-shadow: var(--shadow);
min-width: 520px;
max-width: 620px;
}
.site-footer .nl-input {
border: 0;
background: transparent;
padding: 12px 16px;
width: 100%;
font-size: 14px;
color: #1f2937;
outline: none;
}
.site-footer .nl-input::placeholder {
color: #6b7280;
}
.site-footer .nl-btn {
background: #fff;
border: 0;
padding: 10px 18px;
font-weight: 700;
color: #111827;
cursor: pointer;
border-radius: 10px 0 0 10px;
transition: transform .08s ease;
}
.site-footer .nl-btn:active {
transform: scale(.98);
}
/* ===== Links row ===== */
.site-footer .footer-links {
background: var(--footer-blue);
}
.site-footer .links-row {
list-style: none;
padding: 22px 0;
margin: 0;
display: flex;
flex-wrap: wrap;
gap: 24px;
justify-content: space-between;
align-items: center;
}
.site-footer .links-row a {
text-decoration: none;
color: #fff;
font-size: 14px;
font-weight: bold;
}
.site-footer .links-row a:hover {
text-decoration: underline;
color: var(--footer-blue-ink);
}
/* ===== Copyright ===== */
.site-footer .footer-copy {
background: var(--footer-blue);
padding: 0 0 20px;
color: #fff;
font-size: 12px;
text-align: center;
font-weight: bold;
}
/* ===== Responsive ===== */
@media (max-width: 992px) {
.site-footer .footer-newsletter .newsletter-inner {
grid-template-columns: 1fr;
text-align: center;
}
.site-footer .footer-newsletter .nl-text {
text-align: center;
}
.site-footer .nl-form {
justify-content: center;
}
.site-footer .nl-group {
min-width: min(520px, 100%);
width: 100%;
}
}
@media (max-width: 480px) {
.site-footer .links-row {
justify-content: center;
gap: 14px 28px;
}
.site-footer .nl-group {
min-width: 100%;
}
}
/* */
/* ===== Palette (tweak if needed) ===== */
:root {
--ink: #1e2b4a;
--text: #334155;
--cta: #2f6dff;
--cta-hover: #285de8;
--corner-teal: #56c2b3;
--corner-coral: #e69080;
}
/* ===== Layout ===== */
.delegate-section {
position: relative;
}
.delegate-media {
position: relative;
/* display:inline-block;
max-width:100%;
z-index:0; */
}
.delegate-media img {
display: block;
width: 100%;
height: auto;
border-radius: 18px;
box-shadow: 0 16px 36px rgba(2, 8, 23, .12);
position: relative;
z-index: 1;
}
/* Corner blocks behind the image (like screenshot) */
.delegate-media .corner {
position: absolute;
width: 78px;
height: 100px;
z-index: 0;
pointer-events: none;
}
.delegate-media .corner.tl {
top: -18px;
left: -20px;
/* lock to left, not inline-end */
background: #75BCB8;
border-radius: 20px;
}
.delegate-media .corner.right-mid {
top: 91%;
right: -22px;
transform: translateY(-50%);
/* center vertically so zoom doesn’t drift */
/* keep your original visuals */
width: 150px;
height: 110px;
background: #E99182;
border-radius: 20px;
}
/* ===== Text column ===== */
.delegate-content {
text-align: right;
}
.delegate-title {
margin: 0 0 .75rem;
font-size: 1.35rem;
font-weight: 800;
color: #2F327D;
}
.delegate-text {
color: #696984;
line-height: 1.9;
font-size: 1.05rem;
margin-bottom: 1.25rem;
font-weight: bold;
text-align: justify;
}
/* ===== CTA (pill) ===== */
.btn-delegate {
display: inline-flex;
align-items: center;
gap: .25rem;
background: #0070B8;
color: #fff;
border: 0;
border-radius: 999px;
padding: 0.55rem 2.05rem;
font-weight: 700;
text-decoration: none;
box-shadow: 0 10px 20px rgba(47, 109, 255, .25);
}
.btn-delegate:hover,
.btn-delegate:focus {
background: var(--cta-hover);
color: #fff;
}
/* keep your visual styles, just change layout/placement */
.delegate-content .btn-delegate {
display: inline-block;
float: left;
/* old-school fallback to force left */
}
.delegate-section .delegate_word {
--bs-gutter-x: 6rem;
}
/* Mobile spacing */
@media (max-width: 575.98px) {
.delegate-title {
font-size: 1.22rem;
}
.delegate-text {
font-size: 1rem;
}
}
/* ---------- Tablet tweaks (≤1200px) ---------- */
@media (max-width: 1200px) {}
/* ---------- Mobile / small tablet (≤992px) ---------- */
@media (max-width: 992px) {
.delegate-section .delegate_word {
--bs-gutter-x: 2rem;
}
}
/* ---------- Small phones (≤576px) ---------- */
@media (max-width: 576px) {
.delegate-section .delegate_word {
--bs-gutter-x: 2rem;
}
}
/* */
/* -------- Palette -------- */
:root {
--card-radius: 24px;
--flag-radius: 16px;
--ink: #0f172a;
--muted: #6b7280;
--border: #e8edf4;
--flag: #0c67b5;
/* blue strip like screenshot */
--link: #2f6dff;
--link-hover: #285de8;
--shadow: 0 18px 36px rgba(2, 8, 23, .12);
--shadow-soft: 0 10px 22px rgba(2, 8, 23, .10);
}
/* Container spacing */
.news-cards {
padding-block: 1rem 2rem;
}
/* -------- Card -------- */
.news-card {
background: #fff;
border: 1px solid var(--border);
border-radius: var(--card-radius);
overflow: hidden;
box-shadow: var(--shadow-soft);
transition: transform .2s ease, box-shadow .2s ease;
height: 100%;
display: flex;
flex-direction: column;
}
.news-card:hover {
transform: translateY(-2px);
box-shadow: var(--shadow);
}
/* -------- Media (16:9) -------- */
.news-media {
position: relative;
}
.media-frame {
position: relative;
overflow: hidden;
border-top-left-radius: var(--card-radius);
border-top-right-radius: var(--card-radius);
background: #f2f5f9;
}
.media-frame::before {
content: "";
display: block;
padding-top: 56.25%;
}
/* 16:9 */
.media-frame img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* -------- Blue title strip overlapping image -------- */
.news-flag {
position: absolute;
inset-inline: 0;
/* left:0px;
right:0px; */
bottom: -22px;
background: var(--flag);
color: #fff;
border-radius: var(--flag-radius);
padding: .65rem .9rem;
display: flex;
align-items: center;
justify-content: space-evenly;
/* gap: clamp(10px, 1.6vw, 24px); */
min-height: var(--flag-icon-size);
box-shadow: 0 10px 20px rgba(12, 103, 181, .28);
border-top-left-radius: 0;
border-top-right-radius: 0;
}
:root {
--flag-icon-size: 70px;
--flag-overlap: 36px;
/* how far the flag drops over the card */
}
/* keep your ::before 16:9, just reserve space for the flag */
.media-frame {
margin-bottom: var(--flag-overlap);
/* creates room so the flag doesn't crowd */
}
.news-flag {
bottom: calc(-1 * var(--flag-overlap));
}
.news-flag .flag-icon {
width: var(--flag-icon-size);
height: var(--flag-icon-size);
flex-shrink: 0;
}
/* make body start below the flag */
.news-body {
padding-top: calc(1rem + var(--flag-overlap));
}
/* tweak image framing if the important area is higher/lower */
.media-frame img {
object-fit: cover;
object-position: center;
/* try 'center 30%' if faces are near top */
}
.flag-title {
font-weight: 800;
font-size: 27px;
letter-spacing: .2px;
height: 55px;
overflow: hidden;
white-space: nowrap;
}
.flag-icon {
width: 30px;
height: 30px;
object-fit: contain;
display: block;
filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .15));
}
/* -------- Body -------- */
.news-body {
padding: 2.2rem 1rem 1rem;
/* extra top to account for the overlapped flag */
display: flex;
flex-direction: column;
gap: .6rem;
/* NEW */
flex: 1;
/* stretch to fill card */
/* NEW */
min-height: 0;
}
.news-date {
padding-top: 12px;
color: #3b4150;
font-weight: 500;
text-align: right;
font-size: 15px;
}
.news-text {
color: #696984;
font-size: 12px;
margin: 0;
text-align: justify;
}
.news-more {
color: #0070B8;
font-weight: 900;
text-decoration: none;
align-self: flex-end;
font-size: 20px;
margin-top: auto;
}
.news-more:hover {
color: var(--link-hover);
text-decoration: none;
}
/* -------- Responsive tweaks -------- */
@media (max-width: 576px) {
.flag-title {
font-size: 1rem;
}
.flag-icon {
width: 26px;
height: 26px;
}
.news-body {
padding: 2rem .9rem 1rem;
}
}
/* */
:root {
--title: #2b3276;
/* نفس درجة العنوان في الصورة */
--shadow: 0 18px 36px rgba(2, 8, 23, .12);
--shadow-soft: 0 10px 22px rgba(2, 8, 23, .10);
--radius: 22px;
/* تدوير الصور */
}
/* Titles */
.albums-section .album-title {
margin: 0 0 1rem;
font-size: 1.6rem;
font-weight: 800;
color: var(--title);
text-align: center;
}
.albums-section .album-title .album-link {
color: inherit;
/* take h2 color */
font: inherit;
/* take h2 font-size/weight/family */
text-decoration: none;
/* remove underline */
}
.albums-section .album-title .album-link:hover {
text-decoration: underline;
/* optional */
}
/* 2×2 grid */
.gallery-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 22px;
}
/* Card */
.gallery-card {
display: block;
text-decoration: none;
border-radius: var(--radius);
overflow: hidden;
box-shadow: var(--shadow-soft);
transition: transform .2s ease, box-shadow .2s ease;
background: #fff;
}
.gallery-card:hover {
transform: translateY(-2px);
box-shadow: var(--shadow);
}
/* Thumb keeps same size for all items (4:3 like screenshot) */
.gallery-card .thumb {
position: relative;
background: #f2f5f9;
border-radius: var(--radius);
overflow: hidden;
}
.gallery-card .thumb::before {
content: "";
display: block;
padding-top: 75%;
}
/* 4:3 */
.gallery-card .thumb img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
display: block;
border-radius: var(--radius);
}
/* Static play badge for video tiles */
.gallery-card.is-video .play {
position: absolute;
inset: 0;
margin: auto;
width: 64px;
height: 64px;
border-radius: 50%;
background: rgba(0, 0, 0, .38);
box-shadow: 0 6px 16px rgba(0, 0, 0, .25);
display: grid;
place-items: center;
}
.gallery-card.is-video .play::before {
content: "";
display: block;
border-style: solid;
border-width: 12px 0 12px 18px;
/* triangle */
border-color: transparent transparent transparent #fff;
margin-inline-start: 4px;
/* nudge triangle to center visually */
}
/* Responsive: stack nicely on small screens */
@media (max-width: 576px) {
.albums-section .album-title {
font-size: 1.35rem;
}
.gallery-grid {
gap: 16px;
}
.gallery-card.is-video .play {
width: 56px;
height: 56px;
}
.gallery-card.is-video .play::before {
border-width: 10px 0 10px 16px;
}
}
/*Feature-card*/
/* Section + dotted divider (lg+) */
.section-tiles {
position: relative;
}
.section-tiles .tiles-row {
position: relative;
z-index: 0;
}
@media (min-width: 992px) {
.section-tiles .tiles-row::before {
content: "";
position: absolute;
inset-block: 0;
inset-inline-start: 50%;
transform: translateX(-1px);
opacity: .45;
pointer-events: none;
z-index: 0;
}
}
/* Make every column let the card stretch full height */
.section-tiles .tiles-row>[class*="col-"] {
display: flex;
}
/* Card container */
.tile-card {
position: relative;
display: flex;
flex-direction: column;
width: 100%;
background: #fff;
border: 1px solid #e8edf4;
border-radius: 6px;
overflow: hidden;
text-decoration: none;
color: #0f172a;
border-radius: 24px 24px 24px 24px;
box-shadow: 0 10px 18px rgba(0, 0, 0, .06);
transition: transform .2s ease, box-shadow .2s ease;
z-index: 1;
}
.tile-card:hover {
transform: translateY(-2px);
box-shadow: 0 14px 24px rgba(0, 0, 0, .08);
}
.tile-card:focus-visible {
outline: 3px solid #2f6dff;
outline-offset: 2px;
}
/* -------- Square media (top) with robust fallback -------- */
.tile-media {
position: relative;
background: #f2f5f9;
/* fallback bg if image missing */
display: block;
}
/* Fallback for browsers without aspect-ratio */
.tile-media::before {
content: "";
display: block;
padding-top: 100%;
/* 1:1 square */
}
/* Use native aspect-ratio where supported */
@supports (aspect-ratio: 1 / 1) {
.tile-media {
aspect-ratio: 1 / 1;
}
.tile-media::before {
content: none;
padding: 0;
}
}
/* Image fills the square */
.tile-media>.tile-img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
display: block;
}
/* Photos: cover the square (crop if needed) */
.tile-media>.tile-img.cover {
object-fit: cover;
}
/* Logos/packshots: keep inside the square with some breathing room */
.tile-media>.tile-img.contain {
object-fit: contain;
padding: 10%;
/* creates margin around logo */
box-sizing: border-box;
}
/* Optional light backgrounds for logo tiles (like screenshot) */
.bg-azure {
background: #eaf6ff;
}
/* UN logo tile */
.bg-softblue {
background: #dfeffd;
}
/* Constitution tile */
/* -------- Caption bar (bottom) -------- */
.tile-caption {
display: flex;
align-items: center;
justify-content: center;
text-align: center;
color: #fff;
font-weight: 700;
line-height: 1.4;
padding: 12px 10px;
font-size: 1.05rem;
min-height: 72px;
}
.caption-teal {
background: #75BCB8;
}
.caption-sky {
background: #0070B8;
}
.caption-royal {
background: #0070B8;
}
/* Responsive tweaks */
@media (max-width: 576px) {
.tile-caption {
font-size: 1rem;
min-height: 60px;
padding: 10px;
}
}
#feature-card {
width: 100%;
padding: 10px 160px;
box-sizing: border-box;
}
#feature-card .section-tiles {
max-width: 1200px;
margin-inline: auto;
padding-left: 0 !important;
padding-right: 0 !important;
}
@media (max-width: 1300px) {
#feature-card {
padding: 10px 110px;
}
}
@media (max-width: 992px) {
#feature-card {
padding: 0 20px;
}
}
/* */
/* */
.annonces-media {
--blue: #0070B8;
--teal: #2CA7A1;
--salmon: #E4725F;
--orange: #E98A3C;
--chip-radius: 12px;
--card-radius: 12px;
--shadow: 0 6px 16px rgba(0, 0, 0, .08);
/* margin:24px 2px; */
font-family: inherit;
}
/* Container + Grid */
/* .am-container{ max-width: 1100px; margin-inline:auto; } */
.am-grid {
display: grid;
grid-template-columns: 49% 51%;
gap: 26px;
}
@media (max-width: 992px) {
.am-grid {
grid-template-columns: 1fr;
}
}
/* ====== Left column ====== */
.am-left {
display: flex;
flex-direction: column;
gap: 18px;
}
/* Header pill */
.am-title {
background: #0070B8;
color: #fff;
border-radius: 16px;
padding: 22px 16px;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
box-shadow: var(--shadow);
font-weight: 700;
}
.am-title i {
font-size: 20px;
}
/* List items */
.am-item {
display: flex;
gap: 0px;
text-decoration: none;
height: 100px;
}
/* image wrapper: owns the size & clipping */
.am-item .div_img {
width: 50%;
height: 100%;
overflow: hidden;
/* clip zoomed edges */
border-radius: var(--card-radius) 0 0 var(--card-radius);
/* TL TR BR BL */
box-shadow: var(--shadow);
}
/* inner image */
.am-item .div_img img {
width: 100%;
height: 100%;
object-fit: cover;
/* hover zoom additions */
transition: transform .35s ease;
transform-origin: center center;
will-change: transform;
}
/* zoom on hover and keyboard focus */
.am-item:hover .div_img img,
.am-item:focus-visible .div_img img {
transform: scale(1.9);
}
.am-chip {
flex: 1;
color: #fff;
font-weight: 700;
line-height: 1.4;
padding: 14px 16px;
border-radius: 0 var(--card-radius) var(--card-radius) 0;
/* TL TR BR BL */
box-shadow: var(--shadow);
display: flex;
align-items: center;
/* vertical */
justify-content: center;
/* horizontal */
background: #E99182;
text-align: center;
/* keeps multi-line text centered */
font-size: large;
}
/* .am-chip:hover{
color: var(--linknav);
} */
/* respect reduced motion */
@media (prefers-reduced-motion: reduce) {
.am-item .div_img img {
transition: none;
}
}
/* ====== Right column ====== */
.am-right {
display: flex;
flex-direction: column;
gap: 18px;
}
.am-top {
display: block;
gap: 14px;
grid-template-columns: 1fr 190px;
align-items: center;
text-align: center;
}
.am-badge {
background: #75BCB8;
color: #fff;
font-weight: 700;
padding: 16px;
text-align: center;
box-shadow: var(--shadow);
font-size: large;
height: 85px;
}
.am-wheel {
object-fit: cover;
width: 193px;
}
.am-link {
text-decoration: none;
}
/* News card */
/* === News card: no radius + full-width blue bar === */
.am-news {
display: block;
text-decoration: none;
border-radius: 0;
box-shadow: none;
}
.am-news .div_img {
overflow: hidden;
border-radius: 0;
height: 160px;
}
/* base image */
.am-news .div_img img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform .35s ease;
transform-origin: center center;
will-change: transform;
}
/* keep flip when needed */
.am-news .div_img img.flip-ltr {
transform: scaleX(-1);
}
/* hover/focus: zoom */
.am-news:hover .div_img img,
.am-news:focus-visible .div_img img {
transform: scale(2.09);
}
/* hover/focus for flipped image: compose transforms */
.am-news:hover .div_img img.flip-ltr,
.am-news:focus-visible .div_img img.flip-ltr {
transform: scaleX(-1) scale(2.09);
}
/* title bar (optional; safe if absent) */
.am-news .am-news-title {
background: #0070B8;
color: #fff;
padding: 25px 16px;
text-align: center;
font-weight: 700;
font-size: 20px !important;
border-radius: 0;
height: 85px;
}
/* motion preference */
@media (prefers-reduced-motion: reduce) {
.am-news .div_img img {
transition: none;
}
}
/* Small screens: keep it subtle */
@media (max-width: 992px) {
.annonces-media.enlarge .am-item {
height: 125px;
}
.annonces-media.enlarge .am-wheel {
width: 200px;
}
.annonces-media.enlarge .am-news img {
height: 230px;
}
}
/* Navigation LTR support */
[dir="ltr"] .didh-header__inner {
grid-template-columns: auto 1fr auto;
/* gap: 55px; */
}
[dir="ltr"] .didh-brand {
justify-self: start;
}
[dir="ltr"] .didh-menu {
justify-self: center;
}
[dir="ltr"] .didh-actions {
justify-self: end;
}
[dir="ltr"] .didh-search {
flex-direction: row-reverse;
}
[dir="ltr"] .didh-search i {
margin-right: 0;
margin-left: 6px;
}
[dir="ltr"] .didh-lang-menu {
left: 0;
right: auto;
direction: ltr;
}
/* Submenu panel LTR */
[dir="ltr"] .didh-submenu-panel {
left: 0;
right: auto;
direction: ltr;
}
/* Mobile adjustments for LTR */
@media (max-width: 992px) {
[dir="ltr"] .didh-header__inner {
direction: ltr;
text-align: left;
}
[dir="ltr"] .didh-brand {
grid-column: 1 / 2;
justify-self: start;
}
[dir="ltr"] .didh-actions {
grid-column: 1 / -1;
justify-self: stretch;
}
}
/* French specific menu item spacing */
[dir="ltr"] .didh-menu ul {
gap: 24px;
}
[dir="ltr"] .didh-menu a {
text-align: left;
font-size: 1rem;
line-height: 1.3;
}
/* French submenu styling */
[dir="ltr"] .didh-submenu-list {
list-style: none !important;
padding: 0 10px !important;
margin: 0 !important;
display: block !important;
}
[dir="ltr"] .didh-submenu-list li {
margin: 8px 0 !important;
padding: 0 !important;
}
[dir="ltr"] .didh-submenu-list a {
text-decoration: none !important;
color: #222 !important;
font-weight: 500 !important;
font-size: 14px !important;
padding: 6px 8px !important;
display: block !important;
border-radius: 4px !important;
transition: background-color 0.2s !important;
}
[dir="ltr"] .didh-submenu-list a:hover {
background-color: #f0f0f0 !important;
color: var(--linknav-hover) !important;
}
/* Ajustement de la largeur du sous-menu pour le français */
[dir="ltr"] .didh-submenu-panel {
min-width: 280px !important;
max-width: min(92vw, 600px) !important;
}
/* Positionnement précis pour chaque élément du menu français */
[dir="ltr"] .didh-menu ul li:nth-child(1)~.didh-submenu-panel {
left: 0px !important;
}
[dir="ltr"] .didh-menu ul li:nth-child(2)~.didh-submenu-panel {
left: 120px !important;
}
[dir="ltr"] .didh-menu ul li:nth-child(3)~.didh-submenu-panel {
left: 240px !important;
}
[dir="ltr"] .didh-menu ul li:nth-child(4)~.didh-submenu-panel {
left: 360px !important;
}
[dir="ltr"] .didh-menu ul li:nth-child(5)~.didh-submenu-panel {
left: 480px !important;
}
.actualite-section {
position: relative;
color: #FBFBFB;
margin-left: 2px;
margin-right: 2px;
min-height: 360px;
background: url(../image/actualite.png) center / cover no-repeat;
}
.section-div {
z-index: 1;
position: absolute;
height: 100%;
width: 100%;
top: 0;
background: rgba(0, 0, 0, 0.3);
}
/* .calendar .day.has-event{
border: 1px solid;
background: rgba(117, 188, 184, .12);
} */
/* little dot under the number */
.calendar .day {
position: relative;
}
.calendar .day .event-dot {
position: absolute;
left: 50%;
bottom: 6px;
transform: translateX(-50%);
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--linknav, #75BCB8);
display: block;
}
/* if you want a stronger style on hover */
/* .calendar .day.has-event:hover{
background: rgba(117, 188, 184, .20);
}
*/
/* actualites-list */
.actl-page {
padding: 2rem 0;
}
/* Top bar */
.actl-topbar {
display: flex;
justify-content: space-between;
align-items: center;
gap: 1rem;
padding: .5rem 0 1.25rem 0;
border-bottom: 1px solid;
margin-bottom: 1.25rem;
font-size: .95rem;
border-color: var(--lang-bg);
}
.actl-breadcrumb {
opacity: .85;
}
.actl-back {
display: inline-flex;
align-items: center;
gap: .5rem;
text-decoration: none;
font-weight: 700;
padding: .35rem .6rem;
border-radius: 10px;
transition: background .15s ease, transform .15s ease;
color: var(--linknav);
}
.actl-back:hover {
text-decoration: none;
transform: translateY(-1px);
background: rgba(0, 0, 0, .04);
}
.actl-back-ico {
font-size: 1.1rem;
}
/* Title */
.actl-title {
text-align: center;
font-weight: 900;
margin: 1.25rem 0 1.75rem;
letter-spacing: .2px;
}
/* Card */
.actl-card {
border: 1px solid;
border-radius: 14px;
background: transparent;
overflow: hidden;
box-shadow: 0 10px 28px rgba(0, 0, 0, .06);
border-color: var(--lang-bg);
}
.actl-card-body {
padding: 1rem 3.25rem;
}
.actl-item {
display: flex;
gap: 1rem;
padding: 1.1rem 0;
border-bottom: 1px solid;
align-items: flex-start;
border-color: var(--lang-bg);
}
.actl-item:last-child {
border-bottom: none;
}
.actl-item-media {
flex: 0 0 190px;
width: 190px;
height: 125px;
border-radius: 14px;
overflow: hidden;
border: 1px solid;
display: block;
position: relative;
transform: translateZ(0);
transition: transform .18s ease, box-shadow .18s ease;
border-color: var(--linknav);
}
.actl-item-media img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transform: scale(1.02);
}
/* subtle shine (no color) */
.actl-item-media::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(255, 255, 255, .18), rgba(255, 255, 255, 0));
opacity: .55;
pointer-events: none;
}
.actl-item:hover .actl-item-media {
transform: translateY(-2px);
box-shadow: 0 12px 30px rgba(0, 0, 0, .12);
}
/* fallback if no image */
.actl-media-fallback {
width: 100%;
height: 100%;
background: rgba(0, 0, 0, .05);
position: relative;
overflow: hidden;
}
.actl-media-fallback::after {
content: "";
position: absolute;
top: 0;
left: -60%;
width: 60%;
height: 100%;
background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .35), rgba(255, 255, 255, 0));
animation: actlShimmer 1.2s infinite;
}
@keyframes actlShimmer {
0% {
transform: translateX(0);
}
100% {
transform: translateX(200%);
}
}
/* Content */
.actl-item-content {
flex: 1;
min-width: 0;
padding-top: .1rem;
}
/* Meta pill */
.actl-item-meta {
display: flex;
align-items: center;
justify-content: flex-start;
gap: .5rem;
margin-bottom: .4rem;
}
.actl-page[dir="rtl"] .actl-item-meta {
justify-content: flex-end;
}
.actl-meta-pill {
display: inline-flex;
align-items: center;
gap: .35rem;
padding: .22rem .6rem;
border-radius: 999px;
border: 1px solid;
font-size: .88rem;
opacity: .85;
line-height: 1.4;
}
/* Title */
.actl-item-title {
font-weight: 900;
margin: .1rem 0 .45rem;
line-height: 1.35;
font-size: 1.08rem;
text-align: left;
}
.actl-page[dir="rtl"] .actl-item-title {
text-align: right;
}
.actl-item-title a {
color: inherit;
text-decoration: none;
}
.actl-item-title a:hover {
text-decoration: underline;
color: var(--linknav);
;
}
/* Excerpt */
.actl-item-excerpt {
margin: 0;
line-height: 1.75;
text-align: left;
opacity: .92;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.actl-page[dir="rtl"] .actl-item-excerpt {
text-align: right;
}
.actl-item-actions {
margin-top: .55rem;
}
.actl-readmore {
display: inline-flex;
align-items: center;
gap: .4rem;
text-decoration: none;
font-weight: 700;
padding: .3rem .55rem;
border-radius: 10px;
border: 1px solid transparent;
transition: background .15s ease, transform .15s ease, border-color .15s ease;
color: var(--linknav);
}
.actl-readmore:hover {
transform: translateY(-1px);
background: rgba(0, 0, 0, .04);
border-color: rgba(0, 0, 0, .10);
}
.actl-readmore-ico {
font-size: 1.05rem;
}
/* Empty */
.actl-empty {
/* padding: 1.25rem 0; */
opacity: .8;
text-align: center;
}
/* Pagination */
.actl-pagination {
margin-top: 1.25rem;
}
.actl-pagination .pagination {
margin-bottom: 0;
justify-content: center;
}
/* Better icons sizing */
.actl-pagination svg {
width: 18px !important;
height: 18px !important;
max-width: 18px !important;
max-height: 18px !important;
}
/* Buttons alignment + colors */
.actl-pagination .page-link {
display: flex;
align-items: center;
justify-content: center;
color: var(--linknav, #75BCB8);
border-color: rgba(117, 188, 184, .35);
}
.actl-pagination .page-link:hover {
color: #fff;
background: var(--linknav-hover, #2e8f95);
border-color: var(--linknav-hover, #2e8f95);
}
/* Active page */
.actl-pagination .page-item.active .page-link {
background: var(--linknav, #75BCB8);
border-color: var(--linknav, #75BCB8);
color: #fff;
}
/* Disabled */
.actl-pagination .page-item.disabled .page-link {
color: rgba(0, 0, 0, .35);
background: transparent;
}
/* Mobile */
@media (max-width: 575.98px) {
.actl-card-body {
padding: 1rem;
}
.actl-item {
flex-direction: column;
gap: .75rem;
}
.actl-item-media {
width: 100%;
height: auto;
aspect-ratio: 16/9;
flex-basis: auto;
}
}
[dir="rtl"] .actl-pagination .pagination .page-link {
border-radius: 0;
/* reset all */
}
/* in RTL: first item (Prev) is on the RIGHT visually */
[dir="rtl"] .actl-pagination .pagination .page-item:first-child .page-link {
border-top-right-radius: var(--bs-pagination-border-radius);
border-bottom-right-radius: var(--bs-pagination-border-radius);
}
/* in RTL: last item (Next) is on the LEFT visually */
[dir="rtl"] .actl-pagination .pagination .page-item:last-child .page-link {
border-top-left-radius: var(--bs-pagination-border-radius);
border-bottom-left-radius: var(--bs-pagination-border-radius);
}
/* public/assets/css/publications-list.css */
/* Publications list rows (file items) + per-type colors */
/* spacing */
.actl-page--tight {
padding-top: 1.25rem;
}
.actl-title--sm {
font-size: 30px;
margin-top: .75rem;
margin-bottom: 1.25rem;
}
/* File row */
.actl-file-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: .95rem 0;
border-bottom: 1px solid rgba(0, 0, 0, .12);
text-decoration: none;
color: inherit;
transition: transform .15s ease, background .15s ease;
}
.actl-file-row:last-child {
border-bottom: none;
}
.actl-file-row:hover {
transform: translateY(-1px);
background: rgba(0, 0, 0, .03);
border-radius: 10px;
padding-left: .75rem;
padding-right: .75rem;
}
/* Left group */
.actl-file-left {
display: flex;
align-items: center;
gap: .9rem;
min-width: 0;
flex: 1;
}
/* Icon box */
.actl-file-ico {
width: 46px;
height: 46px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
border: 1px solid rgba(0, 0, 0, .14);
background: rgba(0, 0, 0, .03);
color: rgba(0, 0, 0, .75);
}
.actl-file-ico i {
font-size: 1.35rem;
}
/* Text */
.actl-file-text {
min-width: 0;
flex: 1;
}
.actl-file-title {
font-weight: 900;
font-size: 1.02rem;
line-height: 1.35;
margin: 0;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* Meta */
.actl-file-meta {
margin-top: .25rem;
font-size: .92rem;
opacity: .85;
display: flex;
flex-wrap: wrap;
gap: .5rem;
align-items: center;
}
.actl-file-sep {
opacity: .6;
}
.actl-file-pill {
display: inline-flex;
align-items: center;
padding: .18rem .55rem;
border-radius: 999px;
border: 1px solid rgba(0, 0, 0, .18);
font-size: .78rem;
letter-spacing: .3px;
font-weight: 800;
opacity: .9;
}
/* Right arrow */
.actl-file-right {
flex: 0 0 auto;
opacity: .55;
transition: transform .15s ease, opacity .15s ease;
}
.actl-file-row:hover .actl-file-right {
opacity: .9;
transform: translateX(2px);
}
.actl-page[dir="rtl"] .actl-file-row:hover .actl-file-right {
transform: translateX(-2px);
}
/* =========================
File type colors (requested)
========================= */
/* PDF - red */
.actl-file--pdf .actl-file-ico {
background: rgba(220, 38, 38, .10);
border-color: rgba(220, 38, 38, .30);
color: rgb(220, 38, 38);
}
.actl-file--pdf .actl-file-pill {
border-color: rgba(220, 38, 38, .35);
}
/* Word - blue */
.actl-file--word .actl-file-ico {
background: rgba(37, 99, 235, .10);
border-color: rgba(37, 99, 235, .30);
color: rgb(37, 99, 235);
}
.actl-file--word .actl-file-pill {
border-color: rgba(37, 99, 235, .35);
}
/* Excel - green */
.actl-file--excel .actl-file-ico {
background: rgba(22, 163, 74, .10);
border-color: rgba(22, 163, 74, .30);
color: rgb(22, 163, 74);
}
.actl-file--excel .actl-file-pill {
border-color: rgba(22, 163, 74, .35);
}
/* PPT - orange */
.actl-file--ppt .actl-file-ico {
background: rgba(234, 88, 12, .10);
border-color: rgba(234, 88, 12, .30);
color: rgb(234, 88, 12);
}
.actl-file--ppt .actl-file-pill {
border-color: rgba(234, 88, 12, .35);
}
/* ZIP - purple */
.actl-file--zip .actl-file-ico {
background: rgba(124, 58, 237, .10);
border-color: rgba(124, 58, 237, .30);
color: rgb(124, 58, 237);
}
.actl-file--zip .actl-file-pill {
border-color: rgba(124, 58, 237, .35);
}
/* Default - gray */
.actl-file--default .actl-file-ico {
background: rgba(100, 116, 139, .10);
border-color: rgba(100, 116, 139, .30);
color: rgb(100, 116, 139);
}
.actl-file--default .actl-file-pill {
border-color: rgba(100, 116, 139, .35);
}
/* Mobile */
@media (max-width: 575.98px) {
.actl-file-ico {
width: 42px;
height: 42px;
border-radius: 10px;
}
.actl-file-title {
font-size: 1rem;
}
.actl-file-row:hover {
padding-left: .6rem;
padding-right: .6rem;
}
}
/* Use theme variable if you already have it */
:root {
--job-accent: var(--linknav, #75BCB8);
}
/* small title variant */
.actl-title--sm {
font-size: 30px;
margin-top: .75rem;
margin-bottom: 1.25rem;
}
/* cards spacing helper */
.job-card {
overflow: hidden;
}
/* ===== Filter ===== */
.job-filter {
display: flex;
flex-wrap: wrap;
gap: 1rem;
align-items: center;
justify-content: space-between;
}
.job-filter-left {
min-width: 260px;
}
.job-filter-kicker {
font-size: .78rem;
text-transform: uppercase;
letter-spacing: .12em;
opacity: .75;
font-weight: 700;
margin-bottom: .25rem;
}
.job-filter-help {
font-size: .92rem;
opacity: .8;
}
.job-filter-right {
display: flex;
flex-wrap: wrap;
gap: .5rem;
align-items: center;
}
.job-pill {
border: 1px solid rgba(0, 0, 0, .14);
background: rgba(0, 0, 0, .03);
border-radius: 999px;
padding: .45rem .9rem;
font-weight: 800;
font-size: .88rem;
transition: transform .15s ease, background .15s ease, border-color .15s ease;
}
.job-pill:hover {
transform: translateY(-1px);
background: rgba(0, 0, 0, .05);
}
.job-pill.is-active {
border-color: rgba(0, 0, 0, .08);
background: color-mix(in srgb, var(--job-accent) 18%, transparent);
}
/* ===== Table ===== */
.job-table-wrap {
width: 100%;
overflow: auto;
/* if many columns on small screens */
}
.job-table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
min-width: 980px;
/* keeps structure */
}
/* header */
.job-table thead th {
position: sticky;
top: 0;
z-index: 1;
background: color-mix(in srgb, var(--job-accent) 90%, #000 0%);
color: #fff;
font-size: .78rem;
letter-spacing: .06em;
text-transform: uppercase;
padding: .85rem .75rem;
text-align: center;
border-bottom: 1px solid rgba(255, 255, 255, .25);
}
.job-table thead th:first-child {
text-align: left;
}
/* cells */
.job-table tbody td {
padding: .85rem .75rem;
vertical-align: top;
border-bottom: 1px solid rgba(0, 0, 0, .10);
font-size: .95rem;
}
.job-table tbody tr:hover {
background: rgba(0, 0, 0, .03);
}
/* Poste column */
.job-poste {
border-left: 4px solid var(--job-accent);
padding-left: .85rem !important;
}
.job-poste-title {
font-weight: 900;
line-height: 1.25;
}
.job-poste-sub {
margin-top: .25rem;
font-size: .85rem;
opacity: .75;
}
/* Designation */
.job-desc {
min-width: 320px;
line-height: 1.6;
opacity: .92;
}
/* download button */
.job-dl {
width: 32px;
height: 32px;
border-radius: 999px;
border: 1px solid rgba(0, 0, 0, .14);
display: inline-flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, .9);
transition: transform .15s ease, background .15s ease, border-color .15s ease;
text-decoration: none;
}
.job-dl i {
font-size: 1.05rem;
color: var(--job-accent);
}
.job-dl:hover {
transform: translateY(-1px);
background: color-mix(in srgb, var(--job-accent) 14%, #fff);
border-color: color-mix(in srgb, var(--job-accent) 35%, rgba(0, 0, 0, .14));
}
/* empty dash */
.job-na {
opacity: .55;
}
/* empty row */
.job-empty {
padding: 1.5rem !important;
text-align: center;
opacity: .75;
}
/* mobile: slightly smaller min width */
@media (max-width: 576px) {
.job-table {
min-width: 860px;
}
}
/* public/assets/css/mediatheque.css */
.actl-title--sm {
font-size: 30px;
margin: .75rem 0 1.25rem;
}
/* media list tweaks */
.actl-item--media .actl-item-media {
position: relative;
}
.actl-media-thumb {
border-radius: 14px;
overflow: hidden;
}
.actl-media-play {
position: absolute;
inset: auto 12px 12px auto;
width: 42px;
height: 42px;
border-radius: 999px;
background: rgba(0, 0, 0, .55);
display: inline-block;
}
.actl-media-play::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-40%, -50%);
width: 0;
height: 0;
border-left: 12px solid #fff;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
}
.ao-avis-block {
padding: 18px 18px 10px;
border-bottom: 1px solid rgba(0, 0, 0, .06);
}
.ao-avis-block:last-child {
border-bottom: 0;
}
.ao-avis-toggle {
width: 100%;
border: 0;
background: transparent;
padding: 0;
text-align: inherit;
cursor: pointer;
}
.ao-avis-head {
display: flex;
gap: 14px;
align-items: flex-start;
position: relative;
}
.ao-avis-badge {
flex: 0 0 auto;
}
.ao-avis-icon {
width: 56px;
height: 56px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 16px;
font-weight: 800;
letter-spacing: .08em;
background: rgba(117, 188, 184, .18);
color: var(--linknav, #75BCB8);
}
.ao-avis-info {
flex: 1;
min-width: 0;
}
.ao-avis-title {
font-weight: 800;
font-size: 1.05rem;
line-height: 1.25;
margin-top: 6px;
}
.ao-avis-meta {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.job-pill--soft {
background: #eef2f7 !important;
color: #374151 !important;
border: 1px solid rgba(0, 0, 0, .06) !important;
text-decoration: none;
}
.ao-avis-desc {
margin-top: 6px;
color: #6b7280;
font-size: .92rem;
}
.ao-files-mini {
display: flex;
gap: 8px;
justify-content: center;
flex-wrap: wrap;
}
.ao-dl {
width: 30px;
height: 30px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
}
.ao-dl i {
font-size: 1.05rem;
}
.ao-ic-red i {
color: #dc2626;
}
.ao-ic-blue i {
color: #2563eb;
}
.ao-ic-green i {
color: #16a34a;
}
.ao-ic-amber i {
color: #d97706;
}
.ao-ic-gray i {
color: #6b7280;
}
.ao-pill {
display: inline-block;
margin-left: 8px;
padding: .15rem .5rem;
border-radius: 999px;
font-size: .75rem;
font-weight: 700;
vertical-align: middle;
}
.ao-pill-green {
background: rgba(22, 163, 74, .14);
color: #14532d;
border: 1px solid rgba(22, 163, 74, .18);
}
/* ✅ chevron animation */
.ao-chevron {
margin-left: auto;
font-size: 1.2rem;
line-height: 1;
transform: rotate(0deg);
transition: transform .2s ease;
color: #6b7280;
padding-top: 10px;
}
.ao-avis-block.is-open .ao-chevron {
transform: rotate(180deg);
}
/* ✅ panel spacing */
.ao-panel {
margin-top: 10px;
}
.pr-files-mini {
display: flex;
gap: 8px;
flex-wrap: wrap;
align-items: center;
justify-content: flex-end;
}
.pr-dl {
width: 32px;
height: 32px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, .04);
text-decoration: none;
}
.pr-dl i {
font-size: 1.05rem;
}
.actl-file--pdf i {
color: #dc2626;
}
.actl-file--word i {
color: #2563eb;
}
.actl-file--excel i {
color: #16a34a;
}
.actl-file--ppt i {
color: #d97706;
}
.actl-file--zip i {
color: #7c3aed;
}
/* detail */
.med-player {
width: 100%;
}
.med-embed {
width: 100%;
aspect-ratio: 16/9;
border-radius: 14px;
overflow: hidden;
border: 1px solid rgba(0, 0, 0, .12);
}
.med-embed iframe {
width: 100%;
height: 100%;
display: block;
}
.med-video {
width: 100%;
max-height: 520px;
border-radius: 14px;
border: 1px solid rgba(0, 0, 0, .12);
}
.med-photo {
width: 100%;
border-radius: 14px;
overflow: hidden;
border: 1px solid rgba(0, 0, 0, .12);
}
.med-photo img {
width: 100%;
height: auto;
display: block;
}
.med-bc-link {
text-decoration: none;
}
.med-bc-link:hover {
text-decoration: underline;
}
.custom-select {
background-color: #E4A59A;
/* Rose saumon */
color: white;
border: none;
border-radius: 25px;
/* Coins arrondis */
padding: 10px 20px;
font-size: 16px;
font-weight: 500;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 8px;
position: relative;
appearance: none;
/* Retire le style par défaut du navigateur */
outline: none;
transition: background-color 0.3s ease;
}
.custom-select:hover {
background-color: #D99186;
/* Légèrement plus foncé au survol */
}
.custom-select:focus {
box-shadow: 0 0 0 3px rgba(228, 165, 154, 0.3);
}
/* Icône flèche vers le bas */
.custom-select::after {
content: "▼";
font-size: 12px;
margin-left: 5px;
}
/* Alternative avec une vraie balise select */
select.language-select {
background-color: #E4A59A;
color: white;
border: none;
border-radius: 25px;
padding: 10px 40px 10px 20px;
font-size: 16px;
font-weight: 500;
cursor: pointer;
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='white' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 15px center;
outline: none;
}
select.language-select:hover {
background-color: #D99186;
}
select.language-select:focus {
box-shadow: 0 0 0 3px rgba(228, 165, 154, 0.3);
}
.hero .hero-bg {
background-size: contain !important;
background-position: center center;
background-repeat: no-repeat;
background-color: #749eb9;
/* ou la couleur que tu veux pour les zones vides */
}
.news-cover {
width: 100%;
max-height: 420px;
object-fit: contain;
}
:root {
--my-link-color-rgb: 86, 194, 179;
}
a {
color: rgba(var(--my-link-color-rgb), var(--bs-link-opacity, 1));
text-decoration: underline;
}
.container.my-5.vstack.gap-5 .container-xxl,
.container.my-5.vstack.gap-5 .am-container {
max-width: 1200px;
margin-inline: auto;
}
/* =========================================================
MW Media Grid / PHOTOS - VIDEOS CSS
========================================================= */
.mwMedGrid {
margin-top: 10px;
}
.mwMedCard {
display: block;
width: 100%;
background: #efefef;
color: inherit;
text-decoration: none;
border: 0;
padding: 0;
border-radius: 0;
overflow: hidden;
transition: transform .15s ease, box-shadow .15s ease;
}
.mwMedCard:hover {
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(0, 0, 0, .08);
text-decoration: none;
}
.mwMedThumb {
display: block;
position: relative;
background: #ddd;
aspect-ratio: 4 / 3;
overflow: hidden;
}
.mwMedThumb img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.mwMedThumbFallback {
display: block;
width: 100%;
height: 100%;
background: linear-gradient(135deg, #dedede, #f2f2f2);
}
.mwMedPlayBadge {
position: absolute;
left: 12px;
bottom: 12px;
width: 48px;
height: 48px;
border-radius: 999px;
background: rgba(0, 0, 0, .55);
display: grid;
place-items: center;
}
[dir="ltr"] .mwMedPlayBadge {
left: auto;
right: 12px;
}
.mwMedPlayBadge::before {
content: '';
width: 0;
height: 0;
border-left: 14px solid #fff;
border-top: 9px solid transparent;
border-bottom: 9px solid transparent;
margin-left: 3px;
}
.mwMedBody {
display: block;
padding: 12px 14px 14px;
}
.mwMedMeta {
display: flex;
justify-content: flex-end;
gap: 10px;
font-size: 13px;
color: #8a8a8a;
margin-bottom: 8px;
}
[dir="ltr"] .mwMedMeta {
justify-content: flex-start;
}
.mwMedMetaItem {
display: inline-flex;
align-items: center;
gap: 6px;
}
.mwMedMetaItem svg {
width: 14px;
height: 14px;
opacity: .7;
}
.mwMedTitle {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
font-size: 15px;
line-height: 1.35;
color: #222;
}
.mwMedPagination {
margin-top: 18px;
}
/* =========================================================
MW Media Modal (NEW)
========================================================= */
.mwMedModal .modal-dialog {
max-width: 1100px;
}
.mwMedModal .modal-content {
background: transparent;
border: 0;
}
.mwMedModal__wrap {
position: relative;
}
.mwMedModal__close {
position: absolute;
top: -18px;
left: 0;
width: 42px;
height: 42px;
border-radius: 999px;
border: 0;
background: #0f0f10;
color: #fff;
display: grid;
place-items: center;
z-index: 5;
opacity: .9;
font-size: 24px;
line-height: 1;
}
[dir="ltr"] .mwMedModal__close {
left: auto;
right: 0;
}
.mwMedModal__stage {
position: relative;
background: rgba(0, 0, 0, .65);
padding: 18px;
border-radius: 6px 6px 0 0;
}
.mwMedModal__media {
display: flex;
align-items: center;
justify-content: center;
min-height: 60vh;
}
.mwMedModal__img,
.mwMedModal__video {
max-width: 100%;
max-height: 72vh;
border-radius: 2px;
}
.mwMedModal__iframeWrap {
width: min(100%, 1100px);
aspect-ratio: 16/9;
}
.mwMedModal__iframeWrap iframe {
width: 100%;
height: 100%;
border: 0;
}
.mwMedNav {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 44px;
height: 44px;
border: 0;
background: rgba(255, 255, 255, .85);
color: #333;
display: grid;
place-items: center;
font-size: 22px;
}
.mwMedNav:hover {
background: #fff;
}
.mwMedNav--prev {
left: 12px;
}
.mwMedNav--next {
right: 12px;
}
.mwMedModal__bar {
background: #fff;
padding: 14px 16px;
display: grid;
grid-template-columns: 1fr 2fr 1fr;
align-items: center;
gap: 12px;
border-radius: 0 0 6px 6px;
}
@media (max-width: 768px) {
.mwMedModal__bar {
grid-template-columns: 1fr;
text-align: center;
}
.mwMedShare {
justify-content: center;
}
.mwMedCounter {
display: none;
}
}
.mwMedShare {
display: flex;
gap: 10px;
align-items: center;
}
.mwMedShareBtn {
width: 38px;
height: 38px;
border-radius: 8px;
border: 1px solid #e7e7e7;
background: #fff;
display: grid;
place-items: center;
padding: 0;
}
.mwMedShareBtn:hover {
background: #f6f6f6;
}
.mwMedShareBtn svg {
width: 18px;
height: 18px;
opacity: .75;
}
.mwMedCaption {
text-align: center;
}
.mwMedCaption__title {
font-size: 14px;
color: #333;
line-height: 1.4;
}
.mwMedCaption__date {
font-size: 12px;
color: #888;
margin-top: 4px;
}
.mwMedCounter {
text-align: end;
font-size: 13px;
color: #888;
}
[dir="ltr"] .mwMedCounter {
text-align: start;
}
/* =========================================================
MW Media Modal (NEW) - no social zone + RTL arrows fixed
========================================================= */
.mwMedModal .modal-dialog {
max-width: 1100px;
}
.mwMedModal .modal-content {
background: transparent;
border: 0;
}
.mwMedModal__wrap {
position: relative;
}
.mwMedModal__close {
position: absolute;
top: -18px;
left: 0;
width: 42px;
height: 42px;
border-radius: 999px;
border: 0;
background: #0f0f10;
color: #fff;
display: grid;
place-items: center;
z-index: 5;
opacity: .92;
font-size: 24px;
line-height: 1;
}
[dir="ltr"] .mwMedModal__close {
left: auto;
right: 0;
}
.mwMedModal__stage {
position: relative;
background: rgba(0, 0, 0, .65);
padding: 18px;
border-radius: 6px 6px 0 0;
}
.mwMedModal__media {
display: flex;
align-items: center;
justify-content: center;
min-height: 60vh;
}
.mwMedModal__img,
.mwMedModal__video {
max-width: 100%;
max-height: 72vh;
border-radius: 2px;
}
.mwMedModal__iframeWrap {
width: min(100%, 1100px);
aspect-ratio: 16/9;
}
.mwMedModal__iframeWrap iframe {
width: 100%;
height: 100%;
border: 0;
}
/* Nav buttons */
.mwMedNav {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 44px;
height: 44px;
border: 0;
background: rgba(255, 255, 255, .88);
color: #333;
display: grid;
place-items: center;
border-radius: 10px;
box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
}
.mwMedNav:hover {
background: #fff;
}
.mwMedNav svg {
width: 20px;
height: 20px;
}
/* LTR positions */
.mwMedNav--prev {
left: 12px;
}
.mwMedNav--next {
right: 12px;
}
/* RTL positions (swap) */
[dir="rtl"] .mwMedNav--prev {
right: 12px;
left: auto;
}
[dir="rtl"] .mwMedNav--next {
left: 12px;
right: auto;
}
/* Direction fix using same SVG (chevron-right) */
.mwMedNav--prev svg {
transform: rotate(180deg);
}
/* LTR prev */
.mwMedNav--next svg {
transform: rotate(0deg);
}
/* LTR next */
[dir="rtl"] .mwMedNav--prev svg {
transform: rotate(0deg);
}
/* RTL prev (right) */
[dir="rtl"] .mwMedNav--next svg {
transform: rotate(180deg);
}
/* RTL next (left) */
/* Caption area (no social) */
.mwMedModal__caption {
background: #fff;
padding: 14px 16px;
border-radius: 0 0 6px 6px;
text-align: center;
}
.mwMedCaption__title {
font-size: 14px;
color: #333;
line-height: 1.4;
}
.mwMedCaption__date {
font-size: 12px;
color: #888;
margin-top: 4px;
}
.mwMedCounter {
margin-top: 6px;
font-size: 13px;
color: #888;
}
@media (max-width: 768px) {
.mwMedNav {
width: 40px;
height: 40px;
}
.mwMedModal__media {
min-height: 52vh;
}
}
/* Hero Section*/
.njHero {
background: #fff;
width: 100%;
}
/* White margins area */
.njHero__wrap {
position: relative;
width: 100%;
padding: 10px 160px;
box-sizing: border-box;
}
.njHero__carousel {
max-width: 1200px;
margin: 0 auto;
}
.njHero__item {
position: relative;
width: 100%;
aspect-ratio: 16 / 7;
min-height: 520px;
overflow: hidden;
background: #e9e9e9;
}
.njHero__img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
/* Caption bar */
.njHero__caption {
position: absolute;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(to top, rgba(0, 112, 184, .92), rgba(0, 112, 184, .88));
padding: 18px 24px 46px;
text-align: center;
z-index: 5;
}
.njHero__title {
color: #fff;
text-decoration: none;
font-size: 22px;
font-weight: 700;
line-height: 1.8;
display: block;
max-width: 96%;
margin: 0 auto;
}
.njHero__title:hover {
color: #fff;
opacity: .95;
text-decoration: none;
}
/* Dots inside bar (force LTR so order is normal) */
.njHero__dots {
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 14px;
margin: 0;
padding: 0;
display: flex;
gap: 10px;
z-index: 6;
direction: ltr;
}
.njHero__dots [data-bs-target] {
width: 10px;
height: 10px;
border-radius: 50%;
border: 1.5px solid rgba(255, 255, 255, .85);
background: transparent;
opacity: 1;
margin: 0;
}
.njHero__dots .active {
background: #ffffff;
border-color: #dee1e8;
}
/* Arrows */
/* Arrows (PNG) */
.njHero__arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
border: 0 !important;
padding: 0;
cursor: pointer;
z-index: 50;
width: 50px;
height: 50px;
/* force image (override any old theme styles) */
background: var(--arrow-normal) center/contain no-repeat !important;
background-color: transparent !important;
box-shadow: none !important;
border-radius: 0 !important;
}
.njHero__arrow:hover,
.njHero__arrow:focus-visible {
background: var(--arrow-hover) center/contain no-repeat !important;
outline: none;
}
.njHero__arrow--prev {
left: 70px;
}
.njHero__arrow--next {
right: 70px;
}
/* hide old text arrows */
.njHero__arrowTxt {
display: none !important;
}
/* Responsive */
@media (max-width: 1300px) {
.njHero__wrap {
padding: 10px 110px;
}
.njHero__arrow--prev {
left: 45px;
}
.njHero__arrow--next {
right: 45px;
}
.njHero__item {
min-height: 460px;
}
}
@media (max-width: 992px) {
.njHero__wrap {
padding: 0 20px;
}
.njHero__arrow {
display: none;
}
.njHero__item {
min-height: 360px;
aspect-ratio: 16/8;
}
.njHero__title {
font-size: 18px;
}
}
.njHero__dots--rtl {
flex-direction: row-reverse;
}
#blog-section .media-frame {margin: 0 !important;}
#blog-section .news-flag {height: 60px;}
#blog-section .flag-title {height: 30px;}
#blog-section .flag-icon {width: 40px !important;}
.article-body img{width: 100% !important; height: auto !important;}
.section-content table{float: none !important;}
.links-section {
padding: 18px 14px;
background-color: #f3f3f3;
background-image:
linear-gradient(120deg, rgba(180, 120, 255, 0.07) 1px, transparent 1px),
linear-gradient(60deg, rgba(0, 180, 255, 0.05) 1px, transparent 1px);
background-size: 42px 42px, 42px 42px;
}
.portal-card {
display: flex;
flex-direction: row-reverse; /* pour RTL : icône à droite */
align-items: stretch;
min-height: 80px;
background: #fff;
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
overflow: hidden;
transition: all 0.25s ease;
}
.portal-card:hover {
transform: translateY(-3px);
box-shadow: 0 8px 18px rgba(0, 0, 0, 0.10);
}
.portal-card__content {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 20px 24px;
background: #fff;
}
.portal-card__title {
margin: 0;
font-size: 22px;
line-height: 1.6;
font-weight: 500;
color: #111;
}
.portal-card__icon {
width: 126px;
min-width: 126px;
display: flex;
align-items: center;
justify-content: center;
background: #75BCB8;
color: #fff;
font-size: 30px !important;
}
/* Carte active */
.portal-card--active .portal-card__content {
background: #75BCB8;
}
.portal-card--active .portal-card__title {
color: #fff;
font-weight: 600;
}
.portal-card--active .portal-card__icon {
background: #8d63eb;
color: #76e3ff;
}
/* Responsive */
@media (max-width: 991.98px) {
.portal-card {
min-height: 110px;
}
.portal-card__icon {
width: 95px;
min-width: 95px;
font-size: 34px !important;
}
.portal-card__title {
font-size: 19px;
}
}
@media (max-width: 575.98px) {
.portal-card {
min-height: 90px;
}
.portal-card__icon {
width: 78px;
min-width: 78px;
font-size: 28px !important;
}
.portal-card__content {
padding: 16px;
}
.portal-card__title {
font-size: 17px;
}
}
/* Font Size */
.actl-title{font-size: 30px;}
#menuContent .section-content img{width: 100% !important; height: auto !important;}