/* ==================================================================
   EPOC — feuille de style principale
   Palette ink/cream/gold — Cormorant Garamond + Inter
   Aucun framework, aucun radius (sauf pastilles), transitions .28-.4s
   ================================================================ */

:root{
  --ink:#0c0b0a;
  --cream:#f4efe6;
  --paper:#faf7f0;
  --stone:#e8e0d2;
  --gold:#a88652;
  --mute:#6b665e;
  --line:#d8cfbf;

  --serif:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;

  --t:.32s cubic-bezier(.22,.61,.36,1);
  --t-slow:.4s cubic-bezier(.22,.61,.36,1);
  --t-fast:.28s cubic-bezier(.22,.61,.36,1);

  --wrap:1440px;
  --flush:2px;          /* gouttiere des grilles bord a bord */
  --gut:clamp(18px,4vw,64px);
  --header-h:72px;
  --z-header:900;
  --z-overlay:950;
  --z-drawer:960;
  --z-modal:980;
  --z-toast:990;
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-weight:300;
  font-size:15px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4,p,figure,ul,ol{margin:0}
ul,ol{padding:0;list-style:none}
table{border-collapse:collapse}
::selection{background:var(--ink);color:var(--cream)}

/* Le cadre bleu du navigateur n'apparaissait qu'au clic, sans utilite. On le
   reserve a la navigation au clavier, ou il reste indispensable, et on le met
   a la palette. */
:focus{outline:none}
:focus-visible{outline:1px solid var(--gold);outline-offset:3px}

.epoc-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.epoc-skip{position:absolute;left:-9999px;top:0;z-index:1000;background:var(--ink);color:var(--cream);padding:12px 20px}
.epoc-skip:focus{left:0}

.epoc-wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding-inline:var(--gut)}

/* ---------- Typographie ---------- */
.epoc-hero__title,.epoc-archive-title,.epoc-section-title,.epoc-card__name,
.epoc-summary__name,.epoc-qv__name,.epoc-news__title,.epoc-cat-tile__name,
.epoc-journal__title,.epoc-single__title,.epoc-manifesto__text{
  font-family:var(--serif);
  font-weight:300;
  font-style:italic;
  letter-spacing:.005em;
  line-height:1.08;
}

.epoc-kicker,.epoc-card__kicker,.epoc-summary__kicker,.epoc-section-kicker,
.epoc-hero__kicker,.epoc-news__kicker,.epoc-maison__kicker{
  font-family:var(--sans);
  font-weight:400;
  font-style:normal;
  font-size:10px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--gold);
}

.epoc-icon{width:19px;height:19px;display:block}

/* ---------- Ratio 3/4 impose ---------- */
.epoc-ratio{position:relative;display:block;overflow:hidden;background:var(--cream);aspect-ratio:3/4}
.epoc-ratio > img,.epoc-ratio img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* ---------- Boutons ---------- */
.epoc-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:15px 30px;border:1px solid var(--ink);background:transparent;color:var(--ink);
  font-family:var(--sans);font-size:11px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  text-align:center;transition:background var(--t),color var(--t),border-color var(--t);
}
.epoc-btn--solid{background:var(--ink);color:var(--paper)}
.epoc-btn--solid:hover{background:var(--gold);border-color:var(--gold);color:var(--ink)}
.epoc-btn--ghost:hover{background:var(--ink);color:var(--paper)}
.epoc-btn[disabled],.epoc-btn.is-loading{opacity:.5;pointer-events:none}

/* ==================================================================
   BANDEAU SAISON
   ================================================================ */
/* ---------- Bandeau saison : la devise traverse le bandeau ----------
   Une seule phrase, pas une frise repetee. Elle entre par la droite, traverse,
   sort par la gauche, et repart. Le depart est exprime en `100vw` et non en
   `100%` : `100%` se rapporterait a la largeur du texte, la phrase demarrerait
   donc a peine hors cadre sur un grand ecran. */
.epoc-season{
  position:relative;
  background:var(--ink);color:var(--cream);
  height:34px;overflow:hidden;
}
.epoc-season__track{position:absolute;inset:0}
.epoc-season__run{
  position:absolute;top:0;left:0;height:100%;
  display:flex;align-items:center;white-space:nowrap;
  font-size:10px;letter-spacing:.2em;text-transform:uppercase;font-weight:300;
  animation:epoc-season-defile 24s linear infinite;
}
@keyframes epoc-season-defile{
  from{transform:translateX(100vw)}
  to{transform:translateX(-100%)}
}

/* Le defile s'arrete sous le curseur : la phrase se lit alors sans courir */
.epoc-season:hover .epoc-season__run{animation-play-state:paused}

/* Sans animation, la phrase se pose au centre plutot que de rester hors cadre */
@media (prefers-reduced-motion:reduce){
  .epoc-season__run{
    position:static;animation:none;
    width:100%;justify-content:center;transform:none;
  }
}

/* ==================================================================
   HEADER
   ================================================================ */
.epoc-header{
  position:sticky;top:0;z-index:var(--z-header);
  background:var(--paper);
  border-bottom:1px solid var(--line);
  transition:box-shadow var(--t),background var(--t);
}
.epoc-header.is-stuck{box-shadow:0 1px 24px rgba(12,11,10,.06)}

.epoc-header__bar{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  gap:16px;min-height:var(--header-h);
  max-width:var(--wrap);margin:0 auto;padding-inline:var(--gut);
}

.epoc-nav--left{justify-self:start}
.epoc-nav__list{display:flex;align-items:center;gap:30px}
.epoc-nav__item > a{
  position:relative;display:inline-block;padding:6px 0;
  font-size:11px;font-weight:400;letter-spacing:.18em;text-transform:uppercase;
  transition:color var(--t);
}
.epoc-nav__item > a::after{
  content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;
  background:var(--ink);transform:scaleX(0);transform-origin:right;
  transition:transform var(--t);
}
.epoc-nav__item > a:hover::after,.epoc-nav__item.is-open > a::after{transform:scaleX(1);transform-origin:left}

.epoc-burger{display:none;padding:6px;margin-right:4px}

/* Logo centre */
.epoc-brand{justify-self:center}
.epoc-brand__link{display:flex;align-items:center;gap:12px}
.epoc-logo-img{width:34px;height:34px;object-fit:contain;transition:opacity var(--t)}
.epoc-brand__word{
  font-family:var(--sans);font-size:15px;font-weight:400;
  letter-spacing:.42em;text-transform:uppercase;padding-left:3px;
}
.epoc-brand__link:hover .epoc-logo-img{opacity:.62}

/* Utilitaires droite */
.epoc-utils{justify-self:end;display:flex;align-items:center;gap:20px}
.epoc-util{position:relative;display:flex;align-items:center;transition:opacity var(--t)}
.epoc-util:hover{opacity:.55}
.epoc-cart-count,.epoc-fav-count{
  position:absolute;top:-6px;right:-9px;min-width:15px;height:15px;padding:0 4px;
  display:flex;align-items:center;justify-content:center;
  background:var(--gold);color:var(--paper);
  font-size:9px;font-weight:500;letter-spacing:0;
  border-radius:50%; /* pastille : seule exception au no-radius */
  opacity:0;transform:scale(.6);transition:opacity var(--t),transform var(--t);
}
.epoc-cart-count.is-filled,.epoc-fav-count:not([hidden]){opacity:1;transform:scale(1)}
.epoc-region{
  font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--mute);
  border:1px solid var(--line);padding:5px 9px;white-space:nowrap;
  transition:border-color var(--t),color var(--t);
}
.epoc-region i{font-style:normal;color:var(--gold);margin:0 3px}
.epoc-region:hover{border-color:var(--ink);color:var(--ink)}

/* ==================================================================
   MEGA-MENU
   ================================================================ */
/* ---------- Volets de navigation ----------
   Architecture reprise de cos.com : deux colonnes fixes d'un quart de large,
   du bas de l'en-tete au bas de l'ecran, cernees d'un filet d'un pixel. Rien
   ne se deplie vers le bas — le menu prend la gauche, la page reste visible.
   `--navbottom` est pose par le script : l'en-tete est collant et le bandeau
   saison disparait au defilement, sa hauteur n'est donc pas connue en CSS. */
.epoc-navpanel{
  position:fixed;left:0;top:var(--navbottom,106px);
  height:calc(100dvh - var(--navbottom,106px));
  display:grid;grid-template-columns:25vw 25vw;
  pointer-events:none;
  z-index:var(--z-header);
}
.epoc-navpanel__col{
  position:relative;background:var(--paper);
  padding:clamp(26px,2.6vw,40px) clamp(22px,2vw,34px);
  opacity:0;visibility:hidden;transform:translateX(-14px);
  transition:opacity var(--t),transform var(--t),visibility var(--t);
  overflow-y:auto;
}
/* Le filet est porte par un calque : il ne bouge pas avec le defilement interne */
.epoc-navpanel__col::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  border-top:1px solid var(--line);
}
.epoc-navpanel__col--items::before{border-left:1px solid var(--line)}
.epoc-navpanel.is-open{pointer-events:auto}
.epoc-navpanel:not(.is-open),
.epoc-navpanel:not(.is-open) *{pointer-events:none}
.epoc-navpanel.is-open .epoc-navpanel__col{opacity:1;visibility:visible;transform:none}
.epoc-navpanel.is-open .epoc-navpanel__col--items{transition-delay:.06s}

.epoc-navpanel__kicker{
  display:block;margin-bottom:clamp(22px,2.4vw,34px);
  font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);
}
/* Les familles sont espacees pour de bon : c'est le survol qui commande la
   seconde colonne, et deux lignes collees obligent la souris a traverser la
   voisine — la colonne changeait sous le curseur en route. L'ecart entre deux
   lignes est un couloir mort ou rien ne se declenche. */
.epoc-navpanel__families{display:flex;flex-direction:column;gap:clamp(12px,1.8vw,26px)}
.epoc-navpanel__family{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:11px 0;
  font-size:14px;font-weight:300;color:var(--mute);
  transition:color var(--t);
}
.epoc-navpanel__family .epoc-navpanel__chev{
  width:15px;height:15px;opacity:0;transform:translateX(-6px);
  transition:opacity var(--t),transform var(--t);
}
.epoc-navpanel__family.is-current,
.epoc-navpanel__family:hover{color:var(--ink)}
.epoc-navpanel__family.is-current .epoc-navpanel__chev{opacity:1;transform:none}
/* Une famille sans page qui la resume est un bouton : meme dessin, pas de lien */
button.epoc-navpanel__family{width:100%;text-align:left;font-family:inherit}
/* Nouveautes / Toute la collection : des raccourcis, pas des familles */
.epoc-navpanel__family--plain{color:var(--mute)}
.epoc-navpanel__family--plain:hover{color:var(--gold)}
.epoc-navpanel__family--plain.is-current{color:var(--gold)}
.epoc-navpanel__aside{padding-top:clamp(14px,1.6vw,24px);border-top:1px solid var(--line)}

/* Les listes se superposent : la colonne ne change pas de largeur */
.epoc-navpanel__col--items{display:grid}
.epoc-navpanel__items{
  grid-area:1 / 1;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity var(--t-fast),visibility var(--t-fast);
}
/* La visibilite doit etre gagnee deux fois : par le volet, puis par la liste.
   Sans la premiere condition, la liste courante du volet ferme redevenait
   `visibility:visible` et `pointer-events:auto` — invisible mais cliquable, et
   posee exactement sur la liste du volet ouvert. « Nos robes » ouvrait alors
   « Le Manifeste », premiere entree du volet La Maison. */
