/* ============================================================
   Correctif de contraste - WCAG AA
   ------------------------------------------------------------
   Probleme corrige (audite le 2026-08-25, 104 echecs AA) :
   site-theme.css peint TOUTES les sections en fonce via
       section:nth-child(even) { background: #1F2937 }
       section:nth-child(odd)  { background: #111827 }
   mais le HTML des templates utilise encore les utilitaires du
   theme CLAIR (text-primary-900 = #001F3F, text-gray-900...).
   Resultat : bleu marine sur gris anthracite, ratio 1.07 a 1.42,
   soit un texte pratiquement invisible.

   Second bug, plus grave : les champs du formulaire de devis
   portent bg-white/90 (fond blanc) tandis que le theme leur
   impose color: var(--theme-text) (#D1D5DB). Le visiteur ecrivait
   en gris clair sur blanc, ratio ~1.5.

   PERIMETRE : strictement les surfaces peintes en fonce par le
   theme (section, footer, cartes). Le corps d'article est dans
   <article>, jamais dans <section>, et reste donc intact -
   verifie : contraste 14.7 a 17.7 sur fond blanc.
   Le :not(.prose *) est une ceinture de securite si un futur
   gabarit venait a imbriquer .prose dans une section.

   Doit etre charge APRES site-theme.css.
   ============================================================ */

