/* Composants : boutons, liens, figures, filets, puces, formulaire, vérification d'âge. */
.bouton { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px; padding: 0 28px; border: 1px solid var(--terracotta); border-radius: 2px; background: var(--terracotta); color: var(--chaux); font: 600 .875rem/1 'Figtree', sans-serif; letter-spacing: .06em; text-decoration: none; transition: background .18s ease-out, border-color .18s; }
.bouton:hover { background: var(--terracotta-fonce); border-color: var(--terracotta-fonce); }
.bouton::after { content: '→'; transition: transform .18s ease-out; }
.bouton:hover::after { transform: translateX(4px); }
.bouton--contour { background: transparent; border-color: rgba(244, 239, 230, .5); }
.bouton--contour:hover { background: rgba(244, 239, 230, .08); border-color: var(--chaux); }
.bouton--figue { background: transparent; border-color: var(--figue); color: var(--figue); }
.bouton--figue:hover { background: var(--figue); color: var(--chaux); }
.bouton--sans-fleche::after { display: none; }

.lien { display: inline-flex; align-items: center; gap: 8px; padding-bottom: 4px; font-weight: 600; text-decoration: none; color: var(--chaux); background: linear-gradient(var(--laiton), var(--laiton)) left bottom / 0 1px no-repeat; transition: background-size .4s var(--courbe); }
.lien:hover { background-size: 100% 1px; }
.lien::after { content: '→'; color: var(--laiton); }

.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px; }
.filet { width: 1px; height: 48px; background: var(--laiton); }
.etoile { color: var(--laiton); }

/* Puces de filtre (cocktails, collection) */
.puces { display: flex; flex-wrap: wrap; gap: 10px; }
.puce { min-height: 44px; padding: 0 18px; border: 1px solid var(--ligne); border-radius: 999px; background: transparent; color: var(--chaux); font: 500 .875rem/1 'Figtree', sans-serif; transition: border-color .2s, background .2s, color .2s; }
.puce:hover { border-color: var(--chaux); }
.puce[aria-pressed="true"] { background: var(--mer); border-color: var(--mer); color: var(--nuit); }

/* Formulaire */
.formulaire { display: grid; gap: 26px; }
.formulaire label { display: grid; gap: 8px; font: 600 .75rem/1 'Figtree', sans-serif; letter-spacing: .16em; text-transform: uppercase; color: var(--pierre); }
.formulaire input, .formulaire textarea { width: 100%; padding: 12px 0; border: none; border-bottom: 1px solid rgba(244, 239, 230, .35); background: transparent; color: var(--chaux); font: 400 1.05rem/1.5 'Figtree', sans-serif; letter-spacing: 0; text-transform: none; transition: border-color .2s; }
.formulaire input:focus, .formulaire textarea:focus { outline: none; border-color: var(--laiton); }
.formulaire textarea { resize: vertical; }
.formulaire .bouton { justify-self: start; }
.formulaire__retour { min-height: 1.5em; color: var(--mer); }
.formulaire__retour--erreur { color: #F08C70; }

/* Vérification d'âge */
.age { position: fixed; inset: 0; z-index: 150; display: grid; place-items: center; padding: 24px; background: var(--nuit); }
.age__boite { position: relative; display: grid; justify-items: center; gap: 20px; max-width: 620px; text-align: center; }
.age__langues { position: fixed; top: 24px; right: var(--marge); }
.age__etoile { margin-bottom: 4px; }
.age h2 { font-size: clamp(1.9rem, 4vw, 2.8rem); }
.age__texte, .age__note { color: var(--pierre); font-size: .95rem; }
.age__note { font-size: .8rem; }
.age__boutons { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 8px; }
.age__boutons .bouton::after { display: none; }
.age__refus { color: #F08C70; }
.age__sante { font-size: .8rem; color: var(--chaux); opacity: .8; }