/* — Passe 2 : univers des pages par usage, ornements et fins de page — */

/* ornements : tailles et couleurs par endroit */
.orn-bord svg { width: 100%; height: auto; display: block; }
.orn-bord-clair { color: var(--chaux); opacity: 0.16; }
.orn-bord-latanier { color: var(--terre); opacity: 0.22; width: min(56vw, 360px); }
.fond-sable .orn-bord, .fond-route .orn-bord { color: var(--terre); }
.fond-ecume .orn-bord { color: var(--lagon-fonce); }

/* le haut des pages par usage */
.fond-ciel { background: var(--grain), radial-gradient(ellipse at 75% 20%, rgba(243, 221, 166, 0.95), transparent 60%), linear-gradient(180deg, #F5F2EC 0%, #F6EAD0 65%, #F1DDB0 100%); overflow: hidden; }
.fond-paperboard { background: var(--grain), var(--quadrillage), linear-gradient(180deg, #FBFAF7, #F2EFE8); background-size: auto, 24px 24px, 24px 24px, auto; overflow: hidden; }
.heros-arche { position: absolute; z-index: 2; pointer-events: none; color: #fff; opacity: 0.75; left: 18px; right: 18px; top: 14px; height: 46%; }
.heros-arche .orn { width: 100%; height: 100%; }
@media (min-width: 761px) {
  .heros-arche { color: var(--terre); opacity: 0.45; left: var(--gouttiere); right: auto; width: 48%; top: 8%; height: 80%; z-index: 0; }
}
.heros-fanions { position: absolute; z-index: 4; left: 0; right: 0; top: 2px; height: 74px; pointer-events: none; }
.heros-fanions .orn { width: 100%; height: 100%; }
@media (min-width: 761px) { .heros-fanions { height: 120px; top: -6px; } }
.fanion { transform-box: fill-box; transform-origin: 50% 0; animation: fanion 2.6s ease-in-out infinite alternate; animation-play-state: paused; }
@keyframes fanion { from { transform: rotate(-7deg); } to { transform: rotate(7deg); } }
.ruban-terre { background: var(--terre); }
.ruban-terre .ruban-piste svg { color: var(--chaux); }

/* mariages : la journée, un fond par heure */
.deroule { padding-left: 26px; }
.deroule-fil { background: rgba(18, 24, 23, 0.12); }
.deroule-fil i { background: var(--terre); }
.moment { padding: 22px 18px; border-radius: 28px; overflow: hidden; }
.moment::before { left: -24px; top: 30px; background: var(--chaux); border-color: var(--terre); }
.moment p { color: rgba(18, 24, 23, 0.78); }
.moment .lieu { border-color: rgba(18, 24, 23, 0.2); }
.moment-quand { color: var(--terre); }
.moment-ceremonie { background: var(--grain), radial-gradient(ellipse at 100% 0%, rgba(255, 255, 255, 0.7), transparent 55%), var(--ecume); }
.moment-cocktail { background: var(--grain), radial-gradient(ellipse at 90% 100%, rgba(232, 181, 74, 0.55), transparent 60%), linear-gradient(160deg, #F7EBD0, #F0D39A); }
.moment-soir { position: relative; background: var(--grain-clair), radial-gradient(ellipse at 50% 0%, rgba(246, 210, 122, 0.18), transparent 60%), var(--basalte); color: var(--chaux); padding-top: 70px; }
.moment-soir p { color: rgba(245, 242, 236, 0.8); }
.moment-soir .lieu { border-color: var(--trait-clair); }
.moment-soir .moment-quand { color: #F6D27A; }
.moment-soir .cadre { background: var(--basalte-2); border-color: var(--trait-clair); }
.moment-lendemain { background: var(--grain), linear-gradient(180deg, #FDFCF8, #E9F1EE); }
.moment-guirlande { position: absolute; left: 0; right: 0; top: 0; height: 70px; color: rgba(245, 242, 236, 0.5); pointer-events: none; }
.moment-guirlande .orn { width: 100%; height: 100%; }
.ampoule circle { fill: #F6D27A; }
.ampoule { animation: scintille 2.8s ease-in-out infinite alternate; animation-play-state: paused; }
@keyframes scintille { from { opacity: 0.35; } to { opacity: 1; } }
.moment-petit { max-width: 360px; }
@media (min-width: 900px) {
  .deroule { padding-left: 0; }
  .moment { padding: 44px; }
  .moment-soir { padding-top: 96px; }
  .moment-guirlande { height: 96px; }
  .moment-petit { justify-self: center; width: 80%; }
}

/* prestations dessinées */
.prestations-dessins .prestation { background: var(--grain), rgba(255, 255, 255, 0.72); }
.dessin-presta { width: 84px; height: 70px; color: var(--lagon-fonce); transition: transform 0.5s var(--ease); }
@media (hover: hover) { .prestation:hover .dessin-presta { transform: rotate(-4deg) scale(1.06); } }

/* fin de page : les boutons du coucher de soleil */
.couchant .titre-section { max-width: 18ch; }
.couchant-boutons { margin-top: 26px; display: grid; gap: 10px; }
.couchant-boutons .bouton { width: 100%; }
@media (min-width: 900px) { .couchant-boutons { display: flex; } .couchant-boutons .bouton { width: auto; } }
.voisines-section { padding-block: 48px; }

/* entreprises */
.format-photo { grid-column: 1 / -1; margin-top: 14px; }
.format-photo .cadre-image { aspect-ratio: 16 / 9; }
@media (min-width: 900px) { .format-photo { display: none; } }
@media (max-width: 899px) { .formats-photo { display: none; } }
.equipe-scene { position: relative; margin-top: 36px; }
.equipe-scene .cadre-image { aspect-ratio: 16 / 10; }
.etiquettes-equipe { list-style: none; padding: 0; margin: -22px 0 0; position: relative; z-index: 2; display: flex; flex-wrap: wrap; gap: 10px 8px; justify-content: center; }
.etiquettes-equipe .autocollant { display: inline-flex; align-items: center; gap: 8px; --ac-fond: var(--papier); --ac-texte: var(--basalte); --ac-bord: var(--papier); --ac-taille: 15.5px; font-weight: 650; }
.etiquettes-equipe .autocollant:nth-child(3n+2) { --ac-fond: var(--terre); --ac-texte: #fff; --ac-bord: #fff; }
.etiquettes-equipe .autocollant:nth-child(3n) { --ac-fond: var(--lagon-fonce); --ac-texte: #fff; --ac-bord: #fff; }
.etiquettes-equipe svg { width: 20px; height: 20px; }
@media (min-width: 1100px) {
  .equipe-scene { max-width: 1000px; margin-inline: auto; }
  .etiquettes-equipe { position: absolute; inset: 0; margin: 0; display: block; pointer-events: none; }
  .etiquettes-equipe li { position: absolute; pointer-events: auto; }
  .etiquettes-equipe li:nth-child(1) { left: -70px; top: 8%; }
  .etiquettes-equipe li:nth-child(2) { right: -60px; top: 6%; }
  .etiquettes-equipe li:nth-child(3) { left: -90px; top: 34%; }
  .etiquettes-equipe li:nth-child(4) { right: -40px; top: 32%; }
  .etiquettes-equipe li:nth-child(5) { left: -80px; top: 60%; }
  .etiquettes-equipe li:nth-child(6) { right: -80px; top: 58%; }
  .etiquettes-equipe li:nth-child(7) { left: 18%; bottom: -20px; }
  .etiquettes-equipe li:nth-child(8) { right: 20%; bottom: -24px; }
}

/* anniversaires : les cartes accrochées à la ficelle */
.fond-confettis-ecume { background: var(--grain), var(--confettis), radial-gradient(ellipse at 0% 0%, rgba(255, 255, 255, 0.7), transparent 55%), var(--ecume); }
.ficelle-zone { position: relative; margin-top: 30px; }
.ficelle-rail {
  display: flex; gap: 22px; overflow-x: auto; margin: 0 calc(var(--gouttiere) * -1); padding: 44px var(--gouttiere) 28px;
  scroll-snap-type: x proximity; touch-action: pan-x pan-y; overscroll-behavior-x: contain; scrollbar-width: none; scroll-padding-inline: var(--gouttiere);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='302' height='40'%3E%3Cpath d='M0 8Q151 34 302 8' fill='none' stroke='%238C5A34' stroke-width='1.6'/%3E%3C/svg%3E") repeat-x left 4px top 12px / 302px 40px local;
}
.ficelle-rail::-webkit-scrollbar { display: none; }
.carte-anniv { position: relative; flex: 0 0 280px; scroll-snap-align: start; margin: 0; padding: 30px 22px 22px; border-radius: 6px; background: var(--papier); box-shadow: 0 16px 28px -20px rgba(18, 24, 23, 0.55); rotate: var(--angle); transform-origin: 50% 0; transition: rotate 0.5s var(--ease), translate 0.5s var(--ease); align-self: start; }
.carte-anniv blockquote { margin: 0; font-size: 16.5px; line-height: 1.5; }
.carte-anniv figcaption { margin-top: 14px; font-weight: 650; font-size: 15.5px; display: flex; gap: 8px; align-items: center; }
.carte-anniv.c0 { background: var(--grain), #FFFDF8; border-top: 8px solid var(--terre); }
.carte-anniv.c1 { background: var(--grain), var(--ecume); border-top: 8px solid var(--lagon-fonce); }
.carte-anniv.c2 { background: var(--grain), #FBEFD3; border-top: 8px solid var(--soleil); }
.carte-anniv.c3 { background: var(--grain), #F8E3D8; border-top: 8px solid var(--terre-clair); }
.carte-anniv:first-child blockquote { font-family: var(--titre); font-size: 21px; line-height: 1.3; }
.pince { position: absolute; left: 50%; top: -22px; width: 12px; height: 34px; margin-left: -6px; border-radius: 3px; background: linear-gradient(90deg, #C99A62, #A9763F); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25); }
.pince::after { content: ""; position: absolute; left: 1px; right: 1px; top: 12px; height: 4px; border-radius: 2px; background: #8F8F8F; }
@media (hover: hover) { .carte-anniv:hover { rotate: 0deg; translate: 0 6px; } }
.rail-fleches { display: none; }
@media (min-width: 900px) {
  .rail-fleches { display: flex; gap: 8px; justify-content: flex-end; }
  .rail-fleches .rond { border-color: rgba(18, 24, 23, 0.25); color: var(--basalte); }
}
.fond-lagon .surtitre { color: #CDEBE6; }
.fond-lagon h2 em { color: #CDEBE6; }
.fond-lagon .chapeau { color: rgba(245, 242, 236, 0.85); }
.fond-lagon .idee { background: rgba(18, 24, 23, 0.22); border-color: rgba(245, 242, 236, 0.16); }
.orn-terrasses { position: absolute; left: 0; right: 0; bottom: 0; height: 160px; color: var(--terre); opacity: 0.22; pointer-events: none; }
.orn-terrasses .orn { width: 100%; height: 100%; }

/* activités */
.capteur { transition: transform 0.3s var(--ease); }
.capteur.allume { transform: scale(1.6); box-shadow: 0 0 0 6px rgba(255, 77, 46, 0.35), 0 0 26px #FF4D2E; }
.jeu-laser { position: relative; overflow: hidden; }
.faisceaux { position: absolute; inset: -40% -20%; z-index: 0; rotate: -16deg; pointer-events: none; overflow: hidden; }
.faisceaux-piste { position: absolute; inset: 0 -400px 0 0; background: repeating-linear-gradient(90deg, transparent 0 199px, rgba(227, 120, 90, 0.5) 199px 200px, transparent 200px 330px, rgba(227, 120, 90, 0.22) 330px 331px, transparent 331px 400px); animation: faisceaux 14s linear infinite; animation-play-state: paused; }
@keyframes faisceaux { to { transform: translateX(-400px); } }
.jeu-grille { display: grid; gap: 30px; align-items: center; }
.jeu-grille .cadre-image { aspect-ratio: 4 / 3.2; }
@media (min-width: 900px) { .jeu-grille { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 70px; } .jeu-grille-inverse > :first-child { order: 2; } }
.chiffres { margin-top: 20px; }
.jeu-modes { margin-top: 14px; color: rgba(245, 242, 236, 0.75); }
.chiffres-clair li { border-color: rgba(18, 24, 23, 0.2); }
.carte-enigme { position: relative; margin: 20px 10px 30px; padding: 18px; border-radius: var(--rayon); background: var(--grain), #FBF4E4; border: 1px solid rgba(140, 90, 52, 0.25); color: #8C5A34; }
.carte-enigme-dessin .orn { width: 100%; height: auto; }
.polaroid { position: absolute; width: 36%; padding: 6px 6px 18px; border-radius: 6px; background: #fff; }
.polaroid .cadre-image { aspect-ratio: 1; border-radius: 3px; }
.polaroid.p1 { left: -8px; bottom: -26px; rotate: -6deg; }
.polaroid.p2 { right: -8px; top: -22px; rotate: 5deg; }
.buzzers { display: flex; gap: 18px; margin: 30px 0 8px; }
.buzzer { width: 54px; height: 54px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.6), transparent 40%), var(--c); box-shadow: 0 8px 0 rgba(0, 0, 0, 0.25); animation: buzzer 4s ease-in-out infinite; animation-play-state: paused; }
.en-vue .buzzer { animation-play-state: running; }
.buzzer.b1 { --c: var(--terre); }
.buzzer.b2 { --c: var(--soleil); animation-delay: 1s; }
.buzzer.b3 { --c: #CDEBE6; animation-delay: 2s; }
.buzzer.b4 { --c: var(--terre-clair); animation-delay: 3s; }
@keyframes buzzer { 0%, 70%, 100% { transform: none; } 80% { transform: translateY(4px); box-shadow: 0 4px 0 rgba(0, 0, 0, 0.25), 0 0 24px var(--c); } }
@media (prefers-reduced-motion: reduce) { .buzzer, .fanion, .ampoule, .faisceaux-piste { animation: none !important; } .capteur { transition: none; } }

@media (min-width: 900px) { .deroule-fil, .moment::before { display: none; } }
.moment { overflow: visible; }

.section, .bande-espace { position: relative; overflow-x: clip; }

.prestation .dessin-presta { width: 92px; height: 76px; }
@media (min-width: 900px) { .prestation .dessin-presta { width: 120px; height: 100px; } }
@media (min-width: 761px) {
  .fond-confettis.heros { padding-top: 120px; }
  .heros-fanions { z-index: 0; top: 0; height: 130px; }
}
@media (max-width: 760px) {
  .fond-confettis.heros { padding-top: 54px; }
  .heros-fanions { top: 0; height: 64px; z-index: 0; }
}
@media (max-width: 760px) {
  .fond-confettis.heros { padding-top: 6px; }
  .heros-fanions { top: 10px; left: 16px; right: 16px; height: 56px; z-index: 3; }
  .fond-confettis .heros-gps { display: none; }
  .fond-confettis .heros-contenu .surtitre { font-size: 12.5px; }
}