/* ═══════════════════════════════════════════════════════════════════════ DA BORÉA — AUBE, reprise à l'identique de l'app (app/globals.css) Jetons : fond #F8F3EA · surfaces blanc→#FFFDF6 · bordures rgba(154,92,40,.15) ombres CHAUDES à 3 couches (reflet + contact + portée) · encre #2C2116 ⚠️ Les mockups sont exclus en fin de feuille. ═══════════════════════════════════════════════════════════════════════ */ @font-face{font-family:'Clash Display';src:url('/wp-content/uploads/fonts-borea/ClashDisplay-Medium.woff2') format('woff2');font-weight:500;font-display:swap} @font-face{font-family:'Clash Display';src:url('/wp-content/uploads/fonts-borea/ClashDisplay-Semibold.woff2') format('woff2');font-weight:600;font-display:swap} @font-face{font-family:'Clash Display';src:url('/wp-content/uploads/fonts-borea/ClashDisplay-Bold.woff2') format('woff2');font-weight:700;font-display:swap} @font-face{font-family:'General Sans';src:url('/wp-content/uploads/fonts-borea/GeneralSans-Regular.woff2') format('woff2');font-weight:400;font-display:swap} @font-face{font-family:'General Sans';src:url('/wp-content/uploads/fonts-borea/GeneralSans-Medium.woff2') format('woff2');font-weight:500;font-display:swap} @font-face{font-family:'General Sans';src:url('/wp-content/uploads/fonts-borea/GeneralSans-Semibold.woff2') format('woff2');font-weight:600;font-display:swap} /* V2 (2026-08-23) — la DA de l'app : Tilt Warp (display, graisse 400 UNIQUEMENT, jamais de faux gras) + Inter variable (corps). `block` sur Tilt Warp : elle dessine le logo, un flash de repli sur la marque est pire qu'un bref invisible. */ @font-face{font-family:'BoTiltWarp';src:url('/wp-content/uploads/fonts-borea/tiltwarp.woff2') format('woff2');font-weight:400;font-display:block} @font-face{font-family:'BoInter';src:url('/wp-content/uploads/fonts-borea/inter-var.woff2') format('woff2');font-weight:100 900;font-display:swap} :root{ --bo-fond:#F8F3EA; --bo-encre:#2C2116; --bo-mute:rgba(146,96,48,.8); --bo-terra:#C05E12; --bo-surface:linear-gradient(180deg,#FFFFFF 0%,#FFFDF6 100%); --bo-bord:rgba(154,92,40,.15); --bo-ombre:inset 0 1px 0 rgba(255,255,255,.9), 0 1px 2px rgba(120,66,20,.05), 0 18px 44px -28px rgba(140,86,34,.55); } /* ── Typographie ──────────────────────────────────────────────────── */ body,body p,body li,body span,body a,body div,body td,body th,body input, body textarea,body select,body label,body small,body strong,body em,body button{ font-family:'BoInter','Inter',-apple-system,BlinkMacSystemFont,system-ui,sans-serif !important; } body h1,body h2,body h3,body h4,.hero-h1,.tdvnav-name,.tdvf-brand-logo,.faq-q,.faq-d summary, .mz-h,.bento-title,.pillar-title,.step-title,.toggle-card-title,.jstory-loc,.mc-loc,.sps-title,.share-feat b{ font-family:'BoTiltWarp','Arial Black',sans-serif !important; /* Tilt Warp n'a QU'UNE graisse (400) : jamais de faux gras, la taille fait la presence. */ font-weight:400 !important; letter-spacing:-.03em !important; } /* Les grands titres de section (courts) prennent la signature complete du produit : uppercase, interligne serre, chasse negative — releve sur l'app le 23/08 (Tilt Warp 400 · -0.068em · lh 0.92 · uppercase). Tempere a -0.05/0.95 : ces titres sont plus longs que « Ou veux-tu aller ? ». */ .hero-h1,.phead,.journal-h2,.compare-h2,.bento-h2,.faq-h2,.steps-h2,.globe-h2,.toggle-h2,.ugc-h2,.sps-h2,.sps-comm-h,.sps-exh,.share-h2,.mc-h2,.bwx-h2{ text-transform:uppercase !important; letter-spacing:-.05em !important; line-height:.95 !important; } body h2,body h3{ letter-spacing:-.02em !important; } /* Boréa a banni le serif sur les titres (décision 2026-07-12) */ .hero-h1 em,.hero-h1 i,h1 em,h2 em{ font-family:'BoTiltWarp','Arial Black',sans-serif !important; font-style:normal !important; font-weight:400 !important; } /* ── Fond de page + champ d'aube ambiant (signature Boréa) ────────── */ body{ background-color:var(--bo-fond) !important; color:var(--bo-encre); } /* ⚠️ body::before est DÉJÀ pris par le site (motif SVG) → on passe sur ::after */ body::after{ content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; background: radial-gradient(64% 36% at 50% -8%, rgba(255,190,110,.22), transparent 62%), radial-gradient(44% 26% at 90% -2%, rgba(255,146,52,.10), transparent 58%), radial-gradient(70% 42% at 8% 110%, rgba(236,166,120,.13), transparent 60%), radial-gradient(56% 36% at 94% 108%, rgba(255,178,84,.10), transparent 58%); } /* ── Bouton principal : encre Boréa (bo-cta) ──────────────────────── */ .btn-orange, #mobileCta, .tdvnav-cta{ background:linear-gradient(180deg,#FF7A1A 0%,#E85D00 100%) !important; color:#FFFFFF !important; border:none !important; box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 10px 26px -10px rgba(255,107,0,.5), 0 16px 34px -20px rgba(140,86,34,.45) !important; } .btn-orange:hover, #mobileCta:hover, .tdvnav-cta:hover{ filter:brightness(1.12); } /* ── Bouton secondaire : chip Boréa ───────────────────────────────── */ .btn-ghost{ background:linear-gradient(180deg,#FFFFFF 0%,#FFF7EC 100%) !important; border:1px solid rgba(154,92,40,.17) !important; color:#2C2116 !important; box-shadow:inset 0 1px 0 rgba(255,255,255,.85), 0 1px 2px rgba(120,66,20,.06) !important; } /* Sur le hero photo, le secondaire reste en verre clair pour rester lisible */ .hero-ctas .btn-ghost{ background:rgba(255,255,255,.14) !important; border-color:rgba(255,255,255,.42) !important; color:#fff !important; box-shadow:none !important; } /* ── Gabarit commun des boutons : rayon 14, poids 600, ressort ────── */ .btn, .tdvnav-cta, #mobileCta, .hero-ctas a{ font-family:'BoInter','Inter',system-ui,sans-serif !important; font-weight:600 !important; letter-spacing:-.005em !important; border-radius:14px !important; transition:transform .18s cubic-bezier(.34,1.56,.64,1), box-shadow .25s ease, filter .25s ease !important; } .btn:active,.tdvnav-cta:active,#mobileCta:active{ transform:scale(.975) !important; } /* ── Textes secondaires : brun chaud, jamais gris ─────────────────── */ /* ⚠️ Le hero est sur PHOTO : le brun d'Aube y serait illisible, on garde le clair. Le brun ne s'applique qu'aux zones posées sur l'ivoire. */ .faq-c, .sps p, .bwx-sub{ color:var(--bo-mute) !important; } .hero-eyebrow{ color:rgba(255,255,255,.75) !important; } .sps .eyebrow, .bwx .eyebrow, .faq-section .eyebrow{ color:var(--bo-terra) !important; } /* ── Cartes : soulèvement au survol, comme dans l'app ─────────────── */ /* ── V2 : les grands chiffres d'affichage passent en Tilt Warp (comme la roue de budget de l'app). Graisse 400, la taille fait la presence. ── */ .stat-num,.sp-num,.mz-price{ font-family:'BoTiltWarp','Arial Black',sans-serif !important; font-weight:400 !important; } /* ── V2 : GEL du bloc immersif mobile et des legendes du hero phone ── Consigne Johan 23/08 : les textes A COTE des mockups ne changent PAS. On les fige sur leur rendu actuel (General Sans via l'ancienne regle corps) pour que la bascule Inter ne les deplace pas d'un pixel. Les ECRANS du telephone seront remplaces par les captures de la nouvelle app (etape 5). */ /* Replique EXACTE des regles v1, portee au bloc — surtout PAS `#mobileApp *` : 56 elements de la maquette portent un font-family EN LIGNE (heritage de la copie Next, police inexistante -> repli systeme) ; un force-all les changerait. .mobile-caption/.mobile-eyebrow (legendes du hero phone) sont gelees ICI : verifie au rendu 23/08, elles suivent la regle corps (pas d'auto-protection). */ /* V3 (23/08 soir) : le gel se REDUIT aux legendes autour des telephones — les ECRANS prennent la nouvelle typo (consigne Johan : nouvelle version validee DANS le mockup, textes a cote inchanges). */ #mobileApp .ma-eyebrow,#mobileApp .ma-title,#mobileApp .ma-txt, #mobileApp #maEyebrow,#mobileApp #maTitle,#mobileApp #maTxt, .mobile-caption,.mobile-eyebrow{ font-family:'General Sans',-apple-system,BlinkMacSystemFont,system-ui,sans-serif !important; } /* ── V2 ETAPE 4 : le logo « B plie » (recette produit V83) ───────────── Le B plie EST la capitale du mot « Borea » — jamais un glyphe pose a cote du mot. >=48px : un jour fin marque le pli (.bo-bplie) ; en dessous, deux tons colles (.bo-bplie-s — le jour s'aliaserait en pointilles). !important obligatoire : la regle corps (body span → Inter) gagnerait sinon. */ .bo-bplie,.bo-bplie-s{ font-family:'BoTiltWarp','Arial Black',sans-serif !important; font-weight:400 !important; line-height:1; color:transparent !important; -webkit-background-clip:text !important; background-clip:text !important; display:inline-block; /* Piege du clip-text (mesure 23/08) : une text-shadow heritee (celle du nav sur photo) TRANSPARAIT a travers le remplissage transparent du glyphe et assombrit le degrade — le B paraissait terne. Jamais d'ombre sur le B. */ text-shadow:none !important; } .bo-bplie{background-image:linear-gradient(152deg,#FF9440 0% 56.2%,transparent 56.2% 57.8%,#E85D00 57.8% 100%) !important} .bo-bplie-s{background-image:linear-gradient(152deg,#FF9440 0% 57%,#E85D00 57% 100%) !important} .bo-logo{ font-family:'BoTiltWarp','Arial Black',sans-serif !important; font-weight:400 !important; line-height:1; letter-spacing:-.03em !important; display:inline-block; white-space:nowrap; } /* Le span interieur « orea » retombait en Inter : la regle corps (body span, specificite 0,0,2 + !important) bat l'heritage du parent. On cible les spans du wordmark directement (0,1,1) — tout « Borea » est en Tilt Warp, comme sur l'app web. */ .bo-logo span{ font-family:'BoTiltWarp','Arial Black',sans-serif !important; font-weight:400 !important; } /* ── V3 : un telephone n'a pas d'ascenseur — les ecrans defilent sans barre ── */ .app-view,#maScreens,.ma-screen{scrollbar-width:none !important;-ms-overflow-style:none !important} .app-view::-webkit-scrollbar,#maScreens::-webkit-scrollbar,.ma-screen::-webkit-scrollbar{ display:none !important;width:0 !important;height:0 !important} /* ── V3 : carnet — le flip montrait le TEXTE EN MIROIR sur les pages de gauche. Cause mesuree : les feuilles n'avaient ni transform-style:preserve-3d ni backface-visibility:hidden — le dos pre-retourne (matrix3d(-1)) restait visible a travers. La paire canonique du page-flip : ── */ /* VRAIE CAUSE (mesuree 23/08, 3e passe) : le JS pose un `filter:brightness(...)` sur chaque feuille pendant le flip — or un filtre FORCE l'aplatissement 3D (transform-style devient flat), ce qui casse le montage recto/verso pourtant canonique du CSS d'origine (.lf/.lf.back avec backface cachee). Symptomes vecus : backface visible sur la feuille -> texte en MIROIR ; backface cachee sur la feuille -> la page DISPARAIT passe 90 degres. On supprime le filtre (leger ombrage de tournage perdu, invisible a l'oeil) et la 3D d'origine refonctionne. Ne JAMAIS remettre backface-visibility sur .leaf. */ #cBook .leaf,#jBook .leaf{filter:none !important} /* ── V5 (retour Johan) : le logo du header reste EXACTEMENT le B plie canonique (deux tons #FF9440/#E85D00, aucune variante eclaircie — essayee et rejetee : « c'est plus le logo »). La presence vient de la TAILLE seule. ── */ .tdvnav-logo .tdvnav-name{font-size:23px !important} @media(max-width:900px){.tdvnav-logo .tdvnav-name{font-size:19px !important}} /* ── V4 : le telephone du hero chevauchait les pilules PLANIFIER/EXPLORER (71px mesures a 1440x800). Double id = specificite superieure a la regle !important de la page. Verifie : 38px de jour a 800 de haut, 96px a 900. ── */ /* Retour Johan (3e passe) : encore plus grand. Mesuré : 651px/37px de jour a 900 (PLUS GRAND que l'original 615), 576px/13px a 800 — la marge basse suit aussi la hauteur d'ecran pour absorber les petits viewports. */ #phoneWrap#phoneWrap{height:clamp(560px,70vh,720px) !important;margin-bottom:clamp(24px,6vh,54px) !important} /* Les barres de défilement des scrollers IMBRIQUÉS dans les écrans (liste budget, hub…) échappaient à la règle sur les conteneurs — on masque TOUT descendant des téléphones (4 scrollers anonymes mesurés). */ #phoneFrame *,#mobileApp *,.ma-phone *{scrollbar-width:none !important;-ms-overflow-style:none !important} #phoneFrame *::-webkit-scrollbar,#mobileApp *::-webkit-scrollbar,.ma-phone *::-webkit-scrollbar{ display:none !important;width:0 !important;height:0 !important} /* ═══ EXCLUSIONS — les mockups gardent leur rendu d'origine ═══ */ /* ⚠️ .bo-copie EXEMPTÉE : c'est la copie conforme de l'écran de l'app, extraite avec ses styles. Lui réimposer Space Grotesk la dénaturerait. */ /* V3 : l'ancienne exclusion Space Grotesk des ecrans est SUPPRIMEE — les ecrans des mockups suivent desormais la typo du produit (Tilt Warp/Inter). */ .app-view [class*="card"]:not(.bo-copie *):not(.bo-copie-mob *):not(.bo-copie-sp *), .bwx-phone [class*="card"]:not(.bo-copie *):not(.bo-copie-mob *):not(.bo-copie-sp *), .app-view .btn:not(.bo-copie *):not(.bo-copie-mob *):not(.bo-copie-sp *), .bwx-phone .btn:not(.bo-copie *):not(.bo-copie-mob *):not(.bo-copie-sp *){ background:revert !important; border:revert !important; border-radius:revert !important; box-shadow:revert !important; color:revert !important; transform:none !important; } /* ── Sur-titres : hauteur de ligne explicite ────────────────────────── General Sans n'a pas les mêmes métriques que la police d'origine ; sans line-height posé, une boîte inline calée au pixel peut rogner les capitales. */ .eyebrow, .hero-eyebrow{ line-height:2 !important; padding-block:4px !important; overflow:visible !important; } /* ── Bande des destinations : elle tranchait en blanc sur l'ivoire ──── */ .marquee-wrap{ background:transparent !important; border-top:1px solid rgba(154,92,40,.13) !important; border-bottom:1px solid rgba(154,92,40,.13) !important; } .marquee-chip{ background:linear-gradient(180deg,#FFFFFF 0%,#FFF7EC 100%) !important; border:1px solid rgba(154,92,40,.15) !important; color:#2C2116 !important; box-shadow:inset 0 1px 0 rgba(255,255,255,.85), 0 1px 2px rgba(120,66,20,.05) !important; } /* ── Wordmark lisible sur photo claire ──────────────────────────────── Le hero peut être clair (murs blancs) : le blanc pur s'y perdait. Même ombre que les autres textes du hero. Retirée dès que la barre passe en pilule blanche, où le texte devient foncé. */ .tdvnav-name{ text-shadow:0 1px 14px rgba(0,15,22,.55), 0 0 2px rgba(0,15,22,.35); } .tdvnav.pill .tdvnav-name{ text-shadow:none; } /* Copie conforme de l'écran d'app dans le mockup : l'animation et quelques règles ne peuvent pas vivre en style inline (keyframes, pseudo-éléments, ratio). */ @keyframes bo-diapo-defile { from { transform: translateX(0); } to { transform: translateX(-50%); } } .bo-diapo-piste { animation: bo-diapo-defile 80s linear infinite; will-change: transform; } .bo-diapo-wrap { -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent); } .bo-diapo-carte { aspect-ratio: 3/2; } .bo-dest-card img, .bo-dest-card > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } /* ── Copie conforme mobile : le cadre s'allonge pour accueillir l'ecran entier ── Sans ca, l'aspect-ratio du telephone force une hauteur ou la copie doit etre reduite a ~54%, illisible. On garde la pleine largeur et on allonge. */ .ma-phone:has(.bo-copie-mob){aspect-ratio:auto !important;height:688px !important} .ma-screen:has(.bo-copie-mob){height:674px !important} /* ── Section « Sur place » (mobile) : elle remplace le carnet, dont la copie etait en cursive. Ici on enonce des infos pratiques, pas des souvenirs. */ #mobileCarnet.bo-sp .mc-sub{font-family:'General Sans',system-ui,-apple-system,sans-serif !important; font-size:14px !important;line-height:1.55 !important;color:rgba(255,255,255,.74) !important; max-width:330px;margin:12px auto 26px !important;font-style:normal !important} #mobileCarnet.bo-sp .ma-phone{margin-top:4px} /* ── « Sur place » (mobile) — DA Boréa, un seul bloc, quatre astuces. ⚠️ Le fond marine #0F1B3D venait de la section carnet : ce n'est PAS la DA Boréa. On revient a l'ivoire, aux surfaces chaudes et aux jetons --bo-*. Ce qu'on montre, ce sont des ASTUCES (ce qu'aucun guide ne dit), pas des statuts administratifs. */ #mobileCarnet.bo-sp{background:#0F1B3D !important;padding:34px 0 36px !important} #mobileCarnet.bo-sp .eyebrow{color:#E8A06A} #mobileCarnet.bo-sp .mc-h2{color:#F7F1E6 !important} #mobileCarnet.bo-sp .mc-sub{color:rgba(247,241,230,.66) !important;margin:8px auto 18px !important;max-width:300px} #mobileCarnet.bo-sp .bs{padding:4px 22px 0} #mobileCarnet.bo-sp .bs-c{text-align:left;border-radius:16px;overflow:hidden; background:linear-gradient(180deg,#FFFFFF 0%,#FFFDF6 100%); border:1px solid rgba(154,92,40,.15); box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 1px 2px rgba(6,10,26,.3), 0 18px 38px rgba(4,8,22,.42)} #mobileCarnet.bo-sp .bs-t{display:flex;align-items:baseline;justify-content:space-between;gap:12px; padding:15px 17px 13px;border-bottom:1px solid rgba(154,92,40,.14)} #mobileCarnet.bo-sp .bs-p{font-family:'Clash Display','General Sans',sans-serif;font-weight:600; font-size:20px;letter-spacing:-.025em;color:#2C2116;line-height:1} #mobileCarnet.bo-sp .bs-m{font-size:10px;letter-spacing:.14em;text-transform:uppercase; color:rgba(146,96,48,.6)} #mobileCarnet.bo-sp .bs-l{display:flex;flex-direction:column;gap:1px;padding:9px 17px; border-bottom:1px solid rgba(154,92,40,.1)} #mobileCarnet.bo-sp .bs-l:last-child{border-bottom:0} #mobileCarnet.bo-sp .bs-l span{font-size:10px;font-weight:600;letter-spacing:.15em; text-transform:uppercase;color:rgba(146,96,48,.75)} #mobileCarnet.bo-sp .bs-l b{font-size:14.5px;font-weight:500;line-height:1.35;color:#2C2116} #mobileCarnet.bo-sp .bs-f{margin:15px 0 0;font-size:12.5px;color:rgba(247,241,230,.62)} #mobileCarnet.bo-sp .bs-f b{font-weight:600;color:#FF9D4D} /* ── « Sur place » (mobile) RETIRÉE — 2026-08-17, décision Johan ────────────── « elle est pas hyper pertinente et ce qui arrive ensuite est mieux ». Mesuré AVANT de retirer : section mobile UNIQUEMENT (déjà masquée en desktop), aucune image, 22 nœuds, aucun JS qui la cible → aucun effet de bord. Le mockup téléphone enchaîne directement sur « Un plan fiable, un budget clair », et la page mobile perd 519 px de défilement. ⚠️ Le sélecteur porte .bo-sp : #mobileCarnet seul (1,0,0) PERD contre la règle d'habillage #mobileCarnet.bo-sp (1,1,0), !important ou pas. Pour la remettre : retirer la règle ci-dessous. Les ~35 règles d'habillage .bo-sp au-dessus sont laissées exprès — elles ne coûtent rien et sont exactement ce qu'il faut si la section revient un jour. */ #mobileCarnet.bo-sp{display:none !important} /* ── Le ruban de JONCTION est mobile UNIQUEMENT — 2026-08-17 ────────────────── Il remplace la respiration que donnait « Sur place », qui était elle-même mobile-only : en desktop la jonction n'a jamais eu ce problème, et un second ruban à 5000 px du premier n'y apporte rien. Cible l'attribut aria-hidden, que seule la copie décorative porte. */ @media (min-width: 768px) { .marquee-wrap[aria-hidden="true"] { display: none !important; } } /* ── Le fil orange sous le titre, masqué en mobile — 2026-08-17 ─────────────── `.bento-connector` (2 × 48 px, dégradé orange) relie visuellement le bloc précédent au titre de « ET LE MEILLEUR ». Depuis que le ruban de jonction sépare les deux, ce fil les traverse : il reliait deux choses désormais distinctes. Masqué en MOBILE seulement — en desktop il n'y a pas de ruban à cet endroit et le fil garde son rôle (vérifié : il y vit à ~11500 px, loin). */ @media (max-width: 767px) { .sps .bento-connector { visibility: hidden !important; } }