/* =====================================================================
   HERO — composant autonome (préfixe hr-), indépendant du reste de la page
   Contenu : photos jour / nuit du bureau (même cadrage) · « DHIFAOUI Wael » · badge « ANALYSTE DE DONNÉE » · présentation
   • Grand écran : mise en page identique à la maquette, tout en unités cqw (proportionnel à la largeur du hero).
   • Téléphone : l'illustration passe au-dessus, le texte dessous.
   « Apple design » : entrée sur un vrai ressort (courbe linear() critique, sans rebond) · profondeur façon carte Apple TV
   (légère inclinaison 3D + reflet spéculaire qui suit le curseur) · défilement lié 1:1 (la scène recule, le texte
   s'efface) · badge en verre dépoli · approche (tracking) propre à chaque taille.
   Lampe = interrupteur : un clic l'éteint et active le mode clair (html[data-theme="light"]), un autre la rallume.
   Tout est confiné à .hr-hero : aucune règle globale, aucune dépendance (le thème est un simple attribut sur <html>).
   ===================================================================== */
.hr-hero{
  --hr-ink:#f4f4f8;
  --hr-name-top:#ffffff;  --hr-name-bot:#d3defd;            /* DHIFAOUI : blanc → lavande très clair */
  --hr-first-top:#4fd0ff; --hr-first-bot:#0a7dff;           /* Wael : bleu ciel → bleu électrique */
  --hr-badge-ink:#3fe1de; --hr-badge-line:#18a6ff; --hr-badge-rgb:24,140,255;
  /* ressort « Apple » (amortissement 1, response 0,55 s) échantillonné : arrive vite, se pose sans rebond */
  --hr-spring:linear(0, 0.0438, 0.1421, 0.2606, 0.3803, 0.4912, 0.5887, 0.6716, 0.7404, 0.7964, 0.8415, 0.8773, 0.9055, 0.9276, 0.9447, 0.9579, 0.9681, 0.9758, 0.9818, 0.9863, 0.9897, 0.9923, 0.9942, 0.9957, 0.9968, 0.9976, 0.9982, 0.9987, 1);
  position:relative;container-type:inline-size;width:100%;color:var(--hr-ink);overflow:hidden;overflow:clip;   /* clip : découpe sans créer de conteneur de défilement (le défilement lié fonctionne) */
  font-family:Outfit,-apple-system,BlinkMacSystemFont,"Geeza Pro","Noto Sans Arabic","Segoe UI",Roboto,system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-optical-sizing:auto}
