/*
  Sommaire
  1. Polices
  2. Variables
  3. Base
  4. Utilitaires (sr-only, conteneur, sections)
  5. Boutons
  6. En-tête et navigation
  7. Héros
  8. Avantages
  9. Occasions
  10. Sélection de millésimes
  11. Étapes de commande
  12. Qui suis-je ?
  13. Avis clients
  14. FAQ
  15. Contact
  16. Pied de page
  17. Bouton retour en haut
  18. Vérification de l'âge
  19. Bandeau d'information
  20. Fenêtres d'informations légales
  21. Panier (bouton de l'en-tête, message d'ajout, page du panier)
  22. Media queries
*/

/* 1. Polices */

/* 1.1 Cormorant Garamond pour les titres */
@font-face {
  font-family: "Cormorant Garamond";
  src: url("../fonts/cormorant-garamond-700-nbNJTsA.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

/* 1.2 Poppins pour le texte */
@font-face {
  font-family: "Poppins";
  src: url("../fonts/poppins-400-e-THQe1.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Poppins";
  src: url("../fonts/poppins-500-v_GhCDP.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}

/* 2. Variables */

/* 2.1 Palette Ma cuvée, fond, texte, accent, polices et rayon */
:root {
  --white: #FFFFFF;
  --black: #000000;
  --plum: #9A3C88;
  --red: #E5383B;
  --bg: var(--white);
  --text: var(--black);
  --accent: var(--plum);

  /* Nuances : toutes à 50 % (sauf fonds et traits, plus bas) */
  --plum-light: color-mix(in srgb, var(--plum) 50%, var(--white)); /* violet clair : liens au survol sur fond noir */
  --plum-dark: color-mix(in srgb, var(--plum) 50%, var(--black)); /* violet sombre : bordures sur fond noir */
  --glow: color-mix(in srgb, var(--plum) 50%, transparent); /* lueur des cartes et boutons, voile violet du héros */
  --white-soft: color-mix(in srgb, var(--white) 50%, var(--black)); /* texte secondaire sur fond noir */
  --white-faint: color-mix(in srgb, var(--white) 50%, transparent); /* décor : grande année du héros */
  --veil: color-mix(in srgb, var(--black) 50%, transparent); /* voiles : menus, fenêtres, dégradés du héros */
  --red-glow: color-mix(in srgb, var(--red) 50%, transparent); /* lueur des erreurs */

  /* Fonds et traits : nuances légères */
  --line-dark: color-mix(in srgb, var(--white) 15%, var(--black)); /* traits sur fond noir */
  --red-tint: color-mix(in srgb, var(--red) 10%, var(--white)); /* fond des erreurs */

  --font-title: "Cormorant Garamond", Georgia, serif;
  --font-text: "Poppins", sans-serif;
  --radius: 8px;
}

/* 2.1 Nuances qui suivent le fond de la section (claire ou .section-dark) : recalculées dans les deux cas */
:root,
.section-dark {
  --text-soft: color-mix(in srgb, var(--text) 50%, var(--bg)); /* texte secondaire */
  --line: color-mix(in srgb, var(--text) 15%, var(--bg)); /* bordures des cartes et des champs, séparateurs */
  --surface: color-mix(in srgb, var(--text) 3%, var(--bg)); /* fond des cartes */
  --plum-tint: color-mix(in srgb, var(--plum) 12%, var(--bg)); /* fond violet léger : pastilles, étiquettes, zones de dépôt */
}

/* 3. Base */

/* 3.1 Remise à zéro légère */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* 3.2 Défilement doux vers les ancres, décalé de la hauteur de l'en-tête (ajustée par le JS) */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 73px;
}

/* 3.3 Barre de défilement : poignée violette sur fond noir */
html {
  scrollbar-color: var(--plum) var(--black);
}

::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

::-webkit-scrollbar-track {
  background: var(--black);
}

::-webkit-scrollbar-thumb {
  border-radius: var(--radius);
  background: var(--plum);
}

/* 3.4 Corps de page */
body {
  font-family: var(--font-text);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--text);
  background: var(--bg);
}

/* 3.5 Titres */
h1,
h2,
h3 {
  font-family: var(--font-title);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.01em;
  font-variant-numeric: lining-nums;
  text-wrap: balance;
}

/* 3.6 Liens et images */
a {
  color: inherit;
}

img,
svg {
  display: block;
}

/* 3.7 Icônes Font Awesome : taille commune, largeur fixe pour bien les aligner */
.icon {
  flex-shrink: 0;
  width: 1.25em;
  font-size: 1.125rem;
  text-align: center;
}

/* 3.8 Focus visible au clavier */
:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}

/* 4. Utilitaires */

/* 4.1 Texte réservé aux lecteurs d'écran */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* 4.2 Lien d'évitement */
.skip-link {
  position: absolute;
  top: -100px;
  left: 16px;
  z-index: 100;
  padding: 12px 20px;
  border-radius: var(--radius);
  background: var(--accent);
  color: var(--white);
  text-decoration: none;
}

.skip-link:focus {
  top: 16px;
}

/* 4.3 Conteneur centré */
.container {
  width: calc(100% - 48px);
  max-width: 1200px;
  margin-inline: auto;
}

/* 4.4 Sections claires et sombres en alternance */
.section {
  padding-block: 112px;
  background: var(--bg);
  color: var(--text);
}

.section-dark {
  --bg: var(--black);
  --text: var(--white);
  --accent: var(--plum-light);
}

/* 4.5 En-tête de section */
.section-header {
  max-width: 640px;
  margin-bottom: 56px;
}

.section-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  font-weight: 500;
  font-size: 0.8125rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
}

.section-label .icon {
  font-size: 0.875rem;
}

.section-title {
  font-size: 3.75rem;
  margin-bottom: 16px;
}

.section-text {
  color: var(--text-soft);
}

/* 4.6 Fondu (ajouté par le JS à l'année du héros) */
.fade-out {
  opacity: 0;
}

/* 4.7 Sans JS, les blocs animés par AOS restent visibles */
html:not(.js) [data-aos] {
  opacity: 1;
  transform: none;
}

/* 4.8 Carte commune (DRY : base de toutes les cartes) */
.card {
  padding: 32px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--surface);
  transition: .3s;
}

.card:hover {
  transform: scale(1.04);
  border-color: var(--plum);
  box-shadow: 0 0 32px var(--glow);
}

