/* =====================================================================
   Les Z'Acrau du RCT — thème boutique (noir & rouge)
   ===================================================================== */

:root {
    --rouge:        #e2001a;
    --rouge-fonce:  #b30015;
    --noir:         #0d0d0f;
    --noir-2:       #17171b;
    --gris-900:     #1e1e24;
    --gris-700:     #2c2c33;
    --gris-500:     #6b6b76;
    --gris-300:     #c9c9d1;
    --gris-100:     #f4f4f6;
    --blanc:        #ffffff;
    --texte:        #1a1a1e;
    --ombre:        0 6px 24px rgba(0, 0, 0, .12);
    --ombre-forte:  0 12px 40px rgba(0, 0, 0, .28);
    --radius:       14px;
    --max:          1180px;
    --font:         -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: var(--font);
    color: var(--texte);
    background: var(--gris-100);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

/* Icônes Material (SVG inline) */
.mi { width: 1.2em; height: 1.2em; fill: currentColor; vertical-align: -0.24em; flex: 0 0 auto; }
.mi.gros { width: 1.5em; height: 1.5em; }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 20px; }

/* ---------- Boutons ---------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .5em;
    padding: 13px 26px; border: 0; border-radius: 999px;
    font-size: 1rem; font-weight: 700; cursor: pointer;
    transition: transform .08s ease, background .2s ease, box-shadow .2s ease;
    line-height: 1;
}
.btn:active { transform: translateY(1px); }
.btn-rouge   { background: var(--rouge); color: #fff; }
.btn-rouge:hover  { background: var(--rouge-fonce); box-shadow: 0 8px 20px rgba(226,0,26,.3); }
.btn-noir    { background: var(--noir); color: #fff; }
.btn-noir:hover   { background: #000; }
.btn-ligne   { background: transparent; border: 2px solid var(--gris-300); color: var(--texte); padding: 11px 24px; }
.btn-ligne:hover  { border-color: var(--noir); }
.btn-bloc    { width: 100%; }
.btn:disabled { opacity: .45; cursor: not-allowed; }

/* ---------- En-tête ---------- */
.site-header {
    position: sticky; top: 0; z-index: 40;
    background: var(--noir);
    color: #fff;
    border-bottom: 3px solid var(--rouge);
}
.site-header .wrap {
    display: flex; align-items: center; gap: 20px; min-height: 74px; padding-block: 8px;
}
.logo { display: flex; align-items: center; gap: 12px; font-weight: 800; letter-spacing: .5px; flex-shrink: 0; }
.logo img { height: 44px; width: auto; }
.logo .l1 { color: #fff; font-size: 1.05rem; line-height: 1.1; white-space: nowrap; }
.logo .l2 { color: var(--rouge); font-size: .72rem; letter-spacing: 2px; text-transform: uppercase; white-space: nowrap; }
.nav { margin-left: auto; display: flex; align-items: center; gap: 26px; }
.nav a { color: #e7e7ea; font-weight: 600; font-size: .95rem; }
.nav a:hover { color: #fff; }
.nav-adherer {
    display: inline-flex; align-items: center; gap: 7px;
    background: var(--rouge); color: #fff !important; font-weight: 700; font-size: .9rem;
    padding: 9px 16px; border-radius: 999px; transition: background .2s ease;
}
.nav-adherer:hover { background: var(--rouge-fonce); }
.nav-adherer .mi { width: 1.05em; height: 1.05em; }
.panier-lien { position: relative; display: inline-flex; align-items: center; gap: 8px; }
.panier-badge {
    background: var(--rouge); color: #fff; font-size: .72rem; font-weight: 800;
    min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px;
    display: inline-flex; align-items: center; justify-content: center;
}

/* ---------- Hero ---------- */
.hero {
    position: relative; color: #fff;
    background:
        radial-gradient(1200px 500px at 80% -10%, rgba(226,0,26,.35), transparent 60%),
        linear-gradient(160deg, #000 0%, #17171b 60%, #0d0d0f 100%);
    overflow: hidden;
}
.hero::after {
    content: ""; position: absolute; inset: 0;
    background-image:
        repeating-linear-gradient(45deg, rgba(255,255,255,.03) 0 2px, transparent 2px 22px);
    pointer-events: none;
}
.hero .wrap { position: relative; padding: 84px 20px 92px; text-align: center; }
.hero .kicker {
    display: inline-block; color: var(--rouge); font-weight: 800;
    letter-spacing: 3px; text-transform: uppercase; font-size: .8rem; margin-bottom: 18px;
}
.hero h1 {
    font-size: clamp(2.1rem, 5vw, 3.6rem); line-height: 1.04; margin: 0 0 18px;
    font-weight: 900; letter-spacing: -1px;
}
.hero h1 .rouge { color: var(--rouge); }
.hero p { max-width: 620px; margin: 0 auto 30px; color: #c9c9d1; font-size: 1.1rem; }
.hero .cta { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* ---------- Bandeau confiance ---------- */
.bandeau {
    background: var(--noir-2); color: #d7d7dd;
    border-bottom: 1px solid var(--gris-700);
}
.bandeau .wrap { display: flex; flex-wrap: wrap; gap: 26px; justify-content: center; padding: 16px 20px; font-size: .9rem; }
.bandeau span { display: inline-flex; align-items: center; gap: 8px; }
.bandeau .pastille { color: var(--rouge); font-weight: 900; }

/* ---------- Sections ---------- */
.section { padding: 66px 0; }
.section-titre { text-align: center; margin-bottom: 42px; }
.section-titre .kicker { color: var(--rouge); font-weight: 800; letter-spacing: 2px; text-transform: uppercase; font-size: .78rem; }
.section-titre h2 { font-size: clamp(1.7rem, 3.5vw, 2.4rem); margin: 8px 0 0; font-weight: 900; letter-spacing: -.5px; }

/* ---------- Catégories (accueil + boutique) ---------- */
.cat-bloc { margin-bottom: 46px; scroll-margin-top: 92px; }
.cat-bloc:last-child { margin-bottom: 0; }
.cat-tete { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; padding-bottom: 12px; border-bottom: 2px solid var(--gris-100); }
.cat-tete h3 { font-size: 1.5rem; font-weight: 900; margin: 0; letter-spacing: -.5px; }
.cat-voir { color: var(--rouge); font-weight: 800; font-size: .92rem; white-space: nowrap; }
.cat-voir:hover { color: var(--rouge-fonce); }
.cat-nb { color: var(--gris-500); font-weight: 600; font-size: .9rem; }
.cat-menu { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-bottom: 40px; }
.cat-menu a { padding: 9px 20px; border-radius: 999px; background: #fff; box-shadow: var(--ombre); font-weight: 700; font-size: .9rem; }
.cat-menu a:hover { background: var(--noir); color: #fff; }
.carte-vedette { position: absolute; top: 12px; right: 12px; z-index: 2; width: 30px; height: 30px; border-radius: 50%; background: var(--rouge); color: #fff; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(0,0,0,.3); }
.carte-vedette .mi { width: 17px; height: 17px; }

/* ---------- Grille produits ---------- */
.grille {
    display: grid; gap: 26px;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}
.carte {
    background: #fff; border-radius: var(--radius); overflow: hidden;
    box-shadow: var(--ombre); display: flex; flex-direction: column;
    transition: transform .15s ease, box-shadow .15s ease;
}
.carte:hover { transform: translateY(-4px); box-shadow: var(--ombre-forte); }
.carte-img { position: relative; aspect-ratio: 1 / 1; background: #ececed; }
.carte-img img { width: 100%; height: 100%; object-fit: cover; }
.carte-cat {
    position: absolute; top: 12px; left: 12px;
    background: rgba(13,13,15,.85); color: #fff; font-size: .68rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 1px; padding: 5px 10px; border-radius: 999px;
}
.carte-body { padding: 18px 18px 20px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.carte-body h3 { margin: 0; font-size: 1.12rem; font-weight: 800; }
.carte-desc { color: var(--gris-500); font-size: .88rem; margin: 0; flex: 1; }
.carte-couleurs { display: flex; align-items: center; gap: 6px; margin-top: 10px; }
.carte-couleurs .dot { width: 15px; height: 15px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0,0,0,.18); flex: 0 0 auto; }
.carte-couleurs-txt { font-size: .74rem; color: var(--gris-500); font-weight: 600; margin-left: 4px; }
.carte-bas { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; }
.prix { font-size: 1.35rem; font-weight: 900; color: var(--noir); }
.prix small { font-size: .8rem; font-weight: 700; color: var(--gris-500); }
.rupture { color: var(--rouge); font-weight: 700; font-size: .85rem; }

/* ---------- Actualités ---------- */
.wrap-etroit { max-width: 780px; }
.actu-grid { display: grid; gap: 28px; justify-content: center; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.actu-grid.n1 { grid-template-columns: minmax(0, 560px); }
.actu-grid.n2 { grid-template-columns: repeat(2, minmax(0, 430px)); }
@media (max-width: 900px) {
    .actu-grid, .actu-grid.n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
    .actu-grid, .actu-grid.n1, .actu-grid.n2 { grid-template-columns: minmax(0, 480px); }
}
.actu-carte {
    background: #fff; border-radius: var(--radius); overflow: hidden; box-shadow: var(--ombre);
    display: flex; flex-direction: column; transition: transform .15s ease, box-shadow .15s ease;
}
.actu-carte:hover { transform: translateY(-4px); box-shadow: var(--ombre-forte); }
.actu-img { position: relative; aspect-ratio: 16 / 9; background: #17171b; }
.actu-img img { width: 100%; height: 100%; object-fit: cover; }
.actu-body { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.actu-body h3 { margin: 0; font-size: 1.18rem; font-weight: 800; line-height: 1.25; }
.actu-meta { display: inline-flex; align-items: center; gap: 6px; color: var(--gris-500); font-size: .82rem; font-weight: 600; }
.actu-meta .mi { width: 1.05em; height: 1.05em; color: var(--rouge); }
.actu-desc { color: var(--gris-500); font-size: .9rem; margin: 0; flex: 1; }
.actu-lire { display: inline-flex; align-items: center; gap: 6px; color: var(--rouge); font-weight: 800; font-size: .9rem; margin-top: 4px; }
.actu-lire .mi { width: 1.1em; height: 1.1em; }

/* Badges de type */
.actu-type {
    position: absolute; top: 12px; left: 12px; z-index: 2;
    color: #fff; font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .5px;
    padding: 5px 11px; border-radius: 999px;
}
.actu-type.deplacement { background: #2563eb; }
.actu-type.soiree      { background: #7c3aed; }
.actu-type.match       { background: var(--rouge); }
.actu-type.info        { background: #0f766e; }

/* Page article */
.actu-titre { font-size: clamp(1.8rem, 4vw, 2.6rem); margin: 0 0 14px; font-weight: 900; letter-spacing: -.5px; }
.actu-infos { display: flex; flex-wrap: wrap; gap: 18px; color: var(--gris-500); font-weight: 600; margin-bottom: 22px; }
.actu-infos span { display: inline-flex; align-items: center; gap: 7px; }
.actu-infos .mi { color: var(--rouge); }
.actu-hero-img { border-radius: var(--radius); overflow: hidden; box-shadow: var(--ombre); aspect-ratio: 16/9; background: #17171b; margin-bottom: 26px; }
.actu-hero-img img { width: 100%; height: 100%; object-fit: cover; }
.actu-contenu { font-size: 1.08rem; line-height: 1.75; color: #333; }
.actu-contenu a { color: var(--rouge); text-decoration: underline; }
.actu-contenu a:hover { color: var(--rouge-fonce); }
.actu-contenu a.btn { color: #fff; text-decoration: none; }
.actu-contenu ul, .actu-contenu ol { padding-left: 1.5em; margin: 1em 0; }
.actu-contenu p { margin: 0 0 1em; }
.actu-contenu blockquote { margin: 1em 0; padding: 8px 18px; border-left: 3px solid var(--rouge); color: #555; }

/* ---------- Partenaires ---------- */
.partenaires-section { padding: 10px 0 70px; }
.partenaires-panneau {
    position: relative; overflow: hidden;
    display: grid; grid-template-columns: minmax(240px, 340px) 1fr; gap: 36px; align-items: center;
    padding: 38px 42px; border-radius: 22px;
    background: radial-gradient(120% 140% at 0% 0%, #2a0a0e 0%, #111114 55%) , #111114;
    color: #fff; box-shadow: 0 18px 40px rgba(0,0,0,.18);
}
.partenaires-panneau::before {           /* bande rouge en biais, rappel des couleurs du club */
    content: ""; position: absolute; top: -40%; right: -6%; width: 180px; height: 180%;
    background: linear-gradient(180deg, var(--rouge), transparent); opacity: .18; transform: rotate(18deg);
}
.partenaires-intro { position: relative; }
.partenaires-intro .kicker { color: var(--rouge); font-weight: 800; letter-spacing: 2px; text-transform: uppercase; font-size: .75rem; }
.partenaires-intro h2 { margin: 6px 0 10px; font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 900; letter-spacing: -.5px; color: #fff; }
.partenaires-intro p { margin: 0 0 18px; color: #b9b9c3; font-size: .95rem; line-height: 1.6; }
.partenaires-cta { display: inline-flex; align-items: center; gap: 6px; color: #fff; font-weight: 800; font-size: .9rem; border-bottom: 2px solid var(--rouge); padding-bottom: 3px; }
.partenaires-cta .mi { width: 16px; height: 16px; transition: transform .2s; }
.partenaires-cta:hover .mi { transform: translateX(3px); }

.partenaires-logos { position: relative; display: flex; flex-wrap: wrap; gap: 16px; justify-content: flex-start; align-self: stretch; align-content: center; padding-left: 36px; border-left: 1px solid rgba(255,255,255,.12); }
.partenaire { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 148px; text-align: center; }
.partenaire-logo {
    width: 148px; height: 86px; padding: 12px 16px; border-radius: 14px; background: #fff;
    display: flex; align-items: center; justify-content: center;
    transition: transform .2s, box-shadow .2s;
}
.partenaire-logo img { max-width: 100%; max-height: 100%; object-fit: contain; filter: grayscale(1); opacity: .8; transition: filter .2s, opacity .2s; }
.partenaire-initiale { font-size: 1.8rem; font-weight: 900; color: var(--rouge); }
.partenaire-nom { font-size: .78rem; font-weight: 700; color: #c9c9d2; line-height: 1.25; }
.partenaire:hover .partenaire-logo { transform: translateY(-3px); box-shadow: 0 0 0 3px var(--rouge); }
.partenaire:hover .partenaire-logo img { filter: none; opacity: 1; }
.partenaire:hover .partenaire-nom { color: #fff; }

@media (max-width: 820px) {
    .partenaires-panneau { grid-template-columns: 1fr; padding: 30px 24px; gap: 24px; text-align: center; }
    .partenaires-logos { justify-content: center; padding-left: 0; border-left: 0; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.12); }
}
@media (max-width: 420px) {
    .partenaire, .partenaire-logo { width: 116px; }
    .partenaire-logo { height: 68px; }
}

/* ---------- Galerie ---------- */
.galerie-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.galerie-une { grid-template-columns: repeat(3, 1fr); }
.galerie-item { display: block; aspect-ratio: 1 / 1; border-radius: 12px; overflow: hidden; background: #17171b; cursor: zoom-in; box-shadow: var(--ombre); }
.galerie-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.galerie-item:hover img { transform: scale(1.06); }
@media (max-width: 760px) { .galerie-une { grid-template-columns: repeat(2, 1fr); } }

/* Lightbox */
.lightbox { position: fixed; inset: 0; z-index: 100; display: none; align-items: center; justify-content: center; background: rgba(8,8,10,.92); padding: 30px; }
.lightbox.open { display: flex; }
.lightbox .lb-img { max-width: 92vw; max-height: 88vh; border-radius: 8px; box-shadow: 0 20px 60px rgba(0,0,0,.6); }
.lightbox .lb-close, .lightbox .lb-nav {
    position: absolute; background: rgba(255,255,255,.12); color: #fff; border: 0; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; line-height: 1;
    transition: background .15s ease;
}
.lightbox .lb-close:hover, .lightbox .lb-nav:hover { background: var(--rouge); }
.lightbox .lb-close { top: 20px; right: 24px; width: 46px; height: 46px; font-size: 2rem; }
.lightbox .lb-nav { top: 50%; transform: translateY(-50%); width: 52px; height: 52px; font-size: 2.4rem; }
.lightbox .lb-prev { left: 20px; }
.lightbox .lb-next { right: 20px; }
@media (max-width: 620px) { .lightbox .lb-nav { width: 42px; height: 42px; font-size: 1.8rem; } .lightbox .lb-prev { left: 8px; } .lightbox .lb-next { right: 8px; } }

/* ---------- Fiche produit ---------- */
.produit { display: grid; grid-template-columns: 1fr 1fr; gap: 46px; align-items: start; }
.produit-media { border-radius: var(--radius); overflow: hidden; box-shadow: var(--ombre); background: #ececed; aspect-ratio: 1/1; }
.produit-media img { width: 100%; height: 100%; object-fit: cover; }
.produit-info h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); margin: 0 0 6px; font-weight: 900; letter-spacing: -.5px; }
.produit-info .prix-fiche { font-size: 2rem; font-weight: 900; color: var(--rouge); margin: 6px 0 18px; }
.produit-info .desc { color: #444; font-size: 1.02rem; margin-bottom: 26px; }
.fil { color: var(--gris-500); font-size: .88rem; margin-bottom: 20px; }
.fil a:hover { color: var(--rouge); }

.champ-label { display: block; font-weight: 700; margin-bottom: 10px; font-size: .95rem; }

/* Pastilles de couleur */
.couleurs { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 24px; }
.swatch {
    padding: 0; border: 0; background: none; cursor: pointer;
    width: 42px; height: 42px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    box-shadow: 0 0 0 2px var(--gris-300);
    transition: box-shadow .12s ease, transform .12s ease;
}
.swatch span { width: 30px; height: 30px; border-radius: 50%; background: var(--sw); box-shadow: inset 0 0 0 1px rgba(0,0,0,.15); }
.swatch:hover { transform: translateY(-2px); }
.swatch.actif { box-shadow: 0 0 0 2px var(--noir); }

.tailles { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 26px; }
.taille {
    position: relative; cursor: pointer;
}
.taille input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.taille span {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 54px; padding: 12px 14px; border: 2px solid var(--gris-300);
    border-radius: 10px; font-weight: 700; transition: all .12s ease; background: #fff;
}
.taille input:checked + span { border-color: var(--noir); background: var(--noir); color: #fff; }
.taille.epuise span { opacity: .35; text-decoration: line-through; cursor: not-allowed; }
.options-produit { display: grid; gap: 8px; margin-bottom: 24px; }
.option-produit { display: flex; align-items: center; gap: 10px; padding: 11px 14px; background: #fff; border: 2px solid var(--gris-300); border-radius: 10px; cursor: pointer; }
.option-produit:has(input:checked) { border-color: var(--noir); }
.option-produit input { width: auto; margin: 0; accent-color: var(--rouge); }
.option-produit .op-lib { flex: 1; font-weight: 600; }
.option-produit .op-prix { font-weight: 800; white-space: nowrap; }
.taille-mesures { margin: -12px 0 24px; padding: 10px 14px; background: #fff; border-left: 3px solid var(--rouge); border-radius: 6px; font-size: .92rem; }
.taille .st { font-size: .68rem; color: var(--gris-500); position: absolute; bottom: -18px; left: 0; right: 0; text-align: center; }

.qte-row { display: flex; align-items: center; gap: 16px; margin-bottom: 26px; }
.qte { display: inline-flex; align-items: center; border: 2px solid var(--gris-300); border-radius: 10px; overflow: hidden; }
.qte button { width: 42px; height: 44px; border: 0; background: #fff; font-size: 1.3rem; cursor: pointer; }
.qte button:hover { background: var(--gris-100); }
.qte input { width: 52px; height: 44px; text-align: center; border: 0; font-size: 1.05rem; font-weight: 700; }

/* ---------- Panier ---------- */
.panier-layout { display: grid; grid-template-columns: 1fr 340px; gap: 32px; align-items: start; }
.panier-lignes { background: #fff; border-radius: var(--radius); box-shadow: var(--ombre); overflow: hidden; }
.pl {
    display: grid; grid-template-columns: 84px 1fr auto; gap: 16px; align-items: center;
    padding: 18px 20px; border-bottom: 1px solid var(--gris-100);
}
.pl:last-child { border-bottom: 0; }
.pl-img { width: 84px; height: 84px; border-radius: 10px; object-fit: cover; background: #ececed; }
.pl-nom { font-weight: 800; }
.pl-meta { color: var(--gris-500); font-size: .88rem; }
.pl-prix { font-weight: 900; font-size: 1.05rem; white-space: nowrap; }
.pl-suppr { color: var(--gris-500); font-size: .82rem; background: none; border: 0; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; }
.pl-suppr .mi { width: 15px; height: 15px; }
.pl-suppr:hover { color: var(--rouge); }

.recap { background: #fff; border-radius: var(--radius); box-shadow: var(--ombre); padding: 24px; position: sticky; top: 92px; }
.recap h3 { margin: 0 0 16px; font-size: 1.2rem; }
.recap-ligne { display: flex; justify-content: space-between; padding: 8px 0; color: #444; }
.recap-total { display: flex; justify-content: space-between; padding: 16px 0 4px; margin-top: 10px; border-top: 2px solid var(--gris-100); font-size: 1.3rem; font-weight: 900; }
.recap .note { font-size: .82rem; color: var(--gris-500); margin: 14px 0 20px; }

/* ---------- Formulaires ---------- */
.form-carte { background: #fff; border-radius: var(--radius); box-shadow: var(--ombre); padding: 30px; }
.form-groupe { margin-bottom: 18px; }
.form-groupe label { display: block; font-weight: 700; margin-bottom: 7px; font-size: .92rem; }
.form-groupe .req { color: var(--rouge); }
input[type=text], input[type=email], input[type=tel], input[type=number],
input[type=password], input[type=search], select, textarea {
    width: 100%; padding: 12px 14px; border: 2px solid var(--gris-300);
    border-radius: 10px; font-size: 1rem; font-family: inherit; background: #fff;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--rouge); }
textarea { resize: vertical; min-height: 90px; }
.livraison-choix { display: grid; gap: 10px; }
.form-groupe .livraison-option { display: flex; margin: 0; font-weight: 400; align-items: center; gap: 12px; padding: 14px 16px; border: 2px solid var(--gris-300); border-radius: 12px; cursor: pointer; background: #fff; transition: border-color .15s; }
.form-groupe .livraison-option:has(input:checked) { border-color: var(--rouge); background: #fff7f7; }
.form-groupe .livraison-option input { width: auto; flex: none; accent-color: var(--rouge); margin: 0; }
.lo-corps { flex: 1; display: flex; flex-direction: column; }
.lo-titre { font-weight: 800; }
.lo-detail { font-size: .85rem; color: var(--gris-500); }
.lo-prix { font-weight: 800; white-space: nowrap; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

/* ---------- Messages ---------- */
.alerte { padding: 14px 18px; border-radius: 10px; margin-bottom: 20px; font-weight: 600; }
.alerte-ok    { background: #e7f7ec; color: #14683a; border: 1px solid #b6e3c6; }
.alerte-err   { background: #fdeaec; color: #a1121f; border: 1px solid #f4c2c7; }
.alerte-info  { background: #eef2ff; color: #2b3a67; border: 1px solid #cdd8f7; }

/* ---------- Confirmation ---------- */
.confirm { text-align: center; max-width: 620px; margin: 0 auto; }
.confirm .rond { width: 84px; height: 84px; border-radius: 50%; background: var(--rouge); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 2.6rem; margin-bottom: 20px; }
.confirm .ref { display: inline-block; background: var(--noir); color: #fff; font-weight: 800; letter-spacing: 1px; padding: 10px 20px; border-radius: 10px; margin: 12px 0 8px; font-size: 1.2rem; }

/* ---------- À propos ---------- */
.apropos-section { background: #fff; }
.apropos { display: grid; grid-template-columns: 1.3fr 1fr; gap: 48px; align-items: center; }
.apropos-txt .kicker { color: var(--rouge); font-weight: 800; letter-spacing: 2px; text-transform: uppercase; font-size: .78rem; }
.apropos-txt h2 { font-size: clamp(1.7rem, 3.5vw, 2.4rem); margin: 8px 0 18px; font-weight: 900; letter-spacing: -.5px; }
.apropos-txt p { color: #444; font-size: 1.02rem; margin: 0 0 16px; }
.apropos-points { list-style: none; padding: 0; margin: 22px 0 26px; display: grid; gap: 12px; }
.apropos-points li { display: flex; align-items: center; gap: 12px; font-weight: 600; }
.apropos-points .mi { color: var(--rouge); width: 1.4em; height: 1.4em; }
.apropos-cta { display: flex; gap: 12px; flex-wrap: wrap; }
.apropos-media { display: flex; justify-content: center; }
.apropos-media img {
    width: min(340px, 80%); height: auto; border-radius: 50%;
    box-shadow: 0 20px 50px rgba(226,0,26,.25);
    background: radial-gradient(circle, rgba(226,0,26,.08), transparent 70%);
    padding: 10px;
}

/* ---------- Bande soutien (HelloAsso) ---------- */
.soutien {
    color: #fff;
    background:
        radial-gradient(900px 400px at 85% -30%, rgba(226,0,26,.5), transparent 60%),
        linear-gradient(150deg, #17171b, #0d0d0f);
    border-top: 3px solid var(--rouge);
}
.soutien-inner { display: flex; align-items: center; justify-content: space-between; gap: 32px; padding: 52px 0; flex-wrap: wrap; }
.soutien .kicker { color: var(--rouge); font-weight: 800; letter-spacing: 2px; text-transform: uppercase; font-size: .78rem; }
.soutien h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); margin: 8px 0 12px; font-weight: 900; }
.soutien p { color: #c9c9d1; margin: 0; max-width: 520px; }
.soutien-cta { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.soutien-cta .btn { font-size: 1.05rem; }
.soutien-cta .btn .mi:last-child { width: .95em; height: .95em; opacity: .85; }
.soutien-note { color: var(--gris-500); font-size: .82rem; }

/* ---------- Pied de page ---------- */
.site-footer { background: var(--noir); color: #c9c9d1; margin-top: 40px; border-top: 3px solid var(--rouge); }
.site-footer .wrap { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 32px; padding: 52px 20px 30px; }
.site-footer h4 { color: #fff; margin: 0 0 14px; font-size: 1rem; text-transform: uppercase; letter-spacing: 1px; }
.site-footer a:hover { color: #fff; }
.site-footer .marque { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.site-footer .marque img { height: 46px; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: 9px; }
.socials { display: flex; gap: 12px; margin-top: 10px; }
.socials a { width: 38px; height: 38px; border-radius: 50%; background: var(--gris-900); display: inline-flex; align-items: center; justify-content: center; color: #fff; font-weight: 800; }
.socials a:hover { background: var(--rouge); }
.socials a .mi { width: 19px; height: 19px; vertical-align: middle; }
.site-footer li .mi { width: 15px; height: 15px; margin-right: 7px; opacity: .75; }
.copyright { border-top: 1px solid var(--gris-700); text-align: center; padding: 18px; font-size: .84rem; color: var(--gris-500); }

/* ---------- Vide ---------- */
.vide { text-align: center; padding: 70px 20px; color: var(--gris-500); }
.vide .ico { font-size: 3rem; margin-bottom: 12px; }

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
    .produit { grid-template-columns: 1fr; gap: 26px; }
    .panier-layout { grid-template-columns: 1fr; }
    .recap { position: static; }
    .site-footer .wrap { grid-template-columns: 1fr; gap: 26px; }
    .site-header .wrap { gap: 12px; }
    .nav { gap: 14px; margin-left: auto; }
    .nav a.lien-txt { display: none; }
    .apropos { grid-template-columns: 1fr; gap: 30px; }
    .apropos-media { order: -1; }
    .apropos-media img { width: 220px; }
    .soutien-inner { padding: 40px 0; }
}
@media (max-width: 600px) {
    /* En-tête mobile : on garde le blason (qui porte déjà le nom) + Adhérer + Panier */
    .logo > span { display: none; }
    .logo img { height: 40px; }
    .site-header .wrap { gap: 10px; min-height: 62px; }
    .nav { gap: 10px; }
    .nav-adherer { padding: 8px 13px; font-size: .85rem; }
    .panier-lien { font-size: .92rem; }
}

@media (max-width: 520px) {
    .form-row { grid-template-columns: 1fr; }
    .pl { grid-template-columns: 64px 1fr; }
    .pl-prix { grid-column: 2; }
}

/* ---------- Règlement : RIB du club ---------- */
.rib { border: 2px solid var(--noir); border-radius: 12px; padding: 16px 18px; margin-bottom: 18px; background: #fff; text-align: left; }
.rib-titre { display: flex; align-items: center; gap: 8px; font-weight: 800; margin-bottom: 10px; }
.rib-titre .mi { color: var(--rouge); }
.rib dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; margin: 0 0 10px; }
.rib dt { color: var(--gris-500); font-size: .85rem; align-self: center; }
.rib dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.rib-mention { margin: 0; padding: 10px 12px; background: #fff7f7; border-radius: 8px; font-size: .9rem; color: var(--rouge-fonce); }
.mono { font-family: ui-monospace, Consolas, monospace; letter-spacing: .5px; }
.paiement-info { text-align: left; background: #fff; border-radius: 12px; padding: 16px 18px; margin: 18px 0; box-shadow: var(--ombre); }

/* ---------- Fenêtre bloquante « commande depuis l'étranger » ---------- */
.geo-modal { position: fixed; inset: 0; z-index: 200; display: none; align-items: center; justify-content: center; padding: 16px; background: rgba(8, 8, 10, .82); backdrop-filter: blur(3px); }
.geo-modal.open { display: flex; }
.geo-carte { background: #fff; border-radius: var(--radius); max-width: 480px; width: 100%; padding: 30px 26px 24px; text-align: center; box-shadow: var(--ombre-forte); border-top: 5px solid var(--rouge); max-height: 100%; overflow-y: auto; }
.geo-icone { width: 64px; height: 64px; border-radius: 50%; background: var(--rouge); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 2rem; margin-bottom: 12px; }
.geo-carte h2 { margin: 0 0 12px; }
.geo-carte p { color: var(--gris-700); line-height: 1.55; margin: 0 0 12px; }
.geo-actions { display: flex; flex-direction: column; gap: 10px; margin: 18px 0 14px; }
.geo-actions .btn { justify-content: center; overflow-wrap: anywhere; }
.geo-note { font-size: .85rem; color: var(--gris-500) !important; }
.geo-retour { display: inline-block; margin-top: 4px; color: var(--gris-500); font-weight: 600; }

/* ---------- Page Partenaires ---------- */
.partenaires-page-intro { max-width: 620px; margin: 14px auto 0; color: var(--gris-500); line-height: 1.6; }
.partenaires-grille { display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.partenaire-carte { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 18px 16px 16px; background: #fff; border-radius: var(--radius); box-shadow: var(--ombre); text-align: center; border: 2px solid transparent; transition: transform .2s, border-color .2s; }
a.partenaire-carte:hover { transform: translateY(-3px); border-color: var(--rouge); }
.pc-logo { width: 100%; height: 100px; display: flex; align-items: center; justify-content: center; }
.pc-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.pc-logo .partenaire-initiale { width: 76px; height: 76px; border-radius: 50%; background: var(--gris-100); display: inline-flex; align-items: center; justify-content: center; }
.pc-nom { font-weight: 800; line-height: 1.25; color: var(--texte); }
.pc-lien { font-size: .8rem; color: var(--gris-500); display: inline-flex; align-items: center; gap: 4px; overflow-wrap: anywhere; }
.pc-lien .mi { width: 14px; height: 14px; }
.partenaires-devenir { margin-top: 46px; display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding: 28px 30px; border-radius: var(--radius); background: var(--noir); color: #fff; border-left: 6px solid var(--rouge); }
.partenaires-devenir h3 { margin: 0 0 6px; font-size: 1.25rem; }
.partenaires-devenir p { margin: 0; color: #b9b9c3; }
@media (max-width: 480px) { .partenaires-grille { grid-template-columns: repeat(2, 1fr); gap: 12px; } .partenaires-devenir { padding: 22px 20px; } }

/* ---------- Fiche produit : guide des tailles ---------- */
.guide-tailles { margin: -10px 0 22px; background: #fff; border-radius: 10px; border: 1.5px solid var(--gris-300); }
.guide-tailles summary { cursor: pointer; padding: 11px 14px; font-weight: 800; font-size: .92rem; display: flex; align-items: center; gap: 8px; }
.guide-tailles summary .mi { color: var(--rouge); }
.guide-tailles[open] summary { border-bottom: 1px solid var(--gris-100); }
#guide-tailles-corps { padding: 6px 14px 12px; overflow-x: auto; }
.guide-tailles table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.guide-tailles th, .guide-tailles td { padding: 8px 6px; text-align: center; border-bottom: 1px solid var(--gris-100); white-space: nowrap; }
.guide-tailles th { font-size: .8rem; color: var(--gris-500); }
.guide-tailles th small { display: block; font-weight: 400; font-size: .7rem; }
.guide-tailles td:first-child, .guide-tailles th:first-child { text-align: left; }
.guide-tailles ul { margin: 8px 0 0; padding-left: 18px; font-size: .9rem; }

/* ---------- Menu mobile (☰) ---------- */
.nav a.lien-txt.courant { color: #fff; box-shadow: inset 0 -2px 0 var(--rouge); padding-bottom: 4px; }
.burger { display: none; align-items: center; justify-content: center; width: 42px; height: 42px; border: 1.5px solid rgba(255,255,255,.25); border-radius: 10px; background: transparent; color: #fff; cursor: pointer; }
.burger .mi { width: 24px; height: 24px; }
.burger .burger-fermer, .burger.ouvert .burger-ouvrir { display: none; }
.burger.ouvert .burger-fermer { display: inline-flex; }
.burger.ouvert { border-color: var(--rouge); background: var(--rouge); }
.menu-mobile { background: var(--noir-2); border-top: 1px solid rgba(255,255,255,.08); padding: 8px 16px 16px; }
.menu-mobile[hidden] { display: none; }
.menu-mobile a { display: flex; align-items: center; justify-content: space-between; padding: 14px 4px; color: #e7e7ea; font-weight: 700; font-size: 1.02rem; border-bottom: 1px solid rgba(255,255,255,.08); }
.menu-mobile a .mi { width: 18px; height: 18px; color: var(--gris-500); }
.menu-mobile a.courant { color: #fff; }
.menu-mobile a.courant .mi { color: var(--rouge); }
.menu-mobile .mm-adherer { justify-content: center; gap: 8px; margin-top: 14px; border: 0; border-radius: 999px; background: var(--rouge); color: #fff; }
.menu-mobile .mm-adherer .mi { color: #fff; }
@media (max-width: 860px) {
    .burger { display: inline-flex; }
}
@media (min-width: 861px) {
    .menu-mobile { display: none !important; }
}

/* Champ piège anti-robots : hors écran (pas display:none, que certains robots repèrent) */
.champ-piege { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }