/* =============================================================
   Direction C · Famille et chantier
   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 chaleur. Crème sableux, encre brune, angles
   adoucis, cartes blanches posées sur le fond plutôt qu'enfermées
   dans des filets. Le jaune ne sert qu'aux appels à l'action.
   ============================================================= */

:root {
    /* Fonds et encres */
    --fond: #f4f1ea;
    --fond-alt: #ffffff;
    --encre: #221f1a;
    --encre-doux: #4d4840;
    --encre-faible: #6e6860;
    --filet: #d8d2c5;
    --carte: #ffffff;
    --carte-alt: #f4f1ea;
    --bordure-bouton: #221f1a;

    /* Bande de contraste : le brun profond, pour les appels à l'action. */
    --appui-fond: #221f1a;
    --appui-encre: #f4f1ea;
    --appui-doux: rgba(244, 241, 234, 0.82);
    --appui-faible: rgba(244, 241, 234, 0.64);
    --appui-filet: rgba(244, 241, 234, 0.2);
    --appui-carte: #2c2924;
    --appui-accent: #fdd003;
    --appui-bordure-bouton: rgba(244, 241, 234, 0.42);

    /* Accent */
    --accent: #fdd003;
    --accent-vif: #ffdd35;
    --accent-encre: #221f1a;
    --accent-lisible: #4d4840;

    /* En-tête */
    --entete-fond: #f4f1ea;
    --entete-encre: #221f1a;
    --entete-encre-doux: #4d4840;
    --entete-faible: #6e6860;
    --entete-filet: #d8d2c5;
    --entete-actif: #221f1a;

    /* Hero */
    --hero-fond: #f4f1ea;
    --hero-encre: #221f1a;
    --hero-doux: #4d4840;
    --hero-faible: #6e6860;
    --hero-filet: #d8d2c5;
    --hero-accent: #4d4840;
    --hero-carte: #ffffff;
    --hero-bordure-bouton: #221f1a;

    /* Pied */
    --pied-fond: #f4f1ea;
    --pied-encre: #221f1a;
    --pied-doux: #4d4840;
    --pied-faible: #6e6860;
    --pied-filet: #d8d2c5;

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

    /* Angles adoucis : la signature de cette direction. */
    --rayon: 0.6rem;
    --rayon-pilule: 999px;
    --rayon-carte: 0.8rem;
}

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

/* 1. Les cartes sont des blocs blancs posés sur le crème, sans filet
      apparent : c'est le contraste des fonds qui les détache. */
.theme-c .carte,
.theme-c .carte-billet,
.theme-c .panneau {
    border-color: transparent;
    box-shadow: 0 0.2rem 1.2rem rgba(34, 31, 26, 0.06);
}

.theme-c a.carte:hover,
.theme-c a.carte:focus-visible {
    border-color: transparent;
    box-shadow: 0 0.4rem 2rem rgba(34, 31, 26, 0.12);
}

/* 2. Les grilles filaires gardent leur filet, mais les cellules
      s'arrondissent aux quatre coins de la grille. */
.theme-c .grille-filaire,
.theme-c .questions,
.theme-c .etapes,
.theme-c .tableau-enveloppe {
    border-radius: var(--rayon-carte);
    overflow: hidden;
}

/* 3. Le chapô d'accueil se compose en serif : c'est une voix, pas une
      fiche produit. */
.theme-c .hero-titre {
    font-size: clamp(3.4rem, 7.4vw, 5.6rem);
}

.theme-c .hero .chapo {
    font-family: var(--police-titre);
    font-size: clamp(1.9rem, 3.2vw, 2.4rem);
    line-height: 1.4;
    color: var(--hero-encre);
}

/* 4. L'appel flottant et les boutons sont des pilules ; la navigation
      mobile suit le même arrondi. */
.theme-c .nav-mobile-liste a {
    border-radius: var(--rayon);
}

/* 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;
    }
}