.epoc-navpanel.is-open .epoc-navpanel__items.is-current{opacity:1;visibility:visible;pointer-events:auto}
.epoc-navpanel__items li{margin-bottom:1px}
.epoc-navpanel__items a,
.epoc-navpanel__items span{
  display:block;padding:8px 0;
  font-size:14px;font-weight:300;color:var(--ink);
  transition:color var(--t),padding-left var(--t);
}
.epoc-navpanel__items a:hover{color:var(--gold);padding-left:8px}
/* Rayon annonce, sans piece au catalogue : eteint, non cliquable, et la raison
   au survol plutot qu'un libelle gris sans explication */
.epoc-navpanel__items .is-soon span{color:var(--mute);opacity:.45;cursor:default}
/* Sur un raccourci, la colonne de detail n'a rien a montrer : elle s'efface */
.epoc-navpanel.is-bare .epoc-navpanel__col--items{opacity:0;visibility:hidden}

/* Le voile ferme le menu au clic et retient l'oeil a gauche */
.epoc-navveil{
  position:fixed;inset:0;background:rgba(12,11,10,.28);
  opacity:0;visibility:hidden;transition:opacity var(--t),visibility var(--t);
  z-index:calc(var(--z-header) - 1);
}
.epoc-navveil.is-open{opacity:1;visibility:visible}

/* Sous 1080px la navigation passe dans le tiroir */
@media (max-width:1080px){
  .epoc-navpanel,.epoc-navveil{display:none}
}

/* ---------- Tiroir : l'arborescence a plat ---------- */
/* ---------- Reseaux ---------- */
.epoc-social{display:inline-flex;align-items:center;gap:16px}
.epoc-social__link{color:inherit;opacity:.75;transition:opacity var(--t),color var(--t)}
.epoc-social__link:hover{opacity:1;color:var(--gold)}
.epoc-social .epoc-icon{width:17px;height:17px}


/* ==================================================================
   RECHERCHE
   ================================================================ */
.epoc-search{
  position:absolute;left:0;right:0;top:100%;background:var(--paper);
  border-bottom:1px solid var(--line);
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity var(--t),transform var(--t),visibility var(--t);
}
.epoc-search.is-open{opacity:1;visibility:visible;transform:translateY(0)}
.epoc-search__form{
  display:flex;align-items:center;gap:18px;
  max-width:var(--wrap);margin:0 auto;padding:34px var(--gut);
}
.epoc-search__input{
  flex:1;border:0;border-bottom:1px solid var(--line);background:transparent;
  padding:12px 0;font-family:var(--serif);font-style:italic;font-size:26px;
  outline:none;transition:border-color var(--t);
}
.epoc-search__input::placeholder{color:var(--line)}
.epoc-search__input:focus{border-color:var(--ink)}
.epoc-search__submit{
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  border-bottom:1px solid var(--ink);padding-bottom:3px;
}
.epoc-search__close{padding:6px;transition:opacity var(--t)}
.epoc-search__close:hover{opacity:.5}

/* ==================================================================
   ACCUEIL
   Composition pleine largeur facon COS : sections bord a bord,
   gouttieres serrees, libelles courts en capitales.
   La palette et les titres restent EPOC (creme, or, Cormorant).
   ================================================================ */

/* ==================================================================
   HERO — LE DEFILE
   Une colonne centree : le chapeau, deux photos, l'horloge, l'appel.

   Les visuels avancent par trois. Une prise de vue seule est un 2/3 ; trois de
   front forment un 2/1, et la bande couvre la largeur de l'ecran sans qu'aucune
   photo soit recadree. La largeur de la scene se calcule donc a partir de sa
   hauteur : trois fois deux tiers, plus les deux gouttieres.

   La releve est un fondu enchaine : deux couples qui se croisent, sans lames
   ni glissement. C'est ce que « epure » veut dire ici.
   ================================================================== */
.epoc-hero{
  /* La photo prend tout ce que l'ecran laisse : `100svh` moins la place du
     chapeau, de l'horloge et de l'appel — 152 px mesures, plus 12 px de garde.
     `--epoc-top` est la hauteur du bandeau et de l'en-tete, posee par le
     script : sans elle le calcul portait sur l'ecran entier et l'appel
     tombait sous le pli. Le defile tient donc entier a l'ecran, « Decouvrir la
     collection » compris, sans avoir a faire defiler la page. */
  --shot-h:clamp(240px, calc(100svh - var(--epoc-top,86px) - 164px), 900px);
  --shot-gap:clamp(5px,.7vw,12px);
  background:var(--paper);
  /* Gouttiere reduite : la scene doit pouvoir prendre toute la largeur que sa
     hauteur lui autorise, sans etre bridee par la marge de page. */
  padding:clamp(12px,1.4vw,18px) clamp(12px,1.6vw,28px) clamp(14px,1.6vw,22px);
}
.epoc-hero__inner{
  width:100%;margin:0 auto;
  display:flex;flex-direction:column;align-items:center;
  gap:clamp(9px,1vw,14px);
}

/* ---------- La scene : deux photos entieres ---------- */
.epoc-hero__stage{
  position:relative;
  height:var(--shot-h);
  width:min(100%, calc(var(--shot-h) * 2 + var(--shot-gap) * 2));
  background:var(--stone);
}
.epoc-hero__slide{
  position:absolute;inset:0;margin:0;
  display:grid;grid-template-columns:repeat(3,1fr);gap:var(--shot-gap);
  opacity:0;
  transition:opacity 1s cubic-bezier(.4,0,.2,1);
}
.epoc-hero__slide.is-current{opacity:1;z-index:2}
.epoc-hero__slide.is-leaving{opacity:0;z-index:1}
.epoc-hero__img{
  width:100%;height:100%;object-fit:cover;object-position:center top;
  display:block;background:var(--stone);
}
/* Un volet incomplet : les photos gardent leur place, elles ne s'etirent pas */
.epoc-hero__slide > .epoc-hero__img:only-child{grid-column:1}

/* ---------- L'horloge et les fleches ---------- */
.epoc-hero__controls{
  width:min(100%, calc(var(--shot-h) * 2 + var(--shot-gap) * 2));
  display:flex;align-items:center;justify-content:space-between;
  gap:clamp(14px,2vw,26px);
}

/* Le filet sert d'horloge : c'est la fin de son animation qui tourne la page */
.epoc-hero__rail{
  flex:1 1 auto;max-width:220px;
  display:block;height:1px;background:var(--line);overflow:hidden;
}
.epoc-hero__rail-fill{
  display:block;width:100%;height:100%;background:var(--gold);
  transform:scaleX(0);transform-origin:left center;
}
.epoc-hero.is-playing .epoc-hero__rail-fill{
  animation:epoc-hero-rail var(--dwell,6000ms) linear forwards;
}
@keyframes epoc-hero-rail{from{transform:scaleX(0)}to{transform:scaleX(1)}}

.epoc-hero__arrows{display:flex;gap:2px;flex:none}
.epoc-hero__arrow{
  display:flex;align-items:center;justify-content:center;
  width:30px;height:30px;color:var(--mute);
  transition:color var(--t);
}
.epoc-hero__arrow:hover{color:var(--ink)}
.epoc-hero__arrow .epoc-icon{width:15px;height:15px}
.epoc-hero__arrow--prev .epoc-icon{transform:scaleX(-1)}

/* ---------- L'appel ---------- */
.epoc-hero__cta{
  font-size:10px;letter-spacing:.22em;text-transform:uppercase;
  padding-bottom:5px;border-bottom:1px solid var(--line);
  transition:border-color var(--t),color var(--t);
}
.epoc-hero__cta:hover{color:var(--gold);border-bottom-color:var(--gold)}

/* Sans visuel, le chapeau tient seul la section */
.epoc-hero:not(.has-visual) .epoc-hero__inner{gap:clamp(20px,2.6vw,34px)}

/* Entre 700 et 900px la bande prend toute la largeur ; la gouttiere tombe a
   zero pour que le 2/1 reste exact et qu'aucune des trois photos ne soit
   rognee. */
@media (max-width:900px){
  .epoc-hero{--shot-gap:0px}
  .epoc-hero__stage{width:100%;height:auto;aspect-ratio:2 / 1}
  .epoc-hero__controls{width:100%}
}

/* Sous 700px, le defile cesse d'etre un defile.
   Trois photos de front y feraient cent trente pixels de large ; et un fondu
   enchaine sur un ecran tactile se pilote mal — on ne voyait que la premiere
   photo de chaque volet, soit quatre sur douze, sans moyen d'atteindre les
   autres. Les douze visuels deviennent donc une simple bande que l'on fait
   glisser du doigt, avec un point d'arret par photo. Les volets s'effacent :
   `display:contents` remet leurs images directement dans la bande. */
@media (max-width:700px){
  .epoc-hero__stage{
    display:flex;gap:0;
    height:auto;aspect-ratio:auto;width:auto;
    overflow-x:auto;scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    background:transparent;
    /* Pleine largeur, sans gouttiere : chaque photo occupe l'ecran entier et
       la suivante reste hors champ. Une photo entamee au bord se lit comme un
       defaut de calage, pas comme une invitation a glisser. */
    margin-inline:calc(var(--gut) * -1);
    padding-inline:0;
  }
  .epoc-hero__stage::-webkit-scrollbar{display:none}

  .epoc-hero__slide{display:contents}
  .epoc-hero__img{
    flex:0 0 100%;
    aspect-ratio:2 / 3;height:auto;
    scroll-snap-align:start;
    scroll-snap-stop:always;
    background:var(--stone);
  }

  /* Les fleches restent : tout le monde ne devine pas qu'on peut glisser, et
     c'est l'animation du filet qui sert d'horloge au defile — la masquer
     arreterait le defilement automatique. */
  .epoc-hero__controls{width:100%}
  .epoc-hero__rail{max-width:none}
}

/* Sans animation : le fondu disparait, la photo change net */
@media (prefers-reduced-motion:reduce){
  .epoc-hero__slide{transition:none}
  .epoc-hero__rail-fill{animation:none;transform:scaleX(1)}
}

/* ==================================================================
   LA MAISON — fondation et ecosysteme
   Sans photographie : ce sont les pastilles au filet et la typographie qui
   portent la section. Les quatre chapitres sont enfiles sur un filet d'or
   horizontal ; en pile, ce meme filet bascule a la verticale et retrouve la
   mise en page de la charte.
   ================================================================== */
.epoc-maison{
  --maison-bg:var(--ink);
  --maison-fg:var(--cream);
  --maison-line:rgba(244,239,230,.22);
  background:var(--maison-bg);
  color:var(--maison-fg);
  padding:clamp(64px,8vw,120px) var(--gut) clamp(52px,7vw,96px);
}
.epoc-maison--light{
  --maison-bg:var(--paper);
  --maison-fg:var(--ink);
  --maison-line:var(--line);
}
/* ---------- Variante pierre ----------
   Un gris chaud, entre le papier et le sable de la charte : la section se
   detache sans rompre. Le noir reste au seul pied de page, ou il ferme la
   lecture ; deux aplats sombres a la suite l'auraient coupee en deux.

   L'or est repris d'un ton plus profond pour cette seule section : sur un fond
   clair, le `#a88652` de la charte perd le contraste dont les intitules de dix
   pixels ont besoin. */
.epoc-maison--pierre{
  --maison-bg:#e4dfd6;
  --maison-fg:var(--ink);
  --maison-line:rgba(12,11,10,.17);
  --gold:#8a683a;
}
.epoc-maison--pierre .epoc-fondation__lead{opacity:.78}
.epoc-maison--pierre .epoc-fondation__note{opacity:.6}
.epoc-maison--pierre a.epoc-fondation__link:hover .epoc-fondation__disc{color:var(--cream)}
.epoc-maison__inner{max-width:var(--wrap);margin:0 auto}

