/* ============================================================================ WEBENA · MODÈLE DE SECTION EN FLUX NATUREL ---------------------------------------------------------------------------- Reprend exactement le fonctionnement de Road Too Asiamah 26 : · pas de scène, pas de wrapper de hauteur fixe, pas de position absolue ; · chaque
dicte sa propre hauteur à partir de son contenu ; · une couleur unie sur toute la section ; · un dégradé superposé sur les 170 premiers pixels, qui part de la couleur de la section précédente et se dissout vers elle-même. La forme du fond est littéralement celle d'Asiamah : background: linear-gradient(180deg, PRÉCÉDENTE 0, rgbaPRÉCÉDENTE0 170px) ACTUELLE; Aucune couleur, aucune typographie et aucun texte ne changent ici : ce fichier ne fait que remplacer la mécanique de mise en page. ============================================================================ */ /* ------------------------------------------------------- 1. PAGE ET EN-TÊTE */ body.wb-page{ background:var(--wb-ivory); overflow-x:hidden; } body.wb-page .v3-header{position:sticky;top:0;z-index:120} body.wb-page main{display:block} /* Les pages Webena ne chargent pas tokens.css : les marges par défaut du navigateur sur
,
et
restaient donc actives. Elles ajoutaient 40 px de chaque côté aux cadres photo, ce que l'ancien `overflow:hidden` des scènes masquait au lieu de le corriger. */ body.wb-page figure, body.wb-page blockquote, body.wb-page dl, body.wb-page dd, body.wb-page fieldset{margin:0} /* --------------------------------------------------------- 2. LA SECTION */ .wb-section{ position:relative; height:auto; /* la hauteur vient du contenu, jamais de l'écran */ min-height:0; overflow:visible; padding:clamp(76px,11vw,130px) clamp(20px,5vw,56px); background:var(--wb-ivory); } /* L'accroche d'une page occupe l'écran sans jamais le dépasser : c'est un minimum, pas une hauteur imposée. */ .wb-section--hero{ min-height:min(540px,calc(100svh - 92px)); display:grid; align-content:center; padding-top:clamp(48px,7vw,84px); } @media(max-width:980px){ .wb-section--hero{min-height:0;padding-top:clamp(44px,7vw,72px)} } .wb-section:last-of-type{padding-bottom:clamp(90px,12vw,150px)} .wb-section__in{ width:100%; max-width:1360px; margin-inline:auto; } /* --------------------------------------- 3. TEINTES ET PONTS DE COULEUR */ /* Longueur du pont. Elle reste systématiquement inférieure au padding haut d'une section, clamp(76px,11vw,130px), pour qu'aucun titre ne commence à l'intérieur de la transition : 375 px · pont 56, contenu à 76 → 20 px d'aplat plein 834 px · pont 62, contenu à 92 → 30 px 1440 px · pont 96, contenu à 130 → 34 px */ :root{ --wb-bridge:clamp(56px,7.4vw,96px); } /* Quatre teintes suffisent à toute la marque. Le pont fait 170 px, comme sur Road Too Asiamah 26, et il est toujours terminé avant le contenu, puisque le padding haut d'une section vaut au minimum 76 px et grimpe à 130 px. */ .wb-section[data-tone="ivory"]{background:var(--wb-ivory)} .wb-section[data-tone="sand"] {background:#F1ECE6} .wb-section[data-tone="linen"]{background:#F3EEE8} .wb-section[data-tone="warm"] {background:#EFE7DF} .wb-section[data-from="ivory"][data-tone="sand"]{ background:linear-gradient(180deg,#F7F3EF 0,rgba(247,243,239,0) var(--wb-bridge)),#F1ECE6; } .wb-section[data-from="ivory"][data-tone="linen"]{ background:linear-gradient(180deg,#F7F3EF 0,rgba(247,243,239,0) var(--wb-bridge)),#F3EEE8; } .wb-section[data-from="ivory"][data-tone="warm"]{ background:linear-gradient(180deg,#F7F3EF 0,rgba(247,243,239,0) var(--wb-bridge)),#EFE7DF; } .wb-section[data-from="sand"][data-tone="ivory"]{ background:linear-gradient(180deg,#F1ECE6 0,rgba(241,236,230,0) var(--wb-bridge)),#F7F3EF; } .wb-section[data-from="sand"][data-tone="linen"]{ background:linear-gradient(180deg,#F1ECE6 0,rgba(241,236,230,0) var(--wb-bridge)),#F3EEE8; } .wb-section[data-from="sand"][data-tone="warm"]{ background:linear-gradient(180deg,#F1ECE6 0,rgba(241,236,230,0) var(--wb-bridge)),#EFE7DF; } .wb-section[data-from="linen"][data-tone="ivory"]{ background:linear-gradient(180deg,#F3EEE8 0,rgba(243,238,232,0) var(--wb-bridge)),#F7F3EF; } .wb-section[data-from="linen"][data-tone="sand"]{ background:linear-gradient(180deg,#F3EEE8 0,rgba(243,238,232,0) var(--wb-bridge)),#F1ECE6; } .wb-section[data-from="linen"][data-tone="warm"]{ background:linear-gradient(180deg,#F3EEE8 0,rgba(243,238,232,0) var(--wb-bridge)),#EFE7DF; } .wb-section[data-from="warm"][data-tone="ivory"]{ background:linear-gradient(180deg,#EFE7DF 0,rgba(239,231,223,0) var(--wb-bridge)),#F7F3EF; } .wb-section[data-from="warm"][data-tone="sand"]{ background:linear-gradient(180deg,#EFE7DF 0,rgba(239,231,223,0) var(--wb-bridge)),#F1ECE6; } .wb-section[data-from="warm"][data-tone="linen"]{ background:linear-gradient(180deg,#EFE7DF 0,rgba(239,231,223,0) var(--wb-bridge)),#F3EEE8; } /* Deux sections de même teinte qui se suivent : pas de pont, elles se lisent comme un seul aplat continu. */ .wb-section[data-from="ivory"][data-tone="ivory"], .wb-section[data-from="sand"][data-tone="sand"], .wb-section[data-from="linen"][data-tone="linen"], .wb-section[data-from="warm"][data-tone="warm"]{background-image:none} /* --------------------------------------------- 4. RYTHME INTERNE */ /* v3.css définit déjà toutes les grilles de contenu et leurs déclinaisons responsive. On ne les redéclare pas ici : on se contente d'empêcher les enfants de grille de gonfler leur colonne, cause classique de débordement masqué par overflow:hidden. */ .wb-section,.wb-section__in{min-width:0} .wb-section__in *{min-width:0} /* Un cadre photo ne dépasse jamais sa colonne : sans min-width:0, la largeur intrinsèque de l'image gonfle la colonne de grille. */ .wb-section .page-photo, .wb-section .home-hero-visual, .wb-section .home-creation-photo, .wb-section .wed-work-main, .wb-section .founder-photo, .wb-section figure{max-width:100%;min-width:0} .wb-section table{max-width:100%} /* Le panneau de recherche : la barre du haut ne gonfle plus au-delà de l'écran, son champ peut se réduire. */ .v3-search-top{min-width:0;flex-wrap:nowrap} .v3-search-top input,.v3-search-top form,.v3-search-top>*{min-width:0} .v3-search-top input{flex:1 1 auto;width:100%} .v3-search-results{min-width:0;max-width:100%} /* Un titre n'est jamais collé au bloc qui le suit. */ .wb-section h1+p,.wb-section h2+p,.wb-section h3+p, .wb-section .page-title+p{margin-top:var(--gap-title,clamp(18px,2vw,28px))} .wb-section .page-copy+.page-copy{margin-top:var(--gap-title,clamp(18px,2vw,28px))} /* Les ancres tiennent compte de l'en-tête collant. */ body.wb-page [id]{scroll-margin-top:104px} @media(max-width:980px){ body.wb-page [id]{scroll-margin-top:86px} } /* ------------------------------------------------- 5. BARRE DE PROGRESSION */ .wb-progress{ position:fixed;left:0;top:0;right:0;height:2px;z-index:200; background:transparent;pointer-events:none; } .wb-progress>i{ display:block;height:100%;transform:scaleX(0);transform-origin:0 50%; background:var(--wb-gold); } /* --------------------------------------------------- 6. APPARITIONS DOUCES */ .wb-in{opacity:0;transform:translateY(14px);transition:opacity .7s ease,transform .7s ease} .wb-in.is-in{opacity:1;transform:none} @media(prefers-reduced-motion:reduce){ .wb-in{opacity:1;transform:none;transition:none} .wb-progress>i{transition:none} }