/* =================================================================
   LE SOCLE DES HABILLAGES
   =================================================================
   Ce fichier porte la STRUCTURE des surfaces client. Il ne contient
   aucune couleur, aucune police, aucune valeur de marque : rien que
   des variables que le gabarit choisi doit remplir.

   POURQUOI IL EXISTE
   Deux habillages coexistaient, « Fun & Food » et « Atelier ». Compté
   avant d'écrire une ligne :

     54 sélecteurs communs sur 54
     43 % seulement portaient les mêmes propriétés
     155 divergences qui n'étaient NI une couleur NI une police

   Autrement dit : la fiche article était en `flex` dans l'un et en
   `grid` dans l'autre, le bouton faisait 58 px ici et 48 px là. Ces
   écarts n'étaient pas des décisions de design, c'était la trace de
   deux fichiers écrits à des moments différents. À cinq gabarits, ils
   auraient signifié cinq mises en page à maintenir, et chaque nouvelle
   fonctionnalité à habiller cinq fois. C'est comme ça qu'un système de
   design meurt.

   CE QUI VARIE, ET CE QUI NE VARIE PAS
   Le commerçant choisit une ALLURE, pas une architecture. Il choisit
   ses couleurs, ses polices, ses arrondis, sa densité. Il ne choisit
   pas si le prix est au-dessus ou en dessous du nom : cela relève du
   produit, et un client qui passe d'un magasin à l'autre doit
   retrouver ses repères.

   NE VARIENT JAMAIS, et c'est délibéré :
     — les cibles tactiles (`--cible-borne`, 56 px) ;
     — l'ordre et la place des informations ;
     — le fait qu'un allergène soit écrit, et où.

   LE CONTRAT
   Un gabarit DOIT définir les variables listées ci-dessous. Les
   valeurs de repli ne sont là que pour qu'un gabarit incomplet donne
   un écran lisible plutôt qu'un écran cassé ; `verifier-habillage.mjs`
   refuse un gabarit auquel il en manque une.
   ================================================================= */

:root {
  /* ---- Identité typographique ------------------------------- */
  --h-titrage:        var(--titrage);
  --h-corps:          var(--interface);
  --h-signature:      var(--h-titrage);
  --h-titre-graisse:  700;
  --h-titre-casse:    none;
  --h-titre-lettre:   0;

  /* ---- Accent ------------------------------------------------
     `--h-accent-encre` est ce qui s'écrit DESSUS l'accent. Ce n'est
     pas toujours du blanc : sur un ambre, le blanc mesure 2,19 et
     l'encre 6,12. C'est au gabarit de le savoir, pas au socle de le
     supposer. */
  --h-accent:        var(--signal);
  --h-accent-encre:  var(--signal-texte);
  --h-accent-fonce:  var(--signal-fonce);
  --h-accent-fond:   var(--signal-fond);
  --h-accent-bord:   var(--signal-bord);
  --h-second:        var(--valide);

  /* ---- Le registre sombre : écran d'attente et bandeau photo -- */
  --h-photo-fond:    #101010;
  --h-photo-texte:   #FFFFFF;
  --h-photo-doux:    #D8D2C8;
  --h-hero:          none;

  /* ---- Forme -------------------------------------------------- */
  --h-r-sm:       8px;
  --h-r-md:       14px;
  --h-r-lg:       20px;
  --h-r-pastille: 999px;
  --h-ombre:      0 18px 34px -22px rgba(0, 0, 0, .45);

  /* ---- Densité -----------------------------------------------
     Un seul curseur plutôt que trente réglages : il multiplie les
     marges intérieures de toutes les surfaces. Un gabarit serré vaut
     .85, un gabarit aéré 1.15. */
  --h-densite: 1;
}

body { font-family: var(--h-corps); }

/* ==========================================================================
   L'EN-TÊTE DE RUBRIQUE
   ========================================================================== */
