/* ===================== STYLE GLOBAL ===================== */
body {
    font-family: 'Poppins', sans-serif;
    margin: 0;
    padding: 0;
   background-color: white !important;
}
    position: relative;
}
html, body {
    max-width:100%;
    overflow-x:hidden;  /* empêche tout scroll horizontal */
}


body::before {
    content: "";
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: url("logo.png") center no-repeat;
    background-size: 500px;
    opacity: 0.05; /* filigrane doux */
    pointer-events: none;
    z-index: -1;
}

/* ===================== BANDEAU VACANCES ===================== */
@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.bandeau-vacances {
    background: #166534; /* vert foncé */
    color: white;
    text-align: center;
    padding: 18px;
    font-size: 18px;
    font-weight: 600;
    animation: blink 1.5s infinite;
}

/* ===================== HEADER ===================== */
/* ===== HERO BANNER ===== */


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


/* Reset basique */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
}

/* Header / bandeau */
.header-banner {
    width: 100%;
    height: 500px;                  /* hauteur fixe sur PC */
    background-image: url('bandeau.jpg');
    background-repeat: no-repeat;
    background-position: center center; /* centre l'image verticalement */
    background-size: contain;            /* toute l'image visible, pas de troncature */
    filter: brightness(1.2);  
}

/* Responsive tablette */
@media (max-width: 768px) {
    .header-banner {
        height: 300px;           
        background-size: contain; 
        background-color: #fff;  /* bandes latérales si nécessaire */
    }
}

/* Responsive mobile */
@media (max-width: 480px) {
    .header-banner {
        height: 200px;           
        background-size: contain;
    }
}


/* ===================== BOUTONS HEADER ===================== */
.header-buttons {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

.header-buttons .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 55px;
    padding: 12px 20px;
    border-radius: 10px;
    text-decoration: none;
    font-weight: 500;
    text-align: center;
    max-width: 320px;
    width: 100%;
    box-sizing: border-box;
    transition: all 0.3s ease;
    box-shadow: 0 3px 10px rgba(0,0,0,0.15);
    white-space: normal;
}

.rdv { background: #2563eb; color: white; }
.rdv:hover { background: #1e4fd1; }

.boutique { background: #10b981; color: white; }
.boutique:hover { background: #059669; }

.urgence { background: #dc2626; color: white; }
.urgence:hover { background: #b91c1c; }

.header-buttons .urgence {
    margin-bottom: 20px;  /* espace entre le bouton et la nav */
}


/* ===================== NAVIGATION ===================== */
nav {
    background: #1e3a8a;
    padding: 12px 0;
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}

nav a {
    color: white;
    font-weight: 500;
    text-decoration: none;
    padding: 6px 12px;
    border-radius: 6px;
    background: #38bdf8;
    transition: all 0.3s ease;
}

nav a:hover { background: #22d3ee; transform: translateY(-2px); }

/* ===================== SECTIONS ===================== */
section {
    padding: 40px 20px;
    max-width: 1100px;
    margin: 30px auto;
    background: #7dd3fc; /* bleu ciel élégant */
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

h2 { text-align: center; font-size: 22px; margin-bottom: 20px; }

/* ===================== CONTACT ===================== */
.contact-box {
    background: #f0f9ff;
    padding: 20px;
    border-radius: 10px;
    max-width: 500px;
    margin: 0 auto;
    text-align: center;
}

iframe {
    width: 80%;
    max-width: 500px;
    height: 300px;
    border: 0;
    display: block;
    margin: 20px auto;
    border-radius: 10px;
}

/* ===================== SERVICES 3x2 ===================== */
#services .services {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    justify-items: center;
}

.card {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 90px;
    width: 180px;
    padding: 10px;
    border-radius: 12px;
    text-align: center;
    background: linear-gradient(135deg, #2563eb, #1e40af);
    color: white;
    font-weight: 500;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    transition: transform 0.2s, box-shadow 0.2s;
    word-break: break-word;
}

.card:hover { transform: translateY(-5px); box-shadow: 0 6px 18px rgba(0,0,0,0.2); }

/* ===================== GALERIES HORIZONTALES CENTRÉES ===================== */
#veterinaires .gallery,
#mascottes .gallery,
#infos .gallery {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    gap: 20px;
    overflow-x: auto;
    padding-bottom: 10px;
    scrollbar-width: thin;
    scrollbar-color: #2563eb #7dd3fc;
}

#veterinaires .gallery img,
#mascottes .gallery img,
#infos .gallery img {
    width: 200px;
    height: 200px;
    object-fit: cover;
    border-radius: 10px;
    cursor: pointer;
    transition: transform 0.3s;
}

#veterinaires .gallery img:hover,
#mascottes .gallery img:hover,
#infos .gallery img:hover {
    transform: scale(1.05);
}

/* ===================== CLINIQUE 4x2 ===================== */
#clinique .gallery {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
    justify-items: center;
}

#clinique .gallery img {
    width: 200px;
    height: 200px;
    object-fit: cover;
    border-radius: 10px;
    cursor: pointer;
    transition: transform 0.3s;
}

#clinique .gallery img:hover { transform: scale(1.05); }

/* ===================== INFOS BOX ===================== */
.info-box,
.paiement,
.errant,
.urgence-box {
    max-width: 500px;
    margin: 15px auto;
    padding: 15px;
    border-radius: 10px;
    text-align: center;
}

.info-box { background: #f0f9ff; border: 2px solid #38bdf8; }
.paiement { background: #f0f9ff; border: 2px solid #38bdf8; }
.errant { background: #fef3c7; border: 2px solid #f59e0b; }
.urgence-box { background: #fee2e2; border: 2px solid #dc2626; }

/* ===================== BADGES ===================== */
.badge {
    display: inline-block;
    background: #e0f2fe;
    color: #0369a1;
    padding: 10px 15px;
    margin: 5px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 500;
}

/* Conteneur pour centrer le bouton */
#youtube-section .youtube-btn-wrapper {
    display: flex;
    justify-content: center;  /* centre horizontalement sur PC et mobile */
    margin: 30px 0;           /* espace au-dessus et en dessous */
}

/* Style du bouton */
#youtube-section .btn-chronovet {
    display: inline-block;
    background-color: red;
    color: white;
    font-size: 1.5rem;
    padding: 12px 24px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s;
}

/* Hover */
#youtube-section .btn-chronovet:hover {
    background-color: darkred;
}
/* ===================== FOOTER ===================== */
footer {
    background: #1a237e;
    color: white;
    text-align: center;
    padding: 20px;
}

footer a { color: white; text-decoration: underline; }

/* ===================== LIGHTBOX ===================== */
#lightbox {
    display: none;
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0,0,0,0.9);
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

#lightbox img { max-width: 90%; max-height: 90%; border-radius: 10px; }
#close {
    position: absolute;
    top: 20px;
    right: 30px;
    font-size: 50px;
    color: white;
    cursor: pointer;
}

/* ===================== MEDIA QUERIES ===================== */
@media (max-width: 1024px) {
    #veterinaires .gallery img,
    #mascottes .gallery img,
    #infos .gallery img,
    #clinique .gallery img {
        width: 160px;
        height: 160px;
    }
}

@media (max-width: 768px) {
    header { padding: 25px 15px; }
    .logo { width: 100px; }
    .slogan { font-size: 16px; }
    #services .services { grid-template-columns: repeat(2, 1fr); }
    #clinique .gallery { grid-template-columns: repeat(2, 1fr); }
    #veterinaires .gallery,
    #mascottes .gallery,
    #infos .gallery { flex-wrap: nowrap; overflow-x: auto; }
    .gallery img { width: 140px; height: 140px; margin-right: 10px; }
    .youtube a { font-size: 14px; padding: 10px 12px; }
}

/* ===================== GALERIES VÉTÉRINAIRES ===================== */
/* ===================== VÉTÉRINAIRES ===================== */
/* Conteneur carré identique pour tous les vétérinaires */
#veterinaires .gallery .vet {
    width: 200px;
    height: 200px;
    background: #f0f9ff;   /* fond doux */
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-direction: column;
    cursor: pointer;
}

