/* ── TOKENS ─────────────────────────────────────────────────────────────── */
.uc-article {
  /* Encre & surfaces */
  --uc-ink:        #0A0A0B;
  --uc-ink-2:      #1C1D21;
  --uc-ink-3:      #3A3C43;
  --uc-muted:      #63676F;
  --uc-line:       #E2E4E9;
  --uc-line-2:     #F0F1F4;
  --uc-paper:      #FFFFFF;
  --uc-paper-2:    #F7F8FA;

  /* Accents — le bleu de marque est celui du site (#6699FF sur les boutons et
     les liens de univers-crampons.fr). Il sert aux aplats ; sur fond clair, tout
     TEXTE passe par --uc-brand-ink, qui seul atteint le contraste AA. */
  --uc-brand:       #6699FF;
  --uc-brand-ink:   #1D4FD8;   /* bleu lisible sur fond clair (AA) */
  --uc-brand-wash:  #EEF3FF;
  --uc-btn-hover:   #4D88FF;   /* survol des boutons, un ton sous #6699FF */
  --uc-alert:       #C0242A;   /* reserve au negatif : risque, contre, derapage */
  --uc-alert-ink:   #A5171B;
  --uc-alert-wash:  #FDF1F1;
  --uc-green:      #0B7A3E;
  --uc-green-wash: #EFF8F2;
  --uc-amber:      #96590A;
  --uc-amber-wash: #FDF6EA;

  /* Typo */
  /* Affichage et lecture partagent la police du theme : zero requete ajoutee.
     Archivo reste en tete de pile : si le theme la charge un jour, elle prend le
     relais sans toucher a cette feuille. */
  --uc-display: "Archivo", "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --uc-text:    "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --uc-mono:    ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", Menlo, monospace;

  --uc-fs-body:  clamp(1rem, 0.97rem + 0.16vw, 1.0938rem);
  --uc-fs-lead:  clamp(1.125rem, 1.06rem + 0.32vw, 1.3125rem);
  --uc-fs-h2:    clamp(1.5rem, 1.24rem + 1.15vw, 2.125rem);
  --uc-fs-h3:    clamp(1.1875rem, 1.11rem + 0.35vw, 1.375rem);
  --uc-fs-hero:  clamp(1.875rem, 1.42rem + 2.05vw, 3rem);

  /* Rythme vertical (echelle 4/8) */
  --uc-s1: .5rem;  --uc-s2: .75rem; --uc-s3: 1rem;   --uc-s4: 1.5rem;
  --uc-s5: 2rem;   --uc-s6: 3rem;   --uc-s7: 4rem;

  --uc-radius:    16px;
  --uc-radius-sm: 10px;
  --uc-shadow:    0 1px 2px rgba(10,10,11,.05), 0 12px 28px -18px rgba(10,10,11,.35);
  --uc-measure:   min(100%, 43rem);   /* ~75 caracteres par ligne */

  /* Trame de picots (semelle) — texture des blocs sombres */
  --uc-studs: radial-gradient(circle at center, rgba(255,255,255,.10) 1.6px, transparent 1.7px);

  font-family: var(--uc-text);
  font-size: var(--uc-fs-body);
  line-height: 1.7;
  color: var(--uc-ink);
  max-width: var(--uc-measure);
  margin-inline: auto;
  -webkit-font-smoothing: antialiased;
  counter-reset: ucsection;
  color-scheme: light;
}

/* Variante sombre : opt-in explicite (jamais automatique — le thème est clair) */
.uc-article[data-theme="dark"] {
  --uc-ink: #F4F5F7; --uc-ink-2: #E4E6EA; --uc-ink-3: #C3C7CE;
  --uc-muted: #9AA0AA; --uc-line: #2A2C32; --uc-line-2: #202228;
  --uc-paper: #0F1013; --uc-paper-2: #17181C;
  --uc-brand-ink: #8FB4FF; --uc-brand-wash: #131A2A;
  --uc-alert-ink: #FF7B7C;  --uc-alert-wash: #231516;
  --uc-green-wash: #101E17; --uc-amber-wash: #201A10;
  background: var(--uc-paper);
}

/* ── BASE ───────────────────────────────────────────────────────────────── */
/* Ne jamais dependre du reset du theme : sans border-box, un bouton en
   width:100% + padding deborde et provoque un scroll horizontal sur mobile. */
.uc-article, .uc-article *, .uc-article *::before, .uc-article *::after { box-sizing: border-box; }

.uc-article > * + * { margin-top: var(--uc-s4); }
.uc-article p { margin: 0 0 var(--uc-s4); text-wrap: pretty; }
.uc-article p:last-child { margin-bottom: 0; }
.uc-article strong { font-weight: 650; }
.uc-article ul, .uc-article ol { padding-left: 1.35rem; }
.uc-article li { margin-bottom: var(--uc-s1); }

.uc-article a:not(.uc-btn):not(.uc-product-link) {
  color: inherit;
  text-decoration: none;
  box-shadow: inset 0 -2px 0 0 var(--uc-brand);
  padding-bottom: 1px;
  transition: box-shadow .18s ease, color .18s ease, background-color .18s ease;
}
.uc-article a:not(.uc-btn):not(.uc-product-link):hover {
  color: var(--uc-brand-ink);
  background-color: var(--uc-brand-wash);
  box-shadow: inset 0 -2px 0 0 var(--uc-brand-ink);
}
.uc-article :focus-visible {
  outline: 3px solid var(--uc-brand-ink);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ── 1. HERO ────────────────────────────────────────────────────────────── */
.uc-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--uc-ink);
  color: #fff;
  border-radius: var(--uc-radius);
  padding: clamp(1.75rem, 1.2rem + 2.4vw, 3rem) clamp(1.25rem, .8rem + 2vw, 2.5rem);
}
.uc-hero::before {                       /* trame de picots + ligne de touche */
  content: "";
  position: absolute; inset: 0; z-index: -2;
  background-image: var(--uc-studs);
  background-size: 14px 14px;
  opacity: .9;
}
.uc-hero::after {
  content: "";
  position: absolute; z-index: -1;
  top: -20%; right: -8%;
  width: 26%; height: 140%;
  transform: skewX(-14deg);
  background:
    linear-gradient(90deg, transparent 0 6%, var(--uc-brand) 6% 10%, transparent 10% 22%,
                    var(--uc-brand) 22% 100%);
  opacity: .95;
}
.uc-hero-kicker {
  display: inline-block;
  font-family: var(--uc-mono);
  font-size: .75rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  color: #fff;
  border: 1px solid rgba(255,255,255,.34);
  border-radius: 999px;
  padding: .3rem .7rem;
  margin-bottom: var(--uc-s3);
}
.uc-hero h2 {
  font-family: var(--uc-display);
  font-size: var(--uc-fs-hero);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -.025em;
  text-wrap: balance;
  margin: 0 0 var(--uc-s3);
  color: #fff;
  border: 0; padding: 0;
  max-width: 20ch;
}
.uc-hero p {
  margin: 0;
  color: #D9DCE2;
  font-size: var(--uc-fs-lead);
  line-height: 1.5;
  max-width: 30rem;                 /* reste a gauche de la bande rouge */
}
.uc-hero-meta {
  display: flex; flex-wrap: wrap; gap: .45rem 1.1rem;
  margin-top: var(--uc-s4);
  padding-top: var(--uc-s3);
  border-top: 1px solid rgba(255,255,255,.18);
  max-width: 30rem;                 /* ne passe jamais sous la bande rouge */
  font-family: var(--uc-mono);
  font-size: .75rem; letter-spacing: .06em; text-transform: uppercase;
  color: #A9AEB8;
}

/* ── 2. MENTION IA ──────────────────────────────────────────────────────── */
.uc-ia {
  display: flex; align-items: center; gap: .55rem;
  font-family: var(--uc-mono);
  font-size: .75rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--uc-muted);
  border: 1px solid var(--uc-line);
  border-radius: var(--uc-radius-sm);
  padding: .55rem .85rem;
}
.uc-ia::before {
  content: ""; flex: none;
  width: .55rem; height: .55rem;
  border-radius: 50%;
  background: var(--uc-brand);
  box-shadow: 0 0 0 3px var(--uc-brand-wash);
}

/* ── 3. CHAPEAU ─────────────────────────────────────────────────────────── */
.uc-lead {
  font-size: var(--uc-fs-lead);
  line-height: 1.55;
  color: var(--uc-ink-2);
  font-weight: 450;
}

/* ── 4. SOMMAIRE ────────────────────────────────────────────────────────── */
.uc-toc {
  background: var(--uc-paper-2);
  border: 1px solid var(--uc-line);
  border-radius: var(--uc-radius);
  padding: var(--uc-s4) clamp(1rem, .7rem + 1.2vw, 1.75rem);
}
.uc-toc-title {
  display: block;
  font-family: var(--uc-mono);
  font-size: .75rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--uc-muted);
  padding-bottom: var(--uc-s2);
  margin-bottom: var(--uc-s2);
  border-bottom: 1px solid var(--uc-line);
}
.uc-toc ul {
  list-style: none; margin: 0; padding: 0;
  counter-reset: uctoc;
  display: grid; gap: .1rem;
}
.uc-toc li { counter-increment: uctoc; margin: 0; }
.uc-toc a {
  display: grid;
  grid-template-columns: 2.4rem 1fr;
  align-items: baseline;
  gap: .5rem;
  padding: .5rem .35rem;
  border-radius: 8px;
  box-shadow: none !important;
  background: none !important;
  font-weight: 500;
  line-height: 1.4;
}
.uc-toc a::before {
  content: counter(uctoc, decimal-leading-zero);
  font-family: var(--uc-mono);
  font-size: .78rem; font-weight: 600;
  color: var(--uc-brand);
}
.uc-toc a:hover { background: var(--uc-paper) !important; color: var(--uc-brand-ink); }
/* Respiration apres le sommaire : le chapeau ne doit pas coller a l'encadre. */
.uc-article .uc-toc + * { margin-top: var(--uc-s6); }
@media (max-width: 47.9375em) { .uc-article .uc-toc + * { margin-top: var(--uc-s5); } }
@media (min-width: 720px) {
  /* Deux colonnes qui s'equilibrent seules, quel que soit le nombre de sections
     (une grille a nombre de lignes fixe casse des qu'il y a 7 ou 9 entrees). */
  .uc-toc ul {
    display: block;
    columns: 2;
    column-gap: 1.75rem;
  }
  .uc-toc li { break-inside: avoid; }
}

/* ── 5. TITRES ──────────────────────────────────────────────────────────── */
.uc-article h2 {
  position: relative;
  font-family: var(--uc-display);
  font-size: var(--uc-fs-h2);
  font-weight: 750;
  line-height: 1.12;
  letter-spacing: -.02em;
  text-wrap: pretty;
  margin: var(--uc-s7) 0 var(--uc-s3);
  padding-top: var(--uc-s4);
  padding-right: 4.5rem;        /* reserve la zone du numero de section */
  border-top: 3px solid var(--uc-ink);
}
.uc-article > h2 { counter-increment: ucsection; scroll-margin-top: 6rem; }
.uc-article > h2::after {                /* numero de maillot en filigrane */
  content: counter(ucsection, decimal-leading-zero);
  position: absolute; top: var(--uc-s2); right: 0;
  font-family: var(--uc-display);
  font-size: clamp(2.25rem, 1.9rem + 1.8vw, 3.25rem);
  font-weight: 900;
  line-height: 1;
  color: var(--uc-line-2);
  z-index: -1;
  pointer-events: none;
  letter-spacing: -.05em;
}
.uc-article h3 {
  font-family: var(--uc-display);
  font-size: var(--uc-fs-h3);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -.012em;
  margin: var(--uc-s5) 0 var(--uc-s2);
  padding-left: .8rem;
  border-left: 4px solid var(--uc-brand);
}
.uc-article h4 {
  font-family: var(--uc-display);
  font-size: 1.0625rem; font-weight: 700;
  letter-spacing: -.006em;
  margin: var(--uc-s4) 0 var(--uc-s1);
  color: var(--uc-ink-2);
}
.uc-kicker {
  display: block;
  margin-top: var(--uc-s5);
  font-family: var(--uc-mono);
  font-size: .75rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--uc-brand-ink);
  margin-bottom: calc(var(--uc-s1) * -1);
}

