/* =========================================================
   CRÈME — Home (ACCUEIL V2), styles spécifiques
   Source Figma : node 25:130
   ========================================================= */

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.creme-container-full { padding: 0 var(--creme-space-48); }
@media (max-width: 900px) { .creme-container-full { padding: 0 var(--creme-space-24); } }

/* ---------- Masthead XXL ---------- */
.masthead { padding: var(--creme-space-24) var(--creme-space-48) 0; }
.masthead__top {
  display: flex; justify-content: space-between; gap: var(--creme-space-24);
  padding: 0; margin-bottom: var(--creme-space-8);
}
.masthead__logo {
  font: 800 256px/0.98 var(--creme-font-principale);
  letter-spacing: -18px;
  color: var(--creme-cobalt);
  text-align: center;
  margin: 0 0 var(--creme-space-24);
}
@media (max-width: 900px) {
  .masthead__logo { font-size: 96px; letter-spacing: -6px; }
  .masthead__top { flex-direction: column; gap: var(--creme-space-8); }
  .masthead__promo { text-align: left !important; }
}

/* ---------- Navigation ---------- */
.site-nav {
  display: flex; align-items: center; gap: var(--creme-space-32);
  border-top: 1px solid var(--creme-encre);
  border-bottom: 1px solid var(--creme-encre);
  padding: 0 var(--creme-space-48);
  overflow-x: auto;
}
.site-nav__search { margin-left: auto; }
@media (max-width: 900px) {
  .site-nav { padding: 0 var(--creme-space-24); gap: var(--creme-space-16); }
}

/* ---------- Grand angle ---------- */
.grand-angle {
  display: flex;
  min-height: 740px;
  align-items: center; /* si le titre pousse la ligne plus haut que 740px,
                           l'image (hauteur fixe) reste centrée plutôt que
                           collée en haut. */
}
.grand-angle__texte {
  flex: 1 1 50%;
  padding: var(--creme-space-64) var(--creme-space-48);
  display: flex; flex-direction: column; justify-content: center;
  gap: var(--creme-space-24);
  max-width: 720px;
}
.grand-angle__titre {
  font-family: var(--creme-font-principale);
  font-weight: 800;
  font-size: clamp(2.75rem, 1.9rem + 3.2vw, 5rem);
  line-height: 0.94;
  letter-spacing: -0.055em;
  text-wrap: balance;
  margin: 0;
}
.grand-angle__sschapeau { font: 700 25px/32px var(--creme-font-principale); margin: 0; }
.grand-angle__lien { display: inline-block; }

.grand-angle__visuel {
  flex: 1 1 50%;
  position: relative;
  background: var(--creme-cobalt);
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  height: 740px; /* hauteur fixe : l'image ne s'étire plus quand le titre
                     de l'article à la une est long et passe sur 3-4 lignes. */
}
.halo {
  position: absolute; width: 460px; height: 460px;
  background: radial-gradient(circle, rgba(230,245,84,.9) 0%, rgba(230,245,84,.35) 55%, transparent 75%);
  filter: blur(6px);
  border-radius: 50%;
}
.flacon {
  position: relative;
  width: 204px; background: #F7F0E1; border-radius: 20px;
  padding: 65px 24px; display: flex; flex-direction: column; gap: 35px;
  z-index: 1;
}
.flacon__bouchon {
  position: absolute; top: -78px; left: 30px;
  width: 144px; height: 94px; background: #B9B7AC; border-radius: 9px;
}
.flacon__ombre {
  position: absolute; bottom: -70px; left: -20px;
  width: 244px; height: 26px;
  background: radial-gradient(ellipse, rgba(20,16,13,.35) 0%, transparent 75%);
}
.flacon__etiquette { display: flex; flex-direction: column; gap: var(--creme-space-8); }
.flacon__titre { font: 800 32px/34px var(--creme-font-principale); letter-spacing: -1.44px; margin: 0; }
.grand-angle__mention {
  position: absolute; left: var(--creme-space-48); bottom: 40px;
  color: #fff; max-width: 624px;
}
@media (max-width: 900px) {
  .grand-angle { flex-direction: column; min-height: auto; }
  .grand-angle__visuel { height: 420px; }
}

