/* ============================================================================
   PIAZZA — le thème de ceux dont on pousse la porte.
   ----------------------------------------------------------------------------
   Parti pris : l'appétit. Bandes de couleur pleines qui alternent,
   typographie ronde et grasse, un bandeau plein écran. Là où Verrière
   chuchote, Piazza appelle depuis le trottoir.

   Trois choix de structure le séparent des deux autres :
   — les sections sont des BANDES colorées bord à bord, pas des blocs posés
     sur un fond commun ;
   — la carte est une liste à ligne de points, comme une vraie carte ;
   — les horaires sont en évidence, dans l'en-tête et dans le pied — c'est
     la première chose qu'on cherche sur le site d'un commerce.

   ── CE QUI SE RÈGLE, ET OÙ ──
   Rien ici n'écrit une couleur, un arrondi ni un espacement en dur : tout
   passe par les variables posées par `layout/theme.liquid`. C'est ce qui
   permet à une ÉDITION — un habillage complet du thème — de n'être qu'un
   paquet de valeurs, sans une ligne de CSS à elle.

     --papier / --encre      la page, et son texte
     --creme                 le fond des bandes claires (texte : --encre)
     --profond / --sur-profond   l'en-tête, le pied, les bandes sombres
     --accent / --sur-accent     les aplats d'accent, et les boutons
     --f-titre / --f-texte   les deux polices
     --titre-graisse / --titre-casse / --titre-espace
     --arrondi               images, cartes, vignettes
     --r-bouton              boutons, pastilles, étiquettes, rangs
     --filet                 l'épaisseur des traits
     --k-densite             l'air entre les bandes

   Les signatures qui ne tiennent PAS dans une variable — une étiquette
   encadrée, un filet d'accent, une ombre portée — vivent tout en bas, sous
   `[data-edition]`.
   ========================================================================= */

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

body {
  margin: 0;
  background: var(--papier);
  color: var(--encre);
  font-family: var(--f-texte, ui-rounded, "SF Pro Rounded", ui-sans-serif, system-ui, sans-serif);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; }

.saut { position: absolute; left: -9999px; }
.saut:focus {
  left: 1rem; top: 1rem; z-index: 10;
  background: var(--profond); color: var(--sur-profond);
  padding: 0.75rem 1rem; border-radius: var(--r-bouton);
}

.enveloppe { width: 90%; max-width: var(--largeur); margin-inline: auto; }

.titre {
  font-family: var(--f-titre);
  font-weight: var(--titre-graisse, 800);
  letter-spacing: var(--titre-espace, -0.03em);
  text-transform: var(--titre-casse, none);
  line-height: 1.05;
  margin: 0;
}
.titre-geant { font-size: clamp(2.75rem, 7vw, 5rem); }
.titre-section { font-size: clamp(2rem, 4vw, 3rem); }

/* En capitales, l'interlignage doit respirer : sans jambages descendants,
   deux lignes à 1,05 se touchent presque. */
[data-casse="capitales"] .titre { line-height: 1.12; }

