/* ============================================================
   FPRO - pack boulangerie : ses rubriques a lui.

   Le parti pris tient en une phrase : personne ne choisit sa boulangerie
   sur internet. On y va parce qu'elle est sur le chemin. Un site de
   boulangerie ne sert donc pas a convaincre, il sert a renseigner, et
   dans un ordre tres precis : est-ce ouvert, qu'est-ce qui se commande
   et pour quand, et le pain est-il vraiment fait ici.

   D'ou trois formes propres a ce pack :
   - les horaires en haut de page, avec les heures de fournee a cote.
     Aucun site de boulangerie ne dit a quelle heure le pain sort, et
     c'est pourtant ce que tout le monde aimerait savoir.
   - la liste des pains, ou trois appellations portent leur definition
     legale dans un encadre. Le boulanger honnete y gagne sans avoir a
     critiquer personne : il lui suffit d'etre precis.
   - le tableau des commandes, ou le delai est la premiere chose lue.

   Rappel valable pour tout pack : les regles qui eclaircissent le texte
   sont prefixees html[data-direction="1"]. En directions 2 et 3, une
   rubrique en pleine couleur est posee sur un fond CLAIR.
   ============================================================ */

/* --- les horaires ---------------------------------------------------------
   Le tableau a gauche, les fournees et l'adresse a droite. C'est la seule
   rubrique de tous les packs ou le tableau des heures monte aussi haut : ici
   il est le contenu principal, pas une annexe de bas de page.
   -------------------------------------------------------------------------- */

.ouverture__in { display: grid; gap: 32px; align-items: start; }
@media (min-width: 940px) { .ouverture__in { grid-template-columns: 1.05fr .95fr; gap: 56px; } }

.ouverture__note { margin: 18px 0 0; font-size: .96rem; color: var(--encre-2); }
html[data-direction="1"] .section--accent .ouverture__note { color: color-mix(in srgb, var(--encre-contraste) 84%, transparent); }

.ouverture__cote { display: grid; gap: 28px; }