/* 4.9 Pastille d'icône des cartes */
.card-icon {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin-bottom: 24px;
  border-radius: var(--radius);
  background: var(--plum-tint);
  color: var(--accent);
}

/* Petite pastille à côté d'un texte (À propos, Contact) : elle garde sa taille même si le texte est long */
.about-item .card-icon,
.contact-item .card-icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  margin-bottom: 0;
}

.card-icon .icon {
  font-size: 1.5rem;
}

/* 4.10 Titre et texte des cartes */
.card-title {
  font-size: 1.625rem;
  margin-bottom: 8px;
}

.card-text {
  color: var(--text-soft);
}

/* 4.11 Grilles */
.grid {
  display: grid;
  gap: 24px;
}

.grid-3 {
  grid-template-columns: repeat(3, 1fr);
}

.grid-4 {
  grid-template-columns: repeat(4, 1fr);
}

/* 5. Boutons */

/* 5.1 Bouton de base */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 12px 24px;
  border: 2px solid var(--plum);
  border-radius: var(--radius);
  background: var(--plum);
  color: var(--white);
  font-family: var(--font-text);
  font-weight: 500;
  font-size: 1rem;
  text-decoration: none;
  cursor: pointer;
  transition: .3s;
}

.btn:hover {
  transform: scale(1.04);
  box-shadow: 0 0 24px var(--glow);
}

/* 5.2 Bouton contour */
.btn-outline {
  background: transparent;
  color: var(--text);
}

.btn-outline:hover {
  background: var(--plum);
  color: var(--white);
}

/* 5.3 Petit bouton (en-tête) */
.btn-small {
  min-height: 44px;
  padding: 0 16px;
  font-size: 0.9375rem;
}

/* 5.4 Groupe de boutons */
.btn-group {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

/* 5.5 Bouton qui ressemble à un lien (ouvre une fenêtre d'informations légales) */
.link-button {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}

/* 6. En-tête et navigation */

/* 6.1 En-tête noir, logo et liens en blanc (sans JS : barre noire collée en haut) */
.header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--black);
  color: var(--white);
  border-bottom: 1px solid transparent;
  transition: .3s;
}

/* Avec JS : transparent par-dessus l'image du héros, puis noir dès qu'on fait défiler */
.js .header {
  position: fixed;
  left: 0;
  right: 0;
  background: transparent;
}

.js .header-scrolled {
  background: var(--black);
  border-bottom-color: var(--line-dark);
}

.header-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 72px;
}

/* 6.2 Logo */
.logo {
  display: inline-flex;
  border-radius: var(--radius);
  text-decoration: none;
  transition: .3s;
}

.logo:hover {
  transform: scale(1.04);
}

.logo img {
  width: auto;
  height: 60px;
}

/* 6.3 Menu : haut du menu latéral, liens, puis sélecteur de langue */
.nav {
  display: flex;
  flex-grow: 1;
  align-items: center;
  gap: 32px;
}

/* Haut du menu latéral : logo blanc (masqué sur grand écran et sans JS) */
.nav-top {
  display: none;
}

.nav-logo {
  width: auto;
  height: 44px;
}

/* 6.4 Liens du menu */
/* Liens poussés à droite (seul le logo reste à gauche) */
.nav-list {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 32px;
  list-style: none;
}

.nav-link {
  position: relative;
  white-space: nowrap;
  text-decoration: none;
  font-weight: 500;
  font-size: 0.9375rem;
}

.nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 100%;
  height: 2px;
  background: var(--plum);
  transform: scaleX(0);
  transform-origin: left;
  transition: .3s;
}

/* Survol et lien actif (section affichée à l'écran) : soulignement violet */
.nav-link:hover::after,
.nav-link.active::after {
  transform: scaleX(1);
}

/* 6.5 Sélecteur de langue : bouton violet et liste déroulante (masqué sans JS) */
.lang {
  position: relative;
}

.lang-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 14px;
  border: 0;
  border-radius: var(--radius);
  background: var(--plum);
  color: var(--white);
  font-family: var(--font-text);
  font-weight: 500;
  font-size: 0.875rem;
  cursor: pointer;
  transition: .3s;
}

.lang-button:hover {
  transform: scale(1.04);
  box-shadow: 0 0 20px var(--glow);
}

.lang-button .icon {
  font-size: 1rem;
}

/* La flèche se retourne quand la liste est ouverte */
.lang-arrow {
  transition: .3s;
}

.lang-button[aria-expanded="true"] .lang-arrow {
  transform: rotate(180deg);
}

.lang-list {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 60;
  display: grid;
  gap: 4px;
  min-width: 160px;
  padding: 8px;
  list-style: none;
  border: 1px solid var(--line-dark);
  border-radius: var(--radius);
  background: var(--black);
  box-shadow: 0 0 24px var(--glow);
}

.lang-list[hidden] {
  display: none;
}

.lang-list button {
  width: 100%;
  padding: 8px 12px;
  border: 0;
  border-radius: var(--radius);
  background: none;
  color: var(--white-soft);
  font-family: var(--font-text);
  font-size: 0.9375rem;
  text-align: left;
  cursor: pointer;
  transition: .3s;
}

.lang-list button:hover {
  transform: scale(1.04);
  color: var(--white);
}

/* Langue active */
.lang-list .active,
.lang-list .active:hover {
  background: var(--plum);
  color: var(--white);
}

/* 6.6 Actions de l'en-tête (bouton « Nous écrire » et bouton du menu mobile) */
.header-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

/* 6.7 Bouton du menu mobile : carré violet, 3 traits qui deviennent une croix (affiché seulement avec JS sur petit écran) */
.nav-toggle {
  display: none;
  place-content: center;
  gap: 5px;
  position: relative;
  z-index: 70;
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: var(--radius);
  background: var(--plum);
  color: var(--white);
  cursor: pointer;
  transition: .3s;
}

.nav-toggle:hover {
  transform: scale(1.04);
  box-shadow: 0 0 24px var(--glow);
}

/* Un trait blanc arrondi */
.nav-toggle-line {
  display: block;
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: .3s;
}

/* Menu ouvert : le trait du milieu disparaît, ceux du haut et du bas pivotent en croix
   (7px = hauteur d'un trait + espace entre deux traits) */
.nav-toggle[aria-expanded="true"] .nav-toggle-line:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle-line:nth-child(2) {
  opacity: 0;
}

