/* ==========================================================================
   Layer Add — feuille de base
   Jetons, typographie, primitives partagées, dispositif du calque.
   ========================================================================== */

@font-face {
  font-family: "Archivo";
  src: url("/assets/fonts/archivo-var.woff2") format("woff2-variations"),
       url("/assets/fonts/archivo-var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --encre: #0E1116;
  --papier: #FAF9F6;

  /* Les cinq références — deux plans PASTEL, un croisement VIF.
     Le vif n'apparaît qu'au croisement ; les plans restent pastel. */
  --mt01-a: #D2FAF5; --mt01-b: #F2BDF2; --mt01-x: #0F58C0;   /* Metformine, bleu de méthylène (= accent du thème) — foncé pour la lisibilité sur fond clair */
  --st01-a: #FAD2DC; --st01-b: #E8F2BD; --st01-x: #D11112;   /* Statines, rouge Congo */
  --ip01-a: #D2FADA; --ip01-b: #BDD1F2; --ip01-x: #11D199;   /* IPP, vert de malachite */
  --co01-a: #FAD2E0; --co01-b: #E4BDF2; --co01-x: #D11183;   /* Contraception, fuchsine */
  --bb01-a: #FAEAD2; --bb01-b: #ECF2BD; --bb01-x: #D1A111;   /* Bêta-bloquants, jaune de Martius */

  /* Référence courante — MT01 par défaut, hors contexte produit. */
  --ref-a: var(--mt01-a);
  --ref-b: var(--mt01-b);
  --ref-x: var(--mt01-x);

  /* Le calque signature emploie les deux plans pastel de la référence. */
  --calque-a: var(--ref-a);
  --calque-b: var(--ref-b);

  /* La couleur d'action = le croisement (#0F58C0 par défaut). */
  --accent: var(--ref-x);
  --accent-vif: #3A82E0;

  /* Teinte pleine par référence = son croisement. */
  --st01: var(--st01-x);
  --mt01: var(--mt01-x);
  --ip01: var(--ip01-x);
  --co01: var(--co01-x);
  --bb01: var(--bb01-x);

  --gris-1: #6B7280;
  --gris-2: #E5E4E0;
  --succes: #0E7A4B;

  --gouttiere: 24px;
  --largeur: 1280px;
  --entete: 68px;
  --annonce: 36px;

  --rayon: 4px;
  --transition: 160ms cubic-bezier(.2, .6, .3, 1);
}

/* L'emblème calque, marqueur signature global : deux plans + croisement.
   L'intersection (cm-x) prend --cm ; les plans en sont des teintes claires.
   Markup = tokens.MARQUE_CALQUE. Sert de puce partout (ruban, statuts, listes). */
.calque-mark { inline-size: 16px; height: auto; flex: none; display: inline-block; vertical-align: middle; }
.calque-mark .cm-a { fill: color-mix(in srgb, var(--cm, var(--gris-1)) 22%, transparent); }
.calque-mark .cm-b { fill: color-mix(in srgb, var(--cm, var(--gris-1)) 44%, transparent); }
.calque-mark .cm-x { fill: var(--cm, var(--gris-1)); }

/* Bascule de référence : chaque porteur de data-ref adopte son triplet.
   Sur le logo, le croisement (--ref-x) prend la couleur du produit. */
[data-ref="MT01"] { --ref-a: var(--mt01-a); --ref-b: var(--mt01-b); --ref-x: var(--mt01-x); }
[data-ref="ST01"] { --ref-a: var(--st01-a); --ref-b: var(--st01-b); --ref-x: var(--st01-x); }
[data-ref="IP01"] { --ref-a: var(--ip01-a); --ref-b: var(--ip01-b); --ref-x: var(--ip01-x); }
[data-ref="CO01"] { --ref-a: var(--co01-a); --ref-b: var(--co01-b); --ref-x: var(--co01-x); }
[data-ref="BB01"] { --ref-a: var(--bb01-a); --ref-b: var(--bb01-b); --ref-x: var(--bb01-x); }

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--entete) + 16px);
}

body {
  margin: 0;
  background: var(--papier);
  color: var(--encre);
  font-family: "Archivo", "Helvetica Neue", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  font-weight: 400;
  font-variant-numeric: tabular-nums lining-nums;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; }

::selection { background: var(--calque-b); color: var(--encre); }

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}

/* --------------------------------------------------------------- structure */

.contenu {
  width: 100%;
  max-width: var(--largeur);
  margin-inline: auto;
  padding-inline: var(--gouttiere);
}

.section { padding-block: clamp(56px, 6.4vw, 104px); }
.section--serre { padding-block: clamp(40px, 4.4vw, 68px); }
.section--encre { background: var(--encre); color: var(--papier); }
.section--gris { background: #F2F1ED; }

.entete-section {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: clamp(28px, 3vw, 46px);
  border-bottom: 1px solid var(--gris-2);
  padding-bottom: 18px;
}
.section--encre .entete-section { border-bottom-color: rgba(250, 249, 246, .22); }
.entete-section > div { max-width: 62ch; }
.entete-section .etiquette { color: var(--gris-1); margin-bottom: 10px; display: block; }
.section--encre .entete-section .etiquette { color: var(--calque-b); }

/* ------------------------------------------------------------ typographie */

.display {
  font-size: clamp(44px, 6.2vw, 92px);
  font-weight: 700;
  line-height: .98;
  letter-spacing: -.02em;
  margin: 0;
  text-wrap: balance;
}

.titre {
  font-size: clamp(30px, 3.4vw, 46px);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -.015em;
  margin: 0;
  text-wrap: balance;
}

.sous {
  font-size: 23px;
  font-weight: 600;
  line-height: 1.32;
  letter-spacing: -.01em;
  margin: 0;
}

.corps {
  font-size: 17px;
  font-weight: 400;
  line-height: 1.6;
  margin: 0;
}
.corps--gris { color: var(--gris-1); }

.petit { font-size: 14px; font-weight: 500; line-height: 1.5; margin: 0; }

.etiquette {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  line-height: 1.3;
  margin: 0;
}

.prix {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -.01em;
}
.prix__barre { color: var(--gris-1); font-weight: 500; text-decoration: line-through; font-size: 16px; }

/* ---------------------------------------------------------------- boutons */

.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 28px;
  border: 1px solid transparent;
  border-radius: var(--rayon);
  background: transparent;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -.005em;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--transition), color var(--transition),
              border-color var(--transition), transform var(--transition);
}
.bouton:active { transform: translateY(1px); }

