:root{ color-scheme:light only; }
/* ============================================================
   Hicham Dmiai — design v2 « la ligne de touche »
   Fond blanc craie, lignes du terrain en or, nom façon flocage.
   ============================================================ */
:root{
  --paper:#FAF8F4;      /* fond principal, blanc craie */
  --paper-2:#F0ECE3;    /* surfaces secondaires */
  --ink:#16181C;        /* texte */
  --ink-2:#4B4E55;      /* texte secondaire */
  --gold:#C9A227;       /* lignes, boutons */
  --gold-ink:#8A6A0C;   /* or lisible sur fond clair */
  --rule:rgba(22,24,28,.12);
  --f:'Archivo', system-ui, sans-serif;
  --maxw:1320px;
  --pad:clamp(20px, 4.5vw, 64px);
  --hdr:76px;
  --ease:cubic-bezier(.2,.75,.15,1);
}
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--f); font-size:1.0625rem; line-height:1.6; font-stretch:100%;
  -webkit-font-smoothing:antialiased; overflow-x:clip;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul,ol{ margin:0; padding:0; list-style:none; }
h1,h2,h3,p,figure,dl,dd{ margin:0; }
h1,h2,h3{ text-wrap:balance; }
p, dt{ text-wrap:pretty; }
::selection{ background:var(--gold); color:var(--ink); }
:focus-visible{ outline:2px solid var(--gold-ink); outline-offset:3px; }

.wrap{ max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad); }
.skip-link{ position:absolute; left:16px; top:-60px; z-index:3000; background:var(--ink); color:var(--paper); padding:10px 16px; border-radius:6px; }
.skip-link:focus{ top:12px; }

h2{
  font-weight:720; font-stretch:82%; letter-spacing:-.015em;
  font-size:clamp(2.1rem, 4.4vw, 3.9rem); line-height:1.02; max-width:18ch;
}

