/* ========================================================= ========================================================= BELIEVE BALI - VERSION CLAIRE EDITORIALE Langage visuel et typographie inspires de melinegobet.fr : serif delicat et tres contraste pour les titres (poids leger), sans-serif humaniste pour le corps, accent manuscrit rare et precieux. Beaucoup de blanc, rythme aere, lignes fines, register feutre et haut de gamme. On garde STRICTEMENT la palette officielle de Camille : creme, navy, corail, bleu ciel. Seules les proportions, la typographie et la respiration changent. Tout est porte par body.theme-clair : le site sombre d'origine n'est jamais touche. ========================================================= */ /* --- Defilement fluide Lenis : reglages de base recommandes --- Quand Lenis est actif, il pose .lenis.lenis-smooth sur . On neutralise alors le scroll-behavior natif (sinon conflit avec l'inertie) et on laisse la hauteur se calculer librement. Si JS ou Lenis ne chargent pas, ces regles dorment et le scroll natif reste. */ html.lenis, html.lenis body { height: auto; } .lenis.lenis-smooth { scroll-behavior: auto !important; } .lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; } .lenis.lenis-stopped { overflow: hidden; } .lenis.lenis-smooth iframe { pointer-events: none; } /* --- Colonne de lecture editoriale (extrait de livre, texte long) --- Une seule mesure confortable, centree sous l'en-tete de section. Les paragraphes .prose interieurs epousent toute la colonne. */ .theme-clair .prose-colonne { max-width: 40rem; margin-inline: auto; margin-top: clamp(2rem, 4vh, 3.25rem); } .theme-clair .prose-colonne .prose { max-width: none; } .theme-clair .prose-colonne .prose:first-child { margin-top: 0; } body.theme-clair { /* --- Typographie melinegobet, transposee en polices libres --- */ --police-serif: "Cormorant Garamond", "Sentient", Georgia, serif; /* titres delicats */ --police-corps: "Lato", system-ui, -apple-system, sans-serif; /* corps, UI */ --police-script: "Parisienne", "Cormorant Garamond", cursive; /* accent manuscrit rare */ /* --- Palette claire chaude (nos couleurs, retournees vers la lumiere) --- */ --c-creme: #E6E3D9; /* sable chaud, fond principal (charte) */ --c-creme-pale: #EFEDE6; /* creme eclaircie, grandes surfaces aerees */ --c-blanc-chaud:#FBFAF6; /* blanc ivoire, sections en alternance */ --c-pur: #FFFFFF; /* blanc pur, cartes elevees */ --c-pied: #DEDACE; /* creme un peu plus dense, ancrage du pied */ /* --- Encres --- */ --c-encre: #11202F; /* navy profond, titres (proche charte #040F1F) */ --c-encre-pure: #040F1F; /* navy charte, pour les plus grands titres */ --c-corps: #46535F; /* ardoise douce et chaude, texte courant */ --c-doux: #57636E; /* gris-bleu attenue, legendes - AA sur creme (4.8:1) */ /* --- Accents --- */ --c-corail: #F58754; /* corail charte, aplats et touches chaudes */ --c-corail-fonce: #C75A30; /* corail approfondi, lisible en texte/lien */ --c-bleu: #91D8FF; /* bleu ciel charte, touche fraiche rare */ --c-bleu-fonce: #2C7FB0; /* bleu ciel approfondi si besoin de contraste */ /* --- Traits et ombres, chaleureux et tres discrets --- */ --c-trait: rgba(17, 32, 47, 0.12); --c-trait-fin: rgba(17, 32, 47, 0.08); --c-trait-fort: rgba(17, 32, 47, 0.20); --c-ombre: rgba(40, 44, 38, 0.16); /* Respiration encore plus genereuse : le souffle melinegobet */ --bloc-y: clamp(6rem, 14vh, 11rem); background: var(--c-creme); color: var(--c-corps); font-weight: 400; letter-spacing: 0.005em; -webkit-font-smoothing: antialiased; } /* Corps Lato : taille de base un peu plus genereuse, interligne aere */ .theme-clair { font-size: 1.02rem; } /* ========================================================= TITRES - serif delicat, poids leger, grande echelle aeree ========================================================= */ .theme-clair .titre, .theme-clair .titre--sombre, .theme-clair .carte__titre, .theme-clair .benefice__titre, .theme-clair .repere__valeur, .theme-clair .frise__titre, .theme-clair .membre__nom, .theme-clair .nav__marque, .theme-clair .pied__logo { font-family: var(--police-serif); font-weight: 400; color: var(--c-encre); letter-spacing: 0.004em; } .theme-clair .titre { font-size: clamp(2.1rem, 1.3rem + 3.1vw, 3.7rem); line-height: 1.12; font-weight: 400; max-width: 20ch; } .theme-clair .titre--xl { font-size: clamp(2.9rem, 1.5rem + 5.4vw, 6rem); line-height: 1.04; font-weight: 300; /* le plus delicat : haute couture serif */ letter-spacing: 0.002em; max-width: 14ch; } /* En-tete centre (equipe, temoignages) : le grand titre reste centre et pleine largeur. Sans ca, le max-width 14ch ci-dessus le coince a gauche dans une colonne etroite, desaligne du kicker et de l'intro centres. */ .theme-clair .entete-page--centre .titre--xl { max-width: 100%; margin-inline: auto; } .theme-clair .titre--sombre { color: var(--c-encre); } /* Titre hero "Philosophie" facon melinegobet : Fraunces, serif display chaud, fort contraste (opsz au max), terminaisons adoucies (SOFT) et caractere legerement irregulier (WONK 1). Police libre OFL, donc OK sur un site client. */ .theme-clair .titre--plume { font-family: "Fraunces", var(--police-serif); font-weight: 430; font-variation-settings: "opsz" 144, "SOFT" 32, "WONK" 1; letter-spacing: -0.004em; line-height: 1.0; } /* ========================================================= EYEBROWS / KICKERS - petites capitales espacees ========================================================= */ .theme-clair .kicker { font-family: var(--police-corps); font-weight: 700; font-size: 0.7rem; letter-spacing: 0.32em; text-transform: uppercase; color: var(--c-corail-fonce); margin-bottom: 1.7rem; } .theme-clair .kicker__sep { opacity: 0.45; } .theme-clair .kicker--sombre { color: rgba(17, 32, 47, 0.45); } /* ========================================================= CORPS - Lato aere, ardoise douce ========================================================= */ .theme-clair .prose { font-family: var(--police-corps); font-weight: 400; font-size: clamp(1.02rem, 0.99rem + 0.3vw, 1.14rem); line-height: 1.85; color: var(--c-corps); margin-top: 1.7rem; } .theme-clair .prose--sombre { color: var(--c-corps); } /* Grandes declarations : serif leger, presque chuchote */ .theme-clair .prose--grande { font-family: var(--police-serif); font-weight: 300; font-size: clamp(1.5rem, 1.05rem + 1.9vw, 2.6rem); line-height: 1.42; letter-spacing: 0.004em; color: var(--c-encre); } /* L'emphase devient un trait manuscrit corail : la signature melinegobet */ .theme-clair .prose--grande em { font-family: var(--police-script); font-style: normal; font-weight: 400; font-size: 1.32em; line-height: 1; color: var(--c-corail-fonce); letter-spacing: 0.01em; } /* ========================================================= BOUTONS - fines pilules, capitales espacees, retenues ========================================================= */ .theme-clair .bouton { font-family: var(--police-corps); font-weight: 700; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.2em; padding: 1.05em 2.1em; border-radius: 999px; border: 1px solid transparent; } .theme-clair .bouton--plein { background: var(--c-encre-pure); color: var(--c-creme); box-shadow: 0 18px 40px -24px rgba(4, 15, 31, 0.55); } .theme-clair .bouton--plein:hover { background: var(--c-corail-fonce); color: #fff; box-shadow: 0 22px 50px -22px rgba(199, 90, 48, 0.5); } .theme-clair .bouton--ligne { background: transparent; color: var(--c-encre); border-color: var(--c-trait-fort); } .theme-clair .bouton--ligne:hover { background: var(--c-encre-pure); color: var(--c-creme); border-color: var(--c-encre-pure); } .theme-clair .bouton--chaud { background: var(--c-corail); color: #3a1606; box-shadow: 0 18px 40px -22px rgba(245, 135, 84, 0.6); } .theme-clair .bouton--chaud:hover { background: #f7965f; box-shadow: 0 24px 54px -22px rgba(245, 135, 84, 0.7); } /* Liens-fleche : capitales fines, la fleche pousse au survol */ .theme-clair .lien-fleche { font-family: var(--police-corps); font-weight: 700; font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.16em; color: var(--c-corail-fonce); } .theme-clair .lien-fleche:hover { color: var(--c-encre); } .theme-clair .lien-fleche--sombre { color: var(--c-encre); } .theme-clair .lien-fleche--sombre:hover { color: var(--c-corail-fonce); } /* Deux liens tenus aux deux bouts de la grille, un a gauche, un a droite. Colles l'un a l'autre a gauche, ils se lisaient comme un seul bloc et la deuxieme proposition passait inapercue. Ecartes, chacun retrouve son poids et l'oeil balaie toute la largeur des cartes. */ .theme-clair .boutons--extremites { justify-content: space-between; align-items: baseline; gap: 1.4rem 2rem; } /* En colonne etroite, "space-between" n'aurait plus rien a separer : les liens s'empilent et on revient a un alignement a gauche, propre et lisible. */ @media (max-width: 760px) { .theme-clair .boutons--extremites { flex-direction: column; align-items: flex-start; gap: 1.1rem; } } /* ========================================================= VOILE D'EVEIL - on emerge dans une lumiere ivoire chaude ========================================================= */ .theme-clair .eveil { background: radial-gradient(120% 120% at 50% 46%, #fdfcf8 0%, #f1eee6 58%, #e6e3d9 100%); } /* ========================================================= LE PORTAIL - signature conservee : la mer turquoise + l'eclosion On garde la scene aimee, on accorde juste le bas et la signature au monde clair qui suit. ========================================================= */ .theme-clair .portail { background-color: var(--c-creme); } .theme-clair .portail__image { filter: saturate(1.05) brightness(1.06) contrast(0.98); } .theme-clair .portail__video { filter: saturate(1.05) brightness(1.06) contrast(0.98); } /* Le bas du portail fond exactement dans la creme de la 1re section : aucune couture entre la mer et le texte. */ .theme-clair .portail__voile { background: linear-gradient(to bottom, rgba(255, 255, 255, 0.22) 0%, rgba(230, 227, 217, 0.06) 24%, rgba(230, 227, 217, 0.06) 46%, rgba(230, 227, 217, 0.34) 66%, rgba(230, 227, 217, 0.70) 82%, rgba(230, 227, 217, 0.92) 92%, rgba(230, 227, 217, 1.00) 99%); } .theme-clair .portail__vignette { background: radial-gradient(125% 108% at 50% 47%, rgba(255, 255, 255, 0.00) 0%, rgba(239, 237, 230, 0.08) 38%, rgba(230, 227, 217, 0.30) 72%, rgba(222, 218, 206, 0.52) 100%); } .theme-clair .portail__grain { opacity: 0.025; } /* Le logo, medaillon pose sur la mer claire : floraison blanche + ombre douce */ .theme-clair .sceau::before { background: radial-gradient(circle at center, rgba(255, 255, 255, 0.78) 0%, rgba(255, 248, 238, 0.45) 34%, rgba(145, 216, 255, 0.16) 56%, rgba(145, 216, 255, 0.00) 74%); opacity: 0.95; } .theme-clair .sceau__logo { filter: drop-shadow(0 16px 38px rgba(13, 30, 50, 0.26)) drop-shadow(0 4px 14px rgba(13, 30, 50, 0.18)); } .theme-clair .sceau:hover .sceau__logo, .theme-clair .sceau:focus-visible .sceau__logo, .theme-clair .sceau.is-eclos .sceau__logo { filter: drop-shadow(0 22px 50px rgba(13, 30, 50, 0.28)) drop-shadow(0 0 60px rgba(245, 135, 84, 0.45)) brightness(1.03); } /* Signature : un trait manuscrit, l'ame du register feminin melinegobet */ .theme-clair .signature { font-family: var(--police-script); font-style: normal; font-weight: 400; font-size: clamp(1.7rem, 1.2rem + 1.4vw, 2.5rem); letter-spacing: 0.01em; color: var(--c-encre); /* Halo blanc en couches : le navy garde son contraste sur toutes les zones de la photo (eau claire comme reliefs sombres), sans voile rectangulaire. */ text-shadow: 0 0 10px rgba(255, 255, 255, 0.92), 0 0 26px rgba(255, 255, 255, 0.70), 0 1px 40px rgba(255, 255, 255, 0.55); } /* Invitation a entrer : encre + corail, fin */ .theme-clair .invitation__mot { font-family: var(--police-corps); color: var(--c-corail-fonce); } .theme-clair .invitation:hover .invitation__mot { color: var(--c-encre); } .theme-clair .invitation__ligne { background: linear-gradient(to bottom, rgba(199, 90, 48, 0.0) 0%, rgba(199, 90, 48, 0.5) 50%, rgba(199, 90, 48, 0.0) 100%); } .theme-clair .invitation__ligne::after { background: var(--c-corail); box-shadow: 0 0 10px 1px rgba(245, 135, 84, 0.5); } /* ========================================================= ALTERNANCE DES SECTIONS - creme / ivoire / blanc Le rythme melinegobet : grandes plages claires qui respirent. ========================================================= */ .theme-clair .bloc--navy { background: var(--c-creme); color: var(--c-corps); } .theme-clair .bloc--creme { background: var(--c-blanc-chaud); color: var(--c-corps); } .theme-clair #philosophie, .theme-clair #bali { background: var(--c-pur); } .theme-clair .contact { background: linear-gradient(180deg, var(--c-blanc-chaud) 0%, var(--c-creme) 100%); } /* ========================================================= LE SEUIL - la lumiere chaude qui descend dans le texte ========================================================= */ .theme-clair .seuil::before { background: radial-gradient(44% 92% at 50% -6%, rgba(255, 246, 236, 0.85) 0%, rgba(245, 135, 84, 0.10) 30%, rgba(245, 135, 84, 0.04) 52%, rgba(245, 135, 84, 0.00) 74%), radial-gradient(30% 44% at 50% -8%, rgba(145, 216, 255, 0.12) 0%, rgba(145, 216, 255, 0.00) 64%); } /* Mention presse (logo Marie Claire) sous le seuil */ .theme-clair .presse-mini { font-family: var(--police-corps); color: rgba(17, 32, 47, 0.5); letter-spacing: 0.18em; } .theme-clair .presse-mini img { filter: none; opacity: 0.7; } .theme-clair .presse-mini:hover { color: var(--c-encre); } /* Coupure presse Marie Claire (ECRAN 9, #presse) : le visuel n'est pas une photo mais une "page de magazine" composee (vrai bandeau + titre reel de l'article). On garde le cadre portrait 4:5 a TOUTES les tailles (sur mobile le cadre passe sinon en 16/11 et rognerait le bandeau et la date), le contenu est centre, sur un fond ivoire de page, avec une ombre un peu plus douce que les vraies photos. */ .theme-clair #presse .split__visuel { aspect-ratio: 4 / 5; background: #FDFCF9; box-shadow: 0 40px 80px -50px var(--c-ombre); } .theme-clair #presse .split__visuel img { object-position: center; } /* ========================================================= NAVIGATION - verre ivoire, liens en petites capitales ========================================================= */ .theme-clair .nav { background: rgba(251, 250, 246, 0.78); border-bottom: 1px solid var(--c-trait-fin); } .theme-clair .nav__marque { font-weight: 500; font-size: 1.42rem; color: var(--c-encre); } .theme-clair .nav__marque span { color: var(--c-corail-fonce); } .theme-clair .nav__liens a { font-family: var(--police-corps); font-weight: 700; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.18em; color: rgba(17, 32, 47, 0.72); } .theme-clair .nav__liens a:hover { color: var(--c-corail-fonce); } .theme-clair .nav__cta { font-family: var(--police-corps); font-weight: 700; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.18em; color: var(--c-creme); background: var(--c-encre-pure); } .theme-clair .nav__cta:hover { background: var(--c-corail-fonce); } .theme-clair .nav__bascule { color: var(--c-encre); } .theme-clair .nav--multipage .nav__liens { background: rgba(251, 250, 246, 0.98); border-bottom: 1px solid var(--c-trait); } .theme-clair .nav--multipage .nav__liens a { border-bottom: 1px solid var(--c-trait-fin); } .theme-clair .nav__liens a[aria-current="page"] { color: var(--c-corail-fonce); } .theme-clair .nav__liens a[aria-current="page"]::after { background: var(--c-corail); } /* Selecteur de langue FR / EN : discret dans la barre, la langue active en encre pleine, l'autre en gris doux qui s'anime au survol. Reste visible sur mobile (hors du panneau deroulant) pour que les anglophones trouvent l'anglais sans ouvrir le menu. */ .nav__langue { display: inline-flex; align-items: center; gap: 0.55em; white-space: nowrap; } .theme-clair .nav__langue a { font-family: var(--police-corps); font-weight: 700; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.16em; color: rgba(17, 32, 47, 0.5); text-decoration: none; transition: color 400ms var(--ease-doux); } .theme-clair .nav__langue a:hover { color: var(--c-corail-fonce); } .theme-clair .nav__langue a[aria-current="true"] { color: var(--c-encre); } .theme-clair .nav__langue-sep { width: 1px; height: 0.82em; background: var(--c-trait-fort); } /* Barre resserree sur mobile : le selecteur + la pastille Contact + le hamburger doivent tenir sans se chevaucher, meme sur les petits ecrans. */ @media (max-width: 760px) { .theme-clair .nav { gap: 0.85rem; } .theme-clair .nav__langue { gap: 0.45em; } } /* ========================================================= SPLIT - image + texte, ombre tres douce et chaude ========================================================= */ .theme-clair .split__visuel { border-radius: 4px; box-shadow: 0 50px 90px -52px var(--c-ombre); } /* Cadre video verticale (9:16) : la video "sur mesure" est filmee au format portrait. On bascule le cadre en 9/16, on borne sa largeur pour qu'il reste elegant sans devorer la colonne, et on le centre. Coins arrondis et ombre douce sont herites de la regle ci-dessus. */ .theme-clair .split__visuel--portrait { aspect-ratio: 9 / 16; width: 100%; max-width: 21rem; margin-inline: auto; background: var(--c-encre); /* Coins franchement adoucis : le cadre respire et s'accorde au ton doux du site (plus harmonieux que le 4px hérité, trop sec pour une video). */ border-radius: 18px; } .theme-clair .split__visuel--portrait video { display: block; width: 100%; height: 100%; object-fit: cover; /* Reprend l'arrondi du cadre pour que la video (et Safari) clippe ses coins. */ border-radius: inherit; } /* --------------------------------------------------------- Lecteur video maison (video "sur mesure", format 9:16). Objectif : AUCUN bouton plein ecran, sur aucun navigateur. Le plein ecran d'une video verticale sur un ecran paysage l'afficherait coincee entre deux larges bandes noires, et les controles natifs ne permettent pas de retirer ce bouton de facon fiable partout (Safari surtout). D'ou ces controles. Amelioration progressive : sans JS, les controles natifs du