/* -----------------------------------------------------------------------
 * La Cave de Lorette — feuille de style
 * Portage fidèle des jetons de design définis dans app/globals.css de la
 * v0 Next.js (Tailwind @theme) vers du CSS classique. Voir
 * architecture/direction-artistique.md (projet Claude) pour le détail de
 * l'intention visuelle complète.
 * ---------------------------------------------------------------------*/

:root {
  --color-prune-950: #200910;
  --color-prune-900: #2c0f1a;
  --color-prune-800: #3c1523;
  --color-prune-700: #4d1c2c;
  --color-prune-500: #7a3145;

  --color-ivory-50: #faf7f1;
  --color-ivory-100: #f3ede1;
  --color-paper-200: #ebe2d2;

  --color-brown-700: #6b4226;
  --color-green-900: #212f24;

  --color-ink-900: #1c1712;
  --color-ink-600: #4a433c;

  --color-accent-500: #bd7a3a;
  --color-accent-600: #9f6530;

  --color-signal-available: #3f6b4f;
  --color-signal-low: #bd7a3a;
  --color-signal-full: #7a3145;

  /* Couleur officielle de la ligne 12 du métro parisien, utilisée
     uniquement pour le badge .metro-badge__ligne (19/09/2026). */
  --color-metro-12: #00814f;

  --font-serif: "Fraunces", Georgia, serif;
  --font-sans: "Public Sans", system-ui, -apple-system, sans-serif;

  --max-width: 72rem; /* équivalent max-w-6xl */
}

/* --- Réinitialisation minimale ------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--color-ivory-50);
  color: var(--color-ink-900);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
}
main { flex: 1 0 auto; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3 { font-family: var(--font-serif); margin: 0; font-weight: 500; }
p { margin: 0; }

.container {
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: 1rem;
}
@media (min-width: 640px) {
  .container { padding-inline: 1.5rem; }
}

/* --- Animation d'entrée (respecte prefers-reduced-motion) --------------- */
@media (prefers-reduced-motion: no-preference) {
  .fade-in-up { animation: fade-in-up 0.6s ease-out both; }
}
@keyframes fade-in-up {
  from { opacity: 0; transform: translateY(0.5rem); }
  to { opacity: 1; transform: translateY(0); }
}

/* --- Texture grain discrète (aplats de couleur) -------------------------- */
.texture-grain { position: relative; isolation: isolate; }
.texture-grain::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.05;
  background-image: repeating-linear-gradient(115deg, #000 0px, #000 1px, transparent 1px, transparent 3px);
}

/* --- Boutons -------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  font-size: 0.85rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-family: var(--font-sans);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.btn--primary { background: var(--color-prune-900); color: var(--color-ivory-50); }
.btn--primary:hover { background: var(--color-prune-800); }
.btn--inverse { background: var(--color-ivory-50); color: var(--color-prune-900); }
.btn--inverse:hover { background: var(--color-paper-200); }
.btn--secondary { background: transparent; color: var(--color-prune-900); border-color: var(--color-prune-900); }
.btn--secondary:hover { background: var(--color-prune-900); color: var(--color-ivory-50); }
.btn--ghost { background: transparent; color: var(--color-prune-900); padding-inline: 0.25rem; }
.btn--ghost:hover { color: var(--color-accent-600); }

/* --- En-tête / navigation ------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  border-bottom: 1px solid var(--color-paper-200);
  background: rgba(250, 247, 241, 0.95);
  backdrop-filter: blur(8px);
}
.site-header__row {
  max-width: var(--max-width);
  margin-inline: auto;
  padding: 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
@media (min-width: 640px) { .site-header__row { padding-inline: 1.5rem; } }

.site-header__logo {
  display: flex;
  align-items: center;
}
/* Logo (assets/img/logo.svg, ajouté le 15/09/2026) : hauteur contrainte pour
   rester discret dans le header sticky (direction-artistique.md, point 7 —
   "le logo doit rester discret"), largeur laissée libre puisque le fichier
   est un vectoriel dont les proportions ne doivent pas être déformées. */
.site-header__logo-img {
  display: block;
  height: 3rem;
  width: auto;
}
@media (min-width: 640px) { .site-header__logo-img { height: 4rem; } }

.site-nav--desktop { display: none; align-items: center; gap: 2rem; }
.site-nav__link { font-size: 0.9rem; color: var(--color-ink-900); transition: color 0.15s ease; }
.site-nav__link:hover, .site-nav__link.is-active { color: var(--color-accent-600); }
.site-nav__link--langue { font-weight: 600; letter-spacing: 0.04em; border: 1px solid var(--color-paper-200); padding: 0.15rem 0.5rem; }

@media (min-width: 768px) {
  .site-nav--desktop { display: flex; }
  .menu-toggle { display: none; }
}

/* Sélecteur de langue toujours visible en mobile (19/09/2026) : avant, il
   fallait déplier tout le menu hamburger pour le trouver, ce qui le
   rendait peu visible pour un visiteur qui ne connaît pas déjà la version
   anglaise. Cachée dès l'affichage desktop, où le sélecteur figure déjà
   dans .site-nav--desktop. */
.site-header__langue-mobile {
  display: inline-flex;
  align-items: center;
  margin-right: 0.75rem;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--color-ink-900);
  border: 1px solid var(--color-paper-200);
  padding: 0.15rem 0.5rem;
}
@media (min-width: 768px) { .site-header__langue-mobile { display: none; } }

.menu-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}
.menu-toggle__bars {
  position: relative;
  display: block;
  width: 1.25rem;
  height: 0.875rem;
}
.menu-toggle__bars span {
  position: absolute;
  left: 0;
  width: 1.25rem;
  height: 1px;
  background: var(--color-ink-900);
  transition: transform 0.15s ease, opacity 0.15s ease;
}
.menu-toggle__bars span:nth-child(1) { top: 0; }
.menu-toggle__bars span:nth-child(2) { top: 50%; transform: translateY(-50%); }
.menu-toggle__bars span:nth-child(3) { bottom: 0; }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars span:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.site-nav--mobile {
  border-top: 1px solid var(--color-paper-200);
  background: var(--color-ivory-50);
}
.site-nav--mobile[hidden] { display: none; }
.site-nav--mobile ul { max-width: var(--max-width); margin-inline: auto; padding: 0.5rem 1rem; }
@media (min-width: 640px) { .site-nav--mobile ul { padding-inline: 1.5rem; } }
.site-nav--mobile a { display: block; padding: 0.75rem 0; font-size: 1rem; color: var(--color-ink-900); }
.site-nav--mobile a[aria-current="page"] { color: var(--color-accent-600); }
@media (min-width: 768px) { .site-nav--mobile { display: none !important; } }