#equipe .gallery img{
    width:200px;       /* largeur identique */
    height:200px;      /* hauteur identique */
    object-fit:contain; /* image entière visible */
    border-radius:10px;
    background:white;   /* fond identique */
    margin:0 10px;     /* espace entre les images */
}


/* Image dimensionnée à 100% du conteneur */
#veterinaires .gallery .vet img {
    width: 100%;
    height: 100%;
    object-fit: cover;      /* remplit le carré, les deux images identiques */
    border-radius: 10px;
    transition: transform 0.3s;
}

#veterinaires .gallery .vet:hover img {
    transform: scale(1.05);
}

/* ===== RESPONSIVE ===== */
@media (max-width: 1024px) {
    #veterinaires .gallery .vet {
        width: 160px;
        height: 160px;
    }
}

@media (max-width: 768px) {
    #veterinaires .gallery {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 10px;
    }
    #veterinaires .gallery .vet {
        width: 140px;
        height: 140px;
        margin-right: 10px;
    }
}

/* ====== RESPONSIVE ====== */
@media (max-width: 1024px) {
    #veterinaires .gallery .vet {
        width: 160px;
        height: 160px;
    }
}

@media (max-width: 768px) {
    #veterinaires .gallery {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 10px;
    }
    #veterinaires .gallery .vet {
        width: 140px;
        height: 140px;
        margin-right: 10px;
    }
}


/* VÉTÉRINAIRES : horizontal et centrés sur PC */
@media(min-width:769px){
  #equipe .gallery{
    display:flex;
    flex-direction:row;      /* horizontal */
    justify-content:center;  /* centrer horizontalement */
    align-items:center;      /* aligner verticalement si tailles différentes */
    flex-wrap:nowrap;        /* une seule ligne */
    gap:20px;                /* espace entre les images */
  }

  #equipe .gallery img{
    width:200px;
    height:200px;
    object-fit:contain;      /* image entière visible */
    border-radius:10px;
    background:white;
  }
}
/* VÉTÉRINAIRES : horizontal et centrés sur PC */
@media(min-width:769px){
  #equipe .gallery{
    display:flex;
    flex-direction:row;      /* horizontal */
    justify-content:center;  /* centrer horizontalement */
    align-items:center;      /* aligner verticalement si tailles différentes */
    flex-wrap:nowrap;        /* une seule ligne */
    gap:20px;                /* espace entre les images */
  }

  #equipe .gallery img{
    width:200px;
    height:200px;
    object-fit:contain;      /* image entière visible */
    border-radius:10px;
    background:white;
  }
}

@media(max-width:768px){
  .services{
    display:flex;
    flex-wrap:wrap;          /* 2 lignes possibles */
    justify-content:center;   /* centre horizontalement */
    gap:15px;
    padding:0;
    margin:0 auto;
  }

  .services .card{
    flex:0 0 45%;             /* chaque carte ~45% largeur */
    margin:5px;
  }
}




/* ===================== RESPONSIVE ===================== */
@media (max-width: 1024px) {
    #veterinaires .gallery .vet {
        width: 160px;
        height: 160px;
    }
}
html, body {
    max-width:100%;
    overflow-x:hidden;  /* empêche tout scroll horizontal */
}


@media (max-width: 768px) {
    #veterinaires .gallery {
        flex-wrap: nowrap;
        overflow-x: auto;  /* scroll horizontal sur mobile */
        padding-bottom: 10px;
    }

    #veterinaires .gallery .vet {
        width: 140px;
        height: 140px;
        margin-right: 10px;
    }
}

/* ===================== GALERIES INFORMATIONS ===================== */
#infos .gallery {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
}

#infos .gallery img {
    width: 200px;
    height: 200px;
    object-fit: contain; /* photo entière dans la vignette */
    border-radius: 10px;
    cursor: pointer;
    transition: transform 0.3s;
}

#infos .gallery img:hover {
    transform: scale(1.05);
}

/* ===================== MASCOTTES ===================== */
#mascottes .gallery {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
}

#mascottes .gallery img {
    width: 200px;
    height: 200px;
    object-fit: cover; /* mascottes centrées et remplies */
    border-radius: 10px;
    cursor: pointer;
    transition: transform 0.3s;
}

#mascottes .gallery img:hover {
    transform: scale(1.05);
}

/* ===================== RESPONSIVE ===================== */
@media (max-width: 1024px) {
    #veterinaires .gallery .vet,
    #infos .gallery img,
    #mascottes .gallery img {
        width: 160px;
        height: 160px;
    }
}

@media (max-width: 768px) {
    #veterinaires .gallery,
    #mascottes .gallery,
    #infos .gallery {
        flex-wrap: nowrap;
        overflow-x: auto; /* scroll horizontal */
        padding-bottom: 10px;
    }
    
    #veterinaires .gallery .vet,
    #infos .gallery img,
    #mascottes .gallery img {
        width: 140px;
        height: 140px;
        margin-right: 10px;
    }
}
/* ===== GALERIES RESPONSIVE ===== */
#veterinaires .gallery,
#mascottes .gallery,
#infos .gallery {
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 15px;
    padding-bottom: 10px;
    justify-content: flex-start; /* scroll à gauche */
}

#veterinaires .gallery .vet,
#mascottes .gallery img,
#infos .gallery img,
#clinique .gallery img {
    width: 140px;
    height: 140px;
    flex-shrink: 0; /* empêche de rétrécir */
}

/* ===== SERVICES RESPONSIVE ===== */
#services .services {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    justify-items: center;
}

/* ===== CLINIQUE RESPONSIVE ===== */
#clinique .gallery {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    justify-items: center;
}

/* ===== HEADER / BOUTONS ===== */
header .header-buttons {
    gap: 12px;
}

header .slogan {
    font-size: 16px;
    line-height: 1.3;
}

/* ===== IFRAME MAP ===== */
iframe {
    width: 90%;
    max-width: 400px;
    height: 250px;
    margin: 20px auto;
}

/* ===== YOUTUBE BOUTON ===== */
.youtube a {
    font-size: 14px;
    padding: 10px 12px;
}

/* ===== TEXTES ET CADRES ===== */
.info-box,
.paiement,
.errant,
.urgence-box {
    max-width: 90%;
    margin: 15px auto;
    padding: 12px;
}

/* ===== PETITS AJUSTEMENTS ===== */
h2 { font-size: 20px; }
h3 { font-size: 16px; }


