/* ========================================================================== GLOBAL.CSS — Header (navigation) + Footer, partagés sur toutes les pages. Ce fichier dépend des variables CSS (--text-dark, --accent-gold, --bg-card, --maxw, --radius-pill, --radius-md, --radius-sm, etc.) définies dans le :root de chaque page. Il ne redéclare pas ces variables pour éviter les doublons — si tu changes une couleur, change-la à un seul endroit (le :root de la page) et le header/footer suivront automatiquement. ========================================================================== */ /* ---------- HEADER ---------- */ header { position: fixed; /* Réglable depuis l'admin (Général > Apparence du menu) — posé par camille-sync.js sur ; 12px = valeur actuelle du design. */ top: var(--nav-offset-top, 12px); left: 0; right: 0; z-index: 10000; padding: 0 24px; } .nav-wrap { position: relative; z-index: 10000; max-width: var(--maxw); margin: 0 auto; background: rgb(255 255 255 / 52%); backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(14px); border-radius: var(--radius-pill); /* Réglable depuis l'admin (Général > Apparence du menu) — 8px/12px = valeurs actuelles du design. */ padding: var(--nav-pad-v, 8px) var(--nav-pad-h, 12px); display: flex; align-items: center; justify-content: space-between; box-shadow: 0 10px 30px -5px rgba(44, 38, 35, 0.06); } .logo-img { height: 42px; width: auto; display: block; } .nav-links { display: none; gap: 32px; /* Taille modifiable depuis l'admin (onglet Général > Apparence du menu), par appareil : --nav-scale-pc / -tablet / -mobile (posées par camille-sync.js, défaut 1 = taille actuelle). */ font-size: calc(0.92rem * var(--nav-scale-pc, 1)); font-weight: 400; color: var(--text-dark); } .nav-links a, .nav-links .nav-item > span { position: relative; padding: 6px 0; } .nav-links a::after, .nav-links .nav-item > span::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 0; height: 2px; background: var(--accent-gold); border-radius: 2px; transition: width 0.3s ease; } .nav-links a:hover::after, .nav-links .nav-item:hover > span::after { width: 100%; } /* Submenu desktop (niveau 1 — ex: "Prestations") */ .nav-item { position: relative; display: flex; align-items: center; cursor: pointer; } /* Pont invisible qui comble l'espace entre le bouton et le sous-menu, pour que le survol (:hover) ne se coupe pas pendant la descente */ .nav-item::before { content: ""; position: absolute; top: 100%; left: 0; width: 100%; height: 18px; } .nav-item .caret { font-size: 0.7rem; margin-left: 6px; transition: transform 0.3s ease; color: var(--text-muted); } .nav-item:hover .caret, .nav-item.open .caret { transform: rotate(180deg); } .dropdown-menu { position: absolute; top: calc(100% + 18px); left: 50%; transform: translateX(-50%) translateY(10px); background: var(--bg-card); min-width: 240px; border-radius: var(--radius-md); box-shadow: 0 20px 40px -10px rgba(44, 38, 35, 0.12); border: 1px solid var(--bg-soft); padding: 12px; list-style: none; opacity: 0; visibility: hidden; pointer-events: none; transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1); } .nav-item:hover .dropdown-menu, .nav-item.open .dropdown-menu { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0); } .dropdown-menu li a, .dropdown-menu li span { display: block; padding: 10px 18px; border-radius: 14px; font-size: 0.88rem; color: var(--text-dark); text-align: left; } .dropdown-menu li a:hover, .dropdown-menu li span:hover { background: var(--bg-main); color: var(--accent-gold); } .dropdown-menu li a::after, .dropdown-menu li span::after { display: none; } /* Submenu desktop (niveau 2 — ex: "Famille" > "Extérieur / Intérieur") */ .dropdown-menu li.has-submenu { position: relative; } .dropdown-menu li.has-submenu > a, .dropdown-menu li.has-submenu > span { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .dropdown-menu li.has-submenu .sub-caret { font-size: 0.8rem; color: var(--text-muted); transition: transform 0.3s ease; } .dropdown-menu li.has-submenu:hover .sub-caret, .dropdown-menu li.has-submenu.open .sub-caret { transform: translateX(2px); } /* Pont invisible qui comble l'espace entre "Famille" et son sous-sous-menu, même logique que .nav-item::before, mais sur le côté droit cette fois */ .dropdown-menu li.has-submenu::after { content: ""; position: absolute; top: 0; left: 100%; width: 16px; height: 100%; } .dropdown-submenu { position: absolute; top: -12px; left: calc(100% + 16px); background: var(--bg-card); min-width: 200px; border-radius: var(--radius-md); box-shadow: 0 20px 40px -10px rgba(44, 38, 35, 0.12); border: 1px solid var(--bg-soft); padding: 12px; list-style: none; opacity: 0; visibility: hidden; pointer-events: none; transform: translateX(-8px); transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1); } .dropdown-menu li.has-submenu:hover .dropdown-submenu, .dropdown-menu li.has-submenu.open .dropdown-submenu { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(0); } .dropdown-submenu li a { display: block; padding: 10px 18px; border-radius: 14px; font-size: 0.88rem; color: var(--text-dark); text-align: left; } .dropdown-submenu li a:hover { background: var(--bg-main); color: var(--accent-gold); } /* ---------- STYLE "MEGA-MENU" (alternative au flyout ci-dessus) ---------- Choisi dans l'admin (Général > Apparence du menu). Par défaut le survol d'un item avec sous-menu affiche une liste, et un sous-sous-menu s'ouvre à son tour au survol (flyout, voir .dropdown-submenu plus haut). En mode "mega", le panneau s'élargit et étale directement TOUS les sous-menus (colonnes), sous-sous-menus compris, sans survol supplémentaire — posé par camille-sync.js via data-submenu-style="mega" sur . */ body[data-submenu-style="mega"] .dropdown-menu { min-width: 620px; max-width: min(90vw, 780px); columns: 3; column-gap: 28px; } body[data-submenu-style="mega"] .dropdown-menu > li { break-inside: avoid; margin-bottom: 6px; } /* Un item avec sous-menu devient un titre de colonne : plus de flyout au survol, son sous-sous-menu reste affiché en dessous en permanence. Pas de lien (voir navTrigger() dans global.js) : cliquer dessus ne fait rien, c'est un simple regroupement visuel, pas une page. */ body[data-submenu-style="mega"] .dropdown-menu li.has-submenu > a, body[data-submenu-style="mega"] .dropdown-menu li.has-submenu > span { font-weight: 700; color: var(--text-dark); border-bottom: 1px solid var(--bg-soft); border-radius: 14px 14px 0 0; margin-bottom: 4px; } body[data-submenu-style="mega"] .dropdown-menu li.has-submenu > a .sub-caret, body[data-submenu-style="mega"] .dropdown-menu li.has-submenu > span .sub-caret { display: none; } body[data-submenu-style="mega"] .dropdown-menu li.has-submenu::after { display: none; } body[data-submenu-style="mega"] .dropdown-submenu { position: static; transform: none; background: none; border: none; box-shadow: none; min-width: 0; padding: 2px 0 0 14px; } /* opacity/visibility/pointer-events restent conditionnés au survol/ouverture du menu (comme la règle par défaut de .dropdown-submenu plus haut) : sans ça, ces liens — invisibles mais interactifs — captaient le survol dès que la souris passait dessus n'importe où sous la nav, rouvrant tout le menu sans même être sur "Prestations". */ body[data-submenu-style="mega"] .nav-item:hover .dropdown-submenu, body[data-submenu-style="mega"] .nav-item.open .dropdown-submenu { opacity: 1; visibility: visible; pointer-events: auto; } /* Burger & Mobile menu */ .burger { width: 32px; height: 22px; cursor: pointer; z-index: 300; display: flex; flex-direction: column; justify-content: space-between; } .burger span { display: block; height: 2px; width: 100%; background: var(--text-dark); border-radius: 2px; transition: all 0.3s ease; } .burger.open span:nth-child(1) { transform: translateY(10px) rotate(45deg); } .burger.open span:nth-child(2) { opacity: 0; } .burger.open span:nth-child(3) { transform: translateY(-10px) rotate(-45deg); } .mobile-menu { position: fixed; top: 85px; right: 24px; left: 24px; z-index: 10000; background: var(--bg-card); border-radius: var(--radius-md); padding: 24px; box-shadow: 0 25px 50px -12px rgba(44, 38, 35, 0.2); display: flex; flex-direction: column; gap: 8px; transform: scale(0.95) translateY(-10px); opacity: 0; visibility: hidden; transition: all 0.3s ease; max-height: calc(100vh - 110px); /* dvh = hauteur réellement visible sur mobile (barre d'adresse comprise) : avec vh, le bas du menu dépassait de l'écran et restait inaccessible. */ max-height: calc(100dvh - 110px); overflow-y: auto; /* Le défilement reste dans le menu : la page derrière ne bouge plus. */ overscroll-behavior: contain; -webkit-overflow-scrolling: touch; } /* Bouton d'action (ex. "Me contacter") en bas du menu mobile — texte, lien et couleurs réglables depuis l'admin (Général > Bouton du menu). */ .mobile-menu .mobile-menu-cta { --radius-sm: 40px; border-radius: var(--radius-sm); margin-top: 8px; justify-content: center; text-align: center; padding: 14px 24px; } .mobile-menu .mobile-menu-cta:hover { filter: brightness(0.96); } /* Le menu est une colonne flex à hauteur limitée : sans ça, les sous-menus (overflow: hidden) étaient écrasés à 0px au lieu de faire défiler le menu. */ .mobile-menu > * { flex-shrink: 0; } /* Page figée derrière le menu mobile ouvert (classe posée par global.js). */ body.mobile-menu-open { overflow: hidden; } .mobile-menu.open { transform: scale(1) translateY(0); opacity: 1; visibility: visible; } .mobile-menu a { padding: 12px 18px; border-radius: var(--radius-sm); /* Taille modifiable depuis l'admin, par appareil (voir plus bas : mobile par défaut ici, tablette redéfinie dans le @media dédié). */ font-size: calc(0.98rem * var(--nav-scale-mobile, 1)); font-weight: 500; } .mobile-menu a:hover { background: var(--bg-main); } .mobile-submenu { max-height: 0; overflow: hidden; list-style: none; transition: max-height 0.4s ease; } .mobile-submenu.open { max-height: 2000px; } .mobile-submenu li a { padding-left: 32px; font-size: calc(0.9rem * var(--nav-scale-mobile, 1)); color: var(--text-muted); } /* Sous-sous-menu mobile (ex: "Famille" > Extérieur / Intérieur) */ .mobile-submenu-nested { max-height: 0; overflow: hidden; list-style: none; transition: max-height 0.4s ease; } .mobile-submenu-nested.open { max-height: 1000px; } .mobile-submenu-nested li a { padding-left: 48px; font-size: calc(0.86rem * var(--nav-scale-mobile, 1)); } /* Tablette (768-1023px) : le menu burger reste utilisé (voir breakpoint plus bas), mais avec sa propre taille de texte réglable dans l'admin. */ @media (min-width: 768px) and (max-width: 1023px) { .mobile-menu a { font-size: calc(0.98rem * var(--nav-scale-tablet, 1)); } .mobile-submenu li a { font-size: calc(0.9rem * var(--nav-scale-tablet, 1)); } .mobile-submenu-nested li a { font-size: calc(0.86rem * var(--nav-scale-tablet, 1)); } } .mobile-sub-toggle > a { display: flex; justify-content: space-between; align-items: center; } /* 1024px (et non 960) : les tablettes (iPad compris, jusqu'à 1024px en portrait) gardent le menu burger façon mobile plutôt que le mini-menu serré du bureau. */ @media (min-width: 1024px) { .nav-links { display: flex; align-items: center; } .burger { display: none; } } /* ---------- FOOTER ---------- */ footer { background: var(--bg-card); padding: 70px 0 30px; } /* Vague de fin de page (accueil, à propos, contact) : posée par global.js au bas de la dernière section, avant la FAQ ou le pied de page — comme sur les pages créées avec le modèle. */ .page-end-wave { position: absolute; left: 0; right: 0; bottom: -1px; width: 100%; line-height: 0; z-index: 3; pointer-events: none; } .page-end-wave svg { display: block; width: 100%; height: 90px; } .footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 40px; margin-bottom: 50px; text-align: center; } @media (min-width: 768px) { .footer-grid { text-align: left; } } .footer-col h4 { font-size: 1.1rem; margin-bottom: 18px; color: var(--text-dark); } .footer-col p, .footer-col a { color: var(--text-muted); font-size: 0.92rem; display: block; margin-bottom: 8px; } .footer-col a:hover { color: var(--accent-gold); } .socials { display: flex; gap: 12px; justify-content: center; margin-top: 16px; } @media (min-width: 768px) { .socials { justify-content: flex-start; } } .socials a { width: 40px; height: 40px; border-radius: 50%; background: var(--bg-main); display: flex; align-items: center; justify-content: center; transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease; } .socials a svg { width: 19px; height: 19px; } .socials a:hover { background: var(--accent-gold); color: #FFF; transform: translateY(-2px); } .footer-bottom { border-top: 1px solid var(--bg-soft); padding-top: 24px; text-align: center; font-size: 0.82rem; color: var(--text-light); } /* ---------- FAQ ---------- Injectée par global.js dans #site-faq, sur toutes les pages qui portent ce placeholder (contenu géré depuis l'admin, onglet "FAQ"). */ .faq { padding: 90px 0; } .faq-list { max-width: 800px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; } .faq-item { background: var(--bg-card); border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-soft); border: 1px solid var(--bg-soft); transition: all 0.3s ease; } .faq-question { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 22px 28px; background: none; border: none; text-align: left; cursor: pointer; font-family: 'Fraunces', serif; font-size: 1.1rem; color: var(--text-dark); } .faq-icon { position: relative; flex: 0 0 32px; width: 32px; height: 32px; border-radius: 50%; background: var(--bg-main); color: var(--accent-gold); font-size: 0; /* le "+" est dessiné en CSS (centrage exact) */ transition: all 0.3s ease; } .faq-icon::before, .faq-icon::after { content: ''; position: absolute; top: 50%; left: 50%; width: 12px; height: 2px; border-radius: 1px; background: currentColor; transform: translate(-50%, -50%); } .faq-icon::after { transform: translate(-50%, -50%) rotate(90deg); } .faq-item.open .faq-icon { transform: rotate(45deg); background: var(--accent-gold); color: #FFF; } .faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.4s cubic-bezier(0.2, 0.8, 0.2, 1); } .faq-answer p { padding: 0 28px 24px; color: var(--text-muted); font-size: 0.95rem; } .faq-item.open .faq-answer { max-height: 300px; }