.hr-hero ::selection{background:rgba(10,132,255,.45);color:#fff}
.hr-hero *,.hr-hero *::before,.hr-hero *::after{box-sizing:border-box}

/* ---------- Illustration (la photo d'origine, texte retiré) ---------- */
.hr-scene{position:relative;aspect-ratio:2000/1060;margin:0;perspective:160cqw;perspective-origin:62% 50%}   /* le haut de la photo (noir uni) est légèrement rogné */
.hr-scene__layer{position:absolute;left:-1.2%;bottom:-1.2%;width:102.4%;aspect-ratio:2000/1116;   /* proportions exactes de la photo : la lampe reste sous son bouton */
  /* profondeur : l'illustration glisse ET s'incline d'un rien vers le curseur (comme une carte Apple TV) */
  transform:translate3d(calc(var(--hr-px,0)*-.5%),calc(var(--hr-py,0)*-.35%),0) rotateY(calc(var(--hr-px,0)*1.1deg)) rotateX(calc(var(--hr-py,0)*-.8deg));
  will-change:transform}
.hr-scene__img{position:absolute;inset:0;width:100%;height:100%;display:block;user-select:none;-webkit-user-drag:none;transition:opacity .45s ease}
.hr-scene__img--off{opacity:0}                                     /* même image, lampe éteinte */

/* ---------- La lampe : un vrai interrupteur (bouton invisible posé exactement sur elle) ---------- */
.hr-lamp{position:absolute;left:83.5%;top:10%;width:16%;height:73%;padding:0;border:0;border-radius:2cqw;background:transparent;cursor:pointer;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation}
/* halo et info-bulle : dessinés par .hr-lamp-fx (même place que le bouton, mais sans sa découpe clip-path,
   sinon le halo apparaissait comme un rectangle et l'info-bulle était coupée) */
.hr-lamp-fx{position:absolute;left:83.5%;top:10%;width:16%;height:73%;pointer-events:none}
/* au survol, la lumière s'intensifie d'un rien : l'objet répond avant même le clic */
.hr-lamp-fx::before{content:"";position:absolute;left:-40%;top:3%;width:136%;aspect-ratio:1;border-radius:50%;pointer-events:none;mix-blend-mode:screen;
  background:radial-gradient(closest-side,rgba(255,190,110,.55),rgba(255,150,60,.18) 55%,transparent);opacity:0;transform:scale(.9);
  transition:opacity .3s ease,transform .45s cubic-bezier(.2,.8,.2,1)}
.hr-lamp:hover+.hr-lamp-fx::before,.hr-lamp:focus-visible+.hr-lamp-fx::before{opacity:1;transform:none}
.hr-lamp:active{transform:scale(.97)}
.hr-lamp:focus-visible{outline:none}
.hr-lamp:focus-visible+.hr-lamp-fx{border-radius:2cqw;outline:max(2px,.25cqw) solid rgba(255,200,120,.95);outline-offset:.4cqw}
/* info-bulle en verre, après un court délai */
.hr-lamp-fx::after{content:attr(data-tip);position:absolute;right:58%;top:4%;z-index:3;padding:.55cqw .9cqw;border-radius:.9cqw;white-space:nowrap;pointer-events:none;
  font:500 max(11px,1.25cqw)/1.2 Outfit,-apple-system,system-ui,sans-serif;color:#fff;
  background:rgba(28,28,36,.78);-webkit-backdrop-filter:blur(16px) saturate(180%);backdrop-filter:blur(16px) saturate(180%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),0 8px 20px rgba(0,0,0,.4);opacity:0;transform:translateY(4px);transition:opacity .15s ease,transform .15s ease}
.hr-lamp:hover+.hr-lamp-fx::after,.hr-lamp:focus-visible+.hr-lamp-fx::after{opacity:1;transform:none;transition:opacity .18s ease .4s,transform .3s cubic-bezier(.2,.9,.25,1) .4s}
/* reflet spéculaire doux qui suit le curseur : la lumière « accroche » la scène */
.hr-scene__glare{position:absolute;inset:0;pointer-events:none;mix-blend-mode:soft-light;opacity:calc(var(--hr-hover,0)*.9);
  background:radial-gradient(42cqw 30cqw at var(--hr-gx,60%) var(--hr-gy,40%),rgba(255,255,255,.55),rgba(160,200,255,.12) 45%,transparent 70%)}
/* fondu sur les bords : l'image se fond dans le noir de la page */
.hr-scene::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,#000 0,transparent 7%,transparent 88%,rgba(0,0,0,.85) 100%)}

/* ---------- Texte (positions mesurées sur la maquette, en cqw) ---------- */
.hr-copy{position:absolute;inset:0;pointer-events:none}
.hr-copy>*{pointer-events:auto}
.hr-title{position:absolute;left:2.9cqw;top:10cqw;margin:0;
  font-family:Montserrat,"Arial Black",-apple-system,system-ui,sans-serif;font-weight:900;font-size:7.2cqw;line-height:.95;
  letter-spacing:-.045em;text-transform:uppercase}
.hr-title__last,.hr-title__first{display:block;width:max-content;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.hr-title__last{background-image:linear-gradient(180deg,var(--hr-name-top) 45%,var(--hr-name-bot));
  filter:drop-shadow(0 0 .9cqw rgba(200,215,255,.28)) drop-shadow(0 .25cqw .5cqw rgba(0,0,0,.6))}
.hr-title__first{text-transform:none;margin-top:.02em;font-size:1.06em;letter-spacing:-.02em;
  background-image:linear-gradient(180deg,var(--hr-first-top) 15%,var(--hr-first-bot) 85%);
  filter:drop-shadow(0 0 1.1cqw rgba(20,140,255,.5)) drop-shadow(0 .25cqw .5cqw rgba(0,0,0,.6))}

.hr-badge{position:absolute;left:2.48cqw;top:26.6cqw;width:30.96cqw;height:5.39cqw;display:grid;place-items:center;margin:0;
  border-radius:1.15cqw;color:var(--hr-badge-ink);
  font:500 2.42cqw/1 "Helvetica Neue",Helvetica,Arial,-apple-system,system-ui,sans-serif;letter-spacing:.018em;text-transform:uppercase;white-space:nowrap;   /* petit texte : approche légèrement positive */
  text-shadow:0 0 .8cqw rgba(63,225,222,.45);
  /* matière : verre dépoli teinté (le décor transparaît), liseré néon conservé */
  background:radial-gradient(120% 140% at 50% 50%,rgba(0,30,90,.6),rgba(0,8,40,.72));
  -webkit-backdrop-filter:blur(1.2cqw) saturate(160%);backdrop-filter:blur(1.2cqw) saturate(160%);
  box-shadow:inset 0 0 0 max(1.5px,.22cqw) var(--hr-badge-line),
             inset 0 0 1.4cqw rgba(var(--hr-badge-rgb),.45),
             0 0 .6cqw rgba(var(--hr-badge-rgb),.9),0 0 2cqw rgba(var(--hr-badge-rgb),.45)}

.hr-text{position:absolute;left:2.75cqw;top:34.1cqw;width:34cqw;margin:0;   /* s'arrête avant la plante */
  font-size:1.9cqw;line-height:1.5;font-weight:400;letter-spacing:.002em;color:var(--hr-ink);
  text-shadow:0 .1cqw .6cqw rgba(0,0,0,.8);text-wrap:pretty;hanging-punctuation:first}

/* ---------- Apparition au chargement : arrivée échelonnée, douce, sans rebond ---------- */
.hr-hero.is-ready .hr-reveal{animation:hrIn .81s cubic-bezier(.2,.8,.2,1) both;animation-timing-function:var(--hr-spring);animation-delay:calc(var(--i,0)*80ms + 60ms)}
.hr-hero.is-ready .hr-scene__layer{animation:hrScene 1.18s cubic-bezier(.2,.8,.2,1) both;animation-timing-function:var(--hr-spring)}
@keyframes hrIn{from{opacity:0;transform:translateY(1.4cqw);filter:blur(6px)}}
@keyframes hrScene{from{opacity:0;scale:1.03}}

/* ---------- Défilement lié 1:1 : en quittant l'écran, la scène recule et le texte s'efface (pages produit Apple) ---------- */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .hr-scene{animation:hrScrollScene linear both;animation-timeline:view();animation-range:exit 0% exit 100%}
    .hr-copy{animation:hrScrollCopy linear both;animation-timeline:view();animation-range:exit 0% exit 90%}
  }
}
@keyframes hrScrollScene{to{transform:scale(.96);opacity:.35;filter:blur(2px)}}
@keyframes hrScrollCopy{to{transform:translateY(-3cqw);opacity:0}}

