/* ==========================================================================
   VAGABON — css/pages/home.css
   Styles de la page d'accueil / landing (index.html).

   Contient le système complet du Hero d'introduction (.home-hero /
   .explore-button), avec un visuel cinématographique fixe en arrière-plan
   plein écran (calque unique, aucune découpe). Composition inspirée, dans
   sa seule LOGIQUE (écran plein, centre fort, cadre décoratif, générique),
   d'une introduction cinématographique — aucun asset, aucune classe et
   aucun texte n'est repris d'un site tiers. Tout appartient à l'identité
   Vagabon (#008AC9, #000000, #FFFFFF). Ces styles sont préfixés .home-hero /
   .explore-button et scoped à cette page : ils ne modifient aucune autre
   page du site.

   PROMOTION PRODUCTION (home-hero-cinematic) : l'ancien univers 3D Marble
   (iframe) a été entièrement retiré — il n'est plus chargé, affiché, masqué
   ni conservé en repli. Le Hero affiche désormais .home-hero__cinematic-layer,
   un calque image unique peint en CSS (voir plus bas), animé de façon
   optionnelle par js/home-hero-cinematic.js (respiration idle, parallaxe
   scroll + souris). Le voile sombre artificiel (.home-hero__video-overlay)
   a été supprimé : l'image est volontairement lumineuse. La classe de
   section .home-hero--video a été renommée .home-hero--cinematic (plus de
   vidéo ni de Marble). Le bouton son du header, déjà sans fonction depuis
   Marble, et ses styles associés ont également été retirés de ce fichier.

   NETTOYAGE DU SITE : l'ancien portfolio (autres pages) et l'ancien univers
   Marble (universe.html) ont été retirés du projet. Ce fichier ne sert plus
   qu'à index.html, seule page restante.
   ========================================================================== */

/* ---------------------------------------------------------------------- */
/* Verrou de scroll — landing page (index.html), seule page du projet.      */
/* La landing occupe 100% du viewport et ne doit jamais pouvoir défiler     */
/* vers un contenu situé sous elle (il n'y en a d'ailleurs pas dans le DOM  */
/* de cette page). N'affecte ni le visuel, ni les textes, ni les animations,*/
/* ni les contrôles du Hero.                                                */
/* ---------------------------------------------------------------------- */
html.is-landing-locked,
html.is-landing-locked body {
  height: 100%;
  overflow: hidden;
}

/* ---------------------------------------------------------------------- */
/* Variables locales au Hero                                               */
/* ---------------------------------------------------------------------- */

.home-hero {
  --hero-frame-offset: clamp(14px, 2.4vw, 32px);
  --hero-corner-size: clamp(26px, 3.6vw, 52px);
  --hero-accent-soft: color-mix(in srgb, var(--color-accent) 55%, transparent);
  --hero-accent-faint: color-mix(in srgb, var(--color-accent) 22%, transparent);

  position: relative;
  isolation: isolate;
  min-height: 100svh;
  min-height: 100dvh;
  display: grid;
  grid-template-rows: 1fr auto;
  align-items: center;
  justify-items: center;
  overflow: hidden;
  padding-top: var(--nav-height);
  background: var(--color-background);
  transition: opacity var(--duration-slow) var(--ease-standard);
}

/* ---------------------------------------------------------------------- */
/* Hero volontairement sombre dans les deux thèmes : le visuel             */
/* cinématographique reste lisible avec du texte blanc quelle que soit sa  */
/* luminosité locale (voir text-shadow plus bas). Redéclarer les jetons de */
/* couleur ICI, localement, suffit à figer tout le sous-arbre du Hero en   */
/* apparence sombre — le reste du site continue de suivre normalement      */
/* [data-theme].                                                           */
/*                                                                          */
/* Depuis la refonte graphique "post-Hero" (nouvelle palette claire +       */
/* échelle d'espacements légèrement augmentée sitewide), les jetons         */
/* --space-* sont eux aussi redéclarés ICI, à leur valeur D'ORIGINE : le    */
/* Hero doit rester pixel pour pixel identique à son état actuel, y        */
/* compris ses espacements internes (metadata, bouton, marges), qui         */
/* utilisent ces mêmes variables partagées. Consigne explicite : "ne pas   */
/* toucher... à la structure générale du Hero". */
/* ---------------------------------------------------------------------- */