.surtitre {
  display: inline-block;
  margin-bottom: 1rem;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.bouton {
  display: inline-block;
  padding: 0.95rem 2rem;
  border-radius: var(--r-bouton);
  background: var(--accent);
  color: var(--sur-accent);
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  transition: transform 0.15s ease, background-color 0.15s ease;
}
/* Au survol, l'accent s'assombrit et le texte NE CHANGE PAS : un accent
   clair — la lime de Ring — porte du texte sombre, et lui passer du blanc
   au survol rendait le bouton illisible pile au moment où on le vise. */
.bouton:hover { background: var(--accent-sombre); transform: scale(1.03); }

.bouton-creme { background: var(--creme); color: var(--encre); }
.bouton-creme:hover { background: var(--papier); color: var(--encre); }

/* ── En-tête ─────────────────────────────────────────────────────────── */

.entete {
  background: var(--profond);
  color: var(--sur-profond);
}
.entete-inner {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding-block: 1rem;
}
.marque {
  font-family: var(--f-titre);
  font-weight: var(--titre-graisse, 800);
  font-size: 1.5rem;
  letter-spacing: -0.02em;
  text-decoration: none;
}
.nav {
  display: flex;
  gap: 1.5rem;
  margin-left: auto;
  font-weight: 700;
  font-size: 0.9375rem;
}
.nav a { text-decoration: none; opacity: 0.9; }
.nav a:hover { opacity: 1; }

/* Le filet sous la barre : optionnel, à l'épaisseur des filets du thème.
   C'est ce qui donne au cabinet son allure de document.

   L'accent y est ÉCLAIRCI d'un cinquième vers le texte de l'en-tête, et
   pas par coquetterie : le bleu profond d'un cabinet médical est voisin du
   navy de sa barre, et le filet pur disparaissait dans le fond. Un
   cinquième suffit à le détacher sans lui changer sa teinte. */
.entete--filet {
  border-bottom: var(--filet) solid color-mix(in srgb, var(--accent) 78%, var(--sur-profond));
}

/* La PILULE flottante. La barre ne va plus d'un bord à l'autre : elle se
   pose en retrait sur le papier, arrondie aux deux bouts. Le fond sombre
   passe donc de l'en-tête à son enveloppe — sinon la pilule serait un
   rectangle sombre à coins ronds posé sur une bande sombre, c'est-à-dire
   rien du tout. */
.entete--pilule {
  background: var(--papier);
  color: var(--encre);
  padding-block: 1rem;
}
.entete--pilule .entete-inner {
  background: var(--profond);
  color: var(--sur-profond);
  border-radius: 999px;
  padding: 0.7rem 1.75rem;
  box-shadow: 0 14px 34px -20px color-mix(in srgb, var(--profond) 80%, transparent);
}

/* Les horaires du jour, dans l'en-tête : sur le site d'un commerce, c'est
   la première chose qu'on cherche. La cacher dans le pied est une faute. */
.entete-horaires {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.9rem;
  border-radius: var(--r-bouton);
  background: color-mix(in srgb, var(--sur-profond) 18%, transparent);
  font-size: 0.875rem;
  font-weight: 700;
  white-space: nowrap;
}
.pastille {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 999px;
  background: #7ddc7d;
  flex: none;
}

@media (max-width: 56rem) {
  .nav { display: none; }
}

/* ── Bandeau plein écran ─────────────────────────────────────────────── */

.bandeau {
  position: relative;
  /* La densité pilote la hauteur : serrée, l'affiche tient sur un écran ;
     aérée, elle prend presque toute la page. Les bornes empêchent qu'un
     réglage extrême donne une bande écrasée ou un mur infranchissable. */
  min-height: clamp(26rem, calc(66vh * var(--k-densite, 1)), 94vh);
  display: grid;
  place-items: center;
  text-align: center;
  color: #fff;
  /* Le fond plein sert de FILET DE SÉCURITÉ : sans photographie, le voile
     ci-dessous se poserait sur le papier, et du blanc sur un gris clair
     serait illisible. Avec lui, le bandeau reste lisible même vide. */
  background-color: var(--profond);
  background-size: cover;
  background-position: center;
}
/* Le voile. C'est LUI qui garantit la lisibilité du texte du bandeau,
   quelle que soit la photographie posée derrière — et c'est pour cela
   qu'il n'est pas réglable jusqu'à zéro. */
.bandeau::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.42), rgba(0, 0, 0, 0.7));
}
.bandeau-inner {
  position: relative;
  padding-block: calc(5rem * var(--k-densite, 1));
  max-width: 42rem;
}
.bandeau p {
  font-size: 1.1875rem;
  margin-inline: auto;
  max-width: 34ch;
}
.bandeau-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
  margin-top: 2.25rem;
}

/* ── Bandes ──────────────────────────────────────────────────────────── */

/* Chaque section est une bande pleine, bord à bord. C'est ce qui donne au
   thème son rythme : on descend la page comme on longe une devanture. */
