.elementor-theme-builder-content-area{height:400px;}.elementor-location-header:before, .elementor-location-footer:before{content:"";display:table;clear:both;}/* Start custom CSS for shortcode, class: .elementor-element-23e200b *//* ============================================================ HEADER — CoEssence Chrome global (toutes les pages), pas de data-palette : couleurs de marque fixes, cohérentes avec la maquette d'origine. À coller dans Apparence > Personnaliser > CSS additionnel (site entier), ou un snippet WPCode de type CSS séparé — pas dans le CSS d'une page Elementor puisque le header est global. ============================================================ */ :root{ --ce-dark:#1a1408; --ce-accent:#b8864e; --ce-gold2:#e8c99a; --ce-ecru:#f7f4ec; } /* ============================================================ REVEAL ON SCROLL — utilitaire partagé Ajouter class="ce-reveal" (+ modificateurs) à n'importe quel élément de n'importe quelle section. La classe "on" est ajoutée par le snippet ce_scroll_reveal.php (IntersectionObserver, site entier). ============================================================ */ .ce-reveal{opacity:0;transform:translateY(24px);transition:opacity 0.8s ease,transform 0.8s cubic-bezier(0.16,1,0.3,1);transition-delay:var(--reveal-delay,0s);} .ce-reveal.on{opacity:1;transform:translateY(0);} .ce-reveal--left{transform:translateX(-32px);} .ce-reveal--left.on{transform:translateX(0);} .ce-reveal--right{transform:translateX(32px);} .ce-reveal--right.on{transform:translateX(0);} .ce-reveal--d1{transition-delay:0.12s;} .ce-reveal--d2{transition-delay:0.24s;} @media (prefers-reduced-motion:reduce){ .ce-reveal{transition:none;opacity:1;transform:none;} } /* ============================================================ BOUTONS — composant partagé .ce-btn Forme + animation identiques PARTOUT sur le site (Hero, header, futures sections). Les couleurs restent contextuelles : - Hero : combiné avec .btn-{style} (ce_couleur_css.php) - Header : couleurs propres ci-dessous (doit s'adapter à l'état scrollé/non-scrollé, incompatible avec un .btn-{style} statique) Sélecteur "a.ce-btn" (élément+classe) pour battre .btn-{style} en spécificité, quel que soit l'ordre de chargement des CSS. ============================================================ */ a.ce-btn{ position:relative;overflow:hidden; display:inline-flex;align-items:center;gap:10px; font-size:11px;letter-spacing:0.14em;text-transform:uppercase; padding:13px 28px; border-radius:0; /* remplace le 30px arrondi de .btn-{style} : coins nets partout */ text-decoration:none; transition:color 0.35s,border-color 0.35s; } a.ce-btn::before{ content:'';position:absolute;inset:0;z-index:0; background:rgba(255,255,255,0.18); /* voile neutre : fonctionne sur n'importe quelle couleur de fond */ transform:translateY(100%); transition:transform 0.35s cubic-bezier(0.4,0,0.2,1); } a.ce-btn:hover::before{transform:translateY(0);} a.ce-btn > span,a.ce-btn > .arr{position:relative;z-index:1;} a.ce-btn .arr{transition:transform 0.3s;} a.ce-btn:hover .arr{transform:translateX(5px);} /* ============================================================ COMPENSATION HEADER FIXE Le header est en position:fixed, il ne pousse jamais le contenu. Sur l'accueil, le Hero gère déjà l'espace via son propre padding interne (le header doit flotter, transparent, par-dessus la photo). Sur TOUTES les autres pages, sans cette compensation le haut du contenu se retrouve caché sous le header — d'où le chevauchement. ⚠️ Suppose que GeneratePress ajoute bien la classe "home" sur le de la page d'accueil (comportement standard WordPress) — à vérifier si ce correctif n'a pas d'effet. ============================================================ */ body:not(.home){ padding-top:76px; } @media (max-width:1100px){ body:not(.home){ padding-top:68px; } } /* --- Barre desktop --- */ .ce-header-wrap{ position:fixed;top:0;left:0;right:0;z-index:200; background:rgba(26,20,8,0.65);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px); border-bottom:0.5px solid rgba(250,246,240,0.1); transition:background 0.4s,border-color 0.4s; } .ce-header-wrap.ce-header-scrolled{ background:rgba(250,248,244,0.96); border-bottom-color:rgba(58,48,32,0.08); } .ce-nav-top{ display:flex;align-items:center;justify-content:space-between;gap:32px; max-width:1400px;margin:0 auto;padding:20px 52px; } .ce-logo{ font-family:var(--serif,'Cormorant Garamond',Georgia,serif); font-size:24px;font-weight:300;letter-spacing:0.08em; color:#fff;text-decoration:none;transition:color 0.4s; flex-shrink:0; } .ce-header-scrolled .ce-logo{color:var(--ce-dark);} .ce-logo em{font-style:italic;color:var(--ce-gold2);} .ce-header-scrolled .ce-logo em{color:var(--ce-accent);} .ce-logo img{height:70px!important;} .ce-logo-img{display:block!important;} /* Bascule entre logo par défaut (fond sombre transparent) et logo scrollé (fond ecru) — les deux sont dans le DOM, un seul visible à la fois selon l'état .ce-header-scrolled. */ .ce-logo-img--scrolled{display:none!important;} .ce-header-scrolled .ce-logo-img--default{display:none!important;} .ce-header-scrolled .ce-logo-img--scrolled{display:block!important;} .ce-nav-links{ display:flex;align-items:center;gap:32px;list-style:none;margin:0;padding:0; } .ce-nav-links a{ display:inline-flex;align-items:center;gap:7px; font-size:11px;letter-spacing:0.14em;text-transform:uppercase; color:rgba(250,246,240,0.7);text-decoration:none;transition:color 0.3s; } .ce-nav-links a svg{width:15px;height:15px;stroke-width:1.6;flex-shrink:0;} .ce-header-scrolled .ce-nav-links a{color:rgba(58,48,32,0.75);} .ce-nav-links a:hover{color:#fff;} .ce-header-scrolled .ce-nav-links a:hover{color:var(--ce-dark);} /* séparateur : un trait, pas un point */ .ce-nav-sep{ width:0.5px;height:14px;background:rgba(250,246,240,0.25); list-style:none; } .ce-header-scrolled .ce-nav-sep{background:rgba(58,48,32,0.2);} .ce-nav-cta{ flex-shrink:0; color:var(--ce-gold2);border:0.5px solid rgba(232,201,154,0.55); } .ce-header-scrolled .ce-nav-cta{color:var(--ce-accent);border-color:rgba(184,134,78,0.45);} .ce-nav-cta:hover{color:#fff;} /* --- Barre d'onglets mobile (façon appli) --- */ .ce-tabbar{ display:none; /* réactivée en mobile ci-dessous */ position:fixed;bottom:0;left:0;right:0;z-index:200; background:rgba(250,248,244,0.98);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px); border-top:0.5px solid rgba(58,48,32,0.1); padding:8px 4px calc(8px + env(safe-area-inset-bottom)); justify-content:space-between;align-items:stretch; } .ce-tabbar-item{ flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px; text-decoration:none;color:rgba(58,48,32,0.55); font-size:9.5px;letter-spacing:0.02em; padding:6px 2px;transition:color 0.25s; } .ce-tabbar-item svg{width:20px;height:20px;stroke-width:1.6;} .ce-tabbar-item.active, .ce-tabbar-item:active{color:var(--ce-dark);} .ce-tabbar-item--cta{color:var(--ce-accent);} .ce-tabbar-item--cta svg{stroke:var(--ce-accent);} /* --- Bouton Accueil central, surélevé, rond --- */ .ce-tabbar-item--home{color:var(--ce-dark);font-weight:500;position:relative;} .ce-tabbar-home-circle{ width:50px;height:50px;border-radius:50%; background:var(--ce-dark); display:flex;align-items:center;justify-content:center; margin-top:-26px;box-shadow:0 6px 16px rgba(26,20,8,0.35); border:3px solid rgba(250,248,244,0.98); /* se détache du fond de la tabbar */ transition:transform 0.25s; } .ce-tabbar-item--home svg{width:22px;height:22px;stroke:var(--ce-gold2);} .ce-tabbar-item--home:active .ce-tabbar-home-circle, .ce-tabbar-item--home.active .ce-tabbar-home-circle{transform:scale(1.08);} @media (max-width:1100px){ /* --- Tablette et mobile : plus rien en haut que le logo, centré. La tabbar du bas gère toute la navigation. --- */ .ce-nav-links{display:none!important;} .ce-nav-cta{display:none!important;} .ce-nav-top{padding:18px 20px;justify-content:center!important;} .ce-logo{font-size:26px;} .ce-tabbar{display:flex;} body{padding-bottom:calc(64px + env(safe-area-inset-bottom));} /* évite que la tabbar masque le bas de page */ } @media (max-width:380px){ /* --- Petit mobile : la tabbar à 5 items devient serrée --- */ .ce-tabbar-item{font-size:8.5px;gap:3px;padding:6px 1px;} .ce-tabbar-item svg{width:18px;height:18px;} .ce-tabbar-home-circle{width:44px;height:44px;margin-top:-22px;} .ce-tabbar-item--home svg{width:19px;height:19px;} }/* End custom CSS */