.home-hero--cinematic {
  --color-background: #000000;
  --color-text: #FFFFFF;
  --color-text-muted: #B5B5B5;
  --color-text-subtle: #7D7D7D;
  --color-border: rgba(255, 255, 255, 0.16);
  --color-surface: #101010;
  color-scheme: dark;

  /* Espacements figés à leur valeur d'origine (avant l'augmentation
     sitewide de la section "espaces" de la refonte post-Hero). */
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: 4rem;
  --space-2xl: 6rem;
}

/* Légère sortie de scène lorsque le visiteur commence à défiler
   (section 15 du brief) — appliquée par js/animations.js via
   initHeroLeaveEffect(). Reste très subtile, transform/opacity uniquement. */
.home-hero.is-leaving .home-hero__frame {
  opacity: 0.35;
}
.home-hero.is-leaving .home-hero__bottom {
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
}

/* ---------------------------------------------------------------------- */
/* Header — retiré entièrement de cette page (correction production,       */
/* home-hero-cinematic) : <header class="c-header"> n'existe plus du tout  */
/* dans index.html (voir ce fichier). Toutes les règles qui stylaient ce   */
/* header sur la page d'accueil (dégradé sombre, spacer, actions,          */
/* [data-lang-toggle], .c-btn--secondary, media query desktop) sont donc   */
/* devenues mortes et ont été retirées d'ici. Rien de ceci n'affecte les   */
/* autres pages : leur <header> reste physiquement présent dans leur       */
/* propre HTML et suit toujours ses styles normaux (components.css).       */
/* .home-hero avait un padding-top: var(--nav-height) pour réserver de     */
/* l'espace sous le header fixe (voir plus haut) : neutralisé ci-dessous,  */
/* scoped à .home-hero--cinematic, puisque cet espace n'a plus lieu d'être */
/* sans header sur cette page.                                             */
/* ---------------------------------------------------------------------- */

.home-hero.home-hero--cinematic {
  padding-top: 0;
}

/* Doré sitewide (audit uniformisation boutons/CTA) : le header de cette
   page reste sombre en permanence (dégradé noir au repos, noir 88% une fois
   scrollé — voir body.page-home .c-header plus haut), contrairement au
   fallback global de components.css (--color-warm-on-light, pensé pour un
   fond clair). Ces boutons ont donc besoin du doré VIF --color-warm,
   exactement comme .explore-button ci-dessus et .universe-cta sur
   universe.html. Structure inchangée (bordure fine pour les boutons ronds,
   bordure + fond transparent pour "Réserver un appel") — seule la teinte de
   survol change. */
.page-home .c-header__actions .c-icon-btn:hover,
.page-home .c-header__actions .c-icon-btn:focus-visible,
.page-home .c-header__actions .c-icon-btn:active,
.page-home .c-menu-toggle:hover,
.page-home .c-menu-toggle:focus-visible,
.page-home .c-menu-toggle:active {
  border-color: var(--color-warm-soft);
  background: color-mix(in srgb, var(--color-warm) 14%, transparent);
  color: var(--color-warm);
  outline-color: var(--color-warm);
}

.page-home .c-header__actions .c-btn--secondary:hover,
.page-home .c-header__actions .c-btn--secondary:focus-visible,
.page-home .c-header__actions .c-btn--secondary:active {
  border-color: var(--color-warm-soft);
  background: color-mix(in srgb, var(--color-warm) 10%, transparent);
  color: var(--color-warm);
  outline-color: var(--color-warm);
}

