/* Import du font cursif "Allura" pour le lien Blog dans la nav (cf. règle
   `.nav-links a[href="/blog"]` plus bas). Inspiration : "le journal"
   d'Arlettie (script signature au milieu d'un menu sans-serif).
   @import est moins performant qu'un <link> direct mais évite de toucher
   le <head> de chaque page publique. */
@import url('https://fonts.googleapis.com/css2?family=Allura&display=swap');

/* ════════════════════════════════════════════════════════════════════════
   Epixure — Logo / Brand Mark canonique
   ────────────────────────────────────────────────────────────────────────
   Spécification (acté mai 2026, fondateur) :

     Rendu HTML        : Ep<em>i</em>xure   (lowercase "xure")
     Font family       : Cormorant Garamond (fallback: Georgia, serif)
     Weight            : 400 (Regular)
     Size              : 20px (par défaut — surcharger via la classe parent
                         si besoin de taille différente, ex. nav-logo,
                         footer-brand)
     Style             : italic sur le container, normal sur le <em>
                         → toutes les lettres en italique, sauf le "i"
                           qui reste droit et en gold
     Couleurs          : --ink #1A1A1F (Ep + xure)  → on utilise var(--ink)
                          du site (#0F0E0C, très proche visuellement)
                         --gold #C9A96E (le "i")    → var(--gold)

   Usage :
     <a class="nav-logo">Ep<em>i</em>xure</a>
     <span class="logo">Ep<em>i</em>xure</span>
     <div class="logo">Ep<em>i</em>xure</div>
     <a class="header-logo">Ep<em>i</em>xure</a>
     <a class="footer-brand">Ep<em>i</em>xure</a>
     <a class="epx-toolbar-brand">Ep<em>i</em>xure</a>

   Sur fond sombre (toolbar, footer ink), inverser la couleur container
   à #F0EBE0 (cream) — voir `.epx-toolbar-brand` dans book_renderer.py et
   .footer-brand sur les footers ink.

   Cette feuille définit le **socle typographique** commun. Les couleurs
   par fond (cream vs ink) et la taille spécifique sont appliquées par la
   classe parent (`.nav-logo`, `.footer-brand`, etc.) — voir la cascade
   en bas. Importer ce fichier dans toutes les pages qui rendent le logo
   visible.
   ════════════════════════════════════════════════════════════════════════ */

/* ── Socle commun à tous les rendus logo ─────────────────────────────── */
.nav-logo,
.logo,
.header-logo,
.footer-brand,
.epx-toolbar-brand,
.bc-brand-name {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 400;
  font-style: italic;
  letter-spacing: 0.3px;
  text-transform: none;
  text-decoration: none;
}

/* "i" upright + gold — annule l'italique hérité du container */
.nav-logo em,
.logo em,
.header-logo em,
.footer-brand em,
.epx-toolbar-brand em,
.bc-brand-name em {
  font-style: normal;
  color: #C9A96E;
}

/* ── Couleurs container par contexte ─────────────────────────────────── */
/* Sur fond clair (paper / cream) → ink */
.nav-logo,
.header-logo {
  color: #0F0E0C;
}

/* Sur fond sombre (ink) → cream */
.epx-toolbar-brand,
.footer-brand .logo,
.footer footer-brand,
footer .footer-brand,
footer .logo,
footer .footer-brand .logo {
  color: #F0EBE0;
}

/* Cas particulier : le `.logo` standalone (login, maintenance, coming-soon)
   est généralement sur fond clair. Surcharger ad-hoc si besoin. */
.logo {
  color: #0F0E0C;
}

/* Le footer du site a fond ink → override pour les rendus de logo
   à l'intérieur de <footer>. */
footer .logo,
footer .footer-brand .logo,
footer .footer-brand {
  color: #F0EBE0;
}

/* ── Tailles par contexte (préserver la hiérarchie visuelle) ──────────── */
.nav-logo {
  font-size: 22px;
}
.header-logo {
  font-size: 20px;
}
.footer-brand,
.footer-brand .logo,
footer .logo {
  font-size: 22px;
}
.epx-toolbar-brand {
  font-size: 20px;
}
.bc-brand-name {
  /* taille fixée par le mockup cover, ne pas overrider ici */
}

