/* ==========================================================================
   salondumif.fr : feuille de style unique
   DA : signalétique de parc des expositions, papier et encre, bleu de travail
   Aucun framework. Tokens en custom properties. Angles droits, aucune ombre.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Polices auto-hébergées (3 fichiers woff2, sous-ensemble latin)
   -------------------------------------------------------------------------- */

@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 200 800;
  font-stretch: 100%;
  font-display: swap;
  src: url('../fonts/bricolage-grotesque-var.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: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 100%;
  font-display: swap;
  src: url('../fonts/archivo-var.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: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/ibm-plex-mono-400.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;
}

/* --------------------------------------------------------------------------
   2. Tokens
   -------------------------------------------------------------------------- */

:root {
  /* Papier et encre */
  --paper: #F4F3EE;
  --ink: #15181D;

  /* Bleu de travail */
  --bleu: #2C4A8A;
  --bleu-fonce: #1E3462;

  /* Rouge tampon, usage strictement limité */
  --rouge-tampon: #C43A21;

  --gris: #62676C; /* contraste AA (≥ 4.5:1) sur papier, y compris en petit corps */
  --filet: 1px solid var(--ink);

  /* Dégradés tricolores réutilisables */
  --tricolore-h: linear-gradient(
    to right,
    var(--bleu) 0 33.4%,
    #FFFFFF 33.4% 66.7%,
    var(--rouge-tampon) 66.7% 100%
  );
  --tricolore-v: linear-gradient(
    to bottom,
    var(--bleu) 0 33.4%,
    #FFFFFF 33.4% 66.7%,
    var(--rouge-tampon) 66.7% 100%
  );

  /* Déclinaisons papier sur fonds sombres */
  --paper-85: rgba(244, 243, 238, 0.85);
  --paper-60: rgba(244, 243, 238, 0.6);
  --paper-35: rgba(244, 243, 238, 0.35);
  --paper-15: rgba(244, 243, 238, 0.15);

  --font-display: 'Bricolage Grotesque', system-ui, sans-serif;
  --font-body: 'Archivo', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;

  --container: 72rem;
  --gouttiere: clamp(1.25rem, 5vw, 2.5rem);
}

/* --------------------------------------------------------------------------
   3. Base
   -------------------------------------------------------------------------- */

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

html {
  color-scheme: light;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-text-size-adjust: 100%;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  line-height: 1.08;
  margin: 0 0 1rem;
}

h1 {
  font-size: clamp(2.125rem, 4.5vw, 3rem);
  font-weight: 750;
  letter-spacing: -0.02em;
  max-width: 22ch;
}

h2 {
  font-size: clamp(1.75rem, 3vw, 2rem);
  font-weight: 700;
  letter-spacing: -0.01em;
}

h3 {
  font-size: 1.375rem;
  font-weight: 700;
}

p {
  margin: 0 0 1rem;
}

ul, ol {
  margin: 0 0 1rem;
  padding-left: 1.25rem;
}

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

a {
  color: var(--bleu);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

a:hover {
  color: var(--bleu-fonce);
  text-decoration-thickness: 2px;
}

strong {
  font-weight: 600;
}

::selection {
  background: var(--bleu);
  color: var(--paper);
}

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

[id] {
  scroll-margin-top: 5.5rem;
}

/* Accessibilité : texte pour lecteurs d'écran uniquement */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: -100vw;
  top: 0;
  z-index: 200;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0.8em 1.2em;
  text-decoration: none;
}

.skip-link:focus {
  left: 0;
  color: var(--paper);
}

/* --------------------------------------------------------------------------
   4. Gabarit
   -------------------------------------------------------------------------- */

.container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gouttiere);
}

.section {
  padding-block: clamp(3.25rem, 8vw, 5.5rem);
}

.filet-haut {
  border-top: var(--filet);
}

.sans-haut {
  padding-top: 0;
}

.grille-2 {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3rem);
}

@media (min-width: 60rem) {
  .grille-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }
}

/* Pastille drapeau : trois bandes verticales, contour encre */
.drapeau {
  display: inline-block;
  width: 1.5em;
  height: 1em;
  flex: none;
  border: 1px solid var(--ink);
  background: var(--tricolore-h);
  vertical-align: -0.14em;
  margin-right: 0.5em;
}

/* Cartouche de section : pastille drapeau + label mono */
.kicker {
  display: flex;
  align-items: center;
  gap: 0.65em;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 400;
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  margin: 0 0 1.5rem;
}

.kicker::before {
  content: "";
  width: 19px;
  height: 13px;
  border: 1px solid var(--ink);
  background: var(--tricolore-h);
  flex: none;
}

/* --------------------------------------------------------------------------
   5. Filet tricolore : seule occurrence bleu-blanc-rouge du site
   -------------------------------------------------------------------------- */

.tricolore {
  height: 5px;
  background: var(--tricolore-h);
}

/* Décollé du bloc qui le précède pour rester lisible sur fond bleu ou encre */
.tricolore-espace {
  margin-top: 4px;
}

/* --------------------------------------------------------------------------
   6. Étiquette de stand : header sticky
   -------------------------------------------------------------------------- */

.etiquette {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--paper);
  border-bottom: var(--filet);
}

.etiquette-inner {
  max-width: var(--container);
  margin-inline: auto;
  padding: 0.6rem var(--gouttiere);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 3.25rem;
}

.etiquette-texte {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.etiquette-texte a {
  color: var(--ink);
  text-decoration: none;
}

.etiquette-texte a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.etiquette-sep {
  color: var(--gris);
  padding-inline: 0.45em;
}

.etiquette-actions {
  display: flex;
  align-items: stretch;
  gap: 0.5rem;
  flex: none;
}

/* Badges logos des deux boutiques dans l'étiquette */
.etiquette-boutiques {
  display: none;
}

@media (min-width: 48rem) {
  .etiquette-boutiques {
    display: flex;
    gap: 0.4rem;
  }
}

.logo-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.25em 0.6em;
  border: var(--filet);
  transition: background-color 0.15s ease;
}

.logo-chip img {
  height: 1.15rem;
  width: auto;
  display: block;
}

.logo-chip-encre {
  background: var(--ink);
}

.logo-chip-encre:hover {
  background: var(--bleu);
}

.logo-chip-blanc {
  background: #FFFFFF;
}

.logo-chip-blanc:hover {
  background: var(--paper);
}

@media (max-width: 47.9375rem) {
  .etiquette-dates,
  .etiquette-dates + .etiquette-sep {
    display: none;
  }
}

@media (max-width: 35rem) {
  .etiquette-hall,
  .etiquette-hall + .etiquette-sep,
  .etiquette-sep {
    display: none;
  }
}

/* Menu déroulant (details/summary : fonctionne sans JavaScript) */
.menu {
  position: relative;
}

.menu > summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  height: 100%;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border: var(--filet);
  padding: 0.55em 0.9em;
  background: transparent;
  color: var(--ink);
  user-select: none;
}

.menu > summary::-webkit-details-marker {
  display: none;
}

.menu > summary:hover,
.menu[open] > summary {
  background: var(--ink);
  color: var(--paper);
}

.menu-panneau {
  position: absolute;
  right: 0;
  top: calc(100% + 0.75rem);
  min-width: 16rem;
  background: var(--paper);
  border: var(--filet);
  z-index: 120;
}

.menu-panneau ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.menu-panneau li + li {
  border-top: var(--filet);
}

.menu-panneau a {
  display: flex;
  align-items: center;
  gap: 0.7em;
  padding: 0.8em 1.1em;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink);
  text-decoration: none;
}

.menu-panneau .icone {
  width: 1.15rem;
  height: 1.15rem;
  color: var(--bleu);
}

.menu-panneau a:hover .icone,
.menu-panneau a[aria-current="page"] .icone {
  color: var(--paper);
}

.menu-panneau a:hover {
  background: var(--ink);
  color: var(--paper);
}

.menu-panneau a[aria-current="page"] {
  background: var(--bleu);
  color: var(--paper);
}

/* --------------------------------------------------------------------------
   7. Boutons
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  line-height: 1.2;
  padding: 0.95em 1.5em;
  border: var(--filet);
  background: var(--ink);
  color: var(--paper);
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.btn:hover {
  background: var(--paper);
  color: var(--ink);
}

.btn-secondaire {
  background: transparent;
  color: var(--ink);
}

.btn-secondaire:hover {
  background: var(--ink);
  color: var(--paper);
}

/* Variante posée sur fond encre ou bleu */
.btn-papier {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--paper);
}

.btn-papier:hover {
  background: transparent;
  color: var(--paper);
}

