/* ============================================================
   Hero immersif accueil — copie exacte de la maquette
   (2026-08-22-hero-immersif-maquette.html). Auto-suffisant :
   variables locales scopées sous .nhero, aucun token global.
   S'appuie sur la structure sticky existante (.home-hero-zone /
   .home-hero-stage) et le moteur slideshow js/home.js.
   ============================================================ */

.nhero{
  --cream:var(--on-dark); --cream-muted:var(--on-dark-muted);
  --ocre:#C06A2C; --ocre-bright:#D3792F;
  --font-head:'Oswald',sans-serif; --font-body:'Lato',sans-serif;
}

/* image des slides : bas toujours visible ; si crop, c'est le haut qui part */
.nhero .home-hero-slide-img{object-position:50% 100%}

/* voiles de lisibilité (haut / centre / bas) */
/* Double spot : scrim haut léger, dégradé bas léger, + deux spots radiaux
   ancrés bas-gauche (titre) et bas-droite (légende) — met en valeur les 2 zones
   de texte sans noyer l'image (centre dégagé). */
.nhero .nh-top{position:absolute;inset:0;pointer-events:none;z-index:2;
  background:linear-gradient(to bottom,rgba(10,9,8,.33),rgba(10,9,8,0) 22%)}
.nhero .nh-bottom{position:absolute;inset:0;pointer-events:none;z-index:2;
  background:linear-gradient(to top,rgba(10,9,8,.42),rgba(10,9,8,0) 42%)}
.nhero .nh-center{position:absolute;inset:0;pointer-events:none;z-index:2;
  background:radial-gradient(64% 82% at 12% 108%,rgba(10,9,8,.70),rgba(10,9,8,0) 64%),
             radial-gradient(52% 50% at 90% 107%,rgba(10,9,8,.58),rgba(10,9,8,0) 60%)}

/* bloc titre — largeur cible W ; les 2 lignes y sont calées exactement
   (font-size = W/k, k mesuré sur Oswald 600 : 8.651 / 10.239) */
.nhero .nh-block{position:absolute;z-index:5;left:7.5vw;
  bottom:clamp(70px,12vh,150px);text-align:left;width:clamp(300px,40vw,560px)}
.nhero .nh-h1{font-family:var(--font-head);font-weight:600;text-transform:uppercase;
  letter-spacing:0;line-height:.92;color:var(--cream);
  margin:0 0 clamp(8.57px,1.143vw,16px);text-shadow:0 2px 26px rgba(0,0,0,.42)}
.nhero .nh-h1 .ln{display:block;white-space:nowrap}
.nhero .nh-h1 .ln1{font-size:clamp(34.68px,4.624vw,64.73px)}   /* MOROCCO'S WILDLIFE */
.nhero .nh-h1 .ln2{font-size:clamp(29.30px,3.907vw,54.69px);margin-top:.12em} /* MADE ACCESSIBLE TO ALL */
/* FR — mêmes calculs, k mesuré : LA FAUNE DU MAROC 8.350 / ACCESSIBLE À TOUS 7.962 */
html[lang="fr"] .nhero .nh-h1 .ln1{font-size:clamp(35.93px,4.790vw,67.07px)}
html[lang="fr"] .nhero .nh-h1 .ln2{font-size:clamp(37.68px,5.024vw,70.33px)}

.nhero .nh-row{display:grid;grid-template-columns:max-content 1fr;
  column-gap:clamp(15px,2vw,28px);align-items:stretch;width:100%}
.nhero .nh-sub{margin:0;text-align:left;font-family:var(--font-body);font-weight:400;
  font-size:clamp(9.64px,1.286vw,18px);line-height:1.28;color:var(--cream);opacity:.9;
  text-shadow:0 1px 14px rgba(0,0,0,.55)}

/* bouton outline (remplit la moitié droite, même hauteur que le sous-titre) */
/* #d-root pour battre `#d-root a:not(.btn){color:var(--ocre)}` de home.css */
#d-root .nhero a.nh-btn{box-sizing:border-box;display:flex;align-items:center;justify-content:center;
  width:100%;text-align:center;padding:15px 20px;border-radius:2px;text-decoration:none;
  font-family:var(--font-body);font-weight:700;text-transform:uppercase;
  letter-spacing:.08em;font-size:13px;line-height:1.1;color:var(--on-dark);
  background:rgba(244,239,230,.05);border:1.5px solid rgba(244,239,230,.7);
  backdrop-filter:blur(2px);transition:background .2s,border-color .2s}
#d-root .nhero a.nh-btn:hover{background:rgba(244,239,230,.16);border-color:var(--on-dark);color:var(--on-dark)}

/* pied bas-droite : nom vernaculaire + nom latin + chevrons */
.nhero .nh-foot{position:absolute;bottom:0;left:0;right:0;z-index:6;
  display:flex;align-items:center;justify-content:flex-end;
  padding:0 clamp(20px,4vw,48px) 30px;gap:18px}
/* Alignement à droite par text-align, PAS par align-items : l'axe secondaire d'un
   flex column s'inverse si un descendant passe en direction:rtl (cas de l'arabe,
   bug constaté puis corrigé le 2026-09-18 sur le hero mobile). */
.nhero .nh-lbl{display:flex;flex-direction:column;gap:3px;
  text-align:right;line-height:1.15}
.nhero .nh-lbl .cn{font-family:var(--font-head);font-weight:600;text-transform:uppercase;
  letter-spacing:.05em;font-size:16px;color:var(--cream)}