.nav-toggle[aria-expanded="true"] .nav-toggle-line:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* 6.8 Page bloquée pendant que le menu est ouvert */
.menu-open {
  overflow: hidden;
}

/* 7. Héros */

/* 7.1 Mise en page et image de fond avec dégradé (bouteille et verre visibles à gauche, texte à droite sur fond sombre, voile violet, fondu en bas) */
.hero {
  position: relative;
  overflow: hidden;
  /* Toute la hauteur de la fenêtre, contenu centré verticalement */
  display: flex;
  align-items: center;
  min-height: 100vh;
  padding-block: 120px;
  background:
    linear-gradient(270deg, var(--black) 0%, var(--veil) 60%, transparent 100%),
    linear-gradient(0deg, var(--black) 0%, transparent 35%),
    linear-gradient(225deg, var(--glow) 0%, transparent 55%),
    url("../images/hero-CFTgcNd.webp") left center / cover no-repeat,
    var(--black);
}

.hero-content {
  display: grid;
  grid-template-columns: 1fr 2fr;
  align-items: center;
  gap: 48px;
}

/* 1/3 pour le verre et la bouteille, 2/3 pour le texte et l'année (qui passe derrière) */
.hero-intro,
.hero-year {
  grid-column: 2;
  grid-row: 1;
}

.hero-intro {
  position: relative;
  z-index: 1;
}

/* 7.2 Titre et accroche */
.hero-title {
  font-size: 6rem;
  margin-bottom: 24px;
}

.hero-title em {
  font-style: normal;
  color: var(--accent);
}

.hero-text {
  margin-bottom: 40px;
  font-size: 1.125rem;
  color: var(--white-soft);
}

/* 7.3 Recherche par année et bouton vers la Sélection */
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}

/* Champ et bouton collés dans un même bloc */
.hero-search {
  display: flex;
  gap: 8px;
  padding: 6px;
  border: 1px solid var(--line-dark);
  border-radius: var(--radius);
  background: var(--veil);
  backdrop-filter: blur(6px);
  transition: .3s;
}

.hero-search:focus-within {
  border-color: var(--plum);
  box-shadow: 0 0 24px var(--glow);
}

.hero-search-field {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-left: 12px;
}

.hero-search-field .icon {
  color: var(--accent);
}

.hero-search-input {
  width: 190px;
  min-height: 44px;
  border: 0;
  background: transparent;
  color: var(--white);
  font-family: var(--font-text);
  font-size: 1rem;
  outline: none;
  appearance: textfield;
}

.hero-search-input::placeholder {
  color: var(--white-soft);
}

/* Retire les flèches du champ numérique */
.hero-search-input::-webkit-inner-spin-button,
.hero-search-input::-webkit-outer-spin-button {
  appearance: none;
  margin: 0;
}

/* 7.4 Points forts sous les boutons */
.hero-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  margin-top: 40px;
  list-style: none;
  font-size: 0.9375rem;
  color: var(--white-soft);
}

.hero-facts li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.hero-facts .icon {
  font-size: 0.9375rem;
  color: var(--accent);
}

/* 7.5 Année géante en filigrane */
.hero-year {
  display: grid;
  justify-items: end;
  align-self: start;
  gap: 8px;
  margin-top: -48px;
  pointer-events: none;
}

.hero-year-label {
  font-size: 0.8125rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--white-faint);
}

.hero-year-number {
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 13rem;
  line-height: 1;
  font-variant-numeric: lining-nums;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--white-faint);
  transition: .3s;
}

/* 8. Avantages */

/* 8.1 Les cartes reprennent la base .card (rien à ajouter) */

/* 9. Occasions */

/* 9.1 Carte d'occasion centrée */
.occasion {
  text-align: center;
}

.occasion .card-icon {
  margin-inline: auto;
}

/* 10. Sélection de millésimes */

/* 10.1 Filtres : 7 champs et un bouton, sur 2 lignes de 4 (masqués sans JS grâce à hidden) */
.filters {
  display: grid;
  /* minmax(0, 1fr) : colonnes de même largeur, même si un champ voudrait être plus large */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: end;
  gap: 16px 24px;
  margin-bottom: 40px;
}

.filters[hidden] {
  display: none;
}

/* Petit titre au-dessus de chaque champ */
.filter-label {
  display: block;
  margin-bottom: 8px;
  font-weight: 500;
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-soft);
}

/* Champ et icône Font Awesome placée à droite (loupe ou chevron) */
.filter-control {
  position: relative;
}

.filter-control .icon {
  position: absolute;
  top: 50%;
  right: 14px;
  translate: 0 -50%;
  font-size: 0.875rem;
  color: var(--plum);
  pointer-events: none;
}

.filter-input {
  width: 100%;
  min-height: 48px;
  padding: 0 40px 0 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-text);
  font-size: 0.9375rem;
  appearance: none;
  cursor: pointer;
  transition: .3s;
}

.filter-input:hover,
.filter-input:focus {
  border-color: var(--plum);
  box-shadow: 0 0 16px var(--glow);
  outline: none;
}

/* Retire la croix d'effacement des champs de recherche et les flèches des champs numériques */
.filter-input::-webkit-search-cancel-button,
.filter-input::-webkit-inner-spin-button,
.filter-input::-webkit-outer-spin-button {
  appearance: none;
  margin: 0;
}

.filter-input[type="number"] {
  appearance: textfield;
}

/* Bouton Réinitialiser à la hauteur des champs */
.filter-reset {
  min-height: 48px;
}

/* 10.2 Grille des bouteilles : grille CSS sans JS, placement par Isotope avec JS (4 par ligne) */
.js .wines {
  display: block;
}

/* Isotope déplace l'enveloppe .wine-item : la carte à l'intérieur garde sa transition sans rejouer le déplacement */
.wine-item {
  display: flex;
}

.wine-item > .wine {
  flex: 1;
}

/* 4 bouteilles par ligne : la largeur moins les 3 espaces de 24px (72px), partagée en 4 */
.js .wine-item {
  width: calc((100% - 72px) / 4);
  margin-bottom: 24px;
}

/* 10.3 Carte bouteille : photo cliquable (zoom), puis année, nom, appellation, description */
.card.wine {
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
}

.wine-photo {
  width: 100%;
  height: 240px;
  object-fit: cover;
  object-position: 50% 60%;
  background: var(--plum-tint);
}

.wine-info {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  padding: 20px;
}

