/* =================================================================
   GABARIT « Enseigne »
   =================================================================
   L'habillage de Fun & Food, réaligné sur son VRAI logo le 14/09.

   Il était construit sur un magenta #E6007E et des capitales condensées
   (Anton). Le logo du commerce, lui, est anthracite #212429 et rouge
   #F30441, en capitales géométriques larges. L'application ne
   ressemblait donc pas à l'enseigne qu'elle représente. Les couleurs
   ci-dessous sont RELEVÉES sur le fichier du logo, pas choisies :
   #F30441 est la moyenne des 5 320 pixels rouges, #212429 celle des
   22 634 pixels sombres, #E6E6E6 son fond.

   Outfit n'est PAS la police du logo, qui n'est pas identifiée. C'est la
   plus proche parmi celles comparées côte à côte sur le même mot
   (Poppins, Montserrat, Urbanist, Lexend, Figtree, Sora, Red Hat
   Display) : O ronds, & compact, empattements nuls.

   Ce fichier ne contient QUE des valeurs. La structure vit dans
   `habillage-socle.css`, qui est chargé avant lui sur toutes les
   surfaces client.

   CONTRASTES MESURÉS, pas estimés :
     blanc sur le rouge d'action #D60339 ......... 5,34
     rouge texte #C80335 sur blanc ............... 5,97
     rouge texte #C80335 sur le fond #F1F1EF ..... 5,27
     encre #212429 sur le fond ................... 13,76
     tertiaire #62656B sur #E6E6E6 ............... 4,68
     rouge clair #FF6680 sur le fond sombre ...... 6,65

     LE ROUGE EXACT DU LOGO NE PORTE PAS DE TEXTE. Blanc sur #F30441
     donne 4,28 et #F30441 sur le fond 3,79 : sous le seuil dans les deux
     sens. Il reste la couleur de la MARQUE (`--h-marque`), et les deux
     rouges qui portent du texte en sont des versions assombries.
   ================================================================= */

@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@600;700;800&display=swap");

:root {
  --h-titrage:   "Outfit", "Archivo", system-ui, sans-serif;
  --h-corps:     var(--interface);
  /* Pas d'écriture manuscrite : le logo n'en a pas. */
  --h-signature: var(--h-titrage);
  --h-titre-graisse: 800;
  --h-titre-casse:   uppercase;
  --h-titre-lettre:  -.005em;

  /* LES BOUTONS EN ARCHIVO, PAS EN POLICE D'AFFICHE. Anton n'existait
     qu'en graisse 400 et les boutons la demandaient en 800 : le
     navigateur fabriquait un faux gras qui bavait. Une action se lit, elle
     ne s'affiche pas. */
  --h-bouton:         var(--h-corps);
  --h-bouton-graisse: 700;
  /* Les prix en chiffres tabulaires de la police du texte. La machine à
     écrire de la charte sert au back-office, pas à une carte de sandwichs. */
  --h-chiffres:       var(--h-corps);
  /* Et les libellés (« PRÉNOM », « COMPOSITION », « OBLIGATOIRE ») aussi :
     la charte les pose en IBM Plex Mono, qui reste au back-office. */
  --donnee:           var(--interface);

  /* Outfit est large : sous 720 px, les tailles calibrées pour une police
     condensée coupaient le titre en deux et les noms en trois lignes. */
  --h-titre-etroit: 24px;
  --h-nom-etroit:   19px;

  --fond:      #F1F1EF;
  --surface:   #FFFFFF;
  --surface-2: #E6E6E6;
  --texte:           #212429;
  --texte-doux:      #4A4D53;
  --texte-tertiaire: #62656B;
  --ligne:       #DCDCD9;
  --ligne-forte: #C2C3C0;

  --h-marque:       #F30441;
  --h-accent:       #D60339;
  --h-accent-encre: #FFFFFF;
  --h-accent-fonce: #C80335;
  --h-accent-fond:  #FFEEF1;
  --h-accent-bord:  #F5C0CB;
  --h-second:       #C80335;

  /* Le logo est anthracite sur fond clair. En mode sombre, sa tuile reste
     BLANCHE : sans elle, les lettres du logo disparaissent dans le fond. */
  --h-logo-fond: #FFFFFF;

  --h-photo-fond:     #16181C;
  --h-photo-texte:    #FFFFFF;
  --h-photo-doux:     #D6D7D9;
  --h-photo-bandeau:  rgba(22, 24, 28, .90);
  --h-hero: linear-gradient(180deg, rgba(22,24,28,.30) 0%, rgba(22,24,28,.10) 30%,
            rgba(22,24,28,.74) 62%, rgba(22,24,28,.95) 100%),
            url("habillage/hero-baguette.jpg");

  --h-r-sm: 8px; --h-r-md: 12px; --h-r-lg: 16px;
  --h-ombre: 0 16px 30px -22px rgba(33, 36, 41, .45);
  --h-densite: 1;
}

/* LE MODE SOMBRE DU TÉLÉPHONE.
   La charte bascule le fond et l'encre, mais pas les jetons `--h-*`, qui
   n'existent qu'ici. Le rouge texte restait donc #C80335 sur un fond
   presque noir : 3,13. Mesuré sur l'ancien magenta en production
   (3,08, et 2,86 sur l'onglet actif), d'où ce bloc.

   Même sélecteur que la charte, pour la même spécificité ; ce fichier est
   chargé après elle, donc il gagne. Le contrôle des gabarits saute les
   blocs `prefers-color-scheme` : ces valeurs ont été mesurées à la main. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="clair"]) {
    --h-accent-fonce: #FF6680;
    --h-second:       #FF6680;
    --h-accent-fond:  #3A1419;
    --h-accent-bord:  #6B2330;
  }
}