/* ============================================================================================================
   Corsiva — écran de chargement commun aux sites du groupe (proposition du 22/10/2026). Voir corsiva-intro.js.
   Tout est en animations CSS jouées d'un coup, transform et opacity seulement (sauf le tracé du monogramme, comme
   l'intro actuelle de corsiva.fr). Thème « corsiva » : nuit #090909 et dégradés bleus de Prime ; thème « mariages » :
   noir #0a0a0a et crème #F3E9D8 du logo Corsiva Mariages, sans aucun bleu.
   ============================================================================================================ */
html.ci-lock, html.ci-lock body { overflow: hidden !important; }

.ci, .ci-veil {
  --ci-bg: #090909; --ci-ink: #fff; --ci-mute: #a2a8b3;
  --ci-line: #7cc4ff; --ci-hot: #ffffff; --ci-deep: #0045ff;
  --ci-side-a: #0a52d6; --ci-side-b: #031338;
  --ci-ease: cubic-bezier(.16, 1, .3, 1);
  position: fixed; inset: 0; z-index: 2147483000;
  color: var(--ci-ink);
  font-family: Geist, Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  -webkit-user-select: none; user-select: none; touch-action: none;
  contain: layout paint style;
}
.ci[data-theme="mariages"], .ci-veil[data-theme="mariages"] {
  --ci-bg: #0a0a0a; --ci-ink: #F3E9D8; --ci-mute: #b9ae9b;
  --ci-line: #e8dcc4; --ci-hot: #fffaf0; --ci-deep: #b8a47e;
  --ci-side-a: #8a7d68; --ci-side-b: #1d1a15;
}
.ci *, .ci-veil * { box-sizing: border-box; }
.ci svg, .ci-veil svg { display: block; overflow: visible; }
.ci-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---------- le logo en deux blocs : monogramme | mot-symbole (+ filet et suffixe des métiers) ---------- */
.ci-logo { position: relative; display: flex; width: var(--ci-lw, clamp(236px, 62vw, 400px)); aspect-ratio: var(--ci-ar); }
.ci[data-theme="mariages"] .ci-logo { --ci-lw: clamp(276px, 82vw, 560px); }
.ci-mark { flex: 0 0 calc(var(--ci-mw) * 100%); width: calc(var(--ci-mw) * 100%); min-width: 0; height: 100%; }
.ci-wmask { position: relative; flex: 1 1 0; min-width: 0; height: 100%; overflow: hidden; }   /* le mot sort de derrière le monogramme */
.ci-word { width: 100%; height: 100%; min-width: 0; }
.ci-shine { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.ci-band { opacity: 0; transform: translateX(var(--x0)) skewX(-18deg); }
@keyframes ci-band {
  0% { opacity: 0; transform: translateX(var(--x0)) skewX(-18deg); }
  18%, 82% { opacity: 1; }
  100% { opacity: 0; transform: translateX(var(--x1)) skewX(-18deg); }
}
@keyframes ci-row { to { transform: none; } }
@keyframes ci-word { to { transform: none; } }
@keyframes ci-in { to { opacity: 1; } }
@keyframes ci-fadeout { to { opacity: 0; } }

/* la barre suit le vrai préchargement (--p posé par le script) */
.ci-bar {
  width: clamp(92px, 22vw, 150px); height: 1px; margin-top: clamp(24px, 4.2vh, 36px);
  background: rgba(255, 255, 255, .12); overflow: hidden; opacity: 0;
  animation: ci-in .5s .35s ease forwards;
}
.ci[data-theme="mariages"] .ci-bar { background: rgba(243, 233, 216, .14); }
.ci-bar i {
  display: block; width: 100%; height: 100%;
  background: linear-gradient(90deg, var(--ci-deep), var(--ci-line));
  transform-origin: 0 50%; transform: scaleX(var(--p, 0));
  transition: transform .45s cubic-bezier(.2, .7, .2, 1);
}
.ci-out .ci-bar { opacity: 0 !important; transition: opacity .2s ease; }

/* ============================================================ A. FENTE ============================================
   Le monogramme se dessine puis se remplit, le mot sort de derrière lui, un reflet traverse le logo une fois ;
   l'écran s'ouvre ensuite en deux, le long d'une fente de lumière inclinée comme le C (Mariages : deux portes droites). */
.ci-fente .ci-half { position: absolute; inset: 0; display: grid; place-items: center; background: var(--ci-bg); will-change: transform; }
.ci-fente .ci-l { clip-path: polygon(0 0, calc(50% + var(--ci-sl, 0px) + 1px) 0, calc(50% - var(--ci-sl, 0px) + 1px) 100%, 0 100%); }
.ci-fente .ci-r { clip-path: polygon(calc(50% + var(--ci-sl, 0px)) 0, 100% 0, 100% 100%, calc(50% - var(--ci-sl, 0px)) 100%); }
.ci-stage { position: relative; display: flex; flex-direction: column; align-items: center; }

.ci-fente .ci-mark path {
  fill: url(#ci-mg); fill-opacity: 0;
  stroke: url(#ci-mg); stroke-width: 4.2; stroke-linejoin: round;
  stroke-dasharray: 1 1; stroke-dashoffset: 1;
  animation: ci-draw 1s .08s cubic-bezier(.65, 0, .35, 1) forwards, ci-fill .5s .74s ease-out forwards;
}
@keyframes ci-draw { to { stroke-dashoffset: 0; } }
@keyframes ci-fill { to { fill-opacity: 1; stroke-opacity: 0; } }
.ci-fente .ci-logo { transform: translateX(var(--ci-shift)); animation: ci-row .95s .82s var(--ci-ease) forwards; }
.ci-fente .ci-word { transform: translateX(-101%); animation: ci-word .95s .82s var(--ci-ease) forwards; }
.ci-fente .ci-shine-full .ci-band { animation: ci-band .72s 1.5s cubic-bezier(.45, 0, .2, 1) forwards; }

.ci-slit {
  position: absolute; left: 50%; top: -12vh; width: 2px; height: 124vh; margin-left: -1px; pointer-events: none;
  background: linear-gradient(180deg, transparent, var(--ci-line) 28%, var(--ci-hot) 50%, var(--ci-line) 72%, transparent);
  box-shadow: 0 0 22px 3px color-mix(in srgb, var(--ci-line) 45%, transparent);
  opacity: 0; transform: rotate(var(--ci-rot, 0deg)) scaleY(0);
}
.ci-fente.ci-out .ci-slit { animation: ci-slit 1.05s cubic-bezier(.22, 1, .36, 1) forwards; }
@keyframes ci-slit {
  0% { opacity: 0; transform: rotate(var(--ci-rot, 0deg)) scaleY(0); }
  28% { opacity: 1; transform: rotate(var(--ci-rot, 0deg)) scaleY(1); }
  70% { opacity: .85; }
  100% { opacity: 0; transform: rotate(var(--ci-rot, 0deg)) scaleY(1); }
}
.ci-fente.ci-out .ci-l { animation: ci-open-l .9s .24s cubic-bezier(.76, 0, .24, 1) forwards; }
.ci-fente.ci-out .ci-r { animation: ci-open-r .9s .24s cubic-bezier(.76, 0, .24, 1) forwards; }
.ci-fente.ci-out .ci-stage { animation: ci-stage-out .9s .24s cubic-bezier(.76, 0, .24, 1) forwards; }
@keyframes ci-open-l { to { transform: translateX(calc(-50% - var(--ci-sl, 0px) - 4px)); } }
@keyframes ci-open-r { to { transform: translateX(calc(50% + var(--ci-sl, 0px) + 4px)); } }
@keyframes ci-stage-out { to { transform: scale(1.06); opacity: .35; } }

/* ============================================================ B. DÉFILÉ ===========================================
   Chorégraphie du bloc 21st « Stack Loader » (hyperiux) : mêmes courbes et mêmes valeurs (entrée de la pile à 500 %,
   mots redressés de 90° en perspective 1000 px, pile à +15 % et −20 % par photo, déploiement de 110 %), jouée 1,67 fois
   plus vite. Sur mobile et tablette, la pile se déploie à l'horizontale pour ne pas recouvrir le logo et la phrase. */
.ci-defile { display: flex; align-items: center; justify-content: center; padding: 0 2.5vw; background: var(--ci-bg); }
.ci-defile .ci-row { display: flex; width: 100%; align-items: center; justify-content: space-between; }
.ci-w1, .ci-w2 { margin: 0; font-size: clamp(15px, 1.2vw, 20px); font-weight: 500; letter-spacing: -.02em; line-height: 1.15; color: var(--ci-ink); white-space: nowrap; }
.ci-wd {
  display: inline-block; opacity: 0; transform: perspective(1000px) rotateX(90deg); transform-origin: 50% 100%;
  animation: ci-wd-in .3s calc(.3s + var(--k) * .048s) cubic-bezier(.25, 1, .5, 1) forwards;
}
.ci-wlogo { vertical-align: middle; }
.ci-flogo { height: 1.3em; width: auto; aspect-ratio: var(--ci-far, 5); }
.ci[data-theme="mariages"] .ci-flogo { height: 1.05em; }
@keyframes ci-wd-in { to { opacity: 1; transform: perspective(1000px) rotateX(0deg); } }

.ci-stack {
  position: relative; flex: none; width: clamp(4.6rem, 6.5vw, 18rem); height: clamp(4.6rem, 6.5vw, 18rem);
  transform: translateY(500%); opacity: 0;
  animation: ci-stack-in .3s cubic-bezier(.25, 1, .5, 1) forwards;
}
@keyframes ci-stack-in { to { transform: none; opacity: 1; } }
.ci-card { position: absolute; inset: 0; animation: ci-card-move 1.356s calc(.72s + (6 - var(--i)) * .006s) linear forwards; }
.ci-ph {
  width: 100%; height: 100%; border-radius: 12px; overflow: hidden; background: #15171b; opacity: 0;
  box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .75), 0 0 0 1px rgba(255, 255, 255, .06);
  animation: ci-in .3s cubic-bezier(.25, 1, .5, 1) forwards;
}
.ci[data-theme="mariages"] .ci-ph { background: #17140f; box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .75), 0 0 0 1px rgba(243, 233, 216, .08); }
.ci-ph img { display: block; width: 100%; height: 100%; object-fit: cover; }
@keyframes ci-card-move {
  0% { transform: translate(0, 0) scale(1); animation-timing-function: cubic-bezier(.65, 0, .35, 1); }
  44.25% { transform: translate(0, calc(var(--i) * -20%)) scale(calc(1 + var(--i) * .15)); }
  55.75% { transform: translate(0, calc(var(--i) * -20%)) scale(calc(1 + var(--i) * .15)); animation-timing-function: cubic-bezier(.65, 0, .35, 1); }
  100% { transform: translate(0, calc(-330% + var(--i) * 110%)) scale(1); }
}
@keyframes ci-card-move-x {
  0% { transform: translate(0, 0) scale(1); animation-timing-function: cubic-bezier(.65, 0, .35, 1); }
  44.25% { transform: translate(0, calc(var(--i) * -20%)) scale(calc(1 + var(--i) * .15)); }
  55.75% { transform: translate(0, calc(var(--i) * -20%)) scale(calc(1 + var(--i) * .15)); animation-timing-function: cubic-bezier(.65, 0, .35, 1); }
  100% { transform: translate(calc(-330% + var(--i) * 110%), 0) scale(1); }
}
.ci-desc {
  position: absolute; left: 50%; bottom: 3vw; width: 40vw; margin: 0; transform: translateX(-50%);
  text-align: center; font: 500 13px/1.1 Inter, ui-sans-serif, system-ui, sans-serif; letter-spacing: 0; color: var(--ci-mute);
}
.ci-dl, .ci-dot { display: inline-block; }
.ci-dot { margin: 0 .55em; opacity: 0; animation: ci-in .3s .5s ease forwards, ci-fadeout .4s 1.45s ease forwards; }
.ci-dl {
  opacity: 0; transform: perspective(1000px) rotateX(90deg); transform-origin: 50% 0;
  animation: ci-wd-in .3s calc(.34s + var(--k) * .048s) cubic-bezier(.25, 1, .5, 1) forwards,
             ci-wd-out .6s calc(1.416s + var(--k) * .048s) cubic-bezier(.25, 1, .5, 1) forwards;
}
@keyframes ci-wd-out { from { opacity: 1; transform: perspective(1000px) rotateX(0deg); } to { opacity: 0; transform: perspective(1000px) rotateX(90deg); } }
.ci-defile .ci-bar { position: absolute; left: 50%; bottom: calc(3vw + 34px); margin: 0 0 0 calc(clamp(92px, 22vw, 150px) / -2); }
/* l'ouverture : les mots se couchent, les photos s'éteignent de la dernière à la première, puis le fond */
.ci-defile.ci-out .ci-wd { transform-origin: 50% 0; animation: ci-wd-out .3s calc(var(--k) * .048s) cubic-bezier(.25, 1, .5, 1) both; }
.ci-defile.ci-out .ci-ph { animation: ci-ph-out .48s calc(.12s + (6 - var(--i)) * .048s) ease both; }
@keyframes ci-ph-out { from { opacity: 1; } to { opacity: 0; } }
.ci-defile.ci-out { animation: ci-fadeout .48s .74s ease forwards; }
@media (max-width: 1025px) {
  .ci-defile { padding: 0 5vw; }
  .ci-defile .ci-row { flex-direction: column; justify-content: center; gap: 33vh; }
  .ci-w1, .ci-w2 { font-size: 2.8vw; }
  .ci-card { animation-name: ci-card-move-x; }
  .ci-desc { width: 68vw; font-size: 2.4vw; }
}
@media (max-width: 767px) {
  .ci-defile { padding: 0 6vw; }
  .ci-stack { width: 21vw; height: 21vw; }
  .ci-defile .ci-row { gap: 70vw; }
  .ci-w1 { font-size: 5vw; }
  .ci-w2 { font-size: 4.4vw; }
  .ci-desc { bottom: 9vw; width: 90%; font-size: 3.5vw; }
  .ci-defile .ci-bar { bottom: calc(9vw + 30px); }
}

/* ============================================================ C. PASSAGE ==========================================
   Le monogramme en relief (huit épaisseurs, comme la boîte de LaBoîte) tombe avec du ressort, s'écrase puis se
   redresse, se tourne face à nous ; un reflet le traverse, le mot sort de derrière lui, des traits de phares passent
   une fois au fond. Pour entrer, on plonge dans l'ouverture du C : le logo grandit autour de son centre vide. */
.ci-passage { display: grid; place-items: center; }
.ci-passage .ci-bg { position: absolute; inset: 0; background: var(--ci-bg); }
.ci-passage .ci-stage { z-index: 1; }
.ci-passage .ci-logo { --ci-lw: clamp(252px, 72vw, 470px); transform: translateX(var(--ci-shift)); animation: ci-row .95s 1.14s var(--ci-ease) forwards; }
.ci[data-theme="mariages"].ci-passage .ci-logo { --ci-lw: clamp(290px, 86vw, 620px); }
.ci-passage .ci-word { transform: translateX(-101%); animation: ci-word .95s 1.14s var(--ci-ease) forwards; }
.ci-dive { position: relative; transform-origin: var(--ox) var(--oy); will-change: transform; }   /* garde la trame d'origine pendant la plongée : rien n'est retramé à ×34 */
.ci-m3 { position: relative; z-index: 2; flex: 0 0 calc(var(--ci-mw) * 100%); width: calc(var(--ci-mw) * 100%); min-width: 0; height: 100%;
  transform: scale(var(--ci-big, 1.9)); animation: ci-settle .95s 1.14s var(--ci-ease) forwards; }
.ci-passage .ci-wmask { z-index: 1; }
@keyframes ci-settle { to { transform: none; } }   /* arrivé en grand au centre, le C se range dans le logo pendant que le mot sort */
.ci-m3-drop {
  width: 100%; height: 100%; perspective: 900px; transform-origin: 50% 100%;
  transform: translateY(-46vh) scale(.7); opacity: 0;
  animation: ci-drop .95s .05s linear forwards;
}
@keyframes ci-drop {
  0% { transform: translateY(-46vh) scale(.7); opacity: 0; animation-timing-function: cubic-bezier(.55, 0, 1, .45); }
  8% { opacity: 1; }
  46% { transform: translateY(0) scale(1.07, .86); animation-timing-function: cubic-bezier(0, .55, .45, 1); }
  64% { transform: translateY(-4%) scale(.97, 1.05); animation-timing-function: cubic-bezier(.45, 0, .55, 1); }
  80% { transform: translateY(0) scale(1.01, .99); }
  100% { transform: none; opacity: 1; }
}
.ci-m3-rot {
  position: relative; width: 100%; height: 100%; transform-style: preserve-3d;
  transform: rotateY(-42deg) rotateX(14deg);
  animation: ci-turn 1.05s .3s cubic-bezier(.34, 1.3, .5, 1) forwards;
}
@keyframes ci-turn { to { transform: rotateY(0deg) rotateX(0deg); } }
.ci-layer, .ci-face, .ci-shine-mark { position: absolute; inset: 0; width: 100%; height: 100%; }
.ci-layer { transform: translateZ(calc(var(--z) * -3px)); fill: color-mix(in srgb, var(--ci-side-a) calc(100% - var(--z) * 14%), var(--ci-side-b)); }
.ci-face { transform: translateZ(0); }
.ci-face path { fill: url(#ci-mg); }
.ci-shine-mark .ci-band { animation: ci-band .64s 1.02s cubic-bezier(.45, 0, .2, 1) forwards; }
.ci-passage .ci-bar { position: relative; z-index: 1; }

.ci-trails { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.ci-trails i {
  position: absolute; left: 100%; top: var(--y); width: var(--w); height: 1px; opacity: 0;
  background: linear-gradient(90deg, transparent, var(--ci-line) 40%, var(--ci-hot) 86%, transparent);
  animation: ci-trail 1.15s calc(.25s + var(--k) * .13s) cubic-bezier(.3, .1, .2, 1) forwards;
}
.ci-trails i:nth-child(2n) { height: 2px; }
@keyframes ci-trail {
  0% { opacity: 0; transform: translateX(0); }
  15% { opacity: .9; }
  70% { opacity: .55; }
  100% { opacity: 0; transform: translateX(calc(-100vw - var(--w) - 10vw)); }
}
.ci-passage.ci-out .ci-dive { animation: ci-dive .86s cubic-bezier(.7, 0, .84, 0) forwards; }
@keyframes ci-dive { 0% { transform: none; opacity: 1; } 78% { opacity: 1; } 100% { transform: scale(34); opacity: 0; } }
.ci-passage.ci-out .ci-bg { animation: ci-fadeout .5s .34s ease forwards; }
.ci-passage.ci-out .ci-trails { opacity: 0; transition: opacity .2s ease; }

/* ============================================================ C2. PASSAGE, VERSION AMÉLIORÉE (22/10/2026) =========
   Même idée que la C, plus de matière et de mise en scène : fond à grain de pellicule, lumière douce venue du haut et
   vignette (fixes) ; C à dix épaisseurs, face au dégradé avec lumière du haut, grain sablé et arête claire ; chute
   étirée, impact écrasé avec une onde au sol (Mariages : deux anneaux entrelacés), rebond ; paillettes et reflets ;
   traits de phares en deux tons ; pour entrer, le mot s'efface, le C recule d'un souffle, puis on plonge dans son ouverture.
   Tout se joue une fois, transform et opacity seulement (le grain est une texture fixe). */
.ci-passage2 { --ci-glow: rgba(0, 153, 255, .55); --ci-ring: #7cc4ff; }
.ci[data-theme="mariages"].ci-passage2 { --ci-glow: rgba(243, 233, 216, .42); --ci-ring: #e8dcc4; }
.ci-passage2 .ci-film { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .045; }
.ci-passage2 .ci-spot {
  position: absolute; left: 50%; top: 44%; width: min(130vw, 1150px); aspect-ratio: 1.6; border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--ci-line) 17%, transparent), transparent 72%);
  opacity: 0; transform: translate(-50%, -50%) scale(.82); animation: ci-spot .9s .05s ease-out forwards;
}
@keyframes ci-spot { to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
.ci-passage2 .ci-vig { position: absolute; inset: 0; background: radial-gradient(120% 90% at 50% 45%, transparent 55%, rgba(0, 0, 0, .6)); }

.ci-passage2 .ci-logo { --ci-lw: clamp(260px, 74vw, 480px); animation: ci-row .85s 1.05s var(--ci-ease) forwards; }
.ci[data-theme="mariages"].ci-passage2 .ci-logo { --ci-lw: clamp(300px, 88vw, 640px); }
.ci-passage2 .ci-word { animation: ci-word .85s 1.05s var(--ci-ease) forwards; }
.ci-passage2 .ci-m3 { --ci-big: 2.2; animation: ci-settle .85s 1.05s var(--ci-ease) forwards; }
.ci[data-theme="mariages"].ci-passage2 .ci-m3 { --ci-big: 2.9; }
@media (min-width: 768px) {
  .ci-passage2 .ci-m3 { --ci-big: 1.9; }
  .ci[data-theme="mariages"].ci-passage2 .ci-m3 { --ci-big: 2.4; }
}
.ci-passage2 .ci-m3-drop { perspective: 800px; transform: translateY(-34vh) scale(.82, 1.16); animation: ci-drop2 .82s .04s linear forwards; }
@keyframes ci-drop2 {
  0% { transform: translateY(-34vh) scale(.82, 1.16); opacity: 0; animation-timing-function: cubic-bezier(.5, 0, 1, .5); }
  6% { opacity: 1; }
  44% { transform: translateY(0) scale(1.12, .82); animation-timing-function: cubic-bezier(0, .6, .4, 1); }
  60% { transform: translateY(-6%) scale(.95, 1.07); animation-timing-function: cubic-bezier(.45, 0, .55, 1); }
  76% { transform: translateY(0) scale(1.03, .97); }
  88% { transform: translateY(-1%) scale(.995, 1.005); }
  100% { transform: none; opacity: 1; }
}
.ci-passage2 .ci-m3-rot { transform: rotateY(-50deg) rotateX(20deg) rotateZ(-5deg); animation: ci-turn2 1.05s .2s cubic-bezier(.34, 1.36, .5, 1) forwards; }
@keyframes ci-turn2 { to { transform: rotateY(0deg) rotateX(0deg) rotateZ(0deg); } }
.ci-passage2 .ci-layer { transform: translateZ(calc(var(--z) * -2.3px)); fill: color-mix(in srgb, var(--ci-side-a) calc(100% - var(--z) * 8.5%), var(--ci-side-b)); }
.ci-passage2 .ci-face-base { fill: url(#ci-mg); }
.ci-passage2 .ci-face-grain { opacity: .16; }
.ci-passage2 .ci-face-edge { fill: none; stroke: rgba(255, 255, 255, .5); stroke-width: 2.2; stroke-linejoin: round; }
.ci[data-theme="mariages"].ci-passage2 .ci-face-edge { stroke: rgba(255, 255, 255, .8); }
.ci-passage2 .ci-shine-mark .ci-band { animation: ci-band .6s .98s cubic-bezier(.45, 0, .2, 1) forwards; }
.ci-passage2 .ci-shine-full .ci-band { animation: ci-band .72s 1.72s cubic-bezier(.45, 0, .2, 1) forwards; }
.ci-spark {
  position: absolute; width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px; border-radius: 50%; background: #fff;
  box-shadow: 0 0 6px 2px color-mix(in srgb, var(--ci-hot) 70%, transparent);
  opacity: 0; transform: translateZ(1px) scale(0);
  animation: ci-spark .5s calc(1.02s + var(--k) * .06s) ease-out forwards;
}
@keyframes ci-spark { 0% { opacity: 0; transform: translateZ(1px) scale(0); } 40% { opacity: 1; transform: translateZ(1px) scale(1); } 100% { opacity: 0; transform: translateZ(1px) scale(.2); } }
.ci-impact { position: absolute; left: 50%; top: 100%; width: 170%; aspect-ratio: 3.2; transform: translate(-50%, -55%); pointer-events: none; }
.ci-glow {
  position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(closest-side, var(--ci-glow), transparent);
  opacity: 0; transform: scale(.4); animation: ci-glow .75s .38s ease-out forwards;
}
@keyframes ci-glow { 0% { opacity: 0; transform: scale(.4); } 30% { opacity: 1; } 100% { opacity: 0; transform: scale(1.1); } }
.ci-ring {
  position: absolute; left: 50%; top: 50%; width: 100%; aspect-ratio: 3.2; margin-left: -50%; border-radius: 50%;
  border: 1.5px solid var(--ci-ring); opacity: 0; transform: translateY(-50%) scale(.15);
  animation: ci-ring .8s .4s cubic-bezier(.2, .7, .2, 1) forwards;
}
.ci-ring-a { margin-left: calc(-50% - 9%); }
.ci-ring-b { margin-left: calc(-50% + 9%); animation-delay: .47s; }
@keyframes ci-ring { 0% { opacity: .95; transform: translateY(-50%) scale(.15); } 100% { opacity: 0; transform: translateY(-50%) scale(1.25); } }
.ci-passage2 .ci-trails i, .ci-passage2 .ci-trails i:nth-child(2n) {
  height: var(--h, 1px);
  background: linear-gradient(90deg, transparent, var(--ci-line) 35%, var(--ci-hot) 88%, transparent);
  box-shadow: 0 0 10px 1px color-mix(in srgb, var(--ci-line) 45%, transparent);
  animation: ci-trail 1.05s calc(.16s + var(--k) * .085s) cubic-bezier(.3, .1, .2, 1) forwards;
}
.ci-passage2 .ci-bar { width: clamp(80px, 18vw, 120px); animation: ci-in .5s .9s ease forwards; }
.ci-passage2.ci-out .ci-dive { animation: ci-dive2 1.02s linear forwards; }
@keyframes ci-dive2 {
  0% { transform: none; animation-timing-function: cubic-bezier(.3, 0, .4, 1); }
  16% { transform: scale(.93); animation-timing-function: cubic-bezier(.75, 0, .92, .25); }
  82% { opacity: 1; }
  100% { transform: scale(42); opacity: 0; }
}
.ci-passage2.ci-out .ci-wmask, .ci-passage2.ci-out .ci-shine-full, .ci-passage2.ci-out .ci-impact { opacity: 0; transition: opacity .16s ease; }
.ci-passage2.ci-out .ci-bg { animation: ci-fadeout .44s .4s ease forwards; }
.ci-passage2.ci-out .ci-trails { opacity: 0; transition: opacity .2s ease; }

/* ============================================================ D. LE BOX (22/10/2026) ===========================
   Retour du dirigeant sur C2 : « pas de brillance ». Aucun reflet, aucune paillette, aucun halo, aucun dégradé sur le
   logo : le logo officiel en blanc (Mariages : crème) sur la porte du box, faite de lames mates. Le C se forme lame par
   lame (trois bandes du vrai tracé glissent de côté et s'emboîtent), se serre d'un cran, puis le mot sort de derrière lui.
   Pour entrer : la porte s'enfonce d'un cran (le moteur prend) puis se lève d'un seul mouvement, la page arrive derrière. */
.ci-box {
  --ci-door: #0d0e11; --ci-gr1: rgba(255, 255, 255, .045); --ci-gr2: rgba(0, 0, 0, .62); --ci-rail-c: #17191d;
  --ci-sh: 6.4vh;
}
.ci-box[data-theme="mariages"] { --ci-door: #0b0b0a; --ci-gr1: rgba(243, 233, 216, .05); --ci-gr2: rgba(0, 0, 0, .6); --ci-rail-c: #161512; }
@media (min-width: 768px) { .ci-box { --ci-sh: 7.2vh; } }
.ci-box .ci-door {
  position: absolute; inset: 0; display: grid; place-items: center; background: var(--ci-door);
  box-shadow: 0 34px 70px -12px rgba(0, 0, 0, .7);
  will-change: transform;
}
/* les lames : une rainure fine (un trait clair puis un trait sombre) toutes les --ci-sh, rien d'autre */
.ci-box .ci-slats {
  position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background-image: repeating-linear-gradient(180deg, transparent 0, transparent calc(var(--ci-sh) - 2px),
    var(--ci-gr1) calc(var(--ci-sh) - 2px), var(--ci-gr1) calc(var(--ci-sh) - 1px), var(--ci-gr2) calc(var(--ci-sh) - 1px), var(--ci-gr2) var(--ci-sh));
  animation: ci-in .5s .02s ease forwards;
}
.ci-box .ci-vig { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(130% 95% at 50% 46%, transparent 52%, rgba(0, 0, 0, .5)); }
.ci-box .ci-rail { position: absolute; left: 0; right: 0; bottom: 0; height: 12px; background: var(--ci-rail-c); border-top: 1px solid var(--ci-gr1); }
.ci-box .ci-rail::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: #000; }

.ci-box .ci-strips { position: relative; animation: ci-press .34s .84s cubic-bezier(.3, 1.5, .5, 1) both; }
.ci-box .ci-strip {
  position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0;
  transform: translateX(calc(var(--dx) * 72%));
  animation: ci-strip .56s calc(.1s + var(--k) * .1s) cubic-bezier(.2, .9, .25, 1) forwards;
}
.ci-box .ci-strip path { fill: var(--ci-ink); }
@keyframes ci-strip { 0% { opacity: 0; transform: translateX(calc(var(--dx) * 72%)); } 30% { opacity: 1; } 100% { opacity: 1; transform: none; } }
@keyframes ci-press { 0%, 100% { transform: none; } 42% { transform: scale(.955); } }
.ci-box .ci-logo { transform: translateX(var(--ci-shift)); animation: ci-row .9s .96s var(--ci-ease) forwards; }
.ci-box .ci-word { transform: translateX(-101%); animation: ci-word .9s .96s var(--ci-ease) forwards; }
.ci-box .ci-bar { background: var(--ci-gr1); }
.ci-box .ci-bar i { background: var(--ci-line); }

.ci-box.ci-out .ci-door { animation: ci-door-up 1.2s cubic-bezier(.62, 0, .22, 1) forwards; }
@keyframes ci-door-up {
  0% { transform: none; }
  13% { transform: translateY(1.4vh); }
  100% { transform: translateY(-106%); }
}

/* ============================================================ voile entre deux pages ============================== */
.ci-veil { display: grid; place-items: center; background: var(--ci-bg); opacity: 0; transition: opacity .3s ease; pointer-events: none; }
.ci-veil.on { opacity: 1; pointer-events: auto; }
.ci-vmark { width: clamp(46px, 9vw, 64px); height: auto; aspect-ratio: 253 / 213; opacity: 0; transform: scale(.9); transition: opacity .3s .05s ease, transform .5s var(--ci-ease); }
.ci-veil.on .ci-vmark { opacity: 1; transform: none; }
.ci-vmark path { fill: url(#ci-mg); }

@media (prefers-reduced-motion: reduce) { .ci, .ci-veil { display: none !important; } }