/* --- Pied de page ---------------------------------------------------------- */
.site-footer {
  margin-top: 6rem;
  border-top: 1px solid var(--color-paper-200);
  background: var(--color-prune-950);
  color: var(--color-ivory-100);
}
.site-footer__grid {
  max-width: var(--max-width);
  margin-inline: auto;
  padding: 3.5rem 1rem;
  display: grid;
  gap: 2.5rem;
}
@media (min-width: 640px) { .site-footer__grid { padding-inline: 1.5rem; } }
@media (min-width: 768px) { .site-footer__grid { grid-template-columns: repeat(3, 1fr); } }

.site-footer__brand { font-family: var(--font-serif); font-size: 1.125rem; }
/* Logo dans le pied de page (15/09/2026) : le texte du logo est foncé, donc
   peu lisible tel quel sur le fond très sombre du footer — une petite
   plaque claire (même ivoire que le header) lui redonne du contraste, avec
   l'accord de Georges le temps d'obtenir éventuellement une variante claire
   du logo pour fond sombre. */
.site-footer__logo-plaque {
  display: inline-flex;
  margin: 0 0 0.5rem;
  padding: 0.6rem 0.9rem;
  background: var(--color-ivory-50);
  border-radius: 0.25rem;
}
.site-footer__logo-img { display: block; height: 3.5rem; width: auto; }
.site-footer__address { margin-top: 0.75rem; font-size: 0.875rem; color: rgba(243, 237, 225, 0.7); }
/* Petit saut de ligne visuel entre l'adresse et le lien "Voir les
   horaires" (demande de Georges du 19/09/2026) : chacun a maintenant son
   propre paragraphe, plutôt qu'un simple <br> qui les collait ensemble. */
.site-footer__metro { margin-top: 0.85rem; font-size: 0.875rem; color: rgba(243, 237, 225, 0.7); }
.site-footer__horaires-lien { margin-top: 1rem; font-size: 0.875rem; }
.site-footer__horaires-lien a { text-decoration: underline; text-underline-offset: 2px; color: rgba(243, 237, 225, 0.85); }
.site-footer__horaires-lien a:hover { color: var(--color-accent-500); }
.site-footer__heading { font-size: 0.8rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; color: rgba(243, 237, 225, 0.6); }
.site-footer__links { margin-top: 0.75rem; display: grid; gap: 0.5rem; font-size: 0.875rem; }
.site-footer__links a:hover { color: var(--color-accent-500); }
.site-footer__bottom {
  border-top: 1px solid rgba(243, 237, 225, 0.1);
  padding: 1rem;
  font-size: 0.75rem;
  color: rgba(243, 237, 225, 0.5);
}
@media (min-width: 640px) { .site-footer__bottom { padding-inline: 1.5rem; } }

/* --- Badge métro (pictogramme + numéro de ligne) ---------------------------
 * Ajouté le 19/09/2026 à la demande de Georges, à 3 endroits : page
 * d'accueil, pied de page, page contact (voir badge_metro_saint_georges()
 * dans includes/i18n.php). Les deux ronds ont des couleurs fixes plutôt
 * qu'héritées, pour rester lisibles aussi bien sur fond clair (accueil,
 * contact) que sur le fond très sombre du pied de page. */
.metro-badge { display: inline-flex; align-items: center; gap: 0.5rem; }
.metro-badge__picto,
.metro-badge__ligne {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 0.75rem;
  line-height: 1;
}
.metro-badge__picto { background: var(--color-ivory-50); color: var(--color-prune-950); border: 1px solid var(--color-paper-200); }
.metro-badge__ligne { background: var(--color-metro-12); color: #fff; }
.metro-badge__texte { font-size: 0.875rem; }

/* --- PageIntro (pages intérieures) ------------------------------------------ */
.page-intro { max-width: var(--max-width); margin-inline: auto; padding: 4rem 1rem 1rem; }
@media (min-width: 640px) { .page-intro { padding-inline: 1.5rem; } }
.page-intro__eyebrow { font-size: 0.75rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-accent-600); }
.page-intro__title { margin-top: 0.75rem; font-size: 2.25rem; color: var(--color-prune-900); }
.page-intro__description { margin-top: 1rem; max-width: 42rem; color: var(--color-ink-600); }

/* --- Placeholder photo (en attendant les vrais visuels) --------------------
 * Reprend fidèlement components/ui/PlaceholderPhoto.tsx de la v0 : dégradé
 * diagonal teinté + grain discret (.texture-grain, voir plus haut) +
 * libellé en italique serif ancré en bas à gauche — jamais un simple bloc
 * de couleur uni avec du texte centré. */
.placeholder-photo {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  padding: 1rem;
  color: var(--color-ivory-100);
  background: linear-gradient(135deg, var(--color-prune-900), var(--color-prune-800) 50%, var(--color-prune-950));
}
.placeholder-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.05;
  background-image: repeating-linear-gradient(115deg, #000 0px, #000 1px, transparent 1px, transparent 3px);
}
.placeholder-photo__label {
  position: relative;
  z-index: 1;
  margin: 0;
  font-family: var(--font-serif);
  font-size: 0.85rem;
  font-style: italic;
  opacity: 0.8;
}
.placeholder-photo--paper { color: var(--color-ink-600); background: linear-gradient(135deg, var(--color-paper-200), var(--color-ivory-100) 50%, var(--color-paper-200)); }
.placeholder-photo--green { color: var(--color-ivory-100); background: linear-gradient(135deg, var(--color-green-900), var(--color-prune-950) 50%, var(--color-green-900)); }
.placeholder-photo--fill { position: absolute; inset: 0; width: 100%; height: 100%; }
.placeholder-photo--square { aspect-ratio: 1 / 1; }
.placeholder-photo--wide { aspect-ratio: 21 / 9; }
.placeholder-photo--four-three { aspect-ratio: 4 / 3; }
.placeholder-photo--seize-dix { aspect-ratio: 16 / 10; }
.placeholder-photo--seize-neuf { aspect-ratio: 16 / 9; }

