body {
    margin: 0;
    font-family: "Mukta", sans-serif;

    /* Taille de base portée de 16 à 18px, comme les 86 déclarations explicites de
       cette feuille. Sans elle, tout ce qui n'a pas de taille propre resterait à
       la valeur héritée de Bootstrap et le relèvement serait partiel.

       C'est body et non html : html changerait aussi toutes les valeurs en rem de
       Bootstrap — marges, gouttières, largeurs de conteneur — soit bien plus
       qu'une question de police. */
    font-size: 18px;
}

.overflow-hidden{
    overflow: hidden;
}
.overflow-visble {
    overflow: visible !important;
}

.m-b20{
    margin-bottom: 20px;
}
.m-b30 {
    margin-bottom: 20px;
}
.m-b40 {
    margin-bottom: 20px;
}
/* header */
.bg-body-tertiary{
    background-color: #fff !important;
}
.container {
    padding: 0 85px;
}
.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2px 30px;
    background-color: #fff;
    border-bottom: 1px solid #ddd;
}

.logo-section {
    display: flex;
    align-items: center;
}


.logo {
	/* Le logo mesurait 28px de haut puis subissait un transform: scale(1.5), soit
	   42px à l'écran. Le transform s'applique APRÈS le calcul de la mise en page :
	   la boîte du lien restait celle de 28px, et le dessin débordait de 40px sur
	   sa gauche. Tout ce qui devait s'aligner sur le logo — la mention d'assurance
	   de la seconde ligne — tombait donc 40px trop à droite, sans qu'aucune marge
	   ne l'explique.
	
	   La hauteur est désormais posée directement, sans transform : la boîte et le
	   dessin coïncident, et l'alignement se fait tout seul. 46px agrandit le logo
	   par rapport aux 42px effectifs d'avant. */
	height: 46px;
    margin-right: 2px;
}

.logo-text {
    font-weight: bold;
    color: #002F5F;
    font-size: 22px;
}
li.nav-item {
   font-size: 18px;
    padding: 9px 19px;
    font-weight: 500;
}

li.nav-item .nav-link{
    color: #222;
}

.dropdown-item {
    background-color: #f5f9fb; /* Soft light blue/gray */
    width: 100%; /* Full width within parent */
    display: block;
    text-align: center;
    padding: 0px 20px;
    margin: 8px 0;
    border-radius: 12px;
    white-space: normal;
    word-break: break-word;
    font-size: 15px;
    font-weight: 600;
    color: #141414;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}


.btn-group ul li{
        display: flex;
        justify-content: center;
        margin-bottom: 10px;
}
.btn-group ul li .dropdown-item{
    font-size: 20px;
    display: flex;
    gap: 10px;
    padding: 3px 9px;
    line-height: 30px;
}


.subtitle {
    font-family: "Mukta", sans-serif;
    font-size: 14px;
    color: #555;
    margin-top: -4px;
}

.nav-buttons {
    display: flex;
    align-items: center;
    gap: 10px;
}
.nav-buttons.btn{
    padding: 10px 30px;
    font-size: 17px;
}

.btn {
    padding: 16px 20px;
    border: none;
    border-radius: 20px;
    cursor: pointer;
    font-size: 16px;
}

.btn-doctors {
    background-color: #10d9d0 !important;
    color: #fff;
    padding: 15px 53px;
    font-size: 18px;
	border-radius: 60px;
    margin-left: -40px;
    @media (max-width: 1400px) {
            padding: 14px 22px;
            font-size: 16px;
             color: #fff !important;  
        }
}


.btn-contact {
    background-color: #f3f6f8;
    color: #000;
    padding: 15px 53px;
    font-size: 18px;
    color: #000;
	border-radius: 60px;
    @media (max-width: 1400px) {
            padding: 14px 22px;
            font-size: 16px;
            
        }
}
.btn-group{
    margin-left: 15px;
}

button.btn.btn-secondary.dropdown-toggle {
    padding: 6px 8px;
    background: #f3f6f8;
}
.dropdown-toggle::after {
    color: #000;
}

.language-flag {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid #ccc;
    margin-left: 5px;
}

.hamburger {
    font-size: 26px;
    margin-left: 15px;
    cursor: pointer;
}

.right-section {
    display: flex;
    align-items: center;
}


/* banner */
.banner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 20px;
    flex-wrap: wrap;
}

.content {
    margin-top: +80px;
    flex: 1 1 500px;
    @media (max-width: 991px) {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        }
   
}
.content h4{
    font-family: "Mukta", sans-serif;
    font-size: 20px;
    font-weight: 400;
}

.content h1 {
    font-family: "Mukta", sans-serif;
	font-size: 46px;
    font-weight: 700;
    margin-bottom: 20px;
    @media (max-width: 991px) {
       text-align: center;
    }
}

.highlight {
    color: #00bfa6;
    font-weight: bold;
}

.content p {
	font-size: 19px;
    margin: 10px 0;
    color: #686e7a;
    width: 80%;
    @media (max-width: 991px) {
        text-align: center;
    }
}
.content .text{
    color: #1f1f1f !important;
    font-size: 19.2px;
}

.app-buttons a img {
    height: 50px;
    margin-right: 10px;
    margin-top: 20px;
}

.image {
    flex: 1 1 300px;
    text-align: center;
    width: 108%;
    @media (max-width: 768px) {
        display: flex;
        justify-content: center;
        align-items: center;
        transform: scale(0.8);
    }
}

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

/* about section */
.support-section {
    padding: 40px;
    display: flex;
    justify-content: center;
}

.support-container {
    display: flex;
    max-width: 1100px;
    border: 2px solid #00cfcf;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
    flex-wrap: wrap;
}

.image-container {
    flex: 1 1 300px;
}