/* Doré sitewide (audit uniformisation boutons/CTA, passe 2) : les barres du
   burger (.c-menu-toggle__bar, fond via background et non color) ne
   suivaient pas le survol/focus/clic du bouton lui-même. Un fallback
   global doré "fond clair" existe désormais pour toutes les pages
   (components.css, --color-warm-on-light) — cette page a besoin de sa
   propre surcharge en doré VIF (--color-warm), cohérente avec le reste des
   boutons du header sur ce Hero sombre, plus spécifique donc prioritaire
   sur le fallback global. */
.page-home .c-menu-toggle:hover .c-menu-toggle__bar,
.page-home .c-menu-toggle:focus-visible .c-menu-toggle__bar,
.page-home .c-menu-toggle:active .c-menu-toggle__bar {
  background: var(--color-warm);
}

/* ---------------------------------------------------------------------- */
/* Curseur — page d'accueil uniquement. js/cursor.js ne crée plus les       */
/* éléments .cursor-dot/.cursor-ring ici (voir isHomePage dans ce fichier)  */
/* et pose déjà html.no-custom-cursor, qui les masque via la règle          */
/* existante de components.css. Ces quelques règles rétablissent           */
/* explicitement le curseur natif + le pointer sur les éléments cliquables, */
/* y compris la carte projet qui avait cursor:none pour laisser place à     */
/* l'ancien curseur personnalisé (.c-card-project[data-cursor-label], voir  */
/* components.css) — sans quoi elle n'afficherait plus aucun curseur ici.   */
/* Le composant .cursor-dot/.cursor-ring reste entièrement fonctionnel sur  */
/* toutes les autres pages, js/cursor.js n'est pas supprimé. */
body.page-home {
  cursor: auto;
}
body.page-home a,
body.page-home button,
body.page-home [role="button"] {
  cursor: pointer;
}
body.page-home .c-card-project[data-cursor-label] {
  cursor: pointer;
}

/* ---------------------------------------------------------------------- */
/* Zone 1 — Visuel cinématographique fixe en arrière-plan plein écran      */
/* (remplace l'ancien univers 3D Marble, entièrement retiré du projet —    */
/* il n'est plus chargé, affiché, masqué ni conservé en repli)             */
/* ---------------------------------------------------------------------- */

.home-hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
}

/* Calque unique, peint entièrement en CSS : s'affiche immédiatement sans
   dépendre de JavaScript ni de GSAP (voir index.html, commentaire du
   Hero). js/home-hero-cinematic.js applique seulement transform/opacity
   par-dessus (respiration idle, parallaxe) — jamais l'affichage lui-même.
   inset:-3% (léger débord) donne de la marge aux transformations de
   parallaxe sans jamais laisser apparaître de bord vide. background-position
   calé pour garder le visage en entier avec un léger espace au-dessus,
   le personnage centré et le logo VAGABON lisible (cadrage validé en
   Playground, non modifiable ici sans repasser par une nouvelle validation). */
.home-hero__cinematic-layer {
  position: absolute;
  inset: -3%;
  background-image: url("../../assets/images/hero/vagabon-hero-cinematic.png");
  background-size: cover;
  background-position: center 10%;
  background-repeat: no-repeat;
  will-change: transform;
}

/* Aucun voile sombre artificiel : l'image fournie est volontairement
   lumineuse (décision validée en Playground). Le texte reste lisible grâce
   au text-shadow ci-dessous, jamais via un overlay assombrissant l'image. */

/* Sélecteur .home-hero.home-hero--cinematic (spécificité volontairement
   accrue) : l'emporte sur les couleurs #aec7d8/var(--color-text-subtle)
   déclarées plus bas (Zone 3, .home-hero__metadata-value et
   .home-hero__metadata-side--right .home-hero__metadata-label), qui
   restent la valeur par défaut du composant metadata hors de ce Hero.
   Couleur blanche uniforme + ombre portée : paramètres validés en
   Playground avant cette promotion. */
