/* ============================================================
   SMC SALAMA — Société Marocaine des Carburants
   Direction artistique : BLANC + ROUGE, éditorial premium
   Brand red: #D2141E
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,500;12..96,600;12..96,700;12..96,800&family=Hanken+Grotesk:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600;700&family=Reem+Kufi:wght@400;500;700&display=swap');

/* ---------- Tokens ---------- */
:root {
  /* Brand */
  --red:       #D2141E;
  --red-600:   #b8111a;
  --red-700:   #9e0d14;
  --red-900:   #7d0a10;
  --red-50:    #fdeced;
  --red-100:   #fadcde;
  --red-soft:  rgba(210,20,30,0.10);

  /* Neutrals (light) */
  --paper:     #ffffff;
  --paper-2:   #f7f5f1;   /* warm off-white alt */
  --paper-3:   #efece6;
  --ink:       #14141a;   /* headings / near-black */
  --ink-soft:  #2c2c34;
  --body:      #55555f;   /* body text */
  --muted:     #8a8a93;

  --line:      rgba(20,20,26,0.12);
  --line-2:    rgba(20,20,26,0.07);

  /* Type */
  --font-display: 'Bricolage Grotesque', system-ui, sans-serif;
  --font-body:    'Hanken Grotesk', system-ui, sans-serif;
  --font-read:    'Hanken Grotesk', system-ui, sans-serif;
  --font-ar:      'Reem Kufi', 'Hanken Grotesk', sans-serif;

  /* Layout */
  --container: 1560px;
  --gutter: clamp(1.25rem, 5vw, 4rem);
  --space-section: clamp(3rem, 5.5vw, 5.5rem);
  --radius: 14px;
  --radius-lg: 28px;
  --radius-xl: 40px;

  /* Motion */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);

  /* Z */
  --z-birds: 1;
  --z-content: 5;
  --z-nav: 60;
  --z-menu: 80;
  --z-cursor: 95;
  --z-loader: 100;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){ html { scroll-behavior:auto; } }