/* ════════════════════════════════════════════════════════════════════════
   Logo SVG via <img> — sizing par contexte (juin 2026, migration brand)
   ────────────────────────────────────────────────────────────────────────
   Le wordmark CSS-based historique (Ep<em>i</em>xure typo Cormorant) a
   été remplacé par des <img src="/media/logos/vertical/{color|light}.svg">
   livrés par le graphiste. Les règles font-* ci-dessus restent en place
   comme defensive fallback pour toute surface non-encore migrée.

   Sizes : feedback fondateur 2026-06-02 — taille x2.2 par rapport au
   wordmark texte d'origine (22px). Le layout vertical (picto au-dessus
   du texte) demande plus d'espace vertical pour rester lisible.
   ════════════════════════════════════════════════════════════════════════ */
.nav-logo img,
.header-logo img,
.epx-header-logo img,
.logo img,
.footer-brand img,
.footer-brand .logo img,
footer .logo img {
  display: block;
  width: auto;
}

/* Nav + header sticky — taille augmentée pour le layout vertical.
   Bump itératif (feedback fondateur 2026-06-02) : 72px → 130px →
   200px. Le layout vertical (picto sur le texte) demande plus de
   hauteur pour conserver la lisibilité du wordmark.

   Marges verticales négatives (feedback fondateur 2026-06-04) : le
   logo garde sa hauteur visuelle 200px MAIS sa contribution au flow
   layout vaut ~22px (= taille du wordmark texte historique). Résultat :
   la nav garde sa hauteur compacte d'origine (~62px = 22px + 2×20px
   padding) et le logo « déborde » verticalement de ±89px au-dessus et
   en-dessous de la baseline.

   Trick CSS : `margin: -89px 0` sur l'img dit au navigateur que le
   logo prend 200 − 2×89 = 22px de hauteur layout, tout en le rendant
   à 200px. La nav `overflow: visible` (default) laisse le débordement
   apparaître. */
.nav-logo img,
.header-logo img,
.epx-header-logo img {
  /* juin 2026 — bump 200px → 180px (×0.9) suite feedback fondateur.
     Margins recalibrées pour conserver layout-flow ~22px de baseline :
     marge = (180 - 22) / 2 = 79px.

     `.epx-header-logo` (interview, photos, review, merci, chorus-*) :
     ajouté juin 2026 quand on a migré ces 6 pages parcours utilisateur
     du wordmark texte historique vers le SVG. Même règle de sizing que
     les landing pages — la nav epx-header a un padding 14px qui laisse
     amplement de place pour le débordement vertical du logo (overflow
     visible par défaut). */
  height: 180px;
  margin-top: -79px;
  margin-bottom: -79px;
  vertical-align: middle;
}

/* Mobile : le logo (artboard 313×168 ≈ ratio 1.86) rendu à 180px fait ~336px
   de large et déborde la barre → la nav « disparaît »/casse sur petit écran.
   On réduit à 56px (~104px de large) en gardant la nav compacte via marges
   négatives (flow ~22px). Fix juin 2026 (feedback fondateur). */
@media (max-width: 600px) {
  .nav-logo img,
  .header-logo img,
  .epx-header-logo img {
    height: 56px;
    margin-top: -17px;
    margin-bottom: -17px;
  }
}

/* Footer — lockup compact + aligné à gauche dans la colonne brand.
   Feedback fondateur (juin 2026) : « mieux aligner le logo de clôture
   de page ». Réduit 80→60px pour limiter l'effet d'indentation dû à la
   marge interne de l'artboard SVG (toutes variantes partagent le même
   canvas 313×168). */
.footer-brand img,
.footer-brand .logo img,
footer .logo img {
  height: 58px;
  /* L'artboard SVG (313×168) centre la marque avec une marge interne, d'où
     un footer qui paraît indenté (feedback fondateur juin 2026). translateX
     en % ramène le bord gauche visible du logo sur le bord de la colonne
     (aligné avec le descriptif) — stable quelle que soit la taille. */
  transform: translateX(-9%);
}

/* Sessions topbar : compact (le topbar a une hauteur de ~50px). Garde
   relatif à la hauteur du topbar — vertical adapté reste limité ici. */
header#topbar .logo img {
  height: 60px;
}

/* Standalone <div class="logo"> sur pages full-page (login, maintenance,
   coming-soon) — taille brand size hero, centrée + spacing */
.login-container > .logo img,
.container > .logo img,
body > .logo img {
  height: 140px;
  margin: 0 auto 16px;
}

