/* ==========================================================================
   Kristalia Minéral Expos : feuille de style unique du site
   Identité : logo cristal (Drive 2023), doré #BB9445.
   Ambiance « galerie lumineuse » (choix de Diego du 15 octobre 2026) : blanc cassé,
   gris pierre, anthracite à la place du noir, or en touches fines, coins arrondis.
   Polices : Playfair Display (titres), Montserrat (texte et menu).
   ========================================================================== */

/* ---------- Polices hébergées sur le site (licence SIL OFL, voir assets/fonts) ---------- */

@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/montserrat-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/montserrat-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Playfair Display";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("../fonts/playfair-display-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Playfair Display";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("../fonts/playfair-display-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- Couleurs, polices et mesures ---------- */

:root {
  --encre: #2b2f33;       /* anthracite : texte et fonds sombres, à la place du noir (13,0 sur le fond) */
  --fond: #fbfbf9;        /* blanc cassé : fond des pages */
  --blanc: #ffffff;       /* cartes, champs de formulaire */
  --pierre: #efede8;      /* gris pierre clair : bandes */
  --or: #bb9445;          /* doré du logo ; texte anthracite dessus (4,77), jamais blanc */
  --or-survol: #c8a35a;   /* survol et page en cours des boutons dorés : plus clair que l'or, texte anthracite (5,68) */
  --or-texte: #806427;    /* doré pour du texte : 5,38 sur le fond, 4,76 sur la pierre, 4,82 sur l'or pâle (recette du 15 octobre 2026) */
  --or-pale: #f5eedf;     /* bande de l'inscription aux annonces */
  --gris: #5f686b;        /* texte secondaire (4,88 sur la pierre, 5,6 sur le fond) */
  --filet: #e2ded6;       /* lignes de séparation */
  --gris-pied: #c9cdcd;   /* petits textes sur fond anthracite (8,4) */
  --rayon: 6px;           /* coins arrondis */
  --ombre: 0 1px 2px rgba(43, 47, 51, 0.06), 0 6px 20px rgba(43, 47, 51, 0.07);
  --ombre-forte: 0 2px 4px rgba(43, 47, 51, 0.08), 0 12px 32px rgba(43, 47, 51, 0.12);

  --police-titre: "Playfair Display", Georgia, "Times New Roman", serif;
  --police-texte: "Montserrat", "Helvetica Neue", Arial, sans-serif;

  --largeur: 72rem;
  --marge: 1rem;
}

@media (min-width: 48rem) {
  :root { --marge: 2rem; }
}

/* ---------- Bases ---------- */

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  margin: 0;
  background: var(--fond);
  color: var(--encre);
  font-family: var(--police-texte);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.65;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; display: block; }

h1, h2, h3 {
  font-family: var(--police-titre);
  font-weight: 500;
  line-height: 1.15;
  margin: 0 0 1rem;
  letter-spacing: -0.005em;
}
h1 { font-size: clamp(2.25rem, 1.4rem + 3.6vw, 3.75rem); }
h2 { font-size: clamp(1.75rem, 1.3rem + 1.8vw, 2.5rem); }
h3 { font-size: 1.375rem; }

p { margin: 0 0 1rem; max-width: 65ch; }

a { color: inherit; text-underline-offset: 0.2em; }

:focus-visible {
  outline: 2px solid var(--encre);
  outline-offset: 3px;
}

.conteneur {
  width: 100%;
  max-width: var(--largeur);
  margin-inline: auto;
  padding-inline: var(--marge);
}

.lien-evitement {
  position: absolute;
  left: -999rem;
  top: 0.75rem;
  z-index: 10;
  background: var(--encre);
  color: var(--blanc);
  padding: 0.5rem 1rem;
}
.lien-evitement:focus { left: 0.75rem; }

/* ---------- En-tête et menu ---------- */

/* L'en-tête reste en haut de l'écran : il se cache quand on descend et revient dès qu'on remonte (main.js) */
.entete {
  position: relative;
  z-index: 5;
  background: var(--fond);
  border-bottom: 1px solid var(--filet);
  transition: transform 0.25s ease;
}
/* Seulement avec JavaScript : sans lui, le menu déplié sur téléphone serait trop haut pour rester à l'écran */
.js .entete { position: sticky; top: 0; }
.entete-cachee .entete { transform: translateY(-100%); }

.entete__barre {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 4.5rem;
  padding-block: 0.75rem;
}

.entete__logo img { height: 2.75rem; width: auto; }

.entete__bouton-menu { display: none; }

.navigation {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.75rem;
}

.navigation__liste {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.75rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.navigation__lien {
  display: inline-block;
  padding-block: 0.4rem;
  font-size: 0.9375rem;
  font-weight: 500;
  text-decoration: none;
}
.navigation__lien:hover,
.navigation__lien[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--or); }

.navigation__lien--bouton {
  padding: 0.55rem 1rem;
  background: var(--or);
  border-radius: var(--rayon);
  font-weight: 600;
}
.navigation__lien--bouton:hover,
.navigation__lien--bouton[aria-current="page"] {
  background: var(--or-survol);
  box-shadow: none;
}

.navigation__langue {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-decoration: none;
  border: 1px solid var(--encre);
  border-radius: var(--rayon);
  padding: 0.2rem 0.5rem;
}
.navigation__langue:hover { background: var(--encre); color: var(--blanc); }

@media (min-width: 62rem) {
  .entete__barre { min-height: 5.5rem; }
  .entete__logo img { height: 3.25rem; }
}