/* ── 6. ENCADRÉS ────────────────────────────────────────────────────────── */
.uc-box {
  --uc-accent: var(--uc-ink);
  --uc-wash: var(--uc-paper-2);
  background: var(--uc-wash);
  border: 1px solid var(--uc-line);
  border-left: 5px solid var(--uc-accent);
  border-radius: 0 var(--uc-radius) var(--uc-radius) 0;
  padding: var(--uc-s4) clamp(1rem, .8rem + .8vw, 1.5rem);
}
.uc-box > :last-child { margin-bottom: 0; }
.uc-box-title {
  display: flex; align-items: center; gap: .5rem;
  font-family: var(--uc-display);
  font-weight: 750; font-size: 1rem;
  letter-spacing: -.008em;
  margin-bottom: var(--uc-s1);
  color: var(--uc-accent);
}
.uc-box-title::before {
  content: ""; flex: none;
  width: .5rem; height: .5rem;
  background: var(--uc-accent);
  transform: rotate(45deg);              /* picot */
}
.uc-box--info  { --uc-accent: var(--uc-brand-ink);  --uc-wash: var(--uc-brand-wash); }
.uc-box--tip   { --uc-accent: var(--uc-green); --uc-wash: var(--uc-green-wash); }
.uc-box--warn  { --uc-accent: var(--uc-amber); --uc-wash: var(--uc-amber-wash); }
.uc-box--alert { --uc-accent: var(--uc-alert-ink); --uc-wash: var(--uc-alert-wash); }

.uc-mark {
  /* surlignage = couleur d'alerte du systeme (--uc-alert #C0242A) a 24 %, et non
     un rouge invente : la charte n'a qu'un rouge. */
  background: linear-gradient(180deg, transparent 58%, rgba(192,36,42,.24) 58%);
  padding: 0 .1em;
  font-weight: 600;
  -webkit-box-decoration-break: clone;   /* fond identique sur chaque ligne */
  box-decoration-break: clone;
}

/* ── 7. CHIFFRES CLÉS ───────────────────────────────────────────────────── */
.uc-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  gap: .75rem;
  margin: var(--uc-s5) 0;
}
.uc-stat {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--uc-ink);
  color: #fff;
  border-radius: var(--uc-radius-sm);
  padding: var(--uc-s4) var(--uc-s3);
}
.uc-stat::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;   /* la trame passe SOUS le chiffre */
  background-image: var(--uc-studs);
  background-size: 12px 12px;
  pointer-events: none;
}
.uc-stat-num {
  display: block;
  font-family: var(--uc-display);
  font-size: clamp(1.75rem, 1.5rem + 1.1vw, 2.25rem);
  font-weight: 850;
  line-height: 1;
  letter-spacing: -.035em;
  font-variant-numeric: tabular-nums;
}
.uc-stat-label {
  display: block;
  margin-top: var(--uc-s1);
  font-size: .8125rem;
  line-height: 1.4;
  color: #ADB2BB;
}

/* ── 8. AVANTAGES / INCONVÉNIENTS ───────────────────────────────────────── */
.uc-verdict {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: var(--uc-s3);
  margin: var(--uc-s5) 0;
}
.uc-pros, .uc-cons {
  background: var(--uc-paper);
  border: 1px solid var(--uc-line);
  border-top: 5px solid var(--uc-green);
  border-radius: var(--uc-radius-sm);
  padding: var(--uc-s4) var(--uc-s3);
}
.uc-cons { border-top-color: var(--uc-alert); }
.uc-pros h4, .uc-cons h4 {
  margin: 0 0 var(--uc-s2);
  font-family: var(--uc-mono);
  font-size: .75rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
}
.uc-pros h4 { color: var(--uc-green); }
.uc-cons h4 { color: var(--uc-alert-ink); }
.uc-pros ul, .uc-cons ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.uc-pros li, .uc-cons li { position: relative; padding-left: 1.5rem; margin: 0; line-height: 1.5; }
.uc-pros li::before, .uc-cons li::before {
  content: "";
  position: absolute; left: 0; top: .52em;
  width: .5rem; height: .5rem;
  transform: rotate(45deg);
}
.uc-pros li::before { background: var(--uc-green); }
.uc-cons li::before { background: var(--uc-alert); }

/* ── 9. ÉTAPES (couture de tige) ────────────────────────────────────────── */
/* Scope .uc-article obligatoire ici : sans lui, le CSS du theme (blog.min.css de
   Shoptimizer) rabote le padding-left du <li> d'une liste ordonnee a 6px, et le
   numero rond vient alors chevaucher le titre de l'etape. Toutes les autres
   classes du systeme portent deja ce scope ; .uc-steps en manquait. */
.uc-article .uc-steps {
  counter-reset: ucstep;
  list-style: none;
  margin: var(--uc-s5) 0;
  padding: 0;
}
.uc-article .uc-steps > li {
  counter-increment: ucstep;
  position: relative;
  margin: 0 0 0 1.1rem;
  padding: 0 0 var(--uc-s4) 2.6rem;
  border-left: 2px dashed var(--uc-line);
  line-height: 1.6;
}
.uc-article .uc-steps > li:last-child { border-left-color: transparent; padding-bottom: 0; }
.uc-article .uc-steps > li::before {
  content: counter(ucstep);
  position: absolute; left: -1.1rem; top: -.2rem;
  width: 2.2rem; height: 2.2rem;
  display: grid; place-items: center;
  background: var(--uc-ink); color: #fff;
  border-radius: 50%;
  font-family: var(--uc-display);
  font-weight: 800; font-size: .95rem;
  box-shadow: 0 0 0 6px var(--uc-paper);
}
.uc-article .uc-steps strong {
  display: block;
  font-family: var(--uc-display);
  font-weight: 700; font-size: 1.0625rem;
  margin-bottom: .15rem;
}

/* ── 10. CHECKLIST ──────────────────────────────────────────────────────── */
.uc-check { list-style: none; margin: var(--uc-s4) 0; padding: 0; display: grid; gap: .6rem; }
.uc-check li { position: relative; padding-left: 2rem; margin: 0; line-height: 1.55; }
.uc-check li::before {
  content: "";
  position: absolute; left: 0; top: .28em;
  width: 1.15rem; height: 1.15rem;
  border: 2px solid var(--uc-ink);
  border-radius: 5px;
}
.uc-check li::after {
  content: "";
  position: absolute; left: .34rem; top: .42em;
  width: .38rem; height: .68rem;
  border: solid var(--uc-brand);
  border-width: 0 2.5px 2.5px 0;
  transform: rotate(42deg);
}

/* ── 11. BADGES TERRAIN ─────────────────────────────────────────────────── */
.uc-tags { display: flex; flex-wrap: wrap; gap: .5rem; margin: var(--uc-s4) 0; }
.uc-tag {
  display: inline-flex; align-items: center; gap: .4rem;
  font-family: var(--uc-mono);
  font-size: .75rem; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  padding: .38rem .7rem;
  border: 1.5px solid var(--uc-ink);
  border-radius: 999px;
  background: var(--uc-paper);
  white-space: nowrap;
}
.uc-tag::before {
  content: ""; flex: none;
  width: .45rem; height: .45rem;
  background: currentColor;
  transform: rotate(45deg);
}
.uc-tag--sg { border-color: var(--uc-alert);   color: var(--uc-alert-ink); }
.uc-tag--fg { border-color: var(--uc-green); color: var(--uc-green); }
.uc-tag--ag { border-color: var(--uc-brand);  color: var(--uc-brand-ink); }
.uc-tag--tf { border-color: var(--uc-amber); color: var(--uc-amber); }

/* ── 12. TABLEAUX ───────────────────────────────────────────────────────── */
/* Calque sur le tableau natif de WordPress tel que le site l'affiche (guide des
   tailles des fiches produits) : en-tete #111 en blanc, lignes alternees #F8F8F8,
   aucune bordure, colonnes de largeur egale (table-layout: fixed, reglage par
   defaut de l'editeur). Toutes les cellules passent a la ligne : aucune colonne
   ne s'elargit au detriment des autres. */
.uc-table-wrap {
  margin: var(--uc-s5) 0;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  background:
    linear-gradient(to right, var(--uc-paper) 30%, rgba(255,255,255,0)) left / 36px 100% no-repeat,
    linear-gradient(to left,  var(--uc-paper) 30%, rgba(255,255,255,0)) right / 36px 100% no-repeat,
    radial-gradient(farthest-side at 0 50%, rgba(10,10,11,.14), transparent) left / 12px 100% no-repeat,
    radial-gradient(farthest-side at 100% 50%, rgba(10,10,11,.14), transparent) right / 12px 100% no-repeat;
  background-attachment: local, local, scroll, scroll;
}
.uc-table {
  width: 100%;
  min-width: 34rem;
  table-layout: fixed;
  border-collapse: collapse;
  font-family: var(--uc-text);
  font-size: .875rem;
  line-height: 1.5;
  background: transparent;
}
/* Quatre colonnes de texte : assez de largeur par colonne sur mobile. Le tableau
   defile alors dans son cadre, jamais la page. */