.wine-year {
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 2rem;
  line-height: 1;
  font-variant-numeric: lining-nums;
  color: var(--accent);
  margin-bottom: 6px;
}

.wine-name {
  font-size: 1.1875rem;
  margin-bottom: 2px;
}

/* Description : 2 lignes maximum, place réservée pour garder des cartes de même hauteur */
.wine-description {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  min-height: 3em;
  margin-bottom: 16px;
  font-size: 0.8125rem;
  line-height: 1.5;
}

/* Photo cliquable : la loupe indique qu'on peut l'agrandir */
.wine-zoom {
  display: block;
  cursor: zoom-in;
}

/* 10.4 Étiquettes (état, quantité, classement), prix et bouton panier */
.wine-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: auto;
  list-style: none;
}

.tag {
  padding: 3px 8px;
  border-radius: var(--radius);
  background: var(--plum-tint);
  color: var(--plum-dark);
  font-size: 0.75rem;
  font-weight: 500;
}

/* Prix et bouton panier sur la même ligne, en bas de la carte */
.wine-buy {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 16px;
}

.wine-price {
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 1.375rem;
  line-height: 1;
  color: var(--accent);
}

/* Bouton panier (sans action pour l'instant, le panier sera branché plus tard) */
.wine-cart {
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: var(--radius);
  background: var(--plum);
  color: var(--white);
  cursor: pointer;
  transition: .3s;
}

.wine-cart .icon {
  font-size: 1.125rem;
}

.wine-cart:hover {
  transform: scale(1.04);
  box-shadow: 0 0 20px var(--glow);
}

/* 10.5 Fenêtre de zoom sur la photo (fond assombri, bouton de fermeture violet) */
.zoom {
  margin: auto;
  padding: 0;
  border: 0;
  border-radius: var(--radius);
  background: var(--black);
}

.zoom::backdrop {
  background: var(--veil);
}

.zoom-image {
  display: block;
  width: 640px;
  max-width: 90vw;
  height: auto;
  max-height: 85vh;
  object-fit: contain;
}

.zoom-close {
  position: absolute;
  top: 12px;
  right: 12px;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: var(--radius);
  background: var(--plum);
  color: var(--white);
  cursor: pointer;
  transition: .3s;
}

/* Lueur seulement au survol */
.zoom-close:hover {
  transform: scale(1.04);
  box-shadow: 0 0 32px var(--glow);
}

/* 10.6 Message quand un filtre ne trouve aucune bouteille */
.empty-message {
  padding: 32px;
  border: 1px dashed var(--plum-light);
  border-radius: var(--radius);
  background: var(--plum-tint);
  text-align: center;
}

.empty-message[hidden] {
  display: none;
}

.empty-message a {
  color: var(--plum);
  font-weight: 500;
}

/* 10.7 Message de bas de sélection */
.selection-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 24px;
  margin-top: 48px;
  padding: 32px;
  border-radius: var(--radius);
  background: var(--black);
  color: var(--white);
}

.selection-banner p {
  max-width: 560px;
}

/* 11. Étapes de commande */

/* 11.1 Liste numérotée */
.steps {
  counter-reset: step;
  list-style: none;
}

.step {
  position: relative;
  counter-increment: step;
}

.step::before {
  content: "0" counter(step);
  display: block;
  margin-bottom: 20px;
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 3rem;
  line-height: 1;
  font-variant-numeric: lining-nums;
  color: var(--accent);
}

/* 12. Qui suis-je ? */

/* 12.1 Mise en page en deux colonnes : texte à gauche, carte à droite */
.about-content {
  display: grid;
  grid-template-columns: 3fr 2fr;
  /* En haut : le texte commence à la hauteur de la carte, même si la carte est plus haute */
  align-items: start;
  gap: 64px;
}

.about-content .section-header {
  margin-bottom: 32px;
}

/* 12.2 Paragraphes de présentation */
.about-text {
  display: grid;
  gap: 16px;
  color: var(--text-soft);
}

/* 12.3 Carte : liste de points clés (pastilles comme dans Contact) */
.about-list {
  display: grid;
  gap: 16px;
  list-style: none;
}

.about-item {
  display: flex;
  align-items: center;
  gap: 16px;
  font-weight: 500;
}

/* 12.4 Photo de Nicolas en haut de la carte (affichée dès que assets/images/nicolas.webp existe)
   Portrait carré de 140px aux coins arrondis du site, centré, recadré sur le haut (le visage) */
.about-photo {
  width: 140px;
  height: 140px;
  margin-inline: auto;
  margin-bottom: 24px;
  border-radius: var(--radius);
  object-fit: cover;
  object-position: center top;
}

/* 12.5 Citation signée, séparée de la liste par un trait */
.about-quote {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 1.625rem;
  line-height: 1.25;
}

.about-signature {
  margin-top: 12px;
  font-family: var(--font-text);
  font-weight: 500;
  font-size: 0.8125rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
}

/* 13. Avis clients */

/* 13.1 Collée à « Qui suis-je ? » (même fond) : moins d'espace au-dessus */
.section.reviews {
  padding-top: 0;
}

.reviews-list {
  list-style: none;
}

/* 13.2 Carte : étoiles, commentaire, auteur en bas */
.review {
  display: flex;
  flex-direction: column;
  gap: 16px;
  text-align: left;
}

.review-stars {
  display: flex;
  gap: 4px;
  color: var(--plum);
}

.review-comment {
  flex: 1;
  color: var(--text-soft);
}

/* 13.3 Photo ronde (ou initiales) et nom */
.review-author {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.review-photo {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
}

.review-initials {
  display: grid;
  place-items: center;
  background: var(--plum);
  color: var(--white);
  font-weight: 500;
}

.review-name {
  font-weight: 500;
}

/* 14. FAQ */

/* 14.1 Deux colonnes : titre à gauche, questions à droite */
.faq-content {
  display: grid;
  grid-template-columns: 2fr 3fr;
  align-items: start;
  gap: 64px;
}

.faq-header {
  margin-bottom: 0;
}

.faq-more {
  margin-top: 32px;
  margin-bottom: 16px;
  font-weight: 500;
  color: var(--text);
}

.faq-list {
  display: grid;
  gap: 16px;
}

/* 14.2 Question : bloc arrondi avec lueur au survol (sans agrandissement : le bloc est large) */
.faq-item {
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--surface);
  transition: .3s;
}

