/* ==========================================================================
   quel-traceur-gps.fr — Design system "pro & confiance"
   Direction : sobriété d'expert-sécurité + motif signal GPS discret.
   Base : navy #1d3557 / amber #fb8500 / cream — Fraunces (titres) + DM Sans (corps).
   Injection : Apparence > Personnaliser > CSS additionnel (réversible, aucun fichier thème modifié).
   ========================================================================== */

:root{
  --tg-navy:#1d3557;
  --tg-navy-deep:#12233d;
  --tg-steel:#4a6280;      /* bleu-acier — élément "confiance" secondaire */
  --tg-amber:#fb8500;
  --tg-amber-deep:#e07600;
  --tg-cream:#faf6ef;
  --tg-cream-dim:#f1ead9;
  --tg-ink:#1a1f26;
  --tg-line:rgba(29,53,87,0.12);
  --tg-shadow:0 12px 32px -12px rgba(18,35,61,0.35);
  --tg-radius:14px;
  --tg-font-display:'Fraunces', Georgia, serif;
  --tg-font-body:'DM Sans', -apple-system, sans-serif;
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; }
}

body{ background:var(--tg-cream); color:var(--tg-ink); font-family:var(--tg-font-body); }

/* ---- Bandeau de confiance (sticky, fin, sous le header) ---------------- */
.tg-trust-bar{
  display:flex; justify-content:center; gap:2.2rem; flex-wrap:wrap;
  background:var(--tg-navy-deep); color:var(--tg-cream-dim);
  font-size:0.78rem; letter-spacing:0.04em; text-transform:uppercase;
  padding:0.55rem 1rem; border-bottom:1px solid rgba(251,133,0,0.25);
}
.tg-trust-bar span{ display:inline-flex; align-items:center; gap:0.4rem; opacity:0.92; }
.tg-trust-bar span::before{
  content:''; width:6px; height:6px; border-radius:50%;
  background:var(--tg-amber); box-shadow:0 0 0 3px rgba(251,133,0,0.18);
}

/* ---- Hero -------------------------------------------------------------- */
.tg-hero{
  position:relative; overflow:hidden;
  background:
    radial-gradient(circle at 82% 20%, rgba(251,133,0,0.10), transparent 45%),
    linear-gradient(180deg, var(--tg-navy) 0%, var(--tg-navy-deep) 100%);
  color:var(--tg-cream); padding:5.5rem 1.5rem 6rem;
}

/* ---- Signature : ticker "position confirmée" ---------------------------
   Pas un radar générique — l'écran qu'affiche réellement une app Tractive/
   Invoxia. Un seul point qui respire doucement, une ligne d'état, un
   horodatage qui avance. C'est l'élément que le site doit garder en tête. */
.tg-live-ping{
  display:inline-flex; align-items:center; gap:0.55rem;
  background:rgba(250,246,239,0.06); border:1px solid rgba(250,246,239,0.16);
  border-radius:999px; padding:0.45rem 0.9rem 0.45rem 0.7rem;
  font-family:var(--tg-font-body); font-size:0.78rem; letter-spacing:0.02em;
  color:rgba(250,246,239,0.85); backdrop-filter:blur(2px);
}
.tg-live-ping .tg-dot{
  width:8px; height:8px; border-radius:50%; background:#5fd97a; flex:none;
  box-shadow:0 0 0 0 rgba(95,217,122,0.55);
  animation:tg-breathe 2.4s ease-in-out infinite;
}
@keyframes tg-breathe{
  0%,100%{ box-shadow:0 0 0 0 rgba(95,217,122,0.45); }
  50%{ box-shadow:0 0 0 5px rgba(95,217,122,0); }
}
.tg-live-ping time{ color:var(--tg-amber); font-variant-numeric:tabular-nums; }
.tg-hero h1{
  font-family:var(--tg-font-display); font-weight:600; font-size:clamp(2.1rem,4vw,3.4rem);
  max-width:19ch; line-height:1.08; letter-spacing:-0.01em;
  animation:tg-rise 0.7s cubic-bezier(.2,.8,.2,1) both;
}
.tg-hero .tg-kicker{
  display:inline-block; font-family:var(--tg-font-body); font-size:0.82rem;
  letter-spacing:0.14em; text-transform:uppercase; color:var(--tg-amber);
  margin-bottom:1rem; animation:tg-rise 0.6s ease both;
}
.tg-hero p.tg-lede{
  max-width:58ch; font-size:1.08rem; color:rgba(250,246,239,0.82); margin-top:1.1rem;
  animation:tg-rise 0.7s ease 0.1s both;
}
@keyframes tg-rise{ from{ opacity:0; transform:translateY(14px);} to{ opacity:1; transform:none;} }