/* Photo réellement envoyée depuis l'administration : remplace le bloc
 * .placeholder-photo dans le même emplacement (même classe de mise en page
 * pour l'aspect-ratio — ex. .product-card__photo), en remplissant tout
 * l'espace disponible sans le déformer. */
.photo-remplie { display: block; width: 100%; height: 100%; object-fit: cover; }

/* --- Accueil ---------------------------------------------------------------- */
.hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 86vh;
  overflow: hidden;
}
.hero__overlay {
  position: absolute;
  inset: 0;
  /* Assombrissement renforcé (18/09/2026) : la première photo réelle posée
     ici (une scène de dégustation, plus chargée visuellement qu'un simple
     aplat de couleur) rendait le titre difficile à lire à l'endroit où il
     se pose (bas de la section, cf. .hero__content). Le dégradé garde
     désormais une bonne opacité sur toute la moitié basse plutôt que de
     s'éclaircir dès 60% de la hauteur. */
  background: linear-gradient(to top, rgba(32, 9, 16, 0.92) 0%, rgba(32, 9, 16, 0.85) 40%, rgba(32, 9, 16, 0.55) 65%, rgba(32, 9, 16, 0.15) 100%);
}
.hero__content {
  position: relative;
  z-index: 10;
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
  padding: 0 1rem 4rem;
}
@media (min-width: 640px) { .hero__content { padding-inline: 1.5rem; } }
.hero__title {
  max-width: 32rem;
  font-size: 2.25rem;
  line-height: 1.2;
  color: var(--color-ivory-50);
}
@media (min-width: 640px) { .hero__title { font-size: 3rem; } }
.hero__text { margin-top: 1rem; max-width: 28rem; color: rgba(243, 237, 225, 0.8); }
/* Sous-titre court entre le titre et le texte du bandeau (21/09/2026,
   correctifs de texte) : légèrement plus affirmé que .hero__text (plus
   opaque, un peu plus grand) pour marquer une vraie étape de lecture,
   sans rivaliser avec .hero__title. */
.hero__subtitle { margin-top: 0.75rem; max-width: 30rem; font-size: 1.15rem; color: rgba(243, 237, 225, 0.92); }
.hero__cta { margin-top: 2rem; }

.section { max-width: var(--max-width); margin-inline: auto; padding: 5rem 1rem; }
@media (min-width: 640px) { .section { padding-inline: 1.5rem; } }
.section--paper { max-width: none; padding-inline: 0; background: rgba(235, 226, 210, 0.4); }
.section--paper > .container { padding-block: 5rem; }
.section--dark { max-width: none; padding-inline: 0; background: var(--color-prune-950); color: var(--color-ivory-50); }
.section--dark > .container { padding-block: 5rem; }

.section-grid-2 { display: grid; gap: 2.5rem; }
@media (min-width: 768px) { .section-grid-2 { grid-template-columns: repeat(2, 1fr); align-items: center; } }

.eyebrow { font-size: 0.75rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-accent-600); }
.eyebrow--on-dark { color: var(--color-accent-500); }
.section-title { margin-top: 0.75rem; font-size: 1.875rem; color: var(--color-prune-900); }
.section--dark .section-title { color: var(--color-ivory-50); }
.section-lede { margin-top: 1rem; color: var(--color-ink-600); }

.section-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.section-header .btn--ghost { display: none; }
@media (min-width: 640px) { .section-header .btn--ghost { display: inline-flex; } }

/* align-items: start (19/09/2026) : sans cela, une grille CSS étire par
 * défaut chaque carte à la hauteur de la plus haute de sa rangée — la
 * photo d'une carte (calée à 100% de la hauteur de sa carte) se
 * retrouvait alors elle aussi étirée bien au-delà de son rapport
 * largeur/hauteur voulu dès qu'une carte voisine avait un nom ou une
 * description plus longue, avec un texte qui pouvait déborder sur la
 * rangée suivante. Même cause et même correctif que .carousel__track un
 * peu plus bas dans ce fichier. */
.cards-grid { margin-top: 2.5rem; display: grid; gap: 2rem; align-items: start; }
@media (min-width: 640px) { .cards-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .cards-grid { grid-template-columns: repeat(3, 1fr); } }

.placeholder-note {
  margin-top: 2.5rem;
  padding: 1.5rem;
  border: 1px dashed var(--color-paper-200);
  font-size: 0.9rem;
  color: var(--color-ink-600);
}
.section--dark .placeholder-note { border-color: rgba(243, 237, 225, 0.25); color: rgba(243, 237, 225, 0.7); }

.info-box {
  display: grid;
  gap: 2.5rem;
  border: 1px solid var(--color-paper-200);
  padding: 2rem;
}
@media (min-width: 640px) { .info-box { padding: 3rem; } }
@media (min-width: 768px) { .info-box { grid-template-columns: repeat(3, 1fr); } }
.info-box__value { margin-top: 0.75rem; font-family: var(--font-serif); font-size: 1.25rem; color: var(--color-prune-900); }
.info-box__sub { margin-top: 0.25rem; font-size: 0.875rem; color: var(--color-ink-600); }
.info-box__cta { display: flex; align-items: flex-start; }
@media (min-width: 768px) { .info-box__cta { justify-content: flex-end; } }

/* --- Page "La Cave" ---------------------------------------------------------- */
.text-block { max-width: 48rem; margin-inline: auto; padding: 4rem 1rem; }
@media (min-width: 640px) { .text-block { padding-inline: 1.5rem; } }
.text-block__body { margin-top: 1.5rem; display: grid; gap: 1rem; }
.text-block__body p { margin: 0; }
.text-block__subtitle { margin-top: 1.5rem; font-size: 1.35rem; color: var(--color-prune-900); }

.team-block {
  max-width: 48rem;
  margin-inline: auto;
  padding: 4rem 1rem;
  border-top: 1px solid var(--color-paper-200);
  display: grid;
  gap: 2rem;
}
@media (min-width: 640px) { .team-block { grid-template-columns: repeat(2, 1fr); padding-inline: 1.5rem; } }