/* ---------- Boutons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:52px; padding:0 28px; border-radius:999px; border:1.5px solid transparent;
  font-weight:600; font-size:.98rem; letter-spacing:.005em; white-space:nowrap;
  transition:background-color .25s ease, color .25s ease, border-color .25s ease, transform .25s var(--ease);
}
.btn:active{ transform:scale(.97); }
.btn-gold{ background:var(--gold); color:var(--ink); }
.btn-gold:hover{ background:#B8921C; }
.btn-line{ border-color:var(--ink); color:var(--ink); }
.btn-line:hover{ background:var(--ink); color:var(--paper); }
.text-link{
  display:inline-block; margin-top:2.4rem; font-weight:600;
  background:linear-gradient(var(--gold), var(--gold)) 0 100% / 100% 2px no-repeat;
  padding-bottom:4px; transition:background-size .35s var(--ease);
}
.text-link:hover{ background-size:30% 2px; }

/* ============ EN-TÊTE ============ */
.hd{
  position:fixed; inset:0 0 auto 0; z-index:1000; height:var(--hdr);
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  padding-inline:max(var(--pad), calc((100% - var(--maxw)) / 2 + var(--pad)));
  transition:background-color .35s ease, box-shadow .35s ease, transform .45s var(--ease);
}
.hd.is-scrolled{ background:rgba(250,248,244,.86); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); box-shadow:0 1px 0 var(--rule); }
.hd.is-hidden{ transform:translateY(-100%); }
.hd-brand{ display:flex; flex-direction:column; line-height:1.1; }
.hd-brand strong{ font-weight:800; font-stretch:80%; font-size:1.3rem; letter-spacing:-.01em; }
.hd-brand span{ font-size:.78rem; color:var(--ink-2); margin-top:2px; }
.hd-nav{ display:flex; gap:clamp(18px, 2.4vw, 34px); }
.hd-nav a{ position:relative; font-weight:500; font-size:.95rem; padding:6px 0; }
.hd-nav a::after{
  content:''; position:absolute; inset:auto 0 0 0; height:2px; background:var(--gold);
  transform:scaleX(0); transform-origin:left; transition:transform .35s var(--ease);
}
[dir=rtl] .hd-nav a::after{ transform-origin:right; }
.hd-nav a:hover::after, .hd-nav a.active::after{ transform:scaleX(1); }
.hd-tools{ display:flex; align-items:center; gap:14px; }
.lang-switch{ display:flex; gap:2px; padding:3px; border-radius:999px; background:rgba(22,24,28,.06); }
.lang-switch button{
  font:600 .76rem/1 var(--f); letter-spacing:.04em; color:var(--ink-2);
  border:0; background:none; padding:8px 11px; border-radius:999px; cursor:pointer;
  transition:background-color .2s ease, color .2s ease;
}
.lang-switch button:hover{ color:var(--ink); }
.lang-switch button.active{ background:var(--ink); color:var(--paper); }
.menu-toggle{
  display:none; align-items:center; gap:10px; height:44px; padding:0 14px; border:0; border-radius:999px; cursor:pointer;
  position:relative; z-index:1300; background:var(--ink); color:var(--paper); font:600 .9rem/1 var(--f);
}
.mt-bars{ position:relative; width:20px; height:14px; }
.mt-bars i{ position:absolute; left:0; right:0; height:2px; border-radius:2px; background:currentColor; transition:transform .35s var(--ease), opacity .2s ease; }
.mt-bars i:nth-child(1){ top:0; } .mt-bars i:nth-child(2){ top:6px; } .mt-bars i:nth-child(3){ top:12px; }
.menu-toggle.is-open .mt-bars i:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.menu-toggle.is-open .mt-bars i:nth-child(2){ opacity:0; }
.menu-toggle.is-open .mt-bars i:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }
.nav-mobile{
  position:fixed; inset:0; z-index:900; background:var(--paper);
  display:flex; flex-direction:column; justify-content:center; gap:6px; padding:var(--hdr) var(--pad) 40px;
  clip-path:inset(0 0 100% 0); transition:clip-path .6s var(--ease); visibility:hidden;
}
.nav-mobile.is-open{ clip-path:inset(0 0 0 0); visibility:visible; }
.nav-mobile a{ font-weight:750; font-stretch:78%; font-size:clamp(2.2rem, 10vw, 3.4rem); line-height:1.15; }
.nav-mobile a.active{ color:var(--gold-ink); }