.image-container img {
    width: 100%;
    height: 10  0%;
    object-fit: cover;
}

.text-container {
    flex: 1 1 400px;
    padding: 30px;
    background-color: #fff;
}

.text-container h4 {
    font-family: "Mukta", sans-serif;
    color: #666;
    font-weight: 600;
    margin-bottom: 10px;
}

.text-container h2 {
    font-family: "Mukta", sans-serif;
    font-size: 30px;
    color: #222;
    margin-bottom: 20px;
}

.text-container h2 span {
    color: #00cfcf;
}

.support-list {
    list-style: none;
    padding: 0;
}

.support-list li {
    margin-bottom: 10px;
    font-size: 21px;
    color: #333;
    @media (max-width: 1400px){
        font-size: 16px;
    }
	i{
		margin-right:10px;
	}
} 
.support-list li i{
    color: #00c8c8;
}

.container {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    max-width: 1200px;
    margin: 0 auto;
    gap: 40px;
}

.highlight {
    color: #00c8c8;
}

.right-content {
    flex: 1 1 55%;
}

.swiper {
    width: 100%;
    padding-bottom: 20px;
    
}


.card {
    background: white;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    text-align: center;
    transition: transform 0.3s ease;
    height: 100% !important; /* for grid/column layout */
    display: flex;
    flex-direction: column;
}


.card img {
    width: 100%;
    height: 220px !important;
    object-fit: cover;
}

.card p {
	padding: 40px 10px;
    font-weight: bold;
    font-size: 22px !important;
    margin: 0;
    @media(max-width: 1370px) {
        padding: 20px 10px;
        font-size: 17px;
    }
}


/* medications */
/* ============================================================
   Alternance des fonds
   ============================================================

   Revue le 2026-09-07 après le retrait de « Family Care ». C'était une bande
   teintée : la supprimer laissait « À propos » et « Services » blanches côte à
   côte. Les trois sections suivantes reprennent donc le rythme d'un cran —
   d'où un fond qui apparaît sur deux classes et disparaît d'une troisième.

     Bannière            texture hexagonale, bleutée
     À propos            blanc
     Services            #f1f7f9      ← teinte reprise de Family Care
     Swiss Healthcare    blanc        ← était teintée
     Équipe              #f1f7f9      ← était blanche
     Contact             #00d2d3
     FAQ                 blanc
     Pied de page        #1e1e21

   Chacune de ces classes ne sert qu'à une section : changer leur fond n'a pas
   d'effet ailleurs — vérifié classe par classe.

   Le contact et la FAQ ne bougent pas : le turquoise est un accent, et la FAQ
   doit se détacher de lui comme du pied de page sombre qui la suit. */
.no-prescribe-section {
    padding: 40px 20px;
}

/* Surtitre de section, sorti des colonnes pour coiffer toute la zone. Reprend le
   traitement de .problems-section h5 — même graisse, même casse, même couleur —
   pour que les surtitres se ressemblent d'une section à l'autre. */
.section-head {
    max-width: 900px;
    margin: 0 auto 30px;
    text-align: center;
}
.section-head h5 {
    font-family: "Mukta", sans-serif;
    color: #666;
    text-transform: uppercase;
    font-size: 16px;
    margin-bottom: 0;
}

.container {
    display: flex;
    align-items: flex-start;
    max-width: 1200px;
    margin: 0 auto;
    gap: 40px;
}

.right-content .subtext {
    font-size: 21px !important;
    width: 100%;
    color: #666668 !important;
}

.medication-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.medication-item {
    display: flex;
    gap: 15px;
    background: #fff;
    padding: 15px 20px;
    border-radius: 10px;
    align-items: center;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05), 0 0 20px rgba(0, 255, 255, 0.1);
        @media(max-width: 991px) {
            width: 100%;
        }
}
.img-box .ss-media{
    height: 50px;
    width: 50px;
    display: flex
}

.medication-item .icon {
    font-size: 22px;
    margin-top: 5px;
    width: 80px;
    height: 80px;
    background: #fff;
    text-align: center;
    line-height: 80px;
    border-radius: 50%;
    @media (max-width: 1380px) {
        width: 50px;
        height: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
        }

}

.icon.blue {
    color: #fff;
    background: #00c8c8;
}

.icon.dark {
    color: #fff;
    background: #003e5c;
}

.icon.green {
    color: #fff;
    background: #2acaa2;
}
strong {
    font-size: 24px;
    @media(max-width: 1400px) {
            font-size: 17px;
        }
}

.medication-item p {
    font-family: "Mukta", sans-serif;
    margin: 5px 0 0;
    font-size: 20px;
    color: #555;
    @media(max-width: 1400px) {
            font-size: 14px;
        }
}

.right-content {
    flex: 1 1 35%;
}

.sticky-image {
    position: sticky;
    top: 40px;
    border-radius: 20px;
    overflow: hidden;
    /* padding: 5px retiré aussi : il décalait l'image de 5px de chaque côté, donc
       ses bords ne tombaient pas exactement sur ceux du texte. Le border-radius du
       cadre suffit à arrondir l'image, grâce à overflow: hidden. */
    /* margin-right: 150px retiré : il rétrécissait l'image de 150px, si bien
       qu'elle s'arrêtait bien avant la fin du texte qu'elle illustre. Elle occupe
       désormais toute la largeur de la colonne, alignée sur le titre et le
       paragraphe. */
   

}

@media(max-width: 1440px) {
    .sticky-image {
        margin-right: 70px;
    }
}
@media(max-width: 991px) {
    .sticky-image {
        margin-right: 0;
    }
}
/* Hauteur plafonnée pour que toute la section tienne dans la fenêtre d'un portable
   14 pouces sans défilement. Sans plafond, l'image suivait son ratio et faisait
   695px de haut, ce qui poussait la section à 1050px — 157px de trop.

   object-fit: cover conserve la largeur pleine, donc l'alignement des bords avec
   le titre et le paragraphe : c'est la hauteur seule qui est rognée, également en
   haut et en bas. */
