/* ═══════════════════════════════════════════════════════════════════════════
   STRUCTURE « Guichet » (LOCATION) : repris de « Comptoir », le style de référence
   choisi par Yacine le 2026-09-26. 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="guichet"] {
  --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="guichet"] :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="guichet"] [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="guichet"] [data-st="navtel"]::before {
  content: "Réservation et renseignements";
  opacity: .62; font-weight: 400; margin-right: .2rem;
}
[data-structure="guichet"] [data-st="navlogo"] { margin-right: auto; }
[data-structure="guichet"] [data-st="navlinks"] {
  display: flex; align-items: center; gap: .9rem; margin-left: auto;
}
/* Bouton d'action : rectangle plein, large, sans arrondi. */
[data-structure="guichet"] [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="guichet"] :is([data-st="hero"],#hero) {
  text-align: left;
  padding: 2.8rem 1.6rem 5rem;
  position: relative;
}
[data-structure="guichet"] :is([data-st="hero"],#hero) > *:first-child,
[data-structure="guichet"] .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="guichet"] :is([data-st="hero"],#hero) > *:first-child,
  [data-structure="guichet"] .hero-inner { grid-template-columns: 1.45fr 1fr; }
  [data-structure="guichet"] [data-st="hero-title"] { grid-column: 1; margin-bottom: 0; }
  [data-structure="guichet"] [data-st="hero-sub"] { grid-column: 2; margin-bottom: 0; }
  /* Le guichet reprend toute la largeur sous les deux colonnes. */
  [data-structure="guichet"] .hero-inner > .filter-wrap,
  [data-structure="guichet"] [data-st="filters"] { grid-column: 1 / -1; }
}
[data-structure="guichet"] [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="guichet"] [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="guichet"] :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="guichet"] [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="guichet"] [data-st="section"] > [data-st="filters"],
[data-structure="guichet"] [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="guichet"] [data-st="section"] { padding-block: 4.4rem 3rem; }
[data-structure="guichet"] [data-st="grid"] {
  display: grid; grid-template-columns: repeat(var(--st-cols), minmax(0, 1fr)); gap: 1.2rem;
}
[data-structure="guichet"] [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="guichet"] [data-st="card"]:hover {
  border-top-color: var(--accent, #c00); transform: translateY(-2px);
}
[data-structure="guichet"] [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="guichet"] :is([data-st="footer"],footer#footer,footer) {
  border-top: 5px solid var(--accent, #c00);
  padding: 2.6rem 1.6rem 0;
}
[data-structure="guichet"] :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="guichet"] { --st-cols: 2; } }
@media (max-width: 620px) {
  [data-structure="guichet"] { --st-cols: 1; }
  [data-structure="guichet"] :is([data-st="filterpanel"],[data-st="filters"]) { margin-bottom: -3.6rem; }
  [data-structure="guichet"] [data-st="navtel"] { font-size: .7rem; padding: 0 .9rem; }
  [data-structure="guichet"] [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="guichet"] :is([data-st="nav"],nav#nav,nav),
[data-structure="guichet"] :is([data-st="nav"],nav#nav,nav) a:not([data-st="navtel"]),
[data-structure="guichet"] [data-st="navlogo"],
[data-structure="guichet"] [data-st="navlinks"] a:not([data-st="navcta"]) { color: #12243f !important; }
[data-structure="guichet"] [data-st="navlogo"] span { color: var(--accent, #c00) !important; }
[data-structure="guichet"] [data-st="navcta"] { color: #fff !important; background: var(--accent-strong, var(--accent, #c00)) !important; }
[data-structure="guichet"] :is([data-st="nav"],nav#nav,nav) [data-st="navtel"],
[data-structure="guichet"] :is([data-st="nav"],nav#nav,nav) [data-st="navtel"] * { color: #fff !important; }

/* ── Lisibilité du bouton de la barre (2026-09-25) ─────────────────────────────
   Ce bouton est, selon le template, un bouton plein, un lien texte ou une icône
   seule sur fond blanc (boutique). Les règles plus haut ne posaient que la couleur
   du texte (blanc) : sur un bouton sans fond, il devenait blanc sur blanc. Il porte
   donc TOUJOURS un fond à l'accent lisible du client, avec texte et icône blancs.
   :is(#a#b, …) : deux identifiants de spécificité (sans rien cibler de plus), pour passer
   devant les règles « nav#nav » plus haut et celles des templates, même !important. */
[data-structure="guichet"] [data-st="navcta"]:is(#bn-cta#bn-lisible, [data-st="navcta"]) {
  background: var(--accent-strong, var(--accent, #c8102e)) !important;
  color: #fff !important;
  border-color: transparent !important;
}
[data-structure="guichet"] [data-st="navcta"]:is(#bn-cta#bn-lisible, [data-st="navcta"]) :is(svg, span, i) { color: #fff !important; }
[data-structure="guichet"] [data-st="navcta"]:is(#bn-cta#bn-lisible, [data-st="navcta"]):hover { filter: brightness(1.08); }

/* ── Nom du site à côté du logo (2026-09-26) ─────────────────────────────────
   La règle « navlogo span » ci-dessus colore tout span du logo : le bloc du nom
   garde l'encre sombre, seul son dernier mot prend la couleur du site. */
[data-structure="guichet"] [data-st="navlogo"] span.nav-name { color: var(--dark) !important; }
[data-structure="guichet"] [data-st="navlogo"] span.nav-name b i { color: var(--accent-strong, var(--accent)) !important; }