/* — Passe 3 (deuxième directeur artistique, 19 octobre) — */
.dessin { display: block; width: 100%; height: auto; overflow: visible; color: var(--lagon-fonce); }

/* 1. anniversaires : la photo agrandie, calée en bas, le parking sort du cadre */
.heros-anniv .heros-cadre .cadre-image img { object-position: 50% 100%; transform-origin: 50% 100%; transform: scale(1.25); animation: zoom-anniv 30s ease-in-out infinite alternate; }
@keyframes zoom-anniv { from { transform: scale(1.25); } to { transform: scale(1.31); } }
@media (prefers-reduced-motion: reduce) { .heros-anniv .heros-cadre .cadre-image img { animation: none !important; transform: scale(1.25); } }

/* 2. les cartons d'invitation */
.cartons-section { position: relative; overflow-x: clip; }
.cartons-zone { position: relative; margin-top: 30px; }
.cartons-fanions { position: absolute; left: calc(var(--gouttiere) * -1); right: calc(var(--gouttiere) * -1); top: -6px; height: 70px; z-index: 0; pointer-events: none; }
.cartons-fanions .orn { width: 100%; height: 100%; }
.cartons { position: relative; z-index: 1; display: flex; gap: 16px; overflow-x: auto; margin: 0 calc(var(--gouttiere) * -1); padding: 64px var(--gouttiere) 26px; scroll-snap-type: x proximity; touch-action: pan-x pan-y; overscroll-behavior-x: contain; scrollbar-width: none; scroll-padding-inline: var(--gouttiere); }
.cartons::-webkit-scrollbar { display: none; }
.carton { flex: 0 0 min(76%, 290px); scroll-snap-align: start; display: grid; align-content: start; gap: 10px; padding: 22px 20px 24px; border-radius: 10px; color: var(--basalte);
  background: var(--grain), #FBF6EC; border: 1px solid rgba(18, 24, 23, 0.08);
  box-shadow: inset 0 0 0 6px #FBF6EC, inset 0 0 0 8px var(--liseret), 0 22px 36px -24px rgba(0, 0, 0, 0.55);
  rotate: var(--angle); transition: rotate 0.45s var(--ease), translate 0.45s var(--ease), box-shadow 0.45s var(--ease); }
.carton .dessin { width: 120px; height: 100px; color: var(--lagon-fonce); margin: 4px 0 2px; }
.carton h3 { font-size: 24px; }
.carton p { font-size: 16px; color: rgba(18, 24, 23, 0.74); }
@media (hover: hover) { .carton:hover { rotate: 0deg; translate: 0 -6px; } }
.carton:active, .carton:focus-within { rotate: 0deg; translate: 0 -6px; }
@media (min-width: 900px) {
  .cartons { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; overflow: visible; margin: 0; padding: 74px 0 10px; }
  .cartons-fanions { left: -40px; right: -40px; height: 100px; }
  .carton { padding: 28px 24px 30px; }
}