.bande { padding-block: calc(clamp(3.5rem, 8vw, 6rem) * var(--k-densite, 1)); }
.bande-creme { background: var(--creme); }
.bande-accent { background: var(--accent); color: var(--sur-accent); }
.bande-encre { background: var(--profond); color: var(--sur-profond); }

.bande-tete { max-width: 40rem; margin-bottom: calc(3rem * var(--k-densite, 1)); }
.bande-centre { margin-inline: auto; text-align: center; }
/* Le texte d'introduction est légèrement retiré — mais par un MÉLANGE et
   non par `opacity`, pour que l'audit de contraste mesure la couleur
   réellement affichée plutôt que celle déclarée. */
.bande-tete p {
  margin-top: 1rem;
  font-size: 1.0625rem;
  color: color-mix(in srgb, currentColor 88%, transparent);
}

/* ── La carte ────────────────────────────────────────────────────────── */

.carte-liste { max-width: 46rem; margin-inline: auto; }
.carte-ligne {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 0.75rem;
  padding-block: 1rem;
}
.carte-ligne + .carte-ligne {
  border-top: var(--filet) dashed color-mix(in srgb, currentColor 30%, transparent);
}
.carte-ligne h3 {
  margin: 0;
  font-family: var(--f-titre);
  font-size: 1.1875rem;
  font-weight: var(--titre-graisse, 800);
  letter-spacing: -0.01em;
}
.carte-ligne p {
  margin: 0.25rem 0 0;
  font-size: 0.9375rem;
  color: color-mix(in srgb, currentColor 85%, transparent);
  grid-column: 1;
}
.carte-prix {
  font-family: var(--f-titre);
  font-weight: var(--titre-graisse, 800);
  font-size: 1.125rem;
  white-space: nowrap;
}

/* ── Galerie en bande ────────────────────────────────────────────────── */

/* Défilement horizontal avec ancrage : sur mobile on fait glisser, sur
   grand écran les quatre tiennent. Une grille aurait imposé des lignes
   incomplètes. */
.galerie {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(15rem, 1fr);
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 0.5rem;
}
.galerie figure {
  margin: 0;
  scroll-snap-align: start;
  border-radius: var(--arrondi);
  overflow: hidden;
  background: color-mix(in srgb, currentColor 8%, transparent);
}
.galerie img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.galerie figcaption {
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  font-weight: 700;
}

/* ── Infos pratiques ─────────────────────────────────────────────────── */

.pratique {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
}
.pratique h3 {
  margin: 0 0 0.5rem;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: color-mix(in srgb, currentColor 82%, transparent);
}
.pratique p { margin: 0; font-size: 1.125rem; font-weight: 700; }

/* ── Pied ────────────────────────────────────────────────────────────── */

.pied {
  background: var(--profond);
  color: var(--sur-profond);
  padding-block: calc(3rem * var(--k-densite, 1)) calc(2rem * var(--k-densite, 1));
}
.pied-grille {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: space-between;
}
.pied-liens { display: flex; flex-wrap: wrap; gap: 1.25rem; font-weight: 700; }
.pied-liens a { text-decoration: none; opacity: 0.9; }
.pied-bas {
  margin-top: 2.5rem;
  padding-top: 1.25rem;
  border-top: var(--filet) solid color-mix(in srgb, var(--sur-profond) 22%, transparent);
  font-size: 0.875rem;
  color: color-mix(in srgb, currentColor 80%, transparent);
}

/* ============================================================================
   Les sections ajoutées — grammaire de Piazza : bandes colorées pleine
   largeur, centrage, généreux.
   ========================================================================= */

