/* =========================================================================
   MAQUETTE_3_2019 — feuille de style modernisée (mobile-first)
   Remplace l'ancienne version (menu plein écran à décalage px fixe, hero
   bloqué à 100vh, triangles décoratifs en bordures vh, marges négatives
   calées à la main) par un système responsive réel : aucune règle ici ne
   dépend d'une largeur de viewport précise pour rester lisible.
   Les noms de classes existants sont conservés autant que possible pour ne
   pas casser les templates .tpl qui les utilisent déjà.
   ========================================================================= */

:root {
  --c3-navy: #2f3138;
  --c3-gold: #BB9955;
  --c3-amber: #f6a22e;
  --c3-terracotta: #c94e50;
  --c3-ink: #212121;
  --c3-body: #6b665a;
  --c3-surface: #f4f2ee;
  --c3-surface-alt: #e9ecef;
  --c3-border: #e3ddd3;
  --c3-white: #fff;
  --c3-radius: 16px;
  --c3-radius-sm: 10px;
  --c3-shadow: 0 10px 30px rgba(33, 33, 33, 0.10);
  --c3-shadow-lg: 0 20px 50px rgba(33, 33, 33, 0.16);
  --c3-container: 1200px;
}

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

html { scroll-behavior: smooth; }

body {
  font-family: 'Manrope', Arial, sans-serif;
  font-weight: 400;
  color: var(--c3-body);
  overflow-x: hidden;
  background: var(--c3-white);
}

body #cdawrap {
  top: auto;
  bottom: 16px;
  right: 16px;
  border: 1px solid rgba(131, 135, 151, 0.6);
}

h1, h2, h3, h4, .titre-hover-page, .titre-actu-service, .titre-mission,
.titre-horaires, .background-prix, .slogan {
  font-family: 'Archivo', Arial, sans-serif;
}

img { max-width: 100%; }

a { color: var(--c3-navy); }
a:hover { color: var(--c3-gold); }

/* =========================================================================
   NAVBAR — remplace le menu plein écran à décalage 320px fixe (qui cassait
   au-delà de 6 liens et ne s'adaptait à aucune largeur d'écran) par une
   barre de navigation classique, repliable, qui fonctionne à toutes les
   tailles d'écran.
   ========================================================================= */
