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

   Le parti : l'atelier, donc l'encre. Fond sombre continu, jaune
   de signalisation en accent, angles vifs, filets fins. Le crème
   ne sert qu'aux bandes de respiration.
   ============================================================= */

:root {
    /* Fonds et encres */
    --fond: #15171a;
    --fond-alt: #1a1d21;
    --encre: #f4f2ee;
    --encre-doux: rgba(244, 242, 238, 0.78);
    --encre-faible: rgba(244, 242, 238, 0.58);
    --filet: rgba(244, 242, 238, 0.14);
    --carte: #15171a;
    --carte-alt: #1a1d21;
    --bordure-bouton: rgba(244, 242, 238, 0.38);

    /* Bande de contraste : le crème de la charte, en respiration. */
    --appui-fond: #f4f2ee;
    --appui-encre: #1a1a1a;
    --appui-doux: rgba(26, 26, 26, 0.78);
    --appui-faible: rgba(26, 26, 26, 0.62);
    --appui-filet: rgba(26, 26, 26, 0.16);
    --appui-carte: #f4f2ee;
    --appui-accent: #6f5602;
    --appui-bordure-bouton: rgba(26, 26, 26, 0.38);

    /* Accent */
    --accent: #fdd003;
    --accent-vif: #ffdd35;
    --accent-encre: #15171a;
    --accent-lisible: #fdd003;

    /* En-tête */
    --entete-fond: #15171a;
    --entete-encre: #f4f2ee;
    --entete-encre-doux: rgba(244, 242, 238, 0.8);
    --entete-faible: rgba(244, 242, 238, 0.5);
    --entete-filet: rgba(244, 242, 238, 0.14);
    --entete-actif: #fdd003;

    /* Hero */
    --hero-fond: #15171a;
    --hero-encre: #f4f2ee;
    --hero-doux: rgba(244, 242, 238, 0.78);
    --hero-faible: rgba(244, 242, 238, 0.55);
    --hero-filet: rgba(244, 242, 238, 0.14);
    --hero-accent: #fdd003;
    --hero-carte: #1a1d21;
    --hero-bordure-bouton: rgba(244, 242, 238, 0.38);

    /* Pied */
    --pied-fond: #101214;
    --pied-encre: #f4f2ee;
    --pied-doux: rgba(244, 242, 238, 0.72);
    --pied-faible: rgba(244, 242, 238, 0.5);
    --pied-filet: rgba(244, 242, 238, 0.12);

    /* Plaque du logo : inutile ici, le logo est déjà clair sur fond sombre. */
    --plaque-fond: transparent;
    --plaque-marge: 0;
}

/* --- Écarts de mise en page ------------------------------------
   Trois seulement, tout le reste vient de base.css.             */

/* 1. Le titre d'accueil se pose en deux lignes pleines, à la manière
      d'une enseigne d'atelier. */
.theme-a .hero-titre {
    font-size: clamp(4.2rem, 11vw, 8.4rem);
    line-height: 0.98;
}

/* 2. Le surtitre et les repères se composent en capitales étroites,
      comme un marquage de barre. */
.theme-a .surtitre {
    letter-spacing: 0.2em;
}

/* 3. Les bandes de contraste gardent le jaune sur les boutons, mais
      l'accent typographique s'assombrit pour rester lisible sur le
      crème. La règle est portée par la variable, pas par le HTML. */
.theme-a .section--appui .btn-accent {
    background-color: #15171a;
    color: #fdd003;
}

.theme-a .section--appui .btn-accent:hover,
.theme-a .section--appui .btn-accent:focus-visible {
    background-color: #24282d;
}