.sticky-image img {
    /* max-height plutôt que height + object-fit: cover. Le recadrage rognait un
       tiers de la photo pour tenir la largeur pleine ; ici l'image se réduit
       entière et occupe simplement une zone plus petite, comme celle d'« About
       Us » qui n'a pas de hauteur imposée.

       Conséquence assumée : ses bords ne tombent plus sur ceux du titre et du
       paragraphe. On échange l'alignement contre une photo non tronquée. */
    max-width: 100%;
    max-height: 460px;
    width: auto;
    height: auto;
    border-radius: 15px;
    display: block;
    /* Centrée dans la colonne : puisqu'elle est plus étroite que le texte, la
       caler à gauche laissait tout le vide du même côté. Centrée, l'écart se
       répartit et la colonne retrouve son équilibre. `display: block` rend les
       marges auto opérantes. */
    margin-left: auto;
    margin-right: auto;
}

/* problem-swiper-sec */


.problems-section {
    padding: 40px 20px;
    text-align: center;
    background: #f1f7f9;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
}

.problems-section h5 {
    font-family: "Mukta", sans-serif;
    color: #666;
    text-transform: uppercase;
    font-size: 16px;
    margin-bottom: 10px;
}
/* `.problemsSwiper { animation: moveleft 20s linear infinite; }` et son @keyframes
   ont été retirés ici. C'était un défilement perpétuel sans pause ni arrêt au
   survol : manquement au critère WCAG 2.2.2 « Pause, Stop, Hide », niveau A. Il
   animait `right`, ce qui recalcule la mise en page à chaque image, et ne laissait
   lire que 7 pathologies sur 17 à la fois. Remplacé par la grille ci-dessous. */

.problem-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}

.problems-section h2 {
    font-family: "Mukta", sans-serif;
    font-size: 30px;
    margin-bottom: 30px;
}

.highlight {
    color: #00c8c8;
}

.swiper {
    padding-bottom: 10px;
    overflow-x: auto;
}

.problem-chip {
    padding: 14px 14px;
    background-color: #fff;
    border: 1px solid #00c8c8;
    border-radius: 9px;
    font-size: 21px;
    font-weight: 500;
    white-space: nowrap;
    display: inline-block;
    color: #000;
    cursor: default;
    transition: background 0.3s;
}
.problem-chip:hover {
    background-color: #e6fbfb;
}

/* `nowrap` garde chaque intitulé sur une ligne. Le plus long, « Poison ivy, oak or
   sumac », mesure ~246 px et tient dans les 335 px utiles d'un écran de 375 px. En
   deçà, la contrainte est relâchée : mieux vaut un libellé sur deux lignes qu'un
   défilement horizontal de toute la page. */
@media (max-width: 359px) {
    .problem-chip {
        white-space: normal;
    }
}

.swiper-wrapper {
    display: flex;
    align-items: center;
    padding-bottom: 10px; 
}

/* problems */

.not-treated-section {
    padding: 40px 20px;
}

/* Left Side (Sticky) */
.media-content {
    flex: 1 1 45%;
    position: sticky;
    top: 20px;
    align-self: flex-start;
}

.media-content h5 {
    font-family: "Mukta", sans-serif;
    color: #666;
    font-size: 16px;
    text-transform: uppercase;
    margin-bottom: 10px;
    
}
.sticky-top {
    position: sticky;
    top: 0;
}

.right-content h2 {
    font-family: "Mukta", sans-serif;
    font-size: 54px;
    line-height: 1.4;
    margin-bottom: 10px;
    @media(max-width: 1400px) {
        font-size: 37px;
    }
}
.right-content .subtext{
    font-size: 17px;
    /* 80% auparavant : le paragraphe s'arrêtait avant le titre et avant
       l'image. Les trois partagent maintenant les mêmes bords. */
    width: 100%;
    color: #8f959c;
}

.media-content.highlight {
    color: #00c8c8;
}

.subheading {
    font-size: 20px;
    font-weight: normal;
    color: #333;
}

.info-text {
    margin: 15px 0 25px;
    font-size: 17px;
    color: #555;
}

.image-wrapper {
    border-radius: 20px;
    overflow: hidden;
    /* padding: 5px;
	margin-right: 40px; */
}

.image-wrapper img {
    width: 100%;
    border-radius: 15px;
    display: block;
    transform: scale(0.8);
}
.text-content{
    margin-top: 90px;
 
    
}
.text-content h5{
    font-size: 20px;
}
.text-content h2{
    font-size: 38px;
}
.text-content ul li {
    font-size: 19px;
}


  

/* Right Side (Scrollable List) */
.extra-features{
    flex: 1 1 55%;
    max-height: 80vh;
    overflow-y: auto;
    padding-right: 10px;
}

.extra-features.problem-item{
    display: flex;
    align-items: flex-start;
    gap: 15px;
    background: #f8f9fa;
    border-radius: 12px;
    padding: 15px 20px;
    margin-bottom: 20px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
}

.extra-features.problem-item .icon{
    font-size: 22px;
    margin-top: 5px;
}

.extra-features.icon.teal{
    color: #00c8c8;
}

.extra-features.icon.navy{
    color: #003e5c;
}

.extra-features.problem-item p{
    font-family: "Mukta", sans-serif;
    margin: 5px 0 0;
    font-size: 16px;
    color: #555;
}

/* team-sec */
.team-section{
    padding: 40px 20px;
    text-align: center;
    background: #f1f7f9;
}

.container{
    max-width: 1300px;
    margin: 0 auto;
}

