/** Shopify CDN: Minification failed

Line 2348:0 Expected "}" to go with "{"

**/
/* ═══════════════════════════════════════════════════════════════════════
   EP SHOP — composants de marque

   Écrit CONTRE les jetons d'Atelier, jamais contre ses sélecteurs
   internes. Chaque règle utilise var(--color-*), var(--font-*) ou nos
   propres var(--ep-*), de sorte qu'une mise à jour du thème ne casse
   rien : les jetons sont un contrat stable, les classes internes non.

   Aucun !important. Si une règle ne prend pas, c'est un problème de
   spécificité à régler proprement, pas à écraser.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 1. Titres éditoriaux ─────────────────────────────────────────────
   Atelier ne rend pas de vrais <h1> : le bloc « texte » émet une div
   portant .text-block.h1 (ou .h2, .h3…), et l'échelle vient de là.
   C'est le seul endroit où l'on s'accroche à des classes d'Atelier
   plutôt qu'à des jetons — il n'existe pas de jeton pour ça. Le script
   de contrôle vérifie que ces classes existent toujours dans base.css.

   PP Editorial New ne vient qu'en Regular : on coupe le gras synthétique
   partout où la police d'affichage est utilisée.                        */
h1, h2, h3,
.text-block.h1, .text-block.h2, .text-block.h3,
.h1, .h2, .h3,
.ep-display {
  font-synthesis-weight: var(--ep-font-synthesis, none);
}

.ep-display {
  font-family: var(--ep-display);
  font-weight: 400;
  font-style: normal;
  letter-spacing: -0.022em;
  line-height: 1.06;
}

/* Un mot mis en évidence dans un titre : rouge vif pour <em>, rouge
   profond pour <i>. C'est la convention des maquettes, et elle laisse
   le marchand accentuer un mot depuis l'éditeur sans toucher au code. */
h1 em, h2 em, h3 em,
.text-block.h1 em, .text-block.h2 em, .text-block.h3 em,
.ep-display em {
  font-style: normal;
  color: var(--ep-accent);
}

h1 i, h2 i, h3 i,
.text-block.h1 i, .text-block.h2 i, .text-block.h3 i,
.ep-display i {
  font-style: normal;
  color: var(--ep-deep);
}

/* ── 2. Surtitre ──────────────────────────────────────────────────────
   Petites capitales rouges précédées d'un filet. Le filet est en
   currentColor : il suit la couleur du texte, y compris sur fond foncé. */
.ep-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--ep-ui);
  font-size: var(--font-size--2xs, 0.75rem);
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ep-accent);
}

.ep-eyebrow::before {
  content: "";
  inline-size: 26px;
  block-size: 1px;
  background: currentColor;
}

.ep-eyebrow--plain::before {
  display: none;
}

/* ── 3. Lien fléché ───────────────────────────────────────────────────
   La flèche avance de 5 px au survol. Neutralisé si l'utilisateur a
   demandé moins d'animation.                                            */
.ep-arrow-link {
  display: inline-flex;
  align-items: center;

  /* 24 px de haut au minimum. Le lien mesurait 21 px : sous le seuil de
     la règle WCAG 2.5.8 sur la taille des cibles, et surtout pénible à
     viser au pouce. La hauteur s'ajoute autour du texte, sans décaler la
     ligne de base ni changer l'aspect. */
  min-block-size: 24px;
  gap: 10px;
  font-family: var(--ep-ui);
  font-size: var(--font-size--xs, 0.8125rem);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-foreground);
  text-decoration: none;
  transition: color 0.2s;
}

.ep-arrow-link:hover {
  color: var(--ep-accent);
}

.ep-arrow-link__a {
  transition: transform 0.22s cubic-bezier(0.2, 0.7, 0.3, 1);
}

.ep-arrow-link:hover .ep-arrow-link__a {
  transform: translateX(5px);
}

/* ── 4. Liste à filets ────────────────────────────────────────────────
   Le classement (« notre top 5 ») et les listes de verres. Un filet
   encre en haut, des filets clairs entre les lignes, et la ligne se
   décale légèrement au survol.                                          */
.ep-rows {
  border-block-start: 1px solid var(--color-foreground);
}

.ep-row {
  display: grid;
  grid-template-columns: 104px 1fr auto 40px;
  gap: 26px;
  align-items: center;
  padding-block: 18px;
  border-block-end: 1px solid rgb(var(--color-foreground-rgb) / var(--opacity-10, 0.1));
  text-decoration: none;
  color: inherit;
  transition: padding-inline-start 0.22s;
}

.ep-row:hover {
  padding-inline-start: 10px;
}

.ep-row__thumb {
  inline-size: 104px;
  block-size: 74px;
  border-radius: 12px;
  overflow: hidden;
  background: rgb(var(--color-foreground-rgb) / var(--opacity-5, 0.05));
}

.ep-row__thumb img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

.ep-row__thumb--contain img {
  object-fit: contain;
  padding: 8px;
  mix-blend-mode: multiply;
}

.ep-row__rank {
  font-family: var(--ep-ui);
  font-weight: 700;
  font-size: var(--font-size--sm, 0.875rem);
  letter-spacing: 0.06em;
  color: var(--ep-deep);
}

.ep-row__title {
  display: block;
  font-family: var(--ep-ui);
  font-size: var(--font-size--xl, 1.25rem);
  font-weight: 700;
  letter-spacing: -0.015em;
}

.ep-row__sub {
  display: block;
  font-family: var(--ep-ui);
  font-size: var(--font-size--2xs, 0.75rem);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgb(var(--color-foreground-rgb) / 0.55);
  margin-block-start: 5px;
}

.ep-row__meta {
  font-family: var(--ep-ui);
  font-size: var(--font-size--2xs, 0.75rem);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ep-deep);
  text-align: end;
  line-height: 1.5;
}

.ep-row__arrow {
  text-align: end;
  font-size: var(--font-size--lg, 1.125rem);
  color: rgb(var(--color-foreground-rgb) / 0.55);
  transition: transform 0.22s, color 0.22s;
}

.ep-row:hover .ep-row__arrow {
  color: var(--ep-accent);
  transform: translateX(5px);
}

@media screen and (max-width: 1080px) {
  .ep-row {
    grid-template-columns: 76px 1fr;
    gap: 16px;
  }

  .ep-row__thumb {
    inline-size: 76px;
    block-size: 58px;
  }

  .ep-row__meta,
  .ep-row__arrow {
    display: none;
  }
}

/* ── 5. Grain filmique ────────────────────────────────────────────────
   La texture du guide de marque, sur les zones photo. En multiply sur
   fond clair, en screen sur fond foncé — sinon le grain noircit l'image. */
.ep-grain {
  position: relative;
}

.ep-grain::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: var(--ep-grain);
  background-size: 140px 140px;
  opacity: 0.16;
  mix-blend-mode: multiply;
}

.ep-grain--on-dark::after {
  mix-blend-mode: screen;
  opacity: 0.09;
}

/* ── 6. Voile du héros ────────────────────────────────────────────────
   Le dégradé oblique qui fait passer la photo du papier plein à la
   transparence. L'angle et l'opacité sont des variables : une section
   peut les régler en style en ligne sans dupliquer la règle.            */
.ep-veil {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    var(--ep-veil-angle, 100deg),
    rgb(var(--ep-paper-rgb, 239 238 232) / var(--ep-veil-opacity, 0.96)) 0%,
    rgb(var(--ep-paper-rgb, 239 238 232) / calc(var(--ep-veil-opacity, 0.96) * 0.95)) 30%,
    rgb(var(--ep-paper-rgb, 239 238 232) / calc(var(--ep-veil-opacity, 0.96) * 0.57)) 53%,
    rgb(var(--ep-paper-rgb, 239 238 232) / calc(var(--ep-veil-opacity, 0.96) * 0.1)) 76%,
    rgb(var(--ep-paper-rgb, 239 238 232) / 0) 100%
  );
}

.ep-veil::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgb(var(--ep-paper-rgb, 239 238 232) / 0.6),
    transparent 32%
  );
}

/* ── 7. Pastille légende ──────────────────────────────────────────────
   Le petit cartouche en bas du héros, avec sa pastille qui bat.         */