/* ===== MOBILE MAX WIDTH 768px ===== */
@media (max-width: 768px) {

    /* GALERIES VÉTÉRINAIRES, MASCOTTES, INFORMATIONS */
    #veterinaires .gallery,
    #mascottes .gallery,
    #infos .gallery,
    #clinique .gallery {
        display: flex;
        flex-wrap: nowrap;           /* horizontal scroll si nécessaire */
        overflow-x: auto;
        gap: 12px;
        padding: 10px 5px;
        justify-content: flex-start; /* défilement à gauche */
    }

    #veterinaires .gallery .vet,
    #mascottes .gallery img,
    #infos .gallery img,
    #clinique .gallery img {
        width: 140px;
        height: 140px;
        flex-shrink: 0;  /* empêche les images de rétrécir */
        margin-right: 10px;
    }

    /* SERVICES : 2 vignettes par ligne */
    #services .services {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
        justify-items: center;
    }

    /* IFRAME MAP centrée */
    iframe {
        width: 90%;
        max-width: 400px;
        height: 250px;
        margin: 20px auto;
    }

    /* HEADER / BOUTONS */
    header .slogan {
        font-size: 16px;
        line-height: 1.3;
        text-align: center;
    }

    header .header-buttons {
        gap: 12px;
        flex-direction: column;
        align-items: center;
    }

    /* TEXTES ET CADRES */
    .info-box,
    .paiement,
    .errant,
    .urgence-box {
        max-width: 90%;
        margin: 15px auto;
        padding: 12px;
    }

    /* YOUTUBE bouton */
    .youtube a {
        font-size: 14px;
        padding: 10px 12px;
        display: inline-block;
        text-align: center;
    }

    /* TITRES H2/H3 plus lisibles */
    h2 { font-size: 20px; text-align: center; }
    h3 { font-size: 16px; text-align: center; }
}


@media(max-width:768px){
  #equipe .gallery{
    flex-direction:column; /* vertical */
    align-items:center;    /* centré horizontalement */
    gap:20px;
  }
  #equipe .gallery img{
    width:160px;
    height:160px;
  }
}





/* ===================== STYLE GLOBAL ===================== */
body {
    font-family: 'Poppins', sans-serif;
    margin: 0;
    background: linear-gradient(180deg, #FFFFFF, #FFFFFF);
    color: #1c2b3a;
}

body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url("logo.png") center no-repeat;
    background-size: 500px;
    opacity: 0.05;
    pointer-events: none;
    z-index: -1;
}

/* ===================== BANDEAU VERT FONCÉ ===================== */
.bandeau-vacances {
    background: #166534;
    color: white;
    text-align: center;
    padding: 18px;
    font-size: 18px;
    font-weight: 600;
    animation: clignote 1.5s infinite;
}
@keyframes clignote {
    0%, 50%, 100% {opacity: 1;}
    25%, 75% {opacity: 0.5;}
}

/* ===================== HEADER ===================== */
header {
    text-align: center;
    padding: 50px 20px;
    background: #bae6fd; /* bleu ciel très élégant */
    color: #1c2b3a;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}

header h1 {
    color: #1c2b3a;
}

header .slogan {
    color: #1c2b3a;
    font-size: 18px;
    font-weight: 500;
    margin-top: 10px;
}

/* ===================== BOUTONS HEADER ===================== */
.header-buttons {
    margin-top: 25px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    align-items: center;
    max-width: 350px;
    margin-left: auto;
    margin-right: auto;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 55px;
    padding: 12px 20px;
    border-radius: 10px;
    text-decoration: none;
    font-weight: 500;
    text-align: center;
    max-width: 320px;
    width: 100%;
    box-sizing: border-box;
    transition: all 0.3s ease;
    box-shadow: 0 3px 10px rgba(0,0,0,0.15);
    white-space: normal;
}

/* Boutons spécifiques */
.rdv {
    background: #2563eb;
    color: white;
}
.rdv:hover {
    background: #1e4fd1;
}

.boutique {
    background: #22c55e; /* vert boutique */
    color: white;
}
.boutique:hover {
    background: #16a34a;
}

.urgence {
    background: #dc2626;
    color: white;
}
.urgence:hover {
    background: #b91c1c;
}

/* ===================== NAVIGATION ===================== */
nav {
    background: #1e3a8a;
    padding: 12px 0;
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}

nav a {
    color: #bae6fd;
    font-weight: 500;
    text-decoration: none;
    padding: 6px 10px;
    border-radius: 8px;
    border: 1px solid #bae6fd;
    transition: all 0.3s ease;
}

nav a:hover {
    background: #bae6fd;
    color: #1e3a8a;
    transform: translateY(-2px);
}

/* ===================== SECTIONS ===================== */
section {
    padding: 40px 20px;
    max-width: 1100px;
    margin: 30px auto;
    background: #bae6fd;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    border: 1px solid #cbb58c;
}

h2 {
    text-align: center;
    font-size: 22px;
    margin-bottom: 20px;
}

h3 {
    text-align: center;
}

/* ===================== CONTACT ===================== */
.contact-box {
    background: #f0f9ff;
    padding: 20px;
    border-radius: 12px;
    max-width: 400px;
    margin: auto;
    text-align: center;
}

/* ===================== SERVICES ===================== */
.services {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    justify-items: center;
}

.card {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 90px;
    width: 180px;
    padding: 10px;
    border-radius: 12px;
    text-align: center;
    background: linear-gradient(135deg, #2563eb, #1e40af);
    color: white;
    font-weight: 500;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    transition: transform 0.2s, box-shadow 0.2s;
    word-break: break-word;
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 18px rgba(0,0,0,0.2);
}

/* ===================== GALERIES VÉTÉRINAIRES ===================== */
#veterinaires .gallery {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
}

#veterinaires .gallery .vet {
    width: 200px;
    height: 200px;
    background: #f0f9ff;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-direction: column;
    cursor: pointer;
}

#veterinaires .gallery .vet img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
    transition: transform 0.3s;
}

#veterinaires .gallery .vet:hover img {
    transform: scale(1.05);
}

/* ===================== GALERIES MASCOTTES ===================== */
#mascottes .gallery {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
}

#mascottes .gallery img {
    width: 200px;
    height: 200px;
    object-fit: cover;
    border-radius: 10px;
    cursor: pointer;
    transition: transform 0.3s;
}

#mascottes .gallery img:hover {
    transform: scale(1.05);
}

/* ===================== GALERIES CLINIQUE ===================== */
#clinique .gallery {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    justify-items: center;
}

#clinique .gallery img {
    width: 200px;
    height: 200px;
    object-fit: cover;
    border-radius: 10px;
    cursor: pointer;
    transition: transform 0.3s;
}

#clinique .gallery img:hover {
    transform: scale(1.05);
}

/* ===================== GALERIES INFORMATIONS ===================== */
#infos .gallery {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
}

#infos .gallery img {
    width: 200px;
    height: 200px;
    object-fit: contain;
    border-radius: 10px;
    cursor: pointer;
    transition: transform 0.3s;
}

#infos .gallery img:hover {
    transform: scale(1.05);
}

/* ===================== CADRES INFORMATIONS ===================== */
.info-box, .paiement, .errant, .urgence-box {
    background: #f0f9ff;
    border: 1px solid #22c55e;
    border-radius: 12px;
    max-width: 500px;
    margin: 15px auto;
    padding: 15px;
    text-align: center;
}

/* ===================== YOUTUBE ===================== */
.youtube {
    text-align: center;
    margin-top: 20px;
}

.youtube a {
    display: inline-block;
    background: #2563eb;
    color: white;
    font-weight: 500;
    padding: 12px 20px;
    border-radius: 8px;
    text-decoration: none;
}

.youtube a:hover {
    background: #1e4fd1;
}

/* ===================== FOOTER ===================== */
footer {
    background: #1a237e;
    color: white;
    text-align: center;
    padding: 20px;
}