/* --- Page Contact ------------------------------------------------------------ */
.contact-grid { max-width: 56rem; margin-inline: auto; padding: 3rem 1rem; display: grid; gap: 2.5rem; }
@media (min-width: 640px) { .contact-grid { padding-inline: 1.5rem; } }
@media (min-width: 768px) { .contact-grid { grid-template-columns: repeat(2, 1fr); } }
.contact-info > div + div { margin-top: 1.5rem; }
.contact-info__value { margin-top: 0.25rem; color: var(--color-ink-900); }
.contact-hours p { margin: 0; }
.contact-hours__note { margin-top: 0.5rem; font-size: 0.85rem; color: var(--color-ink-600); }
.contact-hours__jour { font-weight: 500; }
.contact-hours__jour--ouvert { color: var(--color-signal-available); }
.contact-hours__jour--ferme { color: var(--color-signal-full); }
.contact-map {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 0.9rem;
  border: 1px solid var(--color-paper-200);
  background: rgba(235, 226, 210, 0.4);
}
.contact-map__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.contact-map__overlay { position: absolute; inset: 0; background: rgba(32, 9, 16, 0.55); }
.contact-map__content { position: relative; z-index: 1; color: var(--color-ivory-50); }

/* --- Carte produit (catalogue) -----------------------------------------------
 * Reprend components/public/ProductCard.tsx de la v0 : grande photo (3:4),
 * peu d'informations, pas d'encadré — le produit se juge sur la photo et
 * l'origine, pas sur une fiche technique façon catalogue (point 14 de la
 * direction artistique). */
.product-card { display: block; }
.product-card__photo { aspect-ratio: 3 / 4; }
.product-card__category { margin-top: 1rem; font-size: 0.7rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-accent-600); }
.product-card__name { margin-top: 0.25rem; font-size: 1.1rem; color: var(--color-prune-900); transition: color 0.15s ease; }
.product-card:hover .product-card__name { color: var(--color-accent-600); }
.product-card__desc { margin-top: 0.25rem; font-size: 0.9rem; color: var(--color-ink-600); }
.product-card__price { margin-top: 0.35rem; font-size: 0.9rem; font-weight: 500; color: var(--color-ink-900); }
.product-card__unavailable { margin-top: 0.25rem; font-size: 0.75rem; color: var(--color-signal-full); }

/* --- Fiche produit détaillée --------------------------------------------------
 * Reprend app/produits/[slug]/page.tsx de la v0 : le titre principal (H1)
 * est le nom du producteur (à défaut, le nom du produit lui-même), avec le
 * nom du produit affiché juste en dessous en sous-titre — cohérent avec le
 * parti pris éditorial "on vend un producteur avant une bouteille". */
/* align-items: start (19/09/2026) : même cause et même correctif que
 * .carousel__track et .cards-grid un peu plus haut dans ce fichier — sans
 * cela, la colonne photo était étirée à la hauteur de la colonne texte
 * (qui varie avec la description et, depuis peu, la section "Notre
 * avis"), ce qui déformait la photo bien au-delà de son format 3:4 dès
 * que le texte s'allongeait.
 *
 * Correctif complémentaire du 20/09/2026 : `align-items: start` ne
 * suffisait pas ici, contrairement à .cards-grid, parce que la photo
 * (.product-detail__photo) est ici directement une case de la grille,
 * alors que dans .cards-grid la photo est nichée à l'intérieur d'une
 * carte qui, elle, est la case de la grille. Dans une grille CSS, la
 * hauteur d'une case reste une valeur fixe et utilisable par ses enfants
 * en pourcentage, même quand `align-items: start` empêche l'élément de la
 * remplir visuellement. Comme la photo utilisait `height: 100%` (via la
 * classe .photo-remplie) directement sur la case de la grille, ce
 * pourcentage se calculait quand même sur la hauteur complète de la
 * rangée (celle de la colonne de texte, la plus haute des deux), d'où
 * l'étirement malgré le premier correctif. La photo est maintenant
 * entourée d'un <div> intermédiaire (voir produit.php) qui porte cette
 * classe .product-detail__photo : c'est ce <div>, avec son format 3:4
 * fixé par aspect-ratio, qui est la case de la grille, et la photo à
 * l'intérieur se cale sur SA hauteur à lui (déjà correcte), sans jamais
 * revenir à la hauteur de la rangée. Même schéma que .event-card__photo,
 * déjà construit ainsi depuis le début et jamais touché par ce bug. */
.product-detail { max-width: 64rem; margin-inline: auto; padding: 4rem 1rem; display: grid; gap: 3rem; align-items: start; }
@media (min-width: 640px) { .product-detail { padding-inline: 1.5rem; } }
@media (min-width: 768px) { .product-detail { grid-template-columns: repeat(2, 1fr); } }
.product-detail__photo { aspect-ratio: 3 / 4; }
.product-detail__subtitle { margin-top: 0.25rem; font-size: 1.1rem; color: var(--color-ink-600); }
.product-detail__price { font-family: var(--font-serif); font-size: 1.5rem; color: var(--color-prune-900); }
.product-detail__cta { margin-top: 2rem; display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; }

/* "Notre avis" (19/09/2026) : note de dégustation facultative, remplie au
   cas par cas dans l'admin — n'apparaît que si elle est renseignée (voir
   produit.php). Mise en forme volontairement distincte de la description
   (bordure fine, fond légèrement teinté, texte en italique) pour bien la
   lire comme un avis personnel de la cave plutôt que comme une fiche
   technique. */
.product-detail__note {
  margin-top: 1.5rem;
  padding: 1.25rem 1.5rem;
  border-left: 3px solid var(--color-accent-500);
  background: var(--color-paper-200);
}
.product-detail__note p:not(.eyebrow) {
  margin: 0.5rem 0 0;
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--color-ink-900);
}

/* --- Lien "retour" discret (fiche produit / article) -------------------------
 * Volontairement distinct des .btn (pas de retour dans la v0) : un texte
 * simple, sans encadré ni majuscules, pour rester en retrait par rapport
 * au vrai bouton d'action de la page. */
