/* Etoilez-moi · calendrier des événements. Rendu validé sur la maquette du 9 octobre 2026 (version 8). */
.etz-cal, .etz-cal * { box-sizing: border-box; }

/* 1. Barre du haut : hauteur fixe, une seule ligne, centrée (40 px ordinateur, 36 px téléphone) */
.etz-cal-barre { position: relative; z-index: 50; display: flex; justify-content: center; align-items: center; gap: 14px; height: 40px; padding: 0 16px; background: #171C2F; color: #fff; font: 400 14px/40px Outfit, sans-serif; letter-spacing: .01em; text-align: center; white-space: nowrap; overflow: hidden; }
.etz-cal-barre .etz-cal-texte { min-width: 0; overflow: hidden; text-overflow: ellipsis; } /* si la place manque, le texte se raccourcit, jamais le lien */
.etz-cal-barre b { color: #FFA753; font-weight: 500; }
.etz-cal-barre a { flex: none; color: #fff; text-decoration: underline; text-underline-offset: 3px; display: inline-block; min-width: 44px; padding: 0 12px; margin: 0 -12px; text-align: center; }
.etz-cal-barre a:focus-visible { outline: 2px solid #FFA753; outline-offset: 2px; }
.etz-cal-barre .court { display: none; }
/* L'en-tête du site est fixé en haut de l'écran : la barre le décale de sa hauteur, puis il remonte quand on fait défiler
   (calendrier.js met --etz-cal-decal à jour). La page garde ainsi exactement son aspect habituel sous la barre. */
body.etz-cal-a-barre { --etz-cal-decal: 40px; }
html body.etz-cal-a-barre .rey-siteHeader.header-pos--absolute,
html body.etz-cal-a-barre .rey-siteHeader.header-pos--fixed { --hdr-t: calc(var(--admin-bar, 0px) + var(--etz-cal-decal, 0px)) !important; }

/* 2. Accueil : la scène de l'événement (grand événement : à la place des 3 arguments ; important : sous les 3 arguments).
   Ordinateur : la photo occupe la droite et se fond dans un ivoire doré ; le titre est posé sur l'ivoire (jamais sur un visage).
   Téléphone : la photo en haut, qui se fond vers le bas, puis le titre. Le halo éclaire le certificat ; la neige passe devant la photo. */
.etz-cal-cache, .elementor-element.etz-cal-cache.etz-cal-cache, body .e-con.etz-cal-cache.etz-cal-cache { display: none !important; } /* plus fort que les règles d identifiant de l accueil du 21/10 (display: block !important) */
.etz-cal-scene { position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: minmax(0, 42fr) minmax(0, 58fr); align-items: center; min-height: clamp(560px, 47vw, 780px);
	background: radial-gradient(60% 85% at 34% 52%, #FFF0D8 0, rgb(255 240 216 / 0) 62%), linear-gradient(180deg, #FAF7F8 0, #F7F0E6 50%, #FAF7F8 100%); }
.etz-cal-scene::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 90px; z-index: 1; pointer-events: none; background: linear-gradient(0deg, #FAF7F8, rgb(250 247 248 / 0)); }
.etz-cal-scene-photo { position: absolute; top: 0; right: 0; bottom: 0; left: 33%; z-index: 0;
	-webkit-mask-image: linear-gradient(90deg, transparent 0, rgb(0 0 0 / .55) 12%, #000 27%); mask-image: linear-gradient(90deg, transparent 0, rgb(0 0 0 / .55) 12%, #000 27%); }
.etz-cal-scene-photo picture { display: contents; } /* image propre au téléphone (<picture>) : même mise en page que l'image seule */
.etz-cal-scene .etz-cal-scene-photo img { display: block; width: 100%; height: 100%; max-width: none; max-height: none; object-fit: cover; object-position: var(--cadrage, 50% 50%); filter: saturate(1.05) brightness(1.04); }
/* 25/10/2026 : sélecteur renforcé. Sur le site, « .elementor img { height: auto } » est chargé APRÈS ce fichier et l'emportait :
   l'image gardait sa hauteur naturelle (vide de 180 px à 768 px, cadrage ignoré sur ordinateur, bas du certificat de Yasmine coupé à 1 440 px). */
@keyframes etz-halo { 0%, 100% { opacity: .78; } 50% { opacity: 1; } }
.etz-cal-scene-halo { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen; animation: etz-halo 5.5s ease-in-out infinite;
	background: radial-gradient(17% 25% at var(--lumiere, 50% 50%), rgb(255 250 236 / .42), rgb(255 238 205 / .16) 55%, rgb(255 238 205 / 0) 100%), radial-gradient(45% 55% at var(--lumiere, 50% 50%), rgb(255 226 178 / .22), rgb(255 226 178 / 0) 70%); }
.etz-cal-scene-photo .etz-cal-neige { position: absolute; inset: 0; z-index: 1; }
.etz-cal-scene-vague { position: absolute; top: -1px; left: 0; right: 0; z-index: 3; line-height: 0; pointer-events: none; }
.etz-cal-scene-vague svg { display: block; width: 100%; height: 100%; } /* le dessin d'origine, sans la rotation d'Elementor : c'est le reflet exact de la vague du bas */
.etz-cal-scene-texte { position: relative; z-index: 2; grid-column: 1; display: grid; gap: 18px; justify-items: start; padding: 64px clamp(16px, 2.5vw, 36px) 64px clamp(24px, 7vw, 128px); }
.etz-cal .etz-cal-scene-sur { margin: 0 !important; font: 500 13px/1.3 Outfit, sans-serif !important; letter-spacing: .26em !important; text-transform: uppercase !important; color: #8F5217 !important; }
.etz-cal .etz-cal-scene-sur::before { content: "\2726"; margin-right: 10px; letter-spacing: 0; color: #E3A35A; }
.etz-cal .etz-cal-scene-titre { margin: 0 !important; font: 200 clamp(40px, 4.3vw, 66px)/1.04 Outfit, sans-serif !important; letter-spacing: -.012em !important; text-transform: none !important; color: #171C2F !important; text-wrap: balance; }
.etz-cal .etz-cal-scene-titre b { display: block; font-weight: 700 !important; }
.etz-cal .etz-cal-scene-info { margin: 0 !important; max-width: 34ch; font: 400 18px/1.5 Outfit, sans-serif !important; color: #4A4A55 !important; }
.etz-cal-btn { display: inline-block; margin-top: 6px; font: 700 15px Outfit, sans-serif; color: #171C2F !important; background: #FFA753; border-radius: 999px; padding: 16px 32px; text-decoration: none !important; box-shadow: 0 12px 28px rgb(255 167 83 / .34); transition: background .2s, transform .2s; }
.etz-cal-btn:hover { background: #FFB96F; transform: translateY(-1px); }
.etz-cal-btn:focus-visible { outline: 3px solid #171C2F; outline-offset: 3px; }
.etz-cal-neige { position: absolute; left: 0; top: 0; z-index: 30; pointer-events: none; }
@media (max-width: 899px) {
	.etz-cal-scene { display: block; min-height: 0; background: linear-gradient(180deg, #FAF7F8 0, #F7F0E6 60%, #FAF7F8 100%); }
	.etz-cal-scene::after { display: none; }
	.etz-cal-scene-photo { position: relative; left: auto; aspect-ratio: 1 / 1; max-width: 100%;
		-webkit-mask-image: linear-gradient(180deg, #000 70%, rgb(0 0 0 / .5) 86%, transparent 100%); mask-image: linear-gradient(180deg, #000 70%, rgb(0 0 0 / .5) 86%, transparent 100%); }
	.etz-cal-scene .etz-cal-scene-photo img { object-position: var(--cadrage-tel, var(--cadrage, 50% 50%)); }
	.etz-cal-scene-halo { background: radial-gradient(22% 22% at var(--lumiere-tel, 50% 50%), rgb(255 250 236 / .42), rgb(255 238 205 / .16) 55%, rgb(255 238 205 / 0) 100%), radial-gradient(50% 50% at var(--lumiere-tel, 50% 50%), rgb(255 226 178 / .22), rgb(255 226 178 / 0) 70%); } /* repli des navigateurs sans var() dans les couleurs */
	.etz-cal-scene-halo { background: radial-gradient(22% 22% at var(--lumiere-tel, 50% 50%), rgb(255 250 236 / var(--halo-tel, .42)), rgb(255 238 205 / calc(var(--halo-tel, .42) * .38)) 55%, rgb(255 238 205 / 0) 100%), radial-gradient(50% 50% at var(--lumiere-tel, 50% 50%), rgb(255 226 178 / .22), rgb(255 226 178 / 0) 70%); }
	.etz-cal-scene-texte { margin-top: -12px; gap: 14px; padding: 0 24px 46px; }
	.etz-cal .etz-cal-scene-titre { font-size: 37px !important; }
	.etz-cal .etz-cal-scene-info { font-size: 16.5px !important; }
}
@media (max-width: 599px) { /* scène avec image propre au téléphone (4:5) : tous les visages sous la vague, fondu plus bas */
	.etz-cal-scene--tel-portrait .etz-cal-scene-photo { aspect-ratio: 4 / 5; -webkit-mask-image: linear-gradient(180deg, #000 82%, rgb(0 0 0 / .5) 92%, transparent 100%); mask-image: linear-gradient(180deg, #000 82%, rgb(0 0 0 / .5) 92%, transparent 100%); }
}
@media (min-width: 1200px) { .etz-cal-scene::after { height: 40px; } } /* grand écran : fondu du bas plus court, le certificat reste entier au-dessus */
@media (min-width: 1600px) { .etz-cal-scene-photo { left: max(33%, calc(100% - 1100px)); } } /* très grand écran : la photo ne s'agrandit plus, le certificat reste entier */
@media (prefers-reduced-motion: reduce) { .etz-cal-scene-halo { animation: none; } }

/* 3. Pages univers : la carte de l'événement en premier, badge, bouton de l'événement illuminé */
.etz-cal-carte-bas { --justify-content: flex-end; justify-content: flex-end !important; padding-bottom: 18px !important; } /* carte Noël : titre en bas, le certificat visible en haut */
.etz-cal-sans-video .elementor-background-video-container { display: none !important; } /* option « cacher_video_carte » de programme.json */
.etz-cal-badge { position: absolute; top: 16px; left: 16px; z-index: 5; font: 700 13px Outfit, sans-serif; color: #171C2F; background: #FFA753; border-radius: 999px; padding: 7px 14px; box-shadow: 0 6px 18px rgba(0,0,0,.25); }
.etz-cal-bouton-allume, .etz-cal-bouton-allume * { background: #FFA753 !important; border-color: #FFA753 !important; color: #171C2F !important; }

/* Reflet des tuiles d'événements de La Boutique (page Amour), à l'identique : une bande de lumière chaude traverse chaque carte,
   l'une après l'autre (décalage de 1,85 s), cycle de 7,4 s, dès que la grille est à l'écran. Rien ne bouge si le visiteur l'a demandé. */
@keyframes etz-luz { 0% { opacity: 0; transform: translateX(-55%); } 3% { opacity: 1; } 22% { opacity: 1; } 25% { opacity: 0; transform: translateX(55%); } 100% { opacity: 0; transform: translateX(55%); } }
.etz-cal-lumiere { position: relative; overflow: hidden; }
.etz-cal-luz { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(105deg, #fff0 28%, rgb(255 240 215 / .16) 42%, rgb(255 244 224 / .46) 50%, rgb(255 240 215 / .16) 58%, #fff0 72%); opacity: 0; transform: translateX(-115%); }
.etz-cal-luz-on .etz-cal-luz { animation: etz-luz 7.4s linear infinite; animation-delay: var(--etz-delai, 0s); }
.etz-cal-fige .etz-cal-lumiere:first-child .etz-cal-luz { animation: none; opacity: 1; transform: translateX(0); } /* capture : la bande arrêtée au milieu de la première carte */
@media (prefers-reduced-motion: reduce) { .etz-cal-luz-on .etz-cal-luz { animation: none; } }

/* 4. Page de l'événement : pastille dans l'image du haut, date de réception sous chaque coffret */
.etz-cal-centre { position: absolute; left: 0; right: 0; bottom: clamp(96px, 13vw, 150px); z-index: 3; display: flex; justify-content: center; margin: 0; padding: 0 12px; pointer-events: none; }
.etz-cal-pastille { display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px 8px 8px; border-radius: 999px; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.45); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: #fff; font: 500 14px/1.3 Outfit, sans-serif; text-shadow: 0 1px 6px rgba(0,0,0,.35); }
.etz-cal-pastille .court { display: none; }
.etz-cal-j { flex: none; background: #FFA753; color: #171C2F; border-radius: 999px; padding: 5px 10px; font: 700 12px Outfit, sans-serif; letter-spacing: .04em; text-shadow: none; }
.etz-cal-ancre { display: block; height: 0; scroll-margin-top: 110px; }
.etz-cal-legendes { display: grid; margin-top: 14px; }
.etz-cal-legendes p, p.etz-cal-legende { margin: 0; font: 500 15px/1.4 Outfit, sans-serif; color: #171C2F; text-align: center; }
p.etz-cal-legende { margin: 10px 0 6px; }
.etz-cal-legendes p.retard, p.etz-cal-legende.retard { color: #6B665F; font-weight: 400; }
.etz-cal-pilule { display: inline-block; margin-right: 8px; padding: 4px 11px; border-radius: 999px; background: #FFA753; color: #171C2F; font: 700 12.5px/1.3 Outfit, sans-serif; vertical-align: 1px; }
.etz-cal-vedette { outline: 3px solid #FFA753 !important; outline-offset: 4px; }

@media (max-width: 767px) {
	body.etz-cal-a-barre { --etz-cal-decal: 44px; }
	.etz-cal-barre { height: 44px !important; line-height: 44px !important; padding: 0 10px !important; font-size: 12.5px !important; }
	.etz-cal-barre { gap: 8px; }
	.etz-cal-barre .long, .etz-cal-pastille .long { display: none; }
	.etz-cal-barre .court, .etz-cal-pastille .court { display: inline; }
}
/* Très petit écran ou texte très agrandi : la barre passe à la ligne au lieu de couper (le décalage de l'en-tête suit sa vraie hauteur) */
@media (max-width: 340px) {
	.etz-cal-barre { height: auto !important; min-height: 44px; line-height: 1.3 !important; padding: 6px 10px !important; white-space: normal; flex-wrap: wrap; overflow: visible; }
	.etz-cal-barre .etz-cal-texte { overflow: visible; text-overflow: clip; }
}

/* PROPOSITION 23/10 : 341-374 px (Galaxy 360 px) : la barre ne coupe plus le texte avec « … » */
@media (min-width: 341px) and (max-width: 374px) {
	.etz-cal-barre { padding: 0 8px !important; gap: 4px; font-size: 12px !important; letter-spacing: 0; }
}