/* Distance press — repris du thème Elementor : fond gris, police Sono, vert / gris clair / orange / violet.
   Pas de transitions : chaque zone change de fond au survol, immédiatement.

   Peu de classes, réutilisées partout :
     .page (+ .colonnes / .colonnes-2 / .etroite)  conteneur de page
     .boite          boîte gris clair (cartes, encart boutique, messages, récapitulatif) ; .erreur = orange
     .cadre          bordure verte (contenu des accordéons, choix de livraison)
     .etiquette      petite étiquette colorée (.verte / .violette / .orange)
     .bouton         bouton pleine largeur ; .accordeon, .galerie, .tableau, .texte, .avec, .petit
   Espacement unique --e (10px) pour les marges, les écarts et les marges intérieures ; --pad pour
   les petits éléments (étiquettes, boutons, champs, titres d'accordéon). */

@font-face {
  font-family: "Sono";
  src: url("../fonts/sono-latin.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
  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: "Sono";
  src: url("../fonts/sono-latin-ext.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
  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;
}

:root {
  --gris: #545454;      /* fond (#666 d'origine, assombri pour le contraste du vert et de l'orange) */
  --encre: #3a3a3a;     /* texte sur les boîtes claires */
  --clair: #CFCFCF;     /* boîtes, bandeaux */
  --tres-clair: #EBEBEB;
  --vert: #ADD63B;      /* texte, survol */
  --orange: #FFBE4B;    /* liens, élément actif */
  --violet: #C99DFF;    /* boutique */
  --e: 10px;            /* espacement unique : marges, écarts, marges intérieures */
  --pad: 4px 10px;      /* petits éléments (étiquettes, boutons, champs) : moins haut, pour rester compact */
  --bas: 64px;          /* espace sous le contenu (fil d'Ariane, filtres fixés en bas) */
  --mesure: 62ch;       /* largeur maximale des textes */
}

*, *::before, *::after { box-sizing: border-box; transition: none !important; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--gris);
  color: var(--vert);
  font: 400 16px/1.55 "Sono", ui-monospace, monospace;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { font-size: inherit; font-weight: 400; margin: 0; }
p { margin: 0 0 var(--e); }
a { color: var(--orange); text-decoration: none; }
a:hover { text-decoration: underline; }
img { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
form, fieldset { margin: 0; }
[hidden] { display: none !important; }

/* ——— Briques communes ——— */
.boite { background: var(--clair); color: var(--encre); padding: var(--e); margin-bottom: var(--e); }
.boite a { color: var(--encre); }
.boite img { width: 100%; margin-bottom: var(--e); }
.boite > :last-child { margin-bottom: 0; }
.erreur { background: var(--orange); color: var(--encre); }
.cadre { border: 1px solid var(--vert); padding: var(--e); margin-bottom: var(--e); }
.petit { font-size: 0.85em; opacity: 0.85; }
.droite { text-align: right; }

.etiquette { display: inline-block; padding: var(--pad); color: var(--encre); white-space: nowrap; }
a.etiquette:hover { text-decoration: none; background: var(--orange); }
.verte { background: var(--vert); }
.violette { background: var(--violet); }
.orange { background: var(--orange); }

.bouton {
  display: block; width: 100%; margin: 0 0 var(--e); padding: var(--pad);
  background: var(--tres-clair); color: var(--encre); border: 0; border-radius: 0; text-align: left; cursor: pointer;
}
.bouton.violette { background: var(--violet); }
.bouton:hover { background: var(--vert); text-decoration: none; }
.bouton:disabled { opacity: 0.5; cursor: not-allowed; }
.page > .bouton, .colonnes > div > .bouton { background: var(--clair); }
.lien { background: none; border: 0; padding: 0; color: var(--orange); cursor: pointer; }

/* « w/ » + artistes */
.avec { margin: 0; }
.avec a { color: inherit; }
.avec a:hover { background: var(--vert); text-decoration: none; }

/* Menu : « Distance press » ouvre la liste des catégories au survol */
.menu { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--e); }
.menu-site { position: relative; }
.menu-site ul {
  display: none; position: absolute; z-index: 30; top: 100%; left: 0;
  list-style: none; margin: 0; padding: 0; min-width: 100%; background: var(--vert);
}
.menu-site:hover ul, .menu-site:focus-within ul { display: block; }
.menu-site li a { display: block; padding: var(--pad); color: var(--encre); }
.menu-site li a:hover { background: var(--clair); text-decoration: none; }

/* Accordéons (details/summary), à ouverture unique */
details > summary { list-style: none; cursor: pointer; }
details > summary::-webkit-details-marker { display: none; }
.accordeon details { margin-bottom: var(--e); }
.accordeon summary { background: var(--clair); color: var(--encre); padding: var(--pad); }
.accordeon summary:hover, .accordeon details[open] > summary { background: var(--vert); }
.accordeon details > div { border: 1px solid var(--vert); border-top: 0; padding: var(--e); }

/* Textes mis en forme (markdown) */
.texte { max-width: var(--mesure); }
.texte:empty { display: none; }
.texte h2, .texte h3 { color: #fff; margin: calc(2 * var(--e)) 0 var(--e); }
.texte > :first-child { margin-top: 0; }
.texte ul { margin: 0 0 var(--e); padding-left: calc(2 * var(--e)); }
.texte a { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.texte a:hover { color: #fff; }
.texte strong { font-weight: 650; }
.texte iframe { max-width: 100%; border: 0; }

/* Tableaux (markdown, panier) */
.texte table, .tableau { border-collapse: collapse; width: 100%; margin-bottom: var(--e); }
.texte th, .texte td, .tableau th, .tableau td { border-bottom: 1px solid var(--vert); padding: var(--pad); text-align: left; vertical-align: top; }
.texte th, .tableau th { color: var(--clair); font-weight: 400; }

/* Listes sans puces (Upcoming, totaux du panier) */
.liste { list-style: none; margin: 0 0 var(--e); padding: 0; }
.liste li { display: flex; justify-content: space-between; gap: var(--e); padding: var(--e) 0; border-bottom: 1px solid var(--vert); }
.liste span { color: var(--clair); }

/* Formulaires */
.formulaire label { display: block; margin-bottom: var(--e); }
.formulaire input[type=text], .formulaire input[type=email], .formulaire input[type=password], .formulaire input[type=number],
.formulaire select, .formulaire textarea, .tableau input {
  display: block; width: 100%; padding: var(--pad); background: var(--tres-clair); color: var(--encre); border: 0; border-radius: 0;
}
.tableau input { width: 4.5em; }
.case { display: flex !important; gap: var(--e); align-items: baseline; cursor: pointer; }

/* ——— Mise en page ——— */
.page { padding: var(--e) var(--e) var(--bas); }
.etroite { max-width: calc(var(--mesure) + 2 * var(--e) + 8ch); }
.colonnes { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--e); align-items: start; }
.colonnes-2 { grid-template-columns: repeat(2, 1fr); }
.colonnes > .boite { grid-column: 1 / -1; }
.collant { position: sticky; top: var(--e); }

/* Grille d'encarts (boutique) */
.grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--e); align-items: start; }

/* Images en colonne, cliquables (visionneuse) */
.galerie { display: flex; flex-direction: column; gap: var(--e); }
.galerie img { width: 100%; cursor: zoom-in; }

/* Bandeau des pages intérieures : menu, titre en bas à gauche, artistes à droite */
.bandeau {
  background: var(--clair); color: var(--encre); min-height: 130px; padding: var(--e);
  display: grid; grid-template-columns: 1fr 2fr; grid-template-rows: auto 1fr; gap: var(--e) var(--e); align-items: end;
}
.bandeau .menu { grid-column: 1 / -1; align-self: start; }
.bandeau h1 { font-size: 1.35em; font-weight: 600; line-height: 1.25; }

/* Fil d'Ariane fixé en bas à droite */
.fil { position: fixed; z-index: 20; right: var(--e); bottom: var(--e); background: var(--clair); color: var(--encre); padding: var(--pad); }
.fil a { color: var(--encre); }
.fil span { background: var(--orange); }

/* ——— Accueil ——— */
html:has(body.accueil) { scroll-snap-type: y proximity; }
.ouverture { min-height: 100vh; display: flex; align-items: flex-end; justify-content: center; padding-bottom: var(--bas); scroll-snap-align: start; }
.fleche { color: var(--vert); font-size: 34px; line-height: 1; padding: var(--e) var(--e); }
.fleche:hover { color: var(--orange); text-decoration: none; }

.accueil-grille { display: grid; grid-template-columns: 1fr 2fr; gap: var(--e); min-height: 100vh; padding: 0 var(--e); scroll-snap-align: start; }
.colonne-gauche { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; justify-content: space-between; padding: var(--e) 0; }
.colonne-gauche .menu { flex-direction: column; }
.colonne-gauche .accordeon details > div { max-height: 55vh; overflow-y: auto; }
.liste-projets { padding: var(--e) 0 var(--bas); }

/* Carte d'un projet */
.carte:hover { background: var(--tres-clair); }
.carte h2 { border-bottom: 1px solid var(--encre); width: calc(100% / 3); min-width: 14em; font-weight: 600; }
.carte-infos { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--e); margin: 0 0 var(--e); }
.carte-infos span { border-top: 1px solid var(--encre); min-height: 1.55em; }
.carte-infos span:empty { border-top-color: transparent; }
.carte img { max-height: 50vh; object-fit: cover; }
.carte .avec { border-top: 1px solid var(--encre); padding-top: var(--e); font-size: 0.9em; }

/* Filtres fixés en bas à droite */
.filtres { position: fixed; z-index: 20; right: var(--e); bottom: var(--e); display: flex; flex-wrap: wrap; justify-content: flex-end; background: var(--clair); }
.filtres button, .filtres summary { background: none; border: 0; padding: var(--pad); color: var(--encre); cursor: pointer; }
.filtres button:hover, .filtres summary:hover { background: var(--vert); }
.filtres .actif { background: var(--orange); }
.filtres.cachee { visibility: hidden; }
.filtre-artistes { position: relative; }
.filtre-artistes > div {
  position: absolute; right: 0; bottom: 100%; width: max-content; max-width: 80vw; max-height: 60vh;
  overflow-y: auto; background: var(--clair); display: flex; flex-direction: column; align-items: flex-end;
}

/* Encart boutique */
.encart-titre { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--e); }
.encart-titre a { font-weight: 600; }
.prix { font-size: 1.2em; }