h5{
    font-family: "Mukta", sans-serif;
    color: #000000;
    font-size: 24px;
    text-transform: uppercase;
    margin-bottom: 10px;
    font-weight: 400;
    line-height: 1;
    @media(max-width: 1400px) {
            font-size: 17px;
        }
}

h2{
    font-family: "Mukta", sans-serif;
    font-size: 54px;
    margin-bottom: 17px;
    font-weight: 600;
    @media(max-width: 1400px) {
            font-size: 37px;
    }
}

.highlight{
    color: #00c8c8;
}

/* Swiper Expert Cards */
.swiper{
    padding-bottom: 20px;
}

/* Flex et non grid, pour une seule raison : CSS Grid ne sait pas centrer une
   dernière rangée incomplète. Avec `auto-fill`, onze médecins sur quatre
   colonnes laissent les trois derniers collés à gauche sous un vide de la
   largeur d'une carte. `flex-wrap` + `justify-content: center` centre toute
   rangée partielle, y compris le cas d'un effectif trop faible pour remplir
   une seule ligne.

   Rien n'est figé pour autant : `flex: 1 1 240px` laisse les cartes grandir
   pour occuper la rangée, et le nombre par rangée découle de la largeur
   disponible. Le `max-width` est le garde-fou du cas inverse — sans lui, deux
   médecins produiraient deux cartes de 560 px de large. */
.doctor-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    gap: 20px;
}

.doctor-grid > .expert-card {
    flex: 1 1 240px;
    max-width: 280px;
}

.expert-card{
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    overflow: hidden;
    transition: transform 0.3s ease;
    /* Les descriptions vont de 130 à 266 caractères. En colonne flex avec
       .expert-info en flex:1, le bas des cartes d'une même rangée s'aligne ;
       le carrousel ne les alignait que par le haut. */
    display: flex;
    flex-direction: column;
    padding-bottom: 20px;
}

.expert-card .expert-info{
    flex: 1;
}

.expert-card:hover{
    transform: translateY(-5px);
}

.expert-card img{
    width: 100%;
    height: 280px;
    object-fit: cover;
}

.expert-info{
    padding: 15px;
  
}

.expert-info h4{
    font-family: "Mukta", sans-serif;
    margin: 0 0 8px;
    font-size: 26px;
    @media(max-width: 1400px) {
        font-size: 20px;
    }
}

.expert-info p{
    font-family: "Mukta", sans-serif;
    font-size: 19px;
    color: #555;
    margin: 0;
    line-height: 1.4;
    @media(max-width: 1400px) {
        font-size: 16px;
    }
}

/* contect us */
.contact-section {
    background-color: #00d2d3;
    padding: 40px 20px;
    text-align: center;
    position: relative;
    z-index: 1;
}
.contact-section::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    height: 400px;
    width: 100%;
    background: #fff;
    z-index: -1;
}

.contact-header h5 {
    font-family: "Mukta", sans-serif;
    text-transform: uppercase;
    font-size: 16px;
    color: #000000;
    margin-bottom: 5px;
    font-weight: 500;
}

.contact-header h2 {
    font-family: "Mukta", sans-serif;
    color: #fff;
    font-size: 37px;
    margin-bottom: 30px;
    font-weight: 500;
}
.text-1 {
    color: #000 !important;
}

