/* =====================================================
   SIGNORE PLAST — FONDATIONS CSS (PHASE 01)
   Modern Industrial B2B Premium
   Chargé APRÈS style.css / said.css — surcharge contrôlée.
   Toutes les couleurs proviennent de l'existant (logo + thème).
   ===================================================== */

/* ---------- 1. VARIABLES CSS ---------- */
:root {
  --sp-primary: #0286fa;
  --sp-primary-dark: #016ece;
  --sp-primary-light: #2a99fb;
  --sp-primary-soft: rgba(2, 134, 250, 0.10);
  --sp-primary-softer: rgba(2, 134, 250, 0.06);

  --sp-accent: #fe1b24;
  --sp-accent-dark: #d50f1c;
  --sp-accent-soft: rgba(254, 27, 36, 0.10);

  --sp-text: #101010;
  --sp-text-body: #3f596c;
  --sp-muted: #747b86;
  --sp-muted-2: #9a9899;

  --sp-bg: #ffffff;
  --sp-bg-soft: #f5f6fb;
  --sp-surface: #ffffff;
  --sp-dark: #18212e;
  --sp-dark-2: #232b38;

  --sp-border: #e3e0e2;
  --sp-border-soft: #e5e5e5;
  --sp-border-strong: #b3bbc6;

  /* Alias sémantiques (Phase 02) : hover/active ≡ version foncée de la
     marque ; valeurs canoniques inchangées, gérées par -dark/-border. */
  --sp-primary-hover: var(--sp-primary-dark);
  --sp-primary-active: var(--sp-primary-dark);
  --sp-accent-hover: var(--sp-accent-dark);
  --sp-accent-active: var(--sp-accent-dark);

  --sp-success: #5bb300;
  --sp-success-dark: #4a9200;

  --sp-radius-sm: 8px;
  --sp-radius-md: 14px;
  --sp-radius-lg: 20px;
  --sp-radius-pill: 50rem;

  --sp-shadow-sm: 0 1px 2px rgba(16, 16, 16, 0.05), 0 2px 8px rgba(16, 16, 16, 0.06);
  --sp-shadow-md: 0 12px 30px -14px rgba(16, 16, 16, 0.20);
  --sp-shadow-lg: 0 28px 55px -25px rgba(16, 16, 16, 0.30);

  --sp-focus-ring: 0 0 0 3px rgba(2, 134, 250, 0.22);

  --sp-transition: 0.22s cubic-bezier(0.4, 0, 0.2, 1);

  --sp-font-body: "Poppins", "Montserrat", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --sp-font-heading: "Poppins", "Montserrat", "Segoe UI", system-ui, sans-serif;
  --sp-font-marker: "Montserrat", "Poppins", "Segoe UI", sans-serif;
  --sp-font-tech: "Work Sans", "Segoe UI", sans-serif;
}

/* ---------- 2. BASE / RESET DOUX ---------- */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 92px;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--sp-font-body);
  font-size: 16px;
  line-height: 1.7;
  color: var(--sp-text-body);
  background-color: var(--sp-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* PHASE 04 — overflow-x: clip (et non hidden) sur html/body.
   `overflow-x: hidden` crée un scroll container sur body et casse
   `position: sticky` du header (le nav ne reste pas en haut au scroll).
   `overflow-x: clip` supprime le débordement horizontal SANS créer de
   scroll container : le sticky récupère son comportement natif.
   Fallback @supports pour les rares navigateurs sans `clip`. */
body,
html {
  overflow-x: clip;
}

@supports not (overflow: clip) {
  body,
  html {
    overflow-x: hidden;
  }
}

p {
  line-height: 1.7;
  color: var(--sp-text-body);
}

b,
strong {
  color: inherit;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--sp-font-heading);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: var(--sp-text);
}

::selection {
  background: rgba(2, 134, 250, 0.18);
  color: var(--sp-text);
}

button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
}

img {
  max-width: 100%;
}

/* ---------- 3. FOCUS VISIBLE (ACCESSIBILITÉ) ---------- */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.nav-link:focus-visible,
select:focus-visible {
  outline: 2px solid var(--sp-primary);
  outline-offset: 2px;
}

/* Focus générique des champs hors .form-control (Phase 02) : ring bleu
   marque identique aux champs de formulaire. Remplace le legacy
   input:focus{outline:none} supprimé de style.css. */
input:focus:not(.form-control),
select:focus:not(.form-control),
textarea:focus:not(.form-control) {
  outline: none;
  box-shadow: var(--sp-focus-ring);
}

/* ---------- 4. HEADER / NAVBAR ---------- */
.bartop {
  font-size: 14px;
}

.bartop a {
  transition: color var(--sp-transition);
}

.bartop a:hover {
  color: var(--sp-primary-light);
}

.navbar-brand img {
  width: 100px;
  transition: opacity var(--sp-transition);
}

.navbar-brand:hover img {
  opacity: 0.88;
}

.navbar .nav-link {
  font-family: var(--sp-font-marker);
  font-size: 15px;
  font-weight: 500;
  padding: 0.5rem 0.25rem;
  color: #4d5a67;
  transition: color var(--sp-transition);
}

/* Correction : hover actif = bleu marque (remplace #f2f2f2 quasi invisible) */
.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-link:focus {
  color: var(--sp-primary-dark);
}

/* Élément actif : lisible (noir) + soulignement rouge de la marque */
.navbar-light .navbar-nav .nav-link.link-active {
  color: var(--sp-text);
  font-weight: 600;
  border-bottom: solid 4px var(--sp-accent);
  padding-bottom: calc(0.5rem - 2px);
}

.navbar-toggler {
  border: none;
  font-size: 1.6rem;
  color: var(--sp-primary);
}

/* ---------- 5. BOUTONS ---------- */
.btn {
  transition: background-color var(--sp-transition),
    border-color var(--sp-transition),
    color var(--sp-transition),
    box-shadow var(--sp-transition),
    transform var(--sp-transition);
  letter-spacing: 0.01em;
}

.btn:active {
  transform: translateY(0);
}

/* Bouton rouge "Demande devis" (header) */
.btnsignore {
  min-height: 48px;
  padding: 0.75rem 1.75rem;
  border-radius: var(--sp-radius-pill);
  border: 2px solid var(--sp-accent);
  background-color: var(--sp-accent);
  color: #ffffff;
  font-family: var(--sp-font-marker);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
  box-shadow: 0 8px 20px -10px rgba(254, 27, 36, 0.55);
}