.btn-petit {
  padding: 0.55em 0.9em;
  font-size: 0.6875rem;
}

.btn[aria-disabled="true"],
.btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.btn[aria-disabled="true"]:hover,
.btn:disabled:hover {
  background: var(--ink);
  color: var(--paper);
}

/* Lien de commande : mono, flèche SVG */
.lien-fleche {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--bleu);
}

.lien-fleche svg {
  width: 1.1em;
  height: 1.1em;
  flex: none;
}

.groupe-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  margin-top: 2rem;
}

.lien-suite {
  margin: 1.5rem 0 0;
}

.kicker + .groupe-cta {
  margin-top: 0.25rem;
}

/* Liseré tricolore sous les CTA primaires */
.groupe-cta > .btn:first-child,
.etiquette-actions > .btn {
  position: relative;
}

.groupe-cta > .btn:first-child::after,
.etiquette-actions > .btn::after {
  content: "";
  position: absolute;
  left: -1px;
  right: -1px;
  bottom: -5px;
  height: 4px;
  background: var(--tricolore-h);
}

/* --------------------------------------------------------------------------
   8. Hero signalétique (accueil)
   -------------------------------------------------------------------------- */

.hero {
  background: var(--bleu);
  color: var(--paper);
  position: relative;
  overflow: hidden;
}

/* Écharpe tricolore : barre verticale sur le bord gauche du panneau */
.hero::before,
.bandeau-marque::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 7px;
  background: var(--tricolore-v);
  z-index: 2;
}

/* Fond photo du hero : duotone bleu (luminosité de l'image, teinte du fond) */
.hero-fond {
  position: absolute;
  inset: 0;
}

.hero-fond img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  mix-blend-mode: luminosity;
  opacity: 0.36;
}

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

.hero a {
  color: var(--paper);
}

.hero :focus-visible {
  outline-color: var(--paper);
}

.hero-inner {
  padding-block: clamp(2.25rem, 6vw, 4.25rem);
}

.hero-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem 2rem;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--paper-85);
  border-bottom: 1px solid var(--paper-35);
  padding-bottom: 1rem;
  margin-bottom: clamp(1.5rem, 4vw, 2.5rem);
}

/* Le nom du salon, en toutes lettres au-dessus de la date,
   souligné d'une barre tricolore */
.hero-nom {
  font-family: var(--font-display);
  font-weight: 750;
  text-transform: uppercase;
  font-size: clamp(1.5rem, 4.2vw, 3.25rem);
  line-height: 1.02;
  letter-spacing: -0.015em;
  margin: 0 0 clamp(0.75rem, 2vw, 1.25rem);
}

.hero-nom::after {
  content: "";
  display: block;
  width: clamp(6rem, 14vw, 11rem);
  height: 6px;
  margin-top: 0.45em;
  background: var(--tricolore-h);
}

.hero-scene {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

.hero-date {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(2.5rem, 9.5vw, 7.5rem);
  line-height: 0.95;
  letter-spacing: -0.025em;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.05em 0.12em;
  margin: 0;
}

/* Plaque hexagonale façon plaque d'atelier */
.plaque {
  flex: none;
  width: clamp(7rem, 12vw, 9.5rem);
  height: auto;
  transform: rotate(-5deg);
  display: none;
}

@media (min-width: 48rem) {
  .plaque {
    display: block;
  }
}

.plaque .plaque-chiffre {
  font-family: var(--font-display);
  font-weight: 750;
  font-size: 34px;
}

.plaque .plaque-chiffre tspan {
  font-size: 20px;
}

.plaque .plaque-legende {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
}

.hero-date .fleche {
  width: 0.62em;
  height: 0.62em;
  flex: none;
}

.hero-bas {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem 2rem;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--paper-85);
  border-top: 1px solid var(--paper-35);
  padding-top: 1rem;
  margin-top: clamp(1.5rem, 4vw, 2.5rem);
}

/* Chapeau d'accueil, sous le hero, sur papier */
.lede {
  padding-block: clamp(2.5rem, 6vw, 4rem);
}

.chapeau {
  font-size: 1.125rem;
  line-height: 1.7;
  max-width: 62ch;
}

.lede .chapeau {
  margin-bottom: 0;
}

/* Ligne de transparence */
.transparence {
  border-top: var(--filet);
  border-bottom: var(--filet);
}

.transparence p {
  margin: 0;
  padding-block: 0.8rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--gris);
}