.back-link { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.85rem; color: var(--color-prune-900); }
.back-link:hover { color: var(--color-accent-600); }

/* --- Carte article (actualités, aspect magazine) ---------------------------- */
.article-card { display: block; }
.article-card__category { margin-top: 1rem; font-size: 0.7rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-accent-600); }
/* Titre et extrait limités à un nombre de lignes fixe (19/09/2026), pour
   que toutes les cartes gardent une hauteur de texte comparable ("...").
   Le texte complet reste bien sûr visible sur la fiche article elle-même.
   Correctif secondaire : la vraie cause du carrousel qui obligeait à
   faire défiler (photo BNL) était ailleurs, voir .carousel__track un peu
   plus bas dans ce fichier. */
.article-card__title {
  margin-top: 0.25rem;
  font-size: 1.1rem;
  color: var(--color-prune-900);
  transition: color 0.15s ease;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.article-card:hover .article-card__title { color: var(--color-accent-600); }
.article-card__excerpt {
  margin-top: 0.25rem;
  font-size: 0.9rem;
  color: var(--color-ink-600);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.article-card--dark .article-card__category--dark { color: var(--color-accent-500); }
.article-card--dark .article-card__title--dark { color: var(--color-ivory-50); }
.article-card--dark:hover .article-card__title--dark { color: var(--color-accent-500); }
.article-card--dark .article-card__excerpt--dark { color: rgba(243, 237, 225, 0.7); }

/* --- Carrousel (16/09/2026) --------------------------------------------------
 * Défilement horizontal natif (overflow-x + scroll-snap), fonctionne au
 * doigt sur mobile sans JavaScript ; les flèches (.carousel__nav) sont un
 * confort en plus, ajouté par assets/js/carousel.js. Générique, pas
 * spécifique aux actualités : réutilisable pour un futur carrousel photo.
 *
 * Correctif du 19/09/2026 (vraie cause du "il faut faire défiler pour
 * tout voir" signalé par Georges) : par défaut, un conteneur flex étire
 * ses cartes à la hauteur de la plus haute d'entre elles ; la photo d'une
 * carte (qui se dessine à 100% de la hauteur de sa carte) se retrouvait
 * donc elle aussi étirée bien au-delà de son rapport largeur/hauteur
 * voulu (16:10) dès qu'une carte voisine avait plus de texte — le texte
 * en dessous de la photo débordait alors de la carte, provoquant la
 * barre de défilement verticale constatée. `align-items: flex-start`
 * empêche cet étirement : chaque photo garde son rapport 16:10 et sa
 * propre hauteur, indépendamment du texte des cartes voisines.
 * `overflow-y: hidden` en garde-fou, au cas où un débordement resterait
 * malgré tout (le survol horizontal seul reste possible). */
.carousel { position: relative; margin-top: 2.5rem; }
.carousel__track {
  display: flex;
  align-items: flex-start;
  gap: 1.5rem;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 0.25rem 0.25rem 0.75rem;
  -webkit-overflow-scrolling: touch;
}
.carousel__track::-webkit-scrollbar { height: 6px; }
.carousel__track::-webkit-scrollbar-thumb { background: rgba(243, 237, 225, 0.3); border-radius: 999px; }
.carousel__item { flex: 0 0 260px; scroll-snap-align: start; }
@media (min-width: 768px) { .carousel__item { flex-basis: 320px; } }
.carousel__nav {
  position: absolute;
  top: 40%;
  transform: translateY(-50%);
  z-index: 2;
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 999px;
  background: var(--color-ivory-50);
  color: var(--color-prune-900);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}
.carousel__nav:hover { background: var(--color-accent-500); color: var(--color-ivory-50); }
.carousel__nav--prev { left: -0.75rem; }
.carousel__nav--next { right: -0.75rem; }
@media (max-width: 640px) {
  .carousel__nav { width: 2rem; height: 2rem; font-size: 1.25rem; }
  .carousel__nav--prev { left: -0.4rem; }
  .carousel__nav--next { right: -0.4rem; }
}

/* --- Liste des offres --------------------------------------------------------
 * Reprend app/offres/page.tsx de la v0 : pas de grille de cartes ici,
 * chaque offre est un bloc encadré pleine largeur (photo carrée à gauche,
 * texte à droite) — une offre se lit, elle ne se parcourt pas vite.
 *
 * align-items: start + photo entourée d'un <div> (20/09/2026) : même bug
 * et même correctif que .product-detail un peu plus haut dans ce fichier
 * — une description d'offre longue aurait fini par déformer la photo
 * exactement de la même façon, même si personne ne l'avait encore
 * signalé. Corrigé par précaution avant que ça n'arrive. */
.offers-list { max-width: 56rem; margin-inline: auto; padding: 3rem 1rem 5rem; display: grid; gap: 2.5rem; }
@media (min-width: 640px) { .offers-list { padding-inline: 1.5rem; } }
.offer-card { display: grid; gap: 1.5rem; border: 1px solid var(--color-paper-200); padding: 1.5rem; align-items: start; }
@media (min-width: 640px) { .offer-card { grid-template-columns: 220px 1fr; padding: 2rem; } }
.offer-card__photo { aspect-ratio: 1 / 1; width: 100%; }
.offer-card__title { font-size: 1.5rem; color: var(--color-prune-900); }
.offer-card__desc { margin-top: 0.5rem; color: var(--color-ink-900); }
.offer-card__period { margin-top: 1rem; font-size: 0.7rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-accent-600); }

/* --- Formules de dégustation (degustation-vin-paris-9.php, 29/09/2026) ----
   Cartes admin-gérées (admin/formules-degustation.php) : même esprit que
   .offer-card (bordure fine, pas d'ombre) mais sans photo — l'accent est
   mis sur les informations pratiques (durée/tarif/capacité), affichées en
   ligne de badges façon .offer-card__period plutôt qu'en texte courant. */
.formules-grid { margin-top: 2.5rem; display: grid; gap: 1.5rem; }
@media (min-width: 640px) { .formules-grid { grid-template-columns: repeat(2, 1fr); } }
.formule-card { display: flex; flex-direction: column; border: 1px solid var(--color-paper-200); padding: 1.5rem; }
.formule-card__nom { font-size: 1.25rem; color: var(--color-prune-900); }
.formule-card__accroche { margin-top: 0.4rem; font-style: italic; color: var(--color-ink-600); }
.formule-card__meta { margin-top: 1rem; display: flex; flex-wrap: wrap; gap: 0.5rem 0.75rem; }
.formule-card__meta span { font-size: 0.7rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-accent-600); }
.formule-card__inclus { margin-top: 1rem; color: var(--color-ink-900); }
.formule-card__actions { margin-top: 1.25rem; display: flex; flex-wrap: wrap; gap: 0.75rem; }

