/* =========================================================
   CVHUY.BE — CLINIQUE VÉTÉRINAIRE BEN-AHIN
   Template enfant Cassiopeia
   user.css propre
   PARTIE 1/2
   ========================================================= */


/* =========================================================
   IDENTITÉ GRAPHIQUE
   ========================================================= */

:root {
  --cv-blue: #08739f;
  --cv-blue-dark: #123e5a;
  --cv-green: #3f9f50;
  --cv-green-dark: #318440;

  --cv-text: #22313b;
  --cv-light: #f5f8fa;
  --cv-white: #ffffff;

  --cv-border: #dce5ea;
  --cv-radius: 8px;
  --cv-shadow: 0 10px 30px rgba(18,62,90,0.12);
}


/* =========================================================
   BASE
   ========================================================= */

html {
  scroll-behavior: smooth;
}

body {
  color: var(--cv-text);
  background: var(--cv-white);

  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    Helvetica,
    Arial,
    sans-serif;

  line-height: 1.6;
}


h1,
h2,
h3,
h4 {
  color: var(--cv-blue-dark);
  font-weight: 700;
  line-height: 1.15;
}


a {
  color: var(--cv-blue);
}


img {
  max-width:100%;
  height:auto;
}


/* Suppression espaces inutiles accueil */

.home-page .com-content-article,
.home-page .com-content-article__body {
  margin:0;
  padding:0;
}


/* =========================================================
   BOUTONS
   ========================================================= */

.cv-button {

  display:inline-flex;
  align-items:center;
  justify-content:center;

  min-height:52px;

  padding:13px 25px;

  border-radius:var(--cv-radius);
  border:2px solid transparent;

  font-size:1rem;
  font-weight:700;

  line-height:1.2;

  text-decoration:none;

  transition:
    transform .2s ease,
    background-color .2s ease;
}


.cv-button:hover,
.cv-button:focus {

  transform:translateY(-2px);
  text-decoration:none;
}


.cv-button-primary {

  color:white;
  background:var(--cv-green);
}


.cv-button-primary:hover {

  color:white;
  background:var(--cv-green-dark);
}


.cv-button-secondary {

  color:white;
  background:transparent;
  border-color:white;
}


.cv-button-blue {

  color:white;
  background:var(--cv-blue);
}


/* =========================================================
   HERO
   ========================================================= */

.cv-hero {

  position:relative;

  left:50%;

  width:100vw;

  margin-left:-50vw;

  min-height:620px;

  display:flex;

  align-items:center;

  overflow:hidden;

  color:white;


  background-image:
    linear-gradient(
      90deg,
      rgba(5,25,37,.35),
      rgba(5,25,37,.02)
    ),
    url("/images/clinique/facade-clinique.jpg");


  background-position:center;
  background-size:cover;
}


.cv-hero-inner {

  width:min(1180px, calc(100% - 40px));

  margin:auto;

  padding:80px 0;
}


.cv-hero-content {

  max-width:630px;
}


.cv-hero h1 {

  margin:0 0 24px;

  color:white;

  font-size:clamp(2.8rem,6vw,5rem);

  letter-spacing:-.035em;
}


.cv-hero-slogan {

  margin-bottom:32px;

  font-size:clamp(1.2rem,2.3vw,1.75rem);

  line-height:1.45;
}


.cv-hero-actions {

  display:flex;

  flex-wrap:wrap;

  gap:14px;
}


.cv-hero-emergency {

  margin-top:28px;

  font-weight:700;
}


/* =========================================================
   SECTIONS
   ========================================================= */

.cv-section {

  padding:76px 20px;
}


.cv-section-light {

  background:var(--cv-light);
}


.cv-container {

  width:min(1180px,100%);

  margin:auto;
}


.cv-eyebrow {

  margin-bottom:8px;

  color:var(--cv-green);

  font-size:.86rem;

  font-weight:800;

  letter-spacing:.09em;

  text-transform:uppercase;
}


.cv-section-title {

  margin-bottom:25px;

  font-size:clamp(2rem,4vw,3rem);
}