footer a {
    color: white;
    text-decoration: underline;
}

/* ===================== LIGHTBOX ===================== */
#lightbox {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.9);
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

#lightbox img {
    max-width: 90%;
    max-height: 90%;
    border-radius: 10px;
}

#close {
    position: absolute;
    top: 25px;
    right: 40px;
    font-size: 50px;
    color: white;
    cursor: pointer;
}

/* ===================== RESPONSIVE MOBILE ===================== */
@media (max-width: 1024px) {
    #veterinaires .gallery .vet,
    #mascottes .gallery img,
    #infos .gallery img,
    #clinique .gallery img {
        width: 160px;
        height: 160px;
    }
}

@media (max-width: 768px) {

    #veterinaires .gallery,
    #mascottes .gallery,
    #infos .gallery,
    #clinique .gallery {
        flex-wrap: nowrap;
        overflow-x: auto;
        gap: 12px;
        padding: 10px 5px;
        justify-content: flex-start;
    }

    #veterinaires .gallery .vet,
    #mascottes .gallery img,
    #infos .gallery img,
    #clinique .gallery img {
        width: 140px;
        height: 140px;
        flex-shrink: 0;
        margin-right: 10px;
    }

    /* SERVICES : 2 vignettes par ligne */
    #services .services {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
        justify-items: center;
    }

    /* HEADER / BOUTONS */
    header .slogan {
        font-size: 16px;
        line-height: 1.3;
        text-align: center;
    }

    header .header-buttons {
        gap: 12px;
        flex-direction: column;
        align-items: center;
    }

    /* IFRAME MAP */
    iframe {
        width: 90%;
        max-width: 400px;
        height: 250px;
        margin: 20px auto;
    }

    /* TEXTES ET CADRES */
    .info-box,
    .paiement,
    .errant,
    .urgence-box {
        max-width: 90%;
        margin: 15px auto;
        padding: 12px;
    }

    .youtube a {
        font-size: 14px;
        padding: 10px 12px;
        display: inline-block;
        text-align: center;
    }

    h2 { font-size: 20px; text-align: center; }
    h3 { font-size: 16px; text-align: center; }
}


/* ===================== MOBILE : centrer les vétérinaires ===================== */
@media screen and (max-width: 768px) {
    #equipe .gallery {
        display: flex;
        flex-direction: column;   /* empile verticalement */
        align-items: center;      /* centre horizontalement */
        gap: 20px;                /* espace entre les vétérinaires */
        width: 100%;              /* assure que le conteneur prend toute la largeur */
        margin: 0 auto;
    }

    #equipe .gallery .vet {
        width: 100%;              /* chaque vet prend toute la largeur disponible */
        text-align: center;       /* centre le contenu (image + texte) */
    }

    #equipe .gallery .vet img {
        max-width: 80%;           /* ajuste la taille sur mobile */
        height: auto;
        display: inline-block;    /* nécessaire pour text-align center */
        margin: 0 auto;           /* centre l’image */
    }
}





.btn-container {
    text-align: center; /* centre le bouton horizontalement */
    margin: 20px 0;    /* espace autour du bouton */
}

.bouton-bounce {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 25px;
    background-color: #006400; /* vert foncé */
    color: white;              /* texte blanc */
    font-weight: bold;
    text-decoration: none;
    border-radius: 50px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    transition: transform 0.2s, box-shadow 0.2s;
    position: relative;
    overflow: hidden;
    font-size: 1rem;
}

.bouton-bounce:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.3);
}

.bouton-bounce:active {
    animation: bounce 0.3s;
}

@keyframes bounce {
    0%   { transform: translateY(0); }
    30%  { transform: translateY(-8px); }
    50%  { transform: translateY(0); }
    70%  { transform: translateY(-4px); }
    100% { transform: translateY(0); }
}

.bouton-bounce .icone {
    display: inline-block;
    font-size: 1.2em;
    transition: transform 0.2s;
}

.bouton-bounce:hover .icone {
    transform: rotate(20deg);
}

/* Media query pour mobile */
@media (max-width: 600px) {
    .bouton-bounce {
        padding: 10px 20px;
        font-size: 0.9rem;
        gap: 8px;
    }

    .bouton-bounce .icone {
        font-size: 1em;
    }
}



/* ===== FIX BOUTON MOBILE + PC ===== */
.btn-container {
    text-align: center;
    margin: 20px 0;
}

a.bouton-bounce {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 25px;

    background-color: #006400 !important; /* vert foncé */
    color: #ffffff !important;            /* texte blanc */

    text-decoration: none !important;
    border-radius: 50px;
    font-weight: bold;

    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

/* hover PC */
a.bouton-bounce:hover {
    background-color: #008000 !important;
}

/* sécurité mobile */
@media (max-width: 600px) {
    a.bouton-bounce {
        display: inline-flex !important;
        background-color: #006400 !important;
        color: #ffffff !important;
        text-decoration: none !important;
    }
}





/* ===== BOUTON FICHES CONSEILS - PC & MOBILE ===== */
a.bouton-bounce,
a.bouton-bounce:visited,
a.bouton-bounce:hover,
a.bouton-bounce:active {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px; /* espace entre icône et texte */

    background-color: #006400 !important; /* vert foncé */
    color: #ffffff !important;            /* texte blanc */

    text-decoration: none !important;
    border-radius: 50px !important;
    padding: 12px 25px !important;
    font-weight: bold !important;
    font-size: 1rem !important;

    box-shadow: 0 5px 15px rgba(0,0,0,0.2) !important;
}

/* icône dans le bouton */
a.bouton-bounce .icone {
    display: inline-block !important;
    font-size: 1.2em !important;
    transition: transform 0.2s;
    vertical-align: middle;
}

/* hover */
a.bouton-bounce:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.3);
}

a.bouton-bounce:hover .icone {
    transform: rotate(20deg);
}

/* bounce à l'appui */
a.bouton-bounce:active {
    animation: bounce 0.3s;
}
@keyframes bounce {
    0%   { transform: translateY(0); }
    30%  { transform: translateY(-8px); }
    50%  { transform: translateY(0); }
    70%  { transform: translateY(-4px); }
    100% { transform: translateY(0); }
}

/* CENTRAGE */
.btn-container {
    text-align: center !important;
    margin: 20px 0 !important;
}

/* ===== MOBILE ===== */
@media (max-width: 768px) {
    a.bouton-bounce {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        background-color: #006400 !important;
        color: #ffffff !important;
        text-decoration: none !important;
        padding: 10px 20px !important;
        font-size: 0.9rem !important;
        border-radius: 50px !important;
    }

    a.bouton-bounce .icone {
        display: inline-block !important;
        font-size: 1em !important;
    }
}



/* ===================== ESPACE ENTRE LES BLOCS SUR MOBILE ===================== */
@media (max-width: 768px) {
    #infos .gallery,
    #fiches-conseils,
    #especes-soignees {
        display: flex;
        flex-direction: column; /* empile verticalement */
        align-items: center;    /* centrer horizontalement */
        gap: 20px;              /* espace entre les blocs */
        margin: 20px auto;
        width: 100%;
    }

    #infos .gallery .info-card,
    #fiches-conseils,
    #especes-soignees {
        width: 90%;             /* chaque bloc prend 90% de la largeur mobile */
    }
}