/* --- Badge de disponibilité ---------------------------------------------------
 * Reprend components/ui/Badge.tsx de la v0 : le texte est toujours
 * explicite ("8 places disponibles"), le point coloré n'est qu'un renfort
 * visuel décoratif — jamais la seule information (accessibilité). */
.badge { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.85rem; font-weight: 500; }
.badge::before { content: ""; width: 0.4rem; height: 0.4rem; border-radius: 50%; background: currentColor; }
.badge--available { color: var(--color-signal-available); }
.badge--low { color: var(--color-signal-low); }
.badge--full { color: var(--color-signal-full); }
.badge--closed { color: var(--color-ink-600); }
.badge--soon { color: var(--color-accent-600); }
.badge--private { color: var(--color-ink-600); }

/* --- Cartes et fiches événement ------------------------------------------------
 * Reprend components/public/EventCard.tsx et app/evenements/[slug]/page.tsx
 * de la v0 : la date comme élément graphique fort (encart superposé sur la
 * photo), tarif et disponibilité compréhensibles au premier coup d'œil. */
.events-grid { margin-top: 2.5rem; display: grid; gap: 2rem; }
@media (min-width: 640px) { .events-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .events-grid { grid-template-columns: repeat(3, 1fr); } }
.event-card { display: block; border: 1px solid var(--color-paper-200); background: var(--color-ivory-50); transition: box-shadow 0.15s ease; }
.event-card:hover { box-shadow: 0 8px 24px rgba(58, 13, 26, 0.06); }
.event-card__photo-wrap { position: relative; }
.event-card__photo { aspect-ratio: 4 / 3; }
.event-card__date { position: absolute; left: 0; top: 0; display: flex; flex-direction: column; align-items: center; background: var(--color-ivory-50); color: var(--color-prune-900); padding: 0.6rem 1rem; }
.event-card__date-day { font-family: var(--font-serif); font-size: 1.5rem; line-height: 1; }
.event-card__date-month { font-size: 0.65rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; }
.event-card__body { padding: 1.25rem; display: grid; gap: 0.6rem; }
.event-card__kind { font-size: 0.7rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-accent-600); }
.event-card__title { font-size: 1.2rem; color: var(--color-prune-900); transition: color 0.15s ease; }
.event-card:hover .event-card__title { color: var(--color-accent-600); }
.event-card__time { font-size: 0.9rem; color: var(--color-ink-600); }
.event-card__footer { margin-top: 0.5rem; display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; }
.event-card__price { font-size: 0.9rem; font-weight: 500; color: var(--color-ink-900); }

.event-detail { max-width: 64rem; margin-inline: auto; padding: 4rem 1rem; }
@media (min-width: 640px) { .event-detail { padding-inline: 1.5rem; } }
.event-detail__photo { aspect-ratio: 16 / 9; }
.event-detail__grid { margin-top: 2.5rem; display: grid; gap: 2.5rem; }
@media (min-width: 768px) { .event-detail__grid { grid-template-columns: 2fr 1fr; } }
.event-detail__host { margin-top: 1.5rem; font-size: 0.9rem; color: var(--color-ink-600); }
.event-detail__aside { height: fit-content; display: grid; gap: 1.5rem; border: 1px solid var(--color-paper-200); padding: 1.5rem; }
.event-detail__aside-label { font-size: 0.7rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-accent-600); }
.event-detail__aside-value { margin-top: 0.25rem; font-family: var(--font-serif); font-size: 1.1rem; color: var(--color-prune-900); }
.event-detail__aside-sub { font-size: 0.85rem; color: var(--color-ink-600); }
.event-detail__status { font-size: 0.85rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.03em; color: var(--color-prune-900); }

/* --- Formulaire d'inscription à un événement ---------------------------------- */
.registration-form { display: grid; gap: 1.25rem; }
.champ-piege { position: absolute; left: -9999px; top: -9999px; width: 1px; height: 1px; overflow: hidden; }
.registration-form h2 { font-size: 1.2rem; color: var(--color-prune-900); }
.registration-form label { display: block; font-size: 0.9rem; font-weight: 500; color: var(--color-ink-900); }
.registration-form input[type="text"],
.registration-form input[type="email"],
.registration-form input[type="tel"],
.registration-form input[type="number"] {
  margin-top: 0.35rem; width: 100%; border: 1px solid var(--color-paper-200); padding: 0.5rem 0.75rem; font-family: var(--font-sans); font-size: 0.95rem; color: var(--color-ink-900);
}
.registration-form input:focus { border-color: var(--color-prune-900); outline: none; }
.registration-form .admin-checkbox { font-weight: 400; }
.registration-form__grid { display: grid; gap: 1rem; }
@media (min-width: 480px) { .registration-form__grid { grid-template-columns: repeat(2, 1fr); } }
.registration-form__submit { width: 100%; }
.registration-form__note { text-align: center; font-size: 0.75rem; color: var(--color-ink-600); }
.registration-form__error { font-size: 0.9rem; color: var(--color-signal-full); }

