/* ========================================================================== Apotikka — ajustements par-dessus le rendu Framer (chargé après les styles Framer : ces règles gagnent la cascade) ========================================================================== */ /* Palette (tokens du site) */ :root { --apk-vert: #08573c; /* vert principal (CTA, logo) */ --apk-vert-nuit: #053023; /* vert profond (fond du menu mobile) */ --apk-creme: #fffaf7; --apk-encre-douce: rgba(28, 21, 18, 0.75); } /* -------------------------------------------------------------------------- Correctifs de base (animations Framer neutralisées, survols) -------------------------------------------------------------------------- */ /* fond posé aussi sur : évite tout flash blanc entre deux pages */ html { background-color: var(--apk-creme); } /* héros agrandis à 85vh : le calque d'image de fond (figé à sa hauteur Framer d'origine) doit remplir toute la hauteur du héros, sinon une bande du fond de section apparaît en bas (ex. consultations) */ [data-framer-name="Hero"] [data-framer-name="Background"] { inset: 0 !important; height: auto !important; } [data-framer-name="Hero"] [data-framer-name="Background"] img { height: 100% !important; } /* animations d'apparition Framer neutralisées : le contenu reste visible même sans JS. On exclut les blocs pris en charge par notre reveal maison. */ [data-framer-appear-id]:not(.apk-reveal) { opacity: 1 !important; transform: none !important; } /* -------------------------------------------------------------------------- Transition entre pages (API native View Transitions) La navbar garde son identité (view-transition-name) : elle ne clignote pas, seul le contenu fait un fondu rapide. Navigateurs non compatibles : la navigation reste instantanée (dégradation propre). -------------------------------------------------------------------------- */ @view-transition { navigation: auto; } .apk-header { view-transition-name: apk-navbar; } ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.18s; animation-timing-function: ease; } @media (prefers-reduced-motion: reduce) { ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; } } a[data-framer-name^="Primary"]:hover { filter: brightness(0.92); } a[data-framer-name^="Secondary"]:hover { filter: brightness(0.96); } /* -------------------------------------------------------------------------- Transition de page (fondu doux) + apparition au scroll Progressive enhancement : classes posées par apotikka.js. Sans JS, tout reste affiché. Respecte prefers-reduced-motion. -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: no-preference) { /* apparition au scroll : fondu + légère montée. La transition n'est active qu'après pose de .apk-anim (par le JS, juste avant le reveal) pour éviter tout fondu de sortie à l'initialisation. */ .apk-reveal { opacity: 0 !important; transform: translateY(14px) !important; will-change: opacity, transform; } .apk-reveal.apk-anim { transition: opacity 0.35s ease, transform 0.35s ease; } .apk-reveal.apk-vu { opacity: 1 !important; transform: none !important; } } /* -------------------------------------------------------------------------- Indicateur de scroll (flèche bas en pied de héros, posé par apotikka.js) -------------------------------------------------------------------------- */ .apk-scroll-indice { position: absolute; left: 50%; bottom: 80px; transform: translateX(-50%); z-index: 5; opacity: 0.75; pointer-events: none; } /* pas de flèche de scroll sur mobile */ @media (max-width: 767.98px) { .apk-scroll-indice { display: none; } } @media (prefers-reduced-motion: no-preference) { .apk-scroll-indice svg { animation: apk-bob 1.6s ease-in-out infinite; } } @keyframes apk-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } } /* -------------------------------------------------------------------------- Navbar : plus de barre de séparation, largeur alignée sur le contenu (.apk-header est posé par apotikka.js sur le conteneur fixe) La largeur de la carte navbar définit la grille de tout le site : 1200px, le gabarit des design systems de référence (Bootstrap 1140, la plupart des sites premium entre 1140 et 1200). -------------------------------------------------------------------------- */ .apk-header [data-framer-name="Nav Content"] { max-width: 1200px !important; } .apk-header [data-framer-name="Default"], .apk-header [data-framer-name="Scrolled"] { box-shadow: none !important; background: transparent !important; border: none !important; } /* -------------------------------------------------------------------------- Gabarit de contenu : la zone utile de chaque section est plafonnée à 1196px (= largeur de la navbar) et centrée ; les fonds de section restent pleine largeur. apotikka.js pose .apk-contained et calcule le plafond par conteneur (1196px + ses paddings propres). -------------------------------------------------------------------------- */ .apk-contained { margin-left: auto !important; margin-right: auto !important; } /* Sections avec image bord à bord : pleine largeur jusqu'à 1536px, au-delà le bloc entier est contenu et centré */ @media (min-width: 1536px) { .apk-fullbleed { max-width: 1536px !important; margin-left: auto !important; margin-right: auto !important; } } /* Sections à fond vert clair : fond bord à bord sur toute la largeur ; le contenu reste centré à la navbar (via son conteneur .apk-contained). apotikka.js pose .apk-section-verte (et retire .apk-fullbleed). */ .apk-section-verte { max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; } /* Bloc à fond vert clair situé DANS une section par ailleurs neutre (ex. « Choisissez la formule ») : il s'étend bord à bord (breakout hors de son conteneur), son contenu reste centré à la navbar via son padding. */ .apk-verte-pleine { width: 100vw !important; max-width: 100vw !important; margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important; padding-left: max(20px, calc((100vw - var(--apk-grille, 1196px)) / 2)) !important; padding-right: max(20px, calc((100vw - var(--apk-grille, 1196px)) / 2)) !important; } /* Accueil, section « Je suis Astrid » : le padding latéral de la section suit les marges de la grille (photo et texte calés sur la navbar) */ @media (min-width: 1160px) { .framer-oap7bg { max-width: none !important; width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; padding-left: max(20px, calc((100vw - var(--apk-grille, 1196px)) / 2)) !important; padding-right: max(20px, calc((100vw - var(--apk-grille, 1196px)) / 2)) !important; } } /* -------------------------------------------------------------------------- Vignettes « le déroulé » (accueil) : cadrage centré sur le sujet -------------------------------------------------------------------------- */ /* bocal de pétales : le sujet est dans la moitié basse de la photo */ [data-framer-name="Services"] img[src*="Mj7PpOiS"] { object-position: 50% 72% !important; } /* fleur blanche : cadrage centré sur la fleur */ [data-framer-name="Services"] img[src*="UWaCcq7F"] { object-position: 50% 48% !important; } /* -------------------------------------------------------------------------- Accordéons FAQ -------------------------------------------------------------------------- */ [data-framer-name="Closed"] { cursor: pointer; } /* réponse : ouverture/fermeture animée (hauteur mesurée par le JS + fondu) */ [data-framer-name="Closed"] .apk-reponse { height: 0; overflow: hidden; transition: height 0.3s ease, margin-top 0.3s ease; /* marge négative posée par apotikka.js pour annuler le gap flex quand fermé */ } [data-framer-name="Closed"] .apk-reponse-inner { font-family: Inter, "Inter Placeholder", sans-serif; font-size: 16px; line-height: 1.6; color: var(--apk-encre-douce); padding-bottom: 22px; opacity: 0; transition: opacity 0.3s ease; /* padding gauche/droit calé sur la question par apotikka.js */ } [data-framer-name="Closed"].apk-ouvert .apk-reponse-inner { opacity: 1; } @media (prefers-reduced-motion: reduce) { [data-framer-name="Closed"] .apk-reponse, [data-framer-name="Closed"] .apk-reponse-inner { transition: none; } } [data-framer-name="Closed"] [data-framer-component-type="SVG"] { transition: transform 0.25s ease; } [data-framer-name="Closed"].apk-ouvert [data-framer-component-type="SVG"] { transform: rotate(0deg) !important; } .apk-reponse p + p { margin-top: 0.8em; } /* mentions « Important » : même couleur que le texte, simple italique */ .apk-reponse em { display: block; margin-top: 0.8em; font-style: italic; font-size: 0.95em; color: inherit; } /* -------------------------------------------------------------------------- Avertissement légal (footer) -------------------------------------------------------------------------- */ .apk-avertissement { font-family: Inter, "Inter Placeholder", sans-serif; font-size: 11px; line-height: 1.5; color: rgba(254, 245, 240, 0.55); max-width: calc(var(--apk-grille, 1196px) + 224px); margin: 24px auto 0; padding: 0 20px; } @media (min-width: 1160px) { .apk-avertissement { padding: 0 112px; } } /* -------------------------------------------------------------------------- Menu mobile (plein écran, padding 20px, cartes crème sur fond vert nuit) -------------------------------------------------------------------------- */ #apk-menu-mobile { position: fixed; inset: 0; z-index: 9; /* sous la navbar (z-index 10), qui reste visible */ background: var(--apk-vert-nuit); padding: 96px 16px 24px; /* haut : dégage la navbar */ overflow: auto; font-family: Archivo, "Archivo Placeholder", Inter, sans-serif; display: flex; flex-direction: column; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.28s ease, visibility 0s linear 0.28s; } #apk-menu-mobile.apk-ouvert { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity 0.28s ease, visibility 0s; } /* carte des liens : grand bloc arrondi (24px), contenu aligné en haut */ .apk-menu-carte { background: var(--apk-creme); border-radius: 24px; flex: 1; display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; padding: 24px; transform: translateY(-10px); transition: transform 0.28s ease; } #apk-menu-mobile.apk-ouvert .apk-menu-carte { transform: translateY(0); } .apk-menu-carte a:not(.apk-cta) { color: var(--apk-vert); font-size: 18px; font-weight: 400; padding: 16px 0; width: 100%; text-align: center; text-decoration: none; } .apk-menu-carte .apk-cta { margin-top: 20px; width: 100%; background: var(--apk-vert); color: var(--apk-creme); text-align: center; padding: 15px 24px; font-size: 16px; font-weight: 400; border-radius: 1000px; text-decoration: none; } /* icône du menu : burger qui se transforme en croix (child1 = ligne du bas, child2 = milieu, child3 = haut) */ [data-framer-name="Menu Icon"] > [data-framer-name="Line"] { transition: transform 0.28s ease, opacity 0.2s ease; } [data-framer-name="Menu Icon"].apk-croix > [data-framer-name="Line"]:nth-child(1) { transform: translateY(-3.5px) rotate(45deg) !important; } [data-framer-name="Menu Icon"].apk-croix > [data-framer-name="Line"]:nth-child(2) { opacity: 0 !important; } [data-framer-name="Menu Icon"].apk-croix > [data-framer-name="Line"]:nth-child(3) { transform: translateY(3.5px) rotate(-45deg) !important; } @media (prefers-reduced-motion: reduce) { #apk-menu-mobile, #apk-menu-mobile .apk-menu-carte, [data-framer-name="Menu Icon"] > [data-framer-name="Line"] { transition: none !important; } }