/* ============================================================ SHARED HEADER — single source of truth for all pages Mirrors the header from index.html / index.css Linked LAST in so it overrides page-specific rules ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Bodoni+Moda:wght@500&display=swap'); :root { --hdr-gold: #C0A062; --hdr-dark: #2F353B; --hdr-deep: #1E242A; --hdr-slate: #545F66; --hdr-gutter: max(40px, calc((100% - 1200px) / 2)); } /* HEADER ----------------------------------------------------- */ header[role="banner"] { display: flex !important; justify-content: center !important; align-items: center !important; padding: 0 40px !important; height: 110px !important; background: #fff !important; border-bottom: 1px solid #eceae3 !important; position: sticky !important; top: 0 !important; z-index: 1000 !important; font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif !important; } /* BRAND LOGO V2 — horizontal lockup (symbole a/ + wordmark ARGAMAN SURGERIES / MEXICO) */ header[role="banner"] .brand-logo { display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; gap: 0 !important; text-decoration: none !important; position: absolute !important; left: var(--hdr-gutter) !important; z-index: 1001 !important; transform: translateY(-4px) !important; } header[role="banner"] .brand-icon { width: 80px !important; height: 90px !important; margin-bottom: 0 !important; color: var(--hdr-dark) !important; display: flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0 !important; transition: transform .3s, color .3s !important; } header[role="banner"] .brand-icon svg { width: 100%; height: 100%; overflow: visible; } header[role="banner"] .brand-text { display: flex !important; flex-direction: column !important; align-items: flex-start !important; justify-content: center !important; line-height: 1 !important; margin-left: -18px !important; margin-top: 10px !important; } header[role="banner"] .brand-name { font-family: 'Inter', sans-serif !important; font-weight: 500 !important; font-size: 11.5px !important; letter-spacing: 2.5px !important; color: #1a1a1a !important; text-transform: uppercase !important; white-space: nowrap !important; transition: color .3s !important; } header[role="banner"] .brand-sub { font-family: 'Inter', sans-serif !important; font-weight: 400 !important; font-size: 8.5px !important; letter-spacing: 4.5px !important; color: #777 !important; text-transform: uppercase !important; margin-top: 4px !important; white-space: nowrap !important; transition: color .3s !important; } /* Wordmark 3 lignes : ARGAMAN / PLASTIC SURGERIES / MEXICO Scopé à .brand-text--3l : les pages en 2 lignes ne sont pas affectées. */ header[role="banner"] .brand-text--3l { margin-top: 6px !important; } /* ARGAMAN garde sa taille d'origine (.brand-name inchangé) */ header[role="banner"] .brand-mid { font-family: 'Inter', sans-serif !important; font-weight: 400 !important; font-size: 9px !important; letter-spacing: 2.6px !important; color: #444 !important; text-transform: uppercase !important; margin-top: 3px !important; white-space: nowrap !important; transition: color .3s !important; } header[role="banner"] .brand-text--3l .brand-sub { margin-top: 3px !important; } header[role="banner"] .brand-logo:hover .brand-icon, header[role="banner"] .brand-logo:hover .brand-name, header[role="banner"] .brand-logo:hover .brand-mid, header[role="banner"] .brand-logo:hover .brand-sub { color: var(--hdr-gold) !important; } header[role="banner"] .brand-logo:hover .brand-icon { transform: scale(1.05); } /* NAVBAR ----------------------------------------------------- */ header[role="banner"] .navbar { display: flex !important; align-items: center !important; height: 100% !important; gap: 8px !important; margin-left: 220px !important; padding-right: 170px !important; } header[role="banner"] .nav-wrapper-mega, header[role="banner"] .nav-wrapper-simple { height: 100%; display: flex; align-items: center; } header[role="banner"] .nav-wrapper-mega { position: static; } header[role="banner"] .nav-wrapper-simple { position: relative; } header[role="banner"] .nav-link { text-decoration: none !important; color: var(--hdr-dark) !important; font-family: 'Inter', sans-serif !important; font-size: 14px !important; font-weight: 600 !important; text-transform: uppercase !important; letter-spacing: 0.6px !important; padding: 0 8px !important; height: 100% !important; display: flex !important; align-items: center !important; gap: 6px !important; transition: color .3s !important; cursor: pointer !important; white-space: nowrap !important; } header[role="banner"] .nav-link:hover { color: var(--hdr-gold) !important; } header[role="banner"] .nav-link i { font-size: 10px !important; color: var(--hdr-gold) !important; transition: transform .3s !important; } /* BTN BOOK NOW ----------------------------------------------- */ header[role="banner"] .btn-book { text-decoration: none !important; color: var(--hdr-dark) !important; background: transparent !important; border: 1px solid var(--hdr-dark) !important; padding: 11px 22px !important; position: absolute !important; right: var(--hdr-gutter) !important; top: 50% !important; transform: translateY(-50%) !important; font-family: 'Inter', sans-serif !important; font-size: 11.5px !important; font-weight: 600 !important; letter-spacing: 2px !important; text-transform: uppercase !important; transition: all .3s !important; cursor: pointer !important; white-space: nowrap !important; } /* FOOTER BRAND LOCKUP --------------------------------------- */ .f-brand-block { display: flex !important; flex-direction: row !important; align-items: center !important; gap: 0 !important; text-decoration: none !important; } .f-brand-icon-ft { width: 80px !important; height: 90px !important; color: #1a1a1a; flex-shrink: 0; } .f-brand-text-ft { display: flex !important; flex-direction: column !important; align-items: flex-start !important; line-height: 1 !important; margin-left: -18px !important; margin-top: 10px !important; } .f-name-ft { font-family: 'Inter', sans-serif !important; font-weight: 500 !important; font-size: 13px !important; letter-spacing: 2.8px !important; color: #1a1a1a !important; text-transform: uppercase !important; white-space: nowrap !important; } .f-sub-ft { font-family: 'Inter', sans-serif !important; font-weight: 400 !important; font-size: 9px !important; letter-spacing: 4.5px !important; color: #888 !important; margin-top: 4px !important; text-transform: uppercase !important; white-space: nowrap !important; } /* Adresse et icônes sociales alignées au début visible du `a` du logo (compensation du padding interne du SVG viewBox 160 180 où le 'a' démarre à x=22) */ .f-col-identity .f-address-box, .f-col-identity .f-socials-row { padding-left: 12px !important; margin-left: 0 !important; } /* ============================================================ FOOTER MOBILE LAYOUT — identique à la cost page sur toutes les pages ============================================================ */ @media (max-width: 1024px) { .footer-grid-wrapper { grid-template-columns: repeat(3, 1fr) !important; gap: 20px !important; text-align: left !important; padding-bottom: 40px !important; } .f-col-identity { grid-column: span 3 !important; align-items: center !important; border-bottom: 1px solid #ddd !important; padding-bottom: 20px !important; margin-bottom: 10px !important; width: 100% !important; text-align: center !important; } .f-col-identity .f-brand-block { justify-content: center !important; } .f-col-identity .f-address-box, .f-col-identity .f-socials-row { padding-left: 0 !important; text-align: center !important; width: 100% !important; } .f-col-identity .f-address-box p { font-size: 11px !important; line-height: 1.5 !important; margin-bottom: 3px !important; } .f-col-identity .f-address-box .highlight { font-size: 12px !important; margin-top: 6px !important; } .f-col-identity .f-socials-row { justify-content: center !important; } .f-col-links { align-items: flex-start !important; text-align: left !important; } .f-col-links h4, .f-group-title { text-align: left !important; font-size: 11px !important; } .f-link-list li a { justify-content: flex-start !important; text-align: left !important; padding-left: 0 !important; font-size: 11px !important; } .f-link-list li a:hover { padding-left: 0 !important; color: var(--hdr-gold) !important; } } @media (max-width: 768px) { .footer-grid-wrapper { grid-template-columns: repeat(3, 1fr) !important; gap: 10px !important; padding-left: 10px !important; padding-right: 10px !important; } .f-col-identity { grid-column: span 3 !important; text-align: center !important; align-items: center !important; border-bottom: 1px solid #ddd !important; padding-bottom: 30px !important; margin-bottom: 10px !important; width: 100% !important; } .f-col-identity .f-address-box { width: 100% !important; text-align: center !important; } .f-col-identity .f-address-box p { font-size: 11px !important; line-height: 1.5 !important; margin-bottom: 3px !important; } .f-col-identity .f-address-box .highlight { font-size: 12px !important; margin-top: 6px !important; } .f-col-identity .f-socials-row { justify-content: center !important; width: 100% !important; } .f-col-links h4, .f-group-title { font-size: 11px !important; } .f-link-list li a { font-size: 11px !important; } .footer-info-section { padding: 50px 20px 20px !important; } } header[role="banner"] .btn-book:hover { background: var(--hdr-gold) !important; border-color: var(--hdr-gold) !important; color: #fff !important; } /* RESPONSIVE TIGHTENING ON SMALLER DESKTOPS ------------------ */ @media (max-width: 1440px) and (min-width: 1025px) { header[role="banner"] .navbar { margin-left: 200px !important; padding-right: 160px !important; gap: 4px !important; } header[role="banner"] .nav-link { font-size: 14px !important; padding: 0 6px !important; letter-spacing: 0.4px !important; } } @media (max-width: 1280px) and (min-width: 1025px) { header[role="banner"] .navbar { margin-left: 180px !important; padding-right: 150px !important; } header[role="banner"] .brand-name { font-size: 11px !important; letter-spacing: 2px !important; } header[role="banner"] .nav-link { font-size: 12px !important; padding: 0 6px !important; } } /* DROPDOWNS -------------------------------------------------- */ @media (min-width: 1025px) { header[role="banner"] .nav-wrapper-mega:hover .nav-link, header[role="banner"] .nav-wrapper-simple:hover .nav-link { color: var(--hdr-gold) !important; } header[role="banner"] .nav-wrapper-mega:hover .nav-link i, header[role="banner"] .nav-wrapper-simple:hover .nav-link i { transform: rotate(180deg) !important; } header[role="banner"] .nav-wrapper-mega:hover .dropdown-menu, header[role="banner"] .nav-wrapper-simple:hover .dropdown-menu { visibility: visible !important; opacity: 1 !important; transform: translateY(0) !important; } header[role="banner"] .nav-wrapper-simple:hover .dropdown-menu.simple-style { transform: translateX(-50%) translateY(0) !important; } } header[role="banner"] .dropdown-menu { background: var(--hdr-deep) !important; position: absolute !important; top: 100% !important; visibility: hidden; opacity: 0; transform: translateY(10px); transition: all .3s; box-shadow: 0 20px 40px rgba(0,0,0,0.25); z-index: 999; } header[role="banner"] .dropdown-menu.mega-style { left: 0 !important; width: 100% !important; padding: 54px 80px !important; display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: 40px !important; } header[role="banner"] .dropdown-menu.simple-style { left: 50% !important; transform: translateX(-50%) translateY(10px) !important; min-width: 260px !important; padding: 30px !important; display: flex !important; flex-direction: column !important; } header[role="banner"] .column-title { color: var(--hdr-gold) !important; font-family: 'Inter', sans-serif !important; font-size: 11px !important; font-weight: 700 !important; letter-spacing: 3px !important; text-transform: uppercase !important; margin-bottom: 20px !important; padding-bottom: 12px !important; border-bottom: 1px solid rgba(192,160,98,0.2) !important; } header[role="banner"] .dropdown-menu ul { list-style: none !important; padding: 0 !important; margin: 0 !important; } header[role="banner"] .dropdown-menu li { margin-bottom: 11px !important; } header[role="banner"] .dropdown-menu li a { color: #b9bcc0 !important; font-family: 'Inter', sans-serif !important; font-size: 14px !important; font-weight: 400 !important; text-decoration: none !important; position: relative !important; display: block !important; transition: all .3s !important; text-transform: none !important; letter-spacing: 0 !important; } header[role="banner"] .dropdown-menu li a::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 0; height: 1px; background: var(--hdr-gold); transition: width .3s; } header[role="banner"] .dropdown-menu li a:hover { color: var(--hdr-gold) !important; padding-left: 22px !important; } header[role="banner"] .dropdown-menu li a:hover::before { width: 14px !important; } /* HAMBURGER -------------------------------------------------- */ header[role="banner"] .hamburger { display: none; flex-direction: column; gap: 6px; cursor: pointer; z-index: 2001; } header[role="banner"] .bar { width: 30px; height: 2px; background: var(--hdr-dark); transition: all .3s; } header[role="banner"] .hamburger.active .bar:nth-child(1) { transform: translateY(8px) rotate(45deg); } header[role="banner"] .hamburger.active .bar:nth-child(2) { opacity: 0; } header[role="banner"] .hamburger.active .bar:nth-child(3) { transform: translateY(-8px) rotate(-45deg); } /* RESPONSIVE ------------------------------------------------- */ @media (max-width: 1024px) { /* Override legacy body padding (était lié à un ancien header position:fixed). Le header est maintenant sticky donc plus besoin de padding. */ body { padding-top: 0 !important; } header[role="banner"] .hamburger { display: flex !important; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); } header[role="banner"] .navbar { position: fixed !important; top: 110px !important; left: 0 !important; width: 100% !important; height: calc(100vh - 110px) !important; background: #fff !important; flex-direction: column !important; align-items: flex-start !important; padding: 40px !important; transform: translateX(-100%); transition: transform .4s ease; overflow-y: auto; gap: 0 !important; margin-left: 0 !important; z-index: 1999; } header[role="banner"] .navbar.active { transform: translateX(0) !important; } header[role="banner"] .nav-wrapper-mega, header[role="banner"] .nav-wrapper-simple { width: 100%; height: auto; flex-direction: column; align-items: flex-start; padding: 14px 0; border-bottom: 1px solid #eceae3; } header[role="banner"] .btn-book { position: relative !important; right: auto !important; top: auto !important; transform: none !important; margin-top: 20px !important; width: 100% !important; text-align: center !important; padding: 15px !important; display: inline-flex !important; justify-content: center !important; } /* Mobile : a/ ancré à gauche, wordmark centré dans le header */ header[role="banner"] .brand-logo { left: 0 !important; right: 0 !important; width: 100% !important; transform: translateY(-2px) !important; justify-content: flex-start !important; padding-left: 0 !important; } header[role="banner"] .brand-logo .brand-icon { margin-left: 20px !important; } header[role="banner"] .brand-text--3l { position: absolute !important; left: 50% !important; top: 50% !important; transform: translate(-50%, -50%) !important; margin-left: 0 !important; margin-top: 0 !important; align-items: center !important; text-align: center !important; } header[role="banner"] .brand-icon { width: 60px !important; height: 68px !important; } header[role="banner"] .brand-name { font-size: 11px !important; letter-spacing: 2px !important; } header[role="banner"] .brand-sub { font-size: 8.5px !important; letter-spacing: 4px !important; } header[role="banner"] .navbar { margin-left: 0 !important; padding-right: 0 !important; } /* Hide all dropdowns by default on mobile */ header[role="banner"] .dropdown-menu, header[role="banner"] .dropdown-menu.mega-style, header[role="banner"] .dropdown-menu.simple-style { display: none !important; } /* Show ONLY when parent wrapper has .open class (added by toggleSubMenu JS) */ header[role="banner"] .nav-wrapper-mega.open .dropdown-menu, header[role="banner"] .nav-wrapper-simple.open .dropdown-menu { display: block !important; position: static !important; visibility: visible !important; opacity: 1 !important; transform: none !important; background: #fff !important; box-shadow: none !important; width: 100% !important; padding: 12px 0 8px 20px !important; } header[role="banner"] .nav-wrapper-mega.open .dropdown-menu.mega-style { display: grid !important; grid-template-columns: 1fr !important; gap: 0 !important; } /* Category titles as simple labels (no accordion, no toggle) — CENTRÉS */ header[role="banner"] .column-title { display: block !important; color: var(--hdr-gold) !important; background: transparent !important; cursor: default !important; padding: 18px 0 12px 0 !important; margin: 14px 0 0 0 !important; border: 0 !important; border-top: 1px solid #eceae3 !important; position: relative !important; font-size: 12px !important; font-weight: 700 !important; letter-spacing: 2.5px !important; text-transform: uppercase !important; text-align: center !important; } /* First category: no top divider */ header[role="banner"] .dropdown-menu.mega-style > div:first-child .column-title { border-top: 0 !important; margin-top: 0 !important; padding-top: 4px !important; } /* Remove any leftover + accordion arrow */ header[role="banner"] .column-title::after { content: none !important; display: none !important; } /* Show all procedure lists directly, sans accordéon, centrés */ header[role="banner"] .dropdown-menu.mega-style > div > ul, header[role="banner"] .dropdown-menu.simple-style ul, header[role="banner"] .dropdown-menu ul { display: block !important; padding: 0 !important; margin: 0 !important; list-style: none !important; text-align: center !important; } header[role="banner"] .dropdown-menu li { list-style: none !important; text-align: center !important; padding: 1px 0 !important; margin: 0 !important; } header[role="banner"] .dropdown-menu li a { color: #444 !important; display: inline-block !important; font-size: 14.5px !important; padding: 2px 12px !important; line-height: 1.3 !important; } } /* ============================================================ TRANSITION DE PAGE (mobile) — fondu d'apparition au chargement pour adoucir la navigation entre les pages ============================================================ */ @keyframes argPageFadeIn { from { opacity: 0; } to { opacity: 1; } } @media (max-width: 768px) { body { animation: argPageFadeIn 0.4s ease-out both; } } @media (prefers-reduced-motion: reduce) { body { animation: none !important; } } /* Masquer les meta-catégories grises sous les cartes du carrousel « Latest Blog Posts » */ .argaman-blog-section .blog-meta, .latest-blog-section .card-meta { display: none !important; } /* Ligne intermediaire du wordmark FOOTER : PLASTIC SURGERIES Place ici car css/header.css est charge par toutes les pages. */ .f-mid-ft { font-family: 'Inter', sans-serif !important; font-weight: 400 !important; font-size: 10px !important; letter-spacing: 2.6px !important; color: #444 !important; margin-top: 3px !important; text-transform: uppercase !important; white-space: nowrap !important; }