.contact-container {
    background-color: #fff;
    border-radius: 10px;
    margin: 0 auto;
    display: flex;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.contact-form {
    flex: 1;
    padding: 30px;
    text-align: left;
}

.contact-form form {
    display: flex;
    flex-direction: column;
}

.contact-form label {
    margin-bottom: 5px;
    font-size: 16px;
    color: #333;
}

.contact-form input,
.contact-form textarea {
    margin-bottom: 15px;
    padding: 18px 15px;
    border-radius: 6px;
    border: 1px solid #eee;
    background-color: #f7f7f7;
    font-size: 16px;
}

.contact-form button {
    background-color: #00d2d3;
    color: #000000;
    padding: 10px;
    border: none;
    border-radius: 6px;
    font-size: 17px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.contact-form button:hover {
    background-color: #00b6b6;
}

.contact-image {
    flex: 1;
    max-height: 100%;
    padding: 30px 30px 30px 0px;
    @media(max-width: 991px) {
        display: none;
    }
}

.contact-image img {
    width: 100%;
    height: 500px;
    object-fit: cover;
    border-radius: 12px;
}

/* Responsive */
@media (max-width: 768px) {
    .contact-container {
        flex-direction: column;
    }

    .contact-image {
        order: -1;
        max-height: 300px;
    } }

    /* footer */
        .footer {
            background-color: #1e1e21;
            color: #fff;
            padding: 40px 20px 20px;
            font-size: 16px;
        }
    
       
    
        .footer-col {
            flex: 1;
            min-width: 220px;
            margin-bottom: 20px;
        }
    
        .logo-col {
            max-width: 360px;
        }
    
        .footer-logo {
            color: #00d2d3;
            font-size: 22px;
            margin-bottom: 10px;
        }
    
        .footer-col p {
		   color: #adaeb2;
			font-size: 19px;
			font-family: "Mukta", sans-serif;
			margin-bottom: 20px;
			line-height: 1.5;
            @media(max-width: 1400px) {
                font-size: 17px;
            }
        }
    
        .footer-col h4 {
            font-family: "Mukta", sans-serif;
			font-size: 22px;
			margin-bottom: 15px;
			color: #fff;
            @media(max-width: 1400px) {
                    font-size: 18px;
                }
        }
    
        .footer-col ul {
            list-style: none;
            padding: 0;
        }
    
        .footer-col ul li {
            margin-bottom: 10px;
        }
    
        .footer-col ul li a {
		  font-family: "Mukta", sans-serif;
			font-size: 20px;
			color: #ccc;
			text-decoration: none;
            @media(max-width: 1400px) {
                    font-size: 16px;
                }
        }
    
        .footer-col ul li a:hover {
            color: #00d2d3;
        }
    
        .social-icons{
            display: flex;
        }
        .social-icons a {
            font-family: "Mukta", sans-serif;
            display: flex;
            margin-right: 10px;
            color: #ccc;
            font-size: 18px;
            border: 1px solid #fff;
            border-radius: 50%;
               padding: 20px;
            height: 12px;
            width: 12px;
            justify-content: center;
            align-items: center;
            text-decoration: none;
        }
    
        .social-icons a:hover {
            color: #00d2d3;
        }
    
        .store-badges img {
            height: 40px;
            margin-bottom: 10px;
            display: block;
        }
    
        .footer-bottom {
            text-align: center;
            margin-top: 20px;
            color: #999;
            
        }
        .footer-bottom p{
            @media(max-width: 1400px) {
                    font-size: 17px;
                }
        }


                 
    
        .footer-bottom hr {
            border: 0;
            border-top: 1px solid #444;
            margin-bottom: 10px;     
        }

        .container-fluid{
            max-width: 1600px;
            width: 1600px;
        }
                
        @media (max-width: 1600px) {
         .container-fluid {
                max-width: 1420px;
                width: 1420px ;
            }
        }
               
        @media (max-width: 1400px) {
         .container-fluid {
                max-width: 1180px;
                width: 1180px;
            }
        } @media (max-width: 1200px) {
         .container-fluid {
                max-width: 1140px;
                width: 1140px ;
            }
        }
        @media (max-width: 1200px) {
         .container-fluid {
                max-width: 1140px;
                width: 1140px ;
            }
        }
         @media (max-width: 991px) {
         .container-fluid {
                width: 100%;
                width: 100%;
                padding-left: 30px;
                padding-right: 30px;
            }
        }


   @media (max-width: 992px) {       
    .navbar-collapse {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 0;
        background: #fff;
        transition: 0.7s;
        opacity: 0;
    }
}
@media (max-width: 991px) {
    .navbar-collapse.show {
        opacity: 1;
        height: 100vh;
    }
}
ul.navbar-nav {
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 0;
    height: 100%;
    margin-left: 50px;
}

button.navbar-toggler {
    position: relative;
    z-index: 99999;
}


  @media (max-width: 992px) {
    .navbar-expand-lg .navbar-nav {
        flex-direction: column;
        justify-content: center;
        text-align: center;
        width: 100%;
    }
  }

  button.navbar-toggler {
    border: 0;
    padding: 0;
    margin-left: 15px;
    outline: none;
    box-shadow: none !important;
}


button.navbar-toggler.collapsed i{
    display: none;
}

.navbar-toggler.collapsed .navbar-toggler-icon{
    display: block;
}
.navbar-toggler .navbar-toggler-icon{
    display: none;
}

/* La hauteur fixe de 667px qui figurait ici calait la FAQ sur l'image de la
   colonne voisine, pour que les deux blocs finissent sur la même ligne. La FAQ
   a quitté cette colonne le 2026-09-06 : la contrainte n'a plus d'objet, et la
   conserver rognerait les questions. */

.custom-dropdown {
  background: white;
  border-radius: 16px;
  padding: 10px;
  width: 250px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.1);
  font-family: sans-serif;
}

.custom-dropdown ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.custom-dropdown li {
background-color: #f4f9fb;
margin-bottom: 10px;
padding: 7px;
text-align: center;
font-weight: bold;
border-radius: 12px;
transition: background-color 0.2s ease;
cursor: pointer;
font-size: 15px;
}

.custom-dropdown li:last-child {
  margin-bottom: 0;
}

/* .custom-dropdown li:hover {
  background-color: #e3f2f7;
} */

ul.dropdown-menu.custom-dropdown.show {
    height: 400px;
    overflow: auto;
}
/* `.doctorbox { height: 470px }` retiré avec le carrousel : cette hauteur fixe
   était taillée pour une seule rangée et aurait coupé les suivantes en grille.
   C'est exactement le genre de valeur figée que la grille évite désormais. */



.popup-box {
    position: absolute;
    background: #fff;
    border: 1px solid #ddd;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    padding: 10px;
    max-width: 300px;
    z-index: 999;
    display: none;
    transition: all 0.3s ease;
    border-radius: 8px;
    font-size: 16px;
    margin-left: -160px;
}









   .topbar {
    display: flex;
    align-items: center;
    /* 14px et non 20 : avec les polices relevées de 2px, l'anglais ne tenait
       plus sur une ligne et « FAQ » basculait seul en dessous. Resserrer
       l'espacement suffit à le faire rentrer, sans réduire le texte. */
    gap: 14px;
    list-style: none;
    padding-left: 100px;       /* must be 0 (not -10) */
    margin-bottom: 0;
    margin-left: -55px;
   
}

.topbar .nav-item {
    margin: 0;
    padding: 0;
}

/* Entrées en pastilles, sur le modèle de .problem-chip : même filet turquoise
   d'un pixel, même fond au survol. Le rayon est plein — 999px — là où les
   pastilles de pathologies gardent un angle de 9px : celles-ci sont des liens,
   et l'arrondi complet les distingue d'un simple encadré. */
.topbar .nav-link {
    padding: 7px 16px;
    /* 17px : deux de moins que le relèvement général de la page. En pastilles,
       les entrées gagnent le poids du filet et du retrait — la même taille de
       texte y pesait plus lourd qu'en liens nus. */
    font-size: 17px;
    line-height: 1.2;
    white-space: nowrap;
    border: 1px solid #00c8c8;
    border-radius: 999px;
    color: #000;
    transition: background-color .2s, color .2s;
}

.topbar .nav-link:hover,
.topbar .nav-link:focus-visible {
    background-color: #e6fbfb;
}

@media (prefers-reduced-motion: reduce) {
    .topbar .nav-link { transition: none; }
}


.navbar-nav {
    justify-content: center; /* Or use 'flex-start' for left-align */
    width: 100%;
}

@media (max-width: 768px) {
    .topbar {
        flex-wrap: wrap;
        justify-content: center;
    }
}







.nav-buttons {
    display: flex;
    flex-wrap: nowrap;        /* Keep in one row */
    gap: 8px;                 /* Space between buttons */
    align-items: center; 
    margin-left: 10px;
   
}

.nav-buttons .btn {
    font-size: 15px;
    padding: 14px 22px;
    white-space: nowrap;
  color:#000 !important;
}




/* Le haut de l'image s'aligne sur le libellé « Name* » du formulaire.
   .contact-container est en flex : les deux colonnes démarrent au même y, et
   c'est leur padding-top qui décide où commence leur contenu. .contact-form a
   30px, donc l'image doit avoir les mêmes 30px — ce bloc en imposait 80, d'où
   un décalage mesuré de 50px vers le bas.

   Cette règle surchargeait celle de la ligne 1069, plus haut dans le fichier,
   qui déclarait déjà `padding: 30px 30px 30px 0`. */
.contact-image{
    padding-top: 30px;
}



/* contact form */

.error-message {
    color: rgb(243, 33, 33);
    font-size: 14px;
        margin-bottom: 10px;
    display: block;
}



/* Optional: Customize toastr success appearance */
.toast-success {
    background-color: #ffffff !important;
    color: #3e4b3f !important;
    border-left: 6px solid #4CAF50;
    font-weight: 500;
}








/* Make sure the right section stacks properly on mobile */
@media (max-width: 991px) {


    .navbar-collapse {
        padding-top: 80px;
    }

    .topbar {
        flex-direction: column;
        gap: 10px;
    }


    .dropdown-menu-end {
        width: 100%;
    }
}

.medication-item strong{
    font-size: 23px;
}
.medication-item p {
    font-size: 18px;
}

.container-fluid h5{
    font-size: 20px;

}
.container-fluid h2{
        font-size: 36px;

}

/* ============================================================
   « Swiss healthcare » — colonne unique centrée
   ============================================================ */

/* Texte à gauche, image à droite. Le surtitre reste centré au-dessus, coiffant
   les deux colonnes, comme dans les autres sections. */
.healthcare-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
}