.btnsignore:hover,
.btnsignore:focus {
  background-color: var(--sp-accent-dark);
  border-color: var(--sp-accent-dark);
  color: #ffffff;
  transform: translateY(-1px);
  box-shadow: 0 12px 24px -10px rgba(254, 27, 36, 0.55);
}

/* Bouton "VOIR PLUS" (lien vers produits.php) */
.linkproduitplus {
  display: inline-block;
  min-height: 46px;
  padding: 0.6rem 1.5rem;
  border-radius: var(--sp-radius-pill);
  border: 2px solid var(--sp-primary);
  background-color: transparent;
  color: var(--sp-primary-dark);
  font-family: var(--sp-font-marker);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.02em;
  text-align: center;
}

.linkproduitplus:hover,
.linkproduitplus:focus {
  background-color: var(--sp-primary-dark);
  border-color: var(--sp-primary-dark);
  color: #ffffff;
  transform: translateY(-1px);
  box-shadow: 0 10px 22px -12px rgba(2, 134, 250, 0.6);
}

/* Variante rouge (accessoires) */
.linkproduitplus.redcolor,
.linkproduitplus.redcolorbtn {
  border-color: var(--sp-accent);
  color: var(--sp-accent);
}

.linkproduitplus.redcolor:hover,
.linkproduitplus.redcolor:focus,
.linkproduitplus.redcolorbtn:hover,
.linkproduitplus.redcolorbtn:focus {
  background-color: var(--sp-accent);
  border-color: var(--sp-accent);
  color: #ffffff;
  box-shadow: 0 10px 22px -12px rgba(254, 27, 36, 0.55);
}

/* Lien "VOIR PLUS" dans les cartes */
.linkproduit {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--sp-font-marker);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--sp-accent);
  text-decoration: none;
  padding: 0.35rem 0;
  border-bottom: 2px solid transparent;
  transition: color var(--sp-transition), border-color var(--sp-transition);
}

.linkproduit:hover,
.linkproduit:focus {
  color: var(--sp-accent-dark);
  border-bottom-color: var(--sp-accent);
}

/* Bouton "Fermer" de la modale devis */
.btncloseform {
  min-height: 44px;
  padding: 0.5rem 1.75rem;
  border-radius: var(--sp-radius-pill);
  border: 2px solid var(--sp-primary);
  background-color: #ffffff;
  color: var(--sp-primary-dark);
  font-weight: 600;
  transition: background-color var(--sp-transition), color var(--sp-transition);
}

.btncloseform:hover {
  background-color: var(--sp-primary-dark);
  border-color: var(--sp-primary-dark);
  color: #ffffff;
}

/* ---------- 6. SECTIONS & ESPACEMENT ---------- */
.produitsignore {
  margin-top: clamp(2.5rem, 6vw, 4rem);
  margin-bottom: clamp(2.5rem, 6vw, 4rem);
  text-align: center;
}

.articlezone {
  padding: clamp(2.5rem, 6vw, 4rem) 0 clamp(3rem, 7vw, 5.5rem);
  margin-bottom: 0;
}

.contactzone {
  padding: clamp(3rem, 7vw, 5rem) 0;
}

.tabproduit {
  margin-top: clamp(2rem, 5vw, 3rem);
}

.fourzone {
  padding: clamp(2.5rem, 6vw, 4rem) 0;
}

/* ---------- 7. TITRES DE SECTION ---------- */
.produitsignore h2 {
  font-family: var(--sp-font-heading);
  font-size: clamp(1.875rem, 4vw, 3.5rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-align: center;
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}

h2 {
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  line-height: 1.25;
}

.contactzone h3 {
  font-size: clamp(1.65rem, 3vw, 2.4rem);
  line-height: 1.3;
  color: var(--sp-text);
}

.articlezone h2 {
  letter-spacing: 0.02em;
}

/* ---------- 8. CARTES PRODUITS (BASE PHASE 02) ---------- */
.cartsignore {
  position: relative;
  border: 1px solid var(--sp-border);
  border-radius: var(--sp-radius-md);
  background-color: var(--sp-surface);
  overflow: hidden;
  text-align: center;
  margin-top: 0;
  margin-bottom: 1.75rem;
  box-shadow: var(--sp-shadow-sm);
  transition: transform var(--sp-transition), box-shadow var(--sp-transition);
}

.cartsignore:hover,
.cartsignore:focus-within {
  transform: translateY(-4px);
  box-shadow: var(--sp-shadow-md);
}

.cartsignore .card-img-top {
  width: 100%;
  height: 210px;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  background-color: #ffffff;
  padding: 0.75rem;
}

.cartsignore .card-body {
  padding: 1.25rem 1.25rem 1.5rem;
}

.cartsignore .card-title {
  font-size: 1.15rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--sp-text);
  margin-bottom: 0.75rem;
}

.cartsignore .card-text {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--sp-muted);
  margin-bottom: 1rem;
}

/* Bandes de la marque (rouge / bleu) sous l'image, conservées mais plus nettes */
.bordered,
.borderblue {
  border-bottom: 4px solid;
}

/* ---------- 9. IMAGES GÉNÉRALES ---------- */
/* Correctif aspect-ratio invalide du slider (16/0) */
.slide img {
  aspect-ratio: auto;
  height: 297px;
  width: 100%;
  object-fit: cover;
}

.slideshadw {
  box-shadow: 0 8px 26px -12px rgba(10, 20, 30, 0.35);
}

/* ---------- 10. FICHE PRODUIT ---------- */
.prodheader h1 {
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  font-weight: 700;
  letter-spacing: 0.01em;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.28);
}

.decprod {
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--sp-text-body);
}

/* Onglets Description / Fiche technique */
.tablink a {
  font-size: clamp(1.1rem, 2vw, 1.875rem);
  line-height: 1.6;
  letter-spacing: -0.01em;
}

.nav-tabs.tablink {
  border-bottom: 1px solid var(--sp-border);
}

.nav-tabs.tablink .nav-link.active,
.tablink .active a {
  border-bottom: 3px solid var(--sp-accent);
}

.tabproduitcontent {
  font-size: 1.05rem;
  line-height: 1.8;
  color: var(--sp-text-body);
}