/* =========================================================
   IMAGE + TEXTE
   ========================================================= */

.cv-intro {

  display:grid;

  grid-template-columns:
    minmax(0,1fr)
    minmax(0,1.35fr);

}


.cv-intro-image img {

  width:100%;
  height:100%;

  min-height:440px;

  object-fit:cover;
}


.cv-intro-text {

  display:flex;

  flex-direction:column;

  justify-content:center;

  padding:65px;

  background:white;
}


/* =========================================================
   CARTES
   ========================================================= */

.cv-cards {

  display:grid;

  grid-template-columns:
    repeat(4,minmax(0,1fr));

  gap:22px;
}


.cv-card {

  padding:30px 24px;

  background:white;

  border:1px solid var(--cv-border);

  border-radius:var(--cv-radius);

  box-shadow:
    0 5px 18px rgba(18,62,90,.05);

  text-align:center;
}


.cv-card img {

  width:100%;

  aspect-ratio:4/3;

  object-fit:cover;

  border-radius:6px;
}


.cv-card h3 {

  margin:15px 0 10px;

  font-size:1.3rem;
}


/* =========================================================
   RESPONSIVE CONTENU
   ========================================================= */

@media(max-width:960px){

  .cv-intro {

    grid-template-columns:1fr;

  }


  .cv-cards {

    grid-template-columns:
      repeat(2,minmax(0,1fr));

  }


  .cv-intro-text {

    padding:42px 28px;

  }

}


@media(max-width:600px){

  .cv-section {

    padding:55px 16px;

  }


  .cv-cards {

    grid-template-columns:1fr;

  }


  .cv-hero {

    min-height:620px;

  }


  .cv-hero-inner {

    width:calc(100% - 30px);

    padding:55px 0;

  }


  .cv-hero-actions {

    flex-direction:column;

  }


  .cv-button {

    width:100%;

  }

}
/* =========================================================
   HEADER — CASSIOPEIA
   PARTIE 2/2
   ========================================================= */


/* =========================================================
   STRUCTURE GENERALE HEADER
   ========================================================= */

.container-header {

  box-sizing:border-box;

  width:100%;

  background:white;

  border-bottom:1px solid #e5e5e5;

}


/* =========================================================
   VERSION DESKTOP
   ========================================================= */