.ep-caption {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgb(255 255 255 / 0.9);
  backdrop-filter: blur(10px);
  border: 1px solid rgb(0 0 0 / 0.07);
  border-radius: var(--style-border-radius-pills, 999px);
  padding: 11px 20px;
  font-family: var(--ep-ui);
  font-size: var(--font-size--3xs, 0.625rem);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.ep-caption::before {
  content: "";
  inline-size: 7px;
  block-size: 7px;
  border-radius: 50%;
  background: var(--ep-accent);
  animation: ep-pulse 2.4s ease-in-out infinite;
}

@keyframes ep-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.3; transform: scale(0.8); }
}

/* ── 8. Bande brune ───────────────────────────────────────────────────
   La cinquième couleur, utilisée en pleine largeur pour l'infolettre.

   Hiérarchie inversée, et ce n'est pas un détail esthétique : le rouge
   vif sur le brun tombe à 2,1:1 et ne passe aucun seuil de contraste.
   Le corps du titre est donc en papier adouci, le mot accentué en
   papier plein.                                                          */
.ep-brown-band {
  background: var(--ep-brown);
  color: var(--ep-paper);
}

.ep-brown-band h1,
.ep-brown-band h2,
.ep-brown-band h3,
.ep-brown-band .text-block.h1 > *,
.ep-brown-band .text-block.h2 > *,
.ep-brown-band .text-block.h3 > * {
  /* 62 % donne 3,66:1 sur le brun : suffisant pour du grand texte
     (seuil AA large = 3:1), et c'est bien un titre d'affichage.        */
  color: rgb(var(--ep-paper-rgb) / 0.62);
}

/* Le mot accentué passe en papier plein, PAS en rouge vif.
   Le rouge vif sur le brun tombe à 2,1:1 : il ne passe aucun seuil.
   Ces sélecteurs doivent battre la règle générique `em → accent`, d'où
   la reprise des mêmes classes plutôt qu'un simple `.ep-brown-band em`. */
.ep-brown-band h1 em,
.ep-brown-band h2 em,
.ep-brown-band h3 em,
.ep-brown-band .text-block.h1 em,
.ep-brown-band .text-block.h2 em,
.ep-brown-band .text-block.h3 em,
.ep-brown-band .ep-display em {
  color: var(--ep-paper);
}

.ep-brown-band h1 i,
.ep-brown-band h2 i,
.ep-brown-band h3 i,
.ep-brown-band .text-block.h1 i,
.ep-brown-band .text-block.h2 i,
.ep-brown-band .text-block.h3 i {
  color: rgb(var(--ep-paper-rgb) / 0.8);
}

.ep-brown-band p,
.ep-brown-band .text-block > * {
  /* 74 % donnait 4,47:1 — sous le seuil AA texte de 4,5:1, de justesse.
     À 80 % on est à 4,93:1. Mesuré, pas estimé à l'œil.               */
  color: rgb(var(--ep-paper-rgb) / 0.8);
}

/* ── 9. Respect du réglage système ────────────────────────────────────
   Tout ce qui bouge s'arrête si l'utilisateur a demandé moins
   d'animation. Le grain, lui, reste : c'est une texture, pas un
   mouvement.                                                             */
@media (prefers-reduced-motion: reduce) {
  .ep-caption::before {
    animation: none;
  }

  .ep-row,
  .ep-row__arrow,
  .ep-arrow-link__a {
    transition: none;
  }
}

/* ── 10. Numérotation automatique des listes classées ─────────────────
   Le rang n'est pas un réglage saisi à la main : il se calcule à partir
   de l'ordre des blocs. Réordonner dans l'éditeur renumérote, et un
   classement ne peut donc pas mentir après un déplacement.             */
.ep-rows {
  counter-reset: ep-row;
}

.ep-row {
  counter-increment: ep-row;
}

.ep-row__rank::before {
  content: none;
}

/* Le corps de la ligne est un <span> dans un <a> : il doit redevenir bloc. */
.ep-row__body {
  display: block;
  min-inline-size: 0;
}

/* ── 11. Héros éditorial ──────────────────────────────────────────────
   L'affiche et la vidéo occupent la même case : elles se superposent,
   la vidéo par-dessus, et l'affiche reste visible tant que la vidéo
   n'est pas prête. Aucun saut de mise en page à la bascule.            */
.ep-hero {
  padding: 0;
}

.ep-hero__stage {
  position: relative;
  display: flex;
  align-items: center;
  overflow: clip;
  min-block-size: min(var(--ep-hero-height, 80svh), 780px);
  background: var(--color-background);
  isolation: isolate;
}

.ep-hero__media {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  filter: saturate(1.05) contrast(0.99) brightness(1.02);
}

.ep-hero__media--video {
  /* La vidéo ne se révèle qu'une fois qu'elle joue : sinon on verrait un
     rectangle noir pendant le chargement, par-dessus l'affiche.         */
  opacity: 0;
  transition: opacity 0.6s ease-out;
}

.ep-hero__stage[data-ep-playing] .ep-hero__media--video {
  opacity: 1;
}

.ep-hero__media--empty {
  display: grid;
  place-items: center;
  background: var(--color-background);
}

.ep-hero__placeholder {
  inline-size: 100%;
  block-size: 100%;
  opacity: 0.25;
}

.ep-hero .ep-veil {
  z-index: 1;
}

.ep-hero__inner {
  position: relative;
  z-index: 2;
  inline-size: 100%;
  padding-block: clamp(64px, 8vw, 104px);
  padding-inline: var(--page-margin, 40px);
}

.ep-hero__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 22px;
  max-inline-size: 640px;
}

.ep-hero__copy > * {
  margin: 0;
}

.ep-hero__cap {
  position: absolute;
  z-index: 3;
  inset-inline-end: var(--page-margin, 40px);
  inset-block-end: 26px;
}

.ep-hero__scroll {
  position: absolute;
  z-index: 2;
  inset-inline-start: var(--page-margin, 40px);
  inset-block-end: 26px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--ep-ui);
  font-size: var(--font-size--3xs, 0.625rem);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgb(var(--color-foreground-rgb) / 0.55);
}

.ep-hero__scroll-bar {
  inline-size: 40px;
  block-size: 1px;
  background: currentColor;
  opacity: 0.5;
}

@media screen and (max-width: 760px) {
  /* La pastille et l'indice se chevauchent sous cette largeur :
     l'indice cède, il est décoratif.                                    */
  .ep-hero__scroll {
    display: none;
  }

  .ep-hero__cap {
    inset-inline: var(--page-margin, 20px);
    display: flex;
    justify-content: center;
  }
}

/* ── 12. Bande de preuve ──────────────────────────────────────────────
   Trois affirmations en colonnes, filets entre elles. Le filet de
   droite tombe sur la dernière, sinon la bande a l'air coupée.         */
.ep-strip {
  display: grid;
  /* auto-fit plutôt qu'un nombre réglé : le marchand peut mettre deux ou
     quatre colonnes sans qu'on ait à prévoir le cas, et la bande ne
     déborde jamais.                                                     */
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  border-block: 1px solid rgb(var(--color-foreground-rgb) / var(--opacity-15, 0.15));
}

.ep-strip__i {
  padding: 26px 30px;
  border-inline-end: 1px solid rgb(var(--color-foreground-rgb) / var(--opacity-15, 0.15));
}

.ep-strip__i:last-child {
  border-inline-end: none;
}

.ep-strip__i b {
  display: block;
  font-family: var(--ep-ui);
  font-size: var(--font-size--md, 1rem);
  font-weight: 700;
  letter-spacing: -0.01em;
}

.ep-strip__i span {
  display: block;
  font-family: var(--ep-ui);
  font-size: var(--font-size--2xs, 0.75rem);
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgb(var(--color-foreground-rgb) / 0.55);
  margin-block-start: 6px;
}

@media screen and (max-width: 860px) {
  .ep-strip {
    grid-template-columns: 1fr;
  }

  .ep-strip__i {
    border-inline-end: none;
    border-block-end: 1px solid rgb(var(--color-foreground-rgb) / var(--opacity-15, 0.15));
  }

  .ep-strip__i:last-child {
    border-block-end: none;
  }
}

/* ── 13. Cartes de verre ──────────────────────────────────────────────
   La photo est en 16/10 et non carrée : un verre est large, le cadre
   carré le noie dans du vide.                                          */
.ep-lens-row {
  display: grid;
  grid-template-columns: repeat(var(--ep-lens-columns, 3), minmax(0, 1fr));
  gap: 20px;
  counter-reset: ep-lens;
}

