/* Tokens repris de la collection Figma « Sommelier · tokens ». */
:root {
  --papier: #F2ECDF;
  --papier-carte: #FBF8F1;
  --papier-creux: #E8E0CF;
  --encre: #1D1A16;
  --encre-2: #5B544A;
  --encre-3: #8C8475;
  --filet: #D9CFBC;
  --ambre: #C7801A;
  --ambre-fonce: #8A5410;
  --ambre-pale: #F4E1BE;
  --sur-encre: #F2ECDF;
  --danger: #B8361F;
  --danger-pale: #F5D9D2;

  --cat-huile: #C7801A;
  --cat-refroidissement: #E0559A;
  --cat-frein: #D9B840;
  --cat-carburant: #B8361F;
  --cat-graisse: #6B4A2B;
  --cat-degrippant: #2F5DA8;
  --cat-autre: #8C8475;

  --rayon-sm: 6px;
  --rayon-md: 12px;
  --marge: 64px;

  --serif: "Fraunces", Georgia, serif;
  --sans: "Work Sans", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--papier);
  color: var(--encre);
  font: 400 16px/1.5 var(--sans);
  -webkit-font-smoothing: antialiased;
}
main { flex: 1; outline: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
:focus-visible { outline: 2px solid var(--ambre); outline-offset: 2px; }

/* Typo */
.etiquette { font: 500 12px/1.3 var(--mono); letter-spacing: 1.2px; text-transform: uppercase; color: var(--encre-2); }
.etiquette--ambre { color: var(--ambre-fonce); }
.etiquette--pale { color: var(--ambre-pale); }
.etiquette--discrete { color: var(--encre-3); }
.mono { font: 400 13px/1.4 var(--mono); color: var(--encre-3); }
.display { font: 600 64px/1 var(--serif); letter-spacing: -2px; }
.display em { font-style: italic; color: var(--ambre); }
.intro .display { font-size: clamp(44px, 4.2vw, 64px); }
.titre { font: 600 28px/1.15 var(--serif); letter-spacing: -0.5px; }
.titre-carte { font: 600 22px/1.2 var(--serif); letter-spacing: -0.3px; }
.citation { font: italic 400 20px/1.45 var(--serif); }
.citation-petite { font: italic 400 16px/1.45 var(--serif); color: var(--encre-2); }
.note { font: 700 36px/1 var(--serif); letter-spacing: -1px; }
.sous-titre { color: var(--encre-2); }

/* Gouttes */
.goutte { width: 16px; height: 20px; flex: none; }
.goutte path { fill: var(--papier-creux); stroke: var(--filet); stroke-width: 1; }
.goutte.est-pleine path { fill: var(--ambre); stroke: var(--ambre-fonce); }
.goutte.est-regret path { fill: var(--danger); stroke: var(--danger); }
.goutte--logo { width: 22px; height: 28px; }
.goutte--logo path { fill: var(--ambre); stroke: var(--ambre-fonce); }
.gouttes { display: flex; gap: 4px; }

/* Boutons */
.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 24px; border-radius: 999px;
  font: 600 16px/1.5 var(--sans); white-space: nowrap;
  transition: transform .12s ease, background-color .12s ease, opacity .12s;
}
.bouton:active { transform: translateY(1px); }
.bouton--primaire { background: var(--encre); color: var(--sur-encre); }
.bouton--primaire:hover { background: #000; }
.bouton--secondaire { background: var(--papier-carte); color: var(--encre); box-shadow: inset 0 0 0 1.5px var(--encre); }
.bouton--secondaire:hover { background: #fff; }
.bouton--fantome:hover { text-decoration: underline; text-underline-offset: 3px; }
.bouton--danger { background: var(--danger); color: var(--sur-encre); }
.bouton[disabled] { opacity: .55; cursor: progress; }
.lien-discret { font: 400 13px/1.4 var(--mono); color: var(--encre-3); text-decoration: underline; text-underline-offset: 3px; }

/* En-tête */
.entete {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 24px var(--marge);
  border-bottom: 1.5px solid var(--encre);
}
.logo { display: flex; align-items: center; gap: 12px; font: 600 22px/1.2 var(--serif); letter-spacing: -0.3px; }
.nav { display: flex; align-items: center; gap: 32px; }
.nav a[data-nav] { color: var(--encre-2); }
.nav a[data-nav].est-actif { color: var(--encre); font-weight: 600; }
.nav__ajout-rond { display: none; }

/* Pied */
.pied {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding: 24px var(--marge);
  border-top: 1.5px solid var(--encre);
}
.pied__mise-en-garde { font: italic 400 16px/1.45 var(--serif); color: var(--encre-2); }
.pied__droite { display: flex; align-items: center; gap: 24px; }
.pied__antipoison { font: 400 13px/1.4 var(--mono); color: var(--danger); }

/* Intro du carnet */
.intro {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 64px;
  padding: 64px var(--marge) 48px;
}
.intro__texte { display: flex; flex-direction: column; gap: 16px; flex: 1; min-width: 0; max-width: 880px; }
.chiffres { display: flex; border-top: 1.5px solid var(--encre); flex: none; }
.chiffre { display: flex; flex-direction: column; gap: 4px; padding: 16px 24px; }
.chiffre:first-child { padding-left: 4px; }
.chiffre + .chiffre { border-left: 1px solid var(--filet); }
.chiffre .etiquette { color: var(--encre-3); }

/* Filtres */
.filtres {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 0 var(--marge) 24px;
}
.puces { display: flex; gap: 8px; flex-wrap: wrap; }
.puce {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 16px; border-radius: 999px;
  font: 400 14px/1.45 var(--sans); color: var(--encre-2);
  box-shadow: inset 0 0 0 1px var(--filet);
  white-space: nowrap;
}
.puce:hover { box-shadow: inset 0 0 0 1px var(--encre-3); }
.puce__compte { font: 400 13px/1.4 var(--mono); color: var(--encre-3); }
.puce.est-active, .puce:has(input:checked) { background: var(--encre); color: var(--sur-encre); box-shadow: none; }
.puce.est-active .puce__compte { color: var(--ambre-pale); }
.puce input { position: absolute; opacity: 0; pointer-events: none; }
.puce:has(input:focus-visible) { outline: 2px solid var(--ambre); outline-offset: 2px; }
.tri { display: flex; align-items: center; gap: 8px; flex: none; }
.tri .etiquette { color: var(--encre-3); }
.tri button { font-weight: 600; }

/* Grille de cartes */
.grille {
  display: grid; gap: 24px;
  grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
  padding: 0 var(--marge) 64px;
}
.carte {
  display: flex; flex-direction: column; gap: 16px;
  padding: 24px; border-radius: var(--rayon-md);
  background: var(--papier-carte); border: 1px solid var(--filet);
  transition: border-color .15s, transform .15s;
}
a.carte:hover { border-color: var(--encre-3); transform: translateY(-2px); }
.carte__haut { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.carte__titre { display: flex; flex-direction: column; gap: 4px; }
.carte__remarque { flex: 1; }
.carte__pied {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding-top: 16px; border-top: 1px solid var(--filet);
}
.badge {
  display: inline-flex; align-items: center; gap: 8px; align-self: flex-start;
  padding: 4px 12px; border-radius: 999px;
  background: var(--papier-carte); border: 1px solid var(--filet);
  font: 500 12px/1.3 var(--mono); letter-spacing: 1.2px; text-transform: uppercase;
}
.badge::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--pastille, var(--cat-autre)); }
.criteres { display: flex; flex-direction: column; gap: 8px; }
.critere { display: flex; align-items: center; gap: 12px; }
.critere .etiquette { flex: 1; }
.critere .mono { min-width: 26px; text-align: right; }
.note-20 { display: flex; align-items: baseline; gap: 4px; }

/* États */
.vide, .erreur {
  margin: 0 var(--marge) 64px;
  border-radius: var(--rayon-md);
}
.vide {
  display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center;
  padding: 64px 32px;
  background: var(--papier-carte); border: 1.5px dashed var(--filet);
}
.vide .goutte { width: 48px; height: 60px; }
.erreur {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 24px 32px;
  background: var(--danger-pale); border-left: 4px solid var(--danger);
  border-radius: 0;
}
.erreur__titre { color: var(--danger); }
.erreur--formulaire { margin: 0; padding: 16px 24px; font-weight: 600; color: var(--danger); }
.squelette { background: var(--papier-creux); border-radius: 4px; animation: pulse 1.4s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .5; } }
@media (prefers-reduced-motion: reduce) { .squelette { animation: none; } }