.site-navbar {
  background: var(--c3-white);
  box-shadow: 0 2px 12px rgba(33, 33, 33, 0.08);
  position: sticky;
  top: 0;
  z-index: 1030;
  padding: 0.65rem 0;
}
.site-navbar .navbar-brand {
  font-family: 'Archivo', Arial, sans-serif;
  font-weight: 800;
  color: var(--c3-navy);
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.site-navbar .navbar-brand img { height: 40px; width: auto; }
.site-navbar .navbar-nav .nav-link {
  color: var(--c3-navy);
  font-weight: 600;
  padding: 0.6rem 0.9rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.site-navbar .navbar-nav .nav-link:hover,
.site-navbar .navbar-nav .nav-link.active { color: var(--c3-gold); }
.site-navbar .navbar-nav .nav-link i { font-size: 1rem; color: var(--c3-gold); }
.site-navbar .btn-nav-rdv {
  background: var(--c3-gold);
  color: var(--c3-white) !important;
  border-radius: 999px;
  padding: 0.6rem 1.4rem !important;
  font-weight: 700;
  margin-left: 0.5rem;
}
.site-navbar .btn-nav-rdv i { color: var(--c3-white) !important; }
.site-navbar .btn-nav-rdv:hover { background: var(--c3-navy); }
.site-navbar .navbar-toggler {
  border: 1px solid var(--c3-border);
  border-radius: var(--c3-radius-sm);
  padding: 0.45rem 0.65rem;
}
.site-navbar .navbar-toggler:focus { box-shadow: none; outline: none; }
.site-navbar .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(47, 49, 56, 0.85)' stroke-width='2.5' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
@media (max-width: 991.98px) {
  .site-navbar .navbar-collapse {
    margin-top: 0.75rem;
    border-top: 1px solid var(--c3-border);
    padding-top: 0.5rem;
  }
  .site-navbar .btn-nav-rdv { margin: 0.5rem 0 0; display: inline-block; }
}

/* =========================================================================
   HERO (page d'accueil) — remplace le système "trigger + scroll-hijack"
   (100vh forcé, scroll désactivé en JS, image de fond dupliquée deux fois
   dans le markup) par un hero classique en flux normal : il se redimensionne
   avec le contenu au lieu de forcer la hauteur exacte de l'écran, ce qui est
   la première cause des soucis d'affichage mobile (barre d'adresse iOS qui
   change la hauteur réelle du viewport, contenu coupé, scroll bloqué).
   ========================================================================= */
.header {
  position: relative;
  width: 100%;
  min-height: clamp(420px, 62vw, 640px);
  background-size: cover;
  background-position: center;
  background-color: var(--c3-navy);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.header::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(33,33,33,0.55) 0%, rgba(47,49,56,0.75) 100%);
  z-index: 1;
}
.header .bg-img { position: absolute; inset: 0; overflow: hidden; }
.header .bg-img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.title {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  padding: 2.5rem 1.25rem;
  text-align: center;
}
.title h1 {
  color: var(--c3-white);
  font-weight: 800;
  font-size: clamp(1.9rem, 4.5vw, 3rem);
  line-height: 1.15;
  margin: 0 0 0.75rem;
}
.title .title-info {
  color: var(--c3-white);
  font-weight: 600;
  font-size: clamp(1rem, 2.2vw, 1.35rem);
  opacity: 0.92;
}
.title .telephone { margin-top: 1rem; }
.title .telephone a.telephone {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--c3-white);
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.4);
  border-radius: 999px;
  padding: 0.55rem 1.4rem;
  font-size: clamp(1.1rem, 2.4vw, 1.5rem) !important;
}
.title .telephone a.telephone:hover { background: var(--c3-gold); border-color: var(--c3-gold); }
span.decor { display: none; } /* décor à lignes fixes -95px/80px : illisible en dessous de ~700px, supprimé */

/* =========================================================================
   BANDEAU "PRENEZ RENDEZ-VOUS EN LIGNE"
   ========================================================================= */
.bar-header {
  padding: 1.1rem 1rem;
  background: var(--c3-gold);
  color: var(--c3-white);
  font-size: clamp(1.05rem, 2.2vw, 1.6rem);
  font-family: 'Archivo', Arial, sans-serif;
  text-align: center;
  position: relative;
  z-index: 3;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.75rem 1.25rem;
}
.bar-info { padding: 1rem; background: var(--c3-gold); color: var(--c3-white); }
div.bar-header span a button,
div.bar-header span a { color: var(--c3-white); }
div.bar-header span a button:hover { color: var(--c3-navy); }

/* Décoration "flèche" : même esprit que la version d'origine (un triangle
   plein en CSS), mais en taille fixe raisonnable au lieu de bordures en vh
   (qui pouvaient atteindre plus d'un écran de large et provoquaient un
   scroll horizontal sur mobile). Toujours centrée, ne dépend d'aucune
   largeur de viewport. */
.triangle, .triangle-footer {
  display: block;
  height: 0;
  width: 0;
  margin: 0 auto;
  border-left: 26px solid transparent;
  border-right: 26px solid transparent;
}
.triangle { border-top: 22px solid var(--c3-gold); }
.triangle-footer { border-bottom: 22px solid var(--c3-gold); margin-top: 2rem; margin-bottom: 0 !important; }

/* =========================================================================
   SECTION ACCUEIL / OBJECTIF (tarifs express)
   ========================================================================= */
section.accueil { padding: 3rem 0; }
section.accueil h3.titre-centre {
  font-weight: 800;
  color: var(--c3-navy);
  text-align: center;
  font-size: clamp(1.5rem, 3vw, 2.1rem);
}