.fournees {
  padding: 24px 26px;
  background: var(--fond-2);
  border-radius: var(--r-carte, 14px);
}
html[data-direction="1"] .section--accent .fournees { background: color-mix(in srgb, var(--encre-contraste) 8%, transparent); }
.fournees h3 { font-size: .88rem; letter-spacing: .07em; text-transform: uppercase; color: var(--encre-2); margin-bottom: .8em; }
html[data-direction="1"] .section--accent .fournees h3 { color: color-mix(in srgb, var(--encre-contraste) 72%, transparent); }
.fournees__liste { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.fournees__liste li {
  padding: 9px 17px;
  border-radius: 999px;
  background: var(--accent); color: var(--accent-contraste);
  font-family: var(--titres);
  font-size: 1.02rem; line-height: 1;
  white-space: nowrap;
}
html[data-direction="1"] .section--accent .fournees__liste li { background: var(--encre-contraste); color: var(--accent-fonce); }
.fournees p { margin: 0; }

.lieu__acces { list-style: none; margin: 14px 0; padding: 0; display: grid; gap: 10px; }
.lieu__acces li { font-size: .94rem; color: var(--encre-2); }
.lieu__acces b { display: block; font-size: .8rem; letter-spacing: .07em; text-transform: uppercase; margin-bottom: 2px; }
/* Attention, piege deja rencontre avec .lieu .mention : la carte d'adresse .lieu
   est peinte sur l'accent en direction 1 QUELLE QUE SOIT la rubrique qui la
   porte. Elle n'a pas besoin d'etre dans une rubrique .section--accent pour
   basculer sur fond sombre. Une regle scoped .section--accent ne l'atteint donc
   pas, et le texte restait a 1,10 pour 1, c'est-a-dire illisible. Tout ce qui vit
   dans .lieu se corrige sur .lieu, jamais sur la rubrique. */
html[data-direction="1"] .lieu__acces li { color: color-mix(in srgb, var(--encre-contraste) 92%, transparent); }
/* 80 % d'opacite sur l'accent donne 4,39 pour 1, exactement le chiffre deja
   mesure sur .lieu .mention : c'est la valeur qui frole le seuil sans l'atteindre.
   Un intitule de deux mots en petites capitales n'a aucune raison d'etre attenue,
   il passe en blanc plein. */
html[data-direction="1"] .lieu__acces b  { color: var(--encre-contraste); }

/* --- les pains ------------------------------------------------------------
   Une liste en deux ou trois colonnes. Les trois appellations definies par
   decret portent un encadre en retrait, marque d'un filet : c'est la seule
   chose de la page qui ressemble a une citation, et c'en est une.
   -------------------------------------------------------------------------- */

.pains__liste { list-style: none; margin: 40px 0 0; padding: 0; display: grid; gap: 28px; }
@media (min-width: 700px)  { .pains__liste { grid-template-columns: 1fr 1fr; gap: 32px 44px; } }
@media (min-width: 1140px) { .pains__liste { grid-template-columns: repeat(3, 1fr); gap: 40px 48px; } }

/* La carte est une colonne flexible et l'encadre d'appellation est pousse en bas :
   les phrases n'ont pas la meme longueur, et sans cela les encadres flottaient a
   trois hauteurs differentes sur une meme ligne. Aligner ce qui se compare vaut
   mieux que suivre le texte. L'ecart au-dessus de l'encadre est porte par la marge
   basse de la phrase, sinon « margin-top: auto » le ferait disparaitre. */
.pain { padding-top: 16px; border-top: 2px solid var(--accent); display: flex; flex-direction: column; }
html[data-direction="1"] .section--accent .pain { border-top-color: var(--encre-contraste); }
.pain h3 { font-size: 1.08rem; margin-bottom: .35em; overflow-wrap: anywhere; }
.pain__phrase { margin: 0 0 16px; font-size: .95rem; color: var(--encre-2); }
html[data-direction="1"] .section--accent .pain__phrase { color: color-mix(in srgb, var(--encre-contraste) 84%, transparent); }

.pain__appellation {
  margin-top: auto;
  padding: 14px 16px;
  border-left: 3px solid var(--accent);
  background: var(--fond-2);
  border-radius: 0 var(--r-carte, 14px) var(--r-carte, 14px) 0;
}
html[data-direction="1"] .section--accent .pain__appellation {
  background: color-mix(in srgb, var(--encre-contraste) 10%, transparent);
  border-left-color: var(--encre-contraste);
}
.pain__appellation b {
  display: block;
  font-size: .74rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--accent-fonce);
  margin-bottom: .5em;
}
html[data-direction="1"] .section--accent .pain__appellation b { color: var(--encre-contraste); }
.pain__appellation p { margin: 0 0 .5em; font-size: .9rem; line-height: 1.5; }
.pain__source { display: block; font-size: .8rem; font-style: italic; color: var(--encre-2); }
html[data-direction="1"] .section--accent .pain__source { color: color-mix(in srgb, var(--encre-contraste) 80%, transparent); }

.pains__titre { margin-top: 46px; padding: 26px 28px; background: var(--surface); border: 1px solid var(--trait); border-radius: var(--r-carte, 14px); max-width: 64rem; }
html[data-direction="1"] .section--accent .pains__titre {
  background: color-mix(in srgb, var(--encre-contraste) 8%, transparent);
  border-color: color-mix(in srgb, var(--encre-contraste) 22%, transparent);
}
.pains__titre h3 { font-size: 1.08rem; margin-bottom: .6em; }
.pains__titre p { margin: 0 0 .8em; font-size: .96rem; }
.pains__titre p:last-child { margin-bottom: 0; }
.pains__mention { margin-top: 26px; max-width: 64rem; }

/* --- les commandes --------------------------------------------------------
   Le delai en premier, en gros, a gauche. C'est ce qu'on vient chercher : pas
   ce qui se commande, mais combien de temps a l'avance il faut s'y prendre.
   Meme raisonnement que le compte a rebours du traiteur, autre mise en page :
   ici il n'y a pas de chronologie, seulement un tarif de temps par produit.
   -------------------------------------------------------------------------- */

.commandes__liste { list-style: none; margin: 40px 0 0; padding: 0; }
.commandes__liste li {
  display: grid; gap: 4px 26px;
  padding: 20px 0;
  border-top: 1px solid var(--trait);
}
html[data-direction="1"] .section--accent .commandes__liste li { border-top-color: color-mix(in srgb, var(--encre-contraste) 22%, transparent); }
@media (min-width: 720px) {
  .commandes__liste li { grid-template-columns: 12rem 1fr; align-items: baseline; padding: 22px 0; }
}

.commande__delai {
  font-family: var(--titres);
  font-size: 1.02rem; line-height: 1.3;
  color: var(--accent-fonce);
  overflow-wrap: anywhere;
}
html[data-direction="1"] .section--accent .commande__delai { color: var(--encre-contraste); }
.commande__quoi h3 { font-size: 1.04rem; margin-bottom: .25em; }
.commande__quoi p { margin: 0; font-size: .95rem; color: var(--encre-2); }
html[data-direction="1"] .section--accent .commande__quoi p { color: color-mix(in srgb, var(--encre-contraste) 84%, transparent); }