.tete-commerce {
  flex: none;
  background: var(--fond);
  padding: calc(26px * var(--h-densite)) 26px calc(14px * var(--h-densite));
  display: flex; align-items: center; gap: 16px;
}
.tete-commerce .titres { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tete-commerce .surtitre {
  font-family: var(--h-corps);
  font-size: 13px; font-weight: 800;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--h-second); line-height: 1.2;
}
.tete-commerce h1,
.tete-commerce h2,
.tete-commerce .titre {
  font-family: var(--h-titrage);
  font-size: 46px; font-weight: var(--h-titre-graisse);
  color: var(--texte); line-height: 1; margin: 0;
  letter-spacing: var(--h-titre-lettre);
  text-transform: var(--h-titre-casse);
}
.tete-commerce .sous { font-size: 15px; color: var(--texte-doux); margin: 4px 0 0; }
.tete-commerce .espace { flex: 1; }

/* LA SIGNATURE DE LA MAISON.
   Une écriture manuscrite signe UNE fois. Ce sélecteur est le seul
   endroit du produit où `--h-signature` est employée : mise sur une
   liste, elle cesse de signer et se met à ralentir la lecture. */
.tete-commerce .maison {
  font-family: var(--h-signature);
  font-size: 30px; font-weight: 700;
  /* `--h-accent-fonce` et non `--h-accent` : l'accent est fait pour
     PORTER du texte, pas pour en etre. Le magenta #E6007E sur le fond
     clair de l'Enseigne mesure 3,98. Sa version foncee donne 6,07.
     Trouve par le controle, pas a l'oeil. */
  color: var(--h-accent-fonce); line-height: 1;
}