/* ============ HERO : affiche de match ============ */
/* Le nom en or, immense, derrière le coach détouré ; les infos de part et d'autre */
.hero{
  position:relative; isolation:isolate; overflow:hidden;
  height:100svh; min-height:640px; max-height:1100px;
  background:radial-gradient(60% 55% at 50% 62%, #FFFFFF 0%, rgba(255,255,255,0) 70%), var(--paper);
}
.hero-name{
  position:absolute; inset:calc(var(--hdr) + 1vh) 0 auto 0; z-index:1;
  display:flex; flex-direction:column; align-items:center;
  font-weight:900; font-stretch:66%; text-transform:uppercase; text-align:center;
  font-size:min(24vw, 34svh); line-height:.8; letter-spacing:-.02em;
  color:#A88516;
}
.hero-name em{ font-style:normal; }
.hero-name .ln{ display:block; overflow:hidden; padding:.06em .1em 0; }
.hero-name .ln-in, .hero-name .ch{ display:inline-block; }
.hero-coach{
  position:absolute; z-index:2; left:50%; bottom:0; margin:0;
  height:calc(100% - var(--hdr) - 2vh); aspect-ratio:593/1600; transform:translateX(-50%);
}
.hero-coach picture, .hero-coach img{ display:block; width:100%; height:100%; object-fit:contain; object-position:bottom; }
.hero-coach::after{
  content:''; position:absolute; z-index:-1; left:-30%; right:-30%; bottom:-4%; height:12%;
  background:radial-gradient(50% 50% at 50% 50%, rgba(22,24,28,.22), rgba(22,24,28,0) 70%);
}
.hero-info{
  position:absolute; z-index:3; inset:auto 0 0 0;
  max-width:var(--maxw); margin-inline:auto; padding:0 var(--pad) clamp(28px, 5vh, 56px);
  display:flex; justify-content:space-between; align-items:flex-end; gap:24px; pointer-events:none;
}
.hero-info > *{ pointer-events:auto; width:min(31%, 380px); }
.hero-right{ display:flex; flex-direction:column; align-items:flex-end; gap:16px; }
.hero-kicker{ font-weight:600; font-size:1rem; color:var(--gold-ink); }
.hero-role{ margin-top:.6rem; font-size:clamp(1.1rem, 1.45vw, 1.3rem); line-height:1.4; color:var(--ink); font-weight:500; }
.hero-chips{ display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px; }
.hero-chips li{
  display:inline-flex; align-items:center; gap:9px; font-size:.88rem; font-weight:500;
  padding:7px 14px 7px 12px; border-radius:999px; background:rgba(255,255,255,.85); box-shadow:0 2px 10px rgba(22,24,28,.08);
}
.hero-chips li::before{ content:''; width:7px; height:7px; border-radius:50%; background:var(--gold); }
.hero-cta{ display:flex; flex-wrap:wrap; justify-content:flex-end; gap:10px; }
.hero-cta .btn{ min-height:48px; padding:0 22px; font-size:.94rem; }
.hero-cta .btn-line{ background:rgba(250,248,244,.7); }
[dir=rtl] .hero-name{ font-size:min(17vw, 25svh); line-height:1.05; font-weight:800; }
@media (max-width: 900px){ [dir=rtl] .hero-name{ font-size:min(21vw, 104px); } }
[dir=rtl] .hero-name .ln{ padding:.05em .1em .28em; margin-bottom:-.2em; }

/* Avant le lancement de l'animation, le hero reste caché (repli après 3 s) */
.has-js:not(.v2-ready) .hero-name, .has-js:not(.v2-ready) .hero-coach, .has-js:not(.v2-ready) .hero-info{ visibility:hidden; }

/* ============ BANDEAU CHIFFRES ============ */
.ticker{ background:var(--gold); color:var(--ink); overflow:hidden; white-space:nowrap; }
.ticker-track{ display:inline-flex; animation:tick 40s linear infinite; }
[dir=rtl] .ticker-track{ animation-name:tick-rtl; }
.ticker:hover .ticker-track{ animation-play-state:paused; }
@keyframes tick{ to{ transform:translateX(-50%); } }
@keyframes tick-rtl{ to{ transform:translateX(50%); } }
.ticker-item{ display:inline-flex; align-items:baseline; gap:.6rem; padding:20px 36px; border-inline-end:1px solid rgba(22,24,28,.18); }
.ticker-item b{ font-weight:800; font-stretch:70%; font-size:1.7rem; line-height:1; }
.ticker-item span{ font-weight:500; font-size:.92rem; }

/* ============ PRÉSENTATION ============ */
.intro{ padding:clamp(96px, 13vw, 180px) 0 clamp(80px, 10vw, 140px); }
.intro-grid{ display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); gap:clamp(40px, 7vw, 120px); align-items:end; }
.intro h2{ font-size:clamp(2.4rem, 5.2vw, 4.8rem); max-width:16ch; }
.ink-reveal .w{ color:#C9C4B8; }
.intro-lead{ margin-top:1.8rem; font-size:1.15rem; line-height:1.65; color:var(--ink-2); max-width:48ch; }
.stats{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.stats > div{
  padding:24px 24px 22px; border-radius:14px; background:#FFFFFF;
  box-shadow:0 1px 2px rgba(22,24,28,.06), 0 14px 32px -12px rgba(22,24,28,.18);
}
.stats > div:nth-child(2), .stats > div:nth-child(3){ background:var(--ink); color:#F6F4EE; box-shadow:0 1px 2px rgba(22,24,28,.06), 0 22px 40px -14px rgba(22,24,28,.32); }
.stats > div:nth-child(2) dt, .stats > div:nth-child(3) dt{ color:#CFCDC6; }
.stats > div:nth-child(2) dd, .stats > div:nth-child(3) dd{ color:#E3C45C; }
.stats dd{ font-weight:820; font-stretch:64%; font-size:clamp(3.6rem, 6vw, 5.6rem); line-height:.9; font-variant-numeric:tabular-nums; }
.stats dt{ margin-top:.5rem; font-size:.95rem; color:var(--ink-2); }

/* ============ BANDE PHOTO ============ */
.band{ height:min(92svh, 860px); padding:0; }
.band-frame{ position:relative; width:100%; height:100%; overflow:hidden; }
.band-frame img{ width:100%; height:100%; object-fit:cover; object-position:50% 45%; transform:scale(1.18); }

/* ============ PARCOURS ============ */
.story{ background:var(--paper); }
.story-pin{ padding:clamp(96px, 11vw, 150px) 0 clamp(64px, 8vw, 110px); }
.story-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:32px; flex-wrap:wrap; margin-bottom:clamp(40px, 5vw, 64px); }
.story-head p{ color:var(--ink-2); font-size:1.08rem; max-width:34ch; }
.story-track{ display:grid; gap:72px; padding-inline:var(--pad); max-width:var(--maxw); margin-inline:auto; }
.chap{ display:grid; gap:24px; }
.chap-media{ position:relative; overflow:hidden; border-radius:10px; aspect-ratio:4/3; background:var(--paper-2); box-shadow:0 1px 2px rgba(22,24,28,.06), 0 26px 48px -16px rgba(22,24,28,.26); }
.chap-media img{ width:100%; height:100%; object-fit:cover; }
.chap-badges{ display:flex; align-items:center; justify-content:center; gap:10%; background:#FFFFFF; }
.chap-badges img{ width:30%; height:auto; object-fit:contain; filter:drop-shadow(0 18px 24px rgba(22,24,28,.18)); }
.chap-badges img:only-child{ width:36%; }
.chap-season{ font-weight:830; font-stretch:64%; font-size:clamp(3rem, 5.2vw, 4.8rem); line-height:.9; color:var(--gold-ink); font-variant-numeric:tabular-nums; }
.chap-club{ margin-top:.9rem; font-weight:600; font-size:.95rem; color:var(--ink-2); }
.chap h3{ margin-top:.5rem; font-weight:720; font-stretch:84%; font-size:clamp(1.7rem, 2.6vw, 2.4rem); line-height:1.06; letter-spacing:-.01em; }
.chap-text > p:not(.chap-season):not(.chap-club){ margin-top:1rem; color:#33363C; line-height:1.68; max-width:46ch; }
.chap .btn{ margin-top:1.8rem; }
.story-progress{ display:none; }

/* Ordinateur : une saison par ligne, photo et texte alternés */
@media (min-width: 901px){
  .story-track{ gap:clamp(96px, 11vw, 160px); }
  .chap{ grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:clamp(40px, 6vw, 96px); align-items:center; }
  .chap:nth-child(even) .chap-media{ order:2; }
  .chap-media{ aspect-ratio:5/4; }
  .chap-badges img{ transform:none; }
}

/* ============ FORMATION ============ */
.edu{ background:var(--paper-2); padding:clamp(96px, 11vw, 150px) 0; }
.edu-line{ position:relative; display:grid; grid-template-columns:repeat(6, minmax(0,1fr)); gap:24px; margin-top:clamp(48px, 6vw, 80px); padding-top:34px; }
.edu-line::before{ content:''; position:absolute; top:6px; inset-inline:0; height:2px; background:var(--rule); }
.edu-fill{ position:absolute; top:6px; inset-inline:0; height:2px; background:var(--gold); transform-origin:left; }
[dir=rtl] .edu-fill{ transform-origin:right; }
.edu-line li{ position:relative; font-size:.98rem; line-height:1.45; color:var(--ink-2); transition:color .4s ease; }
.edu-line li::before{
  content:''; position:absolute; top:-35px; inset-inline-start:0; width:14px; height:14px; border-radius:50%;
  background:var(--paper-2); border:2px solid #B9B3A6; transition:background-color .4s ease, border-color .4s ease;
}
.edu-y{ display:block; margin-bottom:.4rem; font-weight:820; font-stretch:66%; font-size:2.4rem; line-height:1; color:var(--ink); font-variant-numeric:tabular-nums; }
.edu-line li.on{ color:var(--ink); }
.edu-line li.on::before{ background:var(--gold); border-color:var(--gold); }
.edu-line li.is-top .edu-y{ color:var(--gold-ink); }

/* ============ CLUBS : une carte par club ou sélection ============ */
.clubs{ padding:clamp(96px, 11vw, 150px) 0; }
.club-row{ display:grid; grid-template-columns:repeat(6, minmax(0,1fr)); gap:clamp(12px, 1.4vw, 20px); margin-top:clamp(40px, 5vw, 64px); }
.club-row li{
  display:flex; flex-direction:column; align-items:center; gap:18px; text-align:center;
  padding:32px 14px 26px; font-size:.92rem; font-weight:600; line-height:1.35;
  background:#FFFFFF; border-radius:14px;
  box-shadow:0 1px 2px rgba(22,24,28,.06), 0 12px 28px -10px rgba(22,24,28,.16);
  transition:translate .4s var(--ease), box-shadow .4s var(--ease);
}
.club-row li:hover{ translate:0 -6px; box-shadow:0 1px 2px rgba(22,24,28,.06), 0 22px 40px -12px rgba(22,24,28,.24); }
.club-row img{ width:84px; height:84px; object-fit:contain; transition:scale .5s var(--ease); }
.club-row li:hover img{ scale:1.06; }

/* ============ GALERIE ============ */
.gal{ padding:clamp(80px, 10vw, 140px) 0 clamp(72px, 8vw, 120px); overflow:hidden; }
.collage{ display:grid; grid-template-columns:repeat(12, minmax(0,1fr)); gap:clamp(16px, 2vw, 28px); margin-top:clamp(48px, 6vw, 80px); align-items:start; }
.cg-img{ overflow:hidden; border-radius:10px; background:var(--paper-2); box-shadow:0 1px 2px rgba(22,24,28,.06), 0 22px 44px -16px rgba(22,24,28,.24); }
.cg-img img{ width:100%; height:100%; object-fit:cover; }
.cg figcaption{ margin-top:12px; font-size:.92rem; color:var(--ink-2); }
.cg-a{ grid-column:1 / span 7; } .cg-a .cg-img{ aspect-ratio:4/3; }
.cg-b{ grid-column:9 / span 4; margin-top:18%; } .cg-b .cg-img{ aspect-ratio:4/5; }
.cg-c{ grid-column:2 / span 4; margin-top:14%; } .cg-c .cg-img{ aspect-ratio:7/5; }
.cg-d{ grid-column:7 / span 5; margin-top:4%; } .cg-d .cg-img{ aspect-ratio:5/4; }

/* ============ DISPONIBILITÉ ============ */
.final{ background:var(--paper-2); padding:clamp(96px, 12vw, 170px) 0; }
.final-grid{ display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); gap:clamp(40px, 6vw, 96px); align-items:end; }
.final h2{ font-weight:850; font-stretch:68%; font-size:clamp(3rem, 7.4vw, 7rem); line-height:.9; letter-spacing:-.02em; max-width:12ch; }
.final-side > p:first-child{ font-size:1.15rem; color:var(--ink-2); max-width:36ch; }
.final-actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:1.6rem; }
.final-direct{ display:flex; flex-wrap:wrap; gap:8px 24px; margin-top:1.6rem; font-weight:500; }
.final-direct a{ border-bottom:1.5px solid var(--gold); padding-bottom:2px; }
.final-direct a:hover{ color:var(--gold-ink); }

/* ============ PIED DE PAGE ============ */
.ft{ padding:40px 0 48px; border-top:1px solid var(--rule); }
.ft-grid{ display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:24px; }
.ft-brand strong{ font-weight:800; font-stretch:80%; font-size:1.2rem; }
.ft-brand span{ color:var(--ink-2); font-size:.9rem; margin-inline-start:8px; }
.ft-copy{ margin-top:6px; font-size:.86rem; color:var(--ink-2); }
.ft-nav{ display:flex; flex-wrap:wrap; gap:8px 24px; font-size:.92rem; font-weight:500; }
.ft-nav a:hover{ color:var(--gold-ink); }

/* ============ ARABE ============ */
[dir=rtl] body, [dir=rtl] button{ font-family:'Cairo', var(--f); }
[dir=rtl] *{ letter-spacing:0 !important; }
[dir=rtl] h2, [dir=rtl] .final h2{ line-height:1.3; }
[dir=rtl] .final-direct a[dir=ltr]{ direction:ltr; }

/* ============ RESPONSIVE ============ */
@media (max-width: 1100px){
  .hd-nav{ display:none; }
  .menu-toggle{ display:inline-flex; }
  .edu-line{ grid-template-columns:repeat(3, minmax(0,1fr)); row-gap:48px; }
  .club-row{ grid-template-columns:repeat(3, minmax(0,1fr)); }
}
@media (max-width: 900px){
  :root{ --hdr:68px; }
  .hero{ height:auto; min-height:0; max-height:none; padding-top:calc(var(--hdr) + 8px); }
  .hero-name{ position:relative; inset:auto; font-size:min(30vw, 150px); }
  .hero-coach{ position:relative; left:auto; transform:none; margin:-14vw auto 0; height:auto; width:min(62vw, 300px); }
  .hero-info{ position:relative; flex-direction:column; align-items:stretch; padding-top:28px; padding-bottom:48px; }
  .hero-info > *{ width:auto; }
  .hero-right{ align-items:stretch; }
  .hero-chips, .hero-cta{ justify-content:flex-start; }
  .intro-grid, .final-grid{ grid-template-columns:minmax(0,1fr); }
  .collage{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .cg-a{ grid-column:1 / -1; } .cg-b{ grid-column:1; margin-top:0; } .cg-c{ grid-column:2; margin-top:22%; }
  .cg-d{ grid-column:1 / -1; margin-top:0; }
  .band{ height:62svh; }
}
@media (max-width: 700px){
  .edu-line{ grid-template-columns:minmax(0,1fr); gap:28px; padding-top:0; padding-inline-start:30px; }
  .edu-line::before, .edu-fill{ top:0; bottom:0; inset-inline-start:6px; inset-inline-end:auto; width:2px; height:auto; transform-origin:top; }
  .edu-line li::before{ top:4px; inset-inline-start:-30px; }
  .club-row{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .hero-cta .btn, .final-actions .btn{ flex:1 1 100%; }
  .ticker-item{ padding:16px 26px; }
  .ticker-item b{ font-size:1.4rem; }
}
@media (max-width: 480px){
  .hd-brand span{ display:none; }
  .lang-switch button{ padding:8px 9px; }
}

/* Mouvement réduit : tout est visible, rien ne bouge */
@media (prefers-reduced-motion: reduce){
  .ticker-track{ animation:none; }
  .band-frame img, .chap-media img{ transform:none; }
  .ink-reveal .w{ color:inherit; }
  .edu-line li{ color:var(--ink); }
  .edu-line li::before{ background:var(--gold); border-color:var(--gold); }
}
[dir=rtl] .chap-season{ direction:ltr; text-align:right; }

/* Arabe : le bouton du menu garde seulement les trois barres */
[dir=rtl] .mt-label{ display:none; }
[dir=rtl] .menu-toggle{ padding:0 13px; }