/* ---------- 11. FORMULAIRES ---------- */
.form-control {
  min-height: 48px;
  padding: 0.65rem 1rem;
  border: 1.5px solid var(--sp-border);
  border-radius: var(--sp-radius-sm);
  background-color: #ffffff;
  color: var(--sp-text);
  transition: border-color var(--sp-transition), box-shadow var(--sp-transition);
}

textarea.form-control {
  min-height: 110px;
  resize: vertical;
}

select.form-control {
  color: var(--sp-text);
  background-color: #ffffff;
}

/* Indicateur de focus visible (remplace outline:none par un ring bleu marque) */
.form-control:focus,
.contactzone input:focus,
.contactzone textarea:focus {
  outline: none;
  border-color: var(--sp-primary);
  box-shadow: var(--sp-focus-ring);
}

.contactzone label {
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.5;
  color: var(--sp-text-body);
  margin-bottom: 0.4rem;
}

.contactzone label {
  font-size: 1rem;
}

.contactzone label {
  font-size: 1rem;
}

.contactzone input,
.contactzone textarea {
  border-radius: var(--sp-radius-sm);
  border: 1.5px solid var(--sp-border);
  box-shadow: 0 0 10px 0 rgba(42, 153, 251, 0.08);
  background-color: #ffffff;
}

.contactzone button {
  min-height: 48px;
  padding: 0.75rem 2.25rem;
  border-radius: var(--sp-radius-pill);
  border: 2px solid var(--sp-primary-dark);
  background-color: var(--sp-primary-dark);
  color: #ffffff;
  font-weight: 600;
  transition: background-color var(--sp-transition), border-color var(--sp-transition);
}

.contactzone button:hover {
  background-color: var(--sp-primary-dark);
  border-color: var(--sp-primary-dark);
}

/* Modale demande de devis */
.fomrModal .modal-content {
  border: none;
  border-radius: var(--sp-radius-lg);
  box-shadow: var(--sp-shadow-lg);
}

.fomrModal .modal-header {
  border-bottom: 1px solid var(--sp-border-soft);
}

.fomrModal .modal-title {
  font-weight: 700;
  color: var(--sp-text);
}

.fomrModal .modal-footer {
  border-top: 1px solid var(--sp-border-soft);
}

.fomrModal .btnbox a {
  display: inline-flex;
  align-items: center;
  min-height: 46px;
  padding: 0.6rem 1.9rem;
  border-radius: var(--sp-radius-pill);
  background-color: var(--sp-primary-dark);
  border: 2px solid var(--sp-primary-dark);
  color: #ffffff;
  font-weight: 600;
  transition: background-color var(--sp-transition), border-color var(--sp-transition);
}

.fomrModal .btnbox a:hover {
  background-color: var(--sp-primary-dark);
  border-color: var(--sp-primary-dark);
}

/* ---------- 12. PARTENAIRES ---------- */
.refbtn.nav-link,
.fourbnt.nav-link {
  padding: 0.6rem 1.4rem;
  font-family: var(--sp-font-marker);
  font-weight: 500;
  color: var(--sp-muted);
  border-radius: var(--sp-radius-pill);
  transition: color var(--sp-transition), background-color var(--sp-transition);
}

.refbtn.nav-link.active {
  background-color: var(--sp-primary-dark);
  color: #ffffff;
}

.fourbnt.nav-link.active {
  background-color: var(--sp-accent);
  color: #ffffff;
}

.zonclient img {
  border-radius: var(--sp-radius-sm);
}

/* ---------- 14. RESPONSIVE ---------- */
@media (max-width: 991.98px) {
  .navbar .nav-link {
    font-size: 16px;
    padding: 0.65rem 0.25rem;
    color: var(--sp-text) !important;
  }

  .navbar-light .navbar-nav .nav-link.link-active {
    border-bottom: none;
    padding-bottom: 0.65rem;
  }

  .btnsignore {
    width: 100% !important;
    margin-left: 0;
  }
}

@media (max-width: 770px) {
  .produitsignore {
    margin-top: 2.25rem;
    margin-bottom: 2.25rem;
  }

  .cartsignore .card-img-top {
    height: 190px;
  }

  .slide {
    width: auto;
  }

  .slider {
    grid-auto-columns: 72%;
    gap: 1rem;
  }

  .slide img {
    height: 220px;
  }

  .contactzone label {
    font-size: 0.95rem;
  }

  .contactzone button {
    width: 100%;
  }

  .btnsignore {
    width: 100%;
  }
}

@media (max-width: 575.98px) {
  .slider {
    grid-auto-columns: 78%;
    gap: 1rem;
    padding-inline: 0.75rem;
  }

  .linkproduitplus {
    width: 100%;
    max-width: 320px;
  }

  .modal-body form {
    padding: 1.25rem;
  }

  .fomrModal .modal-header {
    padding: 1rem 1rem 0.5rem;
  }

  .fomrModal .modal-title {
    margin-left: 0;
  }
}

/* =====================================================
   PHASE 02 — CARTES PRODUITS (Premium / B2B)
   Composant visuel partagé généré par produits_sectionList.php
   (index.php + produits.php). Ne touche ni au HTML/PHP/JS.
   Scoping via :has(> .cartsignore) pour ne pas impacter
   les grilles de logos partenaires (même classe col-lg-3).
   ===================================================== */

/* Grille des cartes : colonnes flex à hauteur égale + responsive */
.produitsignore .col-lg-3:has(> .cartsignore) {
  display: flex;
  flex: 0 0 100%;
  max-width: 100%;
  margin-bottom: 1.75rem;
}

@media (min-width: 576px) {
  .produitsignore .col-lg-3:has(> .cartsignore) {
    flex: 0 0 50%;
    max-width: 50%;
  }
}

@media (min-width: 992px) {
  .produitsignore .col-lg-3:has(> .cartsignore) {
    flex: 0 0 25%;
    max-width: 25%;
  }
}

/* Carte : pleine hauteur de colonne, colonne interne image + contenu */
.produitsignore .col-lg-3:has(> .cartsignore) .cartsignore {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin-bottom: 0;
}

/* Zone image : fond studio neutre de la marque + produit qui respire */
.cartsignore .card-img-top {
  width: 100%;
  aspect-ratio: 4 / 3;
  height: auto;
  padding: 1.1rem;
  object-fit: contain;
  background-color: var(--sp-bg-soft);
  transition: transform var(--sp-transition);
}

