/* ═══════════════════════════════════════════════════════════════
   bw-epure.css, le STYLE ÉPURÉ (Tristan, 10 oct. : « note ce style »).
   Pour les pages qu'il désigne ; la première est liens.html, la page du
   lien en bio. Ce qui le fait, en plus de la base premium :
   · tout au centre, et beaucoup d'air : 64 et 96 px entre les blocs ;
   · Inter FINE (300) en petite taille ; Playfair pour le seul nom ;
   · aucun trait séparateur, ni numéro, ni flèche ;
   · deux actions au plus en boutons à contour fin (le bouton du hero de
     la boutique), tout le reste en simples mots.
   Palette et rayon de bw-premium.css ; l'anneau clavier reste celui de
   bw-core.css. Le mouvement : la couleur au survol, rien d'autre.
   ═══════════════════════════════════════════════════════════════ */
#ep{display:flex;flex-direction:column;align-items:center;padding:0 var(--bw-gouttiere,28px) 96px;font-weight:300;text-align:center;color:var(--bwp-encre)}
html.bw-premium #ep > section{padding:0}

/* le premier écran : le nom, la phrase, les deux actions */
#ep .ep-haut{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;min-height:min(78svh,720px);padding:64px 0 40px}
#ep .ep-marque{display:flex;flex-direction:column;align-items:center;gap:8px;color:var(--bwp-encre);text-decoration:none}
#ep .ep-marque img{width:64px;height:auto}
#ep .ep-marque span{font:600 1rem/1 'Playfair Display',Georgia,serif;letter-spacing:-.01em}
#ep .ep-phrase{max-width:14ch;margin:64px 0 0;font:300 clamp(1.625rem,1.2rem + 1.5vw,2.25rem)/1.25 'Inter',system-ui,sans-serif;letter-spacing:-.01em;color:var(--bwp-encre);text-wrap:balance}
#ep .ep-actions{display:flex;flex-direction:column;gap:16px;width:100%;max-width:280px;margin-top:64px}
#ep .ep-btn{display:flex;align-items:center;justify-content:center;min-height:52px;padding:0 24px;border:1px solid var(--bwp-encre);border-radius:2px;color:var(--bwp-encre);text-decoration:none;font:400 .75rem/1 'Inter',system-ui,sans-serif;letter-spacing:.3em;text-transform:uppercase;transition:background-color .25s ease,color .25s ease}
#ep .ep-btn:hover{background:var(--bwp-encre);color:#fff}

/* ensuite, en simples mots */
#ep .ep-liens{display:flex;flex-direction:column;align-items:center;gap:8px;margin-top:40px}
#ep .ep-liens a{display:block;padding:8px 16px;font-size:.9375rem;color:var(--bwp-brun);text-decoration:none;transition:color .2s ease}
#ep .ep-liens a:hover{color:var(--bwp-encre)}
#ep .ep-themes{margin-top:96px}
#ep .ep-themes h2{margin:0 0 16px;font:400 .6875rem/1.5 'Inter',system-ui,sans-serif;letter-spacing:.3em;text-transform:uppercase;color:var(--bwp-encre)}
/* les huit thèmes en grille régulière : 2 × 4 au téléphone, 4 × 2 dès 600 px */
#ep .ep-themes ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 24px;width:100%;max-width:320px;margin:0 auto;padding:0;list-style:none}
#ep .ep-themes li{max-width:none;margin:0}
#ep .ep-themes :is(a,span){display:block;padding:8px 0;font-size:.8125rem;color:var(--bwp-brun);text-decoration:none;transition:color .2s ease}
#ep .ep-themes a:hover{color:var(--bwp-encre)}

@media (min-width:600px){
  #ep .ep-themes ul{grid-template-columns:repeat(4,minmax(0,1fr));max-width:640px}
}
@media (min-width:900px){
  #ep .ep-haut{min-height:min(78vh,760px)}
  #ep .ep-actions{flex-direction:row;justify-content:center;width:auto;max-width:none}
  #ep .ep-btn{min-width:240px}
  #ep .ep-liens{flex-direction:row;gap:40px}
}
@media (prefers-reduced-motion:reduce){#ep :is(.ep-btn,.ep-liens a,.ep-themes a){transition:none}}
html.bw-motion-off #ep :is(.ep-btn,.ep-liens a,.ep-themes a){transition:none}