.epoc-maison__head{text-align:center;margin-bottom:clamp(46px,6vw,82px)}
.epoc-maison__kicker{display:block;margin-bottom:20px;color:var(--gold)}
/* La signature de marque, en deux souffles */
.epoc-maison__claim{
  font-family:var(--serif);font-weight:300;font-style:italic;
  font-size:clamp(28px,3.4vw,50px);line-height:1.12;
}
.epoc-maison__claim span{display:block}
.epoc-maison__claim span + span{color:var(--gold)}

/* ---------- L'index des quatre chapitres ---------- */
.epoc-fondation{
  position:relative;display:grid;gap:clamp(20px,2.4vw,40px);
  grid-template-columns:repeat(4,minmax(0,1fr));
  list-style:none;margin:0;padding:0;counter-reset:none;
}
/* Le filet court d'une pastille a l'autre, jamais jusqu'aux bords */
.epoc-fondation__thread{
  position:absolute;top:27px;left:12.5%;right:12.5%;height:1px;
  background:var(--maison-line);
}
/* Les colonnes s'alignent sur la plus haute : les liens « Lire » restent sur
   une meme ligne meme quand les accroches n'ont pas le meme nombre de lignes. */
.epoc-fondation__item{display:flex;position:relative}
.epoc-fondation__link{
  display:flex;flex-direction:column;align-items:center;
  width:100%;text-align:center;padding-bottom:6px;
}
.epoc-fondation__mark{
  position:relative;display:block;height:58px;margin-bottom:16px;width:100%;
}
/* La pastille porte le fond de la section : c'est elle qui coupe le filet */
.epoc-fondation__disc{
  position:absolute;left:50%;top:0;transform:translateX(-50%);
  width:58px;height:58px;display:grid;place-items:center;
  border:1px solid var(--maison-line);border-radius:50%;
  background:var(--maison-bg);
  transition:border-color var(--t),background var(--t),color var(--t);
}
.epoc-fondation__glyph{width:25px;height:25px}
.epoc-fondation__num{
  display:block;margin-bottom:12px;
  font-family:var(--serif);font-style:italic;font-size:21px;line-height:1;color:var(--gold);
}
.epoc-fondation__name{
  display:block;margin-bottom:7px;
  font-size:12px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;
}
.epoc-fondation__sub{
  display:block;margin-bottom:14px;
  font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);
}
.epoc-fondation__lead{
  display:block;max-width:30ch;margin:0 auto 22px;
  font-size:13px;line-height:1.7;opacity:.72;
}
.epoc-fondation__go,
.epoc-fondation__note{margin-top:auto}
.epoc-fondation__go{
  display:inline-flex;align-items:center;gap:8px;
  font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);
  border-bottom:1px solid transparent;padding-bottom:3px;
  transition:border-color var(--t);
}
.epoc-fondation__go .epoc-icon{width:15px;height:15px}
.epoc-fondation__note{
  display:block;font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  opacity:.5;
}
a.epoc-fondation__link:hover .epoc-fondation__disc{
  background:var(--gold);border-color:var(--gold);color:var(--ink);
}
a.epoc-fondation__link:hover .epoc-fondation__go{border-color:var(--gold)}
a.epoc-fondation__link:hover .epoc-fondation__lead{opacity:1}

/* Le renvoi vers l'ecosysteme, sous l'index */
.epoc-maison__more{
  display:block;text-align:center;margin-top:clamp(42px,5vw,70px);
}
.epoc-maison__more a{
  display:inline-flex;align-items:center;gap:10px;
  font-size:10px;letter-spacing:.22em;text-transform:uppercase;
  border-bottom:1px solid var(--maison-line);padding-bottom:5px;
  transition:border-color var(--t),color var(--t);
}
.epoc-maison__more a:hover{color:var(--gold);border-color:var(--gold)}

/* En pile : le filet se redresse, l'index redevient la colonne de la charte */
@media (max-width:900px){
  .epoc-fondation{grid-template-columns:1fr;gap:34px}
  /* En pile, la hauteur d'un chapitre depend de son texte : un filet unique
     tomberait a cote de la derniere pastille. Chaque chapitre porte donc son
     propre segment, de sa pastille a la suivante — 58px de pastille, 34px de
     gouttiere, d'ou le calc. */
  .epoc-fondation__thread{display:none}
  .epoc-fondation__item:not(:last-child)::after{
    content:"";position:absolute;left:29px;top:58px;
    width:1px;height:calc(100% - 24px);
    background:var(--maison-line);
  }
  .epoc-fondation__link{
    display:grid;grid-template-columns:56px minmax(0,1fr);
    column-gap:22px;text-align:left;align-items:start;
  }
  .epoc-fondation__mark{grid-row:1 / span 5;margin-bottom:0;width:56px}
  .epoc-fondation__disc{left:0;transform:none}
  .epoc-fondation__num{margin-bottom:8px}
  .epoc-fondation__lead{margin-inline:0;max-width:46ch}
  .epoc-fondation__go,.epoc-fondation__note{margin-top:4px}
}

/* ==================================================================
   BANDE DE MOTS-CLES
   La signature typographique des pages fondation : les mots de la charte,
   en capitales espacees, separes par des points d'or.
   ================================================================== */
/* La bande de mots-cles. Le corps et l'interlettrage sont resserres pour que
   les formules longues — « Production dans un rayon inferieur a 10 km » —
   tiennent d'un bloc : coupees en deux lignes, elles cessent de se lire comme
   un mot-cle. Chaque terme est insecable, la bande se replie entre eux. */
.epoc-keys{
  margin:clamp(34px,4vw,54px) 0;padding:clamp(20px,2.4vw,30px) 0;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  text-align:center;
  font-size:10px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  line-height:2.1;
}
.epoc-keys__k{white-space:nowrap}
.epoc-keys__sep{color:var(--gold);margin:0 9px}

/* ==================================================================
   PAGES DE RUBRIQUE
   En-tete centre, puis le corps en colonne etroite : sans photographie,
   c'est la mesure de la ligne qui tient la page.
   ================================================================== */
.epoc-rubrique{background:var(--paper)}
.epoc-rubrique__head{
  padding:clamp(56px,7vw,110px) var(--gut) clamp(34px,4vw,54px);
  text-align:center;
}
.epoc-rubrique__headinner{max-width:60ch;margin:0 auto}
.epoc-rubrique__mark{position:relative;display:block;height:60px;margin-bottom:22px}
.epoc-rubrique__disc{
  position:absolute;left:50%;top:0;transform:translateX(-50%);
  width:60px;height:60px;display:grid;place-items:center;
  border:1px solid var(--line);border-radius:50%;background:var(--paper);
}
.epoc-rubrique__glyph{width:27px;height:27px;color:var(--gold)}
.epoc-rubrique__kicker{
  display:block;margin-bottom:14px;
  font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);
}
.epoc-rubrique__kicker i{font-style:normal;margin:0 8px;opacity:.6}
.epoc-rubrique__title{
  font-family:var(--serif);font-weight:300;font-style:italic;
  font-size:clamp(34px,4.4vw,64px);line-height:1.05;margin-bottom:16px;
}
.epoc-rubrique__sub{
  font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--mute);
  margin-bottom:22px;
}
.epoc-rubrique__lead{
  font-family:var(--serif);font-style:italic;font-weight:300;
  font-size:clamp(18px,1.8vw,25px);line-height:1.45;
}
.epoc-rubrique__keys{padding-inline:var(--gut);max-width:var(--wrap);margin:0 auto}

/* Le corps : mesure courte, interlignage genereux */
.epoc-rubrique__body{
  max-width:62ch;margin:0 auto;padding:clamp(10px,2vw,26px) var(--gut) clamp(46px,6vw,80px);
  font-size:15px;line-height:1.85;color:#3a3630;
}
.epoc-rubrique__body > * + *{margin-top:1.25em}
/* Le premier bloc ne prend pas la marge d'ouverture de chapitre : la bande de
   mots-cles juste au-dessus fait deja la separation. */
.epoc-rubrique__body > *:first-child{margin-top:0}
.epoc-rubrique__body h2,
.epoc-rubrique__body h3{
  font-family:var(--serif);font-weight:300;font-style:italic;color:var(--ink);
  line-height:1.15;margin-top:2.1em;
}
.epoc-rubrique__body h2{font-size:clamp(24px,2.6vw,34px)}
.epoc-rubrique__body h3{font-size:clamp(19px,2vw,25px)}
/* Un filet d'or ouvre chaque chapitre */
.epoc-rubrique__body h2::before{
  content:"";display:block;width:38px;height:1px;background:var(--gold);margin-bottom:20px;
}
/* Phrase-cle : elle interrompt la colonne, centree, filet d'or au-dessus.
   Volontairement differente de la citation, qui reste alignee a gauche. */
.epoc-rubrique__body .epoc-statement{
  margin-block:clamp(2.4em,5vw,3.4em);
  text-align:center;
  font-family:var(--serif);font-weight:300;font-style:italic;
  font-size:clamp(25px,3vw,38px);line-height:1.28;color:var(--ink);
}
.epoc-rubrique__body .epoc-statement::before{
  content:"";display:block;width:38px;height:1px;background:var(--gold);
  margin:0 auto clamp(22px,3vw,32px);
}
.epoc-rubrique__body blockquote{
  margin-block:2em;padding-left:26px;border-left:1px solid var(--gold);
  font-family:var(--serif);font-style:italic;font-size:clamp(20px,2.2vw,28px);
  line-height:1.4;color:var(--ink);
}
.epoc-rubrique__body ul,
.epoc-rubrique__body ol{padding-left:0;list-style:none}
.epoc-rubrique__body li{position:relative;padding-left:26px;margin-top:.7em}
.epoc-rubrique__body ul li::before{
  content:"";position:absolute;left:0;top:.85em;width:12px;height:1px;background:var(--gold);
}
.epoc-rubrique__body ol{counter-reset:epoc-ol}
.epoc-rubrique__body ol li{counter-increment:epoc-ol;padding-left:44px}
.epoc-rubrique__body ol li::before{
  content:counter(epoc-ol,decimal-leading-zero);position:absolute;left:0;top:.1em;
  font-family:var(--serif);font-style:italic;font-size:16px;color:var(--gold);
}
.epoc-rubrique__body a{border-bottom:1px solid var(--line);transition:border-color var(--t),color var(--t)}
.epoc-rubrique__body a:hover{color:var(--gold);border-color:var(--gold)}
.epoc-rubrique__body strong{font-weight:500;color:var(--ink)}
/* Le diptyque des valeurs : « ce que nous croyons » / « ce que nous faisons » */
.epoc-rubrique__body .epoc-label{
  margin-top:2em;margin-bottom:.5em;
  font-size:10px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;
  color:var(--gold);
}
.epoc-rubrique__body .epoc-label + p{margin-top:0}

/* Seconde vie : la liste d'attente */
.epoc-rubrique__wait{
  background:var(--cream);padding:clamp(44px,6vw,78px) var(--gut);text-align:center;
}
.epoc-rubrique__wait-kicker{
  display:block;margin-bottom:12px;
  font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);
}
.epoc-rubrique__wait-title{
  font-family:var(--serif);font-weight:300;font-style:italic;
  font-size:clamp(24px,2.8vw,38px);margin-bottom:28px;
}
.epoc-rubrique__wait .epoc-news__form{max-width:520px;margin:0 auto}

/* ==================================================================
   ECOSYSTEME EDITORIAL
   ================================================================== */