.ep-lens {
  display: block;
  background: rgb(var(--color-foreground-rgb) / var(--opacity-5, 0.05));
  border: 1px solid rgb(var(--color-foreground-rgb) / var(--opacity-10, 0.1));
  border-radius: var(--style-border-radius-lg, 20px);
  overflow: clip;
  text-decoration: none;
  color: inherit;
  counter-increment: ep-lens;
  transition: transform 0.24s cubic-bezier(0.2, 0.7, 0.3, 1), border-color 0.24s, box-shadow 0.24s;
}

a.ep-lens:hover {
  transform: translateY(-5px);
  border-color: var(--color-foreground);
  box-shadow: 0 22px 46px rgb(var(--color-shadow-rgb, 0 0 0) / 0.09);
}

.ep-lens__im {
  aspect-ratio: 16 / 10;
  overflow: clip;
  background: var(--color-background);
}

.ep-lens__im img,
.ep-lens__placeholder {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

.ep-lens__m {
  padding: 24px 24px 28px;
}

.ep-lens__n {
  font-family: var(--ep-ui);
  font-size: var(--font-size--sm, 0.875rem);
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--ep-deep);
}

/* Numérotation automatique quand la carte affiche un rang plutôt qu'un code. */
.ep-lens__n:empty::before {
  content: var(--ep-num-prefix, "") counter(ep-lens, decimal-leading-zero);
}

.ep-lens__c {
  font-family: var(--ep-ui);
  font-size: var(--font-size--2xs, 0.75rem);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgb(var(--color-foreground-rgb) / 0.55);
  margin-block-start: 14px;
}

.ep-lens__h {
  font-family: var(--ep-ui);
  font-size: var(--font-size--2xl, 1.5rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-block-start: 4px;
}

.ep-lens__p {
  font-family: var(--ep-ui);
  font-size: var(--font-size--sm, 0.875rem);
  line-height: 1.68;
  color: rgb(var(--color-foreground-rgb) / 0.78);
  margin-block-start: 12px;
}

@media screen and (max-width: 1080px) {
  .ep-lens-row {
    grid-template-columns: 1fr;
  }
}

/* ── 14. Bande citation ───────────────────────────────────────────────
   Pleine largeur, filets en haut et en bas. La photo est une colonne,
   pas un fond : elle garde son cadrage à toutes les largeurs.          */
.ep-quote {
  border-block: 1px solid rgb(var(--color-foreground-rgb) / var(--opacity-15, 0.15));
}

.ep-quote__grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  min-block-size: 520px;
}

.ep-quote__grid--flip .ep-quote__copy {
  order: 2;
}

.ep-quote__copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(56px, 6vw, 96px) clamp(40px, 5vw, 80px);
}

.ep-quote__q {
  font-size: clamp(24px, 2.7vw, 40px);
  line-height: 1.22;
  letter-spacing: -0.018em;
  margin: 24px 0 0;
}

.ep-quote__q p {
  margin: 0;
}

/* Le mot souligné : <strong> plutôt que <em>, parce que c'est la balise
   que l'éditeur de texte enrichi pose le plus facilement. Pas de gras
   réel — PP Editorial New n'a pas de graisse. */
.ep-quote__q strong {
  font-weight: 400;
  color: var(--ep-accent);
}

.ep-quote__who {
  margin-block-start: 28px;
  font-family: var(--ep-ui);
  font-size: var(--font-size--2xs, 0.75rem);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgb(var(--color-foreground-rgb) / 0.55);
}

.ep-quote__im {
  position: relative;
  overflow: clip;
}

.ep-quote__im img,
.ep-quote__placeholder {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

@media screen and (max-width: 1080px) {
  .ep-quote__grid {
    grid-template-columns: 1fr;
    min-block-size: 0;
  }

  .ep-quote__grid--flip .ep-quote__copy {
    order: 0;
  }

  .ep-quote__im {
    aspect-ratio: 4 / 3;
  }
}

/* ── 15. Grille écosystème ────────────────────────────────────────────
   Quatre volets, la tuile « vous êtes ici » en encre pour la détacher. */
.ep-eco {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: 16px;
}

.ep-eco__t {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 28px 26px 26px;
  border: 1px solid rgb(var(--color-foreground-rgb) / var(--opacity-15, 0.15));
  border-radius: var(--style-border-radius-lg, 20px);
}

.ep-eco__t--here {
  background: var(--color-foreground);
  color: var(--color-background);
  border-color: var(--color-foreground);
}

.ep-eco__k {
  font-family: var(--ep-ui);
  font-size: var(--font-size--2xs, 0.75rem);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ep-deep);
}

.ep-eco__t--here .ep-eco__k {
  color: var(--ep-accent);
}

.ep-eco__h {
  font-family: var(--ep-ui);
  font-size: var(--font-size--xl, 1.25rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0;
}

.ep-eco__p {
  font-family: var(--ep-ui);
  font-size: var(--font-size--sm, 0.875rem);
  line-height: 1.65;
  color: currentColor;
  opacity: 0.78;
  margin: 0;
  flex: 1;
}

.ep-eco__here {
  align-self: flex-start;
  font-family: var(--ep-ui);
  font-size: var(--font-size--3xs, 0.625rem);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  background: var(--ep-accent);
  color: var(--ep-on-accent);
  padding: 6px 12px;
  border-radius: var(--style-border-radius-pills, 999px);
}

.ep-eco__t--here .ep-arrow-link,
.ep-eco__t--here .ep-arrow-link:hover {
  color: var(--color-background);
}

/* ── 16. Promesse ─────────────────────────────────────────────────────
   Deux photos pivotées, l'argumentaire à côté. La rotation est
   décorative : elle tombe sur mobile et sous reduced-motion.           */
.ep-promise {
  display: grid;
  grid-template-columns: 0.85fr 1fr;
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
}

.ep-promise__ph {
  position: relative;
  display: grid;
  gap: 18px;
}

.ep-promise__card {
  border-radius: 0;
  overflow: visible;
  aspect-ratio: auto;
}

.ep-promise__card img,
.ep-promise__card svg {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  border-radius: 0;
}

.ep-promise__card--1 {
  transform: none;
}

.ep-promise__card--2 {
  transform: none;
  margin-inline-start: 0;
}

.ep-promise__h {
  font-size: clamp(30px, 3.4vw, 52px);
  line-height: 1.08;
  margin: 16px 0 0;
}

.ep-promise__lede {
  margin-block-start: 22px;
  font-family: var(--ep-ui);
  font-size: var(--font-size--lg, 1.125rem);
  line-height: 1.68;
  color: rgb(var(--color-foreground-rgb) / 0.82);
  max-inline-size: 56ch;
}

.ep-promise__lede p {
  margin: 0;
}

.ep-vals {
  margin-block-start: 36px;
  counter-reset: ep-val;
  display: grid;
  gap: 22px;
}

.ep-val {
  display: grid;

  /* 78ch et non 1fr. Sur la page à propos, la bande fait près de 1500 px :
     la description d'une valeur s'étirait sur 189 caractères par ligne,
     soit deux fois et demie la mesure confortable. À cette longueur, l'œil
     perd la ligne suivante en revenant à la marge — on relit la même, ou
     on saute. C'est le pire défaut de lisibilité que la page contenait. */
  grid-template-columns: 66px minmax(0, 78ch);
  gap: 18px;
  counter-increment: ep-val;
  padding-block-start: 18px;
  border-block-start: 1px solid rgb(var(--color-foreground-rgb) / var(--opacity-10, 0.1));
}

.ep-val__n {
  font-family: var(--ep-ui);
  font-size: var(--font-size--2xs, 0.75rem);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ep-deep);
}

.ep-val__n::before {
  content: var(--ep-num-prefix, "") counter(ep-val, decimal-leading-zero);
}