.chiffres-liste {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 2rem;
  margin: calc(2.5rem * var(--k-densite, 1)) 0 0;
  text-align: center;
}
.chiffre dt {
  font-family: var(--f-titre);
  font-size: clamp(2.25rem, 5vw, 3.5rem);
  font-weight: var(--titre-graisse, 800);
  letter-spacing: var(--titre-espace, -0.03em);
  line-height: 1;
  color: var(--accent);
}
.chiffre dd {
  margin: 0.5rem 0 0;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.etapes-liste {
  list-style: none;
  margin: calc(2.5rem * var(--k-densite, 1)) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 2rem;
}
.etapes-liste li {
  text-align: center;
  display: grid;
  justify-items: center;
  gap: 0.75rem;
}
/* Le rang numéroté suit la FORME DES BOUTONS, pas l'arrondi des cartes :
   c'est le carré contre le cercle, et c'est ce qui se voit le mieux sur
   une vignette. */
.etape-rang {
  width: 3rem;
  height: 3rem;
  border-radius: var(--r-bouton);
  background: var(--accent);
  color: var(--sur-accent);
  display: grid;
  place-items: center;
  font-family: var(--f-titre);
  font-size: 1.25rem;
  font-weight: var(--titre-graisse, 800);
}
.etapes-liste h3 { margin: 0 0 0.35rem; font-family: var(--f-titre); font-size: 1.1rem; }
.etapes-liste p { margin: 0; }

.zone-liste {
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem;
}
.zone-liste li {
  background: var(--creme);
  color: var(--encre);
  border-radius: var(--r-bouton);
  padding: 0.45rem 1.1rem;
  font-size: 0.92rem;
  font-weight: 600;
}
.zone-mention { margin: 1.5rem 0 0; text-align: center; font-size: 0.9rem; }

.journal-liste {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
  margin-top: calc(2.5rem * var(--k-densite, 1));
}
.journal-carte {
  background: var(--creme);
  color: var(--encre);
  border-radius: var(--arrondi);
  overflow: hidden;
}
.journal-carte img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}
.journal-carte h3 { margin: 1rem 1rem 0.4rem; font-family: var(--f-titre); font-size: 1.1rem; }
.journal-carte p { margin: 0 1rem; }
.journal-carte a { text-decoration: none; }
.journal-carte a:hover { color: var(--accent); }
.journal-date {
  display: block;
  margin: 0.7rem 1rem 1.1rem;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: color-mix(in srgb, currentColor 72%, transparent);
}

/* L'appel porte la classe `bande` ET son propre rembourrage : les deux
   s'additionnaient, et à densité 145 cela faisait trois cent cinquante
   pixels de couleur vide entre les infos pratiques et le titre. Une seule
   des deux marges commande, et c'est celle du corps. */
.appel { background: var(--accent); color: var(--sur-accent); padding-block: 0; }
.appel-corps {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 1.5rem;
  padding-block: calc(3.5rem * var(--k-densite, 1));
}
.appel-corps p { margin: 0.6rem 0 0; max-width: 46ch; }
/* Le bouton s'inverse : le texte de l'accent devient son fond. Le rapport
   de contraste est le même dans les deux sens — si l'aplat est lisible, le
   bouton l'est aussi. */
.appel .bouton { background: var(--sur-accent); color: var(--accent); }
.appel .bouton:hover { background: var(--sur-accent); color: var(--accent-sombre); }

.texte-corps { max-width: 66ch; margin: 2rem auto 0; }
.texte-corps h3 { margin: 2rem 0 0.5rem; font-family: var(--f-titre); font-size: 1.2rem; }
.texte-corps h3:first-child { margin-top: 0; }

.acces-grille {
  display: grid;
  gap: 2rem;
  margin-top: calc(2.5rem * var(--k-densite, 1));
  justify-items: center;
}
.acces-infos { display: grid; gap: 0.75rem; width: min(100%, 30rem); }
.acces-ligne {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 0.6rem;
  border-bottom: var(--filet) dotted color-mix(in srgb, currentColor 34%, transparent);
}
.acces-ligne strong { font-weight: 700; }
.acces-plan {
  display: inline-block;
  border: var(--filet) solid currentColor;
  border-radius: var(--r-bouton);
  padding: 0.6rem 1.4rem;
  text-decoration: none;
  font-weight: 700;
}

/* ============================================================================
   LES SIGNATURES D'ÉDITION
   ----------------------------------------------------------------------------
   Ce qui ne se règle pas par une variable. Chacune tient en deux ou trois
   déclarations, et chacune doit se voir sur une capture de trois cents
   pixels — sinon elle ne sert à rien.
   ========================================================================= */

