/* Madame Corail – « Notre univers » (landing) et lecteur vidéo. */

/* ---------- Lecteur vidéo (accueil et landing) ---------- */
.mc-home .mc-video {
  position: relative; display: block; width: 100%; padding: 0; border: 0; margin: 0;
  background: #133651; cursor: pointer; overflow: hidden; color: inherit; font: inherit;
}
.mc-home .mc-video.mc-story-media { aspect-ratio: 4 / 5; border-radius: 24px; }
.mc-home .mc-video--wide { aspect-ratio: 16 / 9; border-radius: 24px; box-shadow: 0 30px 70px rgba(0, 0, 0, .35); }
.mc-home .mc-video .mc-video-media { position: absolute; inset: 0; }
.mc-home .mc-video .mc-img { transition: transform .8s cubic-bezier(.2, .7, .2, 1); }
.mc-home .mc-video:hover .mc-img { transform: scale(1.05); }
.mc-home .mc-video::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(15, 42, 67, .45)); pointer-events: none; }
.mc-home .mc-video-play {
  position: absolute; left: 50%; top: 50%; z-index: 1; width: 5.25rem; height: 5.25rem; margin: -2.625rem 0 0 -2.625rem;
  border-radius: 50%; background: #F26B5B; color: #0F2A43; display: grid; place-items: center;
  box-shadow: 0 0 0 0 rgba(242, 107, 91, .55); animation: mcu-pulse 2.4s ease-out infinite; transition: transform .25s ease;
}
.mc-home .mc-video:hover .mc-video-play { transform: scale(1.08); }
.mc-home .mc-video-play svg { width: 2rem; height: 2rem; margin-left: .2rem; fill: currentColor; }
.mc-home .mc-video:focus-visible { outline: 3px solid #F26B5B; outline-offset: 4px; }
@keyframes mcu-pulse { 0% { box-shadow: 0 0 0 0 rgba(242, 107, 91, .55); } 70% { box-shadow: 0 0 0 1.4rem rgba(242, 107, 91, 0); } 100% { box-shadow: 0 0 0 0 rgba(242, 107, 91, 0); } }
.mc-home .mc-story-link { margin-top: 1.75rem; }

.mc-vdialog { width: min(1100px, 92vw); max-width: none; padding: 0; border: 0; background: transparent; overflow: visible; }
.mc-vdialog::backdrop { background: rgba(8, 22, 36, .88); backdrop-filter: blur(6px); }
.mc-vdialog-frame { position: relative; aspect-ratio: 16 / 9; border-radius: 18px; overflow: hidden; background: #000; box-shadow: 0 40px 90px rgba(0, 0, 0, .5); }
.mc-vdialog-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.mc-vdialog-close {
  position: absolute; right: 0; top: -3.25rem; width: 2.75rem; height: 2.75rem; border: 2px solid #F7F1E3; border-radius: 50%;
  background: transparent; color: #F7F1E3; font-size: 1.5rem; line-height: 1; cursor: pointer; display: grid; place-items: center; padding: 0;
}
.mc-vdialog-close:hover { background: #F7F1E3; color: #0F2A43; }
.mc-vdialog[open] { animation: mcu-pop .35s cubic-bezier(.2, .7, .2, 1); }
@keyframes mcu-pop { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }

/* ---------- Landing ---------- */
.mcu .mc-btn { gap: .55rem; }
.entry-content .mcu a { text-decoration: none; }
.mcu .mcu-btn-icon { width: 1.1rem; height: 1.1rem; fill: currentColor; }
.mcu .mcu-eyebrow { font-weight: 700; font-size: .85rem; letter-spacing: .14em; text-transform: uppercase; color: #F26B5B; margin-bottom: 1rem; }

/* Apparitions au défilement (seulement si le JavaScript est actif) */
.mcu-js .mcu .mcu-reveal { opacity: 0; transform: translateY(28px); transition: opacity .9s ease var(--d, 0s), transform .9s cubic-bezier(.2, .7, .2, 1) var(--d, 0s); }
.mcu-js .mcu .mcu-reveal.is-in { opacity: 1; transform: none; }
.mcu .mcu-w { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .08em; }
.mcu .mcu-w > span { display: inline-block; }
.mcu-js .mcu [data-mcu-split] .mcu-w > span { transform: translateY(105%); transition: transform 1s cubic-bezier(.2, .7, .2, 1) calc(var(--i) * .08s + .1s); }
.mcu-js .mcu [data-mcu-split].is-in .mcu-w > span { transform: none; }

/* 1. Ouverture */
.mcu .mcu-hero { position: relative; min-height: min(calc(100svh - 110px), 880px); display: flex; align-items: flex-end; overflow: hidden; background: #0F2A43; color: #F7F1E3; }
.mcu .mcu-hero-bg { position: absolute; inset: -14% 0 0 0; will-change: transform; }
.mcu .mcu-hero-video { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.04); }
.mcu .mcu-hero-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(15, 42, 67, .82) 0%, rgba(15, 42, 67, .45) 45%, rgba(15, 42, 67, 0) 75%), linear-gradient(180deg, rgba(15, 42, 67, .25) 0%, rgba(15, 42, 67, .2) 40%, rgba(15, 42, 67, .92) 100%); }
@media (max-width: 767px) { .mcu .mcu-hero-shade { background: linear-gradient(180deg, rgba(15, 42, 67, .35) 0%, rgba(15, 42, 67, .6) 40%, rgba(15, 42, 67, .95) 100%); } }
.mcu .mcu-hero-title, .mcu .mcu-hero-lead { text-shadow: 0 2px 24px rgba(8, 22, 36, .45); }
.mcu .mcu-hero-copy { position: relative; z-index: 1; padding-block: 7rem clamp(6rem, 12vw, 9rem); }
.mcu .mcu-hero-title { font-size: clamp(2.6rem, 7vw, 5.75rem); line-height: 1; max-width: 15ch; color: #F7F1E3; }
.mcu .mcu-hero-lead { font-size: clamp(1.1rem, 2vw, 1.4rem); max-width: 42ch; color: #E6ECF1; }
.mcu .mcu-hero .mc-wave { position: absolute; left: 0; bottom: -1px; z-index: 1; }
.mcu .mcu-scroll { position: absolute; z-index: 2; left: 50%; bottom: clamp(3rem, 7vw, 5rem); width: 1.6rem; height: 2.6rem; margin-left: -.8rem; border: 2px solid rgba(247, 241, 227, .8); border-radius: 1rem; }
.mcu .mcu-scroll span { position: absolute; left: 50%; top: .45rem; width: 4px; height: 8px; margin-left: -2px; border-radius: 2px; background: #F7F1E3; animation: mcu-scroll 1.8s ease-in-out infinite; }
@keyframes mcu-scroll { 0% { opacity: 0; transform: translateY(0); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(14px); } }
@media (max-width: 767px) { .mcu .mcu-scroll { display: none; } }

/* 2. Manifeste */
.mcu .mcu-manifesto { position: relative; z-index: 2; margin-top: -2px; background: #F7F1E3; }
.mcu .mcu-manifesto-text { font-family: "Young Serif", Georgia, serif; font-size: clamp(1.9rem, 4.6vw, 3.6rem); line-height: 1.18; max-width: 22ch; margin: 0 0 clamp(3rem, 7vw, 5rem); color: #0F2A43; }
.mcu-js .mcu .mcu-mw { opacity: .14; transition: opacity .35s ease; }
.mcu-js .mcu .mcu-mw.on { opacity: 1; }
.mcu .mcu-pillars { display: grid; gap: 2rem; }
@media (min-width: 900px) { .mcu .mcu-pillars { grid-template-columns: repeat(3, 1fr); gap: 3rem; } }
.mcu .mcu-pillars li { border-top: 2px solid #0F2A43; padding-top: 1.5rem; }
.mcu .mcu-pillars svg { width: 3rem; height: 3rem; fill: none; stroke: #F26B5B; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; margin-bottom: 1rem; }
.mcu .mcu-pillars p { color: #44607A; margin: 0; }

/* 3. Film */
.mcu .mcu-film > .mc-wave, .mcu .mcu-final { margin-top: -2px; position: relative; }
.mcu .mcu-film-grid { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 900px) { .mcu .mcu-film-grid { grid-template-columns: .8fr 1.2fr; gap: 4rem; } }
.mcu .mcu-film .mc-h2 { color: #F7F1E3; }

/* 4. Rail des produits */
.mcu .mcu-range { overflow: hidden; }
.mcu .mcu-range-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1rem; margin-bottom: 2rem; }
.mcu .mcu-range-head .mc-h2, .mcu .mcu-range-head .mc-lead { margin-bottom: 0; }
.mcu .mcu-rail { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; cursor: grab; outline: none; }
.mcu .mcu-rail::-webkit-scrollbar { display: none; }
.mcu .mcu-rail.is-drag { cursor: grabbing; scroll-snap-type: none; }
.mcu .mcu-rail ul { display: flex; gap: 1.25rem; width: max-content; padding-inline: max(1.25rem, calc((100vw - 1160px) / 2)); padding-block: .5rem 1.5rem; }
.mcu .mcu-card { width: clamp(250px, 27vw, 340px); scroll-snap-align: start; }
.mcu .mcu-card a { position: relative; display: block; color: #F7F1E3; border-radius: 22px; overflow: hidden; transition: transform .45s cubic-bezier(.2, .7, .2, 1), box-shadow .45s ease; }
.mcu .mcu-card a:hover { transform: translateY(-8px) rotate(-.6deg); box-shadow: 0 26px 50px rgba(15, 42, 67, .28); }
.mcu .mcu-card-media { display: block; aspect-ratio: 4 / 5; }
.mcu .mcu-card-media .mc-img { transition: transform .8s cubic-bezier(.2, .7, .2, 1); }
.mcu .mcu-card a:hover .mc-img { transform: scale(1.07); }
.mcu .mcu-card a::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15, 42, 67, 0) 35%, rgba(15, 42, 67, .9) 100%); }
.mcu .mcu-card-num, .mcu .mcu-card-title, .mcu .mcu-card-cta { position: absolute; z-index: 1; left: 1.4rem; right: 1.4rem; }
.mcu .mcu-card-num { top: 1.1rem; font-family: "Young Serif", Georgia, serif; font-size: 2.4rem; color: transparent; -webkit-text-stroke: 1.5px #F7F1E3; }
.mcu .mcu-card-title { bottom: 3.3rem; font-family: "Young Serif", Georgia, serif; font-size: 1.55rem; line-height: 1.15; }
.mcu .mcu-card-cta { bottom: 1.3rem; font-weight: 700; font-size: .95rem; color: #F26B5B; }
.mcu .mcu-progress { height: 3px; background: rgba(15, 42, 67, .15); border-radius: 3px; overflow: hidden; }
.mcu .mcu-progress span { display: block; height: 100%; width: 20%; background: #F26B5B; border-radius: 3px; transition: width .15s linear; }

/* 5. Marchés : bandeau défilant */
.mcu .mcu-markets { padding-block: clamp(2.5rem, 6vw, 4.5rem); overflow: hidden; }
.mcu .mcu-marquee { display: flex; width: max-content; }
.mcu .mcu-marquee-track { display: flex; flex-shrink: 0; animation: mcu-marquee 32s linear infinite; }
.mcu .mcu-marquee:hover .mcu-marquee-track { animation-play-state: paused; }
.mcu .mcu-marquee span { font-family: "Young Serif", Georgia, serif; font-size: clamp(2rem, 5.5vw, 4.25rem); white-space: nowrap; padding-right: 1.5rem; color: #0F2A43; }
.mcu .mcu-marquee em { font-family: "Hanken Grotesk", system-ui, sans-serif; font-style: normal; font-weight: 700; font-size: .32em; letter-spacing: .14em; text-transform: uppercase; vertical-align: middle; }
.mcu .mcu-marquee i { font-style: normal; color: #F7F1E3; padding-left: 1.5rem; }
@keyframes mcu-marquee { to { transform: translateX(-100%); } }
.mcu .mcu-markets-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 2rem; }
.mcu .mcu-markets-cta p { margin: 0; font-weight: 600; font-size: 1.15rem; }

/* 6. Embarquement */
/* La vague du pied de page se pose sur le bleu de la dernière section. */
body:has(.mcu .mcu-final) { background-color: #0F2A43; }
.mcu .mcu-final { background: radial-gradient(60rem 30rem at 85% 0%, rgba(242, 107, 91, .22), transparent 60%), radial-gradient(50rem 30rem at 0% 100%, rgba(29, 70, 99, .9), transparent 60%), #0F2A43; }
.mcu .mcu-final-inner { text-align: center; }
.mcu .mcu-final-inner p { margin-inline: auto; }
.mcu .mcu-final-title { color: #F7F1E3; margin-inline: auto; }
.mcu .mcu-final .mc-actions { justify-content: center; }

@media (prefers-reduced-motion: reduce) {
  .mcu .mcu-marquee { width: auto; flex-wrap: wrap; padding-inline: 1.25rem; }
  .mcu .mcu-marquee-track { animation: none; flex-wrap: wrap; }
  .mcu .mcu-marquee-track + .mcu-marquee-track { display: none; }
  .mc-home .mc-video-play, .mcu .mcu-scroll span { animation: none; }
}

/* ---------- Apparitions animées (accueil) ---------- */
.mcu-js .mc-anim { opacity: 0; transition: opacity .8s ease var(--d, 0s), transform 1s cubic-bezier(.2, .7, .2, 1) var(--d, 0s); will-change: opacity, transform; }
.mcu-js .mc-anim--up { transform: translateY(34px); }
.mcu-js .mc-anim--left { transform: translateX(-46px); }
.mcu-js .mc-anim--right { transform: translateX(46px); }
.mcu-js .mc-anim--zoom { transform: scale(.82) rotate(-5deg); }
.mcu-js .mc-anim.is-in { opacity: 1; transform: none; }
.mc-anim-off .mc-anim { opacity: 1 !important; transform: none !important; }
/* Les cartes produits gardent leur effet au survol une fois apparues. */
.mcu-js .mc-pcard.mc-anim.is-in:hover { transform: translateY(-6px); }

/* Photo de fond du haut de page : zoom très lent et continu. */
.mc-home .mc-hero-bg .mc-img { animation: mc-kenburns 24s ease-in-out infinite alternate; }
@keyframes mc-kenburns { from { transform: scale(1.06); } to { transform: scale(1.18) translate(-2%, -2%); } }
.mc-home .mc-story-full .mc-story-bg { will-change: transform; transform: scale(1.12); }

/* ---------- Landing : compléments ---------- */
.mcu-js .mcu .mcu-pillars svg path { stroke-dasharray: 220; stroke-dashoffset: 220; transition: stroke-dashoffset 1.6s cubic-bezier(.2, .7, .2, 1) calc(var(--d, 0s) + .2s); }
.mcu-js .mcu .mcu-pillars li.is-in svg path { stroke-dashoffset: 0; }
.mcu-js .mcu .mcu-film-media.mcu-reveal { opacity: 1; transform: none; }
.mcu-js .mcu .mcu-film-media.mcu-reveal .mc-video { clip-path: inset(0 0 100% 0 round 24px); transition: clip-path 1.3s cubic-bezier(.7, 0, .2, 1) .15s; }
.mcu-js .mcu .mcu-film-media.mcu-reveal.is-in .mc-video { clip-path: inset(0 0 0 0 round 24px); }

@media (prefers-reduced-motion: reduce) {
  .mcu-js .mc-anim { opacity: 1 !important; transform: none !important; transition: none !important; }
  .mc-home .mc-hero-bg .mc-img { animation: none; }
  .mcu-js .mcu .mcu-pillars svg path { stroke-dashoffset: 0; transition: none; }
  .mcu-js .mcu .mcu-film-media.mcu-reveal .mc-video { clip-path: none; }
}

.mcu .mcu-film-sub { display: block; margin-top: .45em; font-size: .55em; line-height: 1.25; color: #F26B5B; }
.mc-home .mc-story-play-label small { max-width: 18rem; }