.home-hero.home-hero--cinematic .home-hero__eyebrow-text,
.home-hero.home-hero--cinematic .home-hero__metadata-label,
.home-hero.home-hero--cinematic .home-hero__metadata-value,
.home-hero.home-hero--cinematic .home-hero__statement,
.home-hero.home-hero--cinematic .explore-button__label {
  color: #FFFFFF;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.6);
}

/* ---------------------------------------------------------------------- */
/* Zone 1bis — Cadre graphique décoratif (quatre coins indépendants)       */
/* ---------------------------------------------------------------------- */

.home-hero__frame {
  position: absolute;
  inset: var(--hero-frame-offset);
  z-index: 2;
  pointer-events: none;
  transition: opacity var(--duration-slow) var(--ease-standard);
}

.home-hero__corner {
  position: absolute;
  width: var(--hero-corner-size);
  height: var(--hero-corner-size);
  border: 1.5px solid var(--hero-accent-soft);
}

.home-hero__corner--top-left {
  top: 0; left: 0;
  border-right: none; border-bottom: none;
  border-top-left-radius: 14px;
}
.home-hero__corner--top-right {
  top: 0; right: 0;
  border-left: none; border-bottom: none;
  border-top-right-radius: 14px;
}
.home-hero__corner--bottom-left {
  bottom: 0; left: 0;
  border-right: none; border-top: none;
  border-bottom-left-radius: 14px;
}
.home-hero__corner--bottom-right {
  bottom: 0; right: 0;
  border-left: none; border-top: none;
  border-bottom-right-radius: 14px;
}

/* ---------------------------------------------------------------------- */
/* Zone 3 + 6 — Contenu central (surtitre, H1 accessible, métadonnées)     */
/* ---------------------------------------------------------------------- */

.home-hero__content {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: clamp(var(--space-md), 5vw, var(--space-2xl));
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: clamp(var(--space-md), 3vh, var(--space-lg));
}

/* Surtitre centré, lignes qui se déploient vers les côtés */
.home-hero__eyebrow {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  width: min(100%, 640px);
}

.home-hero__eyebrow-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--hero-accent-soft));
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 900ms var(--ease-standard);
}
.home-hero__eyebrow-line:last-child {
  background: linear-gradient(270deg, transparent, var(--hero-accent-soft));
}
[data-reveal].is-visible .home-hero__eyebrow-line {
  transform: scaleX(1);
}

.home-hero__eyebrow-text {
  flex-shrink: 0;
  font-family: var(--font-display);
  font-size: var(--font-size-xs);
  letter-spacing: var(--letter-spacing-eyebrow);
  text-transform: uppercase;
  color: var(--color-text-muted);
  white-space: nowrap;
}

/* Ligne de métadonnées (direction à gauche / localisation à droite). La
   phrase principale ne vit plus ici (voir .home-hero__bottom plus bas) :
   ces deux blocs restent seuls dans le tiers central, discrets, sans
   chevaucher ni le monument ni la phrase désormais placée en bas. */
.home-hero__metadata {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: clamp(var(--space-md), 4vw, var(--space-xl));
  width: 100%;
  max-width: 640px;
}

