/* =========================================================================
   Ultimate Affiliate Template — styles front (mobile-first)
   La couleur principale et la largeur du logo sont injectées en variables
   CSS depuis le Customizer (voir uat_enqueue_assets()).
   ========================================================================= */

:root {
  /* Valeur de secours si le inline-style du Customizer n'est pas chargé.
     (Le défaut réel est défini côté PHP : rose #cb5876, modifiable.) */
  --uat-primary: #cb5876;
  --uat-logo-width: 160px;

  /* Nuances dérivées de la couleur principale : si l'utilisateur change
     --uat-primary dans les réglages, toute la palette rose suit. */
  --uat-primary-dark: color-mix(in srgb, var(--uat-primary) 85%, #000);
  --uat-soft:         color-mix(in srgb, var(--uat-primary) 7%, #fff);   /* fond rose pâle  */
  --uat-soft-2:       color-mix(in srgb, var(--uat-primary) 4%, #fff);   /* hover très pâle */
  --uat-line:         color-mix(in srgb, var(--uat-primary) 16%, #fff);  /* bordure carte   */
  --uat-line-2:       color-mix(in srgb, var(--uat-primary) 24%, #fff);  /* bordure encart  */
  --uat-dashed:       color-mix(in srgb, var(--uat-primary) 42%, #fff);  /* bordure dashed  */
  --uat-cta-bg:       color-mix(in srgb, var(--uat-primary) 74%, #fff);  /* bandeau CTA     */

  /* Couleurs neutres / sémantiques (non liées à la marque). */
  --uat-page: #f6f7f9;
  --uat-ink: #1e293b;
  --uat-text: #475569;
  --uat-muted: #64748b;
  --uat-faint: #94a3b8;
  --uat-border: #e7e9ee;
  --uat-bg-alt: #f8f8fa;
  --uat-ok: #16a34a;
  --uat-ok-soft: #f0faf4;
  --uat-ko: #d4647f;       /* rouge/rose « inconvénients » — FIXE, ne suit pas le thème */
  --uat-ko-soft: #fdf2f5;  /* fond rouge pâle « inconvénients » — FIXE */

  --uat-radius: 14px;
  --uat-radius-sm: 12px;
  --uat-radius-xs: 8px;
  --uat-pill: 999px;
  --uat-shadow: 0 6px 24px rgba(20, 24, 35, .08);
  --uat-shadow-sm: 0 1px 3px rgba(30, 41, 59, .05);
  --uat-wrap: 1140px;
  /* Décalage des éléments sticky + ancres = hauteur du header sticky (~64px)
     + respiration, pour qu'ils ne passent pas sous le header au scroll. */
  --uat-sticky-top: 84px;
}

/* Les ancres (#section depuis le sommaire) s'arrêtent sous le header sticky. */
html { scroll-padding-top: var(--uat-sticky-top); }

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

body {
  margin: 0;
  font-family: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color: var(--uat-ink);
  background: var(--uat-page);
  line-height: 1.65;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; }
a { color: var(--uat-primary); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { line-height: 1.25; }

.uat-wrap { width: 100%; max-width: var(--uat-wrap); margin: 0 auto; padding: 0 18px; }

.screen-reader-text {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px); white-space: nowrap;
}
.skip-link:focus {
  position: fixed; left: 0; top: 0; width: auto; height: auto; clip: auto;
  background: #fff; padding: 10px 16px; z-index: 999;
}

/* =========================================================================
   BOUTONS
   ========================================================================= */
.uat-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  background: var(--uat-primary); color: #fff !important;
  font-weight: 600; padding: 12px 22px; border-radius: var(--uat-pill);
  border: 2px solid var(--uat-primary); cursor: pointer; line-height: 1.2;
  transition: filter .15s ease, transform .12s ease;
  text-align: center;
}
.uat-btn:hover { filter: brightness(.92); text-decoration: none; transform: translateY(-1px); }
.uat-btn--lg { padding: 15px 30px; font-size: 1.05rem; }
.uat-btn--block { display: flex; width: 100%; }
.uat-btn--ghost { background: #fff; color: var(--uat-primary) !important; }
.uat-btn--ghost:hover { background: var(--uat-bg-alt); }
.uat-btn--contrast { background: #fff; color: var(--uat-primary) !important; border-color: #fff; }

/* =========================================================================
   HEADER + NAV
   ========================================================================= */
.uat-header {
  position: sticky; top: 0; z-index: 100;
  background: #fff; border-bottom: 1px solid var(--uat-border);
  box-shadow: var(--uat-shadow-sm);
}
.uat-header .uat-wrap { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 64px; }
.uat-logo img { width: var(--uat-logo-width); height: auto; display: block; }
.uat-logo--text { font-weight: 700; font-size: 1.2rem; color: var(--uat-text); }

.uat-nav-toggle { display: none; background: none; border: 0; font-size: 1.6rem; cursor: pointer; padding: 6px; }
.uat-menu { display: flex; gap: 6px; list-style: none; margin: 0; padding: 0; }
.uat-menu a { color: var(--uat-text); font-weight: 500; padding: 8px 12px; border-radius: var(--uat-radius-sm); display: block; }
.uat-menu a:hover { background: var(--uat-bg-alt); color: var(--uat-primary); text-decoration: none; }
.uat-menu .sub-menu { display: none; position: absolute; background: #fff; border: 1px solid var(--uat-border); border-radius: var(--uat-radius-sm); box-shadow: var(--uat-shadow); list-style: none; padding: 6px; min-width: 200px; }
.uat-menu li { position: relative; }
.uat-menu li:hover > .sub-menu, .uat-menu li:focus-within > .sub-menu { display: block; }

@media (max-width: 860px) {
  .uat-nav-toggle { display: block; }
  .uat-nav { position: absolute; left: 0; right: 0; top: 100%; background: #fff; border-bottom: 1px solid var(--uat-border); box-shadow: var(--uat-shadow); display: none; }
  .uat-nav.open { display: block; }
  .uat-menu { flex-direction: column; padding: 8px; }
  .uat-menu .sub-menu { display: block; position: static; border: 0; box-shadow: none; padding-left: 16px; }
}

/* =========================================================================
   RÉASSURANCE
   ========================================================================= */
.uat-reassurance {
  background: var(--uat-bg-alt); border-left: 4px solid var(--uat-primary);
  padding: 10px 14px; border-radius: 0 var(--uat-radius-sm) var(--uat-radius-sm) 0;
  font-size: .92rem; color: var(--uat-muted); margin: 14px 0;
}

/* =========================================================================
   BLOC E-E-A-T
   ========================================================================= */
.uat-eeat { display: flex; align-items: center; gap: 12px; margin: 14px 0 20px; }
.uat-eeat-photo img, .uat-eeat-photo .avatar { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; display: block; }
.uat-eeat-meta { display: flex; flex-direction: column; font-size: .95rem; }
.uat-eeat-name { font-weight: 700; }
.uat-eeat-bio { color: var(--uat-muted); }
.uat-eeat-date { color: var(--uat-muted); font-size: .88rem; }

/* =========================================================================
   FIL D'ARIANE
   ========================================================================= */
.uat-breadcrumbs { color: var(--uat-muted); font-size: .92rem; margin: 16px 0 6px; }
.uat-breadcrumbs a { color: var(--uat-muted); }
.uat-breadcrumbs a:hover { color: var(--uat-primary); }

/* =========================================================================
   ÉTOILES
   ========================================================================= */
.uat-stars { display: inline-flex; letter-spacing: 2px; line-height: 1; font-size: 16px; }
.uat-stars-num { font-weight: 800; margin-left: 4px; }
.uat-stars-out { color: var(--uat-faint); font-weight: 600; }

/* =========================================================================
   LAYOUT TEMPLATE (sidebar sticky + contenu)
   ========================================================================= */
.uat-layout { display: grid; grid-template-columns: 300px 1fr; gap: 32px; align-items: start; margin: 18px 0; }
@media (max-width: 900px) { .uat-layout { grid-template-columns: 1fr; } }

.uat-card {
  background: #fff; border: 1px solid var(--uat-border); border-radius: var(--uat-radius);
  padding: 18px; box-shadow: var(--uat-shadow); text-align: center;
  display: flex; flex-direction: column; gap: 12px;
}
.uat-card--sticky { position: sticky; top: 84px; }
@media (max-width: 900px) { .uat-card--sticky { position: static; } }
.uat-card-logo img { max-width: 70%; margin: 0 auto; display: block; }
.uat-card-cat { margin: 0; color: var(--uat-muted); font-size: .92rem; }
.uat-card-rating { font-size: 1.05rem; }

.uat-arguments { list-style: none; padding: 0; margin: 0; text-align: left; font-size: .94rem; }
.uat-arguments li { padding-left: 24px; position: relative; margin: 6px 0; }
.uat-arguments li::before { content: "✓"; position: absolute; left: 0; color: var(--uat-ok); font-weight: 700; }

.uat-main > * { margin-bottom: 1em; }
.uat-main img { border-radius: var(--uat-radius-sm); }
.uat-main--full { max-width: 820px; }

.uat-single-title { font-size: clamp(1.7rem, 4vw, 2.4rem); margin: 18px 0 6px; }

/* =========================================================================
   TABLEAU AVANTAGES / INCONVÉNIENTS (bloc unique, 2 colonnes)
   ========================================================================= */
.uat-pros-cons { border: 1px solid var(--uat-line); border-radius: var(--uat-radius-sm); overflow: hidden; margin: 0; background: #fff; }
.uat-pc-head { display: grid; grid-template-columns: 1fr 1fr; }
.uat-pc-h { padding: 13px 20px; font-size: 14px; font-weight: 800; }
.uat-pc-h-pro { background: var(--uat-ok-soft); color: var(--uat-ok); border-right: 1px solid var(--uat-line); }
.uat-pc-h-con { background: var(--uat-ko-soft); color: var(--uat-ko); }
.uat-pc-row { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid #f3ecef; }
.uat-pc-cell { padding: 12px 20px; font-size: 14px; color: #334155; display: flex; gap: 9px; align-items: flex-start; }
.uat-pc-cell-pro { border-right: 1px solid #f3ecef; }
.uat-pc-ic { font-weight: 800; flex-shrink: 0; }
.uat-pc-ic-pro { color: var(--uat-ok); }
.uat-pc-ic-con { color: var(--uat-ko); }
@media (max-width: 560px) {
  .uat-pc-head, .uat-pc-row { grid-template-columns: 1fr; }
  .uat-pc-h-pro, .uat-pc-cell-pro { border-right: 0; }
}

/* =========================================================================
   ENCART « À RETENIR » (panneau plein + badge pilule, sans bordure gauche)
   ========================================================================= */
.uat-colored-box {
  --uat-box-color: var(--uat-primary);
  background: color-mix(in srgb, var(--uat-box-color) 7%, #fff);
  border: 1px solid color-mix(in srgb, var(--uat-box-color) 24%, #fff);
  border-radius: var(--uat-radius-sm); padding: 16px 18px; margin: 0;
  display: flex; flex-direction: column; gap: 8px;
}
.uat-box-badge-wrap { display: flex; }
.uat-box-badge {
  background: var(--uat-box-color); color: #fff; font-size: 10px; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase; padding: 4px 12px; border-radius: var(--uat-pill);
}
.uat-colored-box-body { font-size: 14px; line-height: 1.65; color: #6b4250; }
.uat-colored-box-body > :first-child { margin-top: 0; }
.uat-colored-box-body > :last-child { margin-bottom: 0; }

/* =========================================================================
   BANDEAU CTA
   ========================================================================= */
.uat-cta-box {
  background: var(--uat-cta-bg); border-radius: var(--uat-radius);
  padding: 26px 28px; text-align: center; margin: 0;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
}
.uat-cta-box-text { font-size: 17px; font-weight: 800; margin: 0; color: #fff; }
.uat-cta-box .uat-btn--contrast { background: #fff; color: var(--uat-primary) !important; border-color: #fff; }
.uat-cta-box .uat-btn--contrast:hover { background: var(--uat-soft); }

/* =========================================================================
   FAQ (accordéon)
   ========================================================================= */
.uat-faq { margin: 0; }
.uat-faq h2 { margin: 0 0 14px; }
.uat-faq details { border: 1px solid var(--uat-line); border-radius: var(--uat-radius-sm); margin: 0 0 10px; background: #fff; overflow: hidden; }
.uat-faq summary { cursor: pointer; padding: 15px 20px; font-size: 15px; font-weight: 600; color: var(--uat-ink); list-style: none; position: relative; padding-right: 48px; }
.uat-faq summary:hover { background: var(--uat-soft-2); }
.uat-faq summary::-webkit-details-marker { display: none; }
.uat-faq summary::after { content: "+"; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); font-size: 18px; color: var(--uat-primary); }
.uat-faq details[open] summary::after { content: "−"; }
.uat-faq-answer { padding: 13px 20px 16px; font-size: 14px; line-height: 1.7; color: var(--uat-text); border-top: 1px solid color-mix(in srgb, var(--uat-primary) 12%, #fff); }

/* =========================================================================
   SOMMAIRE (panneau gris neutre, liste numérotée, liens roses)
   ========================================================================= */
/* Sommaire : suit la couleur du thème (fond = couleur pâle dérivée,
   bordure = teinte un peu plus marquée, liens = couleur pleine). */
.uat-toc { background: var(--uat-soft); border: 1px solid var(--uat-line); border-radius: var(--uat-radius-sm); padding: 18px 24px; margin: 0; }
.uat-toc-title { font-size: 14px; font-weight: 800; color: var(--uat-ink); margin: 0 0 10px; }
.uat-toc ol { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 7px; }
.uat-toc ol ol { margin: 7px 0 0; }
.uat-toc li { padding-left: 4px; }
.uat-toc a { color: var(--uat-primary); font-weight: 600; font-size: 14px; text-decoration: none; }
.uat-toc a:hover { text-decoration: underline; }

/* =========================================================================
   TITRE STYLÉ
   ========================================================================= */
.uat-titre { color: var(--uat-primary); border-bottom: 2px solid color-mix(in srgb, var(--uat-primary) 20%, white); padding-bottom: .2em; }
.uat-align-center { text-align: center; }
.uat-align-left { text-align: left; }

/* =========================================================================
   TEMPLATE PAGE AVIS (maquette haute fidélité)
   ========================================================================= */
.uat-template-avis { display: flex; flex-direction: column; gap: 24px; }
.uat-template-avis .uat-breadcrumbs { margin: 0; }

/* ---- Carte header ---- */
.uat-av-header {
  background: #fff; border: 1px solid var(--uat-line); border-radius: var(--uat-radius);
  padding: 24px 28px; display: flex; align-items: center; gap: 20px; box-shadow: var(--uat-shadow-sm);
}
.uat-av-logo {
  width: 64px; height: 64px; border-radius: 12px; flex-shrink: 0; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.uat-av-logo.is-txt { background: var(--uat-primary); }
/* Logo image : pas de cadre blanc — le logo occupe tout le conteneur (sans
   recadrage : object-fit contain pour préserver les proportions variables). */
.uat-av-logo.has-img { background: transparent; border: 0; padding: 0; }
.uat-av-logo.has-img img { width: 100%; height: 100%; object-fit: contain; object-position: center; display: block; border-radius: inherit; }
.uat-av-logo-txt { color: #fff; font-weight: 800; font-size: 18px; }
.uat-av-head-main { display: flex; flex-direction: column; gap: 5px; flex: 1; min-width: 0; }
.uat-av-eyebrow { font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--uat-primary); }
.uat-av-eyebrow a { color: inherit; }
.uat-av-title { margin: 0; font-size: 28px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; color: var(--uat-ink); }
.uat-av-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 2px; }
.uat-av-note { font-size: 14px; font-weight: 800; color: var(--uat-ink); }
.uat-av-note-out { color: var(--uat-faint); font-weight: 600; }
.uat-av-sep { width: 1px; height: 14px; background: #e2e5ea; }
.uat-av-byline { font-size: 13px; color: var(--uat-muted); }
.uat-av-byline strong, .uat-av-byline a { color: #334155; font-weight: 700; }
.uat-av-offer {
  display: flex; flex-direction: column; align-items: center; gap: 8px; flex-shrink: 0;
  background: var(--uat-soft); border: 1px dashed var(--uat-dashed); border-radius: 12px; padding: 14px 22px;
}
.uat-av-offer-label { font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--uat-primary); }
.uat-av-offer .uat-btn { padding: 10px 22px; font-size: 14px; }

/* ---- Grille corps ---- */
.uat-av-grid { display: grid; grid-template-columns: 280px 1fr; gap: 28px; align-items: start; }
.uat-av-content { display: flex; flex-direction: column; gap: 26px; min-width: 0; }
.uat-av-content > h2 { font-size: 22px; font-weight: 800; letter-spacing: -.01em; color: var(--uat-ink); margin: 0; }
.uat-av-content > h3 { font-size: 18px; font-weight: 800; color: var(--uat-ink); margin: 0; }
.uat-av-content > p { font-size: 15px; line-height: 1.75; color: var(--uat-text); margin: 0; }
.uat-av-content > ul, .uat-av-content > ol { font-size: 15px; line-height: 1.75; color: var(--uat-text); margin: 0; padding-left: 1.3em; }
.uat-av-content img { border-radius: var(--uat-radius-sm); }

/* ---- Sidebar sticky ---- */
.uat-av-sidebar { position: sticky; top: var(--uat-sticky-top); }
.uat-av-side-card { border: 1px solid var(--uat-line); border-radius: var(--uat-radius); overflow: hidden; background: #fff; box-shadow: var(--uat-shadow-sm); }
.uat-av-banner { background: var(--uat-primary); height: 88px; display: flex; align-items: center; justify-content: center; padding: 0 16px; }
.uat-av-banner-chip { background: rgba(255,255,255,.18); border-radius: 8px; padding: 8px 16px; color: #fff; font-weight: 800; font-size: 14px; display: flex; align-items: center; justify-content: center; }
/* Logo image : pas de boîte blanche — le logo repose directement sur le
   bandeau (couleur de marque), sans padding/bordure/ombre. */
.uat-av-banner-chip.has-img { background: transparent; padding: 0; max-width: 100%; box-shadow: none; }
.uat-av-banner-chip.has-img img { max-height: 64px; max-width: 100%; width: auto; object-fit: contain; display: block; }
.uat-av-side-body { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 12px; }
.uat-av-side-cat { text-align: center; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--uat-faint); }
.uat-av-side-score { display: flex; align-items: baseline; gap: 6px; justify-content: center; }
.uat-av-side-score .num { font-size: 36px; font-weight: 900; color: var(--uat-primary); line-height: 1; }
.uat-av-side-score .out { font-size: 14px; color: var(--uat-faint); }
.uat-av-side-stars { text-align: center; }
.uat-av-args { list-style: none; margin: 0; padding: 12px 0 0; border-top: 1px solid color-mix(in srgb, var(--uat-primary) 14%, #fff); display: flex; flex-direction: column; gap: 8px; }
.uat-av-args li { display: flex; gap: 8px; font-size: 13px; color: var(--uat-text); }
.uat-av-check { color: var(--uat-ok); font-weight: 800; flex-shrink: 0; }
.uat-av-disclaimer { background: #f8fafc; border-radius: var(--uat-radius-xs); padding: 10px 12px; font-size: 12px; line-height: 1.5; color: var(--uat-muted); }
.uat-av-disclaimer strong { color: var(--uat-text); }

@media (max-width: 900px) {
  .uat-av-grid { grid-template-columns: 1fr; }
  .uat-av-sidebar { position: static; order: -1; }
  .uat-av-header { flex-wrap: wrap; }
  .uat-av-offer { width: 100%; }
}

/* Note géante de la score card (réutilisée par le template code promo) */
.uat-score { display: flex; align-items: baseline; justify-content: center; gap: 3px; }
.uat-score-num { font-size: 2.6rem; font-weight: 800; color: var(--uat-primary); line-height: 1; }
.uat-score-out { color: var(--uat-muted); font-weight: 600; }

/* =========================================================================
   TEMPLATE PAGE GÉNÉRIQUE (maquette haute fidélité)
   Réutilise les composants partagés (encart « À retenir », bandeau CTA,
   accordéon FAQ). Spécificités page : header sans logo, sommaire en colonne
   gauche sticky, carte auteur E-E-A-T en pied.
   ========================================================================= */
.uat-template-page { display: flex; flex-direction: column; gap: 18px; }
.uat-template-page .uat-breadcrumbs { margin: 0; }

/* ---- Carte header ---- */
.uat-pg-header {
  background: #fff; border: 1px solid var(--uat-line); border-radius: var(--uat-radius);
  padding: 24px 28px; display: flex; flex-direction: column; gap: 10px; box-shadow: var(--uat-shadow-sm);
}
.uat-pg-eyebrow { font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--uat-primary); }
.uat-pg-eyebrow a { color: inherit; }
.uat-pg-title { margin: 0; font-size: 28px; font-weight: 800; letter-spacing: -.02em; line-height: 1.2; color: var(--uat-ink); }
.uat-pg-byline { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--uat-muted); margin-top: 2px; }
.uat-pg-byline a, .uat-pg-byline strong { color: #334155; font-weight: 700; }
.uat-pg-byline a:hover { color: var(--uat-primary); text-decoration: none; }

/* Avatar auteur (photo ou initiales sur pastille) */
.uat-pg-av {
  border-radius: 50%; background: #e8d3da; color: #a05c70; flex-shrink: 0; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; font-weight: 800;
}
.uat-pg-av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.uat-pg-av--sm { width: 30px; height: 30px; font-size: 12px; }
.uat-pg-av--lg { width: 56px; height: 56px; font-size: 18px; }

/* ---- Grille corps : sommaire (260px) + contenu ---- */
.uat-pg-grid { display: grid; grid-template-columns: 260px 1fr; gap: 28px; align-items: start; margin-top: 6px; }
.uat-pg-grid--notoc { grid-template-columns: 1fr; }
.uat-pg-toc-col { position: sticky; top: var(--uat-sticky-top); }

/* Sommaire de la page : hérite du style .uat-toc partagé (fond rose pâle
   --uat-soft, bordure --uat-line, liens roses) — identique au template avis,
   pour suivre la couleur du thème en version très claire. */

/* ---- Colonne contenu ---- */
.uat-pg-content { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.uat-pg-content > h2 { font-size: 22px; font-weight: 800; letter-spacing: -.01em; color: var(--uat-ink); margin: 0; }
.uat-pg-content > h3 { font-size: 18px; font-weight: 800; color: var(--uat-ink); margin: 0; }
.uat-pg-content > p { font-size: 15px; line-height: 1.75; color: var(--uat-text); margin: 0; }
.uat-pg-content > p:first-of-type { font-size: 16px; line-height: 1.7; color: #334155; font-weight: 500; }
.uat-pg-content > ul, .uat-pg-content > ol { font-size: 15px; line-height: 1.6; color: var(--uat-text); margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; }
.uat-pg-content strong { color: #334155; font-weight: 700; }
.uat-pg-content img { border-radius: var(--uat-radius-sm); }
.uat-pg-content figure { margin: 0; display: flex; flex-direction: column; gap: 8px; }
.uat-pg-content figcaption { font-size: 12px; color: var(--uat-faint); }

/* Tableaux du contenu (bloc Gutenberg natif .wp-block-table, ou <table> brut)
   — partagés par la page, l'avis et le code promo (tableau récap). */
.uat-pg-content .wp-block-table, .uat-av-content .wp-block-table { margin: 0; border: 1px solid var(--uat-line); border-radius: var(--uat-radius-sm); overflow: hidden; overflow-x: auto; }
.uat-pg-content .wp-block-table table, .uat-av-content .wp-block-table table { border: 0; }
.uat-pg-content > table, .uat-av-content > table { border: 1px solid var(--uat-line); border-radius: var(--uat-radius-sm); }
.uat-pg-content table, .uat-av-content table { width: 100%; border-collapse: collapse; background: #fff; font-size: 14px; color: #334155; }
.uat-pg-content thead th, .uat-av-content thead th { background: var(--uat-soft); color: var(--uat-primary); font-size: 13px; font-weight: 800; text-align: left; padding: 12px 16px; border-left: 1px solid var(--uat-line-2); }
.uat-pg-content thead th:first-child, .uat-av-content thead th:first-child { border-left: 0; }
.uat-pg-content tbody td, .uat-av-content tbody td { padding: 11px 16px; border-top: 1px solid #f3ecef; border-left: 1px solid #f3ecef; }
.uat-pg-content tbody td:first-child, .uat-av-content tbody td:first-child { border-left: 0; font-weight: 700; }
/* Valeur « positive » (instantané, aucun, gratuit…) : à marquer .is-good côté éditeur. */
.uat-pg-content .is-good, .uat-av-content .is-good { color: var(--uat-ok); font-weight: 700; }

/* Composants partagés posés dans la colonne (annule leurs marges externes) */
.uat-pg-content .uat-toc, .uat-pg-content .uat-faq, .uat-pg-content .uat-colored-box,
.uat-pg-content .uat-cta-box, .uat-pg-content .uat-pros-cons { margin: 0; }

/* ---- Carte auteur E-E-A-T en pied ---- */
.uat-pg-author {
  background: #fff; border: 1px solid var(--uat-line); border-radius: var(--uat-radius);
  padding: 18px 20px; display: flex; align-items: flex-start; gap: 16px; margin-top: 4px;
}
.uat-pg-author-main { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
.uat-pg-author-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.uat-pg-author-name { font-size: 16px; font-weight: 800; color: var(--uat-ink); }
.uat-pg-author-name:hover { color: var(--uat-primary); text-decoration: none; }
.uat-pg-verified { background: var(--uat-ok-soft); color: var(--uat-ok); font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; padding: 3px 9px; border-radius: var(--uat-pill); }
.uat-pg-author-bio { margin: 0; font-size: 13px; line-height: 1.6; color: var(--uat-muted); }
.uat-pg-author-links { display: flex; align-items: center; gap: 12px; margin-top: 3px; }
.uat-pg-profile { font-size: 13px; font-weight: 700; color: var(--uat-primary); }
.uat-pg-updated { font-size: 13px; color: var(--uat-faint); }

@media (max-width: 900px) {
  .uat-pg-grid { grid-template-columns: 1fr; }
  .uat-pg-toc-col { position: static; order: -1; }
  .uat-pg-author { flex-direction: column; }
}

/* =========================================================================
   CODES PROMOS — révélation côté client + copie (boutons réutilisés par le
   template code promo et les cards).
   ========================================================================= */
/* État révélé : le bouton « Voir le code » devient le code (géré par uat.js). */
.uat-code-reveal.revealed {
  background: var(--uat-bg-alt); color: var(--uat-text) !important;
  border: 2px dashed var(--uat-primary); border-radius: var(--uat-radius-sm);
  font-weight: 800; letter-spacing: 1px; user-select: all;
}

/* Encadré code visible + bouton Copier (cards promo) */
.uat-code-box {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; background: var(--uat-bg-alt); border: 1px dashed var(--uat-border);
  border-radius: var(--uat-radius-sm); padding: 8px 8px 8px 14px;
}
.uat-code-value { font-weight: 800; letter-spacing: 2px; user-select: all; }
.uat-code-copy { padding: 8px 16px; }

/* Pastille code (tableau récap, etc.) — pas de monospace, on garde Figtree. */
.code-pill {
  display: inline-block; border: 1.5px dashed var(--uat-primary); border-radius: 7px;
  padding: 4px 12px; font-size: 12px; font-weight: 800; letter-spacing: .05em;
  color: var(--uat-ink); text-align: center;
}

/* =========================================================================
   TEMPLATE CODE PROMO (maquette « Lucky Palace ») — réutilise le header, la
   grille et la sidebar de l'avis (.uat-av-*). Spécifique : badge meilleure
   offre, coupons, sondage votes.
   ========================================================================= */
.uat-template-promo { display: flex; flex-direction: column; gap: 18px; }
.uat-template-promo .uat-breadcrumbs { margin: 0; }

/* Badge « Meilleure offre » (header, à la place du CTA avis) */
.uat-cp-bestoffer {
  display: flex; flex-direction: column; align-items: center; gap: 4px; flex-shrink: 0;
  background: var(--uat-soft); border: 1px dashed var(--uat-dashed); border-radius: 12px; padding: 12px 24px;
}
.uat-cp-bestoffer-label { font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--uat-primary); }
.uat-cp-bestoffer-value { font-size: 24px; font-weight: 900; color: var(--uat-primary); line-height: 1; }

/* Coupons */
.uat-cp-coupons { display: flex; flex-direction: column; gap: 12px; }
.uat-cp-coupon {
  background: #fff; border: 1px solid var(--uat-line); border-radius: var(--uat-radius-sm);
  padding: 20px 24px; display: grid; grid-template-columns: 130px 1fr auto; gap: 20px;
  align-items: center; box-shadow: var(--uat-shadow-sm);
}
.uat-cp-coupon--noval { grid-template-columns: 1fr auto; }
.uat-cp-cval { display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; }
.uat-cp-cval-main { font-size: 24px; font-weight: 900; color: var(--uat-primary); line-height: 1.05; }
.uat-cp-cval-label { font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: color-mix(in srgb, var(--uat-primary) 55%, #64748b); }
.uat-cp-cmain { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.uat-cp-ctitle { font-size: 16px; font-weight: 700; line-height: 1.4; color: var(--uat-ink); }
.uat-cp-cmeta { display: flex; gap: 16px; flex-wrap: wrap; font-size: 13px; color: var(--uat-faint); }
.uat-cp-caction .uat-btn { padding: 11px 24px; font-size: 14px; white-space: nowrap; }

/* Sondage votes */
.uat-cp-votes {
  background: #fff; border: 1px solid var(--uat-line); border-radius: var(--uat-radius);
  padding: 22px 26px; display: flex; flex-direction: column; gap: 14px; box-shadow: var(--uat-shadow-sm);
}
.uat-cp-votes-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.uat-cp-votes-head h2 { margin: 0; font-size: 18px; font-weight: 800; color: var(--uat-ink); }
.uat-cp-votes-total { font-size: 13px; color: var(--uat-faint); white-space: nowrap; }
.uat-cp-bars { display: flex; flex-direction: column; gap: 10px; }
.uat-cp-bar { display: grid; grid-template-columns: 64px 1fr 52px; gap: 14px; align-items: center; }
.uat-cp-bar-label { font-size: 13px; font-weight: 700; }
.uat-cp-bar-label.is-yes { color: var(--uat-ok); }
.uat-cp-bar-label.is-no { color: var(--uat-ko); }
.uat-cp-bar-track { height: 10px; border-radius: var(--uat-pill); background: #f1f3f6; overflow: hidden; }
.uat-cp-bar-fill { display: block; height: 100%; border-radius: var(--uat-pill); }
.uat-cp-bar-fill.is-yes { background: var(--uat-ok); }
.uat-cp-bar-fill.is-no { background: var(--uat-ko); }
.uat-cp-bar-val { font-size: 13px; font-weight: 800; text-align: right; color: var(--uat-ink); }
.uat-cp-votebox {
  background: var(--uat-bg-alt); border: 1px solid var(--uat-border); border-radius: 10px;
  padding: 12px 16px; display: flex; align-items: center; gap: 14px;
}
.uat-cp-votebox p { margin: 0; font-size: 13px; line-height: 1.55; color: var(--uat-muted); flex: 1; }
.uat-cp-votebox .uat-btn { padding: 9px 18px; font-size: 13px; white-space: nowrap; }

@media (max-width: 900px) {
  .uat-cp-coupon, .uat-cp-coupon--noval { grid-template-columns: 1fr; text-align: center; }
  .uat-cp-cmeta { justify-content: center; }
  .uat-cp-caction .uat-btn { width: 100%; }
  .uat-cp-votebox { flex-direction: column; align-items: stretch; }
}

/* =========================================================================
   TEMPLATE ARTICLE (maquette « guide ») — réutilise le header/sommaire/contenu
   .uat-pg-* du template page. Spécifique : image à la une + « À lire aussi ».
   ========================================================================= */
/* Image à la une (insérée après le chapo) */
.uat-article-hero { margin: 0; }
.uat-article-hero-img { width: 100%; height: 300px; object-fit: cover; border-radius: var(--uat-radius-sm); display: block; }
.uat-article-hero figcaption { font-size: 12px; color: var(--uat-faint); margin-top: 6px; }

/* « À lire aussi » : grille de 3 cartes article cliquables */
.uat-article-recos { border-top: 1px solid var(--uat-soft); padding-top: 22px; display: flex; flex-direction: column; gap: 14px; }
.uat-article-recos > h2 { font-size: 22px; font-weight: 800; letter-spacing: -.01em; color: var(--uat-ink); margin: 0; }
.uat-recos-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.uat-reco-card {
  display: flex; flex-direction: column; overflow: hidden; text-decoration: none; color: var(--uat-ink);
  background: #fff; border: 1px solid var(--uat-line); border-radius: var(--uat-radius);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.uat-reco-card:hover { border-color: var(--uat-line-2); box-shadow: 0 4px 14px color-mix(in srgb, var(--uat-primary) 14%, transparent); text-decoration: none; }
.uat-reco-thumb { display: block; height: 130px; background: var(--uat-soft); }
.uat-reco-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.uat-reco-body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.uat-reco-cat {
  width: fit-content; background: var(--uat-soft); color: var(--uat-primary);
  font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  padding: 3px 10px; border-radius: var(--uat-pill);
}
.uat-reco-title { font-size: 14px; font-weight: 700; line-height: 1.45; flex: 1; }
.uat-reco-meta { font-size: 12px; color: var(--uat-faint); }

@media (max-width: 700px) {
  .uat-recos-grid { grid-template-columns: 1fr; }
}

/* =========================================================================
   CARDS DE LISTING
   ========================================================================= */
.uat-cards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px; margin: 1.4em 0; }
.uat-listing-card {
  position: relative;
  background: #fff; border: 1px solid var(--uat-border); border-radius: var(--uat-radius);
  padding: 18px; box-shadow: var(--uat-shadow-sm); display: flex; flex-direction: column;
  gap: 10px; align-items: center; text-align: center;
  transition: transform .12s ease, box-shadow .15s ease;
}
.uat-listing-card:hover { transform: translateY(-2px); box-shadow: var(--uat-shadow); }

/* Badge de rang (#1, #2…) dans les grilles d'avis */
.uat-lc-rank {
  position: absolute; top: 10px; right: 10px;
  background: var(--uat-text); color: #fff; font-weight: 700; font-size: .82rem;
  padding: 3px 9px; border-radius: var(--uat-radius-sm);
}

.uat-lc-logo {
  background: #fff; border: 1px solid var(--uat-border); border-radius: var(--uat-radius-sm);
  padding: 8px; align-self: flex-start;
}
.uat-lc-logo img { max-height: 48px; width: auto; display: block; }
.uat-lc-title { font-weight: 700; font-size: 1.15rem; color: var(--uat-text); align-self: flex-start; }
.uat-lc-cat {
  color: var(--uat-muted); font-size: .8rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .04em; align-self: flex-start;
}
.uat-lc-rating { align-self: flex-start; }
.uat-lc-desc { color: #4b5563; font-size: .94rem; margin: 0; text-align: left; }
.uat-lc-offer { margin: 0; font-size: .94rem; }
.uat-lc-review { font-weight: 600; font-size: .94rem; }

/* Variante card code promo : centrée, code visible */
.uat-listing-card--promo { text-align: center; }
.uat-lc-head { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; }
.uat-lc-head-logo { max-height: 28px; width: auto; border-radius: 6px; }
.uat-lc-head-title { font-weight: 700; }
/* Logo encadré centré dans la card promo (override de .uat-lc-logo align-self) */
.uat-listing-card--promo .uat-lc-logo { align-self: center; }
.uat-listing-card--promo .uat-lc-desc { text-align: center; }
.uat-lc-benefit { color: var(--uat-primary); font-weight: 600; margin: 0; }
.uat-lc-expiry { color: var(--uat-muted); font-size: .84rem; margin: 0; }

/* =========================================================================
   ARCHIVES / LISTE D'ARTICLES
   ========================================================================= */
.uat-archive-head { margin: 26px 0 10px; }
.uat-archive-desc { color: var(--uat-muted); }
.uat-post-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 22px; margin: 22px 0 40px; }
.uat-post-card { background: #fff; border: 1px solid var(--uat-border); border-radius: var(--uat-radius); overflow: hidden; box-shadow: var(--uat-shadow-sm); }
.uat-post-card:hover { box-shadow: var(--uat-shadow); }
.uat-pc-thumb img { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; }
.uat-pc-body { padding: 16px; }
.uat-pc-body h2 { font-size: 1.15rem; margin: 0 0 6px; }
.uat-pc-body p { color: var(--uat-muted); font-size: .95rem; margin: 0 0 8px; }
.uat-pagination { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin: 20px 0 40px; }
.uat-pagination .page-numbers { padding: 8px 14px; border: 1px solid var(--uat-border); border-radius: var(--uat-radius-sm); color: var(--uat-text); }
.uat-pagination .page-numbers.current { background: var(--uat-primary); color: #fff; border-color: var(--uat-primary); }
.uat-empty { text-align: center; padding: 40px 0; color: var(--uat-muted); }

/* =========================================================================
   TOP TABLE (comparatif avis) — 2 variantes : grille USP + cartes catégorisées.
   Accent = --uat-primary ; vert ✓ + or des étoiles fixes (composant partagé).
   ========================================================================= */
.uat-tt { background: var(--uat-page); border: 1px solid var(--uat-border); border-radius: var(--uat-radius); padding: 28px; box-shadow: var(--uat-shadow-sm); margin: 1.4em 0; }

/* Note (réutilise .uat-stars), tailles selon la variante */
.uat-tt-rating--center { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.uat-tt-rating--center .uat-stars { font-size: 18px; letter-spacing: 3px; }
.uat-tt-rating--inline { display: inline-flex; align-items: center; gap: 6px; }
.uat-tt-rating--inline .uat-stars { font-size: 13px; letter-spacing: 1px; }
.uat-tt-note { font-size: 13px; color: var(--uat-text); }
.uat-tt-note strong { color: var(--uat-ink); font-weight: 800; }
.uat-tt-note-out { color: var(--uat-faint); font-weight: 600; }
.uat-tt-review { display: block; text-align: center; font-size: 13px; font-weight: 600; color: var(--uat-muted); text-decoration: underline; }
.uat-tt-review:hover { color: var(--uat-primary); }

/* Pastille logo : bandeau/vignette neutre + chip coloré pour les initiales */
.uat-tt-logo, .uat-cc-logo { display: flex; align-items: center; justify-content: center; }
.uat-tt-logo.has-img img, .uat-cc-logo.has-img img { object-fit: contain; display: block; }
.uat-tt-logo.is-txt span, .uat-cc-logo.is-txt span { display: flex; align-items: center; justify-content: center; border-radius: 12px; background: var(--uat-primary); color: #fff; font-weight: 800; }

/* ---- Variante A : grille USP ---- */
.uat-tt--grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.uat-tt-card { background: #fff; border: 1px solid var(--uat-line); border-radius: var(--uat-radius); overflow: hidden; display: flex; flex-direction: column; }
.uat-tt-card .uat-tt-logo { height: 100px; background: #fff; border-bottom: 1px solid #f3ecef; padding: 0 16px; }
.uat-tt-card .uat-tt-logo.has-img img { max-height: 56px; max-width: 100%; width: auto; }
.uat-tt-card .uat-tt-logo.is-txt span { width: 56px; height: 56px; font-size: 20px; }
.uat-tt-body { padding: 20px 22px 22px; display: flex; flex-direction: column; gap: 14px; }
.uat-tt-tagline { text-align: center; font-size: 14px; font-weight: 700; color: var(--uat-ink); border-top: 1px solid #f3ecef; padding-top: 14px; }
.uat-tt-usps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.uat-tt-usps li { display: flex; gap: 9px; font-size: 13px; line-height: 1.5; color: var(--uat-text); }
.uat-tt-check { color: var(--uat-ok); font-weight: 800; flex-shrink: 0; }
.uat-tt-cta { font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: 13px 0; margin-top: 4px; }

/* ---- Variante B : cartes catégorisées ---- */
.uat-tt--cards { display: flex; flex-direction: column; gap: 14px; }
.uat-cc-card { background: #fff; border: 1px solid var(--uat-line); border-radius: var(--uat-radius); padding: 22px 26px; display: grid; grid-template-columns: 96px 1fr 200px; gap: 24px; align-items: center; }
.uat-cc-logo { width: 96px; height: 70px; border-radius: 10px; background: #fff; border: 1px solid var(--uat-border); overflow: hidden; }
.uat-cc-logo.has-img img { max-width: 100%; max-height: 100%; }
.uat-cc-logo.is-txt { border: 0; }
.uat-cc-logo.is-txt span { width: 100%; height: 100%; border-radius: 10px; font-size: 22px; }
.uat-cc-main { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.uat-cc-badge-wrap { display: flex; }
.uat-cc-badge { background: var(--uat-soft); color: var(--uat-primary); font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; padding: 4px 11px; border-radius: var(--uat-pill); }
.uat-cc-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.uat-cc-name { font-size: 20px; font-weight: 800; letter-spacing: -.01em; color: var(--uat-ink); }
.uat-cc-pitch { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--uat-text); }
.uat-cc-actions { display: flex; flex-direction: column; gap: 10px; }

@media (max-width: 900px) {
  .uat-tt--grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
  .uat-tt { padding: 18px; }
  .uat-tt--grid { grid-template-columns: 1fr; }
  .uat-cc-card { grid-template-columns: 1fr; gap: 16px; text-align: center; }
  .uat-cc-logo { justify-self: center; }
  .uat-cc-head, .uat-cc-badge-wrap { justify-content: center; }
}

/* =========================================================================
   FOOTER (V1 « Sombre compact ») — fond marine fixe, accent = --uat-primary.
   Seul l'accent (carré logo, hovers liens/réseaux) suit la couleur du thème ;
   le reste (marine, gris) est volontairement fixe pour la lisibilité.
   ========================================================================= */
.uat-footer { background: #1a2233; color: #cbd5e1; margin-top: 40px; font-size: 14px; line-height: 1.6; }
.uat-footer-inner { display: flex; flex-direction: column; gap: 32px; padding-top: 48px; padding-bottom: 24px; }
.uat-footer a { color: #cbd5e1; text-decoration: none; transition: color .15s; }
.uat-footer a:hover, .uat-footer a:focus-visible { color: var(--uat-primary); }
.uat-footer :focus-visible { outline: 2px solid var(--uat-primary); outline-offset: 2px; }

.uat-footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; align-items: start; }
.uat-footer-brand { display: flex; flex-direction: column; gap: 14px; }
.uat-footer-logo { display: inline-flex; align-items: center; gap: 8px; }
.uat-footer-logo:hover { color: inherit; }
.uat-footer-logo-mark { width: 30px; height: 30px; border-radius: 8px; background: var(--uat-primary); display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 900; color: #fff; flex-shrink: 0; }
.uat-footer-logo-text { font-size: 19px; font-weight: 800; color: #fff; letter-spacing: -.01em; }
.uat-footer-tagline { margin: 0; color: #94a3b8; max-width: 320px; }

.uat-footer-socials { list-style: none; margin: 4px 0 0; padding: 0; display: flex; gap: 10px; flex-wrap: wrap; }
.uat-footer-socials a { width: 36px; height: 36px; border-radius: var(--uat-pill); background: rgba(255,255,255,.08); display: flex; align-items: center; justify-content: center; color: #cbd5e1; transition: background-color .15s, color .15s; }
.uat-footer-socials a:hover, .uat-footer-socials a:focus-visible { background: var(--uat-primary); color: #fff; }
.uat-footer-socials svg { width: 16px; height: 16px; display: block; fill: currentColor; }

.uat-footer-col { display: flex; flex-direction: column; gap: 14px; }
.uat-footer-col-title { font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #fff; }
.uat-footer-menu { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }

.uat-footer-bottom { padding-top: 22px; border-top: 1px solid rgba(255,255,255,.08); display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; font-size: 13px; color: #94a3b8; }

@media (max-width: 960px) {
  .uat-footer-grid { grid-template-columns: 1fr 1fr; }
  .uat-footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .uat-footer-grid { grid-template-columns: 1fr; gap: 28px; }
  .uat-footer-bottom { flex-direction: column; align-items: flex-start; gap: 8px; }
}