/* --- Titres : dark navy -> blanc ---------------------------- */
section :not(.prose *).text-primary-900,
section :not(.prose *).text-gray-900,
section :not(.prose *).text-slate-900,
section :not(.prose *).text-\[\#001F3F\],
footer .text-primary-900,
footer .text-gray-900,
.card .text-primary-900,
.card .text-gray-900 {
  color: var(--theme-heading, #ffffff);
}

/* Variantes avec opacite (text-[#001F3F]/60, /70) */
section :not(.prose *).text-\[\#001F3F\]\/60,
section :not(.prose *).text-\[\#001F3F\]\/70,
section :not(.prose *).text-\[\#001F3F\]\/80 {
  color: var(--theme-text, #d1d5db);
}

/* --- Texte courant : gris fonce -> gris clair --------------- */
section :not(.prose *).text-gray-800,
section :not(.prose *).text-gray-700,
section :not(.prose *).text-gray-600,
section :not(.prose *).text-primary-800,
section :not(.prose *).text-primary-700,
section :not(.prose *).text-primary-600,
footer .text-gray-700,
footer .text-gray-600 {
  color: var(--theme-text, #d1d5db);
}

/* --- Texte secondaire : gris moyen -> gris clair lisible ----
   #6B7280 donnait 3.04:1 (echec AA). #9CA3AF donne ~6.6:1.     */
section :not(.prose *).text-gray-500,
section :not(.prose *).text-gray-400,
section :not(.prose *).text-primary-500,
footer .text-gray-500,
footer .text-gray-400 {
  color: var(--theme-text-light, #9ca3af);
}

/* --- Accents colores : eclaircis pour passer AA -------------- */
section :not(.prose *).text-primary-400,
section :not(.prose *).text-primary-300,
section :not(.prose *).text-blue-600,
section :not(.prose *).text-blue-500 {
  color: #93c5fd; /* ~9.4:1 sur #111827 */
}

section :not(.prose *).text-teal-600,
section :not(.prose *).text-teal-700,
section :not(.prose *).text-green-600 {
  color: #2dd4bf; /* ~9:1 */
}

/* Chiffres de stats : le theme les met en accent #7C3AED (2.58:1) */
section .stat-number,
section .text-3xl.font-bold,
section .text-4xl.font-bold {
  color: #a78bfa; /* ~6.4:1 */
}

/* --- Formulaire : champs blancs -> texte fonce --------------
   Le theme imposait un texte clair sur des champs bg-white/90. */
section input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
section select,
section textarea,
form input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
form select,
form textarea {
  background-color: #ffffff;
  color: #0f172a;          /* ~17.9:1 sur blanc */
}

section input::placeholder,
section textarea::placeholder,
form input::placeholder,
form textarea::placeholder {
  color: #64748b;          /* ~4.8:1 sur blanc, AA */
  opacity: 1;              /* Firefox applique 0.54 par defaut */
}

section select option {
  background-color: #ffffff;
  color: #0f172a;
}

/* Libelles et mentions RGPD du formulaire */
section form label,
section form .text-xs,
section form .text-sm {
  color: var(--theme-text, #d1d5db);
}

/* --- Liens dans les zones sombres --------------------------- */
section :not(.prose *) a:not([class*="bg-"]):not(.btn-primary):not(.cta-button),
footer a:not([class*="bg-"]) {
  color: #93c5fd;
}

section :not(.prose *) a:not([class*="bg-"]):hover,
footer a:not([class*="bg-"]):hover {
  color: #bfdbfe;
}

/* ============================================================
   Passe 2 - cas residuels mesures apres la passe 1
   ============================================================ */

/* Couleur HERITEE des sections sombres.
   Certains textes (.text-sm, .text-xs sans classe de couleur)
   heritaient du gris fonce par defaut du body. On aligne la
   couleur d'heritage sur celle du theme ; les elements qui
   portent leur propre classe de couleur restent geres plus haut. */
section:nth-child(even),
section:nth-child(odd) {
  color: var(--theme-text, #d1d5db);
}

/* Le hero et les bandeaux superposes sombres */
.hero-section .text-sm,
.hero-section .text-xs,
.hero-section p:not([class*="text-"]) {
  color: var(--theme-text-light, #9ca3af);
}

/* Indicateur de progression du formulaire (classes maison,
   #64748B et teal-600 = 3.0 a 3.9:1 sur fond sombre) */
.form-progress-tag,
.form-progress-label {
  color: var(--theme-text, #d1d5db);
}

.form-progress-step.is-active .form-progress-label,
.form-progress-step[aria-current] .form-progress-label {
  color: #5eead4; /* teal-300, ~10:1 */
}

/* Badges verts : emerald-600 en fond donne 3.77:1 avec du blanc.
   emerald-700 remonte a ~5.5:1. */
section .bg-emerald-600,
section .bg-green-600,
footer .bg-emerald-600 {
  background-color: #047857;
}

/* ============================================================
   Passe 3 - surcharge des STYLES INLINE
   ------------------------------------------------------------
   Les gabarits partages du C20 codent des gris du theme clair
   directement dans l'attribut style :
       templates/hero-custom.php : style="color: #6B7280"
       templates/hero.php        : style="color: #64748b"
       templates/authority-links.php, includes/exit-intent.php...
   Un style inline ne peut pas etre surcharge par une feuille
   externe sans !important : c'est le seul cas ou la regle se
   justifie, et l'usage est ici volontairement limite aux
   selecteurs [style] concernes.

   CURE DEFINITIVE : retirer ces couleurs inline des 9 gabarits
   et les remplacer par des classes. A faire cote template C20,
   car ces fichiers sont partages par les 20 sites.
   ============================================================ */

.hero-section .text-sm[style],
.hero-section .text-xs[style],
.hero-section p[style*="color"],
.hero-section span[style*="color"] {
  color: var(--theme-text-light, #9ca3af) !important;
}

.form-progress-tag[style],
.form-progress-label[style] {
  color: var(--theme-text, #d1d5db) !important;
}

/* Liens et libelles "sources officielles" (authority-links.php) */
section a[style*="#64748b"],
section p[style*="#64748b"],
section div[style*="#64748b"],
section a[style*="#6b7280"],
section p[style*="#6b7280"],
section div[style*="#6b7280"] {
  color: var(--theme-text-light, #9ca3af) !important;
}

/* Exit-intent : la modale a son propre fond clair, on ne touche pas */
#exit-intent-modal p[style],
.exit-intent p[style] {
  color: #4b5563 !important;
}

/* Badge "Officiele bronnen" (authority-links.php, style inline
   background:#059669). Blanc sur emerald-600 = 3.77:1, insuffisant
   pour du 11px. emerald-700 remonte a ~5.5:1. */
span[style*="#059669"],
span[style*="background:#059669"] {
  background: #047857 !important;
}

/* ============================================================
   Passe 4 - cartes assombries HORS <section>
   ------------------------------------------------------------
   site-theme.css assombrit aussi des conteneurs hors section :
       .card, .bg-white.rounded-lg, [class*="shadow"]
   La liste du blog en est pleine : <a class="bg-white rounded-xl
   ... hover:shadow-lg"> devient #1F2937 alors que les titres
   restent en text-primary-900. 55 echecs a 1.13:1 sur /blog/.

   On calque STRICTEMENT le perimetre sur ces trois selecteurs :
   on ne recolore que ce que le theme a effectivement assombri,
   jamais une carte restee blanche.
   ============================================================ */

.card .text-primary-900,     .card .text-gray-900,     .card .text-\[\#001F3F\],
.bg-white.rounded-lg .text-primary-900, .bg-white.rounded-lg .text-gray-900,
[class*="shadow"] .text-primary-900,
[class*="shadow"] .text-gray-900,
[class*="shadow"] .text-slate-900,
[class*="shadow"] .text-\[\#001F3F\] {
  color: var(--theme-heading, #ffffff);
}

.card .text-gray-700, .card .text-gray-600, .card .text-primary-700, .card .text-primary-600,
.bg-white.rounded-lg .text-gray-700, .bg-white.rounded-lg .text-gray-600,
[class*="shadow"] .text-gray-700,
[class*="shadow"] .text-gray-600,
[class*="shadow"] .text-primary-700,
[class*="shadow"] .text-primary-600 {
  color: var(--theme-text, #d1d5db);
}

.card .text-gray-500, .card .text-gray-400,
.bg-white.rounded-lg .text-gray-500, .bg-white.rounded-lg .text-gray-400,
[class*="shadow"] .text-gray-500,
[class*="shadow"] .text-gray-400,
[class*="shadow"] .text-primary-500,
[class*="shadow"] .text-primary-400 {
  color: var(--theme-text-light, #9ca3af);
}

[class*="shadow"] .text-teal-600,
[class*="shadow"] .text-green-600,
.card .text-teal-600 {
  color: #2dd4bf;
}

/* Elements assombris qui portent EUX-MEMES la classe de couleur */
[class*="shadow"].text-primary-900,
[class*="shadow"].text-gray-900,
.card.text-primary-900 {
  color: var(--theme-heading, #ffffff);
}

/* ============================================================
   Passe 5 - 2026-09-10 : texte des formulaires en noir
   ------------------------------------------------------------
   Signale par Samuel : "l'encart option a un style d'ecriture
   gris sur fond gris clair, c'est illisible".
   Mesure : <select> et <textarea> affichaient #D1D5DB sur un fond
   bg-white/90 => ~1.5:1. Les <input> etaient deja corriges en
   passe 1, mais select et textarea heritaient encore de la
   couleur du theme sombre par un chemin que la cascade
   n'exposait pas (aucune regle ne matchait explicitement).
   On force donc explicitement, sur TOUS les controles de
   formulaire, quel que soit le conteneur.
   ============================================================ */

input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
select,
textarea,
select option,
select optgroup {
  color: #0f172a !important;          /* ~17.9:1 sur blanc */
  background-color: #ffffff !important;
  -webkit-text-fill-color: #0f172a;   /* Safari/iOS ignorent color sur select */
}

/* Le placeholder reste gris, mais lisible (AA) */
input::placeholder,
textarea::placeholder {
  color: #64748b !important;          /* ~4.8:1 sur blanc */
  opacity: 1 !important;
}

/* Seul le libelle "aucune selection" reste gris (et lisible, 4.8:1).
   NB : ne PAS utiliser select:invalid ici — la pseudo-classe restait active
   sur un select pourtant rempli, ce qui gardait le texte en gris. */
select option[value=""] {
  color: #64748b !important;
  -webkit-text-fill-color: #64748b;
}

/* Champs desactives : contraste minimal conserve */
input:disabled, select:disabled, textarea:disabled {
  color: #475569 !important;
  -webkit-text-fill-color: #475569;
  background-color: #f1f5f9 !important;
}

/* ============================================================
   Passe 6 - 2026-09-10 : cartes restees BLANCHES
   ------------------------------------------------------------
   REGRESSION introduite par mes passes 1 et 4.
   site-theme.css n'assombrit que trois selecteurs :
       .card , .bg-white.rounded-lg , [class*="shadow"]
   Une carte "bg-white rounded-xl" SANS classe shadow (la FAQ)
   reste donc BLANCHE — mais ma passe 1 blanchissait quand meme
   son texte parce qu'il se trouve dans une <section>.
   Mesure sur /faq/ : question 1.00:1 (blanc sur blanc),
   reponse 1.47:1. Invisible.

   Regle : a l'interieur d'une carte blanche que le theme n'a PAS
   assombrie, on remet du texte fonce. Les cartes reellement
   assombries (.card, .rounded-lg, shadow) gardent le texte clair
   de la passe 4 — d'ou les :not() ci-dessous.
   ============================================================ */

section .bg-white:not(section):not(.card):not(.rounded-lg):not([class*="shadow"]) .text-primary-900,
section .bg-white:not(section):not(.card):not(.rounded-lg):not([class*="shadow"]) .text-gray-900,
section .bg-white:not(section):not(.card):not(.rounded-lg):not([class*="shadow"]) .text-slate-900,
section .bg-white:not(section):not(.card):not(.rounded-lg):not([class*="shadow"]) .text-\[\#001F3F\],
section .bg-white:not(section):not(.card):not(.rounded-lg):not([class*="shadow"]) strong {
  color: #001f3f !important;          /* ~16.6:1 sur blanc */
}

section .bg-white:not(section):not(.card):not(.rounded-lg):not([class*="shadow"]) .text-primary-800,
section .bg-white:not(section):not(.card):not(.rounded-lg):not([class*="shadow"]) .text-primary-700,
section .bg-white:not(section):not(.card):not(.rounded-lg):not([class*="shadow"]) .text-primary-600,
section .bg-white:not(section):not(.card):not(.rounded-lg):not([class*="shadow"]) .text-gray-700,
section .bg-white:not(section):not(.card):not(.rounded-lg):not([class*="shadow"]) .text-gray-600 {
  color: #374151 !important;          /* ~10.3:1 sur blanc */
}

section .bg-white:not(section):not(.card):not(.rounded-lg):not([class*="shadow"]) .text-primary-500,
section .bg-white:not(section):not(.card):not(.rounded-lg):not([class*="shadow"]) .text-primary-400,
section .bg-white:not(section):not(.card):not(.rounded-lg):not([class*="shadow"]) .text-gray-500,
section .bg-white:not(section):not(.card):not(.rounded-lg):not([class*="shadow"]) .text-gray-400 {
  color: #64748b !important;          /* ~4.8:1 sur blanc, AA */
}

/* Chevrons et icones SVG de l'accordeon, invisibles pour la meme raison */
section .bg-white:not(section):not(.card):not(.rounded-lg):not([class*="shadow"]) svg {
  color: #64748b;
}

/* ============================================================
   Passe 7 - 2026-09-10 : surfaces CLAIRES restantes
   ------------------------------------------------------------
   Deux elements poses sur des fonds clairs, mesures sur /faq/ :
   - fil d'Ariane : lien rouge pale #FCA5A5 sur .bg-primary-50
     (#E6EDF5) = 1.61:1. Le theme colore les <a> en accent, ce qui
     ne fonctionne que sur fond sombre.
   - bouton cookies .cc-accept : blanc sur green-500 = 2.28:1.
   ============================================================ */

/* Liens sur bandeaux clairs (fil d'Ariane, encarts bg-primary-50) */
nav.bg-primary-50 a,
.bg-primary-50 a:not([class*="bg-"]),
.bg-gray-50 a:not([class*="bg-"]),
.bg-slate-50 a:not([class*="bg-"]) {
  color: #1d4ed8 !important;          /* ~6.5:1 sur #E6EDF5 */
}

nav.bg-primary-50 a:hover,
.bg-primary-50 a:not([class*="bg-"]):hover {
  color: #c2410c !important;          /* accent fonce, ~5:1 */
}

/* Boutons du bandeau cookies : vert assez fonce pour du texte blanc */
.cc-btn.cc-accept,
.cc-accept {
  background-color: #15803d !important;  /* green-700, blanc ~5:1 */
  color: #ffffff !important;
}

.cc-btn.cc-accept:hover,
.cc-accept:hover {
  background-color: #166534 !important;
}

/* ============================================================
   Passe 8 - 2026-09-10 : cartes TEINTEES claires
   ------------------------------------------------------------
   Meme cause que la passe 6, autre conteneur. La passe 6 ne
   traitait que .bg-white ; les encarts teintes clairs
   (bg-accent-50, bg-primary-50, bg-gray-50...) restaient blancs
   sur clair. Mesure sur /faq/ :
     "Uw vraag niet gevonden?" .text-primary-900 -> blanc
     sur .bg-accent-50 (#E6FAF7) = 1.08:1.

   NB : une premiere version de cette passe ciblait aussi les <a>
   de facon large (.bg-white a {...}). Elle a ete RETIREE apres
   mesure : elle assombrissait les liens des cartes que le theme
   avait, elles, bien noircies (footer, /merci), faisant passer
   les echecs de 34 a 211 sur l'ensemble du site. On s'en tient
   donc aux classes de couleur de texte, jamais aux liens.
   ============================================================ */

.bg-accent-50:not(section):not([class*="shadow"]) .text-primary-900,
.bg-accent-100:not(section):not([class*="shadow"]) .text-primary-900,
.bg-primary-50:not(section):not([class*="shadow"]) .text-primary-900,
.bg-gray-50:not(section):not([class*="shadow"]) .text-primary-900,
.bg-slate-50:not(section):not([class*="shadow"]) .text-primary-900,
.bg-teal-50:not(section):not([class*="shadow"]) .text-primary-900,
.bg-blue-50:not(section):not([class*="shadow"]) .text-primary-900,
.bg-accent-50:not(section):not([class*="shadow"]) .text-gray-900,
.bg-primary-50:not(section):not([class*="shadow"]) .text-gray-900,
.bg-gray-50:not(section):not([class*="shadow"]) .text-gray-900 {
  color: #001f3f !important;
}

.bg-accent-50:not(section):not([class*="shadow"]) .text-primary-700,
.bg-accent-50:not(section):not([class*="shadow"]) .text-primary-600,
.bg-primary-50:not(section):not([class*="shadow"]) .text-primary-700,
.bg-primary-50:not(section):not([class*="shadow"]) .text-primary-600,
.bg-gray-50:not(section):not([class*="shadow"]) .text-primary-600,
.bg-teal-50:not(section):not([class*="shadow"]) .text-primary-600,
.bg-accent-50:not(section):not([class*="shadow"]) .text-gray-700,
.bg-accent-50:not(section):not([class*="shadow"]) .text-gray-600,
.bg-primary-50:not(section):not([class*="shadow"]) .text-gray-600 {
  color: #374151 !important;
}