.transparence a {
  color: var(--bleu);
}

/* --------------------------------------------------------------------------
   8 bis. L'allée : bande de produits qui défile, comme une allée du salon
   -------------------------------------------------------------------------- */

.allee {
  border-bottom: var(--filet);
  background: var(--paper);
  overflow: hidden;
  padding-block: 1.25rem;
}

.allee-piste {
  display: flex;
  width: max-content;
  animation: allee-defile 55s linear infinite;
}

.allee:hover .allee-piste,
.allee:focus-within .allee-piste {
  animation-play-state: paused;
}

.allee-groupe {
  display: flex;
  gap: clamp(0.75rem, 2vw, 1.25rem);
  padding-right: clamp(0.75rem, 2vw, 1.25rem);
}

.allee-item {
  margin: 0;
  border: var(--filet);
  background: #FFFFFF;
  width: clamp(8.5rem, 17vw, 12rem);
  flex: none;
}

.allee-item img {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  display: block;
}

@keyframes allee-defile {
  to {
    transform: translateX(-50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .allee {
    overflow-x: auto;
  }

  .allee-piste {
    animation: none;
  }
}

/* --------------------------------------------------------------------------
   8 ter. Icônes filaires et apparitions au scroll
   -------------------------------------------------------------------------- */

.icone {
  display: inline-flex;
  width: 1.4em;
  height: 1.4em;
  flex: none;
  vertical-align: -0.3em;
}

.icone svg {
  width: 100%;
  height: 100%;
}

.fiche-rang dt {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

.etape-titre .icone {
  margin-right: 0.4rem;
  color: var(--bleu);
}

/* Apparitions au scroll : translation pure, sans fondu (le fondu créait des
   états transitoires de contraste insuffisant, pénalisés en accessibilité) */
.anime-ok .reveal {
  transform: translateY(16px);
  transition: transform 0.55s ease;
  transition-delay: var(--reveal-delai, 0ms);
}

.anime-ok .reveal.visible {
  transform: none;
}

/* Survols : les photos avancent d'un pas */
.carte-photo {
  overflow: hidden;
}

.carte-photo img,
.figure picture img {
  transition: transform 0.45s ease;
}

.carte:hover .carte-photo img,
.figure:hover picture img {
  transform: scale(1.035);
}

.lien-fleche svg,
.directions svg {
  transition: transform 0.2s ease;
}

.lien-fleche:hover svg,
.directions a:hover svg {
  transform: translateX(4px);
}

/* --------------------------------------------------------------------------
   9. Compte à rebours façon tableau d'affichage
   -------------------------------------------------------------------------- */

.compteur {
  background: var(--ink);
  color: var(--paper);
  text-align: center;
  padding-block: clamp(3rem, 8vw, 5rem);
  position: relative;
}

.compteur::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 5px;
  background: var(--tricolore-h);
}

.compteur :focus-visible {
  outline-color: var(--paper);
}

.compteur-label {
  margin: 0 0 2rem;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.28em;
  color: var(--paper-85);
  display: inline-flex;
  align-items: center;
  gap: 0.9em;
}

.compteur-volets {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: clamp(1rem, 4vw, 2.25rem);
}

.volet-groupe {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
}

.volet-cartes {
  display: flex;
  gap: 4px;
  perspective: 700px;
}

.volet {
  position: relative;
  width: clamp(2.4rem, 8.5vw, 4rem);
  height: clamp(3.2rem, 11vw, 5.25rem);
  background: #1F2530;
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-size: clamp(1.9rem, 6.5vw, 3.25rem);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  color: var(--paper);
  overflow: hidden;
}

/* Ligne d'axe du volet */
.volet::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  background: rgba(0, 0, 0, 0.65);
}

/* Demi-volet supérieur légèrement éclairé */
.volet::before {
  content: "";
  position: absolute;
  inset: 0 0 50% 0;
  background: rgba(244, 243, 238, 0.045);
}

.volet-legende {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  color: var(--paper-60);
}

/* Bascule unique à l'arrivée sur la page */
@keyframes volet-bascule {
  from {
    transform: rotateX(-88deg);
  }
  to {
    transform: rotateX(0deg);
  }
}

.compteur.anime .volet {
  animation: volet-bascule 0.55s cubic-bezier(0.2, 0.7, 0.3, 1) backwards;
  animation-delay: calc(var(--i, 0) * 70ms + 250ms);
  transform-origin: 50% 50%;
}

/* État pendant le salon */
.pastille {
  width: 11px;
  height: 11px;
  background: var(--rouge-tampon);
  display: inline-block;
  flex: none;
}

@keyframes clignote {
  50% {
    opacity: 0.15;
  }
}

.pastille-anime {
  animation: clignote 1.6s steps(2, start) infinite;
}

.compteur-ouvert {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.5rem, 9vw, 5.5rem);
  line-height: 1;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  margin: 0;
}

