*,*::before,*::after{box-sizing:border-box}html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}body,h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin:0}ul[role=list],ol[role=list]{list-style:none;margin:0;padding:0}body{min-height:100vh;text-rendering:optimizeSpeed}img,picture,video,canvas,svg{display:block;max-width:100%}button,input,textarea,select{font:inherit}button{cursor:pointer}a{color:inherit;text-decoration:none}:focus-visible{outline:2px solid var(--focus);outline-offset:4px}textarea{resize:vertical}table{border-collapse:collapse;border-spacing:0}input,select,textarea{border-radius:0}
:root{
--canvas:1920px;--container:1680px;--margin-desktop:120px;--grid-cols:12;--gutter:24px;
/* Base */
--color-black:#050506;
--color-black-soft:#090A0C;
--color-surface:#0E0D0F;
--color-surface-elevated:#151012;
/* Texte */
--color-text:#F1E8E2;
--color-text-soft:#CDBFBA;
--color-text-muted:#948784;
/* Mini-lot 1A — accents textuels rouges des sections */
--brand-red:#A10000;
--red-aura: 0 0 0 1px rgba(255, 255, 255, 0.08),
0 1px 2px rgba(0, 0, 0, 0.35),
0 0 12px rgba(239, 68, 68, 0.12);;
--section-title-size:clamp(1.04em,calc(1em + .16vw),1.10em);
--section-eyebrow-size: 22px;
/* Signature grenat */
--color-accent:#931A25;
--color-accent-dark:#5E0D15;
--color-accent-deep:#3A070D;
--color-accent-hover:#B32634;
--color-accent-light:#5D121A;
--color-accent-soft:#CDBFBA;
/* Bordures / glow */
--color-border:rgba(255,255,255,.42);
--color-border-strong:rgba(255,255,255,.72);
--color-glow:rgba(147,26,37,.28);
--color-glow-strong:rgba(147,26,37,.42);
/* Tokens sémantiques V14-B */
--accent-primary:var(--color-accent);
--accent-light:var(--color-accent-light);
--accent-hover:var(--color-accent-hover);
--text-ivory:var(--color-text);
--border-accent-subtle:rgba(255,255,255,.42);
--shadow-accent-glow:0 0 30px rgba(147,26,37,.24);
/* Legacy aliases — conservés temporairement, ne plus utiliser dans les nouvelles règles. */
--black-main:var(--color-black-soft);
--black-secondary:#0B0B0D;
--black-card:var(--color-surface);
--black-warm:var(--color-surface-elevated);
--gold-primary:var(--accent-primary);
--gold-light:var(--accent-light);
--gold-hover:var(--accent-hover);
--champagne:var(--text-ivory);
--color-gold:var(--accent-primary);
--off-white:var(--color-text);
--text-muted:var(--color-text-soft);
--border-warm:rgba(255,255,255,.24);
--border-gold-subtle:var(--border-accent-subtle);
--overlay-hero:rgba(5,5,6,.70);
--overlay-card:rgba(5,5,6,.52);
--error:#C86D63;
--success:#7E9B79;
--focus:var(--color-accent-light);
--serif:'Cormorant Garamond', Playfair Display, Georgia, serif;
--sans:'Manrope', Inter, system-ui, -apple-system, Segoe UI, sans-serif;
--xs:8px;--s:12px;--m:16px;--l:24px;--xl:32px;--xxl:48px;--section-y:96px;
--radius-small:6px;--radius:8px;--radius-large:12px;--radius-pill:999px;
--border:1px solid var(--border-warm);
--border-accent:1px solid var(--border-accent-subtle);
--border-gold:var(--border-accent);
--border-active:1px solid var(--color-border-strong);
--shadow-card-hover:0 18px 60px rgba(0,0,0,.42),0 0 38px rgba(147,26,37,.12);
--shadow-gold-glow:0 0 30px rgba(147,26,37,.24);
--ease:cubic-bezier(.22,1,.36,1);
--header-h:84px;
}
body{font-family:var(--sans);background:var(--black-main);color:var(--off-white);font-size:16px;line-height:1.7;overflow-x:hidden;background-image:radial-gradient(circle at 14% 9%,rgba(147,26,37,.12),transparent 28rem),radial-gradient(circle at 84% 28%,rgba(200,74,85,.07),transparent 34rem),linear-gradient(180deg,#050608 0%,var(--black-main) 22%,#080808 100%)}
body.is-locked{overflow:hidden}::selection{background:rgba(200,74,85,.35);color:var(--off-white)}
a:hover{color:var(--accent-light)}p{color:var(--text-muted)}.eyebrow{font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:800;color:var(--accent-light);margin-bottom:10px}.serif{font-family:var(--serif)}h1,h2,h3{font-family:var(--serif);font-weight:500;line-height:.96;letter-spacing:-.035em;color:var(--off-white)}h1{font-size:clamp(58px,4.4vw,86px);line-height:.94;max-width:820px}h2{font-size:clamp(44px,4vw,86px)}h3{font-size:clamp(24px,2vw,42px)}.lead{font-size:clamp(18px,1.25vw,22px);line-height:1.65;color:var(--off-white)}.muted{color:var(--text-muted)}.small{font-size:13px;line-height:1.55;color:var(--text-muted)}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.placeholder-note{display:inline-flex;align-items:center;gap:8px;color:var(--accent-light);font-size:12px;text-transform:uppercase;letter-spacing:.12em}.hero-placeholder-note{margin-top:18px;font-size:10px;letter-spacing:.11em;opacity:.72}.placeholder-note::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--accent-primary);box-shadow:0 0 0 5px rgba(147,26,37,.12)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 28px;border-radius:var(--radius-small);border:var(--border-active);font-size:13px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;transition:transform .25s var(--ease),background .25s var(--ease),border-color .25s var(--ease),box-shadow .25s var(--ease),color .25s var(--ease)}.btn:hover{transform:translateY(-2px);box-shadow:var(--shadow-accent-glow);color:var(--off-white)}.btn-primary{background:linear-gradient(180deg,var(--accent-light),var(--accent-primary));color:#090806;border-color:rgba(255,255,255,.72)}.btn-primary:hover{background:var(--accent-hover);}.btn-secondary{background:rgba(5,6,8,.64);color:var(--off-white);border-color:var(--border-accent-subtle)}.btn-ghost{background:transparent;color:var(--accent-light);border-color:transparent;padding:0;min-height:auto}.btn-ghost:hover{box-shadow:none;color:var(--off-white)}.btn[disabled]{opacity:.55;cursor:not-allowed;transform:none}
.section{position:relative;padding:var(--section-y) 0;border-top:1px solid rgba(255,255,255,.24)}.section.compact{padding:70px 0}.section-header{display:grid;grid-template-columns:minmax(240px,420px) 1fr;gap:72px;align-items:end;margin-bottom:42px}.section-header p{max-width:820px}.gold{color:var(--accent-light)}.divider{height:1px;background:linear-gradient(90deg,transparent,var(--border-accent-subtle),transparent);margin:32px 0}.skip-link{position:fixed;z-index:2000;top:12px;left:12px;transform:translateY(-160%);background:var(--accent-light);color:#090806;padding:10px 14px;border-radius:4px}.skip-link:focus{transform:translateY(0)}
@media (max-width:900px){body{font-size:15px}.section{padding:72px 0}.section-header{grid-template-columns:1fr;gap:18px;margin-bottom:28px}h1{font-size:clamp(48px,13vw,76px)}h2{font-size:clamp(38px,10vw,58px)}}
.container{width:min(var(--container),calc(100% - 2 * clamp(20px,6vw,var(--margin-desktop))));margin-inline:auto}.grid-12{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gutter)}.site-header{position:sticky;top:0;z-index:1000;height:var(--header-h);background:rgba(5,6,8,.74);border-bottom:var(--border);backdrop-filter:blur(16px);transition:height .28s var(--ease),background .28s var(--ease)}.site-header.is-scrolled{background:rgba(5,6,8,.92)}.header-inner{height:100%;display:flex;align-items:center;justify-content:space-between;gap:28px}.brand{display:inline-flex;margin-top: 7px;align-items:center;min-width:150px}.brand img{width:345px;height:auto; filter: brightness(1.04) contrast(1.05) drop-shadow(0 12px 30px rgba(0, 0, 0, .46));}.nav-toggle{display:none;background:transparent;border:var(--border-accent);color:var(--off-white);width:44px;height:44px;border-radius:var(--radius-small)}.nav{display:flex;align-items:center;gap:34px}.nav-list{display:flex;align-items:center;gap:28px}.nav a{font-size:12px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--off-white)}.nav a[aria-current=true],.nav a:hover{color:var(--accent-light)}.header-cta{min-height:46px;padding:0 24px}section[id]{scroll-margin-top:calc(var(--header-h) + 24px)}.site-main{margin-top:calc(-1 * var(--header-h))}.footer{padding:72px 0 36px;background:#070707;border-top:1px solid var(--border-accent-subtle)}.footer-grid{display:grid;grid-template-columns:1.2fr repeat(4,1fr);gap:42px}.footer-card{border:var(--border);background:rgba(17,19,17,.62);padding:24px;border-radius:var(--radius-small)}.footer-title{font-size:13px;color:var(--accent-light);text-transform:uppercase;letter-spacing:.12em;margin-bottom:16px;font-weight:800}.footer a{color:var(--text-muted)}.footer a:hover{color:var(--accent-light)}.footer-bottom{display:flex;justify-content:space-between;gap:20px;margin-top:42px;padding-top:24px;border-top:var(--border);color:var(--text-muted);font-size:12px}.legal-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:32px}.legal-tile{padding:18px;border:var(--border);border-radius:var(--radius-small);background:rgba(17,19,17,.5)}
@media (max-width:1180px){.nav-list{gap:18px}.nav{gap:18px}.footer-grid{grid-template-columns:repeat(2,1fr)}.legal-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:900px){:root{--header-h:78px}section[id]{scroll-margin-top:calc(var(--header-h) + 24px)}.site-main{margin-top:calc(-1 * var(--header-h))}.nav-toggle{display:inline-grid;place-items:center}.nav{position:fixed;inset:78px 0 auto 0;background:rgba(5,6,8,.98);border-bottom:var(--border);padding:24px;display:grid;gap:18px;transform:translateY(-130%);opacity:0;pointer-events:none;transition:.28s var(--ease)}.nav.is-open{transform:translateY(0);opacity:1;pointer-events:auto}.nav-list{display:grid;gap:14px}.header-cta{width:100%}.footer-grid,.legal-grid{grid-template-columns:1fr}.footer-bottom{flex-direction:column}.brand img{width:128px}}
/* Mini-lot 2F — structure visuelle et responsive du footer. */
.footer .container,
.footer-grid,
.footer-group,
.legal-grid,
.legal-tile {
min-width: 0;
}
.footer-grid {
grid-template-columns:
minmax(210px, 1.25fr)
minmax(180px, 1fr)
minmax(145px, .8fr)
minmax(130px, .7fr)
minmax(240px, 1.25fr);
align-items: start;
gap: clamp(24px, 2.5vw, 46px);
}
.footer-group {
align-content: start;
}
.footer-logo {
display: grid;
gap: 18px;
}
.footer-logo img {
width: clamp(180px, 16vw, 250px);
max-width: 100%;
height: auto;
}
.footer-title {
margin: 0 0 14px;
line-height: 1.35;
}
.footer-group h2.footer-title {
font-family: var(--sans);
}
.footer-address {
font-style: normal;
}
.footer-link-list {
display: grid;
gap: 2px;
margin: 0;
padding: 0;
list-style: none;
}
.footer-link-list li {
min-width: 0;
}
.footer-link-list a,
.footer-link-list span {
display: flex;
align-items: center;
min-height: 44px;
line-height: 1.45;
overflow-wrap: anywhere;
}
.footer-social .footer-link-list a {
width: max-content;
max-width: 100%;
}
/* Mini-lot 7A — icônes sociales locales dans le footer. */
.footer-social-list {
display: grid;
grid-auto-flow: row;
justify-items: start;
gap: 12px;
margin: 0;
padding: 0;
list-style: none;
}
.footer-social-link {
display: grid;
place-items: center;
width: 52px;
height: 52px;
min-width: 52px;
min-height: 52px;
border-radius: 50%;
overflow: hidden;
color: inherit;
text-decoration: none;
line-height: 1;
box-shadow: none;
}
.footer-social-link:hover {
box-shadow: 0 0 0 1px rgba(255, 255, 255, .38), 0 0 14px rgba(255, 255, 255, .14);
}
.footer-social-link:focus-visible {
outline: 2px solid var(--off-white);
outline-offset: 4px;
box-shadow: none;
}
.footer-social-icon {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 50%;
}
@media (prefers-reduced-motion: reduce) {
.footer-social-link,
.footer-social-icon,
.footer-vcard-download,
.footer-vcard-qr {
transition: none;
}
}
/* Mini-lot 7C — V-Card locale téléchargeable. */
.footer-vcard {
display: grid;
justify-items: start;
align-content: start;
gap: 0;
min-width: 0;
max-width: 100%;
}
.footer-vcard-download {
display: grid;
justify-items: start;
gap: 10px;
width: 100%;
max-width: 100%;
min-width: 0;
min-height: 44px;
color: var(--text-muted);
text-decoration: none;
overflow-wrap: anywhere;
line-height: 1.45;
}
.footer-vcard-download:hover {
color: var(--accent-light);
}
.footer-vcard-download:focus-visible {
outline: 2px solid var(--off-white);
outline-offset: 4px;
}
.footer-vcard-qr {
display: block;
width: 128px;
height: 128px;
max-width: 100%;
aspect-ratio: 1 / 1;
object-fit: contain;
background: #fff;
border-radius: 0;
filter: none;
box-shadow: none;
}
.footer-cta .btn {
width: 100%;
min-height: 48px;
padding-inline: 18px;
white-space: normal;
text-align: center;
}
/* Correction 2F — contraste du CTA du footer dans tous ses états. */
.footer .footer-cta .btn,
.footer .footer-cta .btn:hover,
.footer .footer-cta .btn:focus-visible,
.footer .footer-cta .btn:active {
color: #fff;
}
.legal-grid {
align-items: stretch;
gap: clamp(14px, 1.4vw, 20px);
}
.legal-tile {
display: flex;
flex-direction: column;
height: 100%;
gap: 10px;
overflow-wrap: anywhere;
}
.legal-tile .footer-title {
margin-bottom: 0;
}
.footer-health {
max-width: 760px;
margin-top: clamp(24px, 3vw, 36px);
color: var(--text-muted);
line-height: 1.6;
}
.footer-bottom {
align-items: center;
}
.footer a:focus-visible {
outline: 2px solid var(--off-white);
outline-offset: 4px;
}
@media (max-width: 1180px) {
.footer-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 30px clamp(24px, 5vw, 48px);
}
.footer-cta {
grid-column: 1 / -1;
}
.footer-cta .btn {
width: min(100%, 420px);
}
.legal-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 680px) {
.footer {
padding: 56px 0 28px;
}
.footer-grid,
.legal-grid {
grid-template-columns: minmax(0, 1fr);
}
.footer-grid {
gap: 28px;
}
.footer-cta {
grid-column: auto;
}
.footer-social-list {
grid-auto-flow: column;
grid-template-columns: repeat(auto-fit, minmax(52px, 52px));
justify-content: start;
align-items: center;
gap: 12px;
}
.footer-cta .btn,
.legal-tile {
width: 100%;
}
.footer-bottom {
margin-top: 30px;
padding-top: 20px;
}
}
.card{position:relative;border:var(--border);border-radius:var(--radius-small);background:linear-gradient(180deg,rgba(17,19,17,.96),rgba(9,10,12,.96));overflow:hidden;transition:transform .28s var(--ease),border-color .28s var(--ease),box-shadow .28s var(--ease)}.card:hover{transform:translateY(-4px);border-color:rgba(255,255,255,.72);box-shadow:var(--shadow-card-hover)}.icon-badge{width:200px;height:200px;border:1px solid rgba(255, 255, 255, .55);border-radius:50%;display:grid;place-items:center;color:var(--accent-light);margin-bottom:18px}.icon-badge svg{width:26px;height:26px}.feature-card{padding:34px;min-height:208px}.feature-card h3{font-size:30px;margin-bottom:14px}.micro-list{display:flex;flex-wrap:wrap;gap:18px 34px}.micro-item{display:flex;align-items:center;gap:12px;color:var(--text-muted);font-size:14px}.micro-item .dot{width:32px;height:32px;border-radius:50%;border:1px solid var(--border-accent-subtle);display:grid;place-items:center;color:var(--accent-light);flex:0 0 auto}.event-card{min-height:318px}.event-card img{width:100%;height:154px;object-fit:cover;filter:saturate(.9) brightness(.78)}.event-card-body{padding:20px}.event-card h3{font-family:var(--serif);font-size:28px;line-height:1.05;margin-bottom:10px}.tag{display:inline-flex;border:var(--border-accent);border-radius:var(--radius-pill);padding:8px 16px;color:var(--text-muted);font-size:12px;text-transform:uppercase;letter-spacing:.1em;background:rgba(5,6,8,.44)}.tag.is-active{background:var(--accent-primary);border-color:rgba(255,255,255,.72);color:#090806}.rating-stars{display:flex;gap:5px;color:var(--accent-light);font-size:36px;line-height:1}.quote-card{padding:28px}.quote-card blockquote{font-family:var(--serif);font-size:25px;line-height:1.18;color:var(--off-white);margin-bottom:22px}.quote-card cite{font-style:normal;color:var(--accent-light);font-size:13px}.logo-strip{display:grid;grid-template-columns:repeat(5,1fr);gap:20px;align-items:center}.logo-box{min-height:112px;border:var(--border);border-radius:var(--radius-small);display:grid;place-items:center;color:var(--accent-light);font-weight:800;letter-spacing:.05em;background:rgba(17,19,17,.62);text-align:center;padding:20px;text-transform:uppercase}.logo-box[data-placeholder=true]::after{content:"Autorisation à confirmer";display:block;margin-top:8px;color:var(--text-muted);font-size:10px;font-weight:500;letter-spacing:.08em}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.field{display:grid;gap:8px}.field.full{grid-column:1 / -1}.field label{font-size:12px;text-transform:uppercase;letter-spacing:.1em;color:var(--text-muted);font-weight:800}.required{color:var(--accent-light)}.field input,.field select,.field textarea{width:100%;border:var(--border);background:#08090a;color:var(--off-white);padding:14px 16px;border-radius:4px;transition:border-color .2s var(--ease),box-shadow .2s var(--ease),background .2s var(--ease)}.field textarea{min-height:132px}.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--focus);box-shadow:0 0 0 3px rgba(200,74,85,.15);background:#0c0d0e;outline:none}.field.is-error input,.field.is-error select,.field.is-error textarea{border-color:var(--error);box-shadow:0 0 0 3px rgba(200,109,99,.1)}.field-error{min-height:17px;color:var(--error);font-size:12px}.form-status{margin-top:16px;min-height:28px;font-weight:700}.form-status.is-success{color:var(--success)}.form-status.is-error{color:var(--error)}.accordion{display:grid;gap:10px}.faq-item{border:var(--border);border-radius:var(--radius-small);background:rgba(17,19,17,.78);overflow:hidden}.faq-trigger{width:100%;min-height:56px;background:transparent;color:var(--off-white);border:0;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:0 22px;text-align:left;font-weight:800}.faq-trigger::after{content:"+";color:var(--accent-light);font-size:24px}.faq-trigger[aria-expanded=true]::after{content:"−"}.faq-panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .34s var(--ease)}.faq-trigger[aria-expanded=true]+.faq-panel{grid-template-rows:1fr}.faq-panel-inner{overflow:hidden}.faq-panel p{padding:0 22px 20px}.age-gate{position:fixed;inset:0;z-index:3000;display:grid;place-items:center;background:rgba(5,6,8,.86);-webkit-backdrop-filter:blur(22px);backdrop-filter:blur(22px);padding:24px}.age-gate[hidden]{display:none}.age-dialog{width:min(640px,100%);border:1px solid rgba(255,255,255,.72);border-radius:var(--radius);background:linear-gradient(180deg,rgba(15,17,21,.98),rgba(8,9,10,.98));padding:36px;text-align:center;box-shadow:0 30px 100px rgba(0,0,0,.55)}.age-dialog .icon-badge{margin-inline:auto}.age-actions{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:24px 0}.age-denied{color:var(--error);font-weight:700;margin-top:14px}.scroll-top{position:fixed;right:24px;bottom:24px;width:48px;height:48px;border-radius:50%;border:var(--border-active);background:rgba(5,6,8,.8);color:var(--accent-light);z-index:900;opacity:0;pointer-events:none;transition:.25s var(--ease)}.scroll-top.is-visible{opacity:1;pointer-events:auto}.asset-status{position:absolute;top:10px;left:10px;z-index:2;padding:5px 8px;border-radius:var(--radius-pill);font-size:10px;text-transform:uppercase;letter-spacing:.09em;color:#090806;background:var(--accent-light);font-weight:900}
@media (max-width:900px){.logo-strip{grid-template-columns:repeat(2,1fr)}.form-grid{grid-template-columns:1fr}.age-actions{grid-template-columns:1fr}.feature-card{padding:24px}.micro-list{display:grid;gap:12px}.rating-stars{font-size:28px}}
/* V3 production-form prep: honeypot anti-spam, invisible for users but submitted for bots. */
.hp-field {
position: fixed;
inset: 0 auto auto 0;
width: 1px;
height: 1px;
opacity: 0;
clip-path: inset(50%);
overflow: hidden;
pointer-events: none;
}
.contact-form .small a {
color: #fff;
text-decoration: underline;
text-underline-offset: 3px;
}
.faq-panel[aria-hidden="true"] {
visibility: hidden;
}
.faq-panel[aria-hidden="false"],
.faq-panel:not([aria-hidden]) {
visibility: visible;
}
/* V5 — les statuts placeholders restent disponibles mais ne polluent plus la recette visuelle. */
.asset-status,
.placeholder-note[data-debug-only="true"],
.logo-box[data-placeholder="true"]::after {
display: none;
}
body[data-debug="true"] .asset-status,
body[data-debug="true"] .placeholder-note[data-debug-only="true"] {
display: inline-flex;
}
body[data-debug="true"] .logo-box[data-placeholder="true"]::after {
display: block;
}
/* Mini-lot 1B — stabilité technique de l’age gate, sans changement éditorial. */
.age-gate {
position: fixed;
inset: 0;
width: 100%;
min-height: 100vh;
min-height: 100dvh;
z-index: 2147483000;
overflow-y: auto;
overscroll-behavior: contain;
isolation: isolate;
}
.age-gate .age-dialog {
position: relative;
z-index: 1;
margin: auto;
max-height: calc(100vh - 48px);
max-height: calc(100dvh - 48px);
overflow-x: hidden;
overflow-y: auto !important;
overscroll-behavior: contain;
}
body.is-locked > .skip-link,
body.is-locked > .site-header,
body.is-locked > main,
body.is-locked > footer,
body.is-locked > .scroll-top,
body.is-locked > .sds-ingredient-root {
visibility: hidden !important;
pointer-events: none !important;
}
.hero {
position: relative;
min-height: 100svh;
padding-top: calc(var(--header-h) + clamp(36px, 5vh, 72px));
padding-bottom: clamp(48px, 7vh, 84px);
display: grid;
align-items: center;
overflow: hidden;
background: var(--black-main);
border-bottom: 1px solid rgba(255,255,255,.36);
}
.hero-media,
.hero-overlay {
position: absolute;
inset: 0;
}
.hero-media {
z-index: 0;
background: none;
}
.hero-video,
.hero-fallback {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
filter: saturate(.92) brightness(.90);
}
.hero-video:empty {
display: none;
}
.hero-fallback {
position: absolute;
inset: 0;
}
.hero-overlay {
z-index: 0;
pointer-events: none;
background:
radial-gradient(circle at 70% 38%, rgba(147,26,37,.20), transparent 28rem),
linear-gradient(90deg, rgba(5, 6, 8, .98) 0%, rgba(5, 6, 8, .88) 34%, rgba(5, 6, 8, .52) 68%, rgba(5, 6, 8, .86) 100%),
linear-gradient(180deg, transparent 72%, #090A0C 100%);
}
.hero .container {
position: relative;
z-index: 1;
}
.hero-content {
max-width: 900px;
}
.hero-kicker {
font-size: 13px;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--accent-light);
font-weight: 800;
margin-bottom: 14px;
}
.hero h1 {
margin-bottom: 24px;
}
.hero .lead {
max-width: 690px;
}
.proofs {
display: flex;
flex-wrap: wrap;
gap: 16px 28px;
margin: 34px 0;
color: var(--text-muted);
}
.proofs span {
display: inline-flex;
align-items: center;
gap: 10px;
font-size: 14px;
}
.proofs span::before {
content: "";
width: 24px;
height: 24px;
border-radius: 50%;
border: 1px solid var(--accent-light);
box-shadow: inset 0 0 0 5px rgba(147,26,37,.08);
}
.hero-actions {
display: flex;
flex-wrap: wrap;
gap: 18px;
align-items: center;
}
.concept-grid {
display: grid;
grid-template-columns: 1fr 1.15fr;
gap: 78px;
align-items: center;
}
.concept-media {
position: relative;
border-top: var(--border-active);
border-bottom: var(--border-active);
min-height: 620px;
overflow: hidden;
}
.concept-media img {
width: 100%;
height: 100%;
min-height: 620px;
object-fit: cover;
filter: brightness(.7) saturate(.85);
}
.concept-media::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(90deg, rgba(5, 6, 8, .14), rgba(5, 6, 8, .84));
}
.concept-text {
max-width: 760px;
padding-right: clamp(20px, 6vw, var(--margin-desktop));
}
.concept-pillars {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 18px;
margin-top: 44px;
}
.pillar {
padding: 24px 12px;
border-left: var(--border);
min-height: 170px;
}
.pillar h3 {
font-family: var(--sans);
font-size: 15px;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--accent-light);
margin-bottom: 12px;
}
.prestation-cards {
grid-template-columns: repeat(4, 1fr);
}
.reperes {
padding-top: 54px;
padding-bottom: 54px;
}
.events-grid {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 18px;
}
.client-marquee {
--client-gap: clamp(16px, 2vw, 30px);
--client-duration: 72s;
position: relative;
width: 100%;
margin-top: clamp(28px, 4vw, 52px);
overflow: hidden;
}
.client-marquee__viewport {
position: relative;
overflow: hidden;
padding: clamp(14px, 2vw, 24px) 0;
mask-image: linear-gradient(
90deg,
transparent 0%,
#000 9%,
#000 91%,
transparent 100%
);
}
.client-marquee__track {
display: flex;
width: max-content;
gap: var(--client-gap);
will-change: transform;
animation: clientMarqueeRight var(--client-duration) linear infinite;
transform: translate3d(-50%, 0, 0);
}
.client-marquee__group {
display: flex;
align-items: center;
gap: var(--client-gap);
flex-shrink: 0;
}
.client-logo {
width: clamp(138px, 13vw, 210px);
height: clamp(78px, 7vw, 112px);
margin: 0;
padding: clamp(14px, 1.6vw, 22px);
display: grid;
place-items: center;
flex: 0 0 auto;
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 22px;
background:
linear-gradient(145deg, rgba(255, 255, 255, 0.105), rgba(255, 255, 255, 0.035));
box-shadow:
0 18px 45px rgba(0, 0, 0, 0.24),
inset 0 1px 0 rgba(255, 255, 255, 0.12);
backdrop-filter: blur(14px);
}
.client-logo--wide {
width: clamp(190px, 17vw, 292px);
}
.client-logo--panorama {
width: clamp(230px, 22vw, 370px);
}
.client-logo img {
display: block;
max-width: 100%;
max-height: 100%;
object-fit: contain;
filter: grayscale(1) saturate(0.7) contrast(1.08);
opacity: 0.78;
transition:
opacity 320ms ease,
filter 320ms ease,
transform 320ms ease;
}
.client-logo:hover img {
opacity: 1;
filter: grayscale(0) saturate(1) contrast(1);
transform: scale(1.035);
}
.client-marquee:hover .client-marquee__track {
animation-play-state: paused;
}
@keyframes clientMarqueeRight {
from {
transform: translate3d(-50%, 0, 0);
}
to {
transform: translate3d(0, 0, 0);
}
}
@media (max-width: 767px) {
.client-marquee {
--client-duration: 58s;
}
.client-logo {
width: 132px;
height: 76px;
border-radius: 18px;
padding: 14px;
}
.client-logo--wide {
width: 178px;
}
.client-logo--panorama {
width: 220px;
}
}
@media (prefers-reduced-motion: reduce) {
.client-marquee__track {
animation: none;
transform: none;
}
.client-marquee__viewport {
overflow-x: auto;
mask-image: none;
}
}
.animations-grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 24px;
}
.animation-card {
min-height: 330px;
}
.animation-card img {
height: 180px;
width: 100%;
object-fit: cover;
filter: brightness(.74);
}
.animation-card .event-card-body {
padding: 24px;
}
.references-wrap {
display: grid;
grid-template-columns: 1fr;
gap: 42px;
}
.avis-grid {
display: grid;
grid-template-columns: 340px repeat(3, 1fr);
gap: 22px;
align-items: stretch;
}
.rating-box {
padding: 28px;
border: 0;
background: transparent;
}
.rating-score {
font-family: var(--serif);
font-size: 84px;
line-height: .9;
color: var(--accent-light);
margin-bottom: 12px;
}
.contact-grid {
display: grid;
grid-template-columns: 450px 1fr;
gap: 58px;
border: var(--border-active);
border-radius: var(--radius-small);
padding: 30px;
padding-bottom: 0px;
background: rgba(17, 19, 17, .5);
}
.contact-list {
display: grid;
gap: 18px;
margin-top: 34px;
}
.contact-list a,
.contact-list span {
display: flex;
gap: 14px;
align-items: flex-start;
color: var(--text-muted);
}
.contact-list svg {
width: 22px;
min-width: 22px;
color: var(--accent-light);
margin-top: 2px;
}
#contact .contact-whatsapp {
width: fit-content;
max-width: 100%;
min-height: 48px;
padding: 12px 18px;
border: 1px solid rgba(255, 255, 255, .55);
border-radius: var(--radius-small);
background: rgba(5, 6, 8, .54);
color: var(--off-white);
font-weight: 800;
letter-spacing: .02em;
transition: background .22s var(--ease), border-color .22s var(--ease), box-shadow .22s var(--ease);
align-items: center;
}
#contact .contact-whatsapp:hover {
border-color:var(--brand-red);
box-shadow: 0 10px 28px rgba(0, 0, 0, .32);
}
#contact .contact-whatsapp:focus-visible {
outline: 2px solid var(--off-white);
outline-offset: 4px;
background: var(--brand-red);
border-color: rgba(255, 255, 255, .9);
}
#contact .required {
display: inline-block;
margin-left: .18em;
color: var(--off-white);
}
.contact-form .btn {
width: 100%;
margin-top: 10px;
}
.faq-wrap {
display: grid;
grid-template-columns: 330px 1fr;
gap: 52px;
}
.footer-logo img {
width: 250px;
}
.qr {
width: 112px;
height: 112px;
border: var(--border-active);
padding: 6px;
background: #070707;
}
@media (max-height: 900px) and (min-width: 1100px) {
.hero {
min-height: 100svh;
padding-top: calc(var(--header-h) + 28px);
padding-bottom: 36px;
}
.hero h1 {
font-size: clamp(54px, 4vw, 76px);
max-width: 760px;
}
.hero .lead {
font-size: 18px;
max-width: 620px;
}
.proofs {
margin: 22px 0;
gap: 12px 22px;
}
.hero .placeholder-note {
display: none;
}
}
@media (max-width: 1280px) {
.prestation-cards {
grid-template-columns: repeat(2, 1fr);
}
.events-grid {
grid-template-columns: repeat(3, 1fr);
}
.animations-grid,
.avis-grid {
grid-template-columns: 1fr 1fr;
}
.avis-grid .rating-box {
grid-column: 1 / -1;
}
.concept-grid {
grid-template-columns: 1fr;
}
.concept-media {
min-height: 420px;
}
.concept-media img {
min-height: 420px;
}
.concept-media::after {
background: linear-gradient(180deg, rgba(5, 6, 8, .05), rgba(5, 6, 8, .76));
}
}
@media (max-width: 760px) {
.hero {
min-height: 880px;
padding-top: 148px;
}
.hero-media,
.hero-video,
.hero-fallback {
object-position: center;
background-position: center;
}
.hero-actions {
display: grid;
}
.hero-actions .btn {
width: 100%;
}
.concept-pillars,
.prestation-cards,
.events-grid,
.animations-grid,
.avis-grid {
grid-template-columns: 1fr;
}
#contact .contact-whatsapp {
width: 100%;
justify-content: center;
}
.contact-grid {
padding: 24px;
}
.logo-strip {
grid-template-columns: 1fr 1fr;
}
}
.hero h1 span {
display: block;
}
.hero h1 .nowrap {
white-space: nowrap;
}
.event-card h3,
.animation-card h3 {
font-size: clamp(18px, 1.25vw, 22px);
line-height: 1.12;
}
.event-card-body {
padding: 18px;
}
@media (max-width: 760px) {
.hero h1 span {
display: inline;
}
.hero h1 .nowrap {
white-space: normal;
}
}
/* Les vrais ingrédients PNG/WebP alpha seront fournis par le design : rien n'est visible en recette normale. */
/* Slots contenus : les cartes -2 et +2 restent entières dans un stage >= 1120px. */
/* Les états transitoires ne sortent plus brutalement du plateau. */
/* Desktop intermédiaire : slots recalés selon la largeur utile réelle. */
/* --------------------------------------------------------------------------
V12 — La Carte, finition premium + Rainbow panoramique + ingrédients PNG
Architecture V10/V11 conservée : slider global unique, 22 cocktails, 5 slots,
familles uniquement ancres, aucune marque d'alcool, aucun texte ingrédient.
-------------------------------------------------------------------------- */
.carte {
position: relative;
overflow: hidden;
padding-top: clamp(56px, 5vw, 86px);
padding-bottom: clamp(50px, 4.8vw, 78px);
}
.carte::before {
content: "";
position: absolute;
inset: 0 0 auto;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(147,26,37,.58), transparent);
pointer-events: none;
}
.carte,
.carte .container,
.carte-top,
.cocktail-carousel,
.cocktail-stage,
.cocktail-track {
overflow: visible;
}
.carte-top {
display: grid;
grid-template-columns: 290px minmax(0, 1fr);
column-gap: 32px;
align-items: start;
max-width: 1680px;
margin-inline: auto;
}
.carte-top > div:first-child h2 { margin-bottom: 12px; }
.carte-top > div:first-child p:not(.eyebrow) {
max-width: 268px;
line-height: 1.52;
}
.cocktail-carousel {
width: min(100%, 1440px);
max-width: 1440px;
margin-inline: auto;
padding-inline: 40px;
position: relative;
}
.filters {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 10px;
max-width: 1120px;
margin: 2px auto 20px;
}
.cocktail-filter {
position: relative;
height: 42px;
padding: 0 24px;
border-radius: 10px;
border: 1px solid rgba(255,255,255,.38);
background:
linear-gradient(180deg, rgba(18,17,15,.98), rgba(5,6,7,.98));
color: #F1E8E2;
font-size: 12px;
font-weight: 800;
letter-spacing: .14em;
text-transform: uppercase;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.05),
inset 0 -10px 18px rgba(0,0,0,.36);
transition:
border-color .22s ease,
background .22s ease,
color .22s ease,
box-shadow .22s ease,
transform .22s ease;
}
.cocktail-filter:hover,
.cocktail-filter:focus-visible {
border-color: rgba(255,255,255,.75);
color: #F1E8E2;
transform: translateY(-1px);
background:
linear-gradient(180deg, rgba(26,23,19,.99), rgba(6,7,8,.99));
box-shadow:
0 10px 24px rgba(0,0,0,.28),
0 0 20px rgba(147,26,37,.10),
inset 0 1px 0 rgba(255,255,255,.06),
inset 0 -10px 18px rgba(0,0,0,.36);
outline: none;
}
.cocktail-filter.is-active {
color: #090A0C;
border-color: rgba(255,255,255,.95);
background:
linear-gradient(180deg, #B32634 0%, #931A25 100%);
box-shadow:
0 10px 30px rgba(147,26,37,.30),
0 16px 36px rgba(147,26,37,.16),
inset 0 1px 0 rgba(255,255,255,.38),
inset 0 -10px 16px rgba(90,63,30,.20);
}
.cocktail-filter.is-active::before {
content: "";
position: absolute;
left: 16px;
right: 16px;
bottom: -11px;
height: 16px;
background: radial-gradient(ellipse at center, rgba(200,74,85,.46), transparent 72%);
pointer-events: none;
}
.cocktail-filter.is-active::after {
content: "";
position: absolute;
left: 50%;
bottom: -6px;
width: 9px;
height: 9px;
transform: translateX(-50%) rotate(45deg);
background: #931A25;
border-right: 1px solid rgba(255,255,255,.7);
border-bottom: 1px solid rgba(255,255,255,.7);
box-shadow: 0 0 12px rgba(147,26,37,.28);
}
.cocktail-stage {
position: relative;
width: 100%;
height: 560px;
min-height: 560px;
display: flex;
align-items: center;
justify-content: center;
isolation: isolate;
}
.cocktail-stage::before {
content: "";
position: absolute;
left: 50%;
top: 48%;
width: 540px;
height: 540px;
transform: translate(-50%, -50%);
z-index: 0;
pointer-events: none;
background:
radial-gradient(
ellipse at center,
rgba(200,74,85,.24) 0%,
rgba(147,26,37,.13) 28%,
rgba(147,26,37,.045) 54%,
transparent 76%
);
filter: blur(10px);
transition: width .55s cubic-bezier(.22, 1, .36, 1), height .55s cubic-bezier(.22, 1, .36, 1), background .55s ease;
}
.cocktail-stage.cocktail-stage--wide-active::before {
width: 620px;
height: 460px;
background:
radial-gradient(
ellipse at center,
rgba(200,74,85,.28) 0%,
rgba(147,26,37,.15) 32%,
rgba(147,26,37,.055) 58%,
transparent 78%
);
}
.cocktail-track {
position: relative;
width: min(100%, 1120px);
height: 540px;
margin-inline: auto;
overflow: visible;
contain: none;
perspective: none !important;
transform-style: flat;
outline: none;
z-index: 1;
}
.cocktail-track::before,
.cocktail-track::after,
.cocktail-card {
position: absolute;
left: 50%;
top: 60px;
width: 250px;
height: 390px;
min-height: 0;
padding: 0;
border-radius: 10px;
overflow: hidden;
isolation: isolate;
border: 1px solid rgba(58,47,37,.78);
background: #090A0C;
opacity: .56;
filter: brightness(.56) saturate(.82);
backface-visibility: hidden;
will-change: transform, opacity, filter, width, height;
transform-origin: center center;
transition:
width .55s cubic-bezier(.22, 1, .36, 1),
height .55s cubic-bezier(.22, 1, .36, 1),
top .55s cubic-bezier(.22, 1, .36, 1),
transform .55s cubic-bezier(.22, 1, .36, 1),
opacity .55s cubic-bezier(.22, 1, .36, 1),
filter .55s cubic-bezier(.22, 1, .36, 1),
border-color .32s ease,
box-shadow .32s ease,
background .32s ease;
}
.cocktail-card::before {
content: "";
position: absolute;
inset: 0;
z-index: 2;
background:
radial-gradient(ellipse at center, rgba(255,255,255,.04), transparent 48%),
linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,.34));
pointer-events: none;
}
.cocktail-card::after {
content: "";
position: absolute;
inset: auto 0 0 0;
height: 46%;
z-index: 3;
background:
linear-gradient(
180deg,
rgba(5, 6, 8, 0) 0%,
rgba(5, 6, 8, .72) 38%,
rgba(5, 6, 8, .96) 100%
);
pointer-events: none;
}
.cocktail-card:focus-visible {
outline: 2px solid rgba(200,74,85,.9);
outline-offset: 8px;
}
.cocktail-card__visual {
position: absolute;
inset: 0;
z-index: 1;
min-height: 0;
display: block;
}
.cocktail-card .cocktail-card__image,
.cocktail-card img.cocktail-card__image {
width: 100%;
height: 100%;
max-height: none;
object-fit: cover;
object-position: center;
margin: 0;
display: block;
image-rendering: auto;
backface-visibility: hidden;
filter: none;
transform: none;
pointer-events: none;
}
.cocktail-card__inner-glow {
position: absolute;
inset: 1px;
border-radius: 9px;
z-index: 4;
pointer-events: none;
box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);
}
.cocktail-card__body {
position: absolute;
left: 18px;
right: 18px;
bottom: 20px;
z-index: 6;
min-height: auto;
display: block;
text-align: center;
}
.cocktail-card__family,
.cocktail-card .eyebrow { display: none !important; }
.cocktail-card__name,
.cocktail-card h3 {
margin: 0 0 6px;
font-family: var(--serif);
font-size: 30px;
line-height: 1;
color: #F1E8E2;
text-wrap: balance;
text-shadow:
0 2px 14px rgba(0,0,0,.9),
0 0 20px rgba(0,0,0,.8);
}
.cocktail-card__description,
.cocktail-card p {
margin: 0 auto;
max-width: 240px;
font-size: 13px;
line-height: 1.4;
color: #D8CDB8;
text-shadow: 0 2px 12px rgba(0,0,0,.95);
}
.cocktail-card__body > p:last-child {
min-height: 0;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.cocktail-card:not(.slot-active) .cocktail-card__image {
filter: brightness(.58) saturate(.75);
}
.cocktail-card.slot-prev .cocktail-card__image,
.cocktail-card.slot-next .cocktail-card__image {
filter: brightness(.72) saturate(.82);
}
.cocktail-card.slot-edge-left .cocktail-card__image,
.cocktail-card.slot-edge-right .cocktail-card__image {
filter: brightness(.38) saturate(.65);
}
.cocktail-card.slot-active {
top: 18px;
width: 330px;
height: 460px;
z-index: 7;
opacity: 1;
filter: brightness(1) saturate(1);
border: 1px solid rgba(255,255,255,.86);
background: #090A0C;
box-shadow:
0 34px 90px rgba(0,0,0,.72),
0 0 0 1px rgba(147,26,37,.28),
0 0 52px rgba(200,74,85,.24),
0 0 120px rgba(147,26,37,.12),
inset 0 1px 0 rgba(255,255,255,.08);
transform: translateX(-50%) scale(1);
}
.cocktail-card.slot-active.cocktail-card--wide {
top: 74px;
width: 540px;
height: 350px;
border-radius: 12px;
}
.cocktail-card.slot-active.cocktail-card--wide .cocktail-card__image {
object-fit: cover;
object-position: center;
}
.cocktail-card.slot-active.cocktail-card--wide::after {
height: 52%;
}
.cocktail-card.slot-active .cocktail-card__inner-glow {
box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
}
.cocktail-card.slot-active .cocktail-card__name,
.cocktail-card.slot-active h3 {
font-size: 34px;
}
.cocktail-card.slot-active .cocktail-card__description {
font-size: 14px;
max-width: 270px;
}
.cocktail-card.slot-active.cocktail-card--wide .cocktail-card__name,
.cocktail-card.slot-active.cocktail-card--wide h3 {
font-size: 36px;
}
.cocktail-card.slot-active.cocktail-card--wide .cocktail-card__description {
max-width: 330px;
}
.cocktail-card.slot-prev {
z-index: 4;
opacity: .76;
filter: brightness(.72) saturate(.88);
transform: translateX(calc(-50% - 230px)) translateY(34px) scale(.93);
}
.cocktail-card.slot-next {
z-index: 4;
opacity: .76;
filter: brightness(.72) saturate(.88);
transform: translateX(calc(-50% + 230px)) translateY(34px) scale(.93);
}
.cocktail-card.slot-edge-left {
z-index: 2;
opacity: .36;
filter: brightness(.45) saturate(.68);
transform: translateX(calc(-50% - 440px)) translateY(54px) scale(.86);
}
.cocktail-card.slot-edge-right {
z-index: 2;
opacity: .36;
filter: brightness(.45) saturate(.68);
transform: translateX(calc(-50% + 440px)) translateY(54px) scale(.86);
}
.cocktail-stage--wide-active .cocktail-card.slot-prev {
opacity: .62;
filter: brightness(.62) saturate(.78);
transform: translateX(calc(-50% - 260px)) translateY(52px) scale(.88);
}
.cocktail-stage--wide-active .cocktail-card.slot-next {
opacity: .62;
filter: brightness(.62) saturate(.78);
transform: translateX(calc(-50% + 260px)) translateY(52px) scale(.88);
}
.cocktail-stage--wide-active .cocktail-card.slot-edge-left {
opacity: .24;
filter: brightness(.34) saturate(.58);
transform: translateX(calc(-50% - 450px)) translateY(68px) scale(.80);
}
.cocktail-stage--wide-active .cocktail-card.slot-edge-right {
opacity: .24;
filter: brightness(.34) saturate(.58);
transform: translateX(calc(-50% + 450px)) translateY(68px) scale(.80);
}
.cocktail-card.slot-enter-right,
.cocktail-card.slot-out-right {
opacity: 0;
transform: translateX(calc(-50% + 440px)) translateY(54px) scale(.86);
}
.cocktail-card.slot-enter-left,
.cocktail-card.slot-out-left {
opacity: 0;
transform: translateX(calc(-50% - 440px)) translateY(54px) scale(.86);
}
.cocktail-stage--wide-active .cocktail-card.slot-enter-right,
.cocktail-stage--wide-active .cocktail-card.slot-out-right {
transform: translateX(calc(-50% + 450px)) translateY(68px) scale(.80);
}
.cocktail-stage--wide-active .cocktail-card.slot-enter-left,
.cocktail-stage--wide-active .cocktail-card.slot-out-left {
transform: translateX(calc(-50% - 450px)) translateY(68px) scale(.80);
}
.cocktail-card:not(.slot-active):hover {
opacity: .86;
filter: brightness(.82) saturate(.92);
border-color: rgba(255,255,255,.50);
box-shadow:
0 22px 58px rgba(0,0,0,.43),
inset 0 1px 0 rgba(255,255,255,.035);
}
/* --------------------------------------------------------------------------
V13-C — Tom Collins Cinematic Focus Reveal
Couche additionnelle uniquement, sans refonte du carrousel V10/V11/V12.
-------------------------------------------------------------------------- */
.cocktail-focus-reveal {
position: absolute;
inset: 0;
z-index: 16;
opacity: 0;
pointer-events: none;
display: grid;
place-items: center;
overflow: visible;
transition: opacity 320ms ease;
}
.cocktail-stage.is-focus-reveal .cocktail-focus-reveal {
opacity: 1;
pointer-events: auto;
}
.cocktail-focus-reveal__backplate {
position: absolute;
inset: 50% auto auto 50%;
width: min(100vw, 1920px);
height: 760px;
transform: translate(-50%, -50%);
z-index: 1;
pointer-events: none;
border-radius: 0;
overflow: hidden;
}
.cocktail-focus-reveal__backplate::after {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(ellipse at center, rgba(5,6,8,.05), rgba(5,6,8,.20) 58%, rgba(5,6,8,.48) 100%),
linear-gradient(180deg, rgba(5,6,8,.20), rgba(5,6,8,.08) 42%, rgba(5,6,8,.38));
pointer-events: none;
}
.cocktail-focus-reveal__backplate img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
}
.cocktail-focus-card {
position: relative;
z-index: 3;
width: 560px;
height: 720px;
border-radius: 20px;
border: 2px solid rgba(255,255,255,.62);
background: linear-gradient(180deg, #090A0C, #0F1115);
box-shadow:
0 0 40px rgba(147,26,37,.18),
0 34px 110px rgba(0,0,0,.75),
inset 0 1px 0 rgba(255,255,255,.06);
padding: 24px;
overflow: hidden;
transform-origin: center center;
}
.cocktail-focus-card::before {
content: "";
position: absolute;
inset: 10px;
border-radius: 16px;
border: 1px solid rgba(255,255,255,.30);
pointer-events: none;
z-index: 4;
}
.cocktail-focus-card::after {
content: "";
position: absolute;
inset: -40px;
z-index: 0;
background: radial-gradient(ellipse at center, rgba(200,74,85,.10), transparent 58%);
pointer-events: none;
}
.cocktail-focus-card__visual {
position: relative;
z-index: 2;
height: 56%;
overflow: hidden;
border-radius: 14px;
border: 1px solid rgba(255,255,255,.24);
background: #070809;
}
.cocktail-focus-card__visual img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
}
.cocktail-focus-card__body {
position: relative;
z-index: 2;
text-align: center;
padding-top: 30px;
}
.cocktail-focus-card__body h3 {
margin: 0;
font-family: var(--serif);
font-size: 48px;
line-height: 1;
letter-spacing: .03em;
color: #F1E8E2;
text-shadow: 0 3px 22px rgba(0,0,0,.9);
}
.cocktail-focus-card__body p {
max-width: 80%;
margin: 18px auto 0;
font-family: var(--sans);
font-size: 18px;
line-height: 1.45;
color: #F1E8E2;
text-shadow: 0 2px 14px rgba(0,0,0,.95);
}
.cocktail-carousel.is-focus-reveal .cocktail-card:not(.slot-active) {
opacity: .10 !important;
filter: brightness(.26) saturate(.50) !important;
}
.cocktail-carousel.is-focus-reveal .cocktail-card.slot-active {
opacity: .18 !important;
filter: brightness(.30) saturate(.62) !important;
}
.cocktail-carousel.is-focus-reveal .carousel-controls {
opacity: .28;
transition: opacity .28s ease;
}
@media (max-width: 767px) {
.cocktail-focus-reveal {
position: fixed;
left: 0 !important;
top: 0 !important;
right: auto !important;
bottom: auto !important;
width: 100vw !important;
height: 100svh !important;
max-width: 100vw !important;
z-index: 80;
overflow: hidden;
}
.cocktail-focus-reveal__backplate {
width: 100vw;
height: 100svh;
}
.cocktail-focus-card {
position: fixed;
left: 50vw;
top: 50svh;
transform: translate(-50%, -50%) !important;
width: 86vw;
max-width: 420px;
min-height: 620px;
height: auto;
padding: 20px;
}
.cocktail-focus-card__visual {
height: 335px;
}
.cocktail-focus-card__body h3 {
font-size: 34px;
}
.cocktail-focus-card__body p {
max-width: 92%;
font-size: 16px;
}
}
/* V13-A Reset ingrédients : aucun système de rendu/placement actif. */
.carousel-controls {
position: relative;
min-height: 42px;
margin-top: -20px;
display: flex;
justify-content: center;
align-items: center;
}
.carousel-arrows {
position: absolute;
left: 0;
right: 0;
top: -332px;
z-index: 18;
height: 52px;
pointer-events: none;
}
.carousel-arrow {
position: absolute;
width: 52px;
height: 52px;
border-radius: 999px;
border: 1px solid rgba(255,255,255,.62);
background:
radial-gradient(circle at 50% 28%, rgba(200,74,85,.12), transparent 48%),
rgba(5,6,7,.92);
color: var(--accent-light);
pointer-events: auto;
transition: transform .24s var(--ease), border-color .24s var(--ease), box-shadow .24s var(--ease), background .24s var(--ease);
}
.carousel-arrow:hover,
.carousel-arrow:focus-visible {
transform: translateY(-1px);
border-color: rgba(255,255,255,.94);
background:
radial-gradient(circle at 50% 28%, rgba(200,74,85,.20), transparent 48%),
rgba(7,8,8,.96);
box-shadow:
0 18px 42px rgba(0,0,0,.50),
0 0 18px rgba(147,26,37,.15),
inset 0 1px 0 rgba(255,255,255,.08);
outline: none;
}
.carousel-arrow[data-prev] { left: 8px; }
.carousel-arrow[data-next] { right: 8px; }
.pagination {
margin-top: 22px;
max-width: 360px;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
row-gap: 8px;
gap: 8px;
margin-inline: auto;
}
.pagination button {
width: 7px;
height: 7px;
border-radius: 999px;
border: 0;
padding: 0;
background: rgba(200,74,85,.30);
box-shadow: 0 0 0 1px rgba(147,26,37,.16);
opacity: .35;
}
.pagination button[aria-current="true"] {
width: 22px;
height: 8px;
opacity: 1;
background: linear-gradient(90deg, var(--accent-primary), var(--accent-light));
box-shadow: 0 0 12px rgba(200,74,85,.26);
}
.carte-offers {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px;
max-width: 760px;
margin: 24px auto 0;
}
.carte-offer {
padding: 18px 20px;
border-radius: 10px;
border: 1px solid rgba(255,255,255,.28);
background:
linear-gradient(180deg, rgba(17,19,17,.82), rgba(7,8,9,.88));
box-shadow: inset 0 1px 0 rgba(255,255,255,.035);
}
.carte-offer h3 {
margin: 0 0 6px;
font-family: var(--serif);
font-size: 24px;
line-height: 1;
color: var(--text-ivory);
}
.carte-offer p {
margin: 0;
font-size: 13px;
line-height: 1.45;
color: var(--text-muted);
}
@media (max-width: 1500px) and (min-width: 1121px) {
.carte-top {
grid-template-columns: 270px minmax(0, 1fr);
column-gap: 28px;
}
.cocktail-carousel { padding-inline: 28px; }
.cocktail-track { width: min(100%, 920px); }
.cocktail-card.slot-prev {
transform: translateX(calc(-50% - 185px)) translateY(38px) scale(.92);
}
.cocktail-card.slot-next {
transform: translateX(calc(-50% + 185px)) translateY(38px) scale(.92);
}
.cocktail-card.slot-edge-left {
transform: translateX(calc(-50% - 340px)) translateY(56px) scale(.84);
}
.cocktail-card.slot-edge-right {
transform: translateX(calc(-50% + 340px)) translateY(56px) scale(.84);
}
.cocktail-card.slot-enter-right,
.cocktail-card.slot-out-right {
transform: translateX(calc(-50% + 340px)) translateY(56px) scale(.84);
}
.cocktail-card.slot-enter-left,
.cocktail-card.slot-out-left {
transform: translateX(calc(-50% - 340px)) translateY(56px) scale(.84);
}
}
@media (max-width: 1120px) {
.carte {
min-height: auto;
overflow-x: hidden;
}
.carte .container { overflow-x: hidden; }
.carte-top {
grid-template-columns: 1fr;
gap: 26px;
min-width: 0;
max-width: 100%;
width: 100%;
}
.carte-top > div:first-child p:not(.eyebrow) { max-width: 560px; }
.cocktail-carousel,
.filters,
.cocktail-stage,
.cocktail-track {
min-width: 0;
max-width: 100%;
width: 100%;
}
.cocktail-carousel {
max-width: none;
margin-inline: 0;
padding-inline: 0;
}
.cocktail-stage,
.cocktail-track { overflow: hidden; }
.carte-offers {
max-width: none;
}
}
@media (max-width: 760px) {
.carte {
padding-top: 52px;
padding-bottom: 54px;
}
.filters {
justify-content: flex-start;
overflow-x: auto;
flex-wrap: nowrap;
padding: 0 2px 12px;
margin-bottom: 10px;
scroll-snap-type: x proximity;
}
.cocktail-filter {
flex: 0 0 auto;
height: 39px;
padding: 0 16px;
font-size: 10px;
scroll-snap-align: start;
}
.cocktail-stage {
height: 448px;
min-height: 448px;
}
.cocktail-track {
width: 100%;
height: 444px;
}
.cocktail-card,
.cocktail-card.slot-active,
.cocktail-card.slot-active.cocktail-card--wide {
width: min(80vw, 306px);
height: 408px;
top: 22px;
border-radius: 10px;
}
.cocktail-card.slot-active .cocktail-card__name,
.cocktail-card.slot-active h3 {
font-size: 32px;
}
.cocktail-card.slot-active .cocktail-card__description {
font-size: 13px;
max-width: 235px;
}
.cocktail-card.slot-prev {
transform: translateX(calc(-50% - 60vw)) translateY(42px) scale(.82);
}
.cocktail-card.slot-next {
transform: translateX(calc(-50% + 60vw)) translateY(42px) scale(.82);
}
.cocktail-card.slot-edge-left,
.cocktail-card.slot-edge-right,
.cocktail-card.slot-enter-left,
.cocktail-card.slot-enter-right,
.cocktail-card.slot-out-left,
.cocktail-card.slot-out-right {
opacity: 0;
pointer-events: none;
}
.carousel-controls { margin-top: -12px; }
.carousel-arrows { top: -254px; }
.carousel-arrow { width: 40px; height: 40px; }
.carousel-arrow[data-prev] { left: 6px; }
.carousel-arrow[data-next] { right: 6px; }
.pagination { max-width: 260px; }
.carte-offers {
grid-template-columns: 1fr;
gap: 12px;
margin-top: 36px;
}
}
@media (prefers-reduced-motion: reduce) {
.cocktail-card,
.cocktail-filter,
.carousel-arrow,
.cocktail-stage::before { transition: none !important; }
}
/* ======================================================================
V14-A — Finition globale noir / grenat / ivoire
Palette signature: #931A25. Le doré/champagne n'est plus utilisé comme accent.
====================================================================== */
body{
background-image:
radial-gradient(circle at 14% 9%, rgba(147,26,37,.16), transparent 28rem),
radial-gradient(circle at 84% 28%, rgba(94,13,21,.16), transparent 34rem),
linear-gradient(180deg,#050506 0%,var(--color-black-soft) 22%,#050506 100%);
}
::selection{background:rgba(147,26,37,.44);color:var(--color-text)}
a:hover,.nav a[aria-current=true],.nav a:hover,.footer a:hover{color:var(--color-accent-soft)}
.eyebrow,.gold,.footer-title,.btn-ghost,.placeholder-note,.micro-item .dot,.icon-badge,.quote-card cite,.logo-box,.rating-stars,.scroll-top{color:#A10000}
.placeholder-note::before{background:var(--color-accent);box-shadow:0 0 0 5px rgba(147,26,37,.14)}
.asset-status{background:var(--color-accent-light);color:var(--color-text)}
.btn-primary{
color:var(--color-text);
background:#9C1F2C;
border-color:rgba(255,255,255,.75);
}
.btn-primary:hover{
background:linear-gradient(180deg,#C43745 0%,#A51E2A 48%,#6B1019 100%);
box-shadow:0 20px 56px rgba(147,26,37,.38),inset 0 1px 0 rgba(255,255,255,.18);
}
.btn-secondary,.nav-toggle,.tag,.footer-card,.legal-tile,.card,.faq-item,.event-card,.quote-card,.logo-box,.age-dialog{
border-color:rgba(255,255,255,.38);
}
.card:hover,.event-card:hover,.quote-card:hover,.feature-card:hover{border-color:rgba(255,255,255,.72);box-shadow:0 24px 80px rgba(0,0,0,.58),0 0 42px rgba(255,255,255,.16)}
.tag.is-active{background:linear-gradient(180deg,#B32634,#A10000);border-color:rgba(255,255,255,.78);color:var(--color-text)}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--color-accent-light);box-shadow:0 0 0 3px rgba(255,255,255,.22);background:#0c0d0e;outline:none}
.required{color:var(--color-accent-light)}
.faq-trigger:hover,.faq-trigger[aria-expanded=true]{border-color:rgba(255,255,255,.72);box-shadow:0 12px 34px rgba(255,255,255,.16)}
.divider,.menu-divider{background:linear-gradient(90deg,transparent,rgba(147,26,37,.58),transparent)}
/* La Carte — accents grenat */
.cocktail-filter{border-color:rgba(255,255,255,.38);background:linear-gradient(180deg,rgba(18,13,15,.98),rgba(5,5,6,.98));color:var(--color-text);box-shadow:inset 0 1px 0 rgba(255,255,255,.05),inset 0 -10px 18px rgba(0,0,0,.36)}
.cocktail-filter:hover{border-color:rgba(255,255,255,.75);color:var(--color-accent-soft)}
.cocktail-filter.is-active{color:var(--color-text);border-color:rgba(255,255,255,.86);background:linear-gradient(180deg,#A51E2A 0%,#7A131D 100%);box-shadow:0 10px 30px rgba(255,255,255,.28),0 16px 36px rgba(255,255,255,.14),inset 0 1px 0 rgba(255,255,255,.36),inset 0 -10px 16px rgba(90,13,21,.18)}
.cocktail-filter.is-active::before{background:radial-gradient(ellipse at center,rgba(200,74,85,.42),transparent 72%)}
.cocktail-filter.is-active::after{background:#A10000;border-color:rgba(255,255,255,.75);box-shadow:0 0 12px rgba(255,255,255,.34)}
.cocktail-stage::before{background:radial-gradient(ellipse at center,rgba(147,26,37,.26) 0%,rgba(94,13,21,.16) 30%,rgba(147,26,37,.05) 58%,transparent 78%)}
.cocktail-stage.cocktail-stage--wide-active::before{background:radial-gradient(ellipse at center,rgba(147,26,37,.30) 0%,rgba(94,13,21,.18) 34%,rgba(147,26,37,.06) 60%,transparent 80%)}
.cocktail-card.slot-active{border-color:rgba(255,255,255,.95);box-shadow:0 34px 90px rgba(0,0,0,.72),0 0 0 1px rgba(255,255,255,.30),0 0 52px rgba(255,255,255,.24),0 0 120px rgba(255,255,255,.10),inset 0 1px 0 rgba(255,255,255,.08)}
.cocktail-card.slot-active .cocktail-card__inner-glow{box-shadow:inset 0 0 0 1px rgba(255,255,255,.06),0 0 28px rgba(147,26,37,.18)}
.cocktail-arrow{border-color:rgba(255,255,255,.62);color:var(--color-accent-light);background:radial-gradient(circle at 50% 28%,rgba(255,255,255,.12),transparent 48%),rgba(5,5,6,.86)}
.cocktail-arrow:hover{border-color:rgba(255,255,255,.94);box-shadow:0 0 18px rgba(255,255,255,.18),0 18px 48px rgba(0,0,0,.42)}
.cocktail-pagination button{background:rgba(200,74,85,.28);box-shadow:0 0 0 1px rgba(147,26,37,.16)}
.cocktail-pagination button.is-active{background:linear-gradient(90deg,var(--color-accent),var(--color-accent-light));box-shadow:0 0 12px rgba(200,74,85,.26)}
.cocktail-focus-card{border-color: rgba(255,255,255,.62);box-shadow:0 0 40px rgba(255,255,255,.18),0 34px 110px rgba(0,0,0,.75)}
.cocktail-focus-card__visual{border-color:rgba(255,255,255,.30)}
.cocktail-focus-card::before{background:radial-gradient(ellipse at center,rgba(200,74,85,.10),transparent 58%)}
.cocktail-focus-card::after{border-color:rgba(255,255,255,.24)}
.focus-card-corner{color:rgba(200,74,85,.64)}
/* ======================================================================
V14-C — corrections visuelles légères demandées QA
- Carte active : image clairement visible
- Footer : mention de version neutralisée dans le HTML
====================================================================== */
.cocktail-card__visual {
background-image: var(--cocktail-card-bg);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.cocktail-card.slot-active .cocktail-card__visual,
.cocktail-card.slot-active .cocktail-card__image {
opacity: 1 !important;
visibility: visible !important;
}
.cocktail-card.slot-active .cocktail-card__image {
filter: brightness(1.06) contrast(1.04) saturate(1) !important;
mix-blend-mode: normal;
}
.cocktail-card.slot-active::before {
background:
radial-gradient(ellipse at center, rgba(255,255,255,.03), transparent 50%),
linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.22));
}
.cocktail-card.slot-active::after {
height: 38%;
background:
linear-gradient(
180deg,
rgba(5, 6, 8, 0) 0%,
rgba(5, 6, 8, .58) 42%,
rgba(5, 6, 8, .92) 100%
);
}
.cocktail-card.slot-active.cocktail-card--wide::after {
height: 44%;
}
/* Le bouton principal doit rester ivoire, y compris en contexte d'erreur formulaire. */
.form button[type="submit"],
.form .btn-primary,
.contact-form .btn-primary,
.contact-form button[type="submit"],
.form button[type="submit"]:disabled,
.contact-form button[type="submit"]:disabled {
color: #F1E8E2 !important;
}
/* --------------------------------------------------------------------------
V14-E1 — Concept section final polish (scoped: #concept only)
-------------------------------------------------------------------------- */
#concept.concept-section {
padding: 0;
overflow: clip;
background:
radial-gradient(ellipse at 66% 45%, rgba(117,21,30,.10), transparent 42%),
linear-gradient(180deg, rgba(5,5,6,.98), rgba(9,10,12,1));
}
#concept .concept-section__inner {
max-width: 1680px;
margin: 0 auto;
display: grid;
grid-template-columns: minmax(520px, .95fr) minmax(620px, 1.05fr);
gap: clamp(64px, 6vw, 120px);
align-items: center;
padding: clamp(72px, 6vw, 110px) 72px;
}
#concept .concept-visual {
position: relative;
min-height: clamp(520px, 36vw, 640px);
border-radius: 0;
overflow: hidden;
border: 1px solid rgba(255, 255, 255, .34);
border-top-color: rgba(255, 255, 255, .46);
border-bottom-color: rgba(255, 255, 255, .56);
background: #050506;
}
#concept .concept-visual::before {
content: "";
position: absolute;
inset: auto 0 0 0;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(117,21,30,.72), transparent);
z-index: 3;
pointer-events: none;
}
#concept .concept-visual::after {
content: "";
position: absolute;
inset: 0;
z-index: 2;
background:
radial-gradient(ellipse at center, rgba(255,255,255,.04), transparent 42%),
linear-gradient(90deg, rgba(0,0,0,.22), rgba(0,0,0,.58));
pointer-events: none;
}
#concept .concept-visual img {
width: 100%;
height: 100%;
min-height: clamp(520px, 36vw, 640px);
object-fit: cover;
object-position: center;
filter: brightness(1.75) contrast(1.05) ;
}
.red{
display: inline !important;
}
#concept .concept-content {
max-width: 820px;
padding-right: 0;
}
#concept .concept-eyebrow {
color: var(--brand-red);
letter-spacing: .18em;
text-transform: uppercase;
font-weight: 800;
margin-bottom: 22px;
}
#concept .concept-title {
max-width: 720px;
font-size: clamp(52px, 4.2vw, 76px);
line-height: 1.02;
letter-spacing: -0.03em;
text-wrap: balance;
}
#concept .concept-title span {
display: block;
}
#concept .concept-lead {
max-width: 720px;
margin-top: 26px;
font-size: clamp(21px, 1.35vw, 28px);
line-height: 1.42;
color: #F1E8E2;
}
#concept .concept-copy {
max-width: 760px;
margin-top: 18px;
font-size: clamp(17px, 1vw, 20px);
line-height: 1.75;
color: #CDBFBA;
}
#concept .concept-pillars {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 18px;
margin-top: 56px;
}
#concept .concept-pillar {
position: relative;
min-height: 190px;
padding: 26px 12px;
border: 1px solid rgba(255,255,255,.34);
border-left: 1px solid rgba(255,255,255,.34);
background:
linear-gradient(180deg, rgba(18,14,15,.88), rgba(7,7,8,.96));
overflow: hidden;
}
#concept .concept-pillar::before {
content: "";
position: absolute;
left: 24px;
top: 0;
width: 42px;
height: 2px;
background: rgba(255,255,255,.92);
}
.fixImgBtm{
object-position: center bottom !important;
}
.fixImgTop{
object-position: center top !important;
}
#concept .concept-pillar h3 {
margin: 0 0 18px;
font-family: var(--sans);
color: #A10000;
font-size: 14px;
line-height: 1.15;
letter-spacing: .12em;
text-transform: uppercase;
}
#concept .concept-pillar p {
margin: 0;
color: #F1E8E2;
font-size: 17px;
line-height: 1.65;
}
@media (max-width: 1180px) {
#concept .concept-section__inner {
grid-template-columns: minmax(420px, .9fr) minmax(500px, 1.1fr);
gap: 56px;
padding-inline: 48px;
}
#concept .concept-pillars {
grid-template-columns: 1fr;
margin-top: 42px;
}
#concept .concept-pillar {
min-height: 150px;
}
}
@media (max-width: 900px) {
#concept .concept-section__inner {
display: flex;
flex-direction: column;
gap: 42px;
padding: 64px 24px;
}
#concept .concept-content {
order: 1;
width: 100%;
}
#concept .concept-visual {
order: 2;
width: 100%;
min-height: 420px;
}
#concept .concept-visual img {
min-height: 420px;
}
#concept .concept-visual::after {
background:
radial-gradient(ellipse at center, rgba(255,255,255,.05), transparent 42%),
linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.62));
}
#concept .concept-title {
font-size: clamp(46px, 12vw, 64px);
line-height: 1;
max-width: 100%;
}
#concept .concept-lead {
font-size: clamp(20px, 5.2vw, 22px);
line-height: 1.42;
}
#concept .concept-copy {
font-size: 16px;
line-height: 1.7;
}
#concept .concept-pillars {
grid-template-columns: 1fr;
gap: 16px;
margin-top: 38px;
}
}
/* V14-E2 — Concept proportion reduction */
@media (min-width: 901px) {
#concept .concept-title {
max-width: 760px;
font-size: clamp(52px, 4.2vw, 76px);
line-height: 1.02;
letter-spacing: -0.03em;
}
}
/* V14-F1 — Prestation clé en main premium */
.prestation-section {
padding-block: clamp(100px, 9vw, 150px);
background:
radial-gradient(ellipse at 58% 30%, rgba(117,21,30,.10), transparent 42%),
linear-gradient(180deg, rgba(5,5,6,.98), rgba(9,10,12,.96));
}
.prestation-header {
max-width: 1680px;
margin: 0 auto 56px;
padding-inline: 72px;
display: grid;
grid-template-columns: minmax(0, .9fr) minmax(420px, .55fr);
gap: 72px;
align-items: end;
}
.prestation-eyebrow {
color: var(--brand-red);
margin-bottom: 22px;
}
.prestation-title {
max-width: 930px;
margin: 0;
font-family: var(--serif);
font-size: clamp(58px, 4.8vw, 92px);
line-height: .98;
letter-spacing: -.035em;
color: #F1E8E2;
text-wrap: balance;
}
.prestation-title span {
display: block;
}
.prestation-lead {
max-width: 720px;
margin: 0;
font-size: clamp(18px, 1.15vw, 22px);
line-height: 1.65;
color: #CDBFBA;
}
.prestation-proof {
margin: 24px 0 0;
max-width: 38ch;
font-size: clamp(.875rem, calc(.82rem + .22vw), 1rem);
line-height: 1.35;
letter-spacing: clamp(.08em, calc(.05em + .12vw), .16em);
text-transform: uppercase;
text-wrap: balance;
color: var(--brand-red);
text-shadow: var(--red-aura);
}
.prestation-proof-keep {
white-space: nowrap;
}
.prestation-grid {
max-width: 1680px;
margin: 0 auto;
padding-inline: 72px;
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 24px;
}
.prestation-card {
position: relative;
min-height: 300px;
padding: 34px 34px 32px;
border: 1px solid rgba(255,255,255,.38);
background:
linear-gradient(180deg, rgba(18, 14, 15, .96), rgba(7, 7, 8, .98));
overflow: hidden;
transition:
transform .28s ease,
border-color .28s ease,
box-shadow .28s ease;
}
.prestation-card:hover {
transform: translateY(-4px);
border-color: rgba(255,255,255,.72);
box-shadow:
0 30px 92px rgba(0,0,0,.46),
0 0 42px rgba(117,21,30,.18),
inset 0 1px 0 rgba(255,255,255,.045);
}
.prestation-card::before {
content: "";
position: absolute;
left: 34px;
top: 0;
width: 46px;
height: 2px;
background: rgba(255,255,255,.92);
}
.prestation-card::after {
content: attr(data-index);
position: absolute;
right: 24px;
bottom: 240px;
font-family: var(--serif);
font-size: 72px;
line-height: 1;
color: rgba(255, 255, 255, .10);
pointer-events: none;
}
.prestation-icon {
width: 68px;
height: 68px;
display: grid;
place-items: center;
margin-bottom: 30px;
border: 0;
background: none;
box-shadow: none;
color: var(--brand-red);
text-shadow: var(--red-aura);
}
.prestation-icon svg {
width: 38px;
height: 38px;
fill: none;
stroke: currentColor;
stroke-width: 1.9;
stroke-linecap: round;
stroke-linejoin: round;
}
.prestation-card h3 {
margin: 0 0 16px;
font-family: var(--serif);
font-size: clamp(28px, 1.8vw, 34px);
line-height: 1.05;
color: #F1E8E2;
}
.prestation-card p {
margin: 0;
max-width: 34ch;
font-size: 17px;
line-height: 1.65;
color: #CDBFBA;
}
.prestation-more {
max-width: 1680px;
margin: 34px auto 0;
padding-inline: 72px;
}
.prestation-more a {
display: inline-flex;
align-items: center;
color: #A10000;
font-weight: 800;
letter-spacing: .08em;
text-transform: uppercase;
font-size: 12px;
text-decoration: none;
transition: color .22s ease, transform .22s ease;
}
.prestation-more a:hover {
color: #8A1A25;
transform: translateX(4px);
}
@media (max-width: 1280px) {
.prestation-header {
grid-template-columns: 1fr;
gap: 26px;
align-items: start;
}
.prestation-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 760px) {
.prestation-section {
padding-block: 82px;
}
.prestation-header {
display: flex;
flex-direction: column;
gap: 24px;
margin-bottom: 38px;
padding-inline: 24px;
}
.prestation-title {
font-size: clamp(46px, 12vw, 64px);
line-height: 1;
}
.prestation-lead {
font-size: 16px;
line-height: 1.7;
}
.prestation-proof {
margin-top: 18px;
letter-spacing: .12em;
}
.prestation-grid {
grid-template-columns: 1fr;
padding-inline: 24px;
gap: 16px;
}
.prestation-card {
min-height: auto;
padding: 28px 24px;
}
.prestation-card::before {
left: 24px;
}
.prestation-card::after {
font-size: 58px;
opacity: .9;
}
.prestation-icon {
width: 60px;
height: 60px;
margin-bottom: 26px;
}
.prestation-icon svg {
width: 34px;
height: 34px;
}
.prestation-more {
padding-inline: 24px;
margin-top: 26px;
}
}
/* V14-G1 — Repères pratiques compact trust strip */
.reperes {
padding-block: clamp(48px, 5vw, 72px);
border-top: 1px solid rgba(255,255,255,.18);
border-bottom: 1px solid rgba(255,255,255,.18);
background:
radial-gradient(ellipse at 50% 0%, rgba(117, 21, 30, .10), transparent 56%),
linear-gradient(180deg, rgba(5, 5, 6, .98), rgba(8, 7, 8, .98));
}
.reperes-container {
max-width: 1680px;
}
.reperes-eyebrow {
color: var(--brand-red);
font-size: var(--section-eyebrow-size);
font-weight: 800;
letter-spacing: .18em;
text-transform: uppercase;
margin-bottom: 24px;
}
.reperes-list {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 16px;
}
.repere-item {
display: flex;
align-items: center;
gap: 12px;
min-height: 58px;
padding: 14px 18px;
border: 1px solid rgba(255,255,255,.34);
background:
linear-gradient(180deg, rgba(17,14,15,.72), rgba(7,7,8,.92));
box-shadow:
inset 0 1px 0 rgba(255,255,255,.035);
color: #CDBFBA;
transition:
border-color .24s ease,
background .24s ease,
box-shadow .24s ease,
transform .24s ease;
}
.repere-item:hover {
transform: translateY(-2px);
border-color: rgba(255,255,255,.62);
background:
linear-gradient(180deg, rgba(22,15,17,.86), rgba(8,7,8,.96));
box-shadow:
0 16px 54px rgba(0,0,0,.28),
0 0 24px rgba(255,255,255,.08),
inset 0 1px 0 rgba(255,255,255,.04);
}
/* MINI-LOT 2E1 — pictogrammes sans cadre, cohérents avec Prestations */
.repere-icon {
width: 42px;
height: 42px;
flex: 0 0 42px;
display: grid;
place-items: center;
border: 0;
background: none;
color: var(--brand-red);
box-shadow: none;
text-shadow: var(--red-aura);
}
.repere-icon svg {
width: 28px;
height: 28px;
stroke: currentColor;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
fill: none;
/* filter: */
/* drop-shadow(0 0 1px rgba(255,255,255,.68)) */
/* drop-shadow(0 0 3px rgba(255,255,255,.20)); */
}
.repere-text {
display: block;
font-size: 14px;
line-height: 1.28;
font-weight: 700;
color: #CDBFBA;
}
.mobile-break {
display: inline;
}
@media (max-width: 1180px) {
.reperes-list {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (max-width: 760px) {
.reperes {
padding-block: 56px;
}
.reperes-eyebrow {
margin-bottom: 20px;
}
.reperes-list {
grid-template-columns: 1fr;
gap: 12px;
}
.repere-item {
min-height: 56px;
padding: 14px 16px;
}
.repere-icon {
width: 40px;
height: 40px;
flex-basis: 40px;
}
.repere-icon svg {
width: 26px;
height: 26px;
}
.repere-text {
font-size: 14px;
}
.mobile-break {
display: block;
}
}
/* V14-H1 — Événements premium editorial block */
.events-section {
padding-block: clamp(100px, 9vw, 150px);
}
.events-section .container {
max-width: none;
width: 100%;
padding: 0;
}
.events-header {
max-width: 1680px;
margin: 0 auto 56px;
padding-inline: 72px;
display: grid;
grid-template-columns: minmax(520px, 0.9fr) minmax(520px, 1fr);
gap: 72px;
align-items: end;
}
.events-heading {
min-width: 0;
}
.events-eyebrow {
color: var(--brand-red);
letter-spacing: .18em;
text-transform: uppercase;
font-weight: 800;
margin-bottom: 22px;
}
.events-title,
.events-section h2 {
max-width: 920px;
margin: 0;
font-family: var(--serif);
font-size: clamp(64px, 4.4vw, 88px);
line-height: .98;
letter-spacing: -.035em;
color: #F1E8E2;
text-wrap: balance;
}
.events-title span {
display: block;
}
.events-lead {
max-width: 760px;
margin: 0;
font-size: clamp(18px, 1.15vw, 22px);
line-height: 1.65;
color: #CDBFBA;
}
.events-section .events-grid {
max-width: 1680px;
margin: 0 auto;
padding-inline: 72px;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 24px;
}
.events-section .event-card {
position: relative;
min-height: 420px;
border: 1px solid rgba(255,255,255,.38);
border-radius: 0;
background: linear-gradient(180deg, rgba(17, 14, 15, .94), rgba(7, 7, 8, .98));
overflow: hidden;
transition:
transform .28s ease,
border-color .28s ease,
box-shadow .28s ease;
}
.events-section .event-card:hover {
transform: translateY(-4px);
border-color: rgba(255,255,255,.72);
box-shadow:
0 30px 90px rgba(0, 0, 0, .46),
0 0 42px rgba(117, 21, 30, .16);
}
.events-section .event-card__media {
position: relative;
height: 210px;
overflow: hidden;
background: #050506;
}
.events-section .event-card__media img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
filter: brightness(.86) contrast(1.06) saturate(.95);
transition: transform .5s ease, filter .3s ease;
}
.events-section .event-card:hover .event-card__media img {
transform: scale(1.035);
filter: brightness(.96) contrast(1.08) saturate(1);
}
.events-section .event-card__media::after {
content: "";
position: absolute;
inset: auto 0 0 0;
height: 55%;
background: linear-gradient(180deg, transparent, rgba(7, 7, 8, .92));
pointer-events: none;
}
.events-section .event-card__body {
padding: 26px 26px 30px;
}
.events-section .event-card__tag {
display: inline-flex;
margin-bottom: 14px;
color: #A10000;
font-size: 11px;
font-weight: 800;
letter-spacing: .16em;
text-transform: uppercase;
}
.events-section .event-card h3 {
margin: 0 0 14px;
font-family: var(--serif);
font-size: clamp(27px, 1.6vw, 34px);
line-height: 1.08;
color: #F1E8E2;
text-wrap: balance;
}
.events-section .event-card p {
margin: 0;
max-width: 36ch;
font-size: 16.5px;
line-height: 1.62;
color: #CDBFBA;
}
@media (max-width: 1100px) {
.events-header {
grid-template-columns: 1fr;
gap: 28px;
align-items: start;
}
.events-section .events-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 900px) {
.events-section {
padding-block: 82px;
}
.events-header {
display: flex;
flex-direction: column;
gap: 24px;
padding-inline: 24px;
margin-bottom: 38px;
}
.events-title,
.events-section h2 {
font-size: clamp(46px, 12vw, 64px);
line-height: 1;
}
.events-lead {
font-size: 18px;
line-height: 1.6;
}
.events-section .events-grid {
grid-template-columns: 1fr;
padding-inline: 24px;
gap: 18px;
}
.events-section .event-card {
min-height: auto;
}
.events-section .event-card__media {
height: 220px;
}
.events-section .event-card__body {
padding: 24px 22px 28px;
}
}
/* V14-H1 adjustment — keep Events H2 on two balanced desktop lines */
@media (min-width: 1201px) {
.events-header {
grid-template-columns: minmax(760px, .95fr) minmax(520px, .7fr);
}
.events-title,
.events-section h2 {
max-width: 820px;
font-size: clamp(64px, 4.6vw, 88px);
}
}
/* V14-I1 — Animations cocktail: section premium */
.animations-section {
padding-block: clamp(100px, 9vw, 150px);
}
.animations-header {
max-width: 1680px;
margin: 0 auto 56px;
padding-inline: 72px;
display: grid;
grid-template-columns: minmax(720px, .95fr) minmax(520px, .85fr);
gap: 64px;
align-items: end;
}
.animations-eyebrow {
color: var(--brand-red);
}
.animations-title,
.animations h2 {
max-width: 820px;
margin: 0;
font-family: var(--serif);
font-size: clamp(64px, 5vw, 96px);
line-height: .98;
letter-spacing: -.035em;
color: #F1E8E2;
text-wrap: balance;
}
.animations-title span {
display: block;
}
.animations-lead {
max-width: 760px;
margin: 0;
font-size: clamp(18px, 1.15vw, 22px);
line-height: 1.65;
color: #CDBFBA;
}
.animations-grid {
max-width: 1680px;
margin: 0 auto;
padding-inline: 72px;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 28px;
}
.animation-card {
position: relative;
min-height: 460px;
border: 1px solid rgba(255,255,255,.38);
background: linear-gradient(180deg, rgba(17,14,15,.94), rgba(7,7,8,.98));
overflow: hidden;
transition: transform .28s ease, border-color .28s ease, box-shadow .28s ease;
}
.animation-card:hover,
.animation-card:focus-within {
transform: translateY(-4px);
border-color: rgba(255,255,255,.72);
}
.animation-card__media {
position: relative;
height: 250px;
overflow: hidden;
}
.animation-card__media img,
.animation-card img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
object-position: center;
filter: brightness(.88) contrast(1.08) saturate(.98);
transition: transform .5s ease, filter .3s ease;
}
.animation-card:hover .animation-card__media img,
.animation-card:focus-within .animation-card__media img {
transform: scale(1.035);
filter: brightness(.98) contrast(1.1) saturate(1.02);
}
.animation-card__media::after {
content: "";
position: absolute;
inset: auto 0 0 0;
height: 62%;
background: linear-gradient(180deg, transparent, rgba(7,7,8,.94));
pointer-events: none;
}
.animation-card__body {
padding: 28px 30px 32px;
}
.animation-card__tag {
display: inline-flex;
margin-bottom: 14px;
color: #A10000;
font-size: 11px;
font-weight: 800;
letter-spacing: .16em;
text-transform: uppercase;
}
.animation-card h3 {
margin: 0 0 14px;
font-family: var(--serif);
font-size: clamp(30px, 1.8vw, 38px);
line-height: 1.05;
color: #F1E8E2;
text-wrap: balance;
}
.animation-card p {
margin: 0;
max-width: 42ch;
font-size: 17px;
line-height: 1.65;
color: #CDBFBA;
}
.animations-more {
max-width: 1680px;
margin: 34px auto 0;
padding-inline: 72px;
}
.animations-more a {
display: inline-flex;
align-items: center;
gap: 10px;
color: #A10000;
font-size: 13px;
font-weight: 800;
letter-spacing: .12em;
text-transform: uppercase;
transition: color .22s ease, transform .22s ease;
}
.animations-more a:hover,
.animations-more a:focus-visible {
color: #F1E8E2;
transform: translateX(3px);
}
@media (max-width: 900px) {
.animations-section {
padding-block: 82px;
}
.animations-header {
display: flex;
flex-direction: column;
gap: 24px;
padding-inline: 24px;
margin-bottom: 38px;
}
.animations-title,
.animations h2 {
font-size: clamp(46px, 12vw, 64px);
line-height: 1;
}
.animations-lead {
font-size: 18px;
line-height: 1.6;
}
.animations-grid {
grid-template-columns: 1fr;
padding-inline: 24px;
gap: 18px;
}
.animation-card {
min-height: auto;
}
.animation-card__media {
height: 230px;
}
.animation-card__body {
padding: 26px 24px 28px;
}
.animations-more {
margin-top: 28px;
padding-inline: 24px;
}
}
/* ======================================================================
Galerie photo premium — section autonome avant les références.
====================================================================== */
.gallery-section {
padding-block: clamp(76px, 9vw, 142px);
overflow: clip;
background:
radial-gradient(circle at 18% 8%, rgba(147, 26, 37, .16), transparent 31rem),
radial-gradient(circle at 86% 88%, rgba(255, 255, 255, .055), transparent 24rem),
linear-gradient(180deg, rgba(8, 8, 10, .18), rgba(2, 2, 3, .46));
}
.gallery-shell {
width: min(100%, 1760px);
margin-inline: auto;
padding-inline: clamp(12px, 3.75vw, 72px);
}
.sds-gallery {
--sds-gallery-gap: clamp(22px, 3.4vw, 58px);
position: relative;
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
grid-template-rows: 512fr 296fr 264fr;
gap: var(--sds-gallery-gap);
aspect-ratio: 16 / 9;
width: 100%;
min-height: 520px;
background: rgba(255, 255, 255, .96);
border: 4px solid rgba(255, 255, 255, .96);
box-shadow:
0 32px 120px rgba(0, 0, 0, .56),
0 0 0 1px rgba(255, 255, 255, .07),
0 0 76px rgba(147, 26, 37, .13);
isolation: isolate;
overflow: hidden;
transition: gap 950ms cubic-bezier(.22, 1, .36, 1), box-shadow 950ms cubic-bezier(.22, 1, .36, 1);
}
.sds-gallery::before {
content: "";
position: absolute;
inset: -1px;
z-index: 3;
pointer-events: none;
background:
linear-gradient(120deg, rgba(255, 255, 255, .22), transparent 18%, transparent 74%, rgba(255, 255, 255, .14)),
radial-gradient(circle at 50% 15%, rgba(255, 255, 255, .16), transparent 36%);
mix-blend-mode: screen;
opacity: .46;
}
.sds-gallery__item {
position: relative;
display: block;
width: 100%;
height: 100%;
min-width: 0;
min-height: 0;
padding: 0;
border: 0;
border-radius: 0;
background: #08080a;
overflow: hidden;
cursor: zoom-in;
transform: translate3d(var(--sds-tx, 0), var(--sds-ty, 0), 0) scale(.935);
opacity: 1;
filter: brightness(.32) saturate(.82) contrast(1.14) blur(.25px);
transform-origin: center;
transition:
transform 950ms cubic-bezier(.22, 1, .36, 1),
opacity 780ms ease,
filter 950ms cubic-bezier(.22, 1, .36, 1);
will-change: transform, opacity, filter;
}
.sds-gallery.is-assembled {
--sds-gallery-gap: 4px;
}
.sds-gallery.is-assembled .sds-gallery__item {
transform: translate3d(0, 0, 0) scale(1);
opacity: 1;
filter: brightness(1) saturate(1) contrast(1) blur(0);
}
.sds-gallery__item::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background:
linear-gradient(180deg, transparent 58%, rgba(0, 0, 0, .26)),
radial-gradient(circle at 50% 0%, rgba(255, 255, 255, .08), transparent 44%);
opacity: .7;
transition: opacity 320ms ease;
}
.sds-gallery__item:hover,
.sds-gallery__item:focus-visible {
z-index: 4;
outline: none;
}
.sds-gallery__item:hover img,
.sds-gallery__item:focus-visible img {
transform: scale(1.045);
filter: brightness(1.06) contrast(1.08) saturate(1.04);
}
.sds-gallery__item:hover::after,
.sds-gallery__item:focus-visible::after {
opacity: .28;
}
.sds-gallery__item img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
object-position: center;
filter: brightness(.94) contrast(1.08) saturate(1.02);
transform: scale(1.012);
transition: transform 700ms cubic-bezier(.22, 1, .36, 1), filter 420ms ease;
}
/* Composition 3 / 3 / 4 calée sur la plaquette, sur la grille 12 colonnes
de la V1 validée. Le faible nombre de pistes est essentiel : le gap peut
réellement se refermer comme un assemblage, sans être multiplié par des
dizaines de colonnes techniques. Les vecteurs d’entrée sont ceux de la V1. */
.sds-gallery__item--01 { grid-column: 1 / span 6; grid-row: 1; --sds-tx: -74px; --sds-ty: -54px; }
.sds-gallery__item--02 { grid-column: 7 / span 3; grid-row: 1; --sds-tx: 0; --sds-ty: -70px; }
.sds-gallery__item--03 { grid-column: 10 / span 3; grid-row: 1; --sds-tx: 72px; --sds-ty: -48px; }
.sds-gallery__item--04 { grid-column: 1 / span 4; grid-row: 2; --sds-tx: -88px; --sds-ty: 6px; }
.sds-gallery__item--05 { grid-column: 5 / span 4; grid-row: 2; --sds-tx: 0; --sds-ty: 18px; }
.sds-gallery__item--06 { grid-column: 9 / span 4; grid-row: 2; --sds-tx: 86px; --sds-ty: 10px; }
.sds-gallery__item--07 { grid-column: 1 / span 3; grid-row: 3; --sds-tx: -68px; --sds-ty: 72px; }
.sds-gallery__item--08 { grid-column: 4 / span 3; grid-row: 3; --sds-tx: -18px; --sds-ty: 86px; }
.sds-gallery__item--09 { grid-column: 7 / span 3; grid-row: 3; --sds-tx: 26px; --sds-ty: 78px; }
.sds-gallery__item--10 { grid-column: 10 / span 3; grid-row: 3; --sds-tx: 78px; --sds-ty: 84px; }
.sds-gallery-modal {
position: fixed;
inset: 0;
z-index: 10040;
display: grid;
place-items: center;
padding: clamp(18px, 3.8vw, 64px);
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity 360ms ease, visibility 0s linear 360ms;
}
.sds-gallery-modal.is-open {
opacity: 1;
visibility: visible;
pointer-events: auto;
transition: opacity 360ms ease, visibility 0s linear 0s;
}
html.sds-gallery-modal-open,
body.sds-gallery-modal-open {
overflow: hidden !important;
overscroll-behavior: none;
}
.sds-gallery-modal__backdrop {
position: absolute;
inset: 0;
background:
radial-gradient(circle at 50% 24%, rgba(255, 255, 255, .12), transparent 31rem),
linear-gradient(180deg, rgba(0, 0, 0, .76), rgba(3, 3, 5, .94));
backdrop-filter: blur(26px) saturate(1.12);
-webkit-backdrop-filter: blur(26px) saturate(1.12);
}
.sds-gallery-modal__figure {
position: relative;
width: min(1320px, 92vw);
height: min(820px, 84vh);
margin: 0;
display: grid;
grid-template-rows: minmax(0, 1fr);
gap: 0;
padding: clamp(12px, 1.7vw, 22px);
border: 1px solid rgba(255, 255, 255, .22);
border-radius: clamp(22px, 2.2vw, 34px);
background:
linear-gradient(145deg, rgba(18, 18, 21, .82), rgba(6, 6, 8, .88)),
radial-gradient(circle at 50% 0%, rgba(255, 255, 255, .08), transparent 42%);
box-shadow:
0 44px 150px rgba(0, 0, 0, .82),
inset 0 1px 0 rgba(255, 255, 255, .12),
0 0 58px rgba(147, 26, 37, .18);
transform: translateY(18px) scale(.965);
opacity: 0;
transition: transform 560ms cubic-bezier(.22, 1, .36, 1), opacity 360ms ease;
overflow: hidden;
}
.sds-gallery-modal.is-open .sds-gallery-modal__figure {
transform: translateY(0) scale(1);
opacity: 1;
}
.sds-gallery-modal__image {
width: 100%;
height: 100%;
min-height: 0;
display: block;
object-fit: contain;
border-radius: clamp(16px, 1.6vw, 26px);
background: rgba(0, 0, 0, .34);
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06);
}
/* Transition de navigation : légère, latérale, sans déplacer le cadre modal. */
.sds-gallery-modal.is-transitioning .sds-gallery-modal__nav {
pointer-events: none;
}
.sds-gallery-modal__image--outgoing {
transform-origin: 50% 50%;
will-change: transform, opacity;
}
.sds-gallery-modal__nav {
position: absolute;
top: 50%;
z-index: 3;
width: clamp(38px, 3.25vw, 54px);
height: clamp(64px, 6vw, 86px);
padding: 0;
border: 0;
border-radius: 0;
background-color: transparent;
background-repeat: no-repeat;
background-position: center;
background-size: 100% 100%;
color: transparent;
font-size: 0;
line-height: 0;
cursor: pointer;
box-shadow: none;
filter: drop-shadow(0 5px 12px rgba(0, 0, 0, .76));
transform: translateY(-50%);
transition: transform 220ms ease, opacity 220ms ease;
}
.sds-gallery-modal__nav:hover,
.sds-gallery-modal__nav:focus-visible {
border: 0;
background-color: transparent;
box-shadow: none;
transform: translateY(-50%) scale(1.035);
outline: none;
}
.sds-gallery-modal__nav span {
display: block;
width: 0;
height: 0;
overflow: hidden;
}
.sds-gallery-modal__nav--prev {
left: clamp(10px, 1.4vw, 18px);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 40'%3E%3Cpolyline points='19,3 10,20 19,37' fill='none' stroke='white' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.sds-gallery-modal__nav--next {
right: clamp(10px, 1.4vw, 18px);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 40'%3E%3Cpolyline points='5,3 14,20 5,37' fill='none' stroke='white' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.sds-gallery-modal__close {
position: absolute;
top: clamp(14px, 2vw, 24px);
right: clamp(14px, 2vw, 24px);
z-index: 3;
width: 46px;
height: 46px;
display: grid;
place-items: center;
padding: 0;
border: 1px solid rgba(255, 255, 255, .3);
border-radius: 999px;
background: rgba(5, 5, 6, .42);
color: #fff;
font-size: 30px;
line-height: 1;
cursor: pointer;
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
transition: transform 240ms ease, background 240ms ease, border-color 240ms ease;
}
.sds-gallery-modal__close:hover,
.sds-gallery-modal__close:focus-visible {
transform: scale(1.06);
background: rgba(255, 255, 255, .12);
border-color: rgba(255, 255, 255, .64);
outline: none;
}
@media (max-width: 900px) {
.gallery-section {
padding-block: 74px;
}
.gallery-shell {
padding-inline: 18px;
}
.sds-gallery {
min-height: 0;
aspect-ratio: auto;
grid-template-columns: repeat(6, minmax(0, 1fr));
grid-template-rows: repeat(5, minmax(132px, 20vw));
border-width: 3px;
}
.sds-gallery__item--01 { grid-column: 1 / span 4; grid-row: 1 / span 2; }
.sds-gallery__item--02 { grid-column: 5 / span 2; grid-row: 1; }
.sds-gallery__item--03 { grid-column: 5 / span 2; grid-row: 2; }
.sds-gallery__item--04 { grid-column: 1 / span 3; grid-row: 3; }
.sds-gallery__item--05 { grid-column: 4 / span 3; grid-row: 3; }
.sds-gallery__item--06 { grid-column: 1 / span 3; grid-row: 4; }
.sds-gallery__item--07 { grid-column: 4 / span 3; grid-row: 4; }
.sds-gallery__item--08 { grid-column: 1 / span 2; grid-row: 5; }
.sds-gallery__item--09 { grid-column: 3 / span 2; grid-row: 5; }
.sds-gallery__item--10 { grid-column: 5 / span 2; grid-row: 5; }
.sds-gallery-modal__figure {
width: 94vw;
height: 78vh;
}
}
@media (max-width: 560px) {
.sds-gallery {
grid-template-rows: repeat(7, minmax(112px, 29vw));
}
.sds-gallery__item--01 { grid-column: 1 / span 6; grid-row: 1 / span 2; }
.sds-gallery__item--02 { grid-column: 1 / span 3; grid-row: 3; }
.sds-gallery__item--03 { grid-column: 4 / span 3; grid-row: 3; }
.sds-gallery__item--04 { grid-column: 1 / span 3; grid-row: 4; }
.sds-gallery__item--05 { grid-column: 4 / span 3; grid-row: 4; }
.sds-gallery__item--06 { grid-column: 1 / span 3; grid-row: 5; }
.sds-gallery__item--07 { grid-column: 4 / span 3; grid-row: 5; }
.sds-gallery__item--08 { grid-column: 1 / span 3; grid-row: 6; }
.sds-gallery__item--09 { grid-column: 4 / span 3; grid-row: 6; }
.sds-gallery__item--10 { grid-column: 1 / span 6; grid-row: 7; }
.sds-gallery-modal {
padding: 12px;
}
.sds-gallery-modal__figure {
width: 96vw;
height: 76vh;
border-radius: 22px;
}
.sds-gallery-modal__close {
width: 42px;
height: 42px;
font-size: 27px;
}
.sds-gallery-modal__nav {
width: 34px;
height: 58px;
}
.sds-gallery-modal__nav--prev {
left: 6px;
}
.sds-gallery-modal__nav--next {
right: 6px;
}
}
@media (prefers-reduced-motion: reduce) {
.sds-gallery,
.sds-gallery__item,
.sds-gallery__item img,
.sds-gallery-modal,
.sds-gallery-modal__figure {
transition: none !important;
}
.sds-gallery {
--sds-gallery-gap: 4px;
}
.sds-gallery__item {
transform: none;
opacity: 1;
filter: none;
}
}
/* Mini-lot 1A — fondation graphique partagée pour les accents rouges de section.
Les sélecteurs excluent volontairement le hero, l’age gate, le header,
la carte cocktails, les cartes internes et le footer. */
.section-title-accent,
#concept .concept-title .red {
color: var(--brand-red) !important;
font-size: var(--section-title-size);
line-height: inherit;
text-shadow: var(--red-aura);
}
.section-eyebrow,
.site-main > .section .eyebrow{
color: var(--brand-red);
font-size: var(--section-eyebrow-size);
text-shadow: var(--red-aura);
}
@media (min-width: 761px) and (max-width: 1024px) and (orientation: portrait) {
#concept .concept-title-tablet {
white-space: normal !important;
text-wrap: balance;
}
}
/* Mini-lot 2D — Évènements : médias de cartes et CTA complémentaires. */
.events-section .events-grid {
align-items: stretch;
}
.events-section .event-card {
display: flex;
min-height: 0;
height: 100%;
flex-direction: column;
}
.events-section .event-card__media {
flex: 0 0 auto;
width: 100%;
height: auto;
min-height: 0;
aspect-ratio: 16 / 9;
}
.events-section .event-card__media img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.events-section .event-card__body {
display: flex;
flex: 1 1 auto;
flex-direction: column;
}
.events-section .event-card__media img.event-card__image--mariage {
object-position: 56% 52%;
filter: brightness(.98) contrast(1.04) saturate(1);
}
.events-section .event-card:hover .event-card__media img.event-card__image--mariage {
filter: brightness(1.04) contrast(1.06) saturate(1.02);
}
#carte .carte-offers {
max-width: 1040px;
gap: clamp(18px, 2vw, 26px);
/* Plus d'air entre le carrousel et les deux offres */
margin-top: clamp(52px, 4.5vw, 68px);
}
#carte .carte-offer {
box-sizing: border-box;
display: flex;
min-height: clamp(142px, 11vw, 172px);
padding: clamp(22px, 2.2vw, 32px);
flex-direction: column;
justify-content: center;
border-color: rgba(255, 255, 255, .34);
outline: none;
transition:
background .25s var(--ease),
border-color .25s var(--ease),
box-shadow .25s var(--ease),
transform .25s var(--ease);
}
#carte .carte-offer h3 {
margin-bottom: 10px;
font-size: clamp(24px, 1.65vw, 29px);
line-height: 1.08;
}
@media (min-width: 1281px) {
#carte .carte-offer:first-child h3 {
white-space: nowrap;
}
}
#carte .carte-offer p {
font-size: clamp(14px, .92vw, 15px);
line-height: 1.55;
}
#carte .carte-offer:hover,
#carte .carte-offer:focus-visible {
border-color: var(--brand-red);
box-shadow:
0 20px 48px rgba(0, 0, 0, .38),
0 0 24px rgba(255, 255, 255, .12);
transform: translateY(-2px);
}
#carte .carte-offer:hover h3,
#carte .carte-offer:hover p,
#carte .carte-offer:focus-visible h3,
#carte .carte-offer:focus-visible p {
color: var(--off-white);
}
#carte .carte-offer:focus-visible {
outline: 2px solid var(--off-white);
outline-offset: 4px;
}
@media (max-width: 760px) {
#carte .carte-offer {
min-height: 136px;
padding: 22px 20px;
}
}
/* --------------------------------------------------------------------------
V15-A — Prestations : polish visuel premium (scoped: #prestations only)
Contenu, structure HTML et assets volontairement inchangés.
-------------------------------------------------------------------------- */
#prestations.prestation-section {
padding-block: clamp(108px, 8vw, 148px);
overflow: clip;
background:
radial-gradient(ellipse at 72% 18%, rgba(117, 21, 30, .085), transparent 38%),
linear-gradient(180deg, rgba(6, 6, 7, .99), rgba(9, 9, 11, .98));
}
#prestations .prestation-header,
#prestations .prestation-grid,
#prestations .prestation-more {
box-sizing: border-box;
width: min(100%, 1540px);
max-width: 1540px;
margin-left: auto;
margin-right: auto;
padding-inline: clamp(24px, 4.7vw, 72px);
}
#prestations .prestation-header {
margin-bottom: clamp(54px, 4.7vw, 76px);
display: grid;
grid-template-columns: minmax(0, 1.12fr) minmax(360px, .62fr);
gap: clamp(58px, 6vw, 108px);
align-items: end;
}
#prestations .prestation-heading {
min-width: 0;
}
#prestations .prestation-eyebrow {
margin: 0 0 20px;
color: var(--brand-red);
font-size: var(--section-eyebrow-size);
line-height: 1;
letter-spacing: .2em;
text-transform: uppercase;
font-weight: 800;
text-shadow: var(--red-aura);
}
#prestations .prestation-title {
max-width: 840px;
margin: 0;
font-size: clamp(54px, 4.25vw, 80px);
line-height: .98;
letter-spacing: -.034em;
text-wrap: balance;
}
#prestations .prestation-intro {
width: 100%;
max-width: 500px;
justify-self: end;
padding-bottom: 5px;
}
#prestations .prestation-lead {
max-width: 48ch;
margin: 0;
font-size: clamp(17px, 1.05vw, 20px);
line-height: 1.72;
color: #D4C9C4;
}
#prestations .prestation-proof {
max-width: none;
margin: 24px 0 0;
padding-top: 18px;
border-top: 1px solid rgba(255, 255, 255, .18);
font-size: clamp(15px, .72vw, 12px);
line-height: 1.4;
letter-spacing: .16em;
color: var(--brand-red);
text-wrap: balance;
}
#prestations .prestation-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 18px;
}
#prestations .prestation-card {
position: relative;
min-height: 350px;
padding: clamp(36px, 2.7vw, 44px) clamp(34px, 3vw, 48px) clamp(34px, 2.7vw, 42px);
display: flex;
flex-direction: column;
border: 1px solid rgba(255, 255, 255, .25);
background:
radial-gradient(circle at 88% 8%, rgba(117, 21, 30, .075), transparent 26%),
linear-gradient(150deg, rgba(18, 15, 16, .94), rgba(7, 7, 8, .985) 72%);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .025);
overflow: hidden;
transition:
transform .3s ease,
border-color .3s ease,
box-shadow .3s ease,
background .3s ease;
}
#prestations .prestation-card:hover {
transform: translateY(-3px);
border-color: rgba(255, 255, 255, .48);
background:
radial-gradient(circle at 88% 8%, rgba(117, 21, 30, .12), transparent 29%),
linear-gradient(150deg, rgba(21, 16, 18, .96), rgba(8, 8, 9, .99) 72%);
box-shadow:
0 26px 72px rgba(0, 0, 0, .32),
0 0 28px rgba(117, 21, 30, .07),
inset 0 1px 0 rgba(255, 255, 255, .035);
}
#prestations .prestation-card::before {
display: none;
}
#prestations .prestation-card::after {
top: clamp(30px, 2.4vw, 38px);
right: clamp(28px, 2.6vw, 40px);
bottom: auto;
font-size: clamp(56px, 4.3vw, 70px);
line-height: .8;
color: var(--brand-red);
}
#prestations .prestation-icon {
width: 52px;
height: 52px;
margin: 0 0 clamp(34px, 3vw, 44px);
display: flex;
align-items: center;
justify-content: flex-start;
color: var(--brand-red);
}
#prestations .prestation-icon svg {
width: 48px;
height: 48px;
stroke-width: 1.75;
filter:
drop-shadow(0 0 1px rgba(255, 255, 255, .26))
drop-shadow(0 0 5px rgba(117, 21, 30, .2));
}
#prestations .prestation-card h3 {
max-width: 23ch;
margin: 0 0 15px;
font-size: clamp(29px, 2vw, 36px);
line-height: 1.04;
letter-spacing: -.025em;
color: #F3EAE5;
}
/* Carte 02 — titre sur une seule ligne */
@media (min-width: 1101px) {
#prestations .prestation-card[data-index="02"] h3 {
max-width: none;
white-space: nowrap;
font-size: clamp(27px, 1.85vw, 34px);
letter-spacing: -.035em;
}
}
#prestations .prestation-card p {
max-width: 52ch;
margin: 0;
font-size: clamp(15.5px, 1vw, 17px);
line-height: 1.7;
color: #C9BDB8;
}
#prestations .prestation-more {
margin-top: 34px;
display: flex;
justify-content: flex-end;
}
#prestations .prestation-more a {
padding: 0 0 8px;
border-bottom: 1px solid rgba(161, 0, 0, .55);
color: #A10000;
font-size: 16px;
line-height: 1.2;
letter-spacing: .15em;
font-weight: 800;
transition:
color .22s ease,
border-color .22s ease,
transform .22s ease;
}
#prestations .prestation-more a:hover {
color: #B51F2D;
border-color: currentColor;
transform: translateX(3px);
}
@media (max-width: 1100px) {
#prestations .prestation-header {
grid-template-columns: 1fr;
gap: 30px;
align-items: start;
}
#prestations .prestation-intro {
max-width: 720px;
justify-self: start;
padding-bottom: 0;
}
#prestations .prestation-lead {
max-width: 62ch;
}
}
@media (max-width: 760px) {
#prestations.prestation-section {
padding-block: 82px;
}
#prestations .prestation-header,
#prestations .prestation-grid,
#prestations .prestation-more {
padding-inline: 24px;
}
#prestations .prestation-header {
gap: 24px;
margin-bottom: 40px;
}
#prestations .prestation-eyebrow {
margin-bottom: 18px;
}
#prestations .prestation-title {
font-size: clamp(32px, 9.2vw, 42px);
line-height: .98;
letter-spacing: -.038em;
}
#prestations .prestation-title-mobile {
white-space: nowrap !important;
}
#prestations .prestation-lead {
font-size: 16px;
line-height: 1.72;
}
#prestations .prestation-proof {
margin-top: 20px;
padding-top: 16px;
font-size: 10.5px;
letter-spacing: .13em;
}
#prestations .prestation-grid {
grid-template-columns: 1fr;
gap: 14px;
}
#prestations .prestation-card {
min-height: 0;
padding: 30px 26px 31px;
}
#prestations .prestation-card::before {
left: 26px;
width: 44px;
}
#prestations .prestation-card::after {
top: 27px;
right: 24px;
font-size: 54px;
}
#prestations .prestation-icon {
width: 46px;
height: 46px;
margin-bottom: 27px;
}
#prestations .prestation-icon svg {
width: 32px;
height: 32px;
}
#prestations .prestation-card h3 {
max-width: 19ch;
margin-bottom: 13px;
font-size: clamp(27px, 7.5vw, 32px);
}
#prestations .prestation-card p {
max-width: none;
font-size: 15.5px;
line-height: 1.68;
}
#prestations .prestation-more {
margin-top: 26px;
justify-content: flex-start;
}
#prestations .prestation-more a {
font-size: 10.5px;
letter-spacing: .12em;
}
}
@media (max-width: 380px) {
#prestations .prestation-title {
font-size: clamp(30px, 8.8vw, 34px);
}
}
/* --------------------------------------------------------------------------
V15-B — Évènements : composition éditoriale premium (scoped: #evenements)
Contenu, structure HTML et assets volontairement inchangés.
-------------------------------------------------------------------------- */
#evenements.events-section {
padding-block: clamp(108px, 8vw, 148px);
overflow: clip;
background:
radial-gradient(ellipse at 22% 16%, rgba(117, 21, 30, .07), transparent 36%),
linear-gradient(180deg, rgba(8, 8, 9, .99), rgba(6, 6, 7, .99));
}
#evenements .events-header,
#evenements .events-grid {
box-sizing: border-box;
width: min(100%, 1540px);
max-width: 1540px;
margin-left: auto;
margin-right: auto;
padding-inline: clamp(24px, 4.7vw, 72px);
}
#evenements .events-header {
margin-bottom: clamp(54px, 4.7vw, 76px);
display: grid;
grid-template-columns: minmax(0, 1.12fr) minmax(360px, .62fr);
gap: clamp(58px, 6vw, 108px);
align-items: end;
}
#evenements .events-heading {
min-width: 0;
}
#evenements .events-eyebrow {
margin: 0 0 20px;
color: var(--brand-red);
font-size: var(--section-eyebrow-size);
line-height: 1;
letter-spacing: .2em;
text-transform: uppercase;
font-weight: 800;
text-shadow: var(--red-aura);
}
#evenements .events-title,
#evenements.events-section h2 {
max-width: 860px;
margin: 0;
font-size: clamp(54px, 4.25vw, 80px);
line-height: .98;
letter-spacing: -.034em;
text-wrap: balance;
}
#evenements .events-title > span {
display: block;
}
#evenements .events-lead {
width: 100%;
max-width: 46ch;
margin: 0;
justify-self: end;
padding-bottom: 5px;
font-size: clamp(17px, 1.05vw, 20px);
line-height: 1.72;
color: #D4C9C4;
}
#evenements .events-lead em {
font-style: italic;
}
#evenements .events-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 18px;
align-items: stretch;
}
#evenements .event-card {
min-height: 0;
height: 100%;
border-color: rgba(255, 255, 255, .25);
background:
radial-gradient(circle at 84% 6%, rgba(117, 21, 30, .055), transparent 25%),
linear-gradient(155deg, rgba(18, 15, 16, .94), rgba(7, 7, 8, .985) 74%);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .025);
}
#evenements .event-card:hover {
transform: translateY(-3px);
border-color: rgba(255, 255, 255, .46);
box-shadow:
0 26px 72px rgba(0, 0, 0, .34),
0 0 28px rgba(117, 21, 30, .075),
inset 0 1px 0 rgba(255, 255, 255, .035);
}
#evenements .event-card__media {
aspect-ratio: 16 / 9;
}
#evenements .event-card__media::after {
height: 46%;
background: linear-gradient(180deg, transparent, rgba(7, 7, 8, .82));
}
#evenements .event-card__body {
padding: clamp(27px, 2vw, 34px) clamp(26px, 2vw, 34px) clamp(31px, 2.25vw, 38px);
display: flex;
flex: 1 1 auto;
flex-direction: column;
}
#evenements .event-card__tag {
margin-bottom: 17px;
color: var(--brand-red);
font-size: 13.5px;
line-height: 1;
letter-spacing: .18em;
}
#evenements .event-card h3 {
max-width: none;
width: 100%;
min-height: 2.1em;
margin: 0 0 16px;
font-size: clamp(25px, 1.6vw, 32px);
line-height: 1.05;
letter-spacing: -.03em;
color: #F3EAE5;
text-wrap: balance;
}
#evenements .event-card p {
max-width: 44ch;
margin: 0;
font-size: clamp(15px, .92vw, 16.5px);
line-height: 1.7;
color: #C9BDB8;
text-wrap: pretty;
}
@media (max-width: 1100px) {
#evenements .events-header {
grid-template-columns: 1fr;
gap: 30px;
align-items: start;
}
#evenements .events-lead {
max-width: 62ch;
justify-self: start;
padding-bottom: 0;
}
#evenements .events-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 760px) {
#evenements.events-section {
padding-block: 82px;
}
#evenements .events-header,
#evenements .events-grid {
padding-inline: 24px;
}
#evenements .events-header {
gap: 24px;
margin-bottom: 40px;
}
#evenements .events-eyebrow {
margin-bottom: 18px;
}
#evenements .events-title,
#evenements.events-section h2 {
max-width: 100%;
font-size: clamp(32px, 9.2vw, 42px);
line-height: .98;
letter-spacing: -.038em;
text-wrap: initial;
}
#evenements .events-title-mobile {
white-space: nowrap !important;
}
#evenements .events-lead {
max-width: none;
font-size: 16px;
line-height: 1.72;
}
#evenements .events-grid {
grid-template-columns: 1fr;
gap: 14px;
}
#evenements .event-card__body {
padding: 27px 24px 30px;
}
#evenements .event-card__tag {
margin-bottom: 14px;
font-size: 10px;
letter-spacing: .16em;
}
#evenements .event-card h3 {
max-width: 20ch;
margin-bottom: 13px;
font-size: clamp(27px, 7.5vw, 32px);
}
#evenements .event-card p {
max-width: none;
font-size: 15.5px;
line-height: 1.68;
}
}
@media (max-width: 380px) {
#evenements .events-title,
#evenements.events-section h2 {
font-size: clamp(30px, 8.8vw, 34px);
}
}
/* --------------------------------------------------------------------------
V16 — Nos cocktails : finition typographique du texte sous « La Carte ».
Largeur et architecture existantes conservées ; carrousel volontairement intact.
-------------------------------------------------------------------------- */
#carte .carte-top > div:first-child > h2 {
margin-bottom: clamp(16px, 1.25vw, 20px);
}
#carte .carte-top > div:first-child > p.reveal:not(.eyebrow):not(.placeholder-note) {
margin-top: 0;
margin-bottom: 0;
font-size: clamp(16px, 1vw, 18px);
line-height: 1.68;
font-weight: 400;
letter-spacing: .006em;
color: rgba(235, 228, 222, .76);
text-wrap: pretty;
/* Ne jamais couper un mot avec un tiret */
-webkit-hyphens: none;
hyphens: none;
word-break: normal;
overflow-wrap: normal;
}
@media (max-width: 760px) {
#carte .carte-top > div:first-child > p.reveal:not(.eyebrow):not(.placeholder-note) {
font-size: 16px;
line-height: 1.68;
letter-spacing: 0;
}
}
/* --------------------------------------------------------------------------
V17 — Animations : composition éditoriale premium (scoped: #animations)
Contenu, grille, médias et interactions volontairement inchangés.
-------------------------------------------------------------------------- */
#animations.animations-section {
padding-block: clamp(108px, 8vw, 148px);
}
#animations.animations-section .animations-header,
#animations.animations-section .animations-more {
box-sizing: border-box;
width: min(100%, 1680px);
max-width: 1680px;
margin-left: auto;
margin-right: auto;
padding-inline: clamp(24px, 4.7vw, 72px);
}
#animations.animations-section .animations-header {
margin-bottom: clamp(54px, 4.7vw, 76px);
display: grid;
grid-template-columns: minmax(0, 1.12fr) minmax(360px, .62fr);
gap: clamp(58px, 6vw, 108px);
align-items: end;
}
#animations.animations-section .animations-header > div {
min-width: 0;
}
#animations.animations-section .animations-eyebrow {
width: auto;
max-width: none;
margin: 0 0 20px;
color: var(--brand-red);
font-size: var(--section-eyebrow-size);
line-height: 1;
letter-spacing: .2em;
text-transform: uppercase;
font-weight: 800;
text-align: left;
text-shadow: var(--red-aura);
}
#animations.animations-section .animations-title,
#animations.animations-section h2.animations-title {
width: auto;
max-width: 900px;
margin: 0;
font-size: clamp(54px, 4.25vw, 80px);
line-height: .98;
letter-spacing: -.034em;
text-align: left;
text-wrap: balance;
}
#animations.animations-section .animations-title > span {
display: block;
}
#animations.animations-section .animations-lead {
width: 100%;
max-width: 46ch;
margin: 0;
justify-self: end;
padding-bottom: 5px;
font-size: clamp(17px, 1.05vw, 20px);
line-height: 1.72;
color: #D4C9C4;
text-align: left;
text-wrap: pretty;
}
#animations.animations-section .animations-lead em {
font-style: italic;
}
/* La géométrie des cartes reste intacte : seule la composition du texte est affinée. */
#animations.animations-section .animation-card__body {
padding: clamp(27px, 2vw, 34px) clamp(26px, 2vw, 34px) clamp(31px, 2.25vw, 38px);
}
#animations.animations-section .animation-card__tag {
margin-bottom: 17px;
color: var(--brand-red);
font-size: 13.5px;
line-height: 1;
letter-spacing: .18em;
}
#animations.animations-section .animation-card h3 {
max-width: 19ch;
margin: 0 0 16px;
font-size: clamp(27px, 1.75vw, 34px);
line-height: 1.05;
letter-spacing: -.025em;
color: #F3EAE5;
text-wrap: balance;
}
#animations.animations-section .animation-card p {
max-width: 44ch;
margin: 0;
font-size: clamp(15px, .92vw, 16.5px);
line-height: 1.7;
color: #C9BDB8;
text-wrap: pretty;
}
#animations.animations-section .animations-more {
margin-top: 34px;
}
#animations.animations-section .animations-more a {
padding-bottom: 8px;
border-bottom: 1px solid rgba(161, 0, 0, .55);
font-size: 13.5px;
line-height: 1.2;
letter-spacing: .15em;
}
.fixWhatsapp{
place-items: center;
width: 52px;
height: 52px;
min-width: 52px;
min-height: 52px;
border-radius: 50%;
}
.legal-tile {
transition: border-color 0.2s ease;
}
.legal-tile:hover,
.legal-tile:focus-visible {
border-color: #A40000;
}
@media (max-width: 1100px) {
#animations.animations-section .animations-header {
display: grid;
grid-template-columns: 1fr;
gap: 30px;
align-items: start;
}
#animations.animations-section .animations-header > div,
#animations.animations-section .animations-eyebrow,
#animations.animations-section .animations-title,
#animations.animations-section .animations-lead {
width: 100%;
max-width: none;
margin-left: 0;
margin-right: 0;
text-align: left;
}
#animations.animations-section .animations-lead {
max-width: 62ch;
justify-self: start;
padding-bottom: 0;
}
}
@media (max-width: 760px) {
#animations.animations-section {
padding-block: 82px;
}
#animations.animations-section .animations-header,
#animations.animations-section .animations-more {
padding-inline: 24px;
}
#animations.animations-section .animations-header {
gap: 24px;
margin-bottom: 40px;
}
#animations.animations-section .animations-eyebrow {
margin-bottom: 18px;
}
#animations.animations-section .animations-title,
#animations.animations-section h2.animations-title {
max-width: 100%;
font-size: clamp(32px, 9.2vw, 42px);
line-height: .98;
letter-spacing: -.038em;
text-wrap: initial;
}
#animations.animations-section .animations-lead {
max-width: none;
font-size: 16px;
line-height: 1.72;
}
#animations.animations-section .animation-card__body {
padding: 27px 24px 30px;
}
#animations.animations-section .animation-card__tag {
margin-bottom: 14px;
font-size: 10px;
letter-spacing: .16em;
}
#animations.animations-section .animation-card h3 {
max-width: 21ch;
margin-bottom: 13px;
font-size: clamp(27px, 7.5vw, 32px);
}
#animations.animations-section .animation-card p {
max-width: none;
font-size: 15.5px;
line-height: 1.68;
}
#animations.animations-section .animations-more {
margin-top: 28px;
}
}
@media (max-width: 380px) {
#animations.animations-section .animations-title,
#animations.animations-section h2.animations-title {
font-size: clamp(30px, 8.8vw, 34px);
}
}
/* =========================================================
ALIGNEMENT COMMUN DES SURTITRES ROUGES — DESKTOP
Concept / Prestations / Évènements / Carte /
Animations / Références / Contact
========================================================= */
@media (min-width: 1281px) {
.site-main {
/* Axe horizontal commun à tous les surtitres rouges */
--eyebrow-rail-x: max(
72px,
calc((100vw - 1680px) / 2 + 72px)
);
/* Bord gauche réel des éléments utilisant .container */
--container-1680-left: max(
clamp(20px, 6vw, 120px),
calc((100vw - 1680px) / 2)
);
}
/* CONCEPT
Il était déjà quasiment sur notre axe de référence. */
#concept .concept-eyebrow {
left: 72px;
}
/* PRESTATIONS + ÉVÈNEMENTS
Ces deux sections utilisent un conteneur de 1540px. */
#prestations .prestation-eyebrow,
#evenements .events-eyebrow {
position: relative;
left: calc(
var(--eyebrow-rail-x)
- max(0px, calc((100vw - 1540px) / 2))
- clamp(24px, 4.7vw, 72px)
);
}
/* LA CARTE + REPÈRES PRATIQUES + FAQ */
#carte .carte-top > div:first-child > .eyebrow,
#reperes .reperes-eyebrow,
#faq .faq-wrap > div:first-child > .eyebrow {
position: relative;
left: calc(
var(--eyebrow-rail-x)
- var(--container-1680-left)
);
}
/* ANIMATIONS */
#animations .animations-eyebrow {
position: relative;
left: calc(
var(--eyebrow-rail-x)
- max(0px, calc((100vw - 1680px) / 2))
- clamp(24px, 4.7vw, 72px)
);
}
/* RÉFÉRENCES */
#references .references-intro > .eyebrow {
position: relative;
left: calc(
var(--eyebrow-rail-x)
- max(0px, calc((100vw - 1540px) / 2))
- clamp(22px, 4vw, 64px)
);
}
/* CONTACT */
#contact .contact-grid > div > .eyebrow {
position: relative;
left: calc(
var(--eyebrow-rail-x)
- var(--container-1680-left)
- 30px
);
}
}@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}.reveal,.hero-reveal{opacity:1!important;transform:none!important}}
@media (min-width:1500px){.section{padding-block:30px}.hero{padding-top:calc(var(--header-h) + 64px)}}
@media (max-width:560px){.container{width:calc(100% - 40px)}.btn{padding-inline:18px}.section{padding:58px 0}.hero h1{letter-spacing:-.05em}.logo-box{min-height:92px;font-size:13px}.footer-card{padding:18px}.legal-tile{padding:16px}.age-dialog{padding:26px 18px}.rating-score{font-size:68px}}
/* ======================================================================
V14-B — Correctifs responsive mobile et stabilité largeur
====================================================================== */
html, body {
max-width: 100%;
overflow-x: clip;
}
@media (max-width: 900px) {
.site-header {
width: 100%;
}
.header-inner {
padding-inline: 20px;
width: 100%;
max-width: 100%;
gap: 14px;
}
.brand {
min-width: 0;
flex: 1 1 auto;
overflow: visible;
}
.brand img,
.brand svg {
width: min(124px, 34vw);
max-width: 124px;
height: auto;
}
.nav-toggle {
flex: 0 0 48px;
width: 48px;
height: 48px;
}
.nav {
max-width: 100vw;
box-sizing: border-box;
}
}
@media (max-width: 760px) {
.hero {
min-height: 100svh;
padding-top: calc(var(--header-h) + 34px);
padding-bottom: 46px;
overflow: hidden;
}
.hero .container,
.hero-content {
width: 100%;
max-width: 100%;
min-width: 0;
}
.hero h1 {
font-size: clamp(44px, 12vw, 62px);
line-height: .96;
letter-spacing: -0.04em;
max-width: 100%;
overflow-wrap: normal;
word-break: normal;
}
.hero h1 span {
display: inline;
}
.hero h1 span:not(:last-child)::after {
content: " ";
}
.hero h1 .nowrap {
white-space: normal;
}
.hero .lead {
font-size: clamp(17px, 4.8vw, 20px);
line-height: 1.55;
}
.hero-kicker {
font-size: 11px;
letter-spacing: .14em;
}
.proofs {
margin: 24px 0;
gap: 12px 0;
}
.proofs span {
width: 100%;
font-size: 13px;
}
.hero-actions {
display: grid;
grid-template-columns: 1fr;
gap: 12px;
max-width: 100%;
}
.hero-actions .btn {
width: 100%;
max-width: 100%;
min-height: 50px;
padding-inline: 16px;
white-space: normal;
}
.menu-section__inner,
.carte-top,
.contact-grid,
.footer-grid,
.legal-grid,
.events-grid,
.prestation-cards,
.animations-grid,
.avis-grid {
max-width: 100%;
min-width: 0;
}
}
@media (max-width: 420px) {
.hero h1 {
font-size: clamp(40px, 11vw, 54px);
}
.container {
width: calc(100% - 32px);
}
.header-inner {
padding-inline: 16px;
}
}
@media (max-width: 760px) {
.cocktail-card.slot-edge-left,
.cocktail-card.slot-edge-right,
.cocktail-card.slot-enter-left,
.cocktail-card.slot-enter-right,
.cocktail-card.slot-out-left,
.cocktail-card.slot-out-right {
display: none;
}
}
/* V14-C — marge de sécurité hero mobile et H1 stable. */
@media (max-width: 760px) {
.hero-content,
.hero-copy {
padding-inline: 16px;
}
}
/* ======================================================================
V14-D1 — Correctif strict header + hero : accent #75151E, H1, CTA
====================================================================== */
.site-header,
.hero {
--hero-accent: #A10000;
--hero-accent-hover: #A40000;
--hero-accent-pressed: #5F1018;
--hero-accent-glow: rgba(117, 21, 30, 0.28);
--hero-accent-border: rgba(255, 255, 255, 0.55);
}
.site-header {
border-bottom-color: rgba(255, 255, 255, .42);
}
.site-header .nav a[aria-current="true"],
.site-header .nav a:hover,
.site-header .nav a:focus-visible {
color: var(--hero-accent-hover);
}
.site-header .header-cta,
.site-header .nav-toggle {
border-color: var(--hero-accent-border);
}
.site-header .header-cta:hover,
.site-header .header-cta:focus-visible,
.site-header .nav-toggle:hover,
.site-header .nav-toggle:focus-visible {
border-color: var(--hero-accent-hover);
box-shadow: 0 0 0 3px rgba(117, 21, 30, .16);
}
.hero {
border-bottom-color: rgba(255, 255, 255, .36);
}
.hero-overlay {
background:
radial-gradient(circle at 68% 38%, rgba(117, 21, 30, .18), transparent 27rem),
linear-gradient(90deg, rgba(5, 6, 8, .99) 0%, rgba(5, 6, 8, .90) 36%, rgba(5, 6, 8, .56) 70%, rgba(5, 6, 8, .88) 100%),
linear-gradient(180deg, transparent 72%, #090A0C 100%);
}
.hero-content {
max-width: 860px;
}
.hero-kicker {
color: var(--hero-accent);
}
.hero h1 {
max-width: 850px;
line-height: .98;
letter-spacing: -0.04em;
margin-bottom: 26px;
}
.hero h1 span {
display: block;
}
.hero h1 .nowrap {
white-space: nowrap;
}
.hero .proofs span::before {
border-color: var(--hero-accent-border);
box-shadow: inset 0 0 0 5px rgba(117, 21, 30, .10);
}
.hero-cta-group {
display: grid;
justify-items: start;
gap: 14px;
}
.hero .hero-actions {
display: flex;
flex-wrap: wrap;
gap: 18px;
align-items: center;
}
.hero .btn-primary {
background: var(--hero-accent);
border-color: rgba(117, 21, 30, .72);
color: #fff;
}
.hero .btn-primary:hover,
.hero .btn-primary:focus-visible {
background: #A40000;
border-color: #A40000;
color: #fff;
box-shadow:
0 20px 52px rgba(117, 21, 30, .32),
inset 0 1px 0 rgba(255,255,255,.12);
}
.hero .btn-primary:active {
background: var(--hero-accent-pressed);
color: #fff;
}
.hero .btn-primary:focus-visible,
.hero .btn-secondary:focus-visible,
.hero-map-link:focus-visible {
outline: 2px solid rgba(255, 255, 255, .45);
outline-offset: 2px;
}
.hero .btn-secondary {
border-color: var(--hero-accent-border);
}
.hero .btn-secondary:hover,
.hero .btn-secondary:focus-visible {
border-color: var(--hero-accent-hover);
color: var(--text-ivory);
box-shadow: 0 14px 34px rgba(117, 21, 30, .14);
}
.hero-map-link {
display: inline-flex;
align-items: center;
gap: 8px;
color: var(--hero-accent);
font-size: 13px;
font-weight: 800;
letter-spacing: .08em;
text-transform: uppercase;
text-decoration: none;
transform: translateX(0);
transition: color .22s var(--ease), transform .22s var(--ease);
}
.hero-map-link:hover,
.hero-map-link:focus-visible {
color: var(--hero-accent-hover);
transform: translateX(4px);
}
@media (max-width: 760px) {
.hero-content {
max-width: 100%;
}
.hero h1 {
line-height: .98;
letter-spacing: -0.04em;
}
.hero h1 span {
display: inline;
}
.hero h1 span:not(:last-child)::after {
content: " ";
}
.hero h1 .nowrap {
white-space: normal;
}
.hero-cta-group {
gap: 13px;
width: 100%;
}
.hero .hero-actions {
display: grid;
grid-template-columns: 1fr;
gap: 12px;
width: 100%;
}
.hero-map-link {
margin-top: 2px;
}
}
/* ======================================================================
V14-D2 — Hero mobile only: H1 réduit, espaces propres, respiration
Périmètre strict : ne modifie pas desktop / La Carte / reveal.
====================================================================== */
@media (max-width: 760px) {
.hero-content,
.hero-copy {
padding-inline: 24px;
}
.hero h1 {
font-size: clamp(46px, 10.5vw, 58px);
line-height: 0.98;
letter-spacing: -0.035em;
max-width: 100%;
}
.hero h1 span {
display: inline;
}
.hero h1 span:not(:last-child)::after {
content: " ";
}
.hero h1 .nowrap {
white-space: normal;
}
.hero .lead {
font-size: clamp(20px, 5vw, 26px);
line-height: 1.42;
}
.hero-proofs,
.hero-usps,
.proofs {
gap: 16px;
}
.hero-actions .btn,
.hero .hero-actions .btn {
min-height: 58px;
}
}
@media (max-width: 420px) {
.hero h1 {
font-size: clamp(42px, 10.2vw, 52px);
line-height: 1;
}
}
/* ======================================================================
V14-D3 — Hero USP line only: replace round bullets with premium SVGs.
====================================================================== */
.hero .proofs {
list-style: none;
padding: 0;
align-items: center;
}
.hero .proofs .hero-usp-item {
display: inline-flex;
align-items: center;
gap: 11px;
min-width: 0;
color: var(--text-muted);
font-size: 14px;
}
.hero .proofs .hero-usp-icon {
width: 22px;
height: 22px;
flex: 0 0 22px;
display: inline-flex;
align-items: center;
justify-content: center;
color: #A10000;
}
.hero .proofs .hero-usp-icon svg {
width: 100%;
height: 100%;
display: block;
overflow: visible;
fill: none;
stroke: currentColor;
stroke-width: 1.58;
stroke-linecap: round;
stroke-linejoin: round;
}
.hero .proofs .hero-usp-text {
min-width: 0;
}
.hero .proofs .hero-usp-icon::before,
.hero .proofs .hero-usp-text::before,
.hero .proofs .hero-usp-item::before {
content: none !important;
display: none !important;
}
@media (max-width: 760px) {
.hero .proofs {
align-items: flex-start;
}
.hero .proofs .hero-usp-item {
width: 100%;
gap: 10px;
font-size: 14px;
line-height: 1.35;
}
.hero .proofs .hero-usp-icon {
width: 20px;
height: 20px;
flex-basis: 20px;
margin-top: 1px;
}
}
@media (max-width: 420px) {
.hero .proofs .hero-usp-icon {
width: 19px;
height: 19px;
flex-basis: 19px;
}
}
/* ============================================================
Styles migrés depuis les balises