.ep-val__h {
  font-family: var(--ep-ui);
  font-size: var(--font-size--md, 1rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0;
}

.ep-val__p {
  font-family: var(--ep-ui);
  font-size: var(--font-size--sm, 0.875rem);
  line-height: 1.68;
  color: rgb(var(--color-foreground-rgb) / 0.78);
  margin-block-start: 6px;
}

@media screen and (max-width: 1080px) {
  .ep-promise {
    grid-template-columns: 1fr;
  }

  .ep-promise__ph {
    grid-template-columns: 1fr 1fr;
  }

  .ep-promise__card--1,
  .ep-promise__card--2 {
    transform: none;
    margin: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ep-promise__card--1,
  .ep-promise__card--2 {
    transform: none;
  }
}

/* ── 17. Bande éditoriale ─────────────────────────────────────────────
   Le conteneur commun à toutes les bandes de contenu. Les couleurs
   viennent des jeux de couleurs d'Atelier pour papier et encre, et du
   jeton de marque pour le brun — qui n'a pas de jeu correspondant.     */
.ep-band {
  padding-block: var(--ep-band-pt, 96px) var(--ep-band-pb, 96px);
}

.ep-band--ink {
  background: var(--color-black, #000);
  color: var(--ep-paper);
  --color-foreground-rgb: var(--ep-paper-rgb);
  --color-foreground: var(--ep-paper);
}

.ep-band--brown {
  background: var(--ep-brown);
  color: var(--ep-paper);
  --color-foreground-rgb: var(--ep-paper-rgb);
  --color-foreground: var(--ep-paper);
}

.ep-band__wrap {
  inline-size: 100%;
  max-inline-size: var(--page-width, 1400px);
  margin-inline: auto;
  padding-inline: var(--page-margin, 40px);
}

.ep-band__wrap--full {
  max-inline-size: none;
  padding-inline: 0;
}

.ep-band__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: clamp(28px, 4vw, 64px);
  flex-wrap: wrap;
  margin-block-end: clamp(32px, 4vw, 56px);
}

/* La variante centrée bascule l'en-tête en COLONNE, et ce détail change
   le sens de tout ce qui suit : en colonne, `flex-basis` dimensionne la
   HAUTEUR, pas la largeur. Les bases de 440 px et 380 px posées
   ci-dessous sont écrites pour la disposition en ligne ; laissées
   telles quelles, elles donnaient une boîte de titre de 440 px de haut
   autour d'une seule ligne de texte, puis un chapeau de 380 px. La bande
   de l'infolettre mesurait 1 134 px, dont 760 px de vide au milieu.

   On remet donc les enfants à la hauteur de leur contenu. Les largeurs
   se règlent explicitement, juste après : c'est l'axe qui compte ici, et
   il ne doit plus dépendre d'un flex-basis pensé pour l'autre sens. */
.ep-band__head--center {
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.ep-band__title {
  flex: 1 1 440px;
  min-inline-size: min(100%, 340px);
  max-inline-size: 24ch;
}

/* Deux classes, pas une : « .ep-band__head--center > * » avait la même
   spécificité que « .ep-band__title » et venait avant lui dans le
   fichier — la base de 440 px regagnait à l'ordre source. Nommer les
   trois enfants met la règle à (0,2,0) et la fait gagner franchement,
   sans !important. */
.ep-band__head--center .ep-band__title,
.ep-band__head--center .ep-band__lede,
.ep-band__head--center .ep-band__link {
  flex: 0 0 auto;
}

.ep-band__head--center .ep-band__title {
  max-inline-size: 28ch;
}

.ep-band__head--center .ep-band__lede {
  max-inline-size: 52ch;
}

/* Sous un titre centré, le corps l'est aussi. Sans cette règle, le champ
   de l'infolettre — le seul bloc qu'on pose dans une bande centrée —
   s'étire sur toute la largeur de page : 1 400 px de champ de saisie
   sous un titre de 28 caractères. */
.ep-band__head--center + .ep-band__body {
  display: flex;
  justify-content: center;
}

.ep-band__head--center + .ep-band__body > * {
  inline-size: min(100%, 560px);
}

.ep-band__h {
  font-size: clamp(30px, 3.4vw, 52px);
  line-height: 1.08;
  letter-spacing: -0.022em;
  margin-block-start: 14px;
}

.ep-band__lede {
  flex: 0 1 380px;
  font-family: var(--ep-ui);
  font-size: var(--font-size--md, 1rem);
  line-height: 1.7;
  color: rgb(var(--color-foreground-rgb) / 0.78);
}

.ep-band__lede p {
  margin: 0;
}

.ep-band__link {
  flex: 0 0 auto;
  padding-block-end: 8px;
}

.ep-band__note {
  margin-block-start: 18px;
  font-family: var(--ep-ui);
  font-size: var(--font-size--2xs, 0.75rem);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgb(var(--color-foreground-rgb) / 0.55);
}

/* Une bande pleine largeur qui contient un en-tête doit quand même
   ramener cet en-tête dans la gouttière : seul le corps est full-bleed. */
.ep-band__wrap--full .ep-band__head,
.ep-band__wrap--full .ep-band__note {
  max-inline-size: var(--page-width, 1400px);
  margin-inline: auto;
  padding-inline: var(--page-margin, 40px);
}

/* ── 18. Explorateur de verres ────────────────────────────────────────
   Onglets et panneaux. Sans JavaScript, tous les panneaux restent
   visibles à la suite : le contenu ne disparaît jamais, il perd
   seulement son pliage. C'est le sens du [data-ep-tabs-ready].        */
.ep-lt__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-block-end: 28px;
}

.ep-lt__tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--ep-ui);
  font-size: var(--font-size--2xs, 0.75rem);
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  padding: 11px 18px;
  border: 1px solid rgb(var(--color-foreground-rgb) / var(--opacity-15, 0.15));
  border-radius: var(--style-border-radius-pills, 999px);
  background: transparent;
  color: inherit;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s, color 0.2s;
}

.ep-lt__tab:hover {
  border-color: var(--color-foreground);
}

.ep-lt__tab[aria-selected="true"] {
  background: var(--color-foreground);
  color: var(--color-background);
  border-color: var(--color-foreground);
}

.ep-lt__panel {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
}

/* Le pliage n'existe qu'une fois le script en place. */
[data-ep-tabs-ready] .ep-lt__panel[hidden] {
  display: none;
}

/* `> * + *` ET NON `> .ep-lt__panel + .ep-lt__panel`.

   Shopify enveloppe chaque bloc enfant dans un div.shopify-block. Les
   panneaux ne sont donc PAS enfants directs de .ep-lt__panels, et ils ne
   sont pas frères entre eux non plus — ce sont leurs enveloppes qui le
   sont. Les deux règles ci-dessous ne s'appliquaient à rien, et les trois
   panneaux se touchaient sans un pixel entre eux.

   Mesuré : écart de 0 px là où 48 étaient prévus. Même cause que le
   compteur de .ep-nums plus haut — on écrit contre une structure qu'on
   croit connaître, et Shopify en glisse une couche au milieu. */
[data-ep-tabs-ready] .ep-lt__panels > * + * {
  margin-block-start: 0;
}

.ep-lt__panels > * + * {
  margin-block-start: 48px;
}

.ep-lt__vis {
  position: relative;
  border-radius: var(--style-border-radius-lg, 20px);
  overflow: clip;
  aspect-ratio: 4 / 3;
  background: rgb(var(--color-foreground-rgb) / var(--opacity-5, 0.05));
}

/* `contain` et `multiply`, pas `cover`.

   Le cadre avait été pensé pour une photo d'ambiance — le repli d'Atelier
   s'appelle d'ailleurs « lifestyle-1 ». Ce qu'on y met sont des clichés de
   verre détourés sur blanc. En `cover`, ils remplissaient le cadre d'un
   rectangle blanc franc au milieu d'une page crème, et le grain du thème
   se posait sur ce blanc comme du bruit.

   `contain` garde le verre entier — les fichiers sont en 4:3, exactement
   le format du cadre, donc rien n'est rogné — et `multiply` fait fondre
   le blanc dans le fond teinté du cadre. C'est le même traitement que
   .ep-row__thumb--contain et que les vignettes du sélecteur de kit : les
   photos produit de ce catalogue sont détourées sur blanc, jamais sur
   transparent.

   Si une vraie photo d'ambiance revient un jour dans ce cadre, elle sera
   affichée en entier plutôt que recadrée — visible, mais pas cassé. */
.ep-lt__vis img,
.ep-lt__vis svg {
  inline-size: 100%;
  block-size: 100%;
  object-fit: contain;
  mix-blend-mode: multiply;
}

.ep-lt__code {
  position: absolute;
  inset-block-end: 14px;
  inset-inline-start: 14px;
  font-family: var(--ep-ui);
  font-size: var(--font-size--3xs, 0.625rem);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  background: var(--ep-accent);
  color: var(--ep-on-accent);
  padding: 6px 12px;
  border-radius: var(--style-border-radius-pills, 999px);
}

.ep-lt__cond {
  font-family: var(--ep-ui);
  font-size: var(--font-size--2xs, 0.75rem);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgb(var(--color-foreground-rgb) / 0.55);
}

