/* Heymi : direction « Glossy » (verdict DA du 24/10). Se charge après styles.css et ne fait que le surcharger.
   Le Vogue de ses amis : Bodoni, crème, encre, rose framboise en accent rare. Plus de jaune fluo, plus d'ombres dures.
   Anton ne vit plus que dans les pages du magazine. Pour revenir en arrière, il suffit de retirer le lien vers ce fichier. */

@font-face { font-family: "Bodoni Moda"; src: url("/fonts/bodoni-moda-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Bodoni Moda"; src: url("/fonts/bodoni-moda-latin-500-italic.woff2") format("woff2"); font-weight: 500; font-style: italic; font-display: swap; }
@font-face { font-family: "Bodoni Moda"; src: url("/fonts/bodoni-moda-latin-800-normal.woff2") format("woff2"); font-weight: 800; font-display: swap; }
@font-face { font-family: "Bodoni Moda"; src: url("/fonts/bodoni-moda-latin-900-normal.woff2") format("woff2"); font-weight: 900; font-display: swap; }

:root {
  --rose: #E8177F;
  --rose-nuit: #F04E98;
  --jaune: #F7DCE8;
  --noir: #16110F;
  --papier: #F7F2EC;
  --gris: #6B625C;
  --ligne: rgba(22, 17, 15, .14);
  --bleu: var(--rose);
  --titre: "Bodoni Moda", "Didot", "Bodoni 72", Georgia, serif;
  --douce: 0 1px 2px rgba(22, 17, 15, .08), 0 18px 40px -18px rgba(22, 17, 15, .35);
}
body { background: var(--papier); color: var(--noir); }

/* Titres : la serif parle en minuscules, l'italique rose murmure */
.titre, .hero__titre, .moment__titre, .temps__moment h3, .rubriques b, .rassure__titre, .confiance__bloc b,
.offre__prix, .porte__ouvrir b, .versions .unes__titre, .versions .une__nom, .barre-achat b, .simple h1, .simple h2,
.merci__titre, .phrases__titre, .blanc b, .prix__montant, .kit__num, .tampon, .macaron {
  font-family: var(--titre); text-transform: none; letter-spacing: -.02em;
}
.titre { font-weight: 800; line-height: 1; font-size: clamp(36px, 6.4vw, 64px); }
.titre em, .hero__titre span { font-style: italic; font-weight: 500; color: var(--rose); }
.surtitre, .surtitre--noir, .surtitre--jaune { background: none; padding: 0; color: var(--rose); font-size: 12.5px; letter-spacing: .16em; }

/* Bandeau et menu */
.bandeau { background: var(--noir); color: var(--papier); font-size: 12px; letter-spacing: .16em; }
.menu { background: rgba(247, 242, 236, .84); border-bottom-width: 1px; }
.menu--plein { background: rgba(247, 242, 236, .96); border-bottom-color: var(--ligne); }
.menu__logo img { width: 116px; }
.menu__liens a { font-size: 13px; letter-spacing: .12em; }
.menu__liens a::after { height: 2px; }
.menu__burger { border: 1px solid var(--noir); border-radius: 99px; background: transparent; }
@media (max-width: 979px) {
  .menu--ouvert .menu__liens { border-bottom: 1px solid var(--ligne); box-shadow: var(--douce); }
  .menu--ouvert .menu__liens a { border-bottom-color: var(--ligne); }
}
@media (max-width: 420px) { .menu__logo img { width: 96px; } }

/* Boutons : la pilule encre, sobre et sûre */
.bouton { font-family: var(--texte); font-weight: 700; text-transform: none; letter-spacing: 0; font-size: 17px; padding: 16px 24px; border: 0; border-radius: 99px; background: var(--noir); color: #fff; box-shadow: none; transition: transform .14s ease, box-shadow .14s ease, background .14s ease; }
.bouton:hover { transform: translateY(-1px); box-shadow: 0 10px 24px -10px rgba(22, 17, 15, .55); }
.bouton:active { transform: translateY(1px); box-shadow: none; }
.bouton--grand { font-size: 19px; padding: 19px 30px; }
.achat .bouton { background: var(--noir); }
.bouton--menu { background: transparent; color: var(--noir); border: 1px solid var(--noir); font-family: var(--surtitre); font-size: 13px; letter-spacing: .1em; text-transform: uppercase; padding: 10px 16px; box-shadow: none; }
.bouton--menu:hover { background: var(--noir); color: #fff; box-shadow: none; }
@media (max-width: 420px) { .bouton--menu { font-size: 12px; padding: 9px 12px; } }
.champ input:focus-visible, .bouton:focus-visible, .case input:focus-visible + span { outline-color: var(--rose); }

/* Hero : crème, la une posée comme dans un shooting */
.hero { background: var(--papier); color: var(--noir); }
.hero::before { background: radial-gradient(ellipse at 76% 42%, rgba(232, 23, 127, .12), rgba(232, 23, 127, 0) 55%), radial-gradient(ellipse at 0% 100%, rgba(247, 220, 232, .9), rgba(247, 220, 232, 0) 55%); }
.hero::after { opacity: .05; }
.hero__titre { color: var(--noir); text-shadow: none; font-weight: 800; line-height: 1.02; font-size: clamp(42px, 9.6vw, 80px); }
@media (min-width: 900px) { .hero__titre { font-size: clamp(54px, 5.6vw, 76px); } }
.hero__intro { color: #2B2420; }
.hero__intro strong { font-weight: 700; color: var(--noir); }
.achat__ligne { color: var(--gris); }
.preuves { color: var(--noir); font-size: 12px; letter-spacing: .1em; }
.preuves li::before { background: var(--rose); color: #fff; }
.hero__visuel img { border: 0; box-shadow: var(--douce); animation: none; transform: rotate(2deg); }
.hero__visuel::before { display: none; }
.mag3d__tranche { box-shadow: 0 34px 60px rgba(22, 17, 15, .32), 1px 1px 0 #ddd5ca, 2px 2px 0 #f6f1ea, 3px 3px 0 #ddd5ca, 4px 4px 0 #f6f1ea, 5px 5px 0 #d4cbbf; }
.macaron { background: var(--noir); color: var(--papier); font-weight: 800; font-size: 28px; padding: 12px 18px 11px; border-radius: 18px; transform: rotate(-4deg); box-shadow: var(--douce); }
.macaron small { font-family: var(--surtitre); color: var(--rose-nuit); letter-spacing: .14em; font-size: 11px; }
.autocollant { font-family: var(--surtitre); font-weight: 700; font-size: 12px; letter-spacing: .14em; padding: 9px 14px; border: 0; border-radius: 99px; background: var(--rose); color: #fff; box-shadow: var(--douce); }
.autocollant--2 { background: #fff; color: var(--noir); }
.murmure { font-family: var(--titre); font-style: italic; font-weight: 500; font-size: clamp(19px, 2.6vw, 23px); line-height: 1.3; transform: none; color: var(--gris); margin-top: 14px; }
.hero__visuel--3d .hero__murmure { color: var(--gris); font-size: 19px; }

/* Ticker : une ligne de magazine, pas des stickers */
.ticker { background: var(--noir); border: 0; }
.ticker__piste { gap: 0; padding: 16px 0; }
.ticker span, .ticker span:nth-child(3n+2), .ticker span:nth-child(3n) { font-family: var(--titre); font-style: italic; font-weight: 500; text-transform: none; font-size: 22px; padding: 0 22px; background: none; color: var(--papier); box-shadow: none; transform: none; position: relative; }
.ticker span::after { content: "•"; position: absolute; right: -4px; color: var(--rose-nuit); font-style: normal; }

/* Sections sombres : le rose s'allume un peu */
.rassure, .dedans, .confiance, .pied { background: var(--noir); }
.rassure__titre { font-style: italic; font-weight: 500; font-size: 26px; color: var(--rose-nuit); }
.rassure__bloc p:not(.rassure__titre) { color: #E7DFD8; }
.dedans .surtitre, .confiance .surtitre, .final .surtitre { color: var(--rose-nuit); }
.dedans .titre em, .confiance .titre em, .final .titre em { color: var(--rose-nuit); }
.confiance .murmure { color: #CFC5BC; }
.dedans .pages img { border: 0; border-radius: 2px; }
.rubriques li { border-top-color: #3A312C; }
.rubriques b { font-weight: 800; font-size: 23px; color: var(--papier); }
.rubriques span { color: #CFC5BC; }
.pages__aide { color: #A99F96; }

/* Une soirée, trois moments : des photos de reportage, pas un album scotché */
.temps__moment h3 { font-weight: 800; font-size: 28px; line-height: 1.05; }
.temps__quand { font-family: var(--surtitre); font-weight: 700; font-size: 12.5px; letter-spacing: .16em; text-transform: uppercase; transform: none; margin-top: 4px; }
.polaroid { padding: 0; background: none; box-shadow: var(--douce); border-radius: 3px; overflow: hidden; }
.polaroid--g, .polaroid--d { transform: none; }
.polaroid::before { display: none; }
.temps__moment:hover .polaroid { transform: translateY(-4px); }

/* Après la fête */
.apres { background: #EFE7DD; }
.apres__table, .versions__scene { border-radius: 4px; box-shadow: var(--douce); }
.apres__pages img { box-shadow: var(--douce); border-radius: 2px; }
.apres__pages figcaption { color: var(--gris); }
.apres__note { color: var(--gris); }
.feuillette__onglet { border: 1px solid var(--noir); border-radius: 99px; padding: 11px 18px; }
.feuillette__onglet[aria-selected="true"] { background: var(--noir); color: #fff; }

/* Les quatre unes */
.versions { background: #fff; border-top: 0; }
.versions .unes__titre { font-weight: 800; font-size: 28px; }
.versions .une { background: var(--papier); border: 1px solid var(--ligne); border-radius: 6px; }
.versions .une:has(input:checked) { box-shadow: 0 0 0 2px var(--rose), var(--douce); border-color: transparent; }
.versions .une:has(input:checked)::after { font-family: var(--surtitre); font-weight: 700; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; background: var(--rose); color: #fff; border: 0; border-radius: 99px; padding: 7px 12px; transform: none; }
.versions .une img { border-radius: 2px; }
.versions .une__nom { font-weight: 800; font-size: 28px; }
.versions .une__nom i { color: var(--gris); }
.versions .une__dit { font-family: var(--titre); font-style: italic; font-weight: 500; font-size: 19px; color: var(--rose); transform: none; }

/* Offres */
.offre { border: 1px solid var(--ligne); border-radius: 10px; box-shadow: var(--douce); }
.offre--premium { background: var(--noir); color: var(--papier); border-color: var(--noir); }
.offre--premium .bouton { background: var(--rose); }
.offre__badge { background: var(--rose); color: #fff; border: 0; border-radius: 99px; padding: 7px 12px; }
.offre__prix { font-weight: 800; font-size: 56px; }
.offre__prix small { color: inherit; opacity: .75; }

/* Qui on est */
.confiance__bloc { background: #211B18; border: 1px solid #3A312C; border-radius: 8px; }
.confiance__bloc:first-child { background: var(--rose); border-color: var(--rose); box-shadow: none; }
.confiance__bloc b { font-weight: 800; font-size: 22px; color: var(--papier); }
.confiance__bloc:first-child b { font-size: 28px; }
.confiance__qui p { color: #E7DFD8; }
.confiance__qui .confiance__legal { color: #A99F96; border-top-color: #3A312C; }

/* Prochains numéros */
.portes { background: #fff; border-top: 0; }
.porte { box-shadow: var(--douce); border: 1px solid var(--ligne); border-radius: 8px; }
.porte__ouvrir b { font-weight: 800; font-size: 24px; }
.porte__une { border: 0; border-radius: 2px; box-shadow: 0 8px 18px -8px rgba(22, 17, 15, .45); }
.porte__ouvrir::after { background: none; padding: 0; color: var(--rose); }

/* Questions */
.questions { border-top: 1px solid var(--ligne); }
.faq details { border-bottom: 1px solid var(--ligne); }
.faq summary::after { font-family: var(--texte); font-weight: 400; color: var(--rose); top: 12px; font-size: 28px; }

/* Appel final : l'encre, et un seul bouton rose */
.final { background: var(--noir); color: var(--papier); }
.final .titre { color: var(--papier); text-shadow: none; font-size: clamp(42px, 8vw, 80px); }
.final .bouton { background: var(--rose); }

/* Pied de page */
.pied h2 { color: var(--rose-nuit); }
.pied p { color: #CFC5BC; }
.pied__bas { border-top-color: #3A312C; color: #A99F96; }

/* Formulaires d'attente */
.inscription { border: 1px solid var(--ligne); border-radius: 10px; box-shadow: var(--douce); background: #fff; }
.porte.inscription { background: var(--papier); }
.champ input[type="email"], .champ input[type="date"] { border: 1px solid rgba(22, 17, 15, .35); border-radius: 8px; }

/* Barre d'achat mobile */
.barre-achat { border-top: 1px solid var(--ligne); box-shadow: 0 -12px 30px -18px rgba(22, 17, 15, .4); }
.barre-achat b { font-weight: 800; font-size: 19px; }
.barre-achat .bouton { font-size: 16px; padding: 13px 20px; }

/* Pages secondaires */
.moment { border: 1px solid var(--ligne); border-radius: 8px; }
.moment:nth-child(3) { background: var(--noir); }
.moment:nth-child(3) .moment__titre { color: var(--rose-nuit); }
.moment__titre { font-weight: 800; font-size: 28px; }
.simple h1 { font-weight: 800; }
.simple h2 { font-weight: 800; font-size: 26px; }
.motivation, .relais { border: 1px solid var(--ligne); border-radius: 10px; box-shadow: none; }
.motivation__choix button { border: 1px solid var(--noir); border-radius: 99px; }
.phrases__titre { font-weight: 800; }
.phrases__liste li { border-top: 1px solid var(--ligne); }
.phrases__liste li::before { font-style: italic; font-weight: 500; color: var(--rose); }
.prix__montant { border: 0; border-radius: 12px; }
.kit__visuel img { border: 0; box-shadow: var(--douce); }
.tampon { font-weight: 800; border-radius: 99px; padding: 4px 10px; }
.hero__logo { width: min(240px, 60vw); }
.hero__visuel--3d .macaron { bottom: -38px; left: -24px; }
.confiance + .dedans, .final + .pied, .pied { border-top: 1px solid #3A312C; }
@media (min-width: 900px) { .hero__visuel--3d .macaron { bottom: -64px; left: -30px; } }

/* Pour elle ou pour lui : bascule du héros (vivant.js) */
.pour { display: flex; align-items: center; gap: 6px; margin: 22px 0 0; font-size: 15px; }
.pour__question { color: var(--gris); margin-right: 4px; }
.pour__choix { font: 700 15px/1 var(--texte); padding: 9px 16px; border-radius: 99px; border: 1px solid var(--ligne); background: transparent; color: var(--noir); cursor: pointer; }
.pour__choix[aria-pressed="true"] { background: var(--noir); border-color: var(--noir); color: var(--papier); }
.pour__choix:focus-visible { outline: 2px solid var(--rose); outline-offset: 2px; }
.hero__ia { position: absolute; right: 0; bottom: -64px; margin: 0; font-size: 12.5px; color: var(--gris); }
.hero__ia[hidden] { display: none; }