.embed iframe { width: 100%; border: 0; display: block; margin-bottom: var(--e); }
.recapitulatif { font: inherit; white-space: pre-wrap; }

/* Visionneuse d'images */
.visionneuse { position: fixed; inset: 0; z-index: 100; background: rgba(60, 60, 60, 0.97); display: flex; align-items: center; justify-content: center; cursor: zoom-out; }
.visionneuse img { max-width: 94vw; max-height: 92vh; width: auto; }
.visionneuse button { position: absolute; top: 50%; background: var(--clair); color: var(--encre); border: 0; padding: var(--pad); cursor: pointer; }
.visionneuse button:hover { background: var(--vert); }
.visionneuse .precedente { left: var(--e); }
.visionneuse .suivante { right: var(--e); }

/* ——— Téléphone et tablette ——— */
@media (max-width: 800px) {
  .accueil-grille, .colonnes, .bandeau { grid-template-columns: 1fr; }
  .colonnes { gap: var(--e); }
  .colonne-gauche { position: static; height: auto; gap: var(--e); }
  .colonne-gauche .menu { flex-direction: row; }
  .carte h2 { width: auto; min-width: 0; }
  .carte-infos { grid-template-columns: 1fr 1fr; }
  .filtres { left: var(--e); justify-content: flex-start; }
  .filtre-artistes { position: static; }
  .filtre-artistes > div { left: 0; right: 0; max-width: none; align-items: flex-start; }
  .bandeau { min-height: 0; }
  .page { padding-bottom: var(--e); }
  .galerie { gap: var(--e); }
  .collant { position: static; }
  .tableau .masquable { display: none; }
  .fil { position: static; display: table; margin: 0 var(--e) var(--e) auto; }
}