/* =========================================================
   CRÈME — Rubrique BEAUTÉ (chaud), styles spécifiques
   Source Figma : node 60:130 — BEAUTÉ V3 / Éditorial affirmé
   ========================================================= */

.creme-container-full { padding: 0 var(--creme-space-48); }
@media (max-width: 900px) { .creme-container-full { padding: 0 var(--creme-space-24); } }

.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;
}

/* ---------- Masthead + nav : identiques à l'accueil ---------- */
.masthead { padding: var(--creme-space-24) var(--creme-space-48) 0; }
.masthead__top {
  display: flex; justify-content: space-between; gap: var(--creme-space-24);
  margin-bottom: var(--creme-space-8);
  flex-wrap: wrap;
}
.masthead__logo {
  font: 800 144px/0.98 var(--creme-font-principale);
  letter-spacing: -9px;
  color: var(--creme-cobalt);
  text-align: center;
  margin: 0 0 var(--creme-space-16);
}
@media (max-width: 900px) {
  .masthead__logo { font-size: 72px; letter-spacing: -4px; }
  .masthead__top { flex-direction: column; gap: var(--creme-space-8); }
}
.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); }
}

/* ---------- 01 — Ouverture de rubrique ---------- */
.rubrique-ouverture { padding: 32px var(--creme-space-48) 18px; display: flex; flex-direction: column; gap: var(--creme-space-16); }
.rubrique-ouverture__entete { display: flex; gap: var(--creme-space-32); align-items: center; flex-wrap: wrap; }
.rubrique-ouverture__titre { flex: 0 0 auto; margin: 0; }
.rubrique-ouverture__promesse { margin: 0; max-width: 484px; }
.rubrique-tabs { display: flex; gap: var(--creme-space-24); flex-wrap: wrap; }
@media (max-width: 900px) {
  .rubrique-ouverture { padding: var(--creme-space-24); }
}

/* ---------- 02 — Une / Dossier peau ---------- */
.une-dossier {
  display: flex; gap: var(--creme-space-32);
  padding: 6px var(--creme-space-48) 36px;
  align-items: flex-start;
}
.une-dossier__principal {
  flex: 1 1 66%;
  position: relative;
  min-height: 620px;
  background: var(--creme-encre);
  overflow: hidden;
  display: flex; align-items: flex-end;
}
.une-dossier__principal::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to bottom, rgba(10,9,6,0) 30%, rgba(10,9,6,.92) 100%);
}
.une-dossier__principal--placeholder {
  background: var(--creme-fond-editorial) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4'%3E%3C/svg%3E");
}
.une-dossier__label-photo {
  position: absolute; top: var(--creme-space-24); right: var(--creme-space-24);
  color: var(--creme-texte-secondaire); font: 700 11px/16px var(--creme-font-principale);
  letter-spacing: 1px; text-transform: uppercase; z-index: 2;
}
.une-dossier__contenu { position: relative; z-index: 1; padding: var(--creme-space-32) var(--creme-space-32) var(--creme-space-32); display: flex; flex-direction: column; gap: var(--creme-space-16); max-width: 792px; }
.une-dossier__mention { display: flex; justify-content: space-between; color: var(--creme-encre); position: absolute; top: var(--creme-space-24); left: var(--creme-space-32); right: var(--creme-space-32); z-index: 1; }
.une-dossier__kicker { color: var(--creme-acide); }
.une-dossier__titre { font: 800 66px/64px var(--creme-font-principale); letter-spacing: -3.5px; color: var(--creme-papier); margin: 0; }
.une-dossier__chapeau { font: 400 22px/30px var(--creme-font-principale); color: var(--creme-papier); margin: 0; max-width: 600px; }
.une-dossier__lien { display: flex; justify-content: space-between; color: var(--creme-papier); max-width: 640px; }