section.objectif { background: var(--c3-surface-alt); padding: 3rem 0; }
.horaires { text-align: center; }
.titre-horaires {
  font-family: 'Archivo', Arial, sans-serif;
  font-weight: 800;
  color: var(--c3-navy);
  font-size: clamp(1.3rem, 2.6vw, 1.8rem);
  position: relative;
  padding-bottom: 0.75rem;
  width: 100%;
}
.titre-horaires:after {
  content: "";
  display: block;
  width: 100px;
  height: 4px;
  background-color: var(--c3-gold);
  margin: 0.75rem auto 0;
}
.btn-objectif-reserver {
  position: relative;
  display: inline-block;
  border: 2px solid var(--c3-gold);
  font: inherit;
  padding: 0.7rem 2.2rem;
  text-transform: uppercase;
  color: var(--c3-gold);
  background: transparent;
  cursor: pointer;
  font-size: clamp(0.85rem, 1.6vw, 1.05rem);
  font-weight: 700;
  border-radius: var(--c3-radius-sm);
  transition: all 220ms ease;
  text-decoration: none;
  letter-spacing: 0.03em;
  box-shadow: var(--c3-shadow);
}
.btn-objectif-reserver:hover {
  color: var(--c3-white);
  background: var(--c3-gold);
  text-decoration: none;
}
.slogan {
  color: var(--c3-gold);
  font-style: italic;
  text-align: center;
  font-size: clamp(1.2rem, 2.6vw, 1.7rem);
  margin: 2rem 0;
}

/* Carte "tarif express" (accueil) — image + libellé + prix + bouton dans un
   même cadre, pour un rendu cohérent avec le bandeau top-info juste après. */
.tarif-card {
  background: var(--c3-white);
  border: 1px solid var(--c3-border);
  border-radius: var(--c3-radius);
  box-shadow: var(--c3-shadow);
  padding: 1.1rem;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.img-objectif {
  width: 100%;
  height: clamp(160px, 22vw, 240px);
  max-width: 100%;
  object-fit: cover;
  border-radius: var(--c3-radius-sm);
}
.name {
  font-style: normal;
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--c3-ink);
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.background-prix {
  background: var(--c3-navy);
  color: var(--c3-white);
  padding: 0.5rem 0.75rem;
  border-radius: 999px;
  text-align: center;
  font-weight: 700;
  white-space: nowrap;
}
.border-left-reserver { display: none; } /* remplacé par le gap flex de .name */
.fa-check-square { color: var(--c3-gold); }
.tarif-card .row.align-items-center { flex-wrap: nowrap; gap: 0.5rem; }
.tarif-card .btn-objectif-reserver { width: 100%; margin-top: auto; }

/* =========================================================================
   BANDEAU TOP-INFO / TÉMOIGNAGE — même langage visuel que .tarif-card
   ========================================================================= */
section.top-info {
  background: var(--c3-white);
  border: 1px solid var(--c3-border);
  border-radius: var(--c3-radius);
  box-shadow: var(--c3-shadow);
  margin-top: 2rem !important;
  margin-bottom: 2rem;
  padding: 1.5rem !important;
}
section.top-info .bar-info {
  background: transparent;
  color: var(--c3-ink);
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0;
  margin: 0;
  flex-wrap: nowrap;
}
.top-info-icon {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--c3-surface-alt);
  color: var(--c3-gold);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
}
section.top-info span, section.top-info p { font-size: clamp(0.95rem, 1.6vw, 1.15rem); margin: 0; }

/* =========================================================================
   ACTUALITÉS / MISSION / SERVICES — rangées image + texte en alternance
   ========================================================================= */
.fond-img-actu-mission-services {
  width: 100%;
  height: clamp(220px, 30vw, 340px);
  border-radius: var(--c3-radius);
  overflow: hidden;
  box-shadow: var(--c3-shadow);
  background-color: var(--c3-gold);
}
.fond-img-actu-mission-services .img-actu-mission-services {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}
.fond-img-actu-mission-services .img-actu-mission-services img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.fond-img-actu-mission-services .img-actu-mission-services:hover img { transform: scale(1.06); }

