/* ================================================================
   GROWTH PARTNER — Correctifs de contraste et de lisibilité
   Chargée après style.css (thème enfant) et gp-lovable.css.

   POURQUOI CE FICHIER

   Le site superpose deux systèmes de design. L'ancien (style.css) donne
   au hero un fond navy foncé ; le récent (gp-lovable.css) redéfinit le
   hero sans redéclarer ce fond, mais stylise ses boutons et ses textes
   pour un fond CLAIR. Le fond sombre survit, les premiers plans clairs
   non — d'où du texte quasi noir sur du navy.

   Mesures relevées sur la page d'accueil avant correction :
     .gp-btn-outline  « Lire les analyses »   1,08:1  (illisible)
     .gp-footer h4    « Navigation / Légal »  1,08:1  (invisible)
     .gp-cta          boutons d'affiliation   2,80:1
     .gp-link-accent  liens orange            2,80:1
     .gp-see-all                              2,53:1
     liens de pied de page                    3,40:1
   Seuil WCAG AA : 4,5:1 pour le texte courant, 3:1 pour le texte large
   et les éléments graphiques porteurs d'information.

   PRINCIPE RETENU

   L'orange de la marque est conservé. Il est décliné en trois valeurs de
   la même teinte (24,6°), chacune affectée à un usage précis :

     --gp-o-decor   #f97316  formes décoratives, aucune information portée
     --gp-o-graphic #d95f08  petits graphiques informatifs (étoiles, coches) — ≥3:1
     --gp-o-action  #b84e05  texte de lien et fond de bouton — ≥4,5:1

   Aucune autre couleur n'est introduite : la marque reste orange.
   ================================================================ */

:root {
  --gp-o-decor:   #f97316;
  --gp-o-graphic: #d95f08;
  --gp-o-action:  #b84e05;

  /* ── Redéfinition des deux variables orange des systèmes existants ──
     `--gp-accent` (gp-lovable.css) et `--color-primary` (style.css) servent
     indifféremment de couleur de texte et de couleur de fond. Tant qu'elles
     valent #f97316 / #FF6B00, le même jeton produit 2,8:1 en texte sur blanc
     ET 2,8:1 en blanc sur fond — il échoue donc dans les deux sens.

     L'orange d'action résout les deux d'un coup : 5,1:1 en texte sur blanc,
     5,1:1 en blanc sur fond. Redéfinir la variable corrige d'un seul geste
     toutes les règles qui l'utilisent, dans les deux fichiers, sans avoir à
     les réécrire une par une ni à recourir à !important.

     La teinte vive reste disponible via --gp-o-decor, réappliquée plus bas
     aux éléments purement décoratifs et aux fonds sombres. */
  --gp-accent:          #b84e05;
  --color-primary:      #b84e05;
  --color-primary-dark: #964004;

  /* Premiers plans sur les surfaces sombres (hero et pied de page) */
  --gp-on-dark-strong: #ffffff;   /* 16,4:1 sur #1a1f2e */
  --gp-on-dark:        #cbd5e1;   /* 8,4:1 au point le plus clair du dégradé */
  --gp-on-dark-muted:  #b6bdc8;   /* 6,6:1 */

  /* Texte secondaire sur les surfaces claires — remplace #6b7280 (4,48:1) */
  --gp-ink-muted:      #565e6c;   /* 6,5:1 sur blanc, 6,1:1 sur le fond warm */
}

/* ────────────────────────────────────────────────────────────────
   1. HERO — fond navy foncé
   Les boutons et textes y étaient stylés pour un fond clair.
   ──────────────────────────────────────────────────────────────── */

/* Bouton principal : il était navy sur navy, donc invisible en tant que
   bouton. En orange d'action il devient le point d'entrée évident, avec
   5,1:1 pour son libellé et 3,2:1 entre sa surface et le hero. */
.gp-hero .gp-btn-primary {
  background: var(--gp-o-action);
  color: #fff;
  border-color: var(--gp-o-action);
}
.gp-hero .gp-btn-primary:hover {
  background: #a04304;
  border-color: #a04304;
}

/* Bouton secondaire : texte quasi noir sur navy (1,08:1). */
.gp-hero .gp-btn-outline {
  color: var(--gp-on-dark-strong);
  border-color: rgba(255, 255, 255, 0.38);
  background: transparent;
}
.gp-hero .gp-btn-outline:hover {
  color: var(--gp-on-dark-strong);
  border-color: var(--gp-o-decor);
  background: rgba(255, 255, 255, 0.06);
}

.gp-hero .gp-hero-sub { color: var(--gp-on-dark); }