.ep-lt__h {
  font-family: var(--ep-ui);
  font-size: var(--font-size--3xl, 2rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 6px 0 0;
}

.ep-lt__p {
  font-family: var(--ep-ui);
  font-size: var(--font-size--md, 1rem);
  line-height: 1.7;
  color: rgb(var(--color-foreground-rgb) / 0.8);
  margin-block-start: 14px;
}

/* ── 19. Jauges ───────────────────────────────────────────────────────
   La barre est décorative : c'est la valeur écrite qui informe.        */
.ep-meters {
  display: grid;
  gap: 16px;
  margin-block-start: 26px;
}

.ep-meter__l {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  font-family: var(--ep-ui);
  font-size: var(--font-size--2xs, 0.75rem);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.ep-meter__l span {
  color: rgb(var(--color-foreground-rgb) / 0.55);
}

.ep-meter__bar {
  block-size: 3px;
  margin-block-start: 8px;
  background: rgb(var(--color-foreground-rgb) / var(--opacity-10, 0.1));
  border-radius: 999px;
  overflow: clip;
}

.ep-meter__fill {
  display: block;
  block-size: 100%;
  background: var(--ep-accent);
  border-radius: 999px;
}

/* ── 20. Comparateur ──────────────────────────────────────────────────
   La colonne mise en avant est désignée par une classe sur le tableau,
   pas par chaque ligne.                                                */
.ep-cmp__scroll {
  overflow-x: auto;
}

.ep-cmp {
  inline-size: 100%;
  border-collapse: collapse;
  min-inline-size: 560px;
}

.ep-cmp th,
.ep-cmp td {
  text-align: start;
  padding: 15px 16px;
  border-block-end: 1px solid rgb(var(--color-foreground-rgb) / var(--opacity-10, 0.1));
  font-family: var(--ep-ui);
  font-size: var(--font-size--sm, 0.875rem);
  vertical-align: top;
}

.ep-cmp thead th {
  font-size: var(--font-size--2xs, 0.75rem);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border-block-end: 1px solid var(--color-foreground);
}

.ep-cmp tbody th {
  font-weight: 700;
  inline-size: 30%;
}

.ep-cmp--hi-a td:nth-of-type(1),
.ep-cmp--hi-a thead th:nth-of-type(1),
.ep-cmp--hi-b td:nth-of-type(2),
.ep-cmp--hi-b thead th:nth-of-type(2) {
  background: rgb(var(--color-foreground-rgb) / var(--opacity-5, 0.05));
  font-weight: 700;
}

/* Le mot porte l'information, la couleur ne fait que l'accentuer :
   un daltonien lit la même chose que les autres. */
.ep-cmp__yes {
  color: var(--ep-deep);
  font-weight: 700;
}

.ep-cmp__no {
  color: rgb(var(--color-foreground-rgb) / 0.5);
  font-weight: 700;
}

@media screen and (max-width: 1080px) {
  .ep-lt__panel {
    grid-template-columns: 1fr;
  }
}

/* ── 21. Avis ─────────────────────────────────────────────────────────
   Trois témoignages en colonnes, filets entre eux plutôt que cartes :
   un avis n'est pas un produit, il ne demande pas de boîte.           */
.ep-revs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: 0;
  border-block-start: 1px solid var(--color-foreground);
}

.ep-rev {
  margin: 0;
  padding: 26px 28px 28px;
  border-inline-end: 1px solid rgb(var(--color-foreground-rgb) / var(--opacity-10, 0.1));
  border-block-end: 1px solid rgb(var(--color-foreground-rgb) / var(--opacity-10, 0.1));
}

.ep-rev:last-child {
  border-inline-end: none;
}

.ep-rev__stars {
  font-size: var(--font-size--sm, 0.875rem);
  letter-spacing: 0.18em;
  color: var(--ep-accent);
}

.ep-rev__q {
  margin: 14px 0 0;
  font-family: var(--ep-ui);
  font-size: var(--font-size--md, 1rem);
  line-height: 1.68;
  color: rgb(var(--color-foreground-rgb) / 0.82);
}

/* Les guillemets viennent de la langue de la boutique : snippets/ep-brand.liquid
   les pose en variables depuis locales/. Français « … », anglais “ … ”. */
.ep-rev__q::before { content: var(--ep-quote-open, ""); }
.ep-rev__q::after { content: var(--ep-quote-close, ""); }

.ep-rev__w {
  margin-block-start: 16px;
  font-family: var(--ep-ui);
  font-size: var(--font-size--2xs, 0.75rem);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgb(var(--color-foreground-rgb) / 0.55);
}

/* La mention n'apparaît que si elle a été cochée avis par avis. */
.ep-rev__ok {
  display: inline-block;
  margin-inline-start: 8px;
  color: var(--ep-deep);
}

.ep-revs__sum {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-block-end: 22px;
}

.ep-revs__score {
  font-family: var(--ep-display);
  font-weight: 400;
  font-synthesis-weight: var(--ep-font-synthesis, none);
  font-size: var(--font-size--4xl, 2.5rem);
  line-height: 1;
}

.ep-revs__count {
  font-family: var(--ep-ui);
  font-size: var(--font-size--2xs, 0.75rem);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgb(var(--color-foreground-rgb) / 0.55);
}

.ep-revs__note {
  margin-block-start: 18px;
  font-family: var(--ep-ui);
  font-size: var(--font-size--2xs, 0.75rem);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgb(var(--color-foreground-rgb) / 0.55);
}

@media screen and (max-width: 860px) {
  .ep-rev {
    border-inline-end: none;
  }
}

/* ── 22. Navigation ───────────────────────────────────────────────────
   Les liens du menu en capitales espacées, avec un filet rouge qui se
   déploie de gauche à droite au survol. Pas de pastilles : décision de
   conception prise sur les maquettes et tenue depuis.

   Troisième et dernière accroche à un nom de classe d'Atelier
   (.menu-list__link), après .text-block.hN. Il n'existe pas de jeton
   pour le traitement des liens de navigation. Le script de contrôle
   vérifie que la classe existe toujours.                               */
.menu-list__link {
  position: relative;
  font-family: var(--ep-ui);
  font-size: var(--font-size--2xs, 0.75rem);
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  transition: color 0.18s;
}

/* Le filet part d'une largeur nulle et se déploie : c'est `right` qu'on
   anime, pas `width`, pour rester sur des propriétés composées.        */
.menu-list > .menu-list__item > .menu-list__link::after {
  content: "";
  position: absolute;
  inset-inline: 0 100%;
  inset-block-end: -6px;
  block-size: 1.5px;
  background: var(--ep-accent);
  transition: inset-inline-end 0.24s cubic-bezier(0.2, 0.7, 0.3, 1);
}

.menu-list > .menu-list__item > .menu-list__link:hover,
.menu-list > .menu-list__item > .menu-list__link--active {
  color: var(--ep-accent);
}

.menu-list > .menu-list__item > .menu-list__link:hover::after,
.menu-list > .menu-list__item > .menu-list__link--active::after {
  inset-inline-end: 0;
}

/* Dans le menu mobile en tiroir, le filet n'a pas de sens : les liens y
   sont empilés, pas alignés sur une barre.                             */
.menu-list--mobile .menu-list__link::after {
  display: none;
}

.menu-list--mobile .menu-list__link {
  font-size: var(--font-size--sm, 0.875rem);
  letter-spacing: 0.13em;
}

/* Les liens du méga-menu restent en casse normale : ce sont des noms de
   produits et de catégories, pas des étiquettes de navigation.         */
.mega-menu__link {
  font-family: var(--ep-ui);
  text-transform: none;
  letter-spacing: normal;
  transition: color 0.15s, padding-inline-start 0.15s;
}

.mega-menu__link:hover {
  color: var(--ep-accent);
  padding-inline-start: 4px;
}

@media (prefers-reduced-motion: reduce) {
  .menu-list__link::after,
  .mega-menu__link {
    transition: none;
  }
}

/* ── 23. Chiffres-repères ─────────────────────────────────────────────
   L'exposant est un élément frère du chiffre, pas un descendant du
   libellé : c'est ce qui empêche le sélecteur du libellé de le
   rattraper et de casser la ligne en deux. Bogue vécu sur les
   maquettes, réglé ici par la structure plutôt que par un sélecteur
   plus précis.                                                        */
.ep-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
  gap: 28px;
  border-block-start: 1px solid var(--color-foreground);
  padding-block-start: 30px;
}

.ep-stat__v {
  display: block;
  font-family: var(--ep-display);
  font-weight: 400;
  font-synthesis-weight: var(--ep-font-synthesis, none);
  font-size: clamp(38px, 4vw, 62px);
  line-height: 1.06;
  letter-spacing: -0.02em;
}