/* CHANTIER et RING — le surtitre devient une ÉTIQUETTE cernée d'un filet
   épais, comme un tampon de bon de livraison. */
[data-edition="chantier"] .surtitre,
[data-edition="ring"] .surtitre {
  border: var(--filet) solid currentColor;
  padding: 0.28rem 0.75rem;
  letter-spacing: 0.2em;
}

/* CHANTIER — un trait de niveau sous chaque tête de bande. */
[data-edition="chantier"] .bande-tete {
  border-bottom: var(--filet) solid color-mix(in srgb, currentColor 45%, transparent);
  padding-bottom: 1.5rem;
}

/* RING — chaque bande est ouverte par un filet d'accent pleine largeur :
   le fil du ring. Les bandes QUI SONT DÉJÀ l'accent en sont exclues : un
   filet lime sur un aplat lime ne se voit pas, et il écrasait au passage
   le séparateur du bas de page. */
[data-edition="ring"] .bande:not(.bande-accent):not(.appel) {
  border-top: var(--filet) solid var(--accent);
}

/* TABLE — le surtitre s'ouvre d'un tiret cadratin, à la manière d'une
   ligne de menu écrite à la main. */
[data-edition="table"] .surtitre::before { content: "— "; }

/* ATELIER — le surtitre est souligné d'un filet de laiton. Table et
   Atelier sont les deux éditions à empattements du thème : sans marque
   propre à chacune, on les confondrait de loin, et c'est exactement ce
   qu'un sélecteur d'éditions ne doit pas permettre. */
[data-edition="atelier"] .surtitre {
  border-bottom: var(--filet) solid var(--accent);
  padding-bottom: 0.3rem;
}

/* TABLE — la carte se lit comme une vraie carte : ses lignes se séparent
   d'un pointillé serré plutôt que d'un tiret. */
[data-edition="table"] .carte-ligne + .carte-ligne { border-top-style: dotted; }

/* CABINET — chaque bande est refermée par un filet fin : la page se lit
   comme un document, section après section. */
[data-edition="cabinet"] .bande + .bande {
  border-top: 1px solid color-mix(in srgb, var(--encre) 14%, transparent);
}

/* SALON et STUDIO — rien n'est cerné, tout est POSÉ : les vignettes et les
   cartes portent une ombre longue et douce. */
[data-edition="salon"] .galerie figure,
[data-edition="salon"] .journal-carte,
[data-edition="studio"] .galerie figure,
[data-edition="studio"] .journal-carte {
  box-shadow: 0 26px 50px -30px rgba(0, 0, 0, 0.55);
}

/* STUDIO — le rang numéroté n'est plus un aplat mais un cercle cerné : le
   studio ne remplit pas, il cadre. */
[data-edition="studio"] .etape-rang {
  background: transparent;
  color: var(--accent);
  border: 2px solid var(--accent);
}

/* SALON — la galerie s'aère : les vignettes s'écartent et s'allongent. */
[data-edition="salon"] .galerie { gap: 1.75rem; }
[data-edition="salon"] .galerie img { aspect-ratio: 4 / 5; }

/* ── Et pour finir : le séparateur des deux aplats d'accent ───────────
   Les infos pratiques et l'appel sont tous deux peints à l'accent, et se
   suivent sur la page d'accueil : sans rien entre eux, ils fondent en un
   seul pavé de couleur, et le rythme de bandes du thème s'interrompt là
   où il devrait conclure.

   Cette règle est écrite EN DERNIER, et avec une classe de plus que
   nécessaire, pour une raison précise : les signatures ci-dessus posent
   elles aussi des `border-top` sur `.bande`, et à spécificité égale la
   dernière l'emporte. Placée plus haut, elle disparaissait sous le filet
   lime de Ring — invisible sur un fond lime. */
.bande-accent + .bande.appel {
  border-top: var(--filet) solid color-mix(in srgb, var(--sur-accent) 32%, transparent);
}