/* ========================================================================= Cocooning Spa – Accueil v2 (signature) Tout est limité à body.csp-v2 : aucune incidence sur le reste du site. ========================================================================= */ body.csp-v2 { --v2-navy: #0a1628; --v2-navy-2: #0e1d3b; --v2-ink: #f4efe2; --v2-text: #cbd2de; --v2-muted: #9fabbf; --v2-gold: #d4b85c; --v2-gold-l: #f0d98a; --v2-line: rgba(212, 184, 92, .2); --v2-serif: 'Cormorant Garamond', Georgia, serif; --v2-sans: 'Inter', system-ui, sans-serif; --v2-ease: cubic-bezier(.2, .7, .2, 1); } /* ---------- En-têtes de section : chapitres numérotés ---------- */ body.csp-v2 .csp-v2-head { max-width: 1220px; margin: 0 auto 3.2rem; padding: 0 1.25rem; display: flex; flex-direction: column; gap: .9rem; } body.csp-v2 .csp-v2-head--center { align-items: center; text-align: center; } body.csp-v2 .csp-v2-head--split { flex-direction: row; justify-content: space-between; align-items: flex-end; gap: 3rem; } body.csp-v2 .csp-v2-head__main { display: flex; flex-direction: column; gap: .9rem; } body.csp-v2 .csp-v2-label { display: inline-flex; align-items: center; gap: .8rem; font: 600 .75rem/1 var(--v2-sans); letter-spacing: .24em; text-transform: uppercase; color: var(--v2-gold); } body.csp-v2 .csp-v2-label__no { font: italic 400 1.15rem/1 var(--v2-serif); letter-spacing: 0; } body.csp-v2 .csp-v2-label__bar { width: 2.6rem; height: 1px; background: var(--v2-gold); } body.csp-v2 .csp-v2-title { margin: 0; font: 500 clamp(2.3rem, 4.6vw, 3.6rem)/1.04 var(--v2-serif); color: var(--v2-ink); letter-spacing: 0; text-transform: none; } body.csp-v2 .csp-v2-title em { font-style: italic; color: var(--v2-gold); } body.csp-v2 .csp-v2-intro { margin: 0; max-width: 34rem; font: 400 1rem/1.7 var(--v2-sans); color: var(--v2-text); } body.csp-v2 .csp-v2-kicker { font: 600 .7rem/1.3 var(--v2-sans); letter-spacing: .2em; text-transform: uppercase; color: var(--v2-gold); } /* Sections du thème : numérotation de chapitre */ body.csp-v2 .csp-videos__title { font-family: var(--v2-serif) !important; font-weight: 500 !important; color: var(--v2-ink) !important; letter-spacing: 0 !important; } body.csp-v2 .csp-videos__subtitle { color: var(--v2-text) !important; font-size: 1rem !important; } /* Lisibilité des petites mentions du thème */ body.csp-v2 .csp-option-item__unit, body.csp-v2 .csp-options small { color: #b8c2d2 !important; font-size: .82rem !important; } /* ---------- Hero ---------- */ body.csp-v2 .csp-hero--v2 { position: relative !important; overflow: hidden !important; display: flex !important; flex-direction: column !important; justify-content: center !important; align-items: center !important; height: auto !important; min-height: 100svh; padding-bottom: 2rem !important; box-sizing: border-box; } body.csp-v2 .csp-v2-hero__media { position: absolute; inset: -3%; background-image: var(--csp-hero-bg-desktop); background-size: cover; background-position: center; animation: v2-kb 24s ease-in-out infinite alternate; z-index: 0; will-change: transform; } @media (max-width: 640px) { body.csp-v2 .csp-v2-hero__media { background-image: var(--csp-hero-bg-mobile); } } @keyframes v2-kb { from { transform: scale(1); } to { transform: scale(1.07); } } body.csp-v2 .csp-hero--v2 .csp-v2-hero__veil { background: radial-gradient(ellipse 65% 55% at 50% 42%, rgba(10, 22, 40, .12) 0%, rgba(10, 22, 40, .38) 55%, rgba(6, 14, 30, .82) 100%), linear-gradient(180deg, rgba(6, 14, 30, .55) 0%, rgba(6, 14, 30, 0) 22%, rgba(6, 14, 30, 0) 62%, rgba(6, 14, 30, .9) 100%) !important; z-index: 1; } body.csp-v2 .csp-hero--v2 .csp-hero__content { position: relative; z-index: 2; padding-bottom: 0; } body.csp-v2 .csp-v2-scroll { display: none !important; } body.csp-v2 .csp-v2-stats { position: relative; z-index: 3; margin: 2.6rem auto 0; width: min(1100px, calc(100% - 2.5rem)); display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.15rem 2rem; border: 1px solid rgba(240, 217, 138, .28); border-radius: 1.25rem; background: rgba(8, 18, 38, .45); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-sizing: border-box; } body.csp-v2 .csp-v2-stats__item { flex: 1; display: flex; flex-direction: column; align-items: center; gap: .35rem; text-align: center; } body.csp-v2 .csp-v2-stats__value { font: italic 400 clamp(1.7rem, 2.6vw, 2.4rem)/1 var(--v2-serif); color: #f4e3a8; } body.csp-v2 .csp-v2-stats__label { font: 500 .7rem/1.3 var(--v2-sans); letter-spacing: .18em; text-transform: uppercase; color: #e3e7ee; } body.csp-v2 .csp-v2-stats__sep { color: var(--v2-gold); font-size: .75rem; } @media (max-width: 760px) { body.csp-v2 .csp-hero--v2 { flex-direction: column; justify-content: center; } body.csp-v2 .csp-hero--v2 .csp-hero__content { padding-bottom: 1.5rem; } body.csp-v2 .csp-v2-scroll { display: none !important; } body.csp-v2 .csp-v2-stats { position: relative; left: auto; bottom: auto; transform: none; width: calc(100% - 2rem); margin: 0 auto 1.5rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem .5rem; padding: 1rem; } body.csp-v2 .csp-v2-stats__sep { display: none; } } /* ---------- Équipements ---------- */ body.csp-v2 .csp-v2-equip { background: var(--v2-navy); } body.csp-v2 .csp-v2-equip__grid { max-width: 1220px; margin: 0 auto; padding: 0 1.25rem; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.6rem; box-sizing: border-box; } body.csp-v2 .csp-v2-equip__card { display: flex; flex-direction: column; background: var(--v2-navy-2); border: 1px solid var(--v2-line); border-radius: 1.4rem; overflow: hidden; transition: transform .45s var(--v2-ease), box-shadow .45s var(--v2-ease), border-color .45s; } body.csp-v2 .csp-v2-equip__card:hover { transform: translateY(-6px); box-shadow: 0 30px 60px rgba(0, 0, 0, .35); border-color: rgba(212, 184, 92, .45); } body.csp-v2 .csp-v2-equip__card--feature { grid-column: span 2; } body.csp-v2 .csp-v2-equip__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: #0c1a36; } body.csp-v2 .csp-v2-equip__card--feature .csp-v2-equip__media { aspect-ratio: 16 / 9; } body.csp-v2 .csp-v2-equip__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.04); transition: opacity 1.4s ease, transform 6s ease; } body.csp-v2 .csp-v2-equip__img.is-on { opacity: 1; transform: scale(1); } body.csp-v2 .csp-v2-equip__dots { position: absolute; right: 1rem; bottom: .9rem; display: flex; gap: .35rem; z-index: 2; } body.csp-v2 .csp-v2-equip__dots span { width: 1.1rem; height: 2px; background: rgba(240, 217, 138, .45); transition: background .4s; } body.csp-v2 .csp-v2-equip__dots span.is-on { background: var(--v2-gold-l); } body.csp-v2 .csp-v2-equip__body { padding: 1.6rem 1.75rem 1.9rem; display: flex; flex-direction: column; gap: .7rem; } body.csp-v2 .csp-v2-equip__top { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; } body.csp-v2 .csp-v2-equip__no { font: italic 400 1.1rem/1 var(--v2-serif); color: var(--v2-gold); } body.csp-v2 .csp-v2-equip__bar { width: 1.6rem; height: 1px; background: var(--v2-gold); } body.csp-v2 .csp-v2-equip__badge { font: 600 .68rem/1.2 var(--v2-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--v2-gold); } body.csp-v2 .csp-v2-equip__title { margin: 0; font: 500 1.9rem/1.1 var(--v2-serif); color: var(--v2-ink); } body.csp-v2 .csp-v2-equip__card--feature .csp-v2-equip__title { font-size: 2.4rem; } body.csp-v2 .csp-v2-equip__desc { margin: 0; font: 400 .95rem/1.65 var(--v2-sans); color: var(--v2-text); } body.csp-v2 .csp-v2-equip__tags { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .3rem; } body.csp-v2 .csp-v2-chip { font: 500 .75rem/1 var(--v2-sans); color: #e4e8ef; border: 1px solid rgba(212, 184, 92, .3); border-radius: 999px; padding: .45rem .75rem; } @media (max-width: 960px) { body.csp-v2 .csp-v2-equip__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 680px) { body.csp-v2 .csp-v2-head--split { flex-direction: column; align-items: flex-start; gap: 1rem; } body.csp-v2 .csp-v2-equip__grid { grid-template-columns: 1fr; } body.csp-v2 .csp-v2-equip__card--feature { grid-column: auto; } body.csp-v2 .csp-v2-equip__card--feature .csp-v2-equip__title { font-size: 2rem; } } /* ---------- Tarifs ---------- */ body.csp-v2 .csp-v2-tarifs { background: var(--v2-navy); } body.csp-v2 .csp-v2-seg { display: inline-flex; margin-top: .6rem; padding: .35rem; border: 1px solid rgba(212, 184, 92, .35); border-radius: 999px; background: rgba(255, 255, 255, .03); } body.csp-v2 .csp-v2-seg__btn { border: 0; cursor: pointer; min-height: 3rem; padding: 0 1.6rem; border-radius: 999px; background: transparent; color: var(--v2-text); font: 600 .75rem/1 var(--v2-sans); letter-spacing: .16em; text-transform: uppercase; transition: background .3s, color .3s; } body.csp-v2 .csp-v2-seg__btn.is-on { background: var(--v2-gold); color: var(--v2-navy); } body.csp-v2 .csp-v2-panel { max-width: 1220px; margin: 0 auto; padding: 0 1.25rem; display: flex; flex-direction: column; gap: 1.8rem; box-sizing: border-box; } body.csp-v2 .csp-v2-panel[hidden] { display: none; } body.csp-v2 .csp-v2-panel.is-on { animation: v2-in .6s var(--v2-ease) both; } @keyframes v2-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } } body.csp-v2 .csp-v2-slots { display: flex; flex-direction: column; gap: .8rem; } body.csp-v2 .csp-v2-slots__head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; } body.csp-v2 .csp-v2-slots__lead { font: 400 .85rem/1.5 var(--v2-sans); color: var(--v2-muted); } body.csp-v2 .csp-v2-slots__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--v2-line); border-radius: 1.1rem; background: rgba(255, 255, 255, .02); } body.csp-v2 .csp-v2-slots__list li { display: flex; flex-direction: column; align-items: center; gap: .3rem; padding: 1rem .5rem; } body.csp-v2 .csp-v2-slots__list li + li { border-left: 1px solid var(--v2-line); } body.csp-v2 .csp-v2-slots__list span { font: 600 .68rem/1 var(--v2-sans); letter-spacing: .18em; text-transform: uppercase; color: var(--v2-gold); } body.csp-v2 .csp-v2-slots__list strong { font: italic 400 1.5rem/1.1 var(--v2-serif); color: var(--v2-ink); } body.csp-v2 .csp-v2-slots__note { margin: 0; text-align: center; font: italic 400 1rem/1.4 var(--v2-serif); color: var(--v2-muted); } body.csp-v2 .csp-v2-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.6rem; align-items: stretch; } body.csp-v2 .csp-v2-card { position: relative; display: flex; flex-direction: column; gap: .35rem; padding: 2rem 2.1rem; border-radius: 1.5rem; background: linear-gradient(170deg, #13295a, #0d1c3b); border: 1px solid rgba(212, 184, 92, .25); transition: transform .35s ease, box-shadow .35s ease, border-color .35s; } body.csp-v2 .csp-v2-card:hover { transform: translateY(-6px); box-shadow: 0 30px 60px rgba(0, 0, 0, .35); border-color: rgba(212, 184, 92, .6); } body.csp-v2 .csp-v2-card.is-pop { border-color: rgba(212, 184, 92, .5); } body.csp-v2 .csp-v2-card__pop { position: absolute; top: -.8rem; left: 2.1rem; font: 600 .65rem/1 var(--v2-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--v2-navy); background: var(--v2-gold); border-radius: 999px; padding: .45rem .8rem; } body.csp-v2 .csp-v2-card__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: .6rem; } body.csp-v2 .csp-v2-card__title { margin: 0; font: 500 2rem/1.05 var(--v2-serif); color: var(--v2-ink); } body.csp-v2 .csp-v2-card__sub { margin: .35rem 0 0; font: 400 .85rem/1.45 var(--v2-sans); color: var(--v2-text); } body.csp-v2 .csp-v2-card__pour { flex-shrink: 0; font: 600 .62rem/1 var(--v2-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--v2-gold-l); border: 1px solid rgba(212, 184, 92, .5); border-radius: 999px; padding: .45rem .7rem; white-space: nowrap; } body.csp-v2 .csp-v2-row { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .95rem 0; border-top: 1px solid rgba(212, 184, 92, .15); } body.csp-v2 .csp-v2-row__l { display: flex; flex-direction: column; gap: .2rem; } body.csp-v2 .csp-v2-row__name { font: 600 1rem/1.3 var(--v2-sans); color: var(--v2-ink); } body.csp-v2 .csp-v2-row__supp { font: 400 .8rem/1.4 var(--v2-sans); color: #b8c2d2; } body.csp-v2 .csp-v2-row__price { font: italic 500 2.3rem/1 var(--v2-serif); color: var(--v2-gold-l); white-space: nowrap; } body.csp-v2 .csp-v2-card__info { margin: .6rem 0 .2rem; padding: .7rem .9rem; border-radius: .8rem; background: rgba(212, 184, 92, .1); font: 500 .88rem/1.4 var(--v2-sans); color: var(--v2-gold-l); } body.csp-v2 .csp-v2-card .csp-v2-kicker { margin-top: .9rem; } body.csp-v2 .csp-v2-list { list-style: none; margin: .4rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .45rem; } body.csp-v2 .csp-v2-list--2col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .45rem 1.2rem; } body.csp-v2 .csp-v2-list li { position: relative; padding-left: 1.2rem; font: 500 .9rem/1.45 var(--v2-sans); color: #e4e8ef; } body.csp-v2 .csp-v2-list li::before { content: "✦"; position: absolute; left: 0; top: .1rem; font-size: .65rem; color: var(--v2-gold); } body.csp-v2 .csp-v2-card__cap { margin-top: .9rem; padding: .85rem 1rem; border-radius: .9rem; background: rgba(212, 184, 92, .08); } body.csp-v2 .csp-v2-card__cap .csp-v2-kicker { margin-top: 0; } body.csp-v2 .csp-v2-card__cap p { margin: .35rem 0 0; font: 500 .9rem/1.5 var(--v2-sans); color: var(--v2-ink); } body.csp-v2 .csp-v2-tarifs__duo { display: grid; grid-template-columns: 1fr 1.15fr; gap: 1.6rem; } body.csp-v2 .csp-v2-box { padding: 1.5rem 1.8rem; border-radius: 1.2rem; border: 1px solid var(--v2-line); display: flex; flex-direction: column; gap: .6rem; } body.csp-v2 .csp-v2-groupe { display: flex; align-items: center; gap: 1.3rem; padding: 1.5rem 1.8rem; border-radius: 1.2rem; background: linear-gradient(90deg, rgba(212, 184, 92, .2), rgba(212, 184, 92, .06)); border: 1px solid rgba(212, 184, 92, .45); } body.csp-v2 .csp-v2-groupe__icon { flex-shrink: 0; color: var(--v2-gold-l); } body.csp-v2 .csp-v2-groupe__txt { display: flex; flex-direction: column; gap: .3rem; } body.csp-v2 .csp-v2-groupe__title { font: 500 1.5rem/1.15 var(--v2-serif); color: var(--v2-ink); } body.csp-v2 .csp-v2-groupe__desc { font: 500 .95rem/1.55 var(--v2-sans); color: var(--v2-gold-l); } body.csp-v2 .csp-v2-multinuit p { margin: 0; font: 400 .95rem/1.65 var(--v2-sans); color: var(--v2-text); } body.csp-v2 .csp-v2-info { align-self: flex-start; display: inline-flex; align-items: center; gap: .5rem; padding: .3rem 0; background: none; border: 0; cursor: pointer; font: 500 .82rem/1 var(--v2-sans); color: var(--v2-muted); } body.csp-v2 .csp-v2-info:hover { color: var(--v2-text); } body.csp-v2 .csp-v2-info__i { width: 1.1rem; height: 1.1rem; border-radius: 50%; border: 1px solid currentColor; display: inline-flex; align-items: center; justify-content: center; font: italic 600 .7rem/1 var(--v2-serif); } body.csp-v2 .csp-v2-multinuit .csp-v2-info__text { font-size: .85rem; color: var(--v2-muted); } body.csp-v2 .csp-v2-tarifs__cta { display: flex; justify-content: center; align-items: center; gap: 1.4rem 2rem; flex-wrap: wrap; padding-top: .4rem; } body.csp-v2 .csp-v2-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 3.3rem; padding: 0 2.1rem; border-radius: 999px; background: var(--v2-gold); color: var(--v2-navy) !important; font: 600 .8rem/1 var(--v2-sans); letter-spacing: .16em; text-transform: uppercase; text-decoration: none; transition: background .3s, transform .3s; } body.csp-v2 .csp-v2-btn:hover { background: #e3c86c; transform: translateY(-2px); } body.csp-v2 .csp-v2-btn--ghost { background: transparent; color: var(--v2-gold-l) !important; border: 1px solid rgba(212, 184, 92, .55); align-self: flex-start; } body.csp-v2 .csp-v2-btn--ghost:hover { background: rgba(212, 184, 92, .1); } body.csp-v2 .csp-v2-link { font: 600 .75rem/1 var(--v2-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--v2-gold-l) !important; text-decoration: none; border-bottom: 1px solid rgba(240, 217, 138, .45); padding-bottom: .35rem; } body.csp-v2 .csp-v2-share { display: inline-flex; align-items: center; gap: .9rem; font: 500 .8rem/1 var(--v2-sans); color: var(--v2-muted); } body.csp-v2 .csp-v2-share a { color: var(--v2-text) !important; text-decoration: none; border-bottom: 1px solid rgba(203, 210, 222, .35); padding-bottom: .2rem; } @media (max-width: 860px) { body.csp-v2 .csp-v2-cards, body.csp-v2 .csp-v2-tarifs__duo { grid-template-columns: 1fr; } body.csp-v2 .csp-v2-slots__list strong { font-size: 1.15rem; } body.csp-v2 .csp-v2-card { padding: 1.7rem 1.4rem; } body.csp-v2 .csp-v2-card__head { flex-direction: column; gap: .6rem; } body.csp-v2 .csp-v2-row__price { font-size: 2rem; } body.csp-v2 .csp-v2-list--2col { grid-template-columns: 1fr; } body.csp-v2 .csp-v2-share { flex-wrap: wrap; justify-content: center; } } /* ---------- Avis : livre d'or ---------- */ body.csp-v2 .csp-v2-avis { background: radial-gradient(ellipse 55% 65% at 70% 50%, #13295a 0%, var(--v2-navy) 72%); overflow: hidden; } body.csp-v2 .csp-v2-avis__wrap { max-width: 1220px; margin: 0 auto; padding: 0 1.25rem; display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: 5rem; align-items: center; box-sizing: border-box; } body.csp-v2 .csp-v2-avis__side { display: flex; flex-direction: column; gap: 1.2rem; } body.csp-v2 .csp-v2-stars { color: var(--v2-gold); letter-spacing: .2em; } body.csp-v2 .csp-v2-sources { list-style: none; margin: 0; padding: 0; } body.csp-v2 .csp-v2-sources li { display: flex; align-items: center; gap: .8rem; padding: .85rem 0; border-top: 1px solid rgba(212, 184, 92, .18); font: 500 .88rem/1.3 var(--v2-sans); color: #e4e8ef; } body.csp-v2 .csp-v2-sources li:last-child { border-bottom: 1px solid rgba(212, 184, 92, .18); } body.csp-v2 .csp-v2-sources li > span:nth-child(2), body.csp-v2 .csp-v2-sources li > a { flex: 1; color: #e4e8ef; text-decoration: none; } body.csp-v2 .csp-v2-sources strong { font: italic 500 1.15rem/1 var(--v2-serif); color: var(--v2-gold-l); } body.csp-v2 .csp-v2-mono { width: 1.8rem; height: 1.8rem; border-radius: 50%; border: 1px solid rgba(212, 184, 92, .55); display: inline-flex; align-items: center; justify-content: center; font: 600 .8rem/1 var(--v2-sans); color: var(--v2-gold-l); } body.csp-v2 .csp-v2-book { min-width: 0; display: flex; flex-direction: column; gap: 2rem; } body.csp-v2 .csp-v2-book__stack { position: relative; height: 27rem; touch-action: pan-y; } body.csp-v2 .csp-v2-book__card { position: absolute; left: 0; top: 0; width: min(41rem, calc(100% - 5.5rem)); height: 25rem; box-sizing: border-box; padding: 2.6rem 2.9rem; border-radius: 1.5rem; background: linear-gradient(160deg, #16305f 0%, #0f2147 55%, #0c1a38 100%); border: 1px solid rgba(212, 184, 92, .28); box-shadow: 0 30px 60px rgba(0, 0, 0, .35); display: flex; flex-direction: column; gap: 1.1rem; overflow: hidden; opacity: 0; transform: translate(-7rem, .6rem) rotate(-5deg); transition: transform 1s var(--v2-ease), opacity 1s ease; pointer-events: none; } body.csp-v2 .csp-v2-book__card.p0 { opacity: 1; transform: none; z-index: 4; pointer-events: auto; } body.csp-v2 .csp-v2-book__card.p1 { opacity: .6; transform: translate(2.7rem, 1rem) rotate(2deg); z-index: 3; } body.csp-v2 .csp-v2-book__card.p2 { opacity: .3; transform: translate(5.3rem, 2rem) rotate(4deg); z-index: 2; } body.csp-v2 .csp-v2-book__top { display: flex; justify-content: space-between; align-items: center; gap: 1rem; } body.csp-v2 .csp-v2-book__tag { font: 600 .65rem/1 var(--v2-sans); letter-spacing: .18em; text-transform: uppercase; color: var(--v2-navy); background: var(--v2-gold); border-radius: 999px; padding: .45rem .85rem; } body.csp-v2 .csp-v2-book__src { display: inline-flex; align-items: center; gap: .6rem; font: 500 .75rem/1 var(--v2-sans); color: var(--v2-text); } body.csp-v2 .csp-v2-book__quote { margin: .3rem 0 0; padding: 0; border: 0; flex: 1; font: italic 400 clamp(1.25rem, 1.9vw, 1.7rem)/1.42 var(--v2-serif); color: #f8f3e6; overflow: hidden; } body.csp-v2 .csp-v2-book__who { display: flex; align-items: center; gap: .85rem; } body.csp-v2 .csp-v2-book__ini { width: 2.8rem; height: 2.8rem; border-radius: 50%; background: var(--v2-gold); color: var(--v2-navy); display: inline-flex; align-items: center; justify-content: center; font: italic 600 1.3rem/1 var(--v2-serif); } body.csp-v2 .csp-v2-book__name { display: flex; flex-direction: column; gap: .2rem; font: 600 .92rem/1.2 var(--v2-sans); color: var(--v2-ink); } body.csp-v2 .csp-v2-book__name small { font: 400 .78rem/1.2 var(--v2-sans); color: #aab4c5; } body.csp-v2 .csp-v2-book__mark { position: absolute; right: 2.2rem; bottom: -2.8rem; font: 400 14rem/1 var(--v2-serif); color: rgba(212, 184, 92, .12); pointer-events: none; } body.csp-v2 .csp-v2-book__nav { display: flex; align-items: center; gap: 1rem; width: min(41rem, calc(100% - 5.5rem)); } body.csp-v2 .csp-v2-round { width: 3rem; height: 3rem; border-radius: 50%; border: 1px solid rgba(212, 184, 92, .45); background: transparent; color: var(--v2-gold-l); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background .3s; } body.csp-v2 .csp-v2-round:hover { background: rgba(212, 184, 92, .12); } body.csp-v2 .csp-v2-book__count { min-width: 4.5rem; font: italic 500 1.4rem/1 var(--v2-serif); color: var(--v2-gold-l); } body.csp-v2 .csp-v2-book__track { flex: 1; height: 2px; background: rgba(212, 184, 92, .2); position: relative; overflow: hidden; } body.csp-v2 .csp-v2-book__run { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--v2-gold); } body.csp-v2 .csp-v2-book__run.is-running { animation: v2-run var(--v2-delay, 7s) linear both; } body.csp-v2 .csp-v2-book.is-paused .csp-v2-book__run { animation-play-state: paused; } @keyframes v2-run { from { width: 0; } to { width: 100%; } } @media (max-width: 960px) { body.csp-v2 .csp-v2-avis__wrap { grid-template-columns: 1fr; gap: 3rem; } } @media (max-width: 600px) { body.csp-v2 .csp-v2-book__stack { height: 25rem; } body.csp-v2 .csp-v2-book__card { width: calc(100% - 2.2rem); height: 23.5rem; padding: 1.9rem 1.6rem; } body.csp-v2 .csp-v2-book__card.p1 { transform: translate(1.1rem, .7rem) rotate(1.5deg); } body.csp-v2 .csp-v2-book__card.p2 { transform: translate(2.1rem, 1.4rem) rotate(3deg); } body.csp-v2 .csp-v2-book__nav { width: 100%; } } /* ---------- Réseaux ---------- */ body.csp-v2 .csp-v2-social { max-width: 1220px; margin: 0 auto; padding: 3.5rem 1.25rem 5rem; display: flex; flex-direction: column; align-items: center; gap: 1.3rem; text-align: center; box-sizing: border-box; } body.csp-v2 .csp-v2-social__rule { width: 100%; display: flex; align-items: center; gap: 1.4rem; } body.csp-v2 .csp-v2-social__rule > span:first-child, body.csp-v2 .csp-v2-social__rule > span:last-child { flex: 1; height: 1px; background: linear-gradient(90deg, rgba(212, 184, 92, 0), rgba(212, 184, 92, .5)); } body.csp-v2 .csp-v2-social__rule > span:last-child { background: linear-gradient(90deg, rgba(212, 184, 92, .5), rgba(212, 184, 92, 0)); } body.csp-v2 .csp-v2-social__handle { font: italic 400 clamp(2.2rem, 5vw, 4rem)/1 var(--v2-serif); color: var(--v2-ink) !important; text-decoration: none; transition: color .3s; } body.csp-v2 .csp-v2-social__handle:hover { color: var(--v2-gold-l) !important; } body.csp-v2 .csp-v2-social__links { display: flex; gap: 2.4rem; flex-wrap: wrap; justify-content: center; } body.csp-v2 .csp-v2-social__links a { font: 600 .75rem/1 var(--v2-sans); letter-spacing: .22em; text-transform: uppercase; color: #e3e7ee !important; text-decoration: none; padding: .8rem .2rem; border-bottom: 1px solid transparent; transition: color .3s, border-color .3s; } body.csp-v2 .csp-v2-social__links a:hover { color: var(--v2-gold-l) !important; border-bottom-color: rgba(240, 217, 138, .6); } /* ---------- Éléments flottants : une seule capsule ---------- */ body.csp-v2 .csp-floating-cta, body.csp-v2 .csp-fab, body.csp-v2 .csp-back-to-top, body.csp-v2 .csp-share-fab, html body.csp-v2 #csp-back-to-top.csp-back-to-top, html body.csp-v2 .csp-fab.csp-fab, html body.csp-v2 .csp-floating-cta.csp-floating-cta, html body.csp-v2 .csp-share-fab.csp-share-fab { display: none !important; } body.csp-v2 .csp-v2-dock { display: none; } @media (max-width: 900px) { body.csp-v2 .csp-v2-dock { display: flex; position: fixed; z-index: 9990; left: 1rem; right: 1rem; bottom: calc(1rem + env(safe-area-inset-bottom)); height: 4rem; align-items: center; gap: .5rem; padding: .45rem; box-sizing: border-box; border-radius: 999px; background: rgba(12, 26, 54, .72); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border: 1px solid rgba(240, 217, 138, .35); box-shadow: 0 18px 40px rgba(0, 0, 0, .45); transform: translateY(150%); opacity: 0; transition: transform .5s var(--v2-ease), opacity .5s; } body.csp-v2 .csp-v2-dock.is-on { transform: none; opacity: 1; } body.csp-v2 .csp-v2-dock__main { flex: 1; height: 3.1rem; border-radius: 999px; background: var(--v2-gold); color: var(--v2-navy) !important; display: flex; align-items: center; justify-content: center; gap: .6rem; font: 600 .8rem/1 var(--v2-sans); letter-spacing: .16em; text-transform: uppercase; text-decoration: none; } body.csp-v2 .csp-v2-dock__contact { width: 3.1rem; height: 3.1rem; border-radius: 50%; border: 1px solid rgba(240, 217, 138, .4); background: transparent; color: var(--v2-gold-l); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; } body.csp-v2 .csp-v2-dock__menu { position: absolute; right: .3rem; bottom: calc(100% + .7rem); display: flex; flex-direction: column; min-width: 12rem; padding: .4rem; border-radius: 1.1rem; background: rgba(12, 26, 54, .95); border: 1px solid rgba(240, 217, 138, .35); box-shadow: 0 18px 40px rgba(0, 0, 0, .45); } body.csp-v2 .csp-v2-dock__menu[hidden] { display: none; } body.csp-v2 .csp-v2-dock__menu a { padding: .85rem 1rem; border-radius: .7rem; font: 500 .9rem/1 var(--v2-sans); color: var(--v2-ink) !important; text-decoration: none; } body.csp-v2 .csp-v2-dock__menu a:hover { background: rgba(212, 184, 92, .12); } body.csp-v2 { padding-bottom: 0; } } @media (prefers-reduced-motion: reduce) { body.csp-v2 .csp-v2-hero__media { animation: none; } body.csp-v2 .csp-v2-book__card, body.csp-v2 .csp-v2-equip__img { transition: none; } } /* Mobile : créneaux empilés, étiquettes d'avis sur une ligne */ body.csp-v2 .csp-v2-book__top { flex-wrap: wrap; } body.csp-v2 .csp-v2-book__tag { white-space: nowrap; } @media (max-width: 600px) { body.csp-v2 .csp-v2-slots__list { grid-template-columns: 1fr; } body.csp-v2 .csp-v2-slots__list li { flex-direction: row; justify-content: space-between; align-items: baseline; padding: .85rem 1.1rem; } body.csp-v2 .csp-v2-slots__list li + li { border-left: 0; border-top: 1px solid var(--v2-line); } body.csp-v2 .csp-v2-slots__list strong { font-size: 1.3rem; } body.csp-v2 .csp-v2-book__tag { font-size: .6rem; letter-spacing: .12em; } } /* Titres : même rythme que les sections du thème (ligne 2 en italique doré) */ body.csp-v2 .csp-v2-head .csp-section__label { align-self: flex-start; } body.csp-v2 .csp-v2-head--center .csp-section__label { align-self: center; } body.csp-v2 .csp-v2-equip__no, body.csp-v2 .csp-v2-equip__bar { display: none; } body.csp-v2 .csp-videos__header::before { content: "En vidéo"; display: inline-flex; align-items: center; font: 800 .72rem/1.1 var(--v2-sans); letter-spacing: .15em; text-transform: uppercase; color: var(--v2-gold-l); padding: .29rem .86rem .29rem 2.7rem; border: 1px solid rgba(212, 184, 92, .22); border-radius: 999px; background: linear-gradient(90deg, rgba(0, 0, 0, 0), #f0d98a) .86rem 50% / 1.55rem 1px no-repeat, rgba(212, 184, 92, .075); margin-bottom: .9rem; } body.csp-v2 .csp-v2-head .csp-section__label, body.csp-v2 .csp-v2-avis__side .csp-section__label { display: inline-flex; align-items: center; gap: .5rem; font: 800 .72rem/1.1 var(--v2-sans); letter-spacing: .15em; text-transform: uppercase; color: var(--v2-gold-l); padding: .29rem .86rem; border: 1px solid rgba(212, 184, 92, .22); border-radius: 999px; background: rgba(212, 184, 92, .075); margin: 0; align-self: flex-start; } body.csp-v2 .csp-v2-head--center .csp-section__label { align-self: center; } body.csp-v2 .csp-v2-head .csp-section__label::before, body.csp-v2 .csp-v2-avis__side .csp-section__label::before { content: ""; display: block; width: 1.55rem; height: 1px; background: linear-gradient(90deg, rgba(0, 0, 0, 0), #f0d98a); } body.csp-v2 .csp-v2-avis__side .csp-v2-title { font-size: clamp(2rem, 3.1vw, 2.75rem); } body.csp-v2 .csp-v2-book__card { height: auto; min-height: 22rem; } body.csp-v2 .csp-v2-book__quote { overflow: visible; font-size: clamp(1.2rem, 1.6vw, 1.5rem); } /* ========================================================================= Système de titres unifié (sections du thème + sections v2) ========================================================================= */ body.csp-v2 .csp-section__header { margin-bottom: 3.2rem; } body.csp-v2 .csp-section__title, body.csp-v2 .csp-v2-title, body.csp-v2 .csp-videos__title { font-family: var(--v2-serif) !important; font-weight: 500 !important; font-size: clamp(2.4rem, 4.8vw, 3.7rem) !important; line-height: 1.04 !important; letter-spacing: -.005em !important; color: var(--v2-ink) !important; text-transform: none !important; } body.csp-v2 .csp-section__title .text-italic, body.csp-v2 .csp-v2-title em { font-style: italic !important; font-weight: 400 !important; color: var(--v2-gold) !important; } body.csp-v2 .csp-section__desc, body.csp-v2 .csp-v2-intro, body.csp-v2 .csp-videos__subtitle { font: 400 1.02rem/1.75 var(--v2-sans) !important; color: var(--v2-text) !important; } /* Filet doré sous chaque titre : centré par défaut, aligné à gauche seulement quand le titre l'est. */ html body.csp-v2 :is(.csp-section__title, .csp-v2-title, .csp-videos__title)::after { content: ""; display: block; width: 4rem; height: 1px; margin: 1.4rem auto 0; background: linear-gradient(90deg, rgba(212, 184, 92, 0), var(--v2-gold), rgba(212, 184, 92, 0)); } html body.csp-v2 :is(#histoire .csp-section__title, .csp-v2-head:not(.csp-v2-head--center) .csp-v2-title, .csp-v2-avis__side .csp-v2-title, .csp-v2-partners--solo .csp-v2-title)::after { margin-left: 0; background: linear-gradient(90deg, var(--v2-gold), rgba(212, 184, 92, 0)); } /* Titres courts sur une seule ligne ; le navigateur équilibre les retours à la ligne sur mobile. */ html body.csp-v2 :is(.csp-section__title, .csp-v2-title, .csp-videos__title) { text-wrap: balance; } html body.csp-v2 :is(#options, #galerie) .csp-section__title { max-width: none !important; } html body.csp-v2 :is(#options, #galerie) .csp-section__title br { display: none; } body.csp-v2 .csp-v2-avis__side .csp-v2-title { font-size: clamp(2rem, 3.1vw, 2.75rem) !important; } body.csp-v2 #histoire .csp-section__title { font-size: clamp(2.1rem, 3.3vw, 2.9rem) !important; max-width: none !important; width: auto !important; } /* ========================================================================= v0.1.3 – cohérence globale ========================================================================= */ /* Respiration des sections (rythme « grand hôtel ») */ /* Un seul rythme vertical pour toutes les sections (voir --v2-section). */ html body.csp-v2 { --v2-section: clamp(4rem, 6.5vw, 6rem); } html body.csp-v2 main.csp-v2-main > :is(section.csp-section, section.csp-videos) { padding-top: var(--v2-section) !important; padding-bottom: var(--v2-section) !important; } /* Une seule taille de titre pour toutes les sections */ html body.csp-v2 .csp-section__title, html body.csp-v2 .csp-v2-title, html body.csp-v2 .csp-videos__title, html body.csp-v2 #histoire .csp-section__title, html body.csp-v2 .csp-v2-avis__side .csp-v2-title { font-size: clamp(2.3rem, 4.2vw, 3.3rem) !important; font-weight: 500 !important; font-family: var(--v2-serif) !important; line-height: 1.06 !important; letter-spacing: -.005em !important; color: var(--v2-ink) !important; } html body.csp-v2 .csp-videos__title em { font-style: italic; font-weight: 400; color: var(--v2-gold); } html body.csp-v2 .csp-v2-avis__wrap { grid-template-columns: 420px minmax(0, 1fr); gap: 4.5rem; } @media (max-width: 960px) { html body.csp-v2 .csp-v2-avis__wrap { grid-template-columns: 1fr; } } /* Boutons : même dessin que ceux du thème (rectangles dorés, Montserrat espacé) */ body.csp-v2 .csp-v2-btn { border-radius: 0; min-height: 3.55rem; padding: 0 2.5rem; font: 500 .78rem/1 Montserrat, var(--v2-sans); letter-spacing: .18em; background: linear-gradient(135deg, #c9a84c, #b8963f); color: var(--v2-navy) !important; } body.csp-v2 .csp-v2-btn:hover { background: linear-gradient(135deg, #d6b65a, #c4a24a); } body.csp-v2 .csp-v2-btn--ghost { background: transparent; border: 1px solid rgba(232, 224, 212, .45); color: rgba(232, 224, 212, .9) !important; } body.csp-v2 .csp-v2-btn--ghost:hover { background: rgba(212, 184, 92, .1); } body.csp-v2 .csp-v2-seg, body.csp-v2 .csp-v2-seg__btn { border-radius: 0; } body.csp-v2 .csp-v2-seg__btn { font-family: Montserrat, var(--v2-sans); font-weight: 500; } body.csp-v2 .csp-v2-seg__btn.is-on { background: linear-gradient(135deg, #c9a84c, #b8963f); } /* Tous les boutons du thème au même dessin que ceux de l'accueil */ html body.csp-v2 .btn-csp { border-radius: 0 !important; font-family: Montserrat, var(--v2-sans) !important; font-weight: 500 !important; letter-spacing: .18em !important; } /* ========================================================================= v0.1.4 – Équipements « sommaire », partenaires, navigation, carte ========================================================================= */ body.csp-v2 .csp-v2-index { max-width: 1220px; margin: 0 auto; padding: 0 1.25rem; display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 3.5rem; align-items: start; box-sizing: border-box; } body.csp-v2 .csp-v2-index__nav { display: flex; flex-direction: column; border-bottom: 1px solid rgba(212, 184, 92, .16); } body.csp-v2 .csp-v2-index__item { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: .35rem; width: 100%; padding: 1.25rem 0; background: none; border: 0; border-top: 1px solid rgba(212, 184, 92, .16); cursor: pointer; text-align: left; color: inherit; } body.csp-v2 .csp-v2-index__name { font: 400 1.85rem/1.1 var(--v2-serif); color: rgba(244, 239, 226, .45); transition: color .4s, transform .4s var(--v2-ease); } body.csp-v2 .csp-v2-index__item:hover .csp-v2-index__name { color: rgba(244, 239, 226, .8); } body.csp-v2 .csp-v2-index__item.is-on .csp-v2-index__name { color: var(--v2-ink); font-style: italic; transform: translateX(.5rem); } body.csp-v2 .csp-v2-index__badge { font: 600 .62rem/1.2 var(--v2-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--v2-gold); max-height: 0; opacity: 0; overflow: hidden; transition: max-height .4s, opacity .4s; transform: translateX(.5rem); } body.csp-v2 .csp-v2-index__item.is-on .csp-v2-index__badge { max-height: 2rem; opacity: 1; } body.csp-v2 .csp-v2-index__run { position: absolute; left: 0; bottom: -1px; height: 1px; width: 0; background: var(--v2-gold); } body.csp-v2 .csp-v2-index__item.is-on .csp-v2-index__run.is-running { animation: v2-run var(--v2-idelay, 7s) linear both; } body.csp-v2 .csp-v2-index.is-paused .csp-v2-index__run { animation-play-state: paused; } body.csp-v2 .csp-v2-index__stage { display: grid; min-width: 0; } body.csp-v2 .csp-v2-index__panel { grid-area: 1 / 1; opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity .7s ease, transform .7s var(--v2-ease), visibility 0s .7s; display: flex; flex-direction: column; background: var(--v2-navy-2); border: 1px solid var(--v2-line); border-radius: 1.4rem; overflow: hidden; } body.csp-v2 .csp-v2-index__panel.is-on { opacity: 1; visibility: visible; transform: none; transition: opacity .7s ease, transform .7s var(--v2-ease), visibility 0s; } body.csp-v2 .csp-v2-index__panel .csp-v2-equip__media { aspect-ratio: 16 / 9; } body.csp-v2 .csp-v2-index__text { padding: 1.7rem 2rem 2rem; display: flex; flex-direction: column; gap: .7rem; } body.csp-v2 .csp-v2-index__text .csp-v2-equip__title { font-size: 2.2rem; } @media (max-width: 860px) { body.csp-v2 .csp-v2-index { grid-template-columns: 1fr; gap: 1.2rem; } body.csp-v2 .csp-v2-index__nav { flex-direction: row; gap: .5rem; overflow-x: auto; border: 0; padding-bottom: .4rem; scrollbar-width: none; } body.csp-v2 .csp-v2-index__nav::-webkit-scrollbar { display: none; } body.csp-v2 .csp-v2-index__item { flex: 0 0 auto; width: auto; padding: .7rem 1rem; border: 1px solid rgba(212, 184, 92, .3); border-radius: 999px; } body.csp-v2 .csp-v2-index__item.is-on { background: rgba(212, 184, 92, .14); border-color: var(--v2-gold); } body.csp-v2 .csp-v2-index__name { font-size: 1.05rem; white-space: nowrap; transform: none !important; } body.csp-v2 .csp-v2-index__badge, body.csp-v2 .csp-v2-index__run { display: none; } body.csp-v2 .csp-v2-index__panel .csp-v2-equip__media { aspect-ratio: 4 / 3; } body.csp-v2 .csp-v2-index__text { padding: 1.3rem 1.3rem 1.6rem; } body.csp-v2 .csp-v2-index__text .csp-v2-equip__title { font-size: 1.8rem; } } /* Navigation : bouton Réserver au même dessin que les autres */ html body.csp-v2 .csp-navbar__cta { border-radius: 0 !important; font-family: Montserrat, var(--v2-sans) !important; font-weight: 500 !important; letter-spacing: .18em !important; background: linear-gradient(135deg, #c9a84c, #b8963f) !important; } /* Accueil : mention de localisation plus lisible */ html body.csp-v2 .csp-hero--v2 .csp-hero__tagline { font-size: clamp(.78rem, 1vw, .9rem) !important; letter-spacing: .32em !important; color: var(--v2-gold-l) !important; opacity: 1; text-shadow: 0 1px 12px rgba(6, 14, 30, .6); } /* ========================================================================= v0.1.6 – Partenaires « carnet d'adresses » ========================================================================= */ body.csp-v2 .csp-v2-partners { position: relative; padding: var(--v2-section) 0; background: radial-gradient(900px 340px at 50% 0%, rgba(30, 71, 168, .28), rgba(10, 22, 40, 0)), var(--v2-navy); overflow: hidden; color: var(--v2-ink); } body.csp-v2 .csp-v2-partners__wrap { max-width: 1220px; margin: 0 auto; padding: 0 1.25rem; box-sizing: border-box; } body.csp-v2 .csp-v2-partners__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; margin-bottom: 2.8rem; } body.csp-v2 .csp-v2-partners__titles { display: flex; flex-direction: column; align-items: flex-start; gap: 1.2rem; } body.csp-v2 .csp-v2-partners .csp-section__label { display: inline-flex; align-items: center; gap: .5rem; font: 800 .72rem/1.1 var(--v2-sans); letter-spacing: .15em; text-transform: uppercase; color: var(--v2-gold-l); padding: .29rem .86rem; border: 1px solid rgba(212, 184, 92, .22); border-radius: 999px; background: rgba(212, 184, 92, .075); margin: 0; } body.csp-v2 .csp-v2-partners .csp-section__label::before { content: ""; display: block; width: 1.55rem; height: 1px; background: linear-gradient(90deg, rgba(0, 0, 0, 0), #f0d98a); } body.csp-v2 .csp-v2-partners .csp-v2-title::after { margin-left: 0; background: linear-gradient(90deg, var(--v2-gold), rgba(212, 184, 92, 0)); } body.csp-v2 .csp-v2-partners__intro { margin: 0; max-width: 30rem; font: 400 1rem/1.75 var(--v2-sans); color: var(--v2-text); } body.csp-v2 .csp-v2-partners__ctrl { display: flex; align-items: center; gap: .8rem; } body.csp-v2 .csp-v2-partners__ctrl[hidden] { display: none; } body.csp-v2 .csp-v2-partners__count { font: 500 .85rem var(--v2-sans); color: #9fabbf; margin-right: .6rem; } body.csp-v2 .csp-v2-partners__count [data-v2-pcur] { color: var(--v2-ink); } body.csp-v2 .csp-v2-medal { display: flex; align-items: center; justify-content: center; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #f8f3e6, #e6dcc4 72%); box-shadow: 0 0 0 1px rgba(212, 184, 92, .55), 0 0 0 9px rgba(212, 184, 92, .07), 0 24px 50px rgba(0, 0, 0, .45); overflow: hidden; flex-shrink: 0; } body.csp-v2 .csp-v2-medal img { width: 72%; height: 72%; object-fit: contain; } body.csp-v2 .csp-v2-partner__dom, body.csp-v2 .csp-v2-partner__kicker { font: 600 .66rem/1.2 var(--v2-sans); letter-spacing: .24em; text-transform: uppercase; color: var(--v2-gold); min-height: .8rem; } body.csp-v2 .csp-v2-partner__kicker { color: #9fabbf; } body.csp-v2 .csp-v2-partner__name { margin: 0; font: 500 1.75rem/1.1 var(--v2-serif); color: var(--v2-ink); letter-spacing: 0; text-transform: none; } body.csp-v2 .csp-v2-partner__desc { margin: 0; font: 400 .93rem/1.75 var(--v2-sans); color: #d5dbe6; } body.csp-v2 .csp-v2-globe { width: 2.9rem; height: 2.9rem; border-radius: 50%; border: 1px solid rgba(212, 184, 92, .45); display: inline-flex; align-items: center; justify-content: center; color: var(--v2-gold-l); background: rgba(10, 22, 40, .4); flex-shrink: 0; transition: background .3s, transform .3s var(--v2-ease); } body.csp-v2 .csp-v2-globe:hover { background: rgba(212, 184, 92, .14); transform: rotate(-12deg); } /* Un partenaire : coup de projecteur */ body.csp-v2 .csp-v2-spot { display: grid; grid-template-columns: 240px minmax(0, 1fr); border-radius: 1.4rem; overflow: hidden; border: 1px solid rgba(212, 184, 92, .25); background: linear-gradient(160deg, #16305f, #0c1a38); box-shadow: 0 34px 70px rgba(0, 0, 0, .4); } body.csp-v2 .csp-v2-spot__media { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.2rem; padding: 2.6rem 1rem; background: radial-gradient(circle at 50% 45%, rgba(212, 184, 92, .18), rgba(212, 184, 92, 0) 60%), linear-gradient(170deg, #1b3a73, #0d1d3d); } body.csp-v2 .csp-v2-spot__media .csp-v2-medal { width: 9rem; height: 9rem; } body.csp-v2 .csp-v2-spot__body { padding: clamp(1.8rem, 3.5vw, 2.8rem); display: flex; flex-direction: column; gap: 1rem; } body.csp-v2 .csp-v2-spot__body .csp-v2-partner__name { font-size: clamp(2rem, 3vw, 2.5rem); } body.csp-v2 .csp-v2-spot__actions { display: flex; align-items: center; gap: .9rem; margin-top: .4rem; } body.csp-v2 .csp-v2-spot__actions .csp-v2-btn { padding: 0 1.6rem; white-space: nowrap; } body.csp-v2 .csp-v2-partners--solo .csp-v2-partners__wrap { display: grid; grid-template-columns: minmax(0, 330px) minmax(0, 1fr); gap: clamp(2rem, 4.5vw, 4.5rem); align-items: center; } body.csp-v2 .csp-v2-partners--solo .csp-v2-partners__head { margin: 0; } /* Plusieurs partenaires : carnet de cartes */ body.csp-v2 .csp-v2-rail { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0 -1.25rem; padding: .5rem 1.25rem 1.5rem; -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent); } body.csp-v2 .csp-v2-partners.is-static .csp-v2-rail { -webkit-mask-image: none; mask-image: none; } body.csp-v2 .csp-v2-rail::-webkit-scrollbar { display: none; } body.csp-v2 .csp-v2-rail__track { display: flex; gap: 1.5rem; margin: 0; padding: 0; list-style: none; } body.csp-v2 .csp-v2-partners.is-static .csp-v2-rail__track { justify-content: center; } body.csp-v2 .csp-v2-pcard { position: relative; flex: 0 0 18.5rem; height: 26rem; scroll-snap-align: start; border-radius: 1.25rem; overflow: hidden; background: linear-gradient(165deg, #173163 0%, #0f2147 55%, #0b1934 100%); border: 1px solid rgba(212, 184, 92, .22); box-shadow: 0 26px 50px rgba(0, 0, 0, .35); transition: transform .5s var(--v2-ease), border-color .5s; } body.csp-v2 .csp-v2-pcard:hover { transform: translateY(-4px); border-color: rgba(212, 184, 92, .45); } body.csp-v2 .csp-v2-pcard__front { height: 100%; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; padding: 1.9rem 1.6rem 1.6rem; text-align: center; } body.csp-v2 .csp-v2-pcard__front .csp-v2-medal { width: 7.4rem; height: 7.4rem; margin: 2.1rem 0 1.6rem; } body.csp-v2 .csp-v2-pcard__foot { margin-top: auto; width: 100%; display: flex; align-items: center; justify-content: space-between; padding-top: 1.1rem; border-top: 1px solid rgba(212, 184, 92, .18); } body.csp-v2 .csp-v2-pcard__more { display: inline-flex; align-items: center; gap: .6rem; background: none; border: 0; padding: 0; cursor: pointer; font: 600 .7rem Montserrat, var(--v2-sans); letter-spacing: .2em; text-transform: uppercase; color: var(--v2-gold-l); } body.csp-v2 .csp-v2-pcard__more span { width: 1.4rem; height: 1.4rem; border-radius: 50%; border: 1px solid rgba(212, 184, 92, .55); display: inline-flex; align-items: center; justify-content: center; font: 400 .95rem/1 var(--v2-sans); } body.csp-v2 .csp-v2-pcard__veil { position: absolute; inset: 0; box-sizing: border-box; padding: 1.9rem 1.6rem 1.5rem; display: flex; flex-direction: column; gap: .8rem; background: linear-gradient(180deg, rgba(9, 19, 38, .95), rgba(9, 19, 38, .99)); transform: translateY(100%); transition: transform .6s var(--v2-ease); overflow-y: auto; text-align: left; } body.csp-v2 .csp-v2-pcard__veil.is-open { transform: none; } body.csp-v2 .csp-v2-pcard__veil .csp-v2-partner__desc { font-size: .88rem; } body.csp-v2 .csp-v2-pcard__veil .csp-v2-btn { margin-top: auto; min-height: 2.9rem; padding: 0 1.2rem; } body.csp-v2 .csp-v2-pcard__back { background: none; border: 0; padding: .2rem 0; cursor: pointer; text-align: left; font: 500 .8rem var(--v2-sans); color: #9fabbf; } body.csp-v2 .csp-v2-pcard__back:hover { color: var(--v2-gold-l); } @media (max-width: 860px) { body.csp-v2 .csp-v2-partners--solo .csp-v2-partners__wrap { grid-template-columns: 1fr; } body.csp-v2 .csp-v2-partners__head { flex-direction: column; align-items: center; text-align: center; } body.csp-v2 .csp-v2-partners__titles { align-items: center; } body.csp-v2 .csp-v2-partners .csp-v2-title::after { margin-left: auto; background: linear-gradient(90deg, rgba(212, 184, 92, 0), var(--v2-gold), rgba(212, 184, 92, 0)); } body.csp-v2 .csp-v2-spot { grid-template-columns: 1fr; } body.csp-v2 .csp-v2-spot__media { padding: 2rem 1rem; } body.csp-v2 .csp-v2-spot__media .csp-v2-medal { width: 7.5rem; height: 7.5rem; } body.csp-v2 .csp-v2-pcard { flex-basis: 72vw; height: 24rem; } } /* ========================================================================= v0.1.8 – Notre histoire « éditoriale » ========================================================================= */ body.csp-v2 .csp-v2-pill { display: inline-flex; align-items: center; gap: .5rem; font: 800 .72rem/1.1 var(--v2-sans); letter-spacing: .15em; text-transform: uppercase; color: var(--v2-gold-l); padding: .29rem .86rem; border: 1px solid rgba(212, 184, 92, .22); border-radius: 999px; background: rgba(212, 184, 92, .075); margin: 0; align-self: flex-start; } body.csp-v2 .csp-v2-pill::before { content: ""; display: block; width: 1.55rem; height: 1px; background: linear-gradient(90deg, rgba(0, 0, 0, 0), #f0d98a); } body.csp-v2 .csp-v2-story { position: relative; overflow: hidden; } body.csp-v2 .csp-v2-story::before { content: ""; position: absolute; left: -10%; top: 10%; width: 55%; height: 80%; background: radial-gradient(closest-side, rgba(30, 71, 168, .22), rgba(10, 22, 40, 0)); pointer-events: none; } body.csp-v2 .csp-v2-story__wrap { position: relative; max-width: 1220px; margin: 0 auto; padding: 0 1.25rem; box-sizing: border-box; display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr); gap: clamp(2.5rem, 6vw, 6rem); align-items: center; } body.csp-v2 .csp-v2-story__visual { position: relative; padding: 2.5rem 0 4.5rem 0; } body.csp-v2 .csp-v2-story__main { margin: 0; width: 70%; aspect-ratio: 4 / 5; border-radius: 12rem 12rem 1.4rem 1.4rem; overflow: hidden; box-shadow: 0 40px 80px rgba(0, 0, 0, .45); position: relative; } body.csp-v2 .csp-v2-story__main::after { content: ""; position: absolute; inset: .7rem; border: 1px solid rgba(240, 217, 138, .35); border-radius: 11.4rem 11.4rem 1rem 1rem; pointer-events: none; } body.csp-v2 .csp-v2-story__img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.6s var(--v2-ease); } body.csp-v2 .csp-v2-story__visual:hover .csp-v2-story__main .csp-v2-story__img { transform: scale(1.04); } body.csp-v2 .csp-v2-story__round { position: absolute; right: 3%; top: 0; width: 36%; aspect-ratio: 1; margin: 0; border-radius: 50%; overflow: hidden; border: 6px solid var(--v2-navy); box-shadow: 0 0 0 1px rgba(212, 184, 92, .45), 0 30px 60px rgba(0, 0, 0, .5); z-index: 2; } body.csp-v2 .csp-v2-story__second { position: absolute; right: 0; bottom: 3rem; width: 44%; z-index: 2; aspect-ratio: 4 / 3; margin: 0; border-radius: 1.1rem; overflow: hidden; border: 6px solid var(--v2-navy); box-shadow: 0 30px 60px rgba(0, 0, 0, .5); } body.csp-v2 .csp-v2-story__badge { position: absolute; left: 6%; bottom: 1.2rem; z-index: 3; display: flex; flex-direction: column; gap: .35rem; padding: 1.2rem 1.4rem; min-width: 13rem; border-radius: 1rem; background: rgba(10, 22, 40, .72); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border: 1px solid rgba(212, 184, 92, .35); box-shadow: 0 24px 50px rgba(0, 0, 0, .4); } body.csp-v2 .csp-v2-story__badge-t { font: 500 1.35rem/1.1 var(--v2-serif); color: var(--v2-ink); } body.csp-v2 .csp-v2-story__badge-s { font: 500 .72rem/1.4 var(--v2-sans); letter-spacing: .06em; color: #aab5c7; } body.csp-v2 .csp-v2-story__badge-p { margin-top: .4rem; padding-top: .6rem; border-top: 1px solid rgba(212, 184, 92, .25); font: 500 .72rem var(--v2-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--v2-gold); } body.csp-v2 .csp-v2-story__badge-p strong { font: italic 500 1.7rem/1 var(--v2-serif); letter-spacing: 0; text-transform: none; color: var(--v2-gold-l); margin-left: .25rem; } body.csp-v2 .csp-v2-story__text { display: flex; flex-direction: column; gap: 1.3rem; } body.csp-v2 .csp-v2-story__text .csp-v2-title::after { margin-left: 0; background: linear-gradient(90deg, var(--v2-gold), rgba(212, 184, 92, 0)); } body.csp-v2 .csp-v2-story__lede { margin: .2rem 0 0; font: 400 clamp(1.25rem, 1.7vw, 1.45rem)/1.55 var(--v2-serif); color: var(--v2-ink); } body.csp-v2 .csp-v2-story__p { margin: 0; font: 400 .98rem/1.8 var(--v2-sans); color: var(--v2-text); } body.csp-v2 .csp-v2-story__contact { list-style: none; margin: .8rem 0 0; padding: 1.3rem 0 0; border-top: 1px solid rgba(212, 184, 92, .18); display: flex; flex-wrap: wrap; gap: .8rem 1.8rem; } body.csp-v2 .csp-v2-story__contact a { display: inline-flex; align-items: center; gap: .6rem; font: 400 .9rem var(--v2-sans); color: var(--v2-text); text-decoration: none; transition: color .3s; } body.csp-v2 .csp-v2-story__contact a:hover { color: var(--v2-gold-l); } body.csp-v2 .csp-v2-story__contact svg { width: 1.05rem; height: 1.05rem; fill: none; stroke: var(--v2-gold); stroke-width: 1.6; flex-shrink: 0; } @media (max-width: 860px) { body.csp-v2 .csp-v2-story__wrap { grid-template-columns: 1fr; } body.csp-v2 .csp-v2-story__visual { max-width: 30rem; width: 100%; margin: 0 auto; padding-bottom: 3.5rem; } body.csp-v2 .csp-v2-story__badge { left: 0; bottom: 0; min-width: 0; padding: .95rem 1.1rem; } body.csp-v2 .csp-v2-story__visual { padding-top: 1.5rem; } body.csp-v2 .csp-v2-story__badge-t { font-size: 1.1rem; } body.csp-v2 .csp-v2-story__text { align-items: center; text-align: center; } body.csp-v2 .csp-v2-story__text .csp-v2-pill { align-self: center; } body.csp-v2 .csp-v2-story__text .csp-v2-title::after { margin-left: auto; background: linear-gradient(90deg, rgba(212, 184, 92, 0), var(--v2-gold), rgba(212, 184, 92, 0)); } body.csp-v2 .csp-v2-story__contact { flex-direction: column; align-items: center; } } /* ========================================================================= v0.1.8 – Vidéo « cinéma » ========================================================================= */ body.csp-v2 .csp-v2-film__wrap { max-width: 1220px; margin: 0 auto; padding: 0 1.25rem; box-sizing: border-box; } body.csp-v2 .csp-v2-film__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; margin-bottom: 2.4rem; } body.csp-v2 .csp-v2-film__head > div { display: flex; flex-direction: column; gap: 1.1rem; } body.csp-v2 .csp-v2-film__head .csp-v2-title::after { margin-left: 0; background: linear-gradient(90deg, var(--v2-gold), rgba(212, 184, 92, 0)); } body.csp-v2 .csp-v2-film__sub { margin: 0 0 .4rem; max-width: 22rem; text-align: right; font: italic 400 1.25rem/1.4 var(--v2-serif); color: #c3cad6; } body.csp-v2 .csp-v2-film__screen { position: relative; display: block; width: 100%; aspect-ratio: 21 / 9; padding: 0; border: 1px solid rgba(212, 184, 92, .25); border-radius: 1.4rem; overflow: hidden; cursor: pointer; background: #050b16; box-shadow: 0 50px 100px rgba(0, 0, 0, .5); color: var(--v2-ink); } body.csp-v2 .csp-v2-film__cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.03); transition: transform 2.4s var(--v2-ease), filter .8s; filter: saturate(1.05) brightness(.82); } body.csp-v2 .csp-v2-film__screen:hover .csp-v2-film__cover, body.csp-v2 .csp-v2-film__screen:focus-visible .csp-v2-film__cover { transform: scale(1.08); filter: saturate(1.1) brightness(.92); } body.csp-v2 .csp-v2-film__veil { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(5, 11, 22, .85) 0%, rgba(5, 11, 22, .1) 45%, rgba(5, 11, 22, .25) 100%), radial-gradient(ellipse at center, rgba(5, 11, 22, 0) 40%, rgba(5, 11, 22, .45) 100%); } body.csp-v2 .csp-v2-film__play { position: absolute; left: 50%; top: 50%; width: 6.2rem; height: 6.2rem; transform: translate(-50%, -50%); display: flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(10, 22, 40, .35); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid rgba(240, 217, 138, .7); color: var(--v2-gold-l); transition: transform .5s var(--v2-ease), background .5s; } body.csp-v2 .csp-v2-film__play svg { margin-left: .2rem; } body.csp-v2 .csp-v2-film__ring { position: absolute; inset: -.9rem; border-radius: 50%; border: 1px solid rgba(240, 217, 138, .35); animation: v2-film-ring 2.8s ease-out infinite; } @keyframes v2-film-ring { from { transform: scale(.85); opacity: 1; } to { transform: scale(1.35); opacity: 0; } } body.csp-v2 .csp-v2-film__screen:hover .csp-v2-film__play { transform: translate(-50%, -50%) scale(1.06); background: rgba(212, 184, 92, .2); } body.csp-v2 .csp-v2-film__caption { position: absolute; left: clamp(1.4rem, 3vw, 2.6rem); bottom: clamp(1.2rem, 2.6vw, 2.2rem); display: flex; flex-direction: column; gap: .35rem; text-align: left; } body.csp-v2 .csp-v2-film__kicker { font: 600 .68rem var(--v2-sans); letter-spacing: .26em; text-transform: uppercase; color: var(--v2-gold); } body.csp-v2 .csp-v2-film__name { font: 500 clamp(1.3rem, 2.2vw, 1.9rem)/1.15 var(--v2-serif); color: var(--v2-ink); } html.csp-v2-noscroll { overflow: hidden; } body.csp-v2 .csp-v2-film__room { position: fixed; inset: 0; z-index: 100001; display: flex; align-items: center; justify-content: center; padding: clamp(1rem, 4vw, 4rem); background: rgba(3, 7, 15, .94); opacity: 0; transition: opacity .4s ease; } body.csp-v2 .csp-v2-film__room[hidden] { display: none; } body.csp-v2 .csp-v2-film__room.is-open { opacity: 1; } body.csp-v2 .csp-v2-film__frame { width: min(100%, 160vh); aspect-ratio: 16 / 9; border-radius: .8rem; overflow: hidden; box-shadow: 0 40px 120px rgba(0, 0, 0, .8); background: #000; } body.csp-v2 .csp-v2-film__frame iframe, body.csp-v2 .csp-v2-film__frame video { width: 100%; height: 100%; border: 0; display: block; } body.csp-v2 .csp-v2-film__close { position: absolute; top: clamp(.8rem, 2vw, 1.6rem); right: clamp(.8rem, 2vw, 1.6rem); width: 3rem; height: 3rem; border-radius: 50%; border: 1px solid rgba(240, 217, 138, .5); background: rgba(10, 22, 40, .6); color: var(--v2-gold-l); display: flex; align-items: center; justify-content: center; cursor: pointer; } @media (prefers-reduced-motion: reduce) { body.csp-v2 .csp-v2-film__ring { animation: none; } } @media (max-width: 760px) { body.csp-v2 .csp-v2-film__head { flex-direction: column; align-items: center; text-align: center; } body.csp-v2 .csp-v2-film__head > div { align-items: center; } body.csp-v2 .csp-v2-film__head .csp-v2-pill { align-self: center; } body.csp-v2 .csp-v2-film__head .csp-v2-title::after { margin-left: auto; background: linear-gradient(90deg, rgba(212, 184, 92, 0), var(--v2-gold), rgba(212, 184, 92, 0)); } body.csp-v2 .csp-v2-film__sub { text-align: center; } body.csp-v2 .csp-v2-film__screen { aspect-ratio: 4 / 5; border-radius: 1.1rem; } body.csp-v2 .csp-v2-film__play { width: 5rem; height: 5rem; } } /* ========================================================================= v0.1.8 – Réservation : carte « invitation » ========================================================================= */ html body.csp-v2 main.csp-v2-main > section.csp-v2-invite { padding-top: calc(var(--v2-section) * .55) !important; padding-bottom: calc(var(--v2-section) * .55) !important; } body.csp-v2 .csp-v2-invite__card { max-width: 1120px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); border-radius: 1.6rem; overflow: hidden; border: 1px solid rgba(212, 184, 92, .28); background: radial-gradient(700px 400px at 100% 0%, rgba(30, 71, 168, .35), rgba(10, 22, 40, 0)), linear-gradient(160deg, #10234a, #0a1628 65%); box-shadow: 0 50px 100px rgba(0, 0, 0, .45); } body.csp-v2 .csp-v2-invite__media { position: relative; margin: 0; min-height: 26rem; } body.csp-v2 .csp-v2-invite__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10, 22, 40, 0) 60%, rgba(12, 26, 54, .9) 100%); } body.csp-v2 .csp-v2-invite__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } body.csp-v2 .csp-v2-invite__body { display: flex; flex-direction: column; align-items: flex-start; gap: 1.2rem; padding: clamp(2rem, 4.5vw, 3.6rem); } body.csp-v2 .csp-v2-invite__body .csp-v2-title::after { margin-left: 0; background: linear-gradient(90deg, var(--v2-gold), rgba(212, 184, 92, 0)); } body.csp-v2 .csp-v2-invite__desc { margin: 0; font: 400 .98rem/1.8 var(--v2-sans); color: var(--v2-text); max-width: 32rem; } body.csp-v2 .csp-v2-invite__actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: .3rem; } body.csp-v2 .csp-v2-invite__actions .csp-v2-btn--ghost { align-self: auto; } body.csp-v2 .csp-v2-invite__tel { margin: 0; font: 400 .9rem var(--v2-sans); color: #aab5c7; } body.csp-v2 .csp-v2-invite__tel a { color: var(--v2-gold-l); text-decoration: none; border-bottom: 1px solid rgba(240, 217, 138, .35); } body.csp-v2 .csp-v2-invite__notes { list-style: none; margin: .4rem 0 0; padding: 1rem 0 0; border-top: 1px solid rgba(212, 184, 92, .16); display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; width: 100%; } body.csp-v2 .csp-v2-invite__notes li { display: inline-flex; align-items: center; gap: .55rem; font: 500 .74rem var(--v2-sans); letter-spacing: .08em; text-transform: uppercase; color: #9fabbf; } body.csp-v2 .csp-v2-invite__notes li::before { content: ""; width: .35rem; height: .35rem; border-radius: 50%; background: var(--v2-gold); } @media (max-width: 860px) { body.csp-v2 .csp-v2-invite__card { grid-template-columns: 1fr; margin: 0 1rem; } body.csp-v2 .csp-v2-invite__media { min-height: 0; aspect-ratio: 16 / 10; } body.csp-v2 .csp-v2-invite__media::after { background: linear-gradient(180deg, rgba(10, 22, 40, 0) 55%, rgba(12, 26, 54, .95) 100%); } body.csp-v2 .csp-v2-invite__body { align-items: center; text-align: center; } body.csp-v2 .csp-v2-invite__body .csp-v2-pill { align-self: center; } body.csp-v2 .csp-v2-invite__body .csp-v2-title::after { margin-left: auto; background: linear-gradient(90deg, rgba(212, 184, 92, 0), var(--v2-gold), rgba(212, 184, 92, 0)); } body.csp-v2 .csp-v2-invite__actions { justify-content: center; width: 100%; } body.csp-v2 .csp-v2-invite__actions .csp-v2-btn { flex: 1 1 100%; } body.csp-v2 .csp-v2-invite__notes { justify-content: center; } } /* ========================================================================= v0.1.9 – Tarifs : invitation vers l'autre formule (reprise de l'ancien accueil) ========================================================================= */ body.csp-v2 .csp-v2-seg { position: relative; } body.csp-v2 .csp-v2-seg__btn.is-hint { animation: v2-tab-peek 1.2s cubic-bezier(.4, 0, .2, 1) 2; box-shadow: 0 0 18px rgba(201, 168, 76, .6); outline: 1px solid var(--v2-gold); } @keyframes v2-tab-peek { 0%, 100% { transform: translateX(0); } 30% { transform: translateX(-30px); } 60% { transform: translateX(5px); } 80% { transform: translateX(-3px); } } body.csp-v2 .csp-v2-seg__arrow { position: absolute; top: 50%; left: 50%; width: 28px; height: 28px; transform: translate(-50%, -50%); pointer-events: none; opacity: 0; z-index: 5; transition: opacity .6s; } body.csp-v2 .csp-v2-seg__arrow svg { width: 100%; height: 100%; color: var(--v2-gold); filter: drop-shadow(0 0 6px rgba(201, 168, 76, .6)); } body.csp-v2 .csp-v2-seg__arrow.is-visible { opacity: 1; animation: v2-arrow-pulse .8s ease-in-out 3 forwards; } body.csp-v2 .csp-v2-seg__arrow.is-fade { opacity: 0; } @keyframes v2-arrow-pulse { 0%, 100% { transform: translate(-50%, -50%) translateX(0); opacity: 1; } 50% { transform: translate(-50%, -50%) translateX(12px); opacity: .7; } } /* v0.1.9 – Partenaire unique : carte plus compacte, à l'échelle des autres cartes du site */ body.csp-v2 .csp-v2-partners--solo .csp-v2-partners__wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 620px); } body.csp-v2 .csp-v2-spot { grid-template-columns: 190px minmax(0, 1fr); border-radius: 1.2rem; box-shadow: 0 24px 50px rgba(0, 0, 0, .35); } body.csp-v2 .csp-v2-spot__media { padding: 1.6rem .8rem; gap: .9rem; } body.csp-v2 .csp-v2-spot__media .csp-v2-medal { width: 6.6rem; height: 6.6rem; box-shadow: 0 0 0 1px rgba(212, 184, 92, .55), 0 0 0 6px rgba(212, 184, 92, .07), 0 16px 34px rgba(0, 0, 0, .4); } body.csp-v2 .csp-v2-spot__body { padding: 1.6rem 1.8rem; gap: .7rem; } body.csp-v2 .csp-v2-spot__body .csp-v2-partner__name { font-size: 1.75rem; } body.csp-v2 .csp-v2-spot__body .csp-v2-partner__desc { font-size: .86rem; line-height: 1.7; } body.csp-v2 .csp-v2-spot__actions .csp-v2-btn { min-height: 2.9rem; padding: 0 1.3rem; font-size: .7rem; } body.csp-v2 .csp-v2-spot__actions .csp-v2-globe { width: 2.6rem; height: 2.6rem; } @media (max-width: 860px) { body.csp-v2 .csp-v2-partners--solo .csp-v2-partners__wrap { grid-template-columns: 1fr; } body.csp-v2 .csp-v2-spot { grid-template-columns: 1fr; max-width: 30rem; margin: 0 auto; } } /* v0.1.10 – Avis : sceau tournant « 4,9 sur 5 » centré sous le titre */ body.csp-v2 .csp-v2-ring { position: relative; width: 10.75rem; height: 10.75rem; align-self: center; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .15rem; margin: .4rem 0 .6rem; } body.csp-v2 .csp-v2-ring__spin { position: absolute; inset: 0; width: 100%; height: 100%; animation: v2-ring-spin 40s linear infinite; } body.csp-v2 .csp-v2-ring__spin text { fill: var(--v2-gold); font: 600 10px var(--v2-sans); text-transform: uppercase; } body.csp-v2 .csp-v2-ring__n { font: italic 500 3.1rem/1 var(--v2-serif); color: var(--v2-gold-l); } body.csp-v2 .csp-v2-ring__s { font: 600 .62rem var(--v2-sans); letter-spacing: .2em; text-transform: uppercase; color: #e8dcb4; } @keyframes v2-ring-spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { body.csp-v2 .csp-v2-ring__spin { animation: none; } } /* ========================================================================= v0.1.10 – Galerie « éditoriale » ========================================================================= */ body.csp-v2 .csp-v2-gal__wrap { max-width: 1220px; margin: 0 auto; padding: 0 1.25rem; box-sizing: border-box; } body.csp-v2 .csp-v2-gal__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; margin-bottom: 2rem; } body.csp-v2 .csp-v2-gal__titles { display: flex; flex-direction: column; gap: 1.1rem; } body.csp-v2 .csp-v2-gal__head .csp-v2-title::after { margin-left: 0; background: linear-gradient(90deg, var(--v2-gold), rgba(212, 184, 92, 0)); } body.csp-v2 .csp-v2-gal__desc { margin: 0 0 .4rem; max-width: 24rem; text-align: right; font: italic 400 1.2rem/1.45 var(--v2-serif); color: #c3cad6; } body.csp-v2 .csp-v2-gal__filters { display: flex; flex-wrap: wrap; gap: .4rem 2rem; margin-bottom: 1.8rem; border-bottom: 1px solid rgba(212, 184, 92, .16); } body.csp-v2 .csp-v2-gal__filter { position: relative; background: none; border: 0; padding: .9rem 0; cursor: pointer; font: 500 .74rem Montserrat, var(--v2-sans); letter-spacing: .18em; text-transform: uppercase; color: #9fabbf; transition: color .3s; } body.csp-v2 .csp-v2-gal__filter sup { margin-left: .35rem; font: italic 500 .85rem var(--v2-serif); letter-spacing: 0; color: var(--v2-gold); } body.csp-v2 .csp-v2-gal__filter::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--v2-gold); transform: scaleX(0); transform-origin: left; transition: transform .5s var(--v2-ease); } body.csp-v2 .csp-v2-gal__filter:hover { color: var(--v2-ink); } body.csp-v2 .csp-v2-gal__filter.is-on { color: var(--v2-ink); } body.csp-v2 .csp-v2-gal__filter.is-on::after { transform: scaleX(1); } body.csp-v2 .csp-v2-gal__mosaic { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: clamp(9rem, 15vw, 13.5rem); grid-auto-flow: dense; gap: .9rem; } body.csp-v2 .csp-v2-gal__item { position: relative; border-radius: 1rem; overflow: hidden; animation: v2-gal-in .6s var(--v2-ease) both; } body.csp-v2 .csp-v2-gal__item.is-xl { grid-column: span 2; grid-row: span 2; } body.csp-v2 .csp-v2-gal__item.is-tall { grid-row: span 2; } body.csp-v2 .csp-v2-gal__item.is-wide { grid-column: span 2; } body.csp-v2 .csp-v2-gal__item.is-out, body.csp-v2 .csp-v2-gal__thumb.is-out { display: none; } @keyframes v2-gal-in { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: none; } } body.csp-v2 .csp-v2-gal__btn { position: relative; display: block; width: 100%; height: 100%; padding: 0; border: 0; background: #0b1730; cursor: zoom-in; overflow: hidden; border-radius: inherit; } body.csp-v2 .csp-v2-gal__img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.2s var(--v2-ease), filter .6s; } body.csp-v2 .csp-v2-gal__btn:hover .csp-v2-gal__img, body.csp-v2 .csp-v2-gal__btn:focus-visible .csp-v2-gal__img { transform: scale(1.06); filter: brightness(.85); } body.csp-v2 .csp-v2-gal__btn::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(240, 217, 138, 0); transition: box-shadow .5s; pointer-events: none; } body.csp-v2 .csp-v2-gal__btn:hover::after { box-shadow: inset 0 0 0 1px rgba(240, 217, 138, .55); } body.csp-v2 .csp-v2-gal__cap { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; gap: .2rem; padding: 2.2rem 1.1rem .95rem; text-align: left; background: linear-gradient(0deg, rgba(5, 11, 22, .82), rgba(5, 11, 22, 0)); transform: translateY(35%); opacity: 0; transition: transform .5s var(--v2-ease), opacity .5s; } body.csp-v2 .csp-v2-gal__btn:hover .csp-v2-gal__cap, body.csp-v2 .csp-v2-gal__btn:focus-visible .csp-v2-gal__cap { transform: none; opacity: 1; } body.csp-v2 .csp-v2-gal__item.is-xl .csp-v2-gal__cap { transform: none; opacity: 1; } body.csp-v2 .csp-v2-gal__cat { font: 600 .6rem var(--v2-sans); letter-spacing: .24em; text-transform: uppercase; color: var(--v2-gold); } body.csp-v2 .csp-v2-gal__name { font: 500 1.2rem/1.2 var(--v2-serif); color: var(--v2-ink); } body.csp-v2 .csp-v2-gal__item.is-xl .csp-v2-gal__name { font-size: 1.6rem; } body.csp-v2 .csp-v2-gal__more { margin-top: 2.4rem; } body.csp-v2 .csp-v2-gal__more[hidden] { display: none; } body.csp-v2 .csp-v2-gal__more-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; } body.csp-v2 .csp-v2-gal__more-t { display: inline-flex; align-items: center; gap: .7rem; font: 600 .7rem var(--v2-sans); letter-spacing: .26em; text-transform: uppercase; color: var(--v2-gold); } body.csp-v2 .csp-v2-gal__more-t::before { content: ""; width: 1.4rem; height: 1px; background: var(--v2-gold); } body.csp-v2 .csp-v2-gal__more-ctrl { display: flex; gap: .6rem; } body.csp-v2 .csp-v2-gal__more.is-static .csp-v2-gal__more-ctrl { visibility: hidden; } body.csp-v2 .csp-v2-gal__strip { list-style: none; margin: 0; padding: 0 0 .4rem; display: flex; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; } body.csp-v2 .csp-v2-gal__strip::-webkit-scrollbar { display: none; } body.csp-v2 .csp-v2-gal__thumb { flex: 0 0 clamp(13rem, 24vw, 18rem); aspect-ratio: 4 / 3; scroll-snap-align: start; border-radius: .9rem; overflow: hidden; } body.csp-v2 .csp-v2-gal__thumb .csp-v2-gal__name { font-size: 1.05rem; } body.csp-v2 .csp-v2-gal__share { margin-top: 2.2rem; justify-content: center; } html.csp-v2-noscroll body { overflow: hidden; } body.csp-v2 .csp-v2-lb { position: fixed; inset: 0; z-index: 100001; display: flex; align-items: center; justify-content: center; padding: clamp(1rem, 4vw, 3.5rem) clamp(3.5rem, 7vw, 6rem); background: rgba(3, 7, 15, .95); opacity: 0; transition: opacity .35s ease; } body.csp-v2 .csp-v2-lb[hidden] { display: none; } body.csp-v2 .csp-v2-lb.is-open { opacity: 1; } body.csp-v2 .csp-v2-lb__fig { margin: 0; display: flex; flex-direction: column; align-items: center; gap: .9rem; max-width: 100%; max-height: 100%; } body.csp-v2 .csp-v2-lb__img { max-width: 100%; max-height: calc(100vh - 9rem); border-radius: .6rem; box-shadow: 0 40px 120px rgba(0, 0, 0, .8); opacity: 0; transform: scale(.985); transition: opacity .45s ease, transform .6s var(--v2-ease); } body.csp-v2 .csp-v2-lb__img.is-in { opacity: 1; transform: none; } body.csp-v2 .csp-v2-lb__cap { display: flex; gap: 1.2rem; align-items: baseline; font: 500 1.15rem var(--v2-serif); color: var(--v2-ink); } body.csp-v2 .csp-v2-lb__count { font: 500 .75rem var(--v2-sans); letter-spacing: .18em; color: var(--v2-gold); } body.csp-v2 .csp-v2-lb__close, body.csp-v2 .csp-v2-lb__nav { position: absolute; width: 3rem; height: 3rem; border-radius: 50%; border: 1px solid rgba(240, 217, 138, .5); background: rgba(10, 22, 40, .6); color: var(--v2-gold-l); display: flex; align-items: center; justify-content: center; cursor: pointer; } body.csp-v2 .csp-v2-lb__close { top: clamp(.8rem, 2vw, 1.6rem); right: clamp(.8rem, 2vw, 1.6rem); } body.csp-v2 .csp-v2-lb__nav--prev { left: clamp(.5rem, 2vw, 1.6rem); top: 50%; transform: translateY(-50%); } body.csp-v2 .csp-v2-lb__nav--next { right: clamp(.5rem, 2vw, 1.6rem); top: 50%; transform: translateY(-50%); } @media (max-width: 860px) { body.csp-v2 .csp-v2-gal__head { flex-direction: column; align-items: center; text-align: center; } body.csp-v2 .csp-v2-gal__titles { align-items: center; } body.csp-v2 .csp-v2-gal__titles .csp-v2-pill { align-self: center; } body.csp-v2 .csp-v2-gal__head .csp-v2-title::after { margin-left: auto; background: linear-gradient(90deg, rgba(212, 184, 92, 0), var(--v2-gold), rgba(212, 184, 92, 0)); } body.csp-v2 .csp-v2-gal__desc { text-align: center; } body.csp-v2 .csp-v2-gal__filters { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; gap: 1.4rem; scrollbar-width: none; } body.csp-v2 .csp-v2-gal__filter { white-space: nowrap; } body.csp-v2 .csp-v2-gal__mosaic { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 38vw; gap: .6rem; } body.csp-v2 .csp-v2-gal__item.is-tall { grid-row: span 1; } body.csp-v2 .csp-v2-gal__cap { transform: none; opacity: 1; padding: 1.6rem .8rem .7rem; } body.csp-v2 .csp-v2-gal__name { font-size: 1rem; } body.csp-v2 .csp-v2-gal__item:not(.is-xl) .csp-v2-gal__cat { display: none; } body.csp-v2 .csp-v2-gal__thumb { flex-basis: 64vw; } body.csp-v2 .csp-v2-lb { padding: 1rem; } body.csp-v2 .csp-v2-lb__nav { top: auto; bottom: 1rem; transform: none; } } /* ========================================================================= v0.1.10 – Options : « la carte » ========================================================================= */ body.csp-v2 .csp-v2-carte__book { max-width: 1080px; margin: 0 auto; padding: 0 1.25rem; box-sizing: border-box; display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); grid-template-rows: repeat(var(--n), auto) 1fr; column-gap: clamp(2rem, 5vw, 4.5rem); align-items: start; } body.csp-v2 .csp-v2-carte__tab { grid-column: 1; grid-row: var(--row); position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: .3rem; width: 100%; padding: 1.15rem 0; background: none; border: 0; border-top: 1px solid rgba(212, 184, 92, .16); cursor: pointer; text-align: left; color: inherit; } body.csp-v2 .csp-v2-carte__tab:last-of-type { border-bottom: 1px solid rgba(212, 184, 92, .16); } body.csp-v2 .csp-v2-carte__tname { font: 400 1.65rem/1.1 var(--v2-serif); color: rgba(244, 239, 226, .5); transition: color .4s, transform .4s var(--v2-ease); } body.csp-v2 .csp-v2-carte__tcount { font: 600 .6rem var(--v2-sans); letter-spacing: .2em; text-transform: uppercase; color: rgba(212, 184, 92, .55); transition: color .4s; } body.csp-v2 .csp-v2-carte__tab:hover .csp-v2-carte__tname { color: rgba(244, 239, 226, .85); } body.csp-v2 .csp-v2-carte__tab.is-on .csp-v2-carte__tname { color: var(--v2-ink); font-style: italic; transform: translateX(1rem); } body.csp-v2 .csp-v2-carte__tab.is-on .csp-v2-carte__tcount { color: var(--v2-gold); transform: translateX(1rem); } body.csp-v2 .csp-v2-carte__tcount { transition: color .4s, transform .4s var(--v2-ease); } body.csp-v2 .csp-v2-carte__tab::before { content: ""; position: absolute; left: 0; top: 50%; width: 0; height: 1px; background: var(--v2-gold); transition: width .5s var(--v2-ease); } body.csp-v2 .csp-v2-carte__tab.is-on::before { width: .35rem; } body.csp-v2 .csp-v2-carte__chev { display: none; } body.csp-v2 .csp-v2-carte__panel { grid-column: 2; grid-row: 1 / -1; align-self: start; position: relative; padding: clamp(1.8rem, 3.5vw, 2.6rem) clamp(1.6rem, 3.5vw, 2.8rem); border-radius: 1.3rem; border: 1px solid rgba(212, 184, 92, .25); background: radial-gradient(500px 260px at 100% 0%, rgba(30, 71, 168, .3), rgba(10, 22, 40, 0)), linear-gradient(165deg, #12285a, #0c1a38); box-shadow: 0 30px 60px rgba(0, 0, 0, .35); opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .5s ease, transform .5s var(--v2-ease), visibility 0s .5s; } body.csp-v2 .csp-v2-carte__panel.is-on { opacity: 1; visibility: visible; transform: none; transition: opacity .5s ease, transform .5s var(--v2-ease), visibility 0s; } body.csp-v2 .csp-v2-carte__ptitle { margin: 0 0 1.2rem; font: italic 400 2rem/1.1 var(--v2-serif); color: var(--v2-gold-l); } body.csp-v2 .csp-v2-carte__rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; } body.csp-v2 .csp-v2-carte__row { display: flex; align-items: baseline; gap: .8rem; padding: 1rem 0; border-top: 1px solid rgba(212, 184, 92, .12); } body.csp-v2 .csp-v2-carte__row:first-child { border-top: 0; } body.csp-v2 .csp-v2-carte__name { display: flex; flex-direction: column; gap: .2rem; font: 500 1rem/1.3 var(--v2-sans); color: var(--v2-ink); } body.csp-v2 .csp-v2-carte__name small { font: 400 .8rem var(--v2-sans); color: #9fabbf; } body.csp-v2 .csp-v2-carte__dots { flex: 1; min-width: 1.5rem; border-bottom: 1px dotted rgba(212, 184, 92, .45); transform: translateY(-.35rem); } body.csp-v2 .csp-v2-carte__price { font: italic 500 1.45rem/1 var(--v2-serif); color: var(--v2-gold-l); white-space: nowrap; } body.csp-v2 .csp-v2-carte__price.is-ask { font: 600 .66rem var(--v2-sans); letter-spacing: .18em; text-transform: uppercase; color: var(--v2-gold); font-style: normal; } body.csp-v2 .csp-v2-carte__foot { display: flex; align-items: center; justify-content: center; gap: 1.5rem; flex-wrap: wrap; margin-top: 2.4rem; text-align: center; } body.csp-v2 .csp-v2-carte__foot p { margin: 0; font: 400 .95rem var(--v2-sans); color: var(--v2-text); } body.csp-v2 .csp-v2-carte__foot .csp-v2-btn--ghost { align-self: auto; } @media (max-width: 860px) { body.csp-v2 .csp-v2-carte__book { display: block; } body.csp-v2 .csp-v2-carte__tab { flex-direction: row; align-items: center; justify-content: space-between; flex-wrap: wrap; padding: 1rem 0; } body.csp-v2 .csp-v2-carte__tname { font-size: 1.35rem; } body.csp-v2 .csp-v2-carte__tab.is-on .csp-v2-carte__tname { transform: none; } body.csp-v2 .csp-v2-carte__tab::before { display: none; } body.csp-v2 .csp-v2-carte__tcount { margin-left: auto; margin-right: 1rem; } body.csp-v2 .csp-v2-carte__chev { display: block; width: .6rem; height: .6rem; border-right: 1px solid var(--v2-gold); border-bottom: 1px solid var(--v2-gold); transform: rotate(45deg) translateY(-25%); transition: transform .35s var(--v2-ease); } body.csp-v2 .csp-v2-carte__tab.is-on .csp-v2-carte__chev { transform: rotate(225deg); } body.csp-v2 .csp-v2-carte__panel { display: none; opacity: 1; visibility: visible; transform: none; margin: 0 0 1rem; padding: 1.2rem 1.2rem .6rem; border-radius: 1rem; } body.csp-v2 .csp-v2-carte__panel.is-on { display: block; animation: v2-gal-in .45s var(--v2-ease) both; } body.csp-v2 .csp-v2-carte__ptitle { display: none; } body.csp-v2 .csp-v2-carte__price { font-size: 1.25rem; } } /* ========================================================================= v0.1.11 – Une seule page, sans effet de blocs Les sections n'ont plus de fond ni de filet propres : un seul décor continu (bleu nuit, lueurs douces qui se relaient le long de la page, grain très fin). ========================================================================= */ html body.csp-v2 { background: #0a1628; } html body.csp-v2 main.csp-v2-main { position: relative; isolation: isolate; background: radial-gradient(60vw 50vw at 85% 9%, rgba(30, 71, 168, .22), rgba(10, 22, 40, 0) 70%), radial-gradient(55vw 45vw at 10% 24%, rgba(30, 71, 168, .16), rgba(10, 22, 40, 0) 70%), radial-gradient(60vw 50vw at 90% 42%, rgba(212, 184, 92, .05), rgba(10, 22, 40, 0) 70%), radial-gradient(60vw 55vw at 15% 58%, rgba(30, 71, 168, .18), rgba(10, 22, 40, 0) 70%), radial-gradient(60vw 50vw at 85% 76%, rgba(30, 71, 168, .16), rgba(10, 22, 40, 0) 70%), radial-gradient(55vw 45vw at 20% 93%, rgba(212, 184, 92, .045), rgba(10, 22, 40, 0) 70%), linear-gradient(180deg, #0a1628 0%, #0b1a33 35%, #0a1628 65%, #0b1a33 100%); } html body.csp-v2 main.csp-v2-main > section:not(#hero), html body.csp-v2 .csp-v2-partners { max-width: none !important; width: auto !important; margin-left: 0 !important; margin-right: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; } html body.csp-v2 main.csp-v2-main > section:not(#hero)::before, html body.csp-v2 main.csp-v2-main > section:not(#hero)::after { display: none !important; } html body.csp-v2 .csp-v2-partners { background: transparent !important; } /* Grain argentique très léger, comme sur papier d'art */ html body.csp-v2::after { content: ""; position: fixed; inset: 0; z-index: 9998; pointer-events: none; opacity: .028; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } /* Fil d'or de lecture en haut de l'écran */ body.csp-v2 .csp-v2-progress { position: fixed; left: 0; right: 0; top: 0; height: 2px; z-index: 100000; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, rgba(212, 184, 92, .2), #d4b85c 60%, #f0d98a); pointer-events: none; } body.admin-bar.csp-v2 .csp-v2-progress { top: 32px; } @media (max-width: 782px) { body.admin-bar.csp-v2 .csp-v2-progress { top: 46px; } } /* Photos qui se dévoilent comme un rideau à leur arrivée */ body.csp-v2 .csp-v2-reveal { clip-path: inset(0 0 100% 0 round 1.2rem); transition: clip-path 1s cubic-bezier(.7, 0, .2, 1); } body.csp-v2 .csp-v2-reveal.is-revealed { clip-path: inset(0 0 0 0 round 0); } body.csp-v2 .csp-v2-story__main.csp-v2-reveal { clip-path: inset(100% 0 0 0); } body.csp-v2 .csp-v2-story__main.csp-v2-reveal.is-revealed { clip-path: inset(0 0 0 0); } body.csp-v2 .csp-v2-story__round.csp-v2-reveal { clip-path: circle(0% at 50% 50%); transition-delay: .35s; } body.csp-v2 .csp-v2-story__round.csp-v2-reveal.is-revealed { clip-path: circle(50% at 50% 50%); } body.csp-v2 .csp-v2-story__second.csp-v2-reveal { transition-delay: .55s; } /* Galerie : la grande vignette en « bande-annonce » */ body.csp-v2 .csp-v2-gal__reel { position: absolute; inset: 0; z-index: 1; } body.csp-v2 .csp-v2-gal__reel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.02); transition: opacity 1.6s ease, transform 7s linear; } body.csp-v2 .csp-v2-gal__reel img.is-on { opacity: 1; transform: scale(1.12); } body.csp-v2 .csp-v2-gal__item.is-reel .csp-v2-gal__cap { z-index: 2; transform: none; opacity: 1; } body.csp-v2 .csp-v2-gal__item.is-reel .csp-v2-gal__btn:hover .csp-v2-gal__reel img.is-on { filter: brightness(.88); } body.csp-v2 .csp-v2-gal__item.is-reel .csp-v2-gal__btn::before { content: "En images"; position: absolute; top: 1rem; left: 1rem; z-index: 2; padding: .3rem .7rem; border-radius: 999px; background: rgba(10, 22, 40, .55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border: 1px solid rgba(240, 217, 138, .35); font: 600 .58rem var(--v2-sans); letter-spacing: .22em; text-transform: uppercase; color: var(--v2-gold-l); } @media (prefers-reduced-motion: reduce) { body.csp-v2 .csp-v2-reveal { clip-path: none !important; } body.csp-v2 .csp-v2-gal__reel img { transition: opacity .3s; transform: none !important; } } /* ========================================================================= v0.1.12 – Galerie : cadrage choisi dans WordPress ========================================================================= */ body.csp-v2 .csp-v2-gal__img { object-position: var(--pos, 50% 50%); } /* ========================================================================= v0.1.12 – Hero « signature » : logo plus présent, reflet doré qui traverse la marque, poussière de lumière, chiffres qui s'animent. ========================================================================= */ html body.csp-v2 .csp-hero--v2 .csp-hero__sigle { width: clamp(12rem, 16vw, 17rem) !important; height: auto !important; aspect-ratio: 768 / 422; margin: 0 !important; display: block; } html body.csp-v2 .csp-hero--v2 .csp-hero__logo-texte { width: clamp(13rem, 19vw, 21rem) !important; height: auto !important; aspect-ratio: 768 / 351; margin: 0 !important; display: block; filter: drop-shadow(0 4px 18px rgba(0, 0, 0, .45)) !important; } html body.csp-v2 .csp-hero--v2 .csp-hero__logo-animation { border-bottom: 0 !important; margin-bottom: 1.1rem !important; } body.csp-v2 .csp-v2-sheen { position: relative; display: block; line-height: 0; } body.csp-v2 .csp-v2-sheen--texte { margin-top: -.9rem; } body.csp-v2 .csp-v2-sheen::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(105deg, rgba(255, 244, 210, 0) 38%, rgba(255, 246, 220, .95) 48%, rgba(255, 236, 180, .55) 52%, rgba(255, 244, 210, 0) 62%) no-repeat; background-size: 260% 100%; background-position: 160% 0; -webkit-mask: var(--m) 0 0 / 100% 100% no-repeat; mask: var(--m) 0 0 / 100% 100% no-repeat; mix-blend-mode: screen; animation: v2-sheen 7s cubic-bezier(.45, 0, .2, 1) 4.4s infinite; } body.csp-v2 .csp-v2-sheen--sigle::after { animation-delay: 4.1s; opacity: .7; } html body.csp-v2 .csp-hero--v2 .csp-v2-sheen--sigle img, html body.csp-v2 .csp-hero--v2 .csp-v2-sheen--texte img { -webkit-mask: none; mask: none; object-fit: contain; } @keyframes v2-sheen { 0% { background-position: 160% 0; } 32%, 100% { background-position: -60% 0; } } /* Mention et équipements : filets dorés, italique de la marque */ html body.csp-v2 .csp-hero--v2 .csp-v2-hero__tag { display: inline-flex !important; align-items: center; gap: 1rem; margin: 0 0 1rem !important; } html body.csp-v2 .csp-hero--v2 .csp-v2-hero__tag::before, html body.csp-v2 .csp-hero--v2 .csp-v2-hero__tag::after { content: ""; width: clamp(1.5rem, 4vw, 3.5rem); height: 1px; background: linear-gradient(90deg, rgba(212, 184, 92, 0), #d4b85c); } html body.csp-v2 .csp-hero--v2 .csp-v2-hero__tag::after { background: linear-gradient(90deg, #d4b85c, rgba(212, 184, 92, 0)); } body.csp-v2 .csp-v2-hero__services { list-style: none; margin: 0 0 1rem; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .3rem 1.1rem; } body.csp-v2 .csp-v2-hero__services li { display: inline-flex; align-items: center; gap: 1.1rem; font: italic 400 clamp(1.35rem, 2.3vw, 2rem)/1.2 var(--v2-serif); color: var(--v2-ink); text-shadow: 0 2px 16px rgba(0, 0, 0, .6); } body.csp-v2 .csp-v2-hero__services li + li::before { content: ""; width: .38rem; height: .38rem; transform: rotate(45deg); background: var(--v2-gold); box-shadow: 0 0 10px rgba(212, 184, 92, .8); } html body.csp-v2 .csp-hero--v2 .csp-v2-hero__desc { font: 400 clamp(.95rem, 1.2vw, 1.08rem)/1.6 var(--v2-sans) !important; color: rgba(244, 239, 226, .85) !important; letter-spacing: .01em !important; margin: 0 0 1.8rem !important; } /* Entrée chorégraphiée après l'animation du lotus */ @media (min-width: 769px) and (prefers-reduced-motion: no-preference) { html body.csp-v2 .csp-hero--v2 .csp-hero__tagline.csp-v2-hero__tag { animation: v2-rise 1s var(--v2-ease) 2.6s both !important; opacity: 1; } body.csp-v2 .csp-hero--v2 .csp-v2-hero__services li { animation: v2-rise .9s var(--v2-ease) both; } body.csp-v2 .csp-hero--v2 .csp-v2-hero__services li:nth-child(1) { animation-delay: 2.9s; } body.csp-v2 .csp-hero--v2 .csp-v2-hero__services li:nth-child(2) { animation-delay: 3.05s; } body.csp-v2 .csp-hero--v2 .csp-v2-hero__services li:nth-child(3) { animation-delay: 3.2s; } body.csp-v2 .csp-hero--v2 .csp-v2-hero__services li:nth-child(4) { animation-delay: 3.35s; } body.csp-v2 .csp-hero--v2 .csp-v2-hero__desc { animation: v2-rise 1s var(--v2-ease) 3.5s both; } body.csp-v2 .csp-hero--v2 .csp-hero__cta-group { animation: v2-rise 1s var(--v2-ease) 3.7s both; } body.csp-v2 .csp-hero--v2 .csp-v2-stats { animation: v2-rise 1.1s var(--v2-ease) 3.9s both; } } @keyframes v2-rise { from { opacity: 0; transform: translateY(14px); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } } /* Poussière de lumière qui monte lentement */ body.csp-v2 .csp-v2-hero__dust { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; } body.csp-v2 .csp-v2-hero__dust i { position: absolute; bottom: -10px; width: 3px; height: 3px; border-radius: 50%; background: #f0d98a; box-shadow: 0 0 8px 2px rgba(240, 217, 138, .55); opacity: 0; animation: v2-dust 14s linear infinite; } body.csp-v2 .csp-v2-hero__dust i:nth-child(1) { left: 8%; animation-delay: 0s; animation-duration: 16s; } body.csp-v2 .csp-v2-hero__dust i:nth-child(2) { left: 17%; animation-delay: 3s; width: 2px; height: 2px; } body.csp-v2 .csp-v2-hero__dust i:nth-child(3) { left: 26%; animation-delay: 7s; animation-duration: 18s; } body.csp-v2 .csp-v2-hero__dust i:nth-child(4) { left: 34%; animation-delay: 1.5s; width: 2px; height: 2px; } body.csp-v2 .csp-v2-hero__dust i:nth-child(5) { left: 43%; animation-delay: 9s; animation-duration: 15s; } body.csp-v2 .csp-v2-hero__dust i:nth-child(6) { left: 51%; animation-delay: 5s; width: 2px; height: 2px; } body.csp-v2 .csp-v2-hero__dust i:nth-child(7) { left: 58%; animation-delay: 11s; animation-duration: 17s; } body.csp-v2 .csp-v2-hero__dust i:nth-child(8) { left: 64%; animation-delay: 2.5s; } body.csp-v2 .csp-v2-hero__dust i:nth-child(9) { left: 71%; animation-delay: 8s; width: 2px; height: 2px; animation-duration: 19s; } body.csp-v2 .csp-v2-hero__dust i:nth-child(10) { left: 78%; animation-delay: 4s; } body.csp-v2 .csp-v2-hero__dust i:nth-child(11) { left: 84%; animation-delay: 12s; animation-duration: 16s; } body.csp-v2 .csp-v2-hero__dust i:nth-child(12) { left: 90%; animation-delay: 6s; width: 2px; height: 2px; } body.csp-v2 .csp-v2-hero__dust i:nth-child(13) { left: 12%; animation-delay: 10s; animation-duration: 20s; } body.csp-v2 .csp-v2-hero__dust i:nth-child(14) { left: 95%; animation-delay: 13s; } @keyframes v2-dust { 0% { transform: translate3d(0, 0, 0); opacity: 0; } 10% { opacity: .9; } 70% { opacity: .55; } 100% { transform: translate3d(30px, -82vh, 0); opacity: 0; } } /* Bandeau des chiffres : filet doré et valeurs plus présentes */ body.csp-v2 .csp-v2-stats { position: relative; border-top: 0 !important; } body.csp-v2 .csp-v2-stats::before { content: ""; position: absolute; left: 12%; right: 12%; top: 0; height: 1px; background: linear-gradient(90deg, rgba(212, 184, 92, 0), #d4b85c, rgba(212, 184, 92, 0)); } html body.csp-v2 .csp-v2-stats__value { font-variant-numeric: tabular-nums; } @media (prefers-reduced-motion: reduce) { body.csp-v2 .csp-v2-sheen::after, body.csp-v2 .csp-v2-hero__dust { display: none; } } @media (max-width: 768px) { body.csp-v2 .csp-v2-hero__dust i:nth-child(n+8) { display: none; } } /* L'ancien reflet du thème (bande dorée fixe) est remplacé par le reflet qui suit les lettres du logo. */ html body.csp-v2 .csp-hero--v2 .csp-hero__content::after { display: none !important; animation: none !important; } /* ========================================================================= v0.1.13 – Hero : logo et texte réunis (les images du logo ont des marges transparentes) ========================================================================= */ html body.csp-v2 .csp-hero--v2 .csp-v2-sheen--texte { margin-bottom: calc(clamp(13rem, 19vw, 21rem) * -.165); } html body.csp-v2 .csp-hero--v2 .csp-hero__logo-animation { margin-bottom: 1.6rem !important; } @media (max-width: 768px) { html body.csp-v2 .csp-hero--v2 .csp-v2-sheen--texte { margin-bottom: calc(13rem * -.165); } } /* ========================================================================= v0.1.13 – Écran d'ouverture : lotus tracé à l'encre d'or, nom écrit, reflet, ouverture en cercle ========================================================================= */ @property --csp-a { syntax: ''; inherits: false; initial-value: 0deg; } @property --csp-w { syntax: ''; inherits: false; initial-value: 0%; } @property --csp-r { syntax: ''; inherits: false; initial-value: 0px; } html.csp-v2-intro .csp-v2-loader { -webkit-mask: radial-gradient(circle at 50% 44%, transparent var(--csp-r), #000 calc(var(--csp-r) + 1px)); mask: radial-gradient(circle at 50% 44%, transparent var(--csp-r), #000 calc(var(--csp-r) + 1px)); } html.csp-v2-open .csp-v2-loader { animation: csp-ld-iris 1.15s cubic-bezier(.7, 0, .25, 1) forwards; pointer-events: none; } @keyframes csp-ld-iris { to { --csp-r: 150vmax; } } .csp-v2-loader__halo { position: absolute; left: 50%; top: 44%; width: 46vmin; height: 46vmin; transform: translate(-50%, -50%) scale(.6); border-radius: 50%; background: radial-gradient(circle, rgba(212, 184, 92, .28), rgba(212, 184, 92, .07) 45%, rgba(212, 184, 92, 0) 70%); opacity: 0; animation: csp-ld-halo 2.4s ease-out .2s forwards; } @keyframes csp-ld-halo { 40% { opacity: 1; } to { opacity: .55; transform: translate(-50%, -50%) scale(1.15); } } .csp-v2-loader__ring { position: absolute; left: 50%; top: 44%; width: 30vmin; height: 30vmin; transform: translate(-50%, -50%) scale(.4); border-radius: 50%; border: 1px solid rgba(240, 217, 138, .45); opacity: 0; animation: csp-ld-ring 1.8s cubic-bezier(.2, .7, .2, 1) .9s forwards; } @keyframes csp-ld-ring { 20% { opacity: .9; } to { opacity: 0; transform: translate(-50%, -50%) scale(2.6); } } .csp-v2-loader__dust i { position: absolute; left: 50%; top: 44%; width: 2px; height: 2px; border-radius: 50%; background: #f0d98a; box-shadow: 0 0 8px 2px rgba(240, 217, 138, .6); opacity: 0; animation: csp-ld-dust 2.6s ease-out forwards; } @keyframes csp-ld-dust { 0% { opacity: 0; transform: translate(0, 0) scale(.6); } 30% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(1); } } .csp-v2-loader__mark { position: relative; display: flex; flex-direction: column; align-items: center; transform: translateY(-3vh); transition: transform 1.1s cubic-bezier(.7, 0, .25, 1), opacity .7s ease; } html.csp-v2-open .csp-v2-loader__mark { transform: translateY(-3vh) scale(1.12); opacity: 0; } /* v0.1.14 – le logo vectoriel se dessine trait par trait au fil d'or, puis la couleur se remplit */ .csp-v2-ld { display: block; width: min(74vw, 360px); height: auto; overflow: visible; filter: drop-shadow(0 0 16px rgba(212, 184, 92, .22)); } .csp-v2-ld__ss path, .csp-v2-ld__ts path { fill: none; stroke: #f4dc98; stroke-width: 1.15px; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1 1; stroke-dashoffset: 1; } .csp-v2-ld__ss path { animation: csp-ld-trace 1.35s cubic-bezier(.55, .08, .3, 1) calc(.2s + var(--i) * .05s) forwards; } .csp-v2-ld__ts path { animation: csp-ld-trace .95s cubic-bezier(.5, .08, .3, 1) calc(1.2s + var(--i) * .045s) forwards; } @keyframes csp-ld-trace { to { stroke-dashoffset: 0; } } .csp-v2-ld__ss { animation: csp-ld-out .9s ease 2s forwards; } .csp-v2-ld__ts { animation: csp-ld-out .8s ease 2.6s forwards; } @keyframes csp-ld-out { to { opacity: 0; } } .csp-v2-ld__fs, .csp-v2-ld__ft { opacity: 0; } .csp-v2-ld__fs { animation: csp-ld-fill 1.1s ease 1.5s forwards; } .csp-v2-ld__ft { animation: csp-ld-fill .9s ease 2.2s forwards; } @keyframes csp-ld-fill { to { opacity: 1; } } .csp-v2-loader__line { display: block; width: 9rem; height: 1px; margin-top: 1.6rem; background: linear-gradient(90deg, rgba(212, 184, 92, 0), #d4b85c, rgba(212, 184, 92, 0)); transform: scaleX(0); animation: csp-ld-line 1s cubic-bezier(.2, .7, .2, 1) 2.65s forwards; } @keyframes csp-ld-line { to { transform: scaleX(1); } } .csp-v2-loader__tag { margin-top: .9rem; font: 600 11px/1 Inter, system-ui, sans-serif; letter-spacing: .6em; text-transform: uppercase; color: #e8d49a; opacity: 0; animation: csp-ld-tag 1.1s cubic-bezier(.2, .7, .2, 1) 2.8s forwards; } @keyframes csp-ld-tag { to { opacity: .9; letter-spacing: .34em; } } /* Galerie filtrée : grille régulière comme l'ancienne galerie (3 colonnes, vignettes 4:3 identiques, coins arrondis 16 px) ; cadrage selon le point d'intérêt choisi dans l'admin. « Tous » garde la mosaïque. (0.1.14) */ body.csp-v2 .csp-v2-gal__mosaic.is-uni { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: auto; gap: 1rem; } body.csp-v2 .csp-v2-gal__mosaic.is-uni .csp-v2-gal__item { grid-column: auto; grid-row: auto; aspect-ratio: 4 / 3; border-radius: 16px; animation: v2-gal-in .55s var(--v2-ease) both; } @media (max-width: 768px) { body.csp-v2 .csp-v2-gal__mosaic.is-uni { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; } } /* ========================================================================= v0.1.19 – Hero mobile : respiration sous la barre, logo plus mesuré, une ligne par information, boutons de même largeur, chiffres en bandeau compact. L'ordinateur ne change pas. ========================================================================= */ @media (max-width: 640px) { html body.csp-v2 .csp-hero--v2 { justify-content: center !important; min-height: 100svh; padding: calc(4.4rem + 1rem) 0 1.6rem !important; } html body.csp-v2.admin-bar .csp-hero--v2 { padding-top: calc(4.4rem + 1rem + 46px) !important; } html body.csp-v2 .csp-hero--v2 .csp-hero__content { width: 100%; padding: 0 1.25rem !important; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; flex: 0 0 auto; } /* Logo */ html body.csp-v2 .csp-hero--v2 .csp-hero__logo-animation { margin-bottom: 1.3rem !important; } html body.csp-v2 .csp-hero--v2 .csp-hero__sigle { width: 9.2rem !important; } html body.csp-v2 .csp-hero--v2 .csp-hero__logo-texte { width: 11.6rem !important; } html body.csp-v2 .csp-hero--v2 .csp-v2-sheen--texte { margin-bottom: calc(11.6rem * -.165); } /* Accroche : une seule ligne, sans filets latéraux */ html body.csp-v2 .csp-hero--v2 .csp-v2-hero__tag { display: block !important; max-width: 100%; margin: 0 0 1rem !important; font-size: .62rem !important; letter-spacing: .24em !important; line-height: 1.6 !important; text-align: center; } html body.csp-v2 .csp-hero--v2 .csp-v2-hero__tag::before, html body.csp-v2 .csp-hero--v2 .csp-v2-hero__tag::after { display: none !important; } html body.csp-v2 .csp-hero--v2 .csp-v2-hero__tag span { font-size: 1em !important; } /* Les 4 espaces sur une ligne */ body.csp-v2 .csp-v2-hero__services { flex-wrap: nowrap; gap: .55rem; margin: 0 0 1rem; } body.csp-v2 .csp-v2-hero__services li { gap: .55rem; font-size: 1.16rem; white-space: nowrap; } body.csp-v2 .csp-v2-hero__services li + li::before { width: .26rem; height: .26rem; } html body.csp-v2 .csp-hero--v2 .csp-v2-hero__desc { max-width: 22.5rem; padding: 0 !important; margin: 0 auto 1.4rem !important; font-size: .84rem !important; line-height: 1.6 !important; letter-spacing: .005em !important; text-wrap: balance; } /* Boutons : même largeur, l'un sous l'autre */ html body.csp-v2 .csp-hero--v2 .csp-hero__cta-group { display: grid !important; grid-template-columns: 1fr; gap: .65rem !important; width: 100%; max-width: 20rem; margin: 0 auto !important; } html body.csp-v2 .csp-hero--v2 .csp-hero__cta-group .btn-csp { width: 100% !important; min-width: 0 !important; margin: 0 !important; padding: 1rem .8rem !important; font-size: .68rem !important; letter-spacing: .2em !important; box-sizing: border-box; justify-content: center; text-align: center; } /* Chiffres : bandeau compact sur 4 colonnes */ body.csp-v2 .csp-v2-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; width: calc(100% - 1.5rem); margin: 1.8rem auto 0; padding: .9rem .2rem .85rem; } body.csp-v2 .csp-v2-stats__sep { display: none; } body.csp-v2 .csp-v2-stats__item { gap: .3rem; padding: 0 .25rem; } body.csp-v2 .csp-v2-stats__item + .csp-v2-stats__item, body.csp-v2 .csp-v2-stats__sep + .csp-v2-stats__item { border-left: 1px solid rgba(212, 184, 92, .18); } body.csp-v2 .csp-v2-stats__value { font-size: 1.22rem; white-space: nowrap; } body.csp-v2 .csp-v2-stats__value sup { font-size: .55em; } body.csp-v2 .csp-v2-stats__label { font-size: .52rem; letter-spacing: .08em; line-height: 1.35; } } @media (max-width: 360px) { body.csp-v2 .csp-v2-hero__services li { font-size: 1.04rem; } html body.csp-v2 .csp-hero--v2 .csp-v2-hero__tag { font-size: .56rem !important; letter-spacing: .18em !important; } } /* ========================================================================= v0.1.21 – Finitions mobile : équipements tous visibles, avis « certificat », galerie sans trou, filtres visibles d'un coup d'œil, photos des filtres en grand, partage en ligne, hero aéré. ========================================================================= */ @media (max-width: 640px) { /* Hero : un vrai temps entre l'identité (lieu + espaces) et la phrase d'accroche */ body.csp-v2 .csp-v2-hero__services { margin-bottom: 1.9rem !important; } } @media (max-width: 860px) { /* Équipements : les 4 visibles d'un coup, en vignettes 2 × 2 numérotées ; le filet doré suit le défilement automatique */ body.csp-v2 .csp-v2-index__nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; overflow: visible; padding: 0; counter-reset: eq; } body.csp-v2 .csp-v2-index__item { position: relative; flex: none; width: 100%; min-height: 4.4rem; padding: .85rem .95rem .9rem; border: 1px solid rgba(212, 184, 92, .26); border-radius: .9rem; background: rgba(255, 255, 255, .025); justify-content: flex-end; gap: .25rem; overflow: hidden; counter-increment: eq; text-align: left; } body.csp-v2 .csp-v2-index__item::before { content: "0" counter(eq); font: italic 500 .85rem/1 var(--v2-serif); color: var(--v2-gold); } body.csp-v2 .csp-v2-index__item.is-on { background: linear-gradient(160deg, rgba(212, 184, 92, .2), rgba(212, 184, 92, .06)); border-color: var(--v2-gold); box-shadow: 0 10px 26px rgba(0, 0, 0, .3); } body.csp-v2 .csp-v2-index__name { font-size: 1.08rem; line-height: 1.15; white-space: normal; color: rgba(244, 239, 226, .72); } body.csp-v2 .csp-v2-index__item.is-on .csp-v2-index__name { color: var(--v2-gold-l); } body.csp-v2 .csp-v2-index__run { display: block; bottom: 0; } body.csp-v2 .csp-v2-index__badge { display: none; } body.csp-v2 .csp-v2-index__item:last-child:nth-child(odd) { grid-column: 1 / -1; } /* Galerie : filtres tous visibles (2 × 2), sans défilement caché */ body.csp-v2 .csp-v2-gal__filters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; overflow: visible; border-bottom: 0; margin-bottom: 1.4rem; } body.csp-v2 .csp-v2-gal__filter { display: flex; align-items: center; justify-content: center; min-height: 2.9rem; padding: .6rem .5rem; border: 1px solid rgba(212, 184, 92, .26); border-radius: .75rem; white-space: normal; text-align: center; font-size: .62rem; letter-spacing: .14em; line-height: 1.3; } body.csp-v2 .csp-v2-gal__filter::after { display: none; } body.csp-v2 .csp-v2-gal__filter.is-on { background: linear-gradient(135deg, #c9a84c, #b8963f); border-color: transparent; color: var(--v2-navy) !important; } body.csp-v2 .csp-v2-gal__filter.is-on sup { color: var(--v2-navy); } /* Photos des filtres : en grand, une par ligne */ body.csp-v2 .csp-v2-gal__mosaic.is-uni { grid-template-columns: 1fr !important; gap: .8rem; } /* Partage : une seule ligne de boutons sous la phrase */ body.csp-v2 .csp-v2-gal__share { display: flex !important; flex-direction: row !important; flex-wrap: wrap; justify-content: center; align-items: center; gap: .7rem !important; } body.csp-v2 .csp-v2-gal__share .csp-share-inline__label { flex: 0 0 100%; margin: 0 0 .3rem; text-align: center; } body.csp-v2 .csp-v2-gal__share .csp-share-inline__btn { margin: 0 !important; } } @media (max-width: 960px) { /* Avis : en-tête « certificat » — médaille à gauche, plateformes à droite — puis le livre d'or, puis l'invitation à laisser un avis */ html body.csp-v2 .csp-v2-avis__wrap { display: grid; grid-template-columns: 8.4rem minmax(0, 1fr) !important; column-gap: 1.2rem !important; row-gap: 0 !important; align-items: center; } body.csp-v2 .csp-v2-avis__side { display: contents; } body.csp-v2 .csp-v2-avis__side > .csp-section__label, body.csp-v2 .csp-v2-avis__side > .csp-v2-title { grid-column: 1 / -1; justify-self: start; } body.csp-v2 .csp-v2-avis__side > .csp-v2-title { margin-bottom: 1.8rem !important; } body.csp-v2 .csp-v2-avis .csp-v2-ring { grid-column: 1; width: 8.4rem; height: 8.4rem; margin: 0; } body.csp-v2 .csp-v2-avis .csp-v2-ring__n { font-size: 2.45rem; } body.csp-v2 .csp-v2-avis .csp-v2-ring__s { font-size: .54rem; } body.csp-v2 .csp-v2-avis .csp-v2-sources { grid-column: 2; } body.csp-v2 .csp-v2-avis .csp-v2-sources li { flex-wrap: wrap; gap: .15rem .6rem; padding: .7rem 0; font-size: .8rem; } body.csp-v2 .csp-v2-avis .csp-v2-sources li > a { flex: 1; } body.csp-v2 .csp-v2-avis .csp-v2-sources strong { flex: 0 0 100%; padding-left: 2.4rem; font-size: 1.02rem; } body.csp-v2 .csp-v2-avis .csp-v2-mono { width: 1.8rem; height: 1.8rem; } body.csp-v2 .csp-v2-book { grid-column: 1 / -1; margin-top: 2.2rem; } body.csp-v2 .csp-v2-avis__side > .csp-v2-btn { grid-column: 1 / -1; order: 9; justify-self: center; margin-top: 1.6rem; } /* Le livre d'or : carte lumineuse, filet doré, grand guillemet */ body.csp-v2 .csp-v2-book__card { background: radial-gradient(120% 80% at 0% 0%, rgba(212, 184, 92, .16), rgba(212, 184, 92, 0) 55%), linear-gradient(165deg, #172f63, #0d1d40) !important; border: 1px solid rgba(212, 184, 92, .32) !important; box-shadow: 0 26px 50px rgba(0, 0, 0, .45); } body.csp-v2 .csp-v2-book__card::before { content: "“"; position: absolute; left: 1.2rem; top: -.35rem; font: 400 5.2rem/1 var(--v2-serif); color: rgba(240, 217, 138, .5); pointer-events: none; } body.csp-v2 .csp-v2-book__card .csp-v2-book__top { padding-left: 2.3rem; } body.csp-v2 .csp-v2-book__card .csp-v2-stars { font-size: .95rem; } body.csp-v2 .csp-v2-avis { background: radial-gradient(80% 50% at 50% 62%, #16306a 0%, var(--v2-navy) 75%) !important; } } @media (max-width: 860px) { /* Histoire (mobile) : composition resserrée — le médaillon chevauche l'épaule de l'arche, la photo du gîte mord sur son angle, l'encadré tarif flotte à cheval sur le bas de la piscine. Calculs sur la largeur. */ html body.csp-v2 .csp-v2-story__visual { container-type: inline-size; padding-bottom: 3.4rem; } html body.csp-v2 .csp-v2-story__visual::after { content: ""; position: absolute; left: 10%; right: 0; top: 18%; bottom: 8%; z-index: -1; background: radial-gradient(closest-side, rgba(212, 184, 92, .14), rgba(212, 184, 92, 0)); pointer-events: none; } html body.csp-v2 .csp-v2-story__main { width: 70%; } html body.csp-v2 .csp-v2-story__round { width: 36%; right: 6%; top: calc(1.5rem + 3cqw); } html body.csp-v2 .csp-v2-story__second { width: 50%; right: 0; bottom: auto; top: calc(1.5rem + 58cqw); } html body.csp-v2 .csp-v2-story__badge { position: absolute; margin: 0; align-items: flex-start; text-align: left; left: -.35rem; bottom: auto; top: calc(1.5rem + 87.5cqw); transform: translateY(-46%); width: 47cqw; min-width: 0; max-width: 47cqw; padding: .8rem .9rem .75rem; gap: .25rem; box-sizing: border-box; box-shadow: 0 18px 40px rgba(0, 0, 0, .5); } html body.csp-v2 .csp-v2-story__badge-t { font-size: 1rem; } html body.csp-v2 .csp-v2-story__badge-s { font-size: .58rem; letter-spacing: .03em; line-height: 1.35; } html body.csp-v2 .csp-v2-story__badge-p { margin-top: .25rem; padding-top: .45rem; font-size: .54rem; letter-spacing: .1em; } html body.csp-v2 .csp-v2-story__badge-p strong { font-size: 1.25rem; } } @media (max-width: 860px) { /* Partenaires (mobile) : pastille, titre et filet doré centrés */ html body.csp-v2 .csp-v2-partners__head, html body.csp-v2 .csp-v2-partners__titles { align-items: center; text-align: center; width: 100%; } html body.csp-v2 .csp-v2-partners .csp-v2-pill { align-self: center; } html body.csp-v2 .csp-v2-partners .csp-v2-title::after { margin-left: auto !important; margin-right: auto !important; background: linear-gradient(90deg, rgba(212, 184, 92, 0), var(--v2-gold), rgba(212, 184, 92, 0)) !important; } } @media (max-width: 860px) { /* Galerie (mobile) : les photos parlent d'elles-mêmes ; le nom s'affiche en grand au toucher (visionneuse). Seule la grande vignette garde une légende, réduite et discrète. */ html body.csp-v2 .csp-v2-gal__mosaic .csp-v2-gal__item:not(.is-reel):not(.is-xl) .csp-v2-gal__cap, html body.csp-v2 .csp-v2-gal__strip .csp-v2-gal__cap { display: none !important; } html body.csp-v2 .csp-v2-gal__item.is-reel .csp-v2-gal__cap, html body.csp-v2 .csp-v2-gal__item.is-xl .csp-v2-gal__cap { padding: 2.4rem .9rem .75rem; background: linear-gradient(0deg, rgba(5, 11, 22, .6), rgba(5, 11, 22, 0)); } html body.csp-v2 .csp-v2-gal__item.is-reel .csp-v2-gal__name, html body.csp-v2 .csp-v2-gal__item.is-xl .csp-v2-gal__name { font-size: 1.05rem !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } html body.csp-v2 .csp-v2-gal__item.is-reel .csp-v2-gal__cat, html body.csp-v2 .csp-v2-gal__item.is-xl .csp-v2-gal__cat { font-size: .52rem; } } @media (max-width: 860px) { /* Équipements (mobile) : la fiche affichée prend sa propre hauteur (plus de vide sous les fiches courtes) */ html body.csp-v2 .csp-v2-index__panel { display: none; } html body.csp-v2 .csp-v2-index__panel.is-on { display: flex; animation: v2-gal-in .55s var(--v2-ease) both; } } /* Histoire : composition plus soudée sur ordinateur aussi, et ombres des photos jamais coupées en rectangle */ @media (min-width: 861px) { html body.csp-v2 .csp-v2-story__round { right: 9%; top: 1.2rem; } html body.csp-v2 .csp-v2-story__second { right: 2%; width: 47%; bottom: 3.4rem; } } html body.csp-v2 .csp-v2-story__main.csp-v2-reveal.is-revealed, html body.csp-v2 .csp-v2-story__second.csp-v2-reveal.is-revealed { clip-path: inset(-90px -90px -90px -90px); } html body.csp-v2 .csp-v2-story__second.csp-v2-reveal:not(.is-revealed) { clip-path: inset(0 0 100% 0); } .csp-v2-nw { white-space: nowrap; } /* Hero : phrase d'accroche équilibrée sur deux lignes, sans mot orphelin (toutes tailles) */ html body.csp-v2 .csp-hero--v2 .csp-v2-hero__desc { padding: 0 !important; max-width: 38rem; margin-left: auto !important; margin-right: auto !important; text-wrap: balance; } @media (max-width: 860px) { /* Mobile : tous les en-têtes de section centrés (pastille, titre, filet, texte). Sur ordinateur, les en-têtes « à gauche » restent volontaires : ils accompagnent une mise en page en deux colonnes. */ html body.csp-v2 .csp-v2-head--split, html body.csp-v2 .csp-v2-head__main { align-items: center; text-align: center; } html body.csp-v2 .csp-v2-head .csp-section__label { align-self: center; } html body.csp-v2 .csp-v2-head .csp-v2-intro { margin-left: auto; margin-right: auto; text-align: center; } html body.csp-v2 .csp-v2-avis__side > .csp-section__label, html body.csp-v2 .csp-v2-avis__side > .csp-v2-title { justify-self: center; text-align: center; } html body.csp-v2 :is(.csp-v2-head:not(.csp-v2-head--center) .csp-v2-title, .csp-v2-avis__side .csp-v2-title)::after { margin-left: auto !important; margin-right: auto !important; background: linear-gradient(90deg, rgba(212, 184, 92, 0), var(--v2-gold), rgba(212, 184, 92, 0)) !important; } /* Encadré « Spa privatif & gîte » : le titre tient sur une ligne, l'encadré s'ajuste à lui */ html body.csp-v2 .csp-v2-story__badge { width: min-content; max-width: none; } html body.csp-v2 .csp-v2-story__badge-t { white-space: nowrap; font-size: .98rem; } html body.csp-v2 .csp-v2-story__second { width: 47%; } } /* Hero : même entrée chorégraphiée sur mobile que sur ordinateur (l'accroche et les 4 espaces se dévoilent aussi), et rien ne démarre tant que l'écran d'ouverture du logo n'est pas terminé. */ @media (prefers-reduced-motion: no-preference) { html body.csp-v2 .csp-hero--v2 .csp-hero__tagline.csp-v2-hero__tag { animation: v2-rise 1s var(--v2-ease) 2.6s both !important; } body.csp-v2 .csp-hero--v2 .csp-v2-hero__services li { animation: v2-rise .9s var(--v2-ease) both; } body.csp-v2 .csp-hero--v2 .csp-v2-hero__services li:nth-child(1) { animation-delay: 2.9s; } body.csp-v2 .csp-hero--v2 .csp-v2-hero__services li:nth-child(2) { animation-delay: 3.05s; } body.csp-v2 .csp-hero--v2 .csp-v2-hero__services li:nth-child(3) { animation-delay: 3.2s; } body.csp-v2 .csp-hero--v2 .csp-v2-hero__services li:nth-child(4) { animation-delay: 3.35s; } html body.csp-v2 .csp-hero--v2 .csp-v2-hero__desc { animation: v2-rise 1s var(--v2-ease) 3.5s both !important; } html body.csp-v2 .csp-hero--v2 .csp-hero__cta-group { animation: v2-rise 1s var(--v2-ease) 3.7s both !important; } body.csp-v2 .csp-hero--v2 .csp-v2-stats { animation: v2-rise 1.1s var(--v2-ease) 3.9s both; } } html.csp-v2-loading body.csp-v2 .csp-hero--v2 .csp-hero__tagline.csp-v2-hero__tag, html.csp-v2-loading body.csp-v2 .csp-hero--v2 .csp-v2-hero__desc, html.csp-v2-loading body.csp-v2 .csp-hero--v2 .csp-hero__cta-group, html.csp-v2-loading body.csp-v2 .csp-hero--v2 .csp-v2-hero__services li { animation-play-state: paused !important; } /* Le thème rend la phrase, le texte et les boutons du hero visibles d'office (~2 s, règle prioritaire « csp-visible »), ce qui court-circuitait notre dévoilement. L'opacité suit désormais une variable animée que le thème ne touche pas. */ @property --v2o { syntax: ''; inherits: false; initial-value: 1; } @keyframes v2-rise { from { --v2o: 0; opacity: 0; transform: translateY(14px); filter: blur(4px); } to { --v2o: 1; opacity: 1; transform: none; filter: none; } } html body.csp-v2 .csp-hero--v2 :is(.csp-v2-hero__tag, .csp-v2-hero__desc, .csp-hero__cta-group, .csp-v2-hero__services li, .csp-v2-stats) { opacity: var(--v2o) !important; } /* Hero : un peu d'air entre le sigle (lotus) et le nom « Cocooning Spa » */ html body.csp-v2 .csp-hero--v2 .csp-v2-sheen--texte { margin-top: .35rem; } @media (max-width: 768px) { html body.csp-v2 .csp-hero--v2 .csp-v2-sheen--texte { margin-top: .3rem; } } /* Hero tablette / ordinateur : le logo démarre toujours sous la barre de navigation */ @media (min-width: 641px) { html body.csp-v2 .csp-hero--v2 { padding-top: calc(5.6rem + 1.2rem) !important; justify-content: safe center !important; } } /* Accroche « Spa privatif · Marck, près de Calais » : plus d'espace parasite avant « près de Calais » (filets écartés par marge, pas par gap) */ html body.csp-v2 .csp-hero--v2 .csp-v2-hero__tag { gap: 0 !important; } html body.csp-v2 .csp-hero--v2 .csp-v2-hero__tag::before { margin-right: 1rem; } html body.csp-v2 .csp-hero--v2 .csp-v2-hero__tag::after { margin-left: 1rem; } html body.csp-v2 .csp-hero--v2 .csp-v2-hero__tag span { margin-left: .12em; } @media (max-width: 640px) { html body.csp-v2 .csp-hero--v2 .csp-v2-hero__tag span { margin-left: 0; } } /* Hero : le lotus est désormais vectoriel (net, jamais rogné, quelle que soit la taille d'écran) */ html body.csp-v2 .csp-hero--v2 .csp-v2-hero__lotus-wrap { display: block; line-height: 0; overflow: visible; } html body.csp-v2 .csp-hero--v2 svg.csp-hero__sigle { display: block; height: auto !important; aspect-ratio: auto !important; overflow: visible; filter: drop-shadow(0 4px 18px rgba(0, 0, 0, .45)); } /* Le thème remonte le bloc logo de 48 px sur ordinateur : il finissait sous la barre sur les écrans peu hauts */ html body.csp-v2 .csp-hero--v2 .csp-hero__logo-animation { margin-top: 0 !important; } /* ========================================================================= v0.1.36 – Hero « La Goutte d'or » (eau vivante, passage de relais du logo, goutte d'or) ========================================================================= */ body.csp-water .csp-v2-hero__media.has-water { inset: 0 !important; background-image: none !important; animation: none !important; } .csp-water__cv { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity .9s ease; } .has-water > .csp-water__cv { opacity: 1; } .csp-water__ghost { position: fixed; z-index: 100003; margin: 0; pointer-events: none; transform-origin: 0 0; overflow: visible; will-change: transform; filter: drop-shadow(0 0 18px rgba(212, 184, 92, .28)); } .csp-water__drop { position: fixed; z-index: 100003; width: 9px; height: 9px; border-radius: 50%; pointer-events: none; background: radial-gradient(circle at 40% 35%, #fff6d6 0%, #f0d98a 45%, #b8963f 100%); box-shadow: 0 0 14px 4px rgba(240, 217, 138, .75), 0 0 34px 10px rgba(212, 184, 92, .35); } /* Arrivée : le texte du hero suit la goutte, sans attente */ @media (prefers-reduced-motion: no-preference) { html.csp-water-intro body.csp-water .csp-hero--v2 .csp-hero__tagline.csp-v2-hero__tag { animation-delay: 1s !important; } html.csp-water-intro body.csp-water .csp-hero--v2 .csp-v2-hero__services li:nth-child(1) { animation-delay: 1.25s !important; } html.csp-water-intro body.csp-water .csp-hero--v2 .csp-v2-hero__services li:nth-child(2) { animation-delay: 1.4s !important; } html.csp-water-intro body.csp-water .csp-hero--v2 .csp-v2-hero__services li:nth-child(3) { animation-delay: 1.55s !important; } html.csp-water-intro body.csp-water .csp-hero--v2 .csp-v2-hero__services li:nth-child(4) { animation-delay: 1.7s !important; } html.csp-water-intro body.csp-water .csp-hero--v2 .csp-v2-hero__desc { animation-delay: 1.85s !important; } html.csp-water-intro body.csp-water .csp-hero--v2 .csp-hero__cta-group { animation-delay: 2.05s !important; } html.csp-water-intro body.csp-water .csp-hero--v2 .csp-v2-stats { animation-delay: 2.3s !important; } /* Visites suivantes (rechargement, choix des cookies…) : tout apparaît aussitôt, en douceur, sans rejouer la mise en scène */ html.csp-v2-nointro body.csp-water .csp-hero--v2 :is(.csp-hero__tagline.csp-v2-hero__tag, .csp-v2-hero__services li, .csp-v2-hero__desc, .csp-hero__cta-group, .csp-v2-stats) { animation-duration: .7s !important; animation-delay: .05s !important; } } /* Hero : proportion lotus / nom fidèle au logo officiel (le lotus vectoriel n'a pas les marges du PNG : on le recale). Largeur du lotus ≈ 90 % de la largeur du nom « Cocooning Spa ». */ html body.csp-v2 .csp-hero--v2 svg.csp-hero__sigle { width: clamp(7.3rem, 10.65vw, 11.75rem) !important; margin: 0 auto !important; } @media (max-width: 768px) { html body.csp-v2 .csp-hero--v2 svg.csp-hero__sigle { width: 7.3rem !important; } } @media (max-width: 640px) { html body.csp-v2 .csp-hero--v2 svg.csp-hero__sigle { width: 6.5rem !important; } } /* Mobile : libellés des chiffres du hero lisibles (8 px → 9,4 px) */ @media (max-width: 640px) { html body.csp-v2 .csp-v2-stats__label { font-size: .59rem !important; letter-spacing: .06em !important; } } /* Ordinateur : le logo reprend la première place dans la hiérarchie du hero (≈ +20 %), proportion lotus / nom conservée */ @media (min-width: 769px) { html body.csp-v2 .csp-hero--v2 .csp-hero__logo-texte { width: clamp(15rem, 22vw, 25rem) !important; } html body.csp-v2 .csp-hero--v2 .csp-v2-sheen--texte { margin-bottom: calc(clamp(15rem, 22vw, 25rem) * -.165); } html body.csp-v2 .csp-hero--v2 svg.csp-hero__sigle { width: clamp(8.4rem, 12.3vw, 14rem) !important; } } /* Le thème rejouait sa propre apparition (rideau + fondu) sur le lotus et le nom après l'atterrissage du logo : avec « La Goutte d'or », le logo est déjà posé, on neutralise ce second effet. */ body.csp-water .csp-hero--v2 :is(svg.csp-hero__sigle, .csp-hero__logo-texte) { animation: none !important; opacity: 1 !important; clip-path: none !important; -webkit-clip-path: none !important; } html.csp-v2-nointro body.csp-water .csp-hero--v2 .csp-hero__logo-animation { animation: v2-rise .8s var(--v2-ease) both !important; } /* ========================================================================= v0.1.41 – Hero « signature » (aperçu) : épuré, plongée au défilement, chiffres en bandeau sous le hero ========================================================================= */ body.csp-water .csp-hero--v2 { --dive: 0; } body.csp-water .csp-hero--v2 .csp-hero__content { will-change: transform, opacity; transform-origin: 50% 35%; } /* l'eau monte : un voile bleu nuit liquide envahit le bas du hero et s'y fond dans la page */ body.csp-water .csp-water__depth { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; pointer-events: none; height: calc(18% + var(--dive) * 70%); background: linear-gradient(180deg, rgba(10, 22, 40, 0) 0%, rgba(10, 22, 40, calc(.35 + var(--dive) * .5)) 45%, #0a1628 100%); } /* un seul appel à l'action, le second devient une invitation à descendre */ body.csp-water .csp-hero--v2 .csp-hero__cta-group { display: flex !important; flex-direction: column !important; align-items: center !important; gap: 1.3rem !important; } body.csp-water .csp-v2-hero__more { display: inline-flex; align-items: center; gap: .6rem; padding: .3rem .2rem; border: 0; background: none; cursor: pointer; font: 500 .72rem/1 Montserrat, var(--v2-sans); letter-spacing: .24em; text-transform: uppercase; color: rgba(244, 239, 226, .82); transition: color .3s; } body.csp-water .csp-v2-hero__more svg { color: var(--v2-gold); animation: csp-more 2.4s ease-in-out infinite; } body.csp-water .csp-v2-hero__more:hover { color: var(--v2-gold-l); } @keyframes csp-more { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } } body.csp-water .csp-hero--v2 .csp-v2-hero__services { margin-bottom: 2.4rem !important; } @media (max-width: 640px) { body.csp-water .csp-hero--v2 .csp-v2-hero__services { margin-bottom: 2rem !important; } } /* chiffres : bandeau qui chevauche le bas du hero, en ouverture de la page */ body.csp-water .csp-v2-statsband { position: relative; z-index: 4; margin-top: -3rem; padding: 0 1.25rem; } body.csp-water .csp-v2-statsband .csp-v2-stats { margin: 0 auto; background: rgba(10, 22, 40, .72); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 24px 50px rgba(0, 0, 0, .35); } @media (max-width: 640px) { body.csp-water .csp-v2-statsband { margin-top: -2rem; padding: 0 .75rem; } body.csp-water .csp-v2-statsband .csp-v2-stats { width: 100%; } } /* Hero signature : la phrase d'accroche, sous les quatre espaces, en ton de confidence — un filet d'or l'en sépare */ body.csp-water .csp-hero--v2 .csp-v2-hero__services { margin-bottom: 1.15rem !important; } html body.csp-water .csp-hero--v2 .csp-v2-hero__desc { position: relative; max-width: 30rem; margin: 0 auto 2.1rem !important; padding-top: 1.05rem !important; font: 300 clamp(.92rem, 1.05vw, 1.02rem)/1.65 var(--v2-sans) !important; letter-spacing: .03em !important; color: rgba(244, 239, 226, .8) !important; text-wrap: balance; } html body.csp-water .csp-hero--v2 .csp-v2-hero__desc::before { content: ""; position: absolute; left: 50%; top: 0; width: 2.6rem; height: 1px; transform: translateX(-50%); background: linear-gradient(90deg, rgba(212, 184, 92, 0), #d4b85c, rgba(212, 184, 92, 0)); } @media (max-width: 640px) { html body.csp-water .csp-hero--v2 .csp-v2-hero__desc { max-width: 21rem; font-size: .84rem !important; margin-bottom: 1.7rem !important; } } /* Bouton « Ambiance » (son coupé par défaut) */ body.csp-water .csp-water__sound { position: absolute; left: clamp(1rem, 3vw, 2.6rem); bottom: clamp(4.4rem, 9vh, 5.6rem); z-index: 5; display: inline-flex; align-items: center; gap: .65rem; padding: .55rem .9rem .55rem .75rem; border: 1px solid rgba(240, 217, 138, .35); border-radius: 999px; background: rgba(10, 22, 40, .45); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); cursor: pointer; font: 500 .62rem/1 Montserrat, var(--v2-sans); letter-spacing: .22em; text-transform: uppercase; color: rgba(244, 239, 226, .78); opacity: calc(1 - var(--dive, 0) * 2); transition: border-color .3s, color .3s; } body.csp-water .csp-water__sound:hover, body.csp-water .csp-water__sound.is-on { border-color: var(--v2-gold); color: var(--v2-gold-l); } .csp-water__bars { display: inline-flex; align-items: flex-end; gap: 2px; height: 12px; } .csp-water__bars i { width: 2px; height: 3px; background: currentColor; border-radius: 1px; transition: height .3s; } .csp-water__sound.is-on .csp-water__bars i { animation: csp-bars 1.1s ease-in-out infinite; } .csp-water__sound.is-on .csp-water__bars i:nth-child(2) { animation-delay: .2s; } .csp-water__sound.is-on .csp-water__bars i:nth-child(3) { animation-delay: .45s; } .csp-water__sound.is-on .csp-water__bars i:nth-child(4) { animation-delay: .1s; } @keyframes csp-bars { 0%, 100% { height: 3px; } 50% { height: 12px; } } @media (max-width: 640px) { body.csp-water .csp-water__sound { left: auto; right: .9rem; bottom: 1rem; padding: .5rem .75rem; } } /* 0.1.44 — voile de profondeur derrière le logo : la photo s'estompe en douceur (flou léger + halo marine), toute la pièce reste visible autour */ body.csp-water .csp-water__veil { position: absolute; inset: 0; pointer-events: none; z-index: 1; opacity: 0; transition: opacity 1.4s ease .3s; background: radial-gradient(ellipse 30% 46% at var(--vx, 50%) var(--vy, 40%), rgba(8, 17, 33, .62) 0%, rgba(8, 17, 33, .38) 45%, rgba(8, 17, 33, 0) 100%); /* le léger flou derrière le logo est désormais calculé par l'eau elle-même (hero-water.js) : plus de backdrop-filter, très coûteux sur l'eau animée */ -webkit-mask-image: radial-gradient(ellipse 34% 52% at var(--vx, 50%) var(--vy, 40%), #000 0%, rgba(0,0,0,.75) 45%, transparent 100%); mask-image: radial-gradient(ellipse 34% 52% at var(--vx, 50%) var(--vy, 40%), #000 0%, rgba(0,0,0,.75) 45%, transparent 100%); } body.csp-water .has-water > .csp-water__veil { opacity: 1; } @media (max-width: 640px) { body.csp-water .csp-water__veil { background: radial-gradient(ellipse 62% 34% at var(--vx, 50%) var(--vy, 36%), rgba(8, 17, 33, .58) 0%, rgba(8, 17, 33, .3) 50%, rgba(8, 17, 33, 0) 100%); -webkit-mask-image: radial-gradient(ellipse 70% 40% at var(--vx, 50%) var(--vy, 36%), #000 0%, transparent 100%); mask-image: radial-gradient(ellipse 70% 40% at var(--vx, 50%) var(--vy, 36%), #000 0%, transparent 100%); } } /* 0.1.46 — phrase d'accroche en Cormorant italique, sur une ligne, sous son filet d'or (même emplacement) */ html body.csp-water .csp-hero--v2 .csp-v2-hero__desc { max-width: 36rem; padding-top: 1.1rem !important; margin-bottom: 1.9rem !important; font: italic 400 clamp(1.12rem, 1.4vw, 1.32rem)/1.5 "Cormorant Garamond", var(--v2-serif, serif) !important; letter-spacing: .01em !important; color: rgba(244, 239, 226, .86) !important; } @media (max-width: 640px) { html body.csp-water .csp-hero--v2 .csp-v2-hero__desc { max-width: 20rem; font-size: 1.04rem !important; margin-bottom: 1.6rem !important; } } /* 0.1.48 — reflet de lumière sur le sigle vectoriel (même rythme que sur le nom) */ .csp-v2-lotus-sheen { mix-blend-mode: screen; opacity: .7; animation: v2-lotus-sheen 7s cubic-bezier(.45, 0, .2, 1) 4.1s infinite; } @keyframes v2-lotus-sheen { 0% { translate: 0 0; } 32%, 100% { translate: 2600px 0; } } @media (prefers-reduced-motion: reduce) { .csp-v2-lotus-sheen { display: none; } } /* Mobile : bouton « Ambiance » discret en bas à gauche du premier écran (100svh − 4.6rem), indépendant de la bannière saisonnière et de la barre de navigation */ @media (max-width: 640px) { body.csp-water .csp-water__sound { top: calc(100vh - 4.6rem); top: calc(100svh - 4.6rem); bottom: auto; left: .9rem; right: auto; padding: .45rem .7rem; font-size: .56rem; background: rgba(10, 22, 40, .35); } } /* 0.1.57 — mobile : les chiffres ne chevauchent plus le bas du hero (jamais coupés à l'écran d'arrivée) */ @media (max-width: 640px) { body.csp-water .csp-v2-statsband { margin-top: -1rem; } } /* le haut de la vraie bande (cadre et filet d'or) affleure au bas du premier écran */ /* 0.1.65 — la vraie bande des chiffres affleure au bas du premier écran (son cadre et son filet d'or), ses valeurs apparaissent et comptent au moment où le visiteur la fait entrer dans la zone visible. */ body.csp-water .csp-v2-statsband :is(.csp-v2-stats__item, .csp-v2-stats__sep) { opacity: 0; transform: translateY(10px); transition: opacity .9s ease, transform .9s cubic-bezier(.2, .7, .2, 1); } body.csp-water .csp-v2-statsband.is-live :is(.csp-v2-stats__item, .csp-v2-stats__sep) { opacity: 1; transform: none; } body.csp-water .csp-v2-statsband.is-live :is(.csp-v2-stats__item, .csp-v2-stats__sep):nth-child(2) { transition-delay: .08s; } body.csp-water .csp-v2-statsband.is-live :is(.csp-v2-stats__item, .csp-v2-stats__sep):nth-child(3) { transition-delay: .16s; } body.csp-water .csp-v2-statsband.is-live :is(.csp-v2-stats__item, .csp-v2-stats__sep):nth-child(4) { transition-delay: .24s; } body.csp-water .csp-v2-statsband.is-live :is(.csp-v2-stats__item, .csp-v2-stats__sep):nth-child(n+5) { transition-delay: .32s; } .csp-v2-vh-probe { position: fixed; left: 0; top: 0; width: 0; height: 100svh; visibility: hidden; pointer-events: none; } @media (prefers-reduced-motion: reduce) { body.csp-water .csp-v2-statsband :is(.csp-v2-stats__item, .csp-v2-stats__sep) { opacity: 1; transform: none; transition: none; } } /* 0.1.66 — mobile : premier écran entièrement réservé au hero. Il se prolonge sous la barre flottante de Safari (le contenu reste centré dans la zone visible) ; la bande des chiffres suit, entière, au premier défilement. L'ordinateur garde sa composition (la bande affleure au bas de l'écran). */ @media (max-width: 640px) { html body.csp-v2.csp-water .csp-hero--v2 { min-height: calc(100svh + 7rem) !important; padding-bottom: calc(1.6rem + 7rem) !important; } body.csp-water .csp-v2-statsband { margin-top: 1.5rem; } } /* 0.1.67 — ordinateur : même règle que sur mobile, quel que soit l'écran : le premier écran appartient au hero, la bande des chiffres le suit (sans chevauchement) et s'anime à son arrivée. */ @media (min-width: 641px) { body.csp-water .csp-v2-statsband { margin-top: 2.5rem; } } /* 0.1.68 — « Découvrir nos services » centré sous le bouton, comme sur ordinateur */ body.csp-water .csp-hero--v2 .csp-v2-hero__more { justify-content: center; } /* 0.1.69 — Visite suivante (rechargement) : un seul dévoilement, orchestré par le plugin. Le thème masquait déjà ces éléments en !important et les révélait à son propre rythme (logo en dernier, d'un coup) pendant que l'eau et le voile apparaissaient après le texte. Ici : le décor s'installe et le contenu monte en cascade au même instant, logo d'abord. */ html.csp-v2-nointro body.csp-water .csp-hero--v2 :is(.csp-hero__logo-animation, .csp-hero__tagline, .csp-v2-hero__services li, .csp-hero__description, .csp-hero__cta-group) { animation: none !important; opacity: 0 !important; transform: translate3d(0, 14px, 0) !important; transition: opacity 1s cubic-bezier(.16, 1, .3, 1), transform 1.1s cubic-bezier(.16, 1, .3, 1) !important; } html.csp-v2-nointro.csp-v2-shown body.csp-water .csp-hero--v2 :is(.csp-hero__logo-animation, .csp-hero__tagline, .csp-v2-hero__services li, .csp-hero__description, .csp-hero__cta-group) { opacity: 1 !important; transform: none !important; } html.csp-v2-nointro body.csp-water .csp-hero--v2 .csp-hero__content .csp-hero__logo-animation { transition-delay: 0s !important; } html.csp-v2-nointro body.csp-water .csp-hero--v2 .csp-hero__content .csp-hero__tagline { transition-delay: .14s !important; } html.csp-v2-nointro body.csp-water .csp-hero--v2 .csp-hero__content .csp-v2-hero__services li:nth-child(1) { transition-delay: .26s !important; } html.csp-v2-nointro body.csp-water .csp-hero--v2 .csp-hero__content .csp-v2-hero__services li:nth-child(2) { transition-delay: .32s !important; } html.csp-v2-nointro body.csp-water .csp-hero--v2 .csp-hero__content .csp-v2-hero__services li:nth-child(3) { transition-delay: .38s !important; } html.csp-v2-nointro body.csp-water .csp-hero--v2 .csp-hero__content .csp-v2-hero__services li:nth-child(4) { transition-delay: .44s !important; } html.csp-v2-nointro body.csp-water .csp-hero--v2 .csp-hero__content .csp-hero__description { transition-delay: .52s !important; } html.csp-v2-nointro body.csp-water .csp-hero--v2 .csp-hero__content .csp-hero__cta-group { transition-delay: .62s !important; } /* le voile de profondeur accompagne l'eau au lieu d'arriver après le texte */ html.csp-v2-nointro body.csp-water .csp-water__veil { transition: opacity .9s ease !important; } @media (prefers-reduced-motion: reduce) { html.csp-v2-nointro body.csp-water .csp-hero--v2 :is(.csp-hero__logo-animation, .csp-hero__tagline, .csp-v2-hero__services li, .csp-hero__description, .csp-hero__cta-group) { opacity: 1 !important; transform: none !important; transition: none !important; } } /* ========================================================================= v0.1.83 – Première visite (écran d'ouverture) : le texte du hero est déjà en place sous le rideau. Quand le cercle s'ouvre, il se pose en douceur (léger flou qui se dissipe, montée de 14 px) au lieu d'apparaître depuis la transparence. Même chorégraphie, mêmes délais ; la page est réellement prête dès le premier affichage. La classe « csp-v2-veiled » reste sur la page : l'animation ne se rejoue jamais. ========================================================================= */ @keyframes v2-rise-veiled { from { transform: translateY(14px); filter: blur(4px); } to { transform: none; filter: none; } } @media (prefers-reduced-motion: no-preference) { html.csp-v2-veiled body.csp-v2 .csp-hero--v2 :is(.csp-hero__tagline.csp-v2-hero__tag, .csp-v2-hero__services li, .csp-v2-hero__desc, .csp-hero__cta-group, .csp-v2-stats) { animation-name: v2-rise-veiled !important; } } /* Mobile, première visite : le thème garde le logo et l'accroche invisibles jusqu'à la fin du chargement complet de la page (photos comprises). Sous le rideau d'ouverture, ils sont désormais en place dès le départ ; le visiteur ne voit aucune différence, l'accueil est simplement prêt plus tôt. */ @media (max-width: 768px) { html.csp-v2-veiled body.csp-v2 .csp-hero--v2 :is(.csp-hero__logo-animation, .csp-hero__tagline) { opacity: 1 !important; } } /* ---------- Écrin partenaires — téléphone (≤ 760 px), 2 à 4 partenaires ---------- Tous les partenaires visibles d'emblée, entrée en scène unique (montée en cascade, reflet doré sur les médaillons, filet doré), présentation en pleine largeur au toucher. Classe posée par v2.js. */ @media (max-width: 760px) { body.csp-v2 .csp-v2-partners.csp-ecrin .csp-v2-partners__ctrl { display: none !important; } body.csp-v2 .csp-v2-partners.csp-ecrin .csp-v2-rail { position: relative; overflow: visible; scroll-snap-type: none; -webkit-mask-image: none; mask-image: none; margin: 0; padding: .25rem 0 2rem; } body.csp-v2 .csp-v2-partners.csp-ecrin .csp-v2-rail__track { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; transition: min-height .45s ease; } body.csp-v2 .csp-v2-partners.csp-ecrin .csp-v2-pcard { position: static; flex: none; width: auto; height: auto; min-height: 15.5rem; scroll-snap-align: none; transform: none !important; overflow: visible; } body.csp-v2 .csp-v2-partners.csp-ecrin:not(.is-lit) .csp-v2-pcard__front { opacity: 0; } body.csp-v2 .csp-v2-partners.csp-ecrin .csp-v2-pcard__front { padding: 1.15rem .7rem .95rem; } body.csp-v2 .csp-v2-partners.csp-ecrin .csp-v2-partner__dom { font-size: .56rem; letter-spacing: .16em; line-height: 1.4; } body.csp-v2 .csp-v2-partners.csp-ecrin .csp-v2-pcard__front .csp-v2-medal { position: relative; overflow: hidden; width: 5.4rem; height: 5.4rem; margin: .95rem 0 .85rem; } body.csp-v2 .csp-v2-partners.csp-ecrin .csp-v2-pcard__front .csp-v2-partner__name { font-size: 1.14rem; line-height: 1.2; } body.csp-v2 .csp-v2-partners.csp-ecrin .csp-v2-pcard__foot { justify-content: center; padding-top: .75rem; } body.csp-v2 .csp-v2-partners.csp-ecrin .csp-v2-pcard__foot .csp-v2-globe { display: none; } body.csp-v2 .csp-v2-partners.csp-ecrin .csp-v2-pcard__more { font-size: .6rem; letter-spacing: .14em; } body.csp-v2 .csp-v2-partners.csp-ecrin .csp-v2-pcard__veil { position: absolute; inset: 0; z-index: 3; box-sizing: border-box; padding: 1.4rem 1.35rem 1.2rem; border-radius: 1.25rem; border: 1px solid rgba(212, 184, 92, .35); background: linear-gradient(165deg, #172f55, #0b1830); overflow: hidden; transform: none !important; opacity: 0; visibility: hidden; transition: opacity .45s ease, visibility 0s linear .45s; } body.csp-v2 .csp-v2-partners.csp-ecrin .csp-v2-pcard__veil.is-open { opacity: 1; visibility: visible; transition: opacity .45s ease; } /* Entrée en scène */ /* Seul le contenu des cartes s'anime : une animation sur la carte elle-même enfermerait la présentation pleine largeur dans la carte (Safari iPhone : la carte voisine passait par-dessus). */ body.csp-v2 .csp-v2-partners.csp-ecrin.is-lit .csp-v2-pcard__front { animation: cspEcrinUp .75s cubic-bezier(.2, .7, .2, 1) both; } body.csp-v2 .csp-v2-partners.csp-ecrin.is-lit .csp-v2-pcard:nth-child(2), body.csp-v2 .csp-v2-partners.csp-ecrin.is-lit .csp-v2-pcard:nth-child(2) .csp-v2-pcard__front { animation-delay: .12s; } body.csp-v2 .csp-v2-partners.csp-ecrin.is-lit .csp-v2-pcard:nth-child(3), body.csp-v2 .csp-v2-partners.csp-ecrin.is-lit .csp-v2-pcard:nth-child(3) .csp-v2-pcard__front { animation-delay: .24s; } body.csp-v2 .csp-v2-partners.csp-ecrin.is-lit .csp-v2-pcard:nth-child(4), body.csp-v2 .csp-v2-partners.csp-ecrin.is-lit .csp-v2-pcard:nth-child(4) .csp-v2-pcard__front { animation-delay: .36s; } body.csp-v2 .csp-v2-partners.csp-ecrin .csp-v2-medal::after { content: ''; position: absolute; inset: -25%; background: linear-gradient(115deg, transparent 38%, rgba(255, 244, 214, .85) 50%, transparent 62%); transform: translateX(-130%); pointer-events: none; } body.csp-v2 .csp-v2-partners.csp-ecrin.is-lit .csp-v2-medal::after { animation: cspEcrinSheen 1.2s ease-out .55s both; } body.csp-v2 .csp-v2-partners.csp-ecrin.is-lit .csp-v2-pcard:nth-child(2) .csp-v2-medal::after { animation-delay: .7s; } body.csp-v2 .csp-v2-partners.csp-ecrin.is-lit .csp-v2-pcard:nth-child(3) .csp-v2-medal::after { animation-delay: .85s; } body.csp-v2 .csp-v2-partners.csp-ecrin.is-lit .csp-v2-pcard:nth-child(4) .csp-v2-medal::after { animation-delay: 1s; } body.csp-v2 .csp-v2-partners.csp-ecrin .csp-v2-rail::after { content: ''; position: absolute; left: 50%; bottom: .7rem; width: 0; height: 1px; transform: translateX(-50%); background: linear-gradient(90deg, transparent, rgba(212, 184, 92, .85), transparent); transition: width 1.2s ease .5s; } body.csp-v2 .csp-v2-partners.csp-ecrin.is-lit .csp-v2-rail::after { width: 70%; } } @keyframes cspEcrinFade { from { opacity: 0; } to { opacity: 1; } } @keyframes cspEcrinUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } } @keyframes cspEcrinSheen { from { transform: translateX(-130%); } to { transform: translateX(130%); } } @media (max-width: 760px) and (prefers-reduced-motion: reduce) { body.csp-v2 .csp-v2-partners.csp-ecrin .csp-v2-pcard, body.csp-v2 .csp-v2-partners.csp-ecrin.is-lit .csp-v2-pcard, body.csp-v2 .csp-v2-partners.csp-ecrin.is-lit .csp-v2-pcard__front { opacity: 1; animation: none; } body.csp-v2 .csp-v2-partners.csp-ecrin.is-lit .csp-v2-medal::after { animation: none; } body.csp-v2 .csp-v2-partners.csp-ecrin .csp-v2-rail::after { transition: none; } } /* Reflet doré du logo d’intro : invisible jusqu’à son passage (évite un éclat à la toute première image). */ html.csp-v2-intro .csp-v2-ld__sheen { opacity: 0; animation: csp-ld-fill .01s linear 3s forwards; } /* Titre réservé aux lecteurs d'écran (invisible) : police du texte courant, pour ne plus télécharger Playfair Display (38 Ko) pour rien */ .screen-reader-text { font-family: inherit; } /* Titres du pied de page : leur police finale dès le premier affichage (la feuille du pied de page arrive en différé) ; évite aussi Playfair Display */ .csp-v2-foot__t { font-family: 'Inter', system-ui, sans-serif; }