/* ============================================================ Lutopie Business Club — passe de finition. Chargée en dernier par toutes les pages. Principe : rien ne doit se voir, tout doit se sentir. ============================================================ */ /* --- 0. JETONS DE MOUVEMENT ET TOUCHER (24/09/2026) ----------- Cette feuille est chargee par toutes les pages : les jetons de mouvement vivent ici, declares une seule fois. --ease-quiet est deja pose par le design system (_ds/.../tokens/spacing.css, charge par les memes pages) et n'est donc pas redeclare. Deux durees : la vive pour une reponse d'interface (survol, apparition), l'appui pour le retour au toucher. Chaque regle de ces feuilles les lit par var(), aucune valeur en litteral ailleurs ; --duree-lente, sans consommateur, a ete retiree le 24/09/2026. Le flash gris du tap sur mobile trahit un site ordinaire : on le retire. text-size-adjust fige la taille du texte a la rotation. */ :root{ --ease-vif: cubic-bezier(0.23, 1, 0.32, 1); --duree-vive: 260ms; --duree-appui: 160ms; } html{ -webkit-tap-highlight-color: transparent; -webkit-text-size-adjust: 100%; } /* --- 1. TRANSITION DE PAGE ----------------------------------- API View Transitions : fondu natif entre documents, sans JS ni écran blanc. Ignorée par les navigateurs qui ne la gèrent pas, la navigation reste alors instantanée et normale. */ @view-transition { navigation: auto; } ::view-transition-old(root){ animation:lbcFadeOut .28s cubic-bezier(.4,0,1,1) both; } ::view-transition-new(root){ animation:lbcFadeIn .42s cubic-bezier(0,0,.2,1) both; } @keyframes lbcFadeOut{ to{ opacity:0; } } @keyframes lbcFadeIn{ from{ opacity:0; } } @media (prefers-reduced-motion: reduce){ ::view-transition-old(root), ::view-transition-new(root){ animation:none !important; } } /* --- 2. SÉLECTION DE TEXTE AUX COULEURS DE LA MAISON --------- */ ::selection{ background:var(--lbc-gold); color:var(--lbc-forest); text-shadow:none; } ::-moz-selection{ background:var(--lbc-gold); color:var(--lbc-forest); text-shadow:none; } /* --- 3. BARRE DE DÉFILEMENT DISCRÈTE ------------------------- */ html{ scrollbar-width:thin; scrollbar-color:color-mix(in srgb, var(--lbc-gold) 55%, transparent) transparent; } ::-webkit-scrollbar{ width:10px; height:10px; } ::-webkit-scrollbar-track{ background:transparent; } ::-webkit-scrollbar-thumb{ background:color-mix(in srgb, var(--lbc-gold) 45%, transparent); border-radius:10px; border:3px solid transparent; background-clip:content-box; } ::-webkit-scrollbar-thumb:hover{ background:color-mix(in srgb, var(--lbc-gold) 75%, transparent); background-clip:content-box; } /* --- 4. CURSEUR : tout ce qui agit doit le dire -------------- */ a, button, summary, label, [role="button"], [onClick], [data-rail-prev], [data-rail-next], .h-dot, .h-video{ cursor:pointer; } button:disabled, .h-arrow:disabled{ cursor:default; } /* Le texte long se sélectionne : curseur texte explicite */ p, blockquote, li, h1, h2, h3, h4{ cursor:auto; } /* --- 5. TYPOGRAPHIE DE PRÉCISION ----------------------------- text-wrap:balance répartit les lignes d'un titre pour éviter le mot seul en fin de bloc. pretty fait de même sur le dernier mot d'un paragraphe. Ignorés silencieusement si non gérés. */ h1, h2, h3, h4, blockquote, .h-eyebrow, figcaption{ text-wrap:balance; } p, li{ text-wrap:pretty; } /* Chiffres : même chasse partout, pas de sautillement */ [data-lbc-lux]{ font-variant-numeric:lining-nums proportional-nums; -webkit-font-feature-settings:"kern" 1,"liga" 1; font-feature-settings:"kern" 1,"liga" 1; text-rendering:optimizeLegibility; } /* Séries chiffrées alignées : chasse tabulaire */ [data-lbc-lux] .lux-figure, [data-lbc-home] .h-fig b, [data-lbc-home] .h-countries em, [data-lbc-home] .h-step em, [data-lbc-home] .h-admission__grid em{ font-variant-numeric:tabular-nums lining-nums; } /* Petites capitales : l'espacement fait la tenue */ [data-lbc-lux] .lux-eyebrow, [data-lbc-home] .h-eyebrow{ letter-spacing:.32em !important; word-spacing:.08em; /* le tracking large crée un vide à droite du dernier caractère */ padding-right:.32em; } /* --- 6. TRAITEMENT IMAGE UNIFORME ---------------------------- Une seule signature photographique sur tout le site : légère désaturation, contraste tenu, température réchauffée. Les logos et sceaux en sont exclus. */ [data-lbc-lux] img:not([src*="seal"]):not([src*="favicon"]):not([src*="og-image"]){ filter:saturate(.86) contrast(1.04) sepia(.05) brightness(1.01); transition:filter .5s ease, transform .8s var(--ease-quiet); } /* Au survol d'un média cliquable, la photo retrouve ses couleurs */ [data-lbc-lux] a:hover img:not([src*="seal"]), [data-lbc-home] .h-mosaic > *:hover img, [data-lbc-home] .h-bleed-left:hover img{ filter:saturate(1) contrast(1) sepia(0) brightness(1); } /* --- 7. STABILITÉ AU CHARGEMENT ------------------------------ Les attributs width/height posés sur chaque suffisent : le navigateur en déduit un aspect-ratio implicite et réserve la place avant le téléchargement. Aucune règle CSS n'est nécessaire — et il ne faut surtout pas forcer height:auto, cela écraserait les hauteurs de mise en page (mosaïque, hero, bandeaux). */ /* --- 8. FOCUS : visible, jamais criard ----------------------- */ [data-lbc-lux] :focus-visible{ outline:2px solid var(--lbc-gold); outline-offset:3px; border-radius:2px; } /* ============================================================ AMBIANCE — lumière et matière. Tout est en pseudo-éléments non interactifs : aucun impact sur la mise en page, aucun sur l'accessibilité. ============================================================ */ /* --- 1. HALO derrière les grands titres ---------------------- Une lueur dorée très basse, posée derrière le texte des sections sombres. Elle ne se voit pas ; elle se sent. */ [data-lbc-lux] section.lux-dark{ position:relative; isolation:isolate; } [data-lbc-lux] section.lux-dark::before{ content:""; position:absolute; z-index:-1; left:50%; top:clamp(60px,14%,220px); translate:-50% 0; width:min(1100px,92%); height:min(560px,60%); /* Baissé d'un tiers : à .13 la lueur cessait d'être une ambiance et devenait une tache lisible derrière les titres des sections sombres (Présence, Oracle, Admission). L'intention est qu'elle se sente sans se voir — .085 tient cette ligne. */ background:radial-gradient(ellipse at 50% 40%, rgba(201,168,76,.085) 0%, rgba(201,168,76,.032) 38%, transparent 70%); pointer-events:none; } /* Sur les fonds clairs, le halo vire au vert : même geste, autre lumière */ [data-lbc-lux] section:not(.lux-dark):not(.lux-full){ position:relative; isolation:isolate; } [data-lbc-lux] section:not(.lux-dark):not(.lux-full)::before{ content:""; position:absolute; z-index:-1; left:50%; top:6%; translate:-50% 0; width:min(1000px,90%); height:min(460px,52%); background:radial-gradient(ellipse at 50% 40%, rgba(6,51,46,.055) 0%, rgba(201,168,76,.045) 45%, transparent 72%); pointer-events:none; } /* --- 2. SÉPARATEURS TRAVAILLÉS ------------------------------- Le filet doré cesse d'être un trait : dégradé qui s'éteint aux extrémités, et un losange fin en son centre. */ [data-lbc-lux] .lux-rule-gold{ position:relative; overflow:visible; background:linear-gradient(90deg, transparent 0%, color-mix(in srgb, var(--lbc-gold) 25%, transparent) 18%, var(--lbc-gold) 50%, color-mix(in srgb, var(--lbc-gold) 25%, transparent) 82%, transparent 100%) !important; } [data-lbc-lux] .lux-rule-gold::after{ content:""; position:absolute; left:50%; top:50%; width:5px; height:5px; translate:-50% -50%; rotate:45deg; background:var(--lbc-gold); box-shadow:0 0 8px 1px rgba(201,168,76,.5); } /* --- 3. LUEUR DOUCE SUR LES CTA ------------------------------ */ [data-lbc-lux] .lux-cta{ position:relative; } [data-lbc-lux] .lux-cta::before{ content:""; position:absolute; inset:-2px; border-radius:inherit; background:radial-gradient(ellipse at 50% 50%, rgba(201,168,76,.35), transparent 70%); opacity:0; filter:blur(12px); pointer-events:none; z-index:-1; transition:opacity .45s ease; } [data-lbc-lux] .lux-cta:hover::before, [data-lbc-lux] .lux-cta:focus-visible::before{ opacity:1; } /* --- 4. PROFONDEUR : les quatre couches derrière les sections sombres Une photographie de 483 Ko vivait ici, recouverte à 98,5 %. Le commentaire de l'ancienne règle l'avouait : « une texture qu'on ne regarde pas ». Elle se téléchargeait sur presque toutes les pages, puisque lux.js pose lux-depth sur une section sombre sur trois. Elle est remplacée par le traitement de fond de la charte, section IV : dégradé à 135 degrés entre deux verts de la palette, lumière radiale décentrée, grain, vignette. Aucun octet à charger. L'intention d'origine est gardée : la lumière radiale reste attachée au viewport, donc le contenu glisse dessus et la page garde son plan d'arrière. Retiré le 14/09/2026. */ [data-lbc-lux] section.lux-dark.lux-depth{ background-image: /* 4. la vignette, qui referme les bords */ radial-gradient(118% 88% at 50% 42%, transparent 30%, rgba(2,11,10,.80) 100%), /* 3. le grain, la même recette que les ouvertures */ url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.07'/%3E%3C/svg%3E"), /* 2. la lumière radiale, décentrée, et c'est elle qui tient le plan */ radial-gradient(66% 54% at 26% 0%, rgba(29,74,66,.17), transparent 58%), /* 1. le dégradé à 135 degrés, Vert 800 vers Vert 900 */ linear-gradient(135deg, #06332E 0%, #04231F 40%, #031815 100%) !important; background-size:cover, 180px 180px, cover, cover; background-position:center, 0 0, center, center; background-repeat:no-repeat, repeat, no-repeat, no-repeat; background-attachment:scroll, scroll, fixed, scroll; } @media (max-width:900px), (prefers-reduced-motion: reduce){ /* background-attachment:fixed est coûteux et saccadé sur mobile */ [data-lbc-lux] section.lux-dark.lux-depth{ background-attachment:scroll, scroll, scroll, scroll; } } /* ============================================================ FORMULAIRE DE CANDIDATURE Le moment décisif du site : il doit tenir le même niveau. ============================================================ */ [data-lbc-lux] form label{ letter-spacing:.01em; } [data-lbc-lux] form input, [data-lbc-lux] form textarea{ transition:border-color .3s ease, background-color .3s ease, box-shadow .3s ease; caret-color:var(--lbc-gold); } [data-lbc-lux] form input::placeholder{ color:color-mix(in srgb, var(--lbc-cream) 42%, transparent); } [data-lbc-lux] form input:hover{ border-color:color-mix(in srgb, var(--lbc-gold) 55%, transparent) !important; } [data-lbc-lux] form input:focus{ outline:none; border-color:var(--lbc-gold) !important; background:rgba(255,255,255,.07) !important; box-shadow:0 0 0 3px rgba(201,168,76,.18); } /* Erreur : signalée seulement après saisie, jamais à l'ouverture du formulaire */ [data-lbc-lux] form input:not(:placeholder-shown):invalid{ border-color:#C98A6B !important; } [data-lbc-lux] form input:not(:placeholder-shown):invalid:focus{ box-shadow:0 0 0 3px rgba(201,138,107,.22); } [data-lbc-lux] form .lux-hint{ font-size:12.5px; line-height:1.5; color:color-mix(in srgb, var(--lbc-cream) 62%, transparent); } /* Le bouton d'envoi suit la règle des CTA : contour or, lueur au survol */ [data-lbc-lux] form button[type="submit"]{ width:100%; } [data-lbc-lux] form button[type="submit"]:disabled{ opacity:.5; cursor:progress; } /* ============================================================ CTA COLLANT MOBILE Sur téléphone, l'en-tête se réduit au logo et au menu : l'appel à l'action disparaissait dès le premier défilement, et la page de candidature devenait atteignable seulement par le menu ou le pied de page. Cette barre le remet à portée de pouce, en bas d'écran. Trois garde-fous : elle n'apparaît qu'après un vrai début de lecture (sinon elle masque le hero à l'arrivée), jamais sur la page de candidature elle-même — où elle ferait doublon avec le formulaire — et jamais sur grand écran, où l'en-tête suffit. ============================================================ */ .lbc-sticky-cta{ position:fixed; left:0; right:0; bottom:0; z-index:60; display:none; align-items:center; gap:14px; /* 24/09/2026 : viewport-fit=cover ; en paysage l'encoche mord un bord, les insets lateraux gardent le texte et le bouton hors de la zone couverte. */ padding:12px max(16px, env(safe-area-inset-right,0px)) calc(12px + env(safe-area-inset-bottom,0px)) max(16px, env(safe-area-inset-left,0px)); /* Opaque : à 94 % le contenu de la page traversait la barre et venait se mêler au texte du CTA. Le flou d'arrière-plan garde la profondeur sans rendre le texte concurrent lisible. */ background:var(--lbc-forest,#06332E); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border-top:1px solid rgba(184,150,63,.28); box-shadow:0 -18px 40px -28px rgba(0,0,0,.9); transform:translateY(105%); /* 24/09/2026 : translate au repos 0 0, et @starting-style anime la premiere apparition (display none -> flex) depuis le bas en --duree-vive, courbe vive ; sans cela la barre surgissait d'un coup quand la fenetre repasse sous 820 px. transform garde la montee au defilement. */ translate:0 0; transition:transform .34s cubic-bezier(.22,.61,.36,1), translate var(--duree-vive) var(--ease-vif); } .lbc-sticky-cta{ @starting-style{ translate:0 100%; } } .lbc-sticky-cta.is-shown{ transform:translateY(0); } .lbc-sticky-cta__txt{ flex:1 1 auto; min-width:0; font-size:13px; line-height:1.35; color:color-mix(in srgb, var(--lbc-cream,#F2EBDC) 74%, transparent); } .lbc-sticky-cta__txt b{ display:block; font-family:var(--font-display,Georgia,serif); font-size:15px; font-weight:400; color:var(--lbc-cream,#F2EBDC); } .lbc-sticky-cta__btn{ flex:0 0 auto; white-space:nowrap; display:inline-flex; align-items:center; justify-content:center; font-family:var(--font-body,Inter,sans-serif); font-weight:600; font-size:15px; padding:12px 20px; border-radius:999px; text-decoration:none; background:var(--accent,#B8963F); color:var(--accent-text,#0A2B25); /* 44 px : la cible tactile minimale recommandée */ min-height:44px; /* 24/09/2026 : retour au toucher, l'appui s'enfonce en --duree-appui, courbe vive. */ touch-action:manipulation; -webkit-user-select:none; user-select:none; transition:transform var(--duree-appui) var(--ease-vif); } .lbc-sticky-cta__btn:active{ transform:scale(.97); } .lbc-sticky-cta__btn:focus-visible{ outline:2px solid var(--lbc-cream,#F2EBDC); outline-offset:3px; } @media (max-width:820px){ .lbc-sticky-cta{ display:flex; } /* On dégage la hauteur de la barre pour que le pied de page ne finisse pas sous elle — sinon le dernier lien reste inatteignable. */ /* 24/09/2026 : la barre grandit de l'inset bas (viewport-fit=cover), le degagement suit. */ body:has(.lbc-sticky-cta.is-shown) footer{ padding-bottom:calc(84px + env(safe-area-inset-bottom,0px)); } } @media (prefers-reduced-motion:reduce){ .lbc-sticky-cta{ transition:none; } /* 24/09/2026 : l'enfoncement du bouton est un mouvement, on le retire. */ .lbc-sticky-cta__btn:active{ transform:none; } } /* ============================================================ IMAGES — GARDE-FOU DÉFINITIF CONTRE LA DÉFORMATION Ce défaut est réapparu plusieurs fois parce qu'on le corrigeait au mauvais endroit : sur l'image, en lui posant un aspect-ratio. Or dans une grille CSS, un item vaut `align-self: stretch` par défaut, et cet étirement ÉCRASE l'aspect-ratio. Résultat mesuré sur Événements : des vignettes déclarées en 3/4 rendues en 255 × 1753 px, soit leur hauteur naturelle entière dans une colonne de 255 px. Le correctif est donc ici, au niveau du comportement de mise en page, et non image par image. Trois règles, valables partout : 1. align-self:start → la grille cesse d'étirer ses images 2. object-fit:cover → toute boîte non conforme recadre, jamais n'étire 3. max-height:60vh → aucune photo n'écrase la page Échappatoire documentée : data-bleed sur une image qui doit occuper la pleine hauteur (bandeau de tête). Utilisée nulle part par défaut. ============================================================ */ [data-lbc-lux] img:not([data-bleed]){ align-self:start; /* neutralise le stretch de grille et de flex */ object-fit:cover; max-height:60vh; } /* En flex aussi, un enfant s'étire par défaut sur l'axe transverse. */ [data-lbc-lux] img:not([data-bleed]){ flex:0 0 auto; } /* Exception structurelle des pages [data-lbc-home] ------------------ Ces images-là ne sont pas posées dans le flux : elles remplissent une boîte qui porte déjà son propre cadrage (hauteur du conteneur + object-fit déclaré dans home.css). Le plafond de 60 vh les tronquait sans que rien ne vienne combler le vide : mesuré à 1512×950, la photo du hero ne couvrait plus que 52 % de sa bande et l'image hors-grille 77 % de la sienne — le reste étant du vert plat. Les galeries .h-strip / .h-duo sont dans le même cas à l'envers : leur hauteur est libre et bornée par la largeur de colonne ; le plafond y recadrait les portraits, c'est-à-dire tranchait les visages. Même spécificité (0,2,1) que la règle ci-dessus, mais déclarée après : à égalité, c'est l'ordre qui tranche. */ [data-lbc-home] .h-hero__media img, [data-lbc-home] .h-video__media img, [data-lbc-home] .h-band__media img, [data-lbc-home] .h-bleed-left img, [data-lbc-home] .h-mosaic img, [data-lbc-home] .h-plate img, [data-lbc-home] .h-strip img, [data-lbc-home] .h-duo img{ max-height:none; } /* Les drapeaux et le sceau sont des symboles, pas des photographies : les recadrer les mutilerait. Ils gardent contain et leur taille propre. */ [data-lbc-lux] img[data-flag], [data-lbc-lux] img[aria-hidden="true"]{ object-fit:contain; max-height:none; } /* ============================================================ NAV — LISIBILITÉ DU CTA PRINCIPAL lux.js choisit la couleur du CTA d'après la luminance du fond réel. Sur la nav, cette lecture se fait avant que le composant ne soit monté : le fond remonté est alors le crème de la page, jamais le bandeau forêt. Le CTA se peignait donc en vert forêt — invisible sur le hero comme sur la nav figée. La nav est toujours posée sur un fond sombre : on fixe l'or, sans dépendre de la détection. ============================================================ */ [data-lbcnav] .lux-cta{ color:var(--lbc-gold) !important; } /* ============================================================ CARTE DE PRÉSENCE — DÉSENCOMBREMENT DES ÉTIQUETTES Six pays tiennent dans un carré de 90 px sur la carte. La seule direction du label (above/below/left/right) ne suffit plus : celui de la France, le plus long, recouvrait le Luxembourg et la Suisse. On le descend dans le vide sous le trait de côte ; le point, lui, ne bouge pas — la géographie reste juste. ============================================================ */ [data-lbc-home] .h-pin[data-c="fr"] span{ translate:-18px 26px; } /* --- LE PLAN DU SITE EN DUR ---------------------------------------- Écrit dans chaque page par tools/maillage.py, à l'intérieur de l'import du pied de page. Le runtime le passe en `children` au composant, qui ne l'affiche pas : il disparaît donc dès que le script tourne. Il ne se voit que là où il sert — sans JavaScript, où il devient le seul moyen de circuler. */ .plan{ padding:32px 20px 44px; background:var(--lbc-forest-900,#041F1C); color:var(--lbc-cream,#F0E8D6); } .plan h2{ font-size:11px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--lbc-gold,#C9A84C); margin:0 0 14px; } .plan ul{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:6px 22px; } .plan a{ color:var(--lbc-cream,#F0E8D6); font-size:14px; text-decoration:none; border-bottom:1px solid rgba(201,168,76,.3); padding:4px 0; display:inline-block; } .plan a:hover, .plan a:focus-visible{ border-bottom-color:var(--lbc-gold,#C9A84C); } /* Cibles tactiles : le repère de défilement et les liens légaux du pied de page mesuraient 15 à 18 px de haut. On les épaissit par le remplissage, sans toucher au corps du texte — l'aspect ne bouge pas, la zone atteignable passe la barre des 24 px. */ [data-lbc-home] .h-scroll{ padding:6px 0; } footer a[href$="Mentions.html"], footer a[href$="Mentions_en.html"], footer a[href$="Confidentialite.html"], footer a[href$="Confidentialite_en.html"]{ display:inline-block; padding:5px 0; } /* --- LA VOIE D'ACCÈS, RAPPELÉE AU CANDIDAT ------------------------- Le site annonce trois portes — membre, partenaire, apporteur d'affaires — et les trois menaient au même formulaire anonyme. Le choix voyage maintenant dans l'adresse ; cette ligne le confirme au candidat avant qu'il n'écrive, et le champ part avec le dossier. */ .voie-choisie{ /* Un avis de service, pas une ligne d'affiche : aligné à gauche comme les étiquettes du formulaire qu'il précède. */ text-align:left; max-width:46ch; margin:0 0 22px; padding:12px 16px; border-left:2px solid var(--lbc-gold,#C9A84C); background:rgba(201,168,76,.08); font-size:14.5px; line-height:1.6; color:var(--text-on-dark-soft,#B9C6C2); } .voie-choisie b{ color:var(--lbc-cream,#F0E8D6); font-weight:600; } .voie-choisie a{ color:var(--lbc-gold,#C9A84C); text-decoration:none; border-bottom:1px solid currentColor; white-space:nowrap; } /* --- LA PAGE D'ADMISSION PREND UN VISAGE --------------------------- Sept mille pixels de haut, pas une seule photographie : la page qui doit donner envie d'entrer ne montrait jamais ce dans quoi on entre. Le premier écran reçoit la salle — très assombrie, car « On n'adhère pas. On est choisi. » ne se crie pas par-dessus une image. Le voile est un dégradé, pas un aplat : la photographie respire en haut et s'éteint sous le texte. */ .adm-hero{ position:relative; overflow:hidden; isolation:isolate; } .adm-hero__media{ position:absolute; inset:0; z-index:-2; } .adm-hero__media img{ width:100%; height:100%; object-fit:cover; object-position:50% 50%; display:block; filter:saturate(.72) contrast(1.04); } .adm-hero__voile{ position:absolute; inset:0; z-index:-1; background: linear-gradient(180deg, rgba(4,31,28,.50) 0%, rgba(4,31,28,.74) 44%, rgba(6,51,46,.95) 100%), radial-gradient(74% 60% at 50% 42%, rgba(4,31,28,.10), rgba(4,31,28,.72)); } /* L'ancre du premier écran héritait de la couleur des liens de page — vert forêt — et se retrouvait posée sur un fond vert forêt : un bouton invisible depuis le jour où il a été ajouté, sur l'écran même qui doit mener au dossier. Aucune feuille n'habille `.cta` sur cette page ; on l'habille donc ici, explicitement, plutôt que d'espérer un héritage. */ .adm-hero .cta{ color:var(--lbc-gold,#C9A84C) !important; border:1px solid var(--lbc-gold,#C9A84C) !important; border-radius:var(--radius-pill,999px); padding:14px 30px; min-height:48px; font-weight:600; font-size:16px; text-decoration:none; transition:background-color .35s var(--ease-quiet), color .35s var(--ease-quiet); } .adm-hero .cta:hover, .adm-hero .cta:focus-visible{ background:var(--lbc-gold,#C9A84C); color:var(--lbc-forest-900,#041F1C) !important; } /* --- LE PARCOURS D'ADMISSION, DESSINÉ ------------------------------ Quatre cartes alignées décrivaient un passage sans jamais le montrer. Un trait les relie maintenant, avec une bille à chaque étape, et il se trace au fil du défilement : le dossier avance, la ligne avance. C'est du dessin, pas de la décoration — retirez-le et l'on perd l'idée d'un chemin en quatre temps. Un SVG plutôt qu'une scène 3D : la page pèse 445 Ko, elle n'a pas à télécharger 672 Ko de moteur pour tracer une ligne. */ .parcours{ position:relative; } .parcours-trace{ position:absolute; left:0; right:0; top:-34px; height:40px; width:100%; overflow:visible; pointer-events:none; } .parcours-trace line{ stroke-width:1; vector-effect:non-scaling-stroke; } .parcours-trace__fond{ stroke:var(--hairline-soft, rgba(201,168,76,.38)); } .parcours-trace__vif{ stroke:var(--lbc-gold,#C9A84C); stroke-width:1.6; stroke-dasharray:1; stroke-dashoffset:1; transition:stroke-dashoffset 1.6s var(--ease-quiet); } .parcours-trace__pas{ fill:var(--lbc-cream,#F0E8D6); stroke:var(--lbc-gold,#C9A84C); stroke-width:1.4; vector-effect:non-scaling-stroke; opacity:0; transform-box:fill-box; transform-origin:center; transition:opacity .5s var(--ease-quiet), fill .5s var(--ease-quiet); } .parcours-trace__pas:nth-of-type(1){ transition-delay:.10s; } .parcours-trace__pas:nth-of-type(2){ transition-delay:.50s; } .parcours-trace__pas:nth-of-type(3){ transition-delay:.90s; } .parcours-trace__pas:nth-of-type(4){ transition-delay:1.3s; } /* La dernière bille est pleine : c'est l'entrée, pas une étape de plus. */ .parcours-trace__pas--fin{ r:7; } .is-in .parcours-trace__vif, .lux-r.is-in .parcours-trace__vif{ stroke-dashoffset:0; } .is-in .parcours-trace__pas, .lux-r.is-in .parcours-trace__pas{ opacity:1; } .is-in .parcours-trace__pas--fin{ fill:var(--lbc-gold,#C9A84C); } /* Sous 900 px la grille des étapes se replie en colonne : un trait horizontal n'aurait plus rien à relier. */ @media (max-width:900px){ .parcours-trace{ display:none; } } @media (prefers-reduced-motion: reduce){ .parcours-trace__vif{ transition:none; stroke-dashoffset:0; } .parcours-trace__pas{ transition:none; opacity:1; } } /* --- DEUX PHOTOGRAPHIES DANS LA PAGE D'ADMISSION ------------------- Elles ne sont pas là pour aérer : chacune répond à une question que le texte vient de poser. Après « quatre profils », la salle — voilà qui est autour de la table. Avant les questions fréquentes, une conversation — voilà comment cela se passe vraiment. Bande pleine largeur, hauteur bornée : une photographie qui prend tout l'écran sur un grand moniteur cesse d'être une image et devient un mur. */ .adm-bande{ position:relative; margin:0; overflow:hidden; background:var(--lbc-forest-900,#041F1C); } .adm-bande img{ display:block; width:100%; height:clamp(240px,38vw,440px); object-fit:cover; object-position:50% 42%; filter:saturate(.8) contrast(1.03); } .adm-bande figcaption{ position:absolute; left:0; right:0; bottom:0; padding:clamp(22px,3vw,42px) clamp(20px,5vw,72px) clamp(18px,2.4vw,32px); background:linear-gradient(180deg, rgba(4,31,28,0), rgba(4,31,28,.82) 62%, rgba(4,31,28,.92)); color:var(--lbc-cream,#F0E8D6); } .adm-bande figcaption b{ display:block; font-family:var(--font-display,Georgia,serif); font-weight:400; font-size:clamp(19px,2.4vw,32px); line-height:1.2; letter-spacing:-.01em; } .adm-bande figcaption span{ display:block; margin-top:8px; font-size:11px; font-weight:600; letter-spacing:.22em; text-transform:uppercase; color:var(--lbc-gold,#C9A84C); } /* --- LES SIX VALEURS ------------------------------------------------ La phrase n'en citait que trois, et c'étaient les trois piliers, pas les valeurs. Six noms enfilés dans une phrase la font trébucher : on les sort en rang. Le lecteur les embrasse d'un regard, et la page y gagne un objet de plus. */ .six-valeurs{ list-style:none; margin:clamp(26px,3.4vw,40px) auto 0; padding:0; /* Trois par rang, deux rangs. Le conteneur de la section fait 720 px et les six pastilles en réclament 730 : en flex libre, elles se cassaient en cinq plus une, ce qui se lit comme un accident. Une grille de trois est une décision. */ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:10px clamp(10px,1.2vw,16px); max-width:34rem; justify-items:center; } .six-valeurs li{ font-family:var(--font-body); font-size:12px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--text-gold-on-light,#745D28); padding:9px 18px; border-radius:var(--radius-pill,999px); border:1px solid color-mix(in srgb, var(--lbc-gold,#C9A84C) 34%, transparent); } @media (max-width:520px){ .six-valeurs{ grid-template-columns:repeat(2, minmax(0,1fr)); max-width:22rem; } .six-valeurs li{ font-size:11px; letter-spacing:.14em; padding:8px 12px; } } /* ==================================================================== LE CARNET — page d'aperçu Le carnet complet vit ailleurs et derrière un code ; cette page en montre assez pour donner envie et pas assez pour s'en passer. Rien n'y figure qui puisse servir sans le Cercle : ni téléphone, ni prix, ni note de réservation. Et la catégorie conciergerie en est absente — elle nomme des prestataires en marque blanche. ==================================================================== */ [data-lbc-home] .carnet-in{ max-width:1080px; margin:0 auto; } /* Les chiffres, en bandeau sombre juste sous le seuil. */ [data-lbc-home] .carnet-chiffres{ background:var(--lbc-forest-900); color:var(--lbc-cream); padding:clamp(34px,4.4vw,58px) clamp(20px,5vw,72px); border-block:1px solid var(--border-on-dark); } [data-lbc-home] .carnet-chiffres ul{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(5,1fr); gap:clamp(12px,2vw,28px); text-align:center; } [data-lbc-home] .carnet-chiffres b{ display:block; font-family:var(--font-display); font-weight:400; font-size:clamp(26px,3.4vw,46px); line-height:1; letter-spacing:-.02em; color:var(--lbc-gold-soft,#D2B978); font-variant-numeric:tabular-nums lining-nums; } [data-lbc-home] .carnet-chiffres span{ display:block; margin-top:9px; font-size:11px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:color-mix(in srgb, var(--lbc-cream) 62%, transparent); } @media (max-width:820px){ [data-lbc-home] .carnet-chiffres ul{ grid-template-columns:repeat(2,1fr); gap:22px 12px; } [data-lbc-home] .carnet-chiffres li:last-child{ grid-column:1 / -1; } } /* ============================================================ LA COUVERTURE, EN CARTE Cinquante-quatre noms alignés en petit corps formaient un annuaire : on y cherchait une ville, on n'y lisait pas la forme du carnet. La carte, elle, dit tout d'un regard — l'amas européen où les points se touchent, la file du Golfe, le point seul de Marrakech, l'axe qui traverse l'Asie. Deux décisions tiennent la section : — la géométrie vient du MÊME fond que la carte de Présence, projeté par X = 9,9955·lon + 1800,3 et Y = −9,9907·lat + 838,7, et affiché dans la même fenêtre (viewBox 12 −16 3580 1470). Les points sont posés en pourcentage de cette fenêtre : ils restent justes à toutes les tailles, sans script. — la carte ne porte AUCUN texte au repos. Trente-huit villes d'Europe tiennent dans un carré de cent pixels ; y écrire les noms produirait une bouillie. Le nom vient au survol, et la liste dépliable en dessous porte les cinquante-quatre, dans l'ordre, pour qui lit sans souris comme pour qui cherche une ville précise. La couche de points est donc décorative au sens strict des lecteurs d'écran (aria-hidden) : tout ce qu'elle dit est déjà dans le libellé du SVG, dans le compte par continent et dans la liste. Rien n'est perdu, rien n'est lu deux fois. ============================================================ */ [data-lbc-home] .cv-carte{ position:relative; width:100%; aspect-ratio:3580/1470; overflow:hidden; border:1px solid var(--hairline-soft); border-radius:var(--radius-lg); background:var(--lbc-forest-900); } /* Le cadrage libre n'existe que si le script tourne. Tant qu'il n'a pas posé .is-live, la carte n'affiche aucune promesse qu'elle ne tient pas : ni curseur de prise, ni commandes, ni ligne d'aide. */ [data-lbc-home] .cv-carte.is-live{ cursor:grab; touch-action:pan-y; /* le vertical reste à la page */ } [data-lbc-home] .cv-carte.is-prise{ cursor:grabbing; } /* Sur un téléphone, la bande de 2,44:1 ne fait que 140 px de haut : cadrée sur l'Europe elle devenait une meurtrière, où trois étiquettes et les boutons recouvraient la carte entière. Un format plus carré lui rend la hauteur. Le script en tient compte tout seul — il déduit la hauteur du cadre du rapport réel de la boîte, il n'y a rien à régler en double. */ @media (max-width:700px){ [data-lbc-home] .cv-carte{ aspect-ratio:4/3; } } [data-lbc-home] .cv-carte:focus-visible{ outline:2px solid var(--lbc-gold); outline-offset:3px; } [data-lbc-home] .cv-carte__svg{ transition:none; } /* Les commandes, posées dans le coin bas droit de la carte. */ [data-lbc-home] .cv-cmd{ position:absolute; right:14px; bottom:14px; z-index:4; display:none; gap:6px; align-items:center; } [data-lbc-home] .cv-carte.is-live .cv-cmd{ display:flex; } [data-lbc-home] .cv-cmd button{ border:1px solid var(--border-on-dark); background:rgba(4,31,28,.72); color:var(--lbc-cream); font:inherit; font-size:14px; line-height:1; width:32px; height:32px; border-radius:var(--radius-sm,6px); cursor:pointer; backdrop-filter:blur(6px); transition:background .2s ease, border-color .2s ease; } /* Collision de cascade : la règle générale « .cv-cmd button » pose width:32px avec une spécificité de (0,2,1) ; « .cv-cmd__monde », à (0,2,0), perdait et le libellé débordait d'une boîte carrée que la carte rognait ensuite. On repasse devant en nommant l'élément. */ [data-lbc-home] .cv-cmd button.cv-cmd__monde{ width:auto; flex:0 0 auto; white-space:nowrap; padding:0 12px; font-size:11px; letter-spacing:.12em; text-transform:uppercase; } /* Retourner au monde n'a de sens qu'une fois qu'on l'a quitté. */ [data-lbc-home] .cv-carte.is-loin .cv-cmd__monde{ display:none; } @media (max-width:560px){ [data-lbc-home] .cv-cmd{ right:10px; bottom:10px; gap:5px; } [data-lbc-home] .cv-cmd button{ width:28px; height:28px; font-size:13px; } [data-lbc-home] .cv-cmd button.cv-cmd__monde{ padding:0 9px; font-size:10px; } } [data-lbc-home] .cv-cmd button:hover{ background:rgba(201,168,76,.22); border-color:var(--lbc-gold); } [data-lbc-home] .cv-cmd button:focus-visible{ outline:2px solid var(--lbc-gold); outline-offset:2px; } /* La ligne d'aide : elle dit ce qui se fait, une fois, sans insister. */ [data-lbc-home] .cv-aide{ position:absolute; left:14px; bottom:16px; z-index:4; margin:0; display:none; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:color-mix(in srgb, var(--lbc-cream) 52%, transparent); pointer-events:none; } [data-lbc-home] .cv-carte.is-live .cv-aide{ display:block; transition:opacity .5s ease; } [data-lbc-home] .cv-carte.is-touchee .cv-aide{ opacity:0; } @media (max-width:560px){ [data-lbc-home] .cv-aide{ display:none !important; } } [data-lbc-home] .cv-carte__svg{ position:absolute; inset:0; width:100%; height:100%; display:block; } [data-lbc-home] .cv-pts{ position:absolute; inset:0; } [data-lbc-home] .cv-terre path{ fill:var(--lbc-forest-600); stroke:var(--lbc-forest-500); stroke-width:1; vector-effect:non-scaling-stroke; } /* Un point de ville. Le halo est plus large que le disque : c'est lui qui fait la densité européenne, là où les disques seuls ne feraient que se chevaucher. */ [data-lbc-home] .cv-pt{ position:absolute; translate:-50% -50%; width:0; height:0; display:block; z-index:1; } [data-lbc-home] .cv-pt b{ position:absolute; left:50%; top:50%; translate:-50% -50%; width:7px; height:7px; border-radius:50%; background:var(--lbc-gold); box-shadow:0 0 0 4px rgba(201,168,76,.16); transition:width .25s ease, height .25s ease, box-shadow .25s ease; } [data-lbc-home] .cv-pt i{ position:absolute; left:50%; bottom:10px; translate:-50% 4px; font-style:normal; font-size:12px; letter-spacing:.04em; white-space:nowrap; color:var(--lbc-forest-900); background:var(--lbc-gold); padding:3px 8px; border-radius:var(--radius-sm,4px); opacity:0; pointer-events:none; transition:opacity .2s ease, translate .2s ease; } [data-lbc-home] .cv-pt:hover{ z-index:3; } [data-lbc-home] .cv-pt:hover b{ width:10px; height:10px; box-shadow:0 0 0 7px rgba(201,168,76,.3); } [data-lbc-home] .cv-pt:hover i{ opacity:1; translate:-50% 0; } /* Les points ne sont pas des cibles tactiles : sur un écran de trois cent quatre-vingt-dix pixels, une ville mesure deux millimètres et sept d'entre elles se superposent sur la Côte d'Azur. Le doigt lit la liste, pas la carte. */ @media (hover:none){ [data-lbc-home] .cv-pt i{ display:none; } [data-lbc-home] .cv-pt b{ width:5px; height:5px; box-shadow:0 0 0 3px rgba(201,168,76,.18); } } /* Un point touché montre son nom. La règle est hors de la requête (hover:none) exprès : un portable à écran tactile se déclare hover:hover, et le nom n'y serait jamais venu au doigt. */ [data-lbc-home] .cv-pt.est-vu i{ display:block; opacity:1; translate:-50% 0; } [data-lbc-home] .cv-pt.est-vu{ z-index:3; } /* Le nom s'affiche de lui-même quand il reste de la place : c'est le script qui pose .a-nom, après avoir écarté les étiquettes qui se chevauchaient (voir noms() dans home.js). */ [data-lbc-home] .cv-pt.a-nom i{ display:block; opacity:1; translate:-50% 0; } [data-lbc-home] .cv-carte.is-pres .cv-pt b{ width:8px; height:8px; } /* Le compte par continent, sous la carte. */ [data-lbc-home] .cv-legende{ list-style:none; margin:clamp(22px,2.6vw,32px) 0 0; padding:0; display:flex; flex-wrap:wrap; gap:clamp(18px,3vw,44px); } [data-lbc-home] .cv-legende li{ display:flex; } /* Chaque compte est un bouton de cadrage. Sans script il n'en a pas l'air — pas de curseur, pas de survol : ce serait promettre un geste qui ne mène nulle part. */ [data-lbc-home] .cv-legende button{ display:flex; align-items:baseline; gap:9px; border:0; background:none; padding:4px 0; margin:0; font:inherit; text-align:left; cursor:default; color:inherit; border-bottom:1px solid transparent; } [data-lbc-home] .cv-carte.is-live ~ .cv-legende button{ cursor:pointer; } [data-lbc-home] .cv-carte.is-live ~ .cv-legende button:hover{ border-bottom-color:var(--lbc-gold); } [data-lbc-home] .cv-legende button[aria-pressed="true"]{ border-bottom-color:var(--lbc-gold); } [data-lbc-home] .cv-legende button:focus-visible{ outline:2px solid var(--lbc-gold); outline-offset:3px; } [data-lbc-home] .cv-legende b{ font-family:var(--font-display); font-size:clamp(22px,2.4vw,30px); font-weight:400; color:var(--text-gold-on-light,#745D28); font-variant-numeric:tabular-nums; line-height:1; } [data-lbc-home] .cv-legende span{ font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--text-muted); } /* La liste, repliée. Elle reste le texte de référence : c'est elle que lisent les moteurs, les lecteurs d'écran et qui cherche une ville par son nom. */ [data-lbc-home] .cv-liste{ margin:clamp(22px,2.6vw,30px) 0 0; padding-top:clamp(18px,2.2vw,26px); border-top:1px solid var(--hairline-soft); } /* Le chevron suit le dernier mot, il ne flotte pas au bout d'une boîte : en inline-flex, un libellé qui passe à la ligne sur un écran étroit laissait la flèche centrée verticalement sur deux lignes, loin du texte. Inline-block la recolle à la fin de la phrase. */ [data-lbc-home] .cv-liste summary{ cursor:pointer; list-style:none; display:block; font-size:13px; line-height:1.5; letter-spacing:.1em; text-transform:uppercase; color:var(--text-gold-on-light,#745D28); padding:4px 0; } [data-lbc-home] .cv-liste summary::-webkit-details-marker{ display:none; } [data-lbc-home] .cv-liste summary::after{ content:""; display:inline-block; width:7px; height:7px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; rotate:45deg; margin-left:12px; translate:0 -3px; transition:rotate .25s ease; } [data-lbc-home] .cv-liste[open] summary::after{ rotate:225deg; translate:0 1px; } [data-lbc-home] .cv-liste summary:focus-visible{ outline:2px solid var(--lbc-gold); outline-offset:3px; } [data-lbc-home] .cv-liste > div{ margin-top:18px; display:grid; gap:14px; } [data-lbc-home] .cv-liste p b{ display:block; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--text-heading); margin-bottom:4px; } /* Ce qu'il contient · la couverture */ [data-lbc-home] .carnet-quoi, [data-lbc-home] .carnet-couv{ background:var(--lbc-cream); } [data-lbc-home] .carnet-couv{ background:var(--lbc-cream-soft,#F6F0E4); } [data-lbc-home] .carnet-quoi h2, [data-lbc-home] .carnet-couv h2, [data-lbc-home] .carnet-apercu h2{ font-family:var(--font-display); font-weight:400; font-size:clamp(26px,3.2vw,42px); line-height:1.1; letter-spacing:-.02em; color:var(--text-heading); margin:0 0 clamp(28px,3.6vw,48px); max-width:22ch; } /* Neuf catégories et non quatre : le carnet contient aussi 198 adresses de shopping, 191 cafés, 241 lieux à voir, 72 beach clubs et 30 spas et salles — un tiers du fichier, que la page ne montrait pas. Trois colonnes, trois rangées : neuf entrées courtes se lisent d'un bloc, là où une grille souple en aurait fait quatre puis quatre puis une, avec une orpheline en bas. */ [data-lbc-home] .carnet-quoi__grille{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(24px,3vw,44px) clamp(20px,2.6vw,38px); } @media (max-width:860px){ [data-lbc-home] .carnet-quoi__grille{ grid-template-columns:repeat(2,minmax(0,1fr)); } } @media (max-width:520px){ [data-lbc-home] .carnet-quoi__grille{ grid-template-columns:1fr; } } [data-lbc-home] .carnet-quoi h3{ font-family:var(--font-display); font-size:20px; font-weight:400; color:var(--text-heading); margin:0 0 10px; display:flex; align-items:baseline; gap:10px; } [data-lbc-home] .carnet-quoi p, [data-lbc-home] .carnet-couv p{ margin:0; font-size:15px; line-height:1.65; color:var(--text-muted); } /* L'agenda, cinquième entrée. Un filet d'or au-dessus du titre suffit à dire qu'elle n'est pas de la même nature que les quatre autres : ce ne sont pas des adresses, c'est une date. */ [data-lbc-home] .carnet-lien{ display:inline-block; margin-top:14px; font-size:14px; color:var(--text-gold-on-light,#745D28); text-decoration:none; border-bottom:1px solid color-mix(in srgb, var(--lbc-gold) 45%, transparent); padding-bottom:2px; } [data-lbc-home] .carnet-lien:hover, [data-lbc-home] .carnet-lien:focus-visible{ border-bottom-color:var(--lbc-gold); } /* Le filet qui sépare « ce qu'il ne contient pas » est passé sur le bloc du dessus. Porté par le paragraphe, il s'arrêtait à 60ch — un trait court, à mi-largeur, juste sous le trait d'or qui, lui, traverse : deux règles inachevées l'une sur l'autre. */ /* ============================================================ L'AGENDA — CE QUI NE SE RÉSERVE PAS Ce n'est pas une cinquième catégorie d'adresses, c'est une offre d'une autre nature : l'accès à des événements où l'argent seul n'entre pas. Elle prend donc toute la largeur, se pose sur le vert du Cercle au milieu d'une section crème, et nomme trois rendez-vous plutôt que d'en parler en général — « des événements privés » ne fait rien voir, « Grand Prix de Monaco » si. ============================================================ */ [data-lbc-home] .carnet-agenda{ margin-top:clamp(38px,4.6vw,64px); background:var(--lbc-forest-900); color:var(--lbc-cream); border-radius:var(--radius-lg); padding:clamp(30px,4vw,56px); } [data-lbc-home] .carnet-agenda .h-eyebrow{ color:var(--lbc-gold); margin:0 0 14px; } [data-lbc-home] .carnet-agenda h3{ font-family:var(--font-display); font-weight:400; font-size:clamp(26px,3.4vw,42px); line-height:1.08; letter-spacing:-.02em; color:var(--lbc-cream); margin:0 0 16px; } /* Deux règles nomment ici l'élément (p.carnet-…) et non la seule classe. La raison est toujours la même : « .carnet-quoi p » pose color:var(--text-muted) et margin:0 avec une spécificité de (0,2,1). Une classe seule, à (0,2,0), perd — le paragraphe de l'agenda se peignait en gris sourd sur le vert profond, et la ligne du bas venait coller au bas de la bande, sans sa marge. Troisième fois que ce piège se referme sur cette page. */ [data-lbc-home] .carnet-agenda p.carnet-agenda__dit{ margin:0; font-size:17px; line-height:1.75; max-width:62ch; color:color-mix(in srgb, var(--lbc-cream) 92%, transparent); } /* Les trois rendez-vous. Une colonne chacun, séparés par un filet vertical : c'est une liste d'occasions, pas une grille de cartes. */ [data-lbc-home] .carnet-agenda__liste{ list-style:none; margin:clamp(28px,3.4vw,42px) 0 0; padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); border-top:1px solid var(--border-on-dark); } [data-lbc-home] .carnet-agenda__liste li{ padding:clamp(20px,2.2vw,28px) clamp(16px,1.8vw,24px) 6px 0; border-left:1px solid var(--border-on-dark); padding-left:clamp(16px,1.8vw,24px); } [data-lbc-home] .carnet-agenda__liste li:first-child{ border-left:0; padding-left:0; } [data-lbc-home] .carnet-agenda__liste b{ display:block; font-family:var(--font-display); font-weight:400; font-size:clamp(17px,1.5vw,21px); line-height:1.2; color:var(--lbc-cream); } [data-lbc-home] .carnet-agenda__liste span{ display:block; margin-top:8px; font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--lbc-gold); } /* Le quatrième n'est pas un rendez-vous, c'est l'aveu qu'il y en a d'autres qu'on ne nomme pas. Il se tient en retrait. */ [data-lbc-home] .carnet-agenda__liste li:last-child b{ color:color-mix(in srgb, var(--lbc-cream) 62%, transparent); font-family:var(--font-body); font-weight:400; font-size:15px; line-height:1.5; } [data-lbc-home] .carnet-agenda__liste li:last-child span{ color:color-mix(in srgb, var(--lbc-cream) 42%, transparent); } [data-lbc-home] .carnet-agenda .carnet-lien{ color:var(--lbc-gold); margin-top:clamp(26px,3vw,36px); border-bottom-color:color-mix(in srgb, var(--lbc-gold) 45%, transparent); } [data-lbc-home] .carnet-agenda .carnet-lien:hover{ border-bottom-color:var(--lbc-gold); } @media (max-width:860px){ [data-lbc-home] .carnet-agenda__liste{ grid-template-columns:repeat(2,minmax(0,1fr)); } [data-lbc-home] .carnet-agenda__liste li:nth-child(3){ border-left:0; padding-left:0; } } @media (max-width:520px){ [data-lbc-home] .carnet-agenda__liste{ grid-template-columns:1fr; } [data-lbc-home] .carnet-agenda__liste li{ border-left:0; padding-left:0; border-top:1px solid var(--border-on-dark); } [data-lbc-home] .carnet-agenda__liste li:first-child{ border-top:0; } } [data-lbc-home] .carnet-quoi p.carnet-degre{ margin:clamp(34px,4vw,52px) 0 0; font-size:15px; line-height:1.7; color:var(--text-muted); max-width:60ch; } /* L'aperçu : huit villes, quatre adresses chacune. */ [data-lbc-home] .carnet-apercu{ background:var(--lbc-forest-900); color:var(--lbc-cream); } [data-lbc-home] .carnet-apercu h2{ color:var(--lbc-cream); } [data-lbc-home] .carnet-lead{ margin:-28px 0 clamp(30px,3.6vw,48px); max-width:52ch; font-size:16px; line-height:1.7; color:color-mix(in srgb, var(--lbc-cream) 72%, transparent); } [data-lbc-home] .carnet-villes{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:clamp(18px,2.2vw,32px); } [data-lbc-home] .carnet-ville{ border:1px solid var(--border-on-dark); border-radius:var(--radius-md); padding:clamp(20px,2.2vw,28px); background:linear-gradient(150deg, rgba(232,225,205,.05), rgba(6,32,26,.2)); } [data-lbc-home] .carnet-ville h3{ font-family:var(--font-display); font-size:22px; font-weight:400; color:var(--lbc-cream); margin:0 0 16px; padding-bottom:12px; border-bottom:1px solid var(--border-on-dark); } [data-lbc-home] .carnet-ville ul{ list-style:none; margin:0; padding:0; display:grid; gap:14px; } [data-lbc-home] .carnet-ville li{ display:grid; gap:3px; } [data-lbc-home] .carnet-cat{ font-size:10px; font-weight:600; letter-spacing:.22em; text-transform:uppercase; color:var(--lbc-gold); } [data-lbc-home] .carnet-ville b{ font-size:15.5px; font-weight:600; color:var(--lbc-cream); } [data-lbc-home] .carnet-ville i{ font-style:normal; font-size:13.5px; line-height:1.55; color:color-mix(in srgb, var(--lbc-cream) 56%, transparent); } /* L'accès */ [data-lbc-home] .carnet-acces{ background:var(--lbc-forest); color:var(--lbc-cream); text-align:center; } [data-lbc-home] .carnet-sceau{ height:54px; width:auto; display:block; margin:0 auto 26px; } [data-lbc-home] .carnet-acces h2{ font-family:var(--font-display); font-weight:400; font-size:clamp(26px,3.4vw,44px); line-height:1.12; letter-spacing:-.02em; color:var(--lbc-cream); margin:0 auto; max-width:20ch; } [data-lbc-home] .carnet-acces p{ margin:22px auto 0; max-width:52ch; font-size:16px; line-height:1.7; color:var(--text-on-dark-soft); } [data-lbc-home] .carnet-bouton{ display:inline-flex; align-items:center; min-height:48px; margin-top:12px; padding:14px 34px; border-radius:var(--radius-pill); background:var(--accent); color:var(--accent-text); font-weight:600; font-size:16px; text-decoration:none; transition:transform .3s var(--ease-quiet), box-shadow .3s ease; } /* 24/09/2026 : le soulevement ne colle plus au doigt apres un tap. */ @media (hover:hover) and (pointer:fine){ [data-lbc-home] .carnet-bouton:hover{ transform:translateY(-1px); box-shadow:0 18px 40px -22px rgba(255,222,89,.6); } } [data-lbc-home] .carnet-acces__sec a{ color:var(--lbc-gold); text-decoration:none; border-bottom:1px solid currentColor; padding-bottom:3px; font-size:15px; } /* home.css remet à zéro le rembourrage vertical de TOUTE section sur une page `data-lbc-home`, en !important, et ne le rend qu'aux sections marquées .h-pad — lesquelles reçoivent 88 à 168 px, bien trop pour un bandeau de chiffres. On reprend donc la main avec la même arme et la même spécificité, plutôt que d'ajouter .h-pad et de se retrouver avec un bandeau haut comme une section. */ [data-lbc-lux][data-lbc-home] section.carnet-chiffres{ padding-top:clamp(34px,4.4vw,58px) !important; padding-bottom:clamp(34px,4.4vw,58px) !important; } /* --- LA CONCIERGERIE, EN PLEINE PAGE ------------------------------- C'est elle qui vend. Le carnet est le savoir ; elle est la main qui l'ouvre, et sans elle deux mille adresses ne sont qu'une liste. Elle passe donc avant l'inventaire, sur fond sombre, avec ses cinq prestations nommées. Aucun prestataire extérieur n'y figure : le fichier en nomme près de cent en clair, et les publier reviendrait à donner le numéro qu'on vend. La discrétion est ici une règle commerciale autant qu'un principe. */ [data-lbc-home] .carnet-conc{ background:var(--lbc-forest); color:var(--lbc-cream); } [data-lbc-home] .carnet-conc h2{ font-family:var(--font-display); font-weight:400; font-size:clamp(28px,3.6vw,50px); line-height:1.08; letter-spacing:-.02em; color:var(--lbc-cream); margin:0 0 22px; max-width:20ch; } [data-lbc-home] .carnet-conc .carnet-lead{ margin:0 0 clamp(34px,4vw,54px); max-width:56ch; font-size:17px; line-height:1.7; color:color-mix(in srgb, var(--lbc-cream) 76%, transparent); } [data-lbc-home] .carnet-conc__grille{ /* Cinq prestations, cinq colonnes : à quatre, la cinquième restait seule sur une deuxième rangée avec son filet en l'air. */ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:0; border-top:1px solid var(--border-on-dark); } [data-lbc-home] .carnet-conc__grille > div{ padding:clamp(22px,2.4vw,30px) clamp(16px,1.8vw,26px); border-bottom:1px solid var(--border-on-dark); border-right:1px solid var(--border-on-dark); } [data-lbc-home] .carnet-conc__grille > div:last-child{ border-right:0; } [data-lbc-home] .carnet-conc h3{ font-family:var(--font-display); font-size:19px; font-weight:400; color:var(--lbc-gold-soft,#D2B978); margin:0 0 10px; line-height:1.25; } [data-lbc-home] .carnet-conc__grille p{ margin:0; font-size:14.5px; line-height:1.6; color:color-mix(in srgb, var(--lbc-cream) 62%, transparent); } [data-lbc-home] .carnet-conc__pied{ margin:clamp(30px,3.4vw,44px) 0 0; max-width:62ch; font-size:15px; line-height:1.7; font-style:italic; color:color-mix(in srgb, var(--lbc-cream) 66%, transparent); } @media (max-width:1000px){ [data-lbc-home] .carnet-conc__grille{ grid-template-columns:repeat(2,minmax(0,1fr)); } [data-lbc-home] .carnet-conc__grille > div:nth-child(2n){ border-right:0; } } @media (max-width:560px){ [data-lbc-home] .carnet-conc__grille{ grid-template-columns:1fr; } [data-lbc-home] .carnet-conc__grille > div{ border-right:0; } } /* --- LA CONCIERGERIE SUR « CE QU'IL APPORTE » ----------------------- La page qui liste ce que le Cercle apporte ne mentionnait nulle part sa conciergerie ni son carnet — alors que c'est la prestation la plus concrète du lot, et la seule qui se mesure en euros. Elle vient donc après les dix-huit bénéfices, juste avant le bandeau photographique, et elle mène au carnet. */ [data-lbc-home] .reseau-conc{ background:var(--lbc-forest); color:var(--lbc-cream); } [data-lbc-home] .reseau-conc h2{ font-family:var(--font-display); font-weight:400; font-size:clamp(28px,3.6vw,48px); line-height:1.1; letter-spacing:-.02em; color:var(--lbc-cream); margin:14px 0 20px; max-width:18ch; } [data-lbc-home] .reseau-conc__lead{ margin:0 0 clamp(30px,3.6vw,48px); max-width:58ch; font-size:17px; line-height:1.7; color:color-mix(in srgb, var(--lbc-cream) 76%, transparent); } [data-lbc-home] .reseau-conc__grille{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:0; border-top:1px solid var(--border-on-dark); } [data-lbc-home] .reseau-conc__grille > div{ padding:clamp(20px,2.2vw,28px) clamp(16px,1.8vw,24px); border-bottom:1px solid var(--border-on-dark); border-right:1px solid var(--border-on-dark); } [data-lbc-home] .reseau-conc__grille > div:last-child{ border-right:0; } [data-lbc-home] .reseau-conc h3{ font-family:var(--font-display); font-size:18px; font-weight:400; color:var(--lbc-gold-soft,#D2B978); margin:0 0 9px; line-height:1.25; } [data-lbc-home] .reseau-conc__grille p{ margin:0; font-size:14.5px; line-height:1.6; color:color-mix(in srgb, var(--lbc-cream) 62%, transparent); } [data-lbc-home] .reseau-conc__lien{ margin:clamp(28px,3.2vw,40px) 0 0; } [data-lbc-home] .reseau-conc__lien a{ color:var(--lbc-gold); text-decoration:none; font-size:16px; border-bottom:1px solid currentColor; padding-bottom:4px; } @media (max-width:900px){ [data-lbc-home] .reseau-conc__grille{ grid-template-columns:repeat(2,minmax(0,1fr)); } [data-lbc-home] .reseau-conc__grille > div:nth-child(2n){ border-right:0; } } @media (max-width:540px){ [data-lbc-home] .reseau-conc__grille{ grid-template-columns:1fr; } [data-lbc-home] .reseau-conc__grille > div{ border-right:0; } } /* La mention du carnet, dans la liste des avantages, mène au carnet. C'est la seule ligne de la grille qui soit un lien : elle porte un filet pour le dire, sans devenir un bouton au milieu d'une liste. */ [data-lbc-home] .vers-carnet{ color:inherit; text-decoration:none; border-bottom:1px solid color-mix(in srgb, var(--lbc-gold,#C9A84C) 55%, transparent); padding-bottom:2px; transition:border-color .3s ease, color .3s ease; } [data-lbc-home] .vers-carnet:hover{ color:var(--text-gold-on-light,#745D28); border-bottom-color:currentColor; } /* ============================================================ AGENDA — QUAND IL N'Y A RIEN À ANNONCER La page annonçait trois rencontres datées : un dîner à Paris le 12 septembre, une masterclass à Genève le 4 octobre, une soirée à Bruxelles le 21 novembre. Aucune n'était prévue. Sans année, elles se lisaient comme les trois mois à venir — et c'est exactement ce qu'un candidat va vérifier avant de postuler. La section reste, avec son titre et sa règle (« annoncée aux membres, et à eux seuls »), et la rangée des quatre formats au-dessus dit toujours ce qui se passe au Cercle. Seules les fausses dates partent. Ce qui les remplace n'est pas un état vide qu'on subit : c'est la même politique, dite franchement. ============================================================ */ /* Les deux règles ci-dessous nomment l'élément (p.h-agenda__…) parce que home.css pose « .h-agenda p { font-size:15px } » à (0,2,1) : sans le nom, la phrase d'ouverture se peignait en petit corps crème au lieu du grand corps or — la classe seule perdait la cascade. */ [data-lbc-home] .h-agenda--vide{ padding:clamp(34px,4vw,54px) 0 clamp(32px,3.6vw,46px); border-bottom:1px solid var(--border-on-dark); display:grid; grid-template-columns:minmax(0,0.95fr) minmax(0,1.05fr); gap:clamp(18px,3vw,48px); align-items:start; } [data-lbc-home] .h-agenda--vide p.h-agenda__rien{ margin:0; font-family:var(--font-display); font-weight:400; font-size:clamp(24px,2.8vw,38px); line-height:1.15; letter-spacing:-.02em; color:var(--lbc-gold); max-width:14ch; } [data-lbc-home] .h-agenda--vide p.h-agenda__dit{ margin:0; font-size:16px; line-height:1.75; color:var(--text-on-dark-soft); max-width:52ch; } @media (max-width:820px){ [data-lbc-home] .h-agenda--vide{ grid-template-columns:1fr; gap:16px; } } /* La carte de Présence se manipule maintenant comme celle du carnet : glisser pour se déplacer, pincer ou ⌘+molette pour approcher. Elle n'avait que trois cadrages fixes — on voyait l'Europe, l'Asie ou le monde, et rien entre les trois. */ [data-lbc-home] .h-map{ cursor:grab; touch-action:pan-y; } [data-lbc-home] .h-map.is-prise{ cursor:grabbing; } [data-lbc-home] .h-map:focus-visible{ outline:2px solid var(--lbc-gold); outline-offset:3px; } /* Les six valeurs du Manifeste : trois colonnes deviennent deux puis une. La page est écrite en styles en ligne, la grille aussi — seule la reprise pour petits écrans a besoin d'une requête média. */ @media (max-width:860px){ [data-lbc-home] section > div > div[style*="repeat(3"]{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; } } @media (max-width:560px){ [data-lbc-home] section > div > div[style*="repeat(3"]{ grid-template-columns:1fr !important; } } /* Le pied des trois temps, sur la page du Conseil : la phrase qui dit ce que le Conseil n'est pas. Elle ferme la colonne des étapes, elle n'en est pas une — d'où le filet plutôt qu'un numéro. */ [data-lbc-home] .h-steps__pied{ margin:clamp(26px,3vw,38px) 0 0; padding-top:clamp(20px,2.4vw,28px); border-top:1px solid var(--hairline-soft); font-size:15px; line-height:1.75; color:var(--text-muted); max-width:56ch; } [data-lbc-home] .h-dark .h-steps__pied{ border-top-color:var(--border-on-dark); color:var(--text-on-dark-soft); } /* ============================================================ COLONNES DÉSYNCHRONISÉES SUR FOND CLAIR Le bloc .h-split n'existait que sur fond sombre : ses titres, ses numéros et ses filets sont écrits en crème et en --border-on-dark. Posé tel quel sur la section claire du Conseil, il rendait un titre crème sur crème — mesuré à l'écran : illisible, pas seulement pâle. On ne réécrit pas le bloc, on lui donne sa variante claire : mêmes règles, couleurs de la page. Les sélecteurs nomment .h-light pour rester au-dessus des règles d'origine, qui ont la même spécificité et sont déclarées avant. ============================================================ */ [data-lbc-home] .h-light .h-split h2, [data-lbc-home] .h-split.h-light h2{ color:var(--text-heading); } [data-lbc-home] .h-light.h-split .h-split__say{ color:var(--text-gold-on-light,#745D28); } [data-lbc-home] .h-light.h-split .h-step{ border-top-color:var(--hairline-soft); } [data-lbc-home] .h-light.h-split .h-step:last-child{ border-bottom-color:var(--hairline-soft); } [data-lbc-home] .h-light.h-split .h-step em{ color:var(--text-gold-on-light,#745D28); } [data-lbc-home] .h-light.h-split .h-step h3{ color:var(--text-heading); } [data-lbc-home] .h-light.h-split .h-step p{ color:var(--text-muted); } [data-lbc-home] .h-light.h-split .h-step:hover{ border-top-color:var(--lbc-gold); } /* ============================================================ CIBLES TACTILES — LES LIENS ÉCRITS EN LIGNE Mesuré en 390 px : le fil d'Ariane des articles fait 16 px de haut, le retour « ← Le Journal » 22 px, et les liens des pages légales 20 px. Un pouce vise mal en dessous de 24 px (WCAG 2.5.8). Ces pages sont stylées en attributs style, qu'aucune classe ne peut battre — mais le style en ligne ne pose PAS de padding : on peut donc épaissir la zone cliquable d'ici sans toucher à l'aspect, exactement comme pour le pied de page plus haut. ============================================================ */ [data-lbc-lux] nav[aria-label] li a, [data-lbc-lux] a[href^="Journal"], [data-lbc-lux] a[href^="mailto:"], [data-lbc-lux] a[href^="https://www.cnil"], [data-lbc-lux] a[href$="Mentions.html"], [data-lbc-lux] a[href$="Mentions_en.html"], [data-lbc-lux] a[href$="Confidentialite.html"], [data-lbc-lux] a[href$="Confidentialite_en.html"]{ padding-top:5px; padding-bottom:5px; } /* Les liens posés dans le corps d'un paragraphe : l'épaississement se fait en boîte en ligne, il n'ouvre pas d'espace entre les lignes. */ [data-lbc-lux] p a, [data-lbc-lux] li a{ display:inline-block; padding-top:4px; padding-bottom:4px; } /* Le lien de pied d'article (« Intégrer le Cercle → ») est seul dans sa boîte, hors paragraphe : il a besoin de sa propre règle. */ [data-lbc-lux] a[href^="Integrer"]{ display:inline-block; padding-top:5px; padding-bottom:5px; } /* Tout lien « seul dans sa boîte » qui se signale par un filet : c'est la forme du lien de pied d'article, quelle que soit sa destination (Le Conseil, les territoires, l'accueil de Merci…). */ [data-lbc-lux] a[style*="border-bottom"]{ display:inline-block; padding-top:5px; padding-bottom:5px; } /* Les indicateurs du carrousel sont des traits de 28 × 2 px : c'est le dessin voulu, mais un doigt ne vise pas un trait. La zone cliquable s'épaissit au pseudo-élément — le trait, lui, ne change pas. */ [data-lbc-home] .h-dot{ position:relative; } [data-lbc-home] .h-dot::after{ content:""; position:absolute; inset:-14px -8px; } /* Les épingles de la carte de Présence, même affaire : le point fait sept pixels, la zone d'appui en fait quarante-quatre. */ [data-lbc-home] .h-pin{ position:absolute; } [data-lbc-home] .h-pin::after{ content:""; position:absolute; left:50%; top:50%; translate:-50% -50%; width:44px; height:44px; } /* Le point EST l'épingle. L'étiquette restait dans le flux de la boîte que translate(-50%,-50%) centre sur la ville : le point tombait donc à une demi-étiquette de sa place, Bangkok en mer, Dubaï en Arabie saoudite (jusqu'à 66 px, mesuré le 04/10/2026). L'étiquette sort du flux et se pose autour du point, du côté que dit la classe. */ [data-lbc-home] .h-pin > span{ position:absolute; } [data-lbc-home] .h-pin--left > span{ left:100%; top:50%; margin-left:9px; translate:0 -50%; } [data-lbc-home] .h-pin--right > span{ right:100%; top:50%; margin-right:9px; translate:0 -50%; } [data-lbc-home] .h-pin--above > span{ bottom:100%; left:50%; margin-bottom:7px; translate:-50% 0; } [data-lbc-home] .h-pin--below > span{ top:100%; left:50%; margin-top:7px; translate:-50% 0; } [data-lbc-home] .h-pin[data-c="fr"] > span{ translate:-18px calc(-50% + 26px); } /* ============================================================ TROIS GESTES D'ANIMATION, À L'ÉCHELLE DU SITE Recherche préalable : sur les sites de luxe primés, le mouvement sert le récit ou n'est pas — 200 à 500 ms, courbes lentes, jamais deux effets en même temps. Trois gestes seulement, donc, chacun avec une raison d'être. ============================================================ */ /* 1 — LE FILET D'OR SE TRACE SOUS LES TITRES. Le trait doré est partout la signature du site (nav, plan, cartes) ; sous un titre de section, il se dessine de gauche à droite à mesure que le titre entre dans le champ — le geste d'une règle qu'on tire sous une ligne au moment de la lire. Piloté par le défilement lui-même (animation-timeline: view()), donc aucun script, et les navigateurs qui l'ignorent voient simplement le trait posé. */ @supports (animation-timeline: view()) { [data-lbc-home] .carnet-quoi h2::after, [data-lbc-home] .carnet-couv h2::after, [data-lbc-home] .carnet-apercu h2::after, [data-lbc-home] .carnet-conc h2::after{ content:""; display:block; height:2px; width:5.5em; margin-top:18px; background:var(--lbc-gold); transform-origin:left center; animation:filet-trace linear both; animation-timeline:view(); animation-range:entry 10% entry 55%; } @media (prefers-reduced-motion: reduce){ [data-lbc-home] .carnet-quoi h2::after, [data-lbc-home] .carnet-couv h2::after, [data-lbc-home] .carnet-apercu h2::after, [data-lbc-home] .carnet-conc h2::after{ animation:none; } } } @keyframes filet-trace{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } } /* 2 — LES RENDEZ-VOUS DE L'AGENDA ARRIVENT UN PAR UN. La bande se révèle déjà d'un bloc (lux-r) ; ses quatre occasions la suivaient d'un seul mouvement, comme une liste. Décalées de 90 ms chacune, elles se présentent — Monaco, puis les Fashion Weeks, puis Cannes, puis l'aveu. L'état de départ n'existe que si lux.js a armé la bande : sans script, tout est simplement visible. */ [data-lbc-home] .carnet-agenda.lux-armed .carnet-agenda__liste li{ opacity:0; translate:0 14px; transition:opacity .6s var(--ease-quiet), translate .6s var(--ease-quiet); } [data-lbc-home] .carnet-agenda.lux-armed .carnet-agenda__liste li:nth-child(2){ transition-delay:.09s; } [data-lbc-home] .carnet-agenda.lux-armed .carnet-agenda__liste li:nth-child(3){ transition-delay:.18s; } [data-lbc-home] .carnet-agenda.lux-armed .carnet-agenda__liste li:nth-child(4){ transition-delay:.34s; } [data-lbc-home] .carnet-agenda.is-in .carnet-agenda__liste li{ opacity:1; translate:0 0; } /* 3 — LE CACHET. Le bouton principal se presse comme un sceau dans la cire : il se soulève d'un rien à l'approche, et l'appui l'enfonce — 140 ms, c'est une confirmation, pas un spectacle. Réservé aux boutons qui engagent (ouvrir le carnet, candidater) : un lien ordinaire n'a pas à se prendre pour un acte. */ [data-lbc-home] .carnet-bouton{ transition:translate .25s var(--ease-quiet), box-shadow .25s ease, scale .14s ease; will-change:translate; } /* 24/09/2026 : meme raison, un survol qui deplace ne vaut que sous souris. */ @media (hover:hover) and (pointer:fine){ [data-lbc-home] .carnet-bouton:hover{ translate:0 -2px; box-shadow:0 10px 26px -12px rgba(201,168,76,.55); } } [data-lbc-home] .carnet-bouton:active{ scale:.965; translate:0 0; box-shadow:0 3px 10px -6px rgba(201,168,76,.5); } @media (prefers-reduced-motion: reduce){ [data-lbc-home] .carnet-agenda.lux-armed .carnet-agenda__liste li{ opacity:1 !important; translate:none !important; transition:none !important; } [data-lbc-home] .carnet-bouton, [data-lbc-home] .carnet-bouton:hover, [data-lbc-home] .carnet-bouton:active{ translate:none; scale:none; transition:none; } } /* ============================================================ LES ROUTES DU CERCLE — carte de Présence Tracées par home.js dans le SVG de la carte, en unités de carte : le zoom les emporte avec les côtes. Chaque arc se dessine quand la carte devient visible (.is-live, déjà posé par l'observateur des épingles), l'une après l'autre, de la plus proche à la plus lointaine — la Belgique d'un trait, la Thaïlande en dernier. */ [data-lbc-home] .h-routes path{ fill:none; stroke:#F0D9A0; stroke-width:1.3; vector-effect:non-scaling-stroke; opacity:.55; stroke-linecap:round; transition:stroke-dashoffset 1.4s cubic-bezier(.35,0,.25,1); transition-delay:calc(.45s + var(--route,0) * .18s); } [data-lbc-home] .h-map.is-live .h-routes path{ stroke-dashoffset:0 !important; } @media (prefers-reduced-motion: reduce){ [data-lbc-home] .h-routes path{ transition:none; } } /* ============================================================ PORTRAITS — Fondateurs de Territoire L'inclinaison vient de home.js ; ici, le reflet qui l'accompagne : un lustre discret qui suit le pointeur sur la photo, comme un éclairage de galerie. Sans lui, l'inclinaison seule fait « carte » ; avec lui, elle fait « verre encadré ». */ [data-lbc-home] .h-person__ph{ transition:transform .35s var(--ease-quiet); transform-style:preserve-3d; position:relative; } [data-lbc-home] .h-person__ph::after{ content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(420px circle at var(--lx,50%) 12%, rgba(255,240,205,.14), transparent 62%); opacity:0; transition:opacity .4s ease; } [data-lbc-home] .h-person:hover .h-person__ph::after{ opacity:1; } @media (hover:none), (prefers-reduced-motion: reduce){ [data-lbc-home] .h-person__ph{ transition:none; } [data-lbc-home] .h-person__ph::after{ display:none; } } /* ============================================================ LES FORMULES SONT DES PORTES — Opportunités Toute la métaphore du site est la porte ; les quatre formules et les deux cartes partenaires s'entrouvent donc au survol : trois degrés de pivot sur le gond gauche, et un rai de lumière chaude qui monte sur le chant droit — la pièce derrière est éclairée. Les mêmes trois degrés que les portes du couloir 3D, la cohérence est le message. */ [data-lbc-home] .h-plan, [data-lbc-home] .h-pcard{ transition:transform .45s var(--ease-quiet), box-shadow .45s ease; transform-origin:left center; position:relative; } [data-lbc-home] .h-plan::after, [data-lbc-home] .h-pcard::after{ content:""; position:absolute; top:6%; bottom:6%; right:-1px; width:3px; background:linear-gradient(to bottom, transparent, rgba(255,214,150,.85) 30%, rgba(255,214,150,.85) 70%, transparent); opacity:0; transition:opacity .45s ease; pointer-events:none; border-radius:2px; } @media (hover:hover) and (pointer:fine){ [data-lbc-home] .h-plan:hover, [data-lbc-home] .h-pcard:hover{ transform:perspective(1100px) rotateY(2.6deg); box-shadow:14px 18px 44px -22px rgba(4,31,28,.45); } [data-lbc-home] .h-plan:hover::after, [data-lbc-home] .h-pcard:hover::after{ opacity:1; } } @media (prefers-reduced-motion: reduce){ [data-lbc-home] .h-plan, [data-lbc-home] .h-pcard{ transition:none; } [data-lbc-home] .h-plan:hover, [data-lbc-home] .h-pcard:hover{ transform:none; } } /* Le voile de traversée, côté arrivée : même teinte que côté départ (home-3d.css) — la lumière qu'on a traversée est celle dans laquelle on débarque. Déclaré ici parce que les pages de territoire ne chargent pas la feuille de la 3D. */ .seuil-voile{ position:fixed; inset:0; z-index:200; pointer-events:none; background:radial-gradient(120% 100% at 50% 45%, #FFF3DC 0%, #F6E3BC 55%, #E9D0A0 100%); opacity:0; } .seuil-voile.est-la{ opacity:1; } /* ============================================================ LE GLOBE DE PRÉSENCE Un canvas carré posé au-dessus de la carte plate : le monde en volume d'abord, le détail à plat ensuite. Il flotte à droite sur grand écran — la carte garde toute sa largeur — et reprend le centre sur téléphone. */ /* L'apparition du bloc appartient à lux-r, comme partout : un second fondu maison par-dessus laissait le globe bloqué à mi-opacité — deux transitions sur la même propriété, la dernière armée gagnait. Seul le canvas attend ses données : sans elles il serait un carré noir. */ [data-lbc-home] .globe2d{ position:relative; width:min(46vw,430px); margin:clamp(40px,5vw,70px) auto 0; } [data-lbc-home] .globe2d canvas{ opacity:0; transition:opacity .8s ease; } [data-lbc-home] .globe2d.est-pret canvas{ opacity:1; } /* pan-y : le doigt qui glisse horizontalement tourne le globe, le glisser vertical reste à la page — même partage que les cartes. */ [data-lbc-home] .globe2d canvas{ display:block; width:100%; cursor:grab; touch-action:pan-y; filter:drop-shadow(0 24px 48px rgba(0,0,0,.5)); } [data-lbc-home] .globe2d.is-prise canvas{ cursor:grabbing; } [data-lbc-home] .globe2d__nom{ position:absolute; translate:-50% -100%; pointer-events:none; font-size:12px; letter-spacing:.06em; white-space:nowrap; color:var(--lbc-forest-900); background:var(--lbc-gold); padding:3px 9px; border-radius:var(--radius-sm,4px); opacity:0; transition:opacity .2s ease; } [data-lbc-home] .globe2d.a-nom .globe2d__nom{ opacity:1; } [data-lbc-home] .globe2d__aide{ margin:14px 0 0; text-align:center; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:color-mix(in srgb, var(--lbc-cream) 46%, transparent); } @media (max-width:700px){ [data-lbc-home] .globe2d{ width:min(78vw,340px); } } /* La toile du Réseau : posée entre la photo du hero et son voile, elle vit dans la pénombre du premier écran sans gêner le titre. */ [data-lbc-home] .toile{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; mix-blend-mode:screen; opacity:.8; } /* ============================================================ LA FAQ SE PLIE Six réponses ouvertes à la file faisaient une page qu'on parcourt ; six questions repliées font une page qu'on interroge — on lit la liste d'un regard, on ouvre la sienne. La première reste ouverte : une page d'accordéons tous clos ressemble à une porte fermée. Balise
native : le clavier, le lecteur d'écran et la recherche dans la page (les navigateurs déplient automatiquement) fonctionnent sans une ligne de script. L'ouverture est animée par le seul moyen fiable sur details : la grille qui passe de 0fr à 1fr. ============================================================ */ .faq-pli{ background:var(--surface-card); border:1px solid var(--hairline-soft); border-radius:14px; margin-bottom:14px; transition:border-color .3s ease; } .faq-pli[open]{ border-color:color-mix(in srgb, var(--lbc-gold) 45%, transparent); } .faq-pli summary{ list-style:none; cursor:pointer; display:flex; gap:18px; align-items:baseline; padding:26px 32px; } .faq-pli summary::-webkit-details-marker{ display:none; } .faq-pli summary:focus-visible{ outline:2px solid var(--lbc-gold); outline-offset:3px; border-radius:14px; } .faq-num{ font-family:var(--font-display); color:var(--lbc-gold); font-size:22px; font-weight:400; flex:none; transition:opacity .3s ease; } .faq-pli[open] .faq-num{ opacity:.55; } .faq-q{ font-family:var(--font-display); font-size:clamp(19px,2vw,23px); color:var(--text-heading); font-weight:400; flex:1; line-height:1.3; } .faq-chev{ flex:none; width:9px; height:9px; align-self:center; border-right:1.5px solid var(--lbc-gold); border-bottom:1.5px solid var(--lbc-gold); rotate:45deg; translate:0 -2px; transition:rotate .3s var(--ease-quiet); } .faq-pli[open] .faq-chev{ rotate:225deg; translate:0 2px; } .faq-rep{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .38s var(--ease-quiet); } .faq-pli[open] .faq-rep{ grid-template-rows:1fr; } .faq-rep > div{ overflow:hidden; min-height:0; padding:0 32px 0 calc(32px + 18px + 1.2em); } .faq-pli[open] .faq-rep > div{ padding-bottom:28px; } @media (max-width:600px){ .faq-pli summary{ padding:20px 20px; gap:12px; } .faq-rep > div{ padding-left:20px; padding-right:20px; } } @media (prefers-reduced-motion: reduce){ .faq-rep, .faq-chev, .faq-num{ transition:none; } } /* Les cartes qui portent un contenu cliquable ou détaillé se soulèvent d'un rien à l'approche — assez pour dire « je réponds », pas assez pour secouer la page. */ @media (hover:hover) and (pointer:fine){ [data-lbc-home] .h-card, [data-lbc-home] .h-rail__card, [data-lbc-home] .h-post, [data-lbc-home] .h-story{ transition:translate .35s var(--ease-quiet), box-shadow .35s ease; } [data-lbc-home] .h-card:hover, [data-lbc-home] .h-rail__card:hover, [data-lbc-home] .h-post:hover, [data-lbc-home] .h-story:hover{ translate:0 -4px; box-shadow:0 18px 40px -22px rgba(4,31,28,.4); } } @media (prefers-reduced-motion: reduce){ [data-lbc-home] .h-card:hover, [data-lbc-home] .h-rail__card:hover, [data-lbc-home] .h-post:hover, [data-lbc-home] .h-story:hover{ translate:none; } } /* Le cachet s'étend à tous les boutons qui engagent : appel de la nav, envoi du formulaire. Même geste partout — 140 ms d'enfoncement. */ [data-lbc-lux] .lux-cta:active, [data-lbc-lux] button[type="submit"]:active, [data-lbc-home] form button:active{ scale:.965; transition:scale .14s ease; } /* ================================================================== DIRECTION ARTISTIQUE — LA MATIÈRE Quatre gestes qui font passer les pages du « propre » au « gravé ». ================================================================== */ /* --- 1. LE GRAIN DU PAPIER ---------------------------------------- Les aplats crème et forêt étaient des couleurs d'écran : parfaites, donc plates. Un grain de papier à 4 %, fondu en multiplié, rend à chaque surface la matière d'un papier de création — on ne le voit pas, on le sent. Une seule couche fixe pour toute la page : le compositeur la peint une fois, le défilement ne coûte rien. */ [data-lbc-lux]::after{ content:""; position:fixed; inset:0; z-index:90; pointer-events:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23g)' opacity='0.55'/%3E%3C/svg%3E"); background-size:140px 140px; opacity:.05; mix-blend-mode:multiply; } /* --- 2. LE FILIGRANE DU SCEAU ------------------------------------- Sur les sections de doctrine — les piliers, les valeurs, le contenu du carnet — le sceau du Cercle est gravé dans le papier, immense et presque invisible, comme le filigrane d'un papier à en-tête. C'est la signature qu'on ne montre pas : on la découvre. */ /* Le ::before des sections claires est déjà pris par le halo d'ambiance (« section:not(.lux-dark)::before », spécificité 0,3,1) : le filigrane passe donc par ::after, qui est libre sur les sections, et les sélecteurs montent d'un cran pour tenir la cascade. */ [data-lbc-lux] section.sceau-filigrane, [data-lbc-lux] section.carnet-quoi{ position:relative; overflow:hidden; } [data-lbc-lux] section.sceau-filigrane::after, [data-lbc-lux] section.carnet-quoi::after{ content:""; position:absolute; z-index:0; pointer-events:none; right:-120px; top:44px; width:720px; height:369px; background:url("assets/seal-green.webp") no-repeat center / contain; opacity:.09; } [data-lbc-lux] section.sceau-filigrane > *, [data-lbc-lux] section.carnet-quoi > *{ position:relative; z-index:1; } /* --- 3. LES NOMBRES FANTÔMES -------------------------------------- Un grand chiffre presque effacé DERRIÈRE le titre, à la manière des revues d'architecture : le nombre structure sans occuper. Appliqué aux piliers du Manifeste et aux quatre formats d'Événements — les listes où l'ordre est un décor, pas une consigne. */ .n-fantome{ position:absolute; z-index:0 !important; font-family:var(--font-display); font-weight:400; font-size:clamp(88px,9vw,128px); line-height:1; color:var(--lbc-gold); opacity:.10; translate:-12px -34px; pointer-events:none; user-select:none; } .sceau-filigrane [class]{ } .sceau-filigrane .grille-plate > div{ position:relative; padding-top:46px; } [data-lbc-home] .h-formats > div{ position:relative; } [data-lbc-home] .h-formats > div em{ position:absolute; top:-10px; left:-4px; z-index:0; font-style:normal; font-family:var(--font-display); font-weight:400; font-size:clamp(74px,7vw,104px); line-height:1; color:var(--lbc-gold); opacity:.13; pointer-events:none; user-select:none; } [data-lbc-home] .h-formats > div h3, [data-lbc-home] .h-formats > div p{ position:relative; z-index:1; } [data-lbc-home] .h-formats > div{ padding-top:40px; } /* les grilles du Manifeste ne font pas l'escalier des colonnes lux */ [data-lbc-lux] .grille-plate > *{ margin-top:0 !important; } /* --- 4. LES VALEURS EN SCEAUX ------------------------------------- Six mots nus faisaient une liste ; six médaillons font une devise. L'initiale est frappée dans un anneau d'or, le mot dessous en petites capitales espacées — la typographie d'une médaille. */ [data-lbc-lux] .six-valeurs{ display:grid !important; grid-template-columns:repeat(6,minmax(0,1fr)); gap:clamp(18px,2.4vw,34px); list-style:none; padding:0; /* l'ancienne règle bornait à 34rem — six médaillons y étouffent */ max-width:54rem !important; } [data-lbc-lux] .six-valeurs li{ display:flex; flex-direction:column; align-items:center; gap:14px; font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--text-heading); text-align:center; background:none !important; border:0 !important; padding:0 !important; } [data-lbc-lux] .six-valeurs li::before{ content:attr(data-i); width:58px; height:58px; border-radius:50%; display:grid; place-items:center; font-family:var(--font-display); font-size:24px; font-weight:400; color:var(--text-gold-on-light,#745D28); border:1px solid color-mix(in srgb, var(--lbc-gold) 55%, transparent); box-shadow:inset 0 0 0 3px var(--lbc-cream, #F0E8D6); background:color-mix(in srgb, var(--lbc-gold) 10%, transparent); transition:background .3s ease, scale .3s var(--ease-quiet); } @media (hover:hover){ [data-lbc-lux] .six-valeurs li:hover::before{ background:color-mix(in srgb, var(--lbc-gold) 24%, transparent); scale:1.06; } } @media (max-width:860px){ [data-lbc-lux] .six-valeurs{ grid-template-columns:repeat(3,minmax(0,1fr)); row-gap:26px; } } @media (max-width:480px){ [data-lbc-lux] .six-valeurs{ grid-template-columns:repeat(2,minmax(0,1fr)); } } /* Les grands titres se coupent en lignes équilibrées, partout. */ [data-lbc-lux] h1, [data-lbc-lux] h2{ text-wrap:balance; } /* ============================================================ LE PIED DE PAGE — RECOMPOSÉ Treize liens empilés dans une colonne laissaient un tiers du bandeau vide : de l'espace perdu qui se lisait comme un oubli. Les liens passent en deux colonnes équilibrées, et le sceau du Cercle est gravé en très grand dans l'angle — le même filigrane que les sections de doctrine : la page se referme sur la signature, comme un courrier. ============================================================ */ .pied{ position:relative; overflow:hidden; } .pied::after{ content:""; position:absolute; right:-160px; bottom:-70px; width:760px; height:389px; pointer-events:none; background:url("assets/seal-gold.webp") no-repeat center / contain; opacity:.05; } .pied > *{ position:relative; z-index:1; } .pied-liens{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px 34px; } .pied-liens a{ color:var(--text-on-dark-soft,#B9C4BE); text-decoration:none; font-size:14.5px; line-height:1.5; padding:3px 0; display:inline-block; border-bottom:1px solid transparent; width:fit-content; transition:color .25s ease, border-color .25s ease; } .pied-liens a:hover{ color:var(--lbc-cream); border-bottom-color:var(--lbc-gold); } @media (max-width:560px){ .pied-liens{ grid-template-columns:1fr; gap:8px; } } /* ============================================================ LA TYPOGRAPHIE D'ARTICLE ============================================================ */ /* La lettrine : trois lignes de haut, Fraunces, l'or sourd du site. Elle dit « ici commence un texte qu'on a soigné » avant le premier mot lu. */ [data-lbc-lux].lux-article .lettrine::first-letter{ font-family:var(--font-display); font-weight:400; font-size:3.2em; line-height:.83; float:left; padding:.06em .14em 0 0; color:var(--text-gold-on-light,#745D28); } /* Le chapeau — la phrase d'attaque sous le titre — passe en italique de caractère : c'est une voix, pas un paragraphe comme les autres. */ [data-lbc-lux].lux-article section:first-of-type h1 + p, [data-lbc-lux].lux-article section:first-of-type p:last-of-type{ font-family:var(--font-display); font-style:italic; font-size:clamp(19px,2vw,23px); line-height:1.55; } /* Les légendes de photos, partout : petites capitales grasses pour le titre, italique de caractère pour le lieu — la convention des catalogues d'exposition. */ [data-lbc-lux] figcaption span, [data-lbc-lux] figcaption i{ font-family:var(--font-display); font-style:italic; letter-spacing:.01em; } /* ============================================================ LA NAVIGATION SAIT OÙ L'ON EST ============================================================ */ [data-lbcnav] a.nav-filet{ position:relative; } /* Le petit filet-ornement du composant (devenu lux-rule-gold avec losange) n'a plus sa place dans la barre : l'indicateur est le filet anime ci-dessous, seul, fondu aux extremites. */ [data-lbcnav] a .lux-rule-gold{ display:none !important; } [data-lbcnav] a.est-ici > span:first-child{ opacity:1 !important; } [data-lbcnav] a.nav-filet::after{ content:""; position:absolute; left:0; right:0; bottom:-6px; height:1px; background:linear-gradient(90deg, transparent 0%, color-mix(in srgb, var(--lbc-gold) 55%, transparent) 22%, var(--lbc-gold) 50%, color-mix(in srgb, var(--lbc-gold) 55%, transparent) 78%, transparent 100%); transform:scaleX(0); transform-origin:center; transition:transform .3s var(--ease-quiet); } [data-lbcnav] a.nav-filet:hover::after, [data-lbcnav] a.nav-filet:focus-visible::after{ transform:scaleX(1); } [data-lbcnav] a.nav-filet.est-ici::after{ transform:scaleX(1); } /* le bouton d'appel garde son habit : pas de filet sous une pilule */ [data-lbcnav] a.lux-cta::after{ content:none !important; } /* 24/09/2026 : les deux boutons qui ouvrent un menu (burger et "Plus", voir SiteNav.dc.html) repondent au doigt : enfoncement en --duree-appui, courbe vive, pas de zoom au double tap, pas de selection. */ [data-lbcnav] [data-burger], [data-lbcnav] [data-plus-btn]{ touch-action:manipulation; -webkit-user-select:none; user-select:none; transition:transform var(--duree-appui) var(--ease-vif); } [data-lbcnav] [data-burger]:active, [data-lbcnav] [data-plus-btn]:active{ transform:scale(.97); } @media (prefers-reduced-motion: reduce){ [data-lbcnav] a.nav-filet::after{ transition:none; } [data-lbcnav] [data-burger]:active, [data-lbcnav] [data-plus-btn]:active{ transform:none; } } /* ============================================================ LE FORMULAIRE EN PAPIER À LETTRES Des boîtes grises arrondies, c'est un formulaire d'assurance. Sur un fond forêt, des champs posés sur un simple filet — qui s'allume en or quand on y écrit — c'est une fiche à remplir au stylo, tendue par la maison. Les styles des champs sont en ligne dans la page : l'important est le prix à payer pour reprendre la main, et il est payé une seule fois, ici. ============================================================ */ [data-lbc-lux] form input:not([type="checkbox"]):not([type="radio"]), [data-lbc-lux] form textarea, [data-lbc-lux] form select{ background:transparent !important; border-width:0 0 1px 0 !important; border-style:solid !important; border-color:var(--border-on-dark,rgba(240,232,214,.28)) !important; border-radius:0 !important; padding-left:2px !important; padding-right:2px !important; transition:border-color .3s ease; } /* Le focus se dit par le filet qui passe à l'or et une lueur posée dessous — pas par l'anneau bleu du navigateur, mais pas par rien non plus : le clavier doit voir où il est. */ [data-lbc-lux] form input:focus, [data-lbc-lux] form input:focus-visible, [data-lbc-lux] form textarea:focus, [data-lbc-lux] form textarea:focus-visible, [data-lbc-lux] form select:focus, [data-lbc-lux] form select:focus-visible{ outline:none !important; border-bottom-color:var(--lbc-gold) !important; box-shadow:0 10px 22px -16px color-mix(in srgb, var(--lbc-gold) 70%, transparent) !important; } [data-lbc-lux] form ::placeholder{ color:color-mix(in srgb, var(--lbc-cream,#F0E8D6) 40%, transparent); } /* ============================================================ DEUX HEROES QUI NE RESSEMBLENT QU'À EUX Tous les premiers écrans intérieurs étaient le même : photo, voile, titre. Deux pages sortent du rang, chacune par ce qu'elle est. ============================================================ */ /* Événements : LE TABLEAU ACCROCHÉ. La photo de la soirée est encadrée comme une toile au mur du couloir — marge de forêt, filet d'or, ombre portée — et le titre déborde du cadre : la soirée est une œuvre, la page l'expose. */ /* (ancien panneau lateral des Temoignages retire — hero plein cadre standard) */ /* ============================================================ LA PLAQUE 3D (plaque-3d.js) L'image plate du sceau reste le socle : le volume vient par- dessus quand tout se prête, et l'image s'efface. Jamais l'inverse. ============================================================ */ .plaque-3d{ position:relative; display:inline-block; width:clamp(180px,20vw,250px); } .plaque-3d picture img{ width:100%; height:auto; } .plaque-3d .plaque-3d__toile{ display:block; } .plaque-3d.est-3d picture{ display:none; } /* La clé du carnet : un écrin discret au-dessus du titre d'accès. Quand elle monte en 3D, le sceau plat se retire — deux emblèmes l'un sur l'autre feraient bazar. */ [data-lbc-home] .cle-3d{ width:clamp(150px,15vw,200px); margin:0 auto; display:none; } [data-lbc-home] .cle-3d.est-3d{ display:block; } [data-lbc-home] .cle-3d.est-3d + picture{ display:none; } /* Les deux familles de valeurs, sur Intégrer : intrinsèques (la maison) et incarnées (les membres), côte à côte, chacune avec ses trois médaillons. */ [data-lbc-lux] .valeurs-double{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(28px,4vw,56px); margin:clamp(26px,3.4vw,40px) auto 0; max-width:54rem; } [data-lbc-lux] .valeurs-double .vd-titre{ font-family:var(--font-display); font-size:16px; font-weight:400; color:var(--text-heading); margin:0 0 4px; } [data-lbc-lux] .valeurs-double .vd-note{ font-size:13px; color:var(--text-muted); margin:0 0 18px; font-style:italic; } [data-lbc-lux] .valeurs-double .six-valeurs{ grid-template-columns:repeat(3,minmax(0,1fr)) !important; max-width:none !important; margin:0 !important; } @media (max-width:700px){ [data-lbc-lux] .valeurs-double{ grid-template-columns:1fr; gap:30px; } } /* La famille unique des valeurs incarnées, sur Intégrer : le titre et sa note au centre, les six médaillons en rang dessous. */ [data-lbc-lux] .valeurs-simple{ margin:clamp(26px,3.4vw,40px) auto 0; max-width:54rem; text-align:center; } [data-lbc-lux] .valeurs-simple .vd-titre{ font-family:var(--font-display); font-size:17px; font-weight:400; color:var(--text-heading); margin:0 0 4px; } [data-lbc-lux] .valeurs-simple .vd-note{ font-size:13px; color:var(--text-muted); margin:0 0 20px; font-style:italic; } /* Le champ de gravure : la ligne de papier à lettres, sous la carte. Il n'apparaît que si la plaque est montée en 3D — graver une image plate serait une promesse sans suite. */ .grave-nom{ display:none; } .plaque-3d.est-3d + .grave-nom{ display:flex; flex-direction:column; gap:6px; align-items:center; margin:10px auto 0; width:min(240px,80%); } .grave-nom span{ font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--lbc-gold); } .grave-nom input{ width:100%; text-align:center; font-family:var(--font-display); font-size:17px; color:var(--lbc-cream); background:transparent; border:0; border-bottom:1px solid var(--border-on-dark,rgba(240,232,214,.28)); padding:6px 2px; transition:border-color .3s ease; } .grave-nom input:focus{ outline:none; border-bottom-color:var(--lbc-gold); } .grave-nom input::placeholder{ color:color-mix(in srgb, var(--lbc-cream) 38%, transparent); font-family:var(--font-body); font-size:13px; } /* Le rendez-vous : la voie douce, à côté de la voie officielle. */ /* La couleur ne doit dependre d'AUCUN script. L'attribut data-lbc-lux est pose par lux.js au chargement ; tant qu'il ne l'est pas, ou s'il ne l'est jamais, la regle generique « a{color:var(--text-heading)} » l'emporte et ce lien passe en vert foret SUR vert foret — verifie au pixel le 14/09/2026, rapport 1,13:1, invisible. Le meme selecteur sans prefixe tient donc la couleur en toutes circonstances. */ .prend-rdv{ color:var(--lbc-cream,#F0E8D6); } [data-lbc-lux] .prend-rdv{ display:inline-block; margin-left:18px; font-size:15px; color:var(--lbc-cream); text-decoration:none; border-bottom:1px solid color-mix(in srgb, var(--lbc-gold) 45%, transparent); padding-bottom:3px; } [data-lbc-lux] .prend-rdv:hover{ border-bottom-color:var(--lbc-gold); color:var(--lbc-gold); } /* ============================================================ LA 404 : UNE PORTE CLOSE Se perdre dans cette maison, c'est tomber sur une porte qui n'ouvre pas. On la dessine — dormant d'or, battant de nuit, poignée qui esquisse un tour et renonce — et le rai de lumière sous le seuil dit qu'il y a bien quelque chose derrière : simplement, ce n'est pas par là. */ .porte-close{ width:150px; margin:0 auto 34px; position:relative; } .porte-close__cadre{ border:1px solid color-mix(in srgb, var(--lbc-gold,#C9A84C) 60%, transparent); padding:7px; border-radius:3px 3px 0 0; } .porte-close__battant{ position:relative; height:220px; border-radius:2px 2px 0 0; background:linear-gradient(160deg, #0d2622, #071a16 70%); border:1px solid rgba(201,168,76,.25); } .porte-close__filet{ position:absolute; inset:16px 14px; border:1px solid rgba(201,168,76,.35); border-radius:2px; } .porte-close__poignee{ position:absolute; right:18px; top:112px; width:9px; height:9px; border-radius:50%; background:var(--lbc-gold,#C9A84C); box-shadow:0 0 0 3px rgba(201,168,76,.18); transform-origin:center; animation:poignee-renonce 3.4s ease-in-out infinite; } @keyframes poignee-renonce{ 0%, 62%, 100%{ translate:0 0; } 68%{ translate:0 2.5px; } /* elle s'abaisse… */ 74%{ translate:0 0; } /* …et renonce */ } .porte-close__seuil{ display:block; height:3px; margin:0 6px; background:linear-gradient(90deg, transparent, rgba(255,214,150,.75), transparent); filter:blur(1.5px); animation:seuil-respire 3.4s ease-in-out infinite; } @keyframes seuil-respire{ 0%,100%{ opacity:.55; } 66%{ opacity:1; } } @media (prefers-reduced-motion: reduce){ .porte-close__poignee, .porte-close__seuil{ animation:none; } } /* Le comparateur de formules, par le regard : survoler une formule éteint doucement les deux autres — on lit CELLE-LÀ, entière, sans tableau. */ @media (hover:hover) and (pointer:fine){ [data-lbc-home] .h-plan{ transition-property:transform, box-shadow, opacity, filter; } [data-lbc-home] :has(> .h-plan:hover) > .h-plan:not(:hover){ opacity:.5; filter:saturate(.75); } } /* ============================================================ LE REGISTRE DES RÉUNIONS — page Événements Les lieux en colonne de registre (filets, petites capitales), les archives en cartes photo légendées par leur événement réel. Les photos viennent des archives Skool du club. */ [data-lbc-home] .reunions__lieux{ list-style:none; margin:clamp(34px,4vw,54px) 0 0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0 clamp(24px,3.4vw,54px); } [data-lbc-home] .reunions__lieux li{ padding:13px 2px; border-bottom:1px solid var(--hairline-soft); font-size:15px; letter-spacing:.02em; color:var(--text-heading); } @media (max-width:860px){ [data-lbc-home] .reunions__lieux{ grid-template-columns:repeat(2,minmax(0,1fr)); } } @media (max-width:540px){ [data-lbc-home] .reunions__lieux{ grid-template-columns:1fr; } } [data-lbc-home] .reunions__archives{ margin-top:clamp(40px,5vw,70px); display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(18px,2.4vw,32px); } [data-lbc-home] .reunion{ margin:0; } [data-lbc-home] .reunion img{ width:100%; aspect-ratio:4/5; object-fit:cover; display:block; border-radius:var(--radius-md,10px); border:1px solid var(--hairline-soft); } [data-lbc-home] .reunion figcaption{ padding:12px 2px 0; } [data-lbc-home] .reunion figcaption b{ display:block; font-family:var(--font-display); font-weight:400; font-size:16.5px; color:var(--text-heading); line-height:1.3; } [data-lbc-home] .reunion figcaption span{ display:block; margin-top:3px; font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--text-gold-on-light,#745D28); } @media (max-width:860px){ [data-lbc-home] .reunions__archives{ grid-template-columns:repeat(2,minmax(0,1fr)); } } @media (max-width:540px){ [data-lbc-home] .reunions__archives{ grid-template-columns:1fr; } } /* Les réunions sans photos : une carte de nuit — fond forêt, sceau en filigrane — au même format que les cartes photographiées. L'archive existe, elle est simplement privée : la carte le dit sans s'excuser. */ [data-lbc-home] .reunion--voile .reunion__fond{ aspect-ratio:4/5; border-radius:var(--radius-md,10px); border:1px solid var(--hairline-soft); background: url("assets/seal-gold.webp") no-repeat center 42% / 62% auto, radial-gradient(120% 90% at 50% 20%, #0E2C26 0%, #071C18 70%, #04120F 100%); background-blend-mode:luminosity, normal; position:relative; overflow:hidden; } [data-lbc-home] .reunion--voile .reunion__fond::after{ content:""; position:absolute; inset:0; background:rgba(6,28,24,.55); } /* ============ Dossiers d'événements (clic sur une carte réunion) ============ */ .reunions__archives .reunion[data-dossier-pret]{ cursor:pointer; position:relative; } .reunions__archives .reunion[data-dossier-pret]::after{ content:'+ Photos'; position:absolute; top:10px; right:10px; font-family:var(--font-body,Inter,sans-serif); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:#F3ECD9; background:rgba(6,51,46,.72); border:1px solid rgba(216,180,90,.55); padding:5px 10px; border-radius:99px; opacity:0; transform:translateY(-4px); transition:opacity .25s ease, transform .25s ease; pointer-events:none; backdrop-filter:blur(3px); } .reunions__archives .reunion[data-dossier-pret]:hover::after, .reunions__archives .reunion[data-dossier-pret]:focus-visible::after{ opacity:1; transform:none; } .reunions__archives .reunion[data-dossier-pret]:focus-visible{ outline:2px solid #D8B45A; outline-offset:4px; } .dossier{ position:fixed; inset:0; z-index:1200; display:flex; align-items:center; justify-content:center; padding:clamp(10px,3vw,40px); } .dossier__voile{ position:absolute; inset:0; background:rgba(4,34,30,.62); backdrop-filter:blur(6px); opacity:0; transition:opacity .22s ease; } .dossier__panneau{ position:relative; width:min(1080px,100%); max-height:92vh; overflow:auto; -webkit-overflow-scrolling:touch; background:var(--lbc-cream,#F0E9DB); border:1px solid rgba(216,180,90,.5); border-radius:14px; box-shadow:0 40px 90px rgba(0,0,0,.45); padding:clamp(22px,4vw,48px); opacity:0; transform:translateY(14px) scale(.985); transition:opacity .24s ease, transform .24s ease; } .dossier.is-la .dossier__voile{ opacity:1; } .dossier.is-la .dossier__panneau{ opacity:1; transform:none; } .dossier__fermer{ position:sticky; top:0; float:right; margin:-6px -6px 0 0; z-index:2; width:40px; height:40px; border-radius:50%; border:1px solid rgba(6,51,46,.25); background:rgba(240,233,219,.9); color:#06332E; font-size:24px; line-height:1; cursor:pointer; transition:background .2s ease, transform .2s ease, scale var(--duree-appui) var(--ease-vif); /* 24/09/2026 : retour au toucher. L'appui passe par la propriete scale, qui se compose avec la rotation du survol au lieu de la defaire. */ touch-action:manipulation; -webkit-user-select:none; user-select:none; } .dossier__fermer:hover{ background:#06332E; color:#F3ECD9; } /* 24/09/2026 : la rotation ne colle plus au doigt apres un tap. */ @media (hover:hover) and (pointer:fine){ .dossier__fermer:hover{ transform:rotate(90deg); } } .dossier__fermer:active{ scale:.97; } .dossier__tete{ max-width:60ch; } .dossier__sous{ font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:#8a7a4e; margin:0 0 8px; } .dossier__titre{ font-family:var(--font-display,Fraunces,serif); font-size:clamp(26px,3.6vw,44px); line-height:1.05; letter-spacing:-.02em; color:var(--text-heading,#06332E); margin:0 0 12px; font-weight:400; } .dossier__texte{ color:rgba(6,51,46,.78); line-height:1.65; margin:0 0 26px; } .dossier__photos{ columns:3 260px; column-gap:12px; } .dossier__photos img{ width:100%; display:block; border-radius:9px; margin:0 0 12px; break-inside:avoid; background:rgba(6,51,46,.06); } body.dossier-ouvert{ overflow:hidden; } @media (prefers-reduced-motion: reduce){ .dossier__voile,.dossier__panneau,.reunions__archives .reunion[data-dossier-pret]::after,.dossier__fermer{ transition:none; } /* 24/09/2026 : l'enfoncement du bouton de fermeture est un mouvement, on le retire. */ .dossier__fermer:active{ scale:none; } } /* Hero Événements plein cadre : le voile standard mangeait la photo (le Sénat est déjà sombre). On l'allège pour que la soirée se voie. */ [data-screen-label="Événements"] .h-hero__veil, [data-screen-label="Events"] .h-hero__veil{ background:linear-gradient(rgba(4,31,28,.52) 0%, rgba(4,31,28,.18) 38%, rgba(4,31,28,.8) 100%); } /* ============================================================ FONDATEURS EN MÉDAILLONS — retour aux portraits ronds de la première version : anneau d'or façon story, et la parole du fondateur qui apparaît sur le portrait au survol. ============================================================ */ [data-lbc-home] .h-person{ position:relative; text-align:center; } [data-lbc-home] .h-person__ph{ width:min(78%,230px); aspect-ratio:1/1; margin:0 auto; border-radius:50%; border:none; overflow:visible; padding:5px; background:conic-gradient(from 210deg,#C9A84C,#6E5720 32%,#EFD9A0 55%,#8A6E2A 78%,#C9A84C); box-shadow:0 18px 40px -18px rgba(0,0,0,.6); } [data-lbc-home] .h-person__ph picture{ display:block; width:100%; height:100%; border-radius:50%; overflow:hidden; border:5px solid var(--lbc-forest-900,#06332E); box-sizing:border-box; } [data-lbc-home] .h-person__ph::after{ border-radius:50%; } [data-lbc-home] .h-person__ph img[data-flag]{ left:50%; bottom:2%; transform:translateX(-50%); border-radius:3px; } [data-lbc-home] .h-person--soon .h-person__ph{ display:flex; align-items:center; justify-content:center; background:none; border:1px dashed var(--border-on-dark,rgba(240,232,214,.25)); } /* La parole, posée sur le médaillon : voile de forêt, lettres d'or. */ [data-lbc-home] .h-person p.h-person__say{ position:absolute; top:0; left:50%; transform:translateX(-50%) scale(.97); width:min(78%,230px); aspect-ratio:1/1; border-radius:50%; display:flex; align-items:center; justify-content:center; margin:0; padding:16%; border-left:0; box-sizing:border-box; background:radial-gradient(circle at 50% 38%, rgba(8,46,40,.9), rgba(4,26,22,.94)); font-size:clamp(13px,1.05vw,15.5px); line-height:1.45; text-align:center; opacity:0; transition:opacity .32s ease, transform .32s ease; pointer-events:none; } [data-lbc-home] .h-person:hover p.h-person__say, [data-lbc-home] .h-person:focus-within p.h-person__say{ opacity:1; transform:translateX(-50%) scale(1); } /* Écrans tactiles : pas de survol — la parole reprend sa place sous le texte. */ @media (hover:none){ [data-lbc-home] .h-person p.h-person__say{ position:static; transform:none; width:auto; aspect-ratio:auto; border-radius:0; display:block; padding:0; margin:15px 0 0; background:none; opacity:1; font-style:italic; color:var(--lbc-gold); } } @media (prefers-reduced-motion: reduce){ [data-lbc-home] .h-person p.h-person__say{ transition:none; } } /* ============ Témoignages en mots (récolte Skool) ============ */ .mots-grille{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:clamp(22px,3vw,40px); margin-top:clamp(44px,5vw,70px); } .mots-grille .mot{ margin:0; padding:26px 0 0; border-top:1px solid var(--border-on-dark,rgba(240,232,214,.18)); } .mots-grille .mot blockquote{ margin:0; font-family:var(--font-display); font-style:italic; font-size:clamp(19px,1.6vw,24px); line-height:1.4; letter-spacing:-.01em; color:var(--lbc-cream,#F0E8D6); } .mots-grille .mot figcaption{ margin-top:16px; } .mots-grille .mot figcaption b{ display:block; font-size:15px; color:var(--lbc-cream,#F0E8D6); font-weight:600; } .mots-grille .mot figcaption span{ font-size:11px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--lbc-gold,#C9A84C); } /* LA PLACE SUIVANTE. La grille porte cinq voix recueillies et une carte ouverte, celle du lecteur. Elle se distingue par son filet, passe au doré, et par le seul lien de la grille : le reste du bloc se lit, ce dernier se clique. */ .mots-grille .mot--libre{ border-top-color:rgba(201,168,76,.55); } .mots-grille .mot--libre blockquote{ color:color-mix(in srgb, var(--lbc-cream,#F0E8D6) 82%, transparent); } .mots-grille .mot--libre a{ display:inline-flex; align-items:center; gap:.45em; margin-top:18px; font-family:var(--font-body); font-size:13.5px; font-weight:600; letter-spacing:.04em; color:var(--lbc-gold,#C9A84C); text-decoration:none; border-bottom:1px solid rgba(201,168,76,.42); padding-bottom:3px; transition:border-color .25s ease; } .mots-grille .mot--libre a:hover, .mots-grille .mot--libre a:focus-visible{ border-bottom-color:var(--lbc-gold,#C9A84C); } /* Clips vidéo dans les dossiers d'événements (Loom publics) */ .dossier__photos .dossier__clip{ break-inside:avoid; margin:0 0 12px; border-radius:9px; overflow:hidden; aspect-ratio:4/3; background:#04201b; } .dossier__photos .dossier__clip iframe{ width:100%; height:100%; border:0; display:block; } /* La barre collante porte le même laiton d'orfèvre que le héros. */ .lbc-sticky-cta__btn{ background:linear-gradient(180deg,#F4E2A4 0%,#DDBB58 36%,#B8963F 68%,#E6C97F 100%) !important; color:#0B2721 !important; border:1px solid rgba(122,94,34,.95) !important; text-shadow:0 1px 0 rgba(255,246,214,.5); box-shadow: inset 0 1px 0 rgba(255,248,222,.9), inset 0 -2px 6px rgba(88,60,12,.4), 0 0 0 1px rgba(201,168,76,.28), 0 10px 24px -12px rgba(0,0,0,.6) !important; } /* Le film d'ambiance de l'antichambre, même traitement que sa photo. */ .adm-hero__media .h-hero__film{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; filter:saturate(.8) contrast(1.04) brightness(.9); } @media (prefers-reduced-motion: reduce){ .adm-hero__media .h-hero__film{ display:none; } } /* La Galerie des fondateurs : le mur aux cadres dorés porte la section des fondateurs de territoire, sous un voile qui garde la lisibilité. */ [data-lbc-home] .galerie-fond{ background: linear-gradient(180deg, rgba(4,18,15,.86) 0%, rgba(4,18,15,.72) 45%, rgba(4,18,15,.9) 100%), url("assets/photos/piece-galerie.jpg") center 32% / cover no-repeat !important; } /* ============================================================ LA GALERIE — les fondateurs de territoire dans les cadres dorés. Vraies photos composées au pixel près dans un cadre extrait de la pièce (assets/embleme/cadre-*.png). Même grammaire de survol que les médaillons : la parole se pose sur le portrait, le tableau se soulève sous sa lampe. ============================================================ */ [data-lbc-home] .galerie-fond .h-person__ph{ width:min(84%,250px); aspect-ratio:436/520; border-radius:0; padding:0; background:none; box-shadow:0 30px 54px -22px rgba(0,0,0,.78); transition:transform .45s var(--ease-quiet), box-shadow .45s ease; } [data-lbc-home] .galerie-fond .h-person__ph picture{ border:none; border-radius:0; overflow:visible; } [data-lbc-home] .galerie-fond .h-person__ph img{ width:100%; height:auto; display:block; } [data-lbc-home] .galerie-fond .h-person:hover .h-person__ph{ transform:translateY(-6px); box-shadow:0 38px 64px -24px rgba(0,0,0,.85), 0 0 44px -14px rgba(201,168,76,.35); } [data-lbc-home] .galerie-fond .h-person__ph::after{ border-radius:0; inset:11% 13% 13%; } [data-lbc-home] .galerie-fond .h-person__ph img[data-flag]{ left:50%; bottom:7%; transform:translateX(-50%); width:26px; height:auto; } [data-lbc-home] .galerie-fond .h-person p.h-person__say{ width:min(84%,250px); aspect-ratio:436/520; border-radius:4px; padding:16% 13%; background:linear-gradient(180deg, rgba(7,30,25,.93), rgba(4,18,15,.96)); } [data-lbc-home] .galerie-fond .h-person--soon .h-person__ph{ border:none; background:none; display:block; position:relative; } [data-lbc-home] .galerie-fond .h-person--soon .h-person__ph span{ position:absolute; inset:11% 13% 13%; display:flex; align-items:center; justify-content:center; letter-spacing:.22em; color:var(--lbc-gold); text-transform:uppercase; font-size:13px; } /* La carte du Cercle, en macro, sur la page de remerciement. */ .merci-carte{ position:relative; background:var(--lbc-forest-900,#04120F); padding:0 !important; } .merci-carte video{ display:block; width:100%; height:min(62vh,560px); object-fit:cover; } .merci-carte p{ position:absolute; left:0; right:0; bottom:22px; margin:0; text-align:center; color:rgba(240,232,214,.85); font-style:italic; font-size:15px; letter-spacing:.04em; text-shadow:0 1px 10px rgba(0,0,0,.7); } @media (prefers-reduced-motion: reduce){ .merci-carte video{ display:none; } .merci-carte{ background:url("assets/photos/piece-carte.jpg") center/cover no-repeat; min-height:300px; } } /* Mention d'honnêteté : les pièces de la maison sont des ambiances illustrées, pas des lieux physiques. Discret, mais toujours là. */ .ambiance-note{ position:absolute; right:18px; bottom:13px; z-index:3; font:600 9.5px/1 Inter,system-ui,sans-serif; letter-spacing:.18em; text-transform:uppercase; color:rgba(240,232,214,.42); pointer-events:none; } /* 24/09/2026 : fixe au bord bas, elle passait sous l'indicateur d'accueil (viewport-fit=cover). */ .ambiance-note--fixe{ position:fixed; left:18px; bottom:calc(13px + env(safe-area-inset-bottom,0px)); right:auto; z-index:41; } /* ============================================================ LE CABINET DE LECTURE — les onze couvertures accrochées comme des estampes sur le mur de la pièce. Double filet d'or en guise de cadre, marie-louise forêt, et l'ombre du tirage sur le mur. ============================================================ */ [data-lbc-home] .cabinet-fond{ background: linear-gradient(180deg, rgba(4,18,15,.88) 0%, rgba(4,18,15,.78) 45%, rgba(4,18,15,.92) 100%), url("assets/photos/piece-cabinet.jpg") center 30% / cover no-repeat !important; } [data-lbc-home] .cabinet-fond .h-post__media{ padding:7px; background:linear-gradient(150deg,#8A6D2B 0%,#E6C97F 30%,#B8963F 55%,#EFD9A0 80%,#8A6D2B 100%); box-shadow: inset 0 0 0 1px rgba(60,44,12,.9), 0 24px 44px -18px rgba(0,0,0,.75); } [data-lbc-home] .cabinet-fond .h-post__media img{ display:block; border:1px solid rgba(60,44,12,.85); /* Les couvertures sont des compositions 16:9 : on les montre entieres, quelle que soit la regle fantome qui les etirait. */ aspect-ratio:16/9 !important; height:auto !important; width:100% !important; object-fit:cover; } /* Les styles en ligne du gabarit clair gardent l'encre : on reprend la main — l'important d'auteur passe devant le style en ligne. */ [data-lbc-home] .cabinet-fond h2, [data-lbc-home] .cabinet-fond h3{ color:var(--lbc-cream) !important; } [data-lbc-home] .cabinet-fond p{ color:rgba(240,232,214,.78) !important; } [data-lbc-home] .cabinet-fond .h-eyebrow, [data-lbc-home] .cabinet-fond .h-read, [data-lbc-home] .cabinet-fond .h-post__meta em{ color:var(--lbc-gold) !important; } [data-lbc-home] .cabinet-fond .h-post__meta span{ color:rgba(240,232,214,.6) !important; } [data-lbc-home] .cabinet-fond .h-cats a, [data-lbc-home] .cabinet-fond [data-cat-btn]{ color:var(--lbc-cream) !important; } [data-lbc-home] .cabinet-fond .h-post:hover .h-post__media{ box-shadow: inset 0 0 0 1px rgba(60,44,12,.9), 0 30px 54px -20px rgba(0,0,0,.85), 0 0 40px -12px rgba(201,168,76,.4); } /* Le nom du candidat, grave sur le film de la carte. */ .merci-carte__grave{ position:absolute; left:0; right:0; bottom:clamp(90px,18%,170px); z-index:2; text-align:center; pointer-events:none; } .merci-carte__grave em{ display:block; font-style:normal; font-size:11px; letter-spacing:.28em; text-transform:uppercase; color:rgba(240,232,214,.55); margin-bottom:10px; } .merci-carte__grave strong{ display:inline-block; font-family:var(--font-display); font-weight:400; font-size:clamp(30px,4.4vw,58px); line-height:1.05; letter-spacing:.01em; color:#E9CD86; text-shadow: 0 -1px 0 rgba(60,44,12,.85), 0 1px 0 rgba(255,244,210,.35), 0 8px 30px rgba(0,0,0,.65); } /* La bande de la carte est un plein cadre : le rembourrage rituel des sections sombres (lux) ne la concerne pas. Spécificité (0,3,1). */ [data-lbc-lux] section.merci-carte.lux-dark, [data-lbc-lux] section.merci-carte{ padding:0 !important; } /* La phrase de cadrage : pas de prix publié, et c'est assumé. */ .cadrage-adhesion{ max-width:56ch; margin:clamp(22px,3vw,34px) auto 0; text-align:center; font-size:14px; line-height:1.6; font-style:italic; color:var(--text-muted,rgba(20,40,34,.62)); } [data-lbc-lux] .lux-dark .cadrage-adhesion, .h-dark .cadrage-adhesion, .h-deep .cadrage-adhesion{ color:rgba(240,232,214,.62); } /* ============================================================ QUI PEUT CANDIDATER — les quatre conditions, dans la grammaire des étapes du site : numéro d'or, titre, phrase. ============================================================ */ section.h-criteres{ background:#0E2A22; color:#F0E8D6; padding:clamp(72px,9vw,140px) clamp(20px,5vw,72px); } section.h-criteres .h-wrap{ max-width:1140px; margin:0 auto; width:100%; } section.h-criteres .h-eyebrow{ font-size:12px; letter-spacing:.3em; text-transform:uppercase; color:#C9A45C; margin:0; } section.h-criteres h2{ color:#F0E8D6; } section.h-criteres .h-lead{ font-size:clamp(16px,1.4vw,19px); line-height:1.6; color:rgba(240,232,214,.78); margin:22px 0 0; } .criteres-grille{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(28px,3.4vw,52px) clamp(32px,5vw,80px); margin-top:clamp(36px,4vw,60px); max-width:960px; } @media (max-width:680px){ .criteres-grille{ grid-template-columns:1fr; } } .criteres-grille em{ display:block; font-style:normal; color:#C9A45C; font-size:13px; letter-spacing:.22em; margin-bottom:10px; } .criteres-grille h3{ font-family:var(--font-display); font-weight:400; color:#F0E8D6; font-size:clamp(18px,1.6vw,22px); line-height:1.25; margin:0 0 8px; } .criteres-grille p{ font-size:15px; line-height:1.62; color:rgba(240,232,214,.72); margin:0; } .criteres-note{ margin:clamp(28px,3.5vw,44px) 0 0; font-style:italic; font-size:14px; color:rgba(240,232,214,.6); } [data-lbc-lux] section.h-criteres{ padding:clamp(72px,9vw,140px) clamp(20px,5vw,72px) !important; } /* ============================================================ DEVENIR PARTENAIRE — socle commun des trois partenariats (Sponsor / Expert / Ambassadeur), tire du systeme partenaires. ============================================================ */ .partenaire-socle{ margin:clamp(36px,4vw,56px) auto 0; max-width:72ch; text-align:center; padding-top:clamp(26px,3vw,40px); border-top:1px solid rgba(6,51,46,.14); } .partenaire-socle>p:nth-of-type(2){ font-size:15.5px; line-height:1.68; color:var(--text-body); margin:10px 0 0; } .partenaire-parcours{ display:flex; justify-content:center; align-items:center; gap:14px; margin:22px 0 0; font-size:12.5px; letter-spacing:.2em; text-transform:uppercase; color:#755a24; flex-wrap:wrap; } .partenaire-parcours i{ width:34px; height:1px; background:currentColor; opacity:.45; } /* Le bandeau photo des cartes partenaire : cadre explicite, l'image est composee pour ce format paysage — pas de recadrage sauvage. */ [data-lbc-home] .h-pcard picture img{ width:100%; height:clamp(220px,22vw,300px); object-fit:cover; display:block; } [data-lbc-home] .h-pcard picture img{ object-position:50% 68%; } /* ============================================================ LA BANDEROLE — les faits de la maison qui defilent, lentement, entre le globe et les niveaux. Boucle sans couture : la piste contient deux fois la serie et glisse de -50%. ============================================================ */ .bandeau-defile{ overflow:hidden; position:relative; z-index:2; /* au-dessus du film .stage (fixed, z-index:0) */ border-top:1px solid rgba(201,164,92,.32); border-bottom:1px solid rgba(201,164,92,.32); background:rgba(6,30,25,.78); padding:15px 0; } .bandeau-defile__piste{ display:flex; width:max-content; animation:bandeauDefile 52s linear infinite; } .bandeau-defile:hover .bandeau-defile__piste{ animation-play-state:paused; } .bandeau-defile span{ white-space:nowrap; padding:0 30px; position:relative; font-family:var(--font-body); font-size:12px; font-weight:600; letter-spacing:.22em; text-transform:uppercase; color:#D2B978; } .bandeau-defile span::after{ content:"\2726"; position:absolute; right:-7px; top:50%; transform:translateY(-50%); font-size:9px; color:rgba(201,164,92,.55); } @keyframes bandeauDefile{ to{ transform:translateX(-50%); } } @media (prefers-reduced-motion: reduce){ .bandeau-defile__piste{ animation:none; } } /* Accessibilite : anneau de focus clavier partout — les pages lux ont deja le leur, celle-ci couvre home et la 3D sans doublonner le style. */ :focus-visible{ outline:2px solid var(--lbc-gold,#C9A84C); outline-offset:3px; } /* ============================================================ LA PLAQUETTE — carte de telechargement du document 2026, posee au pied de la section "Avant de nous ecrire". ============================================================ */ .plaquette-carte{ display:flex; align-items:center; justify-content:space-between; gap:clamp(20px,4vw,56px); flex-wrap:wrap; margin-top:clamp(30px,3.5vw,48px); padding:clamp(24px,2.8vw,38px); border:1px solid rgba(178,141,66,.38); border-radius:var(--radius-lg,14px); background:linear-gradient(135deg, rgba(6,51,46,.045), rgba(178,141,66,.07)); } .plaquette-carte__sur{ font-size:11px; font-weight:600; letter-spacing:.24em; text-transform:uppercase; color:#8a6d2f; margin:0 0 8px; } .plaquette-carte h3{ font-family:var(--font-display); font-size:clamp(20px,2vw,26px); color:var(--text-heading); font-weight:400; margin:0 0 8px; } .plaquette-carte__texte{ font-size:15px; line-height:1.6; color:var(--text-muted); margin:0; max-width:52ch; } .plaquette-carte__cta{ flex:none; display:inline-flex; flex-direction:column; align-items:center; gap:3px; background:var(--accent,#06332E); color:var(--accent-text,#F2EBDC); font-weight:600; font-size:16px; padding:16px 30px; border-radius:var(--radius-pill,999px); text-decoration:none; } .plaquette-carte__cta span{ font-size:11px; font-weight:400; opacity:.75; letter-spacing:.08em; } .plaquette-carte__vignette{ flex:none; } .plaquette-carte__vignette img{ display:block; width:clamp(96px,9vw,132px); height:auto; border:1px solid rgba(178,141,66,.45); border-radius:6px; transform:rotate(-2.2deg); box-shadow:0 14px 30px rgba(6,32,26,.28), 0 3px 8px rgba(6,32,26,.18); } @media (max-width:560px){ .plaquette-carte__vignette{ display:none; } } .plaquette-carte > div{ flex:1 1 280px; min-width:240px; } @media (min-width:701px){ .plaquette-carte{ flex-wrap:nowrap; } } /* ============================================================ LA BANDE DE PREUVE — un temoignage et la porte vers tous, posee sur Opportunites avant le bandeau photographique. ============================================================ */ .preuve-bande{ background:var(--surface-page,#F4EFE2); text-align:center; padding:clamp(56px,7vw,96px) clamp(20px,5vw,72px); } .preuve-bande blockquote{ font-family:var(--font-display); font-size:clamp(22px,2.6vw,34px); line-height:1.3; color:var(--text-heading); font-weight:400; margin:0 auto; max-width:34ch; } .preuve-bande__qui{ font-size:13px; letter-spacing:.18em; text-transform:uppercase; color:var(--text-muted); margin:18px 0 0; } .preuve-bande a{ display:inline-block; margin-top:22px; color:var(--lbc-gold,#B28D42); text-decoration:none; border-bottom:1px solid currentColor; padding-bottom:2px; font-weight:600; font-size:16px; } /* ============================================================ LEVIERS DE PERSUASION — Opportunites & Integrer. Le FOMO vient du privilege reel (statut Fondateur), jamais d'un compte a rebours. Charte : on inspire, on ne crie pas. ============================================================ */ .fomo-fondateur{ margin:clamp(30px,3.5vw,44px) auto 0; max-width:64ch; text-align:center; font-size:16px; line-height:1.65; color:var(--text-body); padding:18px 26px; border:1px solid rgba(178,141,66,.4); border-radius:var(--radius-lg,14px); background:linear-gradient(135deg, rgba(178,141,66,.08), rgba(6,51,46,.04)); } .fomo-fondateur b{ color:var(--text-heading); } .grat-immediate{ margin:14px auto 0; max-width:58ch; text-align:center; font-size:15px; line-height:1.6; color:var(--text-muted); } .aspiration-ligne{ font-family:var(--font-display); font-style:italic; font-size:clamp(18px,1.8vw,23px); color:rgba(240,232,214,.85); margin:18px auto 0; max-width:44ch; text-align:center; } .confiance-ligne{ display:flex; justify-content:center; align-items:center; gap:12px; flex-wrap:wrap; margin:16px 0 0; font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:rgba(240,232,214,.65); text-align:center; } .confiance-ligne i{ width:4px; height:4px; border-radius:50%; background:rgba(210,185,120,.6); } /* ============================================================ VALEURS INCARNEES EN TUILES — six fragments photographiques, le mot en lettres creme sur voile vert. Integrer. ============================================================ */ .six-valeurs--tuiles{ width:min(100%,600px) !important; justify-items:stretch !important; display:grid !important; grid-template-columns:repeat(3,1fr) !important; gap:clamp(10px,1.2vw,16px) !important; max-width:1040px !important; margin:26px auto 0 !important; padding:0 !important; list-style:none; } .six-valeurs--tuiles li{ width:100%; position:relative; overflow:hidden; border-radius:10px; border:1px solid rgba(178,141,66,.35) !important; padding:0 !important; background:none !important; aspect-ratio:1; font-size:0; } .six-valeurs--tuiles li::before{ display:none !important; content:none !important; } .six-valeurs--tuiles picture, .six-valeurs--tuiles img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s var(--ease-quiet); } .six-valeurs--tuiles li:hover img{ transform:scale(1.06); } .six-valeurs--tuiles li::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(4,26,22,0) 40%, rgba(4,26,22,.72) 100%); } .six-valeurs--tuiles span{ position:absolute; left:0; right:0; bottom:10px; z-index:1; text-align:center; font-size:12px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:#F0E8D6; text-shadow:0 1px 8px rgba(0,0,0,.5); } @media (max-width:520px){ .six-valeurs--tuiles{ grid-template-columns:repeat(2,1fr) !important; } } /* ============================================================ VALEURS INCARNEES — MANIFESTE : les six fragments en cartes, image, mot, et la phrase qui l'incarne. ============================================================ */ .valeurs-cartes{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(24px,3vw,40px) clamp(20px,2.6vw,36px); } .valeur-carte{ margin:0; } .valeur-carte picture{ display:block; position:relative; aspect-ratio:4/3 !important; overflow:hidden; border-radius:10px; border:1px solid rgba(178,141,66,.35); } .valeur-carte picture img{ position:absolute !important; inset:0; width:100% !important; height:100% !important; object-fit:cover; display:block; } .valeur-carte figcaption b{ display:block; font-family:var(--font-display); font-weight:400; font-size:19px; color:var(--text-heading); margin:14px 0 6px; } .valeur-carte figcaption span{ font-size:14px; line-height:1.6; color:var(--text-muted); } @media (max-width:720px){ .valeurs-cartes{ grid-template-columns:repeat(2,1fr); } } /* Les cartes de valeurs s'alignent en grille : la revelation lux decalait chaque colonne de 24px de maniere residuelle. On la coupe. */ .valeur-carte.lux-r, .valeur-carte.lux-armed{ transform:none !important; opacity:1 !important; transition:none !important; } .valeurs-cartes > .valeur-carte{ margin-top:0 !important; } /* ============================================================ EMBLEMES DE VALEURS — pictogrammes graves au trait or, poses nus sur le fond clair, etiquette doree dessous (Integrer), et en tete des cartes du Manifeste. ============================================================ */ .six-valeurs--tuiles{ grid-template-columns:repeat(6,minmax(0,1fr)) !important; width:100% !important; max-width:54rem !important; gap:clamp(18px,2.4vw,34px) !important; } .six-valeurs--tuiles li{ aspect-ratio:auto !important; overflow:visible !important; display:flex !important; flex-direction:column; align-items:center; gap:12px; border:0 !important; border-radius:0 !important; font-size:12px !important; } .six-valeurs--tuiles li::before, .six-valeurs--tuiles li::after{ display:none !important; content:none !important; } .six-valeurs--tuiles img.valeur-embleme{ position:static !important; width:76px !important; height:76px !important; transition:transform .45s var(--ease-quiet); } .six-valeurs--tuiles li:hover img.valeur-embleme{ transform:scale(1.08); } .six-valeurs--tuiles li span{ position:static !important; left:auto; right:auto; bottom:auto; color:var(--text-gold-on-light,#745D28) !important; text-shadow:none !important; font-size:12px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; } @media (max-width:720px){ .six-valeurs--tuiles{ grid-template-columns:repeat(3,1fr) !important; } } .valeur-carte picture{ display:none !important; } .valeur-carte img.valeur-embleme{ width:84px; height:84px; display:block; margin:0 0 4px; } /* ============================================================ LES SIX EMBLEMES SUR L'ACCUEIL — dans la plaque Esprit du Cercle, une rangee muette qui mene au Manifeste. ============================================================ */ .esprit-emblemes{ display:grid; grid-template-columns:repeat(3,minmax(0,max-content)); gap:18px clamp(22px,2.6vw,40px); list-style:none; margin:26px 0 22px; padding:0; } .esprit-emblemes li{ display:flex; flex-direction:column; align-items:center; gap:7px; } .esprit-emblemes img{ display:block; width:44px; height:44px; opacity:.92; } .esprit-emblemes span{ font-size:9.5px; font-weight:600; letter-spacing:.11em; text-transform:uppercase; color:rgba(210,185,120,.8); } /* ============================================================ BRAND BOOK — devise, lockups de sous-marques, mondes colores. ============================================================ */ /* La devise, sous "Sept emblemes, une ascension" */ .devise-aquilam{ font-size:12px; font-weight:600; letter-spacing:.34em; text-transform:uppercase; color:rgba(210,185,120,.85); margin:10px 0 0; } /* Sceau Oracle en ligne (formule Gold) */ .sceau-ligne{ display:inline-block; vertical-align:-5px; margin-right:8px; width:22px; height:22px; border-radius:50%; } /* Medaillon conciergerie : en vis-a-vis du titre, masque sous 900px */ [data-lbc-home] .carnet-conc .carnet-in{ position:relative; } .medaillon-conc{ position:absolute; top:0; right:0; width:128px; height:160px; border-radius:50%; box-shadow:0 10px 26px rgba(0,0,0,.35); } @media (max-width:900px){ .medaillon-conc{ display:none; } } /* Ex-libris du Carnet, au seuil de l'acces membre */ .exlibris-carnet{ display:block; width:210px; height:auto; margin:0 auto 26px; border-radius:6px; box-shadow:0 12px 30px rgba(0,0,0,.4); } /* Mondes colores (Brand Book XI) — la couleur encadre son sujet */ [data-lbc-home] .carnet-conc{ background:#1A1106; } /* Conciergerie : brun dore */ [data-lbc-home] .carnet-acces{ background:#14240F; } /* Le Carnet : vert mousse */ html.is-3d [data-stage3d] .act--oracle .act__in{ /* Oracle : encre bleue */ background:linear-gradient(180deg, rgba(13,22,33,.82) 0%, rgba(8,14,21,.88) 100%) !important; border-top:2px solid rgba(201,168,76,.45); } [data-monde="collaborations"] .h-dark{ background:#2D1913; } /* Collaborations : terre cuite */ [data-monde="collaborations"] .h-quote{ background:#241610; color:#F2EDE3; } .h-pair .h-pcard{ border-color:rgba(46,28,66,.30); } /* Partenariat : amethyste discret */ /* Le lockup Oracle signe son acte sur l'accueil */ .lockup-oracle{ display:block; width:min(300px,62%); height:auto; margin:18px auto 6px; opacity:.97; filter:drop-shadow(0 2px 12px rgba(0,0,0,.6)); } /* Palette secondaire du Brand Book, aux jetons : Sauge 300 pour le texte secondaire sur fond sombre, Vert 500 pour les filets discrets des fonds clairs. */ :root{ --text-on-dark-soft:#9DB5A8; --border-quiet:rgba(29,74,66,.28); --text-muted:#51665E; /* sauge profonde : secondaire sur clair */ } /* Filtres sur section sombre (Journal) : l'inactif etait encre sur foret, invisible. Inactif creme lisible, actif pilule or pleine. */ [data-lbc-home] .h-dark.h-cases button[data-active]{ color:var(--lbc-cream,#F2EDE3) !important; border-color:rgba(201,168,76,.55) !important; } [data-lbc-home] .h-dark.h-cases button[data-active]:hover{ background:rgba(242,237,227,.10) !important; } [data-lbc-home] .h-dark.h-cases button[data-active="1"]{ background:var(--lbc-gold,#C9A84C) !important; color:#0F2C26 !important; border-color:var(--lbc-gold,#C9A84C) !important; } /* La galerie des autres voix — neuf temoignages 16:9 en grille */ .autres-voix{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(18px,2.2vw,30px); } .autres-voix .h-vid{ margin:0; } .autres-voix figcaption b{ display:block; margin-top:10px; font-family:var(--font-display); font-weight:400; font-size:16px; color:var(--text-heading); } @media (max-width:820px){ .autres-voix{ grid-template-columns:repeat(2,1fr); } } @media (max-width:520px){ .autres-voix{ grid-template-columns:1fr; } } /* ============================================================ LECTEUR VIDEO AUTONOME — vignette cliquable qui devient iframe, sans dependre du runtime (onclick inline survit). ============================================================ */ .video-bloc{ margin:clamp(26px,3vw,40px) 0; } .video-inline{ position:relative; display:block; width:100%; aspect-ratio:16/9; border-radius:12px; overflow:hidden; cursor:pointer; border:1px solid rgba(178,141,66,.4); background:#04211C; } .video-inline img{ width:100%; height:100%; object-fit:cover; display:block; } iframe.video-inline.joue{ border:0; } .video-inline__play{ position:absolute; inset:0; margin:auto; width:64px; height:64px; border-radius:50%; border:1px solid rgba(242,237,227,.9); background:rgba(4,33,28,.45); } .video-inline__play::after{ content:""; position:absolute; left:55%; top:50%; transform:translate(-50%,-50%); border-left:16px solid #F2EDE3; border-top:10px solid transparent; border-bottom:10px solid transparent; } .video-inline:hover .video-inline__play{ background:rgba(4,33,28,.7); } .video-bloc figcaption{ margin-top:10px; font-size:13.5px; color:var(--text-muted,#6b7a72); font-style:italic; } /* Sur fond sombre, la sauge profonde du texte secondaire tombe a 2,8:1 — sous le seuil AA de 4,5:1, et la legende d'une video est du texte, pas de l'ornement. Le Brand Book a deja sa teinte pour ce cas, Sauge 300, qui donne 7,9:1 sur le vert 900. Aucune couleur nouvelle, aucun changement sur fond clair. */ .lux-dark .video-bloc figcaption, .h-dark .video-bloc figcaption, .h-deep .video-bloc figcaption, .h-hero .video-bloc figcaption{ color:var(--text-on-dark-soft,#9DB5A8); } .video-duo{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(16px,2vw,28px); margin:clamp(22px,2.6vw,34px) 0 0; } .video-duo .video-bloc{ margin:0; } @media (max-width:680px){ .video-duo{ grid-template-columns:1fr; } } .video-bloc--ambiance{ max-width:560px; } /* Placements cibles des videos */ .video-bloc--voix{ max-width:520px; margin:clamp(24px,3vw,40px) auto; } .video-bloc--preuve{ max-width:480px; margin:clamp(22px,2.6vw,34px) auto 8px; } .video-bloc--preuve figcaption, .video-bloc--voix figcaption{ text-align:center; } .video-bloc--integrer{ max-width:560px; margin:clamp(24px,3vw,40px) auto; } .video-bloc--integrer figcaption{ text-align:center; color:rgba(240,232,214,.7); } .video-bloc--merci{ max-width:520px; margin:0 0 22px; } /* ============================================================ TEMOIGNAGES — corrections lecteur & verticales. 1) Une fois l'iframe posee, elle prend TOUS les clics : le bouton lecture et la vignette s'effacent (pause possible). 2) Les formats 9/16 se presentent comme des cartes telephone : largeur bridee, coins arrondis, centres dans leur colonne. ============================================================ */ [data-lbc-home] .h-vid__frame iframe{ z-index:4; } [data-lbc-home] .h-vid__frame:has(iframe) .h-vid__play{ display:none !important; } [data-lbc-home] .h-vid__frame:has(iframe) img{ visibility:hidden; } [data-lbc-home] .h-vid__frame:has(iframe){ cursor:default; } [data-lbc-home] .h-vid__frame[style*="9/16"], [data-lbc-home] .h-vid__frame[style*="9 / 16"]{ max-width:280px; margin-left:auto; margin-right:auto; border-radius:26px; border-color:rgba(178,141,66,.5); box-shadow:0 18px 40px rgba(6,32,26,.25); } [data-lbc-home] .h-vid:has(.h-vid__frame[style*="9/16"]) figcaption, [data-lbc-home] .h-vid:has(.h-vid__frame[style*="9 / 16"]) figcaption{ max-width:280px; margin-left:auto; margin-right:auto; text-align:center; } /* Les cartes verticales : plus de fond foret qui affleure aux coins arrondis — le cadre est transparent, l'image seule. */ [data-lbc-home] .h-vid__frame[style*="9/16"], [data-lbc-home] .h-vid__frame[style*="9 / 16"]{ background:transparent; } /* Lecteur autonome, variante verticale (Shorts) */ .video-inline--vertical{ aspect-ratio:9/16 !important; max-width:280px; margin-left:auto; margin-right:auto; border-radius:26px; } iframe.video-inline--vertical.joue{ aspect-ratio:9/16 !important; max-width:280px; display:block; margin-left:auto; margin-right:auto; border-radius:26px; } .video-bloc--vertical{ max-width:280px; margin-left:auto; margin-right:auto; } .video-bloc--vertical figcaption{ text-align:center; } /* ============================================================ PALETTE SECONDAIRE — roles VISIBLES (Brand Book p.10) Vert 500 #1D4A42 porte : la banderole, les cartes de voix des membres. Sauge 300 porte : le pied de page. ============================================================ */ .bandeau-defile{ background:rgba(29,74,66,.85) !important; border-top-color:rgba(157,181,168,.35) !important; border-bottom-color:rgba(157,181,168,.35) !important; } [data-stage3d] .glass{ background:linear-gradient(150deg, rgba(29,74,66,.72), rgba(21,54,47,.78)) !important; border-color:rgba(157,181,168,.30) !important; } [data-stage3d] .glass small{ color:#9DB5A8; opacity:1; } footer .pied-liens a{ color:#9DB5A8 !important; } footer .pied-liens a:hover{ color:var(--lbc-cream,#F2EDE3) !important; } /* Medaillon conciergerie en ligne (formules Gold & VIP) */ /* Le sceau officiel de la Conciergerie est CARRE et porte deja son ovale, son filet d'or et son fond. L'ancien etait un ovale nu qu'il fallait cadrer, d'ou le rognage et l'anneau ajoutes ici. Les deux disparaissent : un cadre rond sur une image carree rognait les couronnes de laurier, et un anneau d'or par-dessus un filet d'or en faisait deux. */ .sceau-ligne--conc{ width:28px; height:28px; border-radius:0; vertical-align:-8px; object-fit:contain; box-shadow:none; } /* LA LIGNE QUI PORTE LE SCEAU s'aligne sur son texte, pas sur son medaillon. En flux normal, le sceau tient sa place dans la premiere ligne et la seconde repart sous le tiret : « Hotels 4 et 5 » puis « etoiles : -30 % » decale de vingt pixels. La ligne passe en rangee, le texte devient un bloc a lui seul, et ses deux lignes partent du meme bord. Mesure a 375 px : 135 px pour les deux, contre un decrochage avant. */ li:has(> .sceau-ligne--conc){ display:flex; align-items:flex-start; gap:8px; } li > .sceau-ligne--conc{ margin-right:0; flex:none; } /* ============================================================ ENCADREMENT DES VIDEOS — le passe-partout d'or. Meme geste que le cadre d'or signe des images : un filet or en retrait a l'interieur de la vignette, qui s'eclaire au survol et s'efface des que la video se joue. ============================================================ */ .video-inline{ border-color:rgba(178,141,66,.55); box-shadow:0 16px 38px rgba(6,32,26,.22); } .video-inline::before{ content:""; position:absolute; inset:10px; z-index:3; pointer-events:none; border:1px solid rgba(201,168,76,.62); border-radius:4px; box-shadow:0 0 0 1px rgba(4,33,28,.3), inset 0 0 0 1px rgba(4,33,28,.3); transition:border-color .45s ease; } .video-inline:hover::before{ border-color:rgba(201,168,76,.9); } .video-inline__play{ z-index:4; } .video-inline--vertical::before{ inset:9px; border-radius:18px; } iframe.video-inline.joue{ border:1px solid rgba(178,141,66,.55); box-shadow:0 16px 38px rgba(6,32,26,.22); } /* Temoignages : meme filet sur les vignettes du mur */ [data-lbc-home] .h-vid__frame{ border-color:rgba(178,141,66,.5); box-shadow:0 14px 32px rgba(6,32,26,.18); } [data-lbc-home] .h-vid__frame::before{ content:""; position:absolute; inset:9px; z-index:3; pointer-events:none; border:1px solid rgba(201,168,76,.6); border-radius:2px; box-shadow:0 0 0 1px rgba(4,33,28,.3), inset 0 0 0 1px rgba(4,33,28,.3); transition:border-color .45s ease; } [data-lbc-home] .h-vid__frame:hover::before{ border-color:rgba(201,168,76,.85); } [data-lbc-home] .h-vid__frame:has(iframe)::before{ display:none; } [data-lbc-home] .h-vid__frame[style*="9/16"]::before, [data-lbc-home] .h-vid__frame[style*="9 / 16"]::before{ inset:9px; border-radius:18px; } /* Reseau : le teaser vertical (40 s) face a la version longue (39 min) */ .video-duo--reseau{ grid-template-columns:280px 1fr; align-items:center; max-width:820px; } @media (max-width:680px){ .video-duo--reseau{ grid-template-columns:1fr; } } /* ============================================================ MUSIQUE D'ENTREE — CH1, choeur epique inspirant. Icone discrete en bas a droite du couloir : coupee par defaut (les navigateurs exigent un geste), fondu de 2,5 s a l'activation, barres animees pendant la lecture. ============================================================ */ #son-toggle{ /* 24/09/2026 : fixe au bord bas, il passait sous l'indicateur d'accueil (viewport-fit=cover). */ position:fixed; right:22px; bottom:calc(22px + env(safe-area-inset-bottom,0px)); z-index:60; width:44px; height:44px; border-radius:50%; border:1px solid rgba(201,168,76,.5); background:rgba(4,33,28,.55); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); cursor:pointer; display:flex; align-items:center; justify-content:center; transition:border-color .35s ease, background-color .35s ease, transform .35s ease; /* 24/09/2026 : retour au toucher, pas de zoom au double tap, pas de selection. */ touch-action:manipulation; -webkit-user-select:none; user-select:none; } #son-toggle:hover{ border-color:rgba(201,168,76,.95); background:rgba(4,33,28,.75); } /* 24/09/2026 : le grossissement ne colle plus au doigt apres un tap. */ @media (hover:hover) and (pointer:fine){ #son-toggle:hover{ transform:scale(1.06); } } /* 24/09/2026 : l'appui s'enfonce en --duree-appui, courbe vive ; le retour garde les 350 ms de la liste de base, d'ou la transition portee par :active. */ #son-toggle:active{ transform:scale(.97); transition:border-color .35s ease, background-color .35s ease, transform var(--duree-appui) var(--ease-vif); } #son-toggle:focus-visible{ outline:2px solid #C9A84C; outline-offset:3px; } .son-barres{ display:flex; align-items:flex-end; gap:3px; height:14px; } .son-barres i{ width:3px; border-radius:2px; background:rgba(242,237,227,.55); height:6px; transition:background-color .35s ease; } .son-barres i:nth-child(2){ height:11px; } .son-barres i:nth-child(3){ height:8px; } #son-toggle.joue .son-barres i{ background:#C9A84C; animation:son-onde 1.1s ease-in-out infinite; } #son-toggle.joue .son-barres i:nth-child(2){ animation-delay:.18s; } #son-toggle.joue .son-barres i:nth-child(3){ animation-delay:.36s; } @keyframes son-onde{ 0%,100%{ transform:scaleY(.55); } 50%{ transform:scaleY(1.35); } } @media (prefers-reduced-motion: reduce){ #son-toggle.joue .son-barres i{ animation:none; } /* 24/09/2026 : l'enfoncement a l'appui est un mouvement, on le retire. */ #son-toggle:active{ transform:none; } } /* 24/09/2026 : cette regle redeclarait bottom et annulait l'inset bas pose sur la regle de base, precisement sur les telephones ou il existe. */ @media (max-width:680px){ #son-toggle{ right:max(16px, env(safe-area-inset-right,0px)); bottom:calc(16px + env(safe-area-inset-bottom,0px)); } } /* Sur téléphone, la barre « Intégrer le Cercle » occupe le bord bas : le bouton son se posait dessus, sur le bouton d'or lui-même. Tant que la barre est là, il monte au-dessus d'elle, de la hauteur qu'elle prend (la même que le dégagement du pied de page, l. 329). 24/09/2026. */ @media (max-width:680px){ body:has(.lbc-sticky-cta.is-shown) #son-toggle{ bottom:calc(84px + env(safe-area-inset-bottom,0px)); } } /* Pendant la derive, la nav epinglee troque son blur (re-echantillonner le film a chaque image coute une frame) contre un fond plus plein. */ html.en-derive [data-lbcnav]{ backdrop-filter:none !important; -webkit-backdrop-filter:none !important; background:rgba(4,26,21,.88) !important; } html.en-derive #son-toggle{ backdrop-filter:none; -webkit-backdrop-filter:none; background:rgba(4,33,28,.82); } /* Sous les sept emblemes : la mecanique reste a l'interieur des murs */ .emblemes-secret{ margin:clamp(18px,2.2vw,28px) 0 0; text-align:center; font-style:italic; font-size:14.5px; letter-spacing:.02em; color:rgba(201,168,76,.85); } .emblemes-secret::before{ content:""; display:block; width:44px; height:1px; margin:0 auto 12px; background:linear-gradient(90deg, transparent, rgba(201,168,76,.6), transparent); } /* ============================================================ LA RECEPTION ROYALE — les trois rangs de la maison. Silver reste clair (premiere invitation), Gold garde le fond foret (la table), le VIP passe a l'amethyste du Partenariat (palette secondaire) : double filet d'or et sceau en fronton, l'hote d'honneur. Le sceau reprend la couronne de la maison. ============================================================ */ [data-lbc-home] .h-plan--vip{ background:linear-gradient(168deg, #2A1738, #20112C 68%); border-color:var(--lbc-gold); box-shadow:0 26px 60px -30px rgba(20,8,30,.85); } [data-lbc-home] .h-plan--vip::before{ content:""; position:absolute; inset:7px; pointer-events:none; border:1px solid rgba(201,168,76,.38); border-radius:calc(var(--radius-lg, 14px) - 6px); } [data-lbc-home] .h-plan--vip .h-plan__kicker{ color:var(--lbc-gold); } [data-lbc-home] .h-plan--vip h3{ color:var(--lbc-cream); } [data-lbc-home] .h-plan--vip .h-plan__lead{ color:rgba(240,232,214,.72); } [data-lbc-home] .h-plan--vip li{ color:var(--lbc-cream); } [data-lbc-home] .h-plan--vip .vers-carnet{ color:var(--lbc-cream); } .h-plan__couronne{ position:absolute; top:-24px; left:50%; transform:translateX(-50%); width:48px; height:48px; border-radius:50%; background:#20112C; border:1px solid var(--lbc-gold); display:flex; align-items:center; justify-content:center; box-shadow:0 8px 22px rgba(20,8,30,.5); } .h-plan__couronne img{ width:32px; height:32px; } [data-lbc-home] .h-plan--vip{ overflow:visible; }