/*
 * LE BLOC « NOTRE BOUTIQUE À LILLE » — une seule définition pour trois pages.
 *
 * Accueil, Reprise et Contact le portent, tout en bas pour les deux dernières
 * (Rami, 29/09 : « mettre ensuite ce bloc dans les sections reprise et contact,
 * tout en bas à la place du bloc maps »). Il vivait dans accueil-maquette.css,
 * que seul l'accueil charge : copié tel quel ailleurs, il se serait affiché NU,
 * sans erreur ni test rouge — vécu avec l'en-tête le 23/09 et la FAQ le 24/09.
 * Chaque page qui porte le bloc charge CETTE feuille
 * (tests/bloc-boutique.test.mjs le vérifie).
 *
 * Le bloc est celui de l'app cliente (Rami, 29/09 : « le même bloc Notre
 * boutique que celui sur l'app mobile ») : trois tuiles d'itinéraire à la
 * place de « Voir sur la carte », et le bas compacté, sans « Nous contacter »
 * ni « Suivez-nous : ». Même rendu que hote/app-hote.css de l'app.
 *
 * Variables : css/socle.css, chargée par toutes les pages.
 */

/* La MÊME marge latérale que `.mq-section`, sinon le bloc boutique touche les
   bords de l'écran quand les cartes juste au-dessus s'arrêtent à 16 px.
   Mesuré à 390 px : bannière à 12, cartes à 16, boutique à 0 — trois bords
   différents sur la même page. */
.mq-boutique-fond { background: var(--fond); padding: 0 var(--e5) var(--e10); }
/* Hors de l'accueil, le bloc suit le contenu de la page au lieu d'une
   section de même fond : il lui faut son propre souffle au-dessus. */
.mq-boutique-fond--pied { padding-top: var(--e10); }
/* « Notre boutique » (bouton du haut de l'accueil) mène ici : le bloc arrive
   SOUS l'en-tête fixe, pas dessous (même marge que #avis-clients). */
#notre-boutique { scroll-margin-top: 90px; }

/* RÉTRÉCI (Rami, 26/09) : 940 px, colonne photo de 240 px. La photo est la
   devanture (portrait, 600 × 800), cadrée sur le tiers haut pour garder
   l'enseigne. */
.mq-boutique {
  /* Hauteur d'une tuile d'itinéraire (logo 40 + nom + marges = 84 px) : la
     rangée des réseaux prend la MÊME, pour que leurs centres s'alignent. */
  --mq-tuile-haut: 84px;
  max-width: 940px; margin: 0 auto;
  background: var(--bleu-nuit); color: var(--sur-accent);
  border-radius: var(--r-carte); overflow: hidden;
  display: grid; grid-template-columns: 240px 1fr 1fr;
}
/* Sur Contact, la colonne « Nous contacter » (déjà en haut de la page) laisse
   place à une petite CARTE Google de l'adresse (Rami, 29/09). La carte remplit
   toute la hauteur de sa colonne ; même trait de séparation que le contact. */
.mq-boutique-carte { min-height: 280px; border-left: 1px solid rgba(255, 255, 255, .12); background: #E5E3DF; }
.mq-boutique-carte iframe { display: block; width: 100%; height: 100%; min-height: inherit; border: 0; }
.mq-boutique-photo { min-height: 280px; }
.mq-boutique-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
.mq-boutique-infos, .mq-boutique-contact { padding: var(--e6) var(--e5); }
/* Le trait de séparation est CLAIR à 12 % : sur le bleu nuit, un trait gris
   disparaît, et un trait blanc plein coupe le bloc en deux. */
.mq-boutique-contact { border-left: 1px solid rgba(255, 255, 255, .12); }
.mq-boutique h2 { margin: 0 0 var(--e4); color: var(--sur-accent); font-size: var(--t-titre); font-weight: 800; letter-spacing: -.02em; }
/* Chaque icône CENTRÉE sur son texte (comme dans l'app) : calée en haut, elle
   tombait trop haut, nettement pour l'e-mail, dont le lien fait 44 px. */
.mq-boutique-ligne { display: flex; align-items: center; gap: var(--e3); margin-bottom: var(--e4); }
.mq-boutique-ligne .ic { flex: none; font-size: 20px; }
.mq-boutique-ligne div { font-size: var(--t-base); line-height: 1.5; }
.mq-boutique-ligne .mq-faible { color: rgba(255, 255, 255, .72); }
/* Le téléphone et l'e-mail sont ce qu'on TOUCHE pour appeler ou écrire :
   ils ne peuvent pas faire 20 px de haut. */
.mq-boutique-ligne a {
  display: inline-flex; align-items: center; min-height: var(--cible);
  color: inherit; text-decoration: none; overflow-wrap: anywhere;
}
.mq-boutique-ligne a:hover { text-decoration: underline; }

/* Le bas, COMPACTÉ : le numéro et l'e-mail seuls face à leur icône, alignés
   à gauche comme l'adresse et les horaires ; les liens gardent leurs 44 px,
   ce sont eux qui espacent. Les réseaux sont centrés. */
.mq-boutique-contact .mq-boutique-ligne { justify-content: flex-start; margin-bottom: 0; }
.mq-boutique-contact .mq-boutique-ligne > div { display: flex; align-items: center; min-width: 0; }
.mq-reseaux { display: flex; justify-content: center; gap: var(--e3); margin-top: var(--e4); }
.mq-reseaux a {
  width: var(--cible); height: var(--cible);
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--r-rond); background: rgba(255, 255, 255, .10); color: var(--sur-accent);
}
.mq-reseaux a:hover { background: rgba(255, 255, 255, .20); }
.mq-reseaux .ic { font-size: 20px; }