.home-hero__metadata-side {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.home-hero__metadata-side--right {
  align-items: flex-end;
  text-align: right;
}

.home-hero__metadata-label {
  /* Labels "DIRECTION" / "BASÉ À" en Good Times (charte section 24.6). */
  font-family: var(--font-display);
  font-size: var(--font-size-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-subtle);
}

/* "BASÉ À" (label du côté droit uniquement) rejoint la couleur #aec7d8
   demandée pour l'ensemble de la phrase "Basé à Reims · France" — le
   label "DIRECTION" du côté gauche n'est pas concerné et garde sa
   couleur d'origine ci-dessus. Taille, police, espacement inchangés. */
.home-hero__metadata-side--right .home-hero__metadata-label {
  color: #aec7d8;
}

.home-hero__metadata-value {
  font-size: var(--font-size-small);
  /* #aec7d8 demandé pour "Virgil Boukraa" (côté gauche) et, avec la règle
     ci-dessus, pour l'ensemble de "Basé à Reims · France" (côté droit,
     valeur = "Reims · France"). Taille, graisse et emplacement inchangés. */
  color: #aec7d8;
  font-weight: 700;
}

/* Phrase principale : reste sous le personnage visible dans le visuel, juste
   au-dessus du bouton d'exploration (voir .home-hero__bottom). En Stigsa
   Display (charte section 24.6) : hérite de var(--font-body) depuis body,
   ne pas ajouter font-family: Good Times ici. Largeur de lecture maîtrisée
   pour rester confortable sur deux à trois lignes plutôt qu'une seule ligne
   trop large ou un pavé trop étroit. */
.home-hero__statement {
  margin: 0;
  max-width: 46ch;
  font-size: clamp(1.05rem, 1.5vw, var(--font-size-body-lg));
  line-height: 1.4;
  color: var(--color-text);
}

/* ---------------------------------------------------------------------- */
/* Zone 7 + 8 — Phrase principale + bouton d'exploration                  */
/* ---------------------------------------------------------------------- */

.home-hero__bottom {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: clamp(var(--space-sm), 2vh, var(--space-md));
  width: min(90vw, 760px);
  margin-inline: auto;
  padding-bottom: max(var(--space-xl), env(safe-area-inset-bottom));
  padding-top: var(--space-md);
  transition: opacity var(--duration-slow) var(--ease-standard),
              transform var(--duration-slow) var(--ease-standard);
}

.explore-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: clamp(220px, 26vw, 300px);
  min-height: 56px;
  padding: var(--space-sm) var(--space-xl);
  background: color-mix(in srgb, var(--color-surface) 55%, transparent);
  border: 1px solid var(--color-border);
  color: var(--color-text);
  overflow: hidden;
  transition: border-color var(--duration-base) var(--ease-standard),
              background-color var(--duration-base) var(--ease-standard),
              transform var(--duration-fast) var(--ease-standard);
}

/* Renforcement du contraste du bouton sur le visuel cinématographique :
   fond assombri + flou de verre, pour rester lisible quelle que soit la
   zone de l'image affichée à cet endroit, sans devenir opaque au point de
   masquer le visuel. */
