/* =============================================================================
   Feuille de styles spécifique du site drimmer
   permet d'adapter la feuille de style par défaut site.css

   Chargée en dernier, après tokens-drimmer.css et site.css. Ne doit porter
   que ce qu'un jeton ne peut pas dire : les écarts de forme, pas de valeur.
   Toute couleur, toute taille passe encore par une variable.
   ============================================================================= */

/* --- Titres en capitales ----------------------------------------------------
   Le site de production titre ainsi : « DESIGN "HAUTE COUTURE" », « A
   L'AVANT-GARDE DE LA CREATION ». La géométrique est faite pour ça — ses
   capitales sont larges et d'égale épaisseur, elles ne s'effondrent pas.
   Réservé aux titres COURTS : slogan du carrousel, nom de page, appel à
   l'action. Les phrases — signature de marque, chapô, accroche — restent en
   bas-de-casse, où elles se lisent. */
.page-title,
.hero__title,
.cta-band__title {
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 500;
}

/* À corps égal, une ligne de capitales occupe plus de masse qu'une ligne de
   bas-de-casse : on rend un cran de corps pour retrouver la même présence. */
.page-title  { font-size: clamp(28px, 3.8vw, 52px); }
.hero__title { font-size: clamp(26px, 2.9vw, 42px); }

/* --- Chiffres ---------------------------------------------------------------
   Les chiffres de la géométrique sont son autre point fort. Pleine graisse
   là où ils affichent, presque rien pour le numéro de planche en filigrane. */
.fact__value        { font-weight: 500; }
.type-group__number { font-weight: 300; }

/* --- Contraste du survol de marque ------------------------------------------
   La couleur de marque vient du catalogue, elle n'a pas été choisie pour
   porter du texte : blanc sur sauge ne donne que 2,5:1. Sur une page marque,
   le survol du bouton principal passe donc au texte encre — 7,2:1. */
.theme-drimmer .btn--primary:hover { color: var(--c-ink); }

/* --- Signature : le filet de laiton -----------------------------------------
   Un trait court au-dessus des sur-titres de section, comme la pièce de métal
   au pied d'un luminaire. Réservé aux sur-titres réellement en tête de
   section : .section__heading coiffe aussi un bandeau d'appel (home.php), qui
   ne porte pas .overline et n'hérite donc de rien. */
.overline.section__heading::before {
  content: "";
  display: block;
  width: 44px;
  border-top: 2px solid var(--c-accent);
  margin-bottom: var(--s-3);
}

/* Sur fond sombre, le laiton patiné s'éteint : le filet reprend la sauge,
   celle qui sert déjà aux sur-titres du carrousel. */
.section--ink .overline.section__heading::before,
.site-footer .overline.section__heading::before {
  border-top-color: var(--c-on-ink-accent);
}

/* =============================================================================
   Chrome sombre
   -----------------------------------------------------------------------------
   Un fabricant de luminaires se montre sur fond noir : c'est ainsi qu'on
   photographie une lampe. Le site ne s'inverse pas pour autant — les planches
   produits et les textes longs restent sur fond clair, où ils se lisent. Seul
   le CADRE passe à l'encre : en-tête, carrousel, pied de page.

   Le pied de page l'était déjà (site.css : .site-footer), il n'y a rien ici.
   Reste l'en-tête, sur toutes les pages, et le carrousel, sur l'accueil.

   Aucune de ces règles ne change une valeur : elles échangent des jetons
   clairs contre les jetons « sur fond ink » déjà définis pour le pied de page.
   ============================================================================= */

/* --- Lien d'évitement -------------------------------------------------------
   Il apparaît au focus par-dessus l'en-tête. À l'encre sur un en-tête encre,
   il serait invisible au moment précis où il sert. */
.skip-link       { background: var(--c-on-ink); color: var(--c-ink); }
.skip-link:focus { color: var(--c-ink); }

/* --- En-tête ---------------------------------------------------------------- */
.site-header {
  background: var(--c-ink);
  border-bottom-color: var(--c-on-ink-rule);
}
.site-header__name b    { color: var(--c-on-ink); }
.site-header__name span { color: var(--c-on-ink-faint); }

.main-nav__link                            { color: var(--c-on-ink); }
.main-nav__link:hover                      { color: var(--c-on-ink-highlight); }
.main-nav__link[aria-current="page"]::after { background: var(--c-on-ink-highlight); }
.main-nav__external                        { color: var(--c-on-ink-faint); }

/* Le popover du Web shop s'inverse : encre sur encre ne se voit pas. */
.main-nav__note { background: var(--c-on-ink); color: var(--c-ink); }

.lang-switch__item          { color: var(--c-on-ink-faint); }
.lang-switch__item:hover    { color: var(--c-on-ink); }
.lang-switch__item--active  { color: var(--c-on-ink); }

/* Le bouton principal de l'en-tête ne peut plus être un aplat d'encre. */
.site-header .btn--primary        { background: var(--c-on-ink); color: var(--c-ink); }
.site-header .btn--primary:hover  { background: var(--c-on-ink-highlight); color: var(--c-ink); }

/* Le laiton ne donne que 3:1 sur l'encre : trop peu pour un anneau de focus,
   qui est la seule chose qu'un usager au clavier a pour se repérer. */
.site-header :focus-visible { outline-color: var(--c-on-ink-highlight); }

.site-header__burger {
  border-color: var(--c-on-ink-border);
  background: transparent;
  color: var(--c-on-ink);
}
.site-header__burger-icon span { background: var(--c-on-ink); }

.site-header__drawer  { border-top-color: var(--c-on-ink-rule); }
.drawer-nav__link     { border-bottom-color: var(--c-on-ink-rule); color: var(--c-on-ink); }
.drawer-nav__note     { color: var(--c-on-ink-faint); }

/* --- Carrousel --------------------------------------------------------------
   La bande entière passe à l'encre, contrôles compris, et le retrait qui la
   séparait de l'en-tête tombe : les deux ne font plus qu'un bloc sombre, du
   haut de la page jusqu'au bas des contrôles. Le panneau de texte était déjà
   à l'encre — il cesse d'être un panneau pour devenir la légende de l'image. */
.hero {
  background: var(--c-ink);
  padding-top: 0;
  padding-bottom: var(--s-5);
}

/* Fond d'attente pendant le chargement d'une image : un rectangle clair
   trouerait la bande. */
.hero__viewport { background: var(--c-on-ink-rule); }

.hero__nav        { border-color: var(--c-on-ink-border); background: transparent; color: var(--c-on-ink); }
.hero__nav:hover  { border-color: var(--c-on-ink); }
.hero__counter    { color: var(--c-on-ink-faint); }
.hero__autoplay   { color: var(--c-on-ink); }
.hero :focus-visible { outline-color: var(--c-on-ink-highlight); }