body {
  font-family: var(--font-body);
  background: var(--paper);
  color: var(--body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
body.lock { overflow: hidden; }

img, video, svg { display:block; max-width:100%; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
ul { list-style: none; }
::selection { background: var(--red); color:#fff; }
:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; border-radius: 4px; }

/* ---------- Typography ---------- */
h1,h2,h3,h4 { font-family: var(--font-display); color: var(--ink); font-weight: 700; line-height: 1.02; letter-spacing: -0.025em; }
.display {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.2rem, 5.4vw, 4.6rem);
  line-height: 0.98;
  letter-spacing: -0.04em;
  color: var(--ink);
}
.h-xl { font-size: clamp(1.7rem, 3.4vw, 2.9rem); font-weight: 700; letter-spacing:-0.035em; }
.h-lg { font-size: clamp(1.45rem, 2.6vw, 2.2rem); font-weight: 700; letter-spacing:-0.03em; }
.h-md { font-size: clamp(1.25rem, 2.2vw, 1.7rem); }
.lead { font-size: clamp(1rem, 1.25vw, 1.18rem); color: var(--ink-soft); line-height: 1.6; }
/* Système à 2 polices : titres en Bricolage Grotesque, tout le reste (corps + UI) en Inter */
p, .lead { font-family: var(--font-read); }
body[data-page="accueil"] .lead,
body[data-page="apropos"] .lead,
body[data-page="apropos"] .text-muted,
body[data-page="accueil"] .cta-full__inner p { font-weight: 300; }
.text-muted { color: var(--muted); }
.red { color: var(--red); }
.eyebrow {
  font-family: var(--font-body);
  font-size: 0.78rem; font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--red);
  display: inline-block; margin-bottom: 0.85rem;
}
.eyebrow--center { display:block; text-align:center; }

/* ---------- Layout ---------- */
.container { width:100%; max-width: var(--container); margin-inline:auto; padding-inline: var(--gutter); }
.section { padding-block: var(--space-section); position:relative; }
.section-tight { padding-block: clamp(2.2rem,4vw,3.5rem); }
.bg-alt { background: var(--paper-2); }
main { position: relative; z-index: var(--z-content); background: var(--paper); overflow-x: clip; }
.grid { display:grid; gap: clamp(1.5rem,3vw,2.5rem); }
@media (min-width:860px){ .grid-2{grid-template-columns:1fr 1fr;} .grid-3{grid-template-columns:repeat(3,1fr);} .grid-4{grid-template-columns:repeat(4,1fr);} }
@media (max-width:859px){ .grid-3,.grid-4{grid-template-columns:1fr;} }
.section-head { max-width: 60ch; margin-bottom: clamp(1.8rem,3.5vw,3rem); }
.section-head .lead { margin-top: 1.2rem; }
.section-head.center { margin-inline:auto; text-align:center; }
.flow > * + * { margin-top: 1.2rem; }
.center{text-align:center;} .mx-auto{margin-inline:auto;}
.mt-1{margin-top:1rem;} .mt-2{margin-top:2rem;} .mt-3{margin-top:3rem;}
.maxw-50{max-width:50ch;} .maxw-60{max-width:60ch;}
.divider{height:1px;background:var(--line);border:0;}

/* ============================================================ INTRO (Awwwards-style staggered reveal) */
.intro{position:fixed;inset:0;z-index:var(--z-loader);overflow:hidden;background:var(--red);}
.intro__panels{position:absolute;inset:0;display:flex;}
.intro__panel{flex:1 0 20%;height:100%;background:var(--red);transform:translateY(0);transition:transform .75s var(--ease);}
.intro__content{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.4rem;transition:opacity .4s ease,transform .7s var(--ease);}
.intro__bird{width:clamp(130px,17vw,180px);height:auto;filter:brightness(0) invert(1);clip-path:inset(115% 0 0 0);animation:introReveal 1s var(--ease) .1s forwards;}
@keyframes introReveal{0%{clip-path:inset(115% 0 0 0);transform:translateY(16px);}100%{clip-path:inset(0 0 0 0);transform:translateY(0);}}
.intro__tag{color:rgba(255,255,255,0.92);font-family:var(--font-body);font-weight:500;letter-spacing:0.34em;text-transform:uppercase;font-size:0.7rem;opacity:0;transform:translateY(8px);animation:introFade .7s ease .55s forwards;}
@keyframes introFade{to{opacity:0.9;transform:none;}}
.intro__num{position:absolute;right:var(--gutter);bottom:1.1rem;z-index:3;color:#fff;font-family:var(--font-display);font-weight:800;font-size:clamp(3.2rem,13vw,8.5rem);letter-spacing:-0.05em;line-height:0.82;font-variant-numeric:tabular-nums;transition:opacity .4s,transform .6s var(--ease);}
.intro__num small{font-size:0.26em;vertical-align:super;opacity:0.55;margin-left:5px;}
.intro__bar{position:absolute;left:0;bottom:0;width:100%;height:2px;background:rgba(255,255,255,0.22);z-index:3;transition:opacity .4s;}
.intro__bar span{display:block;height:100%;width:0;background:#fff;transition:width .12s linear;}
/* exit: content lifts, panels slide up in sequence to reveal the hero */
.intro--out{background:transparent;}
.intro--out .intro__content{opacity:0;transform:translateY(-14px) scale(1.05);}
.intro--out .intro__num{opacity:0;transform:translateY(22px);}
.intro--out .intro__bar{opacity:0;}
.intro--out .intro__panel{transform:translateY(-100%);}
.intro--out .intro__panel:nth-child(1){transition-delay:.10s;}
.intro--out .intro__panel:nth-child(2){transition-delay:.16s;}
.intro--out .intro__panel:nth-child(3){transition-delay:.22s;}
.intro--out .intro__panel:nth-child(4){transition-delay:.28s;}
.intro--out .intro__panel:nth-child(5){transition-delay:.34s;}
@media (prefers-reduced-motion:reduce){
  .intro__bird{animation:none;clip-path:none;transform:none;}
  .intro__tag{animation:none;opacity:0.9;transform:none;}
  .intro__panel,.intro--out .intro__content{transition:none;}
}

/* ============================================================ SCROLL PROGRESS (thin editorial line) */
.scroll-progress{position:fixed;top:0;left:0;width:100%;height:2px;background:var(--red);transform:scaleX(0);transform-origin:0 50%;z-index:70;pointer-events:none;}

/* ============================================================ CURSOR */
.cursor-dot,.cursor-ring{position:fixed;top:0;left:0;pointer-events:none;z-index:var(--z-cursor);border-radius:50%;transform:translate(-50%,-50%);}
.cursor-dot{width:6px;height:6px;background:var(--red);}
.cursor-ring{width:36px;height:36px;border:1.5px solid var(--red);opacity:.6;transition:width .25s var(--ease),height .25s var(--ease),background .25s,opacity .25s;}
.cursor-ring.is-hover{width:60px;height:60px;background:var(--red-soft);opacity:1;}
@media (hover:none),(pointer:coarse){.cursor-dot,.cursor-ring{display:none;}}

/* ============================================================ BIRDS */
.birds-canvas{position:absolute;inset:0;z-index:1;pointer-events:none;}

/* ============================================================ NAV */
.nav{position:fixed;top:0;left:0;right:0;z-index:var(--z-nav);transition:background .4s var(--ease),box-shadow .4s,border-color .4s,padding .4s var(--ease);border-bottom:1px solid transparent;}
.nav__row{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding-top:3rem;padding-bottom:1.4rem;gap:2rem;}
.nav__logo{grid-column:1;justify-self:start;margin-left:4px;transform:translateY(3px);}
.nav__links{grid-column:2;justify-self:center;}
.nav__actions{grid-column:3;justify-self:end;}
.nav__burger{grid-column:3;justify-self:end;}
.nav__top-row{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-block:0.5rem;}
.nav__top{border-bottom:1px solid var(--line);transition:border-color .4s;}
.nav__sig{font-family:var(--font-body);font-size:0.68rem;letter-spacing:0.16em;text-transform:uppercase;color:var(--muted);}
.nav__social{display:flex;align-items:center;gap:0.95rem;}
.nav__social a{color:var(--ink-soft);display:inline-flex;transition:color .25s var(--ease),transform .25s var(--ease);}
.nav__social a:hover{color:var(--red);transform:translateY(-2px);}
.nav__social svg{width:16px;height:16px;}
.nav.scrolled .nav__top{display:none;}
.nav.over .nav__top{border-bottom-color:rgba(255,255,255,0.2);}
.nav.over .nav__sig{color:rgba(255,255,255,0.72);}
.nav.over .nav__social a{color:rgba(255,255,255,0.85);}
.nav.over .nav__social a:hover{color:#fff;}
@media (max-width:760px){.nav__sig{display:none;}}
section[id]{scroll-margin-top:clamp(90px,12vh,128px);}
.nav.scrolled{background:rgba(255,255,255,0.82);backdrop-filter:blur(16px) saturate(150%);-webkit-backdrop-filter:blur(16px) saturate(150%);border-bottom-color:var(--line-2);}
.nav.scrolled .nav__row{padding-block:0.85rem;}
.nav__logo img{height:62px;width:auto;transition:height .4s var(--ease),filter .3s;}
.nav.scrolled .nav__logo img{height:44px;}
.nav.over .nav__logo img{filter:brightness(0) invert(1);}
.nav__links{display:flex;align-items:center;gap:2.3rem;}
.nav__link{font-size:1.02rem;font-weight:600;color:var(--ink-soft);position:relative;padding-block:4px;transition:color .25s;}
.nav__link::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--red);transition:width .3s var(--ease);}
.nav__link:hover,.nav__link[aria-current="page"]{color:var(--ink);}
.nav__link:hover::after,.nav__link[aria-current="page"]::after{width:100%;}
/* Dropdown (Produits & Services) */
.nav__item{display:flex;align-items:center;}
.nav__item--has{position:relative;}
.nav__item--has > .nav__link{display:inline-flex;align-items:center;gap:0.28rem;}
.nav__caret{width:15px;height:15px;transition:transform .3s var(--ease);}
.nav__item--has:hover .nav__caret,.nav__item--has:focus-within .nav__caret{transform:rotate(180deg);}
.nav__drop{position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(8px);min-width:276px;background:rgba(210,20,30,0.8);backdrop-filter:blur(12px) saturate(140%);-webkit-backdrop-filter:blur(12px) saturate(140%);border-radius:16px;box-shadow:0 24px 50px -24px rgba(180,18,26,0.42);padding:0.4rem 0;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .3s var(--ease),transform .3s var(--ease);overflow:hidden;}
.nav__drop::before{content:"";position:absolute;left:0;right:0;top:-12px;height:12px;}
.nav__item--has:hover .nav__drop,.nav__item--has:focus-within .nav__drop{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0);}
.nav__dropitem{display:flex;align-items:center;gap:0.85rem;padding:0.82rem 1.5rem;font-family:var(--font-display);font-weight:600;font-size:1.02rem;letter-spacing:-0.01em;color:#fff;position:relative;transition:padding-left .35s var(--ease),background .25s;}
.nav__dropitem + .nav__dropitem{border-top:1px solid rgba(255,255,255,0.16);}
.nav__dropnum{font-family:var(--font-body);font-weight:600;font-size:0.66rem;color:rgba(255,255,255,0.55);letter-spacing:0.08em;font-variant-numeric:tabular-nums;transition:color .25s;}
.nav__droplabel{flex:1;}
.nav__dropitem svg{width:16px;height:16px;color:#fff;opacity:0;transform:translateX(-8px);transition:opacity .25s,transform .35s var(--ease);}
.nav__dropitem:hover{padding-left:1.85rem;background:rgba(255,255,255,0.08);}
.nav__dropitem:hover .nav__dropnum{color:#fff;}
.nav__dropitem:hover svg{opacity:1;transform:translateX(0);}
.nav__dropitem[aria-current="page"] .nav__dropnum{color:#fff;}
.nav__dropitem[aria-current="page"]{background:rgba(255,255,255,0.10);}
.nav__actions{display:flex;align-items:center;gap:0.7rem;}
.nav.over .nav__actions .btn--ghost{color:#fff;border-color:rgba(255,255,255,0.5);}
.nav.over .nav__actions .btn--ghost:hover{border-color:#fff;background:rgba(255,255,255,0.08);}
/* Bouton "Devenir partenaire" en contour accentué (un seul rouge dominant : le hero) */
.nav__cta--accent{border-color:var(--ink);}
.nav__cta--accent:hover{background:var(--ink);color:#fff;}
.nav.over .nav__actions .btn--ghost.nav__cta--accent{border-color:#fff;}
.nav.over .nav__actions .btn--ghost.nav__cta--accent:hover{background:#fff;color:var(--ink);}
.nav__burger{display:none;width:46px;height:46px;border:1px solid var(--line);border-radius:50%;align-items:center;justify-content:center;flex-direction:column;gap:5px;background:var(--paper);}
.nav__burger span{display:block;width:18px;height:2px;background:var(--ink);border-radius:2px;}
/* Nav over a dark video hero (top, not scrolled) */
.nav.over .nav__link{color:rgba(255,255,255,0.82);}
.nav.over .nav__link:hover,.nav.over .nav__link[aria-current="page"]{color:#fff;}
.nav.over .nav__burger{border-color:rgba(255,255,255,0.45);background:transparent;}
.nav.over .nav__burger span{background:#fff;}
@media (max-width:980px){ .nav__links{display:none;} .nav__actions{display:none;} .nav__burger{display:flex;} }

/* Mobile fullscreen menu */
.menu{position:fixed;inset:0;z-index:var(--z-menu);background:var(--red);color:#fff;display:flex;flex-direction:column;justify-content:center;padding:var(--gutter);clip-path:circle(0% at calc(100% - 46px) 46px);transition:clip-path .7s var(--ease);pointer-events:none;}
.menu.open{clip-path:circle(150% at calc(100% - 46px) 46px);pointer-events:auto;}
.menu__close{position:absolute;top:1.4rem;right:var(--gutter);width:46px;height:46px;border:1px solid rgba(255,255,255,0.4);border-radius:50%;display:grid;place-items:center;font-size:1.5rem;color:#fff;}
.menu__links{display:flex;flex-direction:column;gap:0.2rem;}
.menu__link{font-family:var(--font-display);font-weight:700;font-size:clamp(2rem,9vw,3.6rem);letter-spacing:-0.03em;color:#fff;padding-block:0.25rem;display:flex;align-items:baseline;gap:1rem;transition:transform .3s var(--ease),opacity .3s;}
.menu__link span{font-size:0.8rem;font-family:var(--font-body);opacity:.7;}
.menu__link:hover{transform:translateX(12px);opacity:.85;}
.menu__subs{display:flex;flex-wrap:wrap;gap:0.4rem 1.5rem;padding:0.35rem 0 0.7rem 2.6rem;}
.menu__sub{color:rgba(255,255,255,0.82);font-family:var(--font-display);font-weight:600;font-size:clamp(0.95rem,3.2vw,1.15rem);transition:opacity .2s,transform .25s var(--ease),color .2s;}
.menu__sub:hover{color:#fff;transform:translateX(5px);}
.menu__foot{margin-top:2.5rem;color:rgba(255,255,255,0.8);font-size:0.85rem;display:flex;gap:1.5rem;flex-wrap:wrap;}

/* ============================================================ BUTTONS */
.btn{display:inline-flex;align-items:center;gap:0.5rem;font-family:var(--font-body);font-weight:600;font-size:0.76rem;letter-spacing:0.09em;text-transform:uppercase;padding:0.62rem 1.15rem;border-radius:5px;transition:transform .35s var(--ease),background .3s,color .3s,box-shadow .3s,border-color .3s;will-change:transform;}
.btn svg{width:16px;height:16px;transition:transform .3s var(--ease);}
.btn:hover svg{transform:translateX(4px);}
.btn--primary{background:var(--red);color:#fff;}
.btn--primary:hover{background:var(--red-600);}
.btn--dark{background:var(--ink);color:#fff;}
.btn--dark:hover{background:#000;}
.btn--ghost{border:1.5px solid var(--line);color:var(--ink);}
.btn--ghost:hover{border-color:var(--ink);}
.btn--white{background:#fff;color:var(--ink);}
.btn--white:hover{background:var(--paper-2);}
.btn--onred{background:#fff;color:var(--red);}
.btn--lg{padding:0.72rem 1.3rem;font-size:0.8rem;}

/* Text link with animated arrow (for secondary / discovery actions) */
.link-arrow{display:inline-flex;align-items:center;gap:0.55rem;font-family:var(--font-display);font-weight:600;font-size:1rem;color:var(--ink);position:relative;padding-bottom:4px;}
.link-arrow::after{content:"";position:absolute;left:0;bottom:0;height:1.5px;width:100%;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease);}
.link-arrow:hover::after{transform:scaleX(1);}
.link-arrow svg{width:17px;height:17px;transition:transform .35s var(--ease);}
.link-arrow:hover svg{transform:translateX(6px);}
.link-arrow--red{color:var(--red);}
.link-arrow--white{color:#fff;}

/* ============================================================ HERO full-screen video */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden;background:#0a0809;}
.hero__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;animation:heroZoom 28s ease-in-out infinite alternate;will-change:transform;}
@keyframes heroZoom{from{transform:scale(1);}to{transform:scale(1.07);}}
@media (prefers-reduced-motion:reduce){.hero__video{animation:none;}}
.hero__scrim{position:absolute;inset:0;z-index:1;background:
  linear-gradient(to top, rgba(8,6,7,0.72) 0%, rgba(8,6,7,0.05) 50%, transparent 100%);}
.hero__content{position:relative;z-index:2;width:100%;padding-top:8rem;padding-bottom:clamp(5rem,13vh,10rem);}
.hero .eyebrow{color:#fff;}
.hero .eyebrow::before{background:#fff;}
.hero__title{color:#fff;max-width:18ch;margin:1.6rem 0 1.8rem;}
.hero__title .word{display:block;overflow:hidden;}
.hero__title em{font-style:normal;color:var(--red);}
.hero__sub{font-size:clamp(0.95rem,1.05vw,1.05rem);line-height:1.6;color:rgba(255,255,255,0.85);max-width:48ch;margin-bottom:2.4rem;text-shadow:0 1px 18px rgba(0,0,0,0.32);}
.hero__actions{display:flex;gap:1rem;flex-wrap:wrap;}
.hero .btn--ghost{color:#fff;border-color:rgba(255,255,255,0.5);}
.hero .btn--ghost:hover{border-color:#fff;background:rgba(255,255,255,0.08);}
.hero__scroll{position:absolute;right:var(--gutter);bottom:2.2rem;z-index:2;display:flex;flex-direction:column;align-items:center;gap:0.8rem;color:rgba(255,255,255,0.7);font-size:0.7rem;letter-spacing:0.25em;text-transform:uppercase;writing-mode:vertical-rl;}
.hero__scroll .line{width:1px;height:56px;background:rgba(255,255,255,0.28);position:relative;overflow:hidden;}
.hero__scroll .line::after{content:"";position:absolute;top:-56px;left:0;width:100%;height:56px;background:var(--red);animation:scrollLine 2.2s var(--ease) infinite;}
@keyframes scrollLine{0%{top:-56px}60%,100%{top:56px}}
@media (prefers-reduced-motion:reduce){.hero__scroll .line::after{animation:none;}}

/* PAGE HERO (interior) */
.phero{position:relative;overflow:hidden;padding-top:clamp(8rem,16vh,12rem);padding-bottom:clamp(2.4rem,6vw,5rem);background:var(--paper-2);isolation:isolate;}
.phero .lead{max-width:58ch;margin-top:1.4rem;}
.phero__inner{position:relative;z-index:2;}
.phero__bg{position:absolute;inset:0;z-index:0;}
.phero__bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
/* white editorial scrim → keeps dark ink text readable over the photo */
.phero__bg::after{content:"";position:absolute;inset:0;background:
  linear-gradient(to right, rgba(255,255,255,0.97) 0%, rgba(255,255,255,0.92) 38%, rgba(255,255,255,0.55) 70%, rgba(255,255,255,0.25) 100%),
  linear-gradient(to top, rgba(255,255,255,0.6), transparent 55%);}
@media (max-width:760px){
  .phero__bg::after{background:linear-gradient(to right, rgba(255,255,255,0.96), rgba(255,255,255,0.88) 60%, rgba(255,255,255,0.72));}
}

/* ============================================================ STATIONS EXPERIENCE COLLAGE */
.exp-grid{display:grid;gap:clamp(2rem,4.5vw,4rem);align-items:center;}
@media (min-width:900px){ .exp-grid{grid-template-columns:1.05fr 0.95fr;} }
.collage{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:0.85rem;aspect-ratio:1/0.94;}
.collage figure{margin:0;border-radius:20px;overflow:hidden;position:relative;background:var(--paper-2);}
.collage img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .9s var(--ease);}
.collage figure:hover img{transform:scale(1.06);}
.collage .c-main{grid-row:1 / span 2;}
.collage figcaption{position:absolute;left:13px;bottom:12px;z-index:2;font-family:var(--font-display);font-weight:600;font-size:0.7rem;letter-spacing:0.03em;color:#fff;background:rgba(8,6,7,0.42);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);padding:4px 10px;border-radius:100px;}

/* ============================================================ MARQUEE */
.marquee{overflow:hidden;border-block:1px solid var(--line);padding-block:1.5rem;display:flex;}
.marquee__track{display:flex;gap:3rem;white-space:nowrap;animation:marquee 40s linear infinite;will-change:transform;}
.marquee:hover .marquee__track{animation-play-state:paused;}
.marquee__item{font-family:var(--font-display);font-weight:700;font-size:clamp(1.05rem,2.1vw,1.7rem);color:var(--muted);display:flex;align-items:center;gap:3rem;letter-spacing:-0.02em;}
.marquee__item::after{content:"";width:9px;height:9px;border-radius:50%;background:var(--red);}
.marquee__item.is-on{color:var(--ink);}
@keyframes marquee{to{transform:translateX(-50%);}}
@media (prefers-reduced-motion:reduce){.marquee__track{animation:none;}}

/* ============================================================ STATEMENT BAND (red) */
.band-red{background:var(--red);color:#fff;}
.band-red .eyebrow{color:rgba(255,255,255,0.85);}
.band-red .eyebrow::before{background:rgba(255,255,255,0.85);}
.band-red h2{color:#fff;}
.band-red .statement{font-family:var(--font-display);font-weight:700;font-size:clamp(1.6rem,3.2vw,2.7rem);line-height:1.05;letter-spacing:-0.03em;max-width:20ch;}
.band-red .statement em{font-style:normal;color:var(--ink);}
.band-red p{color:rgba(255,255,255,0.86);}
.band-red .flow p{max-width:44ch;line-height:1.75;}

/* ============================================================ STATS */
.stats{display:grid;gap:clamp(1.5rem,3vw,2.5rem);grid-template-columns:repeat(2,1fr);}
@media (min-width:760px){.stats{grid-template-columns:repeat(4,1fr);}}
.stat{border-top:2px solid var(--ink);padding-top:1.1rem;}
.stat--onred{border-top-color:rgba(255,255,255,0.5);}
.stat__num{font-family:var(--font-display);font-weight:800;font-size:clamp(1.9rem,3.6vw,3rem);line-height:1;letter-spacing:-0.04em;color:var(--ink);font-variant-numeric:tabular-nums;}
.stat--onred .stat__num{color:#fff;}
.stat__num .unit{color:var(--red);font-size:0.42em;vertical-align:super;margin-left:2px;}
.stat--onred .stat__num .unit{color:#fff;}
.stat__label{margin-top:0.6rem;color:var(--body);font-size:0.9rem;max-width:24ch;}
.stat--onred .stat__label{color:rgba(255,255,255,0.8);}

/* Compact inline strip variant (discreet supporting band) */
.stats--strip{display:flex;flex-wrap:wrap;gap:1.3rem 0;grid-template-columns:none;}
.stats--strip .stat{flex:1 1 200px;border-top:0;border-left:1px solid var(--line);padding:0.1rem 1.4rem;}
.stat__icon{color:var(--red);margin-bottom:0.8rem;}
.stat__icon svg{width:26px;height:26px;}
.stats--strip .stat:first-child{border-left:0;padding-left:0;}
.stats--strip .stat__num{font-size:clamp(1.5rem,2.3vw,1.95rem);}
.stats--strip .stat__label{margin-top:0.35rem;font-size:0.82rem;max-width:24ch;}
@media (max-width:680px){
  .stats--strip .stat{flex:1 1 42%;border-left:0;border-top:1px solid var(--line);padding:0.7rem 0 0;}
}

/* ============================================================ CARD */
.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-lg);padding:clamp(1.7rem,3vw,2.5rem);position:relative;overflow:hidden;transition:transform .5s var(--ease),border-color .4s,box-shadow .5s;}
.card:hover{transform:translateY(-6px);border-color:transparent;box-shadow:0 30px 60px -28px rgba(20,20,26,0.22);}
.card__num{font-family:var(--font-display);font-weight:700;font-size:0.95rem;color:var(--red);letter-spacing:0.05em;}
.card__icon{width:54px;height:54px;border-radius:14px;display:grid;place-items:center;background:var(--red-50);color:var(--red);margin-bottom:1.4rem;}
.card__icon svg{width:26px;height:26px;}
.card h3{font-size:1.18rem;margin-bottom:0.55rem;}
.card p{color:var(--body);font-size:0.98rem;}
.card__glow{position:absolute;top:-40%;right:-30%;width:60%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,var(--red-soft),transparent 70%);opacity:0;transition:opacity .5s var(--ease);pointer-events:none;z-index:0;}
.card:hover .card__glow{opacity:1;}
.card > *:not(.card__glow){position:relative;z-index:1;}

/* ============================================================ PRODUCT (editorial card) */
.product{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;display:flex;flex-direction:column;transition:transform .5s var(--ease),box-shadow .5s,border-color .4s;}
.product:hover{transform:translateY(-6px);box-shadow:0 30px 60px -28px rgba(20,20,26,0.25);border-color:transparent;}
.product__img{position:relative;aspect-ratio:4/3;overflow:hidden;}
.product__img img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease);}
.product:hover .product__img img{transform:scale(1.06);}
.product__tag{position:absolute;top:1rem;left:1rem;font-size:0.72rem;letter-spacing:0.12em;text-transform:uppercase;font-weight:700;color:#fff;background:var(--red);padding:0.4rem 0.8rem;border-radius:100px;}
.product__tag--soon{background:var(--ink);}
.product__body{padding:clamp(1.4rem,2.5vw,2rem);}
.product__head{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:0.5rem;}
.product__body h3{font-size:1.3rem;}
.product__body p{color:var(--body);font-size:0.98rem;}
.product__meta{display:inline-block;margin-top:0.9rem;font-family:var(--font-display);font-weight:600;font-size:0.8rem;color:var(--red);letter-spacing:0.01em;}
.product__arrow{display:grid;place-items:center;color:var(--red);flex:none;}
.product__arrow svg{width:20px;height:20px;transition:transform .4s var(--ease);}
.product:hover .product__arrow svg{transform:translateX(6px);}

/* ============================================================ SPLIT */
.split{display:grid;gap:clamp(2rem,5vw,5rem);align-items:center;}
@media (min-width:900px){.split{grid-template-columns:1fr 1fr;} .split--media-left .split__media{order:-1;}}
.split__media{border-radius:var(--radius-lg);overflow:hidden;position:relative;aspect-ratio:4/3;}
.split__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.split__media img[data-parallax]{top:-11%;height:122%;}

/* ============================================================ TIMELINE */
.timeline{position:relative;max-width:820px;margin-inline:auto;}
.timeline::before{content:"";position:absolute;left:11px;top:0;bottom:0;width:2px;background:var(--line);}
@media (min-width:760px){.timeline::before{left:50%;}}
.tl-item{position:relative;padding-left:3rem;margin-bottom:3rem;}
@media (min-width:760px){
  .tl-item{width:50%;padding-left:0;}
  .tl-item:nth-child(odd){left:0;padding-right:3.5rem;text-align:right;}
  .tl-item:nth-child(even){left:50%;padding-left:3.5rem;}
}
.tl-dot{position:absolute;width:24px;height:24px;border-radius:50%;background:#fff;border:2px solid var(--red);display:grid;place-items:center;top:2px;left:0;}
.tl-dot::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--red);}
@media (min-width:760px){.tl-item:nth-child(odd) .tl-dot{left:auto;right:-12px;} .tl-item:nth-child(even) .tl-dot{left:-12px;}}
.tl-year{font-family:var(--font-display);font-weight:800;color:var(--red);font-size:1.5rem;}
.tl-item h3{font-size:1.25rem;margin:0.3rem 0 0.5rem;}
.tl-item p{color:var(--body);font-size:0.96rem;}

/* ============================================================ NETWORK */
.net-grid{display:grid;gap:1px;background:var(--line-2);border:1px solid var(--line-2);border-radius:var(--radius);overflow:hidden;grid-template-columns:repeat(2,1fr);}
@media (min-width:640px){.net-grid{grid-template-columns:repeat(3,1fr);}}
@media (min-width:980px){.net-grid{grid-template-columns:repeat(4,1fr);}}
.net-city{background:var(--paper);padding:1.5rem 1.3rem;transition:background .35s;}
.net-city:hover{background:var(--red-50);}
.net-city__name{font-family:var(--font-display);font-weight:700;font-size:1.05rem;color:var(--ink);display:flex;align-items:center;gap:0.5rem;}
.net-city__name svg{width:14px;height:14px;color:var(--red);flex:none;}
.net-city__region{color:var(--muted);font-size:0.78rem;margin-top:0.3rem;}

/* ============================================================ CTA BAND (red) */
.cta-band{position:relative;border-radius:var(--radius-xl);overflow:hidden;padding:clamp(2.4rem,5vw,4.2rem);background:var(--red);color:#fff;isolation:isolate;}
.cta-band--img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;}
.cta-band--img img[data-parallax]{top:-11%;height:122%;}
.cta-band--img::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(110deg,rgba(210,20,30,0.92),rgba(125,10,16,0.7));}
.cta-band h2{color:#fff;}
.cta-band .lead{color:rgba(255,255,255,0.9);}
.cta-band .eyebrow{color:rgba(255,255,255,0.9);}
.cta-band .eyebrow::before{background:rgba(255,255,255,0.9);}

/* ============================================================ UNIVERS — offer cards (numbered, editorial) */
.univers{display:grid;gap:clamp(1rem,1.8vw,1.5rem);}
@media (min-width:860px){.univers{grid-template-columns:repeat(3,1fr);}}
@media (max-width:859px){.univers{grid-template-columns:1fr;}}

.uv-card{display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;transition:transform .5s var(--ease),box-shadow .5s,border-color .3s;}
.uv-card:hover{transform:translateY(-6px);box-shadow:0 30px 60px -30px rgba(20,20,26,0.28);border-color:transparent;}
.uv-card__media{position:relative;aspect-ratio:16/10;overflow:hidden;}
.uv-card__media img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease);}
.uv-card:hover .uv-card__media img{transform:scale(1.05);}
.uv-card__tag{position:absolute;top:1rem;right:1rem;font-family:var(--font-body);font-size:0.62rem;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;padding:0.4rem 0.8rem;border-radius:100px;background:var(--red);color:#fff;white-space:nowrap;}
.uv-card__tag--soon{background:rgba(20,20,26,0.55);color:#fff;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);}
.uv-card__body{display:flex;flex-direction:column;flex:1;padding:clamp(1.4rem,2vw,1.85rem);}
.uv-card__title{font-size:clamp(1.4rem,2vw,1.8rem);margin-bottom:0.55rem;color:var(--ink);}
.uv-card__desc{font-size:0.96rem;line-height:1.6;color:var(--body);margin-bottom:1.5rem;}
.uv-card__link{margin-top:auto;font-family:var(--font-body);font-weight:600;font-size:0.85rem;color:var(--red);display:inline-flex;align-items:center;gap:0.5rem;letter-spacing:0.01em;}
.uv-card__link svg{width:17px;height:17px;transition:transform .4s var(--ease);}
.uv-card:hover .uv-card__link svg{transform:translateX(5px);}

/* ============================================================ CTA FULL — investor, photo plein cadre, collée au footer */
.cta-full{position:relative;display:flex;align-items:center;min-height:clamp(440px,50vw,660px);overflow:hidden;background:var(--paper-2);isolation:isolate;}
.cta-full__bg{position:absolute;inset:0;z-index:-2;}
.cta-full__bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 42%;transition:transform .9s var(--ease);}
.cta-full__bg img[data-parallax]{top:-9%;height:118%;}
.cta-full:hover .cta-full__bg img{transform:scale(1.04);}
/* dégradé blanc gauche → transparent droite (lisibilité du texte) */
.cta-full::after{content:"";position:absolute;inset:0;z-index:-1;background:
  linear-gradient(to right, rgba(247,245,241,0.98) 0%, rgba(247,245,241,0.94) 28%, rgba(247,245,241,0.6) 52%, rgba(247,245,241,0.12) 78%, rgba(247,245,241,0) 100%),
  linear-gradient(to top, rgba(247,245,241,0.4), transparent 45%);}
.cta-full__wrap{position:relative;z-index:1;padding-block:clamp(3.5rem,8vw,7.5rem);}
.cta-full__inner{max-width:560px;}
.cta-full__title{font-family:var(--font-display);font-weight:700;color:var(--ink);font-size:clamp(1.95rem,3.9vw,3.2rem);line-height:1.02;letter-spacing:-0.035em;margin:0.5rem 0 1.1rem;}
.cta-full__title em{font-style:normal;color:var(--red);}
.cta-full__inner p{color:var(--body);max-width:46ch;font-size:1.02rem;line-height:1.6;}
@media (max-width:760px){
  .cta-full::after{background:linear-gradient(to right, rgba(247,245,241,0.97), rgba(247,245,241,0.88) 55%, rgba(247,245,241,0.72));}
}

/* Investor CTA — light editorial variant (homepage) */
.cta-invest{display:grid;gap:0;background:var(--paper-2);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;align-items:stretch;}
@media (min-width:880px){.cta-invest{grid-template-columns:1.05fr 1fr;}}
.cta-invest__media{position:relative;min-height:230px;overflow:hidden;}
.cta-invest__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease);}
.cta-invest__media img[data-parallax]{top:-9%;height:118%;}
.cta-invest:hover .cta-invest__media img{transform:scale(1.05);}
.cta-invest__body{padding:clamp(1.8rem,3.6vw,3rem);display:flex;flex-direction:column;justify-content:center;}
.cta-invest__body p{color:var(--body);max-width:48ch;}

.step{display:flex;gap:1.4rem;padding-block:1.7rem;border-top:1px solid var(--line);}
.step__n{font-family:var(--font-display);font-weight:800;color:var(--red);font-size:1.5rem;flex:none;width:54px;}
.step h3{font-size:1.25rem;margin-bottom:0.4rem;}
.step p{color:var(--body);}

/* ============================================================ FORM */
.form{display:grid;gap:1.2rem;}
@media (min-width:640px){.form .row-2{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem;}}
.field{display:flex;flex-direction:column;gap:0.5rem;}
.field label{font-size:0.85rem;font-weight:600;color:var(--ink);}
.field label .req{color:var(--red);}
.field input,.field select,.field textarea{background:var(--paper);border:1.5px solid var(--line);border-radius:12px;padding:0.95rem 1.1rem;color:var(--ink);font-family:inherit;font-size:1rem;transition:border-color .25s,box-shadow .25s;min-height:50px;}
.field textarea{min-height:140px;resize:vertical;}
.field input::placeholder,.field textarea::placeholder{color:var(--muted);}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--red);box-shadow:0 0 0 4px var(--red-soft);}
.form__note{color:var(--muted);font-size:0.82rem;}
.form__ok{display:none;padding:1rem 1.2rem;border-radius:12px;background:var(--red-50);border:1px solid var(--red);color:var(--ink);font-size:0.95rem;}
.form__ok.show{display:block;}

.cinfo{display:flex;flex-direction:column;gap:1.6rem;}
.cinfo__item{display:flex;gap:1rem;}
.cinfo__item svg{width:22px;height:22px;color:var(--red);flex:none;margin-top:3px;}
.cinfo__item h4{font-family:var(--font-display);font-size:1rem;margin-bottom:0.2rem;color:var(--ink);}
.cinfo__item p{color:var(--body);font-size:0.96rem;}

/* ============================================================ FOOTER (deep red) */
.footer{background:var(--red-900);color:#fff;padding-top:clamp(4rem,7vw,6rem);position:relative;z-index:var(--z-content);overflow:hidden;}
.footer__top{display:grid;gap:3rem;grid-template-columns:1fr;}
@media (min-width:900px){.footer__top{grid-template-columns:1.7fr 1fr 1fr 1fr;}}
.footer__brand img{height:72px;margin-bottom:1.4rem;filter:brightness(0) invert(1);}
.footer__brand p{color:rgba(255,255,255,0.75);max-width:34ch;font-size:0.95rem;}
.footer__col h4{font-family:var(--font-display);font-weight:700;font-size:0.8rem;letter-spacing:0.16em;text-transform:uppercase;color:rgba(255,255,255,0.6);margin-bottom:1.1rem;}
.footer__col a{display:block;color:rgba(255,255,255,0.88);font-size:0.96rem;padding-block:0.4rem;transition:color .25s,padding-left .25s;}
.footer__col a:hover{color:#fff;padding-left:6px;}
.footer__wordmark{font-family:var(--font-display);font-weight:800;font-size:clamp(3.5rem,17vw,13rem);line-height:0.8;letter-spacing:-0.04em;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,0.22);text-align:center;padding-block:2.2rem 0;user-select:none;}
.footer__bottom{margin-top:clamp(2rem,4vw,3rem);border-top:1px solid rgba(255,255,255,0.18);padding-block:1.8rem;display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;color:rgba(255,255,255,0.7);font-size:0.82rem;}
.footer__social{display:flex;align-items:center;gap:1rem;}
.footer__social a{color:rgba(255,255,255,0.7);display:inline-flex;transition:color .25s var(--ease),transform .25s var(--ease);}
.footer__social a:hover{color:#fff;transform:translateY(-2px);}
.footer__social svg{width:18px;height:18px;}

/* ============================================================ REVEAL */
.reveal{opacity:0;transform:translateY(42px);}
.reveal[data-anim="left"]{transform:translateX(-58px);}
.reveal[data-anim="right"]{transform:translateX(58px);}
.reveal[data-anim="scale"]{transform:scale(0.9);}
.reveal[data-anim="clip"]{opacity:1;transform:none;clip-path:inset(0 100% 0 0);}
.no-js .reveal,.reveal.in{opacity:1;transform:none;clip-path:inset(0 0 0 0);}
.reveal-stagger > *{opacity:0;transform:translateY(30px);}
.no-js .reveal-stagger > *,.reveal-stagger.in > *{opacity:1;transform:none;}
/* CSS fallback (only when GSAP unavailable) */
.css-anim .reveal{transition:opacity .9s var(--ease),transform .9s var(--ease),clip-path 1.1s var(--ease);}
.css-anim .reveal-stagger > *{transition:opacity .8s var(--ease),transform .8s var(--ease);}
@media (prefers-reduced-motion:reduce){.reveal,.reveal-stagger > *{opacity:1!important;transform:none!important;clip-path:none!important;}}

/* ===== Decorative ambient elements (subtle + animated) ===== */
.has-deco{overflow:hidden;}
.has-deco > .container{position:relative;z-index:1;}
.deco{position:absolute;pointer-events:none;z-index:0;}
.deco-bird{width:min(48vw,560px);aspect-ratio:1;background:url('../logo/salama-mark.png') center/contain no-repeat;opacity:0.05;will-change:transform;}
.deco-bird--white{filter:brightness(0) invert(1);}
/* ===== Signature calligraphique السلامة (device de marque récurrent) ===== */
.hero__ar,.footer__ar{font-family:var(--font-ar);font-weight:700;direction:rtl;line-height:0.85;user-select:none;pointer-events:none;}
.hero__ar{position:absolute;z-index:1;right:-1.5vw;top:13%;font-size:clamp(8rem,27vw,26rem);color:rgba(255,255,255,0.055);white-space:nowrap;}
.footer__ar{text-align:center;font-size:clamp(3.2rem,14vw,10rem);color:rgba(255,255,255,0.16);padding-top:1.4rem;}
.phero::before{content:"السلامة";position:absolute;z-index:1;right:-1vw;top:6%;font-family:var(--font-ar);font-weight:700;direction:rtl;unicode-bidi:isolate;font-size:clamp(6rem,20vw,17rem);line-height:0.8;color:rgba(210,20,30,0.09);white-space:nowrap;pointer-events:none;user-select:none;}
/* ===== Lazy images : fondu doux à l'apparition =====
   On passe par une animation keyframe (et non `transition`) pour ne pas écraser
   les `transition:transform` de zoom au survol définies sur ces mêmes images. */
.img-fade{opacity:0;}
.img-fade.is-in{opacity:1;animation:imgIn .85s var(--ease);}
@keyframes imgIn{from{opacity:0;}to{opacity:1;}}
@media (prefers-reduced-motion:reduce){.img-fade{opacity:1;animation:none;}}

/* ===== Transitions de page — voile rouge SALAMA (entrée par le bas, sortie par le haut) ===== */
.pt{position:fixed;inset:0;z-index:85;background:var(--red);transform:translateY(100%);pointer-events:none;display:grid;place-items:center;will-change:transform;}
.pt--in{transform:translateY(0);transition:transform .52s var(--ease);}
.pt--instant{transform:translateY(0);transition:none;}
.pt--reveal{transform:translateY(-100%);transition:transform .72s var(--ease);}
.pt__bird{width:74px;height:74px;background:url('../logo/salama-mark.png') center/contain no-repeat;filter:brightness(0) invert(1);opacity:0;transform:scale(.82);}
.pt--in .pt__bird{opacity:1;transform:scale(1);transition:opacity .42s ease .05s,transform .5s var(--ease) .05s;}
.pt--reveal .pt__bird{opacity:0;transition:opacity .3s ease;}
@media (prefers-reduced-motion:reduce){.pt{display:none;}}

/* ===== Boutons secondaires en lien fléché (style n°5) — zones de contenu, pas le menu ===== */
.hero__actions .btn--ghost{border:none;background:none;padding:0;border-radius:0;box-shadow:none;text-transform:none;letter-spacing:0.01em;font-weight:600;font-size:0.98rem;gap:0.7rem;}
.hero__actions .btn--ghost::before{content:"\2192";display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border:1.5px solid currentColor;border-radius:50%;font-size:1.05rem;flex:none;transition:transform .3s var(--ease);}
.hero__actions .btn--ghost:hover{background:none;border-color:transparent;transform:none;}
.hero__actions .btn--ghost:hover::before{transform:translateX(4px);}
.band-red .deco-bird{right:-6%;top:4%;opacity:0.12;animation:birdFloatA 13s ease-in-out infinite;}
.seg-deco .deco-bird{left:-11%;bottom:-16%;opacity:0.055;animation:birdFloatB 17s ease-in-out infinite;}
@keyframes birdFloatA{0%,100%{transform:translateY(0) rotate(-7deg);}50%{transform:translateY(-34px) rotate(-2deg);}}
@keyframes birdFloatB{0%,100%{transform:translateY(0) rotate(6deg);}50%{transform:translateY(28px) rotate(11deg);}}
/* concentric rings with an orbiting red dot */
.deco-rings{width:190px;height:190px;border-radius:50%;border:1px solid var(--line);will-change:transform;animation:spin 16s linear infinite;}
.deco-rings::before{content:"";position:absolute;inset:-52px;border-radius:50%;border:1px solid var(--line-2);}
.deco-rings::after{content:"";position:absolute;top:-7px;left:calc(50% - 7px);width:14px;height:14px;border-radius:50%;background:var(--red);box-shadow:0 0 0 6px var(--red-soft);}
.stats-deco .deco-rings{top:10px;right:54px;}
@keyframes spin{to{transform:rotate(360deg);}}
@media (prefers-reduced-motion:reduce){.deco-bird,.deco-rings{animation:none;}}
@media (max-width:760px){ .stats-deco .deco-rings{display:none;} }

/* ===== Animated Morocco network map ===== */
.mapwrap{position:relative;aspect-ratio:1/1;width:100%;max-width:580px;margin-inline:auto;}
.mapwrap__ghost{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:800;font-size:clamp(4rem,13vw,9rem);letter-spacing:-0.04em;color:transparent;-webkit-text-stroke:1.4px rgba(20,20,26,0.05);z-index:0;pointer-events:none;}
.mapwrap__img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;z-index:1;opacity:0;transform-origin:center;animation:mapIn 1.1s var(--ease) .15s forwards;}
@keyframes mapIn{from{opacity:0;transform:scale(0.96)}to{opacity:1;transform:scale(1)}}
.mapwrap__links{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none;overflow:visible;}
.mapwrap__links line{stroke:var(--red);stroke-width:1;stroke-dasharray:4 4;opacity:0.4;stroke-dashoffset:200;animation:dash 6s linear infinite;}
@keyframes dash{to{stroke-dashoffset:0;}}
.mapwrap__pins{position:absolute;inset:0;z-index:3;}
.pin{position:absolute;transform:translate(-50%,-50%);cursor:default;}
.pin i{display:block;width:10px;height:10px;border-radius:50%;background:var(--red);position:relative;box-shadow:0 0 0 4px rgba(210,20,30,0.16);transition:transform .25s var(--ease);}
.pin i::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--red);animation:pinPulse 2.6s ease-out infinite;}
.pin:hover i{transform:scale(1.25);}
@keyframes pinPulse{0%{transform:scale(1);opacity:0.65}100%{transform:scale(3.6);opacity:0}}
.pin b{position:absolute;left:50%;top:-8px;transform:translate(-50%,-100%) translateY(4px);font-family:var(--font-display);font-size:0.72rem;font-weight:600;color:var(--ink);white-space:nowrap;background:#fff;padding:3px 8px;border-radius:7px;box-shadow:0 6px 18px rgba(20,20,26,0.14);opacity:0;transition:opacity .25s,transform .25s var(--ease);pointer-events:none;}
.pin:hover b,.pin--on b{opacity:1;transform:translate(-50%,-100%) translateY(0);}
.pin--hub i{width:14px;height:14px;background:var(--ink);box-shadow:0 0 0 5px rgba(20,20,26,0.14);}
.pin--hub i::after{background:var(--ink);}
.pin--hub b{background:var(--ink);color:#fff;}
@media (prefers-reduced-motion:reduce){.pin i::after,.mapwrap__links line,.mapwrap__svg path{animation:none;}.mapwrap__svg path{opacity:1;}}

.map-stats{display:flex;gap:2.2rem;margin-top:1.7rem;flex-wrap:wrap;}
.map-stats div{display:flex;flex-direction:column;}
.map-stats strong{font-family:var(--font-display);font-weight:800;font-size:1.7rem;color:var(--ink);line-height:1;font-variant-numeric:tabular-nums;}
.map-stats strong em{font-style:normal;color:var(--red);font-size:0.5em;vertical-align:super;margin-left:1px;}
.map-stats span{font-size:0.82rem;color:var(--muted);margin-top:0.35rem;}

/* ===== Big ghost text scrolling behind sections ===== */
.bgtext{position:absolute;top:50%;left:0;width:100%;transform:translateY(-50%);z-index:0;pointer-events:none;display:flex;overflow:hidden;}
.bgtext__track{display:flex;white-space:nowrap;font-family:var(--font-display);font-weight:800;font-size:clamp(4rem,15vw,14rem);line-height:0.9;letter-spacing:-0.045em;color:transparent;-webkit-text-stroke:1.5px rgba(20,20,26,0.09);will-change:transform;animation:marquee 48s linear infinite;}
.bgtext__track span{padding-right:3.5rem;}
.bgtext--rev .bgtext__track{animation-direction:reverse;animation-duration:60s;}
.band-red .bgtext__track{-webkit-text-stroke-color:rgba(255,255,255,0.15);}
@media (prefers-reduced-motion:reduce){.bgtext__track{animation:none;}}

/* ===== PAGE HERO — bandeau, image discrète + ombre rouge (façon Petrom) ===== */
.phero2{position:relative;overflow:hidden;min-height:clamp(420px,58vh,600px);display:flex;align-items:center;text-align:center;background:#3a0c10;isolation:isolate;}
.phero2__bg{position:absolute;inset:0;z-index:0;}
.phero2__bg img{width:100%;height:100%;object-fit:cover;animation:heroZoom 30s ease-in-out infinite alternate;will-change:transform;}
.phero2__scrim{position:absolute;inset:0;z-index:1;background:
  linear-gradient(180deg, rgba(125,10,16,0.5) 0%, rgba(40,6,8,0.84) 100%),
  radial-gradient(120% 130% at 50% 0%, rgba(210,20,30,0.42), transparent 62%);}
.phero2__ar{position:absolute;z-index:1;right:-1vw;top:8%;font-family:var(--font-ar);font-weight:700;direction:rtl;unicode-bidi:isolate;line-height:0.8;color:rgba(255,255,255,0.07);font-size:clamp(6rem,18vw,15rem);white-space:nowrap;pointer-events:none;user-select:none;}
.phero2__inner{position:relative;z-index:2;width:100%;padding-top:clamp(9rem,16vh,12rem);padding-bottom:clamp(2.6rem,5vh,4rem);display:flex;flex-direction:column;align-items:center;}
.phero2 .eyebrow{color:#fff;}
.phero2__title{color:#fff;max-width:18ch;margin-top:1rem;line-height:1.08;}
.phero2__title em{font-style:normal;color:#ff6b72;}
.phero2__rule{display:block;width:64px;height:3px;background:var(--red);border-radius:2px;margin:1.6rem 0;box-shadow:0 0 24px 2px rgba(210,20,30,0.6);}
.phero2__sub{color:rgba(255,255,255,0.88);max-width:42rem;font-weight:300;margin-top:0.4rem;line-height:1.65;font-size:clamp(0.95rem,1.1vw,1.1rem);text-wrap:balance;}
@media(prefers-reduced-motion:reduce){.phero2__bg img{animation:none;}}

/* ===== VISION — manifeste de clôture (centré, trait rouge, axes numérotés) ===== */
.vision{position:relative;overflow:hidden;text-align:center;}
.vision__ar{position:absolute;right:-1vw;bottom:-3rem;font-family:var(--font-ar);font-weight:700;direction:rtl;unicode-bidi:isolate;font-size:clamp(6rem,18vw,15rem);line-height:0.8;color:rgba(210,20,30,0.05);pointer-events:none;user-select:none;z-index:0;}
.vision > .container{position:relative;z-index:1;}
.vision__head{max-width:64ch;}
.vision__title{font-family:var(--font-display);font-weight:800;letter-spacing:-0.035em;line-height:1.04;color:var(--ink);font-size:clamp(1.8rem,3.6vw,2.9rem);margin-top:1rem;max-width:20ch;margin-inline:auto;}
.vision__title em{font-style:normal;color:var(--red);}
.vision__rule{display:block;width:60px;height:3px;background:var(--red);border-radius:2px;margin:1.4rem auto;box-shadow:0 0 22px 1px rgba(210,20,30,0.45);}
.vision__head .lead{margin-top:0;}
.section-head.center .lead{text-wrap:balance;}
.vision__axes{display:grid;gap:clamp(1.6rem,3vw,2.6rem);margin-top:clamp(2.4rem,4.6vw,3.4rem);text-align:left;}
@media(min-width:760px){.vision__axes{grid-template-columns:repeat(3,1fr);}}
.vaxis{border-top:2px solid var(--ink);padding-top:1.1rem;}
.vaxis__n{font-family:var(--font-display);font-weight:800;color:var(--red);font-size:1.7rem;letter-spacing:-0.02em;line-height:1;}
.vaxis h3{font-size:1.15rem;margin:0.5rem 0 0.45rem;}
.vaxis p{color:var(--body);font-weight:300;line-height:1.55;font-size:0.92rem;}

/* ===== HISTOIRE — story verticale animée (date + texte + image) ===== */
.vstory .section-head .lead{max-width:62ch;}
.vstory__line{position:relative;margin-top:clamp(2rem,4vw,3.4rem);}
/* petit oiseau SALAMA qui descend la ligne au fil du scroll */
.vstory__bird{position:absolute;left:30px;top:0;width:38px;height:38px;transform:translate(-50%,-50%);background:url('../logo/salama-mark.png') center/contain no-repeat;z-index:3;filter:drop-shadow(0 6px 14px rgba(210,20,30,0.4));pointer-events:none;will-change:top;transition:top .12s linear;}
@media(prefers-reduced-motion:reduce){.vstory__bird{transition:none;}}
.vstory__line::before{content:"";position:absolute;left:29px;top:8px;bottom:26px;width:2px;background:linear-gradient(var(--red) 70%,rgba(210,20,30,0.16));}
.vstep{position:relative;padding-left:72px;margin-bottom:clamp(2.8rem,5.5vw,4.6rem);}
.vstep.vstep--last{margin-bottom:0;}
.vstep__node{position:absolute;left:21px;top:6px;width:18px;height:18px;border-radius:50%;background:#fff;border:3px solid var(--red);box-shadow:0 0 0 5px var(--red-soft),0 0 18px rgba(210,20,30,0.5);z-index:2;}
.vstep__ghost{position:absolute;left:60px;top:-0.42em;font-family:var(--font-display);font-weight:800;font-size:clamp(3.4rem,8vw,6.5rem);line-height:1;letter-spacing:-0.04em;color:transparent;-webkit-text-stroke:1.5px rgba(20,20,26,0.07);z-index:0;pointer-events:none;user-select:none;}
.vstep__ghost--red{-webkit-text-stroke-color:rgba(210,20,30,0.16);}
.vstep__grid{position:relative;z-index:1;display:grid;gap:clamp(1.5rem,3.5vw,3.4rem);align-items:center;}
@media(min-width:760px){.vstep__grid{grid-template-columns:1.12fr 0.88fr;}.vstep__media{max-width:460px;justify-self:end;}}
.vstep__media{position:relative;border-radius:var(--radius-lg);overflow:hidden;aspect-ratio:4/3;box-shadow:0 26px 52px -30px rgba(20,20,26,0.4);}
.vstep__media::after{content:"";position:absolute;inset:11px;border:1.5px solid rgba(255,255,255,0.55);border-radius:9px;pointer-events:none;z-index:2;}
.vstep__media img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease);}
.vstep:hover .vstep__media img{transform:scale(1.04);}
.vstep .eyebrow{margin-bottom:0;}
.vstep__year{font-family:var(--font-display);font-weight:800;letter-spacing:-0.03em;color:var(--red);font-size:clamp(1.9rem,3.2vw,2.5rem);line-height:1;margin:0.35rem 0 0.55rem;}
.vstep__text h3{font-size:clamp(1.2rem,1.8vw,1.45rem);margin-bottom:0.55rem;}
.vstep__text p{color:var(--body);font-weight:300;line-height:1.62;font-size:0.99rem;max-width:54ch;}

/* ===== MANIFESTE — intro éditoriale (étiquette + grande phrase) ===== */
.manifesto__grid{display:grid;gap:clamp(1.6rem,4vw,3.5rem);}
@media(min-width:860px){.manifesto__grid{grid-template-columns:0.32fr 0.68fr;}.manifesto__label{position:sticky;top:130px;align-self:start;}}
.manifesto__label{border-left:2px solid var(--red);padding-left:1.1rem;}
.manifesto__label .eyebrow{margin-bottom:0;}
.manifesto__ar{display:block;margin-top:0.85rem;font-family:var(--font-ar);font-weight:700;direction:rtl;unicode-bidi:isolate;font-size:clamp(1.8rem,3vw,2.6rem);line-height:1;color:rgba(210,20,30,0.42);}
.manifesto__text{font-family:var(--font-display);font-weight:600;font-size:clamp(1.35rem,2.5vw,2.15rem);line-height:1.32;letter-spacing:-0.02em;color:var(--ink);}
.manifesto__text em{font-style:normal;color:var(--red);}

/* ===== FEATURE CHEVAUCHANT — image + carte qui la chevauche + grands chiffres ===== */
.fover{position:relative;}
.fover__media{position:relative;border-radius:var(--radius-lg);overflow:hidden;aspect-ratio:16/9;}
.fover__media img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease);}
.fover:hover .fover__media img{transform:scale(1.04);}
.fover__ar{position:absolute;right:1.4rem;top:0.9rem;font-family:var(--font-ar);font-weight:700;direction:rtl;unicode-bidi:isolate;font-size:clamp(2.6rem,7vw,5.5rem);line-height:1;color:rgba(255,255,255,0.16);pointer-events:none;user-select:none;}
.fover__card{position:relative;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:0 44px 90px -44px rgba(20,20,26,0.4);padding:clamp(1.6rem,3vw,2.6rem);}
@media(min-width:900px){.fover__card{width:min(560px,58%);margin-top:-130px;margin-left:clamp(2rem,5vw,5rem);}}
@media(max-width:899px){.fover__card{margin-top:-3rem;margin-inline:clamp(0.8rem,3vw,1.6rem);}}
.fover__card .h-lg{margin:0.55rem 0 0.8rem;}
.fover__figs{display:flex;flex-wrap:wrap;gap:1.6rem 2.6rem;margin-top:1.5rem;border-top:1px solid var(--line);padding-top:1.3rem;}
.fover__n{display:block;font-family:var(--font-display);font-weight:800;font-size:clamp(1.95rem,3.4vw,2.8rem);line-height:1;letter-spacing:-0.03em;color:var(--ink);font-variant-numeric:tabular-nums;}
.fover__n i{font-style:normal;color:var(--red);font-size:0.38em;vertical-align:super;margin-left:2px;}
.fover__l{display:block;margin-top:0.4rem;font-size:0.78rem;color:var(--muted);max-width:22ch;}

/* ===== PAGE HERO — cinématique plein écran (pages intérieures) ===== */
.ahero{position:relative;min-height:clamp(560px,88vh,880px);display:flex;align-items:flex-end;overflow:hidden;background:#0a0708;isolation:isolate;}
.ahero__bg{position:absolute;inset:0;z-index:0;}
.ahero__bg img{width:100%;height:100%;object-fit:cover;object-position:center 60%;animation:heroZoom 30s ease-in-out infinite alternate;will-change:transform;}
.ahero__scrim{position:absolute;inset:0;z-index:1;background:
  linear-gradient(to top, rgba(8,6,7,0.95) 0%, rgba(8,6,7,0.22) 52%, rgba(8,6,7,0.6) 100%),
  linear-gradient(to right, rgba(8,6,7,0.85), rgba(8,6,7,0.18) 60%, transparent 100%),
  radial-gradient(120% 90% at 85% 6%, rgba(210,20,30,0.32), transparent 55%);}
.ahero__ar{position:absolute;z-index:1;right:-1.5vw;top:8%;font-family:var(--font-ar);font-weight:700;direction:rtl;unicode-bidi:isolate;line-height:0.85;color:rgba(255,255,255,0.06);font-size:clamp(7rem,23vw,21rem);white-space:nowrap;pointer-events:none;user-select:none;}
.ahero__inner{position:relative;z-index:2;width:100%;padding-top:10rem;padding-bottom:clamp(2.6rem,6vh,4.6rem);}
.ahero .eyebrow{color:#fff;}
.ahero__title{color:#fff;max-width:16ch;margin:1.2rem 0 1.35rem;}
.ahero__title em{font-style:normal;color:var(--red);}
.ahero__sub{color:rgba(255,255,255,0.85);max-width:54ch;font-weight:300;text-shadow:0 1px 18px rgba(0,0,0,0.32);}
.ahero__stats{display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem 2rem;margin-top:clamp(2.2rem,4.4vw,3.2rem);max-width:800px;}
@media(min-width:760px){.ahero__stats{grid-template-columns:repeat(4,1fr);}}
.astat{border-top:2px solid rgba(255,255,255,0.45);padding-top:0.95rem;}
.astat__n{display:block;font-family:var(--font-display);font-weight:800;font-size:clamp(1.7rem,3vw,2.4rem);line-height:1;letter-spacing:-0.03em;color:#fff;font-variant-numeric:tabular-nums;}
.astat__n i{font-style:normal;color:var(--red);font-size:0.45em;vertical-align:super;margin-left:2px;}
.astat__l{display:block;margin-top:0.45rem;font-size:0.8rem;color:rgba(255,255,255,0.7);max-width:22ch;}
.ahero__scroll{position:absolute;right:var(--gutter);bottom:1.9rem;z-index:2;writing-mode:vertical-rl;display:flex;align-items:center;gap:0.7rem;color:rgba(255,255,255,0.6);font-size:0.66rem;letter-spacing:0.25em;text-transform:uppercase;}
.ahero__scroll i{width:1px;height:44px;background:rgba(255,255,255,0.3);}
@media(max-width:760px){.ahero__scroll{display:none;}}

/* ===== PAGE HERO — variante éditoriale (sans photo lavée) ===== */
.phero--editorial{background:var(--paper-2);padding-bottom:clamp(3rem,6vw,5rem);}
.phero--editorial .deco-bird{left:-8%;bottom:-42%;opacity:0.05;}
.phero__stats{display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem 2rem;margin-top:clamp(2.2rem,4.6vw,3.4rem);max-width:860px;position:relative;z-index:2;}
@media(min-width:760px){.phero__stats{grid-template-columns:repeat(4,1fr);}}

/* ===== TIMELINE horizontale — étapes numérotées (parcours) ===== */
.htl{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1.2rem,2.6vw,2.4rem);margin-top:clamp(2.2rem,4.5vw,3.4rem);}
.htl__step{position:relative;padding-right:clamp(.8rem,1.8vw,1.6rem);}
.htl__rail{height:3px;background:var(--red);border-radius:2px;position:relative;}
.htl__step--last .htl__rail{background:repeating-linear-gradient(90deg,var(--red) 0 8px,transparent 8px 15px);}
.htl__node{position:absolute;left:0;top:-5px;width:13px;height:13px;border-radius:50%;background:var(--red);}
.htl__node::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--red);}
.htl__step--last .htl__node{width:17px;height:17px;top:-7px;box-shadow:0 0 0 5px var(--red-soft);}
.htl__step--last .htl__node::after{animation:pinPulse 2.6s ease-out infinite;}
.htl__year{font-family:var(--font-display);font-weight:800;letter-spacing:-.03em;color:var(--red);font-size:clamp(1.6rem,2.4vw,2.2rem);line-height:1;margin:1.05rem 0 .5rem;}
.htl__step h3{font-size:clamp(1.05rem,1.5vw,1.28rem);margin-bottom:.5rem;}
.htl__step p{color:var(--body);font-size:.94rem;line-height:1.55;font-weight:300;}
@media(max-width:1040px) and (min-width:761px){.htl{grid-template-columns:repeat(2,1fr);row-gap:2.6rem;}}
@media(max-width:760px){
  .htl{grid-template-columns:1fr;gap:2rem;}
  .htl__step{padding-right:0;}
}

/* ===== VALEURS — bandeau rouge signature ===== */
.valeurs{display:grid;gap:clamp(1.4rem,3vw,2.6rem);position:relative;z-index:1;}
@media(min-width:860px){.valeurs{grid-template-columns:repeat(3,1fr);}}
.valeur{border-top:2px solid rgba(255,255,255,0.55);padding-top:1.2rem;}
.valeur__icon{color:#fff;margin-bottom:1rem;}
.valeur__icon svg{width:30px;height:30px;}
.valeur h3{color:#fff;font-size:clamp(1.2rem,1.8vw,1.45rem);margin-bottom:0.5rem;}
.valeur p{color:rgba(255,255,255,0.85);font-size:0.96rem;line-height:1.62;font-weight:300;}
.valeurs__ar{position:absolute;right:-1vw;top:-3.5rem;font-family:var(--font-ar);font-weight:700;direction:rtl;unicode-bidi:isolate;font-size:clamp(6rem,18vw,15rem);line-height:0.8;color:rgba(255,255,255,0.07);white-space:nowrap;pointer-events:none;user-select:none;z-index:0;}

.tag-row{display:flex;flex-wrap:wrap;gap:0.6rem;margin-top:1.4rem;}
.tag{font-size:0.82rem;color:var(--ink);background:var(--paper-2);border:1px solid var(--line);border-radius:100px;padding:0.45rem 0.95rem;}
.band-red .tag{background:rgba(255,255,255,0.14);border-color:rgba(255,255,255,0.25);color:#fff;}