/* Les applications d'itinéraire, à la place de « Voir sur la carte » :
   Plans (iPhone et iPad seulement, révélée par js/itineraire.js), Waze,
   Google Maps — l'ordre de Rami. En flex et non en grille : la tuile Plans
   masquée ne laisse pas de case vide. */
.mq-itineraires { display: flex; gap: 10px; margin-top: var(--e4); max-width: 360px; }
.mq-itineraire {
  flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  min-height: var(--mq-tuile-haut); padding: 10px 4px;
  border: 1px solid rgba(255, 255, 255, .2); border-radius: 14px;
  background: rgba(255, 255, 255, .08); color: var(--sur-accent);
  font-size: 13px; font-weight: 700; line-height: 1.2; text-align: center; text-decoration: none;
}
.mq-itineraire[hidden] { display: none; }
.mq-itineraire:hover, .mq-itineraire:active { background: rgba(255, 255, 255, .18); }
.mq-itineraire:focus-visible { outline: 2px solid var(--sur-accent); outline-offset: 2px; }
/* Le logo remplit la pastille ; overflow:hidden rogne les coins blancs des
   icônes Plans et Waze. */
.mq-itineraire-picto {
  width: 40px; height: 40px; flex: none;
  display: flex; align-items: center; justify-content: center;
  border-radius: 11px; background: #FFFFFF; overflow: hidden;
}
.mq-itineraire-picto img { width: 100%; height: 100%; display: block; object-fit: cover; }
.mq-itineraire-nom { max-width: 100%; white-space: nowrap; }

/* EN TROIS COLONNES, LIGNE À LIGNE (Rami, 29/09, deux captures à l'appui) :
   « le numéro de téléphone sur la même ligne que l'adresse, le mail sur la
   même ligne que les horaires ; comme pour le titre Notre boutique à Lille,
   à droite mettre un titre Nous contacter », et plus tôt « les boutons réseaux
   sociaux au même niveau que les boutons Waze et Maps ».
   Les deux colonnes partagent QUATRE rangées (subgrid) :
     titre ↔ « Nous contacter » · adresse ↔ téléphone · horaires ↔ e-mail ·
     tuiles ↔ réseaux.
   Une rangée prend la hauteur du plus grand des deux ; chaque ligne s'y
   CENTRE, donc chaque icône tombe en face de sa voisine. Les tuiles et les
   réseaux se calent en BAS de la dernière rangée, dans une même hauteur
   (--mq-tuile-haut) : leurs centres s'alignent.
   Navigateur sans subgrid : les deux colonnes s'empilent simplement, lisibles.
   Au téléphone (≤ 680 px), le contact passe sous l'itinéraire (plus bas). */
@media (min-width: 681px) {
  .mq-boutique { grid-template-rows: auto auto auto 1fr; }
  .mq-boutique-photo { grid-row: 1 / -1; }
  .mq-boutique-infos, .mq-boutique-contact { grid-row: 1 / -1; display: grid; grid-template-rows: subgrid; }
  .mq-boutique-carte { grid-row: 1 / -1; }
  .mq-boutique-infos > .mq-boutique-ligne,
  .mq-boutique-contact > .mq-boutique-ligne { align-self: center; margin-bottom: var(--e4); }
  .mq-boutique-infos > .mq-itineraires { align-self: end; margin-top: 0; }
  .mq-boutique-contact > .mq-reseaux {
    align-self: end;
    height: var(--mq-tuile-haut); margin: 0; align-items: center;
  }
}

/* Le bloc garde ses TROIS colonnes jusqu'au téléphone (680 px) : la photo
   s'amincit, rien ne passe dessous (mesuré à 768 px, une photo en bande
   au-dessus coupait l'enseigne et allongeait le bloc). */
@media (max-width: 860px) {
  .mq-boutique { grid-template-columns: 180px 1fr 1fr; }
}
@media (max-width: 680px) {
  .mq-boutique { grid-template-columns: 1fr; }
  .mq-boutique-carte { min-height: 0; height: 220px; border-left: none; border-top: 1px solid rgba(255, 255, 255, .12); }
  .mq-boutique-photo { min-height: 0; height: 240px; }
  .mq-boutique-contact { border-left: none; border-top: 1px solid rgba(255, 255, 255, .12); padding-top: var(--e3); padding-bottom: var(--e5); }
  .mq-boutique-fond { padding: 0 var(--e4) var(--e8); }
  .mq-boutique-fond--pied { padding-top: var(--e8); }
  /* Au téléphone, comme dans l'app : pas de titre « Nous contacter » à
     l'écran (le bloc est une seule colonne, le titre du haut suffit). Il
     reste lu par VoiceOver, qui annonce ainsi le numéro et l'e-mail. */
  .mq-boutique-titre-contact {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
}