.compteur-ouvert.long {
  font-size: clamp(1.625rem, 5.5vw, 3.5rem);
  line-height: 1.15;
}

/* Repli sans JavaScript : dates en dur */
.compteur-fallback {
  margin: 0;
  font-family: var(--font-mono);
  font-size: clamp(1rem, 3vw, 1.5rem);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  line-height: 1.7;
}

/* --------------------------------------------------------------------------
   10. Blocs chiffres façon marquage de caisse
   -------------------------------------------------------------------------- */

.chiffres {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--ink);
  border: var(--filet);
}

/* Très petits écrans : une seule colonne de marquage */
@media (max-width: 22.4375rem) {
  .chiffres {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (min-width: 48rem) {
  .chiffres {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.chiffre {
  background: var(--paper);
  padding: clamp(1.25rem, 3vw, 2rem);
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  position: relative;
}

.chiffre-icone {
  position: absolute;
  top: clamp(1.1rem, 2.5vw, 1.6rem);
  right: clamp(1.1rem, 2.5vw, 1.6rem);
  width: 1.5rem;
  height: 1.5rem;
  color: var(--bleu);
}

.chiffre-valeur {
  font-family: var(--font-display);
  font-weight: 750;
  font-size: clamp(2rem, 5.5vw, 3.75rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--bleu);
}

.chiffre-legende {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.chiffre-source {
  margin-top: auto;
  padding-top: 0.75rem;
  font-size: 0.6875rem;
  line-height: 1.4;
  color: var(--gris);
}

/* --------------------------------------------------------------------------
   11. Fiche l'essentiel : rangées signalétiques
   -------------------------------------------------------------------------- */

.fiche {
  margin: 0;
  border-top: var(--filet);
}

.fiche-rang {
  display: grid;
  grid-template-columns: minmax(6.5rem, 9rem) 1fr;
  gap: 1rem;
  padding-block: 1.1rem;
  border-bottom: var(--filet);
}

.fiche-rang dt {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding-top: 0.2em;
}

/* Badge lettre façon signalétique (M, T, B, P) */
.badge-ligne {
  display: inline-grid;
  place-items: center;
  width: 1.9rem;
  height: 1.9rem;
  border: var(--filet);
  font-family: var(--font-mono);
  font-size: 0.9375rem;
  flex: none;
  background: var(--paper);
}

.fiche-rang dd {
  margin: 0;
  font-weight: 600;
}

.fiche-note {
  display: block;
  font-weight: 400;
  color: var(--gris);
  font-size: 0.9375rem;
}

/* --------------------------------------------------------------------------
   12. Tampon et encadrés
   -------------------------------------------------------------------------- */

.tampon {
  display: inline-block;
  border: 2px solid var(--rouge-tampon);
  color: var(--rouge-tampon);
  background: var(--paper);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  padding: 0.35em 0.75em;
  transform: rotate(-2deg);
}

.encadre {
  position: relative;
  border: var(--filet);
  padding: clamp(1.5rem, 4vw, 2.25rem);
}

.encadre > .tampon {
  position: absolute;
  top: -1em;
  right: 1.25rem;
}

.encadre :last-child {
  margin-bottom: 0;
}

.pile > * + * {
  margin-top: 1.5rem;
}

/* --------------------------------------------------------------------------
   12 bis. Photos : traitement uniforme (cadre filet, légende mono)
   -------------------------------------------------------------------------- */

.figure {
  margin: 0;
  border: var(--filet);
  background: #FFFFFF;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.figure figcaption {
  flex: 1;
}

.figure > a,
.allee-item > a,
.carte-photo > a {
  display: block;
}

.figure picture {
  display: block;
  overflow: hidden;
}

.figure img {
  width: 100%;
  height: auto;
  display: block;
}

.figure figcaption {
  border-top: var(--filet);
  background: var(--paper);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 0.65rem 0.9rem;
}

/* Mosaïque de produits */
.mosaique {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(0.75rem, 2vw, 1.25rem);
}

@media (min-width: 60rem) {
  .mosaique {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* --------------------------------------------------------------------------
   13. Cartes marques
   -------------------------------------------------------------------------- */

.carte {
  border: var(--filet);
  display: flex;
  flex-direction: column;
  background: var(--paper);
  height: 100%;
}

/* Liseré tricolore en tête des cartes et des figures */
.carte::before,
.figure::before {
  content: "";
  display: block;
  height: 5px;
  background: var(--tricolore-h);
  flex: none;
}

/* Bandeau étiquette bleu en tête de carte */
.carte-strip {
  margin: 0;
  background: var(--bleu);
  color: var(--paper);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  padding: 0.6rem 1.1rem;
  border-bottom: var(--filet);
}

/* Photo de carte : recadrage uniforme 3/2 */
.carte-photo {
  border-bottom: var(--filet);
  background: #FFFFFF;
}

.carte-photo img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  display: block;
}

.cadrage-bas {
  object-position: 50% 62%;
}

.carte-corps {
  padding: clamp(1.25rem, 3vw, 1.75rem);
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  flex: 1;
}

.carte-corps h3 {
  margin-bottom: 0.5rem;
}

.carte-corps .lien-fleche {
  margin-top: auto;
  padding-top: 1rem;
}

/* Bandeau marque : panneau bleu pleine largeur des pages exposants,
   avec fond photo duotone (même traitement que le hero) */
.bandeau-marque {
  background: var(--bleu);
  color: var(--paper);
  position: relative;
  overflow: hidden;
}

.bandeau-marque-inner {
  padding-block: clamp(2.5rem, 7vw, 4.5rem);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  position: relative;
  z-index: 1;
}

.bandeau-marque-note {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--paper-85);
  border-bottom: 1px solid var(--paper-35);
  padding-bottom: 1rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem 2rem;
}

.bandeau-marque-note img {
  height: 2.25rem;
  width: auto;
}

.bandeau-marque-titre {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.5rem, 8vw, 5.5rem);
  line-height: 0.98;
  letter-spacing: -0.02em;
}

/* --------------------------------------------------------------------------
   14. Journal : rangées d'articles
   -------------------------------------------------------------------------- */

.journal-liste {
  border-top: var(--filet);
}

.journal-rang {
  display: grid;
  gap: 0.35rem 2rem;
  padding-block: 1.35rem;
  border-bottom: var(--filet);
}

@media (min-width: 48rem) {
  .journal-rang {
    grid-template-columns: 11rem minmax(0, 1fr);
    align-items: baseline;
  }
}

.journal-date {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--gris);
}

.journal-titre {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.3125rem;
  line-height: 1.25;
  margin: 0;
}

.journal-extrait {
  margin: 0.35rem 0 0;
  color: var(--gris);
  font-size: 0.9375rem;
  max-width: 62ch;
}

/* --------------------------------------------------------------------------
   15. Têtes de pages intérieures
   -------------------------------------------------------------------------- */

.ariane {
  padding-top: 1.5rem;
}

.ariane ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6em;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--gris);
}

.ariane li + li::before {
  content: "/";
  margin-right: 0.6em;
  color: var(--gris);
}

.ariane a {
  color: var(--ink);
}

.page-tete {
  padding-block: clamp(2rem, 5vw, 3.25rem);
}

.page-tete h1 {
  max-width: 24ch;
}

/* Tête de page avec logo de marque à droite sur desktop */
.page-tete-grille {
  display: grid;
  gap: 1.5rem;
  align-items: start;
}

@media (min-width: 60rem) {
  .page-tete-grille {
    grid-template-columns: minmax(0, 1fr) auto;
  }
}

.page-tete-logo {
  max-width: 11rem;
  height: auto;
}

.page-tete .chapeau {
  margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   16. Étapes numérotées (vraie séquence uniquement)
   -------------------------------------------------------------------------- */

.etapes {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: etape;
}

.etapes > li {
  counter-increment: etape;
  display: grid;
  grid-template-columns: 3.25rem 1fr;
  gap: 1.25rem;
  padding-block: 2rem;
  border-top: var(--filet);
}

.etapes > li:last-child {
  border-bottom: var(--filet);
}

.etapes > li::before {
  content: counter(etape);
  width: 3.25rem;
  height: 3.25rem;
  border: var(--filet);
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-weight: 750;
  font-size: 1.5rem;
}

.etape-titre {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.25rem;
  margin: 0 0 0.5rem;
  padding-top: 0.35em;
}

.etapes p {
  max-width: 62ch;
}

.etapes .groupe-cta {
  margin-top: 1rem;
}

/* --------------------------------------------------------------------------
   17. Tableaux (horaires)
   -------------------------------------------------------------------------- */

.tableau {
  width: 100%;
  border-collapse: collapse;
  border: var(--filet);
}

.tableau caption {
  text-align: left;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--gris);
  padding-bottom: 0.75rem;
}

.tableau th,
.tableau td {
  border: var(--filet);
  padding: 0.85rem 1.1rem;
  text-align: left;
}

.tableau thead th {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 400;
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}

.tableau tbody th {
  font-weight: 600;
}

.tableau td {
  font-family: var(--font-mono);
  font-size: 0.9375rem;
  font-variant-numeric: tabular-nums;
}

/* Conseils de visite : quatre repères illustrés */
.conseils {
  display: grid;
  gap: clamp(0.9rem, 2vw, 1.25rem);
}

@media (min-width: 48rem) {
  .conseils {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.conseil {
  border: var(--filet);
  padding: 1.25rem 1.4rem;
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.conseil .icone {
  width: 1.7rem;
  height: 1.7rem;
  color: var(--bleu);
  margin-top: 0.1rem;
}

.conseil p {
  margin: 0;
}

/* --------------------------------------------------------------------------
   18. FAQ (details/summary)
   -------------------------------------------------------------------------- */

.faq {
  border-top: var(--filet);
}

.faq details {
  border-bottom: var(--filet);
}

.faq summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.15rem 0;
  font-weight: 600;
  font-size: 1.0625rem;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  content: "+";
  font-family: var(--font-mono);
  font-size: 1.25rem;
  line-height: 1;
  flex: none;
  transition: transform 0.2s ease;
}

.faq details[open] summary::after {
  transform: rotate(45deg);
}

.faq summary:hover {
  color: var(--bleu);
}

.faq .faq-reponse {
  padding-bottom: 1.25rem;
  max-width: 65ch;
}

.faq .faq-reponse :last-child {
  margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   19. Formulaire
   -------------------------------------------------------------------------- */

.formulaire {
  border: var(--filet);
  padding: clamp(1.5rem, 4vw, 2.25rem);
}

.formulaire fieldset {
  border: 0;
  margin: 0;
  padding: 0;
  min-inline-size: auto;
}

.formulaire fieldset:disabled {
  opacity: 0.5;
}

.champ {
  margin-bottom: 1.25rem;
}

.champ label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 0.45rem;
}

.champ input[type="text"],
.champ input[type="email"] {
  width: 100%;
  border: var(--filet);
  background: #FFFFFF;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1rem;
  padding: 0.75em 0.9em;
}

.champ input:focus-visible {
  outline: 2px solid var(--bleu);
  outline-offset: 2px;
}

.champ-consentement {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

.champ-consentement input {
  width: 1.15rem;
  height: 1.15rem;
  margin-top: 0.2rem;
  accent-color: var(--bleu);
  flex: none;
}

.champ-consentement label {
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--ink);
}

.formulaire-note {
  margin: 1.25rem 0 0;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--gris);
}

/* --------------------------------------------------------------------------
   20. Footer encre
   -------------------------------------------------------------------------- */

.footer {
  background: var(--ink);
  color: var(--paper-85);
  margin-top: clamp(3.25rem, 8vw, 5.5rem);
}

.footer a {
  color: var(--paper);
}

.footer :focus-visible {
  outline-color: var(--paper);
}

.footer-inner {
  padding-block: clamp(2.75rem, 6vw, 4rem) 0;
}

.footer-grid {
  display: grid;
  gap: 2.5rem;
  padding-bottom: clamp(2.5rem, 6vw, 3.5rem);
}

@media (min-width: 60rem) {
  .footer-grid {
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr);
    gap: 3rem;
  }
}

.footer h2 {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--paper-60);
  margin-bottom: 1rem;
}