.ep-stat__ord {
  font-size: 0.42em;
  vertical-align: super;
  line-height: 0;
  margin-inline-start: 0.06em;
  color: var(--ep-accent);
}

.ep-stat__l {
  display: block;
  font-family: var(--ep-ui);
  font-size: var(--font-size--2xs, 0.75rem);
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgb(var(--color-foreground-rgb) / 0.55);
  margin-block-start: 10px;
  max-inline-size: 22ch;
}

/* ── 24. Équipe ───────────────────────────────────────────────────────
   Portrait en 3/4, pas en carré : un visage cadré carré est coupé au
   menton ou noyé dans du décor.                                       */
.ep-team {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: 22px;
}

.ep-member__im {
  aspect-ratio: 3 / 4;
  overflow: clip;
  border-radius: var(--style-border-radius-lg, 20px);
  background: rgb(var(--color-foreground-rgb) / var(--opacity-5, 0.05));
}

.ep-member__im img,
.ep-member__im svg {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

.ep-member__m {
  margin-block-start: 16px;
}

.ep-member__n {
  display: block;
  font-family: var(--ep-ui);
  font-size: var(--font-size--lg, 1.125rem);
  font-weight: 700;
  letter-spacing: -0.015em;
}

.ep-member__r {
  display: block;
  font-family: var(--ep-ui);
  font-size: var(--font-size--2xs, 0.75rem);
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ep-deep);
  margin-block-start: 5px;
}

.ep-member__p {
  font-family: var(--ep-ui);
  font-size: var(--font-size--sm, 0.875rem);
  line-height: 1.68;
  color: rgb(var(--color-foreground-rgb) / 0.78);
  margin-block-start: 10px;
}

/* ── Écosystème détaillé (page à propos) ───────────────────────────────
   L'accueil montre quatre tuiles côte à côte, parce que l'espace y est
   compté. La page à propos a de la place : chaque volet devient une
   rangée — le numéro à gauche, le récit au centre, ce que le volet
   contient à droite. C'est la disposition de la maquette. */
.ep-ecorow {
  display: grid;

  /* La colonne du milieu était en 1fr — environ 700 px — alors que le
     paragraphe qu'elle contient est plafonné à une mesure lisible. Les
     ~230 px de reste tombaient DANS la colonne, entre le texte et la
     liste de droite : un trou au milieu de chaque rangée.

     La mesure de lecture passe donc sur la colonne elle-même, et c'est
     la colonne de droite qui absorbe le reste. Le surplus s'y range
     entre le libellé et sa valeur, alignés aux extrémités — la même
     tenue que les rangées de la section « exclusivité ». */
  grid-template-columns: 170px minmax(0, 54ch) minmax(280px, 1fr);
  gap: clamp(24px, 3vw, 52px);
  align-items: start;
  padding: 40px 0;
  border-top: 1px solid rgb(var(--color-foreground-rgb) / var(--opacity-15, 0.15));
}

.ep-ecorow:last-child {
  border-bottom: 1px solid rgb(var(--color-foreground-rgb) / var(--opacity-15, 0.15));
}

.ep-ecorow__k {
  font-family: var(--ep-ui);
  font-size: var(--font-size--2xs, 0.75rem);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ep-deep);
}

