/* Les feuilles sont chaînées par header.php (theme-matsuri →
   theme-capy-base → ce fichier), et non plus par @import : un
   fichier importé n'a pas de cache-buster et restait figé 7 jours
   chez les visiteurs après chaque correction du socle. */

/* ============================================================================
   THÈME CAPYGRIP — identité « Baru sur la route » (asphalte / orange racing)

   Comme les autres thèmes de la famille, ce fichier ne contient QUE la palette
   et les composants propres à la marque : structure et composants communs sont
   dans theme-capy-base.css.

   Palette :
     Asphalte      #14181F  (titres, wordmark « Capy », bandeaux)
     Orange racing #FF5A1F  (dominante : CTA, liens, accents, « Grip »)
     Jaune signal  #FFC933  (mises en avant, marquages)
     Gris route    #F5F6F8  (fond), gris gomme #E9EBF0 (fonds doux)

   Choix assumé : la cible est très majoritairement masculine et l'achat est
   subi (on remplace un pneu usé, on n'en rêve pas). L'identité joue donc la
   carte atelier/route — sombre, franche, contrastée — là où les autres sites
   de la famille sont pastel. L'orange n'est pas décoratif : c'est la couleur
   des vestes de sécurité et des cônes de chantier, elle dit « route ».
   ========================================================================== */

:root {
    /* ── Accent principal : orange racing (le socle fait --primary: var(--pink)) */
    --pink:      #FF5A1F;
    --pink-dk:   #E04A12;
    --pink-lt:   rgba(255, 90, 31, 0.12);

    /* ── Secondaire : asphalte (prix, accents forts) */
    --purple:    #14181F;
    --purple-dk: #0B0E13;

    /* ── Mises en avant : jaune signal (marquages routiers) ── */
    --gold:      #FFC933;
    --gold-bg:   rgba(255, 201, 51, 0.20);

    /* ── Promotions (fonctionnel) ── */
    --orange:    #F97316;
    --orange-dk: #DC5F0A;

    /* ── Neutres ── */
    --bg:          #F5F6F8;
    --surface:     #FFFFFF;
    --surface-2:   #EDEFF3;   /* gris gomme — fonds doux, hovers */
    --surface-3:   #DFE3EA;   /* bordures de halo */
    --border:      #D9DDE5;
    --text:        #333A47;
    --text-strong: #14181F;   /* asphalte — titres */
    --muted:       #6B7280;

    /* ── Triplets RGB consommés par le socle commun (ombres, dégradés) ── */
    --accent-rgb:  255, 90, 31;   /* orange racing */
    --shadow-rgb:  20, 24, 31;    /* asphalte */
}

/* Wordmark : « Capy » asphalte + « Grip » orange. */
.logo-word .lw-b { color: var(--pink); }

/* ============================================================================
   HERO ASPHALTE — la signature visuelle du site.

   Fond sombre dégradé (la route au crépuscule) + bande de marquage routier
   sous le bloc. Uniquement sur la home : les pages intérieures gardent le
   fond clair du socle, plus lisible pour des listings denses.
   ========================================================================== */
.cp-hero {
    position: relative;
    background: linear-gradient(180deg, #171C25 0%, #12161E 60%, #14181F 100%);
    border-radius: 0 0 26px 26px;
    padding-bottom: 40px;
    overflow: hidden;
}
/* Marquage routier : la double ligne pointillée jaune, discrète, en fond. */
.cp-hero::before {
    content: "";
    position: absolute;
    left: -4%;
    right: -4%;
    bottom: 84px;
    height: 5px;
    background: repeating-linear-gradient(90deg,
        rgba(255, 201, 51, .5) 0 46px, transparent 46px 84px);
    transform: rotate(-1.6deg);
    pointer-events: none;
}
.cp-hero__title { color: #FFFFFF; }
.cp-hero__sub   { color: #B8BFCC; }
.cp-search {
    border-color: #2A3242;
    box-shadow: 0 10px 34px rgba(0, 0, 0, 0.35);
}

/* ============================================================================
   SÉLECTEUR DE DIMENSION — le composant signature de CapyGrip.

   Le visiteur n'arrive pas avec une marque en tête : il arrive avec les trois
   chiffres lus sur le flanc de son pneu. Trois listes dépendantes (largeur →
   hauteur → diamètre, peuplées par le stock réel), la saison, le véhicule, et
   un seul bouton. Posé sur le hero sombre, comme une étiquette de flanc.
   ========================================================================== */
.cp-tyre {
    position: relative;
    z-index: 1;
    max-width: 860px;
    margin: 26px auto 0;
    padding: 20px 22px 18px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 18px;
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.35);
    text-align: center;
}
.cp-tyre__title {
    margin: 0;
    font-size: 1.08rem;
    color: var(--text-strong);
}
.cp-tyre__hint {
    margin: 4px 0 14px;
    font-size: 0.86rem;
    color: var(--muted);
}

/* Onglets véhicule : Auto / SUV / Utilitaire / Moto */
.cp-tyre__veh {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-bottom: 14px;
}
.cp-tyre__veh label {
    cursor: pointer;
    padding: 7px 16px;
    border: 1.5px solid var(--border);
    border-radius: 999px;
    background: var(--surface-2);
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--text);
    transition: background .15s, border-color .15s, color .15s;
}
.cp-tyre__veh input { position: absolute; opacity: 0; pointer-events: none; }
.cp-tyre__veh label:has(input:checked) {
    background: var(--purple);
    border-color: var(--purple);
    color: #fff;
}

/* La rangée de listes : visuellement « 205 / 55 R 16 » comme sur le flanc. */
.cp-tyre__row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-end;
    gap: 10px;
}
.cp-tyre__field { text-align: left; }
.cp-tyre__field label {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 4px;
}
.cp-tyre__field select {
    appearance: none;
    -webkit-appearance: none;
    min-width: 118px;
    padding: 11px 34px 11px 14px;
    border: 1.5px solid var(--border);
    border-radius: 12px;
    background: var(--surface-2)
        url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%236B7280' stroke-width='2'/%3E%3C/svg%3E")
        no-repeat right 12px center;
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--text-strong);
    cursor: pointer;
}
.cp-tyre__field select:disabled { opacity: .45; cursor: default; }
.cp-tyre__sep {
    padding-bottom: 12px;
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--muted);
}
.cp-tyre__go {
    padding: 12px 26px;
    border: 0;
    border-radius: 12px;
    background: var(--pink);
    color: #fff;
    font-weight: 800;
    font-size: 1rem;
    cursor: pointer;
    transition: background .15s, transform .1s;
    box-shadow: 0 6px 18px rgba(var(--accent-rgb), 0.35);
}
.cp-tyre__go:hover  { background: var(--pink-dk); }
.cp-tyre__go:active { transform: scale(.97); }
.cp-tyre__go:disabled { background: var(--surface-3); color: var(--muted); box-shadow: none; cursor: default; }