/* ---- Boutons ------------------------------------------------------------ */
.tg-btn{
  display:inline-flex; align-items:center; gap:0.5rem;
  font-family:var(--tg-font-body); font-weight:700; font-size:0.95rem;
  padding:0.85rem 1.6rem; border-radius:999px; text-decoration:none;
  transition:transform 0.18s ease, box-shadow 0.18s ease;
}
.tg-btn-primary{
  background:var(--tg-amber); color:var(--tg-navy-deep);
  box-shadow:0 6px 18px -6px rgba(251,133,0,0.55);
}
.tg-btn-primary:hover{ transform:translateY(-2px); box-shadow:0 10px 24px -6px rgba(251,133,0,0.65); }
.tg-btn-ghost{
  background:transparent; color:var(--tg-cream); border:1.5px solid rgba(250,246,239,0.35);
}
.tg-btn-ghost:hover{ border-color:var(--tg-amber); color:var(--tg-amber); }

/* ---- Bouton lien affilié Amazon — vivid + heartbeat ---------------------
   Volontairement différent du bouton ambre (nav interne) : un lien Amazon
   quitte le site, il doit se voir immédiatement. Bleu vif (pas l'orange
   Amazon, trop proche de notre propre ambre = confusion interne/externe),
   pulse en double-battement (systole/diastole), pas un fondu mou. */
.tg-btn-amazon{
  --tg-buy:#2563eb;
  background:var(--tg-buy); color:#fff;
  box-shadow:0 6px 16px -4px rgba(37,99,235,0.55);
  animation:tg-heartbeat 2.6s ease-in-out infinite;
}
.tg-btn-amazon:hover{
  transform:translateY(-2px) scale(1.02);
  box-shadow:0 10px 22px -4px rgba(37,99,235,0.7);
  animation-play-state:paused;
}
@keyframes tg-heartbeat{
  0%, 100%{ transform:scale(1); box-shadow:0 6px 16px -4px rgba(37,99,235,0.55); }
  14%{ transform:scale(1.055); box-shadow:0 8px 20px -4px rgba(37,99,235,0.7); }
  28%{ transform:scale(1); box-shadow:0 6px 16px -4px rgba(37,99,235,0.55); }
  42%{ transform:scale(1.03); box-shadow:0 7px 18px -4px rgba(37,99,235,0.62); }
  56%{ transform:scale(1); box-shadow:0 6px 16px -4px rgba(37,99,235,0.55); }
}