.faq-item:hover,
.faq-item[open] {
  border-color: var(--plum);
  box-shadow: 0 0 32px var(--glow);
}

.faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 24px 28px;
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1.25;
  cursor: pointer;
  list-style: none;
}

/* Retire le triangle par défaut (Safari) */
.faq-question::-webkit-details-marker {
  display: none;
}

/* 14.3 Chevron violet qui pivote quand la réponse est ouverte */
.faq-question .icon {
  color: var(--accent);
  transition: .3s;
}

.faq-item[open] .faq-question .icon {
  rotate: 180deg;
}

/* 14.4 Réponse */
.faq-answer {
  padding: 0 28px 24px;
  color: var(--text-soft);
}

/* 15. Contact */

/* 15.1 Mise en page en deux colonnes */
.contact-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 48px;
}

/* 15.2 Liste d'informations */
.contact-list {
  display: grid;
  gap: 16px;
  list-style: none;
}

.contact-item {
  display: flex;
  align-items: center;
  gap: 16px;
}

.contact-label {
  display: block;
  font-weight: 500;
}

/* 15.3 Carte d'appel à l'action */
/* Facebook, Instagram et WhatsApp : 3 boutons de même largeur sur une ligne */
.contact-card .btn-group {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 24px;
}

.contact-card .btn {
  padding-inline: 12px;
}

/* 15.4 Information RGPD sous les boutons */
.contact-privacy {
  margin-top: 16px;
  font-size: 0.8125rem;
  color: var(--text-soft);
}

.contact-privacy .link-button {
  color: var(--plum);
}

/* 16. Pied de page */

/* 16.1 Bandeau sombre : logo et slogan, puis mentions */
.footer {
  padding-block: 72px 32px;
}

.footer-top {
  padding-bottom: 40px;
  border-bottom: 1px solid var(--line-dark);
}

.footer-logo img {
  height: 96px;
}

.footer-text {
  margin-top: 16px;
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--white-soft);
}

/* 16.2 Mentions et avertissement alcool */
.footer-bottom {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  padding-top: 24px;
  font-size: 0.875rem;
  color: var(--white-soft);
}

/* 16.3 Liens vers les pages légales */
.footer-legal {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  list-style: none;
}

/* Couleur reprise du pied de page (.link-button, 5.5), lien violet clair au survol */
.footer-legal .link-button {
  transition: .3s;
}

.footer-legal .link-button:hover {
  color: var(--plum-light);
}

/* 17. Bouton retour en haut */

/* 17.1 Carrés violets avec lueur, fixés en bas à droite : retour en haut et installation de l'application */
.back-to-top,
.pwa-install {
  position: fixed;
  text-decoration: none;
  right: 24px;
  bottom: 24px;
  z-index: 40;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: var(--radius);
  background: var(--plum);
  color: var(--white);
  box-shadow: 0 0 20px var(--glow);
  transition: .3s;
}

.back-to-top:hover,
.pwa-install:hover {
  transform: scale(1.04);
  box-shadow: 0 0 32px var(--glow);
}

/* Installation : toujours visible, en bas à gauche, au niveau du retour en haut */
.pwa-install {
  right: auto;
  left: 24px;
  grid-auto-flow: column;
  gap: 10px;
  width: auto;
  padding: 0 20px;
  border: 0;
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
}

.pwa-install[hidden] {
  display: none;
}

/* 17.2 Avec JS : caché en haut de page, il apparaît après un peu de défilement */
.js .back-to-top {
  opacity: 0;
  visibility: hidden;
}

.js .back-to-top-visible {
  opacity: 1;
  visibility: visible;
}

/* 18. Vérification de l'âge */

/* 18.1 Fenêtre noire centrée, page floutée derrière */
.age-gate {
  width: calc(100% - 32px);
  max-width: 520px;
  margin: auto;
  padding: 40px 32px;
  border: 1px solid var(--plum-dark);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--text);
  text-align: center;
  box-shadow: 0 0 48px var(--glow);
}

.age-gate::backdrop {
  background: var(--veil);
  backdrop-filter: blur(8px);
}

/* La page ne défile pas tant que la fenêtre est ouverte
   html:has(…) : « la page qui contient une fenêtre d'âge ouverte » */
html:has(.age-gate[open]) {
  overflow: hidden;
}

/* 18.2 Choix de la langue : petits boutons en haut à droite, la langue active en violet */
/* La fenêtre ouverte est déjà positionnée (fixed) : la liste se place par rapport à elle */
.age-lang {
  position: absolute;
  top: 16px;
  right: 16px;
  display: flex;
  gap: 8px;
  list-style: none;
}

.age-lang button {
  min-width: 44px;
  min-height: 36px;
  padding: 0 10px;
  border: 1px solid var(--plum-dark);
  border-radius: var(--radius);
  background: transparent;
  color: var(--text);
  font-family: var(--font-text);
  font-weight: 500;
  font-size: 0.8125rem;
  cursor: pointer;
  transition: .3s;
}

.age-lang button:hover {
  transform: scale(1.04);
  box-shadow: 0 0 16px var(--glow);
}

.age-lang .active {
  border-color: var(--plum);
  background: var(--plum);
}

/* 18.3 Logo, question et explication */
.age-logo {
  width: auto;
  height: 88px;
  margin-top: 16px;
  margin-inline: auto;
  margin-bottom: 24px;
}

.age-title {
  margin-bottom: 12px;
  font-size: 2.5rem;
}

.age-text {
  color: var(--text-soft);
}

/* 18.4 Réponses l'une sous l'autre, de la même largeur */
.age-actions {
  flex-direction: column;
  margin-top: 32px;
}

/* 18.5 Message de refus et avertissement */
.age-refused {
  margin-top: 24px;
  padding: 16px;
  border-radius: var(--radius);
  background: var(--plum-tint);
  font-weight: 500;
}

.age-warning {
  margin-top: 24px;
  font-size: 0.8125rem;
  color: var(--text-soft);
}

/* 19. Bandeau d'information */

/* 19.1 Carte noire fixée en bas à gauche (le bouton retour en haut reste à droite) */
.info-banner {
  position: fixed;
  left: 24px;
  bottom: 24px;
  z-index: 45;
  display: flex;
  align-items: center;
  gap: 16px;
  max-width: 560px;
  padding: 16px 20px;
  border: 1px solid var(--plum-dark);
  border-radius: var(--radius);
  background: var(--black);
  color: var(--white);
  box-shadow: 0 0 32px var(--glow);
}