/* Ligne d'accent de la marque (corrige le currentColor de PHASE 01) */
.cartsignore .card-img-top.bordered {
  border-bottom: 3px solid var(--sp-accent);
}

.cartsignore .card-img-top.borderblue {
  border-bottom: 3px solid var(--sp-primary);
}

/* Corps : flex pour ancrer le CTA en bas et aligner toutes les cartes */
.cartsignore .card-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 1.25rem;
}

.cartsignore .card-title {
  font-size: 1.1rem;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--sp-text);
  margin-bottom: 0.5rem;
}

.cartsignore .card-text {
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--sp-muted);
  margin-bottom: 1.1rem;
}

/* CTA "VOIR PLUS" : bouton pilule contour bleu, ancré en bas de carte */
.cartsignore .linkproduit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 44px;
  margin-top: auto;
  padding: 0.6rem 1.25rem;
  border: 2px solid var(--sp-primary);
  border-radius: var(--sp-radius-pill);
  background-color: transparent;
  color: var(--sp-primary-dark);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.05em;
  line-height: 1.2;
  text-decoration: none;
  transition: background-color var(--sp-transition),
    color var(--sp-transition),
    border-color var(--sp-transition);
}

.cartsignore .linkproduit:hover,
.cartsignore .linkproduit:focus {
  background-color: var(--sp-primary-dark);
  border-color: var(--sp-primary-dark);
  color: #ffffff;
}

/* Survol premium : légère élévation + zoom d'image très discret */
.cartsignore:hover {
  transform: translateY(-4px);
  border-color: rgba(2, 134, 250, 0.28);
  box-shadow: var(--sp-shadow-md);
}

.cartsignore:hover .card-img-top {
  transform: scale(1.04);
}

/* Accessibilité : pas de mouvement pour les utilisateurs sensibles */
@media (prefers-reduced-motion: reduce) {
  .cartsignore,
  .cartsignore .card-img-top,
  .cartsignore .linkproduit {
    transition: none;
  }

  .cartsignore:hover,
  .cartsignore:hover .card-img-top {
    transform: none;
  }
}

/* Réglages mobiles fins */
@media (max-width: 575.98px) {
  .cartsignore .card-img-top {
    padding: 0.85rem;
  }

  .cartsignore .card-title {
    font-size: 1.05rem;
  }
}

/* =====================================================
   PHASE 03 — FICHE PRODUIT (produit.php) Premium B2B
   Page dynamique, aucun marquage HTML modifié.
   CSS uniquement : bandeau, CTA devis, onglets, panneau.
   ===================================================== */

/* Bandeau produit : confort vertical + voile dégradé de marque
   pour la lisibilité du titre blanc sur la photo */
.prodheader {
  position: relative;
  isolation: isolate;
  background-color: var(--sp-dark);
  padding: clamp(2.75rem, 8vw, 4.75rem) 1rem;
  margin-bottom: clamp(2rem, 5vw, 3.5rem);
  text-align: center;
}

.prodheader::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    120deg,
    rgba(24, 33, 46, 0.82) 0%,
    rgba(24, 33, 46, 0.45) 55%,
    rgba(254, 27, 36, 0.22) 100%
  );
  pointer-events: none;
}

.prodheader h1 {
  position: relative;
  z-index: 1;
  margin-bottom: 0;
  text-shadow: 0 3px 18px rgba(16, 16, 16, 0.45);
}

/* Onglets Description / Fiche technique : liens éditoriaux premium */
.nav-tabs.tablink {
  flex-wrap: wrap;
  column-gap: 0.25rem;
  margin-bottom: 1.25rem;
}

.nav-tabs.tablink > li {
  margin-bottom: 0;
}

.nav-tabs.tablink a {
  display: inline-block;
  padding: 0.35rem 0.15rem;
  color: var(--sp-muted);
  text-decoration: none;
  border-bottom: 3px solid transparent;
  transition: color var(--sp-transition),
    border-color var(--sp-transition);
}

.nav-tabs.tablink a:hover,
.nav-tabs.tablink a:focus {
  color: var(--sp-primary-dark);
  text-decoration: none;
}

.nav-tabs.tablink a:focus-visible {
  outline: none;
  box-shadow: var(--sp-focus-ring);
  border-radius: var(--sp-radius-sm);
}

.nav-tabs.tablink li.active a,
.nav-tabs.tablink a.active {
  color: var(--sp-primary-dark);
  border-bottom-color: var(--sp-accent);
}

/* Panneau de contenu : carte studio industrielle sous les onglets */
.tabproduit .tab-content {
  padding: clamp(1.5rem, 3vw, 2.5rem);
  background-color: var(--sp-bg-soft);
  border: 1px solid var(--sp-border);
  border-radius: var(--sp-radius-lg);
}

.tabproduit .tab-pane {
  background: transparent;
}

/* Fiche produit SANS ONGLETS (produit.php)
   ------------------------------------------------------------------
   Demande : la description et la fiche technique ne sont plus des
   onglets mais deux blocs empiles, la description d'abord. */
.sp-product-stack .tab-content {
  padding: 0;
  background-color: transparent;
  border: 0;
  border-radius: 0;
}
.sp-product-stack .tab-pane {
  display: block;
  background: transparent;
}
.sp-product-stack .tab-pane.fade {
  opacity: 1;
}
.sp-product-stack .tab-pane + .tab-pane {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding-top: clamp(2.5rem, 5vw, 3.5rem);
  border-top: 1px solid var(--sp-border);
}
.sp-product-stack .tab-pane > h2 {
  margin-bottom: clamp(1.25rem, 2vw, 1.75rem);
  font-size: clamp(1.5rem, 2.5vw, 1.875rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--sp-dark);
}

/* Accessibilité : pas de mouvement pour les utilisateurs sensibles */
@media (prefers-reduced-motion: reduce) {
  .prodheader h1,
  .tablink a {
    transition: none;
  }
}

/* Réglages mobiles fins */
@media (max-width: 575.98px) {
  .tabproduit .tab-content {
    padding: 1.25rem;
  }
}


/* =====================================================
   PHASE 05 — PAGE LISTE PRODUITS (produits.php)
   Catalogue Modern Industrial Premium B2B (refonte).
   Tout le style produit de cette page vit désormais dans
   css/sp-design-system.css (bloc PHASE 05 scellé), scopé
   par la classe .sp-catalog-page présente UNIQUEMENT sur
   produits.php. Le scoping body:has(.prodheader):has
   (#accessoires) (Phase 04) ne correspond plus à aucune
   page depuis la refonte : il a été supprimé (CSS mort).
   index.php / partenaires.php / produit.php conservent
   leurs styles OWN (classes legacy intactes).
   ===================================================== */