.uc-table:has(th:nth-child(4)) { min-width: 42rem; }
.uc-table thead th {
  background: #111; color: #fff;
  font-family: var(--uc-text);
  font-size: .875rem; font-weight: 600;
  letter-spacing: normal; text-transform: none;
  text-align: left;
}
.uc-table td, .uc-table th {
  padding: .8em 1.4em;
  border: 0;
  vertical-align: top;
  overflow-wrap: break-word;
}
.uc-table td { color: #000; }
.uc-table tbody tr:nth-child(odd) td { background: #F8F8F8; }
.uc-table tbody tr:nth-child(even) td { background: transparent; }
.uc-table td:first-child { font-weight: 600; }

/* ── 13. PRODUITS ───────────────────────────────────────────────────────── */
/* Calque sur les vignettes des pages categorie du site : photo carree sur blanc,
   sans cadre ni fond, texte a gauche, titre noir en 600, prix en noir. Toute la
   carte est cliquable, comme sur le site ; le lien a l'aspect du bouton du site. */
.uc-picks {
  /* Flex plutot que grid : avec 2 cartes dans un bloc elargi, une grille
     auto-fit laisse les pistes calees a gauche. En flex, la rangee est
     toujours centree, quel que soit le nombre de produits. */
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: var(--uc-s4) var(--uc-s3);
  margin: var(--uc-s5) 0;
}
.uc-picks > .uc-product { flex: 1 1 13rem; max-width: 16rem; }
/* Le sur-titre d'un bloc produits suit le centrage de la rangee de cartes. */
.uc-article .uc-kicker:has(+ .uc-picks) { text-align: center; }
.uc-product {
  position: relative;          /* repere du lien etendu a toute la carte */
  display: flex; flex-direction: column;
  background: transparent;
  text-align: left;
}
.uc-product-media { background: #fff; }
.uc-product img {
  display: block;
  width: 100%;
  height: auto;              /* neutralise l'attribut height="" du HTML,
                                sinon aspect-ratio est ignore */
  aspect-ratio: 1 / 1;
  object-fit: contain;
}
.uc-product-body {
  display: flex; flex-direction: column; gap: .25rem;
  flex: 1;
  padding: .75rem 0 0;
}
.uc-product-kicker {
  font-family: var(--uc-text);
  font-size: .8125rem; font-weight: 400;
  letter-spacing: normal; text-transform: none;
  color: var(--uc-muted);
}
.uc-product-name {
  font-family: var(--uc-text);
  font-weight: 600; font-size: 1rem; line-height: 1.5;
  letter-spacing: normal;
  color: #000;
  margin: 0;
}
.uc-product-note { margin: 0; flex: 1; font-size: .875rem; line-height: 1.5; color: var(--uc-muted); }
/* Prix dynamique (mis a jour par le script uc-prix) : reste en bleu et en gras,
   comme avant, a la demande du client. */
.uc-product-price {
  font-family: var(--uc-text);
  font-weight: 600; font-size: 1rem;
  font-variant-numeric: tabular-nums;
  color: var(--uc-brand-ink);   /* bleu de marque, contraste AA sur fond clair */
}
/* Prix écrit dans une phrase, mis à jour depuis le catalogue comme celui des cartes (inject_prix.py) :
   le montant et le symbole ne se séparent jamais en fin de ligne. */
.uc-prix-texte { white-space: nowrap; }
/* Ajoutee par le filtre serveur quand le produit passe en rupture : elle ne doit
   jamais casser l'alignement de la carte, d'ou le passage a la ligne. */
.uc-product-rupture {
  display: block;
  font-family: var(--uc-text);
  font-style: normal; font-size: .75rem; font-weight: 500;
  letter-spacing: 0; text-transform: none;
  color: var(--uc-alert-ink);
}

.uc-product-link {
  display: flex; align-items: center; justify-content: center;
  margin-top: .5rem;
  min-height: 44px;
  padding: .5rem 1rem;
  background: var(--uc-brand); color: #fff !important;
  border-radius: 4px;
  text-align: center;
  text-decoration: none;
  font-family: var(--uc-text);
  font-weight: 600; font-size: .9375rem; line-height: 1.3;
  letter-spacing: -.3px;
  transition: background-color .18s ease;
}
/* Lien etendu : un clic n'importe ou sur la carte ouvre la fiche produit. */
.uc-product-link::after { content: ""; position: absolute; inset: 0; }
.uc-product:hover .uc-product-link, .uc-product-link:focus-visible { background: var(--uc-btn-hover); }

/* ── 14. CTA ────────────────────────────────────────────────────────────── */
/* Bouton du site (Ajouter au panier, Rechercher) : aplat #6699FF, texte blanc en
   600, coins de 4px, sans ombre ni fleche. .uc-btn--ghost garde le meme aspect :
   le site n'a qu'un style de bouton. */
.uc-cta { display: flex; justify-content: center; margin: var(--uc-s5) 0; }
.uc-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px;
  background: var(--uc-brand); color: #fff !important;
  border: 0;
  border-radius: 4px;
  box-shadow: none;
  text-align: center;
  text-decoration: none;
  font-family: var(--uc-text);
  font-weight: 600; font-size: 1rem; line-height: 1.3;
  letter-spacing: -.3px;
  padding: .75rem 1.6rem;
  transition: background-color .18s ease;
}
.uc-btn:hover { background: var(--uc-btn-hover); }
/* Le theme souligne tout lien d'article (.entry-content article a:not(.elementor-button),
   specificite 0,2,2) ; les boutons du site ne sont pas soulignes. */
.uc-article .uc-cta a.uc-btn,
.uc-article .uc-band a.uc-btn,
.uc-article .uc-product a.uc-product-link { text-decoration: none; }

.uc-band {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--uc-ink); color: #fff;
  border-radius: var(--uc-radius);
  padding: clamp(1.75rem, 1.3rem + 2vw, 2.75rem) clamp(1.25rem, .9rem + 1.6vw, 2.25rem);
  text-align: center;
  margin: var(--uc-s6) 0;
}
.uc-band::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background-image: var(--uc-studs);
  background-size: 14px 14px;
}
.uc-band h3 {
  font-family: var(--uc-display);
  font-size: clamp(1.25rem, 1.05rem + .9vw, 1.6rem);
  font-weight: 800; line-height: 1.15;
  letter-spacing: -.02em;
  text-wrap: balance;
  color: #fff;
  border: 0; padding: 0;
  margin: 0 0 var(--uc-s2);
}
.uc-band p { color: #C4C8D0; margin: 0 auto var(--uc-s4); max-width: 46ch; }

/* ── 15. CITATION ───────────────────────────────────────────────────────── */
.uc-quote {
  margin: var(--uc-s6) 0;
  padding: 0 0 0 clamp(1rem, .6rem + 1.6vw, 2rem);
  border-left: 4px solid var(--uc-brand);
  font-family: var(--uc-display);
  font-size: clamp(1.125rem, 1.02rem + .5vw, 1.375rem);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -.012em;
  color: var(--uc-ink-2);
  text-wrap: pretty;
}
.uc-quote cite {
  display: block;
  margin-top: var(--uc-s2);
  font-family: var(--uc-mono);
  font-size: .75rem; font-style: normal; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--uc-muted);
}

/* ── 16. FAQ ────────────────────────────────────────────────────────────── */
.uc-faq { margin: var(--uc-s6) 0 0; border-top: 3px solid var(--uc-ink); }
.uc-faq details { border-bottom: 1px solid var(--uc-line); }
.uc-faq summary {
  cursor: pointer;
  list-style: none;
  position: relative;
  display: flex; align-items: flex-start; gap: 1rem;
  padding: var(--uc-s3) 2.6rem var(--uc-s3) 0;
  min-height: 44px;
  font-family: var(--uc-display);
  font-weight: 700; font-size: 1.0625rem;
  line-height: 1.35;
  letter-spacing: -.01em;
  transition: color .18s ease;
}
.uc-faq summary::-webkit-details-marker { display: none; }
.uc-faq summary::after {
  content: "";
  position: absolute; right: .55rem; top: 1.35rem;
  width: .7rem; height: .7rem;
  border: solid var(--uc-brand); border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg);
  transition: transform .2s ease;
}
.uc-faq details[open] summary { color: var(--uc-brand-ink); }
.uc-faq details[open] summary::after { transform: rotate(-135deg); top: 1.6rem; }
.uc-faq summary:hover { color: var(--uc-brand-ink); }
.uc-faq details > p, .uc-faq details > div {
  margin: 0; padding: 0 2.6rem var(--uc-s4) 0;
  color: var(--uc-ink-3);
  line-height: 1.65;
}

/* ── 17. IMAGES ─────────────────────────────────────────────────────────── */
.uc-fig { margin: var(--uc-s5) 0; }
.uc-fig img {
  display: block;
  width: 100%; height: auto;
  border-radius: var(--uc-radius-sm);
  background: var(--uc-paper-2);
}
.uc-fig figcaption {
  margin-top: var(--uc-s2);
  padding-left: .75rem;
  border-left: 3px solid var(--uc-brand);
  font-size: .8125rem;
  line-height: 1.5;
  color: var(--uc-muted);
}
/* Infographies 30 % moins hautes (demande du 02/10/2026) : format fixe 4:3, donc affichées à 70 %
   de la largeur, centrées, rien n'est coupé ; la légende suit la largeur de l'image. Sur mobile
   (< 640 px) elles restent pleine largeur : plus petites, leurs textes deviendraient illisibles. */
@media (min-width: 40em) {
  .uc-fig img, .uc-fig figcaption { width: 70%; margin-left: auto; margin-right: auto; }
}

/* ── 18. MENTIONS ───────────────────────────────────────────────────────── */
.uc-note {
  margin-top: var(--uc-s6);
  padding-top: var(--uc-s4);
  border-top: 1px solid var(--uc-line);
  font-size: .8125rem;
  line-height: 1.6;
  color: var(--uc-muted);
}

/* ── 19. RESPONSIVE ─────────────────────────────────────────────────────── */
@media (max-width: 47.9375em) {          /* < 768px */
  .uc-article h2 { margin-top: var(--uc-s6); }
  .uc-article > h2 { padding-right: 3.25rem; }
  .uc-article > h2::after { font-size: 2rem; top: var(--uc-s1); opacity: .9; }
  /* Sous 768px la bande diagonale passerait derriere le texte : on la remplace
     par un liseré de touche vertical, qui ne recouvre jamais rien. */
  .uc-hero::after {
    top: 0; right: 0; bottom: 0;
    width: 10px; height: auto;
    transform: none;
    background: var(--uc-brand);
  }
  .uc-hero { padding-right: calc(clamp(1.25rem, .8rem + 2vw, 2.5rem) + 10px); }
  .uc-hero p, .uc-hero-meta { max-width: none; }
  .uc-hero h2 { max-width: none; }
  .uc-cta { display: block; }
  .uc-btn { display: flex; width: 100%; padding-inline: 1rem; }
  .uc-article .uc-steps > li { padding-left: 2.3rem; }
  .uc-quote { padding-left: 1rem; }
  .uc-faq summary { font-size: 1rem; }
}
@media (max-width: 26.5625em) {          /* <= 425px : petits mobiles */
  .uc-article { line-height: 1.65; }
  .uc-stats { grid-template-columns: 1fr 1fr; }
  .uc-stat { padding: var(--uc-s3) var(--uc-s2); }
  .uc-stat-label { font-size: .75rem; }
  .uc-tag { font-size: .75rem; padding: .32rem .6rem; }
}

/* ── PRODUITS : deux par ligne aussi sur mobile ──────────────────────────────
   Sous 640px, deux cartes de front comme sur les pages categorie du site
   (titre 13px), sans descendre sous 12px ni sous la cible tactile
   de 44px. */
@media (max-width: 39.9375em) {
  .uc-picks { gap: 1.25rem .625rem; }
  .uc-picks > .uc-product {
    flex: 1 1 calc(50% - .3125rem);
    max-width: calc(50% - .3125rem);
    min-width: 0;
  }
  .uc-product-body { padding-top: .5rem; gap: .2rem; }
  .uc-product-kicker { font-size: .75rem; }
  .uc-product-name { font-size: .8125rem; line-height: 1.4; }
  .uc-product-note { font-size: .75rem; line-height: 1.4; }
  .uc-product-price { font-size: .875rem; }
  .uc-product-link {
    font-size: .8125rem;
    line-height: 1.2;
    padding: .5rem;
    min-height: 44px;
    text-wrap: balance;
  }
}

@media (min-width: 64em) {               /* >= 1024px */
  .uc-picks > .uc-product { flex-basis: 14rem; }
}

/* ── 19. ANIMATIONS EXPLICATIVES ────────────────────────────────────────────
   Deux animations par article, jamais decoratives : elles demontrent un
   mecanisme que le texte explique. Regles de construction :
   · SVG en ligne, aucun script — le contenu WordPress n'execute pas de JS
   · uniquement transform et opacity : aucune propriete qui declenche un layout
   · content-visibility: auto — hors ecran, le navigateur ne peint rien, donc
     l'animation ne consomme rien tant qu'elle n'est pas visible
   · la legende porte la MEME information que l'animation : le sens ne dépend
     jamais du mouvement seul (lecteur d'ecran, impression, mouvement reduit)   */

.uc-anim {
  margin: var(--uc-s5) 0;
  content-visibility: auto;
  contain-intrinsic-size: auto 420px;
}
.uc-anim-stage {
  position: relative;
  background: var(--uc-paper-2);
  border: 1px solid var(--uc-line);
  border-radius: var(--uc-radius);
  overflow: hidden;
}
.uc-anim-stage svg { display: block; width: 100%; height: auto; }
.uc-anim-title {
  position: absolute; top: .85rem; left: 1rem; z-index: 1;
  font-family: var(--uc-mono);
  font-size: .75rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--uc-muted);
}
.uc-anim figcaption {
  margin-top: var(--uc-s2);
  padding-left: .75rem;
  border-left: 3px solid var(--uc-brand);
  font-size: .8125rem; line-height: 1.5;
  color: var(--uc-muted);
}
.uc-anim-legend {
  display: flex; flex-wrap: wrap; gap: .4rem .9rem;
  margin-top: var(--uc-s2);
  font-family: var(--uc-mono);
  font-size: .75rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--uc-ink-3);
}
.uc-anim-legend span { display: inline-flex; align-items: center; gap: .35rem; }
.uc-anim-legend span::before {
  content: ""; width: .55rem; height: .55rem; transform: rotate(45deg);
  background: var(--uc-brand);
}
.uc-anim-legend .is-hold::before { background: var(--uc-green); }