.titre-actu-service, .titre-mission {
  color: var(--c3-navy);
  font-weight: 800;
  font-size: clamp(1.4rem, 2.8vw, 2rem);
  position: relative;
  padding-bottom: 0.75rem;
}
.titre-actu-service:after, .titre-mission:after {
  content: "";
  display: block;
  width: 90px;
  height: 3px;
  background-color: var(--c3-gold);
  margin-top: 0.5rem;
}
section.mission .titre-mission:after,
.texte-mission-responsive { margin-left: auto; }
section.actualites, section.services, section.mission { padding: 3rem 0; text-align: left; }
@media (min-width: 992px) {
  section.mission { text-align: right; }
  section.mission .titre-mission:after { margin-left: auto; margin-right: 0; }
}
.text-admin-horaire {
  background-color: var(--c3-navy);
  color: var(--c3-white);
  border-radius: var(--c3-radius-sm);
  padding: 1rem 1.25rem;
}

/* =========================================================================
   MODAL HORAIRES
   ========================================================================= */
.modal-content { border: 2px solid var(--c3-gold); border-radius: var(--c3-radius); }
.modal-header { border-bottom: none !important; }
.modal-body { padding: 0 1.25rem 1rem !important; }
.modal-footer { border-top: none !important; justify-content: center !important; }

/* =========================================================================
   BOUTONS GÉNÉRIQUES
   ========================================================================= */
.btn {
  font-size: 1rem;
  background: none;
  cursor: pointer;
  padding: 0.6rem 1.4rem;
  display: inline-block;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-weight: 700;
  border-radius: 999px;
  border: 2px solid var(--c3-white);
  transition: all 0.25s ease;
}
.btn-losange { overflow: hidden; }
.btn-losange:hover { background: var(--c3-white); color: var(--c3-navy) !important; }

/* =========================================================================
   CAROUSEL (pages secondaires) — hauteur fluide au lieu de vh fixes, plus
   de légende positionnée en px absolu qui se décale selon la hauteur réelle.
   ========================================================================= */
div.carousel-item { position: relative; }
div.carousel-item img {
  height: clamp(240px, 42vw, 460px);
  width: 100%;
  object-fit: cover;
}
#carouselExampleCaptions::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(187, 153, 85, 0.25);
  pointer-events: none;
}
.carousel-caption {
  position: absolute;
  left: 5%;
  right: 5%;
  bottom: clamp(1rem, 6%, 3rem);
}
div#carouselExampleCaptions h2 {
  color: var(--c3-white);
  font-family: 'Archivo', Arial, sans-serif;
  font-size: clamp(1.4rem, 3vw, 2.2rem);
  font-weight: 700;
}
div#carouselExampleCaptions p { color: var(--c3-white); font-size: clamp(1rem, 1.8vw, 1.3rem); font-weight: 600; }
.carousel-control-next-icon, .carousel-control-prev-icon, .carousel-indicators li { display: none !important; }

/* =========================================================================
   TITRES DE PAGE GÉNÉRIQUES
   ========================================================================= */
.titre-hover-page {
  font-size: clamp(1.6rem, 3.4vw, 2.4rem);
  font-weight: 800;
  color: var(--c3-navy);
  text-align: center;
}
.titre-hover-page:after {
  content: "";
  display: block;
  width: 110px;
  height: 4px;
  background-color: var(--c3-gold);
  margin: 1rem auto;
}
section.tarif span::after { display: none; }

/* Liste de tarifs — remplace l'ancien bloc à 2 colonnes avec bordures en L
   (border-prix / border-prix-2) par une liste de lignes cohérente, alignée
   à gauche (libellé) et à droite (prix), qui s'empile proprement sur mobile
   au lieu de dépendre d'une disposition en 2 colonnes fixes. */
.tarif-list__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--c3-border);
  font-weight: 600;
  color: var(--c3-ink);
}
.tarif-list__item:last-child { border-bottom: none; }
.tarif-list__item i { color: var(--c3-gold); margin-right: 0.75rem; width: 1.1em; text-align: center; }
.tarif-list__price {
  background: var(--c3-navy);
  color: var(--c3-white);
  font-weight: 700;
  padding: 0.35rem 0.9rem;
  border-radius: 999px;
  white-space: nowrap;
}

