/* Généré par tools/build-public.mjs (CSS_MIROIRS) : NE PAS MODIFIER À LA MAIN. */
.miroir-offre {--line: rgba(28,22,17,.1);
    --fs-2xs: .75rem;
    --fs-xs: .875rem;
    --fs-s: 1rem;
    --fs-m: 1.125rem;
    --fs-l: 1.3rem;
    --fs-h3: clamp(1.35rem, 1.9vw, 1.7rem);
    --fs-h2: clamp(2rem, 4vw, 3rem);
    --fs-display: clamp(2.5rem, 5.6vw, 4.5rem);
    --fs-num: clamp(3.2rem, 7vw, 5.4rem);
    --r-s: 12px; --r-m: 20px; --r-l: 32px; --r-pill: 999px;
    --sh-1: 0 0 0 1px rgba(28,22,17,.06), 0 1px 2px rgba(28,22,17,.05);
    --sh-2: 0 10px 26px -14px rgba(28,22,17,.4);
    --sh-3: 0 40px 80px -40px rgba(28,22,17,.35);
    --sp-1: 8px; --sp-2: 16px; --sp-3: 24px; --sp-4: 32px; --sp-5: 48px;
    --sec: clamp(96px, 12vw, 160px);
    --gap-arg: clamp(96px, 10vw, 140px);
    --btn-h: 52px; --btn-h-s: 40px;
    --ease: cubic-bezier(.2,.8,.2,1);
    --ease-move: cubic-bezier(.3,.7,.2,1);}