.ep-ecorow__h {
  font-family: var(--ep-ui);
  font-size: var(--font-size--2xl, 1.75rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  margin: 10px 0 0;
}

.ep-ecorow__here {
  display: inline-block;
  margin-top: 10px;
  font-family: var(--ep-ui);
  font-size: var(--font-size--3xs, 0.625rem);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  background: var(--ep-accent);
  color: var(--ep-on-accent);
  padding: 4px 9px;
  border-radius: 999px;
}

.ep-ecorow__p {
  font-family: var(--ep-ui);
  font-size: var(--font-size--md, 1rem);
  line-height: 1.72;
  margin: 0;
  opacity: 0.82;
}

.ep-ecorow__link {
  margin: 18px 0 0;
}

.ep-ecorow__side {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ep-ecorow__it {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 9px 0;
  font-family: var(--ep-ui);
  font-size: var(--font-size--sm, 0.875rem);
  border-bottom: 1px solid rgb(var(--color-foreground-rgb) / var(--opacity-10, 0.1));
}

.ep-ecorow__it b {
  font-weight: 700;
}

.ep-ecorow__it span {
  font-size: var(--font-size--3xs, 0.625rem);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0.62;
}

/* Trois colonnes tiennent au-dessus de 1100 px. En dessous, la colonne
   de droite passe sous le récit plutôt que de l'écraser. */
@media (max-width: 1100px) {
  .ep-ecorow { grid-template-columns: 150px 1fr; }
  .ep-ecorow__side { grid-column: 1 / -1; }
}

@media (max-width: 749px) {
  .ep-ecorow { grid-template-columns: 1fr; gap: 18px; padding: 30px 0; }
}

/* ── Liste numérotée ──────────────────────────────────────────────────
   Même enfant que la promesse de l'accueil (ep-value), donc même
   numérotation automatique : le compteur est porté par .ep-val__n. */
.ep-nums {
  display: flex;
  flex-direction: column;
  gap: 22px;

  /* ep-val, PAS ep-num. Le compteur incrémenté par .ep-val s'appelle
     « ep-val » ; remettre à zéro un compteur nommé autrement ne remet
     rien à zéro. Faute d'une portée à lui, le compteur repartait de 1 à
     chaque bloc et les trois rangées affichaient « No. 01 ». Une lettre
     de différence, trois numéros identiques en ligne. */
  counter-reset: ep-val;
}

/* ── Partenaires ──────────────────────────────────────────────────── */
.ep-partners {
  margin-top: clamp(40px, 5vw, 72px);
  padding-top: 26px;
  border-top: 1px solid rgb(var(--color-foreground-rgb) / var(--opacity-15, 0.15));
}

.ep-partners__l {
  font-family: var(--ep-ui);
  font-size: var(--font-size--3xs, 0.625rem);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.55;
}

.ep-partners__u {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 30px;
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
}

.ep-partners__i {
  font-family: var(--ep-ui);
  font-size: var(--font-size--md, 1rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  opacity: 0.78;
}

/* ── Coordonnées ──────────────────────────────────────────────────── */
.ep-cx {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.ep-cx__l {
  font-family: var(--ep-ui);
  font-size: var(--font-size--3xs, 0.625rem);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.55;
}

.ep-cx__v {
  display: block;
  margin-top: 6px;
  font-family: var(--ep-ui);
  font-size: var(--font-size--lg, 1.125rem);
  font-weight: 700;
  letter-spacing: -0.015em;
  color: inherit;
  text-decoration: none;
}

a.ep-cx__v:hover {
  color: var(--ep-accent);
}

.ep-cx__n {
  margin: 5px 0 0;
  font-family: var(--ep-ui);
  font-size: var(--font-size--xs, 0.8125rem);
  line-height: 1.6;
  opacity: 0.6;
}

/* ── Sélecteur de langue ──────────────────────────────────────────────
   Atelier rend un <select> natif habillé en champ de formulaire : fond
   blanc opaque sur l'en-tête papier, casse phrase, chevron système. Sur
   une barre où tout le reste est en capitales espacées, il se lisait
   comme un rectangle blanc collé là par erreur.

   Deux langues seulement, donc une bascule : « EN / FR », un clic au
   lieu de deux. Le <select> reste dans le DOM — c'est LUI qui porte la
   valeur envoyée par le formulaire de localisation — mais il est masqué
   dès que ep-brand.js a posé [data-ep-lang-ready]. Sans JavaScript,
   l'attribut n'apparaît jamais et le menu natif fonctionne comme avant.
   C'est le même principe que les onglets : on n'enlève rien tant qu'on
   n'a pas mis le remplacement en place.                                 */
.language-selector[data-ep-lang-ready] .localization-form__select,
.language-selector[data-ep-lang-ready] .svg-wrapper.icon-caret {
  display: none;
}

/* Dans l'en-tête, la gouttière de 16 px du champ n'a plus lieu d'être :
   la bascule s'aligne alors sur la rangée d'icônes. Le tiroir mobile
   garde la sienne, elle sépare le libellé « Langue » de la valeur. */
.language-selector--collapse-space[data-ep-lang-ready] {
  padding-inline: 0;
}

/* Police et corps en `inherit`, volontairement : l'en-tête expose
   « Police » et « Taille » pour la localisation dans l'éditeur de thème.
   Les figer ici reviendrait à ignorer en silence un réglage que le
   marchand voit et croit actif. Le suivi et les capitales, eux, sont la
   décision de design — c'est ce qui accorde la bascule à la navigation. */
.ep-lang {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5em;
  font-family: inherit;
  font-size: inherit;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Le suivi de 0,15 em ajoute une chasse après la dernière lettre. Sans
   cette reprise, la bascule paraît décalée d'environ deux pixels vers la
   gauche par rapport aux icônes qui la suivent. */
.ep-lang > :last-child {
  margin-inline-end: -0.15em;
}

.ep-lang__on {
  color: var(--color-foreground);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.35em;
}

.ep-lang__off {
  appearance: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
  transition: color var(--animation-speed, 150ms) var(--animation-easing, ease);

  /* La seconde déclaration l'emporte quand le jeton existe ; si le thème
     cessait de l'exposer, elle devient invalide et la première tient. */
  color: var(--color-foreground);
  color: rgb(var(--color-foreground-rgb) / 0.45);
}

.ep-lang__off:hover,
.ep-lang__off:focus-visible {
  color: var(--ep-accent);
}

.ep-lang__off:focus-visible {
  outline: var(--focus-outline-width, 2px) solid var(--ep-accent);
  outline-offset: 3px;
}

.ep-lang__sep {
  color: var(--color-foreground);
  color: rgb(var(--color-foreground-rgb) / 0.28);
}

@media (prefers-reduced-motion: reduce) {
  .ep-lang__off {
    transition: none;
  }
}

/* ── Sélecteur de kit Pilla (Simple Bundles) ──────────────────────────
   Les trois choix d'un kit — monture, premier verre, second verre — sont
   rendus par snippets/sb-io-swatches.liquid, un composant sur mesure déjà
   présent dans la boutique avant nous. Il posait la vignette et les
   options CÔTE À CÔTE : vignette figée à 300 px de large dans une colonne
   de détails limitée à 400 px, il ne restait que 84 px pour le reste. Le
   titre se coupait sur trois lignes et les pastilles s'empilaient en
   colonne. Ce n'est pas un défaut de goût, c'est une largeur impossible.

   On remet le groupe en pile : titre et valeur choisie sur une ligne,
   vignette pleine largeur en dessous, pastilles sous l'image.

   TOUT SE FAIT ICI, EN CSS, ET C'EST VOULU. Le composant réécrit son
   propre HTML à chaque changement de variante (renderSwatches), avec le
   même balisage. Déplacer les éléments dans le Liquid serait défait à la
   première sélection ; une règle de style, elle, se réapplique.

   Le composant pose ses styles dans un <style> en plein <body>, donc APRÈS
   cette feuille. À spécificité égale, c'est lui qui gagnerait. D'où le
   `.sb-io` en préfixe partout : 0,2,0 contre 0,1,0, sans un seul
   !important.                                                            */
.sb-io .sb-io__group-inner {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "titre  valeur"
    "image  image"
    "choix  choix"
    "note   note";
  align-items: baseline;
  column-gap: 16px;
  row-gap: 10px;
}

/* Le conteneur intermédiaire disparaît de la mise en page — ses enfants
   deviennent les cases de la grille ci-dessus. Sans ça, le titre resterait
   prisonnier du même bloc que les pastilles et ne pourrait pas passer
   au-dessus de l'image. */
.sb-io .sb-io__group-content {
  display: contents;
}

.sb-io .sb-io__title {
  grid-area: titre;
  font-family: var(--ep-ui);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-foreground);
  margin: 0;
}

/* La valeur choisie remonte à côté du titre : c'est la même information
   que « CHOOSE YOUR FRAME », lue d'un seul coup d'œil. */
.sb-io .sb-io__selected-label {
  grid-area: valeur;
  justify-self: end;
  font-family: var(--ep-ui);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  margin: 0;
  color: var(--color-foreground);
  color: rgb(var(--color-foreground-rgb) / 0.55);
}

.sb-io .sb-io__selected-label span {
  color: var(--color-foreground);
}

.sb-io .sb-io__product-thumb {
  grid-area: image;
  width: 100%;
  min-width: 0;
  height: auto;
  aspect-ratio: 3 / 2;
  border: 0;
  border-radius: 0;
  background: var(--ep-paper);
}

/* `cover` recadrait la photo : une branche de monture, cadrée en carré,
   perdait ses deux extrémités. Ces images sont des détourages sur fond
   clair — elles se montrent en entier ou elles ne servent à rien.

   `multiply` fait disparaître le blanc du PNG dans le papier, au lieu de
   poser un rectangle blanc au milieu d'une page crème. Même traitement que
   .ep-row__thumb--contain, pour la même raison : les photos produit du
   catalogue sont détourées sur blanc, pas sur transparent. */
.sb-io .sb-io__product-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  mix-blend-mode: multiply;
}

.sb-io .sb-io__swatches {
  grid-area: choix;
  gap: 10px;
}

.sb-io .sb-io__swatch {
  border-color: rgb(var(--color-foreground-rgb) / 0.18);
}

.sb-io .sb-io__swatch[aria-pressed='true'] {
  border-color: var(--color-foreground);
  box-shadow: 0 0 0 2px var(--ep-paper), 0 0 0 3px var(--color-foreground);
}

/* Pastille alimentée par la PHOTO du produit groupé, faute d'entrée dans
   le métaobjet product_swatches (qui est vide sur cette boutique).

   Ces clichés sont des verres photographiés au centre d'un fond blanc : le
   verre n'occupe qu'environ 40 % de la largeur et 60 % de la hauteur. En
   `cover`, le rond de 44 px montrait surtout du blanc, avec une tache de
   couleur au milieu — cinq pastilles quasi identiques. On recadre donc
   dans l'image jusqu'à ce que le verre remplisse le rond : c'est la teinte
   qu'on vient choisir, pas le cadrage du photographe.

   210 % de la hauteur : mesuré sur les cinq verres Razor, le plus étroit
   (98AR) occupe 33 % de la largeur et 58 % de la hauteur. À ce facteur, il
   déborde du rond dans les deux sens, donc plus aucun angle blanc. */
.sb-io .sb-io__swatch--photo {
  background-size: auto 210%;
  background-position: center 50%;
}

/* Repli texte, pour une valeur encore sans image. */
.sb-io .sb-io__swatch.is-text {
  border-radius: 0;
  background: transparent;
  font-family: var(--ep-ui);
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  color: var(--color-foreground);
}

.sb-io .sb-io__hint {
  grid-area: note;
  font-family: var(--ep-ui);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.5;
  margin: 0;
}

/* ── Page à propos : correctifs de mise en page ────────────────────────
   Trois réglages posés après la mise en ligne de la page, en regardant
   le rendu réel plutôt que la maquette.                                 */

/* ÉQUIPE SANS PORTRAIT. Le bloc retire lui-même le cadre quand aucune
   image n'est déposée (voir ep-member.liquid) ; ici on lui donne une
   tenue qui ne ressemble pas à une carte amputée de sa photo, mais à un
   choix : un filet en tête, le rôle en petites capitales, le nom en
   corps de titre. Le jour où un portrait arrive, la classe disparaît et
   la carte reprend sa forme d'origine sans rien changer ici. */
.ep-member--noim {
  padding-block-start: 20px;
  border-block-start: 1px solid var(--color-foreground);
}

.ep-member--noim .ep-member__m {
  margin-block-start: 0;
}

/* Sans photo, le rôle passe devant : c'est lui qui distingue les trois
   colonnes, et il est le seul renseignement confirmé pour deux d'entre
   elles. */
.ep-member--noim .ep-member__r {
  display: block;
  order: -1;
  margin-block-end: 14px;
  font-family: var(--ep-ui);
  font-size: var(--font-size--2xs, 0.75rem);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ep-deep);
}

.ep-member--noim .ep-member__m {
  display: flex;
  flex-direction: column;
}

.ep-member--noim .ep-member__n {
  font-family: var(--ep-ui);
  font-size: var(--font-size--xl, 1.25rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-block-end: 10px;
}

/* 34ch coupait la phrase en lignes de trois ou quatre mots dans une
   colonne qui en offrait bien plus. */
.ep-member--noim .ep-member__p {
  margin: 0;
  max-inline-size: 44ch;
}

/* FAQ. La réponse héritait de toute la largeur de la bande — plus de
   1400 px de ligne, illisible — pendant que la question, elle, gardait
   sa colonne. On ramène la réponse à une mesure de lecture, alignée sur
   le début de la question plutôt que sur le bord de la page. */
.ep-band .accordion-row__content,
.ep-band details[open] .accordion-row__content {
  max-inline-size: 68ch;
}



/* ── Page à propos : seconde passe ─────────────────────────────────────
   Corrections faites en regardant la page publiée, pas la maquette.     */

/* Chapeau de plusieurs paragraphes : on aligne par le haut. Voir le
   commentaire de ep-band.liquid — le décompte s'y fait, parce que le CSS
   ne sait pas compter des paragraphes. */
.ep-band__head--tall {
  align-items: flex-start;
}

/* LE CHAPEAU LONG PASSE EN DEUX COLONNES.
   Aligner par le haut ne suffisait pas. La rangée d'en-tête pose le titre
   à gauche, plafonné à 24ch — 340 px — et le chapeau à droite, figé à
   380 px, les deux repoussés aux extrémités par `space-between`. Sur une
   bande de 1409 px, ça laisse 689 px de vide au milieu. Deux lignes de
   chapeau, ce vide se lit comme de l'air ; trois paragraphes hauts de
   408 px, il se lit comme un trou — c'est ce que la page montrait.

   Le chapeau prend donc toute la largeur restante et se partage en deux
   colonnes. Chacune retombe autour de 470 px, soit ~72 caractères : la
   bonne mesure. Et la hauteur du bloc est divisée par deux, ce qui règle
   du même coup les 262 px de vide sous le titre — les deux colonnes
   arrivent à hauteur de titre au lieu de le dominer. */
.ep-band__head--tall .ep-band__lede {
  flex: 1 1 560px;
  max-inline-size: none;
  columns: 2;
  column-gap: clamp(28px, 3vw, 56px);
}

/* Le chapeau court n'a qu'un paragraphe : la règle générale lui met
   `margin: 0`, ce qui collait les trois paragraphes du récit les uns aux
   autres, sans respiration. */
.ep-band__head--tall .ep-band__lede p + p {
  margin-block-start: 1em;
}

@media screen and (max-width: 900px) {
  .ep-band__head--tall .ep-band__lede {
    columns: 1;
  }
}


/* ── Formulaire de contact : largeur des champs ────────────────────────
   Imbriqué dans un groupe à deux colonnes, le formulaire d'Atelier garde
   sa largeur intrinsèque au lieu de remplir la colonne : les champs Nom
   et Courriel tombaient à 130 px dans une colonne qui en offrait 761. On
   ne voit pas ce qu'on tape. C'est le seul défaut d'usage réel du
   formulaire, et la seule règle qu'il fallait écrire.

   Mesuré après : 373 px pour Nom et Courriel, 761 px pour Téléphone et
   Message.

   RIEN D'AUTRE N'EST RÉÉCRIT ICI. J'avais habillé les champs — fond
   transparent, filet en bas — et le résultat était un formulaire à
   2,74:1 sur fond noir, sous le minimum de 3:1, avec un bouton noir sur
   noir. La cascade d'Atelier reprenait le dessus sur chaque tentative de
   correction. La bonne réponse n'était pas une règle plus spécifique
   mais de rendre la section au papier, où le formulaire d'Atelier est
   déjà juste : champs blancs lisibles, bouton noir visible. */
.ep-band .contact-form,
.ep-band .contact-form__input {
  inline-size: 100%;
  max-inline-size: none;
  box-sizing: border-box;
}

/* ── Pages de politiques ───────────────────────────────────────────────
   Livraison, remboursements, confidentialité, conditions. Shopify les
   rend depuis son propre balisage — .shopify-policy__container et ses
   deux enfants — qui ne traverse aucune section du thème. Aucune des
   règles de largeur ni d'échelle du site ne s'y applique donc, et
   personne ne l'avait remarqué parce que ces pages ne se visitent que
   quand quelque chose ne va pas.

   Ce qu'on y trouvait, mesuré :

     · conteneur plafonné à 434 px de large sur un écran de 1489 ;
     · titre de page à 120 px dans une colonne de 394 — « Shipping » seul
       étant plus large que la colonne, overflow-wrap le coupait au
       milieu : « Shippin / g policy » ;
     · titres de section à 72 px, texte courant à 12 px. Un rapport de
       6 pour 1 entre un titre et son paragraphe ; le corps d'un document
       qu'on lit pour comprendre un remboursement était plus petit que la
       mention légale du pied de page.

   Un document de politique se lit d'un bout à l'autre. Il lui faut une
   mesure de lecture, une échelle sobre et de la place. Le reste du site
   garde ses grands titres — c'est ici qu'ils n'ont rien à faire.

   Une seule règle sert les quatre pages.                                 */
.shopify-policy__container {
  /* Une longueur explicite, pas des `ch`. L'unité ch se calcule sur la
     police du conteneur — ici héritée à 12 px — et 74ch n'a donné que
     494 px au lieu des ~700 attendus. Mesuré avant de le corriger.
     688 px moins les marges laissent ~640 px de texte, soit ~72
     caractères par ligne à 16 px. */
  max-inline-size: min(100%, 688px);
  padding-inline: 24px;
  padding-block: clamp(48px, 6vw, 96px);
}

.shopify-policy__title {
  margin-block-end: clamp(28px, 4vw, 48px);
  padding-block-end: clamp(20px, 3vw, 32px);
  border-block-end: 1px solid rgb(var(--color-foreground-rgb) / 0.15);
}

/* 3,25rem au lieu de 120 px : le titre tient sur une ligne dans la
   colonne, donc plus aucune coupure au milieu d'un mot. */
.shopify-policy__title h1 {
  font-size: clamp(2rem, 4vw, 3.25rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin: 0;
}

/* Une échelle qui descend au lieu de s'effondrer : 1,75rem, 1,25rem,
   1rem. Le titre reste deux fois le corps, pas six. */
.shopify-policy__body h2 {
  font-size: clamp(1.4rem, 2.4vw, 1.75rem);
  line-height: 1.2;
  letter-spacing: -0.015em;
  margin-block: clamp(40px, 5vw, 64px) 14px;
}

.shopify-policy__body h3 {
  font-size: clamp(1.1rem, 1.7vw, 1.25rem);
  line-height: 1.3;
  margin-block: 32px 10px;
}

/* Le corps passe de 12 à 16 px — la taille de lecture par défaut d'un
   navigateur, et le minimum décent pour un texte qu'on parcourt en
   entier. */
.shopify-policy__body :is(p, li) {
  font-family: var(--ep-ui);
  font-size: 1rem;
  line-height: 1.7;
}

.shopify-policy__body p {
  margin-block: 0 1em;
}

.shopify-policy__body :is(ul, ol) {
  margin-block: 0 1.4em;
  padding-inline-start: 1.3em;
}

.shopify-policy__body li {
  margin-block-end: 0.5em;
}

.shopify-policy__body li::marker {
  color: var(--ep-accent);
}

/* Les montants et les délais sont ce qu'on vient chercher. */
.shopify-policy__body strong {
  font-weight: 700;
  color: var(--color-foreground);
}

.shopify-policy__body a {
  color: var(--ep-deep);
  text-underline-offset: 0.2em;
}

.shopify-policy__body hr {
  margin-block: clamp(36px, 4vw, 56px);
  border: 0;
  border-block-start: 1px solid rgb(var(--color-foreground-rgb) / 0.15);

/* =========================================
   PROGRAMS - TRAINING PATH ARROWS
   ========================================= */

#block-group_BFKWRx,
#block-group_eVgfCa,
#block-group_NeQyrr,
#block-group_gE9AAt {
  position: relative;
}

/* Learn It */
#block-group_BFKWRx::after {
  content: "\2192";
  position: absolute;
  right: -18px;
  top: 35px;
  font-size: 22px;
  font-weight: 300;
  color: #ff3001;
  z-index: 5;
}

/* Develop It */
#block-group_eVgfCa::after {
  content: "\2192";
  position: absolute;
  right: -18px;
  top: 35px;
  font-size: 22px;
  font-weight: 300;
  color: #ff3001;
  z-index: 5;
}

/* Train It */
#block-group_NeQyrr::after {
  content: "\2192";
  position: absolute;
  right: -18px;
  top: 35px;
  font-size: 22px;
  font-weight: 300;
  color: #ff3001;
  z-index: 5;
}

/* Apply It - NO arrow */
#block-group_gE9AAt::after {
  content: none;
}

/* Hide OUR PROMISE label only */
.ep-promise .ep-eyebrow,
.ep-promise .ep-kicker,
.ep-promise .ep-overline {
  display: none !important;
}