.home-hero--cinematic .explore-button {
  background: rgba(0, 0, 0, 0.36);
  border-color: rgba(255, 255, 255, 0.35);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* Doré sitewide (audit uniformisation boutons/CTA) : border-color détachée
   de --hero-accent-soft (partagée avec le cadre décoratif du Hero et ses
   coins, non concernés par ce changement — voir .explore-button__corner
   plus bas, volontairement inchangé) au profit du doré vif --color-warm,
   réservé aux boutons posés sur un fond sombre comme ce Hero. */
/* Doré sitewide (audit uniformisation boutons/CTA, passe 2) : jusqu'ici,
   seuls border-color/background/color étaient corrigés au clavier
   (:focus-visible) — la bague de focus elle-même (outline, posée
   globalement en bleu par :focus-visible dans base.css et jamais
   surchargée par les règles boutons) restait visible et bleue derrière ce
   correctif. outline-color est désormais explicitement aligné sur le même
   doré, sur CE bouton et tous les autres boutons du site (voir chaque
   fichier css/pages/*.css et components.css). Sans effet sur :hover/:active
   seuls (l'outline ne s'affiche que si :focus-visible correspond réellement
   — safe à ajouter dans le même bloc groupé). */
.explore-button:hover,
.explore-button:focus-visible,
.explore-button:active {
  border-color: var(--color-warm-soft);
  background: color-mix(in srgb, var(--color-surface) 75%, transparent);
  outline-color: var(--color-warm);
}

/* Doré sitewide (audit uniformisation boutons/CTA) : cette règle avait été
   reportée telle quelle (bleu #008AC9) lors du renommage .home-hero--video
   → .home-hero--cinematic pendant la promotion du Hero cinématographique,
   sans jamais recevoir la correction dorée appliquée au reste du site.
   Corrigée ici avec le même doré vif que .explore-button ci-dessus. */
.home-hero--cinematic .explore-button:hover,
.home-hero--cinematic .explore-button:focus-visible,
.home-hero--cinematic .explore-button:active {
  border-color: var(--color-warm);
  background: rgba(199, 163, 78, 0.14);
  outline-color: var(--color-warm);
}

.explore-button:active {
  transform: scale(0.98);
}

.explore-button__label {
  position: relative;
  z-index: 2;
  font-family: var(--font-display);
  font-size: var(--font-size-small);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  /* Sans couleur explicite, ce texte héritait de la valeur déjà résolue
     par body { color: var(--color-text) } (sombre, thème global) : même
     si .home-hero--cinematic redéfinit --color-text en blanc, cette
     redéfinition ne s'applique qu'aux descendants qui RÉFÉRENCENT la
     variable, pas à un héritage de couleur déjà calculée plus haut dans
     l'arbre. D'où le texte peu lisible malgré le fond sombre du bouton. */
  color: #FFFFFF;
  transition: transform var(--duration-fast) var(--ease-standard);
}

.explore-button:hover .explore-button__label,
.explore-button:focus-visible .explore-button__label {
  transform: translateX(2px);
}

/* Coins du bouton, même logique visuelle que le cadre du Hero */
.explore-button__corner {
  position: absolute;
  width: 14px;
  height: 14px;
  border: 1.5px solid var(--hero-accent-soft);
  transition: width var(--duration-base) var(--ease-standard),
              height var(--duration-base) var(--ease-standard);
}
.explore-button__corner--top-left { top: -1px; left: -1px; border-right: none; border-bottom: none; }
.explore-button__corner--top-right { top: -1px; right: -1px; border-left: none; border-bottom: none; }
.explore-button__corner--bottom-left { bottom: -1px; left: -1px; border-right: none; border-top: none; }
.explore-button__corner--bottom-right { bottom: -1px; right: -1px; border-left: none; border-top: none; }

.explore-button:hover .explore-button__corner,
.explore-button:focus-visible .explore-button__corner {
  width: 20px;
  height: 20px;
}

/* Fine texture de grille + lumière balayant le bouton au survol */
.explore-button__grid {
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image: repeating-linear-gradient(90deg, color-mix(in srgb, var(--color-text) 6%, transparent) 0px, transparent 1px, transparent 18px);
  opacity: 0.5;
}

/* Doré sitewide (audit uniformisation boutons/CTA) : ce balayage lumineux
   n'est visible qu'au survol/focus (voir .explore-button:hover::after plus
   bas, qui fait glisser ce calque de -60% à 130%) — c'était donc bien un
   bleu qui apparaissait spécifiquement DANS l'état interactif du bouton,
   invisible au repos. Remplacé par le même doré vif que le reste du bouton. */
.explore-button::after {
  content: "";
  position: absolute;
  top: 0;
  left: -60%;
  width: 40%;
  height: 100%;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--color-warm) 22%, transparent), transparent);
  transform: skewX(-18deg);
  transition: left 700ms var(--ease-standard);
  z-index: 1;
  pointer-events: none;
}

.explore-button:hover::after,
.explore-button:focus-visible::after {
  left: 130%;
}

/* ---------------------------------------------------------------------- */
/* Choréographie d'entrée (rejoue le système [data-reveal] global, avec   */
/* un décalage propre au Hero piloté par --reveal-delay en style inline)  */
/* ---------------------------------------------------------------------- */