.epoc-eco{padding:clamp(56px,7vw,100px) var(--gut);background:var(--cream)}
.epoc-eco__claim{
  max-width:44ch;margin:0 auto;
  font-family:var(--serif);font-style:italic;font-weight:300;
  font-size:clamp(19px,2vw,26px);line-height:1.45;
}
.epoc-eco__core{
  max-width:38ch;margin:clamp(30px,4vw,50px) auto clamp(40px,5vw,66px);
  text-align:center;font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  line-height:2.1;color:var(--mute);
}
.epoc-eco__core em{
  display:block;margin-top:6px;text-transform:none;letter-spacing:0;
  font-family:var(--serif);font-size:24px;color:var(--gold);
}
.epoc-eco__grid{
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
  gap:clamp(18px,2.2vw,34px);
  max-width:var(--wrap);margin:0 auto;list-style:none;padding:0;
}
.epoc-eco__item{text-align:center}
/* Les branches liees enveloppent leurs elements dans un <a> : on vise les
   elements eux-memes, sinon seule l'ancre passe en bloc et tout reste en ligne. */
.epoc-eco__item > *,
.epoc-eco__item a{display:block}
.epoc-eco__disc,.epoc-eco__name,.epoc-eco__verbs,.epoc-eco__lead,.epoc-eco__soon{display:block}
.epoc-eco__disc{
  width:50px;height:50px;margin:0 auto 18px;display:grid;place-items:center;
  border:1px solid var(--line);border-radius:50%;color:var(--gold);
  transition:background var(--t),border-color var(--t),color var(--t);
}
.epoc-eco__glyph{width:21px;height:21px}
.epoc-eco__name{
  margin-bottom:6px;font-size:11px;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;
}
.epoc-eco__verbs{margin-bottom:12px;font-size:10px;letter-spacing:.1em;color:var(--gold)}
.epoc-eco__lead{font-size:12.5px;line-height:1.7;color:var(--mute)}
.epoc-eco__soon{
  margin-top:12px;font-size:9px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--mute);opacity:.7;
}
.epoc-eco__item a:hover .epoc-eco__disc{background:var(--ink);border-color:var(--ink);color:var(--cream)}
.epoc-eco__item.is-soon{opacity:.62}
@media (max-width:1000px){
  .epoc-eco__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:34px}
  .epoc-eco__item:last-child{grid-column:1 / -1;max-width:38ch;margin-inline:auto}
}
@media (max-width:560px){
  .epoc-eco__grid{grid-template-columns:1fr}
  .epoc-eco__item:last-child{grid-column:auto}
}

/* La signature, quand elle sert de titre de page */
.epoc-maison__claim--page{font-size:clamp(30px,4vw,58px)}
/* Sur la page pivot, l'en-tete et la section qui suit se partagent la marge */
.epoc-rubrique--pivot .epoc-rubrique__head{padding-bottom:0}
.epoc-rubrique--pivot .epoc-maison{padding-top:clamp(44px,5vw,76px)}
.epoc-rubrique--pivot .epoc-maison__head{margin-bottom:clamp(32px,4vw,54px)}

/* ==================================================================
   L'ATELIER — le plan, et les reseaux
   Un fond de carte arrive en vert, bleu et rouge : rien de la charte. On le
   desature entierement, on le rechauffe d'un voile creme, et on redessine le
   reperage en or. Le cadre est un filet d'un pixel, sans arrondi, comme tout
   le reste.
   ================================================================== */
/* Deux colonnes sur la page de contact : le plan a gauche, le reste a droite.
   Les deux blocs gardent leur mise en page propre hors de cette grille — c'est
   elle qui porte la gouttiere et l'alignement. */
.epoc-contact{
  max-width:var(--wrap);margin:0 auto;
  padding:clamp(30px,4vw,58px) var(--gut) clamp(10px,2vw,26px);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(26px,4vw,64px);align-items:start;
}
.epoc-contact .epoc-carte,
.epoc-contact .epoc-reseaux{padding:0}
.epoc-contact .epoc-carte__inner,
.epoc-contact .epoc-reseaux__inner{max-width:none}
/* La colonne de droite empile les reseaux puis la note */
.epoc-contact__cote{display:flex;flex-direction:column}
.epoc-contact .epoc-reseaux__list{grid-template-columns:1fr}
.epoc-contact .epoc-reseaux__item + .epoc-reseaux__item .epoc-reseaux__link{padding-left:0}
.epoc-contact .epoc-rubrique__body--note{padding:clamp(24px,3vw,38px) 0 0}

@media (max-width:860px){
  .epoc-contact{grid-template-columns:1fr;gap:clamp(30px,5vw,46px)}
}

.epoc-carte{padding:clamp(38px,5vw,72px) var(--gut) 0}
.epoc-carte__inner{max-width:var(--wrap);margin:0 auto}

.epoc-carte__adresse{
  display:flex;align-items:baseline;flex-wrap:wrap;gap:10px;
  margin-bottom:clamp(18px,2.2vw,28px);
  font-size:14px;font-weight:300;color:var(--ink);
}
.epoc-carte__adresse i{font-style:normal;color:var(--line)}
.epoc-carte__code{
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);
  font-variant-numeric:tabular-nums;
}

.epoc-carte__cadre{
  position:relative;display:block;
  border:1px solid var(--line);
  background:var(--cream);
  aspect-ratio:4 / 5;
  overflow:hidden;
}
/* Le plan est deja a la palette dans le fichier : rien a filtrer ici */
.epoc-carte__plan{
  display:block;width:100%;height:100%;object-fit:cover;
  transition:transform var(--t-slow);
}
.epoc-carte__cadre:hover .epoc-carte__plan{transform:scale(1.015)}
.epoc-carte__credit{
  position:absolute;right:8px;bottom:6px;z-index:2;
  font-size:9px;letter-spacing:.1em;color:var(--mute);opacity:.75;
}
/* Le reperage, dessine par nous : le marqueur natif serait gris */
.epoc-carte__point{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:13px;height:13px;border-radius:50%;
  border:1px solid var(--gold);background:rgba(168,134,82,.28);
  pointer-events:none;z-index:2;
}
.epoc-carte__point::before,
.epoc-carte__point::after{
  content:"";position:absolute;left:50%;top:50%;background:var(--gold);
}
.epoc-carte__point::before{width:1px;height:30px;transform:translate(-50%,-50%)}
.epoc-carte__point::after{width:30px;height:1px;transform:translate(-50%,-50%)}

.epoc-carte__lien{
  display:inline-block;margin-top:clamp(16px,2vw,24px);
  font-size:10px;letter-spacing:.22em;text-transform:uppercase;
  padding-bottom:5px;border-bottom:1px solid var(--line);
  transition:color var(--t),border-color var(--t);
}
.epoc-carte__cadre:hover ~ .epoc-carte__lien{color:var(--gold);border-bottom-color:var(--gold)}

@media (max-width:860px){
  .epoc-carte__cadre{aspect-ratio:4 / 3}
}

/* ---------- Les reseaux ---------- */
.epoc-reseaux{padding:clamp(40px,5vw,74px) var(--gut) clamp(10px,2vw,26px)}
.epoc-reseaux__inner{max-width:var(--wrap);margin:0 auto}
.epoc-reseaux__kicker{
  display:block;margin-bottom:clamp(14px,1.8vw,22px);
  font-family:var(--sans);font-weight:400;
  font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);
}
.epoc-reseaux__list{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  border-top:1px solid var(--line);
}
.epoc-reseaux__item{border-bottom:1px solid var(--line)}
.epoc-reseaux__link{
  display:flex;align-items:center;gap:14px;
  padding:clamp(16px,2vw,24px) 0;
  transition:color var(--t),padding-left var(--t);
}
.epoc-reseaux__link:hover{color:var(--gold);padding-left:8px}
.epoc-reseaux__icon{width:17px;height:17px;flex:none}
.epoc-reseaux__nom{
  font-size:10px;letter-spacing:.2em;text-transform:uppercase;flex:none;
}
.epoc-reseaux__valeur{
  margin-left:auto;font-size:13px;font-weight:300;color:var(--mute);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.epoc-reseaux__link:hover .epoc-reseaux__valeur{color:var(--ink)}
/* Chaque colonne garde sa gouttiere sans que le filet se coupe */
@media (min-width:721px){
  .epoc-reseaux__item + .epoc-reseaux__item .epoc-reseaux__link{padding-left:clamp(18px,2vw,30px)}
}

/* Le texte de la page de contact passe apres le plan et les reseaux, en note :
   ce n'est plus le propos de la page, c'est une precision. */
.epoc-rubrique__body--note{
  max-width:var(--wrap);padding-top:clamp(24px,3vw,40px);
  font-size:12px;line-height:1.7;color:var(--mute);
}
.epoc-rubrique__body--note h2{
  font-family:var(--sans);font-style:normal;font-weight:400;
  font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink);
  margin-top:0;margin-bottom:6px;
}
.epoc-rubrique__body--note h2::before{display:none}
.epoc-rubrique__body--note p{max-width:64ch}

/* ==================================================================
   LA LOGIQUE D'EPOC — la chaine, en pied de rubrique
   ================================================================== */
.epoc-logique{
  border-top:1px solid var(--line);
  padding:clamp(46px,6vw,78px) var(--gut) clamp(52px,7vw,90px);
}
.epoc-logique__kicker{
  display:block;text-align:center;margin-bottom:clamp(28px,3vw,44px);
  font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);
}
.epoc-logique__list{
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
  gap:clamp(16px,2vw,32px);
  max-width:var(--wrap);margin:0 auto;list-style:none;padding:0;
}
.epoc-logique__item{text-align:center;font-size:12px;line-height:1.6}
.epoc-logique__item b{
  display:block;margin-bottom:5px;
  font-size:10px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;
}
.epoc-logique__item i{font-style:italic;color:var(--mute);font-family:var(--serif);font-size:15px}
.epoc-logique__item a:hover b{color:var(--gold)}
/* La page ou l'on se trouve figure dans la chaine, sans y renvoyer */
.epoc-logique__item.is-current b{color:var(--gold)}
.epoc-logique__item.is-current i{color:var(--ink)}
@media (max-width:820px){
  .epoc-logique__list{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px}
  .epoc-logique__item:last-child{grid-column:1 / -1}
}

/* ==================================================================
   SECTIONS
   ================================================================ */
.epoc-section-head{
  display:flex;align-items:flex-end;justify-content:space-between;gap:24px;
  padding:clamp(58px,7vw,96px) var(--gut) 22px;
}
.epoc-section-kicker{display:block;margin-bottom:6px}
.epoc-section-title{font-size:clamp(24px,3vw,40px);line-height:1.1}
.epoc-section-link{
  font-size:10px;letter-spacing:.2em;text-transform:uppercase;white-space:nowrap;
  border-bottom:1px solid var(--line);padding-bottom:4px;transition:border-color var(--t),color var(--t);
}
.epoc-section-link:hover{border-color:var(--ink);color:var(--gold)}

/* ---------- Rayons ---------- */
.epoc-cats{padding-bottom:clamp(10px,1.4vw,22px)}
.epoc-cats__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--flush)}
.epoc-cat-tile{position:relative;display:block;overflow:hidden}
.epoc-cat-tile__media{background:var(--stone)}
.epoc-cat-tile__media img{transition:transform var(--t-slow)}
.epoc-cat-tile:hover .epoc-cat-tile__media img{transform:scale(1.04)}

/* Libelle pose sur l'image, lisible grace au degrade */
.epoc-cat-tile__label{
  position:absolute;left:0;right:0;bottom:0;
  padding:44px 22px 20px;color:var(--paper);
  background:linear-gradient(180deg,rgba(12,11,10,0) 0%,rgba(12,11,10,.55) 100%);
}
.epoc-cat-tile__name{
  display:block;font-family:var(--sans);font-size:12px;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;transition:color var(--t);
}
.epoc-cat-tile:hover .epoc-cat-tile__name{color:var(--gold)}