.bouton--achat {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 1px 0 rgba(14, 17, 22, .18);
}
.bouton--achat:hover { background: var(--accent-vif); }

.bouton--fantome {
  border-color: currentColor;
  color: var(--encre);
}
.bouton--fantome:hover { background: var(--encre); color: var(--papier); }
.section--encre .bouton--fantome { color: var(--papier); }
.section--encre .bouton--fantome:hover { background: var(--papier); color: var(--encre); }

.bouton--large { width: 100%; }
.bouton--grand { padding: 19px 40px; font-size: 18px; }

.lien-souligne {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.lien-souligne:hover { text-decoration-thickness: 2px; }

.lien-fleche {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  border-bottom: 2px solid currentColor;
  padding-bottom: 2px;
  white-space: nowrap;
}
.lien-fleche:hover { color: var(--accent); }

/* ----------------------------------------------------------------- grilles */

.grille-2, .grille-3, .grille-4, .grille-5 {
  display: grid;
  gap: clamp(16px, 1.6vw, 26px);
}
.grille-2 { grid-template-columns: repeat(2, 1fr); }
.grille-3 { grid-template-columns: repeat(3, 1fr); }
.grille-4 { grid-template-columns: repeat(4, 1fr); }
.grille-5 { grid-template-columns: repeat(5, 1fr); }

/* ------------------------------------------------------------------ cartes */

.carte {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--gris-2);
  border-radius: var(--rayon);
  overflow: hidden;
  transition: border-color var(--transition), transform var(--transition),
              box-shadow var(--transition);
}
.carte__media { position: relative; overflow: hidden; background: var(--gris-2); }
.carte__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms cubic-bezier(.2,.6,.3,1); }
.carte__corps { padding: 20px 20px 24px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.carte--lien:hover { border-color: var(--encre); box-shadow: 0 14px 34px -22px rgba(14, 17, 22, .6); }
.carte--lien:hover .carte__media img { transform: scale(1.04); }

/* ------------------------------------------------- le calque (signature) */

.calque { position: relative; }
.calque::before,
.calque::after {
  content: "";
  position: absolute;
  pointer-events: none;
  mix-blend-mode: multiply;
}
.calque::before { background: var(--calque-a); }
.calque::after  { background: var(--calque-b); }

/* -------------------------------------------------- le calque, en angle --- */
/* Deux plans pastel TRANSLUCIDES qui se superposent dans l'angle haut-droit
   (on voit la carte à travers : impression de calque). À leur intersection
   exacte, le croisement --ref-x en APLAT PLEIN — jamais un mélange par
   transparence, jamais un multiply. Le croisement (.calque-x__x) est un enfant
   du plan B : il est calé sur le plan A (mêmes dimensions) puis rogné par le
   plan B (overflow:hidden). Il EST donc, géométriquement, l'intersection des
   deux plans. Au survol les plans glissent l'un vers l'autre ; le croisement
   les suit car sa translation vaut « celle de A moins celle de B » — ce qui
   annule l'entraînement du plan B et le repose pile sur le plan A. */
.calque-x {
  position: absolute; top: 0; right: 0;
  width: 60px; height: 60px;
  z-index: 0; pointer-events: none;
}
.calque-x span { position: absolute; display: block; width: 40px; height: 40px; }
.calque-x__a {
  top: 0; right: 0;
  background: color-mix(in srgb, var(--calque-a) 70%, transparent);
  transform: translate(var(--cx-ax, 0px), var(--cx-ay, 0px));
}
.calque-x__b {
  top: 20px; right: 20px; overflow: hidden;
  background: color-mix(in srgb, var(--calque-b) 70%, transparent);
  transform: translate(var(--cx-bx, 0px), var(--cx-by, 0px));
}
.calque-x__x {
  top: -20px; right: -20px;
  background: var(--ref-x);
  transform: translate(calc(var(--cx-ax, 0px) - var(--cx-bx, 0px)),
                       calc(var(--cx-ay, 0px) - var(--cx-by, 0px)));
}
@media (prefers-reduced-motion: no-preference) {
  .calque-x__a, .calque-x__b, .calque-x__x {
    transition: transform .5s cubic-bezier(.2, .6, .3, 1);
  }
}
/* Au survol de la carte / du pilier, les deux plans convergent : le
   recouvrement grandit et se déplace, le croisement reste à leur intersection. */
.g-carte:hover .calque-x,
.pilier:hover .calque-x {
  --cx-ax: -8px; --cx-ay: 8px;
  --cx-bx: 8px;  --cx-by: -8px;
}

/* bande séparatrice pleine largeur, 120 px, posée sur une photo */
.bande-calque {
  position: relative;
  height: 120px;
  overflow: hidden;
  isolation: isolate;
  background: var(--encre);
}
.bande-calque img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bande-calque::before { inset: 0; opacity: .60; }
.bande-calque::after  { left: 0; top: 0; bottom: 0; width: 44%; opacity: .56; }
.bande-calque__texte {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  align-items: center;
  gap: 18px;
  color: var(--encre);
  mix-blend-mode: normal;
}

/* --------------------------------------------------------- bandeau défilant */

.bandeau-defilant {
  position: relative;
  overflow: hidden;
  background: var(--encre);
  color: var(--papier);
  padding-block: 17px;
  border-block: 1px solid rgba(250, 249, 246, .14);
}
.bandeau-defilant__piste {
  display: flex;
  width: max-content;
  animation: defile 64s linear infinite;
}
.bandeau-defilant:hover .bandeau-defilant__piste,
.bandeau-defilant:focus-within .bandeau-defilant__piste { animation-play-state: paused; }
.bandeau-defilant__serie { display: flex; flex: none; }
.bandeau-defilant__item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-inline: 22px;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  white-space: nowrap;
}
.bandeau-defilant__item b { font-weight: 700; color: var(--calque-b); }
.bandeau-defilant__item::after {
  content: "";
  width: 15px; height: 12px; flex: none;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 15"><rect x="0" y="1" width="12" height="9" fill="%234DE1E8" opacity=".3"/><rect x="6" y="5" width="12" height="9" fill="%234DE1E8" opacity=".3"/><rect x="6" y="5" width="6" height="5" fill="%234DE1E8"/></svg>') center/contain no-repeat;
}
@keyframes defile { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); } }