.healthcare-text .subtext {
    width: 100%;
}

/* L'image n'est plus collante : elle ne longe plus une colonne de questions. */
.healthcare-image {
    border-radius: 20px;
    overflow: hidden;
}

/* Sous 992px la grille retombe sur une colonne : le texte d'abord, l'image
   ensuite — l'ordre de lecture, pas celui du balisage de bureau. */
@media (max-width: 991px) {
    .healthcare-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }
}

.healthcare-image img {
    max-width: 100%;
    max-height: 460px;
    width: auto;
    height: auto;
    margin-left: auto;
    margin-right: auto;
    display: block;
}

/* ============================================================
   Questions fréquentes — section à part, sous « Contact Us »
   ============================================================ */

/* Fond blanc : la section vient après le contact, en cyan, et précède le pied
   de page. Elle a besoin de s'en détacher des deux côtés. */
.faq-section {
    padding: 40px 20px;
    background: #fff;
}

/* Les questions ne sont plus dans une colonne de 45 % : deux par ligne sur
   large écran, une seule en dessous. Le .media-content d'origine était un
   élément de grille collant, ce qui n'a plus de sens en pleine largeur. */
.faq-section .media-content {
    flex: none;
    position: static;
    max-width: 1100px;
    margin: 0 auto;
}

/* La grille de cartes dépliées est remplacée par un accordéon : une colonne,
   les quinze intitulés visibles d'un seul écran. Deux colonnes obligeraient
   l'œil à balayer en zigzag pour lire une liste dont l'ordre compte, et une
   réponse qui s'ouvre décalerait la carte voisine. */
/* Deux colonnes, décidées le 2026-09-07 — et provisoires : on attend le retour
   des utilisateurs. L'hypothèse à vérifier est qu'une lecture en diagonale
   aide à repérer sa question plus vite qu'une liste qu'il faut parcourir.

   Pas de max-width propre : la liste remplit .faq-section .media-content, qui
   porte les 1100px. Une seconde valeur ici finirait par diverger de celle-là.

   Ce qui a été mesuré avant de trancher, sur les quinze réponses réelles :

                        1 colonne     2 colonnes
     largeur de texte     1054px          498px
     hauteur repliée      1158px          696px
     questions à l'écran       8            ~11
     lignes de réponse       103            153
     titres sur 2 lignes       0              3

   Ce qu'on gagne : trois questions de plus sous les yeux, la hauteur repliée
   réduite de 40%. Ce qu'on paie, et qu'il faut guetter dans les retours :

     · un vide d'environ 460px se creuse à droite de la carte voisine dès qu'une
       réponse s'ouvre — et l'ouverture étant exclusive, cela se reproduit à
       chaque clic, à un endroit différent ;
     · les rangées sont irrégulières, trois intitulés passant sur deux lignes
       à 498px quand leurs voisins tiennent sur une ;
     · l'ordre de lecture n'est plus une simple descente : la 2e question est en
       haut à droite, la 3e revient à gauche. C'est précisément le point que le
       retour des utilisateurs doit trancher.

   Si c'est ce zigzag qui ressort des retours, le levier est l'ordre de
   remplissage — colonne par colonne plutôt que rangée par rangée — et non le
   nombre de colonnes.

   Grille par rangées, et non `columns` CSS : avec ce dernier, ouvrir une
   réponse ferait migrer des questions d'une colonne à l'autre.

   align-items: start est ce qui garde les cartes à leur taille. Sans lui, les
   deux d'une même rangée s'étireraient à la même hauteur, et la carte repliée
   voisine d'une carte ouverte deviendrait un grand rectangle vide bordé.

   Sous 992px on retombe sur une colonne : deux colonnes de 250px seraient
   illisibles. */