/* Rayon sans visuel : tuile typographique plutot qu'un bloc vide */
.epoc-cat-tile.is-bare .epoc-cat-tile__media{background:var(--cream);border:1px solid var(--line)}
.epoc-cat-tile.is-bare .epoc-cat-tile__label{
  inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:10px;padding:22px;text-align:center;background:none;color:var(--ink);
}
.epoc-cat-tile.is-bare .epoc-cat-tile__name{font-size:13px}
.epoc-cat-tile.is-bare .epoc-cat-tile__name::after{
  content:"";display:block;width:26px;height:1px;margin:12px auto 0;background:var(--gold);
}
.epoc-cat-tile.is-bare:hover .epoc-cat-tile__media{border-color:var(--ink)}


/* ==================================================================
   GRILLE PRODUITS
   ================================================================ */
.epoc-grid{display:grid;gap:clamp(16px,2.2vw,38px) clamp(12px,1.6vw,26px)}
.epoc-grid--4{grid-template-columns:repeat(4,1fr)}
@media (max-width:1080px){ .epoc-grid--4{grid-template-columns:repeat(3,1fr)} }
@media (max-width:760px){ .epoc-grid--4{grid-template-columns:repeat(2,1fr)} }

/* Grille bord a bord : gouttiere minimale, le texte reprend une marge */
.epoc-grid--flush{gap:var(--flush)}
.epoc-grid--flush .epoc-card__body{padding:14px 14px 30px}
@media (max-width:860px){ .epoc-cats__grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:520px){ .epoc-cats__grid{grid-template-columns:1fr} }

/* ---------- Carte produit ---------- */
/* ---------- La grille de saison ----------
   Pas de titre de rubrique : une phrase, centree, au-dessus des pieces. Le
   lien vers la boutique se pose sous elle plutot qu'en regard — une phrase
   flanquee d'un lien redevient un en-tete de rubrique, ce qu'on cherchait
   justement a eviter. */
.epoc-saison{padding-bottom:clamp(64px,9vw,120px)}
.epoc-saison__head{
  display:flex;flex-direction:column;align-items:center;gap:clamp(14px,1.8vw,22px);
  padding:clamp(48px,7vw,96px) var(--gut) clamp(34px,4.5vw,58px);
  text-align:center;
}
.epoc-saison__slogan{
  font-family:var(--serif);font-weight:300;font-style:italic;
  font-size:clamp(26px,3.6vw,46px);line-height:1.14;letter-spacing:.005em;
  text-wrap:balance;max-width:22ch;
}
.epoc-saison__lien{
  font-size:10px;letter-spacing:.22em;text-transform:uppercase;
  padding-bottom:5px;border-bottom:1px solid var(--line);
  transition:color var(--t),border-color var(--t);
}
.epoc-saison__lien:hover{color:var(--gold);border-bottom-color:var(--gold)}

.epoc-card{position:relative}
.epoc-card__media{background:var(--cream)}
.epoc-card__link{position:absolute;inset:0;display:block}
.epoc-card__img{transition:opacity var(--t-slow),transform var(--t-slow)}
.epoc-card__img--hover{opacity:0}
.epoc-card.has-hover:hover .epoc-card__img:not(.epoc-card__img--hover){opacity:0}
.epoc-card.has-hover:hover .epoc-card__img--hover{opacity:1}
.epoc-card:not(.has-hover):hover .epoc-card__img{transform:scale(1.04)}

.epoc-fav{
  position:absolute;top:12px;right:12px;z-index:3;
  width:32px;height:32px;display:flex;align-items:center;justify-content:center;
  color:var(--ink);opacity:0;transform:translateY(-4px);
  transition:opacity var(--t),transform var(--t),color var(--t);
}
.epoc-card:hover .epoc-fav,.epoc-fav.is-active{opacity:1;transform:translateY(0)}
.epoc-fav:hover{color:var(--gold)}
.epoc-fav.is-active{color:var(--gold)}
.epoc-fav.is-active .epoc-icon{fill:var(--gold)}

.epoc-quickview-btn{
  position:absolute;left:12px;right:12px;bottom:12px;z-index:3;
  padding:12px 8px;background:var(--paper);color:var(--ink);
  font-size:10px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;
  opacity:0;transform:translateY(10px);
  transition:opacity var(--t),transform var(--t),background var(--t),color var(--t);
}
.epoc-card:hover .epoc-quickview-btn{opacity:1;transform:translateY(0)}
.epoc-quickview-btn:hover{background:var(--ink);color:var(--paper)}
@media (hover:none){
  .epoc-quickview-btn{display:none}
  .epoc-fav{opacity:1;transform:none}
}

.epoc-card__body{padding:16px 2px 0;text-align:left}
.epoc-card__kicker{display:block;margin-bottom:6px}
.epoc-card__name{font-size:clamp(17px,1.5vw,21px);margin-bottom:5px}
.epoc-card__name a{transition:color var(--t)}
.epoc-card__name a:hover{color:var(--gold)}
.epoc-card__name:has(+ .epoc-card__libelle){margin-bottom:2px}
.epoc-card__libelle{
  font-family:var(--sans);font-size:10px;font-weight:300;letter-spacing:.12em;
  text-transform:uppercase;color:var(--mute);margin-bottom:6px;
}
.epoc-card__price{font-family:var(--sans);font-size:12px;font-weight:400;letter-spacing:.06em;color:var(--ink)}
.epoc-card__price del{color:var(--mute);margin-right:8px;opacity:.7}
.epoc-card__price ins{text-decoration:none;color:var(--gold)}

/* ==================================================================
   ARCHIVE / CATEGORIE
   ================================================================ */
.epoc-crumb{
  display:flex;align-items:center;gap:9px;padding:26px 0 0;
  font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--mute);
}
.epoc-crumb a{transition:color var(--t)}
.epoc-crumb a:hover{color:var(--ink)}
.epoc-crumb em{font-style:normal;color:var(--ink)}
.epoc-crumb--single{padding-bottom:22px}

.epoc-archive-head{padding:0 0 clamp(30px,4vw,52px);text-align:center}
.epoc-archive-head .epoc-crumb{justify-content:center}
.epoc-archive-head--flat{text-align:left;padding-top:40px}
.epoc-archive-title{font-size:clamp(42px,7vw,96px);margin-top:clamp(24px,4vw,48px)}
.epoc-archive-sub{
  margin-top:16px;font-size:11px;font-weight:400;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold);
}

/* ---------- Barre filtres / tri ---------- */
.epoc-toolbar{
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  margin-bottom:clamp(28px,4vw,52px);background:var(--paper);
}
.epoc-toolbar__inner{display:flex;align-items:center;justify-content:space-between;gap:20px;height:56px}
.epoc-toolbar__filter{
  display:inline-flex;align-items:center;gap:12px;
  font-size:10px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;
  transition:color var(--t);
}
.epoc-toolbar__filter:hover{color:var(--gold)}
.epoc-toolbar__rule{display:block;width:26px;height:1px;background:currentColor}
.epoc-toolbar__count{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--mute)}
.epoc-toolbar__sort{display:flex;align-items:center;gap:10px}
.epoc-toolbar__sort label{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--mute)}
.epoc-toolbar__sort select{
  border:0;background:transparent;padding:4px 0;
  font-size:11px;letter-spacing:.1em;cursor:pointer;outline:none;
  border-bottom:1px solid var(--line);transition:border-color var(--t);
}
.epoc-toolbar__sort select:hover{border-color:var(--ink)}
@media (max-width:640px){
  .epoc-toolbar__count{display:none}
  .epoc-toolbar__sort label{display:none}
}

/* ---------- Pagination ----------
   Trois zones sur une ligne : precedent, les numeros, suivant — et l'etat
   « Page 2 sur 11 » dessous, en filigrane. Pas de pave noir sur la page
   courante : un filet d'or sous le chiffre suffit et reste dans la charte.
   Les fleches gardent leur place quand elles sont inactives, pour que la
   ligne ne se decale pas d'une page a l'autre. */
.epoc-pagination{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:clamp(16px,3vw,40px);
  margin-top:clamp(48px,7vw,96px);
  padding:clamp(26px,3vw,38px) 0 clamp(46px,7vw,90px);
  border-top:1px solid var(--line);
}
.epoc-pagination__step{
  display:inline-flex;align-items:center;gap:10px;
  font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink);
  transition:color var(--t),gap var(--t);
}
.epoc-pagination__step:first-child{justify-self:start}
.epoc-pagination__step:nth-child(3){justify-self:end}
.epoc-pagination__step:hover{color:var(--gold);gap:14px}
.epoc-pagination__step.is-off{color:var(--line);pointer-events:none}
.epoc-pagination__arrow{width:16px;height:16px}
.epoc-pagination__arrow--back{transform:scaleX(-1)}

.epoc-pagination__list{
  grid-column:2;
  display:flex;align-items:center;gap:clamp(2px,.6vw,8px);
}
.epoc-pagination__num{
  display:flex;align-items:center;justify-content:center;
  min-width:36px;height:36px;padding:0 6px;
  font-size:12px;letter-spacing:.08em;font-variant-numeric:tabular-nums;
  color:var(--mute);
  border-bottom:1px solid transparent;
  transition:color var(--t),border-color var(--t);
}
a.epoc-pagination__num:hover{color:var(--ink);border-bottom-color:var(--line)}
.epoc-pagination__num.is-current{color:var(--ink);border-bottom-color:var(--gold)}
.epoc-pagination__gap{
  display:flex;align-items:flex-end;justify-content:center;
  min-width:20px;height:36px;padding-bottom:8px;color:var(--line);
}
.epoc-pagination__state{
  grid-column:2;grid-row:2;
  margin-top:10px;text-align:center;
  font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);
}

/* Sur mobile la ligne se replie : les numeros d'abord, les fleches dessous */
@media (max-width:720px){
  .epoc-pagination{grid-template-columns:1fr 1fr;gap:14px 12px}
  .epoc-pagination__list{grid-column:1 / -1;grid-row:1;justify-content:center;flex-wrap:wrap}
  .epoc-pagination__state{grid-column:1 / -1;grid-row:2;margin-top:0}
  .epoc-pagination__step:first-child{grid-row:3;justify-self:start}
  .epoc-pagination__step:nth-child(3){grid-row:3;grid-column:2;justify-self:end}
  .epoc-pagination__num{min-width:32px;height:32px}
}

.epoc-empty{text-align:center;padding:clamp(70px,12vw,150px) 0}
.epoc-empty__t{font-family:var(--serif);font-style:italic;font-size:clamp(26px,4vw,44px);margin-bottom:12px}
.epoc-empty__s{color:var(--mute);margin-bottom:30px}

/* ==================================================================
   FICHE PRODUIT
   ================================================================ */
.epoc-product{
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(340px,.85fr);
  gap:clamp(32px,5vw,90px);padding-bottom:clamp(60px,8vw,110px);
  align-items:start;
}
@media (max-width:960px){ .epoc-product{grid-template-columns:1fr} }

/* ---------- Galerie ---------- */
.epoc-gallery{display:grid;grid-template-columns:84px minmax(0,1fr);gap:16px;position:sticky;top:calc(var(--header-h) + 20px)}
@media (max-width:960px){ .epoc-gallery{position:static;grid-template-columns:1fr} }
.epoc-gallery__thumbs{display:flex;flex-direction:column;gap:12px}
@media (max-width:960px){ .epoc-gallery__thumbs{flex-direction:row;order:2;overflow-x:auto} }
.epoc-gallery__thumb{
  width:84px;flex:0 0 84px;border:1px solid transparent;
  transition:border-color var(--t),opacity var(--t);opacity:.62;
}
.epoc-gallery__thumb:hover{opacity:1}
.epoc-gallery__thumb.is-active{border-color:var(--ink);opacity:1}
.epoc-gallery__stage{position:relative;background:var(--cream)}
.epoc-gallery__slide{display:none;margin:0}
.epoc-gallery__slide.is-active{display:block;animation:epoc-fade var(--t) both}
@keyframes epoc-fade{from{opacity:0}to{opacity:1}}