/* Mouvement réduit — page liste (aligné sur le design system) */
@media (prefers-reduced-motion: reduce) {
  .sp-catalog-page .sp-catalog-grid .sp-catalog-card:hover {
    transform: none;
  }
}
   /* PHASE 05 — UX MOBILE GLOBALE
   Optimisations mobiles conservatives, CSS uniquement.
   Ne modifie ni structure, ni JS, ni contenu.
   Priorités : zones tactiles 44px+, menu replié lisible,
   barre supérieure lisible, pas de débordement.
   ===================================================== */

/* Bouton hamburger : vraie zone tactile + focus visible */
.navbar-toggler {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 46px;
  min-height: 46px;
  padding: 0.5rem;
  border-radius: var(--sp-radius-sm);
}

.navbar-toggler:focus-visible {
  outline: none;
  box-shadow: var(--sp-focus-ring);
}

/* Menu replié (<= 991px) : carte blanche propre sous la navbar */
@media (max-width: 991.98px) {
  #navbarTogglerDemo02 {
    margin-top: 0.75rem;
    padding: 0.75rem 1rem 1.25rem;
    background-color: #ffffff;
    border: 1px solid var(--sp-border);
    border-radius: var(--sp-radius-md);
    box-shadow: var(--sp-shadow-md);
  }

  /* Neutralise le margin-right:150px en dur du HTML (legacy) :
     repositionne le menu sur toute la largeur. Override inline = !important justifié. */
  #navbarTogglerDemo02 .navbar-nav {
    margin-right: 0 !important;
    width: 100%;
  }

  #navbarTogglerDemo02 .navbar-nav .nav-item {
    border-bottom: 1px solid var(--sp-border-soft);
  }

  #navbarTogglerDemo02 .navbar-nav .nav-item:last-child {
    border-bottom: none;
  }

  #navbarTogglerDemo02 .navbar-nav .nav-link {
    display: flex;
    align-items: center;
    min-height: 46px;
    margin-left: 0;
  }

  .navbar-light .navbar-nav .nav-link.link-active {
    color: var(--sp-primary-dark);
    border-bottom: 2px solid var(--sp-accent);
    padding-bottom: 0.65rem;
  }

  #navbarTogglerDemo02 .btnsignore {
    margin-top: 0.75rem;
  }
}

/* Barre supérieure (téléphone / email / réseaux) : lisible sur petit écran */
@media (max-width: 575.98px) {
  .bartop {
    font-size: 12px;
    line-height: 1.9;
    padding: 0.25rem 0 0.5rem;
  }

  .bartop a {
    white-space: nowrap;
  }
}

/* Pied de page : liens "Liens utiles" tactiles et lisibles sur mobile */

/* Sécurités globales : les zones tactiles restent confortables,
   les transitions restent légères même sur petit écran */
@media (prefers-reduced-motion: reduce) {
  .navbar-toggler,
  .navbar .nav-link,
  .linkproduit,
  .btnsignore {
    transition: none;
  }
}

/* =====================================================
   PHASE 06 — CONVERSION / DEMANDE DE DEVIS
   UX du parcours Devis/Contact, CSS uniquement.
   Aucune modification : URLs, SEO, backend, JS, textes,
   champs, action, destinataire, index.php, Hero.
   ===================================================== */

/* Espacement vertical des champs du formulaire de devis */
.fomrModal .modal-body form .form-group {
  margin-bottom: 1.1rem;
}

/* Toasts (devis + contact) : lisibles, identifiables, arondis */
.fomrModal .toast,
.contactzone .toast {
  border-radius: var(--sp-radius-md);
  box-shadow: var(--sp-shadow-md);
  font-size: 0.95rem;
  line-height: 1.5;
  /* marges en dur du HTML ("margin: 0" inline) : override justifié */
  margin: 0 0 1rem 0 !important;
}

/* Liens de fermeture Bootstrap 5 (btn-close) inertes sur Bootstrap 4 :
   ancres vides sans contenu ni comportement -> masquées proprement.
   Les toasts s'auto-masquent (data-delay 3000). */
.fomrModal .toast .btn-close,
.contactzone .toast .btn-close {
  display: none;
}

/* Zones d'erreur/exceptions renvoyées par le backend : visibles mais sobres */
.fomrModal #spn_errMsgExcepDevis,
.contactzone #spn_errMsgExcep {
  display: block;
  margin-top: 0.75rem;
  padding: 0.6rem 0.9rem;
  border-radius: var(--sp-radius-sm);
  background: var(--sp-accent-soft);
  color: var(--sp-accent-dark);
  font-size: 0.9rem;
  line-height: 1.5;
}

.fomrModal #spn_errMsgExcepDevis:empty,
.contactzone #spn_errMsgExcep:empty {
  display: none;
}

/* Pied de modale : deux actions confortables au doigt sur mobile
   ("Fermer" secondaire / "Envoyer" primaire pleine largeur) */
@media (max-width: 575.98px) {
  .fomrModal .modal-footer {
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
  }

  .fomrModal .modal-footer .btn,
  .fomrModal .modal-footer .btnbox {
    width: 100%;
  }

  .fomrModal .modal-footer .btnbox {
    margin: 0;
  }

  .fomrModal .modal-footer .btnbox a {
    justify-content: center;
    width: 100%;
  }
}

/* Accessibilité : pas de mouvement pour les utilisateurs sensibles
   (le CTA de l'ancien hero .btnsignoredevis est retiré en phase 4 :
   plus aucune règle nécessitant la réduction de mouvement ici). */

/* =====================================================
   PHASE 07 — HEADER & NAVIGATION PREMIUM
   Modernisation UX/UI du header/topbar/navbar.
   CSS uniquement + 1 micro-fix HTML (ancre tel cassée).
   N'affecte PAS : hero, contenu, footer, modales, SEO.
   ===================================================== */

/* 4.2 Topbar premium : fond sombre de la marque, alignée,
   pleine largeur, sans hauteur fixe (plus de risque de clipping). */
.bartop {
  display: flex;
  align-items: center;
  min-height: 42px;
  height: auto;
  background-color: var(--sp-dark);
  font-size: 14px;
  letter-spacing: 0.01em;
}