/* --- Quiz Cybermois (04/10/2026) ---------------------------------------------- */
.legal-page__intro { margin-top: 1rem; color: var(--color-ink-600); line-height: 1.6; }
.quiz-cybermois__progression { margin-top: 2rem; }
.quiz-cybermois__barre { height: 0.4rem; background: var(--color-paper-200); border-radius: 999px; overflow: hidden; }
.quiz-cybermois__barre-remplie { height: 100%; background: var(--color-accent-500); transition: width 0.3s ease; }
.quiz-cybermois__progression p { margin-top: 0.5rem; font-size: 0.8rem; color: var(--color-ink-600); }
.quiz-cybermois__question { margin-top: 1.5rem; padding: 1.5rem; border: 1px solid var(--color-paper-200); background: var(--color-ivory-50); }
.quiz-cybermois__bloc { font-size: 0.75rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-accent-600); }
.quiz-cybermois__enonce { margin-top: 0.75rem; font-size: 1.15rem; color: var(--color-prune-900); line-height: 1.5; }
.quiz-cybermois__options { margin-top: 1.25rem; display: grid; gap: 0.75rem; }
.quiz-cybermois__option {
  text-align: left;
  padding: 0.9rem 1.1rem;
  font-size: 1rem;
  line-height: 1.4;
  border: 1px solid var(--color-paper-200);
  background: var(--color-ivory-100, #fff);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.quiz-cybermois__option:hover:not(:disabled) { border-color: var(--color-prune-900); }
.quiz-cybermois__option:disabled { cursor: default; }
.quiz-cybermois__option--correct { border-color: var(--color-signal-available); background: color-mix(in srgb, var(--color-signal-available) 12%, white); font-weight: 600; }
.quiz-cybermois__option--incorrect { border-color: var(--color-signal-full); background: color-mix(in srgb, var(--color-signal-full) 10%, white); }
.quiz-cybermois__feedback { margin-top: 1.25rem; padding: 1rem 1.1rem; border-left: 3px solid var(--color-accent-500); background: var(--color-paper-200); }
.quiz-cybermois__feedback--correct { border-left-color: var(--color-signal-available); }
.quiz-cybermois__feedback--incorrect { border-left-color: var(--color-signal-full); }
.quiz-cybermois__feedback-titre { font-weight: 600; color: var(--color-prune-900); }
.quiz-cybermois__feedback p { margin-top: 0.4rem; font-size: 0.95rem; line-height: 1.5; }
.quiz-cybermois__feedback .btn { margin-top: 1rem; }
.quiz-cybermois__resultat { margin-top: 1.5rem; padding: 2rem; text-align: center; border: 1px solid var(--color-paper-200); background: var(--color-ivory-50); }
.quiz-cybermois__score { font-family: var(--font-serif); font-size: 2.5rem; color: var(--color-prune-900); }
.quiz-cybermois__recap { font-weight: 600; color: var(--color-prune-900); }

/* --- Page Cybermois (cybermois.php, 05/10/2026) -----------------------------
 * Page de contenu consolidée (3 blocs + fiches à télécharger + renvoi vers
 * le quiz) : réutilise .legal-page pour le titre et l'intro, mais avec une
 * largeur plus généreuse (.cyber-page) pour laisser respirer les grilles de
 * cartes ci-dessous — 42rem (la largeur des pages légales, faites de texte
 * continu) serait trop étroit pour 3 ou 6 cartes côte à côte. */
.cyber-page { max-width: 60rem; }
.cyber-bloc { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--color-paper-200); }
.cyber-bloc h2 { font-size: 1.5rem; color: var(--color-prune-900); }
.cyber-bloc__intro { margin-top: 0.5rem; color: var(--color-ink-600); line-height: 1.6; }
.cyber-bloc__bonus { margin-top: 1.5rem; padding: 0.9rem 1.1rem; background: var(--color-paper-200); font-size: 0.9rem; color: var(--color-ink-900); }
.cyber-bloc__sous-titre { margin-top: 1.75rem; font-size: 1.05rem; color: var(--color-prune-900); }
.cyber-bloc__aide { margin-top: 1.5rem; font-size: 0.9rem; color: var(--color-ink-600); line-height: 1.6; }

.geste-grid { margin-top: 1.5rem; display: grid; gap: 1.25rem; }
@media (min-width: 768px) { .geste-grid { grid-template-columns: repeat(3, 1fr); } }
.geste-card { padding: 1.5rem; border: 1px solid var(--color-paper-200); background: var(--color-ivory-50); }
.geste-card__numero { font-family: var(--font-serif); font-size: 1.75rem; color: var(--color-accent-600); }
.geste-card h3 { margin-top: 0.4rem; font-size: 1.05rem; color: var(--color-prune-900); line-height: 1.35; }
.geste-card p { margin-top: 0.6rem; font-size: 0.9rem; color: var(--color-ink-900); line-height: 1.55; }
.geste-card__pourquoi { color: var(--color-ink-600); }

.scenario-grid { margin-top: 1.5rem; display: grid; gap: 1.25rem; }
@media (min-width: 640px) { .scenario-grid { grid-template-columns: repeat(2, 1fr); } }
.scenario-card { padding: 1.5rem; border: 1px solid var(--color-paper-200); background: var(--color-ivory-50); }
.scenario-card__numero { font-family: var(--font-serif); font-size: 1.5rem; color: var(--color-accent-600); }
.scenario-card h3 { margin-top: 0.3rem; font-size: 1.05rem; color: var(--color-prune-900); line-height: 1.35; }
.scenario-card__ligne { margin-top: 0.6rem; font-size: 0.88rem; color: var(--color-ink-900); line-height: 1.5; }
.scenario-card__label { font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-accent-600); margin-right: 0.3rem; }
.scenario-card__ligne--reflexe .scenario-card__label { color: var(--color-signal-available); }

.cyber-liste-numerotee { margin-top: 1rem; padding-left: 1.4rem; display: grid; gap: 0.6rem; font-size: 0.95rem; color: var(--color-ink-900); line-height: 1.55; }

.cyber-situations { margin-top: 1rem; display: grid; gap: 1.1rem; }
@media (min-width: 640px) { .cyber-situations { grid-template-columns: repeat(2, 1fr); } }
.cyber-situations__titre { font-weight: 600; color: var(--color-prune-900); }
.cyber-situations p:not(.cyber-situations__titre) { margin-top: 0.3rem; font-size: 0.9rem; color: var(--color-ink-600); line-height: 1.55; }

.fiches-grid { margin-top: 1.5rem; display: grid; gap: 0.9rem; }
@media (min-width: 640px) { .fiches-grid { grid-template-columns: repeat(2, 1fr); } }
.fiche-card { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.25rem; border: 1px solid var(--color-paper-200); background: var(--color-ivory-50); color: var(--color-ink-900); text-decoration: none; }
.fiche-card:hover { border-color: var(--color-prune-900); }
.fiche-card__titre { font-size: 0.92rem; }
.fiche-card__action { flex-shrink: 0; font-size: 0.78rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; color: var(--color-accent-600); }