.commandes__pied { margin-top: 34px; max-width: 64rem; }
.commandes__pied p { margin: 0 0 .7em; }
.commandes__pied p:last-child { margin-bottom: 0; }

/* --- les prix -------------------------------------------------------------
   Volontairement discrets : une boulangerie n'est pas choisie sur son prix, et
   afficher toute la vitrine donnerait une liste illisible et fausse des la
   semaine suivante. Quelques reperes dans un encadre, et c'est tout.
   -------------------------------------------------------------------------- */

.prix-boul__in { display: grid; gap: 32px; align-items: start; }
@media (min-width: 900px) { .prix-boul__in { grid-template-columns: 1fr 1fr; gap: 56px; } }
.prix-boul__carte { padding: 26px 28px; background: var(--fond-2); border-radius: var(--r-carte, 14px); }
html[data-direction="1"] .section--accent .prix-boul__carte { background: color-mix(in srgb, var(--encre-contraste) 8%, transparent); }
.prix__liste { list-style: none; margin: 0 0 14px; padding: 0; }
.prix { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--trait); }
html[data-direction="1"] .section--accent .prix { border-bottom-color: color-mix(in srgb, var(--encre-contraste) 22%, transparent); }
.prix__libelle { overflow-wrap: anywhere; }
.prix__montant { white-space: nowrap; font-weight: 600; color: var(--accent-fonce); }
html[data-direction="1"] .section--accent .prix__montant { color: var(--encre-contraste); }

/* --- l'encadre des fournisseurs, dans la rubrique de presentation --------- */

.encadre-produits { margin-top: 26px; padding: 22px 24px; background: var(--fond-2); border-radius: var(--r-carte, 14px); }
.encadre-produits h3 { font-size: .88rem; letter-spacing: .07em; text-transform: uppercase; color: var(--encre-2); margin-bottom: .5em; }
.encadre-produits p { margin: 0; }

/* --- la bande de reperes --------------------------------------------------
   base.css pose « white-space: nowrap » sur la valeur d'un repere : juste pour
   « 30 min » ou un numero, faux des qu'on y met une enumeration d'heures de
   fournee. Meme correction que chez le kine, le psychologue et le traiteur.
   -------------------------------------------------------------------------- */

.chiffre b { white-space: normal; overflow-wrap: anywhere; }
.chiffre b a { white-space: nowrap; }
.accueil__surtitre, .accueil__sur, .etiq { overflow-wrap: anywhere; }

/* La classe .mention garde --encre-2 partout, y compris sur le fond d'encre de
   la direction 1 : gris-vert sur presque noir, 1,98 pour 1. */
html[data-direction="1"] .section--accent .mention,
html[data-direction="1"] .section--accent small {
  color: color-mix(in srgb, var(--encre-contraste) 78%, transparent);
}
html[data-direction="1"] .section--accent .mention a { color: var(--encre-contraste); }


/* --- corrections de contraste sur les rubriques communes -------------------
   Deux textes des gabarits partages passaient sous le seuil de 4,5 pour 1.
   Les deux relevent du meme defaut de fond : une classe utilitaire ne sait pas
   sur quel fond elle atterrit.

   1. En direction 2, la rubrique de contact passe sur fond d'encre. La feuille
      de direction rattrape h2, .etiq et .section__corps, mais pas .urgence ni
      .mention, ajoutees plus tard : 3,10 pour 1.
   2. En direction 1, la carte d'adresse est posee sur l'accent et sa mention
      est en blanc a 80 % d'opacite : 4,39 pour 1, juste sous le seuil.

   La correction vit ici plutot que dans base.css parce que base.7.css est deja
   servi avec un cache d'un an et ne se modifie plus. Chaque pack la porte.
   -------------------------------------------------------------------------- */

html[data-direction="2"] .contact .urgence,
html[data-direction="2"] .contact .mention,
html[data-direction="2"] .contact small {
  color: color-mix(in srgb, var(--encre-contraste) 82%, transparent);
}
html[data-direction="2"] .contact .urgence a,
html[data-direction="2"] .contact .mention a { color: var(--encre-contraste); }

html[data-direction="1"] .lieu .mention {
  color: color-mix(in srgb, var(--encre-contraste) 94%, transparent);
}