.une-dossier__annexe { flex: 1 1 34%; display: flex; flex-direction: column; gap: var(--creme-space-12); min-width: 0; }
.une-dossier__eyebrow { margin: 0; }
.mini-article { display: flex; flex-direction: column; gap: var(--creme-space-12); }
.mini-article__visuel { aspect-ratio: 4 / 3; position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.mini-article__categorie { color: var(--creme-cobalt); margin: 0; }
.mini-article__titre { font: 800 28px/31px var(--creme-font-principale); letter-spacing: -1.1px; margin: 0; }
hr.filet { border: none; border-top: 1px solid var(--creme-filet); margin: 0; }

@media (max-width: 900px) {
  .une-dossier { flex-direction: column; padding: var(--creme-space-24); }
  .une-dossier__principal { min-height: 420px; }
  .une-dossier__titre { font-size: 44px; line-height: 1; letter-spacing: -2px; }
}

/* ---------- 03 — Fil des sujets ---------- */
.fil-sujets {
  display: flex; align-items: center; gap: var(--creme-space-32);
  border-top: 1px solid var(--creme-filet); border-bottom: 1px solid var(--creme-filet);
  padding: var(--creme-space-16) var(--creme-space-48);
  overflow-x: auto;
}
.fil-sujets__label { color: var(--creme-cobalt); flex: none; }
.fil-sujets__liste { margin: 0; white-space: nowrap; }
@media (max-width: 900px) { .fil-sujets { padding: var(--creme-space-16) var(--creme-space-24); } }

/* ---------- 04 — Dernières histoires ---------- */
.dernieres-histoires { display: flex; flex-direction: column; gap: var(--creme-space-32); }
.dernieres-histoires__entete { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--creme-space-24); flex-wrap: wrap; }
.dernieres-histoires__titre { font: 800 53px/1 var(--creme-font-principale); letter-spacing: -2.1px; margin: 0; }
.dernieres-histoires__grille { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: var(--creme-space-24); }
.article-carte { display: flex; flex-direction: column; gap: var(--creme-space-12); }
.article-carte__visuel { aspect-ratio: 4 / 3; position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.article-carte__categorie { color: var(--creme-cobalt); margin: 0; }
.article-carte__titre { font: 800 32px/36px var(--creme-font-principale); letter-spacing: -1.2px; margin: 0; }
.article-carte--large .article-carte__titre { font-size: 38px; line-height: 42px; letter-spacing: -1.4px; }
.article-carte__resume { margin: 0; }
.article-carte__meta { color: var(--creme-texte-principal); margin: 0; }
@media (max-width: 900px) { .dernieres-histoires__grille { grid-template-columns: 1fr; } .dernieres-histoires__titre { font-size: 36px; } }

/* ---------- 05 — Le regard de Marisa ---------- */
.regard-marisa {
  background: var(--creme-encre); color: var(--creme-papier);
  display: flex; gap: var(--creme-space-64);
  padding: var(--creme-space-64) var(--creme-space-48);
}
.regard-marisa__signature { flex: 0 0 340px; display: flex; flex-direction: column; gap: var(--creme-space-24); }
.regard-marisa__kicker { color: var(--creme-acide); }
.regard-marisa__titre { font: 800 51px/1 var(--creme-font-principale); letter-spacing: -2px; margin: 0; }
.regard-marisa__portrait {
  width: 72px; height: 72px; border-radius: 50%; overflow: hidden;
  background: var(--creme-secondaire);
}
.regard-marisa__citation { flex: 1; display: flex; flex-direction: column; gap: var(--creme-space-24); justify-content: center; }
.regard-marisa__citation .t-citation { color: var(--creme-papier); font-size: 46px; line-height: 53px; }
.regard-marisa__chapeau { color: #b8b3aa; margin: 0; }
@media (max-width: 900px) {
  .regard-marisa { flex-direction: column; padding: var(--creme-space-48) var(--creme-space-24); gap: var(--creme-space-32); }
  .regard-marisa__signature { flex-basis: auto; }
  .regard-marisa__titre { font-size: 36px; }
  .regard-marisa__citation .t-citation { font-size: 30px; line-height: 38px; }
}

/* ---------- 06 — Beauté, mode d'emploi ---------- */
.mode-emploi { display: flex; gap: var(--creme-space-64); padding-top: 70px; padding-bottom: 32px; }
.mode-emploi__intro { flex: 0 0 360px; display: flex; flex-direction: column; gap: var(--creme-space-16); }
.mode-emploi__titre { font: 800 44px/1.05 var(--creme-font-principale); letter-spacing: -1.8px; margin: 0; }
.mode-emploi__liste { flex: 1; min-width: 0; }
.mode-emploi__item { display: flex; gap: var(--creme-space-24); padding: 25px 0; border-bottom: 1px solid var(--creme-filet); }
.mode-emploi__item:first-child { border-top: 1px solid var(--creme-filet); }
.mode-emploi__numero { font: 800 30px/1 var(--creme-font-principale); letter-spacing: -1.2px; color: var(--creme-cobalt); flex: 0 0 52px; }
.mode-emploi__item-titre { font: 800 26px/30px var(--creme-font-principale); letter-spacing: -1px; margin: 0 0 var(--creme-space-8); }
.mode-emploi__item-meta { font-size: 14px; color: var(--creme-texte-secondaire); margin: 0; }
@media (max-width: 900px) {
  .mode-emploi { flex-direction: column; gap: var(--creme-space-24); padding-top: var(--creme-space-48); }
  .mode-emploi__titre { font-size: 32px; }
}

/* ---------- 07 — Poursuivre l'exploration ---------- */
.explorer-cta { display: flex; justify-content: center; padding: var(--creme-space-32) 0; }
.explorer-cta .btn { width: 100%; max-width: 480px; }

/* ---------- 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; width: 100%;
}
.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; flex-wrap: wrap; gap: var(--creme-space-8); }
@media (max-width: 900px) {
  .site-footer__logo { font-size: 48px; }
  .site-footer__mentions { flex-direction: column; gap: var(--creme-space-8); }
}

/* ---------- Bandeau aperçu (artefact uniquement) ---------- */
.apercu-bandeau {
  background: var(--creme-encre); color: var(--creme-papier);
  font: 700 12px/18px var(--creme-font-principale); letter-spacing: 1px; text-transform: uppercase;
  text-align: center; padding: var(--creme-space-12) var(--creme-space-24);
}
.apercu-bandeau strong { color: var(--creme-acide); }