@media (prefers-reduced-motion: reduce) {
  .bandeau-defilant__piste { animation: none; }
  html { scroll-behavior: auto; }
}

/* ------------------------------------------------------ bandeau d'annonce */

.annonce {
  background: var(--encre);
  color: var(--papier);
  height: var(--annonce);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .01em;
}
.annonce p { margin: 0; display: flex; align-items: center; gap: 10px; }
.annonce__sep { color: var(--calque-b); }
.annonce__rangee { position: relative; display: flex; align-items: center; justify-content: center; gap: 16px; }

/* Sélecteur de langue (barre du haut, fond sombre) */
.lang { display: inline-flex; align-items: center; gap: 1px; }
.annonce .lang { position: absolute; right: 0; }
.lang__lien {
  display: inline-block; font-size: 12px; font-weight: 700; line-height: 1;
  letter-spacing: .03em; text-decoration: none; padding: 4px 5px; border-radius: 4px;
  color: rgba(250, 249, 246, .55); transition: color var(--transition);
}
.lang__lien:hover { color: var(--papier); }
.lang__lien.est-actif { color: var(--papier); }
@media (max-width: 560px) { .lang__lien { padding: 4px 3px; font-size: 11px; } }

/* ------------------------------------------------------------------ entête */

.entete {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(250, 249, 246, .94);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--gris-2);
}
.entete__rangee {
  height: var(--entete);
  display: grid;
  grid-template-columns: auto 1fr auto auto auto;
  grid-template-areas: "logo nav recherche compte panier";
  align-items: center;
  gap: 20px;
}
.entete .logo { grid-area: logo; }
.entete .nav { grid-area: nav; }
.entete .recherche { grid-area: recherche; }
.entete .compte { grid-area: compte; }
.entete .panier { grid-area: panier; }
.entete__burger { grid-area: burger; }

/* ---- le logotype : deux plans pleins qui se croisent (aucune transparence) */
.logo { display: inline-flex; align-items: center; text-decoration: none; color: var(--encre); }
.logotype { display: block; height: 30px; width: auto; }
/* Dans l'entête : logotype agrandi (~44px) pour que le croisement des deux
   plans se lise nettement ; le pied conserve sa taille de signature. */
.entete .logotype { height: 44px; }
.logotype .plan-a { fill: var(--ref-a); }
.logotype .plan-b { fill: var(--ref-b); }
.logotype .croisement { fill: var(--ref-x); }
.logotype .lettres { fill: var(--encre); }
.logotype .plan-a, .logotype .plan-b, .logotype .croisement {
  transition: fill var(--transition);
}