/* Fiche */
.page { display: flex; flex-direction: column; gap: 32px; padding: 32px var(--marge) 64px; }
.retour { font-weight: 600; color: var(--encre-2); align-self: flex-start; }
.retour:hover { color: var(--encre); }
.colonnes { display: flex; gap: 64px; align-items: flex-start; }
.colonne-principale { display: flex; flex-direction: column; gap: 24px; flex: 1; min-width: 0; }
.meta { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.fiche__titre { display: flex; flex-direction: column; gap: 8px; }
.remarque {
  display: flex; flex-direction: column; gap: 12px;
  padding: 24px 32px;
  background: var(--papier-carte); border-left: 4px solid var(--ambre);
}
.remarque .citation { white-space: pre-line; }
.circonstances { display: flex; flex-wrap: wrap; border-top: 1.5px solid var(--encre); }
.circonstances > div { display: flex; flex-direction: column; gap: 4px; padding: 16px 24px 0 0; flex: 1; min-width: 160px; }
.circonstances .etiquette { color: var(--encre-3); }
.circonstances strong { font-weight: 600; }
.actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

.verdict {
  display: flex; flex-direction: column; gap: 24px;
  width: 440px; flex: none; padding: 32px;
  border-radius: var(--rayon-md); background: var(--encre); color: var(--sur-encre);
}
.verdict__note { display: flex; align-items: baseline; gap: 8px; }
.verdict__note strong { font: 700 96px/.95 var(--serif); letter-spacing: -3px; }
.verdict__note span { font: 600 28px/1.15 var(--serif); color: var(--encre-3); }
.verdict__phrase { color: var(--ambre); }
.verdict .criteres { gap: 16px; padding-top: 24px; border-top: 1px solid var(--encre-2); }
.verdict .critere .etiquette { color: var(--sur-encre); }
.verdict .goutte:not(.est-pleine):not(.est-regret) path { fill: #3a352e; stroke: #3a352e; }

/* Formulaire */
.page-form__titre { display: flex; flex-direction: column; gap: 8px; }
.formulaire { display: flex; gap: 64px; align-items: flex-start; }
.formulaire__colonne { display: flex; flex-direction: column; gap: 24px; flex: 1; min-width: 0; }
.formulaire__colonne--notes { flex: 0 1 560px; gap: 16px; }
.champ { display: flex; flex-direction: column; gap: 8px; }
.saisie {
  width: 100%; padding: 12px 16px;
  border-radius: var(--rayon-sm); border: 1.5px solid var(--filet); background: var(--papier-carte);
  font: 400 16px/1.5 var(--sans); color: var(--encre);
}
.saisie::placeholder { color: var(--encre-3); }
.saisie:focus { outline: none; border-color: var(--encre); }
textarea.saisie { min-height: 120px; resize: vertical; font: italic 400 16px/1.45 var(--serif); }
.champ.a-erreur .etiquette { color: var(--danger); }
.champ.a-erreur .saisie, .champ.a-erreur .puces { border-color: var(--danger); border-width: 2px; }
.message-erreur { font-size: 14px; line-height: 1.45; color: var(--danger); }
.duo { display: flex; gap: 16px; }
.duo > * { flex: 1; min-width: 0; }
.selecteurs { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.selecteur {
  display: flex; flex-direction: column; gap: 8px; padding: 16px;
  border-radius: var(--rayon-md); border: 1px solid var(--filet); background: var(--papier-carte);
}
.selecteur__entete { display: flex; justify-content: space-between; align-items: center; }
.selecteur__entete .etiquette { color: var(--encre); }
.selecteur__gouttes { display: flex; gap: 12px; }
.selecteur__gouttes label { cursor: pointer; padding: 2px; margin: -2px; border-radius: 6px; }
.selecteur__gouttes input { position: absolute; opacity: 0; pointer-events: none; }
.selecteur__gouttes label:has(input:focus-visible) { outline: 2px solid var(--ambre); }
.selecteur .goutte { width: 28px; height: 35px; transition: transform .1s; }
.selecteur label:hover .goutte { transform: translateY(-2px); }
.selecteur.a-erreur { border-color: var(--danger); }
.barre-envoi { display: flex; flex-direction: column; gap: 16px; }
.note-calculee {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 16px 24px; border-radius: var(--rayon-md); background: var(--encre); color: var(--sur-encre);
}
.note-calculee__texte { display: flex; flex-direction: column; gap: 4px; }
.note-calculee .citation-petite { color: var(--ambre); }
.note-calculee .note-20 .mono { color: var(--encre-3); }
.formulaire.est-envoi { opacity: .6; pointer-events: none; }

.confirmation {
  display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center;
  align-self: center; max-width: 640px; margin-top: 32px;
  padding: 48px 64px; border-radius: var(--rayon-md); background: var(--encre); color: var(--sur-encre);
}
.confirmation .verdict__phrase { font-size: 16px; }
.confirmation .bouton--fantome { color: var(--sur-encre); }

/* Palmarès */
.palmares { display: flex; flex-direction: column; padding: 0; list-style: none; border-top: 1.5px solid var(--encre); margin: 0 var(--marge) 64px; }
.rang {
  display: grid; grid-template-columns: 64px 1fr auto; align-items: center; gap: 24px;
  padding: 20px 0; border-bottom: 1px solid var(--filet);
}
.rang:hover .titre-carte { text-decoration: underline; text-underline-offset: 4px; }
.rang__numero { font: 700 36px/1 var(--serif); color: var(--encre-3); }
li:first-child > .rang .rang__numero { color: var(--ambre); }
.rang__nom { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.rang__ligne { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

/* Fenêtre de connexion */
.fenetre {
  margin: auto; padding: 0; border: 0; border-radius: var(--rayon-md);
  background: var(--papier); color: var(--encre);
  width: min(440px, calc(100vw - 32px));
  box-shadow: 0 24px 80px rgb(0 0 0 / .25);
}
.fenetre::backdrop { background: rgb(29 26 22 / .55); }
.fenetre__corps { display: flex; flex-direction: column; gap: 16px; padding: 32px; }

/* Tablette */
@media (max-width: 1023px) {
  :root { --marge: 32px; }
  .intro { flex-direction: column; align-items: stretch; gap: 32px; }
  .display { font-size: 52px; }
  .colonnes, .formulaire { flex-direction: column; align-items: stretch; }
  .verdict { width: auto; }
  .formulaire__colonne--notes { flex: none; }
}

/* Téléphone */
@media (max-width: 767px) {
  :root { --marge: 24px; }
  .entete { padding: 16px 24px; }
  .logo { gap: 8px; font: 600 16px/1.5 var(--sans); letter-spacing: 0; }
  .goutte--logo { width: 18px; height: 23px; }
  .nav { gap: 16px; }
  .nav a[data-nav="carnet"], .nav__ajout { display: none; }
  .nav a[data-nav] { font-size: 14px; }
  .nav__ajout-rond {
    display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
    background: var(--encre); color: var(--sur-encre); font: 600 28px/1 var(--serif);
  }
  .intro { padding: 32px 24px 24px; gap: 12px; }
  .intro__texte { gap: 12px; }
  .display, .intro .display { font-size: 40px; line-height: 1.05; letter-spacing: -1.2px; }
  .intro .sous-titre { font-size: 14px; }
  .chiffre { flex: 1; padding: 16px 12px; }
  .chiffre .note { font: 600 28px/1.15 var(--serif); }
  .filtres { flex-direction: column; align-items: stretch; gap: 16px; padding: 0 0 16px; }
  .filtres .puces { flex-wrap: nowrap; overflow-x: auto; padding: 0 24px; scrollbar-width: none; }
  .filtres .puces::-webkit-scrollbar { display: none; }
  .tri { padding: 0 24px; justify-content: space-between; }
  .grille { grid-template-columns: 1fr; gap: 16px; padding: 0 16px 32px; }
  .carte { padding: 20px 16px; }
  .vide, .erreur { margin: 0 16px 32px; }
  .erreur { flex-direction: column; align-items: flex-start; padding: 20px; }
  .page { padding: 24px 24px 32px; gap: 16px; }
  .colonnes { gap: 24px; }
  .colonne-principale { display: contents; }
  .verdict { padding: 24px; gap: 16px; }
  .verdict__note strong { font-size: 64px; letter-spacing: -2px; }
  .remarque { padding: 24px; }
  .remarque .citation { font-size: 16px; }
  .circonstances > div { min-width: 140px; padding-bottom: 8px; }
  .page-form__titre .display { font-size: 28px; line-height: 1.15; letter-spacing: -.5px; }
  .page-form__titre .citation { display: none; }
  .formulaire { display: flex; flex-direction: column; gap: 24px; }
  .formulaire__colonne { display: contents; }
  .formulaire__colonne > h2 { display: none; }
  .ordre-1 { order: 1; } .ordre-2 { order: 2; } .ordre-3 { order: 3; } .ordre-4 { order: 4; }
  .ordre-5 { order: 5; } .ordre-6 { order: 6; } .ordre-7 { order: 7; } .ordre-8 { order: 8; }
  .selecteurs { grid-template-columns: 1fr; gap: 12px; }
  .barre-envoi {
    order: 9; position: sticky; bottom: 0; z-index: 2;
    display: flex; flex-direction: column; gap: 12px;
    margin: 0 -24px -32px; padding: 16px 24px calc(16px + env(safe-area-inset-bottom));
    background: var(--papier-carte); border-top: 1.5px solid var(--encre);
  }
  .barre-envoi .actions { flex-direction: column; align-items: stretch; }
  .barre-envoi .bouton--fantome { display: none; }
  .confirmation { padding: 32px 24px; }
  .rang { grid-template-columns: 40px 1fr auto; gap: 12px; }
  .rang__numero { font-size: 28px; }
  .pied { flex-direction: column; align-items: flex-start; gap: 8px; padding: 24px; }
  .pied__droite { flex-direction: column-reverse; align-items: flex-start; gap: 16px; }
  .chiffre__extra { display: none; }
}