/* =========================================================================
   PAGE "VOS CONTRÔLES" — remplace l'ancien formulaire en tableau HTML
   (balises MAJUSCULES, tailles en px fixes, aucune classe Bootstrap) par un
   formulaire moderne et responsive, sans toucher aux champs/à l'action
   envoyés à Certicik.
   ========================================================================= */
.rapports-controle__intro {
  color: var(--c3-body);
  max-width: 560px;
  margin: 0 auto 2rem;
}
.rapports-controle__form {
  background: var(--c3-white);
  border: 1px solid var(--c3-border);
  border-radius: var(--c3-radius);
  box-shadow: var(--c3-shadow);
  padding: clamp(1.5rem, 4vw, 2.5rem);
}
.rapports-controle__form .form-group { margin-bottom: 1.25rem; }
.rapports-controle__form label {
  display: block;
  font-weight: 600;
  color: var(--c3-ink);
  margin-bottom: 0.4rem;
}
.rapports-controle__form input[type="text"] {
  width: 100%;
  padding: 0.7rem 1rem;
  border: 1px solid var(--c3-border);
  border-radius: var(--c3-radius-sm);
  font-size: 1rem;
  background: var(--c3-surface);
  transition: border-color 0.2s ease;
}
.rapports-controle__form input[type="text"]:focus {
  outline: none;
  border-color: var(--c3-gold);
  background: var(--c3-white);
}

/* =========================================================================
   BOUTON "REMONTER EN HAUT"
   ========================================================================= */
.back-to-top {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 1040;
  width: 46px;
  height: 46px;
  border: none;
  border-radius: 50%;
  background: var(--c3-gold);
  color: var(--c3-white);
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--c3-shadow);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 0.25s ease, transform 0.25s ease, background-color 0.2s ease;
}
.back-to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.back-to-top:hover { background: var(--c3-navy); color: var(--c3-white); }
.back-to-top:focus { outline: none; box-shadow: 0 0 0 3px rgba(187, 153, 85, 0.4); }

/* =========================================================================
   FOOTER
   ========================================================================= */
.footer, section.footer {
  background-color: var(--c3-navy);
  color: var(--c3-white);
  text-align: left;
}
section.footer { padding: 3rem 0 2rem; }
section.footer div p { margin: 0.3rem 0 !important; font-size: 0.9rem !important; }
section.footer a { font-size: 0.85rem; font-weight: 600; color: var(--c3-white); }
section.footer a:hover { color: var(--c3-gold); }
.margin-btn-accueil, .logo-nav { display: inline-block; margin-top: 0.75rem; }
.btn_fb {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  border-radius: 999px;
  background: #3b5998;
  padding: 0.5rem 1.1rem 0.5rem 0.9rem;
  margin-top: 1rem;
  color: var(--c3-white) !important;
  width: auto;
  height: auto;
}
.btn_fb:before { display: none; }
.btn_fb i { font-size: 1.1rem; }
.btn_fb:hover { text-decoration: none !important; opacity: 0.9; }
.logo-cb { margin-left: 0; }
.contact-footer { margin-top: 1rem !important; font-size: 0.9rem !important; }

@media (max-width: 767.98px) {
  section.footer .col-2, section.footer .col-3, section.footer .col-4 {
    flex: 0 0 100%;
    max-width: 100%;
    margin-bottom: 1.75rem;
    text-align: center;
  }
  section.footer .col-2 { margin-bottom: 1.25rem; }
}

/* =========================================================================
   UTILITAIRES RESPONSIVE GÉNÉRAUX
   ========================================================================= */
@media (max-width: 991.98px) {
  section.accueil, section.objectif, section.actualites, section.mission, section.services { padding: 2.25rem 0; }
  .fond-img-actu-mission-services { margin-bottom: 1.5rem; }
}

@media (max-width: 575.98px) {
  .background-prix { margin-top: 0.5rem; }
}

.cc-deny { display: none; }