/* ---- navigation plateforme : Savoir · Échanger · S'équiper -------------- */
.nav { display: flex; align-items: center; gap: 20px; }
.nav a {
  text-decoration: none;
  font-size: 15px;
  font-weight: 600;
  padding: 6px 0;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.nav a:hover, .nav a[aria-current="page"] { border-bottom-color: var(--accent); color: var(--accent); }

/* L'atlas : l'entrée forte, une base documentaire assumée.
   Sélecteur porté à .nav .nav__atlas (0,2,0) pour l'emporter sur .nav a
   (0,1,1) : sans cela le padding horizontal de la pastille tombait à 0 et
   tronquait « 8 » et « indexés » contre les coins arrondis. */
.nav .nav__atlas {
  display: inline-flex; align-items: baseline; gap: 7px;
  padding: 8px 16px;
  border: 0; border-radius: 999px;
  background: var(--encre); color: var(--papier);
  white-space: nowrap; flex: none;
  transition: background var(--transition);
}
.nav .nav__atlas:hover, .nav .nav__atlas[aria-current="page"] {
  background: var(--accent); border-bottom-color: transparent; color: #fff;
}
.nav__atlas-nombre { font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums lining-nums; letter-spacing: -.01em; }
.nav__atlas-mot { font-size: 13px; font-weight: 600; }

/* Le menu déroulant de la gamme (survol + focus, fermé par défaut). */
.menu { position: relative; display: inline-flex; align-items: center; }
.menu__declencheur { display: inline-flex; align-items: center; gap: 6px; }
.menu__declencheur::after {
  content: ""; width: 7px; height: 7px; flex: none;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform var(--transition);
}
.menu:hover .menu__declencheur::after,
.menu:focus-within .menu__declencheur::after,
.menu[data-ouvert="1"] .menu__declencheur::after { transform: translateY(1px) rotate(-135deg); }

.menu__panneau {
  position: absolute; top: calc(100% + 12px); left: 50%; transform: translateX(-50%);
  min-width: 280px; z-index: 70;
  background: #fff; border: 1px solid var(--gris-2); border-radius: 8px;
  box-shadow: 0 26px 52px -30px rgba(14, 17, 22, .8);
  padding: 8px; display: none;
}
.menu__panneau::before {
  content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px;
}
.menu:hover .menu__panneau,
.menu:focus-within .menu__panneau,
.menu[data-ouvert="1"] .menu__panneau { display: block; }
.menu__panneau ul { list-style: none; margin: 0; padding: 0; }
.menu__panneau li a {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 10px; border-radius: 5px;
  text-decoration: none; border-bottom: 0;
}
.menu__panneau li a:hover { background: #F2F1ED; }
.menu__pack {
  width: 42px; height: 42px; flex: none; object-fit: contain;
  background: #fff; border: 1px solid var(--gris-2); border-radius: 5px; padding: 3px;
}
.menu__nom { flex: 1; font-size: 15px; font-weight: 700; }
.menu__prix { font-size: 14px; font-weight: 700; color: var(--gris-1); font-variant-numeric: tabular-nums; white-space: nowrap; }
.menu__tout { margin-top: 4px; border-top: 1px solid var(--gris-2); padding-top: 4px; }
.menu__tout a { font-size: 14px; font-weight: 700; color: var(--accent); }
.menu__tout a:hover { background: #F2F1ED; }

.recherche { position: relative; display: flex; width: 278px; max-width: 278px; margin-left: auto; }
.recherche input {
  width: 100%;
  height: 42px;
  padding: 0 84px 0 36px;
  font: inherit;
  font-size: 15px;
  color: var(--encre);
  background: #fff;
  border: 1px solid var(--gris-2);
  border-radius: var(--rayon);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.recherche input::placeholder { color: var(--gris-1); }
.recherche input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(17, 104, 209, .16); }
.recherche__loupe { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); width: 17px; height: 17px; stroke: var(--gris-1); fill: none; stroke-width: 2; }
.recherche button {
  position: absolute; right: 4px; top: 4px; bottom: 4px;
  padding: 0 12px;
  border: 0; border-radius: 3px;
  background: var(--encre); color: var(--papier);
  font-size: 13px; font-weight: 700; cursor: pointer;
}
.recherche button:hover { background: #262C36; }
.recherche__liste {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0;
  background: #fff; border: 1px solid var(--gris-2);
  border-radius: var(--rayon);
  box-shadow: 0 22px 44px -26px rgba(14, 17, 22, .7);
  max-height: 320px; overflow-y: auto; z-index: 80; display: none;
}
.recherche__liste[data-ouvert="1"] { display: block; }
.recherche__liste button {
  position: static; display: block; width: 100%; text-align: left;
  padding: 10px 14px; background: none; color: var(--encre);
  font-size: 15px; font-weight: 500; border-bottom: 1px solid var(--gris-2);
}
.recherche__liste button:last-child { border-bottom: 0; }
.recherche__liste button:hover, .recherche__liste button[data-actif="1"] { background: #F2F1ED; }
.recherche__liste em { font-style: normal; font-weight: 700; }

.panier { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; font-size: 15px; font-weight: 600; white-space: nowrap; }
.panier:hover { color: var(--accent); }
.panier svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.panier__nombre {
  min-width: 21px; height: 21px; padding: 0 6px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent); color: #fff;
  border-radius: 11px; font-size: 12px; font-weight: 700;
}
.panier__nombre[hidden] { display: none; }

.compte { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; font-size: 15px; font-weight: 600; white-space: nowrap; }
.compte:hover { color: var(--accent); }
.compte svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; }

.entete__burger { display: none; }

/* Largeurs intermédiaires : logo + nav + recherche + compte + panier ne
   tiennent pas d'un seul tenant sans serrer. On descend la recherche sur une
   seconde rangée pleine largeur ; la nav plateforme reste alignée au-dessus. */
@media (min-width: 1181px) and (max-width: 1260px) {
  :root { --entete: 120px; }
  .entete__rangee {
    height: auto;
    padding-block: 11px;
    grid-template-columns: auto 1fr auto auto;
    grid-template-areas:
      "logo nav compte panier"
      "recherche recherche recherche recherche";
    row-gap: 12px;
  }
  .recherche { width: 100%; max-width: 520px; margin-left: 0; }
}

/* -------------------------------------------------------------- pied de page */

.pied { background: var(--encre); color: var(--papier); }

/* Bande signature : le MÊME dispositif que le calque d'angle, en pleine largeur.
   Deux plans pastel TRANSLUCIDES (--ref-a, --ref-b) taillés en biais se
   superposent — on voit le papier au travers, impression de calque — et à leur
   zone de recouvrement le croisement --ref-x en APLAT PLEIN. Le croisement
   (.pied__bande-x) est un enfant du plan B rogné à la forme du plan A : il EST
   l'intersection des deux biais. Les couleurs suivent la référence de la page
   (--ref-*), portée par data-ref sur le <footer>. */
.pied__bande {
  position: relative; height: 84px; overflow: hidden;
  background: var(--papier);
}
.pied__bande span { position: absolute; inset: 0; display: block; }
.pied__bande-a {
  background: color-mix(in srgb, var(--ref-a) 72%, transparent);
  clip-path: polygon(0 0, 100% 0, 100% 46%, 0 70%);
}
.pied__bande-b {
  background: color-mix(in srgb, var(--ref-b) 72%, transparent);
  clip-path: polygon(0 40%, 100% 16%, 100% 100%, 0 100%);
}
.pied__bande-x {                       /* enfant de -b : rogné au plan A -> A ∩ B */
  background: var(--ref-x);
  clip-path: polygon(0 0, 100% 0, 100% 46%, 0 70%);
}
.pied__haut { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr; gap: 32px; padding-block: 56px 44px; }
.pied__signature { max-width: 34ch; }
.pied .logo { color: var(--papier); }
/* Sur le pied sombre, les lettres restent en ENCRE : elles sont posées sur les
   plans pastel clairs du logo (clair sur clair serait illisible). Ce sont les
   plans qui ressortent sur le fond sombre. Logo agrandi, comme l'entête. */
.pied .logotype { height: 40px; }
.pied .logotype .lettres { fill: var(--encre); }
.pied__titre { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--calque-b); margin: 0 0 14px; }
.pied ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.pied ul a { text-decoration: none; font-size: 15px; color: rgba(250, 249, 246, .78); }
.pied ul a:hover { color: var(--papier); text-decoration: underline; text-underline-offset: 3px; }
.pied__bas {
  display: flex; flex-wrap: wrap; gap: 18px 32px;
  align-items: center; justify-content: space-between;
  padding-block: 22px; border-top: 1px solid rgba(250, 249, 246, .16);
  font-size: 13px; color: rgba(250, 249, 246, .62);
}
.pied__paiement { display: flex; gap: 10px; flex-wrap: wrap; }
.pied__paiement span {
  border: 1px solid rgba(250, 249, 246, .3);
  border-radius: 3px; padding: 4px 10px;
  font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: rgba(250, 249, 246, .82);
}

/* ------------------------------------------------------------------ divers */

.fil { padding-block: 16px; font-size: 13px; color: var(--gris-1); }
.fil a { text-decoration: none; }
.fil a:hover { text-decoration: underline; }

.evite { position: absolute; left: -9999px; }
.evite:focus { left: 16px; top: 16px; z-index: 200; background: var(--accent); color: #fff; padding: 10px 16px; border-radius: var(--rayon); }

.tableau { width: 100%; border-collapse: collapse; }
.tableau th, .tableau td { text-align: left; padding: 14px 16px; border-bottom: 1px solid var(--gris-2); font-size: 16px; }
.tableau th { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--gris-1); }

.accordeon { border-top: 1px solid var(--gris-2); }
.accordeon details { border-bottom: 1px solid var(--gris-2); }
.accordeon summary {
  list-style: none; cursor: pointer;
  padding: 20px 44px 20px 0; position: relative;
  font-size: 19px; font-weight: 600; letter-spacing: -.01em;
}
.accordeon summary::-webkit-details-marker { display: none; }
.accordeon summary::after {
  content: ""; position: absolute; right: 10px; top: 27px;
  width: 11px; height: 11px;
  border-right: 2px solid var(--encre); border-bottom: 2px solid var(--encre);
  transform: rotate(45deg); transition: transform var(--transition);
}
.accordeon details[open] summary::after { transform: rotate(-135deg); }
.accordeon details[open] summary { color: var(--accent); }
.accordeon details[open] summary::after { border-color: var(--accent); }
.accordeon p { margin: 0 0 22px; max-width: 76ch; color: #2A2F38; }

.etoiles { display: inline-flex; gap: 2px; color: var(--encre); }
.etoiles svg { width: 15px; height: 15px; fill: currentColor; }

/* ------------------------------------------------------------- responsive */

@media (max-width: 1440px) {
  :root { --largeur: 1240px; }
}

@media (max-width: 1180px) {
  .entete__rangee {
    grid-template-columns: auto minmax(140px, 1fr) auto auto auto;
    grid-template-areas: "logo recherche compte panier burger";
    gap: 12px;
  }
  .compte span { display: none; }
  .nav { display: none; }
  .entete__burger {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; border: 1px solid var(--gris-2);
    background: #fff; border-radius: var(--rayon); cursor: pointer;
  }
  .entete__burger svg { width: 18px; height: 18px; stroke: var(--encre); stroke-width: 2; }
}

@media (max-width: 1024px) {
  :root { --gouttiere: 20px; }
  .grille-5 { grid-template-columns: repeat(3, 1fr); }
  .grille-4 { grid-template-columns: repeat(2, 1fr); }
  .pied__haut { grid-template-columns: repeat(3, 1fr); gap: 34px 28px; }
  .pied__signature { grid-column: span 3; }
}

@media (max-width: 768px) {
  body { font-size: 17px; }
  .grille-5, .grille-4, .grille-3 { grid-template-columns: repeat(2, 1fr); }
  .grille-2 { grid-template-columns: 1fr; }
  .entete-section { flex-direction: column; align-items: flex-start; gap: 14px; }
  .sous { font-size: 20px; }
  .pied__haut { grid-template-columns: repeat(2, 1fr); }
  .pied__signature { grid-column: span 2; }
  .accordeon summary { font-size: 17px; }
}

@media (max-width: 640px) {
  :root { --entete: 114px; }
  .entete__rangee {
    height: auto;
    padding-block: 11px;
    gap: 10px;
    grid-template-columns: 1fr auto auto auto;
    grid-template-areas:
      "logo compte panier burger"
      "recherche recherche recherche recherche";
  }
  .recherche { width: 100%; max-width: none; margin-left: 0; }
  .recherche input { padding-right: 88px; }
  .panier span:not(.panier__nombre) { display: none; }
  .annonce { font-size: 12px; }
  .annonce p { gap: 8px; }
  .annonce__second, .annonce__sep { display: none; }
  .heros__preuves { font-size: 11px; gap: 12px; }
  .heros__preuves li { gap: 12px; }
}

@media (max-width: 390px) {
  :root { --gouttiere: 16px; }
  .grille-5, .grille-4, .grille-3 { grid-template-columns: 1fr; }
  .bouton { padding: 14px 22px; }
}

/* ==========================================================================
   L'accueil
   ========================================================================== */

/* --------------------------------------------------------------- le héros */

.heros {
  position: relative;
  height: calc(100vh - var(--entete) - var(--annonce));
  min-height: 600px;
  max-height: 1040px;
  overflow: hidden;
  isolation: isolate;
  background: var(--encre);
}
.heros__media { position: absolute; inset: 0; display: block; }
.heros__media img { width: 100%; height: 100%; object-fit: cover; object-position: 54% 46%; }

.heros__voile {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg,
      rgba(14, 17, 22, .40) 0%,
      rgba(14, 17, 22, .04) 24%,
      rgba(14, 17, 22, .16) 44%,
      rgba(14, 17, 22, .74) 74%,
      rgba(14, 17, 22, .93) 100%);
}

.heros__bande {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: min(62%, 470px);
  display: flex; align-items: flex-end;
  padding-bottom: clamp(26px, 3.2vw, 48px);
}
.heros__bande::before { inset: 0; opacity: .52; }
.heros__bande::after  { left: 0; top: 0; bottom: 0; width: min(58%, 800px); opacity: .46; }

.heros__texte { position: relative; z-index: 3; color: #fff; }
.heros__promesse { color: rgba(255, 255, 255, .8); margin-bottom: 13px; }
.heros .display { max-width: 15ch; text-shadow: 0 2px 26px rgba(14, 17, 22, .35); }
.heros__sous { margin-top: 14px; max-width: 34ch; color: rgba(255, 255, 255, .94); font-weight: 500; }
.heros__action { margin-top: clamp(20px, 2.2vw, 28px); }
.heros__preuves {
  list-style: none; margin: 18px 0 0; padding: 0;
  display: flex; flex-wrap: wrap; align-items: center; gap: 20px;
  color: rgba(255, 255, 255, .88);
}
.heros__preuves li { display: flex; align-items: center; gap: 20px; }
.heros__preuves li + li::before {
  content: ""; width: 14px; height: 11px; flex: none;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 15"><rect x="0" y="1" width="12" height="9" fill="%23C8FF3D" opacity=".32"/><rect x="6" y="5" width="12" height="9" fill="%23C8FF3D" opacity=".32"/><rect x="6" y="5" width="6" height="5" fill="%23C8FF3D"/></svg>') center/contain no-repeat;
}

/* ------------------------------------------------------ ce que ça coûte */

.carte--cout .carte__media { isolation: isolate; }
.carte--cout .carte__media img { aspect-ratio: 4 / 3; }
.carte--cout__classe {
  position: absolute; left: 0; bottom: 0;
  background: var(--encre); color: var(--papier);
  padding: 8px 13px;
}
.carte--cout h3 { margin-top: 2px; }
.carte--cout__signe {
  margin-top: auto; padding-top: 12px;
  border-top: 1px solid var(--gris-2);
  color: var(--encre); font-weight: 600;
}

/* ---------------------------------------------------------- la gamme */

.carte--produit { border-top: 3px solid var(--teinte); }
.carte--produit__lien { display: block; }
.carte--produit__media {
  isolation: isolate; background: #fff;
  border-bottom: 1px solid var(--gris-2);
}
.carte--produit__media img { aspect-ratio: 1 / 1; object-fit: contain; padding: 6px; }
.carte--produit__media::before { top: 0; right: 0; width: 74px; height: 74px; opacity: .88; }
.carte--produit__media::after  { top: 0; right: 0; width: 32px; height: 112px; opacity: .9; }
.carte--produit__code { color: var(--teinte); }
.carte--produit h3 { font-size: 20px; line-height: 1.18; }
.carte--produit h3 a { text-decoration: none; }
.carte--produit h3 a:hover { color: var(--accent); }
.carte--produit__pied {
  margin-top: auto; padding-top: 14px;
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
}
.carte--produit .bouton { margin-top: 12px; }
.bouton.est-ajoute { background: var(--succes); }
.gamme__note { margin-top: 22px; max-width: 78ch; }

/* ------------------------------------------------------ comment ça marche */

.etape { position: relative; display: flex; flex-direction: column; gap: 8px; }
.etape__media { position: relative; isolation: isolate; overflow: hidden; border: 1px solid var(--gris-2); background: #fff; }
.etape__media img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.etape__pack { display: grid; place-items: center; aspect-ratio: 3 / 2; background: #fff; }
.etape__pack img { width: auto; height: 88%; aspect-ratio: auto; object-fit: contain; }
.etape__numero {
  position: absolute; left: 0; top: 0;
  background: var(--encre); color: var(--papier);
  padding: 8px 13px; z-index: 2;
}
.etape h3 { margin-top: 14px; }

/* --------------------------------------------------------- le dégressif */

.degressif { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 84px); align-items: start; }
.degressif .etiquette { color: var(--calque-b); display: block; margin-bottom: 12px; }
.degressif__texte { margin-top: 18px; max-width: 46ch; color: rgba(250, 249, 246, .78); }
.degressif__points { list-style: none; margin: 24px 0 32px; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.degressif__points li { position: relative; padding-left: 22px; color: rgba(250, 249, 246, .88); }
.degressif__points li::before {
  content: ""; position: absolute; left: 0; top: 6px;
  width: 15px; height: 12px;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 15"><rect x="0" y="1" width="12" height="9" fill="%234DE1E8" opacity=".3"/><rect x="6" y="5" width="12" height="9" fill="%234DE1E8" opacity=".3"/><rect x="6" y="5" width="6" height="5" fill="%234DE1E8"/></svg>') center/contain no-repeat;
}
.tableau--tarifs th, .tableau--tarifs td { border-bottom-color: rgba(250, 249, 246, .18); }
.tableau--tarifs thead th { color: rgba(250, 249, 246, .6); }
.tableau--tarifs tbody th { font-size: 17px; font-weight: 700; text-transform: none; letter-spacing: 0; color: var(--papier); }
.tableau--tarifs td { color: rgba(250, 249, 246, .9); }
.tableau--tarifs .est-mise-en-avant th, .tableau--tarifs .est-mise-en-avant td {
  background: rgba(17, 104, 209, .14); color: var(--calque-b); font-weight: 700;
}
.degressif__abo { margin-top: 16px; color: rgba(250, 249, 246, .7); }
.degressif__abo strong { color: var(--papier); }

/* ---------------------------------------------------------------- avis */

.carte--avis .carte__corps { gap: 14px; }
.carte--avis__texte { color: #2A2F38; }
.carte--avis__pied { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--gris-2); display: flex; align-items: center; gap: 12px; }
.carte--avis__pied img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; flex: none; }
.carte--avis__nom { font-weight: 700; font-size: 15px; }

/* ----------------------------------------------------------------- FAQ */

.faq { display: grid; grid-template-columns: 1fr 1.7fr; gap: clamp(28px, 5vw, 80px); align-items: start; }
.faq .etiquette { color: var(--gris-1); display: block; margin-bottom: 12px; }
.faq__reste { margin-top: 20px; max-width: 34ch; }

/* --------------------------------------------------------- séparateur */

.separateur .bande-calque__texte { justify-content: space-between; }
.separateur .etiquette { white-space: nowrap; }

/* ------------------------------------------------------ menu déroulé */

@media (max-width: 1180px) {
  .nav[data-ouvert="1"] {
    display: flex; flex-direction: column; gap: 0;
    position: absolute; top: 100%; left: 0; right: 0;
    background: var(--papier);
    border-bottom: 1px solid var(--gris-2);
    padding: 8px var(--gouttiere) 16px;
    box-shadow: 0 22px 40px -30px rgba(14, 17, 22, .8);
  }
  .nav[data-ouvert="1"] a { padding: 13px 0; border-bottom: 1px solid var(--gris-2); font-size: 17px; }
  .nav[data-ouvert="1"] .nav__atlas { border-bottom: 0; padding: 10px 15px; margin: 6px 0; align-self: flex-start; }
  .nav[data-ouvert="1"] .menu { display: block; }
  .nav[data-ouvert="1"] .menu__declencheur::after { display: none; }
  .nav[data-ouvert="1"] .menu__panneau {
    position: static; transform: none; display: block;
    min-width: 0; padding: 0 0 6px; border: 0; box-shadow: none; background: transparent;
  }
  .nav[data-ouvert="1"] .menu__panneau li a { padding: 10px 0; border-bottom: 1px solid var(--gris-2); font-size: 16px; }
  .nav[data-ouvert="1"] .menu__pack { width: 34px; height: 34px; }
}

@media (max-width: 1024px) {
  .heros__bande::after { width: 74%; }
  .degressif { grid-template-columns: 1fr; }
  .faq { grid-template-columns: 1fr; }
  .grille-produits { grid-template-columns: repeat(3, 1fr); }
  .grille-avis { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  .heros { height: calc(100svh - var(--entete) - var(--annonce)); min-height: 540px; }
  .heros__bande { height: min(72%, 520px); }
  .heros__bande::after { width: 100%; }
  .heros .display { max-width: 13ch; }
  .heros__action .bouton { width: 100%; }
  .grille-etapes { grid-template-columns: 1fr; }
  .separateur .etiquette:nth-child(n+3) { display: none; }
  .bande-calque, .pied__bande { height: 92px; }
}

@media (max-width: 560px) {
  .grille-produits, .grille-avis { grid-template-columns: 1fr; }
  .heros__preuves { gap: 14px; }
  .heros__preuves li { gap: 14px; }
}

@media (max-width: 640px) {
  .heros__media img { object-position: 68% 46%; }
}

/* ==========================================================================
   Le geste de marque en mouvement — « layer » (superposer) + « add » (naître)
   Ajouts d'animation SEULEMENT. Rien ici ne déplace un état au repos : chaque
   règle part de la position finale déjà définie plus haut, et n'agit qu'à
   l'ouverture (jouée une fois), au survol, ou pendant le jeu. Aucune animation
   déclenchée par le défilement. En reduced-motion, tout est déjà à l'arrivée.
   ========================================================================== */

/* --- 1. Le héros se compose à l'ouverture (une seule fois) ---------------- */
/* Le plan A pastel est posé, le plan B pastel glisse par-dessus, le croisement
   se forme (mix-blend-mode: multiply, déjà actif), puis l'accroche s'inscrit
   dans la bande. Les animations CSS ne rejouent jamais au défilement.        */
@media (prefers-reduced-motion: no-preference) {
  .page-accueil .heros__bande::before {
    animation: la-cyan .5s cubic-bezier(.2, .6, .3, 1) both;
  }
  .page-accueil .heros__bande::after {
    animation: la-lime .62s cubic-bezier(.2, .6, .3, 1) .3s both;
  }
  .page-accueil .heros__texte > * {
    animation: la-inscrire .52s cubic-bezier(.2, .6, .3, 1) both;
  }
  .page-accueil .heros__promesse { animation-delay: .46s; }
  .page-accueil .heros .display   { animation-delay: .54s; }
  .page-accueil .heros__sous      { animation-delay: .62s; }
  .page-accueil .heros__action    { animation-delay: .70s; }
  .page-accueil .heros__preuves   { animation-delay: .78s; }
}
@keyframes la-cyan {
  from { opacity: 0; }
  /* to : opacité .52, définie par .heros__bande::before */
}
@keyframes la-lime {
  from { opacity: 0; transform: translateX(-26%); }
  to   { opacity: .46; transform: translateX(0); }
}
@keyframes la-inscrire {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1;  transform: translateY(0); }
}

/* --- 2. Le Révélateur — passez le calque (jeu signature) ------------------ */
.revelateur {
  background: var(--encre);
  color: var(--papier);
  padding-block: clamp(56px, 6.4vw, 104px);
}
.revelateur__tete { max-width: 62ch; margin-bottom: clamp(24px, 3vw, 40px); }
.revelateur__tete .etiquette { color: var(--calque-b); display: block; margin-bottom: 12px; }
.revelateur__sous { margin-top: 14px; color: rgba(250, 249, 246, .82); font-weight: 500; max-width: 52ch; }

.revelateur__scene {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 2;
  max-height: 620px;
  margin-inline: auto;
  border-radius: 6px;
  overflow: hidden;
  isolation: isolate;
  background: #0A0D11;
  cursor: crosshair;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.revelateur__packshot { position: absolute; inset: 0; z-index: 0; display: block; }
.revelateur__packshot img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.revelateur__toile { position: absolute; inset: 0; z-index: 1; display: block; width: 100%; height: 100%; }
.revelateur__lime {
  position: absolute;
  z-index: 2;
  left: 0; top: 0;
  width: clamp(190px, 26vw, 300px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    var(--calque-b) 0%, var(--calque-b) 44%,
    rgba(242, 189, 242, .55) 60%, rgba(242, 189, 242, 0) 74%);
  mix-blend-mode: multiply;
  pointer-events: none;
  opacity: 0;
  will-change: transform;
}
.revelateur__scene.est-actif .revelateur__lime { opacity: 1; }
.revelateur__consigne {
  position: absolute;
  z-index: 3;
  left: 16px; bottom: 16px;
  margin: 0;
  color: var(--encre);
  background: var(--calque-b);
  padding: 9px 15px;
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
  pointer-events: none;
}
.revelateur__scene.est-revele { cursor: default; }
.revelateur__scene.est-revele .revelateur__lime { opacity: 0; }

.revelateur__recompense {
  margin-top: 22px;
  display: flex;
  align-items: center;
  gap: 16px 26px;
  flex-wrap: wrap;
  padding: 20px 24px;
  border: 1px solid rgba(242, 189, 242, .38);
  border-left: 4px solid var(--calque-b);
  background: rgba(242, 189, 242, .08);
  border-radius: 6px;
}
.revelateur__recompense[hidden] { display: none; }
.revelateur__recompense-tag { color: var(--calque-b); }
.revelateur__recompense-txt { margin: 0; flex: 1 1 340px; font-size: 18px; font-weight: 600; color: var(--papier); }
.revelateur__recompense strong { color: var(--calque-b); }

@media (prefers-reduced-motion: no-preference) {
  .revelateur__lime { transition: opacity .18s ease; }
  .revelateur__consigne { transition: opacity .2s ease; }
  .revelateur__scene.est-actif .revelateur__consigne { opacity: 0; }
  .revelateur__toile { transition: opacity .5s ease; }
  .revelateur__scene.est-revele .revelateur__toile { opacity: 0; }
  .revelateur__recompense { opacity: 0; transition: opacity .45s ease; }
  .revelateur__recompense.est-vu { opacity: 1; }
}
/* Sans animation : l'état final est immédiat (toile effacée = boîte visible). */
@media (prefers-reduced-motion: reduce) {
  .revelateur__scene.est-revele .revelateur__toile { opacity: 0; }
  .revelateur__scene.est-actif .revelateur__consigne { opacity: 0; }
}

@media (max-width: 768px) {
  .revelateur__scene { aspect-ratio: 4 / 5; }
  .revelateur__consigne { left: 12px; bottom: 12px; }
}

/* --- 3. Compose — le calque s'ajoute sur le packshot du résultat ---------- */
/* /verifier : quand la référence s'affiche, les deux plans glissent sur le
   packshot (~0,5 s). Déclenché par l'obtention du résultat, jamais au scroll. */
@media (prefers-reduced-motion: no-preference) {
  .tn-res__img.est-compose::before {
    animation: la-compose-cyan .5s cubic-bezier(.2, .6, .3, 1) .12s both;
  }
  .tn-res__img.est-compose::after {
    animation: la-compose-lime .5s cubic-bezier(.2, .6, .3, 1) .2s both;
  }
}
@keyframes la-compose-cyan {
  from { opacity: 0; transform: translateY(100%); }
  to   { opacity: 1;  transform: translateY(0); }
}
@keyframes la-compose-lime {
  from { opacity: 0; transform: translateX(-100%); }
  to   { opacity: 1;  transform: translateX(0); }
}

/* --- 4. Survol des cartes produit — le croisement des plans se décale ----- */
/* Accueil (.carte--produit) et /produits (.g-carte) : les deux angles du
   calque glissent en sens opposé, le point de croisement bouge. Réversible. */
@media (prefers-reduced-motion: no-preference) {
  .carte--produit__media::before,
  .carte--produit__media::after,
  .g-carte-image::before,
  .g-carte-image::after {
    transition: transform .5s cubic-bezier(.2, .6, .3, 1);
  }
}
.carte--produit:hover .carte--produit__media::before { transform: translate(-10px, 9px); }
.carte--produit:hover .carte--produit__media::after  { transform: translate(7px, -7px); }
.g-carte:hover .g-carte-image::before { transform: translate(-9px, 8px); }
.g-carte:hover .g-carte-image::after  { transform: translate(8px, -6px); }