.tete-commerce .logo {
  width: 56px; height: 56px; flex: none;
  border-radius: var(--h-r-md); overflow: hidden;
  /* BLANC PAR DÉFAUT, même en mode sombre. Un logo est presque toujours
     dessiné pour un fond clair : posé sur la surface sombre, celui de
     Fun & Food (lettres anthracite) disparaissait dans sa tuile. */
  background: var(--h-logo-fond, #FFFFFF); border: 1px solid var(--ligne);
}
.tete-commerce .logo img { width: 100%; height: 100%; object-fit: contain; display: block; }
.tete-commerce .retour {
  width: 56px; height: 56px; flex: none;
  border-radius: var(--h-r-pastille);
  background: var(--surface); color: var(--h-accent-fonce);
  border: 1px solid var(--ligne); box-shadow: var(--h-ombre);
  font-size: 22px; display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.tete-commerce .retour:hover { background: var(--h-accent-fond); }

/* ==========================================================================
   L'ÉCRAN D'ATTENTE
   ==========================================================================
   Le seul écran du produit qui a le droit d'être sombre et plein
   cadre : on n'y lit rien et on n'y décide rien, c'est une annonce.
   Dès qu'il faut choisir un pain ou lire un allergène, le fond
   redevient clair.
   ========================================================================== */
.attente-commerce {
  position: absolute; inset: 0;
  background-color: var(--h-photo-fond);
  background-image: var(--h-hero);
  background-size: cover; background-position: center;
  display: flex; flex-direction: column; padding: 40px;
}
.attente-commerce .haut {
  display: flex; align-items: center; gap: 16px;
  background: var(--h-photo-bandeau, rgba(0, 0, 0, .82));
  border-radius: var(--h-r-md); padding: 14px 18px; margin: -8px -8px 0;
}
.attente-commerce .marque {
  font-family: var(--h-titrage); font-size: 40px;
  font-weight: var(--h-titre-graisse); color: var(--h-photo-texte);
  letter-spacing: var(--h-titre-lettre); text-transform: var(--h-titre-casse);
}
.attente-commerce .horaire {
  margin-left: auto; font-family: var(--h-corps);
  font-size: 14px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--h-photo-doux);
}
.attente-commerce .milieu { flex: 1; }
.attente-commerce .appel {
  font-family: var(--h-titrage);
  font-size: clamp(52px, 9vw, 104px);
  font-weight: var(--h-titre-graisse); color: var(--h-photo-texte);
  line-height: .98; margin: 0 0 22px;
  letter-spacing: var(--h-titre-lettre); text-transform: var(--h-titre-casse);
}
.attente-commerce .toucher {
  align-self: flex-start;
  background: var(--h-accent); color: var(--h-accent-encre);
  border: 0; border-radius: var(--h-r-pastille);
  padding: 0 44px; font-family: var(--h-corps);
  font-weight: 800; font-size: 26px; letter-spacing: .01em;
  min-height: var(--cible-borne); cursor: pointer;
}
.attente-commerce .mention {
  padding-top: 18px; font-size: 16px; line-height: 1.45;
  color: var(--h-photo-doux); max-width: 42ch; margin: 0;
}

/* ==========================================================================
   LES PASTILLES DE FILTRE
   ========================================================================== */
.filtres-commerce {
  flex: none; display: flex; gap: 10px; flex-wrap: wrap;
  padding: 10px 24px 6px;
}
.filtres-commerce button {
  border-radius: var(--h-r-pastille);
  padding: 12px 22px; min-height: var(--cible-borne);
  font-family: var(--h-corps); font-size: 16px; font-weight: 700;
  background: var(--surface); color: var(--texte);
  border: 1.5px solid var(--ligne); cursor: pointer;
}
.filtres-commerce button[aria-pressed="true"] {
  background: var(--h-accent); color: var(--h-accent-encre);
  border-color: var(--h-accent);
}

/* ==========================================================================
   LA LISTE DES ARTICLES
   ========================================================================== */
.articles-commerce {
  flex: 1; overflow: auto;
  padding: calc(12px * var(--h-densite)) 24px 24px;
  display: flex; flex-direction: column; gap: calc(12px * var(--h-densite));
}
.article-commerce {
  min-height: 84px; display: flex; align-items: center; gap: 14px;
  padding: calc(16px * var(--h-densite)) calc(18px * var(--h-densite));
  background: var(--surface); border: 1px solid var(--ligne);
  border-radius: var(--h-r-md); box-shadow: var(--h-ombre);
  width: 100%; text-align: left; cursor: pointer;
}
.article-commerce .infos { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.article-commerce .nom {
  font-family: var(--h-titrage); font-size: 27px;
  font-weight: var(--h-titre-graisse); color: var(--texte); line-height: 1.08;
  letter-spacing: var(--h-titre-lettre); text-transform: var(--h-titre-casse);
}
.article-commerce .sous { font-size: 14px; color: var(--texte-doux); line-height: 1.35; }
.article-commerce .espace { flex: none; }
.article-commerce .prix {
  font-family: var(--h-chiffres, var(--donnee)); font-size: 19px; font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--texte); white-space: nowrap;
}
.article-commerce .ajouter {
  min-width: 58px; min-height: 58px; flex: none;
  border-radius: var(--h-r-pastille);
  background: var(--h-accent); color: var(--h-accent-encre);
  border: 0; font-size: 26px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}
/* L'ARTICLE INDISPONIBLE RESTE LISIBLE.
   Un client doit pouvoir LIRE ce qui manque, sinon il le redemande au
   comptoir. D'ou deux corrections trouvees par le controle de contraste :

     texte tertiaire sur surface-2, Atelier ..... 4,36   refuse
                                    Cantine ..... 4,33   refuse
                                    Marche  ..... 4,11   refuse

   Le libelle passe donc en `--texte`, qui tient dans les cinq registres.

   Et l'opacite descend de .55 a .72. Attention : `verifier-gabarits.mjs`
   NE MODELISE PAS l'opacite, donc les valeurs qu'il rend ici sont
   meilleures que la realite. C'est la raison pour laquelle l'etat
   indisponible ne repose plus sur elle pour se lire : il se lit au fond
   du bouton et a son bord. */
.article-commerce[disabled] { opacity: .72; cursor: not-allowed; box-shadow: none; }
/* LES INGRÉDIENTS D'UN ARTICLE BLOQUÉ EN ENCRE PLEINE. Calculé en composant
   l'opacité avec le fond (14/09) : `--texte-doux` à .72 sur la carte donne
   4,10 en thème clair, sous le seuil, alors que le contrôle des gabarits
   le voit à 8,48 parce qu'il ignore l'opacité. En `--texte`, 6,38. */
.article-commerce[disabled] .sous { color: var(--texte); }
.article-commerce[disabled] .ajouter {
  background: var(--surface-2); color: var(--texte);
  border: 1px solid var(--ligne-forte);
}

/* ==========================================================================
   LES RUBRIQUES
   ========================================================================== */
.cats-commerce {
  flex: 1; overflow: auto; display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: calc(14px * var(--h-densite));
  padding: calc(14px * var(--h-densite)) 24px 24px;
  align-content: start;
}
.cat-commerce {
  background: var(--surface); border: 1px solid var(--ligne);
  border-radius: var(--h-r-lg); box-shadow: var(--h-ombre);
  padding: calc(22px * var(--h-densite)) calc(24px * var(--h-densite));
  min-height: var(--cible-borne);
  text-align: left; cursor: pointer;
  display: flex; flex-direction: column; gap: 6px;
}
.cat-commerce:hover { border-color: var(--h-accent); }
.cat-commerce .nom {
  font-family: var(--h-titrage); font-size: 34px;
  font-weight: var(--h-titre-graisse); color: var(--texte); line-height: 1;
  text-transform: var(--h-titre-casse); letter-spacing: var(--h-titre-lettre);
}
.cat-commerce .sous { font-size: 15px; color: var(--texte-doux); line-height: 1.35; }

/* LE PRIX D'APPEL EST UN ARGUMENT, PAS UNE NOTE DE BAS DE PAGE.
   Personne n'entre dans une rubrique parce qu'elle contient 37
   articles : on y entre pour le prix d'appel. */
.cat-commerce .compte {
  margin-top: auto; padding-top: 14px;
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  font-family: var(--donnee); font-size: 13px; color: var(--texte-tertiaire);
}
.cat-commerce .compte .des {
  font-family: var(--h-titrage); font-size: 22px; letter-spacing: .01em;
  background: var(--h-accent); color: var(--h-accent-encre);
  border-radius: var(--h-r-pastille); padding: 4px 14px;
}

/* ==========================================================================
   LE SUPPLÉMENT À L'ÉTAPE — la seule chose de la fiche qui rapporte
   La pastille se pose sur la ligne de l'ingrédient qu'elle double. Même
   cible tactile que le reste de la borne, couleur du commerce quand elle
   est cochée.
   ========================================================================== */
.plus-etape {
  display: inline-flex; align-items: center; gap: 10px; flex: none;
  border-radius: var(--h-r-pastille); padding: 8px 16px;
  min-height: 44px;
  background: var(--surface); border: 1.5px solid var(--h-accent-bord);
  color: var(--texte); font-family: var(--h-corps);
  font-size: 15px; font-weight: 700; cursor: pointer; white-space: nowrap;
}
.plus-etape .prix {
  font-family: var(--h-chiffres, var(--donnee)); font-size: 14px; font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--h-accent-fonce);
}
.plus-etape[aria-pressed="true"] {
  background: var(--h-accent); color: var(--h-accent-encre);
  border-color: var(--h-accent);
}
.plus-etape[aria-pressed="true"] .prix { color: var(--h-accent-encre); }