.bartop .container {
  width: 100%;
}

.bartop a {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  padding: 0.3rem 0;
}

.bartop .mdi {
  font-size: 15px;
  line-height: 1;
  color: var(--sp-primary-light);
}

.bartop a:hover,
.bartop a:focus,
.bartop a:focus-visible {
  color: #ffffff;
}

.bartop a:hover .mdi,
.bartop a:focus .mdi,
.bartop a:focus-visible .mdi {
  color: var(--sp-primary);
}

/* 4.3 Navbar desktop (>= 992px) : compacte, alignée, premium */
@media (min-width: 992px) {
  #myHeader {
    min-height: 72px;
    background-color: #ffffff;
    border-bottom: 1px solid var(--sp-border-soft);
  }

  #myHeader .container {
    min-height: 72px;
    align-items: center;
  }

  #navbarTogglerDemo02 {
    flex-basis: auto;
    flex-grow: 1;
    align-items: center;
    justify-content: flex-end;
    gap: 1.25rem;
  }

  /* Neutralise le margin-right inline legacy (150px) au desktop comme
     au mobile : le menu reprend sa largeur réelle. Override inline OK. */
  #navbarTogglerDemo02 .navbar-nav {
    margin-right: 0 !important;
    align-items: center;
    gap: 0.35rem;
  }

  #navbarTogglerDemo02 .navbar-nav .nav-item {
    padding: 0;
  }

  #navbarTogglerDemo02 .navbar-nav .nav-link {
    padding: 0.7rem 1.05rem;
    border-radius: var(--sp-radius-sm);
  }

  /* Hover élégant sur toute la zone de clic (pas seulement le texte) */
  #navbarTogglerDemo02 .navbar-nav .nav-link:hover,
  #navbarTogglerDemo02 .navbar-nav .nav-link:focus {
    background-color: var(--sp-primary-soft);
    color: var(--sp-primary-dark);
  }

  /* Actif : texte foncé + filet rouge de la marque, sans fond */
  #navbarTogglerDemo02 .navbar-nav .nav-link.link-active,
  #navbarTogglerDemo02 .navbar-nav .nav-link.link-active:hover,
  #navbarTogglerDemo02 .navbar-nav .nav-link.link-active:focus {
    background-color: transparent;
    color: var(--sp-text);
    border-bottom: 3px solid var(--sp-accent);
    padding-bottom: calc(0.7rem - 3px);
  }

  /* CTA devis : aligné dans le flux flex (gap), sans marge legacy */
  #myHeader .btnsignore {
    margin-left: 0;
    margin-top: 0;
  }
}

/* 4.4 Header sticky : position sticky NATIVE (top:0) portée par
   #myHeader, et non plus par la classe .sticky (Phase 04).
   Avec overflow-x: clip sur html/body (§2) le sticky survit au scroll :
   le nav reste épinglé en haut, le Hero ne passe jamais dessous et ne
   saute pas. Le JS Phase 03 (myFunction) change la classe .sticky
   uniquement pour l'ombre portée. z-index sous les modales (1050). */
#myHeader {
  position: sticky;
  top: 0;
  z-index: 1030;
}

#myHeader.sticky {
  box-shadow: 0 8px 22px -12px rgba(16, 16, 16, 0.22);
}

/* 4.5 Mobile / tablette (< 992px) */
@media (max-width: 991.98px) {
  /* Corrige l'espace mort hérité (padding-bottom: 80px de style.css
     entre 576 et 770px) : topbar compacte et cohérente partout. */
  .bartop {
    padding: 0.5rem 0 0.6rem;
  }

  /* Le menu déroulé ne dépasse jamais de l'écran : défilement interne
     si nécessaire (surtout nav sticky ouverte). */
  #navbarTogglerDemo02 {
    max-height: calc(100vh - 88px);
    overflow-y: auto;
  }
}

/* 4.6 < 576px : centrage, éviter tout débordement horizontal */
@media (max-width: 575.98px) {
  /* Zone tactile confortable des liens topbar sur petit écran */
  .bartop a {
    padding: 0.35rem 0;
  }
}

/* Accessibilité : transitions réduites pour le header aussi */
@media (prefers-reduced-motion: reduce) {
  .bartop a,
  #myHeader .navbar-nav .nav-link {
    transition: none;
  }
}


/* =========================================
   PHASE 15 — PARCOURS DEMANDE DE DEVIS
   ========================================= */
/* 15.1 Bouton « Envoyer » passé d'<a role="button"> (non focusable, non
   activable au clavier : WCAG 2.1.1) à <button id="btnSendDevis">.
   Les règles PILULE existantes visaient `.fomrModal .btnbox a` : on les
   transpose au bouton, sinon il retomberait sur le style .btn-primary
   générique de Bootstrap. Idem disposition mobile (100% de largeur). */
.fomrModal .btnbox button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0.6rem 1.9rem;
  border-radius: var(--sp-radius-pill);
  background-color: var(--sp-primary-dark);
  border: 2px solid var(--sp-primary-dark);
  color: #ffffff;
  font-weight: 600;
  transition: background-color var(--sp-transition), border-color var(--sp-transition);
}

.fomrModal .btnbox button:hover:not(:disabled) {
  background-color: var(--sp-primary-dark);
  border-color: var(--sp-primary-dark);
}

.fomrModal .btnbox button:disabled {
  cursor: not-allowed;
  opacity: 0.65;
}

@media (max-width: 767.98px) {
  .fomrModal .modal-footer .btnbox button {
    justify-content: center;
    width: 100%;
  }
}

/* =========================================
   PHASE 16 — CONTACT PREMIUM UI
   ========================================= */
/* 16.1 ENVELOPPE / SURFACE
   Le formulaire seul devient une carte élégante : fond clair, bordure
   subtile, radius du design system, ombre très légère (sp-shadow-sm =
   hauteur douce, aucun effet fantaisiste), padding généreux.
   Scoped à .contactzone #form_contact : ni l'entête h3, ni la colonne
   « informations » (siegesocialzone) ne sont touchés. */
.contactzone #form_contact {
  background-color: var(--sp-surface);
  border: 1px solid var(--sp-border-soft);
  border-radius: var(--sp-radius-lg);
  box-shadow: var(--sp-shadow-sm);
  padding: clamp(1.75rem, 5vw, 2.75rem) clamp(1.25rem, 4vw, 2.5rem);
}

