/* ==========================================================================
   Nayra — accueil v2 (D-012, maquette home-v2 du 15/07) :
   hero split, manifeste, bannière immersive, collections, femme + Instagram.
   Mobile-first. Chargé uniquement sur la page d'accueil (inc/assets.php).
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Éléments partagés de la home : bouton contour, lien fléché, placeholder.
   (Dans home.css et non base.css : périmètre home uniquement.)
   -------------------------------------------------------------------------- */

/* Bouton contour (maquette : hero + bannière). */
.nayra-bouton-contour {
  display: inline-block;
  padding: 0.875rem 2rem;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--nayra-brun);
  background: transparent;
  border: 1px solid var(--nayra-brun);
  transition: background-color 0.2s ease, color 0.2s ease;
}

.nayra-bouton-contour:hover,
.nayra-bouton-contour:focus-visible {
  color: var(--nayra-creme);
  background: var(--nayra-brun);
}

/* Variante crème (bannière : texte clair sur photo/fond sombre). */
.nayra-bouton-contour--creme {
  color: var(--nayra-creme);
  border-color: var(--nayra-creme);
}

.nayra-bouton-contour--creme:hover,
.nayra-bouton-contour--creme:focus-visible {
  color: var(--nayra-brun);
  background: var(--nayra-creme);
}

/* Lien fléché souligné (« Découvrir l'univers », « En savoir plus »). */
.nayra-lien-fleche {
  display: inline-block;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--nayra-brun);
  border-bottom: 1px solid var(--nayra-brun);
  padding-bottom: 0.25rem;
}

.nayra-lien-fleche:hover,
.nayra-lien-fleche:focus-visible {
  color: var(--nayra-or);
  border-bottom-color: var(--nayra-or);
}

/* Placeholder d'image (photos cliente pas encore livrées).
   Bloc propre aux couleurs tokens + note discrète. */
.nayra-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 3 / 4;
  background: var(--nayra-sable-2);
}

.nayra-placeholder__note {
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--nayra-gris-3);
}

/* --------------------------------------------------------------------------
   1. Hero split : texte à gauche, photo à droite.
   PROPORTIONS MAQUETTE (853×1280) : hauteur = 43,6 % de la largeur,
   photo = moitié droite BORD À BORD, flush sous le header.
   -------------------------------------------------------------------------- */

.hero {
  background: var(--nayra-creme);
}

.hero__inner {
  display: grid;
  gap: 0;
}

/* Mobile : empilé, le texte garde les marges du site. */
.hero__texte {
  padding: 2.5rem max(1rem, calc((100vw - 75rem) / 2 + 2rem));
}

.hero__kicker {
  margin-bottom: 1.25rem;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--nayra-gris-1);
}

.hero__titre {
  font-size: 3.25rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.05;
}

.hero__titre-ligne {
  display: block;
}

.hero__titre-ligne--or {
  color: var(--nayra-or);
}

.hero__accroche {
  max-width: 24rem;
  margin: 1.5rem 0 0;
  font-size: 0.9375rem;
  line-height: 1.8;
  color: var(--nayra-gris-3);
}

.hero__texte .nayra-bouton-contour {
  margin-top: 2rem;
}

.hero__media img,
.nayra-placeholder--hero {
  width: 100%;
  height: 100%;
  min-height: 24rem;
  object-fit: cover;
  /* Cadrage sur la tête du mannequin (demande cliente 16/07) :
     ancrer le HAUT de l'image, le bas peut être rogné. */
  object-position: center top;
  aspect-ratio: auto;
}

@media (min-width: 768px) {
  /* Maquette : hero = 43,6vw de haut, photo = 50 % pleine droite.
     grid-template-rows: 100% : indispensable pour que height:100% des
     enfants se résolve (row auto + % = hauteur nulle). */
  .hero__inner {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 100%;
    height: 43.6vw;
    min-height: 24rem;
  }

  .hero__texte {
    align-self: center;
    padding-block: 2rem;
    padding-right: 3rem;
  }

  .hero__titre {
    font-size: clamp(3rem, 6.6vw, 6rem);
  }

  .hero__media {
    height: 100%;
    min-height: 0;
    overflow: hidden;
  }

  .hero__media img,
  .nayra-placeholder--hero {
    min-height: 0;
  }
}

/* --------------------------------------------------------------------------
   2. Manifeste : photo | texte | photo.
   -------------------------------------------------------------------------- */

.manifeste {
  display: grid;
  background: var(--nayra-sable-clair);
}

.manifeste__media img,
.manifeste__media .nayra-placeholder {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 4 / 5;
}

.manifeste__texte {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 1rem;
  padding: 3rem 1.5rem;
}

/* Le texte d'abord sur mobile (le message avant les photos). */
.manifeste__texte { order: -1; }

.manifeste__phrase {
  max-width: 16em;
  font-size: 1.75rem;
  font-weight: 500;
  line-height: 1.3;
}

.manifeste__presence {
  margin: 0;
  font-family: var(--nayra-font-titres);
  /* Italique de synthèse : la woff2 italique de Cormorant n'est pas
     embarquée (cf. SESSION.md — à ajouter si le rendu ne suffit pas). */
  font-style: italic;
  font-size: 1.5rem;
  color: var(--nayra-or);
}

.manifeste__texte .nayra-lien-fleche {
  margin-top: 0.75rem;
}