.info-banner[hidden] {
  display: none;
}

.info-banner > .icon {
  color: var(--plum-light);
}

/* 19.2 Texte et lien */
.info-text {
  font-size: 0.875rem;
  color: var(--white-soft);
}

.info-link {
  color: var(--plum-light);
}

.info-close {
  flex-shrink: 0;
}

/* 20. Fenêtres d'informations légales (popover natif) */

/* 20.1 Fenêtre blanche centrée ; seul le texte défile, le titre et la croix restent en haut */
.legal-popup {
  width: calc(100% - 32px);
  max-width: 800px;
  max-height: 85vh;
  margin: auto;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--text);
  box-shadow: 0 0 48px var(--glow);
}

/* La page derrière ne défile pas tant qu'une fenêtre est ouverte
   html:has(…) : « la page qui contient une fenêtre ouverte » (:popover-open) */
html:has(.legal-popup:popover-open) {
  overflow: hidden;
}

.legal-popup:popover-open {
  display: flex;
  flex-direction: column;
}

.legal-popup::backdrop {
  background: var(--veil);
}

.legal-popup-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 24px 32px;
  border-bottom: 1px solid var(--line);
}

.legal-popup-title {
  font-size: 2.25rem;
}

/* La croix violette du zoom, placée ici dans l'en-tête de la fenêtre */
.legal-popup .zoom-close {
  position: static;
  flex-shrink: 0;
}

/* 20.2 Texte qui défile */
/* min-height: 0 permet au bloc de rester dans la fenêtre ; overscroll-behavior empêche de faire défiler la page en bout de texte */
.legal-content {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 32px;
}

.legal-date {
  margin-bottom: 32px;
  color: var(--text-soft);
}

/* 20.3 Titres, paragraphes et listes */
.legal-content h3 {
  margin-top: 40px;
  margin-bottom: 12px;
  font-size: 1.625rem;
}

/* Pas d'espace au-dessus du premier titre (la date est juste au-dessus) */
.legal-content h3:first-of-type {
  margin-top: 0;
}

/* Seuls les paragraphes sans classe (le petit titre garde sa couleur violette) */
.legal-content p:not([class]),
.legal-content li {
  color: var(--text-soft);
}

.legal-content p + p,
.legal-content p + ul,
.legal-content ul + p {
  margin-top: 12px;
}

.legal-content ul {
  display: grid;
  gap: 8px;
  padding-left: 20px;
}

.legal-content a {
  color: var(--plum);
}

/* 20.4 Information à compléter par le client : surlignée pour ne pas être oubliée */
.todo {
  padding: 0 4px;
  border-radius: 4px;
  background: var(--plum-tint);
  color: var(--plum);
  font-weight: 500;
}

/* 20.5 Tableau des stockages sur l'appareil */
.legal-table {
  width: 100%;
  margin-top: 16px;
  border-collapse: collapse;
  font-size: 0.9375rem;
}

.legal-table th,
.legal-table td {
  padding: 12px;
  border: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

.legal-table th {
  background: var(--plum-tint);
  font-weight: 500;
}

/* 21. Panier */

/* 21.1 Bouton de l'en-tête : carré violet avec le nombre de bouteilles en pastille */
.cart-link {
  display: grid;
  place-items: center;
  position: relative;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: var(--radius);
  background: var(--plum);
  color: var(--white);
  text-decoration: none;
  transition: .3s;
}

.cart-link:hover {
  transform: scale(1.04);
  box-shadow: 0 0 20px var(--glow);
}

.cart-count {
  position: absolute;
  top: -8px;
  right: -8px;
  display: grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 11px;
  background: var(--white);
  color: var(--plum);
  font-size: 0.75rem;
  font-weight: 700;
}

.cart-count[hidden] {
  display: none;
}

/* 21.1 bis Panier du menu latéral : caché sur grand écran (le bouton de l'en-tête suffit) */
.nav-cart {
  display: none;
}

/* Bloc panier + langue : sans effet sur grand écran, la langue reste dans la barre */
.nav-actions {
  display: contents;
}

/* Le nombre de bouteilles suit le texte au lieu d'être en pastille sur le coin */
.nav-cart .cart-count {
  position: static;
}

/* 21.2 Message après un ajout : en bas au centre, disparaît seul (script.js) */
.cart-toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  z-index: 46;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  border-radius: var(--radius);
  background: var(--black);
  color: var(--white);
  box-shadow: 0 0 32px var(--glow);
  translate: -50% 0;
}

.cart-toast[hidden] {
  display: none;
}

.cart-toast .icon,
.cart-toast a {
  color: var(--plum-light);
}

/* Carte bouteille : le bouton panier est dans un petit formulaire */
.wine-cart-form {
  display: flex;
}

/* 21.3 Page du panier : bandeau noir en haut (l'en-tête transparent se pose dessus) */
.page-hero {
  padding-block: 180px 64px;
}

.page-hero .section-title {
  margin-bottom: 0;
}

.cart-content {
  display: grid;
  grid-template-columns: 3fr 2fr;
  align-items: start;
  gap: 48px;
}

/* Panier vide */
.cart-empty {
  display: grid;
  justify-items: center;
  gap: 24px;
  max-width: 560px;
  margin-inline: auto;
  text-align: center;
}

.cart-empty > .icon {
  font-size: 2.5rem;
  color: var(--plum);
}

/* 21.4 Lignes : photo, bouteille, nombre, retirer */
.cart-lines {
  display: grid;
  gap: 16px;
  list-style: none;
}

.cart-line {
  display: grid;
  grid-template-columns: 96px 1fr auto auto;
  align-items: center;
  gap: 20px;
  padding: 16px;
  text-align: left;
}

/* Les lignes ne grandissent pas au survol */
.cart-line:hover {
  transform: none;
}

.cart-photo {
  width: 96px;
  height: 96px;
  border-radius: var(--radius);
  object-fit: cover;
}

.cart-name {
  font-size: 1.375rem;
}

.cart-price {
  margin-top: 4px;
  font-weight: 500;
  color: var(--accent);
}

.cart-quantity {
  display: flex;
  align-items: center;
  gap: 8px;
}

.cart-quantity-input {
  width: 72px;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-family: var(--font-text);
  font-size: 1rem;
}