/* ==========================================================================
   LES ALLERGÈNES
   ==========================================================================
   Ils ne prennent JAMAIS la couleur du gabarit. Un allergène se lit
   pareil dans les cinq registres, parce que c'est la seule information
   de cet écran dont dépend la santé de quelqu'un.
   ========================================================================== */
.alg-commerce { display: flex; gap: 6px; flex-wrap: wrap; }
.alg-commerce span {
  border-radius: var(--h-r-sm);
  background: var(--alerte-fond); border: 1px solid var(--alerte-bord);
  color: var(--alerte-texte-fonce);
  font-family: var(--h-corps); font-size: 13px; font-weight: 800;
  padding: 4px 9px; text-transform: uppercase; letter-spacing: .04em;
}

/* ==========================================================================
   LE BANDEAU PHOTO DE LA FICHE PRODUIT
   ========================================================================== */
.photo-commerce {
  position: relative;
  /* LE FOND SOUS LA PHOTO EST SOMBRE, et ce n'est pas un detail de gout.
     Le nom et le prix s'ecrivent en clair PAR-DESSUS la photo. Quand la
     photo ne charge pas (reseau du magasin, image absente), ils se
     retrouvaient sur `--surface-2` : blanc sur gris clair, 1,24. Le
     repli doit rester lisible, donc il est sombre comme la photo. */
  background: var(--h-photo-fond);
  /* L'IMAGE COUVRE, ELLE NE SE CARRELLE PAS. L'app pose l'image en
     `style.backgroundImage` ; sans taille ni répétition, le visuel de
     295 px se répétait trois fois côte à côte sur un écran de 1440 px. */
  background-size: cover; background-position: center 55%;
  background-repeat: no-repeat;
  border-radius: var(--h-r-lg); overflow: hidden; margin: 12px 24px 0;
}
.photo-commerce .voile {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, .30) 0%, rgba(0, 0, 0, 0) 60%);
}
.photo-commerce .dessus {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 18px 20px; display: flex; align-items: flex-end; gap: 14px;
}
.photo-commerce .nom {
  font-family: var(--h-titrage); font-size: 40px;
  font-weight: var(--h-titre-graisse); color: var(--h-photo-texte); line-height: 1;
  letter-spacing: var(--h-titre-lettre); text-transform: var(--h-titre-casse);
  text-shadow: 0 2px 14px rgba(0, 0, 0, .85);
}
.photo-commerce .prix {
  margin-left: auto; font-family: var(--h-chiffres, var(--donnee));
  font-variant-numeric: tabular-nums;
  font-size: 22px; font-weight: 700; color: var(--h-photo-texte);
  text-shadow: 0 2px 14px rgba(0, 0, 0, .85);
}
.photo-commerce .retour {
  position: absolute; top: 14px; left: 14px;
  width: 44px; height: 44px; border-radius: var(--h-r-pastille);
  background: var(--h-photo-texte); color: var(--h-photo-fond);
  border: 0; display: flex; align-items: center; justify-content: center;
  font-size: 20px; cursor: pointer; box-shadow: 0 4px 14px rgba(0, 0, 0, .3);
}