/* Menu repliable sur téléphone et tablette (seulement si JavaScript est actif) */
@media (max-width: 61.99rem) {
  .js .entete__bouton-menu {
    display: inline-block;
    font: 600 0.9375rem var(--police-texte);
    color: var(--encre);
    background: var(--fond);
    border: 1px solid var(--encre);
    border-radius: var(--rayon);
    padding: 0.5rem 0.9rem;
    cursor: pointer;
  }

  .js .navigation {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
    padding: 0.5rem var(--marge) 1.5rem;
    background: var(--fond);
    border-bottom: 1px solid var(--filet);
  }
  .js .navigation.est-ouverte { display: flex; }

  .navigation__liste {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  .navigation__liste li { border-bottom: 1px solid var(--filet); }
  .navigation__lien {
    display: block;
    padding-block: 0.85rem;
    font-size: 1.0625rem;
  }
  .navigation__lien[aria-current="page"],
  .navigation__lien:hover { box-shadow: inset 3px 0 0 var(--or); padding-left: 0.75rem; }

  .navigation__liste li:has(.navigation__lien--bouton) { border-bottom: 0; padding-top: 1rem; }
  .navigation__lien--bouton { text-align: center; padding: 0.85rem 1rem; }
  .navigation__lien--bouton:hover,
  .navigation__lien--bouton[aria-current="page"] { padding-left: 1rem; }

  .navigation__langue { align-self: flex-start; }
}

/* ---------- Contenu ---------- */

main { display: block; flex: 1 0 auto; }

.titre-page {
  padding-block: 3.5rem 2.5rem;
}
.titre-page h1 { max-width: 22ch; }

/* Pages salons : lien vers les autres salons de la région, dans le calendrier */
.salon-calendrier { padding-block: 0 3rem; }
.salon-calendrier p { margin: 0; padding: 0.25rem 0 0.25rem 1rem; border-left: 3px solid var(--or); color: var(--gris); }
.salon-calendrier a { color: var(--encre); font-weight: 600; }

/* Fil d'Ariane (calendrier et pages régions) */
.fil-ariane { padding-top: 1.25rem; font-size: 0.8125rem; color: var(--gris); }
.fil-ariane ol { display: flex; flex-wrap: wrap; gap: 0.25rem 0.45rem; margin: 0; padding: 0; list-style: none; }
.fil-ariane li + li::before { content: "\203A"; margin-right: 0.45rem; }
.fil-ariane a { color: var(--gris); text-underline-offset: 0.15em; }
.fil-ariane a:hover { color: var(--encre); }
.fil-ariane + .titre-page { padding-top: 1.5rem; }
.titre-page .chapeau {
  font-size: 1.125rem;
  color: var(--gris);
}

.chantier {
  margin-block: 0 4rem;
  padding: 0.25rem 0 0.25rem 1rem;
  border-left: 3px solid var(--or);
  color: var(--gris);
}

/* Accueil : titre et les trois salons en cartes */
.accueil-titre { padding-block: 4rem 2.5rem; }
@media (min-width: 62rem) {
  .accueil-titre {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
    gap: 3rem;
    align-items: center;
  }
}

/* Bloc « Prochain salon » : calculé d'après les dates, à droite du titre sur ordinateur */
.prochain {
  position: relative;
  margin-top: 2rem;
  padding: 1.75rem 1.75rem 1.5rem;
  background: var(--blanc);
  border-radius: var(--rayon);
  box-shadow: var(--ombre);
  border-top: 2px solid var(--or);
}
@media (min-width: 62rem) {
  .prochain { margin-top: 0; }
}
.prochain__surtitre {
  margin: 0 0 0.5rem;
  color: var(--or-texte);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.prochain__nom { margin-bottom: 0.4rem; font-size: clamp(1.5rem, 1.25rem + 1vw, 1.875rem); }
.prochain__dates {
  margin: 0 0 0.2rem;
  color: var(--or-texte);
  font-family: var(--police-titre);
  font-size: 1.25rem;
}
.prochain__lieu { color: var(--gris); font-size: 0.9375rem; }
.prochain__actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.25rem; }
.accueil-titre h1 { max-width: 18ch; }
.accueil-titre p { font-size: 1.125rem; color: var(--gris); }

.cartes-salons {
  list-style: none;
  margin: 0 0 4.5rem;
  padding: 0;
  display: grid;
  gap: 2rem;
}

@media (min-width: 48rem) {
  .cartes-salons {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
  }
}

/* Chaque carte se lit comme une vitrine : un visuel, puis un cartel avec le nom, les dates et le lieu */
.carte-salon {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--blanc);
  border-radius: var(--rayon);
  box-shadow: var(--ombre);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.carte-salon:hover { box-shadow: var(--ombre-forte); transform: translateY(-2px); }
.carte-salon:focus-within {
  outline: 2px solid var(--encre);
  outline-offset: 3px;
}

/* Visuel provisoire (en attendant les visuels 2027) : le cristal du logo et le nom de la ville */
.carte-salon__visuel {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--pierre);
}
.carte-salon__cristal {
  position: absolute;
  top: 50%;
  right: -16%;
  width: 72%;
  max-width: none;
  transform: translateY(-50%);
  opacity: 0.55;
}
/* Une affiche (format A4 portrait) occupe toute la largeur de la carte, en entier (demande de Diego, 15 octobre 2026) */
.carte-salon__visuel--affiche { aspect-ratio: 707 / 1000; }
.carte-salon__affiche {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.carte-salon__ville {
  position: absolute;
  left: 1.25rem;
  bottom: 1rem;
  color: var(--encre);
  font-family: var(--police-titre);
  font-size: clamp(1.75rem, 1.3rem + 1.5vw, 2.25rem);
  line-height: 1;
}

.carte-salon__texte {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 1.25rem 1.25rem 1.5rem;
  border-top: 2px solid var(--or);
}

.carte-salon__nom {
  font-size: 1.5rem;
  margin: 0 0 0.35rem;
}
.carte-salon__nom a { text-decoration: none; }
.carte-salon__nom a:focus-visible { outline: none; }
/* Toute la carte est cliquable, via le lien du nom */
.carte-salon__nom a::after {
  content: "";
  position: absolute;
  inset: 0;
}
.carte-salon:hover .carte-salon__nom a {
  text-decoration: underline;
  text-decoration-color: var(--or);
  text-decoration-thickness: 2px;
}

.carte-salon__dates {
  margin: 0 0 0.15rem;
  font-weight: 600;
}

.carte-salon__lieu {
  margin: 0 0 auto;
  color: var(--gris);
  font-size: 0.9375rem;
}

/* « Voir le salon » : indique que toute la carte est cliquable */
.carte-salon__voir {
  margin: 1.25rem 0 0;
  font-weight: 600;
  font-size: 0.9375rem;
  text-decoration: underline;
  text-decoration-color: var(--or);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.25em;
}
.carte-salon__voir::after { content: " \2192"; }
.carte-salon:hover .carte-salon__voir { text-decoration-color: var(--encre); }

/* Accueil : « Ce que vous trouverez » (minéraux, fossiles, gemmes, bijoux) */
.univers { padding-block: 0 4.5rem; }
.univers h2 { margin-bottom: 1.75rem; }
.univers__liste {
  display: grid;
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 40rem) {
  .univers__liste { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 62rem) {
  .univers__liste { grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
}
.univers__element {
  padding: 1.5rem 1.5rem 0.75rem;
  background: var(--blanc);
  border-radius: var(--rayon);
  box-shadow: var(--ombre);
}
/* Petit losange doré, rappel des cristaux du logo */
.univers__element::before {
  content: "";
  display: block;
  width: 0.7rem;
  height: 0.7rem;
  margin-bottom: 1rem;
  background: var(--or);
  transform: rotate(45deg);
}
.univers__element h3 { margin-bottom: 0.5rem; font-size: 1.375rem; }
.univers__element p { color: var(--gris); font-size: 0.9375rem; }

/* Accueil : notre histoire et chiffres clés */
.histoire {
  background: var(--pierre);
  padding-block: 4.5rem;
}

.histoire__grille {
  display: grid;
  gap: 3rem;
}

.histoire__texte p { font-size: 1.0625rem; }

.chiffres { margin: 0; }

.chiffres__item {
  display: flex;
  flex-direction: column-reverse;
  padding-block: 1.25rem;
  border-top: 2px solid var(--or);
}

.chiffres__valeur {
  margin: 0;
  font-family: var(--police-titre);
  font-size: clamp(2.25rem, 1.8rem + 2vw, 3rem);
  line-height: 1.1;
}

.chiffres__libelle {
  color: var(--gris);
  font-size: 0.9375rem;
}

@media (min-width: 62rem) {
  .histoire__grille {
    grid-template-columns: 1.6fr 1fr;
    gap: 5rem;
    align-items: start;
  }
}

.visuellement-cache {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Boutons ---------- */

.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding: 0.65rem 1.25rem;
  border: 1px solid transparent;
  border-radius: var(--rayon);
  font: 600 0.9375rem/1.3 var(--police-texte);
  text-decoration: none;
  cursor: pointer;
}
.bouton--or { background: var(--or); color: var(--encre); }
.bouton--or:hover { background: var(--or-survol); }
.bouton--noir { background: var(--encre); color: var(--blanc); }
.bouton--noir:hover { background: #41474d; }
.bouton--contour { background: transparent; color: inherit; border-color: currentColor; }
.bouton--contour:hover { background: rgba(43, 47, 51, 0.06); }

/* « Billetterie bientôt disponible » : une mention, pas un bouton */
.billetterie-attente {
  display: inline-block;
  margin: 0;
  padding: 0.5rem 0.85rem;
  border: 1px dashed currentColor;
  border-radius: var(--rayon);
  color: var(--gris);
  font-size: 0.875rem;
  font-weight: 600;
}

.lien-fleche {
  font-weight: 600;
  text-decoration-color: var(--or);
  text-decoration-thickness: 2px;
}
.lien-fleche::after { content: " \2192"; }
.lien-fleche:hover { text-decoration-color: var(--encre); }

/* ---------- Pages salons ---------- */

html { scroll-behavior: smooth; }
[id] { scroll-margin-top: 1rem; }

/* En-tête : nom, dates, lieu, billetterie et agenda, sur fond noir avec le cristal */
.salon-entete {
  position: relative;
  background: var(--pierre);
  color: var(--encre);
  padding-block: 3.5rem 3rem;
}

/* Le cristal est rogné par son propre cadre, pour que la liste de l'agenda puisse déborder de l'en-tête */
.salon-entete__fond {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.salon-entete__cristal {
  position: absolute;
  top: 50%;
  right: -7rem;
  width: 20rem;
  max-width: none;
  transform: translateY(-50%);
  opacity: 0.2;
  pointer-events: none;
}

.salon-entete__contenu { position: relative; z-index: 1; }
/* Liste de l'agenda ouverte : elle passe au-dessus du sommaire */
.salon-entete__contenu:has(.agenda[open]) { z-index: 3; }
.salon-entete h1 { margin-bottom: 0.75rem; }

.salon-entete__dates {
  margin: 0 0 0.25rem;
  color: var(--or-texte);
  font-family: var(--police-titre);
  font-size: clamp(1.375rem, 1.1rem + 1vw, 1.75rem);
}
.salon-entete__lieu { color: var(--gris); }
.salon-entete__lieu .lien-fleche { display: inline-block; margin-top: 0.35rem; color: var(--encre); font-size: 0.9375rem; }

.salon-entete__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0.75rem;
  margin-top: 1.75rem;
}
.salon-entete .billetterie-attente {
  min-height: 2.75rem;
  display: inline-flex;
  align-items: center;
  color: var(--encre);
  border-color: var(--or);
  font-size: 0.9375rem;
}

@media (min-width: 62rem) {
  .salon-entete { padding-block: 4.5rem 4rem; }
  .salon-entete__cristal { width: 28rem; right: 2rem; opacity: 0.45; }
}

/* En-tête dans le style de la bannière Facebook (essai du 15 octobre 2026) : le minéral de l'affiche
   à droite du titre, sur un fond gris pierre éclairé derrière lui comme sur l'affiche.
   Les bords de la photo s'effacent dans le fond. Sur téléphone, pas de minéral (décision de Diego
   du 15 octobre 2026) : l'en-tête garde le cristal du logo en fond, comme les autres pages ;
   sur tablette, le minéral passe au-dessus du titre. */
.salon-entete__visuel { display: none; margin: 0; }
.salon-entete__visuel img {
  display: block;
  width: 100%;
  height: auto;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 9%, #000 91%, transparent), linear-gradient(to bottom, transparent, #000 9%, #000 91%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent, #000 9%, #000 91%, transparent), linear-gradient(to bottom, transparent, #000 9%, #000 91%, transparent);
  mask-composite: intersect;
}
.salon-entete__visuel figcaption {
  margin-top: -0.35rem;
  color: var(--gris);
  font-size: 0.6875rem;
  text-align: center;
}
@media (min-width: 40rem) {
  .salon-entete--banniere {
    padding-top: 1.5rem;
    background: radial-gradient(ellipse 70% 55% at 50% 22%, #e3e6e4 0%, #e9eae6 45%, var(--pierre) 100%);
  }
  .salon-entete--banniere .salon-entete__fond { display: none; }
  .salon-entete--banniere .salon-entete__contenu {
    display: grid;
    gap: 0.75rem;
  }
  .salon-entete__visuel { display: block; order: -1; }
  .salon-entete__visuel img { width: auto; max-width: min(100%, 18rem); max-height: 15rem; margin-inline: auto; }
}
@media (min-width: 64rem) {
  .salon-entete--banniere {
    padding-top: 3rem;
    background: radial-gradient(ellipse 40% 75% at 76% 50%, #e3e6e4 0%, #e9eae6 45%, var(--pierre) 100%);
  }
  .salon-entete--banniere .salon-entete__contenu {
    grid-template-columns: minmax(0, 1fr) minmax(0, 31rem);
    align-items: center;
    gap: 2rem;
  }
  .salon-entete__visuel { order: 0; margin-block: -1.5rem; }
  .salon-entete__visuel img { max-width: 100%; max-height: 24rem; margin-inline: auto 0; }
  .salon-entete__visuel figcaption { text-align: right; }
}

/* Bouton « Ajouter à mon agenda » et sa petite liste de choix */
.agenda { position: relative; }
.agenda summary { list-style: none; }
.agenda summary::-webkit-details-marker { display: none; }
.agenda summary::after {
  content: "";
  width: 0.45em;
  height: 0.45em;
  margin: -0.25em 0 0 0.65rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
}
.agenda[open] summary::after { margin-top: 0.25em; transform: rotate(-135deg); }

.agenda__liste {
  position: absolute;
  z-index: 3;
  top: 100%;
  left: 0;
  min-width: 17rem;
  margin: 0.4rem 0 0;
  padding: 0.35rem 0;
  list-style: none;
  background: var(--blanc);
  color: var(--encre);
  border: 1px solid var(--filet);
  box-shadow: 0 0.5rem 1.5rem rgba(43, 47, 51, 0.25);
}
.agenda__liste a {
  display: block;
  padding: 0.65rem 1rem;
  text-decoration: none;
}
.agenda__liste a:hover { background: var(--pierre); text-decoration: underline; }
.agenda__liste :focus-visible { outline-color: var(--encre); outline-offset: -2px; }

/* Sommaire de la page (et thèmes de la FAQ) */
/* Sommaire des pages salons : il suit l'en-tête (caché en descendant, visible en remontant),
   sur une seule ligne qui défile de côté sur téléphone */
.sommaire {
  position: sticky;
  top: var(--hauteur-entete, 0px);
  z-index: 2;
  padding-block: 0.75rem;
  background: var(--fond);
  border-bottom: 1px solid var(--filet);
  transition: transform 0.25s ease;
}
.entete-cachee .sommaire--colle { transform: translateY(calc(-100% - var(--hauteur-entete, 0px))); }

.sommaire .sommaire__liste {
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: thin;
  padding-bottom: 0.15rem;
}
.sommaire .sommaire__liste li { flex: 0 0 auto; }
/* Fondu à droite quand d'autres liens sont cachés : invite à faire défiler */
.sommaire .sommaire__liste.deborde {
  -webkit-mask-image: linear-gradient(to right, #000 80%, transparent);
  mask-image: linear-gradient(to right, #000 80%, transparent);
}

.sommaire__liste {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.sommaire__liste a {
  display: inline-block;
  padding: 0.4rem 0.9rem;
  border: 1px solid var(--filet);
  border-radius: 999px;
  background: var(--blanc);
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
}
.sommaire__liste a:hover { border-color: var(--encre); }
.sommaire__liste--clair { margin-top: 1.75rem; }

/* Rubriques : une sur deux sur fond gris clair */
.rubrique { padding-block: 4rem; }
.rubrique p { max-width: 62ch; margin-bottom: 1.15rem; }
.rubrique--pierre { background: var(--pierre); }

.rubrique h2::after {
  content: "";
  display: block;
  width: 3rem;
  height: 2px;
  margin-top: 0.85rem;
  background: var(--or);
}
.rubrique h2 { margin-bottom: 2rem; }
.rubrique h3 { margin-bottom: 0.75rem; }

@media (min-width: 62rem) {
  .rubrique { padding-block: 5.5rem; }
}

.grille-deux {
  display: grid;
  gap: 2.5rem;
}
@media (min-width: 48rem) {
  .grille-deux { grid-template-columns: 1fr 1fr; gap: 4rem; }
}

.horaires {
  max-width: 28rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.horaires li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 0.7rem;
  border-bottom: 1px solid var(--filet);
}
.horaires li:first-child { border-top: 1px solid var(--filet); }
.horaires__heures { font-weight: 600; white-space: nowrap; }

/* Listes à puces en losange doré */
.liste-or,
.rubrique ul:not([class]),
.faq__reponse ul:not([class]) {
  margin: 0 0 1rem;
  padding: 0;
  list-style: none;
  max-width: 65ch;
}
.liste-or li,
.rubrique ul:not([class]) li,
.faq__reponse ul:not([class]) li {
  position: relative;
  padding-left: 1.35rem;
}
.liste-or li + li,
.rubrique ul:not([class]) li + li,
.faq__reponse ul:not([class]) li + li { margin-top: 0.45rem; }
.liste-or li::before,
.rubrique ul:not([class]) li::before,
.faq__reponse ul:not([class]) li::before {
  content: "";
  position: absolute;
  left: 0.1rem;
  top: 0.62em;
  width: 0.42rem;
  height: 0.42rem;
  background: var(--or);
  transform: rotate(45deg);
}
.liste-or--grande { font-size: 1.0625rem; }

/* Blocs courts (services, accès) */
.blocs {
  display: grid;
  gap: 1.25rem;
}
@media (min-width: 40rem) {
  .blocs { grid-template-columns: repeat(2, 1fr); }
}
/* Sur ordinateur, tous les blocs d'une rubrique tiennent sur une ligne (jusqu'à cinq) */
@media (min-width: 62rem) {
  .blocs { grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 1rem; }
}

.bloc {
  padding: 1.25rem 1.25rem 0.5rem;
  background: var(--blanc);
  border-radius: var(--rayon);
  box-shadow: var(--ombre);
}
.bloc h3::after {
  content: "";
  display: block;
  width: 2rem;
  height: 2px;
  margin-top: 0.5rem;
  background: var(--or);
}
.bloc h3 { font-size: 1.25rem; }

/* Animations : des cartes côte à côte, photo en haut, texte replié au-delà de quelques lignes */
.animations {
  display: grid;
  gap: 1.5rem;
  align-items: start;
}
@media (min-width: 40rem) {
  .animations { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 62rem) {
  .animations { grid-template-columns: repeat(3, 1fr); }
}

.animation {
  overflow: hidden;
  background: var(--blanc);
  border-radius: var(--rayon);
  box-shadow: var(--ombre);
}
.animation__texte { padding: 1.25rem 1.25rem 0.75rem; }
.animation__texte h3 { font-size: 1.25rem; }

.animation__image { display: block; }
.animation__image img,
.presentation__image {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--filet);
}
.animation__image:hover img { opacity: 0.88; }
.presentation__image { border-radius: var(--rayon); }

/* Texte replié : un fondu en bas et un bouton « Lire la suite » (seulement avec JavaScript) */
.js .repliable[data-replie="oui"] {
  max-height: 16rem;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, #000 65%, transparent);
  mask-image: linear-gradient(to bottom, #000 65%, transparent);
}
.js .repliable--court[data-replie="oui"] { max-height: 8.5rem; }

.repliable__bouton {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0.25rem 0 0.75rem;
  padding: 0.35rem 0;
  border: 0;
  background: none;
  color: var(--encre);
  font: 600 0.9375rem var(--police-texte);
  text-decoration: underline;
  text-decoration-color: var(--or);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.25em;
  cursor: pointer;
}
.repliable__bouton:hover { text-decoration-color: var(--encre); }

/* Présentation du salon */
.presentation {
  display: grid;
  gap: 2rem 4rem;
}
@media (min-width: 62rem) {
  .presentation--image { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); align-items: start; }
  .presentation__image { position: sticky; top: 1.5rem; }
}

/* Galerie photo */
.galerie__groupe + .galerie__groupe { margin-top: 3rem; }

.galerie {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.5rem;
  margin: 1.25rem 0 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 40rem) {
  .galerie { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 62rem) {
  .galerie { grid-template-columns: repeat(4, 1fr); gap: 0.75rem; }
}

.galerie a { display: block; }
.galerie img {
  border-radius: var(--rayon);
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--filet);
}
.galerie a:hover img { opacity: 0.88; }
.galerie + p,
.galerie__groupe + p { margin-top: 2rem; }

/* Visionneuse : agrandissement des photos au clic (créée par main.js) */
.visionneuse {
  width: 100vw;
  max-width: 100vw;
  height: 100vh;
  max-height: 100vh;
  margin: 0;
  padding: 0;
  border: 0;
  background: rgba(43, 47, 51, 0.94);
  color: var(--blanc);
}
.visionneuse::backdrop { background: rgba(43, 47, 51, 0.6); }
.visionneuse :focus-visible { outline-color: var(--blanc); }

.visionneuse__cadre {
  height: 100%;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 3.5rem 0.75rem 1.5rem;
}
.visionneuse__image {
  max-width: 100%;
  max-height: calc(100vh - 7rem);
  width: auto;
  height: auto;
  object-fit: contain;
}
.visionneuse__compteur { font-size: 0.875rem; color: var(--gris-pied); }

.visionneuse__bouton {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: var(--rayon);
  background: rgba(43, 47, 51, 0.55);
  color: var(--blanc);
  font: 400 1.5rem/1 var(--police-texte);
  cursor: pointer;
}
.visionneuse__bouton[hidden] { display: none; }
.visionneuse__bouton:hover { background: var(--encre); border-color: var(--blanc); }
.visionneuse__fermer { top: 0.75rem; right: 0.75rem; }
.visionneuse__precedente { left: 0.75rem; top: 50%; transform: translateY(-50%); }
.visionneuse__suivante { right: 0.75rem; top: 50%; transform: translateY(-50%); }

/* ---------- FAQ ---------- */

.faq { padding-bottom: 4.5rem; }

.faq__theme { margin-bottom: 3rem; }
.faq__theme h2 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); }

.faq__question { border-top: 1px solid var(--filet); }
.faq__question:last-child { border-bottom: 1px solid var(--filet); }

.faq__question summary {
  position: relative;
  padding: 1.1rem 2.75rem 1.1rem 0;
  font-size: 1.0625rem;
  font-weight: 600;
  list-style: none;
  cursor: pointer;
}
.faq__question summary::-webkit-details-marker { display: none; }
.faq__question summary::after {
  content: "+";
  position: absolute;
  right: 0.25rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--encre);
  font-size: 1.5rem;
  font-weight: 400;
}
.faq__question[open] summary::after { content: "\2212"; }
.faq__question summary:hover { text-decoration: underline; text-decoration-color: var(--or); text-decoration-thickness: 2px; }

.faq__reponse { padding-bottom: 1.5rem; }

.faq__salons { margin: 0; }
.faq__salons dt {
  margin-top: 1.25rem;
  font-family: var(--police-titre);
  font-size: 1.125rem;
}
.faq__salons dt:first-child { margin-top: 0; }
.faq__salons dd { margin: 0.4rem 0 0; }
.faq__salons dd > :last-child { margin-bottom: 0; }

/* ---------- Bloc « Être prévenu de nos salons » ---------- */

/* Bande or pâle juste avant le pied de page */
/* Accueil : bloc du calendrier des salons en France (recherche et petite carte du mois) */
.bloc-calendrier { padding-block: 4.5rem; }
.bloc-calendrier__grille { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; align-items: center; }
@media (min-width: 48rem) {
  .bloc-calendrier__grille { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 3rem; }
}
.bloc-calendrier h2 { margin-bottom: 0.75rem; }
.bloc-calendrier__texte > p { color: var(--gris); font-size: 1.0625rem; }
.bloc-calendrier__recherche { margin: 1.75rem 0 1.25rem; }
.bloc-calendrier__recherche label { display: block; margin-bottom: 0.4rem; font-weight: 600; }
.bloc-calendrier__champ { display: flex; gap: 0.5rem; max-width: 30rem; }
.bloc-calendrier__champ input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 2.75rem;
  padding: 0.6rem 0.85rem;
  border: 1px solid #8a9294;
  border-radius: var(--rayon);
  background: var(--blanc);
  color: var(--encre);
  font: 400 1rem/1.5 var(--police-texte);
}
.bloc-calendrier__champ input:focus-visible { outline: 2px solid var(--encre); outline-offset: 1px; border-color: var(--encre); }
.bloc-calendrier__carte {
  position: relative;
  display: block;
  padding: 1rem;
  background: var(--blanc);
  border-radius: var(--rayon);
  box-shadow: var(--ombre);
  text-decoration: none;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.bloc-calendrier__carte:hover { box-shadow: var(--ombre-forte); transform: translateY(-2px); }
.bloc-calendrier__carte svg { display: block; width: 100%; height: auto; }
.bloc-calendrier__carte circle,
.bloc-calendrier__carte path { fill: var(--or); stroke: var(--blanc); stroke-width: 3.5; }
.bloc-calendrier__carte .bloc-calendrier__k path { fill: var(--encre); stroke: var(--or); stroke-width: 4; }
.bloc-calendrier__carte text { fill: var(--encre); font: 700 22px var(--police-texte); }
.bloc-calendrier__k text { fill: var(--blanc); }
.bloc-calendrier__legende {
  position: absolute;
  left: 1rem;
  bottom: 1rem;
  padding: 0.2rem 0.6rem;
  border-radius: var(--rayon);
  background: var(--fond);
  color: var(--gris);
  font-size: 0.8125rem;
  font-weight: 600;
}
@media (prefers-reduced-motion: reduce) {
  .bloc-calendrier__carte { transition: none; }
  .bloc-calendrier__carte:hover { transform: none; }
}

.annonces {
  background: var(--or-pale);
  color: var(--encre);
  padding-block: 3.5rem;
}

.annonces__grille {
  display: grid;
  gap: 1.5rem 4rem;
}
@media (min-width: 62rem) {
  .annonces { padding-block: 4.5rem; }
  .annonces__grille { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); align-items: start; }
}

.annonces h2 { margin-bottom: 0.75rem; }
.annonces__texte p { font-size: 1.0625rem; }

.annonces__salons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  margin: 0 0 1.25rem;
  padding: 0;
  border: 0;
}
.annonces__salons legend {
  width: 100%;
  margin-bottom: 0.5rem;
  padding: 0;
  font-weight: 600;
}

.case {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  cursor: pointer;
}
.case input {
  width: 1.25rem;
  height: 1.25rem;
  margin: 0;
  accent-color: var(--encre);
  cursor: pointer;
}

.annonces__libelle {
  display: block;
  margin-bottom: 0.4rem;
  font-weight: 600;
}

.annonces__ligne {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.annonces__ligne input {
  flex: 1 1 14rem;
  min-height: 2.75rem;
  padding: 0.6rem 0.85rem;
  border: 1px solid #8a9294;
  border-radius: var(--rayon);
  background: var(--blanc);
  color: var(--encre);
  font: 400 1rem var(--police-texte);
}
.annonces__ligne .bouton { flex: 0 0 auto; }

.annonces__mention {
  margin: 1rem 0 0;
  font-size: 0.875rem;
}

.annonces__message {
  margin: 0 0 1.25rem;
  padding: 0.75rem 1rem;
  background: var(--blanc);
  border-radius: var(--rayon);
  border-left: 4px solid var(--or);
  font-weight: 600;
}

/* Champ piège pour les robots : hors de l'écran */
.annonces__piege {
  position: absolute;
  left: -999rem;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.desinscription { padding-bottom: 4.5rem; }
.desinscription form { margin-top: 1.5rem; }

/* ---------- Page « Devenir exposant » ---------- */

.exposant {
  display: grid;
  gap: 2.5rem 5rem;
  padding-bottom: 4.5rem;
}
@media (min-width: 62rem) {
  .exposant { grid-template-columns: minmax(0, 1fr) minmax(0, 1.9fr); align-items: start; }
  .exposant__deroule { position: sticky; top: calc(var(--hauteur-entete, 0px) + 1.5rem); }
}
.exposant h2 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); }

/* Déroulé en trois étapes numérotées */
.etapes {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: etape;
}
.etapes li {
  position: relative;
  padding: 0 0 1.25rem 3rem;
  counter-increment: etape;
}
.etapes li::before {
  content: counter(etape);
  position: absolute;
  left: 0;
  top: -0.1rem;
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--or);
  border-radius: 50%;
  font-family: var(--police-titre);
  font-size: 1.05rem;
}

.exposant__obligatoires { color: var(--gris); font-size: 0.9375rem; }

/* Périodes de demande de chaque salon */
.exposant__periodes-titre { margin: 1.5rem 0 0.75rem; font-size: 1.25rem; }
.periodes { margin: 0; }
.periodes__ligne {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0 1rem;
  padding-block: 0.6rem;
  border-bottom: 1px solid var(--filet);
}
.periodes__ligne:first-child { border-top: 1px solid var(--filet); }
.periodes dt { font-weight: 600; }
.periodes dd { margin: 0; color: var(--gris); }

/* Champs de formulaire */
.formulaire fieldset {
  margin: 0 0 2rem;
  padding: 0;
  border: 0;
}
.formulaire > fieldset {
  display: grid;
  gap: 0 1.25rem;
}
@media (min-width: 40rem) {
  .formulaire > fieldset { grid-template-columns: 1fr 1fr; }
  .formulaire > fieldset > .champ:not(.champ--moitie),
  .formulaire > fieldset > legend { grid-column: 1 / -1; }
}
.formulaire > fieldset > legend {
  width: 100%;
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--filet);
  font-family: var(--police-titre);
  font-size: 1.375rem;
}

.champ { margin-bottom: 1.25rem; }
.champ > label,
.champ--cases > legend {
  display: block;
  margin-bottom: 0.35rem;
  font-weight: 600;
}
.champ__aide {
  margin: -0.15rem 0 0.4rem;
  color: var(--gris);
  font-size: 0.875rem;
}

.formulaire input[type="text"],
.formulaire input[type="email"],
.formulaire input[type="tel"],
.formulaire select,
.formulaire textarea {
  width: 100%;
  min-height: 2.75rem;
  padding: 0.6rem 0.85rem;
  border: 1px solid #8a9294;
  border-radius: var(--rayon);
  background: var(--blanc);
  color: var(--encre);
  font: 400 1rem/1.5 var(--police-texte);
}
.formulaire textarea { resize: vertical; }
.formulaire input[type="file"] {
  width: 100%;
  padding: 0.75rem;
  border: 1px dashed #8a9294;
  border-radius: var(--rayon);
  background: var(--blanc);
  font: 400 0.9375rem var(--police-texte);
}
.formulaire input:focus-visible,
.formulaire select:focus-visible,
.formulaire textarea:focus-visible { outline: 2px solid var(--encre); outline-offset: 1px; border-color: var(--encre); }
.formulaire [aria-invalid="true"] { border-color: #b3261e; }

.champ--cases {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.5rem;
}
.champ--cases > legend { width: 100%; }
.champ--cases .champ__erreur { width: 100%; }
.champ--cases[hidden] { display: none; }

/* Cases à cocher : texte normal, case alignée sur la première ligne */
.champ--cases > .case,
.champ--accord > .case {
  display: inline-flex;
  margin-bottom: 0;
  font-weight: 400;
}
.champ--accord > .case { display: flex; }
.case--longue { align-items: flex-start; }
.case--longue input { margin-top: 0.2rem; flex: 0 0 auto; }

.champ__erreur {
  margin: 0.35rem 0 0;
  color: #b3261e;
  font-size: 0.9375rem;
  font-weight: 600;
}

.formulaire__piege {
  position: absolute;
  left: -999rem;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.bouton--grand { min-height: 3.25rem; padding-inline: 1.75rem; font-size: 1rem; }
.bouton:disabled { opacity: 0.7; cursor: progress; }

/* Messages au-dessus du formulaire */
.avis {
  margin: 0 0 1.5rem;
  padding: 1rem 1.25rem;
  border-radius: var(--rayon);
  background: var(--pierre);
  border-left: 4px solid var(--or);
}
.avis p:last-child,
.avis ul:last-child { margin-bottom: 0; }
.avis--ok { border-left-color: #1e7a3c; }
.avis--erreur { border-left-color: #b3261e; }
.avis__titre { font-weight: 600; }
.avis ul { padding-left: 1.25rem; }

/* ---------- Bandeau cookies (tarteaucitron.js) aux couleurs du site ---------- */
/* « Tout accepter » et « Tout refuser » ont exactement le même style, comme le demande la CNIL. */

#tarteaucitronRoot,
#tarteaucitronRoot * { font-family: var(--police-texte) !important; }

#tarteaucitronRoot #tarteaucitronAlertBig {
  background: var(--blanc) !important;
  color: var(--encre) !important;
  border-top: 3px solid var(--or) !important;
  box-shadow: 0 -0.25rem 1.5rem rgba(43, 47, 51, 0.12) !important;
  padding: 1rem var(--marge) !important;
  box-sizing: border-box !important;
  width: 100% !important;
  left: 0 !important;
}
#tarteaucitronRoot #tarteaucitronAlertBig button,
#tarteaucitronRoot #tarteaucitronAlertBig button * { font-size: 0.9375rem !important; line-height: 1.3 !important; }
#tarteaucitronRoot #tarteaucitronCloseAlert,
#tarteaucitronRoot #tarteaucitronPrivacyUrl { white-space: normal !important; max-width: 100%; }
#tarteaucitronRoot #tarteaucitronAlertBig #tarteaucitronDisclaimerAlert {
  color: var(--encre) !important;
  font-size: 0.9375rem !important;
}

#tarteaucitronRoot #tarteaucitronPersonalize2,
#tarteaucitronRoot #tarteaucitronAllDenied2,
#tarteaucitronRoot #tarteaucitronAllAllowed,
#tarteaucitronRoot #tarteaucitronAllDenied,
#tarteaucitronRoot .tarteaucitronAllow,
#tarteaucitronRoot .tarteaucitronDeny {
  background: var(--encre) !important;
  color: var(--blanc) !important;
  border: 1px solid var(--encre) !important;
  border-radius: var(--rayon) !important;
  padding: 0.55rem 1rem !important;
  font-size: 0.9375rem !important;
  font-weight: 600 !important;
  opacity: 1 !important;
}
#tarteaucitronRoot #tarteaucitronPersonalize2:hover,
#tarteaucitronRoot #tarteaucitronAllDenied2:hover,
#tarteaucitronRoot #tarteaucitronAllAllowed:hover,
#tarteaucitronRoot #tarteaucitronAllDenied:hover,
#tarteaucitronRoot .tarteaucitronAllow:hover,
#tarteaucitronRoot .tarteaucitronDeny:hover { background: #41474d !important; }
#tarteaucitronRoot #tarteaucitronAllAllowed *,
#tarteaucitronRoot #tarteaucitronAllDenied *,
#tarteaucitronRoot .tarteaucitronAllow *,
#tarteaucitronRoot .tarteaucitronDeny * { color: var(--blanc) !important; }
/* Choix actif d'un service : bouton doré, pour voir d'un coup d'œil ce qui est autorisé ou interdit */
#tarteaucitronRoot .tarteaucitronIsAllowed .tarteaucitronAllow,
#tarteaucitronRoot .tarteaucitronIsDenied .tarteaucitronDeny {
  background: var(--or) !important;
  border-color: var(--or) !important;
  color: var(--encre) !important;
}
#tarteaucitronRoot .tarteaucitronIsAllowed .tarteaucitronAllow *,
#tarteaucitronRoot .tarteaucitronIsDenied .tarteaucitronDeny * { color: var(--encre) !important; }

#tarteaucitronRoot #tarteaucitronCloseAlert,
#tarteaucitronRoot #tarteaucitronPrivacyUrl {
  background: transparent !important;
  color: var(--encre) !important;
  border: 0 !important;
  text-decoration: underline !important;
  text-underline-offset: 0.2em;
  font-size: 0.9375rem !important;
}

#tarteaucitronRoot button:focus-visible,
#tarteaucitronRoot a:focus-visible { outline: 2px solid var(--encre) !important; outline-offset: 2px !important; }

#tarteaucitronRoot #tarteaucitron #tarteaucitronServices .tarteaucitronMainLine,
#tarteaucitronRoot #tarteaucitron #tarteaucitronInfo { border-color: var(--or) !important; }
#tarteaucitronRoot #tarteaucitronClosePanel { background: var(--encre) !important; color: var(--blanc) !important; }

/* ---------- Pages légales ---------- */

.texte-legal { padding-bottom: 4.5rem; }
.texte-legal > * { max-width: 46rem; }
.texte-legal h2 {
  margin-top: 2.5rem;
  font-size: clamp(1.375rem, 1.15rem + 0.8vw, 1.75rem);
}
.texte-legal h2:first-child { margin-top: 0; }
.texte-legal__date { margin-top: 2.5rem; color: var(--gris); font-size: 0.9375rem; }

/* ---------- Pied de page ---------- */

.pied {
  position: relative;
  overflow: hidden;
  background: var(--encre);
  color: var(--blanc);
  padding-block: 4rem 2rem;
}

.pied :focus-visible { outline-color: var(--blanc); }

/* Le grand cristal au trait, qui déborde à droite : l'élément signature du site */
.pied__cristal {
  position: absolute;
  right: -5rem;
  bottom: -6rem;
  width: 26rem;
  max-width: none;
  opacity: 0.14;
  pointer-events: none;
}

.pied__grille,
.pied__bas {
  position: relative;
  z-index: 1;
}

.pied__grille {
  display: grid;
  gap: 2.5rem;
}

.pied__marque img { width: 13rem; margin-bottom: 1rem; }
.pied__marque p { color: var(--gris-pied); max-width: 28ch; }

.pied__titre {
  font-size: 1.125rem;
  margin-bottom: 0.75rem;
}

.pied__liste {
  list-style: none;
  margin: 0;
  padding: 0;
}
.pied__liste li + li { margin-top: 0.4rem; }
.pied__date { display: block; color: var(--gris-pied); font-size: 0.8125rem; }
.pied__liste a {
  text-decoration-thickness: 1px;
  overflow-wrap: anywhere;
}
.pied__liste a:hover { text-decoration-color: var(--or); text-decoration-thickness: 2px; }
.pied__liste a[aria-current="page"] { text-decoration-color: var(--or); text-decoration-thickness: 2px; font-weight: 600; }

.pied__bas {
  margin-top: 3rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  font-size: 0.8125rem;
  color: var(--gris-pied);
}
.pied__bas p { margin: 0; }

@media (min-width: 40rem) {
  .pied__grille { grid-template-columns: repeat(2, 1fr); }
  .pied__marque { grid-column: 1 / -1; }
}

@media (min-width: 62rem) {
  /* marque, salons, contact (plus large pour l'adresse e-mail), réseaux, informations */
  .pied__grille { grid-template-columns: 1.2fr 1fr 1.25fr 0.8fr 1.1fr; gap: 2rem; }
  .pied__marque { grid-column: auto; }
  .pied__cristal { width: 32rem; right: -6rem; bottom: -8rem; }
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}

/* Page « Publier un salon » : rappel sur l'usage des coordonnées */
.exposant__note { color: var(--gris); font-size: 0.9375rem; }
.exposant__conditions-titre { font-size: 1rem; margin: 1.5rem 0 0.5rem; }
.exposant__conditions { margin: 0; padding-left: 1.25rem; color: var(--gris); font-size: 0.9375rem; }
.exposant__conditions li + li { margin-top: 0.35rem; }

/* Zone de test (test.kristaliamineralexpos.com) */
.bandeau-test { margin: 0; padding: 0.5rem 1rem; background: var(--encre); color: #fff; text-align: center; font-weight: 600; }