@media(min-width:992px){


  .container-header {

    display:flex !important;

    align-items:center !important;

    height:105px !important;

    padding:
      0 max(24px, calc((100vw - 1200px)/2))
      !important;

    gap:20px !important;

  }


  .container-header .grid-child {

    display:flex !important;

    align-items:center !important;

    margin:0 !important;

    padding:0 !important;

  }


  /* Logo */

  .container-header .brand-logo,
  .container-header .navbar-brand {

    display:flex !important;

    align-items:center !important;

    flex:0 0 auto !important;

    margin:0 !important;

    padding:0 !important;

  }


  .container-header .brand-logo img,
  .container-header .navbar-brand img {

    display:block !important;

    height:120px !important;

    width:auto !important;

    max-width:350px !important;

    object-fit:contain !important;

  }



  /* Zone menu */

.container-header .container-nav {

    flex:1 1 auto !important;

    display:flex !important;

    justify-content:flex-end !important;

    align-items:center !important;

}


.container-header .navbar-toggler {

    display:none !important;

}



  /* Menu horizontal */

 .container-header .mod-menu {

    align-items:center !important;

    gap:18px !important;

    margin:0 !important;

    padding:0 !important;

}



.container-header .mod-menu > li {

    position:relative;

    margin:0 !important;
    padding:0 !important;

}



 .container-header .mod-menu > li > a {

    display:inline-flex;

    align-items:center;

    height:42px;

    padding:8px 4px;

    color:var(--cv-blue-dark) !important;

    font-weight:650;

    line-height:1.2;

    text-decoration:none;

    white-space:nowrap;

}


.container-header .mod-menu > li > button.mm-toggler {

    position:absolute;

    right:-18px;
    top:50%;

    transform:translateY(-50%);

    display:flex !important;

    align-items:center;
    justify-content:center;

    width:16px;
    height:16px;

    margin:0;
    padding:0;

    color:var(--cv-blue-dark);

    background:transparent;

    border:0;

}


  .container-header .mod-menu > li.active > a {

    color:var(--cv-blue) !important;

  }



  /* =====================================================
     SOUS-MENU NOS COMPETENCES
     ===================================================== */


  .container-header
  .metismenu-item.deeper.parent {

    position:relative;

  }


  .container-header
  .metismenu-item.deeper.parent
  > ul.mm-collapse {


    position:absolute !important;

    top:100%;

    left:0;

    z-index:2000;


    display:block !important;

    width:max-content;

    min-width:250px;


    height:auto !important;


    margin:0;

    padding:8px 0;


    overflow:visible !important;


    background:white;

    border:1px solid var(--cv-border);

    border-radius:var(--cv-radius);

    box-shadow:var(--cv-shadow);


    opacity:0;

    visibility:hidden;

    pointer-events:none;


    transform:translateY(8px);


    transition:
      opacity .18s ease,
      transform .18s ease,
      visibility .18s ease;

  }



  .container-header
.metismenu-item.deeper.parent:hover
> ul.mm-collapse,
.container-header
.metismenu-item.deeper.parent:focus-within
> ul.mm-collapse {


    opacity:1;

    visibility:visible;

    pointer-events:auto;

    transform:translateY(0);

  }



  .container-header
  .metismenu-item.deeper.parent
  > ul.mm-collapse a {


    display:block;

    padding:11px 18px;

    color:var(--cv-blue-dark) !important;

    font-weight:500;

    text-decoration:none;

    white-space:nowrap;

  }


  .container-header
  .metismenu-item.deeper.parent
  > ul.mm-collapse a:hover {


    background:var(--cv-light);

    color:var(--cv-blue) !important;

  }


}



/* =========================================================
   MOBILE — HEADER CASSIOPEIA
   ========================================================= */

@media(max-width:991px){

  .container-header .brand-logo img,
  .container-header .navbar-brand img {

    width:auto !important;

    height:78px !important;

    max-width:250px !important;

    object-fit:contain !important;

  }


  .container-header .navbar-toggler {

    color:var(--cv-blue-dark) !important;

    border-color:var(--cv-blue-dark) !important;

    background:white !important;

  }

  .container-header .navbar-collapse.show .mod-menu {

    color:var(--cv-blue-dark) !important;

  }


  .container-header .navbar-collapse.show .mod-menu a {

    color:var(--cv-blue-dark) !important;

  }

.container-header .navbar-collapse.show {

    padding:10px 20px !important;

}


.container-header .navbar-collapse.show .mod-menu li {

    margin-bottom:6px !important;

}
  
}
/* Cartes équipements cliquables */
.cv-card {
  display: block;
  text-decoration: none;
  color: inherit;
}

.cv-card img {
  display: block;
  width: 100%;
}

/* Liens sur les sections image + texte */
.cv-intro {
  text-decoration: none;
  color: inherit;
}

.cv-intro:hover {
  text-decoration: none;
}

.cv-intro h2,
.cv-intro p,
.cv-intro .cv-eyebrow {
  color: inherit;
}

/* Section Laser thérapeutique cliquable */
a.cv-intro {
  text-decoration: none !important;
  color: inherit !important;
}

a.cv-intro:hover,
a.cv-intro:focus {
  text-decoration: none !important;
}

a.cv-intro h2,
a.cv-intro p,
a.cv-intro .cv-eyebrow {
  color: inherit !important;
}

/* =========================================================
   ACTUALITÉS
   ========================================================= */

/* Grille des actualités */
.cv-news {
    display:grid;
    grid-template-columns:repeat(2, minmax(0,1fr));
    gap:22px;
    max-width:100%;
    margin:0 auto;
}


/* Cartes actualités */
.cv-news .cv-card {
    width:100%;
    text-align:justify;
}


/* Titres des actualités */
.cv-news .cv-card h3 {
    text-align:center;
}