.cyber-cta-quiz { margin-top: 3rem; padding: 2.5rem; text-align: center; background: var(--color-prune-950); color: var(--color-ivory-50); }
.cyber-cta-quiz .eyebrow { color: var(--color-accent-500); }
.cyber-cta-quiz h2 { margin-top: 0.5rem; font-size: 1.5rem; }
.cyber-cta-quiz p { margin-top: 0.6rem; color: var(--color-paper-200); }
.cyber-cta-quiz .btn { margin-top: 1.25rem; }
.cyber-cta-quiz .btn--primary { background: var(--color-accent-500); color: var(--color-prune-950); }
.cyber-cta-quiz .btn--primary:hover { background: var(--color-accent-600); }

/* --- Pages légales (mentions, confidentialité, cookies) ---------------------- */
.legal-page { max-width: 42rem; margin-inline: auto; padding: 4rem 1rem; }
@media (min-width: 640px) { .legal-page { padding-inline: 1.5rem; } }
.legal-page__title { font-size: 2.25rem; color: var(--color-prune-900); }
.legal-page__sections { margin-top: 2rem; display: grid; gap: 2rem; }
.legal-page__sections h2 { font-size: 1.25rem; color: var(--color-prune-900); }
.legal-page__sections p { margin-top: 0.5rem; font-size: 0.9rem; color: var(--color-ink-600); line-height: 1.6; }
.legal-page__sections a { text-decoration: underline; }
.legal-page__sections a:hover { color: var(--color-accent-600); }

/* --- Portail de vérification d'âge (includes/age-gate.php) ------------------ */
/* Depuis le 24/09/2026 : affiché en superposition (overlay) au-dessus de
   la vraie page, plutôt qu'en page autonome — apparition temporisée puis
   fondu progressif gérés par assets/js/age-gate.js (réglages dans
   includes/config.php). Repli sûr sans JavaScript : opacité 1 par défaut
   ci-dessous, portail pleinement visible et bloquant dès l'affichage,
   sans fondu ni délai. */
body.body--age-gate-actif { overflow: hidden; }
.age-gate--overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  opacity: 1;
  overflow-y: auto;
  background: var(--color-ivory-100);
}
.age-gate {
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1.25rem;
}
.age-gate__card { max-width: 26rem; text-align: center; }
.age-gate__brand { font-family: var(--font-serif); font-size: 1.5rem; color: var(--color-prune-900); }
.age-gate__title { margin-top: 1.25rem; font-size: 1.15rem; font-weight: 500; color: var(--color-ink-900); }
.age-gate__text { margin-top: 0.75rem; font-size: 0.9rem; color: var(--color-ink-600); line-height: 1.6; }
.age-gate__form { margin-top: 1.75rem; display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.age-gate__submit { width: 100%; }
.age-gate__remember { display: flex; align-items: flex-start; gap: 0.5rem; font-size: 0.85rem; color: var(--color-ink-600); text-align: left; }
.age-gate__remember input { margin-top: 0.2rem; }
.age-gate__exit { display: inline-block; margin-top: 1.5rem; font-size: 0.8rem; color: var(--color-ink-600); text-decoration: underline; }
.age-gate__exit:hover { color: var(--color-ink-900); }

/* --- Cybermois : choix de lecture et approfondissements (06/10/2026) --------
 * Un seul choix de lecture sur la page cybermois.php (particulier ou
 * commerçant), sans nouvelle page. Sans JavaScript, le sélecteur reste
 * caché et tout le contenu s'affiche (le JS ajoute .cyber-page--js). */
.cyber-page [hidden] { display: none !important; }
.cyber-choix { display: none; }
.cyber-page--js .cyber-choix { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; margin-top: 1.75rem; }
.cyber-choix__titre { margin-right: 0.4rem; font-size: 0.85rem; color: var(--color-ink-600); }
.cyber-choix__btn { min-height: 2.75rem; padding: 0 1.25rem; border: 1.5px solid var(--color-prune-900); background: transparent; color: var(--color-prune-900); font: inherit; font-size: 0.92rem; font-weight: 600; cursor: pointer; }
.cyber-choix__btn:hover { background: var(--color-paper-200); }
.cyber-choix__btn[aria-pressed="true"] { background: var(--color-prune-900); color: var(--color-ivory-50); }
.cyber-choix__btn:focus-visible { outline: 3px solid var(--color-accent-500); outline-offset: 2px; }

.cyber-bloc__public { margin-bottom: 0.4rem; font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-accent-600); }

.cyber-signaux { margin-top: 1.5rem; display: grid; gap: 1.25rem; }
@media (min-width: 640px) { .cyber-signaux { grid-template-columns: repeat(2, 1fr); } }
.cyber-signal { padding: 1.25rem 1.5rem; border: 1px solid var(--color-paper-200); background: var(--color-ivory-50); }
.cyber-signal h3 { font-size: 1rem; color: var(--color-prune-900); }
.cyber-signal p { margin-top: 0.4rem; font-size: 0.9rem; color: var(--color-ink-900); line-height: 1.55; }

.cyber-plus-liste { margin-top: 1.25rem; display: grid; gap: 0.6rem; }
.cyber-plus { border: 1px solid var(--color-paper-200); background: var(--color-ivory-50); }
.cyber-plus summary { padding: 0.9rem 1.1rem; cursor: pointer; font-weight: 600; font-size: 0.95rem; color: var(--color-prune-900); }
.cyber-plus summary:focus-visible { outline: 3px solid var(--color-accent-500); outline-offset: -3px; }
.cyber-plus[open] summary { border-bottom: 1px solid var(--color-paper-200); }
.cyber-plus p { padding: 0.9rem 1.1rem 1rem; font-size: 0.9rem; color: var(--color-ink-600); line-height: 1.6; }

.cyber-bloc__aide-liste { margin-top: 0.75rem; padding-left: 1.2rem; display: grid; gap: 0.35rem; font-size: 0.9rem; color: var(--color-ink-600); line-height: 1.6; }