/* Correctifs J5 (migration 2026-10) : chargé après les CSS du template.
   !important nécessaire car chrome.css est injecté en JS à la fin du <head>. */

/* Titres de page : chrome.css mettait margin-bottom négatif => titre par-dessus le texte */
h1.component_heading, .view-article .page-header h1 { margin-bottom: 25px !important; }
.view-contact h1 { margin-bottom: 20px !important; }

/* Classe J5 absente du CSS Bootstrap 2 du template */
.visually-hidden {
  position: absolute !important; width: 1px !important; height: 1px !important;
  padding: 0 !important; margin: -1px !important; overflow: hidden !important;
  clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important;
}
/* reCAPTCHA v3 invisible : pas de ligne vide "Système Captcha" dans le formulaire */
.control-group:has(.plg-captcha-recaptcha-v3-hidden) { margin: 0; height: 0; overflow: hidden; }

/* Mobile : les 5 drapeaux passent sur leur propre ligne (ils recouvraient la flèche du menu) */
@media (max-width: 767px) {
  .langues { float: none !important; clear: both; display: block; width: 100% !important; top: 0 !important; margin: 10px 0 10px !important; text-align: center; }
}

/* OS Services Booking 11 : il génère une grille Bootstrap 5 (row / col-md-*) alors que le template
   est en Bootstrap 2 (.row à marge négative + flottants) => contenu décalé/coupé à gauche.
   Mini-grille BS5 limitée aux pages OSB (body.com_osservicesbooking), sans charger Bootstrap 5 sur tout le site. */
.com_osservicesbooking #component .row { display: flex; flex-wrap: wrap; margin-left: 0; margin-right: 0; }
.com_osservicesbooking #component .row::before, .com_osservicesbooking #component .row::after { content: none; display: none; }
.com_osservicesbooking #component [class*="col-md-"] { box-sizing: border-box; float: none; margin-left: 0; width: 100%; max-width: 100%; padding-left: 10px; padding-right: 10px; min-height: 1px; }
@media (min-width: 768px) {
  .com_osservicesbooking #component .col-md-1 { flex: 0 0 8.3333%; max-width: 8.3333%; }
  .com_osservicesbooking #component .col-md-2 { flex: 0 0 16.6667%; max-width: 16.6667%; }
  .com_osservicesbooking #component .col-md-3 { flex: 0 0 25.0000%; max-width: 25.0000%; }
  .com_osservicesbooking #component .col-md-4 { flex: 0 0 33.3333%; max-width: 33.3333%; }
  .com_osservicesbooking #component .col-md-5 { flex: 0 0 41.6667%; max-width: 41.6667%; }
  .com_osservicesbooking #component .col-md-6 { flex: 0 0 50.0000%; max-width: 50.0000%; }
  .com_osservicesbooking #component .col-md-7 { flex: 0 0 58.3333%; max-width: 58.3333%; }
  .com_osservicesbooking #component .col-md-8 { flex: 0 0 66.6667%; max-width: 66.6667%; }
  .com_osservicesbooking #component .col-md-9 { flex: 0 0 75.0000%; max-width: 75.0000%; }
  .com_osservicesbooking #component .col-md-10 { flex: 0 0 83.3333%; max-width: 83.3333%; }
  .com_osservicesbooking #component .col-md-11 { flex: 0 0 91.6667%; max-width: 91.6667%; }
  .com_osservicesbooking #component .col-md-12 { flex: 0 0 100.0000%; max-width: 100.0000%; }
}
.com_osservicesbooking #component .form-select, .com_osservicesbooking #component .form-control { box-sizing: border-box; max-width: 100%; height: auto; min-height: 34px; line-height: 1.4; padding-top: 6px; padding-bottom: 6px; }
.com_osservicesbooking #component img { max-width: 100%; height: auto; }
.com_osservicesbooking #component .d-flex { display: flex; }
.com_osservicesbooking #component .d-flex > .form-control { flex: 1 1 auto; width: auto; min-width: 0; }

/* Page de commande OSB : texte rassurant dans la section reCAPTCHA (cf. js/j5-osb.js) */
.raq-captcha-info { margin: 10px 0; padding: 10px 14px; font-size: 13px; line-height: 1.5; color: #2e6b3a; background: #f1f8f2; border: 1px dashed #b7d8bd; border-radius: 6px; }
.raq-captcha-info .fa-shield-halved { margin-right: 4px; }
.raq-captcha-info a { color: #2e6b3a; text-decoration: underline; }

/* Pages de réservation : agenda élargi (1/3 -> ~42 %), créneaux et formulaire ~58 % */
@media (min-width: 768px) {
  .com_osservicesbooking #component #calendardivleft.col-md-4 { flex: 0 0 42%; max-width: 42%; }
  /* toute colonne à droite de l'agenda (créneaux, formulaire de commande, récapitulatif) */
  .com_osservicesbooking #component #calendardivleft.col-md-4 ~ [class*="col-md-8"] { flex: 0 0 58%; max-width: 58%; }
}

/* Créneaux horaires : 2 colonnes au lieu de 3 (2 créneaux max par activité) => pastilles plus larges */
@media (min-width: 480px) {
  .com_osservicesbooking #component .timeslotdiv { grid-template-columns: repeat(2, 1fr); }
}
.com_osservicesbooking #component .divtimeslots { justify-content: center; }
.com_osservicesbooking #component .divtimeslots .timeslotlabel { white-space: nowrap; }

/* Mobile : colonnes OSB sans marges intérieures, pour que l'agenda tienne dans l'écran */
@media (max-width: 767px) {
  .com_osservicesbooking #component [class*="col-md-"] { padding-left: 0; padding-right: 0; }
  .com_osservicesbooking #component #calendardivleft { overflow: hidden; }
}

/* Slideshow mobile : titre et sous-titre positionnés dans la caméra via JS (scripts.js).
   CSS : tailles de police (inline => !important), padding maintop annulé, Info/Résa 1 ligne.
   Le positionnement vertical exact (top:) est calculé en JS après camera.js (window.load). */
@media (max-width: 767px) {
  #maintop-row { padding-top: 0 !important; }
  .view-featured h1 span { font-size: 18pt !important; }
  .view-featured h2.subtitle span { font-size: 18pt !important; }
  /* Info/Résa sur une ligne (inline font-size: 20pt trop large) */
  #header-row .mod-custom p span[style*="20pt"] { font-size: 13pt !important; white-space: nowrap; }
}