.footer-marque {
  font-family: var(--font-display);
  font-weight: 750;
  font-size: 1.375rem;
  color: var(--paper);
  margin-bottom: 1rem;
}

.footer-disclaimer p {
  font-size: 0.9375rem;
  line-height: 1.7;
  max-width: 58ch;
}

.footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer li {
  padding-block: 0.3rem;
}

.footer-nav a,
.footer-boutiques a {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-decoration: none;
}

.footer-nav a:hover,
.footer-boutiques a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.footer-bas {
  border-top: 1px solid var(--paper-15);
  padding-block: 1.25rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem 2rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--paper-60);
}

.footer-bas p {
  margin: 0;
}

.footer-bas .coeur {
  width: 0.9em;
  height: 0.9em;
  display: inline-block;
  vertical-align: -0.12em;
  color: var(--rouge-tampon);
  margin-inline: 0.1em;
}

/* --------------------------------------------------------------------------
   20 bis. Bannière de consentement (mesure d'audience)
   -------------------------------------------------------------------------- */

.bandeau-cookies {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 300;
  background: var(--paper);
  border-top: var(--filet);
  transform: translateY(100%);
  transition: transform 0.35s ease;
}

.bandeau-cookies.visible {
  transform: none;
}

.bandeau-cookies-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
  padding-block: 1.1rem;
}

