/* vet-details-page.css — CSS de la fiche vétérinaire, extrait de vet_details.blade.php le 22/08/2026
   (2 blocs <style> inline de ~72 Ko réinjectés dans chaque HTML ; désormais mis en cache navigateur).
   Source de vérité : ce fichier. */

/* Grille de publications style Instagram */
        .publications-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 4px;
            margin: 0;
        }

        /* Style pour le conteneur de l'onglet Publications avec scroll */
        #publications .card-body {
            max-height: none;
            overflow: visible;
        }

        #publications .card-body::-webkit-scrollbar {
            width: 8px;
        }

        #publications .card-body::-webkit-scrollbar-track {
            background: #f1f1f1;
            border-radius: 10px;
        }

        #publications .card-body::-webkit-scrollbar-thumb {
            background: #888;
            border-radius: 10px;
        }

        #publications .card-body::-webkit-scrollbar-thumb:hover {
            background: #555;
        }

        .publications-grid__item {
            position: relative;
            display: block;
            aspect-ratio: 1 / 1;
            overflow: hidden;
            background: #f0f2f5;
            text-decoration: none;
            color: inherit;
        }

        .publications-grid__image {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
            transition: transform 0.3s ease;
        }

        .publications-grid__item:hover .publications-grid__image {
            transform: scale(1.05);
        }

        .publications-grid__placeholder {
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 1rem;
            text-align: center;
            background: #e4e6eb;
            color: #65676b;
        }

        .publications-grid__placeholder i {
            font-size: 2rem;
            margin-bottom: 0.5rem;
        }

        .publications-grid__overlay {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.5);
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        .publications-grid__item:hover .publications-grid__overlay {
            opacity: 1;
        }

        .publications-grid__stats {
            color: white;
            font-weight: 600;
            font-size: 1rem;
            display: flex;
            align-items: center;
        }

        .publications-grid__stats i {
            margin-right: 0.5rem;
        }

        /* Responsive mobile - 2 colonnes */
        @media (max-width: 767.98px) {
            .publications-grid {
                grid-template-columns: repeat(2, 1fr);
                gap: 2px;
            }

            .publications-grid__stats {
                font-size: 0.875rem;
            }

            .publications-grid__placeholder {
                padding: 0.5rem;
            }

            .publications-grid__placeholder i {
                font-size: 1.5rem;
            }

            .publications-grid__placeholder p {
                font-size: 0.75rem;
            }
        }

        /* Tablette - 3 colonnes */
        @media (min-width: 768px) and (max-width: 991.98px) {
            .publications-grid {
                grid-template-columns: repeat(3, 1fr);
                gap: 3px;
            }
        }

        /* CSS du modal de publication */
        body.publication-modal-open {
            overflow: hidden;
        }

        .publication-modal__backdrop {
            position: fixed;
            inset: 0;
            z-index: 1040;
            background: rgba(244, 244, 244, 0.8);
            backdrop-filter: blur(5px);
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.25s ease, visibility 0.25s ease;
        }

        .publication-modal__backdrop.is-open {
            opacity: 1;
            visibility: visible;
        }

        .publication-modal {
            position: fixed;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 1.5rem;
            inset: 0;
            z-index: 1050;
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.25s ease, visibility 0.25s ease;
        }

        .publication-modal.is-open {
            opacity: 1;
            visibility: visible;
        }

        .publication-modal__dialog {
            width: min(1040px, 100%);
            max-height: min(90vh, 780px);
            height: min(90vh, 780px);
            display: flex;
            background: #fff;
            border-radius: 0.5rem;
            overflow: hidden;
            position: relative;
            box-shadow: 0 12px 28px 0 rgba(0, 0, 0, 0.2), 0 2px 4px 0 rgba(0, 0, 0, 0.1);
        }

        .publication-modal__close {
            position: absolute;
            top: 1rem;
            right: 1rem;
            border: 0;
            background: rgba(15, 23, 42, 0.65);
            color: #fff;
            width: 44px;
            height: 44px;
            border-radius: 50%;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 1.25rem;
            transition: background 0.2s ease;
            z-index: 2;
            cursor: pointer;
        }

        .publication-modal__close:hover {
            background: rgba(15, 23, 42, 0.85);
        }

        .publication-modal__content {
            display: flex;
            width: 100%;
            background: #10172a;
            height: 100%;
        }

        .publication-modal__media {
            flex: 1 1 55%;
            background: #0f172a;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            min-height: 320px;
        }

        .publication-modal__carousel,
        .publication-modal__video-player {
            width: 100%;
            height: 100%;
        }
        
        .publication-modal__video-player {
            background: #0f172a;
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 320px;
        }
        
        .publication-modal__video-player iframe,
        .publication-modal__video-player .ratio {
            width: 100%;
            height: 100%;
        }
        
        /* Overlay play dans modals */
        .publication-modal__video-player .video-play-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.4);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 10;
            cursor: pointer;
            transition: background 0.3s ease;
        }
        
        .publication-modal__video-player .video-play-overlay:hover {
            background: rgba(0, 0, 0, 0.6);
        }
        
        .publication-modal__video-player .video-play-overlay__button {
            width: 80px;
            height: 80px;
            background: rgba(255, 255, 255, 0.95);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
            transition: transform 0.3s ease, background 0.3s ease;
        }
        
        .publication-modal__video-player .video-play-overlay:hover .video-play-overlay__button {
            transform: scale(1.1);
            background: rgba(255, 255, 255, 1);
        }
        
        .publication-modal__video-player .video-play-overlay__icon {
            width: 0;
            height: 0;
            border-style: solid;
            border-width: 15px 0 15px 25px;
            border-color: transparent transparent transparent #000;
            margin-left: 5px;
        }
        
        /* Bande instruction vidéo dans modal */
        .publication-modal__video-player .video-wrapper-with-instruction {
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
        }
        
        .publication-modal__video-player .video-instruction-banner {
            background: #fff;
            border-top: 1px solid #e5e7eb;
            padding: 0.75rem 1rem;
            text-align: center;
            font-size: 0.875rem;
            color: #374151;
            font-weight: 500;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
        }
        
        .publication-modal__video-player .video-instruction-banner i {
            color: #3b82f6;
            font-size: 1rem;
        }
        
        .instagram-embed-container {
            position: relative;
            overflow: hidden;
            border-radius: inherit;
            width: 100%;
            height: 100%;
        }

        .instagram-embed-wrapper {
            width: 100%;
            height: 100%;
        }

        .instagram-embed-iframe {
            width: 100%;
            height: calc(100% + 70px);
            margin-top: -70px;
            border: 0;
            pointer-events: auto;
        }

        .publication-modal__carousel .carousel-inner {
            width: 100%;
            height: 100%;
        }

        .publication-modal__carousel .carousel-item {
            width: 100%;
            height: 100%;
            display: none;
            position: relative;
        }

        .publication-modal__carousel .carousel-item.active,
        .publication-modal__carousel .carousel-item-next,
        .publication-modal__carousel .carousel-item-prev {
            display: flex;
        }

        .publication-modal__carousel .publication-carousel__image-wrapper {
            width: 100%;
            height: 100%;
            min-height: 320px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: #0f172a;
        }

        .publication-modal__carousel .publication-carousel__image {
            max-width: 100%;
            max-height: 100%;
            width: auto;
            height: auto;
            object-fit: contain;
            user-select: none;
            -webkit-user-drag: none;
        }

        .publication-modal__carousel .publication-carousel__counter {
            position: absolute;
            top: 15px;
            right: 15px;
            z-index: 10;
            background-color: rgba(15, 23, 42, 0.65);
            color: #fff;
            padding: 6px 12px;
            border-radius: 20px;
            font-size: 13px;
            font-weight: 500;
        }

        .publication-modal__carousel .publication-carousel__counter-text {
            white-space: nowrap;
        }

        .publication-modal__carousel .carousel-control-prev,
        .publication-modal__carousel .carousel-control-next {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            z-index: 5;
            width: 40px;
            height: 40px;
            background-color: rgba(15, 23, 42, 0.85);
            border-radius: 50%;
            border: none;
            opacity: 0;
            transition: opacity 0.2s ease;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .publication-modal__media:hover .carousel-control-prev,
        .publication-modal__media:hover .carousel-control-next {
            opacity: 1;
        }

        .publication-modal__carousel .carousel-control-prev:hover,
        .publication-modal__carousel .carousel-control-next:hover {
            background-color: rgba(15, 23, 42, 1);
        }

        .publication-modal__carousel .carousel-control-prev {
            left: 15px;
        }

        .publication-modal__carousel .carousel-control-next {
            right: 15px;
        }

        .publication-modal__carousel .carousel-control-prev-icon,
        .publication-modal__carousel .carousel-control-next-icon {
            width: 20px;
            height: 20px;
            background-size: 100% 100%;
            filter: invert(1);
        }

        .publication-modal__carousel .carousel-indicators,
        .publication-modal__carousel .publication-carousel-indicators {
            bottom: 15px;
            margin-bottom: 0;
            z-index: 2;
        }

        .publication-modal__carousel .carousel-indicators button,
        .publication-modal__carousel .publication-carousel-indicators button {
            width: 6px;
            height: 6px;
            border-radius: 50%;
            margin: 0 3px;
            background-color: rgba(255, 255, 255, 0.45);
            border: none;
            transition: all 0.2s ease;
        }

        .publication-modal__carousel .carousel-indicators button.active,
        .publication-modal__carousel .publication-carousel-indicators button.active {
            background-color: #fff;
            transform: scale(1.2);
        }

        .publication-modal__media-placeholder {
            color: #94a3b8;
            text-align: center;
        }

        .publication-modal__sidebar {
            flex: 1 1 45%;
            background: #fff;
            display: flex;
            flex-direction: column;
            padding: 1.75rem;
            height: 100%;
            min-height: 0;
            overflow: hidden;
            max-height: 100%;
        }

        .publication-modal__header {
            display: flex;
            align-items: center;
            gap: 1rem;
            margin-bottom: 1.5rem;
            flex-shrink: 0;
        }

        .publication-modal__author-link {
            color: inherit;
            text-decoration: none;
        }

        .publication-modal__author-link:hover {
            text-decoration: underline;
        }

        .publication-modal__avatar {
            width: 56px;
            height: 56px;
            border-radius: 18px;
            background: rgba(15, 23, 42, 0.08);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-weight: 700;
            color: var(--bs-primary);
            overflow: hidden;
        }

        .publication-modal__avatar span {
            font-size: 1.1rem;
        }

        .publication-modal__avatar img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .publication-modal__scroll {
            overflow-y: auto;
            overflow-x: hidden;
            padding-right: 0.5rem;
            flex: 1 1 auto;
            min-height: 0;
            max-height: 100%;
            -webkit-overflow-scrolling: touch;
        }

        .publication-modal__text {
            font-size: 0.95rem;
            line-height: 1.7;
            color: #1f2937;
            white-space: pre-wrap;
        }

        .publication-modal__visit {
            flex-shrink: 0;
        }

        .publication-modal__like-btn {
            border-radius: 999px;
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
        }

        .publication-modal__comments {
            border-top: 1px solid rgba(15, 23, 42, 0.08);
            padding-top: 1.5rem;
        }

        .publication-modal__comments-list {
            display: flex;
            flex-direction: column;
            gap: 0.75rem;
        }

        .publication-modal__comments-more {
            font-weight: 600;
        }

        /* Style Facebook pour les commentaires */
        .publication-modal__comment {
            display: flex;
            gap: 0.5rem;
            align-items: flex-start;
        }

        .publication-modal__comment-avatar {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            background: #e4e6eb;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 600;
            font-size: 0.75rem;
            color: #65676b;
            flex-shrink: 0;
        }

        .publication-modal__comment-content {
            flex: 1;
            min-width: 0;
        }

        .publication-modal__comment-bubble {
            background: #f0f2f5;
            border-radius: 18px;
            padding: 0.5rem 0.75rem;
            display: inline-block;
            max-width: 100%;
        }

        .publication-modal__comment-author {
            font-weight: 600;
            font-size: 0.8125rem;
            color: #050505;
            margin-bottom: 0.125rem;
        }

        .publication-modal__comment-text {
            font-size: 0.9375rem;
            color: #050505;
            word-wrap: break-word;
            margin: 0;
        }

        .publication-modal__comment-time {
            color: #65676b;
            font-size: 0.75rem;
            margin-top: 0.25rem;
            padding-left: 0.75rem;
        }

        .publication-modal__comment-form {
            flex-shrink: 0;
            padding-top: 1rem;
            margin-top: 0 !important;
            border-top: 1px solid rgba(15, 23, 42, 0.08);
            background: #fff;
        }

        .publication-modal__comment-form textarea {
            resize: vertical;
            max-height: 200px;
        }

        .publication-modal__comment-status,
        .publication-modal__comment-error {
            min-width: 0;
        }

        /* Stats section */
        .feed-card__stats {
            border-top: 1px solid rgba(15, 23, 42, 0.08);
            border-bottom: 1px solid rgba(15, 23, 42, 0.08);
            padding: 0.5rem 0;
        }

        .feed-card__likes-display {
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .feed-card__like-icon {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: #1877f2;
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
        }

        .feed-card__engagement-stats {
            color: #65676b;
        }

        /* Mobile responsive */
        @media (max-width: 767.98px) {
            .publication-modal {
                padding: 0;
                align-items: stretch;
                justify-content: stretch;
            }

            .publication-modal__dialog {
                flex-direction: column;
                max-height: 100vh;
                height: 100vh;
                width: 100vw;
                margin: 0;
                border-radius: 0;
            }

            .publication-modal__content {
                flex-direction: column;
                height: 100%;
                overflow: hidden;
                display: flex;
            }

            .publication-modal__media {
                flex: 0 0 auto;
                width: 100%;
                max-height: 25vh;
            }

            .publication-modal__carousel,
            .publication-modal__video-player {
                max-height: 25vh;
                width: 100%;
            }

            .publication-modal__carousel .publication-carousel__image-wrapper {
                max-height: 25vh;
                min-height: 25vh;
            }
            
            .publication-modal__video-player {
                min-height: 25vh;
            }
            
            .instagram-embed-iframe {
                height: calc(100% + 60px);
                margin-top: -60px;
            }

            .publication-modal__carousel .publication-carousel__image {
                max-height: 25vh;
            }

            .publication-modal__carousel .carousel-control-prev,
            .publication-modal__carousel .carousel-control-next {
                opacity: 0.9;
                width: 36px;
                height: 36px;
            }

            .publication-modal__carousel .carousel-control-prev {
                left: 10px;
            }

            .publication-modal__carousel .carousel-control-next {
                right: 10px;
            }

            .publication-modal__carousel .carousel-control-prev-icon,
            .publication-modal__carousel .carousel-control-next-icon {
                width: 20px;
                height: 20px;
            }

            .publication-modal__carousel .carousel-indicators,
            .publication-modal__carousel .publication-carousel-indicators {
                bottom: 5px;
            }

            .publication-modal__sidebar {
                flex: 1 1 auto;
                width: 100%;
                padding: 1rem;
                padding-bottom: 1.5rem;
                display: flex;
                flex-direction: column;
                overflow: hidden;
                min-height: 0;
                height: 100%;
            }

            .publication-modal__header {
                flex-shrink: 0;
                margin-bottom: 1rem;
            }

            .publication-modal__scroll {
                flex: 1 1 0;
                overflow-y: auto;
                overflow-x: hidden;
                -webkit-overflow-scrolling: touch;
                min-height: 200px;
                padding-right: 0.5rem;
                padding-bottom: 1rem;
            }

            .publication-modal__close {
                background: rgba(0, 0, 0, 0.8);
                top: 0.75rem;
                right: 0.75rem;
                width: 40px;
                height: 40px;
            }

            .publication-modal__comment-form {
                flex-shrink: 0;
                padding: 1rem;
                margin-top: 0 !important;
                border-top: 1px solid rgba(15, 23, 42, 0.08);
                background: #fff;
                position: relative;
                z-index: 10;
            }

            .publication-modal__comment-form textarea {
                resize: none;
                min-height: 70px;
                font-size: 14px;
            }

            .publication-modal__comment-form .mb-3 {
                margin-bottom: 1rem !important;
            }

            .publication-modal__comment-form .btn {
                font-size: 14px;
                padding: 0.5rem 1rem;
                display: inline-block !important;
                visibility: visible !important;
                opacity: 1 !important;
                background-color: var(--bs-primary) !important;
                border-color: var(--bs-primary) !important;
                color: white !important;
            }

            .publication-modal__visit {
                flex-shrink: 0;
                margin-top: 0.75rem !important;
            }

            .publication-modal__like-btn {
                font-size: 0.75rem;
                padding: 0.25rem 0.5rem;
            }

            .publication-modal__text {
                margin-bottom: 1.5rem;
                font-size: 0.9375rem;
                line-height: 1.6;
                color: #1f2937;
            }

            .publication-modal__comments {
                padding-bottom: 0.5rem;
            }

            .publication-modal__comments h3 {
                font-size: 1rem;
            }
        }
        #vetTabsStickySentinel {
            height: 1px;
            margin-top: -1px;
        }

        .vet-tabs-wrapper {
            position: static;
            background: #fff;
            padding: 0.75rem 0 0.25rem;
        }

        .vet-tabs-wrapper.is-stuck {
            box-shadow: 0 12px 20px rgba(15, 23, 42, 0.12);
            border-bottom: 1px solid rgba(148, 163, 184, 0.35);
        }

        .btn-see-details {
            position: relative;
            overflow: hidden;
            border: 1px solid rgba(78, 99, 255, 0.45);
            border-radius: 50px;
            letter-spacing: 0.08em;
            background: #fff;
            color: #1f2937;
            transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
            isolate: isolate;
            box-shadow: 0 0 0 rgba(79, 70, 229, 0.15);
        }

        .btn-see-details__content {
            position: relative;
            z-index: 3;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 4.35rem;
            text-shadow: 0 3px 12px rgba(0, 0, 0, 0.35);
        }

        .btn-see-details__logo-icon {
            width: 55px;
            height: 54px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            background: rgba(37, 99, 235, 0.12);
            padding: 6px;
        }

        .btn-see-details__logo-icon img {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }

        .btn-see-details__logo-icon::after {
            content: '';
        }

        .btn-see-details__logo-icon img {
            animation: sparkleBlink 1.8s ease-in-out infinite;
        }

        .btn-see-details i {
            font-size: 1.1rem;
            animation: arrowBounce 1.4s ease-in-out infinite;
        }

        .btn-see-details:hover {
            transform: translateY(-2px);
            border-color: rgba(79, 70, 229, 0.75);
            box-shadow: 0 14px 30px rgba(79, 70, 229, 0.2);
        }
        @keyframes arrowBounce {
            0%,
            100% {
                transform: translateY(0);
            }
            50% {
                transform: translateY(3px);
            }
        }
        @keyframes sparkleBlink {
            0%,
            100% {
                opacity: 0.6;
                transform: scale(0.95);
            }
            50% {
                opacity: 1;
                transform: scale(1.1);
            }
        }

        #vetMainTabs.highlight-tabs {
            animation: tabGlow 1.2s ease-in-out 2;
        }

        @keyframes tabGlow {
            0%,
            100% {
                box-shadow: 0 0 0 rgba(37, 99, 235, 0);
            }
            50% {
                box-shadow: 0 0 18px rgba(37, 99, 235, 0.45);
            }
        }

        /* ===================================================================
           Reliquats encore utilises par la fiche : le fil de publications
           (partiel .fbfeed-*) et les liens sociaux de la carte contact.
           Tout le reste de l'ancien profil « Facebook » (couverture, avatar,
           onglets, barre d'actions) a ete supprime : ce balisage n'existe plus.
           =================================================================== */
        .fbp-social-link {
            width: 40px; height: 40px; border-radius: 8px;
            display: inline-flex; align-items: center; justify-content: center;
            text-decoration: none;
        }


        /* --- Fil de publications = vrais posts Facebook (une colonne) --- */
        .fbp-profile .publications-grid {
            display: flex !important;
            flex-direction: column;
            gap: 16px;
            grid-template-columns: none !important;
            background: transparent;
        }
        .fbp-profile .publications-grid__item {
            display: block;
            aspect-ratio: auto;
            background: #fff;
            border: 1px solid #e4e6eb;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 1px 2px rgba(0,0,0,.08);
            transition: box-shadow .15s;
        }
        .fbp-profile .publications-grid__item:hover { box-shadow: 0 3px 10px rgba(0,0,0,.12); }
        .fbfeed-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px 8px; }
        .fbfeed-avatar { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; border: 1px solid #e4e6eb; flex: 0 0 auto; }
        .fbfeed-meta { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
        .fbfeed-author { font-weight: 700; color: #050505; font-size: .95rem; }
        .fbfeed-date { color: #65676b; font-size: .8rem; }
        .fbfeed-date i { font-size: .72rem; }
        .fbfeed-text {
            padding: 2px 14px 12px; color: #050505; font-size: .95rem; line-height: 1.45;
            white-space: pre-line; word-break: break-word;
        }
        .fbfeed-media { position: relative; background: #f0f2f5; }
        .fbp-profile .publications-grid__item .publications-grid__image {
            width: 100%; height: auto; max-height: 560px; object-fit: cover; display: block; transition: none;
        }
        .fbp-profile .publications-grid__item:hover .publications-grid__image { transform: none; }
        .fbfeed-badge {
            position: absolute; top: 10px; right: 10px; background: rgba(0,0,0,.65); color: #fff;
            font-size: .78rem; font-weight: 600; padding: 3px 9px; border-radius: 50px;
        }
        .fbfeed-badge--video { background: rgba(220,38,38,.9); }
        /* pied stats visible (remplace l'overlay au survol) */
        .fbp-profile .publications-grid__overlay {
            position: static; inset: auto; background: transparent; opacity: 1;
            display: flex; align-items: center; padding: 8px 14px; border-top: 1px solid #eef0f2;
        }
        .fbp-profile .publications-grid__item:hover .publications-grid__overlay { opacity: 1; }
        .fbp-profile .publications-grid__stats { color: #65676b; font-weight: 600; font-size: .88rem; gap: 16px; }
        .fbp-profile .publications-grid__stats span { display: inline-flex; align-items: center; }
        .fbp-profile .publications-grid__stats i { margin-right: 5px; }
        .fbp-profile .publications-grid__stats .fi-heart { color: #e0245e; }

        /* Garde anti-débordement horizontal du profil */
        .fbp-profile { overflow-x: clip; }

/* ===== bloc 2 (ex-ligne ~3991) ===== */

/* =====================================================================
           FICHE VETERINAIRE — feuille UNIQUE, calquee sur la maquette client
           « TunisieVet — Profil Veterinaire ».
           Un seul jeu de valeurs : couleurs, rayons, ombres, espacements.
           Rien d'autre ne doit styler cette page : pas de surcharge, pas de
           !important en cascade. Toute retouche se fait ICI.
           ===================================================================== */
        .fbp-profile {
            /* Couleurs de la maquette, au code hexadecimal pres */
            --v-vert:       #16a34a;
            --v-vert-f:     #15803d;
            --v-vert-doux:  #eaf7ef;
            --v-or:         #f59e0b;
            --v-or-doux:    #fff5e4;
            --v-rouge:      #b91c1c;
            --v-rouge-doux: #fdeeee;
            --v-fond:       #f5f7f6;
            --v-carte:      #fff;
            --v-trait:      #edf0ee;
            --v-trait-f:    #e3e8e5;
            --v-titre:      #16211c;
            --v-texte:      #5a665f;
            --v-doux:       #7d8883;
            --v-pale:       #9aa5a0;
            --v-rayon:      14px;
            --v-gap:        20px;

            background: var(--v-fond);
            font-family: 'Manrope', system-ui, -apple-system, sans-serif;
            color: var(--v-titre);
            padding-bottom: 0 !important;
        }
        
        

        /* ---------- Hero : photo de 520 px, deux cartes posees dessus ---------- */
        .vh { position: relative; }
        .vh__bg {
            height: 520px; background-size: cover; background-position: center;
            animation: vhZoom 1.6s ease-out both;
        }
        @keyframes vhZoom { from { transform: scale(1.04); } to { transform: scale(1); } }
        .vh__scrim {
            position: absolute; inset-inline: 0; top: 0; height: 520px; pointer-events: none;
            background: linear-gradient(90deg, rgba(10,20,15,.55) 0%, rgba(10,20,15,.25) 55%, rgba(10,20,15,.35) 100%);
        }
        /* Les cartes demarrent 44 px sous le haut de la photo et peuvent
           deborder vers le bas : c'est exactement le comportement de la maquette. */
        /* min-height : quand la fiche est peu remplie, le flux reprend quand meme
           SOUS la photo (sinon la bande de chiffres passait derriere). */
        .vh__frame { position: relative; z-index: 2; margin-top: -476px; min-height: 476px; }
        .vh__row { display: flex; align-items: flex-start; justify-content: space-between; gap: 32px; }

        /* Carte identite */
        .vh-id {
            width: 600px; max-width: 100%; flex: none;
            background: var(--v-carte); border-radius: 18px; padding: 28px 30px 26px;
            box-shadow: 0 24px 60px rgba(8,20,14,.22);
            animation: vhUp .55s .1s ease-out both;
        }
        .vh-id__top { display: flex; gap: 22px; }
        .vh-id__avatar { position: relative; flex: none; width: 132px; height: 132px; }
        .vh-id__avatar img {
            width: 100%; height: 100%; border-radius: 50%; object-fit: cover; background: #f1f4f2;
            border: 4px solid #fff; box-shadow: 0 8px 24px rgba(8,20,14,.18);
        }
        .vh-id__online {
            position: absolute; inset-inline-end: 2px; top: 12px; width: 20px; height: 20px;
            border-radius: 50%; background: #22c55e; border: 3px solid #fff;
        }
        .vh-id__facts { flex: 1; min-width: 0; padding-top: 6px; display: flex; flex-direction: column; align-items: flex-start; }
        .vh-verif {
            display: inline-flex; align-items: center; gap: 6px; margin-bottom: 12px;
            background: var(--v-vert-doux); color: var(--v-vert-f);
            font-size: 11.5px; font-weight: 700; padding: 5px 11px; border-radius: 999px;
        }
        .vh-verif i { font-size: 12px; }
        .vh-note {
            display: inline-flex; align-items: center; gap: 10px; text-decoration: none;
            background: #fffaf0; border: 1px solid #fdeccb; border-radius: 10px; padding: 7px 12px;
        }
        .vh-note__stars { color: var(--v-or); font-size: 13px; letter-spacing: 1px; white-space: nowrap; }
        .vh-note > b { font-weight: 800; font-size: 15px; color: var(--v-titre); }
        .vh-note__nb { font-size: 12.5px; color: #8c968f; }
        .vh-id__counts {
            display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px;
            margin-top: 12px; font-size: 12.5px; color: #6b7772;
        }
        .vh-id__counts span { display: inline-flex; align-items: center; gap: 6px; }
        .vh-id__counts i { color: var(--v-vert); font-size: 14px; }
        .vh-id__sep { color: #d6dcd8; }

        .vh-id__name { margin: 22px 0 0; line-height: 1.1; }
        .vh-id__pre, .vh-id__word { font-size: 38px; font-weight: 800; letter-spacing: -1.1px; color: var(--v-titre); }
        .vh-id__post { display: block; margin-top: 6px; font-size: 15px; font-weight: 600; color: var(--v-texte); letter-spacing: 0; }
        .vh-id__vip {
            display: inline-flex; align-items: center; vertical-align: middle; margin-inline-start: 8px;
            background: var(--v-or-doux); color: #b45309;
            font-size: 11px; font-weight: 800; padding: 3px 10px; border-radius: 999px;
        }
        .vh-id__lieu { display: flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 13.5px; font-weight: 600; color: #6b7772; letter-spacing: 0; }
        .vh-id__lieu i { color: var(--v-vert); font-size: 15px; }
        /* Liaisons du H1 : lues par les moteurs et les lecteurs d'ecran, pas affichees */
        .vh-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

        .vh-etat {
            margin-top: 16px; display: inline-flex; align-items: center; gap: 8px;
            font-size: 12.5px; font-weight: 700; padding: 7px 14px; border-radius: 999px;
        }
        .vh-etat__pt { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
        .vh-etat--ouvert { background: var(--v-vert-doux); color: var(--v-vert-f); }
        .vh-etat--ferme { background: var(--v-rouge-doux); color: var(--v-rouge); }

        .vh-id__chips { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 8px; }
        .vh-chip {
            display: inline-flex; align-items: center; gap: 6px; text-decoration: none;
            border: 1px solid #e6eae7; border-radius: 9px; padding: 7px 12px;
            font-size: 12.5px; font-weight: 600; color: #3d4a44;
        }
        .vh-chip:hover { border-color: var(--v-vert); color: var(--v-vert-f); }
        .vh-chip__ic { font-size: 14px; line-height: 1; }

        /* Carte contact */
        .vh-contact {
            width: 340px; flex: none;
            background: var(--v-carte); border-radius: 16px; padding: 22px;
            box-shadow: 0 24px 60px rgba(8,20,14,.22);
            animation: vhUp .55s .25s ease-out both;
        }
        .vh-contact__t { margin: 0 0 16px; text-align: center; font-size: 14.5px; font-weight: 700; color: var(--v-titre); }
        .vh-contact__list { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
        .vh-btn {
            width: 100%; display: flex; align-items: center; justify-content: center; gap: 9px;
            font-family: inherit; text-decoration: none; cursor: pointer;
            border: 1px solid var(--v-trait-f); background: #fff; color: #26332c;
            font-weight: 600; font-size: 14px; padding: 12px; border-radius: 10px;
            transition: border-color .15s, background .15s, color .15s;
        }
        .vh-btn--doux:hover { border-color: var(--v-vert); color: var(--v-vert-f); }

        /* CTA principaux : valeurs reprises de la maquette du 13/08
           (docs Recreation maquette identique, desktop + mobile).
           On ne touche QUE l'apparence : les identifiants #showPhoneBtnHero,
           #bookingModal et les gestionnaires loadPhoneNumber / tvShareGate
           restent strictement inchanges. */
        .vh-btn--appel {
            border: 1px solid rgba(46, 128, 74, .16);
            background: #ffffff; color: #24312a;
            font-weight: 500; font-size: 16px;
            min-height: 52px; padding: 14px 20px; border-radius: 14px;
            box-shadow: 0 6px 16px rgba(31, 61, 40, .06);
        }
        .vh-btn--appel:hover { border-color: rgba(46, 128, 74, .35); background: #ffffff; color: #24312a; }
        .vh-btn--appel i { color: #2f8f4e; }
        .vh-btn--rdv {
            border: 0;
            background: linear-gradient(180deg, #3d9a56 0%, #2f7d43 100%);
            color: #ffffff; font-weight: 600; font-size: 16px;
            min-height: 52px; padding: 14px 20px; border-radius: 14px;
            box-shadow: 0 10px 22px rgba(47, 125, 67, .28);
        }
        .vh-btn--rdv:hover { filter: brightness(1.06); color: #fff; }
        @media (min-width: 992px) {
            .vh-btn--appel, .vh-btn--rdv { font-size: 18px; min-height: 58px; border-radius: 16px; }
        }
        .vh-btn--appel i { animation: vhRing 1.6s ease-in-out infinite; }
        @keyframes vhRing {
            0%, 40%, 100% { transform: rotate(0); }
            6% { transform: rotate(-16deg); } 12% { transform: rotate(14deg); }
            18% { transform: rotate(-10deg); } 24% { transform: rotate(6deg); } 30% { transform: rotate(0); }
        }
        .vh-contact__socials { display: flex; justify-content: center; gap: 10px; margin-top: 14px; }
        .vh-contact__socials a {
            width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--v-trait-f);
            display: inline-flex; align-items: center; justify-content: center; color: #3d4a44; text-decoration: none;
        }
        .vh-contact__socials a:hover { border-color: var(--v-vert); color: var(--v-vert); }

        @keyframes vhUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
        @media (prefers-reduced-motion: reduce) {
            .vh__bg, .vh-id, .vh-contact, .vh-btn--appel i { animation: none; }
        }

        /* ---------- Bande de chiffres ---------- */
        .vh-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--v-gap); margin-top: 28px; }
        .vh-stat {
            background: var(--v-carte); border: 1px solid var(--v-trait); border-radius: var(--v-rayon);
            padding: 22px; display: flex; align-items: center; gap: 16px; min-width: 0;
            transition: box-shadow .2s, transform .2s;
        }
        .vh-stat__ic {
            width: 44px; height: 44px; border-radius: 12px; flex: none;
            display: grid; place-items: center; font-size: 20px;
            background: var(--v-vert-doux); color: var(--v-vert);
        }
        .vh-stat__ic--or { background: var(--v-or-doux); color: var(--v-or); }
        .vh-stat__txt { min-width: 0; }
        .vh-stat__txt b { display: block; font-size: 26px; font-weight: 800; letter-spacing: -.6px; line-height: 1.1; color: var(--v-titre); }
        .vh-stat__mot { font-size: 22px !important; letter-spacing: -.5px !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .vh-stat__txt > span { display: block; font-size: 12.5px; color: var(--v-doux); }
        .vh-stat__stars { color: var(--v-or) !important; font-size: 11px !important; letter-spacing: 1px; }

        /* ---------- Grille de sections : rangees 1fr / 1.1fr (maquette) ---------- */
        /* La maquette encadre le contenu dans main{padding:28px 40px 40px; gap:20px} :
           28 px sous la photo, puis 20 px entre CHAQUE bloc, 40 px avant le pied. */
        .vh-grid { display: flex; flex-direction: column; gap: var(--v-gap); margin: var(--v-gap) 0 40px; }
        .vh-row { display: grid; grid-template-columns: 1fr 1.1fr; gap: var(--v-gap); align-items: stretch; }
        .vh-row > :only-child, .vh-row--full > * { grid-column: 1 / -1; }
        /* Une rangee dont les deux cartes sont absentes (donnees manquantes)
           ne doit laisser AUCUN espace : sans cela le flex ajoutait 2 gouttieres. */
        .vh-row:not(:has(> section)) { display: none; }

        /* LA carte : une seule definition pour toute la page */
        .vh-card {
            background: var(--v-carte); border: 1px solid var(--v-trait); border-radius: var(--v-rayon);
            padding: 22px 24px; display: flex; flex-direction: column; min-width: 0;
        }
        .vh-card__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
        .vh-card__head .vh-card__t { margin-bottom: 0; }
        .vh-card__t { margin: 0 0 16px; font-size: 16px; font-weight: 700; color: var(--v-titre); }
        .vh-card__pied { margin-top: 16px; display: flex; justify-content: flex-end; }

        /* Lien de telechargement du QR, sous le code dans « A propos ». */
        .vh-about__qrdl {
            display: inline-flex; align-items: center; gap: 8px;
            border: 1px solid var(--v-trait-f); background: #fff; color: #3d4a44;
            font-size: 12.5px; font-weight: 600; padding: 8px 14px;
            border-radius: 999px; text-decoration: none; white-space: nowrap;
            transition: background .15s ease, color .15s ease;
        }
        .vh-about__qrdl:hover { background: #f2f5f4; color: #16211c; }
        .vh-about__qrdl:focus-visible { outline: 2px solid var(--v-vert); outline-offset: 2px; }
        .vh-about__qrnb { font-size: 12px; color: var(--v-texte); }
        .vh-mini-btn {
            display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
            border: 1px solid var(--v-trait-f); background: #fff; color: #3d4a44;
            font-family: inherit; font-size: 12.5px; font-weight: 600; padding: 8px 14px;
            border-radius: 9px; cursor: pointer; text-decoration: none;
        }
        .vh-mini-btn:hover { border-color: var(--v-vert); color: var(--v-vert-f); }

        /* ---------- A propos ---------- */
        .vh-about { display: flex; gap: 20px; overflow: hidden; flex: 1; }
        .vh-about__txt { flex: 1; min-width: 0; }
        .vh-about .about-content, .vh-about .about-content p {
            font-size: 13.5px; line-height: 1.75; color: var(--v-texte);
        }
        .vh-about .about-content { margin-bottom: 0; }
        .vh-about .about-content p { margin: 0 0 10px; }
        .vh-about .about-content p:last-child { margin-bottom: 0; }
        /* Texte replie a 6 lignes ; « Voir plus » le deplie dans le meme bloc */
        .vh-clamp {
            display: -webkit-box; -webkit-line-clamp: 6; line-clamp: 6;
            -webkit-box-orient: vertical; overflow: hidden;
        }
        .vh-plus {
            display: inline-flex; align-items: center; align-self: flex-start;
            border: 0; background: none; padding: 0; margin-top: 8px; cursor: pointer;
            font-family: inherit; font-size: 12.5px; font-weight: 700; color: var(--v-vert-f);
        }
        .vh-plus:hover { text-decoration: underline; }
        .vh-specs .vh-plus { margin-top: 0; align-self: center; }
        .vh-sign { margin-top: 22px; display: flex; align-items: flex-end; gap: 12px; }
        .vh-sign__nom { font-family: 'Caveat', cursive; font-size: 26px; color: #26332c; line-height: 1; }
        .vh-sign i { font-size: 26px; color: #c8d3cc; }
        /* Depuis le 18/08 ce bloc porte le QR de la fiche, plus la photo du
           veterinaire. Le debordement dans le coin de la carte (marges
           negatives) et le recadrage « cover » ont donc disparu : un QR
           rogne, meme d un millimetre, ne se scanne plus. Il lui faut au
           contraire une marge blanche autour pour etre lu. */
        .vh-about__ph {
            width: 200px; flex: none; align-self: center; margin: 0;
            display: flex; flex-direction: column; align-items: center; gap: 10px;
        }
        .vh-about__ph img {
            width: 168px; height: 168px; display: block;
            object-fit: contain;            /* jamais de recadrage */
            border: 1px solid var(--v-trait); border-radius: 12px;
            background: #fff; padding: 8px; /* la marge blanche du code */
        }

        /* ---------- Pourquoi choisir ---------- */
        .vh-why { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
        .vh-why__tuile {
            border: 1px solid var(--v-trait); border-radius: 11px; padding: 16px;
            display: flex; align-items: center; gap: 11px; transition: border-color .15s;
        }
        .vh-why__tuile:hover { border-color: var(--v-vert); }
        .vh-why__ic {
            width: 34px; height: 34px; border-radius: 9px; flex: none;
            display: grid; place-items: center; background: var(--v-vert-doux); color: var(--v-vert); font-size: 16px;
        }
        .vh-why__tuile b { font-size: 12.5px; font-weight: 600; line-height: 1.4; color: var(--v-titre); }

        /* ---------- Specialites : pastilles teintees ---------- */
        .vh-specs { display: flex; flex-wrap: wrap; gap: 9px; }
        .vh-spec { font-size: 12.5px; font-weight: 600; padding: 7px 13px; border-radius: 999px; text-decoration: none; }
        .vh-spec:hover { filter: brightness(.96); }
        .vh-spec--0 { background: #eef2ff; color: #4338ca; }
        .vh-spec--1 { background: var(--v-vert-doux); color: var(--v-vert-f); }
        .vh-spec--2 { background: var(--v-or-doux); color: #b45309; }
        .vh-spec--3 { background: var(--v-rouge-doux); color: var(--v-rouge); }
        .vh-spec--4 { background: #f1f4f2; color: #3d4a44; }

        /* ---------- Animaux pris en charge ---------- */
        .vh-animals { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
        .vh-animal {
            border: 1px solid var(--v-trait); border-radius: 11px; padding: 14px 8px;
            text-align: center; text-decoration: none; color: var(--v-titre); transition: border-color .15s, transform .15s;
        }
        .vh-animal:hover { border-color: var(--v-vert); transform: translateY(-2px); color: var(--v-vert-f); }
        .vh-animal__ic { display: block; font-size: 30px; line-height: 1.2; }
        .vh-animal__n { display: block; margin-top: 8px; font-size: 12px; font-weight: 600; }

        /* ---------- Horaires ---------- */
        .vh-hours { display: grid; grid-template-columns: 1.2fr .8fr; gap: 20px; align-items: start; }
        .vh-hours__list { display: flex; flex-direction: column; }
        .vh-hours__l {
            display: flex; justify-content: space-between; gap: 12px;
            padding: 11px 0; border-bottom: 1px solid #f1f4f2; font-size: 13px;
        }
        .vh-hours__l:last-child { border-bottom: 0; }
        .vh-hours__l > span { color: var(--v-texte); font-weight: 600; }
        .vh-hours__l b { color: var(--v-doux); font-weight: 400; font-variant-numeric: tabular-nums; }
        .vh-hours__off { color: var(--v-rouge) !important; font-weight: 600 !important; }
        .vh-hours__l.is-today > span { color: var(--v-vert-f); }
        .vh-hours__l.is-today b { color: var(--v-titre); font-weight: 700; }
        .vh-today {
            background: #f4faf6; border: 1px solid #dcefe3; border-radius: 12px; padding: 18px; text-align: center;
        }
        .vh-today__t { font-size: 12.5px; font-weight: 700; color: var(--v-vert-f); }
        .vh-today__h { margin-top: 8px; font-size: 21px; font-weight: 800; letter-spacing: -.5px; color: var(--v-titre); }
        .vh-today__etat { margin-top: 8px; font-size: 12.5px; font-weight: 700; color: var(--v-vert); }
        .vh-today.is-off { background: #fafbfa; border-color: var(--v-trait); }
        .vh-today.is-off .vh-today__t { color: var(--v-doux); }
        .vh-today.is-off .vh-today__etat { color: var(--v-rouge); }

        /* ---------- Localisation ---------- */
        .vh-loc__adr { margin: 0 0 14px; font-size: 12.5px; color: var(--v-doux); }
        .vh-loc .vh-card__t { margin-bottom: 4px; }
        /* L'id l'emporte sur leaflet-markers.css qui impose min-height:400px
           (puis 300 sous 768 px) et etirait la carte au-dela des horaires. */
        #vet_location_map.vh-loc__map {
            width: 100%; height: 210px; min-height: 0;
            border-radius: 10px; overflow: hidden; box-shadow: none;
        }
        @media (max-width: 768px) {
            #vet_location_map.vh-loc__map { min-height: 0; }
        }
        .vh-loc__zones {
            margin-top: 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 12px;
        }
        .vh-loc__zones-t { color: var(--v-doux); font-weight: 700; }
        .vh-loc__zones a {
            color: #3d4a44; background: #f1f4f2; border-radius: 999px; padding: 4px 10px; text-decoration: none;
        }
        .vh-loc__zones a:hover { background: var(--v-vert-doux); color: var(--v-vert-f); }
        .vh-loc__zones > span:not(.vh-loc__zones-t) { color: var(--v-pale); }

        /* ---------- Avis (maquette : pas de resume, la note est deja au hero) ---------- */
        .vh-rev__note i { color: var(--v-or); font-size: 11px; }
        .vh-rev {
            border: 1px solid var(--v-trait); border-radius: 12px; padding: 14px;
            height: 100%; display: flex; flex-direction: column;
        }
        .vh-rev__tete { display: flex; align-items: center; gap: 10px; }
        .vh-rev__avatar {
            width: 34px; height: 34px; border-radius: 50%; flex: none;
            background: var(--v-vert); color: #fff; font-size: 14px; font-weight: 700;
            display: grid; place-items: center;
        }
        .vh-rev__qui { flex: 1; min-width: 0; }
        .vh-rev__nom { font-size: 13px; font-weight: 700; color: var(--v-titre); }
        .vh-rev__date { font-size: 11px; color: var(--v-pale); white-space: nowrap; }
        .vh-rev__texte { margin: 12px 0 0; font-size: 12.5px; line-height: 1.6; color: var(--v-texte); flex: 1; }
        .vh-rev__votes { display: flex; gap: 12px; margin-top: 10px; }
        .btn-vote-card {
            display: inline-flex; align-items: center; gap: 5px; border: 0; background: none;
            font-family: inherit; font-size: 12px; color: var(--v-doux); cursor: pointer; padding: 0;
        }
        .btn-vote-card:hover { color: var(--v-vert); }

        /* ---------- Publications : 4 vignettes de 120 px + legende (maquette) ---------- */
        #publications .publications-grid {
            display: grid !important;
            grid-template-columns: repeat(4, 1fr) !important;
            gap: 14px !important;
        }
        #publications .publications-grid__item {
            aspect-ratio: auto !important; background: transparent !important;
            border: 0 !important; box-shadow: none !important; border-radius: 0 !important;
            overflow: visible !important;
            display: flex; flex-direction: column; gap: 10px;
        }
        #publications .publications-grid__item .fbfeed-media,
        #publications .publications-grid__item .fbfeed-media-grid,
        #publications .publications-grid__placeholder {
            height: 120px; border-radius: 10px !important; overflow: hidden;
            background: #f1f4f2; position: relative;
        }
        #publications .publications-grid__item img.publications-grid__image {
            width: 100%; height: 100% !important; max-height: none !important; object-fit: cover;
        }
        #publications .fbfeed-head { display: none !important; }
        /* Le pied « j'aime / commentaires » de l'ancien fil n'existe pas sur la
           maquette : ces chiffres restent visibles dans la modale de publication */
        #publications .publications-grid__overlay { display: none !important; }
        #publications .fbfeed-text {
            order: 2; margin: 0 !important; padding: 0 !important;
            font-size: 12.5px; font-weight: 600; line-height: 1.45; color: var(--v-titre);
            display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
        }
        #publications .publications-grid__item:hover .fbfeed-text { color: var(--v-vert-f); }

        /* ---------- Etats vides ---------- */
        .vh-vide { text-align: center; padding: 32px 12px; }
        .vh-vide__ic {
            width: 52px; height: 52px; border-radius: 50%; background: var(--v-vert-doux); color: var(--v-vert);
            display: inline-grid; place-items: center; font-size: 20px; margin-bottom: 12px;
        }
        .vh-vide__t { font-size: 14px; font-weight: 700; color: var(--v-titre); margin-bottom: 4px; }
        .vh-vide__s { font-size: 12.5px; color: var(--v-doux); margin-bottom: 12px; }

        /* ---------- FAQ ---------- */
        .vh-faq .accordion { display: flex; flex-direction: column; gap: 10px; }
        .vh-faq .accordion-item {
            border: 1px solid var(--v-trait) !important; border-radius: 11px !important;
            overflow: hidden; background: #fff !important;
        }
        .vh-faq .accordion-button {
            font-family: inherit; font-size: 13px; font-weight: 600; color: #26332c;
            padding: 14px 16px; background: #fff !important; box-shadow: none !important;
        }
        .vh-faq .accordion-button::after { width: 14px; height: 14px; background-size: 14px; }
        .vh-faq .accordion-button:not(.collapsed) { color: var(--v-vert-f); }
        .vh-faq .accordion-body { padding: 0 16px 15px; font-size: 12.5px; line-height: 1.65; color: var(--v-texte); }

        /* ---------- Veterinaires similaires ---------- */
        .vh-simwrap { position: relative; }
        .vh-sim { display: block; text-align: center; padding: 6px; text-decoration: none; height: 100%; }
        .vh-sim img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; margin: 0 auto; display: block; background: #f1f4f2; }
        .vh-sim__nom { margin-top: 10px; font-size: 13px; font-weight: 700; color: var(--v-titre); line-height: 1.3; }
        .vh-sim__ville { font-size: 11.5px; color: #8c968f; }
        .vh-sim__note { margin-top: 6px; font-size: 11px; display: flex; align-items: center; justify-content: center; gap: 5px; }
        .vh-sim__stars { color: var(--v-or); letter-spacing: 1px; }
        .vh-sim__note b { color: var(--v-texte); font-size: 12px; }
        .vh-sim__nb { font-size: 11px; color: var(--v-pale); }
        .vh-sim:hover .vh-sim__nom { color: var(--v-vert-f); }

        /* Fleches et puces des carrousels */
        .vh-nav {
            position: absolute; top: 46%; z-index: 3; width: 34px; height: 34px; border-radius: 50%;
            border: 1px solid #e9ecea; background: #fff; color: #3d4a44; cursor: pointer;
            display: grid; place-items: center; box-shadow: 0 4px 14px rgba(8,20,14,.1);
        }
        .vh-nav--prev { inset-inline-start: -16px; }
        .vh-nav--next { inset-inline-end: -16px; }
        .vh-nav:hover { color: var(--v-vert); border-color: var(--v-vert); }
        .vh-nav.swiper-button-disabled { opacity: .35; pointer-events: none; }
        .vh-dots { margin-top: 16px; display: flex; justify-content: center; gap: 6px; }
        .vh-dots .swiper-pagination-bullet {
            width: 7px; height: 7px; border-radius: 50%; background: #dfe5e1; opacity: 1; margin: 0;
        }
        .vh-dots .swiper-pagination-bullet-active { background: var(--v-vert); }
        .vh-grid .swiper { width: 100%; min-width: 0; }
        .vh-grid .swiper-wrapper { align-items: stretch; }
        .vh-grid .swiper-slide { height: auto; }

        /* ---------- Boutique ---------- */
        .vh-shop { flex-direction: row; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
        .vh-shop__s { margin: 0; font-size: 13px; color: var(--v-texte); }
        .vh-shop__cta { width: auto; padding-inline: 22px; }

        /* ---------- Barre d'actions collante ---------- */
        #vfpStickyBar {
            position: fixed; inset-inline: 0; bottom: 0; z-index: 1050;
            display: grid; grid-template-columns: 1fr 1.6fr 1.2fr 1.2fr; gap: 14px;
            background: #fff; border-top: 1px solid #e9ecea;
            padding: 14px clamp(1rem, 2.5vw, 40px) calc(14px + env(safe-area-inset-bottom, 0px));
            box-shadow: 0 -6px 24px rgba(8,20,14,.06);
            transition: transform .28s ease, opacity .28s ease;
        }
        #vfpStickyBar.is-hidden { opacity: 0; pointer-events: none; transform: translateY(28px); }
        #vfpStickyBar > * {
            display: inline-flex; align-items: center; justify-content: center; gap: 9px;
            border: 1px solid var(--v-trait-f); background: #fff; color: #26332c;
            font-family: inherit; font-weight: 600; font-size: 14px; padding: 13px; border-radius: 10px;
            cursor: pointer; text-decoration: none;
        }
        #vfpStickyBar > *:hover { border-color: var(--v-vert); }
        #vfpStickyBar #floatingCallBtn {
            border: 0; background: var(--v-vert); color: #fff; font-weight: 700; font-size: 15px;
            position: static !important; box-shadow: none !important;
        }
        #vfpStickyBar #floatingCallBtn:hover { background: var(--v-vert-f); }
        #vfpStickyBar #floatingCallBtn.is-hidden { opacity: 1; pointer-events: auto; transform: none !important; }
        body { padding-bottom: 78px; }

        /* Auto Ads : ceinture et bretelles (les liens d'intention cassaient le peage) */
        .vh-grid a.google-anno, .vh-grid .google-anno-sa { display: none !important; }

        /* =====================================================================
           RESPONSIVE — tablette (<= 992 px) puis mobile (<= 640 px)
           ===================================================================== */
        @media (max-width: 1199.98px) {
            .vh-why { grid-template-columns: repeat(2, 1fr); }
            .vh-animals { grid-template-columns: repeat(4, 1fr); }
        }

        @media (max-width: 991.98px) {
            .vh__bg, .vh__scrim { height: 320px; }
            .vh__frame { margin-top: -286px; }
            .vh__row { flex-direction: column; gap: 16px; }
            .vh-id, .vh-contact { width: 100%; }
            .vh-id { padding: 20px; }
            .vh-id__pre, .vh-id__word { font-size: 28px; letter-spacing: -.6px; }
            .vh-id__avatar { width: 96px; height: 96px; }
            .vh-id__top { gap: 16px; }
            .vh-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
            .vh-row, .vh-row--full { grid-template-columns: 1fr; }
            .vh-hours { grid-template-columns: 1fr; }
            .vh-about { flex-direction: column; }
            /* Le QR garde sa taille sur mobile : l'etirer sur toute la largeur
               ne le rendrait pas plus lisible, seulement plus encombrant. */
            .vh-about__ph { width: 100%; align-self: center; margin: 0; }
            .vh-nav { display: none; }
        }

        @media (max-width: 639.98px) {
            .vh__bg, .vh__scrim { height: 240px; }
            .vh__frame { margin-top: -206px; }
            .vh-id__top { flex-direction: column; align-items: center; text-align: center; }
            .vh-id__facts { align-items: center; }
            .vh-id__name, .vh-id__ville { text-align: center; }
            .vh-id__ville { justify-content: center; }
            .vh-id__chips, .vh-id__counts { justify-content: center; }
            .vh-id__pre, .vh-id__word { font-size: 24px; }
            .vh-stats { grid-template-columns: 1fr; }
            .vh-card { padding: 18px 16px; }
            .vh-why { grid-template-columns: 1fr; }
            .vh-animals { grid-template-columns: repeat(3, 1fr); }
            #publications .publications-grid { grid-template-columns: repeat(2, 1fr) !important; }
            #vfpStickyBar { grid-template-columns: 1fr 1.4fr; gap: 8px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px)); }
            #vfpStickyBar > * { font-size: 12.5px; padding: 11px 6px; gap: 6px; }
            #vfpStickyBar > * span { display: none; }
            #vfpStickyBar #floatingCallBtn span { display: inline; }
            .vh-shop { flex-direction: column; align-items: stretch; }
            .vh-shop__cta { width: 100%; }
        }

        /* ============================================================
           HERO VERBATIM DES MAQUETTES (13/08) - namespace vq-*.
           Mobile : valeurs ABSOLUES de la maquette 390 px.
           Desktop : unites de CONTENEUR (1cqw = 1 % de la carte, ref
           1657 px). Chaque valeur vaut exactement la maquette a 1657 px
           et se reduit PROPORTIONNELLEMENT en dessous - corrige l'effet
           « tout est zoome » quand les tailles absolues s'appliquaient
           a une carte plus etroite que 1657 px.
           ============================================================ */
        /* Barre collante du bas : supprimee en MOBILE (decision
           proprietaire 13/08) — les CTA du hero suffisent, et elle mangeait
           un bandeau d'ecran permanent. Conservee en desktop. Le markup et
           ses delegations restent en place : le script est garde par
           if (!barre || ...) et ne fait rien de plus. */
        @media (max-width: 991.98px) {
            #vfpStickyBar { display: none !important; }
        }

        .vq { background: #eef2ef; }
        .vq__carte {
            position: relative; overflow: hidden;
            container-type: inline-size;
            background: linear-gradient(180deg, #f2f8ef 0%, #f8fbf6 45%, #ffffff 100%);
            box-shadow: 0 10px 40px rgba(31, 61, 40, .10);
        }
        .vq__halo, .vq__patte, .vq__points { display: none; pointer-events: none; position: absolute; }

        .vq__photo-cadre { position: relative; height: 300px; overflow: hidden; }
        .vq__photo {
            position: absolute; left: -28px; top: -14px;
            width: calc(100% + 80px); height: 330px;
            object-fit: cover; object-position: 62% 30%;
        }
        .vq__voile {
            position: absolute; left: 0; right: 0; bottom: -2px; height: 74px;
            background: linear-gradient(180deg, rgba(248,251,246,0) 0%, rgba(248,251,246,.85) 58%, #f8fbf6 100%);
        }
        .vq-verif {
            display: inline-flex; align-items: center; gap: 8px;
            background: rgba(255,255,255,.94);
            border: 1px solid rgba(46,128,74,.12);
            border-radius: 999px; padding: 8px 14px 8px 11px;
            box-shadow: 0 4px 14px rgba(31,61,40,.10);
            font-size: 10.5px; font-weight: 600; letter-spacing: .09em;
            color: #2c6b41; text-transform: uppercase;
        }
        .vq-verif--photo { position: absolute; left: 16px; top: 18px; }

        .vq__contenu { position: relative; padding: 0 20px 28px; display: flex; flex-direction: column; gap: 18px; }
        .vq__logo {
            width: 84px; height: 84px; border-radius: 20px; flex: none;
            background: #fbfdfa; box-shadow: 0 8px 22px rgba(31,61,40,.14); overflow: hidden;
        }
        .vq__logo img { width: 100%; height: 100%; object-fit: contain; }
        .vq__id { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
        .vq__ligne-nom { display: flex; align-items: center; gap: 7px; }
        .vq__nom { margin: 0; font-size: 25px; line-height: 1.1; font-weight: 700; color: #1c2b22; letter-spacing: -.015em; }
        .vq__nom-pre { font-weight: 700; }
        .vq__macaron { width: 17px; height: 17px; flex: none; }
        .vq__type { font-size: 11px; font-weight: 500; letter-spacing: .13em; color: #8a99a0; text-transform: uppercase; }
        .vq__lieu { display: flex; align-items: center; gap: 7px; font-size: 14px; color: #5d6b64; }
        .vq__lieu svg { width: 16px; height: 16px; }

        .vq__bloc-id { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: -34px; }
        .vq__bloc-id .vq__logo { flex: none; }
        .vq__bloc-id .vq__id { flex: 1; min-width: 0; padding-top: 30px; }
        .vq__infos { width: 100%; display: flex; flex-direction: column; gap: 12px; margin-top: 4px; }
        .vq__infos .vh-etat { align-self: flex-start; }

        .vq__animaux { display: flex; flex-direction: column; gap: 11px; }
        .vq__animaux-titre { font-size: 14px; color: #4a584f; }
        .vq__pilules { display: flex; flex-wrap: wrap; gap: 9px; }
        .vq__pilule {
            display: inline-flex; align-items: center; gap: 7px;
            background: #ffffff; border: 1px solid rgba(46,128,74,.10);
            border-radius: 999px; padding: 9px 15px;
            box-shadow: 0 3px 10px rgba(31,61,40,.05);
            font-size: 13.5px; color: #3c4a42;
        }
        .vq__cta { display: flex; flex-direction: column; gap: 11px; margin-top: 2px; }
        .vq__cta .vh-btn--rdv { order: 1; }
        .vq__cta .vh-btn--appel { order: 2; }
        /* Pilule d'horaires (rapatriee du nettoyage du 13/08 au soir :
           elle vivait dans un bloc de patchs supprime). Valeurs maquette. */
        .vh-etat--ouvert {
            display: inline-flex; align-items: center; gap: 10px;
            background: rgba(232, 244, 231, .9);
            border: 1px solid rgba(63, 157, 92, .22);
            border-radius: 999px; padding: 9px 14px;
            color: #2f8f4e; font-weight: 600; font-size: 13.5px;
        }
        .vh-etat--ouvert .vh-etat__pt {
            width: 9px; height: 9px; border-radius: 50%; background: #3fb060;
            box-shadow: 0 0 0 3px rgba(63, 176, 96, .18);
        }
        .vh-etat__sep { width: 1px; height: 15px; background: rgba(63, 157, 92, .25); }
        .vh-etat__h { font-weight: 400; font-size: 13px; color: #5d6b64; }

        /* Bande de chiffres, look maquette mobile (grille 2x2, carte
           blanche) — rapatriee elle aussi ; le desktop est plus bas en cqw. */
        .vq .vh-stats {
            margin: 16px 16px 8px;
            background: #ffffff; border-radius: 18px;
            box-shadow: 0 12px 30px rgba(31, 61, 40, .09);
            padding: 6px 4px;
            display: grid; grid-template-columns: 1fr 1fr; gap: 0;
        }
        .vq .vh-stat {
            background: transparent; border: 0; box-shadow: none;
            padding: 16px 10px; display: flex; align-items: center; gap: 11px; min-width: 0;
        }
        .vq .vh-stat__ic {
            width: 40px; height: 40px; border-radius: 50%; flex: none;
            display: grid; place-items: center; font-size: 16px;
            background: #eaf4e8; color: #3f9d5c;
        }
        .vq .vh-stat__ic--or { background: #eaf4e8; color: #3f9d5c; }
        .vq .vh-stat b { font-size: 19px; font-weight: 600; color: #2f9e4f; line-height: 1.15; display: block; }
        .vq .vh-stat span { font-size: 12px; color: #2c3a32; }
        .vq .vh-stat .vh-stat__stars { font-size: 10.5px; }

        @media (min-width: 992px) {
            /* Proportions du hero Animalpedia (mesure prod 13/08) : carte
               plafonnee, rayon 16, marges 40, hauteur ~460 pilotee par un
               contenu recalcule pour une reference de 1320 px. */
            .vq { background: #ffffff; padding: 18px 40px 0; }
            .vq__carte {
                max-width: 1320px; margin: 0 auto;
                border-radius: 16px;
                background: linear-gradient(135deg, #eaf3e6 0%, #f4f9f1 38%, #fbfdfa 70%, #ffffff 100%);
                box-shadow: 0 14px 36px rgba(31, 61, 40, .10);
                min-height: 316px;
            }
            .vq__halo { display: block; border-radius: 50%; }
            .vq__halo--1 { left: -13.5cqw; top: -20cqw; width: 40cqw; height: 40cqw;
                background: radial-gradient(circle at 50% 50%, rgba(178,214,168,.55), rgba(178,214,168,0) 68%); }
            .vq__halo--2 { left: 20cqw; top: 26cqw; width: 44cqw; height: 36cqw;
                background: radial-gradient(circle at 50% 50%, rgba(190,222,180,.40), rgba(190,222,180,0) 65%); }
            .vq__patte { display: block; left: 30cqw; top: 4cqw; width: 2.727cqw; height: 2.727cqw; opacity: .10; }
            .vq__patte svg { width: 100%; height: 100%; }
            .vq__points { display: block; left: 53cqw; top: 19cqw; width: 3.636cqw; height: 2.424cqw; opacity: .22;
                background-image: radial-gradient(#9bb9a3 1.7px, transparent 1.8px); background-size: 0.758cqw 0.758cqw; }

            .vq__photo-cadre { position: absolute; right: 0; top: 0; bottom: 0; left: auto; width: 50%; height: 100%; }
            .vq__photo { position: absolute; inset: 0; left: 0; top: 0; width: 100%; height: 100%; object-position: center; }
            .vq__voile {
                left: 0; right: auto; top: 0; bottom: 0; width: 40%; height: 100%;
                background: linear-gradient(90deg, #f0f7ee 0%, rgba(240,247,238,.5) 45%, rgba(240,247,238,0) 100%);
            }
            .vq__contenu { width: 52%; padding: 3.182cqw 0 3.182cqw 3.939cqw; gap: 1.364cqw; align-items: flex-start; }

            .vq-verif { font-size: clamp(10.5px, 0.909cqw, 12px); padding: 0.606cqw 1.212cqw 0.606cqw 0.909cqw; gap: 0.606cqw; }
            .vq-verif svg { width: 1.212cqw; height: 1.212cqw; }

            .vq__bloc-id {
                display: grid; grid-template-columns: 8.333cqw minmax(0, 1fr);
                column-gap: 1.818cqw; row-gap: 0; align-items: start; margin-top: 0;
            }
            .vq__bloc-id .vq__logo { grid-row: 1 / 3; width: 8.333cqw; height: 8.788cqw; border-radius: 1.061cqw; box-shadow: 0 6px 18px rgba(31,61,40,.10); }
            .vq__bloc-id .vq__id { padding-top: 0; gap: 0; }
            .vq__ligne-nom { gap: 0.758cqw; }
            .vq__nom { font-size: clamp(25px, 2.879cqw, 38px); line-height: 1.08; }
            .vq__macaron { width: 1.667cqw; height: 1.667cqw; margin-top: 0.303cqw; }
            .vq__type { margin-top: 0.455cqw; font-size: clamp(11px, 0.985cqw, 13px); }
            .vq__lieu { margin-top: 0.909cqw; font-size: clamp(13px, 1.136cqw, 15px); gap: 0.606cqw; }
            .vq__lieu svg { width: 1.288cqw; height: 1.288cqw; }
            .vq__infos { grid-column: 2; margin-top: 1.061cqw; gap: 0.909cqw; }
            .vq__infos .vh-etat { padding: 0.682cqw 1.212cqw; gap: 0.758cqw; }
            .vq__infos .vh-etat--ouvert { font-size: clamp(13px, 1.061cqw, 14px); }
            .vq__infos .vh-etat__h { font-size: clamp(12.5px, 0.985cqw, 13.5px); }
            .vq__infos .vh-etat__pt { width: 0.758cqw; height: 0.758cqw; }
            .vq__infos .vh-etat__sep { height: 1.212cqw; }

            .vq__animaux { gap: 0.758cqw; }
            .vq__animaux-titre { font-size: clamp(13px, 1.061cqw, 14px); }
            .vq__pilules { gap: 0.758cqw; }
            .vq__pilule { font-size: clamp(13px, 1.061cqw, 14px); padding: 0.682cqw 1.212cqw; gap: 0.606cqw; }

            .vq__cta { flex-direction: row; gap: 1.061cqw; margin-top: 0.303cqw; }
            .vq__cta .vh-btn { width: auto; min-height: 48px; font-size: clamp(15px, 1.212cqw, 16px); padding: 0.909cqw 1.818cqw; border-radius: 0.909cqw; gap: 0.758cqw; }

            /* Bande de chiffres : barre blanche SOUS la carte, alignee sur sa
               largeur — la ou la composition Animalpedia termine sa carte. */
            .vq__stats { max-width: 1320px; margin: 16px auto 0; }

            /* Le CONTENU de la page suit la largeur du hero : meme boite
               (1320 px utiles + gouttiere de 40), memes bords. Avant, la
               grille debordait de 100 px de chaque cote a 1920 et de 6 px
               a 1366 — les sections ne semblaient pas alignees sur la carte. */
            .vq-suite { max-width: 1400px; padding-left: 40px; padding-right: 40px; }
            .vq .vh-stats {
                margin: 0;
                border-radius: 16px; padding: 0;
                box-shadow: 0 10px 26px rgba(31, 61, 40, .08);
                grid-template-columns: repeat(4, minmax(0, 1fr));
            }
            .vq .vh-stat { padding: 18px 26px; gap: 14px; border-right: 1px solid #eef1ee; }
            .vq .vh-stat:last-child { border-right: 0; }
            .vq .vh-stat__ic { width: 44px; height: 44px; font-size: 18px; }
            .vq .vh-stat b { font-size: 20px; }
            .vq .vh-stat span { font-size: 13px; }
            .vq .vh-stat .vh-stat__stars { font-size: 11px; }
        }