/* ===== Fonts ===== */
@import url('https://fonts.googleapis.com/css2?family=Almarai:wght@300;400;700;800&family=Roboto:wght@300;400;500;600;700;900&display=swap');

:root {
  --green-50:  #e6f7d7;
  --green-100: #cfe2dd;
  --green-200: #a8db7b;
  --green-300: #4c956c;
  --green-400: #487a1f;
  --green-500: #3b6d11;
  --green-600: #0f6e56;
  --green-700: #006a4e;
  --green-900: #081c15;

  --red-500:   #c0392b;
  --red-600:   #e62e25;
  --orange:    #d85a30;
  --yellow:    #eac102;
  --gold:      #e9ad3b;
  --blue:      #0071bc;
  --blue-soft: #a2d2e5;

  --ink:       #262626;
  --ink-soft:  #595959;
  --muted:     #6c6e7b;
  --line:      #e9e8e7;
  --bg:        #ffffff;
  --green-brand: #3b6d11;
  --mint-bg:    #f3faf6;
}

/* Content container — pixel-perfect inline block */
.content { width: 1156px; margin: 0 auto; }

* { box-sizing: border-box; -webkit-font-smoothing: antialiased; }
html, body { margin: 0; padding: 0; }
/* Prevent horizontal overflow — iOS Safari requires html, not just body */
html { overflow-x: hidden; max-width: 100%; }
/* overflow-x: clip creates a clip boundary WITHOUT creating a scroll container */
.resource-page-main,
.resource-detail-list,
.info-detail-list { overflow-x: clip; }
body {
  font-family: 'Roboto', 'Almarai', system-ui, -apple-system, Segoe UI, sans-serif;
  color: var(--ink);
  background: var(--bg);
  font-size: 16px;
  line-height: 1.45;
}

img, svg { display: block; max-width: 100%; }
button { font-family: inherit; cursor: pointer; }
a { color: inherit; text-decoration: none; }

/* Design canvas — pixel-perfect at 1440px */
.canvas { width: 1440px; margin: 0 auto; }

/* ===== Utility text styles ===== */
.font-almarai { font-family: 'Almarai', sans-serif; }
.font-roboto  { font-family: 'Roboto', sans-serif; }

/* ===== Main nav ===== */
.mainnav {
  height: 96px;
  background: transparent;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 80px;
  gap: 36px;
}
.mainnav .logo-block {
  display: flex;
  align-items: center;
  gap: 14px;
  height: 70px;
  flex-shrink: 0;
}
.mainnav .logo-block .crest { height: 70px; width: auto; }
.mainnav .logo-block .divider {
  width: 1px;
  height: 48.24px;
  background: #c9cdc7;
  flex-shrink: 0;
}
.mainnav .logo-block .title-stack { display: flex; flex-direction: column; gap: 2px; }
.mainnav .logo-block .title-ar,
.mainnav .logo-block .title-fr { white-space: nowrap; font-family: 'Almarai', sans-serif; color: var(--ink); line-height: 1.2; }
.mainnav .logo-block .title-ar { direction: rtl; font-size: 14px; font-weight: 700; }
.mainnav .logo-block .title-fr { font-size: 14px; font-weight: 700; letter-spacing: 0.1px; }
.mainnav .nav-links { display: flex; align-items: center; gap: 42px; flex: 1; justify-content: center; }
.mainnav .nav-links a { font-size: 16px; color: var(--ink); display: flex; align-items: center; gap: 6px; font-weight: 500; }
.mainnav .nav-links a .chev { width: 10px; height: 6px; }
.mainnav .nav-right { display: flex; align-items: center; gap: 22px; }
.mainnav .lang { display: flex; align-items: center; gap: 6px; color: var(--ink); font-weight: 600; font-family: 'Almarai', sans-serif; background: transparent; border: none; }
.mainnav .lang .caret { width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 6px solid var(--red-500); }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 14px 26px; border-radius: 999px; font-weight: 700; font-size: 15px; transition: all 0.15s ease; border: none; white-space: nowrap; }
.btn-primary { background: var(--green-brand); color: #fff; }
.btn-primary:hover { background: var(--green-500); }
.btn-outline-red { background: transparent; color: var(--red-500); border: 1.5px solid var(--red-500); }
.btn-outline-red:hover { background: rgba(192,57,43,0.08); }
.btn-outline { background: #fff; color: var(--green-brand); border: 1.5px solid var(--green-brand); }
.btn-outline:hover { background: var(--green-50); }
.btn-on-green-solid { background: #fff; color: var(--green-brand); }
.btn-on-green-ghost { background: transparent; color: #fff; border: 1.5px solid #fff; }
.btn-on-green-ghost:hover { background: rgba(255,255,255,0.1); }

/* ===== Hero ===== */
.hero {
  padding: 16px 0 80px;
  position: relative;
  overflow: hidden;
}
.hero-grid { display: grid; grid-template-columns: 1fr; gap: 36px; align-items: center; }
.hero h1 {
  font-family: 'Almarai', sans-serif;
  font-weight: 700;
  font-size: 36px;
  line-height: 46px;
  letter-spacing: 0;
  color: var(--ink);
  margin: 0 auto;
  text-align: center;
  text-transform: uppercase;
  width: 346px;
  height: 92px;
}
.hero h1 .accent { color: var(--green-brand); display: block; }
.hero .lede {
  width: 525px;
  height: auto;
  margin: 14px auto 0;
  text-align: center;
  font-family: 'Almarai', sans-serif;
  font-weight: 400;
  font-size: 15px;
  line-height: 140%;
  letter-spacing: 0;
  color: var(--ink);
}
.hero .cta-row { display: flex; gap: 13px; justify-content: center; margin-top: 16px; }
.hero .cta-row .btn { padding: 11px 21px; font-size: 13.5px; }

.hero-media {
  position: relative;
  margin-top: 16px;
  width: 1700px;
  margin-left: calc(50% - 850px);
  height: 360px;
  overflow: hidden;
}
/* Full-bleed decorative motif — widened to bleed further left & right */
.hero-media .motif-bg {
  position: absolute;
  left: 0;
  top: 12px;
  width: 1700px;
  height: 245px;
  background: url('../../assets/bh_video_motif.jpg') center/cover no-repeat;
  opacity: 1;
  z-index: 0;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,1) 35%, rgba(0,0,0,0) 100%);
          mask-image: linear-gradient(to top, rgba(0,0,0,1) 35%, rgba(0,0,0,0) 100%);
}
/* SLOT-based hero frames — clickable carousel */
.hero-media .frame {
  position: absolute;
  border-radius: 34px;
  overflow: hidden;
  background: #d7dddaff center/cover no-repeat;
  z-index: 1;
  transition:
    width  0.6s cubic-bezier(0.22, 0.61, 0.36, 1),
    height 0.6s cubic-bezier(0.22, 0.61, 0.36, 1),
    left   0.6s cubic-bezier(0.22, 0.61, 0.36, 1),
    top    0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.hero-media .frame[data-slot="center"]     { width: 600px; height: 337px; left: 550px;  top: 12px; z-index: 2; cursor: default; }
.hero-media .frame[data-slot="right-peek"] { width: 495px; height: 277px; left: 1310px; top: 42px; z-index: 1; cursor: pointer; }
.hero-media .frame[data-slot="left-peek"]  { width: 495px; height: 277px; left: -105px; top: 42px; z-index: 1; cursor: pointer; }
.hero-media .frame .hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  z-index: 0;
}
.hero-media .frame .play-button { display: none; }
.hero-media .frame[data-slot="center"] .play-button { display: flex; }
.hero-media .frame[data-slot="center"].playing .play-button { opacity: 0; pointer-events: none; }
/* (Right peek now uses the slot-based system above; legacy rule removed) */

.play-button {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 60px; height: 60px;
  border-radius: 50%;
  background: rgba(255,255,255,0.95);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 24px rgba(0,0,0,0.25);
  cursor: pointer;
  border: none;
}
.play-button:hover { background: #fff; transform: translate(-50%, -50%) scale(1.05); }
.play-button svg { width: 22px; height: 22px; color: var(--green-600); margin-left: 3px; }

/* (custom zellige patterns removed — using asset JPGs only) */

/* ===== Section spacing ===== */
section { padding: 80px 0; }
section > .content { width: 1156px; margin: 0 auto; padding: 0; }
.section-title {
  font-family: 'Roboto', sans-serif;
  font-weight: 800;
  font-size: 28px;
  letter-spacing: 0.5px;
  color: var(--ink);
  margin: 0 0 8px;
  text-transform: uppercase;
}
.section-sub {
  color: var(--ink-soft);
  font-size: 15px;
  max-width: 700px;
}

/* ===== Annonces ===== */
.announcements {
  position: relative;
  background: var(--green-brand);
  color: #fff;
  border-radius: 52px;
  width: 1156px;
  height: 606.87px;
  margin: 0 auto;
  padding: 48px 109.5px 64px 117.5px;   /* aligns ANNONCES with first card */
  overflow: hidden;
}
/* Light/white texture on the green panel — invert the dark JPG and blend */
.announcements .annonces-motif {
  position: absolute;
  left: 0;
  top: 163px;
  width: 1156px;
  height: 360px;
  background: url('../../assets/bh_annoces_motif.jpg') center/cover no-repeat;
  filter: invert(1) brightness(1.4) contrast(1.1);
  mix-blend-mode: screen;
  opacity: 0.18;
  pointer-events: none;
  z-index: 0;
}
.announcements .head, .announcements .announcement-grid { position: relative; z-index: 1; }
.announcements .head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 28px; }
.announcements .head h2 { font-family: 'Almarai', sans-serif; font-weight: 700; font-size: 28px; text-transform: uppercase; letter-spacing: 1.5px; margin: 0; }
.announcements .head .btn-on-green-ghost { padding: 10px 22px; font-size: 14px; font-weight: 700; }
.announcement-grid { display: grid; grid-template-columns: repeat(3, 291px); gap: 32px; }
.announcement-card {
  position: relative;
  background: #ffffff;
  color: var(--ink);
  border-radius: 12px;
  width: 291px;
  height: 388px;
  padding: 30px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow: hidden;
}
/* small motif fade bottom-right of each card */
.announcement-card::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 160px;
  height: 160px;
  background: url('../../assets/bh_annoces_motif.jpg') right bottom/cover no-repeat;
  opacity: 0.18;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(circle at 100% 100%, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 80%);
          mask-image: radial-gradient(circle at 100% 100%, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 80%);
}
.announcement-card > * { position: relative; z-index: 1; }
.announcement-card .tag { display: inline-flex; align-items: center; padding: 6px 16px; border-radius: 999px; font-weight: 600; font-size: 13px; width: fit-content; }
.tag-important { background: #fbeae6; color: var(--red-500); }
.tag-program   { background: #ece9f7; color: #534ab7; }
.tag-important-2 { background: #e1efe4; color: var(--green-brand); }
.announcement-card h3 { margin: 0; font-size: 19px; font-weight: 800; line-height: 1.25; color: var(--ink); }
.announcement-card p  { margin: 0; font-size: 14px; color: var(--ink-soft); line-height: 1.55; flex: 1; }
.announcement-card .link { color: var(--ink); font-weight: 700; font-size: 14px; display: inline-flex; align-items: center; gap: 8px; }
.announcement-card .link svg { color: var(--red-500); }       /* arrow color = tag color */
.announcement-card.link-purple .link svg { color: #534ab7; }
.announcement-card.link-green  .link svg { color: var(--green-brand); }

/* ===== Services ===== */
.services-section { position: relative; }
.services-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 36px; position: relative; z-index: 1; }
.services-head .services-all-link {
  padding: 12px 28px;
  font-size: 14px;
  white-space: nowrap;
}
.services-head .controls { display: flex; gap: 10px; }
.services-head .ctrl-btn {
  width: 52.43px;
  height: 52.43px;
  border-radius: 120px;
  background: #fff;
  border: 1px solid #c9cdc7;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.services-head .ctrl-btn svg { width: 12px; height: 12px; display: block; }
.services-head .ctrl-btn:hover { background: var(--green-50); border-color: var(--green-brand); color: var(--green-brand); }
.services-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; position: relative; z-index: 1; }
.service-card { border: 1px solid var(--line); border-radius: 18px; padding: 50px 24px 26px; display: flex; flex-direction: column; gap: 12px; transition: all 0.2s; background: #fff; position: relative; }
.service-card { color: inherit; text-decoration: none; }
.service-card:hover { box-shadow: 0 12px 30px rgba(0,0,0,0.06); }
.service-card .icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  position: absolute;
  top: -32px;
  left: 24px;
  background: #f3f6f1;
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
}
.service-card .icon::before {
  display: none;
}
.service-card .icon img {
  width: 28px;
  height: 28px;
  object-fit: contain;
  filter: brightness(0) saturate(100%) invert(16%) sepia(21%) saturate(1533%) hue-rotate(106deg) brightness(92%) contrast(96%);
}
.service-card .icon svg {
  width: 30px;
  height: 30px;
  display: block;
  color: currentColor;
}
.service-card .icon-inscription {
  background: #fff;
  color: #0f6e56;
}
.service-card .icon-update {
  background: #fff;
  color: #d85a30;
}
.service-card .icon-review {
  background: #fff;
  color: #534ab7;
}
.service-card .icon-removal {
  background: #fff;
  color: #c0392b;
}
.service-card .icon-followup {
  background: #fff;
  color: #0f6e56;
}
.service-card .icon-claim {
  background: #fff;
  color: #b68a2d;
}
.icon-green  { background: #e8f3ec; color: var(--green-brand); }
.icon-yellow { background: rgba(233,173,59,0.18); color: var(--gold); }
.icon-blue   { background: rgba(0,113,188,0.12); color: var(--blue); }
.icon-red    { background: rgba(192,57,43,0.12); color: var(--red-500); }
.icon-yellow { background: rgba(233,173,59,0.18); color: var(--gold); }
.icon-blue   { background: rgba(0,113,188,0.12); color: var(--blue); }
.icon-red    { background: rgba(192,57,43,0.12); color: var(--red-500); }
.service-card h3 { margin: 0 0 10px; font-size: 20px; font-weight: 800; }
.service-card .lead { margin: 0; font-size: 14px; color: var(--ink); line-height: 1.5; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.service-card .detail { margin: 0; font-size: 13px; color: var(--muted); line-height: 1.55; flex: 1; }

/* ===== Stats ===== */
.stats {
  position: relative;
  margin-top: 56px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  background: var(--mint-bg);
  border-radius: 40px;
  padding: 56px 24px;
  overflow: visible;
  align-items: center;
}
.stats .corner {
  position: absolute;
  width: 112px;
  height: 112px;
  background: url('../../assets/services_motif.svg') center/contain no-repeat;
  opacity: 1;
  pointer-events: none;
  z-index: 0;
}
.stats .corner.tl { left: -28px; top: -28px; }
.stats .corner.br { right: -28px; bottom: -28px; transform: rotate(180deg); }
.stats .stats-link {
  grid-column: 1 / -1;
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: fit-content;
  margin: 28px auto 0;
  font-family: 'Almarai', sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 1;
  color: var(--green-brand);
}
.stats .stats-link .arrow-go svg { width: 13px; height: 15px; color: currentColor; }
.stats .stats-link:hover { text-decoration: underline; }
.stat {
  padding: 0 24px;
  text-align: center;
  position: relative;
  z-index: 1;
}
.stat + .stat::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 120px;
  background: #c5d6cc;
}
.stat .num {
  font-family: 'Roboto', sans-serif;
  font-size: 40px;
  font-weight: 700;
  color: var(--green-brand);
  line-height: 100%;
  letter-spacing: 0;
  text-transform: uppercase;
}
.stat .lbl { margin-top: 18px; color: var(--ink); font-size: 14px; line-height: 1.4; }

/* ===== Indicator explainer ===== */
.explainer-wrap {
  background: #f3f3f3;
  padding: 70px 0;
  position: relative;
  overflow: hidden;
}
.explainer-wrap::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 520px;
  height: 420px;
  background: url('../../assets/bh_annoces_motif.jpg') right bottom/cover no-repeat;
  opacity: 0.22;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(circle at 100% 100%, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 75%);
          mask-image: radial-gradient(circle at 100% 100%, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 75%);
  z-index: 0;
}
.explainer-wrap > section { padding: 0; position: relative; z-index: 1; }
.explainer-wrap .content { width: 1159px; }

.explainer-head { margin-bottom: 56px; }
.explainer-head h2 {
  font-family: 'Almarai', sans-serif;
  font-weight: 700;
  font-size: 32px;
  line-height: 43px;
  letter-spacing: 0;
  text-transform: uppercase;
  color: #081c15;
  margin: 0 0 43px;
}
.explainer-head p {
  font-family: 'Almarai', sans-serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 1.4;
  color: var(--ink);
  margin: 0;
  max-width: 1020px;
}

.explainer-intro-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.explainer-more-link {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 10px;
  margin-top: 28px;
  width: fit-content;
  max-width: 100%;
  min-height: 46px;
  padding: 12px 22px;
  border: 1px solid rgba(255, 255, 255, 0.58);
  border-radius: 999px;
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
  font-size: 15px;
  font-weight: 800;
  line-height: 1.2;
  text-decoration: none;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.explainer-more-link .arrow-go svg {
  width: 13px;
  height: 15px;
  color: var(--gold);
}

.explainer-more-link:hover,
.explainer-more-link:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, 0.9);
  background: rgba(255, 255, 255, 0.14);
}

.explainer-cols {
  display: grid;
  grid-template-columns: 524px 1fr;
  column-gap: 24px;
  align-items: start;
}
.explainer-col-title {
  font-family: 'Almarai', sans-serif;
  font-weight: 700;
  font-size: 24px;
  color: #000;
  margin: 0 0 32px;
}

/* LEFT — vertical timeline of 3 steps */
.steps {
  position: relative;
  padding-left: 80px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.step {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 363px;
}
/* Bullet: 43px solid green with white number */
.step .bullet {
  position: absolute;
  left: -69px;
  top: -4px;
  width: 43px;
  height: 43px;
  border-radius: 50%;
  background: #3b6d11;
  color: #ffffff;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Roboto', sans-serif;
  font-weight: 700;
  font-size: 24px;
  line-height: 140%;
  text-align: center;
  z-index: 1;
}
/* Connector between consecutive bullets — no line after the last bullet */
.step:not(:last-child)::before {
  content: "";
  position: absolute;
  left: -48px;
  top: 45px;
  bottom: -34px;
  width: 2px;
  background: #534ab7;
  z-index: 0;
}
.step h3 {
  margin: 0;
  font-family: 'Almarai', sans-serif;
  font-weight: 700;
  font-size: 18px;
  color: #000;
  line-height: 1.2;
}
.step p {
  margin: 0;
  font-family: 'Almarai', sans-serif;
  font-weight: 300;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink);
}

/* RIGHT — variables grid (4 cols × 2 rows) */
.variables-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.variable {
  background: #fff;
  border: 1px solid #d7dddaff;
  border-radius: 12px;
  height: 162px;
  padding: 16px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 14px;
  text-align: center;
}
.variable .v-icon {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}
.variable .v-icon img { width: 54px; height: 54px; object-fit: contain; }
.variable .v-icon .household-icon {
  width: 34px;
  height: 34px;
  color: #2f7a37;
}
.variable span {
  font-family: 'Almarai', sans-serif;
  font-size: 13px;
  font-weight: 400;
  color: var(--ink);
  line-height: 1.35;
}
/* 4-card variant — 2 cols × 2 rows, fixed 221px cards */
.variables-grid.variables-grid-4 {
  grid-template-columns: 221px 221px;
  gap: 12px;
}
.variables-grid.variables-grid-4 .variable {
  width: 221px;
  height: 151px;
  padding: 20px;
  gap: 24px;
  border-width: 1px;
  border-radius: 12px;
}

.variables-carousel {
  width: 454px;
  max-width: 100%;
}

.variables-viewport {
  width: 100%;
  overflow: hidden;
}

.variables-track {
  display: flex;
  width: 100%;
  transition: transform 0.32s ease;
  will-change: transform;
}

.variables-page {
  flex: 0 0 100%;
  display: grid;
  grid-template-columns: 221px 221px;
  gap: 12px;
}

.variables-page .variable {
  width: 221px;
  height: 151px;
  padding: 18px 16px;
  gap: 18px;
  border-width: 1px;
  border-radius: 12px;
}

.variables-page .variable .v-icon {
  color: #2f7a37;
}

.variables-page .variable .v-icon svg {
  width: 36px;
  height: 36px;
}

.variables-page .variable span {
  max-width: 174px;
  font-size: 12.5px;
  line-height: 1.3;
}

.variables-carousel-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 14px;
}

.variables-nav {
  display: inline-flex;
  width: 30px;
  height: 30px;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.38);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease, opacity 0.18s ease;
}

.variables-nav svg {
  width: 16px;
  height: 16px;
}

.variables-nav:hover,
.variables-nav:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(255, 255, 255, 0.72);
  background: rgba(255, 255, 255, 0.15);
}

.variables-nav:disabled {
  opacity: 0.42;
  cursor: default;
  transform: none;
}

.variables-dots {
  display: flex;
  align-items: center;
  gap: 6px;
}

.variables-dots .dot {
  position: relative;
  width: 12px;
  height: 12px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
}

.variables-dots .dot::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.42);
  transform: translate(-50%, -50%);
  transition: width 0.2s ease, background 0.2s ease;
}

.variables-dots .dot.active {
  width: 24px;
}

.variables-dots .dot.active::before {
  width: 20px;
  background: var(--gold);
}

.variables-link {
  display: inline-flex;
  align-self: center;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 24px 0 0;
  height: 18px;
  width: fit-content;
  font-family: 'Almarai', sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 1;
  color: #fff;
  opacity: 1;
}
.variables-link .arrow-go svg { width: 13px; height: 15px; color: var(--gold); }
.variables-link:hover { text-decoration: underline; }
/* Stack column items vertically; grid + link both centered horizontally */
.explainer-col { display: flex; flex-direction: column; align-items: center; }
.explainer-col .explainer-col-title { align-self: flex-start; }
.explainer-col:nth-child(2) .explainer-col-title {
  align-self: center;
  width: 454px;
  text-align: center;
}
.explainer-col .variables-grid { align-self: center; }

/* ===== Programmes sociaux ===== */
.programmes-section .content { width: 1158px; }
.programmes-head h2 {
  font-family: 'Almarai', sans-serif;
  font-weight: 700;
  font-size: 32px;
  line-height: 43px;
  text-transform: uppercase;
  color: #081c15;
  margin: 0 0 24px;
}
.programmes-head p {
  font-family: 'Almarai', sans-serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 1.4;
  color: var(--ink);
  margin: 0 0 56px;
  max-width: 752px;
}

/* 3 solid green cards */
.three-dots-row {
  display: grid;
  grid-template-columns: repeat(3, 378px);
  gap: 12px;
  margin: 0 0 56px;
  justify-content: center;
}
.dot-item {
  width: 378px;
  height: 152px;
  background: var(--p2-green-bg);
  border-radius: 12px;
  padding: 30px 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  text-align: center;
  color: #fff;
}
.dot-item h3 {
  font-family: 'Almarai', sans-serif;
  font-weight: 700;
  font-size: 18px;
  color: #fff;
  margin: 0;
}
.dot-item p {
  font-family: 'Almarai', sans-serif;
  font-weight: 300;
  font-size: 14px;
  line-height: 1.5;
  color: #fff;
  margin: 0;
}

.programmes-section .divider {
  height: 1px;
  background: var(--line);
  margin: 0 0 48px;
}

/* 4 program cards */
.programs-grid {
  display: grid;
  grid-template-columns: repeat(4, 278px);
  gap: 15px;
  justify-content: space-between;
  position: static;
}
.program-card {
  position: relative;
  background: #fff;
  border: 1px solid #d7dddaff;
  border-radius: 12px;
  padding: 32px;
  width: 278px;
  height: 380px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: flex-start;
  text-align: left;
  z-index: 1;
}
.program-card .icon-circle {
  width: 43px;
  height: 43px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.program-card .icon-circle::before {
  display: none;
}
.program-card .icon-circle img {
  width: 24px;
  height: 24px;
  object-fit: contain;
  filter: brightness(0) saturate(100%) invert(16%) sepia(21%) saturate(1533%) hue-rotate(106deg) brightness(92%) contrast(96%);
}
.program-card .icon-circle svg {
  width: 24px;
  height: 24px;
  display: block;
  color: currentColor;
}
.program-card .program-icon-asd {
  color: #c0392b;
}
.program-card .program-icon-tadamon {
  color: #0f6e56;
}
.program-card .program-icon-achamil {
  color: #534ab7;
}
.program-card .program-icon-minhaty {
  color: #3b6d11;
}

.program-card .tag {
  font-family: 'Almarai', sans-serif;
  font-weight: 400;
  font-size: 14px;
  margin: 0;
}
.program-card h3 {
  font-family: 'Almarai', sans-serif;
  font-weight: 700;
  font-size: 26px;
  color: #000;
  margin: 0;
  line-height: 1.15;
}
.program-card p {
  font-family: 'Almarai', sans-serif;
  font-weight: 300;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink);
  margin: 0;
  flex: 1;
}
.program-card .link {
  font-family: 'Almarai', sans-serif;
  font-weight: 700;
  font-size: 14px;
  color: #000;
  display: inline-flex; align-items: center; gap: 10px;
}
.program-card .title-block { display: flex; flex-direction: column; gap: 12px; }
.program-card .gap-between { display: flex; flex-direction: column; gap: 20px; flex: 1; }