/* ---------- Marquee ---------- */
/* Piste en continu : le texte est dupliqué dans deux groupes strictement
   identiques (mêmes espacements des deux côtés), et l'animation ne
   translate que d'un groupe (-50% de la piste entière) — le second groupe
   prend alors exactement la place du premier, sans saut ni coupure visible. */
.marquee {
  background: var(--creme-acide);
  overflow: hidden;
  padding: 15px 0;
}
.marquee__track {
  display: flex;
  width: max-content;
  animation: creme-marquee 22s linear infinite;
}
.marquee__groupe {
  display: flex;
  align-items: center;
  gap: 35px;
  padding-right: 35px;
  flex: none;
  font: 800 31px/1 var(--creme-font-principale);
  letter-spacing: -1px;
  white-space: nowrap;
}
@keyframes creme-marquee {
  0% { translate: 0 0; }
  100% { translate: -50% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; }
}

/* ---------- Sélection de la rédaction ---------- */
.selection__entete {
  display: flex; justify-content: space-between; align-items: flex-end;
  margin-bottom: var(--creme-space-32);
  gap: var(--creme-space-24);
}
.selection__titre { font: 800 64px/1 var(--creme-font-principale); letter-spacing: -2.88px; margin: 0; }
.selection__grille {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--creme-space-24);
}
.carte-selection { display: flex; flex-direction: column; gap: var(--creme-space-12); }
.carte-selection__visuel {
  aspect-ratio: 1 / 1; position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
/* .carte-selection__visuel--placeholder est un composant partagé : voir assets/css/components.css */
.carte-selection__titre { font: 800 34px/36px var(--creme-font-principale); letter-spacing: -1.53px; margin: 0; }
.carte-selection__resume { margin: 0; }

.flacon-parfum { position: relative; width: 164px; height: 194px; }
.flacon-parfum__capuchon {
  position: absolute; top: -56px; left: 41px;
  width: 82px; height: 61px; background: var(--creme-encre);
}
.flacon-parfum__corps {
  width: 100%; height: 100%; background: #F5E8CF; border-radius: 12px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  text-align: center;
}
.flacon-parfum__titre { font: 800 25px/1 var(--creme-font-principale); letter-spacing: -1.1px; margin: 0; }

.rouge-levres { position: relative; width: 99px; height: 294px; }
.rouge-levres__raisin { position: absolute; top: 0; left: 11px; width: 77px; height: 172px; background: #781A33; border-radius: 38px 8px 0 0; }
.rouge-levres__bague { position: absolute; top: 147px; left: 0; width: 99px; height: 37px; background: #EBD09F; }
.rouge-levres__etui { position: absolute; top: 171px; left: 0; width: 99px; height: 122px; background: var(--creme-encre); }

@media (max-width: 900px) {
  .selection__grille { grid-template-columns: 1fr; }
  .selection__titre { font-size: 40px; letter-spacing: -1.5px; }
}

/* ---------- Voix de Marisa ---------- */
.voix-marisa {
  background: var(--creme-lavande);
  display: flex; gap: var(--creme-space-64);
  padding: 60px var(--creme-space-48);
}
.voix-marisa__signature { flex: 0 0 370px; display: flex; flex-direction: column; gap: var(--creme-space-24); }
.voix-marisa__titre { font: 800 65px/1 var(--creme-font-principale); letter-spacing: -2.9px; margin: 0; }
.voix-marisa__citation { flex: 1; display: flex; flex-direction: column; gap: var(--creme-space-24); justify-content: center; }
@media (max-width: 900px) {
  .voix-marisa { flex-direction: column; padding: var(--creme-space-48) var(--creme-space-24); }
  .voix-marisa__signature { flex-basis: auto; }
  .voix-marisa__titre { font-size: 40px; }
}

/* ---------- Le fond des choses ---------- */
.fond-choses { display: flex; gap: var(--creme-space-64); }
.fond-choses__intro { flex: 0 0 360px; display: flex; flex-direction: column; gap: var(--creme-space-24); }
.fond-choses__titre { font: 800 61px/1 var(--creme-font-principale); letter-spacing: -2.7px; margin: 0; }
.fond-choses__liste { flex: 1; border-top: 1px solid var(--creme-encre); }
.fond-choses__item {
  display: flex; gap: var(--creme-space-24);
  padding: var(--creme-space-24) 0;
  border-bottom: 1px solid var(--creme-encre);
}
.fond-choses__numero { font: 800 32px/1 var(--creme-font-principale); letter-spacing: -1.4px; color: var(--creme-cobalt); flex: 0 0 60px; }
.fond-choses__item-titre { font: 800 30px/33px var(--creme-font-principale); letter-spacing: -1.35px; margin: var(--creme-space-8) 0; }
.fond-choses__item-meta { font-size: 14px; color: var(--creme-texte-principal); margin: 0; }
@media (max-width: 900px) {
  .fond-choses { flex-direction: column; }
  .fond-choses__intro { flex-basis: auto; }
  .fond-choses__titre { font-size: 40px; }
  .fond-choses__item-titre { font-size: 22px; line-height: 26px; }
}

/* ---------- Newsletter ---------- */
.newsletter {
  background: var(--creme-cobalt);
  color: var(--creme-papier);
  display: flex; flex-wrap: wrap; gap: var(--creme-space-48);
  padding: var(--creme-space-64) var(--creme-space-48);
}
.newsletter__promesse { flex: 1 1 480px; display: flex; flex-direction: column; gap: var(--creme-space-16); }
.newsletter__kicker { color: var(--creme-acide); }
.newsletter__titre { font: 800 74px/1 var(--creme-font-principale); letter-spacing: -3.3px; margin: 0; }
.newsletter__texte { color: var(--creme-papier); }
.newsletter__inscription { flex: 1 1 400px; display: flex; flex-direction: column; gap: var(--creme-space-16); justify-content: center; max-width: 544px; }
.newsletter__champ input {
  width: 100%; height: 58px; background: transparent; color: var(--creme-papier);
  border: 1px solid var(--creme-papier); padding: 0 18px; font: 400 16px/24px var(--creme-font-principale);
}
.newsletter__champ input::placeholder { color: var(--creme-papier); opacity: .85; }
.newsletter__bouton {
  height: 58px; background: var(--creme-acide); color: var(--creme-encre);
  border: none; cursor: pointer;
}
.newsletter__bouton:hover { background: #d9e83f; }
.newsletter__mention { font-size: 12px; margin: 0; }
@media (max-width: 900px) {
  .newsletter__titre { font-size: 44px; letter-spacing: -1.8px; }
}

/* ---------- Footer ---------- */
.site-footer { padding: var(--creme-space-48); display: flex; flex-direction: column; gap: var(--creme-space-32); }
.site-footer__grille { display: flex; gap: var(--creme-space-64); flex-wrap: wrap; }
.site-footer__marque { flex: 1 1 400px; display: flex; flex-direction: column; gap: var(--creme-space-16); }
.site-footer__logo { font: 800 82px/1 var(--creme-font-principale); letter-spacing: -3.7px; color: var(--creme-cobalt); margin: 0; }
.site-footer__col { display: flex; flex-direction: column; gap: var(--creme-space-12); }
.site-footer__col a { display: block; font-size: 15px; padding: 2px 0; }
.site-footer hr { border: none; border-top: 1px solid var(--creme-encre); margin: 0; }
.site-footer__mentions { display: flex; justify-content: space-between; }
@media (max-width: 900px) {
  .site-footer__logo { font-size: 48px; }
  .site-footer__mentions { flex-direction: column; gap: var(--creme-space-8); }
}