/* =====================================================================
   Noosly, le site

   MÊME ÉNERGIE, PAS LE MÊME HABIT. La référence est une page éditoriale :
   du serif énorme, des sections pleine page qui changent de couleur, des
   cartes produit, un long bloc de texte, et un logotype géant en pied.
   C'est une STRUCTURE, pas un habillage : on la remplit avec notre DA et
   nos mots.

   CE QUI CHANGE PAR RAPPORT À LA RÉFÉRENCE :
     le fond est blanc cassé, pas blanc pur, comme l'application
     le rouge devient framboise, avec ses trois déclinaisons
     le serif est Newsreader, celui du produit
     les capitales espacées en DM Mono remplacent les surtitres gras

   RESPONSIVE : tout est en clamp(), donc rien ne casse entre un
   téléphone et un écran large. Aucune largeur fixe, aucune media query
   pour la typographie.
   ===================================================================== */

:root {
  --fond:        #F7F0E7;   /* ivoire */
  --surface:     #FFFCF8;   /* crème */
  --framboise:   #A33F58;
  --framboise-f: #8A3149;   /* sombre */
  --framboise-c: #D9819A;   /* claire */
  --intime:      #F7DFE5;   /* rose poudré */
  --lavande:     #A79BC4;
  --encre:       #2C1E19;
  --encre-douce: #6E574E;
  --encre-pale:  #9C857A;
  --bordure:     #EFE2D6;

  --serif: 'Newsreader', Georgia, serif;
  --sans:  'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono:  'DM Mono', ui-monospace, Menlo, monospace;

  --marge: clamp(20px, 5vw, 80px);
  --large: 1280px;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--surface);
  color: var(--encre);
  font-family: var(--sans);
  font-size: clamp(16px, 1.05vw, 18px);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; }

.enveloppe {
  max-width: var(--large);
  margin: 0 auto;
  padding-inline: var(--marge);
}

/* ---------------------------------------------------------------------
   Barre haute
   Collante et translucide, comme dans l'application : on garde l'accès
   au bouton d'action quelle que soit la hauteur de la page.
   --------------------------------------------------------------------- */

.entete {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--bordure);
}
.entete-inner {
  display: flex; align-items: center; gap: clamp(16px, 3vw, 46px);
  padding-block: clamp(14px, 1.6vw, 20px);
}

/* Le logotype dessiné remplace le mot composé en Newsreader. On fixe sa
   HAUTEUR et on laisse la largeur suivre : c'est la hauteur qui doit
   s'aligner sur la barre, pas la largeur. */
.logo { display: flex; flex: 0 0 auto; text-decoration: none; }
.logo img {
  height: clamp(30px, 3vw, 42px);
  width: auto;
}

/* LES LIENS SUIVENT LE LOGO, ils ne sont pas repoussés à droite. C'est
   ce qui distingue une barre éditoriale d'une barre d'application : le
   nom et la navigation forment un bloc, et seul le bouton d'action
   part à l'opposé. */
.nav {
  display: flex; align-items: center;
  gap: clamp(12px, 2.4vw, 38px);
  font-size: clamp(.9rem, 1.05vw, 1.02rem); font-weight: 500;
}
.nav a {
  text-decoration: none; color: var(--encre);
  padding-block: 6px;
  border-bottom: 2px solid transparent;
  transition: border-color .16s ease, color .16s ease;
}
.nav a:hover { color: var(--framboise); border-bottom-color: var(--framboise); }

/* Sous 1180 px, six liens ne tiennent plus entre le logo et le bouton.
   Ils disparaissent plutôt que de se replier en accordéon : le pied de
   page les reprend tous, et le bouton d'action doit rester visible. */
