/* 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 CAPYAIR — identité « Baru au frais » (bleu ciel / bleu nuit glacé)

   Comme theme-capypure.css et theme-capydream.css, ce fichier ne contient QUE
   la palette et les quelques retouches propres à la marque : structure et
   composants sont dans theme-capy-base.css.

   Palette :
     Bleu nuit glacé #0C3B5E  (titres, wordmark « Capy », éléments forts)
     Bleu ciel       #0EA5E9  (dominante : CTA, liens, accents)
     Azur clair      #7DD3FC  (wordmark « Air », décor, survols)
     Givre           #E8F4FB  (fonds doux, halos)
     Ambre           #F0B429  (mises en avant)

   Choix assumé : l'ambre n'est pas décoratif, il est FONCTIONNEL. Le site
   couvre deux saisons opposées — le froid (clim, ventilation) et le chaud
   (chauffage d'appoint, humidification). Le bleu porte l'univers, l'ambre
   signale les sections « saison froide » sans casser l'identité.
   ========================================================================== */

:root {
    /* ── Accent principal : Bleu ciel (le thème base fait --primary: var(--pink)) */
    --pink:      #0EA5E9;
    --pink-dk:   #0284C7;
    --pink-lt:   rgba(14, 165, 233, 0.12);

    /* ── Secondaire : Bleu nuit glacé (prix, accents forts) */
    --purple:    #0C3B5E;
    --purple-dk: #082B45;

    /* ── Mises en avant : ambre (saison froide, encarts) ── */
    --gold:      #F0B429;
    --gold-bg:   rgba(240, 180, 41, 0.18);

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

    /* ── Neutres ── */
    --bg:          #F4FAFD;
    --surface:     #FFFFFF;
    --surface-2:   #E8F4FB;   /* givre — fonds doux, hovers */
    --surface-3:   #CFE9F7;   /* azur pâle — bordures de halo */
    --border:      #DCEAF3;
    --text:        #3A4B58;   /* texte courant */
    --text-strong: #0C3B5E;   /* bleu nuit — titres */
    --muted:       #6B8090;

    /* ── Triplets RGB consommés par le socle commun (ombres, dégradés) ── */
    --accent-rgb:  14, 165, 233;   /* Bleu ciel */
    --shadow-rgb:  12, 59, 94;     /* Bleu nuit glacé */

    /* ── Propre à CapyAir ── */
    --sky:         #7DD3FC;        /* azur clair — wordmark « Air », décor */
    --frost:       #F0F9FF;        /* bandeaux éditoriaux, citations de Baru */
}

/* Wordmark : « Capy » bleu nuit + « Air » azur clair.
   Le socle met « lw-b » à var(--pink) ; sur fond blanc l'azur clair manquerait
   de contraste pour du texte de logo à 28 px — on garde donc le bleu ciel
   plein et on réserve --sky au décor. */
.logo-word .lw-b { color: var(--pink); }

/* ============================================================================
   Bandeaux éditoriaux sur fond givre — la respiration de l'identité,
   utilisée pour le chapô de Baru et les encarts de citation.
   ========================================================================== */
.cp-intro {
    background: var(--frost);
    border-color: #D8EDFA;
}

/* ============================================================================
   SÉLECTEUR DE PUISSANCE (BTU ⇄ m²) — le composant signature de CapyAir.

   Il vit sous la barre de recherche du hero. Le pari éditorial du site tient
   dans ce bloc : le visiteur ne sait pas ce qu'est un BTU, mais il connaît la
   surface de sa pièce. On fait la traduction, et on l'envoie directement sur
   les modèles de la bonne puissance.

   Propre à ce thème (pas dans theme-capy-base) : aucun autre vertical de la
   famille n'a de grandeur d'entrée équivalente.
   ========================================================================== */
.cp-btu {
    max-width: 760px;
    margin: 22px auto 0;
    padding: 18px 20px 16px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: 0 6px 20px rgba(var(--shadow-rgb), 0.07);
    text-align: center;
}
.cp-btu__title {
    margin: 0;
    font-size: 1.05rem;
    color: var(--text-strong);
}
.cp-btu__hint {
    margin: 4px 0 14px;
    font-size: 0.86rem;
    color: var(--muted);
}

/* La réglette. `flex-wrap` plutôt qu'une grille : en dessous de 520 px les
   six paliers passent proprement sur deux lignes sans casser les proportions. */
.cp-btu__scale {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}
.cp-btu__step {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 84px;
    padding: 9px 12px;
    border: 1.5px solid var(--border);
    border-radius: 12px;
    background: var(--surface-2);
    color: var(--text);
    text-decoration: none;
    line-height: 1.15;
    transition: border-color .15s, background .15s, transform .15s;
}
.cp-btu__step:hover { border-color: var(--pink); transform: translateY(-1px); }
.cp-btu__step.is-on {
    background: var(--pink);
    border-color: var(--pink-dk);
    color: #fff;
    box-shadow: 0 4px 12px rgba(var(--accent-rgb), 0.35);
}
.cp-btu__n { font-weight: 800; font-size: 1.02rem; }
.cp-btu__u { font-size: 0.68rem; letter-spacing: .06em; opacity: .8; }

/* Le résultat. C'est LA réponse à la question posée : on lui donne le poids
   typographique d'un titre, pas d'une légende. */
.cp-btu__out { margin-top: 14px; }
.cp-btu__m2 {
    margin: 0;
    font-size: 1rem;
    color: var(--text);
}
.cp-btu__m2 strong {
    font-size: 1.32rem;
    color: var(--purple);
    white-space: nowrap;
}
.cp-btu__ex {
    margin: 2px 0 12px;
    font-size: 0.85rem;
    color: var(--muted);
}
.cp-btu__cta {
    display: inline-block;
    padding: 9px 20px;
    border-radius: 999px;
    background: var(--purple);
    color: #fff;
    font-weight: 700;
    font-size: 0.92rem;
    text-decoration: none;
    transition: background .15s;
}
.cp-btu__cta:hover { background: var(--purple-dk); }

/* La nuance qui évite l'achat raté : sur fond ambre, la couleur « saison
   froide » du thème, pour la distinguer du bleu de l'information neutre. */
.cp-btu__note {
    margin: 14px 0 0;
    padding: 8px 12px;
    background: var(--gold-bg);
    border-radius: 10px;
    font-size: 0.8rem;
    color: var(--text);
    text-align: left;
}

/* ── Rappel du filtre actif sur la page de rayon (public/type.php) ───────── */
.cp-btu-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-btu-active__tag {
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--pink);
    color: #fff;
    font-weight: 800;
    font-size: 0.82rem;
    white-space: nowrap;
}
.cp-btu-active__txt { font-size: 0.9rem; color: var(--text); }
.cp-btu-active__off {
    margin-left: auto;
    font-size: 0.82rem;
    color: var(--muted);
    text-decoration: none;
    border-bottom: 1px dotted var(--muted);
}
.cp-btu-active__off:hover { color: var(--pink-dk); border-color: var(--pink-dk); }
.cp-btu-active__empty {
    margin: 0 0 18px;
    padding: 14px 16px;
    background: var(--gold-bg);
    border-radius: 12px;
    font-size: 0.9rem;
}

@media (max-width: 560px) {
    .cp-btu { padding: 14px 12px; border-radius: 14px; }
    .cp-btu__step { min-width: 72px; padding: 8px 9px; }
    .cp-btu__n { font-size: 0.94rem; }
    .cp-btu__m2 strong { font-size: 1.18rem; }
    .cp-btu-active__off { margin-left: 0; }
}