/* Feuille de jetons - palette appliquee telle que fournie (30/08/2026).
   Chargee en DERNIER dans le <head> : elle a le dernier mot sur les variables
   definies dans header.css et dans le <style> de chaque page.
   Pour tout annuler : retirer le <link rel="stylesheet" href="/assets/theme.css">. */
:root{
  /* ================= Jetons fournis ================= */
  /* Couleurs principales */
  --exa-dark:#323232;
  --exa-dark-hover:#454545;
  --exa-pink:#FF3D77;
  --exa-white:#FFFFFF;
  --exa-light-grey:#F6F6F6;
  /* Accents */
  --exa-blue:#06BBF1;
  --exa-yellow:#FFB623;
  --exa-purple:#8264E1;
  --exa-green:#00C882;
  --exa-error:#EB4848;
  /* Fonds pastel */
  --exa-pastel-pink:#FFE2E9;
  --exa-pastel-blue:#B3E5FC;
  --exa-pastel-blue-light:#DFF5FF;
  --exa-pastel-yellow:#FFF0C6;
  --exa-pastel-green:#EAFFF5;
  /* Textes */
  --exa-text-primary:rgba(50, 50, 50, 0.87);
  --exa-text-secondary:rgba(50, 50, 50, 0.67);
  --exa-text-muted:rgba(50, 50, 50, 0.56);
  --exa-text-disabled:rgba(50, 50, 50, 0.38);
  /* Typographies */
  --exa-font-heading:"Styrene A", Arial, sans-serif;
  --exa-font-body:"Open Sans", Arial, sans-serif;
  /* Arrondis */
  --exa-radius-input:4px;
  --exa-radius-card:16px;
  --exa-radius-pill:1000px;
  /* Structure */
  --exa-header-height:117px;
  --exa-page-padding:16px;

  /* ============ Valeurs derivees (absentes de la feuille) ============
     La feuille ne fournit ni survol du rose, ni seconde surface, ni couleur
     de filet. Ces trois valeurs sont calculees a partir des siennes. */
  --exa-pink-hover:#E62E66;
  --exa-light-grey-2:#EDEDED;
  --exa-line:#E0E0E0;

  /* ============ Raccordement au CSS existant ============
     Les pages et header.css utilisent ces noms depuis l'origine. On les
     branche sur les jetons : la nouvelle palette s'applique partout d'un
     seul coup, sans toucher au CSS des pages. */
  --ink:var(--exa-dark);
  --ink-soft:var(--exa-text-secondary);
  --soft-ink:var(--exa-text-secondary);
  --muted:var(--exa-text-muted);
  --line:var(--exa-line);
  --brand:var(--exa-pink);
  --brand-d:var(--exa-pink-hover);
  --accent:var(--exa-blue);
  --violet:var(--exa-purple);
  --soft:var(--exa-light-grey);
  --soft2:var(--exa-light-grey-2);
  --ok:var(--exa-green);
  --amber:var(--exa-yellow);
  --cyan:var(--exa-blue);
  --magenta:var(--exa-pink);
  --jaune:var(--exa-yellow);
  --radius:var(--exa-radius-card);

  /* En-tete partage : ReflexPrinting (--rp-cyan / magenta / jaune) et
     KOOPRINTA (--rp-sauge / terracotta / rose) passent sur la meme palette. */
  --rp-noir:var(--exa-dark);
  --rp-creme:var(--exa-light-grey);
  --rp-ligne:var(--exa-line);
  --rp-gris:var(--exa-text-secondary);
  --rp-cyan:var(--exa-blue);
  --rp-magenta:var(--exa-pink);
  --rp-magenta-d:var(--exa-pink-hover);
  --rp-jaune:var(--exa-yellow);
  --rp-terracotta:var(--exa-pink);
  --rp-terracotta-d:var(--exa-pink-hover);
  --rp-sauge:var(--exa-blue);
  --rp-sauge-d:var(--exa-dark-hover);
  --rp-rose:var(--exa-pastel-pink);
}

