/* ═══════════════════════════════════════════════════════════════════════════
   STRUCTURE « Comptoir » — codes des grands loueurs.
   Bandeau de service au-dessus de la barre, bouton d'action carré et massif,
   guichet de filtres posé en travers du hero. Rien de rond, rien de flottant.
   ═══════════════════════════════════════════════════════════════════════════ */

[data-structure="comptoir"] {
  --st-radius: 3px;
  --st-btn-radius: 2px;
  --st-bar: 34px;          /* hauteur du bandeau de service */
  --st-cols: 3;
}

/* ── Barre du haut : DEUX étages ─────────────────────────────────────────── */
[data-structure="comptoir"] :is([data-st="nav"],nav#nav,nav) {
  position: sticky; top: 0; z-index: 120;
  display: flex; align-items: center; gap: 1rem;
  padding: .7rem 1.6rem;
  padding-top: calc(.7rem + var(--st-bar));
  background: #fff;
  border-bottom: 3px solid var(--accent, #c00);
  box-shadow: 0 2px 0 rgba(15,32,64,.06);
}
/* Le téléphone quitte la barre et devient le bandeau de service du dessus. */
[data-structure="comptoir"] [data-st="navtel"] {
  position: absolute; top: 0; left: 0; right: 0;
  height: var(--st-bar);
  display: flex; align-items: center; justify-content: flex-end;
  gap: .5rem;
  padding: 0 1.6rem;
  background: var(--navy, #12243f);
  color: #fff !important;
  font-size: .78rem; font-weight: 600; letter-spacing: .04em;
  text-decoration: none;
}
[data-structure="comptoir"] [data-st="navtel"]::before {
  content: "Réservation et renseignements";
  opacity: .62; font-weight: 400; margin-right: .2rem;
}
[data-structure="comptoir"] [data-st="navlogo"] { margin-right: auto; }
[data-structure="comptoir"] [data-st="navlinks"] {
  display: flex; align-items: center; gap: .9rem; margin-left: auto;
}
/* Bouton d'action : rectangle plein, large, sans arrondi. */
[data-structure="comptoir"] [data-st="navcta"] {
  border-radius: var(--st-btn-radius) !important;
  padding: .8rem 1.6rem !important;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .8rem; font-weight: 800;
  border: none;
}

/* ── Hero : le grand titre à gauche, la phrase d'accompagnement à droite.
   Deux colonnes serrées plutôt qu'un empilement centré, sans creuser d'espace
   inutile entre les deux. ───────────────────────────────────────────────── */
[data-structure="comptoir"] :is([data-st="hero"],#hero) {
  text-align: left;
  padding: 2.8rem 1.6rem 5rem;
  position: relative;
}
[data-structure="comptoir"] :is([data-st="hero"],#hero) > *:first-child,
[data-structure="comptoir"] .hero-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: .6rem 2.2rem;
  /* Le texte de droite se lit en vis-à-vis du titre, pas calé sur son pied :
     aligné en bas, il tombait sous la dernière ligne et paraissait décroché. */
  align-items: center;
}
@media (min-width: 900px){
  [data-structure="comptoir"] :is([data-st="hero"],#hero) > *:first-child,
  [data-structure="comptoir"] .hero-inner { grid-template-columns: 1.45fr 1fr; }
  [data-structure="comptoir"] [data-st="hero-title"] { grid-column: 1; margin-bottom: 0; }
  [data-structure="comptoir"] [data-st="hero-sub"] { grid-column: 2; margin-bottom: 0; }
  /* Le guichet reprend toute la largeur sous les deux colonnes. */
  [data-structure="comptoir"] .hero-inner > .filter-wrap,
  [data-structure="comptoir"] [data-st="filters"] { grid-column: 1 / -1; }
}
[data-structure="comptoir"] [data-st="hero-title"] {
  font-size: clamp(2rem, 5.2vw, 3.6rem);
  line-height: 1.03; max-width: 16ch;
  text-transform: uppercase; letter-spacing: -.01em;
}
[data-structure="comptoir"] [data-st="hero-sub"] { max-width: 42ch; font-size: .98rem; }

/* ── Guichet : la barre de filtres chevauche le bas du hero ──────────────── */
/* Le décor va au PANNEAU de filtres quand le template en fournit un
   ([data-st="filterpanel"]), sinon aux filtres eux-mêmes. Le poser sur les deux
   dessinait deux cartes blanches l'une dans l'autre, décalées par les marges
   négatives (constaté sur les sites test du 2026-09-20). */
[data-structure="comptoir"] :is([data-st="filterpanel"],
                                [data-st="filters"]:not([data-st="filterpanel"] *)) {
  position: relative; z-index: 5;
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
  margin: 2.4rem -.4rem -4.6rem;
  padding: 1rem 1.2rem;
  background: #fff;
  border-left: 5px solid var(--accent, #c00);
  border-radius: 0;
  box-shadow: 0 14px 34px rgba(15,32,64,.18);
  max-width: none;
}
/* Dans le panneau, les pills ne sont plus qu'une rangée. */
[data-structure="comptoir"] [data-st="filterpanel"] [data-st="filters"] {
  background: none; box-shadow: none; border: 0; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: .5rem; flex: 1 1 auto; min-width: 0;
}
/* Quand les filtres vivent dans la section (et non dans le hero), on les colle
   sous la barre plutôt que de les faire flotter dans le vide. */
[data-structure="comptoir"] [data-st="section"] > [data-st="filters"],
[data-structure="comptoir"] [data-st="section"] [data-st="filters"] {
  position: sticky; top: calc(var(--st-bar) + 56px);
  margin: 0 0 1.4rem; box-shadow: 0 6px 18px rgba(15,32,64,.10);
}

/* ── Catalogue : grille régulière, cartes carrées à liseré ───────────────── */
[data-structure="comptoir"] [data-st="section"] { padding-block: 4.4rem 3rem; }
[data-structure="comptoir"] [data-st="grid"] {
  display: grid; grid-template-columns: repeat(var(--st-cols), minmax(0, 1fr)); gap: 1.2rem;
}
[data-structure="comptoir"] [data-st="card"] {
  border-radius: var(--st-radius); overflow: hidden;
  border: 1px solid rgba(15,32,64,.14);
  border-top: 3px solid transparent;
  transition: border-top-color .2s ease, transform .2s ease;
}
[data-structure="comptoir"] [data-st="card"]:hover {
  border-top-color: var(--accent, #c00); transform: translateY(-2px);
}
[data-structure="comptoir"] [data-st="cta"] {
  border-radius: var(--st-btn-radius);
  padding: .9rem 1.8rem; text-transform: uppercase;
  letter-spacing: .07em; font-weight: 800; font-size: .84rem;
}

/* ── Bas de page : bandes empilées, la dernière plus sombre ──────────────── */
[data-structure="comptoir"] :is([data-st="footer"],footer#footer,footer) {
  border-top: 5px solid var(--accent, #c00);
  padding: 2.6rem 1.6rem 0;
}
[data-structure="comptoir"] :is([data-st="footer"],footer#footer,footer) > *:last-child {
  margin-top: 2rem; padding: .9rem 0;
  border-top: 1px solid rgba(255,255,255,.14);
  font-size: .8rem; opacity: .8;
}

@media (max-width: 900px) { [data-structure="comptoir"] { --st-cols: 2; } }
@media (max-width: 620px) {
  [data-structure="comptoir"] { --st-cols: 1; }
  [data-structure="comptoir"] :is([data-st="filterpanel"],[data-st="filters"]) { margin-bottom: -3.6rem; }
  [data-structure="comptoir"] [data-st="navtel"] { font-size: .7rem; padding: 0 .9rem; }
  [data-structure="comptoir"] [data-st="navtel"]::before { content: ""; }
}

/* ── Lisibilité de la barre : elle est claire, donc tout ce qui s'y pose est
   sombre. Sans cette règle, un template au logo blanc devient illisible. ──── */
[data-structure="comptoir"] :is([data-st="nav"],nav#nav,nav),
[data-structure="comptoir"] :is([data-st="nav"],nav#nav,nav) a:not([data-st="navtel"]),
[data-structure="comptoir"] [data-st="navlogo"],
[data-structure="comptoir"] [data-st="navlinks"] a:not([data-st="navcta"]) { color: #12243f !important; }
[data-structure="comptoir"] [data-st="navlogo"] span { color: var(--accent, #c00) !important; }
[data-structure="comptoir"] [data-st="navcta"] { color: #fff !important; background: var(--accent-strong, var(--accent, #c00)) !important; }
[data-structure="comptoir"] :is([data-st="nav"],nav#nav,nav) [data-st="navtel"],
[data-structure="comptoir"] :is([data-st="nav"],nav#nav,nav) [data-st="navtel"] * { color: #fff !important; }