/* ------------------------------------------------------------------
   Feuille commune du site public Epixure (octobre 2026).
   Une seule couleur de marque, la terracotta ; fond de page ivoire ;
   titres en Fraunces, texte en DM Sans ; ni italique ni or.
   AUCUN texte sous 16 px.
   Une page l'adopte en chargeant cette feuille APRES ses propres styles
   et en posant la classe « epx-site » sur la balise body. Les noms de
   classes de la barre du haut et du pied de page sont ceux que les pages
   portent deja (nav#nav, .nav-links, .nav-cta, .nav-dd, footer…).
   Charte : marketing/epixure/charte.md (branche marketing).
   ------------------------------------------------------------------ */
:root{
  --terre:#b9644a;        /* aplats, boutons */
  --terre-fonce:#a25540;  /* survol */
  --ivoire:#fbf3e8;       /* fond de page, texte sur terracotta */
  --ivoire-doux:rgba(251,243,232,.84);
  --encre:#2b211b;        /* texte */
  --gris:#6d6158;         /* texte secondaire */
  --filet:#ead9c8;
  --serif:'Fraunces',Georgia,serif;
  --sans:'DM Sans',system-ui,sans-serif;
  --large:1180px;
}
body.epx-site{background:var(--ivoire);color:var(--encre);font-family:var(--sans);
  font-size:19px;line-height:1.55;overflow-x:hidden}
body.epx-site::before{content:none}
body.epx-site img{max-width:100%}
body.epx-site h1,body.epx-site h2,body.epx-site h3{font-family:var(--serif);font-weight:500;
  letter-spacing:-.015em;line-height:1.08;text-wrap:balance}
/* Les titres gardent leur balisage (em) pour les traductions ; il ne change
   plus ni la graisse, ni le style, ni la couleur. */
body.epx-site em{font-style:normal;color:inherit}
.epx-large{max-width:var(--large);margin:0 auto;padding:0 40px}
.epx-sur{display:block;font-family:var(--sans);font-size:16px;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;margin-bottom:18px}
.epx-bouton{display:inline-block;font-family:var(--sans);font-size:16px;font-weight:500;letter-spacing:.1em;
  text-transform:uppercase;text-decoration:none;padding:17px 30px;border:1.5px solid currentColor;color:inherit;
  transition:background .2s,color .2s,border-color .2s}
.epx-bouton.plein{background:var(--terre);border-color:var(--terre);color:var(--ivoire)}
.epx-bouton.plein:hover{background:var(--terre-fonce);border-color:var(--terre-fonce)}
.epx-bouton.blanc{background:#fff;border-color:#fff;color:var(--encre)}
.epx-bouton.blanc:hover{background:var(--ivoire);border-color:var(--ivoire)}

/* --- barre du haut -------------------------------------------------- */
body.epx-site nav#nav{position:fixed;top:0;left:0;right:0;z-index:100;padding:10px 40px;
  display:flex;align-items:center;justify-content:space-between;
  background:var(--ivoire);border-bottom:1px solid var(--filet);
  transition:background .3s,border-color .3s}
body.epx-site .nav-logo{display:flex;align-items:center;text-decoration:none;letter-spacing:0}
/* Logo : bulle en relief, a l'horizontale. */
body.epx-site .nav-logo img{height:46px;width:auto;max-width:none;margin:0;display:block}
body.epx-site .nav-links{display:flex;gap:30px;align-items:center}
body.epx-site .nav-links a{font-family:var(--sans);font-size:17px;font-weight:500;letter-spacing:0;
  text-transform:none;color:var(--encre);text-decoration:none;opacity:1;transition:color .2s}
body.epx-site .nav-links a:hover{color:var(--terre)}
body.epx-site:not(.epx-photo) nav#nav .nav-links a:not(.nav-cta){color:var(--encre);opacity:1}
body.epx-site:not(.epx-photo) nav#nav .nav-links a:not(.nav-cta):hover{color:var(--terre)}
body.epx-site nav#nav .nav-links a.nav-cta{background:var(--terre)!important;color:var(--ivoire)!important;opacity:1!important}
body.epx-site .nav-links a.nav-cta{background:var(--terre);color:var(--ivoire)!important;
  padding:12px 22px;font-size:16px!important;letter-spacing:.1em!important;text-transform:uppercase}
body.epx-site .nav-links a.nav-cta:hover{background:var(--terre-fonce)!important}
body.epx-site .nav-dd-menu a{font-size:16px!important}
/* Le lien du blog, le menu deroulant et le choix de langue reprennent le
   style commun (les feuilles plus anciennes leur donnaient de l'or, de
   l'italique et des tailles sous 16 px). */