/* ---- Textes : l'encre de la feuille, a ses quatre niveaux de presence ---- */
body{color:var(--exa-text-primary)}
/* Pas de couleur imposee aux titres : elle ecrasait le blanc des blocs
   sur fond sombre (cartes d'entree de l'accueil, pied de page, fenetre
   des promos). Les titres heritent de leur conteneur, donc de l'encre
   de la feuille sur fond clair, et du blanc sur fond sombre. */

/* ---- Arrondis : champs de saisie et boutons ---- */
input:not([type=checkbox]):not([type=radio]),
select,textarea{border-radius:var(--exa-radius-input)}
.btn,button.btn,a.btn{border-radius:var(--exa-radius-pill)}

/* ================= Paves pastel des pages de famille =================
   Meme langage que les blocs metier de l'accueil : fond pastel plein,
   photo qui entre en diagonale, bouton pilule noir. Pour tout annuler,
   supprimer ce bloc et l'attribut data-pave des pages de famille. */
[data-pave]{gap:16px}
[data-pave] .card{position:relative;overflow:hidden;border:none;border-radius:20px;
  background:var(--exa-pastel-yellow);padding:20px;min-height:210px}
[data-pave] .card:nth-child(4n+2){background:var(--exa-pastel-blue-light)}
[data-pave] .card:nth-child(4n+3){background:var(--exa-pastel-green)}
[data-pave] .card:nth-child(4n+4){background:var(--exa-pastel-pink)}
[data-pave] .card:hover{border:none;transform:translateY(-4px);box-shadow:0 18px 38px rgba(50,50,50,.14)}
[data-pave] .card img.ph{position:absolute;top:0;right:0;width:50%;height:100%;flex:none;
  object-fit:cover;border:none;border-radius:0;z-index:0;
  clip-path:polygon(16% 0,100% 0,100% 100%,50% 100%)}
/* Le carre bleu de secours ne doit pas rester sous la photo : il ne sert que
   si l image manque, et dans ce cas le onerror a deja retire le <img>. */
[data-pave] .card img.ph+.rp-noimg{display:none!important}
[data-pave] .card .rp-noimg{border-radius:12px;height:120px}
[data-pave] .card h3,[data-pave] .card .desc,[data-pave] .card .go{
  position:relative;z-index:1;max-width:50%}
[data-pave] .card .row1{position:static;margin-bottom:10px;max-width:50%;
  background:none!important;border:none!important;height:auto!important;min-height:0!important;
  padding:0!important;border-radius:0!important;aspect-ratio:auto!important;
  display:flex!important;align-items:center;justify-content:flex-start;overflow:visible!important}
[data-pave] .card .pill{position:relative;z-index:1;background:rgba(255,255,255,.78);
  color:var(--exa-dark);border:none;font-weight:700}
[data-pave] .card h3{color:var(--exa-dark)}
[data-pave] .card .desc{color:var(--exa-text-secondary)}
[data-pave] .card .go{margin-top:14px;align-self:flex-start;display:inline-flex;width:auto;
  background:var(--exa-dark);color:#fff;padding:9px 16px;border-radius:var(--exa-radius-pill);
  font-size:12.5px;font-weight:700}
[data-pave] .card:hover .go{background:var(--exa-dark-hover);gap:6px}
[data-pave] .card.nav{background:var(--exa-light-grey);border:1px dashed var(--exa-line)}
@media(max-width:760px){
  [data-pave] .card img.ph{position:static;width:100%;height:130px;clip-path:none;
    border-radius:12px;margin-bottom:10px}
  [data-pave] .card .row1,[data-pave] .card h3,[data-pave] .card .desc,[data-pave] .card .go{max-width:none}
}

/* ---- Vignette de galerie qui mene vers un AUTRE produit ----
   Sur certaines fiches la rangee melangeait des formats du produit et des
   produits voisins. Ceux-la sont maintenant des liens, signales par la
   fleche et l etiquette foncee, pour qu on ne les prenne pas pour un format. */
.gthumbs a.gtlink{display:block;line-height:0;text-decoration:none}
.gthumbs a.gtlink .gtl{background:rgba(50,50,50,.88);color:#fff;font-weight:700}
.gthumbs a.gtlink:hover{border-color:var(--exa-pink)}