.nhero .nh-lbl .sp{font-family:var(--font-body);font-style:italic;font-size:14px;color:var(--cream-muted)}

.nhero .nh-arrows{display:flex;gap:10px;align-items:center}
.nhero .nh-arrows button{background:none;border:0;cursor:pointer;padding:6px;line-height:0;
  color:var(--cream);opacity:.85;filter:drop-shadow(0 1px 10px rgba(0,0,0,.7));
  transition:opacity .2s,color .2s,transform .16s}
.nhero .nh-arrows button::before{content:'';display:block;width:12px;height:12px;
  border-right:2.5px solid currentColor;border-bottom:2.5px solid currentColor}
.nhero .nh-arrows button.prev::before{transform:rotate(135deg)}
.nhero .nh-arrows button.next::before{transform:rotate(-45deg)}
.nhero .nh-arrows button:hover{opacity:1;color:var(--ocre-bright)}
.nhero .nh-arrows button:active{transform:scale(.94)}

@media(max-width:820px){
  .nhero .nh-block{left:20px;bottom:92px}
  .nhero .nh-row{grid-template-columns:1fr 1fr;column-gap:14px}
  .nhero .nh-foot{padding-bottom:22px}
}

/* ============================================================
   Hero MOBILE (#m-root, arbre mobile) — photo immersive (62%)
   + bandeau noir (38%). Titre calé au pixel : font-size = (W)/k
   avec W = largeur du bandeau = 100vw - 40px (padding 20px x2),
   k mesuré sur Oswald 600 (8.651 / 10.239). Généré par
   js/home-init.js > buildHero à partir de la source unique desktop.
   ============================================================ */
@media(max-width:768px){
  #m-root .mh{position:relative;width:100%;height:100vh;min-height:100vh;overflow:hidden;
    background:var(--bg-dark);color:var(--on-dark);font-family:'Lato',sans-serif;display:flex;flex-direction:column}
  #m-root .mh-photowrap{position:relative;flex:1 1 auto;min-height:0;overflow:hidden}
  #m-root .mh-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
    object-position:50% 42%;transition:opacity .35s ease,filter .35s ease;z-index:0}

  #m-root .mh-bottom{flex:0 0 auto;background:var(--bg-dark);
    padding:10px 20px calc(16px + env(safe-area-inset-bottom));
    display:flex;flex-direction:column}
  #m-root .mh-spbar{display:flex;align-items:center;justify-content:space-between;gap:12px}
  /* même règle qu'en desktop : l'alignement passe par text-align, pas align-items. */
  #m-root .mh-lbl{display:flex;flex-direction:column-reverse;gap:2px;min-width:0;text-align:right}
  #m-root .mh-cn{font-family:'Oswald',sans-serif;font-weight:600;text-transform:uppercase;
    letter-spacing:.05em;font-size:15px;line-height:1.15;color:var(--on-dark)}
  #m-root .mh-sp{font-style:italic;font-size:13px;color:var(--on-dark-muted)}
  #m-root .mh-arrows{display:flex;gap:12px;align-items:center;flex:0 0 auto;order:-1;transform:translateY(2px)}
  #m-root .mh-arrows button{background:none;border:0;cursor:pointer;padding:4px;line-height:0;color:var(--on-dark)}
  #m-root .mh-arrows button::before{content:'';display:block;width:11px;height:11px;
    border-right:2.5px solid currentColor;border-bottom:2.5px solid currentColor}
  #m-root .mh-prev::before{transform:rotate(135deg)}
  #m-root .mh-next::before{transform:rotate(-45deg)}
  #m-root .mh-div{height:1px;background:rgba(244,239,230,.14);margin:10px 0 14px}

  #m-root .mh-h1{font-family:'Oswald',sans-serif;font-weight:600;text-transform:uppercase;
    letter-spacing:0;line-height:.92;color:var(--on-dark);margin:0;
    font-size:clamp(30px,8.5vw,44px)}  /* fallback si le titre n'a pas les lignes ln1/ln2 (FR non porté) */
  #m-root .mh-h1 .ln{display:block;white-space:nowrap}
  #m-root .mh-h1 .ln1{font-size:calc((100vw - 40px)/8.651)}   /* MOROCCO'S WILDLIFE */
  #m-root .mh-h1 .ln2{font-size:calc((100vw - 40px)/10.239);margin-top:.1em} /* MADE ACCESSIBLE TO ALL */
  html[lang="fr"] #m-root .mh-h1 .ln1{font-size:calc((100vw - 40px)/8.350)}   /* LA FAUNE DU MAROC */
  html[lang="fr"] #m-root .mh-h1 .ln2{font-size:calc((100vw - 40px)/7.962)}   /* ACCESSIBLE À TOUS */
  #m-root .mh-sub{margin:12px 0 0;font-family:'Lato',sans-serif;font-size:15px;line-height:1.3;
    color:var(--on-dark);opacity:.86}
  #m-root .mh-sub br{display:none} /* mobile : sous-titre sur toute la largeur, pas de coupe forcée */
  #m-root a.mh-btn{display:flex;align-items:center;justify-content:center;width:100%;margin-top:16px;
    padding:14px;border-radius:2px;text-decoration:none;font-family:'Lato',sans-serif;font-weight:700;
    text-transform:uppercase;letter-spacing:.08em;font-size:13px;line-height:1.1;color:var(--on-dark);
    border:1.5px solid rgba(244,239,230,.55);background:rgba(244,239,230,.05)}
}