.bandeau-cookies-titre {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  margin: 0 0 0.35rem;
}

.bandeau-cookies-texte {
  flex: 1 1 34rem;
}

.bandeau-cookies-texte p:last-child {
  margin: 0;
  font-size: 0.9375rem;
  max-width: 70ch;
}

.bandeau-cookies-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  flex: none;
}

/* Bouton « Gérer les cookies » du footer, présenté comme un lien */
.lien-cookies {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--paper-60);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.lien-cookies:hover {
  color: var(--paper);
}

/* --------------------------------------------------------------------------
   21. Pages simples (404, merci)
   -------------------------------------------------------------------------- */

.panneau-erreur {
  background: var(--ink);
  color: var(--paper);
  padding: clamp(2.5rem, 7vw, 4.5rem) clamp(1.5rem, 5vw, 3rem);
  margin-block: clamp(2rem, 5vw, 3rem);
}

.panneau-erreur .code {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(4.5rem, 16vw, 10rem);
  line-height: 0.95;
  letter-spacing: -0.03em;
  margin: 0;
}

.panneau-erreur .legende {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--paper-60);
  margin: 1rem 0 0;
}

.directions {
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
  border-top: var(--filet);
  max-width: 34rem;
}

.directions li {
  border-bottom: var(--filet);
}