/* 3. la mosaïque des anniversaires : fond fête, confettis clairs */
.fond-fete { background: var(--grain-clair), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cg opacity='.14'%3E%3Crect x='20' y='30' width='9' height='4' rx='1' fill='%23E39B78' transform='rotate(30 24 32)'/%3E%3Crect x='120' y='18' width='9' height='4' rx='1' fill='%23CDEBE6' transform='rotate(-20 124 20)'/%3E%3Ccircle cx='180' cy='90' r='3' fill='%23F6D27A'/%3E%3Crect x='70' y='110' width='10' height='4' rx='1' fill='%23F6D27A' transform='rotate(70 75 112)'/%3E%3Ccircle cx='30' cy='170' r='3' fill='%23CDEBE6'/%3E%3Crect x='150' y='170' width='9' height='4' rx='1' fill='%23E39B78' transform='rotate(-50 154 172)'/%3E%3C/g%3E%3C/svg%3E"), var(--basalte); }

/* 7. mosaïques de 6 photos : 7/5, puis 4/4/4, puis une photo en pleine largeur */
.mosaique-6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mosaique-6 .vignette { aspect-ratio: 4 / 3; grid-row: auto; grid-column: auto; }
.mosaique-6 .vignette:first-child, .mosaique-6 .vignette:last-child { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
@media (min-width: 900px) {
  .mosaique-6 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .mosaique-6 .vignette:nth-child(1) { grid-column: span 7; aspect-ratio: auto; height: 380px; }
  .mosaique-6 .vignette:nth-child(2) { grid-column: span 5; aspect-ratio: auto; height: 380px; }
  .mosaique-6 .vignette:nth-child(3), .mosaique-6 .vignette:nth-child(4), .mosaique-6 .vignette:nth-child(5) { grid-column: span 4; aspect-ratio: 4 / 3; }
  .mosaique-6 .vignette:nth-child(6) { grid-column: 1 / -1; aspect-ratio: 21 / 8; }
}

/* 4. le terrain de jeu : le dessin en grand, les repères sur la photo */
.orn-terrain-bord { position: absolute; right: -6%; bottom: -6%; width: min(110vw, 860px); color: var(--terre); opacity: 0.17; pointer-events: none; z-index: 0;
  -webkit-mask: linear-gradient(90deg, transparent 0%, #000 45%); mask: linear-gradient(90deg, transparent 0%, #000 45%); }
.orn-terrain-bord .orn { width: 100%; height: auto; }
.repere-terrain { position: absolute; z-index: 2; display: flex; align-items: center; gap: 8px; translate: -17px -17px; opacity: 1; transition: opacity 0.5s var(--ease), transform 0.5s var(--ease); }
.repere-terrain b { width: 34px; height: 34px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--terre); color: #fff; font: 750 14px var(--texte); box-shadow: 0 0 0 6px rgba(180, 81, 45, 0.3), 0 6px 18px rgba(0, 0, 0, 0.35); }
.repere-terrain span { padding: 5px 10px; border-radius: 999px; background: rgba(18, 24, 23, 0.78); color: #fff; font-size: 14px; font-weight: 650; white-space: nowrap; }
.repere-droite { flex-direction: row-reverse; translate: calc(-100% + 17px) -17px; }
.js [data-reperes] .repere-terrain { opacity: 0; transform: scale(0.6); }
.js [data-reperes].reperes-on .repere-terrain { opacity: 1; transform: none; }
.js [data-reperes].reperes-on .repere-terrain:nth-of-type(2) { transition-delay: 0.6s; }
.js [data-reperes].reperes-on .repere-terrain:nth-of-type(3) { transition-delay: 1.2s; }
@media (max-width: 520px) {
  .repere-terrain span { font-size: 12.5px; padding: 4px 8px; white-space: normal; max-width: 150px; }
  .repere-terrain b { width: 28px; height: 28px; }
}
@media (prefers-reduced-motion: reduce) { .js [data-reperes] .repere-terrain { opacity: 1; transform: none; transition: none; } }
.terrain .cadre-image { aspect-ratio: 4 / 3.4; }

/* 5. les badges d'équipe */
.badges-section { position: relative; overflow-x: clip; }
.faisceaux-pales { opacity: 0.28; }
.badges { position: relative; z-index: 1; display: grid; gap: 18px; margin-top: 34px; }
.badge { position: relative; display: grid; grid-template-columns: 78px 1fr; column-gap: 16px; align-items: center; padding: 18px 20px; border-radius: 22px 22px 40px 40px;
  background: var(--grain), #FFFDF8; border: 2px solid var(--equipe); box-shadow: inset 0 0 0 5px #FFFDF8, inset 0 0 0 6.5px color-mix(in srgb, var(--equipe) 40%, transparent), 0 18px 30px -22px rgba(0, 0, 0, 0.45);
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease); outline: none; }
.badge-embleme { grid-row: 1 / span 3; width: 78px; height: 78px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--equipe) 14%, #fff); border: 1.5px dashed var(--equipe); }
.badge-embleme .dessin { width: 58px; height: 50px; color: var(--equipe); --acc: var(--basalte); }
.badge-equipe { font-size: 13px; font-weight: 750; letter-spacing: 0.16em; text-transform: uppercase; color: var(--equipe); }
.badge h3 { font-size: 22px; margin-top: 2px; }
.badge p { font-size: 15.5px; color: rgba(18, 24, 23, 0.72); margin-top: 4px; }
.badge::after { content: ""; position: absolute; inset: -2px; border-radius: inherit; pointer-events: none; box-shadow: 0 0 0 0 rgba(255, 77, 46, 0.55); }
@media (hover: hover) { .badge:hover { transform: translateY(-4px); } .badge:hover::after { animation: touche 0.7s var(--ease); } }
.badge:active::after, .badge:focus-visible::after { animation: touche 0.7s var(--ease); }
@keyframes touche { 0% { box-shadow: 0 0 0 0 rgba(255, 77, 46, 0.6); } 100% { box-shadow: 0 0 0 18px rgba(255, 77, 46, 0); } }
@media (min-width: 900px) {
  .badges { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
  .badge { grid-template-columns: 1fr; justify-items: center; text-align: center; padding: 30px 26px 40px; row-gap: 6px; }
  .badge-embleme { grid-row: auto; width: 104px; height: 104px; margin-bottom: 8px; }
  .badge-embleme .dessin { width: 76px; height: 64px; }
}

/* 6. dessins du bas du quiz */
.idee-dessin .dessin { width: 64px; height: 54px; color: var(--soleil); --acc: var(--terre-clair); }
@media (min-width: 900px) { .idee-dessin .dessin { width: 84px; height: 70px; } }

/* 8. les autres pages, en haut du coucher de soleil */
.voisines-nuit { display: grid; gap: 10px; margin: 0 0 56px; }
.voisine-nuit { position: relative; overflow: hidden; isolation: isolate; display: grid; grid-template-columns: 64px 1fr 24px; gap: 14px; align-items: center; min-height: 88px; padding: 10px 16px 10px 10px; border-radius: 20px; border: 1px solid var(--trait-clair); background: rgba(28, 37, 35, 0.75); color: var(--chaux); text-decoration: none; transition: border-color 0.3s, background-color 0.3s; }
.voisine-vignette { width: 64px; height: 64px; border-radius: 14px; overflow: hidden; }
.voisine-vignette img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease); }
.voisine-titre { font-family: var(--titre); font-size: 22px; line-height: 1.15; }
.voisine-nuit > svg:not(.orn) { width: 22px; height: 22px; transition: transform 0.4s var(--ease); }
.voisine-fil { position: absolute; inset: 0; width: 100%; height: 60%; z-index: -1; opacity: 0.35; color: rgba(245, 242, 236, 0.6); pointer-events: none; }
.fil-quadrille { background: var(--grain-clair), linear-gradient(rgba(245, 242, 236, 0.07) 1px, transparent 1px), linear-gradient(90deg, rgba(245, 242, 236, 0.07) 1px, transparent 1px), rgba(28, 37, 35, 0.75); background-size: auto, 18px 18px, 18px 18px, auto; }
.fil-faisceaux { background: repeating-linear-gradient(118deg, transparent 0 46px, rgba(227, 120, 90, 0.28) 46px 47px), rgba(28, 37, 35, 0.75); }
@media (hover: hover) {
  .voisine-nuit:hover { border-color: rgba(245, 242, 236, 0.45); }
  .voisine-nuit:hover .voisine-vignette img { transform: scale(1.1); }
  .voisine-nuit:hover > svg:not(.orn) { transform: translateX(5px); }
}
.voisine-nuit:active { transform: scale(0.98); }
@media (min-width: 900px) { .voisines-nuit { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-bottom: 80px; } .voisine-nuit { grid-template-columns: 84px 1fr 24px; min-height: 108px; } .voisine-vignette { width: 84px; height: 84px; } }

/* 9. l'écume douce, seulement sur ordinateur */
.heros-ecume { left: 6px; right: auto; bottom: 6px; width: 52%; height: 22%; border-radius: 0 0 0 24px; opacity: 1; }
.orn-ecume-douce .vague { opacity: 0.6; animation: vague-douce 9s ease-in-out infinite alternate; animation-play-state: paused; }
.orn-ecume-douce .v1 { animation-duration: 11s; animation-delay: -3s; opacity: 0.5; }
.orn-ecume-douce .v2 { animation-duration: 13s; animation-delay: -6s; opacity: 0.45; }
.orn-ecume-douce .v3 { animation-duration: 10s; animation-delay: -2s; opacity: 0.55; }
.en-vue .orn-ecume-douce .vague { animation-play-state: running; }
@keyframes vague-douce { from { transform: translate(-10px, 4px); } to { transform: translate(14px, -3px); } }
@media (max-width: 760px) { .heros-ecume { display: none; } }
@media (prefers-reduced-motion: reduce) { .orn-ecume-douce .vague { animation: none !important; } }

/* 10. infos pratiques : la route en grand derrière la section */
.infos { position: relative; overflow-x: clip; }
.route-fond { position: absolute; z-index: 0; inset: 0; color: var(--terre); opacity: 0.16; pointer-events: none; -webkit-mask: linear-gradient(180deg, #000 0%, #000 70%, transparent 100%); mask: linear-gradient(180deg, #000 0%, #000 70%, transparent 100%); }
.route-fond .orn { position: absolute; right: -4%; top: 2%; width: max(110%, 760px); height: auto; }
.route-fond .point-domaine, .route-fond .point-onde { color: var(--terre); }
.route-fond .orn-lacets { opacity: 1; }
.infos .info { position: relative; z-index: 1; background: rgba(255, 255, 255, 0.86); }
.adresse-lignes { font-size: 17px; }
.coordonnees { margin-top: 10px; font-size: 15px; letter-spacing: 0.06em; color: rgba(18, 24, 23, 0.65); }
.nw { white-space: nowrap; }
.info-adresse .bouton { margin-top: 18px; }
@media (min-width: 900px) { .route-fond { opacity: 0.2; } .route-fond .orn { width: 78%; right: -6%; top: -6%; } }
.legende span { white-space: normal; }

/* 11. mariages : l'arche autour du cadre photo */
.heros-cadre { overflow: visible; }
.heros-cadre .heros-arche { position: absolute; z-index: 3; color: #fff; opacity: 0.75; left: 18px; right: 18px; top: 14px; height: 46%; width: auto; }
@media (min-width: 761px) {
  .heros-cadre .heros-arche { z-index: -1; color: var(--terre); opacity: 0.55; left: -56px; right: -56px; top: -64px; height: 72%; }
}

/* 12. la carte « Le soir » : la salle claire, la guirlande qui déborde sur la photo */
.moment-photo-soir { position: relative; overflow: visible; }
.moment-photo-soir .cadre-image { aspect-ratio: 16 / 10; }
.guirlande-photo { position: absolute; left: -12px; right: -12px; top: -14px; height: 60px; z-index: 3; color: rgba(245, 242, 236, 0.6); pointer-events: none; }
.guirlande-photo .orn { width: 100%; height: 100%; }

/* 1 (suite) : la pelouse sous l'arc-en-ciel, recadrée sur la pelouse et l'arc */
.heros-anniv .heros-cadre .cadre-image img { object-position: 50% 62%; transform-origin: 50% 70%; transform: none; animation: zoom-lent 30s ease-in-out infinite alternate; }
@media (prefers-reduced-motion: reduce) { .heros-anniv .heros-cadre .cadre-image img { transform: none; } }

/* 4 (suite) : sur téléphone, les repères gardent leur numéro, la légende passe sous la photo */
.reperes-legende { display: none; list-style: none; margin: 10px 6px 4px; padding: 0; gap: 8px; }
.reperes-legende li { display: flex; align-items: center; gap: 10px; font-size: 15.5px; font-weight: 600; }
.reperes-legende b { width: 26px; height: 26px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--terre); color: #fff; font-size: 13px; }
@media (max-width: 620px) {
  .repere-terrain span { display: none; }
  .repere-droite { translate: -17px -17px; }
  .reperes-legende { display: grid; }
}

/* 10 (suite) : la route placée pour que le domaine pulse dans le vide en haut à droite */
.route-fond { opacity: 0.22; -webkit-mask: none; mask: none; }
.route-fond .orn { position: absolute; width: 1300px; max-width: none; top: -420px; left: calc(100% - 260px - 554px); right: auto; }
@media (max-width: 899px) {
  .route-fond .orn { width: 760px; top: -300px; left: calc(100% - 70px - 324px); }
}
.route-fond { opacity: 0.3; }
.route-fond .orn { width: 2000px; top: -717px; left: calc(100% - 260px - 853px); }
.route-fond .orn path:first-of-type { opacity: 0.55 !important; }
@media (max-width: 899px) { .route-fond .orn { width: 1000px; top: -399px; left: calc(100% - 60px - 427px); } }
@media (min-width: 761px) {
  .fond-ciel.heros { padding-top: 96px; }
  .fond-ciel .heros-cadre { height: calc(100svh - var(--entete-h) - 150px); }
  .heros-cadre .heros-arche { left: -58px; right: -58px; top: -92px; height: 80%; opacity: 0.7; }
}

/* — Passe 4 (troisième directeur artistique) — */
/* 2. la vraie arche autour du cadre à 1440 ; l'ancienne reste pour le téléphone */
.heros-arche-cadre { display: none; }
@media (min-width: 761px) {
  .heros-cadre .heros-arche { display: none; }
  .heros-arche-cadre { display: block; position: absolute; z-index: -1; left: -50px; right: -50px; top: -60px; bottom: 0; color: var(--terre); opacity: 0.6; pointer-events: none; }
  .heros-arche-cadre .orn { width: 100%; height: 100%; }
}
/* 3. mariages à 390 : la photo calée plus bas, seul le bas du cadre assombri */
@media (max-width: 760px) {
  .fond-ciel .heros-cadre .cadre-image img { object-position: 50% 75%; }
  .fond-ciel .heros-cadre .cadre-image::after { background: linear-gradient(180deg, rgba(18, 24, 23, 0) 0%, rgba(18, 24, 23, 0) 46%, rgba(18, 24, 23, 0.72) 66%, rgba(18, 24, 23, 0.94) 100%); }
}
/* 1. anniversaires : la photo cadrée sur la pelouse et la mer */
.heros-anniv .heros-cadre .cadre-image img { object-position: 50% 88%; }
/* 4. la guirlande sur le format arbre de Noël */
.format-noel { position: relative; overflow: visible; }
.format-noel .guirlande-photo { color: rgba(18, 24, 23, 0.45); }
.formats-photo .cadre-image img:nth-child(3) { object-position: 50% 70%; }
/* 7. les faisceaux de « Qui vient jouer », bien visibles */
.faisceaux-pales { opacity: 1; }
.faisceaux-pales .faisceaux-piste { background: repeating-linear-gradient(90deg, transparent 0 279px, rgba(180, 81, 45, 0.15) 279px 282px, transparent 282px 520px); }
.badges-section .large > .surtitre, .badges-section .titre-section { position: relative; }
.badges-section .titre-section::before { content: ""; position: absolute; inset: -20px -30px; z-index: -1; background: radial-gradient(ellipse, rgba(240, 236, 228, 0.92) 40%, transparent 75%); }
/* 8. l'écume décalée vers l'eau qui casse, masquée à la mer */
@media (min-width: 761px) {
  .heros-ecume { left: 6px; width: 40%; height: 20%; -webkit-mask: linear-gradient(90deg, #000 55%, transparent 85%); mask: linear-gradient(90deg, #000 55%, transparent 85%); }
  .orn-ecume-douce { transform: translateX(-70px); }
}
/* 9. entreprises à 390 : la légende du cadre sous les autocollants */
@media (max-width: 1099px) { .etiquettes-equipe { margin-top: 14px; } }
@media (max-width: 760px) {
  .heros-anniv .heros-cadre .cadre-image img { animation: none; transform-origin: 50% 100%; transform: scale(1.45); object-position: 50% 100%; }
  .fond-ciel .heros-cadre .cadre-image img { animation: none; transform-origin: 50% 100%; transform: scale(1.3); }
}
@media (max-width: 760px) {
  .fond-ciel .heros-cadre .cadre-image::after { background: linear-gradient(180deg, rgba(18, 24, 23, 0) 0%, rgba(18, 24, 23, 0) 30%, rgba(18, 24, 23, 0.55) 45%, rgba(18, 24, 23, 0.9) 72%, rgba(18, 24, 23, 0.95) 100%); }
}