/* Bouton carré avec icône (mettre à jour, retirer) */
.cart-icon-button {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 2px solid var(--plum);
  border-radius: var(--radius);
  background: transparent;
  color: var(--plum);
  cursor: pointer;
  transition: .3s;
}

.cart-icon-button:hover {
  transform: scale(1.04);
  background: var(--plum);
  color: var(--white);
  box-shadow: 0 0 16px var(--glow);
}

/* 21.5 Total et vider le panier */
.cart-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}

.cart-total {
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 1.75rem;
}

.cart-total-note {
  display: block;
  font-family: var(--font-text);
  font-weight: 400;
  font-size: 0.875rem;
  color: var(--text-soft);
}

.cart-clear {
  padding: 0;
  border: 0;
  background: none;
  color: var(--text-soft);
  font: inherit;
  font-size: 0.875rem;
  text-decoration: underline;
  cursor: pointer;
}

/* 21.6 Formulaire de commande */
.cart-order {
  text-align: left;
}

.cart-order:hover {
  transform: none;
}

.cart-order-title {
  margin-bottom: 8px;
  font-size: 2rem;
}

.cart-order-text {
  margin-bottom: 24px;
  font-size: 0.9375rem;
  color: var(--text-soft);
}

.order-form {
  display: grid;
  gap: 16px;
}

/* Libellés des champs (écrits par Symfony avec form_row) et titre du choix de réception */
.order-form label,
.order-choices legend {
  display: block;
  margin-bottom: 6px;
  font-weight: 500;
  font-size: 0.875rem;
}

/* Champs texte du formulaire (les cases et boutons radio ont leur style plus bas) */
.order-form input[type="text"],
.order-form input[type="tel"],
.order-form textarea {
  width: 100%;
  min-height: 48px;
  padding: 10px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-text);
  font-size: 0.9375rem;
  transition: .3s;
}

.order-form input[type="text"]:focus,
.order-form input[type="tel"]:focus,
.order-form textarea:focus {
  border-color: var(--plum);
  box-shadow: 0 0 16px var(--glow);
  outline: none;
}

/* Champ en erreur : Symfony lui ajoute aria-invalid="true" */
.order-form input[aria-invalid="true"],
.order-form select[aria-invalid="true"],
.order-form textarea[aria-invalid="true"] {
  border-color: var(--red);
}

/* Texte d'aide sous un champ (classe écrite par Symfony, aussi utilisée dans l'administration) */
.help-text {
  margin-top: 4px;
  font-size: 0.8125rem;
  color: var(--text-soft);
}

/* Erreurs (liste écrite par Symfony sous le champ ou en haut du formulaire) */
.order-form ul {
  margin-top: 4px;
  list-style: none;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--red);
}

/* Choix de réception et case 18 ans : la case avant le texte */
/* Choix de réception : fieldset sans le cadre ajouté par le navigateur */
.order-choices {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  border: 0;
}

.order-check {
  display: flex;
  align-items: center;
  gap: 10px;
}

.order-check label {
  margin-bottom: 0;
  font-weight: 400;
  cursor: pointer;
}

.order-check input {
  width: 20px;
  height: 20px;
  accent-color: var(--plum);
  cursor: pointer;
}

.order-privacy {
  font-size: 0.8125rem;
  color: var(--text-soft);
}

.order-privacy .link-button {
  color: var(--plum);
}

.order-submit {
  width: 100%;
}

/* 22. Media queries (dans le même ordre que les sections ci-dessus) */

/* 22.1 Grands écrans portables */
@media (max-width: 1200px) {
  /* Utilitaires */
  .grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Menu : liens plus serrés pour tenir sur une ligne */
  .nav,
  .nav-list {
    gap: 20px;
  }

  /* Héros */
  .hero-title {
    font-size: 5rem;
  }

  .hero-year-number {
    font-size: 11rem;
  }

  /* Sélection : 3 bouteilles par ligne */
  .wines {
    grid-template-columns: repeat(3, 1fr);
  }

  /* 3 bouteilles par ligne : 2 espaces de 24px */
  .js .wine-item {
    width: calc((100% - 48px) / 3);
  }
}