.gp-hero .gp-trust,
.gp-hero .gp-trust span { color: var(--gp-on-dark-muted); }
.gp-hero .gp-trust-sep  { color: rgba(255, 255, 255, 0.3); }

/* Les chiffres flottants posés sur le visuel sombre */
.gp-hero .gp-float-lbl { color: var(--gp-ink-muted); }

/* ────────────────────────────────────────────────────────────────
   2. PIED DE PAGE — fond navy plein (#1a1f2e)
   Les intitulés de colonnes héritaient de l'encre sombre du thème.
   ──────────────────────────────────────────────────────────────── */

.gp-footer h4,
.gp-footer .gp-footer-col h4 {
  color: var(--gp-on-dark-strong);
}

.gp-footer a,
.gp-footer li a {
  color: var(--gp-on-dark-muted);   /* 8,7:1 */
}
.gp-footer a:hover,
.gp-footer li a:hover {
  color: var(--gp-on-dark-strong);
}

.gp-footer-bottom,
.gp-footer-bottom a {
  color: #a8b0bd;                    /* 7,5:1 */
}

/* ────────────────────────────────────────────────────────────────
   3. BOUTONS D'AFFILIATION ET LIENS ACCENTUÉS
   Le blanc sur l'orange vif plafonne à 2,8:1, quelle que soit la
   graisse. C'est la teinte du fond qu'il faut approfondir.
   ──────────────────────────────────────────────────────────────── */

.gp-cta,
.gp-nl-btn,
.gp-aff-cta-btn,
.gp-btn--primary,
.gp-tool-card .gp-cta {
  background: var(--gp-o-action);
  border-color: var(--gp-o-action);
  color: #fff;
}
.gp-cta:hover,
.gp-nl-btn:hover,
.gp-aff-cta-btn:hover,
.gp-btn--primary:hover {
  background: #a04304;
  border-color: #a04304;
  color: #fff;
}

/* Liens et intitulés en orange sur fond clair */
.gp-link-accent,
.gp-see-all,
.gp-label,
.gp-overline,
.gp-nav-nl,
.gp-art-cat-text {
  color: var(--gp-o-action);
}
.gp-link-accent:hover,
.gp-see-all:hover {
  color: #8f3c03;
}

/* Sur les fonds navy, l'orange d'action tombe à 3,4:1 : c'est la teinte vive
   qu'il faut y employer, elle y atteint 5,9:1. La règle vaut pour le hero
   comme pour les sections sombres (« Outil mis en avant », newsletter). */
.gp-hero .gp-overline,
.gp-hero .gp-label,
.gp-hero .gp-link-accent,
.gp-navy .gp-overline,
.gp-navy .gp-label,
.gp-navy .gp-link-accent,
.gp-navy .gp-see-all,
.gp-section.gp-navy .gp-link-accent {
  color: var(--gp-o-decor);
}
.gp-navy .gp-link-accent:hover,
.gp-hero .gp-link-accent:hover { color: #ffa04d; }

/* ────────────────────────────────────────────────────────────────
   4. GRAPHIQUES PORTEURS D'INFORMATION

   Étoiles de notation et coches sont écrites avec de vrais caractères
   (★ et ✓), pas avec des images : les navigateurs et les lecteurs d'écran
   les traitent comme du texte. On leur applique donc le seuil du texte
   (4,5:1) plutôt que celui des éléments graphiques (3:1), ce qui évite
   toute ambiguïté — l'écart visuel entre les deux teintes est négligeable
   à cette taille.
   ──────────────────────────────────────────────────────────────── */

.gp-stars,
.gp-check {
  color: var(--gp-o-action);         /* 5,1:1 sur blanc */
}

/* Pastilles et puces : formes pleines, sans texte — seuil de 3:1. */
.gp-art-cat-dot,
.gp-trust-live::before {
  background: var(--gp-o-graphic);
  color: var(--gp-o-graphic);
}
/* Sur le hero sombre, la puce « Indépendant » est verte d'origine : on la
   laisse, elle offre déjà un contraste suffisant sur le navy. */

/* ────────────────────────────────────────────────────────────────
   5. TEXTES SECONDAIRES SUR FONDS CLAIRS
   #6b7280 tombait à 4,48:1 sur le fond warm : juste sous le seuil.
   ──────────────────────────────────────────────────────────────── */

.gp-art-date,
.gp-cat-pill,
.gp-aff-label,
.gp-review-link,
.gp-rating-val,
.gp-feat-val,
.gp-tool-card .gp-review-link,
.gp-nl-note {
  color: var(--gp-ink-muted);
}
.gp-review-link:hover { color: var(--gp-o-action); }

/* La note de la newsletter est posée sur le navy, pas sur du clair */
.gp-navy .gp-nl-note,
#newsletter .gp-nl-note {
  color: rgba(235, 235, 235, 0.82);
}
.gp-navy .gp-nl-note a,
#newsletter .gp-nl-note a { color: inherit; }