body.epx-site nav#nav .nav-links a[href="/blog"],body.epx-site nav#nav .nav-links a[href="blog"],
body.epx-site nav#nav .nav-links a[href="/blog/"]{font-family:var(--sans)!important;font-size:17px!important;
  font-style:normal!important;font-weight:500!important;letter-spacing:0!important;text-transform:none!important;
  color:var(--encre)!important;border:0!important;padding:0!important;background:none!important}
body.epx-site .nav-mega-titre,body.epx-site .nav-dd-menu a.nav-mega-titre-lien{font-size:16px!important;
  letter-spacing:.1em!important;color:var(--terre)!important}
body.epx-site .nav-dd-menu{background:#fff;border:1px solid var(--filet)}
body.epx-site .nav-dd-menu a{color:var(--encre)!important}
body.epx-site .lang-switcher{background:none;border:1.5px solid currentColor;border-radius:0;color:var(--encre)}
body.epx-site .lang-switch{font-family:var(--sans);font-size:16px;color:inherit;opacity:.65}
body.epx-site .lang-switch.active{opacity:1;background:none;text-decoration:underline;text-underline-offset:4px}
body.epx-site .epx-passerelle,body.epx-site .epx-passerelle *{font-size:16px!important;font-style:normal!important}
body.epx-site .epx-passerelle a{color:#fff!important}
body.epx-site footer .footer-brand p{font-style:normal}
/* Page ouverte par une photo plein cadre : la barre est posee sur la photo
   tant qu'on n'a pas fait defiler, puis reprend son fond ivoire. */
body.epx-site.epx-photo nav#nav:not(.scrolled){background:transparent;border-bottom-color:transparent}
body.epx-site.epx-photo nav#nav:not(.scrolled) .nav-logo img{content:url(/media/logos-v2/vector/relief-nav-clair.svg)}
@media(min-width:901px){
  body.epx-site.epx-photo nav#nav:not(.scrolled) .nav-links>a:not(.nav-cta),
  body.epx-site.epx-photo nav#nav:not(.scrolled) .nav-dd>a,
  body.epx-site.epx-photo nav#nav:not(.scrolled) .nav-links a[href="/blog"],
  body.epx-site.epx-photo nav#nav:not(.scrolled) .nav-links a[href="blog"]{color:#fff!important}
}
body.epx-site.epx-photo nav#nav:not(.scrolled) .epx-burger{color:#fff}
body.epx-site.epx-photo nav#nav:not(.scrolled)>.lang-switcher,
body.epx-site.epx-photo nav#nav:not(.scrolled) .nav-links .lang-switcher{color:#fff}
body.epx-site.epx-photo nav#nav:not(.scrolled) .auth-nav-icon,body.epx-site.epx-photo nav#nav:not(.scrolled) .auth-nav-container a{color:#fff!important;border-color:#fff!important}

/* --- pied de page --------------------------------------------------- */
body.epx-site footer{background:var(--encre);color:#efe6da;padding:64px 0 36px;font-size:17px;border:0}
body.epx-site footer .footer-grid{max-width:var(--large);margin:0 auto;padding:0 40px;
  display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:44px}
body.epx-site footer .footer-brand .logo img{height:44px;width:auto;max-width:none;
  margin:0 0 18px;display:block}
body.epx-site footer .footer-brand p{font-family:var(--sans);font-size:16px;line-height:1.6;color:#cfc4b6;max-width:340px}
body.epx-site footer h4{font-family:var(--sans);font-size:16px;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:#fff;margin-bottom:16px}
body.epx-site footer .footer-col a{display:block;font-family:var(--sans);font-size:17px;color:#efe6da;
  text-decoration:none;margin-bottom:10px;opacity:1;letter-spacing:0;text-transform:none}
body.epx-site footer .footer-col a:hover{color:#fff;text-decoration:underline}
body.epx-site footer .footer-bottom{max-width:var(--large);margin:44px auto 0;padding:24px 40px 0;
  border-top:1px solid rgba(239,230,218,.18);display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
body.epx-site footer .footer-bottom p{font-family:var(--sans);font-size:16px;color:#b9ad9e;letter-spacing:0;text-transform:none}
body.epx-site footer p,body.epx-site footer a{font-size:16px}

@media(max-width:900px){
  body.epx-site nav#nav{padding:8px 20px}
  body.epx-site .nav-logo img{height:38px;width:auto}
  .epx-large{padding:0 22px}
  body.epx-site footer .footer-grid{grid-template-columns:1fr 1fr;padding:0 22px;gap:32px}
  body.epx-site footer .footer-brand{grid-column:1/-1}
  body.epx-site footer .footer-bottom{padding:24px 22px 0}
}
@media(max-width:520px){
  body.epx-site footer .footer-grid{grid-template-columns:1fr}
}

/* ------------------------------------------------------------------
   Pages plus anciennes passees au nouveau style sans etre redessinees.
   Leurs couleurs et leurs polices sont des variables : on les redefinit
   ici, sur la balise body, et toute la page suit.
   ------------------------------------------------------------------ */
body.epx-site{
  --gold:var(--terre); --gold-light:var(--terre); --gold-deep:var(--terre-fonce);
  --gold-wash:#f5e9da; --gold-line:var(--filet); --gold-line-strong:#dcc4ad;
  --ink:var(--encre); --dark:var(--encre); --ink-soft:#4a3d34; --ink-faint:var(--gris);
  --paper:var(--ivoire); --surface:var(--ivoire); --surface-raised:#fff;
  --cream:#f5e9da; --mist:#f5e9da; --warm:#f5e9da; --fog:#f5e9da;
  /* --soft est une couleur de TEXTE dans les pages qui l'emploient (Le Choeur
     des proches, passerelle) : la passer en creme rendait ce texte invisible. */
  --soft:var(--gris);
  --warm-grey:var(--gris); --warm-gray:var(--gris); --gray:var(--gris); --muted:var(--gris);
  --line:var(--filet); --line-strong:#dcc4ad; --border:var(--filet);
  --font-serif:var(--serif); --display:var(--serif); --font-sans:var(--sans);
}
/* Le texte courant est en DM Sans ; la serif est reservee aux titres. */
body.epx-site p,body.epx-site li,body.epx-site dd,body.epx-site dt,body.epx-site td,body.epx-site th,
body.epx-site label,body.epx-site input,body.epx-site select,body.epx-site textarea,body.epx-site button,
body.epx-site summary,body.epx-site figcaption,body.epx-site small{font-family:var(--sans)}
body.epx-site blockquote,body.epx-site blockquote p{font-family:var(--serif)}
/* Sur un fond sombre, la terracotta ne se lit pas : les accents y sont clairs. */
body.epx-site .epx-sombre,body.epx-site footer{--gold:#f0c4b0;--gold-light:#f0c4b0}

/* ------------------------------------------------------------------
   Direction « actuelle » (octobre 2026), partie de la page du Studio :
   coins arrondis, ombre douce a la place du filet, boutons en pilule.
   Les classes listees sont celles que portent deja les pages.
   ------------------------------------------------------------------ */
:root{
  --rayon:28px; --rayon-s:16px;
  --ombre:0 1px 2px rgba(43,33,27,.05),0 18px 50px -24px rgba(43,33,27,.28);
  --ombre-haut:0 1px 2px rgba(43,33,27,.05),0 28px 60px -24px rgba(43,33,27,.34);
}
/* boutons : une pilule, partout */
body.epx-site :is(.epx-bouton,.nav-cta,.gbx-btn,.mp-cta-btn,.gb-cta-btn,.cta-btn,.btn-primary,.btn-secondary,
  .btn-ghost,.pblock-cta,.result-cta,.promise-cta,.btn-contact,.product-btn,.btn-download,.go,.saison-cta,
  .btn-product,.form-submit,.mobile-cta,.card-foot a),
body.epx-site .hero-cta a,body.epx-site .sub-cta a,body.epx-site button[type="submit"]{border-radius:999px}
body.epx-site .lang-switcher{border-radius:999px;overflow:hidden}
body.epx-site .nav-dd-menu{border-radius:var(--rayon-s);box-shadow:var(--ombre)}
/* champs de saisie */
body.epx-site :is(input[type="text"],input[type="email"],input[type="tel"],input[type="number"],input[type="date"],
  select,textarea){border-radius:14px}
/* cartes et encadres */
body.epx-site :is(.gbx-pledge,.mp-how-step,.gb-how-step,.gb-theme-card,.how-step,.occ-tile,.pcard,.pblock-media,
  .selector-result-card,.value-card,.partnership-card,.other-card,.tip-card,.highlight-box,.check-box,
  .example-block,.blog-card,.fcol,.mp-pricing-card,.gb-price-card,
  .modal-card,.note-template,.gbx-story,.dark-quote,.pricing-block,.highlight-dark,.testimonial-card,
  .gbx-duel>div,.gbx-cover,.gbx-spread){border-radius:var(--rayon)}
body.epx-site :is(.pblock-media,.occ-tile,.blog-card,.gbx-cover){overflow:hidden}
body.epx-site :is(.pcard,.value-card,.partnership-card,.other-card,.tip-card,.blog-card,.gb-theme-card){
  border-color:transparent;box-shadow:var(--ombre)}
body.epx-site :is(.gbx-thumbs img,.gbx-thumbs button,.gbx-gallery img,.gbx-main,.gbx-main img){border-radius:var(--rayon-s)}
/* catalogue par occasion et page du bon cadeau */
body.epx-site button.card,body.epx-site article.card{border-radius:var(--rayon);overflow:hidden;box-shadow:var(--ombre)}
body.epx-site main .bloc,body.epx-site section .bloc{border-radius:var(--rayon)}