/* ---------- Colonne info ---------- */
.epoc-summary{padding-top:6px}
.epoc-summary__kicker{display:block;margin-bottom:14px}
.epoc-summary__name{font-size:clamp(32px,4.4vw,56px);margin-bottom:16px}
.epoc-summary__price{
  font-family:var(--sans);font-size:15px;font-weight:400;letter-spacing:.06em;
  padding-bottom:26px;margin-bottom:26px;border-bottom:1px solid var(--line);
}
.epoc-summary__price del{color:var(--mute);opacity:.7;margin-right:10px}
.epoc-summary__price ins{text-decoration:none;color:var(--gold)}
.epoc-summary__excerpt{font-size:14px;color:var(--mute);line-height:1.78;margin-bottom:30px}
.epoc-summary__excerpt p{margin-bottom:12px}

.epoc-summary__fav{
  display:inline-flex;align-items:center;gap:10px;margin-top:20px;
  font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--mute);
  transition:color var(--t);
}
.epoc-summary__fav:hover{color:var(--ink)}
.epoc-summary__fav.is-active{color:var(--gold)}
.epoc-summary__fav.is-active .epoc-icon{fill:var(--gold)}

/* ---------- Selecteur de tailles ---------- */
.epoc-sizes{margin-bottom:26px}
.epoc-sizes__label{
  display:block;margin-bottom:12px;
  font-size:10px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;
}
.epoc-sizes__row{display:flex;flex-wrap:wrap;gap:8px}
.epoc-size{
  min-width:52px;height:52px;padding:0 12px;
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--line);background:var(--paper);color:var(--ink);
  font-size:11px;font-weight:400;letter-spacing:.1em;text-transform:uppercase;
  transition:background var(--t),color var(--t),border-color var(--t);
}
.epoc-size:hover{border-color:var(--ink)}
.epoc-size.is-active{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.epoc-size.is-out{opacity:.35;pointer-events:none;text-decoration:line-through}

/* ---------- Ajouter au panier (surcharge Woo) ---------- */
.epoc-atc{margin-top:4px}
.epoc-atc form.cart{margin:0;display:block}
.epoc-atc .quantity{display:inline-flex;align-items:center;border:1px solid var(--line);margin-bottom:14px}
.epoc-atc .quantity input.qty{
  width:64px;height:52px;border:0;background:transparent;text-align:center;
  font-size:13px;outline:none;-moz-appearance:textfield;
}
.epoc-atc .quantity input::-webkit-outer-spin-button,
.epoc-atc .quantity input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}

.epoc-atc button.single_add_to_cart_button,
.epoc-atc .single_add_to_cart_button,
.epoc-btn--atc{
  display:flex;align-items:center;justify-content:center;
  width:100%;height:56px;margin-top:6px;
  background:var(--ink);color:var(--paper);border:1px solid var(--ink);border-radius:0;
  font-family:var(--sans);font-size:11px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;
  transition:background var(--t),color var(--t),border-color var(--t);
}
.epoc-atc button.single_add_to_cart_button:hover,
.epoc-btn--atc:hover{background:var(--gold);border-color:var(--gold);color:var(--ink)}
.epoc-atc button.single_add_to_cart_button.disabled,
.epoc-atc button.single_add_to_cart_button[disabled]{opacity:.4;pointer-events:none}

/* Le select natif des variations est remplace par les boutons carres */
.epoc-atc table.variations{width:100%;margin-bottom:18px}
.epoc-atc table.variations th,.epoc-atc table.variations td{display:block;text-align:left;padding:0}
.epoc-atc table.variations label{
  font-size:10px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;
}
.epoc-atc .woocommerce-variation-price{margin-bottom:14px;font-size:14px}
.epoc-atc .reset_variations{
  display:inline-block;margin-bottom:12px;font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--mute);
}
.epoc-atc.has-size-buttons table.variations select{display:none}
.epoc-atc.has-size-buttons table.variations th{display:none}

.epoc-atc .stock{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--mute);margin-top:10px}
.epoc-atc .stock.out-of-stock{color:var(--gold)}

/* ---------- Accordeons ---------- */
.epoc-accs{margin-top:38px;border-top:1px solid var(--line)}
.epoc-acc{border-bottom:1px solid var(--line)}
.epoc-acc__head{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  width:100%;padding:20px 0;text-align:left;
  font-size:11px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;
  transition:color var(--t);
}
.epoc-acc__head:hover{color:var(--gold)}
.epoc-acc__sign{display:flex;transition:transform var(--t)}
.epoc-acc.is-open .epoc-acc__sign{transform:rotate(180deg)}
.epoc-acc__panel{overflow:hidden;height:0;transition:height var(--t-slow)}
.epoc-acc__inner{padding:0 0 22px;font-size:13px;line-height:1.8;color:var(--mute)}
.epoc-acc__inner p{margin-bottom:10px}
.epoc-acc__inner strong{color:var(--ink);font-weight:500}

.epoc-related{padding:clamp(50px,7vw,90px) 0 clamp(60px,9vw,120px);border-top:1px solid var(--line)}
.epoc-related .epoc-section-title{font-size:clamp(26px,3.4vw,40px);margin-bottom:36px;border-bottom:1px solid var(--line);padding-bottom:20px}

/* ==================================================================
   OVERLAY / TIROIRS
   ================================================================ */
.epoc-overlay{
  position:fixed;inset:0;z-index:var(--z-overlay);
  background:rgba(12,11,10,.42);backdrop-filter:blur(2px);
  opacity:0;transition:opacity var(--t);
}
.epoc-overlay.is-visible{opacity:1}

.epoc-drawer{
  position:fixed;top:0;bottom:auto;z-index:var(--z-drawer);
  height:100vh;height:100dvh;          /* dvh suit la barre du navigateur mobile */
  width:min(430px,100vw);background:var(--paper);
  display:flex;flex-direction:column;
  transition:transform var(--t-slow);
  box-shadow:0 0 60px rgba(12,11,10,.12);
}
.epoc-drawer--right{right:0;transform:translateX(101%)}
.epoc-drawer--left{left:0;transform:translateX(-101%)}
.epoc-drawer.is-open{transform:translateX(0)}
.epoc-drawer__head{
  display:flex;align-items:center;justify-content:space-between;
  padding:24px var(--gut-d,26px);border-bottom:1px solid var(--line);flex:0 0 auto;
}
.epoc-drawer__title{font-family:var(--serif);font-style:italic;font-size:24px;font-weight:300}
.epoc-drawer__close{padding:6px;transition:transform var(--t),opacity var(--t)}
.epoc-drawer__close:hover{opacity:.55;transform:rotate(90deg)}
/* min-height:0 — sans lui la zone defilante refuse de retrecir et chasse le pied */
.epoc-drawer__scroll{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain}

/* ---------- Panier ---------- */
.epoc-cart-body{display:flex;flex-direction:column;min-height:100%}
.epoc-cart-list{padding:8px 26px}
.epoc-cart-item{display:grid;grid-template-columns:88px 1fr;gap:16px;padding:20px 0;border-bottom:1px solid var(--line)}
.epoc-cart-item__media{background:var(--cream)}
.epoc-cart-item__info{display:flex;flex-direction:column;gap:4px}
.epoc-cart-item__name{font-family:var(--serif);font-style:italic;font-size:19px;line-height:1.2}
.epoc-cart-item__meta,.epoc-cart-item__qty{font-size:11px;letter-spacing:.06em;color:var(--mute)}
.epoc-cart-item__price{font-size:13px;margin-top:2px}
.epoc-cart-item__remove{
  align-self:flex-start;margin-top:6px;font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--mute);border-bottom:1px solid var(--line);
  padding-bottom:2px;transition:color var(--t),border-color var(--t);
}
.epoc-cart-item__remove:hover{color:var(--ink);border-color:var(--ink)}

.epoc-cart-foot{margin-top:auto;padding:24px 26px 30px;border-top:1px solid var(--line);background:var(--cream)}
.epoc-cart-sub{display:flex;justify-content:space-between;align-items:baseline;font-size:13px;letter-spacing:.06em;margin-bottom:6px}
.epoc-cart-sub span:last-child{font-size:16px}
.epoc-cart-note{font-size:11px;color:var(--mute);margin-bottom:18px}
.epoc-cart-foot .epoc-btn{width:100%;margin-bottom:10px}

.epoc-cart-empty{padding:60px 26px;text-align:center}
.epoc-cart-empty__t{font-family:var(--serif);font-style:italic;font-size:24px;margin-bottom:8px}
.epoc-cart-empty__s{font-size:13px;color:var(--mute);margin-bottom:26px}

/* ---------- Favoris ---------- */
.epoc-fav-list{padding:8px 26px}
.epoc-fav-item{display:grid;grid-template-columns:88px 1fr;gap:16px;padding:20px 0;border-bottom:1px solid var(--line)}
.epoc-fav-item__media{background:var(--cream)}
.epoc-fav-item__info{display:flex;flex-direction:column;gap:5px}
.epoc-fav-item__name{font-family:var(--serif);font-style:italic;font-size:19px;line-height:1.2}
.epoc-fav-item__price{font-size:13px}
.epoc-fav-item__remove{
  align-self:flex-start;margin-top:4px;font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--mute);border-bottom:1px solid var(--line);padding-bottom:2px;
  transition:color var(--t);
}
.epoc-fav-item__remove:hover{color:var(--ink)}

/* ---------- Filtres / nav mobile ---------- */
.epoc-filter{padding:26px}
.epoc-filter + .epoc-filter{border-top:1px solid var(--line)}
.epoc-filter__title{font-family:var(--sans);font-size:10px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;margin-bottom:16px}
.epoc-filter__list li{margin-bottom:11px}
.epoc-filter__list a{display:flex;justify-content:space-between;font-size:14px;transition:color var(--t),padding-left var(--t)}
.epoc-filter__list a:hover{color:var(--gold);padding-left:5px}
.epoc-filter__list i{font-style:normal;font-size:10px;color:var(--mute)}

/* ==================================================================
   TIROIR DE NAVIGATION
   Le menu s'ouvre sur le logo et trois lignes. Chaque ligne se deplie sur
   place — l'animation porte sur `grid-template-rows`, ce qui evite de mesurer
   une hauteur en script et garde le repli fluide quel que soit le contenu.
   ================================================================== */
.epoc-drawer--nav{background:var(--paper)}

.epoc-mnav__head{
  position:relative;flex:0 0 auto;
  display:flex;flex-direction:column;align-items:center;
  padding:26px 26px 22px;border-bottom:1px solid var(--line);
}
.epoc-mnav__brand{display:flex;align-items:center;gap:12px}
/* Le verrouillage de la charte : la signature sous le logotype, sur deux lignes */
.epoc-mnav__claim{
  display:block;margin-top:12px;text-align:center;
  font-size:8.5px;letter-spacing:.22em;text-transform:uppercase;line-height:1.9;
  color:var(--mute);
}
.epoc-mnav__claim span{display:block}
.epoc-mnav__logo{width:26px;height:26px}
.epoc-mnav__word{
  font-size:13px;font-weight:400;letter-spacing:.34em;text-transform:uppercase;
}
.epoc-mnav__close{position:absolute;right:20px;top:50%;transform:translateY(-50%)}
.epoc-mnav__close:hover{transform:translateY(-50%) rotate(90deg)}