/* Texte incruste dans les animations : lisible, crawlable, et coherent avec le
   reste du systeme (une animation dont le sens tient au texte reste comprehensible
   a l'arret). */
.uc-anim-stage .uc-t-lab {
  font-family: var(--uc-mono); font-size: 15px;
  letter-spacing: .08em; text-transform: uppercase; fill: var(--uc-muted);
}
.uc-anim-stage .uc-t-strong {
  font-family: var(--uc-display); font-weight: 700; font-size: 21px; fill: var(--uc-ink);
}
.uc-anim-stage .uc-t-inv  { fill: #fff; }   /* un attribut fill= serait ecrase par le CSS */
.uc-anim-stage .uc-t-hold { fill: var(--uc-green); }
.uc-anim-stage .uc-t-slip { fill: var(--uc-alert-ink); }

/* Le SVG est mis a l'echelle de la colonne : a 375px, un texte declare a 15px dans un
   viewBox de 640 s'affiche a 8px reels. Grossir le texte reglait la lisibilite mais
   faisait deborder les colonnes des gabarits (un <text> SVG ne revient pas a la ligne).
   On garde donc la geometrie validee du desktop et on laisse le schema defiler
   horizontalement, exactement comme un tableau large. */
@media (max-width: 47.9375em) {
  .uc-anim-stage { overflow-x: auto; overscroll-behavior-x: contain; }
  .uc-anim-stage svg { width: 35rem; max-width: none; }
  .uc-anim-title { font-size: .7rem; letter-spacing: .08em; }
}

/* `transform-box: fill-box` : sans lui, l'origine des transformations SVG est le
   viewBox entier, et une mise a l'echelle part du mauvais point. */
.uc-a-skid { transform-box: fill-box; transform-origin: left center; }
.uc-a-zone { transform-box: fill-box; transform-origin: center; }

/* — Animation 1 : ancrage contre glissement sur terrain gras — */
.uc-a-hold   { animation: uc-hold 5s cubic-bezier(.5,.05,.5,.95) infinite; }
.uc-a-slip   { animation: uc-slip 5s cubic-bezier(.5,.05,.5,.95) infinite; }
.uc-a-soil   { animation: uc-soil 5s ease-in-out infinite; transform-origin: center bottom; }
.uc-a-force  { animation: uc-force 5s ease-in-out infinite; }
.uc-a-skid   { animation: uc-skid 5s ease-in-out infinite; }

@keyframes uc-hold {          /* la semelle vissee descend, penetre, et ne bouge plus */
  0%, 8%    { transform: translate(0, -26px); }
  26%, 100% { transform: translate(0, 0); }
}
@keyframes uc-slip {          /* la semelle moulee descend a peine, puis derape */
  0%, 8%   { transform: translate(0, -26px); }
  26%      { transform: translate(0, 0); }
  55%      { transform: translate(0, 0); }
  78%,100% { transform: translate(46px, 2px); }
}
@keyframes uc-soil {          /* les empreintes se creusent quand les fers entrent */
  0%, 20%  { opacity: 0; }
  32%, 100%{ opacity: 1; }
}
@keyframes uc-force {         /* la fleche d'appui arrive apres la penetration */
  0%, 45%  { opacity: 0; transform: translateX(-10px); }
  55%, 92% { opacity: 1; transform: translateX(0); }
  100%     { opacity: 0; transform: translateX(0); }
}
@keyframes uc-skid {          /* la trace de derapage n'apparait que cote glissement */
  0%, 58%  { opacity: 0; transform: scaleX(0); }
  80%,100% { opacity: 1; transform: scaleX(1); }
}

/* — Animation 2 : zones d'appui selon le poste — */
.uc-a-zone { opacity: 0; animation: uc-zone 6s ease-in-out infinite; transform-origin: center; }
.uc-a-lab  { opacity: 0; animation: uc-lab 6s steps(1, end) infinite; }

/* Chaque profil occupe un tiers du cycle : 3 s par poste. */
.uc-a-p1 { animation-delay: 0s; }
.uc-a-p2 { animation-delay: -4s; }
.uc-a-p3 { animation-delay: -2s; }

@keyframes uc-zone {
  0%      { opacity: 0; transform: scale(.9); }
  6%, 27% { opacity: 1; transform: scale(1); }
  33%,100%{ opacity: 0; transform: scale(.9); }
}
@keyframes uc-lab {
  0%, 32%  { opacity: 1; }
  33%,100% { opacity: 0; }
}

/* — Croissance : une barre, une regle, une jauge qui se remplit — */
.uc-a-grow {
  animation: uc-grow 5s cubic-bezier(.4,0,.2,1) infinite;
  transform-box: fill-box; transform-origin: left center;
}
@keyframes uc-grow {
  0%, 6%   { transform: scaleX(0); }
  42%, 90% { transform: scaleX(1); }
  100%     { transform: scaleX(0); }
}

/* — Apparition en cascade : des elements qui se posent l'un apres l'autre — */
.uc-a-step { opacity: 0; animation: uc-appear 6s ease-out infinite; }
.uc-a-s1 { animation-delay: .15s; }
.uc-a-s2 { animation-delay: .9s; }
.uc-a-s3 { animation-delay: 1.65s; }
.uc-a-s4 { animation-delay: 2.4s; }
@keyframes uc-appear {
  0%       { opacity: 0; transform: translateY(6px); }
  8%, 86%  { opacity: 1; transform: translateY(0); }
  100%     { opacity: 0; transform: translateY(0); }
}

/* Gabarit a DEUX etats : sans cela, le cycle a trois temps laisserait 3 s de vide. */
.uc-anim[data-etats="2"] .uc-a-zone { animation-name: uc-zone2; animation-duration: 4s; }
.uc-anim[data-etats="2"] .uc-a-lab  { animation-name: uc-lab2;  animation-duration: 4s; }
.uc-anim[data-etats="2"] .uc-a-p2   { animation-delay: -2s; }

@keyframes uc-zone2 {
  0%       { opacity: 0; transform: scale(.9); }
  8%, 42%  { opacity: 1; transform: scale(1); }
  50%,100% { opacity: 0; transform: scale(.9); }
}
@keyframes uc-lab2 {
  0%, 49%  { opacity: 1; }
  50%,100% { opacity: 0; }
}

/* Mouvement reduit : on fige l'etat le plus explicite au lieu de tout couper —
   la semelle vissee ancree, la moulee deja glissee, et les trois profils visibles. */
@media (prefers-reduced-motion: reduce) {
  .uc-a-hold, .uc-a-soil, .uc-a-force, .uc-a-skid,
  .uc-a-slip, .uc-a-zone, .uc-a-lab,
  .uc-a-grow, .uc-a-step { animation: none !important; }
  .uc-a-grow  { transform: scaleX(1); }
  .uc-a-step  { opacity: 1; transform: none; }
  .uc-a-hold  { transform: translate(0, 0); }
  .uc-a-slip  { transform: translate(46px, 2px); }
  .uc-a-soil  { opacity: 1; }
  .uc-a-force, .uc-a-skid { opacity: 1; }
  .uc-a-zone  { opacity: .55; }
  .uc-a-lab   { opacity: 1; }
  .uc-a-p2, .uc-a-p3 { display: none; }   /* un seul profil lisible a l'arret */
}

/* ── 19 bis. RENDU DIFFERE DU CONTENU HORS ECRAN ────────────────────────────
   Un article fait environ 16 ecrans de haut. Sans cela, le navigateur calcule la
   mise en page et peint les 10 cartes produit, le tableau et la FAQ des le premier
   rendu, alors que rien n'est visible. `auto` memorise la hauteur reelle apres le
   premier passage : pas de saut d'ascenseur.
   Applique uniquement a des blocs SANS ancre de sommaire, pour ne pas gener la
   navigation par #ancre. */
@supports (content-visibility: auto) {
  .uc-picks,
  .uc-table-wrap,
  .uc-faq {
    content-visibility: auto;
    contain-intrinsic-size: auto 480px;
  }
}

/* ── 20. ACCESSIBILITÉ & IMPRESSION ─────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .uc-article *, .uc-article *::before, .uc-article *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}
/* Mode contraste eleve de Windows : les fonds pleins et les trames sont remplaces
   par le jeu de couleurs du systeme ; on preserve les bordures qui portent le sens. */
@media (forced-colors: active) {
  .uc-hero, .uc-band, .uc-stat, .uc-table thead th { border: 1px solid CanvasText; }
  .uc-hero::before, .uc-hero::after, .uc-band::before,
  .uc-stat::after { display: none; }
  .uc-btn, .uc-product-link { border: 2px solid ButtonText; }
  .uc-tag, .uc-box, .uc-product, .uc-anim-stage { border: 1px solid CanvasText; }
  .uc-anim-stage svg { forced-color-adjust: none; }
  .uc-check li::after { forced-color-adjust: none; }
}

@media print {
  /* Ces articles sont aussi livres en PDF au client : le rendu papier garde donc
     l'identite de marque au lieu de la neutraliser. print-color-adjust force le
     navigateur a imprimer les aplats, qu'il supprime par defaut pour economiser l'encre. */
  .uc-article,
  .uc-hero, .uc-band, .uc-stat, .uc-box, .uc-product, .uc-picks, .uc-tag,
  .uc-btn, .uc-product-link, .uc-table thead th, .uc-anim-stage, .uc-toc,
  .uc-verdict > *, .uc-steps li::before, .uc-check li::before {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* Le rendu differe doit etre neutralise : sinon un bloc jamais affiche a l'ecran
     peut sortir vide sur le papier. */
  .uc-picks, .uc-table-wrap, .uc-faq, .uc-anim { content-visibility: visible !important; }

  /* Les animations sont figees sur leur etat le plus explicite. */
  .uc-a-hold, .uc-a-slip, .uc-a-soil, .uc-a-force, .uc-a-skid,
  .uc-a-zone, .uc-a-lab, .uc-a-grow, .uc-a-step { animation: none !important; }
  .uc-a-grow { transform: scaleX(1); }
  .uc-a-step { opacity: 1; }
  .uc-a-hold { transform: translate(0, 0); }
  .uc-a-slip { transform: translate(46px, 2px); }
  .uc-a-force, .uc-a-skid, .uc-a-lab { opacity: 1; }
  .uc-a-zone { opacity: 1; }
  .uc-a-p2, .uc-a-p3 { display: none; }   /* un seul profil lisible a l'arret */

  .uc-article { max-width: none; font-size: 10.5pt; }
  .uc-anim-stage { overflow: visible; }
  .uc-anim-stage svg { width: 100%; }

  /* Les reponses de FAQ sont ouvertes : un <details> ferme sort vide a l'impression. */
  .uc-faq details { display: block; }
  .uc-faq details > p { display: block !important; }

  /* Coupures de page : rien d'illisible a cheval sur deux feuilles. */
  .uc-article h2, .uc-article h3 { break-after: avoid; }
  .uc-hero, .uc-box, .uc-product, .uc-verdict > *, .uc-anim, .uc-fig,
  .uc-band, .uc-stat, .uc-table tr { break-inside: avoid; }
  .uc-picks { break-inside: auto; }
}


/* ── 21. PLEINE LARGEUR ─────────────────────────────────────────────────────
   Doit rester en fin de feuille : .uc-picks, .uc-table-wrap et .uc-fig
   declarent `margin: <valeur> 0`, ce qui ecrasait un margin-inline defini plus
   haut a specificite egale. Le bloc gardait alors sa largeur elargie sans son
   decalage negatif : il debordait a droite au lieu d'etre centre.
   Sous 1024px : aucun elargissement (evite tout scroll horizontal).          */
@media (min-width: 64em) {
  /* Un sur-titre qui annonce un bloc elargi doit s'aligner sur CE bloc,
     pas sur la colonne de texte. */
  .uc-article .uc-kicker:has(+ .uc-wide),
  .uc-article .uc-wide {
    /* Debordement symetrique de 8rem de chaque cote, borne par la largeur
       visible. `100vw` inclut la barre de defilement : on retire 4rem pour ne
       jamais declencher de scroll horizontal. */
    --uc-bleed: 8rem;
    width: min(calc(100% + var(--uc-bleed) * 2), calc(100vw - 4rem));
    margin-left: calc((100% - min(calc(100% + var(--uc-bleed) * 2), calc(100vw - 4rem))) / 2);
    margin-right: calc((100% - min(calc(100% + var(--uc-bleed) * 2), calc(100vw - 4rem))) / 2);
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   22. SECTIONS A FOND D'ICONES  ·  uc-iconsec   (v3, 08/10/2026)
   Une section H2 entiere posee sur un fond de marque avec des icones de ligne
   qui flottent DERRIERE le texte. Ce ne sont PAS l'animation de l'article :
   l'animation explicative reste uc-anim, unique, et l'audit la compte seule.
   Les icones sont decoratives (aria-hidden), ne portent aucun sens, vivent
   uniquement dans les bandes hautes et basses rembourrees et, sur grand ecran,
   dans les gouttieres laterales : elles ne recouvrent jamais le texte.

   <section class="uc-iconsec uc-iconsec--terrain">
     <span class="uc-iconsec-bg" aria-hidden="true"> ...svg d'icones... </span>
     <div class="uc-iconsec-in"> <h2 id="...">...</h2> ...toute la section... </div>
   </section>

   Trois variantes, choisies selon le sujet de la section :
     --terrain   pelouse, ballon, plots        (lire le sol, choix par terrain)
     --materiel  chaussure, picots, lacets      (semelles, entretien, anatomie)
     --match     chrono, sifflet, gourde        (jour de match, choix selon le cas)
   Max 3 par article, jamais deux de suite, jamais sur un bloc produits ni la FAQ.
   Responsive jusqu'a 360px, contraste AA (texte encre sur fond clair),
   mouvement doux, fige en `prefers-reduced-motion`.
   ══════════════════════════════════════════════════════════════════════════ */
.uc-article .uc-iconsec {
  position: relative;
  isolation: isolate;
  /* Pas de `container-type` ici : il applique une containment de style qui
     reinitialise le compteur ucsection (le numero de maillot repartirait a 01
     dans chaque section imbriquee). On regle donc le responsive des icones au
     viewport (la colonne de lecture suit la largeur de l'ecran). */
  margin: var(--uc-s6) 0;
  border-radius: var(--uc-radius);
  overflow: hidden;
}
.uc-article .uc-iconsec-bg {
  position: absolute; inset: 0; z-index: 0;
  border-radius: inherit;
  overflow: hidden;
  pointer-events: none;
}
.uc-article .uc-iconsec-in {
  position: relative; z-index: 1;
  padding: 3.75rem clamp(1.25rem, .9rem + 1.6vw, 2.75rem) 3rem;
}
/* Le titre de section garde son identite (numero de maillot, filet) meme imbrique :
   le compteur ucsection s'incremente aussi ici, dans l'ordre du document. */
.uc-article .uc-iconsec-in > h2 {
  counter-increment: ucsection;
  scroll-margin-top: 6rem;
}
.uc-article .uc-iconsec-in > h2::after {
  content: counter(ucsection, decimal-leading-zero);
  position: absolute; top: var(--uc-s2); right: 0;
  font-family: var(--uc-display);
  font-size: clamp(2.25rem, 1.9rem + 1.8vw, 3.25rem);
  font-weight: 900; line-height: 1;
  color: var(--uc-ink);                 /* teinte de l'accent de la variante, voir plus bas */
  opacity: .1;                          /* filigrane discret, lisible sur le fond teinte */
  z-index: -1; pointer-events: none;
  letter-spacing: -.05em;
}
/* Rythme vertical a l'interieur (le selecteur `.uc-article > * + *` ne porte que
   sur les enfants directs de l'article, pas sur ceux de la section imbriquee). */
.uc-article .uc-iconsec-in > * + * { margin-top: var(--uc-s4); }
.uc-article .uc-iconsec-in > :first-child { margin-top: 0; }
.uc-article .uc-iconsec-in > :last-child { margin-bottom: 0; }
/* Un encadre pose sur un fond teinte prend une surface pleine pour rester lisible. */
.uc-article .uc-iconsec .uc-box { background: var(--uc-paper); }

/* ---- surfaces des variantes : aplats pleins des washes du systeme (zero degrade
   decoratif, conformement a la direction de la charte), liseret --uc-line. Le
   texte reste en encre : contraste AA sur chacun des washes. ---- */
.uc-article .uc-iconsec--terrain  { background: var(--uc-green-wash); border: 1px solid var(--uc-line); }
.uc-article .uc-iconsec--materiel { background: var(--uc-brand-wash); border: 1px solid var(--uc-line); }
.uc-article .uc-iconsec--match    { background: var(--uc-amber-wash); border: 1px solid var(--uc-line); }
/* teinte de l'accent reportee sur le filigrane du numero et le liseret du titre */
.uc-article .uc-iconsec--terrain  .uc-iconsec-in > h2::after { color: var(--uc-green); }
.uc-article .uc-iconsec--materiel .uc-iconsec-in > h2::after { color: var(--uc-brand-ink); }
.uc-article .uc-iconsec--match    .uc-iconsec-in > h2::after { color: var(--uc-amber); }

/* ---- couche d'icones : chaque <svg class="uc-ic"> est place par son rang ---- */
.uc-article .uc-iconsec .uc-ic { position: absolute; display: block; height: auto; }
.uc-article .uc-iconsec .uc-ic * { vector-effect: non-scaling-stroke; }
/* Positions communes aux trois variantes : bandes haute et basse, gouttieres.
   Les icones restent hors de la colonne de texte (padding de 3.75rem en haut). */
.uc-article .uc-iconsec .uc-ic:nth-child(1) { top:14px;  right:18px;      width:52px; opacity:.5; }
.uc-article .uc-iconsec .uc-ic:nth-child(2) { top:16px;  left:20px;       width:40px; opacity:.45; }
.uc-article .uc-iconsec .uc-ic:nth-child(3) { bottom:14px;right:26px;      width:46px; opacity:.42; }
.uc-article .uc-iconsec .uc-ic:nth-child(4) { bottom:16px;left:22px;       width:34px; opacity:.4; }
.uc-article .uc-iconsec .uc-ic:nth-child(5) { top:22px;  left:48%;        width:14px; opacity:.5; }
.uc-article .uc-iconsec .uc-ic:nth-child(6) { top:46%;   right:12px;      width:20px; opacity:.4; }
.uc-article .uc-iconsec .uc-ic:nth-child(7) { top:52%;   left:12px;       width:16px; opacity:.38; }
/* teinte des traits par variante */
.uc-article .uc-iconsec--terrain  .uc-ic { color: var(--uc-green); }
.uc-article .uc-iconsec--materiel .uc-ic { color: var(--uc-brand-ink); }
.uc-article .uc-iconsec--match    .uc-ic { color: var(--uc-amber); }

/* ---- mouvement doux, lent, sans clignotement ---- */
@keyframes uc-ic-bob   { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-5px)} }
@keyframes uc-ic-drift { from{transform:translateX(-7px)} to{transform:translateX(9px)} }
@keyframes uc-ic-sway  { 0%,100%{transform:rotate(-5deg)} 50%{transform:rotate(5deg)} }
@keyframes uc-ic-tw    { 0%,100%{opacity:.25} 50%{opacity:.6} }
@media (prefers-reduced-motion: no-preference) {
  .uc-article .uc-iconsec .uc-ic { transform-box: fill-box; transform-origin: center; }
  .uc-article .uc-iconsec .uc-ic:nth-child(1) { animation: uc-ic-bob   9s  ease-in-out infinite; }
  .uc-article .uc-iconsec .uc-ic:nth-child(2) { animation: uc-ic-drift 22s ease-in-out infinite alternate; }
  .uc-article .uc-iconsec .uc-ic:nth-child(3) { animation: uc-ic-drift 27s ease-in-out -6s infinite alternate-reverse; }
  .uc-article .uc-iconsec .uc-ic:nth-child(4) { animation: uc-ic-sway  12s ease-in-out infinite; }
  .uc-article .uc-iconsec .uc-ic:nth-child(5) { animation: uc-ic-tw    6s  ease-in-out infinite; }
  .uc-article .uc-iconsec .uc-ic:nth-child(6) { animation: uc-ic-bob   8s  ease-in-out -3s infinite; }
  .uc-article .uc-iconsec .uc-ic:nth-child(7) { animation: uc-ic-tw    7s  ease-in-out -2s infinite; }
}
/* ---- etroit (< 640px de viewport) : gouttieres masquees, bandes plus fines ---- */
@media (max-width: 40em) {
  .uc-article .uc-iconsec-in { padding: 3.25rem 1.25rem 2.5rem; }
  .uc-article .uc-iconsec .uc-ic:nth-child(6),
  .uc-article .uc-iconsec .uc-ic:nth-child(7) { display: none; }
  .uc-article .uc-iconsec .uc-ic:nth-child(1) { width: 42px; }
  .uc-article .uc-iconsec .uc-ic:nth-child(3) { width: 38px; }
}
/* ---- contraste eleve Windows et impression : on retire fond et icones ---- */
@media (forced-colors: active) {
  .uc-article .uc-iconsec { border: 1px solid CanvasText; }
  .uc-article .uc-iconsec-bg { display: none; }
}
@media print {
  .uc-article .uc-iconsec { background: none !important; border: 0; }
  .uc-article .uc-iconsec-bg { display: none !important; }
  .uc-article .uc-iconsec-in { padding: 0; }
}

/* ══════════════════════════════════════════════════════════════════════════
   23. FICHE PRODUIT DISCRETE  ·  uc-pnote   (v3, 08/10/2026)
   Une petite carte posee dans le fil du texte, la ou le propos amene vraiment
   vers un type de produit. Vignette reelle du catalogue, nom du produit, UNE
   ligne de fait tiree du catalogue (jamais de specification inventee), lien vers
   la fiche produit. Jamais avant la reponse, 2 par article au maximum. Elle ne
   remplace pas un bloc uc-picks : c'est un rappel contextuel, discret.
   <aside class="uc-pnote">
     <a class="uc-pnote-ico" href="FICHE"><img src="VIGNETTE" alt="..."></a>
     <div class="uc-pnote-body">
       <p class="uc-pnote-name">Nom du produit</p>
       <p class="uc-pnote-fact">Une ligne de fait du catalogue.</p>
       <a class="uc-pnote-link" href="FICHE">Voir la fiche</a>
     </div>
   </aside>
   ══════════════════════════════════════════════════════════════════════════ */
.uc-article .uc-pnote {
  display: grid;
  grid-template-columns: 76px minmax(0,1fr);
  gap: var(--uc-s3);
  align-items: center;
  margin: var(--uc-s4) 0;
  padding: var(--uc-s3);
  background: var(--uc-paper);
  border: 1px solid var(--uc-line);
  border-left: 4px solid var(--uc-brand);
  border-radius: 0 var(--uc-radius-sm) var(--uc-radius-sm) 0;
}
.uc-article .uc-pnote-ico {
  display: block; width: 76px; height: 76px;
  border-radius: var(--uc-radius-sm);
  overflow: hidden; background: #fff;
  box-shadow: none !important;
}
.uc-article .uc-pnote-ico img { display: block; width: 100%; height: 100%; object-fit: contain; }
.uc-article .uc-pnote-body { min-width: 0; }
.uc-article .uc-pnote-name {
  margin: 0; font-family: var(--uc-display);
  font-weight: 700; font-size: 1rem; line-height: 1.35;
  letter-spacing: -.01em; color: var(--uc-ink);
}
.uc-article .uc-pnote-fact {
  margin: .25rem 0 0; font-size: .875rem; line-height: 1.5; color: var(--uc-ink-3);
}
.uc-article .uc-pnote-link:not(.uc-btn) {
  display: inline-block; margin-top: .4rem;
  font-family: var(--uc-mono);
  font-size: .75rem; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--uc-brand-ink);
  box-shadow: none !important; background: none !important;
  text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px;
}
.uc-article .uc-pnote-link:not(.uc-btn):hover { text-decoration-thickness: 2px; }
.uc-article .uc-pnote-link::after {
  content: ""; display: inline-block;
  width: .7rem; height: .7rem; margin-left: .25rem; vertical-align: -1px;
  border: solid currentColor; border-width: 0 2px 2px 0;
  transform: rotate(-45deg);
}
@media (max-width: 26.5625em) {
  .uc-article .uc-pnote { grid-template-columns: 60px minmax(0,1fr); gap: var(--uc-s2); }
  .uc-article .uc-pnote-ico { width: 60px; height: 60px; }
}
@media print {
  .uc-article .uc-pnote { break-inside: avoid; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   23. « LE TERRAIN »  ·  uc-zone   (v4, 10/10/2026)
   Chaque section H2 recoit, une sur deux, une bande « zone de terrain » posee par le code (outils/design/relayout_uc.py) :
     pelouse  rayures de tonte en aplats + marquage a la craie du sport de la section (poteaux en H / but et surface / les deux)
     plan     papier millimetre bleu de la marque, pour la technique (semelle, taille, matieres, budget, entretien)
     arbitre  sifflet et carton jaune, pour le reglement
     tableau  tableau tactique a la craie (croix, ronds, fleches), une par article, sur la section « postes »
     stade    stade de nuit : encre, trame de picots de la marque, marquage blanc (bande sombre quand aucune section « postes »)
   + badge de section (semelle, chaussure, regle graduee, sifflet, etiquette, chrono, tactique, question),
   + icones du BON sport qui flottent derriere le texte, + pause « rangee de crampons » apres trois paragraphes,
   + marquage du terrain dans l'en-tete.
   Charte respectee : aplats (les seuls « degrades » sont des rayures et un quadrillage a bords nets), IBM Plex Sans,
   bleu #6699FF, plaques a coins de 4 px. Les elements ajoutes portent `hidden` : sans cette feuille, l'article est inchange.
   ═══════════════════════════════════════════════════════════════════════════ */
.uc-article {
  --uc-pelouse: #0B7A3E;
  --uc-pelouse-a: #E6F3EA;
  --uc-pelouse-b: #DCEEE2;
  --uc-craie: #FFFFFF;
  --uc-carton: #F5C518;
  --uc-ardoise: #0F1A14;
  --uc-zone-pad: clamp(1.1rem, .6rem + 2.2vw, 2.5rem);
}

/* ── la bande ─────────────────────────────────────────────────────────────── */
.uc-article .uc-zone {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin-inline: calc(-1 * var(--uc-zone-pad) + .25rem);
  border-radius: var(--uc-radius);
}
.uc-article > .uc-zone { margin-top: var(--uc-s6); }
.uc-article > .uc-zone + * { margin-top: var(--uc-s6); }
.uc-article .uc-zone--plain { overflow: visible; margin-inline: 0; border-radius: 0; }
.uc-article .uc-zone-in {
  position: relative; z-index: 1;
  padding: clamp(2rem, 1.5rem + 2vw, 3rem) var(--uc-zone-pad) clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem);
}
.uc-article .uc-zone--plain .uc-zone-in { padding: 0; }
.uc-article .uc-zone-in > * + * { margin-top: var(--uc-s4); }
.uc-article .uc-zone-in > :last-child { margin-bottom: 0; }
.uc-article .uc-zone-bg { display: block; position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }

/* le titre garde son identite : filet, numero de maillot (le compteur avance aussi ici, dans l'ordre du document) */
.uc-article .uc-zone-in > h2 { counter-increment: ucsection; scroll-margin-top: 6rem; margin-top: var(--uc-s3); }
.uc-article .uc-zone-in > h2::after {
  content: counter(ucsection, decimal-leading-zero);
  position: absolute; top: var(--uc-s2); right: 0;
  font-family: var(--uc-display);
  font-size: clamp(2.25rem, 1.9rem + 1.8vw, 3.25rem);
  font-weight: 900; line-height: 1; letter-spacing: -.05em;
  color: var(--uc-ink); opacity: .1;
  z-index: -1; pointer-events: none;
}
.uc-article .uc-zone--plain .uc-zone-in > h2::after { color: var(--uc-line-2); opacity: 1; }

/* badge de section : plaque pleine a coins de 4 px, pictogramme du theme */
.uc-article .uc-zone-badge {
  display: flex; align-items: center; justify-content: center;
  width: 3.25rem; height: 3.25rem;
  border-radius: 4px;
  background: var(--uc-ink); color: #fff;
  box-shadow: 4px 4px 0 var(--uc-brand);
}
.uc-article .uc-zone--plain .uc-zone-badge { margin-top: var(--uc-s7); }
.uc-article .uc-badge-ic { display: block; width: 1.65rem; height: 1.65rem; }

/* blocs larges : dans une bande, ils occupent la bande (moins une marge), jamais au-dela */
@media (min-width: 64em) {
  .uc-article .uc-zone:not(.uc-zone--plain) .uc-zone-in > :is(.uc-wide, .uc-kicker:has(+ .uc-wide)) {
    width: calc(100% + 2 * var(--uc-zone-pad) - 2rem);
    margin-left: calc(1rem - var(--uc-zone-pad));
    margin-right: calc(1rem - var(--uc-zone-pad));
  }
}
/* cartes, encadres, tableaux : toujours sur papier, la bande ne traverse pas une carte */
.uc-article .uc-zone:not(.uc-zone--plain) :is(.uc-box, .uc-table-wrap, .uc-verdict > *, .uc-product, .uc-faq details, .uc-toc) { background-color: var(--uc-paper); }

/* ── 1. VESTIAIRE (classe uc-zone--pelouse) : gris clair de la marque + marquage du terrain en lignes grises ───────────
   10/10/2026 : le vert raye ne collait pas au site (noir, blanc, bleu) ; remplace par ce gris neutre, plus calme pour l'oeil. */
.uc-article .uc-zone--pelouse { background: #F3F4F6; border: 1px solid #E4E6EA; }
.uc-article .uc-zone--pelouse .uc-zone-bg { color: var(--uc-ink-3); }
.uc-article .uc-zone--pelouse .uc-marquage { color: #CDD1D8; opacity: 1; }
.uc-article .uc-zone--pelouse .uc-zone-badge { background: var(--uc-ink); box-shadow: 4px 4px 0 var(--uc-brand); }
.uc-article .uc-zone--pelouse .uc-zone-bg .uc-fic { opacity: .28; }

/* ── 2. PLAN TECHNIQUE : papier millimetre bleu ────────────────────────────── */
.uc-article .uc-zone--plan {
  background-color: var(--uc-brand-wash);
  background-image:
    linear-gradient(rgba(102,153,255,.16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(102,153,255,.16) 1px, transparent 1px),
    linear-gradient(rgba(102,153,255,.30) 1px, transparent 1px),
    linear-gradient(90deg, rgba(102,153,255,.30) 1px, transparent 1px);
  background-size: 16px 16px, 16px 16px, 80px 80px, 80px 80px;
  border: 1px solid #D5E1FF;
}
.uc-article .uc-zone--plan .uc-zone-bg { color: var(--uc-brand-ink); }
.uc-article .uc-zone--plan .uc-marquage { color: var(--uc-brand); opacity: .22; }
.uc-article .uc-zone--plan .uc-zone-badge { background: var(--uc-brand-ink); box-shadow: 4px 4px 0 var(--uc-ink); }

/* ── 3. ARBITRE : sifflet et carton jaune ──────────────────────────────────── */
.uc-article .uc-zone--arbitre { background: #FFF6DA; border: 1px solid #F0E0A8; }
.uc-article .uc-zone--arbitre::before {          /* le carton, brandi dans le coin */
  content: ""; position: absolute; z-index: 0;
  top: -14px; right: 38px; width: 64px; height: 92px;
  background: var(--uc-carton); border-radius: 6px;
  transform: rotate(14deg);
  box-shadow: 6px 6px 0 rgba(10,10,11,.10);
}
.uc-article .uc-zone--arbitre .uc-zone-bg { color: var(--uc-amber); }
.uc-article .uc-zone--arbitre .uc-marquage { color: var(--uc-amber); opacity: .13; }
.uc-article .uc-zone--arbitre .uc-zone-badge { background: var(--uc-carton); color: var(--uc-ink); box-shadow: 4px 4px 0 var(--uc-ink); }
.uc-article .uc-zone--arbitre .uc-zone-in > h2 { padding-right: 7.5rem; }

/* ── 4 et 5. BANDES SOMBRES : tableau tactique, stade de nuit ──────────────
   Elles reprennent la variante sombre du systeme (memes jetons que data-theme="dark") : tous les composants restent lisibles. */
.uc-article .uc-zone--tableau, .uc-article .uc-zone--stade {
  --uc-ink: #F4F5F7; --uc-ink-2: #E4E6EA; --uc-ink-3: #C3C7CE;
  --uc-muted: #A3A9B3; --uc-line: #2A2C32; --uc-line-2: #202228;
  --uc-paper: #14161A; --uc-paper-2: #1B1D22;
  --uc-brand-ink: #9DBBFF; --uc-brand-wash: #131A2A;
  --uc-alert-ink: #FF8A8B; --uc-alert-wash: #241617;
  --uc-green: #4CC488; --uc-green-wash: #102018; --uc-amber: #E6A84A; --uc-amber-wash: #211A10;
  color: var(--uc-ink);
}
.uc-article .uc-zone--tableau { background: var(--uc-ardoise); border: 1px solid #1E2E25; }
.uc-article .uc-zone--tableau .uc-zone-bg { color: var(--uc-craie); }
.uc-article .uc-zone--tableau .uc-craie { color: var(--uc-craie); opacity: .5; }
.uc-article .uc-zone--stade { background: #0A0A0B; }
.uc-article .uc-zone--stade::before {            /* trame de picots de la marque */
  content: ""; position: absolute; inset: 0; z-index: 0;
  background-image: var(--uc-studs); background-size: 14px 14px; opacity: .9;
}
.uc-article .uc-zone--stade::after {             /* la ligne de touche bleue de l'en-tete, en rappel */
  content: ""; position: absolute; z-index: 0; top: -10%; right: -4%; width: 9%; height: 120%;
  transform: skewX(-14deg); background: var(--uc-brand); opacity: .9;
}
.uc-article .uc-zone--stade .uc-zone-bg { color: var(--uc-craie); }
.uc-article .uc-zone--stade .uc-marquage { color: var(--uc-craie); opacity: .16; }
.uc-article :is(.uc-zone--tableau, .uc-zone--stade) .uc-zone-in > h2 { border-top-color: var(--uc-craie); }
.uc-article :is(.uc-zone--tableau, .uc-zone--stade) .uc-zone-in > h2::after { color: var(--uc-craie); opacity: .14; }
.uc-article :is(.uc-zone--tableau, .uc-zone--stade) .uc-zone-badge { background: var(--uc-craie); color: var(--uc-ardoise); box-shadow: 4px 4px 0 var(--uc-brand); }
.uc-article :is(.uc-zone--tableau, .uc-zone--stade) .uc-zone-in > :is(p, ul, ol) a:not(.uc-btn) { color: #A9C4FF; }
/* tuiles chiffrees : fond d'encre dans le systeme clair ; ici on les pose sur une plaque sombre bordee pour qu'elles restent lisibles */
.uc-article :is(.uc-zone--tableau, .uc-zone--stade) .uc-stat { background: #1C2622; color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.16); }
.uc-article .uc-zone--stade .uc-stat { background: #17181C; }
.uc-article :is(.uc-zone--tableau, .uc-zone--stade) .uc-stat :is(.uc-stat-num, .uc-stat-label) { color: inherit; }
.uc-article .uc-zone--stade .uc-zone-in > h2 { padding-right: 6rem; }

/* ── marquage et icones flottantes ─────────────────────────────────────── */
/* le marquage couvre toute la bande, comme les lignes d'une vraie pelouse ; la craie du tableau reste en haut a droite */
.uc-article .uc-zone-bg .uc-marquage { position: absolute; inset: 0; width: 100%; height: 100%; }
.uc-article .uc-zone-bg .uc-craie { position: absolute; top: 10px; right: -8px; width: min(56%, 430px); height: auto; }
.uc-article .uc-zone-bg .uc-fic { position: absolute; display: block; height: auto; overflow: visible; opacity: .4; }
.uc-article .uc-zone-bg .f1 { top: 18px; right: 22px; width: 52px; opacity: .42; }
.uc-article .uc-zone-bg .f2 { bottom: 18px; left: 8px; width: 30px; }
.uc-article .uc-zone-bg .f3 { top: 38%; right: 12px; width: 34px; }
.uc-article .uc-zone-bg .f4 { top: 18px; left: 44%; width: 30px; opacity: .34; }
.uc-article .uc-zone-bg .f5 { bottom: 26px; right: 30%; width: 34px; }
.uc-article .uc-zone-bg .f6 { top: 62%; left: 6px; width: 24px; opacity: .34; }
.uc-article .uc-zone-bg .f7 { bottom: 70px; right: 18px; width: 40px; }
.uc-article .uc-zone-bg .f8 { top: 30%; left: 8px; width: 16px; opacity: .45; }
.uc-article :is(.uc-zone--tableau, .uc-zone--stade) .uc-zone-bg .uc-fic { opacity: .3; }
.uc-article .uc-zone--arbitre .uc-zone-bg .f1 { display: none; }   /* le carton occupe ce coin */
@keyframes uc-fic-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes uc-fic-roule { from { transform: translateX(-8px) rotate(-14deg); } to { transform: translateX(10px) rotate(14deg); } }
@keyframes uc-fic-tw { 0%, 100% { opacity: .2; transform: scale(.85); } 50% { opacity: .6; transform: scale(1.1); } }
@media (prefers-reduced-motion: no-preference) {
  .uc-article .uc-zone-bg .uc-fic { transform-box: fill-box; transform-origin: center; }
  .uc-article .uc-zone-bg .f1 { animation: uc-fic-roule 9s ease-in-out infinite alternate; }
  .uc-article .uc-zone-bg .f2 { animation: uc-fic-bob 10s ease-in-out -2s infinite; }
  .uc-article .uc-zone-bg .f3 { animation: uc-fic-roule 12s ease-in-out -4s infinite alternate; }
  .uc-article .uc-zone-bg .f5 { animation: uc-fic-bob 9s ease-in-out -5s infinite; }
  .uc-article .uc-zone-bg .f7 { animation: uc-fic-bob 11s ease-in-out -3s infinite; }
  .uc-article .uc-zone-bg .f8 { animation: uc-fic-tw 6s ease-in-out infinite; }
}

/* ── pause : une rangee de crampons entre deux lignes de craie (vissé au rugby, moule au football) ── */
.uc-article .uc-pause {
  display: flex; align-items: center; height: 26px; margin-block: var(--uc-s5);
  background: no-repeat center / 120px 26px;
}
.uc-article .uc-pause::before, .uc-article .uc-pause::after { content: ""; flex: 1; border-top: 2px dashed var(--uc-line); }
.uc-article .uc-pause::before { margin-right: 76px; }
.uc-article .uc-pause::after { margin-left: 76px; }
.uc-article .uc-pause--rugby { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 26' fill='none' stroke='%230A0A0B' stroke-width='1.6'><g fill='%23E2E4E9'><circle cx='16' cy='13' r='8'/><circle cx='42' cy='13' r='8'/><circle cx='68' cy='13' r='8'/><circle cx='94' cy='13' r='8' fill='%236699FF'/></g><path d='M16 8l4.3 2.5v5L16 18l-4.3-2.5v-5zM42 8l4.3 2.5v5L42 18l-4.3-2.5v-5zM68 8l4.3 2.5v5L68 18l-4.3-2.5v-5zM94 8l4.3 2.5v5L94 18l-4.3-2.5v-5z'/></svg>"); }
.uc-article .uc-pause--foot { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 26' fill='%23E2E4E9' stroke='%230A0A0B' stroke-width='1.6'><rect x='8' y='6' width='9' height='14' rx='4.5'/><rect x='24' y='6' width='9' height='14' rx='4.5'/><rect x='40' y='9' width='22' height='8' rx='4'/><rect x='70' y='6' width='9' height='14' rx='4.5'/><rect x='86' y='6' width='9' height='14' rx='4.5' fill='%236699FF'/><rect x='102' y='6' width='9' height='14' rx='4.5'/></svg>"); }
.uc-article .uc-pause--mixte { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 26' fill='%23E2E4E9' stroke='%230A0A0B' stroke-width='1.6'><circle cx='18' cy='13' r='8'/><path d='M18 8l4.3 2.5v5L18 18l-4.3-2.5v-5z' fill='none'/><circle cx='46' cy='13' r='8' fill='%236699FF'/><path d='M46 8l4.3 2.5v5L46 18l-4.3-2.5v-5z' fill='none'/><rect x='70' y='6' width='9' height='14' rx='4.5'/><rect x='86' y='6' width='9' height='14' rx='4.5'/><rect x='102' y='6' width='9' height='14' rx='4.5'/></svg>"); }
.uc-article :is(.uc-zone--tableau, .uc-zone--stade) .uc-pause { filter: invert(1) hue-rotate(180deg); }
.uc-article :is(.uc-zone--tableau, .uc-zone--stade) .uc-pause::before, .uc-article :is(.uc-zone--tableau, .uc-zone--stade) .uc-pause::after { border-top-color: #8C93A0; }

/* ── en-tete : le marquage du terrain du sport, a la craie ──────────────── */
.uc-hero-terrain { display: block; position: absolute; z-index: -1; left: -2%; bottom: -10%; width: 72%; pointer-events: none; color: #fff; opacity: .13; }
.uc-hero-terrain .uc-marquage { display: block; width: 100%; height: auto; transform: scaleX(-1); }

/* ── petits ecrans ─────────────────────────────────────────────────────── */
@media (max-width: 40em) {
  .uc-article .uc-zone { margin-inline: -.6rem; border-radius: 12px; }
  .uc-article .uc-zone--plain { margin-inline: 0; }
  .uc-article .uc-zone-bg .uc-craie { width: 82%; }
  .uc-article .uc-zone-bg :is(.f3, .f4, .f6, .f8) { display: none; }
  .uc-article .uc-zone-bg .f1 { width: 40px; top: 12px; right: 12px; }
  .uc-article .uc-zone--arbitre::before { width: 46px; height: 66px; right: 16px; }
  .uc-article .uc-zone--arbitre .uc-zone-in > h2 { padding-right: 4.5rem; }
  .uc-article .uc-zone-badge { width: 2.9rem; height: 2.9rem; }
  .uc-article .uc-badge-ic { width: 1.45rem; height: 1.45rem; }
  .uc-article .uc-zone--stade::after { width: 12%; }
}
@media (prefers-reduced-motion: reduce) { .uc-article .uc-zone-bg .uc-fic { animation: none !important; } }
@media (forced-colors: active) { .uc-article .uc-zone-bg, .uc-hero-terrain, .uc-article .uc-pause { display: none; } .uc-article .uc-zone { border: 1px solid CanvasText; } }
@media print {
  .uc-article .uc-zone-bg, .uc-hero-terrain, .uc-article .uc-pause, .uc-article .uc-zone--stade::before, .uc-article .uc-zone--stade::after, .uc-article .uc-zone--arbitre::before { display: none !important; }
  .uc-article .uc-zone { background: none !important; border: 1px solid #ccc; }
}

/* Dans une bande sombre, les cartes (produits, animation, tableau, encadres, pour/contre, FAQ) restent sur papier clair avec les
   jetons clairs : une photo produit fondue en `multiply` sur un papier sombre devenait un carre gris. */
.uc-article :is(.uc-zone--tableau, .uc-zone--stade) :is(.uc-picks, .uc-anim, .uc-table-wrap, .uc-box, .uc-verdict, .uc-faq, .uc-pnote) {
  --uc-ink: #0A0A0B; --uc-ink-2: #1C1D21; --uc-ink-3: #3A3C43; --uc-muted: #63676F; --uc-line: #E2E4E9; --uc-line-2: #F0F1F4;
  --uc-paper: #FFFFFF; --uc-paper-2: #F7F8FA; --uc-brand-ink: #1D4FD8; --uc-brand-wash: #EEF3FF;
  --uc-alert-ink: #A5171B; --uc-alert-wash: #FDF1F1; --uc-green: #0B7A3E; --uc-green-wash: #EFF8F2; --uc-amber: #96590A; --uc-amber-wash: #FDF6EA;
  color: var(--uc-ink);
}
.uc-article :is(.uc-zone--tableau, .uc-zone--stade) .uc-anim { background-color: var(--uc-paper); border-radius: var(--uc-radius-sm); }

/* ── PARALLAXE (CSS pur, pilotee par le defilement, zero script) ─────────────
   Seuls de petits elements decoratifs bougent, chacun a sa vitesse : icones flottantes, marquage a la craie, carton d'arbitre,
   lignes de l'en-tete. On anime la propriete `translate` (independante de `transform`) : elle se compose avec le flottement
   deja en place et reste sur le processeur graphique (aucun recalcul de mise en page, aucun cout au chargement).
   Navigateurs sans animations au defilement : les elements restent immobiles, rien ne casse. Mouvement reduit : rien ne bouge. */
@keyframes uc-px { from { translate: 0 calc(-1 * var(--uc-px, 20px)); } to { translate: 0 var(--uc-px, 20px); } }
@keyframes uc-px-carton { from { translate: 0 -12px; rotate: -6deg; } to { translate: 0 16px; rotate: 8deg; } }
@supports (animation-timeline: view()) {
  /* chronologies nommees, portees par la bande et l'en-tete : `overflow: hidden` fait de ces blocs des zones de defilement,
     une chronologie view() posee sur les icones se calerait sur elles (immobiles) au lieu du defilement de la page */
  .uc-article .uc-zone:not(.uc-zone--plain) { view-timeline: --uc-zone block; }
  .uc-article .uc-hero { view-timeline: --uc-hero block; }
  @media (prefers-reduced-motion: no-preference) {
    .uc-article .uc-zone-bg :is(.uc-marquage, .uc-craie) { --uc-px: 14px; animation: uc-px linear both; animation-timeline: --uc-zone; }
    .uc-article .uc-zone-bg .uc-craie { --uc-px: 24px; }
    .uc-article .uc-zone-bg .f1 { --uc-px: 34px; animation: uc-fic-roule 9s ease-in-out infinite alternate, uc-px linear both; animation-timeline: auto, --uc-zone; }
    .uc-article .uc-zone-bg .f2 { --uc-px: 18px; animation: uc-fic-bob 10s ease-in-out -2s infinite, uc-px linear both; animation-timeline: auto, --uc-zone; }
    .uc-article .uc-zone-bg .f3 { --uc-px: -26px; animation: uc-fic-roule 12s ease-in-out -4s infinite alternate, uc-px linear both; animation-timeline: auto, --uc-zone; }
    .uc-article .uc-zone-bg .f4 { --uc-px: 22px; animation: uc-px linear both; animation-timeline: --uc-zone; }
    .uc-article .uc-zone-bg .f5 { --uc-px: -30px; animation: uc-fic-bob 9s ease-in-out -5s infinite, uc-px linear both; animation-timeline: auto, --uc-zone; }
    .uc-article .uc-zone-bg .f6 { --uc-px: 28px; animation: uc-px linear both; animation-timeline: --uc-zone; }
    .uc-article .uc-zone-bg .f7 { --uc-px: 40px; animation: uc-fic-bob 11s ease-in-out -3s infinite, uc-px linear both; animation-timeline: auto, --uc-zone; }
    .uc-article .uc-zone-bg .f8 { --uc-px: -18px; animation: uc-fic-tw 6s ease-in-out infinite, uc-px linear both; animation-timeline: auto, --uc-zone; }
    .uc-article .uc-zone--arbitre::before { animation: uc-px-carton linear both; animation-timeline: --uc-zone; }
    .uc-hero-terrain { --uc-px: 26px; animation: uc-px linear both; animation-timeline: --uc-hero; }
  }
}

/* le marquage couvre des bandes tres hautes : le dessin s'agrandit, ses traits NON (vraies lignes de craie, 2,5 px partout) */
.uc-article .uc-zone-bg .uc-marquage :is(path, circle) { vector-effect: non-scaling-stroke; stroke-width: 2.5px; }
.uc-hero-terrain .uc-marquage :is(path, circle) { vector-effect: non-scaling-stroke; stroke-width: 2px; }

/* ═══════════════════════════════════════════════════════════════════════════
   24. FINITIONS « STUDIO »  (v4.1, 10/10/2026)
   Portee : UNIQUEMENT les articles mis en page « Le Terrain » (.uc-article:has(.uc-zone-in)). Les articles deja en ligne ne
   changent pas. Zero image, zero police, zero script en plus : uniquement de la typographie, des espacements et des etats.
   Principe : retenue. Un seul motif fort par bande (le marquage), un repere de section net (pictogramme + numero de maillot
   detoure), une colonne de lecture calme, des fiches produit posees sur un socle comme en boutique.
   Boutons : identiques au site (decision du client), seuls leurs etats sont soignes.
   ═══════════════════════════════════════════════════════════════════════════ */
.uc-article:has(.uc-zone-in) {
  --uc-fs-h2: clamp(1.8rem, 1.22rem + 2.3vw, 2.7rem);
  --uc-fs-hero: clamp(2.15rem, 1.45rem + 2.9vw, 3.5rem);
  --uc-fs-lead: clamp(1.17rem, 1.08rem + .42vw, 1.4rem);
  --uc-studio-ease: cubic-bezier(.2, .7, .2, 1);
}

/* ── en-tete : plus d'air, titre plus affirme ─────────────────────────── */
.uc-article:has(.uc-zone-in) .uc-hero { padding: clamp(2.25rem, 1.4rem + 3.4vw, 4rem) clamp(1.4rem, .8rem + 2.6vw, 3rem); }
.uc-article:has(.uc-zone-in) .uc-hero h2 { font-weight: 800; letter-spacing: -.035em; line-height: 1; max-width: 16ch; margin-bottom: var(--uc-s4); }
.uc-article:has(.uc-zone-in) .uc-hero p { max-width: 31rem; color: #E1E4EA; }
.uc-article:has(.uc-zone-in) .uc-hero-kicker { border-color: rgba(102,153,255,.7); color: #CFDDFF; }

/* ── colonne de lecture : mesure et gris d'encre ──────────────────────── */
/* chapeau : fond translucide teinte du bleu de la marque, filet de marque a gauche, premiere ligne appuyee (accroche), le
   reste en texte courant. Aucun texte ajoute, ne depend ni du premier caractere ni de la longueur du chapeau : vaut pour
   tous les articles mis en page. Le fond reste translucide (se lit sur clair comme sur sombre), le texte garde l'encre. */
.uc-article:has(.uc-zone-in) .uc-lead {
  color: var(--uc-ink); font-weight: 400; letter-spacing: -.012em; line-height: 1.5;
  padding: clamp(.9rem, .7rem + .9vw, 1.35rem) clamp(1rem, .75rem + 1.2vw, 1.6rem);
  background: var(--uc-brand-wash);                                               /* repli si color-mix n'est pas compris */
  background: color-mix(in srgb, var(--uc-brand) 9%, transparent);
  border-left: 4px solid var(--uc-brand);
  border-radius: 0 var(--uc-radius-sm) var(--uc-radius-sm) 0;
}
.uc-article:has(.uc-zone-in) .uc-lead::first-line { font-weight: 600; }
.uc-article:has(.uc-zone-in) > p:not([class]), .uc-article:has(.uc-zone-in) .uc-zone-in > p:not([class]) { color: var(--uc-ink-2); }

/* ── titres de section ────────────────────────────────────────────────── */
.uc-article:has(.uc-zone-in) .uc-zone-in > h2 {
  font-weight: 700; letter-spacing: -.032em; line-height: 1.06; text-wrap: balance;
  padding-right: 0; padding-top: var(--uc-s3); border-top-width: 2px;
  counter-increment: none;                         /* le numero passe dans le repere de section, ci-dessous */
}
.uc-article:has(.uc-zone-in) .uc-zone-in > h2::after { content: none; }

/* ── repere de section : pictogramme + numero de maillot detoure ───────── */
.uc-article:has(.uc-zone-in) .uc-zone-badge {
  position: relative; counter-increment: ucsection;
  width: 3rem; height: 3rem; border-radius: 4px;
  box-shadow: 3px 3px 0 var(--uc-brand);
  margin-bottom: var(--uc-s3);
}
.uc-article:has(.uc-zone-in) .uc-zone-badge::after {
  content: counter(ucsection, decimal-leading-zero);
  position: absolute; left: calc(100% + .9rem); top: 50%; transform: translateY(-52%);
  font-family: var(--uc-display); font-weight: 800; font-size: 2.6rem; line-height: 1; letter-spacing: -.05em;
  font-variant-numeric: tabular-nums;
  color: transparent; -webkit-text-stroke: 1.4px var(--uc-ink); opacity: .55;
}
.uc-article:has(.uc-zone-in) :is(.uc-zone--tableau, .uc-zone--stade) .uc-zone-badge::after { -webkit-text-stroke-color: #fff; opacity: .5; }
.uc-article:has(.uc-zone-in) .uc-badge-ic { width: 1.5rem; height: 1.5rem; }
.uc-article:has(.uc-zone-in) .uc-zone--plain .uc-zone-badge { margin-top: var(--uc-s7); }

/* ── bandes : plus d'air, une seule grande icone recadree dans le coin, les autres discretes ── */
.uc-article:has(.uc-zone-in) .uc-zone:not(.uc-zone--plain) { border-radius: 20px; }
.uc-article:has(.uc-zone-in) .uc-zone:not(.uc-zone--plain) .uc-zone-in { padding: clamp(2.25rem, 1.5rem + 3vw, 3.5rem) var(--uc-zone-pad) clamp(2rem, 1.4rem + 2.4vw, 3rem); }
.uc-article:has(.uc-zone-in) .uc-zone-bg :is(.f2, .f4, .f6, .f8) { display: none; }
.uc-article:has(.uc-zone-in) .uc-zone-bg .f1 { width: 132px; top: -26px; right: -24px; opacity: .1; }
.uc-article:has(.uc-zone-in) :is(.uc-zone--tableau, .uc-zone--stade) .uc-zone-bg .f1 { opacity: .12; }
.uc-article:has(.uc-zone-in) .uc-zone-bg :is(.f3, .f5, .f7) { opacity: .2; width: 26px; }
.uc-article:has(.uc-zone-in) .uc-zone-bg .uc-marquage :is(path, circle) { stroke-width: 1.6px; }
.uc-article:has(.uc-zone-in) .uc-zone--pelouse .uc-marquage { color: #C5CAD3; }
.uc-article:has(.uc-zone-in) .uc-zone--arbitre::before { width: 54px; height: 78px; top: -10px; right: 34px; }

/* ── fiches produit : posees sur un socle, ombre au sol, prix lisible ─── */
.uc-article:has(.uc-zone-in) .uc-picks { gap: clamp(.75rem, .5rem + 1vw, 1.25rem); }
.uc-article:has(.uc-zone-in) .uc-product {
  background: var(--uc-paper);
  border: 1px solid var(--uc-line);
  border-radius: 14px;
  padding: .75rem .75rem .9rem;
  transition: transform .28s var(--uc-studio-ease), box-shadow .28s var(--uc-studio-ease), border-color .28s ease;
}
.uc-article:has(.uc-zone-in) .uc-product-media {
  position: relative; isolation: isolate;
  background: #F3F4F6; border-radius: 10px; overflow: hidden;
  padding: 0;                       /* l'image occupe tout le socle : son fond presque blanc ne dessine plus de cadre */
}
.uc-article:has(.uc-zone-in) .uc-product-media::after {   /* l'ombre portee au sol, sous la chaussure */
  content: ""; position: absolute; z-index: -1; left: 18%; right: 18%; bottom: 13%; height: 9%;
  background: radial-gradient(closest-side, rgba(10,10,11,.22), rgba(10,10,11,0));
}
.uc-article:has(.uc-zone-in) .uc-product img { mix-blend-mode: multiply; transition: transform .45s var(--uc-studio-ease); }
.uc-article:has(.uc-zone-in) .uc-product-body { padding-top: .85rem; gap: .3rem; }
.uc-article:has(.uc-zone-in) .uc-product-kicker { font-family: var(--uc-mono); font-size: .6875rem; letter-spacing: .08em; text-transform: uppercase; }
.uc-article:has(.uc-zone-in) .uc-product-name { font-size: .98rem; line-height: 1.4; letter-spacing: -.01em; }
.uc-article:has(.uc-zone-in) .uc-product-price { font-size: 1.2rem; font-weight: 700; letter-spacing: -.01em; }
.uc-article:has(.uc-zone-in) .uc-product-link { margin-top: .7rem; }
@media (hover: hover) {
  .uc-article:has(.uc-zone-in) .uc-product:hover { transform: translateY(-3px); border-color: #D2D6DE; box-shadow: 0 1px 2px rgba(10,10,11,.05), 0 18px 34px -22px rgba(10,10,11,.45); }
  .uc-article:has(.uc-zone-in) .uc-product:hover img { transform: scale(1.045); }
}

/* ── boutons du site : etats soignes (couleurs inchangees) ────────────── */
.uc-article:has(.uc-zone-in) :is(.uc-btn, .uc-product-link) { transition: background-color .18s ease, transform .18s var(--uc-studio-ease), box-shadow .18s ease; }
@media (hover: hover) {
  .uc-article:has(.uc-zone-in) .uc-btn:hover { transform: translateY(-1px); box-shadow: 3px 3px 0 var(--uc-ink); }
}
.uc-article:has(.uc-zone-in) :is(.uc-btn, .uc-product-link):active { transform: translateY(0); box-shadow: none; }
.uc-article:has(.uc-zone-in) :is(.uc-btn, .uc-product-link):focus-visible { outline: 3px solid var(--uc-ink); outline-offset: 3px; }

/* ── sommaire : une liste nette, numeros bleus ────────────────────────── */
.uc-article:has(.uc-zone-in) .uc-toc { background: var(--uc-paper); border-radius: 16px; }
.uc-article:has(.uc-zone-in) .uc-toc a { text-decoration: none; }
@media (hover: hover) { .uc-article:has(.uc-zone-in) .uc-toc a:hover { text-decoration: underline; text-decoration-color: var(--uc-brand); text-underline-offset: 3px; } }

/* ── encadres : coins plus doux, filet de couleur, titre en etiquette ─── */
.uc-article:has(.uc-zone-in) .uc-box { border-radius: 12px; }

/* ── mouvement reduit : aucun deplacement au survol ───────────────────── */
@media (prefers-reduced-motion: reduce) {
  .uc-article:has(.uc-zone-in) :is(.uc-product, .uc-product img, .uc-btn, .uc-product-link) { transition: none !important; transform: none !important; }
}
@media (max-width: 40em) {
  .uc-article:has(.uc-zone-in) .uc-zone-badge::after { font-size: 2.1rem; left: calc(100% + .7rem); }
  .uc-article:has(.uc-zone-in) .uc-zone-bg .f1 { width: 96px; top: -18px; right: -18px; }
  .uc-article:has(.uc-zone-in) .uc-product { padding: .55rem .55rem .7rem; }
}

/* ── pas de numero sur les titres de section (choix client, 12/10/2026) : le pictogramme reste ── */
.uc-article > h2::after,
.uc-article .uc-iconsec-in > h2::after,
.uc-article .uc-zone-in > h2::after,
.uc-article .uc-zone-badge::after { content: none !important; }