/* =============================================================
   Direction B · Fiche technique
   Chargée après base.css. Elle ne porte que les couleurs et les
   quelques écarts de mise en page propres à cette direction.

   Le parti : la fiche produit. Papier clair, filets partout, tout
   se lit comme un tableau. La seule couleur du site est le jaune
   du bouton d'appel ; l'accent typographique reste dans les gris
   chauds pour ne rien faire crier.
   ============================================================= */

:root {
    /* Fonds et encres */
    --fond: #ffffff;
    --fond-alt: #fbfaf7;
    --encre: #1c1c1a;
    --encre-doux: #4a4842;
    --encre-faible: #63615b;
    --filet: #dcd9d1;
    --carte: #ffffff;
    --carte-alt: #fbfaf7;
    --bordure-bouton: #1c1c1a;

    /* Bande de contraste : l'encre pleine, pour les appels à l'action. */
    --appui-fond: #1c1c1a;
    --appui-encre: #fbfaf7;
    --appui-doux: rgba(251, 250, 247, 0.8);
    --appui-faible: rgba(251, 250, 247, 0.62);
    --appui-filet: rgba(251, 250, 247, 0.2);
    --appui-carte: #24241f;
    --appui-accent: #fdd003;
    --appui-bordure-bouton: rgba(251, 250, 247, 0.42);

    /* Accent */
    --accent: #fdd003;
    --accent-vif: #ffdd35;
    --accent-encre: #1c1c1a;
    --accent-lisible: #4a4842;

    /* En-tête */
    --entete-fond: #ffffff;
    --entete-encre: #1c1c1a;
    --entete-encre-doux: #4a4842;
    --entete-faible: #63615b;
    --entete-filet: #dcd9d1;
    --entete-actif: #1c1c1a;

    /* Hero */
    --hero-fond: #fbfaf7;
    --hero-encre: #1c1c1a;
    --hero-doux: #4a4842;
    --hero-faible: #63615b;
    --hero-filet: #dcd9d1;
    --hero-accent: #4a4842;
    --hero-carte: #ffffff;
    --hero-bordure-bouton: #1c1c1a;

    /* Pied */
    --pied-fond: #fbfaf7;
    --pied-encre: #1c1c1a;
    --pied-doux: #4a4842;
    --pied-faible: #63615b;
    --pied-filet: #dcd9d1;

    /* Plaque du logo : le logo est blanc et jaune sur fond transparent,
       il disparaîtrait sur le papier. Une plaque d'encre le rétablit. */
    --plaque-fond: #1c1c1a;
    --plaque-marge: 0.9rem 1.4rem;
}

/* --- Écarts de mise en page ------------------------------------ */

/* 1. L'en-tête est symétrique : mention à gauche, marque au centre,
      appel à l'action à droite, puis la navigation sur sa propre ligne
      centrée. C'est la signature de cette direction. */
@media (min-width: 1024px) {
    .theme-b .entete-barre {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        align-items: center;
        gap: 2.4rem;
    }

    .theme-b .marque {
        grid-column: 2;
        grid-row: 1;
        flex-direction: column;
        gap: 0.8rem;
        justify-self: center;
        text-align: center;
    }

    .theme-b .entete-actions {
        grid-column: 3;
        grid-row: 1;
        justify-self: end;
    }

    .theme-b .nav {
        grid-column: 1 / -1;
        grid-row: 2;
        margin-top: 1.6rem;
        padding-top: 1.6rem;
        border-top: 1px solid var(--entete-filet);
    }

    .theme-b .entete-telephone {
        display: none;
    }

    /* La navigation occupe sa propre ligne pleine largeur : elle peut donc
       respirer davantage que dans les deux autres directions. */
    .theme-b .nav-liste {
        gap: 0.6rem 3rem;
        font-size: 1.5rem;
    }
}

/* 2. Tout est encadré : les cartes se collent en une seule grille filaire
      plutôt que de flotter en blocs séparés. */
.theme-b .grille-cartes {
    gap: 1px;
    background-color: var(--sec-filet);
    border: 1px solid var(--sec-filet);
}

.theme-b .carte,
.theme-b .carte-billet {
    border: 0;
}

/* 3. Les titres de section restent courts et serrés : la fiche technique
      ne fait pas d'effet d'affiche. */
.theme-b .hero-titre {
    font-size: clamp(3.2rem, 6.4vw, 5.6rem);
    line-height: 1.05;
}

/* 4. Le tableau de gamme est le motif central de cette direction : on lui
      donne une ligne alternée pour qu'il se lise à la volée. */
.theme-b .tableau tbody tr:nth-child(even) th,
.theme-b .tableau tbody tr:nth-child(even) td {
    background-color: #fbfaf7;
}

/* La plaque ajoute son propre encombrement : le logo y tient un peu moins de
   place que sur le fond sombre de la direction A, pour laisser la navigation
   respirer sur la même ligne. */
@media (min-width: 1024px) {
    .marque-plaque .marque-logo {
        width: 15rem;
    }
}