/* Champ de saisie : le texte indicatif doit rester lisible (4,5:1). */
.gp-nl-input::placeholder { color: #5b6472; opacity: 1; }
.gp-nl-input { color: #1f2937; }

/* ────────────────────────────────────────────────────────────────
   6. FOCUS CLAVIER
   Aucun style de focus visible n'était défini : la navigation au
   clavier se faisait à l'aveugle.
   ──────────────────────────────────────────────────────────────── */

a:focus-visible,
button:focus-visible,
input:focus-visible,
.gp-cta:focus-visible,
.gp-btn-primary:focus-visible,
.gp-btn-outline:focus-visible {
  outline: 3px solid var(--gp-o-action);
  outline-offset: 2px;
  border-radius: 4px;
}
.gp-hero a:focus-visible,
.gp-hero button:focus-visible,
.gp-footer a:focus-visible,
.gp-navy a:focus-visible,
.gp-navy button:focus-visible {
  outline-color: #ffb066;
}

/* ────────────────────────────────────────────────────────────────
   7. DÉCOR — restitution de la teinte vive
   Redéfinir --gp-accent a assombri aussi les éléments purement
   décoratifs, qui ne portent aucun texte et ne sont soumis à aucun
   seuil. On leur rend l'orange de marque.
   ──────────────────────────────────────────────────────────────── */

.gp-hero-bg-rot,
.gp-avatar-glow,
.gp-highlight,
.gp-nl-badge-dot,
.gp-float-orange,
.gp-hero::before,
.gp-hero::after {
  --gp-accent: var(--gp-o-decor);
  --color-primary: var(--gp-o-decor);
}

/* Le soulignement du mot mis en avant dans le titre : forme, pas texte. */
.gp-highlight::after { background: var(--gp-o-decor); }

/* Sur les fonds navy, la teinte vive est aussi la plus lisible (5,9:1). */
.gp-hero,
.gp-navy,
.gp-footer {
  --gp-accent: var(--gp-o-decor);
  --color-primary: var(--gp-o-decor);
}
/* …sauf pour les surfaces de bouton qui portent du texte blanc. */
.gp-hero .gp-btn-primary,
.gp-navy .gp-cta,
.gp-navy .gp-nl-btn,
.gp-navy .gp-btn--primary {
  background: var(--gp-o-action);
  border-color: var(--gp-o-action);
  color: #fff;
}

/* Un bouton d'action porte toujours un libellé blanc.
   La règle de couleur des liens du corps d'article (`.gp-post-body a`,
   spécificité 0-1-1) l'emportait sur la classe seule du bouton (0-1-0) :
   le libellé prenait la couleur d'accent, soit de l'orange sur orange, à 1:1.
   On qualifie donc le sélecteur par la balise et par le conteneur pour
   reprendre la main sans recourir à !important. */
a.gp-btn--primary,
a.gp-btn--primary:visited,
a.gp-cta,
a.gp-cta:visited,
a.gp-nl-btn,
button.gp-nl-btn,
a.gp-aff-cta-btn,
a.gp-aff-cta-btn:visited,
.gp-post-body a.gp-btn--primary,
.gp-post-body a.gp-cta,
.gp-post-body a.gp-aff-cta-btn,
.gp-article-content a.gp-btn--primary,
.entry-content a.gp-btn--primary,
.entry-content a.gp-cta,
.entry-content a.gp-aff-cta-btn {
  color: #fff;
}

/* ────────────────────────────────────────────────────────────────
   7b. DERNIERS ÉCARTS RELEVÉS PAR LA MESURE
   ──────────────────────────────────────────────────────────────── */

/* Étiquettes de section posées sur un fond sombre.
   Ces éléments portent leur couleur en style inline (`color:var(--color-primary)`),
   qu'aucune règle de feuille de style ne peut supplanter. Mais la valeur passe
   par une variable : il suffit donc de redéfinir cette variable SUR l'élément
   pour que le style inline résolve la bonne teinte. Pas de !important. */
.gp-section-tag[style*="rgba(255,107,0"],
.gp-section-tag[style*="rgba(255, 107, 0"],
.gp-section-tag[style*="rgba(255,255,255"],
.gp-section--dark .gp-section-tag,
.gp-hero .gp-section-tag,
.gp-navy .gp-section-tag {
  --color-primary: var(--gp-o-decor);   /* 5,4:1 sur le bandeau brun foncé */
  color: var(--gp-o-decor);
}

/* Biographie de l'auteur et légendes : #6b7280 plafonnait à 4,48:1. */
.gp-author-card-bio,
.gp-post-meta,
.gp-post-meta span {
  color: var(--gp-ink-muted);
}

/* Le sous-titre de la newsletter est posé sur le navy, pas sur du clair :
   l'encre sombre y tomberait à 2,6:1. */
.gp-nl-sub { color: var(--gp-ink-muted); }
.gp-navy .gp-nl-sub,
#newsletter .gp-nl-sub,
#newsletter-single .gp-nl-sub,
.gp-navy .gp-nl-note { color: var(--gp-on-dark); }

/* Séparateur de fil d'Ariane : caractère typographique, donc seuil du texte. */
.gp-breadcrumb .sep,
.gp-breadcrumb .current {
  color: var(--gp-ink-muted);
}

/* Le texte clair posé sur l'orange d'action doit rester franchement blanc :
   un blanc cassé (#f4e4da) n'atteignait que 4,1:1. */
[style*="background:#b84e05"],
[style*="background: #b84e05"],
[style*="background:var(--color-primary)"] {
  color: #fff;
}

/* ────────────────────────────────────────────────────────────────
   8. LIENS DANS LE CORPS DES ARTICLES
   Certains liens portent une couleur écrite directement dans le HTML
   de l'article. Une règle de feuille de style ne peut pas primer sur
   un attribut style ; ces cas sont traités en base. Les liens sans
   style propre sont, eux, couverts ici.
   ──────────────────────────────────────────────────────────────── */

.gp-post-body a:not([class]),
.gp-article-content a:not([class]),
.entry-content a:not([class]) {
  color: var(--gp-o-action);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.gp-post-body a:not([class]):hover,
.gp-article-content a:not([class]):hover,
.entry-content a:not([class]):hover { color: #8f3c03; }

/* ────────────────────────────────────────────────────────────────
   9. CONFORT DE LECTURE
   ──────────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ────────────────────────────────────────────────────────────────
   10. GRIS SECONDAIRE DE L'ANCIEN SYSTÈME
   --color-gray valait #6B7280 : 4,47:1 sur les encadrés crème
   (#fff4ec), soit juste sous le seuil. Un cran plus sombre suffit,
   et la hiérarchie visuelle reste identique.
   ──────────────────────────────────────────────────────────────── */
:root {
  --color-gray:       #565e6c;   /* 6,1:1 sur crème, 6,5:1 sur blanc */
  --color-gray-light: #6b7280;   /* réservé aux fonds strictement blancs */
}

/* ────────────────────────────────────────────────────────────────
   11. BANDEAU PROMOTIONNEL (page Bolt Business)
   Le bandeau a un fond orange plein et devrait porter du texte blanc.
   Deux défauts s'y cumulaient :
     • une règle de paragraphe plus spécifique y ramenait l'encre
       sombre du thème (#3d4455 sur orange, 1,9:1) ;
     • `opacity: .85` posée sur l'élément entier délavait le blanc
       jusqu'à 3,8:1 — l'opacité agit sur tout l'élément, pas seulement
       sur sa couleur, et rend le contraste imprévisible.
   ──────────────────────────────────────────────────────────────── */

.gp-promo-box,
.gp-promo-box p,
.gp-promo-box span,
.gp-promo-box strong,
.gp-promo-box .promo-label,
.gp-promo-box .promo-title,
.gp-promo-box .promo-desc,
.gp-post-body .gp-promo-box p {
  color: #fff;
}
.gp-promo-box .promo-label,
.gp-promo-box .promo-desc {
  opacity: 1;                      /* 3,8:1 → 5,1:1 */
}

/* Le code promo lui-même reste une pastille claire à encre sombre. */
.gp-promo-box .gp-promo-code,
.gp-promo-box .promo-code {
  background: #fff;
  color: #7a3403;                  /* 7,4:1 sur blanc */
}

/* ────────────────────────────────────────────────────────────────
   12. TABLEAU COMPARATIF — marques oui / partiel / non
   Les pastilles vertes, ambre et rouges étaient posées en teintes
   vives sur des fonds pastel : 2,1 à 3,6:1. Elles portent une
   information que la couleur seule véhicule, donc le seuil du texte
   s'applique. Les teintes restent identifiables (vert, ambre, rouge),
   simplement assombries.
   ──────────────────────────────────────────────────────────────── */

.check-yes,
.gp-check-yes  { color: #166534; }   /* 6,8:1 */
.check-part,
.gp-check-part { color: #92400e; }   /* 6,7:1 */
.check-no,
.gp-check-no   { color: #b91c1c; }   /* 6,2:1 */