/* ===================== BOUTON VERT FICHES CONSEILS MOBILE ===================== */
a.bouton-bounce,
a.bouton-bounce:visited,
a.bouton-bounce:hover,
a.bouton-bounce:active {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px;

    background-color: #006400 !important; /* vert foncé */
    color: #ffffff !important;            /* texte blanc */
    text-decoration: none !important;

    padding: 12px 25px !important;
    font-weight: bold !important;
    font-size: 1rem !important;
    border-radius: 50px !important;

    box-shadow: 0 5px 15px rgba(0,0,0,0.2) !important;
}

/* icône dans le bouton */
a.bouton-bounce .icone {
    display: inline-block !important;
    font-size: 1.2em !important;
    vertical-align: middle;
    transition: transform 0.2s;
}

/* hover & active */
a.bouton-bounce:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.3);
}
a.bouton-bounce:hover .icone {
    transform: rotate(20deg);
}
a.bouton-bounce:active {
    animation: bounce 0.3s;
}
@keyframes bounce {
    0%   { transform: translateY(0); }
    30%  { transform: translateY(-8px); }
    50%  { transform: translateY(0); }
    70%  { transform: translateY(-4px); }
    100% { transform: translateY(0); }
}

/* CENTRAGE DU BOUTON */
.btn-container {
    text-align: center !important;
    margin: 20px 0 !important;
}

/* AJUSTEMENT MOBILE */
@media (max-width: 768px) {
    a.bouton-bounce {
        font-size: 0.9rem !important;
        padding: 10px 20px !important;
    }
    a.bouton-bounce .icone {
        font-size: 1em !important;
    }
}




/* ===================== BOUTON VERT MOBILE ===================== */
@media (max-width: 768px) {
    #infos .info-card:nth-child(2) a {
        display: inline-flex !important;     /* transforme le lien en bouton */
        align-items: center;
        justify-content: center;
        gap: 10px;
        background-color: #006400;          /* vert foncé */
        color: #ffffff;                     /* texte blanc */
        padding: 12px 25px;
        font-weight: bold;
        font-size: 1rem;
        border-radius: 50px;
        text-decoration: none;
        box-shadow: 0 5px 15px rgba(0,0,0,0.2);
        transition: transform 0.2s, box-shadow 0.2s;
    }

    #infos .info-card:nth-child(2) a:hover {
        transform: translateY(-3px);
        box-shadow: 0 8px 20px rgba(0,0,0,0.3);
    }

    #infos .info-card:nth-child(2) .icone {
        font-size: 1.2em;
        transition: transform 0.2s;
    }

    #infos .info-card:nth-child(2) a:hover .icone {
        transform: rotate(20deg);
    }

    /* centre le bouton */
    #infos .info-card:nth-child(2) .btn-container {
        text-align: center;
        margin-top: 15px;
    }
}






/* ===================== BOUTON VERT MOBILE ===================== */
@media (max-width: 768px) {
    /* cibler le lien "Accéder aux Fiches conseils" dans #infos */
    #infos a[href="https://www.pilepoils.vet/fiches-conseils"] {
        display: inline-flex !important;  /* transforme le lien en bouton */
        align-items: center;
        justify-content: center;
        gap: 8px;
        background-color: #006400;       /* vert foncé */
        color: #fff !important;          /* texte blanc */
        padding: 12px 25px;
        font-weight: bold;
        font-size: 1rem;
        border-radius: 50px;
        text-decoration: none;
        box-shadow: 0 5px 15px rgba(0,0,0,0.2);
        transition: transform 0.2s, box-shadow 0.2s;
        margin: 15px auto;
    }

    #infos a[href="https://www.pilepoils.vet/fiches-conseils"]:hover {
        transform: translateY(-3px);
        box-shadow: 0 8px 20px rgba(0,0,0,0.3);
    }
}









/* ===================== BOUTON VERT MOBILE ===================== */
@media (max-width: 768px) {
    .btn-container .bouton-bounce {
        display: inline-flex !important;       /* assure que c'est bien un bouton */
        justify-content: center;               /* centre le texte et l'icône */
        align-items: center;
        background-color: #006400 !important;  /* vert foncé */
        color: white !important;               /* texte blanc */
        padding: 12px 25px !important;
        border-radius: 50px !important;
        font-weight: bold;
        text-decoration: none !important;
        box-shadow: 0 5px 15px rgba(0,0,0,0.2);
        margin: 20px auto;                     /* espace autour */
        font-size: 1rem;
    }

    /* Hover pour mobile */
    .btn-container .bouton-bounce:hover {
        transform: translateY(-3px);
        box-shadow: 0 8px 20px rgba(0,0,0,0.3);
    }

    .btn-container .bouton-bounce .icone {
        margin-right: 8px;
        font-size: 1.2em;
    }
}







@media (max-width: 768px) {
    .btn-container .bouton-bounce {
        display: inline-flex !important;
        justify-content: center !important;
        align-items: center !important;
        background-color: #006400 !important;
        color: white !important;
        padding: 12px 25px !important;
        border-radius: 50px !important;
        font-weight: bold !important;
        text-decoration: none !important;
        box-shadow: 0 5px 15px rgba(0,0,0,0.2) !important;
        margin: 20px auto !important;
        font-size: 1rem !important;
        cursor: pointer !important;
    }

    .btn-container .bouton-bounce:hover {
        transform: translateY(-3px) !important;
        box-shadow: 0 8px 20px rgba(0,0,0,0.3) !important;
    }

    .btn-container .bouton-bounce .icone {
        margin-right: 8px !important;
        font-size: 1.2em !important;
    }
}




@media (max-width: 820px) {
    .btn-container .bouton-bounce {
        display: inline-flex !important;
        justify-content: center !important;
        align-items: center !important;
        background-color: #006400 !important;
        color: white !important;
        padding: 12px 25px !important;
        border-radius: 50px !important;
        font-weight: bold !important;
        text-decoration: none !important;
        box-shadow: 0 5px 15px rgba(0,0,0,0.2) !important;
        margin: 20px auto !important;
        font-size: 1rem !important;
        cursor: pointer !important;
    }
}





/* ===================== BOUTON ORANGE ANIVET ===================== */

/* conteneur du bouton (corrigé) */
.container-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 20px 0; /* espace propre au lieu du grand vide */
}

/* bouton */
.btn-voyage {
  background-color: orange;
  color: black;
  text-decoration: none;
  padding: 14px 26px;
  font-size: 18px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: transform 0.2s ease, background-color 0.3s;
  animation: pulse 2s infinite;
}

/* animation respiration */
@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

/* icône avion */
.btn-voyage .icon {
  transition: transform 0.4s ease;
}

/* hover */
.btn-voyage:hover {
  background-color: darkorange;
  transform: scale(1.08);
}

.btn-voyage:hover .icon {
  transform: translateX(8px) rotate(15deg);
}

/* responsive mobile */
@media (max-width: 600px) {
  .btn-voyage {
    width: 90%;
    font-size: 16px;
    padding: 12px;
    justify-content: center;
  }
}

/* corrige aussi les marges des paragraphes */
p {
  margin: 10px 0;
}



/* ===================== chien et chat heaader ===================== */

.header {
    display: flex;
    justify-content: center;
}

.header-content {
    display: flex;
    align-items: center;
}

.text-block {
    text-align: center;
}

/* images collées très près du texte */
.side-img {
    width: 90px;       /* taille PC */
    margin: 0 5px;     /* très proche du texte */
}

.logo {
    width: 70px;
    margin-bottom: 5px;
}

.slogan {
    font-style: italic;
    margin-top: 5px;
}


/* ===================== chien et chat heaader MOBILE ===================== */