.home-hero [data-reveal] {
  transition-delay: var(--reveal-delay, 0ms);
}

/* ---------------------------------------------------------------------- */
/* Mouvement réduit                                                         */
/* ---------------------------------------------------------------------- */

/* reset.css neutralise déjà globalement animation-duration /
   transition-duration sous prefers-reduced-motion pour les transitions
   CSS classiques (reveal, hover…). Le mouvement piloté par GSAP
   (respiration idle, parallaxe) est géré séparément et explicitement par
   js/home-hero-cinematic.js, qui applique un rendu statique équivalent
   sous prefers-reduced-motion (voir ce fichier). */

/* ---------------------------------------------------------------------- */
/* Responsive — tablette                                                    */
/* ---------------------------------------------------------------------- */

@media (max-width: 1024px) {
  .home-hero__metadata {
    max-width: min(90vw, 520px);
  }
}

/* ---------------------------------------------------------------------- */
/* Responsive — mobile (ordre : surtitre, métadonnées, phrase, bouton —    */
/* cf. section 8 de la demande de repositionnement)                        */
/* ---------------------------------------------------------------------- */

@media (max-width: 768px) {
  .home-hero {
    --hero-frame-offset: clamp(10px, 4vw, 18px);
    --hero-corner-size: clamp(20px, 8vw, 32px);
    padding-top: calc(var(--nav-height) - 8px);
  }

  .home-hero__content {
    gap: var(--space-md);
  }

  /* Les informations latérales passent l'une sous l'autre plutôt que de
     disparaître (aucune information n'est perdue sur mobile). */
  .home-hero__metadata {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-sm);
  }
  .home-hero__metadata-side--right {
    align-items: center;
    text-align: center;
  }

  .home-hero__bottom {
    width: min(94vw, 480px);
  }

  .explore-button {
    min-width: min(86vw, 320px);
  }
}

@media (max-width: 420px) {
  .home-hero__eyebrow-text {
    font-size: 0.65rem;
  }
  .home-hero__statement {
    font-size: var(--font-size-body);
  }
}

/* Pas de curseur personnalisé ni d'effet de survol sur tactile : le bouton
   reste pleinement utilisable au doigt (cf. .c-btn / .filter-btn dans
   responsive.css, même logique appliquée ici). */
@media (hover: none) {
  .explore-button:hover {
    border-color: var(--color-border);
    background: color-mix(in srgb, var(--color-surface) 55%, transparent);
  }
  .home-hero--cinematic .explore-button:hover {
    border-color: rgba(255, 255, 255, 0.35);
    background: rgba(0, 0, 0, 0.36);
  }
  .explore-button:hover .explore-button__corner {
    width: 14px;
    height: 14px;
  }
  .explore-button:hover::after {
    left: -60%;
  }
}

/* ---------------------------------------------------------------------- */
/* Responsive — mobile en orientation paysage, faible hauteur de viewport */
/* (audit responsive) : sur un téléphone en paysage (ex. 844×390), le       */
/* budget vertical disponible (hauteur du header + bloc de contenu +        */
/* bloc du bas avec phrase/bouton) peut dépasser la hauteur                */
/* réelle de l'écran. Comme .home-hero utilise overflow:hidden, le         */
/* contenu excédentaire serait alors rogné plutôt que de créer un scroll.   */
/* Cette règle resserre UNIQUEMENT les espacements verticaux (aucune        */
/* police, couleur, structure ni image) et seulement dans ce cas précis :   */
/* le portrait et le desktop ne sont pas concernés. */
@media (max-height: 500px) and (orientation: landscape) {
  .home-hero {
    padding-top: calc(var(--nav-height) - 28px);
  }
  .home-hero__content {
    gap: var(--space-sm);
  }
  .home-hero__bottom {
    padding-top: var(--space-sm);
    padding-bottom: max(var(--space-md), env(safe-area-inset-bottom));
    gap: var(--space-2xs);
  }
}