/* Outil · Cafés (Coffee guide) : seulement ce qui lui est propre (le reste vient de app/kit.css).
   Préfixe des classes : cf-
   À gauche (en haut sur téléphone) : la boisson en grand, son nom, son texte, ses couches ; à droite : tous les cafés. */
.cf .outil-fixe { align-items: stretch; }

/* Les couleurs des couches : chaudes et sourdes, l'orange reste réservé à la DA */
.cf-svg .cf-espresso { fill: #5a3322; }
.cf-svg .cf-creme { fill: #c08552; }
.cf-svg .cf-eau { fill: #2c3d4a; }
.cf-svg .cf-lait { fill: #e4d6be; }
.cf-svg .cf-mousse { fill: #f4eee2; }
.cf-svg .cf-chantilly { fill: #fbf8f1; }
.cf-svg .cf-chocolat { fill: #3d2217; }
.cf-svg .cf-glace { fill: #eedfb6; }
.cf-svg .cf-filtre { fill: #74472d; }
.cf-svg pattern circle { fill: rgba(160, 138, 108, .35); }
.cf-svg .cf-trait { fill: none; stroke: var(--papier); stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; }
.cf-svg .cf-trait.verre { stroke-opacity: .55; }
.cf-svg.grand .cf-trait { stroke-width: 2; }
.cf-vapeur path { fill: none; stroke: rgba(242, 240, 235, .22); stroke-width: 2; stroke-linecap: round; animation: cf-vapeur 3.2s ease-in-out infinite; }
.cf-vapeur path:nth-child(2) { animation-delay: .6s; }
.cf-vapeur path:nth-child(3) { animation-delay: 1.2s; }
@keyframes cf-vapeur { 0%, 100% { opacity: .2; translate: 0 2px; } 50% { opacity: 1; translate: 0 -3px; } }
@media (prefers-reduced-motion: reduce) { .cf-vapeur path { animation: none; } }

/* La boisson en grand */
.cf-scene { width: 100%; max-width: 320px; margin: 0 auto; aspect-ratio: 1; }
.cf-scene svg { display: block; width: 100%; height: 100%; }
.cf-fiche { display: flex; flex-direction: column; gap: 10px; }
/* Des emplacements fixes : la tasse, le nom (1 ligne), le texte (4 lignes sur téléphone, 3 sur ordinateur), 4 lignes de couches
   (même s'il y en a moins), l'info (2 lignes) : rien ne bouge d'un café à l'autre */
.cf-nom { margin: 0; height: 1.1em; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font: 700 clamp(26px, 7vw, 34px)/1.1 var(--display); letter-spacing: -.02em; color: var(--papier); }
.cf-texte { margin: 0; height: 4lh; overflow: hidden; font: 400 14px/1.5 var(--corps); color: var(--texte2); }
@media (min-width: 960px) { .cf-texte { height: 3lh; } }
.cf-couches { display: flex; flex-direction: column; height: calc(4 * 37px); }
.cf-ligne { flex: none; height: 37px; display: grid; grid-template-columns: 12px 1fr auto 46px; align-items: center; gap: 10px; border-bottom: 1px solid var(--filet-doux); }
.cf-pastille { width: 12px; height: 12px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(242, 240, 235, .25); }
.cf-p-espresso { background: #5a3322; } .cf-p-eau { background: #2c3d4a; } .cf-p-lait { background: #e4d6be; } .cf-p-mousse { background: #f4eee2; }
.cf-p-chantilly { background: #fbf8f1; } .cf-p-chocolat { background: #3d2217; } .cf-p-glace { background: #eedfb6; } .cf-p-filtre { background: #74472d; }
.cf-l-nom { font: 500 14px/1.3 var(--corps); color: var(--papier); }
.cf-l-val { font: 500 13px/1.3 var(--mono); color: var(--papier); white-space: nowrap; }
.cf-l-pct { font: 500 12px/1.3 var(--mono); color: var(--texte2); text-align: right; }
.cf-infos { margin: 4px 0 0; height: 3.2em; overflow: hidden; font: var(--valeur); line-height: 1.6; letter-spacing: .04em; color: var(--texte2); }
.cf-infos b { font-weight: 500; color: var(--papier); }

/* Tous les cafés : de petites tasses à toucher */
.cf-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; }
.cf-choix { border: 0; background: transparent; border-radius: 14px; padding: 8px 4px 10px; display: flex; flex-direction: column; align-items: center; gap: 4px;
  box-shadow: inset 0 0 0 1px var(--filet-doux); cursor: pointer; transition: background .3s var(--courbe), box-shadow .3s var(--courbe); }
.cf-choix svg { width: 100%; height: 64px; }
.cf-choix span { font: var(--valeur); line-height: 1.2; letter-spacing: .03em; color: var(--texte2); text-align: center; }
.cf-choix:hover { background: rgba(242, 240, 235, .04); }
.cf-choix[aria-pressed="true"] { background: rgba(242, 240, 235, .07); box-shadow: inset 0 0 0 1px var(--papier); }
.cf-choix[aria-pressed="true"] span { color: var(--papier); }
.cf-choix:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.cf-note { margin: 4px 0 0; font: 400 13px/1.5 var(--corps); color: var(--texte2); }