/* ==========================================================================
   L'ÉTROIT
   ==========================================================================
   Sous 720 px, la fiche article passe en grille : en `flex`, le nom,
   le prix et le bouton se disputaient une ligne de 360 px et le nom
   se coupait au milieu d'un mot.
   ========================================================================== */
@media (max-width: 720px) {
  .tete-commerce { padding: 18px 20px 10px; gap: 12px; }
  /* Tailles en jetons : une police d'affiche LARGE (Outfit chez Fun & Food)
     coupait « QUE MANGEZ- / VOUS ? » à la taille calibrée pour Anton. */
  .tete-commerce h1, .tete-commerce h2, .tete-commerce .titre { font-size: var(--h-titre-etroit, 36px); }
  .tete-commerce .logo, .tete-commerce .retour { width: 46px; height: 46px; }

  .attente-commerce { padding: 24px; }
  .attente-commerce .haut { padding: 12px 14px; gap: 10px; }
  .attente-commerce .marque { font-size: 30px; line-height: 1.05; }
  .attente-commerce .horaire { font-size: 12px; white-space: nowrap; letter-spacing: .08em; }
  .attente-commerce .toucher { padding: 0 28px; font-size: 21px; }
  .attente-commerce .mention { font-size: 15px; }

  .filtres-commerce { padding: 10px 16px 4px; gap: 8px; }
  .filtres-commerce button { padding: 10px 18px; min-height: var(--cible-mini); font-size: 15px; }

  .articles-commerce { padding: 10px 16px 16px; gap: 10px; }
  .article-commerce {
    min-height: 72px; padding: 13px 14px; gap: 4px 12px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "vignette infos bouton" "vignette prix bouton";
    align-items: center;
  }
  .article-commerce .vignette { grid-area: vignette; }
  .article-commerce .infos { grid-area: infos; align-self: end; }
  .article-commerce .prix { grid-area: prix; align-self: start; font-size: 17px; }
  .article-commerce .ajouter { grid-area: bouton; min-width: 48px; min-height: 48px; font-size: 22px; }
  .article-commerce .espace { display: none; }
  .article-commerce .nom { font-size: var(--h-nom-etroit, 22px); }

  .cats-commerce { padding: 12px 16px 16px; }
  .cat-commerce { padding: 18px 20px; }
  .cat-commerce .nom { font-size: 26px; }

  .photo-commerce { margin: 10px 16px 0; }
  .photo-commerce .nom { font-size: 32px; }
}