@media (max-width: 600px) {
    .header-content {
        flex-direction: column;  /* empile pour mobile */
    }

    .side-img {
        width: 50px;
        margin: 5px 0;           /* proche du texte mais empilé */
    }

    h1 {
        font-size: 16px;
    }

    .logo {
        width: 50px;
    }
}



/* ===================== chien et chat heaader modifications===================== */



.header {
    display: flex;
    justify-content: center;
}

.header-content {
    display: flex;
    align-items: center;
}

.text-block {
    text-align: center;
}

/* images chien/chat plus grandes */
.side-img {
    width: 110px;           /* un peu plus grandes */
}

/* marges pour distance égale du titre */
.side-img.left {
    margin-right: 15px;     /* espace à droite du chien vers le texte */
}

.side-img.right {
    margin-left: 15px;      /* espace à gauche du chat vers le texte */
}

/* logo plus grand */
.logo {
    width: 140px;           /* agrandi */
    margin-bottom: 5px;
}

.slogan {
    font-style: italic;
    margin-top: 5px;
}

/* responsive mobile */
@media (max-width: 600px) {
    .header-content {
        flex-direction: column;
    }

    .side-img {
        width: 70px;         /* réduit sur mobile */
        margin: 5px 0;
    }

    .logo {
        width: 90px;
    }

    h1 {
        font-size: 16px;
    }
}



/* ===================== THEMES MENU NAIVATION RESPONSIVE MOBILE===================== */




.header-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px; /* espace entre images et texte */
    flex-wrap: nowrap; /* garde en ligne sur PC */
}

.side-img, .logo {
    max-width: 100%;
    height: auto;
    width: 90px;  /* taille par défaut PC */
}

.text-block {
    text-align: center;
}

/* Mobile : empile verticalement et réduit taille images */
@media (max-width: 600px) {
    .header-content {
        flex-direction: column;
        gap: 8px;
    }

    .side-img, .logo {
        width: 60px; /* réduit taille sur mobile */
    }

    h1 {
        font-size: 16px;
    }
}



/* ===================== THEMES MENU NAIVATION RESPONSIVE MOBILE===================== */

.menu {
  display: flex;
  justify-content: center;
  flex-wrap: wrap; /* permet le passage à la ligne */
  background-color: #1c3b8d; /* couleur bleu foncé */
  padding: 10px 0;
  gap: 10px;
}

.menu a {
  display: inline-block;
  background-color: #55b0f3; /* bleu clair */
  color: white;
  padding: 10px 20px;
  text-decoration: none;
  border-radius: 8px;
  text-align: center;
  min-width: 100px;
}

/* MOBILE : forcer 3 boutons par ligne */
@media (max-width: 768px) {
  .menu a {
    flex: 1 1 calc(33.333% - 20px); /* 3 par ligne avec gap */
    box-sizing: border-box;
  }
}



/* ===================== REMPLACER LE FOND BLEU CIEL===================== */

/* Reset basique */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    background-color: #f5f5f5; /* fond général */
}

/* =========================
   Bandeau Header
   ========================= */
.header-banner {
    width: 100%;
    height: 500px;                  /* hauteur fixe PC */
    background-image: url('bandeau.jpg');
    background-repeat: no-repeat;
    background-position: center center; /* centre verticalement */
    background-size: contain;           /* toute l'image visible, pas de troncature */
    filter: brightness(1.2);
}

/* Responsive tablette */
@media (max-width: 768px) {
    .header-banner {
        height: 300px;
        background-size: contain;
        background-color: #4fc3f7;  /* bleu-turquoise si bandes latérales */
    }
}

/* Responsive mobile */
@media (max-width: 480px) {
    .header-banner {
        height: 200px;
        background-size: contain;
        background-color: #4fc3f7;  
    }
}

/* =========================
   Menu / liens sous le bandeau
   ========================= */
.header-menu {
    text-align: center;
    padding: 15px 0;
    /* Dégradé irisé bleu-turquoise, bleu ciel, blanc, bleu marine */
    background: linear-gradient(
        to right,
        #4fc3f7,  /* bleu turquoise */
        #7dd3fc,  /* bleu ciel */
        #ffffff,  /* blanc central */
        #6aa1b5,  /* bleu turquoise foncé */
        #0d3b66   /* bleu marine */
    );
    background-size: 400% 100%; /* option pour irisé léger */
}

/* Liens du menu */
.header-menu a {
    color: white;
    text-decoration: none;
    margin: 0 15px;
    font-weight: bold;
    font-size: 16px;
}

/* =========================
   Sections (CONTACT / SERVICES / VÉTÉRINAIRES)
   ========================= */
section {
    padding: 40px 20px;
    max-width: 1100px;
    margin: 30px auto;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    /* Dégradé assorti au bandeau */
    background: linear-gradient(
        to right,
        #4fc3f7,
        #7dd3fc,
        #ffffff,
        #6aa1b5,
        #0d3b66
    );
}

/* Titres des sections */
h2 {
    text-align: center;
    font-size: 22px;
    margin-bottom: 20px;
}

/* ===================== BOUTON ROUGE BAS CHRONOVET===================== */

/* BOUTON CHRONOVET - général (PC) */
.btn-chronovet {
    font-size: 16px;        /* taille PC */
    line-height: 1.2;
    text-align: center;
}

.btn-chronovet .mobile-break {
    display: inline; /* INLINE par défaut → reste sur la même ligne sur PC */
}

/* MOBILE uniquement */
@media (max-width: 768px) {
    .btn-chronovet {
        font-size: 13px;
        line-height: 1.2;
    }

    .btn-chronovet .mobile-break {
        display: block; /* bloc uniquement sur mobile → force le retour à la ligne */
    }
}





/* ===================== BOUTON CHRONOVET ===================== */
.btn-chronovet {
    display: inline-block;
    font-size: 16px;          /* PC */
    line-height: 1.2;
    text-align: center;
    padding: 10px 20px;
    background-color: #e74c3c; /* rouge */
    color: #fff;
    border-radius: 8px;
    text-decoration: none;
    transition: background 0.3s;
}

.btn-chronovet:hover {
    background-color: #c0392b;
}

.btn-chronovet .mobile-break {
    display: inline; /* PC : reste sur la même ligne */
}

/* MOBILE uniquement */
@media (max-width: 768px) {
    .btn-chronovet {
        font-size: 13px;
        padding: 8px 16px;
        line-height: 1.2;
    }

    .btn-chronovet .mobile-break {
        display: block; /* mobile : force le retour à la ligne */
    }

    /* Centrage du bouton dans son bloc */
    .youtube-btn-wrapper {
        text-align: center;
        margin: 20px 0;
    }
}


/* FOOTER - bandeau bleu marine fixe en bas */
footer {
    background-color: #1a2a40; /* bleu marine */
    color: #ffffff;            /* texte blanc */
    text-align: center;        /* centré horizontalement */
    padding: 15px 10px;
    font-size: 14px;
    font-family: Arial, sans-serif;
    width: 100%;               /* prend toute la largeur */
    box-sizing: border-box;    /* inclut le padding */
}
footer a {
    color: #ffffff;            /* lien blanc */
    text-decoration: underline;
}
footer a:hover {
    color: #f1c40f;            /* couleur jaune au hover */
}




/* ===================== FOOTER BLEU MARINE ===================== */
footer {
    background-color: #1a2a40; /* bleu marine */
    color: #ffffff;            /* texte blanc */
    text-align: center;        /* centré horizontalement */
    padding: 15px 10px;        /* espace autour du texte */
    font-size: 14px;
    font-family: Arial, sans-serif;
    width: 100%;
    box-sizing: border-box;
}