.faq-list {
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: start;
    gap: 12px 20px;
}

@media (max-width: 991px) {
    .faq-list {
        grid-template-columns: 1fr;
    }
}

.faq-item {
    background: #fff;
    border: 1px solid #e4eeee;
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04), 0 0 20px rgba(0, 255, 255, 0.06);
    transition: border-color .2s, box-shadow .2s;
}

.faq-item[open] {
    border-color: #00d2d3;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.06), 0 0 24px rgba(0, 255, 255, 0.14);
}

/* Même traitement de chevron que .problem-more : marqueur natif retiré des deux
   moteurs, remplacé par une équerre qui pivote. Sans elle, rien n'indiquerait
   que la ligne s'ouvre. */
.faq-item > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    cursor: pointer;
    list-style: none;
    padding: 18px 22px;
    font-family: "Mukta", sans-serif;
    font-size: 20px;
    font-weight: 600;
    color: #1e1e21;
    line-height: 1.4;
}

.faq-item > summary::-webkit-details-marker { display: none; }

.faq-item > summary::after {
    content: "";
    flex: 0 0 auto;
    width: 9px;
    height: 9px;
    border-right: 2px solid #00b6b6;
    border-bottom: 2px solid #00b6b6;
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform .2s;
}

.faq-item[open] > summary::after {
    transform: rotate(-135deg) translate(-2px, -2px);
}

.faq-item > summary:hover { color: #0a7f7a; }

/* Le focus clavier doit se voir : summary est l'élément qu'on atteint au
   Tab, et le retirer rendrait l'accordéon impraticable sans souris. */
.faq-item > summary:focus-visible {
    outline: 2px solid #00b6b6;
    outline-offset: -2px;
    border-radius: 10px;
}

/* Retraits égaux à gauche et à droite : le chevron est sur la ligne de
   l'intitulé, pas à côté de la réponse, et les 46px qu'on lui réservait ici
   rognaient la largeur du texte sans rien protéger. */
.faq-answer {
    padding: 0 22px 20px 22px;
}

.faq-answer p {
    margin: 0;
    font-size: 17.5px;
    line-height: 1.7;
    color: #555;
}

.faq-answer .faq-media {
    display: block;
    max-width: 260px;
    margin-top: 14px;
    border-radius: 8px;
}

@media (max-width: 575px) {
    .faq-item > summary { padding: 15px 16px; font-size: 18px; }
    .faq-answer { padding: 0 16px 16px 16px; }
    .faq-answer p { font-size: 16.5px; }
}

@media (prefers-reduced-motion: reduce) {
    .faq-item,
    .faq-item > summary::after { transition: none; }
}


/* ============================================================
   « Medical Problems We Treat » — repli natif de la liste longue
   ============================================================ */

/* La liste compte 120 entrées : les afficher toutes fait de cette section la
   plus haute de la page. Trente sont montrées, le reste attend un clic.

   <details> porte le repli lui-même : pas de script, un fonctionnement clavier
   natif, et les 120 intitulés restent dans le HTML servi — donc indexables. */
.problem-more {
    margin-top: 18px;
    text-align: center;
}

.problem-more > summary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    list-style: none;
    padding: 10px 22px;
    border: 1px solid #00d2d3;
    border-radius: 999px;
    color: #0a7f7a;
    font-weight: 600;
    font-size: 17px;
    transition: background .2s, color .2s;
}

/* Le marqueur natif est retiré des deux moteurs, puis remplacé par un chevron
   qui pivote — sans lui, rien n'indiquerait le sens de l'action. */
.problem-more > summary::-webkit-details-marker { display: none; }

.problem-more > summary::after {
    content: "";
    width: 8px;
    height: 8px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform .2s;
}

.problem-more[open] > summary::after {
    transform: rotate(-135deg) translate(-2px, -2px);
}

.problem-more > summary:hover {
    background: #00d2d3;
    color: #fff;
}

/* Un seul libellé à la fois : « Voir les 120 » replié, « Réduire » déplié. */
.problem-more .pm-less,
.problem-more[open] .pm-more { display: none; }
.problem-more[open] .pm-less { display: inline; }

.problem-more .problem-list {
    margin-top: 18px;
}

@media (prefers-reduced-motion: reduce) {
    .problem-more > summary,
    .problem-more > summary::after { transition: none; }
}

/* ============================================================
   Seconde ligne de l'en-tête — mention d'assurance
   ============================================================ */

/* Alignée à gauche sur le logo, pas centrée : c'est une précision de service,
   pas un titre. Le turquoise est celui des accents du site (#00c8c8), déjà
   employé par .highlight — aucune couleur nouvelle n'est introduite. */
.navbar-note .container {
    padding-top: 0;
    padding-bottom: 0;
}

.navbar-note p {
    margin: 0;
    padding: 0 0 14px;
    color: #00c8c8;
    font-weight: 700;
    /* 25.5px = 17px x 1,5. Le slogan suit le relèvement général de 2px comme le
       reste de la page, puis reçoit son propre facteur : c'est une accroche, pas
       du texte courant. */
    font-size: 25.5px;
    line-height: 1.35;
}

@media (max-width: 575px) {
    /* 24px = 16px x 1,5, même règle appliquée à la taille réduite. */
    .navbar-note p { font-size: 24px; }
}