.epoc-mnav{padding:8px 0 0}
.epoc-mnav__row{border-bottom:1px solid var(--line)}
.epoc-mnav__toggle{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  width:100%;padding:24px 26px;text-align:left;
  font-family:var(--serif);font-weight:300;font-style:italic;font-size:27px;line-height:1.1;
  transition:color var(--t);
}
.epoc-mnav__row.is-open .epoc-mnav__toggle,
.epoc-mnav__toggle:hover{color:var(--gold)}

/* Le signe : deux filets, le vertical s'efface a l'ouverture */
.epoc-mnav__mark{position:relative;flex:0 0 auto;width:13px;height:13px;color:var(--mute)}
.epoc-mnav__mark::before,
.epoc-mnav__mark::after{content:"";position:absolute;background:currentColor}
.epoc-mnav__mark::before{left:0;right:0;top:6px;height:1px}
.epoc-mnav__mark::after{
  top:0;bottom:0;left:6px;width:1px;
  transition:transform var(--t);transform-origin:center;
}
.epoc-mnav__row.is-open .epoc-mnav__mark{color:var(--gold)}
.epoc-mnav__row.is-open .epoc-mnav__mark::after{transform:scaleY(0)}

.epoc-mnav__panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--t-slow)}
.epoc-mnav__row.is-open .epoc-mnav__panel{grid-template-rows:1fr}
.epoc-mnav__inner{overflow:hidden;min-height:0}
.epoc-mnav__inner > *:last-child{margin-bottom:26px}

.epoc-mnav__kicker{
  display:block;padding:0 26px;margin:14px 0 10px;
  font-size:9px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);
}
.epoc-mnav__sub li{border:0}
.epoc-mnav__sub a{
  display:block;padding:9px 26px;
  font-family:var(--sans);font-style:normal;font-size:14px;font-weight:300;
  color:var(--mute);transition:color var(--t),padding-left var(--t);
}
.epoc-mnav__sub a:hover{color:var(--ink);padding-left:32px}
/* Une famille sans piece reste visible, mais ne promet rien */
.epoc-mnav__sub .is-soon span{
  display:block;padding:9px 26px;
  font-size:14px;font-weight:300;color:var(--mute);opacity:.45;
}
.epoc-mnav__all{
  display:inline-flex;align-items:center;gap:9px;margin:16px 26px 0;
  font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink);
  border-bottom:1px solid var(--line);padding-bottom:4px;
  transition:color var(--t),border-color var(--t);
}
.epoc-mnav__all:hover{color:var(--gold);border-color:var(--gold)}
.epoc-mnav__all .epoc-icon{width:15px;height:15px}

/* Pied du tiroir : saison, reseaux, region */
.epoc-mnav__foot{
  flex:0 0 auto;padding:22px 26px calc(26px + env(safe-area-inset-bottom,0px));
  border-top:1px solid var(--line);background:var(--cream);
}
.epoc-mnav__season{
  display:block;margin-bottom:16px;
  font-size:9px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);
}
.epoc-mnav__footrow{display:flex;align-items:center;justify-content:space-between;gap:20px}
.epoc-mnav__region{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--mute)}
.epoc-mnav__region i{font-style:normal;color:var(--gold);margin:0 4px}
.epoc-social--drawer{margin:0;padding:0;border:0;width:auto}

/* ==================================================================
   MODALE QUICK VIEW
   ================================================================ */
.epoc-modal{
  position:fixed;inset:0;z-index:var(--z-modal);
  display:flex;align-items:center;justify-content:center;padding:var(--gut);
  opacity:0;visibility:hidden;transition:opacity var(--t),visibility var(--t);
}
.epoc-modal.is-open{opacity:1;visibility:visible}
.epoc-modal__panel{
  position:relative;width:min(940px,100%);max-height:86vh;overflow-y:auto;
  background:var(--paper);transform:translateY(14px);transition:transform var(--t-slow);
  box-shadow:0 30px 80px rgba(12,11,10,.2);
}
.epoc-modal.is-open .epoc-modal__panel{transform:translateY(0)}
.epoc-modal__close{
  position:absolute;top:16px;right:16px;z-index:2;padding:8px;
  background:var(--paper);transition:transform var(--t),opacity var(--t);
}
.epoc-modal__close:hover{opacity:.55;transform:rotate(90deg)}

/* L'apercu : une carte, la photo a gauche, le choix a droite. La photo suit la
   pastille de coloris — c'est tout l'interet d'un apercu, voir la piece dans
   la couleur qu'on envisage sans quitter la grille. */
.epoc-qv{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);background:var(--paper)}
@media (max-width:760px){ .epoc-qv{grid-template-columns:1fr} }
.epoc-qv__media{position:relative;background:var(--cream);aspect-ratio:3/4;overflow:hidden}
.epoc-qv__img{
  width:100%;height:100%;object-fit:cover;object-position:center top;display:block;
  transition:opacity var(--t);
}
.epoc-qv__info{padding:clamp(28px,4vw,52px);display:flex;flex-direction:column}
.epoc-qv__name{font-size:clamp(24px,2.6vw,34px);margin-bottom:10px}
.epoc-qv__name:has(+ .epoc-qv__libelle){margin-bottom:4px}
.epoc-qv__libelle{
  font-family:var(--sans);font-size:11px;font-weight:300;letter-spacing:.12em;
  text-transform:uppercase;color:var(--mute);margin-bottom:12px;
}
.epoc-qv__price{font-size:15px;padding-bottom:20px;margin-bottom:22px;border-bottom:1px solid var(--line)}

/* ---------- Coloris de l'apercu ---------- */
.epoc-qv__colors{margin-bottom:24px}
.epoc-qv__label{
  font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--mute);
  margin-bottom:12px;
}
.epoc-qv__label em{font-style:normal;color:var(--ink);margin-left:8px;letter-spacing:.14em}
.epoc-qv__swatches{display:flex;flex-wrap:wrap;gap:8px}
.epoc-qv__swatch{
  display:block;padding:2px;border:1px solid transparent;line-height:0;
  background:none;cursor:pointer;
  transition:border-color var(--t);
}
.epoc-qv__swatch:hover{border-color:var(--line)}
.epoc-qv__swatch.is-active{border-color:var(--ink)}
.epoc-qv__swatch:focus-visible{outline:1px solid var(--gold);outline-offset:2px}
.epoc-qv__chip{
  display:block;width:34px;height:34px;
  background-size:cover;background-position:center;
  border:1px solid rgba(12,11,10,.08);
}
/* Indisponible : eteint et barre, comme sur la fiche */
.epoc-qv__swatch.is-indisponible{cursor:default;pointer-events:none}
.epoc-qv__swatch.is-indisponible .epoc-qv__chip{opacity:.38;position:relative}
.epoc-qv__swatch.is-indisponible .epoc-qv__chip::after{
  content:"";position:absolute;left:-2px;right:-2px;top:50%;height:1px;
  background:var(--ink);opacity:.7;transform:rotate(-45deg);
}

.epoc-qv__sizes{margin-bottom:26px}
.epoc-qv__add{margin-top:auto}
.epoc-qv__price del{color:var(--mute);opacity:.7;margin-right:8px}
.epoc-qv__price ins{text-decoration:none;color:var(--gold)}
.epoc-qv__excerpt{font-size:13px;color:var(--mute);line-height:1.75;margin-bottom:24px}
.epoc-qv__add{width:100%;height:54px}
.epoc-qv__more{
  display:inline-block;margin-top:18px;font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  border-bottom:1px solid var(--line);padding-bottom:3px;transition:border-color var(--t),color var(--t);
}
.epoc-qv__more:hover{border-color:var(--ink);color:var(--gold)}

.epoc-loader{display:flex;align-items:center;justify-content:center;min-height:340px}
.epoc-loader span{width:26px;height:1px;background:var(--gold);animation:epoc-load 1s ease-in-out infinite}
@keyframes epoc-load{0%,100%{transform:scaleX(.2)}50%{transform:scaleX(1)}}

/* ==================================================================
   TOAST
   ================================================================ */
.epoc-toast{
  position:fixed;left:50%;bottom:34px;z-index:var(--z-toast);
  transform:translate(-50%,20px);
  background:var(--ink);color:var(--paper);
  padding:15px 28px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  opacity:0;visibility:hidden;transition:opacity var(--t),transform var(--t),visibility var(--t);
  max-width:calc(100vw - 32px);text-align:center;
}
.epoc-toast.is-visible{opacity:1;visibility:visible;transform:translate(-50%,0)}

/* ==================================================================
   NEWSLETTER
   ================================================================ */
.epoc-news{background:var(--cream);padding:clamp(60px,8vw,110px) 0}
.epoc-news__inner{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,80px);align-items:center}
@media (max-width:860px){ .epoc-news__inner{grid-template-columns:1fr} }
.epoc-news__kicker{display:block;margin-bottom:12px}
.epoc-news__title{font-size:clamp(28px,3.8vw,46px);margin-bottom:12px}
.epoc-news__sub{font-size:13px;color:var(--mute);max-width:44ch}
.epoc-news__form{position:relative;display:flex;gap:0;border-bottom:1px solid var(--ink);padding-bottom:2px}
.epoc-news__input{
  flex:1;border:0;background:transparent;padding:14px 0;font-size:14px;outline:none;
}
.epoc-news__input::placeholder{color:var(--mute);opacity:.6}
.epoc-news__submit{
  padding:0 4px 0 18px;font-size:10px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;
  transition:color var(--t);white-space:nowrap;
}
.epoc-news__submit:hover{color:var(--gold)}
.epoc-news__msg{position:absolute;top:100%;left:0;margin-top:8px;font-size:11px;color:var(--gold);min-height:16px}

/* ==================================================================
   FOOTER
   ================================================================ */
.epoc-footer{background:var(--ink);color:var(--cream);padding:clamp(56px,7vw,96px) 0 34px}
.epoc-footer__grid{
  display:grid;grid-template-columns:1.4fr repeat(4,1fr);
  gap:clamp(24px,3vw,50px);padding-bottom:clamp(40px,5vw,70px);
}
@media (max-width:1080px){ .epoc-footer__grid{grid-template-columns:repeat(2,1fr);gap:40px} }
@media (max-width:560px){ .epoc-footer__grid{grid-template-columns:1fr} }
.epoc-footer__logo{width:42px;height:42px;object-fit:contain;margin-bottom:20px}
.epoc-footer__baseline{font-size:13px;line-height:1.8;color:rgba(244,239,230,.62);max-width:34ch}
.epoc-footer__title{
  font-family:var(--sans);font-size:10px;font-weight:500;letter-spacing:.22em;
  text-transform:uppercase;color:var(--gold);margin-bottom:18px;
}
.epoc-footer__col li{margin-bottom:11px}
.epoc-footer__col a,.epoc-footer__col span{
  font-size:13px;font-weight:300;color:rgba(244,239,230,.72);
  transition:color var(--t),padding-left var(--t);
}
.epoc-footer__col a:hover{color:var(--cream);padding-left:5px}
.epoc-footer__bottom{
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding-top:26px;border-top:1px solid rgba(244,239,230,.14);
  font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:rgba(244,239,230,.45);
}
/* ---------- La signature ----------
   Un filet, puis une ligne minuscule et centree. L'or ne se pose pas d'emblee :
   il balaie le nom au survol, une seule fois, de droite a gauche. Le degrade
   est decoupe dans le texte lui-meme (`background-clip`), ce qui evite tout
   halo autour des lettres — et un repli en or plein est prevu pour les
   navigateurs qui ne savent pas le faire. */