footer a {
    color: #ffffff;            /* lien blanc */
    text-decoration: underline;
}

footer a:hover {
    color: #f1c40f;            /* jaune au survol */
}


/* ===================== RENVOI BOUTON VERS SECTION===================== */

html {
  scroll-behavior: auto;
}



/* ===================== NOM MASCOTTES===================== */

.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 25px;
    padding: 20px;
}

.mascotte {
    text-align: center;
    background: #ffffff;
    border-radius: 15px;
    padding: 10px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.mascotte img {
    width: 100%;
    height: auto;
    border-radius: 10px;
}

.mascotte p {
    margin-top: 10px;
    font-weight: bold;
    font-size: 1.1rem;
    letter-spacing: 1px;
}

/* ✨ Effet au survol */
.mascotte:hover {
    transform: translateY(-8px) scale(1.03);
    box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}



/* ===================== LIEN SERVICES IMAGES==================== */




/* Réduction de l'espace entre services et image */
.services {
    margin-bottom: 10px;
}

/* Image du service */
.service-image {
    margin: 20px auto 30px;
    text-align: center;
}

/* Image responsive + rendu propre */
.service-image img {
    width: 100%;
    max-width: 600px;
    border-radius: 15px;
    transition: opacity 0.3s ease;
    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}





.service-image img {
    width: 100%;
    max-width: 400px; /* ⬅️ réduit la taille */
    border-radius: 15px;
    transition: opacity 0.3s ease;
}









/* CURSEUR ET STYLE VIGNETTES */
.card {
    cursor: pointer;       /* main au survol pour indiquer cliquable */
    user-select: none;     /* empêche de sélectionner le texte par erreur */
}

/* EFFET HOVER MODERNE */
.card:hover {
    transform: scale(1.05);               
    box-shadow: 0 8px 20px rgba(0,0,0,0.2); 
    background-color: #f0f0f0;             
    transition: all 0.3s ease;            
}






/* ===================== NOM VETERINAIRES==================== */

/* Section des vétérinaires */
#equipe {
    text-align: center;
    padding: 30px;
}

/* Galerie de vignettes en grille */
.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 25px;
    padding: 20px;
}

/* Style de chaque vignette */
.mascotte {
    text-align: center;
    background: #ffffff;
    border-radius: 15px;
    padding: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Image dans la vignette */
.mascotte img {
    width: 100%;
    height: auto;
    border-radius: 10px;
}

/* Texte sous l'image (nom du vétérinaire) */
.mascotte p {
    margin-top: 10px;
    font-weight: bold;
    font-size: 1.1rem;
    letter-spacing: 1px;
}

/* ✨ Effet au survol */
.mascotte:hover {
    transform: translateY(-8px) scale(1.03);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}




/* ===================== LIEN SERVICES IMAGES==================== */






/* Section des services */
#services {
    text-align: center;
    padding: 30px;
}

/* Conteneur des services */
.services {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 20px;
    padding: 20px;
}

/* Style de chaque carte de service */
.card {
    background: #ffffff;
    border-radius: 15px;
    padding: 20px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    font-weight: bold;
    font-size: 1.1rem;
}

/* ✨ Effet au survol des cartes */
.card:hover {
    transform: translateY(-8px) scale(1.05);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

/* Conteneur d'image */
.service-image {
    margin-top: 20px;
}

.service-image img {
    width: 100%;
    max-width: 800px;
    height: auto;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    transition: opacity 0.3s ease;
}


-------CSS pour restaurer la couleur bleue des vignettes------------

/* Style des cartes de service (vignettes) */
.card {
    display: inline-block;  /* Pour que les cartes s'affichent les unes à côté des autres */
    background-color: #007bff;  /* Fond bleu par défaut */
    color: white;  /* Texte en blanc */
    border-radius: 15px;  /* Coins arrondis */
    padding: 20px;  /* Espacement intérieur */
    box-sizing: border-box;  /* Inclut le padding dans la taille totale */
    width: 150px;  /* Largeur de la carte */
    height: 150px;  /* Hauteur de la carte */
    text-align: center;  /* Centrer le texte */
    margin: 10px;  /* Espacement entre les cartes */
    cursor: pointer;  /* Curseur en forme de main sur les vignettes */
    font-weight: bold;  /* Texte en gras */
    font-size: 1.1rem;  /* Taille de la police pour que le texte soit visible */
    transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;  /* Transition pour l'animation */
}

/* Effet au survol des cartes */
.card:hover {
    background-color: #0056b3;  /* Bleu plus foncé lors du survol */
    transform: translateY(-8px) scale(1.05);  /* Légère élévation et zoom */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);  /* Ombre plus marquée */
}

/* Conteneur des cartes pour aligner les vignettes */
.services {
    display: flex;  /* Utilise Flexbox pour disposer les cartes */
    flex-wrap: wrap;  /* Permet aux cartes de passer à la ligne suivante si nécessaire */
    justify-content: space-around;  /* Répartit les cartes de manière égale */
    gap: 20px;  /* Espacement entre les cartes */
    padding: 20px;  /* Espacement interne du conteneur */
}

-------------------CSS pour ajuster la taille de l'image :------------------

/* Conteneur d'image */
.service-image {
    margin-top: 20px;
    text-align: center;  /* Centrer l'image */
}

/* Image dans la section du service */
.service-image img {
    width: 100%;  /* S'adapte à la largeur du conteneur */
    max-width: 500px;  /* Taille maximale de l'image */
    height: auto;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    transition: opacity 0.3s ease;
}



-------------------VIGNETTES SERVICES BLEU MARINE -------------------------

/* Conteneur des cartes */
.services {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    gap: 20px;
    padding: 20px;
}

