/* ========== Variables & Reset ========== */
:root{
  --bg: #f5f5f5;
  --text: #333;
  --white: #fff;
  --primary: #0070ba;
  --primary-hover: #005c99;
  --brand: #03458d;
  --success: #007700;
  --warning-bg: #fff3cd;
  --warning-text: #856404;
  --warning-border: #ffeeba;
  --dark: #222;
  --link-hover: #00aaff;
  --tp-accent: #0b63ff; /* accent nav actif */
}

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

body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
}

/* Accessibilité focus */
:focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: 2px;
}

/* ========== Header sticky & Nav ========== */
.site-header{
  position: sticky; top: 0; z-index: 1000;
  background: var(--dark);
  color: var(--white);
  border-bottom: 1px solid #111;
  backdrop-filter: saturate(180%) blur(6px);
}
.site-header__inner{
  max-width: 1200px; margin: 0 auto;
  display: grid; grid-template-columns: auto 1fr; align-items: center;
  gap: 16px; padding: 10px 16px;
}
.site-header__inner img{ filter: none; width: 200px; height: auto; max-width: 90vw; }

/* Nav (desktop par défaut >1450px) */
.primary-nav{ justify-self: end; }
.primary-nav__list{
  display: flex; align-items: center; gap: 18px;
  list-style: none; margin: 0; padding: 0;
}
.primary-nav__list a{
  display: inline-block; padding: 10px 12px; text-decoration: none;
  color: #fff; font-weight: 600; border-radius: 0;
  transition: color .2s ease;
  white-space: nowrap;
}
.primary-nav__list a:hover{ color: #ccc; }

/* Lien actif : texte bleu, coins arrondis, non gras, sans fond */
.primary-nav__list li.active > a,
.primary-nav__list li.is-active > a,
.primary-nav__list a.is-active,
.primary-nav__list a[aria-current="page"]{
  color: var(--tp-accent);
  border-radius: 8px;
  font-weight: 400;
  text-decoration: none;
}

/* Burger button (caché >1450px) */
.nav-toggle{
  display: none; position: relative; width: 42px; height: 36px;
  border: 0; background: transparent; padding: 0; cursor: pointer;
}
.nav-toggle__bar{
  position: absolute; left: 6px; right: 6px; height: 3px; border-radius: 3px; background: #fff;
  transition: transform .25s ease, opacity .2s ease, top .25s ease, bottom .25s ease, background .2s ease;
}
.nav-toggle__bar:nth-child(1){ top: 9px; }
.nav-toggle__bar:nth-child(2){ top: 16.5px; }
.nav-toggle__bar:nth-child(3){ bottom: 9px; }
html.nav-open .nav-toggle__bar:nth-child(1){ top: 16.5px; transform: rotate(45deg); }
html.nav-open .nav-toggle__bar:nth-child(2){ opacity: 0; }
html.nav-open .nav-toggle__bar:nth-child(3){ bottom: auto; top: 16.5px; transform: rotate(-45deg); }

/* Ombre en scroll (optionnel) */
html.scrolled .site-header{ box-shadow: 0 6px 20px rgba(0,0,0,.08); }

/* ===== Burger & panneau mobile ≤1450px ===== */
@media (max-width: 1450px){
  .site-header__inner{ grid-template-columns: auto auto; }
  .nav-toggle{ display: inline-block; justify-self: end; z-index: 1002; }

  .primary-nav{
    position: fixed;
    top: calc(var(--header-h, 64px));
    left: 0; right: 0;
    width: 100vw;
    max-width: none !important;
    margin: 0 !important;
    background: var(--dark);
    border-bottom: 1px solid #111;
    max-height: calc(100vh - var(--header-h, 64px));
    overflow: auto;
    z-index: 1001;

    /* fermé par défaut (rien ne dépasse ni ne capte) */
    transform: translate3d(0,-110%,0);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    box-shadow: none;
    transition:
      transform .28s ease,
      opacity .18s ease,
      visibility 0s linear .28s;
  }
  html.nav-open .primary-nav{
    transform: translate3d(0,0,0);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    box-shadow: 0 14px 28px rgba(0,0,0,.06);
    transition:
      transform .28s ease,
      opacity .18s ease,
      visibility 0s;
  }

  .primary-nav__list{
    display: flex; flex-direction: column; align-items: stretch; gap: 0;
  }
  .primary-nav__list a{
    color: #fff;
    padding: 14px 18px;
    border-top: 1px solid #333;
  }
  .primary-nav__list li:first-child a{ border-top: 0; }
}
/* Bloque le scroll derrière quand menu ouvert */
html.nav-open{ overflow: hidden; }

/* ===== Menu classique >1450px ===== */
@media (min-width: 1451px){
  .primary-nav{
    position: static !important; transform: none !important;
    opacity: 1 !important; visibility: visible !important; pointer-events: auto !important;
    box-shadow: none !important; border: 0 !important;
  }
  .nav-toggle{ display: none !important; }
}

/* ========== Nav générique (fallback si <nav> simple existe encore) ========== */
header nav{
  margin-top: 20px;
  display: flex; justify-content: center; align-items: center;
}
header nav ul{
  display: flex; flex-wrap: wrap; gap: 12px 16px;
  justify-content: center; margin: 0; padding: 0;
}
header nav ul li{
  list-style: none; display: flex; align-items: center; justify-content: flex-start; padding: 10px;
}
header nav ul li.logo-mark { min-width:200px; text-align:center; }
header nav a{
  display: inline-block; padding: 8px 14px; border-radius: 6px; text-decoration: none;
  color: var(--white); white-space: nowrap; transition: background-color .2s ease, color .2s ease, transform .1s ease;
}
header nav a:hover{ transform: translateY(-1px); }

/* ========== Hero ========== */
.hero {
  background: var(--brand) url('img/tennis-banner.png') no-repeat center / cover;
  padding: 100px 20px;
  text-align: center;
  color: var(--white);
}
.hero h2, .hero h1 { margin: 0; font-size: 2.5em; }

/* ========== Sections Générales ========== */
.gras { font-weight: 700; }
.rouge { color: red; }
.orange { color: orange; }
.bleu { color: #2B48B5; }

/* ========== Section produits (contenant) ========== */
.products { padding: 40px 20px; background-color: var(--white); }
.products h2 { text-align: center; margin-bottom: 40px; }

/* (Les cartes .product et .product a.cta sont dans styleboutique.css) */

/* ========== Overlays image ========== */
.image-container { position: relative; display: inline-block; }
.image-container img { display: block; }
.image-container .overlay {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
}

/* ========== Boutons génériques ========== */
.buy-button {
  background-color: var(--primary);
  color: var(--white);
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 1em;
  font-weight: 700;
  text-decoration: none;
  transition: background-color .2s ease, transform .1s ease;
}
.buy-button:hover { background-color: var(--primary-hover); transform: translateY(-1px); }
.btn, .btn-outline, .buy-button { text-decoration: none; }

/* ========== Section "Site en construction" ========== */
.construction {
  text-align: center;
  background-color: var(--warning-bg);
  color: var(--warning-text);
  border: 1px solid var(--warning-border);
  border-radius: 10px;
  padding: 30px 20px;
  margin: 40px auto;
  max-width: 800px;
  box-shadow: 0 2px 10px rgba(0,0,0,.05);
}
.construction h2 { font-size: 1.8em; margin-bottom: 10px; }
.construction p { font-size: 1.1em; }

/* ========== Bloc pub / CTA ========== */
.mapub {
  background: var(--brand) url('img/terrebattue.png') no-repeat center / cover;
  padding: 100px 20px;
  text-align: center;
  color: var(--white);
}
.mapub h2 { margin: 0; font-size: 2.5em; }
.mapub img { width: 100px; height: auto; }

.lienboutique { padding: 20px; text-align: center; color: var(--white); background-color: var(--brand); }
.lienboutique a { color: var(--white); text-decoration: none; font-weight: 700; }
.lienboutique a:hover { color: var(--link-hover); }

/* ========== Footer ========== */
footer {
  background-color: black;
  color: var(--white);
  text-align: center;
  padding: 20px;
  margin-top: 0;
}
footer a.email {
  color: #cfd8dc;
  text-decoration: none;
  font-weight: 700;
}
footer a.email:hover { text-decoration: underline; color: var(--link-hover); }
footer img { width: 100px; height: auto; }

/* Harmoniser tous les liens de footer */
footer a{ color:#cfd8dc; text-decoration:none; font-weight:700; }
footer a:hover{ text-decoration:underline; color: var(--link-hover); }

/* ========== Section contact ========== */
#contact { padding: 20px; text-align: center; }
#contact a { color: inherit; text-decoration: none; }
#contact a:hover { color: var(--link-hover); }
#contact img.linksocial { width: 150px; height: 150px; margin: 6px; }

/* ========== Accueil : sections pro et sobres ========== */
.usps-min {
  background: #fff; border: 1px solid #eee; border-radius: 10px;
  max-width: 1100px; margin: 24px auto; padding: 10px 14px;
}
.usps-min .usps-list{
  margin:0; padding:0; list-style:none;
  display:flex; flex-wrap:wrap; gap:10px 18px; justify-content:center;
  font-weight:600; color:#333;
}
.usps-min .usps-list li{ white-space: nowrap; }

.categories-home { background:#fff; padding:28px 16px; }
.categories-home h2 { text-align:center; margin:0 0 14px; }
.categories-grid{
  max-width:1100px; margin:0 auto;
  display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
}
.categories-grid .cat{
  display:flex; align-items:center; justify-content:center; gap:10px;
  padding:16px; border:1px solid #eee; border-radius:10px;
  background:#fafafa; color:inherit; text-decoration:none; font-weight:700;
  transition: transform .12s ease, box-shadow .2s ease, border-color .2s;
}
.categories-grid .cat:hover{ transform: translateY(-2px); border-color:#ddd; box-shadow:0 6px 18px rgba(0,0,0,.06); }
.categories-grid .cat span{ font-weight:700; }

.cta-home { text-align:center; padding:26px 16px; }
.cta-home h2 { margin: 0 0 20px; }

.about-home {
  max-width:1100px; margin:24px auto; background:#fff;
  border:1px solid #eee; border-radius:10px; padding:20px 16px; line-height:1.6;
}
.about-home h2{ margin:0 0 8px; }

/* ========== Diaporama pleine largeur ========== */
.hero-slider{
  position:relative; width:100vw; left:50%; right:50%;
  margin-left:-50vw; margin-right:-50vw;
  overflow:hidden; background:#000;
}
.hero-slider .slider{
  display:flex; transition: transform .5s ease; will-change: transform;
  height: clamp(42vh, 60vh, 72vh);
}
.hero-slider .slide{ min-width:100%; height:100%; position:relative; }
.hero-slider .slide img{ width:100%; height:100%; object-fit:cover; display:block; }
.slide-nav{
  position:absolute; top:50%; transform:translateY(-50%); z-index:5;
  background:rgba(0,0,0,.45); color:#fff; border:0; width:44px; height:44px; border-radius:50%;
  font-size:26px; line-height:44px; text-align:center; cursor:pointer;
  transition: background .2s ease, transform .1s ease;
}
.slide-nav:hover{ background:rgba(0,0,0,.6); transform:translateY(-50%) scale(1.03); }
.slide-nav:focus-visible{ outline:3px solid var(--primary); outline-offset:2px; }
.slide-nav.prev{ left:12px; } .slide-nav.next{ right:12px; }
.dots{
  position:absolute; z-index:4; bottom:12px; left:50%; transform:translateX(-50%);
  display:flex; gap:8px;
}
.dots button{ width:10px; height:10px; border-radius:50%; border:0; background:rgba(255,255,255,.5); cursor:pointer; }
.dots button[aria-current="true"]{ background:#fff; }

/* ========== Fiches produit (pages individuelles) ========== */
.product-page { padding: 40px 20px; background:#fff; }
.product-wrap{
  max-width:1100px; margin:0 auto; display:grid;
  grid-template-columns:1fr 1fr; gap:40px; align-items:start;
}

/* ===== Bloc fidélité (2 colonnes) ===== */
.loyalty {
  background: var(--white);
  padding: 28px 16px;
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
}

.loyalty-wrap {
  max-width: 1000px;
  margin: 0 auto;
  display: flex;
  gap: 30px;
  align-items: center;
  justify-content: space-between;
}

.loyalty-content { flex: 1; }

.loyalty-content h2 {
  margin: 0 0 12px;
  font-size: 1.6rem;
}

.loyalty-content p {
  margin: 0;
  line-height: 1.6;
  color: #444;
}

/* Slider fidélité */
.loyalty-slider {
  flex: 0 0 300px;
  width: 300px;
  max-width: 100%;
  aspect-ratio: 3 / 2;
  position: relative;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.loyalty-slider .slide { position: absolute; inset: 0; opacity: 0; transition: opacity .6s ease; }
.loyalty-slider .slide.active { opacity: 1; }
.loyalty-slider img { width: 100%; height: 100%; object-fit: cover; display: block; border: 0; border-radius: 0; }

/* Responsive fidélité */
@media (max-width: 700px) {
  .loyalty-wrap { flex-direction: column; text-align: center; }
  .loyalty-slider {
    flex: 0 0 auto;
    width: 100%;
    max-width: 300px;
    margin-top: 16px;
  }
}

/* Galerie */
.gallery .main{
  border:1px solid #ddd; border-radius:10px; overflow:hidden;
  margin-bottom:16px; box-shadow:0 2px 8px rgba(0,0,0,0.05);
}
.gallery .main img{ width:100%; display:block; }
.gallery .thumbs{ display:flex; gap:10px; justify-content:center; }
.gallery .thumbs img{
  width:70px; height:70px; object-fit:cover; border:2px solid #ddd; border-radius:6px;
  cursor:pointer; transition:border-color .2s, transform .2s;
}
.gallery .thumbs img:hover{ border-color:var(--primary); transform:scale(1.05); }

/* Détails */
.details h1{ margin-top:0; font-size:1.8rem; }
.details .etat{ font-weight:700; margin:10px 0; }
.price{ font-size:1.6rem; color:var(--success); font-weight:700; margin:15px 0; }
.details p{ line-height:1.5; }

/* Bouton achat (générique) */
#zone_payment{ text-align:center; }
.buy-button{ margin:20px 0; }

/* Spécifications */
.specs{
  margin-top:30px; background:#fafafa; border:1px solid #ddd; border-radius:8px; padding:20px;
}
.specs h2{ margin-top:0; }
.specs dl{ display:grid; grid-template-columns:1fr 1fr; gap:10px 20px; }
.specs dt{ font-weight:700; } .specs dd{ margin:0; }

/* Description */
.description-produit{
  margin-top:30px; background:#fff; padding:20px; border-radius:8px; border:1px solid #eee; line-height:1.6;
}
.description-produit h2{ margin-top:0; font-size:1.4rem; margin-bottom:10px; }
.description-produit p{ margin-bottom:12px; }
.justify{ text-align:justify; }
li.jaune::marker{ color:#F5E727; }

/* Loupe */
.zoomable{ position:relative; overflow:hidden; cursor:crosshair; }
.zoom-lens{
  position:absolute; width:150px; height:150px; border:2px solid rgba(255,255,255,.8);
  border-radius:50%; box-shadow:0 4px 14px rgba(0,0,0,.25);
  background-repeat:no-repeat;
  pointer-events:none; opacity:0; transition:opacity .15s ease; z-index:2;
}
.zoomable:hover .zoom-lens{ opacity:1; }
.zoomable img{ transition: transform .2s ease; }
.zoomable:hover img{ transform: scale(1.02); }
@media (hover:none) and (pointer:coarse){
  .zoomable{ cursor:zoom-in; }
  .zoomable .zoom-lens{ display:none; }
}

/* Guard produit indisponible (fiche) */
.product-locked{
  background:#fff3cd; color:#664d03; border:1px solid #ffe69c; border-radius:10px;
  padding:20px; margin:20px auto; text-align:center; max-width:600px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
}

/* ========== Responsive générique ========== */
@media (max-width: 900px) {
  header nav a { padding: 10px 12px; }
  .product-wrap { grid-template-columns: 1fr; }
  .gallery .thumbs { flex-wrap: wrap; }
}
@media (max-width: 520px) {
  header nav ul { justify-content: stretch; }
  header nav li { flex: 1 1 45%; }
  header nav a { display: block; text-align: center; }
}
@media (max-width: 360px) {
  header nav li { flex: 1 1 100%; }
  #contact img.linksocial { width: 40px; height: 40px; }
}

/* ========== Page CGV (scopée) ========== */
.cgv{ max-width:980px; margin:32px auto; padding:0 16px 48px; color:var(--text); }
.cgv .hero{
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-hover) 100%);
  border-radius:14px; color:#fff; padding:18px 20px; box-shadow:0 1px 3px rgba(0,0,0,.06); margin-bottom:18px;
}
.cgv .badge-date{ opacity:.95; margin:0; }

.cgv-grid{ display:block; }
.cgv .toc{
  background:#fff; border:1px solid #eee; border-radius:12px; padding:16px; box-shadow:0 1px 3px rgba(0,0,0,.06);
  margin:18px 0 24px;
}
.cgv .toc h2{ margin:0 0 10px; font-size:1.05rem; color:var(--text); }
.cgv .toc ul{ list-style:none; padding:0; margin:0; }
.cgv .toc li{ padding:6px 0; border-bottom:1px dashed #eee; }
.cgv .toc li:last-child{ border-bottom:0; }
.cgv .toc a{ text-decoration:none; color:var(--primary); }
.cgv .toc a:hover{ text-decoration:underline; color:var(--link-hover); }

.cgv section{
  background:#fff; border:1px solid #eee; border-left:4px solid var(--primary);
  border-radius:12px; padding:18px 20px; margin:18px 0; box-shadow:0 1px 3px rgba(0,0,0,.06);
}
.cgv h1{ font-size:clamp(28px,4vw,40px); line-height:1.15; margin:0 0 6px; color:#fff; }
.cgv h2{ margin:0 0 8px; font-size:1.3rem; color:var(--brand); }
.cgv h3{ margin:12px 0 8px; font-size:1.05rem; color:var(--text); }
.cgv p, .cgv li{ line-height:1.6; }
.cgv a{ color:var(--primary); }
.cgv a:hover{ color:var(--link-hover); }
.cgv address{ font-style:normal; line-height:1.6; }
.cgv .note{
  background:#e9f4ff; border:1px solid #cfe8ff; border-radius:8px; padding:12px 14px; margin-top:8px; color:#0b2e4d;
}

@media (min-width: 960px){
  .cgv-grid{ display:grid; grid-template-columns:280px 1fr; gap:24px; align-items:start; }
  .cgv .toc{ position:sticky; top:16px; }
}

@media print{
  header, nav, footer, .cgv .toc, .cgv .hero { display:none !important; }
  .cgv{ max-width:100%; padding:0; }
  .cgv a[href^="http"]::after{ content:" (" attr(href) ")"; font-size:.9em; }
  .cgv section{ break-inside: avoid; }
}

/* ========================================================================== */
/* SECTION TOP CORDAGE                                                        */
/* ========================================================================== */

.top-cordage {
  width: 100%;
  background: #f9f9f9;
  padding: 80px 20px;
  text-align: center;
}

.cordage-title {
  font-size: 2rem;
  color: #222;
  margin-bottom: 50px;
  text-transform: uppercase;
  letter-spacing: 1px;
  position: relative;
}

.cordage-title::after {
  content: "";
  display: block;
  width: 80px;
  height: 3px;
  background: #00aaff;
  margin: 12px auto 0;
  border-radius: 2px;
}

.cordage-container {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 40px;
  max-width: 1000px;
  margin: 0 auto;
}

/* Cartes cordage */
.cordage-item {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  background: #fff;
  border: 1px solid #e5e5e5;
  border-radius: 12px;
  max-width: 250px;
  width: 100%;
  padding: 20px;
  box-shadow: 0 3px 8px rgba(0,0,0,0.08);
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.cordage-item.visible { opacity: 1; transform: translateY(0); }
.cordage-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 12px rgba(0,0,0,0.12);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.cordage-item img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  margin-bottom: 12px;
}
.cordage-item h3 { font-size: 1.1rem; color: #222; margin-bottom: 8px; }
.cordage-item p { font-size: 0.9rem; color: #555; margin-bottom: 16px; }

.cordage-item .btn {
  display: inline-block;
  background: #00aaff;
  color: #fff;
  padding: 8px 16px;
  border-radius: 20px;
  text-decoration: none;
  font-size: 0.9rem;
  transition: background 0.2s ease;
  margin-top: auto;         /* 🧲 colle le bouton en bas */
  align-self: center;       /* centre horizontalement */
}
.cordage-item .btn:hover { background: #0088cc; }

.contact-page {
  max-width: 900px;
  margin: 0 auto;
  padding: 32px 20px;
  font-family: 'Inter', sans-serif;
}

.contact-hero {
  padding: 60px 20px 30px;
  border-radius: 16px;
  margin-bottom: 40px;
}
.contact-hero h1 {
  font-size: clamp(28px, 5vw, 42px);
  margin-bottom: 10px;
}
.contact-hero .accent { color: var(--primary, #0b5bd3); }
.contact-hero p {
  color: #555;
  font-size: 16px;
  margin: 0;
}

.contact-form, .contact-infos, .contact-faq {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(2,6,23,.08);
  padding: 28px 24px;
  margin-bottom: 32px;
}

.contact-form h2, .contact-infos h2, .contact-faq h2 {
  margin-top: 0;
  color: var(--primary, #0b5bd3);
}

.contact-form form {
  display: grid;
  gap: 14px;
}

.contact-form .row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
@media (max-width: 700px){
  .contact-form .row { grid-template-columns: 1fr; }
}

.contact-form label { font-weight: 600; font-size: 14px; }
.contact-form span.req, .contact-form label span { color: #e10600; }
.contact-form input, .contact-form textarea, .contact-form select {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid #d1d5db;
  border-radius: 10px;
  font: inherit;
}
.contact-form input:focus, .contact-form textarea:focus, .contact-form select:focus {
  border-color: var(--primary, #0b5bd3);
  outline: none;
  box-shadow: 0 0 0 3px rgba(11,91,211,.15);
}
.contact-form textarea { min-height: 120px; }

.contact-form .consent {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 14px;
}
.contact-form .btn {
  background: var(--primary, #0b5bd3);
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 12px 24px;
  font-weight: 700;
  cursor: pointer;
}
.contact-form .btn:hover { background: #094caf; }

.status {
  display: none;
  padding: 10px 14px;
  border-radius: 10px;
  font-weight: 600;
  margin-bottom: 10px;
}
.status.show { display: block; }
.status.ok { background: rgba(16,185,129,.1); color: #065f46; border: 1px solid rgba(16,185,129,.3); }
.status.err { background: rgba(239,68,68,.1); color: #991b1b; border: 1px solid rgba(239,68,68,.3); }

.contact-infos ul { list-style: none; padding: 0; margin: 0 0 20px; }
.contact-infos li { margin-bottom: 8px; }

.contact-infos .map {
  width: 100%;
  height: 250px;
  border: 0;
  border-radius: 12px;
}

.contact-faq details {
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 10px;
}
.contact-faq summary { font-weight: 600; cursor: pointer; }

  /* ====== Section Facebook alignée sur Top Cordage ====== */
  .fb-section {
    padding: 60px 16px;
    background: var(--surface, #f8f9fb);
    text-align: center;
  }

  .fb-section .container {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
  }

  /* Titre identique à Top Cordage */
  .fb-section h2 {
    font-size: clamp(1.6rem, 1.4rem + 1vw, 2.2rem);
    color: var(--brand, #1b2a4e);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 700;
    margin-bottom: 8px;
  }

  .fb-card, .fb-plugin-wrap {
    background: #fff;
    border: 1px solid #e9e9e9;
    border-radius: 14px;
    padding: 24px;
    box-shadow: 0 4px 14px rgba(0,0,0,.06);
    width: 100%;
    max-width: 700px;
    text-align: center;
  }

  .fb-card p {
    margin: 0;
    color: #333;
    line-height: 1.5;
  }

  .fb-actions {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 12px;
  }

  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 18px;
    border-radius: 10px;
    border: 1px solid transparent;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
  }

  .btn-primary {
    background: var(--primary, #0d6efd);
    color: #fff;
  }

  .btn-primary:hover {
    filter: brightness(0.95);
  }

  .btn-secondary {
    background: #fff;
    border-color: #ccc;
    color: #222;
  }

  .btn-secondary:hover {
    background: #f6f6f6;
  }

  .fb-privacy-note {
    display: block;
    margin-top: 8px;
    font-size: 0.9rem;
    color: #666;
  }
  
  /* ============================================================
   Section Articles & Conseils – version image à gauche
   ============================================================ */
.home-articles {
  max-width: 1100px;
  margin: 80px auto;
  padding: 0 16px;
  text-align: center;
}

.articles-header h2 {
  font-size: 2rem;
  color: var(--primary);
  margin-bottom: 8px;
}

.articles-header p {
  color: #555;
  margin-bottom: 32px;
}

.articles-grid {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-bottom:10px;
}

/* ---- Carte d’article ---- */
.article-card {
  display: flex;
  align-items: center;
  background: #fff;
  border: 1px solid #e9e9e9;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 10px rgba(0,0,0,0.05);
  text-align: left;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.article-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
}

.article-card img {
  width: 40%;
  height: 100%;
  object-fit: cover;
  flex-shrink: 0;
}

.article-content {
  padding: 20px 28px;
  flex: 1;
}

.article-content h3 {
  font-size: 1.2rem;
  color: #222;
  margin-bottom: 8px;
}

.article-content p {
  color: #666;
  font-size: 0.95rem;
  margin-bottom: 16px;
}

.btn-article {
  display: inline-block;
  background: var(--primary);
  color: #fff;
  padding: 8px 18px;
  border-radius: 50px;
  font-weight: 600;
  font-size: 0.9rem;
  transition: background 0.2s ease;
}
.btn-article:hover {
  background: var(--brand);
}

/* ---- Footer ---- */
.articles-footer {
  margin-top: 32px;
}

.btn-all-articles {
  display: inline-block;
  background: transparent;
  color: var(--primary);
  border: 2px solid var(--primary);
  padding: 10px 24px;
  border-radius: 50px;
  font-weight: 600;
  transition: all 0.2s ease;
}
.btn-all-articles:hover {
  background: var(--primary);
  color: #fff;
}
.general-link{
	text-decoration:none;
	color:grey;
}
.general-link:hover{
	color:#00aaff;
}

/* ---- Responsive ---- */
@media (max-width: 768px) {
  .article-card {
    flex-direction: column;
  }

  .article-card img {
    width: 100%;
    height: 180px;
  }

  .article-content {
    padding: 16px 20px;
    text-align: center;
  }
}

/* ====================================================================== */
/* PATCH FICHE PRODUIT + BLOC DEVIS — Tennis Passion                      */
/* (à coller en bas de style.css)                                         */
/* ====================================================================== */

:root{
  --surface: var(--white);
  --border-soft: #e9e9e9;
  --soft: #fafafa;
}

.product-page{ padding: 24px 0 40px; background: var(--white); }

/* La grille 2 colonnes existe déjà via .product-wrap dans ton CSS :
   grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; 
   On conserve tes règles. */

/* Petits panneaux (galerie, achat, détails) */
.panel{
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  box-shadow: 0 2px 8px rgba(0,0,0,.05);
}

/* Galerie */
.gallery{ padding: 14px; }
.gallery .main{ border:1px solid #ddd; border-radius:10px; overflow:hidden; margin-bottom:16px; box-shadow:0 2px 8px rgba(0,0,0,0.05); }
.gallery .main img{ width:100%; display:block; }
.gallery .thumbs{ display:grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap:10px; justify-items:center; }
.gallery .thumbs img{
  width:100%; aspect-ratio: 1/1; object-fit:cover;
  border:2px solid #ddd; border-radius:6px; cursor:pointer;
  transition: border-color .2s, transform .2s;
}
.gallery .thumbs img:hover{ border-color: var(--primary); transform: scale(1.04); }

/* Encadré prix + paiement (colonne gauche, sous la galerie) */
.purchase{ margin-top:12px; padding: 14px; }
.purchase .etat{ color:#555; margin: 6px 0 8px; }
.purchase .price{ font-size: clamp(22px, 2.4vw, 28px); color: var(--success); font-weight: 800; }
.purchase .pay-buttons{ display:grid; justify-items:center; gap:.5rem; }

/* Détails produit (colonne droite) */
.details{ padding: 18px; }
.details h1{ margin-top:0; font-size: clamp(22px, 2.8vw, 32px); }
.details .meta{ color:#666; font-size:.95rem; margin: 4px 0 8px; }
.details .pill{
  display:inline-block; padding:.15rem .5rem; border:1px solid #dfe8ff;
  background:#f1f5ff; border-radius:999px; font-size:.8rem;
}

/* Specs déjà présentes ; densification sur desktop */
@media (min-width: 901px){
  .specs dl{ grid-template-columns: 180px 1fr; }
}

/* Bloc DEVIS (sous les deux colonnes) */
.devis{ max-width:1100px; margin: 28px auto 0; padding: 0 16px; }
.devis .card{
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  padding: 18px;
  box-shadow: 0 2px 8px rgba(0,0,0,.04);
}
.devis h2{ margin: 0 0 12px; color: var(--brand); }

.form-grid{
  display:grid; grid-template-columns: repeat(12, 1fr); gap: 12px;
}
.col-4{ grid-column: span 4; }
.col-6{ grid-column: span 6; }
.col-8{ grid-column: span 8; }
.col-12{ grid-column: span 12; }
@media (max-width: 900px){
  .col-4, .col-6, .col-8{ grid-column: span 12; }
}

.field{ display:flex; flex-direction:column; gap:6px; }
.field label{ font-weight:700; }
.field input[type="text"],
.field input[type="email"],
.field input[type="number"],
.field select,
.field textarea{
  border:1px solid #e0e0e0; border-radius:10px; padding:10px; font: inherit;
}
.field textarea{ min-height: 110px; }
.hint{ font-size:12px; color:#666; }

/* Récap + total */
.summary{
  background: var(--soft);
  border: 1px dashed #ddd;
  border-radius: 12px;
  padding: 12px;
}
.total-line{
  display:flex; justify-content:space-between;
  font-weight: 800; font-size: 18px; margin-top: 6px;
}

/* Boutons */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:12px 16px; border-radius:10px; border:1px solid transparent;
  font-weight:700; text-decoration:none; cursor:pointer; transition: all .2s ease;
}
.btn-primary{ background: var(--primary); color: #fff; }
.btn-primary:hover{ background: var(--primary-hover); }
.btn-disabled{ opacity:.6; pointer-events:none; }

/* Garde-fou : produit indisponible */
.product-locked{
  background: var(--warning-bg); color: var(--warning-text);
  border: 1px solid var(--warning-border);
  border-radius: 10px; padding: 16px; text-align: center;
  max-width: 700px; margin: 16px auto;
}

/* Responsive : déjà présent pour .product-wrap ; on ajoute juste un raffinement */
@media (max-width: 900px){
  .gallery .thumbs{ grid-template-columns: repeat(5, 1fr); }
}

/* ====== Conseils Cordage – styles ====== */
:root{
  --tp-bg: var(--surface, #f8fafc);
  --tp-card: #fff;
  --tp-text: var(--text, #0f172a);
  --tp-muted: #64748b;
  --tp-border: #e5e7eb;
  --tp-brand: var(--primary, #0ea5e9);
  --tp-soft: #16a34a;        /* accent “bras fragile” */
  --tp-tp: var(--brand, #ef4444); /* accent “Choix TP” */
  --tp-shadow: 0 8px 24px rgba(15,23,42,.06);
}

.cordage-advice{
  background: var(--tp-bg);
  padding: clamp(28px, 4vw, 48px) 16px;
  border-top: 1px solid var(--tp-border);
  border-bottom: 1px solid var(--tp-border);
}

.ca-container{ max-width: 1100px; margin: 0 auto; }

.cordage-advice h2{
  font-size: clamp(1.25rem, 1.2rem + .8vw, 1.75rem);
  line-height: 1.2;
  margin: 0 0 25px;
  color: var(--tp-text);
}

.ca-grid{
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 16px;
}

.string-card{
  grid-column: span 12;
  background: var(--tp-card);
  border: 1px solid var(--tp-border);
  border-radius: 16px;
  box-shadow: var(--tp-shadow);
  padding: 16px;
  position: relative;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
@media (min-width: 700px){
  .string-card{ grid-column: span 4; }
}

.string-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(15,23,42,.12);
  border-color: rgba(14,165,233,.35);
}

.string-badge{
  position: absolute; top: -12px; left: 16px;
  background: var(--tp-brand);
  color: #fff; font-weight: 700; font-size: .75rem;
  padding: 6px 10px; border-radius: 999px;
  letter-spacing: .2px;
  box-shadow: 0 6px 16px rgba(14,165,233,.35);
}

.string-card.soft .string-badge{ background: var(--tp-soft); box-shadow: 0 6px 16px rgba(22,163,74,.30); }
.string-card.tp   .string-badge{ background: var(--tp-tp);   box-shadow: 0 6px 16px rgba(239,68,68,.30); }

.string-top{
  display: grid; grid-template-columns: 88px 1fr; gap: 12px; align-items: center;
}
.string-top img{
  width: 88px; height: 88px; border-radius: 12px; object-fit: cover;
  border: 1px solid var(--tp-border);
  background: #fff;
}

.string-head .string-name{
  margin: 0 0 2px;
  font-size: 1.05rem; line-height: 1.25;
  color: var(--tp-text);
}
.string-tagline{
  margin: 0; font-size: .9rem; color: var(--tp-muted);
}

.string-points{
  margin: 12px 0 0; padding-left: 18px; color: var(--tp-text);
}
.string-points li{ margin: 4px 0; }

.string-cta{
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 14px; gap: 10px;
}
.price{
  font-weight: 700; color: var(--tp-text);
}
.btn.btn-string{
  display: inline-flex; align-items: center; justify-content: center;
  padding: 10px 14px; border-radius: 10px; font-weight: 700;
  background: var(--tp-brand); color: #fff; text-decoration: none;
  border: 1px solid transparent;
}
.btn.btn-string:hover{ filter: brightness(1.05); }

.string-card.soft .btn-string{ background: var(--tp-soft); }
.string-card.tp   .btn-string{ background: #FF5C61; }

/* Note pédagogique */
.ca-note{
  margin: 18px 2px 0;
  font-size: .92rem; color: var(--tp-muted);
}

.chip{display:inline-block;padding:.15rem .5rem;border:1px solid #dfe8ff;border-radius:999px;background:#f1f5ff;font-size:.8rem}
  .usp{display:flex;flex-wrap:wrap;gap:.5rem 1rem;margin:.75rem 0;padding:0;list-style:none}
  .usp li{background:#f8f9ff;border:1px solid #e5eaff;border-radius:999px;padding:.25rem .6rem;font-size:.9rem}
  .spec-note{font-size:.9rem;color:#555}
  .cordage-advice .refs{margin-top:.5rem}
  .shipping.hint{margin-top:.5rem}
  
  /* fixation du CTA en bas du bloc cordage */
.string-card {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  position: relative;
  height: 100%;                /* pour que tous les blocs aient la même hauteur */
}

.string-card a {
text-decoration:none;	
}

.string-points {
  flex-grow: 1;                /* fait pousser la zone de texte */
  margin-bottom: 3.5rem;       /* laisse un espace pour le CTA si besoin */
}

.string-cta {
  margin-top: auto;            /* pousse le CTA vers le bas */
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .75rem;
  padding-top: .5rem;
  border-top: 1px solid #eaeaea;
  background: #fff;
}