/* La profondeur reprend le principe de l'original, guidé par le défilement natif. */
.has-abyss{background:#090a0c;--abyss-top:123px;--abyss-height:calc(100svh - var(--abyss-top));overflow-x:clip}
.has-abyss .preview-bar{position:fixed;top:0;left:0;right:0;z-index:50}
.has-abyss .site-header{position:fixed;top:28px;left:0;right:0;background:#090a0ced;backdrop-filter:blur(14px)}
.has-abyss:not(:has(.preview-bar)) .site-header{top:0;background:#090a0c}
.has-abyss #contenu{padding-top:var(--abyss-top)}
.has-abyss.is-gateway{--abyss-top:28px}
.is-gateway .site-header{display:none}
.abyss-journey{position:relative}
.abyss-stage{position:relative;isolation:isolate;background:#090a0c;perspective:1400px;perspective-origin:50% 45%}
.abyss-stage:before{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 50% 43%,#dec89d09,transparent 62%);z-index:-1}
.abyss-dust{display:none;position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:.48}
.abyss-ready .abyss-stage{position:sticky;top:var(--abyss-top);height:var(--abyss-height);overflow:hidden}
.abyss-ready .abyss-dust{display:block}
.abyss-ready .abyss-frame{position:absolute;top:0;left:0;right:0;min-height:100%;will-change:transform,opacity;transform-origin:50% 45%}
.abyss-frame>section{width:100%;min-height:var(--abyss-height);border-top:0;border-bottom:0;background:transparent}
.abyss-frame>.section{padding-top:clamp(40px,7vh,84px);padding-bottom:80px}
.abyss-frame>.welcome{padding:40px 24px 48px;justify-content:center}
.abyss-frame>.welcome .signature-large{width:min(390px,65vw)}
.abyss-frame>.choice-section{padding-bottom:50px;justify-content:center}
.abyss-frame .audience-grid{margin-top:36px}
.abyss-frame .audience-card{min-height:350px;padding:35px 40px;background:linear-gradient(145deg,#1d2520,#111612);border-radius:5px}
.abyss-frame .audience-card.personal{background:radial-gradient(ellipse at top right,#b39b551a,transparent 70%),#191914}
.abyss-frame .card-number{font-size:10px;letter-spacing:.16em}
.abyss-frame .audience-card h3{margin-top:35px}
.abyss-frame>.date-section{padding:40px 24px 80px;justify-content:center}
.abyss-frame .calendar{margin-top:38px}
.abyss-frame .calendar strong{font-size:100px}
.abyss-frame .date-section h2{font-size:56px}
.abyss-navigation{display:none}
.abyss-ready .abyss-navigation{display:flex;position:fixed;bottom:17px;left:var(--gutter);right:var(--gutter);z-index:25;align-items:center;justify-content:space-between;gap:24px;pointer-events:none}
.abyss-navigation button{pointer-events:auto;background:#090a0ccc;border:0;border-bottom:1px solid #d5bd8940;padding:8px 0;font-size:11px;color:#c4b38e;min-width:70px;min-height:38px;transition:color .2s,border-color .2s}
.abyss-navigation button:hover{color:#f1dfba;border-color:var(--gold)}
.abyss-navigation button:disabled{visibility:hidden}
.abyss-counter{font-size:10px;letter-spacing:.16em;color:#9e9178}
.has-abyss.abyss-ended .abyss-navigation{display:none}
@media(max-width:850px){.has-abyss{--abyss-top:106px}}
@media(max-width:620px){
 .has-abyss.is-gateway{--abyss-top:28px}
 .abyss-frame>.welcome{padding:28px 24px 40px}
 .abyss-frame>.welcome .signature-large{width:min(320px,74vw)}
 .abyss-frame>.section{padding-top:40px;padding-bottom:70px}
 .abyss-frame>.choice-section{padding:32px 20px 40px}
 .abyss-frame .audience-grid{gap:14px;margin-top:30px}
 .abyss-frame .audience-card{padding:24px 16px;min-height:340px}
 .abyss-frame .audience-card h3{font-size:clamp(20px,6.6vw,32px);margin-top:32px}
 .abyss-frame .audience-card p{font-size:13px}
 .abyss-frame .card-bottom{font-size:11px;line-height:1.65}
 .abyss-frame .card-number{font-size:8px;letter-spacing:.12em}
 .abyss-frame>.date-section{padding:36px 24px 65px}
 .abyss-frame .calendar{margin:32px 0 14px}
 .abyss-frame .calendar strong{font-size:82px}
 .abyss-frame .date-section h2{font-size:46px}
 .abyss-frame .fil-pill{font-size:13px}
 .abyss-frame>.audience-hero{min-height:var(--abyss-height)}
 .abyss-navigation{gap:12px}
}
@media(max-width:350px){.abyss-frame .audience-card{padding:20px 13px;min-height:325px}.abyss-frame .audience-card h3{font-size:21px}.abyss-frame .audience-card p{font-size:12px}.abyss-frame .card-bottom{font-size:10px}}
@media(max-height:740px){.abyss-frame>.welcome .signature-large{width:min(260px,64vw)}.abyss-frame>.welcome .eyebrow{font-size:10px}.abyss-frame>.welcome h1{margin-top:15px}.abyss-frame>.welcome .welcome-copy{margin-top:15px;font-size:15px}.abyss-frame>.welcome .welcome-next{margin-top:20px}}
@media(prefers-reduced-motion:reduce){.abyss-stage{perspective:none}.abyss-dust{display:none!important}.abyss-frame{transform:none!important;opacity:1!important}.abyss-navigation{display:none!important}}

/* Une arrivée symétrique pour les deux publics. */
.abyss-ready .abyss-frame:not(.choice-arrived) .choice-section .audience-card{opacity:0;transform:translateX(-65vw)}
.abyss-ready .abyss-frame:not(.choice-arrived) .choice-section .audience-card.personal{transform:translateX(65vw)}
.choice-arrived .choice-section .audience-card{animation:choice-from-left 1.65s cubic-bezier(.22,.61,.36,1) backwards,audience-invitation 6s 1.65s ease-in-out infinite}
.choice-arrived .choice-section .audience-card.personal{animation:choice-from-right 1.65s cubic-bezier(.22,.61,.36,1) backwards,audience-invitation 6s 4.65s ease-in-out infinite}
@keyframes choice-from-left{0%{opacity:0;transform:translateX(-65vw)}18%{opacity:1}100%{opacity:1;transform:translateX(0)}}
@keyframes choice-from-right{0%{opacity:0;transform:translateX(65vw)}18%{opacity:1}100%{opacity:1;transform:translateX(0)}}
@media(prefers-reduced-motion:reduce){.choice-section .audience-card{opacity:1!important;transform:none!important;animation:none!important}}

/* Le choix prend de la présence sans modifier les dimensions de la grille. */
.choice-section .audience-card{scale:1;transform-origin:center;transition:scale .6s cubic-bezier(.2,.75,.2,1),border-color .45s,box-shadow .6s,transform .45s;will-change:scale}
.choice-section .audience-card h3,.choice-section .audience-card p{transform-origin:left center;transition:transform .6s cubic-bezier(.2,.75,.2,1),color .45s}
.choice-section .card-bottom{position:relative;transition:color .45s,border-color .45s;min-height:40px}
.choice-section .card-bottom:before{content:'';position:absolute;top:-1px;left:0;width:100%;height:1px;background:#e7c991;transform:scaleX(0);transform-origin:left;transition:transform .65s cubic-bezier(.2,.75,.2,1)}
.choice-section .audience-card:is(:hover,:focus-visible) .card-bottom{text-decoration:none}
@media(min-width:621px){
 .choice-section .audience-grid:has(.audience-card:focus-visible) .audience-card:not(:focus-visible){scale:.945}
 .choice-section .audience-card:focus-visible{scale:1.065;z-index:2;border-color:#e7c991;box-shadow:0 20px 55px #0007,0 0 0 1px #d5bd8940,inset 0 0 65px #d5bd890b}
 .choice-section .audience-card:focus-visible h3{transform:translateY(-3px)}
 .choice-section .audience-card:focus-visible p{transform:scale(1.22);color:#fff4dc}
 .choice-section .audience-card:focus-visible .card-bottom{color:#ffe4ad;border-color:transparent}
 .choice-section .audience-card:focus-visible .card-bottom:before{transform:scaleX(1)}
 .choice-arrived .audience-grid:has(.audience-card:focus-visible) .audience-card{animation-play-state:running,paused}
}
@media(hover:hover) and (pointer:fine) and (min-width:621px){
 .choice-section .audience-grid:has(.audience-card:hover) .audience-card:not(:hover){scale:.945}
 .choice-section .audience-card:hover{scale:1.065;z-index:2;border-color:#e7c991;box-shadow:0 20px 55px #0007,0 0 0 1px #d5bd8940,inset 0 0 65px #d5bd890b}
 .choice-section .audience-card:hover h3{transform:translateY(-3px)}
 .choice-section .audience-card:hover p{transform:scale(1.22);color:#fff4dc}
 .choice-section .audience-card:hover .card-bottom{color:#ffe4ad;border-color:transparent}
 .choice-section .audience-card:hover .card-bottom:before{transform:scaleX(1)}
 .choice-arrived .audience-grid:has(.audience-card:hover) .audience-card{animation-play-state:running,paused}
}
@media(prefers-reduced-motion:reduce){
 .choice-section .audience-grid .audience-card{scale:1!important;transition:none!important}
 .choice-section .audience-card h3,.choice-section .audience-card p,.choice-section .card-bottom:before{transform:none!important;transition:none!important}
}
.reduced-motion .choice-section .audience-grid .audience-card{scale:1!important;transition:none!important}
.reduced-motion .choice-section .audience-card h3,.reduced-motion .choice-section .audience-card p,.reduced-motion .choice-section .card-bottom:before{transform:none!important;transition:none!important}

/* Centrer les promesses et garder le dernier groupe de mots ensemble. */
.choice-section .audience-card p{text-align:center;transform-origin:center center}
.card-copy-line{display:block;text-wrap:balance}
.card-copy-keep{white-space:nowrap}
.card-choice-word{display:inline-block;position:relative;font-weight:inherit;transform-origin:center;transition:color .45s,transform .55s cubic-bezier(.2,.75,.2,1),text-shadow .45s}
.choice-section .audience-card:is(:hover,:focus-visible) .card-choice-word{color:#ffe1a1;transform:scale(1.16);text-shadow:0 0 22px #d5bd8945}
@media(prefers-reduced-motion:reduce){.choice-section .card-choice-word,.choice-section .card-choice-word:after{transform:none!important;transition:none!important}}
.reduced-motion .choice-section .card-choice-word,.reduced-motion .choice-section .card-choice-word:after{transform:none!important;transition:none!important}

/* Une invitation discrète à descendre vers le choix. */
.welcome-next{width:44px;min-height:56px;place-items:center}
.welcome-next svg{width:24px;height:36px;fill:none;stroke:currentColor;stroke-width:1.35;stroke-linecap:round;stroke-linejoin:round;animation:welcome-descend 2.4s ease-in-out infinite}
@keyframes welcome-descend{0%,100%{transform:translateY(-3px);opacity:.45}50%{transform:translateY(4px);opacity:1}}
@media(prefers-reduced-motion:reduce){.welcome-next svg{animation:none}}
.reduced-motion .welcome-next svg{animation:none}

/* Les promesses occupent le centre de l’espace entre le titre et le lien. */
.choice-section .audience-card h3{min-height:0}
.choice-section .audience-card p{display:flex;flex-direction:column;align-items:center;justify-content:center;flex:1;width:100%;margin:4px 0 22px;line-height:1.85;transform-origin:center center}

/* Choix validé : ivoire, noir vert et relief discret dans les coins. Accueil uniquement. */
.is-gateway .choice-section .audience-grid{width:min(960px,100%);gap:28px}
.is-gateway .choice-section .audience-card{isolation:isolate;min-height:360px;padding:30px 36px 26px;border-radius:4px;background:radial-gradient(ellipse at 100% 0,#25372e66,transparent 65%),linear-gradient(145deg,#111b16,#0a100d);filter:drop-shadow(0 13px 18px #0005)}
.is-gateway .choice-section .audience-card:after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;box-shadow:inset 0 1px 0 #ffffff0d,inset 0 -1px 0 #0006;z-index:3}
.is-gateway .choice-section .audience-card.personal{background:linear-gradient(145deg,#f1e9db,#ebe1d0);color:#282720;border-color:#b9a078;filter:drop-shadow(0 13px 18px #0006)}
.is-gateway .choice-section .personal:after{box-shadow:inset 0 1px 0 #ffffffb3,inset 0 -1px 0 #af94663b}
.is-gateway .choice-section .audience-card h3{font-size:50px;margin:26px 0 0}
.is-gateway .choice-section .audience-card p{min-height:94px;margin:8px 0 18px;font-size:15px;line-height:1.8;color:#c8ccc5}
.is-gateway .choice-section .personal p{color:#514637}
.is-gateway .choice-section .card-number{font-size:9px;letter-spacing:.17em;color:#d2bc91}
.is-gateway .choice-section .personal .card-number{color:#83663e}
.is-gateway .choice-section .card-bottom{font-size:11px;min-height:40px;padding-top:17px;color:#d7bf8c}
.is-gateway .choice-section .personal .card-bottom{color:#795d36;border-color:#af916660}
.is-gateway .choice-section .audience-card>h3,.is-gateway .choice-section .card-number,.is-gateway .choice-section .audience-card>p,.is-gateway .choice-section .card-bottom{position:relative;z-index:1}
.is-gateway .choice-corner{position:absolute;right:0;top:0;width:190px;height:190px;pointer-events:none;z-index:0}
.is-gateway .choice-corner>span{position:absolute;width:210px;height:210px;top:-80px;right:-62px;border-radius:50%;border:1px solid #d0b37450;background:linear-gradient(135deg,#96856533,#22372b3d 48%,#0b1510);box-shadow:-9px 12px 20px #0005,inset 0 1px 2px #e4d2a433}
.is-gateway .choice-corner>span:after{content:"";position:absolute;inset:14px;border:1px solid #c7ad7430;border-radius:50%}
.is-gateway .personal .choice-corner>span{background:linear-gradient(135deg,#faf4e8,#e8dbc4 48%,#c5ae879e);border-color:#aa8f5e55;box-shadow:-9px 12px 20px #9b7c3c24,inset 0 1px 2px #fff8}
.is-gateway .personal .choice-corner>span:after{border-color:#af936138}
.is-gateway .choice-section .personal:is(:hover,:focus-visible) p{color:#302718}
.is-gateway .choice-section .personal:is(:hover,:focus-visible) .card-bottom{color:#72501d}
.is-gateway .choice-section .personal .card-bottom:before{background:#9b7439}
@media(max-width:620px){.is-gateway .choice-section .audience-grid{gap:14px}.is-gateway .choice-section .audience-card{min-height:325px;padding:22px 15px}.is-gateway .choice-section .audience-card h3{font-size:clamp(20px,6.6vw,32px);margin-top:30px}.is-gateway .choice-section .audience-card p{font-size:13px;min-height:90px;margin:7px 0 17px}.is-gateway .choice-section .card-number{font-size:8px;letter-spacing:.10em}.is-gateway .choice-section .card-bottom{font-size:10px}.is-gateway .choice-corner{width:75px;height:75px}.is-gateway .choice-corner>span{width:105px;height:105px;right:-45px;top:-54px}.is-gateway .choice-corner>span:after{inset:9px}}

/* Un relief de surface plus lisible, sans changer le mouvement des cartes. */
.is-gateway .choice-section .audience-card{--choice-depth-shadow:0 22px 30px -12px #000e,0 5px 8px -2px #000b,0 0 0 1px #c6b48d1a;background:radial-gradient(ellipse at 12% 0,#35483c70,transparent 65%),linear-gradient(145deg,#17241c 0%,#101912 55%,#070e0a 100%);border-top-color:#c4bd946e;border-left-color:#9caa8450;border-right-color:#080c09;border-bottom-color:#080c09;box-shadow:var(--choice-depth-shadow);filter:drop-shadow(0 0 13px #82957114)}
.is-gateway .choice-section .audience-card:after{inset:1px;box-shadow:inset 0 1px 0 #eee9d42e,inset 1px 0 0 #d2dfc517,inset 0 -2px 3px #0009,inset -1px 0 2px #0006}
.is-gateway .choice-section .audience-card:before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;background:linear-gradient(120deg,#fff7dc08,transparent 40%,#0000000d 80%)}
.is-gateway .choice-section .audience-card.personal{--choice-depth-shadow:0 24px 32px -12px #000e,0 6px 8px -3px #000b,0 0 0 1px #e6cf9e2b;background:radial-gradient(ellipse at 5% 0,#fffdf590,transparent 65%),linear-gradient(145deg,#f5eddf 0%,#eadfca 62%,#daceb8 100%);border-top-color:#fff3d9;border-left-color:#ead6b1;border-right-color:#998261;border-bottom-color:#998261;filter:drop-shadow(0 0 12px #c9b07c12)}
.is-gateway .choice-section .personal:after{box-shadow:inset 0 1px 0 #fffef4,inset 1px 0 0 #fff9e7a3,inset 0 -2px 3px #79633d3d,inset -1px 0 2px #79633d24}
.is-gateway .choice-section .personal:before{background:linear-gradient(120deg,#ffffff12,transparent 45%,#8d72470c 85%)}
.is-gateway .choice-arrived .choice-section .audience-card{animation-name:choice-from-left,choice-depth-invitation}
.is-gateway .choice-arrived .choice-section .audience-card.personal{animation-name:choice-from-right,choice-depth-invitation}
@keyframes choice-depth-invitation{0%,45%,100%{box-shadow:var(--choice-depth-shadow);border-color:#a8916455}18%,28%{border-color:var(--gold);box-shadow:var(--choice-depth-shadow),0 0 24px #d5bd891c}}
.is-gateway .choice-section .choice-corner>span{box-shadow:-7px 12px 16px #0008,inset 0 1px 1px #f4e6bc4d}
.is-gateway .choice-section .personal .choice-corner>span{box-shadow:-7px 12px 18px #92764436,inset 0 1px 1px #fffdf6}
@media(min-width:621px){.is-gateway .choice-section .audience-card:is(:hover,:focus-visible){box-shadow:var(--choice-depth-shadow),0 0 0 1px #d5bd8940,0 0 24px #d5bd891c}}

/* Un liseré or permanent et contrasté sur l’ivoire. */
.is-gateway .choice-section .audience-card.personal:after{inset:0;border:1px solid #a77b2f;box-shadow:inset 0 0 0 1px #d6b66d99,inset 0 2px 1px #fff2c6b3,inset 0 -3px 4px #79633d4d,inset -1px 0 2px #79633d33}
.is-gateway .choice-section .audience-card.personal{filter:drop-shadow(0 0 14px #c9b07c24)}

/* Une présentation en V pour la phrase d’accueil. */
.is-gateway .welcome-copy{max-width:800px;width:100%}
.is-gateway .welcome-copy>span{display:block}
@media(min-width:761px){.is-gateway .welcome-copy>span{white-space:nowrap}}
@media(max-width:760px){.is-gateway .welcome-copy{max-width:350px;text-wrap:balance}.is-gateway .welcome-copy>span:first-child{max-width:100%;margin-inline:auto}.is-gateway .welcome-copy>span:nth-child(2){max-width:90%;margin-inline:auto}.is-gateway .welcome-copy>span:nth-child(3){max-width:80%;margin-inline:auto}.is-gateway .welcome-copy>span:last-child{max-width:65%;margin-inline:auto}}

/* Des lignes volontairement décroissantes pour l’accueil mobile. */
.is-gateway .welcome-copy-mobile{display:none}
@media(max-width:760px){
 .is-gateway .welcome-copy-desktop{display:none}
 .is-gateway .welcome-copy-mobile{display:block;max-width:none;font-size:clamp(12px,3.25vw,14px);line-height:1.9}
 .is-gateway .welcome-copy-mobile>span{max-width:none;width:max-content;margin-inline:auto;white-space:nowrap}
}

/* Une signature métier complète et lisible sur une seule ligne en mobile. */
@media(max-width:760px){.is-gateway .abyss-frame>.welcome h1{max-width:100%;font-size:min(28px,calc((100vw - 56px)/20.5));letter-spacing:.025em;white-space:nowrap}}

/* Sur écran tactile, une seule translation pilote l’arrivée des cartes. */
@media(hover:none){
 .is-gateway .choice-section .audience-card{transition-property:scale,border-color,box-shadow}
 .is-gateway .choice-section .audience-card:is(:hover,:focus-visible,:active){transform:none}
}