/* Style des cartes de service (vignettes) */
.card {
    display: inline-block;
    background-color: #003366; /* Bleu marine foncé */
    color: white;
    border-radius: 15px;
    padding: 20px;
    box-sizing: border-box;
    width: 150px;
    height: 150px;
    text-align: center;
    margin: 10px;
    cursor: pointer;
    font-weight: bold;
    font-size: 1.1rem;
    transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

/* Effet au survol : bleu plus clair et animation */
.card:hover {
    background-color: #0056b3; /* Bleu plus clair au survol */
    transform: translateY(-8px) scale(1.05);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}


--------------------------------------------------------------


.services {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between; /* ou space-around selon préférence */
    gap: 20px;
    padding: 20px;
}

.card {
    display: inline-block;
    background-color: #003366; /* bleu marine */
    color: white;
    border-radius: 25px; /* coins bien arrondis, augmente si besoin */
    padding: 20px;
    box-sizing: border-box;
    width: 150px;
    height: 100px; /* taille d’origine plus compacte */
    text-align: center;
    margin: 10px 0;
    cursor: pointer;
    font-weight: bold;
    font-size: 1.1rem;
    transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

/* Effet au survol */
.card:hover {
    background-color: #0056b3; /* bleu plus clair */
    transform: translateY(-8px) scale(1.05);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}


-----------------------------------------------


/* Conteneur des cartes */
.services {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between; /* ou space-around selon ton goût */
    gap: 20px;
    padding: 20px;
}

/* Style des cartes de service (vignettes) */
.card {
    display: flex;               /* Flexbox pour centrer le contenu */
    flex-direction: column;      /* Permet le centrage vertical avec align-items */
    justify-content: center;     /* Centre verticalement le texte */
    align-items: center;         /* Centre horizontalement le texte */
    
    background-color: #003366;   /* Bleu marine */
    color: white;
    border-radius: 25px;         /* Coins arrondis */
    padding: 20px;
    box-sizing: border-box;
    width: 150px;
    height: 100px;               /* Hauteur compacte */
    margin: 10px 0;
    cursor: pointer;
    font-weight: bold;
    font-size: 1.1rem;
    text-align: center;
    
    transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

/* Effet au survol */
.card:hover {
    background-color: #0056b3;  /* Bleu plus clair au survol */
    transform: translateY(-8px) scale(1.05);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

--------------------------------------------------------------------------------------


/* Conteneur des cartes */
.services {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between; /* ou space-around selon ton goût */
    gap: 20px;
    padding: 20px;
}

/* Style des cartes de service (vignettes) */
.card {
    display: flex;               /* Flexbox pour centrer le contenu */
    flex-direction: column;      /* Permet le centrage vertical avec align-items */
    justify-content: center;     /* Centre verticalement le texte */
    align-items: center;         /* Centre horizontalement le texte */
    
    background-color: #4169E1;   /* Bleu roi */
    color: white;
    border-radius: 25px;         /* Coins arrondis */
    padding: 20px;
    box-sizing: border-box;
    width: 150px;
    height: 100px;               /* Hauteur compacte */
    margin: 10px 0;
    cursor: pointer;
    font-weight: bold;
    font-size: 1.1rem;
    text-align: center;
    
    transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

/* Effet au survol */
.card:hover {
    background-color: #1E90FF;  /* Bleu un peu plus clair au survol */
    transform: translateY(-8px) scale(1.05);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}









-------------------------------------------------------------------------



/* Conteneur des cartes */
.services {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between; /* ou space-around */
    gap: 20px;
    padding: 20px;
}

/* Style des cartes */
.card {
    display: flex;               /* Flexbox pour centrer le contenu */
    justify-content: center;     /* Centre verticalement le texte */
    align-items: center;         /* Centre horizontalement le texte */
    background-color: #4169E1;   /* Bleu roi */
    color: white;
    border-radius: 25px;         /* Coins arrondis */
    padding: 20px;
    box-sizing: border-box;
    width: 150px;
    height: 100px;               /* Hauteur compacte */
    cursor: pointer;
    font-weight: bold;
    font-size: 1.1rem;
    text-align: center;
    transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

/* Emoji et texte alignés sur la même ligne */
.card-content {
    display: inline-flex;       /* Contenu sur une ligne */
    align-items: center;        /* Centrage vertical emoji + texte */
    gap: 5px;                   /* Espace entre emoji et texte */
}

/* Effet au survol */
.card:hover {
    background-color: #1E90FF;  /* Bleu plus clair au survol */
    transform: translateY(-8px) scale(1.05);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

/* Responsive : vignettes plus petites sur mobile */
@media (max-width: 600px) {
    .card {
        width: 45%;      /* Deux cartes par ligne */
        height: 90px;
        font-size: 1rem;
    }
    .services {
        justify-content: center;
    }
}
-----------------------------------------------------------------------


/* Conteneur des cartes */
.services {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 20px;
    padding: 20px;
}

/* Cartes */
.card {
    display: flex;               /* Flex pour centrer le contenu */
    justify-content: center;
    align-items: center;
    background-color: #4169E1;   /* Bleu roi */
    color: white;
    border-radius: 25px;
    padding: 20px;
    box-sizing: border-box;
    width: 150px;
    height: 100px;
    cursor: pointer;
    font-weight: bold;
    font-size: 1.1rem;
    text-align: center;
    transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

/* Contenu emoji + texte */
.card-content {
    display: flex;        /* Flex horizontal */
    align-items: center;  /* Centre vertical emoji + texte */
    gap: 5px;             /* Espace entre emoji et texte */
}

/* Optionnel : rendre emoji un peu plus grand si besoin */
.emoji {
    font-size: 1.2rem;
}

/* Survol des cartes */
.card:hover {
    background-color: #1E90FF;
    transform: translateY(-8px) scale(1.05);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

/* Responsive pour mobile */
@media (max-width: 600px) {
    .card {
        width: 45%; 
        height: 90px;
        font-size: 1rem;
    }
    .services {
        justify-content: center;
    }
}



------------------------------------------------------






/* Conteneur des cartes */
.services {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 20px;
    padding: 20px;
}

/* Cartes */
.card {
    display: flex;               
    justify-content: center;
    align-items: center;
    background-color: #4169E1;   /* Bleu roi */
    color: white;
    border-radius: 25px;
    padding: 20px;
    box-sizing: border-box;
    width: 170px;                /* Largeur un peu plus grande pour éviter les textes sur 2 lignes */
    height: 100px;
    cursor: pointer;
    font-weight: bold;
    font-size: 1.1rem;
    text-align: center;
    transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

/* Contenu emoji + texte */
.card-content {
    display: flex;        /* Flex horizontal */
    align-items: center;  /* Centre vertical emoji + texte */
    gap: 5px;             /* Espace entre emoji et texte */
}

/* Emoji légèrement plus grand */
.emoji {
    font-size: 1.2rem;
}

/* Survol des cartes */
.card:hover {
    background-color: #1E90FF;
    transform: translateY(-8px) scale(1.05);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

/* Responsive pour mobile */
@media (max-width: 600px) {
    .card {
        width: 48%;   /* Deux cartes par ligne, un peu plus large que précédemment */
        height: 90px;
        font-size: 1rem;
    }
    .services {
        justify-content: center;
    }
}

-------------------------------------------------------

/* Conteneur des cartes */
.services {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 20px;
    padding: 20px;
}

/* Cartes */
.card {
    display: flex;               
    justify-content: center;
    align-items: center;
    background-color: #4169E1;   
    color: white;
    border-radius: 25px;
    padding: 20px;
    box-sizing: border-box;
    width: 190px;                /* Largeur augmentée pour tenir le texte et emoji sur une ligne */
    height: 100px;
    cursor: pointer;
    font-weight: bold;
    font-size: 1.1rem;
    text-align: center;
    transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

/* Contenu emoji + texte */
.card-content {
    display: flex;        
    align-items: center;  
    gap: 5px;             
}

/* Emoji légèrement plus grand */
.emoji {
    font-size: 1.2rem;
}

/* Survol des cartes */
.card:hover {
    background-color: #1E90FF;
    transform: translateY(-8px) scale(1.05);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

/* Responsive pour mobile */
@media (max-width: 600px) {
    .card {
        width: 48%;   /* 2 cartes par ligne */
        height: auto; /* hauteur auto pour ajuster au texte si nécessaire */
        font-size: 1rem;
        padding: 15px;
    }
}









/* ================= MOBILE: force horizontal pour NOS SERVICES ================= */


@media (max-width: 768px) {
  .vignette {
    width: 90% !important;
    height: auto !important;
    padding: 20px !important;
  }

  .vignette * {
    writing-mode: horizontal-tb !important;
    transform: none !important;
    white-space: normal !important;
    word-break: keep-all !important;
    text-align: center;
  }
}




@media (max-width: 768px) {
  .card {
    writing-mode: horizontal-tb !important;
    transform: none !important;
    width: 100% !important;
    height: auto !important;
  }

  .card * {
    writing-mode: horizontal-tb !important;
    white-space: normal !important;
    word-break: keep-all !important;
    text-align: center;
  }
}