.directions a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 0.25rem;
  font-family: var(--font-mono);
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink);
  text-decoration: none;
}

.directions a:hover {
  background: var(--ink);
  color: var(--paper);
  padding-inline: 0.75rem;
}

.directions svg {
  width: 1.1em;
  height: 1.1em;
  flex: none;
}

/* --------------------------------------------------------------------------
   22. Divers
   -------------------------------------------------------------------------- */

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

.prose {
  max-width: 68ch;
}

.prose h2 {
  margin-top: 2.5rem;
}

.prose h2:first-child {
  margin-top: 0;
}

/* Gabarit article du journal */
.article-date {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--gris);
  margin: 0 0 0.75rem;
}

.article-corps {
  max-width: 68ch;
}

.article-corps h2 {
  margin-top: 2.75rem;
}

.article-corps .figure {
  margin: 1.75rem 0;
  max-width: 30rem;
}

.article-corps .fiche,
.article-corps .tableau {
  margin-block: 1.5rem;
}

.article-corps .encadre {
  margin-block: 2rem;
}

.lire-aussi {
  border: var(--filet);
  padding: 1.5rem 1.75rem;
  margin-top: 3rem;
}

.lire-aussi ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.lire-aussi li {
  padding-block: 0.4rem;
}

.a-completer {
  background: rgba(196, 58, 33, 0.12);
  outline: 1px dashed var(--rouge-tampon);
  padding: 0 0.25em;
}

/* Séquence d'arrivée sur l'accueil : l'étiquette se pose */
@keyframes etiquette-pose {
  from {
    transform: translateY(-100%);
  }
  to {
    transform: translateY(0);
  }
}

.page-accueil .etiquette {
  animation: etiquette-pose 0.45s cubic-bezier(0.2, 0.7, 0.3, 1) backwards;
}

/* --------------------------------------------------------------------------
   23. Mouvement réduit : tout est statique
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}