.epoc-footer__signature{
  margin-top:20px;padding-top:18px;
  border-top:1px solid rgba(244,239,230,.1);
  display:flex;align-items:center;justify-content:center;gap:8px;
  font-size:9px;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(244,239,230,.34);
}
.epoc-footer__auteur{
  position:relative;padding-bottom:3px;
  color:var(--gold);
  transition:color var(--t);
}
/* Le filet se tire depuis la gauche au survol */
.epoc-footer__auteur::after{
  content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;
  background:var(--gold);
  transform:scaleX(0);transform-origin:left center;
  transition:transform var(--t-slow);
}
.epoc-footer__auteur:hover::after,
.epoc-footer__auteur:focus-visible::after{transform:scaleX(1)}
.epoc-footer__auteur:focus-visible{outline:1px solid var(--gold);outline-offset:4px}

@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .epoc-footer__auteur-nom{
    display:inline-block;
    background-image:linear-gradient(100deg,
      var(--gold) 0%, var(--gold) 34%, #f2e3c4 50%, var(--gold) 66%, var(--gold) 100%);
    background-size:280% 100%;
    background-position:100% 0;
    -webkit-background-clip:text;background-clip:text;
    color:transparent;
    transition:background-position 1.15s cubic-bezier(.22,.61,.36,1);
  }
  .epoc-footer__auteur:hover .epoc-footer__auteur-nom,
  .epoc-footer__auteur:focus-visible .epoc-footer__auteur-nom{background-position:0 0}
}

@media (prefers-reduced-motion:reduce){
  .epoc-footer__auteur-nom{transition:none}
  .epoc-footer__auteur::after{transition:none}
}

/* Le lien des mentions legales, discret mais present sur chaque page */
.epoc-footer__mentions{
  font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  opacity:.72;transition:opacity var(--t),color var(--t);
}
.epoc-footer__mentions:hover{opacity:1;color:var(--gold)}

/* ==================================================================
   JOURNAL / PAGES SIMPLES
   ================================================================ */
.epoc-page{padding-bottom:clamp(60px,8vw,110px)}
.epoc-journal{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,44px)}
@media (max-width:900px){ .epoc-journal{grid-template-columns:1fr 1fr} }
@media (max-width:600px){ .epoc-journal{grid-template-columns:1fr} }
.epoc-journal__media{margin-bottom:16px;background:var(--cream)}
.epoc-journal__media img{transition:transform var(--t-slow)}
.epoc-journal__item:hover .epoc-journal__media img{transform:scale(1.04)}
.epoc-journal__date{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.epoc-journal__title{font-size:clamp(21px,2.2vw,28px);margin:8px 0 10px}
.epoc-journal__excerpt{font-size:13px;color:var(--mute);line-height:1.75}

.epoc-single{max-width:760px;margin:0 auto;padding-top:40px}
.epoc-single__title{font-size:clamp(34px,5vw,62px);margin-bottom:28px}
.epoc-single__media{margin-bottom:36px}
.epoc-single__content{font-size:15px;line-height:1.85}
.epoc-single__content p{margin-bottom:18px}
.epoc-single__content h2,.epoc-single__content h3{
  font-family:var(--serif);font-style:italic;font-weight:300;margin:34px 0 14px;font-size:30px;
}
.epoc-single__content a{border-bottom:1px solid var(--line);transition:border-color var(--t)}
.epoc-single__content a:hover{border-color:var(--ink)}

/* ==================================================================
   LE JOURNAL — la liste, puis l'article
   ================================================================== */

/* La liste : un filet la separe du texte d'ouverture de la page */
.epoc-billets{
  max-width:var(--wrap);margin:0 auto;padding:clamp(40px,5vw,72px) var(--gut) clamp(46px,6vw,84px);
  border-top:1px solid var(--line);
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(34px,4vw,60px) clamp(20px,3vw,44px);
}
.epoc-billet__media{margin-bottom:18px}
.epoc-billet__media img{transition:transform var(--t-slow)}
.epoc-billet:hover .epoc-billet__media img{transform:scale(1.03)}
.epoc-billet__meta{
  font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-bottom:10px;
}
.epoc-billet__meta i{font-style:normal;margin:0 8px;opacity:.7}
.epoc-billet__titre{
  font-family:var(--serif);font-weight:300;font-style:italic;line-height:1.1;
  font-size:clamp(23px,2.2vw,30px);margin-bottom:12px;
}
.epoc-billet__titre a{transition:color var(--t)}
.epoc-billet__titre a:hover{color:var(--gold)}
.epoc-billet__chapo{font-size:13px;line-height:1.75;color:var(--mute);margin-bottom:18px}
.epoc-billet__lire{
  display:inline-flex;align-items:center;gap:10px;padding-bottom:4px;border-bottom:1px solid var(--line);
  font-size:10px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;
  transition:color var(--t),border-color var(--t);
}
.epoc-billet__lire .epoc-icon{width:15px;height:15px;transition:transform var(--t)}
.epoc-billet__lire:hover{color:var(--gold);border-color:var(--gold)}
.epoc-billet__lire:hover .epoc-icon{transform:translateX(4px)}

/* A la une : le premier article prend toute la largeur, image et texte en regard */
.epoc-billet--une{
  grid-column:1 / -1;
  display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(28px,5vw,90px);align-items:center;
}
.epoc-billet--une .epoc-billet__media{margin-bottom:0;max-width:560px;width:100%;justify-self:end}
.epoc-billet--une .epoc-billet__texte{max-width:52ch}
.epoc-billet--une .epoc-billet__titre{font-size:clamp(32px,4vw,56px);margin-bottom:20px}
.epoc-billet--une .epoc-billet__chapo{
  font-family:var(--serif);font-style:italic;font-size:clamp(18px,1.7vw,23px);line-height:1.45;color:var(--ink);
  margin-bottom:28px;
}
@media (max-width:900px){ .epoc-billets{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:820px){
  .epoc-billet--une{grid-template-columns:1fr}
  .epoc-billet--une .epoc-billet__media{justify-self:stretch;max-width:none}
}
@media (max-width:600px){ .epoc-billets{grid-template-columns:1fr} }

/* L'article : en-tete en regard, texte et photographie 3/4 */
.epoc-article__head{
  max-width:var(--wrap);margin:0 auto;
  padding:clamp(40px,6vw,96px) var(--gut) clamp(40px,5vw,80px);
  display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(28px,5vw,96px);align-items:center;
}
.epoc-article__head--seul{grid-template-columns:1fr;text-align:center}
.epoc-article__head--seul .epoc-article__intro{margin:0 auto}
.epoc-article__intro{max-width:34rem;justify-self:end}
.epoc-article__kicker{
  margin-bottom:22px;font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);
}
.epoc-article__kicker a{border-bottom:1px solid transparent;transition:border-color var(--t)}
.epoc-article__kicker a:hover{border-color:var(--gold)}
.epoc-article__kicker i{font-style:normal;margin:0 8px;opacity:.6}
.epoc-article__title{
  font-family:var(--serif);font-weight:300;font-style:italic;
  font-size:clamp(40px,5.4vw,80px);line-height:1.02;letter-spacing:.003em;
  margin-bottom:clamp(20px,2.4vw,32px);text-wrap:balance;
}
.epoc-article__chapo{
  font-family:var(--serif);font-style:italic;font-weight:300;
  font-size:clamp(19px,1.8vw,25px);line-height:1.45;text-wrap:pretty;
}
.epoc-article__chapo::before{
  content:"";display:block;width:38px;height:1px;background:var(--gold);margin-bottom:clamp(18px,2vw,26px);
}
.epoc-article__head--seul .epoc-article__chapo::before{margin-inline:auto}
.epoc-article__lecture{
  margin-top:clamp(20px,2.4vw,30px);
  font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--mute);
}
.epoc-article__cover{max-width:600px;width:100%}
@media (max-width:820px){
  .epoc-article__head{grid-template-columns:1fr}
  .epoc-article__intro{justify-self:stretch;max-width:none}
  .epoc-article__cover{max-width:none}
}

/* Le corps : la colonne des rubriques, plus un peu de ponctuation editoriale */
.epoc-article__body{padding-top:clamp(20px,3vw,40px)}
.epoc-article__body > p:first-child::first-letter{
  float:left;margin:.08em .1em 0 0;
  font-family:var(--serif);font-weight:300;font-size:4.6em;line-height:.78;color:var(--gold);
}
/* Litanie : les lignes courtes que l'auteur a voulues isolees, en serif */
.epoc-rubrique__body .epoc-litanie{
  margin-block:1.9em;
  font-family:var(--serif);font-style:italic;font-weight:300;
  font-size:clamp(21px,2.1vw,27px);line-height:1.5;color:var(--ink);
}
/* Dans un article, la phrase-cle deborde la colonne : elle respire sur deux
   lignes equilibrees au lieu de s'empiler en quatre. */
.epoc-article__body .epoc-statement{text-wrap:balance}
@media (min-width:1000px){
  .epoc-article__body .epoc-statement{margin-inline:clamp(-180px,-10vw,-90px)}
}
/* Le mot qui porte l'idee — « ou », puis « et » — passe a l'or */
.epoc-litanie .epoc-pivot{color:var(--gold)}
.epoc-rubrique__body h3{margin-top:2.4em}
.epoc-rubrique__body h2 + p,.epoc-rubrique__body h3 + p{margin-top:.9em}
/* La fin : un filet d'or, puis la phrase de cloture */
.epoc-rubrique__body hr.epoc-fin{
  width:38px;height:0;margin:clamp(3em,6vw,4.4em) auto clamp(1.6em,3vw,2.2em);
  border:0;border-top:1px solid var(--gold);background:none;opacity:1;
}
.epoc-rubrique__body .epoc-signature{
  margin-top:0;text-align:center;text-wrap:balance;
  font-size:10px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;line-height:2.2;color:var(--mute);
}
.epoc-article__suite{
  display:flex;flex-wrap:wrap;justify-content:center;gap:14px;
  padding:0 var(--gut) clamp(52px,7vw,90px);
}

/* ==================================================================
   SURCHARGES WOOCOMMERCE (panier, commande, notices)
   ================================================================ */
.epoc .woocommerce-message,.epoc .woocommerce-info,.epoc .woocommerce-error{
  border-top:0;border-left:2px solid var(--gold);background:var(--cream);
  font-size:13px;list-style:none;padding:16px 20px;margin-bottom:24px;
}
.epoc .woocommerce-message::before,.epoc .woocommerce-info::before,.epoc .woocommerce-error::before{display:none}
.epoc .woocommerce a.button,.epoc .woocommerce button.button,
.epoc .woocommerce input.button,.epoc .woocommerce #respond input#submit{
  background:var(--ink);color:var(--paper);border-radius:0;
  font-family:var(--sans);font-size:11px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  padding:15px 28px;transition:background var(--t),color var(--t);
}
.epoc .woocommerce a.button:hover,.epoc .woocommerce button.button:hover,
.epoc .woocommerce input.button:hover{background:var(--gold);color:var(--ink)}
.epoc .woocommerce table.shop_table{border-radius:0;border-color:var(--line)}
.epoc .woocommerce table.shop_table th{
  font-family:var(--sans);font-size:10px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
}
.epoc .woocommerce .quantity input.qty{border:1px solid var(--line);border-radius:0;height:44px}
.epoc-page h1,.epoc-page .entry-title{font-family:var(--serif);font-style:italic;font-weight:300}

/* ---------- Etat "tiroir ouvert" ---------- */
body.epoc-locked{overflow:hidden}

/* ---------- Responsive header ---------- */
@media (max-width:1080px){
  .epoc-nav__list{display:none}
  .epoc-burger{display:flex}
  .epoc-header__bar{min-height:64px}
}
@media (max-width:560px){
  .epoc-brand__word{font-size:12px;letter-spacing:.3em}
  .epoc-logo-img{width:28px;height:28px}
  .epoc-utils{gap:14px}
  .epoc-region{display:none}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}