@media (min-width: 768px) {
  /* Bande de 32,2vw (maquette). Colonnes SYMÉTRIQUES 34/32/34 (demande
     cliente 16/07 : le bloc texte doit être AU MILIEU — la maquette
     l'avait légèrement à gauche avec 27,9/32,1/40).
     grid-template-rows: 100% : cf. note du hero (height % des enfants). */
  .manifeste {
    grid-template-columns: 34fr 32fr 34fr;
    grid-template-rows: 100%;
    height: 32.2vw;
    min-height: 17rem;
  }

  .manifeste__texte {
    order: 0;
    align-items: center;
    text-align: center;
    padding: 1.5rem 2rem;
  }

  .manifeste__phrase {
    font-size: clamp(1.25rem, 2.2vw, 2rem);
  }

  .manifeste__presence {
    font-size: clamp(1.125rem, 1.8vw, 1.5rem);
  }

  .manifeste__media {
    height: 100%;
    overflow: hidden;
  }

  .manifeste__media img,
  .manifeste__media .nayra-placeholder {
    aspect-ratio: auto;
    height: 100%;
    min-height: 0;
    object-position: center top;
  }
}

/* --------------------------------------------------------------------------
   3. Bannière collection immersive.
   Avec photo : image cover + voile brun léger côté texte.
   Sans photo (placeholder) : fond brun uni, texte crème (tokens).
   -------------------------------------------------------------------------- */

.banniere {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 24rem;
  overflow: hidden;
}

.banniere--placeholder {
  background: var(--nayra-brun);
}

.banniere__media {
  position: absolute;
  inset: 0;
}

.banniere__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Cadrage sur la tête : ancrer le haut (le bas peut être rogné). */
  object-position: center top;
}

/* Voile de lisibilité (teinte --nayra-brun #2c2620). */
.banniere--avec-image .banniere__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to left, rgba(44, 38, 32, 0.55), rgba(44, 38, 32, 0.1) 60%);
}

.banniere__inner {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: flex-end;
  padding-block: 3.5rem;
}

.banniere__texte {
  max-width: 24rem;
}

.banniere__kicker {
  margin-bottom: 1rem;
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--nayra-sable);
}

.banniere__titre {
  margin-bottom: 1.75rem;
  font-size: 2rem;
  font-weight: 500;
  line-height: 1.25;
  color: var(--nayra-creme);
}

.banniere__note-placeholder {
  margin: 1.25rem 0 0;
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--nayra-gris-5);
}

@media (min-width: 768px) {
  /* Maquette : bande fine de 25vw. */
  .banniere {
    min-height: 0;
    height: 25vw;
  }

  .banniere__inner {
    padding-block: 0;
  }

  .banniere__titre {
    font-size: clamp(1.5rem, 2.8vw, 2.5rem);
    margin-bottom: 1.25rem;
  }
}

/* --------------------------------------------------------------------------
   4. Grille « Nos collections ».
   Maquette : 4 colonnes desktop, nom + « Découvrir » SOUS l'image.
   NB Q-011 : 5 catégories existantes tant que « Tops » n'est pas tranché
   → la 5e passe à la ligne, état d'attente documenté.
   -------------------------------------------------------------------------- */

.collections {
  padding-block: 3.5rem 1rem;
}

.collections__titre {
  margin-bottom: 2rem;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-align: center;
  text-transform: uppercase;
}

.collections__grille {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem 1rem;
  list-style: none;
  padding: 0;
}

@media (min-width: 1024px) {
  .collections__grille {
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem 1.5rem;
  }
}

.collections__lien {
  display: block;
  text-align: center;
}

.collections__image {
  display: block;
  width: 100%;
  /* Maquette : vignettes de collections en PAYSAGE ~14:9 (mesuré 183×118),
     cadrées sur la tenue → viser le haut des visuels portrait. */
  aspect-ratio: 14 / 9;
  object-fit: cover;
  object-position: center top;
  background: var(--nayra-sable);
}

.collections__image--vide {
  background: var(--nayra-sable-2);
}

.collections__nom {
  display: block;
  margin-top: 1rem;
  font-family: var(--nayra-font-titres);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--nayra-brun);
}

.collections__decouvrir {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.6875rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--nayra-gris-1);
}

.collections__lien:hover .collections__decouvrir,
.collections__lien:focus-visible .collections__decouvrir {
  color: var(--nayra-or);
}

/* --------------------------------------------------------------------------
   5. « La femme Nayra » + feed Instagram (même rangée sur desktop).
   -------------------------------------------------------------------------- */

.femme-insta {
  display: grid;
  gap: 2.5rem;
  padding-block: 3rem;
}

@media (min-width: 1024px) {
  /* Maquette : texte 250 / portrait 148 / feed 360 (+ gaps) ≈ 1,7 / 1 / 2,4. */
  .femme-insta {
    grid-template-columns: 1.7fr 1fr 2.4fr;
    gap: 3rem;
    align-items: start;
  }
}

.femme__titre,
.insta__titre {
  margin-bottom: 1.25rem;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

.femme__texte p {
  margin-bottom: 0.5rem;
  font-size: 0.9375rem;
  line-height: 1.8;
  color: var(--nayra-gris-2);
}

.femme__texte .nayra-lien-fleche {
  margin-top: 1.25rem;
}

.femme__media img,
.femme__media .nayra-placeholder {
  width: 100%;
  /* Maquette : portrait ~4:5 (148×180). */
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center top;
}

.insta__grille {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.5rem;
  list-style: none;
  padding: 0;
}

.insta__image,
.insta__item .nayra-placeholder {
  width: 100%;
  /* Maquette : vignettes ~4:5 (85×105). */
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center top;
}

.insta__item .nayra-placeholder__note {
  /* 4 vignettes étroites : la note textuelle déborderait. */
  display: none;
}

.insta__handle {
  display: inline-block;
  margin-top: 1rem;
  font-size: 0.8125rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--nayra-gris-2);
}

a.insta__handle:hover,
a.insta__handle:focus-visible {
  color: var(--nayra-or);
}