/* ════════════════════════════════════════════════════════════════════════
   Lien « Blog » dans la nav — police cursive Allura signature
   ────────────────────────────────────────────────────────────────────────
   Inspiration : "le journal" d'Arlettie. Au milieu d'une nav uppercase
   sans-serif (DM Sans 10px letter-spacing 3px), le Blog s'écrit en
   script flottant — marqueur éditorial qui distingue le contenu
   rédactionnel du commerce.

   Pas de text-transform (script s'écrit en bas-de-casse), pas de
   letter-spacing, taille rehaussée pour la lisibilité du script.
   Couleur gold reprise du logo. Légère élévation visuelle (margin-top
   négatif) pour aligner la baseline du script avec celle des autres
   liens uppercase.
   ════════════════════════════════════════════════════════════════════════ */
/* Spécificité renforcée (nav + classe + attribut) pour battre les rules
   `nav#nav .nav-links a` (id + class + 2 element) qu'on trouve sur faq
   + contact + collections.html. Sans cette spécificité, certaines pages
   conservaient la police legacy uppercase. */
nav .nav-links a[href="/blog"],
nav .nav-links a[href="blog"],
nav .nav-links a[href="/blog/"],
nav#nav .nav-links a[href="/blog"],
nav#nav .nav-links a[href="blog"],
nav#nav .nav-links a[href="/blog/"] {
  font-family: 'Allura', 'Cormorant Garamond', Georgia, cursive !important;
  font-size: 22px !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--gold, #C9A96E) !important;
  opacity: 1 !important;
  font-weight: 400 !important;
  /* Compenser visuellement la x-height plus haute du script pour aligner
     la baseline avec celle des autres liens uppercase 10px. */
  line-height: 1 !important;
  position: relative;
  top: 1px;
}
nav .nav-links a[href="/blog"]:hover,
nav .nav-links a[href="blog"]:hover,
nav .nav-links a[href="/blog/"]:hover,
nav#nav .nav-links a[href="/blog"]:hover,
nav#nav .nav-links a[href="blog"]:hover,
nav#nav .nav-links a[href="/blog/"]:hover {
  opacity: 0.85 !important;
}

/* ── Backward-compat : neutraliser les vieilles surcharges ───────────── */
/* Plusieurs pages avaient des règles comme `letter-spacing: 8px` ou
   `text-transform: uppercase` sur `.nav-logo` (logo en bloc majuscule
   espacé). On les neutralise ici avec une spécificité légèrement
   supérieure pour ne pas avoir à toucher chaque fichier HTML. */
nav .nav-logo,
header .nav-logo,
header .header-logo {
  letter-spacing: 0.3px !important;
  text-transform: none !important;
  font-weight: 400 !important;
}

/* ════════════════════════════════════════════════════════════════════════
   Dropdown « Nos collections » → 3 produits (juin 2026)
   ────────────────────────────────────────────────────────────────────────
   Présent sur toutes les pages à nav standard. CSS mutualisé ici pour ne pas
   dupliquer dans chaque fichier. Le trigger garde le style nav de la page
   (uppercase) ; le volet est un mini-menu éditorial serif. !important requis
   pour battre les règles `nav#nav .nav-links a` (id) de faq/contact/collections.
   ════════════════════════════════════════════════════════════════════════ */
.nav-links .nav-dd { position: relative; display: inline-flex; align-items: center; }
.nav-links .nav-dd > a { display: inline-flex !important; align-items: center; gap: 6px; }
.nav-links .nav-dd > a::after {
  content: ''; width: 6px; height: 6px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg); position: relative; top: -1px; opacity: 0.55;
}
.nav-dd-menu {
  position: absolute; top: 100%; left: 50%;
  transform: translateX(-50%) translateY(8px);
  min-width: 215px; background: #faf8f4;
  border: 1px solid rgba(201,169,110,0.2); border-radius: 8px;
  padding: 8px; box-shadow: 0 18px 44px -22px rgba(0,0,0,0.4);
  opacity: 0; visibility: hidden; transition: opacity 0.2s, transform 0.2s; z-index: 200;
}
.nav-links .nav-dd:hover .nav-dd-menu,
.nav-links .nav-dd:focus-within .nav-dd-menu {
  opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
}
.nav-dd-menu a {
  display: block !important; padding: 9px 14px; border-radius: 6px;
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-size: 16px !important; font-style: italic !important;
  letter-spacing: 0 !important; text-transform: none !important;
  color: #0F0E0C !important; opacity: 1 !important; white-space: nowrap;
  transition: background 0.15s, color 0.15s;
}
.nav-dd-menu a:hover { background: rgba(201,169,110,0.12); color: #9c7a2e !important; }
@media (max-width: 600px) { .nav-links .nav-dd { display: none !important; } }