/* ---------- Téléphone / petite tablette : illustration au-dessus, texte dessous ---------- */
@media (max-width:760px){
  .hr-scene{aspect-ratio:auto;height:min(72cqw,360px)}
  .hr-scene::after{background:linear-gradient(180deg,#000 0,transparent 8%,transparent 50%,rgba(0,0,0,.75) 82%,#000 97%)}
  /* la couche garde les proportions de l'image (la lampe reste sous son bouton) et se cadre sur l'écran du portable */
  .hr-scene__layer{top:0;bottom:auto;height:100%;aspect-ratio:auto;width:calc(min(72cqw,360px)*2000/1116);left:calc((100cqw - min(72cqw,360px)*2000/1116)*.97)}   /* cadré à droite : l'écran ET la lampe (interrupteur) restent visibles */
  .hr-copy{position:relative;inset:auto;margin-top:-6vw;padding:0 16px 8px}   /* le titre chevauche à peine le bas de l'image, dans son fondu */
  .hr-title,.hr-badge,.hr-text{position:relative;left:auto;top:auto}
  .hr-title{font-size:clamp(2.4rem,13cqw,3.6rem)}
  .hr-badge{width:auto;height:auto;display:inline-grid;margin-top:18px;padding:12px 18px;border-radius:12px;font-size:clamp(.95rem,4.4cqw,1.15rem);
    box-shadow:inset 0 0 0 2px var(--hr-badge-line),inset 0 0 14px rgba(var(--hr-badge-rgb),.45),0 0 6px rgba(var(--hr-badge-rgb),.9),0 0 20px rgba(var(--hr-badge-rgb),.45)}
  .hr-text{width:auto;margin-top:18px;font-size:clamp(1rem,4.3cqw,1.125rem);line-height:1.55}
  .hr-title__last,.hr-title__first{filter:drop-shadow(0 0 8px rgba(160,190,255,.3))}
}

/* ---------- Droite à gauche (arabe) : le texte s'aligne à droite, l'illustration ne bouge pas ---------- */
.hr-hero:dir(rtl) .hr-copy{direction:rtl}
.hr-hero:dir(rtl) .hr-title{direction:ltr;text-align:left}   /* le nom est en lettres latines : il garde sa mise en page */
@media (min-width:761px){
  .hr-hero:dir(rtl) .hr-badge,.hr-hero:dir(rtl) .hr-text{direction:rtl}
  .hr-hero:dir(rtl) .hr-text{text-align:right;width:34cqw}
}

/* ---------- Accessibilité ---------- */
@media (prefers-reduced-motion:reduce){
  .hr-hero.is-ready .hr-reveal{animation:hrFade .3s ease both}
  .hr-hero.is-ready .hr-scene__layer{animation:hrFade .3s ease both}
  .hr-scene__layer{transform:none}
  .hr-lamp-fx::before,.hr-lamp-fx::after{transition:opacity .15s ease}
  @keyframes hrFade{from{opacity:0}}
}
@media (prefers-reduced-motion:reduce){ .hr-scene__glare{display:none} }
@media (prefers-reduced-transparency:reduce){ .hr-badge{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgb(0,14,52)} }
@media (prefers-contrast:more){ .hr-text{text-shadow:none} .hr-badge{color:#fff} }

/* =====================================================================
   MODE CLAIR (html[data-theme="light"]) — même mise en page, lampe éteinte
   ===================================================================== */
:root[data-theme="light"] .hr-hero{
  --hr-ink:#1b1f2e;
  --hr-name-top:#0d1330; --hr-name-bot:#3a4672;            /* DHIFAOUI : bleu nuit */
  --hr-first-top:#2f9bff; --hr-first-bot:#0057ff;           /* Wael : même dégradé bleu, plus dense */
  --hr-badge-ink:#0064d6; --hr-badge-line:#2b8cff; --hr-badge-rgb:43,140,255;
  background:radial-gradient(70% 90% at 20% 40%,#ffffff,transparent 70%),linear-gradient(180deg,#f4f6fb,#eceff7)}
:root[data-theme="light"] .hr-scene__img--off{opacity:1}
:root[data-theme="light"] .hr-scene__img--on{opacity:0}
/* l'illustration se fond dans la page claire au lieu du noir */
:root[data-theme="light"] .hr-scene::after{display:none}
:root[data-theme="light"] .hr-scene__layer{
  -webkit-mask-image:linear-gradient(90deg,transparent 24%,#000 47%),linear-gradient(180deg,transparent 0,#000 9%,#000 86%,transparent 100%);-webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent 24%,#000 47%),linear-gradient(180deg,transparent 0,#000 9%,#000 86%,transparent 100%);mask-composite:intersect}
:root[data-theme="light"] .hr-scene__glare{mix-blend-mode:screen;opacity:calc(var(--hr-hover,0)*.35)}
:root[data-theme="light"] .hr-title__last{filter:drop-shadow(0 .3cqw .8cqw rgba(13,19,48,.18))}
:root[data-theme="light"] .hr-title__first{filter:drop-shadow(0 .3cqw 1cqw rgba(0,87,255,.25))}
:root[data-theme="light"] .hr-badge{text-shadow:none;
  background:linear-gradient(180deg,rgba(255,255,255,.85),rgba(236,243,255,.7));
  box-shadow:inset 0 0 0 max(1.5px,.22cqw) var(--hr-badge-line),inset 0 0 1.2cqw rgba(var(--hr-badge-rgb),.12),
             0 0 1.4cqw rgba(var(--hr-badge-rgb),.28),0 .5cqw 1.6cqw rgba(13,19,48,.08)}
:root[data-theme="light"] .hr-text{text-shadow:none;color:#2a2f42}
:root[data-theme="light"] .hr-lamp:focus-visible+.hr-lamp-fx{outline-color:#0a84ff}
:root[data-theme="light"] .hr-lamp-fx::before{background:radial-gradient(closest-side,rgba(255,220,160,.5),transparent)}
@media (max-width:760px){
  :root[data-theme="light"] .hr-scene__layer{
    -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 8%,#000 58%,transparent 96%);mask-image:linear-gradient(180deg,transparent 0,#000 8%,#000 58%,transparent 96%)}
  :root[data-theme="light"] .hr-title__last,:root[data-theme="light"] .hr-title__first{filter:none}
}
@media (prefers-reduced-transparency:reduce){ :root[data-theme="light"] .hr-badge{background:#fff} }

/* transition de thème : la lumière (ou la nuit) se propage en cercle depuis la lampe — voir hr-hero.js */
html.hr-theme-vt::view-transition-old(root),html.hr-theme-vt::view-transition-new(root){animation:none;mix-blend-mode:normal}
html.hr-theme-vt::view-transition-new(root){z-index:2}

/* =====================================================================
   HORLOGE RÉELLE — date, ville (fuseau horaire) et heure de la personne qui visite, affichées sur l'écran
   de l'horloge de la photo. Placée dans la couche de l'image : elle suit la parallaxe et le cadrage mobile.
   Positions en % de la photo (2000 × 1116), tailles en cqw de la couche (proportionnelles à l'image).
   ===================================================================== */
.hr-scene__layer{container-type:inline-size}
.hr-clock{position:absolute;left:38.3%;top:64.87%;width:13.1%;height:9.77%;pointer-events:none;
  font-family:"VT323","Courier New",ui-monospace,monospace;color:#5fe0a4;text-align:center;white-space:nowrap;
  text-shadow:0 0 .35cqw rgba(95,224,164,.75),0 0 1cqw rgba(95,224,164,.35);
  font-variant-numeric:tabular-nums;letter-spacing:.02em}
.hr-clock>span{position:absolute;left:0;right:0;line-height:1;transform:translateY(-50%)}
.hr-clock__date{top:18%;font-size:1.9cqw}
.hr-clock__city{top:48%;font-size:1.9cqw}
.hr-clock__time{top:79%;font-size:3.05cqw}
.hr-clock__colon{animation:hrColon 2s steps(1) infinite}
@keyframes hrColon{50%{opacity:.25}}
:root[data-theme="light"] .hr-clock{color:#4fd197;text-shadow:0 0 .3cqw rgba(79,209,151,.5)}
@media (prefers-reduced-motion:reduce){ .hr-clock__colon{animation:none} }

/* =====================================================================
   PHOTO FIXE — l'illustration ne bouge plus jamais : ni parallaxe, ni inclinaison, ni reflet,
   ni zoom à l'apparition, ni effet au défilement. Mêmes dimensions et même emplacement de jour comme de nuit
   (seul un fondu passe d'une photo à l'autre quand on clique sur la lampe).
   ===================================================================== */
.hr-scene__layer,.hr-hero.is-ready .hr-scene__layer{transform:none!important;animation:none!important;will-change:auto}
.hr-scene,.hr-hero .hr-scene{animation:none!important;transform:none!important;filter:none!important;opacity:1!important}
.hr-scene__glare{display:none}

/* =====================================================================
   FINITIONS
   • Badge : largeur ajustée à son texte (il ne déborde plus, dans toutes les langues).
   • Mode jour : le hero n'a plus de fond propre — la photo se fond dans le cadre, sans bord ni bande.
   ===================================================================== */
.hr-badge{width:auto;padding-inline:2.1cqw}
:root[data-theme="light"] .hr-hero{background:transparent}
@media (max-width:760px){ .hr-badge{padding-inline:18px} }
/* mode jour : le fondu haut/bas est porté par la scène elle-même → la photo disparaît exactement au bord du hero */
@media (min-width:761px){
  :root[data-theme="light"] .hr-scene__layer{-webkit-mask-image:linear-gradient(90deg,transparent 24%,#000 47%);mask-image:linear-gradient(90deg,transparent 24%,#000 47%)}
  :root[data-theme="light"] .hr-scene{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 9%,#000 78%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 9%,#000 78%,transparent 100%)}
}

/* =====================================================================
   TÉLÉPHONE COMPACT — même composition que sur ordinateur (texte à gauche, photo à droite),
   tailles réduites : toute la page d'accueil tient dans l'écran, sans défilement.
   ===================================================================== */
@media (max-width:760px){
  .hr-scene{aspect-ratio:auto;height:54cqw}
  .hr-scene::after{background:linear-gradient(180deg,#000 0,transparent 9%,transparent 86%,#000 100%)}
  .hr-scene__layer{top:0;bottom:auto;left:auto;right:-2cqw;height:100%;width:auto;aspect-ratio:2000/1116}
  .hr-copy{position:absolute;inset:0;margin:0;padding:0}
  .hr-title,.hr-badge,.hr-text{position:absolute;margin:0}
  .hr-title{left:3.4cqw;top:5.5cqw;font-size:7.6cqw}
  .hr-badge{left:3.2cqw;top:23cqw;width:auto;height:auto;display:inline-grid;padding:1.2cqw 2.2cqw;border-radius:1.8cqw;font-size:2.75cqw;
    box-shadow:inset 0 0 0 max(1px,.35cqw) var(--hr-badge-line),inset 0 0 2cqw rgba(var(--hr-badge-rgb),.4),0 0 1.2cqw rgba(var(--hr-badge-rgb),.8),0 0 3.5cqw rgba(var(--hr-badge-rgb),.4)}
  .hr-text{left:3.4cqw;top:30.5cqw;width:40cqw;font-size:2.95cqw;line-height:1.42}
  .hr-title__last,.hr-title__first{filter:drop-shadow(0 0 1.6cqw rgba(160,190,255,.3))}
  :root[data-theme="light"] .hr-scene__layer{-webkit-mask-image:linear-gradient(90deg,transparent 22%,#000 46%);mask-image:linear-gradient(90deg,transparent 22%,#000 46%)}
  :root[data-theme="light"] .hr-scene{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 9%,#000 82%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 9%,#000 82%,transparent 100%)}
  .hr-hero:dir(rtl) .hr-text{text-align:left}
}

/* ---------- Téléphone : nom, badge et texte centrés dans leur colonne (à gauche de la photo) ---------- */
@media (max-width:760px){
  .hr-copy{text-align:center}
  .hr-title{left:1cqw;width:45cqw;display:flex;flex-direction:column;align-items:center}
  .hr-badge{left:23.5cqw;transform:translateX(-50%);white-space:nowrap}
  .hr-text{left:4.5cqw;width:38cqw;text-align:center;font-size:2.8cqw}
}