.miroir-offre .wrap { max-width: 1060px; margin: 0 auto; padding: 0 24px; }
.miroir-offre .wrap--wide { max-width: 1180px; }
.miroir-offre .sec { padding: var(--sec) 0; }
.miroir-offre .sec--cream { background: var(--cream); }
.miroir-offre .sec--white { background: #fff; }
.miroir-offre .sec--sand { background: var(--cream-dark); }
.miroir-offre .sec--dark { background: var(--espresso); color: var(--cream); }
.miroir-offre .sec--dark .pv-t { color: var(--cream); }
.miroir-offre .sec--dark .pv-d { color: rgba(250,248,245,.72); }
.miroir-offre .sec--dark .pv-num { background: rgba(250,248,245,.06); box-shadow: inset 0 0 0 1px rgba(233,169,130,.45); }
.miroir-offre .sec--dark .pv-num span { color: #E9A982; }
.miroir-offre .sec--dark .vid { box-shadow: var(--sh-3); }
.miroir-offre .sec--center { text-align: center; }
.miroir-offre .of-eyebrow {
    text-transform: uppercase; letter-spacing: .13em; font-size: var(--fs-2xs); font-weight: 600; color: var(--sienna);
}
.miroir-offre .of-eyebrow { display: block; margin-bottom: 14px; }
.miroir-offre .h2 { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-h2); line-height: 1.1; letter-spacing: -.015em; margin: 0; }
.miroir-offre .tex { position: relative; isolation: isolate; }
.miroir-offre .tex::before {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .5;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .42 0 0 0 0 .33 0 0 0 0 .24 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.miroir-offre .sec--sand.tex { background-color: #EFE7DD; }
.miroir-offre .vid { position: relative; width: min(340px, 78vw); aspect-ratio: 9 / 16; margin: 0 auto; border-radius: var(--r-l); overflow: hidden; background: var(--espresso); box-shadow: var(--sh-3); }
.miroir-offre .vid-face { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; padding: 0; border: 0; cursor: pointer; background: none; }
.miroir-offre .vid-face img, .miroir-offre .vid-loop { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s var(--ease); }
.miroir-offre .vid > .vid-loop { position: absolute; inset: 0; }
.miroir-offre .vid-loop { background: var(--espresso); }
.miroir-offre .vid-face::after { content: ""; position: absolute; inset: 0; background: rgba(28,22,17,.18); transition: background-color .3s; }
.miroir-offre .vid-play { position: absolute; left: 50%; top: 50%; z-index: 1; width: 72px; height: 72px; margin: -36px 0 0 -36px; border-radius: 50%; display: grid; place-items: center; background: rgba(250,248,245,.9); color: var(--espresso); backdrop-filter: blur(10px); transition: transform .3s var(--ease); }
.miroir-offre .vid-play svg { width: 28px; height: 28px; margin-left: 3px; }
@media (hover: hover) {
.miroir-offre .vid-face:hover .vid-play { transform: scale(1.06); }
.miroir-offre .vid-face:hover::after { background: rgba(28,22,17,.08); }
}
.miroir-offre .vid-face:focus-visible { outline: 3px solid rgba(186,74,44,.5); outline-offset: -3px; }
.miroir-offre .vid iframe, .miroir-offre .vid-full { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.miroir-offre .vid-full { object-fit: cover; background: var(--espresso); display: block; }
.miroir-offre .vid-face[hidden] { display: none; }
.miroir-offre .vid-ui { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 34px 10px 8px;
    background: linear-gradient(to top, rgba(28,22,17,.88), rgba(28,22,17,.5) 55%, rgba(28,22,17,0));
    opacity: 1; transition: opacity .25s var(--ease); }
.miroir-offre .vid--panne .vid-ui { display: none; }
.miroir-offre .vid-barre { display: block; padding: 9px 2px; cursor: pointer; touch-action: none; -webkit-tap-highlight-color: transparent; }
.miroir-offre .vid-piste { position: relative; display: block; height: 5px; border-radius: 3px; background: rgba(250,248,245,.3); }
.miroir-offre .vid-chargee, .miroir-offre .vid-jouee { position: absolute; left: 0; top: 0; height: 100%; width: 0; border-radius: 3px; }
.miroir-offre .vid-chargee { background: rgba(250,248,245,.38); }
.miroir-offre .vid-jouee { background: var(--terra-light); }
.miroir-offre .vid-pouce { position: absolute; top: 50%; left: 0; width: 13px; height: 13px; margin: -6.5px 0 0 -6.5px;
    border-radius: 50%; background: var(--cream); box-shadow: 0 1px 4px rgba(0,0,0,.45);
    transition: transform .18s var(--ease); }
.miroir-offre .vid--glisse .vid-pouce, .miroir-offre .vid-barre:focus-visible .vid-pouce { transform: scale(1.35); }
.miroir-offre .vid-barre:focus-visible { outline: 2px solid var(--cream); outline-offset: 3px; border-radius: 4px; }
.miroir-offre .vid-rang { display: flex; align-items: center; gap: 2px; }
.miroir-offre .vid-espace { flex: 1; }
.miroir-offre .vid-btn { width: 44px; height: 44px; flex: 0 0 44px; display: grid; place-items: center; padding: 0;
    border: 0; border-radius: 10px; background: none; color: var(--cream); cursor: pointer;
    -webkit-tap-highlight-color: transparent; transition: background-color .2s, transform .2s var(--ease); }
.miroir-offre .vid-btn svg { width: 21px; height: 21px; filter: drop-shadow(0 1px 2px rgba(0,0,0,.5)); }
@media (hover: hover) {
.miroir-offre .vid-btn:hover { background: rgba(250,248,245,.16); }
}
.miroir-offre .vid-btn:active { transform: scale(.92); }
.miroir-offre .vid-btn:focus-visible { outline: 2px solid var(--cream); outline-offset: -2px; }
.miroir-offre .vid-temps { padding: 0 4px; color: var(--cream); font-size: 12px; font-variant-numeric: tabular-nums;
    letter-spacing: .01em; text-shadow: 0 1px 3px rgba(0,0,0,.6); white-space: nowrap; }
.miroir-offre .vid-attente { position: absolute; left: 50%; top: 50%; z-index: 3; width: 34px; height: 34px;
    margin: -17px 0 0 -17px; border-radius: 50%; border: 2px solid rgba(250,248,245,.3);
    border-top-color: var(--cream); opacity: 0; pointer-events: none; }
.miroir-offre .vid--charge .vid-attente { opacity: 1; animation: vid-tourne .8s linear infinite; }
.miroir-offre .vid--plein { width: 100%; height: 100%; border-radius: 0; background: #000; }
.miroir-offre .vid--plein .vid-full { object-fit: contain; }
.miroir-offre .vid--plein .vid-ui { padding: 40px 20px 18px; }
.miroir-offre .vid--panne::after { content: "La vidéo n'a pas pu se charger."; position: absolute; inset: auto 16px 16px;
    z-index: 3; color: var(--cream); font-size: var(--fs-xs); text-align: center; }
@media (prefers-reduced-motion: reduce) {
.miroir-offre .vid-btn, .miroir-offre .vid-pouce { transition: none; }
.miroir-offre .vid--charge .vid-attente { animation-duration: 1.6s; }
}
.miroir-offre .offer-sec > .wrap { position: relative; z-index: 2; }
.miroir-offre .tm { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 320px); gap: clamp(28px, 5vw, 72px); align-items: center; max-width: 960px; margin: var(--sp-5) auto 0; }
.miroir-offre .tm-msg { margin: 0; }
.miroir-offre .tm-msg img { width: 100%; height: auto; display: block; border-radius: var(--r-m); box-shadow: var(--sh-3); }
.miroir-offre .tm-vid { width: 100%; }
.miroir-offre .tm-who { display: flex; align-items: flex-start; gap: 10px; margin: 16px 0 0 6px; line-height: 1.35; }
.miroir-offre .tm-fleche { flex: none; width: 30px; height: 30px; margin-top: -6px; fill: none; stroke: var(--sienna); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.miroir-offre .tm-who b { display: block; font-size: var(--fs-m); color: var(--espresso); }
.miroir-offre .tm-who span { font-size: var(--fs-xs); color: var(--zinc); }
@media (max-width: 767px) {
.miroir-offre .tm { grid-template-columns: 1fr; }
.miroir-offre .tm-side { width: min(300px, 78vw); margin: 0 auto; }
}
@keyframes vid-tourne { to { transform: rotate(360deg); } }