/* ---- Bouton lien affilié Darty — secondaire, statique ------------------- */
.tg-btn-darty{
  background:#fff; color:#c8102e; border:1.5px solid #c8102e;
}
.tg-btn-darty:hover{ background:#c8102e; color:#fff; transform:translateY(-2px); }

/* ---- Bloc image produit dans une fiche catégorie (comparatif) ----------- */
.tg-product-media{
  width:100%; max-width:220px; aspect-ratio:1/1; object-fit:contain;
  background:#fff; border:1px solid var(--tg-line); border-radius:var(--tg-radius);
  padding:0.8rem; float:right; margin:0 0 1rem 1.4rem;
}
@media (max-width:520px){
  .tg-product-media{ float:none; margin:0 auto 1rem; display:block; }
}

/* ---- Mise en page fiche AVIS individuelle : image fixe à gauche --------
   Colonne image en position:sticky pendant que le texte défile à droite.
   S'effondre en 1 colonne (image en haut, non fixe) sous 860px. */
.tg-review-layout{
  display:grid; grid-template-columns:300px 1fr; gap:2.6rem; align-items:start;
  max-width:1100px; margin:2rem auto; padding:0 1.5rem;
}
.tg-review-media{ position:sticky; top:96px; }
.tg-review-media img{
  width:100%; aspect-ratio:1/1; object-fit:contain;
  background:#fff; border:1px solid var(--tg-line); border-radius:var(--tg-radius);
  padding:1.4rem; box-shadow:var(--tg-shadow); display:block;
}
.tg-review-media .tg-review-price{
  display:block; text-align:center; margin-top:0.9rem; font-family:var(--tg-font-display);
  font-size:1.3rem; color:var(--tg-navy); font-weight:600;
}
.tg-review-media .tg-btn{ width:100%; justify-content:center; margin-top:0.7rem; }
.tg-review-content{ min-width:0; }
@media (max-width:860px){
  .tg-review-layout{ grid-template-columns:1fr; }
  .tg-review-media{ position:static; max-width:260px; margin:0 auto 1.5rem; }
}

/* ---- Cartes critères / "comment choisir" -------------------------------- */
.tg-criteria-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:1.1rem;
  margin:2.5rem 0;
}
.tg-criteria-card{
  background:#fff; border:1px solid var(--tg-line); border-radius:var(--tg-radius);
  padding:1.4rem 1.3rem; position:relative; overflow:hidden;
  transition:transform 0.2s ease, box-shadow 0.2s ease;
}
.tg-criteria-card:hover{ transform:translateY(-3px); box-shadow:var(--tg-shadow); }
.tg-criteria-card::before{
  content:''; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--tg-amber);
}
.tg-criteria-card h3{
  font-family:var(--tg-font-display); font-size:1.05rem; color:var(--tg-navy); margin:0 0 0.4rem;
}
.tg-criteria-card p{ font-size:0.92rem; color:#4a5568; margin:0; }

/* ---- Barres de score (précision / autonomie / étanchéité...) ----------- */
.tg-score-row{ display:flex; align-items:center; gap:0.7rem; margin:0.4rem 0; }
.tg-score-label{ flex:0 0 130px; font-size:0.82rem; color:var(--tg-navy); font-weight:600; }
.tg-score-track{ flex:1; height:7px; border-radius:99px; background:var(--tg-cream-dim); overflow:hidden; }
.tg-score-fill{
  height:100%; border-radius:99px;
  background:linear-gradient(90deg, var(--tg-steel), var(--tg-amber));
  width:var(--tg-score,60%);
  animation:tg-fill 1s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes tg-fill{ from{ width:0; } }

/* ---- Tableau comparatif — sticky header, ligne "meilleur choix" -------- */
.tg-compare-table{ width:100%; border-collapse:separate; border-spacing:0; background:#fff;
  border-radius:var(--tg-radius); overflow:hidden; box-shadow:var(--tg-shadow); }
.tg-compare-table thead th{
  position:sticky; top:0; background:var(--tg-navy); color:var(--tg-cream);
  font-family:var(--tg-font-body); font-size:0.8rem; text-transform:uppercase; letter-spacing:0.05em;
  padding:0.9rem 1rem; text-align:left;
}
.tg-compare-table tbody tr{ border-top:1px solid var(--tg-line); transition:background 0.15s ease; }
.tg-compare-table tbody tr:hover{ background:var(--tg-cream); }
.tg-compare-table tbody tr.tg-best{ background:rgba(251,133,0,0.06); }
.tg-compare-table tbody tr.tg-best td:first-child{ border-left:3px solid var(--tg-amber); }
.tg-compare-table td{ padding:0.9rem 1rem; font-size:0.92rem; }
.tg-badge-best{
  display:inline-block; background:var(--tg-amber); color:var(--tg-navy-deep);
  font-size:0.68rem; font-weight:700; text-transform:uppercase; letter-spacing:0.04em;
  padding:0.2rem 0.55rem; border-radius:99px; margin-left:0.5rem;
}

/* ---- Séparateur "trajectoire suivie" entre sections ---------------------
   Le fil conducteur du site : une ligne pointillée avec des points d'étape,
   comme un trajet enregistré sur une carte — pas une simple <hr> déguisée. */
.tg-route-divider{
  display:flex; align-items:center; gap:0.4rem; margin:3.2rem 0; opacity:0.6;
}
.tg-route-divider::before, .tg-route-divider::after{
  content:''; flex:1; height:0; border-top:2px dotted var(--tg-steel);
  background-image:radial-gradient(circle, var(--tg-amber) 1.5px, transparent 1.5px);
  background-size:14px 2px; background-repeat:repeat-x; background-position:center;
  border-top:none; height:2px;
}
.tg-route-divider svg{ width:18px; height:18px; color:var(--tg-amber); flex:none; }

/* ---- Reveal au scroll — masqué UNIQUEMENT si JS confirmé actif --------- */
html.tg-js .tg-reveal{ opacity:0; transform:translateY(16px); transition:opacity 0.6s ease, transform 0.6s ease; }
html.tg-js .tg-reveal.tg-in{ opacity:1; transform:none; }

/* ---- FAQ — accordéon sobre ---------------------------------------------- */
.tg-faq-item{ border-bottom:1px solid var(--tg-line); }
.tg-faq-item summary{
  font-family:var(--tg-font-display); font-size:1.02rem; color:var(--tg-navy);
  padding:1.1rem 0; cursor:pointer; list-style:none; display:flex; justify-content:space-between; gap:1rem;
}
.tg-faq-item summary::-webkit-details-marker{ display:none; }
.tg-faq-item summary::after{ content:'+'; color:var(--tg-amber); font-size:1.3rem; }
.tg-faq-item[open] summary::after{ content:'−'; }
.tg-faq-item p{ padding-bottom:1.1rem; color:#4a5568; }