/* Le logo devient un lien vers l'accueil : on neutralise le soulignement et on
   conserve exactement la taille qu'avait l'image seule. */
.navbar-brand {
    padding: 0;
    margin: 0;
    display: inline-flex;
    align-items: center;
}

/* ============================================================
   « Swiss healthcare » — surtitre remonté dans la colonne
   ============================================================ */

/* Reprend le traitement des autres surtitres — même graisse, même casse, même
   couleur — mais aligné à gauche, puisqu'il vit désormais dans la colonne de
   texte et non plus centré au-dessus des deux colonnes. */
.healthcare-text h5 {
    font-family: "Mukta", sans-serif;
    color: #666;
    text-transform: uppercase;
    font-size: 16px;
    margin-bottom: 10px;
    letter-spacing: .02em;
}

/* ============================================================
   Barre de navigation — resserrer le menu contre le logo
   ============================================================ */

/* Le conteneur est en justify-content: space-between avec trois enfants — le
   logo, le bloc du menu, la partie droite. L'espace libre se répartissait donc
   à parts égales, et le menu se retrouvait au milieu, loin du logo.

   On passe en flex-start : le menu suit le logo à la distance du gap, et c'est
   la partie droite qui absorbe tout l'espace restant, via margin-left: auto. */
.navbar > .container {
    justify-content: flex-start;
    gap: 24px;

    /* Le conteneur commun est plafonné à 1200px avec 85px de retrait de chaque
       côté — 1030px utiles. La barre y était à l'étroit dès que les libellés
       s'allongeaient. Elle prend ici toute la largeur disponible, moins un
       retrait réduit.

       La mention d'assurance reçoit la même géométrie plus bas : sans cela son
       bord gauche ne tomberait plus sur celui du logo. */
    max-width: none;
    padding-left: 40px;
    padding-right: 40px;
}

/* Même géométrie que la barre, pour que le slogan reste aligné sur le logo. */
.navbar-note .container {
    max-width: none;
    padding-left: 40px;
    padding-right: 40px;
}


.navbar > .container > .d-flex {
    margin-left: auto;
}

/* La règle d'origine de .topbar cale le menu à la main : padding-left: 100px
   puis margin-left: -55px, soit 45px nets d'un décalage impossible à raisonner.
   Les deux sont neutralisés — l'écart au logo est désormais le gap du conteneur,
   une seule valeur, lisible.

   Le commentaire d'origine disait d'ailleurs « must be 0 (not -10) ». */
.topbar {
    padding-left: 0;
    margin-left: 0;
    margin-bottom: 0;

    /* Le menu passe à la ligne plutôt que de pousser le reste hors de l'écran.
       En allemand, les cinq libellés totalisent 100 caractères contre 67 en
       anglais — « Leistungen für Erwachsene und Kinder », « Unsere Ärztinnen
       und Ärzte » — et la barre ne tenait plus : « Kontakt » sortait du cadre
       et la page se mettait à défiler horizontalement.

       Aucune valeur de retrait n'est en cause : padding-left et margin-left
       sont déjà à zéro. C'est la largeur du texte, et elle dépend de la langue.

       Aligné à gauche : les entrées de la seconde ligne se placent sous celles
       de la première, ce que le format en pastilles rend lisible — centrées,
       elles auraient flotté sans repère. */
    flex-wrap: wrap;
    justify-content: flex-start;
    row-gap: 8px;
}

/* La colonne du menu doit pouvoir rétrécir pour que le passage à la ligne se
   déclenche. min-width: 0 lève la largeur minimale implicite d'un élément flex,
   qui vaut sinon la largeur de son contenu — et empêche justement de rétrécir. */
.navbar > .container > .navbar-collapse {
    flex: 1 1 auto;
    min-width: 0;
}

/* Le logo ne se comprime jamais : sans cela, quand la barre déborde, sa boîte
   rétrécit tandis que l'image garde sa taille — et le menu passe par-dessus. */
.navbar-brand {
    flex-shrink: 0;
}

/* ============================================================
   Sections sans illustration — le contenu se centre
   ============================================================ */

/* Posée quand l'image d'une section est supprimée ou masquée depuis l'ADMIN.
   Sans elle, la colonne de texte garderait sa demi-largeur et le bloc paraîtrait
   collé à gauche, une moitié de page vide à côté. */
.no-illustration {
    justify-content: center !important;
}

.healthcare-grid.no-illustration {
    grid-template-columns: 1fr;
    max-width: 900px;
    text-align: center;
}

.healthcare-grid.no-illustration .healthcare-text h5,
.healthcare-grid.no-illustration .healthcare-text h2,
.healthcare-grid.no-illustration .healthcare-text .subtext {
    text-align: center;
}

.contact-container.no-illustration .contact-form {
    max-width: 720px;
    margin: 0 auto;
}

.support-section .row.no-illustration .text-content {
    max-width: 900px;
    margin: 0 auto;
}

/* ============================================================
   Échelle des illustrations — réglée depuis l'ADMIN
   ============================================================ */

/* Posée seulement quand le réglage s'écarte de 100 %. À 100 % la balise ne
   porte ni classe ni style : la page est alors exactement celle d'avant que ce
   réglage existe.

   `--img-scale` est la part de la largeur que sa colonne laisse à l'image,
   c'est-à-dire de la taille qu'elle a aujourd'hui. !important parce que chaque
   section fixe déjà la largeur de la sienne — l'une à 100 %, l'autre à `auto`,
   celle du formulaire de contact à une hauteur de 500px recadrée. */
.img-scale {
    width: var(--img-scale, 100%) !important;
    height: auto !important;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    display: block;
}

/* Bannière sans illustration : le texte prend toute la ligne, et se centre sur
   une colonne lisible au lieu de s'étirer d'un bord à l'autre. */
.banner .row.no-illustration .content {
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}