@media (max-width: 1180px) { .nav { display: none; } }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 13px 26px; border-radius: 999px;
  font-family: var(--sans); font-size: .96rem; font-weight: 600;
  text-decoration: none; border: 1.5px solid transparent;
  cursor: pointer; white-space: nowrap;
  transition: transform .12s ease, background .16s ease, color .16s ease;
}
.btn:active { transform: scale(.97); }
.btn-plein  { background: var(--framboise); color: #FFF8F2; }
.btn-plein:hover { background: var(--framboise-f); }
.btn-encre  { background: var(--encre); color: #FFF8F2; }
.btn-encre:hover { background: #1d130f; }
.btn-clair  { background: var(--fond); color: var(--encre); }
.btn-clair:hover { background: var(--intime); }
.btn-contour { border-color: currentColor; }
.btn-contour:hover { background: color-mix(in srgb, currentColor 10%, transparent); }
/* `auto` ici plutôt que sur la navigation : c'est le bouton, et lui
   seul, qui est chassé vers le bord droit. */
.entete .btn { margin-inline-start: auto; flex: 0 0 auto; }

/* ---------------------------------------------------------------------
   Hero
   Un seul titre, énorme, en framboise. Rien d'autre au dessus de la
   ligne de flottaison que la phrase et les deux gestes possibles.
   --------------------------------------------------------------------- */

.hero {
  text-align: center;
  padding-block: clamp(56px, 11vh, 140px) clamp(40px, 8vh, 90px);
}
.hero h1 {
  font-family: var(--serif);
  font-size: clamp(2.9rem, 11.5vw, 9.5rem);
  font-weight: 500;
  line-height: .96;
  letter-spacing: -.035em;
  color: var(--framboise);
  margin: 0 0 clamp(28px, 4vw, 48px);
  /* Le point final fait partie du dessin : il pose la phrase. */
  text-wrap: balance;
}
.hero-gestes {
  display: flex; flex-wrap: wrap; gap: 12px; justify-content: center;
}
.hero-sous {
  margin: clamp(36px, 6vw, 72px) auto 0;
  max-width: 42ch;
  color: var(--encre-douce);
  font-size: clamp(1rem, 1.3vw, 1.12rem);
}
.hero-sous a {
  color: var(--framboise); text-decoration: none;
  border-bottom: 1px solid currentColor;
}

/* ---------------------------------------------------------------------
   Les trois cartes
   --------------------------------------------------------------------- */

.section { padding-block: clamp(56px, 9vw, 120px); }

.titre-section {
  font-family: var(--serif);
  font-size: clamp(1.9rem, 4.6vw, 3.6rem);
  font-weight: 500; line-height: 1.05; letter-spacing: -.025em;
  margin: 0 0 clamp(28px, 4vw, 48px);
  text-wrap: balance;
}

.cartes {
  display: grid; gap: clamp(12px, 1.6vw, 20px);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
}
.carte {
  display: flex; flex-direction: column;
  padding: clamp(24px, 3vw, 36px);
  border-radius: 4px;
  min-height: clamp(380px, 46vw, 560px);
  text-decoration: none;
}
.carte-surtitre {
  font-family: var(--mono); font-size: .74rem; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase;
  margin-bottom: 10px;
}
.carte h3 {
  font-family: var(--serif);
  font-size: clamp(1.7rem, 2.9vw, 2.5rem);
  font-weight: 500; line-height: 1.05; letter-spacing: -.02em;
  margin: 0;
}
.carte-visuel {
  flex: 1 1 auto;
  display: flex; align-items: center; justify-content: center;
  padding-block: clamp(20px, 4vw, 40px);
  font-size: clamp(60px, 11vw, 110px); line-height: 1;
}
.carte-visuel img { width: clamp(84px, 13vw, 148px); height: auto; }
.carte p { margin: 0 0 12px; font-size: .96rem; line-height: 1.5; }
.carte-lien {
  font-weight: 600; text-decoration: underline;
  text-underline-offset: 4px;
}

.carte-framboise { background: var(--framboise-f); color: #FFF1F4; }
.carte-framboise .carte-surtitre { color: var(--framboise-c); }
.carte-encre     { background: #241812; color: #F3E7E9; }
.carte-encre .carte-surtitre { color: var(--framboise-c); }
.carte-encre h3  { color: var(--intime); }
.carte-claire    { background: var(--surface); color: var(--encre);
                   border: 1px solid var(--bordure); }
.carte-claire .carte-surtitre { color: var(--framboise); }

/* ---------------------------------------------------------------------
   Sections pleine page
   --------------------------------------------------------------------- */

.pleine {
  padding-block: clamp(72px, 13vw, 168px);
  text-align: center;
}
.pleine-framboise { background: var(--framboise-f); color: #FFF1F4; }
.pleine-ivoire    { background: var(--fond); color: var(--encre); }
.pleine-intime    { background: var(--intime); color: var(--framboise-f); }
.pleine-encre     { background: #241812; color: #F3E7E9; }

.pleine h2 {
  font-family: var(--serif);
  font-size: clamp(1.9rem, 5.4vw, 4.4rem);
  font-weight: 500; line-height: 1.06; letter-spacing: -.03em;
  margin: 0 auto;
  max-width: 20ch;
  text-wrap: balance;
}
.pleine h2 em { font-style: italic; }
.pleine-mode {
  margin: clamp(16px, 2.4vw, 26px) 0 0;
  font-family: var(--mono); font-size: .76rem; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase;
  opacity: .72;
}
.pleine-texte {
  margin: clamp(26px, 4vw, 44px) auto 0;
  max-width: 56ch;
  font-size: clamp(1rem, 1.25vw, 1.1rem);
  line-height: 1.65;
}
.pleine-glyphe {
  font-size: clamp(44px, 7vw, 76px); line-height: 1;
  margin-bottom: clamp(18px, 3vw, 30px);
}
.pleine-glyphe img {
  width: clamp(56px, 8vw, 96px); height: auto; margin-inline: auto;
}

/* La rangée de vignettes penchées, comme des tirages posés sur la
   table. Les angles sont fixes et non aléatoires : une page doit
   s'afficher pareil à chaque visite. */
.tirages {
  display: flex; flex-wrap: wrap; justify-content: center;
  align-items: center; gap: clamp(10px, 2vw, 28px);
  margin-top: clamp(36px, 6vw, 72px);
}
.tirage {
  width: clamp(108px, 15vw, 190px);
  aspect-ratio: 3 / 4;
  border-radius: 3px;
  background: var(--surface);
  border: 8px solid var(--surface);
  box-shadow: 0 14px 34px -14px rgba(44, 30, 25, .5);
  display: flex; align-items: center; justify-content: center;
  font-size: clamp(30px, 5vw, 54px);
  color: var(--framboise);
}
.tirage:nth-child(1) { transform: rotate(-6deg); }
.tirage:nth-child(2) { transform: rotate(3deg) translateY(-14px); }
.tirage:nth-child(3) { transform: rotate(-2deg) translateY(10px); }
.tirage:nth-child(4) { transform: rotate(7deg); }
.tirage:nth-child(5) { transform: rotate(-4deg) translateY(-8px); }

/* Le bloc de conversation, pour présenter Nooa. */
.echange {
  max-width: 460px; margin: clamp(36px, 5vw, 60px) auto 0;
  display: flex; flex-direction: column; gap: 10px; text-align: start;
}
.bulle {
  padding: 14px 18px; border-radius: 22px;
  font-size: .98rem; line-height: 1.5; max-width: 86%;
}
.bulle-moi {
  align-self: flex-end; border-bottom-right-radius: 7px;
  background: var(--intime); color: var(--encre);
}
.bulle-nooa {
  align-self: flex-start; border-bottom-left-radius: 7px;
  background: var(--surface); color: var(--encre);
  border: 1px solid var(--bordure);
}
.bulle-nom {
  display: block; margin-bottom: 4px;
  font-family: var(--mono); font-size: .66rem; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; color: var(--encre-pale);
}

/* ---------------------------------------------------------------------
   Le bloc de texte long
   --------------------------------------------------------------------- */

.pourquoi { background: var(--framboise-f); color: #FFF1F4; }
.pourquoi-grille {
  display: grid; gap: clamp(28px, 5vw, 72px);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  align-items: start;
}
.pourquoi h2 {
  font-family: var(--serif);
  font-size: clamp(2rem, 4.4vw, 3.4rem);
  font-weight: 500; line-height: 1.06; letter-spacing: -.03em;
  margin: 0; color: var(--intime);
}
.pourquoi h2 em { font-style: italic; }
.pourquoi p { margin: 0 0 1.1em; line-height: 1.7; }
.pourquoi p:last-child { margin-bottom: 0; }

/* ---------------------------------------------------------------------
   Questions, et pied de page
   --------------------------------------------------------------------- */

.questions { background: var(--framboise-f); color: #FFF1F4; text-align: center; }
.questions h2 {
  font-family: var(--serif);
  font-size: clamp(1.9rem, 5vw, 4rem);
  font-weight: 500; line-height: 1.08; letter-spacing: -.03em;
  margin: 0 auto clamp(28px, 4vw, 44px); max-width: 18ch;
  text-wrap: balance;
}
.questions h2 em { font-style: italic; }

.note-bas {
  margin-top: clamp(40px, 7vw, 80px);
  font-size: .78rem; line-height: 1.6; opacity: .66; text-align: start;
}

.pied { background: var(--framboise-f); color: #FFF1F4; padding-top: clamp(40px, 6vw, 80px); }
.pied-grille {
  display: grid; gap: clamp(26px, 4vw, 48px);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
  padding-bottom: clamp(40px, 6vw, 72px);
}
.pied h3 {
  margin: 0 0 14px; font-size: .96rem; font-weight: 700; color: #FFF8F2;
}
.pied ul { list-style: none; margin: 0; padding: 0;
           display: flex; flex-direction: column; gap: 11px; }
.pied a { text-decoration: none; opacity: .82; font-size: .94rem; }
.pied a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 4px; }

/* Le logotype géant en pied de page. Il ne dit rien de plus que le nom,
   et c'est tout l'intérêt : on referme sur la marque.

   Il DÉBORDE volontairement de la largeur du texte, jusqu'aux bords de
   l'écran, et il est rogné par le bas. Un logo sagement centré dans sa
   marge n'aurait pas cet effet de signature. */
.logotype {
  display: block;
  width: calc(100% - var(--marge) * 2);
  max-width: 1500px;
  height: auto;
  margin: clamp(20px, 4vw, 48px) auto -4%;
  user-select: none;
}
.pied-bas {
  display: flex; flex-wrap: wrap; gap: 14px 26px;
  align-items: center; justify-content: space-between;
  padding-block: 22px;
  border-top: 1px solid color-mix(in srgb, #FFF1F4 22%, transparent);
  font-size: .84rem; opacity: .74;
}

/* ---------------------------------------------------------------------
   Mouvement
   Une apparition au défilement, discrète. Elle se coupe entièrement
   pour qui a demandé moins de mouvement.
   --------------------------------------------------------------------- */

/* LE MASQUAGE N'EXISTE QUE SI LE SCRIPT TOURNE. `.monte` part à
   opacity 0 et c'est le script qui la révèle. Sans ce garde, un
   JavaScript en échec, bloqué par une extension ou coupé par un réseau
   capricieux laisserait une page entièrement blanche. La classe est
   posée sur <html> par une ligne en tête de document : elle n'apparaît
   donc que là où le script s'exécute vraiment. */
@media (prefers-reduced-motion: no-preference) {
  .js .monte {
    opacity: 0; transform: translateY(22px);
    transition: opacity .7s ease, transform .7s cubic-bezier(.22, .9, .3, 1);
  }
  .js .monte.vu { opacity: 1; transform: none; }
}

/* =====================================================================
   Sortir : de vraies sorties, de vrais films

   Les vignettes viennent des serveurs d'OpenAgenda et de TMDB, comme
   dans l'application. Deux conséquences dans ces styles :

   Chaque image reçoit un fond de couleur en attendant son chargement,
   sinon la grille clignote en blanc au défilement.

   Et `aspect-ratio` est imposé partout : sans lui, une image qui arrive
   plus tard décale toute la page en s'insérant. C'est le défaut le plus
   visible d'une grille alimentée par le réseau.
   ===================================================================== */

.sorties {
  display: grid; gap: clamp(12px, 1.6vw, 20px);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
  margin-top: clamp(40px, 6vw, 72px);
  text-align: start;
}
.sortie {
  background: var(--surface);
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 12px 30px -16px rgba(44, 30, 25, .45);
}
.sortie-image {
  width: 100%; aspect-ratio: 3 / 2; object-fit: cover;
  background: var(--intime);
}
.sortie-corps { padding: 16px 18px 18px; }
.sortie-quand {
  display: block; margin-bottom: 7px;
  font-family: var(--mono); font-size: .68rem; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase; color: var(--framboise);
}
.sortie h3 {
  margin: 0 0 8px; font-family: var(--serif);
  font-size: 1.15rem; font-weight: 500; line-height: 1.25;
  color: var(--encre);
}
.sortie-source { font-size: .8rem; color: var(--encre-pale); }

.affiches {
  display: grid; gap: clamp(12px, 1.6vw, 20px);
  grid-template-columns: repeat(auto-fit, minmax(min(45%, 160px), 1fr));
  margin-top: clamp(28px, 4vw, 44px);
  text-align: start;
}
.affiche { margin: 0; }
.affiche img {
  width: 100%; aspect-ratio: 2 / 3; object-fit: cover;
  border-radius: 6px; background: var(--framboise-c);
  box-shadow: 0 12px 30px -16px rgba(44, 30, 25, .5);
}
.affiche figcaption {
  margin-top: 10px; font-size: .9rem; font-weight: 600;
  color: var(--framboise-f); line-height: 1.3;
}
.affiche figcaption span {
  display: block; margin-top: 2px;
  font-weight: 400; font-size: .78rem; opacity: .72;
}

/* Les mentions imposées par les fournisseurs. Discrètes, jamais
   masquées : ce sont leurs conditions, pas une option de style. */
.credits {
  margin: clamp(28px, 4vw, 44px) auto 0;
  max-width: 62ch;
  font-size: .74rem; line-height: 1.6; opacity: .62;
}

/* Les illustrations dans les tirages penchés du journal. */
.tirage img { width: 62%; height: auto; }

/* Le visage de Nooa, composé et non dessiné.

   L'illustration précédente était floue : son fichier fait 109 pixels
   de côté et la page l'affichait à 96 points, donc 192 pixels sur un
   écran retina. Une lettre composée n'a pas cette limite, elle est
   nette à n'importe quelle taille et ne pèse rien.

   Les teintes sont celles de la voix automatique de l'application,
   celles que Nooa porte déjà dans le produit. */
.nooa-visage {
  width: clamp(72px, 9vw, 112px);
  aspect-ratio: 1;
  margin: 0 auto clamp(18px, 3vw, 30px);
  border-radius: 50%;
  background: #EDEAF4;
  color: #5D5080;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--serif);
  font-size: clamp(36px, 4.6vw, 58px);
  line-height: 1;
  user-select: none;
}

/* =====================================================================
   La page Abonnement

   DEUX COLONNES, PAS TROIS. La référence aligne trois paliers avec des
   noms de métaux. Noosly n'en a qu'un : gratuit, ou premium. Fabriquer
   un palier intermédiaire obligerait à découper ce qui est aujourd'hui
   inclus, donc à retirer aux gens ce qu'ils ont déjà.
   ===================================================================== */

.abo-hero {
  text-align: center; background: var(--fond);
  padding-block: clamp(48px, 9vh, 110px) clamp(40px, 7vh, 88px);
}
.abo-marque {
  display: flex; align-items: center; justify-content: center;
  gap: 12px; margin: 0 0 clamp(20px, 3vw, 34px);
}
.abo-marque img { height: clamp(22px, 2.2vw, 30px); width: auto; }
.abo-etiquette {
  padding: 5px 13px; border-radius: 999px;
  background: var(--framboise); color: #FFF8F2;
  font-family: var(--mono); font-size: .66rem; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase;
}
.abo-hero h1 {
  font-family: var(--serif);
  font-size: clamp(2.3rem, 6.6vw, 5.4rem);
  font-weight: 500; line-height: 1.02; letter-spacing: -.032em;
  color: var(--framboise); margin: 0 auto; max-width: 16ch;
  text-wrap: balance;
}
.abo-sous {
  margin: clamp(24px, 3.4vw, 40px) auto 0; max-width: 52ch;
  color: var(--encre-douce);
  font-size: clamp(1rem, 1.25vw, 1.12rem);
}

.formules {
  display: grid; gap: clamp(14px, 1.8vw, 22px);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  align-items: start;
}
.formule {
  display: flex; flex-direction: column;
  padding: clamp(26px, 3.2vw, 40px);
  border-radius: 6px;
  background: var(--surface); border: 1px solid var(--bordure);
}
.formule-premium { background: var(--framboise-f); color: #FFF1F4; border-color: transparent; }

.formule-entete {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: clamp(16px, 2vw, 24px);
}
.formule-entete img { height: 20px; width: auto; }
.formule-premium .formule-entete img { filter: brightness(0) invert(1); }
.formule-badge {
  padding: 4px 11px; border-radius: 999px;
  background: var(--intime); color: var(--framboise-f);
  font-family: var(--mono); font-size: .62rem; font-weight: 500;
  letter-spacing: .13em; text-transform: uppercase;
}
.formule-badge.premium { background: var(--framboise-c); color: #3A1420; }

.formule h3 {
  margin: 0 0 clamp(20px, 2.6vw, 30px);
  font-family: var(--serif);
  font-size: clamp(1.6rem, 2.6vw, 2.2rem);
  font-weight: 500; line-height: 1.12; letter-spacing: -.02em;
}
.formule-premium h3 { color: var(--intime); }

.formule-liste { margin: 0 0 clamp(20px, 2.6vw, 30px); }
.formule-liste > div + div { margin-top: 15px; }
.formule-liste dt { font-weight: 700; font-size: .98rem; }
.formule-liste dd {
  margin: 2px 0 0; font-size: .92rem; line-height: 1.5;
  color: var(--encre-douce);
}
.formule-premium .formule-liste dd { color: color-mix(in srgb, #FFF1F4 76%, transparent); }

.formule-pied {
  margin: 0 0 18px; font-size: .86rem; line-height: 1.55;
  color: var(--encre-pale);
}
.formule-premium .formule-pied { color: color-mix(in srgb, #FFF1F4 66%, transparent); }
.formule .btn { margin-top: auto; }

/* La grande icône des sections de fonctionnalité. */
.abo-icone {
  margin: 0 auto clamp(18px, 3vw, 30px);
  width: clamp(72px, 9vw, 112px);
}
.abo-icone img { width: 100%; height: auto; }

/* Le récapitulatif, en fin de page. */
.recap {
  display: grid; gap: clamp(18px, 2.6vw, 34px);
  grid-template-columns: repeat(auto-fit, minmax(min(45%, 150px), 1fr));
  text-align: center;
}
.recap-item {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  font-size: .94rem; font-weight: 600; line-height: 1.3;
}
.recap-item img { width: clamp(48px, 5.5vw, 68px); height: auto; }
.recap-nooa {
  width: clamp(48px, 5.5vw, 68px); aspect-ratio: 1; border-radius: 50%;
  background: #EDEAF4; color: #5D5080;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-size: clamp(24px, 2.8vw, 34px); line-height: 1;
}

/* Les questions fréquentes.

   `<details>` plutôt qu'un accordéon en JavaScript : le navigateur sait
   déjà faire, la recherche dans la page trouve le texte replié, et ça
   marche sans script. */
.faq { max-width: 62ch; margin: 0 auto; text-align: start; }
.faq details {
  border-bottom: 1px solid color-mix(in srgb, #FFF1F4 24%, transparent);
}
.faq summary {
  cursor: pointer; list-style: none;
  padding: clamp(16px, 2vw, 22px) 34px clamp(16px, 2vw, 22px) 0;
  position: relative;
  font-family: var(--serif); font-size: clamp(1.05rem, 1.5vw, 1.3rem);
  line-height: 1.3;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '+'; position: absolute; right: 4px; top: 50%;
  transform: translateY(-50%); font-size: 1.5em; line-height: 1;
  transition: transform .18s ease;
}
.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq p {
  margin: 0 0 clamp(16px, 2vw, 22px);
  font-size: .96rem; line-height: 1.6;
  color: color-mix(in srgb, #FFF1F4 82%, transparent);
}

/* La page en cours, marquée dans la barre. */
.nav a[aria-current="page"] {
  color: var(--framboise); border-bottom-color: var(--framboise);
}

/* Les gestes du bip.

   Les six badges du produit, à leur taille naturelle. Ils sont dessinés
   en 112 px : au delà, on les étirerait. */
.bips {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: clamp(16px, 3vw, 40px);
  margin: clamp(40px, 6vw, 72px) 0;
}
.bip {
  margin: 0; width: clamp(84px, 11vw, 116px);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.bip img { width: clamp(52px, 6.5vw, 84px); height: auto; }
.bip figcaption {
  font-size: .82rem; line-height: 1.3; text-align: center;
  color: var(--encre-douce);
}

/* L'horoscope du jour, cité. Le filet à gauche dit « ceci a été écrit »,
   comme la réponse gardée du journal. */
.horoscope-exemple {
  margin: clamp(32px, 5vw, 52px) auto;
  max-width: 46ch; padding: 20px 24px;
  border-radius: var(--r-l, 24px);
  background: color-mix(in srgb, #FFF1F4 8%, transparent);
  border-left: 3px solid var(--framboise-c);
  text-align: start;
}
.horoscope-duo {
  display: block; margin-bottom: 10px;
  font-family: var(--mono); font-size: .68rem; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--framboise-c);
}
.horoscope-exemple p {
  margin: 0; font-family: var(--serif);
  font-size: clamp(1.05rem, 1.5vw, 1.28rem); line-height: 1.45;
}

/* =====================================================================
   LES PAGES DE TEXTE

   Confidentialité, et demain les conditions d'utilisation. Ces pages
   n'ont rien à voir avec le reste du site : personne n'y arrive pour
   être séduit, on y arrive pour vérifier quelque chose. Elles se lisent
   donc en une colonne, sans illustration, sans apparition au
   défilement, et avec une mesure d'environ soixante-dix signes, au delà
   de laquelle l'œil perd sa ligne en revenant à la marge.

   Elles n'utilisent aucune classe du site marketing. `.carte` par
   exemple impose une hauteur minimale de 560 pixels, ce qui n'aurait
   aucun sens ici.
   ===================================================================== */

.doc-hero {
  padding-block: clamp(40px, 7vw, 80px) clamp(24px, 3vw, 36px);
  background: var(--intime);
}
/* Le titre et le texte partagent le même bord gauche. Laisser le titre
   à la marge du site pendant que le corps se centre sur sa mesure
   donnait deux documents superposés. */
.doc-hero > .enveloppe { max-width: 74ch; }
.doc-surtitre {
  margin: 0 0 10px;
  font-family: var(--mono); font-size: .72rem; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase; color: var(--framboise);
}
.doc-hero h1 {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(2rem, 5.4vw, 3.4rem);
  font-weight: 500; line-height: 1.05; letter-spacing: -.025em;
  text-wrap: balance;
}
.doc-date {
  margin: 14px 0 0; font-size: .9rem; color: var(--encre-douce);
}

/* La mesure prime sur la largeur du site : `.doc` porte aussi
   `.enveloppe`, dont il faut donc reprendre le max-width. */
.doc {
  max-width: 74ch;
  padding-block: clamp(36px, 6vw, 68px) clamp(60px, 10vw, 120px);
  font-size: 1.02rem; line-height: 1.75;
}
.doc p { margin: 0 0 1.05em; }
.doc a { color: var(--framboise); text-underline-offset: 3px; }
.doc a:hover { color: var(--framboise-f); }

.doc-chapo {
  font-size: 1.18rem; line-height: 1.6; color: var(--encre);
  margin-bottom: 1.3em !important;
}

.doc h2 {
  margin: 2.4em 0 .7em;
  padding-top: .9em;
  border-top: 1px solid var(--bordure);
  font-family: var(--serif);
  font-size: clamp(1.35rem, 3vw, 1.75rem);
  font-weight: 500; line-height: 1.2; letter-spacing: -.015em;
  scroll-margin-top: 90px;   /* l'en-tête est collante */
}
.doc h3 {
  margin: 1.9em 0 .5em;
  font-size: 1.02rem; font-weight: 700; letter-spacing: .005em;
  color: var(--framboise-f);
}
/* Le numéro se lit comme une cote, pas comme un mot. */
.doc-num {
  font-family: var(--mono); font-size: .7em; font-weight: 500;
  color: var(--framboise-c); margin-inline-end: .5em;
}

.doc ul { margin: 0 0 1.05em; padding-inline-start: 1.15em; }
.doc ul li { margin-bottom: .3em; }
.doc ul li::marker { color: var(--framboise-c); }

.doc-encart {
  margin: 0 0 1.3em;
  padding: clamp(16px, 2.4vw, 24px);
  border-radius: 14px;
  background: var(--surface);
  border: 1px solid var(--bordure);
}
.doc-encart p:last-child { margin-bottom: 0; }

/* Vingt-deux sections ne se retrouvent pas en faisant défiler. */
.doc-sommaire {
  margin: 2em 0 1em;
  padding: clamp(18px, 2.6vw, 26px) clamp(18px, 2.6vw, 30px);
  border-radius: 16px;
  background: var(--surface); border: 1px solid var(--bordure);
}
.doc-sommaire h2 {
  margin: 0 0 .7em; padding: 0; border: 0;
  font-family: var(--mono); font-size: .7rem; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase; color: var(--encre-pale);
}
.doc-sommaire ol {
  margin: 0; padding-inline-start: 1.6em;
  columns: 2; column-gap: 34px;
  font-size: .92rem; line-height: 1.55;
}
.doc-sommaire li { margin-bottom: .34em; break-inside: avoid; }
.doc-sommaire li::marker { font-family: var(--mono); font-size: .78em; color: var(--encre-pale); }
.doc-sommaire a { text-decoration: none; }
.doc-sommaire a:hover { text-decoration: underline; }

@media (max-width: 700px) {
  .doc-sommaire ol { columns: 1; }
  .doc { font-size: .99rem; }
}