/* Sous la rangée : saison (facultative) + aide « où lire ma dimension ? » */
.cp-tyre__season {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    font-size: 0.85rem;
    color: var(--muted);
}
.cp-tyre__season label {
    cursor: pointer;
    padding: 5px 12px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    font-weight: 600;
    color: var(--text);
}
.cp-tyre__season input { position: absolute; opacity: 0; pointer-events: none; }
.cp-tyre__season label:has(input:checked) {
    background: var(--pink-lt);
    border-color: var(--pink);
    color: var(--pink-dk);
}
.cp-tyre__where {
    margin: 12px 0 0;
    font-size: 0.8rem;
    color: var(--muted);
}
.cp-tyre__where a { color: var(--pink-dk); }
.cp-tyre__count { font-size: 0.82rem; color: var(--muted); margin-top: 8px; }

/* ── Rappel du filtre actif sur la page de résultats (public/pneus.php) ──── */
.cp-tyre-active {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 16px;
    padding: 10px 14px;
    background: var(--surface-2);
    border: 1px solid var(--surface-3);
    border-radius: 12px;
}
.cp-tyre-active__tag {
    padding: 4px 12px;
    border-radius: 8px;
    background: var(--purple);
    color: #fff;
    font-weight: 800;
    font-size: 0.9rem;
    letter-spacing: .02em;
    white-space: nowrap;
}
.cp-tyre-active__txt { font-size: 0.9rem; color: var(--text); }
.cp-tyre-active__off {
    margin-left: auto;
    font-size: 0.82rem;
    color: var(--muted);
    text-decoration: none;
    border-bottom: 1px dotted var(--muted);
}
.cp-tyre-active__off:hover { color: var(--pink-dk); border-color: var(--pink-dk); }

/* ============================================================================
   BADGES DE CARTE — l'étiquette européenne sur chaque carte produit.

   C'est LE différenciateur des résultats : saison, dimension, et les trois
   notes de l'étiquette UE en pastilles colorées (vert → rouge), comme sur
   l'étiquette réglementaire que l'acheteur connaît déjà.
   ========================================================================== */
.cp-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin: 6px 0 2px;
}
.cp-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 7px;
    border-radius: 6px;
    background: var(--surface-2);
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--text);
    line-height: 1.5;
    white-space: nowrap;
}
.cp-badge--size   { background: var(--purple); color: #fff; letter-spacing: .02em; }
.cp-badge--season { background: var(--pink-lt); color: var(--pink-dk); }
.cp-badge--snow   { background: #E3F0FB; color: #1D5C96; }
/* Classes UE : la rampe réglementaire vert → rouge. Le préfixe (⛽/🌧) est
   porté par le markup ; la couleur suit la CLASSE, pas le critère. */
.cp-badge--a { background: #D9F0DD; color: #1E7A34; }
.cp-badge--b { background: #E8F3D6; color: #4F7A1E; }
.cp-badge--c { background: #FFF3C9; color: #8A6D00; }
.cp-badge--d { background: #FFE4C4; color: #A0521B; }
.cp-badge--e { background: #FFD9D2; color: #B02E1C; }
.cp-badge--noise { background: var(--surface-2); color: var(--text); }

/* ============================================================================
   Divers propres au site
   ========================================================================== */
/* Chapô éditorial sur fond gomme claire. */
.cp-intro { background: var(--surface-2); border-color: var(--surface-3); }

/* Le hero sombre : l'autocomplétion doit rester lisible par-dessus. */
.cp-hero .cp-suggest { text-align: left; }

@media (max-width: 640px) {
    .cp-tyre { padding: 16px 12px; border-radius: 14px; }
    .cp-tyre__field select { min-width: 96px; font-size: 0.98rem; }
    .cp-tyre__sep { display: none; }
    .cp-tyre__go { width: 100%; margin-top: 4px; }
    .cp-tyre-active__off { margin-left: 0; }
    .cp-hero::before { bottom: 64px; }
}