/* Respiration régulière entre groupes de champs */
.contactzone #form_contact .form-group {
  margin-bottom: 1.35rem;
}

/* 16.2 TITRE DE SECTION — hiérarchie affirmée
   Le titre existant (texte inchangé) gagne en présence : graisse 700,
   tracking resserré, ligne ramassée, accent bleu marque discret en
   soutien. Aucun texte modifié. */
.contactzone h3 {
  font-family: var(--sp-font-heading);
  font-size: clamp(1.85rem, 4vw, 2.75rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--sp-dark);
  text-align: center;
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}

.contactzone h3::after {
  content: "";
  display: block;
  width: 56px;
  height: 3px;
  margin: 0.8rem auto 0;
  border-radius: var(--sp-radius-pill);
  background-color: var(--sp-primary);
}

/* 16.3 LABELS — hiérarchie claire et lisible
   Lisibles (couleur sombre du design system), poids semibold,
   espacement avant le champ. Toujours présents (jamais remplacés
   par des placeholders). */
.contactzone #form_contact label {
  display: block;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: 0.01em;
  color: var(--sp-dark);
  margin-bottom: 0.55rem;
}

/* 16.4 CHAMPS (input / textarea) — rendu moderne et confortable
   État normal : sobre. Hover : bordure légèrement affirmée.
   Focus : bleu SIGNORE PLAST bien visible (anneau bleu marque),
   jamais supprimé (outline:none compensé par le ring).
   Règles transposées en input.form-control / textarea.form-control :
   spécificité strictement égale, la textarea est déclarée APRÈS pour
   imposer sa hauteur minimale de rédaction. */
.contactzone #form_contact input.form-control,
.contactzone #form_contact textarea.form-control,
.contactzone #form_contact .form-control {
  height: auto;
  min-height: 52px;
  padding: 0.85rem 1.05rem;
  border: 1.5px solid var(--sp-border);
  border-radius: var(--sp-radius-sm);
  background-color: #ffffff;
  color: var(--sp-text);
  font-size: 1rem;
  line-height: 1.5;
  transition: border-color 180ms ease-out, box-shadow 180ms ease-out;
}

.contactzone #form_contact input.form-control:hover,
.contactzone #form_contact textarea.form-control:hover,
.contactzone #form_contact .form-control:hover {
  border-color: rgba(24, 33, 46, 0.28);
}

.contactzone #form_contact input.form-control:focus,
.contactzone #form_contact textarea.form-control:focus,
.contactzone #form_contact .form-control:focus {
  outline: none;
  border-color: var(--sp-primary);
  box-shadow: var(--sp-focus-ring);
}

.contactzone #form_contact input.form-control::placeholder,
.contactzone #form_contact textarea.form-control::placeholder,
.contactzone #form_contact .form-control::placeholder {
  color: var(--sp-muted);
}

/* 16.5 TEXTAREA — vraie zone de rédaction
   Hauteur minimale généreuse, ligne aérée, redimensionnement vertical
   autorisé (jamais contraint artificiellement).
   Sélecteur aligné sur la spécificité de 16.4 (id + 2 classes) et
   déclaré APRÈS pour gagner sur la source : min-height 160px. */
.contactzone #form_contact textarea.form-control {
  min-height: 160px;
  line-height: 1.65;
  resize: vertical;
}

/* 16.6 BOUTON ENVOYER — élément visuel fort, rouge SIGNORE PLAST
   Le bouton (id="btnSendContact", type="button") reste intact pour le
   JS. Rouges d'origine : --sp-accent #fe1b24 / hover --sp-accent-dark
   #d50f1c. Focus visible dédié. Actif légèrement perceptible. */
.contactzone #btnSendContact {
  margin: 0.5rem 0 0;
  min-height: 54px;
  padding: 0.9rem 2.75rem;
  border: 2px solid var(--sp-accent);
  border-radius: var(--sp-radius-pill);
  background-color: var(--sp-accent);
  color: #ffffff;
  font-family: var(--sp-font-heading);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  cursor: pointer;
  transition: background-color 200ms ease-out, border-color 200ms ease-out, box-shadow 200ms ease-out, transform 160ms ease-out;
}

.contactzone #btnSendContact:hover {
  background-color: var(--sp-accent-dark);
  border-color: var(--sp-accent-dark);
  box-shadow: 0 10px 20px -10px rgba(254, 27, 36, 0.55);
}

.contactzone #btnSendContact:active {
  transform: translateY(1px);
}

.contactzone #btnSendContact:focus-visible {
  outline: 2px solid var(--sp-primary);
  outline-offset: 3px;
}

.contactzone #btnSendContact:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

/* 16.7 TOASTS — intégrés au nouveau design (ID/contenu/JS intacts)
   Polissage : radius, ombre, typographie. Les toasts sont des blocs
   « in flow » placés AVANT le formulaire : repliés (height 0, cachés)
   quand non affichés pour ne pas créer de trou au-dessus de la carte,
   puis développés au show (classes .showing/.show de Bootstrap 4). */
.contactzone .toast {
  border: none;
  border-radius: var(--sp-radius-md);
  box-shadow: var(--sp-shadow-md);
  font-family: var(--sp-font-body);
  font-size: 0.95rem;
  line-height: 1.55;
}

.contactzone .toast:not(.show):not(.showing) {
  height: 0;
  overflow: hidden;
  border: none;
  margin: 0 !important;
  padding: 0;
  visibility: hidden;
  box-shadow: none;
}

.contactzone .toast.show {
  margin-bottom: 1rem;
  visibility: visible;
}

/* 16.8 RESPONSIVE — cibles tactiles confortables, pas d'overflow
   Mobile : carte réduite mais généreuse, bouton pleine largeur,
   champs pleine largeur, padding adapté. */
@media (max-width: 575.98px) {
  .contactzone #form_contact {
    padding: 1.5rem 1.15rem;
  }

  .contactzone #btnSendContact {
    width: 100%;
  }
}

/* =========================================================
   PHASE 9 — Accessibilite AA par ECHANGE DE TOKENS
   =========================================================
   Aucune valeur de token PALETTE modifiee (--sp-* gelee, couleurs
   marque intactes). Seuls les USAGES en texte/couleur qui
   echouaient le contraste AA ont ete echanges vers un token
   existant plus sombre de la meme famille, OU vers --sp-muted
   pour les textes secondaires. Justification mesuree (formule
   WCAG relative luminance) :
     - #0286fa (--sp-primary) sur blanc = 4.17:1  < 4.5 (texte)
     - #2a99fb (--sp-primary-light) sur blanc = 3.31:1 (< AA)
     - #9a9899 (--sp-muted-2) sur blanc = 3.16:1 (< AA)
     - blanc sur #0286fa = 4.17:1 (< 4.5) : fonds pleins
         echanges vers --sp-primary-dark (#016ece) : 6.40:1 AA
   Echanges operes (ce fichier / sp-foundations.css) :
     - Navbar desktop + mobile (.nav-link:hover/:focus,
       .link-active mobile) : texte --sp-primary -> --sp-primary-dark
     - Boutons pleins blanc sur bleu (.linkproduitplus /**
       .formdevis submit / .contactzone button / .fomrModal
       .btnbox a / .fomrModal .btnbox button / .refbtn.active /
       .cartsignore .linkproduit / .btncloseform:hover) :
       fond+filet --sp-primary -> --sp-primary-dark
     - Boutons outline/.linkproduitplus texte :
       --sp-primary -> --sp-primary-dark (filet conserve)
     - Onglets (.nav-tabs.tablink a:hover/:focus/a.active) :
       --sp-primary -> --sp-primary-dark
   Conformes deja (aucun changement) : boutons rouges marque
   (blanc sur --sp-accent = 4.55:1 AA), .btn-sp-outline-accent,
    footers/bartop sur fond sombre (--sp-primary-light sur
    --sp-dark = 20.4:1), separations/icones (>= 3:1),
    titres grand corps (>= 24px : 3:1 suffit). */

/* Correction d'accessibilite - fiche produit (hors homepage) :
   --sp-muted (#747b86) plafonne a 4,27:1 sur fond blanc et
   3,95:1 sur le fond doux #f5f6fb, donc sous le seuil AA de
   4,5:1 exige pour tout texte courant. Cinq instances de la
   fiche produit etaient concernees :

     - onglet inactif "Fiche technique" : 4,27:1, conforme en
       desktop (28,8 px = grand texte, seuil 3:1) mais en echec
       sous 24 px, donc en mobile (17,6 px) ;
     - sous-titre de section "Autres produits..." : 20 px ;
     - libelle "Disponibilite :" : 13 px ;
     - puce "Devis sur demande" : 14 px ;
     - appel "Demandez votre devis..." : 16 px sur fond doux.

   Elles passent sur --sp-text-body (#3f596c), qui vaut 7,26:1
   sur blanc et 6,67:1 sur le fond doux, et qui reste plus clair
   que les titres (--sp-text). Aucun nouveau token n'est cree.

   L'assombrissement du token --sp-muted lui-meme est
   volontairement evite : il est aussi utilise sur fond sombre
   (.fomrModal .modal-header .close a 6,9:1), ou un gris plus
   sombre degraderait le contraste au lieu de l ameliorer. */
.sp-product-page .nav-tabs.tablink a:not(.active) {
  color: var(--sp-text-body);
}

.sp-product-page .section-sp__subtitle,
.sp-product-page .sp-product__availability-label,
.sp-product-page .sp-product__trust-item,
.sp-product-page .sp-color-muted {
  color: var(--sp-text-body);
}

/* PHASE 19 - CONTRASTES : deux cas herites de la regle legacy
   css/style.css "p span { color: var(--sp-primary) }", qui
   impose le bleu primaire a TOUT span place dans un paragraphe.
   Mesures a 1440 px :
     - libelle du bouton WhatsApp du hero : #0286fa sur le vert
       #0ccb4d = 1,67:1 pour 16 px (seuil 4,5:1) ;
     - mention "sur devis" de la fiche produit : #0286fa sur
       blanc = 3,63:1 pour 16 px (seuil 4,5:1).
   On ne touche pas a la regle legacy, trop large et utilisee
   ailleurs : on retablit uniquement la couleur prevue par le
   composant. Le bouton WhatsApp recupere ainsi la couleur de
   .sp-whatsapp (#0d2b12, 7,05:1 sur le vert) et la mention
   "sur devis" le corps de texte (7,26:1 sur blanc). */
.sp-whatsapp--inline > span {
  color: #0d2b12;
}

.sp-product__availability > span {
  color: var(--sp-text-body);
}

/* =========================================================
   PHASE 19 - HARMONISATION VISUELLE
   Corrections de coherence mesurees entre la fiche produit et
   la homepage de reference, limitees a .sp-product-page.
   Aucun changement de structure, de selecteur d'onglet, de
   role ARIA, de comportement Bootstrap ni de requete SQL.

   1) ONGLETS - 30 px herites du legacy
      css/style.css impose .tablink .active { font-size: 30px }
      et .tablink a { font-size: 30px } (specificite 0,2,0).
      Le clamp du design system (.tablink a a sp-foundations
      ligne 466) plafonne justement a 1.875rem = 30 px, donc la
      regle legacy a ete reprise telle quelle. Mesure : onglet
      actif 30 px et onglet inactif 28,8 px en desktop, 17,6 px
      en mobile - un libete d'onglet deux fois plus grand que
      le corps de texte de la page, et deux tailles differentes
      pour deux onglets du meme groupe.
      Correction : les deux etats du groupe partagent la meme
      echelle (--sp-text-lg, 17 a 20 px), le gras et la
      couleur servent a distinguer actif / inactif, et non une
      taille de police.

   2) HIERARCHIE DE TITRES
      Le H1 (nom du produit) et les H2 de section resolvait
      tous les trois sur var(--sp-text-2xl), soit 32 px en
      desktop et 25,05 px en mobile : la page n'affichait
      aucune hierarchie, le titre du produit ne dominait pas
      ses propres sections. Correction : le H1 passe sur une
      echelle superieure (28 a 40 px) et les H2 de section
      restent sur --sp-text-2xl, ce qui cree un ecart lisible
      sans modifier l'echelle interne deja validee.
   ========================================================= */

.sp-product-page .tablink a,
.sp-product-page .tablink .active {
  font-size: var(--sp-text-lg);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -0.01em;
}

.sp-product-page .tablink a:not(.active) {
  font-weight: 500;
}

.sp-product-page h1.sp-title {
  font-size: clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem);
  letter-spacing: -0.02em;
}