========================================================== */ /* ---------- Neutralisation GeneratePress + header/footer transparents sur capsule ---------- */ /* Active si */ .is-capsule .site-content, .is-capsule .content-area, .is-capsule .site-main, .is-capsule .inside-article, .is-capsule .grid-container { padding: 0 !important; margin: 0 !important; max-width: 100% !important; background: transparent !important; box-shadow: none !important; } .is-capsule .site-header, .is-capsule .site-footer { background: transparent !important; box-shadow: none !important; } /* ---------- Variables de fallback (locales au scope .capsule) ---------- */ .capsule { /* grilles & rythme */ --cap-max: 1200px; --cap-intimate: 820px; --cap-gap-y: 3rem; /* ~48px desktop */ --cap-gap-y-m: 2rem; /* ~32px mobile */ --cap-pad-lg: 2rem; /* ~32px */ --cap-pad-md: 1.5rem; /* ~24px */ --cap-pad-sm: 1rem; /* ~16px */ /* header/footer (peuvent être surchargés dans le template) */ --header-h: var(--capsule-header-height, 22vh); --footer-h: var(--capsule-footer-height, 120px); /* arrondis & ombres */ --cap-radius-lg: 16px; --cap-radius-md: 12px; --cap-radius-sm: 8px; --cap-shadow-soft: 0 8px 24px rgba(0,0,0,.08); --cap-shadow-card: 0 4px 16px rgba(0,0,0,.06); /* verre dépoli */ --glass-xs: rgba(255,255,255,.12); --glass-sm: rgba(255,255,255,.16); --glass-md: rgba(255,255,255,.22); --blur-sm: blur(6px); --blur-md: blur(8px); --blur-lg: blur(10px); /* typo/couleurs neutres (overridables par capsule) */ --cap-ink: var(--capsule-text-color, #2e2825); --cap-ink-soft: rgba(46,40,37,.85); --cap-accent: var(--tyshara-accent, #c79b7b); --cap-cta-bg: var(--capsule-cta-bg, #2f2521); --cap-cta-ink: #fff; } /* ---------- Socle page capsule ---------- */ .capsule { position: relative; min-height: 100vh; /* le fond de la capsule */ background-image: var(--capsule-bg); background-size: cover; background-position: center top; background-repeat: no-repeat; /* fait “passer” le fond sous header/footer fixes sans bande blanche */ margin-top: calc(-1 * var(--header-h)); padding-top: var(--header-h); margin-bottom: calc(-1 * var(--footer-h)); padding-bottom: var(--footer-h); box-sizing: border-box; } /* Rythme vertical commun */ .capsule > .capsule-hero, .capsule > .capsule-products, .capsule > .capsule-featured, .capsule > .capsule-wrapper-rituel-description, .capsule > .capsule-archives, .capsule > .capsule-archive-slider, .capsule > .capsule-story, .capsule > .capsule-citation, .capsule > .capsule-gallery, .capsule > .capsule-archives-wrapper, .capsule > .capsule-section { margin-block: var(--cap-gap-y); } /* Largeurs harmonisées */ .capsule-hero, .capsule-products, .capsule-featured, .capsule-wrapper-rituel-description, .capsule-archives, .capsule-archive-slider, .capsule-gallery, .capsule-archives-wrapper { max-width: var(--cap-max); margin-inline: auto; } .capsule-story, .capsule-citation, .capsule-description, .capsule-rituel { max-width: var(--cap-intimate); margin-inline: auto; } /* ---------- HÉRO (full-bleed fiable + lisible) ---------- */ .capsule-hero{ position: relative; /* full-bleed sans décaler le layout parent */ width: 100vw; max-width: 100vw; margin-left: 50%; transform: translateX(-50%); min-height: clamp(380px, 48vh, 600px); padding: clamp(24px, 4vw, 56px) 4vw; display: flex; flex-direction: column; align-items: center; justify-content: center; row-gap: clamp(10px, 1.8vw, 16px); text-align: center; overflow: hidden; /* masque la surcouche */ /* image */ background-image: var(--hero-bg); background-size: cover; background-position: center; background-repeat: no-repeat; } /* Surcouche d’uniformisation (teinte) : tu peux ajuster l’opacité avec --hero-tint */ .capsule-hero::before{ content:""; position:absolute; inset:0; background: linear-gradient( 180deg, rgba(0,0,0, var(--hero-tint, .30)) 0%, rgba(0,0,0, var(--hero-tint, .30)) 100% ); pointer-events:none; z-index:0; } /* Titre */ .capsule-hero-title{ position:relative; z-index:1; color:#fff; font-family: var(--font-hero,'Satisfy',cursive); font-size: clamp(32px, 5.2vw, 56px); line-height: 1.1; margin: 0; /* un peu de relief pour toutes les photos */ text-shadow: 0 2px 8px rgba(0,0,0,.35); } /* Pastille intention (verre dépoli plus clair et lisible) */ .capsule-intention{ position:relative; z-index:1; display:inline-block; max-width: min(90ch, 86vw); padding: .9rem 1.2rem; border-radius: 999px; /* verre dépoli lumineux */ background: rgba(255,255,255,.18); backdrop-filter: blur(8px) saturate(115%); -webkit-backdrop-filter: blur(8px) saturate(115%); border: 1px solid rgba(255,255,255,.40); color: #fff; font-size: clamp(16px, 2.1vw, 20px); font-style: italic; /* lisibilité universelle */ text-shadow: 0 1px 3px rgba(0,0,0,.35); } /* Option : tu peux éclaircir/assombrir la surcouche au cas par cas */ .capsule{ --hero-tint: .28; } /* par défaut */ /* ---------- PRODUITS ---------- */ .capsule-products { position: relative; padding: var(--cap-pad-lg) var(--cap-pad-md); border-radius: var(--cap-radius-lg); background: var(--glass-xs); backdrop-filter: var(--blur-md); -webkit-backdrop-filter: var(--blur-md); box-shadow: var(--cap-shadow-soft); overflow: hidden; } .capsule-products-overlay { position: absolute; inset: 0; pointer-events: none; border-radius: inherit; background: transparent; z-index: 0; } .capsule-products-grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 24px; justify-items: center; } .capsule-product-card { background: #fff; border-radius: var(--cap-radius-md); box-shadow: var(--cap-shadow-card); padding: var(--cap-pad-sm); text-align: center; width: 100%; max-width: 220px; transition: transform .25s ease; } .capsule-product-card:hover { transform: translateY(-4px); } .capsule-product-image img { width: 100%; height: auto; border-radius: calc(var(--cap-radius-md) - 2px); } .capsule-product-title { font-family: 'Montserrat Alternates','Montserrat',sans-serif; font-size: .95rem; font-weight: 600; margin: .75rem 0 .25rem; color: var(--cap-ink); } .capsule-product-price { font-family: var(--font-deco,'Satisfy',cursive); font-size: 1.05rem; color: var(--cap-ink-soft); margin: 0; } /* ---------- PRODUIT VEDETTE ---------- */ .capsule-featured { padding: var(--cap-pad-lg) var(--cap-pad-md); border-radius: var(--cap-radius-lg); background: var(--glass-xs); backdrop-filter: var(--blur-md); -webkit-backdrop-filter: var(--blur-md); box-shadow: var(--cap-shadow-soft); } .capsule-featured-inner { display: flex; flex-wrap: wrap; gap: 2rem; align-items: center; } .capsule-featured-image img { max-width: 360px; width: 100%; height: auto; border-radius: var(--cap-radius-lg); box-shadow: var(--cap-shadow-card); } .capsule-featured-details { flex: 1; min-width: 260px; } .capsule-featured-title { font-family: 'Montserrat Alternates','Montserrat',sans-serif; font-size: 1.4rem; margin-bottom: .5rem; color: var(--cap-ink); } .capsule-featured-desc { font-size: 1rem; line-height: 1.6; color: var(--cap-ink-soft); margin-bottom: 1rem; } .capsule-featured-price { font-family: var(--font-deco,'Satisfy',cursive); font-size: 1.2rem; color: var(--cap-ink-soft); margin-bottom: 1rem; } .capsule-featured-cta a { display: inline-block; background: var(--cap-cta-bg); color: var(--cap-cta-ink); text-decoration: none; padding: .6rem 1.4rem; border-radius: 999px; font-size: .95rem; transition: opacity .25s ease; } .capsule-featured-cta a:hover { opacity: .9; } /* ---------- WRAPPER RITUEL + DESCRIPTION (panneau commun) ---------- */ .capsule-wrapper-rituel-description { display: flex; flex-wrap: wrap; gap: 2rem; align-items: flex-start; justify-content: center; padding: var(--cap-pad-lg) var(--cap-pad-md); border-radius: var(--cap-radius-lg); background: var(--glass-sm); backdrop-filter: var(--blur-sm); -webkit-backdrop-filter: var(--blur-sm); box-shadow: var(--cap-shadow-soft); } .capsule-rituel-col { flex: 0 0 32%; min-width: 260px; } .capsule-description-col { flex: 1; min-width: 320px; } /* Intérieurs sans double-verre */ .capsule-rituel { margin: 0; padding: var(--cap-pad-md); background: transparent; border-radius: var(--cap-radius-md); font-style: italic; text-align: center; } .capsule-rituel-text { font-size: 1.2rem; line-height: 1.7; color: var(--cap-ink-soft); margin: 0 auto; max-width: 60ch; } .capsule-description { margin: 0; padding: var(--cap-pad-md); background: var(--glass-xs); backdrop-filter: var(--blur-sm); -webkit-backdrop-filter: var(--blur-sm); border-radius: var(--cap-radius-md); font-size: 1.1rem; color: var(--cap-ink); text-align: center; } /* ========================================================= STORYTELLING — carte immersive + retours à la ligne ok ========================================================= */ /* Carte : plus large, centrée, verre dépoli plus lumineux */ .capsule-story{ width: min(1100px, 92vw); margin: clamp(28px, 4vw, 48px) auto; padding: clamp(22px, 3.6vw, 40px); border-radius: var(--cap-radius-lg); background: rgba(255,255,255,.16); /* + clair */ backdrop-filter: blur(8px) saturate(115%); -webkit-backdrop-filter: blur(8px) saturate(115%); border: 1px solid rgba(255,255,255,.35); box-shadow: 0 10px 28px rgba(0,0,0,.16); text-align: center; position: relative; overflow: hidden; } /* Ornement discret (grosse guillemet fantôme) */ .capsule-story::before{ content: "“"; position: absolute; left: -8px; top: -28px; font-family: var(--font-hero,'Satisfy',cursive); font-size: clamp(120px, 18vw, 220px); line-height: .6; color: rgba(255,255,255,.12); pointer-events: none; } /* Titre */ .capsule-story-title{ font-family: 'Montserrat Alternates','Montserrat',sans-serif; font-size: clamp(26px, 3.6vw, 36px); color: var(--cap-ink); margin: 0 0 1.2rem; position: relative; } .capsule-story-title::after{ content: ""; display: block; width: 64px; height: 3px; margin: .65rem auto 0; border-radius: 2px; background: var(--cap-accent); box-shadow: 0 1px 0 rgba(0,0,0,.08); } /* Corps : déco Satisfy, + lisible, RESPECTE LES RETOURS DE LIGNE */ .capsule-story-text{ font-family: var(--font-deco,'Satisfy',cursive); font-size: clamp(19px, 2.3vw, 24px); line-height: 1.9; color: var(--cap-ink-soft); padding-inline: clamp(8px, 1.2vw, 18px); /* >>> respecte \n et les
venant de Gutenberg <<< */ white-space: pre-line; } /* Si Gutenberg génère des

, on clarifie les espacements */ .capsule-story-text p{ margin: 0 0 1.05rem; white-space: pre-line; /* garde les retours */ } .capsule-story-text p:last-child{ margin-bottom: 0; } /* Accroche/le début un peu plus présent */ .capsule-story-text p:first-child{ font-size: clamp(20px, 2.6vw, 28px); color: var(--cap-ink); } /* Option : mots surlignés (dans Gutenberg, entoure avec ) */ .capsule-story-text em{ background: linear-gradient(0deg, rgba(200,155,107,.22), rgba(200,155,107,.22)); border-radius: 6px; padding: 0 .2em; } /* Option : variante “grand format” si tu veux encore plus d’ampleur */ .capsule-story.is-wide{ width: min(1240px, 96vw); padding: clamp(28px, 4.6vw, 56px); } /* ---------- SLIDER ARCHIVES (centrage quand peu d’items) ---------- */ .capsule-archive-slider { padding: var(--cap-pad-lg); border-radius: var(--cap-radius-lg); background: var(--glass-xs); backdrop-filter: var(--blur-sm); -webkit-backdrop-filter: var(--blur-sm); box-shadow: var(--cap-shadow-soft); } .capsule-archive-slider-title { text-align: center; font-size: 1.8rem; margin-bottom: 1.5rem; font-family: 'Montserrat Alternates','Montserrat',sans-serif; color: var(--cap-ink); } .capsule-slider-track { display: flex; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 1rem .5rem; justify-content: center; /* centre si le contenu n’excède pas la largeur */ } .capsule-slider-item { flex: 0 0 auto; width: 160px; text-align: center; scroll-snap-align: start; background: #fff; border-radius: var(--cap-radius-md); padding: .75rem; box-shadow: var(--cap-shadow-card); transition: transform .2s ease; } .capsule-slider-item:hover { transform: translateY(-3px); } .capsule-slider-image img { border-radius: .5rem; height: auto; max-width: 100%; } .capsule-slider-item h3 { font-size: .9rem; margin-top: .5rem; color: var(--cap-ink); font-weight: 500; font-family: 'Montserrat',sans-serif; } /* ---------- ARCHIVES (liste des capsules) ---------- */ .capsule-archives { padding: var(--cap-pad-lg); border-radius: var(--cap-radius-lg); background: var(--glass-xs); backdrop-filter: var(--blur-sm); -webkit-backdrop-filter: var(--blur-sm); box-shadow: var(--cap-shadow-soft); border-top: none; } .capsule-archives-title { text-align: center; font-size: 2rem; font-family: 'Montserrat Alternates','Montserrat',sans-serif; color: var(--cap-ink); margin: 0 0 2rem; } .capsule-archives-list { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; padding: 0; margin: 0 auto; max-width: 900px; } .capsule-archives-item { background: var(--glass-md); backdrop-filter: var(--blur-sm); -webkit-backdrop-filter: var(--blur-sm); border: 1px solid rgba(255,255,255,.5); padding: .6rem 1.1rem; border-radius: var(--cap-radius-sm); transition: transform .2s ease, border-color .2s ease; } .capsule-archives-item:hover { transform: translateY(-2px); border-color: var(--cap-accent); } .capsule-archives-item a { text-decoration: none; color: var(--cap-ink); font-weight: 500; font-family: 'Montserrat',sans-serif; } /* ---------- CITATION ---------- */ .capsule-citation { padding: var(--cap-pad-md); background: var(--glass-sm); backdrop-filter: var(--blur-md); -webkit-backdrop-filter: var(--blur-md); border-left: 4px solid var(--cap-accent); border-radius: var(--cap-radius-sm); font-family: 'Georgia', serif; font-style: italic; color: var(--cap-ink-soft); text-align: center; box-shadow: var(--cap-shadow-soft); } .capsule-citation-text { font-size: 1.2rem; line-height: 1.6; margin: 0; } /* ---------- Fond capsule classe dédiée (si utilisée) ---------- */ .capsule-background-image { background-image: var(--capsule-bg); background-size: cover; background-repeat: no-repeat; background-position: center; } /* ---------- Nettoyage wrappers internes ---------- */ .capsule-header-grid, .capsule-section { max-width: 100%; margin-top: 0; padding-top: 0; } /* ---------- Accessibilité ---------- */ .capsule a:focus-visible, .capsule button:focus-visible { outline: 2px solid var(--cap-accent); outline-offset: 2px; border-radius: 4px; } /* ---------- Responsive ---------- */ @media (max-width: 1024px) { .capsule-featured-image img { max-width: 320px; } } @media (max-width: 768px) { .capsule > .capsule-hero, .capsule > .capsule-products, .capsule > .capsule-featured, .capsule > .capsule-wrapper-rituel-description, .capsule > .capsule-archives, .capsule > .capsule-archive-slider, .capsule > .capsule-story, .capsule > .capsule-citation, .capsule > .capsule-gallery, .capsule > .capsule-archives-wrapper, .capsule > .capsule-section { margin-block: var(--cap-gap-y-m); } .capsule-hero { min-height: auto; padding: var(--cap-pad-lg) var(--cap-pad-md); } .capsule-featured-inner { flex-direction: column; align-items: flex-start; gap: var(--cap-pad-md); } .capsule-wrapper-rituel-description { flex-direction: column; gap: var(--cap-pad-md); padding: var(--cap-pad-md); } } @media (max-width: 480px) { .capsule-products-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; } .capsule-hero-title { font-size: clamp(24px, 7vw, 36px); } .capsule-intention { font-size: clamp(16px, 4vw, 20px); } } /* ---------- Reduce motion ---------- */ @media (prefers-reduced-motion: reduce) { .capsule *, .capsule *::before, .capsule *::after { transition: none !important; } } /* ========= MODALE IMMERSIVE ========= */ .is-capsule-modal-open { overflow: hidden; } .capsule-modal { position: fixed; inset: 0; display: none; z-index: 9999; } .capsule-modal.is-open { display: block; } .capsule-modal__overlay { position: absolute; inset: 0; background: rgba(0,0,0,.45); backdrop-filter: blur(2px); } .capsule-modal__dialog { position: relative; margin: 4vh auto; width: min(1000px, calc(100% - 2rem)); max-height: 92vh; border-radius: var(--cap-radius-lg, 16px); background: var(--glass-sm, rgba(255,255,255,.16)); backdrop-filter: var(--blur-lg, blur(10px)); -webkit-backdrop-filter: var(--blur-lg, blur(10px)); box-shadow: var(--cap-shadow-soft, 0 8px 24px rgba(0,0,0,.08)); overflow: hidden; } .capsule-modal__close { position: absolute; top: .5rem; right: .5rem; width: 40px; height: 40px; border-radius: 999px; border: none; cursor: pointer; background: rgba(0,0,0,.35); color: #fff; display: grid; place-items: center; font-size: 24px; line-height: 1; } .capsule-modal__close:hover { background: rgba(0,0,0,.48); } .capsule-modal__content { padding: var(--cap-pad-lg, 2rem); overflow: auto; max-height: 92vh; background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.06)); } /* état chargement */ .capsule-modal.is-loading .capsule-modal__content { position: relative; } .capsule-modal.is-loading .capsule-modal__content::after { content: ''; position: absolute; inset: 0; background: radial-gradient(closest-side, rgba(255,255,255,.35), transparent) center/80px 80px no-repeat, rgba(255,255,255,.05); animation: capsulePulse 1.2s infinite ease-in-out; } @keyframes capsulePulse { 0%,100%{opacity:.5} 50%{opacity:1} } /* Quelques correctifs pour le contenu Woo dans la modale */ .capsule-modal .woocommerce div.product div.images img { height: auto; } .capsule-modal .woocommerce-message, .capsule-modal .woocommerce-error, .capsule-modal .woocommerce-info { margin: 1rem 0; }