/* Per-card accent colors */
.program-card.color-red .tag,
.program-card.color-orange .tag,
.program-card.color-purple .tag,
.program-card.color-green .tag { color: var(--p2-green-bg, #06402B); }
.program-card.color-red .link svg,
.program-card.color-orange .link svg,
.program-card.color-purple .link svg,
.program-card.color-green .link svg { color: var(--p2-green-bg, #06402B); }

/* ===== Documents légaux ===== */
.docs-wrap {
  background: var(--green-brand);
  border-radius: 52px;
  width: 1156px;
  height: 549px;
  margin: 0 auto;
  padding: 70px 118px 70px 118px;
  color: #fff;
  position: relative;
  overflow: hidden;
}
.docs-wrap .docs-motif {
  position: absolute;
  left: 0;
  top: 189px;
  width: 1156px;
  height: 360px;
  background: url('../../assets/bh_annoces_motif.jpg') center/cover no-repeat;
  border-bottom-left-radius: 52px;
  border-bottom-right-radius: 52px;
  filter: invert(1) brightness(1.4) contrast(1.1);
  mix-blend-mode: screen;
  opacity: 0.08;
  pointer-events: none;
  z-index: 0;
}
.docs-wrap .head,
.docs-wrap .docs-grid { position: relative; z-index: 1; }
.docs-wrap .head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 32px;
  margin-bottom: 47px;
}
.docs-wrap .head-text { max-width: 504px; }
.docs-wrap .head h2 {
  font-family: 'Almarai', sans-serif;
  font-weight: 700;
  font-size: 32px;
  line-height: 43px;
  text-transform: uppercase;
  color: #f6f5f0;
  margin: 0 0 16px;
}
.docs-wrap .head p {
  font-family: 'Almarai', sans-serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 1.4;
  color: #f6f5f0;
  margin: 0;
}
.docs-wrap .head .btn-on-green-ghost { padding: 12px 22px; font-size: 14px; font-weight: 700; white-space: nowrap; }

.docs-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.doc-card {
  background: #fff;
  color: var(--ink);
  border-radius: 12px;
  padding: 24px;
  height: 262px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.doc-card .icon {
  width: 54px; height: 54px;
  border-radius: 50%;
  background: #f3faf6;
  color: var(--green-brand);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.doc-card .body { display: flex; flex-direction: column; gap: 12px; flex: 1; }
.doc-card h3 {
  margin: 0;
  font-family: 'Almarai', sans-serif;
  font-weight: 700;
  font-size: 18px;
  color: #262626;
  line-height: 1.2;
}
.doc-card p {
  margin: 0;
  font-family: 'Almarai', sans-serif;
  font-weight: 300;
  font-size: 12px;
  color: #262626;
  line-height: 1.5;
  flex: 1;
}
.doc-card .link {
  color: #000;
  font-family: 'Almarai', sans-serif;
  font-weight: 700;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.doc-card .link .arrow-go {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 20px;
}
.doc-card .link .arrow-go svg { color: #0f6e56; transform: rotate(-90deg); width: 13px; height: 15px; }
/* Re-usable arrow-go used in program & announcement cards too */
.arrow-go { display: inline-flex; align-items: center; justify-content: center; border-radius: 20px; }
.arrow-go svg { transform: rotate(-90deg); width: 13px; height: 15px; }

/* ===== FAQ ===== */
.faq-grid {
  display: grid;
  grid-template-columns: 416px 685px;
  gap: 56px;
  align-items: start;
}
.faq-grid .left h2 {
  font-family: 'Almarai', sans-serif;
  font-weight: 700;
  font-size: 32px;
  line-height: 43px;
  text-transform: uppercase;
  color: #081c15;
  margin: 0 0 24px;
}
.faq-grid .left p {
  font-family: 'Almarai', sans-serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 1.4;
  color: #262626;
  margin: 0;
}
.faq-list { display: flex; flex-direction: column; gap: 14px; }
.faq-item {
  background: #f3f3f3;
  border-radius: 40px;
  padding: 22px 28px;
  border: none;
}
.faq-item .q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-family: 'Almarai', sans-serif;
  font-weight: 400;
  font-size: 18px;
  color: #262626;
  cursor: pointer;
  user-select: none;
}
.faq-item .q .ic-wrap {
  width: 24px;
  height: 24px;
  border-radius: 90px;
  background: #4c956c1a;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  padding: 5px 7px;
  box-sizing: border-box;
  transition: transform 0.25s ease;
}
.faq-item.open .q .ic-wrap { transform: rotate(180deg); }
.faq-item .q .ic-wrap svg { color: #4c956c; width: 12px; height: 8px; display: block; }
.faq-item .a {
  margin-top: 14px;
  font-family: 'Almarai', sans-serif;
  font-weight: 300;
  color: #262626;
  font-size: 14px;
  line-height: 1.55;
  display: none;
}
.faq-item.open .a { display: block; }

/* ===== Help banner (centered, full-width mint section) ===== */
.help-section {
  background: #F3FAF6;
  width: 100%;
  height: 325px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.help-banner {
  background: transparent;
  width: 634px;
  margin: 0 auto;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 43px;
}
.help-banner .text-block { display: flex; flex-direction: column; gap: 24px; align-items: center; }
.help-banner h3 {
  margin: 0;
  font-family: 'Almarai', sans-serif;
  font-weight: 700;
  font-size: 32px;
  line-height: 43px;
  color: #081c15;
}
.help-banner p {
  margin: 0;
  font-family: 'Almarai', sans-serif;
  font-weight: 400;
  font-size: 20px;
  color: #262626;
}
.help-banner .btn-faq {
  background: #3b6d11;
  color: #fff;
  border-radius: 46px;
  padding: 16px 32px;
  width: 212px;
  font-family: 'Almarai', sans-serif;
  font-weight: 400;
  font-size: 18px;
  text-align: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

/* ===== Footer ===== */
footer { background: #fff; padding: 56px 0 0; border-top: none; }
.footer-inner { width: 1156px; margin: 0 auto; }
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 68px;
  align-items: start;
}
.footer-col .brand { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.footer-col .brand img { height: 64px; width: auto; }
.footer-col .brand .brand-divider {
  width: 1px;
  height: 48px;
  background: #c9cdc7;
  flex-shrink: 0;
}
.footer-col .brand .ttl {
  font-family: 'Almarai', sans-serif;
  font-weight: 700;
  font-size: 14px;
  color: var(--ink);
  line-height: 1.25;
  white-space: nowrap;
}
.footer-col h4 {
  font-family: 'Almarai', sans-serif;
  font-weight: 700;
  font-size: 18px;
  margin: 0 0 14px;
  color: #3b6d11;
  text-transform: none;
  letter-spacing: 0;
}
.footer-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.footer-col li a {
  font-family: 'Almarai', sans-serif;
  font-weight: 400;
  font-size: 16px;
  color: #000;
}
.footer-col li a:hover { color: var(--green-brand); }
.footer-bottom {
  border-top: 1px solid #b3b3b3;
  margin-top: 44px;
  padding: 22px 0;
  text-align: center;
  color: #3c3c43cc;
  font-family: 'Almarai', sans-serif;
  font-size: 14px;
}

/* ===== Decorative Moroccan pattern (subtle) ===== */
.zellige-bg {
  background-image:
    radial-gradient(circle at 50% 50%, rgba(15,110,86,0.04) 0%, rgba(15,110,86,0.04) 30%, transparent 31%),
    radial-gradient(circle at 100% 100%, rgba(15,110,86,0.04) 0%, rgba(15,110,86,0.04) 30%, transparent 31%),
    radial-gradient(circle at 0% 100%, rgba(15,110,86,0.04) 0%, rgba(15,110,86,0.04) 30%, transparent 31%),
    radial-gradient(circle at 0% 0%, rgba(15,110,86,0.04) 0%, rgba(15,110,86,0.04) 30%, transparent 31%);
  background-size: 80px 80px;
}

/* ======================================================================
   RESPONSIVE
   - 1440+   : exact pixel-perfect design (default rules above)
   - ≤1200  : laptop / narrow desktop. Fluid containers, peek hidden
   - ≤900   : tablet. Grids reduce columns, FAQ stacks
   - ≤600   : phone. Card grids become horizontal sliders, hamburger nav
   ====================================================================== */

/* Hamburger button — hidden on desktop, shown ≤900px */
.hamburger { display: none; }
.lang-mobile { display: none; }
.mobile-overlay { display: none; }

/* ============================ ≤ 1200 px ============================ */
@media (max-width: 1200px) {
  /* Containers go fluid, capped at the design width */
  .content,
  section > .content,
  .explainer-wrap .content,
  .programmes-section .content { width: 92%; max-width: 1156px; }

  .announcements,
  .docs-wrap,
  .footer-inner,
  .help-banner { width: 92%; max-width: 1156px; }

  .mainnav { padding: 0 24px; }
  footer   { padding: 56px 24px 0; }
  .help-section { padding: 0 24px; }

  /* Hero — drop both peeks, center the active video */
  .hero-media { width: 100%; margin-left: 0; height: auto; padding-bottom: 16px; }
  .hero-media .motif-bg { width: 100%; left: 0; }
  .hero-media .frame[data-slot="right-peek"],
  .hero-media .frame[data-slot="left-peek"] { display: none; }
  .hero-media .frame[data-slot="center"] {
    position: relative;
    width: min(640px, 90%);
    height: auto;
    aspect-ratio: 16 / 9;
    left: 50%;
    transform: translateX(-50%);
    top: 12px;
  }
}

/* ============================ ≤ 900 px ============================ */
@media (max-width: 900px) {
  /* Nav → logo + hamburger */
  .mainnav { height: 80px; padding: 0 16px; gap: 12px; }
  .mainnav .nav-links,
  .mainnav .nav-right .btn,
  .mainnav .nav-right .lang { display: none; }
  .mainnav .nav-right { gap: 8px; }
  .hamburger {
    display: flex;
    width: 44px; height: 44px;
    border-radius: 50%;
    border: 1px solid #c9cdc7;
    background: #fff;
    align-items: center; justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
  }
  .lang-mobile {
    display: flex;
    width: 44px; height: 44px;
    border-radius: 50%;
    border: 1px solid #c9cdc7;
    background: #fff;
    align-items: center; justify-content: center;
    font-size: 12px;
    font-weight: 700;
    color: var(--ink);
    text-decoration: none;
    flex-shrink: 0;
  }
  .hamburger span,
  .hamburger span::before,
  .hamburger span::after {
    display: block;
    width: 20px; height: 2px;
    background: var(--ink);
    position: relative;
    transition: transform 0.25s ease, top 0.25s ease;
  }
  .hamburger span::before { content:""; position: absolute; top: -7px; left: 0; width: 20px; }
  .hamburger span::after  { content:""; position: absolute; top: 7px;  left: 0; width: 20px; }

  /* Mobile nav overlay — drawer slides in from the left */
  .mobile-overlay {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: min(320px, 88vw);
    background: #fff;
    z-index: 9000;
    transform: translateX(-100%);
    transition: transform 0.32s cubic-bezier(0.22, 0.61, 0.36, 1);
    overflow: hidden;
    box-shadow: 6px 0 32px rgba(3, 28, 18, 0.18);
  }
  .mobile-overlay::after {
    content: '';
    position: fixed;
    inset: 0;
    left: min(320px, 88vw);
    background: rgba(3, 28, 18, 0.48);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.32s ease;
    backdrop-filter: blur(2px);
  }
  .mobile-overlay.open { transform: translateX(0); }
  .mobile-overlay.open::after { opacity: 1; pointer-events: auto; }
  .mobile-overlay::before {
    content: '';
    flex-shrink: 0;
    display: block;
    height: 4px;
    background: linear-gradient(90deg, #06402B 0%, #e9ad3b 100%);
  }

  /* Header: brand on the left, × pinned inside on the right */
  .mobile-overlay-head {
    flex-shrink: 0;
    position: relative;
    display: flex;
    align-items: center;
    padding: 18px 56px 18px 18px;
    border-bottom: 1px solid rgba(6, 64, 43, 0.10);
    background: linear-gradient(135deg, #f2faf4 0%, #f8fcf9 100%);
  }
  .mobile-overlay-brand {
    display: flex;
    flex-direction: column;
    gap: 3px;
  }
  .mobile-overlay-brand strong {
    font-size: 16px;
    font-weight: 900;
    color: var(--green-brand);
    line-height: 1;
    letter-spacing: 0.3px;
  }
  .mobile-overlay-brand span {
    font-size: 11px;
    font-weight: 400;
    color: var(--muted);
    line-height: 1.2;
  }

  /* Close button — absolute inside header, clearly within drawer bounds */
  .mobile-overlay .close {
    position: absolute;
    top: 50%; right: 14px;
    transform: translateY(-50%);
    width: 34px; height: 34px;
    border: 1.5px solid rgba(6, 64, 43, 0.18);
    background: #fff;
    border-radius: 50%;
    cursor: pointer;
    color: var(--green-brand);
    display: flex; align-items: center; justify-content: center;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
    box-shadow: 0 2px 8px rgba(6, 64, 43, 0.08);
  }
  .mobile-overlay .close svg { width: 15px; height: 15px; display: block; }
  .mobile-overlay .close:hover {
    background: #e6f2ea;
    border-color: rgba(6,64,43,0.32);
    transform: translateY(-50%) scale(1.06);
  }

  .mobile-overlay nav {
    flex: 1;
    min-height: 0;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-top: 0;
    padding: 10px 14px 12px;
  }
  .mobile-overlay nav > a:last-of-type {
    order: -1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 2px 0 12px;
    padding: 12px 14px;
    border: 1px solid rgba(6, 64, 43, 0.12);
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(6, 64, 43, 0.06) 0%, rgba(233, 173, 59, 0.14) 100%);
    color: var(--green-brand);
    box-shadow: 0 6px 18px rgba(6, 64, 43, 0.08);
  }
  .mobile-overlay nav > a:last-of-type::after {
    content: '';
    width: 8px;
    height: 8px;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
    transform: rotate(45deg);
    flex-shrink: 0;
  }
  .mobile-overlay nav > a {
    padding: 12px 14px;
    font-size: 15px; font-weight: 700; color: var(--ink);
    border-bottom: none;
    border-radius: 10px;
    margin-bottom: 1px;
    transition: background 0.15s, color 0.15s;
  }
  .mobile-overlay nav > a:hover,
  .mobile-overlay nav > a:active { background: rgba(6,64,43,0.06); color: var(--green-brand); }
  .mobile-overlay .actions {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px 14px 20px;
    border-top: 1px solid rgba(6, 64, 43, 0.08);
    background: #fff;
  }
  .mobile-overlay .actions .btn { width: 100%; border-radius: 12px; padding: 14px 16px; font-size: 15px; }

  /* Hero text adjustments */
  .hero h1 { font-size: 30px; line-height: 38px; width: auto; height: auto; padding: 0 16px; }
  .hero .lede { width: auto; padding: 0 24px; height: auto; }

  /* Grids reduce */
  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .docs-grid     { grid-template-columns: repeat(2, 1fr); }
  .programs-grid { grid-template-columns: repeat(2, 1fr); justify-content: stretch; }
  .programs-grid .program-card { width: 100%; height: auto; }
  .announcement-grid { grid-template-columns: 1fr; }
  .announcement-card { width: 100%; height: auto; }
  .variables-grid { grid-template-columns: repeat(3, 1fr); }
  .three-dots-row { grid-template-columns: 1fr; gap: 16px; }
  .three-dots-row .dot-item { width: 100%; height: auto; min-height: 152px; }
  .explainer-cols { grid-template-columns: 1fr; row-gap: 48px; }
  .faq-grid { grid-template-columns: 1fr; gap: 32px; }
  .stats { grid-template-columns: repeat(2, 1fr); padding: 40px 24px; gap: 32px 0; }
  .stat + .stat::before { display: none; }

  .announcements { padding: 32px; height: auto; }
  .docs-wrap     { padding: 40px 24px; height: auto; }
  .docs-wrap .head { flex-direction: column; align-items: flex-start; gap: 16px; }

  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
}

/* ============================ ≤ 600 px : MOBILE ============================ */
@media (max-width: 600px) {
  body { overflow-x: hidden; }

  /* Hero: video centered, buttons stack */
  .hero { padding: 8px 0 40px; }
  .hero-inner { max-width: calc(100% - 32px); gap: 20px; }
  .hero-media { border-radius: 16px; overflow: hidden; }
  .hero h1 { font-size: 26px; line-height: 32px; padding: 0 20px; }
  .hero .lede { font-size: 14px; padding: 0 20px; }
  .hero .cta-row { flex-direction: column; align-items: stretch; padding: 0 24px; }

  section { padding: 56px 0; }

  /* ---- HORIZONTAL SLIDERS on mobile ---- */
  .announcement-grid,
  .services-grid,
  .programs-grid,
  .docs-grid {
    grid-template-columns: none;
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    gap: 14px;
    padding: 24px 0 16px;
    margin: 0;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  /* Services cards have a floating icon 32px above — needs more top padding */
  .services-grid { padding-top: 42px; }

  .announcement-grid::-webkit-scrollbar,
  .services-grid::-webkit-scrollbar,
  .programs-grid::-webkit-scrollbar,
  .docs-grid::-webkit-scrollbar { display: none; }

  .services-grid > .service-card {
    flex: 0 0 78% !important;
    width: auto !important;
    scroll-snap-align: start;
    min-width: 0;
  }
  /* One full card at a time — fills the green box cleanly */
  .announcement-grid > .announcement-card {
    flex: 0 0 100%;
    scroll-snap-align: start;
    min-width: 0;
    width: auto;
  }
  .programs-grid > .program-card,
  .docs-grid > .doc-card {
    flex: 0 0 78%;
    scroll-snap-align: start;
    min-width: 0;
    width: auto;
  }
  .announcement-card { height: auto; min-height: 340px; }
  .program-card      { height: auto; min-height: 360px; }
  .doc-card          { height: auto; min-height: 220px; }

  /* Variables grid: 2 cols on small phones (8 items → 2×4) */
  .variables-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .variable { height: 148px; padding: 14px 8px; }
  .variable span { font-size: 12px; }

  /* Stats — single column, each item centered */
  .stats { width: 100%; max-width: 100%; margin-top: 28px; padding: 28px 20px 24px; border-radius: 24px; overflow: hidden; }
  .stats .stats-row { grid-template-columns: 1fr; gap: 22px; }
  .stats .corner { display: none; }
  .stat { padding: 12px 20px; text-align: center; border-bottom: 1px solid rgba(6,64,43,0.10); }
  .stat:last-child { border-bottom: none; }
  .stat + .stat::before { display: none; }
  .stat .num { font-size: 34px; }
  .stat .lbl { margin-top: 6px; }
  .stats-link { margin-top: 18px; justify-content: center; }

  /* Annonces panel */
  .announcements {
    width: 92%;
    padding: 32px 20px;
    border-radius: 32px;
    height: auto;
    overflow: visible;
    clip-path: inset(0 round 32px);
  }
  .announcements .head { flex-direction: column; align-items: flex-start; gap: 16px; }
  .announcements .head h2 { font-size: 22px; }

  /* Services head: hide nav arrows on mobile (replaced by swipe) */
  .services-head .controls { display: none; }
  .services-head .section-title { font-size: 22px; }

  /* Explainer — dark green section */

  /* Override the Figma-exact 1159px width (set globally at line 2806)
     that forces the explainer head wider than any phone screen */
  .explainer-wrap .explainer-head {
    width: auto !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box;
  }

  .explainer-wrap .content {
    width: calc(100vw - 32px) !important;
    max-width: 100% !important;
    box-sizing: border-box;
    padding: 0 16px !important;
  }

  .explainer-head h2 {
    font-size: 22px;
    line-height: 30px;
    overflow-wrap: break-word;
    word-break: break-word;
    max-width: 100%;
  }
  .explainer-head p  { font-size: 14px; height: auto !important; line-height: 1.65; overflow-wrap: break-word; word-break: break-word; max-width: 100%; }
  .explainer-title-row { flex-direction: column; gap: 12px; align-items: flex-start; }
  .explainer-wrap { overflow-x: hidden; }
  .explainer-col { min-width: 0; }
  .steps { padding-left: 44px; }
  .step { max-width: 100%; }
  .step h3, .step p { overflow-wrap: break-word; word-break: break-word; max-width: 100%; }
  .step .bullet { left: -46px; width: 32px; height: 32px; font-size: 16px; }
  .step:not(:last-child)::before { left: -32px; top: 34px; bottom: -34px; }
  .explainer-cols { gap: 32px; }
  .explainer-col-title { font-size: 18px; overflow-wrap: break-word; word-break: break-word; max-width: 100%; }

  /* Programmes */
  .programmes-head h2 { font-size: 24px; line-height: 32px; }

  /* Docs */
  .docs-wrap { width: 92%; border-radius: 32px; padding: 32px 20px; overflow: visible; clip-path: inset(0 round 32px); }
  .docs-wrap .head h2 { font-size: 22px; }

  /* FAQ */
  .faq-grid .left h2 { font-size: 22px; }

  /* Help banner */
  .help-section { height: auto; padding: 48px 24px; }
  .help-banner { width: 100%; gap: 24px; }
  .help-banner h2 { font-size: 22px; }

  /* Footer */
  footer { padding: 40px 20px 0; }
  .footer-grid { grid-template-columns: 1fr; gap: 24px; }
  .footer-bottom { font-size: 12px; padding: 16px 0; }
}

/* ======================================================================
   ANIMATIONS — modern hovers + scroll reveal
   ====================================================================== */

/* ---------- card hover lifts ---------- */
.service-card,
.program-card,
.announcement-card,
.doc-card,
.variable {
  transition:
    transform   0.35s cubic-bezier(0.22, 0.61, 0.36, 1),
    box-shadow  0.35s cubic-bezier(0.22, 0.61, 0.36, 1),
    border-color 0.25s ease;
  will-change: transform;
}
.service-card:hover,
.program-card:hover,
.doc-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 38px rgba(0,0,0,0.08);
}
.announcement-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 34px rgba(0,0,0,0.18);
}
.variable:hover {
  transform: translateY(-3px);
  border-color: var(--green-brand);
  box-shadow: 0 10px 24px rgba(0,0,0,0.06);
}

/* ---------- "En savoir plus" arrow nudge ---------- */
.link {
  transition: color 0.2s ease, gap 0.25s ease;
}
.link .arrow-go {
  transition: transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.link:hover .arrow-go { transform: translateX(5px); }
.doc-card .link:hover .arrow-go { transform: translateX(5px); }

/* ---------- nav links underline grow ---------- */
.mainnav .nav-links a {
  position: relative;
  transition: color 0.2s ease;
}
.mainnav .nav-links a::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  bottom: -6px;
  height: 2px;
  background: var(--green-brand);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.mainnav .nav-links a:hover { color: var(--green-brand); }
.mainnav .nav-links a:hover::after { transform: scaleX(1); }
.mainnav .nav-links a:hover .chev path { stroke: var(--green-brand); }

/* ---------- buttons subtle lift ---------- */
.btn {
  transition:
    transform   0.2s cubic-bezier(0.22, 0.61, 0.36, 1),
    box-shadow  0.2s ease,
    background  0.15s ease,
    color       0.15s ease;
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(59,109,17,0.28); }
.btn-outline-red:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(192,57,43,0.18); }
.btn-on-green-ghost:hover { transform: translateY(-2px); }

/* ---------- services carousel chevron buttons ---------- */
.services-head .ctrl-btn { transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.2s; }
.services-head .ctrl-btn:hover { transform: scale(1.08); }

/* ---------- FAQ item hover ---------- */
.faq-item {
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.faq-item:hover { border-color: var(--green-300); }
.faq-item .q { transition: color 0.2s ease; }
.faq-item:hover .q { color: var(--green-brand); }

/* (Video slider keeps only its original slot-swap easing — no extra animations) */

/* ---------- SCROLL REVEAL ---------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity   0.7s cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: opacity, transform;
}
[data-reveal].in-view {
  opacity: 1;
  transform: none;
}

/* Stagger children inside a [data-reveal-group] when in-view */
[data-reveal-group] > * {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity   0.6s cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}
[data-reveal-group].in-view > * { opacity: 1; transform: none; }
[data-reveal-group].in-view > *:nth-child(1) { transition-delay: 0.00s; }
[data-reveal-group].in-view > *:nth-child(2) { transition-delay: 0.08s; }
[data-reveal-group].in-view > *:nth-child(3) { transition-delay: 0.16s; }
[data-reveal-group].in-view > *:nth-child(4) { transition-delay: 0.24s; }
[data-reveal-group].in-view > *:nth-child(5) { transition-delay: 0.32s; }
[data-reveal-group].in-view > *:nth-child(6) { transition-delay: 0.40s; }
[data-reveal-group].in-view > *:nth-child(7) { transition-delay: 0.48s; }
[data-reveal-group].in-view > *:nth-child(8) { transition-delay: 0.56s; }

/* ---------- prefers-reduced-motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal], [data-reveal-group] > * { opacity: 1 !important; transform: none !important; }
}

/* =================================================================
   ============ PROPO 2 OVERRIDES (dark-green hero) ================
   ================================================================= */

:root {
  --p2-green:  #0a3d2e;
  --p2-green2: #0f4d3a;
  --p2-gold:   #e9ad3b;
}

/* ============ HERO BLOCK (nav + hero share dark-green canvas) ============ */
.hero-block {
  position: relative;
  background: transparent;
  overflow: hidden;
  isolation: isolate;
}
.hero-block::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(60% 80% at 80% 20%, rgba(255,255,255,.04), transparent 65%),
    radial-gradient(45% 60% at 10% 80%, rgba(233,173,59,.05), transparent 65%);
  pointer-events: none; z-index: 0;
}

/* Two gold curve decorations: top-left + bottom-right */
.hero-curve {
  position: absolute;
  pointer-events: none;
  z-index: 1;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  mix-blend-mode: screen;
  filter: brightness(1.15) saturate(.95);
  opacity: .9;
}
.hero-curve-tl {
  left: -120px; top: 60px;
  width: 720px; height: 230px;
  background-image: url('../assets/bg_hero/Vector 32.jpg');
}
.hero-curve-br {
  right: -120px; bottom: -20px;
  width: 720px; height: 230px;
  background-image: url('../assets/bg_hero/Vector 31.jpg');
}

/* ============ MAIN NAV — dark-green / white text ============ */
.hero-block .mainnav {
  position: relative; z-index: 5;
  background: transparent;
  height: 88px;
  padding: 0 60px;
}
.hero-block .mainnav .logo-block .crest { height: 60px; }
.hero-block .mainnav .logo-block .divider { background: rgba(255,255,255,.3); height: 40px; }
.hero-block .mainnav .logo-block .title-ar,
.hero-block .mainnav .logo-block .title-fr { color: #fff; font-size: 13px; }
.hero-block .mainnav .nav-links a {
  color: #fff;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: .4px;
  text-transform: uppercase;
}
.hero-block .mainnav .nav-links a:hover { color: var(--p2-gold); }
.hero-block .mainnav .lang { color: #fff; font-size: 13px; }
.hero-block .mainnav .lang .caret {
  border-top-color: var(--p2-gold);
}
.hero-block .mainnav .nav-right .btn-on-green-solid {
  background: #fff;
  color: var(--p2-green);
  box-shadow: 0 6px 18px rgba(0,0,0,.12);
}
.hero-block .mainnav .nav-right .btn-on-green-solid:hover { background: #f1f8f4; }

.hero-block .mainnav .hamburger { display: none; }
.hero-block .mainnav .hamburger,
.hero-block .mainnav .hamburger::before,
.hero-block .mainnav .hamburger::after,
.hero-block .mainnav .hamburger span { background: #fff; }
.hero-block .mainnav .lang-mobile { color: #06402B; }

/* ============ HERO (inside hero-block) — 2-col layout ============ */
.hero-block .hero {
  position: relative; z-index: 3;
  padding: 0;
  overflow: visible;
  color: #fff;
}
.hero-inner {
  width: min(1200px, calc(100% - 80px));
  margin: 0 auto;
  padding: 30px 0 110px;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 60px;
  align-items: center;
}
.hero-block .hero h1 {
  width: auto; height: auto;
  margin: 0 0 20px;
  text-align: left;
  font-family: 'Almarai', sans-serif;
  font-weight: 800;
  font-size: 56px;
  line-height: 1.05;
  letter-spacing: -0.5px;
  color: #fff;
}
.hero-block .hero h1 .accent { color: var(--p2-gold); display: block; }
.hero-block .hero .lede {
  width: auto;
  max-width: 460px;
  margin: 0 0 28px;
  text-align: left;
  font-size: 14.5px;
  line-height: 1.65;
  color: rgba(255,255,255,.88);
}
.hero-block .hero .cta-row { justify-content: flex-start; margin-top: 0; gap: 14px; }
.hero-block .hero .cta-row .btn { padding: 13px 24px; font-size: 13.5px; }
.btn-on-green-solid {
  background: #fff;
  color: var(--p2-green);
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
}
.btn-on-green-solid:hover { background: #f1f8f4; }
.btn-on-green-ghost {
  background: transparent;
  color: #fff;
  border: 1.5px solid rgba(255,255,255,.85);
}
.btn-on-green-ghost:hover { background: rgba(255,255,255,.12); }

/* Hero photo (single image with play button) */
.hero-block .hero-media {
  position: relative;
  width: auto; height: auto;
  margin: 0;
  overflow: visible;
  display: flex; flex-direction: column; align-items: center; gap: 18px;
}
.hero-photo {
  position: relative;
  width: 100%;
  max-width: 520px;
  aspect-ratio: 16 / 10;
  border-radius: 20px;
  overflow: hidden;
  background: #1a4f3c center/cover no-repeat;
  box-shadow: 0 30px 70px rgba(0,0,0,.35);
}
.hero-photo .hero-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.hero-photo .play-button {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 60px; height: 60px;
}
.hero-photo .play-button svg { color: var(--p2-green); }
.hero-dots { display: flex; gap: 8px; }
.hero-dots .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(255,255,255,.35);
  transition: width .2s ease, background .2s ease;
}
.hero-dots .dot.active { background: #fff; width: 22px; border-radius: 999px; }

/* ============ ANNONCES — white section, tinted cards ============ */
section .announcements {
  background: transparent;
  color: var(--ink);
  border-radius: 0;
  width: auto;
  height: auto;
  padding: 0;
  margin: 0 auto;
}
.announcements .annonces-motif { display: none; }
.announcements .head h2 { color: var(--p2-green); }
section:has(.announcements) { padding: 80px 0; background: #fff; }
.announcement-grid { grid-template-columns: repeat(3, 1fr); }
.announcement-card {
  width: auto;
  height: auto;
  min-height: 280px;
  background: #fbe6e1;
  padding: 26px;
  border-radius: 14px;
}
.announcement-card::after { display: none; }
.announcement-card.tint-pink  { background: #fbe6e1; }
.announcement-card.tint-cream { background: #fbf2d4; }
.announcement-card .tag {
  background: #fff;
  padding: 5px 12px;
  font-size: 12px;
}
.announcement-card .tag-important   { color: var(--red-500); background: #fff; }
.announcement-card .tag-program     { color: #1d7a5a; background: #d8f0e3; }
.announcement-card .tag-important-2 { color: var(--red-500); background: #fff; }
.announcement-card h3 { font-size: 18px; }
.announcement-card .link { color: var(--p2-green); }
.announcement-card .link svg { color: var(--p2-green); }
.announcement-card.link-purple .link,
.announcement-card.link-purple .link svg,
.announcement-card.link-green  .link,
.announcement-card.link-green  .link svg { color: var(--p2-green); }

/* ============ ANNONCES — mobile dot-nav + desktop drag ============ */
.annonces-dots {
  display: none;
}
.announcement-grid[data-annonces-carousel] {
  cursor: grab;
}
.announcement-grid[data-annonces-carousel]:active {
  cursor: grabbing;
}
@media (max-width: 600px) {
  .annonces-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 12px;
  }
  .annonces-dots .dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: #d6d6d6;
    border: none; padding: 0; cursor: pointer;
    transition: width 0.2s ease, background 0.2s ease, border-radius 0.2s ease;
  }
  .annonces-dots .dot.active {
    background: var(--p2-green);
    width: 22px; border-radius: 999px;
  }
}

/* ============ SERVICES — dots below ============ */
.services-section .section-title { color: var(--p2-green); font-family: 'Almarai', sans-serif; }
.services-dots {
  display: flex; justify-content: center; gap: 8px;
  margin-top: 28px;
}
.services-dots .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #d6d6d6;
}
.services-dots .dot.active {
  background: var(--p2-green);
  width: 22px; border-radius: 999px;
}

/* ============ STATS — flat beige strip, no rounded panel, no motifs ============ */
.stats {
  background: #f5efe2;
  border-radius: 0;
  padding: 40px 24px;
  margin-top: 56px;
}
.stats .corner { display: none; }
.stats .stat .num { color: var(--p2-green); font-family: 'Almarai', sans-serif; font-weight: 800; }
.stats .stat + .stat::before { background: #d8c9a6; height: 80px; }

/* ============ EXPLAINER — DARK GREEN bg, gold numbered steps ============ */
.explainer-wrap {
  background: var(--p2-green);
  color: #fff;
}
.explainer-wrap::after { display: none; }
.explainer-head h2 { color: #fff; }
.explainer-head p   { color: rgba(255,255,255,.85); }
.explainer-col-title { color: #fff; }
.step h3 { color: #fff; }
.step p  { color: rgba(255,255,255,.78); }
.step .bullet {
  background: var(--p2-gold);
  color: var(--p2-green);
  box-shadow: 0 0 0 4px var(--p2-green);
}
.step:not(:last-child)::before { background: rgba(255,255,255,.25); }
.variable { background: #fff; }
.variable span { color: var(--ink); }

/* ============ PROGRAMMES — solid green dots with connector ============ */
.programmes-head h2 { color: var(--p2-green); }
.programmes-section .divider { background: var(--line); }

/* Program-card icon-circle background tints */
.program-card.color-red .icon-circle,
.program-card.color-orange .icon-circle,
.program-card.color-purple .icon-circle,
.program-card.color-green .icon-circle {
  background: #fff;
  border: 1px solid var(--line);
}

/* ============ DOCUMENTS — dark green full-width band ============ */
section:has(> .docs-wrap) { padding: 80px 0; background: #fff; }
.docs-wrap {
  background: var(--p2-green);
  width: auto;
  height: auto;
  max-width: 1200px;
  margin: 0 auto;
  padding: 70px 60px;
}
.docs-wrap .docs-motif { display: none; }
.docs-wrap .head h2 { color: #fff; }
.docs-wrap .head p  { color: rgba(255,255,255,.85); }
.docs-wrap .doc-card .icon { background: #e6f4ee; color: var(--p2-green); }
.docs-wrap .doc-card .link { color: var(--p2-green); }
.docs-wrap .doc-card .link svg { color: var(--p2-green); }

/* ============ FAQ — pill rows, expand to green ============ */
.faq-grid .left h2 { color: var(--p2-green); }
.faq-item.open { background: #e6f4ee; }
.faq-item.open .q .ic-wrap { background: var(--p2-green); color: #fff; }

/* ============ BESOIN D'AIDE — centered, green pill ============ */
.help-section { background: #fff; }
.help-banner {
  background: transparent;
  border-radius: 0;
  padding: 30px 0;
  flex-direction: column;
  text-align: center;
  gap: 12px;
}
.help-banner .text-block h3 { color: var(--p2-green); text-transform: uppercase; }
.help-banner .text-block { text-align: center; }
.btn-primary-green {
  background: var(--p2-green);
  color: #fff;
  padding: 14px 38px;
  border-radius: 999px;
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 700; font-size: 14px;
  text-decoration: none;
}
.btn-primary-green:hover { background: #0d5240; }

/* ============ FOOTER — clean white with green headings ============ */
footer { background: #fff; border-top: 1px solid var(--line); padding: 56px 0 0; }
footer .footer-col h4 { color: var(--p2-green); }
footer .brand .brand-divider { background: #d6d6d6; }

/* ============ RESPONSIVE TWEAKS ============ */
@media (max-width: 1000px) {
  .hero-inner { grid-template-columns: 1fr; gap: 30px; padding: 24px 0 80px; }
  .hero-block .hero h1 { font-size: 44px; text-align: left; }
  .hero-block .hero .lede { max-width: none; text-align: left; }
  .hero-block .hero .cta-row { justify-content: flex-start; }
  .hero-block .mainnav .nav-links,
  .hero-block .mainnav .lang,
  .hero-block .mainnav .nav-right .btn,
  .hero-block .mainnav .nav-right a.btn { display: none !important; }
  .hero-block .mainnav .hamburger { display: inline-flex !important; }
  .hero-curve-tl, .hero-curve-br { display: none; }
  /* Kill the desktop aspect ratio so the hero-block grows to fit nav + content */
  .hero-block {
    aspect-ratio: auto !important;
    height: auto !important;
    min-height: 0 !important;
    background-color: #06402B !important;
    background-size: 100% 100% !important;
  }
}
@media (max-width: 760px) {
  .hero-block .hero h1 { font-size: 36px; }
  .announcement-grid { grid-template-columns: 1fr; }
  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .programs-grid { grid-template-columns: 1fr; }
  .stats { grid-template-columns: repeat(2, 1fr); }
}

/* =================================================================
   ====== PROPO 2 — round 2 (emblem, hero bg, nav typo) =============
   ================================================================= */

/* Hero block uses the prepared hero_bg.svg as the dark-green canvas */
.hero-block {
  background: url('../assets/hero_bg.svg') center top / cover no-repeat;
}
.hero-block::before { display: none; }

/* Emblem is 49×83 (tall) — give it room without stretching */
.hero-block .mainnav .logo-block .crest {
  width: auto;
  height: 60px;
}

/* Title-stack stays bilingual, white on green */
.hero-block .mainnav .logo-block .title-ar,
.hero-block .mainnav .logo-block .title-fr {
  color: #fff;
  font-family: 'Almarai', sans-serif;
}
.hero-block .mainnav .logo-block .divider {
  background: rgba(255, 255, 255, .35);
}

/* Nav links — exact Figma typography */
.hero-block .mainnav .nav-links a {
  font-family: 'Almarai', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 100%;
  letter-spacing: 0;
  color: #fff;
  text-transform: none;
}
.hero-block .mainnav .nav-links a:hover { color: var(--p2-gold); }

/* The "Compte du ménage" pill: white background, dark green text */
.hero-block .mainnav .nav-right .btn.btn-on-green-solid {
  background: #fff;
  color: var(--p2-green);
  font-weight: 700;
  font-size: 14px;
  padding: 10px 22px;
}
.hero-block .mainnav .nav-right .btn.btn-on-green-solid:hover {
  background: #f1f8f4;
}

/* Lang switcher — white text, gold caret */
.hero-block .mainnav .lang {
  color: #fff;
  font-family: 'Almarai', sans-serif;
  font-weight: 400;
  font-size: 14px;
}
.hero-block .mainnav .lang .caret { border-top-color: var(--p2-gold); }

/* Thin horizontal rule under the nav (matches mockup) */
.hero-block .mainnav {
  border-bottom: 1px solid rgba(255, 255, 255, .15);
}

/* =================================================================
   ====== PROPO 2 — round 3 (preserve v1 sizing + video frame) ======
   ================================================================= */

/* Annonces — keep v1's fixed 1156×606 inline-block sizing, just remove the green panel */
section .announcements {
  width: 1156px;
  height: auto;
  min-height: 0;
  background: transparent;
  border-radius: 0;
  padding: 0 0 0 0;   /* the cards align naturally; section already has 80px vertical padding */
}
section .announcements .head {
  padding: 0 0 28px 0;
}
.announcements .head h2 {
  color: var(--p2-green);
  font-size: 24px;
  letter-spacing: 0.5px;
}
.announcements .annonces-motif { display: none; }

/* Cards keep v1's 291×388 fixed footprint, tinted by class */
.announcement-card {
  width: 291px;
  height: 388px;
  min-height: 0;
  padding: 30px;
  border-radius: 12px;
}
.announcement-card.tint-pink  { background: #fbe6e1; }
.announcement-card.tint-cream { background: #fbf2d4; }

/* Hero photo — visible white "frame" around the video, matches the mockup */
.hero-block .hero-photo {
  border: 6px solid #ffffff;
  background-clip: padding-box;
  box-shadow: 0 30px 60px rgba(0,0,0,.35);
}

/* =================================================================
   ====== PROPO 2 — round 4 (Figma-spec alignment) ==================
   ================================================================= */

:root {
  --p2-green-bg:  #06402B;   /* dark hero / section bg */
  --p2-green-btn: #0E6B44;   /* button + accents */
  --p2-mint-bg:   #F5F9F3;   /* stats + help band */
}

/* HERO BLOCK — use SVG bg (curves baked in), drop the JPG + curve overlays */
.hero-block {
  background: url('../assets/hero_bg.svg') center top / 100% auto no-repeat;
  background-color: transparent;
  min-height: 712px;
  padding-bottom: 0;
}
.hero-block::before { display: none; }
.hero-curve-tl, .hero-curve-br { display: none; }

/* NAV — thin centered underline (1157px) instead of full-width */
.hero-block .mainnav {
  border-bottom: none;
  position: relative;
}
.hero-block .mainnav::after {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  width: min(1157px, calc(100% - 80px));
  height: 1px;
  background: rgba(255, 255, 255, 0.4);
}

/* COMPTE DU MÉNAGE — 176×38 pill, 10/20 padding, 10px gap */
.hero-block .mainnav .nav-right .btn[class*="on-green-solid"],
.hero-block .mainnav .nav-right a.btn {
  background: var(--p2-green-btn) !important;
  color: #fff !important;
  font-family: 'Almarai', sans-serif !important;
  font-weight: 400 !important;
  font-size: 16px !important;
  line-height: 100% !important;
  letter-spacing: 0 !important;
  width: 176px !important;
  height: 38px !important;
  padding: 10px 20px !important;
  gap: 10px !important;
  border-radius: 999px !important;
  box-shadow: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.hero-block .mainnav .nav-right .btn[class*="on-green-solid"]:hover {
  background: #0a5436 !important;
}

/* ============ ANNONCES — 378×348 cards, gap 32px per Figma ============ */
section .announcements {
  width: min(1200px, calc(100% - 40px));
  padding: 0 0 0 0;
}
.announcement-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
.announcement-card {
  width: auto;
  max-width: 378px;
  height: 348px;
  padding: 30px;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.announcement-card .tag {
  width: fit-content;
  padding: 6px 16px;
  border-radius: 999px;
  font-size: 13px;
}
.announcement-card h3 { font-size: 18px; }
.announcement-card p  { font-size: 13.5px; line-height: 1.55; }

/* ============ STATS — full-bleed #F5F9F3 band ============ */
.services-section { overflow: visible; }
.stats {
  background: var(--p2-mint-bg);
  border-radius: 0;
  padding: 34px 24px 28px;
  margin-top: 56px;
  position: relative;
}
.stats::before {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 0; bottom: 0;
  width: 100vw;
  background: var(--p2-mint-bg);
  z-index: -1;
}
.stats .corner { display: none; }
.stats .stat .num { color: var(--p2-green-bg); font-family: 'Almarai', sans-serif; font-weight: 800; }
.stats .stat + .stat::before { background: #c5d3c6; height: 80px; }
.stats .stats-link { margin-top: 18px; }

/* ============ EXPLAINER — 2nd_bg.svg ============ */
.explainer-wrap {
  background: var(--p2-green-bg) url('../assets/2nd_bg.svg') center / cover no-repeat;
  padding: 80px 0;
  color: #fff;
}
.explainer-wrap::after { display: none; }
.explainer-head h2 { color: #fff; }
.explainer-head p  { color: rgba(255, 255, 255, .85); }
.explainer-col-title { color: #fff; }
.step h3 { color: #fff; }
.step p  { color: rgba(255, 255, 255, .82); }

/* Restore v1's bullet style (green circle, white number) per user's "use same as root" */
.step .bullet {
  background: var(--p2-green-btn);
  color: #fff;
  box-shadow: none;
}
.step:not(:last-child)::before { background: var(--gold); }

.variable { background: #fff; }
.variable span { color: var(--ink); }

/* 3-DOT ROW — solid green cards (overrides earlier rules) */

/* ============ PARCOURS D'INSCRIPTION (Propo2 theme) ============ */
.parcours-section { position: relative; }
.parcours-section .content { position: relative; }

.parcours-head { text-align: left; margin-bottom: 56px; position: relative; z-index: 1; }
.parcours-head h2 {
  font-family: 'Almarai', sans-serif;
  font-weight: 700;
  font-size: 32px;
  line-height: 43px;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--p2-green-bg);
  margin: 0 0 24px;
}
.parcours-head p {
  font-family: 'Almarai', sans-serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 1.4;
  color: var(--ink);
  margin: 0;
  max-width: 652px;
}

/* Grid of 3 step cards */
.parcours-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  position: relative;
  z-index: 1;
}

.parcours-card {
  position: relative;
  background: linear-gradient(180deg, rgba(245, 249, 243, 0.72) 0%, #fff 34%);
  border: 1px solid rgba(6, 64, 43, 0.08);
  border-radius: 20px;
  padding: 84px 28px 28px;
  color: var(--ink);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 16px;
  min-height: 380px;
  box-shadow: 0 14px 34px rgba(6, 64, 43, 0.06);
  transition:
    transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1),
    box-shadow 0.4s ease,
    border-color 0.25s ease;
}
.parcours-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 26px 56px rgba(6, 64, 43, 0.16);
  border-color: rgba(233, 173, 59, 0.55);
}

/* Step badge — pill with label + big number, sits centered inside the top of the card */
.parcours-card .num {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  background: var(--p2-green-bg);
  color: #fff;
  border-radius: 999px;
  padding: 8px 20px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 8px 18px rgba(6, 64, 43, 0.18);
  font-family: 'Almarai', sans-serif;
  z-index: 2;
  width: fit-content;
}
.parcours-card .num .num-label {
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--gold);
}
.parcours-card .num .num-value {
  font-family: 'Roboto', sans-serif;
  font-size: 22px;
  font-weight: 800;
  line-height: 1;
  color: #fff;
}

/* Icon: dark green strokes on a soft mint disc, with a subtle gold ring on hover */
.parcours-card .icon-wrap {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: var(--p2-mint-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--p2-green-bg);
  margin-top: 8px;
  flex-shrink: 0;
  box-shadow: 0 0 0 0 transparent;
  transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.3s ease;
}
.parcours-card:hover .icon-wrap {
  transform: scale(1.05);
  box-shadow: 0 0 0 8px rgba(233, 173, 59, 0.18);
}
.parcours-card .icon-wrap svg { width: 56px; height: 56px; }
.parcours-card .icon-wrap img { width: 52px; height: 52px; object-fit: contain; }
/* Mask-based icon: SVG silhouette recolored via background-color */
.parcours-card .icon-wrap .icon-mask {
  display: block;
  width: 56px;
  height: 56px;
  background-color: currentColor;
  -webkit-mask-image: var(--icon);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
          mask-image: var(--icon);
          mask-repeat: no-repeat;
          mask-position: center;
          mask-size: contain;
}

.parcours-card h3 {
  margin: 0;
  font-family: 'Almarai', sans-serif;
  font-weight: 700;
  font-size: 20px;
  line-height: 1.25;
  color: var(--p2-green-bg);
  letter-spacing: 0.1px;
}
.parcours-card p {
  margin: 0;
  font-family: 'Almarai', sans-serif;
  font-weight: 400;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-soft);
  flex: 1;
}

/* CTA: dark green pill with the right arrow */
.parcours-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  background: var(--p2-green-bg);
  color: #fff;
  border-radius: 999px;
  padding: 13px 22px;
  font-family: 'Almarai', sans-serif;
  font-weight: 700;
  font-size: 14px;
  text-align: center;
  letter-spacing: 0.2px;
  box-shadow: 0 8px 18px rgba(6, 64, 43, 0.18);
  transition:
    background 0.2s ease,
    color 0.2s ease,
    transform 0.25s cubic-bezier(0.22, 0.61, 0.36, 1),
    box-shadow 0.25s ease;
}
.parcours-btn svg { transition: transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1); }
.parcours-btn:hover {
  background: var(--gold);
  color: var(--p2-green-bg);
  transform: translateY(-2px);
  box-shadow: 0 14px 26px rgba(233, 173, 59, 0.30);
}
.parcours-btn:hover svg { transform: translateX(4px); }

@media (max-width: 1200px) {
  .parcours-grid { grid-template-columns: 1fr; padding-top: 36px; }
  .parcours-grid::before { display: none; }
}
@media (max-width: 600px) {
  .parcours-head h2 { font-size: 22px; line-height: 1.2; }
  .parcours-card { min-height: auto; padding: 64px 22px 22px; }
}

/* ============ DOCUMENTS — 3rd_bg1.svg (legacy, hidden) ============ */
.docs-wrap {
  background: var(--p2-green-bg) url('../assets/3rd_bg1.svg') center / cover no-repeat;
  width: 1156px;
  max-width: calc(100% - 40px);
  padding: 70px 60px;
}
.docs-wrap .docs-motif { display: none; }

/* ============ BESOIN D'AIDE — full-bleed #F5F9F3, no arrow on btn ============ */
.help-section {
  background: var(--p2-mint-bg);
  padding: 80px 0;
}
.help-section .help-banner {
  background: transparent;
  border-radius: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
  width: min(720px, calc(100% - 40px));
  margin: 0 auto;
}
.help-section .text-block { text-align: center; }
.help-section .text-block h3 {
  font-family: 'Almarai', sans-serif;
  font-weight: 700;
  font-size: 32px;
  line-height: 100%;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--p2-green-bg);
  margin: 0 0 8px;
  width: auto;
}
.help-section .text-block p {
  font-family: 'Almarai', sans-serif;
  font-size: 15px;
  color: var(--ink);
  margin: 0;
}
.btn-primary-green {
  background: var(--p2-green-btn);
  color: #fff;
  font-family: 'Almarai', sans-serif;
  font-weight: 700;
  font-size: 15px;
  padding: 14px 56px;
  border-radius: 999px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 16px;
  border: none;
}
.btn-primary-green:hover { background: #0a5436; }

/* =================================================================
   ====== PROPO 2 — round 5 (precise Figma spec) ====================
   ================================================================= */

/* HERO BG — solid dark green, straight bottom edge (no wave) */
.hero-block {
  background: var(--p2-green-bg);
  min-height: 712px;
  padding: 0 !important;
}

/* NAV — confined within 1157.44px container */
.hero-block .mainnav {
  width: min(1157.44px, calc(100% - 40px));
  margin: 0 auto;
  padding: 0;
  height: 132px;
}
.hero-block .mainnav::after {
  left: 0;
  transform: none;
  width: 100%;
}

/* HERO INNER — explicit 2-col layout with the video positioned per Figma */
.hero-block .hero { padding: 0; overflow: visible; }
.hero-inner {
  position: relative;
  width: min(1157.44px, calc(100% - 40px));
  margin: 0 auto;
  padding: 0;
  display: block;            /* override grid so we can position children freely */
  min-height: 540px;
}
.hero-block .hero-text {
  width: 472px;
  padding-top: 105px;
  max-width: 100%;
}
.hero-block .hero h1 {
  width: 472px;
  height: auto;
  margin: 0 0 24px;
  font-family: 'Almarai', sans-serif;
  font-weight: 700;
  font-size: 48px;
  line-height: 62px;
  letter-spacing: 0;
  color: #fff;
  text-align: left;
  text-transform: uppercase;
}
.hero-block .hero h1 .accent {
  color: var(--gold);
  display: block;
}
.hero-block .hero .lede {
  width: 472px;
  height: auto;
  max-width: none;
  margin: 0 0 28px;
  font-family: 'Almarai', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 25px;
  color: rgba(255,255,255,.9);
  text-align: left;
}
.hero-block .hero .cta-row {
  display: flex; gap: 14px;
  justify-content: flex-start;
  margin-top: 0;
}
.hero-block .hero .cta-row .btn {
  padding: 13px 24px;
  font-size: 14px;
}

/* Hero video — exact size & position from Figma (467×263 @ left:832 top:256, within the 1440 canvas) */
.hero-block .hero-media {
  position: absolute;
  top: 130px;       /* 256 - 132 (nav height) ≈ 124, with a touch of breathing room */
  /* On a 1440 canvas, left:832 means 832 - ((1440-1157.44)/2 + 0) ≈ 690 from the container edge.
     But the container is 1157.44 wide and starts at left:140 on 1440. So inside the container,
     video starts at 832 - 141.28 = 690.72. */
  left: 690px;
  right: auto;
  width: 467.4px;
  height: 263px;
  margin: 0;
  display: block;
  overflow: visible;
}
.hero-block .hero-photo {
  position: relative;
  width: 467.4px;
  height: 263px;
  border: 11px solid #fff;
  border-radius: 6px;
  box-shadow: 0 24px 60px rgba(0,0,0,.35);
  background: #1a4f3c center/cover no-repeat;
  overflow: hidden;
  box-sizing: border-box;
}
.hero-block .hero-photo .hero-video { object-fit: cover; }
.hero-block .hero-dots {
  position: static;
  left: auto;
  transform: none;
  bottom: auto;
  margin: 12px 0 0;
}

/* ============ ANNONCES — title typography per Figma ============ */
.announcements .head h2 {
  font-family: 'Almarai', sans-serif;
  font-weight: 700;
  font-size: 32px;
  line-height: 100%;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--p2-green-bg);
}

/* Announcement card — pink card bg #FEF3F4, title 22px/30px */
.announcement-card { background: #FEF3F4; }
.announcement-card.tint-pink  { background: #FEF3F4; }
.announcement-card.tint-cream { background: #FBF2D4; }
.announcement-card h3 {
  font-family: 'Almarai', sans-serif;
  font-weight: 700;
  font-size: 22px;
  line-height: 30px;
  letter-spacing: 0;
  color: var(--ink);
}

/* "Important" tag — 79×36, padding 10px, radius 80px, text #EC161C, bg #EC161C33 */
.announcement-card .tag-important {
  width: auto;
  min-width: 79px;
  height: 36px;
  padding: 0 14px;
  border-radius: 80px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(236, 22, 28, 0.20);   /* #EC161C33 */
  color: #EC161C;
  font-family: 'Almarai', sans-serif;
  font-weight: 700;
  font-size: 14px;
}
.announcement-card .tag-program {
  height: 36px;
  padding: 0 14px;
  border-radius: 80px;
  display: inline-flex;
  align-items: center;
  background: rgba(46, 125, 50, 0.18);
  color: #2E7D32;
  font-family: 'Almarai', sans-serif;
  font-weight: 700;
  font-size: 14px;
}
.announcement-card .tag-important-2 {
  height: 36px;
  padding: 0 14px;
  border-radius: 80px;
  display: inline-flex;
  align-items: center;
  background: rgba(233, 173, 59, 0.22);
  color: #B26B00;
  font-family: 'Almarai', sans-serif;
  font-weight: 700;
  font-size: 14px;
}

/* ============ STATS sits FLUSH against EXPLAINER (no gap) ============ */
.services-section { padding-bottom: 0; }
.stats { margin-bottom: 0; }
.explainer-wrap { padding-top: 0 !important; }
.explainer-wrap > section { padding-top: 24px !important; }

/* Explainer head — exact Figma: 1159×136, gap 43px between h2 and p (desktop only) */
@media (min-width: 601px) {
  .explainer-wrap .explainer-head {
    width: 1159px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 43px !important;
    margin-bottom: 56px !important;
  }
  .explainer-wrap .explainer-head h2,
  .explainer-wrap .explainer-head p {
    margin: 0 !important;
  }
}

/* ============ EXPLAINER bullets — #FFC107 with #06402B numbers ============ */
.explainer-wrap .step .bullet {
  background: #FFC107;
  color: #06402B;
  box-shadow: none;
}
.explainer-wrap .step:not(:last-child)::before {
  background: rgba(255, 193, 7, .6);
}

/* =================================================================
   ====== PROPO 2 — round 6 (cascade fixes) =========================
   ================================================================= */

/* HERO VIDEO — enlarged desktop frame, right-aligned inside the hero canvas */
.hero-block .hero-media {
  position: absolute !important;
  top: 120px !important;
  left: 597px !important;
  right: auto !important;
  width: 560px !important;
  height: 315px !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
  overflow: visible !important;
  aspect-ratio: auto !important;
}
.hero-block .hero-photo {
  position: relative !important;
  width: 467.4px !important;
  height: 263px !important;
  max-width: none !important;
  min-width: 0 !important;
  aspect-ratio: auto !important;
  border: 11px solid #fff !important;
  border-radius: 6px !important;
  box-sizing: border-box !important;
  background: #1a4f3c center/cover no-repeat;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .35);
  overflow: hidden;
}

/* "Voir toutes les annonces" — outline-green pill */
.btn-outline-green {
  background: #fff;
  color: var(--p2-green-bg);
  border: 1.5px solid var(--p2-green-bg);
  padding: 12px 26px;
  font-family: 'Almarai', sans-serif;
  font-weight: 700;
  font-size: 14px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}
.btn-outline-green:hover { background: var(--p2-mint-bg); }

/* Third announcement card's "Important" tag — same RED treatment as the first card */
.announcement-card .tag-important-2 {
  background: rgba(236, 22, 28, 0.20) !important;
  color: #EC161C !important;
}

/* =================================================================
   ====== PROPO 2 — round 7 (annonces card palette + arrow tint) ====
   ================================================================= */

/* Card backgrounds — single uniform soft mint tint for all 3 */
.announcement-card,
.announcement-card.tint-pink,
.announcement-card.tint-cream,
.announcement-card.link-green.tint-cream { background: var(--p2-mint-bg) !important; }

/* Important tag — 79×36 fixed, padding 10px (per Figma layout) */
.announcement-card .tag-important,
.announcement-card .tag-important-2,
.announcement-card .tag-program {
  width: 79px;
  height: 36px;
  padding: 10px;
  gap: 10px;
  border-radius: 80px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  font-family: 'Almarai', sans-serif;
  font-weight: 700;
  font-size: 13px;
  line-height: 100%;
}
/* All tags — uniform soft green pill on dark-green text */
.announcement-card .tag-important,
.announcement-card .tag-program,
.announcement-card .tag-important-2 {
  background: rgba(14, 107, 68, 0.12) !important;   /* var(--p2-green-btn) at 12% */
  color: var(--p2-green-bg) !important;
}
.announcement-card .tag-program {
  width: auto;                                       /* "Programme" is wider than 79px */
  min-width: 79px;
  padding: 10px 14px;
}

/* "En savoir plus" arrow colour matches the card's accent */
.announcement-card .link {
  color: var(--p2-green-bg);
  font-family: 'Almarai', sans-serif;
  font-weight: 700;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.announcement-card .link svg { color: var(--p2-green-btn) !important; }

/* "Voir toutes les annonces" — soft bg + 1px #06402B border */
.btn-outline-green {
  background: rgba(6, 64, 43, 0.10) !important;
  border: 1px solid #06402B !important;
}
.btn-outline-green:hover { background: rgba(6, 64, 43, 0.18) !important; }

/* Annonces — 3 cards, 379×348, 11px gap so they sit closer per Figma layout */
.announcement-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 379px) !important;
  gap: 11px !important;
  justify-content: space-between !important;
}
.announcement-card {
  width: 379px !important;
  height: 348px !important;
  max-width: none !important;
  min-height: 0 !important;
  padding: 30px !important;
  border-radius: 12px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  box-sizing: border-box !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08) !important;
}
.announcement-card:hover {
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12) !important;
}

/* =================================================================
   ====== PROPO 2 — round 8 (bg fit, tag width, full-bleed docs) ====
   ================================================================= */

/* Hero bg — use the SVG at its natural aspect ratio, full viewport width */
.hero-block {
  background:
    url('../assets/hero_bg.svg') center top / cover no-repeat,
    #06402B !important;
  background-color: #06402B !important;
  min-height: 712px;
}

/* Programme tag — explicit 92×36 (the word is wider than 79) */
.announcement-card .tag-program {
  width: 92px !important;
  height: 36px !important;
  padding: 10px !important;
  min-width: 0 !important;
}

/* Documents légaux — full-bleed 1440×530 dark band, contained inner */
section:has(> .docs-wrap),
.docs-section {
  padding: 0 !important;
  background: transparent;
}
.docs-wrap {
  background: var(--p2-green-bg) url('../assets/3rd_bg1.svg') center / cover no-repeat !important;
  width: 100% !important;
  max-width: none !important;
  min-height: 530.5px;
  border-radius: 0 !important;
  padding: 80px 0 !important;
  position: relative;
}
.docs-wrap .head,
.docs-wrap .docs-grid {
  width: min(1157px, calc(100% - 80px));
  margin: 0 auto;
}
.docs-wrap .head { padding: 0 0 36px; }

/* Footer copyright divider — consistent with Propo4 */
.footer-bottom {
  border-top: 1px solid var(--line);
  margin-top: 44px;
  padding: 22px 0;
}

/* =================================================================
   ====== PROPO 2 — round 9 (docs title typography) =================
   ================================================================= */

.docs-wrap .head h2 {
  font-family: 'Almarai', sans-serif !important;
  font-weight: 700 !important;
  font-size: 32px !important;
  line-height: 100% !important;
  letter-spacing: 0 !important;
  text-transform: uppercase !important;
  color: #fff !important;
  width: 590px;
  max-width: 100%;
  margin: 0 0 12px !important;
}
.docs-wrap .head p {
  font-family: 'Almarai', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.55;
  color: rgba(255, 255, 255, .85);
  margin: 0;
}

/* =================================================================
   ====== PROPO 2 — round 10 (SVG bgs at natural aspect ratio) ======
   ================================================================= */

/* HERO — SVG fills width, height follows SVG aspect ratio. Curved bottom edge visible. */
/* .hero-block {
  width: 100%;
  background: url('../assets/hero_bg.svg') no-repeat center top / 100% auto !important;
  background-color: #06402B !important;
  aspect-ratio: 1440 / 712;
  min-height: 0 !important;
  height: auto;
} */

/* DOCUMENTS — same approach with 3rd_bg1.svg */
.docs-wrap {
  background: url('../assets/3rd_bg1.svg') no-repeat center top / 100% auto !important;
  background-color: var(--p2-green-bg) !important;
  aspect-ratio: 1440 / 805;
  min-height: 0 !important;
  padding: 70px 0 !important;
}

/* "DOCUMENTS LÉGAUX DE RÉFÉRENCE" — single line */
.docs-wrap .head h2 {
  width: auto !important;
  max-width: none !important;
  white-space: nowrap;
}

/* "Voir tous les documents" — 158×16 Figma spec, Almarai 700 14px, no border */
.docs-wrap .head .btn,
.docs-wrap .head .btn-on-green-ghost {
  width: auto;
  height: auto;
  font-family: 'Almarai', sans-serif !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  line-height: 100% !important;
  letter-spacing: 0 !important;
  text-align: right;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  color: #fff !important;
}
.docs-wrap .head .btn:hover { color: var(--gold) !important; background: transparent !important; }

/* =================================================================
   ====== PROPO 2 — round 11 (fixed band heights + simple hero bg) ==
   ================================================================= */

/* HERO — SVG simply scales to width, no aspect-ratio constraint */
.hero-block {
  background: url('../assets/hero_bg.svg') no-repeat center top / 100% auto !important;
  background-color: #06402B !important;
  aspect-ratio: 1440 / 712 !important;     /* keeps the curved bottom aligned at current width */
  height: auto !important;
  min-height: 0 !important;
}

/* EXPLAINER — fixed 804.7px tall band, SVG covers (clipped if needed) */
.explainer-wrap {
  height: 804.7px !important;
  min-height: 0 !important;
  background: url('../assets/2nd_bg.svg') no-repeat center / cover !important;
  background-color: var(--p2-green-bg) !important;
  aspect-ratio: auto !important;
  padding: 80px 0 0 !important;
  box-sizing: border-box;
  overflow: hidden;
}

/* DOCUMENTS — fixed 530.5px tall band, uses 3rd_bg1.svg */
.docs-wrap {
  height: 530.5px !important;
  min-height: 0 !important;
  background: url('../assets/3rd_bg1.svg') no-repeat center / cover !important;
  background-color: var(--p2-green-bg) !important;
  aspect-ratio: auto !important;
  padding: 70px 0 !important;
  box-sizing: border-box;
  overflow: hidden;
}

/* =================================================================
   ====== PROPO 2 — round 12 (diff fixes vs mockup) =================
   ================================================================= */

/* Doc cards — exact Figma: 312×262, 12px radius, 30/20 padding, 24px gap */
.docs-wrap .docs-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 312px) !important;
  gap: 24px !important;
  justify-content: center !important;
}
.docs-wrap .doc-card {
  width: 312px !important;
  height: 262px !important;
  min-height: 0 !important;
  border-radius: 12px !important;
  padding: 30px 20px !important;
  gap: 24px !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
  box-sizing: border-box;
}

/* "Voir tous les documents" — restore the thin white outline pill */
.docs-wrap .head .btn,
.docs-wrap .head .btn-on-green-ghost {
  background: transparent !important;
  border: 1.5px solid rgba(255, 255, 255, 0.85) !important;
  padding: 12px 28px !important;
  border-radius: 999px !important;
    border: 1.5px solid #B4F8E0 !important;
  font-family: 'Almarai', sans-serif !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  line-height: 100% !important;
  color: #fff !important;
  display: inline-flex !important;
  align-items: center !important;
  text-decoration: none !important;
}
.docs-wrap .head .btn:hover {
  background: rgba(255, 255, 255, 0.10) !important;
}

/* HERO — SVG fills 100% width, height scales with aspect ratio so the wave is never clipped. */
.hero-block {
  background: url('../assets/hero_bg.svg') no-repeat center top / 100% 100% !important;
  background-color: transparent !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  aspect-ratio: 1440 / 713 !important;
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;
}

/* Prevent any horizontal page scrolling */
html, body { overflow-x: hidden !important; }

/* Push ANNONCES heading down with section padding (heading lands ~70px below the hero). */
section:has(.announcements) {
  padding: 70.8px 0 60px 0 !important;
}
section .announcements {
  width: min(1160px, calc(100% - 80px)) !important;
  margin: 0 auto !important;
  padding: 0 !important;
  overflow: visible !important;
}
section .announcements .announcement-grid {
  overflow: visible !important;
  padding-bottom: 16px !important;
}
.announcements .head h2 {
  width: 182px;
  height: 36px;
  margin: 0;
}

/* =================================================================
   ============== PROPO 2 — HOVER ANIMATIONS =======================
   ================================================================= */

/* Smooth transitions for everything interactive */
.announcement-card,
.service-card,
.program-card,
.doc-card,
.variable,
.faq-item,
.btn,
.dot-item .dot-g,
.mainnav .nav-links a,
.help-block .btn-primary-green,
.announcement-card .link,
.program-card .link,
.doc-card .link {
  transition:
    transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1),
    box-shadow 0.35s cubic-bezier(0.22, 0.61, 0.36, 1),
    border-color 0.25s ease,
    background-color 0.25s ease,
    color 0.25s ease;
  will-change: transform;
}

/* Card lift on hover — annonces / services / programmes / docs */
.announcement-card:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 22px 50px rgba(0, 0, 0, 0.14) !important;
}
.service-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 22px 44px rgba(6, 64, 43, 0.10);
  border-color: rgba(6, 64, 43, 0.25);
}
.program-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 22px 44px rgba(0, 0, 0, 0.10);
}
.docs-wrap .doc-card:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 22px 50px rgba(0, 0, 0, 0.28) !important;
}

/* Variable cards — subtle lift + tinted border */
.variable {
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.variable:hover {
  transform: translateY(-3px);
  border-color: var(--p2-green, #06402B);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.08);
}

/* "En savoir plus" arrows — nudge right on card hover */
.announcement-card .link svg,
.program-card .link svg,
.doc-card .link svg,
.announcement-card .link .arrow-go,
.doc-card .link .arrow-go {
  transition: transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.announcement-card:hover .link svg,
.program-card:hover .link svg,
.doc-card:hover .link svg,
.announcement-card:hover .link .arrow-go,
.doc-card:hover .link .arrow-go {
  transform: translateX(6px);
}

/* Nav links — underline grow on hover */
.mainnav .nav-links a {
  position: relative;
}
.mainnav .nav-links a::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -6px;
  height: 2px;
  background: var(--p2-gold, #e9ad3b);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s ease;
}
.mainnav .nav-links a:hover::after { transform: scaleX(1); }

/* Buttons — gentle lift */
.btn:not(.btn-on-green-solid):hover,
.btn-on-green-ghost:hover,
.btn-outline-green:hover,
.btn-primary-green:hover {
  transform: translateY(-2px);
}
.btn:active { transform: translateY(0); }

/* Hero photo (video frame) — soft zoom on hover */
.hero-block .hero-photo {
  transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.4s ease;
}
.hero-block .hero-photo:hover {
  transform: translateY(-4px) scale(1.01);
  box-shadow: 0 36px 80px rgba(0, 0, 0, 0.45);
}

/* Play button pulse */
.hero-block .play-button { transition: transform 0.25s ease, background 0.2s ease; }
.hero-block .play-button:hover { transform: translate(-50%, -50%) scale(1.08); background: #fff; }

/* FAQ pill rows — slight tint on hover */
.faq-item:not(.open):hover { background: #ebebeb; }

/* 3-dot bullets in programmes — pop on hover */
.dot-item .dot-g { transition: transform 0.25s ease, box-shadow 0.25s ease; }
.dot-item:hover .dot-g {
  transform: scale(1.15);
  box-shadow: 0 0 0 8px rgba(6, 64, 43, 0.1), 0 0 0 6px #fff;
}

/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after { transition: none !important; animation: none !important; }
}

/* =================================================================
   ============== PROPO 2 — MOBILE SLIDERS (≤ 900px) ================
   ================================================================= */

@media (max-width: 900px) {
  /* Force-disable the desktop horizontal scroll and the 1440px hero min-width */
  html, body { overflow-x: hidden !important; }
  .hero-block {
    width: 100% !important;
    min-width: 0 !important;
    aspect-ratio: auto !important;
    height: auto !important;
    min-height: 520px !important;
  }
  .hero-block .hero-inner,
  .hero-block .hero { padding: 0 20px !important; }

  /* Section paddings tighten */
  section { padding: 48px 0 !important; }
  section:has(.announcements) { padding: 48px 0 !important; }

  /* Annonces grid → horizontal slider */
  .announcement-grid {
    display: flex !important;
    grid-template-columns: none !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    gap: 14px !important;
    padding: 18px 16px !important;
    margin: 0 !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    justify-content: flex-start !important;
  }
  .announcement-grid::-webkit-scrollbar { display: none; }
  .announcement-card {
    flex: 0 0 82% !important;
    width: auto !important;
    height: auto !important;
    min-height: 320px !important;
    scroll-snap-align: center !important;
  }

  /* Services grid → slider */
  .services-grid {
    display: flex !important;
    grid-template-columns: none !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    gap: 14px !important;
    padding: 24px 16px !important;
    margin: 0 !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .services-grid::-webkit-scrollbar { display: none; }
  .services-grid > * {
    flex: 0 0 78% !important;
    scroll-snap-align: center !important;
    min-width: 0 !important;
  }

  /* Programmes grid → slider */
  .programs-grid {
    display: flex !important;
    grid-template-columns: none !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    gap: 14px !important;
    padding: 18px 16px !important;
    margin: 0 !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    justify-content: flex-start !important;
  }
  .programs-grid::-webkit-scrollbar { display: none; }
  .program-card {
    flex: 0 0 78% !important;
    width: auto !important;
    height: auto !important;
    min-height: 360px !important;
    scroll-snap-align: center !important;
  }

  /* Documents grid → slider */
  .docs-wrap .docs-grid {
    display: flex !important;
    grid-template-columns: none !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    gap: 14px !important;
    padding: 18px 16px !important;
    margin: 0 !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    justify-content: flex-start !important;
    width: auto !important;
  }
  .docs-wrap .docs-grid::-webkit-scrollbar { display: none; }
  .docs-wrap .doc-card {
    flex: 0 0 80% !important;
    width: auto !important;
    height: auto !important;
    min-height: 240px !important;
    scroll-snap-align: center !important;
  }

  /* Documents band relaxes the fixed height */
  .docs-wrap {
    height: auto !important;
    aspect-ratio: auto !important;
    padding: 48px 0 !important;
  }

  /* Stats stack */
  .stats {
    grid-template-columns: 1fr 1fr !important;
    gap: 24px 16px !important;
    padding: 28px 20px !important;
  }
  .stat + .stat::before { display: none !important; }

  /* Explainer columns stack, variables → 3 per row */
  .explainer-cols {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
    column-gap: 0 !important;
  }
  .variables-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 10px !important;
  }

  /* 3-dot row → stack vertically */
  .three-dots-row {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  .three-dots-row::before,
  .three-dots-row::after { display: none !important; }

  /* FAQ stack */
  .faq-grid { grid-template-columns: 1fr !important; gap: 24px !important; }

  /* Footer stack */
  .footer-grid { grid-template-columns: 1fr 1fr !important; gap: 28px !important; }

  /* Nav: hide desktop links, show hamburger */
  .mainnav .nav-links,
  .mainnav .lang,
  .mainnav .nav-right .btn { display: none !important; }
  .mainnav .hamburger { display: inline-flex !important; }
}

@media (max-width: 600px) {
  /* Tighter sliders on phones */
  .announcement-card { flex: 0 0 86% !important; }
  .service-card     { flex: 0 0 80% !important; }
  .program-card     { flex: 0 0 84% !important; }
  .docs-wrap .doc-card { flex: 0 0 84% !important; }

  /* Variables 2 per row */
  .variables-grid { grid-template-columns: repeat(2, 1fr) !important; }

  /* Stats 1 column on tiny phones */
  .stats { grid-template-columns: 1fr !important; }

  /* Footer 1 column */
  .footer-grid { grid-template-columns: 1fr !important; }

  /* Hero text scales down */
  .hero-block .hero h1 { font-size: 36px !important; line-height: 1.1 !important; }
  .hero-block .hero .lede { font-size: 13.5px !important; }
}

/* =================================================================
   ============== SERVICES CAROUSEL — real pagination ===============
   ================================================================= */

.services-grid {
  display: flex !important;
  grid-template-columns: none !important;
  gap: 22px;
  overflow-x: auto;
  overflow-y: visible;
  padding: 32px 2px 10px;
  margin: 0;
  scroll-snap-type: x mandatory;
  scroll-padding-left: 0;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.services-grid::-webkit-scrollbar {
  display: none;
}

.services-grid > .service-card {
  flex: 0 0 calc((100% - 66px) / 4) !important;
  min-width: 0;
  scroll-snap-align: start;
}

.service-card:focus-visible {
  outline: 3px solid rgba(233, 173, 59, 0.65);
  outline-offset: 5px;
}

.services-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  min-height: 10px;
  margin-top: 18px;
}

.services-dots .dot {
  position: relative;
  width: 12px;
  height: 12px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
}

.services-dots .dot::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #d6d6d6;
  transform: translate(-50%, -50%);
  transition: width 0.2s ease, background 0.2s ease, transform 0.2s ease;
}

.services-dots .dot:hover,
.services-dots .dot:focus-visible {
  outline: none;
}

.services-dots .dot:hover::before,
.services-dots .dot:focus-visible::before {
  background: rgba(6, 64, 43, 0.55);
  transform: translate(-50%, -50%) translateY(-1px);
}

.services-dots .dot.active {
  width: 24px;
}

.services-dots .dot.active::before {
  width: 22px;
  background: var(--p2-green);
}

@media (max-width: 1100px) {
  .services-grid > .service-card {
    flex-basis: calc((100% - 44px) / 3) !important;
  }
}

@media (max-width: 900px) {
  .services-grid {
    gap: 16px !important;
    padding: 24px 16px 8px !important;
    margin: 0 !important;
  }

  .services-grid > .service-card {
    flex-basis: calc((100% - 16px) / 2) !important;
  }
}

@media (max-width: 600px) {
  .services-grid > .service-card {
    flex-basis: 80% !important;
  }
}

/* =================================================================
   ============== HERO CAROUSEL — slides + dots =====================
   ================================================================= */

.hero-block .hero-media {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 100%;
}

.hero-block .hero-slides {
  position: relative;
  width: 100%;
  max-width: 560px;
  aspect-ratio: 16 / 9;
  border-radius: 6px;
  border: 11px solid #FFFFFF;
  overflow: hidden;
  background: #1a4f3c url('../assets/prop2_thumbnail.png') center / cover no-repeat;
  box-shadow: 0 28px 60px rgba(0, 0, 0, 0.35);
  box-sizing: border-box;
}

.hero-block .hero-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease, visibility 0s linear 0.5s;
  pointer-events: none;
}
.hero-block .hero-slide.active {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.5s ease, visibility 0s linear 0s;
  pointer-events: auto;
}

.hero-block .hero-slide .hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.hero-block .hero-slide .play-button {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 64px; height: 64px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  color: #ffffff;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
  transition: transform 0.2s ease, background 0.2s ease, opacity 0.2s ease;
  z-index: 2;
}
.hero-block .hero-slide .play-button:hover {
  transform: translate(-50%, -50%) scale(1.08);
  background: rgba(0, 0, 0, 0.6);
}
.hero-block .hero-slide .play-button svg {
  width: 26px; height: 26px;
  margin-left: 3px;
  color: #ffffff;
}
/* While playing: hide the play button completely (click the video to pause) */
.hero-block .hero-slide.playing .play-button {
  opacity: 0;
  pointer-events: none;
}
/* Make the video itself clickable to toggle play/pause */
.hero-block .hero-slide .hero-video { cursor: pointer; }

/* Dot buttons — sit BELOW the slides frame, not overlapping */
.hero-block .hero-dots {
  position: static !important;
  left: auto !important;
  bottom: auto !important;
  transform: none !important;
  display: flex;
  gap: 8px;
  margin: 14px 0 0 !important;
  justify-content: center;
  width: 100%;
}
.hero-block .hero-dots .dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.35);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: background 0.25s ease, width 0.25s ease;
}
.hero-block .hero-dots .dot:hover {
  background: rgba(255, 255, 255, 0.6);
}
.hero-block .hero-dots .dot.active {
  background: #fff;
  width: 22px;
  border-radius: 999px;
}

/* =================================================================
   ============== MOBILE HEADER + HERO FIXES (≤ 1000px) =============
   ================================================================= */

@media (max-width: 1000px) {
  /* Ensure the hero-block is always a tall dark-green canvas */
  .hero-block {
    background-color: #06402B !important;
    background-size: 100% 100% !important;
    background-repeat: no-repeat !important;
  }

  /* Resource/inner pages: keep the same dark-green canvas */
  .resource-hero-block {
    background-color: #06402B !important;
    background-image: none !important;
  }

  /* HEADER: compact, hamburger visible, no nav-link wrap */
  .hero-block .mainnav {
    height: auto !important;
    min-height: 64px !important;
    padding: 12px 16px !important;
    gap: 8px !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    border-bottom: none !important;
  }
  .hero-block .mainnav::after { display: none !important; }
  .hero-block .mainnav .logo-block {
    gap: 8px !important;
    flex-shrink: 1 !important;
    min-width: 0 !important;
  }
  .hero-block .mainnav .logo-block .crest {
    height: 42px !important;
    width: auto !important;
  }
  .hero-block .mainnav .logo-block .divider { display: none !important; }
  .hero-block .mainnav .logo-block .title-stack {
    min-width: 0 !important;
  }
  .hero-block .mainnav .logo-block .title-ar,
  .hero-block .mainnav .logo-block .title-fr {
    font-size: 11px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  .hero-block .mainnav .nav-links,
  .hero-block .mainnav .lang,
  .hero-block .mainnav .nav-right .btn,
  .hero-block .mainnav .nav-right a.btn { display: none !important; }
  .hero-block .mainnav .hamburger {
    display: flex !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    border: 1px solid #c9cdc7 !important;
    background: #fff !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
    padding: 0 !important;
    margin-left: auto !important;
  }
  .hero-block .mainnav .hamburger span,
  .hero-block .mainnav .hamburger span::before,
  .hero-block .mainnav .hamburger span::after {
    display: block !important;
    width: 20px !important;
    height: 2px !important;
    background: var(--green-brand) !important;
    position: relative !important;
    border-radius: 2px !important;
  }
  .hero-block .mainnav .hamburger span::before { content: "" !important; position: absolute !important; top: -7px !important; left: 0 !important; width: 20px !important; }
  .hero-block .mainnav .hamburger span::after  { content: "" !important; position: absolute !important; top: 7px !important;  left: 0 !important; width: 20px !important; }

  /* HERO: stack text + media, generous spacing, video frame fills width */
  .hero-block {
    width: 100% !important;
    min-width: 0 !important;
    aspect-ratio: auto !important;
    height: auto !important;
    min-height: 0 !important;
    padding-bottom: 32px !important;
    background-size: 100% 100% !important;
  }
  .hero-block .hero { padding: 0 !important; }
  .hero-block .hero-inner {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 28px !important;
    padding: 24px 20px 40px !important;
    width: 100% !important;
    max-width: none !important;
  }
  .hero-block .hero-inner { min-height: 0 !important; }
  .hero-block .hero-text {
    text-align: left !important;
    width: 100% !important;
    padding-top: 0 !important;
  }
  .hero-block .hero h1 {
    font-size: 38px !important;
    line-height: 1.1 !important;
    text-align: left !important;
    width: auto !important;
    margin: 0 0 16px !important;
  }
  .hero-block .hero .lede {
    font-size: 14px !important;
    max-width: 100% !important;
    text-align: left !important;
    margin: 0 0 20px !important;
  }
  .hero-block .hero .cta-row {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    justify-content: flex-start !important;
  }
  .hero-block .hero .cta-row .btn {
    flex: 1 1 calc(50% - 5px) !important;
    min-width: 140px !important;
    justify-content: center !important;
  }
  .hero-block .hero-media {
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 8px !important;
  }
  .hero-block .hero-slides {
    max-width: 100% !important;
    width: 100% !important;
  }

  /* MOBILE OVERLAY NAV — full-screen dark green */
  /* Removed: old dark-green overlay override superseded by new drawer design */
}

@media (max-width: 560px) {
  .hero-block .hero h1 { font-size: 30px !important; }
  .hero-block .hero .lede { font-size: 13px !important; }
  .hero-block .hero .cta-row .btn { flex: 1 1 100% !important; }
  .hero-block .mainnav .logo-block .title-ar,
  .hero-block .mainnav .logo-block .title-fr { font-size: 10px !important; }
}

/* =================================================================
   ============== SCROLL-TO-TOP FAB ================================
   ================================================================= */
.scroll-top {
  position: fixed;
  right: 28px;
  bottom: 100px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: none;
  background: #06402B;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 999;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  box-shadow: 0 12px 28px rgba(6, 64, 43, 0.28), 0 4px 10px rgba(0, 0, 0, 0.12);
  transition:
    opacity 0.3s ease,
    visibility 0s linear 0.3s,
    transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1),
    background-color 0.2s ease,
    box-shadow 0.2s ease;
}
.scroll-top.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition:
    opacity 0.3s ease,
    visibility 0s linear 0s,
    transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1),
    background-color 0.2s ease,
    box-shadow 0.2s ease;
}
.scroll-top:hover {
  background: #0a5436;
  transform: translateY(-3px);
  box-shadow: 0 16px 32px rgba(6, 64, 43, 0.34), 0 6px 12px rgba(0, 0, 0, 0.14);
}
.scroll-top:active {
  transform: translateY(-1px);
}
.scroll-top svg {
  width: 20px;
  height: 20px;
}
.scroll-top:focus-visible {
  outline: 2px solid #e9ad3b;
  outline-offset: 3px;
}
@media (max-width: 600px) {
  .scroll-top {
    right: 16px;
    bottom: 84px;
    width: 44px;
    height: 44px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .scroll-top { transition: opacity 0.2s ease, visibility 0s !important; }
  .scroll-top:hover { transform: none !important; }
}

/* ---------- DEMO TOGGLE (proposition switcher) ---------- */
.demo-toggle {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(8, 28, 21, 0.92);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  padding: 4px;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28);
  z-index: 2147483600;
  font-family: 'Almarai', 'Roboto', sans-serif;
  animation: demo-toggle-in 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}
@keyframes demo-toggle-in {
  from { opacity: 0; transform: translate(-50%, 18px); }
  to   { opacity: 1; transform: translateX(-50%); }
}
.demo-toggle-tag {
  background: #e9ad3b;
  color: #06402B;
  font-weight: 800;
  font-size: 10.5px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: 999px;
  margin-right: 1px;
  flex-shrink: 0;
}
.demo-toggle-opt {
  position: relative;
  color: rgba(255, 255, 255, 0.72);
  font-weight: 600;
  font-size: 13px;
  min-width: 34px;
  height: 30px;
  padding: 0 11px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  transition:
    color 0.25s ease,
    background 0.35s cubic-bezier(0.22, 0.61, 0.36, 1),
    box-shadow 0.25s ease;
}
.demo-toggle-opt:hover { color: #fff; background: rgba(255, 255, 255, 0.06); }
.demo-toggle-opt.active {
  color: #06402B;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}
.demo-toggle-opt.active:hover { background: #fff; color: #06402B; }
@media (max-width: 600px) {
  .demo-toggle { bottom: 16px; padding: 4px; gap: 2px; }
  .demo-toggle-tag { font-size: 9.5px; padding: 5px 9px; letter-spacing: 1.2px; }
  .demo-toggle-opt { min-width: 30px; height: 28px; font-size: 12px; padding: 0 9px; }
}

/* =================================================================
   ====== PROPO 3 — gradient Moroccan side ornaments ================
   ================================================================= */

.hero-block {
  background:
    radial-gradient(42% 74% at 0% 50%, rgba(233, 173, 59, 0.16), transparent 64%),
    radial-gradient(38% 68% at 100% 46%, rgba(233, 173, 59, 0.13), transparent 66%),
    radial-gradient(52% 60% at 74% 34%, rgba(255, 255, 255, 0.035), transparent 72%),
    linear-gradient(180deg, #06402B 0%, #074d3b 100%) !important;
  background-color: #06402B !important;
}

.hero-block::before,
.hero-block::after {
  content: "" !important;
  display: block !important;
  position: absolute;
  top: 96px;
  bottom: 0;
  width: clamp(210px, 26vw, 380px);
  z-index: 0;
  pointer-events: none;
  opacity: 0.46;
  mix-blend-mode: screen;
  background:
    radial-gradient(circle at 26% 34%, rgba(255, 226, 165, 0.56) 0%, rgba(233, 173, 59, 0.25) 27%, transparent 66%),
    radial-gradient(circle at 58% 72%, rgba(86, 154, 119, 0.22) 0%, transparent 58%),
    linear-gradient(90deg, rgba(233, 173, 59, 0.16), rgba(233, 173, 59, 0));
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='460' height='540' viewBox='0 0 460 540' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='white' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath opacity='.82' stroke-width='3.6' d='M36 24C122 95 170 178 170 270S122 445 36 516'/%3E%3Cpath opacity='.36' stroke-width='1.7' d='M2 30C96 110 150 190 150 270S96 430 2 510'/%3E%3Cpath opacity='.58' stroke-width='2.4' d='M58 70 104 145 188 170 104 195 58 270 12 195 -72 170 12 145Z'/%3E%3Cpath opacity='.30' stroke-width='1.7' d='M58 112 78 155 124 170 78 185 58 228 38 185 -8 170 38 155Z'/%3E%3Cpath opacity='.50' stroke-width='2.2' d='M58 292 104 367 188 392 104 417 58 492 12 417 -72 392 12 367Z'/%3E%3Cpath opacity='.26' stroke-width='1.6' d='M58 334 78 377 124 392 78 407 58 450 38 407 -8 392 38 377Z'/%3E%3Cpath opacity='.38' stroke-width='1.8' d='M220 138 252 190 310 210 252 230 220 282 188 230 130 210 188 190Z'/%3E%3Cpath opacity='.26' stroke-width='1.6' d='M220 318 252 370 310 390 252 410 220 462 188 410 130 390 188 370Z'/%3E%3Cpath opacity='.22' stroke-width='1.4' d='M344 96 370 138 416 154 370 170 344 212 318 170 272 154 318 138Z'/%3E%3Cpath opacity='.18' stroke-width='1.4' d='M344 348 370 390 416 406 370 422 344 464 318 422 272 406 318 390Z'/%3E%3Cpath opacity='.18' stroke-width='1.2' d='M236 0v540M332 0v540'/%3E%3C/g%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg width='460' height='540' viewBox='0 0 460 540' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='white' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath opacity='.82' stroke-width='3.6' d='M36 24C122 95 170 178 170 270S122 445 36 516'/%3E%3Cpath opacity='.36' stroke-width='1.7' d='M2 30C96 110 150 190 150 270S96 430 2 510'/%3E%3Cpath opacity='.58' stroke-width='2.4' d='M58 70 104 145 188 170 104 195 58 270 12 195 -72 170 12 145Z'/%3E%3Cpath opacity='.30' stroke-width='1.7' d='M58 112 78 155 124 170 78 185 58 228 38 185 -8 170 38 155Z'/%3E%3Cpath opacity='.50' stroke-width='2.2' d='M58 292 104 367 188 392 104 417 58 492 12 417 -72 392 12 367Z'/%3E%3Cpath opacity='.26' stroke-width='1.6' d='M58 334 78 377 124 392 78 407 58 450 38 407 -8 392 38 377Z'/%3E%3Cpath opacity='.38' stroke-width='1.8' d='M220 138 252 190 310 210 252 230 220 282 188 230 130 210 188 190Z'/%3E%3Cpath opacity='.26' stroke-width='1.6' d='M220 318 252 370 310 390 252 410 220 462 188 410 130 390 188 370Z'/%3E%3Cpath opacity='.22' stroke-width='1.4' d='M344 96 370 138 416 154 370 170 344 212 318 170 272 154 318 138Z'/%3E%3Cpath opacity='.18' stroke-width='1.4' d='M344 348 370 390 416 406 370 422 344 464 318 422 272 406 318 390Z'/%3E%3Cpath opacity='.18' stroke-width='1.2' d='M236 0v540M332 0v540'/%3E%3C/g%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
}

.hero-block::before {
  left: 0;
  transform: translateX(-56px);
  -webkit-mask-position: left center;
          mask-position: left center;
}

.hero-block::after {
  right: 0;
  transform: translateX(56px) scaleX(-1);
  -webkit-mask-position: left center;
          mask-position: left center;
}

/* =================================================================
   ====== PROPO 3 — sophisticated ornament system ===================
   ================================================================= */

.hero-block::before,
.hero-block::after {
  content: none !important;
  display: none !important;
}

.hero-ornaments {
  position: absolute;
  inset: 88px 0 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.hero-ornament {
  position: absolute;
  top: 0;
  bottom: 0;
  width: clamp(260px, 32vw, 440px);
  overflow: hidden;
}

.hero-ornament-left {
  left: 0;
  -webkit-mask-image: linear-gradient(90deg, #000 0%, rgba(0,0,0,0.92) 30%, rgba(0,0,0,0.46) 62%, transparent 100%);
          mask-image: linear-gradient(90deg, #000 0%, rgba(0,0,0,0.92) 30%, rgba(0,0,0,0.46) 62%, transparent 100%);
}

.hero-ornament-right {
  right: 0;
  transform: scaleX(-1);
  -webkit-mask-image: linear-gradient(90deg, #000 0%, rgba(0,0,0,0.92) 30%, rgba(0,0,0,0.46) 62%, transparent 100%);
          mask-image: linear-gradient(90deg, #000 0%, rgba(0,0,0,0.92) 30%, rgba(0,0,0,0.46) 62%, transparent 100%);
}

.hero-ornament .ornament-glow,
.hero-ornament .ornament-arch,
.hero-ornament .ornament-lattice {
  position: absolute;
  inset: 0;
  display: block;
}

.hero-ornament .ornament-glow {
  inset: -80px -40px -80px -150px;
  opacity: 0.78;
  background:
    radial-gradient(ellipse at 20% 36%, rgba(255, 221, 148, 0.34) 0%, rgba(233, 173, 59, 0.20) 30%, transparent 60%),
    radial-gradient(ellipse at 34% 72%, rgba(59, 128, 92, 0.22) 0%, transparent 58%),
    linear-gradient(90deg, rgba(233, 173, 59, 0.13), transparent 68%);
}

.hero-ornament .ornament-arch {
  inset: 0 auto 0 -96px;
  width: 380px;
  opacity: 0.78;
  mix-blend-mode: screen;
  background: none;
  -webkit-mask-image: none;
          mask-image: none;
}

.hero-ornament .ornament-lattice {
  inset: 16px auto 18px -42px;
  width: 240px;
  opacity: 0.12;
  background:
    linear-gradient(90deg, rgba(243, 212, 138, 0.20), transparent 58%),
    repeating-linear-gradient(90deg, rgba(243, 212, 138, 0.18) 0 1px, transparent 1px 58px);
  -webkit-mask-image: linear-gradient(90deg, #000 0%, rgba(0,0,0,0.76) 48%, transparent 100%);
          mask-image: linear-gradient(90deg, #000 0%, rgba(0,0,0,0.76) 48%, transparent 100%);
}

@media (max-width: 900px) {
  .hero-ornaments {
    display: none;
  }
}

/* =================================================================
   ====== PROPO 3 — final subtle zellij side treatment ==============
   ================================================================= */

.hero-block {
  background:
    radial-gradient(48% 56% at 74% 36%, rgba(255, 255, 255, 0.028), transparent 72%),
    radial-gradient(30% 62% at 0% 54%, rgba(233, 173, 59, 0.055), transparent 70%),
    radial-gradient(28% 60% at 100% 50%, rgba(233, 173, 59, 0.048), transparent 72%),
    linear-gradient(180deg, #06402B 0%, #074b3a 100%) !important;
  background-color: #06402B !important;
}

.hero-ornaments {
  inset: 88px 0 0;
}

.hero-ornament {
  width: clamp(150px, 16vw, 220px);
  opacity: 0.36;
  mix-blend-mode: screen;
}

.hero-ornament-left {
  left: 0;
  transform: none;
  -webkit-mask-image: linear-gradient(90deg, #000 0%, rgba(0,0,0,0.82) 46%, transparent 100%);
          mask-image: linear-gradient(90deg, #000 0%, rgba(0,0,0,0.82) 46%, transparent 100%);
}

.hero-ornament-right {
  right: 0;
  transform: scaleX(-1);
  -webkit-mask-image: linear-gradient(90deg, #000 0%, rgba(0,0,0,0.82) 46%, transparent 100%);
          mask-image: linear-gradient(90deg, #000 0%, rgba(0,0,0,0.82) 46%, transparent 100%);
}

.hero-ornament .ornament-glow,
.hero-ornament .ornament-arch {
  display: none;
  background: none;
}

.hero-ornament .ornament-lattice {
  inset: 18px auto 18px -78px;
  width: 300px;
  opacity: 1;
  background: url('../assets/hero_zellij_subtle.svg') left top / 150px 150px repeat;
  -webkit-mask-image: none;
          mask-image: none;
}

.hero-ornament::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(233, 173, 59, 0.055), transparent 78%);
}

/* =================================================================
   ====== PROPO 3 — reference-inspired ornament mask ================
   ================================================================= */

.hero-block {
  background:
    radial-gradient(46% 58% at 75% 35%, rgba(255, 255, 255, 0.028), transparent 72%),
    radial-gradient(28% 64% at 0% 58%, rgba(233, 173, 59, 0.065), transparent 74%),
    radial-gradient(26% 60% at 100% 50%, rgba(233, 173, 59, 0.058), transparent 74%),
    linear-gradient(180deg, #06402B 0%, #074b3a 100%) !important;
}

.hero-ornaments {
  inset: 88px 0 0;
}

.hero-ornament {
  width: clamp(180px, 21vw, 292px);
  opacity: 0.24;
  mix-blend-mode: screen;
}

.hero-ornament-left {
  left: 0;
  width: clamp(154px, 17vw, 236px);
  opacity: 0.18;
  transform: translateX(-96px);
  -webkit-mask-image: linear-gradient(90deg, #000 0%, rgba(0,0,0,0.95) 54%, rgba(0,0,0,0.42) 78%, transparent 100%);
          mask-image: linear-gradient(90deg, #000 0%, rgba(0,0,0,0.95) 54%, rgba(0,0,0,0.42) 78%, transparent 100%);
}

.hero-ornament-right {
  right: 0;
  width: clamp(210px, 23vw, 318px);
  opacity: 0.28;
  transform: translateX(58px) scaleX(-1);
  -webkit-mask-image: linear-gradient(90deg, #000 0%, rgba(0,0,0,0.95) 54%, rgba(0,0,0,0.42) 78%, transparent 100%);
          mask-image: linear-gradient(90deg, #000 0%, rgba(0,0,0,0.95) 54%, rgba(0,0,0,0.42) 78%, transparent 100%);
}

.hero-ornament .ornament-glow,
.hero-ornament .ornament-arch {
  display: none !important;
  background: none !important;
}

.hero-ornament .ornament-lattice {
  inset: 0;
  width: 100%;
  opacity: 1;
  background:
    radial-gradient(circle at 22% 32%, rgba(255, 228, 166, 0.50) 0%, rgba(233, 173, 59, 0.18) 32%, transparent 64%),
    radial-gradient(circle at 36% 74%, rgba(120, 201, 154, 0.13) 0%, transparent 58%),
    linear-gradient(90deg, rgba(233, 173, 59, 0.10), transparent 70%);
  -webkit-mask-image:
    url('../assets/ornement-green.svg'),
    url('../assets/ornement-green.svg'),
    url('../assets/ornement-green.svg');
          mask-image:
    url('../assets/ornement-green.svg'),
    url('../assets/ornement-green.svg'),
    url('../assets/ornement-green.svg');
  -webkit-mask-size: 218px 218px, 158px 158px, 116px 116px;
          mask-size: 218px 218px, 158px 158px, 116px 116px;
  -webkit-mask-position: left 118px, 88px 330px, 18px 486px;
          mask-position: left 118px, 88px 330px, 18px 486px;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
}

.hero-ornament::after {
  background: linear-gradient(90deg, rgba(233, 173, 59, 0.022), transparent 84%);
}

.hero-ornament-right .ornament-lattice {
  -webkit-mask-size: 236px 236px, 142px 142px, 102px 102px;
          mask-size: 236px 236px, 142px 142px, 102px 102px;
  -webkit-mask-position: left 64px, 126px 306px, 64px 466px;
          mask-position: left 64px, 126px 306px, 64px 466px;
}

/* =================================================================
   ====== PROPO 3 — subtle ornaments for indice section =============
   ================================================================= */

.explainer-wrap {
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(42% 54% at 78% 28%, rgba(255, 255, 255, 0.035), transparent 72%),
    radial-gradient(24% 58% at 0% 58%, rgba(233, 173, 59, 0.055), transparent 76%),
    radial-gradient(24% 58% at 100% 42%, rgba(233, 173, 59, 0.05), transparent 76%),
    linear-gradient(180deg, #06402B 0%, #074b3a 100%) !important;
  background-color: #06402B !important;
}

.explainer-wrap::before,
.explainer-wrap::after {
  content: "" !important;
  display: block !important;
  position: absolute;
  z-index: 0;
  pointer-events: none;
  mix-blend-mode: screen;
  background:
    radial-gradient(circle at 24% 34%, rgba(255, 228, 166, 0.44) 0%, rgba(233, 173, 59, 0.15) 34%, transparent 66%),
    radial-gradient(circle at 42% 78%, rgba(120, 201, 154, 0.11) 0%, transparent 58%),
    linear-gradient(90deg, rgba(233, 173, 59, 0.075), transparent 76%);
  -webkit-mask-image:
    url('../assets/ornement-green.svg'),
    url('../assets/ornement-green.svg');
          mask-image:
    url('../assets/ornement-green.svg'),
    url('../assets/ornement-green.svg');
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
}

.explainer-wrap::before {
  left: 0;
  top: 210px;
  bottom: 48px;
  width: clamp(170px, 18vw, 260px);
  opacity: 0.14;
  transform: translateX(-104px);
  -webkit-mask-size: 220px 220px, 140px 140px;
          mask-size: 220px 220px, 140px 140px;
  -webkit-mask-position: left 18px, 84px 250px;
          mask-position: left 18px, 84px 250px;
}

.explainer-wrap::after {
  right: 0;
  top: 84px;
  bottom: 30px;
  width: clamp(210px, 24vw, 330px);
  opacity: 0.22;
  transform: translateX(62px) scaleX(-1);
  -webkit-mask-size: 250px 250px, 154px 154px;
          mask-size: 250px 250px, 154px 154px;
  -webkit-mask-position: left 26px, 134px 338px;
          mask-position: left 26px, 134px 338px;
}

.explainer-wrap > section {
  position: relative;
  z-index: 1;
}

/* =================================================================
   ====== PROPO 3 — Arabic RTL page =================================
   ================================================================= */

[dir="rtl"],
[dir="rtl"] body,
body.rtl-page {
  direction: rtl;
  text-align: right;
}

[dir="rtl"] .mainnav,
[dir="rtl"] .nav-links,
[dir="rtl"] .nav-right,
[dir="rtl"] .logo-block,
[dir="rtl"] .mobile-overlay nav,
[dir="rtl"] .footer-col .brand {
  direction: rtl;
}

/* Keep logo-block internal flex order LTR (crest → divider → title) */
[dir="rtl"] .mainnav .logo-block {
  direction: ltr;
}

/* Keep nav-right internal flex order LTR (btn → lang → hamburger) */
[dir="rtl"] .mainnav .nav-right {
  direction: ltr;
}

/* RTL sidebar fix: info-layout columns are minmax(1fr) 292px (side panel already on right in LTR).
   Setting direction:ltr prevents the RTL body from flipping columns and pushing side panel to the left. */
[dir="rtl"] .info-layout {
  direction: ltr;
}

[dir="rtl"] .mainnav .lang {
  text-decoration: none;
}

[dir="rtl"] .hero-block .hero-text {
  margin-left: auto !important;
  margin-right: 0 !important;
  text-align: right !important;
}

[dir="rtl"] .hero-block .hero h1,
[dir="rtl"] .hero-block .hero .lede {
  text-align: right !important;
}

[dir="rtl"] .hero-block .hero .cta-row {
  justify-content: flex-start !important;
}

[dir="rtl"] .hero-block .hero-media {
  left: 0 !important;
  right: auto !important;
}

[dir="rtl"] .hero-block .hero-slide .play-button svg {
  margin-left: 0;
  margin-right: 3px;
}

[dir="rtl"] .announcements .head,
[dir="rtl"] .services-head,
[dir="rtl"] .programmes-head,
[dir="rtl"] .parcours-head,
[dir="rtl"] .explainer-head,
[dir="rtl"] .faq-grid .left,
[dir="rtl"] .help-banner,
[dir="rtl"] .footer-col {
  text-align: right;
}

[dir="rtl"] .announcement-card,
[dir="rtl"] .service-card,
[dir="rtl"] .program-card,
[dir="rtl"] .parcours-card,
[dir="rtl"] .faq-item,
[dir="rtl"] .variable {
  text-align: right;
}

[dir="rtl"] .announcement-card .link,
[dir="rtl"] .program-card .link,
[dir="rtl"] .parcours-btn,
[dir="rtl"] .stats-link,
[dir="rtl"] .variables-link {
  direction: rtl;
}

[dir="rtl"] .announcement-card .link svg,
[dir="rtl"] .program-card .link svg,
[dir="rtl"] .parcours-btn svg {
  transform: rotate(180deg);
}

[dir="rtl"] .stats-link .arrow-go svg,
[dir="rtl"] .variables-link .arrow-go svg {
  transform: rotate(90deg);
}

[dir="rtl"] .service-card .icon {
  left: auto;
  right: 24px;
}

[dir="rtl"] .program-card .title-block {
  align-items: flex-start;
}

[dir="rtl"] .steps {
  padding-left: 0;
  padding-right: 80px;
}

[dir="rtl"] .step .bullet {
  left: auto;
  right: -69px;
}

[dir="rtl"] .step:not(:last-child)::before {
  left: auto;
  right: -48px;
}

[dir="rtl"] .faq-item .q {
  padding-right: 0;
  padding-left: 52px;
}

[dir="rtl"] .faq-item .q .ic-wrap {
  right: auto;
  left: 0;
}

[dir="rtl"] .mobile-overlay .close {
  right: auto;
  left: 22px;
}

[dir="rtl"] .footer-col ul {
  padding-right: 0;
}

[dir="rtl"] .demo-toggle {
  direction: ltr;
}

/* Keep the preview scrollable even after browser focus or mobile-menu state changes. */
html,
body {
  min-height: 100%;
  overflow-y: auto !important;
  overscroll-behavior-y: auto;
}

body {
  touch-action: pan-y;
}

/* Main nav dropdown for grouped informational pages. */
.mainnav .nav-links .nav-item {
  position: relative;
  display: flex;
  align-items: center;
}

.mainnav .nav-links .nav-item::before {
  content: "";
  position: absolute;
  left: -16px;
  right: -16px;
  top: 100%;
  height: 18px;
}

.mainnav .nav-links .nav-trigger {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-family: 'Almarai', sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.2;
  cursor: pointer;
  transition: color 0.2s ease;
}

.hero-block .mainnav .nav-links .nav-trigger {
  color: #fff;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: .4px;
  text-transform: uppercase;
}

.mainnav .nav-links .nav-trigger .chev {
  width: 10px;
  height: 6px;
}

.mainnav .nav-links .nav-trigger::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 2px;
  background: var(--p2-gold, #e9ad3b);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s ease;
}

.mainnav .nav-links .nav-dropdown {
  position: absolute;
  top: calc(100% + 16px);
  left: 50%;
  width: 264px;
  padding: 8px;
  border: 1px solid rgba(6, 64, 43, 0.14);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 22px 52px rgba(0, 0, 0, 0.18);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 8px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s;
  z-index: 30;
}

.mainnav .nav-links .nav-dropdown::before {
  content: "";
  position: absolute;
  top: -7px;
  left: 50%;
  width: 14px;
  height: 14px;
  background: rgba(255, 255, 255, 0.98);
  border-left: 1px solid rgba(6, 64, 43, 0.14);
  border-top: 1px solid rgba(6, 64, 43, 0.14);
  transform: translateX(-50%) rotate(45deg);
}

.mainnav .nav-links .nav-item:hover .nav-dropdown,
.mainnav .nav-links .nav-item:focus-within .nav-dropdown,
.mainnav .nav-links .nav-item.open .nav-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
  transition-delay: 0s;
}

.mainnav .nav-links .nav-item:hover > .nav-trigger,
.mainnav .nav-links .nav-item:focus-within > .nav-trigger,
.mainnav .nav-links .nav-item.open > .nav-trigger {
  color: var(--p2-gold);
}

.mainnav .nav-links .nav-item:hover > .nav-trigger::after,
.mainnav .nav-links .nav-item:focus-within > .nav-trigger::after,
.mainnav .nav-links .nav-item.open > .nav-trigger::after {
  transform: scaleX(1);
}

.mainnav .nav-links .nav-item:hover > .nav-trigger .chev path,
.mainnav .nav-links .nav-item:focus-within > .nav-trigger .chev path,
.mainnav .nav-links .nav-item.open > .nav-trigger .chev path {
  stroke: var(--p2-gold);
}

.mainnav .nav-links .nav-trigger:focus-visible {
  outline: none;
}

.hero-block .mainnav .nav-links .nav-dropdown a,
.mainnav .nav-links .nav-dropdown a {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-height: 38px;
  padding: 9px 11px;
  border-radius: 6px;
  color: #06402B !important;
  font-family: 'Almarai', sans-serif;
  font-size: 13.5px !important;
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  white-space: normal;
  transform: none !important;
  will-change: auto;
}

.mainnav .nav-links .nav-dropdown a::after {
  display: none !important;
}

.mainnav .nav-links .nav-dropdown a:hover,
.mainnav .nav-links .nav-dropdown a:focus-visible {
  background: #f3faf6;
  color: #06402B !important;
  outline: none;
}

.mobile-overlay .mobile-nav-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 5px 0;
  padding: 6px;
  background: #f4f9f5;
  border-radius: 14px;
  border: 1px solid rgba(6, 64, 43, 0.08);
}

.mobile-overlay .mobile-nav-group > span {
  display: block;
  color: var(--green-brand);
  font-family: 'Almarai', sans-serif;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 6px 8px 4px;
  opacity: 0.7;
}

.mobile-overlay .mobile-nav-group > a {
  padding: 10px 12px !important;
  font-size: 14px !important;
  font-weight: 600;
  color: var(--ink) !important;
  border-radius: 9px;
  background: transparent;
  border: none;
  transition: background 0.15s, color 0.15s;
}
.mobile-overlay .mobile-nav-group > a:hover,
.mobile-overlay .mobile-nav-group > a:active {
  background: rgba(6, 64, 43, 0.08);
  color: var(--green-brand) !important;
}

[dir="rtl"] .mainnav .nav-links .nav-dropdown {
  text-align: right;
}

[dir="rtl"] .mainnav .nav-links .nav-dropdown a {
  justify-content: flex-start;
  text-align: right;
}

[dir="rtl"] .mobile-overlay .mobile-nav-group > a {
  padding-left: 0;
  padding-right: 18px;
}

@media (max-width: 1000px) {
  [dir="rtl"] .hero-block .mainnav .hamburger {
    margin-left: 0 !important;
    margin-right: auto !important;
  }

  [dir="rtl"] .hero-block .hero-text,
  [dir="rtl"] .hero-block .hero h1,
  [dir="rtl"] .hero-block .hero .lede {
    text-align: right !important;
  }

  [dir="rtl"] .hero-block .hero-media {
    position: relative !important;
    left: auto !important;
    right: auto !important;
  }
}

@media (max-width: 700px) {
  [dir="rtl"] .steps {
    padding-right: 56px;
  }

  [dir="rtl"] .step .bullet {
    right: -52px;
  }

  [dir="rtl"] .step:not(:last-child)::before {
    right: -36px;
  }
}

/* =================================================================
   ====== PROPO 3 — refined mega menus ==============================
   ================================================================= */

.hero-block .mainnav .nav-links a,
.hero-block .mainnav .nav-links .nav-trigger {
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-size: 14.5px !important;
  font-weight: 600 !important;
}

.mainnav .nav-links {
  gap: 36px;
}

.mainnav .nav-links .nav-item::before {
  left: -24px;
  right: -24px;
  height: 24px;
}

.mainnav .nav-links .mega-menu {
  width: min(640px, calc(100vw - 64px));
  padding: 8px;
  border: 1px solid rgba(6, 64, 43, 0.14);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.98);
  -webkit-backdrop-filter: blur(14px);
          backdrop-filter: blur(14px);
  box-shadow:
    0 28px 72px rgba(3, 28, 18, 0.22),
    0 1px 0 rgba(255, 255, 255, 0.8) inset;
  overflow: hidden;
}

.mainnav .nav-links .services-mega {
  width: min(560px, calc(100vw - 64px));
}

.mainnav .nav-links .mega-menu::before {
  background: rgba(255, 255, 255, 0.99);
  border-color: rgba(6, 64, 43, 0.10);
}

.mega-panel {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;
}

.services-mega .mega-panel {
  grid-template-columns: 1fr;
}

.mega-intro {
  position: relative;
  display: block;
  padding: 12px 16px 13px 18px;
  color: #06402B;
  border: 1px solid rgba(6, 64, 43, 0.10);
  border-radius: 12px;
  background:
    linear-gradient(90deg, rgba(248, 252, 250, 0.98) 0%, rgba(255, 255, 255, 0.98) 72%),
    radial-gradient(circle at 100% 0%, rgba(233, 173, 59, 0.12), transparent 42%);
  overflow: hidden;
}

.mega-intro::before {
  content: "";
  position: absolute;
  left: 0;
  top: 13px;
  bottom: 13px;
  width: 3px;
  border-radius: 999px;
  background: #e9ad3b;
}

.mega-intro::after {
  content: none;
}

.mega-intro span {
  display: block;
  margin: 0 0 3px;
  padding: 0;
  background: transparent;
  color: #b68a2d;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 0;
}

.mega-intro strong {
  position: relative;
  z-index: 1;
  display: block;
  margin: 0;
  color: #06402B;
  font-size: 16px;
  line-height: 1.2;
}

.mega-intro p {
  position: relative;
  z-index: 1;
  margin: 4px 0 0;
  color: #5d6b66;
  font-size: 12.2px;
  line-height: 1.35;
}

.mega-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px 6px;
  padding: 6px 2px 2px;
  background: transparent;
}

.mega-grid-services {
  align-content: start;
}

.hero-block .mainnav .nav-links .mega-menu .mega-link,
.mainnav .nav-links .mega-menu .mega-link {
  position: relative;
  min-height: 60px;
  padding: 10px !important;
  border: 1px solid rgba(6, 64, 43, 0.08);
  border-color: transparent;
  border-radius: 10px;
  background: transparent;
  display: flex;
  align-items: center;
  gap: 12px;
  color: #06402B !important;
  box-shadow: none;
  transition: background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.mainnav .nav-links .mega-menu .mega-link::after {
  content: none !important;
  display: none !important;
}

.mainnav .nav-links .mega-menu .mega-link:hover,
.mainnav .nav-links .mega-menu .mega-link:focus-visible {
  background: #f5faf7;
  border-color: rgba(6, 64, 43, 0.12);
  box-shadow: none;
  transform: none !important;
}

.mega-link.featured {
  background: rgba(6, 64, 43, 0.035) !important;
  border-color: rgba(6, 64, 43, 0.10) !important;
}

.mega-icon {
  --mega-icon-color: #06402B;
  --mega-icon-bg: #f0f7f3;
  width: 36px;
  height: 36px;
  border-radius: 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 36px;
  background: var(--mega-icon-bg);
  color: var(--mega-icon-color);
  border: 1px solid color-mix(in srgb, var(--mega-icon-color) 20%, transparent);
}

.mega-icon::before {
  content: "";
  width: 19px;
  height: 19px;
  background: currentColor;
  -webkit-mask: var(--mega-icon-svg) center / contain no-repeat;
          mask: var(--mega-icon-svg) center / contain no-repeat;
}

.mega-link.featured .mega-icon {
  --mega-icon-color: #06402B;
  --mega-icon-bg: #f0f7f3;
}

.mega-icon[data-icon="inscription"] { --mega-icon-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M19 8v6'/%3E%3Cpath d='M22 11h-6'/%3E%3C/svg%3E"); }
.mega-icon[data-icon="update"] { --mega-icon-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a9 9 0 0 0-15-6.7L3 8'/%3E%3Cpath d='M3 3v5h5'/%3E%3Cpath d='M3 12a9 9 0 0 0 15 6.7L21 16'/%3E%3Cpath d='M16 16h5v5'/%3E%3C/svg%3E"); --mega-icon-color: #d85a30; --mega-icon-bg: #fff1e9; }
.mega-icon[data-icon="revision"] { --mega-icon-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3Cpath d='m8 11 2 2 4-5'/%3E%3C/svg%3E"); --mega-icon-color: #4a55b8; --mega-icon-bg: #f0f1ff; }
.mega-icon[data-icon="radiation"] { --mega-icon-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='m17 8 5 5'/%3E%3Cpath d='m22 8-5 5'/%3E%3C/svg%3E"); --mega-icon-color: #c0392b; --mega-icon-bg: #fff0ee; }
.mega-icon[data-icon="suivi"] { --mega-icon-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5h6'/%3E%3Cpath d='M9 3h6v4H9z'/%3E%3Cpath d='M5 5h2'/%3E%3Cpath d='M17 5h2a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2'/%3E%3Cpath d='m8 14 2 2 5-5'/%3E%3C/svg%3E"); }
.mega-icon[data-icon="reclamation"] { --mega-icon-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a4 4 0 0 1-4 4H8l-5 3V7a4 4 0 0 1 4-4h10a4 4 0 0 1 4 4z'/%3E%3Cpath d='M12 7v5'/%3E%3Cpath d='M12 16h.01'/%3E%3C/svg%3E"); --mega-icon-color: #c0392b; --mega-icon-bg: #fff0ee; }
.mega-icon[data-icon="annonces"] { --mega-icon-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 11 18-5v12L3 13z'/%3E%3Cpath d='M11.6 16.8a3 3 0 1 1-5.8-1.6'/%3E%3C/svg%3E"); --mega-icon-color: #9b6812; --mega-icon-bg: #fff1cf; }
.mega-icon[data-icon="parcours"] { --mega-icon-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='6' cy='19' r='3'/%3E%3Ccircle cx='18' cy='5' r='3'/%3E%3Cpath d='M12 19h1a5 5 0 0 0 5-5V8'/%3E%3Cpath d='M6 16V9a4 4 0 0 1 4-4h5'/%3E%3C/svg%3E"); }
.mega-icon[data-icon="indice"] { --mega-icon-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 13a9 9 0 1 0-18 0'/%3E%3Cpath d='M12 13 16 7'/%3E%3Cpath d='M7 13h10'/%3E%3C/svg%3E"); --mega-icon-color: #4a55b8; --mega-icon-bg: #f0f1ff; }
.mega-icon[data-icon="rescoring"] { --mega-icon-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 11a8 8 0 1 0-2.3 5.7'/%3E%3Cpath d='M20 4v7h-7'/%3E%3Cpath d='M12 8v4l3 2'/%3E%3C/svg%3E"); --mega-icon-color: #d85a30; --mega-icon-bg: #fff1e9; }
.mega-icon[data-icon="programmes"] { --mega-icon-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-7-4.4-9.2-8.3C.8 9.1 2.8 5 6.7 5c2.1 0 3.4 1.2 5.3 3.1C13.9 6.2 15.2 5 17.3 5c3.9 0 5.9 4.1 3.9 7.7C19 16.6 12 21 12 21z'/%3E%3C/svg%3E"); }
.mega-icon[data-icon="stats"] { --mega-icon-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 19V5'/%3E%3Cpath d='M4 19h17'/%3E%3Cpath d='M8 16v-5'/%3E%3Cpath d='M13 16V8'/%3E%3Cpath d='M18 16v-3'/%3E%3C/svg%3E"); --mega-icon-color: #0071bc; --mega-icon-bg: #edf7ff; }
.mega-icon[data-icon="juridique"] { --mega-icon-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v18'/%3E%3Cpath d='M5 6h14'/%3E%3Cpath d='m6 6-4 7h8z'/%3E%3Cpath d='m18 6-4 7h8z'/%3E%3Cpath d='M7 21h10'/%3E%3C/svg%3E"); --mega-icon-color: #5b6870; --mega-icon-bg: #f2f5f6; }

.mainnav .nav-links .mega-menu .mega-icon,
.mainnav .nav-links .mega-menu .mega-link.featured .mega-icon {
  --mega-icon-color: #06402B;
  --mega-icon-bg: #f0f7f3;
}

.mega-link > span:last-child {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.mega-link strong {
  color: #06402B;
  font-size: 14.2px;
  line-height: 1.18;
}

.mega-link em {
  color: #5d6b66;
  font-size: 12px;
  line-height: 1.34;
  font-style: normal;
  font-weight: 400;
}

.mobile-overlay .mobile-nav-group > span {
  text-transform: none;
  letter-spacing: 0;
}

[dir="rtl"] .mega-panel,
[dir="rtl"] .mega-grid,
[dir="rtl"] .mega-link {
  direction: rtl;
}

[dir="rtl"] .mega-link {
  text-align: right;
}

[dir="rtl"] .mega-intro::after {
  inset: auto auto 18px 18px;
}

[dir="rtl"] .resource-page-head,
[dir="rtl"] .resource-section-head,
[dir="rtl"] .resource-detail-title,
[dir="rtl"] .resource-tabs-head,
[dir="rtl"] .resource-tab-panel-title,
[dir="rtl"] .resource-info-box,
[dir="rtl"] .resource-note-card,
[dir="rtl"] .resource-help-card,
[dir="rtl"] .resource-card,
[dir="rtl"] .program-rsu-criterion,
[dir="rtl"] .resource-faq-item {
  text-align: right;
}

[dir="rtl"] .resource-section-head > span::before,
[dir="rtl"] .resource-detail-title > span::before,
[dir="rtl"] .resource-tabs-head > span::before,
[dir="rtl"] .resource-tab-panel-title > span::before,
[dir="rtl"] .resource-note-card > span::before {
  order: 2;
}

[dir="rtl"] .resource-info-box ul,
[dir="rtl"] .resource-info-box ol {
  padding-left: 0;
  padding-right: 20px;
}

[dir="rtl"] .resource-note {
  border-left: 0;
  border-right: 4px solid #e9ad3b;
}

[dir="rtl"] .program-rsu-criterion {
  border-left-width: 1px;
  border-right: 4px solid #e9ad3b;
}

[dir="rtl"] .resource-breadcrumb,
[dir="rtl"] .resource-tab-list,
[dir="rtl"] .program-detail-actions,
[dir="rtl"] .resource-faq-item summary {
  direction: rtl;
}

[dir="rtl"] .resource-tab-button {
  text-align: right;
}

[dir="rtl"] .program-detail-actions {
  justify-content: flex-start;
}

[dir="rtl"] .resource-table th,
[dir="rtl"] .resource-table td {
  text-align: right;
}

/* Dedicated FAQ page */
.faq-page .faq-hero-block {
  aspect-ratio: auto !important;
  height: auto !important;
  min-height: 0 !important;
  padding-bottom: 0 !important;
  overflow: visible;
}

.faq-page .hero-ornaments {
  inset: 88px 0 0;
}

.faq-page-head {
  position: relative;
  z-index: 1;
  padding: 36px 0 48px;
  color: #fff;
}

.faq-page-head .content {
  width: min(1157.44px, calc(100% - 80px));
}

.faq-page-head p {
  margin: 0 0 12px;
  color: #e9ad3b;
  font-weight: 800;
  font-size: 14px;
}

.faq-page-head h1 {
  max-width: 760px;
  margin: 0;
  color: #fff;
  font-family: 'Almarai', sans-serif;
  font-size: 44px;
  line-height: 1.14;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: none;
}

.faq-page-main #faq {
  padding: 78px 0 96px;
}

.faq-grid-page {
  align-items: start;
}

.faq-page .faq-grid .left h2 {
  text-transform: none;
  letter-spacing: 0;
}

.faq-page .demo-toggle {
  display: none;
}

[dir="rtl"] .faq-page-head h1,
[dir="rtl"] .faq-page-head p {
  text-align: right;
}

/* ===== HOMEPAGE RTL LAYOUT ===== */

/* Stats divider ::before uses left:0 — move to right:0 for RTL */
[dir="rtl"] .stat + .stat::before {
  left: auto;
  right: 0;
}

/* Right-pointing → arrows in cards and step buttons: flip to ← */
[dir="rtl"] .link svg,
[dir="rtl"] .parcours-btn svg,
[dir="rtl"] .ctrl-btn svg {
  transform: scaleX(-1);
}

/* arrow-go (stats-link, variables-link): was rotate(-90deg) pointing right, now pointing left */
[dir="rtl"] .arrow-go svg {
  transform: rotate(90deg);
}

/* Explainer steps: move bullet and connector from left side to right side */
[dir="rtl"] .steps {
  padding-left: 0;
  padding-right: 80px;
}
[dir="rtl"] .step .bullet {
  left: auto;
  right: -69px;
}
[dir="rtl"] .step:not(:last-child)::before {
  left: auto;
  right: -48px;
}

[dir="rtl"] .variables-carousel,
[dir="rtl"] .variables-viewport,
[dir="rtl"] .variables-track,
[dir="rtl"] .variables-page {
  direction: ltr;
}

[dir="rtl"] .variables-page {
  justify-content: center;
}

[dir="rtl"] .variables-page .variable {
  direction: rtl;
}

@media (max-width: 1000px) {
  .faq-page .faq-hero-block {
    min-height: 0 !important;
  }

  .faq-page-head {
    padding: 36px 0 52px;
  }

  .faq-page-head .content {
    width: calc(100% - 40px);
  }

  .faq-page-head h1 {
    font-size: 34px;
  }
}

/* Dedicated resource pages */
.mainnav .nav-links .services-mega {
  width: min(560px, calc(100vw - 64px));
}

.services-mega .mega-panel {
  grid-template-columns: 1fr;
}

.services-mega .mega-grid-services {
  align-content: stretch;
}

.resource-page .resource-hero-block {
  aspect-ratio: auto !important;
  height: auto !important;
  min-height: 0 !important;
  padding-bottom: 0 !important;
  overflow: visible;
}

.resource-page .hero-ornaments {
  inset: 88px 0 0;
}

.resource-page-head {
  position: relative;
  z-index: 1;
  padding: 46px 0 58px;
  color: #fff;
}

.resource-page-head .content {
  width: min(1157.44px, calc(100% - 80px));
}

.resource-page-head p {
  margin: 0 0 12px;
  color: #e9ad3b;
  font-weight: 800;
  font-size: 14px;
}

.resource-page-head h1 {
  max-width: 820px;
  margin: 0;
  color: #fff;
  font-family: 'Almarai', sans-serif;
  font-size: 46px;
  line-height: 1.12;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: none;
}

.resource-page-head span {
  display: block;
  max-width: 720px;
  margin-top: 18px;
  color: rgba(255, 255, 255, 0.78);
  font-size: 17px;
  line-height: 1.65;
}

.resource-page-main {
  background:
    linear-gradient(180deg, #fff 0%, #fbfdfb 42%, #fff 100%);
}

.resource-overview {
  padding: 78px 0 34px;
}

.resource-section-head {
  max-width: 720px;
  margin-bottom: 34px;
}

.resource-section-head > span,
.resource-detail-title > span,
.resource-tabs-head > span,
.resource-tab-panel-title > span,
.resource-note-card > span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  color: #b68a2d;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.resource-section-head > span::before,
.resource-detail-title > span::before,
.resource-tabs-head > span::before,
.resource-tab-panel-title > span::before,
.resource-note-card > span::before {
  content: "";
  width: 4px;
  height: 20px;
  border-radius: 999px;
  background: #c0392b;
}

.resource-section-head h2,
.resource-detail-title h2,
.resource-tabs-head h2 {
  margin: 0;
  color: #06402B;
  font-family: 'Almarai', sans-serif;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: none;
}

.resource-section-head h2 {
  font-size: 36px;
  line-height: 1.18;
}

.resource-section-head p,
.resource-detail-title p,
.resource-tabs-head p,
.resource-tab-panel-title p {
  margin: 14px 0 0;
  color: #4f5d58;
  font-size: 17px;
  line-height: 1.65;
}

.resource-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.programmes-card-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.resource-card {
  position: relative;
  min-height: 214px;
  padding: 24px;
  border: 1px solid rgba(6, 64, 43, 0.12);
  border-radius: 10px;
  background:
    linear-gradient(145deg, rgba(244, 250, 246, 0.96), rgba(255, 255, 255, 0.98));
  color: #06402B;
  text-decoration: none;
  box-shadow: 0 18px 46px rgba(6, 64, 43, 0.06);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  overflow: hidden;
}

.resource-card::after {
  content: "";
  position: absolute;
  right: -34px;
  bottom: -42px;
  width: 130px;
  height: 130px;
  opacity: 0.06;
  background: #06402B;
  -webkit-mask: url('../assets/ornement-green.svg') center / contain no-repeat;
          mask: url('../assets/ornement-green.svg') center / contain no-repeat;
}

.resource-card:hover,
.resource-card:focus-visible {
  transform: translateY(-3px);
  border-color: rgba(6, 64, 43, 0.28);
  box-shadow: 0 24px 58px rgba(6, 64, 43, 0.11);
}

.resource-num {
  display: inline-flex;
  min-width: 42px;
  height: 32px;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
  border-radius: 999px;
  background: #06402B;
  color: #e9ad3b;
  font-family: 'Roboto', sans-serif;
  font-size: 13px;
  font-weight: 900;
}

.resource-card h3 {
  position: relative;
  z-index: 1;
  margin: 30px 0 10px;
  color: #1f2623;
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: 0;
}

.resource-card p {
  position: relative;
  z-index: 1;
  margin: 0;
  color: #5a6561;
  font-size: 14.5px;
  line-height: 1.55;
}

.programmes-jump-card {
  display: flex;
  flex-direction: column;
}

.programmes-jump-card strong {
  position: relative;
  z-index: 1;
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  margin-top: auto;
  padding: 8px 11px;
  border: 1px solid rgba(6, 64, 43, 0.14);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.82);
  color: #06402B;
  font-size: 12.5px;
  font-weight: 900;
  line-height: 1.25;
}

.program-rsu-criterion {
  margin-top: 24px;
  padding: 18px 20px;
  border: 1px solid rgba(6, 64, 43, 0.12);
  border-left: 4px solid #e9ad3b;
  border-radius: 10px;
  background:
    linear-gradient(135deg, rgba(255, 250, 240, 0.96), rgba(247, 251, 248, 0.98));
}

.program-rsu-criterion span {
  display: block;
  margin-bottom: 8px;
  color: #b68a2d;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.program-rsu-criterion strong {
  display: block;
  color: #06402B;
  font-size: 18px;
  line-height: 1.35;
}

.program-rsu-criterion p {
  margin: 8px 0 0;
  color: #4f5d58;
  font-size: 15px;
  line-height: 1.6;
}

.program-detail-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 22px;
}

.program-detail-actions .btn {
  padding: 12px 22px;
}

.resource-index-icon {
  width: 46px;
  height: 46px;
  border-radius: 999px;
  background: #06402B;
  --mega-icon-color: #fff;
  border: none;
}

.resource-detail-list {
  padding: 34px 0 98px;
}

.resource-detail-page .resource-detail-list {
  padding-top: 52px;
}

.resource-breadcrumb {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 24px;
  color: #7a8681;
  font-size: 14px;
}

.resource-breadcrumb a {
  color: #06402B;
  font-weight: 700;
  text-decoration: none;
}

.resource-breadcrumb a:hover {
  text-decoration: underline;
}

.resource-layout {
  display: grid;
  grid-template-columns: 292px minmax(0, 1fr);
  gap: 30px;
  align-items: start;
}

.resource-aside {
  position: sticky;
  top: 22px;
  display: grid;
  gap: 16px;
  align-self: start;
}

.resource-help-card,
.resource-note-card {
  border: 1px solid rgba(6, 64, 43, 0.12);
  border-radius: 12px;
  box-shadow: 0 18px 46px rgba(6, 64, 43, 0.06);
}

.resource-help-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  color: #b68a2d;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.resource-help-tag::before {
  content: "";
  width: 4px;
  height: 16px;
  border-radius: 999px;
  background: #c0392b;
}

.resource-help-card {
  position: relative;
  overflow: hidden;
  padding: 20px;
  background:
    radial-gradient(circle at 100% 0%, rgba(233, 173, 59, 0.22), transparent 34%),
    linear-gradient(145deg, #06402B 0%, #0f6e56 100%);
  color: #fff;
}

.resource-help-card::after {
  content: "";
  position: absolute;
  right: -46px;
  bottom: -52px;
  width: 140px;
  height: 140px;
  opacity: 0.08;
  background: #fff;
  -webkit-mask: url('../assets/ornement-green.svg') center / contain no-repeat;
          mask: url('../assets/ornement-green.svg') center / contain no-repeat;
}

.resource-help-card > * {
  position: relative;
  z-index: 1;
}

.resource-help-card .resource-help-tag {
  color: #e9ad3b;
}

.resource-help-card .resource-help-tag::before {
  background: #fff;
}

.resource-help-card strong {
  display: block;
  color: #fff;
  font-size: 19px;
  line-height: 1.25;
}

.resource-help-card p {
  margin: 10px 0 16px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 14px;
  line-height: 1.58;
}

.resource-help-card .btn {
  width: 100%;
  padding: 12px 16px;
  background: #fff;
  color: #06402B;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
}

.resource-help-card .btn:hover {
  background: #f7fbf8;
}

.resource-note-card {
  padding: 20px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(248, 251, 249, 0.96));
}

.resource-note-card > span {
  margin-bottom: 10px;
}

.resource-note-card p {
  margin: 0;
  color: #46534e;
  font-size: 14.5px;
  line-height: 1.65;
}

.resource-main-column {
  min-width: 0;
  display: grid;
  gap: 22px;
}

.resource-detail {
  scroll-margin-top: 110px;
  padding: 34px;
  border: 1px solid rgba(6, 64, 43, 0.12);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 18px 46px rgba(6, 64, 43, 0.06);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.resource-detail + .resource-detail {
  margin-top: 22px;
}

.resource-main-column .resource-detail + .resource-detail,
.resource-main-column .resource-rich-section {
  margin-top: 0;
}

.resource-detail:hover {
  border-color: rgba(6, 64, 43, 0.20);
  box-shadow: 0 22px 56px rgba(6, 64, 43, 0.08);
}

.resource-detail:target,
.resource-faqs:target,
.resource-related:target {
  scroll-margin-top: 110px;
}

.resource-detail:target {
  border-color: rgba(233, 173, 59, 0.55);
  box-shadow: 0 0 0 4px rgba(233, 173, 59, 0.13), 0 22px 56px rgba(6, 64, 43, 0.08);
}

.resource-rich-section {
  margin-top: 22px;
}

.resource-rich-section .resource-detail-title h2 {
  font-size: 28px;
}

.resource-detail-title {
  max-width: 850px;
}

.resource-detail-title h2 {
  font-size: 32px;
  line-height: 1.2;
}

.resource-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-top: 28px;
}

.resource-tabs-card {
  padding: 30px;
  border: 1px solid rgba(6, 64, 43, 0.12);
  border-radius: 12px;
  background:
    linear-gradient(180deg, #fff 0%, #fbfdfb 100%);
  box-shadow: 0 18px 46px rgba(6, 64, 43, 0.06);
}

.resource-tabs-head {
  max-width: 760px;
}

.resource-tabs-head h2 {
  font-size: 30px;
  line-height: 1.2;
}

.resource-tabs-head p {
  font-size: 15.5px;
}

.resource-tabs-shell {
  display: grid;
  gap: 18px;
  margin-top: 24px;
  align-items: start;
}

.resource-tab-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px;
  border: 1px solid rgba(6, 64, 43, 0.10);
  border-radius: 12px;
  background: #f5faf7;
}

.resource-tab-button {
  position: relative;
  width: auto;
  min-height: 44px;
  padding: 12px 16px;
  border: 1px solid rgba(6, 64, 43, 0.08);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.64);
  color: #52615b;
  font: inherit;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.25;
  text-align: left;
  letter-spacing: 0;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

.resource-tab-button::before {
  display: none;
}

.resource-tab-button:hover,
.resource-tab-button:focus-visible {
  color: #06402B;
  background: rgba(255, 255, 255, 0.72);
  border-color: rgba(6, 64, 43, 0.10);
}

.resource-tab-button.active {
  color: #06402B;
  background: #fff;
  border-color: rgba(6, 64, 43, 0.16);
  box-shadow: inset 0 -3px 0 #e9ad3b, 0 10px 24px rgba(6, 64, 43, 0.07);
}

.resource-tab-panels {
  min-width: 0;
}

.resource-tab-panel {
  padding: 26px;
  border: 1px solid rgba(6, 64, 43, 0.10);
  border-radius: 12px;
  background: #fff;
}

.resource-tab-panel[hidden] {
  display: none;
}

.resource-tab-panel-title {
  max-width: 790px;
}

.resource-tab-panel-title h3 {
  margin: 0;
  color: #06402B;
  font-size: 26px;
  line-height: 1.2;
}

.resource-tab-panel-title p {
  font-size: 15.5px;
}

.resource-info-box {
  padding: 22px;
  border-radius: 10px;
  border: 1px solid rgba(6, 64, 43, 0.10);
  background: #f7fbf8;
}

.resource-info-box h3 {
  margin: 0 0 14px;
  color: #06402B;
  font-size: 18px;
  line-height: 1.25;
}

.resource-info-box ul,
.resource-info-box ol {
  margin: 0;
  padding-left: 20px;
  color: #3e4844;
  font-size: 15px;
  line-height: 1.72;
}

.resource-info-box li + li {
  margin-top: 7px;
}

.resource-info-box-wide {
  margin-top: 24px;
}

.resource-table-wrap {
  margin-top: 24px;
  overflow-x: auto;
  border: 1px solid rgba(6, 64, 43, 0.12);
  border-radius: 10px;
  background: #fff;
}

.resource-table {
  width: 100%;
  min-width: 680px;
  border-collapse: collapse;
  color: #33403b;
  font-size: 14px;
  line-height: 1.55;
}

.resource-table th,
.resource-table td {
  padding: 14px 16px;
  border-bottom: 1px solid rgba(6, 64, 43, 0.10);
  text-align: left;
  vertical-align: top;
}

.resource-table th {
  color: #06402B;
  background: #f2f8f4;
  font-weight: 800;
}

.resource-table tr:last-child td {
  border-bottom: 0;
}

.resource-note {
  margin: 22px 0 0;
  padding: 18px 20px;
  border-left: 4px solid #e9ad3b;
  border-radius: 8px;
  background: #fffaf0;
  color: #3f4a45;
  font-size: 15px;
  line-height: 1.65;
}

.resource-faqs {
  padding: 30px;
  border: 1px solid rgba(6, 64, 43, 0.12);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 18px 46px rgba(6, 64, 43, 0.06);
}

.resource-faqs .resource-section-head {
  margin-bottom: 18px;
}

.resource-faqs .resource-section-head h2 {
  font-size: 28px;
}

.resource-faq-list {
  display: grid;
  gap: 12px;
}

.resource-faq-item {
  padding: 0;
  border: 1px solid rgba(6, 64, 43, 0.10);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 12px 30px rgba(6, 64, 43, 0.045);
  overflow: hidden;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.resource-faq-item[open] {
  border-color: rgba(6, 64, 43, 0.20);
  box-shadow: 0 18px 42px rgba(6, 64, 43, 0.07);
}

.resource-faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 20px 22px;
  color: #06402B;
  font-size: 17px;
  font-weight: 800;
  line-height: 1.35;
  cursor: pointer;
  list-style: none;
}

.resource-faq-item summary::-webkit-details-marker {
  display: none;
}

.resource-faq-item summary svg {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  color: #b68a2d;
  transition: transform 0.2s ease;
}

.resource-faq-item[open] summary svg {
  transform: rotate(180deg);
}

.resource-faq-item summary:hover {
  background: #f8fbf9;
}

.resource-faq-item h3 {
  margin: 0;
  color: #06402B;
  font-size: 17px;
  line-height: 1.35;
}

.resource-faq-item p {
  margin: 0;
  padding: 0 22px 22px;
  color: #4f5d58;
  font-size: 15px;
  line-height: 1.65;
}

.resource-related {
  margin-top: 42px;
}

.resource-related .resource-section-head {
  margin-bottom: 20px;
}

.resource-related .resource-section-head h2 {
  font-size: 26px;
}

.resource-related .resource-card {
  min-height: 182px;
}

.info-detail-list {
  padding-top: 40px;
}

.info-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 292px;
  gap: 30px;
  align-items: start;
}

.info-main-column {
  min-width: 0;
  display: grid;
  gap: 22px;
}

.info-side-panel {
  position: sticky;
  top: 22px;
  display: grid;
  gap: 16px;
}

.info-lead-card,
.info-section-card,
.info-reading-card {
  border: 1px solid rgba(6, 64, 43, 0.12);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 18px 46px rgba(6, 64, 43, 0.06);
}

.info-lead-card {
  position: relative;
  overflow: hidden;
  padding: 34px;
  background:
    radial-gradient(circle at 100% 0%, rgba(233, 173, 59, 0.14), transparent 30%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(246, 251, 248, 0.98));
}

.info-lead-card::after {
  content: "";
  position: absolute;
  right: -58px;
  bottom: -70px;
  width: 190px;
  height: 190px;
  opacity: 0.045;
  background: #06402B;
  -webkit-mask: url('../assets/ornement-green.svg') center / contain no-repeat;
          mask: url('../assets/ornement-green.svg') center / contain no-repeat;
}

.info-lead-card > span,
.info-reading-card > span,
.info-update-card > span,
.info-doc-grid article > span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #b68a2d;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.info-lead-card > span::before,
.info-reading-card > span::before {
  content: "";
  width: 4px;
  height: 18px;
  border-radius: 999px;
  background: #c0392b;
}

.info-lead-card h2 {
  position: relative;
  z-index: 1;
  max-width: 780px;
  margin: 12px 0 0;
  color: #06402B;
  font-family: 'Almarai', sans-serif;
  font-size: 34px;
  line-height: 1.16;
  letter-spacing: 0;
}

.info-lead-card p {
  position: relative;
  z-index: 1;
  max-width: 760px;
  margin: 14px 0 0;
  color: #4f5d58;
  font-size: 16.5px;
  line-height: 1.65;
}

.info-quick-links {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
}

.info-quick-links a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 10px 14px;
  border: 1px solid rgba(6, 64, 43, 0.14);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.78);
  color: #06402B;
  font-size: 13px;
  font-weight: 900;
  line-height: 1.2;
  text-decoration: none;
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

.info-quick-links a:hover,
.info-quick-links a:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(6, 64, 43, 0.26);
  background: #fff;
}

.info-section-card {
  padding: 30px;
  scroll-margin-top: 110px;
}

.info-section-card.compact {
  padding: 26px;
}

.info-section-card .resource-section-head {
  margin-bottom: 24px;
}

.info-section-card .resource-section-head h2 {
  font-size: 30px;
}

.info-update-grid,
.info-dashboard-grid,
.info-doc-grid,
.info-compare-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.info-update-card,
.info-dashboard-grid article,
.info-doc-grid article,
.info-compare-grid article,
.info-step-card,
.info-cycle-grid article,
.info-equation article {
  border: 1px solid rgba(6, 64, 43, 0.10);
  border-radius: 10px;
  background: #f7fbf8;
}

.info-update-card {
  min-height: 210px;
  padding: 22px;
}

.info-update-card.urgent {
  background: linear-gradient(145deg, rgba(255, 247, 244, 0.95), rgba(255, 255, 255, 0.98));
}

.info-update-card.campaign {
  background: linear-gradient(145deg, rgba(247, 252, 242, 0.95), rgba(255, 255, 255, 0.98));
}

.info-update-card.procedure {
  background: linear-gradient(145deg, rgba(247, 250, 255, 0.95), rgba(255, 255, 255, 0.98));
}

.info-update-card h3,
.info-doc-grid article h3,
.info-compare-grid article h3,
.info-step-card h3,
.info-cycle-grid article h3,
.info-equation article strong {
  margin: 16px 0 10px;
  color: #06402B;
  font-size: 20px;
  line-height: 1.25;
}

.info-update-card p,
.info-doc-grid article p,
.info-compare-grid article p,
.info-step-card p,
.info-cycle-grid article p,
.info-equation article p {
  margin: 0;
  color: #4f5d58;
  font-size: 14.5px;
  line-height: 1.6;
}

.info-update-card strong {
  display: inline-flex;
  margin-top: 18px;
  color: #06402B;
  font-size: 13px;
  font-weight: 900;
}

.info-tabs-card {
  scroll-margin-top: 110px;
}

.info-tab-panel .info-check-list {
  margin-top: 22px;
}

.info-check-list {
  margin: 0;
  padding: 0;
  list-style: none;
  color: #3e4844;
  font-size: 15px;
  line-height: 1.65;
}

.info-check-list li {
  position: relative;
  padding-left: 22px;
}

.info-check-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #0b6b51;
  box-shadow: 0 0 0 4px rgba(11, 107, 81, 0.08);
}

.info-check-list li + li {
  margin-top: 9px;
}

.info-disclosure-list {
  display: grid;
  gap: 10px;
}

.info-disclosure {
  border: 1px solid rgba(6, 64, 43, 0.10);
  border-radius: 10px;
  background: #fff;
  overflow: hidden;
}

.info-disclosure summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 58px;
  padding: 16px 18px;
  color: #06402B;
  font-size: 16px;
  font-weight: 900;
  cursor: pointer;
  list-style: none;
}

.info-disclosure summary::-webkit-details-marker {
  display: none;
}

.info-disclosure summary i {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  border-right: 2px solid #b68a2d;
  border-bottom: 2px solid #b68a2d;
  transform: rotate(45deg) translateY(-3px);
  transition: transform 0.18s ease;
}

.info-disclosure[open] summary i {
  transform: rotate(225deg) translateY(-3px);
}

.info-disclosure div {
  padding: 0 18px 18px;
}

.info-stepper {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.info-step-card {
  position: relative;
  min-height: 230px;
  padding: 24px;
  background:
    radial-gradient(circle at 100% 0%, rgba(233, 173, 59, 0.14), transparent 32%),
    #f7fbf8;
}

.info-step-card span,
.info-cycle-grid article span {
  display: inline-flex;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #06402B;
  color: #e9ad3b;
  font-family: 'Roboto', sans-serif;
  font-size: 16px;
  font-weight: 900;
}

.info-equation {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  gap: 14px;
  align-items: stretch;
}

.info-equation i {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #b68a2d;
  font-style: normal;
  font-size: 30px;
  font-weight: 900;
}

.info-equation article {
  padding: 22px;
}

.info-equation article span {
  display: block;
  color: #b68a2d;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.info-equation article strong {
  display: block;
}

.info-compare-grid.two,
.info-compare-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.info-compare-grid.three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.info-compare-grid article {
  padding: 22px;
}

.info-cycle-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.info-cycle-grid article {
  min-height: 210px;
  padding: 22px;
  background: #f7fbf8;
}

.info-dashboard-grid article {
  min-height: 188px;
  padding: 22px;
  background:
    linear-gradient(145deg, rgba(247, 251, 248, 0.96), rgba(255, 255, 255, 0.98));
}

.info-dashboard-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.info-dashboard-grid article strong {
  display: block;
  color: #06402B;
  font-family: 'Almarai', sans-serif;
  font-size: 36px;
  line-height: 1;
}

.info-dashboard-grid article span {
  display: block;
  margin-top: 12px;
  color: #1f2623;
  font-size: 16px;
  font-weight: 900;
}

.info-dashboard-grid article p {
  margin-top: 10px;
}

.info-bar-list {
  display: grid;
  gap: 14px;
}

.info-bar-list div {
  display: grid;
  grid-template-columns: 210px minmax(120px, 1fr) minmax(90px, auto);
  gap: 14px;
  align-items: center;
  padding: 15px 16px;
  border: 1px solid rgba(6, 64, 43, 0.10);
  border-radius: 10px;
  background: #f7fbf8;
  color: #34413c;
  font-size: 14px;
}

.info-bar-list span {
  font-weight: 800;
}

.info-bar-list i {
  position: relative;
  height: 10px;
  border-radius: 999px;
  background: rgba(6, 64, 43, 0.10);
  overflow: hidden;
}

.info-bar-list i::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--value);
  border-radius: inherit;
  background: linear-gradient(90deg, #06402B, #1a8d6d);
}

.info-bar-list strong {
  color: #06402B;
  text-align: right;
}

.info-doc-grid article {
  min-height: 220px;
  padding: 22px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(247, 251, 248, 0.98));
}

.info-doc-grid article a {
  display: inline-flex;
  margin-top: 18px;
  color: #06402B;
  font-size: 14px;
  font-weight: 900;
  text-decoration: none;
}

.info-doc-grid article a:hover {
  text-decoration: underline;
}

.info-note-card,
.info-reading-card {
  padding: 20px;
}

.info-reading-card {
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(248, 251, 249, 0.96));
}

.info-reading-card > span {
  margin-bottom: 14px;
}

.info-reading-card div {
  padding: 14px 0;
  border-top: 1px solid rgba(6, 64, 43, 0.10);
}

.info-reading-card div:first-of-type {
  border-top: 0;
  padding-top: 0;
}

.info-reading-card strong {
  display: block;
  color: #06402B;
  font-size: 15px;
  line-height: 1.3;
}

.info-reading-card p {
  margin: 6px 0 0;
  color: #52605b;
  font-size: 13.5px;
  line-height: 1.55;
}

.info-related {
  margin-top: 10px;
}

.info-layout-full {
  grid-template-columns: minmax(0, 1fr);
}

.info-layout-indice.info-layout-full {
  max-width: none;
}

.info-layout-indice .info-main-column {
  gap: 24px;
}

.info-layout-indice .info-lead-card {
  padding: 38px 40px;
  background:
    radial-gradient(circle at 88% 8%, rgba(233, 173, 59, 0.16), transparent 28%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.99), rgba(245, 250, 247, 0.98));
}

.info-layout-indice .info-lead-card h2 {
  max-width: 980px;
  font-family: 'Roboto', 'Almarai', sans-serif;
  font-size: 38px;
}

.info-layout-indice .info-lead-card p {
  max-width: 1040px;
}

.ise-plain-section,
.ise-variables-section,
.ise-correction-section,
.ise-faq-section {
  overflow: hidden;
}

.ise-flow {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.ise-flow article {
  position: relative;
  min-height: 238px;
  padding: 22px;
  border: 1px solid rgba(6, 64, 43, 0.10);
  border-radius: 12px;
  background:
    radial-gradient(circle at 100% 0%, rgba(233, 173, 59, 0.12), transparent 34%),
    linear-gradient(145deg, #f8fbf8, #ffffff);
}

.ise-flow article::before {
  content: "";
  display: block;
  width: 34px;
  height: 4px;
  margin-bottom: 18px;
  border-radius: 999px;
  background: #e9ad3b;
}

.ise-flow article span,
.ise-variable-card > span {
  display: block;
  color: #b68a2d;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.08em;
  line-height: 1.35;
  text-transform: uppercase;
}

.ise-flow article h3,
.ise-variable-card h3 {
  margin: 12px 0 10px;
  color: #06402B;
  font-family: 'Roboto', 'Almarai', sans-serif;
  font-size: 20px;
  line-height: 1.25;
}

.ise-flow article p,
.ise-variable-card p {
  margin: 0;
  color: #4f5d58;
  font-size: 14.5px;
  line-height: 1.62;
}

.ise-variable-carousel {
  width: 100%;
  max-width: none;
}

.ise-variables-viewport {
  overflow: hidden;
  border-radius: 12px;
}

.ise-variable-page {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  padding: 2px;
}

.ise-variable-page:last-child {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ise-variable-card {
  position: relative;
  min-height: 286px;
  padding: 24px;
  border: 1px solid rgba(6, 64, 43, 0.12);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 14px 34px rgba(6, 64, 43, 0.045);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  appearance: none;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.ise-variable-card:hover,
.ise-variable-card:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(6, 64, 43, 0.26);
  box-shadow: 0 18px 40px rgba(6, 64, 43, 0.08);
  outline: none;
}

.ise-variable-card strong {
  display: block;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid rgba(6, 64, 43, 0.10);
  color: #06402B;
  font-size: 13.5px;
  font-weight: 900;
  line-height: 1.45;
}

.ise-variable-card.emphasis {
  background:
    radial-gradient(circle at 100% 0%, rgba(233, 173, 59, 0.14), transparent 32%),
    #f7fbf8;
}

.ise-variable-controls {
  margin-top: 20px;
}

.ise-variable-controls .variables-nav {
  width: 36px;
  height: 36px;
  border-color: rgba(6, 64, 43, 0.18);
  background: #fff;
  color: #06402B;
  box-shadow: 0 10px 22px rgba(6, 64, 43, 0.08);
}

.ise-variable-controls .variables-nav:hover,
.ise-variable-controls .variables-nav:focus-visible {
  border-color: rgba(6, 64, 43, 0.32);
  background: #f7fbf8;
}

.ise-variable-controls .variables-dots .dot::before {
  background: rgba(6, 64, 43, 0.22);
}

.ise-variable-controls .variables-dots .dot.active::before {
  background: #e9ad3b;
}

.ise-modal[hidden] {
  display: none;
}

.ise-modal {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: grid;
  place-items: center;
  padding: 28px;
}

.ise-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(3, 38, 26, 0.58);
  backdrop-filter: blur(5px);
}

.ise-modal-panel {
  position: relative;
  z-index: 1;
  width: min(920px, calc(100vw - 40px));
  max-height: min(780px, calc(100vh - 56px));
  overflow: auto;
  padding: 32px;
  border: 1px solid rgba(255, 255, 255, 0.54);
  border-radius: 14px;
  background:
    radial-gradient(circle at 100% 0%, rgba(233, 173, 59, 0.14), transparent 30%),
    #fff;
  box-shadow: 0 28px 80px rgba(3, 38, 26, 0.28);
}

.ise-modal-close {
  position: absolute;
  top: 18px;
  right: 18px;
  display: inline-flex;
  width: 42px;
  height: 42px;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid rgba(6, 64, 43, 0.12);
  border-radius: 999px;
  background: #fff;
  color: #06402B;
  cursor: pointer;
}

.ise-modal-close svg {
  width: 18px;
  height: 18px;
}

.ise-modal-panel > span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #b68a2d;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.08em;
  line-height: 1.35;
  text-transform: uppercase;
}

.ise-modal-panel > span::before {
  content: "";
  width: 4px;
  height: 18px;
  border-radius: 999px;
  background: #c0392b;
}

.ise-modal-panel h2 {
  max-width: 760px;
  margin: 12px 54px 0 0;
  color: #06402B;
  font-family: 'Roboto', 'Almarai', sans-serif;
  font-size: 30px;
  line-height: 1.2;
}

.ise-modal-panel > p {
  max-width: 780px;
  margin: 12px 0 0;
  color: #4f5d58;
  font-size: 15.5px;
  line-height: 1.65;
}

.ise-modal-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  margin-top: 24px;
}

.ise-modal-group {
  padding: 18px;
  border: 1px solid rgba(6, 64, 43, 0.10);
  border-radius: 14px;
  background:
    radial-gradient(circle at 100% 0%, rgba(233, 173, 59, 0.08), transparent 32%),
    #f8fbf8;
}

.ise-modal-group > h3 {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  margin: 0;
  padding: 6px 12px;
  border-radius: 999px;
  background: #06402B;
  color: #fff;
  font-size: 13px;
  font-weight: 900;
  line-height: 1.2;
}

.ise-modal-group-note {
  margin: 12px 0 0;
  color: #52605b;
  font-size: 14.5px;
  line-height: 1.55;
}

.ise-modal-group-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 16px;
}

.ise-modal-grid article,
.ise-modal-group-grid article {
  padding: 18px;
  border: 1px solid rgba(6, 64, 43, 0.10);
  border-radius: 12px;
  background: #fff;
}

.ise-modal-grid h3,
.ise-modal-grid h4,
.ise-modal-group-grid h4 {
  margin: 0;
  color: #06402B;
  font-size: 17px;
  line-height: 1.3;
}

.ise-modal-grid p,
.ise-modal-group-grid p {
  margin: 8px 0 0;
  color: #52605b;
  font-size: 14px;
  line-height: 1.55;
}

.ise-modal-grid .ise-modal-group > h3 {
  color: #fff;
  font-size: 13px;
}

.ise-compare-grid article {
  min-height: 188px;
  background:
    linear-gradient(145deg, rgba(247, 251, 248, 0.98), rgba(255, 255, 255, 0.98));
}

.ise-faq-section {
  display: grid;
  grid-template-columns: minmax(250px, 0.36fr) minmax(0, 1fr);
  gap: 28px;
  align-items: start;
  border-color: rgba(6, 64, 43, 0.16);
  background:
    radial-gradient(circle at 0% 100%, rgba(233, 173, 59, 0.18), transparent 34%),
    linear-gradient(135deg, #06402B, #0b5b46);
}

.ise-faq-section .resource-section-head {
  margin: 0;
}

.ise-faq-section .resource-section-head h2 {
  color: #fff;
}

.ise-faq-section .resource-section-head p {
  color: rgba(255, 255, 255, 0.76);
}

.ise-faq-section .info-disclosure-list {
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}

.ise-faq-section .info-disclosure {
  align-self: start;
  border-color: rgba(255, 255, 255, 0.20);
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 14px 34px rgba(3, 38, 26, 0.12);
}

.ise-faq-section .info-disclosure summary {
  min-height: 62px;
}

.info-layout-statistiques .info-lead-card {
  padding: 30px 34px;
}

.stats-panel {
  padding: 30px;
  border: 1px solid rgba(6, 64, 43, 0.12);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 18px 46px rgba(6, 64, 43, 0.06);
  scroll-margin-top: 110px;
}

.stats-panel + .stats-panel {
  margin-top: 0;
}

.stats-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.stats-kpi {
  position: relative;
  overflow: hidden;
  min-height: 162px;
  padding: 22px;
  border: 1px solid rgba(6, 64, 43, 0.10);
  border-radius: 12px;
  background:
    radial-gradient(circle at 100% 0%, rgba(233, 173, 59, 0.13), transparent 34%),
    linear-gradient(145deg, #f8fbf8, #ffffff);
}

.stats-kpi::after {
  content: "";
  position: absolute;
  right: -28px;
  bottom: -36px;
  width: 108px;
  height: 108px;
  border-radius: 50%;
  border: 18px solid rgba(6, 64, 43, 0.045);
}

.stats-kpi span {
  position: relative;
  z-index: 1;
  display: block;
  max-width: 220px;
  min-height: 40px;
  color: #4f5d58;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.35;
}

.stats-kpi strong {
  position: relative;
  z-index: 1;
  display: block;
  margin-top: 18px;
  color: #06402B;
  font-family: 'Roboto', 'Almarai', sans-serif;
  font-size: 42px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0;
}

.stats-kpi em {
  position: relative;
  z-index: 1;
  display: block;
  margin-top: 6px;
  color: #6d7a75;
  font-size: 13px;
  font-style: normal;
  font-weight: 700;
}

.stats-grid {
  display: grid;
  gap: 16px;
  align-items: start;
}

.stats-grid-2 {
  grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.9fr);
}

.stats-grid-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.stats-chart-card {
  min-width: 0;
  padding: 22px;
  border: 1px solid rgba(6, 64, 43, 0.10);
  border-radius: 12px;
  background:
    linear-gradient(145deg, rgba(248, 251, 248, 0.98), rgba(255, 255, 255, 0.98));
}

.stats-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 20px;
}

.stats-card-head h3 {
  margin: 0;
  color: #06402B;
  font-size: 20px;
  line-height: 1.25;
}

.stats-card-head span {
  display: inline-flex;
  min-height: 28px;
  align-items: center;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(233, 173, 59, 0.16);
  color: #8a671f;
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.stats-bar-list,
.stats-region-list,
.stats-stacked-list {
  display: grid;
  gap: 11px;
}

.stats-bar-list.compact {
  gap: 9px;
}

.stats-bar-row,
.stats-region-row,
.stats-stacked-row {
  display: grid;
  align-items: center;
  gap: 12px;
  color: #34413c;
  font-size: 13.5px;
}

.stats-bar-row {
  grid-template-columns: minmax(96px, 160px) minmax(120px, 1fr) 44px;
}

.stats-region-row {
  grid-template-columns: minmax(180px, 240px) minmax(150px, 1fr) 50px;
}

.stats-stacked-row {
  grid-template-columns: minmax(190px, 260px) minmax(180px, 1fr) 64px;
}

.stats-bar-row span,
.stats-region-row span,
.stats-stacked-row span {
  min-width: 0;
  overflow: hidden;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stats-bar-row span {
  overflow: visible;
  line-height: 1.25;
  text-overflow: clip;
  white-space: normal;
}

.stats-bar-row i,
.stats-region-row i,
.stats-stacked-row i {
  position: relative;
  height: 12px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(6, 64, 43, 0.10);
}

.stats-bar-row i::after,
.stats-region-row i::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--value);
  border-radius: inherit;
  background: linear-gradient(90deg, #06402B, #1d8a6c);
}

.stats-region-row i::after {
  background: linear-gradient(90deg, #0b6b51, #e9ad3b);
}

.stats-bar-row strong,
.stats-region-row strong,
.stats-stacked-row strong {
  color: #06402B;
  font-weight: 900;
  text-align: right;
}

.stats-donut-wrap {
  display: grid;
  grid-template-columns: 168px minmax(0, 1fr);
  gap: 24px;
  align-items: center;
  min-height: 202px;
}

.stats-donut-wrap.small {
  grid-template-columns: 136px minmax(0, 1fr);
  min-height: 170px;
}

.stats-donut {
  position: relative;
  width: 168px;
  height: 168px;
  border-radius: 50%;
  background: conic-gradient(var(--c1) 0 calc(var(--a) * 1%), var(--c2) 0 100%);
  box-shadow: inset 0 0 0 1px rgba(6, 64, 43, 0.06), 0 16px 34px rgba(6, 64, 43, 0.08);
}

.stats-donut-wrap.small .stats-donut {
  width: 136px;
  height: 136px;
}

.stats-donut::after {
  content: "";
  position: absolute;
  inset: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(6, 64, 43, 0.08);
}

.stats-donut span {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #06402B;
  font-size: 20px;
  font-weight: 900;
}

.stats-legend {
  display: grid;
  gap: 12px;
}

.stats-legend span,
.stats-stack-legend span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: #3f4b47;
  font-size: 14px;
  font-weight: 800;
}

.stats-legend i,
.stats-stack-legend i {
  width: 11px;
  height: 11px;
  margin-right: auto;
  border-radius: 50%;
  background: var(--color);
}

.stats-legend strong {
  color: #06402B;
  font-weight: 900;
}

.stats-wide-chart {
  margin-top: 16px;
}

.stats-stack-legend {
  display: flex;
  justify-content: flex-end;
  gap: 18px;
  margin: -4px 0 16px;
}

.stats-stack-legend span {
  justify-content: flex-start;
}

.stats-stack-legend i.urban { --color: #0b6b51; }
.stats-stack-legend i.rural { --color: #e9ad3b; }

.stats-stacked-row i {
  display: flex;
  background: rgba(6, 64, 43, 0.08);
}

.stats-stacked-row b {
  display: block;
  height: 100%;
}

.stats-stacked-row b.urban {
  width: var(--urban);
  background: #0b6b51;
}

.stats-stacked-row b.rural {
  width: var(--rural);
  background: #e9ad3b;
}

.resource-page .demo-toggle {
  display: none;
}

.resource-page .footer-col a[href="/Propo3/services/"],
.resource-page .footer-col a[href="/Propo3/programmes-sociaux/"] {
  color: #fff;
}

@media (max-width: 1120px) {
  .resource-layout {
    grid-template-columns: 244px minmax(0, 1fr);
    gap: 22px;
  }

  .programmes-card-grid,
  .resource-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 1000px) {
  .resource-page .resource-hero-block {
    min-height: 0 !important;
  }

  .resource-page-head {
    padding: 36px 0 52px;
  }

  .resource-page-head .content,
  .resource-section-head,
  .resource-detail-title {
    width: calc(100% - 40px);
    max-width: none;
  }

  .resource-detail-list .content {
    width: calc(100% - 40px);
  }

  .resource-layout {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .resource-aside {
    position: relative;
    top: auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .resource-section-head,
  .resource-detail-title {
    width: auto;
  }

  .resource-page-head h1 {
    font-size: 34px;
  }

  .resource-page-head span,
  .resource-section-head p,
  .resource-detail-title p {
    font-size: 15.5px;
  }

  .resource-detail-grid {
    grid-template-columns: 1fr;
  }

  .resource-tabs-shell {
    grid-template-columns: 1fr;
  }

  .resource-tab-list {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 8px;
    -webkit-overflow-scrolling: touch;
  }

  .resource-tab-button {
    flex: 0 0 min(230px, 78vw);
  }

  .resource-tabs-card,
  .resource-faqs {
    padding: 24px;
  }

  .resource-faqs,
  .resource-related {
    margin-top: 4px;
  }
}

@media (max-width: 720px) {
  .resource-overview {
    padding-top: 54px;
  }

  .services-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 14px;
  }

  .resource-card-grid,
  .programmes-card-grid {
    grid-template-columns: 1fr;
  }

  .resource-card {
    min-height: 0;
  }

  .resource-detail-list {
    padding: 34px 0 72px;
  }

  .resource-breadcrumb {
    margin-bottom: 18px;
    overflow-x: auto;
    white-space: nowrap;
  }

  .resource-aside {
    grid-template-columns: 1fr;
  }

  .resource-detail {
    padding: 24px 18px;
    border-radius: 10px;
  }

  .resource-detail-title h2 {
    font-size: 26px;
  }

  .resource-info-box {
    padding: 18px;
  }

  .resource-tabs-card,
  .resource-faqs {
    padding: 20px 18px;
  }

  .resource-tab-panel {
    padding: 20px 18px;
  }

  .resource-tab-panel-title h3 {
    font-size: 22px;
  }

  .resource-faq-item summary {
    padding: 18px;
    font-size: 15.5px;
  }

  .resource-faq-item p {
    padding: 0 18px 18px;
  }

  .resource-table {
    min-width: 560px;
  }
}

@media (max-width: 1120px) {
  .info-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .info-side-panel {
    position: relative;
    top: auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .info-update-grid,
  .info-dashboard-grid,
  .info-doc-grid,
  .info-compare-grid,
  .info-compare-grid.three,
  .info-cycle-grid,
  .ise-flow,
  .ise-variable-page,
  .ise-faq-section .info-disclosure-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .stats-kpi-grid,
  .stats-grid-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .stats-grid-2 {
    grid-template-columns: minmax(0, 1fr);
  }

  .ise-faq-section {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 820px) {
  .info-stepper,
  .info-equation {
    grid-template-columns: 1fr;
  }

  .info-equation i {
    min-height: 16px;
    font-size: 24px;
  }

  .info-bar-list div {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .info-bar-list strong {
    text-align: left;
  }

  .stats-region-row,
  .stats-stacked-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }

  .stats-region-row strong,
  .stats-stacked-row strong {
    text-align: left;
  }
}

@media (max-width: 720px) {
  .info-lead-card,
  .info-section-card,
  .info-section-card.compact {
    padding: 22px 18px;
  }

  .info-lead-card h2 {
    font-size: 27px;
  }

  .info-section-card .resource-section-head h2 {
    font-size: 25px;
  }

  .info-side-panel,
  .info-update-grid,
  .info-dashboard-grid,
  .info-doc-grid,
  .info-compare-grid,
  .info-compare-grid.three,
  .info-cycle-grid,
  .ise-flow,
  .ise-variable-page,
  .ise-faq-section .info-disclosure-list {
    grid-template-columns: 1fr;
  }

  .info-layout-indice .info-lead-card h2 {
    font-size: 28px;
  }

  .ise-flow article,
  .ise-variable-card {
    min-height: 0;
  }

  .ise-variable-page:last-child,
  .ise-modal-grid,
  .ise-modal-group-grid {
    grid-template-columns: 1fr;
  }

  .ise-modal {
    padding: 18px;
  }

  .ise-modal-panel {
    width: calc(100vw - 28px);
    max-height: calc(100vh - 36px);
    padding: 24px 18px;
  }

  .ise-modal-panel h2 {
    margin-right: 48px;
    font-size: 24px;
  }

  .stats-panel {
    padding: 22px 18px;
  }

  .stats-kpi-grid,
  .stats-grid-3 {
    grid-template-columns: 1fr;
  }

  .stats-kpi {
    min-height: 132px;
  }

  .stats-kpi strong {
    font-size: 36px;
  }

  .stats-card-head {
    flex-direction: column;
    gap: 8px;
  }

  .stats-bar-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }

  .stats-bar-row strong {
    text-align: left;
  }

  .stats-donut-wrap,
  .stats-donut-wrap.small {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }

  .stats-legend {
    width: 100%;
  }

  .stats-stack-legend {
    justify-content: flex-start;
  }

  .info-quick-links {
    gap: 8px;
  }

  .info-quick-links a {
    flex: 1 1 auto;
    justify-content: center;
  }
}

html[lang="fr"] body,
html[lang="fr"] body :where(h1, h2, h3, h4, h5, h6, p, a, button, span, li, td, th, label, input, textarea, select, strong, em, small, div) {
  font-family: 'Roboto', 'Almarai', system-ui, -apple-system, Segoe UI, sans-serif !important;
}

html[lang="fr"] .title-ar,
html[lang="fr"] .title-ar *,
html[lang="fr"] .lang,
html[lang="fr"] .lang *,
html[lang="fr"] [lang="ar"],
html[lang="fr"] [lang="ar"] *,
html[lang="fr"] [dir="rtl"],
html[lang="fr"] [dir="rtl"] *,
html[lang="fr"] .font-almarai {
  font-family: 'Almarai', 'Roboto', system-ui, sans-serif !important;
}

.explainer-wrap {
  height: auto !important;
  min-height: 0 !important;
  padding: 56px 0 64px !important;
}

.explainer-wrap > section {
  padding: 0 !important;
}

.explainer-wrap .explainer-head {
  gap: 28px !important;
  margin-bottom: 44px !important;
}

.explainer-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  width: 100%;
}

.explainer-title-row h2 {
  margin: 0 !important;
}

.explainer-title-row .explainer-more-link {
  flex: 0 0 auto;
  margin-top: 0;
}

.explainer-intro-actions {
  display: block;
}

.explainer-col .variables-carousel {
  align-self: center;
}

.explainer-col .variables-carousel + .variables-link {
  margin-top: 16px;
}

/* =================================================================
   ====== AI CHATBOT DEMO ===========================================
   ================================================================= */
.ai-chat-widget,
.ai-chat-widget * {
  box-sizing: border-box;
}

.ai-chat-widget {
  position: fixed;
  right: 28px;
  bottom: 28px;
  width: 58px;
  height: 58px;
  padding: 0 !important;
  z-index: 1200;
  font-family: 'Roboto', 'Almarai', system-ui, -apple-system, Segoe UI, sans-serif;
}

[dir="rtl"] .ai-chat-widget {
  right: auto;
  left: 28px;
  font-family: 'Almarai', 'Roboto', system-ui, -apple-system, Segoe UI, sans-serif;
}

.ai-chat-bubble {
  position: relative;
  width: 58px;
  height: 58px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.32);
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 24%, rgba(233, 173, 59, 0.28), transparent 34%),
    linear-gradient(145deg, #0a7653 0%, #06402B 74%);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 20px 42px rgba(6, 64, 43, 0.32), 0 8px 18px rgba(0, 0, 0, 0.18);
  transition: transform 0.2s ease, opacity 0.18s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.ai-chat-bubble:hover {
  transform: translateY(-3px);
  box-shadow: 0 24px 48px rgba(6, 64, 43, 0.38), 0 10px 22px rgba(0, 0, 0, 0.2);
}

.ai-chat-bubble:focus-visible {
  outline: 2px solid #e9ad3b;
  outline-offset: 4px;
}

.ai-chat-bubble svg {
  width: 29px;
  height: 29px;
}

.ai-chat-widget.open .ai-chat-bubble {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: scale(0.94);
}

.ai-chat-pulse {
  position: absolute;
  top: 8px;
  right: 9px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #e9ad3b;
  box-shadow: 0 0 0 5px rgba(233, 173, 59, 0.2);
}

.ai-chat-panel {
  position: absolute;
  right: 0;
  bottom: 76px;
  width: min(372px, calc(100vw - 32px));
  overflow: hidden;
  border: 1px solid rgba(6, 64, 43, 0.14);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 30px 72px rgba(6, 64, 43, 0.26), 0 10px 26px rgba(0, 0, 0, 0.16);
}

[dir="rtl"] .ai-chat-panel {
  right: auto;
  left: 0;
}

.ai-chat-header {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 34px;
  align-items: center;
  gap: 12px;
  padding: 16px;
  color: #fff;
  background:
    linear-gradient(135deg, rgba(233, 173, 59, 0.2), transparent 38%),
    linear-gradient(145deg, #07543b 0%, #063824 100%);
}

.ai-chat-avatar {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.12);
  color: #e9ad3b;
}

.ai-chat-avatar svg {
  width: 29px;
  height: 29px;
}

.ai-chat-header strong,
.ai-chat-header span {
  display: block;
}

.ai-chat-header strong {
  font-size: 16px;
  line-height: 1.2;
}

.ai-chat-header span {
  margin-top: 3px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.72);
}

.ai-chat-close {
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.ai-chat-close:hover,
.ai-chat-close:focus-visible {
  background: rgba(255, 255, 255, 0.16);
}

.ai-chat-close svg {
  width: 18px;
  height: 18px;
}

.ai-chat-messages {
  max-height: min(360px, 46vh);
  padding: 16px;
  overflow-y: auto;
  background:
    radial-gradient(circle at top right, rgba(233, 173, 59, 0.08), transparent 30%),
    #f6faf7;
}

.ai-chat-message {
  display: flex;
  margin-bottom: 10px;
}

.ai-chat-message.user {
  justify-content: flex-end;
}

[dir="rtl"] .ai-chat-message.user {
  justify-content: flex-start;
}

.ai-chat-message-bubble {
  max-width: 88%;
  padding: 12px 13px;
  border-radius: 14px;
  background: #fff;
  color: #27362f;
  border: 1px solid rgba(6, 64, 43, 0.1);
  box-shadow: 0 8px 22px rgba(6, 64, 43, 0.08);
}

.ai-chat-message.user .ai-chat-message-bubble {
  background: #06402B;
  color: #fff;
  border-color: #06402B;
}

.ai-chat-message-bubble p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.55;
}

.ai-chat-message-bubble a {
  display: inline-flex;
  align-items: center;
  margin-top: 10px;
  font-size: 13px;
  font-weight: 800;
  color: #07543b;
}

.ai-chat-message-bubble a::after {
  content: "";
  width: 14px;
  height: 14px;
  margin-left: 7px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 12h12M13 6l6 6-6 6' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 12h12M13 6l6 6-6 6' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

[dir="rtl"] .ai-chat-message-bubble a::after {
  margin-left: 0;
  margin-right: 7px;
  transform: rotate(180deg);
}

.ai-chat-typing .ai-chat-message-bubble {
  display: inline-flex;
  gap: 5px;
  padding: 14px 15px;
}

.ai-chat-typing span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #7d958b;
  animation: ai-chat-dot 0.9s ease-in-out infinite;
}

.ai-chat-typing span:nth-child(2) { animation-delay: 0.12s; }
.ai-chat-typing span:nth-child(3) { animation-delay: 0.24s; }

@keyframes ai-chat-dot {
  0%, 80%, 100% { transform: translateY(0); opacity: 0.5; }
  40% { transform: translateY(-4px); opacity: 1; }
}

.ai-chat-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 42px;
  gap: 8px;
  padding: 14px 16px 10px;
  background: #fff;
}

.ai-chat-form input {
  width: 100%;
  height: 42px;
  border: 1px solid rgba(6, 64, 43, 0.16);
  border-radius: 999px;
  padding: 0 14px;
  color: #17241f;
  background: #fbfdfb;
  font-size: 14px;
  outline: none;
}

.ai-chat-form input:focus {
  border-color: #0a7653;
  box-shadow: 0 0 0 4px rgba(10, 118, 83, 0.12);
}

.ai-chat-form button {
  width: 42px;
  height: 42px;
  border: none;
  border-radius: 50%;
  background: #06402B;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.18s ease, transform 0.18s ease;
}

.ai-chat-form button:hover,
.ai-chat-form button:focus-visible {
  transform: translateY(-1px);
  background: #0a5436;
}

.ai-chat-form svg {
  width: 20px;
  height: 20px;
}

.ai-chat-note {
  margin: 0;
  padding: 0 16px 16px;
  background: #fff;
  color: #718079;
  font-size: 11.5px;
  line-height: 1.45;
}

@media (max-width: 640px) {
  .ai-chat-widget {
    right: 16px;
    bottom: 16px;
    width: 54px;
    height: 54px;
  }

  [dir="rtl"] .ai-chat-widget {
    right: auto;
    left: 16px;
  }

  .ai-chat-bubble {
    width: 54px;
    height: 54px;
  }

  .ai-chat-panel {
    right: 0;
    bottom: 70px;
    width: calc(100vw - 32px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ai-chat-bubble,
  .ai-chat-form button {
    transition: none !important;
  }

  .ai-chat-typing span {
    animation: none !important;
  }
}

@media (max-width: 720px) {
  .explainer-title-row {
    align-items: flex-start;
    flex-direction: column;
    gap: 16px;
  }

  .explainer-title-row .explainer-more-link {
    align-self: flex-start;
  }

  .variables-carousel {
    width: min(454px, 100%);
  }

  .variables-page {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .variables-page .variable {
    width: auto;
    min-width: 0;
  }
}

/* ======================================================================
   INNER PAGES — PHONE (≤ 600 px)
   Only phone-specific overrides. Desktop layout is completely untouched.
   ====================================================================== */
@media (max-width: 600px) {

  /* ---- Nav: compact logo for small phones ---- */
  .mainnav {
    height: 64px;
  }

  .mainnav .logo-block {
    height: 46px;
    gap: 8px;
    flex-shrink: 1;
    min-width: 0;
  }

  .mainnav .logo-block .crest {
    height: 40px;
  }

  .mainnav .logo-block .divider {
    display: none;
  }

  .mainnav .logo-block .title-stack {
    min-width: 0;
    max-width: 145px;
  }

  .mainnav .logo-block .title-ar,
  .mainnav .logo-block .title-fr {
    font-size: 11px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* ---- Resource hero-block: dark green (same as main hero) ---- */
  .resource-page .resource-hero-block {
    background: #06402B !important;
  }

  /* ---- Resource page head section ---- */
  .resource-page-head {
    padding: 20px 0 28px;
  }

  /* Hide decorative ornament — too wide for phone viewports */
  .resource-page .resource-page-head::after {
    display: none;
  }

  .resource-page-head p {
    font-size: 12px;
    margin-bottom: 8px;
    letter-spacing: 0.05em;
  }

  .resource-page-head h1 {
    font-size: 22px;
    line-height: 1.28;
  }

  .resource-page-head span {
    font-size: 14px;
    line-height: 1.62;
    margin-top: 10px;
  }

  /* ---- Section / detail headings ---- */
  .resource-section-head h2 {
    font-size: 21px;
    line-height: 1.28;
  }

  .resource-section-head p {
    font-size: 14.5px;
  }

  .resource-detail-title h2 {
    font-size: 21px;
  }

  /* ---- Overview section vertical spacing ---- */
  .resource-overview {
    padding: 30px 0 16px;
  }

  /* ---- Card grids → horizontal sliders (snap-scroll) ---- */
  .resource-card-grid,
  .programmes-card-grid {
    display: flex !important;
    grid-template-columns: none !important;
    overflow-x: auto;
    overflow-y: hidden;
    gap: 12px;
    padding: 4px 0 20px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .resource-card-grid::-webkit-scrollbar,
  .programmes-card-grid::-webkit-scrollbar {
    display: none;
  }

  /* 82 % width: shows one full card + peek of the next */
  .resource-card-grid > *,
  .programmes-card-grid > * {
    flex: 0 0 82%;
    max-width: 310px;
    scroll-snap-align: start;
    min-height: 0 !important;
    min-width: 0;
  }

  /* ---- Detail list section ---- */
  .resource-detail-list {
    padding: 20px 0 52px;
  }

  /* Override the 2-class rule that adds 52px top padding on service/detail pages */
  .resource-detail-page .resource-detail-list {
    padding-top: 16px;
  }

  .resource-detail {
    padding: 20px 16px;
  }

  /* ---- Info boxes ---- */
  .resource-info-box {
    padding: 16px 14px;
  }

  /* ---- FAQ heading inside resource pages ---- */
  .resource-faqs .resource-section-head h2 {
    font-size: 21px;
  }

  /* ---- Tabs: full-width stacked buttons on mobile ---- */
  .resource-tab-list {
    flex-direction: column;
    overflow-x: visible;
  }

  .resource-tab-button {
    flex: 0 0 auto;
    width: 100%;
    text-align: center;
    justify-content: center;
  }

  /* ================================================================
     INNER PAGE CONTENT GRIDS → horizontal sliders
     Covers: annonces, rescoring, textes-juridiques, statistiques,
             indice-socio-economique pages
     ================================================================ */

  .info-update-grid,
  .info-cycle-grid,
  .info-doc-grid,
  .info-dashboard-grid,
  .stats-kpi-grid,
  .stats-grid-3,
  .ise-flow {
    display: flex !important;
    grid-template-columns: none !important;
    overflow-x: auto;
    overflow-y: hidden;
    gap: 12px;
    padding: 4px 0 18px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .info-update-grid::-webkit-scrollbar,
  .info-cycle-grid::-webkit-scrollbar,
  .info-doc-grid::-webkit-scrollbar,
  .info-dashboard-grid::-webkit-scrollbar,
  .stats-kpi-grid::-webkit-scrollbar,
  .stats-grid-3::-webkit-scrollbar,
  .ise-flow::-webkit-scrollbar { display: none; }

  /* Content cards: 78% — one full + clear peek of next */
  .info-update-grid > *,
  .info-cycle-grid > *,
  .info-doc-grid > * {
    flex: 0 0 78%;
    max-width: 290px;
    scroll-snap-align: start;
    min-height: 0 !important;
    min-width: 0;
  }

  /* Compact metric cards: show a bit more peek */
  .info-dashboard-grid > *,
  .stats-kpi-grid > *,
  .stats-grid-3 > *,
  .ise-flow > * {
    flex: 0 0 72%;
    max-width: 260px;
    scroll-snap-align: start;
    min-height: 0 !important;
    min-width: 0;
  }

  /* Fix items that had fixed min-height for desktop */
  .info-update-card,
  .info-dashboard-grid article,
  .stats-kpi,
  .ise-flow article {
    min-height: 0;
  }

  /* ---- Inner-page: viewport-anchored width constraints ---- */

  .resource-detail-list .content,
  .info-detail-list .content {
    width: calc(100vw - 32px) !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }

  .resource-aside {
    grid-template-columns: 1fr;
  }

  .resource-detail,
  .resource-tabs-card,
  .resource-faqs,
  .resource-related,
  .info-section-card {
    max-width: 100%;
    overflow: hidden;
    box-sizing: border-box;
  }

  .resource-faq-item summary span {
    min-width: 0;
    overflow-wrap: break-word;
    word-break: break-word;
  }

  .resource-detail-title h2,
  .resource-section-head h2,
  .resource-tabs-head h2,
  .resource-tab-panel-title h3 {
    overflow-wrap: break-word;
    word-break: break-word;
    max-width: 100%;
  }

  .resource-detail-title p,
  .resource-info-box li,
  .resource-note-card p,
  .resource-help-card p,
  .resource-faq-item p {
    overflow-wrap: break-word;
    word-break: break-word;
  }

  .resource-info-box ul,
  .resource-info-box ol {
    padding-left: 18px;
  }

  .resource-tabs-card,
  .resource-faqs {
    padding: 18px 14px;
  }

  .resource-tab-panel {
    padding: 16px 14px;
  }

  .resource-table {
    min-width: 420px;
  }

  .resource-breadcrumb {
    overflow-x: auto;
    white-space: nowrap;
    max-width: 100%;
  }
}

/* =======================================================================
   PROPO3 MOBILE PARITY FIXES — appended last so they win the cascade
   ======================================================================= */

/* 1. Hide "Compte du ménage" on mobile.
      The global rule at line 2290-2305 uses .btn[class*="on-green-solid"]
      with display:inline-flex !important and specificity (0,5,0).
      We need the same selector + !important + later position to beat it. */
@media (max-width: 900px) {
  .hero-block .mainnav .nav-right .btn[class*="on-green-solid"],
  .hero-block .mainnav .nav-right a.btn {
    display: none !important;
  }
}

/* 2. Hero media is off-screen on mobile.
      .hero-block .hero-media has position:absolute; left:690px (desktop canvas).
      The existing ≤1000px override (line 3902) adds width:100% but never
      resets position/left, so the media stays 690px off the right edge.
      The slide visibility system (opacity 0→1) at line 3683 is already correct —
      we only need to bring the container back into the flow. */
@media (max-width: 1000px) {
  .hero-block .hero-media {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    right: auto !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    overflow: visible !important;
  }
}

/* 3. ANNONCES slider — fix dual-axis scroll issue.
      Line 3394 sets overflow-y:visible !important on .announcement-grid.
      When overflow-x:auto + overflow-y:visible coexist, CSS spec forces both
      to auto, making iOS treat swipes as vertical page scroll instead of
      horizontal card scroll. Override with hidden to create a proper x-only
      scroll container. Same pattern as the homepage fix. */
@media (max-width: 900px) {
  .announcement-grid {
    overflow-y: hidden !important;
  }
}

/* 4. SERVICES cards cropped from top.
      Line 3642 sets padding:24px 16px !important on .services-grid.
      The service card icon is position:absolute; top:-32px — it sits 32px
      above the card top edge. With only 24px top padding, 8px of the icon
      is outside the scroll container's padding box and gets clipped.
      42px gives 10px of clearance (same as the homepage fix). */
@media (max-width: 900px) {
  .services-grid {
    padding-top: 42px !important;
  }
}

/* 5. Variables carousel — fix hard-coded 221px column widths and 151px height.
      .variables-page { grid-template-columns: 221px 221px } = 454px total,
      wider than any phone. .variable { width: 221px; height: 151px } also
      hard-coded. Must switch to fluid columns and auto height. */
@media (max-width: 600px) {
  .variables-carousel {
    width: 100% !important;
    max-width: 100% !important;
  }

  .variables-viewport {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }

  .variables-page {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  .variables-page .variable {
    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 120px !important;
    padding: 12px 10px !important;
  }

  .variables-page .variable span {
    max-width: 100% !important;
    font-size: 11px !important;
  }
}

/* 6. ANNONCES slider — ensure display:flex wins over line 2318's display:grid
      and fix scroll-snap-align from center to start for proper snapping. */
@media (max-width: 900px) {
  .announcement-grid {
    display: flex !important;
    overflow-y: hidden !important;
  }
  .announcement-card {
    scroll-snap-align: start !important;
  }
}

/* 7. ANNONCES: the global rule "section .announcements { padding: 0 }"
      (line 2314) overrides the ≤600px fix because both have specificity
      (0-1-1) and that rule comes later.
      Propo3's announcements uses background:transparent (no green box),
      so we just need proper padding + fluid width to prevent clipping. */
@media (max-width: 600px) {
  section .announcements {
    width: calc(100vw - 32px) !important;
    max-width: 100% !important;
    padding: 20px 16px !important;
    border-radius: 0 !important;
    clip-path: none !important;
    overflow: visible !important;
    height: auto !important;
    margin: 0 auto !important;
    box-sizing: border-box;
  }
}

/* 4. COMPRENDRE section: the global rule at line 2803 sets
      width:1159px !important on .explainer-wrap .explainer-head —
      overriding the fix added inside the ≤600px block (which comes
      BEFORE line 2803 in the file and therefore loses).
      This block is appended last so it wins. */
@media (max-width: 600px) {
  .explainer-wrap .explainer-head {
    width: auto !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box;
  }

  .explainer-wrap .content {
    width: calc(100vw - 32px) !important;
    max-width: 100% !important;
    box-sizing: border-box;
    padding: 0 16px !important;
  }

  .explainer-head h2 {
    overflow-wrap: break-word !important;
    word-break: break-word !important;
    max-width: 100% !important;
  }

  .explainer-head p {
    width: auto !important;
    max-width: 100% !important;
    overflow-wrap: break-word !important;
  }

  .explainer-cols,
  .explainer-col,
  .explainer-col-title,
  .steps,
  .step h3,
  .step p {
    max-width: 100% !important;
    overflow-wrap: break-word;
    word-break: break-word;
  }
}