/* 22.2 Tablettes paysage */
@media (max-width: 992px) {
  /* Utilitaires */
  .section {
    padding-block: 88px;
  }

  .section-title {
    font-size: 3rem;
  }

  .grid-3 {
    grid-template-columns: repeat(2, 1fr);
  }

  /* En-tête sans JS : les liens passent sous le logo */
  .header-content {
    flex-wrap: wrap;
  }

  .nav {
    order: 3;
    width: 100%;
    padding-bottom: 16px;
  }

  .nav-list {
    flex-wrap: wrap;
    gap: 12px 20px;
  }

  /* En-tête avec JS : seul le bouton burger reste visible (pas de barre, pas de logo) */
  .js .header,
  .js .header-scrolled {
    background: transparent;
    border-bottom-color: transparent;
    pointer-events: none;
  }

  .js .header .logo {
    visibility: hidden;
  }

  /* Menu latéral noir qui glisse depuis la droite (seul le menu est animé) */
  .js .nav {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 60;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 24px;
    width: 80%;
    max-width: 320px;
    height: 100dvh;
    padding: 16px 24px 32px;
    overflow-y: auto;
    background: var(--black);
    color: var(--white);
    transform: translateX(100%);
    visibility: hidden;
    pointer-events: auto;
    /* visibility passe à hidden seulement à la fin du glissement */
    transition: .3s;
  }

  .js .nav-open {
    transform: none;
    visibility: visible;
  }

  /* Page assombrie derrière le menu : voile fixe qui apparaît en fondu (il ne glisse pas avec le menu) */
  .js .header::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 55;
    background: var(--veil);
    opacity: 0;
    visibility: hidden;
    /* visibility passe à hidden seulement à la fin du fondu */
    transition: .3s;
  }

  .menu-open .header::before {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  .js .nav-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
  }

  .js .nav-list {
    margin-left: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .js .nav-link {
    display: block;
    padding-block: 14px;
    border-bottom: 1px solid var(--line-dark);
    font-size: 1.0625rem;
    transition: .3s;
  }

  .js .nav-link::after {
    display: none;
  }

  .js .nav-link:hover,
  .js .nav-link:focus-visible,
  .js .nav-link.active {
    color: var(--plum-light);
  }

  /* Panier et langue côte à côte en bas du menu latéral, même hauteur (48px) */
  .js .nav-actions {
    display: flex;
    gap: 12px;
  }

  /* Le panier prend la place restante, la langue garde sa largeur : tout tient dès 320px */
  .js .nav-cart {
    display: flex;
    flex: 1;
    gap: 8px;
    min-width: 0;
    min-height: 48px;
    padding: 0 12px;
  }

  .js .lang {
    flex-shrink: 0;
  }

  .js .lang-button {
    gap: 6px;
    min-height: 48px;
    padding: 0 12px;
  }

  /* Langue : la liste s'ouvre vers la gauche */

  .js .lang-list {
    right: auto;
    left: 0;
  }

  /* Actions de l'en-tête : seul le bouton du menu reste, le panier passe dans le menu latéral */
  .js .nav-toggle {
    display: grid;
    pointer-events: auto;
  }

  .js .cart-link {
    display: none;
  }

  /* Panier : bouteilles puis formulaire */
  .cart-content {
    grid-template-columns: 1fr;
  }

  /* Héros : image en bandeau en haut (bouteille et verre visibles), texte en dessous */
  /* La largeur de l'image ne descend jamais sous 100% : plus de bande vide à droite */
  .hero {
    padding-top: 300px;
    background:
      linear-gradient(0deg, var(--black) 0%, var(--black) 55%, var(--veil) 85%, transparent 100%),
      linear-gradient(225deg, var(--glow) 0%, transparent 55%),
      url("../images/hero-mobile-he__fa6.webp") left top / max(100%, 924px) auto no-repeat,
      var(--black);
  }

  .hero-content {
    grid-template-columns: 1fr;
  }

  .hero-intro,
  .hero-year {
    grid-column: 1;
  }

  .hero-title {
    font-size: 4.5rem;
  }

  .hero-year-number {
    font-size: 9rem;
  }

  /* Sélection : filtres sur 2 colonnes, 2 bouteilles par ligne */
  .filters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }

  .wines {
    grid-template-columns: repeat(2, 1fr);
  }

  /* 2 bouteilles par ligne : 1 espace de 24px */
  .js .wine-item {
    width: calc((100% - 24px) / 2);
  }

  /* Qui suis-je ? : texte puis carte, l'un sous l'autre */
  .about-content {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  /* FAQ : titre au-dessus des questions */
  .faq-content {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  /* Contact */
  .contact-content {
    grid-template-columns: 1fr;
  }
}

/* 22.3 Tablettes portrait */
@media (max-width: 768px) {
  /* Héros */
  .hero {
    padding-top: 260px;
    padding-bottom: 88px;
    /* Écran de 768px au plus : l'image garde 782px de large, jamais de bande vide à droite */
    background-size: auto, auto, 782px auto;
  }
}

/* 22.4 Mobiles */
@media (max-width: 576px) {
  /* Utilitaires */
  .container {
    width: calc(100% - 32px);
  }

  .section {
    padding-block: 72px;
  }

  .section-title {
    font-size: 2.5rem;
  }

  .card {
    padding: 24px;
  }

  .grid-3,
  .grid-4 {
    grid-template-columns: 1fr;
  }

  /* Boutons empilés sur toute la largeur, tous de la même taille */
  .btn-group {
    flex-direction: column;
  }

  .btn-group .btn {
    width: 100%;
  }

  /* Contact : les 3 boutons réseaux empilés */
  .contact-card .btn-group {
    grid-template-columns: 1fr;
  }

  /* En-tête */
  .logo img {
    height: 52px;
  }

  /* Héros */
  .hero {
    padding-top: 240px;
    /* Écran de 576px au plus : l'image garde 711px de large */
    background-size: auto, auto, 711px auto;
  }

  /* Panier : photo et nom en haut, nombre et retrait en dessous */
  .page-hero {
    padding-block: 120px 48px;
  }

  .cart-line {
    grid-template-columns: 72px 1fr;
  }

  .cart-photo {
    width: 72px;
    height: 72px;
  }

  .cart-quantity {
    grid-column: 1 / 2;
  }

  /* Recherche puis bouton, sur toute la largeur */
  .hero-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .hero-search-field {
    flex: 1;
  }

  .hero-search-input {
    width: 100%;
  }

  /* Bouton de recherche réduit à la loupe : carré de 48px */
  .hero-search .btn {
    flex-shrink: 0;
    width: 48px;
    padding: 0;
  }

  .hero-search .btn-text {
    display: none;
  }

  .hero-title {
    font-size: 3.25rem;
  }

  .hero-year-number {
    font-size: 6rem;
  }

  /* Sélection : filtres sur une seule colonne */
  .filters {
    grid-template-columns: 1fr;
  }

  .wines {
    grid-template-columns: 1fr;
  }

  .js .wine-item {
    width: 100%;
  }

  .selection-banner {
    padding: 24px;
  }

  /* Qui suis-je ? */
  .about-quote {
    font-size: 1.375rem;
  }

  /* FAQ : questions plus petites, marges réduites */
  .faq-question {
    padding: 20px;
    font-size: 1.25rem;
  }

  .faq-answer {
    padding: 0 20px 20px;
  }

  /* Pied de page : mentions l'une sous l'autre */
  .footer-bottom {
    flex-direction: column;
  }

  /* Vérification de l'âge */
  .age-gate {
    padding: 32px 20px;
  }

  .age-lang {
    position: static;
    justify-content: center;
    margin-bottom: 8px;
  }

  .age-title {
    font-size: 2rem;
  }

  /* Bandeau d'information : toute la largeur, bouton en dessous */
  .info-banner {
    left: 16px;
    right: 16px;
    bottom: 16px;
    flex-wrap: wrap;
  }

  .info-text {
    flex: 1;
  }

  .info-close {
    width: 100%;
  }

  /* Fenêtres d'informations légales */
  .legal-popup-header {
    padding: 16px 20px;
  }

  .legal-popup-title {
    font-size: 1.75rem;
  }

  .legal-content {
    padding: 24px 20px;
  }

  .legal-content h3 {
    font-size: 1.375rem;
  }

  .legal-table {
    font-size: 0.8125rem;
  }

  .legal-table th,
  .legal-table td {
    padding: 8px;
  }

  .selection-banner .btn {
    width: 100%;
  }

  /* Boutons retour en haut et installation */
  .back-to-top,
  .pwa-install {
    right: 16px;
    bottom: 16px;
  }

  .pwa-install {
    right: auto;
    left: 16px;
  }
}