/* Texte des actualités */
.cv-news .cv-news-text {
    width:100%;
}


/* Images des actualités */
.cv-news-image {
    text-align:center;
    margin-bottom:25px;
}

.cv-news-image img {
    width:250px;
    height:auto;
    display:inline-block;
}


/* Boutons éventuels */
.cv-news .cv-button {
    display:flex;
    width:max-content;
    margin:25px auto 0;
}


/* Version mobile */
@media(max-width:900px){

    .cv-news {
        grid-template-columns:1fr;
    }

}

/* Images des actualités : conserver l'intégralité du visuel */
.cv-news-image img {
    width:250px;
    height:auto;
    object-fit:contain;
}

/* Page Conseils : afficher l’image entière sans la couper */
.cv-conseils-image img {
  height:auto;
  min-height:0;
  object-fit:contain;
}

/* Page Horaires : afficher entièrement le logo Urgences */
.cv-urgence-image {
  display:flex;
  align-items:center;
  justify-content:center;
  background:#ffffff;
}

.cv-urgence-image img {
  width:100%;
  max-width:460px;
  height:auto;
  min-height:0;
  object-fit:contain;
  display:block;
}

/* =========================================================
   CHOIX DE L'APPLICATION DE NAVIGATION
   ========================================================= */

.navigation-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 99999;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(0, 0, 0, 0.58);
}

.navigation-modal.is-open {
    display: flex;
}

.navigation-box {
    width: 100%;
    max-width: 380px;
    padding: 26px;
    background: #ffffff;
    border-radius: 18px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.28);
    animation: navigationPopup 0.22s ease-out;
}

.navigation-box h3 {
    margin: 0 0 22px;
    color: #06476b;
    font-size: 1.35rem;
    font-weight: 700;
    text-align: center;
}

.nav-choice {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    margin-bottom: 12px;
    padding: 15px 17px;
    color: #12384d;
    background: #f2f6f8;
    border: 1px solid #dce7ec;
    border-radius: 12px;
    font-size: 1.05rem;
    font-weight: 600;
    text-decoration: none;
    transition:
        background-color 0.18s ease,
        color 0.18s ease,
        transform 0.18s ease;
}

.nav-choice:hover,
.nav-choice:focus {
    color: #ffffff;
    background: #2f9e44;
    text-decoration: none;
    transform: translateY(-1px);
}

.nav-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    font-size: 1.25rem;
}

.nav-close {
    width: 100%;
    margin-top: 5px;
    padding: 14px;
    color: #17394b;
    background: #e7ecef;
    border: 0;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
}

.nav-close:hover,
.nav-close:focus {
    background: #d8e0e4;
}

body.navigation-modal-open {
    overflow: hidden;
}

@keyframes navigationPopup {
    from {
        opacity: 0;
        transform: translateY(12px) scale(0.96);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@media (max-width: 480px) {
    .navigation-box {
        padding: 22px 18px;
        border-radius: 16px;
    }

    .nav-choice {
        padding: 14px 15px;
    }
}
.navigation-modal[hidden],
.nav-choice[hidden] {
    display: none !important;
}

/* =========================================================
   BOUTONS DU BLOC CONTACT
   ========================================================= */

.cv-contact-actions {
  display:flex;
  flex-direction:column;
  gap:14px;
  width:100%;
  margin-top:24px;
}

.cv-contact-actions .cv-button {
  width:100%;
}

/* =========================================================
   BLOC RENDEZ-VOUS — PAGE HORAIRES
   ========================================================= */

/* Ordinateur et tablette */
.cv-rdv-block {
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}

.cv-rdv-block .cv-button {
  box-sizing:border-box;
  width:230px !important;
  max-width:100%;
  justify-content:center;
  text-align:center;
}

.cv-rdv-block .cv-rdv-separator {
  margin-top:16px;
  margin-bottom:12px;
}

/* Smartphone */
@media (max-width:600px) {

  .cv-rdv-block {
    align-items:stretch;
  }

  .cv-rdv-block .cv-button {
    width:100% !important;
  }

}